@team-monolith/cds 1.99.9 → 1.99.11

package/dist/components/OverflowTooltip.d.ts

@@ -2,7 +2,7 @@
 /** @jsxImportSource @emotion/react */
 import { SerializedStyles } from "@emotion/react";
 import { TooltipProps } from "./Tooltip";
-interface OverflowTooltipProps extends Omit<TooltipProps, "open" | "onOpen" | "onClose" | "children" | "tooltipId"> {
+interface OverflowTooltipProps extends Omit<TooltipProps, "open" | "onOpen" | "onClose" | "children"> {
     className?: string;
     childrenCss?: SerializedStyles;
 }

package/dist/components/OverflowTooltip.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import styled from "@emotion/styled";
-import { useRef, useState, useMemo } from "react";
+import { useRef, useState } from "react";
 import { Tooltip } from "./Tooltip";
-import { uid } from "uid";
 /**
  * 인자로 주어진 텍스트를 그립니다.
  * 공간이 부족하면 ...으로 표시하고 툴팁으로 전체 내용을 노출합니다.
@@ -10,7 +9,6 @@ import { uid } from "uid";
 export function OverflowTooltip(props) {
     const tooltipRef = useRef(null);
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-    const tooltipId = useMemo(() => `tooltip-${uid()}`, []);
     const getIsOverflow = () => {
         if (tooltipRef.current) {
             return tooltipRef.current.scrollWidth > tooltipRef.current.offsetWidth;
@@ -25,7 +23,7 @@ export function OverflowTooltip(props) {
     const handleClose = () => {
         setIsTooltipOpen(false);
     };
-    return (_jsx(Tooltip, Object.assign({ tooltipId: tooltipId, open: isTooltipOpen, onOpen: handleOpen, onClose: handleClose }, props, { children: _jsx(OverflowDiv, Object.assign({ css: props.childrenCss, ref: tooltipRef, onMouseOver: handleOpen, "aria-labelledby": tooltipId }, { children: props.text })) })));
+    return (_jsx(Tooltip, Object.assign({ open: isTooltipOpen, onOpen: handleOpen, onClose: handleClose }, props, { children: _jsx(OverflowDiv, Object.assign({ css: props.childrenCss, ref: tooltipRef, onMouseOver: handleOpen }, { children: props.text })) })));
 }
 const OverflowDiv = styled.div `
   overflow: hidden;

package/dist/components/SquareButton.js

@@ -176,9 +176,9 @@ const SIZE_TO_LABEL_STYLE = {
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=22-374&t=kTLv3t86qtGalHSS-0)
  */
 export const SquareButton = React.forwardRef(function SquareButton(props, ref) {
-    const { className, component: Component = "button", disabled, color, size, icon, label, fullWidth, loading = false, buttonProps } = props, other = __rest(props, ["className", "component", "disabled", "color", "size", "icon", "label", "fullWidth", "loading", "buttonProps"]);
+    const { className, component: Component = "button", disabled, color, size, icon, label, fullWidth, onClick, loading = false, buttonProps } = props, other = __rest(props, ["className", "component", "disabled", "color", "size", "icon", "label", "fullWidth", "onClick", "loading", "buttonProps"]);
     const theme = useTheme();
-    return (_jsxs("span", Object.assign({ className: className, css: css `
+    return (_jsxs("span", Object.assign({}, other, { className: className, css: css `
           display: flex;
           flex-direction: column;
           align-items: center;
@@ -186,15 +186,12 @@ export const SquareButton = React.forwardRef(function SquareButton(props, ref) {
           width: ${fullWidth ? "100%" : "fit-content"};
         ` }, { children: [_jsx(Component, Object.assign({ type: Component === "button" || Component === "input"
                     ? "button"
-                    : undefined }, other, buttonProps, { ref: ref, css: [
+                    : undefined }, buttonProps, { ref: ref, css: [
                     COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled || loading)),
                     SIZE_TO_BUTTON_STYLE[size],
                     css `
-              display: inline-flex;
-              align-items: center;
-              justify-content: center;
               border: none;
-              width: ${fullWidth ? "100%" : "fit-content"};
+              ${fullWidth && `width: 100%;`}
               ${disabled || loading
                         ? css `
                     cursor: default;
@@ -204,7 +201,7 @@ export const SquareButton = React.forwardRef(function SquareButton(props, ref) {
                     cursor: pointer;
                   `}
             `,
-                ], disabled: disabled || loading }, { children: loading ? _jsx(Spinner, {}) : icon })), label && (_jsx(Label, Object.assign({ disabled: disabled || loading, size: size }, { children: label })))] })));
+                ], disabled: disabled || loading, onClick: onClick }, { children: loading ? _jsx(Spinner, {}) : icon })), label && (_jsx(Label, Object.assign({ disabled: disabled || loading, size: size }, { children: label })))] })));
 });
 const Label = styled.span `
   font-weight: 400;

package/dist/components/Switch.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { InputHTMLAttributes } from "react";
 export type SwitchSize = "small" | "large";
 export interface SwitchProps {
     className?: string;
@@ -11,6 +11,8 @@ export interface SwitchProps {
     size: SwitchSize;
     /** 스위치 상태 변경 시 호출될 콜백 함수 */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    /** HTML input 태그에 전달될 props */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
 }
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-1577&t=9sDLb4XIOdmF2VMc-0)

package/dist/components/Switch.js

@@ -19,8 +19,8 @@ import { css } from "@emotion/react";
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-1577&t=9sDLb4XIOdmF2VMc-0)
  */
 export const Switch = React.forwardRef(function Switch(props, ref) {
-    const { className, checked, disabled = false, size, onChange } = props, other = __rest(props, ["className", "checked", "disabled", "size", "onChange"]);
-    return (_jsx(StyledSwitch, Object.assign({}, other, { ref: ref, className: className, checked: checked, disabled: disabled, onChange: onChange, switchSize: size })));
+    const { className, checked, disabled = false, size, onChange, inputProps } = props, other = __rest(props, ["className", "checked", "disabled", "size", "onChange", "inputProps"]);
+    return (_jsx(StyledSwitch, Object.assign({}, other, { ref: ref, className: className, checked: checked, disabled: disabled, onChange: onChange, switchSize: size, inputProps: inputProps })));
 });
 const SIZE_TO_SWTICH_SIZE = {
     large: {

package/dist/components/Tooltip.d.ts

@@ -21,12 +21,6 @@ export interface TooltipProps {
     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;
-    /**
-     * 툴팁의 고유 id입니다.
-     * 이 id는 툴팁을 띄우는 요소에 aria-labelledby 속성을 통해 연결되어,
-     * 스크린 리더 등의 보조 기술이 툴팁 내용을 올바르게 인식하도록 돕습니다.
-     */
-    tooltipId: string;
 }
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=172-626&t=aFkKTFgWq2xFFGC5-0)

package/dist/components/Tooltip.js

@@ -45,9 +45,9 @@ function addTabIndexIfNeeded(element) {
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=172-626&t=aFkKTFgWq2xFFGC5-0)
  */
 export const Tooltip = React.forwardRef(function Tooltip(props, ref) {
-    const { tooltipId, title, text, children } = props, restProps = __rest(props, ["tooltipId", "title", "text", "children"]);
+    const { title, text, children } = props, restProps = __rest(props, ["title", "text", "children"]);
     const focusableChildren = addTabIndexIfNeeded(children);
-    return (_jsx(StyledTooltip, Object.assign({ id: tooltipId, ref: ref, title: 
+    return (_jsx(StyledTooltip, Object.assign({ ref: ref, title: 
         // title이 없고 text가 null인 경우 툴팁을 표시하지 않음
         !title && text === null ? null : (_jsxs(_Fragment, { children: [title && _jsx(TitleDiv, { children: title }), text] })), describeChild: true }, restProps, { children: focusableChildren })));
 });

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SettingForm/FormSolution.js

@@ -7,12 +7,9 @@ import { AlertFillIcon, DeleteBinLineIcon, ErrorWarningFillIcon, } from "../../.
 import { SquareButton } from "../../../../../components/SquareButton";
 import { Tooltip } from "../../../../../components/Tooltip";
 import { TextTypeDropdown } from "./TextTypeDropdown";
-import { uid } from "uid";
-import { useMemo } from "react";
 export function FormSolution(props) {
     const { index, control, rules, onDelete } = props;
     const theme = useTheme();
-    const tooltipId = useMemo(() => `tooltip-${uid()}`, []);
     return (_jsx(Controller, { name: `solutions.${index}.value`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => {
             const disabled = (error === null || error === void 0 ? void 0 : error.type) === "enabled";
             return (_jsx(Input, { size: "small", color: invalid ? "activeDanger" : "default", onChange: onChange, disabled: disabled, value: value, hintIcon: !disabled && invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: !disabled ? error === null || error === void 0 ? void 0 : error.message : undefined, placeholder: "\uC548\uB155\uD558\uC138\uC694", fullWidth: true, css: css `
@@ -24,8 +21,8 @@ export function FormSolution(props) {
                   gap: 4px;
                 ` }, { children: [onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, buttonProps: {
                                 "aria-label": "삭제",
-                            } })), disabled && (_jsx(Tooltip, Object.assign({ tooltipId: tooltipId, text: _jsxs("span", { children: ["\uC785\uB825 \uCE78 \uC124\uC815\uC774 '\uAE00\uC790 \uC218\uB300\uB85C'\uC778 \uACBD\uC6B0", _jsx("br", {}), "\uC815\uB2F5\uC744 \uD558\uB098\uB9CC \uB4F1\uB85D\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4."] }) }, { children: _jsx(SquareButton, { color: "danger", size: "xsmall", icon: _jsx(AlertFillIcon, { color: theme.color.foreground.neutralAlt }), disabled: true, buttonProps: {
+                            } })), disabled && (_jsx(Tooltip, Object.assign({ text: _jsxs("span", { children: ["\uC785\uB825 \uCE78 \uC124\uC815\uC774 '\uAE00\uC790 \uC218\uB300\uB85C'\uC778 \uACBD\uC6B0", _jsx("br", {}), "\uC815\uB2F5\uC744 \uD558\uB098\uB9CC \uB4F1\uB85D\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4."] }) }, { children: _jsx(SquareButton, { color: "danger", size: "xsmall", icon: _jsx(AlertFillIcon, { color: theme.color.foreground.neutralAlt }), disabled: true, buttonProps: {
                                     "aria-label": "정답 등록 불가",
-                                }, "aria-labelledby": tooltipId }) })))] })) }));
+                                } }) })))] })) }));
         } }));
 }

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SettingForm/SettingForm.js

@@ -13,13 +13,9 @@ import { FormSegmentedControl } from "./FormSegmentedControl";
 import { FormPlaceholder } from "./FormPlaceholder";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey } from "lexical";
-import { uid } from "uid";
-import { useMemo } from "react";
 export function SettingForm(props) {
     const { solutions, showCharacterNumber, placeholder, nodeKey, onClose, caseSensitive, ignoreWhitespace, } = props;
     const [editor] = useLexicalComposerContext();
-    const inputTooltipId = useMemo(() => `tooltip-${uid()}`, []);
-    const placeholderTooltipId = useMemo(() => `tooltip-${uid()}`, []);
     const { control, handleSubmit, watch, trigger } = useForm({
         mode: "all",
         defaultValues: {
@@ -77,16 +73,16 @@ export function SettingForm(props) {
             ` }, { children: [_jsx(AlarmWarningFillIcon, { color: theme.color.foreground.neutralBaseDisabled, css: css `
                 width: 14px;
                 height: 14px;
-              ` }), _jsx(Label, { children: "\uAC00\uB2A5\uD55C \uC815\uB2F5\uC744 \uBAA8\uB450 \uCD94\uAC00\uD574\uC57C \uC6D0\uD65C\uD558\uAC8C \uC790\uB3D9 \uCC44\uC810\uD560 \uC218 \uC788\uC5B4\uC694." })] }))] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC785\uB825 \uCE78", _jsx(Tooltip, Object.assign({ tooltipId: inputTooltipId, text: _jsxs("span", { children: [`예를 들어 정답이 '글자 수'이고`, _jsx("br", {}), _jsx("b", { children: "\uAE00\uC790 \uC218\uB300\uB85C" }), " \uC635\uC158\uC744 \uC120\uD0DD\uD588\uB2E4\uBA74", _jsx("br", {}), `입력 칸이 '☐☐ ☐' 처럼 표시됩니다.`] }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
+              ` }), _jsx(Label, { children: "\uAC00\uB2A5\uD55C \uC815\uB2F5\uC744 \uBAA8\uB450 \uCD94\uAC00\uD574\uC57C \uC6D0\uD65C\uD558\uAC8C \uC790\uB3D9 \uCC44\uC810\uD560 \uC218 \uC788\uC5B4\uC694." })] }))] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC785\uB825 \uCE78", _jsx(Tooltip, Object.assign({ text: _jsxs("span", { children: [`예를 들어 정답이 '글자 수'이고`, _jsx("br", {}), _jsx("b", { children: "\uAE00\uC790 \uC218\uB300\uB85C" }), " \uC635\uC158\uC744 \uC120\uD0DD\uD588\uB2E4\uBA74", _jsx("br", {}), `입력 칸이 '☐☐ ☐' 처럼 표시됩니다.`] }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
                     width: 12px;
                     height: 12px;
-                  `, "aria-labelledby": inputTooltipId }) }))] }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "showCharacterNumber", items: [
+                  ` }) }))] }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "showCharacterNumber", items: [
                                             { value: false, label: "한 칸으로" },
                                             { value: true, label: "글자 수대로" },
-                                        ] })] }), _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ tooltipId: placeholderTooltipId, text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
+                                        ] })] }), _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
                     width: 12px;
                     height: 12px;
-                  `, "aria-labelledby": placeholderTooltipId }) }))] }), _jsx(FormPlaceholder, { control: control })] }), _jsxs(FormArea, { children: [_jsx(Label, { children: "\uB744\uC5B4\uC4F0\uAE30" }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "ignoreWhitespace", items: [
+                  ` }) }))] }), _jsx(FormPlaceholder, { control: control })] }), _jsxs(FormArea, { children: [_jsx(Label, { children: "\uB744\uC5B4\uC4F0\uAE30" }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "ignoreWhitespace", items: [
                                             { value: true, label: "무시하기" },
                                             { value: false, label: "포함하기" },
                                         ] })] }), _jsxs(FormArea, { children: [_jsx(Label, { children: "\uB300\uC18C\uBB38\uC790" }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "caseSensitive", items: [

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/SettingForm.js

@@ -11,13 +11,12 @@ import { AddFillIcon, AlarmWarningFillIcon, ListRadioIcon, } from "../../../../.
 import { Button } from "../../../../../components/Button";
 import { FormSelection } from "./FormSelection";
 import { Tooltip } from "../../../../../components/Tooltip";
-import { useState, useMemo } from "react";
+import { useState } from "react";
 import { uid } from "uid";
 export function SettingForm(props) {
     const { selections, nodeKey, onClose } = props;
     const [editor] = useLexicalComposerContext();
     const [tooltipOpen, setTooltipOpen] = useState(false);
-    const tooltipId = useMemo(() => `tooltip-${uid()}`, []);
     const { control, handleSubmit, watch } = useForm({
         mode: "all",
         defaultValues: {
@@ -90,7 +89,7 @@ export function SettingForm(props) {
                         }, disabled: fields.length >= 9 }), hasMultipleAnswers && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
                 width: 14px;
                 height: 14px;
-              ` }), "\uC815\uB2F5\uC774 \uC5EC\uB7EC \uAC1C\uC778 \uBB38\uC81C\uC5D0\uB294 \uC815\uB2F5\uC744 \uBAA8\uB450 \uC120\uD0DD\uD574\uC57C \uD55C\uB2E4\uB294 \uC548\uB0B4\uAC00 \uC81C\uACF5\uB429\uB2C8\uB2E4."] }))] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Tooltip, Object.assign({ tooltipId: tooltipId, open: !hasAnswer && tooltipOpen, text: "\uC120\uD0DD\uC9C0 \uC911 \uC815\uB2F5\uC744 \uD45C\uC2DC\uD574\uC8FC\uC138\uC694.", onOpen: () => setTooltipOpen(true), onClose: () => setTooltipOpen(false), placement: "top-end" }, { children: _jsx("span", Object.assign({ "aria-labelledby": tooltipId }, { children: _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", type: "submit", disabled: !hasAnswer }) })) }))] })] })));
+              ` }), "\uC815\uB2F5\uC774 \uC5EC\uB7EC \uAC1C\uC778 \uBB38\uC81C\uC5D0\uB294 \uC815\uB2F5\uC744 \uBAA8\uB450 \uC120\uD0DD\uD574\uC57C \uD55C\uB2E4\uB294 \uC548\uB0B4\uAC00 \uC81C\uACF5\uB429\uB2C8\uB2E4."] }))] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Tooltip, Object.assign({ open: !hasAnswer && tooltipOpen, text: "\uC120\uD0DD\uC9C0 \uC911 \uC815\uB2F5\uC744 \uD45C\uC2DC\uD574\uC8FC\uC138\uC694.", onOpen: () => setTooltipOpen(true), onClose: () => setTooltipOpen(false), placement: "top-end" }, { children: _jsx("span", { children: _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", type: "submit", disabled: !hasAnswer }) }) }))] })] })));
 }
 const Form = styled.form(({ theme }) => css `
     display: flex;

package/dist/patterns/LexicalEditor/nodes/SheetInputNode/SettingForm.js

@@ -8,13 +8,10 @@ import { css } from "@emotion/react";
 import { InputMethodLineIcon, QuestionFillIcon } from "../../../../icons";
 import { Button, Input, shadows, Tooltip } from "../../../..";
 import { $isSheetInputNode } from "./SheetInputNode";
-import { uid } from "uid";
-import { useMemo } from "react";
 /** 활동지 활동의 입력칸 설정 컴포넌트입니다. */
 export function SettingForm(props) {
     const { multiline, placeholder, nodeKey, onClose } = props;
     const [editor] = useLexicalComposerContext();
-    const tooltipId = useMemo(() => `tooltip-${uid()}`, []);
     const { control, handleSubmit } = useForm({
         mode: "all",
         defaultValues: {
@@ -34,10 +31,10 @@ export function SettingForm(props) {
     return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(InputMethodLineIcon, { css: css `
             width: 12px;
             height: 12px;
-          ` }), multiline ? "서술형 입력 칸" : "단답형 입력 칸"] }), _jsx(Content, { children: _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ tooltipId: tooltipId, text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
+          ` }), multiline ? "서술형 입력 칸" : "단답형 입력 칸"] }), _jsx(Content, { children: _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
                   width: 12px;
                   height: 12px;
-                `, "aria-labelledby": tooltipId }) }))] }), _jsx(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: "\uC608) \uC5EC\uAE30\uC5D0 \uC785\uB825\uD558\uC138\uC694." })) })] }) }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", bold: true, type: "submit" })] })] })));
+                ` }) }))] }), _jsx(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: "\uC608) \uC5EC\uAE30\uC5D0 \uC785\uB825\uD558\uC138\uC694." })) })] }) }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", bold: true, type: "submit" })] })] })));
 }
 const Form = styled.form(({ theme }) => css `
     display: flex;

package/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -30,10 +30,7 @@ export const SegmentedControlButton = React.forwardRef(function SegmentedControl
     const isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    const { label } = other;
-    return (_jsx(StyledButton, Object.assign({}, other, { ref: ref, startIcon: typeof startIcon === "function" ? startIcon(isActive) : startIcon, endIcon: typeof endIcon === "function" ? endIcon(isActive) : endIcon, isActive: isActive, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick, disabled: context.disabled || props.disabled, title: isActive
-            ? (typeof label === "string" ? `${label} 선택됨` : "선택됨")
-            : undefined })));
+    return (_jsx(StyledButton, Object.assign({}, other, { ref: ref, startIcon: typeof startIcon === "function" ? startIcon(isActive) : startIcon, endIcon: typeof endIcon === "function" ? endIcon(isActive) : endIcon, isActive: isActive, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick, disabled: context.disabled || props.disabled, "aria-selected": isActive ? "true" : undefined })));
 });
 const StyledButton = styled(Button, {
     shouldForwardProp: (prop) => prop !== "isActive",

package/dist/patterns/ToggleButtonGroup/ToggleButton.js

@@ -3,17 +3,14 @@ import styled from "@emotion/styled";
 import { HOVER, RESET_BUTTON, Tooltip } from "../..";
 import { css } from "@emotion/react";
 import { toggleButtonGroupClasses, } from "./ToggleButtonGroup";
-import { uid } from "uid";
-import { useMemo } from "react";
 /** 하나의 ToggleButton을 그립니다. */
 export function ToggleButton(props) {
     const { datum, placement, isActive, onClick } = props;
     const { label, onIcon, offIcon } = datum;
-    const tooltipId = useMemo(() => `tooltip-${uid()}`, []);
     if (isActive) {
         return (_jsxs(Active, Object.assign({ "aria-label": `${label} 선택 해제하기`, className: toggleButtonGroupClasses.toggleButton.active, onClick: onClick }, { children: [onIcon, label] })));
     }
-    return (_jsx(Tooltip, Object.assign({ tooltipId: tooltipId, placement: placement, text: label }, { children: _jsx(Inactive, Object.assign({ "aria-label": `${label} 선택하기`, className: toggleButtonGroupClasses.toggleButton.inactive, onClick: onClick, "aria-labelledby": tooltipId }, { children: offIcon })) })));
+    return (_jsx(Tooltip, Object.assign({ placement: placement, text: label }, { children: _jsx(Inactive, Object.assign({ "aria-label": `${label} 선택하기`, className: toggleButtonGroupClasses.toggleButton.inactive, onClick: onClick }, { children: offIcon })) })));
 }
 const Active = styled.button(({ theme }) => css `
     ${RESET_BUTTON};

package/package.json

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