@swan-io/lake 15.3.1 → 15.4.0

package/src/components/Icon.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from "react";
 import { StyleSheet } from "react-native";
-import { Path, Svg } from "./Svg";
 import customIcons from "../icons/custom-icons.json";
 import fluentIcons from "../icons/fluent-icons.json";
 // This files contains fluent icons which aren't available in 24x24 size
 import fluentResizedIcons from "../icons/fluent-resized-icons.json";
+import { Path, Svg } from "./Svg";
 const paths = {
     ...fluentResizedIcons,
     ...fluentIcons,

package/src/components/InputError.d.ts

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

package/src/components/LakeAlert.d.ts

@@ -11,5 +11,5 @@ type Props = {
     style?: StyleProp<ViewStyle>;
     tag?: string;
 };
-export declare const LakeAlert: ({ anchored, variant, title, subtitle, children, style, callToAction, tag, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeAlert: ({ anchored, variant, title, subtitle, children, style, callToAction, tag, }: Props) => import("react").JSX.Element;
 export {};

package/src/components/LakeAlert.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 { StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";
 import { commonStyles } from "../constants/commonStyles";
@@ -90,5 +90,5 @@ export const LakeAlert = ({ anchored = false, variant, title, subtitle, children
             { backgroundColor: alertBackground[variant], borderColor: alertBorder[variant] },
             anchored ? styles.anchored : { borderLeftColor: alertLeftBorder[variant] },
             style,
-        ], children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [icon != null ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, color: color, size: 20 }), _jsx(Space, { width: 20 })] })) : null, _jsxs(View, { style: commonStyles.fill, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", children: [_jsx(LakeText, { color: color, variant: icon != null ? "regular" : "medium", children: title }), tag && _jsx(Tag, { color: translateColorTag(), children: tag })] }), isNotNullishOrEmpty(subtitle) && _jsx(LakeText, { color: color, children: subtitle })] }), isNotNullish(callToAction) && _jsx(View, { style: styles.callToAction, children: callToAction })] }), isNotNullish(children) && (_jsxs(View, { style: desktop && icon != null && styles.content, children: [_jsx(Space, { height: 12 }), isText(children) ? _jsx(LakeText, { children: children }) : children] }))] }));
+        ], children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [icon != null ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, color: color, size: 20 }), _jsx(Space, { width: 20 })] })) : null, _jsxs(View, { style: commonStyles.fill, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", children: [_jsx(LakeText, { color: color, variant: icon != null ? "regular" : "medium", children: title }), tag && _jsx(Tag, { color: translateColorTag(), children: tag })] }), isNotNullishOrEmpty(subtitle) && _jsx(LakeText, { color: color, children: subtitle })] }), isNotNullish(callToAction) && _jsx(View, { style: styles.callToAction, children: callToAction })] }), isNotNullish(children) && (_jsxs(View, { style: desktop && icon != null && styles.content, children: [_jsx(Space, { height: 12 }), isText(children) ? _jsx(LakeText, { color: color, children: children }) : children] }))] }));
 };

package/src/components/LakeButton.d.ts

@@ -31,11 +31,11 @@ export type ButtonProps = {
     ariaLabel?: string;
     children: ReactNode;
 });
-export declare const LakeButton: import("react").MemoExoticComponent<({ ref, ariaControls, ariaExpanded, ariaLabel, children, color, direction, disabled, icon, grow, iconPosition, loading, mode, onPress, size, iconSize, style, forceBackground, href, hrefAttrs, pill, disabledUntil, ...dataAttributes }: ButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const LakeButton: import("react").MemoExoticComponent<({ ref, ariaControls, ariaExpanded, ariaLabel, children, color, direction, disabled, icon, grow, iconPosition, loading, mode, onPress, size, iconSize, style, forceBackground, href, hrefAttrs, pill, disabledUntil, ...dataAttributes }: ButtonProps) => import("react").JSX.Element>;
 type GroupProps = {
     children: ReactNode;
     justifyContent?: ViewStyle["justifyContent"];
     paddingBottom?: 0 | Spacings;
 };
-export declare const LakeButtonGroup: ({ children, justifyContent, paddingBottom, }: GroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeButtonGroup: ({ children, justifyContent, paddingBottom, }: GroupProps) => import("react").JSX.Element;
 export {};

package/src/components/LakeButton.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 { Option } from "@swan-io/boxed";
 import { Children, Fragment, memo, useEffect, useState } from "react";
 import { ActivityIndicator, StyleSheet, View, } from "react-native";

package/src/components/LakeCheckbox.d.ts

@@ -6,11 +6,11 @@ export type CheckboxProps = {
     disabled?: boolean;
     isError?: boolean;
 };
-export declare const LakeCheckbox: ({ value, color, disabled, isError, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeCheckbox: ({ value, color, disabled, isError, }: CheckboxProps) => import("react").JSX.Element;
 export type LabelledCheckboxProps = CheckboxProps & {
     onValueChange: (value: boolean) => void;
     label: ReactNode;
     disabled?: boolean;
     isError?: boolean;
 };
-export declare const LakeLabelledCheckbox: ({ value, color, label, onValueChange, disabled, isError, }: LabelledCheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeLabelledCheckbox: ({ value, color, label, onValueChange, disabled, isError, }: LabelledCheckboxProps) => import("react").JSX.Element;

package/src/components/LakeCheckbox.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 { useEffect, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { colors, radii } from "../constants/design";
@@ -39,7 +39,7 @@ const styles = StyleSheet.create({
 export const LakeCheckbox = ({ value, color = "current", disabled = false, isError = false, }) => {
     const isFirstRender = useRef(true);
     const [shouldAnimate, setShouldAnimate] = useState(false);
-    // biome-ignore lint/correctness/useExhaustiveDependencies(value):
+    // biome-ignore lint/correctness/useExhaustiveDependencies(value): rerun effect only when value changes
     useEffect(() => {
         if (!isFirstRender.current) {
             setShouldAnimate(true);

package/src/components/LakeCombobox.d.ts

@@ -28,4 +28,4 @@ export type LakeComboboxProps<I> = {
     id?: string;
     readOnly?: boolean;
 };
-export declare const LakeCombobox: <I>({ ref, inputRef, value, items, itemHeight, nbItemsDisplayed, ListFooterComponent, onChange, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled, emptyResult, readOnly, id, error, hideErrors, }: LakeComboboxProps<I>) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeCombobox: <I>({ ref, inputRef, value, items, itemHeight, nbItemsDisplayed, ListFooterComponent, onChange, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled, emptyResult, readOnly, id, error, hideErrors, }: LakeComboboxProps<I>) => import("react").JSX.Element;

package/src/components/LakeCopyButton.d.ts

@@ -6,5 +6,5 @@ type Props = {
     valueToCopy: string;
 };
 export declare const copyButtondefaultSize = 21;
-export declare const LakeCopyButton: ({ color, copiedText, copyText, size, valueToCopy, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeCopyButton: ({ color, copiedText, copyText, size, valueToCopy, }: Props) => import("react").JSX.Element;
 export {};

package/src/components/LakeDownloadButton.d.ts

@@ -2,5 +2,5 @@ type Props = {
     url: string;
     filename: string;
 };
-export declare const LakeDownloadButton: ({ url, filename }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeDownloadButton: ({ url, filename }: Props) => import("react").JSX.Element;
 export {};

package/src/components/LakeHeading.d.ts

@@ -31,5 +31,5 @@ type Props = Except<TextProps, "role"> & {
     userSelect?: TextStyle["userSelect"];
     variant?: HeadingVariant;
 };
-export declare const LakeHeading: ({ ref, align, children, color, level, style, userSelect, variant, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeHeading: ({ ref, align, children, color, level, style, userSelect, variant, ...props }: Props) => import("react").JSX.Element;
 export {};

package/src/components/LakeLabel.d.ts

@@ -16,5 +16,5 @@ type Props = {
     style?: StyleProp<ViewStyle>;
     description?: string;
 };
-export declare const LakeLabel: ({ label, optionalLabel, description, extra, readOnly, color, readOnlyColor, type, help, render, actions, style, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeLabel: ({ label, optionalLabel, description, extra, readOnly, color, readOnlyColor, type, help, render, actions, style, }: Props) => import("react").JSX.Element;
 export {};

package/src/components/LakeLabel.js

@@ -1,6 +1,6 @@
-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 { useCallback, useId, useRef } from "react";
-import { StyleSheet, View, unstable_createElement, } from "react-native";
+import { StyleSheet, unstable_createElement, View, } from "react-native";
 import { match } from "ts-pattern";
 import { commonStyles } from "../constants/commonStyles";
 import { colors, fonts, spacings, texts } from "../constants/design";

package/src/components/LakeRadio.d.ts

@@ -5,5 +5,5 @@ type Props = {
     color?: ColorVariants;
     isError?: boolean;
 };
-export declare const LakeRadio: ({ value, disabled, color, isError, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeRadio: ({ value, disabled, color, isError, }: Props) => import("react").JSX.Element;
 export {};

package/src/components/LakeScrollView.d.ts

@@ -6,5 +6,5 @@ type Props = {
     contentContainerStyle?: ViewProps["style"];
     horizontalSafeArea?: number;
 };
-export declare const LakeScrollView: ({ children, horizontalSafeArea, style, contentContainerStyle, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeScrollView: ({ children, horizontalSafeArea, style, contentContainerStyle, }: Props) => import("react").JSX.Element;
 export {};

package/src/components/LakeSelect.d.ts

@@ -40,4 +40,4 @@ export type SelectProps<V, T extends Item<V> = Item<V>> = {
     hasSearch?: boolean;
     searchPlaceholder?: string;
 };
-export declare const LakeSelect: <V, T extends Item<V> = Item<V>>({ ref, title, items, valueStyle, size, color, disabled, mode, placeholder, readOnly, id, matchReferenceMinWidth, matchReferenceWidth, value, error, hideErrors, help, icon, onValueChange, disabledItems, renderItem, PopoverFooter, style, hasSearch, searchPlaceholder, }: SelectProps<V, T>) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeSelect: <V, T extends Item<V> = Item<V>>({ ref, title, items, valueStyle, size, color, disabled, mode, placeholder, readOnly, id, matchReferenceMinWidth, matchReferenceWidth, value, error, hideErrors, help, icon, onValueChange, disabledItems, renderItem, PopoverFooter, style, hasSearch, searchPlaceholder, }: SelectProps<V, T>) => import("react").JSX.Element;

package/src/components/LakeSelect.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 { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { StyleSheet, Text, TextInput, View, } from "react-native";
 import { t } from "../../../shared-business/src/utils/i18n";
@@ -168,18 +168,19 @@ export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "curre
     const isSmall = size === "small";
     const itemValue = items.find(i => i.value === value);
     const onKeyDown = useCallback((event) => {
-        var _a, _b, _c;
+        var _a, _b;
+        var _c;
         // this made a search not visible for user as the native select component
         if (event.nativeEvent.key.length === 1) {
             event.nativeEvent.stopPropagation();
-            const currentlyTyped = `${(_a = currentlyTypedRef.current) !== null && _a !== void 0 ? _a : ""}${event.nativeEvent.key.toLowerCase()}`;
+            const currentlyTyped = `${(_c = currentlyTypedRef.current) !== null && _c !== void 0 ? _c : ""}${event.nativeEvent.key.toLowerCase()}`;
             currentlyTypedRef.current = currentlyTyped;
             const selectedIndex = items.findIndex(item => item.name.toLowerCase().startsWith(currentlyTyped));
             const selected = items[selectedIndex];
             if (selected != null) {
                 if (visible) {
-                    if (((_b = listRef.current) === null || _b === void 0 ? void 0 : _b.element) != null) {
-                        (_c = listItemRefs.current[selectedIndex]) === null || _c === void 0 ? void 0 : _c.focus();
+                    if (((_a = listRef.current) === null || _a === void 0 ? void 0 : _a.element) != null) {
+                        (_b = listItemRefs.current[selectedIndex]) === null || _b === void 0 ? void 0 : _b.focus();
                     }
                 }
                 else {
@@ -200,11 +201,8 @@ export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "curre
             return items;
         }
         const lowerFilter = filter.toLowerCase();
-        return items.filter(item => {
-            var _a;
-            return item.name.toLowerCase().includes(lowerFilter) ||
-                ((_a = item.searchTerms) === null || _a === void 0 ? void 0 : _a.some(term => term.toLowerCase() === lowerFilter));
-        });
+        return items.filter(item => { var _a; return item.name.toLowerCase().includes(lowerFilter) ||
+            ((_a = item.searchTerms) === null || _a === void 0 ? void 0 : _a.some(term => term.toLowerCase() === lowerFilter)); });
     }, [items, filter]);
     useEffect(() => {
         if (!visible) {

package/src/components/LakeSlider.d.ts

@@ -9,5 +9,5 @@ type Props = {
     style?: ViewProps["style"];
     onChange: (value: number) => void;
 };
-export declare const LakeSlider: ({ id, min, max, value, step, disabled, style, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeSlider: ({ id, min, max, value, step, disabled, style, onChange, }: Props) => import("react").JSX.Element;
 export {};

package/src/components/LakeStepper.d.ts

@@ -15,8 +15,8 @@ type Props = {
     activeStepId: string;
     style?: StyleProp<ViewStyle>;
 };
-export declare const LakeStepper: ({ steps, activeStepId, style }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeStepper: ({ steps, activeStepId, style }: Props) => import("react").JSX.Element;
 /** @deprecated Use <MobileStepper> instead */
-export declare const MobileStepTitle: ({ steps, activeStepId }: Props) => import("react/jsx-runtime").JSX.Element | null;
-export declare const MobileStepper: ({ steps, activeStepId }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export declare const MobileStepTitle: ({ steps, activeStepId }: Props) => import("react").JSX.Element | null;
+export declare const MobileStepper: ({ steps, activeStepId }: Props) => import("react").JSX.Element | null;
 export {};

package/src/components/LakeStepper.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Option } from "@swan-io/boxed";
 import { Link } from "@swan-io/chicane";
 import { StyleSheet, View } from "react-native";
-import { P, match } from "ts-pattern";
+import { match, P } from "ts-pattern";
 import { colors } from "../constants/design";
 import { Box } from "./Box";
 import { Grid } from "./Grid";
@@ -89,7 +89,7 @@ export const LakeStepper = ({ steps, activeStepId, style }) => {
             const stepNumber = index + 1;
             const currentId = match(step)
                 .with({ id: P.string }, ({ id }) => id)
-                .with({ children: P.array(P.any) }, ({ children }) => { var _a, _b; return (_b = (_a = children[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : ""; })
+                .with({ children: P.array(P.any) }, ({ children }) => { var _a; var _b; return (_b = (_a = children[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : ""; })
                 .exhaustive();
             const isActive = match(step)
                 .with({ id: activeStepId }, () => true)
@@ -105,7 +105,7 @@ export const LakeStepper = ({ steps, activeStepId, style }) => {
                 .otherwise(() => false);
             const stepUrl = match(step)
                 .with({ id: P.string }, ({ url }) => url)
-                .with({ children: P.array(P.any) }, ({ children }) => { var _a, _b; return (_b = (_a = children[0]) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : ""; })
+                .with({ children: P.array(P.any) }, ({ children }) => { var _a; var _b; return (_b = (_a = children[0]) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : ""; })
                 .exhaustive();
             const subSteps = match(step)
                 .with({ id: P.string }, step => [step])

package/src/components/LakeTagInput.d.ts

@@ -18,4 +18,4 @@ export type LakeTagInputProps = Merge<TextInputProps, {
     onValuesChanged: (values: string[]) => void;
     placeholder?: string;
 }>;
-export declare const LakeTagInput: ({ ref, validator, onFocus: originalOnFocus, onBlur: originalOnBlur, validateOnBlur, values, onValuesChanged, readOnly, disabled, valid, hideErrors, placeholder, help, error, }: LakeTagInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeTagInput: ({ ref, validator, onFocus: originalOnFocus, onBlur: originalOnBlur, validateOnBlur, values, onValuesChanged, readOnly, disabled, valid, hideErrors, placeholder, help, error, }: LakeTagInputProps) => import("react").JSX.Element;

package/src/components/LakeText.d.ts

@@ -33,5 +33,5 @@ type Props = TextProps & {
     variant?: TextVariant;
     tooltip?: Omit<ComponentProps<typeof LakeTooltip>, "children">;
 };
-export declare const LakeText: ({ ref, align, children, color, style, userSelect, variant, tooltip, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeText: ({ ref, align, children, color, style, userSelect, variant, tooltip, ...props }: Props) => import("react").JSX.Element;
 export {};

package/src/components/LakeTextInput.d.ts

@@ -32,4 +32,4 @@ export type LakeTextInputProps = Except<TextInputProps, "editable" | "keyboardTy
     renderEnd?: () => ReactNode;
     containerRef?: Ref<View>;
 };
-export declare const LakeTextInput: ({ ref, ariaExpanded, ariaControls, error, disabled, validating, valid, readOnly, icon, children, unit, units, color, inputMode, hideErrors, onChange, onUnitChange, pattern, style: stylesFromProps, containerStyle: containerStylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline, containerRef, maxCharCount, help, warning, info, renderEnd, ...props }: LakeTextInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeTextInput: ({ ref, ariaExpanded, ariaControls, error, disabled, validating, valid, readOnly, icon, children, unit, units, color, inputMode, hideErrors, onChange, onUnitChange, pattern, style: stylesFromProps, containerStyle: containerStylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline, containerRef, maxCharCount, help, warning, info, renderEnd, ...props }: LakeTextInputProps) => import("react").JSX.Element;

package/src/components/LakeTextInput.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 { useCallback, useRef, useState } from "react";
 import { ActivityIndicator, StyleSheet, TextInput, View, } from "react-native";
 import { commonStyles } from "../constants/commonStyles";

package/src/components/LakeTooltip.d.ts

@@ -21,11 +21,11 @@ type Props = {
     containerStyle?: ViewProps["style"];
     disabled?: boolean;
 };
-export declare const LakeTooltip: ({ ref, content, children, ...rest }: Props) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const LakeTooltip: ({ ref, content, children, ...rest }: Props) => string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
 export declare const InformationTooltip: ({ ref, text, icon, iconSize, }: {
     ref?: Ref<TooltipRef>;
     text: string;
     icon?: IconName;
     iconSize?: number;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export {};

package/src/components/LakeTooltip.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 { memo, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";
@@ -123,4 +123,4 @@ const Tooltip = memo(({ ref, children, content, describedBy, matchReferenceWidth
                                     .with("right", () => "end")
                                     .exhaustive(), style: [styles.arrowBar, styles.arrowBarBottom], children: _jsx(Svg, { width: 16, height: 8, viewBox: "0 0 16 8", children: _jsx(Polygon, { points: "8 8 16 0 0 0", fill: hideArrow ? "transparent" : colors.gray[900] }) }) })) : null] }) }) }))] }));
 });
-export const InformationTooltip = ({ ref, text, icon = "info-regular", iconSize = 24, }) => (_jsx(LakeTooltip, { ref: ref, describedBy: "copy", placement: "right", togglableOnFocus: true, width: 300, content: text, children: _jsx(View, { style: styles.info, children: _jsx(Icon, { name: icon, size: iconSize, color: colors.gray[900] }) }) }));
+export const InformationTooltip = ({ ref, text, icon = "info-regular", iconSize = 24, }) => (_jsx(LakeTooltip, { ref: ref, describedBy: "copy", placement: "center", togglableOnFocus: true, width: 300, content: text, children: _jsx(View, { style: styles.info, children: _jsx(Icon, { name: icon, size: iconSize, color: colors.gray[900] }) }) }));

package/src/components/Link.d.ts

@@ -18,4 +18,4 @@ export type LinkProps = Except<PressableTextProps, "hrefAttrs" | "style" | "onPr
         active: boolean;
     }) => TextProps["children"]);
 };
-export declare const Link: import("react").MemoExoticComponent<({ ref, role, children, disabled, onPress, replace, download, style, target, to, ariaCurrentValue, tabIndex, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const Link: import("react").MemoExoticComponent<({ ref, role, children, disabled, onPress, replace, download, style, target, to, ariaCurrentValue, tabIndex, ...props }: LinkProps) => import("react").JSX.Element>;

package/src/components/ListRightPanel.d.ts

@@ -5,7 +5,7 @@ export declare const ListRightPanelContent: ({ children, large, style, }: {
     children: React.ReactNode;
     large: boolean;
     style?: StyleProp<ViewStyle>;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 type Props<T> = {
     ref?: Ref<FocusTrapRef>;
     items: T[];
@@ -18,5 +18,5 @@ type Props<T> = {
     previousLabel: string;
     nextLabel: string;
 };
-export declare const ListRightPanel: <T>({ ref, items, keyExtractor, activeId, onActiveIdChange, onClose, render, closeLabel, previousLabel, nextLabel, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const ListRightPanel: <T>({ ref, items, keyExtractor, activeId, onActiveIdChange, onClose, render, closeLabel, previousLabel, nextLabel, }: Props<T>) => import("react").JSX.Element;
 export {};

package/src/components/LoadingView.d.ts

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

package/src/components/MultiSelect.d.ts

@@ -21,4 +21,4 @@ export type MultiSelectProps<Value> = {
     values: Value[];
     id?: string;
 };
-export declare const MultiSelect: <Value>({ color, disabled, emptyResultText, enableGroups, filterPlaceholder, items, onValueChange, placeholder, renderTagGroup, error, style, values, id, }: MultiSelectProps<Value>) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: <Value>({ color, disabled, emptyResultText, enableGroups, filterPlaceholder, items, onValueChange, placeholder, renderTagGroup, error, style, values, id, }: MultiSelectProps<Value>) => import("react").JSX.Element;

package/src/components/MultiSelect.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 { Array, Dict, Option } from "@swan-io/boxed";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Pressable, StyleSheet, Text, TextInput, View, } from "react-native";
@@ -151,7 +151,7 @@ export const MultiSelect = ({ color = "gray", disabled = false, emptyResultText,
             setFilter("");
         }
     }, [visible]);
-    // biome-ignore lint/correctness/useExhaustiveDependencies(values):
+    // biome-ignore lint/correctness/useExhaustiveDependencies(values): rerun effect only when values change
     useEffect(() => {
         var _a, _b;
         if (shouldScrollToBottomRef.current) {

package/src/components/PlainListView.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from "react";
 import { ViewStyle } from "react-native";
-import { ColumnCellConfig, ColumnTitleConfig, LinkConfig } from "./VirtualizedList";
+import { ColumnCellConfig, ColumnTitleConfig, LinkConfig, VirtualizedListPlaceholder } from "./VirtualizedList";
 export type { LinkConfig } from "./VirtualizedList";
 export type ColumnConfig<T, ExtraInfo> = {
     id: string;
@@ -37,11 +37,5 @@ type Props<T, ExtraInfo> = {
     stickyOffset?: number;
     headerBackgroundColor?: string;
 };
-export declare const PlainListView: <T, ExtraInfo>({ data: originalData, keyExtractor, rowHeight, groupHeaderHeight, headerHeight, columns, smallColumns, extraInfo, onEndReached, onEndReachedThresholdPx, headerStyle, rowStyle, getRowLink, activeRowId, renderEmptyList, onActiveRowChange, groupBy, loading, breakpoint, withoutScroll, stickyOffset, headerBackgroundColor, }: Props<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
-export declare const PlainListViewPlaceholder: ({ count, rowHeight, groupHeaderHeight, headerHeight, marginHorizontal, }: {
-    count: number;
-    rowHeight: number;
-    groupHeaderHeight?: number;
-    headerHeight?: number;
-    marginHorizontal?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const PlainListView: <T, ExtraInfo>({ data: originalData, keyExtractor, rowHeight, groupHeaderHeight, headerHeight, columns, smallColumns, extraInfo, onEndReached, onEndReachedThresholdPx, headerStyle, rowStyle, getRowLink, activeRowId, renderEmptyList, onActiveRowChange, groupBy, loading, breakpoint, withoutScroll, stickyOffset, headerBackgroundColor, }: Props<T, ExtraInfo>) => import("react").JSX.Element;
+export declare const PlainListViewPlaceholder: typeof VirtualizedListPlaceholder;

package/src/components/PlainListView.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 { cloneElement, Fragment, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
 import { StyleSheet, View } from "react-native";
 import { commonStyles } from "../constants/commonStyles";

package/src/components/PopoverContent.d.ts

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

package/src/components/Pressable.js

@@ -17,7 +17,7 @@ const styles = StyleSheet.create({
     },
 });
 const getPressable = (
-// biome-ignore lint/suspicious/noExplicitAny:
+// biome-ignore lint/suspicious/noExplicitAny: keep exception for generic component type
 Component, config = {}) => {
     const { applyPressStyle = true } = config;
     return (props) => {
@@ -66,14 +66,14 @@ Component, config = {}) => {
             onHoverEnd: onHoverOut,
         });
         const interactionState = { hovered, focused, pressed };
-        // biome-ignore lint/correctness/useExhaustiveDependencies(hostRef):
+        // biome-ignore lint/correctness/useExhaustiveDependencies(hostRef): keep hostRef in dependency to avoid breaking change
         const blurHandler = useCallback((e) => {
             if (e.nativeEvent.target === hostRef.current) {
                 setFocused(false);
                 onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
             }
         }, [hostRef, setFocused, onBlur]);
-        // biome-ignore lint/correctness/useExhaustiveDependencies(hostRef):
+        // biome-ignore lint/correctness/useExhaustiveDependencies(hostRef): keep hostRef in dependency to avoid breaking change
         const focusHandler = useCallback((e) => {
             if (e.nativeEvent.target === hostRef.current) {
                 setFocused(true);

package/src/components/ProgressTracker.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+export type ProgressTrackerStepStatus = "done" | "active" | "future";
+export type ProgressTrackerChecklistItem = {
+    label: string;
+    isDone: boolean;
+    help?: ReactNode;
+};
+export type ProgressTrackerStep = {
+    id: string;
+    label: string;
+    status: ProgressTrackerStepStatus;
+    badge?: ReactNode;
+    checklist?: ProgressTrackerChecklistItem[];
+    message?: ReactNode;
+};
+type Props = {
+    steps: ProgressTrackerStep[];
+    style?: StyleProp<ViewStyle>;
+};
+export declare const ProgressTracker: ({ steps, style }: Props) => import("react").JSX.Element;
+export {};

package/src/components/ProgressTracker.js

@@ -0,0 +1,71 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { StyleSheet, View } from "react-native";
+import { match } from "ts-pattern";
+import { backgroundColor, colors, spacings } from "../constants/design";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { LakeText } from "./LakeText";
+import { LakeTooltip } from "./LakeTooltip";
+import { Space } from "./Space";
+const CIRCLE_SIZE = 24;
+const CHECKLIST_RING_SIZE = 14;
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: "row",
+        alignItems: "stretch",
+    },
+    rail: {
+        width: CIRCLE_SIZE,
+        alignItems: "center",
+    },
+    circle: {
+        width: CIRCLE_SIZE,
+        height: CIRCLE_SIZE,
+        borderRadius: CIRCLE_SIZE / 2,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    circleDone: {
+        backgroundColor: colors.positive[500],
+    },
+    circleActive: {
+        backgroundColor: backgroundColor.accented,
+        borderWidth: 2,
+        borderColor: colors.gray[900],
+    },
+    circleFuture: {
+        backgroundColor: colors.gray[100],
+    },
+    connector: {
+        flexGrow: 1,
+        width: 1,
+        backgroundColor: colors.gray[200],
+    },
+    content: {
+        flex: 1,
+    },
+    contentSpacing: {
+        paddingBottom: spacings[24],
+    },
+    labelRow: {
+        minHeight: CIRCLE_SIZE,
+    },
+    checklistRing: {
+        width: CHECKLIST_RING_SIZE,
+        height: CHECKLIST_RING_SIZE,
+        borderRadius: CHECKLIST_RING_SIZE / 2,
+        borderWidth: 1,
+        borderColor: colors.gray[300],
+    },
+});
+export const ProgressTracker = ({ steps, style }) => {
+    return (_jsx(View, { role: "list", style: style, children: steps.map((step, index) => {
+            const isLast = index === steps.length - 1;
+            return (_jsxs(View, { role: "listitem", "aria-current": step.status === "active" ? "step" : undefined, style: styles.row, children: [_jsxs(View, { style: styles.rail, children: [match(step.status)
+                                .with("done", () => (_jsx(View, { style: [styles.circle, styles.circleDone], children: _jsx(Icon, { name: "checkmark-filled", size: 14, color: colors.positive.contrast }) })))
+                                .with("active", () => (_jsx(View, { style: [styles.circle, styles.circleActive], children: _jsx(LakeText, { variant: "smallSemibold", color: colors.gray[900], children: index + 1 }) })))
+                                .with("future", () => (_jsx(View, { style: [styles.circle, styles.circleFuture], children: _jsx(LakeText, { variant: "smallSemibold", color: colors.gray[500], children: index + 1 }) })))
+                                .exhaustive(), !isLast && _jsx(View, { style: styles.connector })] }), _jsx(Space, { width: 12 }), _jsxs(View, { style: [styles.content, !isLast && styles.contentSpacing], children: [_jsxs(Box, { direction: "row", alignItems: "center", style: styles.labelRow, children: [_jsx(LakeText, { variant: "smallMedium", color: step.status === "future" ? colors.gray[500] : colors.gray[900], children: step.label }), step.badge != null && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), step.badge] }))] }), step.checklist != null && step.checklist.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 12 }), step.checklist.map((item, itemIndex) => (_jsxs(Fragment, { children: [itemIndex > 0 && _jsx(Space, { height: 8 }), _jsxs(Box, { direction: "row", alignItems: "center", children: [item.isDone ? (_jsx(Icon, { name: "checkmark-filled", size: CHECKLIST_RING_SIZE, color: colors.positive[500] })) : (_jsx(View, { style: styles.checklistRing })), _jsx(Space, { width: 8 }), _jsx(LakeText, { variant: "smallRegular", color: colors.gray[700], children: item.label }), item.help != null && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 4 }), _jsx(LakeTooltip, { content: item.help, placement: "center", togglableOnFocus: true, describedBy: "copy", width: 300, children: _jsx(Icon, { name: "info-regular", size: CHECKLIST_RING_SIZE, color: colors.gray[900] }) })] }))] })] }, itemIndex)))] })), step.message != null && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 12 }), step.message] }))] })] }, step.id));
+        }) }));
+};

package/src/components/ProjectEnvTag.d.ts

@@ -2,5 +2,5 @@ type Props = {
     projectEnv: "Live" | "Sandbox";
     iconOnly?: boolean;
 };
-export declare const ProjectEnvTag: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ProjectEnvTag: (props: Props) => import("react").JSX.Element;
 export {};

package/src/components/QuickActions.d.ts

@@ -13,5 +13,5 @@ export type QuickAction = {
 type Props = {
     actions: QuickAction[];
 };
-export declare const QuickActions: ({ actions }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const QuickActions: ({ actions }: Props) => import("react").JSX.Element;
 export {};

package/src/components/QuickActions.js

@@ -39,13 +39,10 @@ const styles = StyleSheet.create({
     },
 });
 export const QuickActions = ({ actions }) => {
-    return (_jsx(View, { style: styles.container, children: actions.map((action, index) => {
-            var _a, _b;
-            return (_jsx(LakeTooltip, { content: action.tooltipText, placement: "right", containerStyle: styles.actionContainer, disabled: action.tooltipDisabled === true || isNullishOrEmpty(action.tooltipText), children: _jsxs(Pressable, { onPress: action.onPress, style: [styles.action, action.disabled === true && styles.disabled], disabled: action.isLoading === true || action.disabled === true, children: [_jsx(View, { style: [
-                                styles.icon,
-                                action.backgroundColor != null
-                                    ? { backgroundColor: action.backgroundColor, borderColor: action.backgroundColor }
-                                    : null,
-                            ], children: action.isLoading === true ? (_jsx(ActivityIndicator, { color: (_a = action.color) !== null && _a !== void 0 ? _a : colors.gray[300], size: 16 })) : (_jsx(Icon, { name: action.icon, size: 16, color: (_b = action.color) !== null && _b !== void 0 ? _b : colors.gray[300] })) }), _jsx(Space, { height: 8 }), _jsx(LakeText, { variant: "smallRegular", align: "center", style: styles.label, children: action.label })] }, index) }, index));
-        }) }));
+    return (_jsx(View, { style: styles.container, children: actions.map((action, index) => { var _a, _b; return (_jsx(LakeTooltip, { content: action.tooltipText, placement: "right", containerStyle: styles.actionContainer, disabled: action.tooltipDisabled === true || isNullishOrEmpty(action.tooltipText), children: _jsxs(Pressable, { onPress: action.onPress, style: [styles.action, action.disabled === true && styles.disabled], disabled: action.isLoading === true || action.disabled === true, children: [_jsx(View, { style: [
+                            styles.icon,
+                            action.backgroundColor != null
+                                ? { backgroundColor: action.backgroundColor, borderColor: action.backgroundColor }
+                                : null,
+                        ], children: action.isLoading === true ? (_jsx(ActivityIndicator, { color: (_a = action.color) !== null && _a !== void 0 ? _a : colors.gray[300], size: 16 })) : (_jsx(Icon, { name: action.icon, size: 16, color: (_b = action.color) !== null && _b !== void 0 ? _b : colors.gray[300] })) }), _jsx(Space, { height: 8 }), _jsx(LakeText, { variant: "smallRegular", align: "center", style: styles.label, children: action.label })] }, index) }, index)); }) }));
 };

package/src/components/RadioGroup.d.ts

@@ -16,4 +16,4 @@ export type RadioGroupProps<V> = {
     hideErrors?: boolean;
     onValueChange: (value: V) => void;
 };
-export declare function RadioGroup<V>({ items, direction, color, disabled, hideErrors, error, help, value, onValueChange, }: RadioGroupProps<V>): import("react/jsx-runtime").JSX.Element;
+export declare function RadioGroup<V>({ items, direction, color, disabled, hideErrors, error, help, value, onValueChange, }: RadioGroupProps<V>): import("react").JSX.Element;

package/src/components/RadioGroup.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 { Fragment } from "react";
 import { StyleSheet } from "react-native";
 import { colors, spacings } from "../constants/design";