@pfct/purple 1.5.0-rc.7 → 1.5.0-rc.8

package/dist/chunks/{index.styled.CcpQ8zPL.js → index.DD9gwgDi.js}

@@ -1,48 +1,50 @@
-import { css as n } from "@emotion/react";
-import o from "@emotion/styled";
-import { Headline4 as _, Headline3 as E, Title3 as R } from "../core/Typography/index.es.js";
-import { Smaller as y, Larger as b } from "../utils/media.util.es.js";
-import { basicColors as r, semanticColors as L, generateHexWithAlphaInLightMode as V } from "../core/Colors/index.es.js";
+import { j as t } from "./jsx-runtime.Drh4NO5G.js";
+import k, { useState as I, useEffect as T, useCallback as A, useRef as F } from "react";
+import { ModalContent as V } from "../components/LegacyModal/BaseModal/index.styled.es.js";
+import { Overlay as G } from "../components/OverlayRoot/index.styled.es.js";
+import { useOverlayPreventScroll as M } from "../hooks/useOverlayPreventScroll.es.js";
+import { css as a } from "@emotion/react";
+import { basicColors as i, semanticColors as U, generateHexWithAlphaInLightMode as Z } from "../core/Colors/index.es.js";
 import "../utils/GenerateColorStyle/mini-button.es.js";
-import A from "../utils/GenerateColorStyle/datepicker.es.js";
-import { j as i } from "./jsx-runtime.Drh4NO5G.js";
-import { title2 as F, title4 as G } from "../core/TextStyles/index.es.js";
+import q from "../utils/GenerateColorStyle/datepicker.es.js";
+import r from "@emotion/styled";
+import { Smaller as f, Larger as b } from "../utils/media.util.es.js";
+import { title2 as J, title4 as K } from "../core/TextStyles/index.es.js";
 import "../components/ui/typography.es.js";
 import "../components/Accordion/index.es.js";
 import "../components/Badge/IconBadge/index.styled.es.js";
 import "../components/Badge/TextBadge/index.styled.es.js";
-import Z, { useState as I, useEffect as w, useCallback as q, useRef as J } from "react";
 import "../components/Loading/Skeleton/index.es.js";
-import { SpinnerWrapper as K } from "../components/Loading/Spinner/index.styled.es.js";
+import { SpinnerWrapper as Q } from "../components/Loading/Spinner/index.styled.es.js";
 import "../components/Card/index.styled.es.js";
 import "../components/Comment/index.es.js";
+import "../icons/src/icons/Calendar.es.js";
 import "../icons/src/icons/Alarm_fill.es.js";
-import "../icons/src/icons/Cancel.es.js";
-import "../icons/src/icons/Cart_fill.es.js";
 import "../icons/src/icons/Chevron_down.es.js";
-import "../icons/src/icons/Check.es.js";
+import "../icons/src/icons/Cancel_circle.es.js";
 import "../icons/src/icons/Chevron_right.es.js";
 import "../icons/src/icons/Chevron_up.es.js";
-import "../icons/src/icons/Double_Chevron_right.es.js";
-import "../icons/src/icons/Eye_fill.es.js";
 import "../icons/src/icons/Double_Chevron_left.es.js";
+import "../icons/src/icons/Cart_fill.es.js";
+import "../icons/src/icons/Eye_fill.es.js";
+import "../icons/src/icons/Cancel.es.js";
+import "../icons/src/icons/Eye_slash_fill.es.js";
 import "../icons/src/icons/Filter.es.js";
 import "../icons/src/icons/Information.es.js";
-import "../icons/src/icons/Eye_slash_fill.es.js";
 import "../icons/src/icons/Menu.es.js";
-import "../icons/src/icons/Plus.es.js";
 import "../icons/src/icons/More.es.js";
-import "../icons/src/icons/Person_fill.es.js";
+import "../icons/src/icons/Double_Chevron_right.es.js";
+import "../icons/src/icons/Check.es.js";
 import "../icons/src/icons/Question_circle.es.js";
 import "../icons/src/icons/Re.es.js";
-import "../icons/src/icons/Setting_fill.es.js";
-import "../icons/src/icons/Calendar.es.js";
 import "../icons/src/icons/Search.es.js";
+import "../icons/src/icons/Person_fill.es.js";
+import "../icons/src/icons/Setting_fill.es.js";
 import "../icons/src/icons/Store.es.js";
 import "../icons/src/icons/Share.es.js";
-import "../icons/src/icons/Cancel_circle.es.js";
 import "../icons/src/icons/Chevron_left.es.js";
-import x from "../utils/GenerateColorStyle/control/radio-button.es.js";
+import "../icons/src/icons/Plus.es.js";
+import y from "../utils/GenerateColorStyle/control/radio-button.es.js";
 import "../components/Control/CheckMark/index.styled.es.js";
 import "../components/Control/Switch/index.styled.es.js";
 import "../components/DatePicker/BaseDatePicker/index.styled.es.js";
@@ -59,11 +61,10 @@ import "../components/DatePicker/BaseDatePicker/hooks/index.util.es.js";
 import "../components/DatePicker/SingleDatePickerModal/index.styled.es.js";
 import "../components/DatePicker/SingleDatePickerModal/useSingleDatePickerModal.es.js";
 import "../components/DatePicker/RangeDatePickerModal/index.styled.es.js";
-import { useOverlayPreventScroll as O } from "../hooks/useOverlayPreventScroll.es.js";
-import { S as Q } from "./index.BB3W3jfD.js";
-import { c as U } from "./index.Cc-miKAT.js";
-import { cn as X } from "../lib/utils.es.js";
-import { zIndex as k } from "../constants/style.constants.es.js";
+import { S as X } from "./index.BB3W3jfD.js";
+import { c as Y } from "./index.Cc-miKAT.js";
+import { cn as ee } from "../lib/utils.es.js";
+import { zIndex as $ } from "../constants/style.constants.es.js";
 import "../components/DatePicker/RangeDatePickerModal/useRangeDatePickerModal.es.js";
 import "../components/Divider/index.styled.es.js";
 import "./index.styled.DmJ27_dc.js";
@@ -75,32 +76,34 @@ import "../components/Navigation/BaseNavigation/index.styled.es.js";
 import "../components/Navigation/constant.es.js";
 import "../components/Segment/BaseSegment/index.styled.es.js";
 import "../components/Segment/ExtendSegment/index.styled.es.js";
-import { ButtonMargin as N, TitleWrapper as Y, SubTitle as ee, className as oe } from "../components/BottomSheet/TitleBottomSheet/index.styled.es.js";
-import { scrollStyle as te } from "../style/common.es.js";
+import { Headline4 as D, Headline3 as oe, Title3 as te } from "../core/Typography/index.es.js";
+import { ButtonMargin as N, TitleWrapper as re, SubTitle as ie, className as ne } from "../components/BottomSheet/TitleBottomSheet/index.styled.es.js";
+import { scrollStyle as ae } from "../style/common.es.js";
+import { Wrapper as se, LineButtonWrapper as le, Comment as pe, Body as de, Header as ce, SubTitle as ge, Footer as H } from "../components/LegacyModal/index.styled.es.js";
+import { UnderLineMiniButton as be } from "../components/MiniButton/UnderLineMiniButton/index.es.js";
 import "./index.IrMKAFqG.js";
 import "../components/ui/bottomSheet.es.js";
-import W from "../utils/GenerateColorStyle/tag.es.js";
-import re from "../hooks/useResize.es.js";
-import { ContentWrapper as ie, Content as ne, HeaderWrapper as ae, ChildrenWrapper as se, FooterWrapper as D } from "../components/BottomSheet/BaseBottomSheet/index.styled.es.js";
-import { Overlay as le } from "../components/OverlayRoot/index.styled.es.js";
-import { Navigation as pe } from "../components/Navigation/index.es.js";
-import { NavigationWrapper as de } from "../components/BottomSheet/NavBottomSheet/index.styled.es.js";
-import ce from "../utils/GenerateColorStyle/progress-bar.es.js";
-const ge = (e) => {
-  const t = r[`${e}400`], a = "transparent", s = r.white, p = r.white, d = r[`${e}100`], c = "transparent", g = r.white, l = r.white;
+import O from "../utils/GenerateColorStyle/tag.es.js";
+import ue from "../hooks/useResize.es.js";
+import { ContentWrapper as me, Content as xe, HeaderWrapper as he, ChildrenWrapper as ye, FooterWrapper as z } from "../components/BottomSheet/BaseBottomSheet/index.styled.es.js";
+import { Navigation as fe } from "../components/Navigation/index.es.js";
+import { NavigationWrapper as ve } from "../components/BottomSheet/NavBottomSheet/index.styled.es.js";
+import $e from "../utils/GenerateColorStyle/progress-bar.es.js";
+const Ce = (e) => {
+  const o = i[`${e}400`], n = "transparent", s = i.white, l = i.white, d = i[`${e}100`], c = "transparent", g = i.white, p = i.white;
   return {
     default: {
       on: {
-        containerColor: t,
-        borderColor: a,
+        containerColor: o,
+        borderColor: n,
         textColor: s,
-        iconColor: p
+        iconColor: l
       },
       off: {
-        containerColor: r.white,
-        borderColor: r.gray50,
-        textColor: L.chipDefaultText,
-        iconColor: r.gray300
+        containerColor: i.white,
+        borderColor: i.gray50,
+        textColor: U.chipDefaultText,
+        iconColor: i.gray300
       }
     },
     disabled: {
@@ -108,61 +111,61 @@ const ge = (e) => {
         containerColor: d,
         borderColor: c,
         textColor: g,
-        iconColor: l
+        iconColor: p
       },
       off: {
-        containerColor: r.white,
-        borderColor: r.gray25,
-        textColor: r.gray100,
-        iconColor: r.gray100
+        containerColor: i.white,
+        borderColor: i.gray25,
+        textColor: i.gray100,
+        iconColor: i.gray100
       }
     }
   };
-}, mt = o.div`
-	${y(n`
+}, zt = r.div`
+	${f(a`
 		display: none;
 	`)}
-`, ht = o.div`
-	${b(n`
+`, Lt = r.div`
+	${b(a`
 		display: none;
 	`)}
-`, be = r.red400, ue = "16px", M = n`
-	background-color: ${be};
-`, xt = o.div`
-	${M};
+`, we = i.red400, ke = "16px", L = a`
+	background-color: ${we};
+`, Pt = r.div`
+	${L};
 
 	width: 5px;
 	height: 5px;
 	border-radius: 50%;
-`, yt = o.div`
-	${M};
+`, _t = r.div`
+	${L};
 
-	height: ${ue};
+	height: ${ke};
 	padding: 0 5px;
 	border-radius: 8px;
 
 	display: flex;
 	align-items: center;
 	justify-content: center;
-`, ft = o.div`
+`, Et = r.div`
 	line-height: initial;
 
 	font-size: 11px;
 	font-weight: 500;
-	color: ${r.white};
+	color: ${i.white};
 	letter-spacing: -0.2px;
-`, vt = o.div`
+`, Rt = r.div`
 	position: absolute;
 	width: 100%;
 	top: 0;
 	height: 3px;
-	background-color: ${r.gray50};
-`, $t = o.div`
+	background-color: ${i.gray50};
+`, At = r.div`
 	width: ${({ progress: e }) => e}%;
-	background-color: ${({ colorType: e }) => ce(e).upperColor};
+	background-color: ${({ colorType: e }) => $e(e).upperColor};
 	height: 100%;
 	transition: width 3s ease-in-out;
-`, me = ({ colorType: e }) => /* @__PURE__ */ i.jsx(K, { color: e === "white" ? r.white : r.gray200 }), he = U(
+`, Te = ({ colorType: e }) => /* @__PURE__ */ t.jsx(Q, { color: e === "white" ? i.white : i.gray200 }), je = Y(
   "border-none rounded-[10px] inline-flex items-center justify-center whitespace-nowrap p-3.75 typo-h6 h-[50px] w-full",
   {
     variants: {
@@ -313,30 +316,33 @@ const ge = (e) => {
     }
   }
 );
-function C({
+function u({
   className: e,
-  asChild: t = !1,
-  purpose: a,
+  asChild: o = !1,
+  purpose: n,
   colorType: s,
-  children: p,
+  children: l,
   disabled: d,
   isLoading: c,
   ...g
 }) {
-  const l = t ? Q : "button";
-  return /* @__PURE__ */ i.jsx(
-    l,
+  const p = o ? X : "button";
+  return /* @__PURE__ */ t.jsx(
+    p,
     {
       ...g,
       "data-slot": "button",
-      className: X(he({ colorType: s, purpose: a, className: e })),
-      type: g.type ?? (a === "main" ? "submit" : "button"),
+      className: ee(je({ colorType: s, purpose: n, className: e })),
+      type: g.type ?? (n === "main" ? "submit" : "button"),
       disabled: d || c,
-      children: c ? /* @__PURE__ */ i.jsx("div", { className: "h-[25px] w-[25px]", children: /* @__PURE__ */ i.jsx(me, { colorType: "white" }) }) : p
+      children: c ? /* @__PURE__ */ t.jsx("div", { className: "h-[25px] w-[25px]", children: /* @__PURE__ */ t.jsx(Te, { colorType: "white" }) }) : l
     }
   );
 }
-const Ct = o.input`
+const Be = ({ left: e, right: o }) => /* @__PURE__ */ t.jsxs("div", { className: "flex w-full gap-[10px]", children: [
+  /* @__PURE__ */ t.jsx(u, { ...e, purpose: (e == null ? void 0 : e.purpose) || "sub", children: e.children }),
+  /* @__PURE__ */ t.jsx(u, { ...o, purpose: (o == null ? void 0 : o.purpose) || "main", type: (o == null ? void 0 : o.type) || "submit", children: o.children })
+] }), Ft = r.input`
 	box-sizing: border-box;
 	-webkit-appearance: none;
 	appearance: none;
@@ -353,23 +359,23 @@ const Ct = o.input`
 	background: transparent;
 	cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
 
-	background-color: ${({ colorType: e, disabled: t }) => x(e)[t ? "disabled" : "default"].off.containerColor};
-	border-color: ${({ colorType: e, disabled: t }) => x(e)[t ? "disabled" : "default"].off.borderColor};
+	background-color: ${({ colorType: e, disabled: o }) => y(e)[o ? "disabled" : "default"].off.containerColor};
+	border-color: ${({ colorType: e, disabled: o }) => y(e)[o ? "disabled" : "default"].off.borderColor};
 
 	&:checked {
 		border-width: 6px;
-		background-color: ${({ colorType: e, disabled: t }) => x(e)[t ? "disabled" : "default"].on.containerColor};
-		border-color: ${({ colorType: e, disabled: t }) => x(e)[t ? "disabled" : "default"].on.borderColor};
+		background-color: ${({ colorType: e, disabled: o }) => y(e)[o ? "disabled" : "default"].on.containerColor};
+		border-color: ${({ colorType: e, disabled: o }) => y(e)[o ? "disabled" : "default"].on.borderColor};
 	}
 
 	&:focus {
 		outline: none;
 	}
-`, u = {
+`, m = {
   innerWrapper: "datepicker-inner-wrapper",
   dot: "datepicker-dot",
   rangeBackgroundWrapper: "datepicker-range-background-wrapper"
-}, m = 100, wt = o.div`
+}, x = 100, Vt = r.div`
 	width: 5px;
 	height: 5px;
 	border-radius: 50%;
@@ -377,25 +383,25 @@ const Ct = o.input`
 	position: absolute;
 	left: 47%;
 	bottom: 5.86px;
-`, v = n`
-	width: ${m}%;
-	height: ${m}%;
-`, h = o.div`
-	${v};
+`, C = a`
+	width: ${x}%;
+	height: ${x}%;
+`, h = r.div`
+	${C};
 	position: relative;
 	/* height가 안 정해진 상태에서 height = width 적용되는 방법 */
-	padding-bottom: ${m}%;
-`, kt = o.div`
-	${v};
+	padding-bottom: ${x}%;
+`, Gt = r.div`
+	${C};
 
 	position: absolute;
 	left: 0;
 
-	${({ rangeBackgroundColor: e }) => e && n`
+	${({ rangeBackgroundColor: e }) => e && a`
 			background: ${e};
 		`}
-`, Tt = o.div`
-	${v};
+`, Ut = r.div`
+	${C};
 
 	position: absolute;
 	left: 0;
@@ -407,44 +413,44 @@ const Ct = o.input`
 
 	border-radius: 50%;
 
-	${({ circleBackgroundColor: e }) => e && n`
+	${({ circleBackgroundColor: e }) => e && a`
 			background-color: ${e};
 		`};
-`, Bt = o(h)``, jt = o(h)`
+`, Zt = r(h)``, qt = r(h)`
 	cursor: pointer;
 
-	.${u.innerWrapper} {
+	.${m.innerWrapper} {
 		:hover {
-			background-color: ${({ colorType: e }) => A(e).hoverContainerColor};
+			background-color: ${({ colorType: e }) => q(e).hoverContainerColor};
 		}
 	}
 
-	.${u.dot} {
-		background-color: ${r.gray200};
+	.${m.dot} {
+		background-color: ${i.gray200};
 	}
-`, St = o(h)`
+`, Jt = r(h)`
 	cursor: not-allowed;
 
-	.${u.dot} {
-		background-color: ${r.gray100};
+	.${m.dot} {
+		background-color: ${i.gray100};
 	}
-`, H = o(h)`
+`, P = r(h)`
 	cursor: pointer;
 
-	.${u.dot} {
-		background-color: ${r.white};
+	.${m.dot} {
+		background-color: ${i.white};
 	}
-`, Wt = o(H)`
-	.${u.rangeBackgroundWrapper} {
-		left: ${m / 2}%;
-		width: ${m / 2}%;
+`, Kt = r(P)`
+	.${m.rangeBackgroundWrapper} {
+		left: ${x / 2}%;
+		width: ${x / 2}%;
 	}
-`, It = o(H)`
-	.${u.rangeBackgroundWrapper} {
-		width: ${m / 2}%;
+`, Qt = r(P)`
+	.${m.rangeBackgroundWrapper} {
+		width: ${x / 2}%;
 	}
-`, Ot = o(h)``, Nt = o.div`
-	${v};
+`, Xt = r(h)``, Yt = r.div`
+	${C};
 
 	position: absolute;
 	left: 0;
@@ -453,21 +459,21 @@ const Ct = o.input`
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-`, xe = Z.memo(
-  ({ className: e, visible: t, onClick: a, zIndex: s = k.modal, children: p }) => {
-    const [d, c] = I(!1), g = (l) => {
-      l.target === l.currentTarget && (a == null || a());
+`, _ = k.memo(
+  ({ className: e, visible: o, onClick: n, zIndex: s = $.modal, children: l }) => {
+    const [d, c] = I(!1), g = (p) => {
+      p.target === p.currentTarget && (n == null || n());
     };
-    return w(() => {
-      let l;
-      return t ? c(!0) : l = setTimeout(() => c(!1), 400), () => {
-        l !== void 0 && clearTimeout(l);
+    return T(() => {
+      let p;
+      return o ? c(!0) : p = setTimeout(() => c(!1), 400), () => {
+        p !== void 0 && clearTimeout(p);
       };
-    }, [t]), O(t), d ? /* @__PURE__ */ i.jsx(le, { className: e, visible: t, zIndex: s, onClick: g, children: p }) : null;
+    }, [o]), M(o), d ? /* @__PURE__ */ t.jsx(G, { className: e, visible: o, zIndex: s, onClick: g, children: l }) : null;
   }
-), T = (e) => /* @__PURE__ */ i.jsx(D, { children: /* @__PURE__ */ i.jsx(C, { ...e }) }), B = (e) => /* @__PURE__ */ i.jsx(D, { children: /* @__PURE__ */ i.jsxs("div", { className: "flex w-full gap-[10px]", children: [
-  /* @__PURE__ */ i.jsx(
-    C,
+), j = (e) => /* @__PURE__ */ t.jsx(z, { children: /* @__PURE__ */ t.jsx(u, { ...e }) }), B = (e) => /* @__PURE__ */ t.jsx(z, { children: /* @__PURE__ */ t.jsxs("div", { className: "flex w-full gap-[10px]", children: [
+  /* @__PURE__ */ t.jsx(
+    u,
     {
       ...e.left,
       onClick: e.left.onClick,
@@ -478,8 +484,8 @@ const Ct = o.input`
       children: e.left.children
     }
   ),
-  /* @__PURE__ */ i.jsx(
-    C,
+  /* @__PURE__ */ t.jsx(
+    u,
     {
       onClick: e.right.onClick,
       colorType: e.right.colorType,
@@ -490,79 +496,79 @@ const Ct = o.input`
       children: e.right.children
     }
   )
-] }) }), j = ({ children: e, ...t }) => {
-  const a = J(null);
-  return w(() => {
+] }) }), S = ({ children: e, ...o }) => {
+  const n = F(null);
+  return T(() => {
     var s;
-    (s = a.current) == null || s.scroll(0, 0);
-  }, []), /* @__PURE__ */ i.jsx(se, { ref: a, ...t, children: e });
-}, $ = ({ children: e }) => /* @__PURE__ */ i.jsx(ae, { children: e }), S = ({
+    (s = n.current) == null || s.scroll(0, 0);
+  }, []), /* @__PURE__ */ t.jsx(ye, { ref: n, ...o, children: e });
+}, w = ({ children: e }) => /* @__PURE__ */ t.jsx(he, { children: e }), W = ({
   visible: e,
-  onMaskClick: t,
-  className: a,
-  zIndex: s = k.modal,
-  minHeight: p,
+  onMaskClick: o,
+  className: n,
+  zIndex: s = $.modal,
+  minHeight: l,
   children: d
 }) => {
-  const [c, g] = I(0), l = q(() => {
+  const [c, g] = I(0), p = A(() => {
     g(window == null ? void 0 : window.innerHeight);
   }, []);
-  return w(() => {
-    l();
-  }, [l]), re(l), O(e), e ? /* @__PURE__ */ i.jsx(xe, { visible: e, className: a, onClick: t, zIndex: s, children: /* @__PURE__ */ i.jsx(ie, { children: /* @__PURE__ */ i.jsx(ne, { visible: e, zIndex: s, minHeight: p, vh: c, children: d }) }) }) : null;
-}, Dt = Object.assign(S, {
-  SingleButton: T,
+  return T(() => {
+    p();
+  }, [p]), ue(p), M(e), e ? /* @__PURE__ */ t.jsx(_, { visible: e, className: n, onClick: o, zIndex: s, children: /* @__PURE__ */ t.jsx(me, { children: /* @__PURE__ */ t.jsx(xe, { visible: e, zIndex: s, minHeight: l, vh: c, children: d }) }) }) : null;
+}, er = Object.assign(W, {
+  SingleButton: j,
   DoubleButton: B,
-  Body: j,
-  Header: $
-}), ye = ({ children: e }) => /* @__PURE__ */ i.jsx($, { children: /* @__PURE__ */ i.jsx(de, { children: e }) }), fe = (e) => /* @__PURE__ */ i.jsx(ye, { children: /* @__PURE__ */ i.jsx(pe, { ...e }) }), Mt = Object.assign(S, {
-  Header: $,
-  Navigation: fe,
-  Body: j,
-  SingleButton: T,
+  Body: S,
+  Header: w
+}), Se = ({ children: e }) => /* @__PURE__ */ t.jsx(w, { children: /* @__PURE__ */ t.jsx(ve, { children: e }) }), We = (e) => /* @__PURE__ */ t.jsx(Se, { children: /* @__PURE__ */ t.jsx(fe, { ...e }) }), or = Object.assign(W, {
+  Header: w,
+  Navigation: We,
+  Body: S,
+  SingleButton: j,
   DoubleButton: B
-}), ve = ({ title: e, subTitle: t, hasContentPadding: a = !0 }) => /* @__PURE__ */ i.jsxs(Y, { contentPadding: a, children: [
-  e && /* @__PURE__ */ i.jsx(_, { children: e }),
-  t && /* @__PURE__ */ i.jsx(ee, { className: oe.subTitle, children: t })
-] }), $e = (e) => /* @__PURE__ */ i.jsx(N, { children: /* @__PURE__ */ i.jsx(T, { ...e }) }), Ce = (e) => /* @__PURE__ */ i.jsx(N, { children: /* @__PURE__ */ i.jsx(B, { ...e }) }), Ht = Object.assign(S, {
-  Header: $,
-  Body: j,
-  Title: ve,
-  SingleButton: $e,
-  DoubleButton: Ce
-}), we = o.div`
+}), Oe = ({ title: e, subTitle: o, hasContentPadding: n = !0 }) => /* @__PURE__ */ t.jsxs(re, { contentPadding: n, children: [
+  e && /* @__PURE__ */ t.jsx(D, { children: e }),
+  o && /* @__PURE__ */ t.jsx(ie, { className: ne.subTitle, children: o })
+] }), Ie = (e) => /* @__PURE__ */ t.jsx(N, { children: /* @__PURE__ */ t.jsx(j, { ...e }) }), Me = (e) => /* @__PURE__ */ t.jsx(N, { children: /* @__PURE__ */ t.jsx(B, { ...e }) }), tr = Object.assign(W, {
+  Header: w,
+  Body: S,
+  Title: Oe,
+  SingleButton: Ie,
+  DoubleButton: Me
+}), De = r.div`
 	& > div > .select-box {
 		cursor: pointer;
 	}
 	position: relative;
-`, ke = o.div`
+`, Ne = r.div`
 	position: absolute;
-	z-index: ${k.basicLayer + 1};
+	z-index: ${$.basicLayer + 1};
 	width: 100%;
 	height: max-content;
 
-	${b(n`
+	${b(a`
 		top: 70px;
 	`)}
-`, Te = o.div`
+`, He = r.div`
 	height: 80px;
 	pointer-events: none;
-`, Be = o.div`
-	box-shadow: 0 2px 10px ${V(r.black, "20%")};
-	background-color: ${r.white};
+`, ze = r.div`
+	box-shadow: 0 2px 10px ${Z(i.black, "20%")};
+	background-color: ${i.white};
 	border-radius: 10px;
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	max-height: ${65 * 4.5}px;
 	overflow-y: scroll;
-`, je = o.div`
+`, Le = r.div`
 	width: 100%;
 	height: 50px;
 	padding: 15px 25px;
 	cursor: pointer;
-	${F({ color: r.gray400 })};
-	background-color: ${r.white};
+	${J({ color: i.gray400 })};
+	background-color: ${i.white};
 
 	&:first-of-type {
 		border-top-right-radius: 10px;
@@ -575,13 +581,13 @@ const Ct = o.input`
 	}
 
 	&:hover {
-		background-color: ${r.gray25};
+		background-color: ${i.gray25};
 	}
 
 	&:active {
-		background-color: ${r.gray50};
+		background-color: ${i.gray50};
 	}
-`, Se = o.div`
+`, Pe = r.div`
 	position: absolute;
 	z-index: 10;
 	right: 20px;
@@ -589,30 +595,30 @@ const Ct = o.input`
 	cursor: pointer;
 	transform: ${({ rotateArrow: e }) => e ? "rotate(180deg)" : "rotate(0)"};
 	pointer-events: none;
-`, We = o.div`
-	${y(n`
+`, _e = r.div`
+	${f(a`
 		display: none;
 	`)}
-`, Ie = o.div`
-	${b(n`
+`, Ee = r.div`
+	${b(a`
 		display: none;
 	`)}
-`, zt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+`, rr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Desktop: We,
-  IconWrapper: Se,
-  Item: je,
-  ItemList: Be,
-  ItemListWrapper: ke,
-  ListBottomMargin: Te,
-  Mobile: Ie,
-  Wrapper: we
-}, Symbol.toStringTag, { value: "Module" })), Oe = {
+  Desktop: _e,
+  IconWrapper: Pe,
+  Item: Le,
+  ItemList: ze,
+  ItemListWrapper: Ne,
+  ListBottomMargin: He,
+  Mobile: Ee,
+  Wrapper: De
+}, Symbol.toStringTag, { value: "Module" })), Re = {
   Text: "chip-item-text"
-}, z = 38, Pt = o.span`
+}, E = 38, ir = r.span`
 	display: inline-flex;
 	min-width: max-content;
-	height: ${z}px;
+	height: ${E}px;
 	gap: 2px;
 	padding: 8px 0 8px 12px;
 	padding-right: ${({ hasRightIcon: e }) => e ? "7px" : "12px"};
@@ -620,73 +626,73 @@ const Ct = o.input`
 
 	border-radius: 22px;
 
-	${({ disabled: e, selected: t, colorType: a }) => {
-  const s = ge(a), p = e ? "disabled" : "default", d = t ? "on" : "off";
-  return n`
-			background-color: ${s[p][d].containerColor};
-			border: 1px solid ${s[p][d].borderColor};
-			.${Oe.Text} {
-				color: ${s[p][d].textColor};
+	${({ disabled: e, selected: o, colorType: n }) => {
+  const s = Ce(n), l = e ? "disabled" : "default", d = o ? "on" : "off";
+  return a`
+			background-color: ${s[l][d].containerColor};
+			border: 1px solid ${s[l][d].borderColor};
+			.${Re.Text} {
+				color: ${s[l][d].textColor};
 			}
 			svg > path {
-				fill: ${s[p][d].iconColor};
+				fill: ${s[l][d].iconColor};
 			}
 		`;
 }}
 
-	${({ selected: e }) => !e && n`
+	${({ selected: e }) => !e && a`
 			cursor: pointer;
 		`}
-`, _t = o.span`
+`, nr = r.span`
 	cursor: pointer;
 	display: flex;
-`, P = {
+`, R = {
   ControlIconContainer: 2
-}, f = z, Ne = 25, De = r.white, Et = o.div`
+}, v = E, Ae = 25, Fe = i.white, ar = r.div`
 	display: flex;
 	align-items: center;
 	position: relative;
 	overflow: hidden;
 
 	width: 100%;
-`, Rt = o.div`
-	${te}
+`, sr = r.div`
+	${ae}
 
 	display: flex;
 	gap: 5px;
-	z-index: ${P.ControlIconContainer - 1};
+	z-index: ${R.ControlIconContainer - 1};
 
-	${({ hasIconArea: e }) => e && n`
-			padding-left: ${f + 8}px;
+	${({ hasIconArea: e }) => e && a`
+			padding-left: ${v + 8}px;
 		`}
 	padding-right: 20px;
-`, Lt = o.div`
+`, lr = r.div`
 	cursor: pointer;
 	position: absolute;
 	left: 0;
 	top: 0;
 
-	z-index: ${P.ControlIconContainer};
+	z-index: ${R.ControlIconContainer};
 
-	background-color: ${De};
-	width: ${f}px;
-	height: ${f}px;
-`, Vt = o.div`
-	width: ${Ne}px;
+	background-color: ${Fe};
+	width: ${v}px;
+	height: ${v}px;
+`, pr = r.div`
+	width: ${Ae}px;
 	height: 100%;
 
 	/* TODO: 컬러, 범위, 여백 수정 필요 */
 	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.01) 100%);
 
 	position: absolute;
-	left: ${f}px;
+	left: ${v}px;
 	top: 0;
-`, At = o.div`
+`, dr = r.div`
 	width: 100%;
 	height: 100%;
 	border-radius: 50%;
 
-	background: ${r.gray50};
+	background: ${i.gray50};
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -694,9 +700,9 @@ const Ct = o.input`
 	position: absolute;
 	left: 0;
 	top: 0;
-`, Ft = o.div`
-	${({ type: e, colorType: t }) => G({ color: W({ type: e, colorType: t }).textColor })};
-	background-color: ${({ type: e, colorType: t }) => W({ type: e, colorType: t }).backgroundColor};
+`, cr = r.div`
+	${({ type: e, colorType: o }) => K({ color: O({ type: e, colorType: o }).textColor })};
+	background-color: ${({ type: e, colorType: o }) => O({ type: e, colorType: o }).backgroundColor};
 
 	box-sizing: border-box;
 	width: max-content;
@@ -705,103 +711,122 @@ const Ct = o.input`
 	align-items: center;
 	justify-content: center;
 	display: ${({ inline: e }) => e ? "inline-flex" : "flex"};
-`, Gt = o.div`
-	${y(n`
+`, gr = r.div`
+	${f(a`
 		padding: 25px 0;
 	`)}
 
-	${b(n`
+	${b(a`
 		padding: 80px 80px 25px;
 	`)}
 
 	/** deletePaddingTop = true 이면, 사용처 BasicLayout 에서 padding-top 관리 */
 
-	${({ deletePaddingTop: e }) => e && y(n`
+	${({ deletePaddingTop: e }) => e && f(a`
 			padding-top: 0px;
 		`)}
 
-	${({ deletePaddingTop: e }) => e && b(n`
+	${({ deletePaddingTop: e }) => e && b(a`
 			padding-top: 0px;
 		`)}
-`, Zt = o.div`
+`, br = r.div`
 	padding: 0 20px;
 	margin-bottom: 15px;
-	${b(n`
+	${b(a`
 		padding: 0;
 	`)}
-`, qt = o(E)`
+`, ur = r(oe)`
 	padding: 0 25px;
 	white-space: pre-wrap;
-	${b(n`
+	${b(a`
 		padding: 0;
 	`)}
-`, Jt = o(R)`
+`, mr = r(te)`
 	margin-top: 10px;
 	padding: 0 25px;
 	color: ${({ color: e }) => e};
 	white-space: pre-wrap;
-	${b(n`
+	${b(a`
 		padding: 0;
 	`)}
-`;
+`, Ve = k.memo(
+  ({ zIndex: e = $.modal, visible: o, onMaskClick: n, children: s, className: l }) => /* @__PURE__ */ t.jsx(_, { className: l, visible: o, onClick: n, zIndex: e, children: /* @__PURE__ */ t.jsx(V, { visible: o, children: s }) })
+), Ge = (e) => /* @__PURE__ */ t.jsx(H, { children: /* @__PURE__ */ t.jsx(u, { ...e }) }), Ue = (e) => /* @__PURE__ */ t.jsx(H, { children: /* @__PURE__ */ t.jsx(Be, { ...e }) }), Ze = ({ title: e, subTitle: o }) => /* @__PURE__ */ t.jsxs(ce, { children: [
+  /* @__PURE__ */ t.jsx(D, { children: e }),
+  o && /* @__PURE__ */ t.jsx(ge, { children: o })
+] }), qe = ({ children: e }) => /* @__PURE__ */ t.jsx(pe, { children: e }), Je = ({
+  onClick: e,
+  disabled: o,
+  text: n
+}) => /* @__PURE__ */ t.jsx(le, { children: /* @__PURE__ */ t.jsx(be, { size: "m", colorType: "gray", onClick: e, disabled: o, children: n }) }), Ke = ({ children: e, hasContentPadding: o = !0 }) => /* @__PURE__ */ t.jsx(de, { contentPadding: o, children: e }), Qe = k.memo(({ children: e, ...o }) => /* @__PURE__ */ t.jsx(Ve, { ...o, children: /* @__PURE__ */ t.jsx(se, { children: e }) })), xr = Object.assign(Qe, {
+  SingleButton: Ge,
+  DoubleButton: Ue,
+  Title: Ze,
+  Body: Ke,
+  Comment: qe,
+  UnderLineMiniButton: Je
+});
 export {
-  Nt as $,
-  mt as A,
-  Dt as B,
-  Pt as C,
-  We as D,
-  xt as E,
-  yt as F,
-  ft as G,
-  jt as H,
-  Ct as I,
-  u as J,
-  Tt as K,
-  Te as L,
-  ht as M,
-  Mt as N,
-  Et as O,
-  vt as P,
-  wt as Q,
-  kt as R,
-  me as S,
-  Ht as T,
-  St as U,
-  H as V,
-  we as W,
-  Bt as X,
-  Wt as Y,
-  It as Z,
-  Ot as _,
-  S as a,
-  z as a0,
-  v as a1,
-  h as a2,
-  xe as a3,
-  Ie as a4,
-  $ as b,
-  j as c,
-  T as d,
+  Qt as $,
+  ur as A,
+  er as B,
+  ir as C,
+  Be as D,
+  mr as E,
+  zt as F,
+  Pt as G,
+  _t as H,
+  Ft as I,
+  Et as J,
+  qt as K,
+  xr as L,
+  Lt as M,
+  or as N,
+  ar as O,
+  Rt as P,
+  m as Q,
+  Gt as R,
+  Te as S,
+  tr as T,
+  Ut as U,
+  Vt as V,
+  De as W,
+  Jt as X,
+  P as Y,
+  Zt as Z,
+  Kt as _,
+  W as a,
+  Xt as a0,
+  Yt as a1,
+  E as a2,
+  C as a3,
+  h as a4,
+  _ as a5,
+  Ee as a6,
+  Ve as a7,
+  w as b,
+  S as c,
+  j as d,
   B as e,
-  ye as f,
-  C as g,
-  he as h,
-  zt as i,
-  ge as j,
-  $t as k,
-  Se as l,
-  ke as m,
-  Be as n,
-  je as o,
-  Oe as p,
-  _t as q,
-  Lt as r,
-  Vt as s,
-  At as t,
-  Rt as u,
-  Ft as v,
-  Gt as w,
-  Zt as x,
-  qt as y,
-  Jt as z
+  Se as f,
+  u as g,
+  je as h,
+  rr as i,
+  Ce as j,
+  At as k,
+  Pe as l,
+  _e as m,
+  Ne as n,
+  ze as o,
+  Le as p,
+  He as q,
+  Re as r,
+  nr as s,
+  lr as t,
+  pr as u,
+  dr as v,
+  sr as w,
+  cr as x,
+  gr as y,
+  br as z
 };