@swan-io/lake 2.7.2 → 2.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "2.7.2",
+  "version": "2.7.4",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"

package/src/components/Card3dPreview.d.ts

@@ -1,5 +1,20 @@
 /// <reference types="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 = {
     ownerName: string;
     cardNumber: string;
@@ -8,6 +23,7 @@ type CardParams = {
     color: "Silver" | "Black";
     logo: SVGElement | null;
     logoScale: number;
+    assetsUrls: Card3dAssetsUrls;
     onSvgError?: (code: string) => void;
 };
 type Props = CardParams & {

package/src/components/Card3dPreview.js

@@ -4,20 +4,6 @@ import { Canvas, useFrame } from "@react-three/fiber";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import * as THREE from "three";
 import { match } from "ts-pattern";
-import envNxUrl from "../assets/3d-card/environment/nx.png?url";
-import envNyUrl from "../assets/3d-card/environment/ny.png?url";
-import envNzUrl from "../assets/3d-card/environment/nz.png?url";
-import envPxUrl from "../assets/3d-card/environment/px.png?url";
-import envPyUrl from "../assets/3d-card/environment/py.png?url";
-import envPzUrl from "../assets/3d-card/environment/pz.png?url";
-import fontMaisonNeueBookUrl from "../assets/3d-card/model/MaisonNeue-Book.woff?url";
-import fontMarkProRegularUrl from "../assets/3d-card/model/MarkPro-Regular.ttf?url";
-import bandRoughnessUrl from "../assets/3d-card/model/band_roughness.jpg?url";
-import cardGltfUrl from "../assets/3d-card/model/card.gltf?url";
-import chipUrl from "../assets/3d-card/model/chip.jpg?url";
-import colorBlackUrl from "../assets/3d-card/model/color_black.jpg?url";
-import colorSilverUrl from "../assets/3d-card/model/color_silver.jpg?url";
-import shinyColorFragmentShader from "../assets/3d-card/shaders/shinyColorFragment.glsl?raw";
 import { isNotNullish, isNullish } from "../utils/nullish";
 import { createSvgImage, getMonochromeSvg } from "../utils/svg";
 /*
@@ -40,6 +26,19 @@ And this texture is used as an alpha map on a plane.
 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.
 */
+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;
@@ -72,13 +71,21 @@ 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: [envPxUrl, envNxUrl, envPyUrl, envNyUrl, envPzUrl, envNzUrl] }), _jsx(Card, { ref: card, ...props })] }));
+    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) => {
@@ -86,13 +93,13 @@ const setTextureColorSpace = (texture) => {
         texture.colorSpace = THREE.SRGBColorSpace;
     }
 };
-export const Card = forwardRef(({ ownerName, cardNumber, expirationDate, cvv, color, logo, logoScale, onSvgError, ...props }, ref) => {
-    const { nodes, materials } = useGLTF(cardGltfUrl);
+export const Card = forwardRef(({ ownerName, cardNumber, expirationDate, cvv, color, logo, logoScale, assetsUrls, onSvgError, ...props }, ref) => {
+    const { nodes, materials } = useGLTF(assetsUrls.cardGltf);
     const [logoData, setLogoData] = useState(null);
-    const silverTexture = useTexture(colorSilverUrl, setTextureColorSpace);
-    const blackTexture = useTexture(colorBlackUrl, setTextureColorSpace);
-    const chipTexture = useTexture(chipUrl, setTextureColorSpace);
-    const bandRoughnessTexture = useTexture(bandRoughnessUrl); // keep default color space because it's grayscale
+    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 => {
@@ -155,7 +162,7 @@ export const Card = forwardRef(({ ownerName, cardNumber, expirationDate, cvv, co
             .with("Black", () => 0xeeeeee)
             .exhaustive(), 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: fontMaisonNeueBookUrl, fontSize: 0.2, anchorX: "left", anchorY: "bottom", position: [-3.4, -1.95, 0], children: [ownerName, mainTextMaterial] }), _jsxs(Text, { font: fontMarkProRegularUrl, 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: fontMarkProRegularUrl, 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: fontMarkProRegularUrl, 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: fontMaisonNeueBookUrl, fontSize: 0.24, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, 0.68, 0], children: ["Identifier: 0000000000", mainTextMaterial] }), _jsxs(Text, { font: fontMaisonNeueBookUrl, 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: fontMaisonNeueBookUrl, fontSize: 0.2, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, -0.15, 0], children: ["by Mastercard international.", secondaryTextMaterial] }), _jsxs(Text, { font: fontMaisonNeueBookUrl, fontSize: 0.48, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, -1.85, 0], children: [cardNumber, mainTextMaterial] }), _jsxs(Text, { font: fontMaisonNeueBookUrl, fontSize: 0.29, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, -2.3, 0], children: [expirationDate, mainTextMaterial] }), _jsxs(Text, { font: fontMaisonNeueBookUrl, 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: fontMarkProRegularUrl, anchorX: "center", anchorY: "bottom", fontSize: 0.36, rotation: [0, Math.PI, 0], position: [-2.35, -1.15, 0], children: ["debit", mainTextMaterial] })] }), _jsx("group", { 
+    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: ["by 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,

package/src/components/FixedListView.d.ts

@@ -65,9 +65,11 @@ export type FixedListViewProps<T, ExtraInfo> = {
     data: T[];
     keyExtractor: (item: T, index: number) => string;
     highlightedRowId?: string;
+    headerBackgroundColor?: string;
     headerHeight: number;
     rowHeight: number;
     rowVerticalSpacing: number;
+    horizontalPadding?: number;
     extraInfo: ExtraInfo;
     stickedToStartColumns?: ColumnConfig<T, ExtraInfo>[];
     columns: ColumnConfig<T, ExtraInfo>[];
@@ -82,7 +84,8 @@ export type FixedListViewProps<T, ExtraInfo> = {
         count: number;
     };
 };
-export declare const FixedListView: <T, ExtraInfo>({ data: originalData, mode, keyExtractor, highlightedRowId, rowHeight, rowVerticalSpacing, headerHeight, renderThreshold, stickedToStartColumns: initialStickedToStartColumns, columns: initialColumns, stickedToEndColumns: initialStickedToEndColumns, extraInfo, onEndReached, onEndReachedThresholdPx, getRowLink, renderEmptyList, loading, }: FixedListViewProps<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
+export declare const SCROLLBAR_RESERVED_SPACE = 20;
+export declare const FixedListView: <T, ExtraInfo>({ data: originalData, mode, keyExtractor, highlightedRowId, rowHeight, rowVerticalSpacing, horizontalPadding, headerBackgroundColor, headerHeight, renderThreshold, stickedToStartColumns: initialStickedToStartColumns, columns: initialColumns, stickedToEndColumns: initialStickedToEndColumns, extraInfo, onEndReached, onEndReachedThresholdPx, getRowLink, renderEmptyList, loading, }: FixedListViewProps<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
 type PlaceholderProps = {
     count: number;
     rowHeight: number;

package/src/components/FixedListView.js

@@ -50,7 +50,7 @@ import { LakeHeading } from "./LakeHeading";
 import { LakeText } from "./LakeText";
 import { Space } from "./Space";
 const HORIZONTAL_SAFE_AREA = 10;
-const SCROLLBAR_RESERVED_SPACE = 20;
+export const SCROLLBAR_RESERVED_SPACE = 20;
 const styles = StyleSheet.create({
     root: {
         height: 1,
@@ -97,16 +97,12 @@ const styles = StyleSheet.create({
         top: 0,
         bottom: 0,
         right: "100%",
-        width: HORIZONTAL_SAFE_AREA,
-        backgroundColor: backgroundColor.default,
     },
     stickyColumnEndOverflow: {
         position: "absolute",
         top: 0,
         bottom: 0,
         left: "100%",
-        width: HORIZONTAL_SAFE_AREA,
-        backgroundColor: backgroundColor.default,
     },
     rowSegment: {
         position: "absolute",
@@ -128,7 +124,6 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "stretch",
         zIndex: 2,
-        backgroundColor: backgroundColor.default,
     },
     segment: {
         flexDirection: "row",
@@ -177,9 +172,6 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "stretch",
     },
-    stickyRow: {
-    // overflow: "hidden",
-    },
     evenRow: {
         backgroundColor: backgroundColor.accented,
     },
@@ -226,7 +218,6 @@ const styles = StyleSheet.create({
         transitionTimingFunction: "ease-in-out",
     },
     rowBackgroundContainerPlain: {
-        backgroundColor: backgroundColor.default,
         left: -10,
         right: -10,
         boxShadow: `inset 0 -1px ${colors.gray[100]}`,
@@ -414,14 +405,15 @@ const findNextFocusableElement = (sortedCellIds, currentCellIndex, direction) =>
 };
 const EMPTY_COLUMNS = [];
 const ZERO = 0;
-export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor, highlightedRowId, rowHeight, rowVerticalSpacing, headerHeight, renderThreshold = 1000, stickedToStartColumns: initialStickedToStartColumns = EMPTY_COLUMNS, columns: initialColumns, stickedToEndColumns: initialStickedToEndColumns = EMPTY_COLUMNS, extraInfo, onEndReached, onEndReachedThresholdPx = 200, getRowLink, renderEmptyList, loading, }) => {
+export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor, highlightedRowId, rowHeight, rowVerticalSpacing, horizontalPadding = HORIZONTAL_SAFE_AREA, headerBackgroundColor = backgroundColor.default, headerHeight, renderThreshold = 1000, stickedToStartColumns: initialStickedToStartColumns = EMPTY_COLUMNS, columns: initialColumns, stickedToEndColumns: initialStickedToEndColumns = EMPTY_COLUMNS, extraInfo, onEndReached, onEndReachedThresholdPx = 200, getRowLink, renderEmptyList, loading, }) => {
     const [viewId] = useState(() => uuid());
     // Those three refs are used to synchronize the horizontal scroll in the center columns
     const centerHeadersRef = useRef(null);
     const centerColumnsRef = useRef(null);
     const horizontalScrollbarRef = useRef(null);
     const totalRowHeight = rowHeight + rowVerticalSpacing;
-    const totalHeight = originalData.length * totalRowHeight + headerHeight;
+    const rowsHeight = originalData.length * totalRowHeight;
+    const totalHeight = headerHeight + rowsHeight;
     // It might seem off to use the range in state instead of storing scroll/layout and deriving it,
     // but it saves a lot of render phases by allowing to bail out from rendering when the range doesn't change
     const [{ data, range: [renderedRangeStartIndex, renderedRangeEndIndex], }, setDataAndRenderRange,] = useState({ data: originalData, range: [0, 20] });
@@ -560,7 +552,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                     now - lastHorizontalScroll.current.date > SCROLL_THRESHOLD_MS) {
                     const scrollLeft = centerColumns.scrollLeft;
                     setShouldShowStartGradient(scrollLeft > 0);
-                    setShouldShowEndGradient(centerColumns.scrollWidth - HORIZONTAL_SAFE_AREA * 2 >=
+                    setShouldShowEndGradient(centerColumns.scrollWidth - horizontalPadding * 2 >=
                         scrollLeft + centerColumns.clientWidth);
                     centerHeaders.scrollLeft = scrollLeft;
                     horizontalScrollbar.scrollLeft = scrollLeft;
@@ -573,7 +565,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                     now - lastHorizontalScroll.current.date > SCROLL_THRESHOLD_MS) {
                     const scrollLeft = centerHeaders.scrollLeft;
                     setShouldShowStartGradient(scrollLeft > 0);
-                    setShouldShowEndGradient(centerHeaders.scrollWidth - HORIZONTAL_SAFE_AREA * 2 >=
+                    setShouldShowEndGradient(centerHeaders.scrollWidth - horizontalPadding * 2 >=
                         scrollLeft + centerHeaders.clientWidth);
                     centerColumns.scrollLeft = scrollLeft;
                     horizontalScrollbar.scrollLeft = scrollLeft;
@@ -586,7 +578,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                     now - lastHorizontalScroll.current.date > SCROLL_THRESHOLD_MS) {
                     const scrollLeft = horizontalScrollbar.scrollLeft;
                     setShouldShowStartGradient(scrollLeft > 0);
-                    setShouldShowEndGradient(horizontalScrollbar.scrollWidth - HORIZONTAL_SAFE_AREA * 2 >=
+                    setShouldShowEndGradient(horizontalScrollbar.scrollWidth - horizontalPadding * 2 >=
                         scrollLeft + horizontalScrollbar.clientWidth);
                     centerHeaders.scrollLeft = scrollLeft;
                     centerColumns.scrollLeft = scrollLeft;
@@ -602,7 +594,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                 horizontalScrollbar.removeEventListener("scroll", onScrollbarScroll);
             };
         }
-    }, []);
+    }, [horizontalPadding]);
     const onKeyDown = useCallback((event) => {
         const target = event.nativeEvent.target;
         const currentTarget = event.nativeEvent.currentTarget;
@@ -743,9 +735,9 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                 ], children: [_jsx(View, { "aria-busy": isLoading, style: [
                             styles.loadingPlaceholder,
                             {
-                                top: totalHeight,
-                                marginLeft: HORIZONTAL_SAFE_AREA * 2,
-                                marginRight: HORIZONTAL_SAFE_AREA * 2,
+                                top: rowsHeight,
+                                marginLeft: horizontalPadding * 2,
+                                marginRight: horizontalPadding * 2,
                             },
                         ], children: isLoading
                             ? match(mode)
@@ -755,30 +747,39 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                             : null }), _jsx(View, { style: [styles.backgroundRows, { top: headerHeight }], children: backgroundRows }), _jsxs(View, { style: styles.scrollContentContainer, ref: scrollContentsRef, children: [stickedToStartColumns.length > 0 ? (_jsxs(View, { style: [
                                     styles.stickyColumn,
                                     {
-                                        width: stickedToStartColumnsWidth + HORIZONTAL_SAFE_AREA,
-                                        paddingLeft: HORIZONTAL_SAFE_AREA,
+                                        width: stickedToStartColumnsWidth + horizontalPadding,
+                                        paddingLeft: horizontalPadding,
                                     },
-                                ], children: [_jsxs(View, { style: [styles.headingSegment, { height: headerHeight }], children: [_jsx(HeaderSegment, { columns: stickedToStartColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToStartColumnsWidth }), _jsx(View, { style: styles.stickyColumnStartOverflow }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(View, { style: [styles.stickyRow, { height: totalHeight }], children: startRows })] })) : null, _jsxs(View, { style: [
+                                ], children: [_jsxs(View, { style: [
+                                            styles.headingSegment,
+                                            { height: headerHeight, backgroundColor: headerBackgroundColor },
+                                        ], children: [_jsx(HeaderSegment, { columns: stickedToStartColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToStartColumnsWidth }), _jsx(View, { style: [
+                                                    styles.stickyColumnStartOverflow,
+                                                    { width: horizontalPadding, backgroundColor: headerBackgroundColor },
+                                                ] }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(View, { style: { height: rowsHeight }, children: startRows })] })) : null, _jsxs(View, { style: [
                                     styles.centerColumnsContainer,
                                     {
-                                        paddingLeft: stickedToStartColumns.length === 0 ? HORIZONTAL_SAFE_AREA : ZERO,
-                                        paddingRight: stickedToEndColumns.length === 0 ? HORIZONTAL_SAFE_AREA : ZERO,
+                                        paddingLeft: stickedToStartColumns.length === 0 ? horizontalPadding : ZERO,
+                                        paddingRight: stickedToEndColumns.length === 0 ? horizontalPadding : ZERO,
                                     },
-                                ], children: [_jsxs(View, { style: [styles.headingSegment, { height: headerHeight }], children: [_jsx(ScrollView, { ref: centerHeadersRef, horizontal: true, onLayout: onCenterTrackLayout, style: styles.centerColumns, contentContainerStyle: {
+                                ], children: [_jsxs(View, { style: [
+                                            styles.headingSegment,
+                                            { height: headerHeight, backgroundColor: headerBackgroundColor },
+                                        ], children: [_jsx(ScrollView, { ref: centerHeadersRef, horizontal: true, onLayout: onCenterTrackLayout, style: styles.centerColumns, contentContainerStyle: {
                                                     minWidth: centerColumnsWidth +
-                                                        (stickedToStartColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0) +
-                                                        (stickedToEndColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0),
+                                                        (stickedToStartColumns.length === 0 ? horizontalPadding : 0) +
+                                                        (stickedToEndColumns.length === 0 ? horizontalPadding : 0),
                                                 }, children: _jsx(HeaderSegment, { columns: columns, extraInfo: extraInfo, viewId: viewId, width: centerColumnsWidth }) }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(ScrollView, { horizontal: true, ref: centerColumnsRef, style: styles.centerColumns, contentContainerStyle: [
                                             styles.centerColumnsContentContainer,
                                             {
                                                 minWidth: centerColumnsWidth +
-                                                    (stickedToStartColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0) +
-                                                    (stickedToEndColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0),
+                                                    (stickedToStartColumns.length === 0 ? horizontalPadding : 0) +
+                                                    (stickedToEndColumns.length === 0 ? horizontalPadding : 0),
                                             },
                                         ], children: centerRows }), _jsx(ScrollView, { ref: horizontalScrollbarRef, horizontal: true, style: styles.horizontalScrollbar, contentContainerStyle: {
                                             minWidth: centerColumnsWidth +
-                                                (stickedToStartColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0) +
-                                                (stickedToEndColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0),
+                                                (stickedToStartColumns.length === 0 ? horizontalPadding : 0) +
+                                                (stickedToEndColumns.length === 0 ? horizontalPadding : 0),
                                         } }), stickedToStartColumns.length > 0 && hasHorizontalScroll ? (_jsx(View, { style: [
                                             styles.leftToRightGradient,
                                             {
@@ -798,10 +799,16 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                                         ] })) : null] }), stickedToEndColumns.length > 0 ? (_jsxs(View, { style: [
                                     styles.stickyColumn,
                                     {
-                                        width: stickedToEndColumnsWidth + HORIZONTAL_SAFE_AREA,
-                                        paddingRight: HORIZONTAL_SAFE_AREA,
+                                        width: stickedToEndColumnsWidth + horizontalPadding,
+                                        paddingRight: horizontalPadding,
                                     },
-                                ], children: [_jsxs(View, { style: [styles.headingSegment, { height: headerHeight }], children: [_jsx(View, { style: styles.stickyColumnEndOverflow }), _jsx(HeaderSegment, { columns: stickedToEndColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToEndColumnsWidth }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(View, { style: [styles.stickyRow, { height: totalHeight }], children: endRows })] })) : null] })] }), data.length === 0 && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null, _jsx(View, { ref: endFocusAnchorRef, tabIndex: 0 })] }));
+                                ], children: [_jsxs(View, { style: [
+                                            styles.headingSegment,
+                                            { height: headerHeight, backgroundColor: headerBackgroundColor },
+                                        ], children: [_jsx(View, { style: [
+                                                    styles.stickyColumnEndOverflow,
+                                                    { width: horizontalPadding, backgroundColor: headerBackgroundColor },
+                                                ] }), _jsx(HeaderSegment, { columns: stickedToEndColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToEndColumnsWidth }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(View, { style: { height: rowsHeight }, children: endRows })] })) : null] })] }), data.length === 0 && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null, _jsx(View, { ref: endFocusAnchorRef, tabIndex: 0 })] }));
 };
 export const FixedListViewPlaceholder = ({ count, rowHeight, rowVerticalSpacing, groupHeaderHeight, headerHeight, paddingHorizontal = HORIZONTAL_SAFE_AREA, }) => {
     const totalRowHeight = rowHeight + rowVerticalSpacing;

package/src/components/FixedListViewCells.d.ts

@@ -30,7 +30,7 @@ export declare const CopyableRegularTextCell: ({ variant, text, copyWording, cop
     copyWording: string;
     copiedWording: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const BalanceCell: ({ value, currency, originalValue, formatCurrency, textAlign, }: {
+export declare const BalanceCell: ({ value, currency, originalValue, formatCurrency, textAlign, variant, }: {
     value: number;
     currency: string;
     originalValue?: {
@@ -39,11 +39,13 @@ export declare const BalanceCell: ({ value, currency, originalValue, formatCurre
     } | undefined;
     formatCurrency: (value: number, currency: string) => string;
     textAlign?: "left" | "right" | "center" | undefined;
+    variant?: "light" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const LinkCell: ({ children, external, onPress, }: {
+export declare const LinkCell: ({ children, external, onPress, variant, }: {
     children: ReactNode;
     onPress: () => void;
     external?: boolean | undefined;
+    variant?: "light" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const StartAlignedCell: ({ children }: {
     children: ReactNode;

package/src/components/FixedListViewCells.js

@@ -123,8 +123,8 @@ export const CopyableRegularTextCell = ({ variant = "regular", text, copyWording
     return (_jsxs(View, { style: styles.cell, children: [_jsx(LakeTooltip, { placement: "top", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy" ? copyWording : copiedWording, containerStyle: styles.iconContainer, children: _jsx(Pressable, { role: "button", "aria-label": copyWording, onPress: onPress, style: ({ hovered }) => [styles.icon, hovered && styles.underline], children: ({ hovered }) => (_jsx(Icon, { name: hovered ? "copy-filled" : "copy-regular", color: "currentColor", size: 14 })) }) }), _jsx(Space, { width: 4 }), _jsx(LakeText, { color: colors.gray[900], style: styles.regularText, variant: variant, children: text })] }));
 };
 // TODO: handle `+` sign properly
-export const BalanceCell = ({ value, currency, originalValue, formatCurrency, textAlign = "right", }) => {
-    return (_jsxs(View, { style: styles.balanceCellContainer, children: [_jsx(View, { style: styles.cell, children: _jsxs(LakeText, { align: textAlign, color: colors.gray[900], variant: "medium", style: [
+export const BalanceCell = ({ value, currency, originalValue, formatCurrency, textAlign = "right", variant = "medium", }) => {
+    return (_jsxs(View, { style: styles.balanceCellContainer, children: [_jsx(View, { style: styles.cell, children: _jsxs(LakeText, { align: textAlign, color: colors.gray[900], variant: variant, style: [
                         styles.mediumText,
                         {
                             justifyContent: match(textAlign)
@@ -137,11 +137,11 @@ export const BalanceCell = ({ value, currency, originalValue, formatCurrency, te
                         value < 0 && { color: colors.negative.primary },
                     ], children: [value > 0 && "+", formatCurrency(value, currency)] }) }), isNotNullish(originalValue) && originalValue.currency !== currency && (_jsx(View, { style: styles.cell, children: _jsxs(LakeText, { style: styles.mediumText, align: textAlign, color: colors.gray[500], variant: "smallRegular", children: [originalValue.value > 0 && "+", formatCurrency(originalValue.value, originalValue.currency)] }) }))] }));
 };
-export const LinkCell = ({ children, external = false, onPress, }) => {
+export const LinkCell = ({ children, external = false, onPress, variant = "medium", }) => {
     return (_jsxs(View, { style: styles.cell, children: [_jsx(Pressable, { style: ({ hovered }) => [styles.icon, hovered && styles.underline], onPress: event => {
                     event.preventDefault();
                     onPress();
-                }, children: _jsx(Icon, { size: 14, name: external ? "open-regular" : "arrow-right-filled" }) }), _jsx(Space, { width: 8 }), _jsx(LakeText, { color: colors.gray[900], variant: "medium", style: styles.mediumText, children: children })] }));
+                }, children: _jsx(Icon, { size: 14, name: external ? "open-regular" : "arrow-right-filled" }) }), _jsx(Space, { width: 8 }), _jsx(LakeText, { color: colors.gray[900], variant: variant, style: styles.mediumText, children: children })] }));
 };
 export const StartAlignedCell = ({ children }) => {
     return _jsx(View, { style: styles.cell, children: children });

package/src/components/LakeCombobox.js

@@ -141,7 +141,7 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
             close();
         }, 100);
     }, [close]);
-    return (_jsxs(View, { children: [_jsx(LakeTextInput, { ref: inputTextRef, style: styles.input, ariaExpanded: isFocused, ariaControls: isFocused ? suggestionsId : "", enterKeyHint: "search", icon: icon, role: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, hideErrors: hideErrors, onChangeText: onValueChange, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, id: id, readOnly: readOnly }), _jsx(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: ref, autoFocus: true, returnFocus: false, visible: isFocused && !items.isNotAsked(), underlay: false, forcedMode: "Dropdown", children: _jsx(View, { style: [styles.list, { maxHeight: itemHeight * nbItemsDisplayed }], children: items.match({
+    return (_jsxs(View, { children: [_jsx(LakeTextInput, { ref: inputTextRef, style: styles.input, ariaExpanded: isFocused, ariaControls: isFocused ? suggestionsId : "", enterKeyHint: "search", icon: icon, role: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, hideErrors: hideErrors, onChangeText: onValueChange, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, id: id, readOnly: readOnly }), _jsx(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: ref, autoFocus: false, returnFocus: true, visible: isFocused && !items.isNotAsked(), underlay: false, forcedMode: "Dropdown", children: _jsx(View, { style: [styles.list, { maxHeight: itemHeight * nbItemsDisplayed }], children: items.match({
                         NotAsked: () => null,
                         Loading: () => _jsx(LoadingView, { style: styles.loader }),
                         Done: items => items.match({

package/src/components/LakeTextInput.js

@@ -43,11 +43,11 @@ const styles = StyleSheet.create({
         placeholderTextColor: colors.gray[400],
         color: colors.gray[900],
         paddingHorizontal: spacings[8],
-        height: 40,
+        height: 38,
         minWidth: 0,
     },
     multilineInput: {
-        height: "auto",
+        height: "100%",
         padding: spacings[8],
     },
     inputWithUnit: {

package/src/assets/3d-card/shaders/shinyColorFragment.glsl

@@ -1,11 +0,0 @@
-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);