@pfct/purple 1.4.0-rc.4 → 1.4.0-rc.6

package/dist/chunks/index.styled.ByGzJNsf.js

@@ -0,0 +1,1287 @@
+import { css as a, keyframes as jo } from "@emotion/react";
+import n from "@emotion/styled";
+import { zIndex as C } from "../constants/style.constants.es.js";
+import { basicColors as i, semanticColors as K, generateHexWithAlphaInLightMode as wo } from "../core/Colors/index.es.js";
+import { body2 as Go, body1 as qo, title4 as Q, title3 as X, title2 as vo, title1 as Zo, headline6 as Y, headline5 as Jo, headline4 as Ko, headline3 as Qo, headline2 as Xo, headline1 as Yo, typography as H } from "../core/TextStyles/index.es.js";
+import { Smaller as f, Larger as g } from "../utils/media.util.es.js";
+import N from "../utils/GenerateColorStyle/mini-button.es.js";
+import Ao from "../utils/GenerateColorStyle/datepicker.es.js";
+import { j as e } from "./jsx-runtime.Drh4NO5G.js";
+import "../components/Badge/IconBadge/index.styled.es.js";
+import "../components/Badge/TextBadge/index.styled.es.js";
+import { SpinnerWrapper as ot } from "../components/Loading/Spinner/index.styled.es.js";
+import "../components/Card/index.styled.es.js";
+import _, { useState as T, useEffect as W, useCallback as k, useRef as Bo, useMemo as fo } from "react";
+import "../components/Comment/index.es.js";
+import D 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 "../Icon/generated/AlarmFill.es.js";
+import "../Icon/generated/Calendar.es.js";
+import { Cancel as tt } from "../Icon/generated/Cancel.es.js";
+import "../Icon/generated/CancelCircle.es.js";
+import "../Icon/generated/CartFill.es.js";
+import "../Icon/generated/Check.es.js";
+import "../Icon/generated/ChevronDown.es.js";
+import { ChevronLeft as et } from "../Icon/generated/ChevronLeft.es.js";
+import "../Icon/generated/ChevronRight.es.js";
+import "../Icon/generated/ChevronUp.es.js";
+import "../Icon/generated/DoubleChevronLeft.es.js";
+import "../Icon/generated/DoubleChevronRight.es.js";
+import "../Icon/generated/EyeFill.es.js";
+import "../Icon/generated/EyeSlashFill.es.js";
+import "../Icon/generated/Filter.es.js";
+import "../Icon/generated/Information.es.js";
+import "../Icon/generated/Menu.es.js";
+import "../Icon/generated/More.es.js";
+import "../Icon/generated/PersonFill.es.js";
+import "../Icon/generated/Plus.es.js";
+import "../Icon/generated/QuestionCircle.es.js";
+import "../Icon/generated/Re.es.js";
+import "../Icon/generated/Search.es.js";
+import "../Icon/generated/SettingFill.es.js";
+import "../Icon/generated/Share.es.js";
+import "../Icon/generated/Store.es.js";
+import "../library/IconWithImage/index.styled.es.js";
+import "../library/List/BottomSheetItemList/index.styled.es.js";
+import "lottie-web";
+import "../library/Lottie/index.styled.es.js";
+import "../library/Spacing/index.styled.es.js";
+import "../components/DatePicker/BaseDatePicker/Month/index.styled.es.js";
+import "../components/DatePicker/BaseDatePicker/Week/index.styled.es.js";
+import "../types/date.es.js";
+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 ko } from "../hooks/useOverlayPreventScroll.es.js";
+import { Button as rt } from "../components/ui/button.es.js";
+import { c as nt } from "./utils.B9KdtH6G.js";
+import "../components/DatePicker/RangeDatePickerModal/useRangeDatePickerModal.es.js";
+import "../components/Divider/index.styled.es.js";
+import "./index.styled.SOJ65tcg.js";
+import "../components/Input/BaseInput/index.es.js";
+import { D as it } from "./index.styled.Cw4AEFns.js";
+import { InputAndUnitWrapper as at, InputSizer as st, InputTag as lt, className as dt, UnitWrapper as ct, Unit as pt } from "../components/Input/PostfixInput/index.styled.es.js";
+import { InputFrame as xt } from "../components/Input/common/InputFrame/index.es.js";
+import "../components/Input/ResidentNumberInput/index.styled.es.js";
+import "../components/Loading/Skeleton/index.es.js";
+import { IconWrapper as Z, TextWrapper as ut } from "../components/Navigation/index.styled.es.js";
+import { Wrapper as mt, LeftChildrenWrapper as gt, RightChildrenWrapper as ht } from "../components/Navigation/BaseNavigation/index.styled.es.js";
+import { CONTENT_COLOR_MAP as P } from "../components/Navigation/constant.es.js";
+import "../components/Segment/BaseSegment/index.styled.es.js";
+import "../components/Segment/ExtendSegment/index.styled.es.js";
+import { ContentWrapper as bt, Content as ft, HeaderWrapper as $t, ChildrenWrapper as Ct, FooterWrapper as To, ContentWrapperPadding as yt } from "../components/BottomSheet/BaseBottomSheet/index.styled.es.js";
+import { scrollStyle as A } from "../style/common.es.js";
+import { ModalContent as jt } from "../components/Modal/BaseModal/index.styled.es.js";
+import { Overlay as wt } from "../components/OverlayRoot/index.styled.es.js";
+import "../components/ToastMessage/Toast/index.styled.es.js";
+import "../components/Tooltip/TooltipBase/index.styled.es.js";
+import "../components/ui/bottomSheet.es.js";
+import $o from "../utils/GenerateColorStyle/tag.es.js";
+import vt from "../utils/GenerateColorStyle/progress-bar.es.js";
+import Bt from "../hooks/useResize.es.js";
+import { NavigationWrapper as kt } from "../components/BottomSheet/NavBottomSheet/index.styled.es.js";
+const Tt = (o) => {
+  const t = i[`${o}400`], r = "transparent", s = i.white, l = i.white, d = i[`${o}100`], x = "transparent", u = i.white, p = i.white;
+  return {
+    default: {
+      on: {
+        containerColor: t,
+        borderColor: r,
+        textColor: s,
+        iconColor: l
+      },
+      off: {
+        containerColor: i.white,
+        borderColor: i.gray50,
+        textColor: K.chipDefaultText,
+        iconColor: i.gray300
+      }
+    },
+    disabled: {
+      on: {
+        containerColor: d,
+        borderColor: x,
+        textColor: u,
+        iconColor: p
+      },
+      off: {
+        containerColor: i.white,
+        borderColor: i.gray25,
+        textColor: i.gray100,
+        iconColor: i.gray100
+      }
+    }
+  };
+}, $ = (o) => {
+  const t = i.gray100, r = "none";
+  switch (o) {
+    case "gray":
+      return {
+        on: {
+          textColor: i.gray900,
+          barColor: i.gray900
+        },
+        off: {
+          textColor: t,
+          barColor: r
+        }
+      };
+    default:
+      return {
+        on: {
+          textColor: i[`${o}400`],
+          barColor: i[`${o}400`]
+        },
+        off: {
+          textColor: t,
+          barColor: r
+        }
+      };
+  }
+}, Wt = (o) => {
+  const t = i.gray700, r = i.gray50;
+  switch (o) {
+    case "gray":
+      return {
+        on: {
+          textColor: K.buttonGrayMainAbledText,
+          containerColor: i.gray700
+        },
+        off: {
+          textColor: t,
+          containerColor: r
+        }
+      };
+    default:
+      return {
+        on: {
+          textColor: K.buttonGrayMainAbledText,
+          containerColor: i[`${o}400`]
+        },
+        off: {
+          textColor: t,
+          containerColor: r
+        }
+      };
+  }
+}, tn = n.div`
+	${f(a`
+		display: none;
+	`)}
+`, en = n.div`
+	${g(a`
+		display: none;
+	`)}
+`, J = {
+  Headline1: Yo,
+  Headline2: Xo,
+  Headline3: Qo,
+  Headline4: Ko,
+  Headline5: Jo,
+  Headline6: Y,
+  Title1: Zo,
+  Title2: vo,
+  Title3: X,
+  Title4: Q,
+  Body1: qo,
+  Body2: Go
+}, St = n.div`
+	text-align: ${(o) => o.textAlign};
+	white-space: pre-wrap;
+	${(o) => J[o.md](o)}
+
+	${(o) => o.sm && f(a`
+			 {
+				${J[o.sm](o)}
+			}
+		`)}
+	${(o) => o.lg && g(a`
+			 {
+				${J[o.lg](o)}
+			}
+		`)}
+`, S = (o) => {
+  const { children: t } = o;
+  return /* @__PURE__ */ e.jsx(St, { ...o, children: t });
+}, It = (o) => {
+  const { children: t, ...r } = o;
+  return /* @__PURE__ */ e.jsx(S, { ...r, md: "Headline3", children: t });
+}, Wo = (o) => {
+  const { children: t, ...r } = o;
+  return /* @__PURE__ */ e.jsx(S, { ...r, md: "Headline4", children: t });
+}, Ot = (o) => {
+  const { children: t, ...r } = o;
+  return /* @__PURE__ */ e.jsx(S, { ...r, md: "Headline5", children: t });
+}, E = (o) => {
+  const { children: t, ...r } = o;
+  return /* @__PURE__ */ e.jsx(S, { ...r, md: "Title3", children: t });
+}, Mt = i.red400, Nt = "16px", So = a`
+	background-color: ${Mt};
+`, rn = n.div`
+	${So};
+
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+`, nn = n.div`
+	${So};
+
+	height: ${Nt};
+	padding: 0 5px;
+	border-radius: 8px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`, an = n.div`
+	line-height: initial;
+
+	font-size: 11px;
+	font-weight: 500;
+	color: ${i.white};
+	letter-spacing: -0.2px;
+`, Dt = (o) => {
+  const { colorType: t } = o;
+  let r = i.white;
+  switch (t) {
+    case "gray":
+      r = i.gray200;
+  }
+  return /* @__PURE__ */ e.jsx(ot, { color: r });
+};
+function Pt({ children: o, isLoading: t, disabled: r, ...s }) {
+  return /* @__PURE__ */ e.jsx(rt, { disabled: r || t, ...s, children: t ? /* @__PURE__ */ e.jsx("div", { className: "h-[25px] w-[25px]", children: /* @__PURE__ */ e.jsx(Dt, { colorType: "white" }) }) : o });
+}
+const L = ({
+  colorType: o,
+  children: t,
+  className: r,
+  type: s,
+  purpose: l = "main",
+  ...d
+}) => {
+  const x = s ?? (l === "main" ? "submit" : "button");
+  return /* @__PURE__ */ e.jsx(
+    Pt,
+    {
+      ...d,
+      colorType: o,
+      type: x,
+      purpose: l,
+      className: nt("typo-h6 h-[50px] w-full", r),
+      children: t
+    }
+  );
+}, Io = ({
+  purpose: o,
+  colorType: t,
+  left: { children: r, onClick: s, className: l, disabled: d },
+  right: {
+    children: x,
+    onClick: u,
+    className: p,
+    disabled: y,
+    type: h
+  }
+}) => {
+  const b = o === "main" ? "gray" : t;
+  return /* @__PURE__ */ e.jsxs("div", { className: "flex w-full gap-[10px]", children: [
+    /* @__PURE__ */ e.jsx(
+      L,
+      {
+        onClick: s,
+        colorType: b,
+        purpose: "sub",
+        disabled: d,
+        className: l,
+        children: r
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      L,
+      {
+        onClick: u,
+        colorType: t,
+        purpose: "main",
+        disabled: y,
+        className: p,
+        type: h || "submit",
+        children: x
+      }
+    )
+  ] });
+}, Oo = 5, Ht = n.button`
+	/* initialize button */
+	border: none;
+	outline: none;
+	background-color: initial;
+	padding: 0;
+
+	width: max-content;
+	border-radius: 5px;
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+	user-select: none;
+
+	&:hover {
+		background-color: ${i.gray50};
+	}
+
+	&:active {
+		background-color: ${i.gray100};
+	}
+
+	${({ colorType: o }) => a`
+		cursor: pointer;
+		color: ${N(o).textColor};
+	`}
+
+	&:disabled {
+		${({ colorType: o }) => a`
+			cursor: not-allowed;
+			background-color: initial;
+			color: ${N(o).disabledTextColor};
+		`}
+	}
+	${({ styleType: o, colorType: t, size: r }) => {
+  switch (o) {
+    case "icon":
+      return a`
+					height: 25px;
+					svg > path {
+						fill: ${N(t).iconColor};
+					}
+					&:disabled svg > path {
+						fill: ${N(t).iconDisabledColor};
+					}
+				`;
+    case "underline":
+      return a`
+					${(() => {
+        switch (r) {
+          case "s":
+            return a`
+									height: 28px;
+								`;
+          case "m":
+            return a`
+									height: 32px;
+								`;
+        }
+      })()};
+					&:disabled {
+						> * {
+							text-decoration: none;
+						}
+					}
+				`;
+  }
+}}
+	${({ size: o }) => {
+  switch (o) {
+    case "s":
+      return a`
+					${H.title4};
+				`;
+    case "m":
+      return a`
+					${H.title3};
+				`;
+  }
+}}
+`, sn = n.div`
+	padding-left: ${Oo}px;
+
+	display: flex;
+	align-items: center;
+`, Co = (o) => /* @__PURE__ */ e.jsx(Ht, { ...o, type: "button" }), yo = n.div`
+	padding: 0 ${Oo}px;
+
+	text-decoration: underline;
+	text-underline-position: under;
+`, Lt = n.a`
+	text-decoration: none;
+`, zt = ({
+  size: o,
+  colorType: t,
+  children: r,
+  url: s,
+  onClick: l,
+  disabled: d = !1
+}) => /* @__PURE__ */ e.jsx(e.Fragment, { children: s ? /* @__PURE__ */ e.jsx(Lt, { href: s, target: "_blank", children: /* @__PURE__ */ e.jsx(Co, { styleType: "underline", disabled: d, colorType: t, size: o, children: /* @__PURE__ */ e.jsx(yo, { children: r }) }) }) : /* @__PURE__ */ e.jsx(Co, { styleType: "underline", onClick: l, disabled: d, colorType: t, size: o, children: /* @__PURE__ */ e.jsx(yo, { children: r }) }) }), ln = n.input`
+	box-sizing: border-box;
+	-webkit-appearance: none;
+	appearance: none;
+	margin: 0;
+	font: inherit;
+	color: currentColor;
+	width: 21px;
+	height: 21px;
+	border-style: solid;
+	border-width: 2px;
+	border-radius: 50%;
+	display: grid;
+	place-content: center;
+	background: transparent;
+	cursor: ${({ disabled: o }) => o ? "not-allowed" : "pointer"};
+
+	background-color: ${({ colorType: o, disabled: t }) => D(o)[t ? "disabled" : "default"].off.containerColor};
+	border-color: ${({ colorType: o, disabled: t }) => D(o)[t ? "disabled" : "default"].off.borderColor};
+
+	&:checked {
+		border-width: 6px;
+		background-color: ${({ colorType: o, disabled: t }) => D(o)[t ? "disabled" : "default"].on.containerColor};
+		border-color: ${({ colorType: o, disabled: t }) => D(o)[t ? "disabled" : "default"].on.borderColor};
+	}
+
+	&:focus {
+		outline: none;
+	}
+`, w = {
+  innerWrapper: "datepicker-inner-wrapper",
+  dot: "datepicker-dot",
+  rangeBackgroundWrapper: "datepicker-range-background-wrapper"
+}, v = 100, dn = n.div`
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+
+	position: absolute;
+	left: 47%;
+	bottom: 5.86px;
+`, R = a`
+	width: ${v}%;
+	height: ${v}%;
+`, I = n.div`
+	${R};
+	position: relative;
+	/* height가 안 정해진 상태에서 height = width 적용되는 방법 */
+	padding-bottom: ${v}%;
+`, cn = n.div`
+	${R};
+
+	position: absolute;
+	left: 0;
+
+	${({ rangeBackgroundColor: o }) => o && a`
+			background: ${o};
+		`}
+`, pn = n.div`
+	${R};
+
+	position: absolute;
+	left: 0;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	border-radius: 50%;
+
+	${({ circleBackgroundColor: o }) => o && a`
+			background-color: ${o};
+		`};
+`, xn = n(I)``, un = n(I)`
+	cursor: pointer;
+
+	.${w.innerWrapper} {
+		:hover {
+			background-color: ${({ colorType: o }) => Ao(o).hoverContainerColor};
+		}
+	}
+
+	.${w.dot} {
+		background-color: ${i.gray200};
+	}
+`, mn = n(I)`
+	cursor: not-allowed;
+
+	.${w.dot} {
+		background-color: ${i.gray100};
+	}
+`, Mo = n(I)`
+	cursor: pointer;
+
+	.${w.dot} {
+		background-color: ${i.white};
+	}
+`, gn = n(Mo)`
+	.${w.rangeBackgroundWrapper} {
+		left: ${v / 2}%;
+		width: ${v / 2}%;
+	}
+`, hn = n(Mo)`
+	.${w.rangeBackgroundWrapper} {
+		width: ${v / 2}%;
+	}
+`, bn = n(I)``, fn = n.div`
+	${R};
+
+	position: absolute;
+	left: 0;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+`, No = _.memo(
+  ({ className: o, visible: t, onClick: r, zIndex: s = C.modal, children: l }) => {
+    const [d, x] = T(!1), u = (p) => {
+      p.target === p.currentTarget && (r == null || r());
+    };
+    return W(() => {
+      let p;
+      return t ? x(!0) : p = setTimeout(() => x(!1), 400), () => {
+        p !== void 0 && clearTimeout(p);
+      };
+    }, [t]), ko(t), d ? /* @__PURE__ */ e.jsx(wt, { className: o, visible: t, zIndex: s, onClick: u, children: l }) : null;
+  }
+), oo = (o) => /* @__PURE__ */ e.jsx(To, { children: /* @__PURE__ */ e.jsx(L, { ...o }) }), to = (o) => /* @__PURE__ */ e.jsx(To, { children: /* @__PURE__ */ e.jsx(Io, { ...o }) }), eo = ({ children: o, ...t }) => {
+  const r = Bo(null);
+  return W(() => {
+    var s;
+    (s = r.current) == null || s.scroll(0, 0);
+  }, []), /* @__PURE__ */ e.jsx(Ct, { ref: r, ...t, children: o });
+}, F = ({ children: o }) => /* @__PURE__ */ e.jsx($t, { children: o }), ro = ({
+  visible: o,
+  onMaskClick: t,
+  className: r,
+  zIndex: s = C.modal,
+  minHeight: l,
+  children: d
+}) => {
+  const [x, u] = T(0), p = k(() => {
+    u(window == null ? void 0 : window.innerHeight);
+  }, []);
+  return W(() => {
+    p();
+  }, [p]), Bt(p), ko(o), o ? /* @__PURE__ */ e.jsx(No, { visible: o, className: r, onClick: t, zIndex: s, children: /* @__PURE__ */ e.jsx(bt, { children: /* @__PURE__ */ e.jsx(ft, { visible: o, zIndex: s, minHeight: l, vh: x, children: d }) }) }) : null;
+}, $n = Object.assign(ro, {
+  SingleButton: oo,
+  DoubleButton: to,
+  Body: eo,
+  Header: F
+}), _t = ({
+  title: o,
+  titleColor: t,
+  leftChildren: r,
+  rightChildren: s,
+  zIndex: l = C.gnb,
+  backgroundColor: d
+}) => /* @__PURE__ */ e.jsxs(mt, { backgroundColor: d, zIndex: l, children: [
+  r && /* @__PURE__ */ e.jsx(gt, { children: r }),
+  o && /* @__PURE__ */ e.jsx(Ot, { color: t, children: o }),
+  s && /* @__PURE__ */ e.jsx(ht, { children: s })
+] }), Et = ({
+  contentColor: o,
+  hasBackgroundColor: t,
+  leftArea: r,
+  rightArea: s,
+  ...l
+}) => {
+  const d = P[o].icon, x = P[o].title, u = P[o].rightText, p = P[o].backgroundColor, y = fo(() => {
+    const b = () => {
+      r == null || r.handleClickButton();
+    };
+    switch (r == null ? void 0 : r.type) {
+      case "backIcon":
+        return /* @__PURE__ */ e.jsx(Z, { onClick: b, children: /* @__PURE__ */ e.jsx(et, { fillColor: x }) });
+      default:
+        return;
+    }
+  }, [r, x]), h = fo(() => {
+    const b = () => {
+      s == null || s.handleClickButton();
+    };
+    switch (s == null ? void 0 : s.type) {
+      case "closeIcon":
+        return /* @__PURE__ */ e.jsx(Z, { onClick: b, children: /* @__PURE__ */ e.jsx(tt, { fillColor: d }) });
+      case "icon":
+        return /* @__PURE__ */ e.jsx(Z, { onClick: b, children: /* @__PURE__ */ e.jsx(s.children, { fillColor: x }) });
+      case "text":
+        return /* @__PURE__ */ e.jsx(ut, { onClick: b, children: /* @__PURE__ */ e.jsx(E, { color: u, children: s.children }) });
+      default:
+        return;
+    }
+  }, [d, x, u, s]);
+  return /* @__PURE__ */ e.jsx(
+    _t,
+    {
+      backgroundColor: t ? p : "transparent",
+      leftChildren: y,
+      titleColor: x,
+      rightChildren: h,
+      ...l
+    }
+  );
+}, Rt = ({ children: o }) => /* @__PURE__ */ e.jsx(F, { children: /* @__PURE__ */ e.jsx(kt, { children: o }) }), Ft = (o) => /* @__PURE__ */ e.jsx(Rt, { children: /* @__PURE__ */ e.jsx(Et, { ...o }) }), Cn = Object.assign(ro, {
+  Header: F,
+  Navigation: Ft,
+  Body: eo,
+  SingleButton: oo,
+  DoubleButton: to
+}), yn = _.forwardRef((o, t) => {
+  const {
+    realValue: r,
+    postfix: s,
+    onBlur: l,
+    onFocus: d,
+    onClick: x,
+    disabled: u,
+    label: p,
+    placeholder: y,
+    errorValidation: h,
+    logRocketMasking: b,
+    focus: U = !1,
+    max: ao,
+    decoration: so,
+    updateRealValue: lo,
+    formatRealValue: O,
+    formatDisplayValue: j,
+    type: co,
+    pattern: Eo,
+    ...Ro
+  } = o, [M, Fo] = T(""), [Uo, V] = T(""), [G, po] = T(U), B = Bo(null), q = G || !!M, xo = !p && !q && !!y, uo = k(
+    (c) => {
+      if (c.length === 0 || c === "0") {
+        V("");
+        return;
+      }
+      if (h)
+        for (let m = 0; m < h.length; m++)
+          if (!h[m].condition(c) && c.length !== 0) {
+            V(h[m].errorText);
+            break;
+          } else
+            V("");
+    },
+    [h]
+  ), mo = k((c) => {
+    const { type: m } = c;
+    po(m === "focus");
+  }, []), go = k(
+    (c) => {
+      var m;
+      x == null || x(c), (m = B.current) == null || m.focus();
+    },
+    [x, B]
+  ), Vo = k(
+    (c) => {
+      const m = (O == null ? void 0 : O(c)) || c, ho = Number(ao), bo = Number(m);
+      ho && !isNaN(bo) && bo > ho || lo(m);
+    },
+    [ao, lo, O]
+  );
+  return W(() => {
+    let c = r;
+    j && (c = (j == null ? void 0 : j(c)) || ""), Fo(c), uo(r);
+  }, [j, uo, r]), W(() => {
+    var c;
+    U && ((c = B.current) == null || c.focus());
+  }, [B, U]), /* @__PURE__ */ e.jsxs(
+    xt,
+    {
+      label: p,
+      active: q,
+      focused: G,
+      disabled: !!u,
+      errorText: Uo,
+      handleClickInput: go,
+      children: [
+        /* @__PURE__ */ e.jsxs(at, { children: [
+          /* @__PURE__ */ e.jsx(st, { focused: G, displayValue: M, children: /* @__PURE__ */ e.jsx(
+            lt,
+            {
+              ...Ro,
+              className: dt.inputTag,
+              hasLabel: !!p,
+              placeholder: xo ? y : "",
+              "data-private": b,
+              ref: t || B,
+              name: p,
+              disabled: u,
+              value: j ? M : r,
+              onChange: (c) => {
+                const m = c.currentTarget.value;
+                Vo(m);
+              },
+              onFocus: (c) => {
+                d == null || d(c), mo(c);
+              },
+              onBlur: (c) => {
+                l == null || l(c), mo(c);
+              },
+              decoration: !1,
+              pattern: co === "number" ? "\\d*" : Eo,
+              type: co,
+              onClick: go,
+              size: xo ? void 0 : 1
+            }
+          ) }),
+          /* @__PURE__ */ e.jsx(ct, { children: q && /* @__PURE__ */ e.jsx(pt, { hasLabel: !!p, hasValue: !!M, children: /* @__PURE__ */ e.jsx(S, { md: "Title1", color: u ? i.gray200 : void 0, children: s }) }) })
+        ] }),
+        so && /* @__PURE__ */ e.jsx(it, { disabled: u, children: so })
+      ]
+    }
+  );
+}), jn = n.div`
+	position: absolute;
+	width: 100%;
+	top: 0;
+	height: 3px;
+	background-color: ${i.gray50};
+`, wn = n.div`
+	width: ${({ progress: o }) => o}%;
+	background-color: ${({ colorType: o }) => vt(o).upperColor};
+	height: 100%;
+	transition: width 3s ease-in-out;
+`, Do = {
+  subTitle: "title-bottom-sheet-sub-title"
+}, Ut = n(E)`
+	color: ${i.gray400};
+`, Vt = n.div`
+	padding: 25px ${({ contentPadding: o }) => `${o ? 0 : `${yt}px`}`};
+
+	.${Do.subTitle} {
+		margin-top: 10px;
+	}
+`, Po = n.div`
+	margin-top: 25px;
+`, Gt = ({ title: o, subTitle: t, hasContentPadding: r = !0 }) => /* @__PURE__ */ e.jsxs(Vt, { contentPadding: r, children: [
+  o && /* @__PURE__ */ e.jsx(Wo, { children: o }),
+  t && /* @__PURE__ */ e.jsx(Ut, { className: Do.subTitle, children: t })
+] }), qt = (o) => /* @__PURE__ */ e.jsx(Po, { children: /* @__PURE__ */ e.jsx(oo, { ...o }) }), Zt = (o) => /* @__PURE__ */ e.jsx(Po, { children: /* @__PURE__ */ e.jsx(to, { ...o }) }), vn = Object.assign(ro, {
+  Header: F,
+  Body: eo,
+  Title: Gt,
+  SingleButton: qt,
+  DoubleButton: Zt
+}), Jt = n.div`
+	& > div > .select-box {
+		cursor: pointer;
+	}
+	position: relative;
+`, Kt = n.div`
+	position: absolute;
+	z-index: ${C.basicLayer + 1};
+	width: 100%;
+	height: max-content;
+
+	${g(a`
+		top: 70px;
+	`)}
+`, Qt = n.div`
+	height: 80px;
+	pointer-events: none;
+`, Xt = n.div`
+	box-shadow: 0 2px 10px ${wo(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;
+`, Yt = n.div`
+	width: 100%;
+	height: 50px;
+	padding: 15px 25px;
+	cursor: pointer;
+	${vo({ color: i.gray400 })};
+	background-color: ${i.white};
+
+	&:first-of-type {
+		border-top-right-radius: 10px;
+		border-top-left-radius: 10px;
+	}
+
+	&:last-of-type {
+		border-bottom-right-radius: 10px;
+		border-bottom-left-radius: 10px;
+	}
+
+	&:hover {
+		background-color: ${i.gray25};
+	}
+
+	&:active {
+		background-color: ${i.gray50};
+	}
+`, At = n.div`
+	position: absolute;
+	z-index: 10;
+	right: 20px;
+	top: ${({ rotateArrow: o }) => o ? "18px" : "20px"};
+	cursor: pointer;
+	transform: ${({ rotateArrow: o }) => o ? "rotate(180deg)" : "rotate(0)"};
+	pointer-events: none;
+`, oe = n.div`
+	${f(a`
+		display: none;
+	`)}
+`, te = n.div`
+	${g(a`
+		display: none;
+	`)}
+`, Bn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Desktop: oe,
+  IconWrapper: At,
+  Item: Yt,
+  ItemList: Xt,
+  ItemListWrapper: Kt,
+  ListBottomMargin: Qt,
+  Mobile: te,
+  Wrapper: Jt
+}, Symbol.toStringTag, { value: "Module" })), ee = {
+  Text: "chip-item-text"
+}, Ho = 38, kn = n.span`
+	display: inline-flex;
+	min-width: max-content;
+	height: ${Ho}px;
+	gap: 2px;
+	padding: 8px 0 8px 12px;
+	padding-right: ${({ hasRightIcon: o }) => o ? "7px" : "12px"};
+	align-items: center;
+
+	border-radius: 22px;
+
+	${({ disabled: o, selected: t, colorType: r }) => {
+  const s = Tt(r), l = o ? "disabled" : "default", d = t ? "on" : "off";
+  return a`
+			background-color: ${s[l][d].containerColor};
+			border: 1px solid ${s[l][d].borderColor};
+			.${ee.Text} {
+				color: ${s[l][d].textColor};
+			}
+			svg > path {
+				fill: ${s[l][d].iconColor};
+			}
+		`;
+}}
+
+	${({ selected: o }) => !o && a`
+			cursor: pointer;
+		`}
+`, Tn = n.span`
+	cursor: pointer;
+	display: flex;
+`, Lo = {
+  ControlIconContainer: 2
+}, z = Ho, re = 25, ne = i.white, Wn = n.div`
+	display: flex;
+	align-items: center;
+	position: relative;
+	overflow: hidden;
+
+	width: 100%;
+`, Sn = n.div`
+	${A}
+
+	display: flex;
+	gap: 5px;
+	z-index: ${Lo.ControlIconContainer - 1};
+
+	${({ hasIconArea: o }) => o && a`
+			padding-left: ${z + 8}px;
+		`}
+	padding-right: 20px;
+`, In = n.div`
+	cursor: pointer;
+	position: absolute;
+	left: 0;
+	top: 0;
+
+	z-index: ${Lo.ControlIconContainer};
+
+	background-color: ${ne};
+	width: ${z}px;
+	height: ${z}px;
+`, On = n.div`
+	width: ${re}px;
+	height: 100%;
+
+	/* TODO: 컬러, 범위, 여백 수정 필요 */
+	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.01) 100%);
+
+	position: absolute;
+	left: ${z}px;
+	top: 0;
+`, Mn = n.div`
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+
+	background: ${i.gray50};
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	position: absolute;
+	left: 0;
+	top: 0;
+`, Nn = {
+  Item: n.div`
+		display: inline-block;
+		padding-top: 15px;
+		padding-bottom: 11px;
+		cursor: pointer;
+		text-align: center;
+
+		flex-grow: 1;
+
+		position: relative;
+		${({ active: o, colorType: t }) => o ? a`
+						${Y({ color: $(t).on.textColor })};
+						border-bottom: 2px solid ${$(t).on.barColor};
+				  ` : a`
+						${X({ color: $(t).off.textColor })};
+						border-bottom: 2px solid ${$(t).off.barColor};
+				  `};
+	`,
+  Wrapper: n.div`
+		display: flex;
+		gap: 0px;
+
+		width: 100%;
+		background-color: transparent;
+
+		white-space: nowrap;
+
+		border-bottom: 1px solid ${i.gray50};
+	`
+}, Dn = {
+  Item: n.div`
+		display: inline-block;
+		padding: 16px 0;
+		cursor: pointer;
+		text-align: center;
+
+		min-width: max-content;
+
+		position: relative;
+		${({ active: o, colorType: t }) => o ? a`
+						${Y({ color: $(t).on.textColor })};
+						border-bottom: 2px solid ${$(t).on.barColor};
+				  ` : a`
+						${X({ color: $(t).off.textColor })};
+						border-bottom: 2px solid ${$(t).off.barColor};
+				  `};
+	`,
+  Wrapper: n.div`
+		${A}
+
+		display: flex;
+		gap: 30px;
+
+		width: 100%;
+		background-color: transparent;
+
+		white-space: nowrap;
+
+		${f(a`
+			/* Mobile) 에만 좌우 여백 추가  */
+			padding-left: 20px;
+			padding-right: 20px;
+		`)}
+
+		border-bottom: 1px solid ${i.gray50};
+	`
+}, Pn = n.div`
+	overflow: hidden;
+`, Hn = n.div`
+	${A}
+
+	display: flex;
+	gap: 7px;
+
+	padding: 0 20px;
+	${g(a`
+		padding: 0;
+	`)}
+`, Ln = n.div`
+	cursor: pointer;
+	padding: 8px 12px;
+	min-width: fit-content;
+	border-radius: 8px;
+	${Q()}
+
+	${({ colorType: o, status: t }) => {
+  const { textColor: r, containerColor: s } = Wt(o)[t];
+  return a`
+			color: ${r};
+			background: ${s};
+		`;
+}}
+`, zn = n.div`
+	${({ type: o, colorType: t }) => Q({ color: $o({ type: o, colorType: t }).textColor })};
+	background-color: ${({ type: o, colorType: t }) => $o({ type: o, colorType: t }).backgroundColor};
+
+	box-sizing: border-box;
+	width: max-content;
+	padding: 3px 8px;
+	border-radius: 30px;
+	align-items: center;
+	justify-content: center;
+	display: ${({ inline: o }) => o ? "inline-flex" : "flex"};
+`, _n = n.div`
+	${f(a`
+		padding: 25px 0;
+	`)}
+
+	${g(a`
+		padding: 80px 80px 25px;
+	`)}
+
+	/** deletePaddingTop = true 이면, 사용처 BasicLayout 에서 padding-top 관리 */
+
+	${({ deletePaddingTop: o }) => o && f(a`
+			padding-top: 0px;
+		`)}
+
+	${({ deletePaddingTop: o }) => o && g(a`
+			padding-top: 0px;
+		`)}
+`, En = n.div`
+	padding: 0 20px;
+	margin-bottom: 15px;
+	${g(a`
+		padding: 0;
+	`)}
+`, Rn = n(It)`
+	padding: 0 25px;
+	white-space: pre-wrap;
+	${g(a`
+		padding: 0;
+	`)}
+`, Fn = n(E)`
+	margin-top: 10px;
+	padding: 0 25px;
+	color: ${({ color: o }) => o};
+	white-space: pre-wrap;
+	${g(a`
+		padding: 0;
+	`)}
+`, ie = _.memo(
+  ({ zIndex: o = C.modal, visible: t, onMaskClick: r, children: s, className: l }) => /* @__PURE__ */ e.jsx(No, { className: l, visible: t, onClick: r, zIndex: o, children: /* @__PURE__ */ e.jsx(jt, { visible: t, children: s }) })
+), ae = n.div`
+	width: 320px;
+	background-color: ${i.white};
+	z-index: ${C.modal};
+	border-radius: 10px;
+	padding: 30px 0 15px;
+`, se = n.div`
+	text-align: center;
+	white-space: pre-wrap;
+	padding: 0 15px;
+`, le = n(E)`
+	margin-top: 10px;
+
+	text-align: center;
+	white-space: pre-wrap;
+	color: ${i.gray400};
+	font-weight: 500;
+`, de = n.div`
+	padding-left: ${(o) => o.contentPadding ? "20px" : "0"};
+	padding-right: ${(o) => o.contentPadding ? "20px" : "0"};
+	padding-bottom: 30px;
+
+	> * {
+		margin-top: 20px;
+	}
+`, ce = n.div`
+	${H.body1};
+
+	color: ${i.gray400};
+	background: ${i.gray25};
+	border-radius: 10px;
+	padding: 12px;
+	text-align: center;
+	white-space: pre-wrap;
+`, pe = n.div`
+	display: flex;
+	justify-content: center;
+	padding: 0 11px;
+`, zo = n.div`
+	box-sizing: border-box;
+	padding: 0 15px;
+`, xe = (o) => /* @__PURE__ */ e.jsx(zo, { children: /* @__PURE__ */ e.jsx(L, { ...o }) }), ue = (o) => /* @__PURE__ */ e.jsx(zo, { children: /* @__PURE__ */ e.jsx(Io, { ...o }) }), me = ({ title: o, subTitle: t }) => /* @__PURE__ */ e.jsxs(se, { children: [
+  /* @__PURE__ */ e.jsx(Wo, { children: o }),
+  t && /* @__PURE__ */ e.jsx(le, { children: t })
+] }), ge = ({ children: o }) => /* @__PURE__ */ e.jsx(ce, { children: o }), he = ({
+  onClick: o,
+  disabled: t,
+  text: r
+}) => /* @__PURE__ */ e.jsx(pe, { children: /* @__PURE__ */ e.jsx(zt, { size: "m", colorType: "gray", onClick: o, disabled: t, children: r }) }), be = ({ children: o, hasContentPadding: t = !0 }) => /* @__PURE__ */ e.jsx(de, { contentPadding: t, children: o }), fe = _.memo(({ children: o, ...t }) => /* @__PURE__ */ e.jsx(ie, { ...t, children: /* @__PURE__ */ e.jsx(ae, { children: o }) })), Un = Object.assign(fe, {
+  SingleButton: xe,
+  DoubleButton: ue,
+  Title: me,
+  Body: be,
+  Comment: ge,
+  UnderLineMiniButton: he
+}), _o = "-55px", no = "50px", io = "25px", $e = jo`
+	0% {
+		bottom: ${_o};
+	}
+	100% {
+		${f(a`
+			bottom: ${io};
+		`)};
+		${g(a`
+			bottom: ${no};
+		`)};
+	}
+`, Ce = jo`
+	0% {
+		${f(a`
+			bottom: ${io};
+		`)};
+		${g(a`
+			bottom: ${no};
+		`)};
+	}
+	100% {
+		bottom: ${_o};
+	}
+`, ye = (o) => a`
+	visibility: ${o ? "visible" : "hidden"};
+	z-index: ${C.basicLayer + 11};
+	animation: ${o ? $e : Ce} 0.4s ease-out;
+	transition: all 0.4s ease-out;
+`, Vn = n.div`
+	min-width: 320px;
+	max-width: max-content;
+
+	${g(a`
+		min-width: 440px;
+	`)}
+	height: 55px;
+	box-sizing: border-box;
+	background-color: ${wo(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);
+	${f(a`
+		bottom: ${io};
+	`)};
+	${g(a`
+		bottom: ${no};
+	`)};
+	${({ visible: o }) => ye(o)};
+`, Gn = n.div`
+	${H.title3};
+	color: ${i.white};
+	width: 100%;
+`;
+export {
+  zn as $,
+  Yt as A,
+  $n as B,
+  sn as C,
+  Io as D,
+  kn as E,
+  ee as F,
+  Tn as G,
+  It as H,
+  ln as I,
+  In as J,
+  On as K,
+  Qt as L,
+  Un as M,
+  Et as N,
+  Wn as O,
+  yn as P,
+  Mn as Q,
+  Sn as R,
+  L as S,
+  vn as T,
+  zt as U,
+  Dn as V,
+  Jt as W,
+  Nn as X,
+  Pn as Y,
+  Hn as Z,
+  Ln as _,
+  Dt as a,
+  _n as a0,
+  En as a1,
+  Rn as a2,
+  Fn as a3,
+  tn as a4,
+  en as a5,
+  rn as a6,
+  nn as a7,
+  an as a8,
+  un as a9,
+  te as aA,
+  ae as aB,
+  se as aC,
+  le as aD,
+  de as aE,
+  ce as aF,
+  pe as aG,
+  zo as aH,
+  cn as aa,
+  w as ab,
+  pn as ac,
+  dn as ad,
+  mn as ae,
+  Mo as af,
+  xn as ag,
+  gn as ah,
+  hn as ai,
+  bn as aj,
+  fn as ak,
+  Vn as al,
+  Gn as am,
+  Ho as an,
+  Oo as ao,
+  Ht as ap,
+  yo as aq,
+  Lt as ar,
+  R as as,
+  I as at,
+  No as au,
+  _t as av,
+  Do as aw,
+  Ut as ax,
+  Vt as ay,
+  Po as az,
+  ro as b,
+  F as c,
+  eo as d,
+  oo as e,
+  to as f,
+  Cn as g,
+  Rt as h,
+  Bn as i,
+  ie as j,
+  Wo as k,
+  Ot as l,
+  E as m,
+  S as n,
+  Tt as o,
+  $ as p,
+  Wt as q,
+  jn as r,
+  wn as s,
+  J as t,
+  Pt as u,
+  Co as v,
+  At as w,
+  oe as x,
+  Kt as y,
+  Xt as z
+};