@f1falcha/stimulus 1.0.0

package/grid/grid-config.scss

@@ -0,0 +1,14 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        scl-grid-spacing-micro: 0.25rem,
+        scl-grid-spacing-tiny: 0.75rem,
+        scl-grid-spacing-small: 1rem,
+        scl-grid-spacing-medium: 1.5rem,
+        scl-grid-spacing-large: 2.5rem,
+        scl-grid-spacing-giant: 3rem,
+    ),
+    default,
+    default
+);

package/grid/grid-item.component.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class SclGridItemComponent {
+    colSpan?: number;
+    get gridColumn(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclGridItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclGridItemComponent, "scl-grid-item", never, { "colSpan": { "alias": "colSpan"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=grid-item.component.d.ts.map

package/grid/grid.component.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+type GapSize = 'tiny' | 'small' | 'medium' | 'large' | 'giant';
+export declare class SclGridComponent {
+    cols?: number;
+    gap: GapSize;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclGridComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclGridComponent, "scl-grid", never, { "cols": { "alias": "cols"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export {};
+//# sourceMappingURL=grid.component.d.ts.map

package/grid/grid.component.scss

@@ -0,0 +1,26 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-grid {
+    &__list {
+        display: grid;
+        &--micro-spacing {
+            gap: nb-theme(scl-grid-spacing-micro);
+        }
+        &--tiny-spacing {
+            gap: nb-theme(scl-grid-spacing-tiny);
+        }
+        &--small-spacing {
+            gap: nb-theme(scl-grid-spacing-small);
+        }
+
+        &--medium-spacing {
+            gap: nb-theme(scl-grid-spacing-medium);
+        }
+        &--large-spacing {
+            gap: nb-theme(scl-grid-spacing-large);
+        }
+        &--giant-spacing {
+            gap: nb-theme(scl-grid-spacing-giant);
+        }
+    }
+}

package/grid-row/grid-row.config.scss

@@ -0,0 +1,9 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        scl-grid-row-gap: 1rem,
+    ),
+    default,
+    default
+);

package/grid-row/grid-row.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class SclGridRowComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclGridRowComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SclGridRowComponent, "[sclGridRow]", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=grid-row.d.ts.map

package/grid-row/grid-row.scss

@@ -0,0 +1,7 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-grid-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: nb-theme(scl-grid-row-gap);
+}

package/icon/icon.config.scss

@@ -0,0 +1,9 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        icon-svg-height:100%,
+        icon-svg-width:100%,
+    ),
+        default,
+        default);

package/icon/icon.scss

@@ -0,0 +1,9 @@
+@use "@nebular/theme/styles/theming" as *;
+
+nb-icon {
+    vertical-align: middle;
+    svg {
+        width: nb-theme(icon-svg-width);
+        height: nb-theme(icon-svg-height);
+    }
+}

package/icon/icons.d.ts

@@ -0,0 +1,3 @@
+import { NbIcons } from '@nebular/theme';
+export declare const SclIcons: NbIcons;
+//# sourceMappingURL=icons.d.ts.map

package/image-card/illustration.pipe.d.ts

@@ -0,0 +1,8 @@
+import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SclIllustrationPipe implements PipeTransform {
+    transform(state: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclIllustrationPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<SclIllustrationPipe, "illustrationState", true>;
+}
+//# sourceMappingURL=illustration.pipe.d.ts.map

package/image-card/image-card-config.scss

@@ -0,0 +1,29 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        // card Content styles
+        scl-image-card-content-width: 22.5rem,
+        scl-image-card-content-gap: 0.75rem,
+        scl-image-card-content-min-height: 100%,
+
+        // card Title styles
+        scl-image-card-title-font-size: scl-text-title-medium-font-size,
+        scl-image-card-title-line-height: 1.44,
+        scl-image-card-title-font-weight: scl-text-semi-bold-font-weight,
+        scl-image-card-title-margin: 0 0 0.25rem 0,
+        scl-image-card-title-color: color-basic-900,
+
+        // card description styles
+        scl-image-card-description-font-size: scl-text-label-large-font-size,
+        scl-image-card-description-line-height: scl-text-label-large-line-height,
+        scl-image-card-description-color: color-basic-600,
+        scl-image-card-description-text-align: center,
+        scl-image-card-description-margin: 0,
+
+        // card wrapper styles
+        scl-image-card-wrapper-gap: 0.75rem
+    ),
+    default,
+    default
+);

package/image-card/image-card.component.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class SclImageCard {
+    title: string;
+    type: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclImageCard, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclImageCard, "scl-image-card", never, { "title": { "alias": "heading"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=image-card.component.d.ts.map

package/image-card/image-card.scss

@@ -0,0 +1,37 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-image-card {
+    display: grid;
+    align-items: center;
+    justify-content: center;
+    width: nb-theme(scl-image-card-content-width);
+    margin: auto;
+
+    &__content {
+        display: grid;
+        place-items: center;
+        gap: nb-theme(scl-image-card-content-gap);
+    }
+
+    &__title {
+        font-size: nb-theme(scl-image-card-title-font-size);
+        line-height: nb-theme(scl-image-card-title-line-height);
+        font-weight: nb-theme(scl-image-card-title-font-weight);
+        color: nb-theme(scl-image-card-title-color);
+        margin: nb-theme(scl-image-card-title-margin);
+    }
+
+    &__wrapper {
+        display: grid;
+        place-items: center;
+        gap: nb-theme(scl-image-card-wrapper-gap);
+    }
+
+    &__description {
+        font-size: nb-theme(scl-image-card-description-font-size);
+        line-height: nb-theme(scl-image-card-description-line-height);
+        color: nb-theme(scl-image-card-description-color);
+        text-align: nb-theme(scl-image-card-description-text-align);
+        margin: nb-theme(scl-image-card-description-margin);
+    }
+}

package/image-panel/image-panel-config.scss

@@ -0,0 +1,30 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        scl-image-panel-border-radius: 0.375rem,
+        scl-image-panel-border-width: 0.063rem,
+        scl-image-panel-border-color: color-basic-300,
+        scl-image-panel-width: 20rem,
+        scl-image-panel-hover-background-color: color-basic-200,
+
+        scl-image-panel-img-border-radius: 0.375rem,
+        scl-image-panel-img-height: 11.25rem,
+
+        scl-image-panel-description-border-radius: 0.375rem,
+        scl-image-panel-description-padding: 0.75rem 0.5rem,
+        scl-image-panel-description-font-size: scl-text-scl-text-body-medium-font-size,
+        scl-image-panel-description-line-height: scl-text-scl-text-body-medium-line-height,
+        scl-image-panel-description-font-weight: scl-text-scl-text-medium-font-weight,
+
+        scl-image-panel-description-url-color: color-info-600,
+        scl-image-panel-description-color: color-basic-600,
+
+        scl-image-panel-medium-width: 26.25rem,
+
+        scl-image-panel-button-top: 0.563rem,
+        scl-image-panel-button-right: 0.563rem,
+    ),
+    default,
+    default
+);

package/image-panel/image-panel.component.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from '@angular/core';
+import { SafeUrl } from '@angular/platform-browser';
+import { NbIconLibraries } from '@nebular/theme';
+import * as i0 from "@angular/core";
+export declare class SclImagePanelComponent {
+    private iconLibraries;
+    src: string | SafeUrl;
+    alt?: string;
+    url?: string;
+    size?: string;
+    protected contextButton: boolean;
+    set showButton(value: boolean | string);
+    get showButton(): boolean | string;
+    view: EventEmitter<string>;
+    copy: EventEmitter<string>;
+    download: EventEmitter<string>;
+    constructor(iconLibraries: NbIconLibraries);
+    get descriptionUrl(): boolean;
+    get medium(): boolean;
+    onView(): void;
+    onCopy(): void;
+    onDownload(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclImagePanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclImagePanelComponent, "scl-image-panel", never, { "src": { "alias": "src"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "url": { "alias": "url"; "required": false; }; "size": { "alias": "size"; "required": false; }; "showButton": { "alias": "showButton"; "required": false; }; }, { "view": "view"; "copy": "copy"; "download": "download"; }, never, ["*"], true, never>;
+}
+//# sourceMappingURL=image-panel.component.d.ts.map

package/image-panel/image-panel.component.scss

@@ -0,0 +1,80 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-image-panel {
+    display: block;
+    border-width: nb-theme(scl-image-panel-border-width);
+    border-style: solid;
+    border-color: nb-theme(scl-image-panel-border-color);
+    border-radius: nb-theme(scl-image-panel-border-radius);
+    width: nb-theme(scl-image-panel-width);
+    overflow: hidden;
+
+    &:focus-within {
+        outline: 0.25rem solid nb-theme(color-primary-100);
+    }
+
+    &:hover {
+        overflow: hidden;
+        background-color: nb-theme(scl-image-panel-hover-background-color);
+
+        .scl-image-panel__image {
+            opacity: 0.8;
+        }
+
+        .scl-image-panel__button {
+            display: block;
+        }
+    }
+
+    &__image {
+        height: nb-theme(scl-image-panel-img-height);
+        position: relative;
+    }
+
+    &__button {
+        position: absolute;
+        right: nb-theme(scl-image-panel-button-right);
+        top: nb-theme(scl-image-panel-button-top);
+        display: none;
+
+        &:has(scl-context-menu .open) {
+            display: block;
+        }
+    }
+
+    &__img {
+        width: 100%;
+        height: 100%;
+        border-top-right-radius: nb-theme(scl-image-panel-img-border-radius);
+        border-top-left-radius: nb-theme(scl-image-panel-img-border-radius);
+    }
+
+    &__description {
+        border-radius: nb-theme(scl-image-panel-description-border-radius);
+        font-size: nb-theme(scl-image-panel-description-font-size);
+        font-weight: nb-theme(scl-image-panel-description-font-weight);
+        line-height: nb-theme(scl-image-panel-description-line-height);
+        color: nb-theme(scl-image-panel-description-color);
+        word-wrap: break-word;
+
+        &:has(> *) {
+            padding: nb-theme(scl-image-panel-description-padding);
+        }
+
+        a:focus {
+            outline: none;
+        }
+    }
+
+    &--url {
+        .scl-image-panel {
+            &__description {
+                color: nb-theme(scl-image-panel-description-url-color);
+            }
+        }
+    }
+
+    &--medium {
+        width: nb-theme(scl-image-panel-medium-width);
+    }
+}

package/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@f1softinternational/stimulus" />
+export * from './public-api';
+//# sourceMappingURL=f1softinternational-stimulus.d.ts.map

package/info-column/info-column-config.scss

@@ -0,0 +1,14 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        scl-info-column-title-color: color-basic-600,
+        scl-info-column-title-margin: 0,
+        scl-info-column-title-font-size: scl-text-label-medium-font-size,
+        scl-info-column-title-line-height: scl-text-label-medium-line-height,
+        scl-info-column-title-font-weight: scl-text-medium-font-weight,
+        scl-info-column-title-text-transform: capitalize,
+    ),
+    default,
+    default
+);

package/info-column/info-column.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class SclInfoColumn {
+    heading: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclInfoColumn, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclInfoColumn, "scl-info-column", never, { "heading": { "alias": "heading"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=info-column.d.ts.map

package/info-column/info-column.scss

@@ -0,0 +1,17 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-info-column {
+    &__title {
+        color: nb-theme(scl-info-column-title-color);
+        margin: nb-theme(scl-info-column-title-margin);
+        font-size: nb-theme(scl-info-column-title-font-size);
+        line-height: nb-theme(scl-info-column-title-line-height);
+        font-weight: nb-theme(scl-info-column-title-font-weight);
+        text-transform: nb-theme(scl-info-column-title-text-transform);
+    }
+
+    &__content {
+        font-size: 0.875rem;
+        line-height: 1.43;
+    }
+}

package/info-slider/info-slider-config.scss

@@ -0,0 +1,10 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        scl-info-slider-icon-info-color: color-info-600,
+        scl-info-slider-icon-success-color: color-success-600,
+    ),
+    default,
+    default
+);

package/info-slider/info-slider.component.d.ts

@@ -0,0 +1,16 @@
+import { EventEmitter } from '@angular/core';
+import { NbIconLibraries } from '@nebular/theme';
+import * as i0 from "@angular/core";
+export declare class SclInfoSliderComponent {
+    private iconLibraries;
+    currentIndex: number;
+    totalIndex: number;
+    changeIndex: EventEmitter<number>;
+    showBulkInteraction: boolean;
+    constructor(iconLibraries: NbIconLibraries);
+    previous(currentIndex: number): void;
+    next(currentIndex: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclInfoSliderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclInfoSliderComponent, "scl-info-slider", never, { "currentIndex": { "alias": "currentIndex"; "required": false; }; "totalIndex": { "alias": "totalIndex"; "required": false; }; "showBulkInteraction": { "alias": "showBulkInteraction"; "required": false; }; }, { "changeIndex": "changeIndex"; }, never, ["*"], true, never>;
+}
+//# sourceMappingURL=info-slider.component.d.ts.map

package/info-slider/info-slider.component.scss

@@ -0,0 +1,21 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-info-slider {
+    &__wrapper {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        align-items: center;
+    }
+    &__content {
+        display: flex;
+        align-items: center;
+    }
+    &__icon {
+        &--info {
+            color: nb-theme(scl-info-slider-icon-info-color);
+        }
+        &--success {
+            color: nb-theme(scl-info-slider-icon-success-color);
+        }
+    }
+}

package/inline-alert/inline-alert-config.scss

@@ -0,0 +1,12 @@
+@use "@nebular/theme/styles/theming" as *;
+@use "../alert/alert-config.scss" as *;
+
+$nb-themes: nb-register-theme(
+    (
+        scl-inline-alert-width: 100%,
+
+        scl-inline-alert-control-background-color: color-base-transparent,
+    ),
+    default,
+    default
+);

package/inline-alert/inline-alert.d.ts

@@ -0,0 +1,20 @@
+import { NbIconLibraries } from '@nebular/theme';
+import * as i0 from "@angular/core";
+export declare class SclInlineAlert {
+    private iconLibraries;
+    status: string;
+    heading?: string;
+    description?: string;
+    set plainAlert(shouldRemoveBackground: string | boolean);
+    get plainAlert(): string | boolean;
+    set shouldClose(shouldCloseAlert: string | boolean);
+    get shouldClose(): string | boolean;
+    showAlert: boolean;
+    protected showClose: boolean;
+    protected isPlain: boolean;
+    constructor(iconLibraries: NbIconLibraries);
+    onClose(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclInlineAlert, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclInlineAlert, "scl-inline-alert", never, { "status": { "alias": "status"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "description": { "alias": "description"; "required": false; }; "plainAlert": { "alias": "plainAlert"; "required": false; }; "shouldClose": { "alias": "shouldClose"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=inline-alert.d.ts.map

package/inline-alert/inline-alert.scss

@@ -0,0 +1,16 @@
+@use '@nebular/theme/styles/theming' as *;
+@use '../alert/alert.scss' as *;
+
+.scl-inline-alert {
+    width: nb-theme(scl-inline-alert-width);
+
+    &--control {
+        background-color: nb-theme(scl-inline-alert-control-background-color);
+        padding: 0;
+        border: none;
+    }
+
+    &__content:empty {
+        display: none;
+    }
+}

package/inline-group/inline-group.component.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export type InlineGroupGapType = 'tiny' | 'small';
+export declare class SclInlineGroup {
+    gap?: string;
+    get tiny(): boolean;
+    get small(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclInlineGroup, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SclInlineGroup, "[sclInlineGroup]", never, { "gap": { "alias": "gap"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=inline-group.component.d.ts.map

package/inline-group/inline-group.component.scss

@@ -0,0 +1,15 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-inline-group {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    flex-wrap: wrap;
+
+    &--tiny {
+        gap: 0.5rem;
+    }
+    &--small {
+        gap: 0.75rem;
+    }
+}

package/input/input-config.scss

@@ -0,0 +1,57 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        input-medium-text-font-weight: scl-text-light-font-weight,
+        input-medium-text-font-size: scl-text-body-medium-font-size,
+        input-medium-text-line-height: scl-text-body-medium-line-height,
+
+        input-medium-padding: 0.625rem 0.875rem,
+        input-medium-height: 2.5rem,
+        input-medium-placeholder-text-font-size: input-medium-text-font-size,
+
+        input-large-text-font-weight: input-medium-text-font-weight,
+        input-large-text-font-size: input-medium-text-font-size,
+        input-large-text-line-height: input-medium-text-line-height,
+
+        input-basic-background-color: color-control-default,
+        input-basic-hover-background-color: input-basic-background-color,
+
+        input-basic-border-color: color-basic-300,
+        input-basic-hover-border-color: color-basic-400,
+        input-basic-focus-border-color: color-primary-100,
+        input-basic-focus-background-color: color-control-default,
+        input-basic-focus-and-hover-border-color: color-primary-100,
+        input-basic-placeholder-text-color: color-basic-500,
+
+        // outline
+        input-outline-width: 0.25rem,
+        input-outline-style: solid,
+
+        input-rectangle-border-radius: 0.375rem,
+
+        // input danger
+        input-danger-background-color: color-control-default,
+        input-danger-border-color: color-danger-300,
+        input-danger-outline-color: color-danger-100,
+
+        input-danger-focus-background-color: color-control-default,
+
+        input-danger-hover-background-color: color-control-default,
+        input-danger-hover-border-color: color-danger-400,
+
+        // input-filled
+        input-basic-text-color: color-basic-900,
+
+        // disabled-input
+        input-basic-disabled-border-color: color-basic-300,
+        input-basic-disabled-background-color: color-basic-100,
+        input-basic-disabled-placeholder-text-color: color-basic-400,
+        input-basic-disabled-text-color: color-basic-400,
+
+        // readonly input
+        input-readonly-background-color: color-basic-100,
+    ),
+    default,
+    default
+);

package/input/input.d.ts

@@ -0,0 +1,10 @@
+import { ElementRef, NgZone, Renderer2 } from '@angular/core';
+import { NbFocusMonitor, NbInputDirective, NbStatusService } from '@nebular/theme';
+import * as i0 from "@angular/core";
+export declare class SclInput extends NbInputDirective {
+    constructor(elementRef: ElementRef<HTMLInputElement | HTMLTextAreaElement>, focusMonitor: NbFocusMonitor, renderer: Renderer2, zone: NgZone, statusService: NbStatusService);
+    private setAttribute;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclInput, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclInput, "input[sclInput],textarea[sclInput]", never, {}, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=input.d.ts.map

package/input/input.scss

@@ -0,0 +1,68 @@
+@use '@nebular/theme/styles/theming' as *;
+@use '@nebular/theme/styles/themes/default';
+
+[nbInput] {
+    &.status-basic {
+        &:focus {
+            &:hover {
+                border-color: nb-theme(color-primary-100);
+            }
+        }
+
+        &:focus {
+            outline: nb-theme(input-outline-width) nb-theme(input-outline-style) nb-theme(color-primary-100);
+        }
+    }
+}
+
+[nbInput].status-danger {
+    &:focus {
+        border: none;
+        outline: nb-theme(input-outline-width) nb-theme(input-outline-style) nb-theme(input-danger-outline-color);
+    }
+}
+
+input[type='text'],
+textarea[nbInput] {
+    &:read-only {
+        background-color: nb-theme(input-readonly-background-color);
+        pointer-events: none;
+        &:hover {
+            background-color: nb-theme(input-readonly-background-color);
+        }
+    }
+}
+
+textarea[nbInput] {
+    resize: none;
+    display: block;
+}
+
+.nb-tag-list-with-input {
+    min-height: 7.5rem;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+    border: 1px solid nb-theme(color-primary-100);
+    -webkit-box-shadow: 0 0 0px 1000px nb-theme(color-primary-50) inset;
+    transition: background-color 5000s ease-in-out 0s;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/* Hide spin buttons in Firefox */
+input[type='number'] {
+    -moz-appearance: textfield;
+}