@tipp/ui 2.2.7 → 2.2.9

package/dist/app/platform/contents-card.js

@@ -1,38 +1,35 @@
 import {
   ContentsCard
-} from "../../chunk-WPSS7DM6.js";
+} from "../../chunk-OVI5652U.js";
 import "../../chunk-HBF6IIVZ.js";
-import "../../chunk-2OMSNCRH.js";
-import "../../chunk-74DX4CU7.js";
 import "../../chunk-OYM4XCHQ.js";
 import "../../chunk-YJ7ZFOYL.js";
 import "../../chunk-5ZITU5L7.js";
 import "../../chunk-5XYPLDI5.js";
 import "../../chunk-6NPTJBFE.js";
 import "../../chunk-EEKOTWBE.js";
-import "../../chunk-FPD73OHW.js";
 import "../../chunk-MUPK4L3U.js";
 import "../../chunk-MUNMDHRF.js";
 import "../../chunk-TVDKGMBI.js";
 import "../../chunk-X2GMDZ7M.js";
 import "../../chunk-5H3YPCZK.js";
 import "../../chunk-FR2GDOU2.js";
-import "../../chunk-DHZVOXFM.js";
+import "../../chunk-74DX4CU7.js";
 import "../../chunk-WV2HN6H4.js";
-import "../../chunk-5MCLOY67.js";
+import "../../chunk-AQEJ47YX.js";
 import "../../chunk-5AVBYDPB.js";
 import "../../chunk-365QMK4D.js";
 import "../../chunk-YO3BQW6S.js";
 import "../../chunk-6IVCARWS.js";
 import "../../chunk-6DJOIRMF.js";
+import "../../chunk-FPD73OHW.js";
 import "../../chunk-EGEQY3KT.js";
 import "../../chunk-O3T3TM3V.js";
 import "../../chunk-XQOL7UBI.js";
 import "../../chunk-TULWX7D6.js";
-import "../../chunk-Q37G2GS6.js";
+import "../../chunk-DHZVOXFM.js";
 import "../../chunk-VTJZMOSP.js";
-import "../../chunk-DIE6CIJQ.js";
-import "../../chunk-BESTU2AY.js";
+import "../../chunk-OC5IPHZQ.js";
 import "../../chunk-RHHS5DZL.js";
 import "../../chunk-645GPOW2.js";
 import "../../chunk-HYITAA4J.js";
@@ -44,7 +41,6 @@ import "../../chunk-Y4U24VXI.js";
 import "../../chunk-3NUQAVE6.js";
 import "../../chunk-2DZ2Y3JI.js";
 import "../../chunk-VRJR534I.js";
-import "../../chunk-ZD7MNMED.js";
 import "../../chunk-B6XJN6EC.js";
 import "../../chunk-RP2RGCAW.js";
 import "../../chunk-MIMJ7LON.js";
@@ -52,35 +48,39 @@ import "../../chunk-W7X7KSJP.js";
 import "../../chunk-VYCYVN3L.js";
 import "../../chunk-OHMOP5PV.js";
 import "../../chunk-NFDQJVFA.js";
-import "../../chunk-EAXUQEO5.js";
-import "../../chunk-FU5BNFCO.js";
+import "../../chunk-Q37G2GS6.js";
+import "../../chunk-6SYFG6YY.js";
 import "../../chunk-K36TPMKL.js";
 import "../../chunk-U3BQT7ZO.js";
 import "../../chunk-YGL6SWKN.js";
 import "../../chunk-4Y5BEXVN.js";
 import "../../chunk-QRI6ARS6.js";
 import "../../chunk-25HMMI7R.js";
-import "../../chunk-PMJIFLDT.js";
-import "../../chunk-LDBWASUA.js";
 import "../../chunk-TSXRCXC6.js";
 import "../../chunk-LQY4RKWI.js";
+import "../../chunk-ZD7MNMED.js";
 import "../../chunk-V5XKNSCK.js";
 import "../../chunk-WJ34ZHTU.js";
+import "../../chunk-ZQE7SP6P.js";
+import "../../chunk-R6ARPREO.js";
 import "../../chunk-2O45FRFQ.js";
+import "../../chunk-J2I3R3OV.js";
+import "../../chunk-QO6KO6MN.js";
 import "../../chunk-5KNRHIIF.js";
 import "../../chunk-6JRAI4G5.js";
 import "../../chunk-776WBOKL.js";
 import "../../chunk-2FJ4LW7E.js";
-import "../../chunk-ZQE7SP6P.js";
-import "../../chunk-R6ARPREO.js";
 import "../../chunk-YSYJCYHY.js";
 import "../../chunk-5OM2H6RI.js";
 import "../../chunk-ZUYCXCPW.js";
 import "../../chunk-YVFNJE4E.js";
-import "../../chunk-J2I3R3OV.js";
-import "../../chunk-QO6KO6MN.js";
+import "../../chunk-2OMSNCRH.js";
+import "../../chunk-BESTU2AY.js";
+import "../../chunk-PMJIFLDT.js";
+import "../../chunk-LDBWASUA.js";
 import "../../chunk-PT57HCAI.js";
 import "../../chunk-J242TTFH.js";
+import "../../chunk-EAXUQEO5.js";
 import "../../chunk-CRTRMMJ7.js";
 export {
   ContentsCard

package/dist/app/platform/curriculum-card.js

@@ -1,29 +1,29 @@
 import {
   CurriculumCard
-} from "../../chunk-AGOEGEED.js";
+} from "../../chunk-UJKOBA4Y.js";
 import "../../chunk-EGEQY3KT.js";
-import "../../chunk-BESTU2AY.js";
 import "../../chunk-HYITAA4J.js";
 import "../../chunk-U3BQT7ZO.js";
 import "../../chunk-4Y5BEXVN.js";
 import "../../chunk-25HMMI7R.js";
-import "../../chunk-PMJIFLDT.js";
-import "../../chunk-LDBWASUA.js";
 import "../../chunk-V5XKNSCK.js";
 import "../../chunk-WJ34ZHTU.js";
+import "../../chunk-ZQE7SP6P.js";
+import "../../chunk-R6ARPREO.js";
 import "../../chunk-2O45FRFQ.js";
+import "../../chunk-J2I3R3OV.js";
+import "../../chunk-QO6KO6MN.js";
 import "../../chunk-5KNRHIIF.js";
 import "../../chunk-6JRAI4G5.js";
 import "../../chunk-776WBOKL.js";
 import "../../chunk-2FJ4LW7E.js";
-import "../../chunk-ZQE7SP6P.js";
-import "../../chunk-R6ARPREO.js";
 import "../../chunk-YSYJCYHY.js";
 import "../../chunk-5OM2H6RI.js";
 import "../../chunk-ZUYCXCPW.js";
 import "../../chunk-YVFNJE4E.js";
-import "../../chunk-J2I3R3OV.js";
-import "../../chunk-QO6KO6MN.js";
+import "../../chunk-BESTU2AY.js";
+import "../../chunk-PMJIFLDT.js";
+import "../../chunk-LDBWASUA.js";
 import "../../chunk-CRTRMMJ7.js";
 export {
   CurriculumCard

package/dist/app/platform/edit-coaching-time.cjs

@@ -62,7 +62,7 @@ __export(edit_coaching_time_exports, {
   EditCoachingTime: () => EditCoachingTime
 });
 module.exports = __toCommonJS(edit_coaching_time_exports);
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // src/atoms/alert-dialog.tsx
 var import_themes = require("@radix-ui/themes");
@@ -1493,66 +1493,117 @@ var Form = {
 };
 
 // src/atoms/auto-sizing-input.tsx
+var import_themes51 = require("@radix-ui/themes");
 var import_react23 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
+var useTextWidth = (text, font) => {
+  const [textWidth, setTextWidth] = (0, import_react23.useState)(0);
+  (0, import_react23.useEffect)(() => {
+    if (!text) {
+      setTextWidth(0);
+      return;
+    }
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    if (!context) {
+      setTextWidth(0);
+      return;
+    }
+    context.font = font;
+    const width = Math.ceil(context.measureText(text).width);
+    setTextWidth(width);
+  }, [text, font]);
+  return textWidth;
+};
+var getFontString = (element) => {
+  if (!element) return "14px sans-serif";
+  if (typeof window === "undefined") return "14px sans-serif";
+  const computedStyle = window.getComputedStyle(element);
+  const fontSize = computedStyle.fontSize || "14px";
+  const fontFamily = computedStyle.fontFamily || "sans-serif";
+  const fontWeight = computedStyle.fontWeight || "normal";
+  const fontStyle = computedStyle.fontStyle || "normal";
+  return `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`;
+};
 var AutoSizingInput = (0, import_react23.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { value: _value, onChangeValue, onChange } = _b, rest = __objRest(_b, ["value", "onChangeValue", "onChange"]);
-    const [value, setValue] = (0, import_react23.useState)(_value);
-    const [width, setWidth] = (0, import_react23.useState)(0);
-    const span = (0, import_react23.useRef)(null);
+    var _b = _a, {
+      value: externalValue,
+      onChangeValue,
+      onChange,
+      maxWidth,
+      minWidth
+    } = _b, rest = __objRest(_b, [
+      "value",
+      "onChangeValue",
+      "onChange",
+      "maxWidth",
+      "minWidth"
+    ]);
+    const isControlled = externalValue !== void 0;
+    const [internalValue, setInternalValue] = (0, import_react23.useState)(externalValue || "");
+    const value = isControlled ? externalValue : internalValue;
     const defaultRef = (0, import_react23.useRef)(null);
     const inputRef = ref || defaultRef;
+    const [fontString, setFontString] = (0, import_react23.useState)("14px sans-serif");
+    const displayValue = (0, import_react23.useMemo)(
+      () => value || rest.placeholder || "",
+      [value, rest.placeholder]
+    );
+    const textWidth = useTextWidth(displayValue, fontString);
+    const dynamicWidth = (0, import_react23.useMemo)(
+      () => `${Math.max(textWidth + 16, 24)}px`,
+      [textWidth]
+    );
     (0, import_react23.useEffect)(() => {
-      span.current && setWidth(span.current.offsetWidth);
-    }, [value]);
-    const changeHandler = (0, import_react23.useCallback)(
+      if (!("current" in inputRef) || !inputRef.current) return;
+      const element = inputRef.current;
+      const updateFont = () => {
+        const font = getFontString(element);
+        setFontString(font);
+      };
+      updateFont();
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === "attributes" && (mutation.attributeName === "style" || mutation.attributeName === "class")) {
+            updateFont();
+          }
+        });
+      });
+      observer.observe(element, {
+        attributes: true,
+        attributeFilter: ["style", "class"]
+      });
+      return () => {
+        observer.disconnect();
+      };
+    }, [inputRef]);
+    const handleChange = (0, import_react23.useCallback)(
       (evt) => {
+        const newValue = evt.target.value;
         onChange == null ? void 0 : onChange(evt);
-        setValue(evt.target.value);
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+        onChangeValue == null ? void 0 : onChangeValue(newValue);
       },
-      [onChange]
+      [onChange, onChangeValue, isControlled]
     );
-    (0, import_react23.useEffect)(() => {
-      setValue(_value || "");
-    }, [_value]);
-    (0, import_react23.useEffect)(() => {
-      onChangeValue == null ? void 0 : onChangeValue(value || "");
-    }, [value, onChangeValue]);
     const onClick = (0, import_react23.useCallback)(() => {
       var _a2;
       if ("current" in inputRef) {
         (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
       }
     }, [inputRef]);
-    const onKeyDown = (0, import_react23.useCallback)(
-      (evt) => {
-        if (evt.key === "Enter") {
-          onClick();
-        }
-      },
-      [onClick]
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-      "div",
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      import_themes51.Box,
       {
         className: "auto-sizing-input wrapper",
+        maxWidth,
+        minWidth,
         onClick,
-        onKeyDown,
-        role: "button",
-        style: { width: `${width + 24}px` },
-        tabIndex: 0,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": "true", ref: span, style: rest.style, children: value || rest.placeholder || "" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            "input",
-            __spreadValues({
-              onChange: changeHandler,
-              ref: inputRef,
-              value
-            }, rest)
-          )
-        ]
+        style: { width: dynamicWidth },
+        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", __spreadValues({ onChange: handleChange, ref: inputRef, value }, rest))
       }
     );
   }
@@ -1668,8 +1719,8 @@ function DropdownSelector({
       });
     }
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_themes29.Popover.Root, { onOpenChange, open: isOpen, modal: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_themes29.Popover.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Heading2, { variant: "heading4", weight: "regular", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_themes29.Popover.Root, { modal: true, onOpenChange, open: isOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_themes29.Popover.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { className: "react-datepicker_dropdown_header", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Heading2, { variant: "heading4", weight: "regular", children: [
       selectedValue,
       suffix
     ] }) }) }),
@@ -1683,16 +1734,16 @@ function DropdownSelector({
         children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_themes22.Flex, { direction: "column", gap: "1", children: options.map((item) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           Button,
           {
+            className: "react-datepicker_dropdown_item",
             color: "gray",
             "data-year-month-dropdown-tiem": item,
-            className: "react-datepicker_dropdown_item",
+            onClick: () => {
+              onSelect(item);
+            },
             onMouseDown: (e) => {
               e.stopPropagation();
               e.preventDefault();
             },
-            onClick: () => {
-              onSelect(item);
-            },
             variant: "transparent",
             children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Typo, { weight: item === selectedValue ? "bold" : void 0, children: [
               item,
@@ -1729,6 +1780,7 @@ var getRenderCustomHeader = (props) => {
       /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         IconButton,
         {
+          className: "react-datepicker_dropdown_header",
           disabled: prevMonthButtonDisabled,
           onClick: decreaseMonth,
           type: "button",
@@ -1769,6 +1821,7 @@ var getRenderCustomHeader = (props) => {
       /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         IconButton,
         {
+          className: "react-datepicker_dropdown_header",
           disabled: nextMonthButtonDisabled,
           onClick: increaseMonth,
           type: "button",
@@ -1788,7 +1841,7 @@ var import_jsx_runtime47 = require("react/jsx-runtime");
 
 // src/molecules/stepper.tsx
 var import_react29 = require("react");
-var import_themes51 = require("@radix-ui/themes");
+var import_themes52 = require("@radix-ui/themes");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var StepContext = (0, import_react29.createContext)({
   active: false,
@@ -1802,7 +1855,7 @@ var import_react_icons5 = require("@radix-ui/react-icons");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 
 // src/theme/theme-provider.tsx
-var import_themes52 = require("@radix-ui/themes");
+var import_themes53 = require("@radix-ui/themes");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 
 // src/molecules/learning-post.tsx
@@ -1818,7 +1871,8 @@ var import_date_fns = require("date-fns");
 var import_clsx4 = require("clsx");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 function DatePickerButton(props) {
-  const _a = props, { size, placeholder, format: formatProps, disabled } = _a, rest = __objRest(_a, ["size", "placeholder", "format", "disabled"]);
+  const _a = props, { size, format: formatProps, disabled } = _a, rest = __objRest(_a, ["size", "format", "disabled"]);
+  const placeholder = rest.placeholder || "\uB0A0\uC9DC\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694";
   const buttonProps = (0, import_react31.useMemo)(() => {
     const variant = "outline";
     const color = "gray";
@@ -1827,22 +1881,33 @@ function DatePickerButton(props) {
   const selectFormat = (0, import_react31.useMemo)(() => {
     if (formatProps) return formatProps;
     return (date) => {
-      return date ? (0, import_date_fns.format)(date, "yyyy\uB144 MM\uC6D4 dd\uC77C") : placeholder;
+      return date ? (0, import_date_fns.format)(date, "yyyy\uB144 MM\uC6D4 dd\uC77C") : "";
     };
-  }, [formatProps, placeholder]);
+  }, [formatProps]);
   const className = (0, import_react31.useMemo)(() => {
     return (0, import_clsx4.clsx)(
       "date-picker-button",
       (disabled || props.readOnly) && "disabled"
     );
   }, [disabled, props.readOnly]);
+  const placeholderVisible = (0, import_react31.useMemo)(() => {
+    return rest.selected ? "" : "placeholder-visible";
+  }, [rest.selected]);
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_themes6.Box, { p: "0", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     DatePicker,
     __spreadProps(__spreadValues({
-      customInput: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button, __spreadProps(__spreadValues({ className, type: "button" }, buttonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_themes22.Flex, { align: "center", gap: "3", justify: "between", width: "100%", children: [
-        rest.selected ? selectFormat(rest.selected) : placeholder,
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_icons2.CalendarIcon, {})
-      ] }) })),
+      customInput: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button, __spreadProps(__spreadValues({ asChild: true, className, type: "button" }, buttonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+        TextField.Root,
+        {
+          className: placeholderVisible,
+          placeholder: placeholder || "",
+          value: rest.selected ? selectFormat(rest.selected) : placeholder,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TextField.Slot, { className: "hide-slot" }),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TextField.Slot, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_icons2.CalendarIcon, {}) })
+          ]
+        }
+      ) })),
       wrapperClassName: "full-width"
     }, rest), {
       disabled
@@ -2027,19 +2092,24 @@ var import_jsx_runtime83 = require("react/jsx-runtime");
 var import_jsx_runtime84 = require("react/jsx-runtime");
 
 // src/molecules/dynamic-form.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_formik2 = require("formik");
 var Yup2 = __toESM(require("yup"), 1);
-var import_themes53 = require("@radix-ui/themes");
+var import_themes54 = require("@radix-ui/themes");
 
-// src/molecules/dynamic-field.tsx
+// src/context/dynamic-form-context.tsx
+var import_react41 = require("react");
 var import_jsx_runtime85 = require("react/jsx-runtime");
+var DynamicFormContext = (0, import_react41.createContext)(null);
 
-// src/molecules/dynamic-form.tsx
+// src/molecules/dynamic-field.tsx
 var import_jsx_runtime86 = require("react/jsx-runtime");
 
-// src/app/platform/edit-coaching-time.tsx
+// src/molecules/dynamic-form.tsx
 var import_jsx_runtime87 = require("react/jsx-runtime");
+
+// src/app/platform/edit-coaching-time.tsx
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var getValueFromDefaultValue = (args) => {
   return {
     startTime: args.startAt ? getTimeOption(args.startAt) : "00:00",
@@ -2059,14 +2129,14 @@ var getDateFromValue = (date, time) => {
 };
 function EditCoachingTime(props) {
   const { defaultEndAt, defaultStartAt, onClickCancel } = props;
-  const [values, setValues] = (0, import_react42.useState)(() => {
+  const [values, setValues] = (0, import_react43.useState)(() => {
     return getValueFromDefaultValue({
       startAt: defaultStartAt,
       endAt: defaultEndAt
     });
   });
-  const [timeError, setTimeError] = (0, import_react42.useState)("");
-  const checkTimeError = (0, import_react42.useCallback)(
+  const [timeError, setTimeError] = (0, import_react43.useState)("");
+  const checkTimeError = (0, import_react43.useCallback)(
     (startTime, endTime) => {
       const error = startTime >= endTime ? "\uC2DC\uC791\uC2DC\uAC04\uC744 \uC885\uB8CC\uC2DC\uAC04\uBCF4\uB2E4 \uBE60\uB974\uAC8C \uC120\uD0DD\uD574\uC8FC\uC138\uC694." : "";
       if (error) {
@@ -2077,7 +2147,7 @@ function EditCoachingTime(props) {
     },
     []
   );
-  const onChangeStartTime = (0, import_react42.useCallback)(
+  const onChangeStartTime = (0, import_react43.useCallback)(
     (v) => {
       checkTimeError(v, values.endTime);
       setValues((prev) => __spreadProps(__spreadValues({}, prev), {
@@ -2086,7 +2156,7 @@ function EditCoachingTime(props) {
     },
     [checkTimeError, values.endTime]
   );
-  const onChangeEndTime = (0, import_react42.useCallback)(
+  const onChangeEndTime = (0, import_react43.useCallback)(
     (v) => {
       checkTimeError(values.startTime, v);
       setValues((prev) => __spreadProps(__spreadValues({}, prev), {
@@ -2095,12 +2165,12 @@ function EditCoachingTime(props) {
     },
     [checkTimeError, values.startTime]
   );
-  const onChangeDate = (0, import_react42.useCallback)((date) => {
+  const onChangeDate = (0, import_react43.useCallback)((date) => {
     date && setValues((prev) => __spreadProps(__spreadValues({}, prev), {
       date
     }));
   }, []);
-  const onClickSave = (0, import_react42.useCallback)(() => {
+  const onClickSave = (0, import_react43.useCallback)(() => {
     if (checkTimeError(values.startTime, values.endTime)) {
       const startAt = getDateFromValue(values.date, values.startTime);
       const endAt = getDateFromValue(values.date, values.endTime);
@@ -2109,10 +2179,10 @@ function EditCoachingTime(props) {
       import_react_toastify2.toast.error("\uC785\uB825 \uAC12\uC774 \uC720\uD6A8\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.");
     }
   }, [checkTimeError, props, values.date, values.endTime, values.startTime]);
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_themes6.Box, { width: { initial: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(Form.Root, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(Form.Field, { name: "date", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Form.Label, { variant: "caption", children: "\uB0A0\uC9DC" }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_themes6.Box, { width: { initial: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Form.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Form.Field, { name: "date", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Form.Label, { variant: "caption", children: "\uB0A0\uC9DC" }),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
         DatePickerButton,
         {
           maxDate: /* @__PURE__ */ new Date(),
@@ -2122,7 +2192,7 @@ function EditCoachingTime(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
       import_themes23.Grid,
       {
         align: "center",
@@ -2137,10 +2207,10 @@ function EditCoachingTime(props) {
         mt: "5",
         width: "100%",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Form.Field, { name: "startTime", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Form.Label, { variant: "caption", children: "\uC2DC\uC791 \uC2DC\uAC04" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Form.Field, { name: "endTime", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Form.Label, { variant: "caption", children: "\uC885\uB8CC \uC2DC\uAC04" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Form.Field, { name: "startTime", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Form.Label, { variant: "caption", children: "\uC2DC\uC791 \uC2DC\uAC04" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Form.Field, { name: "endTime", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Form.Label, { variant: "caption", children: "\uC885\uB8CC \uC2DC\uAC04" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
             TimeSelect,
             {
               onValueChange: onChangeStartTime,
@@ -2148,8 +2218,8 @@ function EditCoachingTime(props) {
               value: values.startTime
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_themes6.Box, { overflow: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_themes39.Separator, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_themes6.Box, { overflow: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_themes39.Separator, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
             TimeSelect,
             {
               onValueChange: onChangeEndTime,
@@ -2157,13 +2227,13 @@ function EditCoachingTime(props) {
               value: values.endTime
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Form.Field, { name: "startEndTime", style: { gridColumn: "1/span 3" }, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Form.Message, { forceMatch: Boolean(timeError), children: timeError }) })
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Form.Field, { name: "startEndTime", style: { gridColumn: "1/span 3" }, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Form.Message, { forceMatch: Boolean(timeError), children: timeError }) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_themes22.Flex, { gap: "3", justify: "end", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Button, { onClick: onClickCancel, type: "button", variant: "outline", children: "\uCDE8\uC18C\uD558\uAE30" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Button, { onClick: onClickSave, type: "button", children: "\uC800\uC7A5\uD558\uAE30" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_themes22.Flex, { gap: "3", justify: "end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Button, { onClick: onClickCancel, type: "button", variant: "outline", children: "\uCDE8\uC18C\uD558\uAE30" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Button, { onClick: onClickSave, type: "button", children: "\uC800\uC7A5\uD558\uAE30" }) })
     ] })
   ] }) });
 }