Update box component

src/components/Box/index.tsx

@@ -5,6 +5,9 @@ export type BoxProps = {
   className?: string;
   children?: React.ReactNode | JSX.Element | string;
 
+  onClick?: () => void;
+  cursor?: 'pointer' | 'default';
+
   position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
   zIndex?: string;
   top?: string;
@@ -40,6 +43,8 @@ export type BoxProps = {
     | 'flex-end'
     | 'space-between'
     | 'space-around';
+  alignSelf?: 'center' | 'flex-start' | 'flex-end';
+  justifySelf?: 'center' | 'flex-start' | 'flex-end';
 
   boxSizing?: 'content-box' | 'border-box';
   width?: string;

src/components/Box/styles.ts

@@ -2,6 +2,8 @@ import styled from 'styled-components';
 import { BoxProps } from '.';
 
 export const Wrapper = styled.div<BoxProps>`
+  ${({ cursor }) => cursor && `cursor: ${cursor}`}
+
   ${({ position }) => position && `position: ${position}`};
   ${({ zIndex }) => zIndex && `z-index: ${zIndex}`};
   ${({ top }) => top && `top: ${top}`};
@@ -36,6 +38,8 @@ export const Wrapper = styled.div<BoxProps>`
   ${({ alignItems }) => alignItems && `align-items: ${alignItems}`};
   ${({ justifyContent }) =>
     justifyContent && `justify-content: ${justifyContent}`};
+  ${({ alignSelf }) => alignSelf && `align-self: ${alignSelf}`};
+  ${({ justifySelf }) => justifySelf && `justify-self: ${justifySelf}`};
 
   ${({ boxSizing }) => boxSizing && `box-sizing: ${boxSizing}`};
   ${({ width }) => width && `width: ${width}`};