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

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

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