@esportsplus/ui 0.0.44 → 0.0.45

package/build/components/alert/index.js

@@ -1,12 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const reactivity_1 = require("@esportsplus/reactivity");
-const template_1 = require("@esportsplus/template");
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
 let modifiers = {
     error: 'red',
     info: 'black',
     success: 'green'
-}, state = (0, reactivity_1.reactive)({
+}, state = reactive({
     active: false,
     messages: new Set,
     processing: false,
@@ -94,9 +92,9 @@ const processing = () => {
 };
 const success = (messages, seconds = 0) => activate('success', messages, seconds);
 const h = () => {
-    return () => state.active || state.processing ? (0, template_1.html) `
+    return () => state.active || state.processing ? html `
         <div class='alert anchor anchor--ne ${() => state.active && '--active'} ${() => `alert--${state.state}`}'>
-            ${() => !state.processing ? (0, template_1.html) `
+            ${() => !state.processing ? html `
                 <div class="alert-close --flex-start --margin-right --margin-100" onclick='${deactivate}'>
                     <div class='button --background-state ${() => `--background-${modifiers[state.type] || 'black'}`} --color-state --color-white --flex-center --padding-300'>
                         <div class="icon --size-300">
@@ -116,12 +114,12 @@ const h = () => {
                             <h5 class="page-title">
                                 ${() => state.type.charAt(0).toUpperCase() + state.type.slice(1)}
                             </h5>
-                            ${() => state.type && [...state.messages].map((message) => (0, template_1.html) `
+                            ${() => state.type && [...state.messages].map((message) => html `
                                 <p class='--margin-top --margin-border-width-500'>${message}</p>
                             `)}
                         </div>
 
-                        ${() => !state.processing && state.seconds ? (0, template_1.html) `
+                        ${() => !state.processing && state.seconds ? html `
                             <svg class='alert-timer' style='--animation-duration: ${state.seconds}s;'>
                                 <circle class="alert-timer-bg" cx="50%" cy="50%" r="40%" style='--border-color: var(--color-grey-500);' />
                                 <circle class="alert-timer-meter" cx="50%" cy="50%" r="40%" style='--border-color: var(--color-black-300);' />
@@ -149,4 +147,4 @@ const h = () => {
     ` : '';
 };
 const types = ['error', 'info', 'success'];
-exports.default = { deactivate, error, html: h, info, processing, success, types };
+export default { deactivate, error, html: h, info, processing, success, types };

package/build/components/field/checkbox.js

@@ -1,16 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const reactivity_1 = require("@esportsplus/reactivity");
-const template_1 = require("@esportsplus/template");
-const description_1 = __importDefault(require("./description"));
-exports.default = (data) => {
-    let state = (0, reactivity_1.reactive)({
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import description from './description';
+export default (data) => {
+    let state = reactive({
         active: false
     });
-    return (0, template_1.html) `
+    return html `
         <div
             class="field --flex-column ${data?.class || ''} ${() => state.active ? '--active' : ''}"
             onchange='${(e) => {
@@ -40,7 +35,7 @@ exports.default = (data) => {
 
             ${data?.field?.content || ''}
 
-            ${(0, description_1.default)(data)}
+            ${description(data)}
         </div>
     `;
 };

package/build/components/field/description.js

@@ -1,11 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const template_1 = require("@esportsplus/template");
-exports.default = (data) => {
+import { html } from '@esportsplus/template';
+export default (data) => {
     if (!data?.description) {
         return '';
     }
-    return (0, template_1.html) `
+    return html `
         <div class='field-description --margin-top --margin-300'>${data.description}</div>
     `;
 };

package/build/components/field/error.js

@@ -1,12 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const template_1 = require("@esportsplus/template");
-exports.default = (data) => {
+import { html } from '@esportsplus/template';
+export default (data) => {
     return () => {
         if (!data.error) {
             return '';
         }
-        return (0, template_1.html) `
+        return html `
             <div class='field-error --margin-top --margin-300 --text-bold'>${data.error}</div>
         `;
     };

package/build/components/field/index.js

@@ -1,11 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const checkbox_1 = __importDefault(require("./checkbox"));
-const optional_1 = __importDefault(require("./optional"));
-const select_1 = __importDefault(require("./select"));
-const switch_1 = __importDefault(require("./switch"));
-const text_1 = __importDefault(require("./text"));
-exports.default = { checkbox: checkbox_1.default, optional: optional_1.default, select: select_1.default, switch: switch_1.default, text: text_1.default };
+import checkbox from './checkbox';
+import optional from './optional';
+import select from './select';
+import s from './switch';
+import text from './text';
+export default { checkbox, optional, select, switch: s, text };

package/build/components/field/optional.js

@@ -1,25 +1,20 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const select_1 = __importDefault(require("./select"));
-const switch_1 = __importDefault(require("./switch"));
-const text_1 = __importDefault(require("./text"));
+import sel from './select';
+import s from './switch';
+import tex from './text';
 const select = (data) => {
-    return (0, switch_1.default)(Object.assign(data, {
+    return s(Object.assign(data, {
         class: `field--optional ${data?.class || ''}`,
         field: {
-            content: (0, select_1.default)(data.field)
+            content: sel(data.field)
         }
     }));
 };
 const text = (data) => {
-    return (0, switch_1.default)(Object.assign(data, {
+    return s(Object.assign(data, {
         class: `field--optional ${data?.class || ''}`,
         field: {
-            content: (0, text_1.default)(data.field)
+            content: tex(data.field)
         }
     }));
 };
-exports.default = { select, text };
+export default { select, text };

package/build/components/field/select.js

@@ -1,14 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const reactivity_1 = require("@esportsplus/reactivity");
-const template_1 = require("@esportsplus/template");
-const components_1 = require("../../components");
-const description_1 = __importDefault(require("./description"));
-const error_1 = __importDefault(require("./error"));
-const title_1 = __importDefault(require("./title"));
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { form, scrollbar, root } from '../../components';
+import description from './description';
+import error from './error';
+import title from './title';
 function parse(keys, selected) {
     let options = {};
     for (let key of keys) {
@@ -21,11 +16,11 @@ function parse(keys, selected) {
     };
 }
 function template(data, state) {
-    let { attributes: a, html: h } = (0, components_1.scrollbar)({
+    let { attributes: a, html: h } = scrollbar({
         fixed: true,
         style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
     });
-    return (0, template_1.html) `
+    return html `
         <div
             class='tooltip-content tooltip-content--${data?.tooltip?.direction || 's'} ${data?.tooltip?.class || ''} --flex-column --width-full'
             style='${data?.tooltip?.style || ''}'
@@ -47,7 +42,7 @@ function template(data, state) {
     }}'
                 ${a}
             >
-                ${Object.keys(data.options || {}).map((key) => (0, template_1.html) `
+                ${Object.keys(data.options || {}).map((key) => html `
                     <div
                         class='link ${data?.option?.class || ''} ${() => state.options[key] ? '--active' : ''} --flex-vertical' data-key='${key}'
                         style='${data?.option?.style || ''}'
@@ -63,15 +58,15 @@ function template(data, state) {
         </div>
     `;
 }
-exports.default = (data) => {
-    let state = (0, reactivity_1.reactive)(Object.assign({
+export default (data) => {
+    let state = reactive(Object.assign({
         active: false,
         error: '',
         render: false,
     }, parse(Object.keys(data.options || {}), data.selected)));
-    return (0, template_1.html) `
+    return html `
         <div class="field tooltip ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column" style='${data?.style || ''}'>
-            ${(0, title_1.default)(data)}
+            ${title(data)}
 
             <label
                 class="field-mask field-mask--select --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) && '--margin-top'} --margin-300 --padding-400"
@@ -79,7 +74,7 @@ exports.default = (data) => {
         state.render = true;
         state.active = !state.active;
         if (state.active) {
-            components_1.root.queue.onclick(() => state.active = false);
+            root.queue.onclick(() => state.active = false);
         }
     }}'
                 style='${data?.mask?.style || ''}'
@@ -88,7 +83,7 @@ exports.default = (data) => {
                     class='field-tag field-tag--hidden'
                     name='${data.name}'
                     onclick='${() => { }}'
-                    onrender='${components_1.form.input.attributes(state)}'
+                    onrender='${form.input.attributes(state)}'
                     value='${() => state.selected}'
                 >
 
@@ -101,8 +96,8 @@ exports.default = (data) => {
                 ${() => state.render ? template(data, state) : ''}
             </label>
 
-            ${(0, description_1.default)(data)}
-            ${(0, error_1.default)(state)}
+            ${description(data)}
+            ${error(state)}
         </div>
     `;
 };

package/build/components/field/switch.js

@@ -1,11 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const checkbox_1 = __importDefault(require("./checkbox"));
-exports.default = (data) => {
+import checkbox from './checkbox';
+export default (data) => {
     data.mask = data.mask || {};
     data.mask.class = `field-mask--switch ${data.mask?.class || ''}`;
-    return (0, checkbox_1.default)(data);
+    return checkbox(data);
 };

package/build/components/field/text.js

@@ -1,20 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const reactivity_1 = require("@esportsplus/reactivity");
-const template_1 = require("@esportsplus/template");
-const components_1 = require("../../components");
-const description_1 = __importDefault(require("./description"));
-const error_1 = __importDefault(require("./error"));
-const title_1 = __importDefault(require("./title"));
-exports.default = (data) => {
-    let state = (0, reactivity_1.reactive)({
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { form } from '../../components';
+import description from './description';
+import error from './error';
+import title from './title';
+export default (data) => {
+    let state = reactive({
         active: false,
         error: ''
     });
-    return (0, template_1.html) `
+    return html `
         <div
             class="field ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column"
             onfocusin='${() => {
@@ -25,7 +20,7 @@ exports.default = (data) => {
     }}'
             style='${data?.style || ''}'
         >
-            ${(0, title_1.default)(data)}
+            ${title(data)}
 
             <label
                 class='field-mask field-mask--input --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) && '--margin-top'} --margin-300'
@@ -35,7 +30,7 @@ exports.default = (data) => {
                     class='field-tag --padding-400'
                     name='${data?.name || ''}'
                     placeholder='${data?.placeholder || ''}'
-                    onrender='${components_1.form.input.attributes(state)}'
+                    onrender='${form.input.attributes(state)}'
                     type='${data?.type || 'string'}'
                     ${data?.value !== undefined ? `value='${data.value}'` : ''}
                 >
@@ -43,8 +38,8 @@ exports.default = (data) => {
                 ${data?.mask?.content || ''}
             </label>
 
-            ${(0, description_1.default)(data)}
-            ${(0, error_1.default)(state)}
+            ${description(data)}
+            ${error(state)}
         </div>
     `;
 };

package/build/components/field/title.js

@@ -1,17 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const template_1 = require("@esportsplus/template");
-const components_1 = require("../../components");
-exports.default = (data) => {
+import { html } from '@esportsplus/template';
+import { tooltip } from '../../components';
+export default (data) => {
     if (!data?.title) {
         return '';
     }
-    return (0, template_1.html) `
+    return html `
         <div class="field-title --flex-horizontal-space-between --flex-vertical">
             ${data.title}
 
-            ${data?.required && (0, template_1.html) `
-                <div class="bubble --background-primary --margin-left" ${components_1.tooltip.onhover()}>
+            ${data?.required && html `
+                <div class="bubble --background-primary --margin-left" ${tooltip.onhover()}>
                     <span class="tooltip-message tooltip-message--w">Required</span>
                 </div>
             `}

package/build/components/form/action.js

@@ -1,12 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const action_1 = require("@esportsplus/action");
-const template_1 = require("@esportsplus/template");
-const alert_1 = __importDefault(require("../../components/alert"));
-const input_1 = __importDefault(require("./input"));
+import { response } from '@esportsplus/action';
+import { html } from '@esportsplus/template';
+import alert from '../../components/alert';
+import input from './input';
 function parse(input) {
     let data = {};
     for (let path in input) {
@@ -19,8 +14,8 @@ function parse(input) {
     return data;
 }
 ;
-function default_1(action) {
-    return (0, template_1.html)({
+export default function (action) {
+    return html({
         onclick: function (event) {
             let trigger = event.target;
             if (trigger?.type !== 'submit') {
@@ -32,12 +27,12 @@ function default_1(action) {
         onsubmit: async function (event) {
             event.preventDefault();
             let { errors } = await action({
-                alert: alert_1.default,
+                alert,
                 input: parse(Object.fromEntries(new FormData(this)?.entries())),
                 processing: {
                     end: (deactivate = true) => {
                         if (deactivate) {
-                            alert_1.default.deactivate();
+                            alert.deactivate();
                         }
                         event?.submitter?.classList.remove('button--processing');
                     },
@@ -45,10 +40,10 @@ function default_1(action) {
                         event?.submitter?.classList.add('button--processing');
                     }
                 },
-                response: action_1.response
+                response
             });
             for (let i = 0, n = errors.length; i < n; i++) {
-                let { message, path } = errors[i], state = input_1.default.get(this[path]);
+                let { message, path } = errors[i], state = input.get(this[path]);
                 if (!state) {
                     continue;
                 }
@@ -57,5 +52,4 @@ function default_1(action) {
         }
     });
 }
-exports.default = default_1;
 ;

package/build/components/form/index.js

@@ -1,9 +1,4 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const action_1 = __importDefault(require("./action"));
-const input_1 = __importDefault(require("./input"));
-const layout_1 = __importDefault(require("./layout"));
-exports.default = { action: action_1.default, input: input_1.default, layout: layout_1.default };
+import action from './action';
+import input from './input';
+import layout from './layout';
+export default { action, input, layout };

package/build/components/form/input.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 let cache = new WeakMap();
 const attributes = (reactive) => {
     return (element) => {
@@ -9,4 +7,4 @@ const attributes = (reactive) => {
 const get = (element) => {
     return element ? cache.get(element) : undefined;
 };
-exports.default = { attributes, get };
+export default { attributes, get };

package/build/components/form/layout.js

@@ -1,14 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const template_1 = require("@esportsplus/template");
-const page_1 = require("../../components/page");
-exports.default = (data) => (0, template_1.html) `
-    ${(0, page_1.header)(data)}
+import { html } from '@esportsplus/template';
+import { header } from '../../components/page';
+export default (data) => html `
+    ${header(data)}
 
     <form class='${data?.class}' ${data?.action || ''}>
         ${data?.content || ''}
 
-        ${data?.button ? (0, template_1.html) `
+        ${data?.button ? html `
             <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
                 ${data?.button?.content || ''}
             </button>

package/build/components/form/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/build/components/index.js

@@ -1,24 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tooltip = exports.site = exports.scrollbar = exports.root = exports.page = exports.overlay = exports.form = exports.field = exports.alert = void 0;
-var alert_1 = require("./alert");
-Object.defineProperty(exports, "alert", { enumerable: true, get: function () { return __importDefault(alert_1).default; } });
-var field_1 = require("./field");
-Object.defineProperty(exports, "field", { enumerable: true, get: function () { return __importDefault(field_1).default; } });
-var form_1 = require("./form");
-Object.defineProperty(exports, "form", { enumerable: true, get: function () { return __importDefault(form_1).default; } });
-var overlay_1 = require("./overlay");
-Object.defineProperty(exports, "overlay", { enumerable: true, get: function () { return __importDefault(overlay_1).default; } });
-var page_1 = require("./page");
-Object.defineProperty(exports, "page", { enumerable: true, get: function () { return __importDefault(page_1).default; } });
-var root_1 = require("./root");
-Object.defineProperty(exports, "root", { enumerable: true, get: function () { return __importDefault(root_1).default; } });
-var scrollbar_1 = require("./scrollbar");
-Object.defineProperty(exports, "scrollbar", { enumerable: true, get: function () { return __importDefault(scrollbar_1).default; } });
-var site_1 = require("./site");
-Object.defineProperty(exports, "site", { enumerable: true, get: function () { return __importDefault(site_1).default; } });
-var tooltip_1 = require("./tooltip");
-Object.defineProperty(exports, "tooltip", { enumerable: true, get: function () { return __importDefault(tooltip_1).default; } });
+export { default as alert } from './alert';
+export { default as field } from './field';
+export { default as form } from './form';
+export { default as overlay } from './overlay';
+export { default as page } from './page';
+export { default as root } from './root';
+export { default as scrollbar } from './scrollbar';
+export { default as site } from './site';
+export { default as tooltip } from './tooltip';

package/build/components/overlay/index.js

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const template_1 = require("@esportsplus/template");
-exports.default = (data = {}) => (0, template_1.html) `
+import { html } from '@esportsplus/template';
+export default (data = {}) => html `
     <section class='overlay ${data?.class || ''}'>
         ${data?.content || ''}
     </section>

package/build/components/page/header.js

@@ -1,20 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const template_1 = require("@esportsplus/template");
-exports.default = (data) => (0, template_1.html) `
-    ${data?.suptitle ? (0, template_1.html) `
+import { html } from '@esportsplus/template';
+export default (data) => html `
+    ${data?.suptitle ? html `
         <span class="page-suptitle --text-bold --text-crop --text-uppercase --text-200" style="--color-default: var(--color-primary-400);letter-spacing: 0.24px;">
             ${data?.suptitle}
         </span>
     ` : ''}
 
-    ${data?.title ? (0, template_1.html) `
+    ${data?.title ? html `
         <h1 class="page-title --line-height-200 --margin-300 ${!data?.subtitle && '--text-crop-bottom'} ${data?.suptitle ? '--margin-top' : '--text-crop-top'}">
             ${data?.title}
         </h1>
     ` : ''}
 
-    ${data?.subtitle ? (0, template_1.html) `
+    ${data?.subtitle ? html `
         <span class="page-subtitle --margin-top --margin-300 --text-crop-bottom">
             ${data?.subtitle}
         </span>

package/build/components/page/index.js

@@ -1,11 +1,4 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.layout = exports.header = void 0;
-const header_1 = __importDefault(require("./header"));
-exports.header = header_1.default;
-const layout_1 = __importDefault(require("./layout"));
-exports.layout = layout_1.default;
-exports.default = { header: header_1.default, layout: layout_1.default };
+import header from './header';
+import layout from './layout';
+export default { header, layout };
+export { header, layout };

package/build/components/page/layout.js

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const template_1 = require("@esportsplus/template");
-exports.default = (data = {}) => (0, template_1.html) `
+import { html } from '@esportsplus/template';
+export default (data = {}) => html `
     <section class='page ${data?.class}'>
         ${data?.content}
     </section>

package/build/components/root/index.js

@@ -1,9 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.queue = void 0;
-const queue_1 = __importDefault(require("./queue"));
-exports.queue = queue_1.default;
-exports.default = { queue: queue_1.default };
+import queue from './queue';
+export default { queue };
+export { queue };

package/build/components/root/queue.js

@@ -1,13 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const delegated_events_1 = __importDefault(require("@esportsplus/delegated-events"));
+import events from '@esportsplus/delegated-events';
 let initialized = false, queue = [];
 const onclick = (fn) => {
     if (!initialized) {
-        delegated_events_1.default.register(document.body, 'click', async () => {
+        events.register(document.body, 'click', async () => {
             if (!queue.length) {
                 return;
             }
@@ -20,4 +15,4 @@ const onclick = (fn) => {
     }
     queue.push(fn);
 };
-exports.default = { onclick };
+export default { onclick };

package/build/components/scrollbar/index.js

@@ -1,15 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const reactivity_1 = require("@esportsplus/reactivity");
-const template_1 = require("@esportsplus/template");
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
 let root = document.body, width;
-exports.default = ({ fixed, style } = {}) => {
-    let state = (0, reactivity_1.reactive)({
+export default ({ fixed, style } = {}) => {
+    let state = reactive({
         height: 100,
         translate: 0
     });
     return {
-        attributes: (0, template_1.html)({
+        attributes: html({
             class: () => {
                 return '--scrollbar';
             },
@@ -24,7 +22,7 @@ exports.default = ({ fixed, style } = {}) => {
                 state.translate = (this.scrollTop / this.clientHeight) * 100;
             }
         }),
-        html: (0, template_1.html) `
+        html: html `
             <div
                 class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
                 style='${() => `

package/build/components/site/index.js

@@ -1,13 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const template_1 = require("@esportsplus/template");
-const components_1 = require("../../components");
-exports.default = (data) => {
-    let { attributes: a, html: h } = (0, components_1.scrollbar)({
+import { html } from '@esportsplus/template';
+import { scrollbar } from '../../components';
+export default (data) => {
+    let { attributes: a, html: h } = scrollbar({
         fixed: true,
         style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
     });
-    return (0, template_1.html) `
+    return html `
         <section class='site ${data?.class || ''}' ${a}>
             ${data?.content || ''}
             ${h}

package/build/components/tooltip/index.js

@@ -1,17 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const reactivity_1 = require("@esportsplus/reactivity");
-const template_1 = require("@esportsplus/template");
-const components_1 = require("../../components");
-const menu_1 = __importDefault(require("./menu"));
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { root } from '../../components';
+import menu from './menu';
 const onclick = ({ active, toggle }) => {
-    let state = (0, reactivity_1.reactive)({
+    let state = reactive({
         active: active || false
     });
-    return (0, template_1.html)({
+    return html({
         class: () => {
             return `tooltip ${state.active ? '--active' : ''}`;
         },
@@ -22,14 +17,14 @@ const onclick = ({ active, toggle }) => {
             }
             state.active = active;
             if (active) {
-                components_1.root.queue.onclick(() => state.active = false);
+                root.queue.onclick(() => state.active = false);
             }
         }
     });
 };
 const onhover = (active = false) => {
-    let state = (0, reactivity_1.reactive)({ active });
-    return (0, template_1.html)({
+    let state = reactive({ active });
+    return html({
         class: () => {
             return `tooltip ${state.active ? '--active' : ''}`;
         },
@@ -41,4 +36,4 @@ const onhover = (active = false) => {
         }
     });
 };
-exports.default = { onclick, onhover, menu: menu_1.default };
+export default { onclick, onhover, menu };

package/build/components/tooltip/menu.js

@@ -1,12 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const reactivity_1 = require("@esportsplus/reactivity");
-const template_1 = require("@esportsplus/template");
+import { effect, reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
 function template(data) {
-    return (0, template_1.html) `
+    return html `
         <div class="tooltip-content tooltip-content--${data?.direction || 's'} --flex-column --width-full ${data?.class || ''}" style='${data?.style || ''}'>
-            ${(data?.items || []).map(item => (0, template_1.html) `
-                ${item?.border ? (0, template_1.html) `
+            ${(data?.items || []).map(item => html `
+                ${item?.border ? html `
                     <div
                         class="border ${item?.border?.class || ''}"
                         style='
@@ -17,11 +15,11 @@ function template(data) {
                 ` : ''}
 
                 <${item?.url ? 'a' : 'div'}
-                    class='link --flex-vertical ${item?.class}' ${item?.onclick ? (0, template_1.html)({ onclick: item.onclick }) : ''}
+                    class='link --flex-vertical ${item?.class}' ${item?.onclick ? html({ onclick: item.onclick }) : ''}
                     style='${item?.style || ''}'
                     ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
                 >
-                    ${item?.svg ? (0, template_1.html) `
+                    ${item?.svg ? html `
                         <div class="icon --margin-right --margin-300" style='margin-left: var(--size-100)'>
                             ${item.svg}
                         </div>
@@ -35,11 +33,11 @@ function template(data) {
         </div>
     `;
 }
-exports.default = (data) => {
-    let state = (0, reactivity_1.reactive)({
+export default (data) => {
+    let state = reactive({
         render: false
     });
-    (0, reactivity_1.effect)(() => {
+    effect(() => {
         if (!data.state.active || state.render) {
             return;
         }

package/build/entry.d.ts

@@ -1,21 +1,9 @@
 declare const _default: {
-    styles: (entry: {
-        filename: string;
-        import: string[];
-    }, { font, fonts, normalizer }?: {
+    styles: (files: string[], { font, fonts, normalizer }?: {
         font?: string | undefined;
         fonts?: string[] | undefined;
         normalizer?: boolean | undefined;
-    }) => {
-        filename: string;
-        import: string[];
-    };
-    variables: (entry: {
-        filename: string;
-        import: string[];
-    }) => {
-        filename: string;
-        import: string[];
-    };
+    }) => string[];
+    variables: (files: string[]) => string[];
 };
 export default _default;

package/build/entry.js

@@ -1,21 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const webpack_1 = require("@esportsplus/webpack");
-const styles = (entry, { font, fonts, normalizer } = {}) => {
-    entry.import.unshift(...webpack_1.resolve.glob(`components/**/index.scss`));
-    entry.import.push(...webpack_1.resolve.glob(`css-utilities/**/index.scss`));
+import { resolve } from '@esportsplus/webpack';
+const styles = (files, { font, fonts, normalizer } = {}) => {
+    files.unshift(...resolve.glob(`./components/**/index.scss`));
+    files.push(...resolve.glob(`./css-utilities/**/index.scss`));
     fonts = font ? [font] : fonts;
     if (fonts) {
-        entry.import.unshift(...webpack_1.resolve.glob(`../storage/fonts/{${fonts.join(',')}}/index.css`));
+        files.unshift(...resolve.glob(`../storage/fonts/{${fonts.join(',')}}/index.css`));
     }
     if (normalizer) {
-        entry.import.unshift('modern-normalize/modern-normalize.css');
+        files.unshift('modern-normalize/modern-normalize.css');
     }
-    return entry;
+    return files;
 };
-const variables = (entry) => {
-    entry.import.unshift(...webpack_1.resolve.glob(`components/**/variables.scss`));
-    entry.import.push(...webpack_1.resolve.glob(`css-utilities/**/variables.scss`));
-    return entry;
+const variables = (files) => {
+    files.unshift(...resolve.glob('./components/**/variables.scss'));
+    files.push(...resolve.glob('./css-utilities/**/variables.scss'));
+    return files;
 };
-exports.default = { styles, variables };
+export default { styles, variables };

package/build/index.d.ts

@@ -1,2 +1,3 @@
 import './types';
 export * from './components';
+export { default as entry } from './entry';

package/build/index.js

@@ -1,18 +1,3 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-require("./types");
-__exportStar(require("./components"), exports);
+import './types';
+export * from './components';
+export { default as entry } from './entry';

package/package.json

@@ -8,7 +8,7 @@
     },
     "description": "UI",
     "devDependencies": {
-        "@esportsplus/webpack": "^0.0.36"
+        "@esportsplus/webpack": "^0.0.37"
     },
     "main": "./build/index.js",
     "name": "@esportsplus/ui",
@@ -18,5 +18,5 @@
         "prepublishOnly": "npm run build"
     },
     "types": "./build/index.d.ts",
-    "version": "0.0.44"
+    "version": "0.0.45"
 }

package/src/entry.ts

@@ -1,33 +1,30 @@
-import { entry, resolve } from '@esportsplus/webpack';
+import { resolve } from '@esportsplus/webpack';
 
 
-type Entry = ReturnType<typeof entry.sass>;
-
-
-const styles = (entry: Entry, { font, fonts, normalizer }: { font?: string, fonts?: string[], normalizer?: boolean } = {}) => {
-    entry.import.unshift( ...resolve.glob(`components/**/index.scss`) );
-    entry.import.push( ...resolve.glob(`css-utilities/**/index.scss`) );
+const styles = (files: string[], { font, fonts, normalizer }: { font?: string, fonts?: string[], normalizer?: boolean } = {}) => {
+    files.unshift( ...resolve.glob(`./components/**/index.scss`) );
+    files.push( ...resolve.glob(`./css-utilities/**/index.scss`) );
 
     fonts = font ? [font] : fonts;
 
     if (fonts) {
-        entry.import.unshift(
+        files.unshift(
             ...resolve.glob(`../storage/fonts/{${fonts.join(',')}}/index.css`)
         );
     }
 
     if (normalizer) {
-        entry.import.unshift('modern-normalize/modern-normalize.css');
+        files.unshift('modern-normalize/modern-normalize.css');
     }
 
-    return entry;
+    return files;
 };
 
-const variables = (entry: Entry) => {
-    entry.import.unshift( ...resolve.glob(`components/**/variables.scss`) );
-    entry.import.push( ...resolve.glob(`css-utilities/**/variables.scss`) );
+const variables = (files: string[]) => {
+    files.unshift( ...resolve.glob('./components/**/variables.scss') );
+    files.push( ...resolve.glob('./css-utilities/**/variables.scss') );
 
-    return entry;
+    return files;
 };
 
 

package/src/index.ts

@@ -1,4 +1,5 @@
 import './types';
 
 
-export * from './components';
+export * from './components';
+export { default as entry } from './entry';