@lunit/design-system 1.0.0-a.1 → 1.0.0-a.2

package/dist/types/components/Chip/Chip.styled.d.ts

@@ -0,0 +1,79 @@
+/// <reference types="react" />
+import type { Theme } from "@mui/material/styles";
+import type { OutlinedChipProps, BaseContainedChipProps } from "./Chip.types";
+export declare const StyledOutlinedChip: import("@emotion/styled").StyledComponent<{
+    avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    children?: null | undefined;
+    classes?: Partial<import("@mui/material").ChipClasses> | undefined;
+    clickable?: boolean | undefined;
+    color?: "default" | "primary" | "secondary" | "error" | "warning" | "success" | "info" | undefined;
+    deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    disabled?: boolean | undefined;
+    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    label?: import("react").ReactNode;
+    onDelete?: ((event: any) => void) | undefined;
+    size?: "small" | "medium" | undefined;
+    skipFocusWhenDisabled?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+    tabIndex?: number | undefined;
+    variant?: "outlined" | "filled" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "color" | "label" | "children" | "sx" | "tabIndex" | "disabled" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "variant"> & import("@mui/system").MUIStyledCommonProps<Theme> & OutlinedChipProps, {}, {}>;
+export declare const StyledContainedChipBase: import("@emotion/styled").StyledComponent<{
+    avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    children?: null | undefined;
+    classes?: Partial<import("@mui/material").ChipClasses> | undefined;
+    clickable?: boolean | undefined;
+    color?: "default" | "primary" | "secondary" | "error" | "warning" | "success" | "info" | undefined;
+    deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    disabled?: boolean | undefined;
+    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    label?: import("react").ReactNode;
+    onDelete?: ((event: any) => void) | undefined;
+    size?: "small" | "medium" | undefined;
+    skipFocusWhenDisabled?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+    tabIndex?: number | undefined;
+    variant?: "outlined" | "filled" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "color" | "label" | "children" | "sx" | "tabIndex" | "disabled" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "variant"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
+export declare const StyledContainedChipEnable: import("@emotion/styled").StyledComponent<{
+    avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    children?: null | undefined;
+    classes?: Partial<import("@mui/material").ChipClasses> | undefined;
+    clickable?: boolean | undefined;
+    color?: "default" | "primary" | "secondary" | "error" | "warning" | "success" | "info" | undefined;
+    deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    disabled?: boolean | undefined;
+    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    label?: import("react").ReactNode;
+    onDelete?: ((event: any) => void) | undefined;
+    size?: "small" | "medium" | undefined;
+    skipFocusWhenDisabled?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+    tabIndex?: number | undefined;
+    variant?: "outlined" | "filled" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "color" | "label" | "children" | "sx" | "tabIndex" | "disabled" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "variant"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
+export declare const StyledContainedChipDeletable: import("@emotion/styled").StyledComponent<{
+    avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    children?: null | undefined;
+    classes?: Partial<import("@mui/material").ChipClasses> | undefined;
+    clickable?: boolean | undefined;
+    color?: "default" | "primary" | "secondary" | "error" | "warning" | "success" | "info" | undefined;
+    deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    disabled?: boolean | undefined;
+    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    label?: import("react").ReactNode;
+    onDelete?: ((event: any) => void) | undefined;
+    size?: "small" | "medium" | undefined;
+    skipFocusWhenDisabled?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+    tabIndex?: number | undefined;
+    variant?: "outlined" | "filled" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "color" | "label" | "children" | "sx" | "tabIndex" | "disabled" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "variant"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;

package/package.json

@@ -1,24 +1,30 @@
 {
   "name": "@lunit/design-system",
-  "version": "1.0.0-a.1",
+  "version": "1.0.0-a.2",
   "description": "Lunit Design System",
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/index.js",
+  "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/cjs/index.js"
     },
     "./*": {
-      "types": "./dist/components/*/index.d.ts",
-      "default": "./dist/components/*/index.js"
+      "types": "./dist/types/components/*/index.d.ts",
+      "import": "./dist/components/*/index.js",
+      "require": "./dist/cjs/components/*/index.js",
+      "default": "./dist/cjs/components/*/index.js"
     }
   },
-  "types": "dist/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "typesVersions": {
     "*": {
       "*": [
-        "dist/components/*/index.d.ts",
-        "dist/index.d.ts"
+        "dist/types/components/*/index.d.ts",
+        "dist/types/index.d.ts"
       ]
     }
   },
@@ -29,7 +35,9 @@
     "directory": "packages/design-system"
   },
   "scripts": {
-    "build": "webpack",
+    "build:prepare": "tsc -p tsconfig.build.json",
+    "build:cjs": "webpack -c webpack/cjs.config.js",
+    "build": "yarn build:prepare && yarn build:cjs",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "chromatic": "chromatic"
@@ -48,6 +56,7 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.11.3",
+    "@mui/utils": "^5.11.3",
     "@mui/x-date-pickers": "^5.0.16",
     "@storybook/addon-actions": "^6.4.22",
     "@storybook/addon-essentials": "^6.4.22",

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import { Box } from "@mui/material";
+
+const Alert = () => {
+  return <Box>Alert</Box>;
+};
+
+export default Alert;

package/src/components/Alert/index.ts

@@ -0,0 +1 @@
+export { default } from "./Alert";

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

@@ -0,0 +1,220 @@
+import { styled } from "@mui/material/styles";
+import { Button as MuiButton } from "@mui/material";
+
+import { ColorToken } from "@/foundation/colors/types";
+import { PADDING_OF_FOCUS, OUTLINED_BORDER_WIDTH } from "./const";
+import { getButtonPaddingBySizeAndKind } from "./utils/getButtonPaddingBySizeAndKind";
+import { getIconButtonPaddingBySizeAndKind } from "./utils/getIconButtonPaddingBySizeAndKind";
+
+import type { ButtonProps } from "./Button.types";
+import type { ToggleButtonProps } from "../ToggleButton/ToggleButton.types";
+import type { Typography } from "@mui/material/styles/createTypography";
+
+type KindStyleParams = Pick<ButtonProps, "kind" | "color"> & {
+  token: ColorToken;
+};
+
+type CustomButtonProps = ButtonProps & { hasIconOnly: boolean };
+
+type sizeStyleParams = Pick<
+  CustomButtonProps,
+  "size" | "hasIconOnly" | "kind"
+> &
+  Pick<ToggleButtonProps, "selected"> & { typography: Typography };
+
+export const sizeStyle = ({
+  size,
+  kind,
+  hasIconOnly,
+  typography,
+  selected = false,
+}: sizeStyleParams) => ({
+  ...(size === "small" && {
+    ...typography.button2,
+    padding: `${
+      hasIconOnly
+        ? getIconButtonPaddingBySizeAndKind({ kind, size, selected })
+        : getButtonPaddingBySizeAndKind({ kind, size, selected })
+    }`,
+    minWidth: "28px",
+    minHeight: "28px",
+  }),
+  ...(size === "medium" && {
+    ...typography.button2,
+    padding: `${
+      hasIconOnly
+        ? getIconButtonPaddingBySizeAndKind({ kind, size, selected })
+        : getButtonPaddingBySizeAndKind({ kind, size, selected })
+    }`,
+    minWidth: "36px",
+    minHeight: "36px",
+  }),
+  ...(size === "large" && {
+    ...typography.button1,
+    padding: `${
+      hasIconOnly
+        ? getIconButtonPaddingBySizeAndKind({ kind, size, selected })
+        : getButtonPaddingBySizeAndKind({ kind, size, selected })
+    }`,
+    minWidth: "44px",
+    minHeight: "44px",
+  }),
+});
+
+export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
+  // kind: container
+  ...(kind === "contained" &&
+    color === "primary" && {
+      color: token.component.btn_contained_primary_text,
+      backgroundColor: token.component.btn_contained_primary_bg,
+      "&:hover": {
+        backgroundColor: token.component.btn_contained_primary_bg,
+      },
+      "&.Mui-disabled": {
+        opacity: 0.38,
+        border: "none",
+        color: token.component.btn_contained_primary_text,
+      },
+    }),
+  ...(kind === "contained" &&
+    color === "secondary" && {
+      color: token.component.btn_contained_secondary_text,
+      backgroundColor: token.component.btn_contained_secondary_bg,
+      "&:hover": {
+        backgroundColor: token.component.btn_contained_secondary_bg,
+      },
+      "&.Mui-disabled": {
+        opacity: 0.38,
+        border: "none",
+        color: token.component.btn_contained_secondary_text,
+      },
+    }),
+  ...(kind === "contained" &&
+    color === "error" && {
+      color: token.component.btn_contained_error_text,
+      backgroundColor: token.component.btn_contained_error_bg,
+      "&:hover": {
+        backgroundColor: token.component.btn_contained_error_bg,
+      },
+      "&.Mui-disabled": {
+        opacity: 0.38,
+        border: "none",
+        color: token.component.btn_contained_error_text,
+      },
+    }),
+  // kind: ghost
+  ...(kind === "ghost" &&
+    color === "primary" && {
+      color: token.component.btn_ghost_primary_text,
+      border: "none",
+      "&:hover": {
+        backgroundColor: "rgba(0, 0, 0, 0.06)",
+      },
+      "&.Mui-disabled": {
+        opacity: 0.38,
+        border: "none",
+        color: token.component.btn_ghost_primary_text,
+      },
+    }),
+  ...(kind === "ghost" &&
+    color === "secondary" && {
+      color: token.component.btn_ghost_secondary_text,
+      border: "none",
+      "&:hover": {
+        backgroundColor: "rgba(0, 0, 0, 0.06)",
+      },
+      "&.Mui-disabled": {
+        opacity: 0.38,
+        border: "none",
+        color: token.component.btn_ghost_secondary_text,
+      },
+    }),
+  ...(kind === "ghost" &&
+    color === "error" && {
+      color: token.component.btn_ghost_error_text,
+      "&:hover": {
+        backgroundColor: "rgba(0, 0, 0, 0.06)",
+      },
+      "&.Mui-disabled": {
+        opacity: 0.38,
+        border: "none",
+        color: token.component.btn_ghost_error_text,
+      },
+    }),
+  // kind: outlined
+  ...(kind === "outlined" &&
+    color === "primary" && {
+      color: token.component.btn_outlined_primary_text,
+      border: `${OUTLINED_BORDER_WIDTH}px solid ${token.component.btn_outlined_primary_border}`,
+      "&:hover": {
+        backgroundColor: "rgba(0, 0, 0, 0.06)", // TODO: color util function 추가 후 변경
+      },
+      "&.Mui-disabled": {
+        opacity: 0.38,
+        color: token.component.btn_outlined_primary_text,
+      },
+    }),
+});
+
+export const commonStyle = ({ token }: { token: ColorToken }) =>
+  ({
+    fontWeight: "500",
+    borderRadius: "8px",
+    textTransform: "initial",
+    "&.Mui-focusVisible": {
+      "&::after": {
+        position: "absolute",
+        width: `calc(100% + ${PADDING_OF_FOCUS}px)`,
+        height: `calc(100% + ${PADDING_OF_FOCUS}px)`,
+        content: '""',
+        borderRadius: "11px",
+        border: `1px solid ${token.core.focused}`,
+        boxSizing: "border-box",
+      },
+    },
+  } as const);
+
+export const iconStyle = ({
+  size,
+  hasIconOnly,
+}: Pick<CustomButtonProps, "size" | "hasIconOnly">) => ({
+  "& .MuiButton-startIcon": {
+    width: "20px",
+    height: "20px",
+    margin: 0,
+    marginRight: hasIconOnly ? "0px" : size === "large" ? "8px" : "4px",
+
+    // This style was added for Mui Button Svg Icon handling
+    "*:nth-of-type(1)": {
+      fontSize: "20px",
+    },
+  },
+  svg: {
+    width: "20px",
+    height: "20px",
+    margin: 0,
+    marginRight: hasIconOnly ? "0px" : size === "large" ? "8px" : "4px",
+  },
+});
+
+export const CustomButton = styled(MuiButton, {
+  shouldForwardProp: (prop: string) => {
+    return !["kind", "hasIconOnly"].includes(prop);
+  },
+})<CustomButtonProps>(
+  ({
+    theme: {
+      typography,
+      palette: { token },
+    },
+    kind,
+    size,
+    color,
+    hasIconOnly,
+  }) => ({
+    ...commonStyle({ token }),
+    ...iconStyle({ size, hasIconOnly }),
+    ...sizeStyle({ size, kind, hasIconOnly, typography }),
+    ...kindStyle({ kind, color, token }),
+  })
+);

package/src/components/Button/Button.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+import { CustomButton } from "./Button.styled";
+
+import type { ButtonProps } from "./Button.types";
+
+const Button = (props: Omit<ButtonProps, "hasIconOnly">) => {
+  const {
+    kind = "contained",
+    size = "small",
+    color = "primary",
+    icon,
+    className,
+    children,
+    ...buttonProps
+  } = props;
+  const hasIconOnly = Boolean(icon && !children);
+
+  return (
+    <>
+      {kind === "contained" || kind === "ghost" ? (
+        <CustomButton
+          className={`${kind} ${className ? className : ""}`}
+          kind={kind}
+          color={color}
+          size={size}
+          startIcon={icon}
+          hasIconOnly={hasIconOnly}
+          disableRipple
+          disableFocusRipple
+          {...buttonProps}
+        >
+          {!hasIconOnly && <>{children}</>}
+        </CustomButton>
+      ) : (
+        <CustomButton
+          className={`outlined ${className ? className : ""}`}
+          kind="outlined"
+          color="primary"
+          size={size}
+          startIcon={icon}
+          hasIconOnly={hasIconOnly}
+          disableRipple
+          disableFocusRipple
+          {...buttonProps}
+        >
+          {!hasIconOnly && <>{children}</>}
+        </CustomButton>
+      )}
+    </>
+  );
+};
+
+export default Button;

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

@@ -0,0 +1,25 @@
+import type { ButtonProps as MuiButtonProps } from "@mui/material";
+
+interface BaseButtonProps extends MuiButtonProps {
+  icon?: React.ReactNode;
+}
+
+interface ContainedButtonProps extends Omit<BaseButtonProps, "variant"> {
+  kind?: "contained";
+  color?: "primary" | "secondary" | "error";
+}
+
+interface GhostButtonProps extends Omit<BaseButtonProps, "variant"> {
+  kind?: "ghost";
+  color?: "primary" | "secondary" | "error";
+}
+
+interface OutlinedButtonProps extends Omit<BaseButtonProps, "variant"> {
+  kind?: "outlined";
+  color?: "primary";
+}
+
+export type ButtonProps =
+  | ContainedButtonProps
+  | GhostButtonProps
+  | OutlinedButtonProps;

package/src/components/Button/const.ts

@@ -0,0 +1,2 @@
+export const PADDING_OF_FOCUS = 6; // TODO: focus 시 padding 고정값, size 별 차이 여부 확인 필요
+export const OUTLINED_BORDER_WIDTH = 1;

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { default } from "./Button";

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

@@ -0,0 +1,35 @@
+import { OUTLINED_BORDER_WIDTH } from "../const";
+
+import type { ButtonProps } from "../Button.types";
+import { ToggleButtonProps } from "@/components/ToggleButton/ToggleButton.types";
+
+type GetButtonPaddingBySizeAndKindParams = Pick<ButtonProps, "kind" | "size"> &
+  Pick<ToggleButtonProps, "selected">;
+
+/**
+ * When kind is outlined,
+ * the padding value must include the border width of outlined.
+ * This function takes care of this.
+ */
+export const getButtonPaddingBySizeAndKind = ({
+  kind,
+  size,
+  selected = false,
+}: GetButtonPaddingBySizeAndKindParams) => {
+  if (size === "small") {
+    return kind === "outlined" && !selected
+      ? `${4 - OUTLINED_BORDER_WIDTH}px ${8 - OUTLINED_BORDER_WIDTH}px`
+      : "4px 8px";
+  }
+
+  if (size === "medium") {
+    return kind === "outlined" && !selected
+      ? `${8 - OUTLINED_BORDER_WIDTH}px ${12 - OUTLINED_BORDER_WIDTH}px`
+      : "8px 12px";
+  }
+
+  // size === "large"
+  return kind === "outlined" && !selected
+    ? `${10 - OUTLINED_BORDER_WIDTH}px ${12 - OUTLINED_BORDER_WIDTH}px`
+    : "10px 12px";
+};

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

@@ -0,0 +1,38 @@
+import { OUTLINED_BORDER_WIDTH } from "../const";
+
+import type { ButtonProps } from "../Button.types";
+import { ToggleButtonProps } from "@/components/ToggleButton/ToggleButton.types";
+
+type GetIconButtonPaddingBySizeAndKindProps = Pick<
+  ButtonProps,
+  "kind" | "size"
+> &
+  Pick<ToggleButtonProps, "selected">;
+
+/**
+ * When kind is outlined,
+ * the padding value must include the border width of outlined.
+ * This function takes care of this.
+ */
+export const getIconButtonPaddingBySizeAndKind = ({
+  kind,
+  size,
+  selected = false,
+}: GetIconButtonPaddingBySizeAndKindProps) => {
+  if (size === "small") {
+    return kind === "outlined" && !selected
+      ? `${4 - OUTLINED_BORDER_WIDTH}px`
+      : "4px";
+  }
+
+  if (size === "medium") {
+    return kind === "outlined" && !selected
+      ? `${8 - OUTLINED_BORDER_WIDTH}px`
+      : "8px";
+  }
+
+  // size === "large"
+  return kind === "outlined" && !selected
+    ? `${12 - OUTLINED_BORDER_WIDTH}px`
+    : "12px";
+};

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { styled } from "@mui/material/styles";
+import MuiCheckbox from "@mui/material/Checkbox";
+import type { CheckboxProps } from "@mui/material";
+
+const CustomCheckbox = styled(MuiCheckbox)(({ theme }) => ({
+  width: 20,
+  height: 20,
+  padding: 1,
+  "&.Mui-disabled": {
+    opacity: 0.38,
+  },
+  "&.Mui-focusVisible:after": {
+    content: '""',
+    position: "absolute",
+    width: 24,
+    height: 24,
+    border: `1px solid ${theme.palette.token.core.focused}`,
+    borderRadius: "7px",
+  },
+}));
+
+const iconSize = {
+  width: 18,
+  height: 18,
+};
+
+const DefaultIcon = styled("span")(({ theme }) => ({
+  ...iconSize,
+  backgroundColor: theme.palette.token.component.selectcontrol_off,
+  maskImage:
+    "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath" +
+    " fill-rule='evenodd' clip-rule='evenodd' d='M14 1.5H4C2.61929 1.5 1.5 2.61929 1.5 4V14C1.5 15.3807 2.61929 16.5 4 16.5H14C15.3807 " +
+    "16.5 16.5 15.3807 16.5 14V4C16.5 2.61929 15.3807 1.5 14 1.5ZM4 0C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H14C16.2091 18 18 16.2091 18 14V4C18 1.79086 16.2091 0 14 0H4Z' /%3E%3C/svg%3E\")",
+}));
+
+const CheckedIcon = styled("span")(({ theme }) => ({
+  ...iconSize,
+  backgroundColor: theme.palette.token.component.selectcontrol_on,
+  maskImage:
+    "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath" +
+    " fill-rule='evenodd' clip-rule='evenodd' d='M4 0C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H14C16.2091 18 18 16.2091 18 14V4C18 1.79086 16.2091 0 14 0H4ZM14.2516 " +
+    "7.14413C14.6074 6.72168 14.5533 6.09083 14.1309 5.73508C13.7084 5.37933 13.0776 5.43341 12.7218 5.85586L8.31824 11.0851L5.14993 8.37556C4.7302 8.01661 4.09895 8.06588 3.74 8.48561C3.38105 8.90533 3.43032 9.53658 3.85005 9.89553L7.78416 13.26C7.98672 13.4332 8.25006 13.5184 8.51571 13.4967C8.78135 13.4749 9.02732 13.348 9.19901 13.1441L14.2516 7.14413Z' /%3E%3C/svg%3E\")",
+}));
+
+const IndeterminateIcon = styled("span")(({ theme }) => ({
+  ...iconSize,
+  backgroundColor: theme.palette.token.component.selectcontrol_on,
+  maskImage:
+    "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath" +
+    " fill-rule='evenodd' clip-rule='evenodd' d='M4 0C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H14C16.2091 18 18 16.2091 18 14V4C18 1.79086 16.2091 0 " +
+    "14 0H4ZM4 8C3.44772 8 3 8.44771 3 9C3 9.5523 3.44771 10 4 10H14C14.5523 10 15 9.5523 15 9C15 8.44772 14.5523 8 14 8H4Z' /%3E%3C/svg%3E\")",
+}));
+
+const Checkbox = (props: CheckboxProps) => {
+  return (
+    <CustomCheckbox
+      disableRipple
+      icon={<DefaultIcon />}
+      checkedIcon={<CheckedIcon />}
+      indeterminateIcon={<IndeterminateIcon />}
+      {...props}
+    />
+  );
+};
+
+export default Checkbox;

package/src/components/Checkbox/index.ts

@@ -0,0 +1 @@
+export { default } from "./Checkbox";