@teammodlr/ui-kit 1.0.7 → 2.0.0

package/lib/style.css

@@ -1 +1 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--font-size: 14px;--font-color: #333;--font-family: "Inter", sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--white: #FFF;--black: #000;--blue: hsl(212, 92%, 53%);--blue-outline: hsla(212, 92%, 53%, .4);--blue-hover: hsl(212, 97%, 58%);--blue-focus: hsl(212, 97%, 45%);--blue-light: hsl(212, 92%, 51%);--blue-lighter: hsl(212, 92%, 58%);--blue-dark: hsl(212, 92%, 37%);--blue-darker: hsl(212, 92%, 27%);--blue-secondary: hsl(212, 89%, 93%);--blue-secondary-hover: hsl(212, 97%, 90%);--blue-secondary-focus: hsl(212, 97%, 88%);--green: hsl(148, 74%, 36%);--green-outline: hsla(148, 74%, 36%, .4);--green-hover: hsl(148, 52%, 45%);--green-focus: hsl(148, 52%, 37%);--green-light: hsl(148, 92%, 51%);--green-lighter: hsl(148, 92%, 58%);--green-dark: hsl(148, 92%, 29%);--green-darker: hsl(148, 92%, 25%);--green-secondary: hsl(148, 42%, 90%);--green-secondary-hover: hsl(148, 42%, 86%);--green-secondary-focus: hsl(148, 42%, 82%);--red: hsl(348, 63%, 50%);--red-outline: hsla(348, 63%, 50%, 4);--red-hover: hsl(348, 68%, 56%);--red-focus: hsl(348, 68%, 46%);--red-light: hsl(348, 64%, 50%);--red-lighter: hsl(348, 63%, 58%);--red-dark: hsl(348, 63%, 46%);--red-darker: hsl(348, 63%, 40%);--red-secondary: hsl(348, 61%, 92%);--red-secondary-hover: hsl(348, 61%, 89%);--red-secondary-focus: hsl(348, 61%, 85%);--yellow: hsl(37, 87%, 53%);--yellow-outline: hsla(37, 87%, 53%, .4);--yellow-hover: hsl(37, 87%, 59%);--yellow-focus: hsl(37, 87%, 48%);--yellow-light: hsl(37, 64%, 52%);--yellow-lighter: hsl(37, 63%, 60%);--yellow-dark: hsl(37, 63%, 48%);--yellow-darker: hsl(37, 63%, 42%);--yellow-secondary: hsl(37, 61%, 92%);--yellow-secondary-hover: hsl(37, 61%, 87%);--yellow-secondary-focus: hsl(37, 61%, 85%);--gray-50: #fafaf9;--gray-100: #f5f5f4;--gray-150: #eeeeee;--gray-200: #e7e5e4;--gray-300: #d6d3d1;--gray-400: #bdbab8;--gray-500: #78716c;--gray-600: #57534e;--gray-700: #44403c;--gray-800: #292524;--gray-900: #1c1917;--shadow: 0px 4px 10px 1px rgb(154 161 171 / 20%)}html,body{height:100%;font-family:var(--font-family)}*{box-sizing:border-box}.m-transition__fade-enter-active,.m-transition__fade-leave-active{transition:opacity .25s ease}.m-transition__fade-enter-from,.m-transition__fade-leave-to{opacity:0}.m-transition__scale-enter-active{animation:scale-in .125s}.m-transition__scale-leave-active{animation:scale-in .125s reverse}@keyframes scale-in{0%{transform:scale(0);opacity:0}25%{opacity:0}50%{opacity:.5}75%{transform:scale(1)}to{opacity:1}}.m-button{--button-height: 36px;--button-padding: 0 15px;--button-font-size: 15px;--button-border-radius: 4px;--button-font-weight: 500;--button-border-color: var(--gray-200);margin:0;white-space:nowrap;outline:none;border:1px solid var(--button-border-color);background-color:transparent;z-index:auto;padding:var(--button-padding);font-size:var(--button-font-size);font-weight:var(--button-font-weight);font-family:inherit;color:var(--gray-600);position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;text-align:center;cursor:pointer;height:var(--button-height);line-height:1;border-radius:var(--button-border-radius);text-decoration:none;transition:color .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1)}.m-button__content{display:flex;align-items:center;flex-wrap:nowrap;min-width:0px}.m-button.m-button--strong{font-weight:500}.m-button--block{display:flex}.m-button.m-button--icon-left .m-button__content{padding-left:8px}.m-button.m-button--icon-right .m-button__content{padding-right:8px}.m-button:not(.m-button--disabled):hover{color:var(--blue);--button-border-color: var(--blue)}.m-button:not(.m-button--disabled):focus,.m-button:not(.m-button--disabled):active{color:var(--blue-dark);--button-border-color: var(--blue-dark)}.m-button.m-button--secondary{color:var(--gray-500);--button-border-color: var(--white);background-color:var(--white)}.m-button:not(.m-button--disabled).m-button--secondary:hover{color:var(--gray-600);--button-border-color: var(--gray-150);background-color:var(--gray-150)}.m-button:not(.m-button--disabled).m-button--secondary:active,.m-button:not(.m-button--disabled).m-button--secondary:focus{color:var(--gray-600);--button-border-color: var(--gray-200);background-color:var(--gray-200)}.m-button.m-button--gray.m-button--secondary{color:var(--gray-600);--button-border-color: var(--gray-100);background-color:var(--gray-100)}.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:hover{color:var(--gray-600);--button-border-color: var(--gray-150);background-color:var(--gray-150)}.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:active,.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:focus{color:var(--gray-600);--button-border-color: var(--gray-200);background-color:var(--gray-200)}.m-button--blue{color:var(--white);--button-border-color: var(--blue);background-color:var(--blue)}.m-button--blue:not(.m-button--disabled):hover{color:var(--white);--button-border-color: var(--blue-hover);background-color:var(--blue-hover)}.m-button--blue:not(.m-button--disabled):active,.m-button--blue:not(.m-button--disabled):focus{color:var(--white);--button-border-color: var(--blue-focus);background-color:var(--blue-focus)}.m-button--blue.m-button--secondary{color:var(--blue-dark);--button-border-color: var(--blue-secondary);background-color:var(--blue-secondary)}.m-button--blue.m-button--secondary:not(.m-button--disabled):hover{color:var(--blue-darker);--button-border-color: var(--blue-secondary-hover);background-color:var(--blue-secondary-hover)}.m-button--blue.m-button--secondary:not(.m-button--disabled):active,.m-button--blue.m-button--secondary:not(.m-button--disabled):focus{color:var(--blue-darker);--button-border-color: var(--blue-secondary-focus);background-color:var(--blue-secondary-focus)}.m-button--green{color:var(--white);--button-border-color: var(--green);background-color:var(--green)}.m-button--green:not(.m-button--disabled):hover{color:var(--white);--button-border-color: var(--green-hover);background-color:var(--green-hover)}.m-button--green:not(.m-button--disabled):focus,.m-button--green:not(.m-button--disabled):active{color:var(--white);--button-border-color: var(--green-focus);background-color:var(--green-focus)}.m-button--green.m-button--secondary{color:var(--green-dark);--button-border-color: var(--green-secondary);background-color:var(--green-secondary)}.m-button--green.m-button--secondary:not(.m-button--disabled):hover{color:var(--green-darker);--button-border-color: var(--green-secondary-hover);background-color:var(--green-secondary-hover)}.m-button--green.m-button--secondary:not(.m-button--disabled):focus,.m-button--green.m-button--secondary:not(.m-button--disabled):active{color:var(--green-darker);--button-border-color: var(--green-secondary-focus);background-color:var(--green-secondary-focus)}.m-button--red{color:var(--white);--button-border-color: var(--red);background-color:var(--red)}.m-button--red:not(.m-button--disabled):hover{color:var(--white);--button-border-color: var(--red-hover);background-color:var(--red-hover)}.m-button--red:not(.m-button--disabled):focus,.m-button--red:not(.m-button--disabled):active{color:var(--white);--button-border-color: var(--red-focus);background-color:var(--red-focus)}.m-button--red.m-button--secondary{color:var(--red-dark);--button-border-color: var(--red-secondary);background-color:var(--red-secondary)}.m-button--red.m-button--secondary:not(.m-button--disabled):hover{color:var(--red-darker);--button-border-color: var(--red-secondary-hover);background-color:var(--red-secondary-hover)}.m-button--red.m-button--secondary:not(.m-button--disabled):active,.m-button--red.m-button--secondary:not(.m-button--disabled):focus{color:var(--red-darker);--button-border-color: var(--red-secondary-focus);background-color:var(--red-secondary-focus)}.m-button--yellow{color:var(--white);--button-border-color: var(--yellow);background-color:var(--yellow)}.m-button--yellow:not(.m-button--disabled):hover{color:var(--white);--button-border-color: var(--yellow-hover);background-color:var(--yellow-hover)}.m-button--yellow:not(.m-button--disabled):focus,.m-button--yellow:not(.m-button--disabled):active{color:var(--white);--button-border-color: var(--yellow-focus);background-color:var(--yellow-focus)}.m-button--yellow.m-button--secondary{color:var(--yellow-dark);--button-border-color: var(--yellow-secondary);background-color:var(--yellow-secondary)}.m-button--yellow.m-button--secondary:not(.m-button--disabled):hover{color:var(--yellow-darker);--button-border-color: var(--yellow-secondary-hover);background-color:var(--yellow-secondary-hover)}.m-button--yellow.m-button--secondary:not(.m-button--disabled):active,.m-button--yellow.m-button--secondary:not(.m-button--disabled):focus{color:var(--yellow-darker);--button-border-color: var(--yellow-secondary-focus);background-color:var(--yellow-secondary-focus)}.m-button--xs{--button-height: 22px;--button-padding: 0 6px;--button-font-size: 14px}.m-button--sm{--button-height: 28px;--button-padding: 0 10px;--button-font-size: 14px}.m-button--lg{--button-height: 40px;--button-padding: 0 18px;--button-font-size: 18px}.m-button--xl{--button-height: 44px;--button-padding: 0 22px;--button-font-size: 20px}.m-button--rounded{border-radius:34px}.m-button--rounded.m-button--xs{padding:0 10px}.m-button--rounded.m-button--sm{padding:0 14px}.m-button--rounded.m-button--md{padding:0 18px}.m-button--rounded.m-button--lg{padding:0 22px}.m-button--rounded.m-button--xl{padding:0 26px}.m-button--disabled{opacity:.8;cursor:not-allowed;user-select:none}.m-button-group{display:inline-flex;vertical-align:middle;position:relative}.m-button-group .m-button:first-child{border-top-left-radius:var(--button-border-radius);border-bottom-left-radius:var(--button-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.m-button-group .m-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--button-border-radius);border-bottom-right-radius:var(--button-border-radius)}.m-button-group .m-button{border-radius:0}.m-button-group .m-button:not(:first-child){border-left:none}.m-button-group .m-button:not(:first-child):after{content:"";position:absolute;top:0;left:0;bottom:0;width:1px;background-color:transparent;transition:color .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1)}.m-button-group .m-button:hover:not(:first-child):after{background-color:var(--button-border-color)}.m-button-group--block>.m-button{flex-basis:100%}.m-button-group--block{display:flex}.m-input__container{position:relative;display:flex;flex-direction:column;width:100%}.m-input{--input-height: 40px;--input-padding: 0 8px;--input-font-size: 15px;--input-border-radius: 4px;--input-clear-size: 1.2rem;--input-background-color: var(--white);--input-border-color: var(--gray-200);position:relative;display:inline-flex;align-items:center;height:var(--input-height);font-size:var(--input-font-size);background-color:var(--input-background-color);border:1px solid var(--input-border-color);box-shadow:none;border-radius:var(--input-border-radius);outline:0;cursor:text;transition:color .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.m-input.m-input--disabled{--input-border-color: var(--gray-300);--input-background-color: var(--gray-100);opacity:.6;cursor:not-allowed}.m-input.m-input--disabled input{cursor:not-allowed}.m-input:not(.m-input--disabled):focus-within{--input-border-color: var(--blue);box-shadow:0 0 0 2px var(--blue-outline)}.m-input:not(.m-input--disabled):not(:focus-within):hover{--input-border-color: var(--gray-400)}.m-input input{flex:1 0 0;min-width:0;height:100%;padding:var(--input-padding);font-size:inherit;color:var(--gray-600);background-color:transparent;border:0;outline:0;border-radius:var(--input-border-radius)}.m-input__clearable{display:flex;align-items:center;justify-content:center;padding:0 6px}.m-input .m-input__clearable i.m-icon--close{cursor:pointer;width:var(--input-clear-size);height:var(--input-clear-size);display:flex;align-items:center;justify-content:center;border-radius:100%;color:var(--gray-500);background-color:transparent;transition:background-color .125s cubic-bezier(.4,0,.2,1)}.m-input .m-input__clearable i.m-icon--close:hover{color:var(--gray-500);background-color:var(--gray-150)}.m-input i.m-icon--close:before{--close-icon-size: 16px;background-color:currentColor;content:"";width:var(--close-icon-size);height:var(--close-icon-size);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:var(--close-icon-size) var(--close-icon-size);mask-size:var(--close-icon-size) var(--close-icon-size)}.m-input--xs{--input-height: 32px;--input-padding: 0 8px;--input-font-size: 13px;--input-border-radius: 4px;--input-clear-size: 1.2rem}.m-input--sm{--input-height: 36px;--input-padding: 0 8px;--input-font-size: 14px;--input-border-radius: 4px;--input-clear-size: 1.2rem}.m-input--md{--input-height: 40px;--input-padding: 0 8px;--input-font-size: 15px;--input-border-radius: 4px;--input-clear-size: 1.2rem}.m-input--lg{--input-height: 42px;--input-padding: 0 8px;--input-font-size: 16px;--input-border-radius: 4px;--input-clear-size: 1.2rem}.m-input--xl{--input-height: 46px;--input-padding: 0 8px;--input-font-size: 18px;--input-border-radius: 6px;--input-clear-size: 1.2rem}.m-input__label{margin-bottom:5px;color:var(--gray-600);font-size:15px;font-weight:600}.m-input__help{margin-top:4px;color:var(--gray-500);font-size:15px;font-weight:400}.m-input__error{margin:4px 0 8px;color:var(--red);font-size:15px;font-weight:400}.m-form .m-form__input{margin-bottom:16px}.m-form .m-form__input .m-input__error{margin:4px 0 0}.m-select__container{position:relative;display:flex;flex-direction:column;width:100%}.m-select__container:focus{outline:none}.m-select{--select-height: 40px;--select-padding: 0 8px;--select-font-size: 15px;--select-border-radius: 4px;--select-clear-size: 1.2rem;--select-background-color: var(--white);--select-border-color: var(--gray-200);position:relative;display:inline-flex;align-items:center;height:var(--select-height);font-size:var(--select-font-size);background-color:var(--select-background-color);border:1px solid var(--select-border-color);box-shadow:none;border-radius:var(--select-border-radius);outline:0;cursor:text;width:100%;transition:color .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.m-select:not(.m-select--disabled):not(.m-select--focused):hover{--select-border-color: var(--gray-400)}.m-select:not(.m-select--disabled):focus,.m-select:not(.m-select--disabled):focus-within,.m-select:not(.m-select--disabled).m-select--focused{--select-border-color: var(--blue);box-shadow:0 0 0 2px var(--blue-outline);outline:none}.m-select.m-select--disabled{--select-border-color: var(--gray-300);--select-background-color: var(--gray-100);opacity:.6;cursor:not-allowed}.m-select__clearable{display:flex;align-items:center;justify-content:center;padding:0 6px}.m-select .m-select__clearable i.m-icon--close{cursor:pointer;width:var(--select-clear-size);height:var(--select-clear-size);display:flex;align-items:center;justify-content:center;border-radius:100%;color:var(--gray-500);background-color:transparent;transition:background-color .125s cubic-bezier(.4,0,.2,1)}.m-select .m-select__clearable i.m-icon--close:hover{color:var(--gray-500);background-color:var(--gray-150)}.m-select i.m-icon--close:before{--close-icon-size: 16px;background-color:currentColor;content:"";width:var(--close-icon-size);height:var(--close-icon-size);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:var(--close-icon-size) var(--close-icon-size);mask-size:var(--close-icon-size) var(--close-icon-size)}.m-select--xs{--select-height: 32px;--select-padding: 0 8px;--select-font-size: 13px;--select-border-radius: 4px;--select-clear-size: 1.2rem}.m-select--sm{--select-height: 36px;--select-padding: 0 8px;--select-font-size: 14px;--select-border-radius: 4px;--select-clear-size: 1.2rem}.m-select--md{--select-height: 40px;--select-padding: 0 8px;--select-font-size: 15px;--select-border-radius: 4px;--select-clear-size: 1.2rem}.m-select--lg{--select-height: 42px;--select-padding: 0 8px;--select-font-size: 16px;--select-border-radius: 4px;--select-clear-size: 1.2rem}.m-select--xl{--select-height: 46px;--select-padding: 0 8px;--select-font-size: 18px;--select-border-radius: 6px;--select-clear-size: 1.2rem}.m-select__label{margin-bottom:5px;color:var(--gray-600);font-size:15px;font-weight:600}.m-select__input{padding:var(--select-padding);font-size:15px;color:var(--gray-600)}.m-select__help{margin-top:4px;color:var(--gray-500);font-size:15px;font-weight:400}.m-select__error{margin:4px 0 8px;color:var(--red);font-size:15px;font-weight:400}.m-form .m-select__form{margin-bottom:16px}.m-form .m-select__form .m-select__error{margin:4px 0 0}.m-select__dropdown{z-index:100;max-height:400px;min-width:200px;overflow-y:auto;border-radius:4px;background-color:var(--white);box-shadow:0 0 0 1px var(--gray-200),0 4px 8px #0000001a;display:flex;flex-direction:column}.m-select__dropdown[data-popper-placement^=bottom-]{margin-top:5px!important}.m-select__dropdown[data-popper-placement^=top-]{margin-bottom:5px!important}.m-select__search{position:sticky;top:0;z-index:1;background-color:var(--white);padding:6px 6px 0}.m-select__options{padding:4px 0}.m-select__option{display:flex;align-items:center;justify-content:space-between;padding:8px;margin:0 4px;font-size:15px;color:var(--gray-600);cursor:pointer;transition:background-color .125s cubic-bezier(.4,0,.2,1);border-radius:4px}.m-select__option--selected{color:var(--blue)!important}.m-select__option--focused{background-color:var(--gray-100)}.m-select__placeholder-text{color:var(--gray-500)}.m-checkbox{--checkbox-width: 22px;--checkbox-height: 22px;--checkbox-border-radius: 6px;--checkbox-border-width: 1px;--checkbox-background-color: var(--white);--checkbox-border-color: var(--gray-300);--checkbox-gap: 6px;--checkbox-tick-width: 4px;--checkbox-tick-height: 10px;--checkbox-tick-height-negative: -10px;--checkbox-tick-top: 8px;--checkbox-tick-left: 3px;--checkbox-tick-border-width: 3px;display:flex;align-items:center;position:relative;font-weight:700;cursor:pointer;gap:var(--checkbox-gap)}.m-checkbox.m-checkbox--xs{--checkbox-width: 16px;--checkbox-height: 16px;--checkbox-border-radius: 4px;--checkbox-border-width: 1px;--checkbox-tick-top: 6px;--checkbox-tick-left: 1px;--checkbox-tick-width: 3px;--checkbox-tick-height: 8px;--checkbox-tick-height-negative: -8px}.m-checkbox.m-checkbox--sm{--checkbox-width: 20px;--checkbox-height: 20px;--checkbox-border-radius: 4px;--checkbox-border-width: 1px;--checkbox-tick-top: 7px;--checkbox-tick-left: 2px}.m-checkbox.m-checkbox--lg{--checkbox-width: 26px;--checkbox-height: 26px;--checkbox-border-radius: 8px;--checkbox-border-width: 1px;--checkbox-tick-top: 10px;--checkbox-tick-left: 3px;--checkbox-tick-border-width: 4px;--checkbox-tick-width: 4px;--checkbox-tick-height: 14px;--checkbox-tick-height-negative: -14px}.m-checkbox.m-checkbox--xl{--checkbox-width: 32px;--checkbox-height: 32px;--checkbox-border-radius: 8px;--checkbox-border-width: 1px;--checkbox-tick-top: 14px;--checkbox-tick-left: 5px;--checkbox-tick-border-width: 4px;--checkbox-tick-width: 5px;--checkbox-tick-height: 16px;--checkbox-tick-height-negative: -16px}.m-checkbox.m-checkbox--blue.m-checkbox--checked{--checkbox-background-color: var(--blue);--checkbox-border-color: var(--blue)}.m-checkbox.m-checkbox--green.m-checkbox--checked{--checkbox-background-color: var(--green);--checkbox-border-color: var(--green)}.m-checkbox.m-checkbox--red.m-checkbox--checked{--checkbox-background-color: var(--red);--checkbox-border-color: var(--red)}.m-checkbox.m-checkbox--yellow.m-checkbox--checked{--checkbox-background-color: var(--yellow);--checkbox-border-color: var(--yellow)}.m-checkbox input{position:absolute;opacity:0;cursor:pointer;height:0;width:0;display:none}.m-checkbox span{display:flex;height:var(--checkbox-height);width:var(--checkbox-width);border-radius:var(--checkbox-border-radius);border:var(--checkbox-border-width) solid var(--checkbox-border-color);background-color:var(--checkbox-background-color);transition:all 125ms cubic-bezier(.4,0,.2,1);position:relative}.m-checkbox:hover:not(.m-checkbox--checked):not(.m-checkbox--disabled) span{--checkbox-border-color: var(--gray-400);--checkbox-background-color: var(--gray-100)}.m-checkbox.m-checkbox--disabled span,.m-checkbox.m-checkbox--disabled .m-checkbox__label{cursor:not-allowed}.m-checkbox.m-checkbox--disabled span{opacity:.6}.m-checkbox:not(.m-checkbox--checked).m-checkbox--disabled span{--checkbox-border-color: var(--gray-300);--checkbox-background-color: var(--gray-100)}.m-checkbox.m-checkbox--checked span{background-color:var(--checkbox-background-color);border-color:var(--checkbox-background-color)}.m-checkbox.m-checkbox--checked span:before{content:"";position:absolute;transform:rotate(45deg);border-right:var(--checkbox-tick-border-width) solid transparent;border-bottom:var(--checkbox-tick-border-width) solid transparent;top:var(--checkbox-tick-top);left:var(--checkbox-tick-left);color:#fff;transform-origin:0% 100%;animation:draw-tick 125ms .17s cubic-bezier(.4,0,.2,1) forwards}.m-checkbox .m-checkbox__label{display:inline-block;vertical-align:middle;font-size:14px;line-height:24px;color:#000;font-weight:400;user-select:none}@keyframes draw-tick{0%{height:0px;width:0px;border-color:#fff;transform:translateZ(0) rotate(45deg)}25%{height:0px;width:var(--checkbox-tick-width);transform:translateZ(0) rotate(45deg)}to{border-color:#fff;height:var(--checkbox-tick-height);width:var(--checkbox-tick-width);transform:translate3d(0,var(--checkbox-tick-height-negative),0) rotate(45deg)}}.m-breadcrumbs{display:flex;list-style:none;margin:0;padding:4px;font-variant-numeric:tabular-nums;align-items:center;position:relative}.m-breadcrumbs__item:last-child .m-breadcrumbs__item-separator{display:none}.m-breadcrumbs__item{display:flex;align-items:center;outline:none;cursor:pointer;color:var(--gray-600)}.m-breadcrumbs__link{padding:4px 10px;font-size:14px;border-radius:4px;background-color:transparent;text-decoration:none;outline:none;transition:color .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.m-breadcrumbs__link:hover{color:var(--blue-dark);background-color:var(--gray-100)}.m-breadcrumbs__item-separator{display:inline-flex;padding:0 6px;cursor:default;user-select:none;color:var(--gray-300)}.m-avatar{--avatar-height: 40px;--avatar-width: 40px;--avatar-font-size: 13px;--avatar-border-radius: 4px;width:var(--avatar-width);height:var(--avatar-height);font-size:var(--avatar-font-size);position:relative;display:inline-flex;background-color:var(--gray-200);color:var(--gray-400);overflow:hidden;white-space:nowrap;vertical-align:middle;justify-content:center;align-items:center;box-sizing:content-box;border-radius:var(--avatar-border-radius);font-weight:600;user-select:none}.m-avatar img{width:100%;height:100%}.m-avatar--circle{--avatar-border-radius: 50%}.m-avatar--rounded{--avatar-border-radius: 4px}.m-avatar--square{--avatar-border-radius: 0}.m-avatar--xs{--avatar-height: 24px;--avatar-width: 24px;--avatar-font-size: 11px}.m-avatar--sm{--avatar-height: 32px;--avatar-width: 32px;--avatar-font-size: 12px}.m-avatar--md{--avatar-height: 40px;--avatar-width: 40px;--avatar-font-size: 13px}.m-avatar--lg{--avatar-height: 48px;--avatar-width: 48px;--avatar-font-size: 16px}.m-avatar--xl{--avatar-height: 56px;--avatar-width: 56px;--avatar-font-size: 17px}.m-avatar-group .m-avatar:not(:last-child){margin-right:-10px}.m-avatar-group .m-avatar{border:2px solid var(--white)}.m-message-provider__container{z-index:5000;position:fixed;height:0;overflow:visible;display:flex;flex-direction:column;align-items:center}.m-message-provider__container--top{top:12px;left:0;right:0}.m-message__wrapper{margin:0 0 8px;z-index:0;transform-origin:top center;display:flex;align-items:center}.m-message{box-sizing:border-box;display:flex;align-items:center;padding:10px 20px;border-radius:3px;flex-wrap:nowrap;max-width:720px;color:var(--gray-700);background-color:var(--white);box-shadow:0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d}.m-skeleton{--skeleton-border-radius: 4px;--skeleton-height: 100%;--skeleton-width: 100%;position:relative;display:flex;background:linear-gradient(-90deg,var(--gray-100) 0%,var(--gray-200) 50%,var(--gray-100) 100%);background-size:400% 400%;overflow:hidden;white-space:nowrap;vertical-align:middle;justify-content:center;align-items:center;box-sizing:content-box;border-radius:var(--skeleton-border-radius);font-weight:600;user-select:none;width:var(--skeleton-width);height:var(--skeleton-height)}.m-skeleton--thumb{--skeleton-border-radius: 4px;--skeleton-height: 128px;--skeleton-width: 500px}.m-skeleton--heading{--skeleton-border-radius: 4px;--skeleton-height: 32px;--skeleton-width: 500px}.m-skeleton--line{--skeleton-border-radius: 4px;--skeleton-height: 20px;--skeleton-width: 500px}.m-skeleton--circle{--skeleton-border-radius: 50%;--skeleton-height: 40px;--skeleton-width: 40px}.m-skeleton--block{--skeleton-border-radius: 4px;--skeleton-height: 100%;--skeleton-width: 100%}.m-skeleton--pulse{animation:skeleton-pulse 1.5s ease-in-out infinite;-webkit-animation:skeleton-pulse 1.5s ease-in-out infinite}@keyframes skeleton-pulse{0%{background-position:0 0}to{background-position:-135% 0}}@-webkit-keyframes skeleton-pulse{0%{background-position:0 0}to{background-position:-135% 0}}.m-link{--link-color: var(--blue);--link-color-hover: var(--blue-hover);--link-color-focus: var(--blue-focus);--link-color-visited: var(--blue-focus);color:var(--link-color);text-decoration:none;transition:color .3s cubic-bezier(.4,0,.2,1)}.m-link--underline{text-decoration:underline}.m-link--block{display:flex}.m-link:visited{color:var(--link-color-visited)}.m-link:hover{color:var(--link-color-hover);text-decoration:underline}.m-link:focus,.m-link:active{color:var(--link-color-focus)}.m-link--blue,.m-link--blue:visited{--link-color: var(--blue);--link-color-hover: var(--blue-hover);--link-color-focus: var(--blue-focus);--link-color-visited: var(--blue-focus)}.m-link--blue:hover{--link-color: var(--blue-hover);--link-color-hover: var(--blue-hover);--link-color-focus: var(--blue-focus);--link-color-visited: var(--blue-focus)}.m-link--blue:focus,.m-link--blue:active{--link-color: var(--blue-focus);--link-color-hover: var(--blue-focus);--link-color-focus: var(--blue-focus);--link-color-visited: var(--blue-focus)}.m-link--green,.m-link--green:visited{--link-color: var(--green);--link-color-hover: var(--green-hover);--link-color-focus: var(--green-focus);--link-color-visited: var(--green-focus)}.m-link--green:hover{--link-color: var(--green-hover);--link-color-hover: var(--green-hover);--link-color-focus: var(--green-focus);--link-color-visited: var(--green-focus)}.m-link--green:focus,.m-link--green:active{--link-color: var(--green-focus);--link-color-hover: var(--green-focus);--link-color-focus: var(--green-focus);--link-color-visited: var(--green-focus)}.m-link--red,.m-link--red:visited{--link-color: var(--red);--link-color-hover: var(--red-hover);--link-color-focus: var(--red-focus);--link-color-visited: var(--red-focus)}.m-link--red:hover{--link-color: var(--red-hover);--link-color-hover: var(--red-hover);--link-color-focus: var(--red-focus);--link-color-visited: var(--red-focus)}.m-link--red:focus,.m-link--red:active{--link-color: var(--red-focus);--link-color-hover: var(--red-focus);--link-color-focus: var(--red-focus);--link-color-visited: var(--red-focus)}.m-link--yellow,.m-link--yellow:visited{--link-color: var(--yellow);--link-color-hover: var(--yellow-hover);--link-color-focus: var(--yellow-focus);--link-color-visited: var(--yellow-focus)}.m-link--yellow:hover{--link-color: var(--yellow-hover);--link-color-hover: var(--yellow-hover);--link-color-focus: var(--yellow-focus);--link-color-visited: var(--yellow-focus)}.m-link--yellow:focus,.m-link--yellow:active{--link-color: var(--yellow-focus);--link-color-hover: var(--yellow-focus);--link-color-focus: var(--yellow-focus);--link-color-visited: var(--yellow-focus)}.m-tooltip--wrapper{position:relative;display:inline-block;cursor:pointer}.m-tooltip{box-sizing:border-box}.m-tooltip.m-tooltip--reverse .m-tooltip--content{background-color:#ffffffe6;color:#000}.m-tooltip .m-tooltip--content{transition:opacity .3s ease;font-size:12px;font-weight:400;color:#fff;background-color:#000000bf;border-radius:4px;padding:5px 10px;pointer-events:none;width:max-content;max-width:300px}.m-tooltip .tooltip--arrow{position:absolute;color:#000000bf;width:10px}.m-tooltip[data-popper-placement^=top]{padding:5px 0 14px}.m-tooltip[data-popper-placement^=bottom]{padding:14px 0 5px}.m-tooltip[data-popper-placement^=left]{padding:0 8px 0 5px}.m-tooltip[data-popper-placement^=right]{padding:0 5px 0 8px}.m-tab-group{--tabs-gap: 14px;--tabs-background: transparent;--tabs-border-radius: 0;--tabs-padding: 0;--tabs-border: 1px solid var(--gray-200);--tab-background: var(transparent);--tab-color: var(--gray-600);--tab-font-size: 15px;--tab-padding: 12px 8px;--tab-border-radius: 0px;--tab-font-weight: 500;--tab-box-shadow: none}.m-tab-group__tabs{background:var(--tabs-background);border-radius:var(--tabs-border-radius);position:relative;border-bottom:var(--tabs-border);display:flex;min-width:100%;width:fit-content;list-style:none;padding:var(--tabs-padding);margin:0;gap:var(--tabs-gap)}.m-tab-group__tabs .m-tab .m-tabs__button{display:flex;align-items:center;justify-content:center;font-size:var(--tab-font-size);font-weight:var(--tab-font-weight);color:var(--tab-color);background-color:var(--tab-background);padding:var(--tab-padding);border-radius:var(--tab-border-radius);box-shadow:var(--tab-box-shadow);cursor:pointer;transition:all .2s ease-in-out;border:none}.m-tab-group__tabs .m-tab:not(.m-tab--disabled) .m-tabs__button:hover{--tab-background: var(transparent);--tab-color: var(--blue)}.m-tab-group__tabs .m-tab.m-tab--active .m-tabs__button{--tab-background: var(--white);--tab-color: var(--blue);--tab-box-shadow: inset 0px -2px 0px var(--blue)}.m-tab-group__tabs .m-tab.m-tab--disabled .m-tabs__button{--tab-color: var(--gray-400);cursor:not-allowed}.m-tab-group.m-tab-group--xs{--tabs-background: transparent;--tabs-border-radius: 0;--tabs-padding: 0;--tabs-gap: 8px;--tab-font-size: 12px;--tab-padding: 10px 6px}.m-tab-group.m-tab-group--sm{--tabs-background: transparent;--tabs-border-radius: 0;--tabs-padding: 0;--tabs-gap: 10px;--tab-font-size: 13px;--tab-padding: 13px 6px}.m-tab-group.m-tab-group--lg{--tabs-background: transparent;--tabs-border-radius: 0;--tabs-padding: 0;--tab-font-size: 16px;--tab-padding: 20px 12px}.m-tab-group.m-tab-group--xl{--tabs-background: transparent;--tabs-border-radius: 0;--tabs-padding: 0;--tab-font-size: 18px;--tab-padding: 24px 16px}.m-tab-group.m-tab-group--vertical{flex-direction:column}.m-tab-group.m-tab-group--vertical .m-tab-group__tabs{flex-direction:column;gap:0;width:200px}.m-table__wrapper{width:100%;overflow-x:auto}.m-table{--table-cell-padding: 10px 15px;border-collapse:collapse;width:100%}.m-table thead tr th{padding:var(--table-cell-padding);text-align:left;font-weight:500;background-color:var(--gray-150);white-space:nowrap;color:var(--gray-700);font-size:14px;line-height:15px}.m-table tbody tr:first-child td{border-top:none}.m-table tbody tr td{padding:var(--table-cell-padding);border-top:1px solid var(--gray-150);font-size:15px;line-height:15px;vertical-align:middle}.m-table.m-table--striped tbody tr:nth-child(even) td{background-color:var(--gray-50)}.m-table.m-table--hover tbody tr:hover td{background-color:var(--gray-50)}.m-dropdown{position:relative}.m-dropdown-menu{--dropdown-menu-width: 200px;--dropdown-menu-padding: 6px;--dropdown-menu-background-color: var(--white);--dropdown-menu-box-shadow: 0px 4px 10px 1px rgb(154 161 171 / 20%);--dropdown-menu-border-radius: 4px;--dropdown-menu-border: 1px solid var(--gray-200);--dropdown-menu-item-font-size: 15px;--dropdown-menu-item-height: 34px;--dropdown-menu-item-line-height: 34px;--dropdown-menu-item-color: var(--gray-600);--dropdown-menu-item-background-color: var(--white);--dropdown-menu-item-border-radius: 4px;--dropdown-menu-item-padding: 0px 8px;--dropdown-menu-gap: 4px;position:relative;background-color:var(--dropdown-menu-background-color);box-shadow:var(--dropdown-menu-box-shadow);border-radius:var(--dropdown-menu-border-radius);min-width:var(--dropdown-menu-width);padding:var(--dropdown-menu-padding);border:var(--dropdown-menu-border)}.m-dropdown-menu ul{list-style:none;margin:0;padding:0}.m-dropdown-menu ul .m-dropdown-item{position:relative;display:flex;align-items:center;cursor:pointer;font-size:var(--dropdown-menu-item-font-size);height:var(--dropdown-menu-item-height);line-height:var(--dropdown-menu-item-line-height);color:var(--dropdown-menu-item-color);background-color:var(--dropdown-menu-item-background-color);border-radius:var(--dropdown-menu-item-border-radius);padding:var(--dropdown-menu-item-padding);gap:var(--dropdown-menu-gap)}.m-dropdown-menu ul .m-dropdown-item .m-dropdown__text{white-space:nowrap;flex:1;z-index:1}.m-dropdown-menu ul .m-dropdown-item:hover{--dropdown-menu-item-color: var(--blue);--dropdown-menu-item-background-color: var(--gray-100)}.m-dropdown__icon-right,.m-dropdown__icon-left{display:flex;align-items:center}
+._1d0g9qk4{font-size:var(--_1d0g9qk0);line-height:var(--_1d0g9qk1)}._1d0g9qk4:before{content:"";margin-bottom:var(--_1d0g9qk2);display:table}._1d0g9qk4:after{content:"";margin-top:var(--_1d0g9qk3);display:table}.l9kku40{--_1d0g9qk0: 12.8px;--_1d0g9qk1: 16.5px;--_1d0g9qk2: -.2809em;--_1d0g9qk3: -.2809em}.l9kku42{font-family:Inter,sans-serif}.l9kku43{--_1d0g9qk0: 16px;--_1d0g9qk1: 21px;--_1d0g9qk2: -.2926em;--_1d0g9qk3: -.2926em}.l9kku45{font-family:Inter,sans-serif}.l9kku46{--_1d0g9qk0: 20px;--_1d0g9qk1: 25px;--_1d0g9qk2: -.2614em;--_1d0g9qk3: -.2614em}.l9kku48{font-family:Inter,sans-serif}.l9kku49{--_1d0g9qk0: 25px;--_1d0g9qk1: 32px;--_1d0g9qk2: -.2764em;--_1d0g9qk3: -.2764em}.l9kku4b{font-family:Inter,sans-serif}.ntsf1m0{margin:0}.ntsf1m1{margin:4px}.ntsf1m2{margin:8px}.ntsf1m3{margin:12px}.ntsf1m4{margin:16px}.ntsf1m5{margin:18px}.ntsf1m6{margin:2px}.ntsf1m7{margin:6px}.ntsf1m8{margin:10px}.ntsf1m9{margin:14px}.ntsf1ma{border-radius:0}.ntsf1mb{border-radius:1px}.ntsf1mc{border-radius:2px}.ntsf1md{border-radius:4px}.ntsf1me{border-radius:6px}.ntsf1mf{border-radius:8px}.ntsf1mg{border-radius:12px}.ntsf1mh{border-radius:9999px}.ntsf1mi{font-size:14px}.ntsf1mj{font-size:10px}.ntsf1mk{font-size:12px}.ntsf1ml{font-size:16px}.ntsf1mm{font-size:18px}.ntsf1mn{font-size:20px}.ntsf1mo{box-shadow:0 3px 6px 1px #9aa1ab26}.ntsf1mp{box-shadow:0 4px 10px 1px #9aa1ab33}.ntsf1mq{box-shadow:0 7px 14px 1px #9aa1ab3b}.ntsf1mr{transition:cubic-bezier(.4,0,.2,1)}:root{--ntsf1ms: hsl(0,0%,98%);--ntsf1mt: hsl(0,0%,96.1%);--ntsf1mu: hsl(0,0%,94.9%);--ntsf1mv: hsl(0,0%,89.8%);--ntsf1mw: hsl(0,0%,83.1%);--ntsf1mx: hsl(0,0%,63.9%);--ntsf1my: hsl(0,0%,45.1%);--ntsf1mz: hsl(0,0%,32.2%);--ntsf1m10: hsl(0,0%,25.1%);--ntsf1m11: hsl(0,0%,14.9%);--ntsf1m12: hsl(0,0%,9%);--ntsf1m13: hsl(214,100%,96.9%);--ntsf1m14: hsl(214,94.6%,92.7%);--ntsf1m15: hsl(213,96.9%,87.3%);--ntsf1m16: hsl(212,96.4%,78.4%);--ntsf1m17: hsl(213,93.9%,67.8%);--ntsf1m18: hsl(217,91.2%,59.8%);--ntsf1m19: hsl(221,83.2%,53.3%);--ntsf1m1a: hsl(224,76.3%,48%);--ntsf1m1b: hsl(226,70.7%,40.2%);--ntsf1m1c: hsl(224,64.3%,32.9%);--ntsf1m1d: hsl(48,100%,96.1%);--ntsf1m1e: hsl(48,96.5%,88.8%);--ntsf1m1f: hsl(48,96.6%,76.7%);--ntsf1m1g: hsl(46,96.7%,64.5%);--ntsf1m1h: hsl(43,96.4%,56.3%);--ntsf1m1i: hsl(38,92.1%,50.2%);--ntsf1m1j: hsl(32,94.6%,43.7%);--ntsf1m1k: hsl(26,90.5%,37.1%);--ntsf1m1l: hsl(23,82.5%,31.4%);--ntsf1m1m: hsl(22,77.8%,26.5%);--ntsf1m1n: hsl(0,85.7%,97.3%);--ntsf1m1o: hsl(0,93.3%,94.1%);--ntsf1m1p: hsl(0,96.3%,89.4%);--ntsf1m1q: hsl(0,93.5%,81.8%);--ntsf1m1r: hsl(0,90.6%,70.8%);--ntsf1m1s: hsl(0,84.2%,60.2%);--ntsf1m1t: hsl(0,72.2%,50.6%);--ntsf1m1u: hsl(0,73.7%,41.8%);--ntsf1m1v: hsl(0,70%,35.3%);--ntsf1m1w: hsl(0,62.8%,30.6%);--ntsf1m1x: hsl(152,81%,95.9%);--ntsf1m1y: hsl(149,80.4%,90%);--ntsf1m1z: hsl(152,76%,80.4%);--ntsf1m20: hsl(156,71.6%,66.9%);--ntsf1m21: hsl(158,64.4%,51.6%);--ntsf1m22: hsl(160,84.1%,39.4%);--ntsf1m23: hsl(161,93.5%,30.4%);--ntsf1m24: hsl(163,93.5%,24.3%);--ntsf1m25: hsl(163,88.1%,19.8%);--ntsf1m26: hsl(164,85.7%,16.5%);--ntsf1m27: hsl(217,91.2%,59.8%);--ntsf1m28: 0px;--ntsf1m29: 4px;--ntsf1m2a: 8px;--ntsf1m2b: 12px;--ntsf1m2c: 16px;--ntsf1m2d: 18px;--ntsf1m2e: 2px;--ntsf1m2f: 6px;--ntsf1m2g: 10px;--ntsf1m2h: 14px;--ntsf1m2i: 14px;--ntsf1m2j: 10px;--ntsf1m2k: 12px;--ntsf1m2l: 16px;--ntsf1m2m: 18px;--ntsf1m2n: 20px;--ntsf1m2o: 0px 3px 6px 1px rgb(154 161 171 / 15%);--ntsf1m2p: 0px 4px 10px 1px rgb(154 161 171 / 20%);--ntsf1m2q: 0px 7px 14px 1px rgb(154 161 171 / 23%);--ntsf1m2r: cubic-bezier(.4, 0, .2, 1);--ntsf1m2s: 0px;--ntsf1m2t: 1px;--ntsf1m2u: 2px;--ntsf1m2v: 4px;--ntsf1m2w: 6px;--ntsf1m2x: 8px;--ntsf1m2y: 12px;--ntsf1m2z: 9999px}*{box-sizing:border-box}html,body{font-family:Inter}strong,h1,h2,h3,h4,h5,h6{font-variation-settings:"wght" 500}.apht5f3{--apht5f2: 4px;box-sizing:border-box;appearance:none;border:0;display:inline-flex;position:static;border-radius:var(--apht5f2);background-color:var(--apht5f1);overflow:hidden;padding:var(--ntsf1m2e) var(--ntsf1m29)}.apht5f4{color:var(--apht5f0);margin:0;padding:0;font-size:var(--ntsf1m2j);font-variation-settings:"wght" 500;letter-spacing:.5px;text-transform:uppercase;line-height:var(--ntsf1m2i);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.apht5f5{--apht5f1: var(--ntsf1m18);--apht5f0: #FFFFFF}.apht5f6{--apht5f0: white;--apht5f1: var(--ntsf1my)}.apht5f7{--apht5f0: var(--ntsf1mt);--apht5f1: var(--ntsf1mx)}.apht5f8{--apht5f1: var(--ntsf1m22);--apht5f0: #FFFFFF}.apht5f9{--apht5f1: var(--ntsf1m1h);--apht5f0: var(--ntsf1m11)}.apht5fa{--apht5f1: var(--ntsf1m1s);--apht5f0: #FFFFFF}.apht5fb{--apht5f1: var(--ntsf1m14);--apht5f0: var(--ntsf1m19)}.apht5fc{--apht5f1: var(--ntsf1mt);--apht5f0: var(--ntsf1mz)}.apht5fd{--apht5f1: var(--ntsf1mt);--apht5f0: var(--ntsf1mx)}.apht5fe{--apht5f1: var(--ntsf1m1y);--apht5f0: var(--ntsf1m23)}.apht5ff{--apht5f1: var(--ntsf1m1e);--apht5f0: var(--ntsf1m1j)}.apht5fg{--apht5f1: var(--ntsf1m1o);--apht5f0: var(--ntsf1m1t)}@keyframes button-wave-grow{0%{box-shadow:0 0 .5px 0 var(--_1s6j4ps5)}to{box-shadow:0 0 .5px 4.4px var(--_1s6j4ps5)}}@keyframes button-wave-opacity{0%{opacity:.5}90%{opacity:0}to{opacity:0}}._1s6j4ps7{align-items:center;box-sizing:border-box;display:inline-flex;font-size:var(--ntsf1m2i);font-variation-settings:"wght" 500;max-width:100%;width:auto;position:relative;text-align:center;text-decoration:none;vertical-align:middle;white-space:nowrap;justify-content:center;height:var(--_1s6j4ps0);line-height:var(--_1s6j4ps0);border-radius:var(--_1s6j4ps1);padding:var(--_1s6j4ps2);z-index:auto;background-color:var(--_1s6j4ps3);border:0;color:var(--_1s6j4ps6);transition:color .3s var(--ntsf1m2r),background-color .3s var(--ntsf1m2r),box-shadow .3s var(--ntsf1m2r),border-color .3s var(--ntsf1m2r);font-family:inherit}._1s6j4ps7:hover{cursor:pointer}._1s6j4ps7:focus{outline:none}._1s6j4ps8{--_1s6j4ps3: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1m18);--_1s6j4ps5: var(--ntsf1m18);--_1s6j4ps6: #FFFFFF}._1s6j4ps8:hover{--_1s6j4ps3: var(--ntsf1m19);--_1s6j4ps4: var(--ntsf1m19)}._1s6j4ps8:focus{--_1s6j4ps4: var(--ntsf1m18)}._1s6j4ps9{--_1s6j4ps6: var(--ntsf1mz);--_1s6j4ps3: white;--_1s6j4ps5: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1mv)}._1s6j4ps9:hover{--_1s6j4ps6: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1m18)}._1s6j4ps9:focus{--_1s6j4ps6: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1m18)}._1s6j4psa{--_1s6j4ps6: var(--ntsf1mx);--_1s6j4ps3: white;--_1s6j4ps5: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1mv)}._1s6j4psa:hover{--_1s6j4ps6: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1m18)}._1s6j4psa:focus{--_1s6j4ps6: var(--ntsf1m18);--_1s6j4ps4: var(--ntsf1m18)}._1s6j4psb{--_1s6j4ps3: var(--ntsf1m22);--_1s6j4ps4: var(--ntsf1m22);--_1s6j4ps5: var(--ntsf1m22);--_1s6j4ps6: #FFFFFF}._1s6j4psb:hover{--_1s6j4ps3: var(--ntsf1m23);--_1s6j4ps4: var(--ntsf1m23);--_1s6j4ps6: #FFFFFF}._1s6j4psb:focus{--_1s6j4ps4: var(--ntsf1m23);--_1s6j4ps3: var(--ntsf1m23)}._1s6j4psc{--_1s6j4ps3: var(--ntsf1m1h);--_1s6j4ps4: var(--ntsf1m1h);--_1s6j4ps5: var(--ntsf1m1h);--_1s6j4ps6: var(--ntsf1m11)}._1s6j4psc:hover{--_1s6j4ps3: var(--ntsf1m1i);--_1s6j4ps4: var(--ntsf1m1i);--_1s6j4ps6: var(--ntsf1m12)}._1s6j4psc:focus{--_1s6j4ps4: var(--ntsf1m1i);--_1s6j4ps3: var(--ntsf1m1i)}._1s6j4psd{--_1s6j4ps3: var(--ntsf1m1s);--_1s6j4ps4: var(--ntsf1m1s);--_1s6j4ps5: var(--ntsf1m1s);--_1s6j4ps6: #FFFFFF}._1s6j4psd:hover{--_1s6j4ps3: var(--ntsf1m1t);--_1s6j4ps4: var(--ntsf1m1t)}._1s6j4psd:focus{--_1s6j4ps4: var(--ntsf1m1t);--_1s6j4ps3: var(--ntsf1m1t)}._1s6j4pse{--_1s6j4ps3: var(--ntsf1m14);--_1s6j4ps4: var(--ntsf1m14);--_1s6j4ps6: var(--ntsf1m18)}._1s6j4pse:hover{--_1s6j4ps3: var(--ntsf1m15);--_1s6j4ps4: var(--ntsf1m15);--_1s6j4ps6: var(--ntsf1m19)}._1s6j4pse:focus{--_1s6j4ps3: var(--ntsf1m15);--_1s6j4ps4: var(--ntsf1m15);--_1s6j4ps6: var(--ntsf1m19)}._1s6j4psf{--_1s6j4ps3: var(--ntsf1mt);--_1s6j4ps4: var(--ntsf1mt);--_1s6j4ps6: var(--ntsf1my)}._1s6j4psf:hover{--_1s6j4ps3: var(--ntsf1mv);--_1s6j4ps4: var(--ntsf1mv);--_1s6j4ps6: var(--ntsf1mz)}._1s6j4psf:focus{--_1s6j4ps3: var(--ntsf1mv);--_1s6j4ps4: var(--ntsf1mv);--_1s6j4ps6: var(--ntsf1mz)}._1s6j4psg{--_1s6j4ps3: var(--ntsf1mt);--_1s6j4ps4: var(--ntsf1mt);--_1s6j4ps6: var(--ntsf1mx)}._1s6j4psg:hover{--_1s6j4ps3: var(--ntsf1mv);--_1s6j4ps4: var(--ntsf1mv);--_1s6j4ps6: var(--ntsf1my)}._1s6j4psg:focus{--_1s6j4ps3: var(--ntsf1mv);--_1s6j4ps4: var(--ntsf1mv);--_1s6j4ps6: var(--ntsf1my)}._1s6j4psh{--_1s6j4ps3: var(--ntsf1m1y);--_1s6j4ps4: var(--ntsf1m1y);--_1s6j4ps6: var(--ntsf1m23)}._1s6j4psh:hover{--_1s6j4ps3: var(--ntsf1m1z);--_1s6j4ps4: var(--ntsf1m1z);--_1s6j4ps6: var(--ntsf1m24)}._1s6j4psh:focus{--_1s6j4ps3: var(--ntsf1m1z);--_1s6j4ps4: var(--ntsf1m1z);--_1s6j4ps6: var(--ntsf1m24)}._1s6j4psi{--_1s6j4ps3: var(--ntsf1m1e);--_1s6j4ps4: var(--ntsf1m1e);--_1s6j4ps6: var(--ntsf1m1j)}._1s6j4psi:hover{--_1s6j4ps3: var(--ntsf1m1f);--_1s6j4ps4: var(--ntsf1m1f);--_1s6j4ps6: var(--ntsf1m1k)}._1s6j4psi:focus{--_1s6j4ps3: var(--ntsf1m1f);--_1s6j4ps4: var(--ntsf1m1f);--_1s6j4ps6: var(--ntsf1m1k)}._1s6j4psj{--_1s6j4ps3: var(--ntsf1m1o);--_1s6j4ps4: var(--ntsf1m1o);--_1s6j4ps6: var(--ntsf1m1s)}._1s6j4psj:hover{--_1s6j4ps3: var(--ntsf1m1p);--_1s6j4ps4: var(--ntsf1m1p);--_1s6j4ps6: var(--ntsf1m1t)}._1s6j4psj:focus{--_1s6j4ps3: var(--ntsf1m1p);--_1s6j4ps4: var(--ntsf1m1p);--_1s6j4ps6: var(--ntsf1m1t)}._1s6j4psk{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m18)}._1s6j4psk:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m19);text-decoration:underline}._1s6j4psl{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1my)}._1s6j4psl:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1mz);text-decoration:underline}._1s6j4psm{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1mx)}._1s6j4psm:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1my);text-decoration:underline}._1s6j4psn{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m22)}._1s6j4psn:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m23);text-decoration:underline}._1s6j4pso{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m1j)}._1s6j4pso:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m1k);text-decoration:underline}._1s6j4psp{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m1s)}._1s6j4psp:hover{--_1s6j4ps3: transparent;--_1s6j4ps4: transparent;--_1s6j4ps6: var(--ntsf1m1t);text-decoration:underline}._1s6j4psq{--_1s6j4ps0: 22px;--_1s6j4ps1: 2px;--_1s6j4ps2: 0 var(--ntsf1m29);font-size:var(--ntsf1m2k)}._1s6j4psr{--_1s6j4ps0: 28px;--_1s6j4ps1: 3px;--_1s6j4ps2: 0 var(--ntsf1m2a);font-size:var(--ntsf1m2k)}._1s6j4pss{--_1s6j4ps0: 36px;--_1s6j4ps1: 4px;--_1s6j4ps2: 0 var(--ntsf1m2b)}._1s6j4pst{--_1s6j4ps0: 40px;--_1s6j4ps1: 6px;--_1s6j4ps2: 0 var(--ntsf1m2b);font-size:var(--ntsf1m2l)}._1s6j4psu{--_1s6j4ps0: 45px;--_1s6j4ps1: 8px;--_1s6j4ps2: 0 var(--ntsf1m2c);font-size:var(--ntsf1m2l)}._1s6j4psv{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none;border-radius:inherit;transition:border-color .2s ease-in-out}._1s6j4psw{border:1px solid var(--_1s6j4ps4)}._1s6j4psx{border:1px solid transparent;z-index:1}._1s6j4ps7:hover ._1s6j4psw,._1s6j4ps7:focus ._1s6j4psw{border-color:transparent}._1s6j4ps7:hover ._1s6j4psx,._1s6j4ps7:focus ._1s6j4psx{border-color:var(--_1s6j4ps4)}._1s6j4psy{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none;border-radius:inherit;animation-iteration-count:1;animation-duration:.5s;z-index:1;animation-timing-function:cubic-bezier(.4,0,.15,1),cubic-bezier(.4,0,.4,1)}._1s6j4psz{z-index:1;animation-name:button-wave-grow,button-wave-opacity}._1s6j4ps10{display:flex;flex-grow:0;flex-shrink:0;font-size:0;line-height:0;user-select:none;padding:initial;height:var(--_1s6j4ps0);width:var(--_1s6j4ps0)}._1s6j4ps11{display:flex;flex-grow:0;flex-shrink:0;font-size:0;line-height:0;user-select:none}._1s6j4ps11>svg{overflow:hidden;pointer-events:none;max-width:100%;max-height:100%;vertical-align:middle}._1s6j4ps12{margin-right:var(--ntsf1m2a);position:relative}._1s6j4ps13{margin-left:var(--ntsf1m2a)}._1s6j4ps14{border-radius:9999px}._1s6j4ps15{display:flex;width:100%}.xlqdhj0{display:inline-flex;position:relative;flex-wrap:nowrap}.xlqdhj0>._1s6j4ps7:first-child:not(:last-child){margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.xlqdhj0>._1s6j4ps7:not(:first-child):not(:last-child){margin-left:0;border-radius:0;margin-right:0}.xlqdhj0>._1s6j4ps7:not(:first-child) ._1s6j4psw{border-left-width:0}.xlqdhj0>._1s6j4ps7:last-child:not(:first-child){margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.xlqdhj0>._1s6j4ps7:not(:first-child) ._1s6j4psx{left:-1px}.xlqdhj1{flex-direction:column}.sy3isg8{position:relative}.sy3isg9{--sy3isg0: 38px;--sy3isg1: 4px;--sy3isg2: var(--ntsf1m2a);--sy3isg3: var(--ntsf1m2e);--sy3isg4: var(--ntsf1mw);--sy3isg6: var(--ntsf1mz);--sy3isg5: #FFFFFF;--sy3isg7: text;height:var(--sy3isg0);min-height:var(--sy3isg0);width:100%;border-radius:var(--sy3isg1);border-width:1px;border-style:solid;border-color:var(--sy3isg4);padding:var(--sy3isg3) var(--sy3isg2);font-size:var(--ntsf1m2i);display:block;text-align:left;appearance:none;line-height:var(--sy3isg0);box-sizing:border-box;resize:none;box-shadow:none;color:var(--sy3isg6);transition:color .3s var(--ntsf1m2r),background-color .3s var(--ntsf1m2r),box-shadow .3s var(--ntsf1m2r),border-color .3s var(--ntsf1m2r)}.sy3isg9:hover{--sy3isg4: var(--ntsf1m17)}.sy3isg9:focus{--sy3isg4: var(--ntsf1m18);outline:none;box-shadow:0 0 0 2px var(--ntsf1m15)}.sy3isga{--sy3isg0: 26px;--sy3isg1: 2px;--sy3isg2: var(--ntsf1m29);font-size:var(--ntsf1m2k)}.sy3isgb{--sy3isg0: 30px;--sy3isg1: 3px;--sy3isg2: var(--ntsf1m2f);font-size:var(--ntsf1m2k)}.sy3isgc{--sy3isg0: 38px;--sy3isg1: 4px}.sy3isgd{--sy3isg0: 42px;--sy3isg1: 6px;--sy3isg2: var(--ntsf1m2g);font-size:var(--ntsf1m2l)}.sy3isge{--sy3isg0: 48px;--sy3isg1: 8px;--sy3isg2: var(--ntsf1m2b);font-size:var(--ntsf1m2l)}.sy3isgf{width:100%}.sy3isgg{--sy3isg4: var(--ntsf1mv);--sy3isg6: var(--ntsf1my);--sy3isg5: var(--ntsf1ms);--sy3isg7: not-allowed}.sy3isgg:focus{box-shadow:none}.sy3isgg:hover{cursor:not-allowed}.sy3isgh{font-variation-settings:"wght" 500;display:inline-block;font-size:var(--ntsf1m2i);word-break:break-word;cursor:pointer;margin-bottom:var(--ntsf1m29)}.sy3isgi{display:block;text-decoration:none;font-size:var(--ntsf1m2i);color:var(--ntsf1mz);line-height:var(--ntsf1m2l);word-break:break-word;margin-bottom:var(--ntsf1m2f)}.sy3isgj{display:block;text-decoration:none;font-size:var(--ntsf1m2i);color:var(--ntsf1m1t);word-break:break-word;margin-top:var(--ntsf1m2f)}.sy3isgk,.sy3isgk:hover{--sy3isg4: var(--ntsf1m1s)}.sy3isgk:focus{--sy3isg4: var(--ntsf1m1s);box-shadow:0 0 0 2px var(--ntsf1m1p)}.sy3isgl{pointer-events:none;position:absolute;z-index:1;left:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:2.25rem;color:var(--ntsf1mx)}.sy3isgm{padding-left:2.25rem}.sy3isgn{pointer-events:none;position:absolute;z-index:1;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:2.25rem;color:var(--ntsf1mx)}.sy3isgo{padding-right:2.25rem}.n5k6jk7{--n5k6jk0: 26px;--n5k6jk1: 4px;--n5k6jk2: var(--ntsf1m2f);--n5k6jk3: var(--ntsf1m28);--n5k6jk4: var(--ntsf1mt);--n5k6jk6: var(--ntsf1m10);--n5k6jk5: var(--ntsf1mt);height:var(--n5k6jk0);min-height:var(--n5k6jk0);line-height:var(--n5k6jk0);border-radius:var(--n5k6jk1);border-width:1px;border-style:solid;color:var(--n5k6jk6);border-color:var(--n5k6jk4);background-color:var(--n5k6jk5);padding:var(--n5k6jk3) var(--n5k6jk2);word-break:break-word;font-size:var(--ntsf1m2i);display:inline-flex;align-items:center}.n5k6jk8{margin-left:var(--ntsf1m29);appearance:none;outline:none;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:transparent;padding:3px;position:relative;right:-2px;color:var(--ntsf1my);border-radius:50%}.n5k6jk8:hover{background-color:var(--ntsf1mv);color:var(--ntsf1m10)}.n5k6jk8:focus{outline:none}._1cuepoga{position:relative;outline:none}._1cuepogb{--_1cuepog0: 38px;--_1cuepog1: 4px;--_1cuepog2: var(--ntsf1m2a);--_1cuepog3: var(--ntsf1m28);--_1cuepog4: var(--ntsf1mw);--_1cuepog6: var(--ntsf1m12);--_1cuepog5: #FFFFFF;--_1cuepog7: text;height:var(--_1cuepog0);min-height:var(--_1cuepog0);width:100%;border-radius:var(--_1cuepog1);border-width:1px;border-style:solid;border-color:var(--_1cuepog4);padding:var(--_1cuepog3) var(--_1cuepog2);font-size:var(--ntsf1m2i);display:block;text-align:left;appearance:none;line-height:var(--_1cuepog0);box-sizing:border-box;resize:none;box-shadow:none;transition:color .3s var(--ntsf1m2r),background-color .3s var(--ntsf1m2r),box-shadow .3s var(--ntsf1m2r),border-color .3s var(--ntsf1m2r)}._1cuepogb:hover{--_1cuepog4: var(--ntsf1m17)}._1cuepogb:focus{--_1cuepog4: var(--ntsf1m18);outline:none;box-shadow:0 0 0 2px var(--ntsf1m15)}._1cuepogc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ntsf1m29)}._1cuepogd{width:100%}._1cuepoge{--_1cuepog4: var(--ntsf1mv);--_1cuepog6: var(--ntsf1my);--_1cuepog5: var(--ntsf1ms);--_1cuepog7: not-allowed}._1cuepoge:focus{box-shadow:none}._1cuepoge:hover{cursor:not-allowed}._1cuepogf{font-variation-settings:"wght" 500;display:inline-block;font-size:var(--ntsf1m2i);word-break:break-word;cursor:pointer;margin-bottom:var(--ntsf1m29)}._1cuepogg{display:block;text-decoration:none;font-size:var(--ntsf1m2i);color:var(--ntsf1mz);line-height:var(--ntsf1m2l);word-break:break-word;margin-bottom:var(--ntsf1m2f)}._1cuepogh{display:block;text-decoration:none;font-size:var(--ntsf1m2i);color:var(--ntsf1m1t);word-break:break-word;margin-top:var(--ntsf1m2f)}._1cuepogi,._1cuepogi:hover{--_1cuepog4: var(--ntsf1m1s)}._1cuepogi:focus{--_1cuepog4: var(--ntsf1m1s);box-shadow:0 0 0 2px var(--ntsf1m1p)}._1cuepogj{pointer-events:none;position:absolute;z-index:1;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:2.25rem;color:var(--ntsf1mx)}._1cuepogk{padding-right:2.25rem}._1cuepogl{background-color:#fff;border-radius:4px;z-index:4000;border:1px solid var(--ntsf1mv);box-shadow:var(--ntsf1m2p);max-height:230px;overflow-y:auto}._1cuepogm{user-select:none;color:var(--ntsf1my)}._1cuepogn{padding:var(--ntsf1m29) var(--ntsf1m29) 0;background-color:#fff;position:sticky;top:0;z-index:1}._1cuepogo{padding:var(--ntsf1m29);display:flex;flex-direction:column;gap:var(--ntsf1m2e)}._1cuepogp{--_1cuepog8: var(--ntsf1m11);--_1cuepog9: #FFFFFF;position:relative;display:flex;align-items:center;cursor:pointer;min-height:36px;font-size:var(--ntsf1m2i);padding-block:var(--ntsf1m2f);padding-inline:var(--ntsf1m2b);gap:var(--ntsf1m2a);color:var(--_1cuepog8);transition:background-color .05s ease-in-out;background-color:var(--_1cuepog9);border-radius:4px}._1cuepogp:hover,._1cuepogq,._1cuepogq:hover{--_1cuepog8: var(--ntsf1m11);--_1cuepog9: var(--ntsf1mt)}._1cuepogr{--_1cuepog8: var(--ntsf1m13);--_1cuepog9: var(--ntsf1m18)}._1cuepogr:hover{--_1cuepog8: var(--ntsf1m13);--_1cuepog9: var(--ntsf1m19)}.x8ms5j5{position:relative;display:inline-flex;align-items:center;cursor:pointer;gap:var(--ntsf1m2f)}.x8ms5j6{position:absolute;opacity:0;cursor:pointer}.x8ms5j7{position:absolute;width:calc(var(--x8ms5j0) - 2px);height:calc(var(--x8ms5j0) - 2px);top:50%;left:50%;transform:translate(-50%,-50%);color:#fff}.x8ms5j8{--x8ms5j0: 20px;--x8ms5j1: 4px;--x8ms5j2: white;--x8ms5j3: var(--ntsf1mw);--x8ms5j4: var(--ntsf1mz);position:relative;width:var(--x8ms5j0);height:var(--x8ms5j0);border-radius:var(--x8ms5j1);background-color:var(--x8ms5j2);border:1px solid var(--x8ms5j3);color:var(--x8ms5j4);cursor:pointer;transition:all .125s var(--ntsf1m2r)}.x8ms5j9{--x8ms5j3: var(--ntsf1m18);--x8ms5j2: var(--ntsf1m18)}.x8ms5j9:after{content:""}.x8ms5ja{opacity:.5;cursor:not-allowed}.x8ms5jb{--x8ms5j3: var(--ntsf1m18);--x8ms5j2: var(--ntsf1m18)}.x8ms5jc{margin-left:var(--ntsf1m2e);font-variation-settings:"wght" 500;display:inline-block;font-size:var(--ntsf1m2i);word-break:break-word;cursor:pointer}.x8ms5jd{--x8ms5j0: 16px}.x8ms5je{--x8ms5j0: 18px}.x8ms5jf{--x8ms5j0: 20px}.x8ms5jg{--x8ms5j0: 22px}.x8ms5jh{--x8ms5j0: 24px}.x8ms5j5 .x8ms5j6:focus+.x8ms5j8{box-shadow:0 0 0 2px var(--ntsf1m14)}._9ebxua5{position:relative;display:inline-flex;align-items:center;cursor:pointer;gap:var(--ntsf1m2f)}._9ebxua6{position:absolute;opacity:0;cursor:pointer}._9ebxua7{position:absolute;width:calc(var(--_9ebxua0) - 2px);height:calc(var(--_9ebxua0) - 2px);top:50%;left:50%;transform:translate(-50%,-50%);color:#fff}._9ebxua8{--_9ebxua0: 20px;--_9ebxua1: var(--ntsf1m2z);--_9ebxua2: white;--_9ebxua3: var(--ntsf1mw);--_9ebxua4: var(--ntsf1mz);position:relative;width:var(--_9ebxua0);height:var(--_9ebxua0);border-radius:var(--_9ebxua1);background-color:var(--_9ebxua2);border:1px solid var(--_9ebxua3);color:var(--_9ebxua4);cursor:pointer;transition:all .125s var(--ntsf1m2r)}._9ebxua9{--_9ebxua3: var(--ntsf1m18);--_9ebxua2: var(--ntsf1m18)}._9ebxua9:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(var(--_9ebxua0) - 10px);height:calc(var(--_9ebxua0) - 10px);border-radius:var(--ntsf1m2z);background-color:#fff}._9ebxuaa{opacity:.5;cursor:not-allowed}._9ebxuab{--_9ebxua3: var(--ntsf1m18);--_9ebxua2: var(--ntsf1m18)}._9ebxuac{margin-left:var(--ntsf1m2e);font-variation-settings:"wght" 500;display:inline-block;font-size:var(--ntsf1m2i);word-break:break-word;cursor:pointer}._9ebxuad{--_9ebxua0: 16px}._9ebxuae{--_9ebxua0: 18px}._9ebxuaf{--_9ebxua0: 20px}._9ebxuag{--_9ebxua0: 22px}._9ebxuah{--_9ebxua0: 24px}._17j4o87{--_17j4o84: transparent;align-items:center;box-sizing:border-box;display:inline-flex;font-size:var(--ntsf1m2i);font-variation-settings:"wght" 500;max-width:100%;width:auto;position:relative;text-align:center;text-decoration:none;vertical-align:middle;white-space:nowrap;justify-content:center;height:var(--_17j4o80);line-height:var(--_17j4o80);border-radius:var(--_17j4o81);padding:var(--_17j4o82);z-index:auto;background-color:var(--_17j4o83);border:1px solid var(--_17j4o84);color:var(--_17j4o86);transition:color .3s var(--ntsf1m2r),background-color .3s var(--ntsf1m2r),box-shadow .3s var(--ntsf1m2r),border-color .3s var(--ntsf1m2r);font-family:inherit}._17j4o87:hover{cursor:pointer}._17j4o87:focus{outline:none}._17j4o88{--_17j4o83: white;--_17j4o86: var(--ntsf1m18);--_17j4o85: var(--ntsf1m12);--_17j4o84: var(--ntsf1mv);box-shadow:0 .5px 0 4px #00000003}._17j4o88:hover{--_17j4o86: var(--ntsf1m19)}._17j4o88:focus{--_17j4o86: var(--ntsf1m18)}._17j4o89{--_17j4o86: var(--ntsf1mx);--_17j4o83: transparent;--_17j4o85: var(--ntsf1m18);--_17j4o84: transparent}._17j4o89:hover{--_17j4o86: var(--ntsf1m17)}._17j4o89:focus{--_17j4o86: var(--ntsf1m17)}._17j4o8a{--_17j4o80: 22px;--_17j4o81: 2px;--_17j4o82: 0 var(--ntsf1m29);font-size:var(--ntsf1m2k)}._17j4o8b{--_17j4o80: 28px;--_17j4o81: 3px;--_17j4o82: 0 var(--ntsf1m2a);font-size:var(--ntsf1m2k)}._17j4o8c{--_17j4o80: 36px;--_17j4o81: 4px;--_17j4o82: 0 var(--ntsf1m2b)}._17j4o8d{--_17j4o80: 40px;--_17j4o81: 6px;--_17j4o82: 0 var(--ntsf1m2b);font-size:var(--ntsf1m2l)}._17j4o8e{--_17j4o80: 45px;--_17j4o81: 8px;--_17j4o82: 0 var(--ntsf1m2c);font-size:var(--ntsf1m2l)}._17j4o8f{display:flex;flex-grow:0;flex-shrink:0;font-size:0;line-height:0;user-select:none}._17j4o8f>svg{overflow:hidden;pointer-events:none;max-width:100%;max-height:100%;vertical-align:middle}._17j4o8g{pointer-events:none;position:absolute;border:0;left:0;right:0;top:0;bottom:0;opacity:0}.nd85wg3{--nd85wg0: var(--ntsf1m29);--nd85wg1: var(--ntsf1m2v);--nd85wg2: var(--ntsf1m29);display:inline-flex;position:relative;flex-wrap:nowrap;background-color:var(--ntsf1mt);padding:var(--nd85wg0);border-radius:var(--nd85wg1);gap:var(--nd85wg2)}.nd85wg4{flex-direction:column}.nd85wg5{display:flex;align-items:stretch}.nd85wg3.nd85wg5>._17j4o87{flex:1}._1j3winb0{display:flex;position:relative;margin:0;padding:0;list-style:none;box-sizing:border-box}._1j3winb1{display:flex;align-items:center;font-size:var(--ntsf1m2i)}._1j3winb2{padding:0 var(--ntsf1m2a);color:var(--ntsf1mz);cursor:pointer;text-decoration:none;outline:0;transition:color .2s var(--ntsf1m2r)}._1j3winb2:hover{color:var(--ntsf1m18)}._1j3winb3{padding:0 var(--ntsf1m29);display:inline-flex;color:var(--ntsf1mw);user-select:none}._1j3winb0 ._1j3winb1:last-child ._1j3winb3{display:none}._1e8logj0{overflow:auto;will-change:transform;contain:strict}._1e8logj0>div{overflow:hidden;will-change:transform}._1e8logj0>div>div{will-change:transform;backface-visibility:hidden}._1rgsfqk2{width:var(--_1rgsfqk0);height:var(--_1rgsfqk0);border-radius:var(--_1rgsfqk1);background-color:var(--ntsf1mw);box-sizing:content-box;cursor:inherit;display:flex;flex-direction:column;justify-content:center;outline:none;overflow:hidden;position:static;border:0;padding:var(--ntsf1m28);margin:var(--ntsf1m29);color:var(--ntsf1my);font-size:var(--ntsf1m2k);align-items:center}._1rgsfqk3{--_1rgsfqk0: 16px;--_1rgsfqk1: 2px}._1rgsfqk4{--_1rgsfqk0: 24px;--_1rgsfqk1: 3px}._1rgsfqk5{--_1rgsfqk0: 32px;--_1rgsfqk1: 4px}._1rgsfqk6{--_1rgsfqk0: 40px;--_1rgsfqk1: 6px}._1rgsfqk7{--_1rgsfqk0: 96px;--_1rgsfqk1: 8px}._1rgsfqk8{display:flex;width:100%;height:100%;flex:1 1 100%}._1rgsfqk9{border-radius:9999px}._1rgsfqka{box-shadow:0 0 0 2px #fff}._4zgvid0{display:flex;line-height:1;list-style:none;padding:0}._4zgvid1{margin-right:-10px}@keyframes skeleton-shine-animation{0%{transform:translate(-37.5%)}to{transform:translate(37.5%)}}.vvn4y44{--vvn4y41: 100%;--vvn4y40: 1em;--vvn4y42: var(--ntsf1m2a);--vvn4y43: 4px;width:var(--vvn4y41);height:var(--vvn4y40);margin-bottom:var(--vvn4y42);border-radius:var(--vvn4y43);position:relative;display:inline-block;overflow:hidden;background-color:var(--ntsf1mv)}.vvn4y45:after{content:"";position:absolute;pointer-events:none;inset:0 -150%;background-image:linear-gradient(to right,transparent 25%,var(--ntsf1mt) 37%,transparent 63%);animation:skeleton-shine-animation 2s var(--ntsf1m2r) infinite}.zjrp2q2{--zjrp2q0: var(--ntsf1m12);--zjrp2q1: var(--ntsf1mt);z-index:50;transition:opacity .3s,ease;font-size:13px;font-weight:400;color:var(--zjrp2q1);background-color:var(--zjrp2q0);border-radius:var(--ntsf1m2v);padding:var(--ntsf1m2f) var(--ntsf1m2a);pointer-events:none;width:max-content;max-width:300px;box-sizing:border-box}.zjrp2q2[data-popper-placement^=top]{margin:var(--ntsf1m29) 0 var(--ntsf1m2b) 0}.zjrp2q2[data-popper-placement^=bottom]{margin:var(--ntsf1m2b) 0 var(--ntsf1m29) 0}.zjrp2q2[data-popper-placement^=left]{margin:0 var(--ntsf1m2b) 0 var(--ntsf1m29)}.zjrp2q2[data-popper-placement^=right]{margin:0 var(--ntsf1m29) 0 var(--ntsf1m2b)}.zjrp2q3{--zjrp2q0: var(--ntsf1mt);--zjrp2q1: var(--ntsf1m12)}._2y08mp0{background-color:#fff;border-radius:5px;padding:5px 0;z-index:4000;box-sizing:border-box;position:relative;min-width:200px;max-width:350px;border:1px solid var(--ntsf1mv);box-shadow:var(--ntsf1m2p)}._2y08mp1{list-style:none;margin:0;padding:0}._2y08mp2{position:relative;display:flex;align-items:center;cursor:pointer;min-height:36px;font-size:var(--ntsf1m2i);padding-block:var(--ntsf1m2f);padding-inline:var(--ntsf1m2b);gap:var(--ntsf1m2a);color:var(--ntsf1m11);transition:background-color .05s ease-in-out}._2y08mp2:hover{background-color:var(--ntsf1mt)}._2y08mp3{flex:1;white-space:nowrap}._2y08mp4{display:flex;align-items:center}@keyframes fade-out-background-animation{0%{opacity:1}to{opacity:0}}@keyframes fade-in-background-animation{0%{opacity:0}to{opacity:1}}@keyframes fade-out-animation{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@keyframes fade-in-animation{0%{opacity:0;transform:scale(.5);left:var(--_1iwo5bc3);top:var(--_1iwo5bc4)}70%{opacity:1;transform:scale(1.03);left:0;top:0}to{opacity:1;transform:scale(1)}}@keyframes fade-in-animation-no-bounce{0%{opacity:0;transform:scale(.5);left:var(--_1iwo5bc3);top:var(--_1iwo5bc4)}60%{opacity:1}to{opacity:1;transform:scale(1);left:0;top:0}}._1iwo5bc5{--_1iwo5bc0: 300px}._1iwo5bc6{--_1iwo5bc0: 400px}._1iwo5bc7{--_1iwo5bc0: 640px}._1iwo5bc8{--_1iwo5bc0: 800px}._1iwo5bc9{--_1iwo5bc0: 1140px}._1iwo5bca{z-index:100;background-color:#737373b3;position:fixed;top:0;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center}._1iwo5bcb{background-color:#fff;width:100%;max-width:var(--_1iwo5bc0);border-radius:var(--ntsf1m2w);box-shadow:0 1px 2px -2px #00000014,0 3px 6px #0000000f,0 5px 12px 4px #0000000a;border:1px solid rgba(0,0,0,.45);display:flex;flex-direction:column;position:relative}._1iwo5bcc{display:flex;justify-content:space-between;align-items:start;padding:var(--ntsf1m2c) var(--ntsf1m2c) 0 var(--ntsf1m2c);flex-shrink:0}._1iwo5bcd{margin:0;font-size:var(--ntsf1m2m);font-variation-settings:"wght" 500;display:flex;align-items:center}._1iwo5bce{outline:none var(--ntsf1mw);display:inline-block;position:relative;width:1.5rem;height:1.5rem;background-color:transparent;border:none;padding:0;cursor:pointer;transition:all .2s;border-radius:var(--ntsf1m2z);margin-left:var(--ntsf1m2a)}._1iwo5bce:hover{background-color:var(--ntsf1mt)}._1iwo5bce:focus{background-color:var(--ntsf1mt)}._1iwo5bce:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);width:.8rem;height:2px;background-color:var(--ntsf1my);transform-origin:center;transition:all .2s}._1iwo5bce:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);width:.8rem;height:2px;background-color:var(--ntsf1my);transform-origin:center;transition:all .2s}._1iwo5bcf{padding:var(--ntsf1m2c);display:flex;flex-direction:column;flex-grow:1}._1iwo5bcg{display:flex;width:100%;align-items:center;padding:0 var(--ntsf1m2c) var(--ntsf1m2c) var(--ntsf1m2c)}._1iwo5bch{animation-name:fade-in-animation-no-bounce;animation-duration:.2s;animation-timing-function:ease-in-out;transition:transform .3s ease-out}._1iwo5bci{animation-name:fade-in-animation;animation-duration:.25s;animation-timing-function:ease-in-out;transition:var(--ntsf1m2r)}._1iwo5bcj{animation-name:fade-out-animation;animation-duration:.2s;animation-timing-function:ease-in-out}._1iwo5bck{animation-name:fade-in-background-animation;animation-duration:.1s;animation-timing-function:ease-in-out}._1iwo5bcl{animation-name:fade-out-background-animation;animation-duration:.2s;animation-timing-function:ease-in-out}._1wz91940{display:flex;flex-direction:column;width:280px;align-items:center;gap:10px;user-select:none;z-index:100;background-color:#fff;border-radius:5px;padding:var(--ntsf1m2b);border:1px solid var(--ntsf1mv);box-shadow:var(--ntsf1m2p)}._1wz91941{transform:translate(-50%,-50%);position:absolute;width:14px;height:14px;border-radius:50%;background-color:transparent;border:2px solid white;box-shadow:var(--ntsf1m2o);cursor:crosshair}._1wz91942{background-image:linear-gradient(45deg,#bebebe 25%,transparent 25%),linear-gradient(-45deg,#bebebe 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bebebe 75%),linear-gradient(-45deg,transparent 75%,#bebebe 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px;overflow:hidden;min-width:32px;min-height:32px;width:32px;height:32px;border-radius:100%;border:1px solid var(--ntsf1mv)}._1wz91943{position:relative;height:160px;width:100%;cursor:crosshair}._1wz91944{background-image:linear-gradient(45deg,#bebebe 25%,transparent 25%),linear-gradient(-45deg,#bebebe 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bebebe 75%),linear-gradient(-45deg,transparent 75%,#bebebe 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px;overflow:hidden;min-width:28px;min-height:28px;width:28px;height:28px;border-radius:5px;border:1px solid var(--ntsf1mv);position:relative;cursor:pointer}._1wz91945{position:absolute;top:0;left:0;right:0;bottom:0}._1wz91946{display:flex;gap:var(--ntsf1m2a);width:100%;align-items:center;justify-content:space-between}._1wz91947{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,#FFF,rgba(255,255,255,0))}._1wz91948{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(0deg,#000,transparent)}._16zb7bi0{user-select:none;position:relative;height:14px}._16zb7bi1{user-select:none;position:absolute;height:14px;background-image:linear-gradient(45deg,#bebebe 25%,transparent 25%),linear-gradient(-45deg,#bebebe 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bebebe 75%),linear-gradient(-45deg,transparent 75%,#bebebe 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0px;overflow:hidden;top:0;left:0;right:0;bottom:0;border-radius:6px}._16zb7bi2{position:absolute;top:0;left:0;right:0;bottom:0}._16zb7bi3{transform:translate(-50%);position:absolute;top:-2px;width:18px;height:18px;border-radius:50%;background-color:#ffffff80;border:2px solid white;box-shadow:0 0 3px #000;cursor:e-resize}

package/lib/styles/theme.css.d.ts

@@ -0,0 +1,147 @@
+export declare const spaceScale: {
+    '0': string;
+    '0.5': string;
+    '1': string;
+    '1.5': string;
+    '2': string;
+    '2.5': string;
+    '3': string;
+    '3.5': string;
+    '4': string;
+    '5': string;
+};
+export declare const marginVariants: Record<"0" | "1" | "0.5" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5", string>;
+export declare const borderRadiusScale: {
+    none: string;
+    xsmall: string;
+    small: string;
+    default: string;
+    medium: string;
+    large: string;
+    xlarge: string;
+    full: string;
+};
+export declare const borderRadiusVariants: Record<"default" | "small" | "none" | "medium" | "large" | "xsmall" | "xlarge" | "full", string>;
+export declare const fontSizeScale: {
+    base: string;
+    xsmall: string;
+    small: string;
+    large: string;
+    xlarge: string;
+    xxlarge: string;
+};
+export declare const fontSizeVariants: Record<"base" | "small" | "large" | "xsmall" | "xlarge" | "xxlarge", string>;
+export declare const shadows: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export declare const shadowVariants: Record<"sm" | "md" | "lg", string>;
+export declare const transitions: {
+    default: string;
+};
+export declare const transitionsVariants: Record<"default", string>;
+export declare const themeVars: {
+    color: {
+        gray: {
+            50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            150: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        blue: {
+            50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        amber: {
+            50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        red: {
+            50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        green: {
+            50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    space: {
+        0: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        0.5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        1.5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        2.5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        3.5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    fontSize: {
+        base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xxlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    shadow: {
+        sm: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    transition: {
+        default: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    rounded: {
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        default: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};

package/lib/styles/typography.css.d.ts

@@ -0,0 +1,22 @@
+import type { FontMetrics } from "@capsizecss/core";
+interface Meta {
+    fallback: string;
+    file: string;
+    format: string;
+    metrics: FontMetrics;
+    name: string;
+    wghtRange: string;
+    wghts: {
+        [key: string]: number;
+    };
+}
+type FontFamilyId = "INTER";
+type Fonts = Record<FontFamilyId, Meta>;
+export declare const fonts: Fonts;
+export declare const fontStyles: {
+    INTER_SMALL: string;
+    INTER_MED: string;
+    INTER_LARGE: string;
+    INTER_XLARGE: string;
+};
+export {};

package/lib/types/props.d.ts

@@ -1,2 +1,3 @@
 export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type Color = 'white' | 'black' | 'blue' | 'green' | 'red' | 'yellow' | 'gray';
+export type Variant = 'default' | 'tertiary' | 'primary' | 'success' | 'warning' | 'error';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "1.0.7",
+  "version": "2.0.0",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",
@@ -30,44 +30,51 @@
     "build:storybook": "storybook build",
     "test": "",
     "gen-types": "vue-tsc --declaration --emitDeclarationOnly -p tsconfig.vitest.json --composite false",
-    "prerelease": "npm run build",
-    "release": "np"
+    "release:prepare": "npm run build",
+    "release": "bumpp --execute=\"npm run release:prepare\" --all"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.20.5",
-    "@nuxt/kit": "^3.0.0",
-    "@nuxt/schema": "^3.0.0",
-    "@storybook/addon-actions": "^7.0.0-beta.29",
-    "@storybook/addon-essentials": "^7.0.0-beta.29",
-    "@storybook/addon-interactions": "^7.0.0-beta.29",
-    "@storybook/addon-links": "^7.0.0-beta.29",
-    "@storybook/addons": "^7.0.0-beta.29",
+    "@babel/core": "^7.21.0",
+    "@capsizecss/core": "^3.1.0",
+    "@capsizecss/metrics": "^1.1.1",
+    "@capsizecss/vanilla-extract": "^1.0.0",
+    "@nuxt/kit": "^3.3.2",
+    "@nuxt/schema": "^3.3.2",
+    "@storybook/addon-actions": "^7.0.0",
+    "@storybook/addon-essentials": "^7.0.0",
+    "@storybook/addon-interactions": "^7.0.0",
+    "@storybook/addon-links": "^7.0.0",
+    "@storybook/addons": "^7.0.0",
     "@storybook/testing-library": "^0.0.14-next.1",
-    "@storybook/theming": "^7.0.0-beta.29",
-    "@storybook/vue3": "^7.0.0-beta.29",
-    "@storybook/vue3-vite": "^7.0.0-beta.29",
-    "@types/jsdom": "^20.0.1",
-    "@types/node": "^18.11.17",
+    "@storybook/theming": "^7.0.0",
+    "@storybook/vue3": "^7.0.0",
+    "@storybook/vue3-vite": "^7.0.0",
+    "@types/jsdom": "^21.1.0",
+    "@types/node": "^18.14.1",
+    "@vanilla-extract/css": "^1.9.5",
+    "@vanilla-extract/vite-plugin": "^3.8.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/tsconfig": "^0.1.3",
-    "babel-loader": "^8.3.0",
-    "jsdom": "^20.0.3",
+    "@vueuse/core": "^10.0.0-beta.2",
+    "babel-loader": "^9.1.2",
+    "bumpp": "^9.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.0-beta.29",
+    "storybook": "^7.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.2",
-    "vue": "^3.2.45",
-    "vue-loader": "^16.8.3",
-    "vue-tsc": "^1.0.19"
+    "typescript": "^4.9.5",
+    "vite": "^4.2.1",
+    "vue": "^3.2.47",
+    "vue-loader": "^17.0.1",
+    "vue-tsc": "^1.2.0"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@vueuse/core": "^9.11.0",
-    "np": "^7.6.3"
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vueuse/integrations": "^10.0.0-beta.2",
+    "focus-trap": "^7.4.0"
   }
 }

package/src/__storybook__/argTypes.ts

@@ -1,4 +1,4 @@
-import { placementWhileList } from "@/composables/usePopper";
+import { placementWhileList } from "../composables/usePopper";
 
 export const sizeArgType = () => ({
     size: {
@@ -32,6 +32,24 @@ export const colorArgType = () => ({
     }
 });
 
+export const variantArgType = () => ({
+    variant: {
+        options: [
+            'default',
+            'tertiary',
+            'primary',
+            'success',
+            'warning',
+            'error'
+        ],
+        control: {
+            type: 'select',
+            default: 'default'
+        }
+    }
+});
+
+
 export const popperPositionArgType = () => ({
     placement: {
         options: placementWhileList,

package/src/components/avatar/Avatar.vue

@@ -1,10 +1,10 @@
 <template>
     <span 
         :class="classes"
-        :style="customSize" 
         ref="avatar"
     >
         <MImage
+            :class="imageClass"
             v-if="(src || srcSet) && imageExists"
             :src="src"
             :alt="src"
@@ -16,8 +16,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, inject, onMounted } from 'vue';
+import type {PropType} from 'vue';
+import {computed, defineComponent, inject, onMounted, ref} from 'vue';
 import MImage from '../image/Image.vue';
+import * as style from "./style";
+import type {Size} from "../../types/props";
+import {AVATAR_GROUP_STATE} from "../avatargroup/symbol";
 
 export default defineComponent({
     name: "MAvatar",
@@ -34,49 +38,52 @@ export default defineComponent({
             default: ""
         },
         size: {
-            type: [Number, String],
+            type: String as PropType<Size>,
             default: 'md'
         },
-        fit: {
-            type: String,
-            default: "cover"
-        },
-        variant: {
-            type: String,
-            default: "circle"
+        rounded: {
+            type: Boolean,
+            default: false
         }
     },
     emits: {
         error: (e: Event) => true
     },
     setup(props, { emit }) {
-        const avatarGroup = inject('avatarGroup', undefined);
+        const avatarGroup = inject(AVATAR_GROUP_STATE, undefined);
         const avatar = ref<HTMLElement | null>(null);
         const imageExists = ref(true);
-        const sizeValue = ref('');
+        const sizeValue = ref<Size>('md');
 
         const groupSize = computed(() => {
-            // @ts-ignore
             return avatarGroup?.size
         });
 
-        const isCustomSize = computed(() => {
-            return typeof props.size === 'number' || props.size.includes('px')
+        const groupRounded = computed(() => {
+            return avatarGroup?.rounded
         });
 
-        const customSize = computed(() => {
-            return isCustomSize.value ? {
-                width: props.size,
-                height: props.size
-            } : {}
+        const inGroup = computed(() => {
+            return !!avatarGroup
         });
 
+        const size = computed<Size>(() => {
+            return groupSize.value || props.size
+        });
+
+        const rounded = computed(() => {
+            return groupRounded.value || props.rounded
+        })
+
         const classes = computed(() => {
-            return {
-                'm-avatar': true,
-                [`m-avatar--${sizeValue.value}`]: !isCustomSize.value,
-                [`m-avatar--${props.variant}`]: true
-            }
+            return [
+                style.base,
+                [style.size[size.value]],
+                {
+                    [style.outline]: inGroup.value,
+                    [style.rounded]: rounded.value,
+                }
+            ]
         });
 
         const handleImageLoadError = (e: Event) => {
@@ -92,8 +99,8 @@ export default defineComponent({
             avatar,
             avatarGroup,
             classes,
-            customSize,
             imageExists,
+            imageClass: style.image,
 
             handleImageLoadError
         }

package/src/components/avatar/examples/index.stories.ts

@@ -11,7 +11,7 @@ import {
 import {
     colorArgType,
     createStory, sizeArgType
-} from "@/__storybook__";
+} from "../../../__storybook__";
 
 export default {
     component: MAvatar,