@swan-io/lake 1.2.5 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "engines": {
     "node": ">=14.0.0",
     "yarn": "^1.20.0"

package/src/components/Breadcrumbs.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { FocusTrap } from "@swan-io/lake/src/components/FocusTrap";
-import { Icon } from "@swan-io/lake/src/components/Icon";
-import { LakeText } from "@swan-io/lake/src/components/LakeText";
-import { Link } from "@swan-io/lake/src/components/Link";
-import { Space } from "@swan-io/lake/src/components/Space";
-import { TransitionView } from "@swan-io/lake/src/components/TransitionView";
-import { animations, backgroundColor, colors, gray75, radii, shadows, spacings, texts, } from "@swan-io/lake/src/constants/design";
-import { useHover } from "@swan-io/lake/src/hooks/useHover";
-import { usePreviousValue } from "@swan-io/lake/src/hooks/usePreviousValue";
-import { isNotNullish, isNullish } from "@swan-io/lake/src/utils/nullish";
+import { FocusTrap } from "./FocusTrap";
+import { Icon } from "./Icon";
+import { LakeText } from "./LakeText";
+import { Link } from "./Link";
+import { Space } from "./Space";
+import { TransitionView } from "./TransitionView";
+import { animations, backgroundColor, colors, gray75, radii, shadows, spacings, texts, } from "../constants/design";
+import { useHover } from "../hooks/useHover";
+import { usePreviousValue } from "../hooks/usePreviousValue";
+import { isNotNullish, isNullish } from "../utils/nullish";
 import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState, } from "react";
 import { Pressable, StyleSheet, Text, View, } from "react-native";
 import { match, P } from "ts-pattern";

package/src/components/FilterChooser.js

@@ -32,7 +32,7 @@ const styles = StyleSheet.create({
     },
     availableFiltersTitle: {
         ...typography.bodyLarge,
-        color: colors.current.primary,
+        color: colors.current[500],
         paddingHorizontal: 24,
     },
     filterName: {

package/src/components/FlowPresentation.js

@@ -64,7 +64,7 @@ export const FlowPresentation = ({ steps, mode }) => {
         }) })))
         .with("mobile", () => (_jsx(Box, { direction: "column", children: steps.map(({ label }, index) => {
             const isLast = index === steps.length - 1;
-            return (_jsxs(Fragment, { children: [_jsxs(Box, { direction: "row", children: [_jsx(Box, { alignItems: "center", justifyContent: "center", style: styles.mobileNumber, children: _jsx(LakeText, { color: colors.current.primary, variant: "medium", style: styles.mobileNumberText, children: index + 1 }) }), _jsx(Space, { width: 12 }), _jsx(LakeText, { color: colors.gray[400], variant: "smallRegular", children: label })] }), !isLast && (_jsx(Box, { alignItems: "center", style: styles.mobileBarContainer, children: _jsx(View, { style: styles.mobileBar }) }))] }, index));
+            return (_jsxs(Fragment, { children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(Box, { alignItems: "center", justifyContent: "center", style: styles.mobileNumber, children: _jsx(LakeText, { color: colors.current.primary, variant: "medium", style: styles.mobileNumberText, children: index + 1 }) }), _jsx(Space, { width: 12 }), _jsx(LakeText, { color: colors.gray[400], variant: "smallRegular", children: label })] }), !isLast && (_jsx(Box, { alignItems: "center", style: styles.mobileBarContainer, children: _jsx(View, { style: styles.mobileBar }) }))] }, index));
         }) })))
         .exhaustive();
 };

package/src/components/FullViewportLayer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FocusTrap } from "@swan-io/lake/src/components/FocusTrap";
-import { TransitionView } from "@swan-io/lake/src/components/TransitionView";
-import { backgroundColor } from "@swan-io/lake/src/constants/design";
+import { FocusTrap } from "./FocusTrap";
+import { TransitionView } from "./TransitionView";
+import { backgroundColor } from "../constants/design";
 import { Suspense, useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { LoadingView } from "./LoadingView";

package/src/components/Icon.d.ts

@@ -157,6 +157,8 @@ declare const paths: {
     "play-regular": string;
     "preview-link-filled": string;
     "question-circle-regular": string;
+    "receipt-money-filled": string;
+    "receipt-money-regular": string;
     "rocket-regular": string;
     "search-filled": string;
     "send-filled": string;

package/src/components/LakeTextInput.d.ts

@@ -27,7 +27,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<Om
     disabled?: boolean | undefined;
     color?: "warning" | "current" | "gray" | "live" | "sandbox" | "positive" | "negative" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined;
     multiline?: boolean | undefined;
-    icon?: "lake-calendar-arrow-swap" | "lake-card" | "lake-card-one-off" | "lake-card-physical" | "lake-card-recurring" | "lake-card-single-use" | "lake-card-virtual" | "lake-chevron-double" | "lake-clipboard-bullet" | "lake-clock" | "lake-clock-arrow-swap" | "lake-close" | "lake-currencies" | "lake-delivery-grouped" | "lake-delivery-individual" | "lake-document-csv" | "lake-document-jpg" | "lake-document-pdf" | "lake-document-png" | "lake-document-xls" | "lake-email" | "lake-id-card" | "lake-inbox-empty" | "lake-menu" | "lake-people" | "lake-person-arrow-swap" | "lake-phone" | "lake-receipt" | "lake-settings" | "lake-signature" | "lake-transfer" | "lake-world-map" | "add-circle-filled" | "add-circle-regular" | "add-filled" | "approvals-app-filled" | "apps-list-filled" | "apps-list-regular" | "arrow-counterclockwise-filled" | "arrow-down-filled" | "arrow-down-regular" | "arrow-download-filled" | "arrow-left-filled" | "arrow-left-regular" | "arrow-right-filled" | "arrow-right-regular" | "arrow-swap-filled" | "arrow-swap-regular" | "arrow-up-filled" | "arrow-up-regular" | "beaker-filled" | "beaker-regular" | "board-regular" | "box-regular" | "building-bank-filled" | "building-bank-regular" | "building-filled" | "building-multiple-regular" | "building-regular" | "building-shop-regular" | "calendar-ltr-regular" | "cart-regular" | "chat-help-filled" | "chat-help-regular" | "checkmark-circle-regular" | "checkmark-filled" | "chevron-down-filled" | "chevron-left-filled" | "chevron-right-filled" | "chevron-up-down-regular" | "chevron-up-filled" | "clipboard-search-regular" | "clock-filled" | "clock-regular" | "cloud-sync-filled" | "cloud-sync-regular" | "code-filled" | "code-regular" | "color-regular" | "comment-note-regular" | "copy-filled" | "copy-regular" | "cursor-click-regular" | "database-filled" | "database-regular" | "delete-filled" | "delete-regular" | "desktop-regular" | "device-meeting-room-regular" | "dismiss-circle-regular" | "dismiss-filled" | "dismiss-regular" | "document-regular" | "earth-regular" | "edit-filled" | "edit-regular" | "error-circle-filled" | "error-circle-regular" | "eye-filled" | "eye-off-filled" | "eye-regular" | "filter-filled" | "flag-filled" | "flag-regular" | "flash-filled" | "flash-regular" | "form-new-filled" | "form-new-regular" | "hand-right-regular" | "image-add-filled" | "image-add-regular" | "image-filled" | "image-regular" | "info-filled" | "info-regular" | "key-regular" | "link-filled" | "live-filled" | "live-regular" | "lock-closed-filled" | "lock-closed-regular" | "lock-open-filled" | "lock-open-regular" | "mail-filled" | "mail-regular" | "money-regular" | "more-vertical-filled" | "open-filled" | "open-regular" | "options-regular" | "paint-brush-filled" | "paint-brush-regular" | "pause-regular" | "payment-filled" | "payment-regular" | "people-add-regular" | "people-community-filled" | "people-community-regular" | "people-filled" | "people-regular" | "people-team-regular" | "person-accounts-filled" | "person-accounts-regular" | "person-add-regular" | "person-call-filled" | "person-call-regular" | "person-filled" | "person-lock-regular" | "person-regular" | "phone-filled" | "phone-regular" | "pin-regular" | "play-filled" | "play-regular" | "preview-link-filled" | "question-circle-regular" | "rocket-regular" | "search-filled" | "send-filled" | "send-regular" | "settings-filled" | "settings-regular" | "shield-checkmark-filled" | "shield-checkmark-regular" | "shield-error-regular" | "shield-regular" | "sign-out-regular" | "signature-filled" | "signature-regular" | "subtract-circle-filled" | "subtract-circle-regular" | "target-arrow-regular" | "warning-filled" | "warning-regular" | "window-dev-tools-filled" | "window-dev-tools-regular" | undefined;
+    icon?: "lake-calendar-arrow-swap" | "lake-card" | "lake-card-one-off" | "lake-card-physical" | "lake-card-recurring" | "lake-card-single-use" | "lake-card-virtual" | "lake-chevron-double" | "lake-clipboard-bullet" | "lake-clock" | "lake-clock-arrow-swap" | "lake-close" | "lake-currencies" | "lake-delivery-grouped" | "lake-delivery-individual" | "lake-document-csv" | "lake-document-jpg" | "lake-document-pdf" | "lake-document-png" | "lake-document-xls" | "lake-email" | "lake-id-card" | "lake-inbox-empty" | "lake-menu" | "lake-people" | "lake-person-arrow-swap" | "lake-phone" | "lake-receipt" | "lake-settings" | "lake-signature" | "lake-transfer" | "lake-world-map" | "add-circle-filled" | "add-circle-regular" | "add-filled" | "approvals-app-filled" | "apps-list-filled" | "apps-list-regular" | "arrow-counterclockwise-filled" | "arrow-down-filled" | "arrow-down-regular" | "arrow-download-filled" | "arrow-left-filled" | "arrow-left-regular" | "arrow-right-filled" | "arrow-right-regular" | "arrow-swap-filled" | "arrow-swap-regular" | "arrow-up-filled" | "arrow-up-regular" | "beaker-filled" | "beaker-regular" | "board-regular" | "box-regular" | "building-bank-filled" | "building-bank-regular" | "building-filled" | "building-multiple-regular" | "building-regular" | "building-shop-regular" | "calendar-ltr-regular" | "cart-regular" | "chat-help-filled" | "chat-help-regular" | "checkmark-circle-regular" | "checkmark-filled" | "chevron-down-filled" | "chevron-left-filled" | "chevron-right-filled" | "chevron-up-down-regular" | "chevron-up-filled" | "clipboard-search-regular" | "clock-filled" | "clock-regular" | "cloud-sync-filled" | "cloud-sync-regular" | "code-filled" | "code-regular" | "color-regular" | "comment-note-regular" | "copy-filled" | "copy-regular" | "cursor-click-regular" | "database-filled" | "database-regular" | "delete-filled" | "delete-regular" | "desktop-regular" | "device-meeting-room-regular" | "dismiss-circle-regular" | "dismiss-filled" | "dismiss-regular" | "document-regular" | "earth-regular" | "edit-filled" | "edit-regular" | "error-circle-filled" | "error-circle-regular" | "eye-filled" | "eye-off-filled" | "eye-regular" | "filter-filled" | "flag-filled" | "flag-regular" | "flash-filled" | "flash-regular" | "form-new-filled" | "form-new-regular" | "hand-right-regular" | "image-add-filled" | "image-add-regular" | "image-filled" | "image-regular" | "info-filled" | "info-regular" | "key-regular" | "link-filled" | "live-filled" | "live-regular" | "lock-closed-filled" | "lock-closed-regular" | "lock-open-filled" | "lock-open-regular" | "mail-filled" | "mail-regular" | "money-regular" | "more-vertical-filled" | "open-filled" | "open-regular" | "options-regular" | "paint-brush-filled" | "paint-brush-regular" | "pause-regular" | "payment-filled" | "payment-regular" | "people-add-regular" | "people-community-filled" | "people-community-regular" | "people-filled" | "people-regular" | "people-team-regular" | "person-accounts-filled" | "person-accounts-regular" | "person-add-regular" | "person-call-filled" | "person-call-regular" | "person-filled" | "person-lock-regular" | "person-regular" | "phone-filled" | "phone-regular" | "pin-regular" | "play-filled" | "play-regular" | "preview-link-filled" | "question-circle-regular" | "receipt-money-filled" | "receipt-money-regular" | "rocket-regular" | "search-filled" | "send-filled" | "send-regular" | "settings-filled" | "settings-regular" | "shield-checkmark-filled" | "shield-checkmark-regular" | "shield-error-regular" | "shield-regular" | "sign-out-regular" | "signature-filled" | "signature-regular" | "subtract-circle-filled" | "subtract-circle-regular" | "target-arrow-regular" | "warning-filled" | "warning-regular" | "window-dev-tools-filled" | "window-dev-tools-regular" | undefined;
     unit?: string | undefined;
     keyboardType?: TextInputProps["keyboardType"];
     pattern?: string | undefined;

package/src/components/Link.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PressableTextProps } from "@swan-io/lake/src/components/Pressable";
+import { PressableTextProps } from "./Pressable";
 import { HrefAttrs, PressableStateCallbackType, Text, TextProps } from "react-native";
 import { Except } from "type-fest";
 export type LinkProps = Except<PressableTextProps, "hrefAttrs" | "style" | "onPress" | "children"> & {

package/src/components/Link.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLinkProps } from "@swan-io/chicane";
-import { PressableText } from "@swan-io/lake/src/components/Pressable";
-import { isNotNullish } from "@swan-io/lake/src/utils/nullish";
+import { PressableText } from "./Pressable";
+import { isNotNullish } from "../utils/nullish";
 import { forwardRef, memo } from "react";
 export const Link = memo(forwardRef(({ accessibilityRole = "link", children, disabled = false, onPress, replace = false, download = false, style, target, to, ariaCurrentValue = "page", focusable, ...props }, forwardedRef) => {
     const { active, onClick } = useLinkProps({ href: to, replace, target });

package/src/components/ListRightPanel.d.ts

@@ -1,5 +1,11 @@
 import { MutableRefObject } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 import { FocusTrapRef } from "./FocusTrap";
+export declare const ListRightPanelContent: ({ children, large, style, }: {
+    children: React.ReactNode;
+    large: boolean;
+    style?: StyleProp<ViewStyle>;
+}) => JSX.Element;
 type Props<T> = {
     items: T[];
     keyExtractor: (item: T) => string;

package/src/components/ListRightPanel.js

@@ -14,23 +14,26 @@ import { Space } from "./Space";
 import { TransitionView } from "./TransitionView";
 const styles = StyleSheet.create({
     details: {
-        padding: spacings[24],
+        paddingBottom: spacings[24],
         paddingTop: spacings[12],
         flexGrow: 1,
     },
-    detailsLarge: {
-        paddingVertical: spacings[24],
-        paddingTop: spacings[12],
-        paddingHorizontal: spacings[40],
-        flexGrow: 1,
-    },
     detailsContents: {
         ...StyleSheet.absoluteFillObject,
     },
     detailsContainer: {
         flexGrow: 1,
     },
+    content: {
+        paddingHorizontal: spacings[24],
+    },
+    contentLarge: {
+        paddingHorizontal: spacings[40],
+    },
 });
+export const ListRightPanelContent = ({ children, large, style, }) => {
+    return _jsx(View, { style: [large ? styles.contentLarge : styles.content, style], children: children });
+};
 const ListRightPanel_ = forwardRef(({ items, keyExtractor, activeId, onActiveIdChange, onClose, render, closeLabel, previousLabel, nextLabel, }, ref) => {
     const activeItem = items.find(item => keyExtractor(item) === activeId);
     // use `Array.getIndexBy` instead of `Array.findIndex` to avoid -1 value
@@ -50,7 +53,7 @@ const ListRightPanel_ = forwardRef(({ items, keyExtractor, activeId, onActiveIdC
             .when(({ activeItemIndex, previousIndex }) => activeItemIndex > previousIndex, () => animations.fadeAndSlideInFromTop)
             .otherwise(() => null)
         : null;
-    return (_jsx(RightPanel, { ref: ref, visible: activeItem != null, onPressClose: onClose, children: ({ large }) => (_jsxs(View, { style: large ? styles.detailsLarge : styles.details, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", children: [_jsx(LakeButton, { mode: "tertiary", icon: "lake-close", accessibilityLabel: closeLabel, onPress: onClose }), _jsxs(Box, { direction: "row", justifyContent: "spaceBetween", children: [_jsx(LakeButton, { mode: "tertiary", accessibilityLabel: previousLabel, icon: "arrow-left-regular", disabled: activeItemIndex === 0, onPress: () => {
+    return (_jsx(RightPanel, { ref: ref, visible: activeItem != null, onPressClose: onClose, children: ({ large }) => (_jsxs(View, { style: styles.details, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", style: large ? styles.contentLarge : styles.content, children: [_jsx(LakeButton, { mode: "tertiary", icon: "lake-close", accessibilityLabel: closeLabel, onPress: onClose }), _jsxs(Box, { direction: "row", justifyContent: "spaceBetween", children: [_jsx(LakeButton, { mode: "tertiary", accessibilityLabel: previousLabel, icon: "arrow-left-regular", disabled: activeItemIndex === 0, onPress: () => {
                                         if (typeof activeItemIndex === "number") {
                                             Option.fromNullable(items[activeItemIndex - 1]).match({
                                                 Some: item => onActiveIdChange(keyExtractor(item)),

package/src/components/PlainListView.d.ts

@@ -31,6 +31,9 @@ type Props<T, ExtraInfo> = {
         isLoading: boolean;
         count: number;
     };
+    breakpoint?: number;
+    withoutScroll?: boolean;
+    stickyOffset?: number;
 };
-export declare const PlainListView: <T, ExtraInfo>({ data: originalData, keyExtractor, rowHeight, groupHeaderHeight, headerHeight, columns, smallColumns, extraInfo, onEndReached, onEndReachedThresholdPx, getRowLink, activeRowId, renderEmptyList, onActiveRowChange, groupBy, loading, }: Props<T, ExtraInfo>) => JSX.Element;
+export declare const PlainListView: <T, ExtraInfo>({ data: originalData, keyExtractor, rowHeight, groupHeaderHeight, headerHeight, columns, smallColumns, extraInfo, onEndReached, onEndReachedThresholdPx, getRowLink, activeRowId, renderEmptyList, onActiveRowChange, groupBy, loading, breakpoint, withoutScroll, stickyOffset, }: Props<T, ExtraInfo>) => JSX.Element;
 export {};

package/src/components/PlainListView.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cloneElement, Fragment, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
-import { ScrollView, StyleSheet, View, } from "react-native";
+import { ScrollView, StyleSheet, View } from "react-native";
 import { backgroundColor, breakpoints, colors, spacings } from "../constants/design";
 import { useHover } from "../hooks/useHover";
 import { isNotNullish, isNullish } from "../utils/nullish";
 import { PlainListViewPlaceholder, } from "./FixedListView";
 import { LakeHeading } from "./LakeHeading";
 import { ResponsiveContainer } from "./ResponsiveContainer";
+import { commonStyles } from "../constants/commonStyles";
 const INHERIT = "inherit";
 const styles = StyleSheet.create({
     root: {
@@ -15,11 +16,6 @@ const styles = StyleSheet.create({
         flexGrow: 1,
         backgroundColor: backgroundColor.default,
     },
-    container: {
-        height: 1,
-        alignSelf: "stretch",
-        flexGrow: 1,
-    },
     contentContainer: {
         flexDirection: "column",
         alignItems: "stretch",
@@ -50,7 +46,6 @@ const styles = StyleSheet.create({
     },
     stickyHeader: {
         position: "sticky",
-        top: 0,
         backgroundColor: backgroundColor.default90Transparency,
         backdropFilter: "blur(4px)",
         zIndex: 10,
@@ -72,17 +67,19 @@ const styles = StyleSheet.create({
         textDecorationLine: "none",
     },
     emptyListContainer: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
+        ...commonStyles.fill,
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
         padding: spacings[48],
         backgroundColor: backgroundColor.default,
     },
+    scrollTracker: {
+        position: "absolute",
+        left: 0,
+        bottom: 0,
+        right: 0,
+    },
 });
 const ONE = 1;
 const ZERO = 0;
@@ -107,8 +104,9 @@ const Row = ({ id, item, index, rowHeight, columns, extraInfo, isActive, isHover
                 },
             ], nativeID: columnId, children: renderCell({ columnId, item, index, extraInfo, isHovered }) }, columnId))) }));
 };
-export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, groupHeaderHeight, headerHeight, columns, smallColumns = columns, extraInfo, onEndReached, onEndReachedThresholdPx = 200, getRowLink, activeRowId, renderEmptyList, onActiveRowChange, groupBy, loading, }) => {
+export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, groupHeaderHeight, headerHeight, columns, smallColumns = columns, extraInfo, onEndReached, onEndReachedThresholdPx = 200, getRowLink, activeRowId, renderEmptyList, onActiveRowChange, groupBy, loading, breakpoint = breakpoints.large, withoutScroll = false, stickyOffset = 0, }) => {
     const viewId = useId();
+    const scrollTrackerRef = useRef(null);
     const groups = useMemo(() => {
         if (groupBy == null) {
             return new Map([[null, originalData]]);
@@ -122,40 +120,28 @@ export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, gro
     }, [groupBy, originalData]);
     const totalHeight = rowHeight * originalData.length + groups.size * groupHeaderHeight;
     const isLoading = isNotNullish(loading) && loading.isLoading;
-    const hasEndReachedBeenCalled = useRef(false);
-    const lastKnownHeight = useRef(0);
+    const isEmpty = originalData.length === 0;
     const [hoveredRow, setHoveredRow] = useState(undefined);
     const removeHoveredRow = useCallback(() => {
         setHoveredRow(undefined);
     }, []);
-    const onLayout = useCallback(({ nativeEvent: { layout: { height }, }, }) => {
-        lastKnownHeight.current = height;
-        if (isNotNullish(onEndReached) &&
-            !hasEndReachedBeenCalled.current &&
-            height >= totalHeight - onEndReachedThresholdPx) {
-            hasEndReachedBeenCalled.current = true;
-            onEndReached();
-        }
-    }, [onEndReached, onEndReachedThresholdPx, totalHeight]);
     useEffect(() => {
-        if (isNotNullish(onEndReached) &&
-            !hasEndReachedBeenCalled.current &&
-            lastKnownHeight.current >= totalHeight - onEndReachedThresholdPx) {
-            hasEndReachedBeenCalled.current = true;
-            onEndReached();
-            return;
-        }
-        hasEndReachedBeenCalled.current = false;
-    }, [originalData, onEndReached, onEndReachedThresholdPx, totalHeight]);
-    const onScroll = useCallback(({ nativeEvent: { contentOffset: { y }, layoutMeasurement: { height }, contentSize: { height: contentHeight }, }, }) => {
-        lastKnownHeight.current = height;
-        if (isNotNullish(onEndReached) &&
-            !hasEndReachedBeenCalled.current &&
-            y + height >= contentHeight - onEndReachedThresholdPx) {
-            hasEndReachedBeenCalled.current = true;
-            onEndReached();
+        const scrollTracker = scrollTrackerRef.current;
+        if (scrollTracker != null) {
+            const scrollTrackerElement = scrollTracker;
+            const intersectionObserver = new IntersectionObserver(entries => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        if (isNotNullish(onEndReached)) {
+                            onEndReached();
+                        }
+                    }
+                });
+            });
+            intersectionObserver.observe(scrollTrackerElement);
+            return () => intersectionObserver.unobserve(scrollTrackerElement);
         }
-    }, [onEndReached, onEndReachedThresholdPx]);
+    }, [onEndReached]);
     const createRowWrapper = useCallback(({ item, absoluteIndex, extraInfo, }) => {
         const customLinkElement = getRowLink?.({ item, index: absoluteIndex, extraInfo });
         return isNullish(customLinkElement) ? _jsx(View, {}) : customLinkElement;
@@ -169,7 +155,13 @@ export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, gro
             onActiveRowChange?.(element);
         }
     }, [activeRowId, onActiveRowChange]);
-    return (_jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.large, children: ({ large }) => {
+    const listWrapper = useMemo(() => withoutScroll ? (_jsx(View, { style: styles.contentContainer })) : (_jsx(ScrollView, { scrollEventThrottle: 32, contentContainerStyle: [
+            styles.contentContainer,
+            {
+                minHeight: totalHeight + (isLoading ? loading.count * rowHeight : 0),
+            },
+        ] })), [isLoading, loading?.count, rowHeight, totalHeight, withoutScroll]);
+    return (_jsx(ResponsiveContainer, { style: withoutScroll ? (isEmpty ? commonStyles.fill : undefined) : styles.root, breakpoint: breakpoint, children: ({ large }) => {
             const displayColumns = large ? columns : smallColumns;
             return (_jsxs(_Fragment, { children: [large ? (_jsx(View, { style: [styles.segment, large && styles.segmentLarge], children: displayColumns.map(({ id, width, title, renderTitle }) => {
                             const columnId = `${viewId}_${id}`;
@@ -181,28 +173,29 @@ export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, gro
                                         height: headerHeight,
                                     },
                                 ], nativeID: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
-                        }) })) : null, _jsxs(ScrollView, { scrollEventThrottle: 32, style: styles.container, onLayout: onLayout, onScroll: onScroll, contentContainerStyle: [
-                            styles.contentContainer,
-                            {
-                                minHeight: totalHeight + (isLoading ? loading.count * rowHeight : 0),
-                            },
-                        ], children: [Array.from(groups.entries()).map(([groupName, items]) => {
-                                return (_jsxs(Fragment, { children: [groupName != null ? (_jsx(View, { style: [
-                                                styles.stickyHeader,
-                                                large && styles.stickyHeaderLarge,
-                                                { height: groupHeaderHeight },
-                                            ], children: _jsx(LakeHeading, { level: 3, variant: "h3", children: groupName }) })) : null, items.map((item, index) => {
-                                            const key = keyExtractor(item, index);
-                                            const isActive = activeRowId === key;
-                                            const isHovered = isNotNullish(getRowLink) && hoveredRow === key;
-                                            const wrapper = createRowWrapper({ item, absoluteIndex: index, extraInfo });
-                                            return cloneElement(wrapper, {
-                                                style: { ...styles.rowLink, ...wrapper.props.style },
-                                                key: index,
-                                                ref: isActive ? activeItemRef : null,
-                                                children: (_jsx(Row, { id: key, rowHeight: rowHeight, columns: displayColumns, item: item, index: index, extraInfo: extraInfo, isActive: isActive, isHovered: isHovered, large: large, onMouseEnter: setHoveredRow, onMouseLeave: removeHoveredRow })),
-                                            });
-                                        })] }, groupName));
-                            }), _jsx(View, { children: _jsx(View, { accessibilityBusy: isLoading, style: styles.loadingPlaceholder, children: isLoading ? (_jsx(PlainListViewPlaceholder, { count: loading.count, rowHeight: rowHeight, rowVerticalSpacing: 0, paddingHorizontal: 0 })) : null }) })] }), originalData.length === 0 && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null] }));
+                        }) })) : null, cloneElement(listWrapper, {
+                        children: (_jsxs(_Fragment, { children: [Array.from(groups.entries()).map(([groupName, items]) => {
+                                    return (_jsxs(Fragment, { children: [groupName != null ? (_jsx(View, { style: [
+                                                    styles.stickyHeader,
+                                                    large && styles.stickyHeaderLarge,
+                                                    { height: groupHeaderHeight, top: stickyOffset },
+                                                ], children: _jsx(LakeHeading, { level: 3, variant: "h3", children: groupName }) })) : null, items.map((item, index) => {
+                                                const key = keyExtractor(item, index);
+                                                const isActive = activeRowId === key;
+                                                const isHovered = isNotNullish(getRowLink) && hoveredRow === key;
+                                                const wrapper = createRowWrapper({
+                                                    item,
+                                                    absoluteIndex: index,
+                                                    extraInfo,
+                                                });
+                                                return cloneElement(wrapper, {
+                                                    style: { ...styles.rowLink, ...wrapper.props.style },
+                                                    key: index,
+                                                    ref: isActive ? activeItemRef : null,
+                                                    children: (_jsx(Row, { id: key, rowHeight: rowHeight, columns: displayColumns, item: item, index: index, extraInfo: extraInfo, isActive: isActive, isHovered: isHovered, large: large, onMouseEnter: setHoveredRow, onMouseLeave: removeHoveredRow })),
+                                                });
+                                            })] }, groupName));
+                                }), _jsx(View, { children: _jsx(View, { accessibilityBusy: isLoading, style: styles.loadingPlaceholder, children: isLoading ? (_jsx(PlainListViewPlaceholder, { count: loading.count, rowHeight: rowHeight, rowVerticalSpacing: 0, paddingHorizontal: 0 })) : null }) }), isEmpty && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null, _jsx(View, { pointerEvents: "none", style: [styles.scrollTracker, { height: onEndReachedThresholdPx }], ref: scrollTrackerRef })] })),
+                    })] }));
         } }));
 };

package/src/components/ProjectEnvTag.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Tag } from "@swan-io/lake/src/components/Tag";
+import { Tag } from "./Tag";
 import { match } from "ts-pattern";
 import { Icon } from "./Icon";
 export const ProjectEnvTag = (props) => {

package/src/components/ReadOnlyFieldList.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Separator } from "@swan-io/lake/src/components/Separator";
-import { isNotNullish } from "@swan-io/lake/src/utils/nullish";
+import { Separator } from "./Separator";
+import { isNotNullish } from "../utils/nullish";
 import { Children } from "react";
 import { View } from "react-native";
 export const ReadOnlyFieldList = ({ children }) => (_jsx(_Fragment, { children: Children.toArray(children)

package/src/components/RightPanel.d.ts

@@ -1,4 +1,4 @@
-import { FocusTrapRef } from "@swan-io/lake/src/components/FocusTrap";
+import { FocusTrapRef } from "./FocusTrap";
 import { ReactNode } from "react";
 import { Context } from "./ResponsiveContainer";
 type Props = {

package/src/components/RightPanel.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { FocusTrap } from "@swan-io/lake/src/components/FocusTrap";
-import { TransitionView } from "@swan-io/lake/src/components/TransitionView";
-import { backgroundColor, breakpoints } from "@swan-io/lake/src/constants/design";
+import { FocusTrap } from "./FocusTrap";
+import { TransitionView } from "./TransitionView";
+import { backgroundColor, breakpoints } from "../constants/design";
 import { forwardRef, Suspense, useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { useBodyClassName } from "../hooks/useBodyClassName";

package/src/components/Space.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const spacingValues: readonly [4, 8, 12, 16, 20, 24, 32, 40, 48, 72, 96];
-export type SpacingValue = (typeof spacingValues)[number];
+export type SpacingValue = typeof spacingValues[number];
 type Props = {
     height?: SpacingValue;
     width?: SpacingValue;

package/src/components/TabView.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { IconName } from "@swan-io/lake/src/components/Icon";
-import { SpacingValue } from "@swan-io/lake/src/components/Space";
+import { IconName } from "./Icon";
+import { SpacingValue } from "./Space";
+export declare const tabsViewHeight: number;
 type Tab = {
     label: string;
     url: string;
@@ -13,6 +14,7 @@ type Props = {
     otherLabel: string;
     hideIfSingleItem?: boolean;
     padding?: SpacingValue;
+    sticky?: boolean;
 };
-export declare const TabView: ({ tabs, otherLabel, hideIfSingleItem, padding }: Props) => JSX.Element | null;
+export declare const TabView: ({ tabs, otherLabel, hideIfSingleItem, sticky, padding, }: Props) => JSX.Element | null;
 export {};

package/src/components/TabView.js

@@ -1,39 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useLocation } from "@swan-io/chicane";
-import { Box } from "@swan-io/lake/src/components/Box";
-import { FocusTrap } from "@swan-io/lake/src/components/FocusTrap";
-import { Icon } from "@swan-io/lake/src/components/Icon";
-import { LakeText } from "@swan-io/lake/src/components/LakeText";
-import { Link } from "@swan-io/lake/src/components/Link";
-import { PressableText } from "@swan-io/lake/src/components/Pressable";
-import { Space } from "@swan-io/lake/src/components/Space";
-import { TransitionView } from "@swan-io/lake/src/components/TransitionView";
-import { animations, backgroundColor, colors, negativeSpacings, radii, shadows, spacings, texts, } from "@swan-io/lake/src/constants/design";
-import { useHover } from "@swan-io/lake/src/hooks/useHover";
-import { useMergeRefs } from "@swan-io/lake/src/hooks/useMergeRefs";
-import { isNotNullish, isNullish } from "@swan-io/lake/src/utils/nullish";
+import { Box } from "./Box";
+import { FocusTrap } from "./FocusTrap";
+import { Icon } from "./Icon";
+import { LakeText } from "./LakeText";
+import { Link } from "./Link";
+import { PressableText } from "./Pressable";
+import { Space } from "./Space";
+import { TransitionView } from "./TransitionView";
+import { animations, backgroundColor, colors, negativeSpacings, radii, shadows, spacings, texts, } from "../constants/design";
+import { useHover } from "../hooks/useHover";
+import { useMergeRefs } from "../hooks/useMergeRefs";
+import { isNotNullish, isNullish } from "../utils/nullish";
 import { forwardRef, Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { match, P } from "ts-pattern";
 import { noop } from "../utils/function";
+const TABS_HEIGHT = 40;
+export const tabsViewHeight = TABS_HEIGHT + 1;
 const styles = StyleSheet.create({
     container: {
         borderBottomWidth: 1,
         borderBottomColor: colors.gray[100],
+        backgroundColor: backgroundColor.default,
         zIndex: 10,
     },
     link: {
         ...texts.medium,
         position: "relative",
         color: colors.gray[700],
-        height: 40,
+        height: TABS_HEIGHT,
         whiteSpace: "nowrap",
         display: "flex",
         flexDirection: "row",
         alignItems: "center",
     },
     activeLink: {
-        color: colors.current.primary,
+        color: colors.current[500],
         boxShadow: `inset 0 -2px ${colors.gray[700]}`,
     },
     hoveredLink: {
@@ -44,7 +47,7 @@ const styles = StyleSheet.create({
         bottom: 0,
         height: 2,
         width: 1,
-        backgroundColor: colors.current.primary,
+        backgroundColor: colors.current[500],
     },
     animatedUnderline: {
         transformOrigin: "0 0",
@@ -62,7 +65,7 @@ const styles = StyleSheet.create({
     },
     count: {
         ...texts.smallRegular,
-        color: colors.current.primary,
+        color: colors.current[500],
         backgroundColor: colors.current[50],
         borderColor: colors.current[100],
         borderWidth: 1,
@@ -112,6 +115,10 @@ const styles = StyleSheet.create({
         width: 1,
         backgroundColor: colors.gray[100],
     },
+    sticky: {
+        position: "sticky",
+        top: -1,
+    },
 });
 const Dropdown = ({ tabs, onHoverStart, onHoverEnd, onLinkFocus, onLinkBlur, onLinkPress, }) => {
     const containerRef = useRef(null);
@@ -249,7 +256,7 @@ const DropdownItems = forwardRef(({ tabs, otherLabel, currentUrl }, ref) => {
                     isNotNullish(activeTab) ? styles.activeLink : hovered ? styles.hoveredLink : null,
                 ], children: [_jsx(Text, { children: otherLabel }), _jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: tabs.length }), _jsx(Space, { width: 4 }), _jsx(Icon, { name: "chevron-down-filled", size: 12 })] }), _jsx(TransitionView, { ...animations.fadeAndSlideInFromBottom, style: styles.dropdownPlacement, children: shouldOpen ? (_jsx(FocusTrap, { autoFocus: shouldAutoFocus, focusLock: shouldLockFocus, returnFocus: shouldLockFocus, onClickOutside: onPressOutside, onEscapeKey: shouldLockFocus ? onEscapeKey : undefined, children: _jsx(Dropdown, { tabs: tabs, onHoverStart: onHoverStart, onHoverEnd: onHoverEnd, onLinkFocus: onLinkFocus, onLinkBlur: onAnyBlur, onLinkPress: onEscapeKey }) })) : null })] }));
 });
-export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true, padding }) => {
+export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true, sticky = false, padding, }) => {
     const containerRef = useRef(null);
     const placeholderRef = useRef(null);
     const otherPlaceholderRef = useRef(null);
@@ -371,7 +378,7 @@ export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true, padding })
     if (tabs.length <= 1 && hideIfSingleItem) {
         return null;
     }
-    return (_jsxs(Box, { alignItems: "center", direction: "row", accessibilityRole: "tablist", ref: containerRef, style: [styles.container, { paddingHorizontal: padding }], children: [_jsxs(View, { style: styles.placeholder, accessibilityHidden: true, ref: placeholderRef, pointerEvents: "none", onLayout: onLayout, children: [tabs.map(({ label, url, icon, count }) => (_jsxs(Fragment, { children: [_jsxs(Link, { ref: ref => {
+    return (_jsxs(Box, { alignItems: "center", direction: "row", accessibilityRole: "tablist", ref: containerRef, style: [styles.container, sticky && styles.sticky, { paddingHorizontal: padding }], children: [_jsxs(View, { style: styles.placeholder, accessibilityHidden: true, ref: placeholderRef, pointerEvents: "none", onLayout: onLayout, children: [tabs.map(({ label, url, icon, count }) => (_jsxs(Fragment, { children: [_jsxs(Link, { ref: ref => {
                                     if (placeholderLinkRef.current) {
                                         placeholderLinkRef.current[url] = ref;
                                     }

package/src/components/ToastStack.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box } from "@swan-io/lake/src/components/Box";
-import { Portal } from "@swan-io/lake/src/components/Portal";
-import { animations, colors, shadows } from "@swan-io/lake/src/constants/design";
+import { Box } from "./Box";
+import { Portal } from "./Portal";
+import { animations, colors, shadows } from "../constants/design";
 import { memo, useEffect, useState } from "react";
 import { Animated, StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";

package/src/components/WithPartnerAccentColor.js

@@ -1,90 +1,63 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Result } from "@swan-io/boxed";
-import { darken, getLuminance, meetsContrastGuidelines, shade, tint } from "polished";
+import { darken, meetsContrastGuidelines, setLightness, shade } from "polished";
 import { useLayoutEffect, useRef } from "react";
 import { StyleSheet, View } from "react-native";
-import { match, P } from "ts-pattern";
 import { isNotNullish } from "../utils/nullish";
-const colorScaleItems = [900, 800, 700, 600, 500, 400, 300, 200, 100, 50, 0];
 const styles = StyleSheet.create({
     container: {
         flexGrow: 1,
         flexBasis: "0%",
     },
 });
-const getContrastColor = (color, luminance) => {
-    if (luminance <= 0.75) {
+const getContrastColor = (color) => {
+    if (meetsContrastGuidelines("#FFF", color).AALarge) {
         return "#fff";
     }
-    const delta = 0.5 + (1 - luminance);
-    const text = darken(delta / 1.5, color);
-    if (meetsContrastGuidelines(color, text).AALarge) {
-        return text;
-    }
-    else {
-        return darken(delta, color);
+    let text = color;
+    while (!meetsContrastGuidelines(text, color).AALarge) {
+        text = darken(0.25, text);
     }
+    return text;
 };
 export const WithPartnerAccentColor = ({ color, children }) => {
     const containerRef = useRef(null);
     useLayoutEffect(() => {
-        if (isNotNullish(containerRef.current)) {
-            const element = containerRef.current;
-            const luminance = Result.fromExecution(() => getLuminance(color));
-            luminance.match({
-                Ok: luminance => {
-                    // The Math.pow adjusts the estimation to the default scales
-                    const mostLikelyPositionScale = colorScaleItems[colorScaleItems.length -
-                        (((luminance > 0.5 ? luminance : Math.pow(luminance, 0.2)) *
-                            colorScaleItems.length) |
-                            0)];
-                    const estimated500 = match(mostLikelyPositionScale)
-                        .with(0, () => shade(0.97, color))
-                        .with(50, () => shade(0.95, color))
-                        .with(100, () => shade(0.8, color))
-                        .with(200, () => shade(0.6, color))
-                        .with(300, () => shade(0.4, color))
-                        .with(400, () => shade(0.2, color))
-                        .with(500, P.nullish, () => color)
-                        .with(600, () => tint(0.2, color))
-                        .with(700, () => tint(0.4, color))
-                        .with(800, () => tint(0.6, color))
-                        .with(900, () => tint(0.8, color))
-                        .exhaustive();
-                    const colorScale = {
-                        0: tint(0.97, estimated500),
-                        50: tint(0.95, estimated500),
-                        100: tint(0.8, estimated500),
-                        200: tint(0.6, estimated500),
-                        300: tint(0.4, estimated500),
-                        400: tint(0.2, estimated500),
-                        500: estimated500,
-                        600: shade(0.2, estimated500),
-                        700: shade(0.4, estimated500),
-                        800: shade(0.6, estimated500),
-                        900: shade(0.8, estimated500),
-                        primary: color,
-                        contrast: getContrastColor(color, luminance),
-                        secondary: shade(0.2, color),
-                    };
-                    element.ownerDocument.documentElement.style.setProperty("--color-partner-900", colorScale[900], "");
-                    element.ownerDocument.documentElement.style.setProperty("--color-partner-800", colorScale[800], "");
-                    element.ownerDocument.documentElement.style.setProperty("--color-partner-700", colorScale[700], "");
-                    element.ownerDocument.documentElement.style.setProperty("--color-partner-600", colorScale[600], "");
-                    element.ownerDocument.documentElement.style.setProperty("--color-partner-500", colorScale[500], "");
-                    element.ownerDocument.documentElement.style.setProperty("--color-partner-400", colorScale[400], "");
-                    element.ownerDocument.documentElement.style.setProperty("--color-partner-300", colorScale[300], "");
-                    element.ownerDocument.documentElement.style.setProperty("--color-partner-200", colorScale[200], "");
-                    element.ownerDocument.documentElement.style.setProperty("--color-partner-100", colorScale[100], "");
-                    element.ownerDocument.documentElement.style.setProperty("--color-partner-50", colorScale[50], "");
-                    element.ownerDocument.documentElement.style.setProperty("--color-partner-primary", colorScale.primary, "");
-                    element.ownerDocument.documentElement.style.setProperty("--color-partner-secondary", colorScale.secondary, "");
-                    element.ownerDocument.documentElement.style.setProperty("--color-partner-contrast", colorScale.contrast, "");
-                },
-                Error: () => {
-                    // Do nothing, keep partner color
-                },
-            });
+        try {
+            if (isNotNullish(containerRef.current)) {
+                const element = containerRef.current;
+                const colorScale = {
+                    0: setLightness(1.0, color),
+                    50: setLightness(0.97, color),
+                    100: setLightness(0.9, color),
+                    200: setLightness(0.8, color),
+                    300: setLightness(0.7, color),
+                    400: setLightness(0.6, color),
+                    500: setLightness(0.5, color),
+                    600: setLightness(0.4, color),
+                    700: setLightness(0.3, color),
+                    800: setLightness(0.2, color),
+                    900: setLightness(0.1, color),
+                    primary: color,
+                    contrast: getContrastColor(color),
+                    secondary: shade(0.2, color),
+                };
+                element.ownerDocument.documentElement.style.setProperty("--color-partner-900", colorScale[900], "");
+                element.ownerDocument.documentElement.style.setProperty("--color-partner-800", colorScale[800], "");
+                element.ownerDocument.documentElement.style.setProperty("--color-partner-700", colorScale[700], "");
+                element.ownerDocument.documentElement.style.setProperty("--color-partner-600", colorScale[600], "");
+                element.ownerDocument.documentElement.style.setProperty("--color-partner-500", colorScale[500], "");
+                element.ownerDocument.documentElement.style.setProperty("--color-partner-400", colorScale[400], "");
+                element.ownerDocument.documentElement.style.setProperty("--color-partner-300", colorScale[300], "");
+                element.ownerDocument.documentElement.style.setProperty("--color-partner-200", colorScale[200], "");
+                element.ownerDocument.documentElement.style.setProperty("--color-partner-100", colorScale[100], "");
+                element.ownerDocument.documentElement.style.setProperty("--color-partner-50", colorScale[50], "");
+                element.ownerDocument.documentElement.style.setProperty("--color-partner-primary", colorScale.primary, "");
+                element.ownerDocument.documentElement.style.setProperty("--color-partner-secondary", colorScale.secondary, "");
+                element.ownerDocument.documentElement.style.setProperty("--color-partner-contrast", colorScale.contrast, "");
+            }
+        }
+        catch (err) {
+            // will default to white label color
         }
     }, [color]);
     return (_jsx(View, { ref: containerRef, style: styles.container, children: children }));

package/src/icons/fluent-icons.json

@@ -123,6 +123,8 @@
   "play-regular": "M7.6 4.61a.75.75 0 0 0-1.1.66v13.46c0 .56.6.93 1.1.65l12.37-6.72a.75.75 0 0 0 0-1.32L7.61 4.61ZM5 5.27c0-1.7 1.83-2.79 3.33-1.97l12.36 6.72a2.25 2.25 0 0 1 0 3.96L8.33 20.7A2.25 2.25 0 0 1 5 18.73V5.27Z",
   "preview-link-filled": "M6.02 7v2h11.96V7H6.02Zm8.96 6.48v3h3v-3h-3ZM2 5.75A2.75 2.75 0 0 1 4.75 3h14.5A2.75 2.75 0 0 1 22 5.75v12.5A2.75 2.75 0 0 1 19.25 21H4.75A2.75 2.75 0 0 1 2 18.25V5.75Zm2.52.5v3.5c0 .41.34.75.75.75h13.46c.41 0 .75-.34.75-.75v-3.5a.75.75 0 0 0-.75-.75H5.27a.75.75 0 0 0-.75.75Zm8.96 6.48v4.5c0 .41.34.75.75.75h4.5c.41 0 .75-.34.75-.75v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0-.75.75Zm-8.2-.23a.75.75 0 0 0 0 1.5h5.97a.75.75 0 0 0 0-1.5H5.27Zm-.76 4.25c0 .41.34.75.75.75h5.98a.75.75 0 0 0 0-1.5H5.27a.75.75 0 0 0-.75.75Z",
   "question-circle-regular": "M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 1.67a8.34 8.34 0 0 0 0 16.66 8.34 8.34 0 0 0 0-16.66Zm0 11.83a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm0-8.75a2.75 2.75 0 0 1 2.75 2.75c0 1.01-.3 1.57-1.05 2.36l-.17.17c-.62.62-.78.89-.78 1.47a.75.75 0 0 1-1.5 0c0-1.01.3-1.57 1.05-2.36l.17-.17c.62-.62.78-.89.78-1.47a1.25 1.25 0 0 0-2.5-.13v.13a.75.75 0 0 1-1.5 0A2.75 2.75 0 0 1 12 6.75Z",
+  "receipt-money-filled": "M5 6.25C5 5.01 6 4 7.25 4h8.5C16.99 4 18 5 18 6.25V14h3.5v3.25c0 1.8-1.46 3.25-3.25 3.25H13v-4a2.5 2.5 0 0 0-2.5-2.5H5V6.25ZM18 19h.25c.97 0 1.75-.78 1.75-1.75V15.5h-2V19ZM8.75 8a.75.75 0 0 0 0 1.5h5.5a.75.75 0 0 0 0-1.5h-5.5Zm0 3.5a.75.75 0 0 0 0 1.5h5.5a.75.75 0 0 0 0-1.5h-5.5ZM2.5 15c-.83 0-1.5.67-1.5 1.5v4c0 .83.67 1.5 1.5 1.5h8c.83 0 1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5h-8Zm7.5 1a1 1 0 0 0 1 1v1a2 2 0 0 1-2-2h1Zm-1 5c0-1.1.9-2 2-2v1a1 1 0 0 0-1 1H9Zm-7-4a1 1 0 0 0 1-1h1a2 2 0 0 1-2 2v-1Zm0 2a2 2 0 0 1 2 2H3a1 1 0 0 0-1-1v-1Zm4.5-2.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Z",
+  "receipt-money-regular": "M5 6.25C5 5.01 6 4 7.25 4h8.5C16.99 4 18 5 18 6.25V14h3.5v3.25c0 1.8-1.46 3.25-3.25 3.25H13V19h3.5V6.25a.75.75 0 0 0-.75-.75h-8.5a.75.75 0 0 0-.75.75V14H5V6.25ZM18 19h.25c.97 0 1.75-.78 1.75-1.75V15.5h-2V19ZM8 8.75c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5A.75.75 0 0 1 8 8.75Zm0 3.5c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75ZM2.5 15c-.83 0-1.5.67-1.5 1.5v4c0 .83.67 1.5 1.5 1.5h8c.83 0 1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5h-8Zm7.5 1a1 1 0 0 0 1 1v1a2 2 0 0 1-2-2h1Zm-1 5c0-1.1.9-2 2-2v1a1 1 0 0 0-1 1H9Zm-7-4a1 1 0 0 0 1-1h1a2 2 0 0 1-2 2v-1Zm0 2a2 2 0 0 1 2 2H3a1 1 0 0 0-1-1v-1Zm4.5-2.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Z",
   "rocket-regular": "M13.06 7.43a2.5 2.5 0 1 1 3.53 3.54 2.5 2.5 0 0 1-3.53-3.54Zm2.47 1.06a1 1 0 1 0-1.41 1.42 1 1 0 0 0 1.41-1.42Zm5.98-4.17a2.75 2.75 0 0 0-1.81-1.8l-.66-.21c-2.4-.75-5-.1-6.78 1.67l-1 1a3.5 3.5 0 0 0-4.56.32L5.45 6.55c-.29.29-.29.76 0 1.06l1.6 1.59-.18.18c-.69.68-.69 1.79 0 2.47l.5.5-1.4.8a.75.75 0 0 0-.16 1.17l3.89 3.9a.75.75 0 0 0 1.18-.16l.8-1.4.5.5c.68.68 1.78.68 2.47 0l.17-.18 1.6 1.6c.29.28.76.28 1.05 0l1.25-1.25a3.5 3.5 0 0 0 .32-4.57l1-1A6.75 6.75 0 0 0 21.72 5l-.21-.67Zm-2.26-.38c.4.13.7.43.83.83l.2.66c.58 1.86.08 3.9-1.3 5.27l-5.4 5.4c-.1.1-.25.1-.35 0l-5.3-5.3a.25.25 0 0 1 0-.36l5.4-5.4a5.25 5.25 0 0 1 5.26-1.3l.66.2Zm-1.29 9.9a2 2 0 0 1-.3 2.43l-.72.71-1.06-1.06 2.08-2.08ZM7.76 6.36a2 2 0 0 1 2.43-.3L8.1 8.14 7.05 7.08l.7-.72Zm2.82 9.2-.52.9-2.5-2.5.9-.51 2.12 2.11ZM6.69 18.4a.75.75 0 0 0-1.06-1.06l-2.48 2.48a.75.75 0 0 0 1.06 1.06l2.48-2.48Zm-1.94-3c.29.3.29.77 0 1.06l-1.07 1.06a.75.75 0 0 1-1.06-1.06l1.06-1.06c.3-.3.77-.3 1.07 0Zm3.88 4.95a.75.75 0 1 0-1.06-1.06l-1.06 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06Z",
   "search-filled": "M10 2.5a7.5 7.5 0 0 1 5.96 12.05l4.75 4.74a1 1 0 0 1-1.32 1.5l-.1-.08-4.74-4.75A7.5 7.5 0 1 1 10 2.5Zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z",
   "send-filled": "m12.81 12.2-7.53 1.25a.5.5 0 0 0-.38.32l-2.6 6.96a.75.75 0 0 0 1.03.94l18-9a.75.75 0 0 0 0-1.34l-18-9a.75.75 0 0 0-1.03.94l2.6 6.96a.5.5 0 0 0 .38.32l7.53 1.25a.2.2 0 0 1 0 .4Z",

package/src/utils/types.d.ts

@@ -6,3 +6,8 @@ export type GetNode<T extends {
         node: unknown;
     }[];
 }> = GetEdge<T>["node"];
+type Contravariant<T> = T extends unknown ? (_: T) => void : never;
+type InferContravariant<T> = [T] extends [(_: infer I) => void] ? I : never;
+type PickOne<T> = InferContravariant<InferContravariant<Contravariant<Contravariant<T>>>>;
+export type UnionToTuple<T> = PickOne<T> extends infer U ? Exclude<T, U> extends never ? [T] : [...UnionToTuple<Exclude<T, U>>, U] : never;
+export {};