kku-ui 0.2.1 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Binary file
Binary file
package/lib/index.css CHANGED
@@ -1 +1 @@
1
- @font-face{font-family:Pretendard;src:local("Pretendard Medium"),url("fonts/pretendard/Pretendard-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Pretendard;src:local("Pretendard Regular"),url("fonts/pretendard/Pretendard-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Pretendard;src:local("Pretendard Bold"),url("fonts/pretendard/Pretendard-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}:root{--kku-gray-color-100: #ededed;--kku-gray-color-200: #e3e3e3;--kku-gray-color-300: #c6c6c6;--kku-gray-color-400: #474747;--kku-gray-color-500: #404040;--kku-gray-color-600: #393939;--kku-gray-color-700: #353535;--kku-gray-color-800: #2b2b2b;--kku-gray-color-900: #202020;--kku-slate-color-100: #f7f8fb;--kku-slate-color-200: #f3f5f8;--kku-slate-color-300: #e7ebf1;--kku-slate-color-400: #b0bdd2;--kku-slate-color-500: #9eaabd;--kku-slate-color-600: #8d97a8;--kku-slate-color-700: #848e9e;--kku-slate-color-800: #6a717e;--kku-slate-color-900: #4f555e;--kku-blue-color-100: #e6effc;--kku-blue-color-200: #d9e7fa;--kku-blue-color-300: #b0cdf5;--kku-blue-color-400: #005ee0;--kku-blue-color-500: #0055ca;--kku-blue-color-600: #004bb3;--kku-blue-color-700: #0047a8;--kku-blue-color-800: #003886;--kku-blue-color-900: #002a65;--kku-green-color-100: #F1FEEE;--kku-green-color-200: #EAFFEE;--kku-green-color-300: #D4FFCB;--kku-green-color-400: #0f6bff;--kku-green-color-500: #68E64E;--kku-green-color-600: #5CCC46;--kku-green-color-700: #58BF41;--kku-green-color-800: #459934;--kku-green-color-900: #347327;--kku-orange-color-100: #FEF4E8;--kku-orange-color-200: #FEF0DD;--kku-orange-color-300: #FDDEB8;--kku-orange-color-400: #F7931A;--kku-orange-color-500: #DE8417;--kku-orange-color-600: #C67615;--kku-orange-color-700: #B96E14;--kku-orange-color-800: #945810;--kku-orange-color-900: #6F420C;--kku-red-color-100: #FEE6E6;--kku-red-color-200: #fdd9d9;--kku-red-color-300: #fbb1b1;--kku-red-color-400: #F10404;--kku-red-color-500: #D90404;--kku-red-color-600: #C10303;--kku-red-color-700: #B50303;--kku-red-color-800: #910202;--kku-red-color-900: #6C0202;--kku-white-color: #ffffff;--kku-black-color: #000000;--kku-white-hover-dim: rgba(255, 255, 255, .16);--kku-white-active-dim: rgba(255, 255, 255, .24);--kku-black-hover-dim: rgba(0, 0, 0, .16);--kku-black-active-dim: rgba(0, 0, 0, .24);--kku-text-size-xlarge: 24px;--kku-text-size-large: 18px;--kku-text-size-medium: 16px;--kku-text-size-small: 14px;--kku-text-size-xsmall: 12px;--kku-text-size-xxsmall: 10px;--kku-line-height-xlarge: 26px;--kku-line-height-large: 20px;--kku-line-height-medium: 18px;--kku-line-height-small: 16px;--kku-line-height-xsize: 14px;--kku-line-height-xxsmall: 12px;--kku-spacing-2: 2px;--kku-spacing-4: 4px;--kku-spacing-6: 6px;--kku-spacing-8: 8px;--kku-spacing-10: 10px;--kku-spacing-12: 12px;--kku-spacing-14: 14px;--kku-spacing-16: 16px;--kku-spacing-20: 20px;--kku-spacing-24: 24px;--kku-spacing-28: 28px;--kku-spacing-32: 32px;--kku-spacing-36: 36px;--kku-spacing-40: 40px;--kku-spacing-44: 44px;--kku-spacing-48: 48px;--kku-spacing-52: 52px;--kku-spacing-56: 56px;--kku-spacing-60: 60px;--kku-spacing-64: 64px;--kku-spacing-68: 68px;--kku-spacing-72: 72px;--kku-spacing-76: 76px;--kku-spacing-80: 80px;--kku-border-radius-default: 3px;--kku-bottom-sheet-border-radius: 16px;--kku-default-font-family: "Pretendard", "Arial", sans-serif;--kku-z-idnex-0: 0;--kku-z-idnex-1: 1;--kku-z-idnex-10: 10;--kku-z-idnex-100: 100;--kku-z-idnex-200: 200;--kku-z-idnex-500: 500;--kku-z-idnex-1000: 1000;--kku-z-idnex-1001: 1001;--kku-z-idnex-2000: 2000;--kku-z-idnex-2001: 2001;--kku-z-idnex-5000: 5000;--kku-z-idnex-9999: 9999;--kku-box-shadow-default: rgba(0, 0, 0, .2) 0px 12px 28px 0px, rgba(0, 0, 0, .1) 0px 2px 4px 0px, rgba(255, 255, 255, .05) 0px 0px 0px 1px inset}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;font-family:var(--kku-default-font-family)}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}:root{--kku-text-color-default: var(--kku-gray-color-900);--kku-text-color-hover: var(--kku-gray-color-900);--kku-text-color-disabled: var(--kku-slate-color-400);--kku-text-color-link: var(--kku-blue-color-400);--kku-text-color-label: var(--kku-slate-color-800);--kku-text-color-placeholder: var(--kku-slate-color-800);--kku-border-color-default: var(--kku-slate-color-500);--kku-border-color-hover: var(--kku-slate-color-800);--kku-border-color-disabled: var(--kku-slate-color-400);--kku-background-color-default: var(--kku-white-color);--kku-background-color-hover: var(--kku-slate-color-100);--kku-background-color-disabled: var(--kku-slate-color-100);--kku-backdrop-background-color-light: var(--kku-black-color);--kku-backdrop-background-color-dark: var(--kku-slate-color-200);--kku-ripple-background-color: var(--kku-gray-color-500);--kku-primary-color-default: var(--kku-blue-color-400);--kku-primary-color-hover: var(--kku-blue-color-500);--kku-primary-color-disabled: var(--kku-blue-color-800);--kku-success-color-default: var(--kku-green-color-600);--kku-success-color-hover: var(--kku-green-color-700);--kku-success-color-disabled: var(--kku-green-color-800);--kku-warning-color-default: var(--kku-orange-color-400);--kku-warning-color-hover: var(--kku-orange-color-500);--kku-warning-color-disabled: var(--kku-orange-color-800);--kku-error-color-default: var(--kku-red-color-600);--kku-error-color-hover: var(--kku-red-color-700);--kku-error-color-disabled: var(--kku-red-color-800);--kku-focus-visible-color: var(--kku-blue-color-400);--kku-element-height-medium: 36px;--kku-element-height-small: 28px;--kku-modal-content-z-index: var(--kku-z-idnex-1001);--kku-bottom-sheet-z-index: var(--kku-z-idnex-1001);--kku-full-screen-loader-z-index: var(--kku-z-idnex-1001)}:root .dark{--kku-text-color-link: var(--kku-blue-color-400);--kku-border-color-default: var(--kku-slate-color-700);--kku-border-color-hover: var(--kku-slate-color-700);--kku-border-color-disabled: var(--kku-slate-color-700);--kku-background-color-default: var(--kku-slate-color-900);--kku-background-color-hover: var(--kku-slate-color-800);--kku-background-color-disabled: var(--kku-slate-color-800);--kku-ripple-background-color: var(--kku-slate-color-300)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes wave{0%{left:-150px}to{left:100%}}.k-button{position:relative;display:inline-flex;justify-content:center;align-items:center;margin:0;border-width:1px;border-style:solid;border-radius:var(--kku-border-radius-default);cursor:pointer;overflow:hidden;user-select:none;font-family:var(--kku-default-font-family);transition:.16s ease;transition-property:background,border-color}.k-button:focus-visible{outline:2px solid var(--kku-focus-visible-color);outline-offset:var(--kku-spacing-2);border-radius:var(--kku-border-radius-default);z-index:1}.k-button+.k-button{margin-left:var(--kku-spacing-8)}.k-button.k-button--disabled{cursor:not-allowed}.k-button.k-button--outlined{color:var(--kku-text-color-default);border-color:var(--kku-border-color-default);background:var(--kku-background-color-default)}.k-button.k-button--outlined:hover:not(.k-button--disabled){border-color:var(--kku-slate-color-700);background:var(--kku-background-color-hover)}.k-button.k-button--outlined.k-button--disabled{color:var(--kku-text-color-disabled);border-color:var(--kku-border-color-disabled);background:var(--kku-background-color-disabled)}.k-button.k-button--solid{color:var(--kku-white-color);border:none;background-color:var(--kku-black-color)}.k-button.k-button--solid:hover:not(.k-button--disabled){background:linear-gradient(0deg,#ffffff26 0% 100%),var(--kku-black-color)}.k-button.k-button--solid.k-button--disabled{color:var(--kku-slate-color-500);border-color:var(--kku-slate-color-900);background:var(--kku-slate-color-900)}.k-button.k-button--primary{color:var(--kku-white-color);border-color:var(--kku-primary-color-default);background-color:var(--kku-primary-color-default)}.k-button.k-button--primary:hover{color:var(--kku-white-color);border-color:var(--kku-primary-color-hover);background-color:var(--kku-primary-color-hover)}.k-button.k-button--primary.k-button--disabled{color:var(--kku-slate-color-300);border-color:var(--kku-primary-color-disabled);background-color:var(--kku-primary-color-disabled)}.k-button.k-button--subtle{color:var(--kku-text-color-default);border-color:var(--kku-slate-color-200);background:var(--kku-slate-color-200)}.k-button.k-button--subtle:hover:not(.k-button--disabled){border-color:var(--kku-slate-color-300);background:var(--kku-slate-color-300)}.k-button.k-button--subtle.k-button--disabled{color:var(--kku-slate-color-600)}.k-button.k-button--plain{color:var(--kku-text-color-default);border-color:transparent;background:transparent}.k-button.k-button--plain:hover{color:var(--kku-text-color-hover)}.k-button.k-button--plain.k-button--disabled{color:var(--kku-text-color-disabled)}.k-button.k-button--danger.k-button--outlined{color:var(--kku-error-color-default);border-color:var(--kku-error-color-default);background-color:var(--kku-background-color-default)}.k-button.k-button--danger.k-button--outlined:hover{color:var(--kku-error-color-hover);border-color:var(--kku-error-color-hover);background-color:var(--kku-background-color-default)}.k-button.k-button--danger.k-button--outlined.k-button--disabled{border-color:var(--kku-error-color-disabled);background-color:var(--kku-background-color-disabled)}.k-button.k-button--danger.k-button--solid,.k-button.k-button--danger.k-button--primary,.k-button.k-button--danger.k-button--subtle{color:var(--kku-white-color);border-color:var(--kku-error-color-default);background-color:var(--kku-error-color-default)}.k-button.k-button--danger.k-button--solid:hover,.k-button.k-button--danger.k-button--primary:hover,.k-button.k-button--danger.k-button--subtle:hover{border-color:var(--kku-error-color-hover);background-color:var(--kku-error-color-hover)}.k-button.k-button--danger.k-button--solid.k-button--disabled,.k-button.k-button--danger.k-button--primary.k-button--disabled,.k-button.k-button--danger.k-button--subtle.k-button--disabled{color:var(--kku-text-color-disabled);border-color:var(--kku-error-color-disabled);background-color:var(--kku-error-color-disabled)}.k-button.k-button--danger.k-button--plain{color:var(--kku-error-color-default)}.k-button.k-button--danger.k-button--plain:hover{color:var(--kku-error-color-hover)}.k-button.k-button--danger.k-button--plain.k-button--disabled{color:var(--kku-error-color-disabled)}.k-button.k-button--small{height:30px;padding:0 var(--kku-spacing-12);font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-button.k-button--medium{height:36px;padding:0 var(--kku-spacing-20);font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-button-group{white-space:nowrap}.k-button-group .k-button:first-child{border-top-left-radius:var(--kku-border-radius-default);border-bottom-left-radius:var(--kku-border-radius-default)}.k-button-group .k-button:last-child{border-top-right-radius:var(--kku-border-radius-default);border-bottom-right-radius:var(--kku-border-radius-default);margin-right:-1px}.k-button-group .k-button{margin-left:0;margin-right:-1px;border-radius:0}.k-button-group .k-button--primary,.k-button-group .k-button--subtle{border:none}.k-button-group .k-button+.k-button{margin-right:-1px}.k-button-group .k-button.k-button--outlined:hover{z-index:1}.k-toggle-button{white-space:nowrap}.k-toggle-button .k-button:first-child{border-top-left-radius:var(--kku-border-radius-default);border-bottom-left-radius:var(--kku-border-radius-default)}.k-toggle-button .k-button:last-child{border-top-right-radius:var(--kku-border-radius-default);border-bottom-right-radius:var(--kku-border-radius-default);margin-right:-1px}.k-toggle-button .k-button{margin-left:0;margin-right:-1px;border-radius:0}.k-toggle-button .k-button--selected.k-button--outlined,.k-toggle-button .k-button--selected.k-button--outlined:hover{background:var(--kku-gray-color-200)}.k-toggle-button .k-button--selected.k-button--solid,.k-toggle-button .k-button--selected.k-button--solid:hover{background:var(--kku-gray-color-400)}.k-toggle-button .k-button--selected.k-button--primary,.k-toggle-button .k-button--selected.k-button--primary:hover{background:var(--kku-blue-color-800)}.k-toggle-button .k-button--selected.k-button--subtle,.k-toggle-button .k-button--selected.k-button--subtle:hover{background:var(--kku-gray-color-200)}.k-toggle-button .k-button--selected.k-button--plain{font-weight:700}.k-toggle-button .k-button--primary,.k-toggle-button .k-button--subtle{border:none}.k-toggle-button .k-button+.k-button{margin-right:-1px}.k-toggle-button .k-button.k-button--outlined:hover{z-index:1}.k-switch{position:relative;display:inline-flex;justify-content:flex-start;align-items:center;border:none;outline:0;width:50px;height:24px;transition:.16s ease;transition-property:background;cursor:pointer}.k-switch:focus-visible{outline:2px solid var(--kku-focus-visible-color);outline-offset:var(--kku-spacing-2);border-radius:var(--kku-border-radius-default);z-index:1}.k-switch .k-switch__toggle{position:absolute;top:3px;left:3px;border-radius:50%;background:var(--kku-white-color);transition:left .24s ease}.k-switch.k-switch--small{width:44px;height:26px;border-radius:13px}.k-switch.k-switch--small .k-switch__toggle{width:20px;height:20px}.k-switch.k-switch--medium{width:52px;height:30px;border-radius:15px}.k-switch.k-switch--medium .k-switch__toggle{width:24px;height:24px}.k-switch.k-switch--on{background:var(--kku-primary-color-default)}.k-switch.k-switch--on:hover:not(.k-switch--disabled){background:var(--kku-blue-color-500)}.k-switch.k-switch--on.k-switch--small .k-switch__toggle{left:calc(100% - 23px)}.k-switch.k-switch--on.k-switch--medium .k-switch__toggle{left:calc(100% - 27px)}.k-switch.k-switch--off{background:var(--kku-slate-color-400)}.k-switch.k-switch--off:hover:not(.k-switch--disabled){background:var(--kku-slate-color-500)}.k-switch.k-switch--disabled{cursor:not-allowed;background:var(--kku-background-color-disabled)}.k-switch.k-switch--disabled .k-switch__toggle{background:var(--kku-slate-color-300)}.k-accordion{color:var(--kku-text-color-default);border-bottom:1px solid var(--kku-slate-color-400)}.k-accordion[data-open=true] .k-accordion__summary__icon{transform:rotate(180deg)}.k-accordion .k-accordion__summary{display:flex;justify-content:space-between;align-items:center;list-style-type:none;user-select:none;cursor:pointer;transition:.16s ease;transition-property:background,border-bottom-color}.k-accordion .k-accordion__summary:focus-visible{outline:2px solid var(--kku-focus-visible-color);outline-offset:var(--kku-spacing-2);border-radius:var(--kku-border-radius-default);z-index:1}.k-accordion .k-accordion__summary::-webkit-details-marker{display:none}.k-accordion .k-accordion__summary .k-accordion__summary__text{font-size:inherit}.k-accordion .k-accordion__summary .k-accordion__summary__icon{transition:.16s ease;transition-duration:.2s;transition-property:transform}.k-accordion .k-accordion__content{transition:.16s ease;transition-duration:.2s;transition-property:max-height;background-color:var(--white-color);overflow:hidden}.k-accordion.k-accordion--small{width:100%;max-width:480px;font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-accordion.k-accordion--small .k-accordion__summary,.k-accordion.k-accordion--small .k-accordion__content>.k-accordion__content__container{padding:var(--kku-spacing-8) var(--kku-spacing-2)}.k-accordion.k-accordion--medium{width:100%;max-width:640px;font-size:var(--kku-text-size-medium);line-height:var(--kku-line-height-medium)}.k-accordion.k-accordion--medium .k-accordion__summary,.k-accordion.k-accordion--medium .k-accordion__content>.k-accordion__content__container{padding:var(--kku-spacing-12) var(--kku-spacing-2)}.k-menu{display:inline-flex;flex-direction:column;border:1px solid var(--kku-border-color-default);border-radius:var(--kku-border-radius-default);padding:0;margin:0}.k-menu.k-menu--small{width:120px}.k-menu.k-menu--medium{width:164px}.k-menu .k-menu-item:first-child{border-top-right-radius:calc(var(--kku-border-radius-default) - 1px);border-top-left-radius:calc(var(--kku-border-radius-default) - 1px)}.k-menu .k-menu-item:last-child{border-bottom-right-radius:calc(var(--kku-border-radius-default) - 1px);border-bottom-left-radius:calc(var(--kku-border-radius-default) - 1px)}.k-menu-item{position:relative;display:flex;justify-content:flex-start;align-items:center;border:none;outline:0;width:100%;background:var(--kku-white-color);overflow:hidden;cursor:pointer;transition:.16s ease;transition-property:background}.k-menu-item:after{position:absolute;top:0;left:0;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid var(--kku-primary-color-default);z-index:1}.k-menu-item:focus-visible:after{content:""}.k-menu-item:hover:not(.k-menu-item--disabled){background:var(--kku-slate-color-200)}.k-menu-item .k-menu-item__left-content,.k-menu-item .k-menu-item__right-content{display:inline-flex;justify-content:center;align-items:center}.k-menu-item .k-menu-item__label{flex:1 1 auto;text-align:left;color:var(--kku-text-color-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.k-menu-item .k-menu-item__shortcut{display:flex;justify-content:center;align-items:center;border-radius:var(--kku-border-radius-default);background:var(--kku-slate-color-200);color:var(--kku-slate-color-900)}.k-menu-item.k-menu-item--small{height:30px;padding:0 var(--kku-spacing-12);font-size:var(--kku-text-size-xsmall);line-height:var(--kku-line-height-xsmall)}.k-menu-item.k-menu-item--small .k-menu-item__left-content{margin-right:var(--kku-spacing-4)}.k-menu-item.k-menu-item--small .k-menu-item__shortcut{font-size:var(--kku-text-size-xxsmall);line-height:var(--kku-line-height-xxsmall);padding:1px var(--kku-spacing-2)}.k-menu-item.k-menu-item--small .k-menu-item__right-content{margin-left:var(--kku-spacing-4)}.k-menu-item.k-menu-item--medium{height:36px;padding:0 var(--kku-spacing-12);font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-menu-item.k-menu-item--medium .k-menu-item__left-content{margin-right:var(--kku-spacing-6)}.k-menu-item.k-menu-item--medium .k-menu-item__shortcut{font-size:var(--kku-text-size-xsmall);line-height:var(--kku-line-height-xsmall);padding:0 var(--kku-spacing-4)}.k-menu-item.k-menu-item--medium .k-menu-item__right-content{margin-left:var(--kku-spacing-6)}.k-menu-item.k-menu-item--disabled{cursor:not-allowed}.k-menu-item.k-menu-item--disabled .k-menu-item__label,.k-menu-item.k-menu-item--disabled .k-menu-item__shortcut{color:var(--kku-text-color-disabled)}.k-menu-item.k-menu-item-selectable.k-menu-item--small{padding-left:var(--kku-spacing-12)}.k-menu-item.k-menu-item-selectable.k-menu-item--small .k-menu-item__left-content{margin-right:0}.k-menu-item.k-menu-item-selectable.k-menu-item--small.k-menu-item-selectable--selected{padding-left:var(--kku-spacing-2)}.k-menu-item.k-menu-item-selectable.k-menu-item--medium{padding-left:var(--kku-spacing-12)}.k-menu-item.k-menu-item-selectable.k-menu-item--medium .k-menu-item__left-content{margin-right:0}.k-menu-item.k-menu-item-selectable.k-menu-item--medium.k-menu-item-selectable--selected{padding-left:var(--kku-spacing-2)}.k-menu-item.k-menu-item-selectable.k-menu-item-selectable--selected{background:var(--kku-slate-color-300)}.k-menu-item-divider{background:var(--kku-slate-color-300);height:1px;margin:var(--kku-spacing-6) var(--kku-spacing-12)}.k-skeleton{position:relative;display:inline-block;background-color:var(--kku-slate-color-300);border-radius:var(--kku-border-radius-default);overflow:hidden}.k-skeleton--pulse{animation:pulse 1.6s ease-in-out infinite}.k-skeleton--wave:after{content:"";position:absolute;top:0;left:-150px;height:100%;width:25%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.56),transparent);animation:wave 1.6s linear infinite}.dark .k-skeleton{background-color:red}.k-dropdown{display:inline-flex}.k-dropdown .k-dropdown__trigger{display:inline-flex;justify-content:center;align-items:center}.k-dropdown .k-dropdown__trigger:focus-visible{outline:2px solid var(--kku-focus-visible-color);outline-offset:var(--kku-spacing-2);border-radius:var(--kku-border-radius-default);z-index:1}.k-dropdown .k-dropdown__trigger.k-dropdown__trigger--disabled{cursor:not-allowed}.k-dropdown .k-dropdown__content:focus-visible{outline:0}.k-backdrop{position:fixed;top:0;left:0;width:100dvw;height:100dvh;background-color:#0000007a;z-index:10}.k-backdrop .k-backdrop__container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.k-backdrop .k-backdrop__container:focus-visible{outline:2px solid var(--kku-focus-visible-color);outline-offset:-2px;z-index:1}.k-backdrop .k-backdrop__container~*{z-index:11}.dark .k-backdrop{background-color:#ffffff7a}.k-modal{position:fixed;display:flex;flex-direction:column;width:100%;color:var(--kku-text-color-default);border-radius:var(--kku-border-radius-default);background-color:var(--kku-background-color-default);box-shadow:var(--kku-box-shadow-default);z-index:var(--kku-modal-content-z-index);overflow:hidden}.k-modal.k-modal--small{max-width:640px;height:400px}.k-modal.k-modal--medium{max-width:800px;height:460px}.k-modal.k-modal--large{max-width:1040px;height:600px}.k-modal .k-modal__header{display:flex;justify-content:flex-start;align-items:center;flex:0 0 44px;width:100%;padding:var(--kku-spacing-12) var(--kku-spacing-16);border-bottom:1px solid var(--kku-slate-color-300);font-size:var(--kku-text-size-large);line-height:var(--kku-line-height-large)}.k-modal .k-modal__content{flex:1 1 100%;padding:var(--kku-spacing-12) var(--kku-spacing-16);font-size:var(--kku-text-size-medium);line-height:var(--kku-line-height-medium);overflow:auto}.k-modal.k-modal__container--no-title .k-modal__content{padding:var(--kku-spacing-16)}.k-modal .k-modal__footer{display:flex;justify-content:center;align-items:center;flex:1 1 0;padding:0 var(--kku-spacing-16) var(--kku-spacing-12) var(--kku-spacing-16)}.k-modal .k-modal__footer.k-modal__footer--left{justify-content:flex-start}.k-modal .k-modal__footer.k-modal__footer--center{justify-content:center}.k-modal .k-modal__footer.k-modal__footer--right{justify-content:flex-end}@media screen and (max-width: 1040px){.k-modal.k-modal--large{max-width:calc(100dvw - var(--kku-spacing-32))}}@media screen and (max-width: 800px){.k-modal.k-modal--medium{max-width:calc(100dvw - var(--kku-spacing-24))}}@media screen and (max-width: 640px){.k-modal.k-modal--small{max-width:calc(100dvw - var(--kku-spacing-16))}}.k-spinner{padding:var(--kku-spacing-4)}.k-spinner .k-spinner__body{animation:spin .96s cubic-bezier(.5,.1,.5,.9) infinite}.k-spinner .k-spinner__body .k-spinner__body__circle{color:var(--kku-slate-color-300)}.k-spinner.k-spinner--small{width:32px;height:32px}.k-spinner.k-spinner--medium{width:48px;height:48px}.dark .k-spinner .k-spinner__body .k-spinner__body__circle{color:var(--kku-slate-color-600)}.k-icon{display:inline-flex;justify-content:center;align-items:center;color:var(--kku-gray-color-600);fill:var(--kku-gray-color-600);user-select:none}.k-icon.k-icon--clickable{cursor:pointer}.k-icon.k-icon--disabled{color:var(--kku-text-color-disabled);fill:var(--kku-text-color-disabled);cursor:not-allowed}.k-icon.k-icon--xlarge{width:28px;height:28px}.k-icon.k-icon--large{width:24px;height:24px}.k-icon.k-icon--medium{width:20px;height:20px}.k-icon.k-icon--small{width:16px;height:16px}.k-icon.k-icon--xsmall{width:12px;height:12px}.k-icon svg{width:100%;height:100%}.dark .k-icon{color:var(--kku-gray-color-300);fill:var(--kku-gray-color-300)}.dark .k-icon.k-icon--disabled{color:var(--kku-text-color-disabled);fill:var(--kku-text-color-disabled)}.k-dropdown.k-select{position:relative;display:inline-flex;flex-direction:column;cursor:pointer;user-select:none}.k-dropdown.k-select .k-select__fieldset{display:inline-flex;justify-content:flex-start;align-items:center;width:100%;color:var(--kku-text-color-label);min-inline-size:0;outline:0;border:1px solid var(--kku-border-color-default);border-radius:var(--kku-border-radius-default);transition:.16s ease;transition-property:border-color}.k-dropdown.k-select .k-select__fieldset:hover{border-color:var(--kku-border-color-hover)}.k-dropdown.k-select .k-select__fieldset:hover .k-select__fieldset__legend{color:var(--kku-text-color-default)}.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__legend{display:flex;justify-content:flex-start;align-items:center;height:16px;color:var(--kku-text-color-label);transition:.16s ease;transition-property:color;z-index:0}.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__legend.k-select__fieldset__legend--show{padding:0 var(--kku-spacing-2)}.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__legend .k-select__fieldset__legend__required{margin-left:var(--kku-spacing-2);color:var(--kku-error-color-default);transition:.16s ease;transition-property:color}.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__container{position:relative;width:100%;overflow:hidden}.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__value,.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__placeholder{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__value{color:var(--kku-text-color-default)}.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__placeholder{color:var(--kku-text-color-placeholder)}.k-dropdown.k-select .k-select__trigger{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}.k-dropdown.k-select .k-select__trigger:focus-visible:not(.k-select--disabled){outline:0}.k-dropdown.k-select .k-select__trigger:focus-visible:not(.k-select--disabled) .k-select__fieldset{outline:none;border-color:var(--kku-focus-visible-color)}.k-dropdown.k-select .k-select__trigger:focus-visible:not(.k-select--disabled) .k-select__fieldset .k-select__fieldset__legend{color:var(--kku-focus-visible-color)}.k-dropdown.k-select .k-select__trigger:focus-visible:not(.k-select--disabled) .k-select__fieldset .k-select__fieldset__legend .k-select__fieldset__legend__required{color:var(--kku-focus-visible-color)}.k-dropdown.k-select.k-select--error .k-select__fieldset{border-color:var(--kku-error-color-default)}.k-dropdown.k-select.k-select--error .k-select__fieldset .k-select__fieldset__legend,.k-dropdown.k-select.k-select--error .k-select__fieldset .k-select__fieldset__legend .k-select__fieldset__legend__required{color:var(--kku-error-color-default)}.k-dropdown.k-select .k-select__fieldset__message{padding:var(--kku-spacing-4) 0 0 var(--kku-spacing-4);color:var(--kku-error-color-default)}.k-dropdown.k-select .k-select__fieldset__container{display:flex;align-items:center;height:100%}.k-dropdown.k-select.k-select--small{width:140px}.k-dropdown.k-select.k-select--small .k-select__fieldset{height:38px}.k-dropdown.k-select.k-select--small .k-select__fieldset .k-select__fieldset__legend{margin-left:var(--kku-spacing-10);font-size:var(--kku-text-size-xsmall);line-height:var(--kku-line-height-xsmall)}.k-dropdown.k-select.k-select--small .k-select__fieldset .k-select__fieldset__container{height:30px;padding:0 var(--kku-spacing-8);margin-top:-8px;font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-dropdown.k-select.k-select--small .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__left{margin-left:var(--kku-spacing-8)}.k-dropdown.k-select.k-select--small .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__right,.k-dropdown.k-select.k-select--small .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__icon{flex:0 0 var(--kku-text-size-medium);margin-right:var(--kku-spacing-8)}.k-dropdown.k-select.k-select--small .k-select__fieldset__message{font-size:var(--kku-text-size-xsmall);line-height:var(--kku-line-height-xsmall)}.k-dropdown.k-select.k-select--medium{width:180px}.k-dropdown.k-select.k-select--medium .k-select__fieldset{height:44px}.k-dropdown.k-select.k-select--medium .k-select__fieldset .k-select__fieldset__legend{margin-left:var(--kku-spacing-12);font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-dropdown.k-select.k-select--medium .k-select__fieldset .k-select__fieldset__container{height:36px;padding:0 var(--kku-spacing-10);margin-top:-8px;font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-dropdown.k-select.k-select--medium .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__right,.k-dropdown.k-select.k-select--medium .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__icon{flex:0 0 var(--kku-text-size-large);margin-right:var(--kku-spacing-10)}.k-dropdown.k-select.k-select--medium .k-select__fieldset__message{font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-dropdown.k-select.k-select--disabled{cursor:not-allowed}.k-dropdown.k-select.k-select--disabled .k-select__fieldset{border-color:var(--kku-border-color-disabled);background:var(--kku-background-color-disabled)}.k-dropdown.k-select.k-select--disabled .k-select__fieldset .k-select__fieldset__legend,.k-dropdown.k-select.k-select--disabled .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__value{color:var(--kku-text-color-disabled)}.k-dropdown__content.k-select__content .k-select__content__menu--small>.k-menu-item{height:30px}.k-dropdown__content.k-select__content .k-select__content__menu--medium>.k-menu-item{height:36px}.k-text-field{position:relative;display:inline-flex;flex-direction:column;width:100%}.k-text-field .k-text-field__fieldset{display:inline-flex;color:var(--kku-text-color-label);min-inline-size:0;border:1px solid var(--kku-border-color-default);border-radius:var(--kku-border-radius-default);transition:.16s ease;transition-property:border-color}.k-text-field .k-text-field__fieldset:hover{border-color:var(--kku-border-color-hover)}.k-text-field .k-text-field__fieldset:hover .k-text-field__fieldset__legend>.k-text-field__fieldset__legend__label{color:var(--kku-text-color-default)}.k-text-field .k-text-field__fieldset .k-text-field__fieldset__legend{height:16px;z-index:0}.k-text-field .k-text-field__fieldset .k-text-field__fieldset__legend .k-text-field__fieldset__legend__label{color:var(--kku-text-color-label);transition:.16s ease;transition-property:color}.k-text-field .k-text-field__fieldset .k-text-field__fieldset__legend .k-text-field__fieldset__legend__label.k-text-field__fieldset__legend__label--show{padding:0 var(--kku-spacing-2)}.k-text-field .k-text-field__fieldset .k-text-field__fieldset__legend .k-text-field__fieldset__legend__label__required{margin-left:var(--kku-spacing-2);color:var(--kku-error-color-default);transition:.16s ease;transition-property:color}.k-text-field.k-text-field--focus:not(.k-text-field--readOnly) .k-text-field__fieldset{outline:none;border-color:var(--kku-focus-visible-color)}.k-text-field.k-text-field--focus:not(.k-text-field--readOnly) .k-text-field__fieldset .k-text-field__fieldset__legend .k-text-field__fieldset__legend__label{color:var(--kku-focus-visible-color)}.k-text-field.k-text-field--focus:not(.k-text-field--readOnly) .k-text-field__fieldset .k-text-field__fieldset__legend .k-text-field__fieldset__legend__label__required{color:var(--kku-focus-visible-color)}.k-text-field.k-text-field--error .k-text-field__fieldset{border-color:var(--kku-error-color-default)}.k-text-field.k-text-field--error .k-text-field__fieldset .k-text-field__fieldset__legend .k-text-field__fieldset__legend__label,.k-text-field.k-text-field--error .k-text-field__fieldset .k-text-field__fieldset__legend .k-text-field__fieldset__legend__label__required{color:var(--kku-error-color-default)}.k-text-field .k-text-field__fieldset__message{padding:var(--kku-spacing-4) 0 0 var(--kku-spacing-4);color:var(--kku-error-color-default)}.k-text-field .k-text-field__fieldset__container{display:flex;align-items:center;width:100%;height:100%}.k-text-field .k-text-field__fieldset__container .k-text-field__fieldset__container__input{flex:1 1 auto;outline:0;border:none;background:none;width:100%;height:100%;padding:0;font-size:inherit;line-height:inherit;background:transparent;transition:.16s ease;transition-property:background,color}.k-text-field .k-text-field__fieldset__container .k-text-field__fieldset__container__input::placeholder{color:var(--kku-text-color-placeholder)}.k-text-field.k-text-field--small{width:220px}.k-text-field.k-text-field--small .k-text-field__fieldset{height:38px}.k-text-field.k-text-field--small .k-text-field__fieldset .k-text-field__fieldset__legend{margin-left:var(--kku-spacing-10)}.k-text-field.k-text-field--small .k-text-field__fieldset .k-text-field__fieldset__legend .k-text-field__fieldset__legend__label{font-size:var(--kku-text-size-xsmall);line-height:var(--kku-line-height-xsmall)}.k-text-field.k-text-field--small .k-text-field__fieldset .k-text-field__fieldset__container{height:30px;margin-top:-8px}.k-text-field.k-text-field--small .k-text-field__fieldset .k-text-field__fieldset__container .k-text-field__fieldset__container__left{margin-left:var(--kku-spacing-8)}.k-text-field.k-text-field--small .k-text-field__fieldset .k-text-field__fieldset__container .k-text-field__fieldset__container__input{padding:0 var(--kku-spacing-8);font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-text-field.k-text-field--small .k-text-field__fieldset .k-text-field__fieldset__container .k-text-field__fieldset__container__right,.k-text-field.k-text-field--small .k-text-field__fieldset .k-text-field__fieldset__container .k-text-field__fieldset__container__icon{flex:0 0 var(--kku-text-size-medium);margin-right:var(--kku-spacing-8)}.k-text-field.k-text-field--small .k-text-field__fieldset__message{font-size:var(--kku-text-size-xsmall);line-height:var(--kku-line-height-xsmall)}.k-text-field.k-text-field--medium{width:220px}.k-text-field.k-text-field--medium .k-text-field__fieldset{height:44px}.k-text-field.k-text-field--medium .k-text-field__fieldset .k-text-field__fieldset__legend{margin-left:var(--kku-spacing-12)}.k-text-field.k-text-field--medium .k-text-field__fieldset .k-text-field__fieldset__legend .k-text-field__fieldset__legend__label{font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-text-field.k-text-field--medium .k-text-field__fieldset .k-text-field__fieldset__container{height:36px;margin-top:-8px}.k-text-field.k-text-field--medium .k-text-field__fieldset .k-text-field__fieldset__container .k-text-field__fieldset__container__input{padding:0 var(--kku-spacing-10);font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-text-field.k-text-field--medium .k-text-field__fieldset .k-text-field__fieldset__container .k-text-field__fieldset__container__right,.k-text-field.k-text-field--medium .k-text-field__fieldset .k-text-field__fieldset__container .k-text-field__fieldset__container__icon{flex:0 0 var(--kku-text-size-large);margin-right:var(--kku-spacing-10)}.k-text-field.k-text-field--medium .k-text-field__fieldset__message{font-size:var(--kku-text-size-xsmall);line-height:var(--kku-line-height-xsmall)}.k-text-field.k-text-field--disabled .k-text-field__fieldset{border-color:var(--kku-border-color-disabled);background:var(--kku-background-color-disabled)}.k-text-field.k-text-field--disabled .k-text-field__fieldset .k-text-field__fieldset__legend>.k-text-field__fieldset__legend__label{color:var(--kku-text-color-disabled)}.k-text-field.k-text-field--disabled .k-text-field__fieldset .k-text-field__fieldset__container .k-text-field__fieldset__container__input{color:var(--kku-text-color-disabled);cursor:not-allowed}.k-ripple{position:absolute;opacity:.1;border-radius:50%}@keyframes ripple-effect{0%{transform:scale(.1);opacity:.32}to{transform:scale(1);opacity:.1}}@keyframes ripple-hide-effect{0%{opacity:.1}to{opacity:0}}
1
+ @font-face{font-family:Pretendard;src:local("Pretendard Medium"),url("fonts/pretendard/Pretendard-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Pretendard;src:local("Pretendard Regular"),url("fonts/pretendard/Pretendard-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Pretendard;src:local("Pretendard Bold"),url("fonts/pretendard/Pretendard-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}:root{--kku-gray-color-100: #ededed;--kku-gray-color-200: #e3e3e3;--kku-gray-color-300: #c6c6c6;--kku-gray-color-400: #474747;--kku-gray-color-500: #404040;--kku-gray-color-600: #393939;--kku-gray-color-700: #353535;--kku-gray-color-800: #2b2b2b;--kku-gray-color-900: #202020;--kku-slate-color-100: #f1f3f5;--kku-slate-color-200: #eaecef;--kku-slate-color-300: #d4d8de;--kku-slate-color-400: #748296;--kku-slate-color-500: #687587;--kku-slate-color-600: #5d6878;--kku-slate-color-700: #576271;--kku-slate-color-800: #464e5a;--kku-slate-color-900: #343a44;--kku-blue-color-100: #e6effc;--kku-blue-color-200: #d9e7fa;--kku-blue-color-300: #b0cdf5;--kku-blue-color-400: #005ee0;--kku-blue-color-500: #0055ca;--kku-blue-color-600: #004bb3;--kku-blue-color-700: #0047a8;--kku-blue-color-800: #003886;--kku-blue-color-900: #002a65;--kku-green-color-100: #F1FEEE;--kku-green-color-200: #EAFFEE;--kku-green-color-300: #D4FFCB;--kku-green-color-400: #0f6bff;--kku-green-color-500: #68E64E;--kku-green-color-600: #5CCC46;--kku-green-color-700: #58BF41;--kku-green-color-800: #459934;--kku-green-color-900: #347327;--kku-orange-color-100: #FEF4E8;--kku-orange-color-200: #FEF0DD;--kku-orange-color-300: #FDDEB8;--kku-orange-color-400: #F7931A;--kku-orange-color-500: #DE8417;--kku-orange-color-600: #C67615;--kku-orange-color-700: #B96E14;--kku-orange-color-800: #945810;--kku-orange-color-900: #6F420C;--kku-red-color-100: #FEE6E6;--kku-red-color-200: #fdd9d9;--kku-red-color-300: #fbb1b1;--kku-red-color-400: #F10404;--kku-red-color-500: #D90404;--kku-red-color-600: #C10303;--kku-red-color-700: #B50303;--kku-red-color-800: #910202;--kku-red-color-900: #6C0202;--kku-white-color: #ffffff;--kku-black-color: #000000;--kku-white-hover-dim: rgba(255, 255, 255, .16);--kku-white-active-dim: rgba(255, 255, 255, .24);--kku-black-hover-dim: rgba(0, 0, 0, .16);--kku-black-active-dim: rgba(0, 0, 0, .24);--kku-text-size-xlarge: 24px;--kku-text-size-large: 18px;--kku-text-size-medium: 16px;--kku-text-size-small: 14px;--kku-text-size-xsmall: 12px;--kku-text-size-xxsmall: 10px;--kku-line-height-xlarge: 26px;--kku-line-height-large: 20px;--kku-line-height-medium: 18px;--kku-line-height-small: 16px;--kku-line-height-xsize: 14px;--kku-line-height-xxsmall: 12px;--kku-spacing-2: 2px;--kku-spacing-4: 4px;--kku-spacing-6: 6px;--kku-spacing-8: 8px;--kku-spacing-10: 10px;--kku-spacing-12: 12px;--kku-spacing-14: 14px;--kku-spacing-16: 16px;--kku-spacing-20: 20px;--kku-spacing-24: 24px;--kku-spacing-28: 28px;--kku-spacing-32: 32px;--kku-spacing-36: 36px;--kku-spacing-40: 40px;--kku-spacing-44: 44px;--kku-spacing-48: 48px;--kku-spacing-52: 52px;--kku-spacing-56: 56px;--kku-spacing-60: 60px;--kku-spacing-64: 64px;--kku-spacing-68: 68px;--kku-spacing-72: 72px;--kku-spacing-76: 76px;--kku-spacing-80: 80px;--kku-border-radius-default: 3px;--kku-bottom-sheet-border-radius: 16px;--kku-default-font-family: "Pretendard", "Arial", sans-serif;--kku-z-idnex-0: 0;--kku-z-idnex-1: 1;--kku-z-idnex-10: 10;--kku-z-idnex-100: 100;--kku-z-idnex-200: 200;--kku-z-idnex-500: 500;--kku-z-idnex-1000: 1000;--kku-z-idnex-1001: 1001;--kku-z-idnex-2000: 2000;--kku-z-idnex-2001: 2001;--kku-z-idnex-5000: 5000;--kku-z-idnex-9999: 9999;--kku-box-shadow-default: rgba(0, 0, 0, .2) 0px 12px 28px 0px, rgba(0, 0, 0, .1) 0px 2px 4px 0px, rgba(255, 255, 255, .05) 0px 0px 0px 1px inset;--kku-box-shadow-dark: rgba(255, 255, 255, .04) 0px 12px 28px 0px, rgba(255, 255, 255, .05) 0px 2px 4px 0px, rgba(255, 255, 255, .05) 0px 0px 0px 1px inset}:root{--kku-text-color-default: var(--kku-gray-color-900);--kku-text-color-hover: var(--kku-gray-color-900);--kku-text-color-disabled: var(--kku-slate-color-400);--kku-text-color-link: var(--kku-blue-color-400);--kku-text-color-label: var(--kku-slate-color-900);--kku-text-color-placeholder: var(--kku-slate-color-800);--kku-border-color-default: var(--kku-slate-color-500);--kku-border-color-hover: var(--kku-slate-color-800);--kku-border-color-disabled: var(--kku-slate-color-300);--kku-background-color-default: var(--kku-white-color);--kku-background-color-hover: var(--kku-slate-color-100);--kku-background-color-disabled: var(--kku-slate-color-200);--kku-backdrop-background-color-light: var(--kku-black-color);--kku-backdrop-background-color-dark: var(--kku-slate-color-200);--kku-ripple-background-color: var(--kku-gray-color-500);--kku-primary-color-default: var(--kku-blue-color-400);--kku-primary-color-hover: var(--kku-blue-color-500);--kku-primary-color-disabled: var(--kku-blue-color-800);--kku-success-color-default: var(--kku-green-color-600);--kku-success-color-hover: var(--kku-green-color-700);--kku-success-color-disabled: var(--kku-green-color-800);--kku-warning-color-default: var(--kku-orange-color-400);--kku-warning-color-hover: var(--kku-orange-color-500);--kku-warning-color-disabled: var(--kku-orange-color-800);--kku-error-color-default: var(--kku-red-color-600);--kku-error-color-hover: var(--kku-red-color-700);--kku-error-color-disabled: var(--kku-red-color-800);--kku-focus-visible-color: var(--kku-blue-color-400);--kku-element-height-medium: 36px;--kku-element-height-small: 28px;--kku-modal-content-z-index: var(--kku-z-idnex-1001);--kku-bottom-sheet-z-index: var(--kku-z-idnex-1001);--kku-full-screen-loader-z-index: var(--kku-z-idnex-1001)}:root .dark{--kku-text-color-default: var(--kku-gray-color-100);--kku-text-color-hover: var(--kku-gray-color-100);--kku-text-color-disabled: var(--kku-slate-color-400);--kku-text-color-label: var(--kku-slate-color-200);--kku-text-color-placeholder: var(--kku-slate-color-300);--kku-border-color-default: var(--kku-slate-color-400);--kku-border-color-hover: var(--kku-slate-color-100);--kku-border-color-disabled: var(--kku-slate-color-800);--kku-background-color-default: var(--kku-gray-color-900);--kku-background-color-hover: var(--kku-gray-color-800);--kku-background-color-disabled: var(--kku-gray-color-900);--kku-ripple-background-color: var(--kku-slate-color-300)}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;font-family:var(--kku-default-font-family)}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px white inset!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes wave{0%{left:-150px}to{left:100%}}.k-button{position:relative;display:inline-flex;justify-content:center;align-items:center;margin:0;border-width:1px;border-style:solid;border-radius:var(--kku-border-radius-default);cursor:pointer;overflow:hidden;user-select:none;font-family:var(--kku-default-font-family);transition:.16s ease;transition-property:background,border-color}.k-button:focus-visible{outline:2px solid var(--kku-focus-visible-color);outline-offset:var(--kku-spacing-2);border-radius:var(--kku-border-radius-default);z-index:1}.k-button+.k-button{margin-left:var(--kku-spacing-8)}.k-button.k-button--disabled{cursor:not-allowed}.k-button.k-button--outlined{color:var(--kku-text-color-default);border-color:var(--kku-border-color-default);background:var(--kku-background-color-default)}.k-button.k-button--outlined:hover:not(.k-button--disabled){border-color:var(--kku-border-color-hover);background:var(--kku-background-color-hover)}.k-button.k-button--outlined.k-button--disabled{color:var(--kku-text-color-disabled);border-color:var(--kku-border-color-disabled);background:var(--kku-background-color-disabled)}.k-button.k-button--solid{color:var(--kku-white-color);border:none;background-color:var(--kku-black-color)}.k-button.k-button--solid:hover:not(.k-button--disabled){background:linear-gradient(0deg,#ffffff26 0% 100%),var(--kku-black-color)}.k-button.k-button--solid.k-button--disabled{color:var(--kku-slate-color-500);border-color:var(--kku-slate-color-900);background:var(--kku-slate-color-900)}.k-button.k-button--primary{color:var(--kku-white-color);border-color:var(--kku-primary-color-default);background-color:var(--kku-primary-color-default)}.k-button.k-button--primary:hover{color:var(--kku-white-color);border-color:var(--kku-primary-color-hover);background-color:var(--kku-primary-color-hover)}.k-button.k-button--primary.k-button--disabled{color:var(--kku-text-color-disabled);border-color:var(--kku-primary-color-disabled);background-color:var(--kku-primary-color-disabled)}.k-button.k-button--subtle{color:var(--kku-text-color-default);border-color:var(--kku-slate-color-200);background:var(--kku-slate-color-200)}.k-button.k-button--subtle:hover:not(.k-button--disabled){border-color:var(--kku-slate-color-300);background:var(--kku-slate-color-300)}.k-button.k-button--subtle.k-button--disabled{color:var(--kku-slate-color-600)}.k-button.k-button--plain{color:var(--kku-text-color-default);border-color:transparent;background:transparent}.k-button.k-button--plain:hover{color:var(--kku-text-color-hover)}.k-button.k-button--plain.k-button--disabled{color:var(--kku-text-color-disabled)}.k-button.k-button--danger.k-button--outlined{color:var(--kku-error-color-default);border-color:var(--kku-error-color-default);background-color:var(--kku-background-color-default)}.k-button.k-button--danger.k-button--outlined:hover{color:var(--kku-error-color-hover);border-color:var(--kku-error-color-hover);background-color:var(--kku-background-color-default)}.k-button.k-button--danger.k-button--outlined.k-button--disabled{border-color:var(--kku-error-color-disabled);background-color:var(--kku-background-color-disabled)}.k-button.k-button--danger.k-button--solid,.k-button.k-button--danger.k-button--primary,.k-button.k-button--danger.k-button--subtle{color:var(--kku-white-color);border-color:var(--kku-error-color-default);background-color:var(--kku-error-color-default)}.k-button.k-button--danger.k-button--solid:hover,.k-button.k-button--danger.k-button--primary:hover,.k-button.k-button--danger.k-button--subtle:hover{border-color:var(--kku-error-color-hover);background-color:var(--kku-error-color-hover)}.k-button.k-button--danger.k-button--solid.k-button--disabled,.k-button.k-button--danger.k-button--primary.k-button--disabled,.k-button.k-button--danger.k-button--subtle.k-button--disabled{color:var(--kku-text-color-disabled);border-color:var(--kku-error-color-disabled);background-color:var(--kku-error-color-disabled)}.k-button.k-button--danger.k-button--plain{color:var(--kku-error-color-default)}.k-button.k-button--danger.k-button--plain:hover{color:var(--kku-error-color-hover)}.k-button.k-button--danger.k-button--plain.k-button--disabled{color:var(--kku-error-color-disabled)}.k-button.k-button--small{height:30px;padding:0 var(--kku-spacing-12);font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-button.k-button--medium{height:36px;padding:0 var(--kku-spacing-20);font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.dark .k-button.k-button--solid{color:var(--kku-black-color);background-color:var(--kku-white-color)}.dark .k-button.k-button--solid:hover:not(.k-button--disabled){background:linear-gradient(0deg,#00000026 0% 100%),var(--kku-white-color)}.dark .k-button.k-button--solid.k-button--disabled{color:var(--kku-slate-color-600);border-color:var(--kku-border-color-disabled);background:var(--kku-background-color-disabled)}.dark .k-button.k-button--subtle{border-color:var(--kku-slate-color-800);background:var(--kku-slate-color-800)}.dark .k-button.k-button--subtle:hover:not(.k-button--disabled){border-color:var(--kku-slate-color-700);background:var(--kku-slate-color-700)}.dark .k-button.k-button--subtle.k-button--disabled{color:var(--kku-slate-color-600);border-color:var(--kku-background-color-disabled);background:var(--kku-background-color-disabled)}.dark .k-button.k-button--danger.k-button--solid,.dark .k-button.k-button--danger.k-button--primary,.dark .k-button.k-button--danger.k-button--subtle{color:var(--kku-white-color);border-color:var(--kku-error-color-default);background-color:var(--kku-error-color-default)}.dark .k-button.k-button--danger.k-button--solid:hover,.dark .k-button.k-button--danger.k-button--primary:hover,.dark .k-button.k-button--danger.k-button--subtle:hover{border-color:var(--kku-error-color-hover);background-color:var(--kku-error-color-hover)}.dark .k-button.k-button--danger.k-button--solid.k-button--disabled,.dark .k-button.k-button--danger.k-button--primary.k-button--disabled,.dark .k-button.k-button--danger.k-button--subtle.k-button--disabled{color:var(--kku-text-color-disabled);border-color:var(--kku-error-color-disabled);background-color:var(--kku-error-color-disabled)}.k-button-group{white-space:nowrap}.k-button-group .k-button:first-child{border-top-left-radius:var(--kku-border-radius-default);border-bottom-left-radius:var(--kku-border-radius-default)}.k-button-group .k-button:last-child{border-top-right-radius:var(--kku-border-radius-default);border-bottom-right-radius:var(--kku-border-radius-default);margin-right:-1px}.k-button-group .k-button{margin-left:0;margin-right:-1px;border-radius:0}.k-button-group .k-button--primary,.k-button-group .k-button--subtle{border:none}.k-button-group .k-button+.k-button{margin-right:-1px}.k-button-group .k-button.k-button--outlined:hover{z-index:1}.k-toggle-button{white-space:nowrap}.k-toggle-button .k-button:first-child{border-top-left-radius:var(--kku-border-radius-default);border-bottom-left-radius:var(--kku-border-radius-default)}.k-toggle-button .k-button:last-child{border-top-right-radius:var(--kku-border-radius-default);border-bottom-right-radius:var(--kku-border-radius-default);margin-right:-1px}.k-toggle-button .k-button{margin-left:0;margin-right:-1px;border-radius:0}.k-toggle-button .k-button--selected.k-button--outlined,.k-toggle-button .k-button--selected.k-button--outlined:hover{background:var(--kku-gray-color-200)}.k-toggle-button .k-button--selected.k-button--solid,.k-toggle-button .k-button--selected.k-button--solid:hover{background:var(--kku-gray-color-400)}.k-toggle-button .k-button--selected.k-button--primary,.k-toggle-button .k-button--selected.k-button--primary:hover{background:var(--kku-blue-color-800)}.k-toggle-button .k-button--selected.k-button--subtle,.k-toggle-button .k-button--selected.k-button--subtle:hover{background:var(--kku-gray-color-200)}.k-toggle-button .k-button--selected.k-button--plain{font-weight:700}.k-toggle-button .k-button--primary,.k-toggle-button .k-button--subtle{border:none}.k-toggle-button .k-button+.k-button{margin-right:-1px}.k-toggle-button .k-button.k-button--outlined:hover{z-index:1}.dark .k-toggle-button .k-button.k-button--selected.k-button--outlined,.dark .k-toggle-button .k-button.k-button--selected.k-button--outlined:hover{background:var(--kku-gray-color-400)}.dark .k-toggle-button .k-button.k-button--selected.k-button--solid,.dark .k-toggle-button .k-button.k-button--selected.k-button--solid:hover{background:var(--kku-gray-color-300)}.dark .k-toggle-button .k-button.k-button--selected.k-button--primary,.dark .k-toggle-button .k-button.k-button--selected.k-button--primary:hover{background:var(--kku-blue-color-800)}.dark .k-toggle-button .k-button.k-button--selected.k-button--subtle,.dark .k-toggle-button .k-button.k-button--selected.k-button--subtle:hover{background:var(--kku-slate-color-500)}.dark .k-toggle-button .k-button.k-button--selected.k-button--plain{font-weight:700}.k-switch{position:relative;display:inline-flex;justify-content:flex-start;align-items:center;border:none;outline:0;width:50px;height:24px;transition:.16s ease;transition-property:background;cursor:pointer}.k-switch:focus-visible{outline:2px solid var(--kku-focus-visible-color);outline-offset:var(--kku-spacing-2);border-radius:var(--kku-border-radius-default);z-index:1}.k-switch .k-switch__toggle{position:absolute;top:3px;left:3px;border-radius:50%;background:var(--kku-white-color);transition:left .24s ease}.k-switch.k-switch--small{width:44px;height:26px;border-radius:13px}.k-switch.k-switch--small .k-switch__toggle{width:20px;height:20px}.k-switch.k-switch--medium{width:52px;height:30px;border-radius:15px}.k-switch.k-switch--medium .k-switch__toggle{width:24px;height:24px}.k-switch.k-switch--on{background:var(--kku-primary-color-default)}.k-switch.k-switch--on:hover:not(.k-switch--disabled){background:var(--kku-blue-color-500)}.k-switch.k-switch--on.k-switch--small .k-switch__toggle{left:calc(100% - 23px)}.k-switch.k-switch--on.k-switch--medium .k-switch__toggle{left:calc(100% - 27px)}.k-switch.k-switch--off{background:var(--kku-slate-color-300)}.k-switch.k-switch--off:hover:not(.k-switch--disabled){background:var(--kku-gray-color-300)}.k-switch.k-switch--disabled{cursor:not-allowed;background:var(--kku-background-color-disabled)}.k-switch.k-switch--disabled .k-switch__toggle{background:var(--kku-slate-color-300)}.dark .k-switch .k-switch__toggle{background:var(--kku-slate-color-200)}.dark .k-switch.k-switch--off{background:var(--kku-slate-color-600)}.dark .k-switch.k-switch--off:hover:not(.k-switch--disabled){background:var(--kku-slate-color-500)}.dark .k-switch.k-switch--disabled{background:var(--kku-background-color-disabled)}.dark .k-switch.k-switch--disabled .k-switch__toggle{background:var(--kku-slate-color-300)}.k-accordion{color:var(--kku-text-color-default);border-bottom:1px solid var(--kku-slate-color-400)}.k-accordion[data-open=true] .k-accordion__summary__icon{transform:rotate(180deg)}.k-accordion .k-accordion__summary{display:flex;justify-content:space-between;align-items:center;list-style-type:none;user-select:none;cursor:pointer;transition:.16s ease;transition-property:background,border-bottom-color}.k-accordion .k-accordion__summary:focus-visible{outline:2px solid var(--kku-focus-visible-color);outline-offset:var(--kku-spacing-2);border-radius:var(--kku-border-radius-default);z-index:1}.k-accordion .k-accordion__summary::-webkit-details-marker{display:none}.k-accordion .k-accordion__summary .k-accordion__summary__text{font-size:inherit}.k-accordion .k-accordion__summary .k-accordion__summary__icon{transition:.16s ease;transition-duration:.2s;transition-property:transform}.k-accordion .k-accordion__content{transition:.16s ease;transition-duration:.2s;transition-property:max-height;background-color:var(--white-color);overflow:hidden}.k-accordion.k-accordion--small{width:100%;max-width:480px;font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-accordion.k-accordion--small .k-accordion__summary,.k-accordion.k-accordion--small .k-accordion__content>.k-accordion__content__container{padding:var(--kku-spacing-8) var(--kku-spacing-2)}.k-accordion.k-accordion--medium{width:100%;max-width:640px;font-size:var(--kku-text-size-medium);line-height:var(--kku-line-height-medium)}.k-accordion.k-accordion--medium .k-accordion__summary,.k-accordion.k-accordion--medium .k-accordion__content>.k-accordion__content__container{padding:var(--kku-spacing-12) var(--kku-spacing-2)}.k-menu{display:inline-flex;flex-direction:column;border:1px solid var(--kku-border-color-default);border-radius:var(--kku-border-radius-default);padding:0;margin:0}.k-menu.k-menu--small{width:120px}.k-menu.k-menu--medium{width:164px}.k-menu .k-menu-item:first-child{border-top-right-radius:calc(var(--kku-border-radius-default) - 1px);border-top-left-radius:calc(var(--kku-border-radius-default) - 1px)}.k-menu .k-menu-item:last-child{border-bottom-right-radius:calc(var(--kku-border-radius-default) - 1px);border-bottom-left-radius:calc(var(--kku-border-radius-default) - 1px)}.k-menu-item{position:relative;display:flex;justify-content:flex-start;align-items:center;border:none;outline:0;width:100%;color:var(--kku-text-color-default);background:var(--kku-white-color);overflow:hidden;cursor:pointer;transition:.16s ease;transition-property:background}.k-menu-item:after{position:absolute;top:0;left:0;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid var(--kku-primary-color-default);z-index:1}.k-menu-item:focus-visible:after{content:""}.k-menu-item:hover:not(.k-menu-item--disabled){background:var(--kku-slate-color-100)}.k-menu-item .k-menu-item__left-content,.k-menu-item .k-menu-item__right-content{display:inline-flex;justify-content:center;align-items:center}.k-menu-item .k-menu-item__label{flex:1 1 auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.k-menu-item .k-menu-item__shortcut{display:flex;justify-content:center;align-items:center;border-radius:var(--kku-border-radius-default);background:var(--kku-slate-color-200);color:var(--kku-slate-color-900)}.k-menu-item.k-menu-item--small{height:30px;padding:0 var(--kku-spacing-12);font-size:var(--kku-text-size-xsmall);line-height:var(--kku-line-height-xsmall)}.k-menu-item.k-menu-item--small .k-menu-item__left-content{margin-right:var(--kku-spacing-4)}.k-menu-item.k-menu-item--small .k-menu-item__shortcut{font-size:var(--kku-text-size-xxsmall);line-height:var(--kku-line-height-xxsmall);padding:1px var(--kku-spacing-2)}.k-menu-item.k-menu-item--small .k-menu-item__right-content{margin-left:var(--kku-spacing-4)}.k-menu-item.k-menu-item--medium{height:36px;padding:0 var(--kku-spacing-12);font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-menu-item.k-menu-item--medium .k-menu-item__left-content{margin-right:var(--kku-spacing-6)}.k-menu-item.k-menu-item--medium .k-menu-item__shortcut{font-size:var(--kku-text-size-xsmall);line-height:var(--kku-line-height-xsmall);padding:0 var(--kku-spacing-4)}.k-menu-item.k-menu-item--medium .k-menu-item__right-content{margin-left:var(--kku-spacing-6)}.k-menu-item.k-menu-item--disabled{cursor:not-allowed}.k-menu-item.k-menu-item--disabled .k-menu-item__label,.k-menu-item.k-menu-item--disabled .k-menu-item__shortcut{color:var(--kku-text-color-disabled)}.k-menu-item.k-menu-item-selectable.k-menu-item--small{padding-left:var(--kku-spacing-12)}.k-menu-item.k-menu-item-selectable.k-menu-item--small .k-menu-item__left-content{margin-right:0}.k-menu-item.k-menu-item-selectable.k-menu-item--small.k-menu-item-selectable--selected{padding-left:var(--kku-spacing-2)}.k-menu-item.k-menu-item-selectable.k-menu-item--medium{padding-left:var(--kku-spacing-12)}.k-menu-item.k-menu-item-selectable.k-menu-item--medium .k-menu-item__left-content{margin-right:0}.k-menu-item.k-menu-item-selectable.k-menu-item--medium.k-menu-item-selectable--selected{padding-left:var(--kku-spacing-2)}.k-menu-item.k-menu-item-selectable.k-menu-item-selectable--selected{background:var(--kku-slate-color-200)}.k-menu-item-divider{position:relative;height:1px;padding:var(--kku-spacing-6) 0;background:var(--kku-white-color);transition:.16s ease;transition-property:background}.k-menu-item-divider:after{content:"";position:absolute;top:50%;left:var(--kku-spacing-10);width:calc(100% - var(--kku-spacing-10) * 2);height:1px;background:var(--kku-slate-color-200)}.dark .k-menu-item{background:var(--kku-gray-color-900)}.dark .k-menu-item:hover:not(.k-menu-item--disabled){background:var(--kku-gray-color-800)}.dark .k-menu-item .k-menu-item__shortcut{background:var(--kku-slate-color-900);color:var(--kku-slate-color-100)}.dark .k-menu-item.k-menu-item--disabled .k-menu-item__label,.dark .k-menu-item.k-menu-item--disabled .k-menu-item__shortcut{color:var(--kku-text-color-disabled)}.dark .k-menu-item.k-menu-item-selectable.k-menu-item-selectable--selected{background:var(--kku-gray-color-700)}.dark .k-menu-item-divider{background:var(--kku-gray-color-900)}.dark .k-menu-item-divider:after{background:var(--kku-slate-color-600)}.k-skeleton{position:relative;display:inline-block;background-color:var(--kku-slate-color-300);border-radius:var(--kku-border-radius-default);overflow:hidden}.k-skeleton--pulse{animation:pulse 1.6s ease-in-out infinite}.k-skeleton--wave:after{content:"";position:absolute;top:0;left:-150px;height:100%;width:25%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.56),transparent);animation:wave 1.6s linear infinite}.dark .k-skeleton{background-color:var(--kku-slate-color-900)}.k-dropdown{display:inline-flex}.k-dropdown .k-dropdown__trigger{display:inline-flex;justify-content:center;align-items:center}.k-dropdown .k-dropdown__trigger:focus-visible{outline:2px solid var(--kku-focus-visible-color);outline-offset:var(--kku-spacing-2);border-radius:var(--kku-border-radius-default);z-index:1}.k-dropdown .k-dropdown__trigger.k-dropdown__trigger--disabled{cursor:not-allowed}.k-dropdown .k-dropdown__content:focus-visible{outline:0}.k-backdrop{position:fixed;top:0;left:0;width:100dvw;height:100dvh;background-color:#0000007a;z-index:10}.k-backdrop .k-backdrop__container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.k-backdrop .k-backdrop__container:focus-visible{outline:2px solid var(--kku-focus-visible-color);outline-offset:-2px;z-index:1}.k-backdrop .k-backdrop__container~*{z-index:11}.k-modal{position:fixed;display:flex;flex-direction:column;width:100%;color:var(--kku-text-color-default);border-radius:var(--kku-border-radius-default);background-color:var(--kku-background-color-default);box-shadow:var(--kku-box-shadow-default);z-index:var(--kku-modal-content-z-index);overflow:hidden}.k-modal.k-modal--small{max-width:640px;height:400px}.k-modal.k-modal--medium{max-width:800px;height:460px}.k-modal.k-modal--large{max-width:1040px;height:600px}.k-modal .k-modal__header{display:flex;justify-content:flex-start;align-items:center;flex:0 0 44px;width:100%;padding:var(--kku-spacing-12) var(--kku-spacing-16);border-bottom:1px solid var(--kku-slate-color-300);font-size:var(--kku-text-size-large);line-height:var(--kku-line-height-large)}.k-modal .k-modal__content{flex:1 1 100%;padding:var(--kku-spacing-12) var(--kku-spacing-16);font-size:var(--kku-text-size-medium);line-height:var(--kku-line-height-medium);overflow:auto}.k-modal.k-modal__container--no-title .k-modal__content{padding:var(--kku-spacing-16)}.k-modal .k-modal__footer{display:flex;justify-content:center;align-items:center;flex:1 1 0;padding:0 var(--kku-spacing-16) var(--kku-spacing-12) var(--kku-spacing-16)}.k-modal .k-modal__footer.k-modal__footer--left{justify-content:flex-start}.k-modal .k-modal__footer.k-modal__footer--center{justify-content:center}.k-modal .k-modal__footer.k-modal__footer--right{justify-content:flex-end}@media screen and (max-width: 1040px){.k-modal.k-modal--large{max-width:calc(100dvw - var(--kku-spacing-32))}}@media screen and (max-width: 800px){.k-modal.k-modal--medium{max-width:calc(100dvw - var(--kku-spacing-24))}}@media screen and (max-width: 640px){.k-modal.k-modal--small{max-width:calc(100dvw - var(--kku-spacing-16))}}.dark .k-modal{box-shadow:var(--kku-box-shadow-dark)}.k-spinner{padding:var(--kku-spacing-4)}.k-spinner .k-spinner__body{animation:spin .96s cubic-bezier(.5,.1,.5,.9) infinite}.k-spinner .k-spinner__body .k-spinner__body__circle{color:var(--kku-slate-color-300)}.k-spinner.k-spinner--small{width:32px;height:32px}.k-spinner.k-spinner--medium{width:48px;height:48px}.dark .k-spinner .k-spinner__body .k-spinner__body__circle{color:var(--kku-slate-color-600)}.k-icon{display:inline-flex;justify-content:center;align-items:center;color:var(--kku-gray-color-900);fill:var(--kku-gray-color-900);user-select:none}.k-icon.k-icon--clickable{cursor:pointer}.k-icon.k-icon--disabled{color:var(--kku-text-color-disabled);fill:var(--kku-text-color-disabled);cursor:not-allowed}.k-icon.k-icon--xlarge{width:28px;height:28px}.k-icon.k-icon--large{width:24px;height:24px}.k-icon.k-icon--medium{width:20px;height:20px}.k-icon.k-icon--small{width:16px;height:16px}.k-icon.k-icon--xsmall{width:12px;height:12px}.k-icon svg{width:100%;height:100%}.dark .k-icon{color:var(--kku-gray-color-100);fill:var(--kku-gray-color-100)}.dark .k-icon.k-icon--disabled{color:var(--kku-text-color-disabled);fill:var(--kku-text-color-disabled)}.k-dropdown.k-select{position:relative;display:inline-flex;flex-direction:column;cursor:pointer;user-select:none}.k-dropdown.k-select .k-select__fieldset{display:inline-flex;justify-content:flex-start;align-items:center;width:100%;color:var(--kku-text-color-label);min-inline-size:0;outline:0;border:1px solid var(--kku-border-color-default);border-radius:var(--kku-border-radius-default);transition:.16s ease;transition-property:border-color}.k-dropdown.k-select .k-select__fieldset:hover{border-color:var(--kku-border-color-hover)}.k-dropdown.k-select .k-select__fieldset:hover .k-select__fieldset__legend{color:var(--kku-text-color-default)}.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__legend{display:flex;justify-content:flex-start;align-items:center;height:16px;padding-top:2px;color:var(--kku-text-color-label);font-family:var(--kku-default-font-family);transition:.16s ease;transition-property:color;z-index:0}.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__legend.k-select__fieldset__legend--show{padding:var(--kku-spacing-2) var(--kku-spacing-2) 0 var(--kku-spacing-2)}.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__legend .k-select__fieldset__legend__required{margin-left:var(--kku-spacing-2);color:var(--kku-error-color-default);transition:.16s ease;transition-property:color}.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__container{display:flex;justify-content:space-between;align-items:center;position:relative;width:100%;overflow:hidden;font-family:var(--kku-default-font-family)}.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__value,.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__placeholder{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__value{color:var(--kku-text-color-default)}.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__placeholder{color:var(--kku-text-color-placeholder)}.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__icon{transition:.16s ease;transition-property:transform}.k-dropdown.k-select .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__icon.k-select__fieldset__container__icon--open{transform:rotate(180deg)}.k-dropdown.k-select .k-select__trigger{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}.k-dropdown.k-select .k-select__trigger:focus-visible:not(.k-select--disabled){outline:0}.k-dropdown.k-select .k-select__trigger:focus-visible:not(.k-select--disabled) .k-select__fieldset{outline:none;border-color:var(--kku-focus-visible-color)}.k-dropdown.k-select .k-select__trigger:focus-visible:not(.k-select--disabled) .k-select__fieldset .k-select__fieldset__legend{color:var(--kku-focus-visible-color)}.k-dropdown.k-select .k-select__trigger:focus-visible:not(.k-select--disabled) .k-select__fieldset .k-select__fieldset__legend .k-select__fieldset__legend__required{color:var(--kku-focus-visible-color)}.k-dropdown.k-select.k-select--error .k-select__fieldset{border-color:var(--kku-error-color-default)}.k-dropdown.k-select.k-select--error .k-select__fieldset .k-select__fieldset__legend,.k-dropdown.k-select.k-select--error .k-select__fieldset .k-select__fieldset__legend .k-select__fieldset__legend__required{color:var(--kku-error-color-default)}.k-dropdown.k-select .k-select__fieldset__message{padding:var(--kku-spacing-4) 0 0 var(--kku-spacing-4);color:var(--kku-error-color-default)}.k-dropdown.k-select .k-select__fieldset__container{display:flex;align-items:center;height:100%}.k-dropdown.k-select.k-select--small{width:140px}.k-dropdown.k-select.k-select--small .k-select__fieldset{height:38px}.k-dropdown.k-select.k-select--small .k-select__fieldset .k-select__fieldset__legend{margin-left:var(--kku-spacing-10);font-size:var(--kku-text-size-xsmall);line-height:var(--kku-line-height-xsmall)}.k-dropdown.k-select.k-select--small .k-select__fieldset .k-select__fieldset__container{height:30px;padding:0 var(--kku-spacing-8);margin-top:-8px;font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-dropdown.k-select.k-select--small .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__left{margin-left:var(--kku-spacing-8)}.k-dropdown.k-select.k-select--small .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__right,.k-dropdown.k-select.k-select--small .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__icon{flex:0 0 var(--kku-text-size-medium)}.k-dropdown.k-select.k-select--small .k-select__fieldset__message{font-size:var(--kku-text-size-xsmall);line-height:var(--kku-line-height-xsmall)}.k-dropdown.k-select.k-select--medium{width:180px}.k-dropdown.k-select.k-select--medium .k-select__fieldset{height:44px}.k-dropdown.k-select.k-select--medium .k-select__fieldset .k-select__fieldset__legend{margin-left:var(--kku-spacing-12);font-size:var(--kku-text-size-xsmall);line-height:var(--kku-line-height-xsmall)}.k-dropdown.k-select.k-select--medium .k-select__fieldset .k-select__fieldset__container{height:36px;padding:0 var(--kku-spacing-10);margin-top:-8px;font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-dropdown.k-select.k-select--medium .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__right,.k-dropdown.k-select.k-select--medium .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__icon{flex:0 0 var(--kku-text-size-large)}.k-dropdown.k-select.k-select--medium .k-select__fieldset__message{font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-dropdown.k-select.k-select--disabled{cursor:not-allowed}.k-dropdown.k-select.k-select--disabled .k-select__fieldset{border-color:var(--kku-border-color-disabled);background:var(--kku-background-color-disabled)}.k-dropdown.k-select.k-select--disabled .k-select__fieldset .k-select__fieldset__legend,.k-dropdown.k-select.k-select--disabled .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__value,.k-dropdown.k-select.k-select--disabled .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__icon,.k-dropdown.k-select.k-select--disabled .k-select__fieldset .k-select__fieldset__container .k-select__fieldset__container__placeholder{color:var(--kku-text-color-disabled)}.k-dropdown__content.k-select__content .k-select__content__menu--small>.k-menu-item{height:30px}.k-dropdown__content.k-select__content .k-select__content__menu--medium>.k-menu-item{height:36px}.k-text-field{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--kku-default-font-family)}.k-text-field .k-text-field__fieldset{display:inline-flex;color:var(--kku-text-color-label);min-inline-size:0;border:1px solid var(--kku-border-color-default);border-radius:var(--kku-border-radius-default);transition:.16s ease;transition-property:border-color}.k-text-field .k-text-field__fieldset:hover{border-color:var(--kku-border-color-hover)}.k-text-field .k-text-field__fieldset:hover .k-text-field__fieldset__legend>.k-text-field__fieldset__legend__label{color:var(--kku-text-color-default)}.k-text-field .k-text-field__fieldset .k-text-field__fieldset__legend{height:16px;z-index:0;font-family:var(--kku-default-font-family)}.k-text-field .k-text-field__fieldset .k-text-field__fieldset__legend .k-text-field__fieldset__legend__label{color:var(--kku-text-color-label);transition:.16s ease;transition-property:color}.k-text-field .k-text-field__fieldset .k-text-field__fieldset__legend .k-text-field__fieldset__legend__label.k-text-field__fieldset__legend__label--show{padding:0 var(--kku-spacing-2)}.k-text-field .k-text-field__fieldset .k-text-field__fieldset__legend .k-text-field__fieldset__legend__label__required{margin-left:var(--kku-spacing-2);color:var(--kku-error-color-default);transition:.16s ease;transition-property:color}.k-text-field.k-text-field--error .k-text-field__fieldset{border-color:var(--kku-error-color-default)}.k-text-field.k-text-field--error .k-text-field__fieldset .k-text-field__fieldset__legend .k-text-field__fieldset__legend__label,.k-text-field.k-text-field--error .k-text-field__fieldset .k-text-field__fieldset__legend .k-text-field__fieldset__legend__label__required{color:var(--kku-error-color-default)}.k-text-field .k-text-field__fieldset__message{padding:var(--kku-spacing-4) 0 0 var(--kku-spacing-4);color:var(--kku-error-color-default)}.k-text-field .k-text-field__fieldset__container{display:flex;align-items:center;width:100%;height:100%}.k-text-field .k-text-field__fieldset__container .k-text-field__fieldset__container__input{flex:1 1 auto;outline:0;border:none;background:none;width:100%;height:100%;padding:0;color:var(--kku-text-color-default);font-size:inherit;line-height:inherit;background:transparent;font-family:var(--kku-default-font-family);transition:.16s ease;transition-property:background,color}.k-text-field .k-text-field__fieldset__container .k-text-field__fieldset__container__input::placeholder{color:var(--kku-text-color-placeholder)}.k-text-field.k-text-field--small{width:220px}.k-text-field.k-text-field--small .k-text-field__fieldset{height:38px}.k-text-field.k-text-field--small .k-text-field__fieldset .k-text-field__fieldset__legend{margin-left:var(--kku-spacing-10)}.k-text-field.k-text-field--small .k-text-field__fieldset .k-text-field__fieldset__legend .k-text-field__fieldset__legend__label{font-size:var(--kku-text-size-xsmall);line-height:var(--kku-line-height-xsmall)}.k-text-field.k-text-field--small .k-text-field__fieldset .k-text-field__fieldset__container{height:30px;margin-top:-8px}.k-text-field.k-text-field--small .k-text-field__fieldset .k-text-field__fieldset__container .k-text-field__fieldset__container__left{margin-left:var(--kku-spacing-8)}.k-text-field.k-text-field--small .k-text-field__fieldset .k-text-field__fieldset__container .k-text-field__fieldset__container__input{padding:0 var(--kku-spacing-8);font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-text-field.k-text-field--small .k-text-field__fieldset .k-text-field__fieldset__container .k-text-field__fieldset__container__right,.k-text-field.k-text-field--small .k-text-field__fieldset .k-text-field__fieldset__container .k-text-field__fieldset__container__icon{flex:0 0 var(--kku-text-size-medium);margin-right:var(--kku-spacing-8)}.k-text-field.k-text-field--small .k-text-field__fieldset__message{font-size:var(--kku-text-size-xsmall);line-height:var(--kku-line-height-xsmall)}.k-text-field.k-text-field--medium{width:220px}.k-text-field.k-text-field--medium .k-text-field__fieldset{height:44px}.k-text-field.k-text-field--medium .k-text-field__fieldset .k-text-field__fieldset__legend{margin-left:var(--kku-spacing-12)}.k-text-field.k-text-field--medium .k-text-field__fieldset .k-text-field__fieldset__legend .k-text-field__fieldset__legend__label{font-size:var(--kku-text-size-xsmall);line-height:var(--kku-line-height-xsmall)}.k-text-field.k-text-field--medium .k-text-field__fieldset .k-text-field__fieldset__container{height:36px;margin-top:-8px}.k-text-field.k-text-field--medium .k-text-field__fieldset .k-text-field__fieldset__container .k-text-field__fieldset__container__input{padding:0 var(--kku-spacing-10);font-size:var(--kku-text-size-small);line-height:var(--kku-line-height-small)}.k-text-field.k-text-field--medium .k-text-field__fieldset .k-text-field__fieldset__container .k-text-field__fieldset__container__right,.k-text-field.k-text-field--medium .k-text-field__fieldset .k-text-field__fieldset__container .k-text-field__fieldset__container__icon{flex:0 0 var(--kku-text-size-large);margin-right:var(--kku-spacing-10)}.k-text-field.k-text-field--medium .k-text-field__fieldset__message{font-size:var(--kku-text-size-xsmall);line-height:var(--kku-line-height-xsmall)}.k-text-field.k-text-field--disabled .k-text-field__fieldset{border-color:var(--kku-border-color-disabled);background:var(--kku-background-color-disabled)}.k-text-field.k-text-field--disabled .k-text-field__fieldset .k-text-field__fieldset__legend>.k-text-field__fieldset__legend__label{color:var(--kku-text-color-disabled)}.k-text-field.k-text-field--disabled .k-text-field__fieldset .k-text-field__fieldset__container .k-text-field__fieldset__container__input{color:var(--kku-text-color-disabled);cursor:not-allowed}.k-text-field.k-text-field--disabled .k-text-field__fieldset .k-text-field__fieldset__container .k-text-field__fieldset__container__input::placeholder{color:var(--kku-text-color-disabled)}.k-ripple{position:absolute;opacity:.1;border-radius:50%}@keyframes ripple-effect{0%{transform:scale(.1);opacity:.32}to{transform:scale(1);opacity:.1}}@keyframes ripple-hide-effect{0%{opacity:.1}to{opacity:0}}
@@ -0,0 +1,158 @@
1
+ import { useRef as I, useId as B, useMemo as P, useEffect as g, useState as $, useCallback as q } from "react";
2
+ import { uniqueId as A } from "lodash-es";
3
+ const M = { uniqueId: A }, z = (t, n) => {
4
+ Object.entries(n).forEach(([o, p]) => {
5
+ t.style.setProperty(o, p);
6
+ });
7
+ }, E = { setStyleElement: z }, D = "span", k = "k-ripple", N = "ripple-effect", C = 400, v = 240;
8
+ function K(t) {
9
+ const n = I(null);
10
+ return { register: (s) => {
11
+ if (s.type.includes("key")) {
12
+ const u = s;
13
+ if (u.key !== "Enter" && u.key !== " " || s.target.getElementsByClassName(k)?.length > 0) return;
14
+ }
15
+ const r = M.uniqueId("k-ripple-");
16
+ n.current = new Promise((u) => {
17
+ const { x: w, y: d, width: m, height: h } = t.current.getBoundingClientRect(), {
18
+ // Default values for Keyboard event
19
+ clientX: e = w + m / 2,
20
+ clientY: b = d + h / 2
21
+ } = s, l = Math.sqrt(m * m + h * h), a = document.createElement(D);
22
+ a.classList.add(k), a.classList.add(r);
23
+ const f = (window.getComputedStyle(t.current).color || "rgb(0, 0, 0)").match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
24
+ let y = "rgba(0, 0, 0, 0.1)";
25
+ if (f) {
26
+ const [, x, S, T] = f;
27
+ y = `rgba(${x}, ${S}, ${T}, 0.4)`;
28
+ }
29
+ const L = {
30
+ top: `${(b - d - l) / h * 100}%`,
31
+ left: `${(e - w - l) / m * 100}%`,
32
+ width: `${l * 2}px`,
33
+ height: `${l * 2}px`,
34
+ animation: `${C / 1e3}s ${N} ease`,
35
+ background: y
36
+ };
37
+ E.setStyleElement(a, L), t.current.append(a), setTimeout(() => {
38
+ u(r);
39
+ }, C);
40
+ });
41
+ }, remove: () => {
42
+ n.current?.then((s) => {
43
+ const r = t.current?.getElementsByClassName(s), u = r?.[0];
44
+ u && u instanceof HTMLElement && (E.setStyleElement(u, {
45
+ animation: `${v / 1e3}s ripple-hide-effect ease`
46
+ }), setTimeout(() => {
47
+ r[0]?.remove();
48
+ }, v));
49
+ });
50
+ } };
51
+ }
52
+ function j(t) {
53
+ const n = B().replace(/[^a-zA-Z0-9-_]/g, "");
54
+ return P(() => `${t}-${n}`, [n, t]);
55
+ }
56
+ function H(t, n, o) {
57
+ g(() => {
58
+ const p = (s) => {
59
+ if (t.current && !t.current.contains(s.target)) {
60
+ if (!o) {
61
+ n();
62
+ return;
63
+ }
64
+ o.current && !o.current.contains(s.target) && n();
65
+ }
66
+ };
67
+ return setTimeout(() => {
68
+ window.addEventListener("mousedown", p);
69
+ }, 0), () => {
70
+ window.removeEventListener("mousedown", p);
71
+ };
72
+ }, [t]);
73
+ }
74
+ function U({
75
+ triggerRef: t,
76
+ contentRef: n,
77
+ position: o,
78
+ open: p,
79
+ offset: s = { x: 0, y: 0 },
80
+ gap: r = 0
81
+ }) {
82
+ const [u, w] = $({ top: 0, left: 0 });
83
+ return g(() => {
84
+ const d = () => {
85
+ const m = t.current, h = n.current;
86
+ if (!m || !h) return;
87
+ const e = m.getBoundingClientRect(), b = h.getBoundingClientRect(), l = b.width, a = b.height;
88
+ let i = 0, c = 0;
89
+ switch (o) {
90
+ case "top-start":
91
+ i = e.top - a - r, c = e.left;
92
+ break;
93
+ case "top":
94
+ i = e.top - a - r, c = e.left + e.width / 2 - l / 2;
95
+ break;
96
+ case "top-end":
97
+ i = e.top - a - r, c = e.right - l;
98
+ break;
99
+ case "bottom-start":
100
+ i = e.bottom + r, c = e.left;
101
+ break;
102
+ case "bottom":
103
+ i = e.bottom + r, c = e.left + e.width / 2 - l / 2;
104
+ break;
105
+ case "bottom-end":
106
+ i = e.bottom + r, c = e.right - l;
107
+ break;
108
+ case "left-start":
109
+ i = e.top, c = e.left - l - r;
110
+ break;
111
+ case "left":
112
+ i = e.top + e.height / 2 - a / 2, c = e.left - l - r;
113
+ break;
114
+ case "left-end":
115
+ i = e.bottom - a, c = e.left - l - r;
116
+ break;
117
+ case "right-start":
118
+ i = e.top, c = e.right + r;
119
+ break;
120
+ case "right":
121
+ i = e.top + e.height / 2 - a / 2, c = e.right + r;
122
+ break;
123
+ case "right-end":
124
+ i = e.bottom - a, c = e.right + r;
125
+ break;
126
+ }
127
+ w({
128
+ top: i + s.y,
129
+ left: c + s.x
130
+ });
131
+ };
132
+ return d(), window.addEventListener("scroll", d, !0), window.addEventListener("resize", d), () => {
133
+ window.removeEventListener("scroll", d, !0), window.removeEventListener("resize", d);
134
+ };
135
+ }, [t, n, o, p, s.x, s.y, r]), u;
136
+ }
137
+ function X(t) {
138
+ const [n, o] = $(null);
139
+ return g(() => {
140
+ o(t || document.body);
141
+ }, []), n;
142
+ }
143
+ const Y = (t) => {
144
+ const n = q((o) => {
145
+ o.key === "Escape" && (o.preventDefault(), t?.());
146
+ }, [t]);
147
+ g(() => (window.addEventListener("keydown", n), () => {
148
+ window.removeEventListener("keydown", n);
149
+ }), [n]);
150
+ };
151
+ export {
152
+ K as a,
153
+ H as b,
154
+ U as c,
155
+ X as d,
156
+ Y as e,
157
+ j as u
158
+ };
Binary file
Binary file
package/package.json CHANGED
@@ -1,26 +1,20 @@
1
1
  {
2
2
  "name": "kku-ui",
3
- "version": "0.2.1",
3
+ "version": "0.2.3",
4
4
  "type": "module",
5
- "main": "lib/cjs/index.js",
6
- "module": "lib/es/index.js",
7
5
  "exports": {
8
6
  ".": {
9
7
  "import": "./lib/es/index.js",
10
- "require": "./lib/cjs/index.js"
8
+ "types": "./lib/es/index.d.ts"
11
9
  },
12
10
  "./hooks": {
13
- "import": "./lib/es/hooks.js",
14
- "require": "./lib/cjs/hooks.js"
11
+ "import": "./lib/es/hooks.js"
15
12
  },
16
13
  "./index.css": "./lib/index.css"
17
14
  },
18
15
  "types": "lib/es/index.d.ts",
19
16
  "files": [
20
- "lib/cjs",
21
- "lib/es",
22
- "lib/es/index.d.ts",
23
- "lib/index.css"
17
+ "lib"
24
18
  ],
25
19
  "keywords": [
26
20
  "react",