@esportsplus/ui 0.9.0 → 0.9.3

package/build/components/truncate/index.js

@@ -0,0 +1,2 @@
+import { truncate } from '@esportsplus/utilities';
+export default truncate;

package/build/components/typewriter/index.d.ts

@@ -0,0 +1,9 @@
+import './scss/index.scss';
+declare const _default: (content: string[]) => {
+    attributes: {
+        class: string;
+        onmount: () => void;
+    };
+    html: () => any;
+};
+export default _default;

package/build/components/typewriter/index.js

@@ -0,0 +1,42 @@
+import { html } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const EMPTY_NODE = html ` `;
+export default (content) => {
+    let state = reactive({ text: '' });
+    return {
+        attributes: {
+            class: 'typewriter',
+            onmount: () => {
+                let character = 0, i = 0, isWriting = true, write = content[i];
+                function play() {
+                    setTimeout(() => {
+                        state.text = write.slice(0, character);
+                        if (isWriting) {
+                            if (character > write.length) {
+                                isWriting = false;
+                                setTimeout(play, 2000);
+                                return;
+                            }
+                            else {
+                                character++;
+                            }
+                        }
+                        else {
+                            if (character === 0) {
+                                isWriting = true;
+                                write = content[++i] || content[i = 0];
+                            }
+                            else {
+                                character--;
+                            }
+                        }
+                        play();
+                    }, isWriting ? 64 : 32);
+                }
+                play();
+            }
+        },
+        html: () => state.text || EMPTY_NODE
+    };
+};

package/build/components/typewriter/scss/index.scss

@@ -0,0 +1,2 @@
+.typewriter:after{content:"|";animation:.64s infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}
+/*$vite$:1*/

package/build/css-utilities/[margin,padding]/scss/index.scss

@@ -0,0 +1,2 @@
+.--margin-border-width,.--margin-horizontal-border-width,.--margin-border-width-400,.--margin-horizontal-border-width-400,.--margin-border-width,.--margin-horizontal-border-width{--margin-horizontal:var(--border-width-400)}.--margin-border-width-500,.--margin-horizontal-border-width-500{--margin-horizontal:var(--border-width-500)}.--margin-border-width-600,.--margin-horizontal-border-width-600{--margin-horizontal:var(--border-width-600)}.--margin-border-width,.--margin-horizontal-border-width{--margin-horizontal:var(--border-width-400)}.--margin-border-width-700,.--margin-horizontal-border-width-700{--margin-horizontal:var(--border-width-700)}.--margin-spacer-200,.--margin-horizontal-spacer-200{--margin-horizontal:var(--spacer-200)}.--margin-spacer-300,.--margin-horizontal-spacer-300{--margin-horizontal:var(--spacer-300)}.--margin-spacer,.--margin-horizontal-spacer,.--margin-spacer-400,.--margin-horizontal-spacer-400,.--margin-spacer,.--margin-horizontal-spacer{--margin-horizontal:var(--spacer-400)}.--margin-spacer-500,.--margin-horizontal-spacer-500{--margin-horizontal:var(--spacer-500)}.--margin-spacer,.--margin-horizontal-spacer{--margin-horizontal:var(--spacer-400)}.--margin-spacer-600,.--margin-horizontal-spacer-600{--margin-horizontal:var(--spacer-600)}.--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-inherit,.--margin-horizontal-inherit{--margin-horizontal:inherit}.--margin-border-width,.--margin-vertical-border-width,.--margin-border-width-400,.--margin-vertical-border-width-400,.--margin-border-width,.--margin-vertical-border-width{--margin-vertical:var(--border-width-400)}.--margin-border-width-500,.--margin-vertical-border-width-500{--margin-vertical:var(--border-width-500)}.--margin-border-width-600,.--margin-vertical-border-width-600{--margin-vertical:var(--border-width-600)}.--margin-border-width,.--margin-vertical-border-width{--margin-vertical:var(--border-width-400)}.--margin-border-width-700,.--margin-vertical-border-width-700{--margin-vertical:var(--border-width-700)}.--margin-spacer-200,.--margin-vertical-spacer-200{--margin-vertical:var(--spacer-200)}.--margin-spacer-300,.--margin-vertical-spacer-300{--margin-vertical:var(--spacer-300)}.--margin-spacer,.--margin-vertical-spacer,.--margin-spacer-400,.--margin-vertical-spacer-400,.--margin-spacer,.--margin-vertical-spacer{--margin-vertical:var(--spacer-400)}.--margin-spacer-500,.--margin-vertical-spacer-500{--margin-vertical:var(--spacer-500)}.--margin-spacer,.--margin-vertical-spacer{--margin-vertical:var(--spacer-400)}.--margin-spacer-600,.--margin-vertical-spacer-600{--margin-vertical:var(--spacer-600)}.--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-horizontal-border-width,.--padding-border-width-400,.--padding-horizontal-border-width-400,.--padding-border-width,.--padding-horizontal-border-width{--padding-horizontal:var(--border-width-400)}.--padding-border-width-500,.--padding-horizontal-border-width-500{--padding-horizontal:var(--border-width-500)}.--padding-border-width-600,.--padding-horizontal-border-width-600{--padding-horizontal:var(--border-width-600)}.--padding-border-width,.--padding-horizontal-border-width{--padding-horizontal:var(--border-width-400)}.--padding-border-width-700,.--padding-horizontal-border-width-700{--padding-horizontal:var(--border-width-700)}.--padding-spacer-200,.--padding-horizontal-spacer-200{--padding-horizontal:var(--spacer-200)}.--padding-spacer-300,.--padding-horizontal-spacer-300{--padding-horizontal:var(--spacer-300)}.--padding-spacer,.--padding-horizontal-spacer,.--padding-spacer-400,.--padding-horizontal-spacer-400,.--padding-spacer,.--padding-horizontal-spacer{--padding-horizontal:var(--spacer-400)}.--padding-spacer-500,.--padding-horizontal-spacer-500{--padding-horizontal:var(--spacer-500)}.--padding-spacer,.--padding-horizontal-spacer{--padding-horizontal:var(--spacer-400)}.--padding-spacer-600,.--padding-horizontal-spacer-600{--padding-horizontal:var(--spacer-600)}.--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-inherit,.--padding-horizontal-inherit{--padding-horizontal:inherit}.--padding-border-width,.--padding-vertical-border-width,.--padding-border-width-400,.--padding-vertical-border-width-400,.--padding-border-width,.--padding-vertical-border-width{--padding-vertical:var(--border-width-400)}.--padding-border-width-500,.--padding-vertical-border-width-500{--padding-vertical:var(--border-width-500)}.--padding-border-width-600,.--padding-vertical-border-width-600{--padding-vertical:var(--border-width-600)}.--padding-border-width,.--padding-vertical-border-width{--padding-vertical:var(--border-width-400)}.--padding-border-width-700,.--padding-vertical-border-width-700{--padding-vertical:var(--border-width-700)}.--padding-spacer-200,.--padding-vertical-spacer-200{--padding-vertical:var(--spacer-200)}.--padding-spacer-300,.--padding-vertical-spacer-300{--padding-vertical:var(--spacer-300)}.--padding-spacer,.--padding-vertical-spacer,.--padding-spacer-400,.--padding-vertical-spacer-400,.--padding-spacer,.--padding-vertical-spacer{--padding-vertical:var(--spacer-400)}.--padding-spacer-500,.--padding-vertical-spacer-500{--padding-vertical:var(--spacer-500)}.--padding-spacer,.--padding-vertical-spacer{--padding-vertical:var(--spacer-400)}.--padding-spacer-600,.--padding-vertical-spacer-600{--padding-vertical:var(--spacer-600)}.--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}.--margin,.--margin-horizontal{margin-left:var(--margin-horizontal);margin-right:var(--margin-horizontal)}.--margin,.--margin-vertical{margin-bottom:var(--margin-vertical);margin-top:var(--margin-vertical)}.--margin-bottom{margin-bottom:var(--margin-vertical)}.--margin-top{margin-top:var(--margin-vertical)}.--margin-left{margin-left:var(--margin-horizontal)}.--margin-right{margin-right:var(--margin-horizontal)}.--padding,.--padding-horizontal{padding-left:var(--padding-horizontal);padding-right:var(--padding-horizontal)}.--padding.--border,.--padding-horizontal.--border{padding-left:calc(var(--padding-horizontal) - var(--border-width));padding-right:calc(var(--padding-horizontal) - var(--border-width))}.--padding,.--padding-vertical{padding-bottom:var(--padding-vertical);padding-top:var(--padding-vertical)}.--padding.--border,.--padding-vertical.--border{padding-bottom:calc(var(--padding-vertical) - var(--border-width));padding-top:calc(var(--padding-vertical) - var(--border-width))}.--padding-bottom{padding-bottom:var(--padding-vertical)}.--padding-top{padding-top:var(--padding-vertical)}.--padding-left{padding-left:var(--padding-horizontal)}.--padding-right{padding-right:var(--padding-horizontal)}
+/*$vite$:1*/

package/build/css-utilities/absolute/scss/index.scss

@@ -0,0 +1,2 @@
+.--absolute-horizontal-bottom,.--absolute-vertical-bottom{bottom:0}.--absolute-horizontal-top,.--absolute-vertical-top{top:0}.--absolute-horizontal,.--absolute-horizontal-bottom,.--absolute-horizontal-top{position:absolute;right:50%;transform:translate(50%)}.--absolute-vertical,.--absolute-vertical-left,.--absolute-vertical-right{position:absolute;bottom:50%;transform:translateY(50%)}.--absolute-bottom{position:absolute;inset:auto 0 0}.--absolute-center{position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}.--absolute-full{position:absolute;inset:0}.--absolute-left{position:absolute;inset:0 auto 0 0}.--absolute-right{position:absolute;inset:0 0 0 auto}.--absolute-top{position:absolute;inset:0 0 auto}
+/*$vite$:1*/

package/build/css-utilities/background/scss/index.scss

@@ -0,0 +1,2 @@
+.--background-primary{--background-active:var(--color-primary-300);--background-default:var(--color-primary-400);--background-hover:var(--color-primary-300);--background-pressed:var(--color-primary-500)}.--background-secondary{--background-active:var(--color-secondary-300);--background-default:var(--color-secondary-400);--background-hover:var(--color-secondary-300);--background-pressed:var(--color-secondary-500)}.--background-black{--background-active:var(--color-black-300);--background-default:var(--color-black-400);--background-hover:var(--color-black-300);--background-pressed:var(--color-black-500)}.--background-blue{--background-active:var(--color-blue-300);--background-default:var(--color-blue-400);--background-hover:var(--color-blue-300);--background-pressed:var(--color-blue-500)}.--background-border{--background-active:var(--color-border-300);--background-default:var(--color-border-400);--background-hover:var(--color-border-300);--background-pressed:var(--color-border-500)}.--background-green{--background-active:var(--color-green-300);--background-default:var(--color-green-400);--background-hover:var(--color-green-300);--background-pressed:var(--color-green-500)}.--background-grey{--background-active:var(--color-grey-300);--background-default:var(--color-grey-400);--background-hover:var(--color-grey-300);--background-pressed:var(--color-grey-500)}.--background-purple{--background-active:var(--color-purple-300);--background-default:var(--color-purple-400);--background-hover:var(--color-purple-300);--background-pressed:var(--color-purple-500)}.--background-red{--background-active:var(--color-red-300);--background-default:var(--color-red-400);--background-hover:var(--color-red-300);--background-pressed:var(--color-red-500)}.--background-text{--background-active:var(--color-text-300);--background-default:var(--color-text-400);--background-hover:var(--color-text-300);--background-pressed:var(--color-text-500)}.--background-white{--background-active:var(--color-white-300);--background-default:var(--color-white-400);--background-hover:var(--color-white-300);--background-pressed:var(--color-white-500)}.--background-yellow{--background-active:var(--color-yellow-300);--background-default:var(--color-yellow-400);--background-hover:var(--color-yellow-300);--background-pressed:var(--color-yellow-500)}.--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)}
+/*$vite$:1*/

package/build/css-utilities/border/scss/index.scss

@@ -0,0 +1,2 @@
+.--border-primary{--border-color-active:var(--color-primary-300);--border-color-default:var(--color-primary-400);--border-color-hover:var(--color-primary-300);--border-color-pressed:var(--color-primary-500)}.--border-secondary{--border-color-active:var(--color-secondary-300);--border-color-default:var(--color-secondary-400);--border-color-hover:var(--color-secondary-300);--border-color-pressed:var(--color-secondary-500)}.--border-black{--border-color-active:var(--color-black-300);--border-color-default:var(--color-black-400);--border-color-hover:var(--color-black-300);--border-color-pressed:var(--color-black-500)}.--border-blue{--border-color-active:var(--color-blue-300);--border-color-default:var(--color-blue-400);--border-color-hover:var(--color-blue-300);--border-color-pressed:var(--color-blue-500)}.--border-border{--border-color-active:var(--color-border-300);--border-color-default:var(--color-border-400);--border-color-hover:var(--color-border-300);--border-color-pressed:var(--color-border-500)}.--border-green{--border-color-active:var(--color-green-300);--border-color-default:var(--color-green-400);--border-color-hover:var(--color-green-300);--border-color-pressed:var(--color-green-500)}.--border-grey{--border-color-active:var(--color-grey-300);--border-color-default:var(--color-grey-400);--border-color-hover:var(--color-grey-300);--border-color-pressed:var(--color-grey-500)}.--border-purple{--border-color-active:var(--color-purple-300);--border-color-default:var(--color-purple-400);--border-color-hover:var(--color-purple-300);--border-color-pressed:var(--color-purple-500)}.--border-red{--border-color-active:var(--color-red-300);--border-color-default:var(--color-red-400);--border-color-hover:var(--color-red-300);--border-color-pressed:var(--color-red-500)}.--border-text{--border-color-active:var(--color-text-300);--border-color-default:var(--color-text-400);--border-color-hover:var(--color-text-300);--border-color-pressed:var(--color-text-500)}.--border-white{--border-color-active:var(--color-white-300);--border-color-default:var(--color-white-400);--border-color-hover:var(--color-white-300);--border-color-pressed:var(--color-white-500)}.--border-yellow{--border-color-active:var(--color-yellow-300);--border-color-default:var(--color-yellow-400);--border-color-hover:var(--color-yellow-300);--border-color-pressed:var(--color-yellow-500)}.--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)}.--border{border:var(--border-width)var(--border-style)var(--border-color)}.--border-bottom{border-bottom:var(--border-width)var(--border-style)var(--border-color)}.--border-left{border-left:var(--border-width)var(--border-style)var(--border-color)}.--border-right{border-right:var(--border-width)var(--border-style)var(--border-color)}.--border-top{border-top:var(--border-width)var(--border-style)var(--border-color)}.--border-offset-bottom{margin-bottom:calc(var(--border-width)*-1)}.--border-offset-left{margin-left:calc(var(--border-width)*-1)}.--border-offset-right{margin-right:calc(var(--border-width)*-1)}.--border-offset-top{margin-top:calc(var(--border-width)*-1)}.--border-radius{border-radius:var(--border-radius)}
+/*$vite$:1*/

package/build/css-utilities/color/scss/index.scss

@@ -0,0 +1,2 @@
+.--color-primary{--color-active:var(--color-primary-300);--color-default:var(--color-primary-400);--color-hover:var(--color-primary-300);--color-pressed:var(--color-primary-500)}.--color-secondary{--color-active:var(--color-secondary-300);--color-default:var(--color-secondary-400);--color-hover:var(--color-secondary-300);--color-pressed:var(--color-secondary-500)}.--color-black{--color-active:var(--color-black-300);--color-default:var(--color-black-400);--color-hover:var(--color-black-300);--color-pressed:var(--color-black-500)}.--color-blue{--color-active:var(--color-blue-300);--color-default:var(--color-blue-400);--color-hover:var(--color-blue-300);--color-pressed:var(--color-blue-500)}.--color-border{--color-active:var(--color-border-300);--color-default:var(--color-border-400);--color-hover:var(--color-border-300);--color-pressed:var(--color-border-500)}.--color-green{--color-active:var(--color-green-300);--color-default:var(--color-green-400);--color-hover:var(--color-green-300);--color-pressed:var(--color-green-500)}.--color-grey{--color-active:var(--color-grey-300);--color-default:var(--color-grey-400);--color-hover:var(--color-grey-300);--color-pressed:var(--color-grey-500)}.--color-purple{--color-active:var(--color-purple-300);--color-default:var(--color-purple-400);--color-hover:var(--color-purple-300);--color-pressed:var(--color-purple-500)}.--color-red{--color-active:var(--color-red-300);--color-default:var(--color-red-400);--color-hover:var(--color-red-300);--color-pressed:var(--color-red-500)}.--color-text{--color-active:var(--color-text-300);--color-default:var(--color-text-400);--color-hover:var(--color-text-300);--color-pressed:var(--color-text-500)}.--color-white{--color-active:var(--color-white-300);--color-default:var(--color-white-400);--color-hover:var(--color-white-300);--color-pressed:var(--color-white-500)}.--color-yellow{--color-active:var(--color-yellow-300);--color-default:var(--color-yellow-400);--color-hover:var(--color-yellow-300);--color-pressed:var(--color-yellow-500)}.--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)}
+/*$vite$:1*/

package/build/css-utilities/disabled/scss/index.scss

@@ -0,0 +1,2 @@
+.--disabled{opacity:.64;pointer-events:none}
+/*$vite$:1*/

package/build/css-utilities/flex/scss/index.scss

@@ -0,0 +1,2 @@
+.--flex-center{flex-wrap:wrap;place-content:center;display:flex}.--flex-column{flex-flow:column;display:flex}.--flex-end{flex-wrap:wrap;justify-content:flex-end;display:flex}.--flex-fill{flex:1;min-width:0;display:flex}.--flex-fixed{flex:0 0 var(--width);display:flex}.--flex-horizontal{flex-wrap:wrap;justify-content:center;display:flex}.--flex-horizontal-space-between{flex-wrap:wrap;justify-content:space-between;display:flex}.--flex-row{flex-flow:row;display:flex}.--flex-start{flex-wrap:wrap;justify-content:flex-start;display:flex}.--flex-vertical{flex-wrap:wrap;align-items:center;display:flex}.--flex-vertical-space-between{align-items:space-between;flex-wrap:wrap;display:flex}
+/*$vite$:1*/

package/build/css-utilities/glass/scss/index.scss

@@ -0,0 +1,2 @@
+.--glass{--blur:24px;-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
+/*$vite$:1*/

package/build/css-utilities/hidden/scss/index.scss

@@ -0,0 +1,2 @@
+.--hidden,.--hidden-active.--active,.--hidden-inactive:not(.--active){display:none}.--hidden-offcanvas{appearance:none;opacity:0;pointer-events:none;z-index:-1;width:0;height:0;position:absolute;top:0;left:0}
+/*$vite$:1*/

package/build/css-utilities/index.d.ts

@@ -0,0 +1,18 @@
+import './[margin,padding]/scss/index.scss';
+import './absolute/scss/index.scss';
+import './background/scss/index.scss';
+import './border/scss/index.scss';
+import './color/scss/index.scss';
+import './disabled/scss/index.scss';
+import './flex/scss/index.scss';
+import './glass/scss/index.scss';
+import './hidden/scss/index.scss';
+import './inline/scss/index.scss';
+import './line-height/scss/index.scss';
+import './not-allowed/scss/index.scss';
+import './pointer/scss/index.scss';
+import './size/scss/index.scss';
+import './squircle/scss/index.scss';
+import './text/scss/index.scss';
+import './viewport/scss/index.scss';
+import './width/scss/index.scss';

package/build/css-utilities/index.js

@@ -0,0 +1,18 @@
+import './[margin,padding]/scss/index.scss';
+import './absolute/scss/index.scss';
+import './background/scss/index.scss';
+import './border/scss/index.scss';
+import './color/scss/index.scss';
+import './disabled/scss/index.scss';
+import './flex/scss/index.scss';
+import './glass/scss/index.scss';
+import './hidden/scss/index.scss';
+import './inline/scss/index.scss';
+import './line-height/scss/index.scss';
+import './not-allowed/scss/index.scss';
+import './pointer/scss/index.scss';
+import './size/scss/index.scss';
+import './squircle/scss/index.scss';
+import './text/scss/index.scss';
+import './viewport/scss/index.scss';
+import './width/scss/index.scss';

package/build/css-utilities/inline/scss/index.scss

@@ -0,0 +1,2 @@
+.--inline{font-size:inherit;line-height:inherit;margin:0;padding:0;display:inline}
+/*$vite$:1*/

package/build/css-utilities/line-height/scss/index.scss

@@ -0,0 +1,2 @@
+.--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)}
+/*$vite$:1*/

package/build/css-utilities/not-allowed/scss/index.scss

@@ -0,0 +1,2 @@
+.--not-allowed{cursor:not-allowed}.--not-allowed *{pointer-events:none}
+/*$vite$:1*/

package/build/css-utilities/pointer/scss/index.scss

@@ -0,0 +1,2 @@
+.--pointer-none{pointer-events:none}
+/*$vite$:1*/

package/build/css-utilities/size/scss/index.scss

@@ -0,0 +1,2 @@
+.--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)}
+/*$vite$:1*/

package/build/css-utilities/squircle/scss/index.scss

@@ -0,0 +1,2 @@
+.--squircle{aspect-ratio:1;clip-path:polygon(100% 50%,99.95% 62.53%,99.8% 67.7%,99.56% 71.64%,99.21% 74.93%,98.76% 77.79%,98.21% 80.34%,97.56% 82.63%,96.81% 84.7%,95.94% 86.6%,94.97% 88.33%,93.89% 89.92%,92.69% 91.37%,91.37% 92.69%,89.92% 93.89%,88.33% 94.97%,86.6% 95.94%,84.7% 96.81%,82.63% 97.56%,80.34% 98.21%,77.79% 98.76%,74.93% 99.21%,71.64% 99.56%,67.7% 99.8%,62.53% 99.95%,50% 100%,37.47% 99.95%,32.3% 99.8%,28.36% 99.56%,25.07% 99.21%,22.21% 98.76%,19.66% 98.21%,17.37% 97.56%,15.3% 96.81%,13.4% 95.94%,11.67% 94.97%,10.08% 93.89%,8.63% 92.69%,7.31% 91.37%,6.11% 89.92%,5.03% 88.33%,4.06% 86.6%,3.19% 84.7%,2.44% 82.63%,1.79% 80.34%,1.24% 77.79%,.79% 74.93%,.44% 71.64%,.2% 67.7%,.05% 62.53%,0% 50%,.05% 37.47%,.2% 32.3%,.44% 28.36%,.79% 25.07%,1.24% 22.21%,1.79% 19.66%,2.44% 17.37%,3.19% 15.3%,4.06% 13.4%,5.03% 11.67%,6.11% 10.08%,7.31% 8.63%,8.63% 7.31%,10.08% 6.11%,11.67% 5.03%,13.4% 4.06%,15.3% 3.19%,17.37% 2.44%,19.66% 1.79%,22.21% 1.24%,25.07% .79%,28.36% .44%,32.3% .2%,37.47% .05%,50% 0%,62.53% .05%,67.7% .2%,71.64% .44%,74.93% .79%,77.79% 1.24%,80.34% 1.79%,82.63% 2.44%,84.7% 3.19%,86.6% 4.06%,88.33% 5.03%,89.92% 6.11%,91.37% 7.31%,92.69% 8.63%,93.89% 10.08%,94.97% 11.67%,95.94% 13.4%,96.81% 15.3%,97.56% 17.37%,98.21% 19.66%,98.76% 22.21%,99.21% 25.07%,99.56% 28.36%,99.8% 32.3%,99.95% 37.47%,100% 50%);width:var(--width,var(--size-800))}
+/*$vite$:1*/

package/build/css-utilities/text/scss/index.scss

@@ -0,0 +1,2 @@
+.--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-900{--font-size:var(--font-size-900)}.--text-line-through,.--text-line-through-400{--line-width:var(--border-width-400)}.--text-line-through-500{--line-width:var(--border-width-500)}.--text-line-through-600{--line-width:var(--border-width-600)}.--text-line-through-700{--line-width:var(--border-width-700)}.--text-outline{--color:inherit;--stroke-width:var(--border-width-400)}.--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-bold{font-weight:var(--font-weight-500)}.--text-bold-600{font-weight:var(--font-weight-600)}.--text-center{text-align:center}.--text-crop:after,.--text-crop:before,.--text-crop-bottom:after,.--text-crop-top:before{content:"";width:100%;height:0;display:block}.--text-crop:after,.--text-crop-bottom:after{margin-bottom:calc((1 - var(--line-height))*.618em)}.--text-crop:before,.--text-crop-top:before{margin-top:calc((1 - var(--line-height))*.618em)}.--text-italic{font-style:italic}.--text-line-through{text-decoration:line-through;text-decoration-thickness:var(--line-width)}.--text-multiplier{font-size:calc(var(--font-size)*var(--text-multiplier))}.--text-outline{color:var(--color);word-break:break-word;word-wrap:break-word}@supports (-webkit-text-stroke-width:1px){.--text-outline{color:#0000;-webkit-text-fill-color:transparent;-webkit-text-stroke-color:var(--color);-webkit-text-stroke-width:var(--stroke-width)}}.--text-truncate{line-height:var(--size);text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.--text-underline{text-decoration:underline}.--text-underline-dotted{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.--text-uppercase{text-transform:uppercase}
+/*$vite$:1*/

package/build/css-utilities/viewport/scss/index.scss

@@ -0,0 +1,2 @@
+.--viewport{height:calc(100svh - var(--margin-vertical,0px)*2);width:calc(100vw - var(--margin-horizontal,0px)*2);overflow:hidden}
+/*$vite$:1*/

package/build/css-utilities/width/scss/index.scss

@@ -0,0 +1,2 @@
+.--width-full{--width:100%}.--width-half{--width:50%}.--width{width:var(--width)}
+/*$vite$:1*/

package/build/fonts/index.d.ts

@@ -0,0 +1 @@
+export * as montserrat from './montserrat/index.js';

package/build/fonts/index.js

@@ -0,0 +1 @@
+export * as montserrat from './montserrat/index.js';

package/build/fonts/montserrat/index.d.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/fonts/montserrat/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/fonts/montserrat/scss/index.scss

@@ -0,0 +1,2 @@
+@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:400;src:local(Montserrat Regular),local(Montserrat-Regular),url(/fonts/montserrat/scss/Montserrat-Regular.woff2)format("woff2"),url(/fonts/montserrat/scss/Montserrat-Regular.woff)format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:400;src:local(Montserrat Italic),local(Montserrat-Italic),url(/fonts/montserrat/scss/Montserrat-Italic.woff2)format("woff2"),url(/fonts/montserrat/scss/Montserrat-Italic.woff)format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:500;src:local(Montserrat Medium),local(Montserrat-Medium),url(/fonts/montserrat/scss/Montserrat-Medium.woff2)format("woff2"),url(/fonts/montserrat/scss/Montserrat-Medium.woff)format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:500;src:local(Montserrat MediumItalic),local(Montserrat-MediumItalic),url(/fonts/montserrat/scss/Montserrat-MediumItalic.woff2)format("woff2"),url(/fonts/montserrat/scss/Montserrat-MediumItalic.woff)format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:600;src:local(Montserrat SemiBold),local(Montserrat-SemiBold),url(/fonts/montserrat/scss/Montserrat-SemiBold.woff2)format("woff2"),url(/fonts/montserrat/scss/Montserrat-SemiBold.woff)format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:600;src:local(Montserrat SemiBoldItalic),local(Montserrat-SemiBoldItalic),url(/fonts/montserrat/scss/Montserrat-SemiBoldItalic.woff2)format("woff2"),url(/fonts/montserrat/scss/Montserrat-SemiBoldItalic.woff)format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:700;src:local(Montserrat Bold),local(Montserrat Bold),url(/fonts/montserrat/scss/Montserrat-Bold.woff2)format("woff2"),url(/fonts/montserrat/scss/Montserrat-Bold.woff)format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:700;src:local(Montserrat BoldItalic),local(Montserrat-BoldItalic),url(/fonts/montserrat/scss/Montserrat-BoldItalic.woff2)format("woff2"),url(/fonts/montserrat/scss/Montserrat-BoldItalic.woff)format("woff")}
+/*$vite$:1*/

package/lib.scss

@@ -0,0 +1,2 @@
+// Dart sass doesn't support changing root directory for the package to 'src'
+@forward './src/lib';

package/package.json

@@ -8,18 +8,40 @@
     "modern-normalize": "^3.0.1"
   },
   "devDependencies": {
-    "@esportsplus/typescript": "^0.9.1"
+    "@esportsplus/typescript": "^0.9.1",
+    "@types/node": "^24.0.14",
+    "autoprefixer": "^10.4.21",
+    "glob": "^11.0.3",
+    "lightningcss": "^1.30.1",
+    "npm-run-all": "^4.1.5",
+    "sass": "^1.89.2",
+    "vite": "^7.0.4"
   },
   "exports": {
-    "./css-utilities": "./src/css-utilities/index.ts",
-    "./fonts": "./src/fonts/index.ts",
-    "./lib": "./src/lib/index.scss",
-    "./tokens": "./src/tokens/index.scss",
-    ".": "./src/components/index.ts"
+    "./css-utilities": {
+      "types": "./build/css-utilities/index.d.ts",
+      "default": "./build/css-utilities/index.js"
+    },
+    "./fonts": {
+      "types": "./build/fonts/index.d.ts",
+      "default": "./build/fonts/index.js"
+    },
+    "./lib.scss": "./lib.scss",
+    "./tokens.scss": "./tokens.scss",
+    ".": {
+      "types": "./build/components/index.d.ts",
+      "default": "./build/components/index.js"
+    }
   },
   "name": "@esportsplus/ui",
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.9.0"
+  "version": "0.9.3",
+  "scripts": {
+    "build": "run-s build:vite build:ts",
+    "build:ts": "tsc && tsc-alias",
+    "build:vite": "vite build",
+    "-": "-"
+  }
 }

package/src/components/field/file.ts

@@ -1,7 +1,7 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
 import { omit, pick } from '@esportsplus/utilities';
-import form from '../form';
+import form from '~/components/form';
 import description from './description';
 import error from './error';
 import title from './title';

package/src/components/field/select.ts

@@ -1,9 +1,9 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
-import form from '../form';
-import scrollbar from '../scrollbar';
-import root from '../root';
+import form from '~/components/form';
+import scrollbar from '~/components/scrollbar';
+import root from '~/components/root';
 import description from './description';
 import error from './error';
 import title from './title';

package/src/components/field/text.ts

@@ -1,7 +1,7 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
 import { omit, pick } from '@esportsplus/utilities';
-import form from '../form';
+import form from '~/components/form';
 import description from './description';
 import error from './error';
 import title from './title';

package/src/components/field/title.ts

@@ -1,5 +1,5 @@
 import { html } from '@esportsplus/template';
-import tooltip from '../tooltip';
+import tooltip from '~/components/tooltip';
 
 
 export default (data: { required?: boolean, title?: unknown }) => {

package/src/components/normalize/index.ts

@@ -1 +1 @@
-import 'modern-normalize/modern-normalize.css';
+import './scss/index.scss';

package/src/components/normalize/scss/index.scss

@@ -0,0 +1 @@
+@use 'modern-normalize/modern-normalize.css';

package/src/components/site/index.ts

@@ -1,6 +1,6 @@
 import { html } from '@esportsplus/template';
-import { onclick } from '../root';
-import scrollbar from '../scrollbar';
+import { onclick } from '~/components/root';
+import scrollbar from '~/components/scrollbar';
 import './scss/index.scss';
 
 

package/src/components/tooltip/index.ts

@@ -1,5 +1,5 @@
 import { reactive } from '@esportsplus/reactivity';
-import root from '../root';
+import root from '~/components/root';
 import './scss/index.scss';
 
 

package/src/fonts/index.ts

@@ -0,0 +1 @@
+export * as montserrat from './montserrat';

package/src/fonts/montserrat/index.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/src/fonts/montserrat/scss/index.scss

@@ -0,0 +1,79 @@
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Montserrat Regular'), local('Montserrat-Regular'),
+         url('Montserrat-Regular.woff2') format('woff2'),
+         url('Montserrat-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 400;
+    src: local('Montserrat Italic'), local('Montserrat-Italic'),
+         url('Montserrat-Italic.woff2') format('woff2'),
+         url('Montserrat-Italic.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Montserrat Medium'), local('Montserrat-Medium'),
+         url('Montserrat-Medium.woff2') format('woff2'),
+         url('Montserrat-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 500;
+    src: local('Montserrat MediumItalic'), local('Montserrat-MediumItalic'),
+         url('Montserrat-MediumItalic.woff2') format('woff2'),
+         url('Montserrat-MediumItalic.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
+         url('Montserrat-SemiBold.woff2') format('woff2'),
+         url('Montserrat-SemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 600;
+    src: local('Montserrat SemiBoldItalic'), local('Montserrat-SemiBoldItalic'),
+         url('Montserrat-SemiBoldItalic.woff2') format('woff2'),
+         url('Montserrat-SemiBoldItalic.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Montserrat Bold'), local('Montserrat Bold'),
+         url('Montserrat-Bold.woff2') format('woff2'),
+         url('Montserrat-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 700;
+    src: local('Montserrat BoldItalic'), local('Montserrat-BoldItalic'),
+         url('Montserrat-BoldItalic.woff2') format('woff2'),
+         url('Montserrat-BoldItalic.woff') format('woff');
+}

package/tokens.scss

@@ -0,0 +1,2 @@
+// Dart sass doesn't support changing root directory for the package to 'src'
+@forward './src/tokens';

package/tsconfig.json

@@ -1,6 +1,3 @@
 {
-    "compilerOptions": {
-        "paths": null
-    },
     "extends": "@esportsplus/typescript/tsconfig.package.json"
 }

package/vite.config.ts

@@ -0,0 +1,32 @@
+import { glob } from 'glob';
+import { defineConfig } from 'vite';
+import autoprefixer from 'autoprefixer';
+
+
+export default defineConfig({
+    build: {
+        cssMinify: 'lightningcss',
+        rollupOptions: {
+            input: Object.fromEntries(
+                glob.sync('./src/{components,css-utilities,fonts}/*/scss/index.scss').map(file => [file, file])
+            ),
+            output: {
+                assetFileNames: ({ originalFileNames: [filename] }) => {
+                    if (filename) {
+                        return filename.split('src/').pop()!;
+                    }
+
+                    return '[name].[ext]';
+                }
+            }
+        },
+        outDir: 'build',
+    },
+    css: {
+        postcss: {
+            plugins: [
+                autoprefixer()
+            ]
+        }
+    },
+});