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

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

@@ -0,0 +1,1342 @@
+import { css as a, keyframes as jo } from "@emotion/react";
+import n from "@emotion/styled";
+import { zIndex as y } from "../constants/style.constants.es.js";
+import { basicColors as i, semanticColors as Q, generateHexWithAlphaInLightMode as wo } from "../core/Colors/index.es.js";
+import { body2 as Go, body1 as qo, title4 as X, title3 as Y, title2 as vo, title1 as Zo, headline6 as z, headline5 as Jo, headline4 as Ko, headline3 as Qo, headline2 as Xo, headline1 as Yo, typography as L } 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 E, { forwardRef as ot, useState as T, useEffect as W, useCallback as k, useRef as Bo, useMemo as fo } from "react";
+import { SpinnerWrapper as tt } from "../components/Loading/Spinner/index.styled.es.js";
+import { LottieWrapper as et } from "../components/Button/BaseButton/index.styled.es.js";
+import rt from "../utils/GenerateColorStyle/single-button.es.js";
+import { Wrapper as nt } from "../components/Button/DoubleButton/index.styled.es.js";
+import "../components/MiniButton/BoxMiniButton/index.styled.es.js";
+import "../components/Button/FloatBaseButton/index.styled.es.js";
+import "../components/Button/FloatDoubleButton/index.styled.es.js";
+import "../components/Card/index.styled.es.js";
+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 it } 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 at } 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 "../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 st } from "./index.styled.Cw4AEFns.js";
+import { InputAndUnitWrapper as lt, InputSizer as dt, InputTag as ct, className as pt, UnitWrapper as xt, Unit as ut } from "../components/Input/PostfixInput/index.styled.es.js";
+import { InputFrame as mt } 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 J, TextWrapper as gt } from "../components/Navigation/index.styled.es.js";
+import { Wrapper as ht, LeftChildrenWrapper as bt, RightChildrenWrapper as ft } 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 $t, Content as Ct, HeaderWrapper as yt, ChildrenWrapper as jt, FooterWrapper as To, ContentWrapperPadding as wt } from "../components/BottomSheet/BaseBottomSheet/index.styled.es.js";
+import { scrollStyle as A } from "../style/common.es.js";
+import { ModalContent as vt } from "../components/Modal/BaseModal/index.styled.es.js";
+import { Overlay as Bt } from "../components/OverlayRoot/index.styled.es.js";
+import "../components/ToastMessage/Toast/index.styled.es.js";
+import "../components/Tooltip/TooltipBase/index.styled.es.js";
+import $o from "../utils/GenerateColorStyle/tag.es.js";
+import kt from "../utils/GenerateColorStyle/progress-bar.es.js";
+import Tt from "../hooks/useResize.es.js";
+import { NavigationWrapper as Wt } from "../components/BottomSheet/NavBottomSheet/index.styled.es.js";
+const St = (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: Q.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
+      }
+    }
+  };
+}, C = (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
+        }
+      };
+  }
+}, It = (o) => {
+  const t = i.gray700, r = i.gray50;
+  switch (o) {
+    case "gray":
+      return {
+        on: {
+          textColor: Q.buttonGrayMainAbledText,
+          containerColor: i.gray700
+        },
+        off: {
+          textColor: t,
+          containerColor: r
+        }
+      };
+    default:
+      return {
+        on: {
+          textColor: Q.buttonGrayMainAbledText,
+          containerColor: i[`${o}400`]
+        },
+        off: {
+          textColor: t,
+          containerColor: r
+        }
+      };
+  }
+}, dn = n.div`
+	${f(a`
+		display: none;
+	`)}
+`, cn = n.div`
+	${g(a`
+		display: none;
+	`)}
+`, K = {
+  Headline1: Yo,
+  Headline2: Xo,
+  Headline3: Qo,
+  Headline4: Ko,
+  Headline5: Jo,
+  Headline6: z,
+  Title1: Zo,
+  Title2: vo,
+  Title3: Y,
+  Title4: X,
+  Body1: qo,
+  Body2: Go
+}, Ot = n.div`
+	text-align: ${(o) => o.textAlign};
+	white-space: pre-wrap;
+	${(o) => K[o.md](o)}
+
+	${(o) => o.sm && f(a`
+			 {
+				${K[o.sm](o)}
+			}
+		`)}
+	${(o) => o.lg && g(a`
+			 {
+				${K[o.lg](o)}
+			}
+		`)}
+`, S = (o) => {
+  const { children: t } = o;
+  return /* @__PURE__ */ e.jsx(Ot, { ...o, children: t });
+}, Mt = (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 });
+}, Nt = (o) => {
+  const { children: t, ...r } = o;
+  return /* @__PURE__ */ e.jsx(S, { ...r, md: "Headline5", children: t });
+}, R = (o) => {
+  const { children: t, ...r } = o;
+  return /* @__PURE__ */ e.jsx(S, { ...r, md: "Title3", children: t });
+}, Dt = i.red400, Pt = "16px", So = a`
+	background-color: ${Dt};
+`, pn = n.div`
+	${So};
+
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+`, xn = n.div`
+	${So};
+
+	height: ${Pt};
+	padding: 0 5px;
+	border-radius: 8px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`, un = n.div`
+	line-height: initial;
+
+	font-size: 11px;
+	font-weight: 500;
+	color: ${i.white};
+	letter-spacing: -0.2px;
+`, Lt = (o) => {
+  const { colorType: t } = o;
+  let r = i.white;
+  switch (t) {
+    case "gray":
+      r = i.gray200;
+  }
+  return /* @__PURE__ */ e.jsx(tt, { color: r });
+}, Ht = "10px", _t = ot((o, t) => {
+  const {
+    onClick: r,
+    children: s,
+    disabled: l,
+    className: d,
+    typography: x,
+    height: u,
+    isLoading: p = !1,
+    type: $ = "button",
+    ...h
+  } = o;
+  return /* @__PURE__ */ e.jsx(
+    zt,
+    {
+      ref: t,
+      onClick: r,
+      disabled: l || p,
+      className: d,
+      typography: x,
+      height: u,
+      type: $,
+      ...h,
+      children: p ? /* @__PURE__ */ e.jsx(et, { children: /* @__PURE__ */ e.jsx(Lt, { colorType: "white" }) }) : s
+    }
+  );
+}), zt = n.button`
+	border: none;
+
+	${({ typography: o }) => o};
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: 100%;
+	height: ${({ height: o }) => o + "px"};
+	border-radius: ${({ borderRadius: o }) => o || Ht};
+
+	${({ purpose: o, colorType: t }) => {
+  const r = rt({ colorType: t, purpose: o });
+  return a`
+			color: ${r.textColor};
+			background-color: ${r.defaultContainerColor};
+
+			@media (hover: hover) {
+				&:hover {
+					background-color: ${r.hoverContainerColor};
+				}
+			}
+
+			&:active {
+				background-color: ${r.focusedContainerColor};
+			}
+
+			&:disabled {
+				color: ${r.disabledTextColor};
+				background-color: ${r.disabledContainerColor};
+			}
+		`;
+}}
+`, H = (o) => {
+  const { children: t, className: r, type: s, purpose: l, onClick: d, ...x } = o, u = s || (l === "main" ? "submit" : void 0);
+  return /* @__PURE__ */ e.jsx(
+    _t,
+    {
+      ...x,
+      className: r,
+      onClick: d,
+      typography: z(),
+      height: 50,
+      type: u,
+      purpose: l,
+      children: t
+    }
+  );
+}, Io = ({
+  purpose: o,
+  colorType: t,
+  left: { children: r, onClick: s, className: l, disabled: d },
+  right: {
+    children: x,
+    onClick: u,
+    className: p,
+    disabled: $,
+    type: h
+  }
+}) => {
+  const b = o === "main" ? "gray" : t;
+  return /* @__PURE__ */ e.jsxs(nt, { children: [
+    /* @__PURE__ */ e.jsx(
+      H,
+      {
+        onClick: s,
+        colorType: b,
+        purpose: "sub",
+        disabled: d,
+        className: l,
+        children: r
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      H,
+      {
+        onClick: u,
+        colorType: t,
+        purpose: "main",
+        disabled: $,
+        className: p,
+        type: h || "submit",
+        children: x
+      }
+    )
+  ] });
+}, Oo = 5, Et = 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`
+					${L.title4};
+				`;
+    case "m":
+      return a`
+					${L.title3};
+				`;
+  }
+}}
+`, mn = n.div`
+	padding-left: ${Oo}px;
+
+	display: flex;
+	align-items: center;
+`, Co = (o) => /* @__PURE__ */ e.jsx(Et, { ...o, type: "button" }), yo = n.div`
+	padding: 0 ${Oo}px;
+
+	text-decoration: underline;
+	text-underline-position: under;
+`, Rt = n.a`
+	text-decoration: none;
+`, Ft = ({
+  size: o,
+  colorType: t,
+  children: r,
+  url: s,
+  onClick: l,
+  disabled: d = !1
+}) => /* @__PURE__ */ e.jsx(e.Fragment, { children: s ? /* @__PURE__ */ e.jsx(Rt, { 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 }) }) }), gn = 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, hn = n.div`
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+
+	position: absolute;
+	left: 47%;
+	bottom: 5.86px;
+`, F = a`
+	width: ${v}%;
+	height: ${v}%;
+`, I = n.div`
+	${F};
+	position: relative;
+	/* height가 안 정해진 상태에서 height = width 적용되는 방법 */
+	padding-bottom: ${v}%;
+`, bn = n.div`
+	${F};
+
+	position: absolute;
+	left: 0;
+
+	${({ rangeBackgroundColor: o }) => o && a`
+			background: ${o};
+		`}
+`, fn = n.div`
+	${F};
+
+	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};
+		`};
+`, $n = n(I)``, Cn = n(I)`
+	cursor: pointer;
+
+	.${w.innerWrapper} {
+		:hover {
+			background-color: ${({ colorType: o }) => Ao(o).hoverContainerColor};
+		}
+	}
+
+	.${w.dot} {
+		background-color: ${i.gray200};
+	}
+`, yn = n(I)`
+	cursor: not-allowed;
+
+	.${w.dot} {
+		background-color: ${i.gray100};
+	}
+`, Mo = n(I)`
+	cursor: pointer;
+
+	.${w.dot} {
+		background-color: ${i.white};
+	}
+`, jn = n(Mo)`
+	.${w.rangeBackgroundWrapper} {
+		left: ${v / 2}%;
+		width: ${v / 2}%;
+	}
+`, wn = n(Mo)`
+	.${w.rangeBackgroundWrapper} {
+		width: ${v / 2}%;
+	}
+`, vn = n(I)``, Bn = n.div`
+	${F};
+
+	position: absolute;
+	left: 0;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+`, No = E.memo(
+  ({ className: o, visible: t, onClick: r, zIndex: s = y.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(Bt, { className: o, visible: t, zIndex: s, onClick: u, children: l }) : null;
+  }
+), oo = (o) => /* @__PURE__ */ e.jsx(To, { children: /* @__PURE__ */ e.jsx(H, { ...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(jt, { ref: r, ...t, children: o });
+}, U = ({ children: o }) => /* @__PURE__ */ e.jsx(yt, { children: o }), ro = ({
+  visible: o,
+  onMaskClick: t,
+  className: r,
+  zIndex: s = y.modal,
+  minHeight: l,
+  children: d
+}) => {
+  const [x, u] = T(0), p = k(() => {
+    u(window == null ? void 0 : window.innerHeight);
+  }, []);
+  return W(() => {
+    p();
+  }, [p]), Tt(p), ko(o), o ? /* @__PURE__ */ e.jsx(No, { visible: o, className: r, onClick: t, zIndex: s, children: /* @__PURE__ */ e.jsx($t, { children: /* @__PURE__ */ e.jsx(Ct, { visible: o, zIndex: s, minHeight: l, vh: x, children: d }) }) }) : null;
+}, kn = Object.assign(ro, {
+  SingleButton: oo,
+  DoubleButton: to,
+  Body: eo,
+  Header: U
+}), Ut = ({
+  title: o,
+  titleColor: t,
+  leftChildren: r,
+  rightChildren: s,
+  zIndex: l = y.gnb,
+  backgroundColor: d
+}) => /* @__PURE__ */ e.jsxs(ht, { backgroundColor: d, zIndex: l, children: [
+  r && /* @__PURE__ */ e.jsx(bt, { children: r }),
+  o && /* @__PURE__ */ e.jsx(Nt, { color: t, children: o }),
+  s && /* @__PURE__ */ e.jsx(ft, { children: s })
+] }), Vt = ({
+  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, $ = fo(() => {
+    const b = () => {
+      r == null || r.handleClickButton();
+    };
+    switch (r == null ? void 0 : r.type) {
+      case "backIcon":
+        return /* @__PURE__ */ e.jsx(J, { onClick: b, children: /* @__PURE__ */ e.jsx(at, { 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(J, { onClick: b, children: /* @__PURE__ */ e.jsx(it, { fillColor: d }) });
+      case "icon":
+        return /* @__PURE__ */ e.jsx(J, { onClick: b, children: /* @__PURE__ */ e.jsx(s.children, { fillColor: x }) });
+      case "text":
+        return /* @__PURE__ */ e.jsx(gt, { onClick: b, children: /* @__PURE__ */ e.jsx(R, { color: u, children: s.children }) });
+      default:
+        return;
+    }
+  }, [d, x, u, s]);
+  return /* @__PURE__ */ e.jsx(
+    Ut,
+    {
+      backgroundColor: t ? p : "transparent",
+      leftChildren: $,
+      titleColor: x,
+      rightChildren: h,
+      ...l
+    }
+  );
+}, Gt = ({ children: o }) => /* @__PURE__ */ e.jsx(U, { children: /* @__PURE__ */ e.jsx(Wt, { children: o }) }), qt = (o) => /* @__PURE__ */ e.jsx(Gt, { children: /* @__PURE__ */ e.jsx(Vt, { ...o }) }), Tn = Object.assign(ro, {
+  Header: U,
+  Navigation: qt,
+  Body: eo,
+  SingleButton: oo,
+  DoubleButton: to
+}), Wn = E.forwardRef((o, t) => {
+  const {
+    realValue: r,
+    postfix: s,
+    onBlur: l,
+    onFocus: d,
+    onClick: x,
+    disabled: u,
+    label: p,
+    placeholder: $,
+    errorValidation: h,
+    logRocketMasking: b,
+    focus: V = !1,
+    max: ao,
+    decoration: so,
+    updateRealValue: lo,
+    formatRealValue: O,
+    formatDisplayValue: j,
+    type: co,
+    pattern: Eo,
+    ...Ro
+  } = o, [M, Fo] = T(""), [Uo, G] = T(""), [q, po] = T(V), B = Bo(null), Z = q || !!M, xo = !p && !Z && !!$, uo = k(
+    (c) => {
+      if (c.length === 0 || c === "0") {
+        G("");
+        return;
+      }
+      if (h)
+        for (let m = 0; m < h.length; m++)
+          if (!h[m].condition(c) && c.length !== 0) {
+            G(h[m].errorText);
+            break;
+          } else
+            G("");
+    },
+    [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;
+    V && ((c = B.current) == null || c.focus());
+  }, [B, V]), /* @__PURE__ */ e.jsxs(
+    mt,
+    {
+      label: p,
+      active: Z,
+      focused: q,
+      disabled: !!u,
+      errorText: Uo,
+      handleClickInput: go,
+      children: [
+        /* @__PURE__ */ e.jsxs(lt, { children: [
+          /* @__PURE__ */ e.jsx(dt, { focused: q, displayValue: M, children: /* @__PURE__ */ e.jsx(
+            ct,
+            {
+              ...Ro,
+              className: pt.inputTag,
+              hasLabel: !!p,
+              placeholder: xo ? $ : "",
+              "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(xt, { children: Z && /* @__PURE__ */ e.jsx(ut, { hasLabel: !!p, hasValue: !!M, children: /* @__PURE__ */ e.jsx(S, { md: "Title1", color: u ? i.gray200 : void 0, children: s }) }) })
+        ] }),
+        so && /* @__PURE__ */ e.jsx(st, { disabled: u, children: so })
+      ]
+    }
+  );
+}), Sn = n.div`
+	position: absolute;
+	width: 100%;
+	top: 0;
+	height: 3px;
+	background-color: ${i.gray50};
+`, In = n.div`
+	width: ${({ progress: o }) => o}%;
+	background-color: ${({ colorType: o }) => kt(o).upperColor};
+	height: 100%;
+	transition: width 3s ease-in-out;
+`, Do = {
+  subTitle: "title-bottom-sheet-sub-title"
+}, Zt = n(R)`
+	color: ${i.gray400};
+`, Jt = n.div`
+	padding: 25px ${({ contentPadding: o }) => `${o ? 0 : `${wt}px`}`};
+
+	.${Do.subTitle} {
+		margin-top: 10px;
+	}
+`, Po = n.div`
+	margin-top: 25px;
+`, Kt = ({ title: o, subTitle: t, hasContentPadding: r = !0 }) => /* @__PURE__ */ e.jsxs(Jt, { contentPadding: r, children: [
+  o && /* @__PURE__ */ e.jsx(Wo, { children: o }),
+  t && /* @__PURE__ */ e.jsx(Zt, { className: Do.subTitle, children: t })
+] }), Qt = (o) => /* @__PURE__ */ e.jsx(Po, { children: /* @__PURE__ */ e.jsx(oo, { ...o }) }), Xt = (o) => /* @__PURE__ */ e.jsx(Po, { children: /* @__PURE__ */ e.jsx(to, { ...o }) }), On = Object.assign(ro, {
+  Header: U,
+  Body: eo,
+  Title: Kt,
+  SingleButton: Qt,
+  DoubleButton: Xt
+}), Yt = n.div`
+	& > div > .select-box {
+		cursor: pointer;
+	}
+	position: relative;
+`, At = n.div`
+	position: absolute;
+	z-index: ${y.basicLayer + 1};
+	width: 100%;
+	height: max-content;
+
+	${g(a`
+		top: 70px;
+	`)}
+`, oe = n.div`
+	height: 80px;
+	pointer-events: none;
+`, te = 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;
+`, ee = 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};
+	}
+`, re = 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;
+`, ne = n.div`
+	${f(a`
+		display: none;
+	`)}
+`, ie = n.div`
+	${g(a`
+		display: none;
+	`)}
+`, Mn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Desktop: ne,
+  IconWrapper: re,
+  Item: ee,
+  ItemList: te,
+  ItemListWrapper: At,
+  ListBottomMargin: oe,
+  Mobile: ie,
+  Wrapper: Yt
+}, Symbol.toStringTag, { value: "Module" })), ae = {
+  Text: "chip-item-text"
+}, Lo = 38, Nn = n.span`
+	display: inline-flex;
+	min-width: max-content;
+	height: ${Lo}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 = St(r), l = o ? "disabled" : "default", d = t ? "on" : "off";
+  return a`
+			background-color: ${s[l][d].containerColor};
+			border: 1px solid ${s[l][d].borderColor};
+			.${ae.Text} {
+				color: ${s[l][d].textColor};
+			}
+			svg > path {
+				fill: ${s[l][d].iconColor};
+			}
+		`;
+}}
+
+	${({ selected: o }) => !o && a`
+			cursor: pointer;
+		`}
+`, Dn = n.span`
+	cursor: pointer;
+	display: flex;
+`, Ho = {
+  ControlIconContainer: 2
+}, _ = Lo, se = 25, le = i.white, Pn = n.div`
+	display: flex;
+	align-items: center;
+	position: relative;
+	overflow: hidden;
+
+	width: 100%;
+`, Ln = n.div`
+	${A}
+
+	display: flex;
+	gap: 5px;
+	z-index: ${Ho.ControlIconContainer - 1};
+
+	${({ hasIconArea: o }) => o && a`
+			padding-left: ${_ + 8}px;
+		`}
+	padding-right: 20px;
+`, Hn = n.div`
+	cursor: pointer;
+	position: absolute;
+	left: 0;
+	top: 0;
+
+	z-index: ${Ho.ControlIconContainer};
+
+	background-color: ${le};
+	width: ${_}px;
+	height: ${_}px;
+`, _n = n.div`
+	width: ${se}px;
+	height: 100%;
+
+	/* TODO: 컬러, 범위, 여백 수정 필요 */
+	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.01) 100%);
+
+	position: absolute;
+	left: ${_}px;
+	top: 0;
+`, zn = 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;
+`, En = {
+  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`
+						${z({ color: C(t).on.textColor })};
+						border-bottom: 2px solid ${C(t).on.barColor};
+				  ` : a`
+						${Y({ color: C(t).off.textColor })};
+						border-bottom: 2px solid ${C(t).off.barColor};
+				  `};
+	`,
+  Wrapper: n.div`
+		display: flex;
+		gap: 0px;
+
+		width: 100%;
+		background-color: transparent;
+
+		white-space: nowrap;
+
+		border-bottom: 1px solid ${i.gray50};
+	`
+}, Rn = {
+  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`
+						${z({ color: C(t).on.textColor })};
+						border-bottom: 2px solid ${C(t).on.barColor};
+				  ` : a`
+						${Y({ color: C(t).off.textColor })};
+						border-bottom: 2px solid ${C(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};
+	`
+}, Fn = n.div`
+	overflow: hidden;
+`, Un = n.div`
+	${A}
+
+	display: flex;
+	gap: 7px;
+
+	padding: 0 20px;
+	${g(a`
+		padding: 0;
+	`)}
+`, Vn = n.div`
+	cursor: pointer;
+	padding: 8px 12px;
+	min-width: fit-content;
+	border-radius: 8px;
+	${X()}
+
+	${({ colorType: o, status: t }) => {
+  const { textColor: r, containerColor: s } = It(o)[t];
+  return a`
+			color: ${r};
+			background: ${s};
+		`;
+}}
+`, Gn = n.div`
+	${({ type: o, colorType: t }) => X({ 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"};
+`, qn = 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;
+		`)}
+`, Zn = n.div`
+	padding: 0 20px;
+	margin-bottom: 15px;
+	${g(a`
+		padding: 0;
+	`)}
+`, Jn = n(Mt)`
+	padding: 0 25px;
+	white-space: pre-wrap;
+	${g(a`
+		padding: 0;
+	`)}
+`, Kn = n(R)`
+	margin-top: 10px;
+	padding: 0 25px;
+	color: ${({ color: o }) => o};
+	white-space: pre-wrap;
+	${g(a`
+		padding: 0;
+	`)}
+`, de = E.memo(
+  ({ zIndex: o = y.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(vt, { visible: t, children: s }) })
+), ce = n.div`
+	width: 320px;
+	background-color: ${i.white};
+	z-index: ${y.modal};
+	border-radius: 10px;
+	padding: 30px 0 15px;
+`, pe = n.div`
+	text-align: center;
+	white-space: pre-wrap;
+	padding: 0 15px;
+`, xe = n(R)`
+	margin-top: 10px;
+
+	text-align: center;
+	white-space: pre-wrap;
+	color: ${i.gray400};
+	font-weight: 500;
+`, ue = n.div`
+	padding-left: ${(o) => o.contentPadding ? "20px" : "0"};
+	padding-right: ${(o) => o.contentPadding ? "20px" : "0"};
+	padding-bottom: 30px;
+
+	> * {
+		margin-top: 20px;
+	}
+`, me = n.div`
+	${L.body1};
+
+	color: ${i.gray400};
+	background: ${i.gray25};
+	border-radius: 10px;
+	padding: 12px;
+	text-align: center;
+	white-space: pre-wrap;
+`, ge = n.div`
+	display: flex;
+	justify-content: center;
+	padding: 0 11px;
+`, _o = n.div`
+	box-sizing: border-box;
+	padding: 0 15px;
+`, he = (o) => /* @__PURE__ */ e.jsx(_o, { children: /* @__PURE__ */ e.jsx(H, { ...o }) }), be = (o) => /* @__PURE__ */ e.jsx(_o, { children: /* @__PURE__ */ e.jsx(Io, { ...o }) }), fe = ({ title: o, subTitle: t }) => /* @__PURE__ */ e.jsxs(pe, { children: [
+  /* @__PURE__ */ e.jsx(Wo, { children: o }),
+  t && /* @__PURE__ */ e.jsx(xe, { children: t })
+] }), $e = ({ children: o }) => /* @__PURE__ */ e.jsx(me, { children: o }), Ce = ({
+  onClick: o,
+  disabled: t,
+  text: r
+}) => /* @__PURE__ */ e.jsx(ge, { children: /* @__PURE__ */ e.jsx(Ft, { size: "m", colorType: "gray", onClick: o, disabled: t, children: r }) }), ye = ({ children: o, hasContentPadding: t = !0 }) => /* @__PURE__ */ e.jsx(ue, { contentPadding: t, children: o }), je = E.memo(({ children: o, ...t }) => /* @__PURE__ */ e.jsx(de, { ...t, children: /* @__PURE__ */ e.jsx(ce, { children: o }) })), Qn = Object.assign(je, {
+  SingleButton: he,
+  DoubleButton: be,
+  Title: fe,
+  Body: ye,
+  Comment: $e,
+  UnderLineMiniButton: Ce
+}), zo = "-55px", no = "50px", io = "25px", we = jo`
+	0% {
+		bottom: ${zo};
+	}
+	100% {
+		${f(a`
+			bottom: ${io};
+		`)};
+		${g(a`
+			bottom: ${no};
+		`)};
+	}
+`, ve = jo`
+	0% {
+		${f(a`
+			bottom: ${io};
+		`)};
+		${g(a`
+			bottom: ${no};
+		`)};
+	}
+	100% {
+		bottom: ${zo};
+	}
+`, Be = (o) => a`
+	visibility: ${o ? "visible" : "hidden"};
+	z-index: ${y.basicLayer + 11};
+	animation: ${o ? we : ve} 0.4s ease-out;
+	transition: all 0.4s ease-out;
+`, Xn = 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 }) => Be(o)};
+`, Yn = n.div`
+	${L.title3};
+	color: ${i.white};
+	width: 100%;
+`;
+export {
+  Gn as $,
+  ee as A,
+  kn as B,
+  mn as C,
+  Io as D,
+  Nn as E,
+  ae as F,
+  Dn as G,
+  Mt as H,
+  gn as I,
+  Hn as J,
+  _n as K,
+  oe as L,
+  Qn as M,
+  Vt as N,
+  Pn as O,
+  Wn as P,
+  zn as Q,
+  Ln as R,
+  H as S,
+  On as T,
+  Ft as U,
+  Rn as V,
+  Yt as W,
+  En as X,
+  Fn as Y,
+  Un as Z,
+  Vn as _,
+  Lt as a,
+  qn as a0,
+  Zn as a1,
+  Jn as a2,
+  Kn as a3,
+  dn as a4,
+  cn as a5,
+  pn as a6,
+  xn as a7,
+  un as a8,
+  Cn as a9,
+  ie as aA,
+  ce as aB,
+  pe as aC,
+  xe as aD,
+  ue as aE,
+  me as aF,
+  ge as aG,
+  _o as aH,
+  bn as aa,
+  w as ab,
+  fn as ac,
+  hn as ad,
+  yn as ae,
+  Mo as af,
+  $n as ag,
+  jn as ah,
+  wn as ai,
+  vn as aj,
+  Bn as ak,
+  Xn as al,
+  Yn as am,
+  Lo as an,
+  Oo as ao,
+  Et as ap,
+  yo as aq,
+  Rt as ar,
+  F as as,
+  I as at,
+  No as au,
+  Ut as av,
+  Do as aw,
+  Zt as ax,
+  Jt as ay,
+  Po as az,
+  ro as b,
+  U as c,
+  eo as d,
+  oo as e,
+  to as f,
+  Tn as g,
+  Gt as h,
+  Mn as i,
+  de as j,
+  Wo as k,
+  Nt as l,
+  R as m,
+  S as n,
+  St as o,
+  C as p,
+  It as q,
+  Sn as r,
+  In as s,
+  K as t,
+  _t as u,
+  Co as v,
+  re as w,
+  ne as x,
+  At as y,
+  te as z
+};