@esportsplus/ui 0.0.45 → 0.0.46

package/build/components/alert/index.js

@@ -1,10 +1,12 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const reactivity_1 = require("@esportsplus/reactivity");
+const template_1 = require("@esportsplus/template");
 let modifiers = {
     error: 'red',
     info: 'black',
     success: 'green'
-}, state = reactive({
+}, state = (0, reactivity_1.reactive)({
     active: false,
     messages: new Set,
     processing: false,
@@ -92,9 +94,9 @@ const processing = () => {
 };
 const success = (messages, seconds = 0) => activate('success', messages, seconds);
 const h = () => {
-    return () => state.active || state.processing ? html `
+    return () => state.active || state.processing ? (0, template_1.html) `
         <div class='alert anchor anchor--ne ${() => state.active && '--active'} ${() => `alert--${state.state}`}'>
-            ${() => !state.processing ? html `
+            ${() => !state.processing ? (0, template_1.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">
@@ -114,12 +116,12 @@ const h = () => {
                             <h5 class="page-title">
                                 ${() => state.type.charAt(0).toUpperCase() + state.type.slice(1)}
                             </h5>
-                            ${() => state.type && [...state.messages].map((message) => html `
+                            ${() => state.type && [...state.messages].map((message) => (0, template_1.html) `
                                 <p class='--margin-top --margin-border-width-500'>${message}</p>
                             `)}
                         </div>
 
-                        ${() => !state.processing && state.seconds ? html `
+                        ${() => !state.processing && state.seconds ? (0, template_1.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);' />
@@ -147,4 +149,4 @@ const h = () => {
     ` : '';
 };
 const types = ['error', 'info', 'success'];
-export default { deactivate, error, html: h, info, processing, success, types };
+exports.default = { deactivate, error, html: h, info, processing, success, types };

package/build/components/field/checkbox.js

@@ -1,11 +1,16 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import description from './description';
-export default (data) => {
-    let state = reactive({
+"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)({
         active: false
     });
-    return html `
+    return (0, template_1.html) `
         <div
             class="field --flex-column ${data?.class || ''} ${() => state.active ? '--active' : ''}"
             onchange='${(e) => {
@@ -35,7 +40,7 @@ export default (data) => {
 
             ${data?.field?.content || ''}
 
-            ${description(data)}
+            ${(0, description_1.default)(data)}
         </div>
     `;
 };

package/build/components/field/description.js

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

package/build/components/field/error.js

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

package/build/components/field/index.js

@@ -1,6 +1,11 @@
-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 };
+"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 };

package/build/components/field/optional.js

@@ -1,20 +1,25 @@
-import sel from './select';
-import s from './switch';
-import tex from './text';
+"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"));
 const select = (data) => {
-    return s(Object.assign(data, {
+    return (0, switch_1.default)(Object.assign(data, {
         class: `field--optional ${data?.class || ''}`,
         field: {
-            content: sel(data.field)
+            content: (0, select_1.default)(data.field)
         }
     }));
 };
 const text = (data) => {
-    return s(Object.assign(data, {
+    return (0, switch_1.default)(Object.assign(data, {
         class: `field--optional ${data?.class || ''}`,
         field: {
-            content: tex(data.field)
+            content: (0, text_1.default)(data.field)
         }
     }));
 };
-export default { select, text };
+exports.default = { select, text };

package/build/components/field/select.js

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

package/build/components/field/switch.js

@@ -1,6 +1,11 @@
-import checkbox from './checkbox';
-export default (data) => {
+"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) => {
     data.mask = data.mask || {};
     data.mask.class = `field-mask--switch ${data.mask?.class || ''}`;
-    return checkbox(data);
+    return (0, checkbox_1.default)(data);
 };

package/build/components/field/text.js

@@ -1,15 +1,20 @@
-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({
+"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)({
         active: false,
         error: ''
     });
-    return html `
+    return (0, template_1.html) `
         <div
             class="field ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column"
             onfocusin='${() => {
@@ -20,7 +25,7 @@ export default (data) => {
     }}'
             style='${data?.style || ''}'
         >
-            ${title(data)}
+            ${(0, title_1.default)(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'
@@ -30,7 +35,7 @@ export default (data) => {
                     class='field-tag --padding-400'
                     name='${data?.name || ''}'
                     placeholder='${data?.placeholder || ''}'
-                    onrender='${form.input.attributes(state)}'
+                    onrender='${components_1.form.input.attributes(state)}'
                     type='${data?.type || 'string'}'
                     ${data?.value !== undefined ? `value='${data.value}'` : ''}
                 >
@@ -38,8 +43,8 @@ export default (data) => {
                 ${data?.mask?.content || ''}
             </label>
 
-            ${description(data)}
-            ${error(state)}
+            ${(0, description_1.default)(data)}
+            ${(0, error_1.default)(state)}
         </div>
     `;
 };

package/build/components/field/title.js

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

package/build/components/form/action.js

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

package/build/components/form/index.js

@@ -1,4 +1,9 @@
-import action from './action';
-import input from './input';
-import layout from './layout';
-export default { action, input, layout };
+"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 };

package/build/components/form/input.js

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

package/build/components/form/layout.js

@@ -1,12 +1,14 @@
-import { html } from '@esportsplus/template';
-import { header } from '../../components/page';
-export default (data) => html `
-    ${header(data)}
+"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)}
 
     <form class='${data?.class}' ${data?.action || ''}>
         ${data?.content || ''}
 
-        ${data?.button ? html `
+        ${data?.button ? (0, template_1.html) `
             <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
                 ${data?.button?.content || ''}
             </button>

package/build/components/form/types.js

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

package/build/components/index.js

@@ -1,9 +1,24 @@
-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';
+"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; } });

package/build/components/overlay/index.js

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

package/build/components/page/header.js

@@ -1,18 +1,20 @@
-import { html } from '@esportsplus/template';
-export default (data) => html `
-    ${data?.suptitle ? html `
+"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) `
         <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 ? html `
+    ${data?.title ? (0, template_1.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 ? html `
+    ${data?.subtitle ? (0, template_1.html) `
         <span class="page-subtitle --margin-top --margin-300 --text-crop-bottom">
             ${data?.subtitle}
         </span>

package/build/components/page/index.js

@@ -1,4 +1,11 @@
-import header from './header';
-import layout from './layout';
-export default { header, layout };
-export { header, layout };
+"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 };

package/build/components/page/layout.js

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

package/build/components/root/index.js

@@ -1,3 +1,9 @@
-import queue from './queue';
-export default { queue };
-export { queue };
+"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 };

package/build/components/root/queue.js

@@ -1,8 +1,13 @@
-import events from '@esportsplus/delegated-events';
+"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"));
 let initialized = false, queue = [];
 const onclick = (fn) => {
     if (!initialized) {
-        events.register(document.body, 'click', async () => {
+        delegated_events_1.default.register(document.body, 'click', async () => {
             if (!queue.length) {
                 return;
             }
@@ -15,4 +20,4 @@ const onclick = (fn) => {
     }
     queue.push(fn);
 };
-export default { onclick };
+exports.default = { onclick };

package/build/components/scrollbar/index.js

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

package/build/components/site/index.js

@@ -1,11 +1,13 @@
-import { html } from '@esportsplus/template';
-import { scrollbar } from '../../components';
-export default (data) => {
-    let { attributes: a, html: h } = scrollbar({
+"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)({
         fixed: true,
         style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
     });
-    return html `
+    return (0, template_1.html) `
         <section class='site ${data?.class || ''}' ${a}>
             ${data?.content || ''}
             ${h}

package/build/components/tooltip/index.js

@@ -1,12 +1,17 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import { root } from '../../components';
-import menu from './menu';
+"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"));
 const onclick = ({ active, toggle }) => {
-    let state = reactive({
+    let state = (0, reactivity_1.reactive)({
         active: active || false
     });
-    return html({
+    return (0, template_1.html)({
         class: () => {
             return `tooltip ${state.active ? '--active' : ''}`;
         },
@@ -17,14 +22,14 @@ const onclick = ({ active, toggle }) => {
             }
             state.active = active;
             if (active) {
-                root.queue.onclick(() => state.active = false);
+                components_1.root.queue.onclick(() => state.active = false);
             }
         }
     });
 };
 const onhover = (active = false) => {
-    let state = reactive({ active });
-    return html({
+    let state = (0, reactivity_1.reactive)({ active });
+    return (0, template_1.html)({
         class: () => {
             return `tooltip ${state.active ? '--active' : ''}`;
         },
@@ -36,4 +41,4 @@ const onhover = (active = false) => {
         }
     });
 };
-export default { onclick, onhover, menu };
+exports.default = { onclick, onhover, menu: menu_1.default };

package/build/components/tooltip/menu.js

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

package/build/entry.js

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

package/build/index.js

@@ -1,3 +1,24 @@
-import './types';
-export * from './components';
-export { default as entry } from './entry';
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.entry = void 0;
+require("./types");
+__exportStar(require("./components"), exports);
+var entry_1 = require("./entry");
+Object.defineProperty(exports, "entry", { enumerable: true, get: function () { return __importDefault(entry_1).default; } });

package/package.json

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