fone-design-system_v2 1.0.12 → 1.0.13

package/dist/components/ui/DatePicker2/DatePicker2.d.ts

@@ -15,11 +15,12 @@ export interface DatePicker2Props {
     endDate?: string | null;
     label?: string;
     formName?: string;
+    name?: string;
     defaultValue?: any;
     labelStyle?: any;
     showIcon?: boolean;
     clearButtonClassName?: string;
     isClearable?: boolean;
 }
-declare const DatePicker2: ({ value, onFocus, onChange, onChangeRange, dateFormat, className, startDate, endDate, label, formName, defaultValue, labelStyle, showIcon, clearButtonClassName, isClearable, }: DatePicker2Props) => import("react/jsx-runtime").JSX.Element;
+declare const DatePicker2: ({ value, onFocus, onChange, onChangeRange, dateFormat, className, startDate, endDate, label, formName, name, defaultValue, labelStyle, showIcon, clearButtonClassName, isClearable, }: DatePicker2Props) => import("react/jsx-runtime").JSX.Element;
 export default DatePicker2;

package/dist/components/ui/Select/Select.d.ts

@@ -23,6 +23,7 @@ export interface SelectProps extends Omit<MSelectProps, any>, CustomSelectProps
     displayEmpty?: boolean;
     renderValue?: (value: unknown) => React.ReactNode;
     all?: boolean;
+    select?: boolean;
     defaultValue?: string;
 }
 declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/TextField2/RHFTextField2Controller.d.ts

@@ -1,5 +1,7 @@
+import { SxProps, Theme } from '@mui/material';
 import { Control } from 'react-hook-form';
 import { TextField2Props } from './TextField2';
+import * as React from "react";
 export interface RHFTextField2ControllerProps extends Omit<TextField2Props, any> {
     name: string;
     control: Control<any> | any;
@@ -10,6 +12,9 @@ export interface RHFTextField2ControllerProps extends Omit<TextField2Props, any>
     minRows?: number;
     maxRows?: number;
     readOnly?: boolean;
+    className?: string;
+    sx?: SxProps<Theme>;
+    style?: React.CSSProperties;
 }
-declare const RHFTextField2Controller: ({ name, control, defaultValue, value, onChange, readOnly, multiline, minRows, maxRows, ...rest }: RHFTextField2ControllerProps) => import("react/jsx-runtime").JSX.Element;
+declare const RHFTextField2Controller: ({ name, control, defaultValue, value, onChange, readOnly, multiline, minRows, maxRows, className, style, sx, ...rest }: RHFTextField2ControllerProps) => import("react/jsx-runtime").JSX.Element;
 export default RHFTextField2Controller;

package/dist/fone-design-system.es.js

@@ -31279,22 +31279,20 @@ function axe({ children: e }) {
         styles: (t) => ({
           html: {
             // 기본 62.5% = 10px 기준
-            fontSize: "62.5%",
+            fontSize: "49%"
+            // fontSize: "62.5%",
             // 작은 화면에선 살짝 줄이고
-            [t.breakpoints.down("lg")]: {
-              fontSize: "50%"
-              // ≈ 9.375px
-            },
+            // [theme.breakpoints.down("lg")]: {
+            //   fontSize: "50%", // ≈ 9.375px
+            // },
             // 작은 화면에선 살짝 줄이고
-            [t.breakpoints.up("lg")]: {
-              fontSize: "50%"
-              // ≈ 9.375px
-            },
-            // 큰 화면에선 살짝 키우기
-            [t.breakpoints.up("xl")]: {
-              fontSize: "62.5%"
-              // ≈ 10.4px
-            }
+            // [theme.breakpoints.up("lg")]: {
+            //   fontSize: "48%", // ≈ 9.375px
+            // },
+            // // 큰 화면에선 살짝 키우기
+            // [theme.breakpoints.up("xl")]: {
+            //   fontSize: "55", // ≈ 10.4px
+            // },
           },
           // 필요하면 body/컨테이너 기본 패딩도 반응형으로
           body: {
@@ -54774,44 +54772,46 @@ const dxe = ({
   endDate: l,
   label: c,
   formName: u,
-  defaultValue: d,
-  labelStyle: f,
-  showIcon: p,
-  clearButtonClassName: A,
-  isClearable: m
+  name: d,
+  defaultValue: f,
+  labelStyle: p,
+  showIcon: A,
+  clearButtonClassName: m,
+  isClearable: g
 }) => {
-  const g = !!r;
-  let h = null, y = null, b = null;
-  if (g)
+  const h = !!r;
+  let y = null, b = null, x = null;
+  if (h)
     if (e && typeof e == "object" && ("startDate" in e || "endDate" in e)) {
-      const C = e;
-      h = C.startDate ? Jt(C.startDate).toDate() : null, y = C.endDate ? Jt(C.endDate).toDate() : null;
+      const E = e;
+      y = E.startDate ? Jt(E.startDate).toDate() : null, b = E.endDate ? Jt(E.endDate).toDate() : null;
     } else
-      h = s ? Jt(s).toDate() : null, y = l ? Jt(l).toDate() : null;
+      y = s ? Jt(s).toDate() : null, b = l ? Jt(l).toDate() : null;
   else
-    b = typeof e == "string" ? Jt(e).toDate() : null;
-  const x = (C) => {
+    x = typeof e == "string" ? Jt(e).toDate() : null;
+  const w = (E) => {
     if (n) {
-      const [E, I] = C;
+      const [I, R] = E;
       n({
-        startDate: E ? Jt(E).format("YYYYMMDD") : "",
-        endDate: I ? Jt(I).format("YYYYMMDD") : ""
+        startDate: I ? Jt(I).format("YYYYMMDD") : "",
+        endDate: R ? Jt(R).format("YYYYMMDD") : ""
       });
     }
-    r && r(C);
-  }, w = (C) => {
-    n && n(C);
+    r && r(E);
+  }, C = (E) => {
+    n && n(E);
   };
   return /* @__PURE__ */ S.jsxs("div", { className: "flex items-center gap-4", children: [
-    /* @__PURE__ */ S.jsx("span", { className: "text-fone-base text-[#676662]", style: f, children: c }),
-    g ? /* @__PURE__ */ S.jsx("div", { className: "foneDateRangePicker", children: /* @__PURE__ */ S.jsx(
+    /* @__PURE__ */ S.jsx("span", { className: "text-fone-base text-[#676662]", style: p, children: c }),
+    h ? /* @__PURE__ */ S.jsx("div", { className: "foneDateRangePicker", children: /* @__PURE__ */ S.jsx(
       Q0,
       {
+        name: d,
         locale: PN,
         onFocus: t,
-        onChange: x,
-        startDate: h,
-        endDate: y,
+        onChange: w,
+        startDate: y,
+        endDate: b,
         selectsRange: !0,
         className: `h-[26px] pl-3 pr-2 text-fone-base ${i}`,
         calendarClassName: "custom-datepicker-calendar",
@@ -54820,23 +54820,24 @@ const dxe = ({
         customInput: /* @__PURE__ */ S.jsx(
           pB,
           {
-            startDate: h,
-            endDate: y,
-            onChange: x,
-            handleClear: () => x([null, null])
+            startDate: y,
+            endDate: b,
+            onChange: w,
+            handleClear: () => w([null, null])
           }
         ),
-        showIcon: p,
-        toggleCalendarOnIconClick: !!p,
-        clearButtonClassName: A,
-        isClearable: m
+        showIcon: A,
+        toggleCalendarOnIconClick: !!A,
+        clearButtonClassName: m,
+        isClearable: g
       }
     ) }) : /* @__PURE__ */ S.jsx(
       Q0,
       {
-        selected: b,
+        name: d,
+        selected: x,
         onFocus: t,
-        onChange: w,
+        onChange: C,
         dateFormat: o || "yyyy/MM/dd hh:mm:ss",
         className: `h-[26px] rounded-md border text-center text-fone-base ${i}`,
         calendarClassName: "custom-datepicker-calendar",
@@ -72965,25 +72966,28 @@ process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && type
 See https://s-c.sh/2BAXzed for more info.`), window[CA] += 1);
 const dL = sve`
   .foneDatePicker{
-    height: 26px !important;
+    height: 3.6rem !important;
+    
+    .ant-picker {
+      height: 100%;
+      border-radius: 0.5rem;
+      border-color: #0000003b;
 
-  .ant-picker {
-    height: 100%;
-
-    &.ant-picker-outlined:hover {
+    /* &.ant-picker-outlined:hover {
       border-color: #000;
-    }
-    &.ant-picker-outlined:focus-within {
+    } */
+
+    /* &.ant-picker-outlined:focus-within {
       border-color: #000;
       box-shadow: none;
     }
     .ant-picker-active-bar {
       background-color: #000;
-    }
+    } */
 
     input {
       line-height: unset;
-      font-size: 1.2rem;
+      font-size: 1.5rem;
     }
   }
     /* RangePicker 팝업 전체 */
@@ -73022,7 +73026,16 @@ fL.displayName = "DatePicker3";
 const { RangePicker: lve } = Vl, pL = G.forwardRef(
   ({ value: e, onChange: t, ...n }, r) => /* @__PURE__ */ S.jsxs(ja, { locale: F3, children: [
     /* @__PURE__ */ S.jsx(dL, {}),
-    /* @__PURE__ */ S.jsx("div", { className: "foneDatePicker", children: /* @__PURE__ */ S.jsx(lve, { ...n, ref: r, value: e, onChange: t }) })
+    /* @__PURE__ */ S.jsx("div", { className: "foneDatePicker", children: /* @__PURE__ */ S.jsx(
+      lve,
+      {
+        ...n,
+        ref: r,
+        value: e,
+        onChange: t,
+        popupStyle: { zIndex: 9999 }
+      }
+    ) })
   ] })
 );
 pL.displayName = "DateRangePicker";
@@ -73371,7 +73384,7 @@ const V2 = {
   let g;
   switch (c) {
     case "confirm":
-      g = /* @__PURE__ */ S.jsx(CO, { fontSize: "large", htmlColor: "#4CAF8C" }), o = /* @__PURE__ */ S.jsxs(S.Fragment, { children: [
+      g = /* @__PURE__ */ S.jsx(CO, { className: "text-[2rem]", htmlColor: "#4CAF8C" }), o = /* @__PURE__ */ S.jsxs(S.Fragment, { children: [
         /* @__PURE__ */ S.jsx(
           vr,
           {
@@ -73407,25 +73420,25 @@ const V2 = {
       ] });
       break;
     case "info":
-      g = /* @__PURE__ */ S.jsx(sU, { sx: { fontSize: "3rem" }, htmlColor: "#4D9DE0" }), o = /* @__PURE__ */ S.jsx(vr, { ...m, variant: "contained", onClick: t, children: "확인" });
+      g = /* @__PURE__ */ S.jsx(sU, { className: "text-[2rem]", htmlColor: "#4D9DE0" }), o = /* @__PURE__ */ S.jsx(vr, { ...m, variant: "contained", onClick: t, children: "확인" });
       break;
     case "success":
-      g = /* @__PURE__ */ S.jsx(CO, { sx: { fontSize: "3rem" }, htmlColor: "#4CAF8C" }), o = /* @__PURE__ */ S.jsx(vr, { ...m, variant: "contained", onClick: t, children: "확인" });
+      g = /* @__PURE__ */ S.jsx(CO, { className: "text-[2rem]", htmlColor: "#4CAF8C" }), o = /* @__PURE__ */ S.jsx(vr, { ...m, variant: "contained", onClick: t, children: "확인" });
       break;
     case "warning":
-      g = /* @__PURE__ */ S.jsx(SO, { sx: { fontSize: "3rem" }, htmlColor: "#ffb902" }), o = /* @__PURE__ */ S.jsx(vr, { ...m, variant: "contained", onClick: t, children: "확인" });
+      g = /* @__PURE__ */ S.jsx(SO, { className: "text-[2rem]", htmlColor: "#ffb902" }), o = /* @__PURE__ */ S.jsx(vr, { ...m, variant: "contained", onClick: t, children: "확인" });
       break;
     case "error":
       g = /* @__PURE__ */ S.jsx(
         SO,
         {
-          sx: { fontSize: "3rem" },
+          className: "text-[2rem]",
           htmlColor: "var(--ds-color-danger)"
         }
       ), o = /* @__PURE__ */ S.jsx(S.Fragment, { children: /* @__PURE__ */ S.jsx(vr, { ...m, variant: "contained", onClick: t, children: "예" }) });
       break;
     default:
-      g = null, o = null;
+      g = null;
   }
   return p ? /* @__PURE__ */ S.jsxs(
     o0,
@@ -73450,20 +73463,13 @@ const V2 = {
               display: "flex",
               justifyContent: "space-between",
               alignItems: "center",
-              fontSize: "var(--ds-font-size-subheading)",
-              padding: "var(--ds-font-size-18) var(--ds-font-size-20)"
+              fontSize: "var(--ds-font-size-subheading) !important",
+              // padding:
+              paddingBottom: d !== !0 ? 0 : void 0
             },
             children: [
               n,
-              /* @__PURE__ */ S.jsx(
-                ms,
-                {
-                  "aria-label": "close",
-                  onClick: t,
-                  sx: { color: "var(--fone-black-primary)" },
-                  children: /* @__PURE__ */ S.jsx(g0, {})
-                }
-              )
+              /* @__PURE__ */ S.jsx(ms, { "aria-label": "close", onClick: t, children: /* @__PURE__ */ S.jsx(g0, { fontSize: "large", htmlColor: "#000" }) })
             ]
           }
         ),
@@ -73516,13 +73522,13 @@ const V2 = {
                 // 아래쪽 구분선 제거
               }
             },
-            children: g ? /* @__PURE__ */ S.jsxs(xL, { spacing: "0.8rem", alignItems: "flex-start", children: [
-              /* @__PURE__ */ S.jsx("div", { style: { fontSize: "2rem" }, children: g }),
+            children: g ? /* @__PURE__ */ S.jsxs(xL, { spacing: "0.8rem", alignItems: "center", children: [
+              /* @__PURE__ */ S.jsx("div", { className: "text-[2rem]", children: g }),
               /* @__PURE__ */ S.jsx(
                 "p",
                 {
-                  style: { fontSize: "2rem", paddingRight: "43px" },
-                  className: "whitespace-pre-line text-[var(--fone-black-primary)]",
+                  style: { fontSize: "1.4rem", paddingRight: "43px" },
+                  className: "text-fone-md whitespace-pre-line text-[var(--fone-black-primary)]",
                   children: r
                 }
               )
@@ -73534,7 +73540,7 @@ const V2 = {
           {
             sx: {
               display: "flex",
-              justifyContent: "flex-end",
+              justifyContent: f,
               padding: "var(--ds-font-size-24)"
             },
             children: o
@@ -73659,30 +73665,37 @@ const H2 = ({ children: e, color: t, ...n }) => {
     readOnly: c,
     required: u,
     id: d,
-    ...f
-  }, p) => /* @__PURE__ */ S.jsx(yh, { children: /* @__PURE__ */ S.jsx(
+    multiline: f,
+    minRows: p,
+    maxRows: A,
+    ...m
+  }, g) => /* @__PURE__ */ S.jsx(yh, { sx: { width: "100%", border: "none" }, children: /* @__PURE__ */ S.jsx(
     wh,
     {
       value: e,
       onChange: t,
-      className: n,
       disabled: r,
       startAdornment: o,
       endAdornment: i,
       type: l,
+      multiline: f,
+      minRows: p,
+      maxRows: A,
       readOnly: c,
       required: u,
       id: d,
-      ...f,
-      ref: p,
+      ...m,
+      ref: g,
       sx: {
-        height: "3.6rem",
+        height: f !== !0 ? "3.6rem" : "auto",
         fontSize: "1.5rem",
         "& .MuiInputBase-input": {
           height: "100%",
           padding: "0 1.25rem"
         },
+        overflow: "hidden",
         borderRadius: "var(--ds-radius-sm)",
+        // border: "1px solid red",
         // "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
         //   borderColor: "var(--fone-black-primary)",
         // },
@@ -73691,7 +73704,8 @@ const H2 = ({ children: e, color: t, ...n }) => {
         },
         "&.Mui-focused .MuiSelect-select": {
           color: "var(--fone-black-primary)"
-        }
+        },
+        ...s
       }
     }
   ) })
@@ -73707,26 +73721,31 @@ const mxe = ({
   multiline: s,
   minRows: l,
   maxRows: c,
-  ...u
+  className: u,
+  style: d,
+  sx: f,
+  ...p
 }) => /* @__PURE__ */ S.jsx(
   Fv,
   {
     name: e,
     control: t,
     defaultValue: n,
-    render: ({ field: d }) => /* @__PURE__ */ S.jsx(
+    render: ({ field: A }) => /* @__PURE__ */ S.jsx(
       wL,
       {
-        ...d,
-        ...u,
+        ...A,
+        ...p,
         readOnly: i,
         multiline: s,
         minRows: l,
         maxRows: c,
-        value: r ?? d.value,
-        onChange: (f) => {
-          d.onChange(f.target.value), o == null || o(f.target.value);
-        }
+        className: u,
+        value: r ?? A.value,
+        onChange: (m) => {
+          A.onChange(m.target.value), o == null || o(m.target.value);
+        },
+        sx: f
       }
     )
   }
@@ -74093,14 +74112,15 @@ const CL = ({
     sx: d,
     displayEmpty: f = !0,
     all: p = !0,
-    defaultValue: A,
-    ...m
-  }, g) => {
-    const h = p ? [{ label: "전체", value: " " }, ...s ?? []] : s ?? [];
+    select: A = !1,
+    defaultValue: m,
+    ...g
+  }, h) => {
+    const y = p && !A ? [{ label: "전체", value: " " }, ...s ?? []] : s ?? [];
     return /* @__PURE__ */ S.jsx(yh, { fullWidth: u, children: /* @__PURE__ */ S.jsxs(
       Tve,
       {
-        ref: g,
+        ref: h,
         name: t,
         IconComponent: lU,
         sx: {
@@ -74126,25 +74146,25 @@ const CL = ({
         className: e,
         variant: r,
         size: o,
-        value: l || (p ? " " : A),
+        value: l || (p ? " " : m),
         onChange: c,
         disabled: i,
         displayEmpty: f,
-        renderValue: (y) => {
-          var x;
-          return y === "" || y === void 0 || y === null || Array.isArray(y) && y.length === 0 ? /* @__PURE__ */ S.jsx("span", { style: { fontSize: "1.5rem" }, children: "선택" }) : /* @__PURE__ */ S.jsx("span", { style: { fontSize: "1.5rem" }, children: ((x = h == null ? void 0 : h.find((w) => String(w.value) === String(y))) == null ? void 0 : x.label) ?? String(y) });
+        renderValue: (b) => {
+          var w;
+          return b === "" || b === void 0 || b === null || Array.isArray(b) && b.length === 0 ? /* @__PURE__ */ S.jsx("span", { style: { fontSize: "1.5rem" }, children: "선택" }) : /* @__PURE__ */ S.jsx("span", { style: { fontSize: "1.5rem" }, children: ((w = y == null ? void 0 : y.find((C) => String(C.value) === String(b))) == null ? void 0 : w.label) ?? String(b) });
         },
-        ...m,
+        ...g,
         children: [
-          /* @__PURE__ */ S.jsx(ef, { value: "", disabled: !0, sx: { display: "none" }, children: "선택" }),
-          n ?? h.map((y, b) => /* @__PURE__ */ S.jsx(
+          A && /* @__PURE__ */ S.jsx(ef, { value: "", sx: { fontSize: "1.5rem" }, children: "선택" }),
+          n ?? y.map((b, x) => /* @__PURE__ */ S.jsx(
             ef,
             {
-              value: y == null ? void 0 : y.value,
+              value: b == null ? void 0 : b.value,
               sx: { fontSize: "1.5rem" },
-              children: y.label
+              children: b.label
             },
-            `menuItem-${b}`
+            `menuItem-${x}`
           ))
         ]
       }
@@ -81681,7 +81701,14 @@ const Z0e = () => v.useRef(void 0), kxe = ({
     });
   }, [y, k, _, M]), /* @__PURE__ */ S.jsxs("div", { className: "flex h-full flex-col gap-2 bg-[var(--ds-white)]", children: [
     /* @__PURE__ */ S.jsxs(dC, { direction: "row", spacing: 2, className: "justify-between", children: [
-      n && /* @__PURE__ */ S.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ S.jsx("h2", { className: "font-[var(--ds-font-weight-bold)] text-[var(--ds-font-size-subheading)]", children: n }) }),
+      n && /* @__PURE__ */ S.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ S.jsx(
+        "h2",
+        {
+          className: "font-[var(--ds-font-weight-bold)] text-[var(--ds-font-size-subheading)]",
+          style: { fontSize: "var(--ds-font-size-subheading)" },
+          children: n
+        }
+      ) }),
       /* @__PURE__ */ S.jsxs("div", { className: "flex items-center gap-2", children: [
         u && /* @__PURE__ */ S.jsx(
           ts,