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

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

@@ -0,0 +1,63 @@
+"use strict";const e=require("@emotion/react"),b=require("@emotion/styled"),s=require("../core/TextStyles/index.cjs.js"),t=require("../core/Colors/index.cjs.js"),r=require("../components/Input/common/InputFrame/constant.cjs.js"),u=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},a=u(b),i=({hasLabel:o})=>e.css`
+	${s.typographyMap.title1}
+
+	position: absolute;
+	top: ${o?r.INNER_POSITION_TOP.hasLabel:r.INNER_POSITION_TOP.noLabel}px;
+	left: ${r.INNER_POSITION_LEFT}px;
+	color: ${t.basicColors.gray100};
+`,l=t.basicColors.gray200,n=a.default.div`
+	width: 100%;
+	height: ${r.INPUT_HEIGHT}px;
+	position: relative;
+	box-sizing: border-box;
+	background-color: ${t.basicColors.white};
+	border: 1px solid ${({active:o})=>o?t.basicColors.gray600:t.basicColors.gray50};
+	border-radius: 10px;
+	display: flex;
+	align-items: center;
+
+	${({error:o})=>o&&e.css`
+			border: 1px solid ${t.basicColors.red400};
+		`}
+
+	${({active:o})=>o&&e.css`
+			box-shadow: 0 2px 5px ${t.generateHexWithAlphaInLightMode(t.basicColors.gray900,"10%")};
+		`}
+
+	${({disabled:o,error:d})=>d?null:o?e.css`
+						background-color: ${t.basicColors.gray25};
+						color: ${l};
+					`:e.css`
+						&:hover {
+							border: 1px solid ${t.basicColors.gray600};
+							box-shadow: 0 2px 5px ${t.generateHexWithAlphaInLightMode(t.basicColors.gray900,"10%")};
+						}
+						&:focus {
+							border: 1px solid ${t.basicColors.gray600};
+							outline: none;
+						}
+					`};
+`,p=a.default.label`
+	position: absolute;
+	color: ${t.basicColors.gray200};
+	left: ${r.INNER_POSITION_LEFT}px;
+	pointer-events: none;
+	transition-property: font-size, transform;
+	transition-duration: 0.4s;
+
+	${({active:o})=>o?e.css`
+					top: 11px;
+					${s.typographyMap.body2}
+				`:e.css`
+					bottom: 50%;
+					transform: translate(0%, 50%);
+					${s.typographyMap.title1}
+				`};
+`,c=a.default.div`
+	bottom: 0px;
+	position: relative;
+	${s.typographyMap.body2};
+	color: ${t.basicColors.red400};
+	margin-top: 10px;
+	left: 5px;
+`,x=Object.freeze(Object.defineProperty({__proto__:null,ErrorText:c,InputDisabledTextColor:l,InputLabel:p,InputWrapper:n,NotActivePlaceholderOrLabelStyle:i},Symbol.toStringTag,{value:"Module"}));exports.ErrorText=c;exports.InputDisabledTextColor=l;exports.InputLabel=p;exports.InputWrapper=n;exports.NotActivePlaceholderOrLabelStyle=i;exports.index_styled=x;

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

@@ -0,0 +1,398 @@
+"use strict";const i=require("@emotion/react"),ae=require("@emotion/styled"),v=require("../constants/style.constants.cjs.js"),n=require("../core/Colors/index.cjs.js"),W=require("../core/TextStyles/index.cjs.js"),l=require("../utils/media.util.cjs.js");require("../utils/GenerateColorStyle/mini-button.cjs.js");const le=require("../utils/GenerateColorStyle/datepicker.cjs.js"),o=require("./jsx-runtime.713F0z8w.js");require("../components/ui/typography.cjs.js");require("../components/Accordion/index.cjs.js");require("../components/Badge/IconBadge/index.styled.cjs.js");require("../components/Badge/TextBadge/index.styled.cjs.js");const g=require("react");require("../components/Loading/Skeleton/index.cjs.js");const ce=require("../components/Loading/Spinner/index.styled.cjs.js");require("../components/Card/index.styled.cjs.js");require("../components/Comment/index.cjs.js");const B=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("../icons/src/icons/Alarm_fill.cjs.js");require("../icons/src/icons/Cancel.cjs.js");require("../icons/src/icons/Cancel_circle.cjs.js");require("../icons/src/icons/Calendar.cjs.js");require("../icons/src/icons/Check.cjs.js");require("../icons/src/icons/Chevron_down.cjs.js");require("../icons/src/icons/Chevron_up.cjs.js");require("../icons/src/icons/Chevron_left.cjs.js");require("../icons/src/icons/Double_Chevron_right.cjs.js");require("../icons/src/icons/Cart_fill.cjs.js");require("../icons/src/icons/Double_Chevron_left.cjs.js");require("../icons/src/icons/Eye_slash_fill.cjs.js");require("../icons/src/icons/Chevron_right.cjs.js");require("../icons/src/icons/Filter.cjs.js");require("../icons/src/icons/Plus.cjs.js");require("../icons/src/icons/Question_circle.cjs.js");require("../icons/src/icons/Re.cjs.js");require("../icons/src/icons/Person_fill.cjs.js");require("../icons/src/icons/Menu.cjs.js");require("../icons/src/icons/Setting_fill.cjs.js");require("../icons/src/icons/Information.cjs.js");require("../icons/src/icons/Eye_fill.cjs.js");require("../icons/src/icons/More.cjs.js");require("../icons/src/icons/Store.cjs.js");require("../icons/src/icons/Share.cjs.js");require("../icons/src/icons/Search.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 P=require("../hooks/useOverlayPreventScroll.cjs.js"),de=require("./index.Y_MfYxSQ.js"),pe=require("./index.DnJQUgiG.js"),H=require("./utils.Gb5_Gcy7.js");require("../components/DatePicker/RangeDatePickerModal/useRangeDatePickerModal.cjs.js");require("../components/Divider/index.styled.cjs.js");require("./index.styled.CMpDdHBq.js");require("../components/Input/BaseInput/index.cjs.js");require("../components/Input/PostfixInput/index.cjs.js");require("../components/Input/ResidentNumberInput/index.styled.cjs.js");require("../components/Navigation/index.styled.cjs.js");require("../components/Navigation/BaseNavigation/index.styled.cjs.js");require("../components/Navigation/constant.cjs.js");require("../components/Segment/BaseSegment/index.styled.cjs.js");require("../components/Segment/ExtendSegment/index.styled.cjs.js");const q=require("../core/Typography/index.cjs.js"),w=require("../components/BottomSheet/TitleBottomSheet/index.styled.cjs.js"),ue=require("../style/common.cjs.js"),be=require("../components/Modal/BaseModal/index.styled.cjs.js"),ge=require("../components/OverlayRoot/index.styled.cjs.js");require("../components/ToastMessage/Toast/index.styled.cjs.js");require("../components/Tooltip/TooltipBase/index.styled.cjs.js");require("../components/ui/bottomSheet.cjs.js");const h=require("../components/Modal/index.styled.cjs.js"),xe=require("../components/MiniButton/UnderLineMiniButton/index.cjs.js"),N=require("../utils/GenerateColorStyle/tag.cjs.js"),me=require("../hooks/useResize.cjs.js"),y=require("../components/BottomSheet/BaseBottomSheet/index.styled.cjs.js"),he=require("../components/Navigation/index.cjs.js"),ye=require("../components/BottomSheet/NavBottomSheet/index.styled.cjs.js"),fe=require("../utils/GenerateColorStyle/progress-bar.cjs.js"),z=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=z(ae),R=z(g),A=e=>{const t=n.basicColors[`${e}400`],s="transparent",a=n.basicColors.white,c=n.basicColors.white,p=n.basicColors[`${e}100`],u="transparent",b=n.basicColors.white,d=n.basicColors.white;return{default:{on:{containerColor:t,borderColor:s,textColor:a,iconColor:c},off:{containerColor:n.basicColors.white,borderColor:n.basicColors.gray50,textColor:n.semanticColors.chipDefaultText,iconColor:n.basicColors.gray300}},disabled:{on:{containerColor:p,borderColor:u,textColor:b,iconColor:d},off:{containerColor:n.basicColors.white,borderColor:n.basicColors.gray25,textColor:n.basicColors.gray100,iconColor:n.basicColors.gray100}}}},Ce=r.default.div`
+	${l.Smaller(i.css`
+		display: none;
+	`)}
+`,ve=r.default.div`
+	${l.Larger(i.css`
+		display: none;
+	`)}
+`,$e=n.basicColors.red400,je="16px",F=i.css`
+	background-color: ${$e};
+`,Be=r.default.div`
+	${F};
+
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+`,qe=r.default.div`
+	${F};
+
+	height: ${je};
+	padding: 0 5px;
+	border-radius: 8px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`,we=r.default.div`
+	line-height: initial;
+
+	font-size: 11px;
+	font-weight: 500;
+	color: ${n.basicColors.white};
+	letter-spacing: -0.2px;
+`,_e=r.default.div`
+	position: absolute;
+	width: 100%;
+	top: 0;
+	height: 3px;
+	background-color: ${n.basicColors.gray50};
+`,ke=r.default.div`
+	width: ${({progress:e})=>e}%;
+	background-color: ${({colorType:e})=>fe(e).upperColor};
+	height: 100%;
+	transition: width 3s ease-in-out;
+`,U=({colorType:e})=>o.jsxRuntimeExports.jsx(ce.SpinnerWrapper,{color:e==="white"?n.basicColors.white:n.basicColors.gray200}),G=pe.cva("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 x({className:e,asChild:t=!1,purpose:s,colorType:a,children:c,disabled:p,isLoading:u,...b}){const d=t?de.Slot:"button";return o.jsxRuntimeExports.jsx(d,{...b,"data-slot":"button",className:H.cn(G({colorType:a,purpose:s,className:e})),type:b.type??(s==="main"?"submit":"button"),disabled:p||u,children:u?o.jsxRuntimeExports.jsx("div",{className:"h-[25px] w-[25px]",children:o.jsxRuntimeExports.jsx(U,{colorType:"white"})}):c})}const V=({left:e,right:t})=>o.jsxRuntimeExports.jsxs("div",{className:"flex w-full gap-[10px]",children:[o.jsxRuntimeExports.jsx(x,{...e,purpose:(e==null?void 0:e.purpose)||"sub",children:e.children}),o.jsxRuntimeExports.jsx(x,{...t,purpose:(t==null?void 0:t.purpose)||"main",type:(t==null?void 0:t.type)||"submit",children:t.children})]}),Te=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})=>B(e)[t?"disabled":"default"].off.containerColor};
+	border-color: ${({colorType:e,disabled:t})=>B(e)[t?"disabled":"default"].off.borderColor};
+
+	&:checked {
+		border-width: 6px;
+		background-color: ${({colorType:e,disabled:t})=>B(e)[t?"disabled":"default"].on.containerColor};
+		border-color: ${({colorType:e,disabled:t})=>B(e)[t?"disabled":"default"].on.borderColor};
+	}
+
+	&:focus {
+		outline: none;
+	}
+`,m={innerWrapper:"datepicker-inner-wrapper",dot:"datepicker-dot",rangeBackgroundWrapper:"datepicker-range-background-wrapper"},f=100,Se=r.default.div`
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+
+	position: absolute;
+	left: 47%;
+	bottom: 5.86px;
+`,$=i.css`
+	width: ${f}%;
+	height: ${f}%;
+`,C=r.default.div`
+	${$};
+	position: relative;
+	/* height가 안 정해진 상태에서 height = width 적용되는 방법 */
+	padding-bottom: ${f}%;
+`,Ee=r.default.div`
+	${$};
+
+	position: absolute;
+	left: 0;
+
+	${({rangeBackgroundColor:e})=>e&&i.css`
+			background: ${e};
+		`}
+`,We=r.default.div`
+	${$};
+
+	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};
+		`};
+`,Re=r.default(C)``,Oe=r.default(C)`
+	cursor: pointer;
+
+	.${m.innerWrapper} {
+		:hover {
+			background-color: ${({colorType:e})=>le(e).hoverContainerColor};
+		}
+	}
+
+	.${m.dot} {
+		background-color: ${n.basicColors.gray200};
+	}
+`,Ie=r.default(C)`
+	cursor: not-allowed;
+
+	.${m.dot} {
+		background-color: ${n.basicColors.gray100};
+	}
+`,O=r.default(C)`
+	cursor: pointer;
+
+	.${m.dot} {
+		background-color: ${n.basicColors.white};
+	}
+`,Me=r.default(O)`
+	.${m.rangeBackgroundWrapper} {
+		left: ${f/2}%;
+		width: ${f/2}%;
+	}
+`,De=r.default(O)`
+	.${m.rangeBackgroundWrapper} {
+		width: ${f/2}%;
+	}
+`,Le=r.default(C)``,Ne=r.default.div`
+	${$};
+
+	position: absolute;
+	left: 0;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+`,I=R.default.memo(({className:e,visible:t,onClick:s,zIndex:a=v.zIndex.modal,children:c})=>{const[p,u]=g.useState(!1),b=d=>{d.target===d.currentTarget&&(s==null||s())};return g.useEffect(()=>{let d;return t?u(!0):d=setTimeout(()=>u(!1),400),()=>{d!==void 0&&clearTimeout(d)}},[t]),P.useOverlayPreventScroll(t),p?o.jsxRuntimeExports.jsx(ge.Overlay,{className:e,visible:t,zIndex:a,onClick:b,children:c}):null}),k=e=>o.jsxRuntimeExports.jsx(y.FooterWrapper,{children:o.jsxRuntimeExports.jsx(x,{...e})}),T=e=>o.jsxRuntimeExports.jsx(y.FooterWrapper,{children:o.jsxRuntimeExports.jsxs("div",{className:"flex w-full gap-[10px]",children:[o.jsxRuntimeExports.jsx(x,{...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(x,{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,...t})=>{const s=g.useRef(null);return g.useEffect(()=>{var a;(a=s.current)==null||a.scroll(0,0)},[]),o.jsxRuntimeExports.jsx(y.ChildrenWrapper,{ref:s,...t,children:e})},j=({children:e})=>o.jsxRuntimeExports.jsx(y.HeaderWrapper,{children:e}),E=({visible:e,onMaskClick:t,className:s,zIndex:a=v.zIndex.modal,minHeight:c,children:p})=>{const[u,b]=g.useState(0),d=g.useCallback(()=>{b(window==null?void 0:window.innerHeight)},[]);return g.useEffect(()=>{d()},[d]),me(d),P.useOverlayPreventScroll(e),e?o.jsxRuntimeExports.jsx(I,{visible:e,className:s,onClick:t,zIndex:a,children:o.jsxRuntimeExports.jsx(y.ContentWrapper,{children:o.jsxRuntimeExports.jsx(y.Content,{visible:e,zIndex:a,minHeight:c,vh:u,children:p})})}):null},Pe=Object.assign(E,{SingleButton:k,DoubleButton:T,Body:S,Header:j}),Z=({children:e})=>o.jsxRuntimeExports.jsx(j,{children:o.jsxRuntimeExports.jsx(ye.NavigationWrapper,{children:e})}),He=e=>o.jsxRuntimeExports.jsx(Z,{children:o.jsxRuntimeExports.jsx(he.Navigation,{...e})}),ze=Object.assign(E,{Header:j,Navigation:He,Body:S,SingleButton:k,DoubleButton:T}),Ae=({title:e,subTitle:t,hasContentPadding:s=!0})=>o.jsxRuntimeExports.jsxs(w.TitleWrapper,{contentPadding:s,children:[e&&o.jsxRuntimeExports.jsx(q.Headline4,{children:e}),t&&o.jsxRuntimeExports.jsx(q.Title3,{className:H.cn("text-gray-400",w.className.subTitle),children:t})]}),Fe=e=>o.jsxRuntimeExports.jsx(w.ButtonMargin,{children:o.jsxRuntimeExports.jsx(k,{...e})}),Ue=e=>o.jsxRuntimeExports.jsx(w.ButtonMargin,{children:o.jsxRuntimeExports.jsx(T,{...e})}),Ge=Object.assign(E,{Header:j,Body:S,Title:Ae,SingleButton:Fe,DoubleButton:Ue}),J=r.default.div`
+	& > div > .select-box {
+		cursor: pointer;
+	}
+	position: relative;
+`,K=r.default.div`
+	position: absolute;
+	z-index: ${v.zIndex.basicLayer+1};
+	width: 100%;
+	height: max-content;
+
+	${l.Larger(i.css`
+		top: 70px;
+	`)}
+`,Q=r.default.div`
+	height: 80px;
+	pointer-events: none;
+`,X=r.default.div`
+	box-shadow: 0 2px 10px ${n.generateHexWithAlphaInLightMode(n.basicColors.black,"20%")};
+	background-color: ${n.basicColors.white};
+	border-radius: 10px;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	max-height: ${65*4.5}px;
+	overflow-y: scroll;
+`,Y=r.default.div`
+	width: 100%;
+	height: 50px;
+	padding: 15px 25px;
+	cursor: pointer;
+	${W.title2({color:n.basicColors.gray400})};
+	background-color: ${n.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: ${n.basicColors.gray25};
+	}
+
+	&:active {
+		background-color: ${n.basicColors.gray50};
+	}
+`,ee=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;
+`,te=r.default.div`
+	${l.Smaller(i.css`
+		display: none;
+	`)}
+`,oe=r.default.div`
+	${l.Larger(i.css`
+		display: none;
+	`)}
+`,Ve=Object.freeze(Object.defineProperty({__proto__:null,Desktop:te,IconWrapper:ee,Item:Y,ItemList:X,ItemListWrapper:K,ListBottomMargin:Q,Mobile:oe,Wrapper:J},Symbol.toStringTag,{value:"Module"})),re={Text:"chip-item-text"},M=38,Ze=r.default.span`
+	display: inline-flex;
+	min-width: max-content;
+	height: ${M}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:s})=>{const a=A(s),c=e?"disabled":"default",p=t?"on":"off";return i.css`
+			background-color: ${a[c][p].containerColor};
+			border: 1px solid ${a[c][p].borderColor};
+			.${re.Text} {
+				color: ${a[c][p].textColor};
+			}
+			svg > path {
+				fill: ${a[c][p].iconColor};
+			}
+		`}}
+
+	${({selected:e})=>!e&&i.css`
+			cursor: pointer;
+		`}
+`,Je=r.default.span`
+	cursor: pointer;
+	display: flex;
+`,ne={ControlIconContainer:2},_=M,Ke=25,Qe=n.basicColors.white,Xe=r.default.div`
+	display: flex;
+	align-items: center;
+	position: relative;
+	overflow: hidden;
+
+	width: 100%;
+`,Ye=r.default.div`
+	${ue.scrollStyle}
+
+	display: flex;
+	gap: 5px;
+	z-index: ${ne.ControlIconContainer-1};
+
+	${({hasIconArea:e})=>e&&i.css`
+			padding-left: ${_+8}px;
+		`}
+	padding-right: 20px;
+`,et=r.default.div`
+	cursor: pointer;
+	position: absolute;
+	left: 0;
+	top: 0;
+
+	z-index: ${ne.ControlIconContainer};
+
+	background-color: ${Qe};
+	width: ${_}px;
+	height: ${_}px;
+`,tt=r.default.div`
+	width: ${Ke}px;
+	height: 100%;
+
+	/* TODO: 컬러, 범위, 여백 수정 필요 */
+	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.01) 100%);
+
+	position: absolute;
+	left: ${_}px;
+	top: 0;
+`,ot=r.default.div`
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+
+	background: ${n.basicColors.gray50};
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	position: absolute;
+	left: 0;
+	top: 0;
+`,rt=r.default.div`
+	${({type:e,colorType:t})=>W.title4({color:N({type:e,colorType:t}).textColor})};
+	background-color: ${({type:e,colorType:t})=>N({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"};
+`,nt=r.default.div`
+	${l.Smaller(i.css`
+		padding: 25px 0;
+	`)}
+
+	${l.Larger(i.css`
+		padding: 80px 80px 25px;
+	`)}
+
+	/** deletePaddingTop = true 이면, 사용처 BasicLayout 에서 padding-top 관리 */
+
+	${({deletePaddingTop:e})=>e&&l.Smaller(i.css`
+			padding-top: 0px;
+		`)}
+
+	${({deletePaddingTop:e})=>e&&l.Larger(i.css`
+			padding-top: 0px;
+		`)}
+`,it=r.default.div`
+	padding: 0 20px;
+	margin-bottom: 15px;
+	${l.Larger(i.css`
+		padding: 0;
+	`)}
+`,ie=R.default.memo(({zIndex:e=v.zIndex.modal,visible:t,onMaskClick:s,children:a,className:c})=>o.jsxRuntimeExports.jsx(I,{className:c,visible:t,onClick:s,zIndex:e,children:o.jsxRuntimeExports.jsx(be.ModalContent,{visible:t,children:a})})),st=e=>o.jsxRuntimeExports.jsx(h.Footer,{children:o.jsxRuntimeExports.jsx(x,{...e})}),at=e=>o.jsxRuntimeExports.jsx(h.Footer,{children:o.jsxRuntimeExports.jsx(V,{...e})}),lt=({title:e,subTitle:t})=>o.jsxRuntimeExports.jsxs(h.Header,{children:[o.jsxRuntimeExports.jsx(q.Headline4,{children:e}),t&&o.jsxRuntimeExports.jsx(q.Title3,{className:"mt-[10px] text-center font-medium whitespace-pre-wrap text-gray-400",children:t})]}),ct=({children:e})=>o.jsxRuntimeExports.jsx(h.Comment,{children:e}),dt=({onClick:e,disabled:t,text:s})=>o.jsxRuntimeExports.jsx(h.LineButtonWrapper,{children:o.jsxRuntimeExports.jsx(xe.UnderLineMiniButton,{size:"m",colorType:"gray",onClick:e,disabled:t,children:s})}),pt=({children:e,hasContentPadding:t=!0})=>o.jsxRuntimeExports.jsx(h.Body,{contentPadding:t,children:e}),ut=R.default.memo(({children:e,...t})=>o.jsxRuntimeExports.jsx(ie,{...t,children:o.jsxRuntimeExports.jsx(h.Wrapper,{children:e})})),bt=Object.assign(ut,{SingleButton:st,DoubleButton:at,Title:lt,Body:pt,Comment:ct,UnderLineMiniButton:dt}),se="-55px",D="50px",L="25px",gt=i.keyframes`
+	0% {
+		bottom: ${se};
+	}
+	100% {
+		${l.Smaller(i.css`
+			bottom: ${L};
+		`)};
+		${l.Larger(i.css`
+			bottom: ${D};
+		`)};
+	}
+`,xt=i.keyframes`
+	0% {
+		${l.Smaller(i.css`
+			bottom: ${L};
+		`)};
+		${l.Larger(i.css`
+			bottom: ${D};
+		`)};
+	}
+	100% {
+		bottom: ${se};
+	}
+`,mt=e=>i.css`
+	visibility: ${e?"visible":"hidden"};
+	z-index: ${v.zIndex.basicLayer+11};
+	animation: ${e?gt:xt} 0.4s ease-out;
+	transition: all 0.4s ease-out;
+`,ht=r.default.div`
+	min-width: 320px;
+	max-width: max-content;
+
+	${l.Larger(i.css`
+		min-width: 440px;
+	`)}
+	height: 55px;
+	box-sizing: border-box;
+	background-color: ${n.generateHexWithAlphaInLightMode(n.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);
+	${l.Smaller(i.css`
+		bottom: ${L};
+	`)};
+	${l.Larger(i.css`
+		bottom: ${D};
+	`)};
+	${({visible:e})=>mt(e)};
+`,yt=r.default.div`
+	${W.typographyMap.title3};
+	color: ${n.basicColors.white};
+	width: 100%;
+`;exports.ActiveDateOfMonthWrapper=Oe;exports.Badge=qe;exports.BadgeContent=we;exports.BaseBottomSheet=Pe;exports.BaseBottomSheetBody=S;exports.BaseBottomSheetCTADoubleButton=T;exports.BaseBottomSheetCTASingleButton=k;exports.BaseBottomSheetComp=E;exports.BaseBottomSheetHeader=j;exports.BaseModal=ie;exports.BottomSheetNavigationTemplate=Z;exports.Button=x;exports.CHIP_ITEM_HEIGHT=M;exports.CancelIconWrapper=Je;exports.ChipListContainer=Ye;exports.CommonDateOfMonthSizeStyle=$;exports.CommonDateOfMonthWrapper=C;exports.Container=Ze;exports.Content=yt;exports.ControlIconCircleWrapper=ot;exports.ControlIconContainer=et;exports.ControlIconGradientBackground=tt;exports.DayOfWeekItemWrapper=Le;exports.Desktop=te;exports.DisabledDateOfMonthWrapper=Ie;exports.Dot=Be;exports.Dot$1=Se;exports.DoubleButton=V;exports.IconWrapper=ee;exports.ImageWrapper=it;exports.InnerWrapper=We;exports.InnerWrapper$1=Ne;exports.Input=Te;exports.Item=Y;exports.ItemList=X;exports.ItemListWrapper=K;exports.ListBottomMargin=Q;exports.Mobile=oe;exports.MobileWrapper=ve;exports.Modal=bt;exports.NavBottomSheet=ze;exports.NoneDateOfMonthWrapper=Re;exports.OutterContainer=Xe;exports.OverlayRoot=I;exports.PcWrapper=Ce;exports.Progress=ke;exports.ProgressBar=_e;exports.RangeBackgroundWrapper=Ee;exports.RangeEndFocusDateOfMonthWrapper=De;exports.RangeStartFocusDateOfMonthWrapper=Me;exports.SingleFocusDateOfMonthWrapper=O;exports.Spinner=U;exports.TitleBottomSheet=Ge;exports.Toast=ht;exports.Wrapper=J;exports.Wrapper$1=rt;exports.Wrapper$2=nt;exports.buttonVariants=G;exports.chipColorStyle=A;exports.className=re;exports.className$1=m;exports.index_styled=Ve;

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

@@ -0,0 +1,76 @@
+import { css as o } from "@emotion/react";
+import i from "@emotion/styled";
+import { typographyMap as a } from "../core/TextStyles/index.es.js";
+import { basicColors as e } from "../core/Colors/index.es.js";
+import { INPUT_HEIGHT as n, INNER_POSITION_LEFT as p, INNER_POSITION_TOP as l, INNER_POSITION_BOTTOM as r } from "../components/Input/common/InputFrame/constant.es.js";
+import { b as d, N as b } from "./index.styled.DmJ27_dc.js";
+const s = i.input`
+	${a.title1};
+
+	box-sizing: border-box;
+	width: 100%;
+	height: ${n}px;
+
+	padding-left: ${p}px;
+
+	${({ hasLabel: t }) => t ? o`
+					padding-top: ${l.hasLabel}px;
+					padding-bottom: ${r.hasLabel}px;
+				` : o`
+					padding-bottom: ${r.noLabel}px;
+				`};
+
+	color: ${e.gray900};
+	transition: all 0.2s;
+	border: none;
+	background-color: transparent;
+	-webkit-appearance: none;
+
+	&::-webkit-date-and-time-value {
+		text-align: initial;
+	}
+
+	&::-webkit-outer-spin-button,
+	&::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	${({ decoration: t }) => t ? o`
+					border-top-left-radius: 10px;
+					border-bottom-left-radius: 10px;
+				` : o`
+					border-radius: 10px;
+				`}
+
+	&:disabled {
+		color: ${d};
+		-webkit-text-fill-color: ${e.gray200};
+		opacity: 1;
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&::placeholder {
+		${({ hasLabel: t }) => b({ hasLabel: t })}
+	}
+`, c = i.div`
+	height: 100%;
+	display: flex;
+	align-items: center;
+	padding-right: 15px;
+	border-top-right-radius: 10px;
+	border-bottom-right-radius: 10px;
+	background-color: ${({ disabled: t }) => t ? e.gray25 : e.white};
+`, h = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  DecorationItemWrapper: c,
+  InputTag: s
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  c as D,
+  s as I,
+  h as i
+};

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

@@ -0,0 +1,83 @@
+import { css as t } from "@emotion/react";
+import a from "@emotion/styled";
+import { typographyMap as e } from "../core/TextStyles/index.es.js";
+import { basicColors as o, generateHexWithAlphaInLightMode as i } from "../core/Colors/index.es.js";
+import { INPUT_HEIGHT as d, INNER_POSITION_LEFT as p, INNER_POSITION_TOP as l } from "../components/Input/common/InputFrame/constant.es.js";
+const b = ({ hasLabel: r }) => t`
+	${e.title1}
+
+	position: absolute;
+	top: ${r ? l.hasLabel : l.noLabel}px;
+	left: ${p}px;
+	color: ${o.gray100};
+`, s = o.gray200, x = a.div`
+	width: 100%;
+	height: ${d}px;
+	position: relative;
+	box-sizing: border-box;
+	background-color: ${o.white};
+	border: 1px solid ${({ active: r }) => r ? o.gray600 : o.gray50};
+	border-radius: 10px;
+	display: flex;
+	align-items: center;
+
+	${({ error: r }) => r && t`
+			border: 1px solid ${o.red400};
+		`}
+
+	${({ active: r }) => r && t`
+			box-shadow: 0 2px 5px ${i(o.gray900, "10%")};
+		`}
+
+	${({ disabled: r, error: n }) => n ? null : r ? t`
+						background-color: ${o.gray25};
+						color: ${s};
+					` : t`
+						&:hover {
+							border: 1px solid ${o.gray600};
+							box-shadow: 0 2px 5px ${i(o.gray900, "10%")};
+						}
+						&:focus {
+							border: 1px solid ${o.gray600};
+							outline: none;
+						}
+					`};
+`, $ = a.label`
+	position: absolute;
+	color: ${o.gray200};
+	left: ${p}px;
+	pointer-events: none;
+	transition-property: font-size, transform;
+	transition-duration: 0.4s;
+
+	${({ active: r }) => r ? t`
+					top: 11px;
+					${e.body2}
+				` : t`
+					bottom: 50%;
+					transform: translate(0%, 50%);
+					${e.title1}
+				`};
+`, c = a.div`
+	bottom: 0px;
+	position: relative;
+	${e.body2};
+	color: ${o.red400};
+	margin-top: 10px;
+	left: 5px;
+`, h = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ErrorText: c,
+  InputDisabledTextColor: s,
+  InputLabel: $,
+  InputWrapper: x,
+  NotActivePlaceholderOrLabelStyle: b
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  c as E,
+  x as I,
+  b as N,
+  $ as a,
+  s as b,
+  h as i
+};