@team-monolith/cds 0.1.0

package/dist/components/CheckboxInput.js

@@ -0,0 +1,77 @@
+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 CHECKBOX_ICON_STYLE = function (theme, type, disabled) {
+    return {
+        default: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      rect {\n        fill: ", ";\n        stroke: ", ";\n      }\n      ", "\n    "], ["\n      rect {\n        fill: ", ";\n        stroke: ", ";\n      }\n      ", "\n    "])), theme.color.background.neutralBase, theme.color.background.neutralAltActive, disabled
+            ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            rect {\n              fill: ", ";\n              stroke: ", ";\n            }\n          "], ["\n            rect {\n              fill: ", ";\n              stroke: ", ";\n            }\n          "])), theme.color.background.neutralAlt, theme.color.background.neutralAltActive) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            input[type=\"checkbox\"]:hover + & {\n              rect {\n                stroke: ", ";\n              }\n            }\n          "], ["\n            input[type=\"checkbox\"]:hover + & {\n              rect {\n                stroke: ", ";\n              }\n            }\n          "])), theme.color.background.primary)),
+        checked: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      rect {\n        fill: ", ";\n        stroke: ", ";\n      }\n      path {\n        fill: ", ";\n      }\n      ", "\n    "], ["\n      rect {\n        fill: ", ";\n        stroke: ", ";\n      }\n      path {\n        fill: ", ";\n      }\n      ", "\n    "])), theme.color.background.primary, theme.color.background.primary, theme.color.background.neutralBase, disabled
+            ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            rect {\n              fill: ", ";\n              stroke: ", ";\n            }\n            path {\n              fill: ", ";\n            }\n          "], ["\n            rect {\n              fill: ", ";\n              stroke: ", ";\n            }\n            path {\n              fill: ", ";\n            }\n          "])), theme.color.background.neutralAlt, theme.color.background.primaryDisabled, theme.color.background.primaryDisabled) : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            input[type=\"checkbox\"]:hover + & {\n              rect {\n                fill: ", ";\n                stroke: ", ";\n              }\n            }\n          "], ["\n            input[type=\"checkbox\"]:hover + & {\n              rect {\n                fill: ", ";\n                stroke: ", ";\n              }\n            }\n          "])), theme.color.background.primaryActive, theme.color.background.primaryActive)),
+        partial: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      rect {\n        fill: ", ";\n        stroke: ", ";\n      }\n      rect + rect {\n        fill: ", ";\n        stroke: none;\n      }\n      ", "\n    "], ["\n      rect {\n        fill: ", ";\n        stroke: ", ";\n      }\n      rect + rect {\n        fill: ", ";\n        stroke: none;\n      }\n      ", "\n    "])), theme.color.background.neutralBase, theme.color.background.primary, theme.color.background.primary, disabled
+            ? css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n            rect {\n              fill: ", ";\n              stroke: ", ";\n            }\n            rect + rect {\n              fill: ", ";\n              stroke: none;\n            }\n          "], ["\n            rect {\n              fill: ", ";\n              stroke: ", ";\n            }\n            rect + rect {\n              fill: ", ";\n              stroke: none;\n            }\n          "])), theme.color.background.neutralAlt, theme.color.background.primaryDisabled, theme.color.background.primaryDisabled) : css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n            input[type=\"checkbox\"]:hover + & {\n              rect {\n                stroke: ", ";\n              }\n              rect + rect {\n                fill: ", ";\n                stroke: none;\n              }\n            }\n          "], ["\n            input[type=\"checkbox\"]:hover + & {\n              rect {\n                stroke: ", ";\n              }\n              rect + rect {\n                fill: ", ";\n                stroke: none;\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=36-907&t=G4t39O7uXZvsGQ9u-0)
+ */
+var CheckboxInput = React.forwardRef(function (props, ref) {
+    var className = props.className, checked = props.checked, label = props.label, spacer = props.spacer, disabled = props.disabled, partial = props.partial, onChange = props.onChange, onClick = props.onClick, other = __rest(props, ["className", "checked", "label", "spacer", "disabled", "partial", "onChange", "onClick"]);
+    if (!label) {
+        return _jsx(Checkbox, __assign({}, props, { ref: ref }));
+    }
+    var checkboxProps = { checked: checked, spacer: spacer, disabled: disabled, partial: partial, onChange: onChange };
+    return (_jsxs(Label, __assign({ className: className, ref: ref }, other, { children: [_jsx(Checkbox, __assign({}, checkboxProps)), _jsx("span", __assign({ css: css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n            margin-left: 8px;\n          "], ["\n            margin-left: 8px;\n          "]))) }, { children: label }))] })));
+});
+var Checkbox = React.forwardRef(function (props, ref) {
+    var className = props.className, checked = props.checked, partial = props.partial, _a = props.disabled, disabled = _a === void 0 ? false : _a, _b = props.spacer, spacer = _b === void 0 ? false : _b, onChange = props.onChange, onClick = props.onClick, inputProps = props.inputProps, other = __rest(props, ["className", "checked", "partial", "disabled", "spacer", "onChange", "onClick", "inputProps"]);
+    var type = checked
+        ? "checked"
+        : partial
+            ? "partial"
+            : "default";
+    return (_jsxs(CheckboxContainer, __assign({ className: className, spacer: spacer, disabled: disabled, ref: ref }, other, { children: [_jsx(StyledInput, __assign({ type: "checkbox" }, inputProps, { checked: checked, disabled: disabled, onClick: onClick, onChange: onChange })), _jsx(CheckboxIcon, { type: type, disabled: disabled })] })));
+});
+var CheckboxContainer = styled.span(function (_a) {
+    var spacer = _a.spacer, disabled = _a.disabled;
+    return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: inline-block;\n    position: relative;\n    width: 16px;\n    height: 16px;\n    cursor: ", ";\n    margin-bottom: ", ";\n  "], ["\n    display: inline-block;\n    position: relative;\n    width: 16px;\n    height: 16px;\n    cursor: ", ";\n    margin-bottom: ", ";\n  "])), disabled ? "default" : "pointer", spacer ? "8px" : "0");
+});
+var StyledInput = styled.input(templateObject_12 || (templateObject_12 = __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);
+var Label = styled.label(templateObject_13 || (templateObject_13 = __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 CheckboxIcon = 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: CHECKBOX_ICON_STYLE(theme, props.type, props.disabled) }, { children: [_jsx("rect", { x: "0.5", y: "0.5", width: "15", height: "15", rx: "1.5", fill: "currentColor", stroke: "currentColor" }), props.type === "checked" && (_jsx("path", { d: "M7.10545 12.6041L7.08783 12.6217L2.68799 8.22185L4.12067 6.78917L7.10551 9.77402L11.8795 5L13.3122 6.43268L7.12313 12.6218L7.10545 12.6041Z", fill: "currentColor" })), props.type === "partial" && (_jsx("rect", { x: "4", y: "4", width: "8", height: "8", fill: "currentColor" }))] })));
+};
+export default CheckboxInput;
+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;

package/dist/components/Input.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { InputBaseColor, InputBaseProps, InputBaseSize } from "./InputBase";
+export type InputColor = InputBaseColor;
+export type InputSize = InputBaseSize;
+export interface InputProps extends InputBaseProps {
+    /** Input 컴포넌트 상단에 노출될 문자열 */
+    label?: string;
+    /** Input 컴포넌트 하단에 노출될 문자열 */
+    hintText?: string;
+    /** hint 영역 좌측에 노출될 아이콘 */
+    hintIcon?: React.ReactNode;
+}
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=26-10284&t=HnIfxpf8uR6WmzMW-0)
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<any>>;
+export default Input;

package/dist/components/Input.js

@@ -0,0 +1,72 @@
+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 { InputBase, } from "./InputBase";
+var COLOR_TO_HINT_STYLES = function (theme, color, disabled) {
+    return disabled
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), theme.color.foreground.neutralBaseDisabled) : {
+        default: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), theme.color.foreground.neutralBaseDisabled),
+        activePrimary: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), theme.color.foreground.neutralBaseDisabled),
+        activeDanger: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), theme.color.foreground.danger),
+        activeSuccess: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), theme.color.foreground.success),
+    }[color];
+};
+var SIZE_TO_FONT_STYLES = function (size) {
+    return ({
+        small: css(templateObject_6 || (templateObject_6 = __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_7 || (templateObject_7 = __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_8 || (templateObject_8 = __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]);
+};
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=26-10284&t=HnIfxpf8uR6WmzMW-0)
+ */
+var Input = React.forwardRef(function (props, ref) {
+    var label = props.label, hintText = props.hintText, hintIcon = props.hintIcon, className = props.className, color = props.color, size = props.size, placeholder = props.placeholder, disabled = props.disabled, startIcon = props.startIcon, startLabel = props.startLabel, endLabel = props.endLabel, endIcon = props.endIcon, inputProps = props.inputProps, inputRef = props.inputRef, fullWidth = props.fullWidth, onChange = props.onChange, onClear = props.onClear, defaultValue = props.defaultValue, value = props.value, other = __rest(props, ["label", "hintText", "hintIcon", "className", "color", "size", "placeholder", "disabled", "startIcon", "startLabel", "endLabel", "endIcon", "inputProps", "inputRef", "fullWidth", "onChange", "onClear", "defaultValue", "value"]);
+    return (_jsxs(InputWrapper, __assign({ className: props.className, size: props.size, fullWidth: props.fullWidth, ref: ref }, other, { children: [label ? (_jsxs(Label, __assign({ disabled: props.disabled }, { children: [label, " ", _jsx(InputBase, __assign({}, props))] }))) : (_jsx(InputBase, __assign({}, props))), hintText && (_jsxs(Hint, __assign({ color: props.color, disabled: props.disabled }, { children: [hintIcon, hintText] })))] })));
+});
+var InputWrapper = styled.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: 8px;\n  ", "\n  ", "\n\n  position: relative;\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: 8px;\n  ", "\n  ", "\n\n  position: relative;\n"])), function (_a) {
+    var size = _a.size;
+    return SIZE_TO_FONT_STYLES(size);
+}, function (_a) {
+    var fullWidth = _a.fullWidth;
+    return fullWidth && "width: 100%;";
+});
+var Label = styled.label(templateObject_11 || (templateObject_11 = __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_10 || (templateObject_10 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), theme.color.foreground.neutralBaseDisabled);
+});
+var Hint = styled.div(function (_a) {
+    var theme = _a.theme, color = _a.color, disabled = _a.disabled;
+    return css(templateObject_12 || (templateObject_12 = __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));
+});
+export default Input;
+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/InputBase.d.ts

@@ -0,0 +1,42 @@
+import { InputHTMLAttributes } from "react";
+export type InputBaseColor = "default" | "activePrimary" | "activeDanger" | "activeSuccess";
+export type InputBaseSize = "large" | "medium" | "small";
+export interface InputBaseProps {
+    className?: string;
+    /** 컴포넌트 색상 */
+    color: InputBaseColor;
+    /** 컴포넌트 크기 */
+    size: InputBaseSize;
+    /** 입력되기 전 Input 컴포넌트에 노출될 문자열 */
+    placeholder?: string;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** Input 컴포넌트 내의 좌측 영역에 노출될 아이콘 */
+    startIcon?: React.ReactNode;
+    /** Input 컴포넌트 내의 좌측 영역에 노출될 텍스트.
+     * `startIcon` 보다 우측에 노출됩니다. */
+    startLabel?: string;
+    /** Input 컴포넌트 내의 우측 영역에 노출될 텍스트.
+     * `endIcon` 보다 좌측에 노출됩니다. */
+    endLabel?: string;
+    /** Input 컴포넌트 내의 우측 영역에 노출될 아이콘 */
+    endIcon?: React.ReactNode;
+    /** HTML input 태그에 전달될 ref */
+    inputRef?: React.LegacyRef<HTMLInputElement>;
+    /** HTML input 태그에 전달될 props */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /** true일 경우, Input이 상위 요소의 전체 길이를 차지하게 됩니다. */
+    fullWidth?: boolean;
+    /** 값이 변경될때 호출될 콜백 함수 */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Clear Button을 클릭했을 때의 콜백 함수.
+     * 설정하면, Input 컴포넌트 내의 우측 영역에 Clear Button이 노출됩니다.
+     */
+    onClear?: () => void;
+    /** input의 value의 초기값 (UnControlled Component) */
+    defaultValue?: any;
+    /** input의 value (Controlled Component) */
+    value?: any;
+}
+export declare function InputBase(props: InputBaseProps): React.ReactElement;

package/dist/components/InputBase.js

@@ -0,0 +1,52 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { CloseCircleFillIcon } from "../icons/system";
+import { RESET_BUTTON } from "../utils/reset";
+var COLOR_TO_INPUT_STYLES = function (theme, color, disabled) {
+    if (disabled) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border: none;\n      background: ", ";\n      color: ", ";\n    "], ["\n      border: none;\n      background: ", ";\n      color: ", ";\n    "])), theme.color.foreground.neutralBaseDisabled, theme.color.background.neutralAlt);
+    }
+    return {
+        default: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      border: none;\n      background: ", ";\n      color: ", ";\n    "], ["\n      border: none;\n      background: ", ";\n      color: ", ";\n    "])), theme.color.background.neutralAlt, theme.color.foreground.neutralBase),
+        activePrimary: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      border: 2px solid ", ";\n      background: ", ";\n      color: ", ";\n    "], ["\n      border: 2px solid ", ";\n      background: ", ";\n      color: ", ";\n    "])), theme.color.foreground.primary, theme.color.background.neutralBase, theme.color.foreground.neutralBase),
+        activeDanger: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      border: 2px solid ", ";\n      background: ", ";\n      color: ", ";\n    "], ["\n      border: 2px solid ", ";\n      background: ", ";\n      color: ", ";\n    "])), theme.color.foreground.danger, theme.color.background.neutralBase, theme.color.foreground.neutralBase),
+        activeSuccess: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      border: 2px solid ", ";\n      background: ", ";\n      color: ", ";\n    "], ["\n      border: 2px solid ", ";\n      background: ", ";\n      color: ", ";\n    "])), theme.color.foreground.success, theme.color.background.neutralBase, theme.color.foreground.neutralBase),
+    }[color];
+};
+var SIZE_TO_STYLES = function (size) {
+    return ({
+        small: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n      width: 300px;\n      height: 36px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n      width: 300px;\n      height: 36px;\n    "]))),
+        medium: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: 12px;\n      padding-bottom: 12px;\n      width: 375px;\n      height: 48px;\n    "], ["\n      padding-top: 12px;\n      padding-bottom: 12px;\n      width: 375px;\n      height: 48px;\n    "]))),
+        large: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding-top: 14px;\n      padding-bottom: 14px;\n      width: 375px;\n      height: 56px;\n    "], ["\n      padding-top: 14px;\n      padding-bottom: 14px;\n      width: 375px;\n      height: 56px;\n    "]))),
+    }[size]);
+};
+export function InputBase(props) {
+    var className = props.className, color = props.color, size = props.size, placeholder = props.placeholder, _a = props.disabled, disabled = _a === void 0 ? false : _a, startIcon = props.startIcon, startLabel = props.startLabel, endLabel = props.endLabel, endIcon = props.endIcon, inputProps = props.inputProps, inputRef = props.inputRef, _b = props.fullWidth, fullWidth = _b === void 0 ? false : _b, onChange = props.onChange, onClear = props.onClear, defaultValue = props.defaultValue, value = props.value;
+    return (_jsxs(InputContainer, __assign({ className: className, disabled: disabled, color: color, inputSize: size, fullWidth: fullWidth }, { children: [startIcon, startLabel && _jsx("span", { children: startLabel }), _jsx(StyledInput, __assign({}, inputProps, { ref: inputRef, onChange: onChange, placeholder: placeholder, disabled: disabled, defaultValue: defaultValue, value: value })), endLabel && _jsx("span", { children: endLabel }), endIcon, onClear && (_jsx(ClearButton, __assign({ onClick: onClear, disabled: disabled }, { children: _jsx(CloseCircleFillIcon, {}) })))] })));
+}
+var InputContainer = styled.div(function (_a) {
+    var theme = _a.theme, color = _a.color, inputSize = _a.inputSize, disabled = _a.disabled, fullWidth = _a.fullWidth;
+    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    box-sizing: border-box;\n    padding: 14px 16px;\n    border-radius: 8px;\n    ", "\n    ", "\n    ", " // InputWrapper\uC758 width\uB97C \uB530\uB985\uB2C8\uB2E4.\n  "], ["\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    box-sizing: border-box;\n    padding: 14px 16px;\n    border-radius: 8px;\n    ", "\n    ", "\n    ", " // InputWrapper\uC758 width\uB97C \uB530\uB985\uB2C8\uB2E4.\n  "])), COLOR_TO_INPUT_STYLES(theme, color, disabled), SIZE_TO_STYLES(inputSize), fullWidth && "width: inherit;");
+});
+var StyledInput = styled.input(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    appearance: none;\n    flex: 1;\n    min-width: 0;\n    border: none;\n    padding: 0;\n    background-color: transparent;\n    font: inherit;\n    color: currentColor;\n\n    &:focus-visible {\n      outline: none;\n    }\n    &::placeholder {\n      color: ", ";\n    }\n  "], ["\n    appearance: none;\n    flex: 1;\n    min-width: 0;\n    border: none;\n    padding: 0;\n    background-color: transparent;\n    font: inherit;\n    color: currentColor;\n\n    &:focus-visible {\n      outline: none;\n    }\n    &::placeholder {\n      color: ", ";\n    }\n  "])), theme.color.foreground.neutralBaseDisabled);
+});
+var ClearButton = styled.button(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", "\n  color: currentColor;\n  &:not(:disabled) {\n    cursor: pointer;\n  }\n  display: flex;\n  align-items: center;\n"], ["\n  ", "\n  color: currentColor;\n  &:not(:disabled) {\n    cursor: pointer;\n  }\n  display: flex;\n  align-items: center;\n"])), RESET_BUTTON);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/components/Pagination.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+export interface PaginationProps {
+    className?: string;
+    /** 시작과 끝에 오는 페이지의 수 */
+    boundaryCount?: number;
+    /** 전체 페이지의 수 */
+    count?: number;
+    /** 기본 페이지 (UnControlled) */
+    defaultPage?: number;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 다음 페이지로 이동하는 버튼 숨김여부 */
+    hideNextButton?: boolean;
+    /** 이전 페이지로 이동하는 버튼 숨김여부 */
+    hidePrevButton?: boolean;
+    /** 페이지가 변경되었을 때 콜백함수 */
+    onChange?: (event: React.ChangeEvent<unknown>, page: number) => void;
+    /** 현재 페이지 전후로 나타나는 페이지의 수 */
+    siblingCount?: number;
+    /** 현재 페이지 */
+    page: number;
+}
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=35-798&t=6OdVgm0hiYaq5PFw-0)
+ */
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<any>>;
+export default Pagination;

package/dist/components/Pagination.js

@@ -0,0 +1,32 @@
+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);
+};
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import * as React from "react";
+import styled from "@emotion/styled";
+import { Pagination as MuiPagination } from "@mui/material";
+import { HOVER } from "../utils/hover";
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=35-798&t=6OdVgm0hiYaq5PFw-0)
+ */
+var Pagination = React.forwardRef(function (props, ref) { return (_jsx(StyledPagination, __assign({ siblingCount: 2, shape: "rounded" }, props, { ref: ref }))); });
+var StyledPagination = styled(MuiPagination)(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    &.MuiPagination-root {\n      & .MuiPagination-ul {\n        li {\n          width: 32px;\n          height: 32px;\n          margin-left: 4px;\n          margin-right: 4px;\n          button {\n            padding: 0;\n            margin: 0;\n          }\n        }\n      }\n      & .MuiPaginationItem-root {\n        ", "\n      }\n      & .MuiPaginationItem-text {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        text-align: center;\n        border-radius: 8px;\n        color: ", ";\n        font-weight: 400;\n        font-size: 14px;\n        line-height: 24px;\n        padding: 1px 7px;\n        margin: 0;\n      }\n      & .Mui-selected {\n        border: 2px solid ", ";\n        background-color: transparent;\n        color: ", ";\n        font-weight: 700;\n        ", "\n      }\n      & .Mui-disabled {\n        background-color: transparent;\n        color: ", ";\n      }\n      & .Mui-disabled.Mui-selected {\n        border: 2px solid ", ";\n        background-color: transparent;\n        color: ", ";\n      }\n      & .MuiPaginationItem-ellipsis {\n        ", "\n      }\n    }\n  "], ["\n    &.MuiPagination-root {\n      & .MuiPagination-ul {\n        li {\n          width: 32px;\n          height: 32px;\n          margin-left: 4px;\n          margin-right: 4px;\n          button {\n            padding: 0;\n            margin: 0;\n          }\n        }\n      }\n      & .MuiPaginationItem-root {\n        ", "\n      }\n      & .MuiPaginationItem-text {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        text-align: center;\n        border-radius: 8px;\n        color: ", ";\n        font-weight: 400;\n        font-size: 14px;\n        line-height: 24px;\n        padding: 1px 7px;\n        margin: 0;\n      }\n      & .Mui-selected {\n        border: 2px solid ", ";\n        background-color: transparent;\n        color: ", ";\n        font-weight: 700;\n        ", "\n      }\n      & .Mui-disabled {\n        background-color: transparent;\n        color: ", ";\n      }\n      & .Mui-disabled.Mui-selected {\n        border: 2px solid ", ";\n        background-color: transparent;\n        color: ", ";\n      }\n      & .MuiPaginationItem-ellipsis {\n        ", "\n      }\n    }\n  "])), HOVER(css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          background-color: ", ";\n        "], ["\n          background-color: ", ";\n        "])), theme.color.background.neutralAlt)), theme.color.foreground.neutralBase, theme.color.background.primary, theme.color.background.primary, HOVER(css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background-color: transparent;\n        "], ["\n          background-color: transparent;\n        "])))), theme.color.foreground.neutralBaseDisabled, theme.color.background.primaryDisabled, theme.color.background.primaryDisabled, HOVER(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          background-color: transparent;\n        "], ["\n          background-color: transparent;\n        "])))));
+});
+export default Pagination;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/PinInput.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+export type PinInputColor = "default" | "activePrimary" | "activeDanger" | "activeSuccess";
+export type PinInputSize = "large" | "medium" | "small";
+export interface PinInputProps {
+    className?: string;
+    /** `true` 값일 때 첫번째 Input에 자동으로 포커싱합니다. */
+    autoFocus?: boolean;
+    /** 컴포넌트 크기 */
+    size: PinInputSize;
+    /** 입력되기 전 PinInput 컴포넌트에 노출될 문자열 */
+    placeholder?: string;
+    /** Input 컴포넌트 상단에 노출될 문자열 */
+    label?: string;
+    /** Input 컴포넌트 하단에 노출될 문자열 */
+    hintText?: string;
+    /** hint 영역 좌측에 노출될 아이콘 */
+    hintIcon?: React.ReactNode;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 에러 상태 여부 */
+    error?: boolean;
+    /** 성공 상태 여부 */
+    positive?: boolean;
+    /** 값이 변경될때 호출될 콜백 함수 */
+    onChange: (e: {
+        values: string[];
+        event: React.ChangeEvent<HTMLInputElement>;
+    }) => void;
+    /** PinInput의 value (Controlled Component) */
+    values: string[];
+}
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=26-11031&t=n7a8XP4k8R2TGmiO-0)
+ */
+declare const PinInput: React.ForwardRefExoticComponent<PinInputProps & React.RefAttributes<any>>;
+export default PinInput;

package/dist/components/PinInput.js

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

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