@team-monolith/cds 1.56.1 → 1.57.0

package/@types/emotion.d.ts

@@ -104,6 +104,8 @@ interface CodleColors {
     worksheetAlt: string;
     ebook: string;
     ebookAlt: string;
+    makecode: string;
+    makecodeAlt: string;
   };
   blanket: {
     neutral: string;

package/dist/CodleDesignSystemProvider.js

@@ -109,6 +109,8 @@ export const light = {
             worksheetAlt: "#EEE5FF",
             ebook: "#0094FF",
             ebookAlt: "#E0F2FF",
+            makecode: "#AA278F",
+            makecodeAlt: "#FFE0F9",
         },
         blanket: {
             neutral: COLOR.alpha030,
@@ -224,6 +226,8 @@ export const dark = {
             worksheetAlt: "#5F5C66",
             ebook: "#0094FF",
             ebookAlt: "#475966",
+            makecode: "#AA278F",
+            makecodeAlt: "#664760",
         },
         blanket: {
             neutral: COLOR.alphaf20,

package/dist/icons/Custom.d.ts

@@ -307,3 +307,12 @@ export declare const customEmoNeutralColorSvg: string;
 export declare const CustomEmoNeutralColorIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
 } & React.RefAttributes<any>>;
+export declare const customMakecodeSvg: string;
+export declare const CustomMakecodeIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    color?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customMakecodeColorSvg: string;
+export declare const CustomMakecodeColorIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;

package/dist/icons/Custom.js

@@ -346,3 +346,13 @@ export const CustomEmoNeutralColorIcon = forwardRef((props, ref) => {
     const uniqueId = useMemo(uid, []);
     return (_jsxs("svg", Object.assign({}, props, { ref: ref, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, { children: [_jsx("path", { d: "M11.9992 22.4983C19 22.4983 22.4983 17.7977 22.4983 11.9992C22.4983 6.20064 19 1.5 11.9992 1.5C4.99833 1.5 1.5 6.20064 1.5 11.9992C1.5 17.7977 4.99833 22.4983 11.9992 22.4983Z", fill: `url(#paint0_radial_${uniqueId})` }), _jsx("path", { d: "M11.9992 22.4983C19 22.4983 22.4983 17.7977 22.4983 11.9992C22.4983 6.20064 19 1.5 11.9992 1.5C4.99833 1.5 1.5 6.20064 1.5 11.9992C1.5 17.7977 4.99833 22.4983 11.9992 22.4983Z", fill: `url(#paint1_radial_${uniqueId})` }), _jsx("path", { d: "M11.9992 22.4983C19 22.4983 22.4983 17.7977 22.4983 11.9992C22.4983 6.20064 19 1.5 11.9992 1.5C4.99833 1.5 1.5 6.20064 1.5 11.9992C1.5 17.7977 4.99833 22.4983 11.9992 22.4983Z", fill: `url(#paint2_radial_${uniqueId})`, fillOpacity: "0.6" }), _jsx("path", { d: "M11.9992 22.4983C19 22.4983 22.4983 17.7977 22.4983 11.9992C22.4983 6.20064 19 1.5 11.9992 1.5C4.99833 1.5 1.5 6.20064 1.5 11.9992C1.5 17.7977 4.99833 22.4983 11.9992 22.4983Z", fill: `url(#paint3_radial_${uniqueId})` }), _jsx("path", { d: "M11.9992 22.4983C19 22.4983 22.4983 17.7977 22.4983 11.9992C22.4983 6.20064 19 1.5 11.9992 1.5C4.99833 1.5 1.5 6.20064 1.5 11.9992C1.5 17.7977 4.99833 22.4983 11.9992 22.4983Z", fill: `url(#paint4_radial_${uniqueId})` }), _jsx("path", { d: "M11.9992 22.4983C19 22.4983 22.4983 17.7977 22.4983 11.9992C22.4983 6.20064 19 1.5 11.9992 1.5C4.99833 1.5 1.5 6.20064 1.5 11.9992C1.5 17.7977 4.99833 22.4983 11.9992 22.4983Z", fill: `url(#paint5_radial_${uniqueId})` }), _jsx("path", { d: "M11.9992 22.4983C19 22.4983 22.4983 17.7977 22.4983 11.9992C22.4983 6.20064 19 1.5 11.9992 1.5C4.99833 1.5 1.5 6.20064 1.5 11.9992C1.5 17.7977 4.99833 22.4983 11.9992 22.4983Z", fill: `url(#paint6_radial_${uniqueId})` }), _jsx("circle", { cx: "6.75", cy: "11.25", r: "3.75", fill: `url(#paint7_radial_${uniqueId})` }), _jsx("circle", { cx: "14.625", cy: "11.625", r: "3.375", fill: `url(#paint8_radial_${uniqueId})` }), _jsx("path", { d: "M7.875 13.5C9.73896 13.5 11.25 11.989 11.25 10.125C11.25 8.26104 9.73896 6.75 7.875 6.75C6.01104 6.75 4.5 8.26104 4.5 10.125C4.5 11.989 6.01104 13.5 7.875 13.5Z", fill: "white" }), _jsx("path", { d: "M16.125 13.5C17.989 13.5 19.5 11.989 19.5 10.125C19.5 8.26104 17.989 6.75 16.125 6.75C14.261 6.75 12.75 8.26104 12.75 10.125C12.75 11.989 14.261 13.5 16.125 13.5Z", fill: "white" }), _jsx("path", { d: "M8.25 12.75C9.49264 12.75 10.5 11.7426 10.5 10.5C10.5 9.25736 9.49264 8.25 8.25 8.25C7.00736 8.25 6 9.25736 6 10.5C6 11.7426 7.00736 12.75 8.25 12.75Z", fill: `url(#paint9_linear_${uniqueId})` }), _jsx("path", { d: "M15.75 12.75C16.9926 12.75 18 11.7426 18 10.5C18 9.25736 16.9926 8.25 15.75 8.25C14.5074 8.25 13.5 9.25736 13.5 10.5C13.5 11.7426 14.5074 12.75 15.75 12.75Z", fill: `url(#paint10_linear_${uniqueId})` }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 15.75C9 15.3358 9.33579 15 9.75 15H14.25C14.6642 15 15 15.3358 15 15.75C15 16.1642 14.6642 16.5 14.25 16.5H9.75C9.33579 16.5 9 16.1642 9 15.75Z", fill: `url(#paint11_linear_${uniqueId})` }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.0721 5.84912C15.0708 5.85163 15.0695 5.85412 15.0682 5.8566C15.0679 5.85723 15.0677 5.85757 15.0677 5.85761L15.0677 5.85754L15.0691 5.85499L15.0705 5.85229L15.0713 5.85058L15.0718 5.84962L15.0721 5.84912ZM17.182 5.8566C17.1815 5.85571 17.1806 5.85425 17.1794 5.85226C17.1747 5.84444 17.1647 5.8288 17.1489 5.80781C17.1173 5.76562 17.0639 5.70382 16.9846 5.64043C16.8325 5.51875 16.5662 5.375 16.1251 5.375C15.6841 5.375 15.4177 5.51875 15.2656 5.64043C15.1864 5.70382 15.1329 5.76562 15.1013 5.80781C15.0855 5.8288 15.0756 5.84444 15.0708 5.85226C15.0696 5.85425 15.0687 5.85572 15.0682 5.8566C14.9423 6.09774 14.6458 6.19437 14.4015 6.07221C14.1545 5.94872 14.0544 5.64838 14.1779 5.40139L14.6251 5.625C14.1779 5.40139 14.178 5.40113 14.1782 5.40086L14.1784 5.40031L14.179 5.39915L14.1803 5.39662L14.1834 5.39071L14.1915 5.37562C14.1978 5.36415 14.2059 5.3499 14.216 5.33328C14.2362 5.30009 14.2643 5.25714 14.3013 5.20781C14.3751 5.10938 14.4857 4.98368 14.6409 4.85957C14.9575 4.60625 15.4412 4.375 16.1251 4.375C16.8091 4.375 17.2927 4.60625 17.6093 4.85957C17.7645 4.98368 17.8751 5.10938 17.9489 5.20781C17.9859 5.25714 18.014 5.30009 18.0342 5.33328C18.0443 5.3499 18.0524 5.36415 18.0587 5.37562L18.0668 5.39071L18.0699 5.39662L18.0712 5.39915L18.0718 5.40031L18.0721 5.40086C18.0722 5.40113 18.0723 5.40139 17.6251 5.625L18.0723 5.40139C18.1958 5.64838 18.0957 5.94872 17.8487 6.07221C17.6044 6.19437 17.3079 6.09774 17.182 5.8566Z", fill: `url(#paint12_linear_${uniqueId})` }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.82206 6.15088C6.82081 6.14837 6.81953 6.14588 6.81824 6.1434C6.81788 6.14277 6.81769 6.14243 6.81766 6.14239L6.8177 6.14246L6.81907 6.14501L6.82046 6.14771L6.82133 6.14942L6.82181 6.15038L6.82206 6.15088ZM8.93198 6.1434C8.93147 6.14429 8.93061 6.14575 8.92941 6.14774C8.92466 6.15556 8.91468 6.1712 8.89894 6.19219C8.86729 6.23438 8.81386 6.29618 8.73464 6.35957C8.58253 6.48125 8.31615 6.625 7.87511 6.625C7.43407 6.625 7.16769 6.48125 7.01558 6.35957C6.93636 6.29618 6.88292 6.23438 6.85128 6.19219C6.83554 6.1712 6.82556 6.15556 6.82081 6.14774C6.8196 6.14575 6.81875 6.14428 6.81824 6.1434C6.69231 5.90226 6.39581 5.80563 6.1515 5.92779C5.90451 6.05128 5.8044 6.35162 5.9279 6.59861L6.37511 6.375C5.9279 6.59861 5.92803 6.59887 5.92816 6.59914L5.92844 6.59969L5.92902 6.60085L5.93031 6.60338L5.93337 6.60929L5.94149 6.62438C5.94779 6.63585 5.95594 6.6501 5.96603 6.66672C5.98618 6.69991 6.01429 6.74286 6.05128 6.79219C6.12511 6.89062 6.23574 7.01632 6.39089 7.14043C6.70753 7.39375 7.19115 7.625 7.87511 7.625C8.55907 7.625 9.04269 7.39375 9.35933 7.14043C9.51448 7.01632 9.62511 6.89062 9.69894 6.79219C9.73593 6.74286 9.76404 6.69991 9.78419 6.66672C9.79428 6.6501 9.80243 6.63585 9.80873 6.62438L9.81685 6.60929L9.81991 6.60338L9.8212 6.60085L9.82178 6.59969L9.82206 6.59914C9.82219 6.59887 9.82232 6.59861 9.37511 6.375L9.82232 6.59861C9.94582 6.35162 9.84571 6.05128 9.59872 5.92779C9.35441 5.80563 9.05791 5.90226 8.93198 6.1434Z", fill: `url(#paint13_linear_${uniqueId})` }), _jsxs("defs", { children: [_jsxs("radialGradient", Object.assign({ id: `paint0_radial_${uniqueId}`, cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(19.125 6.75) rotate(131.878) scale(29.2115)" }, { children: [_jsx("stop", { stopColor: "#FFF478" }), _jsx("stop", { offset: "0.474827", stopColor: "#FFB02E" }), _jsx("stop", { offset: "1", stopColor: "#F70A8D" })] })), _jsxs("radialGradient", Object.assign({ id: `paint1_radial_${uniqueId}`, cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(12 9.375) rotate(101.31) scale(13.3849 17.1435)" }, { children: [_jsx("stop", { offset: "0.787821", stopColor: "#F59639", stopOpacity: "0" }), _jsx("stop", { offset: "0.972509", stopColor: "#FF7DCE" })] })), _jsxs("radialGradient", Object.assign({ id: `paint2_radial_${uniqueId}`, cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(13.5 10.5) rotate(135) scale(30.7591)" }, { children: [_jsx("stop", { offset: "0.314853", stopOpacity: "0" }), _jsx("stop", { offset: "1" })] })), _jsxs("radialGradient", Object.assign({ id: `paint3_radial_${uniqueId}`, cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(12 12.75) rotate(77.692) scale(21.1102)" }, { children: [_jsx("stop", { offset: "0.507903", stopColor: "#7D6133", stopOpacity: "0" }), _jsx("stop", { offset: "1", stopColor: "#715B32" })] })), _jsxs("radialGradient", Object.assign({ id: `paint4_radial_${uniqueId}`, cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(12.375 12.375) rotate(55.7131) scale(9.98515 7.23774)" }, { children: [_jsx("stop", { stopColor: "#FFB849" }), _jsx("stop", { offset: "1", stopColor: "#FFB847", stopOpacity: "0" })] })), _jsxs("radialGradient", Object.assign({ id: `paint5_radial_${uniqueId}`, cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(15.375 13.5) rotate(9.86581) scale(8.75446)" }, { children: [_jsx("stop", { stopColor: "#FFA64B" }), _jsx("stop", { offset: "0.900412", stopColor: "#FFAE46", stopOpacity: "0" })] })), _jsxs("radialGradient", Object.assign({ id: `paint6_radial_${uniqueId}`, cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(13.125 11.25) rotate(43.9708) scale(44.2897)" }, { children: [_jsx("stop", { offset: "0.185425", stopOpacity: "0" }), _jsx("stop", { offset: "1", stopOpacity: "0.4" })] })), _jsxs("radialGradient", Object.assign({ id: `paint7_radial_${uniqueId}`, cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(9.66667 8.33333) rotate(135) scale(7.30677 3.78174)" }, { children: [_jsx("stop", { stopColor: "#392108" }), _jsx("stop", { offset: "1", stopColor: "#C87928", stopOpacity: "0" })] })), _jsxs("radialGradient", Object.assign({ id: `paint8_radial_${uniqueId}`, cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(17.25 9) rotate(135) scale(6.0988 3.44287)" }, { children: [_jsx("stop", { stopColor: "#392108" }), _jsx("stop", { offset: "1", stopColor: "#C87928", stopOpacity: "0" })] })), _jsxs("linearGradient", Object.assign({ id: `paint9_linear_${uniqueId}`, x1: "16.6154", y1: "8.25", x2: "15.75", y2: "12.75", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#553B3E" }), _jsx("stop", { offset: "1", stopColor: "#3D2432" })] })), _jsxs("linearGradient", Object.assign({ id: `paint10_linear_${uniqueId}`, x1: "16.6154", y1: "8.25", x2: "15.75", y2: "12.75", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#553B3E" }), _jsx("stop", { offset: "1", stopColor: "#3D2432" })] })), _jsxs("linearGradient", Object.assign({ id: `paint11_linear_${uniqueId}`, x1: "12", y1: "15.25", x2: "12", y2: "16.25", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#4F3C43" }), _jsx("stop", { offset: "1", stopColor: "#512756" })] })), _jsxs("linearGradient", Object.assign({ id: `paint12_linear_${uniqueId}`, x1: "16.1251", y1: "4.875", x2: "16.1251", y2: "5.625", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { offset: "0.0299084", stopColor: "#524049" }), _jsx("stop", { offset: "1", stopColor: "#4A2C42" })] })), _jsxs("linearGradient", Object.assign({ id: `paint13_linear_${uniqueId}`, x1: "7.87511", y1: "6", x2: "7.87511", y2: "7.125", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { offset: "0.0299084", stopColor: "#524049" }), _jsx("stop", { offset: "1", stopColor: "#4A2C42" })] }))] })] })));
 });
+import customMakecodeSvgImport from "./custom/makecode.svg";
+export const customMakecodeSvg = customMakecodeSvgImport;
+export const CustomMakecodeIcon = forwardRef((props, ref) => {
+    return (_jsxs("svg", Object.assign({}, props, { ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M14.599 6.46154C14.368 6.46154 14.2188 6.21672 14.2885 6.00491C14.3609 5.78494 14.4 5.5507 14.4 5.30769C14.4 4.03319 13.3255 3 12 3C10.6745 3 9.6 4.03319 9.6 5.30769C9.6 5.5507 9.63906 5.78494 9.71148 6.00491C9.78121 6.21672 9.63201 6.46154 9.40096 6.46154H7.2C6.53726 6.46154 6 6.97813 6 7.61538V16.8462C6 17.4834 6.53726 18 7.2 18H16.8C17.4627 18 18 17.4834 18 16.8462V14.7298C18 14.5077 17.7454 14.3642 17.5251 14.4313C17.2963 14.5009 17.0527 14.5385 16.8 14.5385C15.4745 14.5385 14.4 13.5053 14.4 12.2308C14.4 10.9563 15.4745 9.92308 16.8 9.92308C17.0527 9.92308 17.2963 9.96064 17.5251 10.0303C17.7454 10.0973 18 9.95386 18 9.73169V7.61539C18 6.97813 17.4627 6.46154 16.8 6.46154H14.599Z", fill: "currentColor" }), _jsx("path", { d: "M21.5 14.3V18C21.5 19.6569 20.1569 21 18.5 21H17.5V19H18.5C19.0523 19 19.5 18.5523 19.5 18V13.9C19.5 13.0142 20.0759 12.2628 20.8738 12C20.0759 11.7372 19.5 10.9858 19.5 10.1V6C19.5 5.44772 19.0523 5 18.5 5H17.5V3H18.5C20.1569 3 21.5 4.34315 21.5 6V9.7C21.5 10.5284 22.1716 11.2 23 11.2H23.5V12.8H23C22.1716 12.8 21.5 13.4716 21.5 14.3Z", fill: "currentColor" }), _jsx("path", { d: "M2.5 18V14.3C2.5 13.4716 1.82843 12.8 1 12.8H0.5V11.2H1C1.82843 11.2 2.5 10.5284 2.5 9.7V6C2.5 4.34315 3.84315 3 5.5 3H6.5V5H5.5C4.94772 5 4.5 5.44772 4.5 6V10.1C4.5 10.9858 3.92408 11.7372 3.12623 12C3.92408 12.2628 4.5 13.0142 4.5 13.9V18C4.5 18.5523 4.94772 19 5.5 19H6.5V21H5.5C3.84315 21 2.5 19.6569 2.5 18Z", fill: "currentColor" })] })));
+});
+import customMakecodeColorSvgImport from "./custom/makecode-color.svg";
+export const customMakecodeColorSvg = customMakecodeColorSvgImport;
+export const CustomMakecodeColorIcon = forwardRef((props, ref) => {
+    return (_jsxs("svg", Object.assign({}, props, { ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M2.5 18V14.3C2.5 13.4716 1.82843 12.8 1 12.8H0.5V11.2H1C1.82843 11.2 2.5 10.5284 2.5 9.7V6C2.5 4.34315 3.84315 3 5.5 3H6.5V5H5.5C4.94772 5 4.5 5.44772 4.5 6V10.1C4.5 10.9858 3.92408 11.7372 3.12623 12C3.92408 12.2628 4.5 13.0142 4.5 13.9V18C4.5 18.5523 4.94772 19 5.5 19H6.5V21H5.5C3.84315 21 2.5 19.6569 2.5 18ZM21.5 14.3V18C21.5 19.6569 20.1569 21 18.5 21H17.5V19H18.5C19.0523 19 19.5 18.5523 19.5 18V13.9C19.5 13.0142 20.0759 12.2628 20.8738 12C20.0759 11.7372 19.5 10.9858 19.5 10.1V6C19.5 5.44772 19.0523 5 18.5 5H17.5V3H18.5C20.1569 3 21.5 4.34315 21.5 6V9.7C21.5 10.5284 22.1716 11.2 23 11.2H23.5V12.8H23C22.1716 12.8 21.5 13.4716 21.5 14.3Z", fill: "#FFE0F9" }), _jsx("path", { d: "M14.599 6.46154C14.368 6.46154 14.2188 6.21672 14.2885 6.00491C14.3609 5.78494 14.4 5.5507 14.4 5.30769C14.4 4.03319 13.3255 3 12 3C10.6745 3 9.6 4.03319 9.6 5.30769C9.6 5.5507 9.63906 5.78494 9.71148 6.00491C9.78121 6.21672 9.63201 6.46154 9.40096 6.46154H7.2C6.53726 6.46154 6 6.97813 6 7.61538V16.8462C6 17.4834 6.53726 18 7.2 18H16.8C17.4627 18 18 17.4834 18 16.8462V14.7298C18 14.5077 17.7454 14.3642 17.5251 14.4313C17.2963 14.5009 17.0527 14.5385 16.8 14.5385C15.4745 14.5385 14.4 13.5053 14.4 12.2308C14.4 10.9563 15.4745 9.92308 16.8 9.92308C17.0527 9.92308 17.2963 9.96064 17.5251 10.0303C17.7454 10.0973 18 9.95386 18 9.73169V7.61539C18 6.97813 17.4627 6.46154 16.8 6.46154H14.599Z", fill: "#AA278F" })] })));
+});

package/dist/icons/custom/makecode-color.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 18V14.3C2.5 13.4716 1.82843 12.8 1 12.8H0.5V11.2H1C1.82843 11.2 2.5 10.5284 2.5 9.7V6C2.5 4.34315 3.84315 3 5.5 3H6.5V5H5.5C4.94772 5 4.5 5.44772 4.5 6V10.1C4.5 10.9858 3.92408 11.7372 3.12623 12C3.92408 12.2628 4.5 13.0142 4.5 13.9V18C4.5 18.5523 4.94772 19 5.5 19H6.5V21H5.5C3.84315 21 2.5 19.6569 2.5 18ZM21.5 14.3V18C21.5 19.6569 20.1569 21 18.5 21H17.5V19H18.5C19.0523 19 19.5 18.5523 19.5 18V13.9C19.5 13.0142 20.0759 12.2628 20.8738 12C20.0759 11.7372 19.5 10.9858 19.5 10.1V6C19.5 5.44772 19.0523 5 18.5 5H17.5V3H18.5C20.1569 3 21.5 4.34315 21.5 6V9.7C21.5 10.5284 22.1716 11.2 23 11.2H23.5V12.8H23C22.1716 12.8 21.5 13.4716 21.5 14.3Z" fill="#FFE0F9"/>
+<path d="M14.599 6.46154C14.368 6.46154 14.2188 6.21672 14.2885 6.00491C14.3609 5.78494 14.4 5.5507 14.4 5.30769C14.4 4.03319 13.3255 3 12 3C10.6745 3 9.6 4.03319 9.6 5.30769C9.6 5.5507 9.63906 5.78494 9.71148 6.00491C9.78121 6.21672 9.63201 6.46154 9.40096 6.46154H7.2C6.53726 6.46154 6 6.97813 6 7.61538V16.8462C6 17.4834 6.53726 18 7.2 18H16.8C17.4627 18 18 17.4834 18 16.8462V14.7298C18 14.5077 17.7454 14.3642 17.5251 14.4313C17.2963 14.5009 17.0527 14.5385 16.8 14.5385C15.4745 14.5385 14.4 13.5053 14.4 12.2308C14.4 10.9563 15.4745 9.92308 16.8 9.92308C17.0527 9.92308 17.2963 9.96064 17.5251 10.0303C17.7454 10.0973 18 9.95386 18 9.73169V7.61539C18 6.97813 17.4627 6.46154 16.8 6.46154H14.599Z" fill="#AA278F"/>
+</svg>

package/dist/icons/custom/makecode.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.599 6.46154C14.368 6.46154 14.2188 6.21672 14.2885 6.00491C14.3609 5.78494 14.4 5.5507 14.4 5.30769C14.4 4.03319 13.3255 3 12 3C10.6745 3 9.6 4.03319 9.6 5.30769C9.6 5.5507 9.63906 5.78494 9.71148 6.00491C9.78121 6.21672 9.63201 6.46154 9.40096 6.46154H7.2C6.53726 6.46154 6 6.97813 6 7.61538V16.8462C6 17.4834 6.53726 18 7.2 18H16.8C17.4627 18 18 17.4834 18 16.8462V14.7298C18 14.5077 17.7454 14.3642 17.5251 14.4313C17.2963 14.5009 17.0527 14.5385 16.8 14.5385C15.4745 14.5385 14.4 13.5053 14.4 12.2308C14.4 10.9563 15.4745 9.92308 16.8 9.92308C17.0527 9.92308 17.2963 9.96064 17.5251 10.0303C17.7454 10.0973 18 9.95386 18 9.73169V7.61539C18 6.97813 17.4627 6.46154 16.8 6.46154H14.599Z" fill="#363636"/>
+<path d="M21.5 14.3V18C21.5 19.6569 20.1569 21 18.5 21H17.5V19H18.5C19.0523 19 19.5 18.5523 19.5 18V13.9C19.5 13.0142 20.0759 12.2628 20.8738 12C20.0759 11.7372 19.5 10.9858 19.5 10.1V6C19.5 5.44772 19.0523 5 18.5 5H17.5V3H18.5C20.1569 3 21.5 4.34315 21.5 6V9.7C21.5 10.5284 22.1716 11.2 23 11.2H23.5V12.8H23C22.1716 12.8 21.5 13.4716 21.5 14.3Z" fill="#363636"/>
+<path d="M2.5 18V14.3C2.5 13.4716 1.82843 12.8 1 12.8H0.5V11.2H1C1.82843 11.2 2.5 10.5284 2.5 9.7V6C2.5 4.34315 3.84315 3 5.5 3H6.5V5H5.5C4.94772 5 4.5 5.44772 4.5 6V10.1C4.5 10.9858 3.92408 11.7372 3.12623 12C3.92408 12.2628 4.5 13.0142 4.5 13.9V18C4.5 18.5523 4.94772 19 5.5 19H6.5V21H5.5C3.84315 21 2.5 19.6569 2.5 18Z" fill="#363636"/>
+</svg>

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -18,6 +18,7 @@ import { LayoutItemNode } from "./nodes/LayoutItemNode";
 import _ from "lodash";
 import { SheetSelectNode } from "./nodes/SheetSelectNode";
 import { SheetInputNode } from "./nodes/SheetInputNode";
+import { SelfEvaluationNode } from "./nodes/SelfEvaluationNode";
 function validateValue(value) {
     var _a, _b;
     if (value && typeof value !== "object") {
@@ -80,6 +81,7 @@ export function LexicalEditor(props) {
             LayoutItemNode,
             SheetSelectNode,
             SheetInputNode,
+            SelfEvaluationNode,
             {
                 replace: QuoteNode,
                 with: (_node) => {

package/dist/patterns/LexicalEditor/Plugins.js

@@ -32,6 +32,7 @@ import ProblemSelectPlugin from "./plugins/ProblemSelectPlugin";
 import { LayoutPlugin } from "./plugins/LayoutPlugin";
 import SheetSelectPlugin from "./plugins/SheetSelectPlugin";
 import SheetInputPlugin from "./plugins/SheetInputPlugin";
+import SelfEvaluationPlugin from "./plugins/SelfEvaluationPlugin";
 export default function Plugins(props) {
     const { className, contentEditableClassName, onChange, isSheetEnabled, isQuizEnabled, } = props;
     const isEditable = useLexicalEditable();
@@ -46,7 +47,7 @@ export default function Plugins(props) {
                     onChange === null || onChange === void 0 ? void 0 : onChange(editorState.toJSON());
                 }, 
                 // ignore 하지 않으면 Form에서 수정하지 않았는데 Dirty로 처리됨.
-                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled }), _jsx(MarkdownShortcutPlugin, { transformers: CODLE_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(LexicalClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {}), _jsx(SheetSelectPlugin, {}), _jsx(SheetInputPlugin, {})] }));
+                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled }), _jsx(MarkdownShortcutPlugin, { transformers: CODLE_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(LexicalClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {}), _jsx(SheetSelectPlugin, {}), _jsx(SheetInputPlugin, {}), _jsx(SelfEvaluationPlugin, {})] }));
 }
 const ScrollArea = styled.div `
   min-height: 150px;

package/dist/patterns/LexicalEditor/nodes/Form/FormInput.d.ts

@@ -0,0 +1,11 @@
+import { DistributiveOmit } from "@emotion/react";
+import { InputProps } from "../../../..";
+export type FormInputProps = DistributiveOmit<InputProps, "color" | "onChange" | "value" | "hintIcon" | "hintText"> & {
+    name: string;
+    control: any;
+    baseColor?: "default" | "base";
+    rules?: any;
+    /** html event에서 얻은 value를 form에 주입하기 전에 변환합니다. */
+    transform?: (value: string) => any;
+};
+export declare function FormInput(props: FormInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/Form/FormInput.js

@@ -0,0 +1,51 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ErrorWarningFillIcon, Input } from "../../../..";
+import { Controller } from "react-hook-form";
+import { useState } from "react";
+export function FormInput(props) {
+    const { name, control, rules, baseColor = "default", transform = (value) => value } = props, inputComponentProps = __rest(props, ["name", "control", "rules", "baseColor", "transform"]);
+    const [inputFocused, setInputFocused] = useState(false);
+    return (_jsx(Controller, { name: name, control: control, rules: rules, render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => {
+            const onChangeHandler = (e) => {
+                onChange(transform(e.target.value));
+            };
+            // multiline 여부에 따라 inputProps의 type이 변경되므로 (union type)
+            // type-safety를 보장하기 위해 if 문을 분기하여 inputProps에 `name` 을 추가합니다.
+            // 코드 반복 없이 가능할까요?
+            if (inputComponentProps.multiline) {
+                const { inputProps } = inputComponentProps, other = __rest(inputComponentProps, ["inputProps"]);
+                return (_jsx(Input, Object.assign({ color: invalid
+                        ? "activeDanger"
+                        : inputFocused
+                            ? "activePrimary"
+                            : baseColor, onChange: onChangeHandler, value: value !== null && value !== void 0 ? value : "", hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, inputProps: Object.assign(Object.assign({ name }, inputProps), { onFocus: () => {
+                            setInputFocused(true);
+                        }, onBlur: () => {
+                            setInputFocused(false);
+                        } }) }, other)));
+            }
+            else {
+                const { inputProps } = inputComponentProps, other = __rest(inputComponentProps, ["inputProps"]);
+                return (_jsx(Input, Object.assign({ color: invalid
+                        ? "activeDanger"
+                        : inputFocused
+                            ? "activePrimary"
+                            : baseColor, onChange: onChangeHandler, value: value !== null && value !== void 0 ? value : "", hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, inputProps: Object.assign(Object.assign({ name }, inputProps), { onFocus: () => {
+                            setInputFocused(true);
+                        }, onBlur: () => {
+                            setInputFocused(false);
+                        } }) }, other)));
+            }
+        } }));
+}

package/dist/patterns/LexicalEditor/nodes/Form/index.d.ts

@@ -0,0 +1 @@
+export * from "./FormInput";

package/dist/patterns/LexicalEditor/nodes/Form/index.js

@@ -0,0 +1 @@
+export * from "./FormInput";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/Evaluation.d.ts

@@ -0,0 +1,16 @@
+import { ToggleButtonDatum } from "../../../../../ToggleButtonGroup";
+import { EvaluationItem } from "../../SelfEvaluationNode";
+/** 데이터를 받아 자기평가 항목들과 ToggleButtonGroup을 그리는 컴포넌트입니다.
+ * 비지니스 로직이 포함되어 있지 않습니다.
+ */
+export declare function Evaluation(props: {
+    className?: string;
+    /** 자기 평가 항목들 */
+    evaluations: EvaluationItem[];
+    /** ToggleButton의 데이터 배열 */
+    data: ToggleButtonDatum[];
+    /** 블럭을 클릭했을 때 실행될 콜백. 전달하지 않으면 cursor: pointer가 적용되지 않습니다. */
+    onClick?: () => void;
+    /** 전달하지 않으면 ToggleButtonGroup 호버, 클릭 동작이 없습니다. (pointer-events: none) */
+    onChange?: (evaluations: EvaluationItem[]) => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/Evaluation.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { ToggleButtonGroup, } from "../../../../../ToggleButtonGroup";
+import _ from "lodash";
+const TOGGLE_BUTTON_GROUP_WIDTH = 320;
+/** 데이터를 받아 자기평가 항목들과 ToggleButtonGroup을 그리는 컴포넌트입니다.
+ * 비지니스 로직이 포함되어 있지 않습니다.
+ */
+export function Evaluation(props) {
+    const { className, evaluations, data, onClick, onChange } = props;
+    return (_jsxs(Container, Object.assign({ className: className, onClick: onClick }, { children: [_jsx(Header, { children: _jsx(LabelArea, { children: data.map(({ label }, index) => (_jsx(Label, { children: label }, index))) }) }), evaluations.map(({ question, selectedLabelIndex }, index) => (_jsxs(Item, { children: [_jsx(Index, { children: index + 1 }), _jsx(Question, { children: question.text }), _jsx(StyledToggleButtonGroup, { data: data, activeIndex: selectedLabelIndex, setActiveIndex: !onChange
+                            ? undefined
+                            : (activeIndex) => {
+                                const newEvaluations = _.cloneDeep(evaluations);
+                                newEvaluations[index].selectedLabelIndex = activeIndex;
+                                onChange(newEvaluations);
+                            } })] }, index)))] })));
+}
+const Container = styled.div(({ onClick }) => css `
+    ${onClick && "cursor: pointer;"}
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+  `);
+const Header = styled.div(({ theme }) => css `
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+    display: flex;
+    padding: 8px 0px;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+  `);
+const LabelArea = styled.div `
+  display: flex;
+  width: ${TOGGLE_BUTTON_GROUP_WIDTH}px;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+const Label = styled.span(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    text-align: center;
+    /* Default/Label/12px-Md */
+    font-family: Pretendard;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);
+const Item = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 4px 0px;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+  `);
+const Index = styled.div(({ theme }) => css `
+    display: flex;
+    width: 20px;
+    height: 20px;
+    padding: 4px;
+
+    user-select: none; /* Standard syntax */
+
+    border-radius: 4px;
+    background: ${theme.color.background.neutralBase};
+    border: 1px solid ${theme.color.background.neutralAltActive};
+
+    justify-content: center;
+    align-items: center;
+
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 16px;
+  `);
+const Question = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 4px 8px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+    flex: 1 0 0;
+    align-self: stretch;
+
+    color: ${theme.color.foreground.neutralBase};
+    /* Default/Paragraph/16px-Rg */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+  `);
+const StyledToggleButtonGroup = styled(ToggleButtonGroup) `
+  flex: none;
+  width: ${TOGGLE_BUTTON_GROUP_WIDTH}px;
+`;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormIconAndLabel/FormIconAndLabel.d.ts

@@ -0,0 +1,7 @@
+import { Control } from "react-hook-form";
+import { SettingFormData } from "../SettingForm";
+/** 아이콘, 레이블을 설정하는 Form입니다. */
+export declare function FormIconAndLabel(props: {
+    control: Control<SettingFormData, any>;
+    labelsLength: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormIconAndLabel/FormIconAndLabel.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import { css, useTheme } from "@emotion/react";
+import { ICON_DATA, ICON_TYPES } from "../../../../iconData";
+import styled from "@emotion/styled";
+import { Dropdown, DropdownItem } from "../../../../../../../Dropdown";
+import { FormLabel } from "./FormLabel";
+import { ArrowDownSFillIcon } from "../../../../../../../..";
+/** 아이콘, 레이블을 설정하는 Form입니다. */
+export function FormIconAndLabel(props) {
+    const { control, labelsLength } = props;
+    const theme = useTheme();
+    const iconDataMap = ICON_DATA(theme);
+    return (_jsx(Controller, { control: control, name: "iconType", render: ({ field: { value, onChange } }) => {
+            const { startIcon, title, icons } = iconDataMap[value];
+            return (_jsxs(_Fragment, { children: [_jsx(Dropdown, Object.assign({ label: "아이콘: " + title, size: "small", color: "grey", closeOnItemClick: true, bold: true, startIcon: startIcon, endIcon: _jsx(ArrowDownSFillIcon, {}), menuProps: {
+                            menuCss: css `
+                  width: 216px;
+                `,
+                            anchorOrigin: {
+                                vertical: "bottom",
+                                horizontal: "center",
+                            },
+                            transformOrigin: {
+                                vertical: "top",
+                                horizontal: "center",
+                            },
+                        } }, { children: ICON_TYPES.map((type, index) => {
+                            const { title, startIcon } = iconDataMap[type];
+                            return (_jsx(DropdownItem, { index: index, label: title, preserveIconColor: true, startIcon: startIcon, onClick: () => {
+                                    onChange(type);
+                                } }, index));
+                        }) })), Array.from({ length: labelsLength }).map((_, index) => (_jsxs(LabelLine, { children: [_jsx(Icon, { children: icons[index].onIcon }), _jsx(FormLabel, { control: control, index: index })] }, index)))] }));
+        } }));
+}
+const LabelLine = styled.div `
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  align-self: stretch;
+`;
+const Icon = styled.div(({ theme }) => css `
+    display: flex;
+    min-width: 36px;
+    min-height: 36px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+
+    border-radius: 8px;
+    border: 0.5px solid ${theme.color.background.neutralAltActive};
+  `);

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormIconAndLabel/FormLabel.d.ts

@@ -0,0 +1,7 @@
+import { Control } from "react-hook-form";
+import { SettingFormData } from "../SettingForm";
+/** 레이블을 설정하는 Form입니다. */
+export declare function FormLabel(props: {
+    control: Control<SettingFormData, any>;
+    index: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormIconAndLabel/FormLabel.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useController } from "react-hook-form";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { FormInput } from "../../../../../Form";
+const LABEL_RULES = {
+    required: "필수 입력 항목입니다.",
+    maxLength: 12,
+};
+/** 레이블을 설정하는 Form입니다. */
+export function FormLabel(props) {
+    const { control, index } = props;
+    // endIcon에 들어갈 value, error를 사용하기 위해 useController를 사용합니다.
+    const { field: { value }, fieldState: { error }, } = useController({
+        control,
+        name: `labels.${index}`,
+        rules: LABEL_RULES,
+    });
+    return (_jsx(FormInput, { control: control, name: `labels.${index}`, rules: LABEL_RULES, size: "small", endIcon: _jsx(Counter, Object.assign({ error: Boolean(error) }, { children: value.length + "/" + LABEL_RULES.maxLength })), fullWidth: true }));
+}
+const Counter = styled.span(({ theme, error }) => css `
+    color: ${error
+    ? theme.color.foreground.dangerActive
+    : theme.color.foreground.neutralBase};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 20px; /* 142.857% */
+  `);

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormIconAndLabel/index.d.ts

@@ -0,0 +1 @@
+export * from "./FormIconAndLabel";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormIconAndLabel/index.js

@@ -0,0 +1 @@
+export * from "./FormIconAndLabel";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormQuestion.d.ts

@@ -0,0 +1,9 @@
+/** @jsxImportSource @emotion/react */
+import { Control } from "react-hook-form";
+import { SettingFormData } from "./SettingForm";
+/** 평가 항목을 설정하는 Form입니다. */
+export declare function FormQuestion(props: {
+    index: number;
+    control: Control<SettingFormData, any>;
+    onDelete?: () => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormQuestion.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { DeleteBinLineIcon, SquareButton } from "../../../../../../..";
+import { FormInput } from "../../../../Form";
+/** 평가 항목을 설정하는 Form입니다. */
+export function FormQuestion(props) {
+    const { control, index, onDelete } = props;
+    return (_jsxs(Item, { children: [_jsx(Index, { children: index + 1 }), _jsx(FormInput, { control: control, name: `evaluations.${index}.question.text`, rules: {
+                    required: "필수 입력 항목입니다.",
+                }, size: "small", placeholder: `${index + 1}번 평가 항목`, multiline: true, fullWidth: true }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }));
+}
+const Item = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 4px 12px;
+    align-items: center;
+    gap: 4px;
+    align-self: stretch;
+    border-radius: 8px;
+    background: ${theme.color.background.neutralAlt};
+  `);
+const Index = styled.div(({ theme }) => css `
+    display: flex;
+    width: 20px;
+    height: 20px;
+    padding: 4px;
+
+    user-select: none; /* Standard syntax */
+
+    border-radius: 4px;
+    background: ${theme.color.background.neutralBase};
+    border: 1px solid ${theme.color.background.neutralAltActive};
+
+    justify-content: center;
+    align-items: center;
+
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 16px;
+  `);

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/SettingForm.d.ts

@@ -0,0 +1,17 @@
+/** @jsxImportSource @emotion/react */
+import { NodeKey } from "lexical";
+import { EvaluationItem, IconType } from "../../../SelfEvaluationNode";
+export interface SettingFormData {
+    iconType: IconType;
+    labels: string[];
+    evaluations: EvaluationItem[];
+}
+/** 자기평가 edit의 설정 컴포넌트입니다. */
+export declare function SettingForm(props: {
+    className?: string;
+    iconType: IconType;
+    labels: string[];
+    evaluations: EvaluationItem[];
+    nodeKey: NodeKey;
+    onClose: () => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/SettingForm.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { $getNodeByKey } from "lexical";
+import { $isSelfEvaluationNode, } from "../../../SelfEvaluationNode";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useFieldArray, useForm } from "react-hook-form";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { AddFillIcon, Button, EmojiStickerLineIcon, shadows, } from "../../../../../../..";
+import { FormIconAndLabel } from "./FormIconAndLabel";
+import { FormQuestion } from "./FormQuestion";
+/** 자기평가 edit의 설정 컴포넌트입니다. */
+export function SettingForm(props) {
+    const { className, iconType, labels, evaluations, nodeKey, onClose } = props;
+    const [editor] = useLexicalComposerContext();
+    const { control, handleSubmit } = useForm({
+        mode: "all",
+        defaultValues: {
+            iconType,
+            labels,
+            evaluations,
+        },
+    });
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: "evaluations",
+        keyName: "uid",
+    });
+    const onSubmit = (data) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (!$isSelfEvaluationNode(node)) {
+                return;
+            }
+            node.setIconType(data.iconType);
+            node.setLabels(data.labels);
+            node.setEvaluations(data.evaluations);
+        });
+        onClose();
+    };
+    return (_jsxs(Form, Object.assign({ className: className, onSubmit: handleSubmit(onSubmit) }, { children: [_jsxs(Title, { children: [_jsx(EmojiStickerLineIcon, { css: css `
+            width: 12px;
+            height: 12px;
+          ` }), "3\uB2E8\uACC4 \uD3C9\uAC00"] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsx(Label, { children: "\uD3C9\uAC00 \uD56D\uBAA9" }), fields.map((field, index) => (_jsx(FormQuestion, { index: index, control: control, onDelete: index !== 0
+                                    ? () => {
+                                        remove(index);
+                                    }
+                                    : undefined }, field.uid))), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: "\uD3C9\uAC00 \uD56D\uBAA9 \uCD94\uAC00", onClick: () => {
+                                    append({
+                                        question: { text: "평가 항목을 입력하세요." },
+                                        selectedLabelIndex: null,
+                                    });
+                                } })] }), _jsxs(Right, { children: [_jsx(Label, { children: "\uC544\uC774\uCF58, \uB808\uC774\uBE14" }), _jsx(FormIconAndLabel, { control: control, labelsLength: labels.length })] })] }), _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;
+    flex-direction: column;
+    border-radius: 6px;
+    border: 1px solid ${theme.color.background.neutralAltActive};
+    background: ${theme.color.background.neutralBase};
+    box-shadow: ${shadows.shadow08};
+  `);
+const Title = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 8px 12px;
+    gap: 4px;
+    align-items: center;
+    color: ${theme.color.foreground.neutralBase};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);
+const Content = styled.div(({ theme }) => css `
+    display: flex;
+    border-top: 1px solid ${theme.color.background.neutralAltActive};
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+  `);
+const Left = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+`;
+const Right = styled.div `
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+`;
+const Label = styled.div(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);
+const Buttons = styled.div `
+  display: flex;
+  padding: 12px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+`;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/index.d.ts

@@ -0,0 +1 @@
+export * from "./SettingForm";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/index.js

@@ -0,0 +1 @@
+export * from "./SettingForm";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Evaluation";
+export * from "./SettingForm";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/index.js

@@ -0,0 +1,2 @@
+export * from "./Evaluation";
+export * from "./SettingForm";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/EvaluationComponent.d.ts

@@ -0,0 +1,10 @@
+/** @jsxImportSource @emotion/react */
+import { NodeKey } from "lexical";
+import { EvaluationItem, IconType } from "../SelfEvaluationNode";
+/** SelfEvaluationNode를 그리는 컴포넌트입니다. */
+export declare function EvaluationComponent(props: {
+    iconType: IconType;
+    labels: string[];
+    evaluations: EvaluationItem[];
+    nodeKey: NodeKey;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/EvaluationComponent.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { $getNodeByKey } from "lexical";
+import { $isSelfEvaluationNode, } from "../SelfEvaluationNode";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useContext, useState } from "react";
+import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { LexicalCustomConfigContext } from "../../../LexicalCustomConfigContext";
+import { Evaluation, SettingForm } from "./Evaluation";
+import { ICON_DATA } from "../iconData";
+import { css, useTheme } from "@emotion/react";
+import SquareButton from "../../../../../components/SquareButton";
+import { Settings3FillIcon } from "../../../../../icons";
+import _ from "lodash";
+const EVALUATION_EDIT_WIDTH = 620;
+/** SelfEvaluationNode를 그리는 컴포넌트입니다. */
+export function EvaluationComponent(props) {
+    const { iconType, labels, evaluations, nodeKey } = props;
+    const theme = useTheme();
+    const [editor] = useLexicalComposerContext();
+    const isEditable = useLexicalEditable();
+    const { freezeProblemNode } = useContext(LexicalCustomConfigContext);
+    const [settingOpen, setSettingOpen] = useState(false);
+    const { icons } = ICON_DATA(theme)[iconType];
+    // label과 icons를 매핑하여 ToggelButtonData로 변환합니다.
+    // 만약 둘의 길이가 같지 않다면 짧은 길이에 맞춰집니다.
+    const data = _.zipWith(labels, icons, (label, { onIcon, offIcon }) => ({
+        label,
+        onIcon,
+        offIcon,
+    }));
+    // view
+    if (!isEditable) {
+        return (_jsx(Evaluation, { data: data, evaluations: evaluations, onChange: freezeProblemNode
+                ? undefined
+                : (evaluations) => {
+                    editor.update(() => {
+                        const node = $getNodeByKey(nodeKey);
+                        if (!$isSelfEvaluationNode(node)) {
+                            return;
+                        }
+                        node.setEvaluations(evaluations);
+                    });
+                } }));
+    }
+    // edit
+    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `
+          display: flex;
+          gap: 4px;
+        ` }, { children: [_jsx(Evaluation, { css: css `
+            width: ${EVALUATION_EDIT_WIDTH}px;
+          `, data: data, evaluations: evaluations, onClick: () => setSettingOpen((open) => !open) }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+                            setSettingOpen((open) => !open);
+                        } })] })), settingOpen && (_jsx(SettingForm, { css: css `
+            width: ${EVALUATION_EDIT_WIDTH}px;
+          `, iconType: iconType, labels: labels, evaluations: evaluations, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
+}

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/index.d.ts

@@ -0,0 +1 @@
+export * from "./EvaluationComponent";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/index.js

@@ -0,0 +1 @@
+export * from "./EvaluationComponent";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/SelfEvaluationNode.d.ts

@@ -0,0 +1,45 @@
+import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
+import { ReactNode } from "react";
+export type IconType = "emoji" | "ascendingNumber" | "descendingNumber";
+/** 자기 평가 항목 */
+export interface EvaluationItem {
+    question: {
+        text: string;
+    };
+    selectedLabelIndex: number | null;
+}
+export interface SelfEvaluationPayload {
+    /** 아이콘 프리셋 타입 */
+    iconType: IconType;
+    /** 자기평가 레이블 */
+    labels: string[];
+    /** 자기평가 항목들 */
+    evaluations: EvaluationItem[];
+    key?: NodeKey;
+}
+export type SerializedSelfEvaluationNode = Spread<SelfEvaluationPayload, SerializedLexicalNode>;
+/** 3단계 평가 입력칸을 나타내는 노드입니다.
+ * 도구 이름으로서는 "3단계 평가 입력 칸"으로 나타나지만, n단계로 확장 가능합니다.
+ */
+export declare class SelfEvaluationNode extends DecoratorNode<ReactNode> {
+    __iconType: IconType;
+    __labels: string[];
+    __evaluations: EvaluationItem[];
+    isInline(): boolean;
+    static getType(): string;
+    getIconType(): IconType;
+    getLabels(): string[];
+    getEvaluations(): EvaluationItem[];
+    setIconType(iconType: IconType): void;
+    setLabels(labels: string[]): void;
+    setEvaluations(evaluations: EvaluationItem[]): void;
+    static clone(node: SelfEvaluationNode): SelfEvaluationNode;
+    constructor(iconType: IconType, labels: string[], evaluations: EvaluationItem[], key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): boolean;
+    static importJSON(serializedNode: SerializedSelfEvaluationNode): SelfEvaluationNode;
+    exportJSON(): SerializedSelfEvaluationNode;
+    decorate(): ReactNode;
+}
+export declare function $createSelfEvaluationNode(payload: SelfEvaluationPayload): SelfEvaluationNode;
+export declare function $isSelfEvaluationNode(node: LexicalNode | null | undefined): node is SelfEvaluationNode;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/SelfEvaluationNode.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { $applyNodeReplacement, DecoratorNode, } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+import { EvaluationComponent } from "./EvaluationComponent";
+/** 3단계 평가 입력칸을 나타내는 노드입니다.
+ * 도구 이름으로서는 "3단계 평가 입력 칸"으로 나타나지만, n단계로 확장 가능합니다.
+ */
+export class SelfEvaluationNode extends DecoratorNode {
+    isInline() {
+        return false;
+    }
+    static getType() {
+        return "self-evaluation";
+    }
+    getIconType() {
+        return this.__iconType;
+    }
+    getLabels() {
+        return this.__labels;
+    }
+    getEvaluations() {
+        return this.__evaluations;
+    }
+    setIconType(iconType) {
+        const self = this.getWritable();
+        self.__iconType = iconType;
+    }
+    setLabels(labels) {
+        const self = this.getWritable();
+        self.__labels = labels;
+    }
+    setEvaluations(evaluations) {
+        const self = this.getWritable();
+        self.__evaluations = evaluations;
+    }
+    static clone(node) {
+        return new SelfEvaluationNode(node.__iconType, node.__labels, node.__evaluations);
+    }
+    constructor(iconType, labels, evaluations, key) {
+        super(key);
+        this.__iconType = iconType;
+        this.__labels = labels;
+        this.__evaluations = evaluations;
+    }
+    createDOM(config) {
+        // Define the DOM element here
+        const root = document.createElement("div");
+        addClassNamesToElement(root, config.theme.selfEvaluation);
+        return root;
+    }
+    updateDOM() {
+        return false;
+    }
+    static importJSON(serializedNode) {
+        return $createSelfEvaluationNode({
+            key: serializedNode.key,
+            iconType: serializedNode.iconType,
+            labels: serializedNode.labels,
+            evaluations: serializedNode.evaluations,
+        });
+    }
+    exportJSON() {
+        return {
+            type: "self-evaluation",
+            version: 1,
+            iconType: this.__iconType,
+            labels: this.__labels,
+            evaluations: this.__evaluations,
+        };
+    }
+    decorate() {
+        return (_jsx(EvaluationComponent, { iconType: this.__iconType, labels: this.__labels, evaluations: this.__evaluations, nodeKey: this.getKey() }));
+    }
+}
+export function $createSelfEvaluationNode(payload) {
+    const { iconType, labels, evaluations, key } = payload;
+    return $applyNodeReplacement(new SelfEvaluationNode(iconType, labels, evaluations, key));
+}
+export function $isSelfEvaluationNode(node) {
+    return node instanceof SelfEvaluationNode;
+}

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/iconData.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { IconType } from "./SelfEvaluationNode";
+import { Theme } from "@emotion/react";
+interface IconData {
+    startIcon: React.ReactNode;
+    title: string;
+    icons: {
+        onIcon: React.ReactNode;
+        offIcon: React.ReactNode;
+    }[];
+}
+export declare const ICON_TYPES: IconType[];
+export declare const ICON_DATA: (theme: Theme) => Record<IconType, IconData>;
+export {};

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/iconData.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CustomEmoGoodColorIcon, CustomEmoGoodIcon, CustomEmoGreatColorIcon, CustomEmoGreatIcon, CustomEmoNeutralColorIcon, CustomEmoNeutralIcon, } from "../../../../icons/Custom";
+import { Number1Icon, Number2Icon, Number3Icon } from "../../../../icons";
+export const ICON_TYPES = [
+    "emoji",
+    "ascendingNumber",
+    "descendingNumber",
+];
+export const ICON_DATA = (theme) => ({
+    emoji: {
+        startIcon: _jsx(CustomEmoGreatColorIcon, {}),
+        title: "이모지",
+        icons: [
+            {
+                onIcon: _jsx(CustomEmoGreatColorIcon, {}),
+                offIcon: _jsx(CustomEmoGreatIcon, {}),
+            },
+            { onIcon: _jsx(CustomEmoGoodColorIcon, {}), offIcon: _jsx(CustomEmoGoodIcon, {}) },
+            {
+                onIcon: _jsx(CustomEmoNeutralColorIcon, {}),
+                offIcon: _jsx(CustomEmoNeutralIcon, {}),
+            },
+        ],
+    },
+    ascendingNumber: {
+        startIcon: _jsx(Number1Icon, {}),
+        title: "숫자, 1-2-3",
+        icons: [
+            {
+                onIcon: _jsx(Number1Icon, { color: theme.color.background.primary }),
+                offIcon: _jsx(Number1Icon, {}),
+            },
+            {
+                onIcon: _jsx(Number2Icon, { color: theme.color.background.primary }),
+                offIcon: _jsx(Number2Icon, {}),
+            },
+            {
+                onIcon: _jsx(Number3Icon, { color: theme.color.background.primary }),
+                offIcon: _jsx(Number3Icon, {}),
+            },
+        ],
+    },
+    descendingNumber: {
+        startIcon: _jsx(Number3Icon, {}),
+        title: "숫자, 3-2-1",
+        icons: [
+            {
+                onIcon: _jsx(Number3Icon, { color: theme.color.background.primary }),
+                offIcon: _jsx(Number3Icon, {}),
+            },
+            {
+                onIcon: _jsx(Number2Icon, { color: theme.color.background.primary }),
+                offIcon: _jsx(Number2Icon, {}),
+            },
+            {
+                onIcon: _jsx(Number1Icon, { color: theme.color.background.primary }),
+                offIcon: _jsx(Number1Icon, {}),
+            },
+        ],
+    },
+});

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/index.d.ts

@@ -0,0 +1 @@
+export * from "./SelfEvaluationNode";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/index.js

@@ -0,0 +1 @@
+export * from "./SelfEvaluationNode";

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/useContextMenuOptions.js

@@ -17,6 +17,7 @@ import { $isProblemInputNode } from "../../nodes";
 import { $isProblemSelectNode, } from "../../nodes/ProblemSelectNode";
 import { $isSheetInputNode } from "../../nodes/SheetInputNode";
 import { $isSheetSelectNode, } from "../../nodes/SheetSelectNode";
+import { $isSelfEvaluationNode, } from "../../nodes/SelfEvaluationNode";
 function getParagraphContextMenuOptions(editor, node, setOpen) {
     return [
         new ComponentPickerOption("본문", {
@@ -221,6 +222,17 @@ function getSheetSelectContextMenuOptions(node) {
         }),
     ];
 }
+function getSelfEvaluationContextMenuOptions(node) {
+    return [
+        new ComponentPickerOption("블록 삭제", {
+            icon: _jsx(CloseFillIcon, {}),
+            keywords: [],
+            onSelect: () => {
+                node.remove();
+            },
+        }),
+    ];
+}
 function getColoredQuoteContextMenuOptions(editor, theme, node) {
     return [
         new ComponentPickerOption("회색", {
@@ -310,6 +322,9 @@ export function useContextMenuOptions(props) {
         else if ($isSheetSelectNode(node)) {
             return getSheetSelectContextMenuOptions(node);
         }
+        else if ($isSelfEvaluationNode(node)) {
+            return getSelfEvaluationContextMenuOptions(node);
+        }
         else if (node instanceof ParagraphNode) {
             return getParagraphContextMenuOptions(editor, node, setImageOpen);
         }

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.js

@@ -21,7 +21,7 @@ import * as ReactDOM from "react-dom";
 import { css as cssToClassName } from "@emotion/css";
 import { ComponentPickerMenuList } from "./ComponentPickerMenuList";
 import { InsertImageDialog } from "../ImagesPlugin/InsertImageDialog";
-import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, InputMethodLineIcon, ListRadioIcon, LayoutColumnLineIcon, FileList2LineIcon, } from "../../../../icons";
+import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, InputMethodLineIcon, ListRadioIcon, LayoutColumnLineIcon, FileList2LineIcon, EmojiStickerLineIcon, } from "../../../../icons";
 import { ZINDEX } from "../../../../utils/zIndex";
 import { css, useTheme } from "@emotion/react";
 import { INSERT_PROBLEM_INPUT_COMMAND } from "../ProblemInputPlugin";
@@ -29,6 +29,7 @@ import { INSERT_PROBLEM_SELECT_COMMAND } from "../ProblemSelectPlugin";
 import { INSERT_LAYOUT_COMMAND } from "../LayoutPlugin";
 import { INSERT_SHEET_SELECT_COMMAND } from "../SheetSelectPlugin";
 import { INSERT_SHEET_INPUT_COMMAND } from "../SheetInputPlugin";
+import { INSERT_SELF_EVALUATION_COMMAND } from "../SelfEvaluationPlugin";
 // import useModal from "../../hooks/useModal";
 // import catTypingGif from "../../images/cat-typing.gif";
 // import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
@@ -88,6 +89,22 @@ function getSheetContextOptions(editor, theme) {
                 allowMultipleAnswers: false,
             }),
         }),
+        new ComponentPickerOption("3단계 평가 입력 칸", {
+            icon: _jsx(EmojiStickerLineIcon, { color: theme.color.foreground.primary }),
+            keywords: ["self evaluation", "3단계 평가 입력"],
+            onSelect: () => editor.dispatchCommand(INSERT_SELF_EVALUATION_COMMAND, {
+                iconType: "emoji",
+                labels: ["아주 잘했어요!", "보통이에요.", "잘 모르겠어요."],
+                evaluations: [
+                    {
+                        question: {
+                            text: "평가 항목을 입력하세요.",
+                        },
+                        selectedLabelIndex: null,
+                    },
+                ],
+            }),
+        }),
         new ComponentPickerOption("단답형 입력 칸", {
             icon: _jsx(InputMethodLineIcon, { color: theme.color.foreground.primary }),
             keywords: ["sheet short input", "단답형 입력"],

package/dist/patterns/LexicalEditor/plugins/SelfEvaluationPlugin/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { LexicalCommand } from "lexical";
+import { SelfEvaluationPayload } from "../../nodes/SelfEvaluationNode";
+export declare const INSERT_SELF_EVALUATION_COMMAND: LexicalCommand<SelfEvaluationPayload>;
+export default function SelfEvaluationPlugin(): JSX.Element | null;

package/dist/patterns/LexicalEditor/plugins/SelfEvaluationPlugin/index.js

@@ -0,0 +1,20 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $insertNodeToNearestRoot } from "@lexical/utils";
+import { COMMAND_PRIORITY_EDITOR, createCommand, } from "lexical";
+import { useEffect } from "react";
+import { $createSelfEvaluationNode, SelfEvaluationNode, } from "../../nodes/SelfEvaluationNode";
+export const INSERT_SELF_EVALUATION_COMMAND = createCommand("INSERT_SELF_EVALUATION_COMMAND");
+export default function SelfEvaluationPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([SelfEvaluationNode])) {
+            throw new Error("SelfEvaluationNode: SelfEvaluationNode not registered on editor");
+        }
+        editor.registerCommand(INSERT_SELF_EVALUATION_COMMAND, (payload) => {
+            const selfEvaluationNode = $createSelfEvaluationNode(payload);
+            $insertNodeToNearestRoot(selfEvaluationNode);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}

package/dist/patterns/LexicalEditor/theme.d.ts

@@ -35,4 +35,5 @@ export declare function getTheme(theme: Theme, editable: boolean): {
     sheetInput: string;
     layoutContainer: string;
     layoutItem: string | false;
+    selfEvaluation: string;
 };

package/dist/patterns/LexicalEditor/theme.js

@@ -285,5 +285,12 @@ export function getTheme(theme, editable) {
             css `
         border: 1px dashed ${theme.color.background.neutralAltActive};
       `,
+        selfEvaluation: css `
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: 4px;
+      margin-bottom: 8px;
+    `,
     };
 }

package/dist/patterns/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -24,6 +24,6 @@ export declare function ToggleButtonGroup(props: {
     data: ToggleButtonDatum[];
     /** 활성화될 ToggleButton의 index */
     activeIndex: number | null;
-    /** activeIndex set 함수 */
-    setActiveIndex: (index: number | null) => void;
-}): import("react/jsx-runtime").JSX.Element;
+    /** activeIndex set 함수. 전달하지 않으면 pointer-events: none이 됩니다. */
+    setActiveIndex?: (index: number | null) => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/ToggleButtonGroup/ToggleButtonGroup.js

@@ -1,6 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
 import { ToggleButton } from "./ToggleButton";
+import { css } from "@emotion/react";
 export const toggleButtonGroupClasses = {
     container: "ToggleButtonGroup-container",
     toggleButton: {
@@ -14,13 +16,16 @@ export const toggleButtonGroupClasses = {
  */
 export function ToggleButtonGroup(props) {
     const { className, data, activeIndex, setActiveIndex } = props;
-    return (_jsx(Container, Object.assign({ className: `${className} ${toggleButtonGroupClasses.container}` }, { children: data.map((datum, index) => {
+    return (_jsx(Container, Object.assign({ className: `${className} ${toggleButtonGroupClasses.container}`, css: !setActiveIndex &&
+            css `
+          pointer-events: none;
+        ` }, { children: data.map((datum, index) => {
             const isFirst = index === 0;
             const isLast = index === data.length - 1;
             const isFirstAndLast = isFirst && isLast;
             const isActive = activeIndex === index;
             return (_jsx(ToggleButton, { isActive: isActive, onClick: () => {
-                    setActiveIndex(isActive ? null : index);
+                    setActiveIndex === null || setActiveIndex === void 0 ? void 0 : setActiveIndex(isActive ? null : index);
                 }, datum: datum, placement: isFirstAndLast
                     ? "bottom"
                     : isFirst

package/package.json

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