@cyber-harbour/ui 1.0.60 → 1.0.62

package/package.json

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

package/src/Core/Alert/Alert.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
-import { FabricComponent, createComponent, generatePropertySpaceStyle } from '../../Theme';
+import {
+  FabricComponent,
+  StyledFabricComponent,
+  createComponent,
+  createStyledComponent,
+  generatePropertySpaceStyle,
+} from '../../Theme';
 import { AlertIcon } from '../IconComponents';
 
 type AlertProps = FabricComponent<{
@@ -9,7 +15,7 @@ type AlertProps = FabricComponent<{
 }> &
   Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
 
-export const Alert = ({ title, note, ...props }: AlertProps) => {
+export const Alert = createComponent<AlertProps>(({ title, note, ...props }) => {
   return (
     <StyledContainer {...props}>
       <IconWrapper>
@@ -21,7 +27,7 @@ export const Alert = ({ title, note, ...props }: AlertProps) => {
       </div>
     </StyledContainer>
   );
-};
+});
 
 const IconWrapper = styled.div(
   ({ theme: { alert } }) => `
@@ -60,8 +66,8 @@ const Note = styled.p(
 `
 );
 
-const StyledContainer = createComponent(
-  styled.div<FabricComponent>(
+const StyledContainer = createStyledComponent(
+  styled.div<StyledFabricComponent>(
     ({ theme, py = theme.alert.paddingBlock, pl = theme.alert.paddingLeft, pr = theme.alert.paddingRight }) => {
       return `
     display: flex;

package/src/Core/Box/Box.tsx

@@ -1,33 +1,35 @@
 import {
   ColorVariant,
   createComponent,
+  createStyledComponent,
   FabricComponent,
   generatePropertySpaceStyle,
   resolveThemeColor,
+  StyledFabricComponent,
 } from '../../Theme';
 import { styled } from 'styled-components';
 
-type BoxProps = FabricComponent<
-  {
-    children: any;
-    element?: 'div' | 'section';
-    hasBorder?: boolean;
-    color?: ColorVariant | string;
-  } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
->;
+type BoxProps = {
+  children?: any;
+  element?: 'div' | 'section';
+  hasBorder?: boolean;
+  color?: ColorVariant | string;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 
-export const Box = ({ children, element = 'div', hasBorder = true, color, ...props }: BoxProps) => {
-  return (
-    <StyledBox as={element} $hasBorder={hasBorder} $color={color} {...props}>
-      {children}
-    </StyledBox>
-  );
-};
+export const Box = createComponent<BoxProps>(
+  ({ children, element = 'div', hasBorder = true, color, ...props }): any => {
+    return (
+      <StyledBox as={element} $hasBorder={hasBorder} $color={color} {...props}>
+        {children}
+      </StyledBox>
+    );
+  }
+);
 
 type StyledProps = { $hasBorder: boolean; $color?: string };
 
-const StyledBox = createComponent(
-  styled('div')<FabricComponent<StyledProps>>(
+const StyledBox = createStyledComponent(
+  styled('div')<StyledFabricComponent<StyledProps>>(
     ({ theme, $hasBorder, $color, px = theme.box.padding, py = theme.box.padding }) => `
       ${generatePropertySpaceStyle(theme, 'padding-inline', px)}
       ${generatePropertySpaceStyle(theme, 'padding-block', py)}

package/src/Core/Button/Button.tsx

@@ -8,11 +8,12 @@ import {
   getButtonSizeStyles,
   ButtonElementStyle,
   createComponent,
-  FabricComponent,
   generatePropertySpaceStyle,
+  createStyledComponent,
+  StyledFabricComponent,
 } from '../../Theme';
 
-type BaseButtonProps = FabricComponent<{
+type BaseButtonProps = {
   children?: any;
   variant?: ButtonVariant;
   color?: ButtonColor;
@@ -23,11 +24,10 @@ type BaseButtonProps = FabricComponent<{
   icon?: any;
   iconPosition?: 'left' | 'right';
   iconVariant?: 'filled' | 'empty';
-}>;
-
+};
 export type ButtonProps = (
-  | Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'>
-  | Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>
+  | Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'media'>
+  | Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'media'>
 ) &
   BaseButtonProps;
 
@@ -70,21 +70,22 @@ type StyledButtonProps = {
   $iconVariant: 'filled' | 'empty';
 };
 
-const Btn = styled.button<FabricComponent<StyledButtonProps>>(
-  ({
-    $variant,
-    $color,
-    $size,
-    $disabled,
-    $fullWidth,
-    $iconPosition,
-    $iconVariant,
-    theme,
-    px = $variant !== 'empty' ? theme.button.sizes[$size].paddingInline : 0,
-    py = $variant !== 'empty' ? theme.button.sizes[$size].paddingBlock : 0,
-  }) => {
-    const sizes = getButtonSizeStyles(theme, $size);
-    return `
+const StyledButton = createStyledComponent(
+  styled.button<StyledFabricComponent<StyledButtonProps>>(
+    ({
+      $variant,
+      $color,
+      $size,
+      $disabled,
+      $fullWidth,
+      $iconPosition,
+      $iconVariant,
+      theme,
+      px = $variant !== 'empty' ? theme.button.sizes[$size].paddingInline : 0,
+      py = $variant !== 'empty' ? theme.button.sizes[$size].paddingBlock : 0,
+    }) => {
+      const sizes = getButtonSizeStyles(theme, $size);
+      return `
       ${getCss(getButtonStyles(theme, $variant, $color, 'default'))}
       font-size: ${sizes.fontSize};
       gap: ${sizes.gap};
@@ -155,39 +156,42 @@ const Btn = styled.button<FabricComponent<StyledButtonProps>>(
             : ``
         }
     `;
+    }
+  )
+);
+
+export const Button = createComponent<ButtonProps>(
+  ({
+    children,
+    variant = 'fill',
+    color = 'primary',
+    size = 'medium',
+    disabled = false,
+    fullWidth = false,
+    className,
+    icon,
+    iconPosition = 'left',
+    iconVariant = 'empty',
+    ...props
+  }) => {
+    return (
+      // @ts-ignore
+      <StyledButton
+        as={'href' in props ? 'a' : 'button'}
+        $variant={variant}
+        $color={color}
+        $size={size}
+        $disabled={disabled}
+        $fullWidth={fullWidth}
+        $iconPosition={iconPosition}
+        $iconVariant={iconVariant}
+        disabled={disabled}
+        className={className}
+        {...props}
+      >
+        {!!icon && <StyledIconWrapper>{icon}</StyledIconWrapper>}
+        {!!children && <ButtonTextContainer>{children}</ButtonTextContainer>}
+      </StyledButton>
+    );
   }
 );
-const StyledButton = createComponent(Btn);
-
-export const Button = ({
-  children,
-  variant = 'fill',
-  color = 'primary',
-  size = 'medium',
-  disabled = false,
-  fullWidth = false,
-  className,
-  icon,
-  iconPosition = 'left',
-  iconVariant = 'empty',
-  ...props
-}: ButtonProps) => {
-  return (
-    <StyledButton
-      as={'href' in props ? 'a' : 'button'}
-      $variant={variant}
-      $color={color}
-      $size={size}
-      $disabled={disabled}
-      $fullWidth={fullWidth}
-      $iconPosition={iconPosition}
-      $iconVariant={iconVariant}
-      disabled={disabled}
-      className={className}
-      {...props}
-    >
-      {!!icon && <StyledIconWrapper>{icon}</StyledIconWrapper>}
-      {!!children && <ButtonTextContainer>{children}</ButtonTextContainer>}
-    </StyledButton>
-  );
-};

package/src/Core/Checkbox/Checkbox.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
-import { FabricComponent, createComponent, destructSpaceProps, pxToRem } from '../../Theme';
+import { createComponent, createStyledComponent, destructSpaceProps, pxToRem } from '../../Theme';
 
-type CheckboxProps = FabricComponent<{
+type CheckboxProps = {
   label?: any;
-}> &
-  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
 
-export const Checkbox = ({ label, className, disabled, ...props }: CheckboxProps) => {
+export const Checkbox = createComponent<CheckboxProps>(({ label, className, disabled, ...props }) => {
   const spaceProps = destructSpaceProps(props);
   return (
     <StyledCheckbox className={className} $disabled={disabled} {...spaceProps}>
@@ -16,7 +15,7 @@ export const Checkbox = ({ label, className, disabled, ...props }: CheckboxProps
       {!!label && <LabelText>{label}</LabelText>}
     </StyledCheckbox>
   );
-};
+});
 
 const CustomCheckbox = styled.div(
   ({ theme }) => `
@@ -48,7 +47,7 @@ const HiddenInput = styled.input`
   position: absolute;
 `;
 
-const StyledCheckbox = createComponent(
+const StyledCheckbox = createStyledComponent(
   styled.label<{ $disabled?: boolean }>(({ theme, $disabled }) => {
     return `
     position: relative;

package/src/Core/ContentLoader/ContentLoader.tsx

@@ -0,0 +1,13 @@
+import ReactContentLoader, { IContentLoaderProps } from 'react-content-loader';
+import { useTheme } from 'styled-components';
+
+export interface ContentLoaderProps extends Omit<IContentLoaderProps, 'backgroundColor' | 'foregroundColor'> {
+  children?: any;
+}
+
+export const ContentLoader = (props: ContentLoaderProps) => {
+  const {
+    contentLoader: { foreground, background },
+  } = useTheme();
+  return <ReactContentLoader {...props} backgroundColor={background} foregroundColor={foreground} />;
+};

package/src/Core/ContentLoader/index.ts

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

package/src/Core/Drawer/Drawer.tsx

@@ -1,6 +1,14 @@
 import { createPortal } from 'react-dom';
 import { styled } from 'styled-components';
-import { createComponent, FabricComponent, generatePropertySpaceStyle, propToRem, pxToRem } from '../../Theme';
+import {
+  createComponent,
+  createStyledComponent,
+  FabricComponent,
+  generatePropertySpaceStyle,
+  propToRem,
+  pxToRem,
+  StyledFabricComponent,
+} from '../../Theme';
 import { useBodyScrollLock } from '../../utils';
 import { useEffect, useRef } from 'react';
 
@@ -12,12 +20,12 @@ type DrawerProps = {
   width?: string | number;
 };
 
-export const Drawer = (props: DrawerProps) => {
+export const Drawer = createComponent<DrawerProps>((props) => {
   useBodyScrollLock(props.isOpen);
 
   if (!props.isOpen) return null;
   return createPortal(<DrawerWithOutclick {...props} />, document.body);
-};
+});
 
 const DrawerWithOutclick = ({ onClose, children, width, header }: DrawerProps) => {
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -45,8 +53,8 @@ type DrawerHeaderProps = FabricComponent<{
   children?: any;
 }>;
 
-export const DrawerHeader: any = createComponent<DrawerHeaderProps>(
-  styled.div<DrawerHeaderProps>(
+export const DrawerHeader: any = createStyledComponent<DrawerHeaderProps>(
+  styled.div(
     ({ theme, p = theme.drawer.padding }) => `
     grid-area: drawer-header;
     ${generatePropertySpaceStyle(theme, 'padding', p)};
@@ -57,26 +65,33 @@ export const DrawerHeader: any = createComponent<DrawerHeaderProps>(
   }
 );
 
-type DrawerBodyProps = FabricComponent<{
+type DrawerBodyProps = StyledFabricComponent<{
   children?: any;
 }>;
 
-export const DrawerBody: any = createComponent(
-  styled.div<DrawerBodyProps>(
-    ({ theme, px = theme.drawer.padding, pb = theme.drawer.padding }) => `
+export const DrawerBody: any = createComponent<DrawerBodyProps>(
+  createStyledComponent<DrawerBodyProps>(
+    styled.div(
+      ({ theme, px = theme.drawer.padding, pb = theme.drawer.padding }) => `
   grid-area: drawer-body;
   max-height: 100%;
   overflow-y: auto;
   ${generatePropertySpaceStyle(theme, 'padding-inline', px)};
   ${generatePropertySpaceStyle(theme, 'padding-bottom', pb)};
 `
-  ),
-  {
-    ignoreStyles: ['padding', 'padding-bottom'],
-  }
+    ),
+    {
+      ignoreStyles: ['padding', 'padding-bottom'],
+    }
+  )
 );
 
-const StyledDrawer = styled.div<{ $header?: number; $width?: string | number }>(
+type StyledDrawerProps = {
+  $header?: number;
+  $width?: string | number;
+};
+
+const StyledDrawer = styled.div<StyledDrawerProps>(
   ({ theme, $header, $width }) => `
   position: fixed;
   display: grid;

package/src/Core/Flex/FlexContainer.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties, forwardRef } from 'react';
-import { createComponent, FabricComponent } from '../../Theme';
+import { createComponent, createStyledComponent, FabricComponent, StyledFabricComponent } from '../../Theme';
 import styled from 'styled-components';
 
 export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
@@ -23,46 +23,50 @@ export interface FlexContainerProps extends FabricComponent<Omit<React.HTMLAttri
   as?: any; // TODO: fix type to styled component or intrinsic element
 }
 
-export const FlexContainer: any = forwardRef<HTMLElement, FlexContainerProps>(function FlexContainer(
-  {
-    children,
-    direction = 'row',
-    wrap = 'nowrap',
-    justify = 'flex-start',
-    align = 'stretch',
-    alignContent,
-    gap,
-    rowGap,
-    columnGap,
-    className,
-    style,
-    as = 'div',
-    ...props
-  },
-  ref
-) {
-  return (
-    <StyledFlexContainer
-      as={as}
-      $direction={direction}
-      $wrap={wrap}
-      $justify={justify}
-      $align={align}
-      $alignContent={alignContent}
-      $gap={gap}
-      $rowGap={rowGap}
-      $columnGap={columnGap}
-      className={className}
-      style={style}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </StyledFlexContainer>
-  );
-});
+export const FlexContainer = createComponent<FlexContainerProps, HTMLDivElement>(
+  forwardRef<HTMLDivElement, FlexContainerProps>(
+    (
+      {
+        children,
+        direction = 'row',
+        wrap = 'nowrap',
+        justify = 'flex-start',
+        align = 'stretch',
+        alignContent,
+        gap,
+        rowGap,
+        columnGap,
+        className,
+        style,
+        as = 'div',
+        ...props
+      },
+      ref
+    ) => {
+      return (
+        <StyledContainer
+          as={as}
+          $direction={direction}
+          $wrap={wrap}
+          $justify={justify}
+          $align={align}
+          $alignContent={alignContent}
+          $gap={gap}
+          $rowGap={rowGap}
+          $columnGap={columnGap}
+          className={className}
+          style={style}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </StyledContainer>
+      );
+    }
+  )
+);
 
-interface StyledFlexContainerProps {
+type StyledFlexContainerProps = StyledFabricComponent<{
   $direction: FlexDirection;
   $wrap: FlexWrap;
   $justify: FlexJustify;
@@ -71,9 +75,9 @@ interface StyledFlexContainerProps {
   $gap?: FlexGap;
   $rowGap?: FlexGap;
   $columnGap?: FlexGap;
-}
+}>;
 
-const StyledContainer = styled.div<StyledFlexContainerProps>`
+const StyledContainer = createStyledComponent<StyledFlexContainerProps>(styled.div`
   ${({ $direction, $wrap, $justify, $align, $alignContent, $gap, $rowGap, $columnGap }) => `
     display: flex;
     width: 100%;
@@ -87,6 +91,4 @@ const StyledContainer = styled.div<StyledFlexContainerProps>`
     ${$rowGap !== undefined ? `row-gap: ${typeof $rowGap === 'number' ? `${$rowGap}px` : $rowGap};` : ''}
     ${$columnGap !== undefined ? `column-gap: ${typeof $columnGap === 'number' ? `${$columnGap}px` : $columnGap};` : ''}
   `}
-`;
-
-const StyledFlexContainer = createComponent(StyledContainer);
+`);

package/src/Core/Flex/FlexItem.tsx

@@ -1,5 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { styled } from 'styled-components';
+import { createComponent } from '../../Theme';
 
 export type FlexItemGrow = number;
 export type FlexItemShrink = number;
@@ -18,32 +19,24 @@ export interface FlexItemProps {
   as?: any; //TODO: fix type to styled component or intrinsic element
 }
 
-export const FlexItem = ({
-  children,
-  grow,
-  shrink,
-  basis,
-  align,
-  order,
-  className,
-  style,
-  as = 'div',
-}: FlexItemProps) => {
-  return (
-    <StyledFlexItem
-      as={as}
-      $grow={grow}
-      $shrink={shrink}
-      $basis={basis}
-      $align={align}
-      $order={order}
-      className={className}
-      style={style}
-    >
-      {children}
-    </StyledFlexItem>
-  );
-};
+export const FlexItem = createComponent<FlexItemProps>(
+  ({ children, grow, shrink, basis, align, order, className, style, as = 'div' }) => {
+    return (
+      <StyledFlexItem
+        as={as}
+        $grow={grow}
+        $shrink={shrink}
+        $basis={basis}
+        $align={align}
+        $order={order}
+        className={className}
+        style={style}
+      >
+        {children}
+      </StyledFlexItem>
+    );
+  }
+);
 
 interface StyledFlexItemProps {
   $grow?: FlexItemGrow;

package/src/Core/IconComponents/FlashIcon.tsx

@@ -0,0 +1,16 @@
+import { SVGProps } from 'react';
+
+interface FlashIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const FlashIcon = ({ fill = 'currentColor', ...props }: FlashIconProps) => {
+  return (
+    <svg viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M 7.6660156,0.65234375 C 7.4133949,0.5557327 7.1358962,0.60336238 6.9023437,0.72070312 6.6687913,0.83804387 6.4563704,1.0238164 6.2421875,1.2714844 a 0.40004001,0.40004001 0 0 0 -0.00195,0 L 1.0390625,7.2910156 a 0.40004001,0.40004001 0 0 0 -0.00195,0.00195 C 0.66831145,7.7258208 0.48003352,8.2197174 0.67773437,8.6640625 0.87543523,9.1084076 1.3750452,9.296875 1.9394531,9.296875 h 1.7246094 v 4.638672 c 0,0.329424 0.040225,0.610814 0.1386719,0.853516 0.098447,0.242701 0.2727646,0.461984 0.5253906,0.558593 0.252626,0.09661 0.5301197,0.04899 0.7636719,-0.06836 0.2335521,-0.117352 0.4479278,-0.303095 0.6621093,-0.550781 L 10.955078,8.7109375 v -0.00195 C 11.327713,8.2797425 11.519652,7.7831519 11.322266,7.3378906 11.124617,6.8920374 10.622895,6.703125 10.054688,6.703125 H 8.3320313 V 2.0644531 c 0,-0.3294234 -0.040224,-0.6108149 -0.1386719,-0.8535156 C 8.0949118,0.96823685 7.9186363,0.7489548 7.6660156,0.65234375 Z M 7.3808594,1.4003906 c -9.672e-4,-3.699e-4 0.027688,0.00625 0.070312,0.1113281 0.042624,0.1050814 0.080078,0.2942094 0.080078,0.5527344 v 5.0390625 a 0.40004001,0.40004001 0 0 0 0.4003906,0.4003906 h 2.1230474 c 0.400591,0 0.518333,0.1158494 0.537109,0.1582032 0.01878,0.042354 0.02525,0.218143 -0.240234,0.5234375 a 0.40004001,0.40004001 0 0 0 -0.002,0 L 5.1484375,14.205078 c -0.167163,0.193313 -0.3178234,0.310037 -0.4160156,0.359375 -0.098192,0.04934 -0.1201131,0.03478 -0.1191407,0.03516 9.725e-4,3.72e-4 -0.027688,-0.0062 -0.070312,-0.111328 -0.042625,-0.105082 -0.080078,-0.294209 -0.080078,-0.552734 V 8.8964844 A 0.40004001,0.40004001 0 0 0 4.0625,8.4960938 H 1.9394531 c -0.3975381,0 -0.5125133,-0.1141382 -0.53125,-0.15625 C 1.3894664,8.2977319 1.3831449,8.1196241 1.6464844,7.8105469 L 6.8457031,1.7949219 C 7.0128648,1.6016263 7.1635269,1.4848801 7.2617187,1.4355469 7.3599106,1.3862136 7.3818266,1.4007605 7.3808594,1.4003906 Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/UserInCircle.tsx

@@ -0,0 +1,24 @@
+import { SVGProps } from 'react';
+
+interface UserInCircleIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const UserInCircleIcon = ({ fill = 'currentColor', ...props }: UserInCircleIconProps) => {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M8.08031 9.02292C8.06698 9.02292 8.04698 9.02292 8.03365 9.02292C8.01365 9.02292 7.98698 9.02292 7.96698 9.02292C6.45365 8.97625 5.32031 7.79625 5.32031 6.34292C5.32031 4.86292 6.52698 3.65625 8.00698 3.65625C9.48698 3.65625 10.6936 4.86292 10.6936 6.34292C10.687 7.80292 9.54698 8.97625 8.10031 9.02292C8.08698 9.02292 8.08698 9.02292 8.08031 9.02292ZM8.00031 4.64958C7.06698 4.64958 6.31365 5.40958 6.31365 6.33625C6.31365 7.24958 7.02698 7.98958 7.93365 8.02292C7.95365 8.01625 8.02031 8.01625 8.08698 8.02292C8.98031 7.97625 9.68031 7.24292 9.68698 6.33625C9.68698 5.40958 8.93365 4.64958 8.00031 4.64958Z"
+        fill={fill}
+      />
+      <path
+        d="M7.99924 15.1669C6.20591 15.1669 4.49257 14.5002 3.16591 13.2869C3.04591 13.1802 2.99257 13.0202 3.00591 12.8669C3.09257 12.0735 3.58591 11.3335 4.40591 10.7869C6.39257 9.46687 9.61257 9.46687 11.5926 10.7869C12.4126 11.3402 12.9059 12.0735 12.9926 12.8669C13.0126 13.0269 12.9526 13.1802 12.8326 13.2869C11.5059 14.5002 9.79257 15.1669 7.99924 15.1669ZM4.05257 12.7335C5.15924 13.6602 6.55257 14.1669 7.99924 14.1669C9.44591 14.1669 10.8392 13.6602 11.9459 12.7335C11.8259 12.3269 11.5059 11.9335 11.0326 11.6135C9.39257 10.5202 6.61257 10.5202 4.95924 11.6135C4.48591 11.9335 4.17257 12.3269 4.05257 12.7335Z"
+        fill={fill}
+      />
+      <path
+        d="M8.00065 15.1654C4.04732 15.1654 0.833984 11.952 0.833984 7.9987C0.833984 4.04536 4.04732 0.832031 8.00065 0.832031C11.954 0.832031 15.1673 4.04536 15.1673 7.9987C15.1673 11.952 11.954 15.1654 8.00065 15.1654ZM8.00065 1.83203C4.60065 1.83203 1.83398 4.5987 1.83398 7.9987C1.83398 11.3987 4.60065 14.1654 8.00065 14.1654C11.4007 14.1654 14.1673 11.3987 14.1673 7.9987C14.1673 4.5987 11.4007 1.83203 8.00065 1.83203Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -59,3 +59,5 @@ export { RelationPointsIcon } from './RelationPointsIcon';
 export { PassportIcon } from './PassportIcon';
 export { PointIcon } from './PointIcon';
 export { PencilIcon } from './PencilIcon';
+export { UserInCircleIcon } from './UserInCircle';
+export { FlashIcon } from './FlashIcon';