@ktjs/mui 0.20.2 → 0.24.1

package/dist/index.mjs

@@ -1,1199 +1,2970 @@
-// Cached native methods for performance optimization
-const $isArray = Array.isArray;
-const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
-
-// Error handling utilities
-const $throw = (message) => {
-    throw new Error('@ktjs/shared: ' + message);
-};
-
-// DOM manipulation utilities
-// # dom natives
-/**
- * & Remove `bind` because it is shockingly slower than wrapper
- * & `window.document` is safe because it is not configurable and its setter is undefined
- */
-const $appendChild = HTMLElement.prototype.appendChild;
-const originAppend = HTMLElement.prototype.append;
-const $append = // for ie 9/10/11
- typeof originAppend === 'function'
-    ? originAppend
-    : function (...nodes) {
-        if (nodes.length < 50) {
-            for (let i = 0; i < nodes.length; i++) {
-                const node = nodes[i];
-                if (typeof node === 'string') {
-                    $appendChild.call(this, document.createTextNode(node));
-                }
-                else {
-                    $appendChild.call(this, node);
-                }
-            }
-        }
-        else {
-            const fragment = document.createDocumentFragment();
-            for (let i = 0; i < nodes.length; i++) {
-                const node = nodes[i];
-                if (typeof node === 'string') {
-                    $appendChild.call(fragment, document.createTextNode(node));
-                }
-                else {
-                    $appendChild.call(fragment, node);
-                }
-            }
-            $appendChild.call(this, fragment);
-        }
-    };
-const { get: $buttonDisabledGetter$2, set: $buttonDisabledSetter$2 } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
-
-// Shared utilities and cached native methods for kt.js framework
-// Re-export all utilities
-Object.defineProperty(window, '@ktjs/shared', { value: '0.20.0' });
-
-const booleanHandler = (element, key, value) => {
-    if (key in element) {
-        element[key] = !!value;
-    }
-    else {
-        element.setAttribute(key, value);
-    }
-};
-const valueHandler = (element, key, value) => {
-    if (key in element) {
-        element[key] = value;
-    }
-    else {
-        element.setAttribute(key, value);
-    }
-};
-// Attribute handlers map for optimized lookup
-const handlers = {
-    checked: booleanHandler,
-    selected: booleanHandler,
-    value: valueHandler,
-    valueAsDate: valueHandler,
-    valueAsNumber: valueHandler,
-    defaultValue: valueHandler,
-    defaultChecked: booleanHandler,
-    defaultSelected: booleanHandler,
-    disabled: booleanHandler,
-    readOnly: booleanHandler,
-    multiple: booleanHandler,
-    required: booleanHandler,
-    autofocus: booleanHandler,
-    open: booleanHandler,
-    controls: booleanHandler,
-    autoplay: booleanHandler,
-    loop: booleanHandler,
-    muted: booleanHandler,
-    defer: booleanHandler,
-    async: booleanHandler,
-    hidden: (element, _key, value) => (element.hidden = !!value),
-};
-
-const defaultHandler = (element, key, value) => element.setAttribute(key, value);
-function attrIsObject(element, attr) {
-    const classValue = attr.class || attr.className;
-    if (classValue !== undefined) {
-        element.setAttribute('class', classValue);
-    }
-    const style = attr.style;
-    if (style) {
-        if (typeof style === 'string') {
-            element.setAttribute('style', style);
-        }
-        else if (typeof style === 'object') {
-            for (const key in style) {
-                element.style[key] = style[key];
-            }
-        }
-    }
-    for (const key in attr) {
-        if (key === 'class' ||
-            key === 'className' ||
-            key === 'style' ||
-            key === 'children' ||
-            key === 'k-if' ||
-            key === 'ref') {
-            continue;
-        }
-        const o = attr[key];
-        // normal event handler
-        if (key.startsWith('on:')) {
-            element.addEventListener(key.slice(3), o); // chop off the `on:`
-        }
-        // normal attributes
-        else {
-            (handlers[key] || defaultHandler)(element, key, o);
-        }
-    }
-}
-function applyAttr(element, attr) {
-    if (!attr) {
-        return;
-    }
-    if (typeof attr === 'object' && attr !== null) {
-        attrIsObject(element, attr);
-    }
-    else {
-        throw new Error('kt.js: attr must be an object.');
-    }
-}
-
-function apdSingle(element, c) {
-    // & JSX should ignore false, undefined, and null
-    if (c === false || c === undefined || c === null) {
-        return;
-    }
-    if (typeof c === 'object' && c !== null && 'isKT' in c) {
-        $append.call(element, c.value);
-    }
-    else {
-        $append.call(element, c);
-        // Handle KTFor anchor
-        const list = c.__kt_for_list__;
-        if ($isArray(list)) {
-            apd(element, list);
-        }
-    }
-}
-function apd(element, c) {
-    if ($isThenable(c)) {
-        c.then((r) => apd(element, r));
-    }
-    else if ($isArray(c)) {
-        for (let i = 0; i < c.length; i++) {
-            // & might be thenable here too
-            const ci = c[i];
-            if ($isThenable(ci)) {
-                const comment = document.createComment('ktjs-promise-placeholder');
-                $append.call(element, comment);
-                ci.then((awaited) => comment.replaceWith(awaited));
-            }
-            else {
-                apdSingle(element, ci);
-            }
-        }
-    }
-    else {
-        // & here is thened, so must be a simple elementj
-        apdSingle(element, c);
-    }
-}
-function applyContent(element, content) {
-    if ($isArray(content)) {
-        for (let i = 0; i < content.length; i++) {
-            apd(element, content[i]);
-        }
-    }
-    else {
-        apd(element, content);
-    }
-}
-
-document.createElement('div');
-const htmlCreator = (tag) => document.createElement(tag);
-const svgCreator = (tag) => document.createElementNS('http://www.w3.org/2000/svg', tag);
-const mathMLCreator = (tag) => document.createElementNS('http://www.w3.org/1998/Math/MathML', tag);
-let creator = htmlCreator;
-// # consts
-const SVG_ATTR_FLAG = '__kt_svg__';
-const MATHML_ATTR_FLAG = '__kt_mathml__';
-/**
- * Create an enhanced HTMLElement.
- * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
- * @param tag tag of an `HTMLElement`
- * @param attr attribute object or className
- * @param content a string or an array of HTMLEnhancedElement as child nodes
- *
- * ## About
- * @package @ktjs/core
- * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.20.3 (Last Update: 2026.02.01 18:38:02.198)
- * @license MIT
- * @link https://github.com/baendlorel/kt.js
- * @link https://baendlorel.github.io/ Welcome to my site!
- * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
- * @copyright Copyright (c) 2026 Kasukabe Tsumugi. All rights reserved.
- */
-const h = (tag, attr, content) => {
-    if (typeof tag !== 'string') {
-        $throw('tagName must be a string.');
-    }
-    if (attr) {
-        if (SVG_ATTR_FLAG in attr) {
-            delete attr[SVG_ATTR_FLAG];
-            creator = svgCreator;
-        }
-        else if (MATHML_ATTR_FLAG in attr) {
-            delete attr[MATHML_ATTR_FLAG];
-            creator = mathMLCreator;
-        }
-        else {
-            creator = htmlCreator;
-        }
-    }
-    // * start creating the element
-    const element = creator(tag);
-    // * Handle content
-    applyAttr(element, attr);
-    applyContent(element, content);
-    // if (tag === 'svg') {
-    //   tempWrapper.innerHTML = element.outerHTML;
-    //   return tempWrapper.firstChild as HTML<T>;
-    // }
-    // if (tag === 'math') {
-    //   tempWrapper.innerHTML = element.outerHTML;
-    //   return tempWrapper.firstChild as HTML<T>;
-    // }
-    return element;
-};
-
-const dummyRef = { value: null };
-/**
- * @param tag html tag or function component
- * @param props properties/attributes
- */
-function jsx(tag, props) {
-    const ref = props.ref?.isKT ? props.ref : dummyRef;
-    let el;
-    if ('k-if' in props && !props['k-if']) {
-        // & make comment placeholder in case that ref might be redrawn later
-        el = document.createComment('k-if');
-        ref.value = el;
-        return el;
-    }
-    // Handle function components
-    if (typeof tag === 'function') {
-        el = tag(props);
-    }
-    else {
-        el = h(tag, props, props.children);
-    }
-    ref.value = el;
-    return el;
-}
-/**
- * JSX runtime for React 17+ automatic runtime
- * This is called when using jsx: "react-jsx" or "react-jsxdev"
- */
-const jsxs = jsx;
-
-// Cached native methods for performance optimization
-const $defines = Object.defineProperties;
-
-// String manipulation utilities
-/**
- * Default empty function
- */
-const $emptyFn = (() => true);
-const { get: $buttonDisabledGetter$1, set: $buttonDisabledSetter$1 } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
-// # DOM utilities
-const parseStyle = (style) => {
-    if (typeof style === 'string') {
-        return style;
-    }
-    if (style && typeof style === 'object') {
-        return Object.entries(style)
-            .map(([key, value]) => {
-            // Convert camelCase to kebab-case
-            const cssKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-            return `${cssKey}: ${value}`;
-        })
-            .join('; ');
-    }
-    return '';
-};
-const generateHandler = (props, key) => {
-    const handler = props[key];
-    if (typeof handler === 'function') {
-        return handler;
-    }
-    else if (handler && typeof handler === 'object' && handler.isKT) {
-        return (value) => (handler.value = value);
-    }
-    return $emptyFn;
-};
-
-// Shared utilities and cached native methods for kt.js framework
-// Re-export all utilities
-Object.defineProperty(window, '@ktjs/shared', { value: '0.20.0' });
-
-function Alert(props) {
-    const { children, severity = 'info', variant = 'standard', icon, 'kt:close': onClose } = props;
-    const classes = `mui-alert mui-alert-${severity} mui-alert-${variant} ${props.class ? props.class : ''}`;
-    // Icon SVG paths for different severities
-    const getIcon = () => {
-        if (icon === false) {
-            return null;
-        }
-        if (icon) {
-            return icon;
-        }
-        const iconSize = '22px';
-        const iconClass = 'mui-alert-icon';
-        switch (severity) {
-            case 'success':
-                return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }));
-            case 'error':
-                return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) }));
-            case 'warning':
-                return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) }));
-            case 'info':
-            default:
-                return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }));
-        }
-    };
-    const alertIcon = getIcon();
-    const alert = (jsxs("div", { class: classes, style: parseStyle(props.style), role: "alert", children: [alertIcon && jsx("div", { class: "mui-alert-icon-wrapper", children: alertIcon }), jsx("div", { class: "mui-alert-message", children: children }), jsx("button", { "k-if": onClose, class: "mui-alert-close", "on:click": onClose, "aria-label": "Close", children: jsx("svg", { viewBox: "0 0 24 24", width: "18px", height: "18px", children: jsx("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }));
-    return alert;
-}
-
-/**
- * Button component - mimics MUI Button appearance and behavior
- */
-function Button(props) {
-    let { children, variant = 'text', color = 'primary', size = 'medium', disabled = false, fullWidth = false, iconOnly = false, startIcon, endIcon, type = 'button', 'on:click': onClick = $emptyFn, } = props;
-    const classes = [
-        'mui-button',
-        `mui-button-${variant}`,
-        `mui-button-${variant}-${color}`,
-        `mui-button-size-${size}`,
-        fullWidth ? 'mui-button-fullwidth' : '',
-        iconOnly ? 'mui-button-icon-only' : '',
-        disabled ? 'mui-button-disabled' : '',
-        props.class ? props.class : '',
-    ].join(' ');
-    const rippleContainer = jsx("span", { class: "mui-button-ripple" });
-    const handleClick = (e) => {
-        if (disabled) {
-            e.preventDefault();
-            return;
-        }
-        // Create ripple effect
-        const button = e.currentTarget;
-        if (rippleContainer) {
-            const rect = button.getBoundingClientRect();
-            const size = Math.max(rect.width, rect.height);
-            const x = e.clientX - rect.left - size / 2;
-            const y = e.clientY - rect.top - size / 2;
-            const ripple = document.createElement('span');
-            ripple.style.width = ripple.style.height = `${size}px`;
-            ripple.style.left = `${x}px`;
-            ripple.style.top = `${y}px`;
-            ripple.classList.add('mui-button-ripple-effect');
-            rippleContainer.appendChild(ripple);
-            // Remove ripple after animation
-            setTimeout(() => ripple.remove(), 600);
-        }
-        onClick(e);
-    };
-    const container = (jsxs("button", { class: classes, style: parseStyle(props.style), type: type, disabled: disabled, "on:click": handleClick, children: [startIcon && jsx("span", { class: "mui-button-start-icon", children: startIcon }), jsx("span", { class: "mui-button-label", children: children }), endIcon && jsx("span", { class: "mui-button-end-icon", children: endIcon }), rippleContainer] }));
-    $defines(container, {
-        disabled: {
-            get: $buttonDisabledGetter$1,
-            set: function (value) {
-                $buttonDisabledSetter$1.call(this, value);
-                this.classList.toggle('mui-button-disabled', value);
-            },
-        },
-    });
-    return container;
-}
-
-/**
- * Checkbox component - mimics MUI Checkbox appearance and behavior
- */
-function Checkbox(props) {
-    const toggleIcon = (checked, indeterminate) => {
-        if (indeterminate) {
-            uncheckedIcon.style.display = 'none';
-            checkedIcon.style.display = 'none';
-            indeterminateIcon.style.display = '';
-        }
-        else {
-            uncheckedIcon.style.display = checked ? 'none' : '';
-            checkedIcon.style.display = checked ? '' : 'none';
-            indeterminateIcon.style.display = 'none';
-        }
-    };
-    // Handle change
-    const handleChange = () => {
-        if (disabled) {
-            return;
-        }
-        checked = inputEl.checked;
-        indeterminate = false;
-        toggleIcon(checked, indeterminate);
-        onChange(checked, value);
-    };
-    let { checked = false, value = '', label = '', size = 'medium', disabled = false, color = 'primary', indeterminate = false, } = props;
-    const onChange = generateHandler(props, 'kt:change');
-    const inputEl = (jsx("input", { type: "checkbox", class: "mui-checkbox-input", checked: checked, value: value, disabled: disabled, "on:change": handleChange }));
-    // Unchecked icon
-    const uncheckedIcon = (jsx("span", { class: "mui-checkbox-icon-unchecked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" }) }) }));
-    // Checked icon
-    const checkedIcon = (jsx("span", { class: "mui-checkbox-icon-checked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }) }));
-    // Indeterminate icon
-    const indeterminateIcon = (jsx("span", { class: "mui-checkbox-icon-indeterminate", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z" }) }) }));
-    // Initialize icon state
-    toggleIcon(checked, indeterminate);
-    const container = (jsxs("label", { class: `mui-checkbox-wrapper mui-checkbox-size-${size} ${disabled ? 'mui-checkbox-disabled' : ''} mui-checkbox-color-${color}`, children: [inputEl, jsxs("span", { class: "mui-checkbox-icon", children: [uncheckedIcon, checkedIcon, indeterminateIcon] }), jsx("span", { "k-if": label, class: "mui-checkbox-label", children: label })] }));
-    $defines(container, {
-        checked: {
-            get() {
-                return checked;
-            },
-            set(newChecked) {
-                checked = newChecked;
-                indeterminate = false;
-                inputEl.checked = checked;
-                toggleIcon(checked, indeterminate);
-            },
-        },
-        value: {
-            get() {
-                return value;
-            },
-            set(newValue) {
-                value = newValue;
-                inputEl.value = value;
-            },
-        },
-        disabled: {
-            get() {
-                return disabled;
-            },
-            set(newDisabled) {
-                disabled = Boolean(newDisabled);
-                inputEl.disabled = disabled;
-                container.classList.toggle('mui-checkbox-disabled', disabled);
-            },
-        },
-    });
-    return container;
-}
-/**
- * CheckboxGroup component - groups multiple checkboxes together
- */
-function CheckboxGroup(props) {
-    let { value = [], size = 'medium', row = false } = props;
-    const onChange = generateHandler(props, 'kt:change');
-    let selectedValues = new Set(value);
-    const changeHandler = (checked, checkboxValue) => {
-        if (checked) {
-            selectedValues.add(checkboxValue);
-        }
-        else {
-            selectedValues.delete(checkboxValue);
-        }
-        onChange(Array.from(selectedValues));
-    };
-    const checkboxes = props.options.map((o) => {
-        o.size = size;
-        o.checked = selectedValues.has(o.value);
-        const originalChange = generateHandler(o, 'kt:change');
-        if (originalChange) {
-            o['kt:change'] = (checked, value) => {
-                originalChange(checked, value);
-                changeHandler(checked, value);
-            };
-        }
-        else {
-            o['kt:change'] = changeHandler;
-        }
-        return Checkbox(o);
-    });
-    const container = (jsx("div", { class: `mui-checkbox-group ${row ? 'mui-checkbox-group-row' : ''} ${props.class ? props.class : ''}`, style: props.style ? props.style : '', role: "group", children: checkboxes }));
-    $defines(container, {
-        value: {
-            get() {
-                return Array.from(selectedValues);
-            },
-            set(newValues) {
-                selectedValues = new Set(newValues);
-                for (let i = 0; i < checkboxes.length; i++) {
-                    const checkbox = checkboxes[i];
-                    checkbox.checked = selectedValues.has(checkbox.value);
-                }
-            },
-        },
-        disabled: {
-            get() {
-                return checkboxes.map((cb) => cb.disabled);
-            },
-            set(newDisabled) {
-                for (let i = 0; i < checkboxes.length; i++) {
-                    const checkbox = checkboxes[i];
-                    checkbox.disabled = Boolean(newDisabled);
-                }
-            },
-        },
-        disableAll: {
-            value: () => {
-                for (let i = 0; i < checkboxes.length; i++) {
-                    checkboxes[i].disabled = true;
-                }
-            },
-        },
-        enableAll: {
-            value: () => {
-                for (let i = 0; i < checkboxes.length; i++) {
-                    checkboxes[i].disabled = false;
-                }
-            },
-        },
-    });
-    return container;
-}
-
-/**
- * Dialog component - mimics MUI Dialog appearance and behavior
- * Only handles open/close state, title and content are passed as props
- */
-function Dialog(props) {
-    let { open = false, 'kt:close': onClose = $emptyFn, title, children, actions, maxWidth = 'sm', fullWidth = false, } = props;
-    // Handle ESC key - store handler for cleanup
-    const keyDownHandler = (e) => {
-        if (e.key === 'Escape') {
-            open = false;
-            onClose();
-        }
-    };
-    const handleBackdropClick = (e) => {
-        if (e.target === container) {
-            onClose();
-        }
-    };
-    // Backdrop element
-    const container = (jsx("div", { class: `kt-dialog-backdrop ${open ? 'kt-dialog-backdrop-open' : ''}`, "on:click": handleBackdropClick, style: { display: open ? 'flex' : 'none' }, children: jsxs("div", { class: `kt-dialog-paper ${maxWidth ? `kt-dialog-maxWidth-${maxWidth}` : ''} ${fullWidth ? 'kt-dialog-fullWidth' : ''}`, "on:click": (e) => e.stopPropagation(), children: [jsx("div", { "k-if": title, class: "kt-dialog-title", children: jsx("h2", { children: title }) }), jsx("div", { "k-if": children, class: "kt-dialog-content", children: children }), jsx("div", { "k-if": actions, class: "kt-dialog-actions", children: actions })] }) }));
-    document.addEventListener('keydown', keyDownHandler);
-    // Store cleanup function
-    const originalRemove = container.remove;
-    container.remove = () => {
-        if (keyDownHandler) {
-            document.removeEventListener('keydown', keyDownHandler);
-        }
-        return originalRemove.call(container);
-    };
-    $defines(container, {
-        open: {
-            get: () => open,
-            set: (isOpen) => {
-                if (isOpen === open) {
-                    return;
-                }
-                open = isOpen;
-                if (isOpen) {
-                    // Opening: set display first, then add class with double RAF for animation
-                    container.style.display = 'flex';
-                    setTimeout(() => container.classList.add('kt-dialog-backdrop-open'), 50);
-                }
-                else {
-                    container.classList.remove('kt-dialog-backdrop-open');
-                    setTimeout(() => {
-                        if (!open) {
-                            container.style.display = 'none';
-                        }
-                    }, 225);
-                }
-            },
-        },
-    });
-    return container;
-}
-
-/**
- * FormLabel component - mimics MUI FormLabel appearance and behavior
- */
-function FormLabel(props) {
-    const { children, required = false, error = false, disabled = false, focused = false, filled = false, component = 'label', htmlFor, } = props;
-    const classes = [
-        'mui-form-label',
-        error && 'mui-form-label-error',
-        disabled && 'mui-form-label-disabled',
-        focused && 'mui-form-label-focused',
-        filled && 'mui-form-label-filled',
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const labelProps = {
-        class: classes,
-    };
-    if (htmlFor) {
-        labelProps.for = htmlFor;
-    }
-    const element = component === 'legend' ? (jsxs("legend", { ...labelProps, children: [children, required && jsx("span", { class: "mui-form-label-asterisk", children: " *" })] })) : (jsxs("label", { ...labelProps, children: [children, required && jsx("span", { class: "mui-form-label-asterisk", children: " *" })] }));
-    return element;
-}
-
-// Cached native methods for performance optimization
-const { get: $buttonDisabledGetter, set: $buttonDisabledSetter } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
-
-// Shared utilities and cached native methods for kt.js framework
-// Re-export all utilities
-Object.defineProperty(window, '@ktjs/shared', { value: '0.20.0' });
-
-document.createElement('div');
-
-class KTRef {
-    /**
-     * Indicates that this is a KTRef instance
-     */
-    isKT = true;
-    /**
-     * @internal
-     */
-    _value;
-    /**
-     * @internal
-     */
-    _onChanges;
-    constructor(_value, _onChanges) {
-        this._value = _value;
-        this._onChanges = _onChanges;
-    }
-    /**
-     * If new value and old value are both nodes, the old one will be replaced in the DOM
-     */
-    get value() {
-        return this._value;
-    }
-    set value(newValue) {
-        if (newValue === this._value) {
-            return;
-        }
-        // replace the old node with the new one in the DOM if both are nodes
-        if (this._value instanceof Node && newValue instanceof Node) {
-            if (newValue.contains(this._value)) {
-                this._value.remove();
-            }
-            this._value.replaceWith(newValue);
-        }
-        const oldValue = this._value;
-        this._value = newValue;
-        for (let i = 0; i < this._onChanges.length; i++) {
-            this._onChanges[i](newValue, oldValue);
-        }
-    }
-    addOnChange(callback) {
-        this._onChanges.push(callback);
-    }
-    removeOnChange(callback) {
-        for (let i = this._onChanges.length - 1; i >= 0; i--) {
-            if (this._onChanges[i] === callback) {
-                this._onChanges.splice(i, 1);
-                return true;
-            }
-        }
-        return false;
-    }
-}
-/**
- * Reference to the created HTML element.
- * - can alse be used to store normal values, but it is not reactive.
- * @param value mostly an HTMLElement
- */
-function ref(value, onChange) {
-    return new KTRef(value, []);
-}
-/**
- * A helper to create redrawable elements
- * ```tsx
- * export function MyComponent() {
- *    let aa = 10;
- *    // ...
- *    // aa might be changed
- *    return createRedrawable(() => <div>{aa}</div>);
- * }
- * ```
- * Then the returned element has a `redraw` method to redraw itself with new values.
- * @param creator a simple creator function that returns an element
- * @returns created element's ref
- */
-function createRedrawable(creator) {
-    const elRef = ref();
-    const redraw = () => {
-        elRef.value = creator(); // ref setter automatically calls replaceWith
-        elRef.redraw = redraw;
-        return elRef.value;
-    };
-    redraw();
-    return elRef;
-}
-
-/**
- * LinearProgress component - mimics MUI LinearProgress appearance and behavior
- */
-function LinearProgress(props) {
-    let { variant = 'indeterminate', progress: value = 0, color = 'primary' } = props;
-    const classes = [
-        'mui-linear-progress',
-        `mui-linear-progress-${color}`,
-        `mui-linear-progress-${variant}`,
-        props.class ? props.class : '',
-    ].join(' ');
-    const styleString = parseStyle(props.style);
-    // Calculate progress percentage
-    let progressValue = Math.min(Math.max(value, 0), 100);
-    const barRef = ref();
-    const container = (jsx("div", { class: classes, style: styleString, role: "progressbar", "aria-valuenow": progressValue, children: jsx("div", { ref: barRef, class: "mui-linear-progress-bar", style: variant === 'determinate' ? `width: ${progressValue}%` : '' }) }));
-    $defines(container, {
-        progress: {
-            get() {
-                return progressValue;
-            },
-            set(newValue) {
-                progressValue = Math.min(Math.max(newValue, 0), 100);
-                if (variant === 'determinate') {
-                    barRef.value.style.width = `${progressValue}%`;
-                }
-            },
-        },
-    });
-    return container;
-}
-
-/**
- * TextField component - mimics MUI TextField appearance and behavior
- */
-function TextField(props) {
-    let { label = '', placeholder = '', value = '', type = 'text', disabled = false, readonly = false, required = false, error = false, helperText = '', fullWidth = false, multiline = false, rows = 3, size = 'medium', } = props;
-    const onInput = generateHandler(props, 'kt:input');
-    const onInputTrim = generateHandler(props, 'kt-trim:input');
-    const onChange = generateHandler(props, 'kt:change');
-    const onChangeTrim = generateHandler(props, 'kt-trim:change');
-    const onBlur = generateHandler(props, 'kt:blur');
-    const onFocus = generateHandler(props, 'kt:focus');
-    const updateContainerClass = () => {
-        container.className = [
-            'mui-textfield-root',
-            `mui-textfield-size-${size}`,
-            isFocused ? 'mui-textfield-focused' : '',
-            error ? 'mui-textfield-error' : '',
-            disabled ? 'mui-textfield-disabled' : '',
-            fullWidth ? 'mui-textfield-fullwidth' : '',
-            label && inputEl.value ? 'mui-textfield-has-value' : '',
-            label ? '' : 'mui-textfield-no-label',
-        ].join(' ');
-    };
-    const handleInput = () => {
-        updateContainerClass();
-        if (type === 'number') {
-            const v = Number(inputEl.value);
-            onInput(v);
-            onInputTrim(v);
-        }
-        else {
-            onInput(inputEl.value);
-            onInputTrim(inputEl.value.trim());
-        }
-    };
-    const handleChange = () => {
-        updateContainerClass();
-        if (type === 'number') {
-            const v = Number(inputEl.value);
-            onChange(v);
-            onChangeTrim(v);
-        }
-        else {
-            onChange(inputEl.value);
-            onChangeTrim(inputEl.value.trim());
-        }
-    };
-    const handleFocus = () => {
-        isFocused = true;
-        updateContainerClass();
-        onFocus(inputEl.value);
-    };
-    const handleBlur = () => {
-        isFocused = false;
-        updateContainerClass();
-        onBlur(inputEl.value);
-    };
-    const handleWrapperMouseDown = (e) => {
-        if (disabled) {
-            return;
-        }
-        const target = e.target;
-        if (!target || target === inputEl) {
-            return;
-        }
-        setTimeout(() => inputEl.focus(), 0);
-    };
-    const getPlaceholder = () => (label && !isFocused && !value ? '' : placeholder);
-    let isFocused = false;
-    const inputEl = multiline
-        ? (jsx("textarea", { class: "mui-textfield-input", placeholder: getPlaceholder(), value: value, disabled: disabled, readOnly: readonly, required: required, rows: rows, "on:input": handleInput, "on:change": handleChange, "on:focus": handleFocus, "on:blur": handleBlur }))
-        : (jsx("input", { type: type, class: "mui-textfield-input", placeholder: getPlaceholder(), value: value, disabled: disabled, readOnly: readonly, required: required, "on:input": handleInput, "on:change": handleChange, "on:focus": handleFocus, "on:blur": handleBlur }));
-    const helperTextEl = jsx("p", { class: "mui-textfield-helper-text", children: helperText });
-    const wrapperRef = createRedrawable(() => (jsxs("div", { class: "mui-textfield-wrapper", "on:mousedown": handleWrapperMouseDown, children: [jsxs("label", { "k-if": label, class: "mui-textfield-label", children: [label, required && jsx("span", { class: "mui-textfield-required", children: "*" })] }), jsx("div", { class: "mui-textfield-input-wrapper", children: inputEl }), jsx("fieldset", { class: "mui-textfield-fieldset", children: jsx("legend", { "k-if": label, class: "mui-textfield-legend", children: jsxs("span", { children: [label, required && '*'] }) }) })] })));
-    const container = (jsxs("div", { class: 'mui-textfield-root ' + (props.class ? props.class : ''), style: parseStyle(props.style), children: [wrapperRef, helperTextEl] }));
-    // Initialize classes
-    setTimeout(() => updateContainerClass(), 0);
-    $defines(container, {
-        value: {
-            get() {
-                return inputEl.value;
-            },
-            set(newValue) {
-                inputEl.value = newValue;
-                updateContainerClass();
-            },
-        },
-        label: {
-            get() {
-                return label;
-            },
-            set(newLabel) {
-                label = newLabel;
-                wrapperRef.redraw(); // label takes too much and should be redrawn
-                updateContainerClass();
-            },
-        },
-        placeholder: {
-            get() {
-                return placeholder;
-            },
-            set(newPlaceholder) {
-                placeholder = newPlaceholder;
-                inputEl.placeholder = getPlaceholder();
-            },
-        },
-        type: {
-            get() {
-                return type;
-            },
-            set(newType) {
-                type = newType || 'text';
-                inputEl.type = type;
-            },
-        },
-        disabled: {
-            get() {
-                return disabled;
-            },
-            set(val) {
-                disabled = !!val;
-                inputEl.disabled = disabled;
-                container.classList.toggle('mui-textfield-disabled', disabled);
-            },
-        },
-        readonly: {
-            get() {
-                return readonly;
-            },
-            set(val) {
-                readonly = Boolean(val);
-                inputEl.readOnly = readonly;
-            },
-        },
-        error: {
-            get() {
-                return error;
-            },
-            set(val) {
-                error = Boolean(val);
-                container.classList.toggle('mui-textfield-error', error);
-            },
-        },
-        helperText: {
-            get() {
-                return helperText;
-            },
-            set(text) {
-                helperTextEl.textContent = text;
-                helperTextEl.style.display = text ? 'block' : 'none';
-            },
-        },
-    });
-    return container;
-}
-
-/**
- * Radio component - mimics MUI Radio appearance and behavior
- */
-function Radio(props) {
-    const onChange = generateHandler(props, 'kt:change');
-    const toggleIcon = (checked) => {
-        uncheckedIcon.style.display = checked ? 'none' : '';
-        checkedIcon.style.display = checked ? '' : 'none';
-    };
-    // Handle change
-    const handleChange = () => {
-        if (disabled) {
-            return;
-        }
-        checked = input.checked;
-        toggleIcon(checked);
-        onChange(checked, value);
-    };
-    let { checked = false, value = '', label: text = '', size = 'small', disabled = false, color = 'primary' } = props;
-    const input = (jsx("input", { type: "radio", class: "mui-radio-input", checked: checked, value: value, disabled: disabled, "on:change": handleChange }));
-    const uncheckedIcon = (jsx("span", { class: "mui-radio-icon-unchecked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }) }) }));
-    const checkedIcon = (jsx("span", { class: "mui-radio-icon-checked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }) }) }));
-    // initialize icon state
-    toggleIcon(checked);
-    const container = (jsxs("label", { class: `mui-radio-wrapper ${props.class ?? ''} mui-radio-size-${size} ${disabled ? 'mui-radio-disabled' : ''} mui-radio-color-${color}`, style: parseStyle(props.style), children: [input, jsxs("span", { class: "mui-radio-icon", children: [uncheckedIcon, checkedIcon] }), jsx("span", { class: "mui-radio-label", children: text })] }));
-    $defines(container, {
-        value: {
-            get() {
-                return value;
-            },
-        },
-        checked: {
-            get() {
-                return checked;
-            },
-            set(newChecked) {
-                checked = newChecked;
-                input.checked = checked;
-                toggleIcon(checked);
-            },
-        },
-    });
-    return container;
-}
-/**
- * RadioGroup component - groups multiple radios together
- */
-function RadioGroup(props) {
-    let { value = '', size = 'small', row = false } = props;
-    const onChange = generateHandler(props, 'kt:change');
-    const changeHandler = (checked, value) => {
-        if (checked) {
-            onChange(value);
-        }
-        radios.forEach((radio) => (radio.checked = radio.value === value));
-    };
-    const radios = props.options.map((o) => {
-        o.size = size;
-        o.checked = value === o.value;
-        const originalChange = o['kt:change'];
-        if (originalChange) {
-            o['kt:change'] = (checked, newValue) => {
-                originalChange(checked, newValue);
-                changeHandler(checked, newValue);
-            };
-        }
-        else {
-            o['kt:change'] = changeHandler;
-        }
-        return Radio(o);
-    });
-    const container = (jsx("div", { class: `mui-radio-group ${row ? 'mui-radio-group-row' : ''} ${props.class ?? ''}`, style: parseStyle(props.style), role: "radiogroup", children: radios }));
-    $defines(container, {
-        value: {
-            get() {
-                return value;
-            },
-            set(newValue) {
-                value = newValue;
-                radios.forEach((radio) => (radio.checked = radio.value === value));
-            },
-        },
-    });
-    return container;
-}
-
-/**
- * Select component - mimics MUI Select appearance and behavior
- */
-function Select(props) {
-    let { value = '', options = [], label = '', placeholder = '', size = 'medium', fullWidth = false, disabled = false, } = props;
-    const onChange = generateHandler(props, 'kt:change');
-    let isOpen = false;
-    let isFocused = false;
-    const selectRef = ref();
-    const selectLabelRef = ref();
-    // Toggle dropdown
-    const toggleMenu = () => {
-        if (disabled) {
-            return;
-        }
-        isOpen = !isOpen;
-        updateMenu();
-    };
-    // Update menu visibility
-    const updateMenu = () => {
-        if (isOpen) {
-            menu.value.style.display = 'block';
-            void menu.value.offsetHeight; // & Trigger reflow to enable animation
-        }
-        else {
-            // Hide after animation completes
-            setTimeout(() => {
-                if (!isOpen) {
-                    menu.value.style.display = 'none';
-                }
-            }, 200);
-        }
-        menu.value.classList.toggle('mui-select-menu-open', isOpen);
-        selectRef.value.classList.toggle('mui-select-open', isOpen);
-    };
-    // Handle option click
-    const handleOptionClick = (newValue) => {
-        value = newValue;
-        isOpen = false;
-        onChange(value);
-        updateMenu();
-        updateLabelState();
-        valueDisplay.redraw();
-        setTimeout(() => menu.redraw(), 200);
-    };
-    // Close menu when clicking outside
-    const handleClickOutside = (e) => {
-        if (!selectRef.value.contains(e.target)) {
-            isOpen = false;
-            updateMenu();
-        }
-    };
-    // Handle focus
-    const handleFocus = () => {
-        isFocused = true;
-        updateLabelState();
-    };
-    const handleBlur = () => {
-        isFocused = false;
-        updateLabelState();
-    };
-    // Update label focused state
-    const updateLabelState = () => {
-        selectLabelRef.value.classList?.toggle('focused', isFocused || !!value);
-    };
-    const valueDisplay = createRedrawable(() => {
-        const o = options.find((opt) => opt.value === value);
-        let inner;
-        if (o === undefined) {
-            inner = jsx("span", { class: "mui-select-placeholder", children: placeholder || '\u00a0' });
-        }
-        else {
-            inner = o.label;
-        }
-        return jsx("div", { class: "mui-select-display", children: inner });
-    });
-    const menu = createRedrawable(() => {
-        return (jsx("div", { class: "mui-select-menu", style: "display: none;", children: options.map((option) => (jsx("div", { class: `mui-select-option ${option.value === value ? 'selected' : ''}`, "on:click": () => handleOptionClick(option.value), children: option.label }))) }));
-    });
-    // Create container
-    const container = (jsxs("div", { ref: selectRef, class: `mui-select-wrapper mui-select-size-${size} ${props.class ?? ''} ${fullWidth ? 'mui-select-fullWidth' : ''} ${disabled ? 'mui-select-disabled' : ''}`, style: parseStyle(props.style), children: [jsx("label", { "k-if": label, ref: selectLabelRef, class: `mui-select-label ${value || isFocused ? 'focused' : ''}`, children: label }), jsxs("div", { class: "mui-select-control mui-select-outlined", "on:click": toggleMenu, "on:focus": handleFocus, "on:blur": handleBlur, tabIndex: disabled ? -1 : 0, children: [valueDisplay, jsx("input", { type: "hidden", value: value }), jsx("fieldset", { class: "mui-select-fieldset", children: jsx("legend", { children: jsx("span", { children: label }) }) }), jsx("svg", { class: "mui-select-icon", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", width: "24", height: "24", children: jsx("path", { d: "M7 10l5 5 5-5Z", fill: "currentColor" }) })] }), menu] }));
-    $defines(container, {
-        value: {
-            get: () => value,
-            set: (newValue) => {
-                value = newValue;
-                updateLabelState();
-                valueDisplay.redraw();
-                menu.redraw();
-            },
-        },
-        disabled: {
-            get: () => disabled,
-            set: (newDisabled) => {
-                disabled = newDisabled;
-                if (disabled) {
-                    isOpen = false;
-                    updateMenu();
-                }
-                container.classList.toggle('mui-select-disabled', disabled);
-            },
-        },
-    });
-    // Add global click listener
-    setTimeout(() => {
-        document.removeEventListener('click', handleClickOutside);
-        document.addEventListener('click', handleClickOutside);
-        updateLabelState();
-    }, 0);
-    return container;
-}
-
-function DownloadIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" }) }));
+import{$parseStyle as e,$emptyFn as r,$defines as i,$arrayPushUnique as o,$arrayDelete as t,$max as a,$min as n,$round as l,$clamp as c}from"@ktjs/shared";import{jsxs as s,jsx as u}from"@ktjs/core/jsx-runtime";import{toReactive as d,computed as p,ref as m,KTFor as b,$modelOrRef as x,effect as g,dereactive as h}from"@ktjs/core";import{ExpandMoreIcon as f}from"@ktjs/mui-icon";var v=function(){function e(e){var r=this;this._insertTag=function(e){var i;i=0===r.tags.length?r.insertionPoint?r.insertionPoint.nextSibling:r.prepend?r.container.firstChild:r.before:r.tags[r.tags.length-1].nextSibling,r.container.insertBefore(e,i),r.tags.push(e)},this.isSpeedy=void 0===e.speedy||e.speedy,this.tags=[],this.ctr=0,this.nonce=e.nonce,this.key=e.key,this.container=e.container,this.prepend=e.prepend,this.insertionPoint=e.insertionPoint,this.before=null}var r=e.prototype;return r.hydrate=function(e){e.forEach(this._insertTag)},r.insert=function(e){this.ctr%(this.isSpeedy?65e3:1)==0&&this._insertTag(function(e){var r=document.createElement("style");return r.setAttribute("data-emotion",e.key),void 0!==e.nonce&&r.setAttribute("nonce",e.nonce),r.appendChild(document.createTextNode("")),r.setAttribute("data-s",""),r}(this));var r=this.tags[this.tags.length-1];if(this.isSpeedy){var i=function(e){if(e.sheet)return e.sheet;for(var r=0;r<document.styleSheets.length;r++)if(document.styleSheets[r].ownerNode===e)return document.styleSheets[r]}(r);try{i.insertRule(e,i.cssRules.length)}catch(e){}}else r.appendChild(document.createTextNode(e));this.ctr++},r.flush=function(){this.tags.forEach(function(e){var r;return null==(r=e.parentNode)?void 0:r.removeChild(e)}),this.tags=[],this.ctr=0},e}(),k="-ms-",w="-moz-",y="-webkit-",z="comm",C="rule",$="decl",S="@keyframes",L=Math.abs,A=String.fromCharCode,E=Object.assign;function I(e){return e.trim()}function j(e,r,i){return e.replace(r,i)}function R(e,r){return e.indexOf(r)}function M(e,r){return 0|e.charCodeAt(r)}function T(e,r,i){return e.slice(r,i)}function O(e){return e.length}function W(e){return e.length}function D(e,r){return r.push(e),e}var H=1,B=1,P=0,G=0,U=0,V="";function q(e,r,i,o,t,a,n){return{value:e,root:r,parent:i,type:o,props:t,children:a,line:H,column:B,length:n,return:""}}function F(e,r){return E(q("",null,null,"",null,null,0),e,{length:-e.length},r)}function _(){return U=G>0?M(V,--G):0,B--,10===U&&(B=1,H--),U}function N(){return U=G<P?M(V,G++):0,B++,10===U&&(B=1,H++),U}function Y(){return M(V,G)}function X(){return G}function Z(e,r){return T(V,e,r)}function J(e){switch(e){case 0:case 9:case 10:case 13:case 32:return 5;case 33:case 43:case 44:case 47:case 62:case 64:case 126:case 59:case 123:case 125:return 4;case 58:return 3;case 34:case 39:case 40:case 91:return 2;case 41:case 93:return 1}return 0}function K(e){return H=B=1,P=O(V=e),G=0,[]}function Q(e){return V="",e}function ee(e){return I(Z(G-1,oe(91===e?e+2:40===e?e+1:e)))}function re(e){for(;(U=Y())&&U<33;)N();return J(e)>2||J(U)>3?"":" "}function ie(e,r){for(;--r&&N()&&!(U<48||U>102||U>57&&U<65||U>70&&U<97););return Z(e,X()+(r<6&&32==Y()&&32==N()))}function oe(e){for(;N();)switch(U){case e:return G;case 34:case 39:34!==e&&39!==e&&oe(U);break;case 40:41===e&&oe(e);break;case 92:N()}return G}function te(e,r){for(;N()&&e+U!==57&&(e+U!==84||47!==Y()););return"/*"+Z(r,G-1)+"*"+A(47===e?e:N())}function ae(e){for(;!J(Y());)N();return Z(e,G)}function ne(e){return Q(le("",null,null,null,[""],e=K(e),0,[0],e))}function le(e,r,i,o,t,a,n,l,c){for(var s=0,u=0,d=n,p=0,m=0,b=0,x=1,g=1,h=1,f=0,v="",k=t,w=a,y=o,z=v;g;)switch(b=f,f=N()){case 40:if(108!=b&&58==M(z,d-1)){-1!=R(z+=j(ee(f),"&","&\f"),"&\f")&&(h=-1);break}case 34:case 39:case 91:z+=ee(f);break;case 9:case 10:case 13:case 32:z+=re(b);break;case 92:z+=ie(X()-1,7);continue;case 47:switch(Y()){case 42:case 47:D(se(te(N(),X()),r,i),c);break;default:z+="/"}break;case 123*x:l[s++]=O(z)*h;case 125*x:case 59:case 0:switch(f){case 0:case 125:g=0;case 59+u:-1==h&&(z=j(z,/\f/g,"")),m>0&&O(z)-d&&D(m>32?ue(z+";",o,i,d-1):ue(j(z," ","")+";",o,i,d-2),c);break;case 59:z+=";";default:if(D(y=ce(z,r,i,s,u,t,l,v,k=[],w=[],d),a),123===f)if(0===u)le(z,r,y,y,k,a,d,l,w);else switch(99===p&&110===M(z,3)?100:p){case 100:case 108:case 109:case 115:le(e,y,y,o&&D(ce(e,y,y,0,0,t,l,v,t,k=[],d),w),t,w,d,l,o?k:w);break;default:le(z,y,y,y,[""],w,0,l,w)}}s=u=m=0,x=h=1,v=z="",d=n;break;case 58:d=1+O(z),m=b;default:if(x<1)if(123==f)--x;else if(125==f&&0==x++&&125==_())continue;switch(z+=A(f),f*x){case 38:h=u>0?1:(z+="\f",-1);break;case 44:l[s++]=(O(z)-1)*h,h=1;break;case 64:45===Y()&&(z+=ee(N())),p=Y(),u=d=O(v=z+=ae(X())),f++;break;case 45:45===b&&2==O(z)&&(x=0)}}return a}function ce(e,r,i,o,t,a,n,l,c,s,u){for(var d=t-1,p=0===t?a:[""],m=W(p),b=0,x=0,g=0;b<o;++b)for(var h=0,f=T(e,d+1,d=L(x=n[b])),v=e;h<m;++h)(v=I(x>0?p[h]+" "+f:j(f,/&\f/g,p[h])))&&(c[g++]=v);return q(e,r,i,0===t?C:l,c,s,u)}function se(e,r,i){return q(e,r,i,z,A(U),T(e,2,-2),0)}function ue(e,r,i,o){return q(e,r,i,$,T(e,0,o),T(e,o+1,-1),o)}function de(e,r){for(var i="",o=W(e),t=0;t<o;t++)i+=r(e[t],t,e,r)||"";return i}function pe(e,r,i,o){switch(e.type){case"@layer":if(e.children.length)break;case"@import":case $:return e.return=e.return||e.value;case z:return"";case S:return e.return=e.value+"{"+de(e.children,o)+"}";case C:e.value=e.props.join(",")}return O(i=de(e.children,o))?e.return=e.value+"{"+i+"}":""}function me(e){var r=W(e);return function(i,o,t,a){for(var n="",l=0;l<r;l++)n+=e[l](i,o,t,a)||"";return n}}function be(e){var r=Object.create(null);return function(i){return void 0===r[i]&&(r[i]=e(i)),r[i]}}var xe="undefined"!=typeof document,ge=function(e,r,i){for(var o=0,t=0;o=t,t=Y(),38===o&&12===t&&(r[i]=1),!J(t);)N();return Z(e,G)},he=function(e,r){return Q(function(e,r){var i=-1,o=44;do{switch(J(o)){case 0:38===o&&12===Y()&&(r[i]=1),e[i]+=ge(G-1,r,i);break;case 2:e[i]+=ee(o);break;case 4:if(44===o){e[++i]=58===Y()?"&\f":"",r[i]=e[i].length;break}default:e[i]+=A(o)}}while(o=N());return e}(K(e),r))},fe=new WeakMap,ve=function(e){if("rule"===e.type&&e.parent&&!(e.length<1)){for(var r=e.value,i=e.parent,o=e.column===i.column&&e.line===i.line;"rule"!==i.type;)if(!(i=i.parent))return;if((1!==e.props.length||58===r.charCodeAt(0)||fe.get(i))&&!o){fe.set(e,!0);for(var t=[],a=he(r,t),n=i.props,l=0,c=0;l<a.length;l++)for(var s=0;s<n.length;s++,c++)e.props[c]=t[l]?a[l].replace(/&\f/g,n[s]):n[s]+" "+a[l]}}},ke=function(e){if("decl"===e.type){var r=e.value;108===r.charCodeAt(0)&&98===r.charCodeAt(2)&&(e.return="",e.value="")}};function we(e,r){switch(function(e,r){return 45^M(e,0)?(((r<<2^M(e,0))<<2^M(e,1))<<2^M(e,2))<<2^M(e,3):0}(e,r)){case 5103:return y+"print-"+e+e;case 5737:case 4201:case 3177:case 3433:case 1641:case 4457:case 2921:case 5572:case 6356:case 5844:case 3191:case 6645:case 3005:case 6391:case 5879:case 5623:case 6135:case 4599:case 4855:case 4215:case 6389:case 5109:case 5365:case 5621:case 3829:return y+e+e;case 5349:case 4246:case 4810:case 6968:case 2756:return y+e+w+e+k+e+e;case 6828:case 4268:return y+e+k+e+e;case 6165:return y+e+k+"flex-"+e+e;case 5187:return y+e+j(e,/(\w+).+(:[^]+)/,y+"box-$1$2"+k+"flex-$1$2")+e;case 5443:return y+e+k+"flex-item-"+j(e,/flex-|-self/,"")+e;case 4675:return y+e+k+"flex-line-pack"+j(e,/align-content|flex-|-self/,"")+e;case 5548:return y+e+k+j(e,"shrink","negative")+e;case 5292:return y+e+k+j(e,"basis","preferred-size")+e;case 6060:return y+"box-"+j(e,"-grow","")+y+e+k+j(e,"grow","positive")+e;case 4554:return y+j(e,/([^-])(transform)/g,"$1"+y+"$2")+e;case 6187:return j(j(j(e,/(zoom-|grab)/,y+"$1"),/(image-set)/,y+"$1"),e,"")+e;case 5495:case 3959:return j(e,/(image-set\([^]*)/,y+"$1$`$1");case 4968:return j(j(e,/(.+:)(flex-)?(.*)/,y+"box-pack:$3"+k+"flex-pack:$3"),/s.+-b[^;]+/,"justify")+y+e+e;case 4095:case 3583:case 4068:case 2532:return j(e,/(.+)-inline(.+)/,y+"$1$2")+e;case 8116:case 7059:case 5753:case 5535:case 5445:case 5701:case 4933:case 4677:case 5533:case 5789:case 5021:case 4765:if(O(e)-1-r>6)switch(M(e,r+1)){case 109:if(45!==M(e,r+4))break;case 102:return j(e,/(.+:)(.+)-([^]+)/,"$1"+y+"$2-$3$1"+w+(108==M(e,r+3)?"$3":"$2-$3"))+e;case 115:return~R(e,"stretch")?we(j(e,"stretch","fill-available"),r)+e:e}break;case 4949:if(115!==M(e,r+1))break;case 6444:switch(M(e,O(e)-3-(~R(e,"!important")&&10))){case 107:return j(e,":",":"+y)+e;case 101:return j(e,/(.+:)([^;!]+)(;|!.+)?/,"$1"+y+(45===M(e,14)?"inline-":"")+"box$3$1"+y+"$2$3$1"+k+"$2box$3")+e}break;case 5936:switch(M(e,r+11)){case 114:return y+e+k+j(e,/[svh]\w+-[tblr]{2}/,"tb")+e;case 108:return y+e+k+j(e,/[svh]\w+-[tblr]{2}/,"tb-rl")+e;case 45:return y+e+k+j(e,/[svh]\w+-[tblr]{2}/,"lr")+e}return y+e+k+e+e}return e}var ye,ze,Ce=xe?void 0:(ye=function(){return be(function(){return{}})},ze=new WeakMap,function(e){if(ze.has(e))return ze.get(e);var r=ye(e);return ze.set(e,r),r}),$e=[function(e,r,i,o){if(e.length>-1&&!e.return)switch(e.type){case $:e.return=we(e.value,e.length);break;case S:return de([F(e,{value:j(e.value,"@","@"+y)})],o);case C:if(e.length)return function(e,r){return e.map(r).join("")}(e.props,function(r){switch(function(e,r){return(e=r.exec(e))?e[0]:e}(r,/(::plac\w+|:read-\w+)/)){case":read-only":case":read-write":return de([F(e,{props:[j(r,/:(read-\w+)/,":-moz-$1")]})],o);case"::placeholder":return de([F(e,{props:[j(r,/:(plac\w+)/,":"+y+"input-$1")]}),F(e,{props:[j(r,/:(plac\w+)/,":-moz-$1")]}),F(e,{props:[j(r,/:(plac\w+)/,k+"input-$1")]})],o)}return""})}}],Se=function(e){var r=e.key;if(xe&&"css"===r){var i=document.querySelectorAll("style[data-emotion]:not([data-s])");Array.prototype.forEach.call(i,function(e){-1!==e.getAttribute("data-emotion").indexOf(" ")&&(document.head.appendChild(e),e.setAttribute("data-s",""))})}var o,t,a=e.stylisPlugins||$e,n={},l=[];xe&&(o=e.container||document.head,Array.prototype.forEach.call(document.querySelectorAll('style[data-emotion^="'+r+' "]'),function(e){for(var r=e.getAttribute("data-emotion").split(" "),i=1;i<r.length;i++)n[r[i]]=!0;l.push(e)}));var c,s=[ve,ke];if(Ce){var u=[pe],d=me(s.concat(a,u)),p=Ce(a)(r),m=function(e,r){var i=r.name;return void 0===p[i]&&(p[i]=de(ne(e?e+"{"+r.styles+"}":r.styles),d)),p[i]};t=function(e,r,i,o){var t=r.name,a=m(e,r);return void 0===h.compat?(o&&(h.inserted[t]=!0),a):o?void(h.inserted[t]=a):a}}else{var b,x=[pe,(c=function(e){b.insert(e)},function(e){e.root||(e=e.return)&&c(e)})],g=me(s.concat(a,x));t=function(e,r,i,o){b=i,de(ne(e?e+"{"+r.styles+"}":r.styles),g),o&&(h.inserted[r.name]=!0)}}var h={key:r,sheet:new v({key:r,container:o,nonce:e.nonce,speedy:e.speedy,prepend:e.prepend,insertionPoint:e.insertionPoint}),nonce:e.nonce,inserted:n,registered:{},insert:t};return h.sheet.hydrate(l),h};var Le={animationIterationCount:1,aspectRatio:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,msGridRow:1,msGridRowSpan:1,msGridColumn:1,msGridColumnSpan:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,scale:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1},Ae=/[A-Z]|^ms/g,Ee=/_EMO_([^_]+?)_([^]*?)_EMO_/g,Ie=function(e){return 45===e.charCodeAt(1)},je=function(e){return null!=e&&"boolean"!=typeof e},Re=be(function(e){return Ie(e)?e:e.replace(Ae,"-$&").toLowerCase()}),Me=function(e,r){switch(e){case"animation":case"animationName":if("string"==typeof r)return r.replace(Ee,function(e,r,i){return Oe={name:r,styles:i,next:Oe},r})}return 1===Le[e]||Ie(e)||"number"!=typeof r||0===r?r:r+"px"};function Te(e,r,i){if(null==i)return"";var o=i;if(void 0!==o.__emotion_styles)return o;switch(typeof i){case"boolean":return"";case"object":var t=i;if(1===t.anim)return Oe={name:t.name,styles:t.styles,next:Oe},t.name;var a=i;if(void 0!==a.styles){var n=a.next;if(void 0!==n)for(;void 0!==n;)Oe={name:n.name,styles:n.styles,next:Oe},n=n.next;return a.styles+";"}return function(e,r,i){var o="";if(Array.isArray(i))for(var t=0;t<i.length;t++)o+=Te(e,r,i[t])+";";else for(var a in i){var n=i[a];if("object"!=typeof n){var l=n;null!=r&&void 0!==r[l]?o+=a+"{"+r[l]+"}":je(l)&&(o+=Re(a)+":"+Me(a,l)+";")}else if(!Array.isArray(n)||"string"!=typeof n[0]||null!=r&&void 0!==r[n[0]]){var c=Te(e,r,n);switch(a){case"animation":case"animationName":o+=Re(a)+":"+c+";";break;default:o+=a+"{"+c+"}"}}else for(var s=0;s<n.length;s++)je(n[s])&&(o+=Re(a)+":"+Me(a,n[s])+";")}return o}(e,r,i)}var l=i;if(null==r)return l;var c=r[l];return void 0!==c?c:l}var Oe,We=/label:\s*([^\s;{]+)\s*(;|$)/g;function De(e,r,i){if(1===e.length&&"object"==typeof e[0]&&null!==e[0]&&void 0!==e[0].styles)return e[0];var o=!0,t="";Oe=void 0;var a=e[0];null==a||void 0===a.raw?(o=!1,t+=Te(i,r,a)):t+=a[0];for(var n=1;n<e.length;n++){if(t+=Te(i,r,e[n]),o)t+=a[n]}We.lastIndex=0;for(var l,c="";null!==(l=We.exec(t));)c+="-"+l[1];var s=function(e){for(var r,i=0,o=0,t=e.length;t>=4;++o,t-=4)r=1540483477*(65535&(r=255&e.charCodeAt(o)|(255&e.charCodeAt(++o))<<8|(255&e.charCodeAt(++o))<<16|(255&e.charCodeAt(++o))<<24))+(59797*(r>>>16)<<16),i=1540483477*(65535&(r^=r>>>24))+(59797*(r>>>16)<<16)^1540483477*(65535&i)+(59797*(i>>>16)<<16);switch(t){case 3:i^=(255&e.charCodeAt(o+2))<<16;case 2:i^=(255&e.charCodeAt(o+1))<<8;case 1:i=1540483477*(65535&(i^=255&e.charCodeAt(o)))+(59797*(i>>>16)<<16)}return(((i=1540483477*(65535&(i^=i>>>13))+(59797*(i>>>16)<<16))^i>>>15)>>>0).toString(36)}(t)+c;return{name:s,styles:t,next:Oe}}var He="undefined"!=typeof document;function Be(e,r,i){var o="";return i.split(" ").forEach(function(i){void 0!==e[i]?r.push(e[i]+";"):i&&(o+=i+" ")}),o}function Pe(e,r){if(void 0===e.inserted[r.name])return e.insert("",r,e.sheet,!0)}function Ge(e,r,i){var o=[],t=Be(e,o,i);return o.length<2?i:t+r(o)}var Ue=function e(r){for(var i="",o=0;o<r.length;o++){var t=r[o];if(null!=t){var a=void 0;switch(typeof t){case"boolean":break;case"object":if(Array.isArray(t))a=e(t);else for(var n in a="",t)t[n]&&n&&(a&&(a+=" "),a+=n);break;default:a=t}a&&(i&&(i+=" "),i+=a)}}return i},Ve=function(e){var r=Se(e);r.sheet.speedy=function(e){this.isSpeedy=e},r.compat=!0;var i=function(){for(var e=arguments.length,i=new Array(e),o=0;o<e;o++)i[o]=arguments[o];var t=De(i,r.registered,void 0);return function(e,r){!function(e,r){var i=e.key+"-"+r.name;void 0===e.registered[i]&&(e.registered[i]=r.styles)}(e,r);var i=e.key+"-"+r.name;if(void 0===e.inserted[r.name]){var o="",t=r;do{var a=e.insert(r===t?"."+i:"",t,e.sheet,!0);He||void 0===a||(o+=a),t=t.next}while(void 0!==t);if(!He&&0!==o.length);}}(r,t),r.key+"-"+t.name};return{css:i,cx:function(){for(var e=arguments.length,o=new Array(e),t=0;t<e;t++)o[t]=arguments[t];return Ge(r.registered,i,Ue(o))},injectGlobal:function(){for(var e=arguments.length,i=new Array(e),o=0;o<e;o++)i[o]=arguments[o];var t=De(i,r.registered);Pe(r,t)},keyframes:function(){for(var e=arguments.length,i=new Array(e),o=0;o<e;o++)i[o]=arguments[o];var t=De(i,r.registered),a="animation-"+t.name;return Pe(r,{name:t.name,styles:"@keyframes "+a+"{"+t.styles+"}"}),a},hydrate:function(e){e.forEach(function(e){r.inserted[e]=!0})},flush:function(){r.registered={},r.inserted={},r.sheet.flush()},sheet:r.sheet,cache:r,getRegisteredStyles:Be.bind(null,r.registered),merge:Ge.bind(null,r.registered,i)}}({key:"css"}),qe=Ve.injectGlobal;qe`
+/* Global UI Color Variables - MUI-like color palette */
+
+:root {
+  /* Primary colors */
+  --kt-color-primary: rgb(25, 118, 210);
+  --kt-color-primary-light: rgb(66, 165, 245);
+  --kt-color-primary-dark: rgb(21, 101, 192);
+
+  /* Secondary colors */
+  --kt-color-secondary: rgb(156, 39, 176);
+  --kt-color-secondary-light: rgb(186, 104, 200);
+  --kt-color-secondary-dark: rgb(123, 31, 162);
+
+  /* Error colors */
+  --kt-color-error: rgb(211, 47, 47);
+  --kt-color-error-light: rgb(239, 83, 80);
+  --kt-color-error-dark: rgb(198, 40, 40);
+
+  /* Warning colors */
+  --kt-color-warning: rgb(237, 108, 2);
+  --kt-color-warning-light: rgb(255, 152, 0);
+  --kt-color-warning-dark: rgb(230, 81, 0);
+
+  /* Info colors */
+  --kt-color-info: rgb(2, 136, 209);
+  --kt-color-info-light: rgb(41, 182, 246);
+  --kt-color-info-dark: rgb(1, 87, 155);
+
+  /* Success colors */
+  --kt-color-success: rgb(46, 125, 50);
+  --kt-color-success-light: rgb(102, 187, 106);
+  --kt-color-success-dark: rgb(27, 94, 32);
+
+  /* Text colors */
+  --kt-color-text-primary: rgba(0, 0, 0, 0.87);
+  --kt-color-text-secondary: rgba(0, 0, 0, 0.6);
+  --kt-color-text-disabled: rgba(0, 0, 0, 0.38);
+
+  /* Background colors */
+  --kt-color-background-paper: rgb(255, 255, 255);
+  --kt-color-background-default: rgb(250, 250, 250);
+
+  /* Divider */
+  --kt-color-divider: rgba(0, 0, 0, 0.12);
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Primary colors */
+    --kt-color-primary: rgb(144, 202, 249);
+    --kt-color-primary-light: rgb(179, 229, 252);
+    --kt-color-primary-dark: rgb(66, 165, 245);
+
+    /* Secondary colors */
+    --kt-color-secondary: rgb(206, 147, 216);
+    --kt-color-secondary-light: rgb(225, 190, 231);
+    --kt-color-secondary-dark: rgb(186, 104, 200);
+
+    /* Error colors */
+    --kt-color-error: rgb(244, 67, 54);
+    --kt-color-error-light: rgb(229, 115, 115);
+    --kt-color-error-dark: rgb(211, 47, 47);
+
+    /* Warning colors */
+    --kt-color-warning: rgb(255, 152, 0);
+    --kt-color-warning-light: rgb(255, 183, 77);
+    --kt-color-warning-dark: rgb(245, 124, 0);
+
+    /* Info colors */
+    --kt-color-info: rgb(41, 182, 246);
+    --kt-color-info-light: rgb(79, 195, 247);
+    --kt-color-info-dark: rgb(2, 136, 209);
+
+    /* Success colors */
+    --kt-color-success: rgb(102, 187, 106);
+    --kt-color-success-light: rgb(129, 199, 132);
+    --kt-color-success-dark: rgb(76, 175, 80);
+
+    /* Text colors */
+    --kt-color-text-primary: rgba(255, 255, 255, 0.87);
+    --kt-color-text-secondary: rgba(255, 255, 255, 0.6);
+    --kt-color-text-disabled: rgba(255, 255, 255, 0.38);
+
+    /* Background colors */
+    --kt-color-background-paper: rgb(18, 18, 18);
+    --kt-color-background-default: rgb(12, 12, 12);
+
+    /* Divider */
+    --kt-color-divider: rgba(255, 255, 255, 0.12);
+  }
+}
+
+`,qe`
+/* Alert Component Styles - Mimics MUI Alert */
+
+.mui-alert {
+  display: flex;
+  padding: 6px 16px;
+  font-size: 0.875rem;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-weight: 400;
+  line-height: 1.43;
+  border-radius: 4px;
+  letter-spacing: 0.01071em;
+  align-items: center;
+  gap: 12px;
+  position: relative;
+}
+
+.mui-alert-icon-wrapper {
+  display: flex;
+  opacity: 0.9;
+  padding: 7px 0;
+  font-size: 22px;
+  margin-right: -4px;
+}
+
+.mui-alert-icon {
+  flex-shrink: 0;
+}
+
+.mui-alert-message {
+  padding: 8px 0;
+  min-width: 0;
+  overflow: auto;
+  flex: 1;
+}
+
+.mui-alert-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  margin-left: auto;
+  margin-right: -8px;
+  border-radius: 4px;
+  opacity: 0.6;
+  transition:
+    opacity 0.3s,
+    background-color 0.3s;
+}
+
+.mui-alert-close:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+/* Standard Variant */
+.mui-alert-standard.mui-alert-success {
+  color: rgb(30, 70, 32);
+  background-color: rgb(237, 247, 237);
+}
+
+.mui-alert-standard.mui-alert-info {
+  color: rgb(1, 67, 97);
+  background-color: rgb(229, 246, 253);
+}
+
+.mui-alert-standard.mui-alert-warning {
+  color: rgb(102, 60, 0);
+  background-color: rgb(255, 244, 229);
+}
+
+.mui-alert-standard.mui-alert-error {
+  color: rgb(95, 33, 32);
+  background-color: rgb(253, 237, 237);
+}
+
+/* Filled Variant */
+.mui-alert-filled.mui-alert-success {
+  color: rgb(255, 255, 255);
+  background-color: rgb(46, 125, 50);
+}
+
+.mui-alert-filled.mui-alert-info {
+  color: rgb(255, 255, 255);
+  background-color: rgb(2, 136, 209);
+}
+
+.mui-alert-filled.mui-alert-warning {
+  color: rgb(255, 255, 255);
+  background-color: rgb(237, 108, 2);
+}
+
+.mui-alert-filled.mui-alert-error {
+  color: rgb(255, 255, 255);
+  background-color: rgb(211, 47, 47);
+}
+
+/* Outlined Variant */
+.mui-alert-outlined.mui-alert-success {
+  color: rgb(30, 70, 32);
+  border: 1px solid rgb(46, 125, 50);
+  background-color: transparent;
+}
+
+.mui-alert-outlined.mui-alert-info {
+  color: rgb(1, 67, 97);
+  border: 1px solid rgb(2, 136, 209);
+  background-color: transparent;
+}
+
+.mui-alert-outlined.mui-alert-warning {
+  color: rgb(102, 60, 0);
+  border: 1px solid rgb(237, 108, 2);
+  background-color: transparent;
+}
+
+.mui-alert-outlined.mui-alert-error {
+  color: rgb(95, 33, 32);
+  border: 1px solid rgb(211, 47, 47);
+  background-color: transparent;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .mui-alert-standard.mui-alert-success {
+    color: rgb(183, 223, 185);
+    background-color: rgb(12, 19, 13);
+  }
+
+  .mui-alert-standard.mui-alert-info {
+    color: rgb(166, 213, 250);
+    background-color: rgb(7, 19, 24);
+  }
+
+  .mui-alert-standard.mui-alert-warning {
+    color: rgb(255, 213, 153);
+    background-color: rgb(25, 18, 7);
+  }
+
+  .mui-alert-standard.mui-alert-error {
+    color: rgb(244, 199, 199);
+    background-color: rgb(22, 11, 11);
+  }
+
+  .mui-alert-close:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+  }
+}
+
+`;const Fe=(e,r,i)=>{if(i)for(const o in r)o.startsWith("on:")&&!i.includes(o)&&e.addEventListener(o.slice(3),r[o]);else for(const i in r)i.startsWith("on:")&&e.addEventListener(i.slice(3),r[i])},_e={success:(e,r)=>u("svg",{class:e,viewBox:"0 0 24 24",width:r,height:r,children:u("path",{fill:"currentColor",d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"})}),error:(e,r)=>u("svg",{class:e,viewBox:"0 0 24 24",width:r,height:r,children:u("path",{fill:"currentColor",d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"})}),warning:(e,r)=>u("svg",{class:e,viewBox:"0 0 24 24",width:r,height:r,children:u("path",{fill:"currentColor",d:"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"})}),info:(e,r)=>u("svg",{class:e,viewBox:"0 0 24 24",width:r,height:r,children:u("path",{fill:"currentColor",d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"})})};function Ne(r){const i=d(r.class??""),o=d(e(r.style)),t=d(r.children),a=d(r.severity??"info"),n=d(r.variant??"standard"),l=d(r.icon??!0),c=d(r.iconSize??"22px"),m=r["on:close"],b=p(()=>`mui-alert mui-alert-${a.value} mui-alert-${n.value} ${i.value?i.value:""}`,[a,n,i]),x=p(()=>{if(!1===l.value)return null;if(!0===l.value){return(_e[a.value]||_e.info)(c.value,"mui-alert-icon")}return l},[l,c,a]),g=s("div",{class:b,style:o,role:"alert",children:[x&&u("div",{class:"mui-alert-icon-wrapper",children:x}),u("div",{class:"mui-alert-message",children:t}),u("button",{"k-if":m,class:"mui-alert-close","on:click":m,"aria-label":"Close",children:u("svg",{viewBox:"0 0 24 24",width:"18px",height:"18px",children:u("path",{fill:"currentColor",d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"})})})]});return Fe(g,r),g}function Ye(i){const o=i["on:click"]??r,t=m(),a=m(),n=d(i.class??""),l=d(e(i.style)),c=d(i.variant??"text"),b=d(i.color??"primary"),x=d(i.size??"medium"),g=d(i.fullWidth??!1),h=d(i.iconOnly??!1),f=d(i.disabled??!1),v=p(()=>["mui-button",`mui-button-${c.value}`,`mui-button-${c.value}-${b.value}`,`mui-button-size-${x.value}`,g.value?"mui-button-fullwidth":"",h.value?"mui-button-icon-only":"",f.value?"mui-button-disabled":"",n.value].join(" "),[c,b,x,g,h,f,n]),k=(e,r)=>{const i=t.value,o=a.value;if(!i||!o)return;const n=i.getBoundingClientRect(),l=Math.max(n.width,n.height),c=e-n.left-l/2,s=r-n.top-l/2,d=u("span",{class:"mui-button-ripple-effect",style:`width:${l}px; height:${l}px; left:${c}px; top:${s}px;`});o.appendChild(d),setTimeout(()=>d.remove(),600)},w=s("button",{ref:t,class:v,style:l,type:d(i.type??"button"),disabled:f,"on:click":e=>{f.value?e.preventDefault():(k(e.clientX,e.clientY),o(e))},children:[u("span",{"k-if":i.startIcon,class:"mui-button-start-icon",children:i.startIcon}),u("span",{class:"mui-button-label",children:i.children}),u("span",{"k-if":i.endIcon,class:"mui-button-end-icon",children:i.endIcon}),u("span",{ref:a,class:"mui-button-ripple"})]}),y=i["on:dblclick"];return y&&w.addEventListener("dblclick",e=>{f.value?e.preventDefault():(k(e.clientX,e.clientY),y(e))}),Fe(w,i,["on:dblclick","on:click"]),w}function Xe(i){const o=i["on:select"]??r,t=i["on:click"]??r,a=d(i.class??""),n=d(e(i.style)),l=m(!1),c=d(i.label??""),x=d(i.options),g=d(i.variant??"contained"),h=d(i.color??"primary"),v=d(i.size??"medium"),k=d(i.disabled??!1,e=>{e&&(l.value=!1)}),w=d(i.fullWidth??!1),y=p(()=>["mui-dropdown-button-wrapper",w.value?"mui-dropdown-button-fullwidth":"",k.value?"mui-dropdown-button-disabled":"",l.value?"mui-dropdown-button-open":"",a.value].join(" "),[w,k,l,a]),z=p(()=>["mui-button",`mui-button-${g.value}`,`mui-button-${g.value}-${h.value}`,`mui-button-size-${v.value}`,w.value?"mui-button-fullwidth":"","mui-dropdown-button-trigger"].join(" "),[g,h,v,w]),C=p(()=>"mui-dropdown-button-menu "+(l.value?"mui-dropdown-button-menu-open":""),[l]),$=()=>{l.value=!1},S=e=>{const r=e.currentTarget;if(!r)return;const i=r.dataset.value;if(!i)return;const t=x.value.find(e=>e.value===i);t&&!t.disabled&&(o(i,t),$())},L=x.toComputed(e=>e.map(e=>e.label instanceof Node?(e.label.removeEventListener("click",S),e.label.addEventListener("click",S),e):u("button",{type:"button",class:"mui-dropdown-button-option "+(e.disabled?"mui-dropdown-button-option-disabled":""),"data-value":e.value,disabled:e.disabled??!1,"on:click":S,role:"menuitem",children:e.label}))),A=s("div",{class:y,style:n,children:[s("button",{type:"button",class:z,disabled:k,"on:click":e=>{k.value?e.preventDefault():(l.value=!l.value,t(e))},"aria-haspopup":"menu","aria-expanded":l,children:[u("span",{class:"mui-button-label",children:c}),u("span",{class:"mui-dropdown-button-end-icon",children:u(f,{})})]}),u("div",{class:C,role:"menu",children:u(b,{list:L})})]}),E=e=>{const r=e.target;r&&(A.contains(r)||$())},I=e=>{"Escape"===e.key&&$()};document.addEventListener("click",E),document.addEventListener("keydown",I);const j=A.remove;return A.remove=()=>(document.removeEventListener("click",E),document.removeEventListener("keydown",I),j.call(A)),Fe(A,i,["on:click","on:select"]),A}qe`
+/* Button Component Styles - MUI-like */
+
+.mui-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  outline: 0;
+  border: 0;
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  text-decoration: none;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-weight: 500;
+  line-height: 1.75;
+  letter-spacing: 0.02857em;
+  min-width: 64px;
+  transition:
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 4px;
+}
+
+.mui-button:hover {
+  text-decoration: none;
+}
+
+.mui-button-fullwidth {
+  width: 100%;
+}
+
+.mui-button-disabled {
+  pointer-events: none;
+  cursor: default;
+}
+
+/* Button label */
+.mui-button-label {
+  width: 100%;
+  display: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+}
+
+/* Icons */
+.mui-button-start-icon {
+  display: inherit;
+  margin-right: 8px;
+  margin-left: -4px;
+}
+
+.mui-button-end-icon {
+  display: inherit;
+  margin-left: 8px;
+  margin-right: -4px;
+}
+
+.mui-button-size-small .mui-button-start-icon {
+  margin-left: -2px;
+}
+
+.mui-button-size-small .mui-button-end-icon {
+  margin-right: -2px;
+}
+
+/* Size variants */
+.mui-button-size-small {
+  padding: 4px 10px;
+  font-size: 0.8125rem;
+}
+
+.mui-button-size-medium {
+  padding: 6px 16px;
+  font-size: 0.875rem;
+}
+
+.mui-button-size-large {
+  padding: 8px 22px;
+  font-size: 0.9375rem;
+}
+
+/* Icon-only variant */
+.mui-button-icon-only {
+  min-width: auto;
+  padding: 8px;
+}
+
+.mui-button-icon-only.mui-button-size-small {
+  padding: 5px;
+}
+
+.mui-button-icon-only.mui-button-size-medium {
+  padding: 8px;
+}
+
+.mui-button-icon-only.mui-button-size-large {
+  padding: 12px;
+}
+
+.mui-button-icon-only .mui-button-start-icon,
+.mui-button-icon-only .mui-button-end-icon {
+  margin: 0;
+}
+
+/* Text variant */
+.mui-button-text {
+  padding: 6px 8px;
+}
+
+.mui-button-text.mui-button-size-small {
+  padding: 4px 5px;
+}
+
+.mui-button-text.mui-button-size-large {
+  padding: 8px 11px;
+}
+
+/* Text variant - Primary */
+.mui-button-text-primary {
+  color: #1976d2;
+}
+
+.mui-button-text-primary:hover {
+  background-color: rgba(25, 118, 210, 0.04);
+}
+
+/* Text variant - Secondary */
+.mui-button-text-secondary {
+  color: #9c27b0;
+}
+
+.mui-button-text-secondary:hover {
+  background-color: rgba(156, 39, 176, 0.04);
+}
+
+/* Text variant - Error */
+.mui-button-text-error {
+  color: #d32f2f;
+}
+
+.mui-button-text-error:hover {
+  background-color: rgba(211, 47, 47, 0.04);
+}
+
+/* Text variant - Warning */
+.mui-button-text-warning {
+  color: #ed6c02;
+}
+
+.mui-button-text-warning:hover {
+  background-color: rgba(237, 108, 2, 0.04);
+}
+
+/* Text variant - Info */
+.mui-button-text-info {
+  color: #0288d1;
+}
+
+.mui-button-text-info:hover {
+  background-color: rgba(2, 136, 209, 0.04);
+}
+
+/* Text variant - Success */
+.mui-button-text-success {
+  color: #2e7d32;
+}
+
+.mui-button-text-success:hover {
+  background-color: rgba(46, 125, 50, 0.04);
+}
+
+/* Outlined variant */
+.mui-button-outlined {
+  border: 1px solid rgba(25, 118, 210, 0.5);
+  padding: 5px 15px;
+}
+
+.mui-button-outlined.mui-button-size-small {
+  padding: 3px 9px;
+}
+
+.mui-button-outlined.mui-button-size-large {
+  padding: 7px 21px;
+}
+
+/* Outlined variant - Primary */
+.mui-button-outlined-primary {
+  color: #1976d2;
+  border-color: rgba(25, 118, 210, 0.5);
+}
+
+.mui-button-outlined-primary:hover {
+  border-color: #1976d2;
+  background-color: rgba(25, 118, 210, 0.04);
+}
+
+/* Outlined variant - Secondary */
+.mui-button-outlined-secondary {
+  color: #9c27b0;
+  border-color: rgba(156, 39, 176, 0.5);
+}
+
+.mui-button-outlined-secondary:hover {
+  border-color: #9c27b0;
+  background-color: rgba(156, 39, 176, 0.04);
+}
+
+/* Outlined variant - Error */
+.mui-button-outlined-error {
+  color: #d32f2f;
+  border-color: rgba(211, 47, 47, 0.5);
+}
+
+.mui-button-outlined-error:hover {
+  border-color: #d32f2f;
+  background-color: rgba(211, 47, 47, 0.04);
+}
+
+/* Outlined variant - Warning */
+.mui-button-outlined-warning {
+  color: #ed6c02;
+  border-color: rgba(237, 108, 2, 0.5);
+}
+
+.mui-button-outlined-warning:hover {
+  border-color: #ed6c02;
+  background-color: rgba(237, 108, 2, 0.04);
+}
+
+/* Outlined variant - Info */
+.mui-button-outlined-info {
+  color: #0288d1;
+  border-color: rgba(2, 136, 209, 0.5);
+}
+
+.mui-button-outlined-info:hover {
+  border-color: #0288d1;
+  background-color: rgba(2, 136, 209, 0.04);
+}
+
+/* Outlined variant - Success */
+.mui-button-outlined-success {
+  color: #2e7d32;
+  border-color: rgba(46, 125, 50, 0.5);
+}
+
+.mui-button-outlined-success:hover {
+  border-color: #2e7d32;
+  background-color: rgba(46, 125, 50, 0.04);
+}
+
+/* Contained variant - Primary */
+.mui-button-contained-primary {
+  color: #fff;
+  background-color: #1976d2;
+  box-shadow:
+    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+
+.mui-button-contained-primary:hover {
+  background-color: #1565c0;
+  box-shadow:
+    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+
+.mui-button-contained-primary:active {
+  box-shadow:
+    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+/* Contained variant - Secondary */
+.mui-button-contained-secondary {
+  color: #fff;
+  background-color: #9c27b0;
+  box-shadow:
+    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+
+.mui-button-contained-secondary:hover {
+  background-color: #7b1fa2;
+  box-shadow:
+    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+
+/* Contained variant - Error */
+.mui-button-contained-error {
+  color: #fff;
+  background-color: #d32f2f;
+  box-shadow:
+    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+
+.mui-button-contained-error:hover {
+  background-color: #c62828;
+  box-shadow:
+    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+
+/* Contained variant - Warning */
+.mui-button-contained-warning {
+  color: #fff;
+  background-color: #ed6c02;
+  box-shadow:
+    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+
+.mui-button-contained-warning:hover {
+  background-color: #e65100;
+  box-shadow:
+    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+
+/* Contained variant - Info */
+.mui-button-contained-info {
+  color: #fff;
+  background-color: #0288d1;
+  box-shadow:
+    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+
+.mui-button-contained-info:hover {
+  background-color: #01579b;
+  box-shadow:
+    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+
+/* Contained variant - Success */
+.mui-button-contained-success {
+  color: #fff;
+  background-color: #2e7d32;
+  box-shadow:
+    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+
+.mui-button-contained-success:hover {
+  background-color: #1b5e20;
+  box-shadow:
+    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+
+/* Disabled states */
+.mui-button-text.mui-button-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+.mui-button-outlined.mui-button-disabled {
+  color: rgba(0, 0, 0, 0.26);
+  border-color: rgba(0, 0, 0, 0.12);
+}
+
+.mui-button-contained.mui-button-disabled {
+  color: rgba(0, 0, 0, 0.26);
+  background-color: rgba(0, 0, 0, 0.12);
+  box-shadow: none;
+}
+
+/* Ripple effect */
+.mui-button-ripple {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.mui-button-ripple-effect {
+  position: absolute;
+  background-color: currentColor;
+  opacity: 0.3;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: mui-ripple-animation 600ms ease-out;
+  pointer-events: none;
+}
+
+@keyframes mui-ripple-animation {
+  to {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .mui-button-text-primary {
+    color: #90caf9;
+  }
+
+  .mui-button-text-primary:hover {
+    background-color: rgba(144, 202, 249, 0.08);
+  }
+
+  .mui-button-text-secondary {
+    color: #ce93d8;
+  }
+
+  .mui-button-text-secondary:hover {
+    background-color: rgba(206, 147, 216, 0.08);
+  }
+
+  .mui-button-outlined-primary {
+    color: #90caf9;
+    border-color: rgba(144, 202, 249, 0.5);
+  }
+
+  .mui-button-outlined-primary:hover {
+    border-color: #90caf9;
+    background-color: rgba(144, 202, 249, 0.08);
+  }
+
+  .mui-button-outlined-secondary {
+    color: #ce93d8;
+    border-color: rgba(206, 147, 216, 0.5);
+  }
+
+  .mui-button-outlined-secondary:hover {
+    border-color: #ce93d8;
+    background-color: rgba(206, 147, 216, 0.08);
+  }
+
+  .mui-button-contained-primary {
+    background-color: #90caf9;
+    color: rgba(0, 0, 0, 0.87);
+  }
+
+  .mui-button-contained-primary:hover {
+    background-color: #42a5f5;
+  }
+
+  .mui-button-contained-secondary {
+    background-color: #ce93d8;
+    color: rgba(0, 0, 0, 0.87);
+  }
+
+  .mui-button-contained-secondary:hover {
+    background-color: #ab47bc;
+  }
+
+  .mui-button-text.mui-button-disabled {
+    color: rgba(255, 255, 255, 0.3);
+  }
+
+  .mui-button-outlined.mui-button-disabled {
+    color: rgba(255, 255, 255, 0.3);
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+
+  .mui-button-contained.mui-button-disabled {
+    color: rgba(255, 255, 255, 0.3);
+    background-color: rgba(255, 255, 255, 0.12);
+  }
+}
+
+`,qe`
+.mui-dropdown-button-wrapper {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 120px;
+}
+
+.mui-dropdown-button-fullwidth {
+  width: 100%;
+}
+
+.mui-dropdown-button-fullwidth .mui-dropdown-button-trigger {
+  width: 100%;
+}
+
+.mui-dropdown-button-disabled {
+  pointer-events: none;
+}
+
+.mui-dropdown-button-trigger {
+  gap: 8px;
+}
+
+.mui-dropdown-button-end-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.15em;
+  line-height: 1;
+  margin-right: -4px;
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.mui-dropdown-button-open .mui-dropdown-button-end-icon {
+  transform: rotate(180deg);
+}
+
+.mui-dropdown-button-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 100%;
+  z-index: 1300;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow:
+    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  padding: 6px 0;
+  display: none;
+  opacity: 0;
+  transform: scale(0.9) translateY(-4px);
+  transform-origin: top center;
+  transition:
+    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.mui-dropdown-button-menu-open {
+  display: block;
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.mui-dropdown-button-option {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  padding: 8px 16px;
+  min-height: 36px;
+  font: inherit;
+  color: rgba(0, 0, 0, 0.87);
+  cursor: pointer;
+  transition: background-color 120ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.mui-dropdown-button-option:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.mui-dropdown-button-option-disabled,
+.mui-dropdown-button-option:disabled {
+  color: rgba(0, 0, 0, 0.38);
+  cursor: default;
+}
+
+.mui-dropdown-button-option-disabled:hover,
+.mui-dropdown-button-option:disabled:hover {
+  background-color: transparent;
+}
+
+@media (prefers-color-scheme: dark) {
+  .mui-dropdown-button-menu {
+    background-color: #1f1f1f;
+  }
+
+  .mui-dropdown-button-option {
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  .mui-dropdown-button-option:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+  }
+
+  .mui-dropdown-button-option-disabled,
+  .mui-dropdown-button-option:disabled {
+    color: rgba(255, 255, 255, 0.38);
+  }
+}
+
+`,qe`
+/* Checkbox Component Styles - MUI-like */
+
+.mui-checkbox-wrapper {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  vertical-align: middle;
+  position: relative;
+  margin: -9px;
+  padding: 9px;
+  border-radius: 4px;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mui-checkbox-disabled {
+  cursor: default;
+  pointer-events: none;
+  opacity: 0.38;
+}
+
+/* Checkbox Input (hidden) */
+.mui-checkbox-input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  z-index: 1;
+  cursor: inherit;
+}
+
+/* Checkbox Icon Container */
+.mui-checkbox-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  appearance: none;
+  text-decoration: none;
+  padding: 9px;
+  border-radius: 4px;
+  color: rgba(0, 0, 0, 0.6);
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Icon SVG */
+.mui-checkbox-icon svg {
+  user-select: none;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  fill: currentColor;
+  flex-shrink: 0;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  font-size: 1.5rem;
+}
+
+/* Size variants */
+.mui-checkbox-size-small .mui-checkbox-icon {
+  padding: 5px;
+}
+
+.mui-checkbox-size-small .mui-checkbox-icon svg {
+  font-size: 1.25rem;
+}
+
+.mui-checkbox-size-medium .mui-checkbox-icon {
+  padding: 9px;
+}
+
+.mui-checkbox-size-medium .mui-checkbox-icon svg {
+  font-size: 1.5rem;
+}
+
+/* Icon states - controlled by display style in JSX */
+.mui-checkbox-icon-unchecked {
+  display: flex;
+}
+
+.mui-checkbox-icon-checked {
+  display: flex;
+}
+
+.mui-checkbox-icon-indeterminate {
+  display: flex;
+}
+
+/* Color variants - Primary */
+.mui-checkbox-color-primary .mui-checkbox-input:checked ~ .mui-checkbox-icon {
+  color: #1976d2;
+}
+
+/* Color variants - Secondary */
+.mui-checkbox-color-secondary .mui-checkbox-input:checked ~ .mui-checkbox-icon {
+  color: #dc004e;
+}
+
+/* Color variants - Success */
+.mui-checkbox-color-success .mui-checkbox-input:checked ~ .mui-checkbox-icon {
+  color: #2e7d32;
+}
+
+/* Color variants - Error */
+.mui-checkbox-color-error .mui-checkbox-input:checked ~ .mui-checkbox-icon {
+  color: #d32f2f;
+}
+
+/* Color variants - Warning */
+.mui-checkbox-color-warning .mui-checkbox-input:checked ~ .mui-checkbox-icon {
+  color: #ed6c02;
+}
+
+/* Color variants - Default */
+.mui-checkbox-color-default .mui-checkbox-input:checked ~ .mui-checkbox-icon {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+/* Checkbox Label */
+.mui-checkbox-label {
+  margin-left: 8px;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0.00938em;
+  color: rgba(0, 0, 0, 0.87);
+  user-select: none;
+}
+
+/* Checkbox Group */
+.mui-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+.mui-checkbox-group-row {
+  flex-direction: row;
+}
+
+/* Ripple effect on click */
+.mui-checkbox-icon::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 4px;
+  opacity: 0;
+  background-color: currentColor;
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  display: none;
+}
+
+.mui-checkbox-wrapper:active .mui-checkbox-icon::after {
+  opacity: 0;
+}
+
+/* Focus visible */
+.mui-checkbox-input:focus-visible ~ .mui-checkbox-icon {
+  box-shadow: none;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .mui-checkbox-icon {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .mui-checkbox-color-primary .mui-checkbox-input:checked ~ .mui-checkbox-icon {
+    color: #90caf9;
+  }
+
+  .mui-checkbox-color-secondary .mui-checkbox-input:checked ~ .mui-checkbox-icon {
+    color: #f48fb1;
+  }
+
+  .mui-checkbox-color-success .mui-checkbox-input:checked ~ .mui-checkbox-icon {
+    color: #66bb6a;
+  }
+
+  .mui-checkbox-color-error .mui-checkbox-input:checked ~ .mui-checkbox-icon {
+    color: #f44336;
+  }
+
+  .mui-checkbox-color-warning .mui-checkbox-input:checked ~ .mui-checkbox-icon {
+    color: #ffa726;
+  }
+
+  .mui-checkbox-color-default .mui-checkbox-input:checked ~ .mui-checkbox-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+
+  .mui-checkbox-label {
+    color: rgba(255, 255, 255, 0.87);
+  }
+
+  .mui-checkbox-input:focus-visible ~ .mui-checkbox-icon {
+    box-shadow: none;
+  }
+}
+
+`;function Ze(r,o){const t=d(r.class??""),a=d(e(r.style)),n=d(r.label??""),l=d(r.value??""),c=d(r.indeterminate??!1),m=d(r.color??"primary"),b=d(r.size??"medium"),h=d(r.disabled??!1),f=x(r,!1),v=u("input",{type:"checkbox",class:"mui-checkbox-input",checked:f,value:l,disabled:h,"on:change":()=>{h.value||(f.value=v.checked,c.value=!1)}}),k=r["on:change"];k&&v.addEventListener("change",()=>k(v.checked,l.value)),o&&v.addEventListener("change",()=>o(v.checked,l.value));const w=u("span",{class:"mui-checkbox-icon-unchecked",children:u("svg",{viewBox:"0 0 24 24",children:u("path",{d:"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"})})}),y=u("span",{class:"mui-checkbox-icon-checked",children:u("svg",{viewBox:"0 0 24 24",children:u("path",{d:"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"})})}),z=u("span",{class:"mui-checkbox-icon-indeterminate",children:u("svg",{viewBox:"0 0 24 24",children:u("path",{d:"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"})})}),C=p(()=>`mui-checkbox-wrapper mui-checkbox-size-${b.value} ${h.value?"mui-checkbox-disabled":""} mui-checkbox-color-${m.value} ${t.value}`,[m,h,b,t]),$=s("label",{class:C,style:a,children:[v,s("span",{class:"mui-checkbox-icon",children:[w,y,z]}),u("span",{"k-if":n,class:"mui-checkbox-label",children:n})]});return g(()=>{c.value?(w.style.display="none",y.style.display="none",z.style.display=""):(w.style.display=f.value?"none":"",y.style.display=f.value?"":"none",z.style.display="none")},[f,c]),i($,{checked:{get:()=>f.value,set(e){f.value=e}},value:{get:()=>l.value,set(e){l.value=e}},disabled:{get:()=>h.value,set(e){h.value=e}}}),Fe($,r,["on:change"]),$}function Je(i){let{"on:change":a=r}=i;const n=d(i.class??""),l=d(e(i.style)),c=d(i.options),s=d(i.row??!0),m=d(i.size??"medium"),g=x(i,[]);let h=!1;g.addOnChange(e=>{if(h)h=!1;else for(let r=0;r<v.length;r++){const i=v[r];i.checked=e.includes(i.value)}});const f=p(()=>`mui-checkbox-group ${s.value?"mui-checkbox-group-row":""} ${n.value}`,[s,n]),v=[],k=(e,r)=>{const i=g.value.slice();e?o(g.value,r):t(g.value,r),a(g.value.slice(),i),h=!0,g.notify()},w=p(()=>(v.length=0,c.value.map(e=>{if(null!==e&&"object"==typeof e&&"value"in e&&"label"in e){const r=Ze({...e,size:m.value},k);return v.push(r),r}return e})),[c,m]),y=u("div",{class:f,style:l,role:"group",children:u(b,{list:w})});return g.notify(),Fe(y,i,["on:change"]),y}function Ke(i){let{"on:close":o=r,children:t,actions:a}=i;const n=d(i.class??""),l=d(e(i.style)),c=d(i.title??""),m=d(i.open??!1,e=>{e?(k.style.display="flex",setTimeout(()=>k.classList.add("kt-dialog-backdrop-open"),50)):(k.classList.remove("kt-dialog-backdrop-open"),setTimeout(()=>{m.value||(k.style.display="none")},225))}),b=d(i.size??"sm"),x=d(i.fullWidth??!1),g=p(()=>`kt-dialog-paper ${b.value?`kt-dialog-maxWidth-${b.value}`:""} ${x.value?"kt-dialog-fullWidth":""} ${n.value}`,[b,x,n]),h=m.toComputed(e=>"kt-dialog-backdrop "+(e?"kt-dialog-backdrop-open":"")),f=m.toComputed(e=>e?"display:flex":"display:none"),v=e=>{"Escape"===e.key&&(m.value=!1,o())},k=u("div",{class:h,style:f,"on:click":e=>{e.target===k&&o()},children:s("div",{class:g,style:l,"on:click":e=>e.stopPropagation(),children:[u("div",{"k-if":c,class:"kt-dialog-title",children:u("h2",{children:c})}),u("div",{"k-if":t,class:"kt-dialog-content",children:t}),u("div",{"k-if":a,class:"kt-dialog-actions",children:a})]})});document.addEventListener("keydown",v);const w=k.remove;return k.remove=()=>(v&&document.removeEventListener("keydown",v),w.call(k)),Fe(k,i,["on:close"]),k}function Qe(e){const r=d(e.required??!1),i=d(e.error??!1),o=d(e.disabled??!1),t=d(e.focused??!1),a=d(e.filled??!1),n=d(e.htmlFor??""),l={class:p(()=>["mui-form-label",i.value?"mui-form-label-error":"",o.value?"mui-form-label-disabled":"",t.value?"mui-form-label-focused":"",a.value?"mui-form-label-filled":""].join(" "),[i,o,t,a])};n&&(l.for=n);const c="legend"===e.component?s("legend",{...l,children:[e.children,u("span",{"k-if":r,class:"mui-form-label-asterisk",children:"*"})]}):s("label",{...l,children:[e.children,u("span",{"k-if":r,class:"mui-form-label-asterisk",children:"*"})]});return Fe(c,e),c}function er(r){const o=d(r.class??""),t=d(e(r.style)),a=d(r.value??0),n=d(r.color??"primary"),l=d(r.variant??"indeterminate"),c=p(()=>`mui-linear-progress mui-linear-progress-${l.value} mui-linear-progress-${n.value} ${o.value}`,[o,n,l]),s=p(()=>"determinate"===l.value?`width: ${a.value}%`:"",[l,a]),m=u("div",{class:c,style:t,role:"progressbar","aria-valuenow":a,children:u("div",{class:"mui-linear-progress-bar",style:s})});return i(m,{value:{get:()=>a.value,set(e){a.value=e}}}),Fe(m,r),m}function rr(i){const o=i["on:input"]??r,t=i["on:change"]??r,a=i["on:blur"]??r,n=i["on:focus"]??r,l=m(!1),c=e=>""!==e&&null!=e,b=()=>o(y.value),g=()=>t(y.value),f=()=>{l.value=!0,n(M.value)},v=()=>{l.value=!1,a(M.value)},k=h(i.type??"text"),w=i.multiline,y=x(i,i.value??""),z=d(i.label??""),C=d(i.disabled??!1),$=d(i.readOnly??!1),S=d(i.required??!1),L=d(i.error??!1),A=d(i.helperText??""),E=d(i.fullWidth??!1),I=d(i.rows??3),j=d(i.size??"medium"),R=d(i.placeholder??"").toComputed(e=>!z.value||l.value||c(y.value)?e:"",[z,l,y]),M=w?u("textarea",{"k-model":y,class:"mui-textfield-input",placeholder:R,disabled:C,readOnly:$,required:S,rows:I,"on:input":b,"on:change":g,"on:focus":f,"on:blur":v}):u("input",{"k-model":y,type:k,class:"mui-textfield-input",placeholder:R,disabled:C,readOnly:$,required:S,"on:input":b,"on:change":g,"on:focus":f,"on:blur":v});y.addOnChange(e=>M.value=e);const T=d(e(i.style)),O=d(i.class??""),W=p(()=>["mui-textfield-root",`mui-textfield-size-${j.value}`,l.value?"mui-textfield-focused":"",L.value?"mui-textfield-error":"",C.value?"mui-textfield-disabled":"",E.value?"mui-textfield-fullwidth":"",z.value&&c(y.value)?"mui-textfield-has-value":"",z.value?"":"mui-textfield-no-label",O.value?O.value:""].join(" "),[j,L,C,E,z,l,y,O]),D=p(()=>z.value?s("label",{class:"mui-textfield-label",children:[z,u("span",{"k-if":S,class:"mui-textfield-required",children:"*"})]}):"",[z,S]),H=p(()=>z.value?u("legend",{class:"mui-textfield-legend",children:s("span",{children:[z,u("span",{"k-if":S,children:"*"})]})}):"",[z,S]),B=s("div",{class:W,style:T,children:[s("div",{class:"mui-textfield-wrapper","on:mousedown":e=>{if(C.value)return;const r=e.target;r&&r!==M&&setTimeout(()=>M.focus(),0)},children:[D,u("div",{class:"mui-textfield-input-wrapper",children:M}),u("fieldset",{class:"mui-textfield-fieldset",children:H})]}),u("p",{class:"mui-textfield-helper-text",children:A})]});return Fe(B,i,["on:input","on:change","on:focus","on:blur"]),B}function ir(o){const t=o["on:change"]??r,a=e=>{f.style.display=e?"none":"",v.style.display=e?"":"none"};let{checked:n=!1,value:l="",label:c="",size:p="small",disabled:m=!1,color:b="primary"}=o;const x=d(o.value??""),g=d(o.disabled??!1),h=u("input",{type:"radio",class:"mui-radio-input",checked:n,value:x,disabled:g,"on:change":()=>{m||(n=h.checked,a(n),t(n,l))}}),f=u("span",{class:"mui-radio-icon-unchecked",children:u("svg",{viewBox:"0 0 24 24",children:u("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"})})}),v=u("span",{class:"mui-radio-icon-checked",children:u("svg",{viewBox:"0 0 24 24",children:u("path",{d:"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"})})});a(n);const k=s("label",{class:`mui-radio-wrapper ${o.class??""} mui-radio-size-${p} ${m?"mui-radio-disabled":""} mui-radio-color-${b}`,style:e(o.style),children:[h,s("span",{class:"mui-radio-icon",children:[f,v]}),u("span",{class:"mui-radio-label",children:c})]});return i(k,{value:{get:()=>l},checked:{get:()=>n,set(e){n=e,h.checked=n,a(n)}}}),Fe(k,o),k}function or(o){const t=d(o.class??""),a=d(e(o.style)),n=d(o.value??""),l=d(o.size??"small"),c=d(o.row??!1),s=p(()=>`mui-radio-group ${c.value?"mui-radio-group-row":""} ${t.value}`,[t,c]),m=o["on:change"]??r,x=(e,r)=>{e&&(n.value=r,m(r)),g.value.forEach(e=>e.checked=e.value===r)},g=d(o.options).toComputed(e=>e.map(e=>{e.size=l.value,e.checked=n.value===e.value;const r=e["on:change"];return e["on:change"]=r?(e,i)=>{r(e,i),x(e,i)}:x,ir(e)})),h=u("div",{class:s,style:a,role:"radiogroup",children:u(b,{list:g})});return i(h,{value:{get:()=>n.value,set(e){n.value=e,g.value.forEach(e=>e.checked=e.value===n.value)}}}),Fe(h,o),h}function tr(i){const o=i["on:change"]??r,t=m(!1),a=m(!1,e=>{e?(L.value.style.display="block",L.value.offsetHeight):setTimeout(()=>{e||(L.value.style.display="none")},200),L.value.classList.toggle("mui-select-menu-open",e),A.classList.toggle("mui-select-open",e)}),n=d(i.placeholder??""),l=d(i.label??""),c=d(i.options,e=>{if(!e.find(e=>e?.value===g.value)){const e=g.value;g.value="",o(g.value,e)}}),b=d(i.disabled??!1,e=>A.classList.toggle("mui-select-disabled",e)),g=x(i,i.value??""),h=d(e(i.style)),f=d(i.class??""),v=d(i.size??"medium"),k=d(i.fullWidth??!1),w=p(()=>`mui-select-wrapper mui-select-size-${v.value} ${k.value?"mui-select-fullWidth":""} ${f.value} ${b.value?"mui-select-disabled":""}`,[v,k,f,b]),y=p(()=>l.value?u("label",{class:"mui-select-label "+(g.value||t.value||n.value?"focused":""),children:l}):"",[l,g,t,n]),z=e=>{const r=e.currentTarget.dataset.value;g.value=r,o(r),a.value=!1},C=e=>{A.contains(e.target)||(a.value=!1)},$=u("span",{class:"mui-select-placeholder",children:n.value||" "}),S=p(()=>{const e=c.value.find(e=>e?.value===g.value);return u("div",{class:"mui-select-display",children:e?.label??$})},[g]),L=p(()=>u("div",{class:"mui-select-menu",style:"display: none;",children:c.value.map(e=>{if(null!==e&&"object"==typeof e&&"value"in e&&"label"in e){return u("div",{class:"mui-select-option "+(e.value===g.value?"selected":""),"data-value":e.value,"on:click":z,children:e.label})}return e})}),[c,g]),A=s("div",{class:w,style:h,children:[y,s("div",{class:"mui-select-control mui-select-outlined","on:click":()=>{b.value||(a.value=!a.value)},"on:focus":()=>t.value=!0,"on:blur":()=>t.value=!1,tabIndex:b.value?-1:0,children:[S,u("input",{type:"hidden","k-model":g}),u("fieldset",{class:"mui-select-fieldset",children:u("legend",{class:"mui-select-legend",children:u("span",{children:l})})}),u("svg",{class:"mui-select-icon",focusable:"false","aria-hidden":"true",viewBox:"0 0 24 24",width:"24",height:"24",children:u("path",{d:"M7 10l5 5 5-5Z",fill:"currentColor"})})]}),L]});return L.notify(),setTimeout(()=>{document.removeEventListener("click",C),document.addEventListener("click",C)},0),Fe(A,i),A}function ar(r){const i=d(r.class??""),o=d(e(r.style)),t=d(r.variant??"elevation"),a=d(r.elevation??1),n=d(r.square??!1),l=d(r.raised??!1),c=p(()=>["mui-card",`mui-card-${t.value}`,"elevation"===t.value?`mui-card-elevation-${Math.min(24,Math.max(0,a.value))}`:"",n.value?"mui-card-square":"",l.value?"mui-card-raised":"",i.value].join(" "),[t,a,n,l,i]),s=u("div",{class:c,style:o,"on:click":r["on:click"],children:r.children});return Fe(s,r),s}function nr(i){const o=i["on:change"]??r,t=d(i.label??""),a=d(i.value??""),n=d(i.color??"primary"),l=d(i.size??"medium"),c=d(i.disabled??!1,e=>{f.disabled=e,w.classList.toggle("mui-switch-disabled",e)}),m=x(i,!1);m.addOnChange(e=>{f.checked=e,v.classList.toggle("mui-switch-track-checked",e),k.classList.toggle("mui-switch-thumb-checked",e)});const b=d(e(i.style)),g=d(i.class??""),h=p(()=>`mui-switch-wrapper mui-switch-size-${l.value} ${c.value?"mui-switch-disabled":""} mui-switch-color-${n.value} ${g.value}`,[n,c,l,g]),f=u("input",{type:"checkbox",class:"mui-switch-input",checked:m.value,value:a,disabled:c,"on:change":()=>{c.value||(m.value=f.checked,o(m.value,a.value))}}),v=u("span",{class:"mui-switch-track"}),k=u("span",{class:"mui-switch-thumb"}),w=s("label",{class:h,style:b,children:[f,s("span",{class:"mui-switch-base",children:[v,k]}),u("span",{"k-if":t,class:"mui-switch-label",children:t})]});return v.classList.toggle("mui-switch-track-checked",m.value),k.classList.toggle("mui-switch-thumb-checked",m.value),w}qe`
+/* Dialog Component Styles - MUI-like appearance */
+
+.kt-dialog-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1300;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+}
+
+.kt-dialog-backdrop-open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.kt-dialog-paper {
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow:
+    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
+    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
+    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100% - 64px);
+  overflow-y: auto;
+  transform: scale(0.8);
+  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.kt-dialog-backdrop-open .kt-dialog-paper {
+  transform: scale(1);
+}
+
+/* Max width variants */
+.kt-dialog-maxWidth-xs {
+  max-width: 444px;
+  width: 100%;
+}
+
+.kt-dialog-maxWidth-sm {
+  max-width: 600px;
+  width: 100%;
+}
+
+.kt-dialog-maxWidth-md {
+  max-width: 960px;
+  width: 100%;
+}
+
+.kt-dialog-maxWidth-lg {
+  max-width: 1280px;
+  width: 100%;
+}
+
+.kt-dialog-maxWidth-xl {
+  max-width: 1920px;
+  width: 100%;
+}
+
+.kt-dialog-fullWidth {
+  width: calc(100% - 64px);
+}
+
+.kt-dialog-title {
+  flex: 0 0 auto;
+  margin: 0;
+  padding: 24px 24px 20px;
+}
+
+.kt-dialog-title h2 {
+  margin: 0;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-weight: 500;
+  font-size: 1.25rem;
+  line-height: 1.6;
+  letter-spacing: 0.0075em;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.kt-dialog-content {
+  flex: 1 1 auto;
+  padding: 20px 24px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  color: rgba(0, 0, 0, 0.6);
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0.00938em;
+}
+
+.kt-dialog-content:first-child {
+  padding-top: 20px;
+}
+
+.kt-dialog-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 0 0 auto;
+  padding: 8px;
+  gap: 8px;
+}
+
+.kt-dialog-actions > * {
+  margin: 0;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .kt-dialog-paper {
+    background-color: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+
+  .kt-dialog-title h2 {
+    color: rgba(255, 255, 255, 0.87);
+  }
+
+  .kt-dialog-content {
+    color: rgba(255, 255, 255, 0.7);
+  }
+}
+
+`,qe`
+/* FormLabel Component Styles - MUI-like */
+
+.mui-form-label {
+  color: rgba(0, 0, 0, 0.6);
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.4375em;
+  letter-spacing: 0.00938em;
+  padding: 0;
+  display: block;
+  transform-origin: top left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  transition:
+    color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+    transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+    max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+}
+
+/* Focused state */
+.mui-form-label-focused {
+  color: #1976d2;
+}
+
+/* Error state */
+.mui-form-label-error {
+  color: #d32f2f;
+}
+
+.mui-form-label-error.mui-form-label-focused {
+  color: #d32f2f;
+}
+
+/* Disabled state */
+.mui-form-label-disabled {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+/* Filled state */
+.mui-form-label-filled {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.mui-form-label-filled.mui-form-label-focused {
+  color: #1976d2;
+}
+
+/* Required asterisk */
+.mui-form-label-asterisk {
+  color: #d32f2f;
+}
+
+/* Legend variant (for fieldset) */
+legend.mui-form-label {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  max-width: 100%;
+  white-space: normal;
+  margin-bottom: 8px;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .mui-form-label {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .mui-form-label-focused {
+    color: #90caf9;
+  }
+
+  .mui-form-label-error {
+    color: #f44336;
+  }
+
+  .mui-form-label-error.mui-form-label-focused {
+    color: #f44336;
+  }
+
+  .mui-form-label-disabled {
+    color: rgba(255, 255, 255, 0.38);
+  }
+
+  .mui-form-label-filled {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .mui-form-label-filled.mui-form-label-focused {
+    color: #90caf9;
+  }
+}
+
+`,qe`
+/* LinearProgress Component Styles - Mimics MUI LinearProgress */
+
+.mui-linear-progress {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 4px;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.12);
+  border-radius: 2px;
+}
+
+.mui-linear-progress-bar {
+  height: 100%;
+  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: left;
+}
+
+/* Determinate variant */
+.mui-linear-progress-determinate .mui-linear-progress-bar {
+  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Indeterminate variant animation */
+.mui-linear-progress-indeterminate .mui-linear-progress-bar {
+  width: 100%;
+  animation: mui-linear-progress-indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+
+@keyframes mui-linear-progress-indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+
+/* Color variants */
+.mui-linear-progress-primary .mui-linear-progress-bar {
+  background-color: rgb(25, 118, 210);
+}
+
+.mui-linear-progress-secondary .mui-linear-progress-bar {
+  background-color: rgb(156, 39, 176);
+}
+
+.mui-linear-progress-error .mui-linear-progress-bar {
+  background-color: rgb(211, 47, 47);
+}
+
+.mui-linear-progress-warning .mui-linear-progress-bar {
+  background-color: rgb(237, 108, 2);
+}
+
+.mui-linear-progress-info .mui-linear-progress-bar {
+  background-color: rgb(2, 136, 209);
+}
+
+.mui-linear-progress-success .mui-linear-progress-bar {
+  background-color: rgb(46, 125, 50);
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .mui-linear-progress {
+    background-color: rgba(255, 255, 255, 0.12);
+  }
+
+  .mui-linear-progress-primary .mui-linear-progress-bar {
+    background-color: rgb(144, 202, 249);
+  }
+
+  .mui-linear-progress-secondary .mui-linear-progress-bar {
+    background-color: rgb(206, 147, 216);
+  }
+
+  .mui-linear-progress-error .mui-linear-progress-bar {
+    background-color: rgb(244, 67, 54);
+  }
+
+  .mui-linear-progress-warning .mui-linear-progress-bar {
+    background-color: rgb(255, 152, 0);
+  }
+
+  .mui-linear-progress-info .mui-linear-progress-bar {
+    background-color: rgb(41, 182, 246);
+  }
+
+  .mui-linear-progress-success .mui-linear-progress-bar {
+    background-color: rgb(102, 187, 106);
+  }
+}
+
+`,qe`
+/* TextField Component Styles - MUI-like */
+
+.mui-textfield-root {
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  vertical-align: top;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+
+.mui-textfield-fullwidth {
+  width: 100%;
+}
+
+/* Wrapper */
+.mui-textfield-wrapper {
+  font-size: 1rem;
+  line-height: 1.4375em;
+  color: rgba(0, 0, 0, 0.87);
+  box-sizing: border-box;
+  cursor: text;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  border-radius: 4px;
+}
+
+/* Label */
+.mui-textfield-label {
+  display: block;
+  transform-origin: top left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: calc(133% - 32px);
+  position: absolute;
+  left: 0;
+  top: 2px;
+  transform: translate(14px, 16px) scale(1);
+  transition:
+    color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+    transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+    max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 1rem;
+  line-height: 1;
+}
+
+.mui-textfield-focused .mui-textfield-label,
+.mui-textfield-has-value .mui-textfield-label {
+  transform: translate(14px, -9px) scale(0.75);
+  max-width: calc(133% - 32px);
+}
+
+.mui-textfield-focused .mui-textfield-label {
+  color: #1976d2;
+}
+
+.mui-textfield-error .mui-textfield-label {
+  color: #d32f2f;
+}
+
+.mui-textfield-disabled .mui-textfield-label {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+.mui-textfield-required {
+  color: #d32f2f;
+}
+
+/* Size variants */
+.mui-textfield-size-small .mui-textfield-wrapper {
+  font-size: 0.875rem;
+  line-height: 1.4375em;
+}
+
+.mui-textfield-size-small .mui-textfield-label {
+  font-size: 0.875rem;
+  transform: translate(14px, 9px) scale(1);
+}
+
+.mui-textfield-size-small.mui-textfield-focused .mui-textfield-label,
+.mui-textfield-size-small.mui-textfield-has-value .mui-textfield-label {
+  transform: translate(14px, -9px) scale(0.75);
+}
+
+.mui-textfield-size-small .mui-textfield-input-wrapper {
+  padding: 8.5px 14px;
+}
+
+.mui-textfield-size-small .mui-textfield-input {
+  font-size: 0.875rem;
+}
+
+/* Input wrapper */
+.mui-textfield-input-wrapper {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 16.5px 14px;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: auto;
+  margin: 0;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  position: relative;
+}
+
+/* Input element */
+.mui-textfield-input {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  padding: 0;
+  outline: none;
+}
+
+/* Textarea specific styles - override height */
+textarea.mui-textfield-input {
+  height: auto !important;
+  resize: none;
+  overflow: auto;
+  min-height: 1.4375em;
+}
+
+.mui-textfield-input::placeholder {
+  color: rgba(0, 0, 0, 0.42);
+  opacity: 1;
+  transition: opacity 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+}
+
+.mui-textfield-focused .mui-textfield-input::placeholder {
+  opacity: 0.42;
+}
+
+.mui-textfield-disabled .mui-textfield-input {
+  color: rgba(0, 0, 0, 0.38);
+  cursor: default;
+}
+
+/* Fieldset (border) */
+.mui-textfield-fieldset {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+  transition: border-color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+}
+
+.mui-textfield-wrapper:hover .mui-textfield-fieldset {
+  border-color: rgba(0, 0, 0, 0.87);
+}
+
+.mui-textfield-focused .mui-textfield-fieldset {
+  border-color: #1976d2;
+  border-width: 2px;
+}
+
+.mui-textfield-error .mui-textfield-fieldset {
+  border-color: #d32f2f;
+}
+
+.mui-textfield-error.mui-textfield-focused .mui-textfield-fieldset {
+  border-color: #d32f2f;
+}
+
+.mui-textfield-disabled .mui-textfield-fieldset {
+  border-color: rgba(0, 0, 0, 0.26);
+}
+
+/* No label variant - adjust fieldset position */
+.mui-textfield-no-label .mui-textfield-fieldset {
+  top: 0;
+}
+
+/* Legend (for label space) */
+.mui-textfield-legend {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.mui-textfield-legend > span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.mui-textfield-focused .mui-textfield-legend,
+.mui-textfield-has-value .mui-textfield-legend {
+  max-width: 100%;
+  transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;
+}
+
+/* Helper text */
+.mui-textfield-helper-text {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 0.75rem;
+  line-height: 1.66;
+  letter-spacing: 0.03333em;
+  text-align: left;
+  margin: 3px 14px 0;
+}
+
+.mui-textfield-error .mui-textfield-helper-text {
+  color: #d32f2f;
+}
+
+.mui-textfield-disabled .mui-textfield-helper-text {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .mui-textfield-wrapper {
+    color: rgba(255, 255, 255, 0.87);
+  }
+
+  .mui-textfield-label {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .mui-textfield-focused .mui-textfield-label {
+    color: #90caf9;
+  }
+
+  .mui-textfield-input::placeholder {
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .mui-textfield-disabled .mui-textfield-input {
+    color: rgba(255, 255, 255, 0.38);
+  }
+
+  .mui-textfield-fieldset {
+    border-color: rgba(255, 255, 255, 0.23);
+  }
+
+  .mui-textfield-wrapper:hover .mui-textfield-fieldset {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+
+  .mui-textfield-focused .mui-textfield-fieldset {
+    border-color: #90caf9;
+  }
+
+  .mui-textfield-disabled .mui-textfield-fieldset {
+    border-color: rgba(255, 255, 255, 0.26);
+  }
+
+  .mui-textfield-helper-text {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .mui-textfield-disabled .mui-textfield-helper-text {
+    color: rgba(255, 255, 255, 0.38);
+  }
+}
+
+`,qe`
+/* Radio Component Styles - MUI-like */
+
+.mui-radio-wrapper {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  vertical-align: middle;
+  position: relative;
+  margin: -9px;
+  padding: 9px;
+  border-radius: 4px;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.mui-radio-wrapper:hover {
+  /* background-color: rgba(0, 0, 0, 0.04); */
+}
+
+.mui-radio-disabled {
+  cursor: default;
+  pointer-events: none;
+  opacity: 0.38;
+}
+
+/* Radio Input (hidden) */
+.mui-radio-input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  z-index: 1;
+  cursor: inherit;
+}
+
+/* Radio Icon Container */
+.mui-radio-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  appearance: none;
+  text-decoration: none;
+  padding: 9px;
+  border-radius: 50%;
+  color: rgba(0, 0, 0, 0.6);
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+/* Icon SVG */
+.mui-radio-icon svg {
+  user-select: none;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  fill: currentColor;
+  flex-shrink: 0;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  font-size: 1.5rem;
+}
+
+/* Size variants */
+.mui-radio-size-small .mui-radio-icon {
+  padding: 5px;
+}
+
+.mui-radio-size-small .mui-radio-icon svg {
+  font-size: 1.25rem;
+}
+
+.mui-radio-size-medium .mui-radio-icon {
+  padding: 9px;
+}
+
+.mui-radio-size-medium .mui-radio-icon svg {
+  font-size: 1.5rem;
+}
+
+/* Unchecked state - controlled by k-if in JSX */
+.mui-radio-icon-unchecked {
+  display: flex;
+}
+
+.mui-radio-icon-checked {
+  display: flex;
+}
+
+/* Color variants - Primary */
+.mui-radio-color-primary .mui-radio-input:checked ~ .mui-radio-icon {
+  color: #1976d2;
+}
+
+.mui-radio-color-primary:hover {
+  /* background-color: rgba(25, 118, 210, 0.04); */
+}
+
+/* Color variants - Secondary */
+.mui-radio-color-secondary .mui-radio-input:checked ~ .mui-radio-icon {
+  color: #dc004e;
+}
+
+.mui-radio-color-secondary:hover {
+  /* background-color: rgba(220, 0, 78, 0.04); */
+}
+
+/* Color variants - Default */
+.mui-radio-color-default .mui-radio-input:checked ~ .mui-radio-icon {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+/* Radio Label */
+.mui-radio-label {
+  margin-left: 8px;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0.00938em;
+  color: rgba(0, 0, 0, 0.87);
+  user-select: none;
+}
+
+/* Radio Group */
+.mui-radio-group {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+.mui-radio-group-row {
+  flex-direction: row;
+}
+
+/* Ripple effect on click */
+.mui-radio-icon::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+  opacity: 0;
+  background-color: currentColor;
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.mui-radio-wrapper:active .mui-radio-icon::after {
+  opacity: 0.12;
+}
+
+/* Focus visible */
+.mui-radio-input:focus-visible ~ .mui-radio-icon {
+  box-shadow: 0 0 0 8px rgba(25, 118, 210, 0.12);
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .mui-radio-wrapper:hover {
+    /* background-color: rgba(255, 255, 255, 0.08); */
+  }
+
+  .mui-radio-icon {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .mui-radio-color-primary .mui-radio-input:checked ~ .mui-radio-icon {
+    color: #90caf9;
+  }
+
+  .mui-radio-color-primary:hover {
+    background-color: rgba(144, 202, 249, 0.08);
+  }
+
+  .mui-radio-color-secondary .mui-radio-input:checked ~ .mui-radio-icon {
+    color: #f48fb1;
+  }
+
+  .mui-radio-color-secondary:hover {
+    background-color: rgba(244, 143, 177, 0.08);
+  }
+
+  .mui-radio-color-default .mui-radio-input:checked ~ .mui-radio-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+
+  .mui-radio-label {
+    color: rgba(255, 255, 255, 0.87);
+  }
+
+  .mui-radio-input:focus-visible ~ .mui-radio-icon {
+    box-shadow: 0 0 0 8px rgba(144, 202, 249, 0.16);
+  }
+}
+
+`,qe`
+/* Select Component Styles - MUI-like */
+
+.mui-select-wrapper {
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  min-width: 120px;
+  margin: 8px 0;
+  vertical-align: top;
+}
+
+.mui-select-fullWidth {
+  width: 100%;
+}
+
+.mui-select-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* Select Label */
+.mui-select-label {
+  display: block;
+  transform-origin: top left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: calc(100% - 24px);
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: translate(14px, 16px) scale(1);
+  transition:
+    color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+    transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+    max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-size: 1rem;
+  line-height: 1.4375em;
+  letter-spacing: 0.00938em;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.mui-select-label.focused {
+  transform: translate(14px, -9px) scale(0.75);
+  max-width: calc(133.33333% - 24px);
+  color: #1976d2;
+}
+
+/* Select Control */
+.mui-select-control {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-size: 1rem;
+  line-height: 1.4375em;
+  letter-spacing: 0.00938em;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.mui-select-control:focus {
+  outline: none;
+}
+
+/* Size variants */
+.mui-select-size-small .mui-select-control {
+  font-size: 0.875rem;
+  line-height: 1.4375em;
+}
+
+.mui-select-size-small .mui-select-label {
+  font-size: 0.875rem;
+  transform: translate(14px, 9px) scale(1);
+}
+
+.mui-select-size-small .mui-select-label.focused {
+  transform: translate(14px, -9px) scale(0.75);
+}
+
+.mui-select-size-small .mui-select-outlined {
+  padding: 8.5px 14px;
+  padding-right: 32px;
+}
+
+.mui-select-size-small .mui-select-display {
+  font-size: 0.875rem;
+}
+
+/* Outlined variant */
+.mui-select-outlined {
+  border-radius: 4px;
+  padding: 16.5px 14px;
+  padding-right: 32px;
+}
+
+.mui-select-outlined .mui-select-fieldset {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+  transition: border-color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+}
+
+.mui-select-outlined:hover .mui-select-fieldset {
+  border-color: rgba(0, 0, 0, 0.87);
+}
+
+.mui-select-wrapper.focused .mui-select-outlined .mui-select-fieldset,
+.mui-select-open .mui-select-fieldset {
+  border-color: #1976d2 !important;
+  border-width: 2px;
+}
+
+.mui-select-fieldset legend {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.mui-select-label.focused ~ .mui-select-outlined .mui-select-fieldset legend {
+  max-width: 100%;
+  transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;
+}
+
+/* Select Display */
+.mui-select-display {
+  flex: 1;
+  min-width: 0;
+  min-height: 1.4375em;
+  line-height: 1.4375em;
+}
+
+.mui-select-placeholder {
+  color: rgba(0, 0, 0, 0.4);
+}
+
+/* Select Icon */
+.mui-select-icon {
+  position: absolute;
+  right: 7px;
+  top: calc(50% - 0.7em);
+  pointer-events: none;
+  color: rgba(0, 0, 0, 0.54);
+  user-select: none;
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  fill: currentColor;
+  flex-shrink: 0;
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.mui-select-open .mui-select-icon {
+  transform: rotate(180deg);
+}
+
+/* Select Menu */
+.mui-select-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1300;
+  margin-top: 4px;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow:
+    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 8px 0;
+  display: none;
+  opacity: 0;
+  transform: scale(0.75) translateY(-8px);
+  transform-origin: top center;
+  transition:
+    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.mui-select-menu-open {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+/* Select Option */
+.mui-select-option {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  text-decoration: none;
+  min-height: 42px;
+  padding: 6px 16px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0.00938em;
+  color: rgba(0, 0, 0, 0.87);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.mui-select-option:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.mui-select-option.selected {
+  background-color: rgba(25, 118, 210, 0.08);
+  font-weight: 500;
+}
+
+.mui-select-option.selected:hover {
+  background-color: rgba(25, 118, 210, 0.12);
+}
+
+.mui-select-legend > span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .mui-select-label {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .mui-select-label.focused {
+    color: #90caf9;
+  }
+
+  .mui-select-control {
+    color: rgba(255, 255, 255, 0.87);
+  }
+
+  .mui-select-outlined .mui-select-fieldset {
+    border-color: rgba(255, 255, 255, 0.23);
+  }
+
+  .mui-select-outlined:hover .mui-select-fieldset {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+
+  .mui-select-wrapper.focused .mui-select-outlined .mui-select-fieldset,
+  .mui-select-open .mui-select-fieldset {
+    border-color: #90caf9 !important;
+  }
+
+  .mui-select-placeholder {
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .mui-select-icon {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .mui-select-menu {
+    background-color: #1e1e1e;
+  }
+
+  .mui-select-option {
+    color: rgba(255, 255, 255, 0.87);
+  }
+
+  .mui-select-option:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+  }
+
+  .mui-select-option.selected {
+    background-color: rgba(144, 202, 249, 0.16);
+  }
+
+  .mui-select-option.selected:hover {
+    background-color: rgba(144, 202, 249, 0.24);
+  }
+}
+
+`,qe`
+/* Card Component Styles - MUI-like */
+
+.mui-card {
+  position: relative;
+  border-radius: 4px;
+  background-color: #ffffff;
+  color: rgba(0, 0, 0, 0.87);
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  overflow: hidden;
+  display: block;
+}
+
+/* Variant: outlined */
+.mui-card-outlined {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  box-shadow: none;
+}
+
+/* Variant: contained */
+.mui-card-contained {
+  background-color: #f5f5f5;
+  box-shadow: none;
+  border: none;
+}
+
+/* Elevation shadows */
+.mui-card-elevation-0 {
+  box-shadow: none;
+}
+.mui-card-elevation-1 {
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+              0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+              0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-2 {
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+              0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+              0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-3 {
+  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
+              0px 3px 4px 0px rgba(0, 0, 0, 0.14),
+              0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-4 {
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+              0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+              0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-5 {
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+              0px 5px 8px 0px rgba(0, 0, 0, 0.14),
+              0px 1px 14px 0px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-6 {
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+              0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+              0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-7 {
+  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
+              0px 7px 10px 1px rgba(0, 0, 0, 0.14),
+              0px 2px 16px 1px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-8 {
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-9 {
+  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),
+              0px 9px 12px 1px rgba(0, 0, 0, 0.14),
+              0px 3px 16px 2px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-10 {
+  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
+              0px 10px 14px 1px rgba(0, 0, 0, 0.14),
+              0px 4px 18px 3px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-11 {
+  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2),
+              0px 11px 15px 1px rgba(0, 0, 0, 0.14),
+              0px 4px 20px 3px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-12 {
+  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
+              0px 12px 17px 2px rgba(0, 0, 0, 0.14),
+              0px 5px 22px 4px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-13 {
+  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
+              0px 13px 19px 2px rgba(0, 0, 0, 0.14),
+              0px 5px 24px 4px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-14 {
+  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2),
+              0px 14px 21px 2px rgba(0, 0, 0, 0.14),
+              0px 5px 26px 4px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-15 {
+  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2),
+              0px 15px 22px 2px rgba(0, 0, 0, 0.14),
+              0px 6px 28px 5px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-16 {
+  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2),
+              0px 16px 24px 2px rgba(0, 0, 0, 0.14),
+              0px 6px 30px 5px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-17 {
+  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2),
+              0px 17px 26px 2px rgba(0, 0, 0, 0.14),
+              0px 6px 32px 5px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-18 {
+  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2),
+              0px 18px 28px 2px rgba(0, 0, 0, 0.14),
+              0px 7px 34px 6px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-19 {
+  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2),
+              0px 19px 29px 2px rgba(0, 0, 0, 0.14),
+              0px 7px 36px 6px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-20 {
+  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
+              0px 20px 31px 3px rgba(0, 0, 0, 0.14),
+              0px 8px 38px 7px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-21 {
+  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
+              0px 21px 33px 3px rgba(0, 0, 0, 0.14),
+              0px 8px 40px 7px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-22 {
+  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2),
+              0px 22px 35px 3px rgba(0, 0, 0, 0.14),
+              0px 8px 42px 7px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-23 {
+  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2),
+              0px 23px 36px 3px rgba(0, 0, 0, 0.14),
+              0px 9px 44px 8px rgba(0, 0, 0, 0.12);
+}
+.mui-card-elevation-24 {
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
+              0px 24px 38px 3px rgba(0, 0, 0, 0.14),
+              0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+
+/* Square card (no border radius) */
+.mui-card-square {
+  border-radius: 0;
+}
+
+/* Raised card (hover effect) */
+.mui-card-raised {
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+.mui-card-raised:hover {
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .mui-card {
+    background-color: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+
+  .mui-card-outlined {
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+
+  .mui-card-contained {
+    background-color: #2d2d2d;
+  }
+}
+`,qe`
+/* Switch Component Styles - MUI-like */
+
+.mui-switch-wrapper {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  user-select: none;
+  vertical-align: middle;
+}
+
+.mui-switch-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/* Switch base container */
+.mui-switch-base {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+/* Track (background) */
+.mui-switch-track {
+  display: block;
+  border-radius: 7px;
+  background-color: #b0b0b0;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+/* Thumb (circle) */
+.mui-switch-thumb {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(0, -50%);
+  background-color: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
+              0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+              0px 2px 1px -1px rgba(0, 0, 0, 0.12);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+/* Size variants */
+.mui-switch-size-small .mui-switch-track {
+  width: 34px;
+  height: 14px;
+}
+.mui-switch-size-small .mui-switch-thumb {
+  width: 20px;
+  height: 20px;
+}
+.mui-switch-size-small .mui-switch-thumb-checked {
+  transform: translate(14px, -50%);
+}
+
+.mui-switch-size-medium .mui-switch-track {
+  width: 40px;
+  height: 20px;
+}
+.mui-switch-size-medium .mui-switch-thumb {
+  width: 24px;
+  height: 24px;
+}
+.mui-switch-size-medium .mui-switch-thumb-checked {
+  transform: translate(16px, -50%);
+}
+
+.mui-switch-size-large .mui-switch-track {
+  width: 50px;
+  height: 24px;
+}
+.mui-switch-size-large .mui-switch-thumb {
+  width: 30px;
+  height: 30px;
+}
+.mui-switch-size-large .mui-switch-thumb-checked {
+  transform: translate(20px, -50%);
+}
+
+/* Checked state */
+.mui-switch-track-checked {
+  background-color: #1976d2; /* primary default */
+}
+
+/* Color variants */
+.mui-switch-color-primary .mui-switch-track-checked {
+  background-color: #1976d2;
+}
+.mui-switch-color-secondary .mui-switch-track-checked {
+  background-color: #dc004e;
+}
+.mui-switch-color-error .mui-switch-track-checked {
+  background-color: #d32f2f;
+}
+.mui-switch-color-warning .mui-switch-track-checked {
+  background-color: #ed6c02;
+}
+.mui-switch-color-info .mui-switch-track-checked {
+  background-color: #0288d1;
+}
+.mui-switch-color-success .mui-switch-track-checked {
+  background-color: #2e7d32;
+}
+
+/* Disabled state */
+.mui-switch-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.mui-switch-disabled .mui-switch-track {
+  background-color: #e0e0e0;
+}
+.mui-switch-disabled .mui-switch-track-checked {
+  background-color: #b0b0b0;
+}
+
+/* Label */
+.mui-switch-label {
+  margin-left: 8px;
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0.00938em;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+/* Focus visible */
+.mui-switch-input:focus-visible ~ .mui-switch-base .mui-switch-thumb {
+  outline: 2px solid #1976d2;
+  outline-offset: 2px;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .mui-switch-track {
+    background-color: #5a5a5a;
+  }
+
+  .mui-switch-track-checked {
+    background-color: #90caf9; /* primary dark */
+  }
+
+  .mui-switch-color-primary .mui-switch-track-checked {
+    background-color: #90caf9;
+  }
+  .mui-switch-color-secondary .mui-switch-track-checked {
+    background-color: #f48fb1;
+  }
+  .mui-switch-color-error .mui-switch-track-checked {
+    background-color: #f44336;
+  }
+  .mui-switch-color-warning .mui-switch-track-checked {
+    background-color: #ff9800;
+  }
+  .mui-switch-color-info .mui-switch-track-checked {
+    background-color: #29b6f6;
+  }
+  .mui-switch-color-success .mui-switch-track-checked {
+    background-color: #66bb6a;
+  }
+
+  .mui-switch-disabled .mui-switch-track {
+    background-color: #424242;
+  }
+  .mui-switch-disabled .mui-switch-track-checked {
+    background-color: #5a5a5a;
+  }
+
+  .mui-switch-label {
+    color: rgba(255, 255, 255, 0.87);
+  }
+}
+`,qe`
+.mui-pill {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  gap: 6px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.2;
+  user-select: none;
+  white-space: nowrap;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease,
+    opacity 0.2s ease;
+}
+
+.mui-pill-size-small {
+  height: 24px;
+  padding: 0 8px;
+  font-size: 0.75rem;
+}
+
+.mui-pill-size-medium {
+  height: 32px;
+  padding: 0 12px;
+}
+
+.mui-pill-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mui-pill-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mui-pill-delete {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 -4px 0 0;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  background: transparent;
+  color: inherit;
+  opacity: 0.88;
+  cursor: pointer;
+  transition:
+    opacity 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.mui-pill-delete-mark {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+  transform: translateY(-0.5px);
+}
+
+.mui-pill-delete:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.mui-pill-clickable {
+  cursor: pointer;
+}
+
+.mui-pill-clickable:hover {
+  filter: brightness(0.96);
+}
+
+.mui-pill-clickable:focus-visible {
+  outline: 2px solid rgba(25, 118, 210, 0.4);
+  outline-offset: 2px;
+}
+
+.mui-pill-disabled {
+  pointer-events: none;
+  opacity: 0.45;
+}
+
+.mui-pill-variant-filled.mui-pill-color-default {
+  background: rgba(0, 0, 0, 0.08);
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.mui-pill-variant-filled.mui-pill-color-primary {
+  background: var(--kt-color-primary);
+  color: #fff;
+}
+
+.mui-pill-variant-filled.mui-pill-color-secondary {
+  background: var(--kt-color-secondary);
+  color: #fff;
+}
+
+.mui-pill-variant-filled.mui-pill-color-error {
+  background: var(--kt-color-error);
+  color: #fff;
+}
+
+.mui-pill-variant-filled.mui-pill-color-warning {
+  background: var(--kt-color-warning);
+  color: #fff;
+}
+
+.mui-pill-variant-filled.mui-pill-color-info {
+  background: var(--kt-color-info);
+  color: #fff;
+}
+
+.mui-pill-variant-filled.mui-pill-color-success {
+  background: var(--kt-color-success);
+  color: #fff;
+}
+
+.mui-pill-variant-outlined {
+  background: transparent;
+}
+
+.mui-pill-variant-outlined.mui-pill-color-default {
+  border-color: rgba(0, 0, 0, 0.3);
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.mui-pill-variant-outlined.mui-pill-color-primary {
+  border-color: var(--kt-color-primary);
+  color: var(--kt-color-primary);
+}
+
+.mui-pill-variant-outlined.mui-pill-color-secondary {
+  border-color: var(--kt-color-secondary);
+  color: var(--kt-color-secondary);
+}
+
+.mui-pill-variant-outlined.mui-pill-color-error {
+  border-color: var(--kt-color-error);
+  color: var(--kt-color-error);
+}
+
+.mui-pill-variant-outlined.mui-pill-color-warning {
+  border-color: var(--kt-color-warning);
+  color: var(--kt-color-warning);
+}
+
+.mui-pill-variant-outlined.mui-pill-color-info {
+  border-color: var(--kt-color-info);
+  color: var(--kt-color-info);
+}
+
+.mui-pill-variant-outlined.mui-pill-color-success {
+  border-color: var(--kt-color-success);
+  color: var(--kt-color-success);
+}
+
+@media (prefers-color-scheme: dark) {
+  .mui-pill-variant-filled.mui-pill-color-default {
+    background: rgba(255, 255, 255, 0.14);
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  .mui-pill-variant-outlined.mui-pill-color-default {
+    border-color: rgba(255, 255, 255, 0.35);
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .mui-pill-delete:hover {
+    background: rgba(255, 255, 255, 0.14);
+  }
+}
+
+`;const lr=u("span",{class:"mui-pill-delete-mark","aria-hidden":"true",children:"×"});function cr(i){const o=i["on:click"]??r,t=i["on:delete"],a=d(i.label??""),n=d(i.color??"default"),l=d(i.variant??"filled"),c=d(i.size??"medium"),m=d(i.clickable??!!i["on:click"]),b=d(i.disabled??!1),x=d(i.autoRemoveOnDelete??!0),g=d(i.class??""),h=d(e(i.style)),f=p(()=>["mui-pill",`mui-pill-color-${n.value}`,`mui-pill-variant-${l.value}`,`mui-pill-size-${c.value}`,m.value?"mui-pill-clickable":"",b.value?"mui-pill-disabled":"",g.value].join(" "),[n,l,c,m,b,g]),v=s("span",{class:f,style:h,role:m.toComputed(e=>e?"button":"presentation"),tabIndex:p(()=>m.value&&!b.value?0:void 0,[m,b]),"on:click":e=>{m.value&&!b.value&&o(e)},"on:keydown":e=>{m.value&&!b.value&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),o(e)))},children:[u("span",{"k-if":i.icon,class:"mui-pill-icon",children:i.icon}),u("span",{class:"mui-pill-label",children:i.children??a}),u("button",{"k-if":t,class:"mui-pill-delete",type:"button",tabIndex:-1,"aria-label":"Delete","on:click":e=>{if(e.stopPropagation(),b.value||!t)return;const r=t(e);x.value&&!1!==r&&v.remove()},children:i.deleteIcon??lr})]});return Fe(v,i,["on:click","on:delete"]),v}qe`
+.mui-badge-root {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+.mui-badge-content {
+  display: inline-flex;
+  align-items: center;
+}
+
+.mui-badge-badge {
+  --mui-badge-translate-x: 50%;
+  --mui-badge-translate-y: -50%;
+  position: absolute;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  padding: 0 6px;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  z-index: 1;
+  pointer-events: none;
+  transform: translate(var(--mui-badge-translate-x), var(--mui-badge-translate-y)) scale(1);
+  transform-origin: center;
+  transition:
+    transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.mui-badge-standard {
+  min-width: 20px;
+  height: 20px;
+}
+
+.mui-badge-dot {
+  min-width: 8px;
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border-radius: 4px;
+}
+
+.mui-badge-overlap-circular.mui-badge-anchor-top-right {
+  top: 14%;
+  right: 14%;
+}
+
+.mui-badge-overlap-circular.mui-badge-anchor-top-left {
+  top: 14%;
+  left: 14%;
+}
+
+.mui-badge-overlap-circular.mui-badge-anchor-bottom-right {
+  bottom: 14%;
+  right: 14%;
+}
+
+.mui-badge-overlap-circular.mui-badge-anchor-bottom-left {
+  bottom: 14%;
+  left: 14%;
+}
+
+.mui-badge-overlap-rectangular.mui-badge-anchor-top-right {
+  top: 0;
+  right: 0;
 }
 
-function CompressIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M4 9h16v2H4zm0 4h16v2H4zm8-9 4 4H8zm0 14 4-4H8z" }) }));
+.mui-badge-overlap-rectangular.mui-badge-anchor-top-left {
+  top: 0;
+  left: 0;
 }
 
-function SubtitlesIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z" }) }));
+.mui-badge-overlap-rectangular.mui-badge-anchor-bottom-right {
+  bottom: 0;
+  right: 0;
 }
 
-function SettingsIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" }) }));
+.mui-badge-overlap-rectangular.mui-badge-anchor-bottom-left {
+  bottom: 0;
+  left: 0;
 }
 
-function NewReleasesIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "m23 12-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12zm-12.91 4.72-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48-7.33 7.35z" }) }));
+.mui-badge-anchor-top-right {
+  --mui-badge-translate-x: 50%;
+  --mui-badge-translate-y: -50%;
 }
 
-function FolderOpenIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }));
+.mui-badge-anchor-top-left {
+  --mui-badge-translate-x: -50%;
+  --mui-badge-translate-y: -50%;
 }
 
-function PlayArrowIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M8 5v14l11-7z" }) }));
+.mui-badge-anchor-bottom-right {
+  --mui-badge-translate-x: 50%;
+  --mui-badge-translate-y: 50%;
 }
 
-function ContentPasteIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }) }));
+.mui-badge-anchor-bottom-left {
+  --mui-badge-translate-x: -50%;
+  --mui-badge-translate-y: 50%;
 }
 
-function DeleteIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }) }));
+.mui-badge-invisible {
+  opacity: 0;
+  transform: translate(var(--mui-badge-translate-x), var(--mui-badge-translate-y)) scale(0);
 }
 
-function StopIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M6 6h12v12H6z" }) }));
+.mui-badge-color-default {
+  background: #616161;
+  color: #fff;
 }
 
-function FileOpenIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H15l6-6V4c0-1.1-.9-2-2-2zm-1 7V3.5L18.5 9H13z" }) }));
+.mui-badge-color-primary {
+  background: var(--kt-color-primary);
+  color: #fff;
 }
 
-function ColorLensIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }) }));
+.mui-badge-color-secondary {
+  background: var(--kt-color-secondary);
+  color: #fff;
 }
 
-function WallpaperIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2V4zm6 9-4 5h12l-3-4-2.03 2.71L10 13zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5zM20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2zm0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2v7zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4v-7z" }) }));
+.mui-badge-color-error {
+  background: var(--kt-color-error);
+  color: #fff;
 }
 
-function ExpandMoreIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" }) }));
+.mui-badge-color-warning {
+  background: var(--kt-color-warning);
+  color: #fff;
 }
 
-function SaveIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z" }) }));
+.mui-badge-color-info {
+  background: var(--kt-color-info);
+  color: #fff;
 }
 
-function UploadFileIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11zM8 15.01l1.41 1.41L11 14.84V19h2v-4.16l1.59 1.59L16 15.01 12.01 11z" }) }));
+.mui-badge-color-success {
+  background: var(--kt-color-success);
+  color: #fff;
 }
 
-function VideoFileIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6zm10-7v-1.5l2 1.5-2 1.5V13H8v-2h8z" }) }));
+`;const sr={vertical:"top",horizontal:"right"};function ur(r){const i=d(r.class??""),o=d(e(r.style)),t=i.toComputed(e=>"mui-badge-root "+e),a=d(r.badgeContent??""),n=d(r.max??99),l=d(r.showZero??!1),c=d(r.invisible??!1),m=d(r.color??"default"),b=d(r.variant??"standard"),x=d(r.overlap??"rectangular"),g=d(r.anchorOrigin??sr),h=p(()=>{if("dot"===b.value)return"";const e=a.value;return"number"==typeof e?e>n.value?`${n.value}+`:`${e}`:e??""},[a,n,b]),f=p(()=>{if(c.value)return!0;if("dot"===b.value)return!1;const e=a.value;return""===e||null==e||(0===e||"0"===e)&&!l.value},[c,b,a,l]),v=p(()=>{const e=g.value?.vertical??sr.vertical,r=g.value?.horizontal??sr.horizontal;return["mui-badge-badge",`mui-badge-${b.value}`,`mui-badge-color-${m.value}`,`mui-badge-overlap-${x.value}`,`mui-badge-anchor-${e}-${r}`,f.value?"mui-badge-invisible":""].join(" ")},[b,m,x,g,f]),k=s("span",{class:t,style:o,children:[u("span",{class:"mui-badge-content",children:r.children}),u("span",{class:v,"aria-hidden":f,children:h})]});return Fe(k,r),k}qe`
+.mui-popover-root {
+  position: fixed;
+  inset: 0;
+  z-index: 1300;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
+    visibility 0ms linear 180ms;
 }
 
-function QueuePlayNextIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h2v-2H3V5h18v8h2V5c0-1.11-.9-2-2-2zm-8 7V7h-2v3H8v2h3v3h2v-3h3v-2h-3zm11 8-4.5 4.5L18 21l3-3-3-3 1.5-1.5L24 18z" }) }));
+.mui-popover-rendered {
+  visibility: visible;
 }
 
-function MenuIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" }) }));
+.mui-popover-open {
+  opacity: 1;
+  visibility: visible;
+  transition-delay: 0ms;
 }
 
-function HomeIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" }) }));
+.mui-popover-paper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  min-width: 16px;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100vh - 32px);
+  overflow: auto;
+  background: #fff;
+  border-radius: 4px;
+  color: rgba(0, 0, 0, 0.87);
+  pointer-events: auto;
+  outline: 0;
+  transform-origin: top left;
+  opacity: 0;
+  transform: translateY(8px) scale(0.98);
+  transition:
+    opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 180ms cubic-bezier(0.2, 0, 0, 1);
+  padding: 8px 0;
 }
 
-function ContentCopyIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) }));
+.mui-popover-open .mui-popover-paper {
+  opacity: 1;
+  transform: translateY(0) scale(1);
 }
 
-function SelectAllIcon(props) {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2zM7 17h10V7H7v10zm2-8h6v6H9V9z" }) }));
+@media (prefers-color-scheme: dark) {
+  .mui-popover-paper {
+    background: #1f1f1f;
+    color: rgba(255, 255, 255, 0.9);
+  }
 }
 
-export { Alert, Button, Checkbox, CheckboxGroup, ColorLensIcon, CompressIcon, ContentCopyIcon, ContentPasteIcon, DeleteIcon, Dialog, DownloadIcon, ExpandMoreIcon, FileOpenIcon, FolderOpenIcon, FormLabel, HomeIcon, LinearProgress, MenuIcon, NewReleasesIcon, PlayArrowIcon, QueuePlayNextIcon, Radio, RadioGroup, SaveIcon, Select, SelectAllIcon, SettingsIcon, StopIcon, SubtitlesIcon, TextField, UploadFileIcon, VideoFileIcon, WallpaperIcon };
+`;const dr={vertical:"top",horizontal:"left"},pr={vertical:"top",horizontal:"left"},mr=(e,r)=>"center"===r?e/2:"bottom"===r?e:0,br=(e,r)=>"center"===r?e/2:"right"===r?e:0;function xr(i){const o=i["on:close"]??r,t=d(i.class??""),s=d(e(i.style));let m=0,b=0;const x=()=>{m&&(clearTimeout(m),m=0),b&&(clearTimeout(b),b=0)};let g=0;const h=()=>{v.value&&(g&&clearTimeout(g),g=window.setTimeout(()=>{L(),g=0},0))},f=e=>{if(x(),j.setAttribute("aria-hidden",String(!e)),e)return R.style.display="block",R.classList.add("mui-popover-rendered"),void(m=window.setTimeout(()=>{m=0,v.value&&R.classList.add("mui-popover-open")},0));R.classList.remove("mui-popover-open"),b=window.setTimeout(()=>{b=0,v.value||(R.style.display="none",R.classList.remove("mui-popover-rendered"))},180)},v=d(i.open??!1,e=>{f(e),e&&h()}),k=d(i.anchorEl??null,h),w=d(i.anchorOrigin??dr,h),y=d(i.transformOrigin??pr,h),z=d(i.marginThreshold??16,h),C=d(i.elevation??8),$=p(()=>["mui-popover-paper",t.value].join(" ").trim(),[t]),S=p(()=>{const e=s.value;return`${e}${e?";":""}box-shadow:${(e=>{const r=a(0,n(24,e));return 0===r?"none":`0 ${a(1,l(r/2))}px ${l(3+1.4*r)}px rgba(0, 0, 0, 0.2), 0 ${a(1,l(r/3))}px ${l(2+.9*r)}px rgba(0, 0, 0, 0.14), 0 ${a(1,l(r/5))}px ${l(2+.6*r)}px rgba(0, 0, 0, 0.12)`})(C.value)}`},[s,C]),L=()=>{if(!v.value)return;const e=j.getBoundingClientRect(),r=k.value,i=r?r.getBoundingClientRect():{width:0,height:0,top:window.innerHeight/2,left:window.innerWidth/2},o=w.value??dr,t=y.value??pr;let n=i.top+mr(i.height,o.vertical)-mr(e.height,t.vertical),s=i.left+br(i.width,o.horizontal)-br(e.width,t.horizontal);const u=a(0,z.value);n=c(n,u,window.innerHeight-e.height-u),s=c(s,u,window.innerWidth-e.width-u),j.style.top=`${l(n)}px`,j.style.left=`${l(s)}px`},A=e=>{v.value&&(v.value=!1,o(e))},E=e=>{if(!v.value)return;const r=e.target;r&&(j.contains(r)||k.value?.contains(r)||A("backdropClick"))},I=e=>{"Escape"===e.key&&A("escapeKeyDown")},j=u("div",{class:$,style:S,role:"dialog","aria-hidden":!v.value,children:i.children}),R=u("div",{class:"mui-popover-root "+(v.value?"mui-popover-open mui-popover-rendered":""),style:v.value?"display: block;":"display: none;",children:j});document.addEventListener("mousedown",E),document.addEventListener("keydown",I),window.addEventListener("resize",h),window.addEventListener("scroll",h,!0),f(v.value),v.value&&h();const M=R.remove;return R.remove=()=>(x(),g&&clearTimeout(g),document.removeEventListener("mousedown",E),document.removeEventListener("keydown",I),window.removeEventListener("resize",h),window.removeEventListener("scroll",h,!0),M.call(R)),Fe(R,i,["on:close"]),R}export{Ne as Alert,ur as Badge,Ye as Button,ar as Card,Ze as Checkbox,Je as CheckboxGroup,Ke as Dialog,Xe as DropdownButton,Qe as FormLabel,er as LinearProgress,cr as Pill,xr as Popover,ir as Radio,or as RadioGroup,tr as Select,nr as Switch,rr as TextField};
+//# sourceMappingURL=index.mjs.map