@dxos/react-ui 0.3.11-main.fbbdc2a → 0.3.11-main.fc97a54

package/dist/types/src/components/ThemeProvider/TranslationsProvider.d.ts

@@ -1,3 +1,4 @@
+import { type Locale } from 'date-fns/locale';
 import { type Resource } from 'i18next';
 import React, { type ReactNode } from 'react';
 export declare const resources: {
@@ -12,9 +13,115 @@ export interface TranslationsProviderProps {
     fallback?: ReactNode;
     resourceExtensions?: Resource[];
     appNs?: string;
+    dtLocale?: Locale;
 }
 export declare const TranslationsContext: React.Context<{
     appNs: string;
+    dtLocale: Locale;
 }>;
-export declare const TranslationsProvider: ({ fallback, resourceExtensions, children, appNs }: TranslationsProviderProps) => JSX.Element;
+export declare const useTranslation: (ns?: string | readonly string[] | string[] | undefined, options?: import("react-i18next").UseTranslationOptions<import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>> | undefined) => {
+    dtLocale: Locale;
+    0: import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>;
+    1: import("i18next").i18n;
+    2: boolean;
+    length: 3;
+    toString: (() => string) & (() => string);
+    toLocaleString: (() => string) & (() => string);
+    pop(): boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>> | undefined;
+    push(...items: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]): number;
+    concat(...items: ConcatArray<boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>>[]): (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[];
+    concat(...items: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>> | ConcatArray<boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>>)[]): (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[];
+    join(separator?: string | undefined): string;
+    reverse(): (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[];
+    shift(): boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>> | undefined;
+    slice(start?: number | undefined, end?: number | undefined): (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[];
+    sort(compareFn?: ((a: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, b: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>) => number) | undefined): import("react-i18next").UseTranslationResponse<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>;
+    splice(start: number, deleteCount?: number | undefined): (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[];
+    splice(start: number, deleteCount: number, ...items: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]): (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[];
+    unshift(...items: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]): number;
+    indexOf(searchElement: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, fromIndex?: number | undefined): number;
+    lastIndexOf(searchElement: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, fromIndex?: number | undefined): number;
+    every<S extends boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>>(predicate: (value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, index: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => value is S, thisArg?: any): this is S[];
+    every(predicate: (value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, index: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => unknown, thisArg?: any): boolean;
+    some(predicate: (value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, index: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => unknown, thisArg?: any): boolean;
+    forEach(callbackfn: (value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, index: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => void, thisArg?: any): void;
+    map<U>(callbackfn: (value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, index: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => U, thisArg?: any): U[];
+    filter<S_1 extends boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>>(predicate: (value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, index: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => value is S_1, thisArg?: any): S_1[];
+    filter(predicate: (value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, index: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => unknown, thisArg?: any): (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[];
+    reduce(callbackfn: (previousValue: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, currentValue: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, currentIndex: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>): boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>;
+    reduce(callbackfn: (previousValue: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, currentValue: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, currentIndex: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, initialValue: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>): boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>;
+    reduce<U_1>(callbackfn: (previousValue: U_1, currentValue: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, currentIndex: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => U_1, initialValue: U_1): U_1;
+    reduceRight(callbackfn: (previousValue: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, currentValue: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, currentIndex: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>): boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>;
+    reduceRight(callbackfn: (previousValue: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, currentValue: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, currentIndex: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, initialValue: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>): boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>;
+    reduceRight<U_2>(callbackfn: (previousValue: U_2, currentValue: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, currentIndex: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => U_2, initialValue: U_2): U_2;
+    find<S_2 extends boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>>(predicate: (value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, index: number, obj: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => value is S_2, thisArg?: any): S_2 | undefined;
+    find(predicate: (value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, index: number, obj: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => unknown, thisArg?: any): boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>> | undefined;
+    findIndex(predicate: (value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, index: number, obj: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => unknown, thisArg?: any): number;
+    fill(value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, start?: number | undefined, end?: number | undefined): import("react-i18next").UseTranslationResponse<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>;
+    copyWithin(target: number, start: number, end?: number | undefined): import("react-i18next").UseTranslationResponse<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>;
+    entries(): IterableIterator<[number, boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>]>;
+    keys(): IterableIterator<number>;
+    values(): IterableIterator<boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>>;
+    includes(searchElement: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, fromIndex?: number | undefined): boolean;
+    flatMap<U_3, This = undefined>(callback: (this: This, value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, index: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => U_3 | readonly U_3[], thisArg?: This | undefined): U_3[];
+    flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
+    at(index: number): boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>> | undefined;
+    findLast<S_3 extends boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>>(predicate: (value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, index: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => value is S_3, thisArg?: any): S_3 | undefined;
+    findLast(predicate: (value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, index: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => unknown, thisArg?: any): boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>> | undefined;
+    findLastIndex(predicate: (value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, index: number, array: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]) => unknown, thisArg?: any): number;
+    toReversed(): (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[];
+    toSorted(compareFn?: ((a: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>, b: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>) => number) | undefined): (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[];
+    toSpliced(start: number, deleteCount: number, ...items: (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[]): (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[];
+    toSpliced(start: number, deleteCount?: number | undefined): (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[];
+    with(index: number, value: boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>): (boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>)[];
+    [Symbol.iterator](): IterableIterator<boolean | import("i18next").i18n | import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>>;
+    [Symbol.unscopables]: {
+        [x: number]: boolean | undefined;
+        length?: boolean | undefined;
+        toString?: boolean | undefined;
+        toLocaleString?: boolean | undefined;
+        pop?: boolean | undefined;
+        push?: boolean | undefined;
+        concat?: boolean | undefined;
+        join?: boolean | undefined;
+        reverse?: boolean | undefined;
+        shift?: boolean | undefined;
+        slice?: boolean | undefined;
+        sort?: boolean | undefined;
+        splice?: boolean | undefined;
+        unshift?: boolean | undefined;
+        indexOf?: boolean | undefined;
+        lastIndexOf?: boolean | undefined;
+        every?: boolean | undefined;
+        some?: boolean | undefined;
+        forEach?: boolean | undefined;
+        map?: boolean | undefined;
+        filter?: boolean | undefined;
+        reduce?: boolean | undefined;
+        reduceRight?: boolean | undefined;
+        find?: boolean | undefined;
+        findIndex?: boolean | undefined;
+        fill?: boolean | undefined;
+        copyWithin?: boolean | undefined;
+        entries?: boolean | undefined;
+        keys?: boolean | undefined;
+        values?: boolean | undefined;
+        includes?: boolean | undefined;
+        flatMap?: boolean | undefined;
+        flat?: boolean | undefined;
+        at?: boolean | undefined;
+        findLast?: boolean | undefined;
+        findLastIndex?: boolean | undefined;
+        toReversed?: boolean | undefined;
+        toSorted?: boolean | undefined;
+        toSpliced?: boolean | undefined;
+        with?: boolean | undefined;
+        [Symbol.iterator]?: boolean | undefined;
+        readonly [Symbol.unscopables]?: boolean | undefined;
+    };
+    t: import("react-i18next").TFunction<import("react-i18next").Namespace<string>, import("react-i18next").KeyPrefix<import("react-i18next").Namespace<string>>>;
+    i18n: import("i18next").i18n;
+    ready: boolean;
+};
+export declare const TranslationsProvider: ({ fallback, resourceExtensions, children, appNs, dtLocale, }: TranslationsProviderProps) => JSX.Element;
 //# sourceMappingURL=TranslationsProvider.d.ts.map

package/dist/types/src/components/ThemeProvider/TranslationsProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TranslationsProvider.d.ts","sourceRoot":"","sources":["../../../../../src/components/ThemeProvider/TranslationsProvider.tsx"],"names":[],"mappings":"AAIA,OAAgB,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAgD,MAAM,OAAO,CAAC;AAM5F,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAC;AAWX,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,mBAAmB;;EAE9B,CAAC;AAEH,eAAO,MAAM,oBAAoB,sDAAuD,yBAAyB,gBAuBhH,CAAC"}
+{"version":3,"file":"TranslationsProvider.d.ts","sourceRoot":"","sources":["../../../../../src/components/ThemeProvider/TranslationsProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAwB,KAAK,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAgB,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAA4D,MAAM,OAAO,CAAC;AAOxG,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAC;AAWX,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAGrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,mBAAmB;;;EAG9B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAI1B,CAAC;AAEF,eAAO,MAAM,oBAAoB,iEAM9B,yBAAyB,gBAuB3B,CAAC"}

package/dist/types/src/components/ThemeProvider/index.d.ts

@@ -1,2 +1,3 @@
 export * from './ThemeProvider';
+export { useTranslation } from './TranslationsProvider';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/ThemeProvider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ThemeProvider/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ThemeProvider/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/types/src/components/index.d.ts

@@ -6,7 +6,7 @@ export * from './Dialogs';
 export * from './Menus';
 export * from './Input';
 export * from './Link';
-export * from './Lists';
+export * from './List';
 export * from './Main';
 export * from './Message';
 export * from './Popover';

package/dist/types/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAE1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAE1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC"}

package/dist/types/src/hooks/useTranslationsContext.d.ts

@@ -1,4 +1,5 @@
 export declare const useTranslationsContext: () => {
     appNs: string;
+    dtLocale: import("date-fns/types").Locale;
 };
 //# sourceMappingURL=useTranslationsContext.d.ts.map

package/dist/types/src/hooks/useTranslationsContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTranslationsContext.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTranslationsContext.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,sBAAsB;;CAAwC,CAAC"}
+{"version":3,"file":"useTranslationsContext.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTranslationsContext.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,sBAAsB;;;CAAwC,CAAC"}

package/dist/types/src/index.d.ts

@@ -1,5 +1,5 @@
 export type { TFunction } from 'i18next';
-export { useTranslation, Trans } from 'react-i18next';
+export { Trans } from 'react-i18next';
 export * from '@dxos/react-ui-types';
 export * from '@dxos/react-hooks';
 export * from './components';

package/dist/types/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtD,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAElC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAElC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.3.11-main.fbbdc2a",
+  "version": "0.3.11-main.fc97a54",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -13,6 +13,7 @@
     "src"
   ],
   "dependencies": {
+    "@fluentui/react-tabster": "^9.18.0",
     "@radix-ui/react-alert-dialog": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.2",
     "@radix-ui/react-checkbox": "^1.0.3",
@@ -34,31 +35,33 @@
     "@radix-ui/react-toolbar": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.5",
     "@radix-ui/react-use-controllable-state": "^1.0.0",
+    "date-fns": "^3.3.1",
     "i18next": "^21.10.0",
     "jdenticon": "^3.2.0",
-    "keyborg": "^2.0.0",
+    "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
-    "@dxos/react-hooks": "0.3.11-main.fbbdc2a",
-    "@dxos/react-input": "0.3.11-main.fbbdc2a",
-    "@dxos/react-list": "0.3.11-main.fbbdc2a",
-    "@dxos/react-ui-types": "0.3.11-main.fbbdc2a"
+    "@dxos/react-hooks": "0.3.11-main.fc97a54",
+    "@dxos/react-input": "0.3.11-main.fc97a54",
+    "@dxos/react-ui-types": "0.3.11-main.fc97a54",
+    "@dxos/react-list": "0.3.11-main.fc97a54"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.1",
     "@dnd-kit/utilities": "^3.2.0",
-    "@faker-js/faker": "^8.0.2",
     "@phosphor-icons/react": "^2.0.5",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite": "^4.3.9",
+    "vite": "^5.0.12",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/react-ui-theme": "0.3.11-main.fbbdc2a"
+    "@dxos/random": "0.3.11-main.fc97a54",
+    "@dxos/react-ui-theme": "0.3.11-main.fc97a54"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
+    "date-fns": "^3.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/components/Avatars/Avatar.tsx

@@ -21,7 +21,7 @@ import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
 type AvatarVariant = 'square' | 'circle';
-type AvatarStatus = 'active' | 'inactive' | 'error' | 'warning';
+type AvatarStatus = 'active' | 'inactive' | 'current' | 'error' | 'warning' | 'internal';
 type AvatarAnimation = 'pulse' | 'none';
 
 export type AvatarRootProps = PropsWithChildren<Partial<AvatarContextValue>>;
@@ -37,6 +37,7 @@ type AvatarContextValue = {
   inGroup?: boolean;
   color?: string;
 };
+
 const AVATAR_NAME = 'Avatar';
 const [AvatarProvider, useAvatarContext] = createContext<AvatarContextValue>(AVATAR_NAME);
 

package/src/components/Buttons/Button.stories.tsx

@@ -7,7 +7,7 @@ import '@dxosTheme';
 import { CaretLeft, CaretRight } from '@phosphor-icons/react';
 import React, { type PropsWithChildren } from 'react';
 
-import { chromeSurface, groupSurface, mx, surfaceElevation } from '@dxos/react-ui-theme';
+import { modalSurface, groupSurface, mx, surfaceElevation } from '@dxos/react-ui-theme';
 
 import { Button, ButtonGroup, type ButtonProps } from './Button';
 import { withTheme } from '../../testing';
@@ -46,7 +46,7 @@ const Container = ({ children }: PropsWithChildren<{}>) => (
       role='group'
       className={mx(
         'flex flex-col gap-4 mbe-4 p-4 rounded-lg',
-        chromeSurface,
+        modalSurface,
         surfaceElevation({ elevation: 'chrome' }),
       )}
     >

package/src/components/Input/Input.stories.tsx

@@ -6,7 +6,7 @@ import '@dxosTheme';
 
 import React from 'react';
 
-import { baseSurface, chromeSurface, groupSurface, mx, surfaceElevation } from '@dxos/react-ui-theme';
+import { baseSurface, modalSurface, groupSurface, mx, surfaceElevation } from '@dxos/react-ui-theme';
 import { type MessageValence } from '@dxos/react-ui-types';
 
 import { Input } from './Input';
@@ -64,7 +64,7 @@ const StoryInput = (props: StoryInputProps) => {
       <div className={mx(groupSurface, 'p-4 rounded-lg', surfaceElevation({ elevation: 'group' }))}>
         <StoryInputContent {...props} />
       </div>
-      <div className={mx(chromeSurface, 'p-4 rounded-lg', surfaceElevation({ elevation: 'chrome' }))}>
+      <div className={mx(modalSurface, 'p-4 rounded-lg', surfaceElevation({ elevation: 'chrome' }))}>
         <StoryInputContent {...props} />
       </div>
     </div>

package/src/components/{Lists → List}/List.stories.tsx

@@ -7,10 +7,18 @@ import '@dxosTheme';
 import { DndContext, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core';
 import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { DotsSixVertical, PushPin } from '@phosphor-icons/react';
 import React, { type FC, type ReactNode, useState } from 'react';
 
-import { getSize, mx, surfaceElevation } from '@dxos/react-ui-theme';
+import {
+  getSize,
+  ghostHover,
+  ghostSelected,
+  ghostSelectedTrackingInterFromNormal,
+  mx,
+  surfaceElevation,
+} from '@dxos/react-ui-theme';
 
 import { List, ListItem, type ListProps, type ListScopedProps } from './List';
 import { withTheme } from '../../testing';
@@ -106,6 +114,7 @@ const ManySizesDraggableListItem = ({
     </ListItem.Root>
   );
 };
+
 export const ManySizesDraggable = {
   render: ({ ...args }) => {
     const [items, setItems] = useState(
@@ -183,6 +192,45 @@ export const Collapsible = {
   },
   args: {
     variant: 'unordered',
-    toggleOpenLabel: 'Open/close storybook list item',
+    // toggleOpenLabel: 'Open/close storybook list item', // TODO(burdon): ???
+  },
+};
+
+export const SelectableListbox = {
+  render: () => {
+    const [selectedId, setSelectedId] = useState<string>();
+    const domAttributes = useArrowNavigationGroup({ axis: 'vertical' });
+    const [items, _setItems] = useState(
+      [...Array(12)].map((_, index) => ({
+        id: `listItem-${index}`,
+        text: `List item ${index + 1}`,
+      })),
+    );
+
+    const handleKeyUp = (event: any, id: string) => {
+      switch (event.key) {
+        case ' ':
+        case 'Enter': {
+          setSelectedId(id);
+        }
+      }
+    };
+
+    return (
+      <List selectable {...domAttributes}>
+        {items.map(({ id, text }) => (
+          <ListItem.Root
+            key={id}
+            tabIndex={0}
+            selected={selectedId === id}
+            classNames={mx('items-center', ghostHover, ghostSelected, ghostSelectedTrackingInterFromNormal)}
+            onClick={() => setSelectedId(id)}
+            onKeyUp={(event) => handleKeyUp(event, id)}
+          >
+            <ListItem.Heading classNames='grow'>Lorem ipsum dolor sit amet</ListItem.Heading>
+          </ListItem.Root>
+        ))}
+      </List>
+    );
   },
 };

package/src/components/Popover/Popover.stories.tsx

@@ -4,9 +4,10 @@
 
 import '@dxosTheme';
 
-import { faker } from '@faker-js/faker';
 import React, { type PropsWithChildren, type ReactNode } from 'react';
 
+import { faker } from '@dxos/random';
+
 import { Popover } from './Popover';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -4,9 +4,9 @@
 
 import '@dxosTheme';
 
-import { faker } from '@faker-js/faker';
 import React, { type PropsWithChildren } from 'react';
 
+import { faker } from '@dxos/random';
 import { groupSurface, surfaceElevation } from '@dxos/react-ui-theme';
 
 import { ScrollArea } from './ScrollArea';

package/src/components/Select/Select.stories.tsx

@@ -4,9 +4,9 @@
 
 import '@dxosTheme';
 
-import { faker } from '@faker-js/faker';
 import React, { type FC, type PropsWithChildren, useState } from 'react';
 
+import { faker } from '@dxos/random';
 import { type Density } from '@dxos/react-ui-types';
 
 import { Select } from './Select';

package/src/components/Select/Select.tsx

@@ -32,18 +32,20 @@ const SelectPortal = SelectPrimitive.Portal;
 
 type SelectTriggerButtonProps = Omit<ButtonProps, 'children'> & Pick<SelectValueProps, 'placeholder'>;
 
-const SelectTriggerButton = forwardRef<HTMLButtonElement, ButtonProps>(({ placeholder, ...props }, forwardedRef) => {
-  return (
-    <SelectPrimitive.Trigger asChild ref={forwardedRef}>
-      <Button {...props}>
-        <SelectPrimitive.Value placeholder={placeholder} />
-        <SelectPrimitive.Icon className='pis-2'>
-          <CaretDown weight='bold' />
-        </SelectPrimitive.Icon>
-      </Button>
-    </SelectPrimitive.Trigger>
-  );
-});
+const SelectTriggerButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, placeholder, ...props }, forwardedRef) => {
+    return (
+      <SelectPrimitive.Trigger asChild ref={forwardedRef}>
+        <Button {...props}>
+          <SelectPrimitive.Value placeholder={placeholder}>{children}</SelectPrimitive.Value>
+          <SelectPrimitive.Icon className='pis-2'>
+            <CaretDown weight='bold' />
+          </SelectPrimitive.Icon>
+        </Button>
+      </SelectPrimitive.Trigger>
+    );
+  },
+);
 
 type SelectContentProps = ThemedClassName<SelectPrimitive.SelectContentProps>;
 

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -58,6 +58,7 @@ export const ThemeProvider = ({
       return () => kb.unsubscribe(handleInputModalityChange);
     }
   }, []);
+
   return (
     <ThemeContext.Provider value={{ tx, themeMode, hasIosKeyboard: hasIosKeyboard() }}>
       <TranslationsProvider

package/src/components/ThemeProvider/TranslationsProvider.tsx

@@ -2,12 +2,14 @@
 // Copyright 2022 DXOS.org
 //
 
+import { enUS as dtLocaleEnUs, type Locale } from 'date-fns/locale';
 import i18Next, { type Resource } from 'i18next';
-import React, { type ReactNode, useEffect, createContext, useState, Suspense } from 'react';
-import { initReactI18next } from 'react-i18next';
+import React, { type ReactNode, useEffect, createContext, useState, Suspense, useContext } from 'react';
+import { initReactI18next, useTranslation as useI18NextTranslation } from 'react-i18next';
 
 const initialLng = 'en-US';
 const initialNs = 'dxos-common';
+const initialDtLocale = dtLocaleEnUs;
 
 export const resources = {
   [initialLng]: {
@@ -28,16 +30,32 @@ void i18Next.use(initReactI18next).init({
 
 export interface TranslationsProviderProps {
   children?: ReactNode;
+  // TODO(wittjosiah): Rename to `placeholder` to match ClientProvider?
+  //   Placeholder => loading, fallback => error.
   fallback?: ReactNode;
   resourceExtensions?: Resource[];
   appNs?: string;
+  dtLocale?: Locale;
 }
 
 export const TranslationsContext = createContext({
   appNs: initialNs,
+  dtLocale: initialDtLocale,
 });
 
-export const TranslationsProvider = ({ fallback, resourceExtensions, children, appNs }: TranslationsProviderProps) => {
+export const useTranslation = (...args: Parameters<typeof useI18NextTranslation>) => {
+  const result = useI18NextTranslation(...args);
+  const { dtLocale } = useContext(TranslationsContext);
+  return { ...result, dtLocale };
+};
+
+export const TranslationsProvider = ({
+  fallback,
+  resourceExtensions,
+  children,
+  appNs,
+  dtLocale,
+}: TranslationsProviderProps) => {
   const [loaded, setLoaded] = useState(false);
   useEffect(() => {
     setLoaded(false);
@@ -56,7 +74,7 @@ export const TranslationsProvider = ({ fallback, resourceExtensions, children, a
   // TODO(thure): This is not ideal, but i18next was causing `Suspense` to not render the fallback even when the child was asking for namespaces yet to be added.
   // TODO(burdon): Fallbacks should only appear after a short delay, and if the displayed then be visible for 500mx to avoid startup flickering.
   return (
-    <TranslationsContext.Provider value={{ appNs: appNs ?? initialNs }}>
+    <TranslationsContext.Provider value={{ appNs: appNs ?? initialNs, dtLocale: dtLocale ?? initialDtLocale }}>
       <Suspense fallback={fallback}>{loaded ? children : fallback}</Suspense>
     </TranslationsContext.Provider>
   );

package/src/components/ThemeProvider/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './ThemeProvider';
+export { useTranslation } from './TranslationsProvider';

package/src/components/index.ts

@@ -10,7 +10,7 @@ export * from './Dialogs';
 export * from './Menus';
 export * from './Input';
 export * from './Link';
-export * from './Lists';
+export * from './List';
 export * from './Main';
 export * from './Message';
 export * from './Popover';

package/src/index.ts

@@ -3,7 +3,7 @@
 //
 
 export type { TFunction } from 'i18next';
-export { useTranslation, Trans } from 'react-i18next';
+export { Trans } from 'react-i18next';
 export * from '@dxos/react-ui-types';
 export * from '@dxos/react-hooks';
 

package/src/playground/Surfaces.stories.tsx

@@ -8,13 +8,13 @@ import React, { type PropsWithChildren } from 'react';
 
 import {
   baseSurface,
-  chromeSurface,
+  modalSurface,
   groupSurface,
   mx,
   surfaceElevation,
   fixedSurface,
   fixedBorder,
-  inputSurface,
+  attentionSurface,
 } from '@dxos/react-ui-theme';
 
 import { withTheme } from '../testing';
@@ -25,14 +25,14 @@ const Surface = ({
 }: PropsWithChildren & { level: 'base' | 'group' | 'chrome' | 'fixed' | 'input' }) => {
   const surface =
     level === 'chrome'
-      ? [chromeSurface, surfaceElevation({ elevation: 'chrome' })]
+      ? [modalSurface, surfaceElevation({ elevation: 'chrome' })]
       : level === 'group'
-      ? [groupSurface, surfaceElevation({ elevation: 'group' })]
-      : level === 'input'
-      ? [inputSurface, surfaceElevation({ elevation: 'group' })]
-      : level === 'fixed'
-      ? [fixedSurface, fixedBorder, 'border', surfaceElevation({ elevation: 'chrome' })]
-      : [baseSurface];
+        ? [groupSurface, surfaceElevation({ elevation: 'group' })]
+        : level === 'input'
+          ? [attentionSurface, surfaceElevation({ elevation: 'group' })]
+          : level === 'fixed'
+            ? [fixedSurface, fixedBorder, 'border', surfaceElevation({ elevation: 'chrome' })]
+            : [baseSurface];
 
   return (
     <div