@swan-io/lake 11.4.2 → 12.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "11.4.2",
+  "version": "12.0.0",
   "engines": {
     "node": "^22.12.0",
     "pnpm": "^10.2.0"
@@ -26,29 +26,28 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@react-three/drei": "^9.121.5",
-    "@react-three/fiber": "^8.17.14",
+    "@react-three/drei": "^10.0.6",
+    "@react-three/fiber": "^9.1.2",
     "@swan-io/boxed": "^3.2.0",
-    "@swan-io/chicane": "^2.1.0",
+    "@swan-io/chicane": "^2.2.0",
     "@swan-io/use-form": "^3.1.0",
     "dayjs": "^1.11.13",
     "polished": "^4.3.1",
     "prism-react-renderer": "^2.4.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-native-web": "^0.19.13",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-native-web": "^0.20.0",
     "rifm": "^0.12.1",
-    "three": "^0.173.0",
-    "ts-dedent": "^2.2.0",
-    "ts-pattern": "^5.6.2",
-    "uuid": "^11.0.5"
+    "three": "^0.175.0",
+    "ts-pattern": "^5.7.0",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "@types/react-native": "^0.72.8",
-    "@types/three": "^0.173.0",
-    "jsdom": "^26.0.0",
-    "type-fest": "^4.35.0"
+    "@types/three": "^0.175.0",
+    "jsdom": "^26.1.0",
+    "type-fest": "^4.40.0"
   }
 }

package/src/components/AutoWidthImage.d.ts

@@ -1,109 +1,12 @@
-import { Image } from "react-native";
-export declare const AutoWidthImage: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
-    style?: import("react-native").StyleProp<import("react-native").ImageStyle>;
-    role?: import("react-native").WebRole | undefined;
-    defaultSource?: ImageSourcePropType | string;
-    draggable?: boolean | undefined;
-    id?: string | undefined | undefined;
-    onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined | undefined;
-    onError?: ((error: import("react-native").NativeSyntheticEvent<import("react-native").ImageErrorEventData>) => void) | undefined | undefined;
-    onLoad?: ((event: import("react-native").NativeSyntheticEvent<import("react-native").ImageLoadEventData>) => void) | undefined | undefined;
-    onLoadEnd?: (() => void) | undefined | undefined;
-    onLoadStart?: (() => void) | undefined | undefined;
-    progressiveRenderingEnabled?: boolean | undefined | undefined;
-    borderRadius?: number | undefined | undefined;
-    borderTopLeftRadius?: number | undefined | undefined;
-    borderTopRightRadius?: number | undefined | undefined;
-    borderBottomLeftRadius?: number | undefined | undefined;
-    borderBottomRightRadius?: number | undefined | undefined;
-    resizeMode?: import("react-native").ImageResizeMode | undefined;
-    resizeMethod?: "auto" | "resize" | "scale" | undefined | undefined;
-    src?: string | undefined | undefined;
-    srcSet?: string | undefined | undefined;
-    loadingIndicatorSource?: import("react-native").ImageURISource | undefined;
-    testID?: string | undefined | undefined;
-    nativeID?: string | undefined | undefined;
-    alt?: string | undefined | undefined;
-    height?: number | undefined | undefined;
-    width?: number | undefined | undefined;
-    crossOrigin?: "anonymous" | "use-credentials" | undefined | undefined;
-    tintColor?: import("react-native").ColorValue | undefined;
-    referrerPolicy?: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined | undefined;
-    blurRadius?: number | undefined | undefined;
-    capInsets?: import("react-native").Insets | undefined;
-    onProgress?: ((event: import("react-native").NativeSyntheticEvent<import("react-native").ImageProgressEventDataIOS>) => void) | undefined | undefined;
-    onPartialLoad?: (() => void) | undefined | undefined;
-    fadeDuration?: number | undefined | undefined;
-    accessible?: boolean | undefined | undefined;
-    accessibilityActions?: readonly Readonly<{
-        name: import("react-native").AccessibilityActionName | string;
-        label?: string | undefined;
-    }>[] | undefined;
-    accessibilityLabel?: string | undefined | undefined;
-    "aria-label"?: string | undefined | undefined;
-    accessibilityRole?: import("react-native").AccessibilityRole | undefined;
-    accessibilityState?: import("react-native").AccessibilityState | undefined;
-    "aria-busy"?: boolean | undefined | undefined;
-    "aria-checked"?: boolean | "mixed" | undefined | undefined;
-    "aria-disabled"?: boolean | undefined | undefined;
-    "aria-expanded"?: boolean | undefined | undefined;
-    "aria-selected"?: boolean | undefined | undefined;
-    "aria-labelledby"?: string | undefined | undefined;
-    accessibilityHint?: string | undefined | undefined;
-    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
-    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined | undefined;
-    importantForAccessibility?: ("auto" | "yes" | "no" | "no-hide-descendants") | undefined | undefined;
-    "aria-hidden"?: boolean | undefined | undefined;
-    "aria-live"?: ("polite" | "assertive" | "off") | undefined | undefined;
-    "aria-modal"?: boolean | undefined | undefined;
-    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined | undefined;
-    accessibilityLabelledBy?: string | string[] | undefined | undefined;
-    accessibilityElementsHidden?: boolean | undefined | undefined;
-    accessibilityViewIsModal?: boolean | undefined | undefined;
-    onAccessibilityEscape?: (() => void) | undefined | undefined;
-    onAccessibilityTap?: (() => void) | undefined | undefined;
-    onMagicTap?: (() => void) | undefined | undefined;
-    accessibilityIgnoresInvertColors?: boolean | undefined | undefined;
-    accessibilityLanguage?: string | undefined | undefined;
-    tabIndex?: 0 | -1 | undefined;
-    "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: boolean | undefined;
-    "aria-autocomplete"?: string | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "step" | "location" | "date" | "time" | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-details"?: string | undefined;
-    "aria-errormessage"?: string | undefined;
-    "aria-flowto"?: string | undefined;
-    "aria-haspopup"?: string | undefined;
-    "aria-invalid"?: boolean | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-multiline"?: boolean | undefined;
-    "aria-multiselectable"?: boolean | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | undefined;
-    "aria-readonly"?: boolean | undefined;
-    "aria-required"?: boolean | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowspan"?: number | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "ascending" | "descending" | "none" | "other" | undefined;
-} & {
+import { Ref } from "react";
+import { Image, ImageProps } from "react-native";
+import { Except } from "type-fest";
+type Props = Except<ImageProps, "source"> & {
+    ref?: Ref<Image>;
     ariaLabel?: string;
     maxWidth?: number;
     height: number;
     sourceUri: string;
-} & import("react").RefAttributes<Image>>>;
+};
+export declare const AutoWidthImage: import("react").MemoExoticComponent<({ ref, ariaLabel, maxWidth, height, sourceUri, onLoadEnd, style, ...props }: Props) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/src/components/AutoWidthImage.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, memo, useLayoutEffect, useState } from "react";
+import { memo, useLayoutEffect, useState } from "react";
 import { Image } from "react-native";
 import { isNotNullish } from "../utils/nullish";
-export const AutoWidthImage = memo(forwardRef(({ ariaLabel, maxWidth, height, sourceUri, onLoadEnd, style, ...props }, forwardedRef) => {
+export const AutoWidthImage = memo(({ ref, ariaLabel, maxWidth, height, sourceUri, onLoadEnd, style, ...props }) => {
     const [{ fetching, size }, setState] = useState({
         fetching: true,
         size: { height, width: 0 },
@@ -19,10 +19,10 @@ export const AutoWidthImage = memo(forwardRef(({ ariaLabel, maxWidth, height, so
             setState(({ size }) => ({ fetching: false, size }));
         });
     }, [maxWidth, height, sourceUri]);
-    return (_jsx(Image, { "aria-label": ariaLabel, ref: forwardedRef, style: [style, size], source: fetching ? null : sourceUri, onLoadEnd: () => {
+    return (_jsx(Image, { "aria-label": ariaLabel, ref: ref, style: [style, size], source: fetching ? null : sourceUri, onLoadEnd: () => {
             if (!fetching) {
                 onLoadEnd === null || onLoadEnd === void 0 ? void 0 : onLoadEnd();
             }
         }, ...props }));
-}));
+});
 AutoWidthImage.displayName = "AutoWidthImage";

package/src/components/AutocompleteSearchInput.d.ts

@@ -1,12 +1,12 @@
 import { Future, Result } from "@swan-io/boxed";
-import { MutableRefObject, ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 type Suggestion<T> = {
     title: string;
     subtitle: string;
     value: T;
 };
 type Props<T> = {
-    inputRef?: MutableRefObject<unknown>;
+    inputRef?: Ref<unknown>;
     value?: string;
     onValueChange: (value: string) => void;
     disabled?: boolean;

package/src/components/AutocompleteSearchInput.js

@@ -14,7 +14,7 @@ const styles = StyleSheet.create({
 });
 export const AutocompleteSearchInput = ({ inputRef, value, onValueChange, disabled, id, placeholder, error, emptyResultText, ListFooterComponent, shouldDisplaySuggestions = true, loadSuggestions, onSuggestion, onLoadError, }) => {
     const [state, setState] = useState(AsyncData.NotAsked());
-    const lastRequest = useRef();
+    const lastRequest = useRef(undefined);
     return (_jsx(LakeCombobox, { inputRef: inputRef, id: id, placeholder: placeholder, value: value !== null && value !== void 0 ? value : "", items: state, icon: loadSuggestions != null ? "search-filled" : undefined, disabled: disabled, error: error, ListFooterComponent: ListFooterComponent != null && (_jsxs(_Fragment, { children: [match(state)
                     .with(AsyncData.P.Done(Result.P.Ok(P.select())), suggestions => suggestions.length > 0 ? _jsx(Separator, {}) : null)
                     .otherwise(() => null), ListFooterComponent] })), onSelectItem: item => {

package/src/components/Avatar.d.ts

@@ -6,13 +6,6 @@ type User = {
 type Props = {
     size: number;
     user: User | null | undefined;
-}
-/**
- * @deprecated
- */
- | {
-    size: number;
-    initials?: string;
 };
 export declare const Avatar: import("react").NamedExoticComponent<Props>;
 export {};

package/src/components/Avatar.js

@@ -4,7 +4,6 @@ import { StyleSheet, View } from "react-native";
 import { match, P } from "ts-pattern";
 import { commonStyles } from "../constants/commonStyles";
 import { colors } from "../constants/design";
-import { identity } from "../utils/function";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
 const styles = StyleSheet.create({
@@ -26,15 +25,13 @@ const initialsToVariant = (initials) => {
             return "shakespear";
     }
 };
-export const Avatar = memo(props => {
-    const { size } = props;
-    const initials = match(props)
-        .with({ user: P.select(P.nonNullable) }, user => {
+export const Avatar = memo(({ user, size }) => {
+    const initials = match(user)
+        .with(P.nonNullable, user => {
         var _a, _b, _c, _d, _e;
         return ((_b = (_a = user.firstName) === null || _a === void 0 ? void 0 : _a.charAt(0)) !== null && _b !== void 0 ? _b : "") +
             ((_e = (_d = ((_c = user.preferredLastName) !== null && _c !== void 0 ? _c : user.lastName)) === null || _d === void 0 ? void 0 : _d.charAt(0)) !== null && _e !== void 0 ? _e : "");
     })
-        .with({ initials: P.select(P.nonNullable) }, identity)
         .otherwise(() => "");
     const variant = initialsToVariant(initials);
     return (_jsx(View, { role: "img", style: [

package/src/components/Box.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
 declare const alignItemsStyles: {
     baseline: {
@@ -58,6 +58,7 @@ type BoxDirection = keyof typeof directionStyles | "column";
 type BoxJustifyContent = keyof typeof justifyContentStyles | "normal";
 type BoxWrap = keyof typeof wrapStyles | "nowrap";
 export type BoxProps = ViewProps & {
+    ref?: Ref<View>;
     alignItems?: BoxAlignItems;
     children?: ReactNode;
     direction?: BoxDirection;
@@ -67,14 +68,5 @@ export type BoxProps = ViewProps & {
     shrink?: number;
     style?: StyleProp<ViewStyle>;
 };
-export declare const Box: import("react").ForwardRefExoticComponent<ViewProps & {
-    alignItems?: BoxAlignItems;
-    children?: ReactNode;
-    direction?: BoxDirection;
-    justifyContent?: BoxJustifyContent;
-    wrap?: BoxWrap;
-    grow?: number;
-    shrink?: number;
-    style?: StyleProp<ViewStyle>;
-} & import("react").RefAttributes<View>>;
+export declare const Box: ({ ref, alignItems, direction, justifyContent, wrap, grow, shrink, style, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/Box.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { StyleSheet, View } from "react-native";
 const alignItemsStyles = StyleSheet.create({
     baseline: { alignItems: "baseline" },
@@ -28,9 +27,8 @@ const otherStyles = StyleSheet.create({
     grow1: { flexGrow: 1 },
     shrink1: { flexShrink: 1 },
 });
-export const Box = forwardRef((
-// Default <View /> styles https://github.com/necolas/react-native-web/blob/0.19.10/packages/react-native-web/src/exports/View/index.js#L146
-{ alignItems = "stretch", direction = "column", justifyContent = "normal", wrap = "nowrap", grow = 0, shrink = 0, style, ...props }, forwardedRef) => (_jsx(View, { ref: forwardedRef, ...props, style: [
+// Default <View /> styles https://github.com/necolas/react-native-web/blob/0.20.0/packages/react-native-web/src/exports/View/index.js#L149
+export const Box = ({ ref, alignItems = "stretch", direction = "column", justifyContent = "normal", wrap = "nowrap", grow = 0, shrink = 0, style, ...props }) => (_jsx(View, { ref: ref, ...props, style: [
         alignItems !== "stretch" && alignItemsStyles[alignItems],
         direction !== "column" && directionStyles[direction],
         justifyContent !== "normal" && justifyContentStyles[justifyContent],
@@ -38,4 +36,4 @@ export const Box = forwardRef((
         grow !== 0 && (grow === 1 ? otherStyles.grow1 : { flexGrow: grow }),
         shrink !== 0 && (shrink === 1 ? otherStyles.shrink1 : { flexShrink: shrink }),
         style,
-    ] })));
+    ] }));

package/src/components/Card3dPreview.d.ts

@@ -1,3 +1,4 @@
+import { JSX, Ref } from "react";
 import * as THREE from "three";
 export type Card3dAssetsUrls = {
     envNx: string;
@@ -15,6 +16,7 @@ export type Card3dAssetsUrls = {
     colorSilver: string;
 };
 type CardParams = {
+    ref?: Ref<THREE.Group>;
     ownerName: string;
     cardNumber: string;
     expirationDate: string;
@@ -31,4 +33,4 @@ type Props = CardParams & {
 declare const _default: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default _default;
 type CardProps = JSX.IntrinsicElements["group"] & CardParams;
-export declare const Card: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<THREE.Group<THREE.Object3DEventMap>>>;
+export declare const Card: ({ ref, ownerName, cardNumber, expirationDate, cvv, color, logo, logoScale, assetsUrls, onSvgError, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/Card3dPreview.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Environment, OrbitControls, Text, useGLTF, useTexture } from "@react-three/drei";
 import { Canvas, useFrame } from "@react-three/fiber";
 import { Result } from "@swan-io/boxed";
-import { forwardRef, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import * as THREE from "three";
-import { P, match } from "ts-pattern";
+import { match, P } from "ts-pattern";
 import { isNotNullish, isNullish } from "../utils/nullish";
 import { createSvgImage, getMonochromeSvg } from "../utils/svg";
 /*
@@ -98,7 +98,7 @@ const setTextureColorSpace = (texture) => {
         texture.colorSpace = THREE.SRGBColorSpace;
     }
 };
-export const Card = forwardRef(({ ownerName, cardNumber, expirationDate, cvv, color, logo, logoScale, assetsUrls, onSvgError, ...props }, ref) => {
+export const Card = ({ ref, ownerName, cardNumber, expirationDate, cvv, color, logo, logoScale, assetsUrls, onSvgError, ...props }) => {
     const { nodes, materials } = useGLTF(assetsUrls.cardGltf);
     const [logoData, setLogoData] = useState(null);
     const silverTexture = useTexture(assetsUrls.colorSilver, setTextureColorSpace);
@@ -194,4 +194,4 @@ export const Card = forwardRef(({ ownerName, cardNumber, expirationDate, cvv, co
                                     .with("Silver", () => 0x000000)
                                     .with("Black", () => 0xffffff)
                                     .otherwise(() => 0xffffff), metalness: 0.1, roughness: 0.35, envMapIntensity: ENV_MAP_INTENSITY, transparent: true, alphaMap: logoData.alphaMap })] })) }), _jsx("mesh", { geometry: nodes.black_band.geometry, material: materials.black_band, position: [0, 1.774, BACK_TEXT_POSITION], rotation: [0, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.chip.geometry, material: materials.chip, position: [-2.78, 0.439, FRONT_TEXT_POSITION], rotation: [0, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.chip_pattern.geometry, material: materials.chip_pattern, position: [-2.778, 0.442, FRONT_TEXT_POSITION + 0.001], rotation: [0, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.mc_center.geometry, material: materials.mastercard_orange, position: [3.052, -1.832, FRONT_TEXT_POSITION], rotation: [Math.PI / 2, 0, 0] }), _jsx("mesh", { geometry: nodes.mc_left.geometry, material: materials.mastercard_red, position: [2.676, -1.773, FRONT_TEXT_POSITION], rotation: [Math.PI / 2, 0, 0] }), _jsx("mesh", { geometry: nodes.mc_right.geometry, material: materials.mastercard_yellow, position: [3.47, -1.773, FRONT_TEXT_POSITION], rotation: [-Math.PI / 2, 0, 0] }), _jsx("mesh", { geometry: nodes.metal_circle.geometry, material: materials.rainbow, position: [-2.33, -1.849, BACK_TEXT_POSITION], rotation: [-Math.PI / 2, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.metal_circle001.geometry, material: materials.rainbow_rough, position: [-2.629, -1.849, BACK_TEXT_POSITION - 0.001], rotation: [-Math.PI / 2, Math.PI / 2, 0], scale: [0.35, 1, 0.35] }), _jsx("mesh", { geometry: nodes.metal_circle002.geometry, material: materials.rainbow_rough, position: [-2.33, -1.849, BACK_TEXT_POSITION - 0.001], rotation: [-Math.PI / 2, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.metal_mastercard.geometry, material: materials.rainbow_mastercard, position: [0.914, -1.298, BACK_TEXT_POSITION - 0.001], rotation: [Math.PI / 2, 0, Math.PI], scale: 0.09 })] }) }));
-});
+};

package/src/components/Cells.d.ts

@@ -1,7 +1,6 @@
 import { ComponentProps, ReactNode } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import { Except } from "type-fest";
-import { ColorVariants } from "../constants/design";
 import { TextVariant } from "./LakeText";
 import { LakeTooltip } from "./LakeTooltip";
 declare const directionStyles: {
@@ -57,14 +56,10 @@ type BalanceCellProps = {
         value: number;
         currency: string;
     };
-    /**
-     * @deprecated Use `align` prop instead
-     */
-    textAlign?: Align;
     value: number;
     variant?: TextVariant;
 };
-export declare const BalanceCell: ({ textAlign, align, currency, formatCurrency, originalValue, value, variant, }: BalanceCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BalanceCell: ({ align, currency, formatCurrency, originalValue, value, variant, }: BalanceCellProps) => import("react/jsx-runtime").JSX.Element;
 type LinkCellProps = {
     buttonPosition?: "start" | "end";
     children: ReactNode;
@@ -75,64 +70,4 @@ type LinkCellProps = {
     variant?: TextVariant;
 };
 export declare const LinkCell: ({ buttonPosition, children, external, fadeOn, onPress, tooltip, variant, }: LinkCellProps) => import("react/jsx-runtime").JSX.Element;
-/**
- * @deprecated Avoid usage
- */
-export declare const ColorPatchCell: ({ alternativeText, color, isHovered, }: {
-    alternativeText?: string;
-    color: ColorVariants;
-    isHovered: boolean;
-}) => import("react/jsx-runtime").JSX.Element | null;
-/**
- * @deprecated Use `HeaderCell` instead
- */
-export declare const SimpleHeaderCell: ({ justifyContent, ...props }: {
-    justifyContent?: "flex-start" | "center" | "flex-end";
-    text: string;
-    sort?: SortDirection;
-    onPress?: (direction: SortDirection) => void;
-}) => import("react/jsx-runtime").JSX.Element;
-/**
- * @deprecated Use `TextCell` with color={…} and variant="medium" instead
- */
-export declare const SimpleTitleCell: ({ isHighlighted, text, tooltip, }: {
-    isHighlighted?: boolean;
-    text: string;
-    tooltip?: TooltipProp;
-}) => import("react/jsx-runtime").JSX.Element;
-/**
- * @deprecated Use `TextCell` instead
- */
-export declare const SimpleRegularTextCell: ({ color, text, textAlign, variant, }: {
-    color?: string;
-    text: string;
-    textAlign?: Align;
-    variant?: TextVariant;
-}) => import("react/jsx-runtime").JSX.Element;
-/**
- * @deprecated Use `CopyableTextCell` instead
- */
-export declare const CopyableRegularTextCell: ({ copiedWording, copyWording, text, textToCopy, tooltip, variant, }: CopyableTextCellProps) => import("react/jsx-runtime").JSX.Element;
-/**
- * @deprecated Use `<Cell align="left" />` instead
- */
-export declare const StartAlignedCell: (props: Except<CellProps, "align">) => import("react/jsx-runtime").JSX.Element;
-/**
- * @deprecated Use `<Cell align="center" />` instead
- */
-export declare const CenteredCell: (props: Except<CellProps, "align">) => import("react/jsx-runtime").JSX.Element;
-/**
- * @deprecated Use `<Cell align="right" />` instead
- */
-export declare const EndAlignedCell: (props: Except<CellProps, "align">) => import("react/jsx-runtime").JSX.Element;
-/**
- * @deprecated Use `<Cell align="right" />` instead
- */
-export declare const ActionCell: (props: CellProps) => import("react/jsx-runtime").JSX.Element;
-/**
- * @deprecated Use <ActionCell /> instead
- */
-export declare const CellAction: ({ children }: {
-    children: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/Cells.js

@@ -2,12 +2,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";
-import { visuallyHiddenStyle } from "../constants/commonStyles";
 import { colors, invariantColors, spacings } from "../constants/design";
 import { setClipboardText } from "../utils/clipboard";
-import { identity } from "../utils/function";
 import { isNotNullish, isNullish } from "../utils/nullish";
-import { Box } from "./Box";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
 import { LakeTooltip } from "./LakeTooltip";
@@ -132,7 +129,7 @@ export const CopyableTextCell = ({ copiedWording, copyWording, text, textToCopy,
     return (_jsxs(Cell, { style: styles.fullHeight, children: [_jsx(LakeTooltip, { content: visibleState === "copy" ? copyWording : copiedWording, onHide: () => setVisibleState("copy"), placement: "left", togglableOnFocus: true, containerStyle: styles.fullHeight, children: _jsx(Pressable, { "aria-label": copyWording, role: "button", onPress: onPress, style: styles.button, children: ({ hovered }) => (_jsxs(_Fragment, { children: [_jsx(Icon, { name: hovered ? "copy-filled" : "copy-regular", color: "currentColor", size: 14 }), hovered && _jsx(View, { role: "none", style: styles.buttonUnderline })] })) }) }), _jsx(LakeText, { numberOfLines: 1, color: colors.gray[900], tooltip: tooltip, variant: variant, children: text })] }));
 };
 // TODO: handle `+` sign properly
-export const BalanceCell = ({ textAlign = "left", align = textAlign, currency, formatCurrency, originalValue, value, variant = "medium", }) => (_jsxs(Cell, { align: align, direction: "column", children: [_jsx(LakeText, { numberOfLines: 1, align: align, color: colors.gray[900], variant: variant, style: [
+export const BalanceCell = ({ align = "left", currency, formatCurrency, originalValue, value, variant = "medium", }) => (_jsxs(Cell, { align: align, direction: "column", children: [_jsx(LakeText, { numberOfLines: 1, align: align, color: colors.gray[900], variant: variant, style: [
                 value > 0 && { color: colors.positive.primary },
                 value < 0 && { color: colors.negative.primary },
             ], children: (value > 0 ? "+" : "") + formatCurrency(value, currency) }), isNotNullish(originalValue) && originalValue.currency !== currency && (_jsx(LakeText, { numberOfLines: 1, align: align, color: colors.gray[500], variant: "smallRegular", children: (originalValue.value > 0 ? "+" : "") +
@@ -146,49 +143,3 @@ export const LinkCell = ({ buttonPosition = "start", children, external = false,
     const text = (_jsx(LakeText, { numberOfLines: 1, color: colors.gray[900], variant: variant, tooltip: tooltip, children: children }));
     return (_jsx(Cell, { fadeOn: fadeOn, children: atEnd ? (_jsxs(_Fragment, { children: [text, button] })) : (_jsxs(_Fragment, { children: [button, text] })) }));
 };
-/**
- * @deprecated Avoid usage
- */
-export const ColorPatchCell = ({ alternativeText, color, isHovered, }) => {
-    return isHovered ? (_jsx(Box, { grow: 1, style: { backgroundColor: colors[color].primary }, children: isNotNullish(alternativeText) ? (_jsx(LakeText, { style: visuallyHiddenStyle, children: alternativeText })) : null })) : null;
-};
-/**
- * @deprecated Use `HeaderCell` instead
- */
-export const SimpleHeaderCell = ({ justifyContent = "flex-start", ...props }) => (_jsx(HeaderCell, { ...props, align: match(justifyContent)
-        .returnType()
-        .with("flex-start", () => "left")
-        .with("flex-end", () => "right")
-        .otherwise(identity) }));
-/**
- * @deprecated Use `TextCell` with color={…} and variant="medium" instead
- */
-export const SimpleTitleCell = ({ isHighlighted = false, text, tooltip, }) => (_jsx(TextCell, { color: isHighlighted ? colors.current.primary : colors.gray[900], text: text, tooltip: tooltip, variant: "medium" }));
-/**
- * @deprecated Use `TextCell` instead
- */
-export const SimpleRegularTextCell = ({ color = colors.gray[900], text, textAlign = "left", variant = "regular", }) => _jsx(TextCell, { align: textAlign, color: color, text: text, variant: variant });
-/**
- * @deprecated Use `CopyableTextCell` instead
- */
-export const CopyableRegularTextCell = CopyableTextCell;
-/**
- * @deprecated Use `<Cell align="left" />` instead
- */
-export const StartAlignedCell = (props) => (_jsx(Cell, { align: "left", ...props }));
-/**
- * @deprecated Use `<Cell align="center" />` instead
- */
-export const CenteredCell = (props) => (_jsx(Cell, { align: "center", ...props }));
-/**
- * @deprecated Use `<Cell align="right" />` instead
- */
-export const EndAlignedCell = (props) => (_jsx(Cell, { align: "right", ...props }));
-/**
- * @deprecated Use `<Cell align="right" />` instead
- */
-export const ActionCell = (props) => _jsx(Cell, { align: "right", ...props });
-/**
- * @deprecated Use <ActionCell /> instead
- */
-export const CellAction = ({ children }) => (_jsx(ActionCell, { children: children }));

package/src/components/FlatList.d.ts

@@ -1,4 +1,4 @@
-import { ForwardedRef, ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 import { StyleProp, ViewStyle, WebRole } from "react-native";
 import { ScrollViewProps, ScrollViewRef } from "./ScrollView";
 export type FlatListRef = ScrollViewRef;
@@ -7,6 +7,7 @@ export type ListRenderItemInfo<T> = {
     index: number;
 };
 type Props<T> = {
+    ref?: Ref<FlatListRef>;
     ItemSeparatorComponent?: ReactNode;
     ListEmptyComponent?: ReactNode;
     ListFooterComponent?: ReactNode;
@@ -25,8 +26,5 @@ type Props<T> = {
     showsScrollIndicators?: boolean;
     style?: StyleProp<ViewStyle>;
 };
-declare const FlatListWithRef: <T>({ ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, data, horizontal, keyExtractor, onEndReached, onEndReachedThresholdPx, onKeyDown, onScroll, renderItem, role, scrollEventThrottle, showsScrollIndicators, style, }: Props<T>, forwardedRef: ForwardedRef<FlatListRef>) => import("react/jsx-runtime").JSX.Element;
-export declare const FlatList: <T>(props: Props<T> & {
-    ref?: ForwardedRef<FlatListRef>;
-}) => ReturnType<typeof FlatListWithRef>;
+export declare const FlatList: <T>({ ref, ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, data, horizontal, keyExtractor, onEndReached, onEndReachedThresholdPx, onKeyDown, onScroll, renderItem, role, scrollEventThrottle, showsScrollIndicators, style, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/FlatList.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Fragment, forwardRef, useEffect, useRef } from "react";
+import { Fragment, useEffect, useRef } from "react";
 import { StyleSheet, View } from "react-native";
 import { ScrollView } from "./ScrollView";
 const styles = StyleSheet.create({
@@ -10,7 +10,7 @@ const styles = StyleSheet.create({
         bottom: 0,
     },
 });
-const FlatListWithRef = ({ ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, data, horizontal = false, keyExtractor, onEndReached, onEndReachedThresholdPx = 200, onKeyDown, onScroll, renderItem, role, scrollEventThrottle = 16, showsScrollIndicators = true, style, }, forwardedRef) => {
+export const FlatList = ({ ref, ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, data, horizontal = false, keyExtractor, onEndReached, onEndReachedThresholdPx = 200, onKeyDown, onScroll, renderItem, role, scrollEventThrottle = 16, showsScrollIndicators = true, style, }) => {
     const scrollTrackerRef = useRef(null);
     const scrollTrackerStyle = horizontal
         ? { top: 0, width: onEndReachedThresholdPx }
@@ -34,8 +34,7 @@ const FlatListWithRef = ({ ItemSeparatorComponent, ListEmptyComponent, ListFoote
         }
         // re-create an observer only on list length change
     }, [data.length]);
-    return (_jsxs(ScrollView, { contentContainerStyle: contentContainerStyle, horizontal: horizontal, onKeyDown: onKeyDown, onScroll: onScroll, ref: forwardedRef, role: role, scrollEventThrottle: scrollEventThrottle, showsScrollIndicators: showsScrollIndicators, style: style, children: [ListHeaderComponent, data.length <= 0
+    return (_jsxs(ScrollView, { contentContainerStyle: contentContainerStyle, horizontal: horizontal, onKeyDown: onKeyDown, onScroll: onScroll, ref: ref, role: role, scrollEventThrottle: scrollEventThrottle, showsScrollIndicators: showsScrollIndicators, style: style, children: [ListHeaderComponent, data.length <= 0
                 ? ListEmptyComponent
                 : data.map((item, index) => (_jsxs(Fragment, { children: [index !== 0 && ItemSeparatorComponent, renderItem({ item, index })] }, keyExtractor(item, index)))), ListFooterComponent, _jsx(View, { role: "none", ref: scrollTrackerRef, style: [styles.scrollTracker, scrollTrackerStyle] })] }));
 };
-export const FlatList = forwardRef(FlatListWithRef);

package/src/components/FocusTrap.d.ts

@@ -1,6 +1,10 @@
-import { ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 import { StyleProp, ViewStyle } from "react-native";
+export type FocusTrapRef = {
+    setInitiallyFocusedElement: (element: HTMLElement) => void;
+};
 type Props = {
+    ref?: Ref<FocusTrapRef>;
     autoFocus: boolean;
     children: ReactNode;
     focusLock: boolean;
@@ -9,8 +13,5 @@ type Props = {
     returnFocus: boolean;
     style?: StyleProp<ViewStyle>;
 };
-export type FocusTrapRef = {
-    setInitiallyFocusedElement: (element: HTMLElement) => void;
-};
-export declare const FocusTrap: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<FocusTrapRef>>;
+export declare const FocusTrap: ({ ref, children, focusLock, onClickOutside, onEscapeKey, returnFocus, style, autoFocus, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/FocusTrap.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, } from "react";
+import { useCallback, useEffect, useImperativeHandle, useRef, useState, } from "react";
 import { View } from "react-native";
 import { match } from "ts-pattern";
 import { useInterval } from "../hooks/useInterval";
@@ -8,7 +8,7 @@ import { getFocusableElements } from "../utils/a11y";
 import { first, last } from "../utils/array";
 import { isNotNullish } from "../utils/nullish";
 let escapeListenerCount = 0;
-export const FocusTrap = forwardRef(({ children, focusLock, onClickOutside, onEscapeKey, returnFocus, style, autoFocus }, ref) => {
+export const FocusTrap = ({ ref, children, focusLock, onClickOutside, onEscapeKey, returnFocus, style, autoFocus, }) => {
     const containerRef = useRef(null);
     const previouslyFocusedRef = useRef(null);
     const hasFocusedOutside = useRef(false);
@@ -90,4 +90,4 @@ export const FocusTrap = forwardRef(({ children, focusLock, onClickOutside, onEs
         onFocusOutside,
     });
     return (_jsx(View, { ref: containerRef, onKeyDownCapture: onKeyDownCapture, style: style, children: children }));
-});
+};