@team-monolith/cds 0.2.11 → 0.3.0

package/dist/components/PinInput.js

@@ -1,154 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 } from "@emotion/react";
-import styled from "@emotion/styled";
-import React, { useRef, useState } from "react";
-import { InputBase } from "./InputBase";
-var SIZE_TO_STYLES = function (size) {
-    return ({
-        small: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: 36px;\n    "], ["\n      width: 36px;\n    "]))),
-        medium: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: 48px;\n    "], ["\n      width: 48px;\n    "]))),
-        large: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: 56px;\n    "], ["\n      width: 56px;\n    "]))),
-    }[size]);
-};
-var COLOR_TO_HINT_STYLES = function (theme, color, disabled) {
-    return disabled
-        ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), theme.color.foreground.neutralBaseDisabled) : {
-        default: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), theme.color.foreground.neutralBaseDisabled),
-        activePrimary: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), theme.color.foreground.neutralBaseDisabled),
-        activeDanger: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), theme.color.foreground.danger),
-        activeSuccess: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), theme.color.foreground.success),
-    }[color];
-};
-var SIZE_TO_FONT_STYLES = function (size) {
-    return ({
-        small: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      font-size: 14px;\n      line-height: 20px;\n      svg {\n        width: 16px;\n        height: 16px;\n      }\n    "], ["\n      font-size: 14px;\n      line-height: 20px;\n      svg {\n        width: 16px;\n        height: 16px;\n      }\n    "]))),
-        medium: css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      font-size: 16px;\n      line-height: 24px;\n      svg {\n        width: 16px;\n        height: 16px;\n      }\n    "], ["\n      font-size: 16px;\n      line-height: 24px;\n      svg {\n        width: 16px;\n        height: 16px;\n      }\n    "]))),
-        large: css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      font-size: 18px;\n      line-height: 28px;\n      svg {\n        width: 18px;\n        height: 18px;\n      }\n    "], ["\n      font-size: 18px;\n      line-height: 28px;\n      svg {\n        width: 18px;\n        height: 18px;\n      }\n    "]))),
-    }[size]);
-};
-/** i번째 값을 value로 바꾸는 setState Wrapper 함수  */
-function updateFocus(value, i, setFocus) {
-    setFocus(function (prevFocus) {
-        var newFocus = prevFocus.slice();
-        newFocus[i] = value;
-        return newFocus;
-    });
-}
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=26-11031&t=n7a8XP4k8R2TGmiO-0)
- */
-var PinInput = React.forwardRef(function (props, ref) {
-    var className = props.className, autoFocus = props.autoFocus, size = props.size, placeholder = props.placeholder, label = props.label, hintText = props.hintText, hintIcon = props.hintIcon, _a = props.disabled, disabled = _a === void 0 ? false : _a, error = props.error, positive = props.positive, onChange = props.onChange, values = props.values, other = __rest(props, ["className", "autoFocus", "size", "placeholder", "label", "hintText", "hintIcon", "disabled", "error", "positive", "onChange", "values"]);
-    return (_jsxs(PinInputWrapper, __assign({ className: className, size: size, ref: ref }, other, { children: [label ? (_jsxs(Label, __assign({ disabled: disabled }, { children: [label, " ", _jsx(PinInputComponent, __assign({}, props))] }))) : (_jsx(PinInputComponent, __assign({}, props))), hintText && (_jsxs(Hint, __assign({ color: error ? "activeDanger" : positive ? "activeSuccess" : "default", disabled: disabled }, { children: [hintIcon, hintText] })))] })));
-});
-function PinInputComponent(props) {
-    var autoFocus = props.autoFocus, size = props.size, placeholder = props.placeholder, _a = props.disabled, disabled = _a === void 0 ? false : _a, error = props.error, positive = props.positive, onChange = props.onChange, values = props.values;
-    var _b = useState([]), focus = _b[0], setFocus = _b[1];
-    var refs = useRef([]);
-    return (_jsx(PinInputContainer, { children: values.map(function (value, i) { return (_jsx(SqaureInput, { color: error
-                ? "activeDanger"
-                : positive
-                    ? "activeSuccess"
-                    : focus[i]
-                        ? "activePrimary"
-                        : "default", inputRef: function (element) {
-                refs.current[i] = element;
-            }, onChange: function (event) {
-                var _a;
-                var eventValue = event.target.value;
-                if (eventValue.length > 2) {
-                    // 복붙으로 입력을 입력한 경우
-                    if (eventValue.length === values.length &&
-                        eventValue.match(/^[0-9]+$/)) {
-                        onChange({ values: eventValue.split(""), event: event });
-                    }
-                    return;
-                }
-                // 값을 지웠을 때
-                if (eventValue === "") {
-                    var newValues = values.slice();
-                    newValues[i] = "";
-                    onChange({ values: newValues, event: event });
-                    return;
-                }
-                // 원래 값이 있었고, 새 값을 입력했을 때
-                // 입력 완료된 값(2자리)으로부터 새로 입력한 숫자를 추출한다.
-                var currentValue = values[i];
-                var newValue = eventValue;
-                if (currentValue[0] === eventValue[0]) {
-                    // 예) 이전 값: '2', 입력된 상태: '23' 인 경우
-                    newValue = eventValue[1]; // 뒷 자리가 새로 입력된 숫자
-                }
-                else if (currentValue[0] === eventValue[1]) {
-                    // 예) 이전 값: '2', 입력된 상태: '32' 인 경우
-                    newValue = eventValue[0]; // 앞 자리가 새로 입력된 숫자
-                }
-                // 새로 입력된 값이 숫자일때만 onChange를 실행
-                if (newValue.match(/^[0-9]$/)) {
-                    var newValues = values.slice();
-                    newValues[i] = newValue;
-                    onChange({ values: newValues, event: event });
-                    // 자동으로 다음 input으로 포커스 이동시킴.
-                    if (i < values.length - 1) {
-                        (_a = refs.current[i + 1]) === null || _a === void 0 ? void 0 : _a.focus();
-                    }
-                }
-            }, placeholder: focus[i] ? "" : placeholder, disabled: disabled, size: size, inputProps: {
-                autoFocus: autoFocus ? i === 0 : false,
-                onBlur: function () { return updateFocus(false, i, setFocus); },
-                onFocus: function () { return updateFocus(true, i, setFocus); },
-                onKeyDown: function (e) {
-                    var _a;
-                    // Backspace 키로 이전 input으로의 포커스 이동
-                    if (e.key === "Backspace" && values[i] === "" && i > 0) {
-                        (_a = refs.current[i - 1]) === null || _a === void 0 ? void 0 : _a.focus();
-                    }
-                },
-            }, fullWidth: true, value: value }, i)); }) }));
-}
-var PinInputWrapper = styled.span(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: 8px;\n  ", "\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: 8px;\n  ", "\n"])), function (_a) {
-    var size = _a.size;
-    return SIZE_TO_FONT_STYLES(size);
-});
-var PinInputContainer = styled.span(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: inline-flex;\n  gap: 8px;\n"], ["\n  display: inline-flex;\n  gap: 8px;\n"])));
-var SqaureInput = styled(InputBase)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n  padding: 0;\n  input {\n    text-align: center;\n  }\n"], ["\n  ", "\n  padding: 0;\n  input {\n    text-align: center;\n  }\n"])), function (_a) {
-    var size = _a.size;
-    return SIZE_TO_STYLES(size);
-});
-var Hint = styled.div(function (_a) {
-    var theme = _a.theme, color = _a.color, disabled = _a.disabled;
-    return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    ", ";\n  "], ["\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    ", ";\n  "])), COLOR_TO_HINT_STYLES(theme, color, disabled));
-});
-var Label = styled.label(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  ", "\n"])), function (_a) {
-    var theme = _a.theme, disabled = _a.disabled;
-    return disabled && css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), theme.color.foreground.neutralBaseDisabled);
-});
-export default PinInput;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;

package/dist/components/RadioInput.d.ts

@@ -1,23 +0,0 @@
-import * as React from "react";
-import { InputHTMLAttributes } from "react";
-export type RadioInputType = "default" | "selected";
-export interface RadioInputProps {
-    className?: string;
-    /** 라디오 버튼의 선택 여부(Controlled) */
-    checked: boolean;
-    /** 라디오 버튼의 라벨 */
-    label?: string;
-    /** 라디오 버튼의 하단 마진(8px) 여부 */
-    spacer?: boolean;
-    /** 라디오 버튼의 비활성화 여부 */
-    disabled?: boolean;
-    /** 라디오 버튼 선택값 변경시 호출되는 함수 */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /** HTML input 태그에 전달될 props */
-    inputProps?: InputHTMLAttributes<HTMLInputElement>;
-}
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=420-3704&t=lvpbJKdtz7Lb8wIQ-0)
- */
-declare const RadioInput: React.ForwardRefExoticComponent<RadioInputProps & React.RefAttributes<any>>;
-export default RadioInput;

package/dist/components/RadioInput.js

@@ -1,78 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 * as React from "react";
-import styled from "@emotion/styled";
-import { ZINDEX } from "../utils/zIndex";
-var TYPE_TO_ICON_STYLE = function (theme, type, disabled) {
-    return {
-        default: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      path {\n        stroke: ", ";\n        fill: ", ";\n      }\n      ", "\n    "], ["\n      path {\n        stroke: ", ";\n        fill: ", ";\n      }\n      ", "\n    "])), theme.color.background.neutralAltActive, theme.color.background.neutralBase, disabled
-            ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            cursor: default;\n            path {\n              stroke: ", ";\n              fill: ", ";\n            }\n          "], ["\n            cursor: default;\n            path {\n              stroke: ", ";\n              fill: ", ";\n            }\n          "])), theme.color.background.primaryDisabled, theme.color.background.neutralAlt) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            input[type=\"radio\"]:hover + & {\n              path {\n                stroke: ", ";\n              }\n            }\n          "], ["\n            input[type=\"radio\"]:hover + & {\n              path {\n                stroke: ", ";\n              }\n            }\n          "])), theme.color.background.primary)),
-        selected: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      path {\n        stroke: ", ";\n        fill: ", ";\n      }\n      rect {\n        fill: ", ";\n      }\n      ", "\n    "], ["\n      path {\n        stroke: ", ";\n        fill: ", ";\n      }\n      rect {\n        fill: ", ";\n      }\n      ", "\n    "])), theme.color.background.primary, theme.color.background.neutralBase, theme.color.background.primary, disabled
-            ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            cursor: default;\n            path {\n              stroke: ", ";\n              fill: ", ";\n            }\n            rect {\n              fill: ", ";\n            }\n          "], ["\n            cursor: default;\n            path {\n              stroke: ", ";\n              fill: ", ";\n            }\n            rect {\n              fill: ", ";\n            }\n          "])), theme.color.background.primaryDisabled, theme.color.background.neutralAlt, theme.color.background.primaryDisabled) : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            input[type=\"radio\"]:hover + & {\n              path {\n                stroke: ", ";\n              }\n              rect {\n                fill: ", ";\n              }\n            }\n          "], ["\n            input[type=\"radio\"]:hover + & {\n              path {\n                stroke: ", ";\n              }\n              rect {\n                fill: ", ";\n              }\n            }\n          "])), theme.color.background.primaryActive, theme.color.background.primaryActive)),
-    }[type];
-};
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=420-3704&t=lvpbJKdtz7Lb8wIQ-0)
- */
-var RadioInput = React.forwardRef(function (props, ref) {
-    var className = props.className, checked = props.checked, label = props.label, spacer = props.spacer, disabled = props.disabled, onChange = props.onChange, inputProps = props.inputProps, other = __rest(props, ["className", "checked", "label", "spacer", "disabled", "onChange", "inputProps"]);
-    if (!label) {
-        return _jsx(RadioButton, __assign({}, props, { ref: ref }));
-    }
-    var radioProps = {
-        checked: checked,
-        spacer: spacer,
-        disabled: disabled,
-        onChange: onChange,
-        inputProps: inputProps,
-    };
-    return (_jsxs(Label, __assign({ className: className, ref: ref }, other, { children: [_jsx(RadioButton, __assign({}, radioProps)), _jsx("span", __assign({ css: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          margin-left: 8px;\n        "], ["\n          margin-left: 8px;\n        "]))) }, { children: label }))] })));
-});
-var RadioButton = React.forwardRef(function (props, ref) {
-    var className = props.className, checked = props.checked, label = props.label, _a = props.spacer, spacer = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, onChange = props.onChange, inputProps = props.inputProps, other = __rest(props, ["className", "checked", "label", "spacer", "disabled", "onChange", "inputProps"]);
-    var type = props.checked ? "selected" : "default";
-    return (_jsxs(RadioButtonContainer, __assign({ className: className, spacer: spacer, ref: ref }, other, { children: [_jsx(StyledInput, __assign({ type: "radio" }, inputProps, { checked: checked, disabled: disabled, onChange: onChange })), _jsx(RadioButtonIcon, { type: type, disabled: disabled })] })));
-});
-var Label = styled.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  width: fit-content;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 16px;\n  color: ", ";\n  align-self: center;\n"], ["\n  display: flex;\n  position: relative;\n  width: fit-content;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 16px;\n  color: ", ";\n  align-self: center;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.color.foreground.neutralBase;
-});
-var RadioButtonContainer = styled.span(function (_a) {
-    var spacer = _a.spacer;
-    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: inline-flex;\n    position: relative;\n    width: 16px;\n    height: 16px;\n    cursor: pointer;\n    margin-bottom: ", ";\n  "], ["\n    display: inline-flex;\n    position: relative;\n    width: 16px;\n    height: 16px;\n    cursor: pointer;\n    margin-bottom: ", ";\n  "])), spacer ? "8px" : "0");
-});
-var StyledInput = styled.input(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  cursor: inherit;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  width: 16px;\n  height: 16px;\n  margin: 0;\n  padding: 0;\n  // input \uCEF4\uD3EC\uB10C\uD2B8\uB294 \uBCF4\uC774\uC9C0 \uC54A\uC9C0\uB9CC, \uD074\uB9AD\uC774 \uAC00\uB2A5\uD558\uAC8C z-index\uB97C \uC124\uC815\uD569\uB2C8\uB2E4.\n  z-index: ", ";\n"], ["\n  cursor: inherit;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  width: 16px;\n  height: 16px;\n  margin: 0;\n  padding: 0;\n  // input \uCEF4\uD3EC\uB10C\uD2B8\uB294 \uBCF4\uC774\uC9C0 \uC54A\uC9C0\uB9CC, \uD074\uB9AD\uC774 \uAC00\uB2A5\uD558\uAC8C z-index\uB97C \uC124\uC815\uD569\uB2C8\uB2E4.\n  z-index: ", ";\n"])), ZINDEX.inputBase);
-// default와 selected 구조가 유사하여 하나의 컴포넌트로 표현합니다.
-var RadioButtonIcon = function (props) {
-    var theme = useTheme();
-    return (_jsxs("svg", __assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", css: TYPE_TO_ICON_STYLE(theme, props.type, props.disabled) }, { children: [_jsx("path", { d: "M0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8Z", fill: "currentColor", stroke: "currentColor" }), props.type === "selected" && (_jsx("rect", { x: "4", y: "4", width: "8", height: "8", rx: "4", fill: "currentColor" }))] })));
-};
-export default RadioInput;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/components/SquareButton.d.ts

@@ -1,26 +0,0 @@
-import React from "react";
-export type SquareButtonColor = "danger" | "primary" | "secondary" | "icon";
-export type SquareButtonSize = "large" | "medium" | "small" | "xsmall";
-export interface SquareButtonProps {
-    className?: string;
-    component?: React.ElementType;
-    /** 비활성화 여부 */
-    disabled?: boolean;
-    /** 컴포넌트 색상 */
-    color: SquareButtonColor;
-    /** 컴포넌트 크기 */
-    size: SquareButtonSize;
-    /** 컴포넌트 내 표기될 아이콘 */
-    icon: React.ReactNode;
-    /** 컴포넌트 하단에 표기될 문자열 */
-    label?: string;
-    /** 전체 너비 유무 */
-    fullWidth?: boolean;
-    /** 버튼 클릭 시 호출될 콜백 함수 */
-    onClick?: () => void;
-}
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=22-374&t=kTLv3t86qtGalHSS-0)
- */
-declare const SquareButton: React.ForwardRefExoticComponent<SquareButtonProps & React.RefAttributes<any>>;
-export default SquareButton;

package/dist/components/SquareButton.js

@@ -1,80 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 } from "@emotion/react";
-import styled from "@emotion/styled";
-import React from "react";
-import { HOVER } from "../utils/hover";
-var COLOR_TO_BUTTON_STYLE = function (theme, color) {
-    return ({
-        danger: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      border: none;\n      background: ", ";\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n      }\n    "], ["\n      border: none;\n      background: ", ";\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n      }\n    "])), theme.color.background.danger, theme.color.foreground.neutralAlt, HOVER(css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background: ", ";\n      "], ["\n        background: ", ";\n      "])), theme.color.background.dangerActive)), theme.color.background.dangerDisabled),
-        secondary: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: ", ";\n      border: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n        color: ", ";\n      }\n    "], ["\n      background: ", ";\n      border: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n        color: ", ";\n      }\n    "])), theme.color.background.neutralAlt, theme.color.foreground.neutralBase, HOVER(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        background: ", ";\n        color: ", ";\n      "], ["\n        background: ", ";\n        color: ", ";\n      "])), theme.color.background.neutralAltActive, theme.color.foreground.neutralBase)), theme.color.background.neutralAlt, theme.color.foreground.neutralBaseDisabled),
-        primary: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background: ", ";\n      border: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n      }\n    "], ["\n      background: ", ";\n      border: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n      }\n    "])), theme.color.background.primary, theme.color.foreground.neutralAlt, HOVER(css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        background: ", ";\n      "], ["\n        background: ", ";\n      "])), theme.color.background.primaryActive)), theme.color.background.primaryDisabled),
-        icon: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      background: none;\n      border: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: none;\n        color: ", ";\n      }\n    "], ["\n      background: none;\n      border: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: none;\n        color: ", ";\n      }\n    "])), theme.color.foreground.neutralBase, HOVER(css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        background: ", ";\n        color: ", ";\n      "], ["\n        background: ", ";\n        color: ", ";\n      "])), theme.color.background.neutralAltActive, theme.color.foreground.neutralBase)), theme.color.foreground.neutralBaseDisabled),
-    }[color]);
-};
-var SIZE_TO_BUTTON_STYLE = {
-    large: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    width: 56px;\n    height: 56px;\n    padding: 16px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "], ["\n    width: 56px;\n    height: 56px;\n    padding: 16px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "]))),
-    medium: css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    width: 48px;\n    height: 48px;\n    padding: 14px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "], ["\n    width: 48px;\n    height: 48px;\n    padding: 14px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "]))),
-    small: css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    width: 36px;\n    height: 36px;\n    padding: 10px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "], ["\n    width: 36px;\n    height: 36px;\n    padding: 10px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "]))),
-    xsmall: css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    width: 24px;\n    height: 24px;\n    padding: 6px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "], ["\n    width: 24px;\n    height: 24px;\n    padding: 6px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "]))),
-};
-var SIZE_TO_LABEL_STYLE = {
-    large: css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 28px;\n  "], ["\n    font-size: 18px;\n    line-height: 28px;\n  "]))),
-    medium: css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 28px;\n  "], ["\n    font-size: 18px;\n    line-height: 28px;\n  "]))),
-    small: css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 28px;\n  "], ["\n    font-size: 18px;\n    line-height: 28px;\n  "]))),
-    xsmall: css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    font-size: 14px;\n    line-height: 22px;\n  "], ["\n    font-size: 14px;\n    line-height: 22px;\n  "]))),
-};
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=22-374&t=kTLv3t86qtGalHSS-0)
- */
-var SquareButton = React.forwardRef(function (props, ref) {
-    var className = props.className, _a = props.component, Component = _a === void 0 ? "span" : _a, disabled = props.disabled, color = props.color, size = props.size, icon = props.icon, label = props.label, fullWidth = props.fullWidth, onClick = props.onClick, other = __rest(props, ["className", "component", "disabled", "color", "size", "icon", "label", "fullWidth", "onClick"]);
-    return (_jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 8px;\n\n          width: ", ";\n        "], ["\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 8px;\n\n          width: ", ";\n        "])), fullWidth ? "100%" : "fit-content") }, { children: [_jsx(Button, __assign({ color: color, size: size, disabled: disabled, fullWidth: fullWidth, onClick: onClick }, { children: icon })), label && (_jsx(Label, __assign({ disabled: disabled, size: size }, { children: label })))] })));
-});
-var Button = styled.button(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  border-radius: 8px;\n  cursor: pointer;\n  &:disabled {\n    cursor: default;\n  }\n  ", "\n  ", "\n  ", "\n"], ["\n  border-radius: 8px;\n  cursor: pointer;\n  &:disabled {\n    cursor: default;\n  }\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
-    var theme = _a.theme, color = _a.color;
-    return COLOR_TO_BUTTON_STYLE(theme, color);
-}, function (_a) {
-    var size = _a.size;
-    return SIZE_TO_BUTTON_STYLE[size];
-}, function (_a) {
-    var fullWidth = _a.fullWidth;
-    return fullWidth && "width: 100%;";
-});
-var Label = styled.span(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  font-weight: 400;\n  color: ", ";\n  ", "\n"], ["\n  font-weight: 400;\n  color: ", ";\n  ", "\n"])), function (_a) {
-    var theme = _a.theme, disabled = _a.disabled;
-    return disabled
-        ? theme.color.foreground.neutralBaseDisabled
-        : theme.color.foreground.neutralBase;
-}, function (_a) {
-    var size = _a.size;
-    return SIZE_TO_LABEL_STYLE[size];
-});
-export default SquareButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;

package/dist/components/Switch.d.ts

@@ -1,19 +0,0 @@
-import React from "react";
-export type SwitchSize = "small" | "large";
-export interface SwitchProps {
-    className?: string;
-    /** 스위치 체크 상태 여부 */
-    checked: boolean;
-    /** 스위치 활성화 여부
-     * @default false */
-    disabled?: boolean;
-    /** 스위치 크기 */
-    size: SwitchSize;
-    /** 스위치 상태 변경 시 호출될 콜백 함수 */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
-}
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-1577&t=9sDLb4XIOdmF2VMc-0)
- */
-declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<any>>;
-export default Switch;

package/dist/components/Switch.js

@@ -1,59 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 styled from "@emotion/styled";
-import React from "react";
-import { Switch as MuiSwitch } from "@mui/material";
-import { css } from "@emotion/react";
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-1577&t=9sDLb4XIOdmF2VMc-0)
- */
-var Switch = React.forwardRef(function (props, ref) {
-    var className = props.className, checked = props.checked, _a = props.disabled, disabled = _a === void 0 ? false : _a, size = props.size, onChange = props.onChange, other = __rest(props, ["className", "checked", "disabled", "size", "onChange"]);
-    return (_jsx(StyledSwitch, __assign({}, other, { ref: ref, className: className, checked: checked, disabled: disabled, onChange: onChange, switchSize: size })));
-});
-var SIZE_TO_SWTICH_SIZE = {
-    large: {
-        width: "44px",
-        height: "22px",
-        translateX: "22px",
-        thumbSize: "18px",
-    },
-    small: {
-        width: "28px",
-        height: "16px",
-        translateX: "12px",
-        thumbSize: "12px",
-    },
-};
-var StyledSwitch = styled(MuiSwitch)(function (_a) {
-    var theme = _a.theme, switchSize = _a.switchSize;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: ", ";\n    height: ", ";\n    padding: 0; // \uAE30\uC874 Mui padding \uC18D\uC131 override\n    & .MuiSwitch-switchBase {\n      padding: 2px;\n      &.Mui-checked {\n        transform: translateX(", ");\n        color: ", ";\n        & + .MuiSwitch-track {\n          opacity: 1;\n          background-color: ", ";\n        }\n        &.Mui-disabled + .MuiSwitch-track {\n          opacity: 1;\n          background-color: ", ";\n        }\n      }\n      &.Mui-disabled + .MuiSwitch-track {\n        opacity: 1;\n        background-color: ", ";\n      }\n      &:hover {\n        background-color: inherit; // \uAE30\uC874 Mui hover \uC18D\uC131 override\n      }\n    }\n    .Mui-disabled .MuiSwitch-thumb {\n      filter: none;\n      box-shadow: none;\n      background-color: ", ";\n    }\n\n    .MuiSwitch-thumb {\n      box-shadow: none;\n      filter: drop-shadow(0px 2px 4px rgba(0, 35, 11, 0.2));\n      width: ", ";\n      height: ", ";\n      border-radius: 77px;\n      transition: width 300ms;\n    }\n    .MuiSwitch-track {\n      border-radius: 16px;\n      opacity: 1;\n      background-color: ", ";\n      box-sizing: border-box;\n    }\n  "], ["\n    width: ", ";\n    height: ", ";\n    padding: 0; // \uAE30\uC874 Mui padding \uC18D\uC131 override\n    & .MuiSwitch-switchBase {\n      padding: 2px;\n      &.Mui-checked {\n        transform: translateX(", ");\n        color: ", ";\n        & + .MuiSwitch-track {\n          opacity: 1;\n          background-color: ", ";\n        }\n        &.Mui-disabled + .MuiSwitch-track {\n          opacity: 1;\n          background-color: ", ";\n        }\n      }\n      &.Mui-disabled + .MuiSwitch-track {\n        opacity: 1;\n        background-color: ", ";\n      }\n      &:hover {\n        background-color: inherit; // \uAE30\uC874 Mui hover \uC18D\uC131 override\n      }\n    }\n    .Mui-disabled .MuiSwitch-thumb {\n      filter: none;\n      box-shadow: none;\n      background-color: ", ";\n    }\n\n    .MuiSwitch-thumb {\n      box-shadow: none;\n      filter: drop-shadow(0px 2px 4px rgba(0, 35, 11, 0.2));\n      width: ", ";\n      height: ", ";\n      border-radius: 77px;\n      transition: width 300ms;\n    }\n    .MuiSwitch-track {\n      border-radius: 16px;\n      opacity: 1;\n      background-color: ", ";\n      box-sizing: border-box;\n    }\n  "])), SIZE_TO_SWTICH_SIZE[switchSize].width, SIZE_TO_SWTICH_SIZE[switchSize].height, SIZE_TO_SWTICH_SIZE[switchSize].translateX, theme.color.foreground.neutralAlt, theme.color.background.primary, theme.color.background.primaryDisabled, theme.color.background.neutralAltDisabled, theme.color.foreground.neutralAltDisabled, SIZE_TO_SWTICH_SIZE[switchSize].thumbSize, SIZE_TO_SWTICH_SIZE[switchSize].thumbSize, theme.color.background.neutralAltActive);
-});
-export default Switch;
-var templateObject_1;

package/dist/components/Tag.d.ts

@@ -1,21 +0,0 @@
-import React from "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;
-}
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=42-869&t=HZXCHP0r0tbvMA6v-0)
- */
-declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<any>>;
-export default Tag;

package/dist/components/Tag.js

@@ -1,61 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 } from "@emotion/react";
-import styled from "@emotion/styled";
-import React from "react";
-import { CloseFillIcon } from "../icons/system";
-import { useTheme } from "@emotion/react";
-var COLOR_TO_STYLE = function (theme, color) {
-    return ({
-        default: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      box-sizing: border-box;\n      background: ", ";\n      border: 1px solid ", ";\n      color: ", ";\n    "], ["\n      box-sizing: border-box;\n      background: ", ";\n      border: 1px solid ", ";\n      color: ", ";\n    "])), theme.color.container.marbleContainer, theme.color.container.marbleOnContainer, theme.color.container.marbleOnContainer),
-        red: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      box-sizing: border-box;\n      background: ", ";\n      border: 1px solid ", ";\n      color: ", ";\n    "], ["\n      box-sizing: border-box;\n      background: ", ";\n      border: 1px solid ", ";\n      color: ", ";\n    "])), theme.color.container.dangerContainer, theme.color.container.dangerOnContainer, theme.color.container.dangerOnContainer),
-        teal: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      box-sizing: border-box;\n      background: ", ";\n      border: 1px solid ", ";\n      color: ", ";\n    "], ["\n      box-sizing: border-box;\n      background: ", ";\n      border: 1px solid ", ";\n      color: ", ";\n    "])), theme.color.container.infoContainer, theme.color.container.infoOnContainer, theme.color.container.infoOnContainer),
-        orange: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      box-sizing: border-box;\n      background: ", ";\n      border: 1px solid ", ";\n      color: ", ";\n    "], ["\n      box-sizing: border-box;\n      background: ", ";\n      border: 1px solid ", ";\n      color: ", ";\n    "])), theme.color.container.secondaryContainer, theme.color.container.secondaryOnContainer, theme.color.container.secondaryOnContainer),
-        blue: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      box-sizing: border-box;\n      background: ", ";\n      border: 1px solid ", ";\n      color: ", ";\n    "], ["\n      box-sizing: border-box;\n      background: ", ";\n      border: 1px solid ", ";\n      color: ", ";\n    "])), theme.color.container.primaryContainer, theme.color.container.primaryOnContainer, theme.color.container.primaryOnContainer),
-        green: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      box-sizing: border-box;\n      background: ", ";\n      border: 1px solid ", ";\n      color: ", ";\n    "], ["\n      box-sizing: border-box;\n      background: ", ";\n      border: 1px solid ", ";\n      color: ", ";\n    "])), theme.color.container.successContainer, theme.color.container.successOnContainer, theme.color.container.successOnContainer),
-        yellow: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      box-sizing: border-box;\n      background: ", ";\n      border: 1px solid ", ";\n      color: ", ";\n    "], ["\n      box-sizing: border-box;\n      background: ", ";\n      border: 1px solid ", ";\n      color: ", ";\n    "])), theme.color.container.warningContainer, theme.color.container.warningOnContainer, theme.color.container.warningOnContainer),
-        black: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n    "], ["\n      background: ", ";\n      color: ", ";\n    "])), theme.color.container.obsidianContainer, theme.color.container.obsidianOnContainer),
-    }[color]);
-};
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=42-869&t=HZXCHP0r0tbvMA6v-0)
- */
-var Tag = React.forwardRef(function (props, ref) {
-    var className = props.className, _a = props.component, Component = _a === void 0 ? "span" : _a, label = props.label, icon = props.icon, _b = props.color, color = _b === void 0 ? "default" : _b, close = props.close, onClick = props.onClick, other = __rest(props, ["className", "component", "label", "icon", "color", "close", "onClick"]);
-    var theme = useTheme();
-    return (_jsxs(Component, __assign({}, other, { ref: ref, className: className, css: [
-            css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n            box-sizing: border-box;\n            display: flex;\n            // flex\uAC00 \uD654\uBA74 \uC804\uCCB4\uB85C \uD655\uC7A5\uB418\uC9C0 \uC54A\uACE0 \uB0B4\uBD80\uC758 \uC544\uC774\uCF58\uACFC \uD14D\uC2A4\uD2B8\uB9CC \uD3EC\uD568\uD55C\uB2E4.\n            padding: 1px 8px;\n            align-items: center;\n            gap: 3px;\n            width: fit-content;\n            border-radius: 8px;\n\n            svg {\n              width: 14px;\n              height: 14px;\n            }\n          "], ["\n            box-sizing: border-box;\n            display: flex;\n            // flex\uAC00 \uD654\uBA74 \uC804\uCCB4\uB85C \uD655\uC7A5\uB418\uC9C0 \uC54A\uACE0 \uB0B4\uBD80\uC758 \uC544\uC774\uCF58\uACFC \uD14D\uC2A4\uD2B8\uB9CC \uD3EC\uD568\uD55C\uB2E4.\n            padding: 1px 8px;\n            align-items: center;\n            gap: 3px;\n            width: fit-content;\n            border-radius: 8px;\n\n            svg {\n              width: 14px;\n              height: 14px;\n            }\n          "]))),
-            COLOR_TO_STYLE(theme, color),
-            close
-                ? css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n                cursor: pointer;\n              "], ["\n                cursor: pointer;\n              "]))) : undefined,
-        ], onClick: onClick }, { children: [icon, _jsx("span", __assign({ css: css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n            font-weight: 400;\n            font-size: 12px;\n            line-height: 20px;\n          "], ["\n            font-weight: 400;\n            font-size: 12px;\n            line-height: 20px;\n          "]))) }, { children: label })), close && _jsx(StyledCloseFillIcon, {})] })));
-});
-var StyledCloseFillIcon = styled(CloseFillIcon)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  width: 10px;\n  height: 10px;\n"], ["\n  width: 10px;\n  height: 10px;\n"])));
-export default Tag;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;

package/dist/components/Tooltip.d.ts

@@ -1,26 +0,0 @@
-import React from "react";
-export interface TooltipProps {
-    className?: string;
-    /** 툴팁에 표시될 제목 텍스트 */
-    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)
- */
-declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<any>>;
-export default Tooltip;