@gestio/gds 0.0.1

package/fesm2015/gestio-gds.js

@@ -0,0 +1,704 @@
+import { __decorate } from 'tslib';
+import { Input, Component, NgModule, EventEmitter, Output, ChangeDetectionStrategy, forwardRef, ElementRef, ChangeDetectorRef, HostListener } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+let GdsButtonComponent = class GdsButtonComponent {
+    constructor() {
+        this.variant = 'primary';
+    }
+    ngOnInit() { }
+};
+__decorate([
+    Input()
+], GdsButtonComponent.prototype, "variant", void 0);
+GdsButtonComponent = __decorate([
+    Component({
+        selector: 'gds-button',
+        template: "<button class=\"gds-button\" [ngClass]=\"variant\">\n  <ng-content></ng-content>\n</button>\n",
+        styles: ["", ".gds-button{padding:10px 16px;border-radius:8px;border:none;font-family:var(--gds-font-primary,Inter);font-weight:600;cursor:pointer}.gds-button.primary{background:var(--gds-primary);color:#fff}.gds-button.secondary{background:var(--gds-secondary);color:#fff}.gds-button.tertiary{background:var(--gds-tertiary);color:#fff}"]
+    })
+], GdsButtonComponent);
+
+let GdsButtonModule = class GdsButtonModule {
+};
+GdsButtonModule = __decorate([
+    NgModule({
+        declarations: [GdsButtonComponent],
+        imports: [CommonModule],
+        exports: [GdsButtonComponent],
+    })
+], GdsButtonModule);
+
+let GdsInputComponent = class GdsInputComponent {
+    constructor() {
+        this.id = '';
+        this.placeholder = '';
+        this.type = 'text';
+        this.size = 'md';
+        this.disabled = false;
+        this.invalid = false;
+        this.value = '';
+        this.input = new EventEmitter();
+        this.focus = new EventEmitter();
+        this.blur = new EventEmitter();
+        this.isFocused = false;
+    }
+    onInput(event) {
+        this.input.emit(event);
+    }
+    onFocus() {
+        this.isFocused = true;
+        this.focus.emit();
+    }
+    onBlur() {
+        this.isFocused = false;
+        this.blur.emit();
+    }
+};
+__decorate([
+    Input()
+], GdsInputComponent.prototype, "id", void 0);
+__decorate([
+    Input()
+], GdsInputComponent.prototype, "placeholder", void 0);
+__decorate([
+    Input()
+], GdsInputComponent.prototype, "type", void 0);
+__decorate([
+    Input()
+], GdsInputComponent.prototype, "size", void 0);
+__decorate([
+    Input()
+], GdsInputComponent.prototype, "disabled", void 0);
+__decorate([
+    Input()
+], GdsInputComponent.prototype, "invalid", void 0);
+__decorate([
+    Input()
+], GdsInputComponent.prototype, "value", void 0);
+__decorate([
+    Output()
+], GdsInputComponent.prototype, "input", void 0);
+__decorate([
+    Output()
+], GdsInputComponent.prototype, "focus", void 0);
+__decorate([
+    Output()
+], GdsInputComponent.prototype, "blur", void 0);
+GdsInputComponent = __decorate([
+    Component({
+        selector: 'gds-input',
+        template: "<div\n  class=\"gds-input-container\"\n  [class.gds-input--invalid]=\"invalid\"\n  [class.gds-input--disabled]=\"disabled\"\n  [class.gds-input--focused]=\"isFocused\"\n  [class.gds-input--sm]=\"size === 'sm'\"\n  [class.gds-input--md]=\"size === 'md'\"\n  [class.gds-input--lg]=\"size === 'lg'\"\n>\n  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [value]=\"value\"\n    class=\"gds-input\"\n    [attr.aria-invalid]=\"invalid\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  />\n</div>\n",
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        styles: [".gds-input-container{display:flex;flex-direction:column;width:100%}.gds-input-container.gds-input--invalid .gds-input{border-color:var(--danger)}.gds-input-container.gds-input--invalid .gds-input:focus{border-color:var(--danger);box-shadow:0 0 0 3px rgba(216,44,13,.1)}.gds-input-container.gds-input--disabled .gds-input{opacity:.6;cursor:not-allowed;background-color:var(--bg-disabled)}.gds-input-container.gds-input--focused .gds-input{border-color:var(--primary);box-shadow:0 0 0 3px rgba(28,103,244,.1)}.gds-input-container.gds-input--focused.gds-input--invalid .gds-input{border-color:var(--danger);box-shadow:0 0 0 3px rgba(216,44,13,.1)}.gds-input-container.gds-input--sm .gds-input{height:32px;padding:0 12px;font-size:14px}.gds-input-container.gds-input--md .gds-input{height:40px;padding:0 12px;font-size:14px}.gds-input-container.gds-input--lg .gds-input{height:48px;padding:0 12px;font-size:14px}.gds-input{width:100%;border:1px solid var(--gds-neutral-300);border-radius:6px;height:40px;padding:0 12px;font-size:14px;line-height:1;color:var(--text-foreground);background-color:var(--bg-surface);transition:.2s;box-sizing:border-box;font-family:inherit}.gds-input::-moz-placeholder{color:var(--text-foreground);opacity:.5}.gds-input::placeholder{color:var(--text-foreground);opacity:.5}.gds-input:hover:not(:disabled){border-color:var(--gds-neutral-400)}.gds-input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(28,103,244,.1)}.gds-input:disabled{opacity:.6;cursor:not-allowed;background-color:var(--bg-disabled)}"]
+    })
+], GdsInputComponent);
+
+let GdsInputModule = class GdsInputModule {
+};
+GdsInputModule = __decorate([
+    NgModule({
+        declarations: [GdsInputComponent],
+        imports: [CommonModule],
+        exports: [GdsInputComponent],
+    })
+], GdsInputModule);
+
+let GdsLabelComponent = class GdsLabelComponent {
+    constructor() {
+        this.required = false;
+        this.error = false;
+        this.disabled = false;
+        this.size = 'md';
+    }
+    ngOnInit() { }
+};
+__decorate([
+    Input()
+], GdsLabelComponent.prototype, "for", void 0);
+__decorate([
+    Input()
+], GdsLabelComponent.prototype, "required", void 0);
+__decorate([
+    Input()
+], GdsLabelComponent.prototype, "error", void 0);
+__decorate([
+    Input()
+], GdsLabelComponent.prototype, "disabled", void 0);
+__decorate([
+    Input()
+], GdsLabelComponent.prototype, "size", void 0);
+GdsLabelComponent = __decorate([
+    Component({
+        selector: 'gds-label',
+        template: "<label\n  class=\"gds-label\"\n  [class.gds-label--disabled]=\"disabled\"\n  [class.gds-label--sm]=\"size === 'sm'\"\n  [class.gds-label--md]=\"size === 'md'\"\n  [class.gds-label--lg]=\"size === 'lg'\"\n  [class.gds-label--error]=\"error || required\"\n  [attr.for]=\"for\"\n>\n  <ng-content></ng-content>\n\n  <span *ngIf=\"required\" class=\"gds-label__required\">*</span>\n</label>\n",
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        styles: [".gds-label{display:inline-flex;align-items:center;gap:4px;font-weight:var(--font-weight-medium);font-size:.875rem;line-height:calc(1.25 / .875);color:var(--gds-neutral-400);cursor:pointer}.gds-label__required{color:var(--gds-red-500);font-size:.875em}.gds-label--error{color:var(--gds-red-500)}.gds-label--disabled{opacity:.6;cursor:not-allowed}.gds-label--sm{font-size:.75rem;line-height:calc(1.25 / .75)}.gds-label--md{font-size:.875rem;line-height:calc(1.25 / .875)}.gds-label--lg{font-size:1rem;line-height:1.25}"]
+    })
+], GdsLabelComponent);
+
+let GdsLabelModule = class GdsLabelModule {
+};
+GdsLabelModule = __decorate([
+    NgModule({
+        declarations: [GdsLabelComponent],
+        imports: [CommonModule],
+        exports: [GdsLabelComponent],
+    })
+], GdsLabelModule);
+
+var GdsTextboxComponent_1;
+let GdsTextboxComponent = GdsTextboxComponent_1 = class GdsTextboxComponent {
+    constructor() {
+        this.label = '';
+        this.placeholder = '';
+        this.required = false;
+        this.disabled = false;
+        this.error = false;
+        this.errorMessage = '';
+        this.helperText = '';
+        this.type = 'text';
+        this.id = `gds-textbox-${Math.random().toString(36).substr(2, 9)}`;
+        this.size = 'md';
+        this.value = '';
+        this.isFocused = false;
+        this.onChange = (value) => { };
+        this.onTouched = () => { };
+    }
+    onInput(event) {
+        const target = event.target;
+        this.value = target.value;
+        this.onChange(this.value);
+    }
+    onFocus() {
+        this.isFocused = true;
+    }
+    onBlur() {
+        this.isFocused = false;
+        this.onTouched();
+    }
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        this.value = value || '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+};
+__decorate([
+    Input()
+], GdsTextboxComponent.prototype, "label", void 0);
+__decorate([
+    Input()
+], GdsTextboxComponent.prototype, "placeholder", void 0);
+__decorate([
+    Input()
+], GdsTextboxComponent.prototype, "required", void 0);
+__decorate([
+    Input()
+], GdsTextboxComponent.prototype, "disabled", void 0);
+__decorate([
+    Input()
+], GdsTextboxComponent.prototype, "error", void 0);
+__decorate([
+    Input()
+], GdsTextboxComponent.prototype, "errorMessage", void 0);
+__decorate([
+    Input()
+], GdsTextboxComponent.prototype, "helperText", void 0);
+__decorate([
+    Input()
+], GdsTextboxComponent.prototype, "type", void 0);
+__decorate([
+    Input()
+], GdsTextboxComponent.prototype, "id", void 0);
+__decorate([
+    Input()
+], GdsTextboxComponent.prototype, "size", void 0);
+GdsTextboxComponent = GdsTextboxComponent_1 = __decorate([
+    Component({
+        selector: 'gds-textbox',
+        template: "<div class=\"gds-textbox\">\n  <!-- Label -->\n  <gds-label\n    [for]=\"id\"\n    [size]=\"size\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [error]=\"error\"\n    *ngIf=\"label\"\n  >\n    {{ label }}\n  </gds-label>\n\n  <!-- Input Field -->\n  <gds-input\n    [id]=\"id\"\n    [type]=\"type\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [invalid]=\"error\"\n    [size]=\"size\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  ></gds-input>\n\n  <div\n    *ngIf=\"helperText || errorMessage\"\n    [id]=\"id + '-description'\"\n    class=\"gds-textbox__description\"\n    [class.gds-textbox__description--error]=\"error && errorMessage\"\n  >\n    {{ error && errorMessage ? errorMessage : helperText }}\n  </div>\n</div>\n",
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => GdsTextboxComponent_1),
+                multi: true,
+            },
+        ],
+        styles: [".gds-textbox{display:flex;flex-direction:column;width:100%;gap:4px}.gds-textbox__description{font-size:.75rem;color:var(--gds-neutral-400)}.gds-textbox__description--error{color:var(--gds-red-500)}.gds-textbox__error-icon{margin-right:4px;color:var(--gds-red-500)}"]
+    })
+], GdsTextboxComponent);
+
+let GdsTextboxModule = class GdsTextboxModule {
+};
+GdsTextboxModule = __decorate([
+    NgModule({
+        declarations: [GdsTextboxComponent],
+        imports: [CommonModule, GdsLabelModule, GdsInputModule],
+        exports: [GdsTextboxComponent],
+    })
+], GdsTextboxModule);
+
+var GdsSelectboxComponent_1;
+let GdsSelectboxComponent = GdsSelectboxComponent_1 = class GdsSelectboxComponent {
+    constructor(elementRef, cdr) {
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.label = '';
+        this.placeholder = 'Selecione...';
+        this.required = false;
+        this.disabled = false;
+        this.error = false;
+        this.errorMessage = '';
+        this.helperText = '';
+        this.id = `gds-selectbox-${Math.random().toString(36).substr(2, 9)}`;
+        this.size = 'md';
+        this.options = [];
+        this.searchTerm = '';
+        this.selectedValue = null;
+        this.isOpen = false;
+        this.isFocused = false;
+        this.filteredOptions = [];
+        this.onChange = (value) => { };
+        this.onTouched = () => { };
+    }
+    ngOnInit() {
+        this.filteredOptions = [...this.options];
+    }
+    onSearchInput(event) {
+        const target = event.target;
+        this.searchTerm = target.value;
+        this.filterOptions();
+    }
+    filterOptions() {
+        if (!this.searchTerm) {
+            this.filteredOptions = [...this.options];
+        }
+        else {
+            const term = this.searchTerm.toLowerCase();
+            this.filteredOptions = this.options.filter((option) => option.display.toLowerCase().includes(term));
+        }
+        this.cdr.markForCheck();
+    }
+    toggleDropdown() {
+        if (!this.disabled) {
+            this.isOpen = !this.isOpen;
+            if (this.isOpen) {
+                this.filterOptions();
+            }
+            this.cdr.markForCheck();
+        }
+    }
+    clearSelection() {
+        this.selectedValue = null;
+        this.searchTerm = '';
+        this.isOpen = false;
+        this.onChange(null);
+        this.cdr.markForCheck();
+    }
+    selectOption(option) {
+        this.selectedValue = option.value;
+        this.searchTerm = option.display;
+        this.isOpen = false;
+        this.onChange(this.selectedValue);
+        this.cdr.markForCheck();
+    }
+    onFocus() {
+        this.isFocused = true;
+        this.isOpen = true;
+        this.cdr.markForCheck();
+    }
+    onBlur() {
+        setTimeout(() => {
+            this.isFocused = false;
+            this.isOpen = false;
+            this.onTouched();
+            // Restaura o display da opção selecionada se o searchTerm não corresponder
+            if (this.selectedValue !== null) {
+                const selected = this.options.find((opt) => opt.value === this.selectedValue);
+                if (selected) {
+                    this.searchTerm = selected.display;
+                }
+            }
+            else {
+                this.searchTerm = '';
+            }
+            this.cdr.markForCheck();
+        }, 200);
+    }
+    onClickOutside(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.isOpen = false;
+            this.cdr.markForCheck();
+        }
+    }
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        this.selectedValue = value;
+        if (value !== null && value !== undefined) {
+            const selected = this.options.find((opt) => opt.value === value);
+            if (selected) {
+                this.searchTerm = selected.display;
+            }
+        }
+        else {
+            this.searchTerm = '';
+        }
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+};
+GdsSelectboxComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
+];
+__decorate([
+    Input()
+], GdsSelectboxComponent.prototype, "label", void 0);
+__decorate([
+    Input()
+], GdsSelectboxComponent.prototype, "placeholder", void 0);
+__decorate([
+    Input()
+], GdsSelectboxComponent.prototype, "required", void 0);
+__decorate([
+    Input()
+], GdsSelectboxComponent.prototype, "disabled", void 0);
+__decorate([
+    Input()
+], GdsSelectboxComponent.prototype, "error", void 0);
+__decorate([
+    Input()
+], GdsSelectboxComponent.prototype, "errorMessage", void 0);
+__decorate([
+    Input()
+], GdsSelectboxComponent.prototype, "helperText", void 0);
+__decorate([
+    Input()
+], GdsSelectboxComponent.prototype, "id", void 0);
+__decorate([
+    Input()
+], GdsSelectboxComponent.prototype, "size", void 0);
+__decorate([
+    Input()
+], GdsSelectboxComponent.prototype, "options", void 0);
+__decorate([
+    HostListener('document:click', ['$event'])
+], GdsSelectboxComponent.prototype, "onClickOutside", null);
+GdsSelectboxComponent = GdsSelectboxComponent_1 = __decorate([
+    Component({
+        selector: 'gds-selectbox',
+        template: "<div class=\"gds-selectbox\">\n  <!-- Label -->\n  <gds-label\n    [for]=\"id\"\n    [size]=\"size\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [error]=\"error\"\n    *ngIf=\"label\"\n  >\n    {{ label }}\n  </gds-label>\n\n  <!-- Select Input -->\n  <div\n    class=\"gds-selectbox__control\"\n    [class.gds-selectbox__control--open]=\"isOpen\"\n    [class.gds-selectbox__control--error]=\"error\"\n    [class.gds-selectbox__control--disabled]=\"disabled\"\n    [class.gds-selectbox__control--sm]=\"size === 'sm'\"\n    [class.gds-selectbox__control--md]=\"size === 'md'\"\n    [class.gds-selectbox__control--lg]=\"size === 'lg'\"\n  >\n    <input\n      [id]=\"id\"\n      type=\"text\"\n      class=\"gds-selectbox__input\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [value]=\"searchTerm\"\n      (input)=\"onSearchInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      autocomplete=\"off\"\n    />\n    <button\n      type=\"button\"\n      class=\"gds-selectbox__clear\"\n      *ngIf=\"selectedValue !== null && !disabled\"\n      (click)=\"clearSelection()\"\n      tabindex=\"-1\"\n      title=\"Limpar sele\u00E7\u00E3o\"\n    >\n      <svg\n        class=\"gds-selectbox__clear-icon\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n        <path\n          d=\"M10.5 5.5L5.5 10.5M5.5 5.5L10.5 10.5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </button>\n    <button\n      type=\"button\"\n      class=\"gds-selectbox__toggle\"\n      [disabled]=\"disabled\"\n      (click)=\"toggleDropdown()\"\n      tabindex=\"-1\"\n    >\n      <svg\n        class=\"gds-selectbox__icon\"\n        [class.gds-selectbox__icon--open]=\"isOpen\"\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M5 7.5L10 12.5L15 7.5\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Dropdown -->\n  <div class=\"gds-selectbox__dropdown\" *ngIf=\"isOpen\">\n    <div class=\"gds-selectbox__options\">\n      <div\n        *ngFor=\"let option of filteredOptions\"\n        class=\"gds-selectbox__option\"\n        [class.gds-selectbox__option--selected]=\"option.value === selectedValue\"\n        (click)=\"selectOption(option)\"\n      >\n        {{ option.display }}\n      </div>\n      <div\n        *ngIf=\"filteredOptions.length === 0\"\n        class=\"gds-selectbox__option gds-selectbox__option--empty\"\n      >\n        Nenhum resultado encontrado\n      </div>\n    </div>\n  </div>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"helperText || errorMessage\"\n    [id]=\"id + '-description'\"\n    class=\"gds-selectbox__description\"\n    [class.gds-selectbox__description--error]=\"error && errorMessage\"\n  >\n    {{ error && errorMessage ? errorMessage : helperText }}\n  </div>\n</div>\n",
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => GdsSelectboxComponent_1),
+                multi: true,
+            },
+        ],
+        styles: [".gds-selectbox{position:relative;width:100%;display:flex;flex-direction:column;gap:4px}.gds-selectbox__control{position:relative;display:flex;align-items:center;background-color:var(--bg-surface);border:1px solid var(--gds-neutral-300);border-radius:6px;transition:.2s}.gds-selectbox__control:hover:not(.gds-selectbox__control--disabled){border-color:var(--gds-neutral-400)}.gds-selectbox__control--open,.gds-selectbox__control:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(28,103,244,.1)}.gds-selectbox__control--error{border-color:var(--danger)}.gds-selectbox__control--error:focus-within{box-shadow:0 0 0 3px rgba(216,44,13,.1)}.gds-selectbox__control--disabled{background-color:var(--bg-disabled);cursor:not-allowed;opacity:.6}.gds-selectbox__control--sm{height:32px}.gds-selectbox__control--md{height:40px}.gds-selectbox__control--lg{height:48px}.gds-selectbox__input{flex:1;border:none;outline:0;background:0 0;padding:0 12px;font-size:14px;color:var(--text-foreground);font-family:inherit}.gds-selectbox__input::-moz-placeholder{color:var(--text-foreground)}.gds-selectbox__input::placeholder{color:var(--text-foreground)}.gds-selectbox__input:disabled{cursor:not-allowed}.gds-selectbox__clear{display:flex;align-items:center;justify-content:center;padding:0 4px;border:none;background:0 0;cursor:pointer;color:var(--text-foreground);opacity:.7;transition:color .2s}.gds-selectbox__clear:hover{opacity:1}.gds-selectbox__clear-icon{width:16px;height:16px}.gds-selectbox__toggle{display:flex;align-items:center;justify-content:center;padding:0 8px;border:none;background:0 0;cursor:pointer;color:var(--text-foreground);transition:color .2s}.gds-selectbox__toggle:hover:not(:disabled){color:var(--text-foreground)}.gds-selectbox__toggle:disabled{cursor:not-allowed}.gds-selectbox__icon{transition:transform .2s}.gds-selectbox__icon--open{transform:rotate(180deg)}.gds-selectbox__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background-color:var(--bg-surface);border:1px solid var(--gds-neutral-300);border-radius:6px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);max-height:300px;overflow:hidden}.gds-selectbox__options{max-height:300px;overflow-y:auto}.gds-selectbox__option{padding:10px 12px;cursor:pointer;font-size:14px;color:var(--text-foreground);transition:background-color .15s}.gds-selectbox__option:hover{background-color:var(--bg-muted)}.gds-selectbox__option--selected{background-color:var(--gds-brand-100);color:var(--primary);font-weight:500}.gds-selectbox__option--selected:hover{background-color:var(--gds-brand-200)}.gds-selectbox__option--empty{color:var(--text-muted);cursor:default;font-style:italic}.gds-selectbox__option--empty:hover{background-color:transparent}.gds-selectbox__description{margin-top:6px;font-size:12px;color:var(--text-muted)}.gds-selectbox__description--error{color:var(--danger)}"]
+    })
+], GdsSelectboxComponent);
+
+let GdsSelectboxModule = class GdsSelectboxModule {
+};
+GdsSelectboxModule = __decorate([
+    NgModule({
+        declarations: [GdsSelectboxComponent],
+        imports: [CommonModule, GdsLabelModule],
+        exports: [GdsSelectboxComponent],
+    })
+], GdsSelectboxModule);
+
+let GdsComponent = class GdsComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+};
+GdsComponent = __decorate([
+    Component({
+        selector: 'lib-gds',
+        template: `
+    <p>
+      gds works!
+    </p>
+  `
+    })
+], GdsComponent);
+
+let GdsModule = class GdsModule {
+};
+GdsModule = __decorate([
+    NgModule({
+        declarations: [GdsComponent],
+        imports: [
+            CommonModule,
+            GdsButtonModule,
+            GdsInputModule,
+            GdsLabelModule,
+            GdsTextboxModule,
+            GdsSelectboxModule,
+        ],
+        exports: [GdsComponent],
+    })
+], GdsModule);
+
+// BASE COLORS
+const BASE_COLORS = ['gestio-dark', 'gestio-light'];
+// PRIMARY COLORS
+const PRIMARY_COLORS = [
+    'primary',
+    'gestio-primary',
+    'gestio-primary-hover',
+];
+// SECONDARY COLORS
+const SECONDARY_COLORS = ['gestio-secondary'];
+// TERTIARY COLORS
+const TERTIARY_COLORS = ['gestio-tertiary'];
+// BRAND COLORS
+const BRAND_COLORS = [
+    'gestio-brand-25',
+    'gestio-brand-50',
+    'gestio-brand-100',
+    'gestio-brand-200',
+    'gestio-brand-300',
+    'gestio-brand-400',
+    'gestio-brand-500',
+    'gestio-brand-600',
+    'gestio-brand-700',
+    'gestio-brand-800',
+    'gestio-brand-900',
+];
+// NEUTRAL COLORS
+const NEUTRAL_COLORS = [
+    'gestio-neutral-25',
+    'gestio-neutral-50',
+    'gestio-neutral-100',
+    'gestio-neutral-200',
+    'gestio-neutral-300',
+    'gestio-neutral-400',
+    'gestio-neutral-500',
+    'gestio-neutral-600',
+    'gestio-neutral-700',
+    'gestio-neutral-800',
+    'gestio-neutral-900',
+    'gestio-neutral-1000',
+];
+// GREEN COLORS
+const GREEN_COLORS = [
+    'gestio-green-25',
+    'gestio-green-50',
+    'gestio-green-100',
+    'gestio-green-200',
+    'gestio-green-300',
+    'gestio-green-400',
+    'gestio-green-500',
+    'gestio-green-600',
+    'gestio-green-700',
+    'gestio-green-800',
+    'gestio-green-900',
+];
+// RED COLORS
+const RED_COLORS = [
+    'gestio-red-25',
+    'gestio-red-50',
+    'gestio-red-100',
+    'gestio-red-200',
+    'gestio-red-300',
+    'gestio-red-400',
+    'gestio-red-500',
+    'gestio-red-600',
+    'gestio-red-700',
+    'gestio-red-800',
+    'gestio-red-900',
+];
+// BLUE COLORS
+const BLUE_COLORS = [
+    'gestio-blue-25',
+    'gestio-blue-50',
+    'gestio-blue-100',
+    'gestio-blue-200',
+    'gestio-blue-300',
+    'gestio-blue-400',
+    'gestio-blue-500',
+    'gestio-blue-600',
+    'gestio-blue-700',
+    'gestio-blue-800',
+    'gestio-blue-900',
+];
+// AMBER COLORS
+const AMBER_COLORS = [
+    'gestio-amber-25',
+    'gestio-amber-50',
+    'gestio-amber-100',
+    'gestio-amber-200',
+    'gestio-amber-300',
+    'gestio-amber-400',
+    'gestio-amber-500',
+    'gestio-amber-600',
+    'gestio-amber-700',
+    'gestio-amber-800',
+    'gestio-amber-900',
+];
+// TEAL COLORS
+const TEAL_COLORS = [
+    'gestio-teal-25',
+    'gestio-teal-50',
+    'gestio-teal-100',
+    'gestio-teal-200',
+    'gestio-teal-300',
+    'gestio-teal-400',
+    'gestio-teal-500',
+    'gestio-teal-600',
+    'gestio-teal-700',
+    'gestio-teal-800',
+    'gestio-teal-900',
+];
+// PURPLE COLORS
+const PURPLE_COLORS = [
+    'gestio-purple-25',
+    'gestio-purple-50',
+    'gestio-purple-100',
+    'gestio-purple-200',
+    'gestio-purple-300',
+    'gestio-purple-400',
+    'gestio-purple-500',
+    'gestio-purple-600',
+    'gestio-purple-700',
+    'gestio-purple-800',
+    'gestio-purple-900',
+];
+// EMERALD COLORS
+const EMERALD_COLORS = [
+    'gestio-emerald-25',
+    'gestio-emerald-50',
+    'gestio-emerald-100',
+    'gestio-emerald-200',
+    'gestio-emerald-300',
+    'gestio-emerald-400',
+    'gestio-emerald-500',
+    'gestio-emerald-600',
+    'gestio-emerald-700',
+    'gestio-emerald-800',
+    'gestio-emerald-900',
+];
+// MAGENTA COLORS
+const MAGENTA_COLORS = [
+    'gestio-magenta-25',
+    'gestio-magenta-50',
+    'gestio-magenta-100',
+    'gestio-magenta-200',
+    'gestio-magenta-300',
+    'gestio-magenta-400',
+    'gestio-magenta-500',
+    'gestio-magenta-600',
+    'gestio-magenta-700',
+    'gestio-magenta-800',
+    'gestio-magenta-900',
+];
+// YELLOW COLORS
+const YELLOW_COLORS = [
+    'gestio-yellow-25',
+    'gestio-yellow-50',
+    'gestio-yellow-100',
+    'gestio-yellow-200',
+    'gestio-yellow-300',
+    'gestio-yellow-400',
+    'gestio-yellow-500',
+    'gestio-yellow-600',
+    'gestio-yellow-700',
+    'gestio-yellow-800',
+    'gestio-yellow-900',
+];
+// LIME COLORS
+const LIME_COLORS = [
+    'gestio-lime-25',
+    'gestio-lime-50',
+    'gestio-lime-100',
+    'gestio-lime-200',
+    'gestio-lime-300',
+    'gestio-lime-400',
+    'gestio-lime-500',
+    'gestio-lime-600',
+    'gestio-lime-700',
+    'gestio-lime-800',
+    'gestio-lime-900',
+];
+// ALL COLORS
+const ALL_COLORS = [
+    ...BASE_COLORS,
+    ...PRIMARY_COLORS,
+    ...SECONDARY_COLORS,
+    ...TERTIARY_COLORS,
+    ...BRAND_COLORS,
+    ...NEUTRAL_COLORS,
+    ...GREEN_COLORS,
+    ...RED_COLORS,
+    ...BLUE_COLORS,
+    ...AMBER_COLORS,
+    ...TEAL_COLORS,
+    ...PURPLE_COLORS,
+    ...EMERALD_COLORS,
+    ...MAGENTA_COLORS,
+    ...YELLOW_COLORS,
+    ...LIME_COLORS,
+];
+
+const TYPOGRAPHY_TOKENS = [
+    'gds-heading-3xl',
+    'gds-heading-2xl',
+    'gds-heading-xl',
+    'gds-heading-lg',
+    'gds-heading-md',
+    'gds-heading-sm',
+    'gds-heading-xs',
+    'gds-subheading',
+];
+const TYPOGRAPHY_DESCRIPTIONS = {
+    'gds-heading-3xl': 'Largest heading for hero sections and major page titles',
+    'gds-heading-2xl': 'Secondary large heading for section dividers',
+    'gds-heading-xl': 'Large heading for important content blocks',
+    'gds-heading-lg': 'Medium heading for subsections',
+    'gds-heading-md': 'Standard heading for content areas',
+    'gds-heading-sm': 'Small heading for cards and components',
+    'gds-heading-xs': 'Smallest heading for micro components',
+    'gds-subheading': 'Supporting text for headings and descriptions',
+};
+const TYPOGRAPHY_EXAMPLES = {
+    'gds-heading-3xl': 'Design System',
+    'gds-heading-2xl': 'Foundation',
+    'gds-heading-xl': 'Typography',
+    'gds-heading-lg': 'Heading Large',
+    'gds-heading-md': 'Heading Medium',
+    'gds-heading-sm': 'Heading Small',
+    'gds-heading-xs': 'Heading XS',
+    'gds-subheading': 'Supporting text that provides additional context and helps establish hierarchy',
+};
+
+// Components / Modules
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ALL_COLORS, AMBER_COLORS, BASE_COLORS, BLUE_COLORS, BRAND_COLORS, EMERALD_COLORS, GREEN_COLORS, GdsButtonComponent, GdsButtonModule, GdsComponent, GdsInputComponent, GdsInputModule, GdsLabelComponent, GdsLabelModule, GdsModule, GdsSelectboxComponent, GdsSelectboxModule, GdsTextboxComponent, GdsTextboxModule, LIME_COLORS, MAGENTA_COLORS, NEUTRAL_COLORS, PRIMARY_COLORS, PURPLE_COLORS, RED_COLORS, SECONDARY_COLORS, TEAL_COLORS, TERTIARY_COLORS, TYPOGRAPHY_DESCRIPTIONS, TYPOGRAPHY_EXAMPLES, TYPOGRAPHY_TOKENS, YELLOW_COLORS };
+//# sourceMappingURL=gestio-gds.js.map