@lunit/oui 1.0.1 → 1.1.0-alpha.2

package/src/assets/ic_information_large=outlined_20px.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 20 20" fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg">
-	<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10ZM9.25 14.2466C9.25 14.6268 9.53288 14.9409 9.89965 14.9899C9.93207 14.9965 9.96563 15 10 15C10.0344 15 10.0679 14.9965 10.1004 14.9899C10.4671 14.9409 10.75 14.6268 10.75 14.2466V8.74658C10.75 8.33237 10.4142 7.99658 10 7.99658C9.58579 7.99658 9.25 8.33237 9.25 8.74658V14.2466ZM10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44771 7 10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5Z" fill="currentColor"/>
-</svg>

package/src/assets/ic_information_small=outlined_20px.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 20 20" fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg">
-	<path fill-rule="evenodd" clip-rule="evenodd" d="M4 10C4 6.68629 6.68629 4 10 4C13.3137 4 16 6.68629 16 10C16 13.3137 13.3137 16 10 16C6.68629 16 4 13.3137 4 10ZM10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3ZM10.0892 9.00794C10.0603 9.00272 10.0305 9 10 9C9.96955 9 9.93973 9.00272 9.91078 9.00794C9.53862 9.05205 9.25 9.36866 9.25 9.75269V13.2527C9.25 13.6669 9.58579 14.0027 10 14.0027C10.4142 14.0027 10.75 13.6669 10.75 13.2527V9.75269C10.75 9.36866 10.4614 9.05205 10.0892 9.00794ZM10 8C9.44772 8 9 7.55228 9 7C9 6.44772 9.44772 6 10 6C10.5523 6 11 6.44772 11 7C11 7.55228 10.5523 8 10 8Z" fill="currentColor"/>
-</svg>

package/src/assets/ic_manufacturer=outlined_20px.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M19.4805 0.00415039V23.0042H0V14.4609L2.9769 8.28318L5.23029 12.9653L7.48368 8.28318L9.74026 12.9653L11.9937 8.28318L14.2502 12.9653V0.00415039H19.4805Z" fill="#000"></path>
-</svg>

package/src/assets/ic_rectangle=outlined_20px.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 20 20" fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg">
-	<path fill-rule="evenodd" clip-rule="evenodd" d="M1 2C1 1.44772 1.44771 1 2 1H18C18.5523 1 19 1.44771 19 2V18C19 18.5523 18.5523 19 18 19H2C1.44772 19 1 18.5523 1 18V2ZM2 2V18H18V2L2 2Z" fill="currentColor"/>
-</svg>

package/src/assets/ic_refresh_left=outlined_20px.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 20 20" fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg">
-	<path fill-rule="evenodd" clip-rule="evenodd" d="M3.67349 7C4.79743 4.63419 7.20839 3 9.99999 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 9.99999 17C6.95293 17 4.35937 15.0528 3.39818 12.3334C3.30615 12.073 3.02049 11.9366 2.76013 12.0286C2.49978 12.1206 2.36331 12.4063 2.45534 12.6666C3.55333 15.7731 6.51596 18 9.99999 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 9.99999 2C6.98718 2 4.36428 3.66538 3 6.12421L3 3.5C3 3.22386 2.77614 3 2.5 3C2.22386 3 2 3.22386 2 3.5V7.5C2 7.77614 2.22386 8 2.5 8L6.5 8C6.77614 8 7 7.77614 7 7.5C7 7.22386 6.77614 7 6.5 7H3.67349Z" fill="currentColor"/>
-</svg>

package/src/assets/ic_refresh_right=outlined_20px.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 20 20" fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg">
-	<path d="M14.4362 3.3427C12.8211 2.26644 10.8698 1.81403 8.94585 2.06977C7.02191 2.32552 5.25655 3.27197 3.97868 4.73279C2.70081 6.19361 1.99758 8.06917 2.00001 10.01C2.00244 11.9509 2.71036 13.8247 3.99189 15.2823C5.27342 16.7399 7.04114 17.682 8.96572 17.9329C10.8903 18.1838 12.8405 17.7265 14.4529 16.6462C16.0653 15.5659 17.23 13.9362 17.73 12.0609C17.8011 11.7941 17.6425 11.5201 17.3757 11.449C17.1088 11.3778 16.8349 11.5365 16.7637 11.8033C16.3262 13.4442 15.3071 14.8702 13.8963 15.8154C12.4854 16.7607 10.779 17.1608 9.095 16.9413C7.411 16.7217 5.86424 15.8974 4.7429 14.622C3.62157 13.3466 3.00213 11.707 3.00001 10.0088C2.99788 8.31053 3.61321 6.66941 4.73134 5.39119C5.84948 4.11297 7.39417 3.28483 9.07762 3.06106C10.7611 2.83728 12.4685 3.23313 13.8817 4.17487C15.055 4.95671 15.9591 6.07056 16.485 7.36464C16.4869 7.36936 16.4889 7.37404 16.4909 7.37867H13.5341C13.258 7.37867 13.0341 7.60253 13.0341 7.87867C13.0341 8.15482 13.258 8.37867 13.5341 8.37867L17.7767 8.37867C18.0529 8.37867 18.2768 8.15482 18.2767 7.87867L18.2768 3.63603C18.2768 3.35989 18.0529 3.13603 17.7767 3.13603C17.5006 3.13603 17.2767 3.35989 17.2767 3.63603V6.676C16.662 5.33018 15.6818 4.17274 14.4362 3.3427Z" fill="currentColor"/>
-</svg>

package/src/assets/ic_show_large=outlined_20px.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 20 20" fill="currentColor"
-  xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.02506 10.2283C3.4458 9.23806 5.17764 6 9.97734 6C14.7656 6 16.5358 9.22232 16.9735 10.2239C17.0052 10.2963 17.0013 10.3671 16.9697 10.4277C16.523 11.2853 14.7482 14 9.97734 14C5.19465 14 3.45804 11.2719 3.02876 10.4245C2.99909 10.366 2.99543 10.298 3.02506 10.2283ZM9.97734 5C4.58863 5 2.59009 8.68489 2.09982 9.83875C1.95925 10.1696 1.96469 10.5451 2.13177 10.8748C2.67253 11.9422 4.69952 15 9.97734 15C15.2386 15 17.3025 11.9613 17.8616 10.888C18.0373 10.5506 18.0428 10.1637 17.8947 9.82494C17.3863 8.66178 15.3489 5 9.97734 5ZM7.96814 10C7.96814 8.89543 8.86769 8 9.97734 8C11.087 8 11.9865 8.89543 11.9865 10C11.9865 11.1046 11.087 12 9.97734 12C8.86769 12 7.96814 11.1046 7.96814 10ZM9.97734 7C8.31286 7 6.96354 8.34315 6.96354 10C6.96354 11.6569 8.31286 13 9.97734 13C11.6418 13 12.9911 11.6569 12.9911 10C12.9911 8.34315 11.6418 7 9.97734 7Z" fill="currentColor"/>
-</svg>

package/src/assets/ic_show_small=outlined_20px.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 20 20" fill="currentColor"
-  xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M10 7C13.3054 7 14.5914 9.34545 14.9748 10.2758C14.5929 11.0424 13.3121 13 10 13C6.68788 13 5.40711 11.0424 5.02517 10.2758C5.40864 9.34545 6.69463 7 10 7ZM15.9495 10.0208C16.0209 10.2057 16.0172 10.407 15.9343 10.5871C15.538 11.4476 14.0235 14 10 14C5.97651 14 4.46197 11.4476 4.0657 10.5871C3.98276 10.407 3.9791 10.2057 4.05047 10.0208C4.42213 9.05757 5.923 6 10 6C14.077 6 15.5779 9.05757 15.9495 10.0208ZM10.9998 10C10.9998 10.5523 10.5522 11 9.99997 11C9.44778 11 9.00014 10.5523 9.00014 10C9.00014 9.44772 9.44778 9 9.99997 9C10.5522 9 10.9998 9.44772 10.9998 10ZM11.9997 10C11.9997 11.1046 11.1044 12 9.99997 12C8.89558 12 8.0003 11.1046 8.0003 10C8.0003 8.89543 8.89558 8 9.99997 8C11.1044 8 11.9997 8.89543 11.9997 10Z" fill="currentColor"/>
-</svg>

package/src/assets/index.ts

@@ -1,16 +0,0 @@
-export { default as IcBellNotiOutlined20Px } from './ic-bell-noti-outlined-20px';
-export { default as IcCloseLargeOutlined20Px } from './ic-close-large-outlined-20px';
-export { default as IcCloseSmallOutlined20Px } from './ic-close-small-outlined-20px';
-export { default as IcDownloadPdfOutlined20Px } from './ic-download-pdf-outlined-20px';
-export { default as IcEllipseOutlined20Px } from './ic-ellipse-outlined-20px';
-export { default as IcFilterNotiOutlined20Px } from './ic-filter-noti-outlined-20px';
-export { default as IcHideLargeOutlined20Px } from './ic-hide-large-outlined-20px';
-export { default as IcHideSmallOutlined20Px } from './ic-hide-small-outlined-20px';
-export { default as IcInformationLargeOutlined20Px } from './ic-information-large-outlined-20px';
-export { default as IcInformationSmallOutlined20Px } from './ic-information-small-outlined-20px';
-export { default as IcManufacturerOutlined20Px } from './ic-manufacturer-outlined-20px';
-export { default as IcRectangleOutlined20Px } from './ic-rectangle-outlined-20px';
-export { default as IcRefreshLeftOutlined20Px } from './ic-refresh-left-outlined-20px';
-export { default as IcRefreshRightOutlined20Px } from './ic-refresh-right-outlined-20px';
-export { default as IcShowLargeOutlined20Px } from './ic-show-large-outlined-20px';
-export { default as IcShowSmallOutlined20Px } from './ic-show-small-outlined-20px';

package/src/components/Alert/Alert.styled.ts

@@ -1,44 +0,0 @@
-import { Alert as MuiAlert, alertClasses, styled, svgIconClasses } from '@mui/material';
-import type { AlertProps } from './Alert.types';
-import { getAccentColor, getBackgroundColor } from './Alert.utils';
-
-const BaseAlert = styled(MuiAlert)<AlertProps>(({ theme, severity }) => ({
-  [`&.${alertClasses.root}`]: {
-    display: 'flex',
-    padding: `${theme.spacing(2)} ${theme.spacing(4)}`,
-    maxWidth: '456px',
-    borderRadius: '8px',
-    border: `1px solid ${getAccentColor(severity)}`,
-    backgroundColor: getBackgroundColor(severity),
-    boxShadow: 'none',
-  },
-  [`& .${alertClasses.icon}`]: {
-    fontSize: '20px',
-    alignItems: 'center',
-    padding: `${theme.spacing(1)} 0`,
-    marginRight: theme.spacing(2),
-    color: `${getAccentColor(severity)} !important`,
-  },
-  [`& .${alertClasses.message}`]: {
-    padding: `${theme.spacing(1)} 0`,
-    width: '100%',
-    overflow: 'hidden',
-    display: '-webkit-box',
-    textOverflow: 'ellipsis',
-    WebkitLineClamp: '5',
-    WebkitBoxOrient: 'vertical',
-    color: theme.palette.neutralGrey[0],
-  },
-  [`& .${alertClasses.action}`]: {
-    margin: 0,
-    padding: 0,
-    paddingLeft: theme.spacing(2),
-    alignItems: 'center',
-  },
-  [`& .${svgIconClasses.root}`]: {
-    height: '20px',
-    width: '20px',
-  },
-}));
-
-export default BaseAlert;

package/src/components/Alert/Alert.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { forwardRef } from 'react';
-import { Close } from '../../icons';
-import BaseAlert from './Alert.styled';
-import type { AlertProps } from './Alert.types';
-import { getAccentColor, getIcons } from './Alert.utils';
-import { Button } from '../Button';
-
-const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ title, severity, children, onClose, ...rest }: AlertProps, ref) => {
-    return (
-      <div ref={ref}>
-        <BaseAlert
-          severity={severity}
-          icon={getIcons(severity)}
-          slots={{
-            closeButton: () => (
-              <Button
-                variant="ghost"
-                icon={<Close fontSize="small" />}
-                onClick={onClose}
-                size="small"
-                sx={{
-                  color: getAccentColor(severity),
-                }}
-              />
-            ),
-          }}
-          onClose={onClose}
-          {...rest}
-        >
-          {children}
-        </BaseAlert>
-      </div>
-    );
-  },
-);
-
-export default Alert;

package/src/components/Alert/Alert.types.ts

@@ -1,5 +0,0 @@
-import type { AlertProps as MuiAlertProps } from '@mui/material';
-
-export interface AlertProps extends MuiAlertProps {
-  onClose?: () => void;
-}

package/src/components/Alert/Alert.utils.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { AlertColor } from '@mui/material';
-import { Success, Error, Information } from '../../icons';
-import theme from '../../theme';
-
-export const getIcons = (severity: AlertColor | undefined) => {
-  switch (severity) {
-    case 'info':
-      return <Information />;
-    case 'success':
-      return <Success />;
-    case 'error':
-      return <Error />;
-    default:
-      return <Error />;
-  }
-};
-
-export const getBackgroundColor = (severity: AlertColor | undefined) => {
-  switch (severity) {
-    case 'info':
-      return theme.palette.alert.InfoBG;
-    case 'success':
-      return theme.palette.alert.SuccessBG;
-    case 'error':
-      return theme.palette.alert.ErrorBG;
-    default:
-      return theme.palette.alert.WarningBG;
-  }
-};
-
-export const getAccentColor = (severity: AlertColor | undefined) => {
-  switch (severity) {
-    case 'info':
-      return theme.palette.blue[25];
-    case 'success':
-      return theme.palette.lunitTeal[40];
-    case 'error':
-      return theme.palette.red[5];
-    default:
-      return theme.palette.yellow[20];
-  }
-};

package/src/components/Alert/index.ts

@@ -1,5 +0,0 @@
-import Alert from './Alert';
-import type { AlertProps } from './Alert.types';
-
-export { Alert };
-export type { AlertProps };

package/src/components/BaseTextField/BaseTextField.styled.ts

@@ -1,110 +0,0 @@
-// This file facilitates style sharing between text input and text area
-import { Box, Theme, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import type { BaseTextFieldContainerProps, HelperMsgProps } from './BaseTextField.types';
-import { formatCSSSize } from './BaseTextField.utils';
-
-const baseTextFieldStyle = (theme: Theme) => {
-  return {
-    backgroundColor: theme.palette.neutralGrey[75],
-    borderRadius: '8px',
-    border: '1px solid',
-    borderColor: 'transparent',
-    color: theme.palette.neutralGrey[5],
-    fontWeight: '400',
-    fontSize: '14px',
-    fontFamily:
-      'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
-    lineHeight: '20px',
-    padding: '7px 16px',
-
-    '&::placeholder': {
-      color: theme.palette.neutralGrey[45],
-    },
-    '&:focus': {
-      outline: 'none',
-      border: '1px solid',
-      borderColor: theme.palette.lunitTeal[10],
-    },
-    '&:hover': {
-      borderColor: theme.palette.neutralGrey[45],
-    },
-    '&:disabled': {
-      opacity: '0.8',
-      pointerEvents: 'none',
-    },
-    '&:read-only': {
-      border: `1px solid ${theme.palette.neutralGrey[70]}`,
-      backgroundColor: 'transparent',
-      color: theme.palette.neutralGrey[45],
-      pointerEvents: 'none',
-    },
-  };
-};
-
-const baseTextFieldErrorStyle = (theme: Theme) => {
-  return {
-    borderColor: theme.palette.red[5],
-  };
-};
-
-const baseTextFieldMsgStyle = (theme: Theme) => {
-  return {
-    width: '312px',
-    maxWidth: '312px',
-    minHeight: '20px',
-    color: theme.palette.neutralGrey[45],
-    padding: '4px',
-  };
-};
-
-const baseTextFieldMsgErrorStyle = (theme: Theme) => {
-  return {
-    color: theme.palette.red[5],
-  };
-};
-
-const BaseTextFieldBox = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'width',
-})<BaseTextFieldContainerProps>(({ width }) => {
-  return {
-    width: formatCSSSize(width),
-    minWidth: formatCSSSize(width) ? 'unset' : '208px',
-  };
-});
-
-const BaseTextFieldContainer = styled(Box, {
-  shouldForwardProp: (prop) => !['width'].includes(prop.toString()),
-})<BaseTextFieldContainerProps>(({ width }) => {
-  return {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    width: formatCSSSize(width),
-    minWidth: formatCSSSize(width) ? 'unset' : '208px',
-  };
-});
-
-const InputMsg = styled(Typography, {
-  shouldForwardProp: (prop) => prop !== 'error',
-})<HelperMsgProps>(({ theme, error }) => {
-  let resultStyle = baseTextFieldMsgStyle(theme);
-
-  if (error) {
-    resultStyle = {
-      ...resultStyle,
-      ...baseTextFieldMsgErrorStyle(theme),
-    };
-  }
-
-  return resultStyle;
-});
-
-const styles = {
-  baseTextFieldStyle,
-  baseTextFieldErrorStyle,
-  baseTextFieldMsgStyle,
-  baseTextFieldMsgErrorStyle,
-};
-
-export { styles, BaseTextFieldContainer, BaseTextFieldBox, InputMsg };

package/src/components/BaseTextField/BaseTextField.types.ts

@@ -1,25 +0,0 @@
-// Props for all text fields
-
-import type { BoxProps } from '@mui/material';
-
-// It redefines certain intrinsic properties because of MUI interference
-interface BaseTextFieldContainerProps {
-  width?: string | number;
-}
-
-interface RootTextFieldProps extends BaseTextFieldContainerProps {
-  disabled?: boolean;
-  readOnly?: boolean;
-  value?: string;
-  defaultValue?: string;
-  error?: boolean;
-  BoxProps?: BoxProps;
-}
-
-// Props for helper message specifically
-interface HelperMsgProps {
-  error?: boolean;
-  helperMsg?: string;
-}
-
-export { RootTextFieldProps, BaseTextFieldContainerProps, HelperMsgProps };

package/src/components/BaseTextField/BaseTextField.utils.ts

@@ -1,10 +0,0 @@
-function formatCSSSize(sizeVal: string | number | undefined) {
-  if (typeof sizeVal === 'undefined') {
-    return undefined;
-  }
-  if (typeof sizeVal === 'number') return `${sizeVal}px`;
-
-  return sizeVal;
-}
-
-export { formatCSSSize };

package/src/components/Button/BaseButton.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import type { BaseButtonProps } from './Button.types';
-import { BaseContainedButton } from './styleds/ContainedButton.styled';
-import { BaseGhostButton } from './styleds/GhostButton.styled';
-import { BaseOutlinedButton } from './styleds/OutlinedButton.styled';
-
-const BaseButton = ({ variant, ...otherProps }: BaseButtonProps) => {
-  if (variant === 'ghost') {
-    return <BaseGhostButton {...otherProps} />;
-  }
-
-  if (variant === 'outlined') {
-    return <BaseOutlinedButton {...otherProps} />;
-  }
-
-  return <BaseContainedButton {...otherProps} />;
-};
-
-export default BaseButton;

package/src/components/Button/Button.tsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import { Box } from '@mui/system';
-import BaseButton from './BaseButton';
-import { CircularProgress } from '../Progress';
-import theme from '../../theme';
-
-import { isIconButton } from './Button.utils';
-import type { ButtonProps } from './Button.types';
-
-function Button(props: ButtonProps) {
-  if (isIconButton(props)) {
-    const {
-      icon,
-      loading,
-      onClick,
-      disableRipple = true,
-      focusOutline = false,
-      ...otherProps
-    } = props;
-
-    return (
-      <BaseButton
-        {...otherProps}
-        isIconOnly
-        disableRipple={disableRipple}
-        focusOutline={focusOutline}
-        onClick={
-          loading
-            ? (e) => {
-                e.preventDefault();
-              }
-            : onClick
-        }
-      >
-        {loading ? (
-          <CircularProgress
-            circleColor={theme.palette.neutralGrey[0]}
-            size={20}
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
-          />
-        ) : (
-          icon
-        )}
-      </BaseButton>
-    );
-  }
-
-  const {
-    icon,
-    label,
-    size,
-    focusOutline = false,
-    disableRipple = true,
-    loading,
-    onClick,
-    ...otherProps
-  } = props;
-  return (
-    <BaseButton
-      isIconOnly={false}
-      variant={otherProps.variant ?? 'contained'}
-      disableRipple={disableRipple}
-      size={size}
-      color={otherProps.color}
-      focusOutline={focusOutline}
-      onClick={
-        loading
-          ? (e) => {
-              e.preventDefault();
-            }
-          : onClick
-      }
-      sx={
-        loading
-          ? {
-              '&:not(.loadingCircle)': {
-                color: 'transparent',
-              },
-            }
-          : {}
-      }
-      {...otherProps}
-    >
-      <>
-        {icon}
-        {label}
-
-        {loading && (
-          <Box
-            className="loadingCircle"
-            sx={{
-              position: 'absolute',
-              top: '50%',
-              left: '50%',
-              transform: 'translate3d(-50%, -50%, 0)',
-            }}
-          >
-            <CircularProgress
-              circleColor={theme.palette.neutralGrey[0]}
-              size={20}
-              sx={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}
-            />
-          </Box>
-        )}
-      </>
-    </BaseButton>
-  );
-}
-export default Button;

package/src/components/Button/Button.types.ts

@@ -1,36 +0,0 @@
-import type { ButtonProps as MuiButtonProps } from '@mui/material';
-
-type ButtonVariant = 'contained' | 'ghost' | 'outlined';
-type ButtonColor = 'primary' | 'secondary' | 'error';
-type ButtonSize = 'small' | 'medium' | 'large';
-
-interface BaseButtonProps extends Omit<MuiButtonProps, 'variant' | 'color'> {
-  variant?: ButtonVariant;
-  color?: ButtonColor;
-  size?: ButtonSize;
-  disabled?: boolean;
-  focusOutline?: boolean;
-  isIconOnly: boolean;
-  loading?: boolean;
-  label?: string;
-}
-
-interface IconButtonProps extends Omit<BaseButtonProps, 'isIconOnly'> {
-  icon: React.ReactNode;
-}
-
-interface NormalButtonProps extends Omit<BaseButtonProps, 'isIconOnly'> {
-  label: string;
-  icon?: React.ReactNode;
-}
-
-type ButtonProps = IconButtonProps | NormalButtonProps;
-
-export type {
-  ButtonVariant,
-  ButtonColor,
-  BaseButtonProps,
-  IconButtonProps,
-  NormalButtonProps,
-  ButtonProps,
-};

package/src/components/Button/Button.utils.ts

@@ -1,13 +0,0 @@
-import type { ButtonProps, IconButtonProps, NormalButtonProps } from './Button.types';
-
-/**
- * @param props
- * @returns boolean
- * @description checks for presence of `label` prop to assert between Icon and Normal Button
- */
-function isIconButton(props: ButtonProps): props is IconButtonProps {
-  const p = props as NormalButtonProps;
-  return !p.label;
-}
-
-export { isIconButton };

package/src/components/Button/index.ts

@@ -1,6 +0,0 @@
-import Button from './Button';
-import BaseButton from './BaseButton';
-import type { BaseButtonProps, ButtonProps } from './Button.types';
-
-export { Button, BaseButton };
-export type { ButtonProps, BaseButtonProps };

package/src/components/Button/styleds/BaseButton.styled.ts

@@ -1,57 +0,0 @@
-import { Theme } from '@mui/material';
-import { typography } from '../../../foundations';
-
-const baseButtonStyle = (theme: Theme, focusOutline: boolean | undefined) => {
-  const mainColor = theme.palette.lunitTeal[40];
-
-  return {
-    alignItems: 'center',
-    display: 'flex',
-    gap: '4px',
-    borderRadius: '8px',
-    border: '1px solid transparent',
-    textTransform: 'none' as const,
-    minWidth: '36px',
-    width: 'max-content',
-    height: '36px',
-    padding: '8px 12px',
-    ...typography.body4,
-    backgroundColor: mainColor,
-    color: theme.palette.neutralGrey[97],
-    '&:hover': {
-      backgroundColor: mainColor,
-      opacity: 0.8,
-    },
-    '&:disabled': {
-      color: theme.palette.neutralGrey[97],
-      backgroundColor: mainColor,
-      opacity: 0.4,
-    },
-    '&:focus': {
-      border: focusOutline ? `1px solid ${theme.palette.lunitTeal[10]}` : '1px solid transparent',
-      outline: 'none' as const,
-    },
-    '&:focus-visible': {
-      border: focusOutline ? `1px solid ${theme.palette.lunitTeal[10]}` : '1px solid transparent',
-      outline: 'none' as const,
-    },
-  };
-};
-
-const baseSmallStyle = {
-  height: '28px',
-  minWidth: '28px',
-  padding: '4px 8px',
-};
-
-const baseLargeStyle = {
-  fontWeight: 600,
-  fontSize: '16px',
-  lineHeight: '22px',
-  // textTransform: 'capitalize', // This causes a type error in BaseOutlinedButton :S
-  height: '44px',
-  minWidth: '44px',
-  padding: '12px',
-};
-
-export { baseButtonStyle, baseSmallStyle, baseLargeStyle };