@esportsplus/ui 0.46.0 → 0.48.0

package/.github/workflows/bump.yml

@@ -1,4 +1,4 @@
-name: bump
+name: bump version
 
 on:
   push:
@@ -6,4 +6,4 @@ on:
 
 jobs:
   bump:
-    uses: esportsplus/workflows/.github/workflows/bump.yml@main
+    uses: esportsplus/typescript/.github/workflows/bump.yml@main

package/.github/workflows/dependabot.yml

@@ -9,4 +9,4 @@ jobs:
   automerge:
     secrets:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-    uses: esportsplus/workflows/.github/workflows/dependabot.yml@main
+    uses: esportsplus/typescript/.github/workflows/dependabot.yml@main

package/.github/workflows/publish.yml

@@ -5,12 +5,12 @@ on:
     types: [published]
   workflow_dispatch:
   workflow_run:
-    workflows: [bump]
+    workflows: [bump version]
     types:
       - completed
 
 jobs:
   publish:
     secrets:
-        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_PUBLISHING }}
-    uses: esportsplus/workflows/.github/workflows/publish.yml@main
+        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    uses: esportsplus/typescript/.github/workflows/publish.yml@main

package/README.md

@@ -0,0 +1,287 @@
+# @esportsplus/ui
+
+A reactive component library built on compile-time template transformations. Provides typed, tree-shakeable UI components with integrated SCSS theming.
+
+## Installation
+
+```bash
+pnpm add @esportsplus/ui
+```
+
+## Dependencies
+
+- `@esportsplus/template` - Tagged template literals with compile-time transforms and reactive state management
+- `@esportsplus/action` - Response/error handling
+- `@esportsplus/utilities` - Core utilities
+
+## Quick Start
+
+```typescript
+import { button, form, input, select } from '@esportsplus/ui';
+import { html } from '@esportsplus/template';
+
+// Simple component
+html`${button({}, 'Click Me')}`;
+
+// Form with validation
+html`
+  ${form.action({
+    action: async ({ input: data }) => {
+      const result = await api.submit(data);
+      return result.ok ? { errors: [] } : { errors: result.errors };
+    }
+  }, html`
+    ${input({ name: 'email', type: 'email' })}
+    ${button({}, 'Submit')}
+  `)}
+`;
+
+// Select with reactive state
+html`
+  ${select({
+    options: { a: 'Option A', b: 'Option B' },
+    selected: 'a'
+  }, (state) => html`Selected: ${state.selected}`)}
+`;
+```
+
+## Components
+
+### Form Controls
+| Component | Description | Variants |
+|-----------|-------------|----------|
+| `input` | Text input with validation state | - |
+| `textarea` | Multi-line text input | - |
+| `checkbox` | Checkbox with label | - |
+| `radio` | Radio button group | - |
+| `range` | Range slider | - |
+| `select` | Dropdown with custom options | - |
+| `switch` | Toggle switch | - |
+| `form` | Form wrapper | `form.action`, `form.input` |
+
+### Interactive
+| Component | Description | Variants |
+|-----------|-------------|----------|
+| `button` | Standard button | `button.hold` |
+| `tooltip` | Popup content | `tooltip.menu`, `tooltip.onclick`, `tooltip.onhover` |
+| `accordion` | Collapsible sections | - |
+| `clipboard` | Copy to clipboard | `clipboard.onclick`, `clipboard.write` |
+| `alert` | Notifications | error, info, success types |
+
+### Display
+| Component | Description |
+|-----------|-------------|
+| `counter` | Animated number with currency formatting |
+| `loader` | Loading spinner |
+| `loading` | Border loading indicator |
+| `typewriter` | Animated typing effect |
+| `highlight` | Viewport intersection highlight |
+| `ellipsis` | Animated dots |
+| `icon` | SVG sprite wrapper |
+| `number` | Number formatting |
+| `truncate` | Text truncation |
+| `json` | JSON display |
+
+### Layout
+| Component | Description |
+|-----------|-------------|
+| `scrollbar` | Custom scrollbar container |
+| `frame` | Scrollable frame |
+| `sidebar` | Side navigation |
+| `site` | Site wrapper |
+| `overlay` | Modal/overlay container |
+
+### Utility
+| Component | Description |
+|-----------|-------------|
+| `back` | Back navigation link |
+| `root` | Global event coordination (`root.onclick`) |
+| `template` | Template factory helper |
+
+## Component Patterns
+
+### Factory Pattern
+
+Components use `template.factory()` supporting flexible call signatures:
+
+```typescript
+// No arguments
+component()
+
+// Attributes only
+component({ class: 'custom' })
+
+// Content only
+component(html`<span>Content</span>`)
+
+// Both
+component({ class: 'custom' }, html`<span>Content</span>`)
+```
+
+### Reactive State
+
+Components can accept and return reactive state:
+
+```typescript
+import { reactive } from '@esportsplus/template';
+
+let state = reactive({ active: false });
+
+accordion({ state }, html`
+  ${() => state.active ? 'Open' : 'Closed'}
+`);
+```
+
+### Form Integration
+
+```typescript
+form.action({
+  action: async ({ input, response }) => {
+    // input: parsed FormData with dot-notation support
+    // response: error handling utilities
+    return { errors: [] };
+  }
+}, content);
+
+// Input with error state
+form.input(element, { error: 'Required field' });
+```
+
+## Styling
+
+### CSS Layers
+
+Styles are organized into layers for proper cascade:
+
+```
+@layer normalize
+@layer components
+@layer themes
+@layer css-utilities
+```
+
+### Importing Styles
+
+```scss
+// All component styles
+@use '@esportsplus/ui/*.scss';
+
+// Specific component
+@use '@esportsplus/ui/button.scss';
+
+// CSS utilities
+@use '@esportsplus/ui/css-utilities.scss';
+
+// Design tokens
+@use '@esportsplus/ui/tokens.scss';
+
+// Theme
+@use '@esportsplus/ui/themes/dark/*.scss';
+```
+
+### Design Tokens
+
+Located in `tokens.scss`:
+
+- **Colors**: `--color-{name}-{300|400|500}` (black, white, red, green, blue, purple, yellow, grey)
+- **Sizing**: `--size-{300-800}` (12px-80px)
+- **Spacing**: `--spacing-{0-600}`
+- **Border**: `--border-radius-{100-900}`, `--border-width-{100-700}`
+- **Typography**: `--font-size-*`, `--font-weight-*`, `--line-height-*`
+
+### CSS Utilities
+
+```html
+<!-- Layout -->
+<div class="--flex --flex-center --gap-200">
+
+<!-- Spacing -->
+<div class="--margin-400 --padding-200">
+
+<!-- Typography -->
+<p class="--text-uppercase --color-grey-400">
+
+<!-- States -->
+<div class="--skeleton --disabled --hidden">
+```
+
+### Component Variables
+
+Each component exposes CSS custom properties:
+
+```scss
+.ui-button {
+  --background: var(--color-blue-400);
+  --color: var(--color-white);
+  --border-radius: var(--border-radius-300);
+  --padding-horizontal: 16px;
+  --padding-vertical: 8px;
+}
+```
+
+## Theming
+
+```typescript
+// JavaScript
+import '@esportsplus/ui/themes/dark';
+
+// SCSS
+@use '@esportsplus/ui/themes/dark/*.scss';
+```
+
+Themes override component variables. Create custom themes by overriding CSS custom properties.
+
+## Build
+
+```bash
+pnpm build         # Full build (SCSS + TypeScript)
+pnpm build:vite    # SCSS compilation only
+pnpm build:ts      # TypeScript compilation only
+```
+
+### Output Structure
+
+```
+build/
+├── components/
+│   ├── {component}/
+│   │   ├── index.js
+│   │   ├── index.d.ts
+│   │   └── scss/index.scss
+│   └── index.js
+├── css-utilities/
+├── themes/
+│   ├── dark/
+│   └── light/
+└── fonts/
+```
+
+## TypeScript
+
+Full type safety with zero `any` types:
+
+```typescript
+import type { Attributes } from '@esportsplus/template';
+
+// Components are generic
+template.factory<A extends Attributes, C>(fn);
+
+// State types are explicit
+type State = {
+  active: boolean;
+  error: string;
+};
+```
+
+## Performance
+
+- **Compile-time transforms**: Template expressions optimized at build
+- **Tree-shakeable**: Import only what you use
+- **WeakMap caching**: Memoized formatters and icons
+- **Object pooling**: Reused queue structures
+- **RAF batching**: Coalesced DOM updates
+- **CSS layers**: Efficient cascade resolution
+
+## License
+
+MIT

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

@@ -1,21 +1,21 @@
-import { Attributes } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
 import './scss/index.scss';
 declare const _default: {
     (): ReturnType<(this: {
-        attributes?: Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    <T extends Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
-        attributes?: Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    (attributes: Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
-        attributes?: Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+        attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
+        content?: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>;
+    }, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>) => template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>;
+    <T extends template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
+        content?: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>;
+    }, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>) => template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>;
+    <T extends template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>(content: T): ReturnType<(this: {
+        attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
+        content?: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>;
+    }, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>) => template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>;
+    (attributes: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>): ReturnType<(this: {
+        attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
+        content?: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>;
+    }, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>) => template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>;
 };
 export default _default;

package/build/components/accordion/index.js

@@ -1,34 +1,32 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
+import { reactive } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
+const template_ed8f776bb07a460eadcbcfe445975fdf3 = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div><!--$--></div>`);
 const OMIT = ['state'];
 let key = Symbol();
 export default template.factory(function (attributes, content) {
     let ref, state = attributes.state || reactive({
         active: 0
     });
-    return html `
-            <div
-                ${omit(attributes, OMIT)}
-                ${{
-        class: () => {
+    return (() => {
+        let root_ed8f776bb07a460eadcbcfe445975fdf2 = template_ed8f776bb07a460eadcbcfe445975fdf3(), element_ed8f776bb07a460eadcbcfe445975fdf4 = root_ed8f776bb07a460eadcbcfe445975fdf2.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf5 = element_ed8f776bb07a460eadcbcfe445975fdf4.firstChild;
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf4, omit(attributes, OMIT));
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdf4, '', () => {
             return state.active && '--active';
-        },
-        onrender: (element) => {
+        });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.onrender(element_ed8f776bb07a460eadcbcfe445975fdf4, (element) => {
             (ref = element)[key] = state;
-        },
-        style: () => {
+        });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setStyle(element_ed8f776bb07a460eadcbcfe445975fdf4, '', () => {
             let parent = ref.closest('accordion');
             if (parent && key in parent) {
                 parent[key].active = (+parent[key].active) + 1;
             }
             return state.active && `--max-height: ${ref.scrollHeight}`;
-        }
-    }}
-            >
-                ${content}
-            </div>
-        `;
+        });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdf5, content);
+        return root_ed8f776bb07a460eadcbcfe445975fdf2;
+    })();
 });

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

@@ -7,7 +7,7 @@ declare const _default: (attributes: Attributes & {
     "alert-messages"?: Attributes;
     "alert-message"?: Attributes;
 }) => {
-    content: Node;
+    content: DocumentFragment;
     deactivate: () => void;
     error: {
         (messages: Renderable<any>, seconds?: number): void;

package/build/components/alert/index.js

@@ -1,12 +1,19 @@
 import '@esportsplus/vite/global.d.ts';
-import { reactive } from '@esportsplus/reactivity';
-import { html, svg } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
+import { reactive, svg } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import { icon } from '@esportsplus/ui';
 import check from './svg/check.svg';
 import close from './svg/close.svg';
 import e from './svg/error.svg';
 import './scss/index.scss';
+const template_ed8f776bb07a460eadcbcfe445975fdf7 = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div class='--flex-vertical'><!--$--></div>`);
+const template_ed8f776bb07a460eadcbcfe445975fdfb = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<p><!--$--></p>`);
+const template_ed8f776bb07a460eadcbcfe445975fdff = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div class='--flex-start'><!--$--></div>`);
+const template_ed8f776bb07a460eadcbcfe445975fdfi = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div
+ class='alert anchor anchor--n  --flex-row'><!--$--><div
+ class='alert-messages --flex-column --flex-fill'><!--$--></div><div class="--flex-vertical"><div
+ class='alert-close button --padding-300'><div class="icon" style='--size: 14px;'><!--$--></div></div></div></div>`);
 const OMIT = ['alert-close', 'alert-messages', 'alert-message'];
 let modifiers = {
     error: 'red',
@@ -72,56 +79,43 @@ export default (attributes) => {
         }), 5);
     };
     return {
-        content: html `
-            <div
-                class='alert anchor anchor--n ${() => state.active && '--active'} --flex-row'
-                ${omit(attributes, OMIT)}
-            >
-                ${() => {
-            let type = state.type;
-            return html `
-                        <div class='--flex-vertical' style='${`--color: var(--color-${modifiers[type]}-400);`}'>
-                            ${icon({ class: '--size-500' }, type === 'error' ? e : check)}
-                        </div>
-                    `;
-        }}
-
-                <div
-                    class='alert-messages --flex-column --flex-fill'
-                    ${attributes['alert-messages']}
-                >
-                    ${() => {
-            let message = attributes['alert-message'];
-            return state.rerender && [...state.messages].map((content) => {
-                if (typeof content === 'string') {
-                    return html `
-                                    <p ${message}>
-                                        ${content}
-                                    </p>
-                                `;
-                }
-                return html `
-                                <div class='--flex-start'>
-                                    ${content}
-                                </div>
-                            `;
+        content: (() => {
+            let root_ed8f776bb07a460eadcbcfe445975fdfh = template_ed8f776bb07a460eadcbcfe445975fdfi(), element_ed8f776bb07a460eadcbcfe445975fdfj = root_ed8f776bb07a460eadcbcfe445975fdfh.firstChild, element_ed8f776bb07a460eadcbcfe445975fdfk = element_ed8f776bb07a460eadcbcfe445975fdfj.firstChild, element_ed8f776bb07a460eadcbcfe445975fdfl = element_ed8f776bb07a460eadcbcfe445975fdfj.firstElementChild, element_ed8f776bb07a460eadcbcfe445975fdfm = element_ed8f776bb07a460eadcbcfe445975fdfl.firstChild, element_ed8f776bb07a460eadcbcfe445975fdfn = element_ed8f776bb07a460eadcbcfe445975fdfl.nextElementSibling.firstElementChild, element_ed8f776bb07a460eadcbcfe445975fdfo = element_ed8f776bb07a460eadcbcfe445975fdfn.firstElementChild.firstChild;
+            template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdfj, ' --flex-row', () => state.active && '--active');
+            template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdfj, omit(attributes, OMIT));
+            new template_ed8f776bb07a460eadcbcfe445975fdf1.EffectSlot(element_ed8f776bb07a460eadcbcfe445975fdfk, () => {
+                let type = state.type;
+                return (() => {
+                    let root_ed8f776bb07a460eadcbcfe445975fdf6 = template_ed8f776bb07a460eadcbcfe445975fdf7(), element_ed8f776bb07a460eadcbcfe445975fdf8 = root_ed8f776bb07a460eadcbcfe445975fdf6.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf9 = element_ed8f776bb07a460eadcbcfe445975fdf8.firstChild;
+                    template_ed8f776bb07a460eadcbcfe445975fdf1.setStyle(element_ed8f776bb07a460eadcbcfe445975fdf8, ';', `--color: var(--color-${modifiers[type]}-400);`);
+                    template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdf9, icon({ class: '--size-500' }, type === 'error' ? e : check));
+                    return root_ed8f776bb07a460eadcbcfe445975fdf6;
+                })();
             });
-        }}
-                </div>
-
-                <div class="--flex-vertical">
-                    <div
-                        class='alert-close button --padding-300'
-                        onclick='${() => deactivate(state)}'
-                        ${attributes['alert-close']}
-                    >
-                        <div class="icon" style='--size: 14px;'>
-                            ${svg.sprite(close)}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        `,
+            template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdfl, attributes['alert-messages']);
+            new template_ed8f776bb07a460eadcbcfe445975fdf1.EffectSlot(element_ed8f776bb07a460eadcbcfe445975fdfm, () => {
+                let message = attributes['alert-message'];
+                return state.rerender && [...state.messages].map((content) => {
+                    if (typeof content === 'string') {
+                        return (() => {
+                            let root_ed8f776bb07a460eadcbcfe445975fdfa = template_ed8f776bb07a460eadcbcfe445975fdfb(), element_ed8f776bb07a460eadcbcfe445975fdfc = root_ed8f776bb07a460eadcbcfe445975fdfa.firstChild, element_ed8f776bb07a460eadcbcfe445975fdfd = element_ed8f776bb07a460eadcbcfe445975fdfc.firstChild;
+                            template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdfc, message);
+                            template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdfd, content);
+                            return root_ed8f776bb07a460eadcbcfe445975fdfa;
+                        })();
+                    }
+                    return (() => {
+                        let root_ed8f776bb07a460eadcbcfe445975fdfe = template_ed8f776bb07a460eadcbcfe445975fdff(), element_ed8f776bb07a460eadcbcfe445975fdfg = root_ed8f776bb07a460eadcbcfe445975fdfe.firstChild.firstChild;
+                        template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdfg, content);
+                        return root_ed8f776bb07a460eadcbcfe445975fdfe;
+                    })();
+                });
+            });
+            template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdfn, 'click', () => deactivate(state));
+            template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdfn, attributes['alert-close']);
+            template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdfo, svg.sprite(close));
+            return root_ed8f776bb07a460eadcbcfe445975fdfh;
+        })(),
         deactivate: () => deactivate(state),
         error,
         info: (messages, seconds = 0) => activate('info', messages, seconds, state),

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

@@ -1,17 +1,18 @@
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
 import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 declare const _default: {
     (): ReturnType<(this: {
         attributes?: Attributes;
-    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    <T extends Attributes>(attributes: T): ReturnType<(this: {
+    }, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>) => template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>;
+    <T extends template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>(attributes: T): ReturnType<(this: {
         attributes?: Attributes;
-    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
+    }, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>) => template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>;
+    <T extends template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>(content: T): ReturnType<(this: {
         attributes?: Attributes;
-    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    (attributes: Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
+    }, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>) => template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>;
+    (attributes: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>): ReturnType<(this: {
         attributes?: Attributes;
-    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    }, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>) => template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>;
 };
 export default _default;

package/build/components/back/index.js

@@ -1,17 +1,17 @@
-import { html } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
 import icon from '../../components/icon/index.js';
 import template from '../../components/template/index.js';
 import arrow from './svg/arrow.svg';
 import './scss/index.scss';
+const template_ed8f776bb07a460eadcbcfe445975fdfq = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<a
+ class='back link --padding-0px --flex-vertical'><!--$--><!--$--></a>`);
 export default template.factory(function (attributes, content) {
-    return html `
-            <a
-                class='back link --padding-0px --flex-vertical'
-                ${this.attributes}
-                ${attributes}
-            >
-                ${icon({ class: 'back-arrow --margin-right --margin-200' }, arrow)}
-                ${content}
-            </a>
-        `;
+    return (() => {
+        let root_ed8f776bb07a460eadcbcfe445975fdfp = template_ed8f776bb07a460eadcbcfe445975fdfq(), element_ed8f776bb07a460eadcbcfe445975fdfr = root_ed8f776bb07a460eadcbcfe445975fdfp.firstChild, element_ed8f776bb07a460eadcbcfe445975fdfs = element_ed8f776bb07a460eadcbcfe445975fdfr.firstChild, element_ed8f776bb07a460eadcbcfe445975fdft = element_ed8f776bb07a460eadcbcfe445975fdfs.nextSibling;
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdfr, this.attributes);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdfr, attributes);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdfs, icon({ class: 'back-arrow --margin-right --margin-200' }, arrow));
+        template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdft, content);
+        return root_ed8f776bb07a460eadcbcfe445975fdfp;
+    })();
 });