@team-monolith/cds 1.130.0-alpha.4 → 1.130.0-alpha.6

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

@@ -1,55 +1,55 @@
 import { SquareButton as e } from "../../../../components/SquareButton.js";
 import { stdin_default as t } from "../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/System/settings-3-fill.js";
-import { Input as n } from "../../../../components/Input.js";
-import { LexicalCustomConfigContext as r } from "../../LexicalCustomConfigContext.js";
-import { getTexts as i } from "../../../../texts.js";
-import { SettingForm as a } from "./SettingForm.js";
-import { $isSheetInputNode as o } from "./SheetInputNode.js";
-import { css as s } from "@emotion/react";
-import { useContext as c, useState as l } from "react";
-import u from "@emotion/styled";
-import { Fragment as d, jsx as f, jsxs as p } from "@emotion/react/jsx-runtime";
-import { useTranslation as m } from "react-i18next";
+import { useTranslation as n } from "../../../../node_modules/.pnpm/react-i18next@15.7.3_i18next@25.5.2_typescript@5.5.4__react-dom@18.2.0_react@18.2.0__react@18.2.0_typescript@5.5.4/node_modules/react-i18next/dist/es/useTranslation.js";
+import { Input as r } from "../../../../components/Input.js";
+import { LexicalCustomConfigContext as i } from "../../LexicalCustomConfigContext.js";
+import { getTexts as a } from "../../../../texts.js";
+import { SettingForm as o } from "./SettingForm.js";
+import { $isSheetInputNode as s } from "./SheetInputNode.js";
+import { css as c } from "@emotion/react";
+import { useContext as l, useState as u } from "react";
+import d from "@emotion/styled";
+import { Fragment as f, jsx as p, jsxs as m } from "@emotion/react/jsx-runtime";
 import { $getNodeByKey as h } from "lexical";
 import { useLexicalComposerContext as g } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable as _ } from "@lexical/react/useLexicalEditable";
 //#region src/cds/patterns/LexicalEditor/nodes/SheetInputNode/InputComponent.tsx
 var v = 84, y = 8;
-function b(u) {
-	let { multiline: b, value: S, placeholder: C, nodeKey: w } = u, [T] = g(), [E, D] = l(!1), O = _(), [k, A] = l(!1), [j, M] = l(S), { freezeProblemNode: N } = c(r), { t: P } = m(), F = (e) => {
+function b(d) {
+	let { multiline: b, value: S, placeholder: C, nodeKey: w } = d, [T] = g(), [E, D] = u(!1), O = _(), [k, A] = u(!1), [j, M] = u(S), { freezeProblemNode: N } = l(i), { t: P } = n(), F = (e) => {
 		M(e), T.update(() => {
 			let t = h(w);
-			o(t) && t.setValue(e);
+			s(t) && t.setValue(e);
 		});
 	};
-	return O ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("div", {
-		css: s`
+	return O ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("div", {
+		css: c`
           display: flex;
           align-items: center;
           gap: 4px;
         `,
-		children: [/* @__PURE__ */ f(x, {
+		children: [/* @__PURE__ */ p(x, {
 			onClick: () => D((e) => !e),
-			css: b && s`
+			css: b && c`
               height: ${v + 2 * y}px;
             `,
 			children: P(b ? "서술형 입력 칸" : "단답형 입력 칸", { context: "렉시컬 단답형/서술형 도구" })
-		}), /* @__PURE__ */ f(e, {
+		}), /* @__PURE__ */ p(e, {
 			size: "small",
 			color: "icon",
-			icon: /* @__PURE__ */ f(t, {}),
+			icon: /* @__PURE__ */ p(t, {}),
 			onClick: () => D((e) => !e),
 			"aria-label": P("입력 칸 설정", { context: "렉시컬 단답형/서술형 도구" })
 		})]
-	}), E && /* @__PURE__ */ f(a, {
+	}), E && /* @__PURE__ */ p(o, {
 		multiline: b,
 		placeholder: C,
 		nodeKey: w,
 		onClose: () => D(!1)
-	})] }) : /* @__PURE__ */ f(n, {
+	})] }) : /* @__PURE__ */ p(r, {
 		multiline: b,
 		disableAutosize: !0,
-		css: s`
+		css: c`
           textarea {
             height: ${v}px;
           }
@@ -60,7 +60,7 @@ function b(u) {
 		},
 		size: "small",
 		color: k ? "activePrimary" : "default",
-		placeholder: C || i(P, "placeholderEnterHere"),
+		placeholder: C || a(P, "placeholderEnterHere"),
 		value: j,
 		onChange: (e) => {
 			F(e.target.value);
@@ -68,7 +68,7 @@ function b(u) {
 		fullWidth: !0
 	});
 }
-var x = u.div(({ theme: e }) => s`
+var x = d.div(({ theme: e }) => c`
     box-sizing: border-box;
     height: 36px;
     width: 400px;

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

@@ -1,60 +1,60 @@
 import { shadows as e } from "../../../../foundation/shadows.js";
 import { stdin_default as t } from "../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/Design/input-method-line.js";
 import { stdin_default as n } from "../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/System/question-fill.js";
-import { Button as r } from "../../../../components/Button.js";
-import { Input as i } from "../../../../components/Input.js";
-import { Tooltip as a } from "../../../../components/Tooltip.js";
-import { getTexts as o } from "../../../../texts.js";
-import { $isSheetInputNode as s } from "./SheetInputNode.js";
-import { css as c } from "@emotion/react";
-import l from "@emotion/styled";
-import { jsx as u, jsxs as d } from "@emotion/react/jsx-runtime";
-import { useTranslation as f } from "react-i18next";
+import { useTranslation as r } from "../../../../node_modules/.pnpm/react-i18next@15.7.3_i18next@25.5.2_typescript@5.5.4__react-dom@18.2.0_react@18.2.0__react@18.2.0_typescript@5.5.4/node_modules/react-i18next/dist/es/useTranslation.js";
+import { Button as i } from "../../../../components/Button.js";
+import { Input as a } from "../../../../components/Input.js";
+import { Tooltip as o } from "../../../../components/Tooltip.js";
+import { getTexts as s } from "../../../../texts.js";
+import { $isSheetInputNode as c } from "./SheetInputNode.js";
+import { css as l } from "@emotion/react";
+import u from "@emotion/styled";
+import { jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
 import { $getNodeByKey as p } from "lexical";
 import { useLexicalComposerContext as m } from "@lexical/react/LexicalComposerContext";
 import { Controller as h, useForm as g } from "react-hook-form";
 //#region src/cds/patterns/LexicalEditor/nodes/SheetInputNode/SettingForm.tsx
 function _(e) {
-	let { multiline: l, placeholder: _, nodeKey: w, onClose: T } = e, [E] = m(), { t: D } = f(), { control: O, handleSubmit: k } = g({
+	let { multiline: u, placeholder: _, nodeKey: w, onClose: T } = e, [E] = m(), { t: D } = r(), { control: O, handleSubmit: k } = g({
 		mode: "all",
 		defaultValues: { placeholder: _ }
 	});
-	return /* @__PURE__ */ d(v, {
+	return /* @__PURE__ */ f(v, {
 		onSubmit: k((e) => {
 			E.update(() => {
 				let t = p(w);
-				s(t) && t.setPlaceholder(e.placeholder);
+				c(t) && t.setPlaceholder(e.placeholder);
 			}), T();
 		}),
 		children: [
-			/* @__PURE__ */ d(y, { children: [/* @__PURE__ */ u(t, { css: c`
+			/* @__PURE__ */ f(y, { children: [/* @__PURE__ */ d(t, { css: l`
             width: 12px;
             height: 12px;
-          ` }), D(l ? "서술형 입력 칸" : "단답형 입력 칸", { context: "렉시컬 단답형/서술형 도구" })] }),
-			/* @__PURE__ */ u(b, { children: /* @__PURE__ */ d(x, { children: [/* @__PURE__ */ d(S, { children: [D("자리 표시자", { context: "렉시컬 단답형/서술형 도구" }), /* @__PURE__ */ u(a, {
-				text: o(D, "descriptionDefaultInputText"),
+          ` }), D(u ? "서술형 입력 칸" : "단답형 입력 칸", { context: "렉시컬 단답형/서술형 도구" })] }),
+			/* @__PURE__ */ d(b, { children: /* @__PURE__ */ f(x, { children: [/* @__PURE__ */ f(S, { children: [D("자리 표시자", { context: "렉시컬 단답형/서술형 도구" }), /* @__PURE__ */ d(o, {
+				text: s(D, "descriptionDefaultInputText"),
 				placement: "top",
-				children: /* @__PURE__ */ u(n, { css: c`
+				children: /* @__PURE__ */ d(n, { css: l`
                   width: 12px;
                   height: 12px;
                 ` })
-			})] }), /* @__PURE__ */ u(h, {
+			})] }), /* @__PURE__ */ d(h, {
 				name: "placeholder",
 				control: O,
-				render: ({ field: { value: e, onChange: t } }) => /* @__PURE__ */ u(i, {
+				render: ({ field: { value: e, onChange: t } }) => /* @__PURE__ */ d(a, {
 					size: "small",
 					color: "default",
 					value: e,
 					onChange: t,
-					placeholder: o(D, "exampleEnterHere")
+					placeholder: s(D, "exampleEnterHere")
 				})
 			})] }) }),
-			/* @__PURE__ */ d(C, { children: [/* @__PURE__ */ u(r, {
+			/* @__PURE__ */ f(C, { children: [/* @__PURE__ */ d(i, {
 				color: "grey",
 				size: "xsmall",
 				label: D("닫기", { context: "렉시컬 도구 설정창" }),
 				onClick: T
-			}), /* @__PURE__ */ u(r, {
+			}), /* @__PURE__ */ d(i, {
 				color: "primary",
 				size: "xsmall",
 				label: D("이대로 넣기", { context: "렉시컬 도구 설정창" }),
@@ -63,7 +63,7 @@ function _(e) {
 		]
 	});
 }
-var v = l.form(({ theme: t }) => c`
+var v = u.form(({ theme: t }) => l`
     display: flex;
     width: 620px;
     flex-direction: column;
@@ -71,7 +71,7 @@ var v = l.form(({ theme: t }) => c`
     border: 1px solid ${t.color.background.neutralAltActive};
     background: ${t.color.background.neutralBase};
     box-shadow: ${e.shadow08};
-  `), y = l.div(({ theme: e }) => c`
+  `), y = u.div(({ theme: e }) => l`
     display: flex;
     padding: 8px 12px;
     gap: 4px;
@@ -83,17 +83,17 @@ var v = l.form(({ theme: t }) => c`
     font-style: normal;
     font-weight: 500;
     line-height: 16px; /* 133.333% */
-  `), b = l.div(({ theme: e }) => c`
+  `), b = u.div(({ theme: e }) => l`
     display: flex;
     border-top: 1px solid ${e.color.background.neutralAltActive};
     border-bottom: 1px solid ${e.color.background.neutralAltActive};
-  `), x = l.div`
+  `), x = u.div`
   width: 240px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 12px;
-`, S = l.div(({ theme: e }) => c`
+`, S = u.div(({ theme: e }) => l`
     display: flex;
     gap: 4px;
     align-items: center;
@@ -104,7 +104,7 @@ var v = l.form(({ theme: t }) => c`
     font-style: normal;
     font-weight: 500;
     line-height: 16px; /* 133.333% */
-  `), C = l.div`
+  `), C = u.div`
   display: flex;
   padding: 12px;
   justify-content: flex-end;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectBox/SelectBoxView.js

@@ -1,22 +1,22 @@
 import { stdin_default as e } from "../../../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/System/check-fill.js";
-import { SelectBoxComponent as t } from "./SelectBoxComponent.js";
-import { css as n } from "@emotion/react";
-import { useRef as r } from "react";
-import { jsx as i } from "@emotion/react/jsx-runtime";
-import { useTranslation as a } from "react-i18next";
+import { useTranslation as t } from "../../../../../../node_modules/.pnpm/react-i18next@15.7.3_i18next@25.5.2_typescript@5.5.4__react-dom@18.2.0_react@18.2.0__react@18.2.0_typescript@5.5.4/node_modules/react-i18next/dist/es/useTranslation.js";
+import { SelectBoxComponent as n } from "./SelectBoxComponent.js";
+import { css as r } from "@emotion/react";
+import { useRef as i } from "react";
+import { jsx as a } from "@emotion/react/jsx-runtime";
 import { useEventListener as o } from "usehooks-ts";
 //#region src/cds/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectBox/SelectBoxView.tsx
-function s(t, r) {
+function s(t, n) {
 	return {
-		primary: /* @__PURE__ */ i(e, { css: n`
+		primary: /* @__PURE__ */ a(e, { css: r`
           width: 12px;
           height: 12px;
         ` }),
-		normal: r
+		normal: n
 	}[t];
 }
 function c(e) {
-	let { index: c, isSelected: l, image: u, text: d, onClick: f } = e, { t: p } = a(), m = l ? "primary" : "normal", h = r(null);
+	let { index: c, isSelected: l, image: u, text: d, onClick: f } = e, { t: p } = t(), m = l ? "primary" : "normal", h = i(null);
 	o("keydown", (e) => {
 		f && document.activeElement === h.current && (e.key === " " || e.key === "Enter") && (e.preventDefault(), f());
 	});
@@ -24,8 +24,8 @@ function c(e) {
 		index: c,
 		context: "렉시컬 선택지 도구"
 	});
-	return /* @__PURE__ */ i(t, {
-		css: n`
+	return /* @__PURE__ */ a(n, {
+		css: r`
         width: 100%;
       `,
 		ref: h,

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectComponent.js

@@ -1,35 +1,35 @@
 import { SquareButton as e } from "../../../../../components/SquareButton.js";
 import { stdin_default as t } from "../../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/System/alarm-warning-fill.js";
 import { stdin_default as n } from "../../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/System/settings-3-fill.js";
-import { LexicalCustomConfigContext as r } from "../../../LexicalCustomConfigContext.js";
-import { getTexts as i } from "../../../../../texts.js";
-import { SettingForm as a } from "./SettingForm/SettingForm.js";
-import { SelectBoxView as o } from "./SelectBox/SelectBoxView.js";
-import { SelectBoxEdit as s } from "./SelectBox/SelectBoxEdit.js";
-import { $isSheetSelectNode as c } from "../SheetSelectNode.js";
-import { css as l } from "@emotion/react";
-import { useContext as u, useState as d } from "react";
-import f from "@emotion/styled";
-import { Fragment as p, jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
-import { useTranslation as g } from "react-i18next";
+import { useTranslation as r } from "../../../../../node_modules/.pnpm/react-i18next@15.7.3_i18next@25.5.2_typescript@5.5.4__react-dom@18.2.0_react@18.2.0__react@18.2.0_typescript@5.5.4/node_modules/react-i18next/dist/es/useTranslation.js";
+import { LexicalCustomConfigContext as i } from "../../../LexicalCustomConfigContext.js";
+import { getTexts as a } from "../../../../../texts.js";
+import { SettingForm as o } from "./SettingForm/SettingForm.js";
+import { SelectBoxView as s } from "./SelectBox/SelectBoxView.js";
+import { SelectBoxEdit as c } from "./SelectBox/SelectBoxEdit.js";
+import { $isSheetSelectNode as l } from "../SheetSelectNode.js";
+import { css as u } from "@emotion/react";
+import { useContext as d, useState as f } from "react";
+import p from "@emotion/styled";
+import { Fragment as m, jsx as h, jsxs as g } from "@emotion/react/jsx-runtime";
 import { $getNodeByKey as _ } from "lexical";
 import { useLexicalComposerContext as v } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable as y } from "@lexical/react/useLexicalEditable";
 //#region src/cds/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectComponent.tsx
-function b(f) {
-	let { selections: b, selected: S, allowMultipleAnswers: C, nodeKey: w } = f, [T] = v(), { t: E } = g(), [D, O] = d(!1), k = y(), { freezeProblemNode: A } = u(r);
-	return k ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h("div", {
-		css: l`
+function b(p) {
+	let { selections: b, selected: S, allowMultipleAnswers: C, nodeKey: w } = p, [T] = v(), { t: E } = r(), [D, O] = f(!1), k = y(), { freezeProblemNode: A } = d(i);
+	return k ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ g("div", {
+		css: u`
           display: flex;
           gap: 4px;
         `,
-		children: [/* @__PURE__ */ m("div", {
-			css: l`
+		children: [/* @__PURE__ */ h("div", {
+			css: u`
             display: flex;
             flex-direction: column;
             gap: 4px;
           `,
-			children: b.map((e, t) => /* @__PURE__ */ m(s, {
+			children: b.map((e, t) => /* @__PURE__ */ h(c, {
 				index: t + 1,
 				image: e.show.image,
 				text: e.show.text === "" && e.show.image === null ? E("{{index}}번 선택지", {
@@ -38,26 +38,26 @@ function b(f) {
 				}) : e.show.text,
 				onClick: () => O((e) => !e)
 			}, t))
-		}), /* @__PURE__ */ m(e, {
+		}), /* @__PURE__ */ h(e, {
 			size: "small",
 			color: "icon",
-			icon: /* @__PURE__ */ m(n, {}),
+			icon: /* @__PURE__ */ h(n, {}),
 			onClick: () => {
 				O((e) => !e);
 			},
 			"aria-label": E("선택지 설정", { context: "렉시컬 선택지 도구" })
 		})]
-	}), D && /* @__PURE__ */ m(a, {
+	}), D && /* @__PURE__ */ h(o, {
 		data: {
 			selections: b,
 			allowMultipleAnswers: C
 		},
 		nodeKey: w,
 		onClose: () => O(!1)
-	})] }) : /* @__PURE__ */ h(p, { children: [C && /* @__PURE__ */ h(x, { children: [/* @__PURE__ */ m(t, { css: l`
+	})] }) : /* @__PURE__ */ g(m, { children: [C && /* @__PURE__ */ g(x, { children: [/* @__PURE__ */ h(t, { css: u`
                 width: 14px;
                 height: 14px;
-              ` }), i(E, "multipleChoicesProblem")] }), b.map((e, t) => /* @__PURE__ */ m(o, {
+              ` }), a(E, "multipleChoicesProblem")] }), b.map((e, t) => /* @__PURE__ */ h(s, {
 		index: t + 1,
 		isSelected: S.includes(e.value),
 		image: e.show.image,
@@ -65,15 +65,15 @@ function b(f) {
 		onClick: A ? void 0 : () => {
 			S.includes(e.value) ? T.update(() => {
 				let t = _(w);
-				c(t) && t.setSelected(S.filter((t) => t !== e.value));
+				l(t) && t.setSelected(S.filter((t) => t !== e.value));
 			}) : T.update(() => {
 				let t = _(w);
-				c(t) && (C ? t.setSelected([...S, e.value]) : t.setSelected([e.value]));
+				l(t) && (C ? t.setSelected([...S, e.value]) : t.setSelected([e.value]));
 			});
 		}
 	}, t))] });
 }
-var x = f.div(({ theme: e }) => l`
+var x = p.div(({ theme: e }) => u`
     display: flex;
     gap: 4px;
     margin-bottom: 12px;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/FormAllowMultipleAnswers.js

@@ -1,23 +1,23 @@
-import { SegmentedControlGroup as e } from "../../../../../SegmentedControl/SegmentedControlGroup.js";
-import { SegmentedControlButton as t } from "../../../../../SegmentedControl/SegmentedControlButton.js";
-import { useTranslation as n } from "react-i18next";
+import { useTranslation as e } from "../../../../../../node_modules/.pnpm/react-i18next@15.7.3_i18next@25.5.2_typescript@5.5.4__react-dom@18.2.0_react@18.2.0__react@18.2.0_typescript@5.5.4/node_modules/react-i18next/dist/es/useTranslation.js";
+import { SegmentedControlGroup as t } from "../../../../../SegmentedControl/SegmentedControlGroup.js";
+import { SegmentedControlButton as n } from "../../../../../SegmentedControl/SegmentedControlButton.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Controller as a } from "react-hook-form";
 //#region src/cds/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/FormAllowMultipleAnswers.tsx
 function o(o) {
-	let { control: s } = o, { t: c } = n();
+	let { control: s } = o, { t: c } = e();
 	return /* @__PURE__ */ r(a, {
 		name: "allowMultipleAnswers",
 		control: s,
-		render: ({ field: { value: n, onChange: a } }) => /* @__PURE__ */ i(e, {
+		render: ({ field: { value: e, onChange: a } }) => /* @__PURE__ */ i(t, {
 			size: "xsmall",
-			value: n,
+			value: e,
 			onChange: a,
 			fullWidth: !0,
-			children: [/* @__PURE__ */ r(t, {
+			children: [/* @__PURE__ */ r(n, {
 				value: !1,
 				label: c("하나만 선택")
-			}), /* @__PURE__ */ r(t, {
+			}), /* @__PURE__ */ r(n, {
 				value: !0,
 				label: c("여러 개 선택")
 			})]

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/FormSelection.js

@@ -3,32 +3,32 @@ import { stdin_default as t } from "../../../../../../node_modules/.pnpm/remixic
 import { stdin_default as n } from "../../../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/Media/image-edit-fill.js";
 import { stdin_default as r } from "../../../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/System/delete-bin-line.js";
 import { stdin_default as i } from "../../../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/System/error-warning-fill.js";
-import { Input as a } from "../../../../../../components/Input.js";
-import { InsertImageDialog as o } from "../../../../components/InsertImageDialog/InsertImageDialog.js";
-import { css as s } from "@emotion/react";
-import { useState as c } from "react";
-import l from "@emotion/styled";
-import { jsx as u, jsxs as d } from "@emotion/react/jsx-runtime";
-import { useTranslation as f } from "react-i18next";
+import { useTranslation as a } from "../../../../../../node_modules/.pnpm/react-i18next@15.7.3_i18next@25.5.2_typescript@5.5.4__react-dom@18.2.0_react@18.2.0__react@18.2.0_typescript@5.5.4/node_modules/react-i18next/dist/es/useTranslation.js";
+import { Input as o } from "../../../../../../components/Input.js";
+import { InsertImageDialog as s } from "../../../../components/InsertImageDialog/InsertImageDialog.js";
+import { css as c } from "@emotion/react";
+import { useState as l } from "react";
+import u from "@emotion/styled";
+import { jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
 import { useController as p } from "react-hook-form";
 //#region src/cds/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/FormSelection.tsx
-function m(l) {
-	let { index: m, control: _, rules: v, onDelete: y } = l, [b, x] = c(!1), [S, C] = c(!1), { t: w } = f(), { field: { value: T, onChange: E }, fieldState: { invalid: D, error: O } } = p({
+function m(u) {
+	let { index: m, control: _, rules: v, onDelete: y } = u, [b, x] = l(!1), [S, C] = l(!1), { t: w } = a(), { field: { value: T, onChange: E }, fieldState: { invalid: D, error: O } } = p({
 		control: _,
 		name: `selections.${m}.show`,
 		rules: v
 	});
-	return /* @__PURE__ */ d(h, { children: [
-		/* @__PURE__ */ u(g, { children: m + 1 }),
-		/* @__PURE__ */ d("div", {
-			css: s`
+	return /* @__PURE__ */ f(h, { children: [
+		/* @__PURE__ */ d(g, { children: m + 1 }),
+		/* @__PURE__ */ f("div", {
+			css: c`
           display: flex;
           flex: 1;
           flex-direction: column;
           gap: 4px;
         `,
 			children: [
-				/* @__PURE__ */ u(o, {
+				/* @__PURE__ */ d(s, {
 					title: T.image ? w("이미지 바꾸기", { context: "제목, 이미지 삽입 다이얼로그" }) : w("이미지 삽입하기", { context: "제목, 이미지 삽입 다이얼로그" }),
 					open: b,
 					imageProps: T.image ?? void 0,
@@ -44,10 +44,10 @@ function m(l) {
 						});
 					} : void 0
 				}),
-				T.image && /* @__PURE__ */ u("img", {
+				T.image && /* @__PURE__ */ d("img", {
 					src: T.image.src,
 					alt: T.image.altText,
-					css: s`
+					css: c`
               height: auto;
               // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
               max-width: min(400px, 100%);
@@ -56,7 +56,7 @@ function m(l) {
             `,
 					draggable: "false"
 				}),
-				/* @__PURE__ */ u(a, {
+				/* @__PURE__ */ d(o, {
 					size: "small",
 					color: D ? "activeDanger" : S ? "activePrimary" : "default",
 					value: T.text,
@@ -76,49 +76,49 @@ function m(l) {
 						index: m + 1,
 						context: "렉시컬 선택지 도구"
 					}),
-					hintIcon: D ? /* @__PURE__ */ u(i, {}) : void 0,
+					hintIcon: D ? /* @__PURE__ */ d(i, {}) : void 0,
 					hintText: O?.message,
 					multiline: !0,
 					fullWidth: !0,
-					css: s`
+					css: c`
             flex: 1;
           `
 				})
 			]
 		}),
-		/* @__PURE__ */ d("div", {
-			css: s`
+		/* @__PURE__ */ f("div", {
+			css: c`
           display: flex;
           // 이미지가 들어가서 container height가 커져도 높이가 유지되도록 설정
           height: 36px;
           gap: 8px;
           align-items: center;
         `,
-			children: [/* @__PURE__ */ u(e, {
+			children: [/* @__PURE__ */ d(e, {
 				color: "icon",
 				size: "xsmall",
-				icon: T.image ? /* @__PURE__ */ u(n, {}) : /* @__PURE__ */ u(t, {}),
+				icon: T.image ? /* @__PURE__ */ d(n, {}) : /* @__PURE__ */ d(t, {}),
 				onClick: () => {
 					x(!0);
 				},
 				"aria-label": T.image ? w("이미지 바꾸기", { context: "스퀘어버튼, 렉시컬 도구 설정창" }) : w("이미지 삽입하기", { context: "스퀘어버튼, 렉시컬 도구 설정창" })
-			}), y && /* @__PURE__ */ u(e, {
+			}), y && /* @__PURE__ */ d(e, {
 				color: "white",
 				size: "xsmall",
-				icon: /* @__PURE__ */ u(r, {}),
+				icon: /* @__PURE__ */ d(r, {}),
 				onClick: y,
 				"aria-label": w("삭제", { context: "스퀘어버튼, 렉시컬 선택형 도구 설정창" })
 			})]
 		})
 	] });
 }
-var h = l.div(({ theme: e }) => s`
+var h = u.div(({ theme: e }) => c`
     display: flex;
     padding: 4px 12px;
     gap: 8px;
     border-radius: 8px;
     background: ${e.color.background.neutralAlt};
-  `), g = l.div(({ theme: e }) => s`
+  `), g = u.div(({ theme: e }) => c`
     display: flex;
     box-sizing: border-box;
     width: 20px;