@swan-io/lake 15.3.1 → 15.4.0

package/src/components/ReadOnlyFieldList.d.ts

@@ -2,5 +2,5 @@ import { ReactNode } from "react";
 type Props = {
     children: ReactNode;
 };
-export declare const ReadOnlyFieldList: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ReadOnlyFieldList: ({ children }: Props) => import("react").JSX.Element;
 export {};

package/src/components/ReadOnlyFieldList.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children } from "react";
 import { View } from "react-native";
 import { isNotNullish } from "../utils/nullish";

package/src/components/ResponsiveContainer.d.ts

@@ -9,5 +9,5 @@ type Props = Merge<ViewProps, {
     breakpoint?: number;
     children: (context: Context) => ReactNode;
 }>;
-export declare const ResponsiveContainer: ({ breakpoint, children, style, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ResponsiveContainer: ({ breakpoint, children, style, ...props }: Props) => import("react").JSX.Element;
 export {};

package/src/components/RightPanel.d.ts

@@ -7,5 +7,5 @@ type Props = {
     children: ReactNode | ((context: Context) => ReactNode);
     onPressClose?: () => void;
 };
-export declare const RightPanel: ({ ref, visible, children, onPressClose }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const RightPanel: ({ ref, visible, children, onPressClose }: Props) => import("react").JSX.Element;
 export {};

package/src/components/RightPanel.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { backgroundColor, breakpoints } from "../constants/design";

package/src/components/ScrollView.d.ts

@@ -17,4 +17,4 @@ export type ScrollViewProps = ViewProps & {
     scrollEventThrottle?: number;
     showsScrollIndicators?: boolean;
 };
-export declare const ScrollView: ({ ref, children, contentContainerStyle, horizontal, both, onScroll, scrollEventThrottle, showsScrollIndicators, style, ...viewProps }: ScrollViewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ScrollView: ({ ref, children, contentContainerStyle, horizontal, both, onScroll, scrollEventThrottle, showsScrollIndicators, style, ...viewProps }: ScrollViewProps) => import("react").JSX.Element;

package/src/components/SectionList.d.ts

@@ -28,5 +28,5 @@ type Props<T> = {
     showsScrollIndicators?: boolean;
     style?: StyleProp<ViewStyle>;
 };
-export declare const SectionList: <T>({ ref, ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, horizontal, keyExtractor, onEndReached, onEndReachedThresholdPx, onKeyDown, onScroll, renderItem, renderSectionHeader, role, scrollEventThrottle, sections, showsScrollIndicators, style, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SectionList: <T>({ ref, ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, horizontal, keyExtractor, onEndReached, onEndReachedThresholdPx, onKeyDown, onScroll, renderItem, renderSectionHeader, role, scrollEventThrottle, sections, showsScrollIndicators, style, }: Props<T>) => import("react").JSX.Element;
 export {};

package/src/components/SectionList.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect, useId, useRef } from "react";
 import { StyleSheet, View } from "react-native";
 import { ScrollView } from "./ScrollView";
@@ -16,8 +16,8 @@ export const SectionList = ({ ref, ItemSeparatorComponent, ListEmptyComponent, L
     const scrollTrackerStyle = horizontal
         ? { top: 0, width: onEndReachedThresholdPx }
         : { left: 0, height: onEndReachedThresholdPx };
-    // biome-ignore lint/correctness/useExhaustiveDependencies(onEndReached):
-    // biome-ignore lint/correctness/useExhaustiveDependencies(sections.length):
+    // biome-ignore lint/correctness/useExhaustiveDependencies(onEndReached): re-create an observer only on list length change
+    // biome-ignore lint/correctness/useExhaustiveDependencies(sections.length): re-create an observer only on list length change
     useEffect(() => {
         const element = scrollTrackerRef.current;
         if (element != null) {

package/src/components/SegmentedControl.d.ts

@@ -12,5 +12,5 @@ type Props<T extends string> = {
     mobileBreakpoint?: number;
     onValueChange: (value: T) => void;
 };
-export declare const SegmentedControl: <T extends string>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedControl: <T extends string>(props: Props<T>) => import("react").JSX.Element;
 export {};

package/src/components/SegmentedControl.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
 import { backgroundColor, breakpoints, colors, invariantColors, radii, spacings, } from "../constants/design";

package/src/components/Separator.d.ts

@@ -9,5 +9,5 @@ type LineProps = {
 type Props = LineProps & {
     children?: ReactNode;
 };
-export declare const Separator: ({ horizontal, space, style, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Separator: ({ horizontal, space, style, children }: Props) => import("react").JSX.Element;
 export {};

package/src/components/SidebarNavigationTracker.d.ts

@@ -4,9 +4,9 @@ type Props = {
     contentContainerStyle?: ScrollViewProps["style"];
     children: ScrollViewProps["children"];
 };
-export declare const SidebarNavigationTracker: ({ style, contentContainerStyle, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarNavigationTracker: ({ style, contentContainerStyle, children }: Props) => import("react").JSX.Element;
 type MarkerProps = {
     color: string;
 };
-export declare const SidebarNavigationTrackerActiveMarker: ({ color }: MarkerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarNavigationTrackerActiveMarker: ({ color }: MarkerProps) => import("react").JSX.Element;
 export {};

package/src/components/SidebarNavigationTracker.js

@@ -32,7 +32,8 @@ const Context = createContext((_) => { });
 // using `offsetTop` and `offsetHeight` here to avoid calculations
 // being wrong when ancestor has as CSS transform applied
 const getCoordinates = (element, guide) => {
-    var _a, _b;
+    var _a;
+    var _b;
     const parentTop = (_b = (_a = guide.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().top) !== null && _b !== void 0 ? _b : 0;
     const elementRect = element.getBoundingClientRect();
     return { top: elementRect.top - parentTop, height: elementRect.height };

package/src/components/SmsOpeningAnimation.d.ts

@@ -3,5 +3,5 @@ type Props = {
     playing?: boolean;
     style?: StyleProp<ViewStyle>;
 };
-export declare const SmsOpeningAnimation: ({ playing, style }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const SmsOpeningAnimation: ({ playing, style }: Props) => import("react").JSX.Element;
 export {};

package/src/components/SortBottomPanel.d.ts

@@ -16,5 +16,5 @@ type Props<T extends string> = {
     onChange: (value: SortValue<T>) => void;
     onClose: () => void;
 };
-export declare const SortBottomPanel: <T extends string>({ visible, title, value, fields, onChange, onClose, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SortBottomPanel: <T extends string>({ visible, title, value, fields, onChange, onClose, }: Props<T>) => import("react").JSX.Element;
 export {};

package/src/components/Space.d.ts

@@ -5,5 +5,5 @@ type Props = {
     width?: SpacingValue;
     flexGrow?: number;
 };
-export declare const Space: ({ height, width, flexGrow }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Space: ({ height, width, flexGrow }: Props) => import("react").JSX.Element;
 export {};

package/src/components/Stack.d.ts

@@ -6,5 +6,5 @@ type Props = BoxProps & {
     ref?: Ref<View>;
     space?: SpacingValue;
 };
-export declare const Stack: ({ ref, children, space, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Stack: ({ ref, children, space, ...props }: Props) => import("react").JSX.Element;
 export {};

package/src/components/StepDots.d.ts

@@ -2,5 +2,5 @@ type Props<T extends string> = {
     steps: T[];
     currentStep: T;
 };
-export declare const StepDots: <T extends string>({ steps, currentStep }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const StepDots: <T extends string>({ steps, currentStep }: Props<T>) => import("react").JSX.Element;
 export {};

package/src/components/Suspendable.d.ts

@@ -1,3 +1,3 @@
 import { SuspenseProps } from "react";
-export declare const Suspendable: (props: SuspenseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Suspendable: (props: SuspenseProps) => import("react").JSX.Element;
 export declare const useIsSuspendable: () => boolean;

package/src/components/Suspendable.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Suspense, createContext, useContext } from "react";
+import { createContext, Suspense, useContext } from "react";
 const SuspendableContext = createContext(false);
 export const Suspendable = (props) => {
     return (_jsx(SuspendableContext.Provider, { value: true, children: _jsx(Suspense, { ...props }) }));

package/src/components/Svg.d.ts

@@ -117,22 +117,22 @@ type PolygonProps = CommonProps & {
     fill?: string;
 };
 export declare const Svg: ({ style, ...props }: SvgProps) => import("react").ReactElement<{
-    style: ({
-        display: "flex";
-        flexBasis: string;
-        flexGrow: number;
-        flexShrink: number;
-    } | import("react-native").StyleProp<import("react-native").ViewStyle>)[];
-    testID?: string | undefined | undefined;
-    id?: string | undefined | undefined;
-    role?: import("react-native").WebRole | undefined;
-    tabIndex?: 0 | -1 | undefined;
+    id?: string | undefined;
+    testID?: string | undefined;
     children?: ReactNode;
     transformOrigin?: string;
     height?: number;
     title?: string;
     viewBox?: string;
     width?: number;
+    style: ({
+        display: "flex";
+        flexBasis: string;
+        flexGrow: number;
+        flexShrink: number;
+    } | import("react-native").StyleProp<import("react-native").ViewStyle>)[];
+    tabIndex?: 0 | -1;
+    role?: import("react-native").WebRole;
 }, string | import("react").JSXElementConstructor<any>>;
 export declare const Circle: (props: CircleProps) => import("react").ReactElement<CircleProps, string | import("react").JSXElementConstructor<any>>;
 export declare const Defs: (props: {

package/src/components/Svg.js

@@ -1,4 +1,4 @@
-import { StyleSheet, unstable_createElement as createElement } from "react-native";
+import { unstable_createElement as createElement, StyleSheet } from "react-native";
 const styles = StyleSheet.create({
     svg: {
         display: "flex",

package/src/components/SwanLogo.d.ts

@@ -3,5 +3,5 @@ type Props = {
     color?: string;
     style?: StyleProp<ViewStyle>;
 };
-export declare const SwanLogo: ({ color, style }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const SwanLogo: ({ color, style }: Props) => import("react").JSX.Element;
 export {};

package/src/components/Switch.d.ts

@@ -6,5 +6,5 @@ type Props = {
     onValueChange?: (value: boolean) => void;
     disabled?: boolean;
 };
-export declare const Switch: import("react").MemoExoticComponent<({ ref, value, disabled, onValueChange }: Props) => import("react/jsx-runtime").JSX.Element>;
+export declare const Switch: import("react").MemoExoticComponent<({ ref, value, disabled, onValueChange }: Props) => import("react").JSX.Element>;
 export {};

package/src/components/Switch.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
 import { backgroundColor, colors, shadows } from "../constants/design";

package/src/components/TabView.d.ts

@@ -22,5 +22,5 @@ type Props = {
     padding?: SpacingValue;
     sticky?: boolean;
 };
-export declare const TabView: ({ tabs, otherLabel, hideIfSingleItem, sticky, padding, activeTabId, onChange, }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TabView: ({ tabs, otherLabel, hideIfSingleItem, sticky, padding, activeTabId, onChange, }: Props) => import("react").JSX.Element | null;
 export {};

package/src/components/TabView.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLocation } from "@swan-io/chicane";
 import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, } from "react";
 import { StyleSheet, Text, View, } from "react-native";
-import { P, match } from "ts-pattern";
+import { match, P } from "ts-pattern";
 import { animations, backgroundColor, colors, negativeSpacings, radii, shadows, spacings, texts, } from "../constants/design";
 import { useHover } from "../hooks/useHover";
 import { useMergeRefs } from "../hooks/useMergeRefs";
@@ -290,8 +290,8 @@ export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true, sticky = fa
     const location = useLocation();
     const { path } = location;
     const currentLocationURL = location.toString();
-    // biome-ignore lint/correctness/useExhaustiveDependencies(kept):
-    // biome-ignore lint/correctness/useExhaustiveDependencies(collapsed):
+    // biome-ignore lint/correctness/useExhaustiveDependencies(kept): we need to recalculate the underline position when the kept tabs change
+    // biome-ignore lint/correctness/useExhaustiveDependencies(collapsed): we need to recalculate the underline position when the collapsed tabs change
     useEffect(() => {
         if (isNotNullish(linksRefs.current)) {
             const values = Object.entries(linksRefs.current);

package/src/components/Tag.d.ts

@@ -13,5 +13,5 @@ type Props = {
     style?: StyleProp<ViewStyle>;
     ariaLabel?: string;
 };
-export declare const Tag: ({ children, label, color, size, icon, ariaLabel, onPressRemove, style, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Tag: ({ children, label, color, size, icon, ariaLabel, onPressRemove, style, }: Props) => import("react").JSX.Element;
 export {};

package/src/components/Tag.js

@@ -74,7 +74,7 @@ export const Tag = ({ children, label, color = "gray", size = "small", icon, ari
                 size === "large" && styles.larger,
                 { backgroundColor: tint50 },
                 style,
-            ], children: [hasLabel && (_jsx(Box, { alignItems: "center", direction: "row", style: [styles.label, { backgroundColor: tint100, borderColor: tint200 }], children: _jsx(LakeText, { numberOfLines: 1, variant: "smallMedium", style: styles.unselectable, color: primary, children: label }) })), _jsxs(Box, { alignItems: "center", direction: "row", "aria-label": ariaLabel, style: styles.contents, children: [isNotNullish(icon) ? (_jsx(Box, { style: [styles.icon, { width: size === "large" ? spacings[40] : spacings[24] }], alignItems: "center", justifyContent: "center", children: _jsx(Icon, { name: icon, color: primary, size: 16 }) })) : null, children != null ? (_jsx(Box, { direction: "row", alignItems: "center", style: [styles.text, isNotNullish(icon) ? styles.textWithIcon : null], children: isValidElement(children) ? (children) : (_jsx(LakeText, { numberOfLines: 1, variant: "smallMedium", color: primary, style: styles.textContent, children: children })) })) : null] }), onPressRemove != null ? (_jsx(Pressable, { role: "button", onPress: onPressRemove, style: ({ hovered, pressed }) => [
+            ], children: [hasLabel && (_jsx(Box, { alignItems: "center", direction: "row", style: [styles.label, { backgroundColor: tint100, borderColor: tint200 }], children: _jsx(LakeText, { numberOfLines: 1, variant: "smallMedium", style: styles.unselectable, color: primary, children: label }) })), _jsxs(Box, { alignItems: "center", direction: "row", "aria-label": ariaLabel, style: styles.contents, children: [isNotNullish(icon) ? (_jsx(Box, { style: [styles.icon, { width: size === "large" ? spacings[40] : spacings[24] }], alignItems: "center", justifyContent: "center", children: _jsx(Icon, { name: icon, color: primary, size: 16 }) })) : null, children != null ? (_jsx(Box, { direction: "row", alignItems: "center", style: [styles.text, isNotNullish(icon) ? styles.textWithIcon : null], children: isValidElement(children) ? (children) : (_jsx(LakeText, { numberOfLines: 1, variant: "smallMedium", color: primary, style: styles.textContent, children: children })) })) : null] }), onPressRemove != null ? (_jsx(Pressable, { role: "button", "aria-label": "dismiss", onPress: onPressRemove, style: ({ hovered, pressed }) => [
                         styles.dismiss,
                         {
                             color: primary,

package/src/components/Tick.d.ts

@@ -4,5 +4,5 @@ type Props = {
     color: ColorValue;
     size?: "small" | "medium" | "large";
 };
-export declare const Tick: ({ color, style, size }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Tick: ({ color, style, size }: Props) => import("react").JSX.Element;
 export {};

package/src/components/Tile.d.ts

@@ -5,7 +5,6 @@ type Props = {
     icon?: ReactNode;
     title?: ReactNode;
     description?: ReactNode;
-    headerEnd?: ReactNode;
     paddingVertical?: Spacings;
     paddingHorizontal?: Spacings;
     children?: ReactNode;
@@ -18,17 +17,25 @@ type Props = {
     disabled?: boolean;
     selected?: boolean;
     style?: StyleProp<ViewStyle>;
-};
-export declare const Tile: ({ icon, title, description, headerEnd, footer, flexBasis, children, numberOfLines, paddingVertical, paddingHorizontal, hovered, flexGrow, flexShrink, disabled, selected, style, }: Props) => import("react/jsx-runtime").JSX.Element;
+} & ({
+    collapsible: true;
+    defaultExpanded?: boolean;
+    headerEnd?: never;
+} | {
+    collapsible?: false;
+    defaultExpanded?: never;
+    headerEnd?: ReactNode;
+});
+export declare const Tile: ({ icon, title, description, headerEnd, footer, flexBasis, children, numberOfLines, paddingVertical, paddingHorizontal, hovered, flexGrow, flexShrink, disabled, selected, collapsible, defaultExpanded, style, }: Props) => import("react").JSX.Element;
 export declare const TileFullWidthContent: ({ children, flexGrow, fitToBottom, }: {
     children: ReactNode;
     flexGrow?: number;
     fitToBottom?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 type TileGridProps = {
     breakpoint?: number;
     children: ReactNode;
 };
-export declare const TileGrid: ({ children, breakpoint }: TileGridProps) => import("react/jsx-runtime").JSX.Element;
-export declare const TileRows: ({ children, breakpoint }: TileGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TileGrid: ({ children, breakpoint }: TileGridProps) => import("react").JSX.Element;
+export declare const TileRows: ({ children, breakpoint }: TileGridProps) => import("react").JSX.Element;
 export {};

package/src/components/Tile.js

@@ -1,9 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, Fragment, useCallback, useState, } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, Fragment, useCallback, useId, useState, } from "react";
+import { Pressable, StyleSheet, Text, View, } from "react-native";
 import { backgroundColor, colors, negativeSpacings, radii, shadows, spacings, texts, } from "../constants/design";
+import { useDisclosure } from "../hooks/useDisclosure";
 import { isNotNullish } from "../utils/nullish";
 import { Box } from "./Box";
+import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
 import { ResponsiveContainer } from "./ResponsiveContainer";
 import { Space } from "./Space";
@@ -75,9 +77,33 @@ const styles = StyleSheet.create({
         marginHorizontal: negativeSpacings[32],
         alignSelf: "stretch",
     },
+    chevron: {
+        transitionProperty: "transform",
+        transitionDuration: "200ms",
+    },
+    chevronOpen: {
+        transform: "rotate(180deg)",
+    },
+    collapsibleContent: {
+        display: "grid",
+        gridTemplateRows: "0fr",
+        transitionProperty: "grid-template-rows",
+        transitionDuration: "300ms",
+    },
+    collapsibleContentOpen: {
+        gridTemplateRows: "1fr",
+    },
+    collapsibleInner: {
+        overflow: "hidden",
+    },
 });
-export const Tile = ({ icon, title, description, headerEnd, footer, flexBasis, children, numberOfLines, paddingVertical = 32, paddingHorizontal = 32, hovered = false, flexGrow = 0, flexShrink = 0, disabled = false, selected, style, }) => {
-    return (_jsxs(View, { role: "region", style: [
+export const Tile = ({ icon, title, description, headerEnd, footer, flexBasis, children, numberOfLines, paddingVertical = 32, paddingHorizontal = 32, hovered = false, flexGrow = 0, flexShrink = 0, disabled = false, selected, collapsible = false, defaultExpanded = true, style, }) => {
+    const contentId = useId();
+    const [expanded, { toggle }] = useDisclosure(defaultExpanded);
+    const hasHeader = isNotNullish(title) || isNotNullish(headerEnd) || isNotNullish(description) || collapsible;
+    const header = (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTitleIcon, children: [isNotNullish(icon) && (_jsxs(_Fragment, { children: [icon, _jsx(Space, { height: 12 })] })), isNotNullish(title) && (_jsx(Text, { style: styles.title, role: "heading", "aria-level": 3, children: title }))] }), collapsible ? (_jsx(Icon, { name: "chevron-down-filled", size: 16, color: colors.gray[500], style: [styles.chevron, expanded && styles.chevronOpen] })) : isNotNullish(headerEnd) ? (_jsx(View, { children: headerEnd })) : null] }), isNotNullish(description) && (_jsxs(_Fragment, { children: [isNotNullish(title) && _jsx(Space, { height: 12 }), _jsx(View, { style: styles.descriptionContainer, children: _jsx(LakeText, { numberOfLines: numberOfLines, style: styles.description, children: description }) })] }))] }));
+    const content = (_jsxs(_Fragment, { children: [children, isNotNullish(footer) && (_jsx(View, { style: [styles.footer, { marginTop: paddingVertical, marginBottom: -paddingVertical }], children: footer }))] }));
+    return (_jsx(View, { role: "region", style: [
             styles.container,
             selected === false && styles.unselectedContainer,
             {
@@ -91,7 +117,7 @@ export const Tile = ({ icon, title, description, headerEnd, footer, flexBasis, c
             selected === false && hovered && styles.unselectedHoveredContainer,
             disabled && styles.disabled,
             style,
-        ], children: [(isNotNullish(title) || isNotNullish(headerEnd) || isNotNullish(description)) && (_jsxs(View, { style: styles.headerContainer, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTitleIcon, children: [isNotNullish(icon) && (_jsxs(_Fragment, { children: [icon, _jsx(Space, { height: 12 })] })), isNotNullish(title) && (_jsx(Text, { style: styles.title, role: "heading", "aria-level": 3, children: title }))] }), isNotNullish(headerEnd) ? _jsx(View, { children: headerEnd }) : null] }), isNotNullish(description) && (_jsxs(_Fragment, { children: [isNotNullish(title) && _jsx(Space, { height: 12 }), _jsx(View, { style: styles.descriptionContainer, children: _jsx(LakeText, { numberOfLines: numberOfLines, style: styles.description, children: description }) })] })), isNotNullish(children) && _jsx(Space, { height: 24 })] })), children, isNotNullish(footer) && (_jsx(View, { style: [styles.footer, { marginTop: paddingVertical, marginBottom: -paddingVertical }], children: footer }))] }));
+        ], children: collapsible ? (_jsxs(_Fragment, { children: [hasHeader && (_jsx(Pressable, { role: "button", "aria-expanded": expanded, "aria-controls": contentId, onPress: toggle, style: styles.headerContainer, children: header })), _jsx(View, { id: contentId, "aria-hidden": !expanded, style: [styles.collapsibleContent, expanded && styles.collapsibleContentOpen], children: _jsxs(View, { style: styles.collapsibleInner, children: [isNotNullish(children) && hasHeader && _jsx(Space, { height: 24 }), content] }) })] })) : (_jsxs(_Fragment, { children: [hasHeader && (_jsxs(View, { style: styles.headerContainer, children: [header, isNotNullish(children) && _jsx(Space, { height: 24 })] })), content] })) }));
 };
 export const TileFullWidthContent = ({ children, flexGrow, fitToBottom = false, }) => {
     return (_jsx(View, { style: [styles.fullWidthContent, fitToBottom && styles.fitToBottom, { flexGrow }], children: children }));

package/src/components/TilePlaceholder.d.ts

@@ -1,5 +1,7 @@
-export declare const TilePlaceholder: () => import("react/jsx-runtime").JSX.Element;
+export declare const TilePlaceholder: ({ collapsed }: {
+    collapsed?: boolean;
+}) => import("react").JSX.Element;
 export declare const TileGridPlaceholder: ({ numberOfItems, withTabs, }: {
     numberOfItems?: number;
     withTabs?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/src/components/TilePlaceholder.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { colors, radii } from "../constants/design";
@@ -42,8 +42,8 @@ const styles = StyleSheet.create({
         paddingTop: 61,
     },
 });
-export const TilePlaceholder = () => {
-    return (_jsxs(Tile, { children: [_jsx(View, { style: styles.placeholderTitle }), _jsx(Space, { height: 24 }), _jsxs(View, { style: styles.content, children: [_jsx(View, { style: styles.placeholderText }), _jsx(View, { style: styles.placeholderText }), _jsx(View, { style: styles.placeholderText }), _jsx(View, { style: styles.placeholderText })] })] }));
+export const TilePlaceholder = ({ collapsed = false }) => {
+    return (_jsxs(Tile, { children: [_jsx(View, { style: styles.placeholderTitle }), !collapsed && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsxs(View, { style: styles.content, children: [_jsx(View, { style: styles.placeholderText }), _jsx(View, { style: styles.placeholderText }), _jsx(View, { style: styles.placeholderText }), _jsx(View, { style: styles.placeholderText })] })] }))] }));
 };
 export const TileGridPlaceholder = ({ numberOfItems = 2, withTabs = true, }) => {
     return (_jsx(View, { style: withTabs && styles.withTabs, children: _jsx(TileGrid, { children: useMemo(() => Array(numberOfItems)

package/src/components/TimePicker.d.ts

@@ -30,7 +30,7 @@ export type TimePickerProps = {
     hideErrors?: boolean;
     noSuggestionLabel: string;
 };
-export declare const TimePicker: ({ value, onChangeText, suggestionStart, suggestionEnd, intervalInMinutes, nbMaxSuggestions, suggestionSuffix, readOnly, disabled, error, hideErrors, noSuggestionLabel, }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimePicker: ({ value, onChangeText, suggestionStart, suggestionEnd, intervalInMinutes, nbMaxSuggestions, suggestionSuffix, readOnly, disabled, error, hideErrors, noSuggestionLabel, }: TimePickerProps) => import("react").JSX.Element;
 export type TimeRangePickerProps = {
     value: {
         start?: string;
@@ -51,5 +51,5 @@ export type TimeRangePickerProps = {
     hoursLabel: string;
     noSuggestionLabel: string;
 };
-export declare const TimeRangePicker: ({ value, onChange, intervalInMinutes, nbMaxSuggestions, readOnly, disabled, error, startLabel, endLabel, minutesLabel, hoursLabel, noSuggestionLabel, }: TimeRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimeRangePicker: ({ value, onChange, intervalInMinutes, nbMaxSuggestions, readOnly, disabled, error, startLabel, endLabel, minutesLabel, hoursLabel, noSuggestionLabel, }: TimeRangePickerProps) => import("react").JSX.Element;
 export {};

package/src/components/Toggle.d.ts

@@ -5,5 +5,5 @@ type Props = {
     labelOn: string;
     onToggle: (value: boolean) => void;
 };
-export declare const Toggle: ({ compact, value, labelOff, labelOn, onToggle }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Toggle: ({ compact, value, labelOff, labelOn, onToggle }: Props) => import("react").JSX.Element;
 export {};

package/src/components/Toggle.js

@@ -54,7 +54,7 @@ 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):
+    // biome-ignore lint/correctness/useExhaustiveDependencies(compact): rerun effect only when compact changes
     useEffect(() => {
         // batch measurements
         setTimeout(() => {

package/src/components/TransitionGroupView.d.ts

@@ -7,5 +7,5 @@ type Props = {
     childStyle?: StyleProp<ViewStyle>;
     children: ReactNode;
 };
-export declare const TransitionGroupView: ({ children, enter, leave, style, childStyle }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const TransitionGroupView: ({ children, enter, leave, style, childStyle }: Props) => import("react").JSX.Element;
 export {};

package/src/components/TransitionGroupView.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Array, Option } from "@swan-io/boxed";
 import { Children, useMemo, useReducer, useRef } from "react";
 import { View } from "react-native";
-import { P, match } from "ts-pattern";
+import { match, P } from "ts-pattern";
 import { usePreviousValue } from "../hooks/usePreviousValue";
 import { TransitionView } from "./TransitionView";
 export const TransitionGroupView = ({ children, enter, leave, style, childStyle }) => {

package/src/components/TransitionView.d.ts

@@ -7,5 +7,5 @@ type Props = {
     children: ReactNode | null;
     onLeave?: () => void;
 };
-export declare const TransitionView: ({ enter, leave, style, children, onLeave }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TransitionView: ({ enter, leave, style, children, onLeave }: Props) => import("react").JSX.Element | null;
 export {};

package/src/components/VirtualizedList.d.ts

@@ -49,7 +49,7 @@ export type VirtualizedListProps<T, ExtraInfo> = {
         width: number;
     }) => void;
 };
-export declare const VirtualizedList: <T, ExtraInfo>({ variant, data, stickedToStartColumns, columns, stickedToEndColumns, headerHeight, rowHeight, renderThreshold, onEndReached, onEndReachedThreshold, loading, extraInfo, keyExtractor, marginHorizontal, renderEmptyList, onColumnResize, getRowLink, }: VirtualizedListProps<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
+export declare const VirtualizedList: <T, ExtraInfo>({ variant, data, stickedToStartColumns, columns, stickedToEndColumns, headerHeight, rowHeight, renderThreshold, onEndReached, onEndReachedThreshold, loading, extraInfo, keyExtractor, marginHorizontal, renderEmptyList, onColumnResize, getRowLink, }: VirtualizedListProps<T, ExtraInfo>) => import("react").JSX.Element;
 type VirtualizedListPlaceholderProps = {
     count: number;
     rowHeight: number;
@@ -57,5 +57,5 @@ type VirtualizedListPlaceholderProps = {
     headerHeight?: number;
     marginHorizontal?: string;
 };
-export declare const VirtualizedListPlaceholder: ({ count, rowHeight, groupHeaderHeight, headerHeight, marginHorizontal, }: VirtualizedListPlaceholderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VirtualizedListPlaceholder: ({ count, rowHeight, groupHeaderHeight, headerHeight, marginHorizontal, }: VirtualizedListPlaceholderProps) => import("react").JSX.Element;
 export {};

package/src/components/VirtualizedList.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Option } from "@swan-io/boxed";
 import { cloneElement, memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { StyleSheet, View } from "react-native";
@@ -374,7 +374,7 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
             .toUndefined();
     }, [onLayoutUpdate]);
     // tracks if the threshold to initiate the next data load is reached
-    // biome-ignore lint/correctness/useExhaustiveDependencies(data.length):
+    // biome-ignore lint/correctness/useExhaustiveDependencies(data.length): re-create an observer on list length change
     useEffect(() => {
         const scrollTracker = scrollTrackerRef.current;
         if (scrollTracker != null) {

package/src/components/WithCurrentColor.d.ts

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

package/src/components/WithPartnerAccentColor.d.ts

@@ -4,5 +4,5 @@ type Props = {
     children: ReactNode;
     scoped?: boolean;
 };
-export declare const WithPartnerAccentColor: ({ color, scoped, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const WithPartnerAccentColor: ({ color, scoped, children }: Props) => import("react").JSX.Element;
 export {};

package/src/hooks/useUpdateEffect.js

@@ -2,11 +2,10 @@ import { useEffect } from "react";
 import { useFirstMountState } from "./useFirstMountState";
 export const useUpdateEffect = (effect, deps) => {
     const isFirstMount = useFirstMountState();
-    // biome-ignore lint/correctness/useExhaustiveDependencies(effect):
-    // biome-ignore lint/correctness/useExhaustiveDependencies(isFirstMount):
     useEffect(() => {
         if (!isFirstMount) {
             return effect();
         }
+        // biome-ignore lint/correctness/useExhaustiveDependencies: rerun effect only when deps change
     }, deps);
 };

package/src/utils/highlights.js

@@ -1,7 +1,8 @@
 import { isNullishOrEmpty } from "./nullish";
 const highlightName = "lake-highlight";
 export const setHighlightApi = (text, element, minLength = 2) => {
-    var _a, _b;
+    var _a;
+    var _b;
     if (!("highlights" in CSS)) {
         return;
     }

package/src/utils/string.js

@@ -233,4 +233,4 @@ export const upperCase = (value) => value.toUpperCase();
 export const capitalize = (value) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
 export const uncapitalize = (value) => `${value.charAt(0).toLowerCase()}${value.slice(1)}`;
 export const optionFromString = (value) => value !== "" ? Option.Some(value) : Option.None();
-export const getFlagGlyphName = (flag) => { var _a, _b, _c, _d; return `${(_b = (_a = flag.codePointAt(0)) === null || _a === void 0 ? void 0 : _a.toString(16)) !== null && _b !== void 0 ? _b : ""}-${(_d = (_c = flag.codePointAt(2)) === null || _c === void 0 ? void 0 : _c.toString(16)) !== null && _d !== void 0 ? _d : ""}`; };
+export const getFlagGlyphName = (flag) => { var _a, _b; var _c, _d; return `${(_c = (_a = flag.codePointAt(0)) === null || _a === void 0 ? void 0 : _a.toString(16)) !== null && _c !== void 0 ? _c : ""}-${(_d = (_b = flag.codePointAt(2)) === null || _b === void 0 ? void 0 : _b.toString(16)) !== null && _d !== void 0 ? _d : ""}`; };