@lunit/design-system 1.0.0-b.4 → 2.0.0

package/src/components/Checkbox/Checkbox.tsx

@@ -6,7 +6,7 @@ import type { CheckboxProps } from "@mui/material";
 const CustomCheckbox = styled(MuiCheckbox)(({ theme }) => ({
   width: 20,
   height: 20,
-  padding: 1,
+  padding: 0,
   "&.Mui-disabled": {
     opacity: 0.38,
   },
@@ -27,30 +27,47 @@ const iconSize = {
 
 const DefaultIcon = styled("span")(({ theme }) => ({
   ...iconSize,
-  backgroundColor: theme.palette.lunit_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\")",
+  borderRadius: "20%",
+  boxShadow: `inset 0 0 0 1.5px ${theme.palette.lunit_token.component.selectcontrol_off}`,
 }));
 
-const CheckedIcon = styled("span")(({ theme }) => ({
-  ...iconSize,
-  backgroundColor: theme.palette.lunit_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 CheckedIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5 1C2.79086 1 1 2.79086 1 5V15C1 17.2091 2.79086 19 5 19H15C17.2091 19 19 17.2091 19 15V5C19 2.79086 17.2091 1 15 1H5ZM15.2516 8.14413C15.6074 7.72168 15.5533 7.09083 15.1309 6.73508C14.7084 6.37933 14.0776 6.43341 13.7218 6.85586L9.31824 12.0851L6.14993 9.37556C5.7302 9.01661 5.09895 9.06588 4.74 9.48561C4.38105 9.90533 4.43032 10.5366 4.85005 10.8955L8.78416 14.26C8.98672 14.4332 9.25006 14.5184 9.51571 14.4967C9.78135 14.4749 10.0273 14.348 10.199 14.1441L15.2516 8.14413Z"
+        fill="#00C9EA"
+      />
+    </svg>
+  );
+};
 
-const IndeterminateIcon = styled("span")(({ theme }) => ({
-  ...iconSize,
-  backgroundColor: theme.palette.lunit_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 IndeterminateIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5 1C2.79086 1 1 2.79086 1 5V15C1 17.2091 2.79086 19 5 19H15C17.2091 19 19 17.2091 19 15V5C19 2.79086 17.2091 1 15 1H5ZM5 9C4.44772 9 4 9.44771 4 10C4 10.5523 4.44771 11 5 11L15 11C15.5523 11 16 10.5523 16 10C16 9.44772 15.5523 9 15 9L5 9Z"
+        fill="#00C9EA"
+      />
+    </svg>
+  );
+};
 
 const Checkbox = (props: CheckboxProps) => {
   return (

package/src/components/Chip/Chip.tsx

@@ -19,8 +19,11 @@ import type {
 } from "./Chip.types";
 
 const Chip: ChipType = (props: ChipProps) => {
-  const { kind, onDelete, onClick, ...restProps } = props;
-  if (kind === "outlined") return <OutlinedChip {...props} />;
+  const { kind, variant, onDelete, onClick, ...restProps } = props;
+
+  const isOutlined = kind === "outlined" || variant === "outlined";
+
+  if (isOutlined) return <OutlinedChip {...props} />;
   else if (onClick) return <EnableContainedChip {...props} />;
   else if (onDelete) return <DeletableContainedChip {...props} />;
 
@@ -63,7 +66,7 @@ const getLabelMargin = (
 };
 
 const ReadOnlyContainedChip = (props: ReadOnlyContainedChipProps) => {
-  const { color = "primary", thumbnail, sx, ...restProps } = props;
+  const { color = "primary", thumbnail, sx, variant, ...restProps } = props;
 
   return (
     <StyledContainedChipBase
@@ -89,6 +92,7 @@ const EnableContainedChip = (props: EnableContainedChipProps) => {
     onDelete,
     onClick,
     sx,
+    variant,
     ...restProps
   } = props;
 
@@ -117,7 +121,14 @@ const DeleteIconWithHoverLayer = ({ onClick }: { onClick: () => void }) => {
   );
 };
 const DeletableContainedChip = (props: DeletableContainedChipProps) => {
-  const { color = "primary", thumbnail, onDelete, sx, ...restProps } = props;
+  const {
+    color = "primary",
+    thumbnail,
+    onDelete,
+    sx,
+    variant,
+    ...restProps
+  } = props;
 
   return (
     <StyledContainedChipDeletable

package/src/components/Chip/Chip.types.ts

@@ -6,6 +6,8 @@ import type {
 } from "@mui/material";
 import type { OverridableComponent } from "@mui/material/OverridableComponent";
 
+type DesignSystemChipKind = "outlined" | "contained";
+type DesignSystemAndMuiContainedChipKind = "filled" | "contained";
 type ColorKeys = keyof typeof CHIP_COLORS;
 export type ChipColor = (typeof CHIP_COLORS)[ColorKeys];
 export type ChipThumbnail = string | JSX.Element;
@@ -18,12 +20,16 @@ export interface BaseChipProps
     MuiChipProps,
     "label" | "sx" | "style" | "classes" | "onDelete"
   > {
-  kind?: "outlined" | "contained";
+  // either kind or variant
+  kind?: DesignSystemChipKind;
+  variant?: "outlined" | DesignSystemAndMuiContainedChipKind;
+  // mui variant = outlined | "filled" | undefined
   color?: ChipColor;
 }
 
 export interface OutlinedChipProps extends BaseChipProps {
   kind?: "outlined";
+  variant?: "outlined";
   onClick?: never;
   onDelete?: never;
 }
@@ -32,9 +38,10 @@ export interface BaseContainedChipProps
   extends BaseChipProps,
     Omit<
       MuiChipProps,
-      "color" | "size" | "variant" | "avatar" | "deleteIcon" | "icon"
+      "color" | "size" | "avatar" | "deleteIcon" | "icon" | "variant"
     > {
   kind?: "contained";
+  variant?: DesignSystemAndMuiContainedChipKind;
   thumbnail?: ChipThumbnail;
   onClick?: () => void;
 }

package/src/components/Dialog/Dialog.styled.ts

@@ -0,0 +1,165 @@
+import { styled } from "@mui/material/styles";
+
+import type { DialogBase } from "./Dialog";
+import type { CSSObject } from "@mui/material/styles";
+
+export interface DialogElementStyle {
+  [key: string]: CSSObject;
+}
+
+export type DialogStyle = Pick<DialogBase, "size" | "type" | "nonModal">;
+
+const DIALOG_WRAPPER_STYLE: DialogElementStyle = {
+  small: {
+    width: "320px",
+    maxWidth: "320px",
+  },
+  medium: {
+    width: "500px",
+    maxWidth: "840px",
+  },
+  modal: {
+    position: "relative",
+    boxShadow:
+      "0px 12px 24px 8px rgba(0, 0, 0, 0.12), 0px 12px 44px 3px rgba(0, 0, 0, 0.18)",
+  },
+  nonModal: {
+    position: "fixed",
+    top: "30px",
+    right: "30px",
+    boxShadow:
+      "0px 12px 24px 8px rgba(0, 0, 0, 0.36), 0px 12px 44px 3px rgba(0, 0, 0, 0.48)",
+  },
+};
+
+const DIALOG_TITLE_STYLE: DialogElementStyle = {
+  small: {
+    height: "52px",
+    maxHeight: "100%",
+    padding: "20px 20px 8px 20px",
+  },
+  medium: {
+    height: "64px",
+    maxHeight: "100%",
+    padding: "30px 32px 6px 32px",
+  },
+};
+
+const DIALOG_CONTENT_STYLE: DialogElementStyle = {
+  small: {
+    paddingInline: "20px calc(20px - 10px)",
+    paddingBottom: "28px",
+  },
+  smallAction: {
+    paddingInline: "20px calc(20px - 10px)",
+    paddingBottom: "8px",
+  },
+  medium: {
+    paddingInline: "32px calc(32px - 14px)",
+    paddingBottom: "32px",
+  },
+  mediumAction: {
+    paddingInline: "32px calc(32px - 14px)",
+    paddingBottom: "16px",
+  },
+};
+
+const DIALOG_ACTION_STYLE: DialogElementStyle = {
+  small: {
+    height: "64px",
+    padding: "8px 20px 20px 20px",
+  },
+  medium: {
+    height: "84px",
+    padding: "16px 32px 32px 32px",
+  },
+};
+
+export const StyledBackdrop = styled("div")({
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  backgroundColor: "rgba(17, 17, 19, 0.7)",
+  zIndex: 1000,
+  display: "grid",
+  placeItems: "center",
+});
+
+export const StyledDialog = styled("div")<DialogStyle>(
+  ({ theme, size, nonModal, type }) => ({
+    zIndex: 1001,
+    maxHeight: "80vh",
+    display: "flex",
+    flexDirection: "column",
+    boxSizing: "border-box",
+    borderRadius: "10px",
+    backgroundColor: theme.palette.lunit_token.core.bg_03,
+    color: theme.palette.lunit_token.core.text_normal,
+
+    ...DIALOG_WRAPPER_STYLE[size === "small" ? "small" : "medium"],
+    ...DIALOG_WRAPPER_STYLE[nonModal ? "nonModal" : "modal"],
+
+    "& #dialog-title": {
+      ...DIALOG_TITLE_STYLE[size === "small" ? "small" : "medium"],
+    },
+
+    "& #dialog-content": {
+      ...DIALOG_CONTENT_STYLE[
+        size === "small" && type !== "passive"
+          ? "smallAction"
+          : size === "small"
+          ? "small"
+          : size === "medium" && type !== "passive"
+          ? "mediumAction"
+          : "medium"
+      ],
+
+      scrollbarGutter: "stable",
+      "::-webkit-scrollbar": {
+        width: size === "small" ? "10px" : "14px",
+      },
+      "::webkit-scrollbar-track": {
+        background: "transparent",
+      },
+      "::-webkit-scrollbar-thumb": {
+        backgroundClip: "padding-box",
+        border: `2px solid transparent`,
+        /**
+         * Figma's border-radius is 6px, but actual border radius is 10px since padding 2px is added.
+         */
+        borderRadius: "10px",
+        backgroundColor: theme.palette.lunit_token.component.scrollbars_bg,
+      },
+    },
+
+    "& #dialog-action": {
+      ...DIALOG_ACTION_STYLE[size === "small" ? "small" : "medium"],
+    },
+  })
+);
+
+export const StyledDialogTitle = styled("header")({
+  display: "flex",
+  width: "100%",
+  flex: "0 0 auto",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  gap: "8px",
+});
+
+export const StyledDialogTitleIconWrapper = styled("div")({
+  display: "flex",
+  justifyContent: "center",
+  width: "20px",
+  height: "20px",
+  position: "relative",
+  marginBottom: "1px",
+});
+
+export const StyledDialogContent = styled("div")(({ theme }) => ({
+  ...theme.typography.body2_14_regular,
+  flex: "1 1 auto",
+  overflowY: "scroll",
+}));

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,195 @@
+import React, { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Close } from "@lunit/design-system-icons";
+
+import { DialogAction } from "./components/DialogAction";
+import {
+  StyledBackdrop,
+  StyledDialog,
+  StyledDialogContent,
+  StyledDialogTitle,
+  StyledDialogTitleIconWrapper,
+} from "./Dialog.styled";
+import Button from "../Button";
+import Typography from "../Typography";
+
+import type { SxProps } from "@mui/material/styles";
+import type { TypographyProps } from "@mui/material";
+
+export interface DialogBase {
+  isOpen: boolean;
+  onClose(): void;
+  type?: "passive" | "action"; // default passive
+  nonModal?: boolean; // default false
+  title: string;
+  titleIcon?: React.ReactNode;
+  titleVariant?: TypographyProps["variant"];
+  children: React.ReactNode;
+  actions?: React.ReactNode;
+  enableBackButtonClose?: boolean;
+  enableBackdropClose?: boolean;
+  size?: "small" | "medium"; // default "small"
+  sx?: SxProps;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export interface PassiveDialogType extends DialogBase {
+  type: "passive";
+  actions?: undefined;
+  enableBackButtonClose?: true;
+  enableBackdropClose?: true;
+}
+export interface ActionDialogType extends DialogBase {
+  type: "action";
+  actions: React.ReactNode;
+  enableBackButtonClose?: boolean;
+  enableBackdropClose?: boolean;
+}
+
+export interface PassiveModalProps extends PassiveDialogType {
+  nonModal?: false;
+}
+export interface ActionModalProps extends ActionDialogType {
+  nonModal?: false;
+}
+export type ModalProps = PassiveModalProps | ActionModalProps;
+
+export interface PassiveNonModalProps extends PassiveDialogType {
+  nonModal?: true;
+}
+export interface ActionNonModalProps extends ActionDialogType {
+  nonModal?: true;
+  enableBackdropClose?: false;
+}
+export type NonModalProps = PassiveNonModalProps | ActionNonModalProps;
+
+export type DialogProps = ModalProps | NonModalProps;
+
+function Dialog(props: DialogProps) {
+  const { isOpen, type, nonModal = false, onClose } = props;
+
+  const isActionModal = type === "action" && !nonModal;
+  const isPassiveModal = type === "passive" && !nonModal;
+  const isActionNonModal = type === "action" && nonModal;
+
+  function handleBackdropClose(e: React.MouseEvent<HTMLDivElement>) {
+    const isClosable =
+      isPassiveModal || (isActionModal && props.enableBackdropClose);
+
+    if (!isClosable) return;
+    if (e.target !== e.currentTarget) return;
+
+    onClose();
+  }
+
+  useEffect(() => {
+    const isClosable =
+      isOpen &&
+      (isPassiveModal ||
+        (isActionModal && props.enableBackdropClose) ||
+        (isActionNonModal && props.enableBackButtonClose));
+
+    if (!isClosable) return;
+
+    function handleEscClose(event: KeyboardEvent) {
+      if (event.key === "Escape") onClose();
+    }
+    function handleBackButtonClose(event: KeyboardEvent) {
+      if (event.key === "Backspace") onClose();
+    }
+
+    document.addEventListener("keydown", handleEscClose);
+    document.addEventListener("keydown", handleBackButtonClose);
+
+    return () => {
+      document.removeEventListener("keydown", handleEscClose);
+      document.removeEventListener("keydown", handleBackButtonClose);
+    };
+  }, [isOpen, isPassiveModal, onClose]);
+
+  if (!isOpen) return null;
+  return createPortal(
+    nonModal ? (
+      <DialogBase dialogProps={{ ...props }} />
+    ) : (
+      <StyledBackdrop
+        onClick={handleBackdropClose}
+        data-testid="dialog-backdrop"
+      >
+        <DialogBase dialogProps={{ ...props }} />
+      </StyledBackdrop>
+    ),
+
+    document.body
+  );
+}
+
+function DialogBase({ dialogProps }: { dialogProps: DialogBase }) {
+  const {
+    nonModal = false,
+    onClose,
+    title,
+    titleIcon,
+    titleVariant = "headline5",
+    children,
+    actions,
+    type,
+    size = "small",
+    sx,
+    style,
+    className,
+  } = dialogProps;
+
+  return (
+    <StyledDialog
+      role="dialog"
+      aria-labelledby="dialog-title"
+      size={size}
+      nonModal={nonModal}
+      type={type}
+      sx={{
+        ...sx,
+      }}
+      style={style}
+      className={`dialog ${className ?? ""}`}
+    >
+      <StyledDialogTitle id="dialog-title" className="dialog-title-wrapper">
+        {titleIcon && (
+          <StyledDialogTitleIconWrapper className="dialog-title-icon">
+            {titleIcon}
+          </StyledDialogTitleIconWrapper>
+        )}
+        <Typography
+          component="h2"
+          id="dialog-title-text"
+          variant={titleVariant}
+        >
+          {title}
+        </Typography>
+        {type === "passive" && (
+          <Button
+            id="dialog-title-close-button"
+            data-testid="dialog-title-close-button"
+            kind="ghost"
+            color="secondary"
+            icon={<Close />}
+            onClick={onClose}
+            sx={{
+              marginRight: 0,
+              marginLeft: "auto",
+            }}
+          />
+        )}
+      </StyledDialogTitle>
+      <StyledDialogContent id="dialog-content">{children}</StyledDialogContent>
+      {type === "action" && actions !== null ? (
+        // `actions !== null` is used to not render DialogAction when actions is undefined
+        // There was a case when actions is undefined, but DialogAction is rendered with null children
+        <DialogAction>{actions}</DialogAction>
+      ) : null}
+    </StyledDialog>
+  );
+}
+
+export default Dialog;

package/src/components/Dialog/components/DialogAction.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { styled } from "@mui/material/styles";
+
+interface DialogActionProps {
+  children: React.ReactNode;
+  justifyContent?: React.CSSProperties["justifyContent"];
+  sx?: React.CSSProperties;
+}
+
+const StyledDialogActions = styled("div")({
+  display: "flex",
+  flex: "0 0 auto",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  gap: 8,
+});
+
+export function DialogAction(props: DialogActionProps) {
+  const { children, justifyContent, sx } = props;
+
+  return (
+    <StyledDialogActions
+      id="dialog-action"
+      data-testid="dialog-action"
+      className="dialog-action"
+      sx={{
+        justifyContent,
+        ...sx,
+      }}
+    >
+      {children}
+    </StyledDialogActions>
+  );
+}
+
+export default DialogAction;

package/src/components/Dialog/index.ts

@@ -0,0 +1,14 @@
+export { default } from "./Dialog";
+
+export type {
+  DialogBase,
+  PassiveDialogType,
+  ActionDialogType,
+  PassiveModalProps,
+  ActionModalProps,
+  PassiveNonModalProps,
+  ActionNonModalProps,
+  ModalProps,
+  NonModalProps,
+  DialogProps,
+} from "./Dialog";

package/src/components/Radio/Radio.tsx

@@ -13,36 +13,48 @@ const CustomRadio = styled(MuiRadio)(({ theme }) => ({
     display: "block",
     width: 24,
     height: 24,
-    backgroundColor: theme.palette.lunit_token.core.focused,
-    maskImage:
-      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath" +
-      " fill-rule='evenodd' clip-rule='evenodd' d='M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 " +
-      "5.37258 0 12C0 18.6274 5.37258 24 12 24Z' /%3E%3C/svg%3E\")",
+    borderRadius: "50%",
+    border: `1px solid ${theme.palette.lunit_token.core.focused}`,
   },
 }));
 
-const iconSize = {
-  width: 20,
-  height: 20,
+const DefaultIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5ZM10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z"
+        fill="#99999B"
+      />
+    </svg>
+  );
 };
 
-const DefaultIcon = styled("span")(({ theme }) => ({
-  ...iconSize,
-  backgroundColor: theme.palette.lunit_token.component.selectcontrol_off,
-  maskImage:
-    "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath" +
-    " fill-rule='evenodd' clip-rule='evenodd' d='M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 " +
-    "10 17.5ZM10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z' /%3E%3C/svg%3E\")",
-}));
-
-const CheckedIcon = styled("span")(({ theme }) => ({
-  ...iconSize,
-  backgroundColor: theme.palette.lunit_token.component.selectcontrol_on,
-  maskImage:
-    "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath" +
-    " fill-rule='evenodd' clip-rule='evenodd' d='M10 15C12.7614 15 15 12.7614 15 10C15 7.23858 12.7614 5 10 5C7.23858 5 5" +
-    " 7.23858 5 10C5 12.7614 7.23858 15 10 15ZM10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z' /%3E%3C/svg%3E\")",
-}));
+const CheckedIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10 15C12.7614 15 15 12.7614 15 10C15 7.23858 12.7614 5 10 5C7.23858 5 5 7.23858 5 10C5 12.7614 7.23858 15 10 15ZM10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z"
+        fill="#00C9EA"
+      />
+    </svg>
+  );
+};
 
 const Radio = (props: RadioProps) => {
   return (