@pfct/purple 1.5.0-npm-next.5 → 1.5.0-npm-next.7

package/dist/chunks/{index.styled.BYNpitkL.js → index.CqzduzUN.js}

@@ -1,53 +1,54 @@
-import { css as n, keyframes as _ } from "@emotion/react";
-import r from "@emotion/styled";
-import { zIndex as y } from "../constants/style.constants.es.js";
-import { basicColors as i, semanticColors as K, generateHexWithAlphaInLightMode as L } from "../core/Colors/index.es.js";
-import { title2 as Q, title4 as X, typographyMap as Y } from "../core/TextStyles/index.es.js";
-import { Smaller as m, Larger as c } from "../utils/media.util.es.js";
+import { j as t } from "./jsx-runtime.OVHDjVDe.js";
+import k, { useState as I, useEffect as j, useCallback as F, useRef as V } from "react";
+import { ModalContent as G } from "../components/LegacyModal/BaseModal/index.styled.es.js";
+import { Overlay as U } from "../components/OverlayRoot/index.styled.es.js";
+import { useOverlayPreventScroll as M } from "../hooks/useOverlayPreventScroll.es.js";
+import { css as s } from "@emotion/react";
+import { basicColors as i, semanticColors as Z, generateHexWithAlphaInLightMode as q } from "../core/Colors/index.es.js";
 import "../utils/GenerateColorStyle/mini-button.es.js";
-import ee from "../utils/GenerateColorStyle/datepicker.es.js";
-import { jsx as t, jsxs as C } from "react/jsx-runtime";
+import J 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 K, title4 as Q } 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 B, { useState as j, useEffect as T, useCallback as oe, useRef as te } from "react";
 import "../components/Loading/Skeleton/index.es.js";
-import { SpinnerWrapper as re } from "../components/Loading/Spinner/index.styled.es.js";
+import { SpinnerWrapper as X } from "../components/Loading/Spinner/index.styled.es.js";
 import "../components/Card/index.styled.es.js";
 import "../components/Comment/index.es.js";
-import $ from "../utils/GenerateColorStyle/control/radio-button.es.js";
-import "../components/Control/CheckBox/index.styled.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";
-import "../components/DatePicker/BaseDatePicker/YearMonthController/index.styed.es.js";
 import "../icons/src/icons/Alarm_fill.es.js";
 import "../icons/src/icons/Cancel.es.js";
-import "../icons/src/icons/Calendar.es.js";
 import "../icons/src/icons/Cancel_circle.es.js";
+import "../icons/src/icons/Calendar.es.js";
 import "../icons/src/icons/Cart_fill.es.js";
 import "../icons/src/icons/Check.es.js";
-import "../icons/src/icons/Chevron_left.es.js";
 import "../icons/src/icons/Chevron_down.es.js";
+import "../icons/src/icons/Chevron_left.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/Double_Chevron_left.es.js";
 import "../icons/src/icons/Eye_fill.es.js";
-import "../icons/src/icons/Information.es.js";
 import "../icons/src/icons/Eye_slash_fill.es.js";
 import "../icons/src/icons/Filter.es.js";
-import "../icons/src/icons/More.es.js";
+import "../icons/src/icons/Information.es.js";
 import "../icons/src/icons/Menu.es.js";
+import "../icons/src/icons/More.es.js";
 import "../icons/src/icons/Person_fill.es.js";
-import "../icons/src/icons/Question_circle.es.js";
 import "../icons/src/icons/Plus.es.js";
+import "../icons/src/icons/Question_circle.es.js";
 import "../icons/src/icons/Re.es.js";
 import "../icons/src/icons/Search.es.js";
-import "../icons/src/icons/Double_Chevron_left.es.js";
-import "../icons/src/icons/Chevron_right.es.js";
-import "../icons/src/icons/Double_Chevron_right.es.js";
-import "../icons/src/icons/Share.es.js";
-import "../icons/src/icons/Store.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 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";
+import "../components/DatePicker/BaseDatePicker/YearMonthController/index.styed.es.js";
 import "../library/IconWithImage/index.styled.es.js";
 import "../library/List/BottomSheetItemList/index.styled.es.js";
 import "lottie-web";
@@ -60,10 +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 z } from "../hooks/useOverlayPreventScroll.es.js";
-import { S as ie } from "./index.CycwZAWT.js";
-import { c as ne } from "./index.LN3KW-I4.js";
-import { c as H } from "./utils.B9KdtH6G.js";
+import { S as Y } from "./index.6ZBAQokh.js";
+import { c as ee } from "./index.Cc-miKAT.js";
+import { cn as D } 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";
@@ -76,44 +77,41 @@ 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 { Headline4 as P, Title3 as E } from "../core/Typography/index.es.js";
-import { ButtonMargin as A, TitleWrapper as ae, className as se } from "../components/BottomSheet/TitleBottomSheet/index.styled.es.js";
-import { scrollStyle as le } from "../style/common.es.js";
-import { ModalContent as pe } from "../components/Modal/BaseModal/index.styled.es.js";
-import { Overlay as de } from "../components/OverlayRoot/index.styled.es.js";
-import "../components/ToastMessage/Toast/index.styled.es.js";
-import "../components/Tooltip/TooltipBase/index.styled.es.js";
+import { Headline4 as N, Title3 as oe } from "../core/Typography/index.es.js";
+import { ButtonMargin as H, TitleWrapper as te, className as re } from "../components/BottomSheet/TitleBottomSheet/index.styled.es.js";
+import { scrollStyle as ie } from "../style/common.es.js";
+import { Wrapper as ne, LineButtonWrapper as ae, Comment as se, Body as le, Header as pe, SubTitle as de, Footer as z } from "../components/LegacyModal/index.styled.es.js";
+import { UnderLineMiniButton as ce } from "../components/MiniButton/UnderLineMiniButton/index.es.js";
+import "./index.Dh7jK0Mq.js";
 import "../components/ui/bottomSheet.es.js";
-import { Wrapper as ce, LineButtonWrapper as ge, Comment as be, Body as me, Header as ue, Footer as U } from "../components/Modal/index.styled.es.js";
-import { UnderLineMiniButton as he } from "../components/MiniButton/UnderLineMiniButton/index.es.js";
-import N from "../utils/GenerateColorStyle/tag.es.js";
-import xe from "../hooks/useResize.es.js";
-import { ContentWrapper as ye, Content as fe, HeaderWrapper as $e, ChildrenWrapper as ve, FooterWrapper as R } from "../components/BottomSheet/BaseBottomSheet/index.styled.es.js";
-import { Navigation as Ce } from "../components/Navigation/index.es.js";
-import { NavigationWrapper as we } from "../components/BottomSheet/NavBottomSheet/index.styled.es.js";
-import ke from "../utils/GenerateColorStyle/progress-bar.es.js";
-const Be = (e) => {
-  const o = i[`${e}400`], a = "transparent", s = i.white, l = i.white, d = i[`${e}100`], g = "transparent", b = i.white, p = i.white;
+import O from "../utils/GenerateColorStyle/tag.es.js";
+import ge from "../hooks/useResize.es.js";
+import { ContentWrapper as be, Content as ue, HeaderWrapper as me, ChildrenWrapper as xe, FooterWrapper as L } from "../components/BottomSheet/BaseBottomSheet/index.styled.es.js";
+import { Navigation as he } from "../components/Navigation/index.es.js";
+import { NavigationWrapper as ye } from "../components/BottomSheet/NavBottomSheet/index.styled.es.js";
+import fe from "../utils/GenerateColorStyle/progress-bar.es.js";
+const ve = (e) => {
+  const o = i[`${e}400`], n = "transparent", a = i.white, l = i.white, d = i[`${e}100`], c = "transparent", g = i.white, p = i.white;
   return {
     default: {
       on: {
         containerColor: o,
-        borderColor: a,
-        textColor: s,
+        borderColor: n,
+        textColor: a,
         iconColor: l
       },
       off: {
         containerColor: i.white,
         borderColor: i.gray50,
-        textColor: K.chipDefaultText,
+        textColor: Z.chipDefaultText,
         iconColor: i.gray300
       }
     },
     disabled: {
       on: {
         containerColor: d,
-        borderColor: g,
-        textColor: b,
+        borderColor: c,
+        textColor: g,
         iconColor: p
       },
       off: {
@@ -124,51 +122,51 @@ const Be = (e) => {
       }
     }
   };
-}, Ft = r.div`
-	${m(n`
+}, Ht = r.div`
+	${f(s`
 		display: none;
 	`)}
-`, Gt = r.div`
-	${c(n`
+`, zt = r.div`
+	${b(s`
 		display: none;
 	`)}
-`, Te = i.red400, We = "16px", V = n`
-	background-color: ${Te};
-`, Zt = r.div`
-	${V};
+`, $e = i.red400, Ce = "16px", P = s`
+	background-color: ${$e};
+`, Lt = r.div`
+	${P};
 
 	width: 5px;
 	height: 5px;
 	border-radius: 50%;
-`, qt = r.div`
-	${V};
+`, Pt = r.div`
+	${P};
 
-	height: ${We};
+	height: ${Ce};
 	padding: 0 5px;
 	border-radius: 8px;
 
 	display: flex;
 	align-items: center;
 	justify-content: center;
-`, Jt = r.div`
+`, _t = r.div`
 	line-height: initial;
 
 	font-size: 11px;
 	font-weight: 500;
 	color: ${i.white};
 	letter-spacing: -0.2px;
-`, Kt = r.div`
+`, Et = r.div`
 	position: absolute;
 	width: 100%;
 	top: 0;
 	height: 3px;
 	background-color: ${i.gray50};
-`, Qt = r.div`
+`, Rt = r.div`
 	width: ${({ progress: e }) => e}%;
-	background-color: ${({ colorType: e }) => ke(e).upperColor};
+	background-color: ${({ colorType: e }) => fe(e).upperColor};
 	height: 100%;
 	transition: width 3s ease-in-out;
-`, Se = ({ colorType: e }) => /* @__PURE__ */ t(re, { color: e === "white" ? i.white : i.gray200 }), Oe = ne(
+`, we = ({ colorType: e }) => /* @__PURE__ */ t.jsx(X, { color: e === "white" ? i.white : i.gray200 }), ke = ee(
   "border-none rounded-[10px] inline-flex items-center justify-center whitespace-nowrap p-3.75 typo-h6 h-[50px] w-full",
   {
     variants: {
@@ -322,29 +320,30 @@ const Be = (e) => {
 function u({
   className: e,
   asChild: o = !1,
-  purpose: a,
-  colorType: s,
+  purpose: n,
+  colorType: a,
   children: l,
   disabled: d,
-  isLoading: g,
-  ...b
+  isLoading: c,
+  ...g
 }) {
-  return /* @__PURE__ */ t(
-    o ? ie : "button",
+  const p = o ? Y : "button";
+  return /* @__PURE__ */ t.jsx(
+    p,
     {
-      ...b,
+      ...g,
       "data-slot": "button",
-      className: H(Oe({ colorType: s, purpose: a, className: e })),
-      type: b.type ?? (a === "main" ? "submit" : "button"),
-      disabled: d || g,
-      children: g ? /* @__PURE__ */ t("div", { className: "h-[25px] w-[25px]", children: /* @__PURE__ */ t(Se, { colorType: "white" }) }) : l
+      className: D(ke({ colorType: a, purpose: n, className: e })),
+      type: g.type ?? (n === "main" ? "submit" : "button"),
+      disabled: d || c,
+      children: c ? /* @__PURE__ */ t.jsx("div", { className: "h-[25px] w-[25px]", children: /* @__PURE__ */ t.jsx(we, { colorType: "white" }) }) : l
     }
   );
 }
-const Ie = ({ left: e, right: o }) => /* @__PURE__ */ C("div", { className: "flex w-full gap-[10px]", children: [
-  /* @__PURE__ */ t(u, { ...e, purpose: (e == null ? void 0 : e.purpose) || "sub", children: e.children }),
-  /* @__PURE__ */ t(u, { ...o, purpose: (o == null ? void 0 : o.purpose) || "main", type: (o == null ? void 0 : o.type) || "submit", children: o.children })
-] }), Xt = r.input`
+const je = ({ 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 })
+] }), At = r.input`
 	box-sizing: border-box;
 	-webkit-appearance: none;
 	appearance: none;
@@ -361,23 +360,23 @@ const Ie = ({ left: e, right: o }) => /* @__PURE__ */ C("div", { className: "fle
 	background: transparent;
 	cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
 
-	background-color: ${({ colorType: e, disabled: o }) => $(e)[o ? "disabled" : "default"].off.containerColor};
-	border-color: ${({ colorType: e, disabled: o }) => $(e)[o ? "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: o }) => $(e)[o ? "disabled" : "default"].on.containerColor};
-		border-color: ${({ colorType: e, disabled: o }) => $(e)[o ? "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;
 	}
-`, h = {
+`, m = {
   innerWrapper: "datepicker-inner-wrapper",
   dot: "datepicker-dot",
   rangeBackgroundWrapper: "datepicker-range-background-wrapper"
-}, x = 100, Yt = r.div`
+}, x = 100, Ft = r.div`
 	width: 5px;
 	height: 5px;
 	border-radius: 50%;
@@ -385,25 +384,25 @@ const Ie = ({ left: e, right: o }) => /* @__PURE__ */ C("div", { className: "fle
 	position: absolute;
 	left: 47%;
 	bottom: 5.86px;
-`, w = n`
+`, C = s`
 	width: ${x}%;
 	height: ${x}%;
-`, f = r.div`
-	${w};
+`, h = r.div`
+	${C};
 	position: relative;
 	/* height가 안 정해진 상태에서 height = width 적용되는 방법 */
 	padding-bottom: ${x}%;
-`, er = r.div`
-	${w};
+`, Vt = r.div`
+	${C};
 
 	position: absolute;
 	left: 0;
 
-	${({ rangeBackgroundColor: e }) => e && n`
+	${({ rangeBackgroundColor: e }) => e && s`
 			background: ${e};
 		`}
-`, or = r.div`
-	${w};
+`, Gt = r.div`
+	${C};
 
 	position: absolute;
 	left: 0;
@@ -415,44 +414,44 @@ const Ie = ({ left: e, right: o }) => /* @__PURE__ */ C("div", { className: "fle
 
 	border-radius: 50%;
 
-	${({ circleBackgroundColor: e }) => e && n`
+	${({ circleBackgroundColor: e }) => e && s`
 			background-color: ${e};
 		`};
-`, tr = r(f)``, rr = r(f)`
+`, Ut = r(h)``, Zt = r(h)`
 	cursor: pointer;
 
-	.${h.innerWrapper} {
+	.${m.innerWrapper} {
 		:hover {
-			background-color: ${({ colorType: e }) => ee(e).hoverContainerColor};
+			background-color: ${({ colorType: e }) => J(e).hoverContainerColor};
 		}
 	}
 
-	.${h.dot} {
+	.${m.dot} {
 		background-color: ${i.gray200};
 	}
-`, ir = r(f)`
+`, qt = r(h)`
 	cursor: not-allowed;
 
-	.${h.dot} {
+	.${m.dot} {
 		background-color: ${i.gray100};
 	}
-`, F = r(f)`
+`, _ = r(h)`
 	cursor: pointer;
 
-	.${h.dot} {
+	.${m.dot} {
 		background-color: ${i.white};
 	}
-`, nr = r(F)`
-	.${h.rangeBackgroundWrapper} {
+`, Jt = r(_)`
+	.${m.rangeBackgroundWrapper} {
 		left: ${x / 2}%;
 		width: ${x / 2}%;
 	}
-`, ar = r(F)`
-	.${h.rangeBackgroundWrapper} {
+`, Kt = r(_)`
+	.${m.rangeBackgroundWrapper} {
 		width: ${x / 2}%;
 	}
-`, sr = r(f)``, lr = r.div`
-	${w};
+`, Qt = r(h)``, Xt = r.div`
+	${C};
 
 	position: absolute;
 	left: 0;
@@ -461,20 +460,20 @@ const Ie = ({ left: e, right: o }) => /* @__PURE__ */ C("div", { className: "fle
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-`, G = B.memo(
-  ({ className: e, visible: o, onClick: a, zIndex: s = y.modal, children: l }) => {
-    const [d, g] = j(!1), b = (p) => {
-      p.target === p.currentTarget && (a == null || a());
+`, E = k.memo(
+  ({ className: e, visible: o, onClick: n, zIndex: a = $.modal, children: l }) => {
+    const [d, c] = I(!1), g = (p) => {
+      p.target === p.currentTarget && (n == null || n());
     };
-    return T(() => {
+    return j(() => {
       let p;
-      return o ? g(!0) : p = setTimeout(() => g(!1), 400), () => {
+      return o ? c(!0) : p = setTimeout(() => c(!1), 400), () => {
         p !== void 0 && clearTimeout(p);
       };
-    }, [o]), z(o), d ? /* @__PURE__ */ t(de, { className: e, visible: o, zIndex: s, onClick: b, children: l }) : null;
+    }, [o]), M(o), d ? /* @__PURE__ */ t.jsx(U, { className: e, visible: o, zIndex: a, onClick: g, children: l }) : null;
   }
-), W = (e) => /* @__PURE__ */ t(R, { children: /* @__PURE__ */ t(u, { ...e }) }), S = (e) => /* @__PURE__ */ t(R, { children: /* @__PURE__ */ C("div", { className: "flex w-full gap-[10px]", children: [
-  /* @__PURE__ */ t(
+), B = (e) => /* @__PURE__ */ t.jsx(L, { children: /* @__PURE__ */ t.jsx(u, { ...e }) }), T = (e) => /* @__PURE__ */ t.jsx(L, { children: /* @__PURE__ */ t.jsxs("div", { className: "flex w-full gap-[10px]", children: [
+  /* @__PURE__ */ t.jsx(
     u,
     {
       ...e.left,
@@ -486,7 +485,7 @@ const Ie = ({ left: e, right: o }) => /* @__PURE__ */ C("div", { className: "fle
       children: e.left.children
     }
   ),
-  /* @__PURE__ */ t(
+  /* @__PURE__ */ t.jsx(
     u,
     {
       onClick: e.right.onClick,
@@ -498,65 +497,65 @@ const Ie = ({ left: e, right: o }) => /* @__PURE__ */ C("div", { className: "fle
       children: e.right.children
     }
   )
-] }) }), O = ({ children: e, ...o }) => {
-  const a = te(null);
-  return T(() => {
-    var s;
-    (s = a.current) == null || s.scroll(0, 0);
-  }, []), /* @__PURE__ */ t(ve, { ref: a, ...o, children: e });
-}, k = ({ children: e }) => /* @__PURE__ */ t($e, { children: e }), I = ({
+] }) }), W = ({ children: e, ...o }) => {
+  const n = V(null);
+  return j(() => {
+    var a;
+    (a = n.current) == null || a.scroll(0, 0);
+  }, []), /* @__PURE__ */ t.jsx(xe, { ref: n, ...o, children: e });
+}, w = ({ children: e }) => /* @__PURE__ */ t.jsx(me, { children: e }), S = ({
   visible: e,
   onMaskClick: o,
-  className: a,
-  zIndex: s = y.modal,
+  className: n,
+  zIndex: a = $.modal,
   minHeight: l,
   children: d
 }) => {
-  const [g, b] = j(0), p = oe(() => {
-    b(window == null ? void 0 : window.innerHeight);
+  const [c, g] = I(0), p = F(() => {
+    g(window == null ? void 0 : window.innerHeight);
   }, []);
-  return T(() => {
+  return j(() => {
     p();
-  }, [p]), xe(p), z(e), e ? /* @__PURE__ */ t(G, { visible: e, className: a, onClick: o, zIndex: s, children: /* @__PURE__ */ t(ye, { children: /* @__PURE__ */ t(fe, { visible: e, zIndex: s, minHeight: l, vh: g, children: d }) }) }) : null;
-}, pr = Object.assign(I, {
-  SingleButton: W,
-  DoubleButton: S,
-  Body: O,
-  Header: k
-}), Me = ({ children: e }) => /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(we, { children: e }) }), De = (e) => /* @__PURE__ */ t(Me, { children: /* @__PURE__ */ t(Ce, { ...e }) }), dr = Object.assign(I, {
-  Header: k,
-  Navigation: De,
-  Body: O,
-  SingleButton: W,
-  DoubleButton: S
-}), Ne = ({ title: e, subTitle: o, hasContentPadding: a = !0 }) => /* @__PURE__ */ C(ae, { contentPadding: a, children: [
-  e && /* @__PURE__ */ t(P, { children: e }),
-  o && /* @__PURE__ */ t(E, { className: H("text-gray-400", se.subTitle), children: o })
-] }), _e = (e) => /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(W, { ...e }) }), Le = (e) => /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(S, { ...e }) }), cr = Object.assign(I, {
-  Header: k,
-  Body: O,
-  Title: Ne,
-  SingleButton: _e,
-  DoubleButton: Le
-}), je = r.div`
+  }, [p]), ge(p), M(e), e ? /* @__PURE__ */ t.jsx(E, { visible: e, className: n, onClick: o, zIndex: a, children: /* @__PURE__ */ t.jsx(be, { children: /* @__PURE__ */ t.jsx(ue, { visible: e, zIndex: a, minHeight: l, vh: c, children: d }) }) }) : null;
+}, Yt = Object.assign(S, {
+  SingleButton: B,
+  DoubleButton: T,
+  Body: W,
+  Header: w
+}), Be = ({ children: e }) => /* @__PURE__ */ t.jsx(w, { children: /* @__PURE__ */ t.jsx(ye, { children: e }) }), Te = (e) => /* @__PURE__ */ t.jsx(Be, { children: /* @__PURE__ */ t.jsx(he, { ...e }) }), er = Object.assign(S, {
+  Header: w,
+  Navigation: Te,
+  Body: W,
+  SingleButton: B,
+  DoubleButton: T
+}), We = ({ title: e, subTitle: o, hasContentPadding: n = !0 }) => /* @__PURE__ */ t.jsxs(te, { contentPadding: n, children: [
+  e && /* @__PURE__ */ t.jsx(N, { children: e }),
+  o && /* @__PURE__ */ t.jsx(oe, { className: D("text-gray-400", re.subTitle), children: o })
+] }), Se = (e) => /* @__PURE__ */ t.jsx(H, { children: /* @__PURE__ */ t.jsx(B, { ...e }) }), Oe = (e) => /* @__PURE__ */ t.jsx(H, { children: /* @__PURE__ */ t.jsx(T, { ...e }) }), or = Object.assign(S, {
+  Header: w,
+  Body: W,
+  Title: We,
+  SingleButton: Se,
+  DoubleButton: Oe
+}), Ie = r.div`
 	& > div > .select-box {
 		cursor: pointer;
 	}
 	position: relative;
-`, ze = r.div`
+`, Me = r.div`
 	position: absolute;
-	z-index: ${y.basicLayer + 1};
+	z-index: ${$.basicLayer + 1};
 	width: 100%;
 	height: max-content;
 
-	${c(n`
+	${b(s`
 		top: 70px;
 	`)}
-`, He = r.div`
+`, De = r.div`
 	height: 80px;
 	pointer-events: none;
-`, Pe = r.div`
-	box-shadow: 0 2px 10px ${L(i.black, "20%")};
+`, Ne = r.div`
+	box-shadow: 0 2px 10px ${q(i.black, "20%")};
 	background-color: ${i.white};
 	border-radius: 10px;
 	display: flex;
@@ -564,12 +563,12 @@ const Ie = ({ left: e, right: o }) => /* @__PURE__ */ C("div", { className: "fle
 	gap: 4px;
 	max-height: ${65 * 4.5}px;
 	overflow-y: scroll;
-`, Ee = r.div`
+`, He = r.div`
 	width: 100%;
 	height: 50px;
 	padding: 15px 25px;
 	cursor: pointer;
-	${Q({ color: i.gray400 })};
+	${K({ color: i.gray400 })};
 	background-color: ${i.white};
 
 	&:first-of-type {
@@ -589,7 +588,7 @@ const Ie = ({ left: e, right: o }) => /* @__PURE__ */ C("div", { className: "fle
 	&:active {
 		background-color: ${i.gray50};
 	}
-`, Ae = r.div`
+`, ze = r.div`
 	position: absolute;
 	z-index: 10;
 	right: 20px;
@@ -597,30 +596,30 @@ const Ie = ({ left: e, right: o }) => /* @__PURE__ */ C("div", { className: "fle
 	cursor: pointer;
 	transform: ${({ rotateArrow: e }) => e ? "rotate(180deg)" : "rotate(0)"};
 	pointer-events: none;
-`, Ue = r.div`
-	${m(n`
+`, Le = r.div`
+	${f(s`
 		display: none;
 	`)}
-`, Re = r.div`
-	${c(n`
+`, Pe = r.div`
+	${b(s`
 		display: none;
 	`)}
-`, gr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+`, tr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Desktop: Ue,
-  IconWrapper: Ae,
-  Item: Ee,
-  ItemList: Pe,
-  ItemListWrapper: ze,
-  ListBottomMargin: He,
-  Mobile: Re,
-  Wrapper: je
-}, Symbol.toStringTag, { value: "Module" })), Ve = {
+  Desktop: Le,
+  IconWrapper: ze,
+  Item: He,
+  ItemList: Ne,
+  ItemListWrapper: Me,
+  ListBottomMargin: De,
+  Mobile: Pe,
+  Wrapper: Ie
+}, Symbol.toStringTag, { value: "Module" })), _e = {
   Text: "chip-item-text"
-}, Z = 38, br = r.span`
+}, R = 38, rr = r.span`
 	display: inline-flex;
 	min-width: max-content;
-	height: ${Z}px;
+	height: ${R}px;
 	gap: 2px;
 	padding: 8px 0 8px 12px;
 	padding-right: ${({ hasRightIcon: e }) => e ? "7px" : "12px"};
@@ -628,59 +627,59 @@ const Ie = ({ left: e, right: o }) => /* @__PURE__ */ C("div", { className: "fle
 
 	border-radius: 22px;
 
-	${({ disabled: e, selected: o, colorType: a }) => {
-  const s = Be(a), l = e ? "disabled" : "default", d = o ? "on" : "off";
-  return n`
-			background-color: ${s[l][d].containerColor};
-			border: 1px solid ${s[l][d].borderColor};
-			.${Ve.Text} {
-				color: ${s[l][d].textColor};
+	${({ disabled: e, selected: o, colorType: n }) => {
+  const a = ve(n), l = e ? "disabled" : "default", d = o ? "on" : "off";
+  return s`
+			background-color: ${a[l][d].containerColor};
+			border: 1px solid ${a[l][d].borderColor};
+			.${_e.Text} {
+				color: ${a[l][d].textColor};
 			}
 			svg > path {
-				fill: ${s[l][d].iconColor};
+				fill: ${a[l][d].iconColor};
 			}
 		`;
 }}
 
-	${({ selected: e }) => !e && n`
+	${({ selected: e }) => !e && s`
 			cursor: pointer;
 		`}
-`, mr = r.span`
+`, ir = r.span`
 	cursor: pointer;
 	display: flex;
-`, q = {
+`, A = {
   ControlIconContainer: 2
-}, v = Z, Fe = 25, Ge = i.white, ur = r.div`
+}, v = R, Ee = 25, Re = i.white, nr = r.div`
 	display: flex;
 	align-items: center;
 	position: relative;
 	overflow: hidden;
 
 	width: 100%;
-`, hr = r.div`
-	${le}
+`, ar = r.div`
+	${ie}
 
 	display: flex;
 	gap: 5px;
-	z-index: ${q.ControlIconContainer - 1};
+	z-index: ${A.ControlIconContainer - 1};
 
-	${({ hasIconArea: e }) => e && n`
+	${({ hasIconArea: e }) => e && s`
 			padding-left: ${v + 8}px;
 		`}
 	padding-right: 20px;
-`, xr = r.div`
+`, sr = r.div`
 	cursor: pointer;
 	position: absolute;
 	left: 0;
 	top: 0;
 
-	z-index: ${q.ControlIconContainer};
+	z-index: ${A.ControlIconContainer};
 
-	background-color: ${Ge};
+	background-color: ${Re};
 	width: ${v}px;
 	height: ${v}px;
-`, yr = r.div`
-	width: ${Fe}px;
+`, lr = r.div`
+	width: ${Ee}px;
 	height: 100%;
 
 	/* TODO: 컬러, 범위, 여백 수정 필요 */
@@ -689,7 +688,7 @@ const Ie = ({ left: e, right: o }) => /* @__PURE__ */ C("div", { className: "fle
 	position: absolute;
 	left: ${v}px;
 	top: 0;
-`, fr = r.div`
+`, pr = r.div`
 	width: 100%;
 	height: 100%;
 	border-radius: 50%;
@@ -702,9 +701,9 @@ const Ie = ({ left: e, right: o }) => /* @__PURE__ */ C("div", { className: "fle
 	position: absolute;
 	left: 0;
 	top: 0;
-`, $r = r.div`
-	${({ type: e, colorType: o }) => X({ color: N({ type: e, colorType: o }).textColor })};
-	background-color: ${({ type: e, colorType: o }) => N({ type: e, colorType: o }).backgroundColor};
+`, dr = r.div`
+	${({ type: e, colorType: o }) => Q({ 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;
@@ -713,166 +712,106 @@ const Ie = ({ left: e, right: o }) => /* @__PURE__ */ C("div", { className: "fle
 	align-items: center;
 	justify-content: center;
 	display: ${({ inline: e }) => e ? "inline-flex" : "flex"};
-`, vr = r.div`
-	${m(n`
+`, cr = r.div`
+	${f(s`
 		padding: 25px 0;
 	`)}
 
-	${c(n`
+	${b(s`
 		padding: 80px 80px 25px;
 	`)}
 
 	/** deletePaddingTop = true 이면, 사용처 BasicLayout 에서 padding-top 관리 */
 
-	${({ deletePaddingTop: e }) => e && m(n`
+	${({ deletePaddingTop: e }) => e && f(s`
 			padding-top: 0px;
 		`)}
 
-	${({ deletePaddingTop: e }) => e && c(n`
+	${({ deletePaddingTop: e }) => e && b(s`
 			padding-top: 0px;
 		`)}
-`, Cr = r.div`
+`, gr = r.div`
 	padding: 0 20px;
 	margin-bottom: 15px;
-	${c(n`
+	${b(s`
 		padding: 0;
 	`)}
-`, Ze = B.memo(
-  ({ zIndex: e = y.modal, visible: o, onMaskClick: a, children: s, className: l }) => /* @__PURE__ */ t(G, { className: l, visible: o, onClick: a, zIndex: e, children: /* @__PURE__ */ t(pe, { visible: o, children: s }) })
-), qe = (e) => /* @__PURE__ */ t(U, { children: /* @__PURE__ */ t(u, { ...e }) }), Je = (e) => /* @__PURE__ */ t(U, { children: /* @__PURE__ */ t(Ie, { ...e }) }), Ke = ({ title: e, subTitle: o }) => /* @__PURE__ */ C(ue, { children: [
-  /* @__PURE__ */ t(P, { children: e }),
-  o && /* @__PURE__ */ t(E, { className: "mt-[10px] text-center font-medium whitespace-pre-wrap text-gray-400", children: o })
-] }), Qe = ({ children: e }) => /* @__PURE__ */ t(be, { children: e }), Xe = ({
+`, Ae = k.memo(
+  ({ zIndex: e = $.modal, visible: o, onMaskClick: n, children: a, className: l }) => /* @__PURE__ */ t.jsx(E, { className: l, visible: o, onClick: n, zIndex: e, children: /* @__PURE__ */ t.jsx(G, { visible: o, children: a }) })
+), Fe = (e) => /* @__PURE__ */ t.jsx(z, { children: /* @__PURE__ */ t.jsx(u, { ...e }) }), Ve = (e) => /* @__PURE__ */ t.jsx(z, { children: /* @__PURE__ */ t.jsx(je, { ...e }) }), Ge = ({ title: e, subTitle: o }) => /* @__PURE__ */ t.jsxs(pe, { children: [
+  /* @__PURE__ */ t.jsx(N, { children: e }),
+  o && /* @__PURE__ */ t.jsx(de, { children: o })
+] }), Ue = ({ children: e }) => /* @__PURE__ */ t.jsx(se, { children: e }), Ze = ({
   onClick: e,
   disabled: o,
-  text: a
-}) => /* @__PURE__ */ t(ge, { children: /* @__PURE__ */ t(he, { size: "m", colorType: "gray", onClick: e, disabled: o, children: a }) }), Ye = ({ children: e, hasContentPadding: o = !0 }) => /* @__PURE__ */ t(me, { contentPadding: o, children: e }), eo = B.memo(({ children: e, ...o }) => /* @__PURE__ */ t(Ze, { ...o, children: /* @__PURE__ */ t(ce, { children: e }) })), wr = Object.assign(eo, {
-  SingleButton: qe,
-  DoubleButton: Je,
-  Title: Ke,
-  Body: Ye,
-  Comment: Qe,
-  UnderLineMiniButton: Xe
-}), J = "-55px", M = "50px", D = "25px", oo = _`
-	0% {
-		bottom: ${J};
-	}
-	100% {
-		${m(n`
-			bottom: ${D};
-		`)};
-		${c(n`
-			bottom: ${M};
-		`)};
-	}
-`, to = _`
-	0% {
-		${m(n`
-			bottom: ${D};
-		`)};
-		${c(n`
-			bottom: ${M};
-		`)};
-	}
-	100% {
-		bottom: ${J};
-	}
-`, ro = (e) => n`
-	visibility: ${e ? "visible" : "hidden"};
-	z-index: ${y.basicLayer + 11};
-	animation: ${e ? oo : to} 0.4s ease-out;
-	transition: all 0.4s ease-out;
-`, kr = r.div`
-	min-width: 320px;
-	max-width: max-content;
-
-	${c(n`
-		min-width: 440px;
-	`)}
-	height: 55px;
-	box-sizing: border-box;
-	background-color: ${L(i.gray900, "80%")};
-	border-radius: 15px;
-	padding: 17px 15px;
-	display: flex;
-	align-items: center;
-	justify-content: flex-start;
-	position: fixed;
-	left: 50%;
-	transform: translate(-50%, 0);
-	${m(n`
-		bottom: ${D};
-	`)};
-	${c(n`
-		bottom: ${M};
-	`)};
-	${({ visible: e }) => ro(e)};
-`, Br = r.div`
-	${Y.title3};
-	color: ${i.white};
-	width: 100%;
-`;
+  text: n
+}) => /* @__PURE__ */ t.jsx(ae, { children: /* @__PURE__ */ t.jsx(ce, { size: "m", colorType: "gray", onClick: e, disabled: o, children: n }) }), qe = ({ children: e, hasContentPadding: o = !0 }) => /* @__PURE__ */ t.jsx(le, { contentPadding: o, children: e }), Je = k.memo(({ children: e, ...o }) => /* @__PURE__ */ t.jsx(Ae, { ...o, children: /* @__PURE__ */ t.jsx(ne, { children: e }) })), br = Object.assign(Je, {
+  SingleButton: Fe,
+  DoubleButton: Ve,
+  Title: Ge,
+  Body: qe,
+  Comment: Ue,
+  UnderLineMiniButton: Ze
+});
 export {
-  sr as $,
-  Ft as A,
-  pr as B,
-  br as C,
-  Ie as D,
-  Gt as E,
-  Zt as F,
-  qt as G,
-  Jt as H,
-  Xt as I,
-  rr as J,
-  h as K,
-  He as L,
-  wr as M,
-  dr as N,
-  ur as O,
-  Kt as P,
-  or as Q,
-  er as R,
-  Se as S,
-  cr as T,
-  Yt as U,
-  ir as V,
-  je as W,
-  F as X,
-  tr as Y,
-  nr as Z,
-  ar as _,
-  I as a,
-  lr as a0,
-  kr as a1,
-  Br as a2,
-  Z as a3,
-  w as a4,
-  f as a5,
-  G as a6,
-  Re as a7,
-  k as b,
-  O as c,
-  W as d,
-  S as e,
-  Me as f,
-  Ze as g,
-  u as h,
-  gr as i,
-  Oe as j,
-  Be as k,
-  Qt as l,
-  Ae as m,
-  Ue as n,
-  ze as o,
-  Pe as p,
-  Ee as q,
-  Ve as r,
-  mr as s,
-  xr as t,
-  yr as u,
-  fr as v,
-  hr as w,
-  $r as x,
-  vr as y,
-  Cr as z
+  Xt as $,
+  Ht as A,
+  Yt as B,
+  rr as C,
+  je as D,
+  Lt as E,
+  Pt as F,
+  _t as G,
+  Zt as H,
+  At as I,
+  m as J,
+  Gt as K,
+  br as L,
+  zt as M,
+  er as N,
+  nr as O,
+  Et as P,
+  Ft as Q,
+  Vt as R,
+  we as S,
+  or as T,
+  qt as U,
+  _ as V,
+  Ie as W,
+  Ut as X,
+  Jt as Y,
+  Kt as Z,
+  Qt as _,
+  S as a,
+  R as a0,
+  C as a1,
+  h as a2,
+  E as a3,
+  Pe as a4,
+  Ae as a5,
+  w as b,
+  W as c,
+  B as d,
+  T as e,
+  Be as f,
+  u as g,
+  ke as h,
+  tr as i,
+  ve as j,
+  Rt as k,
+  ze as l,
+  Le as m,
+  Me as n,
+  Ne as o,
+  He as p,
+  De as q,
+  _e as r,
+  ir as s,
+  sr as t,
+  lr as u,
+  pr as v,
+  ar as w,
+  dr as x,
+  cr as y,
+  gr as z
 };