@nanahoshi/mona-ui 0.1.0 → 0.2.0

package/fesm2022/nanahoshi-mona-ui-dropdown-list.mjs

@@ -2,13 +2,11 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Directive, inject, DestroyRef, ElementRef, linkedSignal, computed, contentChild, TemplateRef, viewChild, input, output, model, effect, untracked, afterNextRender, forwardRef, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { createElementControlId, isTypeaheadKey, setupTypeahead } from '@nanahoshi/mona-ui/internal';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownListService, DropdownService, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, dropdownPopupThemeVariants, DropdownNoDataTemplateDirective, DropdownPrefixTemplateDirective, DropdownLiveRegionDirective, DropdownDataInputToken, DropdownPopupInputToken, DropdownDataHandlerDirective, DropdownListPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
+import { themeControlSurfaceClasses, createElementControlId, isTypeaheadKey, setupTypeahead } from '@nanahoshi/mona-ui/internal';
 import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
 import { ListService, ListComponent, ListItemTemplateDirective, ListGroupHeaderTemplateDirective, ListFooterTemplateDirective, ListHeaderTemplateDirective, ListNoDataTemplateDirective } from '@nanahoshi/mona-ui/internal/list';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { Subject } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -24,32 +22,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const dropdownListInputVariants = cva(`
-        inline-flex items-center
-
-        border border-input-border
-        bg-background outline-none
-        shadow-xs
-        cursor-pointer select-none
-
-        hover:bg-accent hover:text-accent-foreground
-        transition-[color,box-shadow,border] ease-in-out duration-300
-        focus-within:ring-1 focus-within:ring-primary/40
+const dropdownListInputThemeVariants = cva(`
+        inline-flex items-center
+        cursor-pointer select-none
+        ${themeControlSurfaceClasses} text-foreground
+        border border-input-border shadow-(--shadow-control) outline-none
+        transition-[color,box-shadow,border] duration-(--mona-motion-standard) ease-in-out
+        data-[readonly='true']:cursor-default
+        hover:bg-hover active:bg-active
+        focus-within:border-focus-indicator focus-within:ring-2 focus-within:ring-focus-indicator/35
     `, {
     variants: {
         disabled: {
-            true: "pointer-events-none cursor-not-allowed opacity-50",
+            true: `
+                    pointer-events-none cursor-not-allowed
+                    bg-disabled-background text-disabled-foreground
+                    border-disabled-border shadow-none
+                `,
             false: ""
         },
         expanded: {
-            true: "ring-1 ring-primary/40",
+            true: "border-focus-indicator ring-2 ring-focus-indicator/35",
             false: ""
         },
         hasPrefix: {
             false: "ps-2"
         },
         invalid: {
-            true: "border-error ring-1 ring-error/40",
+            true: "border-error ring-2 ring-error/35 focus-within:border-error focus-within:ring-error/35",
             false: ""
         },
         rounded: {
@@ -64,41 +64,23 @@ const dropdownListInputVariants = cva(`
             medium: "h-9 text-sm",
             small: "h-8 text-xs"
         }
-    }
+    },
+    compoundVariants: [
+        {
+            expanded: true,
+            invalid: true,
+            class: "border-error ring-error/35"
+        }
+    ]
 });
-const dropdownListValueContainerVariants = cva(`overflow-hidden h-full w-full flex items-center`, {
+const dropdownListValueContainerThemeVariants = cva(`flex h-full w-full items-center overflow-hidden`, {
     variants: {
         hasTemplate: {
             false: "[&>span]:truncate [&>span]:items-center [&>span]:inline-block"
         }
     }
 });
-const dropdownListAffixContainerVariants = cva(`h-full flex flex-none items-center justify-center`);
-
-const dropdownListAffixContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dropdownListAffixContainerVariants;
-        default:
-            return dropdownListAffixContainerVariants;
-    }
-};
-const dropdownListInputThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dropdownListInputVariants;
-        default:
-            return dropdownListInputVariants;
-    }
-};
-const dropdownListValueContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dropdownListValueContainerVariants;
-        default:
-            return dropdownListValueContainerVariants;
-    }
-};
+const dropdownListAffixContainerThemeVariants = cva(`flex h-full flex-none items-center justify-center`);
 
 class DropdownListComponent {
     #destroyRef;
@@ -107,7 +89,6 @@ class DropdownListComponent {
     #hostElementRef;
     #navigatedValue;
     #listService;
-    #themeService;
     #typeaheadKey;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
@@ -117,7 +98,6 @@ class DropdownListComponent {
         this.#navigatedValue = linkedSignal(() => this.value(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#navigatedValue" }] : /* istanbul ignore next */ []));
         this.#listService = inject(ListService);
-        this.#themeService = inject(ThemeService);
         this.#typeaheadKey = new Subject();
         this.activeDescendant = computed(() => {
             const highlightedItem = this.#listService.highlightedItem();
@@ -125,19 +105,17 @@ class DropdownListComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
         this.affixClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dropdownListAffixContainerThemeVariants(theme)();
+            return dropdownListAffixContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "affixClass" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const disabled = this.disabled();
             const expanded = this.expanded();
             const hasPrefix = this.prefixTemplate() != null;
             const invalid = this.invalidState();
             const rounded = this.rounded();
             const size = this.size();
-            const classes = dropdownListInputThemeVariants(theme)({
+            const classes = dropdownListInputThemeVariants({
                 disabled,
                 expanded,
                 hasPrefix,
@@ -163,11 +141,10 @@ class DropdownListComponent {
         ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
         this.listId = createElementControlId();
         this.listPopupClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const size = this.size();
             const userClass = this.popupClass();
-            const variantClass = dropdownPopupThemeVariants(theme)({ rounded, size });
+            const variantClass = dropdownPopupThemeVariants({ rounded, size });
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listPopupClass" }] : /* istanbul ignore next */ []));
@@ -189,9 +166,8 @@ class DropdownListComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedListItem" }] : /* istanbul ignore next */ []));
         this.valueContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
             const hasTemplate = this.valueTemplate() != null;
-            return dropdownListValueContainerThemeVariants(theme)({ hasTemplate });
+            return dropdownListValueContainerThemeVariants({ hasTemplate });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "valueContainerClass" }] : /* istanbul ignore next */ []));
         this.valueTemplate = contentChild(DropdownListValueTemplateDirective, { ...(ngDevMode ? { debugName: "valueTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
@@ -538,7 +514,7 @@ class DropdownListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DropdownListComponent, isStandalone: true, selector: "mona-dropdown-list", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", disabled: "disabledChange", open: "open", opened: "opened", touch: "touch", value: "valueChange" }, host: { listeners: { "blur": "onBlur()" }, properties: { "attr.aria-activedescendant": "activeDescendant()", "attr.aria-busy": "loading() ? 'true' : undefined", "attr.aria-controls": "listId", "attr.aria-disabled": "disabled() ? true : undefined", "attr.aria-expanded": "expanded()", "attr.aria-haspopup": "'listbox'", "attr.aria-invalid": "invalidState() ? true : undefined", "attr.aria-label": "effectiveAriaLabel() || null", "attr.aria-labelledby": "ariaLabelledBy()", "attr.aria-readonly": "readonly() ? true : undefined", "attr.aria-required": "required() ? true : undefined", "attr.data-invalid": "invalidState() || null", "attr.role": "'combobox'", "attr.tabindex": "disabled() ? null : 0", "class": "baseClass()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DropdownListComponent, isStandalone: true, selector: "mona-dropdown-list", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", disabled: "disabledChange", open: "open", opened: "opened", touch: "touch", value: "valueChange" }, host: { listeners: { "blur": "onBlur()" }, properties: { "attr.aria-activedescendant": "activeDescendant()", "attr.aria-busy": "loading() ? 'true' : undefined", "attr.aria-controls": "listId", "attr.aria-disabled": "disabled() ? true : undefined", "attr.aria-expanded": "expanded()", "attr.aria-haspopup": "'listbox'", "attr.aria-invalid": "invalidState() ? true : undefined", "attr.aria-label": "effectiveAriaLabel() || null", "attr.aria-labelledby": "ariaLabelledBy()", "attr.aria-readonly": "readonly() ? true : undefined", "attr.aria-required": "required() ? true : undefined", "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalidState() || null", "attr.data-readonly": "readonly() || null", "attr.role": "'combobox'", "attr.tabindex": "disabled() ? null : 0", "class": "baseClass()" } }, providers: [
             ListService,
             DropdownService,
             DropdownListService,
@@ -552,7 +528,7 @@ class DropdownListComponent {
                 useExisting: forwardRef(() => DropdownListComponent),
                 multi: false
             }
-        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: DropdownListValueTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\r\n    <span [class]=\"affixClass()\">\r\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\r\n    </span>\r\n}\r\n\r\n<span [class]=\"valueContainerClass()\">\r\n    @if (!valueTemplate()) {\r\n        <span>\r\n            @if (selectedListItem()) {\r\n                <span>{{ valueText() }}</span>\r\n            } @else {\r\n                <span>{{ placeholder() }}</span>\r\n            }\r\n        </span>\r\n    } @else {\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"valueTemplate()\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: selectedDataItem() }\"></ng-container>\r\n    }\r\n</span>\r\n\r\n@if (selectedListItem() && showClearButton() && !loading()) {\r\n    <mona-indicator-icon\r\n        preset=\"clear\"\r\n        [interactive]=\"true\"\r\n        label=\"Clear\"\r\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\r\n}\r\n\r\n@if (loading()) {\r\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\r\n}\r\n\r\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\r\n\r\n<span monaDropdownLiveRegion></span>\r\n\r\n<ng-template #popupTemplate>\r\n    <div [class]=\"listPopupClass()\">\r\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect($event)\">\r\n            @if (footerTemplate()) {\r\n                <ng-template monaListFooterTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (groupHeaderTemplate()) {\r\n                <ng-template monaListGroupHeaderTemplate let-group>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (headerTemplate()) {\r\n                <ng-template monaListHeaderTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (itemTemplate()) {\r\n                <ng-template monaListItemTemplate let-dataItem>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"itemTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (noDataTemplate()) {\r\n                <ng-template monaListNoDataTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n        </mona-list>\r\n    </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
+        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: DropdownListValueTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<span [class]=\"valueContainerClass()\">\n    @if (!valueTemplate()) {\n        <span>\n            @if (selectedListItem()) {\n                <span>{{ valueText() }}</span>\n            } @else {\n                <span>{{ placeholder() }}</span>\n            }\n        </span>\n    } @else {\n        <ng-container\n            [ngTemplateOutlet]=\"valueTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedDataItem() }\"></ng-container>\n    }\n</span>\n\n@if (selectedListItem() && showClearButton() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect($event)\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownListComponent, decorators: [{
             type: Component,
@@ -572,7 +548,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         }
                     ], imports: [
                         NgTemplateOutlet,
-                        FontAwesomeModule,
                         ListComponent,
                         ListItemTemplateDirective,
                         ListGroupHeaderTemplateDirective,
@@ -593,12 +568,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-labelledby]": "ariaLabelledBy()",
                         "[attr.aria-readonly]": "readonly() ? true : undefined",
                         "[attr.aria-required]": "required() ? true : undefined",
+                        "[attr.data-disabled]": "disabled() || null",
                         "[attr.data-invalid]": "invalidState() || null",
+                        "[attr.data-readonly]": "readonly() || null",
                         "[attr.role]": "'combobox'",
                         "[attr.tabindex]": "disabled() ? null : 0",
                         "[class]": "baseClass()",
                         "(blur)": "onBlur()"
-                    }, template: "@if (prefixTemplate()) {\r\n    <span [class]=\"affixClass()\">\r\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\r\n    </span>\r\n}\r\n\r\n<span [class]=\"valueContainerClass()\">\r\n    @if (!valueTemplate()) {\r\n        <span>\r\n            @if (selectedListItem()) {\r\n                <span>{{ valueText() }}</span>\r\n            } @else {\r\n                <span>{{ placeholder() }}</span>\r\n            }\r\n        </span>\r\n    } @else {\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"valueTemplate()\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: selectedDataItem() }\"></ng-container>\r\n    }\r\n</span>\r\n\r\n@if (selectedListItem() && showClearButton() && !loading()) {\r\n    <mona-indicator-icon\r\n        preset=\"clear\"\r\n        [interactive]=\"true\"\r\n        label=\"Clear\"\r\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\r\n}\r\n\r\n@if (loading()) {\r\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\r\n}\r\n\r\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\r\n\r\n<span monaDropdownLiveRegion></span>\r\n\r\n<ng-template #popupTemplate>\r\n    <div [class]=\"listPopupClass()\">\r\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect($event)\">\r\n            @if (footerTemplate()) {\r\n                <ng-template monaListFooterTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (groupHeaderTemplate()) {\r\n                <ng-template monaListGroupHeaderTemplate let-group>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (headerTemplate()) {\r\n                <ng-template monaListHeaderTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (itemTemplate()) {\r\n                <ng-template monaListItemTemplate let-dataItem>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"itemTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (noDataTemplate()) {\r\n                <ng-template monaListNoDataTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n        </mona-list>\r\n    </div>\r\n</ng-template>\r\n" }]
+                    }, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<span [class]=\"valueContainerClass()\">\n    @if (!valueTemplate()) {\n        <span>\n            @if (selectedListItem()) {\n                <span>{{ valueText() }}</span>\n            } @else {\n                <span>{{ placeholder() }}</span>\n            }\n        </span>\n    } @else {\n        <ng-container\n            [ngTemplateOutlet]=\"valueTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedDataItem() }\"></ng-container>\n    }\n</span>\n\n@if (selectedListItem() && showClearButton() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect($event)\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupHeaderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownGroupHeaderTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], popupTemplate: [{ type: i0.ViewChild, args: ["popupTemplate", { isSignal: true }] }], prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], valueTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownListValueTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], opened: [{ type: i0.Output, args: ["opened"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });

package/fesm2022/nanahoshi-mona-ui-dropdowns.mjs

@@ -7,6 +7,7 @@ import { Subject, takeUntil, take, filter, switchMap, fromEvent } from 'rxjs';
 import { ConnectionPositionPair } from '@angular/cdk/overlay';
 import { PopupService, dropdownPopupAnimation } from '@nanahoshi/mona-ui/popup';
 import { cva } from 'class-variance-authority';
+import { themeOverlaySurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
 const DropdownDataInputToken = new InjectionToken("DROPDOWN_DATA_INPUT");
 
@@ -68,11 +69,11 @@ class DropdownFilterableDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownFilterableDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-        mona-auto-complete[monaDropDownFilterable],
-        mona-dropdown-list[monaDropDownFilterable],
-        mona-combo-box[monaDropDownFilterable],
-        mona-multi-select[monaDropDownFilterable]
+                    selector: `
+        mona-auto-complete[monaDropDownFilterable],
+        mona-dropdown-list[monaDropDownFilterable],
+        mona-combo-box[monaDropDownFilterable],
+        mona-multi-select[monaDropDownFilterable]
     `
                 }]
         }], ctorParameters: () => [], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaDropDownFilterable", required: false }] }] } });
@@ -84,13 +85,13 @@ class DropdownFooterTemplateDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownFooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-        ng-template[monaDropDownFooterTemplate],
-        ng-template[monaAutoCompleteFooterTemplate],
-        ng-template[monaDropDownListFooterTemplate],
-        ng-template[monaDropDownTreeFooterTemplate],
-        ng-template[monaComboBoxFooterTemplate],
-        ng-template[monaMultiSelectFooterTemplate]
+                    selector: `
+        ng-template[monaDropDownFooterTemplate],
+        ng-template[monaAutoCompleteFooterTemplate],
+        ng-template[monaDropDownListFooterTemplate],
+        ng-template[monaDropDownTreeFooterTemplate],
+        ng-template[monaComboBoxFooterTemplate],
+        ng-template[monaMultiSelectFooterTemplate]
     `,
                     standalone: true
                 }]
@@ -103,12 +104,12 @@ class DropdownGroupHeaderTemplateDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownGroupHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-        ng-template[monaDropDownGroupHeaderTemplate],
-        ng-template[monaAutoCompleteGroupHeaderTemplate],
-        ng-template[monaDropDownListGroupHeaderTemplate],
-        ng-template[monaComboBoxGroupHeaderTemplate],
-        ng-template[monaMultiSelectGroupHeaderTemplate]
+                    selector: `
+        ng-template[monaDropDownGroupHeaderTemplate],
+        ng-template[monaAutoCompleteGroupHeaderTemplate],
+        ng-template[monaDropDownListGroupHeaderTemplate],
+        ng-template[monaComboBoxGroupHeaderTemplate],
+        ng-template[monaMultiSelectGroupHeaderTemplate]
   `,
                     standalone: true
                 }]
@@ -152,11 +153,11 @@ class DropdownGroupableDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownGroupableDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-        mona-auto-complete[monaDropDownGroupable],
-        mona-combo-box[monaDropDownGroupable],
-        mona-dropdown-list[monaDropDownGroupable],
-        mona-multi-select[monaDropDownGroupable],
+                    selector: `
+        mona-auto-complete[monaDropDownGroupable],
+        mona-combo-box[monaDropDownGroupable],
+        mona-dropdown-list[monaDropDownGroupable],
+        mona-multi-select[monaDropDownGroupable],
     `
                 }]
         }], ctorParameters: () => [], propDecorators: { groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaDropDownGroupable", required: false }] }] } });
@@ -168,13 +169,13 @@ class DropdownHeaderTemplateDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-        ng-template[monaDropDownHeaderTemplate],
-        ng-template[monaAutoCompleteHeaderTemplate],
-        ng-template[monaDropDownListHeaderTemplate],
-        ng-template[monaDropDownTreeHeaderTemplate],
-        ng-template[monaComboBoxHeaderTemplate],
-        ng-template[monaMultiSelectHeaderTemplate]
+                    selector: `
+        ng-template[monaDropDownHeaderTemplate],
+        ng-template[monaAutoCompleteHeaderTemplate],
+        ng-template[monaDropDownListHeaderTemplate],
+        ng-template[monaDropDownTreeHeaderTemplate],
+        ng-template[monaComboBoxHeaderTemplate],
+        ng-template[monaMultiSelectHeaderTemplate]
   `,
                     standalone: true
                 }]
@@ -187,12 +188,12 @@ class DropdownItemTemplateDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-        ng-template[monaDropDownItemTemplate],
-        ng-template[monaAutoCompleteItemTemplate],
-        ng-template[monaDropDownListItemTemplate],
-        ng-template[monaComboBoxItemTemplate],
-        ng-template[monaMultiSelectItemTemplate]
+                    selector: `
+        ng-template[monaDropDownItemTemplate],
+        ng-template[monaAutoCompleteItemTemplate],
+        ng-template[monaDropDownListItemTemplate],
+        ng-template[monaComboBoxItemTemplate],
+        ng-template[monaMultiSelectItemTemplate]
     `,
                     standalone: true
                 }]
@@ -205,13 +206,13 @@ class DropdownNoDataTemplateDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownNoDataTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-        ng-template[monaDropDownNoDataTemplate],
-        ng-template[monaAutoCompleteNoDataTemplate],
-        ng-template[monaDropDownListNoDataTemplate],
-        ng-template[monaDropDownTreeNoDataTemplate],
-        ng-template[monaComboBoxNoDataTemplate],
-        ng-template[monaMultiSelectNoDataTemplate]
+                    selector: `
+        ng-template[monaDropDownNoDataTemplate],
+        ng-template[monaAutoCompleteNoDataTemplate],
+        ng-template[monaDropDownListNoDataTemplate],
+        ng-template[monaDropDownTreeNoDataTemplate],
+        ng-template[monaComboBoxNoDataTemplate],
+        ng-template[monaMultiSelectNoDataTemplate]
     `,
                     standalone: true
                 }]
@@ -249,11 +250,11 @@ class DropdownVirtualScrollDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownVirtualScrollDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-        mona-auto-complete[monaDropDownVirtualScroll],
-        mona-dropdown-list[monaDropDownVirtualScroll],
-        mona-combo-box[monaDropDownVirtualScroll],
-        mona-multi-select[monaDropDownVirtualScroll]
+                    selector: `
+        mona-auto-complete[monaDropDownVirtualScroll],
+        mona-dropdown-list[monaDropDownVirtualScroll],
+        mona-combo-box[monaDropDownVirtualScroll],
+        mona-multi-select[monaDropDownVirtualScroll]
     `,
                     standalone: true
                 }]
@@ -659,10 +660,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const dropdownPopupVariants = cva(`
-        bg-background shadow-md
-        border border-input-border
-        h-full max-h-64 overflow-auto
+const dropdownPopupThemeVariants = cva(`
+        h-full max-h-64 overflow-auto
+        [scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]
+        text-foreground
+        ${themeOverlaySurfaceClasses}
+        [&_mona-list]:[background-color:var(--mona-dropdown-popup-list-background,var(--mona-list-background))]!
+        border border-border shadow-(--shadow-overlay)
     `, {
     variants: {
         rounded: {
@@ -684,15 +688,6 @@ const dropdownPopupVariants = cva(`
     }
 });
 
-const dropdownPopupThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dropdownPopupVariants;
-        default:
-            return dropdownPopupVariants;
-    }
-};
-
 /**
  * Generated bundle index. Do not edit.
  */