@team-monolith/cds 0.4.0 → 0.4.3

package/src/cds/components/Tag.tsx

@@ -1,155 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css, SerializedStyles } from "@emotion/react";
-import styled from "@emotion/styled";
-import React from "react";
-import { CloseFillIcon } from "../icons/system";
-import { Theme, useTheme } from "@emotion/react";
-
-export type TagColor =
-  | "default"
-  | "red"
-  | "teal"
-  | "orange"
-  | "blue"
-  | "green"
-  | "yellow"
-  | "black";
-
-export interface TagProps {
-  className?: string;
-  component?: React.ElementType;
-
-  /** 컴포넌트 내 표기될 문자열 */
-  label: string;
-
-  /** 컴포넌트 좌측에 표기될 아이콘 */
-  icon?: React.ReactNode;
-
-  /** 컴포넌트의 색상 */
-  color?: TagColor;
-
-  /** 컴포넌트 우측에 표기될 닫기 버튼 유무 */
-  close: boolean;
-
-  /** 닫기 버튼 클릭 시 호출될 콜백 함수 */
-  onClick?: () => void;
-}
-
-const COLOR_TO_STYLE = (theme: Theme, color: TagColor): SerializedStyles =>
-  ({
-    default: css`
-      box-sizing: border-box;
-      background: ${theme.color.container.marbleContainer};
-      border: 1px solid ${theme.color.container.marbleOnContainer};
-      color: ${theme.color.container.marbleOnContainer};
-    `,
-    red: css`
-      box-sizing: border-box;
-      background: ${theme.color.container.dangerContainer};
-      border: 1px solid ${theme.color.container.dangerOnContainer};
-      color: ${theme.color.container.dangerOnContainer};
-    `,
-    teal: css`
-      box-sizing: border-box;
-      background: ${theme.color.container.infoContainer};
-      border: 1px solid ${theme.color.container.infoOnContainer};
-      color: ${theme.color.container.infoOnContainer};
-    `,
-    orange: css`
-      box-sizing: border-box;
-      background: ${theme.color.container.secondaryContainer};
-      border: 1px solid ${theme.color.container.secondaryOnContainer};
-      color: ${theme.color.container.secondaryOnContainer};
-    `,
-    blue: css`
-      box-sizing: border-box;
-      background: ${theme.color.container.primaryContainer};
-      border: 1px solid ${theme.color.container.primaryOnContainer};
-      color: ${theme.color.container.primaryOnContainer};
-    `,
-    green: css`
-      box-sizing: border-box;
-      background: ${theme.color.container.successContainer};
-      border: 1px solid ${theme.color.container.successOnContainer};
-      color: ${theme.color.container.successOnContainer};
-    `,
-    yellow: css`
-      box-sizing: border-box;
-      background: ${theme.color.container.warningContainer};
-      border: 1px solid ${theme.color.container.warningOnContainer};
-      color: ${theme.color.container.warningOnContainer};
-    `,
-    black: css`
-      background: ${theme.color.container.obsidianContainer};
-      color: ${theme.color.container.obsidianOnContainer};
-    `,
-  }[color]);
-
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=42-869&t=HZXCHP0r0tbvMA6v-0)
- */
-const Tag = React.forwardRef<any, TagProps>(
-  (props, ref): React.ReactElement => {
-    const {
-      className,
-      component: Component = "span",
-      label,
-      icon,
-      color = "default",
-      close,
-      onClick,
-      ...other
-    } = props;
-    const theme = useTheme();
-    return (
-      <Component
-        {...other}
-        ref={ref}
-        className={className}
-        css={[
-          css`
-            box-sizing: border-box;
-            display: flex;
-            // flex가 화면 전체로 확장되지 않고 내부의 아이콘과 텍스트만 포함한다.
-            padding: 1px 8px;
-            align-items: center;
-            gap: 3px;
-            width: fit-content;
-            border-radius: 8px;
-
-            svg {
-              width: 14px;
-              height: 14px;
-            }
-          `,
-          COLOR_TO_STYLE(theme, color),
-          close
-            ? css`
-                cursor: pointer;
-              `
-            : undefined,
-        ]}
-        onClick={onClick}
-      >
-        {icon}
-        <span
-          css={css`
-            font-weight: 400;
-            font-size: 12px;
-            line-height: 20px;
-          `}
-        >
-          {label}
-        </span>
-        {close && <StyledCloseFillIcon />}
-      </Component>
-    );
-  }
-);
-
-const StyledCloseFillIcon = styled(CloseFillIcon)`
-  width: 10px;
-  height: 10px;
-`;
-
-export default Tag;

package/src/cds/components/Tooltip.tsx

@@ -1,104 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import React from "react";
-import {
-  Tooltip as MuiTooltip,
-  TooltipProps as MuiTooltipProps,
-} from "@mui/material";
-
-export interface TooltipProps {
-  className?: string;
-  // MUI Tooltip의 component 속성이 CDS에서 기대하는 속성과 다르게 구현되어있고,
-  // Tooltip 컴포넌트에서 component 속성을 사용하는 경우가 많지 않을 것으로 판단,
-  // CDS에서 Tooltip의 component 속성을 구현하지 않습니다.
-  // component?: React.ElementType;
-
-  /** 툴팁에 표시될 제목 텍스트 */
-  title?: string;
-
-  /** 툴팁에 표시될 text 영역 값 */
-  text: React.ReactNode;
-
-  /** `true` 값일때 Tooltip을 오픈합니다. */
-  open?: boolean;
-
-  /** Tooltip이 오픈될 때 호출되는 함수. */
-  onOpen?: (event: React.SyntheticEvent) => void;
-
-  /** Tooltip이 닫힐 때 호출되는 함수. */
-  onClose?: (event: React.SyntheticEvent | Event) => void;
-
-  /**
-   * Tooltip placement.
-   * @default bottom
-   */
-  placement?:
-    | "bottom-end"
-    | "bottom-start"
-    | "bottom"
-    | "left-end"
-    | "left-start"
-    | "left"
-    | "right-end"
-    | "right-start"
-    | "right"
-    | "top-end"
-    | "top-start"
-    | "top";
-
-  /** 툴팁을 표시할 객체입니다. ref를 props로 받을 수 있어야합니다. */
-  children: React.ReactElement<any, any>;
-}
-
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=172-626&t=aFkKTFgWq2xFFGC5-0)
- */
-const Tooltip = React.forwardRef<any, TooltipProps>(
-  (props, ref): React.ReactElement => {
-    const { title, text, children, ...restProps } = props;
-    return (
-      <StyledTooltip
-        ref={ref}
-        title={
-          <>
-            {title && <TitleDiv>{title}</TitleDiv>}
-            {text}
-          </>
-        }
-        {...restProps}
-      >
-        {children}
-      </StyledTooltip>
-    );
-  }
-);
-
-// https://mui.com/material-ui/react-tooltip/#customization
-const StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (
-  <MuiTooltip {...props} classes={{ popper: className }} />
-))(
-  ({ theme }) => css`
-    .MuiTooltip-tooltip {
-      background: ${theme.color.foreground.neutralBase};
-      border-radius: 8px;
-      padding: 6px 10px;
-
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-
-      color: ${theme.color.background.neutralBase};
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 22px;
-    }
-  `
-);
-
-const TitleDiv = styled.div`
-  font-weight: 700;
-`;
-
-export default Tooltip;

package/src/cds/foundation/color.ts

@@ -1,83 +0,0 @@
-// eslint-disable-next-line import/no-anonymous-default-export
-export default {
-  blue10: "#1C3D73",
-  priamry09: "#234E91",
-  blue08: "#2C61B5",
-  blue07: "#3574D9",
-  blue06: "#3E88FF",
-  blue05: "#619DFF",
-  blue04: "#85B4FF",
-  blue03: "#ACCCFF",
-  blue02: "#D1E2FF",
-  blue01: "#ECF3FF",
-
-  orange10: "#6B421A",
-  orange09: "#8C5622",
-  orange08: "#B56F2C",
-  orange07: "#E88F38",
-  orange06: "#FF9D3E",
-  orange05: "#FFB165",
-  orange04: "#FFBD7E",
-  orange03: "#FFD2A6",
-  orange02: "#FFE1C3",
-  orange01: "#FFF5EC",
-
-  teal10: "#1C6069",
-  teal09: "#257D89",
-  teal08: "#30A2B1",
-  teal07: "#3DCFE3",
-  teal06: "#43E4F9",
-  teal05: "#69E9FA",
-  teal04: "#81EDFB",
-  teal03: "#A9F3FC",
-  teal02: "#C5F7FD",
-  teal01: "#ECFCFE",
-
-  yellow10: "#6B5402",
-  yellow09: "#8C6F03",
-  yellow08: "#B58F04",
-  yellow07: "#E8B705",
-  yellow06: "#FFC905",
-  yellow05: "#FFD437",
-  yellow04: "#FFDB58",
-  yellow03: "#FFE68C",
-  yellow02: "#FFEEB2",
-  yellow01: "#FFFAE6",
-
-  green10: "#3F580C",
-  green09: "#527310",
-  green08: "#6A9415",
-  green07: "#88BE1A",
-  green06: "#95D11D",
-  green05: "#AADA4A",
-  green04: "#B8E068",
-  green03: "#CEEA97",
-  green02: "#DEF1B9",
-  green01: "#F4FAE8",
-
-  red10: "#6B2013",
-  red09: "#8C2A19",
-  red08: "#B53720",
-  red07: "#E84629",
-  red06: "#FF4D2D",
-  red05: "#FF7157",
-  red04: "#FF8872",
-  red03: "#FFAD9E",
-  red02: "#FFC8BE",
-  red01: "#FFEDEA",
-
-  black: "#363636",
-
-  grey10: "#3E3E3E",
-  grey09: "#454545",
-  grey08: "#5F5F5F",
-  grey07: "#717171",
-  grey06: "#9C9C9C",
-  grey05: "#C8C8C8",
-  grey04: "#DEDEDE",
-  grey03: "#F2F2F2",
-  grey02: "#F6F6F6",
-  grey01: "#FDFDFD",
-
-  white: "#FFFFFF",
-};

package/src/cds/foundation/shadows.ts

@@ -1,17 +0,0 @@
-// https://www.figma.com/file/wefLB6cN0oM2VZjwYmBA6B/Codle-PD-Kit---Foundation?type=design&node-id=1-14238&t=Jg9tQ0vSRG6mw1RZ-0
-const shadows = {
-  shadow02:
-    "0px 0.15px 0.45px rgba(0, 0, 0, 0.11), 0px 0.8px 1.8px rgba(0, 0, 0, 0.13)",
-  shadow04:
-    "0px 0.3px 0.9px rgba(0, 0, 0, 0.07), 0px 1.6px 3.6px rgba(0, 0, 0, 0.11)",
-  shadow08:
-    "0px 0.6px 1.8px rgba(0, 0, 0, 0.11), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13)",
-  shadow16:
-    "0px 1.2px 3.6px rgba(0, 0, 0, 0.11), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13)",
-  shadow32:
-    "0px 2.4px 7.4px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22)",
-  shadow64:
-    "0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22)",
-};
-
-export default shadows;

package/src/cds/icons/Arrows/index.ts

@@ -1,2 +0,0 @@
-export { default as arrowDropDownFillSvg } from "remixicon/icons/Arrows/arrow-drop-down-fill.svg";
-export { ReactComponent as ArrowDropDownFillIcon } from "remixicon/icons/Arrows/arrow-drop-down-fill.svg";

package/src/cds/icons/Media/index.ts

@@ -1,2 +0,0 @@
-export { default as playList2FillSvg } from "remixicon/icons/Media/play-list-2-fill.svg";
-export { ReactComponent as PlayList2FillIcon } from "remixicon/icons/Media/play-list-2-fill.svg";

package/src/cds/icons/System/index.ts

@@ -1,2 +0,0 @@
-export { default as refreshLineSvg } from "remixicon/icons/System/refresh-line.svg";
-export { ReactComponent as RefreshLineIcon } from "remixicon/icons/System/refresh-line.svg";

package/src/cds/icons/arrows.tsx

@@ -1,116 +0,0 @@
-export const ArrowDropDownFillIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
-    <path fill="currentColor" d="m12 14l-4-4h8l-4 4Z" />
-  </svg>
-);
-export const ExpandUpDownIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M18 9L12 3L6 9H18ZM18 15L12 21L6 15H18Z" fill="currentColor" />
-  </svg>
-);
-export const ArrowDownFillIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M13 12H20L12 20L4 12H11V4H13V12Z" fill="currentColor" />
-  </svg>
-);
-export const ArrowUpFillIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M13 12V20H11V12H4L12 4L20 12H13Z" fill="currentColor" />
-  </svg>
-);
-export const ArrowRightFillIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M12 13H4V11H12V4L20 12L12 20V13Z" fill="currentColor" />
-  </svg>
-);
-export const ArrowLeftFillIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M12 13V20L4 12L12 4V11H20V13H12Z" fill="currentColor" />
-  </svg>
-);
-
-export const ArrowRightSLineIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M13.1714 12.0007L8.22168 7.05093L9.63589 5.63672L15.9999 12.0007L9.63589 18.3646L8.22168 16.9504L13.1714 12.0007Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const ArrowLeftLineIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="currentColor"
-      d="M7.828 11H20v2H7.828l5.364 5.364l-1.414 1.414L4 12l7.778-7.778l1.414 1.414L7.828 11Z"
-    />
-  </svg>
-);
-
-export const ArrowRightLineIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="currentColor"
-      d="m16.172 11l-5.364-5.364l1.414-1.414L20 12l-7.778 7.778l-1.414-1.414L16.172 13H4v-2h12.172Z"
-    />
-  </svg>
-);

package/src/cds/icons/brand.tsx

@@ -1,13 +0,0 @@
-export const SymbolIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    viewBox="-3 -2 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M8.89269 0C3.98164 0 0 3.80096 0 8.49034C0 12.0308 2.26988 15.0622 5.4957 16.336C6.05262 16.5557 6.36122 17.1512 6.19366 17.7238L5.83323 18.9592C5.66206 19.5427 6.17196 20.1009 6.76987 19.9845C8.47801 19.6495 11.564 18.7587 14.0701 16.4644C16.9898 13.7908 17.7854 10.9527 17.7854 8.49154C17.7854 3.80337 13.8037 0.00120173 8.89269 0.00120173V0Z"
-      fill="currentColor"
-    />
-  </svg>
-);

package/src/cds/icons/design.tsx

@@ -1,15 +0,0 @@
-export const PencilFillIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M12.8995 6.85431L17.1421 11.0969L7.24264 20.9964H3V16.7538L12.8995 6.85431ZM14.3137 5.44009L16.435 3.31877C16.8256 2.92825 17.4587 2.92825 17.8492 3.31877L20.6777 6.1472C21.0682 6.53772 21.0682 7.17089 20.6777 7.56141L18.5563 9.68273L14.3137 5.44009Z"
-      fill="currentColor"
-    />
-  </svg>
-);

package/src/cds/icons/map.tsx

@@ -1,14 +0,0 @@
-export const EarthFillIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM16.0043 12.8777C15.6589 12.3533 15.4097 11.9746 14.4622 12.1248C12.6717 12.409 12.4732 12.7224 12.3877 13.2375L12.3636 13.3943L12.3393 13.5597C12.2416 14.2428 12.2453 14.5012 12.5589 14.8308C13.8241 16.1582 14.582 17.115 14.8116 17.6746C14.9237 17.9484 15.2119 18.7751 15.0136 19.5927C16.2372 19.1066 17.3156 18.3332 18.1653 17.3559C18.2755 16.9821 18.3551 16.5166 18.3551 15.9518V15.8472C18.3551 14.9247 18.3551 14.504 17.7031 14.1314C17.428 13.9751 17.2227 13.881 17.0582 13.8064C16.691 13.6394 16.4479 13.5297 16.1198 13.0499C16.0807 12.9928 16.0425 12.9358 16.0043 12.8777ZM12 3.83333C9.68259 3.83333 7.59062 4.79858 6.1042 6.34896C6.28116 6.47186 6.43537 6.64453 6.54129 6.88256C6.74529 7.34029 6.74529 7.8112 6.74529 8.22764C6.74488 8.55621 6.74442 8.8672 6.84992 9.09302C6.99443 9.40134 7.6164 9.53227 8.16548 9.64736C8.36166 9.68867 8.56395 9.73083 8.74797 9.78176C9.25405 9.92233 9.64554 10.3765 9.95938 10.7412C10.0896 10.8931 10.2819 11.1163 10.3783 11.1717C10.4286 11.1356 10.59 10.9608 10.6699 10.6735C10.7307 10.4547 10.7134 10.2597 10.6239 10.1543C10.0648 9.49445 10.0952 8.2232 10.268 7.75495C10.5402 7.01606 11.3905 7.07058 12.012 7.11097C12.2438 7.12589 12.4626 7.14023 12.6257 7.11976C13.2482 7.04166 13.4396 6.09538 13.575 5.91C13.8671 5.50981 14.7607 4.9071 15.3158 4.53454C14.3025 4.08382 13.1805 3.83333 12 3.83333Z"
-      fill="currentColor"
-    />
-  </svg>
-);

package/src/cds/icons/system.tsx

@@ -1,143 +0,0 @@
-export const CloseFillIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="currentColor"
-      d="m12 10.586l4.95-4.95l1.415 1.415l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.95 4.95l-1.413-1.415l4.95-4.95l-4.95-4.95L7.05 5.638l4.95 4.95Z"
-    />
-  </svg>
-);
-export const CloseCircleFillIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-export const ErrorWarningFillIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="currentColor"
-      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10Zm-1-7v2h2v-2h-2Zm0-8v6h2V7h-2Z"
-    />
-  </svg>
-);
-export const AlertFillIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="currentColor"
-      d="m12.865 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.473a1 1 0 0 1-.866-1.5L11.133 3a1 1 0 0 1 1.732 0Zm-1.866 13v2h2v-2h-2Zm0-7v5h2V9h-2Z"
-    />
-  </svg>
-);
-export const CheckboxCircleFillIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="currentColor"
-      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10Zm-.997-6l7.07-7.071l-1.413-1.414l-5.657 5.657l-2.829-2.829l-1.414 1.414L11.003 16Z"
-    />
-  </svg>
-);
-export const EyeFillIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12ZM12.0003 17C14.7617 17 17.0003 14.7614 17.0003 12C17.0003 9.23858 14.7617 7 12.0003 7C9.23884 7 7.00026 9.23858 7.00026 12C7.00026 14.7614 9.23884 17 12.0003 17ZM12.0003 15C10.3434 15 9.00026 13.6569 9.00026 12C9.00026 10.3431 10.3434 9 12.0003 9C13.6571 9 15.0003 10.3431 15.0003 12C15.0003 13.6569 13.6571 15 12.0003 15Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-export const InformationFillIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 11V17H13V11H11ZM11 7V9H13V7H11Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-export const FilterFillIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M21 4V6H20L14 15V22H10V15L4 6H3V4H21Z" fill="currentColor" />
-  </svg>
-);
-
-export const CheckboxMultipleBlankLine = (props: { className?: string }) => (
-  <svg
-    {...props}
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="currentColor"
-      d="M7 7V3a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-4v3.992C17 21.55 16.551 22 15.992 22H3.008A1.006 1.006 0 0 1 2 20.992l.003-12.985C2.003 7.451 2.452 7 3.01 7H7Zm2 0h6.993C16.549 7 17 7.449 17 8.007V15h3V4H9v3ZM4.003 9L4 20h11V9H4.003Z"
-    />
-  </svg>
-);
-export const ForbidFillIcon = (props: { className?: string }) => (
-  <svg
-    {...props}
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM8.52313 7.10891C8.25459 7.30029 7.99828 7.51644 7.75736 7.75736C7.51644 7.99828 7.30029 8.25459 7.10891 8.52313L15.4769 16.8911C15.7454 16.6997 16.0017 16.4836 16.2426 16.2426C16.4836 16.0017 16.6997 15.7454 16.8911 15.4769L8.52313 7.10891Z"
-      fill="currentColor"
-    />
-  </svg>
-);