@esportsplus/ui 0.53.0 → 0.55.0

package/src/{fonts → css-utilities/font}/montserrat/scss/index.scss

@@ -1,3 +1,6 @@
+@use '/lib';
+
+
 @font-face {
     font-display: swap;
     font-family: 'Montserrat';
@@ -77,3 +80,15 @@
          url('Montserrat-BoldItalic.woff2') format('woff2'),
          url('Montserrat-BoldItalic.woff') format('woff');
 }
+
+
+.--font-montserrat {
+    --font-family: 'Montserrat', sans-serif;
+
+    @include lib.css-variables(font-weight, (
+        300: 400,
+        400: 500,
+        500: 600,
+        600: 700
+    ));
+}

package/src/css-utilities/index.scss

@@ -1,24 +1,18 @@
-@forward './[margin,padding]/scss/index.scss';
 @forward './absolute/scss/index.scss';
 @forward './background/scss/index.scss';
 @forward './border/scss/index.scss';
 @forward './color/scss/index.scss';
 @forward './disabled/scss/index.scss';
-@forward './error/scss/index.scss';
 @forward './flex/scss/index.scss';
-@forward './flicker/scss/index.scss';
-@forward './focus/scss/index.scss';
-@forward './gap/scss/index.scss';
+
+@forward './font/geist/scss/index.scss';
+@forward './font/montserrat/scss/index.scss';
+
 @forward './glass/scss/index.scss';
 @forward './hidden/scss/index.scss';
 @forward './inline/scss/index.scss';
-@forward './line-height/scss/index.scss';
 @forward './not-allowed/scss/index.scss';
-@forward './pointer/scss/index.scss';
-@forward './scroll-fade/scss/index.scss';
 @forward './scrollbar/scss/index.scss';
-@forward './size/scss/index.scss';
 @forward './skeleton/scss/index.scss';
-@forward './text/scss/index.scss';
-@forward './viewport/scss/index.scss';
-@forward './width/scss/index.scss';
+@forward './tabular/scss/index.scss';
+@forward './text/scss/index.scss';

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

@@ -1,7 +1,6 @@
 .--inline {
     display: inline;
     font-size: inherit;
-    line-height: inherit;
     margin: 0;
     padding: 0;
 }

package/src/css-utilities/scrollbar/scss/index.scss

@@ -1,5 +1,19 @@
 @use 'variables';
 
+// Registered so the length custom properties can be interpolated by the
+// scroll-driven animation below.
+@property --scroll-fade-bottom {
+    inherits: false;
+    initial-value: 0px;
+    syntax: '<length>';
+}
+
+@property --scroll-fade-top {
+    inherits: false;
+    initial-value: 0px;
+    syntax: '<length>';
+}
+
 .--scrollbar {
     overflow: auto;
     overscroll-behavior: contain;
@@ -32,6 +46,34 @@
         overflow-y: hidden;
     }
 
+    &-fade {
+        overflow-y: auto;
+
+        @supports (animation-timeline: scroll()) {
+            animation: scrollbar-fade linear both;
+            animation-timeline: scroll(self);
+            -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--scroll-fade-top), #000 calc(100% - var(--scroll-fade-bottom)), transparent);
+            mask-image: linear-gradient(to bottom, transparent, #000 var(--scroll-fade-top), #000 calc(100% - var(--scroll-fade-bottom)), transparent);
+        }
+
+        @keyframes scrollbar-fade {
+            0% {
+                --scroll-fade-bottom: var(--scroll-fade-size);
+                --scroll-fade-top: 0px;
+            }
+
+            5%, 95% {
+                --scroll-fade-bottom: var(--scroll-fade-size);
+                --scroll-fade-top: var(--scroll-fade-size);
+            }
+
+            100% {
+                --scroll-fade-bottom: 0px;
+                --scroll-fade-top: var(--scroll-fade-size);
+            }
+        }
+    }
+
     &-hidden {
         scrollbar-width: none;
 

package/src/css-utilities/tabular/scss/index.scss

@@ -0,0 +1,3 @@
+.--tabular {
+    font-variant-numeric: tabular-nums;
+}

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

@@ -1,43 +1,42 @@
 @use '/lib';
 @use '/tokens';
-@use './variables';
 
 .--text {
-    &-bold {
-        font-weight: var(--font-weight-500);
-
-        @each $key in lib.map-keys(tokens.$font-weight) {
-            @if $key > 500 {
-                &-#{$key} {
-                    font-weight: var(--font-weight-#{$key});
-                }
+    &-crop {
+        @supports (text-box: trim-both cap alphabetic) {
+            & {
+                text-box: trim-both cap alphabetic;
             }
-        }
-    }
 
-    &-center {
-        text-align: center;
-    }
+            &-top {
+                text-box: trim-start cap alphabetic;
+            }
 
-    &-crop {
-        &::after,
-        &::before,
-        &-bottom::after,
-        &-top::before {
-            content: '';
-            display: block;
-            height: 0;
-            width: 100%;
+            &-bottom {
+                text-box: trim-end cap alphabetic;
+            }
         }
 
-        &::after,
-        &-bottom::after {
-            margin-bottom: calc((1 - var(--line-height)) * 0.618em);
-        }
+        @supports not (text-box: trim-both cap alphabetic) {
+            &::after,
+            &::before,
+            &-bottom::after,
+            &-top::before {
+                content: '';
+                display: block;
+                height: 0;
+                width: 100%;
+            }
+
+            &::after,
+            &-bottom::after {
+                margin-bottom: calc((1em - 1lh) * 0.618);
+            }
 
-        &::before,
-        &-top::before {
-            margin-top: calc((1 - var(--line-height)) * 0.618em);
+            &::before,
+            &-top::before {
+                margin-top: calc((1em - 1lh) * 0.618);
+            }
         }
 
         &-first-child {
@@ -53,50 +52,10 @@
         }
     }
 
-    &-italic {
-        font-style: italic;
-    }
-
-    &-line-through {
-        text-decoration: line-through;
-        text-decoration-thickness: var(--line-width);
-    }
-
-    &-multiplier {
-        font-size: calc(var(--font-size) * var(--text-multiplier));
-    }
-
-    &-outline {
-        color: var(--color);
-        word-break: break-word;
-        word-wrap: break-word;
-
-        @supports (-webkit-text-stroke-width: 1px) {
-            color: transparent;
-            -webkit-text-fill-color: transparent;
-            -webkit-text-stroke-color: var(--color);
-            -webkit-text-stroke-width: var(--stroke-width);
-        }
-    }
-
     &-truncate {
-        line-height: var(--size);
         max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-
-    &-underline {
-        text-decoration: underline;
-
-        &-dotted {
-            text-decoration: underline;
-            text-decoration-style: dotted;
-        }
-    }
-
-    &-uppercase {
-        text-transform: uppercase;
-    }
-}
+}

package/src/lib/scss/css-variables.scss

@@ -1,16 +1,40 @@
 @use 'sass:meta';
 
 
-@mixin css-variables($prefix, $tokens) {
+// css-variables($prefix, $tokens): custom-property declarations.
+// css-variables($class, $prefix, $tokens): custom-property declarations inside classes.
+@mixin css-variables($class: null, $prefix: null, $tokens: null) {
+    @if $tokens == null {
+        $tokens: $prefix;
+        $prefix: $class;
+        $class: null;
+    }
+    @else if $prefix == null {
+        $prefix: $class;
+        $class: null;
+    }
+
+    @if $prefix == null or (meta.type-of($tokens) != 'map' and $tokens != ()) {
+        @error 'css-variables expects ($prefix, $tokens) or ($class, $prefix, $tokens), with a token map.';
+    }
+
+    @include -tokens($class, $prefix, '', $tokens);
+}
+
+@mixin -tokens($class, $prefix, $suffix, $tokens) {
     @each $key, $value in $tokens {
+        $name: '#{$suffix}-#{$key}';
+
         @if meta.type-of($value) == 'map' {
-            @each $subkey, $subvalue in $value {
-                --#{$prefix}-#{$key}-#{$subkey}: #{$subvalue};
+            @include -tokens($class, $prefix, $name, $value);
+        }
+        @else if $class != null {
+            .#{$class}#{$name} {
+                --#{$prefix}#{$name}: #{$value};
             }
         }
         @else {
-            --#{$prefix}-#{$key}: #{$value};
+            --#{$prefix}#{$name}: #{$value};
         }
     }
 }
-

package/src/themes/dark/index.ts

@@ -1,4 +1,3 @@
-export { default as back } from './back';
 export { default as input } from './input';
 export { default as select } from './select';
 export { default as textarea } from './textarea';

package/src/themes/dark/select.ts

@@ -1,22 +1,27 @@
 import select from '~/components/select';
 
 
-export default select.bind({
+const themed: typeof select = Object.assign(select.bind({
     attributes: {
-        class: '--background-black --border --border-black --color-white',
-        option: {
-            class: '--background-black --color-white --padding-horizontal-500 --width-full',
-            style: '--color-default: var(--color-grey-500);white-space: nowrap;'
+        class: '--background-black --border-black --color-white',
+        [select.option]: {
+            class: '--background-black --color-white',
+            style: '--color-default: var(--color-grey-500); --padding-horizontal: var(--size-500); white-space: nowrap; width: 100%;'
         },
-        style: '--border-color-default: var(--color-black-300);',
+        style: '--border-color-default: var(--color-black-300); --border-width: var(--border-width-400); border: var(--border-width) solid var(--border-color);',
 
-        'tooltip-content': {
-            class: '--border --border-radius-500',
+        [select.tooltipContent]: {
             direction: 'sw',
             style: `
                 --background: var(--color-black-400);
                 --border-color: var(--color-black-300);
+                --border-radius: var(--border-radius-500);
+                --border-width: var(--border-width-400);
+                border: var(--border-width) solid var(--border-color);
             `
         }
     }
-});
+}), { arrow: select.arrow, option: select.option, tooltipContent: select.tooltipContent } as const);
+
+
+export default themed;

package/src/tokens/index.scss

@@ -3,9 +3,7 @@
 @forward 'scss/box-shadow';
 @forward 'scss/color';
 @forward 'scss/font-size';
-@forward 'scss/font-weight';
-@forward 'scss/line-height';
 @forward 'scss/size';
 @forward 'scss/spacer';
 @forward 'scss/state';
-@forward 'scss/transition-duration';
+@forward 'scss/transition';

package/src/tokens/scss/border-radius.scss

@@ -5,10 +5,5 @@ $border-radius: (
     400: 8px,
     500: 10px,
     600: 12px,
-    700: 16px,
-    800: 20px,
-
-    0px: 0px,
-    circle: 100%,
-    curved: 240px,
+    700: 16px
 );

package/src/tokens/scss/color.scss

@@ -13,9 +13,9 @@ $color: (
         500: oklch(48.45% 0.2617 266.3)
     ),
     'border': (
-        300: oklch(0.9683 0.0069 247.9),
-        400: oklch(0.9288 0.0126 255.51),
-        500: oklch(0.869 0.0198 252.89)
+        300: oklch(92.9% 0.013 255.508),
+        400: oklch(86.9% 0.022 252.894),
+        500: oklch(70.4% 0.04 256.788)
     ),
     'green': (
         300: oklch(87.03% 0.2708 144.9),

package/src/tokens/scss/scale.scss

@@ -1,5 +1,5 @@
 // LiftKit golden-ratio scale engine (github.com/Chainlift/liftkit)
-// One factor drives every ratio scale: type, size, spacer, line-height.
+// One factor drives the type, size, and spacer scales.
 @use 'sass:math';
 
 $factor: 1.618;

package/src/tokens/scss/size.scss

@@ -1,5 +1,7 @@
 // Golden-ratio size ladder: 400 = 16px (1em), each key one φ half-step (×1.272).
 @use 'scale';
+@use 'sass:math';
+@use 'sass:map';
 
 $size: (
     100: scale.px(scale.step(-1.5)),
@@ -14,3 +16,8 @@ $size: (
 
     0px: 0px,
 );
+
+// Snap the derived sizes to whole CSS pixels without changing the ratio engine.
+@each $key, $value in $size {
+    $size: map.set($size, $key, math.round($value));
+}

package/src/tokens/scss/transition.scss

@@ -0,0 +1,4 @@
+$transition: (
+    duration: 0.16s,
+    timing-function: cubic-bezier(0.4, 0, 0.2, 1)
+);

package/storage/svg/arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m10 4-4 4 4 4M6 8h8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/storage/svg/arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6 4 4 4-4 4M2 8h8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/storage/svg/book.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 5.5C6 4.4 8.5 4.5 11 6v14c-2.5-1.5-5-1.6-8-.5z" fill="currentColor" opacity=".4"/><path d="M13 6c2.5-1.5 5-1.6 8-.5v14c-3-1.1-5.5-1-8 .5z" fill="currentColor"/></svg>

package/storage/svg/cube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 2 10 5-10 5L2 7z" fill="currentColor" opacity=".3"/><path d="m2 9 9 4.5V23l-9-4.5z" fill="currentColor" opacity=".6"/><path d="m13 13.5 9-4.5v9.5L13 23z" fill="currentColor"/></svg>

package/storage/svg/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z'></path></svg>

package/storage/svg/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><circle cx='12' cy='12' r='9' stroke='currentColor' stroke-width='1.5'/><path d='M12 11v6M12 7v1' stroke='currentColor' stroke-width='1.5'/></g></svg>

package/storage/svg/palette.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20h1a3 3 0 0 0 2.3-4.9.8.8 0 0 1 .6-1.3H18a4 4 0 0 0 4-4C22 6.4 17.5 2 12 2Z" fill="currentColor" opacity=".35"/><g fill="currentColor"><circle cx="7" cy="9" r="1.6"/><circle cx="12" cy="6" r="1.6"/><circle cx="17" cy="9" r="1.6"/><circle cx="6" cy="14" r="1.6"/></g></svg>

package/storage/svg/search.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><circle cx='11' cy='11' r='7' stroke='currentColor' stroke-width='2'></circle>
+                    <path d='m20 20-3.5-3.5' stroke='currentColor' stroke-linecap='round' stroke-width='2'></path></g></svg>

package/storage/svg/type.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 4h14v4h-5v13H7V8H2z" fill="currentColor"/><path d="M14 10h9v3h-3v8h-3v-8h-3z" fill="currentColor" opacity=".4"/></svg>

package/vite.config.ts

@@ -6,13 +6,15 @@ import shelljs from 'shelljs';
 
 export default defineConfig(() => {
     return {
+        base: './',
         build: {
             cssMinify: 'lightningcss',
             outDir: 'build',
             rollupOptions: {
                 input: [
                     ...glob.sync('./src/normalize/scss/index.scss'),
-                    ...glob.sync('./src/{components,css-utilities,fonts,themes/dark,themes/light}/*/scss/index.scss'),
+                    ...glob.sync('./src/{components,css-utilities,themes/dark,themes/light}/*/scss/index.scss'),
+                    ...glob.sync('./src/css-utilities/font/*/scss/index.scss'),
                     ...glob.sync('./src/css-utilities/index.scss')
                 ],
                 output: {
@@ -33,7 +35,6 @@ export default defineConfig(() => {
 
                                 if (
                                     !filename.endsWith('.scss') ||
-                                    filename.startsWith('fonts') ||
                                     file.type !== 'asset' ||
                                     typeof file.source !== 'string'
                                 ) {
@@ -66,10 +67,14 @@ export default defineConfig(() => {
                         }
                     },
                     {
-                        name: '@esportsplus/ui-svg-copy',
+                        name: '@esportsplus/ui-assets-copy',
                         writeBundle() {
                             let directories = glob.sync('./src/components/*/svg/');
 
+                            for (let license of glob.sync('./src/css-utilities/font/*/OFL.txt')) {
+                                shelljs.cp(license, license.replace('src', 'build'));
+                            }
+
                             for (let dir of directories) {
                                 shelljs.cp('-rf', dir, dir.replace('src', 'build'));
                             }

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

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

package/build/components/back/index.js

@@ -1,16 +0,0 @@
-import * as template_u1 from '@esportsplus/template';
-import { component } from '@esportsplus/template';
-import icon from '../icon/index.js';
-import arrow from './svg/arrow.svg';
-import './scss/index.scss';
-const template_1hhpvdm1 = template_u1.template(`<a class='back link --padding-0px --flex-vertical' ><!--$-->`);
-export default component(function (attributes, content) {
-    return (() => {
-        let root_1hhpvdm0 = template_1hhpvdm1(), element_1hhpvdm2 = root_1hhpvdm0.firstChild, element_1hhpvdm3 = element_1hhpvdm2.firstChild;
-        template_u1.setProperties(element_1hhpvdm2, this?.attributes);
-        template_u1.setProperties(element_1hhpvdm2, attributes);
-        template_u1.slot(element_1hhpvdm3, icon({ class: 'back-arrow --margin-right --margin-200' }, arrow));
-        template_u1.slot(element_1hhpvdm2, content, 2);
-        return root_1hhpvdm0;
-    })();
-});

package/build/components/back/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.back-arrow{transition:color var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;transform:rotate(-90deg)}.back:not(.--active):hover .back-arrow{transform:rotate(-90deg)translateY(-2px)}}
-/*$vite$:1*/

package/build/components/back/svg/arrow.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g opacity="0.4" enable-background="new    ">
-	<path d="M12,22c-0.552,0-1-0.447-1-1v-6c0-0.553,0.448-1,1-1c0.553,0,1,0.447,1,1v6C13,21.553,12.553,22,12,22z"/>
-</g>
-<g>
-	<path d="M12,16c-0.552,0-1-0.447-1-1V5.414l-5.293,5.293c-0.391,0.391-1.023,0.391-1.414,0s-0.391-1.023,0-1.414l7-7
-		c0.096-0.096,0.208-0.169,0.326-0.218C11.735,2.027,11.863,2,11.997,2l0,0c0.002,0,0.004,0,0.006,0l0,0
-		c0.134,0,0.262,0.027,0.378,0.075c0.119,0.049,0.229,0.122,0.326,0.218l7,7c0.391,0.391,0.391,1.023,0,1.414s-1.023,0.391-1.414,0
-		L13,5.414V15C13,15.553,12.553,16,12,16z"/>
-</g>
-</svg>

package/build/components/bubble/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.bubble{--background:var(--background-default);--background-default:var(--color-border-400);--border-radius:100%;--height:var(--size);--margin-horizontal:var(--size-100);--size:6px;--width:var(--size)}.bubble--bottom-left,.bubble--bottom-right,.bubble--top-left,.bubble--top-right{--position-horizontal:calc(var(--size) / -2);--position-vertical:calc(var(--size) / -2)}.bubble{background:var(--background);border-radius:var(--border-radius);height:var(--height);width:var(--width)}.bubble--bottom-left,.bubble--bottom-right,.bubble--top-left,.bubble--top-right{position:absolute}.bubble--bottom-left,.bubble--top-left{left:var(--position-horizontal)}.bubble--bottom-right,.bubble--top-right{right:var(--position-horizontal)}.bubble--bottom-left,.bubble--bottom-right{bottom:var(--position-vertical)}.bubble--top-left,.bubble--top-right{top:var(--position-vertical)}}
-/*$vite$:1*/

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

@@ -1,103 +0,0 @@
-import * as template_u1 from '@esportsplus/template';
-import { type Renderable } from '@esportsplus/template';
-import './scss/index.scss';
-declare const hold: {
-    (): ReturnType<(this: {
-        attributes?: template_u1.Attributes | undefined;
-        content?: ((state: {
-            holding: boolean;
-            complete: boolean;
-        }) => Renderable<any>) | undefined;
-    }, attributes: Readonly<template_u1.Attributes>, content: (state: {
-        holding: boolean;
-        complete: boolean;
-    }) => Renderable<any>) => Renderable<any>>;
-    <T extends template_u1.Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: template_u1.Attributes | undefined;
-        content?: ((state: {
-            holding: boolean;
-            complete: boolean;
-        }) => Renderable<any>) | undefined;
-    }, attributes: Readonly<template_u1.Attributes>, content: (state: {
-        holding: boolean;
-        complete: boolean;
-    }) => Renderable<any>) => Renderable<any>>;
-    <T extends (state: {
-        holding: boolean;
-        complete: boolean;
-    }) => Renderable<any>>(content: T): ReturnType<(this: {
-        attributes?: template_u1.Attributes | undefined;
-        content?: ((state: {
-            holding: boolean;
-            complete: boolean;
-        }) => Renderable<any>) | undefined;
-    }, attributes: Readonly<template_u1.Attributes>, content: (state: {
-        holding: boolean;
-        complete: boolean;
-    }) => Renderable<any>) => Renderable<any>>;
-    (attributes: template_u1.Attributes, content: (state: {
-        holding: boolean;
-        complete: boolean;
-    }) => Renderable<any>): ReturnType<(this: {
-        attributes?: template_u1.Attributes | undefined;
-        content?: ((state: {
-            holding: boolean;
-            complete: boolean;
-        }) => Renderable<any>) | undefined;
-    }, attributes: Readonly<template_u1.Attributes>, content: (state: {
-        holding: boolean;
-        complete: boolean;
-    }) => Renderable<any>) => Renderable<any>>;
-};
-declare const _default: {
-    hold: {
-        (): ReturnType<(this: {
-            attributes?: template_u1.Attributes | undefined;
-            content?: ((state: {
-                holding: boolean;
-                complete: boolean;
-            }) => Renderable<any>) | undefined;
-        }, attributes: Readonly<template_u1.Attributes>, content: (state: {
-            holding: boolean;
-            complete: boolean;
-        }) => Renderable<any>) => Renderable<any>>;
-        <T extends template_u1.Attributes>(attributes: T): ReturnType<(this: {
-            attributes?: template_u1.Attributes | undefined;
-            content?: ((state: {
-                holding: boolean;
-                complete: boolean;
-            }) => Renderable<any>) | undefined;
-        }, attributes: Readonly<template_u1.Attributes>, content: (state: {
-            holding: boolean;
-            complete: boolean;
-        }) => Renderable<any>) => Renderable<any>>;
-        <T extends (state: {
-            holding: boolean;
-            complete: boolean;
-        }) => Renderable<any>>(content: T): ReturnType<(this: {
-            attributes?: template_u1.Attributes | undefined;
-            content?: ((state: {
-                holding: boolean;
-                complete: boolean;
-            }) => Renderable<any>) | undefined;
-        }, attributes: Readonly<template_u1.Attributes>, content: (state: {
-            holding: boolean;
-            complete: boolean;
-        }) => Renderable<any>) => Renderable<any>>;
-        (attributes: template_u1.Attributes, content: (state: {
-            holding: boolean;
-            complete: boolean;
-        }) => Renderable<any>): ReturnType<(this: {
-            attributes?: template_u1.Attributes | undefined;
-            content?: ((state: {
-                holding: boolean;
-                complete: boolean;
-            }) => Renderable<any>) | undefined;
-        }, attributes: Readonly<template_u1.Attributes>, content: (state: {
-            holding: boolean;
-            complete: boolean;
-        }) => Renderable<any>) => Renderable<any>>;
-    };
-};
-export default _default;
-export { hold };