@oxyhq/services 6.9.13 → 6.9.15

package/lib/typescript/ui/components/TextField/helpers.d.ts

@@ -0,0 +1,96 @@
+import type { AdornmentConfig } from './Adornment/types';
+import type { TextInputLabelProp } from './types';
+import type { InternalTheme } from "../types";
+type PaddingProps = {
+    height: number | null;
+    labelHalfHeight: number;
+    multiline: boolean | null;
+    dense: boolean | null;
+    topPosition: number;
+    fontSize: number;
+    lineHeight?: number;
+    label?: TextInputLabelProp | null;
+    scale: number;
+    offset: number;
+    isAndroid: boolean;
+    styles: {
+        paddingTop: number;
+        paddingBottom: number;
+    };
+};
+type AdjProps = PaddingProps & {
+    pad: number;
+};
+export type Padding = {
+    paddingTop: number;
+    paddingBottom: number;
+};
+export declare const calculateLabelTopPosition: (labelHeight: number, height?: number, optionalPadding?: number) => number;
+export declare const calculateInputHeight: (labelHeight: number, height: any, minHeight: number) => number;
+export declare const calculatePadding: (props: PaddingProps) => number;
+export declare const adjustPaddingOut: ({ pad, multiline, label, scale, height, fontSize, lineHeight, dense, offset, isAndroid, }: AdjProps) => Padding;
+export declare const adjustPaddingFlat: ({ pad, scale, multiline, label, height, offset, dense, fontSize, isAndroid, styles, }: AdjProps) => Padding;
+export declare function calculateFlatAffixTopPosition({ height, paddingTop, paddingBottom, affixHeight, }: {
+    height: number;
+    paddingTop: number;
+    paddingBottom: number;
+    affixHeight: number;
+}): number;
+export declare function calculateOutlinedIconAndAffixTopPosition({ height, affixHeight, labelYOffset, }: {
+    height: number;
+    affixHeight: number;
+    labelYOffset: number;
+}): number;
+export declare const calculateFlatInputHorizontalPadding: ({ adornmentConfig, isV3, }: {
+    adornmentConfig: AdornmentConfig[];
+    isV3?: boolean;
+}) => {
+    paddingLeft: number;
+    paddingRight: number;
+};
+export declare const getFlatInputColors: ({ underlineColor, activeUnderlineColor, customSelectionColor, textColor, disabled, error, theme, }: {
+    underlineColor?: string;
+    activeUnderlineColor?: string;
+    customSelectionColor?: string;
+    textColor?: string;
+    disabled?: boolean;
+    error?: boolean;
+    theme: InternalTheme;
+}) => {
+    inputTextColor: string;
+    activeColor: string;
+    underlineColorCustom: string;
+    placeholderColor: string;
+    selectionColor: string;
+    errorColor: string;
+    backgroundColor: string | undefined;
+};
+export declare const getOutlinedInputColors: ({ activeOutlineColor, customOutlineColor, customSelectionColor, textColor, disabled, error, theme, }: {
+    activeOutlineColor?: string;
+    customOutlineColor?: string;
+    customSelectionColor?: string;
+    textColor?: string;
+    disabled?: boolean;
+    error?: boolean;
+    theme: InternalTheme;
+}) => {
+    inputTextColor: string;
+    activeColor: string;
+    outlineColor: string | undefined;
+    placeholderColor: string;
+    selectionColor: string;
+    errorColor: string;
+};
+export declare const getConstants: (isV3?: boolean) => {
+    AFFIX_OFFSET: number;
+    ICON_OFFSET: number;
+    LABEL_PADDING_TOP: number;
+    LABEL_PADDING_HORIZONTAL: number;
+    FLAT_INPUT_OFFSET: number;
+    MIN_HEIGHT: number;
+    INPUT_PADDING_HORIZONTAL: number;
+    ADORNMENT_OFFSET: number;
+    OUTLINED_INPUT_OFFSET: number;
+    MIN_WIDTH: number;
+};
+export {};

package/lib/typescript/ui/components/TextField/types.d.ts

@@ -0,0 +1,155 @@
+import type * as React from 'react';
+import type { TextInput as NativeTextInput, Animated, TextStyle, LayoutChangeEvent, ColorValue, StyleProp, ViewProps, ViewStyle, NativeSyntheticEvent, TextLayoutEventData } from 'react-native';
+import type { $Omit, InternalTheme, ThemeProp } from '../types';
+export type TextFieldLabelProp = string | React.ReactElement;
+export type TextInputLabelProp = TextFieldLabelProp;
+type TextInputProps = React.ComponentPropsWithRef<typeof NativeTextInput> & {
+    mode?: 'flat' | 'outlined';
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    disabled?: boolean;
+    label?: TextFieldLabelProp;
+    placeholder?: string;
+    error?: boolean;
+    onChangeText?: Function;
+    selectionColor?: string;
+    cursorColor?: string;
+    underlineColor?: string;
+    activeUnderlineColor?: string;
+    outlineColor?: string;
+    activeOutlineColor?: string;
+    textColor?: string;
+    dense?: boolean;
+    multiline?: boolean;
+    numberOfLines?: number;
+    onFocus?: (args: NativeSyntheticEvent<unknown>) => void;
+    onBlur?: (args: NativeSyntheticEvent<unknown>) => void;
+    render?: (props: RenderProps) => React.ReactNode;
+    value?: string;
+    style?: StyleProp<TextStyle>;
+    theme?: ThemeProp;
+    testID?: string;
+    contentStyle?: StyleProp<TextStyle>;
+    outlineStyle?: StyleProp<ViewStyle>;
+    underlineStyle?: StyleProp<ViewStyle>;
+    scaledLabel?: boolean;
+};
+export type RenderProps = {
+    ref: (a?: NativeTextInput | null) => void;
+    onChangeText?: (a: string) => void;
+    placeholder?: string;
+    placeholderTextColor?: ColorValue;
+    editable?: boolean;
+    selectionColor?: string;
+    cursorColor?: string;
+    onFocus?: (args: NativeSyntheticEvent<unknown>) => void;
+    onBlur?: (args: NativeSyntheticEvent<unknown>) => void;
+    underlineColorAndroid?: string;
+    onLayout?: (args: LayoutChangeEvent) => void;
+    style: any;
+    multiline?: boolean;
+    numberOfLines?: number;
+    value?: string;
+    adjustsFontSizeToFit?: boolean;
+    testID?: string;
+};
+type TextInputTypesWithoutMode = $Omit<TextInputProps, 'mode'>;
+export type State = {
+    labeled: Animated.Value;
+    error: Animated.Value;
+    focused: boolean;
+    displayPlaceholder: boolean;
+    value?: string;
+    labelTextLayout: {
+        width: number;
+    };
+    labelLayout: {
+        measured: boolean;
+        width: number;
+        height: number;
+    };
+    leftLayout: {
+        height: number | null;
+        width: number | null;
+    };
+    rightLayout: {
+        height: number | null;
+        width: number | null;
+    };
+    inputContainerLayout: {
+        width: number;
+    };
+    contentStyle?: StyleProp<ViewProps>;
+};
+export type ChildTextInputProps = {
+    parentState: State;
+    innerRef: (ref?: NativeTextInput | null) => void;
+    onFocus?: (args: NativeSyntheticEvent<unknown>) => void;
+    onBlur?: (args: NativeSyntheticEvent<unknown>) => void;
+    forceFocus: () => void;
+    onChangeText?: (value: string) => void;
+    onInputLayout: (event: LayoutChangeEvent) => void;
+    onLayoutAnimatedText: (args: LayoutChangeEvent) => void;
+    onLabelTextLayout: (event: NativeSyntheticEvent<TextLayoutEventData>) => void;
+    onLeftAffixLayoutChange: (event: LayoutChangeEvent) => void;
+    onRightAffixLayoutChange: (event: LayoutChangeEvent) => void;
+} & $Omit<TextInputTypesWithoutMode, 'theme'> & {
+    theme: InternalTheme;
+};
+export type LabelProps = {
+    mode?: 'flat' | 'outlined';
+    placeholderStyle: any;
+    placeholderOpacity: number | Animated.Value | Animated.AnimatedInterpolation<number>;
+    baseLabelTranslateX: number;
+    baseLabelTranslateY: number;
+    wiggleOffsetX: number;
+    labelScale: number;
+    fontSize: number;
+    lineHeight?: number | undefined;
+    fontWeight: TextStyle['fontWeight'];
+    font: any;
+    topPosition: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    labelTranslationXOffset?: number;
+    placeholderColor: string | null;
+    backgroundColor?: ColorValue;
+    label?: TextFieldLabelProp | null;
+    hasActiveOutline?: boolean | null;
+    activeColor: string;
+    errorColor?: string;
+    labelError?: boolean | null;
+    onLayoutAnimatedText: (args: LayoutChangeEvent) => void;
+    onLabelTextLayout: (event: NativeSyntheticEvent<TextLayoutEventData>) => void;
+    roundness: number;
+    maxFontSizeMultiplier?: number | undefined | null;
+    testID?: string;
+    contentStyle?: StyleProp<ViewProps>;
+    theme?: ThemeProp;
+};
+export type InputLabelProps = {
+    labeled: Animated.Value;
+    error: Animated.Value;
+    focused: boolean;
+    wiggle: boolean;
+    opacity: number;
+    labelLayoutMeasured: boolean;
+    labelLayoutWidth: number;
+    labelLayoutHeight: number;
+    inputContainerLayout: {
+        width: number;
+    };
+    labelBackground?: any;
+    maxFontSizeMultiplier?: number | undefined | null;
+    isV3?: boolean;
+    scaledLabel?: boolean;
+} & LabelProps;
+export type LabelBackgroundProps = {
+    labelStyle: any;
+    labeled: Animated.Value;
+    labelLayoutWidth: number;
+    labelLayoutHeight: number;
+    maxFontSizeMultiplier?: number | undefined | null;
+    theme?: ThemeProp;
+} & LabelProps;
+export {};

package/lib/typescript/ui/components/TextField.d.ts

@@ -0,0 +1,191 @@
+import * as React from 'react';
+import { type StyleProp, TextInput as NativeTextInput, type TextStyle, type ViewStyle } from 'react-native';
+import { type Props as TextFieldAffixProps } from './TextField/Adornment/TextFieldAffix';
+import { type Props as TextFieldIconProps } from './TextField/Adornment/TextFieldIcon';
+import type { RenderProps, TextFieldLabelProp } from './TextField/types';
+import type { ThemeProp } from "./types";
+export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
+    /**
+     * Mode of the TextInput.
+     * - `flat` - flat input with an underline.
+     * - `outlined` - input with an outline.
+     *
+     * In `outlined` mode, the background color of the label is derived from `colors?.background` in theme or the `backgroundColor` style.
+     * This component render TextInputOutlined or TextInputFlat based on that props
+     */
+    mode?: 'flat' | 'outlined';
+    /**
+     * The adornment placed on the left side of the input. It can be either `TextField.Icon` or `TextField.Affix`.
+     */
+    left?: React.ReactNode;
+    /**
+     * The adornment placed on the right side of the input. It can be either `TextField.Icon` or `TextField.Affix`.
+     */
+    right?: React.ReactNode;
+    /**
+     * If true, user won't be able to interact with the component.
+     */
+    disabled?: boolean;
+    /**
+     * The text or component to use for the floating label.
+     */
+    label?: TextFieldLabelProp;
+    /**
+     * Placeholder for the input.
+     */
+    placeholder?: string;
+    /**
+     * Whether to style the TextInput with error style.
+     */
+    error?: boolean;
+    /**
+     * Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.
+     */
+    onChangeText?: Function;
+    /**
+     * Selection color of the input. On iOS, it sets both the selection color and cursor color.
+     * On Android, it sets only the selection color.
+     */
+    selectionColor?: string;
+    /**
+     * @platform Android only
+     * Cursor (or "caret") color of the input on Android.
+     * This property has no effect on iOS.
+     */
+    cursorColor?: string;
+    /**
+     * Inactive underline color of the input.
+     */
+    underlineColor?: string;
+    /**
+     * Active underline color of the input.
+     */
+    activeUnderlineColor?: string;
+    /**
+     * Inactive outline color of the input.
+     */
+    outlineColor?: string;
+    /**
+     * Active outline color of the input.
+     */
+    activeOutlineColor?: string;
+    /**
+     * Color of the text in the input.
+     */
+    textColor?: string;
+    /**
+     * Sets min height with densed layout. For `TextField` in `flat` mode
+     * height is `64dp` or in dense layout - `52dp` with label or `40dp` without label.
+     * For `TextField` in `outlined` mode
+     * height is `56dp` or in dense layout - `40dp` regardless of label.
+     * When you apply `height` prop in style the `dense` prop affects only `paddingVertical` inside `TextField`
+     */
+    dense?: boolean;
+    /**
+     * Whether the input can have multiple lines.
+     */
+    multiline?: boolean;
+    /**
+     * @platform Android only
+     * The number of lines to show in the input (Android only).
+     */
+    numberOfLines?: number;
+    /**
+     * Callback that is called when the text input is focused.
+     */
+    onFocus?: (args: any) => void;
+    /**
+     * Callback that is called when the text input is blurred.
+     */
+    onBlur?: (args: any) => void;
+    /**
+     *
+     * Callback to render a custom input component such as `react-native-text-input-mask`
+     * instead of the default `TextInput` component from `react-native`.
+     *
+     * Example:
+     * ```js
+     * <TextField
+     *   label="Phone number"
+     *   render={props =>
+     *     <TextInputMask
+     *       {...props}
+     *       mask="+[00] [000] [000] [000]"
+     *     />
+     *   }
+     * />
+     * ```
+     */
+    render?: (props: RenderProps) => React.ReactNode;
+    /**
+     * Value of the text input.
+     */
+    value?: string;
+    /**
+     * Pass `fontSize` prop to modify the font size inside `TextField`.
+     * Pass `height` prop to set `TextField` height. When `height` is passed,
+     * `dense` prop will affect only input's `paddingVertical`.
+     * Pass `paddingHorizontal` to modify horizontal padding.
+     * This can be used to get MD Guidelines v1 TextInput look.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+    /**
+     * testID to be used on tests.
+     */
+    testID?: string;
+    /**
+     * Pass custom style directly to the input itself.
+     * Overrides input style
+     * Example: `paddingLeft`, `backgroundColor`
+     */
+    contentStyle?: StyleProp<TextStyle>;
+    /**
+     * Pass style to override the default style of outlined wrapper.
+     * Overrides style when mode is set to `outlined`
+     * Example: `borderRadius`, `borderColor`
+     */
+    outlineStyle?: StyleProp<ViewStyle>;
+    /**
+     * Pass style to override the default style of underlined wrapper.
+     * Overrides style when mode is set to `flat`
+     * Example: `borderRadius`, `borderColor`
+     */
+    underlineStyle?: StyleProp<ViewStyle>;
+};
+interface CompoundedComponent extends React.ForwardRefExoticComponent<Props & React.RefAttributes<TextFieldHandles>> {
+    Icon: React.FunctionComponent<TextFieldIconProps>;
+    Affix: React.FunctionComponent<Partial<TextFieldAffixProps>>;
+}
+type TextFieldHandles = Pick<NativeTextInput, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps' | 'setSelection'>;
+/**
+ * A component to allow users to input text.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { TextField } from './TextField';
+ *
+ * const MyComponent = () => {
+ *   const [text, setText] = React.useState("");
+ *
+ *   return (
+ *     <TextField
+ *       label="Email"
+ *       value={text}
+ *       onChangeText={text => setText(text)}
+ *     />
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * @extends TextInput props https://reactnative.dev/docs/textinput#props
+ */
+declare const TextField: CompoundedComponent;
+export default TextField;
+export type { Props as TextFieldProps };

package/lib/typescript/ui/components/TouchableRipple/Pressable.d.ts

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+import type { Animated, PressableProps as PressableNativeProps, StyleProp, View, ViewStyle } from 'react-native';
+export type PressableStateCallbackType = {
+    hovered: boolean;
+    pressed: boolean;
+    focused: boolean;
+};
+export type PressableProps = Omit<PressableNativeProps, 'children' | 'style'> & {
+    children: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode) | undefined;
+    style?: StyleProp<ViewStyle> | Animated.WithAnimatedValue<StyleProp<ViewStyle>> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle> | Animated.WithAnimatedValue<StyleProp<ViewStyle>>) | undefined;
+};
+export declare const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<View>>;

package/lib/typescript/ui/components/TouchableRipple/TouchableRipple.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { type ColorValue, type GestureResponderEvent, type StyleProp, type View, type ViewStyle } from 'react-native';
+import type { PressableProps, PressableStateCallbackType } from './Pressable';
+import type { ThemeProp } from '../types';
+export type Props = PressableProps & {
+    /**
+     * Whether to render the ripple outside the view bounds.
+     */
+    borderless?: boolean;
+    /**
+     * Type of background drawabale to display the feedback (Android).
+     * https://reactnative.dev/docs/pressable#rippleconfig
+     */
+    background?: Object;
+    /**
+     * Whether to start the ripple at the center (Web).
+     */
+    centered?: boolean;
+    /**
+     * Whether to prevent interaction with the touchable.
+     */
+    disabled?: boolean;
+    /**
+     * Function to execute on press. If not set, will cause the touchable to be disabled.
+     */
+    onPress?: (e: GestureResponderEvent) => void;
+    /**
+     * Function to execute on long press.
+     */
+    onLongPress?: (e: GestureResponderEvent) => void;
+    /**
+     * Function to execute immediately when a touch is engaged, before `onPressOut` and `onPress`.
+     */
+    onPressIn?: (e: GestureResponderEvent) => void;
+    /**
+     * Function to execute when a touch is released.
+     */
+    onPressOut?: (e: GestureResponderEvent) => void;
+    /**
+     * Color of the ripple effect (Android >= 5.0 and Web).
+     */
+    rippleColor?: ColorValue;
+    /**
+     * Color of the underlay for the highlight effect (Android < 5.0 and iOS).
+     */
+    underlayColor?: string;
+    /**
+     * Content of the `TouchableRipple`.
+     */
+    children: ((state: PressableStateCallbackType) => React.ReactNode) | React.ReactNode;
+    style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>) | undefined;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+};
+declare const Component: import("../utils/forwardRef").ForwardRefComponent<View, Props>;
+declare const _default: typeof Component & {
+    supported: boolean;
+};
+export default _default;

package/lib/typescript/ui/components/TouchableRipple/TouchableRipple.native.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { type PressableAndroidRippleConfig, type StyleProp, type ViewStyle, type GestureResponderEvent, View, type ColorValue } from 'react-native';
+import type { PressableProps } from './Pressable';
+import type { ThemeProp } from '../types';
+export type Props = PressableProps & {
+    borderless?: boolean;
+    background?: PressableAndroidRippleConfig;
+    centered?: boolean;
+    disabled?: boolean;
+    onPress?: (e: GestureResponderEvent) => undefined | null;
+    onLongPress?: (e: GestureResponderEvent) => void;
+    onPressIn?: (e: GestureResponderEvent) => void;
+    onPressOut?: (e: GestureResponderEvent) => void;
+    rippleColor?: ColorValue;
+    underlayColor?: string;
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    theme?: ThemeProp;
+};
+declare const Component: import("../utils/forwardRef").ForwardRefComponent<View, Props>;
+declare const _default: typeof Component & {
+    supported: boolean;
+};
+export default _default;

package/lib/typescript/ui/components/TouchableRipple/utils.d.ts

@@ -0,0 +1,10 @@
+import type { ColorValue } from 'react-native';
+import type { InternalTheme } from '../types';
+export declare const getTouchableRippleColors: ({ theme, rippleColor, underlayColor, }: {
+    theme: InternalTheme;
+    rippleColor?: ColorValue;
+    underlayColor?: string;
+}) => {
+    calculatedRippleColor: ColorValue;
+    calculatedUnderlayColor: string;
+};

package/lib/typescript/ui/components/Typography/AnimatedText.d.ts

@@ -0,0 +1,34 @@
+import type * as React from 'react';
+import { Animated, type StyleProp, type TextStyle, type Text } from 'react-native';
+import type { VariantProp } from './types';
+import type { ThemeProp } from "../types";
+type Props<T> = React.ComponentPropsWithRef<typeof Animated.Text> & {
+    /**
+     * Variant defines appropriate text styles for type role and its size.
+     * Available variants:
+     *
+     *  Display: `displayLarge`, `displayMedium`, `displaySmall`
+     *
+     *  Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
+     *
+     *  Title: `titleLarge`, `titleMedium`, `titleSmall`
+     *
+     *  Label:  `labelLarge`, `labelMedium`, `labelSmall`
+     *
+     *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
+     */
+    variant?: VariantProp<T>;
+    style?: StyleProp<TextStyle>;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+};
+/**
+ * Animated text component which follows styles from the theme.
+ *
+ * @extends Text props https://reactnative.dev/docs/text#props
+ */
+declare const AnimatedText: import("../utils/forwardRef").ForwardRefComponent<Text & HTMLElement, Props<never>>;
+export declare const customAnimatedText: <T>() => (props: Props<T>) => React.ReactElement;
+export default AnimatedText;

package/lib/typescript/ui/components/Typography/types.d.ts

@@ -0,0 +1,18 @@
+export declare enum MD3TypescaleKey {
+    displayLarge = "displayLarge",
+    displayMedium = "displayMedium",
+    displaySmall = "displaySmall",
+    headlineLarge = "headlineLarge",
+    headlineMedium = "headlineMedium",
+    headlineSmall = "headlineSmall",
+    titleLarge = "titleLarge",
+    titleMedium = "titleMedium",
+    titleSmall = "titleSmall",
+    labelLarge = "labelLarge",
+    labelMedium = "labelMedium",
+    labelSmall = "labelSmall",
+    bodyLarge = "bodyLarge",
+    bodyMedium = "bodyMedium",
+    bodySmall = "bodySmall"
+}
+export type VariantProp<T> = (T extends string ? (string extends T ? never : T) : never) | keyof typeof MD3TypescaleKey;

package/lib/typescript/ui/components/feedback/FormInput.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { FeedbackColors } from './types';
+interface FormInputProps {
+    icon: string;
+    label: string;
+    value: string;
+    onChangeText: (text: string) => void;
+    placeholder?: string;
+    multiline?: boolean;
+    numberOfLines?: number;
+    testID?: string;
+    colors: FeedbackColors;
+    styles: any;
+    borderColor?: string;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+}
+declare const FormInput: React.FC<FormInputProps>;
+export default FormInput;

package/lib/typescript/ui/components/feedback/ProgressIndicator.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { FeedbackColors } from './types';
+interface ProgressIndicatorProps {
+    currentStep: number;
+    totalSteps: number;
+    colors: FeedbackColors;
+    styles: any;
+}
+declare const ProgressIndicator: React.FC<ProgressIndicatorProps>;
+export default ProgressIndicator;

package/lib/typescript/ui/components/feedback/constants.d.ts

@@ -0,0 +1,4 @@
+import type { FeedbackType, PriorityLevel } from './types';
+export declare const FEEDBACK_TYPES: FeedbackType[];
+export declare const PRIORITY_LEVELS: PriorityLevel[];
+export declare const CATEGORIES: Record<string, string[]>;