@esportsplus/ui 0.9.2 → 0.9.4

package/dist/components/field/select.js

@@ -1,135 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
-import form from '../../components/form/index.js';
-import scrollbar from '../../components/scrollbar/index.js';
-import root from '../../components/root/index.js';
-import description from './description.js';
-import error from './error.js';
-import title from './title.js';
-const FIELD_OMIT = [
-    'content',
-    'description',
-    'effect',
-    'mask',
-    'name',
-    'options', 'option',
-    'required',
-    'selected', 'scrollbar',
-    'tag', 'text', 'title', 'tooltip'
-];
-const TOOLTIP_OMIT = ['direction'];
-function parse(keys, selected) {
-    let options = {};
-    for (let key of keys) {
-        options[key] = false;
-    }
-    options[selected] = true;
-    return {
-        options,
-        selected: selected || keys[0]
-    };
-}
-function template(data, state) {
-    data.scrollbar ??= {};
-    data.scrollbar.style = data.scrollbar.style || '--background-default: var(--color-black-400);';
-    data.tooltip ??= {};
-    data.tooltip.class = `tooltip-content--${data.tooltip?.direction || 's'} ${data.tooltip?.class || ''}`;
-    data.tooltip.direction ??= 's';
-    let { html: h, parent: { attributes: a } } = scrollbar({
-        attributes: data.scrollbar,
-        fixed: true
-    });
-    return html `
-        <div
-            class='tooltip-content --flex-column --width-full'
-            ${omit(data.tooltip, TOOLTIP_OMIT)}
-        >
-            <div
-                class='row --flex-column'
-                onclick='${(e) => {
-        let key = e?.target?.dataset?.key;
-        if (key === undefined) {
-            return;
-        }
-        state.options[key] = true;
-        state.options[state.selected] = false;
-        state.active = false;
-        state.selected = key;
-        if (data.effect) {
-            data.effect(key);
-        }
-    }}'
-                ${a}
-            >
-                ${Object.keys(data.options || {}).map((key) => html `
-                    <div
-                        class='
-                            ${() => state.options[key] && '--active'}
-                            link
-                            --flex-vertical
-                        '
-                        data-key='${key}'
-                        ${data.option}
-                    >
-                        <span class='--text-truncate'>
-                            ${data.options[key]}
-                        </span>
-                    </div>
-                `)}
-            </div>
-
-            ${h}
-        </div>
-    `;
-}
-export default (data) => {
-    let state = reactive(Object.assign({
-        active: false,
-        error: '',
-        render: false,
-    }, parse(Object.keys(data.options || {}), data.selected)));
-    data.mask ??= {};
-    data.mask.onclick = () => {
-        state.render = true;
-        state.active = !state.active;
-        if (state.active) {
-            root.onclick.push(() => state.active = false);
-        }
-    };
-    data.tag ??= {};
-    data.tag.name = data.name;
-    data.tag.onclick = () => { };
-    data.tag.onrender = form.input.onrender(state);
-    data.tag.value = () => state.selected;
-    return html `
-        <div class='
-                ${() => state.active ? '--active' : ''}
-                field
-                tooltip
-                --flex-column
-            '
-            ${omit(data, FIELD_OMIT)}
-        >
-            ${title(data)}
-
-            <label
-                class='field-mask field-mask--select --flex-row --padding-400'
-                ${data.mask}
-            >
-                <input class='field-tag field-tag--hidden' ${data.tag}>
-
-                <div class='field-text' style='pointer-events: none' ${data.text}>
-                    ${() => data.options[state.selected] || '-'}
-                </div>
-
-                <div class='field-mask-arrow'></div>
-
-                ${() => state.render && template(data, state)}
-            </label>
-
-            ${description(data)}
-            ${error(state)}
-        </div>
-    `;
-};

package/dist/components/field/switch.js

@@ -1,6 +0,0 @@
-import checkbox from './checkbox.js';
-export default (data) => {
-    data.mask = data.mask || {};
-    data.mask.class = `field-mask--switch ${data.mask?.class || ''}`;
-    return checkbox(data);
-};

package/dist/components/field/text.js

@@ -1,64 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import { omit, pick } from '@esportsplus/utilities';
-import form from '../../components/form/index.js';
-import description from './description.js';
-import error from './error.js';
-import title from './title.js';
-const FIELD_OMIT = [
-    'content',
-    'description',
-    'mask',
-    'name',
-    'placeholder',
-    'required',
-    'tag', 'textarea', 'title', 'type',
-    'value'
-];
-const INPUT_PICK = ['name', 'placeholder', 'required', 'type', 'value'];
-const TEXTAREA_PICK = ['name', 'placeholder'];
-export default (data) => {
-    let state = reactive({
-        active: false,
-        error: ''
-    });
-    data.onfocusin = () => {
-        state.active = true;
-    };
-    data.onfocusout = () => {
-        state.active = false;
-    };
-    data.tag ??= {};
-    data.tag.class = `field-tag --padding-400 ${data.tag.class || ''}`;
-    data.tag.onrender = form.input.onrender(state);
-    data.type ??= 'string';
-    data.value ??= '';
-    return html `
-        <div
-            class='
-                ${() => state.active && '--active'}
-                field
-                --flex-column
-            '
-            ${omit(data, FIELD_OMIT)}
-        >
-            ${title(data)}
-
-            <label class='field-mask field-mask--input --flex-row' ${data.mask}>
-                ${data.textarea
-        ? html `
-                        <textarea ${data.tag} ${pick(data, TEXTAREA_PICK)}>
-                            ${data.value}
-                        </textarea>
-                    `
-        : html `
-                        <input ${data.tag} ${pick(data, INPUT_PICK)}>
-                    `}
-                ${data.content || ''}
-            </label>
-
-            ${description(data)}
-            ${error(state)}
-        </div>
-    `;
-};

package/dist/components/field/textarea.js

@@ -1,5 +0,0 @@
-import text from './text.js';
-export default (data) => {
-    data.textarea = true;
-    return text(data);
-};

package/dist/components/field/title.js

@@ -1,21 +0,0 @@
-import { html } from '@esportsplus/template';
-import tooltip from '../../components/tooltip/index.js';
-export default (data) => {
-    if (!data?.title) {
-        return '';
-    }
-    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().attributes}
-                >
-                    <span class='tooltip-message tooltip-message--w'>Required</span>
-                </div>
-            `}
-        </div>
-    `;
-};

package/dist/components/footer/index.js

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

package/dist/components/footer/scss/index.scss

@@ -1,2 +0,0 @@
-.footer,.footer-break{width:100%}@media (max-width:640px){.footer-copyright:first-child{--width:100%}}@media (min-width:640px){.footer-copyright:first-child{margin-right:auto}}.footer-copyright:first-child+.footer-break{display:none}.footer-copyright:last-child{--width:100%}
-/*$vite$:1*/

package/dist/components/form/action.js

@@ -1,57 +0,0 @@
-import response from '@esportsplus/action';
-import input from './input.js';
-function parse(input) {
-    let data = {};
-    for (let [path, value] of input) {
-        let bucket = data, segments = path.indexOf('.') !== -1 ? path.split('.') : [path];
-        for (let i = 0; i < segments.length - 1; i++) {
-            bucket = bucket[segments[i]] = bucket[segments[i]] || {};
-        }
-        let key = segments.at(-1);
-        if (path.endsWith('[]')) {
-            if (typeof value === 'string' && value.trim() === '') {
-                continue;
-            }
-            bucket = bucket[key.substring(0, key.length - 2)] ??= [];
-            bucket.push(value);
-        }
-        else {
-            bucket[key] = value;
-        }
-    }
-    return data;
-}
-;
-export default function (action, s) {
-    return {
-        onclick: function (event) {
-            let trigger = event.target;
-            if (trigger?.type !== 'submit') {
-                return;
-            }
-            event.preventDefault();
-            this.dispatchEvent(new SubmitEvent('submit', { cancelable: true, bubbles: true, submitter: trigger }));
-        },
-        onsubmit: async function (event) {
-            event.preventDefault();
-            if (s) {
-                s.processing = true;
-            }
-            let { errors } = await action({
-                input: parse(new FormData(this).entries()),
-                response
-            });
-            for (let i = 0, n = errors.length; i < n; i++) {
-                let { message, path } = errors[i], reactive = input.get(this[path]);
-                if (!reactive) {
-                    continue;
-                }
-                reactive.error = `${message[0].toUpperCase()}${message.substring(1)}`;
-            }
-            if (s) {
-                s.processing = false;
-            }
-        }
-    };
-}
-;

package/dist/components/form/index.js

@@ -1,3 +0,0 @@
-import action from './action.js';
-import input from './input.js';
-export default { action, input };

package/dist/components/form/input.js

@@ -1,10 +0,0 @@
-let key = Symbol();
-const get = (element) => {
-    return element ? element[key] : undefined;
-};
-const onrender = (reactive) => {
-    return (element) => {
-        element[key] = reactive;
-    };
-};
-export default { get, onrender };

package/dist/components/form/types.js

@@ -1 +0,0 @@
-export {};

package/dist/components/frame/index.js

@@ -1 +0,0 @@
-import './scss/index.scss';

package/dist/components/frame/scss/index.scss

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

package/dist/components/grid/index.js

@@ -1 +0,0 @@
-import './scss/index.scss';

package/dist/components/grid/scss/index.scss

@@ -1,2 +0,0 @@
-.grid{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);--max-width:1fr;--min-width:200px;grid-gap:var(--margin-horizontal)var(--margin-vertical);grid-template-columns:repeat(auto-fit,minmax(var(--min-width),var(--max-width)));display:grid;position:relative}.grid .grid-item{width:100%}
-/*$vite$:1*/

package/dist/components/group/index.js

@@ -1 +0,0 @@
-import './scss/index.scss';

package/dist/components/group/scss/index.scss

@@ -1,2 +0,0 @@
-.group{--margin-horizontal:var(--size-400);--width:auto}.group.--flex-column .group-item{--width:100%}.group--scroller .group-item{--margin-vertical:0px}.group{margin:0 calc(var(--margin-horizontal)/-2);width:calc(100% + var(--margin-horizontal));flex-wrap:wrap;justify-content:flex-start;display:flex;position:relative}.group--offset-bottom{margin-bottom:calc(var(--margin-vertical)*-1)}.group--offset-top{margin-top:calc(var(--margin-vertical)*-1)}.group--scroller{margin-bottom:calc(var(--scrollbar-width)*-1);padding-bottom:var(--scrollbar-width);flex-flow:row;overflow-y:hidden}.group-item{margin:var(--margin-vertical)calc(var(--margin-horizontal)/2)0;width:var(--width);display:flex;position:relative}.group-item[class*=--width]{width:calc(var(--width) - var(--margin-horizontal))}
-/*$vite$:1*/

package/dist/components/highlight/index.js

@@ -1,40 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import './scss/index.scss';
-let key = Symbol(), observer = null;
-export default (background) => {
-    if (observer === null) {
-        observer = new IntersectionObserver((entries) => {
-            let disconnected = 0, n = entries.length;
-            for (let i = 0; i < n; i++) {
-                let { isIntersecting, target } = entries[i];
-                if (target.isConnected) {
-                    target[key].highlight = +isIntersecting;
-                }
-                else {
-                    disconnected++;
-                    observer.unobserve(target);
-                }
-            }
-            if (n - disconnected === 0) {
-                observer.disconnect();
-                observer = null;
-            }
-        }, { threshold: 1 });
-    }
-    let state = reactive({
-        highlight: 0
-    });
-    return {
-        attributes: {
-            class: 'highlight',
-            onrender: function (element) {
-                element[key] = state;
-                observer.observe(element);
-            },
-            style: [
-                () => `--highlight: ${state.highlight}`,
-                `--background: ${background}`,
-            ]
-        }
-    };
-};

package/dist/components/highlight/scss/index.scss

@@ -1,2 +0,0 @@
-.highlight{--background:transparent;--highlight:1;background:linear-gradient(90deg,var(--background)50%,transparent 50%)110% 0/200% 100% no-repeat;background-position:calc((1 - var(--highlight))*110%)0;transition:background-position .32s}
-/*$vite$:1*/

package/dist/components/icon/index.js

@@ -1 +0,0 @@
-import './scss/index.scss';

package/dist/components/icon/scss/index.scss

@@ -1,2 +0,0 @@
-.icon{--color:inherit;--height:var(--size);--margin-horizontal:var(--size-300);--size:var(--size-400);--width:var(--size);color:var(--color);flex:0 0 var(--width);height:var(--height);width:var(--width);display:flex;position:relative}.icon svg{color:currentColor;fill:currentColor;width:100%;height:100%}
-/*$vite$:1*/

package/dist/components/index.js

@@ -1,38 +0,0 @@
-export * as accordion from './accordion/index.js';
-export * as anchor from './anchor/index.js';
-export * as banner from './banner/index.js';
-export * as border from './border/index.js';
-export * as bubble from './bubble/index.js';
-export * as button from './button/index.js';
-export * as card from './card/index.js';
-export * as clipboard from './clipboard/index.js';
-export * as container from './container/index.js';
-export * as counter from './counter/index.js';
-export * as ellipsis from './ellipsis/index.js';
-export * as field from './field/index.js';
-export * as footer from './footer/index.js';
-export * as form from './form/index.js';
-export * as frame from './frame/index.js';
-export * as grid from './grid/index.js';
-export * as group from './group/index.js';
-export * as highlight from './highlight/index.js';
-export * as icon from './icon/index.js';
-export * as json from './json/index.js';
-export * as link from './link/index.js';
-export * as loader from './loader/index.js';
-export * as loading from './loading/index.js';
-export * as magnet from './magnet/index.js';
-export * as modal from './modal/index.js';
-export * as normalize from './normalize/index.js';
-export * as number from './number/index.js';
-export * as page from './page/index.js';
-export * as root from './root/index.js';
-export * as row from './row/index.js';
-export * as scrollbar from './scrollbar/index.js';
-export * as sidebar from './sidebar/index.js';
-export * as site from './site/index.js';
-export * as text from './text/index.js';
-export * as thumbnail from './thumbnail/index.js';
-export * as tooltip from './tooltip/index.js';
-export * as truncate from './truncate/index.js';
-export * as typewriter from './typewriter/index.js';

package/dist/components/json/download.js

@@ -1,8 +0,0 @@
-export default (content, name) => {
-    let link = document.createElement('a');
-    link.download = name + '.json';
-    link.href = window.URL.createObjectURL(new Blob([JSON.stringify(content)], { type: 'application/json' }));
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-};

package/dist/components/json/index.js

@@ -1,2 +0,0 @@
-import download from './download.js';
-export default { download };

package/dist/components/link/hover.js

@@ -1,17 +0,0 @@
-import { html } from '@esportsplus/template';
-export default ({ attributes, content }) => {
-    return {
-        attributes: {
-            class: 'link--hover'
-        },
-        html: html `
-            <span class='link-hover link-hover--one' ${attributes}>
-                ${content}
-            </span>
-
-            <span class='link-hover link-hover--two' ${attributes}>
-                ${content}
-            </span>
-        `
-    };
-};

package/dist/components/link/index.js

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

package/dist/components/link/scss/index.scss

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

package/dist/components/loader/index.js

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

package/dist/components/loader/scss/index.scss

@@ -1,2 +0,0 @@
-.loader-logo{--size:10svh;--translateY:8px}.loader{background-color:var(--color-black-500);opacity:1;pointer-events:none;visibility:visible;z-index:9999;transition:all .3s ease-in-out;position:fixed;inset:0}.loader--load{animation:.6s ease-in-out .2s both move}.loader--load .loader--load{animation:.6s ease-in-out both move}@keyframes move{0%{transform:translateY(0)}80%{transform:translateY(-102%)}to{transform:translateY(-102%)}}.loader .loader{background-color:var(--color-black-400)}.loader-content{position:absolute;inset:50% auto auto 50%;transform:translate(-50%)translateY(-50%)}.loader-logo{color:#fff}.loader-logo--scale{animation:.32s both scale}@keyframes scale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale3d(1.8,1.8,1.8)}}
-/*$vite$:1*/

package/dist/components/loading/index.js

@@ -1,12 +0,0 @@
-import { html } from '@esportsplus/template';
-import './scss/index.scss';
-export default (attributes) => {
-    return html `
-        <div
-            class='loading --border-width-700 --size-800'
-            style='--border-color: var(--color-border-500);'
-            ${attributes}
-        >
-        </div>
-    `;
-};

package/dist/components/loading/scss/index.scss

@@ -1,2 +0,0 @@
-.loading{--animation-duration:.64s;--border-color:var(--color);--border-width:var(--border-width-400);--size:var(--size-400);animation:loading var(--animation-duration)linear infinite;border:var(--border-width)solid color-mix(in srgb,var(--border-color),transparent 90%);border-left-color:var(--border-color);height:var(--size);width:var(--size);border-radius:100%}@keyframes loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
-/*$vite$:1*/

package/dist/components/magnet/index.js

@@ -1,47 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import './scss/index.scss';
-export default ({ attributes, hide }) => {
-    let active = false, events = {
-        onmouseover: function () {
-            let { offsetHeight, offsetLeft, offsetTop, offsetWidth } = this;
-            active = true;
-            state.height = offsetHeight;
-            state.left = offsetLeft;
-            state.opacity = 1;
-            state.top = offsetTop;
-            state.width = offsetWidth;
-        }
-    }, state = reactive({
-        height: null,
-        hide: true,
-        left: 0,
-        opacity: 0,
-        top: 0,
-        width: 0
-    });
-    if (hide === true) {
-        events.onmouseout = () => {
-            active = false;
-            setTimeout(() => {
-                if (active === true) {
-                    return;
-                }
-                state.opacity = 0;
-            }, 50);
-        };
-    }
-    return {
-        html: html `
-            <div class='magnet' style='${() => `
-                height: ${state.height ? `${state.height}px` : '100%'};
-                opacity: ${state.opacity};
-                transform: translate(${state.left}px, ${state.top}px);
-                width: ${state.width}px;
-            `}' ${attributes}></div>
-        `,
-        sibling: {
-            attributes: events
-        }
-    };
-};

package/dist/components/magnet/scss/index.scss

@@ -1,2 +0,0 @@
-.magnet{--background:transparent;--border-radius:var(--border-radius-400);--timing-function:var(--timing-circ);background:var(--background);border-radius:var(--border-radius);opacity:0;height:0;transition:height var(--transition-duration)var(--timing-function),opacity var(--transition-duration)var(--timing-function),transform var(--transition-duration)var(--timing-function),width var(--transition-duration)var(--timing-function);z-index:-1;width:0;position:absolute;top:0;left:0}
-/*$vite$:1*/

package/dist/components/modal/index.js

@@ -1 +0,0 @@
-import './scss/index.scss';