@swan-io/lake 12.4.2 → 13.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "12.4.2",
+  "version": "13.0.0",
   "engines": {
     "node": "^22.12.0"
   },
@@ -25,28 +25,23 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@react-three/drei": "^10.1.2",
-    "@react-three/fiber": "^9.1.2",
     "@swan-io/boxed": "^3.2.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": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-native-web": "^0.20.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-native-web": "^0.21.1",
     "rifm": "^0.12.1",
-    "three": "^0.177.0",
-    "ts-pattern": "^5.7.1",
+    "ts-pattern": "^5.8.0",
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@types/react": "^19.1.6",
-    "@types/react-dom": "^19.1.5",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
     "@types/react-native": "^0.72.8",
-    "@types/three": "^0.176.0",
-    "jsdom": "^26.1.0",
     "type-fest": "^4.41.0"
   }
 }

package/src/components/Toggle.d.ts

@@ -1,13 +1,9 @@
 type Props = {
+    compact?: boolean;
     value: boolean;
-    disabled?: boolean;
-    onToggle: (next: boolean) => void;
-    mode?: "desktop" | "mobile";
-    onLabel: string;
-    offLabel: string;
+    labelOff: string;
+    labelOn: string;
+    onToggle: (value: boolean) => void;
 };
-/**
- * @deprecated
- */
-export declare const Toggle: ({ onToggle, value, disabled, mode, onLabel, offLabel, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Toggle: ({ compact, value, labelOff, labelOn, onToggle }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/Toggle.js

@@ -1,76 +1,81 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { StyleSheet, View } from "react-native";
-import { commonStyles } from "../constants/commonStyles";
-import { colors } from "../constants/design";
-import { Box } from "./Box";
+import { StyleSheet, Text, View } from "react-native";
+import { match, P } from "ts-pattern";
+import { colors, radii, spacings, texts } from "../constants/design";
 import { Icon } from "./Icon";
-import { LakeText } from "./LakeText";
 import { Pressable } from "./Pressable";
-const HEIGHT = 26;
 const BORDER_WIDTH = 1;
 const styles = StyleSheet.create({
-    switch: {
-        userSelect: "none",
+    base: {
         flexDirection: "row",
-        borderRadius: HEIGHT / 2,
-        height: HEIGHT,
-        transform: "translateZ(0px)",
-        width: "min-content",
-        borderColor: colors.gray[100],
+        alignItems: "center",
+        borderColor: colors.gray[200],
+        borderRadius: radii[8],
         borderWidth: BORDER_WIDTH,
+        height: 28,
     },
     handle: {
         position: "absolute",
-        width: HEIGHT,
-        height: HEIGHT,
+        // Allow handle to bleed on container border
+        bottom: -BORDER_WIDTH,
+        left: -BORDER_WIDTH,
+        right: -BORDER_WIDTH,
         top: -BORDER_WIDTH,
-        borderRadius: HEIGHT / 2,
+        borderWidth: BORDER_WIDTH,
+        borderRadius: radii[8],
         transitionDuration: "300ms",
+        transitionProperty: "transform, width",
         transitionTimingFunction: "ease-in-out",
-        borderWidth: BORDER_WIDTH,
     },
-    switchItem: {
-        paddingHorizontal: 8,
-        height: HEIGHT - BORDER_WIDTH * 2,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+    item: {
+        paddingHorizontal: spacings[8],
+    },
+    text: {
+        ...texts.smallMedium,
+        color: colors.gray[700],
+        userSelect: "none",
+    },
+    hidden: {
+        visibility: "hidden",
+    },
+    textOn: {
+        color: colors.positive[500],
+    },
+    textOff: {
+        color: colors.negative[500],
     },
 });
-/**
- * @deprecated
- */
-export const Toggle = ({ onToggle, value, disabled = false, mode = "desktop", onLabel, offLabel, }) => {
-    const containerRef = useRef(null);
-    const onItemRef = useRef(null);
-    const offItemRef = useRef(null);
-    const [handleStyle, setHandleStyle] = useState();
-    const isMobileMode = mode === "mobile";
-    const onColor = value ? colors.positive[500] : colors.gray[500];
-    const offColor = !value ? colors.negative[500] : colors.gray[500];
-    const reajustLayout = useCallback(() => {
-        var _a;
-        (_a = (value ? onItemRef : offItemRef).current) === null || _a === void 0 ? void 0 : _a.measureLayout(containerRef.current, (left, _, width) => {
-            setHandleStyle(prev => ({
-                transitionProperty: prev ? "width, transform" : "none",
-                width: width + 2 * BORDER_WIDTH,
-                transform: `translateX(${value ? -BORDER_WIDTH : left - 2 * BORDER_WIDTH}px)`,
-            }));
-        }, () => { });
-    }, [value]);
-    // biome-ignore lint/correctness/useExhaustiveDependencies(reajustLayout):
-    // biome-ignore lint/correctness/useExhaustiveDependencies(value):
-    // biome-ignore lint/correctness/useExhaustiveDependencies(isMobileMode):
-    // biome-ignore lint/correctness/useExhaustiveDependencies(onLabel):
-    // biome-ignore lint/correctness/useExhaustiveDependencies(offLabel):
-    useEffect(reajustLayout, [reajustLayout, value, isMobileMode, onLabel, offLabel]);
-    return (_jsxs(Pressable, { style: [styles.switch, disabled && commonStyles.disabled], onPress: () => onToggle(!value), "aria-disabled": disabled, "aria-checked": value, disabled: disabled, ref: containerRef, role: "switch", onLayout: reajustLayout, children: [_jsx(View, { style: [
+const getItemWidth = (node) => match(node)
+    .returnType()
+    .with(P.instanceOf(HTMLElement), element => element.offsetWidth)
+    .otherwise(() => 0);
+export const Toggle = ({ compact = false, value, labelOff, labelOn, onToggle }) => {
+    const [itemsWidth, setItemsWidth] = useState();
+    const onViewRef = useRef(null);
+    const offViewRef = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies(compact):
+    useEffect(() => {
+        // batch measurements
+        setTimeout(() => {
+            setItemsWidth({
+                on: getItemWidth(onViewRef.current),
+                off: getItemWidth(offViewRef.current),
+            });
+        }, 0);
+    }, [compact]);
+    const onPress = useCallback(() => {
+        onToggle(!value);
+    }, [onToggle, value]);
+    return (_jsxs(Pressable, { role: "switch", onPress: onPress, "aria-checked": value, style: styles.base, children: [_jsx(View, { role: "presentation", style: [
                     styles.handle,
-                    handleStyle,
-                    {
-                        borderColor: value ? colors.positive[500] : colors.negative[500],
-                        backgroundColor: value ? colors.positive[50] : colors.negative[50],
-                    },
-                ] }), _jsx(Box, { style: styles.switchItem, ref: onItemRef, children: isMobileMode ? (_jsx(Icon, { size: 16, name: "checkmark-circle-regular", color: onColor })) : (_jsx(LakeText, { variant: "smallMedium", color: onColor, children: onLabel })) }), _jsx(Box, { style: styles.switchItem, ref: offItemRef, children: isMobileMode ? (_jsx(Icon, { size: 16, name: "subtract-circle-regular", color: offColor })) : (_jsx(LakeText, { variant: "smallMedium", color: offColor, children: offLabel })) })] }));
+                    itemsWidth == null
+                        ? styles.hidden
+                        : {
+                            backgroundColor: value ? colors.positive[50] : colors.negative[50],
+                            borderColor: value ? colors.positive[500] : colors.negative[500],
+                            transform: `translateX(${value ? 0 : itemsWidth.on + BORDER_WIDTH}px)`,
+                            width: (value ? itemsWidth.on : itemsWidth.off) + BORDER_WIDTH,
+                        },
+                ] }), _jsx(View, { ref: onViewRef, style: styles.item, children: compact ? (_jsx(Icon, { color: value ? colors.positive[500] : colors.gray[500], size: 16, name: "checkmark-circle-regular" })) : (_jsx(Text, { style: [styles.text, value && styles.textOn], children: labelOn })) }), _jsx(View, { ref: offViewRef, style: styles.item, children: compact ? (_jsx(Icon, { color: !value ? colors.negative[500] : colors.gray[500], size: 16, name: "subtract-circle-regular" })) : (_jsx(Text, { style: [styles.text, !value && styles.textOff], children: labelOff })) })] }));
 };

package/src/components/WithCurrentColor.d.ts

@@ -6,7 +6,7 @@ type Props = {
     style?: ViewProps["style"];
     children: ReactNode;
 };
-export declare const CurrentColorContext: import("react").Context<"current" | "gray" | "live" | "sandbox" | "positive" | "warning" | "negative" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined>;
+export declare const CurrentColorContext: import("react").Context<"gray" | "live" | "sandbox" | "positive" | "warning" | "negative" | "current" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined>;
 export declare const useCurrentColor: (containerRef: RefObject<HTMLElement | null>, variant: ColorVariants | undefined) => void;
 export declare const WithCurrentColor: ({ variant, style, children }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/constants/design.d.ts

@@ -67,13 +67,6 @@ export declare const primaryFontStyle: {
     fontFamily: string;
     letterSpacing: number;
 };
-/**
- * @deprecated use primaryFontStyle instead
- */
-export declare const interFontStyle: {
-    fontFamily: string;
-    letterSpacing: number;
-};
 export declare const texts: {
     readonly h1: TextStyle;
     readonly h2: TextStyle;

package/src/constants/design.js

@@ -258,10 +258,6 @@ export const primaryFontStyle = {
     fontFamily: fonts.primary,
     letterSpacing: "var(--letter-spacing-primary)",
 };
-/**
- * @deprecated use primaryFontStyle instead
- */
-export const interFontStyle = primaryFontStyle;
 const asTextStyle = (x) => {
     return x;
 };

package/src/components/Card3dPreview.d.ts

@@ -1,36 +0,0 @@
-import { JSX, Ref } from "react";
-import * as THREE from "three";
-export type Card3dAssetsUrls = {
-    envNx: string;
-    envNy: string;
-    envNz: string;
-    envPx: string;
-    envPy: string;
-    envPz: string;
-    fontMaisonNeueBook: string;
-    fontMarkProRegular: string;
-    bandRoughness: string;
-    cardGltf: string;
-    chipTexture: string;
-    colorBlack: string;
-    colorSilver: string;
-};
-type CardParams = {
-    ref?: Ref<THREE.Group>;
-    ownerName: string;
-    cardNumber: string;
-    expirationDate: string;
-    cvv: string;
-    color: "Silver" | "Black" | THREE.Texture;
-    logo: SVGElement | HTMLImageElement | null;
-    logoScale: number;
-    assetsUrls: Card3dAssetsUrls;
-    onSvgError?: (code: string) => void;
-};
-type Props = CardParams & {
-    autoRotationDuration?: number;
-};
-declare const _default: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export default _default;
-type CardProps = JSX.IntrinsicElements["group"] & CardParams;
-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

@@ -1,197 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Environment, OrbitControls, Text, useGLTF, useTexture } from "@react-three/drei";
-import { Canvas, useFrame } from "@react-three/fiber";
-import { Result } from "@swan-io/boxed";
-import { useEffect, useRef, useState } from "react";
-import * as THREE from "three";
-import { match, P } from "ts-pattern";
-import { isNotNullish, isNullish } from "../utils/nullish";
-import { createSvgImage, getMonochromeSvg } from "../utils/svg";
-/*
-This Module exports 2 components:
-- default export: A react-three-fiber scene which can be integrated in any react project
-(We use default export to be able to use React.lazy to load this component asynchronously without impacting bundle size)
-- Card component: which can be use for developers who already have a react-three-fiber scene or want to create there own scene
-
-Here are some details about choices made for this components:
-:one: Textures
-Textures aren't integrated in gltf export because it will force all developers to put texture files in their public folder.
-By using ?url import and `useTexture` hook, Vite will put textures in dist folder for all developers who use this component.
-
-:two: Logo integration
-There is an SVGLoader for threejs but it doesn't support all svg features.
-So to be sure to support all svg features, we transform the SVG into Image element to create a texture.
-And this texture is used as an alpha map on a plane.
-
-:three: Mastercard shiny text on back of card
-To reproduce the shiny effect on the back of the card, we inject a custom shader in rainbow_mastercard material.
-This custom shader chunk change the diffuse color depending on camera position.
-*/
-// Uses alpha channel instead of green to make pixel transparent on logo plane
-const logoAlphaMapFragmentShader = `
-diffuseColor.a *= texture2D(alphaMap, vAlphaMapUv).a;
-`;
-const shinyColorFragmentShader = `
-float red = cameraPosition.x * cameraPosition.z;
-float green = cameraPosition.y * cameraPosition.z;
-float blue = 0.1;
-
-red = sin(red / 5.0) + 1.0 / 2.0;
-green = sin(green / 5.0) + 1.0 / 2.0;
-
-vec3 shinyColor = vec3(red, green, blue);
-float shinyFactor = 0.35;
-
-diffuseColor.rgb = mix(diffuseColor.rgb, shinyColor, shinyFactor);
-`;
-const ENV_MAP_INTENSITY = 3;
-const CARD_WIDTH = 8.56;
-const CARD_HEIGHT = 5.4;
-const FRONT_TEXT_POSITION = 0.04;
-const BACK_TEXT_POSITION = -FRONT_TEXT_POSITION;
-const LOGO_MARGIN_TOP = 0.3;
-const LOGO_MARGIN_RIGHT = 0.3;
-const LOGO_MAX_WIDTH = 5; // in cm
-const LOGO_MAX_HEIGHT = 1; // in cm
-const computeCardLogoSize = (logoSize) => {
-    const logoRatio = logoSize.width / logoSize.height;
-    const cardSpaceRatio = LOGO_MAX_WIDTH / LOGO_MAX_HEIGHT;
-    // if logo is wider than available space
-    // logo will have the same width than available space
-    if (logoRatio >= cardSpaceRatio) {
-        const width = LOGO_MAX_WIDTH;
-        const height = width / logoRatio;
-        return { width, height };
-    }
-    else {
-        // if logo is higher than available space
-        // logo will have the same height than available space
-        const height = LOGO_MAX_HEIGHT;
-        const width = height * logoRatio;
-        return { width, height };
-    }
-};
-// Use export default for React.lazy
-export default (props) => {
-    return (_jsxs(Canvas, { camera: { position: [0, 0, 12], fov: 50 }, children: [_jsx(OrbitControls, { enablePan: false, enableZoom: false }), _jsx(CardScene, { ...props })] }));
-};
-const CardScene = ({ autoRotationDuration, ...props }) => {
-    const { assetsUrls } = props;
-    const card = useRef(null);
-    useFrame(({ clock }) => {
-        if (autoRotationDuration != null && card.current != null) {
-            card.current.rotation.y = (clock.getElapsedTime() / autoRotationDuration) * Math.PI * 2;
-        }
-    });
-    return (_jsxs(_Fragment, { children: [_jsx("ambientLight", { color: 0xffffff, intensity: 1 }), _jsx("pointLight", { intensity: 0.2, decay: 2, position: [-10, -10, -21] }), _jsx("pointLight", { intensity: 0.2, decay: 2, position: [10, 10, 21] }), _jsx(Environment, { files: [
-                    assetsUrls.envPx,
-                    assetsUrls.envNx,
-                    assetsUrls.envPy,
-                    assetsUrls.envNy,
-                    assetsUrls.envPz,
-                    assetsUrls.envNz,
-                ] }), _jsx(Card, { ref: card, ...props })] }));
-};
-// Set color space to sRGB for textures
-const setTextureColorSpace = (texture) => {
-    if (!Array.isArray(texture)) {
-        texture.colorSpace = THREE.SRGBColorSpace;
-    }
-};
-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);
-    const blackTexture = useTexture(assetsUrls.colorBlack, setTextureColorSpace);
-    const chipTexture = useTexture(assetsUrls.chipTexture, setTextureColorSpace);
-    const bandRoughnessTexture = useTexture(assetsUrls.bandRoughness); // keep default color space because it's grayscale
-    // Set environment map intensity for all materials
-    useEffect(() => {
-        Object.values(materials).forEach(material => {
-            material.envMapIntensity = ENV_MAP_INTENSITY;
-        });
-    }, [materials]);
-    // Set rainbow mastercard text custom fragment shader
-    useEffect(() => {
-        materials.rainbow_mastercard.onBeforeCompile = shader => {
-            shader.fragmentShader = shader.fragmentShader.replace("#include <color_fragment>", shinyColorFragmentShader);
-        };
-    }, [materials.rainbow_mastercard]);
-    // Set band roughness and chip texture
-    useEffect(() => {
-        materials.black_band.roughness = 0.8;
-        materials.black_band.roughnessMap = bandRoughnessTexture;
-        materials.chip.map = chipTexture;
-    }, [materials.black_band, materials.chip, bandRoughnessTexture, chipTexture]);
-    // Set color texture
-    useEffect(() => {
-        match(color)
-            .with("Silver", () => {
-            materials.card.map = silverTexture;
-        })
-            .with("Black", () => {
-            materials.card.map = blackTexture;
-        })
-            .otherwise(texture => {
-            materials.card.map = texture;
-        });
-        // force threejs to update material
-        // because sometimes it doesn't apply texture on load randomly
-        materials.card.needsUpdate = true;
-    }, [color, materials.card, silverTexture, blackTexture]);
-    // this avoid to have onSvgError as dependency of the effect below which should run only on logo change
-    const handleSvgError = useRef(onSvgError);
-    useEffect(() => {
-        handleSvgError.current = onSvgError;
-    }, [onSvgError]);
-    // Handle logo
-    useEffect(() => {
-        var _a;
-        if (isNullish(logo)) {
-            setLogoData(null);
-            return;
-        }
-        const image = match(logo)
-            .with(P.instanceOf(HTMLImageElement), image => Result.Ok(image))
-            .otherwise(logo => {
-            // We transform the logo to white to be able to use it as alpha map
-            const whiteLogo = getMonochromeSvg(logo, "white");
-            // Convert to Image element to be able to use it as texture
-            return createSvgImage(whiteLogo);
-        });
-        if (image.isError()) {
-            (_a = handleSvgError.current) === null || _a === void 0 ? void 0 : _a.call(handleSvgError, image.getError());
-            return;
-        }
-        // Compute logo size depending on constraints
-        const { width: logoWidth, height: logoHeight } = computeCardLogoSize(image.get());
-        const alphaMap = new THREE.Texture(image.get());
-        alphaMap.needsUpdate = true;
-        setLogoData({
-            size: [logoWidth, logoHeight],
-            alphaMap,
-        });
-    }, [logo]);
-    const mainTextMaterial = (_jsx("meshStandardMaterial", { color: match(color)
-            .with("Silver", () => 0x000000)
-            .with("Black", () => 0xeeeeee)
-            .otherwise(() => 0xeeeeee), metalness: 0.1, roughness: 0.55, envMapIntensity: ENV_MAP_INTENSITY }));
-    const secondaryTextMaterial = (_jsx("meshStandardMaterial", { color: 0x666666, metalness: 0.1, roughness: 0.55, envMapIntensity: ENV_MAP_INTENSITY }));
-    return (_jsx("group", { ref: ref, ...props, dispose: null, children: _jsxs("mesh", { geometry: nodes.card.geometry, material: materials.card, children: [_jsxs("group", { position: [0, 0, FRONT_TEXT_POSITION], children: [_jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.2, anchorX: "left", anchorY: "bottom", position: [-3.4, -1.95, 0], children: [ownerName, mainTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMarkProRegular, fontSize: 0.03, anchorX: "left", anchorY: "bottom", position: [3.85, -2.15, 0], children: ["TM", mainTextMaterial] })] }), _jsxs("group", { position: [0, 0, BACK_TEXT_POSITION], children: [_jsxs(Text, { font: assetsUrls.fontMarkProRegular, anchorX: "left", anchorY: "bottom", fontSize: 0.12, rotation: [0, Math.PI, 0], position: [4, 2.38, 0], children: ["support@swan.io", secondaryTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMarkProRegular, anchorX: "right", anchorY: "bottom", fontSize: 0.12, rotation: [0, Math.PI, 0], position: [-4, 2.38, 0], children: ["IDEMIA 9 1212121L 09/21", secondaryTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.24, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, 0.68, 0], children: ["Identifier: 0000000000", mainTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.2, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, 0.15, 0], children: ["This card is issued by Swan, pursuant to license", secondaryTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.2, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, -0.15, 0], children: ["from Mastercard International.", secondaryTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.48, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, -1.85, 0], children: [cardNumber, mainTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.29, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, -2.3, 0], children: [expirationDate, mainTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.29, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [2.55, -2.3, 0], children: ["CVC ", cvv, mainTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMarkProRegular, anchorX: "center", anchorY: "bottom", fontSize: 0.36, rotation: [0, Math.PI, 0], position: [-2.35, -1.15, 0], children: ["debit", mainTextMaterial] })] }), _jsx("group", { 
-                    // move group to change scale center at top right corner
-                    position: [
-                        CARD_WIDTH / 2 - LOGO_MARGIN_RIGHT,
-                        CARD_HEIGHT / 2 - LOGO_MARGIN_TOP,
-                        FRONT_TEXT_POSITION,
-                    ], scale: logoScale, children: isNotNullish(logoData) && (_jsxs("mesh", { position: [-logoData.size[0] / 2, -logoData.size[1] / 2, 0], children: [_jsx("planeGeometry", { args: logoData.size }), _jsx("meshStandardMaterial", { ref: material => {
-                                    if (!material) {
-                                        return;
-                                    }
-                                    material.onBeforeCompile = shader => {
-                                        shader.fragmentShader = shader.fragmentShader.replace("#include <alphamap_fragment>", logoAlphaMapFragmentShader);
-                                    };
-                                }, color: match(color)
-                                    .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/FilterChooser.d.ts

@@ -1,15 +0,0 @@
-/**
- * @deprecated
- */
-export declare const FilterChooser: <FilterName extends string>({ filters, openFilters, label, title, availableFilters, large, onAddFilter, }: {
-    filters: Partial<Record<FilterName, unknown>>;
-    openFilters: FilterName[];
-    label: string;
-    title?: string;
-    availableFilters: {
-        label: string;
-        name: FilterName;
-    }[];
-    large?: boolean;
-    onAddFilter: (filterName: FilterName) => void;
-}) => import("react/jsx-runtime").JSX.Element;

package/src/components/FilterChooser.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
-import { Pressable, StyleSheet, View } from "react-native";
-import { colors } from "../constants/design";
-import { useDisclosure } from "../hooks/useDisclosure";
-import { isNotNullishOrEmpty } from "../utils/nullish";
-import { FlatList } from "./FlatList";
-import { Icon } from "./Icon";
-import { LakeButton } from "./LakeButton";
-import { LakeText } from "./LakeText";
-import { Popover } from "./Popover";
-import { Space } from "./Space";
-const styles = StyleSheet.create({
-    selected: {
-        color: colors.gray[500],
-    },
-    list: {
-        paddingVertical: 20,
-        marginVertical: 4,
-        minWidth: 250,
-        overflow: "hidden",
-    },
-    item: {
-        display: "flex",
-        paddingHorizontal: 24,
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        paddingVertical: 8,
-    },
-    itemHovered: {
-        backgroundColor: colors.gray[50],
-    },
-    availableFiltersTitle: {
-        paddingHorizontal: 24,
-    },
-});
-/**
- * @deprecated
- */
-export const FilterChooser = ({ filters, openFilters, label, title, availableFilters, large = true, onAddFilter, }) => {
-    const inputRef = useRef(null);
-    const [visible, { close, toggle }] = useDisclosure(false);
-    return (_jsxs(_Fragment, { children: [_jsx(LakeButton, { size: "small", mode: "secondary", color: "gray", onPress: toggle, ref: inputRef, icon: large ? "chevron-down-filled" : "filter-filled", iconPosition: "end", ariaLabel: label, children: large ? label : null }), _jsx(Popover, { role: "listbox", matchReferenceMinWidth: true, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: styles.list, children: [isNotNullishOrEmpty(title) ? (_jsxs(_Fragment, { children: [_jsx(LakeText, { style: styles.availableFiltersTitle, children: title }), _jsx(Space, { height: 8 })] })) : null, _jsx(FlatList, { role: "list", data: availableFilters, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
-                                const isSet = Boolean(filters[item.name]) || openFilters.includes(item.name);
-                                return (_jsxs(Pressable, { style: ({ hovered }) => [styles.item, hovered && styles.itemHovered], role: "button", disabled: isSet, onPress: () => {
-                                        onAddFilter(item.name);
-                                        close();
-                                    }, children: [_jsx(LakeText, { variant: "smallRegular", style: isSet && styles.selected, children: item.label }), isSet && _jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 })] }));
-                            } })] }) })] }));
-};

package/src/components/LakeSearchField.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from "react";
-type Props = {
-    initialValue: string;
-    placeholder: string;
-    onChangeText: (text: string) => void;
-    debounceDuration?: number;
-    maxWidth?: number;
-    children?: ReactNode;
-    renderEnd?: () => ReactNode;
-};
-export declare const LakeSearchField: ({ initialValue, placeholder, onChangeText, debounceDuration, maxWidth: maxWidthProp, renderEnd, children, }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/LakeSearchField.js

@@ -1,102 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from "react";
-import { Pressable, StyleSheet, View } from "react-native";
-import { animations, backgroundColor, colors, radii, spacings } from "../constants/design";
-import { useBoolean } from "../hooks/useBoolean";
-import { useDebounce } from "../hooks/useDebounce";
-import { isNotNullishOrEmpty } from "../utils/nullish";
-import { Icon } from "./Icon";
-import { LakeButton } from "./LakeButton";
-import { LakeTextInput } from "./LakeTextInput";
-import { ResponsiveContainer } from "./ResponsiveContainer";
-import { TransitionView } from "./TransitionView";
-const BREAKPOINT = 350;
-const styles = StyleSheet.create({
-    container: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "flex-end",
-        flexGrow: 1,
-        flexShrink: 1,
-    },
-    input: {
-        transition: "300ms ease-in-out border-color",
-        justifyContent: "flex-end",
-    },
-    focus: {
-        outlineStyle: "none",
-        borderColor: colors.current.primary,
-    },
-    clearButton: {
-        padding: spacings[8],
-        borderRadius: radii[4],
-    },
-    openSearchFieldContainer: {
-        position: "absolute",
-        right: 0,
-        top: 0,
-        bottom: 0,
-    },
-    openSearchField: {
-        position: "absolute",
-        right: 0,
-        top: 0,
-        bottom: 0,
-        boxShadow: `0 0 20px 20px ${backgroundColor.default}`,
-        borderRadius: radii[6],
-    },
-});
-const CollapsibleSearchField = ({ inputRef, placeholder, initialValue, onChange, setFocused, hasFocus, clear, currentValue, renderEnd, }) => {
-    return (_jsxs(View, { children: [_jsx(LakeButton, { mode: "secondary", size: "small", ariaLabel: placeholder, icon: "search-filled", onPress: setFocused.on, pill: currentValue !== "" }), _jsx(TransitionView, { style: styles.openSearchFieldContainer, ...animations.fadeAndSlideInFromRight, children: hasFocus ? (_jsx(View, { style: styles.openSearchField, children: _jsx(ExpandedSearchField, { inputRef: inputRef, placeholder: placeholder, initialValue: initialValue, onChange: onChange, setFocused: setFocused, hasFocus: hasFocus, clear: clear, currentValue: currentValue, renderEnd: renderEnd }) })) : null })] }));
-};
-const ExpandedSearchField = ({ inputRef, placeholder, initialValue, onChange, setFocused, hasFocus, clear, renderEnd, currentValue, }) => {
-    const timeoutRef = useRef(null);
-    return (_jsx(LakeTextInput, { ref: inputRef, autoFocus: hasFocus, icon: "search-filled", placeholder: placeholder, defaultValue: initialValue, inputMode: "search", onChangeText: onChange, hideErrors: true, renderEnd: () => (_jsxs(_Fragment, { children: [isNotNullishOrEmpty(currentValue) && (_jsx(Pressable, { role: "button", style: styles.clearButton, onPress: () => {
-                        if (timeoutRef.current != null) {
-                            clearTimeout(timeoutRef.current);
-                        }
-                        clear();
-                    }, children: _jsx(Icon, { name: "dismiss-filled", size: 12, color: colors.gray[500] }) })), renderEnd === null || renderEnd === void 0 ? void 0 : renderEnd()] })), onFocus: () => {
-            if (timeoutRef.current != null) {
-                clearTimeout(timeoutRef.current);
-            }
-            setFocused.on();
-        }, onBlur: () => {
-            timeoutRef.current = window.setTimeout(() => {
-                setFocused.off();
-            }, 300);
-        }, style: [styles.input, hasFocus && styles.focus] }));
-};
-export const LakeSearchField = ({ initialValue, placeholder, onChangeText, debounceDuration = 500, maxWidth: maxWidthProp = 350, renderEnd, children, }) => {
-    const [hasFocus, setFocused] = useBoolean(false);
-    const inputRef = useRef(null);
-    const [currentValue, setCurrentValue] = useState(initialValue);
-    const onChange = useDebounce((value) => {
-        onChangeText(value);
-        setCurrentValue(value.trim());
-    }, debounceDuration);
-    const clear = useCallback(() => {
-        if (inputRef.current != null) {
-            inputRef.current.clear();
-            inputRef.current.focus();
-            onChangeText("");
-            setCurrentValue("");
-        }
-    }, [onChangeText]);
-    const props = {
-        inputRef,
-        placeholder,
-        initialValue,
-        onChange,
-        setFocused,
-        hasFocus,
-        clear,
-        currentValue,
-        renderEnd,
-    };
-    const maxWidth = Math.max(maxWidthProp, BREAKPOINT);
-    return (_jsx(ResponsiveContainer, { breakpoint: BREAKPOINT, style: [styles.container, { maxWidth }], children: ({ large }) => {
-            const Component = large ? ExpandedSearchField : CollapsibleSearchField;
-            return (_jsxs(_Fragment, { children: [children, _jsx(Component, { ...props })] }));
-        } }));
-};