@eduboxpro/studio 0.1.35 → 0.1.37

package/fesm2022/eduboxpro-studio.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, untracked, output, PLATFORM_ID, ElementRef, contentChild, viewChild, forwardRef, DOCUMENT as DOCUMENT$1, DestroyRef, Injector, model, afterNextRender, HostListener, Renderer2, TemplateRef, ContentChild, Input, Directive, contentChildren } from '@angular/core';
+import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, ViewEncapsulation, untracked, output, PLATFORM_ID, ElementRef, contentChild, viewChild, forwardRef, DOCUMENT as DOCUMENT$1, DestroyRef, Injector, model, afterNextRender, HostListener, Renderer2, TemplateRef, ContentChild, Input, Directive, contentChildren } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as LucideIcons from 'lucide-angular';
@@ -396,6 +396,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
   `, styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], absoluteStrokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "absoluteStrokeWidth", required: false }] }], showFallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFallback", required: false }] }], fallbackIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackIcon", required: false }] }] } });
 
+class AvatarComponent {
+    /** Image source URL */
+    src = input(...(ngDevMode ? [undefined, { debugName: "src" }] : []));
+    /** Alt text for image */
+    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : []));
+    /** Name to generate initials from */
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Shape variant */
+    shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    /** Custom background color */
+    customColor = input(...(ngDevMode ? [undefined, { debugName: "customColor" }] : []));
+    /** Computed initials from name */
+    initials = computed(() => {
+        const name = this.name();
+        if (!name)
+            return '';
+        const parts = name.trim().split(/\s+/);
+        if (parts.length === 1) {
+            return parts[0].substring(0, 2);
+        }
+        return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0));
+    }, ...(ngDevMode ? [{ debugName: "initials" }] : []));
+    /** Computed background color */
+    backgroundColor = computed(() => {
+        if (this.customColor())
+            return this.customColor();
+        const name = this.name();
+        if (!name)
+            return undefined;
+        // Generate consistent color from name
+        const colors = [
+            '#ef4444', '#f97316', '#f59e0b', '#84cc16',
+            '#22c55e', '#14b8a6', '#06b6d4', '#0ea5e9',
+            '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7',
+            '#d946ef', '#ec4899', '#f43f5e',
+        ];
+        let hash = 0;
+        for (let i = 0; i < name.length; i++) {
+            hash = name.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        return colors[Math.abs(hash) % colors.length];
+    }, ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
+    /** Computed CSS classes */
+    avatarClasses = computed(() => {
+        return `avatar avatar--${this.size()} avatar--${this.shape()}`;
+    }, ...(ngDevMode ? [{ debugName: "avatarClasses" }] : []));
+    /** Computed icon size based on avatar size */
+    iconSize = computed(() => {
+        const sizes = {
+            xs: 12,
+            sm: 16,
+            md: 20,
+            lg: 24,
+            xl: 32,
+        };
+        return sizes[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    onImageError(event) {
+        const img = event.target;
+        img.style.display = 'none';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AvatarComponent, isStandalone: true, selector: "ui-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, customColor: { classPropertyName: "customColor", publicName: "customColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="avatar"
+      [class]="avatarClasses()"
+      [style.background-color]="!src() ? backgroundColor() : undefined"
+    >
+      @if (src()) {
+        <img
+          class="avatar__image"
+          [src]="src()"
+          [alt]="alt()"
+          (error)="onImageError($event)"
+        />
+      } @else if (initials()) {
+        <span class="avatar__initials">{{ initials() }}</span>
+      } @else {
+        <studio-icon name="user" [size]="iconSize()" class="avatar__icon" />
+      }
+    </div>
+  `, isInline: true, styles: [".avatar{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background:var(--studio-avatar-bg, #e5e7eb);color:var(--studio-avatar-text, #374151);font-weight:500;flex-shrink:0}.avatar--circle{border-radius:50%}.avatar--square{border-radius:8px}.avatar--xs{width:24px;height:24px;font-size:10px}.avatar--sm{width:32px;height:32px;font-size:12px}.avatar--md{width:40px;height:40px;font-size:14px}.avatar--lg{width:48px;height:48px;font-size:16px}.avatar--xl{width:64px;height:64px;font-size:20px}.avatar__image{width:100%;height:100%;object-fit:cover}.avatar__initials{text-transform:uppercase;-webkit-user-select:none;user-select:none}.avatar__icon{opacity:.6}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-avatar', standalone: true, imports: [IconComponent], template: `
+    <div
+      class="avatar"
+      [class]="avatarClasses()"
+      [style.background-color]="!src() ? backgroundColor() : undefined"
+    >
+      @if (src()) {
+        <img
+          class="avatar__image"
+          [src]="src()"
+          [alt]="alt()"
+          (error)="onImageError($event)"
+        />
+      } @else if (initials()) {
+        <span class="avatar__initials">{{ initials() }}</span>
+      } @else {
+        <studio-icon name="user" [size]="iconSize()" class="avatar__icon" />
+      }
+    </div>
+  `, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".avatar{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background:var(--studio-avatar-bg, #e5e7eb);color:var(--studio-avatar-text, #374151);font-weight:500;flex-shrink:0}.avatar--circle{border-radius:50%}.avatar--square{border-radius:8px}.avatar--xs{width:24px;height:24px;font-size:10px}.avatar--sm{width:32px;height:32px;font-size:12px}.avatar--md{width:40px;height:40px;font-size:14px}.avatar--lg{width:48px;height:48px;font-size:16px}.avatar--xl{width:64px;height:64px;font-size:20px}.avatar__image{width:100%;height:100%;object-fit:cover}.avatar__initials{text-transform:uppercase;-webkit-user-select:none;user-select:none}.avatar__icon{opacity:.6}\n"] }]
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], customColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "customColor", required: false }] }] } });
+
 // Минимальный набор - только для внутренних компонентов библиотеки
 const MINIMAL_ICONS = {
     X: LucideIcons.X,
@@ -3637,6 +3746,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
   `, styles: [":host{display:inline-block}.dropdown__item{width:100%;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:none;border:none;border-radius:var(--studio-radius-sm);color:var(--studio-text-primary);font-size:.875rem;cursor:pointer;transition:all var(--studio-transition-fast);text-align:left;&--disabled{opacity:.5;cursor:not-allowed}&--danger{color:var(--studio-error)}}.dropdown__item:hover:not(:disabled){background:var(--studio-bg-secondary)}.dropdown__item:active:not(:disabled){transform:scale(.98)}.dropdown__icon{flex-shrink:0;color:var(--studio-text-secondary)}.dropdown__label{flex:1}.dropdown__shortcut{font-size:.75rem;color:var(--studio-text-tertiary);font-family:var(--studio-font-family-mono, monospace)}.dropdown__divider{height:1px;background:var(--studio-border-primary);margin:.25rem 0}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
+class EmptyStateComponent {
+    /** Icon name from lucide icons */
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    /** Title text */
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    /** Description text */
+    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Computed icon size based on component size */
+    iconSize = () => {
+        const sizes = {
+            sm: 20,
+            md: 24,
+            lg: 32,
+        };
+        return sizes[this.size()];
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: EmptyStateComponent, isStandalone: true, selector: "ui-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="empty-state"
+      [class.empty-state--sm]="size() === 'sm'"
+      [class.empty-state--md]="size() === 'md'"
+      [class.empty-state--lg]="size() === 'lg'"
+    >
+      @if (icon()) {
+        <div class="empty-state__icon">
+          <studio-icon [name]="icon()!" [size]="iconSize()" />
+        </div>
+      }
+      @if (title()) {
+        <h3 class="empty-state__title">{{ title() }}</h3>
+      }
+      @if (description()) {
+        <p class="empty-state__description">{{ description() }}</p>
+      }
+      <div class="empty-state__actions">
+        <ng-content />
+      </div>
+    </div>
+  `, isInline: true, styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem}.empty-state__icon{display:flex;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:50%;background:var(--studio-bg-tertiary, #f3f4f6);color:var(--studio-text-tertiary, #9ca3af);margin-bottom:1rem}.empty-state--sm .empty-state__icon{width:3rem;height:3rem;margin-bottom:.75rem}.empty-state--lg .empty-state__icon{width:5rem;height:5rem;margin-bottom:1.5rem}.empty-state__title{margin:0 0 .5rem;font-size:1.125rem;font-weight:600;color:var(--studio-text-primary, #111827)}.empty-state--sm .empty-state__title{font-size:1rem;margin-bottom:.25rem}.empty-state--lg .empty-state__title{font-size:1.25rem;margin-bottom:.75rem}.empty-state__description{margin:0 0 1.5rem;font-size:.875rem;color:var(--studio-text-secondary, #6b7280);max-width:24rem}.empty-state--sm .empty-state__description{font-size:.8125rem;margin-bottom:1rem}.empty-state--lg .empty-state__description{font-size:1rem;margin-bottom:2rem}.empty-state__actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.empty-state__actions:empty{display:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: EmptyStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-empty-state', standalone: true, imports: [IconComponent], template: `
+    <div
+      class="empty-state"
+      [class.empty-state--sm]="size() === 'sm'"
+      [class.empty-state--md]="size() === 'md'"
+      [class.empty-state--lg]="size() === 'lg'"
+    >
+      @if (icon()) {
+        <div class="empty-state__icon">
+          <studio-icon [name]="icon()!" [size]="iconSize()" />
+        </div>
+      }
+      @if (title()) {
+        <h3 class="empty-state__title">{{ title() }}</h3>
+      }
+      @if (description()) {
+        <p class="empty-state__description">{{ description() }}</p>
+      }
+      <div class="empty-state__actions">
+        <ng-content />
+      </div>
+    </div>
+  `, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem}.empty-state__icon{display:flex;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:50%;background:var(--studio-bg-tertiary, #f3f4f6);color:var(--studio-text-tertiary, #9ca3af);margin-bottom:1rem}.empty-state--sm .empty-state__icon{width:3rem;height:3rem;margin-bottom:.75rem}.empty-state--lg .empty-state__icon{width:5rem;height:5rem;margin-bottom:1.5rem}.empty-state__title{margin:0 0 .5rem;font-size:1.125rem;font-weight:600;color:var(--studio-text-primary, #111827)}.empty-state--sm .empty-state__title{font-size:1rem;margin-bottom:.25rem}.empty-state--lg .empty-state__title{font-size:1.25rem;margin-bottom:.75rem}.empty-state__description{margin:0 0 1.5rem;font-size:.875rem;color:var(--studio-text-secondary, #6b7280);max-width:24rem}.empty-state--sm .empty-state__description{font-size:.8125rem;margin-bottom:1rem}.empty-state--lg .empty-state__description{font-size:1rem;margin-bottom:2rem}.empty-state__actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.empty-state__actions:empty{display:none}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
 /**
  * Input component with form control support, variants, and accessibility
  *
@@ -5323,6 +5502,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Sidebar component
  */
 
+class SkeletonComponent {
+    /** Variant of skeleton */
+    variant = input('text', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Width of skeleton */
+    width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    /** Height of skeleton */
+    height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : []));
+    /** Enable animation */
+    animate = input(true, ...(ngDevMode ? [{ debugName: "animate" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: SkeletonComponent, isStandalone: true, selector: "ui-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="skeleton"
+      [class.skeleton--text]="variant() === 'text'"
+      [class.skeleton--circular]="variant() === 'circular'"
+      [class.skeleton--rectangular]="variant() === 'rectangular'"
+      [class.skeleton--rounded]="variant() === 'rounded'"
+      [class.skeleton--animate]="animate()"
+      [style.width]="width()"
+      [style.height]="height()"
+    ></div>
+  `, isInline: true, styles: [".skeleton{background:var(--studio-skeleton-bg, #e5e7eb);display:block}.skeleton--animate{animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton--text{height:1em;border-radius:4px;transform-origin:0 55%;transform:scaleY(.6)}.skeleton--circular{border-radius:50%}.skeleton--rectangular{border-radius:0}.skeleton--rounded{border-radius:8px}@keyframes skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}:host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-skeleton', standalone: true, template: `
+    <div
+      class="skeleton"
+      [class.skeleton--text]="variant() === 'text'"
+      [class.skeleton--circular]="variant() === 'circular'"
+      [class.skeleton--rectangular]="variant() === 'rectangular'"
+      [class.skeleton--rounded]="variant() === 'rounded'"
+      [class.skeleton--animate]="animate()"
+      [style.width]="width()"
+      [style.height]="height()"
+    ></div>
+  `, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".skeleton{background:var(--studio-skeleton-bg, #e5e7eb);display:block}.skeleton--animate{animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton--text{height:1em;border-radius:4px;transform-origin:0 55%;transform:scaleY(.6)}.skeleton--circular{border-radius:50%}.skeleton--rectangular{border-radius:0}.skeleton--rounded{border-radius:8px}@keyframes skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}:host{display:block}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }] } });
+
 /**
  * Toggle switch component with customizable size and color
  *
@@ -7677,6 +7895,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     }, template: "@if (values()) {\n  <div class=\"studio-inspector__container\">\n    @for (section of values()!.sections; track trackBySectionId($index, section)) {\n      <div class=\"studio-inspector__section\"\n           [class.studio-inspector__section--expanded]=\"isSectionExpanded(section.id)\"\n           [class.studio-inspector__section--collapsed]=\"!isSectionExpanded(section.id)\">\n\n        <studio-button\n          variant=\"ghost\"\n          [fullWidth]=\"true\"\n          class=\"studio-inspector__section-header\"\n          [class.studio-inspector__section-header--collapsible]=\"collapsible()\"\n          [disabled]=\"!collapsible()\"\n          [attr.aria-expanded]=\"isSectionExpanded(section.id)\"\n          [attr.aria-controls]=\"'section-content-' + section.id\"\n          (click)=\"toggleSection(section.id)\">\n\n          @if (showIcons() && section.icon) {\n            <studio-icon\n              [name]=\"section.icon\"\n              [size]=\"16\"\n              class=\"studio-inspector__section-icon\"\n            />\n          }\n\n          <span class=\"studio-inspector__section-title\">{{ section.title }}</span>\n\n          @if (collapsible()) {\n            <studio-icon\n              [name]=\"'chevron-down'\"\n              [size]=\"16\"\n              class=\"studio-inspector__section-toggle\"\n            />\n          }\n        </studio-button>\n\n        @if (isSectionExpanded(section.id)) {\n          <div\n            class=\"studio-inspector__section-content\"\n            [id]=\"'section-content-' + section.id\">\n\n            @if (section.groups) {\n              @for (group of section.groups; track trackByGroupId($index, group); let isLast = $last) {\n                <div class=\"studio-inspector__group\">\n\n                  @if (showGroupLabels() && group.label) {\n                    <div class=\"studio-inspector__group-label\">{{ group.label }}</div>\n                  }\n\n                  @for (param of group.parameters; track trackByParameterId($index, param)) {\n                    <div class=\"studio-inspector__parameter\">\n                      @if (param.type !== 'boolean' && param.type !== 'checkbox' && param.type !== 'radio') {\n                        <div class=\"studio-inspector__parameter-label\">{{ param.label }}</div>\n                      }\n\n                      @if (param.type === 'text') {\n                        <studio-input\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [readonly]=\"param.readonly || false\"\n                          [maxLength]=\"param.maxLength\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'number') {\n                        <div class=\"studio-inspector__number-input\">\n                          <studio-input\n                            type=\"number\"\n                            [ngModel]=\"param.value\"\n                            [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                            (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                            [variant]=\"componentVariant()\"\n                            [size]=\"componentSize()\"\n                            [min]=\"param.min\"\n                            [max]=\"param.max\"\n                            [step]=\"param.step\"\n                            [disabled]=\"param.disabled || false\"\n                            [readonly]=\"param.readonly || false\"\n                            [fullWidth]=\"fullWidth()\"\n                          />\n                          @if (param.suffix) {\n                            <span class=\"studio-inspector__suffix\">{{ param.suffix }}</span>\n                          }\n                        </div>\n                      }\n\n                      @if (param.type === 'textarea') {\n                        <studio-textarea\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [readonly]=\"param.readonly || false\"\n                          [maxLength]=\"param.maxLength\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'color') {\n                        <studio-color-picker-compact\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [disabled]=\"param.disabled || false\"\n                        />\n                      }\n\n                      @if (param.type === 'select') {\n                        <studio-select\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [options]=\"param.options || []\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'boolean') {\n                        <studio-switch\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [label]=\"param.label\"\n                          [size]=\"componentSize()\"\n                          [disabled]=\"param.disabled || false\"\n                        />\n                      }\n\n                      @if (param.type === 'checkbox') {\n                        <div class=\"studio-inspector__options\">\n                          @for (option of param.options; track trackByOptionValue($index, option)) {\n                            <studio-checkbox\n                              [ngModel]=\"isChecked(param, option.value)\"\n                              [name]=\"section.id + '-' + group.id + '-' + param.id + '-' + option.value\"\n                              (ngModelChange)=\"onCheckboxChange(section.id, group.id, param.id, option.value, $event)\"\n                              [label]=\"option.label\"\n                              [disabled]=\"param.disabled || option.disabled || false\"\n                              [size]=\"componentSize()\"\n                            />\n                          }\n                        </div>\n                      }\n\n                      @if (param.type === 'radio') {\n                        <div class=\"studio-inspector__options\">\n                          @for (option of param.options; track trackByOptionValue($index, option)) {\n                            <div class=\"studio-inspector__option\">\n                              <studio-radio-button\n                                [ngModel]=\"param.value\"\n                                (ngModelChange)=\"onRadioChange(section.id, group.id, param.id, $event)\"\n                                [value]=\"option.value\"\n                                [label]=\"option.label\"\n                                [name]=\"getRadioName(section.id, group.id, param.id)\"\n                                [disabled]=\"param.disabled || option.disabled || false\"\n                                [size]=\"componentSize()\"\n                              />\n                              @if (showDefaultIndicator() && isDefault(param, option.value)) {\n                                <span class=\"studio-inspector__default-indicator\">(default)</span>\n                              }\n                            </div>\n                          }\n                        </div>\n                      }\n\n                      @if (param.hint) {\n                        <div class=\"studio-inspector__parameter-hint\">{{ param.hint }}</div>\n                      }\n                    </div>\n                  }\n\n                  @if (!isLast && groupDivider() !== 'none') {\n                    <div class=\"studio-inspector__group-divider\"\n                         [class.studio-inspector__group-divider--line]=\"groupDivider() === 'line'\"\n                         [class.studio-inspector__group-divider--space]=\"groupDivider() === 'space'\">\n                    </div>\n                  }\n                </div>\n              }\n            }\n\n            @if (section.parameters) {\n              @for (param of section.parameters; track trackByParameterId($index, param)) {\n                <div class=\"studio-inspector__parameter\">\n                  @if (param.type !== 'boolean' && param.type !== 'checkbox' && param.type !== 'radio') {\n                    <div class=\"studio-inspector__parameter-label\">{{ param.label }}</div>\n                  }\n\n                  @if (param.type === 'text') {\n                    <studio-input\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [readonly]=\"param.readonly || false\"\n                      [maxLength]=\"param.maxLength\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'number') {\n                    <div class=\"studio-inspector__number-input\">\n                      <studio-input\n                        type=\"number\"\n                        [ngModel]=\"param.value\"\n                        [name]=\"section.id + '-' + param.id\"\n                        (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                        [variant]=\"componentVariant()\"\n                        [size]=\"componentSize()\"\n                        [min]=\"param.min\"\n                        [max]=\"param.max\"\n                        [step]=\"param.step\"\n                        [disabled]=\"param.disabled || false\"\n                        [readonly]=\"param.readonly || false\"\n                        [fullWidth]=\"fullWidth()\"\n                      />\n                      @if (param.suffix) {\n                        <span class=\"studio-inspector__suffix\">{{ param.suffix }}</span>\n                      }\n                    </div>\n                  }\n\n                  @if (param.type === 'textarea') {\n                    <studio-textarea\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [readonly]=\"param.readonly || false\"\n                      [maxLength]=\"param.maxLength\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'color') {\n                    <studio-color-picker-compact\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [disabled]=\"param.disabled || false\"\n                    />\n                  }\n\n                  @if (param.type === 'select') {\n                    <studio-select\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [options]=\"param.options || []\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'boolean') {\n                    <studio-switch\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [label]=\"param.label\"\n                      [size]=\"componentSize()\"\n                      [disabled]=\"param.disabled || false\"\n                    />\n                  }\n\n                  @if (param.type === 'checkbox') {\n                    <div class=\"studio-inspector__options\">\n                      @for (option of param.options; track trackByOptionValue($index, option)) {\n                        <studio-checkbox\n                          [ngModel]=\"isChecked(param, option.value)\"\n                          [name]=\"section.id + '-' + param.id + '-' + option.value\"\n                          (ngModelChange)=\"onCheckboxChange(section.id, null, param.id, option.value, $event)\"\n                          [label]=\"option.label\"\n                          [disabled]=\"param.disabled || option.disabled || false\"\n                          [size]=\"componentSize()\"\n                        />\n                      }\n                    </div>\n                  }\n\n                  @if (param.type === 'radio') {\n                    <div class=\"studio-inspector__options\">\n                      @for (option of param.options; track trackByOptionValue($index, option)) {\n                        <div class=\"studio-inspector__option\">\n                          <studio-radio-button\n                            [ngModel]=\"param.value\"\n                            (ngModelChange)=\"onRadioChange(section.id, null, param.id, $event)\"\n                            [value]=\"option.value\"\n                            [label]=\"option.label\"\n                            [name]=\"getRadioName(section.id, null, param.id)\"\n                            [disabled]=\"param.disabled || option.disabled || false\"\n                            [size]=\"componentSize()\"\n                          />\n                          @if (showDefaultIndicator() && isDefault(param, option.value)) {\n                            <span class=\"studio-inspector__default-indicator\">(default)</span>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n\n                  @if (param.hint) {\n                    <div class=\"studio-inspector__parameter-hint\">{{ param.hint }}</div>\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;font-family:var(--studio-font-family)}.studio-inspector__container{display:flex;flex-direction:column;gap:.75rem}.studio-inspector__section{background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);overflow:hidden}.studio-inspector__section-header{width:100%;display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:var(--studio-bg-secondary);border:none;border-bottom:1px solid var(--studio-border-primary);cursor:pointer;transition:background var(--studio-transition-fast);text-align:left}.studio-inspector__section-header--collapsible:hover{background:var(--studio-bg-tertiary)}.studio-inspector__section-header:disabled{cursor:default}.studio-inspector__section-icon{color:var(--studio-text-secondary);flex-shrink:0}.studio-inspector__section-title{flex:1;font-size:.875rem;font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-primary)}.studio-inspector__section-toggle{color:var(--studio-text-secondary);flex-shrink:0;transition:transform var(--studio-transition-fast)}.studio-inspector__section--collapsed .studio-inspector__section-toggle{transform:rotate(-90deg)}.studio-inspector__section--collapsed .studio-inspector__section-content{display:none}.studio-inspector__section--expanded .studio-inspector__section-toggle{transform:rotate(0)}.studio-inspector__section-content{padding:1rem;display:flex;flex-direction:column;gap:.75rem}.studio-inspector__group{display:flex;flex-direction:column;gap:.75rem}.studio-inspector__group-label{font-size:.75rem;font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-secondary);text-transform:uppercase;letter-spacing:.05em}.studio-inspector__group-divider--line{height:1px;background:var(--studio-border-primary);margin:.5rem 0}.studio-inspector__group-divider--space{height:.5rem}.studio-inspector__parameter{display:flex;flex-direction:column;gap:.5rem}.studio-inspector__parameter-label{font-size:.8125rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary)}.studio-inspector__parameter-hint{font-size:.75rem;color:var(--studio-text-secondary);line-height:1.4}.studio-inspector__number-input{display:flex;align-items:center;gap:.5rem}.studio-inspector__suffix{font-size:.875rem;color:var(--studio-text-secondary);flex-shrink:0}.studio-inspector__options{display:flex;flex-direction:column;gap:.5rem}.studio-inspector__option{display:flex;align-items:center;gap:.5rem}.studio-inspector__default-indicator{font-size:.75rem;color:var(--studio-text-tertiary);font-style:italic}:host(.studio-inspector--compact) .studio-inspector__container{gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__section-header{padding:.625rem .75rem}:host(.studio-inspector--compact) .studio-inspector__section-content{padding:.75rem;gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__group{gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__parameter{gap:.375rem}:host(.studio-inspector--spacing-sm) .studio-inspector__section-content{gap:.5rem}:host(.studio-inspector--spacing-sm) .studio-inspector__group{gap:.5rem}:host(.studio-inspector--spacing-sm) .studio-inspector__parameter{gap:.375rem}:host(.studio-inspector--spacing-lg) .studio-inspector__section-content{gap:1rem}:host(.studio-inspector--spacing-lg) .studio-inspector__group{gap:1rem}:host(.studio-inspector--spacing-lg) .studio-inspector__parameter{gap:.625rem}:host(.studio-inspector--spacing-lg) .studio-inspector__group-divider--space{height:1rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { componentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentSize", required: false }] }], componentVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentVariant", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], showDefaultIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDefaultIndicator", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], expandedByDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedByDefault", required: false }] }], expandedSectionsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedSections", required: false }] }], showGroupLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGroupLabels", required: false }] }], groupDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupDivider", required: false }] }], groupDividerSpacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupDividerSpacing", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], sectionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionTemplate", required: false }] }], parameterTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "parameterTemplates", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], sectionToggled: [{ type: i0.Output, args: ["sectionToggled"] }], parameterFocused: [{ type: i0.Output, args: ["parameterFocused"] }], parameterBlurred: [{ type: i0.Output, args: ["parameterBlurred"] }] } });
 
+class LogoComponent {
+    /** URL to navigate when logo is clicked */
+    link = input('/', ...(ngDevMode ? [{ debugName: "link" }] : []));
+    /** Path to logo image */
+    logoSrc = input.required(...(ngDevMode ? [{ debugName: "logoSrc" }] : []));
+    /** Text to display next to logo */
+    logoText = input.required(...(ngDevMode ? [{ debugName: "logoText" }] : []));
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Whether to show text */
+    showText = input(true, ...(ngDevMode ? [{ debugName: "showText" }] : []));
+    /** Whether to show text on mobile devices */
+    showTextOnMobile = input(false, ...(ngDevMode ? [{ debugName: "showTextOnMobile" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: LogoComponent, isStandalone: true, selector: "ui-logo", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: true, transformFunction: null }, logoText: { classPropertyName: "logoText", publicName: "logoText", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showText: { classPropertyName: "showText", publicName: "showText", isSignal: true, isRequired: false, transformFunction: null }, showTextOnMobile: { classPropertyName: "showTextOnMobile", publicName: "showTextOnMobile", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <a
+      class="logo"
+      [class.logo--sm]="size() === 'sm'"
+      [class.logo--md]="size() === 'md'"
+      [class.logo--lg]="size() === 'lg'"
+      [routerLink]="link()"
+    >
+      <img [src]="logoSrc()" alt="Logo" class="logo__image" />
+      @if (showText()) {
+        <span
+          class="logo__text"
+          [class.logo__text--hide-mobile]="!showTextOnMobile()"
+        >
+          {{ logoText() }}
+        </span>
+      }
+    </a>
+  `, isInline: true, styles: [".logo{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit;outline:none}.logo:focus-visible{outline:2px solid var(--ui-focus-ring, currentColor);outline-offset:2px;border-radius:4px}.logo__image{height:2rem;width:auto}.logo--sm .logo__image{height:1.5rem}.logo--lg .logo__image{height:2.5rem}.logo__text{font-weight:600;font-size:1.125rem;white-space:nowrap}.logo--sm .logo__text{font-size:1rem}.logo--lg .logo__text{font-size:1.25rem}@media (max-width: 768px){.logo__text--hide-mobile{display:none}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LogoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-logo', standalone: true, imports: [RouterLink], template: `
+    <a
+      class="logo"
+      [class.logo--sm]="size() === 'sm'"
+      [class.logo--md]="size() === 'md'"
+      [class.logo--lg]="size() === 'lg'"
+      [routerLink]="link()"
+    >
+      <img [src]="logoSrc()" alt="Logo" class="logo__image" />
+      @if (showText()) {
+        <span
+          class="logo__text"
+          [class.logo__text--hide-mobile]="!showTextOnMobile()"
+        >
+          {{ logoText() }}
+        </span>
+      }
+    </a>
+  `, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".logo{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit;outline:none}.logo:focus-visible{outline:2px solid var(--ui-focus-ring, currentColor);outline-offset:2px;border-radius:4px}.logo__image{height:2rem;width:auto}.logo--sm .logo__image{height:1.5rem}.logo--lg .logo__image{height:2.5rem}.logo__text{font-weight:600;font-size:1.125rem;white-space:nowrap}.logo--sm .logo__text{font-size:1rem}.logo--lg .logo__text{font-size:1.25rem}@media (max-width: 768px){.logo__text--hide-mobile{display:none}}\n"] }]
+        }], propDecorators: { link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], logoSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoSrc", required: true }] }], logoText: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoText", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showText", required: false }] }], showTextOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTextOnMobile", required: false }] }] } });
+
 /**
  * Theme toggle switch with sun/moon icons
  *
@@ -8239,5 +8514,5 @@ function hasChildren(block) {
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, BadgeWrapperComponent, BottomNavigationComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, COUNTRY_OPTIONS, CardComponent, ChatComponent, ChatInputComponent, ChatMessageComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, ConfirmDialogComponent, ConfirmDialogService, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, FileViewerComponent, IconComponent, InputComponent, InspectorComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PaginationComponent, PhoneInputComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, SignalStore, StudioConfigService, SwitchComponent, TableColumnDirective, TableComponent, TabsComponent, TextareaComponent, ThemeSwitchComponent, ToastComponent, ToastService, TooltipComponent, classNames, defaultFileViewerLabels, hasChildren, isContentBlock, isFormBlock, isInteractiveBlock, isLayoutBlock, isSafeUrl, isStudioBlock, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
+export { AvatarComponent, BadgeComponent, BadgeWrapperComponent, BottomNavigationComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, COUNTRY_OPTIONS, CardComponent, ChatComponent, ChatInputComponent, ChatMessageComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, ConfirmDialogComponent, ConfirmDialogService, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, EmptyStateComponent, FileViewerComponent, IconComponent, InputComponent, InspectorComponent, LogoComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PaginationComponent, PhoneInputComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, SignalStore, SkeletonComponent, StudioConfigService, SwitchComponent, TableColumnDirective, TableComponent, TabsComponent, TextareaComponent, ThemeSwitchComponent, ToastComponent, ToastService, TooltipComponent, classNames, defaultFileViewerLabels, hasChildren, isContentBlock, isFormBlock, isInteractiveBlock, isLayoutBlock, isSafeUrl, isStudioBlock, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
 //# sourceMappingURL=eduboxpro-studio.mjs.map