@team-monolith/cds 1.84.2 → 1.84.3

package/package.json

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

package/dist/CdsProvider.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-import { Theme } from "@emotion/react";
-export declare const light: Theme;
-export declare const dark: Theme;
-interface CdsContext {
-    theme?: Theme;
-    lexical?: {
-        uploadByFile: (file: File) => Promise<string>;
-        showFileError: (type: "upload" | "download", message: string) => void;
-    };
-}
-export declare const CdsContext: import("react").Context<CdsContext>;
-export declare function CdsProvider(props: {
-    children: React.ReactNode;
-    fontFamily?: string;
-} & CdsContext): React.ReactElement;
-export {};

package/dist/CdsProvider.js

@@ -1,322 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Global, ThemeProvider, css } from "@emotion/react";
-import { ThemeProvider as MuiThemeProvider } from "@mui/material";
-import { COLOR } from "./foundation/color";
-import { FONT } from "./foundation/font";
-import { createTheme } from "@mui/material";
-import { createContext } from "react";
-export const light = {
-    fontFamily: {
-        ui: FONT.pretendard,
-        title: FONT.naumSquareNeo,
-    },
-    color: {
-        background: {
-            neutralBase: COLOR.white,
-            neutralBaseActive: COLOR.grey02,
-            neutralBaseDisabled: COLOR.grey01,
-            neutralAlt: COLOR.grey02,
-            neutralAltActive: COLOR.grey04,
-            neutralAltDisabled: COLOR.grey01,
-            primary: COLOR.blue07,
-            primaryActive: COLOR.blue08,
-            primaryDisabled: COLOR.blue03,
-            secondary: COLOR.orange07,
-            secondaryActive: COLOR.orange08,
-            secondaryDisabled: COLOR.orange03,
-            danger: COLOR.red08,
-            dangerActive: COLOR.red09,
-            dangerDisabled: COLOR.red02,
-            success: COLOR.green07,
-            successActive: COLOR.green08,
-            successDisabled: COLOR.green03,
-            info: COLOR.teal06,
-            infoActive: COLOR.teal08,
-            infoDisabled: COLOR.teal02,
-            warning: COLOR.yellow06,
-            warningActive: COLOR.yellow08,
-            warningDisabled: COLOR.yellow02,
-            inverse: COLOR.black,
-            inverseActive: COLOR.grey08,
-            inverseDisabled: COLOR.grey04,
-        },
-        foreground: {
-            neutralBase: COLOR.black,
-            neutralBaseActive: COLOR.grey08,
-            neutralBaseDisabled: COLOR.grey06,
-            neutralAlt: COLOR.white,
-            neutralAltActive: COLOR.grey02,
-            neutralAltDisabled: COLOR.grey08,
-            primary: COLOR.blue07,
-            primaryActive: COLOR.blue08,
-            primaryDisabled: COLOR.blue03,
-            secondary: COLOR.orange07,
-            secondaryActive: COLOR.orange08,
-            secondaryDisabled: COLOR.orange04,
-            danger: COLOR.red08,
-            dangerActive: COLOR.red09,
-            dangerDisabled: COLOR.red04,
-            success: COLOR.green07,
-            successActive: COLOR.green08,
-            successDisabled: COLOR.green04,
-            info: COLOR.teal08,
-            infoActive: COLOR.teal09,
-            infoDisabled: COLOR.teal04,
-            warning: COLOR.yellow08,
-            warningActive: COLOR.yellow09,
-            warningDisabled: COLOR.yellow04,
-        },
-        container: {
-            blueContainer: COLOR.blue01,
-            blueOnContainer: COLOR.blue08,
-            orangeContainer: COLOR.orange01,
-            orangeOnContainer: COLOR.orange08,
-            redContainer: COLOR.red01,
-            redOnContainer: COLOR.red08,
-            greenContainer: COLOR.green01,
-            greenOnContainer: COLOR.green08,
-            tealContainer: COLOR.teal01,
-            tealOnContainer: COLOR.teal08,
-            yellowContainer: COLOR.yellow01,
-            yellowOnContainer: COLOR.yellow08,
-            obsidianContainer: COLOR.black,
-            obsidianOnContainer: COLOR.grey03,
-            marbleContainer: COLOR.grey03,
-            marbleOnContainer: COLOR.grey07,
-        },
-        brand: {
-            brandOriginal: COLOR.blue06,
-            brandAlt: COLOR.blue07,
-            brandAccent: COLOR.blue08,
-            brandFaded: COLOR.blue03,
-            pdf: "#FF5850",
-            pdfAlt: "#FFEEED",
-            quiz: "#F889AA",
-            quizAlt: "#FEF3F6",
-            python: "#3E88FF",
-            pythonAlt: "#ECF3FF",
-            embedded: "#7C8597",
-            embeddedAlt: "#F2F3F5",
-            board: "#42DB88",
-            boardAlt: "#F0FCF5",
-            scratch: "#FF9D3E",
-            scratchAlt: "#FFF5EC",
-            entry: "#32D27D",
-            entryAlt: "#E0F8EB",
-            video: "#3239DE",
-            videoAlt: "#E7E7FB",
-            worksheet: "#874BFF",
-            worksheetAlt: "#EEE5FF",
-            ebook: "#0094FF",
-            ebookAlt: "#E0F2FF",
-            makecode: "#AA278F",
-            makecodeAlt: "#FFE0F9",
-            codap: "#00A5C6",
-            codapAlt: "#CEF2FD",
-            decorativeRed: "#D73152",
-            decorativePink: "#D13D78",
-            decorativeAmber: "#CC4827",
-            decorativeGrass: "#6E7B3F",
-            decorativeGreen: "#26864B",
-            decorativeBlue: "#0076D0",
-            decorativeIndigo: "#5863FF",
-            decorativePurple: "#9A3BBC",
-            decorativeBrown: "#996C49",
-            decorativeCopper: "#8A6470",
-            decorativeGold: "#876E3F",
-            decorativeSilver: "#6A7781",
-            decorativeGray: "#747474",
-            decorativeBlack: "#474658",
-            decorativeRedContainer: "#FFCDD7",
-            decorativeRedOnContainer: "#FE5375",
-            decorativeIndigoContainer: "#CED1FF",
-            decorativeIndigoOnContainer: "#8088FF",
-            decorativeGreenContainer: "#BCF1D1",
-            decorativeGreenOnContainer: "#4AC078",
-            decorativePurpleContainer: "#E5CAEF",
-            decorativePurpleOnContainer: "#C673E4",
-            decorativeGoldContainer: "#E3D7C2",
-            decorativeGoldOnContainer: "#B09666",
-            decorativeGrayContainer: "#D6D6D6",
-            decorativeGrayOnContainer: "#969696",
-            decorativeBlackContainer: "#CAC8D8",
-            decorativeBlackOnContainer: "#474658",
-        },
-        blanket: {
-            neutral: COLOR.alpha030,
-            neutralLight: COLOR.alpha015,
-            neutralHeavy: COLOR.alpha065,
-            inverse: COLOR.alphaf50,
-            inverseLight: COLOR.alphaf20,
-            inverseHeavy: COLOR.alphaf10,
-        },
-    },
-};
-export const dark = {
-    fontFamily: {
-        ui: FONT.pretendard,
-        title: FONT.naumSquareNeo,
-    },
-    color: {
-        background: {
-            neutralBase: COLOR.black,
-            neutralBaseActive: COLOR.grey08,
-            neutralBaseDisabled: COLOR.grey09,
-            neutralAlt: COLOR.grey08,
-            neutralAltActive: COLOR.grey07,
-            neutralAltDisabled: COLOR.grey09,
-            primary: COLOR.blue04,
-            primaryActive: COLOR.blue03,
-            primaryDisabled: COLOR.blue07,
-            secondary: COLOR.orange04,
-            secondaryActive: COLOR.orange03,
-            secondaryDisabled: COLOR.orange08,
-            danger: COLOR.red03,
-            dangerActive: COLOR.red02,
-            dangerDisabled: COLOR.red09,
-            success: COLOR.green04,
-            successActive: COLOR.green03,
-            successDisabled: COLOR.green08,
-            info: COLOR.teal06,
-            infoActive: COLOR.teal08,
-            infoDisabled: COLOR.teal02,
-            warning: COLOR.yellow08,
-            warningActive: COLOR.yellow06,
-            warningDisabled: COLOR.yellow09,
-            inverse: COLOR.white,
-            inverseActive: COLOR.grey03,
-            inverseDisabled: COLOR.grey07,
-        },
-        foreground: {
-            neutralBase: COLOR.white,
-            neutralBaseActive: COLOR.grey02,
-            neutralBaseDisabled: COLOR.grey04,
-            neutralAlt: COLOR.black,
-            neutralAltActive: COLOR.grey08,
-            neutralAltDisabled: COLOR.grey02,
-            primary: COLOR.blue04,
-            primaryActive: COLOR.blue03,
-            primaryDisabled: COLOR.blue07,
-            secondary: COLOR.orange04,
-            secondaryActive: COLOR.orange03,
-            secondaryDisabled: COLOR.orange07,
-            danger: COLOR.red03,
-            dangerActive: COLOR.red02,
-            dangerDisabled: COLOR.red07,
-            success: COLOR.green04,
-            successActive: COLOR.green03,
-            successDisabled: COLOR.green07,
-            info: COLOR.teal03,
-            infoActive: COLOR.teal02,
-            infoDisabled: COLOR.teal07,
-            warning: COLOR.yellow03,
-            warningActive: COLOR.yellow02,
-            warningDisabled: COLOR.yellow07,
-        },
-        container: {
-            blueContainer: COLOR.blue09,
-            blueOnContainer: COLOR.blue02,
-            orangeContainer: COLOR.orange09,
-            orangeOnContainer: COLOR.orange02,
-            redContainer: COLOR.red09,
-            redOnContainer: COLOR.red02,
-            greenContainer: COLOR.green09,
-            greenOnContainer: COLOR.green02,
-            tealContainer: COLOR.teal09,
-            tealOnContainer: COLOR.teal02,
-            yellowContainer: COLOR.yellow08,
-            yellowOnContainer: COLOR.yellow02,
-            obsidianContainer: COLOR.grey07,
-            obsidianOnContainer: COLOR.grey03,
-            marbleContainer: COLOR.grey03,
-            marbleOnContainer: COLOR.grey07,
-        },
-        brand: {
-            brandOriginal: COLOR.blue06,
-            brandAlt: COLOR.blue04,
-            brandAccent: COLOR.blue03,
-            brandFaded: COLOR.blue07,
-            pdf: "#FF5850",
-            pdfAlt: "#800700",
-            quiz: "#F889AA",
-            quizAlt: "#760A27",
-            python: "#3E88FF",
-            pythonAlt: "#002666",
-            embedded: "#7C8597",
-            embeddedAlt: "#434956",
-            board: "#42DB88",
-            boardAlt: "#11552D",
-            scratch: "#FF9D3E",
-            scratchAlt: "#663000",
-            entry: "#32D27D",
-            entryAlt: "#135330",
-            video: "#3239DE",
-            videoAlt: "#292B60",
-            worksheet: "#874BFF",
-            worksheetAlt: "#5F5C66",
-            ebook: "#0094FF",
-            ebookAlt: "#475966",
-            makecode: "#AA278F",
-            makecodeAlt: "#664760",
-            codap: "#00A5C6",
-            codapAlt: "#006A7F",
-            decorativeRed: "#D73152",
-            decorativePink: "#D13D78",
-            decorativeAmber: "#CC4827",
-            decorativeGrass: "#6E7B3F",
-            decorativeGreen: "#26864B",
-            decorativeBlue: "#0076D0",
-            decorativeIndigo: "#5863FF",
-            decorativePurple: "#9A3BBC",
-            decorativeBrown: "#996C49",
-            decorativeCopper: "#8A6470",
-            decorativeGold: "#876E3F",
-            decorativeSilver: "#6A7781",
-            decorativeGray: "#747474",
-            decorativeBlack: "#474658",
-            decorativeRedContainer: "#FFCDD7",
-            decorativeRedOnContainer: "#FE5375",
-            decorativeIndigoContainer: "#CED1FF",
-            decorativeIndigoOnContainer: "#8088FF",
-            decorativeGreenContainer: "#BCF1D1",
-            decorativeGreenOnContainer: "#4AC078",
-            decorativePurpleContainer: "#E5CAEF",
-            decorativePurpleOnContainer: "#C673E4",
-            decorativeGoldContainer: "#E3D7C2",
-            decorativeGoldOnContainer: "#B09666",
-            decorativeGrayContainer: "#D6D6D6",
-            decorativeGrayOnContainer: "#969696",
-            decorativeBlackContainer: "#CAC8D8",
-            decorativeBlackOnContainer: "#474658",
-        },
-        blanket: {
-            neutral: COLOR.alphaf20,
-            neutralLight: COLOR.alphaf10,
-            neutralHeavy: COLOR.alphaf50,
-            inverse: COLOR.alpha030,
-            inverseLight: COLOR.alpha015,
-            inverseHeavy: COLOR.alpha065,
-        },
-    },
-};
-export const CdsContext = createContext({});
-export function CdsProvider(props) {
-    const muiTheme = createTheme({
-        typography: {
-            fontFamily: props.fontFamily,
-        },
-        components: {
-            MuiButtonBase: {
-                defaultProps: {
-                    disableRipple: true, // No more ripple, on the whole application 💣!
-                },
-            },
-        },
-    });
-    const { theme = light } = props;
-    return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: css `
-          body {
-            font-family: ${FONT.pretendard};
-          }
-        ` }), _jsx(MuiThemeProvider, Object.assign({ theme: muiTheme }, { children: _jsx(ThemeProvider, Object.assign({ theme: theme }, { children: _jsx(CdsContext.Provider, Object.assign({ value: props }, { children: props.children })) })) }))] }));
-}

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

@@ -1,24 +0,0 @@
-import React from "react";
-import { PolymorphicProps } from "@mui/base";
-export interface AlertDialogOwnProps<RootComponentType extends React.ElementType> {
-    className?: string;
-    component?: RootComponentType;
-    /** `true` 값일 때 모달이 노출됩니다. */
-    open: boolean;
-    /** 모달이 닫힐 때 호출되는 callback */
-    onClose?: () => void;
-    /** 모달의 내용으로 표기될 값 */
-    children: React.ReactNode;
-    /** 모달 좌측에 표기될 아이콘 */
-    icon?: React.ReactNode;
-    /** 전달시 아이콘 패딩이 비활성화 됩니다. */
-    disableIconPadding?: boolean;
-}
-export type AlertDialogProps<RootComponentType extends React.ElementType = AlertDialogTypeMap["defaultComponent"]> = PolymorphicProps<AlertDialogTypeMap<RootComponentType>, RootComponentType>;
-export interface AlertDialogTypeMap<RootComponentType extends React.ElementType = "div"> {
-    props: AlertDialogOwnProps<RootComponentType>;
-    defaultComponent: RootComponentType;
-}
-type AlertDialogComponent = <RootComponentType extends React.ElementType = "div">(props: AlertDialogProps<RootComponentType>) => React.ReactElement | null;
-export declare const AlertDialog: AlertDialogComponent;
-export {};

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,86 +0,0 @@
-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, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { css, useTheme } from "@emotion/react";
-import React from "react";
-import { shadows } from "../../foundation/shadows";
-import styled from "@emotion/styled";
-import { MOBILE } from "../../foundation/breakpoints";
-import { AlertDialogContext } from "./AlertDialogContext";
-import { ZINDEX } from "../../utils/zIndex";
-import { Modal } from "../..";
-export const AlertDialog = React.forwardRef(function AlertDialog(props, ref) {
-    const { className, component: Component = "div", open, onClose, children, icon, disableIconPadding } = props, other = __rest(props, ["className", "component", "open", "onClose", "children", "icon", "disableIconPadding"]);
-    const theme = useTheme();
-    const paddingAreaName = disableIconPadding ? "content" : "iconPadding";
-    return (_jsx(Modal, Object.assign({ open: open, onClose: onClose, ref: ref, sx: {
-            zIndex: ZINDEX.ALERT,
-        } }, other, { children: _jsxs(Component, Object.assign({ className: className, css: css `
-            width: 480px;
-            max-height: calc(100% - 48px);
-            background: ${theme.color.background.neutralBase};
-            box-shadow: ${shadows.shadow04};
-            border-radius: 16px;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            padding: 24px;
-            box-sizing: border-box;
-
-            display: grid;
-            grid-template-rows: auto 1fr auto;
-            ${icon
-                ? css `
-                  grid-template-columns: 32px 1fr;
-                  grid-template-areas:
-                    "icon title"
-                    "${paddingAreaName} content"
-                    "actions actions";
-                `
-                : css `
-                  grid-template-areas:
-                    "title"
-                    "content"
-                    "actions";
-                `}
-
-            gap: 8px 16px;
-
-            ${MOBILE(css `
-              width: calc(100% - 24px);
-              grid-template-columns: auto;
-              grid-template-areas:
-                "title"
-                "content"
-                "actions";
-            `)}
-          ` }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsx(AlertDialogContext.Provider, Object.assign({ value: { icon } }, { children: children }))] })) })));
-});
-const IconDiv = styled.div `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  grid-area: icon;
-  ${({ theme }) => css `
-    color: ${theme.color.background.infoActive};
-  `}
-  svg {
-    width: 32px;
-    height: 32px;
-  }
-
-  ${MOBILE(css `
-    display: none;
-  `)}
-`;

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

@@ -1,8 +0,0 @@
-import React from "react";
-export interface AlertDialogActionsProps {
-    className?: string;
-    component?: React.ElementType;
-    /** Content 내용으로 표기될 값 */
-    children: React.ReactNode;
-}
-export declare const AlertDialogActions: React.ForwardRefExoticComponent<AlertDialogActionsProps & React.RefAttributes<unknown>>;

package/dist/components/AlertDialog/AlertDialogActions.js

@@ -1,26 +0,0 @@
-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";
-import React from "react";
-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 `
-        grid-area: actions;
-
-        margin-top: 8px;
-        display: flex;
-        gap: 16px;
-        justify-content: flex-end;
-      ` }, { children: children })));
-});

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

@@ -1,8 +0,0 @@
-import React from "react";
-export interface AlertDialogContentProps {
-    className?: string;
-    component?: React.ElementType;
-    /** Content 내용으로 표기될 값 */
-    children: React.ReactNode;
-}
-export declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<unknown>>;

package/dist/components/AlertDialog/AlertDialogContent.js

@@ -1,28 +0,0 @@
-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, useTheme } from "@emotion/react";
-import React from "react";
-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 `
-        grid-area: content;
-
-        font-style: normal;
-        font-size: 18px;
-        line-height: 28px;
-        color: ${theme.color.foreground.neutralBase};
-        overflow-y: auto;
-      ` }, { children: children })));
-});

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

@@ -1,4 +0,0 @@
-import React from "react";
-export declare const AlertDialogContext: React.Context<{
-    icon?: React.ReactNode;
-}>;

package/dist/components/AlertDialog/AlertDialogContext.js

@@ -1,2 +0,0 @@
-import React from "react";
-export const AlertDialogContext = React.createContext({});

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

@@ -1,13 +0,0 @@
-import React from "react";
-export interface AlertDialogTitleProps {
-    className?: string;
-    component?: React.ElementType;
-    /**
-     * 제목의 X 버튼을 누르를 때 호출되는 callback.
-     * 이 속성이 전달되면 X 버튼을 Title 영역에 그립니다.
-     */
-    onClose?: () => void;
-    /** Content 내용으로 표기될 값 */
-    children: React.ReactNode;
-}
-export declare const AlertDialogTitle: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<unknown>>;

package/dist/components/AlertDialog/AlertDialogTitle.js

@@ -1,57 +0,0 @@
-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, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { css, useTheme } from "@emotion/react";
-import React from "react";
-import { SquareButton } from "../SquareButton";
-import { CloseFillIcon } from "../../icons";
-import { AlertDialogContext } from "./AlertDialogContext";
-import { MOBILE } from "../../foundation/breakpoints";
-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 `
-          grid-area: title;
-          font-family: ${theme.fontFamily.ui};
-          font-style: normal;
-          font-weight: 500;
-          font-size: 20px;
-          line-height: 36px;
-          color: ${theme.color.foreground.neutralBase};
-
-          display: flex;
-          justify-content: space-between;
-        ` }, { children: [_jsxs("div", Object.assign({ css: css `
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: flex-start;
-            gap: 16px;
-          ` }, { children: [icon && (_jsx("div", Object.assign({ css: css `
-                display: none;
-                ${MOBILE(css `
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  color: ${theme.color.background.infoActive};
-
-                  svg {
-                    width: 32px;
-                    height: 32px;
-                  }
-                `)}
-              ` }, { children: icon }))), children] })), onClose && (_jsx(SquareButton, { color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose, buttonProps: {
-                        "aria-label": "닫기",
-                    } }))] })) }));
-});

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

@@ -1,4 +0,0 @@
-export * from "./AlertDialog";
-export * from "./AlertDialogTitle";
-export * from "./AlertDialogContent";
-export * from "./AlertDialogActions";

package/dist/components/AlertDialog/index.js

@@ -1,4 +0,0 @@
-export * from "./AlertDialog";
-export * from "./AlertDialogTitle";
-export * from "./AlertDialogContent";
-export * from "./AlertDialogActions";

package/dist/components/Banner.d.ts

@@ -1,39 +0,0 @@
-import React from "react";
-import { ButtonProps } from "./Button";
-export type BannerColor = "red" | "blue" | "green" | "yellow" | "white";
-export declare const bannerClasses: {
-    readonly icon: "Banner-icon";
-    readonly textContainer: "Banner-textContainer";
-    readonly headline: "Banner-textContainer-headline";
-    readonly content: "Banner-textContainer-content";
-    readonly button: "Banner-button";
-    readonly closeSquareButton: "Banner-closeSquareButton";
-};
-export interface BannerProps {
-    className?: string;
-    component?: React.ElementType;
-    /** 컴포넌트 내 헤드라인으로 표기될 문자열 */
-    headline?: React.ReactNode;
-    /** 컴포넌트 내용으로 표기될 값 */
-    content?: React.ReactNode;
-    /** 컴포넌트 좌측에 표기될 아이콘 */
-    icon?: React.ReactNode;
-    /** 컴포넌트의 색상 */
-    color: BannerColor;
-    /** 컴포넌트 우측에 표기될 버튼의 라벨 */
-    buttonLabel?: string;
-    /** 컴포넌트 우측 버튼 클릭 시 호출될 콜백 함수 */
-    onButtonClick?: () => void;
-    /** Button에 전달될 Props */
-    buttonProps?: Omit<ButtonProps, "className" | "label" | "onClick">;
-    /** 컴포넌트 우측에 표기될 닫기 버튼 유무 */
-    close?: boolean;
-    /** 닫기 버튼 클릭 시 호출될 콜백 함수 */
-    onClose?: () => void;
-    /** 전체 너비 유무 */
-    fullWidth?: boolean;
-}
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=44-2847&t=bhnL1ombbddld3RQ-0)
- */
-export declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<unknown>>;