@semantic-components/ui-lab 0.66.0 → 0.67.0

package/fesm2022/semantic-components-ui-lab.mjs

@@ -1,22 +1,22 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, DestroyRef, output, signal, effect, ElementRef, InjectionToken, model, viewChild, Directive, PLATFORM_ID, afterNextRender, afterRenderEffect, ViewChild, ViewContainerRef, contentChild, contentChildren, untracked, Injectable, TemplateRef } from '@angular/core';
-import { RouterOutlet, Router, NavigationEnd, NavigationStart } from '@angular/router';
-import { cn, SC_FIELD, ScCalendar, buttonVariants, ScSheetProvider, ScSheetPortal, ScSheet, ScSheetClose, ScSkeleton } from '@semantic-components/ui';
+import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, DestroyRef, output, signal, effect, ElementRef, InjectionToken, model, viewChild, Directive, PLATFORM_ID, afterNextRender, afterRenderEffect, ViewChild, ViewContainerRef, contentChild, Injector, runInInjectionContext, contentChildren, untracked, Injectable, TemplateRef } from '@angular/core';
+import { RouterOutlet, Router, NavigationEnd } from '@angular/router';
+import { cn, ScCalendar, buttonVariants, SC_FIELD, ScSheetProvider, ScSheetPortal, ScSheet, ScSheetClose, ScSkeleton, SC_TIME_PICKER } from '@semantic-components/ui';
 import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT } from '@angular/common';
-import { _IdGenerator, CdkTrapFocus } from '@angular/cdk/a11y';
 import * as i1 from '@angular/aria/combobox';
 import { Combobox, ComboboxInput, ComboboxPopupContainer, ComboboxDialog } from '@angular/aria/combobox';
 import { signalSetFn, SIGNAL } from '@angular/core/primitives/signals';
 import * as i1$1 from '@angular/aria/listbox';
 import { Listbox, Option } from '@angular/aria/listbox';
 import * as i1$2 from '@angular/cdk/overlay';
-import { Overlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
+import { Overlay, OverlayModule, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { Temporal } from '@js-temporal/polyfill';
 import { DomSanitizer } from '@angular/platform-browser';
+import { _IdGenerator, CdkTrapFocus } from '@angular/cdk/a11y';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { filter, fromEvent, merge } from 'rxjs';
-import { SiChevronDownIcon, SiGripVerticalIcon, SiXIcon } from '@semantic-icons/lucide-icons';
+import { SiGripVerticalIcon, SiXIcon } from '@semantic-icons/lucide-icons';
 import { cva } from 'class-variance-authority';
 import * as i1$3 from '@angular/aria/tree';
 import { Tree, TreeItemGroup, TreeItem } from '@angular/aria/tree';
@@ -2451,98 +2451,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], checkedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
 
-class ScNativeSelectContainer {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNativeSelectContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScNativeSelectContainer, isStandalone: true, selector: "div[scNativeSelectContainer]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "native-select-container" }, properties: { "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNativeSelectContainer, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'div[scNativeSelectContainer]',
-                    host: {
-                        'data-slot': 'native-select-container',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScNativeSelect {
-    field = inject(SC_FIELD, { optional: true });
-    fallbackId = inject(_IdGenerator).getId('sc-native-select-');
-    idInput = input('', { ...(ngDevMode ? { debugName: "idInput" } : {}), alias: 'id' });
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    id = computed(() => this.idInput() || this.field?.id() || this.fallbackId, ...(ngDevMode ? [{ debugName: "id" }] : []));
-    class = computed(() => cn('border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNativeSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScNativeSelect, isStandalone: true, selector: "select[scNativeSelect]", inputs: { idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "native-select" }, properties: { "attr.id": "id()", "attr.data-size": "size()", "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNativeSelect, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'select[scNativeSelect]',
-                    host: {
-                        'data-slot': 'native-select',
-                        '[attr.id]': 'id()',
-                        '[attr.data-size]': 'size()',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
-
-class ScNativeSelectIcon {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNativeSelectIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScNativeSelectIcon, isStandalone: true, selector: "[scNativeSelectIcon]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "native-select-icon" }, properties: { "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNativeSelectIcon, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scNativeSelectIcon]',
-                    host: {
-                        'data-slot': 'native-select-icon',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScNativeSelectOption {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn(this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNativeSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScNativeSelectOption, isStandalone: true, selector: "option[scNativeSelectOption]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "native-select-option" }, properties: { "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNativeSelectOption, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'option[scNativeSelectOption]',
-                    host: {
-                        'data-slot': 'native-select-option',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScNativeSelectOptGroup {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn(this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNativeSelectOptGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScNativeSelectOptGroup, isStandalone: true, selector: "optgroup[scNativeSelectOptgroup]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "native-select-optgroup" }, properties: { "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNativeSelectOptGroup, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'optgroup[scNativeSelectOptgroup]',
-                    host: {
-                        'data-slot': 'native-select-optgroup',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
 // Token for color picker context
 const SC_COLOR_PICKER = new InjectionToken('SC_COLOR_PICKER');
 // Color conversion utilities
@@ -4087,6 +3995,10 @@ class ScContextMenuSub {
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     /** Whether the submenu is open */
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    /** Overlay origin registered by the sub-trigger */
+    overlayOrigin = null;
+    /** Cancel hide function registered by the sub-trigger */
+    cancelTriggerHide = null;
     class = computed(() => cn('relative', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     show() {
         this.open.set(true);
@@ -4115,10 +4027,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 }]
         }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+const positions = [
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetX: 4,
+    },
+    {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetX: -4,
+    },
+];
+class ScContextMenuSubContent {
+    submenu = inject(ScContextMenuSub);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    positions = positions;
+    class = computed(() => cn('', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    contentClass = computed(() => cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg', this.submenu.open()
+        ? 'opacity-100 scale-100 transition-[opacity,transform] duration-150 ease-out'
+        : 'opacity-0 scale-95 transition-[opacity,transform] duration-150 ease-in'), ...(ngDevMode ? [{ debugName: "contentClass" }] : []));
+    onMouseEnter() {
+        this.submenu.cancelTriggerHide?.();
+    }
+    onMouseLeave() {
+        this.submenu.hide();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScContextMenuSubContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScContextMenuSubContent, isStandalone: true, selector: "div[scContextMenuSubContent]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "context-menu-sub-content" }, properties: { "class": "class()" } }, ngImport: i0, template: `
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="submenu.overlayOrigin!"
+      [cdkConnectedOverlayOpen]="submenu.open()"
+      [cdkConnectedOverlayPositions]="positions"
+    >
+      <div
+        [class]="contentClass()"
+        role="menu"
+        (mouseenter)="onMouseEnter()"
+        (mouseleave)="onMouseLeave()"
+      >
+        <ng-content />
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScContextMenuSubContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[scContextMenuSubContent]',
+                    imports: [OverlayModule],
+                    template: `
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="submenu.overlayOrigin!"
+      [cdkConnectedOverlayOpen]="submenu.open()"
+      [cdkConnectedOverlayPositions]="positions"
+    >
+      <div
+        [class]="contentClass()"
+        role="menu"
+        (mouseenter)="onMouseEnter()"
+        (mouseleave)="onMouseLeave()"
+      >
+        <ng-content />
+      </div>
+    </ng-template>
+  `,
+                    host: {
+                        'data-slot': 'context-menu-sub-content',
+                        '[class]': 'class()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 class ScContextMenuSubTrigger {
     submenu = inject(ScContextMenuSub);
     overlayOrigin = inject(CdkOverlayOrigin);
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    constructor() {
+        this.submenu.overlayOrigin = this.overlayOrigin;
+        this.submenu.cancelTriggerHide = () => this.cancelHide();
+    }
     showTimeout = null;
     hideTimeout = null;
     class = computed(() => cn('flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none', 'focus:bg-accent focus:text-accent-foreground', 'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
@@ -4202,88 +4198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-const positions = [
-    {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'start',
-        overlayY: 'top',
-        offsetX: 4,
-    },
-    {
-        originX: 'start',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'top',
-        offsetX: -4,
-    },
-];
-class ScContextMenuSubContent {
-    submenu = inject(ScContextMenuSub);
-    trigger = inject(ScContextMenuSubTrigger);
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    positions = positions;
-    class = computed(() => cn('', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    contentClass = computed(() => cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg', this.submenu.open()
-        ? 'opacity-100 scale-100 transition-[opacity,transform] duration-150 ease-out'
-        : 'opacity-0 scale-95 transition-[opacity,transform] duration-150 ease-in'), ...(ngDevMode ? [{ debugName: "contentClass" }] : []));
-    onMouseEnter() {
-        this.trigger.cancelHide();
-    }
-    onMouseLeave() {
-        this.submenu.hide();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScContextMenuSubContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScContextMenuSubContent, isStandalone: true, selector: "div[scContextMenuSubContent]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "context-menu-sub-content" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="trigger.overlayOrigin"
-      [cdkConnectedOverlayOpen]="submenu.open()"
-      [cdkConnectedOverlayPositions]="positions"
-    >
-      <div
-        [class]="contentClass()"
-        role="menu"
-        (mouseenter)="onMouseEnter()"
-        (mouseleave)="onMouseLeave()"
-      >
-        <ng-content />
-      </div>
-    </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScContextMenuSubContent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[scContextMenuSubContent]',
-                    imports: [OverlayModule],
-                    template: `
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="trigger.overlayOrigin"
-      [cdkConnectedOverlayOpen]="submenu.open()"
-      [cdkConnectedOverlayPositions]="positions"
-    >
-      <div
-        [class]="contentClass()"
-        role="menu"
-        (mouseenter)="onMouseEnter()"
-        (mouseleave)="onMouseLeave()"
-      >
-        <ng-content />
-      </div>
-    </ng-template>
-  `,
-                    host: {
-                        'data-slot': 'context-menu-sub-content',
-                        '[class]': 'class()',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class ScContextMenuTrigger {
     contextMenu = inject(ScContextMenu);
@@ -7765,524 +7680,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 }]
         }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-// Token for file upload context
-const SC_FILE_UPLOAD = new InjectionToken('SC_FILE_UPLOAD');
-class ScFileUpload {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
-    accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : []));
-    maxSize = input(0, ...(ngDevMode ? [{ debugName: "maxSize" }] : [])); // in bytes, 0 = no limit
-    maxFiles = input(0, ...(ngDevMode ? [{ debugName: "maxFiles" }] : [])); // 0 = no limit
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    files = model([], ...(ngDevMode ? [{ debugName: "files" }] : []));
-    filesSelected = output();
-    fileRemoved = output();
-    error = output();
-    class = computed(() => cn('block', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    generateId() {
-        return Math.random().toString(36).substring(2, 11);
-    }
-    addFiles(fileList) {
-        if (this.disabled())
-            return;
-        const newFiles = Array.from(fileList);
-        const currentFiles = this.files();
-        const maxFiles = this.maxFiles();
-        const maxSize = this.maxSize();
-        const accept = this.accept();
-        const validFiles = [];
-        for (const file of newFiles) {
-            // Check max files limit
-            if (maxFiles > 0 && currentFiles.length + validFiles.length >= maxFiles) {
-                this.error.emit(`Maximum ${maxFiles} files allowed`);
-                break;
-            }
-            // Check file size
-            if (maxSize > 0 && file.size > maxSize) {
-                this.error.emit(`File "${file.name}" exceeds maximum size`);
-                continue;
-            }
-            // Check file type
-            if (accept && !this.isAcceptedType(file, accept)) {
-                this.error.emit(`File "${file.name}" is not an accepted type`);
-                continue;
-            }
-            validFiles.push(file);
-        }
-        if (validFiles.length > 0) {
-            const uploadFiles = validFiles.map((file) => ({
-                file,
-                id: this.generateId(),
-                status: 'pending',
-            }));
-            if (this.multiple()) {
-                this.files.update((files) => [...files, ...uploadFiles]);
-            }
-            else {
-                this.files.set(uploadFiles.slice(0, 1));
-            }
-            this.filesSelected.emit(validFiles);
-        }
-    }
-    removeFile(fileId) {
-        const file = this.files().find((f) => f.id === fileId);
-        if (file) {
-            this.files.update((files) => files.filter((f) => f.id !== fileId));
-            this.fileRemoved.emit(file);
-        }
-    }
-    updateFileProgress(fileId, progress) {
-        this.files.update((files) => files.map((f) => f.id === fileId ? { ...f, progress, status: 'uploading' } : f));
-    }
-    updateFileStatus(fileId, status, error) {
-        this.files.update((files) => files.map((f) => (f.id === fileId ? { ...f, status, error } : f)));
-    }
-    clearFiles() {
-        this.files.set([]);
-    }
-    isAcceptedType(file, accept) {
-        const acceptTypes = accept.split(',').map((t) => t.trim().toLowerCase());
-        for (const acceptType of acceptTypes) {
-            if (acceptType.startsWith('.')) {
-                // Extension check
-                if (file.name.toLowerCase().endsWith(acceptType)) {
-                    return true;
-                }
-            }
-            else if (acceptType.endsWith('/*')) {
-                // MIME type wildcard (e.g., image/*)
-                const mimePrefix = acceptType.slice(0, -2);
-                if (file.type.toLowerCase().startsWith(mimePrefix)) {
-                    return true;
-                }
-            }
-            else {
-                // Exact MIME type match
-                if (file.type.toLowerCase() === acceptType) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScFileUpload, isStandalone: true, selector: "[scFileUpload]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange", filesSelected: "filesSelected", fileRemoved: "fileRemoved", error: "error" }, host: { attributes: { "data-slot": "file-upload" }, properties: { "class": "class()" } }, providers: [{ provide: SC_FILE_UPLOAD, useExisting: ScFileUpload }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUpload, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scFileUpload]',
-                    providers: [{ provide: SC_FILE_UPLOAD, useExisting: ScFileUpload }],
-                    host: {
-                        'data-slot': 'file-upload',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], error: [{ type: i0.Output, args: ["error"] }] } });
-
-class ScFileUploadDropzone {
-    fileUpload = inject(SC_FILE_UPLOAD);
-    elementRef = inject(ElementRef);
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
-    class = computed(() => cn('relative flex min-h-[150px] cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed', 'transition-colors hover:border-primary/50 hover:bg-accent/50', 'data-[dragging=true]:border-primary data-[dragging=true]:bg-accent', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    openFilePicker() {
-        if (this.fileUpload.disabled())
-            return;
-        const input = this.elementRef.nativeElement.querySelector('input[type="file"]');
-        input?.click();
-    }
-    onFileSelect(event) {
-        const input = event.target;
-        if (input.files && input.files.length > 0) {
-            this.fileUpload.addFiles(input.files);
-            input.value = '';
-        }
-    }
-    onDragOver(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!this.fileUpload.disabled()) {
-            this.isDragging.set(true);
-        }
-    }
-    onDragLeave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragging.set(false);
-    }
-    onDrop(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragging.set(false);
-        if (this.fileUpload.disabled())
-            return;
-        const files = event.dataTransfer?.files;
-        if (files && files.length > 0) {
-            this.fileUpload.addFiles(files);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadDropzone, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScFileUploadDropzone, isStandalone: true, selector: "[scFileUploadDropzone]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "file-upload-dropzone" }, listeners: { "click": "openFilePicker()", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class": "class()", "attr.data-dragging": "isDragging()", "attr.data-disabled": "fileUpload.disabled() || null" } }, ngImport: i0, template: `
-    <input
-      #fileInput
-      type="file"
-      class="sr-only"
-      [multiple]="fileUpload.multiple()"
-      [accept]="fileUpload.accept()"
-      [disabled]="fileUpload.disabled()"
-      (change)="onFileSelect($event)"
-    />
-    <ng-content />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadDropzone, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[scFileUploadDropzone]',
-                    template: `
-    <input
-      #fileInput
-      type="file"
-      class="sr-only"
-      [multiple]="fileUpload.multiple()"
-      [accept]="fileUpload.accept()"
-      [disabled]="fileUpload.disabled()"
-      (change)="onFileSelect($event)"
-    />
-    <ng-content />
-  `,
-                    host: {
-                        'data-slot': 'file-upload-dropzone',
-                        '[class]': 'class()',
-                        '[attr.data-dragging]': 'isDragging()',
-                        '[attr.data-disabled]': 'fileUpload.disabled() || null',
-                        '(click)': 'openFilePicker()',
-                        '(dragover)': 'onDragOver($event)',
-                        '(dragleave)': 'onDragLeave($event)',
-                        '(drop)': 'onDrop($event)',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScFileUploadTrigger {
-    fileUpload = inject(SC_FILE_UPLOAD);
-    elementRef = inject(ElementRef);
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn(buttonVariants({ variant: 'default', size: 'lg' }), this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    openFilePicker(event) {
-        event.preventDefault();
-        if (this.fileUpload.disabled())
-            return;
-        const input = this.elementRef.nativeElement.querySelector('input[type="file"]');
-        input?.click();
-    }
-    onFileSelect(event) {
-        const input = event.target;
-        if (input.files && input.files.length > 0) {
-            this.fileUpload.addFiles(input.files);
-            input.value = '';
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScFileUploadTrigger, isStandalone: true, selector: "button[scFileUploadTrigger]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "file-upload-trigger", "type": "button" }, listeners: { "click": "openFilePicker($event)" }, properties: { "class": "class()", "disabled": "fileUpload.disabled()", "attr.aria-disabled": "fileUpload.disabled() || null" } }, ngImport: i0, template: `
-    <input
-      #fileInput
-      type="file"
-      class="sr-only"
-      [multiple]="fileUpload.multiple()"
-      [accept]="fileUpload.accept()"
-      [disabled]="fileUpload.disabled()"
-      (change)="onFileSelect($event)"
-    />
-    <ng-content />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadTrigger, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'button[scFileUploadTrigger]',
-                    template: `
-    <input
-      #fileInput
-      type="file"
-      class="sr-only"
-      [multiple]="fileUpload.multiple()"
-      [accept]="fileUpload.accept()"
-      [disabled]="fileUpload.disabled()"
-      (change)="onFileSelect($event)"
-    />
-    <ng-content />
-  `,
-                    host: {
-                        'data-slot': 'file-upload-trigger',
-                        type: 'button',
-                        '[class]': 'class()',
-                        '[disabled]': 'fileUpload.disabled()',
-                        '[attr.aria-disabled]': 'fileUpload.disabled() || null',
-                        '(click)': 'openFilePicker($event)',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScFileUploadList {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('mt-4 space-y-2', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScFileUploadList, isStandalone: true, selector: "[scFileUploadList]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "file-upload-list" }, properties: { "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadList, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scFileUploadList]',
-                    host: {
-                        'data-slot': 'file-upload-list',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScFileUploadItem {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));
-    class = computed(() => cn('flex items-center gap-3 rounded-lg border bg-background p-3', 'data-[status=error]:border-destructive data-[status=error]:bg-destructive/10', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScFileUploadItem, isStandalone: true, selector: "[scFileUploadItem]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "file-upload-item" }, properties: { "class": "class()", "attr.data-status": "file().status" } }, ngImport: i0, template: `
-    <ng-content />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItem, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[scFileUploadItem]',
-                    template: `
-    <ng-content />
-  `,
-                    host: {
-                        'data-slot': 'file-upload-item',
-                        '[class]': 'class()',
-                        '[attr.data-status]': 'file().status',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }] } });
-
-class ScFileUploadItemPreview {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));
-    isImage = computed(() => this.file().file.type.startsWith('image/'), ...(ngDevMode ? [{ debugName: "isImage" }] : []));
-    previewUrl = computed(() => {
-        if (this.isImage()) {
-            return URL.createObjectURL(this.file().file);
-        }
-        return '';
-    }, ...(ngDevMode ? [{ debugName: "previewUrl" }] : []));
-    class = computed(() => cn('flex size-10 items-center justify-center overflow-hidden rounded bg-muted', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItemPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ScFileUploadItemPreview, isStandalone: true, selector: "[scFileUploadItemPreview]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "file-upload-item-preview" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    @if (isImage()) {
-      <img
-        [src]="previewUrl()"
-        [alt]="file().file.name"
-        class="size-full object-cover"
-      />
-    } @else {
-      <ng-content />
-    }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItemPreview, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[scFileUploadItemPreview]',
-                    template: `
-    @if (isImage()) {
-      <img
-        [src]="previewUrl()"
-        [alt]="file().file.name"
-        class="size-full object-cover"
-      />
-    } @else {
-      <ng-content />
-    }
-  `,
-                    host: {
-                        'data-slot': 'file-upload-item-preview',
-                        '[class]': 'class()',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }] } });
-
-class ScFileUploadItemName {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('flex-1 truncate text-sm font-medium', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItemName, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScFileUploadItemName, isStandalone: true, selector: "[scFileUploadItemName]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "file-upload-item-name" }, properties: { "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItemName, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scFileUploadItemName]',
-                    host: {
-                        'data-slot': 'file-upload-item-name',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScFileUploadItemSize {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));
-    formattedSize = computed(() => {
-        const bytes = this.file().file.size;
-        if (bytes === 0)
-            return '0 B';
-        const k = 1024;
-        const sizes = ['B', 'KB', 'MB', 'GB'];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-    }, ...(ngDevMode ? [{ debugName: "formattedSize" }] : []));
-    class = computed(() => cn('text-xs text-muted-foreground', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItemSize, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScFileUploadItemSize, isStandalone: true, selector: "[scFileUploadItemSize]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "file-upload-item-size" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    {{ formattedSize() }}
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItemSize, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[scFileUploadItemSize]',
-                    template: `
-    {{ formattedSize() }}
-  `,
-                    host: {
-                        'data-slot': 'file-upload-item-size',
-                        '[class]': 'class()',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }] } });
-
-class ScFileUploadItemDelete {
-    fileUpload = inject(SC_FILE_UPLOAD);
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    fileId = input.required(...(ngDevMode ? [{ debugName: "fileId" }] : []));
-    class = computed(() => cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'text-muted-foreground', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    onClick() {
-        this.fileUpload.removeFile(this.fileId());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItemDelete, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScFileUploadItemDelete, isStandalone: true, selector: "button[scFileUploadItemDelete]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, fileId: { classPropertyName: "fileId", publicName: "fileId", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "file-upload-item-delete", "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="size-4"
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-    <span class="sr-only">Remove file</span>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItemDelete, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'button[scFileUploadItemDelete]',
-                    template: `
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="size-4"
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-    <span class="sr-only">Remove file</span>
-  `,
-                    host: {
-                        'data-slot': 'file-upload-item-delete',
-                        type: 'button',
-                        '[class]': 'class()',
-                        '(click)': 'onClick()',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], fileId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileId", required: true }] }] } });
-
-class ScFileUploadItemProgress {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));
-    class = computed(() => cn('h-1 w-full overflow-hidden rounded-full bg-muted', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItemProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScFileUploadItemProgress, isStandalone: true, selector: "[scFileUploadItemProgress]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "file-upload-item-progress" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    <div
-      class="h-full rounded-full bg-primary transition-all"
-      [style.width.%]="file().progress || 0"
-    ></div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItemProgress, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[scFileUploadItemProgress]',
-                    template: `
-    <div
-      class="h-full rounded-full bg-primary transition-all"
-      [style.width.%]="file().progress || 0"
-    ></div>
-  `,
-                    host: {
-                        'data-slot': 'file-upload-item-progress',
-                        '[class]': 'class()',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }] } });
-
-class ScImageAnnotator {
-    sanitizer = inject(DomSanitizer);
-    imageCanvasRef = viewChild('imageCanvas', ...(ngDevMode ? [{ debugName: "imageCanvasRef" }] : []));
-    annotationCanvasRef = viewChild('annotationCanvas', ...(ngDevMode ? [{ debugName: "annotationCanvasRef" }] : []));
-    src = input.required(...(ngDevMode ? [{ debugName: "src" }] : []));
-    width = input(600, ...(ngDevMode ? [{ debugName: "width" }] : []));
-    height = input(400, ...(ngDevMode ? [{ debugName: "height" }] : []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
-    annotationsChange = output();
-    save = output();
-    annotations = signal([], ...(ngDevMode ? [{ debugName: "annotations" }] : []));
-    currentTool = signal('pen', ...(ngDevMode ? [{ debugName: "currentTool" }] : []));
-    currentColor = signal('#ef4444', ...(ngDevMode ? [{ debugName: "currentColor" }] : []));
-    lineWidth = signal(3, ...(ngDevMode ? [{ debugName: "lineWidth" }] : []));
-    imageLoaded = signal(false, ...(ngDevMode ? [{ debugName: "imageLoaded" }] : []));
-    isDrawing = false;
-    currentAnnotation = null;
-    startPoint = null;
-    trustHtml(html) {
-        return this.sanitizer.bypassSecurityTrustHtml(html);
+class ScImageAnnotator {
+    sanitizer = inject(DomSanitizer);
+    imageCanvasRef = viewChild('imageCanvas', ...(ngDevMode ? [{ debugName: "imageCanvasRef" }] : []));
+    annotationCanvasRef = viewChild('annotationCanvas', ...(ngDevMode ? [{ debugName: "annotationCanvasRef" }] : []));
+    src = input.required(...(ngDevMode ? [{ debugName: "src" }] : []));
+    width = input(600, ...(ngDevMode ? [{ debugName: "width" }] : []));
+    height = input(400, ...(ngDevMode ? [{ debugName: "height" }] : []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    annotationsChange = output();
+    save = output();
+    annotations = signal([], ...(ngDevMode ? [{ debugName: "annotations" }] : []));
+    currentTool = signal('pen', ...(ngDevMode ? [{ debugName: "currentTool" }] : []));
+    currentColor = signal('#ef4444', ...(ngDevMode ? [{ debugName: "currentColor" }] : []));
+    lineWidth = signal(3, ...(ngDevMode ? [{ debugName: "lineWidth" }] : []));
+    imageLoaded = signal(false, ...(ngDevMode ? [{ debugName: "imageLoaded" }] : []));
+    isDrawing = false;
+    currentAnnotation = null;
+    startPoint = null;
+    trustHtml(html) {
+        return this.sanitizer.bypassSecurityTrustHtml(html);
     }
     tools = [];
     colors = [
@@ -9493,6 +8910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 class ScImageCropperContainer {
     cropper = inject(SC_IMAGE_CROPPER);
     elementRef = inject((ElementRef));
+    injector = inject(Injector);
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     class = computed(() => cn('block', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     imageEl = viewChild('imageEl', ...(ngDevMode ? [{ debugName: "imageEl" }] : []));
@@ -9516,8 +8934,10 @@ class ScImageCropperContainer {
             return;
         this.cropper.onImageLoad(img.naturalWidth, img.naturalHeight);
         // Initialize crop area after image loads
-        afterNextRender(() => {
-            this.cropper.initializeCropArea(this.getContainerWidth());
+        runInInjectionContext(this.injector, () => {
+            afterNextRender(() => {
+                this.cropper.initializeCropArea(this.getContainerWidth());
+            });
         });
     }
     onCropAreaMouseDown(event) {
@@ -14159,306 +13579,16 @@ class ScNavbarMobileLink {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavbarMobileLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScNavbarMobileLink, isStandalone: true, selector: "a[scNavbarMobileLink], button[scNavbarMobileLink]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "navbar-mobile-link" }, properties: { "class": "class()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavbarMobileLink, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'a[scNavbarMobileLink], button[scNavbarMobileLink]',
-                    host: {
-                        'data-slot': 'navbar-mobile-link',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
-
-class ScNavigationMenu {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    /** Currently active item ID */
-    activeItem = signal(null, ...(ngDevMode ? [{ debugName: "activeItem" }] : []));
-    class = computed(() => cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    setActiveItem(id) {
-        this.activeItem.set(id);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScNavigationMenu, isStandalone: true, selector: "nav[scNavigationMenu]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "navigation-menu" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    <ng-content />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenu, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'nav[scNavigationMenu]',
-                    template: `
-    <ng-content />
-  `,
-                    host: {
-                        'data-slot': 'navigation-menu',
-                        '[class]': 'class()',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScNavigationMenuTrigger {
-    menuItem = inject(ScNavigationMenuItem);
-    overlayOrigin = inject(CdkOverlayOrigin);
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium', 'hover:bg-accent hover:text-accent-foreground', 'focus:bg-accent focus:text-accent-foreground', 'disabled:pointer-events-none disabled:opacity-50', 'data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50', 'focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1', '[&_svg]:pointer-events-none', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScNavigationMenuTrigger, isStandalone: true, selector: "button[scNavigationMenuTrigger]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "navigation-menu-trigger", "type": "button" }, properties: { "class": "class()", "attr.aria-expanded": "menuItem.open()", "attr.data-state": "menuItem.open() ? \"open\" : \"closed\"" } }, hostDirectives: [{ directive: i1$2.CdkOverlayOrigin }], ngImport: i0, template: `
-    <ng-content />
-    <svg
-      siChevronDownIcon
-      class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
-    ></svg>
-  `, isInline: true, dependencies: [{ kind: "component", type: SiChevronDownIcon, selector: "svg[siChevronDownIcon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuTrigger, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'button[scNavigationMenuTrigger]',
-                    imports: [SiChevronDownIcon],
-                    hostDirectives: [CdkOverlayOrigin],
-                    template: `
-    <ng-content />
-    <svg
-      siChevronDownIcon
-      class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
-    ></svg>
-  `,
-                    host: {
-                        'data-slot': 'navigation-menu-trigger',
-                        type: 'button',
-                        '[class]': 'class()',
-                        '[attr.aria-expanded]': 'menuItem.open()',
-                        '[attr.data-state]': 'menuItem.open() ? "open" : "closed"',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScNavigationMenuItem {
-    navigationMenu = inject(ScNavigationMenu);
-    router = inject(Router);
-    destroyRef = inject(DestroyRef);
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    itemId = inject(_IdGenerator).getId('sc-navigation-menu-item-');
-    /** Whether this item's content is open */
-    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
-    triggerChild = contentChild(ScNavigationMenuTrigger, ...(ngDevMode ? [{ debugName: "triggerChild" }] : []));
-    origin = computed(() => this.triggerChild()?.overlayOrigin, ...(ngDevMode ? [{ debugName: "origin" }] : []));
-    class = computed(() => cn('relative', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    hideTimeout = null;
-    ngOnInit() {
-        // Close the menu when navigation starts
-        this.router.events
-            .pipe(filter((event) => event instanceof NavigationStart), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            this.open.set(false);
-            if (this.navigationMenu.activeItem() === this.itemId) {
-                this.navigationMenu.setActiveItem(null);
-            }
-        });
-    }
-    onMouseEnter() {
-        this.cancelHide();
-        this.open.set(true);
-        this.navigationMenu.setActiveItem(this.itemId);
-    }
-    onMouseLeave() {
-        this.scheduleHide();
-    }
-    scheduleHide() {
-        this.cancelHide();
-        this.hideTimeout = setTimeout(() => {
-            this.open.set(false);
-            if (this.navigationMenu.activeItem() === this.itemId) {
-                this.navigationMenu.setActiveItem(null);
-            }
-        }, 100);
-    }
-    cancelHide() {
-        if (this.hideTimeout) {
-            clearTimeout(this.hideTimeout);
-            this.hideTimeout = null;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.5", type: ScNavigationMenuItem, isStandalone: true, selector: "li[scNavigationMenuItem]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "navigation-menu-item" }, listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class": "class()" } }, queries: [{ propertyName: "triggerChild", first: true, predicate: ScNavigationMenuTrigger, descendants: true, isSignal: true }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuItem, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'li[scNavigationMenuItem]',
-                    host: {
-                        'data-slot': 'navigation-menu-item',
-                        '[class]': 'class()',
-                        '(mouseenter)': 'onMouseEnter()',
-                        '(mouseleave)': 'onMouseLeave()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], triggerChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ScNavigationMenuTrigger), { isSignal: true }] }] } });
-
-const position = {
-    originX: 'start',
-    originY: 'bottom',
-    overlayX: 'start',
-    overlayY: 'top',
-    offsetY: 4,
-};
-class ScNavigationMenuContent {
-    menuItem = inject(ScNavigationMenuItem);
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    position = position;
-    origin = computed(() => this.menuItem.origin(), ...(ngDevMode ? [{ debugName: "origin" }] : []));
-    class = computed(() => cn('', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    contentClass = computed(() => cn('left-0 top-0 w-full md:absolute md:w-auto', 'bg-popover text-popover-foreground', 'rounded-md border shadow-lg', 'overflow-hidden', 'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out', 'data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out', 'data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52', 'data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52', '**:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none'), ...(ngDevMode ? [{ debugName: "contentClass" }] : []));
-    onMouseEnter() {
-        this.menuItem.cancelHide();
-    }
-    onMouseLeave() {
-        this.menuItem.onMouseLeave();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ScNavigationMenuContent, isStandalone: true, selector: "div[scNavigationMenuContent]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "navigation-menu-content" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    @if (origin(); as origin) {
-      <ng-template
-        cdkConnectedOverlay
-        [cdkConnectedOverlayOrigin]="origin"
-        [cdkConnectedOverlayOpen]="menuItem.open()"
-        [cdkConnectedOverlayPositions]="[position]"
-      >
-        <div
-          [class]="contentClass()"
-          (mouseenter)="onMouseEnter()"
-          (mouseleave)="onMouseLeave()"
-        >
-          <ng-content />
-        </div>
-      </ng-template>
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuContent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[scNavigationMenuContent]',
-                    imports: [OverlayModule],
-                    template: `
-    @if (origin(); as origin) {
-      <ng-template
-        cdkConnectedOverlay
-        [cdkConnectedOverlayOrigin]="origin"
-        [cdkConnectedOverlayOpen]="menuItem.open()"
-        [cdkConnectedOverlayPositions]="[position]"
-      >
-        <div
-          [class]="contentClass()"
-          (mouseenter)="onMouseEnter()"
-          (mouseleave)="onMouseLeave()"
-        >
-          <ng-content />
-        </div>
-      </ng-template>
-    }
-  `,
-                    host: {
-                        'data-slot': 'navigation-menu-content',
-                        '[class]': 'class()',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScNavigationMenuIndicator {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('data-[state=visible]:animate-in data-[state=hidden]:animate-out', 'data-[state=hidden]:fade-out data-[state=visible]:fade-in', 'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScNavigationMenuIndicator, isStandalone: true, selector: "div[scNavigationMenuIndicator]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "navigation-menu-indicator" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    <div
-      class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md"
-    ></div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuIndicator, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[scNavigationMenuIndicator]',
-                    template: `
-    <div
-      class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md"
-    ></div>
-  `,
-                    host: {
-                        'data-slot': 'navigation-menu-indicator',
-                        '[class]': 'class()',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScNavigationMenuLink {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
-    class = computed(() => cn('data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground', 'hover:bg-accent hover:text-accent-foreground', 'focus:bg-accent focus:text-accent-foreground', 'focus-visible:ring-ring/50', '[&_svg:not([class*="text-"])]:text-muted-foreground', 'flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none', 'focus-visible:ring-[3px] focus-visible:outline-1', '[&_svg:not([class*="size-"])]:size-4', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScNavigationMenuLink, isStandalone: true, selector: "a[scNavigationMenuLink]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "navigation-menu-link" }, properties: { "attr.data-active": "active()", "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuLink, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'a[scNavigationMenuLink]',
-                    host: {
-                        'data-slot': 'navigation-menu-link',
-                        '[attr.data-active]': 'active()',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
-
-class ScNavigationMenuList {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('group flex flex-1 list-none items-center justify-center gap-1', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScNavigationMenuList, isStandalone: true, selector: "ul[scNavigationMenuList]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "navigation-menu-list" }, properties: { "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuList, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ul[scNavigationMenuList]',
-                    host: {
-                        'data-slot': 'navigation-menu-list',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScNavigationMenuViewport {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('origin-top-center bg-popover text-popover-foreground', 'data-[state=open]:animate-in data-[state=closed]:animate-out', 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90', 'relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow', 'md:w-[var(--radix-navigation-menu-viewport-width)]', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuViewport, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScNavigationMenuViewport, isStandalone: true, selector: "div[scNavigationMenuViewport]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "navigation-menu-viewport" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    <ng-content />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuViewport, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavbarMobileLink, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'div[scNavigationMenuViewport]',
-                    template: `
-    <ng-content />
-  `,
+                    selector: 'a[scNavbarMobileLink], button[scNavbarMobileLink]',
                     host: {
-                        'data-slot': 'navigation-menu-viewport',
+                        'data-slot': 'navbar-mobile-link',
                         '[class]': 'class()',
                     },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
 
 const SC_NOTIFICATION_CENTER = new InjectionToken('SC_NOTIFICATION_CENTER');
 class ScNotificationCenterDirective {
@@ -22215,595 +21345,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             args: [{
                     selector: 'button[scSignaturePadPenColor]',
                     template: '<ng-content />',
-                    host: {
-                        type: 'button',
-                        '[class]': 'class()',
-                        '[attr.aria-label]': 'ariaLabel()',
-                        '[attr.data-active]': 'isActive() || null',
-                        '[disabled]': 'signaturePad.disabled() || null',
-                        '(click)': 'onClick()',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScSignaturePadWidthButton {
-    signaturePad = inject(SC_SIGNATURE_PAD);
-    width = input.required(...(ngDevMode ? [{ debugName: "width" }] : []));
-    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    isActive = computed(() => this.signaturePad.penWidth() === this.width(), ...(ngDevMode ? [{ debugName: "isActive" }] : []));
-    class = computed(() => cn('inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors', 'disabled:pointer-events-none disabled:opacity-50', 'data-[active]:border-primary data-[active]:bg-primary/10', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    onClick() {
-        if (this.signaturePad.disabled())
-            return;
-        this.signaturePad.penWidth.set(this.width());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSignaturePadWidthButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScSignaturePadWidthButton, isStandalone: true, selector: "button[scSignaturePadPenWidth]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "class()", "attr.aria-label": "ariaLabel()", "attr.data-active": "isActive() || null", "disabled": "signaturePad.disabled() || null" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSignaturePadWidthButton, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'button[scSignaturePadPenWidth]',
-                    template: '<ng-content />',
-                    host: {
-                        type: 'button',
-                        '[class]': 'class()',
-                        '[attr.aria-label]': 'ariaLabel()',
-                        '[attr.data-active]': 'isActive() || null',
-                        '[disabled]': 'signaturePad.disabled() || null',
-                        '(click)': 'onClick()',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScSliderTrack {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('relative h-2 w-full grow overflow-hidden rounded-full bg-secondary', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSliderTrack, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScSliderTrack, isStandalone: true, selector: "div[scSliderTrack]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "slider-track" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    <ng-content />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSliderTrack, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[scSliderTrack]',
-                    host: {
-                        'data-slot': 'slider-track',
-                        '[class]': 'class()',
-                    },
-                    template: `
-    <ng-content />
-  `,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScSliderRange {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    percentage = input.required(...(ngDevMode ? [{ debugName: "percentage" }] : []));
-    class = computed(() => cn('absolute h-full bg-primary', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSliderRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScSliderRange, isStandalone: true, selector: "div[scSliderRange]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "slider-range" }, properties: { "class": "class()", "style.width.%": "percentage()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSliderRange, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[scSliderRange]',
-                    host: {
-                        'data-slot': 'slider-range',
-                        '[class]': 'class()',
-                        '[style.width.%]': 'percentage()',
-                    },
-                    template: '',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], percentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentage", required: true }] }] } });
-
-class ScSliderThumb {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    percentage = input.required(...(ngDevMode ? [{ debugName: "percentage" }] : []));
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
-    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
-    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
-    ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : {}), alias: 'aria-labelledby' });
-    keydown = output();
-    mouseDown = output();
-    touchStart = output();
-    class = computed(() => cn('absolute block size-5 -translate-x-1/2 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', this.disabled()
-        ? 'cursor-not-allowed'
-        : 'cursor-grab active:cursor-grabbing', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    onKeydown(event) {
-        this.keydown.emit(event);
-    }
-    onMouseDown(event) {
-        this.mouseDown.emit(event);
-    }
-    onTouchStart(event) {
-        this.touchStart.emit(event);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSliderThumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScSliderThumb, isStandalone: true, selector: "div[scSliderThumb]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keydown: "keydown", mouseDown: "mouseDown", touchStart: "touchStart" }, host: { attributes: { "data-slot": "slider-thumb" }, listeners: { "keydown": "onKeydown($event)", "mousedown": "onMouseDown($event)", "touchstart": "onTouchStart($event)" }, properties: { "class": "class()", "style.left.%": "percentage()", "attr.tabindex": "disabled() ? -1 : 0", "attr.role": "\"slider\"", "attr.aria-valuemin": "min()", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "value()", "attr.aria-disabled": "disabled() || null", "attr.aria-label": "ariaLabel() ?? null", "attr.aria-labelledby": "ariaLabelledby() ?? null" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSliderThumb, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[scSliderThumb]',
-                    host: {
-                        'data-slot': 'slider-thumb',
-                        '[class]': 'class()',
-                        '[style.left.%]': 'percentage()',
-                        '[attr.tabindex]': 'disabled() ? -1 : 0',
-                        '[attr.role]': '"slider"',
-                        '[attr.aria-valuemin]': 'min()',
-                        '[attr.aria-valuemax]': 'max()',
-                        '[attr.aria-valuenow]': 'value()',
-                        '[attr.aria-disabled]': 'disabled() || null',
-                        '[attr.aria-label]': 'ariaLabel() ?? null',
-                        '[attr.aria-labelledby]': 'ariaLabelledby() ?? null',
-                        '(keydown)': 'onKeydown($event)',
-                        '(mousedown)': 'onMouseDown($event)',
-                        '(touchstart)': 'onTouchStart($event)',
-                    },
-                    template: '',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], percentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentage", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], keydown: [{ type: i0.Output, args: ["keydown"] }], mouseDown: [{ type: i0.Output, args: ["mouseDown"] }], touchStart: [{ type: i0.Output, args: ["touchStart"] }] } });
-
-class ScSlider {
-    elementRef = inject((ElementRef));
-    destroyRef = inject(DestroyRef);
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
-    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
-    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
-    ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : {}), alias: 'aria-labelledby' });
-    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
-    percentage = computed(() => {
-        const minVal = this.min() ?? 0;
-        const maxVal = this.max() ?? 100;
-        const val = this.value();
-        if (maxVal === minVal)
-            return 0;
-        return ((val - minVal) / (maxVal - minVal)) * 100;
-    }, ...(ngDevMode ? [{ debugName: "percentage" }] : []));
-    class = computed(() => cn('relative flex w-full touch-none select-none items-center', this.disabled() && 'opacity-50 cursor-not-allowed', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    ngOnInit() {
-        merge(fromEvent(document, 'mousemove'), fromEvent(document, 'mouseup'), fromEvent(document, 'touchmove'), fromEvent(document, 'touchend'))
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            if (!this.isDragging())
-                return;
-            if (event.type === 'mouseup' || event.type === 'touchend') {
-                this.isDragging.set(false);
-                return;
-            }
-            if (event.type === 'mousemove') {
-                this.updateValueFromPosition(event.clientX);
-            }
-            else if (event.type === 'touchmove') {
-                const touch = event.touches[0];
-                if (touch) {
-                    this.updateValueFromPosition(touch.clientX);
-                }
-            }
-        });
-    }
-    onThumbMouseDown(event) {
-        if (this.disabled())
-            return;
-        event.preventDefault();
-        this.isDragging.set(true);
-    }
-    onThumbTouchStart(event) {
-        if (this.disabled())
-            return;
-        event.preventDefault();
-        this.isDragging.set(true);
-    }
-    onKeydown(event) {
-        if (this.disabled())
-            return;
-        const stepVal = this.step();
-        const minVal = this.min() ?? 0;
-        const maxVal = this.max() ?? 100;
-        let newValue = this.value();
-        switch (event.key) {
-            case 'ArrowRight':
-            case 'ArrowUp':
-                event.preventDefault();
-                newValue = Math.min(newValue + stepVal, maxVal);
-                break;
-            case 'ArrowLeft':
-            case 'ArrowDown':
-                event.preventDefault();
-                newValue = Math.max(newValue - stepVal, minVal);
-                break;
-            case 'Home':
-                event.preventDefault();
-                newValue = minVal;
-                break;
-            case 'End':
-                event.preventDefault();
-                newValue = maxVal;
-                break;
-            case 'PageUp':
-                event.preventDefault();
-                newValue = Math.min(newValue + stepVal * 10, maxVal);
-                break;
-            case 'PageDown':
-                event.preventDefault();
-                newValue = Math.max(newValue - stepVal * 10, minVal);
-                break;
-            default:
-                return;
-        }
-        this.value.set(newValue);
-    }
-    updateValueFromPosition(clientX) {
-        const rect = this.elementRef.nativeElement.getBoundingClientRect();
-        const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-        const minVal = this.min() ?? 0;
-        const maxVal = this.max() ?? 100;
-        const stepVal = this.step();
-        let newValue = minVal + percentage * (maxVal - minVal);
-        newValue = Math.round(newValue / stepVal) * stepVal;
-        newValue = Math.max(minVal, Math.min(maxVal, newValue));
-        this.value.set(newValue);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScSlider, isStandalone: true, selector: "div[scSlider]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "slider" }, properties: { "class": "class()", "attr.data-disabled": "disabled() || null" } }, ngImport: i0, template: `
-    <div scSliderTrack>
-      <div scSliderRange [percentage]="percentage()"></div>
-    </div>
-    <div
-      scSliderThumb
-      [percentage]="percentage()"
-      [value]="value()"
-      [min]="min()"
-      [max]="max()"
-      [step]="step()"
-      [disabled]="disabled()"
-      [aria-label]="ariaLabel()"
-      [aria-labelledby]="ariaLabelledby()"
-      (keydown)="onKeydown($event)"
-      (mouseDown)="onThumbMouseDown($event)"
-      (touchStart)="onThumbTouchStart($event)"
-    ></div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ScSliderTrack, selector: "div[scSliderTrack]", inputs: ["class"] }, { kind: "component", type: ScSliderRange, selector: "div[scSliderRange]", inputs: ["class", "percentage"] }, { kind: "component", type: ScSliderThumb, selector: "div[scSliderThumb]", inputs: ["class", "percentage", "value", "min", "max", "step", "disabled", "aria-label", "aria-labelledby"], outputs: ["keydown", "mouseDown", "touchStart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSlider, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[scSlider]',
-                    imports: [ScSliderTrack, ScSliderRange, ScSliderThumb],
-                    host: {
-                        'data-slot': 'slider',
-                        '[class]': 'class()',
-                        '[attr.data-disabled]': 'disabled() || null',
-                    },
-                    template: `
-    <div scSliderTrack>
-      <div scSliderRange [percentage]="percentage()"></div>
-    </div>
-    <div
-      scSliderThumb
-      [percentage]="percentage()"
-      [value]="value()"
-      [min]="min()"
-      [max]="max()"
-      [step]="step()"
-      [disabled]="disabled()"
-      [aria-label]="ariaLabel()"
-      [aria-labelledby]="ariaLabelledby()"
-      (keydown)="onKeydown($event)"
-      (mouseDown)="onThumbMouseDown($event)"
-      (touchStart)="onThumbTouchStart($event)"
-    ></div>
-  `,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }] } });
-
-class ScRangeSlider {
-    elementRef = inject((ElementRef));
-    destroyRef = inject(DestroyRef);
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    minValue = model(0, ...(ngDevMode ? [{ debugName: "minValue" }] : []));
-    maxValue = model(100, ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
-    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
-    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
-    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    minAriaLabel = input(undefined, { ...(ngDevMode ? { debugName: "minAriaLabel" } : {}), alias: 'min-aria-label' });
-    maxAriaLabel = input(undefined, { ...(ngDevMode ? { debugName: "maxAriaLabel" } : {}), alias: 'max-aria-label' });
-    minAriaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "minAriaLabelledby" } : {}), alias: 'min-aria-labelledby' });
-    maxAriaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "maxAriaLabelledby" } : {}), alias: 'max-aria-labelledby' });
-    isDraggingMin = signal(false, ...(ngDevMode ? [{ debugName: "isDraggingMin" }] : []));
-    isDraggingMax = signal(false, ...(ngDevMode ? [{ debugName: "isDraggingMax" }] : []));
-    minPercentage = computed(() => {
-        const minVal = this.min();
-        const maxVal = this.max();
-        const val = this.minValue();
-        if (maxVal === minVal)
-            return 0;
-        return ((val - minVal) / (maxVal - minVal)) * 100;
-    }, ...(ngDevMode ? [{ debugName: "minPercentage" }] : []));
-    maxPercentage = computed(() => {
-        const minVal = this.min();
-        const maxVal = this.max();
-        const val = this.maxValue();
-        if (maxVal === minVal)
-            return 0;
-        return ((val - minVal) / (maxVal - minVal)) * 100;
-    }, ...(ngDevMode ? [{ debugName: "maxPercentage" }] : []));
-    rangeStart = computed(() => this.minPercentage(), ...(ngDevMode ? [{ debugName: "rangeStart" }] : []));
-    rangeWidth = computed(() => {
-        return this.maxPercentage() - this.minPercentage();
-    }, ...(ngDevMode ? [{ debugName: "rangeWidth" }] : []));
-    class = computed(() => cn('relative flex w-full touch-none select-none items-center', this.disabled() && 'opacity-50 cursor-not-allowed', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    ngOnInit() {
-        merge(fromEvent(document, 'mousemove'), fromEvent(document, 'mouseup'), fromEvent(document, 'touchmove'), fromEvent(document, 'touchend'))
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            if (!this.isDraggingMin() && !this.isDraggingMax())
-                return;
-            if (event.type === 'mouseup' || event.type === 'touchend') {
-                this.isDraggingMin.set(false);
-                this.isDraggingMax.set(false);
-                return;
-            }
-            if (event.type === 'mousemove') {
-                const clientX = event.clientX;
-                if (this.isDraggingMin()) {
-                    this.updateMinValueFromPosition(clientX);
-                }
-                else if (this.isDraggingMax()) {
-                    this.updateMaxValueFromPosition(clientX);
-                }
-            }
-            else if (event.type === 'touchmove') {
-                const touch = event.touches[0];
-                if (touch) {
-                    if (this.isDraggingMin()) {
-                        this.updateMinValueFromPosition(touch.clientX);
-                    }
-                    else if (this.isDraggingMax()) {
-                        this.updateMaxValueFromPosition(touch.clientX);
-                    }
-                }
-            }
-        });
-    }
-    onMinThumbMouseDown(event) {
-        if (this.disabled())
-            return;
-        event.preventDefault();
-        this.isDraggingMin.set(true);
-    }
-    onMinThumbTouchStart(event) {
-        if (this.disabled())
-            return;
-        event.preventDefault();
-        this.isDraggingMin.set(true);
-    }
-    onMaxThumbMouseDown(event) {
-        if (this.disabled())
-            return;
-        event.preventDefault();
-        this.isDraggingMax.set(true);
-    }
-    onMaxThumbTouchStart(event) {
-        if (this.disabled())
-            return;
-        event.preventDefault();
-        this.isDraggingMax.set(true);
-    }
-    onMinKeydown(event) {
-        if (this.disabled())
-            return;
-        const stepVal = this.step();
-        const minVal = this.min();
-        const maxVal = this.maxValue(); // Min thumb can't go beyond max thumb
-        let newValue = this.minValue();
-        switch (event.key) {
-            case 'ArrowRight':
-            case 'ArrowUp':
-                event.preventDefault();
-                newValue = Math.min(newValue + stepVal, maxVal);
-                break;
-            case 'ArrowLeft':
-            case 'ArrowDown':
-                event.preventDefault();
-                newValue = Math.max(newValue - stepVal, minVal);
-                break;
-            case 'Home':
-                event.preventDefault();
-                newValue = minVal;
-                break;
-            case 'End':
-                event.preventDefault();
-                newValue = maxVal;
-                break;
-            case 'PageUp':
-                event.preventDefault();
-                newValue = Math.min(newValue + stepVal * 10, maxVal);
-                break;
-            case 'PageDown':
-                event.preventDefault();
-                newValue = Math.max(newValue - stepVal * 10, minVal);
-                break;
-            default:
-                return;
-        }
-        this.minValue.set(newValue);
-    }
-    onMaxKeydown(event) {
-        if (this.disabled())
+                    host: {
+                        type: 'button',
+                        '[class]': 'class()',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.data-active]': 'isActive() || null',
+                        '[disabled]': 'signaturePad.disabled() || null',
+                        '(click)': 'onClick()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class ScSignaturePadWidthButton {
+    signaturePad = inject(SC_SIGNATURE_PAD);
+    width = input.required(...(ngDevMode ? [{ debugName: "width" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    isActive = computed(() => this.signaturePad.penWidth() === this.width(), ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    class = computed(() => cn('inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors', 'disabled:pointer-events-none disabled:opacity-50', 'data-[active]:border-primary data-[active]:bg-primary/10', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onClick() {
+        if (this.signaturePad.disabled())
             return;
-        const stepVal = this.step();
-        const minVal = this.minValue(); // Max thumb can't go below min thumb
-        const maxVal = this.max();
-        let newValue = this.maxValue();
-        switch (event.key) {
-            case 'ArrowRight':
-            case 'ArrowUp':
-                event.preventDefault();
-                newValue = Math.min(newValue + stepVal, maxVal);
-                break;
-            case 'ArrowLeft':
-            case 'ArrowDown':
-                event.preventDefault();
-                newValue = Math.max(newValue - stepVal, minVal);
-                break;
-            case 'Home':
-                event.preventDefault();
-                newValue = minVal;
-                break;
-            case 'End':
-                event.preventDefault();
-                newValue = maxVal;
-                break;
-            case 'PageUp':
-                event.preventDefault();
-                newValue = Math.min(newValue + stepVal * 10, maxVal);
-                break;
-            case 'PageDown':
-                event.preventDefault();
-                newValue = Math.max(newValue - stepVal * 10, minVal);
-                break;
-            default:
-                return;
-        }
-        this.maxValue.set(newValue);
+        this.signaturePad.penWidth.set(this.width());
     }
-    updateMinValueFromPosition(clientX) {
-        const rect = this.elementRef.nativeElement.getBoundingClientRect();
-        const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-        const minVal = this.min();
-        const maxVal = this.maxValue(); // Min thumb can't go beyond max thumb
-        const stepVal = this.step();
-        let newValue = minVal + percentage * (this.max() - minVal);
-        newValue = Math.round(newValue / stepVal) * stepVal;
-        newValue = Math.max(minVal, Math.min(maxVal, newValue));
-        this.minValue.set(newValue);
-    }
-    updateMaxValueFromPosition(clientX) {
-        const rect = this.elementRef.nativeElement.getBoundingClientRect();
-        const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-        const minVal = this.minValue(); // Max thumb can't go below min thumb
-        const maxVal = this.max();
-        const stepVal = this.step();
-        let newValue = this.min() + percentage * (maxVal - this.min());
-        newValue = Math.round(newValue / stepVal) * stepVal;
-        newValue = Math.max(minVal, Math.min(maxVal, newValue));
-        this.maxValue.set(newValue);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScRangeSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScRangeSlider, isStandalone: true, selector: "div[scRangeSlider]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minAriaLabel: { classPropertyName: "minAriaLabel", publicName: "min-aria-label", isSignal: true, isRequired: false, transformFunction: null }, maxAriaLabel: { classPropertyName: "maxAriaLabel", publicName: "max-aria-label", isSignal: true, isRequired: false, transformFunction: null }, minAriaLabelledby: { classPropertyName: "minAriaLabelledby", publicName: "min-aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, maxAriaLabelledby: { classPropertyName: "maxAriaLabelledby", publicName: "max-aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { minValue: "minValueChange", maxValue: "maxValueChange" }, host: { attributes: { "data-slot": "range-slider" }, properties: { "class": "class()", "attr.data-disabled": "disabled() || null" } }, ngImport: i0, template: `
-    <div scSliderTrack>
-      <div
-        scSliderRange
-        [percentage]="rangeWidth()"
-        [style.left.%]="rangeStart()"
-      ></div>
-    </div>
-    <div
-      scSliderThumb
-      [percentage]="minPercentage()"
-      [value]="minValue()"
-      [min]="min()"
-      [max]="max()"
-      [step]="step()"
-      [disabled]="disabled()"
-      [aria-label]="minAriaLabel()"
-      [aria-labelledby]="minAriaLabelledby()"
-      (keydown)="onMinKeydown($event)"
-      (mouseDown)="onMinThumbMouseDown($event)"
-      (touchStart)="onMinThumbTouchStart($event)"
-    ></div>
-    <div
-      scSliderThumb
-      [percentage]="maxPercentage()"
-      [value]="maxValue()"
-      [min]="min()"
-      [max]="max()"
-      [step]="step()"
-      [disabled]="disabled()"
-      [aria-label]="maxAriaLabel()"
-      [aria-labelledby]="maxAriaLabelledby()"
-      (keydown)="onMaxKeydown($event)"
-      (mouseDown)="onMaxThumbMouseDown($event)"
-      (touchStart)="onMaxThumbTouchStart($event)"
-    ></div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ScSliderTrack, selector: "div[scSliderTrack]", inputs: ["class"] }, { kind: "component", type: ScSliderRange, selector: "div[scSliderRange]", inputs: ["class", "percentage"] }, { kind: "component", type: ScSliderThumb, selector: "div[scSliderThumb]", inputs: ["class", "percentage", "value", "min", "max", "step", "disabled", "aria-label", "aria-labelledby"], outputs: ["keydown", "mouseDown", "touchStart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSignaturePadWidthButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScSignaturePadWidthButton, isStandalone: true, selector: "button[scSignaturePadPenWidth]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "class()", "attr.aria-label": "ariaLabel()", "attr.data-active": "isActive() || null", "disabled": "signaturePad.disabled() || null" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScRangeSlider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSignaturePadWidthButton, decorators: [{
             type: Component,
             args: [{
-                    selector: 'div[scRangeSlider]',
-                    imports: [ScSliderTrack, ScSliderRange, ScSliderThumb],
+                    selector: 'button[scSignaturePadPenWidth]',
+                    template: '<ng-content />',
                     host: {
-                        'data-slot': 'range-slider',
+                        type: 'button',
                         '[class]': 'class()',
-                        '[attr.data-disabled]': 'disabled() || null',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.data-active]': 'isActive() || null',
+                        '[disabled]': 'signaturePad.disabled() || null',
+                        '(click)': 'onClick()',
                     },
-                    template: `
-    <div scSliderTrack>
-      <div
-        scSliderRange
-        [percentage]="rangeWidth()"
-        [style.left.%]="rangeStart()"
-      ></div>
-    </div>
-    <div
-      scSliderThumb
-      [percentage]="minPercentage()"
-      [value]="minValue()"
-      [min]="min()"
-      [max]="max()"
-      [step]="step()"
-      [disabled]="disabled()"
-      [aria-label]="minAriaLabel()"
-      [aria-labelledby]="minAriaLabelledby()"
-      (keydown)="onMinKeydown($event)"
-      (mouseDown)="onMinThumbMouseDown($event)"
-      (touchStart)="onMinThumbTouchStart($event)"
-    ></div>
-    <div
-      scSliderThumb
-      [percentage]="maxPercentage()"
-      [value]="maxValue()"
-      [min]="min()"
-      [max]="max()"
-      [step]="step()"
-      [disabled]="disabled()"
-      [aria-label]="maxAriaLabel()"
-      [aria-labelledby]="maxAriaLabelledby()"
-      (keydown)="onMaxKeydown($event)"
-      (mouseDown)="onMaxThumbMouseDown($event)"
-      (touchStart)="onMaxThumbTouchStart($event)"
-    ></div>
-  `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }, { type: i0.Output, args: ["minValueChange"] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }, { type: i0.Output, args: ["maxValueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "min-aria-label", required: false }] }], maxAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-aria-label", required: false }] }], minAriaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "min-aria-labelledby", required: false }] }], maxAriaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-aria-labelledby", required: false }] }] } });
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 // Token for sortable list context
 const SC_SORTABLE_LIST = new InjectionToken('SC_SORTABLE_LIST');
@@ -24805,68 +23391,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-// Token for time picker context
-const SC_TIME_PICKER = new InjectionToken('SC_TIME_PICKER');
-// ============================================================================
-// TimePicker
-// ============================================================================
-class ScTimePicker {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    format = input('12h', ...(ngDevMode ? [{ debugName: "format" }] : []));
-    showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    class = computed(() => cn('inline-flex items-center gap-1', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    setHours(hours) {
-        const current = this.value() || { hours: 0, minutes: 0 };
-        this.value.set({ ...current, hours });
-    }
-    setMinutes(minutes) {
-        const current = this.value() || { hours: 0, minutes: 0 };
-        this.value.set({ ...current, minutes });
-    }
-    setSeconds(seconds) {
-        const current = this.value() || { hours: 0, minutes: 0 };
-        this.value.set({ ...current, seconds });
-    }
-    setPeriod(period) {
-        const current = this.value() || { hours: 0, minutes: 0 };
-        this.value.set({ ...current, period });
-    }
-    getFormattedTime() {
-        const val = this.value();
-        if (!val)
-            return '';
-        const hours = this.format() === '12h' ? val.hours % 12 || 12 : val.hours;
-        const hoursStr = hours.toString().padStart(2, '0');
-        const minutesStr = val.minutes.toString().padStart(2, '0');
-        let time = `${hoursStr}:${minutesStr}`;
-        if (this.showSeconds() && val.seconds !== undefined) {
-            time += `:${val.seconds.toString().padStart(2, '0')}`;
-        }
-        if (this.format() === '12h' && val.period) {
-            time += ` ${val.period}`;
-        }
-        return time;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScTimePicker, isStandalone: true, selector: "[scTimePicker]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "time-picker" }, properties: { "class": "class()" } }, providers: [{ provide: SC_TIME_PICKER, useExisting: ScTimePicker }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTimePicker, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scTimePicker]',
-                    providers: [{ provide: SC_TIME_PICKER, useExisting: ScTimePicker }],
-                    host: {
-                        'data-slot': 'time-picker',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
-
-// ============================================================================
-// TimePickerClock (visual clock selector)
-// ============================================================================
 class ScTimePickerClock {
     timePicker = inject(SC_TIME_PICKER);
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
@@ -24875,17 +23399,16 @@ class ScTimePickerClock {
     class = computed(() => cn('inline-block', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     markers = computed(() => {
         const isHours = this.mode() === 'hours';
-        const count = isHours ? 12 : 12; // Show 12 markers for both
         const step = isHours ? 1 : 5;
         const radius = 70;
         const markers = [];
-        for (let i = 0; i < count; i++) {
+        for (let i = 0; i < 12; i++) {
             const value = isHours ? (i === 0 ? 12 : i) : i * step;
             const angle = (i * 30 - 90) * (Math.PI / 180);
             const x = 100 + radius * Math.cos(angle);
             const y = 100 + radius * Math.sin(angle);
             markers.push({
-                value: isHours ? (i === 0 ? 12 : i) : i * step,
+                value,
                 label: value.toString().padStart(2, '0'),
                 x,
                 y,
@@ -24893,20 +23416,29 @@ class ScTimePickerClock {
         }
         return markers;
     }, ...(ngDevMode ? [{ debugName: "markers" }] : []));
+    selectedValue = computed(() => {
+        const val = this.timePicker.value();
+        if (!val)
+            return null;
+        if (this.mode() === 'hours') {
+            const hours = this.timePicker.format() === '12h'
+                ? val.hours % 12 || 12
+                : val.hours % 12;
+            return hours;
+        }
+        return val.minutes;
+    }, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
     selectedAngle = computed(() => {
         const val = this.timePicker.value();
         if (!val)
             return null;
-        const isHours = this.mode() === 'hours';
-        if (isHours) {
+        if (this.mode() === 'hours') {
             const hours = this.timePicker.format() === '12h'
                 ? val.hours % 12 || 12
                 : val.hours % 12;
             return (hours * 30 - 90) * (Math.PI / 180);
         }
-        else {
-            return (val.minutes * 6 - 90) * (Math.PI / 180);
-        }
+        return (val.minutes * 6 - 90) * (Math.PI / 180);
     }, ...(ngDevMode ? [{ debugName: "selectedAngle" }] : []));
     handX = computed(() => {
         const angle = this.selectedAngle();
@@ -24920,21 +23452,6 @@ class ScTimePickerClock {
             return 100;
         return 100 + 55 * Math.sin(angle);
     }, ...(ngDevMode ? [{ debugName: "handY" }] : []));
-    isSelected(value) {
-        const val = this.timePicker.value();
-        if (!val)
-            return false;
-        const isHours = this.mode() === 'hours';
-        if (isHours) {
-            const hours = this.timePicker.format() === '12h'
-                ? val.hours % 12 || 12
-                : val.hours % 12;
-            return hours === value || (value === 12 && hours === 0);
-        }
-        else {
-            return val.minutes === value;
-        }
-    }
     selectValue(value) {
         if (this.mode() === 'hours') {
             const val = this.timePicker.value();
@@ -24980,13 +23497,15 @@ class ScTimePickerClock {
               [attr.cx]="marker.x"
               [attr.cy]="marker.y"
               r="14"
-              [class.fill-primary]="isSelected(marker.value)"
-              [class.text-primary-foreground]="isSelected(marker.value)"
+              [class.fill-primary]="selectedValue() === marker.value"
+              [class.text-primary-foreground]="selectedValue() === marker.value"
               [class.fill-accent]="
-                hoveredValue() === marker.value && !isSelected(marker.value)
+                hoveredValue() === marker.value &&
+                selectedValue() !== marker.value
               "
               [class.fill-transparent]="
-                hoveredValue() !== marker.value && !isSelected(marker.value)
+                hoveredValue() !== marker.value &&
+                selectedValue() !== marker.value
               "
               class="transition-colors"
             />
@@ -24996,8 +23515,8 @@ class ScTimePickerClock {
               text-anchor="middle"
               dominant-baseline="central"
               class="text-sm select-none"
-              [class.fill-primary-foreground]="isSelected(marker.value)"
-              [class.fill-foreground]="!isSelected(marker.value)"
+              [class.fill-primary-foreground]="selectedValue() === marker.value"
+              [class.fill-foreground]="selectedValue() !== marker.value"
             >
               {{ marker.label }}
             </text>
@@ -25057,13 +23576,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               [attr.cx]="marker.x"
               [attr.cy]="marker.y"
               r="14"
-              [class.fill-primary]="isSelected(marker.value)"
-              [class.text-primary-foreground]="isSelected(marker.value)"
+              [class.fill-primary]="selectedValue() === marker.value"
+              [class.text-primary-foreground]="selectedValue() === marker.value"
               [class.fill-accent]="
-                hoveredValue() === marker.value && !isSelected(marker.value)
+                hoveredValue() === marker.value &&
+                selectedValue() !== marker.value
               "
               [class.fill-transparent]="
-                hoveredValue() !== marker.value && !isSelected(marker.value)
+                hoveredValue() !== marker.value &&
+                selectedValue() !== marker.value
               "
               class="transition-colors"
             />
@@ -25073,8 +23594,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               text-anchor="middle"
               dominant-baseline="central"
               class="text-sm select-none"
-              [class.fill-primary-foreground]="isSelected(marker.value)"
-              [class.fill-foreground]="!isSelected(marker.value)"
+              [class.fill-primary-foreground]="selectedValue() === marker.value"
+              [class.fill-foreground]="selectedValue() !== marker.value"
             >
               {{ marker.label }}
             </text>
@@ -25112,276 +23633,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 }]
         }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
 
-// ============================================================================
-// TimePickerInput
-// ============================================================================
-class ScTimePickerInput {
-    timePicker = inject(SC_TIME_PICKER);
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
-    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
-    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
-    class = computed(() => cn('w-10 rounded-md border border-input bg-background px-2 py-1.5 text-center text-sm tabular-nums', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    min = computed(() => {
-        return 0;
-    }, ...(ngDevMode ? [{ debugName: "min" }] : []));
-    max = computed(() => {
-        const type = this.type();
-        if (type === 'hours') {
-            return this.timePicker.format() === '12h' ? 12 : 23;
-        }
-        return 59;
-    }, ...(ngDevMode ? [{ debugName: "max" }] : []));
-    displayValue = computed(() => {
-        const val = this.timePicker.value();
-        if (!val)
-            return '00';
-        const type = this.type();
-        let num;
-        if (type === 'hours') {
-            num =
-                this.timePicker.format() === '12h' ? val.hours % 12 || 12 : val.hours;
-        }
-        else if (type === 'minutes') {
-            num = val.minutes;
-        }
-        else {
-            num = val.seconds ?? 0;
-        }
-        return num.toString().padStart(2, '0');
-    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
-    onInput(event) {
-        const input = event.target;
-        const value = input.value.replace(/\D/g, '');
-        const num = parseInt(value, 10);
-        if (!isNaN(num)) {
-            this.updateValue(Math.min(num, this.max()));
-        }
-    }
-    onBlur() {
-        this.focused.set(false);
-        // Ensure value is within bounds
-        const val = this.timePicker.value();
-        if (val) {
-            const type = this.type();
-            if (type === 'hours') {
-                const max = this.timePicker.format() === '12h' ? 12 : 23;
-                const min = this.timePicker.format() === '12h' ? 1 : 0;
-                const clamped = Math.max(min, Math.min(val.hours, max));
-                if (clamped !== val.hours) {
-                    this.timePicker.setHours(clamped);
-                }
-            }
-        }
-    }
-    onFocus(event) {
-        this.focused.set(true);
-        event.target.select();
-    }
-    onKeydown(event) {
-        if (event.key === 'ArrowUp') {
-            event.preventDefault();
-            this.increment();
-        }
-        else if (event.key === 'ArrowDown') {
-            event.preventDefault();
-            this.decrement();
-        }
-    }
-    increment() {
-        const val = this.timePicker.value() || { hours: 0, minutes: 0 };
-        const type = this.type();
-        const max = this.max();
-        if (type === 'hours') {
-            const min = this.timePicker.format() === '12h' ? 1 : 0;
-            const newVal = val.hours >= max ? min : val.hours + 1;
-            this.timePicker.setHours(newVal);
-        }
-        else if (type === 'minutes') {
-            const newVal = val.minutes >= max ? 0 : val.minutes + 1;
-            this.timePicker.setMinutes(newVal);
-        }
-        else {
-            const newVal = (val.seconds ?? 0) >= max ? 0 : (val.seconds ?? 0) + 1;
-            this.timePicker.setSeconds(newVal);
-        }
-    }
-    decrement() {
-        const val = this.timePicker.value() || { hours: 0, minutes: 0 };
-        const type = this.type();
-        const max = this.max();
-        if (type === 'hours') {
-            const min = this.timePicker.format() === '12h' ? 1 : 0;
-            const newVal = val.hours <= min ? max : val.hours - 1;
-            this.timePicker.setHours(newVal);
-        }
-        else if (type === 'minutes') {
-            const newVal = val.minutes <= 0 ? max : val.minutes - 1;
-            this.timePicker.setMinutes(newVal);
-        }
-        else {
-            const newVal = (val.seconds ?? 0) <= 0 ? max : (val.seconds ?? 0) - 1;
-            this.timePicker.setSeconds(newVal);
-        }
-    }
-    updateValue(num) {
-        const type = this.type();
-        if (type === 'hours') {
-            this.timePicker.setHours(num);
-        }
-        else if (type === 'minutes') {
-            this.timePicker.setMinutes(num);
-        }
-        else {
-            this.timePicker.setSeconds(num);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTimePickerInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScTimePickerInput, isStandalone: true, selector: "input[scTimePickerInput]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "time-picker-input", "type": "text", "inputmode": "numeric" }, listeners: { "input": "onInput($event)", "blur": "onBlur()", "keydown": "onKeydown($event)", "focus": "onFocus($event)" }, properties: { "class": "class()", "value": "displayValue()", "disabled": "timePicker.disabled()", "attr.min": "min()", "attr.max": "max()", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTimePickerInput, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'input[scTimePickerInput]',
-                    template: ``,
-                    host: {
-                        'data-slot': 'time-picker-input',
-                        type: 'text',
-                        inputmode: 'numeric',
-                        '[class]': 'class()',
-                        '[value]': 'displayValue()',
-                        '[disabled]': 'timePicker.disabled()',
-                        '[attr.min]': 'min()',
-                        '[attr.max]': 'max()',
-                        '[attr.aria-label]': 'ariaLabel()',
-                        '(input)': 'onInput($event)',
-                        '(blur)': 'onBlur()',
-                        '(keydown)': 'onKeydown($event)',
-                        '(focus)': 'onFocus($event)',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
-
-// ============================================================================
-// TimePickerPeriod
-// ============================================================================
-class ScTimePickerPeriod {
-    timePicker = inject(SC_TIME_PICKER);
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('ml-2 inline-flex rounded-md border border-input bg-background p-0.5', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    isAM = computed(() => {
-        const val = this.timePicker.value();
-        return val?.period === 'AM' || (!val?.period && (val?.hours ?? 0) < 12);
-    }, ...(ngDevMode ? [{ debugName: "isAM" }] : []));
-    isPM = computed(() => {
-        const val = this.timePicker.value();
-        return val?.period === 'PM' || (!val?.period && (val?.hours ?? 0) >= 12);
-    }, ...(ngDevMode ? [{ debugName: "isPM" }] : []));
-    selectAM() {
-        this.timePicker.setPeriod('AM');
-        const val = this.timePicker.value();
-        if (val && val.hours >= 12) {
-            this.timePicker.setHours(val.hours - 12);
-        }
-    }
-    selectPM() {
-        this.timePicker.setPeriod('PM');
-        const val = this.timePicker.value();
-        if (val && val.hours < 12) {
-            this.timePicker.setHours(val.hours + 12);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTimePickerPeriod, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScTimePickerPeriod, isStandalone: true, selector: "[scTimePickerPeriod]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "time-picker-period", "role": "group" }, properties: { "class": "class()", "attr.aria-label": "\"Select AM or PM\"" } }, ngImport: i0, template: `
-    <button
-      type="button"
-      class="rounded-md px-2 py-1.5 text-sm font-medium transition-colors"
-      [class.bg-primary]="isAM()"
-      [class.text-primary-foreground]="isAM()"
-      [class.text-muted-foreground]="!isAM()"
-      [class.hover:bg-accent]="!isAM()"
-      [disabled]="timePicker.disabled()"
-      (click)="selectAM()"
-    >
-      AM
-    </button>
-    <button
-      type="button"
-      class="rounded-md px-2 py-1.5 text-sm font-medium transition-colors"
-      [class.bg-primary]="isPM()"
-      [class.text-primary-foreground]="isPM()"
-      [class.text-muted-foreground]="!isPM()"
-      [class.hover:bg-accent]="!isPM()"
-      [disabled]="timePicker.disabled()"
-      (click)="selectPM()"
-    >
-      PM
-    </button>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTimePickerPeriod, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[scTimePickerPeriod]',
-                    template: `
-    <button
-      type="button"
-      class="rounded-md px-2 py-1.5 text-sm font-medium transition-colors"
-      [class.bg-primary]="isAM()"
-      [class.text-primary-foreground]="isAM()"
-      [class.text-muted-foreground]="!isAM()"
-      [class.hover:bg-accent]="!isAM()"
-      [disabled]="timePicker.disabled()"
-      (click)="selectAM()"
-    >
-      AM
-    </button>
-    <button
-      type="button"
-      class="rounded-md px-2 py-1.5 text-sm font-medium transition-colors"
-      [class.bg-primary]="isPM()"
-      [class.text-primary-foreground]="isPM()"
-      [class.text-muted-foreground]="!isPM()"
-      [class.hover:bg-accent]="!isPM()"
-      [disabled]="timePicker.disabled()"
-      (click)="selectPM()"
-    >
-      PM
-    </button>
-  `,
-                    host: {
-                        'data-slot': 'time-picker-period',
-                        '[class]': 'class()',
-                        role: 'group',
-                        '[attr.aria-label]': '"Select AM or PM"',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-// ============================================================================
-// TimePickerSeparator
-// ============================================================================
-class ScTimePickerSeparator {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('text-lg font-medium text-muted-foreground', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTimePickerSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScTimePickerSeparator, isStandalone: true, selector: "[scTimePickerSeparator]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "time-picker-separator" }, properties: { "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTimePickerSeparator, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scTimePickerSeparator]',
-                    host: {
-                        'data-slot': 'time-picker-separator',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
 class ScTimeline {
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     class = computed(() => cn('relative space-y-0', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
@@ -28809,5 +27060,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthLayout, CHART_COLORS, COUNTRIES, DEFAULT_BREAKPOINTS, DEFAULT_CONFETTI_OPTIONS, DEFAULT_CONFIG, DEFAULT_COUNTER_OPTIONS, DEFAULT_DOCK_OPTIONS, DEFAULT_SEARCH_OPTIONS, DEFAULT_TOOLBAR_CONFIG, SC_AUDIO_PLAYER, SC_CHART, SC_COLOR_PICKER, SC_DATA_TABLE, SC_FILE_UPLOAD, SC_IMAGE_COMPARE, SC_IMAGE_CROPPER, SC_LANGUAGE_CONFIG, SC_LIGHTBOX, SC_NOTIFICATION_CENTER, SC_NUMBER_FIELD, SC_PASSWORD_FIELD, SC_PDF_VIEWER, SC_RATING_FIELD, SC_RATING_ITEM_GROUP, SC_SIGNATURE_PAD, SC_SORTABLE_ITEM, SC_SORTABLE_LIST, SC_STEPPER, SC_STEPPER_ITEM, SC_TAG_INPUT, SC_TIMEZONE_CONFIG, SC_TIME_PICKER, SC_TREE_ITEM, ScAnimatedCounter, ScAudioPlayer, ScAudioPlayerCover, ScAudioPlayerInfo, ScAudioPlayerNext, ScAudioPlayerPlayButton, ScAudioPlayerPrevious, ScAudioPlayerProgress, ScAudioPlayerRepeat, ScAudioPlayerShuffle, ScAudioPlayerVolume, ScAutoMarquee, ScBarChart, ScBarcodeScanner, ScBarcodeScannerSimple, ScChartContainer, ScChartLegend, ScChartTooltip, ScColorPicker, ScColorPickerArea, ScColorPickerEyeDropper, ScColorPickerHue, ScColorPickerInput, ScColorPickerPreview, ScColorPickerSwatches, ScCombobox, ScComboboxEmpty, ScComboboxIcon, ScComboboxInput, ScComboboxItem, ScComboboxItemIndicator, ScComboboxList, ScComboboxPortal, ScComboboxTrigger, ScCommand, ScCommandEmpty, ScCommandGroup, ScCommandGroupHeading, ScCommandInput, ScCommandItem, ScCommandList, ScCommandSeparator, ScCommandShortcut, ScConfetti, ScContextMenu, ScContextMenuContent, ScContextMenuItem, ScContextMenuLabel, ScContextMenuSeparator, ScContextMenuShortcut, ScContextMenuSub, ScContextMenuSubContent, ScContextMenuSubTrigger, ScContextMenuTrigger, ScCopyButton, ScCopyButtonWithText, ScCopyCode, ScCopyInput, ScCountdown, ScCountdownSimple, ScDataTable, ScDataTableBody, ScDataTableCell, ScDataTableColumnToggle, ScDataTableFilter, ScDataTableHead, ScDataTableHeader, ScDataTablePagination, ScDataTableRow, ScDateRangePicker, ScDiffViewer, ScDock, ScDockBadge, ScDockItem, ScDockItems, ScDonutChart, ScEmojiPicker, ScEmojiPickerTrigger, ScFileUpload, ScFileUploadDropzone, ScFileUploadItem, ScFileUploadItemDelete, ScFileUploadItemName, ScFileUploadItemPreview, ScFileUploadItemProgress, ScFileUploadItemSize, ScFileUploadList, ScFileUploadTrigger, ScImageAnnotator, ScImageCompareDirective as ScImageCompare, ScImageCompareAfter, ScImageCompareBefore, ScImageCompareContainer, ScImageCompareDirective, ScImageCompareLabel, ScImageCompareSlider, ScImageCropperDirective as ScImageCropper, ScImageCropperAspectRatio, ScImageCropperContainer, ScImageCropperControls, ScImageCropperDirective, ScImageCropperPreview, ScInfiniteScroll, ScInfiniteScrollEnd, ScInfiniteScrollLoader, ScKanbanBoard, ScKanbanCard, ScKanbanColumn, ScLanguageButton, ScLanguageSelect, ScLanguageService, ScLanguageToggle, ScLightboxDirective as ScLightbox, ScLightboxContainer, ScLightboxDirective, ScLightboxGallery, ScLightboxTrigger, ScLineChart, ScMarquee, ScMarqueeClone, ScMarqueeFade, ScMarqueeItem, ScMarqueeText, ScMasonryGrid, ScMasonryItem, ScMentionInput, ScMultiSelect, ScNativeCheckbox, ScNativeSelect, ScNativeSelectContainer, ScNativeSelectIcon, ScNativeSelectOptGroup, ScNativeSelectOption, ScNavbar, ScNavbarActions, ScNavbarBrand, ScNavbarGroup, ScNavbarMobileLink, ScNavbarMobileMenu, ScNavbarMobilePortal, ScNavbarMobileTrigger, ScNavbarProvider, ScNavigationMenu, ScNavigationMenuContent, ScNavigationMenuIndicator, ScNavigationMenuItem, ScNavigationMenuLink, ScNavigationMenuList, ScNavigationMenuTrigger, ScNavigationMenuViewport, ScNotificationCenterDirective as ScNotificationCenter, ScNotificationCenterContainer, ScNotificationCenterDirective, ScNotificationGroup, ScNotificationItem, ScNumberField, ScNumberFieldDecrement, ScNumberFieldIncrement, ScNumberFieldInput, ScNumberFieldInputGroup, ScNumberFieldScrubArea, ScOptField, ScOptFieldSeparator, ScOptFieldSlot, ScOptFieldSlotCaret, ScOptFieldSlotChar, ScOptFieldSlotGroup, ScOptFieldSlotInput, ScOrgChart, ScOrgChartNode, ScPasswordField, ScPasswordFieldInput, ScPasswordFieldInputGroup, ScPasswordFieldRequirements, ScPasswordFieldStrength, ScPasswordFieldStrengthBar, ScPasswordFieldToggle, ScPdfViewer, ScPdfViewerContainer, ScPdfViewerContent, ScPdfViewerDownload, ScPdfViewerEmpty, ScPdfViewerError, ScPdfViewerFullscreen, ScPdfViewerLoading, ScPdfViewerNav, ScPdfViewerNextPage, ScPdfViewerPageInfo, ScPdfViewerPrevPage, ScPdfViewerPrint, ScPdfViewerRetry, ScPdfViewerRoot, ScPdfViewerRotateLeft, ScPdfViewerRotateRight, ScPdfViewerSeparator, ScPdfViewerSpacer, ScPdfViewerToolbar$1 as ScPdfViewerToolbar, ScPdfViewerToolbar as ScPdfViewerToolbarLegacy, ScPdfViewerZoom, ScPdfViewerZoomIn, ScPdfViewerZoomOut, ScPdfViewerZoomSelect, ScPhoneInput, ScPhoneInputSimple, ScPieChart, ScQrCode, ScQrCodeDownload, ScRangeSlider, ScRatingField, ScRatingFieldItem, ScRatingItemGroup, ScResizableHandle, ScResizablePanel, ScResizablePanelGroup, ScScrollArea, ScScrollBar, ScSearchInput, ScSidebar, ScSidebarBody, ScSidebarFooter, ScSidebarGroup, ScSidebarGroupAction, ScSidebarGroupContent, ScSidebarGroupLabel, ScSidebarHeader, ScSidebarInput, ScSidebarInset, ScSidebarLayout, ScSidebarMenu, ScSidebarMenuAction, ScSidebarMenuBadge, ScSidebarMenuButton, ScSidebarMenuItem, ScSidebarMenuSkeleton, ScSidebarMenuSub, ScSidebarMenuSubButton, ScSidebarMenuSubItem, ScSidebarProvider, ScSidebarRail, ScSidebarSeparator, ScSidebarState, ScSidebarTrigger, ScSignaturePad, ScSignaturePadCanvas, ScSignaturePadClearButton, ScSignaturePadColorButton, ScSignaturePadControls, ScSignaturePadToolbar, ScSignaturePadUndoButton, ScSignaturePadWidthButton, ScSlider, ScSliderRange, ScSliderThumb, ScSliderTrack, ScSortableHandle, ScSortableItem, ScSortableList, ScSortableOverlay, ScSpeedDial, ScSpeedDialAction, ScSplitButton, ScSpotlight, ScSpotlightActions, ScSpotlightDescription, ScSpotlightTitle, ScStackedLayout, ScStatCard, ScStatCardChange, ScStatCardDescription, ScStatCardIcon, ScStatCardLabel, ScStatCardValue, ScStepper, ScStepperContent, ScStepperDescription, ScStepperItem, ScStepperList, ScStepperNext, ScStepperPrevious, ScStepperSeparator, ScStepperTitle, ScStepperTrigger, ScTagInput, ScTagInputClear, ScTagInputCount, ScTagInputField, ScTagInputTag, ScTheme, ScThemeField, ScThemeSelect, ScThemeToggle, ScTimePicker, ScTimePickerClock, ScTimePickerInput, ScTimePickerPeriod, ScTimePickerSeparator, ScTimeline, ScTimelineConnector, ScTimelineContent, ScTimelineDescription, ScTimelineDot, ScTimelineItem, ScTimelineTime, ScTimelineTitle, ScTimezoneBadge, ScTimezoneButton, ScTimezoneDisplay, ScTimezoneSelect, ScTimezoneService, ScTourGuide, ScTransferList, ScTree, ScTreeItem, ScTreeItemGroup, ScTreeItemIcon, ScTreeItemTrigger, ScTreeItemTriggerIcon, ScVideoPlayer, ScVideoPlayerBigPlayButton, ScVideoPlayerBuffering, ScVideoPlayerControls, ScVideoPlayerFullscreenButton, ScVideoPlayerPipButton, ScVideoPlayerPlayButton, ScVideoPlayerProgress, ScVideoPlayerSkipButton, ScVideoPlayerSpeedButton, ScVideoPlayerTime, ScVideoPlayerVideo, ScVideoPlayerVolume, ScVirtualList, ScVirtualScroll, TourService, ZOOM_LEVELS, computeDiff, computeWordDiff, createScDateRangePresets, createUnifiedDiff, getCountryByCode, getCountryByDialCode, sizeStyles$1 as sizeStyles, variantStyles$1 as variantStyles };
+export { AuthLayout, CHART_COLORS, COUNTRIES, DEFAULT_BREAKPOINTS, DEFAULT_CONFETTI_OPTIONS, DEFAULT_CONFIG, DEFAULT_COUNTER_OPTIONS, DEFAULT_DOCK_OPTIONS, DEFAULT_SEARCH_OPTIONS, DEFAULT_TOOLBAR_CONFIG, SC_AUDIO_PLAYER, SC_CHART, SC_COLOR_PICKER, SC_DATA_TABLE, SC_IMAGE_COMPARE, SC_IMAGE_CROPPER, SC_LANGUAGE_CONFIG, SC_LIGHTBOX, SC_NOTIFICATION_CENTER, SC_NUMBER_FIELD, SC_PASSWORD_FIELD, SC_PDF_VIEWER, SC_RATING_FIELD, SC_RATING_ITEM_GROUP, SC_SIGNATURE_PAD, SC_SORTABLE_ITEM, SC_SORTABLE_LIST, SC_STEPPER, SC_STEPPER_ITEM, SC_TAG_INPUT, SC_TIMEZONE_CONFIG, SC_TREE_ITEM, ScAnimatedCounter, ScAudioPlayer, ScAudioPlayerCover, ScAudioPlayerInfo, ScAudioPlayerNext, ScAudioPlayerPlayButton, ScAudioPlayerPrevious, ScAudioPlayerProgress, ScAudioPlayerRepeat, ScAudioPlayerShuffle, ScAudioPlayerVolume, ScAutoMarquee, ScBarChart, ScBarcodeScanner, ScBarcodeScannerSimple, ScChartContainer, ScChartLegend, ScChartTooltip, ScColorPicker, ScColorPickerArea, ScColorPickerEyeDropper, ScColorPickerHue, ScColorPickerInput, ScColorPickerPreview, ScColorPickerSwatches, ScCombobox, ScComboboxEmpty, ScComboboxIcon, ScComboboxInput, ScComboboxItem, ScComboboxItemIndicator, ScComboboxList, ScComboboxPortal, ScComboboxTrigger, ScCommand, ScCommandEmpty, ScCommandGroup, ScCommandGroupHeading, ScCommandInput, ScCommandItem, ScCommandList, ScCommandSeparator, ScCommandShortcut, ScConfetti, ScContextMenu, ScContextMenuContent, ScContextMenuItem, ScContextMenuLabel, ScContextMenuSeparator, ScContextMenuShortcut, ScContextMenuSub, ScContextMenuSubContent, ScContextMenuSubTrigger, ScContextMenuTrigger, ScCopyButton, ScCopyButtonWithText, ScCopyCode, ScCopyInput, ScCountdown, ScCountdownSimple, ScDataTable, ScDataTableBody, ScDataTableCell, ScDataTableColumnToggle, ScDataTableFilter, ScDataTableHead, ScDataTableHeader, ScDataTablePagination, ScDataTableRow, ScDateRangePicker, ScDiffViewer, ScDock, ScDockBadge, ScDockItem, ScDockItems, ScDonutChart, ScEmojiPicker, ScEmojiPickerTrigger, ScImageAnnotator, ScImageCompareDirective as ScImageCompare, ScImageCompareAfter, ScImageCompareBefore, ScImageCompareContainer, ScImageCompareDirective, ScImageCompareLabel, ScImageCompareSlider, ScImageCropperDirective as ScImageCropper, ScImageCropperAspectRatio, ScImageCropperContainer, ScImageCropperControls, ScImageCropperDirective, ScImageCropperPreview, ScInfiniteScroll, ScInfiniteScrollEnd, ScInfiniteScrollLoader, ScKanbanBoard, ScKanbanCard, ScKanbanColumn, ScLanguageButton, ScLanguageSelect, ScLanguageService, ScLanguageToggle, ScLightboxDirective as ScLightbox, ScLightboxContainer, ScLightboxDirective, ScLightboxGallery, ScLightboxTrigger, ScLineChart, ScMarquee, ScMarqueeClone, ScMarqueeFade, ScMarqueeItem, ScMarqueeText, ScMasonryGrid, ScMasonryItem, ScMentionInput, ScMultiSelect, ScNativeCheckbox, ScNavbar, ScNavbarActions, ScNavbarBrand, ScNavbarGroup, ScNavbarMobileLink, ScNavbarMobileMenu, ScNavbarMobilePortal, ScNavbarMobileTrigger, ScNavbarProvider, ScNotificationCenterDirective as ScNotificationCenter, ScNotificationCenterContainer, ScNotificationCenterDirective, ScNotificationGroup, ScNotificationItem, ScNumberField, ScNumberFieldDecrement, ScNumberFieldIncrement, ScNumberFieldInput, ScNumberFieldInputGroup, ScNumberFieldScrubArea, ScOptField, ScOptFieldSeparator, ScOptFieldSlot, ScOptFieldSlotCaret, ScOptFieldSlotChar, ScOptFieldSlotGroup, ScOptFieldSlotInput, ScOrgChart, ScOrgChartNode, ScPasswordField, ScPasswordFieldInput, ScPasswordFieldInputGroup, ScPasswordFieldRequirements, ScPasswordFieldStrength, ScPasswordFieldStrengthBar, ScPasswordFieldToggle, ScPdfViewer, ScPdfViewerContainer, ScPdfViewerContent, ScPdfViewerDownload, ScPdfViewerEmpty, ScPdfViewerError, ScPdfViewerFullscreen, ScPdfViewerLoading, ScPdfViewerNav, ScPdfViewerNextPage, ScPdfViewerPageInfo, ScPdfViewerPrevPage, ScPdfViewerPrint, ScPdfViewerRetry, ScPdfViewerRoot, ScPdfViewerRotateLeft, ScPdfViewerRotateRight, ScPdfViewerSeparator, ScPdfViewerSpacer, ScPdfViewerToolbar$1 as ScPdfViewerToolbar, ScPdfViewerToolbar as ScPdfViewerToolbarLegacy, ScPdfViewerZoom, ScPdfViewerZoomIn, ScPdfViewerZoomOut, ScPdfViewerZoomSelect, ScPhoneInput, ScPhoneInputSimple, ScPieChart, ScQrCode, ScQrCodeDownload, ScRatingField, ScRatingFieldItem, ScRatingItemGroup, ScResizableHandle, ScResizablePanel, ScResizablePanelGroup, ScScrollArea, ScScrollBar, ScSearchInput, ScSidebar, ScSidebarBody, ScSidebarFooter, ScSidebarGroup, ScSidebarGroupAction, ScSidebarGroupContent, ScSidebarGroupLabel, ScSidebarHeader, ScSidebarInput, ScSidebarInset, ScSidebarLayout, ScSidebarMenu, ScSidebarMenuAction, ScSidebarMenuBadge, ScSidebarMenuButton, ScSidebarMenuItem, ScSidebarMenuSkeleton, ScSidebarMenuSub, ScSidebarMenuSubButton, ScSidebarMenuSubItem, ScSidebarProvider, ScSidebarRail, ScSidebarSeparator, ScSidebarState, ScSidebarTrigger, ScSignaturePad, ScSignaturePadCanvas, ScSignaturePadClearButton, ScSignaturePadColorButton, ScSignaturePadControls, ScSignaturePadToolbar, ScSignaturePadUndoButton, ScSignaturePadWidthButton, ScSortableHandle, ScSortableItem, ScSortableList, ScSortableOverlay, ScSpeedDial, ScSpeedDialAction, ScSplitButton, ScSpotlight, ScSpotlightActions, ScSpotlightDescription, ScSpotlightTitle, ScStackedLayout, ScStatCard, ScStatCardChange, ScStatCardDescription, ScStatCardIcon, ScStatCardLabel, ScStatCardValue, ScStepper, ScStepperContent, ScStepperDescription, ScStepperItem, ScStepperList, ScStepperNext, ScStepperPrevious, ScStepperSeparator, ScStepperTitle, ScStepperTrigger, ScTagInput, ScTagInputClear, ScTagInputCount, ScTagInputField, ScTagInputTag, ScTheme, ScThemeField, ScThemeSelect, ScThemeToggle, ScTimePickerClock, ScTimeline, ScTimelineConnector, ScTimelineContent, ScTimelineDescription, ScTimelineDot, ScTimelineItem, ScTimelineTime, ScTimelineTitle, ScTimezoneBadge, ScTimezoneButton, ScTimezoneDisplay, ScTimezoneSelect, ScTimezoneService, ScTourGuide, ScTransferList, ScTree, ScTreeItem, ScTreeItemGroup, ScTreeItemIcon, ScTreeItemTrigger, ScTreeItemTriggerIcon, ScVideoPlayer, ScVideoPlayerBigPlayButton, ScVideoPlayerBuffering, ScVideoPlayerControls, ScVideoPlayerFullscreenButton, ScVideoPlayerPipButton, ScVideoPlayerPlayButton, ScVideoPlayerProgress, ScVideoPlayerSkipButton, ScVideoPlayerSpeedButton, ScVideoPlayerTime, ScVideoPlayerVideo, ScVideoPlayerVolume, ScVirtualList, ScVirtualScroll, TourService, ZOOM_LEVELS, computeDiff, computeWordDiff, createScDateRangePresets, createUnifiedDiff, getCountryByCode, getCountryByDialCode, sizeStyles$1 as sizeStyles, variantStyles$1 as variantStyles };
 //# sourceMappingURL=semantic-components-ui-lab.mjs.map