@campxdev/shared 1.8.13 → 1.8.14

package/src/components/IconButtons/IconButtons.tsx

@@ -1,137 +0,0 @@
-import { Box, IconButton, IconButtonProps, styled } from '@mui/material'
-import { ReactNode } from 'react'
-import {
-  DeleteIcon,
-  DisabledDeleteIcon,
-  DisabledEditIcon,
-  EditIcon,
-  ViewIcon,
-  PrintIcon,
-} from './Icons'
-
-interface ButtonProps extends IconButtonProps {
-  disabledText?: string
-  actionType?: 'delete' | 'edit' | 'view' | 'print'
-}
-
-function Button({ ...props }: ButtonProps) {
-  const handleClick = (e) => {
-    e.stopPropagation()
-    if (!props.onClick) return
-    props.onClick(e)
-  }
-  return (
-    <StyledIconButton
-      {...props}
-      onClick={handleClick}
-      actionType={props.actionType ? props.actionType : 'view'}
-    >
-      {props.children}
-    </StyledIconButton>
-  )
-}
-
-function DisabledButton({
-  disabledText,
-  children,
-}: {
-  disabledText?: string
-  children: ReactNode
-}) {
-  return (
-    <Box
-      sx={{
-        maxHeight: '14px',
-      }}
-      title={disabledText ? disabledText : 'disabled'}
-    >
-      {children}
-    </Box>
-  )
-}
-
-export function ViewButton({ disabled, disabledText, ...props }: ButtonProps) {
-  if (disabled) {
-    return (
-      <DisabledButton {...props} disabledText={disabledText}>
-        <ViewIcon />
-      </DisabledButton>
-    )
-  }
-  return (
-    <Button {...props} actionType="view">
-      <ViewIcon />
-    </Button>
-  )
-}
-
-export function EditButton({ disabled, disabledText, ...props }: ButtonProps) {
-  if (disabled) {
-    return (
-      <DisabledButton
-        disabledText={disabledText ?? 'Default types can not be edited'}
-      >
-        <DisabledEditIcon />
-      </DisabledButton>
-    )
-  }
-  return (
-    <Button {...props} actionType="edit">
-      <EditIcon />
-    </Button>
-  )
-}
-
-export function PrintButton({ disabled, disabledText, ...props }: ButtonProps) {
-  if (disabled) {
-    return (
-      <DisabledButton
-        disabledText={disabledText ?? 'Default types can not be edited'}
-      >
-        <DisabledEditIcon />
-      </DisabledButton>
-    )
-  }
-  return (
-    <Button {...props} actionType="print">
-      <PrintIcon />
-    </Button>
-  )
-}
-
-export function DeleteButton({
-  disabled,
-  disabledText,
-  ...props
-}: ButtonProps) {
-  if (disabled) {
-    return (
-      <DisabledButton
-        disabledText={disabledText ?? 'Default types can not be deleted'}
-      >
-        <DisabledDeleteIcon />
-      </DisabledButton>
-    )
-  }
-  return (
-    <Button {...props} actionType="delete">
-      <DeleteIcon />
-    </Button>
-  )
-}
-
-const StyledIconButton = styled(IconButton)<{
-  actionType: 'delete' | 'edit' | 'view' | 'print'
-}>(({ theme, actionType }) => ({
-  padding: 0,
-  '&:hover': {
-    '& path': {
-      fill:
-        actionType === 'delete'
-          ? 'red'
-          : actionType === 'edit'
-          ? theme.palette.common.yellow
-          : theme.palette.error.main,
-    },
-  },
-}))

package/src/components/IconButtons/Icons.tsx

@@ -1,268 +0,0 @@
-import React from 'react'
-
-export const ViewIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="19.026"
-      height="14.775"
-      viewBox="0 0 19.026 14.775"
-    >
-      <g id="eye_9_" data-name="eye (9)" transform="translate(0.152 0.1)">
-        <path
-          id="Path_1389"
-          data-name="Path 1389"
-          d="M18.147,7.93a10.328,10.328,0,0,0-8.79-5.275A10.328,10.328,0,0,0,.568,7.93a3.827,3.827,0,0,0,0,4.026,10.328,10.328,0,0,0,8.79,5.275,10.328,10.328,0,0,0,8.79-5.275A3.827,3.827,0,0,0,18.147,7.93Zm-1.33,3.209a8.823,8.823,0,0,1-7.46,4.532A8.823,8.823,0,0,1,1.9,11.139a2.276,2.276,0,0,1,0-2.393,8.823,8.823,0,0,1,7.46-4.532,8.817,8.817,0,0,1,7.46,4.532A2.276,2.276,0,0,1,16.817,11.139Z"
-          transform="translate(0.004 -2.655)"
-          fill="#878787"
-          stroke="#fff"
-          strokeWidth="0.2"
-        />
-        <path
-          id="Path_1390"
-          data-name="Path 1390"
-          d="M10.9,7a3.9,3.9,0,1,0,3.9,3.9A3.9,3.9,0,0,0,10.9,7Zm0,6.239a2.34,2.34,0,1,1,2.34-2.34A2.34,2.34,0,0,1,10.9,13.239Z"
-          transform="translate(-1.538 -3.612)"
-          fill="#878787"
-          stroke="#fff"
-          strokeWidth="0.2"
-        />
-      </g>
-    </svg>
-  )
-}
-
-export const EditIcon = () => {
-  return (
-    <svg
-      id="edit_3_"
-      data-name="edit (3)"
-      xmlns="http://www.w3.org/2000/svg"
-      width="16.416"
-      height="16.416"
-      viewBox="0 0 16.416 16.416"
-    >
-      <path
-        id="Path_1387"
-        data-name="Path 1387"
-        d="M14.341.65,6,8.99a3.4,3.4,0,0,0-1,2.418v.919a.684.684,0,0,0,.684.684H6.6a3.4,3.4,0,0,0,2.418-1L17.36,3.669a2.138,2.138,0,0,0,0-3.019,2.185,2.185,0,0,0-3.019,0ZM16.393,2.7,8.053,11.042a2.066,2.066,0,0,1-1.451.6H6.368v-.235a2.066,2.066,0,0,1,.6-1.451l8.339-8.339a.785.785,0,0,1,1.085,0,.768.768,0,0,1,0,1.085Z"
-        transform="translate(-1.58 -0.014)"
-        fill="rgba(18,18,18,0.5)"
-      />
-      <path
-        id="Path_1388"
-        data-name="Path 1388"
-        d="M15.732,6.142a.684.684,0,0,0-.684.684V10.26H12.312a2.052,2.052,0,0,0-2.052,2.052v2.736H3.42A2.052,2.052,0,0,1,1.368,13V3.42A2.052,2.052,0,0,1,3.42,1.368H9.6A.684.684,0,0,0,9.6,0H3.42A3.424,3.424,0,0,0,0,3.42V13a3.424,3.424,0,0,0,3.42,3.42h7.759a3.4,3.4,0,0,0,2.419-1L15.414,13.6a3.4,3.4,0,0,0,1-2.418V6.826A.684.684,0,0,0,15.732,6.142Zm-3.1,8.306a2.035,2.035,0,0,1-1,.547V12.312a.684.684,0,0,1,.684-.684H15a2.063,2.063,0,0,1-.547,1Z"
-        fill="rgba(18,18,18,0.5)"
-      />
-    </svg>
-  )
-}
-
-export const DeleteIcon = () => {
-  return (
-    <svg
-      id="trash_4_"
-      data-name="trash (4)"
-      xmlns="http://www.w3.org/2000/svg"
-      width="15"
-      height="18"
-      viewBox="0 0 15 18"
-    >
-      <g
-        id="trash_4_2"
-        data-name="trash (4)"
-        transform="translate(-2)"
-        opacity="0.5"
-      >
-        <path
-          id="Path_1384"
-          data-name="Path 1384"
-          d="M16.25,3H13.925A3.757,3.757,0,0,0,10.25,0H8.75A3.757,3.757,0,0,0,5.075,3H2.75a.75.75,0,1,0,0,1.5H3.5v9.75A3.755,3.755,0,0,0,7.25,18h4.5a3.755,3.755,0,0,0,3.75-3.75V4.5h.75a.75.75,0,0,0,0-1.5ZM8.75,1.5h1.5A2.254,2.254,0,0,1,12.372,3H6.628A2.255,2.255,0,0,1,8.75,1.5ZM14,14.25a2.25,2.25,0,0,1-2.25,2.25H7.25A2.25,2.25,0,0,1,5,14.25V4.5h9Z"
-          fill="#121212"
-        />
-        <path
-          id="Path_1385"
-          data-name="Path 1385"
-          d="M9.75,16a.75.75,0,0,0,.75-.75v-4.5a.75.75,0,1,0-1.5,0v4.5A.75.75,0,0,0,9.75,16Z"
-          transform="translate(-1.75 -2.5)"
-          fill="#121212"
-        />
-        <path
-          id="Path_1386"
-          data-name="Path 1386"
-          d="M13.75,16a.75.75,0,0,0,.75-.75v-4.5a.75.75,0,1,0-1.5,0v4.5A.75.75,0,0,0,13.75,16Z"
-          transform="translate(-2.75 -2.5)"
-          fill="#121212"
-        />
-      </g>
-    </svg>
-  )
-}
-
-export const DisabledEditIcon = () => {
-  return (
-    <svg
-      id="Component_13_1"
-      data-name="Component 13 – 1"
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-    >
-      <g id="Group_77" data-name="Group 77" transform="translate(-1753 -331)">
-        <path
-          id="Path_1387"
-          data-name="Path 1387"
-          d="M14.341.65,6,8.99a3.4,3.4,0,0,0-1,2.418v.919a.684.684,0,0,0,.684.684H6.6a3.4,3.4,0,0,0,2.418-1L17.36,3.669a2.138,2.138,0,0,0,0-3.019,2.185,2.185,0,0,0-3.019,0ZM16.393,2.7,8.053,11.042a2.066,2.066,0,0,1-1.451.6H6.368v-.235a2.066,2.066,0,0,1,.6-1.451l8.339-8.339a.785.785,0,0,1,1.085,0,.768.768,0,0,1,0,1.085Z"
-          transform="translate(1751.42 330.986)"
-          fill="rgba(18,18,18,0.5)"
-        />
-        <path
-          id="Path_1388"
-          data-name="Path 1388"
-          d="M15.732,6.142a.684.684,0,0,0-.684.684V10.26H12.312a2.052,2.052,0,0,0-2.052,2.052v2.736H3.42A2.052,2.052,0,0,1,1.368,13V3.42A2.052,2.052,0,0,1,3.42,1.368H9.6A.684.684,0,0,0,9.6,0H3.42A3.424,3.424,0,0,0,0,3.42V13a3.424,3.424,0,0,0,3.42,3.42h7.759a3.4,3.4,0,0,0,2.419-1L15.414,13.6a3.4,3.4,0,0,0,1-2.418V6.826A.684.684,0,0,0,15.732,6.142Zm-3.1,8.306a2.035,2.035,0,0,1-1,.547V12.312a.684.684,0,0,1,.684-.684H15a2.063,2.063,0,0,1-.547,1Z"
-          transform="translate(1753 331)"
-          fill="rgba(18,18,18,0.5)"
-        />
-      </g>
-      <g id="Group_79" data-name="Group 79" transform="translate(-1753 -330)">
-        <circle
-          id="Ellipse_66"
-          data-name="Ellipse 66"
-          cx="5"
-          cy="5"
-          r="5"
-          transform="translate(1763 340)"
-          fill="#bc2c3d"
-        />
-        <path
-          id="cross-small_3_"
-          data-name="cross-small (3)"
-          d="M11.181,5.838h0a.445.445,0,0,0-.63,0L8.509,7.88,6.467,5.838a.445.445,0,0,0-.63,0h0a.445.445,0,0,0,0,.63L7.88,8.509,5.838,10.551a.445.445,0,0,0,0,.63h0a.445.445,0,0,0,.63,0L8.509,9.139l2.042,2.042a.445.445,0,0,0,.63,0h0a.445.445,0,0,0,0-.63L9.139,8.509l2.042-2.042A.445.445,0,0,0,11.181,5.838Z"
-          transform="translate(1759.491 336.491)"
-          fill="#fff"
-        />
-      </g>
-    </svg>
-  )
-}
-
-export const DisabledDeleteIcon = () => {
-  return (
-    <svg
-      id="Component_14_1"
-      data-name="Component 14 – 1"
-      xmlns="http://www.w3.org/2000/svg"
-      width="19.584"
-      height="21"
-      viewBox="0 0 19.584 21"
-    >
-      <g
-        id="Group_78"
-        data-name="Group 78"
-        transform="translate(-1789.416 -330)"
-      >
-        <g
-          id="trash_4_"
-          data-name="trash (4)"
-          transform="translate(1787.416 330)"
-          opacity="0.5"
-        >
-          <path
-            id="Path_1384"
-            data-name="Path 1384"
-            d="M16.25,3H13.925A3.757,3.757,0,0,0,10.25,0H8.75A3.757,3.757,0,0,0,5.075,3H2.75a.75.75,0,1,0,0,1.5H3.5v9.75A3.755,3.755,0,0,0,7.25,18h4.5a3.755,3.755,0,0,0,3.75-3.75V4.5h.75a.75.75,0,0,0,0-1.5ZM8.75,1.5h1.5A2.254,2.254,0,0,1,12.372,3H6.628A2.255,2.255,0,0,1,8.75,1.5ZM14,14.25a2.25,2.25,0,0,1-2.25,2.25H7.25A2.25,2.25,0,0,1,5,14.25V4.5h9Z"
-            fill="#121212"
-          />
-          <path
-            id="Path_1385"
-            data-name="Path 1385"
-            d="M9.75,16a.75.75,0,0,0,.75-.75v-4.5a.75.75,0,1,0-1.5,0v4.5A.75.75,0,0,0,9.75,16Z"
-            transform="translate(-1.75 -2.5)"
-            fill="#121212"
-          />
-          <path
-            id="Path_1386"
-            data-name="Path 1386"
-            d="M13.75,16a.75.75,0,0,0,.75-.75v-4.5a.75.75,0,1,0-1.5,0v4.5A.75.75,0,0,0,13.75,16Z"
-            transform="translate(-2.75 -2.5)"
-            fill="#121212"
-          />
-        </g>
-      </g>
-      <g
-        id="Group_80"
-        data-name="Group 80"
-        transform="translate(-1753.416 -329)"
-      >
-        <circle
-          id="Ellipse_66"
-          data-name="Ellipse 66"
-          cx="5"
-          cy="5"
-          r="5"
-          transform="translate(1763 340)"
-          fill="#bc2c3d"
-        />
-        <path
-          id="cross-small_3_"
-          data-name="cross-small (3)"
-          d="M11.181,5.838h0a.445.445,0,0,0-.63,0L8.509,7.88,6.467,5.838a.445.445,0,0,0-.63,0h0a.445.445,0,0,0,0,.63L7.88,8.509,5.838,10.551a.445.445,0,0,0,0,.63h0a.445.445,0,0,0,.63,0L8.509,9.139l2.042,2.042a.445.445,0,0,0,.63,0h0a.445.445,0,0,0,0-.63L9.139,8.509l2.042-2.042A.445.445,0,0,0,11.181,5.838Z"
-          transform="translate(1759.491 336.491)"
-          fill="#fff"
-        />
-      </g>
-    </svg>
-  )
-}
-
-export const PrintIcon = () => {
-  return (
-    <svg
-      id="print_1_"
-      data-name="print (1)"
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-    >
-      <g id="print_1_2" data-name="print (1)" opacity="0.5">
-        <path
-          id="Path_1768"
-          data-name="Path 1768"
-          d="M12.667,4V2.667A2.667,2.667,0,0,0,10,0H6A2.667,2.667,0,0,0,3.333,2.667V4A3.337,3.337,0,0,0,0,7.333v3.333A3.337,3.337,0,0,0,3.333,14a2,2,0,0,0,2,2h5.333a2,2,0,0,0,2-2A3.337,3.337,0,0,0,16,10.667V7.333A3.337,3.337,0,0,0,12.667,4Zm-8-1.333A1.333,1.333,0,0,1,6,1.333h4a1.333,1.333,0,0,1,1.333,1.333V4H4.667ZM11.333,14a.667.667,0,0,1-.667.667H5.333A.667.667,0,0,1,4.667,14V11.333a.667.667,0,0,1,.667-.667h5.333a.667.667,0,0,1,.667.667Zm3.333-3.333a2,2,0,0,1-2,2V11.333a2,2,0,0,0-2-2H5.333a2,2,0,0,0-2,2v1.333a2,2,0,0,1-2-2V7.333a2,2,0,0,1,2-2h9.333a2,2,0,0,1,2,2Z"
-          fill="#121212"
-        />
-        <path
-          id="Path_1769"
-          data-name="Path 1769"
-          d="M17,10H15.667a.667.667,0,1,0,0,1.333H17A.667.667,0,1,0,17,10Z"
-          transform="translate(-5 -3.333)"
-        />
-      </g>
-    </svg>
-  )
-}
-
-export const DateRangeIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="15"
-      viewBox="0 0 20 15"
-    >
-      <g id="transfer" transform="translate(0 -51.198)" opacity="0.501">
-        <g id="Group_807" data-name="Group 807" transform="translate(0 51.198)">
-          <path
-            id="Path_1400"
-            data-name="Path 1400"
-            d="M18.452,56.055,13.79,51.393a.666.666,0,0,0-1.137.471v2H7.991a.666.666,0,1,0,0,1.332h5.328a.666.666,0,0,0,.666-.666V53.472l3.054,3.054L13.985,59.58V58.524a.666.666,0,0,0-.666-.666H5.993v-2a.666.666,0,0,0-1.137-.471L.195,60.051a.666.666,0,0,0,0,.942l4.662,4.662a.666.666,0,0,0,.471.2.658.658,0,0,0,.255-.051.666.666,0,0,0,.411-.615v-2h4.662a.666.666,0,0,0,0-1.332H5.327a.666.666,0,0,0-.666.666v1.056L1.607,60.522l3.054-3.054v1.056a.666.666,0,0,0,.666.666h7.326v2a.666.666,0,0,0,1.137.471L18.452,57A.666.666,0,0,0,18.452,56.055Z"
-            transform="translate(0 -51.198)"
-          />
-        </g>
-      </g>
-    </svg>
-  )
-}

package/src/components/IconButtons/assets/edit.svg

@@ -1,4 +0,0 @@
-<svg id="edit_3_" data-name="edit (3)" xmlns="http://www.w3.org/2000/svg" width="16.416" height="16.416" viewBox="0 0 16.416 16.416">
-  <path id="Path_1387" data-name="Path 1387" d="M14.341.65,6,8.99a3.4,3.4,0,0,0-1,2.418v.919a.684.684,0,0,0,.684.684H6.6a3.4,3.4,0,0,0,2.418-1L17.36,3.669a2.138,2.138,0,0,0,0-3.019,2.185,2.185,0,0,0-3.019,0ZM16.393,2.7,8.053,11.042a2.066,2.066,0,0,1-1.451.6H6.368v-.235a2.066,2.066,0,0,1,.6-1.451l8.339-8.339a.785.785,0,0,1,1.085,0,.768.768,0,0,1,0,1.085Z" transform="translate(-1.58 -0.014)" fill="rgba(18,18,18,0.5)"/>
-  <path id="Path_1388" data-name="Path 1388" d="M15.732,6.142a.684.684,0,0,0-.684.684V10.26H12.312a2.052,2.052,0,0,0-2.052,2.052v2.736H3.42A2.052,2.052,0,0,1,1.368,13V3.42A2.052,2.052,0,0,1,3.42,1.368H9.6A.684.684,0,0,0,9.6,0H3.42A3.424,3.424,0,0,0,0,3.42V13a3.424,3.424,0,0,0,3.42,3.42h7.759a3.4,3.4,0,0,0,2.419-1L15.414,13.6a3.4,3.4,0,0,0,1-2.418V6.826A.684.684,0,0,0,15.732,6.142Zm-3.1,8.306a2.035,2.035,0,0,1-1,.547V12.312a.684.684,0,0,1,.684-.684H15a2.063,2.063,0,0,1-.547,1Z" fill="rgba(18,18,18,0.5)"/>
-</svg>

package/src/components/IconButtons/assets/eye.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="19.026" height="14.775" viewBox="0 0 19.026 14.775">
-  <g id="eye_9_" data-name="eye (9)" transform="translate(0.152 0.1)">
-    <path id="Path_1389" data-name="Path 1389" d="M18.147,7.93a10.328,10.328,0,0,0-8.79-5.275A10.328,10.328,0,0,0,.568,7.93a3.827,3.827,0,0,0,0,4.026,10.328,10.328,0,0,0,8.79,5.275,10.328,10.328,0,0,0,8.79-5.275A3.827,3.827,0,0,0,18.147,7.93Zm-1.33,3.209a8.823,8.823,0,0,1-7.46,4.532A8.823,8.823,0,0,1,1.9,11.139a2.276,2.276,0,0,1,0-2.393,8.823,8.823,0,0,1,7.46-4.532,8.817,8.817,0,0,1,7.46,4.532A2.276,2.276,0,0,1,16.817,11.139Z" transform="translate(0.004 -2.655)" fill="#878787" stroke="#fff" strokeWidth="0.2"/>
-    <path id="Path_1390" data-name="Path 1390" d="M10.9,7a3.9,3.9,0,1,0,3.9,3.9A3.9,3.9,0,0,0,10.9,7Zm0,6.239a2.34,2.34,0,1,1,2.34-2.34A2.34,2.34,0,0,1,10.9,13.239Z" transform="translate(-1.538 -3.612)" fill="#878787" stroke="#fff" strokeWidth="0.2"/>
-  </g>
-</svg>

package/src/components/IconButtons/assets/trash.svg

@@ -1,7 +0,0 @@
-<svg id="trash_4_" data-name="trash (4)" xmlns="http://www.w3.org/2000/svg" width="15" height="18" viewBox="0 0 15 18">
-  <g id="trash_4_2" data-name="trash (4)" transform="translate(-2)" opacity="0.5">
-    <path id="Path_1384" data-name="Path 1384" d="M16.25,3H13.925A3.757,3.757,0,0,0,10.25,0H8.75A3.757,3.757,0,0,0,5.075,3H2.75a.75.75,0,1,0,0,1.5H3.5v9.75A3.755,3.755,0,0,0,7.25,18h4.5a3.755,3.755,0,0,0,3.75-3.75V4.5h.75a.75.75,0,0,0,0-1.5ZM8.75,1.5h1.5A2.254,2.254,0,0,1,12.372,3H6.628A2.255,2.255,0,0,1,8.75,1.5ZM14,14.25a2.25,2.25,0,0,1-2.25,2.25H7.25A2.25,2.25,0,0,1,5,14.25V4.5h9Z" fill="#121212"/>
-    <path id="Path_1385" data-name="Path 1385" d="M9.75,16a.75.75,0,0,0,.75-.75v-4.5a.75.75,0,1,0-1.5,0v4.5A.75.75,0,0,0,9.75,16Z" transform="translate(-1.75 -2.5)" fill="#121212"/>
-    <path id="Path_1386" data-name="Path 1386" d="M13.75,16a.75.75,0,0,0,.75-.75v-4.5a.75.75,0,1,0-1.5,0v4.5A.75.75,0,0,0,13.75,16Z" transform="translate(-2.75 -2.5)" fill="#121212"/>
-  </g>
-</svg>

package/src/components/IconButtons/index.tsx

@@ -1,8 +0,0 @@
-export {
-  ViewButton,
-  DeleteButton,
-  EditButton,
-  PrintButton,
-} from './IconButtons'
-
-export { DateRangeIcon } from './Icons'

package/src/components/IconLabel.tsx

@@ -1,37 +0,0 @@
-import { Box, styled, Typography } from '@mui/material'
-import { ReactNode } from 'react'
-
-const StyledStack = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '8px',
-  '& .MuiSvgIcon-root': {
-    fontSize: '1rem',
-    color: theme.palette.text.secondary,
-  },
-}))
-
-export default function IconLabel({
-  label,
-  icon,
-  onClick,
-}: {
-  label: string
-  icon: ReactNode
-  onClick?: () => void
-}) {
-  return (
-    <StyledStack
-      onClick={onClick ?? onClick}
-      sx={{
-        ...(onClick && {
-          cursor: 'pointer',
-          '&:hover': { borderBottom: '1px solid gray' },
-        }),
-      }}
-    >
-      {icon}
-      <Typography variant="subtitle2">{label}</Typography>
-    </StyledStack>
-  )
-}

package/src/components/Image/Image.tsx

@@ -1,45 +0,0 @@
-import { Box } from '@mui/material'
-const brokenImage = require('./broken-image.png')
-
-interface ImageProps {
-  src: string
-  alt: string
-  height: string | number
-  width: string | number
-  fit?: 'cover' | 'contain' | 'fill'
-  radius?: string | number
-  defaultImage?: any
-}
-
-export default function Image({
-  src,
-  alt,
-  height,
-  width,
-  fit = 'contain',
-  radius = '10px',
-  defaultImage = null,
-}: ImageProps) {
-  return (
-    <Box
-      sx={{
-        height: height,
-        width: width,
-        '& > img': {
-          borderRadius: radius,
-          width: '100%',
-          height: '100%',
-          objectFit: fit,
-        },
-      }}
-    >
-      <img
-        src={src || defaultImage}
-        alt={alt}
-        onError={(e: any) => {
-          e.target.src = defaultImage ? defaultImage : brokenImage
-        }}
-      />
-    </Box>
-  )
-}

package/src/components/Image/index.tsx

@@ -1 +0,0 @@
-export { default } from './Image'

package/src/components/ImageUpload.tsx

@@ -1,98 +0,0 @@
-import { InsertPhotoOutlined } from '@mui/icons-material'
-import { Box, CircularProgress, styled, Typography } from '@mui/material'
-import { ReactNode, useRef, useState } from 'react'
-import { toast } from 'react-toastify'
-import axios, { axiosErrorToast } from '../config/axios'
-
-interface ImageUploadProps {
-  onFileUploaded: (v) => void
-  postUrl: string
-  StyledUpload?: ReactNode
-  loadingState?: (v) => void
-}
-export default function ImageUpload({
-  onFileUploaded,
-  postUrl,
-  StyledUpload,
-  loadingState,
-}: ImageUploadProps) {
-  const [loading, setLoading] = useState(false)
-  const ref = useRef<HTMLInputElement>(null)
-
-  const handleChange = (e) => {
-    if (e.target.files[0]) {
-      const formData = new FormData()
-      formData.append('file', e.target.files[0])
-      setLoading(true)
-      loadingState && setLoading(true)
-      axios
-        .post(postUrl, formData)
-        .then((res) => {
-          onFileUploaded({
-            url: res.data.url,
-            key: res.data.key,
-            fileName: res.data?.mediaObject?.originalFileName ?? '',
-            id: res.data?.mediaObject?.id ?? '',
-          })
-          setLoading(false)
-          loadingState && setLoading(false)
-        })
-        .catch((err) => {
-          setLoading(false)
-          loadingState && setLoading(false)
-          axiosErrorToast(err)
-        })
-    }
-  }
-
-  return (
-    <>
-      {StyledUpload ? (
-        <div
-          onClick={() => {
-            ref.current.click()
-          }}
-        >
-          {StyledUpload}
-        </div>
-      ) : (
-        <StyledImageLabel
-          onClick={() => {
-            ref.current.click()
-          }}
-        >
-          <InsertPhotoOutlined />
-          <Typography sx={{ opacity: '0.6' }}>
-            {loading ? 'Uploading...' : `Upload Photo`}
-          </Typography>
-        </StyledImageLabel>
-      )}
-
-      <input
-        accept="image/*"
-        type="file"
-        hidden
-        ref={ref}
-        onChange={handleChange}
-      />
-    </>
-  )
-}
-
-export const StyledImageLabel = styled('div')(({ theme }) => ({
-  cursor: 'pointer',
-  borderRadius: '10px',
-  width: '100%',
-  height: '150px',
-  border: '1px dashed #0000001A',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  '&:hover': {
-    backgroundColor: '#EFEFEF',
-  },
-  '& > *': {
-    color: theme.palette.text.disabled,
-  },
-}))