@team-monolith/cds 0.1.0

package/dist/components/RadioInput.js

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,26 @@
+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;

package/dist/components/Tooltip.js

@@ -0,0 +1,50 @@
+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, Fragment as _Fragment, 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 { Tooltip as MuiTooltip, } from "@mui/material";
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=172-626&t=aFkKTFgWq2xFFGC5-0)
+ */
+var Tooltip = React.forwardRef(function (props, ref) {
+    var title = props.title, text = props.text, children = props.children, restProps = __rest(props, ["title", "text", "children"]);
+    return (_jsx(StyledTooltip, __assign({ ref: ref, title: _jsxs(_Fragment, { children: [title && _jsx(TitleDiv, { children: title }), text] }) }, restProps, { children: children })));
+});
+// https://mui.com/material-ui/react-tooltip/#customization
+var StyledTooltip = styled(function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(MuiTooltip, __assign({}, props, { classes: { popper: className } })));
+})(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .MuiTooltip-tooltip {\n      background: ", ";\n      border-radius: 8px;\n      padding: 6px 10px;\n\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n\n      color: ", ";\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 22px;\n    }\n  "], ["\n    .MuiTooltip-tooltip {\n      background: ", ";\n      border-radius: 8px;\n      padding: 6px 10px;\n\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n\n      color: ", ";\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 22px;\n    }\n  "])), theme.color.foreground.neutralBase, theme.color.background.neutralBase);
+});
+var TitleDiv = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: 700;\n"], ["\n  font-weight: 700;\n"])));
+export default Tooltip;
+var templateObject_1, templateObject_2;

package/dist/foundation/color.d.ts

@@ -0,0 +1,75 @@
+declare const _default: {
+    blue10: string;
+    priamry09: string;
+    blue08: string;
+    blue07: string;
+    blue06: string;
+    blue05: string;
+    blue04: string;
+    blue03: string;
+    blue02: string;
+    blue01: string;
+    orange10: string;
+    orange09: string;
+    orange08: string;
+    orange07: string;
+    orange06: string;
+    orange05: string;
+    orange04: string;
+    orange03: string;
+    orange02: string;
+    orange01: string;
+    teal10: string;
+    teal09: string;
+    teal08: string;
+    teal07: string;
+    teal06: string;
+    teal05: string;
+    teal04: string;
+    teal03: string;
+    teal02: string;
+    teal01: string;
+    yellow10: string;
+    yellow09: string;
+    yellow08: string;
+    yellow07: string;
+    yellow06: string;
+    yellow05: string;
+    yellow04: string;
+    yellow03: string;
+    yellow02: string;
+    yellow01: string;
+    green10: string;
+    green09: string;
+    green08: string;
+    green07: string;
+    green06: string;
+    green05: string;
+    green04: string;
+    green03: string;
+    green02: string;
+    green01: string;
+    red10: string;
+    red09: string;
+    red08: string;
+    red07: string;
+    red06: string;
+    red05: string;
+    red04: string;
+    red03: string;
+    red02: string;
+    red01: string;
+    black: string;
+    grey10: string;
+    grey09: string;
+    grey08: string;
+    grey07: string;
+    grey06: string;
+    grey05: string;
+    grey04: string;
+    grey03: string;
+    grey02: string;
+    grey01: string;
+    white: string;
+};
+export default _default;

package/dist/foundation/color.js

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

package/dist/foundation/shadows.d.ts

@@ -0,0 +1,9 @@
+declare const shadows: {
+    shadow02: string;
+    shadow04: string;
+    shadow08: string;
+    shadow16: string;
+    shadow32: string;
+    shadow64: string;
+};
+export default shadows;

package/dist/foundation/shadows.js

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