@pfct/purple 1.5.0-npm-next.1 → 1.5.0-npm-next.2

package/dist/chunks/index.styled.BYf5H-kQ.js

@@ -0,0 +1,878 @@
+import { css as n, keyframes as D } from "@emotion/react";
+import r from "@emotion/styled";
+import { zIndex as y } from "../constants/style.constants.es.js";
+import { basicColors as i, semanticColors as J, generateHexWithAlphaInLightMode as N } from "../core/Colors/index.es.js";
+import { title2 as K, title4 as Q, typographyMap as X } from "../core/TextStyles/index.es.js";
+import { Smaller as m, Larger as c } from "../utils/media.util.es.js";
+import "../utils/GenerateColorStyle/mini-button.es.js";
+import Y from "../utils/GenerateColorStyle/datepicker.es.js";
+import { j as t } from "./jsx-runtime.Drh4NO5G.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 k, { useState as _, useEffect as B, useCallback as ee, useRef as oe } from "react";
+import "../components/Loading/Skeleton/index.es.js";
+import { SpinnerWrapper as te } 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/Cancel_circle.es.js";
+import "../icons/src/icons/Calendar.es.js";
+import "../icons/src/icons/Check.es.js";
+import "../icons/src/icons/Chevron_down.es.js";
+import "../icons/src/icons/Chevron_up.es.js";
+import "../icons/src/icons/Chevron_left.es.js";
+import "../icons/src/icons/Double_Chevron_right.es.js";
+import "../icons/src/icons/Cart_fill.es.js";
+import "../icons/src/icons/Double_Chevron_left.es.js";
+import "../icons/src/icons/Eye_slash_fill.es.js";
+import "../icons/src/icons/Chevron_right.es.js";
+import "../icons/src/icons/Filter.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/Person_fill.es.js";
+import "../icons/src/icons/Menu.es.js";
+import "../icons/src/icons/Setting_fill.es.js";
+import "../icons/src/icons/Information.es.js";
+import "../icons/src/icons/Eye_fill.es.js";
+import "../icons/src/icons/More.es.js";
+import "../icons/src/icons/Store.es.js";
+import "../icons/src/icons/Share.es.js";
+import "../icons/src/icons/Search.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 L } from "../hooks/useOverlayPreventScroll.es.js";
+import { S as re } from "./index.Dj0l8V9d.js";
+import { c as ie } from "./index.LN3KW-I4.js";
+import { c as z } from "./utils.B9KdtH6G.js";
+import "../components/DatePicker/RangeDatePickerModal/useRangeDatePickerModal.es.js";
+import "../components/Divider/index.styled.es.js";
+import "./index.styled.DmJ27_dc.js";
+import "../components/Input/BaseInput/index.es.js";
+import "../components/Input/PostfixInput/index.es.js";
+import "../components/Input/ResidentNumberInput/index.styled.es.js";
+import "../components/Navigation/index.styled.es.js";
+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 H, Title3 as P } from "../core/Typography/index.es.js";
+import { ButtonMargin as E, TitleWrapper as ne, className as ae } from "../components/BottomSheet/TitleBottomSheet/index.styled.es.js";
+import { scrollStyle as se } from "../style/common.es.js";
+import { ModalContent as le } from "../components/Modal/BaseModal/index.styled.es.js";
+import { Overlay as pe } 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 { Wrapper as de, LineButtonWrapper as ce, Comment as ge, Body as be, Header as me, Footer as A } from "../components/Modal/index.styled.es.js";
+import { UnderLineMiniButton as ue } from "../components/MiniButton/UnderLineMiniButton/index.es.js";
+import M from "../utils/GenerateColorStyle/tag.es.js";
+import xe from "../hooks/useResize.es.js";
+import { ContentWrapper as he, Content as ye, HeaderWrapper as fe, ChildrenWrapper as $e, FooterWrapper as R } from "../components/BottomSheet/BaseBottomSheet/index.styled.es.js";
+import { Navigation as ve } from "../components/Navigation/index.es.js";
+import { NavigationWrapper as Ce } from "../components/BottomSheet/NavBottomSheet/index.styled.es.js";
+import we from "../utils/GenerateColorStyle/progress-bar.es.js";
+const ke = (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;
+  return {
+    default: {
+      on: {
+        containerColor: o,
+        borderColor: a,
+        textColor: s,
+        iconColor: l
+      },
+      off: {
+        containerColor: i.white,
+        borderColor: i.gray50,
+        textColor: J.chipDefaultText,
+        iconColor: i.gray300
+      }
+    },
+    disabled: {
+      on: {
+        containerColor: d,
+        borderColor: g,
+        textColor: b,
+        iconColor: p
+      },
+      off: {
+        containerColor: i.white,
+        borderColor: i.gray25,
+        textColor: i.gray100,
+        iconColor: i.gray100
+      }
+    }
+  };
+}, Ut = r.div`
+	${m(n`
+		display: none;
+	`)}
+`, Vt = r.div`
+	${c(n`
+		display: none;
+	`)}
+`, Be = i.red400, Te = "16px", U = n`
+	background-color: ${Be};
+`, Ft = r.div`
+	${U};
+
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+`, Gt = r.div`
+	${U};
+
+	height: ${Te};
+	padding: 0 5px;
+	border-radius: 8px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`, Zt = r.div`
+	line-height: initial;
+
+	font-size: 11px;
+	font-weight: 500;
+	color: ${i.white};
+	letter-spacing: -0.2px;
+`, qt = r.div`
+	position: absolute;
+	width: 100%;
+	top: 0;
+	height: 3px;
+	background-color: ${i.gray50};
+`, Jt = r.div`
+	width: ${({ progress: e }) => e}%;
+	background-color: ${({ colorType: e }) => we(e).upperColor};
+	height: 100%;
+	transition: width 3s ease-in-out;
+`, je = ({ colorType: e }) => /* @__PURE__ */ t.jsx(te, { color: e === "white" ? i.white : i.gray200 }), We = ie(
+  "border-none rounded-[10px] inline-flex items-center justify-center whitespace-nowrap p-3.75 typo-h6 h-[50px] w-full",
+  {
+    variants: {
+      colorType: {
+        pink: "",
+        red: "",
+        orange: "",
+        yellow: "",
+        lime: "",
+        green: "",
+        mint: "",
+        skyblue: "",
+        blue: "",
+        indigo: "",
+        purple: "",
+        gray: ""
+      },
+      purpose: {
+        main: "",
+        sub: ""
+      }
+    },
+    compoundVariants: [
+      {
+        purpose: "main",
+        colorType: "pink",
+        class: "text-white bg-pink-400 hover:bg-pink-500 active:bg-pink-600 disabled:bg-pink-100"
+      },
+      {
+        purpose: "sub",
+        colorType: "pink",
+        class: "text-pink-400 disabled:text-pink-100 bg-pink-50 hover:bg-pink-100 active:bg-pink-200 disabled:bg-pink-50"
+      },
+      {
+        purpose: "main",
+        colorType: "red",
+        class: "text-white bg-red-400 hover:bg-red-500 active:bg-red-600 disabled:bg-red-100"
+      },
+      {
+        purpose: "sub",
+        colorType: "red",
+        class: "text-red-400 disabled:text-red-100 bg-red-50 hover:bg-red-100 active:bg-red-200 disabled:bg-red-50"
+      },
+      {
+        purpose: "main",
+        colorType: "orange",
+        class: "text-white bg-orange-400 hover:bg-orange-500 active:bg-orange-600 disabled:bg-orange-100"
+      },
+      {
+        purpose: "sub",
+        colorType: "orange",
+        class: "text-orange-400 disabled:text-orange-100 bg-orange-50 hover:bg-orange-100 active:bg-orange-200 disabled:bg-orange-50"
+      },
+      {
+        purpose: "main",
+        colorType: "yellow",
+        class: "text-white bg-yellow-400 hover:bg-yellow-500 active:bg-yellow-600 disabled:bg-yellow-100"
+      },
+      {
+        purpose: "sub",
+        colorType: "yellow",
+        class: "text-yellow-400 disabled:text-yellow-100 bg-yellow-50 hover:bg-yellow-100 active:bg-yellow-200 disabled:bg-yellow-50"
+      },
+      {
+        purpose: "main",
+        colorType: "lime",
+        class: "text-white bg-lime-400 hover:bg-lime-500 active:bg-lime-600 disabled:bg-lime-100"
+      },
+      {
+        purpose: "sub",
+        colorType: "lime",
+        class: "text-lime-400 disabled:text-lime-100 bg-lime-50 hover:bg-lime-100 active:bg-lime-200 disabled:bg-lime-50"
+      },
+      {
+        purpose: "main",
+        colorType: "green",
+        class: "text-white bg-green-400 hover:bg-green-500 active:bg-green-600 disabled:bg-green-100"
+      },
+      {
+        purpose: "sub",
+        colorType: "green",
+        class: "text-green-400 disabled:text-green-100 bg-green-50 hover:bg-green-100 active:bg-green-200 disabled:bg-green-50"
+      },
+      {
+        purpose: "main",
+        colorType: "mint",
+        class: "text-white bg-mint-400 hover:bg-mint-500 active:bg-mint-600 disabled:bg-mint-100"
+      },
+      {
+        purpose: "sub",
+        colorType: "mint",
+        class: "text-mint-400 disabled:text-mint-100 bg-mint-50 hover:bg-mint-100 active:bg-mint-200 disabled:bg-mint-50"
+      },
+      {
+        purpose: "main",
+        colorType: "skyblue",
+        class: "text-white bg-skyblue-400 hover:bg-skyblue-500 active:bg-skyblue-600 disabled:bg-skyblue-100"
+      },
+      {
+        purpose: "sub",
+        colorType: "skyblue",
+        class: "text-skyblue-400 disabled:text-skyblue-100 bg-skyblue-50 hover:bg-skyblue-100 active:bg-skyblue-200 disabled:bg-skyblue-50"
+      },
+      {
+        purpose: "main",
+        colorType: "blue",
+        class: "text-white bg-blue-400 hover:bg-blue-500 active:bg-blue-600 disabled:bg-blue-100"
+      },
+      {
+        purpose: "sub",
+        colorType: "blue",
+        class: "text-blue-400 disabled:text-blue-100 bg-blue-50 hover:bg-blue-100 active:bg-blue-200 disabled:bg-blue-50"
+      },
+      {
+        purpose: "main",
+        colorType: "indigo",
+        class: "text-white bg-indigo-400 hover:bg-indigo-500 active:bg-indigo-600 disabled:bg-indigo-100"
+      },
+      {
+        purpose: "sub",
+        colorType: "indigo",
+        class: "text-indigo-400 disabled:text-indigo-100 bg-indigo-50 hover:bg-indigo-100 active:bg-indigo-200 disabled:bg-indigo-50"
+      },
+      {
+        purpose: "main",
+        colorType: "purple",
+        class: "text-white bg-purple-400 hover:bg-purple-500 active:bg-purple-600 disabled:bg-purple-100"
+      },
+      {
+        purpose: "sub",
+        colorType: "purple",
+        class: "text-purple-400 disabled:text-purple-100 bg-purple-50 hover:bg-purple-100 active:bg-purple-200 disabled:bg-purple-50"
+      },
+      {
+        purpose: "main",
+        colorType: "gray",
+        class: "text-white bg-gray-900 hover:bg-gray-700 active:bg-gray-800 disabled:bg-gray-100"
+      },
+      {
+        purpose: "sub",
+        colorType: "gray",
+        class: "text-gray-700 disabled:text-gray-100 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 disabled:bg-gray-50"
+      }
+    ],
+    defaultVariants: {
+      purpose: "main",
+      colorType: "lime"
+    }
+  }
+);
+function u({
+  className: e,
+  asChild: o = !1,
+  purpose: a,
+  colorType: s,
+  children: l,
+  disabled: d,
+  isLoading: g,
+  ...b
+}) {
+  const p = o ? re : "button";
+  return /* @__PURE__ */ t.jsx(
+    p,
+    {
+      ...b,
+      "data-slot": "button",
+      className: z(We({ colorType: s, purpose: a, className: e })),
+      type: b.type ?? (a === "main" ? "submit" : "button"),
+      disabled: d || g,
+      children: g ? /* @__PURE__ */ t.jsx("div", { className: "h-[25px] w-[25px]", children: /* @__PURE__ */ t.jsx(je, { colorType: "white" }) }) : l
+    }
+  );
+}
+const Se = ({ 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 })
+] }), Kt = r.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: 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};
+
+	&: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};
+	}
+
+	&:focus {
+		outline: none;
+	}
+`, x = {
+  innerWrapper: "datepicker-inner-wrapper",
+  dot: "datepicker-dot",
+  rangeBackgroundWrapper: "datepicker-range-background-wrapper"
+}, h = 100, Qt = r.div`
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+
+	position: absolute;
+	left: 47%;
+	bottom: 5.86px;
+`, C = n`
+	width: ${h}%;
+	height: ${h}%;
+`, f = r.div`
+	${C};
+	position: relative;
+	/* height가 안 정해진 상태에서 height = width 적용되는 방법 */
+	padding-bottom: ${h}%;
+`, Xt = r.div`
+	${C};
+
+	position: absolute;
+	left: 0;
+
+	${({ rangeBackgroundColor: e }) => e && n`
+			background: ${e};
+		`}
+`, Yt = r.div`
+	${C};
+
+	position: absolute;
+	left: 0;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	border-radius: 50%;
+
+	${({ circleBackgroundColor: e }) => e && n`
+			background-color: ${e};
+		`};
+`, er = r(f)``, or = r(f)`
+	cursor: pointer;
+
+	.${x.innerWrapper} {
+		:hover {
+			background-color: ${({ colorType: e }) => Y(e).hoverContainerColor};
+		}
+	}
+
+	.${x.dot} {
+		background-color: ${i.gray200};
+	}
+`, tr = r(f)`
+	cursor: not-allowed;
+
+	.${x.dot} {
+		background-color: ${i.gray100};
+	}
+`, V = r(f)`
+	cursor: pointer;
+
+	.${x.dot} {
+		background-color: ${i.white};
+	}
+`, rr = r(V)`
+	.${x.rangeBackgroundWrapper} {
+		left: ${h / 2}%;
+		width: ${h / 2}%;
+	}
+`, ir = r(V)`
+	.${x.rangeBackgroundWrapper} {
+		width: ${h / 2}%;
+	}
+`, nr = r(f)``, ar = r.div`
+	${C};
+
+	position: absolute;
+	left: 0;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+`, F = k.memo(
+  ({ className: e, visible: o, onClick: a, zIndex: s = y.modal, children: l }) => {
+    const [d, g] = _(!1), b = (p) => {
+      p.target === p.currentTarget && (a == null || a());
+    };
+    return B(() => {
+      let p;
+      return o ? g(!0) : p = setTimeout(() => g(!1), 400), () => {
+        p !== void 0 && clearTimeout(p);
+      };
+    }, [o]), L(o), d ? /* @__PURE__ */ t.jsx(pe, { className: e, visible: o, zIndex: s, onClick: b, children: l }) : null;
+  }
+), T = (e) => /* @__PURE__ */ t.jsx(R, { children: /* @__PURE__ */ t.jsx(u, { ...e }) }), j = (e) => /* @__PURE__ */ t.jsx(R, { children: /* @__PURE__ */ t.jsxs("div", { className: "flex w-full gap-[10px]", children: [
+  /* @__PURE__ */ t.jsx(
+    u,
+    {
+      ...e.left,
+      onClick: e.left.onClick,
+      colorType: e.left.colorType,
+      purpose: "sub",
+      disabled: e.left.disabled,
+      className: e.left.className,
+      children: e.left.children
+    }
+  ),
+  /* @__PURE__ */ t.jsx(
+    u,
+    {
+      onClick: e.right.onClick,
+      colorType: e.right.colorType,
+      purpose: "main",
+      disabled: e.right.disabled,
+      className: e.right.className,
+      type: e.right.type || "submit",
+      children: e.right.children
+    }
+  )
+] }) }), W = ({ children: e, ...o }) => {
+  const a = oe(null);
+  return B(() => {
+    var s;
+    (s = a.current) == null || s.scroll(0, 0);
+  }, []), /* @__PURE__ */ t.jsx($e, { ref: a, ...o, children: e });
+}, w = ({ children: e }) => /* @__PURE__ */ t.jsx(fe, { children: e }), S = ({
+  visible: e,
+  onMaskClick: o,
+  className: a,
+  zIndex: s = y.modal,
+  minHeight: l,
+  children: d
+}) => {
+  const [g, b] = _(0), p = ee(() => {
+    b(window == null ? void 0 : window.innerHeight);
+  }, []);
+  return B(() => {
+    p();
+  }, [p]), xe(p), L(e), e ? /* @__PURE__ */ t.jsx(F, { visible: e, className: a, onClick: o, zIndex: s, children: /* @__PURE__ */ t.jsx(he, { children: /* @__PURE__ */ t.jsx(ye, { visible: e, zIndex: s, minHeight: l, vh: g, children: d }) }) }) : null;
+}, sr = Object.assign(S, {
+  SingleButton: T,
+  DoubleButton: j,
+  Body: W,
+  Header: w
+}), Oe = ({ children: e }) => /* @__PURE__ */ t.jsx(w, { children: /* @__PURE__ */ t.jsx(Ce, { children: e }) }), Ie = (e) => /* @__PURE__ */ t.jsx(Oe, { children: /* @__PURE__ */ t.jsx(ve, { ...e }) }), lr = Object.assign(S, {
+  Header: w,
+  Navigation: Ie,
+  Body: W,
+  SingleButton: T,
+  DoubleButton: j
+}), Me = ({ title: e, subTitle: o, hasContentPadding: a = !0 }) => /* @__PURE__ */ t.jsxs(ne, { contentPadding: a, children: [
+  e && /* @__PURE__ */ t.jsx(H, { children: e }),
+  o && /* @__PURE__ */ t.jsx(P, { className: z("text-gray-400", ae.subTitle), children: o })
+] }), De = (e) => /* @__PURE__ */ t.jsx(E, { children: /* @__PURE__ */ t.jsx(T, { ...e }) }), Ne = (e) => /* @__PURE__ */ t.jsx(E, { children: /* @__PURE__ */ t.jsx(j, { ...e }) }), pr = Object.assign(S, {
+  Header: w,
+  Body: W,
+  Title: Me,
+  SingleButton: De,
+  DoubleButton: Ne
+}), _e = r.div`
+	& > div > .select-box {
+		cursor: pointer;
+	}
+	position: relative;
+`, Le = r.div`
+	position: absolute;
+	z-index: ${y.basicLayer + 1};
+	width: 100%;
+	height: max-content;
+
+	${c(n`
+		top: 70px;
+	`)}
+`, ze = r.div`
+	height: 80px;
+	pointer-events: none;
+`, He = r.div`
+	box-shadow: 0 2px 10px ${N(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;
+`, Pe = r.div`
+	width: 100%;
+	height: 50px;
+	padding: 15px 25px;
+	cursor: pointer;
+	${K({ 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};
+	}
+`, Ee = r.div`
+	position: absolute;
+	z-index: 10;
+	right: 20px;
+	top: ${({ rotateArrow: e }) => e ? "18px" : "20px"};
+	cursor: pointer;
+	transform: ${({ rotateArrow: e }) => e ? "rotate(180deg)" : "rotate(0)"};
+	pointer-events: none;
+`, Ae = r.div`
+	${m(n`
+		display: none;
+	`)}
+`, Re = r.div`
+	${c(n`
+		display: none;
+	`)}
+`, dr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Desktop: Ae,
+  IconWrapper: Ee,
+  Item: Pe,
+  ItemList: He,
+  ItemListWrapper: Le,
+  ListBottomMargin: ze,
+  Mobile: Re,
+  Wrapper: _e
+}, Symbol.toStringTag, { value: "Module" })), Ue = {
+  Text: "chip-item-text"
+}, G = 38, cr = r.span`
+	display: inline-flex;
+	min-width: max-content;
+	height: ${G}px;
+	gap: 2px;
+	padding: 8px 0 8px 12px;
+	padding-right: ${({ hasRightIcon: e }) => e ? "7px" : "12px"};
+	align-items: center;
+
+	border-radius: 22px;
+
+	${({ disabled: e, selected: o, colorType: a }) => {
+  const s = ke(a), l = e ? "disabled" : "default", d = o ? "on" : "off";
+  return n`
+			background-color: ${s[l][d].containerColor};
+			border: 1px solid ${s[l][d].borderColor};
+			.${Ue.Text} {
+				color: ${s[l][d].textColor};
+			}
+			svg > path {
+				fill: ${s[l][d].iconColor};
+			}
+		`;
+}}
+
+	${({ selected: e }) => !e && n`
+			cursor: pointer;
+		`}
+`, gr = r.span`
+	cursor: pointer;
+	display: flex;
+`, Z = {
+  ControlIconContainer: 2
+}, v = G, Ve = 25, Fe = i.white, br = r.div`
+	display: flex;
+	align-items: center;
+	position: relative;
+	overflow: hidden;
+
+	width: 100%;
+`, mr = r.div`
+	${se}
+
+	display: flex;
+	gap: 5px;
+	z-index: ${Z.ControlIconContainer - 1};
+
+	${({ hasIconArea: e }) => e && n`
+			padding-left: ${v + 8}px;
+		`}
+	padding-right: 20px;
+`, ur = r.div`
+	cursor: pointer;
+	position: absolute;
+	left: 0;
+	top: 0;
+
+	z-index: ${Z.ControlIconContainer};
+
+	background-color: ${Fe};
+	width: ${v}px;
+	height: ${v}px;
+`, xr = r.div`
+	width: ${Ve}px;
+	height: 100%;
+
+	/* TODO: 컬러, 범위, 여백 수정 필요 */
+	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.01) 100%);
+
+	position: absolute;
+	left: ${v}px;
+	top: 0;
+`, hr = r.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;
+`, yr = r.div`
+	${({ type: e, colorType: o }) => Q({ color: M({ type: e, colorType: o }).textColor })};
+	background-color: ${({ type: e, colorType: o }) => M({ type: e, colorType: o }).backgroundColor};
+
+	box-sizing: border-box;
+	width: max-content;
+	padding: 3px 8px;
+	border-radius: 30px;
+	align-items: center;
+	justify-content: center;
+	display: ${({ inline: e }) => e ? "inline-flex" : "flex"};
+`, fr = r.div`
+	${m(n`
+		padding: 25px 0;
+	`)}
+
+	${c(n`
+		padding: 80px 80px 25px;
+	`)}
+
+	/** deletePaddingTop = true 이면, 사용처 BasicLayout 에서 padding-top 관리 */
+
+	${({ deletePaddingTop: e }) => e && m(n`
+			padding-top: 0px;
+		`)}
+
+	${({ deletePaddingTop: e }) => e && c(n`
+			padding-top: 0px;
+		`)}
+`, $r = r.div`
+	padding: 0 20px;
+	margin-bottom: 15px;
+	${c(n`
+		padding: 0;
+	`)}
+`, Ge = k.memo(
+  ({ zIndex: e = y.modal, visible: o, onMaskClick: a, children: s, className: l }) => /* @__PURE__ */ t.jsx(F, { className: l, visible: o, onClick: a, zIndex: e, children: /* @__PURE__ */ t.jsx(le, { visible: o, children: s }) })
+), Ze = (e) => /* @__PURE__ */ t.jsx(A, { children: /* @__PURE__ */ t.jsx(u, { ...e }) }), qe = (e) => /* @__PURE__ */ t.jsx(A, { children: /* @__PURE__ */ t.jsx(Se, { ...e }) }), Je = ({ title: e, subTitle: o }) => /* @__PURE__ */ t.jsxs(me, { children: [
+  /* @__PURE__ */ t.jsx(H, { children: e }),
+  o && /* @__PURE__ */ t.jsx(P, { className: "mt-[10px] text-center font-medium whitespace-pre-wrap text-gray-400", children: o })
+] }), Ke = ({ children: e }) => /* @__PURE__ */ t.jsx(ge, { children: e }), Qe = ({
+  onClick: e,
+  disabled: o,
+  text: a
+}) => /* @__PURE__ */ t.jsx(ce, { children: /* @__PURE__ */ t.jsx(ue, { size: "m", colorType: "gray", onClick: e, disabled: o, children: a }) }), Xe = ({ children: e, hasContentPadding: o = !0 }) => /* @__PURE__ */ t.jsx(be, { contentPadding: o, children: e }), Ye = k.memo(({ children: e, ...o }) => /* @__PURE__ */ t.jsx(Ge, { ...o, children: /* @__PURE__ */ t.jsx(de, { children: e }) })), vr = Object.assign(Ye, {
+  SingleButton: Ze,
+  DoubleButton: qe,
+  Title: Je,
+  Body: Xe,
+  Comment: Ke,
+  UnderLineMiniButton: Qe
+}), q = "-55px", O = "50px", I = "25px", eo = D`
+	0% {
+		bottom: ${q};
+	}
+	100% {
+		${m(n`
+			bottom: ${I};
+		`)};
+		${c(n`
+			bottom: ${O};
+		`)};
+	}
+`, oo = D`
+	0% {
+		${m(n`
+			bottom: ${I};
+		`)};
+		${c(n`
+			bottom: ${O};
+		`)};
+	}
+	100% {
+		bottom: ${q};
+	}
+`, to = (e) => n`
+	visibility: ${e ? "visible" : "hidden"};
+	z-index: ${y.basicLayer + 11};
+	animation: ${e ? eo : oo} 0.4s ease-out;
+	transition: all 0.4s ease-out;
+`, Cr = r.div`
+	min-width: 320px;
+	max-width: max-content;
+
+	${c(n`
+		min-width: 440px;
+	`)}
+	height: 55px;
+	box-sizing: border-box;
+	background-color: ${N(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: ${I};
+	`)};
+	${c(n`
+		bottom: ${O};
+	`)};
+	${({ visible: e }) => to(e)};
+`, wr = r.div`
+	${X.title3};
+	color: ${i.white};
+	width: 100%;
+`;
+export {
+  nr as $,
+  Ut as A,
+  sr as B,
+  cr as C,
+  Se as D,
+  Vt as E,
+  Ft as F,
+  Gt as G,
+  Zt as H,
+  Kt as I,
+  or as J,
+  x as K,
+  ze as L,
+  vr as M,
+  lr as N,
+  br as O,
+  qt as P,
+  Yt as Q,
+  Xt as R,
+  je as S,
+  pr as T,
+  Qt as U,
+  tr as V,
+  _e as W,
+  V as X,
+  er as Y,
+  rr as Z,
+  ir as _,
+  S as a,
+  ar as a0,
+  Cr as a1,
+  wr as a2,
+  G as a3,
+  C as a4,
+  f as a5,
+  F as a6,
+  Re as a7,
+  w as b,
+  W as c,
+  T as d,
+  j as e,
+  Oe as f,
+  Ge as g,
+  u as h,
+  dr as i,
+  We as j,
+  ke as k,
+  Jt as l,
+  Ee as m,
+  Ae as n,
+  Le as o,
+  He as p,
+  Pe as q,
+  Ue as r,
+  gr as s,
+  ur as t,
+  xr as u,
+  hr as v,
+  mr as w,
+  yr as x,
+  fr as y,
+  $r as z
+};