[Bug]: Horizontal tab height does not match with other components' height

[senese]

Prerequisites

• I have searched existing issues to ensure this bug hasn't been reported already
• I have tested this with the latest version of the components

Bug description

The horizontal tab (which also use NativeSelect) height for the default size md does not match with other components' height like Input, Select and DateRangePicker. This creates a visual bug when they are aligned in the same row.

Steps to reproduce

1. Create a flex-div
2. Add default Input, Select, Horizontal Tab and DateRangePicker just like the examples in the docs inside the flex-div
3. Verify the height difference

Expected behavior

Expect that all components should be the same height when in the same size

Actual behavior

Horizontal Tab (controlled by NativeSelect) it's higher the most components

Code example

import { useState } from "react";
import type { DatePreset } from "../../hooks/useDashboardFilters";
import { useCompanies } from "../../hooks/useDashboardQueries";
import { Input } from "@/components/base/input/input";
import { FilterLines, SearchMd } from "@untitledui/icons";
import { Tabs } from "../application/tabs/tabs";
import { Key } from "react-aria-components";
import { NativeSelect } from "../base/select/select-native";
import { Select } from "../base/select/select";
import type { DateValue } from "react-aria-components";
import { DateRangePicker } from "@/components/application/date-picker/date-range-picker";

interface FiltersBarProps {
  setCompany: (v: string) => void;
  setPreset: (v: DatePreset) => void;
}

const PRESETS: { key: DatePreset; label: string }[] = [
  { key: "24h", label: "24 hours" },
  { key: "7d", label: "7 days" },
  { key: "30d", label: "30 days" },
  { key: "12m", label: "12 months" },
];

/** Filters bar in the design-example style: a "Filters" button (opens
 * Company/ICCID) on the left, period pills + "Select dates" on the right. */
export function FiltersBar({
  setCompany,
  setPreset,
}: FiltersBarProps) {
  const { data: companies } = useCompanies();
  let companiesWithKey = companies?.map((c) => ({
    id: c.company,
    label: c.company,
    key: c.company,
  })) ?? [];

  const [selectedTabIndex, setSelectedTabIndex] = useState<Key>();
  const [rangeDate, setRangeDate] = useState<{
    start: DateValue;
    end: DateValue;
  } | null>(null);
  

  companiesWithKey = [{ id: "ALL", label: "All", key: "ALL" }, ...companiesWithKey];

  const onChangeFilter = (key: Key) => {
    setSelectedTabIndex(key);
    setPreset(key as DatePreset);
  };

  return (
    <div className="flex flex-wrap items-start justify-between gap-md">
      <div className="grow">
        <Input
          isRequired
          icon={SearchMd}
          placeholder="Search by ICCID"
          wrapperClassName="ring-1 bg-background-primary rounded-md"
        />
      </div>
      <Select
        placeholder="Company"
        icon={FilterLines}
        items={companiesWithKey} 
        onChange={(value) => setCompany(value as string)}
        buttonClassName="bg-background-primary rounded-md"
        className="w-52"
      >
        {(companyItem) => (
          <Select.Item id={companyItem.id}>
            {companyItem.label}
          </Select.Item>
        )}
      </Select>
      <NativeSelect
        aria-label="Date filters"
        value={selectedTabIndex as string}
        onChange={(event) => setSelectedTabIndex(event.target.value)}
        options={PRESETS.map((tab) => ({ label: tab.label, value: tab.key }))}
        className="w-80 md:hidden"
        selectClassName="rounded-md"
      />
      <Tabs defaultSelectedKey={PRESETS[0].key} selectedKey={selectedTabIndex} onSelectionChange={onChangeFilter} className="w-max max-md:hidden">
        <Tabs.List type="button-border" items={PRESETS} className="bg-background-primary">
          {(tab) => <Tabs.Item {...tab} />}
        </Tabs.List>
      </Tabs>
      <DateRangePicker
        aria-label="Date range picker"
        shouldCloseOnSelect={false}
        value={rangeDate}
        onChange={setRangeDate}
        size="md"
        buttonClassName="bg-background-primary rounded-md"
      />
    </div>
  );
}

Browser

Chrome

Device type

Desktop

Component version

No response

Environment details

No response

Screenshots/Videos

Console errors

Additional context

No response

Accessibility impact

• This bug affects keyboard navigation
• This bug affects screen reader users
• This bug affects focus management
• This bug affects color contrast or visual accessibility