@f1falcha/stimulus 1.0.0

package/timeline/timeline.component.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface SclTimelineItem {
+    label: string;
+    description: string;
+    active: boolean;
+    id: string;
+    [key: string]: any;
+}
+export declare class SclTimelineComponent {
+    onClick: EventEmitter<SclTimelineItem>;
+    private _data;
+    get data(): SclTimelineItem[];
+    set data(value: SclTimelineItem[]);
+    groupedData: any[];
+    constructor();
+    onSelect(value: SclTimelineItem): void;
+    groupByMonth(items: any[]): {
+        date: string;
+        remainingData: any[];
+    }[];
+    getMetadata(item: SclTimelineItem): any[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclTimelineComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclTimelineComponent, "scl-timeline", never, { "data": { "alias": "data"; "required": false; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
+}
+//# sourceMappingURL=timeline.component.d.ts.map

package/timeline/timeline.component.scss

@@ -0,0 +1,126 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-timeline {
+    display: flex;
+    flex-grow: 1;
+
+    &__card {
+        border: none;
+        max-height: calc(100% - nb-theme(scl-timeline-card-max-height));
+        gap: nb-theme(scl-timeline-card-gap);
+    }
+
+    &__card-body {
+        padding: 0;
+        overflow-y: auto;
+    }
+
+    &__aside {
+        max-width: nb-theme(scl-timeline-aside-max-width);
+        flex-basis: nb-theme(scl-timeline-aside-max-width);
+        border-right: nb-theme(scl-timeline-aside-border-right-width) solid nb-theme(scl-timeline-aside-border-right-color);
+        margin: nb-theme(scl-timeline-aside-margin);
+        position: sticky;
+        top: nb-theme(scl-timeline-aside-height-top);
+        height: calc(100vh - nb-theme(scl-timeline-aside-height));
+    }
+
+    &__content {
+        flex-grow: 1;
+        max-width: calc(100% - nb-theme(scl-timeline-aside-max-width));
+        flex-basis: calc(100% - nb-theme(scl-timeline-aside-max-width));
+    }
+
+    &__wrapper {
+        padding: nb-theme(scl-timeline-wrapper-padding);
+    }
+
+    &__title {
+        margin: nb-theme(scl-timeline-title-margin);
+        font-size: nb-theme(scl-timeline-title-font-size);
+        line-height: nb-theme(scl-timeline-title-line-height);
+        font-weight: nb-theme(scl-timeline-title-font-weight);
+    }
+}
+
+.scl-timeline-item {
+    display: flex;
+    margin: nb-theme(scl-timeline-item-margin);
+
+    &__bullet-wrapper {
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+    }
+
+    &__bullet {
+        border: nb-theme(scl-timeline-item-bullet-border-width) solid nb-theme(scl-timeline-item-bullet-border-color);
+        border-radius: 50%;
+        background: nb-theme(scl-timeline-item-bullet-background-color);
+        height: nb-theme(scl-timeline-item-bullet-width);
+        width: nb-theme(scl-timeline-item-bullet-width);
+        margin: nb-theme(scl-timeline-item-bullet-margin);
+        flex-shrink: 0;
+
+        &.active {
+            background-color: nb-theme(scl-timeline-item-bullet-active-background-color);
+            border-color: nb-theme(scl-timeline-item-bullet-active-border-color);
+        }
+    }
+
+    &__line {
+        flex-grow: 1;
+        width: nb-theme(scl-timeline-item-line-width);
+        background-color: nb-theme(scl-timeline-item-line-background-color);
+        margin: nb-theme(scl-timeline-item-line-margin);
+    }
+
+    &__card {
+        width: 100%;
+        max-width: nb-theme(scl-timeline-item-card-max-width);
+        padding: nb-theme(scl-timeline-item-card-padding);
+        border-radius: nb-theme(scl-timeline-item-card-border-radius);
+        background-color: transparent;
+        border: none;
+        display: flex;
+        flex-direction: column;
+        gap: nb-theme(scl-timeline-item-card-gap);
+        text-align: start;
+
+        &:focus {
+            background-color: nb-theme(scl-timeline-item-card-active-background-color);
+        }
+
+        &:hover {
+            background-color: nb-theme(scl-timeline-item-card-active-background-color);
+        }
+
+        &.active {
+            background-color: nb-theme(scl-timeline-item-card-active-background-color);
+            color: nb-theme(scl-timeline-item-card-active-color);
+
+            .scl-timeline-item__label {
+                color: nb-theme(scl-timeline-item-card-active-color);
+            }
+        }
+    }
+
+    &__content {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    &__label {
+        color: nb-theme(scl-timeline-item-label-color);
+        font-weight: nb-theme(scl-timeline-item-label-font-weight);
+        font-size: nb-theme(scl-timeline-item-label-font-size);
+        line-height: nb-theme(scl-timeline-item-label-line-height);
+        max-width: nb-theme(scl-timeline-item-label-max-width);
+    }
+
+    &__info {
+        color: nb-theme(scl-timeline-item-info-color);
+        font-size: nb-theme(scl-timeline-item-info-font-size);
+        line-height: nb-theme(scl-timeline-item-info-line-height);
+    }
+}

package/timepicker/timepicker-config.scss

@@ -0,0 +1,41 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        scl-timepicker-popover-background-color: color-base-white,
+        scl-timepicker-border-width: 0.063rem,
+        scl-timepicker-border-color: color-basic-200,
+
+        scl-timepicker-data-height: 23rem,
+
+        scl-timepicker-column-header-width: 5.625rem,
+        scl-timepicker-column-header-height: 2.5rem,
+        scl-timepicker-column-header-padding: 0.625rem 0.875rem,
+
+        scl-timepicker-columns-padding: 0.5rem 0 0 0.5rem,
+
+        scl-timepicker-columns-scrollbar-width: 0.3125rem,
+        scl-timepicker-columns-scrollbar-color: color-basic-200,
+        scl-timepicker-columns-scrollbar-border-radius: 0.375rem,
+        scl-timepicker-columns-scrollbar-background-color: color-basic-400,
+
+        scl-timepicker-item-width: 5.625rem,
+        scl-timepicker-item-padding: 0.625rem 0.875rem,
+
+        scl-timepicker-item-hover-background-color: color-basic-50,
+
+        scl-timepicker-item-selected-background-color: color-basic-50,
+        scl-timepicker-item-selected-border-radius: 0.375rem,
+
+        scl-timepicker-check-icon-width: 1rem,
+        scl-timepicker-check-icon-height: 0.5rem,
+        scl-timepicker-check-icon-border-width: 0.125rem,
+        scl-timepicker-check-icon-border-color: color-primary-500,
+
+        scl-timepicker-footer-padding: 0.5rem,
+
+        scl-datepicker-input-readonly-background-color: color-basic-100,
+    ),
+    default,
+    default
+);

package/timepicker/timepicker.component.d.ts

@@ -0,0 +1,74 @@
+import { ElementRef, EventEmitter, OnInit, QueryList } from '@angular/core';
+import { AbstractControl, FormBuilder, FormGroup, ValidationErrors } from '@angular/forms';
+import { NbIconLibraries, NbPopoverDirective } from '@nebular/theme';
+import { TimepickerData, TimepickerOption } from './timepicker.model';
+import * as i0 from "@angular/core";
+export declare class SclTimepickerComponent implements OnInit {
+    private formBuilder;
+    private iconLibraries;
+    popover: NbPopoverDirective;
+    timepickerItems: QueryList<ElementRef>;
+    timeChange: EventEmitter<string>;
+    placeholder: string;
+    set timeValues(value: string);
+    set format(value: string);
+    set min(value: Date);
+    set max(value: Date);
+    set readonly(value: string | boolean);
+    timePickerForm: FormGroup;
+    time: string;
+    timePickerOptions: TimepickerOption[];
+    hours: string[];
+    selectedHour: string;
+    minutes: string[];
+    selectedMinute: string;
+    periods: string[];
+    selectedPeriod: string;
+    defaultSeconds: string;
+    isTwelveHoursFormat: boolean;
+    selectedTime: string;
+    timeFormat: string;
+    isRequired: boolean;
+    minTime: Date;
+    maxTime: Date;
+    private touched;
+    isSelectingTime: boolean;
+    isReadonly: boolean;
+    get isFormValid(): boolean;
+    get formValue(): any;
+    constructor(formBuilder: FormBuilder, iconLibraries: NbIconLibraries);
+    ngOnInit(): void;
+    handleKeyboardEvents(event: KeyboardEvent): void;
+    onChange: (val: string) => void;
+    onTouch: () => void;
+    writeValue(obj: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    onBlur(): void;
+    onSelect(data: TimepickerData, unit: string): void;
+    onConfirm(): void;
+    validate(control: AbstractControl<any, any>): ValidationErrors | null;
+    getItemId(unit: string, label: string): string;
+    private getValidationErrors;
+    private isValidTimeFormat;
+    private getRequiredError;
+    private getDateRangeErrors;
+    private convertTimeToSeconds;
+    private setTimePickerForm;
+    private setTimePickerOptions;
+    private setSelectedValues;
+    private updateFormattedTime;
+    private extractTimeParts;
+    private selectTimePart;
+    private closePopover;
+    private reset;
+    private convertToDate;
+    private getCurrentTime;
+    scrollToSelectedItems({ isShown }: {
+        isShown: boolean;
+    }): void;
+    private formValueChange;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclTimepickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclTimepickerComponent, "scl-timepicker", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "timeValues": { "alias": "timeValues"; "required": false; }; "format": { "alias": "format"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "timeChange": "timeChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=timepicker.component.d.ts.map

package/timepicker/timepicker.component.scss

@@ -0,0 +1,111 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-timepicker {
+    &__popover {
+        background-color: nb-theme(scl-timepicker-popover-background-color);
+    }
+
+    &__input[nbInput] {
+        &.size-medium:not(.input-full-width) {
+            width: 100%;
+            max-width: 100%;
+            position: relative;
+        }
+
+        &.status-basic:focus:read-only {
+            background-color: nb-theme(scl-timepicker-input-readonly-background-color);
+        }
+    }
+
+    &__icon {
+        position: absolute;
+        top: 10px;
+        right: 14px;
+        pointer-events: none;
+    }
+
+    &__content {
+        display: flex;
+    }
+
+    &__data {
+        display: grid;
+        grid-template-rows: auto 1fr;
+        height: nb-theme(scl-timepicker-data-height);
+        border-right: nb-theme(scl-timepicker-border-width) solid nb-theme(scl-timepicker-border-color);
+
+        &:last-child {
+            border-right: none;
+        }
+    }
+
+    &__column-header {
+        width: nb-theme(scl-timepicker-column-header-width);
+        height: nb-theme(scl-timepicker-column-header-height);
+        text-align: center;
+        padding: nb-theme(scl-timepicker-column-header-padding);
+    }
+
+    &__columns {
+        padding: nb-theme(scl-timepicker-columns-padding);
+        overflow-y: scroll;
+        border-top: nb-theme(scl-timepicker-border-width) solid nb-theme(scl-timepicker-border-color);
+
+        &::-webkit-scrollbar {
+            width: nb-theme(scl-timepicker-columns-scrollbar-width);
+        }
+
+        &::-webkit-scrollbar-thumb {
+            color: transparent;
+            background-color: transparent;
+            border-radius: nb-theme(scl-timepicker-columns-scrollbar-border-radius);
+            cursor: pointer;
+        }
+
+        &:hover {
+            &::-webkit-scrollbar-thumb {
+                color: nb-theme(scl-timepicker-columns-scrollbar-color);
+                background-color: nb-theme(scl-timepicker-columns-scrollbar-background-color);
+            }
+        }
+    }
+
+    &__item {
+        width: nb-theme(scl-timepicker-item-width);
+        padding: nb-theme(scl-timepicker-item-padding);
+        text-align: center;
+        cursor: pointer;
+        display: block;
+        background-color: white;
+        border: none;
+
+        &:hover {
+            background-color: nb-theme(scl-timepicker-item-hover-background-color);
+        }
+
+        &.selected {
+            background-color: nb-theme(scl-timepicker-item-selected-background-color);
+            border-radius: nb-theme(scl-timepicker-item-selected-border-radius);
+            position: relative;
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 0.875rem;
+                left: 0.75rem;
+                transform: rotate(-45deg);
+                width: nb-theme(scl-timepicker-check-icon-width);
+                height: nb-theme(scl-timepicker-check-icon-height);
+                border-bottom: nb-theme(scl-timepicker-check-icon-border-width) solid nb-theme(scl-timepicker-check-icon-border-color);
+                border-left: nb-theme(scl-timepicker-check-icon-border-width) solid nb-theme(scl-timepicker-check-icon-border-color);
+            }
+        }
+    }
+
+    &__footer {
+        display: flex;
+        border-top: 1px solid #e5e7eb;
+        padding: nb-theme(scl-timepicker-footer-padding);
+        justify-content: end;
+    }
+}

package/timepicker/timepicker.icon.d.ts

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

package/timepicker/timepicker.model.d.ts

@@ -0,0 +1,13 @@
+export interface TimepickerOption {
+    unit: string;
+    data: TimepickerData[];
+}
+export interface TimepickerData {
+    label: string;
+    isSelected?: boolean;
+}
+export declare enum TIME_FORMAT {
+    DEFAULT_TIME = "HH:mm:ss",
+    TWELVE_HR = "hh:mm A"
+}
+//# sourceMappingURL=timepicker.model.d.ts.map

package/toggle/toggle-config.scss

@@ -0,0 +1,51 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        toggle-height: 1.25rem,
+        toggle-width: 100%,
+        toggle-max-width: 2.25rem,
+
+        toggle-border-width: 0,
+
+        toggle-switcher-size: 1.125rem,
+        toggle-switcher-icon-size: 0,
+
+        toggle-margin: 0.1875rem 0 0 0,
+
+        toggle-basic-text-color: color-basic-900,
+        toggle-text-font-size: 0.875rem,
+        toggle-text-font-weight: 500,
+        toggle-text-line-height: 1.43rem,
+
+        toggle-basic-description-text-color: color-basic-600,
+        toggle-basic-description-text-margin: 0,
+
+        toggle-switcher-backgorund-color: color-base-white,
+        toggle-basic-checked-switcher-background-color: color-base-white,
+
+        toggle-basic-background-color: color-basic-200,
+        toggle-basic-hover-background-color: color-basic-300,
+        toggle-basic-focus-background-color: color-basic-100,
+        toggle-basic-active-background-color: color-basic-200,
+        toggle-basic-disabled-background-color: color-primary-100,
+
+        toggle-basic-checked-background-color: color-primary-500,
+        toggle-basic-checked-hover-background-color: color-primary-600,
+        toggle-basic-checked-focus-background-color: color-primary-500,
+        toggle-basic-checked-active-background-color: color-primary-700,
+
+        toggle-outline-width: 0.125rem,
+        toggle-outline-color: color-primary-100,
+        toggle-focus-shadow: 0 0 0 toggle-outline-width toggle-outline-color,
+
+        toggle-label-width: 26.25rem,
+
+        // Toggle Description
+        scl-toggle-description-font-size: 0.875rem,
+        scl-toggle-description-font-weight: 400,
+        scl-toggle-description-line-height: 1.43,
+    ),
+    default,
+    default
+);

package/toggle/toggle-description/toggle-description.d.ts

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

package/toggle/toggle.d.ts

@@ -0,0 +1,19 @@
+import { EventEmitter } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { NbComponentOrCustomStatus } from '@nebular/theme';
+import * as i0 from "@angular/core";
+export declare class SclToggle implements ControlValueAccessor {
+    status: NbComponentOrCustomStatus;
+    disabled: boolean;
+    checkedChange: EventEmitter<boolean>;
+    checked: boolean;
+    onChange: (val: boolean) => void;
+    onTouch: () => void;
+    onCheckedChange(event: boolean): void;
+    writeValue(value: boolean): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclToggle, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclToggle, "scl-toggle", never, { "status": { "alias": "status"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, ["*"], true, never>;
+}
+//# sourceMappingURL=toggle.d.ts.map

package/toggle/toggle.scss

@@ -0,0 +1,31 @@
+@use '@nebular/theme/styles/theming' as *;
+
+nb-toggle .native-input:enabled:focus + .toggle {
+    box-shadow: nb-theme(toggle-focus-shadow);
+}
+
+.toggle {
+    margin: nb-theme(toggle-margin);
+    align-self: flex-start;
+    max-width: nb-theme(toggle-max-width);
+}
+
+nb-toggle.toggle-label-end .toggle-label {
+    align-items: end;
+    width: nb-theme(toggle-label-width);
+}
+
+.scl-toggle {
+    & nb-toggle.toggle-label-end .native-input:disabled ~ .text {
+        color: nb-theme(toggle-basic-text-color);
+    }
+}
+
+.scl-toggle-description {
+    color: nb-theme(toggle-basic-description-text-color);
+    display: block;
+    width: 100%;
+    font-weight: nb-theme(scl-toggle-description-font-weight);
+    font-size: nb-theme(scl-toggle-description-font-size);
+    line-height: nb-theme(scl-toggle-description-line-height);
+}

package/toggle-password/toggle-password-config.scss

@@ -0,0 +1,12 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        scl-toggle-button-padding: 0,
+        scl-toggle-button-right: 0.813rem,
+        scl-toggle-button-top: 0.625rem,
+        scl-toggle-button-border: 0.063rem solid transparent,
+    ),
+    default,
+    default
+);

package/toggle-password/toggle-password.component.d.ts

@@ -0,0 +1,21 @@
+import { ElementRef, EventEmitter, TemplateRef } from '@angular/core';
+import { NbIconLibraries } from '@nebular/theme';
+import * as i0 from "@angular/core";
+export declare enum TogglePasswordInputType {
+    TEXT = "text",
+    PASSWORD = "password"
+}
+export declare class SclTogglePasswordComponent {
+    private el;
+    private iconLibraries;
+    buttonName: string;
+    get type(): TogglePasswordInputType;
+    set type(inputType: TogglePasswordInputType);
+    template: TemplateRef<HTMLElement>;
+    buttonClicked: EventEmitter<Event>;
+    constructor(el: ElementRef, iconLibraries: NbIconLibraries);
+    onClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclTogglePasswordComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclTogglePasswordComponent, "scl-toggle-password", never, { "template": { "alias": "template"; "required": false; }; }, { "buttonClicked": "buttonClicked"; }, never, never, true, never>;
+}
+//# sourceMappingURL=toggle-password.component.d.ts.map

package/toggle-password/toggle-password.directive.d.ts

@@ -0,0 +1,13 @@
+import { ComponentFactoryResolver, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SclTogglePasswordDirective implements OnInit {
+    private template;
+    private viewContainer;
+    private componentFactoryResolver;
+    private container;
+    constructor(template: TemplateRef<HTMLElement>, viewContainer: ViewContainerRef, componentFactoryResolver: ComponentFactoryResolver);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclTogglePasswordDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SclTogglePasswordDirective, "[sclTogglePassword]", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=toggle-password.directive.d.ts.map

package/toggle-password/toggle-password.icon.d.ts

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

package/toggle-password/toggle-password.scss

@@ -0,0 +1,16 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-toggle-password {
+    position: relative;
+    display: block;
+    flex-grow: 1;
+
+    &__button {
+        position: absolute;
+        top: nb-theme(scl-toggle-button-top);
+        right: nb-theme(scl-toggle-button-right);
+        background-color: transparent;
+        border: nb-theme(scl-toggle-button-border);
+        padding: nb-theme(scl-toggle-button-padding);
+    }
+}

package/treeview/treeview-config.scss

@@ -0,0 +1,86 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        scl-tree-view-font-weight: 500,
+        scl-tree-view-border-radius: 0.375rem,
+        scl-tree-view-background-color: color-basic-50,
+        scl-tree-view-table-padding: 0.25rem 0 0 0,
+
+        scl-tree-view-table-button-color: color-basic-900,
+        scl-tree-view-table-button-width: 0.0625rem,
+        scl-tree-view-table-button-style: solid,
+        scl-tree-view-table-button-focus-border-width: 0.25rem,
+        scl-tree-view-table-button-focus-border-style: solid,
+        scl-tree-view-table-button-focus-border-color: color-basic-200,
+        scl-tree-view-table-button-focus-border-radius: 0.25rem,
+        scl-tree-view-table-button-hover-color: color-basic-100,
+        scl-tree-view-table-button-margin: 0 0.125rem 0 0,
+
+        scl-tree-view-tree-node-text-padding: 0.625rem 0.5rem 0.625rem 0,
+        scl-tree-view-tree-node-font-size: 0.75rem,
+        scl-tree-view-tree-node-letter-spacing: 0.0625rem,
+        scl-tree-view-tree-node-line-height: 1.33,
+        scl-tree-view-tree-node-body-gap: 0.5rem,
+        scl-tree-view-tree-node-table-width: 100%,
+
+        scl-tree-view-child-node-background-color: color-base-white,
+        scl-tree-view-child-tree-node-font-size: 0.875rem,
+        scl-tree-view-child-tree-node-line-height: 1.25rem,
+        scl-tree-view-child-text-padding: 0.375rem 0.625rem,
+        scl-tree-view-child-node-padding: 0 0 0 2rem,
+        scl-tree-view-child-node-body-gap: 0,
+
+        scl-tree-view-readonly-icon-height: 1.25rem,
+        scl-tree-view-readonly-icon-width: 1.25rem,
+        scl-tree-view-readonly-success-icon-color: color-success-500,
+        scl-tree-view-readonly-danger-icon-color: color-danger-600,
+
+        scl-tree-view-child-readonly-icon-gap: 0.5rem,
+        scl-tree-view-child-readonly-label-padding: 0.375rem 0,
+        scl-tree-view-child-readonly-label-font-size: 0.875rem,
+        scl-tree-view-child-readonly-label-line-height: 1.43,
+        scl-tree-view-child-readonly-icon-margin: 0 0 0 -0.5rem,
+
+        scl-tree-view-grand-child-margin: 0 0 0 2.5rem,
+        scl-tree-view-grand-child-padding: 0 0 0 1.08rem,
+        scl-tree-view-grand-child-border-left-width: 0.0625rem,
+        scl-tree-view-grand-child-border-left-style: solid,
+        scl-tree-view-grand-child-border-left-color: color-basic-300,
+
+        scl-filter-inputbox-padding: 0.625rem 2.625rem,
+
+        scl-image-card-content-width: 22.5rem,
+        scl-image-card-content-padding: 25px 0 25px 0,
+        scl-image-card-content-gap: 0.75rem,
+        scl-image-card-content-min-height: 100%,
+
+        scl-image-card-image-gap: 0.75rem,
+
+        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,
+
+        image-info-font-size: scl-text-label-large-font-size,
+        image-info-line-height: scl-text-label-large-line-height,
+        image-info-color: color-basic-600,
+        image-info-text-align: center,
+        image-info-margin: 0,
+        image-info-gap: 0.75rem,
+
+        scl-tree-view-child-border-bottom-width: 0.063rem,
+        scl-tree-view-child-border-bottom-color: color-basic-300,
+        scl-tree-view-child-text-color: color-basic-600,
+
+        scl-tree-view-parent-margin-bottom: 0.25rem,
+        scl-tree-view-parent-label-text-color: color-basic-900,
+        scl-tree-view-table-body-margin-left: 1.75rem,
+        scl-tree-view-table-body-readonly-icon-margin-left: 1.25rem,
+        scl-tree-view-table-body-grid-template-column: 1fr 1fr,
+        scl-tree-view-table-body-gap: 2.75rem,
+    ),
+    default,
+    default
+);