@pfct/purple 1.5.0 → 1.7.0

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

@@ -1,892 +0,0 @@
-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 Z, generateHexWithAlphaInLightMode as N } from "../core/Colors/index.es.js";
-import { title2 as q, title4 as J, typographyMap as K } 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 Q 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 T, useCallback as X, useRef as Y } from "react";
-import "../components/Loading/Skeleton/index.es.js";
-import { SpinnerWrapper as ee } from "../components/Loading/Spinner/index.styled.es.js";
-import "../components/Card/index.styled.es.js";
-import "../components/Comment/index.es.js";
-import "../icons/src/icons/Alarm_fill.es.js";
-import "../icons/src/icons/Cancel.es.js";
-import "../icons/src/icons/Cart_fill.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_right.es.js";
-import "../icons/src/icons/Chevron_left.es.js";
-import "../icons/src/icons/Chevron_up.es.js";
-import "../icons/src/icons/Double_Chevron_left.es.js";
-import "../icons/src/icons/Double_Chevron_right.es.js";
-import "../icons/src/icons/Eye_fill.es.js";
-import "../icons/src/icons/Eye_slash_fill.es.js";
-import "../icons/src/icons/Filter.es.js";
-import "../icons/src/icons/Information.es.js";
-import "../icons/src/icons/Menu.es.js";
-import "../icons/src/icons/More.es.js";
-import "../icons/src/icons/Person_fill.es.js";
-import "../icons/src/icons/Plus.es.js";
-import "../icons/src/icons/Question_circle.es.js";
-import "../icons/src/icons/Re.es.js";
-import "../icons/src/icons/Search.es.js";
-import "../icons/src/icons/Setting_fill.es.js";
-import "../icons/src/icons/Share.es.js";
-import "../icons/src/icons/Store.es.js";
-import $ from "../utils/GenerateColorStyle/control/radio-button.es.js";
-import "../components/Control/CheckMark/index.styled.es.js";
-import "../components/Control/Switch/index.styled.es.js";
-import "../components/DatePicker/BaseDatePicker/index.styled.es.js";
-import "../components/DatePicker/BaseDatePicker/YearMonthController/index.styed.es.js";
-import "../library/IconWithImage/index.styled.es.js";
-import "../library/List/BottomSheetItemList/index.styled.es.js";
-import "lottie-web";
-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 oe } from "./index.BB3W3jfD.js";
-import { c as te } from "./index.Cc-miKAT.js";
-import { cn as re } from "../lib/utils.es.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, Headline3 as ie, Title3 as ne } from "../core/Typography/index.es.js";
-import { ButtonMargin as z, TitleWrapper as ae, SubTitle as se, className as le } from "../components/BottomSheet/TitleBottomSheet/index.styled.es.js";
-import { scrollStyle as pe } from "../style/common.es.js";
-import { ModalContent as de } from "../components/Modal/BaseModal/index.styled.es.js";
-import { Overlay as ce } from "../components/OverlayRoot/index.styled.es.js";
-import "../components/ToastMessage/Toast/index.styled.es.js";
-import "../components/ui/bottomSheet.es.js";
-import { Wrapper as be, LineButtonWrapper as ge, Comment as me, Body as ue, Header as xe, SubTitle as he, Footer as P } from "../components/Modal/index.styled.es.js";
-import { UnderLineMiniButton as ye } from "../components/MiniButton/UnderLineMiniButton/index.es.js";
-import M from "../utils/GenerateColorStyle/tag.es.js";
-import fe from "../hooks/useResize.es.js";
-import { ContentWrapper as $e, Content as ve, HeaderWrapper as Ce, ChildrenWrapper as we, FooterWrapper as E } from "../components/BottomSheet/BaseBottomSheet/index.styled.es.js";
-import { Navigation as ke } from "../components/Navigation/index.es.js";
-import { NavigationWrapper as Te } from "../components/BottomSheet/NavBottomSheet/index.styled.es.js";
-import Be from "../utils/GenerateColorStyle/progress-bar.es.js";
-const je = (e) => {
-  const o = i[`${e}400`], a = "transparent", s = i.white, l = i.white, d = i[`${e}100`], b = "transparent", g = i.white, p = i.white;
-  return {
-    default: {
-      on: {
-        containerColor: o,
-        borderColor: a,
-        textColor: s,
-        iconColor: l
-      },
-      off: {
-        containerColor: i.white,
-        borderColor: i.gray50,
-        textColor: Z.chipDefaultText,
-        iconColor: i.gray300
-      }
-    },
-    disabled: {
-      on: {
-        containerColor: d,
-        borderColor: b,
-        textColor: g,
-        iconColor: p
-      },
-      off: {
-        containerColor: i.white,
-        borderColor: i.gray25,
-        textColor: i.gray100,
-        iconColor: i.gray100
-      }
-    }
-  };
-}, Vt = r.div`
-	${m(n`
-		display: none;
-	`)}
-`, Ft = r.div`
-	${c(n`
-		display: none;
-	`)}
-`, Se = i.red400, We = "16px", A = n`
-	background-color: ${Se};
-`, Gt = r.div`
-	${A};
-
-	width: 5px;
-	height: 5px;
-	border-radius: 50%;
-`, Zt = r.div`
-	${A};
-
-	height: ${We};
-	padding: 0 5px;
-	border-radius: 8px;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-`, qt = r.div`
-	line-height: initial;
-
-	font-size: 11px;
-	font-weight: 500;
-	color: ${i.white};
-	letter-spacing: -0.2px;
-`, Jt = r.div`
-	position: absolute;
-	width: 100%;
-	top: 0;
-	height: 3px;
-	background-color: ${i.gray50};
-`, Kt = r.div`
-	width: ${({ progress: e }) => e}%;
-	background-color: ${({ colorType: e }) => Be(e).upperColor};
-	height: 100%;
-	transition: width 3s ease-in-out;
-`, Oe = ({ colorType: e }) => /* @__PURE__ */ t.jsx(ee, { color: e === "white" ? i.white : i.gray200 }), Ie = te(
-  "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: b,
-  ...g
-}) {
-  const p = o ? oe : "button";
-  return /* @__PURE__ */ t.jsx(
-    p,
-    {
-      ...g,
-      "data-slot": "button",
-      className: re(Ie({ colorType: s, purpose: a, className: e })),
-      type: g.type ?? (a === "main" ? "submit" : "button"),
-      disabled: d || b,
-      children: b ? /* @__PURE__ */ t.jsx("div", { className: "h-[25px] w-[25px]", children: /* @__PURE__ */ t.jsx(Oe, { colorType: "white" }) }) : l
-    }
-  );
-}
-const Me = ({ 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 })
-] }), Qt = 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, Xt = 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}%;
-`, Yt = r.div`
-	${C};
-
-	position: absolute;
-	left: 0;
-
-	${({ rangeBackgroundColor: e }) => e && n`
-			background: ${e};
-		`}
-`, er = 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};
-		`};
-`, or = r(f)``, tr = r(f)`
-	cursor: pointer;
-
-	.${x.innerWrapper} {
-		:hover {
-			background-color: ${({ colorType: e }) => Q(e).hoverContainerColor};
-		}
-	}
-
-	.${x.dot} {
-		background-color: ${i.gray200};
-	}
-`, rr = r(f)`
-	cursor: not-allowed;
-
-	.${x.dot} {
-		background-color: ${i.gray100};
-	}
-`, R = r(f)`
-	cursor: pointer;
-
-	.${x.dot} {
-		background-color: ${i.white};
-	}
-`, ir = r(R)`
-	.${x.rangeBackgroundWrapper} {
-		left: ${h / 2}%;
-		width: ${h / 2}%;
-	}
-`, nr = r(R)`
-	.${x.rangeBackgroundWrapper} {
-		width: ${h / 2}%;
-	}
-`, ar = r(f)``, sr = r.div`
-	${C};
-
-	position: absolute;
-	left: 0;
-
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-`, U = k.memo(
-  ({ className: e, visible: o, onClick: a, zIndex: s = y.modal, children: l }) => {
-    const [d, b] = _(!1), g = (p) => {
-      p.target === p.currentTarget && (a == null || a());
-    };
-    return T(() => {
-      let p;
-      return o ? b(!0) : p = setTimeout(() => b(!1), 400), () => {
-        p !== void 0 && clearTimeout(p);
-      };
-    }, [o]), L(o), d ? /* @__PURE__ */ t.jsx(ce, { className: e, visible: o, zIndex: s, onClick: g, children: l }) : null;
-  }
-), B = (e) => /* @__PURE__ */ t.jsx(E, { children: /* @__PURE__ */ t.jsx(u, { ...e }) }), j = (e) => /* @__PURE__ */ t.jsx(E, { 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
-    }
-  )
-] }) }), S = ({ children: e, ...o }) => {
-  const a = Y(null);
-  return T(() => {
-    var s;
-    (s = a.current) == null || s.scroll(0, 0);
-  }, []), /* @__PURE__ */ t.jsx(we, { ref: a, ...o, children: e });
-}, w = ({ children: e }) => /* @__PURE__ */ t.jsx(Ce, { children: e }), W = ({
-  visible: e,
-  onMaskClick: o,
-  className: a,
-  zIndex: s = y.modal,
-  minHeight: l,
-  children: d
-}) => {
-  const [b, g] = _(0), p = X(() => {
-    g(window == null ? void 0 : window.innerHeight);
-  }, []);
-  return T(() => {
-    p();
-  }, [p]), fe(p), L(e), e ? /* @__PURE__ */ t.jsx(U, { visible: e, className: a, onClick: o, zIndex: s, children: /* @__PURE__ */ t.jsx($e, { children: /* @__PURE__ */ t.jsx(ve, { visible: e, zIndex: s, minHeight: l, vh: b, children: d }) }) }) : null;
-}, lr = Object.assign(W, {
-  SingleButton: B,
-  DoubleButton: j,
-  Body: S,
-  Header: w
-}), De = ({ children: e }) => /* @__PURE__ */ t.jsx(w, { children: /* @__PURE__ */ t.jsx(Te, { children: e }) }), Ne = (e) => /* @__PURE__ */ t.jsx(De, { children: /* @__PURE__ */ t.jsx(ke, { ...e }) }), pr = Object.assign(W, {
-  Header: w,
-  Navigation: Ne,
-  Body: S,
-  SingleButton: B,
-  DoubleButton: j
-}), _e = ({ title: e, subTitle: o, hasContentPadding: a = !0 }) => /* @__PURE__ */ t.jsxs(ae, { contentPadding: a, children: [
-  e && /* @__PURE__ */ t.jsx(H, { children: e }),
-  o && /* @__PURE__ */ t.jsx(se, { className: le.subTitle, children: o })
-] }), Le = (e) => /* @__PURE__ */ t.jsx(z, { children: /* @__PURE__ */ t.jsx(B, { ...e }) }), He = (e) => /* @__PURE__ */ t.jsx(z, { children: /* @__PURE__ */ t.jsx(j, { ...e }) }), dr = Object.assign(W, {
-  Header: w,
-  Body: S,
-  Title: _e,
-  SingleButton: Le,
-  DoubleButton: He
-}), ze = r.div`
-	& > div > .select-box {
-		cursor: pointer;
-	}
-	position: relative;
-`, Pe = r.div`
-	position: absolute;
-	z-index: ${y.basicLayer + 1};
-	width: 100%;
-	height: max-content;
-
-	${c(n`
-		top: 70px;
-	`)}
-`, Ee = r.div`
-	height: 80px;
-	pointer-events: none;
-`, Ae = 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;
-`, Re = r.div`
-	width: 100%;
-	height: 50px;
-	padding: 15px 25px;
-	cursor: pointer;
-	${q({ 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};
-	}
-`, Ue = 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;
-`, Ve = r.div`
-	${m(n`
-		display: none;
-	`)}
-`, Fe = r.div`
-	${c(n`
-		display: none;
-	`)}
-`, cr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  Desktop: Ve,
-  IconWrapper: Ue,
-  Item: Re,
-  ItemList: Ae,
-  ItemListWrapper: Pe,
-  ListBottomMargin: Ee,
-  Mobile: Fe,
-  Wrapper: ze
-}, Symbol.toStringTag, { value: "Module" })), Ge = {
-  Text: "chip-item-text"
-}, V = 38, br = r.span`
-	display: inline-flex;
-	min-width: max-content;
-	height: ${V}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 = je(a), l = e ? "disabled" : "default", d = o ? "on" : "off";
-  return n`
-			background-color: ${s[l][d].containerColor};
-			border: 1px solid ${s[l][d].borderColor};
-			.${Ge.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;
-`, F = {
-  ControlIconContainer: 2
-}, v = V, Ze = 25, qe = i.white, mr = r.div`
-	display: flex;
-	align-items: center;
-	position: relative;
-	overflow: hidden;
-
-	width: 100%;
-`, ur = r.div`
-	${pe}
-
-	display: flex;
-	gap: 5px;
-	z-index: ${F.ControlIconContainer - 1};
-
-	${({ hasIconArea: e }) => e && n`
-			padding-left: ${v + 8}px;
-		`}
-	padding-right: 20px;
-`, xr = r.div`
-	cursor: pointer;
-	position: absolute;
-	left: 0;
-	top: 0;
-
-	z-index: ${F.ControlIconContainer};
-
-	background-color: ${qe};
-	width: ${v}px;
-	height: ${v}px;
-`, hr = r.div`
-	width: ${Ze}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;
-`, yr = 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;
-`, fr = r.div`
-	${({ type: e, colorType: o }) => J({ 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"};
-`, $r = 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;
-		`)}
-`, vr = r.div`
-	padding: 0 20px;
-	margin-bottom: 15px;
-	${c(n`
-		padding: 0;
-	`)}
-`, Cr = r(ie)`
-	padding: 0 25px;
-	white-space: pre-wrap;
-	${c(n`
-		padding: 0;
-	`)}
-`, wr = r(ne)`
-	margin-top: 10px;
-	padding: 0 25px;
-	color: ${({ color: e }) => e};
-	white-space: pre-wrap;
-	${c(n`
-		padding: 0;
-	`)}
-`, Je = k.memo(
-  ({ zIndex: e = y.modal, visible: o, onMaskClick: a, children: s, className: l }) => /* @__PURE__ */ t.jsx(U, { className: l, visible: o, onClick: a, zIndex: e, children: /* @__PURE__ */ t.jsx(de, { visible: o, children: s }) })
-), Ke = (e) => /* @__PURE__ */ t.jsx(P, { children: /* @__PURE__ */ t.jsx(u, { ...e }) }), Qe = (e) => /* @__PURE__ */ t.jsx(P, { children: /* @__PURE__ */ t.jsx(Me, { ...e }) }), Xe = ({ title: e, subTitle: o }) => /* @__PURE__ */ t.jsxs(xe, { children: [
-  /* @__PURE__ */ t.jsx(H, { children: e }),
-  o && /* @__PURE__ */ t.jsx(he, { children: o })
-] }), Ye = ({ children: e }) => /* @__PURE__ */ t.jsx(me, { children: e }), eo = ({
-  onClick: e,
-  disabled: o,
-  text: a
-}) => /* @__PURE__ */ t.jsx(ge, { children: /* @__PURE__ */ t.jsx(ye, { size: "m", colorType: "gray", onClick: e, disabled: o, children: a }) }), oo = ({ children: e, hasContentPadding: o = !0 }) => /* @__PURE__ */ t.jsx(ue, { contentPadding: o, children: e }), to = k.memo(({ children: e, ...o }) => /* @__PURE__ */ t.jsx(Je, { ...o, children: /* @__PURE__ */ t.jsx(be, { children: e }) })), kr = Object.assign(to, {
-  SingleButton: Ke,
-  DoubleButton: Qe,
-  Title: Xe,
-  Body: oo,
-  Comment: Ye,
-  UnderLineMiniButton: eo
-}), G = "-55px", O = "50px", I = "25px", ro = D`
-	0% {
-		bottom: ${G};
-	}
-	100% {
-		${m(n`
-			bottom: ${I};
-		`)};
-		${c(n`
-			bottom: ${O};
-		`)};
-	}
-`, io = D`
-	0% {
-		${m(n`
-			bottom: ${I};
-		`)};
-		${c(n`
-			bottom: ${O};
-		`)};
-	}
-	100% {
-		bottom: ${G};
-	}
-`, no = (e) => n`
-	visibility: ${e ? "visible" : "hidden"};
-	z-index: ${y.basicLayer + 11};
-	animation: ${e ? ro : io} 0.4s ease-out;
-	transition: all 0.4s ease-out;
-`, Tr = 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 }) => no(e)};
-`, Br = r.div`
-	${K.title3};
-	color: ${i.white};
-	width: 100%;
-`;
-export {
-  ir as $,
-  Cr as A,
-  lr as B,
-  br as C,
-  Me as D,
-  wr as E,
-  Vt as F,
-  Ft as G,
-  Gt as H,
-  Qt as I,
-  Zt as J,
-  qt as K,
-  Ee as L,
-  kr as M,
-  pr as N,
-  mr as O,
-  Jt as P,
-  tr as Q,
-  Yt as R,
-  Oe as S,
-  dr as T,
-  x as U,
-  er as V,
-  ze as W,
-  Xt as X,
-  rr as Y,
-  R as Z,
-  or as _,
-  W as a,
-  nr as a0,
-  ar as a1,
-  sr as a2,
-  Tr as a3,
-  Br as a4,
-  V as a5,
-  C as a6,
-  f as a7,
-  U as a8,
-  Fe as a9,
-  w as b,
-  S as c,
-  B as d,
-  j as e,
-  De as f,
-  Je as g,
-  u as h,
-  cr as i,
-  Ie as j,
-  je as k,
-  Kt as l,
-  Ue as m,
-  Ve as n,
-  Pe as o,
-  Ae as p,
-  Re as q,
-  Ge as r,
-  gr as s,
-  xr as t,
-  hr as u,
-  yr as v,
-  ur as w,
-  fr as x,
-  $r as y,
-  vr as z
-};