@pfct/purple 1.4.0-rc.7 → 1.4.0-rc.8

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

@@ -0,0 +1,633 @@
+"use strict";const i=require("@emotion/react"),lt=require("@emotion/styled"),B=require("../constants/style.constants.cjs.js"),s=require("../core/Colors/index.cjs.js"),c=require("../core/TextStyles/index.cjs.js"),d=require("../utils/media.util.cjs.js"),M=require("../utils/GenerateColorStyle/mini-button.cjs.js"),ct=require("../utils/GenerateColorStyle/datepicker.cjs.js"),o=require("./jsx-runtime.713F0z8w.js");require("../components/Badge/IconBadge/index.styled.cjs.js");require("../components/Badge/TextBadge/index.styled.cjs.js");require("../components/Loading/Spinner/index.styled.cjs.js");require("../components/Card/index.styled.cjs.js");const g=require("react");require("../components/Comment/index.cjs.js");const L=require("../utils/GenerateColorStyle/control/radio-button.cjs.js");require("../components/Control/CheckBox/index.styled.cjs.js");require("../components/Control/CheckMark/index.styled.cjs.js");require("../components/Control/Switch/index.styled.cjs.js");require("../components/DatePicker/BaseDatePicker/index.styled.cjs.js");require("../components/DatePicker/BaseDatePicker/YearMonthController/index.styed.cjs.js");require("../Icon/generated/AlarmFill.cjs.js");require("../Icon/generated/Calendar.cjs.js");const dt=require("../Icon/generated/Cancel.cjs.js");require("../Icon/generated/CancelCircle.cjs.js");require("../Icon/generated/CartFill.cjs.js");require("../Icon/generated/Check.cjs.js");require("../Icon/generated/ChevronDown.cjs.js");const pt=require("../Icon/generated/ChevronLeft.cjs.js");require("../Icon/generated/ChevronRight.cjs.js");require("../Icon/generated/ChevronUp.cjs.js");require("../Icon/generated/DoubleChevronLeft.cjs.js");require("../Icon/generated/DoubleChevronRight.cjs.js");require("../Icon/generated/EyeFill.cjs.js");require("../Icon/generated/EyeSlashFill.cjs.js");require("../Icon/generated/Filter.cjs.js");require("../Icon/generated/Information.cjs.js");require("../Icon/generated/Menu.cjs.js");require("../Icon/generated/More.cjs.js");require("../Icon/generated/PersonFill.cjs.js");require("../Icon/generated/Plus.cjs.js");require("../Icon/generated/QuestionCircle.cjs.js");require("../Icon/generated/Re.cjs.js");require("../Icon/generated/Search.cjs.js");require("../Icon/generated/SettingFill.cjs.js");require("../Icon/generated/Share.cjs.js");require("../Icon/generated/Store.cjs.js");require("../library/IconWithImage/index.styled.cjs.js");require("../library/List/BottomSheetItemList/index.styled.cjs.js");require("lottie-web");require("../library/Lottie/index.styled.cjs.js");require("../library/Spacing/index.styled.cjs.js");require("../components/DatePicker/BaseDatePicker/Month/index.styled.cjs.js");require("../components/DatePicker/BaseDatePicker/Week/index.styled.cjs.js");require("../types/date.cjs.js");require("../components/DatePicker/BaseDatePicker/hooks/index.util.cjs.js");require("../components/DatePicker/SingleDatePickerModal/index.styled.cjs.js");require("../components/DatePicker/SingleDatePickerModal/useSingleDatePickerModal.cjs.js");require("../components/DatePicker/RangeDatePickerModal/index.styled.cjs.js");const ve=require("../hooks/useOverlayPreventScroll.cjs.js"),H=require("../components/ui/button.cjs.js");require("../components/DatePicker/RangeDatePickerModal/useRangeDatePickerModal.cjs.js");require("../components/Divider/index.styled.cjs.js");require("./index.styled.DkE3TbtV.js");require("../components/Input/BaseInput/index.cjs.js");const ut=require("./index.styled.bRkhLIZX.js"),_=require("../components/Input/PostfixInput/index.styled.cjs.js"),xt=require("../components/Input/common/InputFrame/index.cjs.js");require("../components/Input/ResidentNumberInput/index.styled.cjs.js");require("../components/Loading/Skeleton/index.cjs.js");const N=require("../components/Navigation/index.styled.cjs.js"),X=require("../components/Navigation/BaseNavigation/index.styled.cjs.js"),D=require("../components/Navigation/constant.cjs.js");require("../components/Segment/BaseSegment/index.styled.cjs.js");require("../components/Segment/ExtendSegment/index.styled.cjs.js");const j=require("../components/BottomSheet/BaseBottomSheet/index.styled.cjs.js"),te=require("../style/common.cjs.js"),gt=require("../components/Modal/BaseModal/index.styled.cjs.js"),mt=require("../components/OverlayRoot/index.styled.cjs.js");require("../components/ToastMessage/Toast/index.styled.cjs.js");require("../components/Tooltip/TooltipBase/index.styled.cjs.js");require("./bottomSheet.BLbiF_lD.js");const ht=require("../components/Button/DoubleButton/index.cjs.js"),Be=require("../utils/GenerateColorStyle/tag.cjs.js"),bt=require("../utils/GenerateColorStyle/progress-bar.cjs.js"),ft=require("../hooks/useResize.cjs.js"),Ct=require("../components/BottomSheet/NavBottomSheet/index.styled.cjs.js"),_e=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=_e(lt),F=_e(g),Ee=e=>{const t=s.basicColors[`${e}400`],n="transparent",a=s.basicColors.white,p=s.basicColors.white,u=s.basicColors[`${e}100`],m="transparent",b=s.basicColors.white,x=s.basicColors.white;return{default:{on:{containerColor:t,borderColor:n,textColor:a,iconColor:p},off:{containerColor:s.basicColors.white,borderColor:s.basicColors.gray50,textColor:s.semanticColors.chipDefaultText,iconColor:s.basicColors.gray300}},disabled:{on:{containerColor:u,borderColor:m,textColor:b,iconColor:x},off:{containerColor:s.basicColors.white,borderColor:s.basicColors.gray25,textColor:s.basicColors.gray100,iconColor:s.basicColors.gray100}}}},f=e=>{const t=s.basicColors.gray100,n="none";switch(e){case"gray":return{on:{textColor:s.basicColors.gray900,barColor:s.basicColors.gray900},off:{textColor:t,barColor:n}};default:return{on:{textColor:s.basicColors[`${e}400`],barColor:s.basicColors[`${e}400`]},off:{textColor:t,barColor:n}}}},Re=e=>{const t=s.basicColors.gray700,n=s.basicColors.gray50;switch(e){case"gray":return{on:{textColor:s.semanticColors.buttonGrayMainAbledText,containerColor:s.basicColors.gray700},off:{textColor:t,containerColor:n}};default:return{on:{textColor:s.semanticColors.buttonGrayMainAbledText,containerColor:s.basicColors[`${e}400`]},off:{textColor:t,containerColor:n}}}},$t=r.default.div`
+	${d.Smaller(i.css`
+		display: none;
+	`)}
+`,jt=r.default.div`
+	${d.Larger(i.css`
+		display: none;
+	`)}
+`,P={Headline1:c.headline1,Headline2:c.headline2,Headline3:c.headline3,Headline4:c.headline4,Headline5:c.headline5,Headline6:c.headline6,Title1:c.title1,Title2:c.title2,Title3:c.title3,Title4:c.title4,Body1:c.body1,Body2:c.body2},yt=r.default.div`
+	text-align: ${e=>e.textAlign};
+	white-space: pre-wrap;
+	${e=>P[e.md](e)}
+
+	${e=>e.sm&&d.Smaller(i.css`
+			 {
+				${P[e.sm](e)}
+			}
+		`)}
+	${e=>e.lg&&d.Larger(i.css`
+			 {
+				${P[e.lg](e)}
+			}
+		`)}
+`,R=e=>{const{children:t}=e;return o.jsxRuntimeExports.jsx(yt,{...e,children:t})},Se=e=>{const{children:t,...n}=e;return o.jsxRuntimeExports.jsx(R,{...n,md:"Headline3",children:t})},oe=e=>{const{children:t,...n}=e;return o.jsxRuntimeExports.jsx(R,{...n,md:"Headline4",children:t})},qe=e=>{const{children:t,...n}=e;return o.jsxRuntimeExports.jsx(R,{...n,md:"Headline5",children:t})},w=e=>{const{children:t,...n}=e;return o.jsxRuntimeExports.jsx(R,{...n,md:"Title3",children:t})},Bt=s.basicColors.red400,vt="16px",we=i.css`
+	background-color: ${Bt};
+`,_t=r.default.div`
+	${we};
+
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+`,Et=r.default.div`
+	${we};
+
+	height: ${vt};
+	padding: 0 5px;
+	border-radius: 8px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`,Rt=r.default.div`
+	line-height: initial;
+
+	font-size: 11px;
+	font-weight: 500;
+	color: ${s.basicColors.white};
+	letter-spacing: -0.2px;
+`,re=5,Te=r.default.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: ${s.basicColors.gray50};
+	}
+
+	&:active {
+		background-color: ${s.basicColors.gray100};
+	}
+
+	${({colorType:e})=>i.css`
+		cursor: pointer;
+		color: ${M(e).textColor};
+	`}
+
+	&:disabled {
+		${({colorType:e})=>i.css`
+			cursor: not-allowed;
+			background-color: initial;
+			color: ${M(e).disabledTextColor};
+		`}
+	}
+	${({styleType:e,colorType:t,size:n})=>{switch(e){case"icon":return i.css`
+					height: 25px;
+					svg > path {
+						fill: ${M(t).iconColor};
+					}
+					&:disabled svg > path {
+						fill: ${M(t).iconDisabledColor};
+					}
+				`;case"underline":return i.css`
+					${(()=>{switch(n){case"s":return i.css`
+									height: 28px;
+								`;case"m":return i.css`
+									height: 32px;
+								`}})()};
+					&:disabled {
+						> * {
+							text-decoration: none;
+						}
+					}
+				`}}}
+	${({size:e})=>{switch(e){case"s":return i.css`
+					${c.typography.title4};
+				`;case"m":return i.css`
+					${c.typography.title3};
+				`}}}
+`,St=r.default.div`
+	padding-left: ${re}px;
+
+	display: flex;
+	align-items: center;
+`,Y=e=>o.jsxRuntimeExports.jsx(Te,{...e,type:"button"}),ee=r.default.div`
+	padding: 0 ${re}px;
+
+	text-decoration: underline;
+	text-underline-position: under;
+`,ke=r.default.a`
+	text-decoration: none;
+`,We=({size:e,colorType:t,children:n,url:a,onClick:p,disabled:u=!1})=>o.jsxRuntimeExports.jsx(o.jsxRuntimeExports.Fragment,{children:a?o.jsxRuntimeExports.jsx(ke,{href:a,target:"_blank",children:o.jsxRuntimeExports.jsx(Y,{styleType:"underline",disabled:u,colorType:t,size:e,children:o.jsxRuntimeExports.jsx(ee,{children:n})})}):o.jsxRuntimeExports.jsx(Y,{styleType:"underline",onClick:p,disabled:u,colorType:t,size:e,children:o.jsxRuntimeExports.jsx(ee,{children:n})})}),qt=r.default.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:t})=>L(e)[t?"disabled":"default"].off.containerColor};
+	border-color: ${({colorType:e,disabled:t})=>L(e)[t?"disabled":"default"].off.borderColor};
+
+	&:checked {
+		border-width: 6px;
+		background-color: ${({colorType:e,disabled:t})=>L(e)[t?"disabled":"default"].on.containerColor};
+		border-color: ${({colorType:e,disabled:t})=>L(e)[t?"disabled":"default"].on.borderColor};
+	}
+
+	&:focus {
+		outline: none;
+	}
+`,y={innerWrapper:"datepicker-inner-wrapper",dot:"datepicker-dot",rangeBackgroundWrapper:"datepicker-range-background-wrapper"},E=100,wt=r.default.div`
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+
+	position: absolute;
+	left: 47%;
+	bottom: 5.86px;
+`,T=i.css`
+	width: ${E}%;
+	height: ${E}%;
+`,S=r.default.div`
+	${T};
+	position: relative;
+	/* height가 안 정해진 상태에서 height = width 적용되는 방법 */
+	padding-bottom: ${E}%;
+`,Tt=r.default.div`
+	${T};
+
+	position: absolute;
+	left: 0;
+
+	${({rangeBackgroundColor:e})=>e&&i.css`
+			background: ${e};
+		`}
+`,kt=r.default.div`
+	${T};
+
+	position: absolute;
+	left: 0;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	border-radius: 50%;
+
+	${({circleBackgroundColor:e})=>e&&i.css`
+			background-color: ${e};
+		`};
+`,Wt=r.default(S)``,It=r.default(S)`
+	cursor: pointer;
+
+	.${y.innerWrapper} {
+		:hover {
+			background-color: ${({colorType:e})=>ct(e).hoverContainerColor};
+		}
+	}
+
+	.${y.dot} {
+		background-color: ${s.basicColors.gray200};
+	}
+`,Ot=r.default(S)`
+	cursor: not-allowed;
+
+	.${y.dot} {
+		background-color: ${s.basicColors.gray100};
+	}
+`,ne=r.default(S)`
+	cursor: pointer;
+
+	.${y.dot} {
+		background-color: ${s.basicColors.white};
+	}
+`,Mt=r.default(ne)`
+	.${y.rangeBackgroundWrapper} {
+		left: ${E/2}%;
+		width: ${E/2}%;
+	}
+`,Lt=r.default(ne)`
+	.${y.rangeBackgroundWrapper} {
+		width: ${E/2}%;
+	}
+`,Nt=r.default(S)``,Dt=r.default.div`
+	${T};
+
+	position: absolute;
+	left: 0;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+`,se=F.default.memo(({className:e,visible:t,onClick:n,zIndex:a=B.zIndex.modal,children:p})=>{const[u,m]=g.useState(!1),b=x=>{x.target===x.currentTarget&&(n==null||n())};return g.useEffect(()=>{let x;return t?m(!0):x=setTimeout(()=>m(!1),400),()=>{x!==void 0&&clearTimeout(x)}},[t]),ve.useOverlayPreventScroll(t),u?o.jsxRuntimeExports.jsx(mt.Overlay,{className:e,visible:t,zIndex:a,onClick:b,children:p}):null}),U=e=>o.jsxRuntimeExports.jsx(j.FooterWrapper,{children:o.jsxRuntimeExports.jsx(H.Button,{...e})}),G=e=>o.jsxRuntimeExports.jsx(j.FooterWrapper,{children:o.jsxRuntimeExports.jsxs("div",{className:"flex w-full gap-[10px]",children:[o.jsxRuntimeExports.jsx(H.Button,{...e.left,onClick:e.left.onClick,colorType:e.left.colorType,purpose:"sub",disabled:e.left.disabled,className:e.left.className,children:e.left.children}),o.jsxRuntimeExports.jsx(H.Button,{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})]})}),V=({children:e,...t})=>{const n=g.useRef(null);return g.useEffect(()=>{var a;(a=n.current)==null||a.scroll(0,0)},[]),o.jsxRuntimeExports.jsx(j.ChildrenWrapper,{ref:n,...t,children:e})},k=({children:e})=>o.jsxRuntimeExports.jsx(j.HeaderWrapper,{children:e}),A=({visible:e,onMaskClick:t,className:n,zIndex:a=B.zIndex.modal,minHeight:p,children:u})=>{const[m,b]=g.useState(0),x=g.useCallback(()=>{b(window==null?void 0:window.innerHeight)},[]);return g.useEffect(()=>{x()},[x]),ft(x),ve.useOverlayPreventScroll(e),e?o.jsxRuntimeExports.jsx(se,{visible:e,className:n,onClick:t,zIndex:a,children:o.jsxRuntimeExports.jsx(j.ContentWrapper,{children:o.jsxRuntimeExports.jsx(j.Content,{visible:e,zIndex:a,minHeight:p,vh:m,children:u})})}):null},Pt=Object.assign(A,{SingleButton:U,DoubleButton:G,Body:V,Header:k}),Ie=({title:e,titleColor:t,leftChildren:n,rightChildren:a,zIndex:p=B.zIndex.gnb,backgroundColor:u})=>o.jsxRuntimeExports.jsxs(X.Wrapper,{backgroundColor:u,zIndex:p,children:[n&&o.jsxRuntimeExports.jsx(X.LeftChildrenWrapper,{children:n}),e&&o.jsxRuntimeExports.jsx(qe,{color:t,children:e}),a&&o.jsxRuntimeExports.jsx(X.RightChildrenWrapper,{children:a})]}),Oe=({contentColor:e,hasBackgroundColor:t,leftArea:n,rightArea:a,...p})=>{const u=D.CONTENT_COLOR_MAP[e].icon,m=D.CONTENT_COLOR_MAP[e].title,b=D.CONTENT_COLOR_MAP[e].rightText,x=D.CONTENT_COLOR_MAP[e].backgroundColor,W=g.useMemo(()=>{const $=()=>{n==null||n.handleClickButton()};switch(n==null?void 0:n.type){case"backIcon":return o.jsxRuntimeExports.jsx(N.IconWrapper,{onClick:$,children:o.jsxRuntimeExports.jsx(pt.ChevronLeft,{fillColor:m})});default:return}},[n,m]),C=g.useMemo(()=>{const $=()=>{a==null||a.handleClickButton()};switch(a==null?void 0:a.type){case"closeIcon":return o.jsxRuntimeExports.jsx(N.IconWrapper,{onClick:$,children:o.jsxRuntimeExports.jsx(dt.Cancel,{fillColor:u})});case"icon":return o.jsxRuntimeExports.jsx(N.IconWrapper,{onClick:$,children:o.jsxRuntimeExports.jsx(a.children,{fillColor:m})});case"text":return o.jsxRuntimeExports.jsx(N.TextWrapper,{onClick:$,children:o.jsxRuntimeExports.jsx(w,{color:b,children:a.children})});default:return}},[u,m,b,a]);return o.jsxRuntimeExports.jsx(Ie,{backgroundColor:t?x:"transparent",leftChildren:W,titleColor:m,rightChildren:C,...p})},Me=({children:e})=>o.jsxRuntimeExports.jsx(k,{children:o.jsxRuntimeExports.jsx(Ct.NavigationWrapper,{children:e})}),Ht=e=>o.jsxRuntimeExports.jsx(Me,{children:o.jsxRuntimeExports.jsx(Oe,{...e})}),zt=Object.assign(A,{Header:k,Navigation:Ht,Body:V,SingleButton:U,DoubleButton:G}),Ft=F.default.forwardRef((e,t)=>{const{realValue:n,postfix:a,onBlur:p,onFocus:u,onClick:m,disabled:b,label:x,placeholder:W,errorValidation:C,logRocketMasking:$,focus:Z=!1,max:ue,decoration:xe,updateRealValue:ge,formatRealValue:I,formatDisplayValue:v,type:me,pattern:rt,...nt}=e,[O,st]=g.useState(""),[it,J]=g.useState(""),[K,he]=g.useState(Z),q=g.useRef(null),Q=K||!!O,be=!x&&!Q&&!!W,fe=g.useCallback(l=>{if(l.length===0||l==="0"){J("");return}if(C)for(let h=0;h<C.length;h++)if(!C[h].condition(l)&&l.length!==0){J(C[h].errorText);break}else J("")},[C]),Ce=g.useCallback(l=>{const{type:h}=l;he(h==="focus")},[]),$e=g.useCallback(l=>{var h;m==null||m(l),(h=q.current)==null||h.focus()},[m,q]),at=g.useCallback(l=>{const h=(I==null?void 0:I(l))||l,je=Number(ue),ye=Number(h);je&&!isNaN(ye)&&ye>je||ge(h)},[ue,ge,I]);return g.useEffect(()=>{let l=n;v&&(l=(v==null?void 0:v(l))||""),st(l),fe(n)},[v,fe,n]),g.useEffect(()=>{var l;Z&&((l=q.current)==null||l.focus())},[q,Z]),o.jsxRuntimeExports.jsxs(xt.InputFrame,{label:x,active:Q,focused:K,disabled:!!b,errorText:it,handleClickInput:$e,children:[o.jsxRuntimeExports.jsxs(_.InputAndUnitWrapper,{children:[o.jsxRuntimeExports.jsx(_.InputSizer,{focused:K,displayValue:O,children:o.jsxRuntimeExports.jsx(_.InputTag,{...nt,className:_.className.inputTag,hasLabel:!!x,placeholder:be?W:"","data-private":$,ref:t||q,name:x,disabled:b,value:v?O:n,onChange:l=>{const h=l.currentTarget.value;at(h)},onFocus:l=>{u==null||u(l),Ce(l)},onBlur:l=>{p==null||p(l),Ce(l)},decoration:!1,pattern:me==="number"?"\\d*":rt,type:me,onClick:$e,size:be?void 0:1})}),o.jsxRuntimeExports.jsx(_.UnitWrapper,{children:Q&&o.jsxRuntimeExports.jsx(_.Unit,{hasLabel:!!x,hasValue:!!O,children:o.jsxRuntimeExports.jsx(R,{md:"Title1",color:b?s.basicColors.gray200:void 0,children:a})})})]}),xe&&o.jsxRuntimeExports.jsx(ut.DecorationItemWrapper,{disabled:b,children:xe})]})}),Ut=r.default.div`
+	position: absolute;
+	width: 100%;
+	top: 0;
+	height: 3px;
+	background-color: ${s.basicColors.gray50};
+`,Gt=r.default.div`
+	width: ${({progress:e})=>e}%;
+	background-color: ${({colorType:e})=>bt(e).upperColor};
+	height: 100%;
+	transition: width 3s ease-in-out;
+`,ie={subTitle:"title-bottom-sheet-sub-title"},Le=r.default(w)`
+	color: ${s.basicColors.gray400};
+`,Ne=r.default.div`
+	padding: 25px ${({contentPadding:e})=>`${e?0:`${j.ContentWrapperPadding}px`}`};
+
+	.${ie.subTitle} {
+		margin-top: 10px;
+	}
+`,ae=r.default.div`
+	margin-top: 25px;
+`,Vt=({title:e,subTitle:t,hasContentPadding:n=!0})=>o.jsxRuntimeExports.jsxs(Ne,{contentPadding:n,children:[e&&o.jsxRuntimeExports.jsx(oe,{children:e}),t&&o.jsxRuntimeExports.jsx(Le,{className:ie.subTitle,children:t})]}),At=e=>o.jsxRuntimeExports.jsx(ae,{children:o.jsxRuntimeExports.jsx(U,{...e})}),Zt=e=>o.jsxRuntimeExports.jsx(ae,{children:o.jsxRuntimeExports.jsx(G,{...e})}),Jt=Object.assign(A,{Header:k,Body:V,Title:Vt,SingleButton:At,DoubleButton:Zt}),De=r.default.div`
+	& > div > .select-box {
+		cursor: pointer;
+	}
+	position: relative;
+`,Pe=r.default.div`
+	position: absolute;
+	z-index: ${B.zIndex.basicLayer+1};
+	width: 100%;
+	height: max-content;
+
+	${d.Larger(i.css`
+		top: 70px;
+	`)}
+`,He=r.default.div`
+	height: 80px;
+	pointer-events: none;
+`,ze=r.default.div`
+	box-shadow: 0 2px 10px ${s.generateHexWithAlphaInLightMode(s.basicColors.black,"20%")};
+	background-color: ${s.basicColors.white};
+	border-radius: 10px;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	max-height: ${65*4.5}px;
+	overflow-y: scroll;
+`,Fe=r.default.div`
+	width: 100%;
+	height: 50px;
+	padding: 15px 25px;
+	cursor: pointer;
+	${c.title2({color:s.basicColors.gray400})};
+	background-color: ${s.basicColors.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: ${s.basicColors.gray25};
+	}
+
+	&:active {
+		background-color: ${s.basicColors.gray50};
+	}
+`,Ue=r.default.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;
+`,Ge=r.default.div`
+	${d.Smaller(i.css`
+		display: none;
+	`)}
+`,Ve=r.default.div`
+	${d.Larger(i.css`
+		display: none;
+	`)}
+`,Kt=Object.freeze(Object.defineProperty({__proto__:null,Desktop:Ge,IconWrapper:Ue,Item:Fe,ItemList:ze,ItemListWrapper:Pe,ListBottomMargin:He,Mobile:Ve,Wrapper:De},Symbol.toStringTag,{value:"Module"})),Ae={Text:"chip-item-text"},le=38,Qt=r.default.span`
+	display: inline-flex;
+	min-width: max-content;
+	height: ${le}px;
+	gap: 2px;
+	padding: 8px 0 8px 12px;
+	padding-right: ${({hasRightIcon:e})=>e?"7px":"12px"};
+	align-items: center;
+
+	border-radius: 22px;
+
+	${({disabled:e,selected:t,colorType:n})=>{const a=Ee(n),p=e?"disabled":"default",u=t?"on":"off";return i.css`
+			background-color: ${a[p][u].containerColor};
+			border: 1px solid ${a[p][u].borderColor};
+			.${Ae.Text} {
+				color: ${a[p][u].textColor};
+			}
+			svg > path {
+				fill: ${a[p][u].iconColor};
+			}
+		`}}
+
+	${({selected:e})=>!e&&i.css`
+			cursor: pointer;
+		`}
+`,Xt=r.default.span`
+	cursor: pointer;
+	display: flex;
+`,Ze={ControlIconContainer:2},z=le,Yt=25,eo=s.basicColors.white,to=r.default.div`
+	display: flex;
+	align-items: center;
+	position: relative;
+	overflow: hidden;
+
+	width: 100%;
+`,oo=r.default.div`
+	${te.scrollStyle}
+
+	display: flex;
+	gap: 5px;
+	z-index: ${Ze.ControlIconContainer-1};
+
+	${({hasIconArea:e})=>e&&i.css`
+			padding-left: ${z+8}px;
+		`}
+	padding-right: 20px;
+`,ro=r.default.div`
+	cursor: pointer;
+	position: absolute;
+	left: 0;
+	top: 0;
+
+	z-index: ${Ze.ControlIconContainer};
+
+	background-color: ${eo};
+	width: ${z}px;
+	height: ${z}px;
+`,no=r.default.div`
+	width: ${Yt}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;
+`,so=r.default.div`
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+
+	background: ${s.basicColors.gray50};
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	position: absolute;
+	left: 0;
+	top: 0;
+`,io={Item:r.default.div`
+		display: inline-block;
+		padding-top: 15px;
+		padding-bottom: 11px;
+		cursor: pointer;
+		text-align: center;
+
+		flex-grow: 1;
+
+		position: relative;
+		${({active:e,colorType:t})=>e?i.css`
+						${c.headline6({color:f(t).on.textColor})};
+						border-bottom: 2px solid ${f(t).on.barColor};
+				  `:i.css`
+						${c.title3({color:f(t).off.textColor})};
+						border-bottom: 2px solid ${f(t).off.barColor};
+				  `};
+	`,Wrapper:r.default.div`
+		display: flex;
+		gap: 0px;
+
+		width: 100%;
+		background-color: transparent;
+
+		white-space: nowrap;
+
+		border-bottom: 1px solid ${s.basicColors.gray50};
+	`},ao={Item:r.default.div`
+		display: inline-block;
+		padding: 16px 0;
+		cursor: pointer;
+		text-align: center;
+
+		min-width: max-content;
+
+		position: relative;
+		${({active:e,colorType:t})=>e?i.css`
+						${c.headline6({color:f(t).on.textColor})};
+						border-bottom: 2px solid ${f(t).on.barColor};
+				  `:i.css`
+						${c.title3({color:f(t).off.textColor})};
+						border-bottom: 2px solid ${f(t).off.barColor};
+				  `};
+	`,Wrapper:r.default.div`
+		${te.scrollStyle}
+
+		display: flex;
+		gap: 30px;
+
+		width: 100%;
+		background-color: transparent;
+
+		white-space: nowrap;
+
+		${d.Smaller(i.css`
+			/* Mobile) 에만 좌우 여백 추가  */
+			padding-left: 20px;
+			padding-right: 20px;
+		`)}
+
+		border-bottom: 1px solid ${s.basicColors.gray50};
+	`},lo=r.default.div`
+	overflow: hidden;
+`,co=r.default.div`
+	${te.scrollStyle}
+
+	display: flex;
+	gap: 7px;
+
+	padding: 0 20px;
+	${d.Larger(i.css`
+		padding: 0;
+	`)}
+`,po=r.default.div`
+	cursor: pointer;
+	padding: 8px 12px;
+	min-width: fit-content;
+	border-radius: 8px;
+	${c.title4()}
+
+	${({colorType:e,status:t})=>{const{textColor:n,containerColor:a}=Re(e)[t];return i.css`
+			color: ${n};
+			background: ${a};
+		`}}
+`,uo=r.default.div`
+	${({type:e,colorType:t})=>c.title4({color:Be({type:e,colorType:t}).textColor})};
+	background-color: ${({type:e,colorType:t})=>Be({type:e,colorType:t}).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"};
+`,xo=r.default.div`
+	${d.Smaller(i.css`
+		padding: 25px 0;
+	`)}
+
+	${d.Larger(i.css`
+		padding: 80px 80px 25px;
+	`)}
+
+	/** deletePaddingTop = true 이면, 사용처 BasicLayout 에서 padding-top 관리 */
+
+	${({deletePaddingTop:e})=>e&&d.Smaller(i.css`
+			padding-top: 0px;
+		`)}
+
+	${({deletePaddingTop:e})=>e&&d.Larger(i.css`
+			padding-top: 0px;
+		`)}
+`,go=r.default.div`
+	padding: 0 20px;
+	margin-bottom: 15px;
+	${d.Larger(i.css`
+		padding: 0;
+	`)}
+`,mo=r.default(Se)`
+	padding: 0 25px;
+	white-space: pre-wrap;
+	${d.Larger(i.css`
+		padding: 0;
+	`)}
+`,ho=r.default(w)`
+	margin-top: 10px;
+	padding: 0 25px;
+	color: ${({color:e})=>e};
+	white-space: pre-wrap;
+	${d.Larger(i.css`
+		padding: 0;
+	`)}
+`,Je=F.default.memo(({zIndex:e=B.zIndex.modal,visible:t,onMaskClick:n,children:a,className:p})=>o.jsxRuntimeExports.jsx(se,{className:p,visible:t,onClick:n,zIndex:e,children:o.jsxRuntimeExports.jsx(gt.ModalContent,{visible:t,children:a})})),Ke=r.default.div`
+	width: 320px;
+	background-color: ${s.basicColors.white};
+	z-index: ${B.zIndex.modal};
+	border-radius: 10px;
+	padding: 30px 0 15px;
+`,Qe=r.default.div`
+	text-align: center;
+	white-space: pre-wrap;
+	padding: 0 15px;
+`,Xe=r.default(w)`
+	margin-top: 10px;
+
+	text-align: center;
+	white-space: pre-wrap;
+	color: ${s.basicColors.gray400};
+	font-weight: 500;
+`,Ye=r.default.div`
+	padding-left: ${e=>e.contentPadding?"20px":"0"};
+	padding-right: ${e=>e.contentPadding?"20px":"0"};
+	padding-bottom: 30px;
+
+	> * {
+		margin-top: 20px;
+	}
+`,et=r.default.div`
+	${c.typography.body1};
+
+	color: ${s.basicColors.gray400};
+	background: ${s.basicColors.gray25};
+	border-radius: 10px;
+	padding: 12px;
+	text-align: center;
+	white-space: pre-wrap;
+`,tt=r.default.div`
+	display: flex;
+	justify-content: center;
+	padding: 0 11px;
+`,ce=r.default.div`
+	box-sizing: border-box;
+	padding: 0 15px;
+`,bo=e=>o.jsxRuntimeExports.jsx(ce,{children:o.jsxRuntimeExports.jsx(H.Button,{...e})}),fo=e=>o.jsxRuntimeExports.jsx(ce,{children:o.jsxRuntimeExports.jsx(ht.DoubleButton,{...e})}),Co=({title:e,subTitle:t})=>o.jsxRuntimeExports.jsxs(Qe,{children:[o.jsxRuntimeExports.jsx(oe,{children:e}),t&&o.jsxRuntimeExports.jsx(Xe,{children:t})]}),$o=({children:e})=>o.jsxRuntimeExports.jsx(et,{children:e}),jo=({onClick:e,disabled:t,text:n})=>o.jsxRuntimeExports.jsx(tt,{children:o.jsxRuntimeExports.jsx(We,{size:"m",colorType:"gray",onClick:e,disabled:t,children:n})}),yo=({children:e,hasContentPadding:t=!0})=>o.jsxRuntimeExports.jsx(Ye,{contentPadding:t,children:e}),Bo=F.default.memo(({children:e,...t})=>o.jsxRuntimeExports.jsx(Je,{...t,children:o.jsxRuntimeExports.jsx(Ke,{children:e})})),vo=Object.assign(Bo,{SingleButton:bo,DoubleButton:fo,Title:Co,Body:yo,Comment:$o,UnderLineMiniButton:jo}),ot="-55px",de="50px",pe="25px",_o=i.keyframes`
+	0% {
+		bottom: ${ot};
+	}
+	100% {
+		${d.Smaller(i.css`
+			bottom: ${pe};
+		`)};
+		${d.Larger(i.css`
+			bottom: ${de};
+		`)};
+	}
+`,Eo=i.keyframes`
+	0% {
+		${d.Smaller(i.css`
+			bottom: ${pe};
+		`)};
+		${d.Larger(i.css`
+			bottom: ${de};
+		`)};
+	}
+	100% {
+		bottom: ${ot};
+	}
+`,Ro=e=>i.css`
+	visibility: ${e?"visible":"hidden"};
+	z-index: ${B.zIndex.basicLayer+11};
+	animation: ${e?_o:Eo} 0.4s ease-out;
+	transition: all 0.4s ease-out;
+`,So=r.default.div`
+	min-width: 320px;
+	max-width: max-content;
+
+	${d.Larger(i.css`
+		min-width: 440px;
+	`)}
+	height: 55px;
+	box-sizing: border-box;
+	background-color: ${s.generateHexWithAlphaInLightMode(s.basicColors.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);
+	${d.Smaller(i.css`
+		bottom: ${pe};
+	`)};
+	${d.Larger(i.css`
+		bottom: ${de};
+	`)};
+	${({visible:e})=>Ro(e)};
+`,qo=r.default.div`
+	${c.typography.title3};
+	color: ${s.basicColors.white};
+	width: 100%;
+`;exports.ActiveDateOfMonthWrapper=It;exports.Badge=Et;exports.BadgeContent=Rt;exports.BaseBottomSheet=Pt;exports.BaseBottomSheetBody=V;exports.BaseBottomSheetCTADoubleButton=G;exports.BaseBottomSheetCTASingleButton=U;exports.BaseBottomSheetComp=A;exports.BaseBottomSheetHeader=k;exports.BaseModal=Je;exports.BaseNavigation=Ie;exports.BaseTypography=R;exports.Body=Ye;exports.BottomSheetNavigationTemplate=Me;exports.ButtonMargin=ae;exports.ButtonTag=Y;exports.ButtonTag$1=Te;exports.CHIP_ITEM_HEIGHT=le;exports.CancelIconWrapper=Xt;exports.ChipListContainer=oo;exports.Comment=et;exports.CommonDateOfMonthSizeStyle=T;exports.CommonDateOfMonthWrapper=S;exports.Container=Qt;exports.Content=St;exports.Content$1=qo;exports.Content$2=ee;exports.ControlIconCircleWrapper=so;exports.ControlIconContainer=ro;exports.ControlIconGradientBackground=no;exports.DayOfWeekItemWrapper=Nt;exports.Desktop=Ge;exports.DisabledDateOfMonthWrapper=Ot;exports.Dot=_t;exports.Dot$1=wt;exports.FillTabsListContainer=co;exports.Fixed=io;exports.Footer=ce;exports.Header=Qe;exports.Headline3=Se;exports.Headline4=oe;exports.Headline5=qe;exports.IconWrapper=Ue;exports.ImageWrapper=go;exports.InnerWrapper=kt;exports.InnerWrapper$1=Dt;exports.Input=qt;exports.Item=Fe;exports.ItemList=ze;exports.ItemListWrapper=Pe;exports.ItemWrapper=po;exports.LineButtonWrapper=tt;exports.LinkWrapper=ke;exports.ListBottomMargin=He;exports.MiniButtonSidePaddingPx=re;exports.Mobile=Ve;exports.MobileWrapper=jt;exports.Modal=vo;exports.NavBottomSheet=zt;exports.Navigation=Oe;exports.NoneDateOfMonthWrapper=Wt;exports.OutterContainer=to;exports.OutterWrapper=lo;exports.OverlayRoot=se;exports.PcWrapper=$t;exports.PostfixInput=Ft;exports.Progress=Gt;exports.ProgressBar=Ut;exports.RangeBackgroundWrapper=Tt;exports.RangeEndFocusDateOfMonthWrapper=Lt;exports.RangeStartFocusDateOfMonthWrapper=Mt;exports.Scroll=ao;exports.SingleFocusDateOfMonthWrapper=ne;exports.SubTitle=ho;exports.SubTitle$1=Le;exports.SubTitle$2=Xe;exports.Title=mo;exports.Title3=w;exports.TitleBottomSheet=Jt;exports.TitleWrapper=Ne;exports.Toast=So;exports.UnderLineMiniButton=We;exports.Wrapper=De;exports.Wrapper$1=uo;exports.Wrapper$2=xo;exports.Wrapper$3=Ke;exports.chipColorStyle=Ee;exports.className=Ae;exports.className$1=y;exports.className$2=ie;exports.fillTabColorStyle=Re;exports.index_styled=Kt;exports.textTabColorStyle=f;exports.typographyList=P;