@semantic-components/ui 0.11.0 → 0.13.0

package/fesm2022/semantic-components-ui.mjs

@@ -1,65 +1,115 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { input, computed, Component, ViewEncapsulation, ChangeDetectionStrategy, signal, inject, ElementRef, Directive, HostListener, Injectable, ChangeDetectorRef, viewChild, afterNextRender, forwardRef, ViewContainerRef, contentChildren, model, output, effect, LOCALE_ID, Injector, booleanAttribute, untracked, viewChildren } from '@angular/core';
+import { signal, inject, LOCALE_ID, Injectable, input, computed, Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, Directive, HostListener, ChangeDetectorRef, viewChild, afterNextRender, forwardRef, booleanAttribute, ViewContainerRef, contentChildren, effect, Injector, model, untracked, output, linkedSignal, viewChildren } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormArray, NgForm, FormGroupDirective, NgControl, FormBuilder, FormsModule } from '@angular/forms';
+import { cn } from '@semantic-components/utils';
 import { Editor } from '@tiptap/core';
 import Document from '@tiptap/extension-document';
 import Heading from '@tiptap/extension-heading';
 import Paragraph from '@tiptap/extension-paragraph';
 import Text from '@tiptap/extension-text';
 import { cva } from 'class-variance-authority';
-import { SvgQuoteIcon, SvgBoldIcon, SvgListIcon, SvgCodeIcon, SvgPaletteIcon, SvgHighlighterIcon, SvgUndoIcon, SvgRedoIcon, SvgMinusIcon, SvgItalicIcon, SvgListOrderedIcon, SvgStrikethroughIcon, SvgAlignLeftIcon, SvgAlignRightIcon, SvgAlignCenterIcon, SvgUnderlineIcon, SvgCheckIcon, SvgChevronDownIcon, SvgEllipsisIcon, SvgChevronLeftIcon, SvgChevronsLeftIcon, SvgChevronRightIcon, SvgChevronsRightIcon, SvgCalendarIcon, SvgMoonIcon, SvgSunIcon, SvgXIcon, SvgChevronUpIcon, SvgCircleIcon, SvgDotIcon, SvgSearchIcon } from '@semantic-icons/lucide-icons';
-import { Overlay, OverlayModule, OverlayContainer, OverlayConfig } from '@angular/cdk/overlay';
+import { SvgRedoIcon, SvgAlignCenterIcon, SvgAlignLeftIcon, SvgAlignRightIcon, SvgUndoIcon, SvgUnlinkIcon, SvgQuoteIcon, SvgBoldIcon, SvgListIcon, SvgCodeIcon, SvgPaletteIcon, SvgHighlighterIcon, SvgMinusIcon, SvgItalicIcon, SvgListOrderedIcon, SvgStrikethroughIcon, SvgUnderlineIcon, SvgCheckIcon, SvgChevronDownIcon, SvgEllipsisIcon, SvgChevronLeftIcon, SvgChevronsLeftIcon, SvgChevronRightIcon, SvgChevronsRightIcon, SvgCalendarIcon, SvgMoonIcon, SvgSunIcon, SvgXIcon, SvgChevronUpIcon, SvgCircleIcon, SvgDotIcon, SvgSearchIcon, SvgClockIcon, SvgFileTextIcon, SvgUploadIcon, SvgCookieIcon } from '@semantic-icons/lucide-icons';
+import { Overlay, OverlayContainer, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
-import * as i1$5 from '@angular/cdk/menu';
+import { Dialog, DialogRef, DialogModule } from '@angular/cdk/dialog';
+import * as i1$3 from '@angular/cdk/menu';
 import { CdkMenuTrigger, CdkMenu, CdkMenuItem, CdkContextMenuTrigger, CdkMenuItemCheckbox, CdkMenuGroup, CdkMenuItemRadio, CdkMenuBar } from '@angular/cdk/menu';
-import { DialogRef, Dialog, DialogModule } from '@angular/cdk/dialog';
-import * as i1$1 from '@angular/cdk/a11y';
-import { A11yModule, FocusMonitor, ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+import { _IdGenerator, ActiveDescendantKeyManager, FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
-import { TAB, ESCAPE, hasModifierKey, ENTER } from '@angular/cdk/keycodes';
-import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
+import { hasModifierKey, ENTER, TAB, ESCAPE } from '@angular/cdk/keycodes';
 import { _getEventTarget } from '@angular/cdk/platform';
-import * as i1$3 from '@angular/common';
-import { NgClass, DOCUMENT, NgTemplateOutlet, CommonModule, AsyncPipe, JsonPipe, NgOptimizedImage } from '@angular/common';
-import * as i1$2 from 'ngx-scrollbar';
-import { NgScrollbarModule } from 'ngx-scrollbar';
+import * as i1$1 from '@angular/common';
+import { NgClass, DOCUMENT, NgTemplateOutlet, CommonModule, AsyncPipe, JsonPipe } from '@angular/common';
 import EmblaCarousel from 'embla-carousel';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i1$4 from '@angular/cdk/accordion';
+import * as i1$2 from '@angular/cdk/accordion';
 import { CdkAccordionModule } from '@angular/cdk/accordion';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { Subject, debounceTime } from 'rxjs';
-import * as i1$6 from '@angular/cdk/layout';
-import { LayoutModule } from '@angular/cdk/layout';
+import { Subject, debounceTime, catchError, throwError } from 'rxjs';
+import { BreakpointObserver, LayoutModule } from '@angular/cdk/layout';
+import { HttpEventType, HttpResponse } from '@angular/common/http';
+import { DataService } from '@semantic-components/supabase';
 
-function cn(...inputs) {
-    return twMerge(clsx(inputs));
+class ScSettings {
+    clock = signal('am-pm');
+    dateFormatPattern = signal('');
+    localeId = inject(LOCALE_ID);
+    constructor() {
+        this.dateFormatPattern.set(this.getDateFormatPattern(this.localeId));
+    }
+    getDateFormatPattern(localeId) {
+        const getPatternForPart = (part) => {
+            switch (part.type) {
+                case 'day':
+                    return 'd'.repeat(part.value.length);
+                case 'month':
+                    return 'M'.repeat(part.value.length);
+                case 'year':
+                    return 'y'.repeat(part.value.length);
+                case 'literal':
+                    return part.value;
+                default:
+                    throw new Error('no default');
+            }
+        };
+        return new Intl.DateTimeFormat(localeId)
+            .formatToParts(new Date('2022-01-01'))
+            .map(getPatternForPart)
+            .join('')
+            .toLowerCase();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSettings, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSettings, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSettings, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class ScSeparator {
+    orientation = input('horizontal');
+    class = input('');
+    _class = computed(() => cn('block shrink-0 bg-border', this.orientation() === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScSeparator, isStandalone: true, selector: "sc-separator", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSeparator, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-separator', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': '_class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
 
 const scHeadingVariants = cva('', {
     variants: {
         level: {
-            1: 'text-4xl font-extrabold tracking-tight lg:text-5xl',
-            2: 'text-3xl font-semibold tracking-tight',
-            3: 'text-2xl font-semibold tracking-tight',
-            4: 'text-xl font-semibold tracking-tight',
-            5: '',
-            6: '',
+            '1': 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl',
+            '2': 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0',
+            '3': 'scroll-m-20 text-2xl font-semibold tracking-tight',
+            '4': 'scroll-m-20 text-xl font-semibold tracking-tight',
+            '5': '',
+            '6': '',
         },
     },
     defaultVariants: {
-        level: 1,
+        level: '1',
     },
 });
 class ScHeading {
-    level = input(1);
-    class = input('');
-    classes = computed(() => cn(scHeadingVariants({ level: this.level() }), this.class()));
+    level = input('1');
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn(scHeadingVariants({ level: this.level() }), this.classInput()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScHeading, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScHeading, isStandalone: true, selector: "h1[sc-heading], h2[sc-heading], h3[sc-heading], h4[sc-heading], h5[sc-heading], h6[sc-heading]", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScHeading, isStandalone: true, selector: "h1[sc-heading], h2[sc-heading], h3[sc-heading], h4[sc-heading], h5[sc-heading], h6[sc-heading]", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -68,7 +118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{ selector: 'h1[sc-heading], h2[sc-heading], h3[sc-heading], h4[sc-heading], h5[sc-heading], h6[sc-heading]', imports: [], template: `
     <ng-content />
   `, host: {
-                        '[class]': 'classes()',
+                        '[class]': 'class()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
@@ -90,7 +140,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
-const toggleVariants = cva('inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_.svg]:pointer-events-none [&_.svg]:size-4 [&_.svg]:shrink-0', {
+class ScBlockquote {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScBlockquote, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScBlockquote, isStandalone: true, selector: "blockquote[sc-blockquote]", host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScBlockquote, decorators: [{
+            type: Component,
+            args: [{ selector: 'blockquote[sc-blockquote]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+const toggleVariants = cva('inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         variant: {
             default: 'bg-transparent',
@@ -262,11 +327,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class ScExtensions {
+    //history extension
+    undo = signal(false);
+    redo = signal(false);
+    history = computed(() => this.undo() || this.redo());
+    //link extension
+    setLink = signal(false);
+    unsetLink = signal(false);
+    link = computed(() => this.setLink() || this.unsetLink());
+    //text align extension
+    textAlignRight = signal(false);
+    textAlignLeft = signal(false);
+    textAlignCenter = signal(false);
+    textAlign = computed(() => this.textAlignRight() || this.textAlignLeft() || this.textAlignCenter());
+    //
     highlight = signal(false);
     color = signal(false);
     underline = signal(false);
-    link = signal(false);
-    textAlign = signal(false);
     fontFamily = signal(false);
     bold = signal(false);
     youtube = signal(false);
@@ -279,7 +356,6 @@ class ScExtensions {
     orderedList = signal(false);
     horizontalRule = signal(false);
     textStyle = signal(false);
-    history = signal(false);
     table = signal(false);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensions, providedIn: 'root' });
@@ -291,244 +367,551 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }] });
 
-class ScExtensionBlockquote {
-    ariaLabel = 'Toggle blockquote';
+class ScEditorRedo {
+    ariaLabel = 'Redo';
     parent = inject(ScEditor, { host: true });
     extensions = inject(ScExtensions);
     constructor() {
-        this.extensions.blockquote.set(true);
+        this.extensions.redo.set(true);
     }
     get editor() {
         return this.parent.editor;
     }
-    toggleBlockquote() {
-        this.editor.chain().focus().toggleBlockquote().run();
+    redo() {
+        this.editor.chain().focus().redo().run();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBlockquote, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionBlockquote, isStandalone: true, selector: "sc-extension-blockquote", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorRedo, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScEditorRedo, isStandalone: true, selector: "sc-editor-redo", ngImport: i0, template: `
     <button
       [attr.aria-label]="ariaLabel"
       [scTooltip]="ariaLabel"
-      (click)="toggleBlockquote()"
+      (click)="redo()"
       sc-toggle
       variant="outline"
       type="button"
     >
-      <svg-quote-icon />
+      <svg-redo-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgQuoteIcon, selector: "svg-quote-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgRedoIcon, selector: "svg-redo-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBlockquote, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorRedo, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-extension-blockquote', imports: [ScTooltip, ScToggle, SvgQuoteIcon], template: `
+            args: [{ selector: 'sc-editor-redo', imports: [ScTooltip, ScToggle, SvgRedoIcon], template: `
     <button
       [attr.aria-label]="ariaLabel"
       [scTooltip]="ariaLabel"
-      (click)="toggleBlockquote()"
+      (click)="redo()"
       sc-toggle
       variant="outline"
       type="button"
     >
-      <svg-quote-icon />
+      <svg-redo-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
-class ScExtensionBold {
-    ariaLabel = 'Toggle Bold';
+class ScEditorTextAlignCenter {
+    ariaLabel = 'Align center';
     parent = inject(ScEditor, { host: true });
     extensions = inject(ScExtensions);
     constructor() {
-        this.extensions.bold.set(true);
+        this.extensions.textAlignCenter.set(true);
     }
     get editor() {
         return this.parent.editor;
     }
-    toggleBold() {
-        this.editor.chain().focus().toggleBold().run();
+    setCenterAlign() {
+        this.editor.chain().focus().setTextAlign('center').run();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBold, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionBold, isStandalone: true, selector: "sc-extension-bold", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorTextAlignCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScEditorTextAlignCenter, isStandalone: true, selector: "sc-editor-text-align-center", ngImport: i0, template: `
     <button
       [attr.aria-label]="ariaLabel"
       [scTooltip]="ariaLabel"
-      (click)="toggleBold()"
+      (click)="setCenterAlign()"
+      type="button"
       sc-toggle
       variant="outline"
+    >
+      <svg-align-center-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgAlignCenterIcon, selector: "svg-align-center-icon", inputs: ["class"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorTextAlignCenter, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-editor-text-align-center', imports: [ScTooltip, SvgAlignCenterIcon, ScToggle], template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="setCenterAlign()"
       type="button"
+      sc-toggle
+      variant="outline"
     >
-      <svg-bold-icon />
+      <svg-align-center-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [] });
+
+class ScEditorTextAlignLeft {
+    ariaLabel = 'Align left';
+    parent = inject(ScEditor, { host: true });
+    extensions = inject(ScExtensions);
+    constructor() {
+        this.extensions.textAlignLeft.set(true);
+    }
+    get editor() {
+        return this.parent.editor;
+    }
+    setLeftAlign() {
+        this.editor.chain().focus().setTextAlign('left').run();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorTextAlignLeft, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScEditorTextAlignLeft, isStandalone: true, selector: "sc-editor-text-align-left", ngImport: i0, template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="setLeftAlign()"
+      type="button"
+      sc-toggle
+      variant="outline"
+    >
+      <svg-align-left-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgBoldIcon, selector: "svg-bold-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgAlignLeftIcon, selector: "svg-align-left-icon", inputs: ["class"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBold, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorTextAlignLeft, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-extension-bold', imports: [ScTooltip, ScToggle, SvgBoldIcon], template: `
+            args: [{ selector: 'sc-editor-text-align-left', imports: [ScTooltip, SvgAlignLeftIcon, ScToggle], template: `
     <button
       [attr.aria-label]="ariaLabel"
       [scTooltip]="ariaLabel"
-      (click)="toggleBold()"
+      (click)="setLeftAlign()"
+      type="button"
+      sc-toggle
+      variant="outline"
+    >
+      <svg-align-left-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [] });
+
+class ScEditorTextAlignRight {
+    ariaLabel = 'Align right';
+    parent = inject(ScEditor, { host: true });
+    extensions = inject(ScExtensions);
+    constructor() {
+        this.extensions.textAlignRight.set(true);
+    }
+    get editor() {
+        return this.parent.editor;
+    }
+    setRightAlign() {
+        this.editor.chain().focus().setTextAlign('right').run();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorTextAlignRight, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScEditorTextAlignRight, isStandalone: true, selector: "sc-editor-text-align-right", ngImport: i0, template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="setRightAlign()"
+      type="button"
       sc-toggle
       variant="outline"
+    >
+      <svg-align-right-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgAlignRightIcon, selector: "svg-align-right-icon", inputs: ["class"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorTextAlignRight, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-editor-text-align-right', imports: [ScTooltip, SvgAlignRightIcon, ScToggle], template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="setRightAlign()"
       type="button"
+      sc-toggle
+      variant="outline"
     >
-      <svg-bold-icon />
+      <svg-align-right-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
-class ScExtensionBulletList {
-    ariaLabel = 'Toggle List';
+class ScEditorUndo {
+    ariaLabel = 'Undo';
     parent = inject(ScEditor, { host: true });
     extensions = inject(ScExtensions);
     constructor() {
-        this.extensions.bulletList.set(true);
+        this.extensions.undo.set(true);
     }
     get editor() {
         return this.parent.editor;
     }
-    toggleBulletList() {
-        this.editor.chain().focus().toggleBulletList().run();
+    undo() {
+        this.editor.chain().focus().undo().run();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBulletList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionBulletList, isStandalone: true, selector: "sc-extension-bullet-list", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorUndo, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScEditorUndo, isStandalone: true, selector: "sc-editor-undo", ngImport: i0, template: `
     <button
       [attr.aria-label]="ariaLabel"
       [scTooltip]="ariaLabel"
-      (click)="toggleBulletList()"
+      (click)="undo()"
       sc-toggle
       variant="outline"
       type="button"
     >
-      <svg-list-icon />
+      <svg-undo-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgListIcon, selector: "svg-list-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgUndoIcon, selector: "svg-undo-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBulletList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorUndo, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-extension-bullet-list', imports: [ScTooltip, ScToggle, SvgListIcon], template: `
+            args: [{ selector: 'sc-editor-undo', imports: [ScTooltip, ScToggle, SvgUndoIcon], template: `
     <button
       [attr.aria-label]="ariaLabel"
       [scTooltip]="ariaLabel"
-      (click)="toggleBulletList()"
+      (click)="undo()"
       sc-toggle
       variant="outline"
       type="button"
     >
-      <svg-list-icon />
+      <svg-undo-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
-class ScExtensionCode {
-    ariaLabel = 'Format code';
+class ScEditorUnsetLink {
+    ariaLabel = 'Unset Link';
     parent = inject(ScEditor, { host: true });
+    dialog = inject(Dialog);
     extensions = inject(ScExtensions);
     constructor() {
-        this.extensions.code.set(true);
+        this.extensions.unsetLink.set(true);
     }
     get editor() {
         return this.parent.editor;
     }
-    toggleCode() {
-        this.editor.chain().focus().toggleCode().run();
+    unsetLink() {
+        this.editor.chain().focus().unsetLink().run();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionCode, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionCode, isStandalone: true, selector: "sc-extension-code", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorUnsetLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScEditorUnsetLink, isStandalone: true, selector: "sc-editor-unset-link", ngImport: i0, template: `
     <button
       [attr.aria-label]="ariaLabel"
       [scTooltip]="ariaLabel"
-      (click)="toggleCode()"
+      (click)="unsetLink()"
       sc-toggle
       variant="outline"
       type="button"
     >
-      <svg-code-icon />
+      <svg-unlink-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgCodeIcon, selector: "svg-code-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgUnlinkIcon, selector: "svg-unlink-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionCode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorUnsetLink, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-extension-code', imports: [ScTooltip, SvgCodeIcon, ScToggle], template: `
+            args: [{ selector: 'sc-editor-unset-link', imports: [ScTooltip, ScToggle, SvgUnlinkIcon], template: `
     <button
       [attr.aria-label]="ariaLabel"
       [scTooltip]="ariaLabel"
-      (click)="toggleCode()"
+      (click)="unsetLink()"
       sc-toggle
       variant="outline"
       type="button"
     >
-      <svg-code-icon />
+      <svg-unlink-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
-const allColors = {
-    slate: {
-        50: '#f8fafc',
-        100: '#f1f5f9',
-        200: '#e2e8f0',
-        300: '#cbd5e1',
-        400: '#94a3b8',
-        500: '#64748b',
-        600: '#475569',
-        700: '#334155',
-        800: '#1e293b',
-        900: '#0f172a',
-        950: '#020617',
-    },
-    gray: {
-        50: '#f9fafb',
-        100: '#f3f4f6',
-        200: '#e5e7eb',
-        300: '#d1d5db',
-        400: '#9ca3af',
-        500: '#6b7280',
-        600: '#4b5563',
-        700: '#374151',
-        800: '#1f2937',
-        900: '#111827',
-        950: '#030712',
-    },
-    zinc: {
-        50: '#fafafa',
-        100: '#f4f4f5',
-        200: '#e4e4e7',
-        300: '#d4d4d8',
-        400: '#a1a1aa',
-        500: '#71717a',
-        600: '#52525b',
-        700: '#3f3f46',
-        800: '#27272a',
-        900: '#18181b',
-        950: '#09090b',
-    },
-    neutral: {
-        50: '#fafafa',
-        100: '#f5f5f5',
-        200: '#e5e5e5',
-        300: '#d4d4d4',
-        400: '#a3a3a3',
-        500: '#737373',
-        600: '#525252',
-        700: '#404040',
-        800: '#262626',
-        900: '#171717',
-        950: '#0a0a0a',
-    },
-    stone: {
-        50: '#fafaf9',
-        100: '#f5f5f4',
-        200: '#e7e5e4',
-        300: '#d6d3d1',
+class ScEditorGroup {
+    class = input('');
+    //TODO change styles
+    _class = computed(() => cn('flex flex-wrap items-center gap-1 py-1', this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScEditorGroup, isStandalone: true, selector: "sc-editor-group", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-editor-group', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': '_class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScEditorToolbar {
+    class = input('');
+    //TODO change styles to fit shadcn
+    _class = computed(() => cn('block border-b px-3 py-1 dark:border-gray-600', this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScEditorToolbar, isStandalone: true, selector: "sc-editor-toolbar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditorToolbar, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-editor-toolbar', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': '_class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScExtensionBlockquote {
+    ariaLabel = 'Toggle blockquote';
+    parent = inject(ScEditor, { host: true });
+    extensions = inject(ScExtensions);
+    constructor() {
+        this.extensions.blockquote.set(true);
+    }
+    get editor() {
+        return this.parent.editor;
+    }
+    toggleBlockquote() {
+        this.editor.chain().focus().toggleBlockquote().run();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBlockquote, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionBlockquote, isStandalone: true, selector: "sc-extension-blockquote", ngImport: i0, template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="toggleBlockquote()"
+      sc-toggle
+      variant="outline"
+      type="button"
+    >
+      <svg-quote-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgQuoteIcon, selector: "svg-quote-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBlockquote, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-extension-blockquote', imports: [ScTooltip, ScToggle, SvgQuoteIcon], template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="toggleBlockquote()"
+      sc-toggle
+      variant="outline"
+      type="button"
+    >
+      <svg-quote-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [] });
+
+class ScExtensionBold {
+    ariaLabel = 'Toggle Bold';
+    parent = inject(ScEditor, { host: true });
+    extensions = inject(ScExtensions);
+    constructor() {
+        this.extensions.bold.set(true);
+    }
+    get editor() {
+        return this.parent.editor;
+    }
+    toggleBold() {
+        this.editor.chain().focus().toggleBold().run();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBold, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionBold, isStandalone: true, selector: "sc-extension-bold", ngImport: i0, template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="toggleBold()"
+      sc-toggle
+      variant="outline"
+      type="button"
+    >
+      <svg-bold-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgBoldIcon, selector: "svg-bold-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBold, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-extension-bold', imports: [ScTooltip, ScToggle, SvgBoldIcon], template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="toggleBold()"
+      sc-toggle
+      variant="outline"
+      type="button"
+    >
+      <svg-bold-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [] });
+
+class ScExtensionBulletList {
+    ariaLabel = 'Toggle List';
+    parent = inject(ScEditor, { host: true });
+    extensions = inject(ScExtensions);
+    constructor() {
+        this.extensions.bulletList.set(true);
+    }
+    get editor() {
+        return this.parent.editor;
+    }
+    toggleBulletList() {
+        this.editor.chain().focus().toggleBulletList().run();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBulletList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionBulletList, isStandalone: true, selector: "sc-extension-bullet-list", ngImport: i0, template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="toggleBulletList()"
+      sc-toggle
+      variant="outline"
+      type="button"
+    >
+      <svg-list-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgListIcon, selector: "svg-list-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionBulletList, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-extension-bullet-list', imports: [ScTooltip, ScToggle, SvgListIcon], template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="toggleBulletList()"
+      sc-toggle
+      variant="outline"
+      type="button"
+    >
+      <svg-list-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [] });
+
+class ScExtensionCode {
+    ariaLabel = 'Format code';
+    parent = inject(ScEditor, { host: true });
+    extensions = inject(ScExtensions);
+    constructor() {
+        this.extensions.code.set(true);
+    }
+    get editor() {
+        return this.parent.editor;
+    }
+    toggleCode() {
+        this.editor.chain().focus().toggleCode().run();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionCode, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionCode, isStandalone: true, selector: "sc-extension-code", ngImport: i0, template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="toggleCode()"
+      sc-toggle
+      variant="outline"
+      type="button"
+    >
+      <svg-code-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgCodeIcon, selector: "svg-code-icon", inputs: ["class"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionCode, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-extension-code', imports: [ScTooltip, SvgCodeIcon, ScToggle], template: `
+    <button
+      [attr.aria-label]="ariaLabel"
+      [scTooltip]="ariaLabel"
+      (click)="toggleCode()"
+      sc-toggle
+      variant="outline"
+      type="button"
+    >
+      <svg-code-icon />
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [] });
+
+const allColors = {
+    slate: {
+        50: '#f8fafc',
+        100: '#f1f5f9',
+        200: '#e2e8f0',
+        300: '#cbd5e1',
+        400: '#94a3b8',
+        500: '#64748b',
+        600: '#475569',
+        700: '#334155',
+        800: '#1e293b',
+        900: '#0f172a',
+        950: '#020617',
+    },
+    gray: {
+        50: '#f9fafb',
+        100: '#f3f4f6',
+        200: '#e5e7eb',
+        300: '#d1d5db',
+        400: '#9ca3af',
+        500: '#6b7280',
+        600: '#4b5563',
+        700: '#374151',
+        800: '#1f2937',
+        900: '#111827',
+        950: '#030712',
+    },
+    zinc: {
+        50: '#fafafa',
+        100: '#f4f4f5',
+        200: '#e4e4e7',
+        300: '#d4d4d8',
+        400: '#a1a1aa',
+        500: '#71717a',
+        600: '#52525b',
+        700: '#3f3f46',
+        800: '#27272a',
+        900: '#18181b',
+        950: '#09090b',
+    },
+    neutral: {
+        50: '#fafafa',
+        100: '#f5f5f5',
+        200: '#e5e5e5',
+        300: '#d4d4d4',
+        400: '#a3a3a3',
+        500: '#737373',
+        600: '#525252',
+        700: '#404040',
+        800: '#262626',
+        900: '#171717',
+        950: '#0a0a0a',
+    },
+    stone: {
+        50: '#fafaf9',
+        100: '#f5f5f4',
+        200: '#e7e5e4',
+        300: '#d6d3d1',
         400: '#a8a29e',
         500: '#78716c',
         600: '#57534e',
@@ -838,7 +1221,7 @@ class ScExtensionColor {
         </button>
       </div>
     </ng-template>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgPaletteIcon, selector: "svg-palette-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgPaletteIcon, selector: "svg-palette-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionColor, decorators: [{
             type: Component,
@@ -1655,7 +2038,7 @@ class ScExtensionHighlight {
       <svg-highlighter-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgHighlighterIcon, selector: "svg-highlighter-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgHighlighterIcon, selector: "svg-highlighter-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionHighlight, decorators: [{
             type: Component,
@@ -1674,81 +2057,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
-class ScExtensionHistory {
-    ariaLabel1 = 'Undo';
-    ariaLabel2 = 'Redo';
-    parent = inject(ScEditor, { host: true });
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.history.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    undo() {
-        this.editor.chain().focus().undo().run();
-    }
-    redo() {
-        this.editor.chain().focus().redo().run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionHistory, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionHistory, isStandalone: true, selector: "sc-extension-history", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel1"
-      [scTooltip]="ariaLabel1"
-      (click)="undo()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg-undo-icon />
-      <span class="sr-only">{{ ariaLabel1 }}</span>
-    </button>
-
-    <button
-      [attr.aria-label]="ariaLabel2"
-      [scTooltip]="ariaLabel2"
-      (click)="redo()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg-redo-icon />
-      <span class="sr-only">{{ ariaLabel2 }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgUndoIcon, selector: "svg-undo-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgRedoIcon, selector: "svg-redo-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionHistory, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-extension-history', imports: [ScTooltip, ScToggle, SvgUndoIcon, SvgRedoIcon], template: `
-    <button
-      [attr.aria-label]="ariaLabel1"
-      [scTooltip]="ariaLabel1"
-      (click)="undo()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg-undo-icon />
-      <span class="sr-only">{{ ariaLabel1 }}</span>
-    </button>
-
-    <button
-      [attr.aria-label]="ariaLabel2"
-      [scTooltip]="ariaLabel2"
-      (click)="redo()"
-      sc-toggle
-      variant="outline"
-      type="button"
-    >
-      <svg-redo-icon />
-      <span class="sr-only">{{ ariaLabel2 }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
-class ScExtensionHorizontalRule {
-    ariaLabel = 'Toggle Horizontal Rule';
+class ScExtensionHorizontalRule {
+    ariaLabel = 'Toggle Horizontal Rule';
     parent = inject(ScEditor, { host: true });
     extensions = inject(ScExtensions);
     constructor() {
@@ -1773,7 +2083,7 @@ class ScExtensionHorizontalRule {
       <svg-minus-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgMinusIcon, selector: "svg-minus-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgMinusIcon, selector: "svg-minus-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionHorizontalRule, decorators: [{
             type: Component,
@@ -2147,7 +2457,7 @@ class ScExtensionItalic {
       <svg-italic-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgItalicIcon, selector: "svg-italic-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgItalicIcon, selector: "svg-italic-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionItalic, decorators: [{
             type: Component,
@@ -2327,7 +2637,7 @@ class ScExtensionLink {
     dialog = inject(Dialog);
     extensions = inject(ScExtensions);
     constructor() {
-        this.extensions.link.set(true);
+        this.extensions.setLink.set(true);
     }
     get editor() {
         return this.parent.editor;
@@ -2344,9 +2654,6 @@ class ScExtensionLink {
                 .run();
         });
     }
-    removeLink() {
-        this.editor.chain().focus().unsetLink().run();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionLink, isStandalone: true, selector: "sc-extension-link", ngImport: i0, template: `
     <button
@@ -2374,31 +2681,6 @@ class ScExtensionLink {
       </svg>
       <span class="sr-only">Link</span>
     </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="removeLink()"
-      type="button"
-      scTooltip="Remove link"
-    >
-      <svg
-        class="size-5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-width="2"
-          d="M13.2 9.8a3.4 3.4 0 0 0-4.8 0L5 13.2A3.4 3.4 0 0 0 9.8 18l.3-.3m-.3-4.5a3.4 3.4 0 0 0 4.8 0L18 9.8A3.4 3.4 0 0 0 13.2 5l-1 1m7.4 14-1.8-1.8m0 0L16 16.4m1.8 1.8 1.8-1.8m-1.8 1.8L16 20"
-        />
-      </svg>
-      <span class="sr-only">Remove link</span>
-    </button>
   `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionLink, decorators: [{
@@ -2429,31 +2711,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
       </svg>
       <span class="sr-only">Link</span>
     </button>
-
-    <button
-      class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-      (click)="removeLink()"
-      type="button"
-      scTooltip="Remove link"
-    >
-      <svg
-        class="size-5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-width="2"
-          d="M13.2 9.8a3.4 3.4 0 0 0-4.8 0L5 13.2A3.4 3.4 0 0 0 9.8 18l.3-.3m-.3-4.5a3.4 3.4 0 0 0 4.8 0L18 9.8A3.4 3.4 0 0 0 13.2 5l-1 1m7.4 14-1.8-1.8m0 0L16 16.4m1.8 1.8 1.8-1.8m-1.8 1.8L16 20"
-        />
-      </svg>
-      <span class="sr-only">Remove link</span>
-    </button>
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
@@ -2483,7 +2740,7 @@ class ScExtensionOrderedList {
       <svg-list-ordered-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgListOrderedIcon, selector: "svg-list-ordered-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgListOrderedIcon, selector: "svg-list-ordered-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionOrderedList, decorators: [{
             type: Component,
@@ -2660,7 +2917,7 @@ class ScExtensionStrike {
       <svg-strikethrough-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgStrikethroughIcon, selector: "svg-strikethrough-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgStrikethroughIcon, selector: "svg-strikethrough-icon", inputs: ["class"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionStrike, decorators: [{
             type: Component,
@@ -2875,23 +3132,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
-class ScExtensionsSeparator {
-    class = input('');
-    classes = computed(() => cn('px-1', this.class()));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionsSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScExtensionsSeparator, isStandalone: true, selector: "sc-extensions-separator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
-    <span class="inline-block h-4 w-px bg-gray-300 dark:bg-gray-600"></span>
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionsSeparator, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-extensions-separator', imports: [], template: `
-    <span class="inline-block h-4 w-px bg-gray-300 dark:bg-gray-600"></span>
-  `, host: {
-                        '[class]': 'classes()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
 class ScExtensionTable {
     parent = inject(ScEditor, { host: true });
     dialog = inject(Dialog);
@@ -3014,7 +3254,7 @@ class ScExtensionTable {
       <span class="sr-only">Delete table</span>
     </button>
 
-    <sc-extensions-separator />
+    <sc-separator class="h5" orientation="vertical" />
 
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
@@ -3094,7 +3334,7 @@ class ScExtensionTable {
       <span class="sr-only">Remove column</span>
     </button>
 
-    <sc-extensions-separator />
+    <sc-separator class="h5" orientation="vertical" />
 
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
@@ -3252,7 +3492,7 @@ class ScExtensionTable {
       <span class="sr-only">Merge or split</span>
     </button>
 
-    <sc-extensions-separator />
+    <sc-separator class="h5" orientation="vertical" />
 
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
@@ -3357,7 +3597,7 @@ class ScExtensionTable {
       <span class="sr-only">Add cell attribute</span>
     </button>
 
-    <sc-extensions-separator />
+    <sc-separator class="h5" orientation="vertical" />
 
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
@@ -3435,11 +3675,11 @@ class ScExtensionTable {
       </svg>
       <span class="sr-only">Next cell</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScExtensionsSeparator, selector: "sc-extensions-separator", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScSeparator, selector: "sc-separator", inputs: ["orientation", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionTable, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-extension-table', imports: [ScTooltip, ScExtensionsSeparator], template: `
+            args: [{ selector: 'sc-extension-table', imports: [ScTooltip, ScSeparator], template: `
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
       (click)="insertTable()"
@@ -3491,7 +3731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
       <span class="sr-only">Delete table</span>
     </button>
 
-    <sc-extensions-separator />
+    <sc-separator class="h5" orientation="vertical" />
 
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
@@ -3571,7 +3811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
       <span class="sr-only">Remove column</span>
     </button>
 
-    <sc-extensions-separator />
+    <sc-separator class="h5" orientation="vertical" />
 
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
@@ -3729,7 +3969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
       <span class="sr-only">Merge or split</span>
     </button>
 
-    <sc-extensions-separator />
+    <sc-separator class="h5" orientation="vertical" />
 
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
@@ -3834,7 +4074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
       <span class="sr-only">Add cell attribute</span>
     </button>
 
-    <sc-extensions-separator />
+    <sc-separator class="h5" orientation="vertical" />
 
     <button
       class="cursor-pointer rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
@@ -3915,107 +4155,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
-class ScExtensionTextAlignAction {
-    ariaLabel1 = 'Align left';
-    ariaLabel2 = 'Align center';
-    ariaLabel3 = 'Align right';
-    parent = inject(ScEditor, { host: true });
-    extensions = inject(ScExtensions);
-    constructor() {
-        this.extensions.textAlign.set(true);
-    }
-    get editor() {
-        return this.parent.editor;
-    }
-    setLeftAlign() {
-        this.editor.chain().focus().setTextAlign('left').run();
-    }
-    setCenterAlign() {
-        this.editor.chain().focus().setTextAlign('center').run();
-    }
-    setRightAlign() {
-        this.editor.chain().focus().setTextAlign('right').run();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionTextAlignAction, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionTextAlignAction, isStandalone: true, selector: "sc-extension-text-align", ngImport: i0, template: `
-    <button
-      [attr.aria-label]="ariaLabel1"
-      [scTooltip]="ariaLabel1"
-      (click)="setLeftAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg-align-left-icon />
-      <span class="sr-only">{{ ariaLabel1 }}</span>
-    </button>
-
-    <button
-      [attr.aria-label]="ariaLabel2"
-      [scTooltip]="ariaLabel2"
-      (click)="setCenterAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg-align-center-icon />
-      <span class="sr-only">{{ ariaLabel2 }}</span>
-    </button>
-
-    <button
-      [attr.aria-label]="ariaLabel3"
-      [scTooltip]="ariaLabel3"
-      (click)="setRightAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg-align-right-icon />
-      <span class="sr-only">{{ ariaLabel3 }}</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgAlignLeftIcon, selector: "svg-align-left-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgAlignRightIcon, selector: "svg-align-right-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgAlignCenterIcon, selector: "svg-align-center-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionTextAlignAction, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-extension-text-align', imports: [ScTooltip, SvgAlignLeftIcon, SvgAlignRightIcon, SvgAlignCenterIcon, ScToggle], template: `
-    <button
-      [attr.aria-label]="ariaLabel1"
-      [scTooltip]="ariaLabel1"
-      (click)="setLeftAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg-align-left-icon />
-      <span class="sr-only">{{ ariaLabel1 }}</span>
-    </button>
-
-    <button
-      [attr.aria-label]="ariaLabel2"
-      [scTooltip]="ariaLabel2"
-      (click)="setCenterAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg-align-center-icon />
-      <span class="sr-only">{{ ariaLabel2 }}</span>
-    </button>
-
-    <button
-      [attr.aria-label]="ariaLabel3"
-      [scTooltip]="ariaLabel3"
-      (click)="setRightAlign()"
-      type="button"
-      sc-toggle
-      variant="outline"
-    >
-      <svg-align-right-icon />
-      <span class="sr-only">{{ ariaLabel3 }}</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [] });
-
 class ScExtensionTextStyle {
     parent = inject(ScEditor, { host: true });
     extensions = inject(ScExtensions);
@@ -4268,7 +4407,7 @@ class ScExtensionUnderline {
       <svg-underline-icon />
       <span class="sr-only">{{ ariaLabel }}</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgUnderlineIcon, selector: "svg-underline-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: SvgUnderlineIcon, selector: "svg-underline-icon", inputs: ["class"] }, { kind: "component", type: ScToggle, selector: "button[sc-toggle]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionUnderline, decorators: [{
             type: Component,
@@ -4601,30 +4740,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
-class ScExtensionsGroup {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionsGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScExtensionsGroup, isStandalone: true, selector: "sc-extensions-group", ngImport: i0, template: `
-    <div class="flex flex-wrap items-center gap-1 py-1">
-      <ng-content />
-    </div>
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScExtensionsGroup, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-extensions-group', imports: [], template: `
-    <div class="flex flex-wrap items-center gap-1 py-1">
-      <ng-content />
-    </div>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
 class ScEditor {
     _cdr = inject(ChangeDetectorRef);
     editorDiv = viewChild.required('editorDiv');
     _value = signal('');
     _isEditable = signal(true);
     class = input('');
-    classes = computed(() => cn('', this.class()));
+    //TODO change styles
+    classes = computed(() => cn('block w-full rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-600 dark:bg-gray-700', this.class()));
     editorClass = input('');
     editorClasses = computed(() => cn('mx-auto focus:outline-none', scArticleClasses(), this.editorClass()));
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -4777,58 +4900,60 @@ class ScEditor {
                 multi: true,
             },
         ], viewQueries: [{ propertyName: "editorDiv", first: true, predicate: ["editorDiv"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div
-      class="w-full rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-600 dark:bg-gray-700"
-    >
-      <div class="border-b px-3 py-1 dark:border-gray-600">
-        <sc-extensions-group>
-          <sc-extension-history />
-          <sc-extensions-separator />
-          <sc-extension-bold />
-          <sc-extension-italic />
-          <sc-extension-underline />
-          <sc-extension-highlight />
-          <sc-extension-link />
-          <sc-extension-text-style />
-          <sc-extension-color />
-          <sc-extension-font-family />
-          <sc-extensions-separator />
-          <sc-extension-text-align />
-        </sc-extensions-group>
-
-        <sc-extensions-group>
-          <sc-extension-heading />
-          <sc-extension-paragraph />
-          <sc-extensions-separator />
-          <sc-extension-image />
-          <sc-extension-youtube />
-          <sc-extension-bullet-list />
-          <sc-extension-ordered-list />
-          <sc-extension-blockquote />
-          <sc-extensions-separator />
-          <sc-extension-strike />
-          <sc-extension-horizontal-rule />
-          <sc-extension-code />
-        </sc-extensions-group>
-
-        <sc-extensions-group>
-          <sc-extension-table />
-        </sc-extensions-group>
-      </div>
-
-      <div class="rounded-b-lg bg-white px-4 py-2 dark:bg-gray-800">
-        <label class="sr-only" for="wysiwyg-example">Publish post</label>
-        <div
-          class="block w-full border-0 bg-white px-0 text-sm text-gray-800 focus:ring-0 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-400"
-          #editorDiv
-        ></div>
-      </div>
+    <sc-editor-toolbar>
+      <sc-editor-group>
+        <sc-editor-undo />
+        <sc-editor-redo />
+        <sc-separator class="h-5" orientation="vertical" />
+        <sc-extension-bold />
+        <sc-extension-italic />
+        <sc-extension-underline />
+        <sc-extension-highlight />
+        <sc-extension-text-style />
+        <sc-extension-color />
+        <sc-extension-font-family />
+        <sc-extension-link />
+        <sc-editor-unset-link />
+        <sc-separator class="h-5" orientation="vertical" />
+        <sc-editor-text-align-left />
+        <sc-editor-text-align-center />
+        <sc-editor-text-align-right />
+      </sc-editor-group>
+
+      <sc-editor-group>
+        <sc-extension-heading />
+        <sc-extension-paragraph />
+        <sc-separator class="h-5" orientation="vertical" />
+        <sc-extension-image />
+        <sc-extension-youtube />
+        <sc-extension-bullet-list />
+        <sc-extension-ordered-list />
+        <sc-extension-blockquote />
+        <sc-separator class="h-5" orientation="vertical" />
+        <sc-extension-strike />
+        <sc-extension-horizontal-rule />
+        <sc-extension-code />
+      </sc-editor-group>
+
+      <sc-editor-group>
+        <sc-extension-table />
+      </sc-editor-group>
+    </sc-editor-toolbar>
+
+    <div class="rounded-b-lg bg-white px-4 py-2 dark:bg-gray-800">
+      <label class="sr-only" for="wysiwyg-example">Publish post</label>
+      <div
+        class="block w-full border-0 bg-white px-0 text-sm text-gray-800 focus:ring-0 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-400"
+        #editorDiv
+      ></div>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScExtensionHighlight, selector: "sc-extension-highlight" }, { kind: "component", type: ScExtensionColor, selector: "sc-extension-color" }, { kind: "component", type: ScExtensionBold, selector: "sc-extension-bold" }, { kind: "component", type: ScExtensionUnderline, selector: "sc-extension-underline" }, { kind: "component", type: ScExtensionYoutube, selector: "sc-extension-youtube" }, { kind: "component", type: ScExtensionImage, selector: "sc-extension-image" }, { kind: "component", type: ScExtensionFontFamily, selector: "sc-extension-font-family" }, { kind: "component", type: ScExtensionLink, selector: "sc-extension-link" }, { kind: "component", type: ScExtensionItalic, selector: "sc-extension-italic" }, { kind: "component", type: ScExtensionBlockquote, selector: "sc-extension-blockquote" }, { kind: "component", type: ScExtensionBulletList, selector: "sc-extension-bullet-list" }, { kind: "component", type: ScExtensionOrderedList, selector: "sc-extension-ordered-list" }, { kind: "component", type: ScExtensionTextAlignAction, selector: "sc-extension-text-align" }, { kind: "component", type: ScExtensionTextStyle, selector: "sc-extension-text-style" }, { kind: "component", type: ScExtensionParagraph, selector: "sc-extension-paragraph" }, { kind: "component", type: ScExtensionHistory, selector: "sc-extension-history" }, { kind: "component", type: ScExtensionsSeparator, selector: "sc-extensions-separator", inputs: ["class"] }, { kind: "component", type: ScExtensionsGroup, selector: "sc-extensions-group" }, { kind: "component", type: ScExtensionStrike, selector: "sc-extension-strike" }, { kind: "component", type: ScExtensionHorizontalRule, selector: "sc-extension-horizontal-rule" }, { kind: "component", type: ScExtensionCode, selector: "sc-extension-code" }, { kind: "component", type: ScExtensionHeading, selector: "sc-extension-heading" }, { kind: "component", type: ScExtensionTable, selector: "sc-extension-table" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScEditorUndo, selector: "sc-editor-undo" }, { kind: "component", type: ScEditorRedo, selector: "sc-editor-redo" }, { kind: "component", type: ScExtensionHighlight, selector: "sc-extension-highlight" }, { kind: "component", type: ScExtensionColor, selector: "sc-extension-color" }, { kind: "component", type: ScExtensionBold, selector: "sc-extension-bold" }, { kind: "component", type: ScExtensionUnderline, selector: "sc-extension-underline" }, { kind: "component", type: ScExtensionYoutube, selector: "sc-extension-youtube" }, { kind: "component", type: ScExtensionImage, selector: "sc-extension-image" }, { kind: "component", type: ScExtensionFontFamily, selector: "sc-extension-font-family" }, { kind: "component", type: ScExtensionLink, selector: "sc-extension-link" }, { kind: "component", type: ScExtensionItalic, selector: "sc-extension-italic" }, { kind: "component", type: ScExtensionBlockquote, selector: "sc-extension-blockquote" }, { kind: "component", type: ScExtensionBulletList, selector: "sc-extension-bullet-list" }, { kind: "component", type: ScExtensionOrderedList, selector: "sc-extension-ordered-list" }, { kind: "component", type: ScExtensionTextStyle, selector: "sc-extension-text-style" }, { kind: "component", type: ScExtensionParagraph, selector: "sc-extension-paragraph" }, { kind: "component", type: ScSeparator, selector: "sc-separator", inputs: ["orientation", "class"] }, { kind: "component", type: ScEditorGroup, selector: "sc-editor-group", inputs: ["class"] }, { kind: "component", type: ScExtensionStrike, selector: "sc-extension-strike" }, { kind: "component", type: ScExtensionHorizontalRule, selector: "sc-extension-horizontal-rule" }, { kind: "component", type: ScExtensionCode, selector: "sc-extension-code" }, { kind: "component", type: ScExtensionHeading, selector: "sc-extension-heading" }, { kind: "component", type: ScExtensionTable, selector: "sc-extension-table" }, { kind: "component", type: ScEditorToolbar, selector: "sc-editor-toolbar", inputs: ["class"] }, { kind: "component", type: ScEditorUnsetLink, selector: "sc-editor-unset-link" }, { kind: "component", type: ScEditorTextAlignRight, selector: "sc-editor-text-align-right" }, { kind: "component", type: ScEditorTextAlignLeft, selector: "sc-editor-text-align-left" }, { kind: "component", type: ScEditorTextAlignCenter, selector: "sc-editor-text-align-center" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditor, decorators: [{
             type: Component,
             args: [{ selector: 'sc-editor', imports: [
+                        ScEditorUndo,
+                        ScEditorRedo,
                         ScExtensionHighlight,
                         ScExtensionColor,
                         ScExtensionBold,
@@ -4841,64 +4966,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         ScExtensionBlockquote,
                         ScExtensionBulletList,
                         ScExtensionOrderedList,
-                        ScExtensionTextAlignAction,
                         ScExtensionTextStyle,
                         ScExtensionParagraph,
-                        ScExtensionHistory,
-                        ScExtensionsSeparator,
-                        ScExtensionsGroup,
+                        ScSeparator,
+                        ScEditorGroup,
                         ScExtensionStrike,
                         ScExtensionHorizontalRule,
                         ScExtensionCode,
                         ScExtensionHeading,
                         ScExtensionTable,
+                        ScEditorToolbar,
+                        ScEditorUnsetLink,
+                        ScEditorTextAlignRight,
+                        ScEditorTextAlignLeft,
+                        ScEditorTextAlignCenter,
                     ], template: `
-    <div
-      class="w-full rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-600 dark:bg-gray-700"
-    >
-      <div class="border-b px-3 py-1 dark:border-gray-600">
-        <sc-extensions-group>
-          <sc-extension-history />
-          <sc-extensions-separator />
-          <sc-extension-bold />
-          <sc-extension-italic />
-          <sc-extension-underline />
-          <sc-extension-highlight />
-          <sc-extension-link />
-          <sc-extension-text-style />
-          <sc-extension-color />
-          <sc-extension-font-family />
-          <sc-extensions-separator />
-          <sc-extension-text-align />
-        </sc-extensions-group>
-
-        <sc-extensions-group>
-          <sc-extension-heading />
-          <sc-extension-paragraph />
-          <sc-extensions-separator />
-          <sc-extension-image />
-          <sc-extension-youtube />
-          <sc-extension-bullet-list />
-          <sc-extension-ordered-list />
-          <sc-extension-blockquote />
-          <sc-extensions-separator />
-          <sc-extension-strike />
-          <sc-extension-horizontal-rule />
-          <sc-extension-code />
-        </sc-extensions-group>
-
-        <sc-extensions-group>
-          <sc-extension-table />
-        </sc-extensions-group>
-      </div>
-
-      <div class="rounded-b-lg bg-white px-4 py-2 dark:bg-gray-800">
-        <label class="sr-only" for="wysiwyg-example">Publish post</label>
-        <div
-          class="block w-full border-0 bg-white px-0 text-sm text-gray-800 focus:ring-0 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-400"
-          #editorDiv
-        ></div>
-      </div>
+    <sc-editor-toolbar>
+      <sc-editor-group>
+        <sc-editor-undo />
+        <sc-editor-redo />
+        <sc-separator class="h-5" orientation="vertical" />
+        <sc-extension-bold />
+        <sc-extension-italic />
+        <sc-extension-underline />
+        <sc-extension-highlight />
+        <sc-extension-text-style />
+        <sc-extension-color />
+        <sc-extension-font-family />
+        <sc-extension-link />
+        <sc-editor-unset-link />
+        <sc-separator class="h-5" orientation="vertical" />
+        <sc-editor-text-align-left />
+        <sc-editor-text-align-center />
+        <sc-editor-text-align-right />
+      </sc-editor-group>
+
+      <sc-editor-group>
+        <sc-extension-heading />
+        <sc-extension-paragraph />
+        <sc-separator class="h-5" orientation="vertical" />
+        <sc-extension-image />
+        <sc-extension-youtube />
+        <sc-extension-bullet-list />
+        <sc-extension-ordered-list />
+        <sc-extension-blockquote />
+        <sc-separator class="h-5" orientation="vertical" />
+        <sc-extension-strike />
+        <sc-extension-horizontal-rule />
+        <sc-extension-code />
+      </sc-editor-group>
+
+      <sc-editor-group>
+        <sc-extension-table />
+      </sc-editor-group>
+    </sc-editor-toolbar>
+
+    <div class="rounded-b-lg bg-white px-4 py-2 dark:bg-gray-800">
+      <label class="sr-only" for="wysiwyg-example">Publish post</label>
+      <div
+        class="block w-full border-0 bg-white px-0 text-sm text-gray-800 focus:ring-0 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-400"
+        #editorDiv
+      ></div>
     </div>
   `, host: {
                         '[class]': 'classes()',
@@ -4911,7 +5039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     ] }]
         }], ctorParameters: () => [] });
 
-const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_.svg]:pointer-events-none [&_.svg]:size-4 [&_.svg]:shrink-0', {
+const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         variant: {
             primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
@@ -4936,10 +5064,15 @@ const buttonVariants = cva('inline-flex items-center justify-center gap-2 whites
 class ScButton {
     variant = input('primary');
     size = input('default');
-    class = input('');
-    classes = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.class()));
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.classInput()));
+    disabled = input(false, {
+        transform: booleanAttribute,
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScButton, isStandalone: true, selector: "button[sc-button], a[sc-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScButton, isStandalone: true, selector: "button[sc-button], a[sc-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()", "attr.data-disabled": "disabled()" } }, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -4948,81 +5081,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{ selector: 'button[sc-button], a[sc-button]', imports: [], template: `
     <ng-content />
   `, host: {
-                        '[class]': 'classes()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScListbox {
-    class = input('');
-    classes = computed(() => cn('relative z-50 max-h-96 w-full min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', this.class()));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScListbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScListbox, isStandalone: true, selector: "ul[sc-listbox]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
-    <ng-content />
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScListbox, decorators: [{
-            type: Component,
-            args: [{ selector: 'ul[sc-listbox]', imports: [], template: `
-    <ng-content />
-  `, host: {
-                        '[class]': 'classes()',
+                        '[class]': 'class()',
+                        '[attr.data-disabled]': 'disabled()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
-class ScListboxOption {
-    class = input('');
-    classes = computed(() => cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.class()));
-    isSelected = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScListboxOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScListboxOption, isStandalone: true, selector: "li[sc-listbox-option]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
-    @if (isSelected()) {
-      <svg-check-icon class="absolute left-2 flex size-4 items-center justify-center" />
-    }
-
-    <ng-content />
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+class ScSelectState {
+    //1 undefined for init
+    //2 selected value
+    //3 null nothing selected
+    value = signal(undefined);
+    disabled = signal(false);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSelectState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSelectState });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScListboxOption, decorators: [{
-            type: Component,
-            args: [{ selector: 'li[sc-listbox-option]', imports: [SvgCheckIcon], template: `
-    @if (isSelected()) {
-      <svg-check-icon class="absolute left-2 flex size-4 items-center justify-center" />
-    }
-
-    <ng-content />
-  `, host: {
-                        '[class]': 'classes()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSelectState, decorators: [{
+            type: Injectable
         }] });
 
 class ScOption {
+    state = inject(ScSelectState);
+    /** The unique ID of the option. */
+    id = signal(inject(_IdGenerator).getId('sc-option-'));
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[active=true]:bg-accent data-[active=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', this.classInput()));
+    isSelected = computed(() => this.value() === this.state.value());
     value = input.required();
     labelEl = viewChild.required('label');
     label = computed(() => {
-        return this.labelEl().nativeElement.textContent?.trim();
+        return this.labelEl().nativeElement.textContent?.trim() ?? '';
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: ScOption, isStandalone: true, selector: "sc-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "labelEl", first: true, predicate: ["label"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <span #label>
-      <ng-content />
-    </span>
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScOption, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-option', imports: [], template: `
-    <span #label>
-      <ng-content />
-    </span>
-  `, host: {}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScSelect {
-    static nextId = 0;
-    id = 0;
-    _getPanelId() {
-        return `panel-${this.id}`;
+    element = inject(ElementRef);
+    /** Gets the host DOM element. */
+    getHostElement() {
+        return this.element.nativeElement;
+    }
+    active = signal(false);
+    setActiveStyles() {
+        this.active.set(true);
+    }
+    setInactiveStyles() {
+        this.active.set(false);
+    }
+    disabled;
+    getLabel() {
+        return this.label();
+    }
+    disabledByInput = input(false, {
+        alias: 'disabled',
+        transform: booleanAttribute,
+    });
+    _disabled = computed(() => this.disabledByInput() || this.disabled || this.state.disabled());
+    toggle() {
+        if (this.isSelected()) {
+            this.deselect();
+        }
+        else {
+            this.select();
+        }
+    }
+    select() {
+        if (this._disabled()) {
+            return;
+        }
+        this.state.value.set(this.value());
+    }
+    deselect() {
+        if (this._disabled()) {
+            return;
+        }
+        this.state.value.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScOption, isStandalone: true, selector: "sc-option", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabledByInput: { classPropertyName: "disabledByInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseover": "setActiveStyles()", "mouseleave": "setInactiveStyles()", "click": "toggle()" }, properties: { "id": "id()", "class": "class()", "attr.data-disabled": "_disabled()", "attr.data-active": "active()" } }, viewQueries: [{ propertyName: "labelEl", first: true, predicate: ["label"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (isSelected()) {
+      <svg-check-icon class="absolute left-2 flex size-4 items-center justify-center" />
+    }
+
+    <span #label>
+      <ng-content />
+    </span>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScOption, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-option', imports: [SvgCheckIcon], template: `
+    @if (isSelected()) {
+      <svg-check-icon class="absolute left-2 flex size-4 items-center justify-center" />
     }
+
+    <span #label>
+      <ng-content />
+    </span>
+  `, host: {
+                        '[id]': 'id()',
+                        '[class]': 'class()',
+                        '[attr.data-disabled]': '_disabled()',
+                        '[attr.data-active]': 'active()',
+                        '(mouseover)': 'setActiveStyles()',
+                        '(mouseleave)': 'setInactiveStyles()',
+                        '(click)': 'toggle()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScSelect {
+    state = inject(ScSelectState);
+    panelId = inject(_IdGenerator).getId('sc-select-panel-');
     _cdr = inject(ChangeDetectorRef);
     _overlay = inject(Overlay);
     _dir = inject(Directionality, { optional: true });
@@ -5032,23 +5198,48 @@ class ScSelect {
     _panelTemplate = viewChild.required('panelTemplate');
     placeholder = input('');
     isOpen = signal(false);
-    constructor() {
-        this.id = ++ScSelect.nextId;
-    }
     options = contentChildren(ScOption);
+    activeDescendant = signal(null);
+    constructor() {
+        effect(() => {
+            //init
+            if (this.state.value() === undefined) {
+                this.state.value.set(this.value());
+            }
+        });
+        effect(() => {
+            if (this.value() !== this.state.value()) {
+                this.setValue(this.state.value());
+            }
+        });
+        effect(() => {
+            this.syncSelectedState(this.value(), this.options(), this.options()[0]);
+        });
+        this.keyManager.change.subscribe(() => this.activeDescendant.set(this.keyManager.activeItem?.id() ?? null));
+    }
+    /**
+     * Scrolls an option into view.
+     * @param option Option to be scrolled into view.
+     * @param position Position to which to align the option relative to the scrollable container.
+     */
+    scrollOptionIntoView(option, position) {
+        option.getHostElement().scrollIntoView({ block: position, inline: position });
+    }
+    injector = inject(Injector);
+    keyManager = new ActiveDescendantKeyManager(this.options, this.injector)
+        .withHomeAndEnd(true)
+        .withPageUpDown(true)
+        .withVerticalOrientation(true);
     value = model(undefined);
     isDisabled = signal(false);
     writeValue(value) {
         this.value.set(value);
     }
-    handleValueChange(v) {
-        this.setValue(v[0]);
-        this.close();
-    }
     setValue(value) {
         this.value.set(value);
         this._onChange(value);
         this._cdr.markForCheck();
+        this.close();
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     _onChange = () => { };
@@ -5130,39 +5321,84 @@ class ScSelect {
     }
     close() {
         if (this.isOpen()) {
+            this.focusOnTrigger();
             this.isOpen.set(false);
             this._overlayRef?.detach();
         }
     }
+    focusOnTrigger() {
+        this.scSelectTrigger().nativeElement.focus();
+    }
+    /**
+     * Synchronizes the internal state of the component based on a specific selected date.
+     * @param value Currently selected date.
+     * @param options Options rendered out in the timepicker.
+     * @param fallback Option to set as active if no option is selected.
+     */
+    syncSelectedState(value, options, fallback) {
+        let hasSelected = false;
+        for (const option of options) {
+            if (value && option.value() === value) {
+                this.scrollOptionIntoView(option, 'center');
+                untracked(() => this.keyManager.setActiveItem(option));
+                hasSelected = true;
+            }
+        }
+        // If no option was selected, we need to reset the key manager since
+        // it might be holding onto an option that no longer exists.
+        if (!hasSelected) {
+            if (fallback) {
+                untracked(() => this.keyManager.setActiveItem(fallback));
+                this.scrollOptionIntoView(fallback, 'center');
+            }
+            else {
+                untracked(() => this.keyManager.setActiveItem(-1));
+            }
+        }
+    }
     /** Handles keyboard events while the overlay is open. */
     _handleKeydown(event) {
-        const keyCode = event.keyCode;
-        if (keyCode === TAB) {
+        const key = event.key;
+        if (key === 'Tab') {
             this.close();
         }
-        else if (keyCode === ESCAPE && !hasModifierKey(event)) {
+        else if (key === 'Escape' && !hasModifierKey(event)) {
             event.preventDefault();
             this.close();
         }
-        else if (keyCode === ENTER) {
-            //TODO for me it's mean it's was selected
-            this.close();
+        else if (key === 'Enter') {
+            event.preventDefault();
+            if (this.keyManager.activeItem) {
+                this.setValue(this.keyManager.activeItem.value() ?? '');
+            }
+            else {
+                this.close();
+            }
+        }
+        else {
+            const previousActive = this.keyManager.activeItem;
+            this.keyManager.onKeydown(event);
+            const currentActive = this.keyManager.activeItem;
+            if (currentActive && currentActive !== previousActive) {
+                this.scrollOptionIntoView(currentActive, 'nearest');
+            }
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScSelect, isStandalone: true, selector: "sc-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: ScSelect, isStandalone: true, selector: "sc-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ScSelect),
                 multi: true,
             },
+            ScSelectState,
         ], queries: [{ propertyName: "options", predicate: ScOption, isSignal: true }], viewQueries: [{ propertyName: "scSelectTrigger", first: true, predicate: ["scSelectTrigger"], descendants: true, isSignal: true }, { propertyName: "_panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <button
       class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1"
       #scSelectTrigger
       [disabled]="isDisabled()"
       [attr.aria-expanded]="_isExpanded()"
-      [attr.aria-controls]="_getPanelId()"
+      [attr.aria-controls]="panelId"
       (click)="open()"
       type="button"
       role="combobox"
@@ -5173,43 +5409,24 @@ class ScSelect {
 
     <ng-template #panelTemplate>
       <ul
-        [id]="_getPanelId()"
-        [cdkTrapFocusAutoCapture]="true"
-        (cdkListboxValueChange)="handleValueChange($event.value)"
-        sc-listbox
-        cdkListbox
-        cdkTrapFocus
+        class="relative z-50 max-h-96 w-full min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        [id]="panelId"
+        role="listbox"
       >
-        @for (option of options(); track $index) {
-          <li
-            [isSelected]="option.value() === this.value()"
-            [cdkOption]="option.value()"
-            sc-listbox-option
-          >
-            {{ option.label() }}
-          </li>
-        }
+        <ng-content />
       </ul>
     </ng-template>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgChevronDownIcon, selector: "svg-chevron-down-icon", inputs: ["class", "svgClass"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "component", type: ScListbox, selector: "ul[sc-listbox]", inputs: ["class"] }, { kind: "component", type: ScListboxOption, selector: "li[sc-listbox-option]", inputs: ["class", "isSelected"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgChevronDownIcon, selector: "svg-chevron-down-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-select', imports: [
-                        SvgChevronDownIcon,
-                        OverlayModule,
-                        ScListbox,
-                        ScListboxOption,
-                        CdkOption,
-                        CdkListbox,
-                        A11yModule,
-                    ], template: `
+            args: [{ selector: 'sc-select', imports: [SvgChevronDownIcon], template: `
     <button
       class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1"
       #scSelectTrigger
       [disabled]="isDisabled()"
       [attr.aria-expanded]="_isExpanded()"
-      [attr.aria-controls]="_getPanelId()"
+      [attr.aria-controls]="panelId"
       (click)="open()"
       type="button"
       role="combobox"
@@ -5220,22 +5437,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
     <ng-template #panelTemplate>
       <ul
-        [id]="_getPanelId()"
-        [cdkTrapFocusAutoCapture]="true"
-        (cdkListboxValueChange)="handleValueChange($event.value)"
-        sc-listbox
-        cdkListbox
-        cdkTrapFocus
+        class="relative z-50 max-h-96 w-full min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        [id]="panelId"
+        role="listbox"
       >
-        @for (option of options(); track $index) {
-          <li
-            [isSelected]="option.value() === this.value()"
-            [cdkOption]="option.value()"
-            sc-listbox-option
-          >
-            {{ option.label() }}
-          </li>
-        }
+        <ng-content />
       </ul>
     </ng-template>
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -5244,6 +5450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             useExisting: forwardRef(() => ScSelect),
                             multi: true,
                         },
+                        ScSelectState,
                     ] }]
         }], ctorParameters: () => [] });
 
@@ -5281,7 +5488,7 @@ class ScPageItem {
         </a>
       }
     </li>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgEllipsisIcon, selector: "svg-ellipsis-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }, { kind: "component", type: SvgEllipsisIcon, selector: "svg-ellipsis-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScPageItem, decorators: [{
             type: Component,
@@ -5522,7 +5729,7 @@ class ScPaginator {
         }
       </ul>
     </nav>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScPageItem, selector: "sc-page-item", inputs: ["currentPage", "page"], outputs: ["pageChanged"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScPagination, selector: "nav[sc-pagination]", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgChevronLeftIcon, selector: "svg-chevron-left-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgChevronsLeftIcon, selector: "svg-chevrons-left-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgChevronRightIcon, selector: "svg-chevron-right-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgChevronsRightIcon, selector: "svg-chevrons-right-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScSelect, selector: "sc-select", inputs: ["placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: ScOption, selector: "sc-option", inputs: ["value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScPageItem, selector: "sc-page-item", inputs: ["currentPage", "page"], outputs: ["pageChanged"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScPagination, selector: "nav[sc-pagination]", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }, { kind: "component", type: SvgChevronLeftIcon, selector: "svg-chevron-left-icon", inputs: ["class"] }, { kind: "component", type: SvgChevronsLeftIcon, selector: "svg-chevrons-left-icon", inputs: ["class"] }, { kind: "component", type: SvgChevronRightIcon, selector: "svg-chevron-right-icon", inputs: ["class"] }, { kind: "component", type: SvgChevronsRightIcon, selector: "svg-chevrons-right-icon", inputs: ["class"] }, { kind: "component", type: ScSelect, selector: "sc-select", inputs: ["placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: ScOption, selector: "sc-option", inputs: ["class", "value", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScPaginator, decorators: [{
             type: Component,
@@ -5782,7 +5989,7 @@ class ScMonthDays {
         {{ day.slice(-2) }}
       </button>
     }
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMonthDays, decorators: [{
             type: Component,
@@ -5855,7 +6062,7 @@ class ScMonthYearHeader {
     >
       <svg-chevron-right-icon />
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgChevronRightIcon, selector: "svg-chevron-right-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgChevronLeftIcon, selector: "svg-chevron-left-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgChevronRightIcon, selector: "svg-chevron-right-icon", inputs: ["class"] }, { kind: "component", type: SvgChevronLeftIcon, selector: "svg-chevron-left-icon", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMonthYearHeader, decorators: [{
             type: Component,
@@ -5892,11 +6099,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }] });
 
 class ScCalendar {
+    _cdr = inject(ChangeDetectorRef);
     class = input('');
     classes = computed(() => cn('', this.class()));
     localeId = inject(LOCALE_ID);
-    year = signal(0);
-    month = signal(0);
+    date = computed(() => {
+        if (this.value()) {
+            return new Date(this.value());
+        }
+        return new Date();
+    });
+    year = linkedSignal(() => this.date().getFullYear());
+    month = linkedSignal(() => this.date().getMonth());
     weekDaysNames = signal([]);
     monthYear = computed(() => {
         const options = {
@@ -5928,18 +6142,31 @@ class ScCalendar {
             .map((e) => e.long)
             .indexOf(dayName);
     });
-    selectedDay = signal('');
-    ngOnInit() {
-        this.init();
-        this.setLocaleDayNames();
+    value = model('');
+    setSelectedDay(day) {
+        this.value.set(day);
+        this._onChange(day);
+        this._cdr.markForCheck();
     }
-    init() {
-        const today = new Date();
-        this.year.set(today.getFullYear());
-        this.month.set(today.getMonth());
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    _onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    _onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value);
     }
-    setSelectedDay(day) {
-        this.selectedDay.set(day);
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    _disabledByCva = signal(false);
+    setDisabledState(isDisabled) {
+        this._disabledByCva.set(isDisabled);
+    }
+    ngOnInit() {
+        this.setLocaleDayNames();
     }
     //https://github.com/angular/angular/issues/57193
     setLocaleDayNames() {
@@ -5999,7 +6226,13 @@ class ScCalendar {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScCalendar, isStandalone: true, selector: "sc-calendar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScCalendar, isStandalone: true, selector: "sc-calendar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ScCalendar),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
     <div sc-card>
       <div sc-card-header>
         <sc-month-year-header [monthYear]="monthYear()" (monthYearChange)="setMonthYear($event)" />
@@ -6010,7 +6243,7 @@ class ScCalendar {
           [weekDaysNames]="weekDaysNames()"
           [days]="monthDays()"
           [firstDayMonth]="firstDayMonth()"
-          [selectedDay]="selectedDay()"
+          [selectedDay]="value()"
           (selectedDayChange)="setSelectedDay($event)"
         />
       </div>
@@ -6020,7 +6253,7 @@ class ScCalendar {
         <button sc-button type="button">Done</button>
       </div>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScMonthYearHeader, selector: "sc-month-year-header", inputs: ["class", "monthYear"], outputs: ["monthYearChange"] }, { kind: "component", type: ScMonthDays, selector: "sc-month-days", inputs: ["class", "weekDaysNames", "days", "firstDayMonth", "selectedDay"], outputs: ["selectedDayChange"] }, { kind: "component", type: ScCard, selector: "div[sc-card]", inputs: ["class"] }, { kind: "component", type: ScCardHeader, selector: "div[sc-card-header]", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }, { kind: "component", type: ScCardFooter, selector: "div[sc-card-footer]", inputs: ["class"] }, { kind: "component", type: ScCardContent, selector: "div[sc-card-content]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScMonthYearHeader, selector: "sc-month-year-header", inputs: ["class", "monthYear"], outputs: ["monthYearChange"] }, { kind: "component", type: ScMonthDays, selector: "sc-month-days", inputs: ["class", "weekDaysNames", "days", "firstDayMonth", "selectedDay"], outputs: ["selectedDayChange"] }, { kind: "component", type: ScCard, selector: "div[sc-card]", inputs: ["class"] }, { kind: "component", type: ScCardHeader, selector: "div[sc-card-header]", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }, { kind: "component", type: ScCardFooter, selector: "div[sc-card-footer]", inputs: ["class"] }, { kind: "component", type: ScCardContent, selector: "div[sc-card-content]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCalendar, decorators: [{
             type: Component,
@@ -6043,7 +6276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
           [weekDaysNames]="weekDaysNames()"
           [days]="monthDays()"
           [firstDayMonth]="firstDayMonth()"
-          [selectedDay]="selectedDay()"
+          [selectedDay]="value()"
           (selectedDayChange)="setSelectedDay($event)"
         />
       </div>
@@ -6055,7 +6288,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
     </div>
   `, host: {
                         '[class]': 'classes()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ScCalendar),
+                            multi: true,
+                        },
+                    ] }]
         }] });
 
 class ScFullCalendar {
@@ -6075,11 +6314,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
+const scInputStyles = signal('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm');
 class ScInput {
-    class = input('');
-    classes = computed(() => cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', this.class()));
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn(scInputStyles(), this.classInput()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScInput, isStandalone: true, selector: "input[sc-input]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScInput, isStandalone: true, selector: "input[sc-input]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -6088,39 +6330,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{ selector: 'input[sc-input]', imports: [], template: `
     <ng-content />
   `, host: {
-                        '[class]': 'classes()',
+                        '[class]': 'class()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
+class ScDateInput {
+    el = inject(ElementRef);
+    dateFormatRegExp = (current) => {
+        switch (current.length) {
+            case 0: {
+                return new RegExp(/^\d$/g);
+            }
+            case 1: {
+                return new RegExp(/^\d{1,2}\/?$/g);
+            }
+            case 2: {
+                return new RegExp(/^\d{1,2}\/\d?$/g);
+            }
+            case 3: {
+                return new RegExp(/^\d{1,2}\/\d{1,2}\/?$/g);
+            }
+            case 4: {
+                return new RegExp(/^\d{1,2}\/\d{1,2}\/?\d?$/g);
+            }
+            case 5: {
+                return new RegExp(/^\d{1,2}\/\d{1,2}\/\d{0,2}$/g);
+            }
+            case 6: {
+                return new RegExp(/^\d{1,2}\/\d{1,2}\/\d{0,3}$/g);
+            }
+            default: {
+                return new RegExp(/^\d{1,2}\/\d{1,2}\/\d{1,4}$/g);
+            }
+        }
+    };
+    previousKey = '';
+    onKeyDown(event) {
+        if (event.key === 'Backspace' ||
+            event.key === 'Delete' ||
+            event.key === 'ArrowLeft' ||
+            event.key === 'ArrowRight' ||
+            (this.previousKey === 'Control' && event.key === 'c') ||
+            (this.previousKey === 'Control' && event.key === 'v') ||
+            (this.previousKey === 'Control' && event.key === 'x')) {
+            this.previousKey = event.key;
+            return;
+        }
+        this.previousKey = event.key;
+        const current = this.el.nativeElement.value;
+        const start = this.el.nativeElement.selectionStart;
+        const end = this.el.nativeElement.selectionEnd;
+        const next = current.slice(0, start) + event.key + current.slice(end);
+        if (this.dateFormatRegExp(current).exec(next) === null) {
+            event.preventDefault();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScDateInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: ScDateInput, isStandalone: true, selector: "[scDateInput]", host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScDateInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scDateInput]',
+                    host: {
+                        '(keydown)': 'onKeyDown($event)',
+                    },
+                }]
+        }] });
+
 class ScDatePicker {
     class = input('');
     classes = computed(() => cn('flex relative', this.class()));
     host = inject(ElementRef);
-    localeId = inject(LOCALE_ID);
-    dateFormatPattern = signal('');
-    ngOnInit() {
-        this.dateFormatPattern.set(this.getDateFormatPattern(this.localeId));
-    }
-    getDateFormatPattern(localeId) {
-        const getPatternForPart = (part) => {
-            switch (part.type) {
-                case 'day':
-                    return 'd'.repeat(part.value.length);
-                case 'month':
-                    return 'M'.repeat(part.value.length);
-                case 'year':
-                    return 'y'.repeat(part.value.length);
-                case 'literal':
-                    return part.value;
-                default:
-                    throw new Error('no default');
-            }
-        };
-        return new Intl.DateTimeFormat(localeId)
-            .formatToParts(new Date('2022-01-01'))
-            .map(getPatternForPart)
-            .join('');
-    }
     _injector = inject(Injector);
     _dir = inject(Directionality, { optional: true });
     _overlay = inject(Overlay);
@@ -6223,16 +6504,16 @@ class ScDatePicker {
     <button class="absolute inset-y-0 end-0 pe-4" (click)="open()" sc-button variant="ghost">
       <svg-calendar-icon />
     </button>
-    <input #input sc-input type="text" placeholder="Select date" />
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScInput, selector: "input[sc-input]", inputs: ["class"] }, { kind: "component", type: SvgCalendarIcon, selector: "svg-calendar-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    <input #input sc-input scDateInput type="text" placeholder="Select date" />
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScInput, selector: "input[sc-input]", inputs: ["class"] }, { kind: "component", type: SvgCalendarIcon, selector: "svg-calendar-icon", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }, { kind: "directive", type: ScDateInput, selector: "[scDateInput]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScDatePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-date-picker', imports: [ScInput, SvgCalendarIcon, ScButton], template: `
+            args: [{ selector: 'sc-date-picker', imports: [ScInput, SvgCalendarIcon, ScButton, ScDateInput], template: `
     <button class="absolute inset-y-0 end-0 pe-4" (click)="open()" sc-button variant="ghost">
       <svg-calendar-icon />
     </button>
-    <input #input sc-input type="text" placeholder="Select date" />
+    <input #input sc-input scDateInput type="text" placeholder="Select date" />
   `, host: {
                         '[class]': 'classes()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
@@ -6439,7 +6720,7 @@ class ScThemeToggler {
         <svg-sun-icon />
       }
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgMoonIcon, selector: "svg-moon-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgSunIcon, selector: "svg-sun-icon", inputs: ["class", "svgClass"] }, { kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgMoonIcon, selector: "svg-moon-icon", inputs: ["class"] }, { kind: "component", type: SvgSunIcon, selector: "svg-sun-icon", inputs: ["class"] }, { kind: "directive", type: ScTooltip, selector: "[scTooltip]", inputs: ["scTooltip", "position"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScThemeToggler, decorators: [{
             type: Component,
@@ -6800,7 +7081,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class ScBreadcrumbSeparator {
     class = input('');
-    classes = computed(() => cn('[&>.svg]:w-3.5 [&>.svg]:h-3.5', this.class()));
+    classes = computed(() => cn('[&_svg]:w-3.5 [&_svg]:h-3.5', this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScBreadcrumbSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScBreadcrumbSeparator, isStandalone: true, selector: "li[sc-breadcrumb-separator]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, properties: { "attr.aria-hidden": "true", "class": "classes()" } }, ngImport: i0, template: `
     <ng-content />
@@ -6824,7 +7105,7 @@ class ScBreadcrumbEllipsis {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScBreadcrumbEllipsis, isStandalone: true, selector: "span[sc-breadcrumb-ellipsis]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, properties: { "attr.aria-hidden": "true", "class": "classes()" } }, ngImport: i0, template: `
     <svg-ellipsis-icon class="size-4" />
     <span class="sr-only">More</span>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgEllipsisIcon, selector: "svg-ellipsis-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgEllipsisIcon, selector: "svg-ellipsis-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScBreadcrumbEllipsis, decorators: [{
             type: Component,
@@ -6838,6 +7119,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
+class ScToggleGroup {
+    type = input('single');
+    class = input('');
+    _class = computed(() => cn('flex items-center justify-center gap-1', this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScToggleGroup, isStandalone: true, selector: "sc-toggle-group", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScToggleGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-toggle-group', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': '_class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScToggleGroupItem {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScToggleGroupItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScToggleGroupItem, isStandalone: true, selector: "sc-toggle-group-item", ngImport: i0, template: `
+    <p>toggle-group-item works!</p>
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScToggleGroupItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-toggle-group-item', imports: [], template: `
+    <p>toggle-group-item works!</p>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
 class ScDialogClose {
     class = input('');
     classes = computed(() => cn('absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground', this.class()));
@@ -6960,7 +7272,7 @@ class ScDialog {
         <button sc-button type="submit">Save changes</button>
       </div>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScDialogHeader, selector: "div[sc-dialog-header]", inputs: ["class"] }, { kind: "component", type: ScDialogTitle, selector: "h2[sc-dialog-title]", inputs: ["class"] }, { kind: "component", type: ScDialogDescription, selector: "p[sc-dialog-description]", inputs: ["class"] }, { kind: "component", type: ScDialogFooter, selector: "div[sc-dialog-footer]", inputs: ["class"] }, { kind: "component", type: ScDialogClose, selector: "button[sc-dialog-close]", inputs: ["class"] }, { kind: "component", type: SvgXIcon, selector: "svg-x-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScDialogContent, selector: "div[sc-dialog-content]", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScDialogHeader, selector: "div[sc-dialog-header]", inputs: ["class"] }, { kind: "component", type: ScDialogTitle, selector: "h2[sc-dialog-title]", inputs: ["class"] }, { kind: "component", type: ScDialogDescription, selector: "p[sc-dialog-description]", inputs: ["class"] }, { kind: "component", type: ScDialogFooter, selector: "div[sc-dialog-footer]", inputs: ["class"] }, { kind: "component", type: ScDialogClose, selector: "button[sc-dialog-close]", inputs: ["class"] }, { kind: "component", type: SvgXIcon, selector: "svg-x-icon", inputs: ["class"] }, { kind: "component", type: ScDialogContent, selector: "div[sc-dialog-content]", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScDialog, decorators: [{
             type: Component,
@@ -6993,11 +7305,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
-const alertVariants = cva('relative w-full rounded-lg border p-4 [&>.svg+div]:translate-y-[-3px] [&>.svg]:absolute [&>.svg]:left-4 [&>.svg]:top-4 [&>.svg]:text-foreground [&>.svg~*]:pl-7', {
+const alertVariants = cva('relative w-full rounded-lg border p-4 [&_svg]:size-4 [&>.svg-host+p]:translate-y-[-3px] [&_svg]:absolute [&_svg]:left-4 [&_svg]:top-4 [&_svg]:text-foreground [&>.svg-host~*]:pl-7', {
     variants: {
         variant: {
             default: 'bg-background text-foreground',
-            destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>.svg]:text-destructive',
+            destructive: 'border-destructive/50 text-destructive dark:border-destructive [&_svg]:text-destructive',
         },
     },
     defaultVariants: {
@@ -7166,7 +7478,7 @@ class ScAlertDialog {
         <button sc-button>Continue</button>
       </div>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }, { kind: "component", type: ScAlertDialogFooter, selector: "div[sc-alert-dialog-footer]", inputs: ["class"] }, { kind: "component", type: ScAlertDialogHeader, selector: "div[sc-alert-dialog-header]", inputs: ["class"] }, { kind: "component", type: scAlertDialogDescription, selector: "p[sc-alert-dialog-description]", inputs: ["class"] }, { kind: "component", type: ScAlertDialogTitle, selector: "h2[sc-alert-dialog-title]", inputs: ["class"] }, { kind: "component", type: ScAlertDialogContent, selector: "div[sc-alert-dialog-content]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }, { kind: "component", type: ScAlertDialogFooter, selector: "div[sc-alert-dialog-footer]", inputs: ["class"] }, { kind: "component", type: ScAlertDialogHeader, selector: "div[sc-alert-dialog-header]", inputs: ["class"] }, { kind: "component", type: scAlertDialogDescription, selector: "p[sc-alert-dialog-description]", inputs: ["class"] }, { kind: "component", type: ScAlertDialogTitle, selector: "h2[sc-alert-dialog-title]", inputs: ["class"] }, { kind: "component", type: ScAlertDialogContent, selector: "div[sc-alert-dialog-content]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScAlertDialog, decorators: [{
             type: Component,
@@ -7231,47 +7543,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class ScScrollArea {
     host = inject(ElementRef);
-    class = input('');
-    classes = computed(() => cn('', this.class()));
-    visibility = input('native');
-    //TODO remove use of ngAfterViewInit
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('', this.classInput()));
     ngAfterViewInit() {
         const height = this.host.nativeElement.scrollHeight;
         console.log(height);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScScrollArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScScrollArea, isStandalone: true, selector: "div[sc-scroll-area]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, visibility: { classPropertyName: "visibility", publicName: "visibility", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
-    <ng-scrollbar
-      [visibility]="visibility()"
-      [style]="{
-        '--scrollbar-border-radius': '100px',
-        '--scrollbar-padding': '1px',
-        '--scrollbar-thumb-color': 'hsl(var(--border))',
-        '--scrollbar-thumb-hover-color': 'hsl(var(--border))',
-        '--scrollbar-size': '7px',
-      }"
-    >
-      <ng-content />
-    </ng-scrollbar>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i1$2.NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScScrollArea, isStandalone: true, selector: "div[sc-scroll-area]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScScrollArea, decorators: [{
             type: Component,
-            args: [{ selector: 'div[sc-scroll-area]', imports: [NgScrollbarModule], template: `
-    <ng-scrollbar
-      [visibility]="visibility()"
-      [style]="{
-        '--scrollbar-border-radius': '100px',
-        '--scrollbar-padding': '1px',
-        '--scrollbar-thumb-color': 'hsl(var(--border))',
-        '--scrollbar-thumb-hover-color': 'hsl(var(--border))',
-        '--scrollbar-size': '7px',
-      }"
-    >
-      <ng-content />
-    </ng-scrollbar>
+            args: [{ selector: 'div[sc-scroll-area]', imports: [], template: `
+    <ng-content />
   `, host: {
-                        '[class]': 'classes()',
+                        '[class]': 'class()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
@@ -7348,7 +7638,7 @@ class ScTabs {
     </div>
 
     <ng-content />
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabs, decorators: [{
             type: Component,
@@ -7407,48 +7697,205 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
-const toastVariants = cva('group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full', {
-    variants: {
-        variant: {
-            default: 'border bg-background text-foreground',
-            destructive: 'destructive group border-destructive bg-destructive text-destructive-foreground',
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-    },
-});
-class ScToast {
-    variant = input('default');
-    class = input('');
-    classes = computed(() => cn(toastVariants({ variant: this.variant() }), this.class()));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScToast, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScToast, isStandalone: true, selector: "li[sc-toast]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
-    <ng-content />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+class ScTabContent2 {
+    template = viewChild.required('template');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabContent2, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: ScTabContent2, isStandalone: true, selector: "sc-tab-content2", viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #template>
+      <ng-content />
+    </ng-template>
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScToast, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabContent2, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'li[sc-toast]',
-                    imports: [],
-                    template: `
-    <ng-content />
-  `,
-                    host: {
-                        '[class]': 'classes()',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
+            args: [{ selector: 'sc-tab-content2', imports: [], template: `
+    <ng-template #template>
+      <ng-content />
+    </ng-template>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
-class Toaster {
-    overlayRef;
-    overlay = inject(Overlay);
-    constructor() {
-        // Initialize an overlay and define a relative position
-        // Change this to control where your toaster should appear
+class ScTabLabel2 {
+    template = viewChild.required('template');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabLabel2, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: ScTabLabel2, isStandalone: true, selector: "sc-tab-label2", viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #template>
+      <ng-content />
+    </ng-template>
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabLabel2, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-tab-label2', imports: [], template: `
+    <ng-template #template>
+      <ng-content />
+    </ng-template>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [] }]
+        }] });
+
+class ScTabGroup {
+    tabLabels = contentChildren(ScTabLabel2, { descendants: true });
+    tabContents = contentChildren(ScTabContent2, { descendants: true });
+    ngAfterViewInit() {
+        console.log(this.tabLabels());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScTabGroup, isStandalone: true, selector: "sc-tab-group", queries: [{ propertyName: "tabLabels", predicate: ScTabLabel2, descendants: true, isSignal: true }, { propertyName: "tabContents", predicate: ScTabContent2, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="group relative my-4 flex flex-col space-y-2">
+      <div class="relative mr-auto w-full" dir="ltr" data-orientation="horizontal">
+        <div class="flex items-center justify-between pb-3">
+          <div
+            class="inline-flex h-9 w-full items-center justify-start rounded-none border-b bg-transparent p-0 text-muted-foreground"
+            style="outline: none;"
+            tabindex="0"
+            data-orientation="horizontal"
+          >
+            @for (tab of tabLabels(); track tab) {
+              <ng-container [ngTemplateOutlet]="tab.template()"></ng-container>
+            }
+          </div>
+        </div>
+        <div
+          class="relative mt-2 rounded-md border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          id="radix-:r17g:-content-preview"
+          style="animation-duration: 0s;"
+          tabindex="0"
+          data-state="active"
+          data-orientation="horizontal"
+        >
+          <div class="theme-zinc w-full" style="--radius: 0.5rem;">
+            <div class="preview flex min-h-[350px] w-full items-center justify-center p-10">
+              <div
+                class="relative h-72 w-48 overflow-hidden rounded-md border"
+                dir="ltr"
+                style="position: relative; --radix-scroll-area-corner-width: 0px; --radix-scroll-area-corner-height: 0px;"
+              >
+                <div
+                  class="size-full rounded-[inherit]"
+                  style="overflow: hidden scroll;"
+                  data-radix-scroll-area-viewport=""
+                >
+                  @for (content of tabContents(); track content) {
+                    <ng-container [ngTemplateOutlet]="content.template()"></ng-container>
+                  }
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <ng-content />
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-tab-group', imports: [NgTemplateOutlet], template: `
+    <div class="group relative my-4 flex flex-col space-y-2">
+      <div class="relative mr-auto w-full" dir="ltr" data-orientation="horizontal">
+        <div class="flex items-center justify-between pb-3">
+          <div
+            class="inline-flex h-9 w-full items-center justify-start rounded-none border-b bg-transparent p-0 text-muted-foreground"
+            style="outline: none;"
+            tabindex="0"
+            data-orientation="horizontal"
+          >
+            @for (tab of tabLabels(); track tab) {
+              <ng-container [ngTemplateOutlet]="tab.template()"></ng-container>
+            }
+          </div>
+        </div>
+        <div
+          class="relative mt-2 rounded-md border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          id="radix-:r17g:-content-preview"
+          style="animation-duration: 0s;"
+          tabindex="0"
+          data-state="active"
+          data-orientation="horizontal"
+        >
+          <div class="theme-zinc w-full" style="--radius: 0.5rem;">
+            <div class="preview flex min-h-[350px] w-full items-center justify-center p-10">
+              <div
+                class="relative h-72 w-48 overflow-hidden rounded-md border"
+                dir="ltr"
+                style="position: relative; --radix-scroll-area-corner-width: 0px; --radix-scroll-area-corner-height: 0px;"
+              >
+                <div
+                  class="size-full rounded-[inherit]"
+                  style="overflow: hidden scroll;"
+                  data-radix-scroll-area-viewport=""
+                >
+                  @for (content of tabContents(); track content) {
+                    <ng-container [ngTemplateOutlet]="content.template()"></ng-container>
+                  }
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <ng-content />
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScTabItem {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScTabItem, isStandalone: true, selector: "sc-tab-item", ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTabItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-tab-item', imports: [], template: `
+    <ng-content />
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+const toastVariants = cva('group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full', {
+    variants: {
+        variant: {
+            default: 'border bg-background text-foreground',
+            destructive: 'destructive group border-destructive bg-destructive text-destructive-foreground',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+class ScToast {
+    variant = input('default');
+    class = input('');
+    classes = computed(() => cn(toastVariants({ variant: this.variant() }), this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScToast, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScToast, isStandalone: true, selector: "li[sc-toast]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScToast, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'li[sc-toast]',
+                    imports: [],
+                    template: `
+    <ng-content />
+  `,
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class Toaster {
+    overlayRef;
+    overlay = inject(Overlay);
+    constructor() {
+        // Initialize an overlay and define a relative position
+        // Change this to control where your toaster should appear
         this.overlayRef = this.overlay.create({
             hasBackdrop: false,
             positionStrategy: this.overlay.position().global().top('20px').right('20px'),
@@ -7599,7 +8046,7 @@ class ScToastExample {
     </ol>
 
 -->
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScToastClose, selector: "button[sc-toast-close]", inputs: ["class"] }, { kind: "component", type: SvgXIcon, selector: "svg-x-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScToastAction, selector: "button[sc-toast-action]", inputs: ["class"] }, { kind: "component", type: ScToastDescription, selector: "p[sc-toast-description]", inputs: ["class"] }, { kind: "component", type: ScToastTitle, selector: "h2[sc-toast-title]", inputs: ["class"] }, { kind: "component", type: ScToast, selector: "li[sc-toast]", inputs: ["variant", "class"] }, { kind: "component", type: ScToastContent, selector: "div[sc-toast-content]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScToastClose, selector: "button[sc-toast-close]", inputs: ["class"] }, { kind: "component", type: SvgXIcon, selector: "svg-x-icon", inputs: ["class"] }, { kind: "component", type: ScToastAction, selector: "button[sc-toast-action]", inputs: ["class"] }, { kind: "component", type: ScToastDescription, selector: "p[sc-toast-description]", inputs: ["class"] }, { kind: "component", type: ScToastTitle, selector: "h2[sc-toast-title]", inputs: ["class"] }, { kind: "component", type: ScToast, selector: "li[sc-toast]", inputs: ["variant", "class"] }, { kind: "component", type: ScToastContent, selector: "div[sc-toast-content]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScToastExample, decorators: [{
             type: Component,
@@ -7962,7 +8409,7 @@ class ScCheckbox {
     } @else if (checked() === true) {
       <svg-check-icon [class]="svgClasses()" />
     }
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgMinusIcon, selector: "svg-minus-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class"] }, { kind: "component", type: SvgMinusIcon, selector: "svg-minus-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCheckbox, decorators: [{
             type: Component,
@@ -8002,7 +8449,7 @@ class ScAccordion {
     <cdk-accordion>
       <ng-content />
     </cdk-accordion>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i1$4.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i1$2.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScAccordion, decorators: [{
             type: Component,
@@ -8034,7 +8481,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class ScAccordionTrigger {
     class = input('');
-    classes = computed(() => cn('flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>.svg]:rotate-180', this.class()));
+    classes = computed(() => cn('flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180', this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScAccordionTrigger, isStandalone: true, selector: "button[sc-accordion-trigger]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
     <ng-content />
@@ -8071,7 +8518,7 @@ class ScAccordionItem {
         <ng-content select="sc-accordion-content" />
       }
     </cdk-accordion-item>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i1$4.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "component", type: SvgChevronDownIcon, selector: "svg-chevron-down-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgChevronUpIcon, selector: "svg-chevron-up-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScAccordionHeader, selector: "h3[sc-accordion-header]", inputs: ["class"] }, { kind: "component", type: ScAccordionTrigger, selector: "button[sc-accordion-trigger]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i1$2.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "component", type: SvgChevronDownIcon, selector: "svg-chevron-down-icon", inputs: ["class"] }, { kind: "component", type: SvgChevronUpIcon, selector: "svg-chevron-up-icon", inputs: ["class"] }, { kind: "component", type: ScAccordionHeader, selector: "h3[sc-accordion-header]", inputs: ["class"] }, { kind: "component", type: ScAccordionTrigger, selector: "button[sc-accordion-trigger]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScAccordionItem, decorators: [{
             type: Component,
@@ -8335,23 +8782,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class ScRadioItem {
     state = inject(ScRadioGroupState);
-    id = input.required();
+    id = signal(inject(_IdGenerator).getId('sc-radio-item-'));
+    name = computed(() => {
+        return this.state.name();
+    });
     value = input.required();
     checked = computed(() => {
         return this.value() === this.state.selectedValue();
     });
-    name = computed(() => {
-        return this.state.name();
+    disabledByInput = input(false, {
+        alias: 'disabled',
+        transform: booleanAttribute,
     });
-    disabled = input(false);
-    class = input('row-start-1 col-start-1');
-    classes = computed(() => cn('appearance-none aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', this.class()));
-    hostClass = input('');
-    hostClasses = computed(() => cn('flex items-center space-x-2', this.hostClass()));
-    circleHostClass = input('row-start-1 col-start-1 h-4 w-4 flex items-center justify-center');
-    circleClass = input('');
-    circleClasses = computed(() => cn('h-2.5 w-2.5 fill-primary text-primary', this.circleClass()));
-    radioChecked = output();
+    disabled = computed(() => this.disabledByInput() || this.state.disabled());
+    class = input('');
+    _class = computed(() => cn('flex items-center space-x-2', this.class()));
+    inputClass = input('');
+    _inputClass = computed(() => cn('row-start-1 col-start-1', 'appearance-none aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', this.inputClass()));
+    svgWrapperClass = input('row-start-1 col-start-1 h-4 w-4 flex items-center justify-center');
+    svgClass = input('');
+    _svgClass = computed(() => cn('h-2.5 w-2.5 fill-primary text-primary', this.svgClass()));
     toggle() {
         if (this.disabled()) {
             return;
@@ -8359,32 +8809,48 @@ class ScRadioItem {
         this.state.selectedValue.set(this.value());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScRadioItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScRadioItem, isStandalone: true, selector: "sc-radio-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, hostClass: { classPropertyName: "hostClass", publicName: "hostClass", isSignal: true, isRequired: false, transformFunction: null }, circleHostClass: { classPropertyName: "circleHostClass", publicName: "circleHostClass", isSignal: true, isRequired: false, transformFunction: null }, circleClass: { classPropertyName: "circleClass", publicName: "circleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { radioChecked: "radioChecked" }, host: { listeners: { "click": "toggle()" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScRadioItem, isStandalone: true, selector: "sc-radio-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabledByInput: { classPropertyName: "disabledByInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, svgWrapperClass: { classPropertyName: "svgWrapperClass", publicName: "svgWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, svgClass: { classPropertyName: "svgClass", publicName: "svgClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggle()" }, properties: { "class": "_class()" } }, ngImport: i0, template: `
     <div class="grid grid-cols-[1fr]">
-      <input [id]="id()" [class]="classes()" [disabled]="disabled()" [name]="name()" type="radio" />
+      <input
+        [id]="id()"
+        [class]="_inputClass()"
+        [disabled]="disabled()"
+        [name]="name()"
+        type="radio"
+      />
 
       @if (checked() === true) {
-        <svg-circle-icon [class]="circleHostClass()" [svgClass]="circleClasses()" />
+        <span [class]="svgWrapperClass()">
+          <svg-circle-icon [class]="_svgClass()" />
+        </span>
       }
     </div>
 
     <label [for]="id()" sc-label><ng-content /></label>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCircleIcon, selector: "svg-circle-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCircleIcon, selector: "svg-circle-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScRadioItem, decorators: [{
             type: Component,
             args: [{ selector: 'sc-radio-item', imports: [SvgCircleIcon], template: `
     <div class="grid grid-cols-[1fr]">
-      <input [id]="id()" [class]="classes()" [disabled]="disabled()" [name]="name()" type="radio" />
+      <input
+        [id]="id()"
+        [class]="_inputClass()"
+        [disabled]="disabled()"
+        [name]="name()"
+        type="radio"
+      />
 
       @if (checked() === true) {
-        <svg-circle-icon [class]="circleHostClass()" [svgClass]="circleClasses()" />
+        <span [class]="svgWrapperClass()">
+          <svg-circle-icon [class]="_svgClass()" />
+        </span>
       }
     </div>
 
     <label [for]="id()" sc-label><ng-content /></label>
   `, host: {
-                        '[class]': 'hostClasses()',
+                        '[class]': '_class()',
                         '(click)': 'toggle()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
@@ -8604,7 +9070,7 @@ class ScInputOTPSeparator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScInputOTPSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScInputOTPSeparator, isStandalone: true, selector: "sc-input-otp-separator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
     <svg-dot-icon />
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgDotIcon, selector: "svg-dot-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgDotIcon, selector: "svg-dot-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScInputOTPSeparator, decorators: [{
             type: Component,
@@ -8972,13 +9438,13 @@ class ScHoverCardTriggerFor {
     viewContainer = inject(ViewContainerRef);
     scHoverCardTriggerFor = input.required();
     overlayRef = null;
-    showTooltip() {
+    showCard() {
         if (this.overlayRef?.hasAttached() === true) {
             return;
         }
         this.attachTooltip();
     }
-    hideTooltip() {
+    hideCard() {
         if (this.overlayRef?.hasAttached() === true) {
             this.overlayRef?.detach();
         }
@@ -8991,14 +9457,6 @@ class ScHoverCardTriggerFor {
             const positionStrategy = this.getPositionStrategy();
             this.overlayRef = this.overlay.create({ positionStrategy });
         }
-        // const injector = Injector.create({
-        //   providers: [
-        //     {
-        //       provide: TOOLTIP_DATA,
-        //       useValue: this.appTooltip,
-        //     },
-        //   ],
-        // });
         const componentPortal = new ComponentPortal(ScHoverCard, this.viewContainer);
         // Attach tooltip portal to overlay
         const componentRef = this.overlayRef.attach(componentPortal);
@@ -9026,26 +9484,20 @@ class ScHoverCardTriggerFor {
         ]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScHoverCardTriggerFor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: ScHoverCardTriggerFor, isStandalone: true, selector: "[scHoverCardTriggerFor]", inputs: { scHoverCardTriggerFor: { classPropertyName: "scHoverCardTriggerFor", publicName: "scHoverCardTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseover": "showTooltip()", "focus": "showTooltip()", "mouseleave": "hideTooltip()", "blur": "hideTooltip()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: ScHoverCardTriggerFor, isStandalone: true, selector: "[scHoverCardTriggerFor]", inputs: { scHoverCardTriggerFor: { classPropertyName: "scHoverCardTriggerFor", publicName: "scHoverCardTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseover": "showCard()", "focus": "showCard()", "mouseleave": "hideCard()", "blur": "hideCard()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScHoverCardTriggerFor, decorators: [{
             type: Directive,
             args: [{
                     selector: '[scHoverCardTriggerFor]',
+                    host: {
+                        '(mouseover)': 'showCard()',
+                        '(focus)': 'showCard()',
+                        '(mouseleave)': 'hideCard()',
+                        '(blur)': 'hideCard()',
+                    },
                 }]
-        }], propDecorators: { showTooltip: [{
-                type: HostListener,
-                args: ['mouseover']
-            }, {
-                type: HostListener,
-                args: ['focus']
-            }], hideTooltip: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }, {
-                type: HostListener,
-                args: ['blur']
-            }] } });
+        }] });
 
 class ScAvatarFallback {
     class = input('');
@@ -9137,33 +9589,33 @@ class ScAspectRatio {
       @if (priority()) {
         <img
           [class]="imageClasses()"
-          [ngSrc]="src()"
+          [src]="src()"
           [alt]="alt()"
           [style]="imageStyle()"
           fill
           priority
         />
       } @else {
-        <img [class]="imageClasses()" [ngSrc]="src()" [alt]="alt()" [style]="imageStyle()" fill />
+        <img [class]="imageClasses()" [src]="src()" [alt]="alt()" [style]="imageStyle()" fill />
       }
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScAspectRatio, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-aspect-ratio', imports: [NgOptimizedImage], template: `
+            args: [{ selector: 'sc-aspect-ratio', imports: [], template: `
     <div [class]="wrapperClass()" [style]="wrapperStyle()">
       @if (priority()) {
         <img
           [class]="imageClasses()"
-          [ngSrc]="src()"
+          [src]="src()"
           [alt]="alt()"
           [style]="imageStyle()"
           fill
           priority
         />
       } @else {
-        <img [class]="imageClasses()" [ngSrc]="src()" [alt]="alt()" [style]="imageStyle()" fill />
+        <img [class]="imageClasses()" [src]="src()" [alt]="alt()" [style]="imageStyle()" fill />
       }
     </div>
   `, host: {
@@ -9456,7 +9908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class ScContextMenuTriggerFor {
     scContextMenuTriggerFor = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScContextMenuTriggerFor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: ScContextMenuTriggerFor, isStandalone: true, selector: "[scContextMenuTriggerFor]", inputs: { scContextMenuTriggerFor: { classPropertyName: "scContextMenuTriggerFor", publicName: "scContextMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: i1$5.CdkContextMenuTrigger, inputs: ["cdkContextMenuTriggerFor", "scContextMenuTriggerFor"] }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: ScContextMenuTriggerFor, isStandalone: true, selector: "[scContextMenuTriggerFor]", inputs: { scContextMenuTriggerFor: { classPropertyName: "scContextMenuTriggerFor", publicName: "scContextMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: i1$3.CdkContextMenuTrigger, inputs: ["cdkContextMenuTriggerFor", "scContextMenuTriggerFor"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScContextMenuTriggerFor, decorators: [{
             type: Directive,
@@ -9475,7 +9927,7 @@ class ScMenu {
     class = input('');
     classes = computed(() => cn('my-2 z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenu, isStandalone: true, selector: "div[sc-menu]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenu }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenu, isStandalone: true, selector: "div[sc-menu]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$3.CdkMenu }], ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -9545,9 +9997,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class ScMenuGroup {
     class = input('');
-    classes = computed(() => cn('', this.class()));
+    _class = computed(() => cn('', this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuGroup, isStandalone: true, selector: "sc-menu-group", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuGroup, isStandalone: true, selector: "sc-menu-group", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -9556,19 +10008,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{ selector: 'sc-menu-group', imports: [], template: `
     <ng-content />
   `, host: {
-                        '[class]': 'classes()',
+                        '[class]': '_class()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
 class ScMenuItem {
     class = input('');
-    classes = computed(() => cn('w-full flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_.svg]:pointer-events-none [&_.svg]:size-4 [&_.svg]:shrink-0', this._inset() && 'pl-8', this.class()));
+    classes = computed(() => cn('w-full flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', this._inset() && 'pl-8', this.class()));
     _inset = input(false, {
         alias: 'inset',
         transform: booleanAttribute,
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuItem, isStandalone: true, selector: "button[sc-menu-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, _inset: { classPropertyName: "_inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuItem }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuItem, isStandalone: true, selector: "button[sc-menu-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, _inset: { classPropertyName: "_inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$3.CdkMenuItem }], ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -9584,7 +10036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class ScMenuCheckboxItem {
     _cdkMenuItemCheckbox = inject(CdkMenuItemCheckbox, { host: true });
     class = input('');
-    classes = computed(() => cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.class()));
+    classes = computed(() => cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', this.class()));
     disabled = input(false, {
         transform: booleanAttribute,
     });
@@ -9598,14 +10050,14 @@ class ScMenuCheckboxItem {
     });
     scTriggered = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuCheckboxItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScMenuCheckboxItem, isStandalone: true, selector: "button[sc-menu-checkbox-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, scChecked: { classPropertyName: "scChecked", publicName: "scChecked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scTriggered: "scTriggered" }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuItemCheckbox, inputs: ["cdkMenuItemChecked", "scChecked"], outputs: ["cdkMenuItemTriggered", "scTriggered"] }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScMenuCheckboxItem, isStandalone: true, selector: "button[sc-menu-checkbox-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, scChecked: { classPropertyName: "scChecked", publicName: "scChecked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scTriggered: "scTriggered" }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$3.CdkMenuItemCheckbox, inputs: ["cdkMenuItemChecked", "scChecked"], outputs: ["cdkMenuItemTriggered", "scTriggered"] }], ngImport: i0, template: `
     @if (scChecked()) {
       <span class="absolute left-2 flex size-3.5 items-center justify-center">
         <svg-check-icon class="size-4" />
       </span>
     }
     <ng-content />
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuCheckboxItem, decorators: [{
             type: Component,
@@ -9631,7 +10083,7 @@ class ScMenuRadioGroup {
     class = input('');
     classes = computed(() => cn('', this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuRadioGroup, isStandalone: true, selector: "div[sc-menu-radio-group]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuGroup }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuRadioGroup, isStandalone: true, selector: "div[sc-menu-radio-group]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$3.CdkMenuGroup }], ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -9646,16 +10098,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class ScMenuRadioItem {
     class = input('');
-    classes = computed(() => cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.class()));
+    classes = computed(() => cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', this.class()));
     value = input('');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuRadioItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuRadioItem, isStandalone: true, selector: "button[sc-menu-radio-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuItemRadio }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuRadioItem, isStandalone: true, selector: "button[sc-menu-radio-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$3.CdkMenuItemRadio }], ngImport: i0, template: `
     <span class="absolute left-2 flex size-3.5 items-center justify-center">
       <svg-circle-icon class="size-2 fill-current" />
     </span>
 
     <ng-content />
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCircleIcon, selector: "svg-circle-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCircleIcon, selector: "svg-circle-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuRadioItem, decorators: [{
             type: Component,
@@ -9673,7 +10125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class ScMenuTriggerFor {
     scMenuTriggerFor = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuTriggerFor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuTriggerFor, isStandalone: true, selector: "[scMenuTriggerFor]", inputs: { scMenuTriggerFor: { classPropertyName: "scMenuTriggerFor", publicName: "scMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: i1$5.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "scMenuTriggerFor"] }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuTriggerFor, isStandalone: true, selector: "[scMenuTriggerFor]", inputs: { scMenuTriggerFor: { classPropertyName: "scMenuTriggerFor", publicName: "scMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: i1$3.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "scMenuTriggerFor"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuTriggerFor, decorators: [{
             type: Directive,
@@ -9692,7 +10144,7 @@ class ScMenuCheckboxGroup {
     class = input('');
     classes = computed(() => cn('', this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuCheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuCheckboxGroup, isStandalone: true, selector: "div[sc-menu-checkbox-group]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuGroup }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuCheckboxGroup, isStandalone: true, selector: "div[sc-menu-checkbox-group]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$3.CdkMenuGroup }], ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -9709,7 +10161,7 @@ class ScMenuBar {
     class = input('');
     classes = computed(() => cn('flex h-10 items-center space-x-1 rounded-md border bg-background p-1', this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuBar, isStandalone: true, selector: "div[sc-menu-bar]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuBar }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuBar, isStandalone: true, selector: "div[sc-menu-bar]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$3.CdkMenuBar }], ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -9726,7 +10178,7 @@ class ScMenuBarItem {
     class = input('');
     classes = computed(() => cn('flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground', this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuBarItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuBarItem, isStandalone: true, selector: "button[sc-menu-bar-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuItem }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuBarItem, isStandalone: true, selector: "button[sc-menu-bar-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$3.CdkMenuItem }], ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -9767,7 +10219,7 @@ class ScCommandInput {
       class="flex h-12 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
       [placeholder]="placeholder()"
     />
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgSearchIcon, selector: "svg-search-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgSearchIcon, selector: "svg-search-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCommandInput, decorators: [{
             type: Component,
@@ -9855,7 +10307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class ScCommandItem {
     class = input('');
-    classes = computed(() => cn("relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_.svg]:pointer-events-none [&_.svg]:size-4 [&_.svg]:shrink-0", this.class()));
+    classes = computed(() => cn("relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", this.class()));
     disabled = input(false, {
         transform: booleanAttribute,
     });
@@ -9996,7 +10448,7 @@ class ScCollapsible {
         }
       </cdk-accordion-item>
     </cdk-accordion>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i1$4.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { kind: "directive", type: i1$4.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i1$2.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { kind: "directive", type: i1$2.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCollapsible, decorators: [{
             type: Component,
@@ -10094,7 +10546,7 @@ class ScSidebarToggler {
       <ng-content />
       <span class="sr-only">Toggle Sidebar</span>
     </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebarToggler, decorators: [{
             type: Component,
@@ -10142,7 +10594,7 @@ class ScSidebarMobile {
 
       <ng-content />
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScSidebarToggler, selector: "sc-sidebar-toggler" }, { kind: "component", type: SvgXIcon, selector: "svg-x-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScSidebarToggler, selector: "sc-sidebar-toggler" }, { kind: "component", type: SvgXIcon, selector: "svg-x-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebarMobile, decorators: [{
             type: Component,
@@ -10172,7 +10624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }] });
 
 class ScSidebar {
-    observer;
+    observer = inject(BreakpointObserver);
     sidebarState = inject(ScSidebarState);
     class = input('');
     classes = computed(() => cn('block relative', this.class()));
@@ -10194,8 +10646,7 @@ class ScSidebar {
     this.variant() === 'floating' || this.variant() === 'inset'
         ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
         : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l'));
-    constructor(observer) {
-        this.observer = observer;
+    constructor() {
         this.observer.observe('(max-width: 768px)').subscribe((result) => {
             this.sidebarState.isMobile.set(result.matches);
             if (!result.matches && this.openMobile()) {
@@ -10203,7 +10654,7 @@ class ScSidebar {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebar, deps: [{ token: i1$6.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScSidebar, isStandalone: true, selector: "sc-sidebar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
     <ng-template #sc_sidebar_content>
       <ng-content />
@@ -10277,7 +10728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
   `, host: {
                         '[class]': 'classes()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [{ type: i1$6.BreakpointObserver }] });
+        }], ctorParameters: () => [] });
 
 class ScSidebarProvider {
     sidebarState = inject(ScSidebarState);
@@ -10305,7 +10756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class ScAutocompleteItem {
     class = input('');
-    classes = computed(() => cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none hover:bg-accent hover:text-accent-foreground data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_.svg]:pointer-events-none [&_.svg]:size-4 [&_.svg]:shrink-0', this.class()));
+    classes = computed(() => cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none hover:bg-accent hover:text-accent-foreground data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', this.class()));
     _disabled = input(false, {
         transform: booleanAttribute,
     });
@@ -10332,7 +10783,7 @@ class ScAutocompleteItem {
     @if (isSelected()) {
       <svg-check-icon class="ml-auto" />
     }
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScAutocompleteItem, decorators: [{
             type: Component,
@@ -10470,9 +10921,1202 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
+class ScTimeOption {
+    /** The unique ID of the option. */
+    id = signal(inject(_IdGenerator).getId('sc-time-option-'));
+    class = input('');
+    _class = computed(() => cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', this._active() && 'bg-accent text-accent-foreground', this.class()));
+    _active = signal(false);
+    _selected = signal(false);
+    _disabledByInput = input(false, {
+        alias: 'disabled',
+        transform: booleanAttribute,
+    });
+    _disabled = computed(() => this._disabledByInput() || booleanAttribute(this.disabled));
+    value = input();
+    setActiveStyles() {
+        this._active.set(true);
+    }
+    setInactiveStyles() {
+        this._active.set(false);
+    }
+    disabled;
+    getLabel() {
+        return this.value() ?? '';
+    }
+    _element = inject(ElementRef);
+    /** Gets the host DOM element. */
+    _getHostElement() {
+        return this._element.nativeElement;
+    }
+    /** Selects the option. */
+    select() {
+        if (!this._selected()) {
+            this._selected.set(true);
+        }
+    }
+    /** Deselects the option. */
+    deselect() {
+        if (this._selected()) {
+            this._selected.set(false);
+        }
+    }
+    onClick() {
+        if (this._selected()) {
+            this._selected.set(false);
+        }
+        else {
+            this.selected.emit(this.value());
+            this._selected.set(true);
+        }
+    }
+    selected = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTimeOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScTimeOption, isStandalone: true, selector: "sc-time-option", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, _disabledByInput: { classPropertyName: "_disabledByInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { listeners: { "mouseover": "setActiveStyles()", "mouseleave": "setInactiveStyles()", "click": "onClick()" }, properties: { "id": "id()", "class": "_class()", "attr.data-disabled": "_disabled()" } }, ngImport: i0, template: `
+    @if (_selected()) {
+      <svg-check-icon class="absolute left-2 flex size-4 items-center justify-center" />
+    }
+
+    <ng-content />
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTimeOption, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-time-option', imports: [SvgCheckIcon], template: `
+    @if (_selected()) {
+      <svg-check-icon class="absolute left-2 flex size-4 items-center justify-center" />
+    }
+
+    <ng-content />
+  `, host: {
+                        '[id]': 'id()',
+                        '[class]': '_class()',
+                        '[attr.data-disabled]': '_disabled()',
+                        '(mouseover)': 'setActiveStyles()',
+                        '(mouseleave)': 'setInactiveStyles()',
+                        '(click)': 'onClick()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScTimePickerInput {
+    class = input('');
+    classes = computed(() => cn(scInputStyles(), this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTimePickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: ScTimePickerInput, isStandalone: true, selector: "[scTimePickerInput]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTimePickerInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scTimePickerInput]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }] });
+
+class ScTimePicker {
+    settings = inject(ScSettings);
+    clock = input(undefined);
+    _clock = computed(() => {
+        if (this.clock() !== undefined) {
+            return this.clock();
+        }
+        return this.settings.clock();
+    });
+    class = input('');
+    classes = computed(() => cn('flex relative', this.class()));
+    _overlay = inject(Overlay);
+    _dir = inject(Directionality, { optional: true });
+    _viewContainerRef = inject(ViewContainerRef);
+    _injector = inject(Injector);
+    // private _defaultConfig = inject(MAT_TIMEPICKER_CONFIG, { optional: true });
+    // private _dateAdapter = inject<DateAdapter<D>>(DateAdapter, { optional: true })!;
+    // private _dateFormats = inject(MAT_DATE_FORMATS, { optional: true })!;
+    _isOpen = signal(false);
+    _activeDescendant = signal(null);
+    _input = viewChild.required('input');
+    _overlayRef = null;
+    _portal = null;
+    _optionsCacheKey = null;
+    _localeChanges;
+    _onOpenRender = null;
+    _panelTemplate = viewChild.required('panelTemplate');
+    _timeOptions = [];
+    _options = viewChildren(ScTimeOption);
+    _keyManager = new ActiveDescendantKeyManager(this._options, this._injector)
+        .withHomeAndEnd(true)
+        .withPageUpDown(true)
+        .withVerticalOrientation(true);
+    /**
+     * Interval between each option in the timepicker. The value can either be an amount of
+     * seconds (e.g. 90) or a number with a unit (e.g. 45m). Supported units are `s` for seconds,
+     * `m` for minutes or `h` for hours.
+     */
+    // readonly interval: InputSignalWithTransform<number | null, number | string | null> = input(
+    //   parseInterval(this._defaultConfig?.interval || null),
+    //   { transform: parseInterval },
+    // );
+    /**
+     * Array of pre-defined options that the user can select from, as an alternative to using the
+     * `interval` input. An error will be thrown if both `options` and `interval` are specified.
+     */
+    options = input(null);
+    /** Whether the timepicker is open. */
+    isOpen = this._isOpen.asReadonly();
+    /** Emits when the user selects a time. */
+    selected = output();
+    /** Emits when the timepicker is opened. */
+    opened = output();
+    /** Emits when the timepicker is closed. */
+    closed = output();
+    /** ID of the active descendant option. */
+    activeDescendant = this._activeDescendant.asReadonly();
+    /** Unique ID of the timepicker's panel */
+    panelId = inject(_IdGenerator).getId('sc-time-picker-panel-');
+    /** Whether ripples within the timepicker should be disabled. */
+    // readonly disableRipple: InputSignalWithTransform<boolean, unknown> = input(
+    //   this._defaultConfig?.disableRipple ?? false,
+    //   {
+    //     transform: booleanAttribute,
+    //   },
+    // );
+    /** ARIA label for the timepicker panel. */
+    ariaLabel = input(null, {
+        alias: 'aria-label',
+    });
+    /** ID of the label element for the timepicker panel. */
+    ariaLabelledby = input(null, {
+        alias: 'aria-labelledby',
+    });
+    /** Whether the timepicker is currently disabled. */
+    disabled = computed(() => !!this._input().nativeElement?.disabled);
+    constructor() {
+        // if (typeof ngDevMode === 'undefined' || ngDevMode) {
+        // validateAdapter(this._dateAdapter, this._dateFormats);
+        effect(() => {
+            const options = this.options();
+            // const interval = this.interval();
+            // if (options !== null && interval !== null) {
+            //   throw new Error(
+            //     'Cannot specify both the `options` and `interval` inputs at the same time',
+            //   );
+            // } else if (options?.length === 0) {
+            //   throw new Error('Value of `options` input cannot be an empty array');
+            // }
+        });
+        // }
+        // Since the panel ID is static, we can set it once without having to maintain a host binding.
+        const element = inject(ElementRef);
+        element.nativeElement.setAttribute('sc-time-picker-panel-id', this.panelId);
+        this._handleLocaleChanges();
+        this._handleInputStateChanges();
+        this._keyManager.change.subscribe(() => this._activeDescendant.set(this._keyManager.activeItem?.id() || null));
+    }
+    /** Opens the timepicker. */
+    open() {
+        const input = this._input();
+        if (!input) {
+            return;
+        }
+        // Focus should already be on the input, but this call is in case the timepicker is opened
+        // programmatically. We need to call this even if the timepicker is already open, because
+        // the user might be clicking the toggle.
+        input.nativeElement.focus();
+        if (this._isOpen()) {
+            return;
+        }
+        this._isOpen.set(true);
+        this._generateOptions();
+        const overlayRef = this._getOverlayRef();
+        overlayRef.updateSize({ width: input.nativeElement.offsetWidth });
+        this._portal ??= new TemplatePortal(this._panelTemplate(), this._viewContainerRef);
+        overlayRef.attach(this._portal);
+        this._onOpenRender?.destroy();
+        this._onOpenRender = afterNextRender(() => {
+            const options = this._options();
+            this._syncSelectedState(input.nativeElement?.value, options, options[0]);
+            this._onOpenRender = null;
+        }, { injector: this._injector });
+        this.opened.emit();
+    }
+    /** Closes the timepicker. */
+    close() {
+        if (this._isOpen()) {
+            this._isOpen.set(false);
+            this._overlayRef?.detach();
+            this.closed.emit();
+        }
+    }
+    /** Registers an input with the timepicker. */
+    // registerInput(input: MatTimepickerInput<D>): void {
+    //   const currentInput = this._input();
+    //   if (currentInput && input !== currentInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+    //     throw new Error('MatTimepicker can only be registered with one input at a time');
+    //   }
+    //   this._input.set(input);
+    // }
+    ngOnDestroy() {
+        this._keyManager.destroy();
+        this._localeChanges.unsubscribe();
+        this._onOpenRender?.destroy();
+        this._overlayRef?.dispose();
+    }
+    /** Selects a specific time value. */
+    _selectValue(value) {
+        //TODO
+        this._input().nativeElement.value = value;
+        this.close();
+        this.selected.emit({ value });
+        this._input().nativeElement?.focus();
+    }
+    /** Gets the value of the `aria-labelledby` attribute. */
+    _getAriaLabelledby() {
+        if (this.ariaLabel()) {
+            return null;
+        }
+        return this.ariaLabelledby() || null;
+    }
+    /** Creates an overlay reference for the timepicker panel. */
+    _getOverlayRef() {
+        if (this._overlayRef) {
+            return this._overlayRef;
+        }
+        const positionStrategy = this._overlay
+            .position()
+            .flexibleConnectedTo(this._input())
+            .withFlexibleDimensions(false)
+            .withPush(false)
+            // .withTransformOriginOn('.mat-timepicker-panel')
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                // panelClass: 'mat-timepicker-above',
+            },
+        ]);
+        this._overlayRef = this._overlay.create({
+            positionStrategy,
+            scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            direction: this._dir || 'ltr',
+            hasBackdrop: false,
+        });
+        this._overlayRef.keydownEvents().subscribe((event) => {
+            this._handleKeydown(event);
+        });
+        this._overlayRef.outsidePointerEvents().subscribe((event) => {
+            const target = _getEventTarget(event);
+            const origin = this._input().nativeElement;
+            if (target && origin && target !== origin && !origin.contains(target)) {
+                this.close();
+            }
+        });
+        return this._overlayRef;
+    }
+    /** Generates the list of options from which the user can select.. */
+    _generateOptions() {
+        // Default the interval to 30 minutes.
+        this._timeOptions = [
+            { value: '1', label: '1' },
+            { value: '2', label: '2' },
+            { value: '3', label: '3' },
+            { value: '4', label: '4' },
+            { value: '5', label: '5' },
+            { value: '6', label: '6' },
+        ];
+    }
+    /**
+     * Synchronizes the internal state of the component based on a specific selected date.
+     * @param value Currently selected date.
+     * @param options Options rendered out in the timepicker.
+     * @param fallback Option to set as active if no option is selected.
+     */
+    _syncSelectedState(value, options, fallback) {
+        let hasSelected = false;
+        for (const option of options) {
+            if (value && option.value() === value) {
+                option.select();
+                scrollOptionIntoView(option, 'center');
+                untracked(() => this._keyManager.setActiveItem(option));
+                hasSelected = true;
+            }
+            else {
+                option.deselect();
+            }
+        }
+        // If no option was selected, we need to reset the key manager since
+        // it might be holding onto an option that no longer exists.
+        if (!hasSelected) {
+            if (fallback) {
+                untracked(() => this._keyManager.setActiveItem(fallback));
+                scrollOptionIntoView(fallback, 'center');
+            }
+            else {
+                untracked(() => this._keyManager.setActiveItem(-1));
+            }
+        }
+    }
+    /** Handles keyboard events while the overlay is open. */
+    _handleKeydown(event) {
+        const keyCode = event.keyCode;
+        if (keyCode === TAB) {
+            this.close();
+        }
+        else if (keyCode === ESCAPE && !hasModifierKey(event)) {
+            event.preventDefault();
+            this.close();
+        }
+        else if (keyCode === ENTER) {
+            event.preventDefault();
+            if (this._keyManager.activeItem) {
+                this._selectValue(this._keyManager.activeItem.value() ?? '');
+            }
+            else {
+                this.close();
+            }
+        }
+        else {
+            const previousActive = this._keyManager.activeItem;
+            this._keyManager.onKeydown(event);
+            const currentActive = this._keyManager.activeItem;
+            if (currentActive && currentActive !== previousActive) {
+                scrollOptionIntoView(currentActive, 'nearest');
+            }
+        }
+    }
+    /** Sets up the logic that updates the timepicker when the locale changes. */
+    _handleLocaleChanges() {
+        // Re-generate the options list if the locale changes.
+        // this._localeChanges = this._dateAdapter.localeChanges.subscribe(() => {
+        //   this._optionsCacheKey = null;
+        //   if (this.isOpen()) {
+        //     this._generateOptions();
+        //   }
+        // });
+    }
+    /**
+     * Sets up the logic that updates the timepicker when the state of the connected input changes.
+     */
+    _handleInputStateChanges() {
+        effect(() => {
+            const input = this._input();
+            const options = this._options();
+            if (this._isOpen() && input) {
+                this._syncSelectedState(input.nativeElement.value, options, null);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScTimePicker, isStandalone: true, selector: "sc-time-picker", inputs: { clock: { classPropertyName: "clock", publicName: "clock", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", opened: "opened", closed: "closed" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }, { propertyName: "_options", predicate: ScTimeOption, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button class="absolute inset-y-0 end-0 pe-4" (click)="open()" sc-button variant="ghost">
+      <svg-clock-icon />
+    </button>
+    <input #input scTimePickerInput type="text" placeholder="hh:mm" />
+
+    <ng-template #panelTemplate>
+      <div
+        class="relative z-50 max-h-96 w-full min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-labelledby]="_getAriaLabelledby()"
+        [id]="panelId"
+        role="listbox"
+      >
+        @for (option of _timeOptions; track option.value) {
+          <sc-time-option [value]="option.value" (selected)="_selectValue(option.value)">
+            {{ option.label }}
+          </sc-time-option>
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgClockIcon, selector: "svg-clock-icon", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }, { kind: "component", type: ScTimeOption, selector: "sc-time-option", inputs: ["class", "disabled", "value"], outputs: ["selected"] }, { kind: "directive", type: ScTimePickerInput, selector: "[scTimePickerInput]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTimePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-time-picker', imports: [SvgClockIcon, ScButton, ScTimeOption, ScTimePickerInput], template: `
+    <button class="absolute inset-y-0 end-0 pe-4" (click)="open()" sc-button variant="ghost">
+      <svg-clock-icon />
+    </button>
+    <input #input scTimePickerInput type="text" placeholder="hh:mm" />
+
+    <ng-template #panelTemplate>
+      <div
+        class="relative z-50 max-h-96 w-full min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-labelledby]="_getAriaLabelledby()"
+        [id]="panelId"
+        role="listbox"
+      >
+        @for (option of _timeOptions; track option.value) {
+          <sc-time-option [value]="option.value" (selected)="_selectValue(option.value)">
+            {{ option.label }}
+          </sc-time-option>
+        }
+      </div>
+    </ng-template>
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [] });
+/**
+ * Scrolls an option into view.
+ * @param option Option to be scrolled into view.
+ * @param position Position to which to align the option relative to the scrollable container.
+ */
+function scrollOptionIntoView(option, position) {
+    option._getHostElement().scrollIntoView({ block: position, inline: position });
+}
+
+class ScImage {
+    class = input('');
+    _class = computed(() => cn('', this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScImage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScImage, isStandalone: true, selector: "img[sc-image]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScImage, decorators: [{
+            type: Component,
+            args: [{ selector: 'img[sc-image]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': '_class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScFileUpload {
+    class = input('');
+    _class = computed(() => cn('', this.class()));
+    selectedFile = signal(undefined);
+    handleFileChange(event) {
+        const target = event.target;
+        const files = target.files;
+        console.log(files);
+        const file = files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                this.selectedFile.set(reader.result);
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScFileUpload, isStandalone: true, selector: "sc-file-upload", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
+    <div class="grid w-full max-w-sm items-center gap-1.5">
+      <label sc-label for="picture">Picture</label>
+      <input id="picture" (change)="handleFileChange($event)" sc-input type="file" />
+      @if (selectedFile()) {
+        <div class="mt-2">
+          <img
+            class="rounded-md"
+            [src]="selectedFile()"
+            sc-image
+            alt="Preview"
+            width="500"
+            height="500"
+          />
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScLabel, selector: "label[sc-label]", inputs: ["class"] }, { kind: "component", type: ScInput, selector: "input[sc-input]", inputs: ["class"] }, { kind: "component", type: ScImage, selector: "img[sc-image]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFileUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-file-upload', imports: [ScLabel, ScInput, ScImage], template: `
+    <div class="grid w-full max-w-sm items-center gap-1.5">
+      <label sc-label for="picture">Picture</label>
+      <input id="picture" (change)="handleFileChange($event)" sc-input type="file" />
+      @if (selectedFile()) {
+        <div class="mt-2">
+          <img
+            class="rounded-md"
+            [src]="selectedFile()"
+            sc-image
+            alt="Preview"
+            width="500"
+            height="500"
+          />
+        </div>
+      }
+    </div>
+  `, host: {
+                        '[class]': '_class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScDropZone {
+    isDragActive = signal(false);
+    isDisabled = input(false);
+    class = input('');
+    _class = computed(() => cn('group relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed border-muted-foreground/25 px-5 py-2.5 text-center transition hover:bg-muted/25', 'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', this.isDragActive() && 'border-muted-foreground/50', this.isDisabled() && 'pointer-events-none opacity-60', this.class()));
+    handleDragOver(event) {
+        if (this.isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        else {
+            this.isDragActive.set(true);
+        }
+    }
+    handleDragLeave(event) {
+        if (this.isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        else {
+            this.isDragActive.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScDropZone, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: ScDropZone, isStandalone: true, selector: "[scDropZone]", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "dragover": "handleDragOver($event)", "dragleave": "handleDragLeave($event)" }, properties: { "class": "_class()" } }, exportAs: ["scDropZone"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScDropZone, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scDropZone]',
+                    exportAs: 'scDropZone',
+                    host: {
+                        '[class]': '_class()',
+                        '(dragover)': 'handleDragOver($event)',
+                        '(dragleave)': 'handleDragLeave($event)',
+                    },
+                }]
+        }] });
+
+class ScFilePreview {
+    file = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFilePreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScFilePreview, isStandalone: true, selector: "sc-file-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (file().file.type.startsWith('image/')) {
+      <img
+        class="aspect-square shrink-0 rounded-md object-cover"
+        [src]="file().preview"
+        [alt]="file().file.name"
+        width="48"
+        height="48"
+        loading="lazy"
+      />
+    } @else {
+      <svg-file-text-icon class="size-10 text-muted-foreground" aria-hidden="true" />
+    }
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgFileTextIcon, selector: "svg-file-text-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFilePreview, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-file-preview', imports: [SvgFileTextIcon], template: `
+    @if (file().file.type.startsWith('image/')) {
+      <img
+        class="aspect-square shrink-0 rounded-md object-cover"
+        [src]="file().preview"
+        [alt]="file().file.name"
+        width="48"
+        height="48"
+        loading="lazy"
+      />
+    } @else {
+      <svg-file-text-icon class="size-10 text-muted-foreground" aria-hidden="true" />
+    }
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+function formatBytes(bytes, opts = {}) {
+    const { decimals = 0, sizeType = 'normal' } = opts;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const accurateSizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];
+    if (bytes === 0)
+        return '0 Byte';
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${sizeType === 'accurate' ? (accurateSizes[i] ?? 'Bytes') : (sizes[i] ?? 'Bytes')}`;
+}
+
+class ScFileCard {
+    index = input.required();
+    file = input.required();
+    progress = input(undefined);
+    removed = output();
+    formatedSize = computed(() => formatBytes(this.file().file.size));
+    remove() {
+        this.removed.emit(this.index());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFileCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScFileCard, isStandalone: true, selector: "sc-file-card", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: `
+    <div class="relative flex items-center gap-2.5">
+      <div class="flex flex-1 gap-2.5">
+        @if (file().preview) {
+          <sc-file-preview [file]="file()" />
+        }
+
+        <div class="flex w-full flex-col gap-2">
+          <div class="flex flex-col gap-px">
+            <p class="line-clamp-1 text-sm font-medium text-foreground/80">
+              {{ file().file.name }}
+            </p>
+            <p class="text-xs text-muted-foreground">
+              {{ formatedSize() }}
+            </p>
+          </div>
+
+          @let p = progress();
+          @if (p) {
+            <sc-progress [value]="p" />
+          }
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <button
+          class="size-7"
+          (click)="remove()"
+          sc-button
+          type="button"
+          variant="outline"
+          size="icon"
+        >
+          <svg-x-icon class="size-4" aria-hidden="true" />
+          <span class="sr-only">Remove file</span>
+        </button>
+      </div>
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgXIcon, selector: "svg-x-icon", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }, { kind: "component", type: ScFilePreview, selector: "sc-file-preview", inputs: ["file"] }, { kind: "component", type: ScProgress, selector: "sc-progress", inputs: ["class", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFileCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-file-card', imports: [SvgXIcon, ScButton, ScFilePreview, ScProgress], template: `
+    <div class="relative flex items-center gap-2.5">
+      <div class="flex flex-1 gap-2.5">
+        @if (file().preview) {
+          <sc-file-preview [file]="file()" />
+        }
+
+        <div class="flex w-full flex-col gap-2">
+          <div class="flex flex-col gap-px">
+            <p class="line-clamp-1 text-sm font-medium text-foreground/80">
+              {{ file().file.name }}
+            </p>
+            <p class="text-xs text-muted-foreground">
+              {{ formatedSize() }}
+            </p>
+          </div>
+
+          @let p = progress();
+          @if (p) {
+            <sc-progress [value]="p" />
+          }
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <button
+          class="size-7"
+          (click)="remove()"
+          sc-button
+          type="button"
+          variant="outline"
+          size="icon"
+        >
+          <svg-x-icon class="size-4" aria-hidden="true" />
+          <span class="sr-only">Remove file</span>
+        </button>
+      </div>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScFileUploader {
+    class = input('');
+    _class = computed(() => cn('relative flex flex-col gap-6 overflow-hidden', this.class()));
+    maxSize = input(1024 * 1024 * 2);
+    maxFiles = input(1);
+    files = signal([]);
+    multiple = computed(() => this.maxFiles() > 1);
+    progresses = input();
+    uploadInfo() {
+        return this.maxFiles() > 1
+            ? ` ${this.maxFiles()} files (up to ${formatBytes(this.maxSize())} each)`
+            : ` a file with ${formatBytes(this.maxSize())}`;
+    }
+    onRemove(index) {
+        if (!this.files)
+            return;
+        this.files.update((files) => files.filter((_, i) => i !== index));
+    }
+    handleFileChange(event) {
+        const target = event.target;
+        const files = target.files;
+        const acceptedFiles = Array.from(files);
+        acceptedFiles.forEach((file) => {
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const scFile = { file: file, preview: reader.result };
+                this.files.update((files) => [...files, scFile]);
+            };
+            reader.readAsDataURL(file);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFileUploader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScFileUploader, isStandalone: true, selector: "sc-file-uploader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, progresses: { classPropertyName: "progresses", publicName: "progresses", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
+    <!-- Dropzone -->
+    <div #scDropZone="scDropZone" scDropZone>
+      <input
+        class="absolute left-0 top-0 size-full cursor-pointer opacity-0"
+        [multiple]="multiple()"
+        (change)="handleFileChange($event)"
+        accept="image/*"
+        tabindex="-1"
+        type="file"
+      />
+
+      @if (scDropZone.isDragActive()) {
+        <div class="flex flex-col items-center justify-center gap-4 sm:px-5">
+          <div class="rounded-full border border-dashed p-3">
+            <svg-upload-icon class="size-7 text-muted-foreground" aria-hidden="true" />
+          </div>
+          <p class="font-medium text-muted-foreground">Drop the files here</p>
+        </div>
+      } @else {
+        <div class="flex flex-col items-center justify-center gap-4 sm:px-5">
+          <div class="rounded-full border border-dashed p-3">
+            <svg-upload-icon class="size-7 text-muted-foreground" aria-hidden="true" />
+          </div>
+          <div class="flex flex-col gap-px">
+            <p class="font-medium text-muted-foreground">
+              Drag 'n' drop your files here, or click to select files
+            </p>
+            <p class="text-sm text-muted-foreground/70">You can upload {{ uploadInfo() }}</p>
+          </div>
+        </div>
+      }
+    </div>
+    <!-- fin Dropzone -->
+
+    <div class="h-fit w-full px-3">
+      <div class="flex max-h-48 flex-col gap-4">
+        @for (file of files(); track $index; let index = $index) {
+          <sc-file-card
+            [file]="file"
+            [index]="index"
+            [progress]="progresses()?.[file.file.name]"
+            (removed)="onRemove($event)"
+          />
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgUploadIcon, selector: "svg-upload-icon", inputs: ["class"] }, { kind: "component", type: ScFileCard, selector: "sc-file-card", inputs: ["index", "file", "progress"], outputs: ["removed"] }, { kind: "directive", type: ScDropZone, selector: "[scDropZone]", inputs: ["isDisabled", "class"], exportAs: ["scDropZone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFileUploader, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-file-uploader', imports: [SvgUploadIcon, ScFileCard, ScDropZone], template: `
+    <!-- Dropzone -->
+    <div #scDropZone="scDropZone" scDropZone>
+      <input
+        class="absolute left-0 top-0 size-full cursor-pointer opacity-0"
+        [multiple]="multiple()"
+        (change)="handleFileChange($event)"
+        accept="image/*"
+        tabindex="-1"
+        type="file"
+      />
+
+      @if (scDropZone.isDragActive()) {
+        <div class="flex flex-col items-center justify-center gap-4 sm:px-5">
+          <div class="rounded-full border border-dashed p-3">
+            <svg-upload-icon class="size-7 text-muted-foreground" aria-hidden="true" />
+          </div>
+          <p class="font-medium text-muted-foreground">Drop the files here</p>
+        </div>
+      } @else {
+        <div class="flex flex-col items-center justify-center gap-4 sm:px-5">
+          <div class="rounded-full border border-dashed p-3">
+            <svg-upload-icon class="size-7 text-muted-foreground" aria-hidden="true" />
+          </div>
+          <div class="flex flex-col gap-px">
+            <p class="font-medium text-muted-foreground">
+              Drag 'n' drop your files here, or click to select files
+            </p>
+            <p class="text-sm text-muted-foreground/70">You can upload {{ uploadInfo() }}</p>
+          </div>
+        </div>
+      }
+    </div>
+    <!-- fin Dropzone -->
+
+    <div class="h-fit w-full px-3">
+      <div class="flex max-h-48 flex-col gap-4">
+        @for (file of files(); track $index; let index = $index) {
+          <sc-file-card
+            [file]="file"
+            [index]="index"
+            [progress]="progresses()?.[file.file.name]"
+            (removed)="onRemove($event)"
+          />
+        }
+      </div>
+    </div>
+  `, host: {
+                        '[class]': '_class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScSingleFileUploader {
+    dataService = inject(DataService);
+    class = input('');
+    _class = computed(() => cn('relative flex flex-col gap-6 overflow-hidden', this.class()));
+    file = signal(undefined);
+    fileUrl = computed(() => {
+        const file = this.file();
+        if (file) {
+            return URL.createObjectURL(file);
+        }
+        // return null or undefined
+        return file;
+    });
+    status = linkedSignal({
+        source: this.file,
+        computation: () => {
+            return 'init';
+        },
+    });
+    uploadProgress = signal(0);
+    maxSize = input(1024 * 1024 * 2);
+    uploadInfo() {
+        return ` a file with ${formatBytes(this.maxSize())}`;
+    }
+    handleFileChange(event) {
+        const target = event.target;
+        const files = target.files;
+        const file = files[0];
+        this.file.set(file);
+    }
+    removeFile() {
+        this.file.set(null);
+    }
+    uploadFile() {
+        const file = this.file();
+        if (!file) {
+            //TODO add message error
+            return;
+        }
+        this.status.set('uploading');
+        this.dataService
+            .uploadFile(file)
+            .pipe(catchError((error) => {
+            this.status.set('error');
+            // Quality control catches the problem
+            console.error('Delivery problem:', error);
+            // Send an apology note or fix the issue
+            return throwError(() => new Error('Oops! Something went wrong. Please try again later.'));
+        }))
+            .subscribe((event) => {
+            if (event.type === HttpEventType.UploadProgress) {
+                if (event.total) {
+                    this.uploadProgress.set(Math.round((100 * event.loaded) / event.total));
+                }
+                else {
+                    console.warn('event.total is undefined');
+                }
+            }
+            else if (event instanceof HttpResponse) {
+                this.uploadProgress.set(100);
+                this.status.set('success');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSingleFileUploader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScSingleFileUploader, isStandalone: true, selector: "sc-single-file-uploader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_class()" } }, ngImport: i0, template: `
+    @if (!fileUrl()) {
+      <!-- Dropzone -->
+      <div #scDropZone="scDropZone" scDropZone>
+        <input
+          class="absolute left-0 top-0 size-full cursor-pointer opacity-0"
+          (change)="handleFileChange($event)"
+          accept="image/*"
+          tabindex="-1"
+          type="file"
+        />
+
+        @if (scDropZone.isDragActive()) {
+          <div class="flex flex-col items-center justify-center gap-4 sm:px-5">
+            <div class="rounded-full border border-dashed p-3">
+              <svg-upload-icon class="size-7 text-muted-foreground" aria-hidden="true" />
+            </div>
+            <p class="font-medium text-muted-foreground">Drop the files here</p>
+          </div>
+        } @else {
+          <div class="flex flex-col items-center justify-center gap-4 sm:px-5">
+            <div class="rounded-full border border-dashed p-3">
+              <svg-upload-icon class="size-7 text-muted-foreground" aria-hidden="true" />
+            </div>
+            <div class="flex flex-col gap-px">
+              <p class="font-medium text-muted-foreground">
+                Drag 'n' drop your files here, or click to select files
+              </p>
+              <p class="text-sm text-muted-foreground/70">You can upload {{ uploadInfo() }}</p>
+            </div>
+          </div>
+        }
+      </div>
+      <!-- fin Dropzone -->
+    }
+
+    <!-- Start Preview Image -->
+    @if (fileUrl()) {
+      <sc-aspect-ratio [src]="fileUrl() ?? ''" ratio="16 / 9" alt="" />
+
+      <p>{{ file()?.name }}</p>
+
+      <sc-progress [value]="uploadProgress()" />
+
+      <div class="flex justify-start gap-3">
+        <button
+          [disabled]="status() === 'uploading'"
+          (click)="removeFile()"
+          sc-button
+          variant="destructive"
+          type="button"
+        >
+          Remove
+        </button>
+
+        @if (status() === 'init' || status() === 'error') {
+          <button
+            [disabled]="status() === 'uploading'"
+            (click)="uploadFile()"
+            sc-button
+            variant="primary"
+            type="button"
+          >
+            Upload
+          </button>
+        }
+
+        @if (status() === 'uploading') {
+          <button sc-button variant="secondary" type="button">Cancel</button>
+        }
+      </div>
+    }
+    <!-- End Preview Image -->
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScProgress, selector: "sc-progress", inputs: ["class", "value"] }, { kind: "component", type: SvgUploadIcon, selector: "svg-upload-icon", inputs: ["class"] }, { kind: "directive", type: ScDropZone, selector: "[scDropZone]", inputs: ["isDisabled", "class"], exportAs: ["scDropZone"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }, { kind: "component", type: ScAspectRatio, selector: "sc-aspect-ratio", inputs: ["imageClass", "hostClass", "wrapperClass", "ratio", "src", "alt", "priority"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSingleFileUploader, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-single-file-uploader', imports: [ScProgress, SvgUploadIcon, ScDropZone, ScButton, ScAspectRatio], template: `
+    @if (!fileUrl()) {
+      <!-- Dropzone -->
+      <div #scDropZone="scDropZone" scDropZone>
+        <input
+          class="absolute left-0 top-0 size-full cursor-pointer opacity-0"
+          (change)="handleFileChange($event)"
+          accept="image/*"
+          tabindex="-1"
+          type="file"
+        />
+
+        @if (scDropZone.isDragActive()) {
+          <div class="flex flex-col items-center justify-center gap-4 sm:px-5">
+            <div class="rounded-full border border-dashed p-3">
+              <svg-upload-icon class="size-7 text-muted-foreground" aria-hidden="true" />
+            </div>
+            <p class="font-medium text-muted-foreground">Drop the files here</p>
+          </div>
+        } @else {
+          <div class="flex flex-col items-center justify-center gap-4 sm:px-5">
+            <div class="rounded-full border border-dashed p-3">
+              <svg-upload-icon class="size-7 text-muted-foreground" aria-hidden="true" />
+            </div>
+            <div class="flex flex-col gap-px">
+              <p class="font-medium text-muted-foreground">
+                Drag 'n' drop your files here, or click to select files
+              </p>
+              <p class="text-sm text-muted-foreground/70">You can upload {{ uploadInfo() }}</p>
+            </div>
+          </div>
+        }
+      </div>
+      <!-- fin Dropzone -->
+    }
+
+    <!-- Start Preview Image -->
+    @if (fileUrl()) {
+      <sc-aspect-ratio [src]="fileUrl() ?? ''" ratio="16 / 9" alt="" />
+
+      <p>{{ file()?.name }}</p>
+
+      <sc-progress [value]="uploadProgress()" />
+
+      <div class="flex justify-start gap-3">
+        <button
+          [disabled]="status() === 'uploading'"
+          (click)="removeFile()"
+          sc-button
+          variant="destructive"
+          type="button"
+        >
+          Remove
+        </button>
+
+        @if (status() === 'init' || status() === 'error') {
+          <button
+            [disabled]="status() === 'uploading'"
+            (click)="uploadFile()"
+            sc-button
+            variant="primary"
+            type="button"
+          >
+            Upload
+          </button>
+        }
+
+        @if (status() === 'uploading') {
+          <button sc-button variant="secondary" type="button">Cancel</button>
+        }
+      </div>
+    }
+    <!-- End Preview Image -->
+  `, host: {
+                        '[class]': '_class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScPageTitle {
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('scroll-m-20 text-3xl font-bold tracking-tight', this.classInput()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScPageTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScPageTitle, isStandalone: true, selector: "h1[sc-page-title]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScPageTitle, decorators: [{
+            type: Component,
+            args: [{ selector: 'h1[sc-page-title]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScPageSubtitle {
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0', this.classInput()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScPageSubtitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScPageSubtitle, isStandalone: true, selector: "h2[sc-page-subtitle]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScPageSubtitle, decorators: [{
+            type: Component,
+            args: [{ selector: 'h2[sc-page-subtitle]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScPageDescription {
+    classInput = input('', {
+        alias: 'class',
+    });
+    class = computed(() => cn('text-base text-muted-foreground', this.classInput()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScPageDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScPageDescription, isStandalone: true, selector: "p[sc-page-description]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScPageDescription, decorators: [{
+            type: Component,
+            args: [{ selector: 'p[sc-page-description]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'class()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class Section {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Section, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: Section, isStandalone: true, selector: "sc-section", ngImport: i0, template: `
+    <p>section works!</p>
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Section, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-section', imports: [], template: `
+    <p>section works!</p>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScCookieConsent {
+    open = signal(true);
+    hidden = signal(false);
+    class = signal(cn('fixed z-[200] bottom-0 left-0 right-0 sm:left-4 sm:bottom-4 w-full sm:max-w-md duration-700', !this.open()
+        ? 'transition-[opacity,transform] translate-y-8 opacity-0'
+        : 'transition-[opacity,transform] translate-y-0 opacity-100', this.hidden() && 'hidden'));
+    accept() {
+        console.log('accept');
+    }
+    decline() {
+        console.log('decline');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCookieConsent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScCookieConsent, isStandalone: true, selector: "sc-cookie-consent", ngImport: i0, template: `
+    <div [class]="class()">
+      <div class="m-3 dark:bg-card bg-background border border-border rounded-lg">
+        <div class="flex items-center justify-between p-3">
+          <h1 class="text-lg font-medium">We use cookies</h1>
+          <svg-cookie-icon class="h-[1.2rem] w-[1.2rem]" />
+        </div>
+        <div class="p-3 -mt-2">
+          <p class="text-sm text-left text-muted-foreground">
+            We use cookies to ensure you get the best experience on our website. For more
+            information on how we use cookies, please see our cookie policy.
+          </p>
+        </div>
+        <div class="p-3 flex items-center gap-2 mt-2 border-t">
+          <button class="w-full h-9 rounded-full" (click)="accept()" sc-button>accept</button>
+          <button class="w-full h-9 rounded-full" (click)="decline()" sc-button variant="outline">
+            decline
+          </button>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCookieIcon, selector: "svg-cookie-icon", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCookieConsent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-cookie-consent', imports: [SvgCookieIcon, ScButton], template: `
+    <div [class]="class()">
+      <div class="m-3 dark:bg-card bg-background border border-border rounded-lg">
+        <div class="flex items-center justify-between p-3">
+          <h1 class="text-lg font-medium">We use cookies</h1>
+          <svg-cookie-icon class="h-[1.2rem] w-[1.2rem]" />
+        </div>
+        <div class="p-3 -mt-2">
+          <p class="text-sm text-left text-muted-foreground">
+            We use cookies to ensure you get the best experience on our website. For more
+            information on how we use cookies, please see our cookie policy.
+          </p>
+        </div>
+        <div class="p-3 flex items-center gap-2 mt-2 border-t">
+          <button class="w-full h-9 rounded-full" (click)="accept()" sc-button>accept</button>
+          <button class="w-full h-9 rounded-full" (click)="decline()" sc-button variant="outline">
+            decline
+          </button>
+        </div>
+      </div>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FormFieldCustomControlComponent, ScAccordion, ScAccordionContent, ScAccordionHeader, ScAccordionItem, ScAccordionItemDescription, ScAccordionTrigger, ScAlert, ScAlertDescription, ScAlertDialog, ScAlertTitle, ScAspectRatio, ScAutocomplete, ScAvatar, ScBadge, ScBreadcrumb, ScBreadcrumbEllipsis, ScBreadcrumbItem, ScBreadcrumbLink, ScBreadcrumbList, ScBreadcrumbPage, ScBreadcrumbSeparator, ScButton, ScCalendar, ScCard, ScCardContent, ScCardDescription, ScCardFooter, ScCardHeader, ScCardTitle, ScCarousel, ScCarouselContainer, ScCarouselItem, ScCarouselItems, ScCarouselNext, ScCarouselPrevious, ScCheckbox, ScCollapsible, ScCollapsibleContent, ScCollapsibleTrigger, ScCommand, ScCommandDialog, ScCommandEmpty, ScCommandError, ScCommandGroup, ScCommandInput, ScCommandItem, ScCommandList, ScCommandLoading, ScCommandSeparator, ScCommandShortcut, ScContextMenuTriggerFor, ScDataTable, ScDatePicker, ScDialog, ScDialogClose, ScDialogContent, ScDialogDescription, ScDialogFooter, ScDialogHeader, ScDialogTitle, ScEditor, ScFullCalendar, ScHoverCard, ScHoverCardTriggerFor, ScInput, ScInputOTPGroup, ScInputOTPSeparator, ScInputOTPSlot, ScInputOtp, ScLabel, ScMenu, ScMenuBar, ScMenuBarItem, ScMenuCheckboxGroup, ScMenuCheckboxItem, ScMenuGroup, ScMenuItem, ScMenuLabel, ScMenuRadioGroup, ScMenuRadioItem, ScMenuSeparator, ScMenuShortcut, ScMenuTriggerFor, ScNav, ScNavItem, ScNavItemDropdown, ScNavLink, ScNavList, ScOption, ScPaginator, ScPopoverTriggerFor, ScProgress, ScRadioGroup, ScRadioItem, ScScrollArea, ScSelect, ScSheet, ScSheetClose, ScSheetConfig, ScSheetTrigger, ScSidebar, ScSidebarProvider, ScSidebarState, ScSidebarToggler, ScSkeleton, ScSlider, ScSwitch, ScTab, ScTabContent, ScTabLabel, ScTable, ScTableBody, ScTableCaption, ScTableCell, ScTableContainer, ScTableFooter, ScTableHead, ScTableHeader, ScTableRow, ScTabs, ScTextarea, ScThemeToggler, ScToast, ScToastExample, ScToggle, ScTooltip, TelInputComponent, TelModel, Toaster, buttonVariants, cn, scThemeProvider };
+export { FormFieldCustomControlComponent, ScAccordion, ScAccordionContent, ScAccordionHeader, ScAccordionItem, ScAccordionItemDescription, ScAccordionTrigger, ScAlert, ScAlertDescription, ScAlertDialog, ScAlertTitle, ScArticle, ScAspectRatio, ScAutocomplete, ScAvatar, ScBadge, ScBlockquote, ScBreadcrumb, ScBreadcrumbEllipsis, ScBreadcrumbItem, ScBreadcrumbLink, ScBreadcrumbList, ScBreadcrumbPage, ScBreadcrumbSeparator, ScButton, ScCalendar, ScCard, ScCardContent, ScCardDescription, ScCardFooter, ScCardHeader, ScCardTitle, ScCarousel, ScCarouselContainer, ScCarouselItem, ScCarouselItems, ScCarouselNext, ScCarouselPrevious, ScCheckbox, ScCollapsible, ScCollapsibleContent, ScCollapsibleTrigger, ScCommand, ScCommandDialog, ScCommandEmpty, ScCommandError, ScCommandGroup, ScCommandInput, ScCommandItem, ScCommandList, ScCommandLoading, ScCommandSeparator, ScCommandShortcut, ScContextMenuTriggerFor, ScCookieConsent, ScDataTable, ScDatePicker, ScDialog, ScDialogClose, ScDialogContent, ScDialogDescription, ScDialogFooter, ScDialogHeader, ScDialogTitle, ScEditor, ScFileUpload, ScFileUploader, ScFullCalendar, ScHeading, ScHoverCard, ScHoverCardTriggerFor, ScInput, ScInputOTPGroup, ScInputOTPSeparator, ScInputOTPSlot, ScInputOtp, ScLabel, ScMenu, ScMenuBar, ScMenuBarItem, ScMenuCheckboxGroup, ScMenuCheckboxItem, ScMenuGroup, ScMenuItem, ScMenuLabel, ScMenuRadioGroup, ScMenuRadioItem, ScMenuSeparator, ScMenuShortcut, ScMenuTriggerFor, ScNav, ScNavItem, ScNavItemDropdown, ScNavLink, ScNavList, ScOption, ScPageDescription, ScPageSubtitle, ScPageTitle, ScPaginator, ScPopoverTriggerFor, ScProgress, ScRadioGroup, ScRadioItem, ScScrollArea, ScSelect, ScSeparator, ScSettings, ScSheet, ScSheetClose, ScSheetConfig, ScSheetTrigger, ScSidebar, ScSidebarProvider, ScSidebarState, ScSidebarToggler, ScSingleFileUploader, ScSkeleton, ScSlider, ScSwitch, ScTab, ScTabContent, ScTabContent2, ScTabGroup, ScTabItem, ScTabLabel, ScTabLabel2, ScTable, ScTableBody, ScTableCaption, ScTableCell, ScTableContainer, ScTableFooter, ScTableHead, ScTableHeader, ScTableRow, ScTabs, ScTextarea, ScThemeToggler, ScTimePicker, ScToast, ScToastExample, ScToggle, ScToggleGroup, ScToggleGroupItem, ScTooltip, Section, TelInputComponent, TelModel, Toaster, buttonVariants, scArticleClasses, scInputStyles, scThemeProvider };
 //# sourceMappingURL=semantic-components-ui.mjs.map