@team-monolith/cds 0.2.12 → 0.3.0

package/dist/components/Button.js

@@ -1,72 +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 styled from "@emotion/styled";
-import React from "react";
-import { HOVER } from "../utils/hover";
-var COLOR_TO_BUTTON_STYLE = function (theme, color) {
-    return ({
-        primary: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n      }\n    "], ["\n      background: ", ";\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n      }\n    "])), theme.color.background.primary, theme.color.foreground.neutralAlt, HOVER(css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background: ", ";\n      "], ["\n        background: ", ";\n      "])), theme.color.background.primaryActive)), theme.color.background.primaryDisabled),
-        secondary: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n        color: ", ";\n      }\n    "], ["\n      background: ", ";\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),
-        danger: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n      }\n    "], ["\n      background: ", ";\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n      }\n    "])), theme.color.background.danger, theme.color.foreground.neutralAlt, HOVER(css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        background: ", ";\n      "], ["\n        background: ", ";\n      "])), theme.color.background.dangerActive)), theme.color.background.dangerDisabled),
-        textNeutral: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      background: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: none;\n        color: ", ";\n      }\n    "], ["\n      background: 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),
-        textDanger: css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      background: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: none;\n        color: ", ";\n      }\n    "], ["\n      background: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: none;\n        color: ", ";\n      }\n    "])), theme.color.foreground.danger, HOVER(css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        background: ", ";\n        color: ", ";\n      "], ["\n        background: ", ";\n        color: ", ";\n      "])), theme.color.background.neutralAltActive, theme.color.foreground.danger)), theme.color.foreground.dangerDisabled),
-        textPrimary: css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: none;\n        color: ", ";\n      }\n    "], ["\n      background: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: none;\n        color: ", ";\n      }\n    "])), theme.color.foreground.primary, HOVER(css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        background: ", ";\n        color: ", ";\n      "], ["\n        background: ", ";\n        color: ", ";\n      "])), theme.color.background.neutralAltActive, theme.color.foreground.primary)), theme.color.foreground.primaryDisabled),
-    }[color]);
-};
-var SIZE_TO_BUTTON_STYLE = {
-    large: css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    padding: 16px 20px;\n    gap: 10px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "], ["\n    padding: 16px 20px;\n    gap: 10px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "]))),
-    medium: css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    padding: 14px 16px;\n    gap: 8px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "], ["\n    padding: 14px 16px;\n    gap: 8px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "]))),
-    small: css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    padding: 10px 12px;\n    gap: 8px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "], ["\n    padding: 10px 12px;\n    gap: 8px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "]))),
-    xsmall: css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    padding: 6px 8px;\n    gap: 4px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "], ["\n    padding: 6px 8px;\n    gap: 4px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "]))),
-};
-var SIZE_TO_LABEL_STYLE = {
-    large: css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    font-size: 20px;\n    line-height: 24px;\n  "], ["\n    font-size: 20px;\n    line-height: 24px;\n  "]))),
-    medium: css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 20px;\n  "], ["\n    font-size: 18px;\n    line-height: 20px;\n  "]))),
-    small: css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    font-size: 14px;\n    line-height: 16px;\n  "], ["\n    font-size: 14px;\n    line-height: 16px;\n  "]))),
-    xsmall: css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    font-size: 14px;\n    line-height: 16px;\n  "], ["\n    font-size: 14px;\n    line-height: 16px;\n  "]))),
-};
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
- */
-var Button = React.forwardRef(function Button(props, ref) {
-    var className = props.className, _a = props.component, Component = _a === void 0 ? "button" : _a, disabled = props.disabled, color = props.color, size = props.size, startIcon = props.startIcon, endIcon = props.endIcon, label = props.label, onClick = props.onClick, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "onClick"]);
-    var theme = useTheme();
-    return (_jsxs(Component, __assign({}, other, { className: className, ref: ref, css: [
-            css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n          display: inline-flex;\n          align-items: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          cursor: pointer;\n          &:disabled {\n            cursor: default;\n            pointer-events: none;\n          }\n\n          font: inherit;\n          text-decoration: none;\n        "], ["\n          display: inline-flex;\n          align-items: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          cursor: pointer;\n          &:disabled {\n            cursor: default;\n            pointer-events: none;\n          }\n\n          font: inherit;\n          text-decoration: none;\n        "]))),
-            COLOR_TO_BUTTON_STYLE(theme, color),
-            SIZE_TO_BUTTON_STYLE[size],
-        ], disabled: disabled, onClick: onClick }, { children: [startIcon, _jsx(Label, __assign({ size: size }, { children: label })), endIcon] })));
-});
-var Label = styled.span(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-weight: 400;\n  white-space: nowrap;\n  ", "\n"], ["\n  font-weight: 400;\n  white-space: nowrap;\n  ", "\n"])), function (_a) {
-    var size = _a.size;
-    return SIZE_TO_LABEL_STYLE[size];
-});
-export default Button;
-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, templateObject_20, templateObject_21, templateObject_22;

package/dist/components/CheckboxInput.d.ts

@@ -1,27 +0,0 @@
-import * as React from "react";
-import { InputHTMLAttributes } from "react";
-export type CheckboxInputType = "default" | "checked" | "partial";
-export interface CheckboxInputProps {
-    className?: string;
-    /** 체크박스의 체크 여부(Controlled) */
-    checked: boolean;
-    /** 체크박스의 라벨 */
-    label?: string;
-    /** 체크박스의 하단 마진(8px) 여부 */
-    spacer?: boolean;
-    /** 체크박스의 비활성화 여부 */
-    disabled?: boolean;
-    /** 체크박스의 partial 여부. 체크여부가 우선합니다. */
-    partial?: boolean;
-    /** 체크박스 값 변경시 호출되는 함수 */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /** 체크박스 클릭시 호출되는 함수 */
-    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
-    /** HTML input 태그에 전달될 props */
-    inputProps?: InputHTMLAttributes<HTMLInputElement>;
-}
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-907&t=G4t39O7uXZvsGQ9u-0)
- */
-declare const CheckboxInput: React.ForwardRefExoticComponent<CheckboxInputProps & React.RefAttributes<any>>;
-export default CheckboxInput;

package/dist/components/CheckboxInput.js

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

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

@@ -1,72 +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 { 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

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

@@ -1,52 +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);
-};
-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

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

@@ -1,32 +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);
-};
-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

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