Refactored icons.

src/components/input/FilterBar.tsx

@@ -1,6 +1,7 @@
 import { MouseEvent } from 'react';
-import { Button, Icon, Icons, Text, Row, TooltipTrigger, Tooltip } from '@umami/react-zen';
+import { Button, Icon, Text, Row, TooltipTrigger, Tooltip } from '@umami/react-zen';
 import { useNavigation, useMessages, useFormat, useFilters } from '@/components/hooks';
+import { Close } from '@/components/icons';
 import { isSearchOperator } from '@/lib/params';
 
 export function FilterBar() {
@@ -51,8 +52,8 @@ export function FilterBar() {
                     {paramValue}
                   </Text>
                 </Row>
-                <Icon onClick={e => handleCloseFilter(name, e)} size="xs" color>
-                  <Icons.Close />
+                <Icon onClick={e => handleCloseFilter(name, e)} size="xs">
+                  <Close />
                 </Icon>
               </Row>
             </Row>
@@ -62,7 +63,7 @@ export function FilterBar() {
       <TooltipTrigger delay={0}>
         <Button variant="quiet" onPress={handleResetFilter}>
           <Icon>
-            <Icons.Close />
+            <Close />
           </Icon>
         </Button>
         <Tooltip>

src/components/input/MenuButton.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, Key } from 'react';
 import { DialogTrigger, Button, Menu, Popover, Icon } from '@umami/react-zen';
-import { Lucide } from '@/components/icons';
+import { Ellipsis } from '@/components/icons';
 
 export function MenuButton({
   children,
@@ -17,7 +17,7 @@ export function MenuButton({
     <DialogTrigger>
       <Button variant="outline">
         <Icon>
-          <Lucide.Ellipsis />
+          <Ellipsis />
         </Icon>
       </Button>
       <Popover placement="bottom start">

src/components/input/MonthSelect.tsx

@@ -1,6 +1,6 @@
 import { Row, Text, Icon, Button, MenuTrigger, Popover, Menu, MenuItem } from '@umami/react-zen';
 import { startOfMonth, endOfMonth, startOfYear, addMonths, subYears } from 'date-fns';
-import { Icons } from '@/components/icons';
+import { Chevron } from '@/components/icons';
 import { useLocale } from '@/components/hooks';
 import { formatDate } from '@/lib/date';
 
@@ -9,7 +9,7 @@ export function MonthSelect({ date = new Date(), onChange }) {
   const month = formatDate(date, 'MMMM', locale);
   const year = date.getFullYear();
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // eslint-disable-next-line
   const handleChange = (close: () => void, date: Date) => {
     onChange(`range:${startOfMonth(date).getTime()}:${endOfMonth(date).getTime()}`);
     close();
@@ -31,7 +31,7 @@ export function MonthSelect({ date = new Date(), onChange }) {
         <Button variant="quiet">
           <Text>{month}</Text>
           <Icon size="sm">
-            <Icons.Chevron />
+            <Chevron />
           </Icon>
         </Button>
         <Popover>
@@ -50,13 +50,17 @@ export function MonthSelect({ date = new Date(), onChange }) {
         <Button variant="quiet">
           <Text>{year}</Text>
           <Icon size="sm">
-            <Icons.Chevron />
+            <Chevron />
           </Icon>
         </Button>
         <Popover>
           <Menu>
             {years.map(year => {
-              return <MenuItem id={year}>{year}</MenuItem>;
+              return (
+                <MenuItem key={year} id={year}>
+                  {year}
+                </MenuItem>
+              );
             })}
           </Menu>
         </Popover>

src/components/input/RefreshButton.tsx

@@ -1,7 +1,7 @@
 import { LoadingButton, Icon, Tooltip, TooltipTrigger } from '@umami/react-zen';
 import { setWebsiteDateRange } from '@/store/websites';
 import { useDateRange } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Refresh } from '@/components/icons';
 import { useMessages } from '@/components/hooks';
 
 export function RefreshButton({
@@ -24,7 +24,7 @@ export function RefreshButton({
     <TooltipTrigger>
       <LoadingButton isLoading={isLoading} onPress={handleClick}>
         <Icon>
-          <Icons.Refresh />
+          <Refresh />
         </Icon>
       </LoadingButton>
       <Tooltip>{formatMessage(labels.refresh)}</Tooltip>

src/components/input/SettingsButton.tsx

@@ -1,7 +1,7 @@
 import { Button, Icon, DialogTrigger, Popover, Column, Label } from '@umami/react-zen';
 import { TimezoneSetting } from '@/app/(main)/settings/profile/TimezoneSetting';
 import { DateRangeSetting } from '@/app/(main)/settings/profile/DateRangeSetting';
-import { Icons } from '@/components/icons';
+import { Gear } from '@/components/icons';
 import { useMessages } from '@/components/hooks';
 
 export function SettingsButton() {
@@ -11,7 +11,7 @@ export function SettingsButton() {
     <DialogTrigger>
       <Button variant="quiet">
         <Icon>
-          <Icons.Gear />
+          <Gear />
         </Icon>
       </Button>
       <Popover placement="bottom end">

src/components/input/TeamsButton.tsx

@@ -12,10 +12,10 @@ import {
   Popover,
   Row,
   Box,
-  Icons,
 } from '@umami/react-zen';
 import { User, Users } from 'lucide-react';
 import { useLoginQuery, useMessages, useTeamsQuery, useNavigation } from '@/components/hooks';
+import { Chevron } from '@/components/icons';
 
 export function TeamsButton({
   className,
@@ -46,8 +46,8 @@ export function TeamsButton({
         <Row alignItems="center" gap="3">
           <Icon>{teamId ? <Users /> : <User />}</Icon>
           {showText && <Text>{teamId ? team?.name : user.username}</Text>}
-          <Icon rotate={90} size="xs">
-            <Icons.Chevron />
+          <Icon rotate={90} size="sm">
+            <Chevron />
           </Icon>
         </Row>
       </Button>

src/components/input/WebsiteDateFilter.tsx

@@ -9,7 +9,7 @@ import {
   Tooltip,
 } from '@umami/react-zen';
 import { isAfter } from 'date-fns';
-import { Icons } from '@/components/icons';
+import { Chevron, Close, Compare } from '@/components/icons';
 import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
 import { getOffsetDateRange } from '@/lib/date';
 import { DateRange } from '@/lib/types';
@@ -65,12 +65,12 @@ export function WebsiteDateFilter({
         <Row gap="1">
           <Button onPress={() => handleIncrement(-1)} variant="quiet">
             <Icon size="xs" rotate={180}>
-              <Icons.Chevron />
+              <Chevron />
             </Icon>
           </Button>
           <Button onPress={() => handleIncrement(1)} variant="quiet" isDisabled={disableForward}>
             <Icon size="xs">
-              <Icons.Chevron />
+              <Chevron />
             </Icon>
           </Button>
         </Row>
@@ -95,7 +95,7 @@ export function WebsiteDateFilter({
       {!isAllTime && allowCompare && (
         <TooltipTrigger delay={0}>
           <Button variant="quiet" onPress={handleCompare}>
-            <Icon fillColor>{compare ? <Icons.Close /> : <Icons.Compare />}</Icon>
+            <Icon fillColor>{compare ? <Close /> : <Compare />}</Icon>
           </Button>
           <Tooltip>{formatMessage(compare ? labels.cancel : labels.compareDates)}</Tooltip>
         </TooltipTrigger>