@rxap/layout 19.1.0-dev.0 → 19.1.0-dev.1

package/lib/default-header/apps-button/apps-button.component.d.ts

@@ -1,11 +1,12 @@
 import { OnInit } from '@angular/core';
+import { ExternalAppsService } from '../../external-apps.service';
 import * as i0 from "@angular/core";
 export declare class AppsButtonComponent implements OnInit {
     /**
      * The signal that indicates if the app list is open
      */
     readonly isOpen: import("@angular/core").WritableSignal<boolean>;
-    private readonly externalAppsService;
+    protected readonly externalAppsService: ExternalAppsService;
     readonly appList: import("@angular/core").Signal<import("@rxap/config").AppsNavigationConfig[]>;
     readonly hasApps: import("@angular/core").Signal<boolean>;
     toggle(): void;

package/lib/default-header/default-header.component.d.ts

@@ -1,10 +1,12 @@
+import { LayoutService } from '../layout.service';
+import { DefaultHeaderService } from './default-header.service';
 import * as i0 from "@angular/core";
 export declare class DefaultHeaderComponent {
-    private readonly layoutComponentService;
+    protected readonly layoutComponentService: LayoutService;
     readonly collapsable: import("@angular/core").Signal<boolean>;
     readonly opened: import("@angular/core").Signal<boolean>;
     readonly profile: import("@angular/core").Signal<unknown>;
-    private readonly defaultHeaderService;
+    protected readonly defaultHeaderService: DefaultHeaderService;
     readonly portals: import("@angular/core").Signal<import("@angular/cdk/portal").Portal<unknown>[]>;
     readonly hasPortals: import("@angular/core").Signal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DefaultHeaderComponent, never>;

package/lib/default-header/settings-button/settings-button.component.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPortal } from '@angular/cdk/portal';
-import { Signal } from '@angular/core';
+import { Injector, Signal } from '@angular/core';
 import { ThemeService } from '@rxap/ngx-theme';
 import { ThemeDensity } from '@rxap/utilities';
 import { SettingsMenuItem } from '../../types';
@@ -7,7 +7,7 @@ import * as i0 from "@angular/core";
 export declare class SettingsButtonComponent {
     isDevMode: boolean;
     readonly theme: ThemeService;
-    private readonly injector;
+    protected readonly injector: Injector;
     customItemComponents: Signal<ComponentPortal<unknown>[]>;
     customItems: import("@angular/core").WritableSignal<SettingsMenuItem[]>;
     private savePreviewDensityValue;

package/lib/default-header/sidenav-toggle-button/sidenav-toggle-button.component.d.ts

@@ -1,6 +1,7 @@
+import { LayoutService } from '../../layout.service';
 import * as i0 from "@angular/core";
 export declare class SidenavToggleButtonComponent {
-    private readonly layoutComponentService;
+    protected readonly layoutComponentService: LayoutService;
     readonly opened: import("@angular/core").Signal<boolean>;
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SidenavToggleButtonComponent, never>;

package/lib/default-header/user-profile-icon/user-profile-icon.component.d.ts

@@ -1,7 +1,9 @@
+import { PubSubService } from '@rxap/ngx-pub-sub';
+import { ExtractUsernameFromProfileFn } from '../../types';
 import * as i0 from "@angular/core";
 export declare class UserProfileIconComponent {
-    private readonly extractUsernameFromProfile;
-    private readonly pubSubService;
+    protected readonly extractUsernameFromProfile: ExtractUsernameFromProfileFn;
+    protected readonly pubSubService: PubSubService;
     readonly profile: import("@angular/core").InputSignal<unknown>;
     readonly username: import("@angular/core").Signal<string | null>;
     logout(): void;

package/lib/footer/footer.component.d.ts

@@ -1,6 +1,7 @@
+import { FooterService } from '../footer.service';
 import * as i0 from "@angular/core";
 export declare class FooterComponent {
-    private readonly footerService;
+    protected readonly footerService: FooterService;
     readonly portals: import("@angular/core").Signal<import("@angular/cdk/portal").Portal<unknown>[]>;
     readonly hasPortals: import("@angular/core").Signal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FooterComponent, never>;

package/lib/header/header.component.d.ts

@@ -1,8 +1,9 @@
 import { ThemePalette } from '@angular/material/core';
+import { HeaderService } from '../header.service';
 import * as i0 from "@angular/core";
 export declare class HeaderComponent {
     readonly color: import("@angular/core").InputSignal<ThemePalette>;
-    private readonly headerService;
+    protected readonly headerService: HeaderService;
     readonly portals: import("@angular/core").Signal<import("@angular/cdk/portal").Portal<unknown>[]>;
     readonly hasPortals: import("@angular/core").Signal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<HeaderComponent, never>;

package/lib/layout/layout.component.d.ts

@@ -1,7 +1,8 @@
 import { Signal } from '@angular/core';
+import { LogoService } from '../logo.service';
 import * as i0 from "@angular/core";
 export declare class LayoutComponent {
-    private readonly logoService;
+    protected readonly logoService: LogoService;
     readonly logoSrc: Signal<string>;
     readonly logoWidth: Signal<number>;
     readonly logoHeight: Signal<number>;

package/lib/navigation/navigation-item/navigation-item.component.d.ts

@@ -1,4 +1,7 @@
-import { OnChanges, OnDestroy, SimpleChanges, AfterViewInit } from '@angular/core';
+import { ElementRef, OnChanges, OnDestroy, Renderer2, SimpleChanges, AfterViewInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { LayoutService } from '../../layout.service';
 import { Navigation, NavigationDividerItem, NavigationItem } from '../navigation-item';
 import * as i0 from "@angular/core";
 export declare class NavigationItemComponent implements OnChanges, OnDestroy, AfterViewInit {
@@ -7,12 +10,12 @@ export declare class NavigationItemComponent implements OnChanges, OnDestroy, Af
     readonly item: import("@angular/core").InputSignal<NavigationItem<Navigation>>;
     readonly active: import("@angular/core").WritableSignal<boolean>;
     readonly itemClasses: import("@angular/core").Signal<string>;
-    private readonly layoutService;
+    protected readonly layoutService: LayoutService;
     readonly collapsed: import("@angular/core").Signal<boolean>;
-    private readonly _subscription;
-    private readonly router;
-    private readonly elementRef;
-    private readonly renderer;
+    protected readonly _subscription: Subscription;
+    protected readonly router: Router;
+    protected readonly elementRef: ElementRef<any>;
+    protected readonly renderer: Renderer2;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

package/lib/navigation/navigation.component.d.ts

@@ -1,15 +1,17 @@
 import { OnInit } from '@angular/core';
+import { LayoutService } from '../layout.service';
+import { NavigationService } from '../navigation.service';
 import { Navigation, NavigationDividerItem, NavigationItem } from './navigation-item';
 import * as i0 from "@angular/core";
 export declare class NavigationComponent implements OnInit {
     items: import("@angular/core").InputSignal<Navigation | undefined>;
     level: import("@angular/core").InputSignal<number>;
-    private readonly navigationService;
-    private readonly layoutService;
+    protected readonly navigationService: NavigationService;
+    protected readonly layoutService: LayoutService;
     readonly collapsed: import("@angular/core").Signal<boolean>;
     navigationItems: import("@angular/core").Signal<Navigation>;
     readonly root: import("@angular/core").InputSignal<boolean>;
-    private readonly injector;
+    protected readonly injector: import("@angular/core").Injector;
     ngOnInit(): void;
     isNavigationDividerItem(item: NavigationItem | NavigationDividerItem): item is NavigationDividerItem;
     isNavigationItem(item: NavigationItem | NavigationDividerItem): item is NavigationItem;

package/lib/release-info/release-info.component.d.ts

@@ -1,8 +1,9 @@
+import { MatDialog } from '@angular/material/dialog';
 import * as i0 from "@angular/core";
 export declare class ReleaseInfoComponent {
     readonly modules: import("@rxap/layout").ReleaseInfoModule[];
     readonly release: string;
-    private readonly dialog;
+    protected readonly dialog: MatDialog;
     openEnvironmentInfo(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ReleaseInfoComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ReleaseInfoComponent, "rxap-release-info", never, {}, {}, never, never, true, never>;

package/lib/sidenav/sidenav.component.d.ts

@@ -1,11 +1,12 @@
 import { Signal } from '@angular/core';
-import { MatDrawerMode } from '@angular/material/sidenav';
+import { MatDrawerMode, MatSidenav } from '@angular/material/sidenav';
+import { LayoutService } from '../layout.service';
 import { SidenavFooterDirective } from './sidenav-footer.directive';
 import { SidenavHeaderDirective } from './sidenav-header.directive';
 import * as i0 from "@angular/core";
 export declare class SidenavComponent {
-    private readonly layoutService;
-    private readonly sidenav;
+    protected readonly layoutService: LayoutService;
+    protected readonly sidenav: Signal<MatSidenav | undefined>;
     readonly sidenavMode: Signal<MatDrawerMode>;
     readonly fixedBottomGap: Signal<number>;
     readonly fixedTopGap: Signal<number>;
@@ -17,6 +18,7 @@ export declare class SidenavComponent {
     readonly sidenavFooterDirective: Signal<SidenavFooterDirective | undefined>;
     readonly sidenavHeaderDirective: Signal<SidenavHeaderDirective | undefined>;
     togglePinned(): void;
+    onOpenedChanged(opened: boolean): void;
     openSidenav(): Promise<void>;
     closeSidenav(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SidenavComponent, never>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "19.1.0-dev.0",
+  "version": "19.1.0-dev.1",
   "name": "@rxap/layout",
   "description": "This library provides a set of Angular components and services for creating consistent and configurable application layouts, including headers, footers, side navigation, and content areas. It offers features such as dynamic navigation, external application integration, and customizable themes. The library also includes directives for extending header and footer areas with custom content.\n",
   "license": "GPL-3.0-or-later",
@@ -153,7 +153,7 @@
   },
   "schematics": "./generators.json",
   "sideEffects": false,
-  "gitHead": "2df84dd31f2c1f51c5906e2b86bf28c7e814f454",
+  "gitHead": "1a1dfaee7f5f25091f01e97dac74f87a80699213",
   "module": "fesm2022/rxap-layout.mjs",
   "typings": "index.d.ts",
   "exports": {

package/theme.css

@@ -1 +1,425 @@
-.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.bottom-0{bottom:0}.top-0{top:0}.z-10{z-index:10}.mx-16{margin-right:4rem}.ml-16,.mx-16{margin-left:4rem}.mt-4{margin-top:1rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.contents{display:contents}.hidden{display:none}.h-10{height:2.5rem}.h-12{height:3rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-8{width:2rem}.w-full{width:100%}.\!max-w-none{max-width:none!important}.grow{flex-grow:1}.grow-0{flex-grow:0}.table-auto{table-layout:auto}.border-separate{border-collapse:separate}.border-spacing-2{--tw-border-spacing-x:0.5rem;--tw-border-spacing-y:0.5rem;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-items-stretch{justify-items:stretch}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-5{row-gap:1.25rem}.self-stretch{align-self:stretch}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-l-4{border-left-width:4px}.border-accent-600{border-color:var(--accent-600)}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-cover{background-size:cover}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-16{padding-left:4rem;padding-right:4rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem}.pb-2,.py-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pl-5{padding-left:1.25rem}.pr-5{padding-right:1.25rem}.text-\[32px\]{font-size:32px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.capitalize{text-transform:capitalize}.text-accent-400{color:var(--accent-400)}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.invert{--tw-invert:invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.\!filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.dark\:border-slate-600:where(.dark,.dark *){--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.dark\:border-slate-700:where(.dark,.dark *){--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.dark\:bg-slate-700:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.dark\:bg-slate-800:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.dark\:text-neutral-400:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity,1))}.dark\:text-slate-200:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.dark\:text-slate-400:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.dark\:hover\:text-white:hover:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}
+.visible {
+  visibility: visible
+}
+
+.invisible {
+  visibility: hidden
+}
+
+.collapse {
+  visibility: collapse
+}
+
+.static {
+  position: static
+}
+
+.fixed {
+  position: fixed
+}
+
+.absolute {
+  position: absolute
+}
+
+.relative {
+  position: relative
+}
+
+.sticky {
+  position: sticky
+}
+
+.bottom-0 {
+  bottom: 0px
+}
+
+.top-0 {
+  top: 0px
+}
+
+.z-10 {
+  z-index: 10
+}
+
+.mx-16 {
+  margin-left: 4rem;
+  margin-right: 4rem
+}
+
+.ml-16 {
+  margin-left: 4rem
+}
+
+.mt-4 {
+  margin-top: 1rem
+}
+
+.block {
+  display: block
+}
+
+.inline {
+  display: inline
+}
+
+.flex {
+  display: flex
+}
+
+.table {
+  display: table
+}
+
+.contents {
+  display: contents
+}
+
+.hidden {
+  display: none
+}
+
+.h-10 {
+  height: 2.5rem
+}
+
+.h-12 {
+  height: 3rem
+}
+
+.h-6 {
+  height: 1.5rem
+}
+
+.h-8 {
+  height: 2rem
+}
+
+.h-full {
+  height: 100%
+}
+
+.w-8 {
+  width: 2rem
+}
+
+.w-full {
+  width: 100%
+}
+
+.\!max-w-none {
+  max-width: none !important
+}
+
+.grow {
+  flex-grow: 1
+}
+
+.grow-0 {
+  flex-grow: 0
+}
+
+.table-auto {
+  table-layout: auto
+}
+
+.border-separate {
+  border-collapse: separate
+}
+
+.border-spacing-2 {
+  --tw-border-spacing-x: 0.5rem;
+  --tw-border-spacing-y: 0.5rem;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y)
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+
+.cursor-pointer {
+  cursor: pointer
+}
+
+.list-none {
+  list-style-type: none
+}
+
+.flex-row {
+  flex-direction: row
+}
+
+.flex-col {
+  flex-direction: column
+}
+
+.items-center {
+  align-items: center
+}
+
+.justify-center {
+  justify-content: center
+}
+
+.justify-between {
+  justify-content: space-between
+}
+
+.justify-items-stretch {
+  justify-items: stretch
+}
+
+.gap-2 {
+  gap: 0.5rem
+}
+
+.gap-4 {
+  gap: 1rem
+}
+
+.gap-6 {
+  gap: 1.5rem
+}
+
+.gap-8 {
+  gap: 2rem
+}
+
+.gap-x-4 {
+  -moz-column-gap: 1rem;
+       column-gap: 1rem
+}
+
+.gap-y-5 {
+  row-gap: 1.25rem
+}
+
+.self-stretch {
+  align-self: stretch
+}
+
+.overflow-hidden {
+  overflow: hidden
+}
+
+.whitespace-nowrap {
+  white-space: nowrap
+}
+
+.rounded-full {
+  border-radius: 9999px
+}
+
+.border {
+  border-width: 1px
+}
+
+.border-l-4 {
+  border-left-width: 4px
+}
+
+.border-accent-600 {
+  border-color: var(--accent-600)
+}
+
+.border-slate-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1))
+}
+
+.bg-slate-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1))
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
+}
+
+.bg-cover {
+  background-size: cover
+}
+
+.bg-center {
+  background-position: center
+}
+
+.bg-no-repeat {
+  background-repeat: no-repeat
+}
+
+.p-10 {
+  padding: 2.5rem
+}
+
+.p-2 {
+  padding: 0.5rem
+}
+
+.p-4 {
+  padding: 1rem
+}
+
+.px-16 {
+  padding-left: 4rem;
+  padding-right: 4rem
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem
+}
+
+.pl-2 {
+  padding-left: 0.5rem
+}
+
+.pl-4 {
+  padding-left: 1rem
+}
+
+.pl-5 {
+  padding-left: 1.25rem
+}
+
+.pr-5 {
+  padding-right: 1.25rem
+}
+
+.text-\[32px\] {
+  font-size: 32px
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem
+}
+
+.font-bold {
+  font-weight: 700
+}
+
+.capitalize {
+  text-transform: capitalize
+}
+
+.text-accent-400 {
+  color: var(--accent-400)
+}
+
+.text-neutral-700 {
+  --tw-text-opacity: 1;
+  color: rgb(64 64 64 / var(--tw-text-opacity, 1))
+}
+
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity, 1))
+}
+
+.text-slate-500 {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity, 1))
+}
+
+.text-slate-900 {
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity, 1))
+}
+
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px
+}
+
+.invert {
+  --tw-invert: invert(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+
+.\!filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important
+}
+
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms
+}
+
+.hover\:text-black:hover {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
+}
+
+.dark\:border-slate-600:where(.dark, .dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1))
+}
+
+.dark\:border-slate-700:where(.dark, .dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1))
+}
+
+.dark\:bg-slate-700:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1))
+}
+
+.dark\:bg-slate-800:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1))
+}
+
+.dark\:text-neutral-400:where(.dark, .dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1))
+}
+
+.dark\:text-slate-200:where(.dark, .dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity, 1))
+}
+
+.dark\:text-slate-400:where(.dark, .dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity, 1))
+}
+
+.dark\:hover\:text-white:hover:where(.dark, .dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}