@esportsplus/ui 0.0.66 → 0.0.68

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

@@ -8,7 +8,6 @@ declare const _default: {
         values: never[];
     };
     info: (messages: string | string[], seconds?: number) => void;
-    processing: () => void;
     success: (messages: string | string[], seconds?: number) => void;
     types: readonly ["error", "info", "success"];
 };

package/build/components/alert/index.js

@@ -7,7 +7,6 @@ let modifiers = {
 }, state = reactive({
     active: false,
     messages: new Set,
-    processing: false,
     seconds: 0,
     state: 'activating',
     type: ''
@@ -27,7 +26,6 @@ function activate(key, messages, seconds = 0) {
     state.type = key;
     if (state.active) {
         state.active = true;
-        state.processing = false;
         if (seconds) {
             if (!state.seconds) {
                 state.seconds = seconds;
@@ -51,7 +49,6 @@ function activate(key, messages, seconds = 0) {
     }
     setTimeout(() => {
         state.active = true;
-        state.processing = false;
         if (seconds) {
             if (!state.seconds) {
                 state.seconds = seconds;
@@ -78,37 +75,27 @@ function deactivate() {
     setTimeout(() => {
         state.active = false;
         state.messages.clear();
-        state.processing = false;
     }, timeout);
 }
 const error = (messages, seconds = 0) => activate('error', messages, seconds);
 const info = (messages, seconds = 0) => activate('info', messages, seconds);
-const processing = () => {
-    state.state = 'activating';
-    state.processing = true;
-    setTimeout(() => {
-        state.active = true;
-    }, timeout);
-};
 const success = (messages, seconds = 0) => activate('success', messages, seconds);
 const h = () => {
-    return () => state.active || state.processing ? html `
+    return () => state.active ? html `
         <div class='alert anchor anchor--ne ${() => state.active && '--active'} ${() => `alert--${state.state}`}'>
-            ${() => !state.processing ? html `
-                <div class="alert-close --flex-start --margin-right --margin-100" onclick='${deactivate}'>
-                    <div class='button --background-state ${() => `--background-${modifiers[state.type] || 'black'}`} --color-state --color-white --flex-center --padding-300'>
-                        <div class="icon --size-300">
-                            <svg width="16" height="16" viewBox="0 0 16 16">
-                                <path d="M3.527 14.948a.176.176 0 01-.248 0L1.051 12.72a.176.176 0 010-.248l11.42-11.419a.176.176 0 01.248 0l2.229 2.228a.174.174 0 010 .248L3.527 14.948z"/>
-                                <path d="M12.472 14.948c.068.068.18.068.248 0l2.229-2.229a.176.176 0 000-.248L3.528 1.052a.176.176 0 00-.248 0L1.052 3.28a.176.176 0 000 .248l11.42 11.42z"/>
-                            </svg>
-                        </div>
+            <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">
+                        <svg width="16" height="16" viewBox="0 0 16 16">
+                            <path d="M3.527 14.948a.176.176 0 01-.248 0L1.051 12.72a.176.176 0 010-.248l11.42-11.419a.176.176 0 01.248 0l2.229 2.228a.174.174 0 010 .248L3.527 14.948z"/>
+                            <path d="M12.472 14.948c.068.068.18.068.248 0l2.229-2.229a.176.176 0 000-.248L3.528 1.052a.176.176 0 00-.248 0L1.052 3.28a.176.176 0 000 .248l11.42 11.42z"/>
+                        </svg>
                     </div>
                 </div>
-            ` : ''}
+            </div>
 
             <div class="card --overflow-hidden" style='--background: var(--color-white-400)'>
-                <div class="alert-message ${() => !state.processing && '--active'} --flex-row --padding --padding-horizontal-500 --padding-vertical-400">
+                <div class="alert-message --active --flex-row --padding --padding-horizontal-500 --padding-vertical-400">
                     <div class='--flex-row --flex-fill --flex-vertical'>
                         <div class="--flex-fill --flex-column --padding-right --padding-400">
                             <h5 class="page-title">
@@ -118,28 +105,6 @@ const h = () => {
                                 <p class='--margin-top --margin-border-width-500'>${message}</p>
                             `)}
                         </div>
-
-                        ${() => !state.processing && state.seconds ? html `
-                            <svg class='alert-timer' style='--animation-duration: ${state.seconds}s;'>
-                                <circle class="alert-timer-bg" cx="50%" cy="50%" r="40%" style='--border-color: var(--color-grey-500);' />
-                                <circle class="alert-timer-meter" cx="50%" cy="50%" r="40%" style='--border-color: var(--color-black-300);' />
-                            </svg>
-                        ` : ''}
-                    </div>
-                </div>
-
-                <div class='alert-processing ${() => state.processing && '--active'} --flex-row --flex-vertical --padding --padding-500'>
-                    <div class="processing">
-                        <span class='processing-ring'></span>
-                    </div>
-                    <div class='text --flex-fill --margin-left --margin-300 --text-bold' style='--color: var(--color-text-500)'>
-                        Processing
-
-                        <div class='ellipsis'>
-                            <span class='ellipsis-dot --margin-left --margin-border-width'>.</span>
-                            <span class='ellipsis-dot --margin-left --margin-border-width'>.</span>
-                            <span class='ellipsis-dot --margin-left --margin-border-width'>.</span>
-                        </div>
                     </div>
                 </div>
             </div>
@@ -147,4 +112,4 @@ const h = () => {
     ` : '';
 };
 const types = ['error', 'info', 'success'];
-export default { deactivate, error, html: h, info, processing, success, types };
+export default { deactivate, error, html: h, info, success, types };

package/build/components/field/file.d.ts

@@ -0,0 +1,22 @@
+import description from './description';
+import title from './title';
+type Data = {
+    accept?: string;
+    class?: string;
+    mask?: {
+        class?: string;
+        content?: any;
+        style?: string;
+    };
+    name?: string;
+    placeholder?: string;
+    style?: string;
+    type?: string;
+    value?: unknown;
+} & Parameters<typeof description>[0] & Parameters<typeof title>[0];
+declare const _default: (data: Data) => {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/field/file.js

@@ -0,0 +1,45 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { form } from '../../components';
+import description from './description';
+import error from './error';
+import title from './title';
+export default (data) => {
+    let state = reactive({
+        active: false,
+        error: ''
+    });
+    return html `
+        <div
+            class="field ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column"
+            onfocusin='${() => {
+        state.active = true;
+    }}'
+            onfocusout='${() => {
+        state.active = false;
+    }}'
+            style='${data?.style || ''}'
+        >
+            ${title(data)}
+
+            <label
+                class='field-mask field-mask--input --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) && '--margin-top'} --margin-300'
+                style='${data?.mask?.style || ''}'
+            >
+                <input
+                    ${data?.accept ? `accept='${data.accept}'` : ''}
+                    class='field-tag field-tag--hidden'
+                    name='${data.name}'
+                    onrender='${form.input.attributes(state)}'
+                    type='file'
+                    ${data?.value !== undefined ? `value='${data.value}'` : ''}
+                >
+
+                ${data?.mask?.content || ''}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
+    `;
+};

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

@@ -19,6 +19,29 @@ declare const _default: {
         type: string;
         values: never[];
     };
+    file: (data: {
+        accept?: string | undefined;
+        class?: string | undefined;
+        mask?: {
+            class?: string | undefined;
+            content?: any;
+            style?: string | undefined;
+        } | undefined;
+        name?: string | undefined;
+        placeholder?: string | undefined;
+        style?: string | undefined;
+        type?: string | undefined;
+        value?: unknown;
+    } & {
+        description?: string | undefined;
+    } & {
+        required?: boolean | undefined;
+        title?: string | undefined;
+    }) => {
+        content: string;
+        type: string;
+        values: never[];
+    };
     optional: {
         select: (data: {
             class?: string | undefined;

package/build/components/field/index.js

@@ -1,6 +1,7 @@
 import checkbox from './checkbox';
+import file from './file';
 import optional from './optional';
 import select from './select';
 import s from './switch';
 import text from './text';
-export default { checkbox, optional, select, switch: s, text };
+export default { checkbox, file, optional, select, switch: s, text };

package/build/components/field/title.js

@@ -4,12 +4,13 @@ export default (data) => {
     if (!data?.title) {
         return '';
     }
+    let { attributes } = tooltip.onhover();
     return 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()}>
+                <div class="bubble --background-primary --margin-left" ${attributes}>
                     <span class="tooltip-message tooltip-message--w">Required</span>
                 </div>
             `}

package/build/components/form/layout.js

@@ -6,7 +6,7 @@ export default (data) => html `
     <form class='${data?.class}' ${data?.action || ''}>
         ${data?.content || ''}
 
-        ${data?.button ? html `
+        ${data?.button?.content ? html `
             <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
                 ${data?.button?.content || ''}
             </button>

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

@@ -1,40 +1,53 @@
 declare const _default: {
-    onclick: ({ active, toggle }?: {
+    onclick: (data?: {
         active?: boolean | undefined;
-        toggle?: boolean | undefined;
-    }) => {
-        content: string;
-        type: string;
-        values: never[];
-    };
-    onhover: (active?: boolean) => {
-        content: string;
-        type: string;
-        values: never[];
-    };
-    menu: (data: {
-        class?: string | undefined;
-        direction?: string | undefined;
-        items?: {
-            border?: {
+        menu?: {
+            class?: string | undefined;
+            direction?: string | undefined;
+            items?: {
+                border?: {
+                    class?: string | undefined;
+                } | undefined;
                 class?: string | undefined;
+                onclick?: ((...args: any[]) => void) | undefined;
+                style?: string | undefined;
+                svg?: string | undefined;
+                target?: string | undefined;
+                text: string;
+                url?: string | undefined;
+            }[] | undefined;
+            state?: {
+                active?: boolean | undefined;
             } | undefined;
-            class?: string | undefined;
-            onclick?: ((...args: any[]) => void) | undefined;
             style?: string | undefined;
-            svg?: string | undefined;
-            target?: string | undefined;
-            text: string;
-            url?: string | undefined;
-        }[] | undefined;
-        state?: {
-            active?: boolean | undefined;
         } | undefined;
-        style?: string | undefined;
-    }) => () => "" | {
-        content: string;
-        type: string;
-        values: never[];
+        toggle?: boolean | undefined;
+    }) => {
+        attributes: {
+            content: string;
+            type: string;
+            values: never[];
+        };
+        content: (() => "" | {
+            content: string;
+            type: string;
+            values: never[];
+        }) | undefined;
+        state: {
+            active: boolean;
+            render: boolean | undefined;
+        };
+    };
+    onhover: (active?: boolean) => {
+        attributes: {
+            content: string;
+            type: string;
+            values: never[];
+        };
+        state: {
+            active: boolean;
+            render: boolean | undefined;
+        };
     };
 };
 export default _default;

package/build/components/tooltip/index.js

@@ -2,38 +2,52 @@ import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
 import { root } from '../../components';
 import menu from './menu';
-const onclick = ({ active, toggle } = {}) => {
-    let state = reactive({
-        active: active || false
+const onclick = (data = {}) => {
+    let content, state = reactive({
+        active: data.active || false,
+        render: undefined
     });
-    return html({
-        class: () => {
-            return `tooltip ${state.active ? '--active' : ''}`;
-        },
-        onclick: function (e) {
-            let active = true;
-            if (toggle && e.target && this.isSameNode(e.target)) {
-                active = !state.active;
-            }
-            state.active = active;
-            if (active) {
-                root.queue.onclick(() => state.active = false);
+    if (data.menu) {
+        content = menu(data.menu, state);
+    }
+    return {
+        attributes: html({
+            class: () => {
+                return `tooltip ${state.active ? '--active' : ''}`;
+            },
+            onclick: function (e) {
+                let active = true;
+                if (data.toggle && e.target && this.isSameNode(e.target)) {
+                    active = !state.active;
+                }
+                state.active = active;
+                if (active) {
+                    root.queue.onclick(() => state.active = false);
+                }
             }
-        }
-    });
+        }),
+        content,
+        state
+    };
 };
 const onhover = (active = false) => {
-    let state = reactive({ active });
-    return html({
-        class: () => {
-            return `tooltip ${state.active ? '--active' : ''}`;
-        },
-        onmouseover: () => {
-            state.active = true;
-        },
-        onmouseout: () => {
-            state.active = false;
-        }
+    let state = reactive({
+        active,
+        render: undefined
     });
+    return {
+        attributes: html({
+            class: () => {
+                return `tooltip ${state.active ? '--active' : ''}`;
+            },
+            onmouseover: () => {
+                state.active = true;
+            },
+            onmouseout: () => {
+                state.active = false;
+            }
+        }),
+        state
+    };
 };
-export default { onclick, onhover, menu };
+export default { onclick, onhover };

package/build/components/tooltip/menu.d.ts

@@ -18,7 +18,10 @@ type Data = {
     };
     style?: string;
 };
-declare const _default: (data: Data) => () => "" | {
+declare const _default: (data: Data, state: {
+    active?: boolean;
+    render?: boolean;
+}) => () => "" | {
     content: string;
     type: string;
     values: never[];

package/build/components/tooltip/menu.js

@@ -1,4 +1,4 @@
-import { effect, reactive } from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
 function template(data) {
     return html `
@@ -33,12 +33,9 @@ function template(data) {
         </div>
     `;
 }
-export default (data) => {
-    let state = reactive({
-        render: false
-    });
+export default (data, state) => {
     effect(() => {
-        if (!data?.state?.active || state.render) {
+        if (!state.active || state.render) {
             return;
         }
         state.render = true;

package/css/components/styles.css

@@ -1 +1 @@
-.accordion{max-height:var(--max-height);opacity:0;pointer-events:none;transition:max-height var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out}.accordion.--active{opacity:1;pointer-events:auto}.alert{max-width:calc(100% - var(--margin-horizontal)*2);width:var(--width)}.alert--deactivating{opacity:0;transform:translateY(-50%)}.alert--activating:not(.--active){transform:translateY(50%)}.alert-close{animation:alert-close var(--transition-duration) ease-in-out;bottom:0;position:absolute;right:100%;top:0;transition:transform var(--transition-duration) ease-in-out;z-index:0}.alert-message{opacity:0;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out}.alert-message:not(.--active){left:0;pointer-events:none;position:absolute;top:0;transform:translateX(-25%)}.alert-message.--active{opacity:1}.alert-timer{height:var(--height);transition:opacity var(--transition-duration) ease-in-out;width:var(--width)}.alert-timer-bg,.alert-timer-meter{fill:none;stroke-width:var(--border-width);stroke:var(--border-color)}.alert-timer-meter{stroke-linecap:round;stroke-dasharray:360;stroke-dashoffset:0;animation:alert-timer var(--animation-duration) ease-in-out;transform:rotate(-90deg);transform-origin:50% 50%}@keyframes alert-close{0%{transform:translateX(150%)}to{transform:translateX(0)}}@keyframes alert-timer{0%{stroke-dashoffset:360}to{stroke-dashoffset:0}}.anchor{max-height:calc(100% - var(--margin-vertical)*2);max-width:calc(100% - var(--margin-horizontal)*2);pointer-events:auto;position:absolute;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}.banner{background-position:50%;background-size:cover;bottom:0;left:0;position:absolute;right:0;top:0;z-index:-1}.banner--fixed{position:fixed}.border{border-top:var(--border-width) var(--border-style) var(--border-color);position:relative;width:100%}.border+.border{display:none}.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)}.button{align-content:center;align-items:center;background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);font-weight:var(--font-weight);justify-content:center;line-height:var(--line-height);min-width:var(--min-width);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;transition:all var(--transition-duration) ease-in-out;width:var(--width)}.button:after{border-radius:inherit;bottom:0;box-shadow:var(--box-shadow);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.button--flat:after{display:none}.button--processing{color:transparent;pointer-events:none}.button--processing:before{animation:button--processing var(--animation-duration) infinite linear;border:var(--border-width) solid var(--border-color);border-radius:100%;border-right-color:transparent;border-top-color:transparent;bottom:50%;content:"";height:var(--size);position:absolute;right:50%;transform:translate(50%,50%);width:var(--size)}.button--processing *{opacity:0}@keyframes button--processing{0%{transform:translate(50%,50%) rotate(0deg)}to{transform:translate(50%,50%) rotate(359deg)}}.button--top-left,.button--top-right{position:absolute;top:calc((var(--padding-vertical) + var(--line-height)/2)*-1)}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}.card{background:var(--background);border-radius:var(--border-radius);padding:var(--padding-vertical) var(--padding-horizontal);position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,max-height var(--transition-duration) ease-in-out;width:var(--width)}.card:after{border-radius:inherit;bottom:0;box-shadow:var(--box-shadow);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.card--flat:after{display:none}.container{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 auto;max-width:var(--max-width);padding:var(--padding-vertical) var(--padding-horizontal);position:relative;width:100%}.ellipsis-dot:first-child{animation:ellipsis-dot-one var(--animation-duration) linear infinite}.ellipsis-dot:nth-child(2){animation:ellipsis-dot-two var(--animation-duration) linear infinite}.ellipsis-dot:nth-child(3){animation:ellipsis-dot-three var(--animation-duration) linear infinite}@keyframes ellipsis-dot-one{0%{opacity:1}65%{opacity:1}66%{opacity:0}to{opacity:0}}@keyframes ellipsis-dot-two{0%{opacity:0}21%{opacity:0}22%{opacity:1}65%{opacity:1}66%{opacity:0}to{opacity:0}}@keyframes ellipsis-dot-three{0%{opacity:0}43%{opacity:0}44%{opacity:1}65%{opacity:1}66%{opacity:0}to{opacity:0}}button,input,select,textarea{background:transparent;border:0;border-radius:0;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover,select,select:active,select:focus,select:hover,textarea,textarea:active,textarea:focus,textarea:hover{outline:none}button:invalid,input:invalid,select:invalid,textarea:invalid{box-shadow:none}form{margin:0;padding:0;width:100%}label{cursor:pointer}.field{display:flex;position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;width:var(--width);z-index:1}.field:not(.--active):hover{z-index:8}.field.--active{z-index:9}.field--optional{max-height:var(--max-height);opacity:0;pointer-events:none;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,max-height var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out}.field.--active .field--optional{opacity:1;pointer-events:auto}.field-description,.field-error,.field-title{word-wrap:break-word;color:var(--color);font-size:var(--font-size);position:relative;width:100%}.field-description:empty,.field-error:empty,.field-title:empty{height:0;margin:0}.field-error{animation:field-error .32s linear 1}@keyframes field-error{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}to{transform:translate(0)}}.field-mask:after{border-radius:inherit;bottom:0;box-shadow:var(--box-shadow);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;z-index:0}.field-mask--flat:after{display:none}.field-mask--outline:before{border-radius:var(--border-radius);bottom:0;box-shadow:0 0 0 var(--outline-width) var(--border-color);content:"";left:0;opacity:var(--outline-opacity);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.field-required{background:var(--background);border-radius:var(--border-radius);height:var(--size);width:var(--size)}.field-tag--hidden{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:0;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:0;z-index:-1}.field-title{font-weight:var(--font-weight);z-index:1}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:var(--width)}.field-mask--checkbox:invalid,.field-mask--checkbox:required,.field-mask--radio:invalid,.field-mask--radio:required,.field-mask--switch:invalid,.field-mask--switch:required{box-shadow:none}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY)) rotate(var(--rotate)) scale(var(--scale));width:var(--width)}.field-mask--checkbox .field-tag,.field-mask--radio .field-tag,.field-mask--switch .field-tag{height:0;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:0;z-index:0}.field-mask--checkbox:before,.field-mask--radio:before{bottom:50%;position:absolute;right:50%}.field-mask--radio:before,.field-mask--switch:before{background:var(--accent);border-radius:inherit;transform-origin:center}.field-mask--checkbox:before{border-bottom:var(--border-width) solid var(--accent);border-right:var(--border-width) solid var(--accent);transform-origin:center left}.field-mask--switch:before{left:var(--padding-horizontal);position:absolute;top:var(--padding-vertical)}.field-mask--input,.field-mask--select{align-items:center;background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);display:flex;flex-wrap:wrap;font-size:var(--font-size);line-height:var(--line-height);position:relative;width:100%}.field-mask--input:invalid,.field-mask--input:required,.field-mask--select:invalid,.field-mask--select:required{box-shadow:none}.field-mask--input,.field-mask--input .field-tag,.field-mask--select,.field-mask--select .field-tag{color:var(--color)}.field-mask--input .field-tag,.field-mask--select .field-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-mask--input{cursor:text;min-height:calc(var(--padding-vertical)*2 + var(--size))}.field-mask--input .field-tag{flex:1 1 auto;min-width:0;padding:var(--padding-vertical) var(--padding-horizontal)}.field-mask--input .field-tag[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.field-mask--select{cursor:pointer;padding:var(--padding-vertical) calc(var(--padding-horizontal)/1.5 + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal)}.field-mask--select.--padding{padding-right:calc(var(--padding-horizontal)*1.5 + var(--arrow-size))}.field-mask-arrow{border-color:var(--border-color);border-style:var(--border-style);border-width:0 var(--border-width) var(--border-width) 0;bottom:calc(50% + var(--arrow-spacer));content:"";height:var(--arrow-size);position:absolute;right:calc(var(--padding-horizontal) + var(--arrow-spacer));transform:translateY(50%) rotate(45deg);width:var(--arrow-size)}.field-text{padding-right:var(--padding-horizontal)}.group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 calc(var(--margin-horizontal)/-2);position:relative;width:calc(100% + var(--margin-horizontal))}.group--offset-bottom{margin-bottom:calc(var(--margin-vertical)*-1)}.group--offset-top{margin-top:calc(var(--margin-vertical)*-1)}.group--scroller .group-item:first-child{margin-left:0}.group--scroller .group-item:last-child{margin-right:0}.group-item{display:flex;margin:var(--margin-vertical) calc(var(--margin-horizontal)/2) 0;position:relative;width:var(--width)}.group-item[class*="--width"]{width:calc(var(--width) - var(--margin-horizontal))}.icon{color:var(--color);display:flex;flex:0 0 var(--width);height:var(--height);pointer-events:none;position:relative;transform:rotate(var(--rotate));width:var(--width)}.icon svg{fill:currentColor;color:currentColor;height:100%;width:100%}.link{align-content:center;background:var(--background);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);justify-content:flex-start;line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;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)}.link--underline.--active,.link--underline:not(.--active):hover{text-decoration:underline}.loading{animation:loading var(--animation-duration) infinite linear;animation-delay:var(--animation-delay);border:var(--border-width) var(--border-style) var(--border-color);border-radius:100%;border-right-color:transparent;border-top-color:transparent;box-shadow:var(--box-shadow);height:var(--height);pointer-events:none;position:relative;transition:border-color var(--transition-duration) ease-in-out;width:var(--width);z-index:0}@keyframes loading{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.overlay{bottom:0;height:100vh;left:0;pointer-events:none;position:fixed;right:0;top:0;width:100vw;z-index:9}.page{min-height:var(--min-height);position:relative;width:var(--width)}.page-subtitle,.page-suptitle,.page-title{color:var(--color);display:block;line-height:var(--line-height);position:relative;width:100%;z-index:1}.page-subtitle,.page-suptitle{font-size:var(--font-size)}.processing{animation:processing var(--animation-duration) linear infinite;height:var(--size);position:relative;width:var(--size)}.processing-ring{clip:rect(calc(var(--size)/2),var(--size),var(--size),0)}.processing-ring,.processing-ring:after,.processing-ring:before{bottom:0;left:0;position:absolute;right:0;top:0}.processing-ring,.processing-ring:before{animation:processing calc(var(--animation-duration)/2) cubic-bezier(.77,0,.175,1) infinite}.processing-ring:after,.processing-ring:before{border-radius:50%;content:""}.processing-ring:after{border:var(--border-width) var(--border-style) var(--border-color-secondary);opacity:var(--opacity)}.processing-ring:before{border-top:var(--border-width) var(--border-style) var(--border-color-primary)}@keyframes processing{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}body,html{height:100%;overflow-x:hidden;width:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--background);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);min-width:var(--min-width);text-rendering:optimizeLegibility}*,:after,:before{box-sizing:border-box;transition:inherit}section{align-content:flex-start;display:flex;flex-wrap:wrap;justify-content:flex-start;position:relative;width:var(--width)}h1,h2,h3,h4,h5{word-wrap:break-word;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);margin:0;padding:0;position:relative;width:100%}h1 sub,h1 sup,h2 sub,h2 sup,h3 sub,h3 sup,h4 sub,h4 sup,h5 sub,h5 sup{font-size:.64em}a{cursor:pointer;outline:none;text-decoration:none}a,b,strong{color:var(--color,inherit)}b,strong{font-weight:var(--font-weight)}p{word-wrap:break-word}p,pre{margin:0;padding:0;width:100%}pre{overflow-wrap:break-word;white-space:break-spaces}sub,sup{font-size:.8em}sub{bottom:-.48em}sup{top:-.48em}.row{display:flex;flex-wrap:wrap;justify-content:flex-start;min-height:var(--min-height);position:relative;width:100%}::-webkit-scrollbar,::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:window-inactive,::-webkit-scrollbar-track{background:transparent;box-shadow:unset}.--scrollbar{height:100%;margin-right:calc(var(--scrollbar-width)*-1);overflow-x:hidden;overflow-y:scroll;scroll-behavior:smooth;width:calc(100% + var(--scrollbar-width))}.scrollbar{height:100%;z-index:9}.scrollbar,.scrollbar:before{position:absolute;right:0;top:0;transition:opacity var(--transition-duration) ease-in-out;width:var(--width)}.scrollbar:before{background:var(--background-default);border-radius:var(--border-radius);content:"";height:var(--height);transform:var(--translate);transform-origin:top center}.scrollbar--fixed{position:fixed}.scrollbar--hidden{opacity:0}.sidebar{bottom:var(--position-vertical);cursor:default;height:calc(100% - var(--position-vertical)*2);max-width:var(--width);overflow:hidden;pointer-events:auto;position:absolute;top:var(--position-vertical);transition:max-width var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:calc(100% - var(--position-horizontal)*2);z-index:1}.sidebar:not(.--active) input[type=password]{display:none}.sidebar--e{right:var(--position-horizontal)}.sidebar--e.sidebar--offscreen:not(.--active){transform:translateX(var(--width))}.sidebar--w{left:var(--position-horizontal)}.sidebar--w.sidebar--offscreen:not(.--active){transform:translateX(calc(var(--width)*-1))}.sidebar-content{flex:0 0 var(--width-default);width:var(--width-default)}.site{z-index:0}.text{align-items:center;color:var(--color);display:flex;flex-flow:wrap;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);transition:color var(--transition-duration) ease-in-out}.text,.thumbnail{position:relative;width:var(--width)}.thumbnail{background:var(--background);border-radius:var(--border-radius);height:var(--height)}.tooltip{cursor:pointer;position:relative;z-index:8}.tooltip.--active{z-index:9}.tooltip.--active.tooltip--box:before{bottom:50%;content:"";height:calc(100% + var(--spacer)*2.5);position:absolute;right:50%;transform:translate(50%,50%);width:calc(100% + var(--spacer)*2.5);z-index:-1}.tooltip.--active :not(.tooltip) .tooltip-arrow,.tooltip.--active>.tooltip-arrow{transform:rotate(-90deg)}.tooltip-arrow{margin:0 -1px;transform:rotate(90deg)}.tooltip-content,.tooltip-message{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);max-width:var(--max-width);min-width:var(--min-width);opacity:0;overflow:hidden;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:var(--width);z-index:9}.tooltip.--active :not(.tooltip)>.tooltip-content,.tooltip.--active :not(.tooltip)>.tooltip-message,.tooltip.--active>.tooltip-content,.tooltip.--active>.tooltip-message{opacity:1}.tooltip:not(.--active) :not(.tooltip)>.tooltip-content,.tooltip:not(.--active) :not(.tooltip)>.tooltip-content *,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message *,.tooltip:not(.--active)>.tooltip-content,.tooltip:not(.--active)>.tooltip-content *,.tooltip:not(.--active)>.tooltip-message,.tooltip:not(.--active)>.tooltip-message *{pointer-events:none}.tooltip-content--c,.tooltip-message--c{bottom:50%;position:absolute;right:50%;transform:translate(50%,50%) scale(var(--scaleX),var(--scaleY));transform-origin:center center}.tooltip.--active :not(.tooltip)>.tooltip-content--c,.tooltip.--active :not(.tooltip)>.tooltip-message--c,.tooltip.--active>.tooltip-content--c,.tooltip.--active>.tooltip-message--c{transform:translate(50%,50%) scale(1)}.tooltip-content--en,.tooltip-content--es,.tooltip-message--en,.tooltip-message--es{left:calc(100% - var(--spacer));position:absolute;transform:scale(var(--scaleX),var(--scaleY))}.tooltip.--active :not(.tooltip)>.tooltip-content--en,.tooltip.--active :not(.tooltip)>.tooltip-content--es,.tooltip.--active :not(.tooltip)>.tooltip-message--en,.tooltip.--active :not(.tooltip)>.tooltip-message--es,.tooltip.--active>.tooltip-content--en,.tooltip.--active>.tooltip-content--es,.tooltip.--active>.tooltip-message--en,.tooltip.--active>.tooltip-message--es{transform:translateX(calc(var(--spacer)*2))}.tooltip-content--e,.tooltip-message--e{bottom:50%;left:calc(100% - var(--spacer));position:absolute;transform:translateY(50%) scaleX(var(--scaleX));transform-origin:center left}.tooltip.--active :not(.tooltip)>.tooltip-content--e,.tooltip.--active :not(.tooltip)>.tooltip-message--e,.tooltip.--active>.tooltip-content--e,.tooltip.--active>.tooltip-message--e{transform:translate(calc(var(--spacer)*2),50%) scale(1)}.tooltip-content--en,.tooltip-message--en{top:0;transform-origin:top left}.tooltip-content--es,.tooltip-message--es{bottom:0;transform-origin:bottom left}.tooltip-content--ne,.tooltip-content--nw,.tooltip-message--ne,.tooltip-message--nw{bottom:calc(100% - var(--spacer));position:absolute;transform:scale(var(--scaleX),var(--scaleY))}.tooltip.--active :not(.tooltip)>.tooltip-content--ne,.tooltip.--active :not(.tooltip)>.tooltip-content--nw,.tooltip.--active :not(.tooltip)>.tooltip-message--ne,.tooltip.--active :not(.tooltip)>.tooltip-message--nw,.tooltip.--active>.tooltip-content--ne,.tooltip.--active>.tooltip-content--nw,.tooltip.--active>.tooltip-message--ne,.tooltip.--active>.tooltip-message--nw{transform:translateY(calc(var(--spacer)*-2))}.tooltip-content--n,.tooltip-message--n{bottom:calc(100% - var(--spacer));position:absolute;right:50%;transform:translateX(50%) scaleY(var(--scaleY));transform-origin:center bottom}.tooltip.--active :not(.tooltip)>.tooltip-content--n,.tooltip.--active :not(.tooltip)>.tooltip-message--n,.tooltip.--active>.tooltip-content--n,.tooltip.--active>.tooltip-message--n{transform:translate(50%,calc(var(--spacer)*-2)) scale(1)}.tooltip-content--ne,.tooltip-message--ne{right:0;transform-origin:bottom right}.tooltip-content--nw,.tooltip-message--nw{left:0;transform-origin:bottom left}.tooltip-content--se,.tooltip-content--sw,.tooltip-message--se,.tooltip-message--sw{position:absolute;top:calc(100% - var(--spacer));transform:scale(var(--scaleX),var(--scaleY))}.tooltip.--active :not(.tooltip)>.tooltip-content--se,.tooltip.--active :not(.tooltip)>.tooltip-content--sw,.tooltip.--active :not(.tooltip)>.tooltip-message--se,.tooltip.--active :not(.tooltip)>.tooltip-message--sw,.tooltip.--active>.tooltip-content--se,.tooltip.--active>.tooltip-content--sw,.tooltip.--active>.tooltip-message--se,.tooltip.--active>.tooltip-message--sw{transform:translateY(calc(var(--spacer)*2))}.tooltip-content--s,.tooltip-message--s{position:absolute;right:50%;top:calc(100% - var(--spacer));transform:translateX(50%) scaleY(var(--scaleY));transform-origin:center top}.tooltip.--active :not(.tooltip)>.tooltip-content--s,.tooltip.--active :not(.tooltip)>.tooltip-message--s,.tooltip.--active>.tooltip-content--s,.tooltip.--active>.tooltip-message--s{transform:translate(50%,calc(var(--spacer)*2)) scale(1)}.tooltip-content--se,.tooltip-message--se{right:0;transform-origin:top right}.tooltip-content--sw,.tooltip-message--sw{left:0;transform-origin:top left}.tooltip-content--wn,.tooltip-content--ws,.tooltip-message--wn,.tooltip-message--ws{position:absolute;right:calc(100% - var(--spacer));transform:scale(var(--scale))}.tooltip.--active :not(.tooltip)>.tooltip-content--wn,.tooltip.--active :not(.tooltip)>.tooltip-content--ws,.tooltip.--active :not(.tooltip)>.tooltip-message--wn,.tooltip.--active :not(.tooltip)>.tooltip-message--ws,.tooltip.--active>.tooltip-content--wn,.tooltip.--active>.tooltip-content--ws,.tooltip.--active>.tooltip-message--wn,.tooltip.--active>.tooltip-message--ws{transform:translateX(calc(var(--spacer)*-2))}.tooltip-content--w,.tooltip-message--w{bottom:50%;position:absolute;right:calc(100% - var(--spacer));transform:translateY(50%) scaleX(var(--scaleX));transform-origin:center right}.tooltip.--active :not(.tooltip)>.tooltip-content--w,.tooltip.--active :not(.tooltip)>.tooltip-message--w,.tooltip.--active>.tooltip-content--w,.tooltip.--active>.tooltip-message--w{transform:translate(calc(var(--spacer)*-2),50%) scale(1)}.tooltip-content--wn,.tooltip-message--wn{top:0;transform-origin:top right}.tooltip-content--ws,.tooltip-message--ws{bottom:0;transform-origin:bottom right}.tooltip-message{background:var(--background);color:var(--color);cursor:auto;font-size:var(--font-size);font-weight:var(--font-weight);line-height:normal;padding:var(--padding-vertical) var(--padding-horizontal);pointer-events:none;white-space:nowrap}
+.accordion{max-height:var(--max-height);opacity:0;pointer-events:none;transition:max-height var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out}.accordion.--active{opacity:1;pointer-events:auto}.alert{max-width:calc(100% - var(--margin-horizontal)*2);width:var(--width)}.alert--deactivating{opacity:0;transform:translateY(-50%)}.alert--activating:not(.--active){transform:translateY(50%)}.alert-close{animation:alert-close var(--transition-duration) ease-in-out;bottom:0;position:absolute;right:100%;top:0;transition:transform var(--transition-duration) ease-in-out;z-index:0}.alert-message{opacity:0;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out}.alert-message:not(.--active){left:0;pointer-events:none;position:absolute;top:0;transform:translateX(-25%)}.alert-message.--active{opacity:1}@keyframes alert-close{0%{transform:translateX(150%)}to{transform:translateX(0)}}.anchor{max-height:calc(100% - var(--margin-vertical)*2);max-width:calc(100% - var(--margin-horizontal)*2);pointer-events:auto;position:absolute;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}.banner{background-position:50%;background-size:cover;bottom:0;left:0;position:absolute;right:0;top:0;z-index:-1}.banner--fixed{position:fixed}.border{border-top:var(--border-width) var(--border-style) var(--border-color);position:relative;width:100%}.border+.border{display:none}.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)}.button{align-content:center;align-items:center;background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);font-weight:var(--font-weight);justify-content:center;line-height:var(--line-height);min-width:var(--min-width);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;transition:all var(--transition-duration) ease-in-out;width:var(--width)}.button:after{border-radius:inherit;bottom:0;box-shadow:var(--box-shadow);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.button--flat:after{display:none}.button--processing{color:transparent;pointer-events:none}.button--processing:before{animation:button--processing var(--animation-duration) infinite linear;border:var(--border-width) solid var(--border-color);border-radius:100%;border-right-color:transparent;border-top-color:transparent;bottom:50%;content:"";height:var(--size);position:absolute;right:50%;transform:translate(50%,50%);width:var(--size)}.button--processing *{opacity:0}@keyframes button--processing{0%{transform:translate(50%,50%) rotate(0deg)}to{transform:translate(50%,50%) rotate(359deg)}}.button--top-left,.button--top-right{position:absolute;top:calc((var(--padding-vertical) + var(--line-height)/2)*-1)}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}.card{background:var(--background);border-radius:var(--border-radius);padding:var(--padding-vertical) var(--padding-horizontal);position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,max-height var(--transition-duration) ease-in-out;width:var(--width)}.card:after{border-radius:inherit;bottom:0;box-shadow:var(--box-shadow);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.card--flat:after{display:none}.container{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 auto;max-width:var(--max-width);padding:var(--padding-vertical) var(--padding-horizontal);position:relative;width:100%}.ellipsis-dot:first-child{animation:ellipsis-dot-one var(--animation-duration) linear infinite}.ellipsis-dot:nth-child(2){animation:ellipsis-dot-two var(--animation-duration) linear infinite}.ellipsis-dot:nth-child(3){animation:ellipsis-dot-three var(--animation-duration) linear infinite}@keyframes ellipsis-dot-one{0%{opacity:1}65%{opacity:1}66%{opacity:0}to{opacity:0}}@keyframes ellipsis-dot-two{0%{opacity:0}21%{opacity:0}22%{opacity:1}65%{opacity:1}66%{opacity:0}to{opacity:0}}@keyframes ellipsis-dot-three{0%{opacity:0}43%{opacity:0}44%{opacity:1}65%{opacity:1}66%{opacity:0}to{opacity:0}}button,input,select,textarea{background:transparent;border:0;border-radius:0;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover,select,select:active,select:focus,select:hover,textarea,textarea:active,textarea:focus,textarea:hover{outline:none}button:invalid,input:invalid,select:invalid,textarea:invalid{box-shadow:none}form{margin:0;padding:0;width:100%}label{cursor:pointer}.field{display:flex;position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;width:var(--width);z-index:1}.field:not(.--active):hover{z-index:8}.field.--active{z-index:9}.field--optional{max-height:var(--max-height);opacity:0;pointer-events:none;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,max-height var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out}.field.--active .field--optional{opacity:1;pointer-events:auto}.field-description,.field-error,.field-title{word-wrap:break-word;color:var(--color);font-size:var(--font-size);position:relative;width:100%}.field-description:empty,.field-error:empty,.field-title:empty{height:0;margin:0}.field-error{animation:field-error .32s linear 1}@keyframes field-error{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}to{transform:translate(0)}}.field-mask:after{border-radius:inherit;bottom:0;box-shadow:var(--box-shadow);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;z-index:0}.field-mask--flat:after{display:none}.field-mask--outline:before{border-radius:var(--border-radius);bottom:0;box-shadow:0 0 0 var(--outline-width) var(--border-color);content:"";left:0;opacity:var(--outline-opacity);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.field-required{background:var(--background);border-radius:var(--border-radius);height:var(--size);width:var(--size)}.field-tag--hidden{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:0;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:0;z-index:-1}.field-title{font-weight:var(--font-weight);z-index:1}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:var(--width)}.field-mask--checkbox:invalid,.field-mask--checkbox:required,.field-mask--radio:invalid,.field-mask--radio:required,.field-mask--switch:invalid,.field-mask--switch:required{box-shadow:none}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY)) rotate(var(--rotate)) scale(var(--scale));width:var(--width)}.field-mask--checkbox .field-tag,.field-mask--radio .field-tag,.field-mask--switch .field-tag{height:0;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:0;z-index:0}.field-mask--checkbox:before,.field-mask--radio:before{bottom:50%;position:absolute;right:50%}.field-mask--radio:before,.field-mask--switch:before{background:var(--accent);border-radius:inherit;transform-origin:center}.field-mask--checkbox:before{border-bottom:var(--border-width) solid var(--accent);border-right:var(--border-width) solid var(--accent);transform-origin:center left}.field-mask--switch:before{left:var(--padding-horizontal);position:absolute;top:var(--padding-vertical)}.field-mask--input,.field-mask--select{align-items:center;background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);display:flex;flex-wrap:wrap;font-size:var(--font-size);line-height:var(--line-height);position:relative;width:100%}.field-mask--input:invalid,.field-mask--input:required,.field-mask--select:invalid,.field-mask--select:required{box-shadow:none}.field-mask--input,.field-mask--input .field-tag,.field-mask--select,.field-mask--select .field-tag{color:var(--color)}.field-mask--input .field-tag,.field-mask--select .field-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-mask--input{cursor:text;min-height:calc(var(--padding-vertical)*2 + var(--size))}.field-mask--input .field-tag{flex:1 1 auto;min-width:0;padding:var(--padding-vertical) var(--padding-horizontal)}.field-mask--input .field-tag[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.field-mask--select{cursor:pointer;padding:var(--padding-vertical) calc(var(--padding-horizontal)/1.5 + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal)}.field-mask--select.--padding{padding-right:calc(var(--padding-horizontal)*1.5 + var(--arrow-size))}.field-mask-arrow{border-color:var(--border-color);border-style:var(--border-style);border-width:0 var(--border-width) var(--border-width) 0;bottom:calc(50% + var(--arrow-spacer));content:"";height:var(--arrow-size);position:absolute;right:calc(var(--padding-horizontal) + var(--arrow-spacer));transform:translateY(50%) rotate(45deg);width:var(--arrow-size)}.field-text{padding-right:var(--padding-horizontal)}.group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 calc(var(--margin-horizontal)/-2);position:relative;width:calc(100% + var(--margin-horizontal))}.group--offset-bottom{margin-bottom:calc(var(--margin-vertical)*-1)}.group--offset-top{margin-top:calc(var(--margin-vertical)*-1)}.group--scroller .group-item:first-child{margin-left:0}.group--scroller .group-item:last-child{margin-right:0}.group-item{display:flex;margin:var(--margin-vertical) calc(var(--margin-horizontal)/2) 0;position:relative;width:var(--width)}.group-item[class*="--width"]{width:calc(var(--width) - var(--margin-horizontal))}.icon{color:var(--color);display:flex;flex:0 0 var(--width);height:var(--height);pointer-events:none;position:relative;transform:rotate(var(--rotate));width:var(--width)}.icon svg{fill:currentColor;color:currentColor;height:100%;width:100%}.link{align-content:center;background:var(--background);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);justify-content:flex-start;line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;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)}.link--underline.--active,.link--underline:not(.--active):hover{text-decoration:underline}.loading{animation:loading var(--animation-duration) infinite linear;animation-delay:var(--animation-delay);border:var(--border-width) var(--border-style) var(--border-color);border-radius:100%;border-right-color:transparent;border-top-color:transparent;box-shadow:var(--box-shadow);height:var(--height);pointer-events:none;position:relative;transition:border-color var(--transition-duration) ease-in-out;width:var(--width);z-index:0}@keyframes loading{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.overlay{bottom:0;height:100vh;left:0;pointer-events:none;position:fixed;right:0;top:0;width:100vw;z-index:9}.page{min-height:var(--min-height);position:relative;width:var(--width)}.page-subtitle,.page-suptitle,.page-title{color:var(--color);display:block;line-height:var(--line-height);position:relative;width:100%;z-index:1}.page-subtitle,.page-suptitle{font-size:var(--font-size)}.processing{animation:processing var(--animation-duration) linear infinite;height:var(--size);position:relative;width:var(--size)}.processing-ring{clip:rect(calc(var(--size)/2),var(--size),var(--size),0)}.processing-ring,.processing-ring:after,.processing-ring:before{bottom:0;left:0;position:absolute;right:0;top:0}.processing-ring,.processing-ring:before{animation:processing calc(var(--animation-duration)/2) cubic-bezier(.77,0,.175,1) infinite}.processing-ring:after,.processing-ring:before{border-radius:50%;content:""}.processing-ring:after{border:var(--border-width) var(--border-style) var(--border-color-secondary);opacity:var(--opacity)}.processing-ring:before{border-top:var(--border-width) var(--border-style) var(--border-color-primary)}@keyframes processing{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}body,html{height:100%;overflow-x:hidden;width:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--background);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);min-width:var(--min-width);text-rendering:optimizeLegibility}*,:after,:before{box-sizing:border-box;transition:inherit}section{align-content:flex-start;display:flex;flex-wrap:wrap;justify-content:flex-start;position:relative;width:var(--width)}h1,h2,h3,h4,h5{word-wrap:break-word;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);margin:0;padding:0;position:relative;width:100%}h1 sub,h1 sup,h2 sub,h2 sup,h3 sub,h3 sup,h4 sub,h4 sup,h5 sub,h5 sup{font-size:.64em}a{cursor:pointer;outline:none;text-decoration:none}a,b,strong{color:var(--color,inherit)}b,strong{font-weight:var(--font-weight)}p{word-wrap:break-word}p,pre{margin:0;padding:0;width:100%}pre{overflow-wrap:break-word;white-space:break-spaces}sub,sup{font-size:.8em}sub{bottom:-.48em}sup{top:-.48em}.row{display:flex;flex-wrap:wrap;justify-content:flex-start;min-height:var(--min-height);position:relative;width:100%}::-webkit-scrollbar,::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:window-inactive,::-webkit-scrollbar-track{background:transparent;box-shadow:unset}.--scrollbar{height:100%;margin-right:calc(var(--scrollbar-width)*-1);overflow-x:hidden;overflow-y:scroll;scroll-behavior:smooth;width:calc(100% + var(--scrollbar-width))}.scrollbar{height:100%;z-index:9}.scrollbar,.scrollbar:before{position:absolute;right:0;top:0;transition:opacity var(--transition-duration) ease-in-out;width:var(--width)}.scrollbar:before{background:var(--background-default);border-radius:var(--border-radius);content:"";height:var(--height);transform:var(--translate);transform-origin:top center}.scrollbar--fixed{position:fixed}.scrollbar--hidden{opacity:0}.sidebar{bottom:var(--position-vertical);cursor:default;height:calc(100% - var(--position-vertical)*2);max-width:var(--width);overflow:hidden;pointer-events:auto;position:absolute;top:var(--position-vertical);transition:max-width var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:calc(100% - var(--position-horizontal)*2);z-index:1}.sidebar:not(.--active) input[type=password]{display:none}.sidebar--e{right:var(--position-horizontal)}.sidebar--e.sidebar--offscreen:not(.--active){transform:translateX(var(--width))}.sidebar--w{left:var(--position-horizontal)}.sidebar--w.sidebar--offscreen:not(.--active){transform:translateX(calc(var(--width)*-1))}.sidebar-content{flex:0 0 var(--width-default);width:var(--width-default)}.site{z-index:0}.text{align-items:center;color:var(--color);display:flex;flex-flow:wrap;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);transition:color var(--transition-duration) ease-in-out}.text,.thumbnail{position:relative;width:var(--width)}.thumbnail{background:var(--background);border-radius:var(--border-radius);height:var(--height)}.tooltip{cursor:pointer;position:relative;z-index:8}.tooltip.--active{z-index:9}.tooltip.--active.tooltip--box:before{bottom:50%;content:"";height:calc(100% + var(--spacer)*2.5);position:absolute;right:50%;transform:translate(50%,50%);width:calc(100% + var(--spacer)*2.5);z-index:-1}.tooltip.--active :not(.tooltip) .tooltip-arrow,.tooltip.--active>.tooltip-arrow{transform:rotate(-90deg)}.tooltip-arrow{margin:0 -1px;transform:rotate(90deg)}.tooltip-content,.tooltip-message{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);max-width:var(--max-width);min-width:var(--min-width);opacity:0;overflow:hidden;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:var(--width);z-index:9}.tooltip.--active :not(.tooltip)>.tooltip-content,.tooltip.--active :not(.tooltip)>.tooltip-message,.tooltip.--active>.tooltip-content,.tooltip.--active>.tooltip-message{opacity:1}.tooltip:not(.--active) :not(.tooltip)>.tooltip-content,.tooltip:not(.--active) :not(.tooltip)>.tooltip-content *,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message *,.tooltip:not(.--active)>.tooltip-content,.tooltip:not(.--active)>.tooltip-content *,.tooltip:not(.--active)>.tooltip-message,.tooltip:not(.--active)>.tooltip-message *{pointer-events:none}.tooltip-content--c,.tooltip-message--c{bottom:50%;position:absolute;right:50%;transform:translate(50%,50%) scale(var(--scaleX),var(--scaleY));transform-origin:center center}.tooltip.--active :not(.tooltip)>.tooltip-content--c,.tooltip.--active :not(.tooltip)>.tooltip-message--c,.tooltip.--active>.tooltip-content--c,.tooltip.--active>.tooltip-message--c{transform:translate(50%,50%) scale(1)}.tooltip-content--en,.tooltip-content--es,.tooltip-message--en,.tooltip-message--es{left:calc(100% - var(--spacer));position:absolute;transform:scale(var(--scaleX),var(--scaleY))}.tooltip.--active :not(.tooltip)>.tooltip-content--en,.tooltip.--active :not(.tooltip)>.tooltip-content--es,.tooltip.--active :not(.tooltip)>.tooltip-message--en,.tooltip.--active :not(.tooltip)>.tooltip-message--es,.tooltip.--active>.tooltip-content--en,.tooltip.--active>.tooltip-content--es,.tooltip.--active>.tooltip-message--en,.tooltip.--active>.tooltip-message--es{transform:translateX(calc(var(--spacer)*2))}.tooltip-content--e,.tooltip-message--e{bottom:50%;left:calc(100% - var(--spacer));position:absolute;transform:translateY(50%) scaleX(var(--scaleX));transform-origin:center left}.tooltip.--active :not(.tooltip)>.tooltip-content--e,.tooltip.--active :not(.tooltip)>.tooltip-message--e,.tooltip.--active>.tooltip-content--e,.tooltip.--active>.tooltip-message--e{transform:translate(calc(var(--spacer)*2),50%) scale(1)}.tooltip-content--en,.tooltip-message--en{top:0;transform-origin:top left}.tooltip-content--es,.tooltip-message--es{bottom:0;transform-origin:bottom left}.tooltip-content--ne,.tooltip-content--nw,.tooltip-message--ne,.tooltip-message--nw{bottom:calc(100% - var(--spacer));position:absolute;transform:scale(var(--scaleX),var(--scaleY))}.tooltip.--active :not(.tooltip)>.tooltip-content--ne,.tooltip.--active :not(.tooltip)>.tooltip-content--nw,.tooltip.--active :not(.tooltip)>.tooltip-message--ne,.tooltip.--active :not(.tooltip)>.tooltip-message--nw,.tooltip.--active>.tooltip-content--ne,.tooltip.--active>.tooltip-content--nw,.tooltip.--active>.tooltip-message--ne,.tooltip.--active>.tooltip-message--nw{transform:translateY(calc(var(--spacer)*-2))}.tooltip-content--n,.tooltip-message--n{bottom:calc(100% - var(--spacer));position:absolute;right:50%;transform:translateX(50%) scaleY(var(--scaleY));transform-origin:center bottom}.tooltip.--active :not(.tooltip)>.tooltip-content--n,.tooltip.--active :not(.tooltip)>.tooltip-message--n,.tooltip.--active>.tooltip-content--n,.tooltip.--active>.tooltip-message--n{transform:translate(50%,calc(var(--spacer)*-2)) scale(1)}.tooltip-content--ne,.tooltip-message--ne{right:0;transform-origin:bottom right}.tooltip-content--nw,.tooltip-message--nw{left:0;transform-origin:bottom left}.tooltip-content--se,.tooltip-content--sw,.tooltip-message--se,.tooltip-message--sw{position:absolute;top:calc(100% - var(--spacer));transform:scale(var(--scaleX),var(--scaleY))}.tooltip.--active :not(.tooltip)>.tooltip-content--se,.tooltip.--active :not(.tooltip)>.tooltip-content--sw,.tooltip.--active :not(.tooltip)>.tooltip-message--se,.tooltip.--active :not(.tooltip)>.tooltip-message--sw,.tooltip.--active>.tooltip-content--se,.tooltip.--active>.tooltip-content--sw,.tooltip.--active>.tooltip-message--se,.tooltip.--active>.tooltip-message--sw{transform:translateY(calc(var(--spacer)*2))}.tooltip-content--s,.tooltip-message--s{position:absolute;right:50%;top:calc(100% - var(--spacer));transform:translateX(50%) scaleY(var(--scaleY));transform-origin:center top}.tooltip.--active :not(.tooltip)>.tooltip-content--s,.tooltip.--active :not(.tooltip)>.tooltip-message--s,.tooltip.--active>.tooltip-content--s,.tooltip.--active>.tooltip-message--s{transform:translate(50%,calc(var(--spacer)*2)) scale(1)}.tooltip-content--se,.tooltip-message--se{right:0;transform-origin:top right}.tooltip-content--sw,.tooltip-message--sw{left:0;transform-origin:top left}.tooltip-content--wn,.tooltip-content--ws,.tooltip-message--wn,.tooltip-message--ws{position:absolute;right:calc(100% - var(--spacer));transform:scale(var(--scale))}.tooltip.--active :not(.tooltip)>.tooltip-content--wn,.tooltip.--active :not(.tooltip)>.tooltip-content--ws,.tooltip.--active :not(.tooltip)>.tooltip-message--wn,.tooltip.--active :not(.tooltip)>.tooltip-message--ws,.tooltip.--active>.tooltip-content--wn,.tooltip.--active>.tooltip-content--ws,.tooltip.--active>.tooltip-message--wn,.tooltip.--active>.tooltip-message--ws{transform:translateX(calc(var(--spacer)*-2))}.tooltip-content--w,.tooltip-message--w{bottom:50%;position:absolute;right:calc(100% - var(--spacer));transform:translateY(50%) scaleX(var(--scaleX));transform-origin:center right}.tooltip.--active :not(.tooltip)>.tooltip-content--w,.tooltip.--active :not(.tooltip)>.tooltip-message--w,.tooltip.--active>.tooltip-content--w,.tooltip.--active>.tooltip-message--w{transform:translate(calc(var(--spacer)*-2),50%) scale(1)}.tooltip-content--wn,.tooltip-message--wn{top:0;transform-origin:top right}.tooltip-content--ws,.tooltip-message--ws{bottom:0;transform-origin:bottom right}.tooltip-message{background:var(--background);color:var(--color);cursor:auto;font-size:var(--font-size);font-weight:var(--font-weight);line-height:normal;padding:var(--padding-vertical) var(--padding-horizontal);pointer-events:none;white-space:nowrap}

package/css/components/variables.css

@@ -1 +1 @@
-.accordion{--max-height:0;--transition-duration:var(--transition-duration-400)}.alert{--width:480px}.alert-close,.alert-message{--transition-duration:var(--transition-duration-400)}.alert-timer{--animation-duration:5s;--background:var(--color-black-400);--border-width:var(--border-width-700);--height:var(--size-600);--width:var(--size-600)}.alert-timer-bg{--border-color:var(--color-grey-500)}.alert-timer-meter{--border-color:var(--color-black-300)}.anchor{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);--transition-duration:var(--transition-duration-400)}.border{--border-color:var(--border-color-default);--border-color-default:var(--color-border-400);--border-style:solid;--border-width:var(--border-width-400)}.bubble{--background:var(--background-default);--background-default:var(--color-border-400);--border-radius:var(--border-radius-circle);--height:var(--size);--margin-horizontal:var(--size-100);--width:var(--size);--size:6px}.bubble--bottom-left,.bubble--bottom-right,.bubble--top-left,.bubble--top-right{--position-horizontal:calc(var(--size)/-2);--position-vertical:calc(var(--size)/-2)}.button{--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;--box-shadow:var(--box-shadow-default);--box-shadow-active:var(--box-shadow-300);--box-shadow-default:none;--box-shadow-hover:var(--box-shadow-400);--box-shadow-pressed:none;--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-400);--line-height:var(--line-height-400);--min-width:auto;--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--transition-duration:var(--transition-duration-400);--width:auto}.button.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.button:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.button:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.button--processing{--animation-duration:0.64s;--border-color:var(--color);--border-width:var(--border-width-400);--size:var(--size-400)}.button--processing-400{--border-width:var(--border-width-400)}.button--processing-500{--border-width:var(--border-width-500)}.button--processing-600{--border-width:var(--border-width-600)}.button--processing-700{--border-width:var(--border-width-700)}.card{--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);--box-shadow:var(--box-shadow-default);--box-shadow-active:var(--box-shadow-300);--box-shadow-default:none;--box-shadow-hover:var(--box-shadow-300);--box-shadow-pressed:none;--padding-horizontal:0px;--padding-vertical:0px;--transition-duration:var(--transition-duration-400);--width:auto}.card.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active)}.card:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover)}.card:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed)}.container{--max-width:1400px;--padding-horizontal:var(--size-600);--padding-vertical:0px}.ellipsis{--animation-duration:2s}.field{--transition-duration:var(--transition-duration-400);--width:100%}.field--optional{--max-height:0;--max-height-active:0}.field.--active .field--optional{--max-height:var(--max-height-active)}.field-description,.field-error{--font-size:var(--font-size-300)}.field-error{--color:var(--color-red-400)}.field-mask{--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-default:var(--background);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-active:var(--box-shadow-400);--box-shadow-default:var(--box-shadow-300);--box-shadow-hover:var(--box-shadow-400);--box-shadow-pressed:none;--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);--outline-opacity:var(--outline-opacity-default);--outline-opacity-active:0.32;--outline-opacity-default:0;--outline-opacity-hover:0;--outline-opacity-pressed:0;--outline-spacing:0px;--outline-width:var(--outline-width-default);--outline-width-active:4px;--outline-width-default:0px;--outline-width-hover:0px;--outline-width-pressed:0px;--padding-horizontal:0px;--padding-vertical:var(--size-400)}.field.--active :not(.field) .field-mask,.field.--active>.field-mask{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active);--outline-opacity:var(--outline-opacity-active);--outline-width:var(--outline-width-active)}.field:not(.--active):not(label) .field-mask:not(.--active):hover,label.field:not(.--active):not(.--active):hover>.field-mask{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--outline-opacity:var(--outline-opacity-hover);--outline-width:var(--outline-width-hover)}.field:not(.--active):not(label) .field-mask:not(.--active):active,label.field:not(.--active):not(.--active):active>.field-mask{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--outline-opacity:var(--outline-opacity-pressed);--outline-width:var(--outline-width-pressed)}.field-mask--outline:not(.--active):active{--border-color:var(--border-color-default)}.field-mask--outline:not(.--active):active:before{--outline-width:0px}.field-required{--border-radius:var(--border-radius-circle);--size:6px}.field-title{--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)}.field.--active .field-title{--color:var(--color-active)}.field:not(.--active):hover .field-title{--color:var(--color-hover)}.field:not(.--active):active .field-title{--color:var(--color-pressed)}.field label.field:not(.--active):hover,.field:not(label):not(.--active) .field-mask:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--outline-opacity:var(--outline-opacity-hover);--outline-width:var(--outline-width-hover)}.field label.field:not(.--active):active,.field:not(label):not(.--active) .field-mask:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--outline-opacity:var(--outline-opacity-pressed);--outline-width:var(--outline-width-pressed)}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{--accent:var(--accent-default);--accent-active:var(--accent-default);--accent-default:var(--color-white-400);--accent-hover:var(--accent-default);--accent-pressed:var(--accent-default);--height:var(--size);--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:0deg;--scale:var(--scale-default);--scale-active:var(--scale-default);--scale-default:1;--scale-hover:var(--scale-default);--scale-pressed:var(--scale-default);--size:var(--size-600);--width-switch:40px}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{--translateX:0px;--translateY:0px}.field-mask--checkbox label.field:not(.--active):not(.--active):hover,.field-mask--radio label.field:not(.--active):not(.--active):hover,.field-mask--switch label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):hover,.field:not(label):not(.--active) .field-mask--radio:not(.--active):hover,.field:not(label):not(.--active) .field-mask--switch:not(.--active):hover{--accent:var(--accent-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.field-mask--checkbox label.field:not(.--active):not(.--active):active,.field-mask--radio label.field:not(.--active):not(.--active):active,.field-mask--switch label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):active,.field:not(label):not(.--active) .field-mask--radio:not(.--active):active,.field:not(label):not(.--active) .field-mask--switch:not(.--active):active{--accent:var(--accent-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.field.--active .field-mask--checkbox,.field.--active .field-mask--radio,.field.--active .field-mask--switch{--accent:var(--accent-active);--opacity:var(--opacity-active);--scale:var(--scale-active)}.field-mask--checkbox,.field-mask--radio{--margin-horizontal:calc(var(--width-switch) - var(--width));--width:var(--height)}.field-mask--radio:before,.field-mask--switch:before{--box-shadow:0 1px 0 rgba(0,0,0,.16)}.field-mask--checkbox{--border-radius:var(--border-radius-300);--rotate:45deg;--scale-active:1;--scale-default:0;--scale-hover:1.08;--scale-pressed:0.98}.field-mask--checkbox:before{--box-shadow:1px 1px 0 rgba(0,0,0,.16);--border-width:5px;--height:110%;--translateX:108%;--translateY:8%;--width:50%}.field:not(.--active):not(:hover) .field-mask--checkbox:before{--translateY:100%}.field-mask--radio{--border-radius:var(--border-radius-circle);--opacity-active:1;--opacity-default:0.4;--scale-active:0.9;--scale-default:0;--scale-hover:0.8;--scale-pressed:0.7}.field-mask--radio:before{--height:calc(var(--size)/2 - var(--border-width)*2);--translateX:50%;--translateY:50%;--width:var(--height)}.field-mask--switch{--border-radius:var(--border-radius-curved);--padding-horizontal:var(--border-width-400);--padding-vertical:var(--border-width-400);--width:var(--width-switch)}.field-mask--switch:before{--height:calc(var(--size) - var(--border-width)*2 - var(--padding-vertical)*2);--width:var(--height)}.field.--active .field-mask--switch:before{--translateX:calc(var(--width-switch) - var(--border-width)*2 - var(--height) - var(--padding-horizontal)*2)}.field-mask--input,.field-mask--select{--font-size:var(--font-size-400);--line-height:var(--line-height-400)}.field-mask--input{--size:var(--size-400)}.field-mask--select{--arrow-spacer:1px;--arrow-size:6px}.field-mask-arrow{--border-width:var(--border-width-500)}.group{--margin-horizontal:var(--size-400);--width:auto}.group--column{--margin-horizontal:0px}.group--column>.group-item{--margin-horizontal:0px;--width:100%}.group--scroller{--margin-horizontal:0px}.group--scroller .group-item{--margin-vertical:0px}.icon{--color:inherit;--height:var(--size);--margin-horizontal:var(--size-300);--rotate:0deg;--size:var(--size-400);--width:var(--size)}.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:var(--size-400);--padding-vertical:var(--size-400);--transition-duration:var(--transition-duration-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)}.loading{--animation-delay:calc(0.032s*var(--i));--animation-duration:calc(0.64s*(var(--i) + 1.5));--border-color:inherit;--border-style:solid;--border-width:var(--border-width-400);--box-shadow:none;--height:calc(var(--size)*var(--multiplier));--i:0;--multiplier:calc(1 - var(--i)*0.2);--size:var(--size-400);--transition-duration:var(--transition-duration-400);--width:calc(var(--size)*var(--multiplier))}.loading .loading{--i:1;--size:inherit}.loading .loading .loading{--i:2}.loading .loading .loading .loading{--i:3}.loading .loading .loading .loading .loading{--i:4}.page{--min-height:100vh;--width:100vw}.page-subtitle,.page-suptitle{--color:var(--color-default);--color-default:var(--color-text-400);--font-size:var(--font-size-400);--line-height:var(--line-height-400)}.page-title{--color:var(--color-default);--color-default:var(--color-text-500);--line-height:var(--line-height-400)}.processing{--animation-duration:2.64s;--border-color-primary:var(--color-black-500);--border-color-secondary:var(--color-border-300);--border-style:solid;--border-width:var(--border-width-600);--height:var(--size);--opacity:0.64;--size:var(--size-600);--width:var(--size)}body{--border-radius-0px:0px;--border-radius-circle:100%;--border-radius-curved:240px;--border-radius-100:2px;--border-radius-200:4px;--border-radius-300:6px;--border-radius-400:8px;--border-radius-500:12px;--border-radius-600:16px;--box-shadow-300:0px 8px 16px -4px rgba(0,3,19,.016),0px 4px 8px -2px rgba(0,3,19,.008);--box-shadow-400:0px 16px 24px -4px rgba(0,3,19,.048),0px 8px 8px -4px rgba(0,3,19,.024);--box-shadow-500:0px 16px 32px -8px rgba(0,3,19,.16);--border-width-400:1px;--border-width-500:2px;--border-width-600:3px;--border-width-700:4px;--color-black-300:#0f1325;--color-black-400:#04081a;--color-black-500:#000313;--color-blue-300:#3453ff;--color-blue-400:#2a4bff;--color-blue-500:#2343f8;--color-border-300:#c4c9df;--color-border-400:#b4b9d2;--color-border-500:#a5a9c3;--color-green-300:#5fff81;--color-green-400:#2aff57;--color-green-500:#23f850;--color-grey-300:#f2f9ff;--color-grey-400:#e7f1fa;--color-grey-500:#dde8f0;--color-purple-300:#6634ff;--color-purple-400:#5e2aff;--color-purple-500:#5723f8;--color-red-300:#ff3446;--color-red-400:#ff2a3d;--color-red-500:#f82336;--color-text-300:#676c84;--color-text-400:#393d57;--color-text-500:#1f2542;--color-white-300:#fff;--color-white-400:#fff;--color-white-500:#fff;--color-yellow-300:#fff95f;--color-yellow-400:#fff92a;--color-yellow-500:#f8f123;--font-size-100:8px;--font-size-200:10px;--font-size-300:12px;--font-size-400:14px;--font-size-500:16px;--font-size-600:24px;--font-size-700:32px;--font-size-800:40px;--font-weight-300:400;--font-weight-400:500;--font-weight-500:600;--font-weight-600:700;--line-height-100:1;--line-height-200:1.2;--line-height-300:1.4;--line-height-400:1.6;--size-0px:0px;--size-100:4px;--size-200:8px;--size-300:12px;--size-400:16px;--size-500:20px;--size-600:24px;--size-700:32px;--size-800:40px;--size-900:48px;--transition-duration-300:0.08s;--transition-duration-400:0.16s;--transition-duration-500:0.24s;--background:var(--color-grey-400);--color:var(--color-text-400);--font-family:"Montserrat",sans-serif;--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--min-width:320px;--scrollbar-width:17px}section{--width:100%}h1,h2,h3,h4,h5{--color:var(--color-text-400);--font-weight:var(--font-weight-600);--line-height:var(--line-height-300)}h1{--font-size:var(--font-size-800)}h2{--font-size:var(--font-size-700)}h3{--font-size:var(--font-size-600)}h4{--font-size:var(--font-size-500)}h5{--font-size:var(--font-size-400)}b,strong{--color:var(--color-text-400);--font-weight:var(--font-weight-500)}.row{--min-height:auto}.scrollbar{--background-default:transparent;--border-radius:1px 0 0 1px;--height:0;--transition-duration:var(--transition-duration-400);--translate:translate3d(0,0,0);--width:var(--size-100)}.sidebar{--position-horizontal:0px;--position-vertical:0px;--transition-duration:var(--transition-duration-400);--width:var(--width-default);--width-closed:var(--width-default);--width-default:400px}.sidebar:not(.--active):not(:hover){--width:var(--width-closed)}.sidebar--floating{--position-horizontal:var(--size-100);--position-vertical:var(--size-100)}.text{--color:var(--color-default);--color-default:inherit;--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--transition-duration:var(--transition-duration-400);--width:auto}.thumbnail{--background:transparent;--border-radius:var(--border-radius-300);--height:var(--size);--size:var(--size-700);--width:var(--size)}.tooltip-content,.tooltip-message{--background:var(--background-default);--background-default:transparent;--border-radius:var(--border-radius-300);--box-shadow:var(--box-shadow-400);--max-width:calc(90vw - var(--size-700)*2);--min-width:auto;--scaleX:0.64;--scaleY:0.64;--spacer:var(--size-300);--transition-duration:var(--transition-duration-300);--width:auto}.tooltip-message{--background-default:var(--color-black-400);--color:var(--color-white-400);--font-size:var(--font-size-300);--font-weight:var(--font-weight-400);--padding-horizontal:var(--size-300);--padding-vertical:var(--size-300)}
+.accordion{--max-height:0;--transition-duration:var(--transition-duration-400)}.alert{--width:480px}.alert-close,.alert-message{--transition-duration:var(--transition-duration-400)}.anchor{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);--transition-duration:var(--transition-duration-400)}.border{--border-color:var(--border-color-default);--border-color-default:var(--color-border-400);--border-style:solid;--border-width:var(--border-width-400)}.bubble{--background:var(--background-default);--background-default:var(--color-border-400);--border-radius:var(--border-radius-circle);--height:var(--size);--margin-horizontal:var(--size-100);--width:var(--size);--size:6px}.bubble--bottom-left,.bubble--bottom-right,.bubble--top-left,.bubble--top-right{--position-horizontal:calc(var(--size)/-2);--position-vertical:calc(var(--size)/-2)}.button{--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;--box-shadow:var(--box-shadow-default);--box-shadow-active:var(--box-shadow-300);--box-shadow-default:none;--box-shadow-hover:var(--box-shadow-400);--box-shadow-pressed:none;--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-400);--line-height:var(--line-height-400);--min-width:auto;--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--transition-duration:var(--transition-duration-400);--width:auto}.button.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.button:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.button:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.button--processing{--animation-duration:0.64s;--border-color:var(--color);--border-width:var(--border-width-400);--size:var(--size-400)}.button--processing-400{--border-width:var(--border-width-400)}.button--processing-500{--border-width:var(--border-width-500)}.button--processing-600{--border-width:var(--border-width-600)}.button--processing-700{--border-width:var(--border-width-700)}.card{--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);--box-shadow:var(--box-shadow-default);--box-shadow-active:var(--box-shadow-300);--box-shadow-default:none;--box-shadow-hover:var(--box-shadow-300);--box-shadow-pressed:none;--padding-horizontal:0px;--padding-vertical:0px;--transition-duration:var(--transition-duration-400);--width:auto}.card.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active)}.card:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover)}.card:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed)}.container{--max-width:1400px;--padding-horizontal:var(--size-600);--padding-vertical:0px}.ellipsis{--animation-duration:2s}.field{--transition-duration:var(--transition-duration-400);--width:100%}.field--optional{--max-height:0;--max-height-active:0}.field.--active .field--optional{--max-height:var(--max-height-active)}.field-description,.field-error{--font-size:var(--font-size-300)}.field-error{--color:var(--color-red-400)}.field-mask{--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-default:var(--background);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-active:var(--box-shadow-400);--box-shadow-default:var(--box-shadow-300);--box-shadow-hover:var(--box-shadow-400);--box-shadow-pressed:none;--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);--outline-opacity:var(--outline-opacity-default);--outline-opacity-active:0.32;--outline-opacity-default:0;--outline-opacity-hover:0;--outline-opacity-pressed:0;--outline-spacing:0px;--outline-width:var(--outline-width-default);--outline-width-active:4px;--outline-width-default:0px;--outline-width-hover:0px;--outline-width-pressed:0px;--padding-horizontal:0px;--padding-vertical:var(--size-400)}.field.--active :not(.field) .field-mask,.field.--active>.field-mask{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active);--outline-opacity:var(--outline-opacity-active);--outline-width:var(--outline-width-active)}.field:not(.--active):not(label) .field-mask:not(.--active):hover,label.field:not(.--active):not(.--active):hover>.field-mask{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--outline-opacity:var(--outline-opacity-hover);--outline-width:var(--outline-width-hover)}.field:not(.--active):not(label) .field-mask:not(.--active):active,label.field:not(.--active):not(.--active):active>.field-mask{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--outline-opacity:var(--outline-opacity-pressed);--outline-width:var(--outline-width-pressed)}.field-mask--outline:not(.--active):active{--border-color:var(--border-color-default)}.field-mask--outline:not(.--active):active:before{--outline-width:0px}.field-required{--border-radius:var(--border-radius-circle);--size:6px}.field-title{--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)}.field.--active .field-title{--color:var(--color-active)}.field:not(.--active):hover .field-title{--color:var(--color-hover)}.field:not(.--active):active .field-title{--color:var(--color-pressed)}.field label.field:not(.--active):hover,.field:not(label):not(.--active) .field-mask:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--outline-opacity:var(--outline-opacity-hover);--outline-width:var(--outline-width-hover)}.field label.field:not(.--active):active,.field:not(label):not(.--active) .field-mask:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--outline-opacity:var(--outline-opacity-pressed);--outline-width:var(--outline-width-pressed)}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{--accent:var(--accent-default);--accent-active:var(--accent-default);--accent-default:var(--color-white-400);--accent-hover:var(--accent-default);--accent-pressed:var(--accent-default);--height:var(--size);--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:0deg;--scale:var(--scale-default);--scale-active:var(--scale-default);--scale-default:1;--scale-hover:var(--scale-default);--scale-pressed:var(--scale-default);--size:var(--size-600);--width-switch:40px}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{--translateX:0px;--translateY:0px}.field-mask--checkbox label.field:not(.--active):not(.--active):hover,.field-mask--radio label.field:not(.--active):not(.--active):hover,.field-mask--switch label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):hover,.field:not(label):not(.--active) .field-mask--radio:not(.--active):hover,.field:not(label):not(.--active) .field-mask--switch:not(.--active):hover{--accent:var(--accent-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.field-mask--checkbox label.field:not(.--active):not(.--active):active,.field-mask--radio label.field:not(.--active):not(.--active):active,.field-mask--switch label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):active,.field:not(label):not(.--active) .field-mask--radio:not(.--active):active,.field:not(label):not(.--active) .field-mask--switch:not(.--active):active{--accent:var(--accent-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.field.--active .field-mask--checkbox,.field.--active .field-mask--radio,.field.--active .field-mask--switch{--accent:var(--accent-active);--opacity:var(--opacity-active);--scale:var(--scale-active)}.field-mask--checkbox,.field-mask--radio{--margin-horizontal:calc(var(--width-switch) - var(--width));--width:var(--height)}.field-mask--radio:before,.field-mask--switch:before{--box-shadow:0 1px 0 rgba(0,0,0,.16)}.field-mask--checkbox{--border-radius:var(--border-radius-300);--rotate:45deg;--scale-active:1;--scale-default:0;--scale-hover:1.08;--scale-pressed:0.98}.field-mask--checkbox:before{--box-shadow:1px 1px 0 rgba(0,0,0,.16);--border-width:5px;--height:110%;--translateX:108%;--translateY:8%;--width:50%}.field:not(.--active):not(:hover) .field-mask--checkbox:before{--translateY:100%}.field-mask--radio{--border-radius:var(--border-radius-circle);--opacity-active:1;--opacity-default:0.4;--scale-active:0.9;--scale-default:0;--scale-hover:0.8;--scale-pressed:0.7}.field-mask--radio:before{--height:calc(var(--size)/2 - var(--border-width)*2);--translateX:50%;--translateY:50%;--width:var(--height)}.field-mask--switch{--border-radius:var(--border-radius-curved);--padding-horizontal:var(--border-width-400);--padding-vertical:var(--border-width-400);--width:var(--width-switch)}.field-mask--switch:before{--height:calc(var(--size) - var(--border-width)*2 - var(--padding-vertical)*2);--width:var(--height)}.field.--active .field-mask--switch:before{--translateX:calc(var(--width-switch) - var(--border-width)*2 - var(--height) - var(--padding-horizontal)*2)}.field-mask--input,.field-mask--select{--font-size:var(--font-size-400);--line-height:var(--line-height-400)}.field-mask--input{--size:var(--size-400)}.field-mask--select{--arrow-spacer:1px;--arrow-size:6px}.field-mask-arrow{--border-width:var(--border-width-500)}.group{--margin-horizontal:var(--size-400);--width:auto}.group--column{--margin-horizontal:0px}.group--column>.group-item{--margin-horizontal:0px;--width:100%}.group--scroller{--margin-horizontal:0px}.group--scroller .group-item{--margin-vertical:0px}.icon{--color:inherit;--height:var(--size);--margin-horizontal:var(--size-300);--rotate:0deg;--size:var(--size-400);--width:var(--size)}.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:var(--size-400);--padding-vertical:var(--size-400);--transition-duration:var(--transition-duration-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)}.loading{--animation-delay:calc(0.032s*var(--i));--animation-duration:calc(0.64s*(var(--i) + 1.5));--border-color:inherit;--border-style:solid;--border-width:var(--border-width-400);--box-shadow:none;--height:calc(var(--size)*var(--multiplier));--i:0;--multiplier:calc(1 - var(--i)*0.2);--size:var(--size-400);--transition-duration:var(--transition-duration-400);--width:calc(var(--size)*var(--multiplier))}.loading .loading{--i:1;--size:inherit}.loading .loading .loading{--i:2}.loading .loading .loading .loading{--i:3}.loading .loading .loading .loading .loading{--i:4}.page{--min-height:100vh;--width:100vw}.page-subtitle,.page-suptitle{--color:var(--color-default);--color-default:var(--color-text-400);--font-size:var(--font-size-400);--line-height:var(--line-height-400)}.page-title{--color:var(--color-default);--color-default:var(--color-text-500);--line-height:var(--line-height-400)}.processing{--animation-duration:2.64s;--border-color-primary:var(--color-black-500);--border-color-secondary:var(--color-border-300);--border-style:solid;--border-width:var(--border-width-600);--height:var(--size);--opacity:0.64;--size:var(--size-600);--width:var(--size)}body{--border-radius-0px:0px;--border-radius-circle:100%;--border-radius-curved:240px;--border-radius-100:2px;--border-radius-200:4px;--border-radius-300:6px;--border-radius-400:8px;--border-radius-500:12px;--border-radius-600:16px;--box-shadow-300:0px 8px 16px -4px rgba(0,3,19,.016),0px 4px 8px -2px rgba(0,3,19,.008);--box-shadow-400:0px 16px 24px -4px rgba(0,3,19,.048),0px 8px 8px -4px rgba(0,3,19,.024);--box-shadow-500:0px 16px 32px -8px rgba(0,3,19,.16);--border-width-400:1px;--border-width-500:2px;--border-width-600:3px;--border-width-700:4px;--color-black-300:#0f1325;--color-black-400:#04081a;--color-black-500:#000313;--color-blue-300:#3453ff;--color-blue-400:#2a4bff;--color-blue-500:#2343f8;--color-border-300:#c4c9df;--color-border-400:#b4b9d2;--color-border-500:#a5a9c3;--color-green-300:#5fff81;--color-green-400:#2aff57;--color-green-500:#23f850;--color-grey-300:#f2f9ff;--color-grey-400:#e7f1fa;--color-grey-500:#dde8f0;--color-purple-300:#6634ff;--color-purple-400:#5e2aff;--color-purple-500:#5723f8;--color-red-300:#ff3446;--color-red-400:#ff2a3d;--color-red-500:#f82336;--color-text-300:#676c84;--color-text-400:#393d57;--color-text-500:#1f2542;--color-white-300:#fff;--color-white-400:#fff;--color-white-500:#fff;--color-yellow-300:#fff95f;--color-yellow-400:#fff92a;--color-yellow-500:#f8f123;--font-size-100:8px;--font-size-200:10px;--font-size-300:12px;--font-size-400:14px;--font-size-500:16px;--font-size-600:24px;--font-size-700:32px;--font-size-800:40px;--font-weight-300:400;--font-weight-400:500;--font-weight-500:600;--font-weight-600:700;--line-height-100:1;--line-height-200:1.2;--line-height-300:1.4;--line-height-400:1.6;--size-0px:0px;--size-100:4px;--size-200:8px;--size-300:12px;--size-400:16px;--size-500:20px;--size-600:24px;--size-700:32px;--size-800:40px;--size-900:48px;--transition-duration-300:0.08s;--transition-duration-400:0.16s;--transition-duration-500:0.24s;--background:var(--color-grey-400);--color:var(--color-text-400);--font-family:"Montserrat",sans-serif;--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--min-width:320px;--scrollbar-width:17px}section{--width:100%}h1,h2,h3,h4,h5{--color:var(--color-text-400);--font-weight:var(--font-weight-600);--line-height:var(--line-height-300)}h1{--font-size:var(--font-size-800)}h2{--font-size:var(--font-size-700)}h3{--font-size:var(--font-size-600)}h4{--font-size:var(--font-size-500)}h5{--font-size:var(--font-size-400)}b,strong{--color:var(--color-text-400);--font-weight:var(--font-weight-500)}.row{--min-height:auto}.scrollbar{--background-default:transparent;--border-radius:1px 0 0 1px;--height:0;--transition-duration:var(--transition-duration-400);--translate:translate3d(0,0,0);--width:var(--size-100)}.sidebar{--position-horizontal:0px;--position-vertical:0px;--transition-duration:var(--transition-duration-400);--width:var(--width-default);--width-closed:var(--width-default);--width-default:400px}.sidebar:not(.--active):not(:hover){--width:var(--width-closed)}.sidebar--floating{--position-horizontal:var(--size-100);--position-vertical:var(--size-100)}.text{--color:var(--color-default);--color-default:inherit;--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--transition-duration:var(--transition-duration-400);--width:auto}.thumbnail{--background:transparent;--border-radius:var(--border-radius-300);--height:var(--size);--size:var(--size-700);--width:var(--size)}.tooltip-content,.tooltip-message{--background:var(--background-default);--background-default:transparent;--border-radius:var(--border-radius-300);--box-shadow:var(--box-shadow-400);--max-width:calc(90vw - var(--size-700)*2);--min-width:auto;--scaleX:0.64;--scaleY:0.64;--spacer:var(--size-300);--transition-duration:var(--transition-duration-300);--width:auto}.tooltip-message{--background-default:var(--color-black-400);--color:var(--color-white-400);--font-size:var(--font-size-300);--font-weight:var(--font-weight-400);--padding-horizontal:var(--size-300);--padding-vertical:var(--size-300)}

package/package.json

@@ -22,5 +22,5 @@
         "prepublishOnly": "npm run build"
     },
     "types": "build/index.d.ts",
-    "version": "0.0.66"
+    "version": "0.0.68"
 }

package/src/components/alert/index.ts

@@ -13,7 +13,6 @@ let modifiers: Record<Type, string> = {
     state = reactive({
         active: false,
         messages: new Set as Set<string>,
-        processing: false,
         seconds: 0,
         state: 'activating',
         type: '' as Type
@@ -42,7 +41,6 @@ function activate(key: Type, messages: string | string[], seconds: number = 0) {
     // Slide in animation needs time
     if (state.active) {
         state.active = true;
-        state.processing = false;
 
         if (seconds) {
             if (!state.seconds) {
@@ -70,7 +68,6 @@ function activate(key: Type, messages: string | string[], seconds: number = 0) {
 
     setTimeout(() => {
         state.active = true;
-        state.processing = false;
 
         if (seconds) {
             if (!state.seconds) {
@@ -102,7 +99,6 @@ function deactivate() {
     setTimeout(() => {
         state.active = false;
         state.messages.clear();
-        state.processing = false;
     }, timeout);
 }
 
@@ -111,37 +107,25 @@ const error = (messages: string | string[], seconds: number = 0) => activate('er
 
 const info = (messages: string | string[], seconds: number = 0) => activate('info', messages, seconds);
 
-const processing = () => {
-    state.state = 'activating';
-    state.processing = true;
-
-    // Slide in animation needs time
-    setTimeout(() => {
-        state.active = true;
-    }, timeout);
-};
-
 const success = (messages: string | string[], seconds: number = 0) => activate('success', messages, seconds);
 
 
 const h = () => {
-    return () => state.active || state.processing ? html`
+    return () => state.active ? html`
         <div class='alert anchor anchor--ne ${() => state.active && '--active'} ${() => `alert--${state.state}`}'>
-            ${() => !state.processing ? html`
-                <div class="alert-close --flex-start --margin-right --margin-100" onclick='${deactivate}'>
-                    <div class='button --background-state ${() => `--background-${modifiers[state.type] || 'black'}`} --color-state --color-white --flex-center --padding-300'>
-                        <div class="icon --size-300">
-                            <svg width="16" height="16" viewBox="0 0 16 16">
-                                <path d="M3.527 14.948a.176.176 0 01-.248 0L1.051 12.72a.176.176 0 010-.248l11.42-11.419a.176.176 0 01.248 0l2.229 2.228a.174.174 0 010 .248L3.527 14.948z"/>
-                                <path d="M12.472 14.948c.068.068.18.068.248 0l2.229-2.229a.176.176 0 000-.248L3.528 1.052a.176.176 0 00-.248 0L1.052 3.28a.176.176 0 000 .248l11.42 11.42z"/>
-                            </svg>
-                        </div>
+            <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">
+                        <svg width="16" height="16" viewBox="0 0 16 16">
+                            <path d="M3.527 14.948a.176.176 0 01-.248 0L1.051 12.72a.176.176 0 010-.248l11.42-11.419a.176.176 0 01.248 0l2.229 2.228a.174.174 0 010 .248L3.527 14.948z"/>
+                            <path d="M12.472 14.948c.068.068.18.068.248 0l2.229-2.229a.176.176 0 000-.248L3.528 1.052a.176.176 0 00-.248 0L1.052 3.28a.176.176 0 000 .248l11.42 11.42z"/>
+                        </svg>
                     </div>
                 </div>
-            ` : ''}
+            </div>
 
             <div class="card --overflow-hidden" style='--background: var(--color-white-400)'>
-                <div class="alert-message ${() => !state.processing && '--active'} --flex-row --padding --padding-horizontal-500 --padding-vertical-400">
+                <div class="alert-message --active --flex-row --padding --padding-horizontal-500 --padding-vertical-400">
                     <div class='--flex-row --flex-fill --flex-vertical'>
                         <div class="--flex-fill --flex-column --padding-right --padding-400">
                             <h5 class="page-title">
@@ -151,28 +135,6 @@ const h = () => {
                                 <p class='--margin-top --margin-border-width-500'>${message}</p>
                             `)}
                         </div>
-
-                        ${() => !state.processing && state.seconds ? html`
-                            <svg class='alert-timer' style='--animation-duration: ${state.seconds}s;'>
-                                <circle class="alert-timer-bg" cx="50%" cy="50%" r="40%" style='--border-color: var(--color-grey-500);' />
-                                <circle class="alert-timer-meter" cx="50%" cy="50%" r="40%" style='--border-color: var(--color-black-300);' />
-                            </svg>
-                        ` : ''}
-                    </div>
-                </div>
-
-                <div class='alert-processing ${() => state.processing && '--active'} --flex-row --flex-vertical --padding --padding-500'>
-                    <div class="processing">
-                        <span class='processing-ring'></span>
-                    </div>
-                    <div class='text --flex-fill --margin-left --margin-300 --text-bold' style='--color: var(--color-text-500)'>
-                        Processing
-
-                        <div class='ellipsis'>
-                            <span class='ellipsis-dot --margin-left --margin-border-width'>.</span>
-                            <span class='ellipsis-dot --margin-left --margin-border-width'>.</span>
-                            <span class='ellipsis-dot --margin-left --margin-border-width'>.</span>
-                        </div>
                     </div>
                 </div>
             </div>
@@ -183,4 +145,4 @@ const h = () => {
 const types = ['error', 'info', 'success'] as const;
 
 
-export default { deactivate, error, html: h, info, processing, success, types };
+export default { deactivate, error, html: h, info, success, types };

package/src/components/alert/scss/index.scss

@@ -52,28 +52,6 @@
             opacity: 1;
         }
     }
-
-    &-timer {
-        height: var(--height);
-        transition: opacity var(--transition-duration) ease-in-out;
-        width: var(--width);
-
-        &-bg,
-        &-meter {
-            fill: none;
-            stroke-width: var(--border-width);
-            stroke: var(--border-color);
-        }
-
-        &-meter {
-            stroke-linecap: round;
-            stroke-dasharray: 360;
-            stroke-dashoffset: 0;
-            animation: alert-timer var(--animation-duration) ease-in-out;
-            transform: rotate(-90deg);
-            transform-origin: 50% 50%;
-        }
-    }
 }
 
 @keyframes alert-close {
@@ -83,13 +61,4 @@
     to {
         transform: translateX(0);
     }
-}
-
-@keyframes alert-timer {
-    from {
-        stroke-dashoffset: 360;
-    }
-    to {
-        stroke-dashoffset: 0;
-    }
 }

package/src/components/alert/scss/variables.scss

@@ -5,20 +5,4 @@
     &-message {
         --transition-duration: var(--transition-duration-400);
     }
-
-    &-timer {
-        --animation-duration: 5s;
-        --background: var(--color-black-400);
-        --border-width: var(--border-width-700);
-        --height: var(--size-600);
-        --width: var(--size-600);
-
-        &-bg {
-            --border-color: var(--color-grey-500);
-        }
-
-        &-meter {
-            --border-color: var(--color-black-300);
-        }
-    }
 }

package/src/components/field/file.ts

@@ -0,0 +1,64 @@
+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';
+
+
+type Data = {
+    accept?: string;
+    class?: string;
+    mask?: {
+        class?: string;
+        content?: any;
+        style?: string;
+    };
+    name?: string;
+    placeholder?: string;
+    style?: string;
+    type?: string;
+    value?: unknown;
+} & Parameters<typeof description>[0] & Parameters<typeof title>[0];
+
+
+export default (data: Data) => {
+    let state = reactive({
+            active: false,
+            error: ''
+        });
+
+    return html`
+        <div
+            class="field ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column"
+            onfocusin='${() => {
+                state.active = true;
+            }}'
+            onfocusout='${() => {
+                state.active = false;
+            }}'
+            style='${data?.style || ''}'
+        >
+            ${title(data)}
+
+            <label
+                class='field-mask field-mask--input --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) && '--margin-top'} --margin-300'
+                style='${data?.mask?.style || ''}'
+            >
+                <input
+                    ${data?.accept ? `accept='${data.accept}'` : ''}
+                    class='field-tag field-tag--hidden'
+                    name='${data.name}'
+                    onrender='${form.input.attributes(state)}'
+                    type='file'
+                    ${data?.value !== undefined ? `value='${data.value}'` : ''}
+                >
+
+                ${data?.mask?.content || ''}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
+    `;
+};

package/src/components/field/index.ts

@@ -1,8 +1,9 @@
 import checkbox from './checkbox';
+import file from './file';
 import optional from './optional';
 import select from './select';
 import s from './switch';
 import text from './text';
 
 
-export default { checkbox, optional, select, switch: s, text };
+export default { checkbox, file, optional, select, switch: s, text };

package/src/components/field/title.ts

@@ -7,12 +7,14 @@ export default (data: { required?: boolean, title?: string }) => {
         return '';
     }
 
+    let { attributes } = tooltip.onhover();
+
     return 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()}>
+                <div class="bubble --background-primary --margin-left" ${attributes}>
                     <span class="tooltip-message tooltip-message--w">Required</span>
                 </div>
             `}

package/src/components/form/layout.ts

@@ -20,7 +20,7 @@ export default (data: Data) => html`
     <form class='${data?.class}' ${data?.action || ''}>
         ${data?.content || ''}
 
-        ${data?.button ? html`
+        ${data?.button?.content ? html`
             <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
                 ${data?.button?.content || ''}
             </button>

package/src/components/tooltip/index.ts

@@ -4,46 +4,62 @@ import { root } from '~/components';
 import menu from './menu';
 
 
-const onclick = ({ active, toggle }: { active?: boolean, toggle?: boolean } = {}) => {
-    let state = reactive({
-            active: active || false
+const onclick = (data: { active?: boolean, menu?: Parameters<typeof menu>[0], toggle?: boolean } = {}) => {
+    let content,
+        state = reactive({
+            active: data.active || false,
+            render: undefined as boolean | undefined
         });
 
-    return html({
-        class: () => {
-            return `tooltip ${state.active ? '--active' : ''}`;
-        },
-        onclick: function(this: HTMLElement, e: Event) {
-            let active = true;
+    if (data.menu) {
+        content = menu(data.menu, state);
+    }
 
-            if (toggle && e.target && this.isSameNode(e.target as Node)) {
-                active = !state.active;
-            }
+    return {
+        attributes: html({
+            class: () => {
+                return `tooltip ${state.active ? '--active' : ''}`;
+            },
+            onclick: function(this: HTMLElement, e: Event) {
+                let active = true;
 
-            state.active = active;
+                if (data.toggle && e.target && this.isSameNode(e.target as Node)) {
+                    active = !state.active;
+                }
 
-            if (active) {
-                root.queue.onclick(() => state.active = false);
+                state.active = active;
+
+                if (active) {
+                    root.queue.onclick(() => state.active = false);
+                }
             }
-        }
-    });
+        }),
+        content,
+        state
+    };
 };
 
 const onhover = (active: boolean = false) => {
-    let state = reactive({ active });
-
-    return html({
-        class: () => {
-            return `tooltip ${state.active ? '--active' : ''}`;
-        },
-        onmouseover: () => {
-            state.active = true;
-        },
-        onmouseout: () => {
-            state.active = false;
-        }
-    });
+    let state = reactive({
+            active,
+            render: undefined as boolean | undefined
+        });
+
+    return {
+        attributes: html({
+            class: () => {
+                return `tooltip ${state.active ? '--active' : ''}`;
+            },
+            onmouseover: () => {
+                state.active = true;
+            },
+            onmouseout: () => {
+                state.active = false;
+            }
+        }),
+        state
+    };
 };
 
 
-export default { onclick, onhover, menu };
+export default { onclick, onhover };

package/src/components/tooltip/menu.ts

@@ -1,4 +1,4 @@
-import { effect, reactive } from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
 
 
@@ -57,13 +57,10 @@ function template(data: Data) {
 }
 
 
-export default (data: Data) => {
-    let state = reactive({
-            render: false
-        });
-
+// TODO: There's nothing binding activate to tooltip menu ( this is never called outside initial effect run )
+export default (data: Data, state: { active?: boolean, render?: boolean }) => {
     effect(() => {
-        if (!data?.state?.active || state.render) {
+        if (!state.active || state.render) {
             return;
         }