Select

const SelectAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-Select__root",
        "inline-flex items-center justify-between relative whitespace-nowrap truncate",
    ]),
    chevronIcon: cva([
        "UI-Combobox__chevronIcon",
        "ml-2 h-4 w-4 shrink-0 opacity-50",
    ]),
    scrollButton: cva([
        "UI-Select__scrollButton",
        "flex items-center justify-center h-[25px] bg-[--paper] text-base cursor-default",
    ]),
    content: cva([
        "UI-Select__content",
        "w-full overflow-hidden rounded-[--radius] shadow-md bg-[--paper] border leading-none z-50",
    ]),
    viewport: cva([
        "UI-Select__viewport",
        "p-1 z-10",
    ]),
    item: cva([
        "UI-Select__item",
        "text-base leading-none rounded-[--radius] flex items-center h-8 pr-2 pl-8 relative",
        "select-none disabled:opacity-50 disabled:pointer-events-none",
        "data-highlighted:outline-none data-highlighted:bg-[--subtle]",
        "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none",
    ]),
    itemText: cva([
        "UI-Select__itemText",
        "flex-none whitespace-nowrap truncate",
    ]),
    checkIcon: cva([
        "UI-Select__checkIcon",
        "absolute left-2 w-4 inline-flex items-center justify-center",
    ]),
})