@oxy.so/bloom 4.32.0 → 4.33.0

package/lib/typescript/module/provider/types.d.ts

@@ -14,5 +14,11 @@ export interface BloomProviderProps extends Omit<BloomThemeProviderProps, 'child
     imageResolver?: ImageResolver;
     /** `false` disables haptic feedback app-wide (honored by every `useHaptics()` call). */
     haptics?: boolean;
+    /**
+     * BCP 47 locale for every Bloom component below — dates, month names and
+     * Bloom's own strings (Cancel, Apply, …). A component's own `locale` prop
+     * wins. Unset, components follow the runtime's locale.
+     */
+    locale?: string;
 }
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/module/provider/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/provider/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,UAAU,CAAC;IACnF,QAAQ,EAAE,SAAS,CAAC;IACpB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/provider/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,UAAU,CAAC;IACnF,QAAQ,EAAE,SAAS,CAAC;IACpB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/bloom",
-  "version": "4.32.0",
+  "version": "4.33.0",
   "packageManager": "bun@1.3.14",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
@@ -79,6 +79,20 @@
         "default": "./lib/commonjs/image-resolver/index.js"
       }
     },
+    "./locale": {
+      "react-native": {
+        "types": "./lib/typescript/module/locale/index.d.ts",
+        "default": "./src/locale/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/locale/index.d.ts",
+        "default": "./lib/module/locale/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/locale/index.d.ts",
+        "default": "./lib/commonjs/locale/index.js"
+      }
+    },
     "./image-aspect-ratio-cache": {
       "react-native": {
         "types": "./lib/typescript/module/image-aspect-ratio-cache/index.d.ts",
@@ -3452,6 +3466,9 @@
       "image-resolver": [
         "./lib/typescript/module/image-resolver/index.d.ts"
       ],
+      "locale": [
+        "./lib/typescript/module/locale/index.d.ts"
+      ],
       "image-aspect-ratio-cache": [
         "./lib/typescript/module/image-aspect-ratio-cache/index.d.ts"
       ],

package/src/calendar/shared.ts

@@ -3,6 +3,7 @@ import { Platform, useWindowDimensions } from 'react-native';
 
 import { addDays, buildMonthGrid, isSameMonth, startOfDay } from '../date-picker/calendar-grid';
 import type { CalendarViewEvent } from './types';
+import { formatGregorian } from '../locale/format-date';
 
 export const IS_WEB = Platform.OS === 'web';
 
@@ -95,18 +96,10 @@ export function currentGmtLabel(now: Date = new Date()): string {
   return `GMT${offset >= 0 ? '+' : ''}${offset}`;
 }
 
-function format(date: Date, locale: string | undefined, options: Intl.DateTimeFormatOptions): string | null {
-  try {
-    return new Intl.DateTimeFormat(locale, options).format(date);
-  } catch {
-    return null;
-  }
-}
-
 /** `Tue, Aug 11` — the details panel's date line. */
 export function formatEventDate(date: Date, locale?: string): string {
   return (
-    format(date, locale, {
+    formatGregorian(date, locale, {
       weekday: 'short',
       month: 'short',
       day: 'numeric',
@@ -116,7 +109,7 @@ export function formatEventDate(date: Date, locale?: string): string {
 
 /** `Aug` — the month switcher's label below `sm`. */
 export function formatShortMonth(date: Date, locale?: string): string {
-  return format(date, locale, { month: 'short' }) ?? String(date.getMonth() + 1);
+  return formatGregorian(date, locale, { month: 'short' }) ?? String(date.getMonth() + 1);
 }
 
 /** `Sun` … `Sat` — the month grid's weekday pills. */
@@ -126,8 +119,8 @@ export function weekdayShortLabels(locale?: string): { short: string; long: stri
   return fallback.map((name, index) => {
     const date = addDays(sunday, index);
     return {
-      short: format(date, locale, { weekday: 'short' }) ?? name,
-      long: format(date, locale, { weekday: 'long' }) ?? name,
+      short: formatGregorian(date, locale, { weekday: 'short' }) ?? name,
+      long: formatGregorian(date, locale, { weekday: 'long' }) ?? name,
     };
   });
 }

package/src/date-picker/Calendar.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 
 import { useControllableState } from '../hooks/use-controllable-state';
+import { useMessages } from '../locale/messages';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { useTheme } from '../theme/use-theme';
 import {
@@ -21,6 +22,7 @@ import {
   type DayCellState,
 } from './calendar-grid';
 import { CALENDAR_CSS, CalendarMonth, dayKey } from './CalendarMonth';
+import { DATE_PICKER_MESSAGES } from './messages';
 import { resolveCalendarPalette } from './palette';
 import type {
   CalendarConstraintProps,
@@ -73,13 +75,16 @@ function CalendarFrame({
   maxDate,
   isDateUnavailable,
   weekStartsOn = 0,
-  locale,
+  locale: localeProp,
   accessibilityLabel,
   labels,
   style,
   testID,
 }: CalendarFrameProps) {
   const theme = useTheme();
+  const { locale, messages } = useMessages(DATE_PICKER_MESSAGES, localeProp);
+  const previousLabel = labels?.previousMonth ?? messages.previousMonth;
+  const nextLabel = labels?.nextMonth ?? messages.nextMonth;
   const palette = useMemo(() => resolveCalendarPalette(theme), [theme]);
   const [firstMonth, setFirstMonth] = useState(() => startOfMonth(initialDate));
   const [focusedDate, setFocusedDate] = useState(() => startOfDay(initialDate));
@@ -202,7 +207,8 @@ function CalendarFrame({
           onKeyDown={onKeyDown}
           registerNode={registerNode}
           accessibilityLabel={accessibilityLabel}
-          labels={labels}
+          previousLabel={previousLabel}
+          nextLabel={nextLabel}
           testID={testID ? `${testID}-month-${index}` : undefined}
         />
       ))}

package/src/date-picker/CalendarMonth.tsx

@@ -14,7 +14,7 @@ import {
   type DayCellState,
 } from './calendar-grid';
 import type { CalendarPalette } from './palette';
-import type { CalendarLabels, WeekStart } from './types';
+import type { WeekStart } from './types';
 
 /**
  * One month panel: header, weekday row and day grid.
@@ -281,7 +281,9 @@ export interface CalendarMonthProps {
   onKeyDown: (key: string, preventDefault: () => void) => void;
   registerNode: (key: string, node: View | null) => void;
   accessibilityLabel?: string;
-  labels?: CalendarLabels;
+  /** The chevrons' names, already localised by the calendar. */
+  previousLabel: string;
+  nextLabel: string;
   testID?: string;
 }
 
@@ -309,7 +311,8 @@ export function CalendarMonth({
   onKeyDown,
   registerNode,
   accessibilityLabel,
-  labels,
+  previousLabel,
+  nextLabel,
   testID,
 }: CalendarMonthProps) {
   const title = formatMonthTitle(month, locale);
@@ -341,7 +344,7 @@ export function CalendarMonth({
         {onPrevious ? (
           <NavButton
             direction="left"
-            label={labels?.previousMonth ?? 'Previous month'}
+            label={previousLabel}
             onPress={onPrevious}
             disabled={previousDisabled}
             palette={palette}
@@ -358,7 +361,7 @@ export function CalendarMonth({
         {onNext ? (
           <NavButton
             direction="right"
-            label={labels?.nextMonth ?? 'Next month'}
+            label={nextLabel}
             onPress={onNext}
             disabled={nextDisabled}
             palette={palette}

package/src/date-picker/DatePicker.tsx

@@ -2,9 +2,11 @@ import React, { useState } from 'react';
 import { View } from 'react-native';
 
 import { useControllableState } from '../hooks/use-controllable-state';
+import { useMessages } from '../locale/messages';
 import { Calendar } from './Calendar';
 import { formatTriggerDate } from './calendar-grid';
 import { DateChipInput } from './DateChipInput';
+import { DATE_PICKER_MESSAGES } from './messages';
 import { PickerActions, PickerShell, usePickerPalette } from './PickerShell';
 import { SummaryPresence } from './SummaryPresence';
 import type { DatePickerProps } from './types';
@@ -27,8 +29,8 @@ export function DatePicker({
   value,
   defaultValue = null,
   onChange,
-  placeholder = 'Select date',
-  accessibilityLabel = 'Date',
+  placeholder: placeholderProp,
+  accessibilityLabel: accessibilityLabelProp,
   labels,
   disabled,
   open: openProp,
@@ -38,11 +40,14 @@ export function DatePicker({
   maxDate,
   isDateUnavailable,
   weekStartsOn,
-  locale,
+  locale: localeProp,
   style,
   testID,
 }: DatePickerProps) {
   const palette = usePickerPalette();
+  const { locale, messages } = useMessages(DATE_PICKER_MESSAGES, localeProp);
+  const placeholder = placeholderProp ?? messages.datePlaceholder;
+  const accessibilityLabel = accessibilityLabelProp ?? messages.dateLabel;
   const [committed, setCommitted] = useControllableState<Date | null>({
     value,
     defaultValue,
@@ -128,7 +133,8 @@ export function DatePicker({
               setOpenState(false);
             }}
             applyDisabled={!pending}
-            labels={labels}
+            cancelLabel={labels?.cancel ?? messages.cancel}
+            applyLabel={labels?.apply ?? messages.apply}
             testID={testID}
           />
         </View>

package/src/date-picker/DateRangePicker.tsx

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react';
 import { Platform, Pressable, View, useWindowDimensions, type TextStyle } from 'react-native';
 
 import { useControllableState } from '../hooks/use-controllable-state';
+import { useMessages } from '../locale/messages';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { Text, TYPE_SCALE } from '../typography';
 import {
@@ -13,6 +14,7 @@ import {
 import { RangeCalendar } from './Calendar';
 import { MONTH_PANEL_WIDTH } from './CalendarMonth';
 import { DateChipInput } from './DateChipInput';
+import { DATE_PICKER_MESSAGES } from './messages';
 import type { CalendarPalette } from './palette';
 import { PickerActions, PickerShell, usePickerPalette } from './PickerShell';
 import { SummaryPresence } from './SummaryPresence';
@@ -36,11 +38,6 @@ import type { DateRange, DateRangePickerProps } from './types';
 /** 16 + 118 + 12 + two panels + 8 between them + 8 — the popup width. */
 const DUAL_MONTH_WIDTH = 16 + 118 + 12 + MONTH_PANEL_WIDTH * 2 + 8 + 8;
 
-/** The pill's English default; `labels.daysSelected` takes the app's own plural rules. */
-function daysSelected(days: number): string {
-  return `${days} day${days === 1 ? '' : 's'} selected`;
-}
-
 /** `text-body-medium`, in Inter. */
 const BODY: TextStyle = TYPE_SCALE['body-medium'];
 
@@ -90,8 +87,8 @@ export function DateRangePicker({
   value,
   defaultValue = null,
   onChange,
-  placeholder = 'Select date range',
-  accessibilityLabel = 'Date range',
+  placeholder: placeholderProp,
+  accessibilityLabel: accessibilityLabelProp,
   quickSelect = true,
   labels,
   disabled,
@@ -102,11 +99,14 @@ export function DateRangePicker({
   maxDate,
   isDateUnavailable,
   weekStartsOn,
-  locale,
+  locale: localeProp,
   style,
   testID,
 }: DateRangePickerProps) {
   const palette = usePickerPalette();
+  const { locale, messages } = useMessages(DATE_PICKER_MESSAGES, localeProp);
+  const placeholder = placeholderProp ?? messages.rangePlaceholder;
+  const accessibilityLabel = accessibilityLabelProp ?? messages.rangeLabel;
   const { width: windowWidth } = useWindowDimensions();
   const [committed, setCommitted] = useControllableState<DateRange | null>({
     value,
@@ -161,7 +161,7 @@ export function DateRangePicker({
               {presets.map((preset) => (
                 <PresetRow
                   key={preset.key}
-                  label={labels?.presets?.[preset.key] ?? preset.label}
+                  label={labels?.presets?.[preset.key] ?? messages.presets[preset.key]}
                   active={isSameRange(pending, preset.range)}
                   onPress={() => choose(preset.range)}
                   palette={palette}
@@ -213,7 +213,7 @@ export function DateRangePicker({
                     <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
                       <DateChipInput
                         date={pending.start}
-                        label={labels?.startDate ?? 'Start date'}
+                        label={labels?.startDate ?? messages.startDate}
                         palette={palette}
                         onCommit={(start) =>
                           setPending({ start, end: start > pending.end ? start : pending.end })
@@ -222,7 +222,7 @@ export function DateRangePicker({
                       <Text style={{ ...BODY, color: palette.secondaryText }}>-</Text>
                       <DateChipInput
                         date={pending.end}
-                        label={labels?.endDate ?? 'End date'}
+                        label={labels?.endDate ?? messages.endDate}
                         palette={palette}
                         onCommit={(end) =>
                           setPending({ start: end < pending.start ? end : pending.start, end })
@@ -241,7 +241,7 @@ export function DateRangePicker({
                         }}
                       >
                         <Text style={{ ...BODY, color: palette.secondaryText }}>
-                          {(labels?.daysSelected ?? daysSelected)(days)}
+                          {(labels?.daysSelected ?? messages.daysSelected)(days)}
                         </Text>
                       </View>
                     ) : null}
@@ -259,7 +259,8 @@ export function DateRangePicker({
                 setOpenState(false);
               }}
               applyDisabled={!pending}
-              labels={labels}
+              cancelLabel={labels?.cancel ?? messages.cancel}
+              applyLabel={labels?.apply ?? messages.apply}
               testID={testID}
             />
           </View>

package/src/date-picker/MeetingScheduler.tsx

@@ -16,11 +16,14 @@ import { useControllableState } from '../hooks/use-controllable-state';
 import { RiFlagLine } from '../icons/remix/RiFlagLine';
 import { RiGlobalLine } from '../icons/remix/RiGlobalLine';
 import { RiVideoLine } from '../icons/remix/RiVideoLine';
+import { formatGregorian } from '../locale/format-date';
+import { useMessages } from '../locale/messages';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
 import { Text, TYPE_SCALE } from '../typography';
 import { Calendar } from './Calendar';
 import { formatTriggerDate, today } from './calendar-grid';
+import { DATE_PICKER_MESSAGES } from './messages';
 import type { CalendarPalette } from './palette';
 import { PickerShell, usePickerPalette } from './PickerShell';
 import type {
@@ -95,11 +98,11 @@ function formatTime(time: string, format: MeetingSchedulerHourFormat): string {
 }
 
 function weekdayShort(date: Date, locale?: string): string {
-  try {
-    return new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date).slice(0, 2);
-  } catch {
-    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'][date.getDay()] ?? '';
-  }
+  return (
+    formatGregorian(date, locale, { weekday: 'short' })?.slice(0, 2) ??
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'][date.getDay()] ??
+    ''
+  );
 }
 
 // ---------------------------------------------------------------------------
@@ -352,8 +355,8 @@ export function MeetingScheduler({
   defaultValue,
   onChange,
   defaultHourFormat = '24h',
-  triggerLabel = 'Schedule a meeting',
-  accessibilityLabel = 'Schedule meeting',
+  triggerLabel: triggerLabelProp,
+  accessibilityLabel: accessibilityLabelProp,
   labels,
   disabled,
   open: openProp,
@@ -363,11 +366,14 @@ export function MeetingScheduler({
   maxDate,
   isDateUnavailable,
   weekStartsOn,
-  locale,
+  locale: localeProp,
   style,
   testID,
 }: MeetingSchedulerProps) {
   const theme = useTheme();
+  const { locale, messages } = useMessages(DATE_PICKER_MESSAGES, localeProp);
+  const triggerLabel = triggerLabelProp ?? messages.meetingTrigger;
+  const accessibilityLabel = accessibilityLabelProp ?? messages.meetingLabel;
   const palette = usePickerPalette();
   const { width: windowWidth } = useWindowDimensions();
   const slots = useMemo(() => timeSlots ?? defaultTimeSlots(), [timeSlots]);
@@ -397,8 +403,8 @@ export function MeetingScheduler({
 
   const wide = windowWidth >= WIDE_WIDTH + 32;
   const shadow2xs = theme.isDark ? SHADOW_2XS.dark : SHADOW_2XS.light;
-  const sendLabel = labels?.send ?? 'Send meeting';
-  const durationText = (labels?.duration ?? ((n: number) => `${n} minutes`))(meeting.durationMinutes);
+  const sendLabel = labels?.send ?? messages.send;
+  const durationText = (labels?.duration ?? messages.duration)(meeting.durationMinutes);
   const chevron = useMemo(() => ({ open, color: palette.secondaryText }), [open, palette.secondaryText]);
 
   const hostColumn = (
@@ -505,7 +511,7 @@ export function MeetingScheduler({
                 {formatTriggerDate(pending.date, locale)}
               </Text>
               <Text style={[BODY_MEDIUM, { color: palette.secondaryText }]}>
-                {pending.time ?? labels?.selectTime ?? 'Select a time'}
+                {pending.time ?? labels?.selectTime ?? messages.selectTime}
               </Text>
             </>
           ) : null}

package/src/date-picker/PickerShell.tsx

@@ -7,7 +7,6 @@ import { RiCalendarLine as CalendarIcon } from '../icons/remix/RiCalendarLine';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { useTheme } from '../theme/use-theme';
 import { resolveCalendarPalette, type CalendarPalette } from './palette';
-import type { DatePickerLabels } from './types';
 
 /**
  * The chrome both pickers share (`date-picker/shared.tsx`).
@@ -100,22 +99,24 @@ export function PickerActions({
   onCancel,
   onApply,
   applyDisabled,
-  labels,
+  cancelLabel,
+  applyLabel,
   testID,
 }: {
   onCancel: () => void;
   onApply: () => void;
   applyDisabled: boolean;
-  labels?: DatePickerLabels;
+  cancelLabel: string;
+  applyLabel: string;
   testID?: string;
 }) {
   return (
     <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
       <Button onPress={onCancel} testID={testID ? `${testID}-cancel` : undefined} appearance="subtle" tone="neutral">
-        {labels?.cancel ?? 'Cancel'}
+        {cancelLabel}
       </Button>
       <Button onPress={onApply} disabled={applyDisabled} testID={testID ? `${testID}-apply` : undefined}>
-        {labels?.apply ?? 'Apply'}
+        {applyLabel}
       </Button>
     </View>
   );

package/src/date-picker/calendar-grid.ts

@@ -11,6 +11,7 @@
  */
 
 import type { DateRange, DateRangePreset, WeekStart } from './types';
+import { formatGregorian } from '../locale/format-date';
 
 const MS_PER_DAY = 86_400_000;
 
@@ -130,37 +131,29 @@ export function weekdayLabels(
   const sunday = new Date(2023, 0, 1);
   return Array.from({ length: 7 }, (_, column) => {
     const date = addDays(sunday, (weekStartsOn + column) % 7);
-    const long = format(date, locale, { weekday: 'long' }) ?? FALLBACK_WEEKDAYS[date.getDay()]!;
-    const short = format(date, locale, { weekday: 'short' }) ?? long;
+    const long = formatGregorian(date, locale, { weekday: 'long' }) ?? FALLBACK_WEEKDAYS[date.getDay()]!;
+    const short = formatGregorian(date, locale, { weekday: 'short' }) ?? long;
     return { short: short.slice(0, 2), long };
   });
 }
 
-function format(date: Date, locale: string | undefined, options: Intl.DateTimeFormatOptions): string | null {
-  try {
-    return new Intl.DateTimeFormat(locale, options).format(date);
-  } catch {
-    return null;
-  }
-}
-
 /** `September 2026` — the month panel's title. */
 export function formatMonthTitle(month: Date, locale?: string): string {
   return (
-    format(month, locale, { month: 'long', year: 'numeric' }) ??
+    formatGregorian(month, locale, { month: 'long', year: 'numeric' }) ??
     `${month.getMonth() + 1}/${month.getFullYear()}`
   );
 }
 
 /** `Sep 16, 2026` — the trigger's label. */
 export function formatTriggerDate(date: Date, locale?: string): string {
-  return format(date, locale, { month: 'short', day: 'numeric', year: 'numeric' }) ?? formatChipDate(date);
+  return formatGregorian(date, locale, { month: 'short', day: 'numeric', year: 'numeric' }) ?? formatChipDate(date);
 }
 
 /** `Wednesday, September 16, 2026` — a day button's accessible name. */
 export function formatAccessibleDate(date: Date, locale?: string): string {
   return (
-    format(date, locale, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }) ??
+    formatGregorian(date, locale, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }) ??
     formatChipDate(date)
   );
 }
@@ -334,22 +327,22 @@ export function clampDate(date: Date, { minDate, maxDate }: DateConstraints): Da
   return startOfDay(date);
 }
 
-/** Quick-select presets, relative to `now`. `label` is the English default. */
+/** Quick-select presets, relative to `now`. Their names are `DatePickerMessages.presets`. */
 export function quickSelectPresets(
   now: Date = today(),
-): { key: DateRangePreset; label: string; range: DateRange }[] {
+): { key: DateRangePreset; range: DateRange }[] {
   const lastMonth = addMonths(now, -1);
   const lastYear = new Date(now.getFullYear() - 1, now.getMonth(), 1);
   const yesterday = addDays(now, -1);
   return [
-    { key: 'today', label: 'Today', range: { start: now, end: now } },
-    { key: 'yesterday', label: 'Yesterday', range: { start: yesterday, end: yesterday } },
-    { key: 'lastWeek', label: 'Last week', range: { start: addDays(now, -7), end: yesterday } },
-    { key: 'thisMonth', label: 'This month', range: { start: startOfMonth(now), end: endOfMonth(now) } },
-    { key: 'lastMonth', label: 'Last month', range: { start: startOfMonth(lastMonth), end: endOfMonth(lastMonth) } },
-    { key: 'thisYear', label: 'This year', range: { start: startOfYear(now), end: endOfYear(now) } },
-    { key: 'lastYear', label: 'Last year', range: { start: startOfYear(lastYear), end: endOfYear(lastYear) } },
-    { key: 'allTime', label: 'All time', range: { start: addMonths(now, -120), end: now } },
+    { key: 'today', range: { start: now, end: now } },
+    { key: 'yesterday', range: { start: yesterday, end: yesterday } },
+    { key: 'lastWeek', range: { start: addDays(now, -7), end: yesterday } },
+    { key: 'thisMonth', range: { start: startOfMonth(now), end: endOfMonth(now) } },
+    { key: 'lastMonth', range: { start: startOfMonth(lastMonth), end: endOfMonth(lastMonth) } },
+    { key: 'thisYear', range: { start: startOfYear(now), end: endOfYear(now) } },
+    { key: 'lastYear', range: { start: startOfYear(lastYear), end: endOfYear(lastYear) } },
+    { key: 'allTime', range: { start: addMonths(now, -120), end: now } },
   ];
 }