@esportsplus/ui 0.0.28 → 0.0.29

package/build/components.css

@@ -0,0 +1,26 @@
+.accordion{max-height:var(--max-height);opacity:0;pointer-events:none;transition:max-height var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out}.accordion.--active{opacity:1;pointer-events:auto}
+.alert{max-width:calc(100% - var(--margin-horizontal)*2);width:var(--width)}.alert--deactivating{opacity:0;transform:translateY(-50%)}.alert--activating:not(.--active){transform:translateY(50%)}.alert-close{animation:alert-close var(--transition-duration) ease-in-out;bottom:0;position:absolute;right:100%;top:0;transition:transform var(--transition-duration) ease-in-out;z-index:0}.alert-message{opacity:0;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out}.alert-message:not(.--active){left:0;pointer-events:none;position:absolute;top:0;transform:translateX(-25%)}.alert-message.--active{opacity:1}.alert-timer{height:var(--height);transition:opacity var(--transition-duration) ease-in-out;width:var(--width)}.alert-timer-bg,.alert-timer-meter{fill:none;stroke-width:var(--border-width);stroke:var(--border-color)}.alert-timer-meter{stroke-linecap:round;stroke-dasharray:360;stroke-dashoffset:0;animation:alert-timer var(--animation-duration) ease-in-out;transform:rotate(-90deg);transform-origin:50% 50%}@keyframes alert-close{0%{transform:translateX(150%)}to{transform:translateX(0)}}@keyframes alert-timer{0%{stroke-dashoffset:360}to{stroke-dashoffset:0}}
+.anchor{max-height:calc(100% - var(--margin-vertical)*2);max-width:calc(100% - var(--margin-horizontal)*2);pointer-events:auto;position:absolute;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}
+.banner{background-position:50%;background-size:cover;bottom:0;left:0;position:absolute;right:0;top:0;z-index:-1}.banner--fixed{position:fixed}
+.border{border-top:var(--border-width) var(--border-style) var(--border-color);position:relative;width:100%}.border+.border{display:none}
+.bubble{background:var(--background);border-radius:var(--border-radius);height:var(--height);width:var(--width)}.bubble--bottom-left,.bubble--bottom-right,.bubble--top-left,.bubble--top-right{position:absolute}.bubble--bottom-left,.bubble--top-left{left:var(--position-horizontal)}.bubble--bottom-right,.bubble--top-right{right:var(--position-horizontal)}.bubble--bottom-left,.bubble--bottom-right{bottom:var(--position-vertical)}.bubble--top-left,.bubble--top-right{top:var(--position-vertical)}
+.button{align-content:center;align-items:center;background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);font-weight:var(--font-weight);justify-content:center;line-height:var(--line-height);min-width:var(--min-width);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;transition:all var(--transition-duration) ease-in-out;width:var(--width)}.button:after{border-radius:inherit;bottom:0;box-shadow:var(--box-shadow);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.button--flat:after{display:none}.button--processing{color:transparent;pointer-events:none}.button--processing:before{animation:button--processing var(--animation-duration) infinite linear;border:var(--border-width) solid var(--border-color);border-radius:100%;border-right-color:transparent;border-top-color:transparent;bottom:50%;content:"";height:var(--size);position:absolute;right:50%;transform:translate(50%,50%);width:var(--size)}.button--processing *{opacity:0}@keyframes button--processing{0%{transform:translate(50%,50%) rotate(0deg)}to{transform:translate(50%,50%) rotate(359deg)}}.button--top-left,.button--top-right{position:absolute;top:calc((var(--padding-vertical) + var(--line-height)/2)*-1)}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}
+.card{background:var(--background);border-radius:var(--border-radius);padding:var(--padding-vertical) var(--padding-horizontal);position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,max-height var(--transition-duration) ease-in-out;width:var(--width)}.card:after{border-radius:inherit;bottom:0;box-shadow:var(--box-shadow);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.card--flat:after{display:none}
+.container{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 auto;max-width:var(--max-width);padding:var(--padding-vertical) var(--padding-horizontal);position:relative;width:100%}
+.ellipsis-dot:first-child{animation:ellipsis-dot-one var(--animation-duration) linear infinite}.ellipsis-dot:nth-child(2){animation:ellipsis-dot-two var(--animation-duration) linear infinite}.ellipsis-dot:nth-child(3){animation:ellipsis-dot-three var(--animation-duration) linear infinite}@keyframes ellipsis-dot-one{0%{opacity:1}65%{opacity:1}66%{opacity:0}to{opacity:0}}@keyframes ellipsis-dot-two{0%{opacity:0}21%{opacity:0}22%{opacity:1}65%{opacity:1}66%{opacity:0}to{opacity:0}}@keyframes ellipsis-dot-three{0%{opacity:0}43%{opacity:0}44%{opacity:1}65%{opacity:1}66%{opacity:0}to{opacity:0}}
+button,input,select,textarea{background:transparent;border:0;border-radius:0;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover,select,select:active,select:focus,select:hover,textarea,textarea:active,textarea:focus,textarea:hover{outline:none}button:invalid,input:invalid,select:invalid,textarea:invalid{box-shadow:none}form{margin:0;padding:0;width:100%}label{cursor:pointer}.field{display:flex;position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;width:var(--width);z-index:1}.field:not(.--active):hover{z-index:8}.field.--active{z-index:9}.field--optional{max-height:var(--max-height);opacity:0;pointer-events:none;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,max-height var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out}.field.--active .field--optional{opacity:1;pointer-events:auto}.field-description,.field-error,.field-title{word-wrap:break-word;color:var(--color);font-size:var(--font-size);position:relative;width:100%}.field-description:empty,.field-error:empty,.field-title:empty{height:0;margin:0}.field-error{animation:field-error .32s linear 1}@keyframes field-error{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}to{transform:translate(0)}}.field-mask:after{border-radius:inherit;bottom:0;box-shadow:var(--box-shadow);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;z-index:0}.field-mask--flat:after{display:none}.field-mask--outline:before{border-radius:var(--border-radius);bottom:0;box-shadow:0 0 0 var(--outline-width) var(--border-color);content:"";left:0;opacity:var(--outline-opacity);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.field-required{background:var(--background);border-radius:var(--border-radius);height:var(--size);width:var(--size)}.field-tag--hidden{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:0;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:0;z-index:-1}.field-title{font-weight:var(--font-weight);z-index:1}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:var(--width)}.field-mask--checkbox:invalid,.field-mask--checkbox:required,.field-mask--radio:invalid,.field-mask--radio:required,.field-mask--switch:invalid,.field-mask--switch:required{box-shadow:none}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY)) rotate(var(--rotate)) scale(var(--scale));width:var(--width)}.field-mask--checkbox .field-tag,.field-mask--radio .field-tag,.field-mask--switch .field-tag{height:0;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:0;z-index:0}.field-mask--checkbox:before,.field-mask--radio:before{bottom:50%;position:absolute;right:50%}.field-mask--radio:before,.field-mask--switch:before{background:var(--accent);border-radius:inherit;transform-origin:center}.field-mask--checkbox:before{border-bottom:var(--border-width) solid var(--accent);border-right:var(--border-width) solid var(--accent);transform-origin:center left}.field-mask--switch:before{left:var(--padding-horizontal);position:absolute;top:var(--padding-vertical)}.field-mask--input,.field-mask--select{align-items:center;background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);display:flex;flex-wrap:wrap;font-size:var(--font-size);line-height:var(--line-height);position:relative;width:100%}.field-mask--input:invalid,.field-mask--input:required,.field-mask--select:invalid,.field-mask--select:required{box-shadow:none}.field-mask--input,.field-mask--input .field-tag,.field-mask--select,.field-mask--select .field-tag{color:var(--color)}.field-mask--input .field-tag,.field-mask--select .field-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-mask--input{cursor:text;min-height:calc(var(--padding-vertical)*2 + var(--size))}.field-mask--input .field-tag{flex:1 1 auto;min-width:0;padding:var(--padding-vertical) var(--padding-horizontal)}.field-mask--input .field-tag[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.field-mask--select{cursor:pointer;padding:var(--padding-vertical) calc(var(--padding-horizontal)/1.5 + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal)}.field-mask--select.--padding{padding-right:calc(var(--padding-horizontal)*1.5 + var(--arrow-size))}.field-mask-arrow{border-color:var(--border-color);border-style:var(--border-style);border-width:0 var(--border-width) var(--border-width) 0;bottom:calc(50% + var(--arrow-spacer));content:"";height:var(--arrow-size);position:absolute;right:calc(var(--padding-horizontal) + var(--arrow-spacer));transform:translateY(50%) rotate(45deg);width:var(--arrow-size)}.field-text{padding-right:var(--padding-horizontal)}
+.group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 calc(var(--margin-horizontal)/-2);position:relative;width:calc(100% + var(--margin-horizontal))}.group--offset-bottom{margin-bottom:calc(var(--margin-vertical)*-1)}.group--offset-top{margin-top:calc(var(--margin-vertical)*-1)}.group--scroller .group-item:first-child{margin-left:0}.group--scroller .group-item:last-child{margin-right:0}.group-item{display:flex;margin:var(--margin-vertical) calc(var(--margin-horizontal)/2) 0;position:relative;width:var(--width)}.group-item[class*="--width"]{width:calc(var(--width) - var(--margin-horizontal))}
+.icon{color:var(--color);display:flex;flex:0 0 var(--width);height:var(--height);pointer-events:none;position:relative;transform:rotate(var(--rotate));width:var(--width)}.icon svg{fill:currentColor;color:currentColor;height:100%;width:100%}
+.link{align-content:center;background:var(--background);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);justify-content:flex-start;line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;width:var(--width)}.link--underline.--active,.link--underline:not(.--active):hover{text-decoration:underline}
+.loading{animation:loading var(--animation-duration) infinite linear;animation-delay:var(--animation-delay);border:var(--border-width) var(--border-style) var(--border-color);border-radius:100%;border-right-color:transparent;border-top-color:transparent;box-shadow:var(--box-shadow);height:var(--height);pointer-events:none;position:relative;transition:border-color var(--transition-duration) ease-in-out;width:var(--width);z-index:0}@keyframes loading{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+.overlay{bottom:0;height:100vh;left:0;pointer-events:none;position:fixed;right:0;top:0;width:100vw;z-index:9}
+.page{min-height:var(--min-height);position:relative;width:var(--width)}.page-subtitle,.page-suptitle,.page-title{color:var(--color);display:block;line-height:var(--line-height);position:relative;width:100%;z-index:1}.page-subtitle,.page-suptitle{font-size:var(--font-size)}
+.processing{animation:processing var(--animation-duration) linear infinite;height:var(--size);position:relative;width:var(--size)}.processing-ring{clip:rect(calc(var(--size)/2),var(--size),var(--size),0)}.processing-ring,.processing-ring:after,.processing-ring:before{bottom:0;left:0;position:absolute;right:0;top:0}.processing-ring,.processing-ring:before{animation:processing calc(var(--animation-duration)/2) cubic-bezier(.77,0,.175,1) infinite}.processing-ring:after,.processing-ring:before{border-radius:50%;content:""}.processing-ring:after{border:var(--border-width) var(--border-style) var(--border-color-secondary);opacity:var(--opacity)}.processing-ring:before{border-top:var(--border-width) var(--border-style) var(--border-color-primary)}@keyframes processing{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+body,html{height:100%;overflow-x:hidden;width:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--background);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);min-width:var(--min-width);text-rendering:optimizeLegibility}*,:after,:before{box-sizing:border-box;transition:inherit}section{align-content:flex-start;display:flex;flex-wrap:wrap;justify-content:flex-start;position:relative;width:var(--width)}h1,h2,h3,h4,h5{word-wrap:break-word;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);margin:0;padding:0;position:relative;width:100%}h1 sub,h1 sup,h2 sub,h2 sup,h3 sub,h3 sup,h4 sub,h4 sup,h5 sub,h5 sup{font-size:.64em}a{cursor:pointer;outline:none;text-decoration:none}a,b,strong{color:var(--color,inherit)}b,strong{font-weight:var(--font-weight)}p{word-wrap:break-word}p,pre{margin:0;padding:0;width:100%}pre{overflow-wrap:break-word;white-space:break-spaces}sub,sup{font-size:.8em}sub{bottom:-.48em}sup{top:-.48em}
+.row{display:flex;flex-wrap:wrap;justify-content:flex-start;min-height:var(--min-height);position:relative;width:100%}
+::-webkit-scrollbar,::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:window-inactive,::-webkit-scrollbar-track{background:transparent;box-shadow:unset}.--scrollbar{height:100%;margin-right:calc(var(--scrollbar-width)*-1);overflow-x:hidden;overflow-y:scroll;scroll-behavior:smooth;width:calc(100% + var(--scrollbar-width))}.scrollbar{height:100%;z-index:9}.scrollbar,.scrollbar:before{position:absolute;right:0;top:0;transition:opacity var(--transition-duration) ease-in-out;width:var(--width)}.scrollbar:before{background:var(--background-default);border-radius:var(--border-radius);content:"";height:var(--height);transform:var(--translate);transform-origin:top center}.scrollbar--fixed{position:fixed}.scrollbar--hidden{opacity:0}
+.sidebar{bottom:var(--position-vertical);cursor:default;max-width:var(--width);overflow:hidden;pointer-events:auto;position:absolute;top:var(--position-vertical);transition:max-width var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:calc(100% - var(--position-horizontal)*2);z-index:1}.sidebar:not(.--active) input[type=password]{display:none}.sidebar--e{right:var(--position-horizontal)}.sidebar--e.sidebar--offscreen:not(.--active){transform:translateX(var(--width))}.sidebar--w{left:var(--position-horizontal)}.sidebar--w.sidebar--offscreen:not(.--active){transform:translateX(calc(var(--width)*-1))}.sidebar-content{flex:0 0 var(--width-default);width:var(--width-default)}
+.site{z-index:0}
+.text{align-items:center;color:var(--color);display:flex;flex-flow:wrap;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);position:relative;transition:color var(--transition-duration) ease-in-out;width:var(--width)}
+.thumbnail{background:var(--background);border-radius:var(--border-radius);height:var(--height);position:relative;width:var(--width)}
+.tooltip{cursor:pointer;position:relative;z-index:8}.tooltip.--active{z-index:9}.tooltip.--active.tooltip--box:before{bottom:50%;content:"";height:calc(100% + var(--spacer)*2.5);position:absolute;right:50%;transform:translate(50%,50%);width:calc(100% + var(--spacer)*2.5);z-index:-1}.tooltip.--active :not(.tooltip) .tooltip-arrow,.tooltip.--active>.tooltip-arrow{transform:rotate(-90deg)}.tooltip-arrow{margin:0 -1px;transform:rotate(90deg)}.tooltip-content,.tooltip-message{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);max-width:var(--max-width);min-width:var(--min-width);opacity:0;overflow:hidden;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:var(--width);z-index:9}.tooltip.--active :not(.tooltip)>.tooltip-content,.tooltip.--active :not(.tooltip)>.tooltip-message,.tooltip.--active>.tooltip-content,.tooltip.--active>.tooltip-message{opacity:1}.tooltip:not(.--active) :not(.tooltip)>.tooltip-content,.tooltip:not(.--active) :not(.tooltip)>.tooltip-content *,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message *,.tooltip:not(.--active)>.tooltip-content,.tooltip:not(.--active)>.tooltip-content *,.tooltip:not(.--active)>.tooltip-message,.tooltip:not(.--active)>.tooltip-message *{pointer-events:none}.tooltip-content--c,.tooltip-message--c{bottom:50%;position:absolute;right:50%;transform:translate(50%,50%) scale(var(--scaleX),var(--scaleY));transform-origin:center center}.tooltip.--active :not(.tooltip)>.tooltip-content--c,.tooltip.--active :not(.tooltip)>.tooltip-message--c,.tooltip.--active>.tooltip-content--c,.tooltip.--active>.tooltip-message--c{transform:translate(50%,50%) scale(1)}.tooltip-content--en,.tooltip-content--es,.tooltip-message--en,.tooltip-message--es{left:calc(100% - var(--spacer));position:absolute;transform:scale(var(--scaleX),var(--scaleY))}.tooltip.--active :not(.tooltip)>.tooltip-content--en,.tooltip.--active :not(.tooltip)>.tooltip-content--es,.tooltip.--active :not(.tooltip)>.tooltip-message--en,.tooltip.--active :not(.tooltip)>.tooltip-message--es,.tooltip.--active>.tooltip-content--en,.tooltip.--active>.tooltip-content--es,.tooltip.--active>.tooltip-message--en,.tooltip.--active>.tooltip-message--es{transform:translateX(calc(var(--spacer)*2))}.tooltip-content--e,.tooltip-message--e{bottom:50%;left:calc(100% - var(--spacer));position:absolute;transform:translateY(50%) scaleX(var(--scaleX));transform-origin:center left}.tooltip.--active :not(.tooltip)>.tooltip-content--e,.tooltip.--active :not(.tooltip)>.tooltip-message--e,.tooltip.--active>.tooltip-content--e,.tooltip.--active>.tooltip-message--e{transform:translate(calc(var(--spacer)*2),50%) scale(1)}.tooltip-content--en,.tooltip-message--en{top:0;transform-origin:top left}.tooltip-content--es,.tooltip-message--es{bottom:0;transform-origin:bottom left}.tooltip-content--ne,.tooltip-content--nw,.tooltip-message--ne,.tooltip-message--nw{bottom:calc(100% - var(--spacer));position:absolute;transform:scale(var(--scaleX),var(--scaleY))}.tooltip.--active :not(.tooltip)>.tooltip-content--ne,.tooltip.--active :not(.tooltip)>.tooltip-content--nw,.tooltip.--active :not(.tooltip)>.tooltip-message--ne,.tooltip.--active :not(.tooltip)>.tooltip-message--nw,.tooltip.--active>.tooltip-content--ne,.tooltip.--active>.tooltip-content--nw,.tooltip.--active>.tooltip-message--ne,.tooltip.--active>.tooltip-message--nw{transform:translateY(calc(var(--spacer)*-2))}.tooltip-content--n,.tooltip-message--n{bottom:calc(100% - var(--spacer));position:absolute;right:50%;transform:translateX(50%) scaleY(var(--scaleY));transform-origin:center bottom}.tooltip.--active :not(.tooltip)>.tooltip-content--n,.tooltip.--active :not(.tooltip)>.tooltip-message--n,.tooltip.--active>.tooltip-content--n,.tooltip.--active>.tooltip-message--n{transform:translate(50%,calc(var(--spacer)*-2)) scale(1)}.tooltip-content--ne,.tooltip-message--ne{right:0;transform-origin:bottom right}.tooltip-content--nw,.tooltip-message--nw{left:0;transform-origin:bottom left}.tooltip-content--se,.tooltip-content--sw,.tooltip-message--se,.tooltip-message--sw{position:absolute;top:calc(100% - var(--spacer));transform:scale(var(--scaleX),var(--scaleY))}.tooltip.--active :not(.tooltip)>.tooltip-content--se,.tooltip.--active :not(.tooltip)>.tooltip-content--sw,.tooltip.--active :not(.tooltip)>.tooltip-message--se,.tooltip.--active :not(.tooltip)>.tooltip-message--sw,.tooltip.--active>.tooltip-content--se,.tooltip.--active>.tooltip-content--sw,.tooltip.--active>.tooltip-message--se,.tooltip.--active>.tooltip-message--sw{transform:translateY(calc(var(--spacer)*2))}.tooltip-content--s,.tooltip-message--s{position:absolute;right:50%;top:calc(100% - var(--spacer));transform:translateX(50%) scaleY(var(--scaleY));transform-origin:center top}.tooltip.--active :not(.tooltip)>.tooltip-content--s,.tooltip.--active :not(.tooltip)>.tooltip-message--s,.tooltip.--active>.tooltip-content--s,.tooltip.--active>.tooltip-message--s{transform:translate(50%,calc(var(--spacer)*2)) scale(1)}.tooltip-content--se,.tooltip-message--se{right:0;transform-origin:top right}.tooltip-content--sw,.tooltip-message--sw{left:0;transform-origin:top left}.tooltip-content--wn,.tooltip-content--ws,.tooltip-message--wn,.tooltip-message--ws{position:absolute;right:calc(100% - var(--spacer));transform:scale(var(--scale))}.tooltip.--active :not(.tooltip)>.tooltip-content--wn,.tooltip.--active :not(.tooltip)>.tooltip-content--ws,.tooltip.--active :not(.tooltip)>.tooltip-message--wn,.tooltip.--active :not(.tooltip)>.tooltip-message--ws,.tooltip.--active>.tooltip-content--wn,.tooltip.--active>.tooltip-content--ws,.tooltip.--active>.tooltip-message--wn,.tooltip.--active>.tooltip-message--ws{transform:translateX(calc(var(--spacer)*-2))}.tooltip-content--w,.tooltip-message--w{bottom:50%;position:absolute;right:calc(100% - var(--spacer));transform:translateY(50%) scaleX(var(--scaleX));transform-origin:center right}.tooltip.--active :not(.tooltip)>.tooltip-content--w,.tooltip.--active :not(.tooltip)>.tooltip-message--w,.tooltip.--active>.tooltip-content--w,.tooltip.--active>.tooltip-message--w{transform:translate(calc(var(--spacer)*-2),50%) scale(1)}.tooltip-content--wn,.tooltip-message--wn{top:0;transform-origin:top right}.tooltip-content--ws,.tooltip-message--ws{bottom:0;transform-origin:bottom right}.tooltip-message{background:var(--background);color:var(--color);cursor:auto;font-size:var(--font-size);font-weight:var(--font-weight);line-height:normal;padding:var(--padding-vertical) var(--padding-horizontal);pointer-events:none;white-space:nowrap}

package/build/css/components.css

@@ -0,0 +1,26 @@
+.accordion{max-height:var(--max-height);opacity:0;pointer-events:none;transition:max-height var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out}.accordion.--active{opacity:1;pointer-events:auto}
+.alert{max-width:calc(100% - var(--margin-horizontal)*2);width:var(--width)}.alert--deactivating{opacity:0;transform:translateY(-50%)}.alert--activating:not(.--active){transform:translateY(50%)}.alert-close{animation:alert-close var(--transition-duration) ease-in-out;bottom:0;position:absolute;right:100%;top:0;transition:transform var(--transition-duration) ease-in-out;z-index:0}.alert-message{opacity:0;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out}.alert-message:not(.--active){left:0;pointer-events:none;position:absolute;top:0;transform:translateX(-25%)}.alert-message.--active{opacity:1}.alert-timer{height:var(--height);transition:opacity var(--transition-duration) ease-in-out;width:var(--width)}.alert-timer-bg,.alert-timer-meter{fill:none;stroke-width:var(--border-width);stroke:var(--border-color)}.alert-timer-meter{stroke-linecap:round;stroke-dasharray:360;stroke-dashoffset:0;animation:alert-timer var(--animation-duration) ease-in-out;transform:rotate(-90deg);transform-origin:50% 50%}@keyframes alert-close{0%{transform:translateX(150%)}to{transform:translateX(0)}}@keyframes alert-timer{0%{stroke-dashoffset:360}to{stroke-dashoffset:0}}
+.anchor{max-height:calc(100% - var(--margin-vertical)*2);max-width:calc(100% - var(--margin-horizontal)*2);pointer-events:auto;position:absolute;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}
+.banner{background-position:50%;background-size:cover;bottom:0;left:0;position:absolute;right:0;top:0;z-index:-1}.banner--fixed{position:fixed}
+.border{border-top:var(--border-width) var(--border-style) var(--border-color);position:relative;width:100%}.border+.border{display:none}
+.bubble{background:var(--background);border-radius:var(--border-radius);height:var(--height);width:var(--width)}.bubble--bottom-left,.bubble--bottom-right,.bubble--top-left,.bubble--top-right{position:absolute}.bubble--bottom-left,.bubble--top-left{left:var(--position-horizontal)}.bubble--bottom-right,.bubble--top-right{right:var(--position-horizontal)}.bubble--bottom-left,.bubble--bottom-right{bottom:var(--position-vertical)}.bubble--top-left,.bubble--top-right{top:var(--position-vertical)}
+.button{align-content:center;align-items:center;background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);font-weight:var(--font-weight);justify-content:center;line-height:var(--line-height);min-width:var(--min-width);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;transition:all var(--transition-duration) ease-in-out;width:var(--width)}.button:after{border-radius:inherit;bottom:0;box-shadow:var(--box-shadow);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.button--flat:after{display:none}.button--processing{color:transparent;pointer-events:none}.button--processing:before{animation:button--processing var(--animation-duration) infinite linear;border:var(--border-width) solid var(--border-color);border-radius:100%;border-right-color:transparent;border-top-color:transparent;bottom:50%;content:"";height:var(--size);position:absolute;right:50%;transform:translate(50%,50%);width:var(--size)}.button--processing *{opacity:0}@keyframes button--processing{0%{transform:translate(50%,50%) rotate(0deg)}to{transform:translate(50%,50%) rotate(359deg)}}.button--top-left,.button--top-right{position:absolute;top:calc((var(--padding-vertical) + var(--line-height)/2)*-1)}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}
+.card{background:var(--background);border-radius:var(--border-radius);padding:var(--padding-vertical) var(--padding-horizontal);position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,max-height var(--transition-duration) ease-in-out;width:var(--width)}.card:after{border-radius:inherit;bottom:0;box-shadow:var(--box-shadow);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.card--flat:after{display:none}
+.container{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 auto;max-width:var(--max-width);padding:var(--padding-vertical) var(--padding-horizontal);position:relative;width:100%}
+.ellipsis-dot:first-child{animation:ellipsis-dot-one var(--animation-duration) linear infinite}.ellipsis-dot:nth-child(2){animation:ellipsis-dot-two var(--animation-duration) linear infinite}.ellipsis-dot:nth-child(3){animation:ellipsis-dot-three var(--animation-duration) linear infinite}@keyframes ellipsis-dot-one{0%{opacity:1}65%{opacity:1}66%{opacity:0}to{opacity:0}}@keyframes ellipsis-dot-two{0%{opacity:0}21%{opacity:0}22%{opacity:1}65%{opacity:1}66%{opacity:0}to{opacity:0}}@keyframes ellipsis-dot-three{0%{opacity:0}43%{opacity:0}44%{opacity:1}65%{opacity:1}66%{opacity:0}to{opacity:0}}
+button,input,select,textarea{background:transparent;border:0;border-radius:0;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover,select,select:active,select:focus,select:hover,textarea,textarea:active,textarea:focus,textarea:hover{outline:none}button:invalid,input:invalid,select:invalid,textarea:invalid{box-shadow:none}form{margin:0;padding:0;width:100%}label{cursor:pointer}.field{display:flex;position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;width:var(--width);z-index:1}.field:not(.--active):hover{z-index:8}.field.--active{z-index:9}.field--optional{max-height:var(--max-height);opacity:0;pointer-events:none;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,max-height var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out}.field.--active .field--optional{opacity:1;pointer-events:auto}.field-description,.field-error,.field-title{word-wrap:break-word;color:var(--color);font-size:var(--font-size);position:relative;width:100%}.field-description:empty,.field-error:empty,.field-title:empty{height:0;margin:0}.field-error{animation:field-error .32s linear 1}@keyframes field-error{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}to{transform:translate(0)}}.field-mask:after{border-radius:inherit;bottom:0;box-shadow:var(--box-shadow);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;z-index:0}.field-mask--flat:after{display:none}.field-mask--outline:before{border-radius:var(--border-radius);bottom:0;box-shadow:0 0 0 var(--outline-width) var(--border-color);content:"";left:0;opacity:var(--outline-opacity);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.field-required{background:var(--background);border-radius:var(--border-radius);height:var(--size);width:var(--size)}.field-tag--hidden{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:0;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:0;z-index:-1}.field-title{font-weight:var(--font-weight);z-index:1}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:var(--width)}.field-mask--checkbox:invalid,.field-mask--checkbox:required,.field-mask--radio:invalid,.field-mask--radio:required,.field-mask--switch:invalid,.field-mask--switch:required{box-shadow:none}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY)) rotate(var(--rotate)) scale(var(--scale));width:var(--width)}.field-mask--checkbox .field-tag,.field-mask--radio .field-tag,.field-mask--switch .field-tag{height:0;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:0;z-index:0}.field-mask--checkbox:before,.field-mask--radio:before{bottom:50%;position:absolute;right:50%}.field-mask--radio:before,.field-mask--switch:before{background:var(--accent);border-radius:inherit;transform-origin:center}.field-mask--checkbox:before{border-bottom:var(--border-width) solid var(--accent);border-right:var(--border-width) solid var(--accent);transform-origin:center left}.field-mask--switch:before{left:var(--padding-horizontal);position:absolute;top:var(--padding-vertical)}.field-mask--input,.field-mask--select{align-items:center;background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);display:flex;flex-wrap:wrap;font-size:var(--font-size);line-height:var(--line-height);position:relative;width:100%}.field-mask--input:invalid,.field-mask--input:required,.field-mask--select:invalid,.field-mask--select:required{box-shadow:none}.field-mask--input,.field-mask--input .field-tag,.field-mask--select,.field-mask--select .field-tag{color:var(--color)}.field-mask--input .field-tag,.field-mask--select .field-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-mask--input{cursor:text;min-height:calc(var(--padding-vertical)*2 + var(--size))}.field-mask--input .field-tag{flex:1 1 auto;min-width:0;padding:var(--padding-vertical) var(--padding-horizontal)}.field-mask--input .field-tag[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.field-mask--select{cursor:pointer;padding:var(--padding-vertical) calc(var(--padding-horizontal)/1.5 + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal)}.field-mask--select.--padding{padding-right:calc(var(--padding-horizontal)*1.5 + var(--arrow-size))}.field-mask-arrow{border-color:var(--border-color);border-style:var(--border-style);border-width:0 var(--border-width) var(--border-width) 0;bottom:calc(50% + var(--arrow-spacer));content:"";height:var(--arrow-size);position:absolute;right:calc(var(--padding-horizontal) + var(--arrow-spacer));transform:translateY(50%) rotate(45deg);width:var(--arrow-size)}.field-text{padding-right:var(--padding-horizontal)}
+.group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 calc(var(--margin-horizontal)/-2);position:relative;width:calc(100% + var(--margin-horizontal))}.group--offset-bottom{margin-bottom:calc(var(--margin-vertical)*-1)}.group--offset-top{margin-top:calc(var(--margin-vertical)*-1)}.group--scroller .group-item:first-child{margin-left:0}.group--scroller .group-item:last-child{margin-right:0}.group-item{display:flex;margin:var(--margin-vertical) calc(var(--margin-horizontal)/2) 0;position:relative;width:var(--width)}.group-item[class*="--width"]{width:calc(var(--width) - var(--margin-horizontal))}
+.icon{color:var(--color);display:flex;flex:0 0 var(--width);height:var(--height);pointer-events:none;position:relative;transform:rotate(var(--rotate));width:var(--width)}.icon svg{fill:currentColor;color:currentColor;height:100%;width:100%}
+.link{align-content:center;background:var(--background);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);justify-content:flex-start;line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;width:var(--width)}.link--underline.--active,.link--underline:not(.--active):hover{text-decoration:underline}
+.loading{animation:loading var(--animation-duration) infinite linear;animation-delay:var(--animation-delay);border:var(--border-width) var(--border-style) var(--border-color);border-radius:100%;border-right-color:transparent;border-top-color:transparent;box-shadow:var(--box-shadow);height:var(--height);pointer-events:none;position:relative;transition:border-color var(--transition-duration) ease-in-out;width:var(--width);z-index:0}@keyframes loading{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+.overlay{bottom:0;height:100vh;left:0;pointer-events:none;position:fixed;right:0;top:0;width:100vw;z-index:9}
+.page{min-height:var(--min-height);position:relative;width:var(--width)}.page-subtitle,.page-suptitle,.page-title{color:var(--color);display:block;line-height:var(--line-height);position:relative;width:100%;z-index:1}.page-subtitle,.page-suptitle{font-size:var(--font-size)}
+.processing{animation:processing var(--animation-duration) linear infinite;height:var(--size);position:relative;width:var(--size)}.processing-ring{clip:rect(calc(var(--size)/2),var(--size),var(--size),0)}.processing-ring,.processing-ring:after,.processing-ring:before{bottom:0;left:0;position:absolute;right:0;top:0}.processing-ring,.processing-ring:before{animation:processing calc(var(--animation-duration)/2) cubic-bezier(.77,0,.175,1) infinite}.processing-ring:after,.processing-ring:before{border-radius:50%;content:""}.processing-ring:after{border:var(--border-width) var(--border-style) var(--border-color-secondary);opacity:var(--opacity)}.processing-ring:before{border-top:var(--border-width) var(--border-style) var(--border-color-primary)}@keyframes processing{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+body,html{height:100%;overflow-x:hidden;width:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--background);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);min-width:var(--min-width);text-rendering:optimizeLegibility}*,:after,:before{box-sizing:border-box;transition:inherit}section{align-content:flex-start;display:flex;flex-wrap:wrap;justify-content:flex-start;position:relative;width:var(--width)}h1,h2,h3,h4,h5{word-wrap:break-word;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);margin:0;padding:0;position:relative;width:100%}h1 sub,h1 sup,h2 sub,h2 sup,h3 sub,h3 sup,h4 sub,h4 sup,h5 sub,h5 sup{font-size:.64em}a{cursor:pointer;outline:none;text-decoration:none}a,b,strong{color:var(--color,inherit)}b,strong{font-weight:var(--font-weight)}p{word-wrap:break-word}p,pre{margin:0;padding:0;width:100%}pre{overflow-wrap:break-word;white-space:break-spaces}sub,sup{font-size:.8em}sub{bottom:-.48em}sup{top:-.48em}
+.row{display:flex;flex-wrap:wrap;justify-content:flex-start;min-height:var(--min-height);position:relative;width:100%}
+::-webkit-scrollbar,::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:window-inactive,::-webkit-scrollbar-track{background:transparent;box-shadow:unset}.--scrollbar{height:100%;margin-right:calc(var(--scrollbar-width)*-1);overflow-x:hidden;overflow-y:scroll;scroll-behavior:smooth;width:calc(100% + var(--scrollbar-width))}.scrollbar{height:100%;z-index:9}.scrollbar,.scrollbar:before{position:absolute;right:0;top:0;transition:opacity var(--transition-duration) ease-in-out;width:var(--width)}.scrollbar:before{background:var(--background-default);border-radius:var(--border-radius);content:"";height:var(--height);transform:var(--translate);transform-origin:top center}.scrollbar--fixed{position:fixed}.scrollbar--hidden{opacity:0}
+.sidebar{bottom:var(--position-vertical);cursor:default;max-width:var(--width);overflow:hidden;pointer-events:auto;position:absolute;top:var(--position-vertical);transition:max-width var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:calc(100% - var(--position-horizontal)*2);z-index:1}.sidebar:not(.--active) input[type=password]{display:none}.sidebar--e{right:var(--position-horizontal)}.sidebar--e.sidebar--offscreen:not(.--active){transform:translateX(var(--width))}.sidebar--w{left:var(--position-horizontal)}.sidebar--w.sidebar--offscreen:not(.--active){transform:translateX(calc(var(--width)*-1))}.sidebar-content{flex:0 0 var(--width-default);width:var(--width-default)}
+.site{z-index:0}
+.text{align-items:center;color:var(--color);display:flex;flex-flow:wrap;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);position:relative;transition:color var(--transition-duration) ease-in-out;width:var(--width)}
+.thumbnail{background:var(--background);border-radius:var(--border-radius);height:var(--height);position:relative;width:var(--width)}
+.tooltip{cursor:pointer;position:relative;z-index:8}.tooltip.--active{z-index:9}.tooltip.--active.tooltip--box:before{bottom:50%;content:"";height:calc(100% + var(--spacer)*2.5);position:absolute;right:50%;transform:translate(50%,50%);width:calc(100% + var(--spacer)*2.5);z-index:-1}.tooltip.--active :not(.tooltip) .tooltip-arrow,.tooltip.--active>.tooltip-arrow{transform:rotate(-90deg)}.tooltip-arrow{margin:0 -1px;transform:rotate(90deg)}.tooltip-content,.tooltip-message{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);max-width:var(--max-width);min-width:var(--min-width);opacity:0;overflow:hidden;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:var(--width);z-index:9}.tooltip.--active :not(.tooltip)>.tooltip-content,.tooltip.--active :not(.tooltip)>.tooltip-message,.tooltip.--active>.tooltip-content,.tooltip.--active>.tooltip-message{opacity:1}.tooltip:not(.--active) :not(.tooltip)>.tooltip-content,.tooltip:not(.--active) :not(.tooltip)>.tooltip-content *,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message *,.tooltip:not(.--active)>.tooltip-content,.tooltip:not(.--active)>.tooltip-content *,.tooltip:not(.--active)>.tooltip-message,.tooltip:not(.--active)>.tooltip-message *{pointer-events:none}.tooltip-content--c,.tooltip-message--c{bottom:50%;position:absolute;right:50%;transform:translate(50%,50%) scale(var(--scaleX),var(--scaleY));transform-origin:center center}.tooltip.--active :not(.tooltip)>.tooltip-content--c,.tooltip.--active :not(.tooltip)>.tooltip-message--c,.tooltip.--active>.tooltip-content--c,.tooltip.--active>.tooltip-message--c{transform:translate(50%,50%) scale(1)}.tooltip-content--en,.tooltip-content--es,.tooltip-message--en,.tooltip-message--es{left:calc(100% - var(--spacer));position:absolute;transform:scale(var(--scaleX),var(--scaleY))}.tooltip.--active :not(.tooltip)>.tooltip-content--en,.tooltip.--active :not(.tooltip)>.tooltip-content--es,.tooltip.--active :not(.tooltip)>.tooltip-message--en,.tooltip.--active :not(.tooltip)>.tooltip-message--es,.tooltip.--active>.tooltip-content--en,.tooltip.--active>.tooltip-content--es,.tooltip.--active>.tooltip-message--en,.tooltip.--active>.tooltip-message--es{transform:translateX(calc(var(--spacer)*2))}.tooltip-content--e,.tooltip-message--e{bottom:50%;left:calc(100% - var(--spacer));position:absolute;transform:translateY(50%) scaleX(var(--scaleX));transform-origin:center left}.tooltip.--active :not(.tooltip)>.tooltip-content--e,.tooltip.--active :not(.tooltip)>.tooltip-message--e,.tooltip.--active>.tooltip-content--e,.tooltip.--active>.tooltip-message--e{transform:translate(calc(var(--spacer)*2),50%) scale(1)}.tooltip-content--en,.tooltip-message--en{top:0;transform-origin:top left}.tooltip-content--es,.tooltip-message--es{bottom:0;transform-origin:bottom left}.tooltip-content--ne,.tooltip-content--nw,.tooltip-message--ne,.tooltip-message--nw{bottom:calc(100% - var(--spacer));position:absolute;transform:scale(var(--scaleX),var(--scaleY))}.tooltip.--active :not(.tooltip)>.tooltip-content--ne,.tooltip.--active :not(.tooltip)>.tooltip-content--nw,.tooltip.--active :not(.tooltip)>.tooltip-message--ne,.tooltip.--active :not(.tooltip)>.tooltip-message--nw,.tooltip.--active>.tooltip-content--ne,.tooltip.--active>.tooltip-content--nw,.tooltip.--active>.tooltip-message--ne,.tooltip.--active>.tooltip-message--nw{transform:translateY(calc(var(--spacer)*-2))}.tooltip-content--n,.tooltip-message--n{bottom:calc(100% - var(--spacer));position:absolute;right:50%;transform:translateX(50%) scaleY(var(--scaleY));transform-origin:center bottom}.tooltip.--active :not(.tooltip)>.tooltip-content--n,.tooltip.--active :not(.tooltip)>.tooltip-message--n,.tooltip.--active>.tooltip-content--n,.tooltip.--active>.tooltip-message--n{transform:translate(50%,calc(var(--spacer)*-2)) scale(1)}.tooltip-content--ne,.tooltip-message--ne{right:0;transform-origin:bottom right}.tooltip-content--nw,.tooltip-message--nw{left:0;transform-origin:bottom left}.tooltip-content--se,.tooltip-content--sw,.tooltip-message--se,.tooltip-message--sw{position:absolute;top:calc(100% - var(--spacer));transform:scale(var(--scaleX),var(--scaleY))}.tooltip.--active :not(.tooltip)>.tooltip-content--se,.tooltip.--active :not(.tooltip)>.tooltip-content--sw,.tooltip.--active :not(.tooltip)>.tooltip-message--se,.tooltip.--active :not(.tooltip)>.tooltip-message--sw,.tooltip.--active>.tooltip-content--se,.tooltip.--active>.tooltip-content--sw,.tooltip.--active>.tooltip-message--se,.tooltip.--active>.tooltip-message--sw{transform:translateY(calc(var(--spacer)*2))}.tooltip-content--s,.tooltip-message--s{position:absolute;right:50%;top:calc(100% - var(--spacer));transform:translateX(50%) scaleY(var(--scaleY));transform-origin:center top}.tooltip.--active :not(.tooltip)>.tooltip-content--s,.tooltip.--active :not(.tooltip)>.tooltip-message--s,.tooltip.--active>.tooltip-content--s,.tooltip.--active>.tooltip-message--s{transform:translate(50%,calc(var(--spacer)*2)) scale(1)}.tooltip-content--se,.tooltip-message--se{right:0;transform-origin:top right}.tooltip-content--sw,.tooltip-message--sw{left:0;transform-origin:top left}.tooltip-content--wn,.tooltip-content--ws,.tooltip-message--wn,.tooltip-message--ws{position:absolute;right:calc(100% - var(--spacer));transform:scale(var(--scale))}.tooltip.--active :not(.tooltip)>.tooltip-content--wn,.tooltip.--active :not(.tooltip)>.tooltip-content--ws,.tooltip.--active :not(.tooltip)>.tooltip-message--wn,.tooltip.--active :not(.tooltip)>.tooltip-message--ws,.tooltip.--active>.tooltip-content--wn,.tooltip.--active>.tooltip-content--ws,.tooltip.--active>.tooltip-message--wn,.tooltip.--active>.tooltip-message--ws{transform:translateX(calc(var(--spacer)*-2))}.tooltip-content--w,.tooltip-message--w{bottom:50%;position:absolute;right:calc(100% - var(--spacer));transform:translateY(50%) scaleX(var(--scaleX));transform-origin:center right}.tooltip.--active :not(.tooltip)>.tooltip-content--w,.tooltip.--active :not(.tooltip)>.tooltip-message--w,.tooltip.--active>.tooltip-content--w,.tooltip.--active>.tooltip-message--w{transform:translate(calc(var(--spacer)*-2),50%) scale(1)}.tooltip-content--wn,.tooltip-message--wn{top:0;transform-origin:top right}.tooltip-content--ws,.tooltip-message--ws{bottom:0;transform-origin:bottom right}.tooltip-message{background:var(--background);color:var(--color);cursor:auto;font-size:var(--font-size);font-weight:var(--font-weight);line-height:normal;padding:var(--padding-vertical) var(--padding-horizontal);pointer-events:none;white-space:nowrap}

package/build/css/css-utilities.css

@@ -0,0 +1,11 @@
+.--background-state{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--background-state.--active{--background:var(--background-active)}.--background-state:not(.--active):hover{--background:var(--background-hover)}.--background-state:not(.--active):active{--background:var(--background-pressed)}
+.--border,.--border-bottom,.--border-left,.--border-right,.--border-top{--border-color:var(--border-color-default);--border-style:solid;--border-width:var(--border-width-400)}.--border-dashed{--border-style:dashed}.--border-dotted{--border-style:dotted}.--border-radius{--border-radius:var(--border-radius-400)}.--border-radius-0px{--border-radius:var(--border-radius-0px)}.--border-radius-circle{--border-radius:var(--border-radius-circle)}.--border-radius-curved{--border-radius:var(--border-radius-curved)}.--border-radius-100{--border-radius:var(--border-radius-100)}.--border-radius-200{--border-radius:var(--border-radius-200)}.--border-radius-300{--border-radius:var(--border-radius-300)}.--border-radius-400{--border-radius:var(--border-radius-400)}.--border-radius-500{--border-radius:var(--border-radius-500)}.--border-radius-600{--border-radius:var(--border-radius-600)}.--border-state{--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:transparent;--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default)}.--border-state.--active{--border-color:var(--border-color-active)}.--border-state:not(.--active):hover{--border-color:var(--border-color-hover)}.--border-state:not(.--active):active{--border-color:var(--border-color-pressed)}.--border-width,.--border-width-400{--border-width:var(--border-width-400)}.--border-width-500{--border-width:var(--border-width-500)}.--border-width-600{--border-width:var(--border-width-600)}.--border-width-700{--border-width:var(--border-width-700)}
+.--color-inherit{--color:inherit}.--color-state{--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default)}.--color-state.--active{--color:var(--color-active)}.--color-state:not(.--active):hover{--color:var(--color-hover)}.--color-state:not(.--active):active{--color:var(--color-pressed)}
+.--disabled{--opacity:0.64}
+.--line-height-100{--line-height:var(--line-height-100)}.--line-height-200{--line-height:var(--line-height-200)}.--line-height-300{--line-height:var(--line-height-300)}.--line-height-400{--line-height:var(--line-height-400)}
+.--size{--size:var(--size-400)}.--size-0px{--size:var(--size-0px)}.--size-100{--size:var(--size-100)}.--size-200{--size:var(--size-200)}.--size-300{--size:var(--size-300)}.--size-400{--size:var(--size-400)}.--size-500{--size:var(--size-500)}.--size-600{--size:var(--size-600)}.--size-700{--size:var(--size-700)}.--size-800{--size:var(--size-800)}.--size-900{--size:var(--size-900)}
+.--slide-in{--transition-duration:var(--transition-duration-400);--translateY:var(--size-400)}
+.--text-100{--font-size:var(--font-size-100)}.--text-200{--font-size:var(--font-size-200)}.--text-300{--font-size:var(--font-size-300)}.--text-400{--font-size:var(--font-size-400)}.--text-500{--font-size:var(--font-size-500)}.--text-600{--font-size:var(--font-size-600)}.--text-700{--font-size:var(--font-size-700)}.--text-800{--font-size:var(--font-size-800)}.--text-outline{--color:inherit}.--text-outline,.--text-outline-400{--stroke-width:var(--border-width-400)}.--text-outline-500{--stroke-width:var(--border-width-500)}.--text-outline-600{--stroke-width:var(--border-width-600)}.--text-outline-700{--stroke-width:var(--border-width-700)}.--text-strike-through,.--text-strike-through-400{--line-width:var(--border-width-400)}.--text-strike-through-500{--line-width:var(--border-width-500)}.--text-strike-through-600{--line-width:var(--border-width-600)}.--text-strike-through-700{--line-width:var(--border-width-700)}
+.--width-full{--width:100%}.--width-half{--width:50%}
+.--margin-border-width,.--margin-border-width-400,.--margin-border-width-horizontal-400{--margin-horizontal:var(--border-width-400)}.--margin-border-width-500,.--margin-border-width-horizontal-500{--margin-horizontal:var(--border-width-500)}.--margin-border-width-600,.--margin-border-width-horizontal-600{--margin-horizontal:var(--border-width-600)}.--margin-border-width-700,.--margin-border-width-horizontal-700{--margin-horizontal:var(--border-width-700)}.--margin-0px,.--margin-horizontal-0px{--margin-horizontal:var(--size-0px)}.--margin-100,.--margin-horizontal-100{--margin-horizontal:var(--size-100)}.--margin-200,.--margin-horizontal-200{--margin-horizontal:var(--size-200)}.--margin-300,.--margin-horizontal-300{--margin-horizontal:var(--size-300)}.--margin-400,.--margin-horizontal-400{--margin-horizontal:var(--size-400)}.--margin-500,.--margin-horizontal-500{--margin-horizontal:var(--size-500)}.--margin-600,.--margin-horizontal-600{--margin-horizontal:var(--size-600)}.--margin-700,.--margin-horizontal-700{--margin-horizontal:var(--size-700)}.--margin-800,.--margin-horizontal-800{--margin-horizontal:var(--size-800)}.--margin-900,.--margin-horizontal-900{--margin-horizontal:var(--size-900)}.--margin-horizontal-inherit,.--margin-inherit{--margin-horizontal:inherit}.--margin-border-width,.--margin-border-width-400,.--margin-border-width-vertical-400{--margin-vertical:var(--border-width-400)}.--margin-border-width-500,.--margin-border-width-vertical-500{--margin-vertical:var(--border-width-500)}.--margin-border-width-600,.--margin-border-width-vertical-600{--margin-vertical:var(--border-width-600)}.--margin-border-width-700,.--margin-border-width-vertical-700{--margin-vertical:var(--border-width-700)}.--margin-0px,.--margin-vertical-0px{--margin-vertical:var(--size-0px)}.--margin-100,.--margin-vertical-100{--margin-vertical:var(--size-100)}.--margin-200,.--margin-vertical-200{--margin-vertical:var(--size-200)}.--margin-300,.--margin-vertical-300{--margin-vertical:var(--size-300)}.--margin-400,.--margin-vertical-400{--margin-vertical:var(--size-400)}.--margin-500,.--margin-vertical-500{--margin-vertical:var(--size-500)}.--margin-600,.--margin-vertical-600{--margin-vertical:var(--size-600)}.--margin-700,.--margin-vertical-700{--margin-vertical:var(--size-700)}.--margin-800,.--margin-vertical-800{--margin-vertical:var(--size-800)}.--margin-900,.--margin-vertical-900{--margin-vertical:var(--size-900)}.--margin-inherit,.--margin-vertical-inherit{--margin-vertical:inherit}.--padding-border-width,.--padding-border-width-400,.--padding-border-width-horizontal-400{--padding-horizontal:var(--border-width-400)}.--padding-border-width-500,.--padding-border-width-horizontal-500{--padding-horizontal:var(--border-width-500)}.--padding-border-width-600,.--padding-border-width-horizontal-600{--padding-horizontal:var(--border-width-600)}.--padding-border-width-700,.--padding-border-width-horizontal-700{--padding-horizontal:var(--border-width-700)}.--padding-0px,.--padding-horizontal-0px{--padding-horizontal:var(--size-0px)}.--padding-100,.--padding-horizontal-100{--padding-horizontal:var(--size-100)}.--padding-200,.--padding-horizontal-200{--padding-horizontal:var(--size-200)}.--padding-300,.--padding-horizontal-300{--padding-horizontal:var(--size-300)}.--padding-400,.--padding-horizontal-400{--padding-horizontal:var(--size-400)}.--padding-500,.--padding-horizontal-500{--padding-horizontal:var(--size-500)}.--padding-600,.--padding-horizontal-600{--padding-horizontal:var(--size-600)}.--padding-700,.--padding-horizontal-700{--padding-horizontal:var(--size-700)}.--padding-800,.--padding-horizontal-800{--padding-horizontal:var(--size-800)}.--padding-900,.--padding-horizontal-900{--padding-horizontal:var(--size-900)}.--padding-horizontal-inherit,.--padding-inherit{--padding-horizontal:inherit}.--padding-border-width,.--padding-border-width-400,.--padding-border-width-vertical-400{--padding-vertical:var(--border-width-400)}.--padding-border-width-500,.--padding-border-width-vertical-500{--padding-vertical:var(--border-width-500)}.--padding-border-width-600,.--padding-border-width-vertical-600{--padding-vertical:var(--border-width-600)}.--padding-border-width-700,.--padding-border-width-vertical-700{--padding-vertical:var(--border-width-700)}.--padding-0px,.--padding-vertical-0px{--padding-vertical:var(--size-0px)}.--padding-100,.--padding-vertical-100{--padding-vertical:var(--size-100)}.--padding-200,.--padding-vertical-200{--padding-vertical:var(--size-200)}.--padding-300,.--padding-vertical-300{--padding-vertical:var(--size-300)}.--padding-400,.--padding-vertical-400{--padding-vertical:var(--size-400)}.--padding-500,.--padding-vertical-500{--padding-vertical:var(--size-500)}.--padding-600,.--padding-vertical-600{--padding-vertical:var(--size-600)}.--padding-700,.--padding-vertical-700{--padding-vertical:var(--size-700)}.--padding-800,.--padding-vertical-800{--padding-vertical:var(--size-800)}.--padding-900,.--padding-vertical-900{--padding-vertical:var(--size-900)}.--padding-inherit,.--padding-vertical-inherit{--padding-vertical:inherit}.--margin-auto,.--margin-horizontal-auto{--margin-horizontal:auto}.--margin-auto,.--margin-vertical-auto{--margin-vertical:auto}
+.--max-height-full{--max-height:100%}.--max-height-viewport{--max-height:100vh}.--max-width-full{--max-width:100%}.--max-width-viewport{--max-width:100vw}.--min-height-full{--min-height:100%}.--min-height-viewport{--min-height:100vh}.--min-width-full{--min-width:100%}.--min-width-viewport{--min-width:100vw}

package/index.scss

@@ -1,2 +1,5 @@
+@forward './build/scss/components';
+@forward './build/scss/css-utilities';
+
 @forward './src/lib';
 @forward './src/tokens';

package/package.json

@@ -4,38 +4,39 @@
         "@esportsplus/action": "^0.0.31",
         "@esportsplus/delegated-events": "^0.0.16",
         "@esportsplus/reactivity": "^0.0.18",
-        "@esportsplus/template": "^0.0.13",
+        "@esportsplus/template": "^0.0.14"
+    },
+    "description": "UI",
+    "devDependencies": {
         "autoprefixer": "^10.4.13",
         "clean-webpack-plugin": "^4.0.0",
         "css-loader": "^6.7.3",
-        "css-minimizer-webpack-plugin": "^4.2.2",
         "cssnano": "^5.1.14",
         "glob": "^8.0.3",
         "mini-css-extract-plugin": "^2.7.2",
         "modern-normalize": "^1.1.0",
-        "path-browserify": "^1.0.1",
+        "npm-run-all": "^4.1.5",
         "postcss-loader": "^7.0.2",
-        "run-for-every-file": "^1.1.0",
         "sass": "^1.57.1",
         "sass-loader": "^13.2.0",
-        "style-loader": "^3.3.1",
+        "tsc-alias": "^1.8.2",
+        "typescript": "^4.9.4",
         "webpack": "^5.75.0",
         "webpack-cli": "^5.0.1"
     },
-    "description": "UI",
-    "devDependencies": {
-        "tsc-alias": "^1.8.2",
-        "typescript": "^4.9.4"
-    },
     "main": "./build/index.js",
     "name": "@esportsplus/ui",
     "private": false,
     "scripts": {
-        "build": "tsc && tsc-alias",
+        "build": "run-p build:css build:ts",
+        "build:css": "run-p build:css:components build:css:css-utilities",
+        "build:css:components": "webpack --config webpack.sass.config.js --env=directory=./src/components --env=entry=index --env=filename=components --env=output=./build/css",
+        "build:css:css-utilities": "webpack --config webpack.sass.config.js --env=directory=./src/css-utilities --env=entry=variables --env=filename=css-utilities --env=output=./build/css",
+        "build:ts": "tsc && tsc-alias",
         "--": "--",
         "prepare": "npm run build",
         "prepublishOnly": "npm run build"
     },
     "types": "./build/index.d.ts",
-    "version": "0.0.28"
+    "version": "0.0.29"
 }

package/src/components/accordion/scss/{accordion.scss → index.scss}

@@ -1,4 +1,4 @@
-@use '~@esportsplus/ui';
+@use '~/tokens';
 
 .accordion {
     max-height: var(--max-height);

package/src/components/alert/scss/{alert.scss → index.scss}

@@ -7,7 +7,8 @@
  *
  */
 
-@use '~@esportsplus/ui';
+@use '~/lib';
+@use '~/tokens';
 
 .alert {
     max-width: calc(100% - (var(--margin-horizontal) * 2));

package/src/components/anchor/scss/{anchor.scss → index.scss}

@@ -1,4 +1,4 @@
-@use '~@esportsplus/ui';
+@use '~/tokens';
 
 .anchor {
     max-height: calc(100% - (var(--margin-vertical) * 2));

package/src/components/banner/scss/{banner.scss → index.scss}

@@ -1,4 +1,4 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
 
 .banner {
     @include lib.position(absolute, full);

package/src/components/button/scss/{button.scss → index.scss}

@@ -1,4 +1,5 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
+@use '~/tokens';
 
 .button {
     align-content: center;

package/src/components/button/scss/variables.scss

@@ -1,4 +1,5 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
+@use '~/tokens';
 
 .button {
     --background: var(--background-default);

package/src/components/card/scss/{card.scss → index.scss}

@@ -1,4 +1,4 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
 
 .card {
     background: var(--background);

package/src/components/card/scss/variables.scss

@@ -1,4 +1,4 @@
-@use '~@esportsplus/ui';
+@use '~/tokens';
 
 .card {
     --background: var(--background-default);

package/src/components/field/scss/_check.scss

@@ -1,4 +1,5 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
+@use '~/tokens';
 
 @mixin css() {
     &-mask {

package/src/components/field/scss/_text.scss

@@ -1,4 +1,4 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
 
 @mixin css() {
     &-mask {

package/src/components/field/scss/index.scss

@@ -0,0 +1,169 @@
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Form Fields
+ *
+ *  Fields Were Originally Placed Within A '.form' Selector BUT Fields Are Not
+ *  Always Used Within A Form Tag So Here We Are.
+ *
+ */
+
+@use '~/lib';
+@use '~/tokens';
+@use 'check' as check;
+@use 'normalize' as *;
+@use 'text' as text;
+
+@include normalize();
+
+.field {
+    display: flex;
+    position: relative;
+    transition:
+        background var(--transition-duration) ease-in-out,
+        border-color var(--transition-duration) ease-in-out,
+        box-shadow var(--transition-duration) ease-in-out,
+        color var(--transition-duration) ease-in-out,
+        opacity var(--transition-duration) ease-in-out;
+    width: var(--width);
+    z-index: 1;
+
+    @include tokens.state(hover) {
+        z-index: 8;
+    }
+
+    @include tokens.state(active) {
+        z-index: 9;
+    }
+
+
+    &--optional {
+        max-height: var(--max-height);
+        opacity: 0;
+        pointer-events: none;
+        transition:
+            background var(--transition-duration) ease-in-out,
+            border-color var(--transition-duration) ease-in-out,
+            box-shadow var(--transition-duration) ease-in-out,
+            color var(--transition-duration) ease-in-out,
+            max-height var(--transition-duration) ease-in-out,
+            opacity var(--transition-duration) ease-in-out;
+
+        #{tokens.state(active, '.field')} & {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }
+
+
+    &-description,
+    &-error,
+    &-title {
+        color: var(--color);
+        font-size: var(--font-size);
+        position: relative;
+        width: 100%;
+        word-wrap: break-word;
+
+        &:empty {
+            height: 0px;
+            margin: 0;
+        }
+    }
+
+    &-error {
+        animation: field-error 0.32s 1 linear;
+
+        @keyframes field-error {
+            0% {
+                transform: translate(8px);
+            }
+
+            20% {
+                transform: translate(-8px);
+            }
+
+            40% {
+                transform: translate(4px);
+            }
+
+            60% {
+                transform: translate(-4px);
+            }
+
+            80% {
+                transform: translate(2px);
+            }
+
+            100% {
+                transform: translate(0px);
+            }
+        }
+    }
+
+    &-mask {
+
+        // Pseudo Element Box Shadow
+        &::after {
+            @include lib.position(absolute, full);
+            border-radius: inherit;
+            box-shadow: var(--box-shadow);
+            content: '';
+            pointer-events: none;
+            transition:
+                box-shadow var(--transition-duration) ease-in-out,
+                opacity var(--transition-duration) ease-in-out,
+                transform var(--transition-duration) ease-in-out;
+            z-index: 0;
+        }
+
+        &--flat {
+            &::after {
+                display: none;
+            }
+        }
+
+        &--outline {
+            &::before {
+                @include lib.position(absolute, full);
+                box-shadow: 0 0 0 var(--outline-width) var(--border-color);
+                border-radius: var(--border-radius);
+                content: '';
+                opacity: var(--outline-opacity);
+                pointer-events: none;
+                transition:
+                    box-shadow var(--transition-duration) ease-in-out,
+                    opacity var(--transition-duration) ease-in-out;
+                z-index: 0;
+            }
+        }
+    }
+
+    &-required {
+        background: var(--background);
+        border-radius: var(--border-radius);
+        height: var(--size);
+        width: var(--size);
+    }
+
+    &-tag {
+        &--hidden {
+            @include lib.position(absolute, 0 null null 0);
+            appearance: none;
+            height: 0px;
+            opacity: 0;
+            pointer-events: none;
+            width: 0px;
+            z-index: -1;
+        }
+    }
+
+    &-title {
+        font-weight: var(--font-weight);
+        z-index: 1;
+    }
+
+
+    @include check.css();
+    @include text.css();
+}

package/src/components/field/scss/variables.scss

@@ -1,4 +1,4 @@
-@use '~@esportsplus/ui';
+@use '~/tokens';
 @use 'check' as check;
 @use 'text' as text;
 

package/src/components/link/scss/{link.scss → index.scss}

@@ -1,4 +1,4 @@
-@use '~@esportsplus/ui';
+@use '~/tokens';
 
 .link {
     align-content: center;

package/src/components/link/scss/variables.scss

@@ -1,4 +1,4 @@
-@use '~@esportsplus/ui';
+@use '~/tokens';
 
 .link {
     --background: var(--background-default);

package/src/components/overlay/scss/{overlay.scss → index.scss}

@@ -1,4 +1,4 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
 
 .overlay {
     @include lib.position(fixed, full);

package/src/components/processing/scss/{processing.scss → index.scss}

@@ -1,4 +1,4 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
 
 .processing {
     height: var(--size);

package/src/components/root/scss/variables.scss

@@ -1,4 +1,5 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
+@use '~/tokens';
 
 body {
     @include lib.css-variables(border-radius, tokens.$border-radius);

package/src/components/sidebar/scss/{sidebar.scss → index.scss}

@@ -1,4 +1,5 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
+@use '~/tokens';
 
 .sidebar {
     @include lib.position(absolute, var(--position-vertical) null var(--position-vertical) null);

package/src/components/sidebar/scss/variables.scss

@@ -1,4 +1,4 @@
-@use '~@esportsplus/ui';
+@use '~/tokens';
 
 .sidebar {
     --position-horizontal: 0px;

package/src/components/tooltip/scss/{tooltip.scss → index.scss}

@@ -1,4 +1,5 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
+@use '~/tokens';
 @use 'center' as *;
 @use 'east' as *;
 @use 'north' as *;

package/src/css-utilities/[margin,padding]/scss/variables.scss

@@ -1,4 +1,5 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
+@use '~/tokens';
 
 @each $property in margin padding {
     .--#{$property} {

package/src/css-utilities/absolute/scss/{absolute.scss → index.scss}

@@ -1,4 +1,4 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
 
 .--absolute {
     &-bottom,

package/src/css-utilities/background/scss/variables.scss

@@ -1,4 +1,4 @@
-@use '~@esportsplus/ui';
+@use '~/tokens';
 
 .--background {
     &-state {

package/src/css-utilities/border/scss/variables.scss

@@ -1,4 +1,5 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
+@use '~/tokens';
 
 .--border {
     &,

package/src/css-utilities/color/scss/variables.scss

@@ -1,4 +1,4 @@
-@use '~@esportsplus/ui';
+@use '~/tokens';
 
 .--color {
     &-inherit {

package/src/css-utilities/flex/scss/{flex.scss → index.scss}

@@ -1,5 +1,3 @@
-@use '~@esportsplus/ui';
-
 .--flex {
     &-center {
         align-content: center;

package/src/css-utilities/hidden/scss/{hidden.scss → index.scss}

@@ -1,4 +1,5 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
+@use '~/tokens';
 
 .--hidden {
     display: none;

package/src/css-utilities/index.scss

@@ -1,4 +1,5 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
+@use '~/tokens';
 @use 'background/scss/variables' as background;
 @use 'border/scss/variables' as border;
 @use 'color/scss/variables' as color;

package/src/css-utilities/line-height/scss/variables.scss

@@ -1,4 +1,5 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
+@use '~/tokens';
 
 .--line-height {
     @each $key in lib.map-keys(tokens.$line-height) {

package/src/css-utilities/size/scss/variables.scss

@@ -1,4 +1,5 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
+@use '~/tokens';
 
 .--size {
     --size: var(--size-400);

package/src/css-utilities/text/scss/{text.scss → index.scss}

@@ -1,4 +1,5 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
+@use '~/tokens';
 
 .--text {
     &-bold {

package/src/css-utilities/text/scss/variables.scss

@@ -1,4 +1,5 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
+@use '~/tokens';
 
 .--text {
     @each $key in lib.map-keys(tokens.$font-size) {

package/src/tokens/scss/breakpoints.scss

@@ -1,4 +1,4 @@
-@use '~@esportsplus/ui';
+// @use '~/lib';
 
 $breakpoints: 1400px 1000px 600px;
 

package/src/tokens/scss/color.scss

@@ -1,4 +1,4 @@
-@use '~@esportsplus/ui';
+@use '~/lib';
 
 $color: (
     'black': (

package/src/tokens/scss/state.scss

@@ -18,7 +18,7 @@
  *
  */
 
-@use '~@esportsplus/ui';
+@use '~/lib';
 
 $state: (
     active: '&.--active',

package/webpack.sass.config.js

@@ -1,41 +1,39 @@
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
 const autoprefixer = require('autoprefixer');
-const cssnano = require('cssnano');
 const glob = require('glob');
+const cssnano = require('cssnano');
 const path = require('path');
+const sass = require('sass');
 
 
-function scss(bundle, paths, scss = {}) {
-    return [
-        scss.prepend || [],
-        glob.sync(`{${paths.current}/components,${paths.input}/components,${paths.input}/pages,${paths.current}/css-utilities}/**/${bundle}`, { nosort: true }),
-        scss.append  || []
-    ].flat();
-}
+module.exports = ({ directory, entry, filename, output, production }) => {
+    directory = path.resolve(directory).replace(/\\/g, '/');
+    filename = filename || 'app';
+    output = path.resolve(output).replace(/\\/g, '/');
+    production = production !== 'false' ? true : false;
 
-
-module.exports = ({ filename, input, output, production, theme }) => {
-    let paths = {
-            current: path.resolve(process.cwd()).replace('\\', '/') + `/node_modules/@esportsplus/ui/src`,
-            input: path.resolve(process.cwd()).replace('\\', '/') + `/${input || ''}`,
-            output: path.resolve(process.cwd()).replace('\\', '/') + `/${output || ''}`
-        };
+    if (directory) {
+        entry = glob.sync(`${directory}/**/scss/${entry}.scss`, { nosort: true });
+    }
 
     return {
+        cache: false,
         entry: {
-            [filename || 'app']: scss('!(variables).scss', paths, { prepend: ['modern-normalize/modern-normalize.css'] }),
-            [`themes/${theme || 'default'}`]: scss('variables.scss', paths, { append: [`${paths.current}/storage/fonts/Montserrat/montserrat.css`] })
+            [filename]: entry
         },
-        mode: (production == false ? 'development' : 'production'),
+        mode: (production ? 'production' : 'development'),
         module: {
             rules: [
                 {
                     test: /\.(c|sc|sa)ss$/,
                     use: [
-                        MiniCssExtractPlugin.loader,
+                        {
+                            loader: MiniCssExtractPlugin.loader,
+                            options: {
+                                esModule: false,
+                            },
+                        },
                         {
                             loader: 'css-loader',
                             options: {
@@ -48,34 +46,48 @@ module.exports = ({ filename, input, output, production, theme }) => {
                             loader: 'postcss-loader',
                             options: {
                                 postcssOptions: {
-                                    plugins: [autoprefixer(), cssnano()]
+                                    plugins: [
+                                        autoprefixer(),
+                                        cssnano({
+                                            preset: 'default',
+                                        })
+                                    ]
                                 }
                             }
                         },
-                        { loader: 'sass-loader' },
+                        {
+                            loader: 'sass-loader',
+                            options: {
+                                // Use `dart-sass`
+                                implementation: sass,
+                            },
+                        },
                     ],
                 },
             ],
         },
         optimization: {
-            minimize: true,
-            minimizer: [new CssMinimizerPlugin()]
+            minimize: production
         },
         output: {
-            path: paths.output
+            path: output,
         },
         plugins: [
-            new MiniCssExtractPlugin({
-                filename: '[name].css',
-                chunkFilename: '[id].css',
-            }),
+            new MiniCssExtractPlugin(),
             new CleanWebpackPlugin({
-                cleanAfterEveryBuildPatterns: [`${paths.output}/**/*.js`],
+                cleanAfterEveryBuildPatterns: [`${output}/**/*.js`],
                 cleanOnceBeforeBuildPatterns: [],
                 dangerouslyAllowCleanPatternsOutsideProject: true,
                 dry: false,
                 verbose: false
             })
-        ]
+        ],
+        resolve: {
+            alias: {
+                '/lib': path.resolve('./src/lib').replace(/\\/g, '/'),
+                '/tokens': path.resolve('./src/tokens').replace(/\\/g, '/')
+            }
+        },
+        watch: !production
     };
-};
+};

package/build/components/root/layout.js

@@ -1,18 +0,0 @@
-import { html } from '@esportsplus/template';
-import { scrollbar } from '../../components';
-export default (data = {}) => {
-    let s = scrollbar({
-        fixed: true,
-        style: data?.site?.scrollbar?.style || '--background-default: var(--color-black-400);'
-    });
-    return html `
-        <section class='site ${data?.site?.class || ''}' ${s.attributes}>
-            ${data?.site?.content || ''}
-            ${s.html}
-        </section>
-
-        <section class='overlay ${data?.overlay?.class || ''}'>
-            ${data?.overlay?.content || ''}
-        </section>
-    `;
-};

package/build/components/state/index.js

@@ -1,17 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-const onfocus = (active = false) => {
-    let state = reactive({ active });
-    return html({
-        class: () => {
-            return state.active ? '--active' : '';
-        },
-        onfocusin: () => {
-            state.active = true;
-        },
-        onfocusout: () => {
-            state.active = false;
-        }
-    });
-};
-export default { onfocus };

package/build/global.js

@@ -1 +0,0 @@
-"use strict";

package/src/components/field/scss/field.scss

@@ -1,162 +0,0 @@
-/**
- *------------------------------------------------------------------------------
- *
- *  Form Fields
- *
- *  Fields Were Originally Placed Within A '.form' Selector BUT Fields Are Not
- *  Always Used Within A Form Tag So Here We Are.
- *
- */
-
- @use '~@esportsplus/ui';
- @use 'check' as check;
- @use 'normalize' as *;
- @use 'text' as text;
-
- @include normalize();
-
- .field {
-     display: flex;
-     position: relative;
-     transition:
-         background var(--transition-duration) ease-in-out,
-         border-color var(--transition-duration) ease-in-out,
-         box-shadow var(--transition-duration) ease-in-out,
-         color var(--transition-duration) ease-in-out,
-         opacity var(--transition-duration) ease-in-out;
-     width: var(--width);
-     z-index: 1;
-
-     @include tokens.state(hover) {
-         z-index: 8;
-     }
-
-     @include tokens.state(active) {
-         z-index: 9;
-     }
-
-
-     &--optional {
-         max-height: var(--max-height);
-         opacity: 0;
-         pointer-events: none;
-         transition:
-             background var(--transition-duration) ease-in-out,
-             border-color var(--transition-duration) ease-in-out,
-             box-shadow var(--transition-duration) ease-in-out,
-             color var(--transition-duration) ease-in-out,
-             max-height var(--transition-duration) ease-in-out,
-             opacity var(--transition-duration) ease-in-out;
-
-         #{tokens.state(active, '.field')} & {
-             opacity: 1;
-             pointer-events: auto;
-         }
-     }
-
-
-     &-description,
-     &-error,
-     &-title {
-         color: var(--color);
-         font-size: var(--font-size);
-         position: relative;
-         width: 100%;
-         word-wrap: break-word;
-
-         &:empty {
-            height: 0px;
-            margin: 0;
-         }
-     }
-
-     &-error {
-        animation: field-error 0.32s 1 linear;
-
-        @keyframes field-error {
-            0%  {
-                transform: translate(8px);
-            }
-            20% {
-                transform: translate(-8px);
-            }
-            40% {
-                transform: translate(4px);
-            }
-            60% {
-                transform: translate(-4px);
-            }
-            80% {
-                transform: translate(2px);
-            }
-            100% {
-                transform: translate(0px);
-            }
-        }
-     }
-
-     &-mask {
-         // Pseudo Element Box Shadow
-         &::after {
-             @include lib.position(absolute, full);
-             border-radius: inherit;
-             box-shadow: var(--box-shadow);
-             content: '';
-             pointer-events: none;
-             transition:
-                 box-shadow var(--transition-duration) ease-in-out,
-                 opacity var(--transition-duration) ease-in-out,
-                 transform var(--transition-duration) ease-in-out;
-             z-index: 0;
-         }
-
-         &--flat {
-             &::after {
-                 display: none;
-             }
-         }
-
-         &--outline {
-             &::before {
-                 @include lib.position(absolute, full);
-                 box-shadow: 0 0 0 var(--outline-width) var(--border-color);
-                 border-radius: var(--border-radius);
-                 content: '';
-                 opacity: var(--outline-opacity);
-                 pointer-events: none;
-                 transition:
-                     box-shadow var(--transition-duration) ease-in-out,
-                     opacity var(--transition-duration) ease-in-out;
-                 z-index: 0;
-             }
-         }
-     }
-
-     &-required {
-         background: var(--background);
-         border-radius: var(--border-radius);
-         height: var(--size);
-         width: var(--size);
-     }
-
-     &-tag {
-         &--hidden {
-             @include lib.position(absolute, 0 null null 0);
-             appearance: none;
-             height: 0px;
-             opacity: 0;
-             pointer-events: none;
-             width: 0px;
-             z-index: -1;
-         }
-     }
-
-     &-title {
-         font-weight: var(--font-weight);
-         z-index: 1;
-     }
-
-
-     @include check.css();
-     @include text.css();
- }