@semantic-components/ui-lab 0.76.0 → 0.77.0

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

@@ -1,20 +1,18 @@
 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, TemplateRef, contentChild, ViewChild, ViewContainerRef, Injector, runInInjectionContext, contentChildren, untracked, Injectable, booleanAttribute } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, DestroyRef, output, signal, effect, ElementRef, InjectionToken, model, viewChild, Directive, PLATFORM_ID, afterNextRender, TemplateRef, contentChild, Injector, runInInjectionContext, contentChildren, ViewContainerRef, ViewChild, untracked, Injectable, booleanAttribute } from '@angular/core';
 import { RouterOutlet, Router, NavigationEnd } from '@angular/router';
-import { cn, ScSlider, buttonVariants, ScCalendar, SC_FIELD, SC_TIME_PICKER, ScPopoverProvider, ScButton, ScPopoverTrigger, ScPopoverPortal, ScPopover } from '@semantic-components/ui';
-import { SiVolumeOffIcon, SiVolumeXIcon, SiVolume1Icon, SiVolume2Icon, SiPipetteIcon, SiSearchIcon, SiChevronRightIcon, SiChevronUpIcon, SiChevronDownIcon, SiChevronsUpDownIcon, SiSlidersVerticalIcon, SiChevronsLeftIcon, SiChevronLeftIcon, SiChevronsRightIcon, SiCalendarIcon, SiXIcon, SiSmileIcon, SiLoaderCircleIcon, SiPlusIcon, SiZoomOutIcon, SiZoomInIcon, SiMinimize2Icon, SiCheckIcon, SiTriangleAlertIcon, SiCircleXIcon, SiMessageSquareIcon, SiInfoIcon, SiCircleCheckIcon, SiTrash2Icon, SiBellIcon, SiMinusIcon, SiEyeIcon, SiEyeOffIcon, SiCircleIcon, SiFileTextIcon, SiRotateCcwIcon, SiRotateCwIcon, SiDownloadIcon, SiPrinterIcon, SiMaximizeIcon, SiMinimizeIcon, SiPhoneIcon, SiGripVerticalIcon, SiClockIcon, SiGlobeIcon } from '@semantic-icons/lucide-icons';
+import { cn, ScSlider, buttonVariants, ScCalendar, ScCalendarHeader, ScCalendarHeading, ScCalendarNext, ScCalendarPrevious, SC_FIELD, SC_TIME_PICKER, ScPopoverProvider, ScButton, ScPopoverTrigger, ScPopoverPortal, ScPopover } from '@semantic-components/ui';
+import { SiVolumeOffIcon, SiVolumeXIcon, SiVolume1Icon, SiVolume2Icon, SiCircleAlertIcon, SiCircleXIcon, SiScanBarcodeIcon, SiSquareIcon, SiSwitchCameraIcon, SiFlashlightIcon, SiPipetteIcon, SiChevronUpIcon, SiChevronDownIcon, SiChevronsUpDownIcon, SiSlidersVerticalIcon, SiChevronsLeftIcon, SiChevronLeftIcon, SiChevronRightIcon, SiChevronsRightIcon, SiCalendarIcon, SiXIcon, SiSmileIcon, SiLoaderCircleIcon, SiPlusIcon, SiZoomOutIcon, SiZoomInIcon, SiMinimize2Icon, SiCheckIcon, SiTriangleAlertIcon, SiMessageSquareIcon, SiInfoIcon, SiCircleCheckIcon, SiTrash2Icon, SiBellIcon, SiMinusIcon, SiEyeIcon, SiEyeOffIcon, SiCircleIcon, SiFileTextIcon, SiRotateCcwIcon, SiRotateCwIcon, SiDownloadIcon, SiPrinterIcon, SiMaximizeIcon, SiMinimizeIcon, SiPhoneIcon, SiGripVerticalIcon, SiClockIcon, SiGlobeIcon } from '@semantic-icons/lucide-icons';
 import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import { _IdGenerator, CdkTrapFocus } from '@angular/cdk/a11y';
-import * as i1 from '@angular/aria/listbox';
-import { Option, Listbox } from '@angular/aria/listbox';
-import * as i1$1 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 * as i1 from '@angular/cdk/overlay';
+import { CdkOverlayOrigin, Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { filter } from 'rxjs';
-import * as i1$2 from '@angular/aria/tree';
+import { TemplatePortal } from '@angular/cdk/portal';
+import * as i1$1 from '@angular/aria/tree';
 import { Tree, TreeItemGroup, TreeItem } from '@angular/aria/tree';
 
 class ScStackedLayout {
@@ -546,8 +544,7 @@ class ScAudioPlayerProgress {
     player = inject(SC_AUDIO_PLAYER);
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     class = computed(() => cn('flex items-center gap-2', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    onSeek(event) {
-        const percent = +event.target.value;
+    onSeek(percent) {
         this.player.seek((percent / 100) * this.player.duration());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScAudioPlayerProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -567,18 +564,16 @@ class ScAudioPlayerProgress {
         aria-label="Seek"
         class="absolute inset-0 h-full [&::-moz-range-progress]:transition-[height] group-hover:[&::-moz-range-progress]:h-1.5 [&::-moz-range-track]:transition-[height] group-hover:[&::-moz-range-track]:h-1.5 [&::-webkit-slider-runnable-track]:transition-[height] group-hover:[&::-webkit-slider-runnable-track]:h-1.5"
         style="--muted: oklch(0 0 0 / 0.1)"
-        min="0"
-        max="100"
-        step="0.1"
+        [max]="100"
+        [step]="0.1"
         [value]="player.progressPercent()"
-        [style.--fill-percent]="player.progressPercent() + '%'"
-        (input)="onSeek($event)"
+        (valueChange)="onSeek($event)"
       />
     </div>
     <span class="text-muted-foreground w-10 text-xs">
       {{ player.formatTime(player.duration()) }}
     </span>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["id", "class", "aria-describedby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["value", "min", "max", "step", "id", "class", "aria-describedby"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScAudioPlayerProgress, decorators: [{
             type: Component,
@@ -601,12 +596,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         aria-label="Seek"
         class="absolute inset-0 h-full [&::-moz-range-progress]:transition-[height] group-hover:[&::-moz-range-progress]:h-1.5 [&::-moz-range-track]:transition-[height] group-hover:[&::-moz-range-track]:h-1.5 [&::-webkit-slider-runnable-track]:transition-[height] group-hover:[&::-webkit-slider-runnable-track]:h-1.5"
         style="--muted: oklch(0 0 0 / 0.1)"
-        min="0"
-        max="100"
-        step="0.1"
+        [max]="100"
+        [step]="0.1"
         [value]="player.progressPercent()"
-        [style.--fill-percent]="player.progressPercent() + '%'"
-        (input)="onSeek($event)"
+        (valueChange)="onSeek($event)"
       />
     </div>
     <span class="text-muted-foreground w-10 text-xs">
@@ -772,10 +765,6 @@ class ScAudioPlayerVolume {
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     iconButtonClass = cn(buttonVariants({ variant: 'ghost', size: 'sm' }), 'size-7 rounded-full');
     class = computed(() => cn('flex items-center justify-center gap-2', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    onVolumeChange(event) {
-        const value = +event.target.value;
-        this.player.setVolume(value);
-    }
     onMaxVolume() {
         this.player.setVolume(1);
     }
@@ -801,14 +790,12 @@ class ScAudioPlayerVolume {
     <input
       scSlider
       class="w-24"
-      min="0"
-      max="1"
-      step="0.01"
+      [max]="1"
+      [step]="0.01"
       aria-label="Volume"
       [disabled]="player.isMuted()"
       [value]="player.volume()"
-      [style.--fill-percent]="player.volume() * 100 + '%'"
-      (input)="onVolumeChange($event)"
+      (valueChange)="player.setVolume($event)"
     />
 
     <button
@@ -819,7 +806,7 @@ class ScAudioPlayerVolume {
     >
       <svg siVolume2Icon class="pointer-events-none size-3.5"></svg>
     </button>
-  `, isInline: true, dependencies: [{ kind: "component", type: SiVolumeOffIcon, selector: "svg[siVolumeOffIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiVolumeXIcon, selector: "svg[siVolumeXIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiVolume1Icon, selector: "svg[siVolume1Icon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiVolume2Icon, selector: "svg[siVolume2Icon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["id", "class", "aria-describedby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: SiVolumeOffIcon, selector: "svg[siVolumeOffIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiVolumeXIcon, selector: "svg[siVolumeXIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiVolume1Icon, selector: "svg[siVolume1Icon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiVolume2Icon, selector: "svg[siVolume2Icon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["value", "min", "max", "step", "id", "class", "aria-describedby"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScAudioPlayerVolume, decorators: [{
             type: Component,
@@ -853,14 +840,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     <input
       scSlider
       class="w-24"
-      min="0"
-      max="1"
-      step="0.01"
+      [max]="1"
+      [step]="0.01"
       aria-label="Volume"
       [disabled]="player.isMuted()"
       [value]="player.volume()"
-      [style.--fill-percent]="player.volume() * 100 + '%'"
-      (input)="onVolumeChange($event)"
+      (valueChange)="player.setVolume($event)"
     />
 
     <button
@@ -1038,17 +1023,9 @@ class ScBarcodeScanner {
       @if (!isSupported()) {
         <div class="flex flex-col items-center justify-center p-8 text-center">
           <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
+            siCircleAlertIcon
             class="text-muted-foreground mb-4 size-12"
-          >
-            <circle cx="12" cy="12" r="10" />
-            <line x1="12" x2="12" y1="8" y2="12" />
-            <line x1="12" x2="12.01" y1="16" y2="16" />
-          </svg>
+          ></svg>
           <p class="mb-2 text-lg font-medium">Barcode Scanner Not Supported</p>
           <p class="text-muted-foreground text-sm">
             Your browser doesn't support the Barcode Detection API. Try using
@@ -1057,18 +1034,7 @@ class ScBarcodeScanner {
         </div>
       } @else if (error()) {
         <div class="flex flex-col items-center justify-center p-8 text-center">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            class="text-destructive mb-4 size-12"
-          >
-            <circle cx="12" cy="12" r="10" />
-            <line x1="15" x2="9" y1="9" y2="15" />
-            <line x1="9" x2="15" y1="9" y2="15" />
-          </svg>
+          <svg siCircleXIcon class="text-destructive mb-4 size-12"></svg>
           <p class="mb-2 text-lg font-medium">Camera Error</p>
           <p class="text-muted-foreground mb-4 text-sm">{{ error() }}</p>
           <button
@@ -1142,20 +1108,7 @@ class ScBarcodeScanner {
                 (click)="startScanning()"
                 class="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-2 rounded-md px-4 py-2"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  class="size-4"
-                >
-                  <path d="M3 7V5a2 2 0 0 1 2-2h2" />
-                  <path d="M17 3h2a2 2 0 0 1 2 2v2" />
-                  <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
-                  <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
-                  <rect width="10" height="8" x="7" y="8" rx="1" />
-                </svg>
+                <svg siScanBarcodeIcon class="size-4"></svg>
                 Start Scanning
               </button>
             } @else {
@@ -1164,16 +1117,7 @@ class ScBarcodeScanner {
                 (click)="stopScanning()"
                 class="hover:bg-accent inline-flex items-center gap-2 rounded-md border px-4 py-2"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  class="size-4"
-                >
-                  <rect x="6" y="6" width="12" height="12" rx="2" />
-                </svg>
+                <svg siSquareIcon class="size-4"></svg>
                 Stop
               </button>
             }
@@ -1186,20 +1130,7 @@ class ScBarcodeScanner {
                 class="hover:bg-accent rounded-md border p-2"
                 aria-label="Switch camera"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  class="size-5"
-                >
-                  <path d="M11 19H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5" />
-                  <path d="M13 5h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5" />
-                  <circle cx="12" cy="12" r="3" />
-                  <path d="m18 22-3-3 3-3" />
-                  <path d="m6 2 3 3-3 3" />
-                </svg>
+                <svg siSwitchCameraIcon class="size-5"></svg>
               </button>
             }
           </div>
@@ -1216,45 +1147,31 @@ class ScBarcodeScanner {
               "
               aria-label="Toggle flashlight"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                class="size-5"
-              >
-                <path
-                  d="M18 6c0 2-2 2-2 4v10a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V10c0-2-2-2-2-4V2h12z"
-                />
-                <line x1="6" x2="18" y1="6" y2="6" />
-                <line x1="12" x2="12" y1="12" y2="12" />
-              </svg>
+              <svg siFlashlightIcon class="size-5"></svg>
             </button>
           }
         </div>
       }
     </div>
-  `, isInline: true, styles: ["@keyframes scan{0%,to{transform:translateY(0)}50%{transform:translateY(calc(100% - 2px))}}.animate-scan{animation:scan 2s ease-in-out infinite}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@keyframes scan{0%,to{transform:translateY(0)}50%{transform:translateY(calc(100% - 2px))}}.animate-scan{animation:scan 2s ease-in-out infinite}\n"], dependencies: [{ kind: "component", type: SiCircleAlertIcon, selector: "svg[siCircleAlertIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiCircleXIcon, selector: "svg[siCircleXIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiScanBarcodeIcon, selector: "svg[siScanBarcodeIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiSquareIcon, selector: "svg[siSquareIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiSwitchCameraIcon, selector: "svg[siSwitchCameraIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiFlashlightIcon, selector: "svg[siFlashlightIcon]", inputs: ["ariaHidden", "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.2.1", ngImport: i0, type: ScBarcodeScanner, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-barcode-scanner', template: `
+            args: [{ selector: 'sc-barcode-scanner', imports: [
+                        SiCircleAlertIcon,
+                        SiCircleXIcon,
+                        SiScanBarcodeIcon,
+                        SiSquareIcon,
+                        SiSwitchCameraIcon,
+                        SiFlashlightIcon,
+                    ], template: `
     <div [class]="containerClass()">
       @if (!isSupported()) {
         <div class="flex flex-col items-center justify-center p-8 text-center">
           <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
+            siCircleAlertIcon
             class="text-muted-foreground mb-4 size-12"
-          >
-            <circle cx="12" cy="12" r="10" />
-            <line x1="12" x2="12" y1="8" y2="12" />
-            <line x1="12" x2="12.01" y1="16" y2="16" />
-          </svg>
+          ></svg>
           <p class="mb-2 text-lg font-medium">Barcode Scanner Not Supported</p>
           <p class="text-muted-foreground text-sm">
             Your browser doesn't support the Barcode Detection API. Try using
@@ -1263,18 +1180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         </div>
       } @else if (error()) {
         <div class="flex flex-col items-center justify-center p-8 text-center">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            class="text-destructive mb-4 size-12"
-          >
-            <circle cx="12" cy="12" r="10" />
-            <line x1="15" x2="9" y1="9" y2="15" />
-            <line x1="9" x2="15" y1="9" y2="15" />
-          </svg>
+          <svg siCircleXIcon class="text-destructive mb-4 size-12"></svg>
           <p class="mb-2 text-lg font-medium">Camera Error</p>
           <p class="text-muted-foreground mb-4 text-sm">{{ error() }}</p>
           <button
@@ -1348,20 +1254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 (click)="startScanning()"
                 class="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-2 rounded-md px-4 py-2"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  class="size-4"
-                >
-                  <path d="M3 7V5a2 2 0 0 1 2-2h2" />
-                  <path d="M17 3h2a2 2 0 0 1 2 2v2" />
-                  <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
-                  <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
-                  <rect width="10" height="8" x="7" y="8" rx="1" />
-                </svg>
+                <svg siScanBarcodeIcon class="size-4"></svg>
                 Start Scanning
               </button>
             } @else {
@@ -1370,16 +1263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 (click)="stopScanning()"
                 class="hover:bg-accent inline-flex items-center gap-2 rounded-md border px-4 py-2"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  class="size-4"
-                >
-                  <rect x="6" y="6" width="12" height="12" rx="2" />
-                </svg>
+                <svg siSquareIcon class="size-4"></svg>
                 Stop
               </button>
             }
@@ -1392,20 +1276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 class="hover:bg-accent rounded-md border p-2"
                 aria-label="Switch camera"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  class="size-5"
-                >
-                  <path d="M11 19H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5" />
-                  <path d="M13 5h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5" />
-                  <circle cx="12" cy="12" r="3" />
-                  <path d="m18 22-3-3 3-3" />
-                  <path d="m6 2 3 3-3 3" />
-                </svg>
+                <svg siSwitchCameraIcon class="size-5"></svg>
               </button>
             }
           </div>
@@ -1422,20 +1293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
               "
               aria-label="Toggle flashlight"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                class="size-5"
-              >
-                <path
-                  d="M18 6c0 2-2 2-2 4v10a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V10c0-2-2-2-2-4V2h12z"
-                />
-                <line x1="6" x2="18" y1="6" y2="6" />
-                <line x1="12" x2="12" y1="12" y2="12" />
-              </svg>
+              <svg siFlashlightIcon class="size-5"></svg>
             </button>
           }
         </div>
@@ -3227,233 +3085,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 }]
         }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-class ScCommand {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    /** Current search/filter value */
-    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
-    class = computed(() => cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScCommand, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: ScCommand, isStandalone: true, selector: "div[scCommand]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "command" }, 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.2.1", ngImport: i0, type: ScCommand, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[scCommand]',
-                    template: `
-    <ng-content />
-  `,
-                    host: {
-                        'data-slot': 'command',
-                        '[class]': 'class()',
-                    },
-                    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"] }] } });
-
-class ScCommandEmpty {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('py-6 text-center text-sm', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScCommandEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ScCommandEmpty, isStandalone: true, selector: "div[scCommandEmpty]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "command-empty" }, properties: { "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScCommandEmpty, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'div[scCommandEmpty]',
-                    host: {
-                        'data-slot': 'command-empty',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScCommandGroup {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    heading = input('', ...(ngDevMode ? [{ debugName: "heading" }] : []));
-    class = computed(() => cn('overflow-hidden p-1 text-foreground', '**:data-[slot=command-group-heading]:px-2 **:data-[slot=command-group-heading]:py-1.5 **:data-[slot=command-group-heading]:text-xs **:data-[slot=command-group-heading]:font-medium **:data-[slot=command-group-heading]:text-muted-foreground', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScCommandGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ScCommandGroup, isStandalone: true, selector: "div[scCommandGroup]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "command-group", "role": "group" }, properties: { "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScCommandGroup, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'div[scCommandGroup]',
-                    host: {
-                        'data-slot': 'command-group',
-                        role: 'group',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }] } });
-
-class ScCommandGroupHeading {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('px-2 py-1.5 text-xs font-medium text-muted-foreground', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScCommandGroupHeading, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ScCommandGroupHeading, isStandalone: true, selector: "[scCommandGroupHeading]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "command-group-heading" }, properties: { "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScCommandGroupHeading, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scCommandGroupHeading]',
-                    host: {
-                        'data-slot': 'command-group-heading',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScCommandInput {
-    command = inject(ScCommand);
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    placeholder = input('Search...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    class = computed(() => cn('flex items-center border-b px-3', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    inputClass = computed(() => cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none', 'placeholder:text-muted-foreground', 'disabled:cursor-not-allowed disabled:opacity-50'), ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
-    onInput(event) {
-        const input = event.target;
-        this.command.value.set(input.value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScCommandInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: ScCommandInput, isStandalone: true, selector: "div[scCommandInput]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "command-input" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    <svg
-      siSearchIcon
-      class="mr-2 size-4 shrink-0 opacity-50"
-      aria-hidden="true"
-    ></svg>
-    <input
-      type="text"
-      [class]="inputClass()"
-      [placeholder]="placeholder()"
-      [value]="command.value()"
-      (input)="onInput($event)"
-    />
-  `, isInline: true, dependencies: [{ kind: "component", type: SiSearchIcon, selector: "svg[siSearchIcon]", inputs: ["ariaHidden", "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.2.1", ngImport: i0, type: ScCommandInput, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[scCommandInput]',
-                    imports: [SiSearchIcon],
-                    template: `
-    <svg
-      siSearchIcon
-      class="mr-2 size-4 shrink-0 opacity-50"
-      aria-hidden="true"
-    ></svg>
-    <input
-      type="text"
-      [class]="inputClass()"
-      [placeholder]="placeholder()"
-      [value]="command.value()"
-      (input)="onInput($event)"
-    />
-  `,
-                    host: {
-                        'data-slot': 'command-input',
-                        '[class]': 'class()',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
-
-class ScCommandItem {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    select = output();
-    option = inject(Option);
-    elementRef = inject(ElementRef);
-    constructor() {
-        effect(() => {
-            if (this.option.active()) {
-                this.elementRef.nativeElement.scrollIntoView({ block: 'nearest' });
-            }
-        });
-    }
-    class = computed(() => cn('relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none', 'data-disabled:pointer-events-none data-disabled:opacity-50', 'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', 'hover:bg-accent hover:text-accent-foreground', '[&>svg]:size-4 [&>svg]:shrink-0', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    onClick() {
-        if (!this.disabled()) {
-            this.select.emit();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScCommandItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ScCommandItem, isStandalone: true, selector: "div[scCommandItem]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, host: { attributes: { "data-slot": "command-item" }, listeners: { "click": "onClick()" }, properties: { "attr.data-disabled": "disabled() || null", "class": "class()" } }, hostDirectives: [{ directive: i1.Option, inputs: ["value", "value", "label", "label"] }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScCommandItem, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'div[scCommandItem]',
-                    hostDirectives: [
-                        {
-                            directive: Option,
-                            inputs: ['value', 'label'],
-                        },
-                    ],
-                    host: {
-                        'data-slot': 'command-item',
-                        '[attr.data-disabled]': 'disabled() || null',
-                        '[class]': 'class()',
-                        '(click)': 'onClick()',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
-
-class ScCommandList {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('max-h-[300px] overflow-y-auto overflow-x-hidden', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScCommandList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ScCommandList, isStandalone: true, selector: "div[scCommandList]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "command-list" }, properties: { "class": "class()" } }, hostDirectives: [{ directive: i1.Listbox }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScCommandList, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'div[scCommandList]',
-                    hostDirectives: [Listbox],
-                    host: {
-                        'data-slot': 'command-list',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScCommandSeparator {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('-mx-1 h-px bg-border', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScCommandSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ScCommandSeparator, isStandalone: true, selector: "[scCommandSeparator]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "command-separator", "role": "separator" }, properties: { "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScCommandSeparator, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scCommandSeparator]',
-                    host: {
-                        'data-slot': 'command-separator',
-                        role: 'separator',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScCommandShortcut {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('ml-auto text-xs tracking-widest text-muted-foreground', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScCommandShortcut, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ScCommandShortcut, isStandalone: true, selector: "[scCommandShortcut]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "command-shortcut" }, properties: { "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScCommandShortcut, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scCommandShortcut]',
-                    host: {
-                        'data-slot': 'command-shortcut',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
 const DEFAULT_CONFETTI_OPTIONS = {
     particleCount: 100,
     spread: 70,
@@ -3651,427 +3282,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { canvasRef: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], complete: [{ type: i0.Output, args: ["complete"] }] } });
 
-class ScContextMenuContent {
-    contextMenu = inject(ScContextMenu);
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    templateRef;
-    class = computed(() => cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md', 'animate-in fade-in-0 zoom-in-95', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    onKeydown(event) {
-        if (event.key === 'Escape') {
-            this.contextMenu.closeMenu();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScContextMenuContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: ScContextMenuContent, isStandalone: true, selector: "sc-context-menu-content", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: `
-    <ng-template #contentTemplate>
-      <div [class]="class()" role="menu" (keydown)="onKeydown($event)">
-        <ng-content />
-      </div>
-    </ng-template>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScContextMenuContent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sc-context-menu-content',
-                    template: `
-    <ng-template #contentTemplate>
-      <div [class]="class()" role="menu" (keydown)="onKeydown($event)">
-        <ng-content />
-      </div>
-    </ng-template>
-  `,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], templateRef: [{
-                type: ViewChild,
-                args: ['contentTemplate', { static: true }]
-            }] } });
-
-class ScContextMenu {
-    overlay = inject(Overlay);
-    viewContainerRef = inject(ViewContainerRef);
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    /** Whether the context menu is open */
-    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
-    /** Position where the context menu should appear */
-    position = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "position" }] : []));
-    overlayRef = null;
-    contentChild = contentChild(ScContextMenuContent, ...(ngDevMode ? [{ debugName: "contentChild" }] : []));
-    class = computed(() => cn('relative', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    openAt(x, y, template) {
-        this.closeMenu();
-        this.position.set({ x, y });
-        this.overlayRef = this.overlay.create({
-            positionStrategy: this.overlay
-                .position()
-                .flexibleConnectedTo({ x, y })
-                .withPositions([
-                {
-                    originX: 'start',
-                    originY: 'bottom',
-                    overlayX: 'start',
-                    overlayY: 'top',
-                },
-                {
-                    originX: 'start',
-                    originY: 'top',
-                    overlayX: 'start',
-                    overlayY: 'bottom',
-                },
-                {
-                    originX: 'end',
-                    originY: 'bottom',
-                    overlayX: 'end',
-                    overlayY: 'top',
-                },
-                {
-                    originX: 'end',
-                    originY: 'top',
-                    overlayX: 'end',
-                    overlayY: 'bottom',
-                },
-            ]),
-            scrollStrategy: this.overlay.scrollStrategies.close(),
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-        });
-        const portal = new TemplatePortal(template, this.viewContainerRef);
-        this.overlayRef.attach(portal);
-        this.open.set(true);
-        this.overlayRef.backdropClick().subscribe(() => this.closeMenu());
-        this.overlayRef.keydownEvents().subscribe((event) => {
-            if (event.key === 'Escape') {
-                this.closeMenu();
-            }
-        });
-    }
-    closeMenu() {
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-            this.overlayRef = null;
-        }
-        this.open.set(false);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScContextMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: ScContextMenu, isStandalone: true, selector: "div[scContextMenu]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "context-menu" }, properties: { "class": "class()" } }, queries: [{ propertyName: "contentChild", first: true, predicate: ScContextMenuContent, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <ng-content />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScContextMenu, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[scContextMenu]',
-                    template: `
-    <ng-content />
-  `,
-                    host: {
-                        'data-slot': 'context-menu',
-                        '[class]': 'class()',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], contentChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ScContextMenuContent), { isSignal: true }] }] } });
-
-class ScContextMenuItem {
-    contextMenu = inject(ScContextMenu);
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    closeOnSelect = input(true, ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : []));
-    select = output();
-    class = computed(() => cn('relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none', 'focus:bg-accent focus:text-accent-foreground', 'data-disabled:pointer-events-none data-disabled:opacity-50', '[&>svg]:size-4 [&>svg]:shrink-0', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    onClick() {
-        if (this.disabled())
-            return;
-        this.select.emit();
-        if (this.closeOnSelect()) {
-            this.contextMenu.closeMenu();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScContextMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ScContextMenuItem, isStandalone: true, selector: "[scContextMenuItem]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, host: { attributes: { "data-slot": "context-menu-item", "role": "menuitem", "tabindex": "-1" }, listeners: { "click": "onClick()", "keydown.enter": "onClick()", "keydown.space": "onClick()" }, properties: { "class": "class()", "attr.data-disabled": "disabled() || null" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScContextMenuItem, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scContextMenuItem]',
-                    host: {
-                        'data-slot': 'context-menu-item',
-                        role: 'menuitem',
-                        tabindex: '-1',
-                        '[class]': 'class()',
-                        '[attr.data-disabled]': 'disabled() || null',
-                        '(click)': 'onClick()',
-                        '(keydown.enter)': 'onClick()',
-                        '(keydown.space)': 'onClick()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
-
-class ScContextMenuLabel {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    inset = input(false, ...(ngDevMode ? [{ debugName: "inset" }] : []));
-    class = computed(() => cn('px-2 py-1.5 text-sm font-semibold', this.inset() && 'pl-8', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScContextMenuLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ScContextMenuLabel, isStandalone: true, selector: "[scContextMenuLabel]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "context-menu-label" }, properties: { "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScContextMenuLabel, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scContextMenuLabel]',
-                    host: {
-                        'data-slot': 'context-menu-label',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] } });
-
-class ScContextMenuSeparator {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('-mx-1 my-1 h-px bg-border', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScContextMenuSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ScContextMenuSeparator, isStandalone: true, selector: "[scContextMenuSeparator]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "context-menu-separator", "role": "separator" }, properties: { "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScContextMenuSeparator, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scContextMenuSeparator]',
-                    host: {
-                        'data-slot': 'context-menu-separator',
-                        role: 'separator',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScContextMenuShortcut {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('ml-auto text-xs tracking-widest text-muted-foreground', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScContextMenuShortcut, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ScContextMenuShortcut, isStandalone: true, selector: "[scContextMenuShortcut]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "context-menu-shortcut" }, properties: { "class": "class()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScContextMenuShortcut, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scContextMenuShortcut]',
-                    host: {
-                        'data-slot': 'context-menu-shortcut',
-                        '[class]': 'class()',
-                    },
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-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);
-    }
-    hide() {
-        this.open.set(false);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScContextMenuSub, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: ScContextMenuSub, isStandalone: true, selector: "div[scContextMenuSub]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "context-menu-sub" }, 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.2.1", ngImport: i0, type: ScContextMenuSub, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[scContextMenuSub]',
-                    template: `
-    <ng-content />
-  `,
-                    host: {
-                        'data-slot': 'context-menu-sub',
-                        '[class]': 'class()',
-                    },
-                    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);
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    positions = positions;
-    class = computed(() => cn('', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    contentClass = computed(() => cn('z-50 min-w-32 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.2.1", ngImport: i0, type: ScContextMenuSubContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", 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$1.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.2.1", 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" }] : []));
-    onMouseEnter() {
-        this.cancelHide();
-        this.showTimeout = setTimeout(() => {
-            this.submenu.show();
-        }, 100);
-    }
-    onMouseLeave() {
-        this.cancelShow();
-        this.hideTimeout = setTimeout(() => {
-            this.submenu.hide();
-        }, 100);
-    }
-    cancelShow() {
-        if (this.showTimeout) {
-            clearTimeout(this.showTimeout);
-            this.showTimeout = null;
-        }
-    }
-    cancelHide() {
-        if (this.hideTimeout) {
-            clearTimeout(this.hideTimeout);
-            this.hideTimeout = null;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScContextMenuSubTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: ScContextMenuSubTrigger, isStandalone: true, selector: "div[scContextMenuSubTrigger]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "context-menu-sub-trigger", "role": "menuitem", "aria-haspopup": "menu" }, listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "attr.aria-expanded": "submenu.open()", "attr.data-state": "submenu.open() ? \"open\" : \"closed\"", "class": "class()" } }, hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }], ngImport: i0, template: `
-    <ng-content />
-    <svg siChevronRightIcon class="ml-auto size-4" aria-hidden="true"></svg>
-  `, isInline: true, dependencies: [{ kind: "component", type: SiChevronRightIcon, selector: "svg[siChevronRightIcon]", inputs: ["ariaHidden", "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.2.1", ngImport: i0, type: ScContextMenuSubTrigger, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[scContextMenuSubTrigger]',
-                    imports: [SiChevronRightIcon],
-                    hostDirectives: [CdkOverlayOrigin],
-                    template: `
-    <ng-content />
-    <svg siChevronRightIcon class="ml-auto size-4" aria-hidden="true"></svg>
-  `,
-                    host: {
-                        'data-slot': 'context-menu-sub-trigger',
-                        role: 'menuitem',
-                        'aria-haspopup': 'menu',
-                        '[attr.aria-expanded]': 'submenu.open()',
-                        '[attr.data-state]': 'submenu.open() ? "open" : "closed"',
-                        '[class]': 'class()',
-                        '(mouseenter)': 'onMouseEnter()',
-                        '(mouseleave)': 'onMouseLeave()',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: () => [], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class ScContextMenuTrigger {
-    contextMenu = inject(ScContextMenu);
-    contentChild = contentChild(ScContextMenuContent, ...(ngDevMode ? [{ debugName: "contentChild" }] : []));
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    onContextMenu(event) {
-        event.preventDefault();
-        const content = this.contentChild();
-        if (content?.templateRef) {
-            this.contextMenu.openAt(event.clientX, event.clientY, content.templateRef);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScContextMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.1", type: ScContextMenuTrigger, isStandalone: true, selector: "[scContextMenuTrigger]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "context-menu-trigger" }, listeners: { "contextmenu": "onContextMenu($event)" }, properties: { "class": "class()" } }, queries: [{ propertyName: "contentChild", first: true, predicate: ScContextMenuContent, descendants: true, isSignal: true }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScContextMenuTrigger, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scContextMenuTrigger]',
-                    host: {
-                        'data-slot': 'context-menu-trigger',
-                        '[class]': 'class()',
-                        '(contextmenu)': 'onContextMenu($event)',
-                    },
-                }]
-        }], propDecorators: { contentChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ScContextMenuContent), { isSignal: true }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
 class ScCountdown {
     destroyRef = inject(DestroyRef);
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
@@ -5145,29 +4355,143 @@ class ScDateRangePicker {
             <div class="p-3">
               @if (showTwoMonths()) {
                 <div class="flex gap-4">
-                  <sc-calendar
+                  <div
+                    scCalendar
                     mode="range"
                     [(value)]="value"
                     [minDate]="minDate()"
                     [maxDate]="maxDate()"
                     [disabled]="disabledDates()"
-                  />
-                  <sc-calendar
+                    #cal1="scCalendar"
+                  >
+                    <div scCalendarHeader>
+                      <button scCalendarPrevious>
+                        <svg siChevronLeftIcon class="size-4"></svg>
+                        <span class="sr-only">
+                          @switch (cal1.viewMode()) {
+                            @case ('day') {
+                              Go to previous month
+                            }
+                            @case ('month') {
+                              Go to previous year
+                            }
+                            @case ('year') {
+                              Go to previous decade
+                            }
+                          }
+                        </span>
+                      </button>
+                      <button scCalendarHeading>{{ cal1.heading() }}</button>
+                      <button scCalendarNext>
+                        <svg siChevronRightIcon class="size-4"></svg>
+                        <span class="sr-only">
+                          @switch (cal1.viewMode()) {
+                            @case ('day') {
+                              Go to next month
+                            }
+                            @case ('month') {
+                              Go to next year
+                            }
+                            @case ('year') {
+                              Go to next decade
+                            }
+                          }
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    scCalendar
                     mode="range"
                     [(value)]="value"
                     [minDate]="minDate()"
                     [maxDate]="maxDate()"
                     [disabled]="disabledDates()"
-                  />
+                    #cal2="scCalendar"
+                  >
+                    <div scCalendarHeader>
+                      <button scCalendarPrevious>
+                        <svg siChevronLeftIcon class="size-4"></svg>
+                        <span class="sr-only">
+                          @switch (cal2.viewMode()) {
+                            @case ('day') {
+                              Go to previous month
+                            }
+                            @case ('month') {
+                              Go to previous year
+                            }
+                            @case ('year') {
+                              Go to previous decade
+                            }
+                          }
+                        </span>
+                      </button>
+                      <button scCalendarHeading>{{ cal2.heading() }}</button>
+                      <button scCalendarNext>
+                        <svg siChevronRightIcon class="size-4"></svg>
+                        <span class="sr-only">
+                          @switch (cal2.viewMode()) {
+                            @case ('day') {
+                              Go to next month
+                            }
+                            @case ('month') {
+                              Go to next year
+                            }
+                            @case ('year') {
+                              Go to next decade
+                            }
+                          }
+                        </span>
+                      </button>
+                    </div>
+                  </div>
                 </div>
               } @else {
-                <sc-calendar
+                <div
+                  scCalendar
                   mode="range"
                   [(value)]="value"
                   [minDate]="minDate()"
                   [maxDate]="maxDate()"
                   [disabled]="disabledDates()"
-                />
+                  #cal="scCalendar"
+                >
+                  <div scCalendarHeader>
+                    <button scCalendarPrevious>
+                      <svg siChevronLeftIcon class="size-4"></svg>
+                      <span class="sr-only">
+                        @switch (cal.viewMode()) {
+                          @case ('day') {
+                            Go to previous month
+                          }
+                          @case ('month') {
+                            Go to previous year
+                          }
+                          @case ('year') {
+                            Go to previous decade
+                          }
+                        }
+                      </span>
+                    </button>
+                    <button scCalendarHeading>{{ cal.heading() }}</button>
+                    <button scCalendarNext>
+                      <svg siChevronRightIcon class="size-4"></svg>
+                      <span class="sr-only">
+                        @switch (cal.viewMode()) {
+                          @case ('day') {
+                            Go to next month
+                          }
+                          @case ('month') {
+                            Go to next year
+                          }
+                          @case ('year') {
+                            Go to next decade
+                          }
+                        }
+                      </span>
+                    </button>
+                  </div>
+                </div>
               }
 
               <!-- Footer -->
@@ -5209,7 +4533,7 @@ class ScDateRangePicker {
     @if (dropdownOpen()) {
       <div class="fixed inset-0 z-40" (click)="closeDropdown()"></div>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: ScCalendar, selector: "sc-calendar", inputs: ["class", "mode", "disabled", "minDate", "maxDate", "value"], outputs: ["valueChange"] }, { kind: "component", type: SiCalendarIcon, selector: "svg[siCalendarIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiXIcon, selector: "svg[siXIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: ScCalendar, selector: "div[scCalendar]", inputs: ["class", "mode", "disabled", "minDate", "maxDate", "value", "ariaLabel", "dayViewLabel", "monthViewLabel", "yearViewLabel", "startOfWeek", "weekDays", "monthLabels", "viewMode"], outputs: ["valueChange"], exportAs: ["scCalendar"] }, { kind: "component", type: ScCalendarHeader, selector: "div[scCalendarHeader]", inputs: ["class"] }, { kind: "directive", type: ScCalendarHeading, selector: "button[scCalendarHeading]", inputs: ["class", "variant", "size"] }, { kind: "directive", type: ScCalendarNext, selector: "button[scCalendarNext]", inputs: ["class", "variant", "size"] }, { kind: "directive", type: ScCalendarPrevious, selector: "button[scCalendarPrevious]", inputs: ["class", "variant", "size"] }, { kind: "component", type: SiCalendarIcon, selector: "svg[siCalendarIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiChevronLeftIcon, selector: "svg[siChevronLeftIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiChevronRightIcon, selector: "svg[siChevronRightIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiXIcon, selector: "svg[siXIcon]", inputs: ["ariaHidden", "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.2.1", ngImport: i0, type: ScDateRangePicker, decorators: [{
             type: Component,
@@ -5265,29 +4589,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             <div class="p-3">
               @if (showTwoMonths()) {
                 <div class="flex gap-4">
-                  <sc-calendar
+                  <div
+                    scCalendar
                     mode="range"
                     [(value)]="value"
                     [minDate]="minDate()"
                     [maxDate]="maxDate()"
                     [disabled]="disabledDates()"
-                  />
-                  <sc-calendar
+                    #cal1="scCalendar"
+                  >
+                    <div scCalendarHeader>
+                      <button scCalendarPrevious>
+                        <svg siChevronLeftIcon class="size-4"></svg>
+                        <span class="sr-only">
+                          @switch (cal1.viewMode()) {
+                            @case ('day') {
+                              Go to previous month
+                            }
+                            @case ('month') {
+                              Go to previous year
+                            }
+                            @case ('year') {
+                              Go to previous decade
+                            }
+                          }
+                        </span>
+                      </button>
+                      <button scCalendarHeading>{{ cal1.heading() }}</button>
+                      <button scCalendarNext>
+                        <svg siChevronRightIcon class="size-4"></svg>
+                        <span class="sr-only">
+                          @switch (cal1.viewMode()) {
+                            @case ('day') {
+                              Go to next month
+                            }
+                            @case ('month') {
+                              Go to next year
+                            }
+                            @case ('year') {
+                              Go to next decade
+                            }
+                          }
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    scCalendar
                     mode="range"
                     [(value)]="value"
                     [minDate]="minDate()"
                     [maxDate]="maxDate()"
                     [disabled]="disabledDates()"
-                  />
+                    #cal2="scCalendar"
+                  >
+                    <div scCalendarHeader>
+                      <button scCalendarPrevious>
+                        <svg siChevronLeftIcon class="size-4"></svg>
+                        <span class="sr-only">
+                          @switch (cal2.viewMode()) {
+                            @case ('day') {
+                              Go to previous month
+                            }
+                            @case ('month') {
+                              Go to previous year
+                            }
+                            @case ('year') {
+                              Go to previous decade
+                            }
+                          }
+                        </span>
+                      </button>
+                      <button scCalendarHeading>{{ cal2.heading() }}</button>
+                      <button scCalendarNext>
+                        <svg siChevronRightIcon class="size-4"></svg>
+                        <span class="sr-only">
+                          @switch (cal2.viewMode()) {
+                            @case ('day') {
+                              Go to next month
+                            }
+                            @case ('month') {
+                              Go to next year
+                            }
+                            @case ('year') {
+                              Go to next decade
+                            }
+                          }
+                        </span>
+                      </button>
+                    </div>
+                  </div>
                 </div>
               } @else {
-                <sc-calendar
+                <div
+                  scCalendar
                   mode="range"
                   [(value)]="value"
                   [minDate]="minDate()"
                   [maxDate]="maxDate()"
                   [disabled]="disabledDates()"
-                />
+                  #cal="scCalendar"
+                >
+                  <div scCalendarHeader>
+                    <button scCalendarPrevious>
+                      <svg siChevronLeftIcon class="size-4"></svg>
+                      <span class="sr-only">
+                        @switch (cal.viewMode()) {
+                          @case ('day') {
+                            Go to previous month
+                          }
+                          @case ('month') {
+                            Go to previous year
+                          }
+                          @case ('year') {
+                            Go to previous decade
+                          }
+                        }
+                      </span>
+                    </button>
+                    <button scCalendarHeading>{{ cal.heading() }}</button>
+                    <button scCalendarNext>
+                      <svg siChevronRightIcon class="size-4"></svg>
+                      <span class="sr-only">
+                        @switch (cal.viewMode()) {
+                          @case ('day') {
+                            Go to next month
+                          }
+                          @case ('month') {
+                            Go to next year
+                          }
+                          @case ('year') {
+                            Go to next decade
+                          }
+                        }
+                      </span>
+                    </button>
+                  </div>
+                </div>
               }
 
               <!-- Footer -->
@@ -5333,7 +4771,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     host: {
                         'data-slot': 'date-range-picker',
                     },
-                    imports: [ScCalendar, SiCalendarIcon, SiXIcon],
+                    imports: [
+                        ScCalendar,
+                        ScCalendarHeader,
+                        ScCalendarHeading,
+                        ScCalendarNext,
+                        ScCalendarPrevious,
+                        SiCalendarIcon,
+                        SiChevronLeftIcon,
+                        SiChevronRightIcon,
+                        SiXIcon,
+                    ],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
@@ -8767,40 +8215,21 @@ class ScImageCropperZoomSlider {
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     class = computed(() => cn('flex items-center gap-2', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     zoomPercentage = computed(() => `${(this.cropper.zoom() * 100).toFixed(0)}%`, ...(ngDevMode ? [{ debugName: "zoomPercentage" }] : []));
-    sliderEl = viewChild('sliderEl', ...(ngDevMode ? [{ debugName: "sliderEl" }] : []));
-    constructor() {
-        effect(() => {
-            const zoom = this.cropper.zoom();
-            const el = this.sliderEl()?.nativeElement;
-            if (!el)
-                return;
-            el.value = String(zoom);
-            const min = parseFloat(el.min) || 0;
-            const max = parseFloat(el.max) || 100;
-            const percent = ((zoom - min) / (max - min)) * 100;
-            el.style.setProperty('--fill-percent', `${percent}%`);
-        });
-    }
-    onInput(event) {
-        const value = parseFloat(event.target.value);
-        this.cropper.setZoom(value);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScImageCropperZoomSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: ScImageCropperZoomSlider, isStandalone: true, selector: "[scImageCropperZoomSlider]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "image-cropper-zoom-slider" }, properties: { "class": "class()" } }, viewQueries: [{ propertyName: "sliderEl", first: true, predicate: ["sliderEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: ScImageCropperZoomSlider, isStandalone: true, selector: "[scImageCropperZoomSlider]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "image-cropper-zoom-slider" }, properties: { "class": "class()" } }, ngImport: i0, template: `
     <input
-      #sliderEl
       scSlider
       aria-label="Zoom level"
       [min]="0.1"
       [max]="3"
       [step]="0.1"
       [value]="cropper.zoom()"
-      (input)="onInput($event)"
+      (valueChange)="cropper.setZoom($event)"
     />
     <span class="text-muted-foreground min-w-[50px] text-center text-sm">
       {{ zoomPercentage() }}
     </span>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["id", "class", "aria-describedby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["value", "min", "max", "step", "id", "class", "aria-describedby"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScImageCropperZoomSlider, decorators: [{
             type: Component,
@@ -8809,14 +8238,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     imports: [ScSlider],
                     template: `
     <input
-      #sliderEl
       scSlider
       aria-label="Zoom level"
       [min]="0.1"
       [max]="3"
       [step]="0.1"
       [value]="cropper.zoom()"
-      (input)="onInput($event)"
+      (valueChange)="cropper.setZoom($event)"
     />
     <span class="text-muted-foreground min-w-[50px] text-center text-sm">
       {{ zoomPercentage() }}
@@ -8829,7 +8257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], sliderEl: [{ type: i0.ViewChild, args: ['sliderEl', { isSignal: true }] }] } });
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class ScImageCropperZoomIn {
     cropper = inject(SC_IMAGE_CROPPER);
@@ -9936,20 +9364,7 @@ class ScKanbanColumn {
             class="text-muted-foreground hover:text-foreground hover:bg-muted/50 flex w-full items-center justify-center gap-1 border-t p-2 text-sm transition-colors"
             (click)="startAddingCard()"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M5 12h14" />
-              <path d="M12 5v14" />
-            </svg>
+            <svg siPlusIcon class="size-3.5"></svg>
             Add card
           </button>
         }
@@ -10111,20 +9526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             class="text-muted-foreground hover:text-foreground hover:bg-muted/50 flex w-full items-center justify-center gap-1 border-t p-2 text-sm transition-colors"
             (click)="startAddingCard()"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M5 12h14" />
-              <path d="M12 5v14" />
-            </svg>
+            <svg siPlusIcon class="size-3.5"></svg>
             Add card
           </button>
         }
@@ -11740,7 +11142,7 @@ class ScNavbar {
     overlayOrigin = inject(CdkOverlayOrigin);
     class = computed(() => cn('flex items-center justify-between', 'w-full px-4 py-3 md:px-6', 'bg-background border-b border-border', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: ScNavbar, isStandalone: true, selector: "nav[scNavbar]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "navbar" }, properties: { "class": "class()" } }, hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: ScNavbar, isStandalone: true, selector: "nav[scNavbar]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "navbar" }, properties: { "class": "class()" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -15743,22 +15145,7 @@ class ScPdfViewer {
               <div
                 class="bg-destructive/10 flex h-16 w-16 items-center justify-center rounded-full"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="32"
-                  height="32"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="text-destructive"
-                >
-                  <circle cx="12" cy="12" r="10" />
-                  <path d="m15 9-6 6" />
-                  <path d="m9 9 6 6" />
-                </svg>
+                <svg siCircleXIcon class="text-destructive size-8"></svg>
               </div>
               <p class="text-foreground text-sm font-medium">
                 Failed to load PDF
@@ -15813,26 +15200,7 @@ class ScPdfViewer {
               <div
                 class="bg-muted flex h-16 w-16 items-center justify-center rounded-full"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="32"
-                  height="32"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="text-muted-foreground"
-                >
-                  <path
-                    d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
-                  />
-                  <polyline points="14 2 14 8 20 8" />
-                  <line x1="16" x2="8" y1="13" y2="13" />
-                  <line x1="16" x2="8" y1="17" y2="17" />
-                  <line x1="10" x2="8" y1="9" y2="9" />
-                </svg>
+                <svg siFileTextIcon class="text-muted-foreground size-8"></svg>
               </div>
               <p class="text-muted-foreground text-sm">No PDF selected</p>
             </div>
@@ -15840,11 +15208,11 @@ class ScPdfViewer {
         }
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block}.fullscreen{position:fixed!important;inset:0!important;z-index:50!important;width:100vw!important;height:100vh!important}\n"], dependencies: [{ kind: "component", type: ScPdfViewerToolbar, selector: "sc-pdf-viewer-toolbar", inputs: ["currentPage", "totalPages", "zoom", "isFullscreen", "toolbarConfig", "class"], outputs: ["prevPage", "nextPage", "goToPage", "zoomIn", "zoomOut", "zoomChange", "rotateLeft", "rotateRight", "download", "print", "toggleFullscreen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [":host{display:block}.fullscreen{position:fixed!important;inset:0!important;z-index:50!important;width:100vw!important;height:100vh!important}\n"], dependencies: [{ kind: "component", type: ScPdfViewerToolbar, selector: "sc-pdf-viewer-toolbar", inputs: ["currentPage", "totalPages", "zoom", "isFullscreen", "toolbarConfig", "class"], outputs: ["prevPage", "nextPage", "goToPage", "zoomIn", "zoomOut", "zoomChange", "rotateLeft", "rotateRight", "download", "print", "toggleFullscreen"] }, { kind: "component", type: SiCircleXIcon, selector: "svg[siCircleXIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiFileTextIcon, selector: "svg[siFileTextIcon]", inputs: ["ariaHidden", "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.2.1", ngImport: i0, type: ScPdfViewer, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-pdf-viewer', imports: [ScPdfViewerToolbar], template: `
+            args: [{ selector: 'sc-pdf-viewer', imports: [ScPdfViewerToolbar, SiCircleXIcon, SiFileTextIcon], template: `
     <div
       #container
       [class]="containerClass()"
@@ -15897,22 +15265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
               <div
                 class="bg-destructive/10 flex h-16 w-16 items-center justify-center rounded-full"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="32"
-                  height="32"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="text-destructive"
-                >
-                  <circle cx="12" cy="12" r="10" />
-                  <path d="m15 9-6 6" />
-                  <path d="m9 9 6 6" />
-                </svg>
+                <svg siCircleXIcon class="text-destructive size-8"></svg>
               </div>
               <p class="text-foreground text-sm font-medium">
                 Failed to load PDF
@@ -15967,26 +15320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
               <div
                 class="bg-muted flex h-16 w-16 items-center justify-center rounded-full"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="32"
-                  height="32"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="text-muted-foreground"
-                >
-                  <path
-                    d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
-                  />
-                  <polyline points="14 2 14 8 20 8" />
-                  <line x1="16" x2="8" y1="13" y2="13" />
-                  <line x1="16" x2="8" y1="17" y2="17" />
-                  <line x1="10" x2="8" y1="9" y2="9" />
-                </svg>
+                <svg siFileTextIcon class="text-muted-foreground size-8"></svg>
               </div>
               <p class="text-muted-foreground text-sm">No PDF selected</p>
             </div>
@@ -17120,29 +16454,18 @@ class ScQrCodeDownload {
       />
       @if (showDownload()) {
         <button type="button" (click)="download()" [class]="buttonClass()">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            class="size-4"
-          >
-            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-            <polyline points="7 10 12 15 17 10" />
-            <line x1="12" x2="12" y1="15" y2="3" />
-          </svg>
+          <svg siDownloadIcon class="size-4"></svg>
           {{ downloadLabel() }}
         </button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ScQrCode, selector: "sc-qr-code", inputs: ["value", "size", "errorCorrectionLevel", "foregroundColor", "backgroundColor", "quietZone", "logo", "logoSize", "ariaLabel", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: ScQrCode, selector: "sc-qr-code", inputs: ["value", "size", "errorCorrectionLevel", "foregroundColor", "backgroundColor", "quietZone", "logo", "logoSize", "ariaLabel", "class"] }, { kind: "component", type: SiDownloadIcon, selector: "svg[siDownloadIcon]", inputs: ["ariaHidden", "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.2.1", ngImport: i0, type: ScQrCodeDownload, decorators: [{
             type: Component,
             args: [{
                     selector: 'sc-qr-code-download',
-                    imports: [ScQrCode],
+                    imports: [ScQrCode, SiDownloadIcon],
                     template: `
     <div [class]="containerClass()">
       <sc-qr-code
@@ -17157,18 +16480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       />
       @if (showDownload()) {
         <button type="button" (click)="download()" [class]="buttonClass()">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            class="size-4"
-          >
-            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-            <polyline points="7 10 12 15 17 10" />
-            <line x1="12" x2="12" y1="15" y2="3" />
-          </svg>
+          <svg siDownloadIcon class="size-4"></svg>
           {{ downloadLabel() }}
         </button>
       }
@@ -21450,7 +20762,7 @@ class ScTree {
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     class = computed(() => cn('flex flex-col gap-1', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScTree, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ScTree, isStandalone: true, selector: "ul[scTree]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "tree" }, properties: { "class": "class()" } }, exportAs: ["scTree"], hostDirectives: [{ directive: i1$2.Tree }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ScTree, isStandalone: true, selector: "ul[scTree]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "tree" }, properties: { "class": "class()" } }, exportAs: ["scTree"], hostDirectives: [{ directive: i1$1.Tree }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScTree, decorators: [{
             type: Directive,
@@ -21518,7 +20830,7 @@ class ScTreeItem {
     hasChildren = computed(() => !!this.groupContent(), ...(ngDevMode ? [{ debugName: "hasChildren" }] : []));
     class = computed(() => cn('flex flex-col', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScTreeItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: ScTreeItem, isStandalone: true, selector: "li[scTreeItem]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "tree-item" }, properties: { "class": "class()", "attr.data-state": "treeItem.expanded() ? \"open\" : \"closed\"" } }, providers: [{ provide: SC_TREE_ITEM, useExisting: ScTreeItem }], queries: [{ propertyName: "groupContent", first: true, predicate: ScTreeItemGroup, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$2.TreeItem, inputs: ["value", "value", "parent", "parent", "label", "label", "disabled", "disabled", "expanded", "expanded"] }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: ScTreeItem, isStandalone: true, selector: "li[scTreeItem]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "tree-item" }, properties: { "class": "class()", "attr.data-state": "treeItem.expanded() ? \"open\" : \"closed\"" } }, providers: [{ provide: SC_TREE_ITEM, useExisting: ScTreeItem }], queries: [{ propertyName: "groupContent", first: true, predicate: ScTreeItemGroup, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.TreeItem, inputs: ["value", "value", "parent", "parent", "label", "label", "disabled", "disabled", "expanded", "expanded"] }], ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -21975,10 +21287,6 @@ class ScVideoPlayerProgress {
     player = inject(SC_VIDEO_PLAYER);
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     class = computed(() => cn('group relative mb-2 block h-3', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    onSeek(event) {
-        const value = +event.target.value;
-        this.player.seek(value);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScVideoPlayerProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: ScVideoPlayerProgress, isStandalone: true, selector: "div[scVideoPlayerProgress]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()", "style.--primary": "\"oklch(1 0 0)\"", "style.--muted": "\"oklch(1 0 0 / 0.3)\"", "style.--ring": "\"oklch(1 0 0 / 0.5)\"" } }, ngImport: i0, template: `
     <!-- Buffered -->
@@ -21991,14 +21299,12 @@ class ScVideoPlayerProgress {
       scSlider
       class="absolute inset-0 h-full [&::-moz-range-progress]:transition-[height] group-hover:[&::-moz-range-progress]:h-1.5 [&::-moz-range-track]:transition-[height] group-hover:[&::-moz-range-track]:h-1.5 [&::-webkit-slider-runnable-track]:transition-[height] group-hover:[&::-webkit-slider-runnable-track]:h-1.5"
       aria-label="Video progress"
-      min="0"
-      max="100"
-      step="0.1"
+      [max]="100"
+      [step]="0.1"
       [value]="player.progressPercent()"
-      [style.--fill-percent]="player.progressPercent() + '%'"
-      (input)="onSeek($event)"
+      (valueChange)="player.seek($event)"
     />
-  `, isInline: true, dependencies: [{ kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["id", "class", "aria-describedby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["value", "min", "max", "step", "id", "class", "aria-describedby"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScVideoPlayerProgress, decorators: [{
             type: Component,
@@ -22016,12 +21322,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       scSlider
       class="absolute inset-0 h-full [&::-moz-range-progress]:transition-[height] group-hover:[&::-moz-range-progress]:h-1.5 [&::-moz-range-track]:transition-[height] group-hover:[&::-moz-range-track]:h-1.5 [&::-webkit-slider-runnable-track]:transition-[height] group-hover:[&::-webkit-slider-runnable-track]:h-1.5"
       aria-label="Video progress"
-      min="0"
-      max="100"
-      step="0.1"
+      [max]="100"
+      [step]="0.1"
       [value]="player.progressPercent()"
-      [style.--fill-percent]="player.progressPercent() + '%'"
-      (input)="onSeek($event)"
+      (valueChange)="player.seek($event)"
     />
   `,
                     host: {
@@ -22040,10 +21344,6 @@ class ScVideoPlayerVolume {
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     class = computed(() => cn('group/volume flex items-center gap-1', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     buttonClass = computed(() => cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'text-foreground', '[&_svg]:size-5'), ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
-    onVolumeInput(event) {
-        const value = +event.target.value;
-        this.player.setVolume(value);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScVideoPlayerVolume, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: ScVideoPlayerVolume, isStandalone: true, selector: "div[scVideoPlayerVolume]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()", "style.--primary": "\"oklch(1 0 0)\"", "style.--muted": "\"oklch(1 0 0 / 0.3)\"", "style.--ring": "\"oklch(1 0 0 / 0.5)\"" } }, ngImport: i0, template: `
     <button
@@ -22057,15 +21357,13 @@ class ScVideoPlayerVolume {
     <input
       scSlider
       class="h-1 w-0 cursor-pointer opacity-0 transition-all duration-200 group-hover/volume:w-20 group-hover/volume:opacity-100"
-      min="0"
-      max="1"
-      step="0.01"
+      [max]="1"
+      [step]="0.01"
       [value]="player.volume()"
-      [style.--fill-percent]="player.volume() * 100 + '%'"
-      (input)="onVolumeInput($event)"
+      (valueChange)="player.setVolume($event)"
       aria-label="Volume"
     />
-  `, isInline: true, dependencies: [{ kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["id", "class", "aria-describedby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ScSlider, selector: "input[scSlider]", inputs: ["value", "min", "max", "step", "id", "class", "aria-describedby"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScVideoPlayerVolume, decorators: [{
             type: Component,
@@ -22084,12 +21382,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     <input
       scSlider
       class="h-1 w-0 cursor-pointer opacity-0 transition-all duration-200 group-hover/volume:w-20 group-hover/volume:opacity-100"
-      min="0"
-      max="1"
-      step="0.01"
+      [max]="1"
+      [step]="0.01"
       [value]="player.volume()"
-      [style.--fill-percent]="player.volume() * 100 + '%'"
-      (input)="onVolumeInput($event)"
+      (valueChange)="player.setVolume($event)"
       aria-label="Volume"
     />
   `,
@@ -22942,5 +22238,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", 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_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_SIGNATURE_PAD, SC_SORTABLE_ITEM, SC_SORTABLE_LIST, SC_STEPPER, SC_STEPPER_ITEM, SC_TAG_INPUT, SC_TIMEZONE_CONFIG, SC_TREE_ITEM, ScAnimatedCounter, ScAudioPlayer, ScAudioPlayerControls, ScAudioPlayerCover, ScAudioPlayerNext, ScAudioPlayerPlay, ScAudioPlayerPrevious, ScAudioPlayerProgress, ScAudioPlayerRepeat, ScAudioPlayerShuffle, ScAudioPlayerTrackInfo, ScAudioPlayerVolume, ScAutoMarquee, ScBarChart, ScBarcodeScanner, ScBarcodeScannerSimple, ScButtonPattern, ScChartContainer, ScChartLegend, ScChartTooltip, ScColorPicker, ScColorPickerArea, ScColorPickerEyeDropper, ScColorPickerHue, ScColorPickerInput, ScColorPickerPreview, ScColorPickerSwatches, ScCommand, ScCommandEmpty, ScCommandGroup, ScCommandGroupHeading, ScCommandInput, ScCommandItem, ScCommandList, ScCommandSeparator, ScCommandShortcut, ScConfetti, ScContextMenu, ScContextMenuContent, ScContextMenuItem, ScContextMenuLabel, ScContextMenuSeparator, ScContextMenuShortcut, ScContextMenuSub, ScContextMenuSubContent, ScContextMenuSubTrigger, ScContextMenuTrigger, ScCountdown, ScCountdownSimple, ScDataTable, ScDataTableBody, ScDataTableCell, ScDataTableColumnToggle, ScDataTableFilter, ScDataTableHead, ScDataTableHeader, ScDataTablePagination, ScDataTableRow, ScDateRangePicker, ScDiffViewer, ScDock, ScDockBadge, ScDockItem, ScDockItems, ScDonutChart, ScEmojiPicker, ScEmojiPickerTrigger, ScImageAnnotator, ScImageCompare, ScImageCompareAfter, ScImageCompareArea, ScImageCompareBefore, ScImageCompareLabel, ScImageCompareSlider, ScImageCropper, ScImageCropperAspectRatio, ScImageCropperCanvas, ScImageCropperDragRegion, ScImageCropperFileInput, ScImageCropperFlipH, ScImageCropperFlipV, ScImageCropperGrid, ScImageCropperHandle, ScImageCropperImage, ScImageCropperOverlay, ScImageCropperPreview, ScImageCropperReset, ScImageCropperRotateLeft, ScImageCropperRotateRight, ScImageCropperSelection, ScImageCropperZoomIn, ScImageCropperZoomOut, ScImageCropperZoomSlider, 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, ScNativeCheckbox, ScNativeDialog, ScNativeDialogBody, ScNativeDialogClose, ScNativeDialogContent, ScNativeDialogDescription, ScNativeDialogFooter, ScNativeDialogHeader, ScNativeDialogProvider, ScNativeDialogTitle, ScNativeDialogTrigger, ScNavbar, ScNavbarActions, ScNavbarBrand, ScNavbarGroup, ScNavbarMobileLink, ScNavbarMobileMenu, ScNavbarMobilePortal, ScNavbarMobileTrigger, ScNavbarProvider, ScNotificationCenterDirective as ScNotificationCenter, ScNotificationCenterContainer, ScNotificationCenterDirective, ScNotificationGroup, ScNotificationItem, ScNumberField, ScNumberFieldDecrement, ScNumberFieldIncrement, ScNumberFieldInput, ScNumberFieldInputGroup, ScNumberFieldScrubArea, 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, ScSidebarLayout, ScSignaturePad, ScSignaturePadCanvas, ScSignaturePadClearButton, ScSignaturePadColorButton, ScSignaturePadControls, ScSignaturePadToolbar, ScSignaturePadUndoButton, ScSignaturePadWidthButton, ScSortableHandle, ScSortableItem, ScSortableList, ScSortableOverlay, ScSpeedDial, ScSpeedDialAction, 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, ScVideoPlayerBigPlay, ScVideoPlayerBufferingIndicator, ScVideoPlayerControls, ScVideoPlayerFullscreen, ScVideoPlayerPip, ScVideoPlayerPlayPause, ScVideoPlayerProgress, ScVideoPlayerSkip, ScVideoPlayerSpacer, ScVideoPlayerSpeed, ScVideoPlayerTime, ScVideoPlayerToolbar, 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_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_SIGNATURE_PAD, SC_SORTABLE_ITEM, SC_SORTABLE_LIST, SC_STEPPER, SC_STEPPER_ITEM, SC_TAG_INPUT, SC_TIMEZONE_CONFIG, SC_TREE_ITEM, ScAnimatedCounter, ScAudioPlayer, ScAudioPlayerControls, ScAudioPlayerCover, ScAudioPlayerNext, ScAudioPlayerPlay, ScAudioPlayerPrevious, ScAudioPlayerProgress, ScAudioPlayerRepeat, ScAudioPlayerShuffle, ScAudioPlayerTrackInfo, ScAudioPlayerVolume, ScAutoMarquee, ScBarChart, ScBarcodeScanner, ScBarcodeScannerSimple, ScButtonPattern, ScChartContainer, ScChartLegend, ScChartTooltip, ScColorPicker, ScColorPickerArea, ScColorPickerEyeDropper, ScColorPickerHue, ScColorPickerInput, ScColorPickerPreview, ScColorPickerSwatches, ScConfetti, ScCountdown, ScCountdownSimple, ScDataTable, ScDataTableBody, ScDataTableCell, ScDataTableColumnToggle, ScDataTableFilter, ScDataTableHead, ScDataTableHeader, ScDataTablePagination, ScDataTableRow, ScDateRangePicker, ScDiffViewer, ScDock, ScDockBadge, ScDockItem, ScDockItems, ScDonutChart, ScEmojiPicker, ScEmojiPickerTrigger, ScImageAnnotator, ScImageCompare, ScImageCompareAfter, ScImageCompareArea, ScImageCompareBefore, ScImageCompareLabel, ScImageCompareSlider, ScImageCropper, ScImageCropperAspectRatio, ScImageCropperCanvas, ScImageCropperDragRegion, ScImageCropperFileInput, ScImageCropperFlipH, ScImageCropperFlipV, ScImageCropperGrid, ScImageCropperHandle, ScImageCropperImage, ScImageCropperOverlay, ScImageCropperPreview, ScImageCropperReset, ScImageCropperRotateLeft, ScImageCropperRotateRight, ScImageCropperSelection, ScImageCropperZoomIn, ScImageCropperZoomOut, ScImageCropperZoomSlider, 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, ScNativeCheckbox, ScNativeDialog, ScNativeDialogBody, ScNativeDialogClose, ScNativeDialogContent, ScNativeDialogDescription, ScNativeDialogFooter, ScNativeDialogHeader, ScNativeDialogProvider, ScNativeDialogTitle, ScNativeDialogTrigger, ScNavbar, ScNavbarActions, ScNavbarBrand, ScNavbarGroup, ScNavbarMobileLink, ScNavbarMobileMenu, ScNavbarMobilePortal, ScNavbarMobileTrigger, ScNavbarProvider, ScNotificationCenterDirective as ScNotificationCenter, ScNotificationCenterContainer, ScNotificationCenterDirective, ScNotificationGroup, ScNotificationItem, ScNumberField, ScNumberFieldDecrement, ScNumberFieldIncrement, ScNumberFieldInput, ScNumberFieldInputGroup, ScNumberFieldScrubArea, 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, ScSidebarLayout, ScSignaturePad, ScSignaturePadCanvas, ScSignaturePadClearButton, ScSignaturePadColorButton, ScSignaturePadControls, ScSignaturePadToolbar, ScSignaturePadUndoButton, ScSignaturePadWidthButton, ScSortableHandle, ScSortableItem, ScSortableList, ScSortableOverlay, ScSpeedDial, ScSpeedDialAction, 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, ScVideoPlayerBigPlay, ScVideoPlayerBufferingIndicator, ScVideoPlayerControls, ScVideoPlayerFullscreen, ScVideoPlayerPip, ScVideoPlayerPlayPause, ScVideoPlayerProgress, ScVideoPlayerSkip, ScVideoPlayerSpacer, ScVideoPlayerSpeed, ScVideoPlayerTime, ScVideoPlayerToolbar, 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