@team-monolith/cds 1.109.2 → 1.110.0

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -1,5 +1,9 @@
 import React from "react";
 import { PolymorphicProps } from "@mui/base";
+export declare const alertDialogClasses: {
+    readonly root: "AlertDialog";
+    readonly icon: "AlertDialog-icon";
+};
 export interface AlertDialogOwnProps<RootComponentType extends React.ElementType> {
     className?: string;
     component?: RootComponentType;

package/dist/components/AlertDialog/AlertDialog.js

@@ -19,13 +19,19 @@ import { MOBILE } from "../../foundation/breakpoints";
 import { AlertDialogContext } from "./AlertDialogContext";
 import { ZINDEX } from "../../utils/zIndex";
 import { Modal } from "../..";
+export const alertDialogClasses = {
+    root: "AlertDialog",
+    icon: "AlertDialog-icon",
+};
 export const AlertDialog = React.forwardRef(function AlertDialog(props, ref) {
     const { className, component: Component = "div", open, onClose, children, icon, disableIconPadding, zIndex } = props, other = __rest(props, ["className", "component", "open", "onClose", "children", "icon", "disableIconPadding", "zIndex"]);
     const theme = useTheme();
     const paddingAreaName = disableIconPadding ? "content" : "iconPadding";
     return (_jsx(Modal, Object.assign({ open: open, onClose: onClose, ref: ref, sx: {
             zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : ZINDEX.ALERT,
-        } }, other, { children: _jsxs(Component, { className: className, css: css `
+        } }, other, { children: _jsxs(Component, { className: [alertDialogClasses.root, className]
+                .filter(Boolean)
+                .join(" "), css: css `
             width: 480px;
             max-height: calc(100% - 48px);
             background: ${theme.color.background.neutralBase};
@@ -65,7 +71,7 @@ export const AlertDialog = React.forwardRef(function AlertDialog(props, ref) {
                 "content"
                 "actions";
             `)}
-          `, children: [icon && _jsx(IconDiv, { children: icon }), _jsx(AlertDialogContext.Provider, { value: { icon }, children: children })] }) })));
+          `, children: [icon && (_jsx(IconDiv, { className: alertDialogClasses.icon, children: icon })), _jsx(AlertDialogContext.Provider, { value: { icon }, children: children })] }) })));
 });
 const IconDiv = styled.div `
   display: flex;

package/dist/components/AlertDialog/AlertDialogActions.d.ts

@@ -1,4 +1,7 @@
 import React from "react";
+export declare const alertDialogActionsClasses: {
+    readonly root: "AlertDialogActions";
+};
 export interface AlertDialogActionsProps {
     className?: string;
     component?: React.ElementType;

package/dist/components/AlertDialog/AlertDialogActions.js

@@ -13,9 +13,12 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
 import React from "react";
+export const alertDialogActionsClasses = {
+    root: "AlertDialogActions",
+};
 export const AlertDialogActions = React.forwardRef(function AlertDialogActions(props, ref) {
     const { className, component: Component = "div", children } = props, other = __rest(props, ["className", "component", "children"]);
-    return (_jsx(Component, Object.assign({}, other, { ref: ref, className: className, css: css `
+    return (_jsx(Component, Object.assign({}, other, { ref: ref, className: [alertDialogActionsClasses.root, className].filter(Boolean).join(" "), css: css `
         grid-area: actions;
 
         margin-top: 8px;

package/dist/components/AlertDialog/AlertDialogContent.d.ts

@@ -1,4 +1,7 @@
 import React from "react";
+export declare const alertDialogContentClasses: {
+    readonly root: "AlertDialogContent";
+};
 export interface AlertDialogContentProps {
     className?: string;
     component?: React.ElementType;

package/dist/components/AlertDialog/AlertDialogContent.js

@@ -13,10 +13,13 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css, useTheme } from "@emotion/react";
 import React from "react";
+export const alertDialogContentClasses = {
+    root: "AlertDialogContent",
+};
 export const AlertDialogContent = React.forwardRef(function AlertDialogContent(props, ref) {
     const { className, component: Component = "div", children } = props, other = __rest(props, ["className", "component", "children"]);
     const theme = useTheme();
-    return (_jsx(Component, Object.assign({}, other, { ref: ref, className: className, css: css `
+    return (_jsx(Component, Object.assign({}, other, { ref: ref, className: [alertDialogContentClasses.root, className].filter(Boolean).join(" "), css: css `
         grid-area: content;
 
         font-style: normal;

package/dist/components/AlertDialog/AlertDialogTitle.d.ts

@@ -1,4 +1,10 @@
 import React from "react";
+export declare const alertDialogTitleClasses: {
+    readonly root: "AlertDialogTitle";
+    readonly content: "AlertDialogTitle-content";
+    readonly icon: "AlertDialogTitle-icon";
+    readonly closeButton: "AlertDialogTitle-closeButton";
+};
 export interface AlertDialogTitleProps {
     className?: string;
     component?: React.ElementType;

package/dist/components/AlertDialog/AlertDialogTitle.js

@@ -17,11 +17,19 @@ import { SquareButton } from "../SquareButton";
 import { CloseFillIcon } from "../../icons";
 import { AlertDialogContext } from "./AlertDialogContext";
 import { MOBILE } from "../../foundation/breakpoints";
+export const alertDialogTitleClasses = {
+    root: "AlertDialogTitle",
+    content: "AlertDialogTitle-content",
+    icon: "AlertDialogTitle-icon",
+    closeButton: "AlertDialogTitle-closeButton",
+};
 export const AlertDialogTitle = React.forwardRef(function AlertDialogTitle(props, ref) {
     const { className, component: Component = "div", onClose, children } = props, other = __rest(props, ["className", "component", "onClose", "children"]);
     const { icon } = React.useContext(AlertDialogContext);
     const theme = useTheme();
-    return (_jsx(_Fragment, { children: _jsxs(Component, Object.assign({}, other, { ref: ref, className: className, css: css `
+    return (_jsx(_Fragment, { children: _jsxs(Component, Object.assign({}, other, { ref: ref, className: [alertDialogTitleClasses.root, className]
+                .filter(Boolean)
+                .join(" "), css: css `
           grid-area: title;
           font-family: ${theme.fontFamily.ui};
           font-style: normal;
@@ -35,14 +43,14 @@ export const AlertDialogTitle = React.forwardRef(function AlertDialogTitle(props
 
           display: flex;
           justify-content: space-between;
-        `, children: [_jsxs("div", { css: css `
+        `, children: [_jsxs("div", { className: alertDialogTitleClasses.content, css: css `
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: flex-start;
             gap: 16px;
             text-align: left;
-          `, children: [icon && (_jsx("div", { css: css `
+          `, children: [icon && (_jsx("div", { className: alertDialogTitleClasses.icon, css: css `
                 display: none;
                 ${MOBILE(css `
                   display: flex;
@@ -55,5 +63,5 @@ export const AlertDialogTitle = React.forwardRef(function AlertDialogTitle(props
                     height: 32px;
                   }
                 `)}
-              `, children: icon })), children] }), onClose && (_jsx(SquareButton, { color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose, "aria-label": "\uB2EB\uAE30" }))] })) }));
+              `, children: icon })), children] }), onClose && (_jsx(SquareButton, { className: alertDialogTitleClasses.closeButton, color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose, "aria-label": "\uB2EB\uAE30" }))] })) }));
 });

package/dist/components/AnimatedButton.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 import { ButtonColor, ButtonProps } from "..";
+export declare const animatedButtonClasses: {
+    readonly root: "AnimatedButton";
+};
 type BackgroundButtonColor = Exclude<ButtonColor, "textNeutral" | "textDanger" | "textPrimary">;
 /**
  * 반짝이는 애니메이션 효과가 적용된 Button 컴포넌트

package/dist/components/AnimatedButton.js

@@ -1,18 +1,10 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css, keyframes, useTheme } from "@emotion/react";
 import { Button } from "..";
+export const animatedButtonClasses = {
+    root: "AnimatedButton",
+};
 const DARK_BLACK_COLOR = "#202020";
 const getGradient = (baseColor, activeColor) => css `
   background-image: repeating-linear-gradient(
@@ -56,9 +48,11 @@ const backgroundSlideAnimation = keyframes `
  * 반짝이는 애니메이션 효과가 적용된 Button 컴포넌트
  */
 export function AnimatedButton(props) {
-    const { color, loading, disabled } = props, _other = __rest(props, ["color", "loading", "disabled"]);
+    const { color, loading, disabled, className } = props;
     const theme = useTheme();
-    return (_jsx(Button, Object.assign({}, props, { css: disabled || loading
+    return (_jsx(Button, Object.assign({}, props, { className: [animatedButtonClasses.root, className]
+            .filter(Boolean)
+            .join(" "), css: disabled || loading
             ? []
             : [
                 css `

package/dist/components/Banner.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { ButtonProps } from "./Button";
 export type BannerColor = "red" | "blue" | "green" | "yellow" | "white";
 export declare const bannerClasses: {
+    readonly root: "Banner";
     readonly icon: "Banner-icon";
     readonly textContainer: "Banner-textContainer";
     readonly headline: "Banner-textContainer-headline";

package/dist/components/Banner.js

@@ -18,6 +18,7 @@ import { CloseFillIcon } from "../icons";
 import { SquareButton } from "./SquareButton";
 import { Button } from "./Button";
 export const bannerClasses = {
+    root: "Banner",
     icon: "Banner-icon",
     textContainer: "Banner-textContainer",
     headline: "Banner-textContainer-headline",
@@ -58,7 +59,7 @@ const COLOR_PALETTE = (theme, color) => ({
 export const Banner = React.forwardRef(function Banner(props, ref) {
     const { className, component: Component = "div", headline, content, icon, color, buttonLabel, onButtonClick, buttonProps, close, onClose, fullWidth } = props, other = __rest(props, ["className", "component", "headline", "content", "icon", "color", "buttonLabel", "onButtonClick", "buttonProps", "close", "onClose", "fullWidth"]);
     const theme = useTheme();
-    return (_jsxs(Component, Object.assign({}, other, { ref: ref, className: className, css: [
+    return (_jsxs(Component, Object.assign({}, other, { ref: ref, className: [bannerClasses.root, className].filter(Boolean).join(" "), css: [
             css `
           display: flex;
           align-items: center;

package/dist/components/Book/Book.d.ts

@@ -1,10 +1,19 @@
 import React from "react";
 import { TagProps } from "../Tag";
 export declare const bookClasses: {
+    readonly root: "Book";
     readonly cover: "Book-cover";
+    readonly coverTexts: "Book-coverTexts";
+    readonly coverTitle: "Book-coverTitle";
+    readonly subtitle: "Book-subtitle";
+    readonly progress: "Book-progress";
     readonly progressText: "Book-progressText";
     readonly progressBase: "Book-progressBase";
     readonly progressBar: "Book-progressBar";
+    readonly buttons: "Book-buttons";
+    readonly shelf: "Book-shelf";
+    readonly hide: "Book-hide";
+    readonly coverIcon: "Book-coverIcon";
 };
 export interface ProgressInfo {
     /** 프로그레스 바 상단에 표시되는 내용. */

package/dist/components/Book/Book.js

@@ -8,10 +8,19 @@ import { EyeOffFillIcon } from "../../icons";
 import { motion } from "framer-motion";
 import { Tag } from "../Tag";
 export const bookClasses = {
+    root: "Book",
     cover: "Book-cover",
+    coverTexts: "Book-coverTexts",
+    coverTitle: "Book-coverTitle",
+    subtitle: "Book-subtitle",
+    progress: "Book-progress",
     progressText: "Book-progressText",
     progressBase: "Book-progressBase",
     progressBar: "Book-progressBar",
+    buttons: "Book-buttons",
+    shelf: "Book-shelf",
+    hide: "Book-hide",
+    coverIcon: "Book-coverIcon",
 };
 // 이 ZINDEX는 Book 컴포넌트 내의 Stacking Context 에서 활용되므로
 // 다른 글로벌 ZINDEX와 충돌을 고려할 필요가 없습니다.
@@ -83,7 +92,7 @@ export const Book = forwardRef(function Book(props, ref) {
     const { className, title, subtitle, subtitleBold, isHidden = false, buttons, open: controlledOpen, onHoverStart, onHoverEnd, onCoverClick, icon, progressInfo, tagsProps, } = props;
     const theme = useTheme();
     const [open, setOpen] = useState(false);
-    return (_jsxs(Container, { className: className, initial: "closed", animate: (controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : open) ? "open" : "closed", ref: ref, onHoverStart: () => {
+    return (_jsxs(Container, { className: [bookClasses.root, className].filter(Boolean).join(" "), initial: "closed", animate: (controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : open) ? "open" : "closed", ref: ref, onHoverStart: () => {
             setOpen(true);
             onHoverStart === null || onHoverStart === void 0 ? void 0 : onHoverStart();
         }, onHoverEnd: () => {
@@ -95,20 +104,20 @@ export const Book = forwardRef(function Book(props, ref) {
           `, variants: coverMotion, onClick: () => {
                     setOpen(!open);
                     onCoverClick === null || onCoverClick === void 0 ? void 0 : onCoverClick();
-                }, children: [icon && _jsx(CoverIcon, { children: icon }), isHidden && (_jsxs(_Fragment, { children: [_jsx(Hide, {}), _jsx(EyeOffFillIcon, { color: theme.color.foreground.neutralAlt, css: css `
+                }, children: [icon && _jsx(CoverIcon, { className: bookClasses.coverIcon, children: icon }), isHidden && (_jsxs(_Fragment, { children: [_jsx(Hide, { className: bookClasses.hide }), _jsx(EyeOffFillIcon, { color: theme.color.foreground.neutralAlt, css: css `
                 position: absolute;
                 z-index: ${ZINDEX_HIDE};
                 left: 50%;
                 top: 50%;
                 transform: translate(-50%, -50%);
                 opacity: 0.8;
-              ` })] })), _jsxs(CoverTexts, { variants: buttons ? textMotion : undefined, children: [tagsProps && tagsProps.length > 0 && (_jsx("div", { css: css `
+              ` })] })), _jsxs(CoverTexts, { className: bookClasses.coverTexts, variants: buttons ? textMotion : undefined, children: [tagsProps && tagsProps.length > 0 && (_jsx("div", { css: css `
                 display: flex;
                 gap: 4px;
                 flex-wrap: wrap;
-              `, children: tagsProps.map((tagProps, index) => (_jsx(Tag, Object.assign({}, tagProps), index))) })), _jsx(Subtitle, { children: subtitle }), _jsx(Subtitle, { css: css `
+              `, children: tagsProps.map((tagProps, index) => (_jsx(Tag, Object.assign({}, tagProps), index))) })), _jsx(Subtitle, { className: bookClasses.subtitle, children: subtitle }), _jsx(Subtitle, { className: bookClasses.subtitle, css: css `
               font-weight: 800;
-            `, children: subtitleBold }), _jsx(CoverTitle, { showProgress: Boolean(progressInfo), children: title }), progressInfo && (_jsxs(Progress, { children: [_jsx("div", { className: bookClasses.progressText, children: progressInfo.title }), _jsxs("div", { css: css `
+            `, children: subtitleBold }), _jsx(CoverTitle, { className: bookClasses.coverTitle, showProgress: Boolean(progressInfo), children: title }), progressInfo && (_jsxs(Progress, { className: bookClasses.progress, children: [_jsx("div", { className: bookClasses.progressText, children: progressInfo.title }), _jsxs("div", { css: css `
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
@@ -125,10 +134,10 @@ export const Book = forwardRef(function Book(props, ref) {
                     display: flex;
                     justify-content: center;
                     align-items: center;
-                  `, children: [Math.round(progressInfo.value * 100), "%"] })] })] }))] }), _jsx(BookGradient, {}), _jsx(Buttons, { variants: buttonsMotion, onClick: (e) => {
+                  `, children: [Math.round(progressInfo.value * 100), "%"] })] })] }))] }), _jsx(BookGradient, {}), _jsx(Buttons, { className: bookClasses.buttons, variants: buttonsMotion, onClick: (e) => {
                             // Button 클릭 시에도 CoverClick 이벤트가 발생하지 않도록 막습니다.
                             e.stopPropagation();
-                        }, children: buttons })] }), _jsx(Shelf, {})] }));
+                        }, children: buttons })] }), _jsx(Shelf, { className: bookClasses.shelf })] }));
 });
 const Container = styled(motion.div) `
   position: relative;

package/dist/components/Button.d.ts

@@ -2,6 +2,10 @@ import React from "react";
 import { PolymorphicProps } from "@mui/base";
 export type ButtonColor = "primary" | "grey" | "danger" | "textNeutral" | "textDanger" | "textPrimary" | "black" | "white";
 export type ButtonSize = "large" | "medium" | "small" | "xsmall";
+export declare const buttonClasses: {
+    readonly root: "Button";
+    readonly label: "Button-label";
+};
 export interface ButtonOwnProps<RootComponentType extends React.ElementType> {
     className?: string;
     component?: RootComponentType;

package/dist/components/Button.js

@@ -16,6 +16,10 @@ import styled from "@emotion/styled";
 import React from "react";
 import { HOVER } from "../utils/hover";
 import { Spinner } from "..";
+export const buttonClasses = {
+    root: "Button",
+    label: "Button-label",
+};
 const COLOR_TO_BUTTON_STYLE = (theme, color, disabled) => ({
     primary: css `
       ${disabled
@@ -212,7 +216,7 @@ const SIZE_TO_LABEL_STYLE = {
 export const Button = React.forwardRef(function Button(props, ref) {
     const { className, component: Component = "button", disabled, color, size, startIcon, endIcon, label, fullWidth, bold = false, loading = false } = props, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "fullWidth", "bold", "loading"]);
     const theme = useTheme();
-    return (_jsxs(Component, Object.assign({ type: Component === "button" || Component === "input" ? "button" : undefined }, other, { className: className, ref: ref, css: [
+    return (_jsxs(Component, Object.assign({ type: Component === "button" || Component === "input" ? "button" : undefined }, other, { className: [buttonClasses.root, className].filter(Boolean).join(" "), ref: ref, css: [
             css `
           display: inline-flex;
           align-items: center;
@@ -243,7 +247,7 @@ export const Button = React.forwardRef(function Button(props, ref) {
         `,
             COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled || loading)),
             SIZE_TO_BUTTON_STYLE[size],
-        ], disabled: disabled || loading, children: [loading ? _jsx(Spinner, {}) : startIcon, label && (_jsx(Label, { size: size, bold: bold, children: label })), endIcon] })));
+        ], disabled: disabled || loading, children: [loading ? _jsx(Spinner, {}) : startIcon, label && (_jsx(Label, { className: buttonClasses.label, size: size, bold: bold, children: label })), endIcon] })));
 });
 const Label = styled.span `
   font-weight: ${({ bold }) => (bold ? 700 : 400)};

package/dist/components/CheckboxInput.d.ts

@@ -1,6 +1,11 @@
 import * as React from "react";
 import { InputHTMLAttributes } from "react";
 export type CheckboxInputType = "default" | "checked" | "partial";
+export declare const checkboxInputClasses: {
+    readonly root: "CheckboxInput";
+    readonly checkbox: "CheckboxInput-checkbox";
+    readonly label: "CheckboxInput-label";
+};
 export interface CheckboxInputProps {
     className?: string;
     /** 체크박스의 체크 여부(Controlled) */

package/dist/components/CheckboxInput.js

@@ -15,6 +15,11 @@ import { css, useTheme } from "@emotion/react";
 import * as React from "react";
 import styled from "@emotion/styled";
 import { ZINDEX } from "../utils/zIndex";
+export const checkboxInputClasses = {
+    root: "CheckboxInput",
+    checkbox: "CheckboxInput-checkbox",
+    label: "CheckboxInput-label",
+};
 const CHECKBOX_ICON_STYLE = (theme, type, disabled) => ({
     default: css `
       rect {
@@ -112,7 +117,9 @@ export const CheckboxInput = React.forwardRef(function CheckboxInput(props, ref)
         onChange,
         inputProps,
     };
-    return (_jsxs(Label, Object.assign({ className: className, ref: ref, disabled: disabled !== null && disabled !== void 0 ? disabled : false }, other, { children: [_jsx(Checkbox, Object.assign({}, checkboxProps)), _jsx("span", { css: css `
+    return (_jsxs(Label, Object.assign({ className: [checkboxInputClasses.root, className]
+            .filter(Boolean)
+            .join(" "), ref: ref, disabled: disabled !== null && disabled !== void 0 ? disabled : false }, other, { children: [_jsx(Checkbox, Object.assign({ className: checkboxInputClasses.checkbox }, checkboxProps)), _jsx("span", { className: checkboxInputClasses.label, css: css `
           margin-left: 8px;
         `, children: label })] })));
 });

package/dist/components/FileTypeAlertDialog.d.ts

@@ -1,5 +1,12 @@
 import React from "react";
+export declare const fileTypeAlertDialogClasses: {
+    readonly root: "FileTypeAlertDialog";
+    readonly title: "FileTypeAlertDialog-title";
+    readonly content: "FileTypeAlertDialog-content";
+    readonly actions: "FileTypeAlertDialog-actions";
+};
 interface FileTypeAlertDialogProps {
+    className?: string;
     open: boolean;
     onClose: () => void;
     /** 다이얼로그에 표시될 콘텐츠 */

package/dist/components/FileTypeAlertDialog.js

@@ -4,14 +4,20 @@ import { css, useTheme } from "@emotion/react";
 import { AlertDialog, AlertDialogActions, AlertDialogContent, AlertDialogTitle, } from "./AlertDialog";
 import { AlertFillIcon } from "../icons";
 import { Button } from "./Button";
+export const fileTypeAlertDialogClasses = {
+    root: "FileTypeAlertDialog",
+    title: "FileTypeAlertDialog-title",
+    content: "FileTypeAlertDialog-content",
+    actions: "FileTypeAlertDialog-actions",
+};
 export function FileTypeAlertDialog(props) {
-    const { open, onClose, content, openFileBrowser } = props;
+    const { className, open, onClose, content, openFileBrowser } = props;
     const theme = useTheme();
-    return (_jsxs(AlertDialog, { open: open, onClose: onClose, icon: _jsx(AlertFillIcon, { css: css `
+    return (_jsxs(AlertDialog, { className: [fileTypeAlertDialogClasses.root, className].filter(Boolean).join(" "), open: open, onClose: onClose, icon: _jsx(AlertFillIcon, { css: css `
             color: ${theme.color.background.danger};
-          ` }), children: [_jsx(AlertDialogTitle, { css: css `
+          ` }), children: [_jsx(AlertDialogTitle, { className: fileTypeAlertDialogClasses.title, css: css `
           font-weight: 700;
-        `, onClose: onClose, children: "\uD30C\uC77C \uD615\uC2DD\uC744 \uD655\uC778\uD574\uC8FC\uC138\uC694." }), _jsx(AlertDialogContent, { children: content }), _jsxs(AlertDialogActions, { children: [_jsx(Button, { color: "grey", label: "\uB2EB\uAE30", size: "medium", onClick: onClose, bold: true }), _jsx(Button, { color: "primary", label: "\uB2E4\uC2DC \uC5C5\uB85C\uB4DC", size: "medium", onClick: () => {
+        `, onClose: onClose, children: "\uD30C\uC77C \uD615\uC2DD\uC744 \uD655\uC778\uD574\uC8FC\uC138\uC694." }), _jsx(AlertDialogContent, { className: fileTypeAlertDialogClasses.content, children: content }), _jsxs(AlertDialogActions, { className: fileTypeAlertDialogClasses.actions, children: [_jsx(Button, { color: "grey", label: "\uB2EB\uAE30", size: "medium", onClick: onClose, bold: true }), _jsx(Button, { color: "primary", label: "\uB2E4\uC2DC \uC5C5\uB85C\uB4DC", size: "medium", onClick: () => {
                             onClose();
                             openFileBrowser();
                         }, bold: true })] })] }));

package/dist/components/Input.d.ts

@@ -2,6 +2,11 @@ import React from "react";
 import { InputBaseColor, InputBaseProps, InputBaseSize } from "./InputBase";
 export type InputColor = InputBaseColor;
 export type InputSize = InputBaseSize;
+export declare const inputClasses: {
+    readonly root: "Input";
+    readonly label: "Input-label";
+    readonly hint: "Input-hint";
+};
 export type InputProps = InputBaseProps & {
     /** Input 컴포넌트 상단에 노출될 문자열 */
     label?: string;

package/dist/components/Input.js

@@ -15,6 +15,11 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import React from "react";
 import { InputBase, } from "./InputBase";
+export const inputClasses = {
+    root: "Input",
+    label: "Input-label",
+    hint: "Input-hint",
+};
 const COLOR_TO_HINT_STYLES = (theme, color, disabled) => disabled
     ? css `
         color: ${theme.color.foreground.neutralBaseDisabled};
@@ -72,7 +77,7 @@ export const Input = React.forwardRef(function Input(props, ref) {
     /* eslint-enable @typescript-eslint/no-unused-vars */
     other = __rest(props, ["label", "hintText", "hintIcon", "className", "color", "size", "placeholder", "disabled", "startIcon", "startLabel", "endLabel", "endIcon", "inputProps", "inputRef", "fullWidth", "onChange", "onClear", "defaultValue", "value"]);
     const { className: _className } = props, inputBaseProps = __rest(props, ["className"]);
-    return (_jsxs(InputWrapper, Object.assign({ className: props.className, size: props.size, fullWidth: props.fullWidth, ref: ref }, other, { children: [label ? (_jsxs(Label, { disabled: props.disabled, children: [label, " ", _jsx(InputBase, Object.assign({}, inputBaseProps))] })) : (_jsx(InputBase, Object.assign({}, inputBaseProps))), hintText && (_jsxs(Hint, { color: props.color, disabled: props.disabled, children: [hintIcon, hintText] }))] })));
+    return (_jsxs(InputWrapper, Object.assign({ className: [inputClasses.root, props.className].filter(Boolean).join(" "), size: props.size, fullWidth: props.fullWidth, ref: ref }, other, { children: [label ? (_jsxs(Label, { className: inputClasses.label, disabled: props.disabled, children: [label, " ", _jsx(InputBase, Object.assign({}, inputBaseProps))] })) : (_jsx(InputBase, Object.assign({}, inputBaseProps))), hintText && (_jsxs(Hint, { className: inputClasses.hint, color: props.color, disabled: props.disabled, children: [hintIcon, hintText] }))] })));
 });
 const InputWrapper = styled("span", {
     shouldForwardProp: (prop) => prop !== "fullWidth",

package/dist/components/InputBase.d.ts

@@ -1,6 +1,12 @@
 import { ForwardedRef, InputHTMLAttributes } from "react";
 export type InputBaseColor = "default" | "base" | "activePrimary" | "activeDanger" | "activeSuccess";
 export type InputBaseSize = "large" | "medium" | "small";
+export declare const inputBaseClasses: {
+    readonly root: "InputBase";
+    readonly startLabel: "InputBase-startLabel";
+    readonly endLabel: "InputBase-endLabel";
+    readonly clearButton: "InputBase-clearButton";
+};
 export type InputBaseProps = InputBaseCommonProps & (InputBaseInputProps | InputBaseTextAreaProps);
 interface InputBaseCommonProps {
     className?: string;

package/dist/components/InputBase.js

@@ -5,6 +5,12 @@ import styled from "@emotion/styled";
 import { CloseCircleFillIcon } from "../icons";
 import { RESET_BUTTON } from "../utils/reset";
 import { TextareaAutosize } from "@mui/material";
+export const inputBaseClasses = {
+    root: "InputBase",
+    startLabel: "InputBase-startLabel",
+    endLabel: "InputBase-endLabel",
+    clearButton: "InputBase-clearButton",
+};
 // border를 none으로 설정하지 않고 transparent로 설정한 이유는
 // border의 존재에 따라 크기가 달라지는 것을 방지하기 위함입니다.
 // 이 컴포넌트는 multiline을 고려하여 height를 명시적으로 지정하지 않았습니다.
@@ -97,7 +103,7 @@ function InputComponent(props) {
 }
 export function InputBase(props) {
     const { className, color, size, disabled = false, startIcon, startLabel, endLabel, endIcon, fullWidth = false, onClear, } = props;
-    return (_jsxs(InputContainer, { className: className, disabled: disabled, color: color, inputSize: size, fullWidth: fullWidth, children: [startIcon, startLabel && _jsx("span", { children: startLabel }), _jsx(InputComponent, Object.assign({}, props)), endLabel && _jsx("span", { children: endLabel }), endIcon, onClear && (_jsx(ClearButton, { type: "button", onClick: onClear, disabled: disabled, tabIndex: -1, children: _jsx(CloseCircleFillIcon, {}) }))] }));
+    return (_jsxs(InputContainer, { className: [inputBaseClasses.root, className].filter(Boolean).join(" "), disabled: disabled, color: color, inputSize: size, fullWidth: fullWidth, children: [startIcon, startLabel && (_jsx("span", { className: inputBaseClasses.startLabel, children: startLabel })), _jsx(InputComponent, Object.assign({}, props)), endLabel && (_jsx("span", { className: inputBaseClasses.endLabel, children: endLabel })), endIcon, onClear && (_jsx(ClearButton, { className: inputBaseClasses.clearButton, type: "button", onClick: onClear, disabled: disabled, tabIndex: -1, children: _jsx(CloseCircleFillIcon, {}) }))] }));
 }
 const InputContainer = styled("div", {
     shouldForwardProp: (prop) => !["inputSize", "fullWidth"].includes(prop),

package/dist/components/OverflowTooltip.d.ts

@@ -1,6 +1,10 @@
 /** @jsxImportSource @emotion/react */
 import { SerializedStyles } from "@emotion/react";
 import { TooltipProps } from "./Tooltip";
+export declare const overflowTooltipClasses: {
+    readonly root: "OverflowTooltip";
+    readonly overflow: "OverflowTooltip-overflow";
+};
 interface OverflowTooltipProps extends Omit<TooltipProps, "open" | "onOpen" | "onClose" | "children"> {
     className?: string;
     childrenCss?: SerializedStyles;

package/dist/components/OverflowTooltip.js

@@ -1,12 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import styled from "@emotion/styled";
 import { useRef, useState } from "react";
 import { Tooltip } from "./Tooltip";
+export const overflowTooltipClasses = {
+    root: "OverflowTooltip",
+    overflow: "OverflowTooltip-overflow",
+};
 /**
  * 인자로 주어진 텍스트를 그립니다.
  * 공간이 부족하면 ...으로 표시하고 툴팁으로 전체 내용을 노출합니다.
  */
 export function OverflowTooltip(props) {
+    const { className } = props, otherProps = __rest(props, ["className"]);
     const tooltipRef = useRef(null);
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
     const getIsOverflow = () => {
@@ -23,7 +39,7 @@ export function OverflowTooltip(props) {
     const handleClose = () => {
         setIsTooltipOpen(false);
     };
-    return (_jsx(Tooltip, Object.assign({ open: isTooltipOpen, onOpen: handleOpen, onClose: handleClose }, props, { children: _jsx(OverflowDiv, { css: props.childrenCss, ref: tooltipRef, onMouseOver: handleOpen, children: props.text }) })));
+    return (_jsx(Tooltip, Object.assign({ className: [overflowTooltipClasses.root, className].filter(Boolean).join(" "), open: isTooltipOpen, onOpen: handleOpen, onClose: handleClose }, otherProps, { children: _jsx(OverflowDiv, { className: overflowTooltipClasses.overflow, css: props.childrenCss, ref: tooltipRef, onMouseOver: handleOpen, children: props.text }) })));
 }
 const OverflowDiv = styled.div `
   overflow: hidden;

package/dist/components/Pagination.d.ts

@@ -1,4 +1,7 @@
 import * as React from "react";
+export declare const paginationClasses: {
+    readonly root: "Pagination";
+};
 export interface PaginationProps {
     className?: string;
     /** 시작과 끝에 오는 페이지의 수 */

package/dist/components/Pagination.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
@@ -5,11 +16,15 @@ import * as React from "react";
 import styled from "@emotion/styled";
 import { Pagination as MuiPagination } from "@mui/material";
 import { HOVER } from "../utils/hover";
+export const paginationClasses = {
+    root: "Pagination",
+};
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=35-798&t=6OdVgm0hiYaq5PFw-0)
  */
 export const Pagination = React.forwardRef(function Pagination(props, ref) {
-    return (_jsx(StyledPagination, Object.assign({ siblingCount: 2, shape: "rounded" }, props, { ref: ref, getItemAriaLabel: (type, page, selected) => {
+    const { className } = props, other = __rest(props, ["className"]);
+    return (_jsx(StyledPagination, Object.assign({ siblingCount: 2, shape: "rounded" }, other, { className: [paginationClasses.root, className].filter(Boolean).join(" "), ref: ref, getItemAriaLabel: (type, page, selected) => {
             if (type === "previous")
                 return "이전 페이지로 이동";
             if (type === "next")

package/dist/components/PinInput.d.ts

@@ -1,4 +1,11 @@
 import React from "react";
+export declare const pinInputClasses: {
+    readonly root: "PinInput";
+    readonly label: "PinInput-label";
+    readonly container: "PinInput-container";
+    readonly input: "PinInput-input";
+    readonly hint: "PinInput-hint";
+};
 export type PinInputColor = "default" | "activePrimary" | "activeDanger" | "activeSuccess";
 export type PinInputSize = "large" | "medium" | "small";
 export interface PinInputProps {

package/dist/components/PinInput.js

@@ -15,6 +15,13 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import React, { useRef, useState } from "react";
 import { InputBase } from "./InputBase";
+export const pinInputClasses = {
+    root: "PinInput",
+    label: "PinInput-label",
+    container: "PinInput-container",
+    input: "PinInput-input",
+    hint: "PinInput-hint",
+};
 const SIZE_TO_STYLES = (size) => ({
     small: css `
       width: 36px;
@@ -83,13 +90,13 @@ function updateFocus(value, i, setFocus) {
  */
 export const PinInput = React.forwardRef(function PinInput(props, ref) {
     const { className, autoFocus: _autoFocus, size, placeholder: _placeholder, label, hintText, hintIcon, disabled = false, error, positive, onChange: _onChange, values: _values } = props, other = __rest(props, ["className", "autoFocus", "size", "placeholder", "label", "hintText", "hintIcon", "disabled", "error", "positive", "onChange", "values"]);
-    return (_jsxs(PinInputWrapper, Object.assign({ className: className, size: size, ref: ref }, other, { children: [label ? (_jsxs(Label, { disabled: disabled, children: [label, " ", _jsx(PinInputComponent, Object.assign({}, props))] })) : (_jsx(PinInputComponent, Object.assign({}, props))), hintText && (_jsxs(Hint, { color: error ? "activeDanger" : positive ? "activeSuccess" : "default", disabled: disabled, children: [hintIcon, hintText] }))] })));
+    return (_jsxs(PinInputWrapper, Object.assign({ className: [pinInputClasses.root, className].filter(Boolean).join(" "), size: size, ref: ref }, other, { children: [label ? (_jsxs(Label, { className: pinInputClasses.label, disabled: disabled, children: [label, " ", _jsx(PinInputComponent, Object.assign({}, props))] })) : (_jsx(PinInputComponent, Object.assign({}, props))), hintText && (_jsxs(Hint, { className: pinInputClasses.hint, color: error ? "activeDanger" : positive ? "activeSuccess" : "default", disabled: disabled, children: [hintIcon, hintText] }))] })));
 });
 function PinInputComponent(props) {
     const { autoFocus, size, placeholder, disabled = false, error, positive, onChange, values, } = props;
     const [focus, setFocus] = useState([]);
     const refs = useRef([]);
-    return (_jsx(PinInputContainer, { children: values.map((value, i) => (_jsx(SqaureInput, { color: error
+    return (_jsx(PinInputContainer, { className: pinInputClasses.container, children: values.map((value, i) => (_jsx(SqaureInput, { className: pinInputClasses.input, color: error
                 ? "activeDanger"
                 : positive
                     ? "activeSuccess"

package/dist/components/Popover.d.ts

@@ -1,4 +1,11 @@
 import React from "react";
+export declare const popoverClasses: {
+    readonly root: "Popover";
+    readonly icon: "Popover-icon";
+    readonly contentArea: "Popover-contentArea";
+    readonly headline: "Popover-headline";
+    readonly content: "Popover-content";
+};
 export interface PopoverProps {
     className?: string;
     /** 제목 */

package/dist/components/Popover.js

@@ -3,9 +3,16 @@ import styled from "@emotion/styled";
 import React from "react";
 import { shadows } from "../foundation/shadows";
 import { css } from "@emotion/react";
+export const popoverClasses = {
+    root: "Popover",
+    icon: "Popover-icon",
+    contentArea: "Popover-contentArea",
+    headline: "Popover-headline",
+    content: "Popover-content",
+};
 export const Popover = React.forwardRef(function Popover(props, ref) {
     const { className, headline, content, icon, button } = props;
-    return (_jsxs(Container, { ref: ref, className: className, children: [icon && _jsx(Icon, { children: icon }), _jsxs(ContentArea, { children: [headline && _jsx(Headline, { children: headline }), content && _jsx(Content, { children: content })] }), button] }));
+    return (_jsxs(Container, { ref: ref, className: [popoverClasses.root, className].filter(Boolean).join(" "), children: [icon && _jsx(Icon, { className: popoverClasses.icon, children: icon }), _jsxs(ContentArea, { className: popoverClasses.contentArea, children: [headline && (_jsx(Headline, { className: popoverClasses.headline, children: headline })), content && (_jsx(Content, { className: popoverClasses.content, children: content }))] }), button] }));
 });
 const Container = styled.div(({ theme }) => css `
     display: inline-flex;

package/dist/components/RadioInput.d.ts

@@ -1,6 +1,11 @@
 import * as React from "react";
 import { InputHTMLAttributes } from "react";
 export type RadioInputType = "default" | "selected";
+export declare const radioInputClasses: {
+    readonly root: "RadioInput";
+    readonly radio: "RadioInput-radio";
+    readonly label: "RadioInput-label";
+};
 export interface RadioInputProps {
     className?: string;
     /** 라디오 버튼의 선택 여부(Controlled) */

package/dist/components/RadioInput.js

@@ -15,6 +15,11 @@ import { css, useTheme } from "@emotion/react";
 import * as React from "react";
 import styled from "@emotion/styled";
 import { ZINDEX } from "../utils/zIndex";
+export const radioInputClasses = {
+    root: "RadioInput",
+    radio: "RadioInput-radio",
+    label: "RadioInput-label",
+};
 const TYPE_TO_ICON_STYLE = (theme, type, disabled) => ({
     default: css `
       path {
@@ -81,7 +86,7 @@ export const RadioInput = React.forwardRef(function RadioInput(props, ref) {
         onChange,
         inputProps,
     };
-    return (_jsxs(Label, Object.assign({ className: className, ref: ref, disabled: disabled !== null && disabled !== void 0 ? disabled : false }, other, { children: [_jsx(RadioButton, Object.assign({}, radioProps)), _jsx("span", { css: css `
+    return (_jsxs(Label, Object.assign({ className: [radioInputClasses.root, className].filter(Boolean).join(" "), ref: ref, disabled: disabled !== null && disabled !== void 0 ? disabled : false }, other, { children: [_jsx(RadioButton, Object.assign({ className: radioInputClasses.radio }, radioProps)), _jsx("span", { className: radioInputClasses.label, css: css `
           margin-left: 8px;
         `, children: label })] })));
 });

package/dist/components/SquareButton.d.ts

@@ -2,6 +2,9 @@ import React from "react";
 import { PolymorphicProps } from "@mui/base";
 export type SquareButtonColor = "danger" | "primary" | "grey" | "icon" | "black" | "white";
 export type SquareButtonSize = "large" | "medium" | "small" | "xsmall";
+export declare const squareButtonClasses: {
+    readonly root: "SquareButton";
+};
 export interface SquareButtonOwnProps<RootComponentType extends React.ElementType> {
     className?: string;
     component?: RootComponentType;

package/dist/components/SquareButton.js

@@ -15,6 +15,9 @@ import { css, useTheme } from "@emotion/react";
 import React from "react";
 import { HOVER } from "../utils/hover";
 import { Spinner } from "./Spinner";
+export const squareButtonClasses = {
+    root: "SquareButton",
+};
 const COLOR_TO_BUTTON_STYLE = (theme, color, disabled) => ({
     danger: disabled
         ? css `
@@ -147,7 +150,9 @@ const SIZE_TO_BUTTON_STYLE = {
 export const SquareButton = React.forwardRef(function SquareButton(props, ref) {
     const { className, component: Component = "button", disabled, color, size, icon, onClick, loading = false } = props, other = __rest(props, ["className", "component", "disabled", "color", "size", "icon", "onClick", "loading"]);
     const theme = useTheme();
-    return (_jsx(Component, Object.assign({ type: Component === "button" || Component === "input" ? "button" : undefined }, other, { ref: ref, className: className, css: [
+    return (_jsx(Component, Object.assign({ type: Component === "button" || Component === "input" ? "button" : undefined }, other, { ref: ref, className: [squareButtonClasses.root, className]
+            .filter(Boolean)
+            .join(" "), css: [
             css `
             border: none;
 

package/dist/components/Switch.d.ts

@@ -1,6 +1,9 @@
 import React from "react";
 import { SwitchProps as MuiSwitchProps } from "@mui/material";
 export type SwitchSize = "small" | "large";
+export declare const switchClasses: {
+    readonly root: "Switch";
+};
 export interface SwitchProps extends Omit<MuiSwitchProps, "size"> {
     className?: string;
     /** 스위치 체크 상태 여부 */

package/dist/components/Switch.js

@@ -15,12 +15,15 @@ import styled from "@emotion/styled";
 import React from "react";
 import { Switch as MuiSwitch, } from "@mui/material";
 import { css } from "@emotion/react";
+export const switchClasses = {
+    root: "Switch",
+};
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-1577&t=9sDLb4XIOdmF2VMc-0)
  */
 export const Switch = React.forwardRef(function Switch(props, ref) {
     const { className, checked, disabled = false, size, onChange } = props, other = __rest(props, ["className", "checked", "disabled", "size", "onChange"]);
-    return (_jsx(StyledSwitch, Object.assign({}, other, { ref: ref, className: className, checked: checked, disabled: disabled, onChange: onChange, switchSize: size })));
+    return (_jsx(StyledSwitch, Object.assign({}, other, { ref: ref, className: [switchClasses.root, className].filter(Boolean).join(" "), checked: checked, disabled: disabled, onChange: onChange, switchSize: size })));
 });
 const SIZE_TO_SWTICH_SIZE = {
     large: {

package/dist/components/SwitchButton.d.ts

@@ -2,6 +2,10 @@ import { PolymorphicProps } from "@mui/base";
 import React from "react";
 export type SwitchButtonColor = "grey" | "white" | "none";
 export type SwitchButtonSize = "medium" | "xsmall";
+export declare const switchButtonClasses: {
+    readonly root: "SwitchButton";
+    readonly content: "SwitchButton-content";
+};
 export interface SwitchButtonOwnProps<RootComponentType extends React.ElementType> {
     className?: string;
     component?: RootComponentType;

package/dist/components/SwitchButton.js

@@ -15,6 +15,10 @@ import { css, useTheme } from "@emotion/react";
 import { HOVER } from "../utils/hover";
 import React from "react";
 import styled from "@emotion/styled";
+export const switchButtonClasses = {
+    root: "SwitchButton",
+    content: "SwitchButton-content",
+};
 const COLOR_TO_SWITCH_BUTTON_STYLE = (theme, color, isOn) => ({
     grey: css `
       ${isOn
@@ -129,7 +133,9 @@ const SIZE_TO_SWITCH_BUTTON_STYLE = (size) => ({
 export const SwitchButton = React.forwardRef(function SwitchButton(props, ref) {
     const { className, component: Component = "button", color, size, isOn, onIcon, offIcon, content, onClick } = props, other = __rest(props, ["className", "component", "color", "size", "isOn", "onIcon", "offIcon", "content", "onClick"]);
     const theme = useTheme();
-    return (_jsxs(Component, Object.assign({ type: "button" }, other, { className: className, ref: ref, css: [
+    return (_jsxs(Component, Object.assign({ type: "button" }, other, { className: [switchButtonClasses.root, className]
+            .filter(Boolean)
+            .join(" "), ref: ref, css: [
             css `
             display: flex;
             justify-content: center;
@@ -142,7 +148,7 @@ export const SwitchButton = React.forwardRef(function SwitchButton(props, ref) {
           `,
             COLOR_TO_SWITCH_BUTTON_STYLE(theme, color, isOn),
             SIZE_TO_SWITCH_BUTTON_STYLE(size),
-        ], onClick: onClick, children: [isOn ? onIcon : offIcon, content && _jsx(Content, { children: content })] })));
+        ], onClick: onClick, children: [isOn ? onIcon : offIcon, content && (_jsx(Content, { className: switchButtonClasses.content, children: content }))] })));
 });
 const Content = styled.span(({ theme }) => css `
     color: ${theme.color.foreground.neutralBase};

package/dist/components/Tag.d.ts

@@ -1,4 +1,9 @@
 import React from "react";
+export declare const tagClasses: {
+    readonly root: "Tag";
+    readonly label: "Tag-label";
+    readonly closeButton: "Tag-closeButton";
+};
 export type TagColor = "default" | "red" | "teal" | "orange" | "blue" | "green" | "yellow" | "black" | "white" | "ai";
 export interface TagProps {
     className?: string;

package/dist/components/Tag.js

@@ -16,6 +16,11 @@ import styled from "@emotion/styled";
 import React from "react";
 import { CloseFillIcon } from "../icons";
 import { useTheme } from "@emotion/react";
+export const tagClasses = {
+    root: "Tag",
+    label: "Tag-label",
+    closeButton: "Tag-closeButton",
+};
 const COLOR_TO_STYLE = (theme, color) => ({
     default: css `
       box-sizing: border-box;
@@ -78,7 +83,7 @@ const COLOR_TO_STYLE = (theme, color) => ({
 export const Tag = React.forwardRef(function Tag(props, ref) {
     const { className, component: Component = "span", label, icon, color = "default", bold, close, onClick } = props, other = __rest(props, ["className", "component", "label", "icon", "color", "bold", "close", "onClick"]);
     const theme = useTheme();
-    return (_jsxs(Component, Object.assign({}, other, { ref: ref, className: className, css: [
+    return (_jsxs(Component, Object.assign({}, other, { ref: ref, className: [tagClasses.root, className].filter(Boolean).join(" "), css: [
             css `
           box-sizing: border-box;
           display: flex;
@@ -101,11 +106,11 @@ export const Tag = React.forwardRef(function Tag(props, ref) {
               cursor: pointer;
             `
                 : undefined,
-        ], onClick: onClick, children: [icon, _jsx("span", { css: css `
+        ], onClick: onClick, children: [icon, _jsx("span", { className: tagClasses.label, css: css `
           font-weight: ${bold ? 700 : 400};
           font-size: 12px;
           line-height: 20px;
-        `, children: label }), close && _jsx(StyledCloseFillIcon, {})] })));
+        `, children: label }), close && _jsx(StyledCloseFillIcon, { className: tagClasses.closeButton })] })));
 });
 const StyledCloseFillIcon = styled(CloseFillIcon) `
   width: 10px;

package/dist/components/Tooltip.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
+export declare const tooltipClasses: {
+    readonly root: "Tooltip";
+    readonly title: "Tooltip-title";
+};
 export interface TooltipProps {
     className?: string;
     /** 툴팁에 표시될 제목 텍스트 */

package/dist/components/Tooltip.js

@@ -15,6 +15,10 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import React from "react";
 import { Tooltip as MuiTooltip, } from "@mui/material";
+export const tooltipClasses = {
+    root: "Tooltip",
+    title: "Tooltip-title",
+};
 /**
  * ReactElement를 받아서 tabIndex를 부여하여 focusable한 element로 변환합니다.
  * 만약
@@ -45,11 +49,11 @@ function addTabIndexIfNeeded(element) {
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=172-626&t=aFkKTFgWq2xFFGC5-0)
  */
 export const Tooltip = React.forwardRef(function Tooltip(props, ref) {
-    const { title, text, children } = props, restProps = __rest(props, ["title", "text", "children"]);
+    const { title, text, children, className } = props, restProps = __rest(props, ["title", "text", "children", "className"]);
     const focusableChildren = addTabIndexIfNeeded(children);
-    return (_jsx(StyledTooltip, Object.assign({ ref: ref, title: 
+    return (_jsx(StyledTooltip, Object.assign({ ref: ref, className: [tooltipClasses.root, className].filter(Boolean).join(" "), title: 
         // title이 없고 text가 null인 경우 툴팁을 표시하지 않음
-        !title && text === null ? null : (_jsxs(_Fragment, { children: [title && _jsx(TitleDiv, { children: title }), text] })), describeChild: true }, restProps, { children: focusableChildren })));
+        !title && text === null ? null : (_jsxs(_Fragment, { children: [title && (_jsx(TitleDiv, { className: tooltipClasses.title, children: title })), text] })), describeChild: true }, restProps, { children: focusableChildren })));
 });
 // https://mui.com/material-ui/react-tooltip/#customization
 const StyledTooltip = styled((_a) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.109.2",
+  "version": "1.110.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,