@esportsplus/ui 0.17.6 → 0.18.0

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

@@ -1,21 +1,17 @@
+import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 type Data = {
-    copyright: {
-        attributes?: Record<string, unknown>;
+    copyright: Attributes & {
         brand: string;
     };
-    footer?: {
-        attributes: Record<string, unknown>;
-    };
-    nav?: {
-        attributes?: Record<string, unknown>;
+    footer?: Attributes;
+    nav?: Attributes & {
         links: {
             text: string;
             url: string;
         }[];
     };
-    social?: {
-        attributes?: Record<string, unknown>;
+    social?: Attributes & {
         links: {
             icon: string;
             url: string;

package/build/components/footer/index.js

@@ -1,21 +1,22 @@
 import { html, svg } from '@esportsplus/template';
 import './scss/index.scss';
-function copy({ attributes, brand }) {
+import { omit } from '@esportsplus/utilities';
+function copy(data) {
     return html `
         <div class='footer-copyright group-item --flex-center'>
             <div
                 class='text --padding-vertical --padding-300 --text-300'
                 style='--color-default: var(--color-grey-500);'
-                ${attributes}
+                ${omit(data, ['brand'])}
             >
-                &copy; ${`${new Date().getFullYear()} ${brand}, All rights reserved`}
+                &copy; ${`${new Date().getFullYear()} ${data.brand}, All rights reserved`}
             </div>
         </div>
     `;
 }
 export default ({ copyright, footer, nav, social }) => {
     return html `
-        <footer class='footer' ${footer?.attributes}>
+        <footer class='footer' ${footer}>
             <div class='container'>
                 <div class='group group--offset-top --flex-center --margin-400'>
 
@@ -26,7 +27,7 @@ export default ({ copyright, footer, nav, social }) => {
                                     class='link --color-white --padding-vertical-300 --text-300'
                                     href='${url}'
                                     style='--color-default: var(--color-grey-500);'
-                                    ${nav.attributes}
+                                    ${omit(nav, ['links'])}
                                 >
                                     ${text}
                                 </a>
@@ -42,7 +43,7 @@ export default ({ copyright, footer, nav, social }) => {
                                 class='link --color-white --padding-0px'
                                 href='${url}'
                                 style='--color-default: var(--color-grey-500);'
-                                ${social.attributes}
+                                ${omit(social, ['links'])}
                             >
                                 <div class='icon --size-500'>
                                     ${svg.sprite(icon)}

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

@@ -2,10 +2,12 @@ import action from './action.js';
 declare const _default: {
     action: typeof action;
     input: {
-        get: (element?: HTMLInputElement | HTMLSelectElement) => any;
+        get: (element?: import("@esportsplus/template").Element) => {
+            error: string;
+        } | undefined;
         onrender: (reactive: {
             error: string;
-        }) => (element: HTMLInputElement | HTMLSelectElement) => void;
+        }) => (element: import("@esportsplus/template").Element) => void;
     };
 };
 export default _default;

package/build/components/form/input.d.ts

@@ -1,7 +1,10 @@
+import { Element } from '@esportsplus/template';
 declare const _default: {
-    get: (element?: HTMLInputElement | HTMLSelectElement) => any;
+    get: (element?: Element) => {
+        error: string;
+    } | undefined;
     onrender: (reactive: {
         error: string;
-    }) => (element: HTMLInputElement | HTMLSelectElement) => void;
+    }) => (element: Element) => void;
 };
 export default _default;

package/build/components/form/input.js

@@ -1,6 +1,9 @@
 let key = Symbol();
 const get = (element) => {
-    return element ? element[key] : undefined;
+    if (element) {
+        return element[key];
+    }
+    return undefined;
 };
 const onrender = (reactive) => {
     return (element) => {

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

@@ -1 +1,116 @@
 import './scss/index.scss';
+declare const _default: {
+    (content: unknown): import("@esportsplus/template").Renderable;
+    (attributes: {
+        class?: string | (string | (() => unknown))[];
+        style?: string | (string | (() => unknown))[];
+    } & {
+        onabort?: ((event: UIEvent) => void) | undefined;
+        onanimationcancel?: ((event: AnimationEvent) => void) | undefined;
+        onanimationend?: ((event: AnimationEvent) => void) | undefined;
+        onanimationiteration?: ((event: AnimationEvent) => void) | undefined;
+        onanimationstart?: ((event: AnimationEvent) => void) | undefined;
+        onauxclick?: ((event: MouseEvent) => void) | undefined;
+        onbeforeinput?: ((event: InputEvent) => void) | undefined;
+        onbeforetoggle?: ((event: Event) => void) | undefined;
+        onblur?: ((event: FocusEvent) => void) | undefined;
+        oncancel?: ((event: Event) => void) | undefined;
+        oncanplay?: ((event: Event) => void) | undefined;
+        oncanplaythrough?: ((event: Event) => void) | undefined;
+        onchange?: ((event: Event) => void) | undefined;
+        onclick?: ((event: MouseEvent) => void) | undefined;
+        onclose?: ((event: Event) => void) | undefined;
+        oncompositionend?: ((event: CompositionEvent) => void) | undefined;
+        oncompositionstart?: ((event: CompositionEvent) => void) | undefined;
+        oncompositionupdate?: ((event: CompositionEvent) => void) | undefined;
+        oncontextlost?: ((event: Event) => void) | undefined;
+        oncontextmenu?: ((event: MouseEvent) => void) | undefined;
+        oncontextrestored?: ((event: Event) => void) | undefined;
+        oncopy?: ((event: ClipboardEvent) => void) | undefined;
+        oncuechange?: ((event: Event) => void) | undefined;
+        oncut?: ((event: ClipboardEvent) => void) | undefined;
+        ondblclick?: ((event: MouseEvent) => void) | undefined;
+        ondrag?: ((event: DragEvent) => void) | undefined;
+        ondragend?: ((event: DragEvent) => void) | undefined;
+        ondragenter?: ((event: DragEvent) => void) | undefined;
+        ondragleave?: ((event: DragEvent) => void) | undefined;
+        ondragover?: ((event: DragEvent) => void) | undefined;
+        ondragstart?: ((event: DragEvent) => void) | undefined;
+        ondrop?: ((event: DragEvent) => void) | undefined;
+        ondurationchange?: ((event: Event) => void) | undefined;
+        onemptied?: ((event: Event) => void) | undefined;
+        onended?: ((event: Event) => void) | undefined;
+        onerror?: ((event: ErrorEvent) => void) | undefined;
+        onfocus?: ((event: FocusEvent) => void) | undefined;
+        onfocusin?: ((event: FocusEvent) => void) | undefined;
+        onfocusout?: ((event: FocusEvent) => void) | undefined;
+        onformdata?: ((event: FormDataEvent) => void) | undefined;
+        ongotpointercapture?: ((event: PointerEvent) => void) | undefined;
+        oninput?: ((event: Event) => void) | undefined;
+        oninvalid?: ((event: Event) => void) | undefined;
+        onkeydown?: ((event: KeyboardEvent) => void) | undefined;
+        onkeypress?: ((event: KeyboardEvent) => void) | undefined;
+        onkeyup?: ((event: KeyboardEvent) => void) | undefined;
+        onload?: ((event: Event) => void) | undefined;
+        onloadeddata?: ((event: Event) => void) | undefined;
+        onloadedmetadata?: ((event: Event) => void) | undefined;
+        onloadstart?: ((event: Event) => void) | undefined;
+        onlostpointercapture?: ((event: PointerEvent) => void) | undefined;
+        onmousedown?: ((event: MouseEvent) => void) | undefined;
+        onmouseenter?: ((event: MouseEvent) => void) | undefined;
+        onmouseleave?: ((event: MouseEvent) => void) | undefined;
+        onmousemove?: ((event: MouseEvent) => void) | undefined;
+        onmouseout?: ((event: MouseEvent) => void) | undefined;
+        onmouseover?: ((event: MouseEvent) => void) | undefined;
+        onmouseup?: ((event: MouseEvent) => void) | undefined;
+        onpaste?: ((event: ClipboardEvent) => void) | undefined;
+        onpause?: ((event: Event) => void) | undefined;
+        onplay?: ((event: Event) => void) | undefined;
+        onplaying?: ((event: Event) => void) | undefined;
+        onpointercancel?: ((event: PointerEvent) => void) | undefined;
+        onpointerdown?: ((event: PointerEvent) => void) | undefined;
+        onpointerenter?: ((event: PointerEvent) => void) | undefined;
+        onpointerleave?: ((event: PointerEvent) => void) | undefined;
+        onpointermove?: ((event: PointerEvent) => void) | undefined;
+        onpointerout?: ((event: PointerEvent) => void) | undefined;
+        onpointerover?: ((event: PointerEvent) => void) | undefined;
+        onpointerup?: ((event: PointerEvent) => void) | undefined;
+        onprogress?: ((event: ProgressEvent<EventTarget>) => void) | undefined;
+        onratechange?: ((event: Event) => void) | undefined;
+        onreset?: ((event: Event) => void) | undefined;
+        onresize?: ((event: UIEvent) => void) | undefined;
+        onscroll?: ((event: Event) => void) | undefined;
+        onscrollend?: ((event: Event) => void) | undefined;
+        onsecuritypolicyviolation?: ((event: SecurityPolicyViolationEvent) => void) | undefined;
+        onseeked?: ((event: Event) => void) | undefined;
+        onseeking?: ((event: Event) => void) | undefined;
+        onselect?: ((event: Event) => void) | undefined;
+        onselectionchange?: ((event: Event) => void) | undefined;
+        onselectstart?: ((event: Event) => void) | undefined;
+        onslotchange?: ((event: Event) => void) | undefined;
+        onstalled?: ((event: Event) => void) | undefined;
+        onsubmit?: ((event: SubmitEvent) => void) | undefined;
+        onsuspend?: ((event: Event) => void) | undefined;
+        ontimeupdate?: ((event: Event) => void) | undefined;
+        ontoggle?: ((event: Event) => void) | undefined;
+        ontouchcancel?: ((event: TouchEvent) => void) | undefined;
+        ontouchend?: ((event: TouchEvent) => void) | undefined;
+        ontouchmove?: ((event: TouchEvent) => void) | undefined;
+        ontouchstart?: ((event: TouchEvent) => void) | undefined;
+        ontransitioncancel?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionend?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionrun?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionstart?: ((event: TransitionEvent) => void) | undefined;
+        onvolumechange?: ((event: Event) => void) | undefined;
+        onwaiting?: ((event: Event) => void) | undefined;
+        onwebkitanimationend?: ((event: Event) => void) | undefined;
+        onwebkitanimationiteration?: ((event: Event) => void) | undefined;
+        onwebkitanimationstart?: ((event: Event) => void) | undefined;
+        onwebkittransitionend?: ((event: Event) => void) | undefined;
+        onwheel?: ((event: WheelEvent) => void) | undefined;
+    } & Record<PropertyKey, unknown> & {
+        scrollbar?: import("@esportsplus/template").Attributes;
+        'scrollbar-container-content'?: import("@esportsplus/template").Attributes;
+    }, content: unknown): import("@esportsplus/template").Renderable;
+};
+export default _default;

package/build/components/frame/index.js

@@ -1 +1,9 @@
+import { toArray } from '@esportsplus/utilities';
+import scrollbar from '../../components/scrollbar/index.js';
+import template from '../../components/template/index.js';
 import './scss/index.scss';
+export default template.factory((attributes, content) => {
+    attributes.class = toArray(attributes.class);
+    attributes.class.push('frame');
+    return scrollbar(attributes, content);
+});

package/build/components/frame/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.frame{flex-wrap:wrap;justify-content:flex-start;width:100%;display:none;position:relative}.frame.--active{display:flex}}
+@layer components {.frame{cursor:default;flex-wrap:wrap;justify-content:flex-start;width:100%;max-width:100%;display:none;position:relative}.frame.--active{display:flex}}
 /*$vite$:1*/

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

@@ -1,8 +1,9 @@
+import { Element } from '@esportsplus/template';
 import './scss/index.scss';
 declare const _default: (background: string) => {
     attributes: {
         class: string;
-        onrender: (element: HTMLElement & Record<PropertyKey, unknown>) => void;
+        onrender: (element: Element) => void;
         style: (string | (() => string))[];
     };
 };

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

@@ -1,4 +1,7 @@
-import { svg } from '@esportsplus/template';
+import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
-declare const _default: (attributes: Record<string, unknown>, icon: Parameters<typeof svg.sprite>[0]) => import("@esportsplus/template/build/types").RenderableTemplate;
+declare const _default: {
+    (content: string): import("@esportsplus/template").Renderable;
+    (attributes: Attributes, content: string): import("@esportsplus/template").Renderable;
+};
 export default _default;

package/build/components/icon/index.js

@@ -1,9 +1,10 @@
 import { html, svg } from '@esportsplus/template';
+import template from '../../components/template/index.js';
 import './scss/index.scss';
-export default (attributes, icon) => {
+export default template.factory((attributes, icon) => {
     return html `
-        <div class='icon' ${attributes}>
-            ${svg.sprite(icon)}
-        </div>
-    `;
-};
+            <div class='icon' ${attributes}>
+                ${svg.sprite(icon)}
+            </div>
+        `;
+});

package/build/components/index.d.ts

@@ -18,10 +18,9 @@ export * as group from './group/index.js';
 export { default as highlight } from './highlight/index.js';
 export { default as icon } from './icon/index.js';
 export { default as json } from './json/index.js';
-export { default as link } from './link/index.js';
+export * as link from './link/index.js';
 export * as loader from './loader/index.js';
 export { default as loading } from './loading/index.js';
-export { default as magnet } from './magnet/index.js';
 export * as modal from './modal/index.js';
 export { default as number } from './number/index.js';
 export { default as overlay } from './overlay/index.js';

package/build/components/index.js

@@ -18,10 +18,9 @@ export * as group from './group/index.js';
 export { default as highlight } from './highlight/index.js';
 export { default as icon } from './icon/index.js';
 export { default as json } from './json/index.js';
-export { default as link } from './link/index.js';
+export * as link from './link/index.js';
 export * as loader from './loader/index.js';
 export { default as loading } from './loading/index.js';
-export { default as magnet } from './magnet/index.js';
 export * as modal from './modal/index.js';
 export { default as number } from './number/index.js';
 export { default as overlay } from './overlay/index.js';

package/build/components/json/download.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (content: any[] | Record<string, any>, name: string) => void;
+declare const _default: (content: any[] | Record<PropertyKey, any>, name: string) => void;
 export default _default;

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

@@ -1,4 +1,4 @@
 declare const _default: {
-    download: (content: any[] | Record<string, any>, name: string) => void;
+    download: (content: any[] | Record<PropertyKey, any>, name: string) => void;
 };
 export default _default;

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

@@ -1,13 +1 @@
 import './scss/index.scss';
-declare const _default: {
-    hover: ({ attributes, content }: {
-        attributes?: Record<string, any>;
-        content: any;
-    }) => {
-        attributes: {
-            class: string;
-        };
-        html: import("@esportsplus/template/build/types").RenderableTemplate;
-    };
-};
-export default _default;

package/build/components/link/index.js

@@ -1,3 +1 @@
-import hover from './hover.js';
 import './scss/index.scss';
-export default { hover };

package/build/components/link/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.link{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--border-radius:var(--border-radius-400);--border-width:0px;--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);--font-size:var(--font-size-400);--font-weight:var(--font-weight-500);--line-height:var(--line-height-400);--padding-horizontal:0px;--padding-vertical:var(--size-400);--width:auto}.link.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.link:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.link:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.link{background:var(--background);color:var(--color);cursor:pointer;font-size:var(--font-size);line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width))calc(var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,color var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;width:var(--width);flex-wrap:wrap;place-content:center flex-start;display:flex;position:relative}.link--hover.tooltip:hover .link-hover--one,.link--hover:not(.--active):hover .link-hover--one{opacity:0;transform:translateY(-75%)}.link--hover.tooltip:hover .link-hover--two,.link--hover:not(.--active):hover .link-hover--two{opacity:1;transform:translate(50%,50%)}.link--underline.--active,.link--underline:not(.--active):hover{text-decoration:underline}.link-hover{transition:opacity .3s ease-in-out,all .3s cubic-bezier(.23,.65,.74,1.09)}.link-hover--one{transform:translateY(0)}.link-hover--two{opacity:0;padding:0 var(--padding-horizontal);white-space:nowrap;position:absolute;bottom:50%;right:50%;transform:translate(50%,125%)}}
+@layer components {.link{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--border-radius:var(--border-radius-400);--border-width:0px;--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);--font-size:var(--font-size-400);--font-weight:var(--font-weight-500);--line-height:var(--line-height-400);--padding-horizontal:0px;--padding-vertical:var(--size-400);--width:auto}.link.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.link:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.link:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.link{background:var(--background);color:var(--color);cursor:pointer;font-size:var(--font-size);line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width))calc(var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,color var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;width:var(--width);flex-wrap:wrap;place-content:center flex-start;display:flex;position:relative}.link--underline.--active,.link--underline:not(.--active):hover{text-decoration:underline}.link-hover{transition:opacity .3s ease-in-out,all .3s cubic-bezier(.23,.65,.74,1.09)}.link-hover--one{transform:translateY(0)}.link-hover--two{opacity:0;padding:0 var(--padding-horizontal);white-space:nowrap;position:absolute;bottom:50%;right:50%;transform:translate(50%,125%)}}
 /*$vite$:1*/

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

@@ -1,6 +1,7 @@
+import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
-declare const _default: ({ attributes, content }: {
-    attributes?: Record<PropertyKey, unknown>;
-    content: any;
-}) => import("@esportsplus/template/build/types").RenderableTemplate;
+declare const _default: {
+    (content: unknown): import("@esportsplus/template").Renderable;
+    (attributes: Attributes, content: unknown): import("@esportsplus/template").Renderable;
+};
 export default _default;

package/build/components/loader/index.js

@@ -1,7 +1,8 @@
 import { html } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
+import template from '../../components/template/index.js';
 import './scss/index.scss';
-export default ({ attributes, content }) => {
+export default template.factory((attributes, content) => {
     let state = reactive({
         load: false,
         scale: false
@@ -10,30 +11,29 @@ export default ({ attributes, content }) => {
         state.scale = true;
     }, 300);
     return html `
-        <div class='loader ${() => state.load && 'loader--load'}'>
             <div class='loader ${() => state.load && 'loader--load'}'>
-                <div class='loader-content'>
-                    <div
-                        class='
-                            ${() => state.scale && 'loader-logo--scale'}
-                            loader-logo
-                            text
-                            --flex-center
-                            --text-uppercase
-                            --text-600
-                        '
-                        style='color: var(--color-grey-500);'
-                        onanimationend='${({ animationName: name }) => {
+                <div class='loader ${() => state.load && 'loader--load'}'>
+                    <div class='loader-content'>
+                        <div
+                            class='
+                                ${() => state.scale && 'loader-logo--scale'}
+                                loader-logo
+                                text
+                                --flex-center
+                                --text-uppercase --text-600
+                            '
+                            style='color: var(--color-grey-500);'
+                            onanimationend='${({ animationName: name }) => {
         if (name === 'scale') {
             state.load = true;
         }
     }}'
-                        ${attributes}
-                    >
-                        ${content}
+                            ${attributes}
+                        >
+                            ${content}
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-    `;
-};
+        `;
+});

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

@@ -1,3 +1,4 @@
+import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
-declare const _default: (attributes?: Record<PropertyKey, unknown>) => import("@esportsplus/template/build/types").RenderableTemplate;
+declare const _default: (attributes?: Attributes) => import("@esportsplus/template/build/types").RenderableTemplate;
 export default _default;

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

@@ -1,4 +1,116 @@
-import scrollbar from '../../components/scrollbar/index.js';
 import './scss/index.scss';
-declare const _default: (data: Parameters<typeof scrollbar>[0], content: unknown) => import("@esportsplus/template/build/types").RenderableTemplate;
+declare const _default: {
+    (content: unknown): import("@esportsplus/template").Renderable;
+    (attributes: {
+        class?: string | (string | (() => unknown))[];
+        style?: string | (string | (() => unknown))[];
+    } & {
+        onabort?: ((event: UIEvent) => void) | undefined;
+        onanimationcancel?: ((event: AnimationEvent) => void) | undefined;
+        onanimationend?: ((event: AnimationEvent) => void) | undefined;
+        onanimationiteration?: ((event: AnimationEvent) => void) | undefined;
+        onanimationstart?: ((event: AnimationEvent) => void) | undefined;
+        onauxclick?: ((event: MouseEvent) => void) | undefined;
+        onbeforeinput?: ((event: InputEvent) => void) | undefined;
+        onbeforetoggle?: ((event: Event) => void) | undefined;
+        onblur?: ((event: FocusEvent) => void) | undefined;
+        oncancel?: ((event: Event) => void) | undefined;
+        oncanplay?: ((event: Event) => void) | undefined;
+        oncanplaythrough?: ((event: Event) => void) | undefined;
+        onchange?: ((event: Event) => void) | undefined;
+        onclick?: ((event: MouseEvent) => void) | undefined;
+        onclose?: ((event: Event) => void) | undefined;
+        oncompositionend?: ((event: CompositionEvent) => void) | undefined;
+        oncompositionstart?: ((event: CompositionEvent) => void) | undefined;
+        oncompositionupdate?: ((event: CompositionEvent) => void) | undefined;
+        oncontextlost?: ((event: Event) => void) | undefined;
+        oncontextmenu?: ((event: MouseEvent) => void) | undefined;
+        oncontextrestored?: ((event: Event) => void) | undefined;
+        oncopy?: ((event: ClipboardEvent) => void) | undefined;
+        oncuechange?: ((event: Event) => void) | undefined;
+        oncut?: ((event: ClipboardEvent) => void) | undefined;
+        ondblclick?: ((event: MouseEvent) => void) | undefined;
+        ondrag?: ((event: DragEvent) => void) | undefined;
+        ondragend?: ((event: DragEvent) => void) | undefined;
+        ondragenter?: ((event: DragEvent) => void) | undefined;
+        ondragleave?: ((event: DragEvent) => void) | undefined;
+        ondragover?: ((event: DragEvent) => void) | undefined;
+        ondragstart?: ((event: DragEvent) => void) | undefined;
+        ondrop?: ((event: DragEvent) => void) | undefined;
+        ondurationchange?: ((event: Event) => void) | undefined;
+        onemptied?: ((event: Event) => void) | undefined;
+        onended?: ((event: Event) => void) | undefined;
+        onerror?: ((event: ErrorEvent) => void) | undefined;
+        onfocus?: ((event: FocusEvent) => void) | undefined;
+        onfocusin?: ((event: FocusEvent) => void) | undefined;
+        onfocusout?: ((event: FocusEvent) => void) | undefined;
+        onformdata?: ((event: FormDataEvent) => void) | undefined;
+        ongotpointercapture?: ((event: PointerEvent) => void) | undefined;
+        oninput?: ((event: Event) => void) | undefined;
+        oninvalid?: ((event: Event) => void) | undefined;
+        onkeydown?: ((event: KeyboardEvent) => void) | undefined;
+        onkeypress?: ((event: KeyboardEvent) => void) | undefined;
+        onkeyup?: ((event: KeyboardEvent) => void) | undefined;
+        onload?: ((event: Event) => void) | undefined;
+        onloadeddata?: ((event: Event) => void) | undefined;
+        onloadedmetadata?: ((event: Event) => void) | undefined;
+        onloadstart?: ((event: Event) => void) | undefined;
+        onlostpointercapture?: ((event: PointerEvent) => void) | undefined;
+        onmousedown?: ((event: MouseEvent) => void) | undefined;
+        onmouseenter?: ((event: MouseEvent) => void) | undefined;
+        onmouseleave?: ((event: MouseEvent) => void) | undefined;
+        onmousemove?: ((event: MouseEvent) => void) | undefined;
+        onmouseout?: ((event: MouseEvent) => void) | undefined;
+        onmouseover?: ((event: MouseEvent) => void) | undefined;
+        onmouseup?: ((event: MouseEvent) => void) | undefined;
+        onpaste?: ((event: ClipboardEvent) => void) | undefined;
+        onpause?: ((event: Event) => void) | undefined;
+        onplay?: ((event: Event) => void) | undefined;
+        onplaying?: ((event: Event) => void) | undefined;
+        onpointercancel?: ((event: PointerEvent) => void) | undefined;
+        onpointerdown?: ((event: PointerEvent) => void) | undefined;
+        onpointerenter?: ((event: PointerEvent) => void) | undefined;
+        onpointerleave?: ((event: PointerEvent) => void) | undefined;
+        onpointermove?: ((event: PointerEvent) => void) | undefined;
+        onpointerout?: ((event: PointerEvent) => void) | undefined;
+        onpointerover?: ((event: PointerEvent) => void) | undefined;
+        onpointerup?: ((event: PointerEvent) => void) | undefined;
+        onprogress?: ((event: ProgressEvent<EventTarget>) => void) | undefined;
+        onratechange?: ((event: Event) => void) | undefined;
+        onreset?: ((event: Event) => void) | undefined;
+        onresize?: ((event: UIEvent) => void) | undefined;
+        onscroll?: ((event: Event) => void) | undefined;
+        onscrollend?: ((event: Event) => void) | undefined;
+        onsecuritypolicyviolation?: ((event: SecurityPolicyViolationEvent) => void) | undefined;
+        onseeked?: ((event: Event) => void) | undefined;
+        onseeking?: ((event: Event) => void) | undefined;
+        onselect?: ((event: Event) => void) | undefined;
+        onselectionchange?: ((event: Event) => void) | undefined;
+        onselectstart?: ((event: Event) => void) | undefined;
+        onslotchange?: ((event: Event) => void) | undefined;
+        onstalled?: ((event: Event) => void) | undefined;
+        onsubmit?: ((event: SubmitEvent) => void) | undefined;
+        onsuspend?: ((event: Event) => void) | undefined;
+        ontimeupdate?: ((event: Event) => void) | undefined;
+        ontoggle?: ((event: Event) => void) | undefined;
+        ontouchcancel?: ((event: TouchEvent) => void) | undefined;
+        ontouchend?: ((event: TouchEvent) => void) | undefined;
+        ontouchmove?: ((event: TouchEvent) => void) | undefined;
+        ontouchstart?: ((event: TouchEvent) => void) | undefined;
+        ontransitioncancel?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionend?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionrun?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionstart?: ((event: TransitionEvent) => void) | undefined;
+        onvolumechange?: ((event: Event) => void) | undefined;
+        onwaiting?: ((event: Event) => void) | undefined;
+        onwebkitanimationend?: ((event: Event) => void) | undefined;
+        onwebkitanimationiteration?: ((event: Event) => void) | undefined;
+        onwebkitanimationstart?: ((event: Event) => void) | undefined;
+        onwebkittransitionend?: ((event: Event) => void) | undefined;
+        onwheel?: ((event: WheelEvent) => void) | undefined;
+    } & Record<PropertyKey, unknown> & {
+        scrollbar?: import("@esportsplus/template").Attributes;
+        'scrollbar-container-content'?: import("@esportsplus/template").Attributes;
+    }, content: unknown): import("@esportsplus/template").Renderable;
+};
 export default _default;

package/build/components/overlay/index.js

@@ -1,10 +1,9 @@
-import { isArray } from '@esportsplus/utilities';
+import { toArray } from '@esportsplus/utilities';
 import scrollbar from '../../components/scrollbar/index.js';
+import template from '../../components/template/index.js';
 import './scss/index.scss';
-export default (data, content) => {
-    if (!isArray(data.class)) {
-        data.class = data.class ? [data.class] : [];
-    }
-    data.class.push('overlay');
-    return scrollbar(data, content);
-};
+export default template.factory((attributes, content) => {
+    attributes.class = toArray(attributes.class);
+    attributes.class.push('overlay');
+    return scrollbar(attributes, content);
+});