@swan-io/lake 2.7.38 → 3.1.0

package/package.json

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

package/src/components/Card3dPreview.d.ts

@@ -20,7 +20,7 @@ type CardParams = {
     cardNumber: string;
     expirationDate: string;
     cvv: string;
-    color: "Silver" | "Black";
+    color: "Silver" | "Black" | THREE.Texture;
     logo: SVGElement | HTMLImageElement | null;
     logoScale: number;
     assetsUrls: Card3dAssetsUrls;

package/src/components/Card3dPreview.js

@@ -132,7 +132,9 @@ export const Card = forwardRef(({ ownerName, cardNumber, expirationDate, cvv, co
             .with("Black", () => {
             materials.card.map = blackTexture;
         })
-            .exhaustive();
+            .otherwise(texture => {
+            materials.card.map = texture;
+        });
         // force threejs to update material
         // because sometimes it doesn't apply texture on load randomly
         materials.card.needsUpdate = true;
@@ -172,9 +174,9 @@ export const Card = forwardRef(({ ownerName, cardNumber, expirationDate, cvv, co
     const mainTextMaterial = (_jsx("meshStandardMaterial", { color: match(color)
             .with("Silver", () => 0x000000)
             .with("Black", () => 0xeeeeee)
-            .exhaustive(), metalness: 0.1, roughness: 0.55, envMapIntensity: ENV_MAP_INTENSITY }));
+            .otherwise(() => 0xeeeeee), metalness: 0.1, roughness: 0.55, envMapIntensity: ENV_MAP_INTENSITY }));
     const secondaryTextMaterial = (_jsx("meshStandardMaterial", { color: 0x666666, metalness: 0.1, roughness: 0.55, envMapIntensity: ENV_MAP_INTENSITY }));
-    return (_jsx("group", { ref: ref, ...props, dispose: null, children: _jsxs("mesh", { geometry: nodes.card.geometry, material: materials.card, children: [_jsxs("group", { position: [0, 0, FRONT_TEXT_POSITION], children: [_jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.2, anchorX: "left", anchorY: "bottom", position: [-3.4, -1.95, 0], children: [ownerName, mainTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMarkProRegular, fontSize: 0.03, anchorX: "left", anchorY: "bottom", position: [3.85, -2.15, 0], children: ["TM", mainTextMaterial] })] }), _jsxs("group", { position: [0, 0, BACK_TEXT_POSITION], children: [_jsxs(Text, { font: assetsUrls.fontMarkProRegular, anchorX: "left", anchorY: "bottom", fontSize: 0.12, rotation: [0, Math.PI, 0], position: [4, 2.38, 0], children: ["support@swan.io", secondaryTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMarkProRegular, anchorX: "right", anchorY: "bottom", fontSize: 0.12, rotation: [0, Math.PI, 0], position: [-4, 2.38, 0], children: ["IDEMIA 9 1212121L 09/21", secondaryTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.24, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, 0.68, 0], children: ["Identifier: 0000000000", mainTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.2, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, 0.15, 0], children: ["This card is issued by Swan, pursuant to license", secondaryTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.2, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, -0.15, 0], children: ["by Mastercard international.", secondaryTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.48, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, -1.85, 0], children: [cardNumber, mainTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.29, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, -2.3, 0], children: [expirationDate, mainTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.29, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [2.55, -2.3, 0], children: ["CVC ", cvv, mainTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMarkProRegular, anchorX: "center", anchorY: "bottom", fontSize: 0.36, rotation: [0, Math.PI, 0], position: [-2.35, -1.15, 0], children: ["debit", mainTextMaterial] })] }), _jsx("group", { 
+    return (_jsx("group", { ref: ref, ...props, dispose: null, children: _jsxs("mesh", { geometry: nodes.card.geometry, material: materials.card, children: [_jsxs("group", { position: [0, 0, FRONT_TEXT_POSITION], children: [_jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.2, anchorX: "left", anchorY: "bottom", position: [-3.4, -1.95, 0], children: [ownerName, mainTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMarkProRegular, fontSize: 0.03, anchorX: "left", anchorY: "bottom", position: [3.85, -2.15, 0], children: ["TM", mainTextMaterial] })] }), _jsxs("group", { position: [0, 0, BACK_TEXT_POSITION], children: [_jsxs(Text, { font: assetsUrls.fontMarkProRegular, anchorX: "left", anchorY: "bottom", fontSize: 0.12, rotation: [0, Math.PI, 0], position: [4, 2.38, 0], children: ["support@swan.io", secondaryTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMarkProRegular, anchorX: "right", anchorY: "bottom", fontSize: 0.12, rotation: [0, Math.PI, 0], position: [-4, 2.38, 0], children: ["IDEMIA 9 1212121L 09/21", secondaryTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.24, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, 0.68, 0], children: ["Identifier: 0000000000", mainTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.2, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, 0.15, 0], children: ["This card is issued by Swan, pursuant to license", secondaryTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.2, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, -0.15, 0], children: ["from Mastercard International.", secondaryTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.48, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, -1.85, 0], children: [cardNumber, mainTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.29, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, -2.3, 0], children: [expirationDate, mainTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMaisonNeueBook, fontSize: 0.29, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [2.55, -2.3, 0], children: ["CVC ", cvv, mainTextMaterial] }), _jsxs(Text, { font: assetsUrls.fontMarkProRegular, anchorX: "center", anchorY: "bottom", fontSize: 0.36, rotation: [0, Math.PI, 0], position: [-2.35, -1.15, 0], children: ["debit", mainTextMaterial] })] }), _jsx("group", { 
                     // move group to change scale center at top right corner
                     position: [
                         CARD_WIDTH / 2 - LOGO_MARGIN_RIGHT,
@@ -190,5 +192,5 @@ export const Card = forwardRef(({ ownerName, cardNumber, expirationDate, cvv, co
                                 }, color: match(color)
                                     .with("Silver", () => 0x000000)
                                     .with("Black", () => 0xffffff)
-                                    .exhaustive(), metalness: 0.1, roughness: 0.35, envMapIntensity: ENV_MAP_INTENSITY, transparent: true, alphaMap: logoData.alphaMap })] })) }), _jsx("mesh", { geometry: nodes.black_band.geometry, material: materials.black_band, position: [0, 1.774, BACK_TEXT_POSITION], rotation: [0, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.chip.geometry, material: materials.chip, position: [-2.78, 0.439, FRONT_TEXT_POSITION], rotation: [0, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.chip_pattern.geometry, material: materials.chip_pattern, position: [-2.778, 0.442, FRONT_TEXT_POSITION + 0.001], rotation: [0, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.mc_center.geometry, material: materials.mastercard_orange, position: [3.052, -1.832, FRONT_TEXT_POSITION], rotation: [Math.PI / 2, 0, 0] }), _jsx("mesh", { geometry: nodes.mc_left.geometry, material: materials.mastercard_red, position: [2.676, -1.773, FRONT_TEXT_POSITION], rotation: [Math.PI / 2, 0, 0] }), _jsx("mesh", { geometry: nodes.mc_right.geometry, material: materials.mastercard_yellow, position: [3.47, -1.773, FRONT_TEXT_POSITION], rotation: [-Math.PI / 2, 0, 0] }), _jsx("mesh", { geometry: nodes.metal_circle.geometry, material: materials.rainbow, position: [-2.33, -1.849, BACK_TEXT_POSITION], rotation: [-Math.PI / 2, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.metal_circle001.geometry, material: materials.rainbow_rough, position: [-2.629, -1.849, BACK_TEXT_POSITION - 0.001], rotation: [-Math.PI / 2, Math.PI / 2, 0], scale: [0.35, 1, 0.35] }), _jsx("mesh", { geometry: nodes.metal_circle002.geometry, material: materials.rainbow_rough, position: [-2.33, -1.849, BACK_TEXT_POSITION - 0.001], rotation: [-Math.PI / 2, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.metal_mastercard.geometry, material: materials.rainbow_mastercard, position: [0.914, -1.298, BACK_TEXT_POSITION - 0.001], rotation: [Math.PI / 2, 0, Math.PI], scale: 0.09 })] }) }));
+                                    .otherwise(() => 0xffffff), metalness: 0.1, roughness: 0.35, envMapIntensity: ENV_MAP_INTENSITY, transparent: true, alphaMap: logoData.alphaMap })] })) }), _jsx("mesh", { geometry: nodes.black_band.geometry, material: materials.black_band, position: [0, 1.774, BACK_TEXT_POSITION], rotation: [0, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.chip.geometry, material: materials.chip, position: [-2.78, 0.439, FRONT_TEXT_POSITION], rotation: [0, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.chip_pattern.geometry, material: materials.chip_pattern, position: [-2.778, 0.442, FRONT_TEXT_POSITION + 0.001], rotation: [0, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.mc_center.geometry, material: materials.mastercard_orange, position: [3.052, -1.832, FRONT_TEXT_POSITION], rotation: [Math.PI / 2, 0, 0] }), _jsx("mesh", { geometry: nodes.mc_left.geometry, material: materials.mastercard_red, position: [2.676, -1.773, FRONT_TEXT_POSITION], rotation: [Math.PI / 2, 0, 0] }), _jsx("mesh", { geometry: nodes.mc_right.geometry, material: materials.mastercard_yellow, position: [3.47, -1.773, FRONT_TEXT_POSITION], rotation: [-Math.PI / 2, 0, 0] }), _jsx("mesh", { geometry: nodes.metal_circle.geometry, material: materials.rainbow, position: [-2.33, -1.849, BACK_TEXT_POSITION], rotation: [-Math.PI / 2, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.metal_circle001.geometry, material: materials.rainbow_rough, position: [-2.629, -1.849, BACK_TEXT_POSITION - 0.001], rotation: [-Math.PI / 2, Math.PI / 2, 0], scale: [0.35, 1, 0.35] }), _jsx("mesh", { geometry: nodes.metal_circle002.geometry, material: materials.rainbow_rough, position: [-2.33, -1.849, BACK_TEXT_POSITION - 0.001], rotation: [-Math.PI / 2, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.metal_mastercard.geometry, material: materials.rainbow_mastercard, position: [0.914, -1.298, BACK_TEXT_POSITION - 0.001], rotation: [Math.PI / 2, 0, Math.PI], scale: 0.09 })] }) }));
 });

package/src/components/Filters.d.ts

@@ -1,6 +1,6 @@
+import { DateFormat, DatePickerDate } from "@swan-io/shared-business/src/components/DatePicker";
 import { ValidatorResult } from "react-ux-form";
 import { Simplify } from "type-fest";
-import { DateFormat, DatePickerDate, MonthNames, WeekDayNames } from "./DatePicker";
 type Item<T> = {
     label: string;
     value: T;
@@ -22,8 +22,6 @@ export type FilterRadioDef<T> = {
 export type FilterDateDef<Values = unknown> = {
     type: "date";
     label: string;
-    monthNames: MonthNames;
-    dayNames: WeekDayNames;
     cancelText: string;
     submitText: string;
     noValueText: string;

package/src/components/Filters.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DatePickerModal, } from "@swan-io/shared-business/src/components/DatePicker";
 import dayjs from "dayjs";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
@@ -10,7 +11,6 @@ import { useMergeRefs } from "../hooks/useMergeRefs";
 import { usePreviousValue } from "../hooks/usePreviousValue";
 import { isNotNullish } from "../utils/nullish";
 import { Box } from "./Box";
-import { DatePickerModal, } from "./DatePicker";
 import { Icon } from "./Icon";
 import { LakeButton } from "./LakeButton";
 import { LakeCheckbox } from "./LakeCheckbox";
@@ -154,11 +154,11 @@ function FilterCheckbox({ label, items, width, checkAllLabel, value, onValueChan
                                 return (_jsxs(Pressable, { role: "radio", "aria-checked": isSelected, style: ({ hovered }) => [styles.radio, hovered && styles.itemHovered], onPress: onPress, children: [_jsx(LakeCheckbox, { value: isSelected }), _jsx(Space, { width: 12 }), _jsx(Text, { style: styles.itemLabel, children: item.label })] }));
                             } }), _jsx(Space, { height: 8 }), _jsx(View, { style: styles.buttonContainer, children: _jsx(LakeButton, { color: "current", onPress: save, children: applyButtonLabel }) }), _jsx(Space, { height: 24 })] }) })] }));
 }
-function FilterDate({ label, monthNames, dayNames, initialValue, noValueText, cancelText, submitText, dateFormat, isSelectable, validate, onSave, onPressRemove, autoOpen = false, }) {
+function FilterDate({ label, initialValue, noValueText, cancelText, submitText, dateFormat, isSelectable, validate, onSave, onPressRemove, autoOpen = false, }) {
     const inputRef = useRef(null);
     const [visible, { close, toggle }] = useDisclosure(autoOpen);
     const value = useMemo(() => (isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : ""), [initialValue, dateFormat]);
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : noValueText }), _jsx(DatePickerModal, { visible: visible, monthNames: monthNames, weekDayNames: dayNames, format: dateFormat, firstWeekDay: "monday", label: label, cancelLabel: cancelText, confirmLabel: submitText, value: value, isSelectable: isSelectable, validate: validate, onChange: value => {
+    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : noValueText }), _jsx(DatePickerModal, { visible: visible, format: dateFormat, firstWeekDay: "monday", label: label, cancelLabel: cancelText, confirmLabel: submitText, value: value, isSelectable: isSelectable, validate: validate, onChange: value => {
                     const formattedValue = dayjs(value, dateFormat, true).toJSON();
                     onSave(formattedValue);
                 }, onDissmiss: close })] }));
@@ -211,7 +211,7 @@ export const FiltersStack = ({ filters, openedFilters, definition, onChangeOpene
                         onChangeFilters({ ...filters, [filterName]: undefined });
                         onChangeOpened(openedFilters.filter(f => f !== filterName));
                     } })))
-                    .with({ type: "date" }, ({ type, label, monthNames, dayNames, noValueText, cancelText, submitText, dateFormat, isSelectable, validate, }) => (_jsx(FilterDate, { label: label, monthNames: monthNames, dayNames: dayNames, noValueText: noValueText, cancelText: cancelText, submitText: submitText, dateFormat: dateFormat, autoOpen: lastOpenedFilter === filterName, isSelectable: isSelectable ? date => isSelectable(date, filters) : undefined, validate: validate ? value => validate(value, filters) : undefined, initialValue: getFilterValue(type, filters, filterName), onSave: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
+                    .with({ type: "date" }, ({ type, label, noValueText, cancelText, submitText, dateFormat, isSelectable, validate, }) => (_jsx(FilterDate, { label: label, noValueText: noValueText, cancelText: cancelText, submitText: submitText, dateFormat: dateFormat, autoOpen: lastOpenedFilter === filterName, isSelectable: isSelectable ? date => isSelectable(date, filters) : undefined, validate: validate ? value => validate(value, filters) : undefined, initialValue: getFilterValue(type, filters, filterName), onSave: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
                         onChangeFilters({ ...filters, [filterName]: undefined });
                         onChangeOpened(openedFilters.filter(f => f !== filterName));
                     } })))

package/src/components/LakeButton.d.ts

@@ -5,8 +5,6 @@ import { IconName } from "./Icon";
 export type ButtonProps = {
     ariaControls?: string;
     ariaExpanded?: boolean;
-    ariaLabel?: string;
-    children?: ReactNode;
     color?: ColorVariants;
     disabled?: boolean;
     loading?: boolean;
@@ -25,7 +23,13 @@ export type ButtonProps = {
         target?: string;
     };
     pill?: boolean;
-};
+} & ({
+    ariaLabel: string;
+    children?: never;
+} | {
+    ariaLabel?: string;
+    children: ReactNode;
+});
 export declare const LakeButton: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<View>>>;
 type GroupProps = {
     children: ReactNode;

package/src/components/ChoicePicker.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from "react";
-type Props<T> = {
-    items: T[];
-    large?: boolean;
-    renderItem: (value: T) => ReactNode;
-    value?: T;
-    getId?: (item: T) => unknown;
-    onChange: (value: T) => void;
-    disabled?: boolean;
-};
-export declare const ChoicePicker: <T>({ items, getId, large, renderItem, value, disabled, onChange, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/ChoicePicker.js

@@ -1,192 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { ScrollView, StyleSheet, View } from "react-native";
-import { match } from "ts-pattern";
-import { commonStyles } from "../constants/commonStyles";
-import { breakpoints, negativeSpacings, spacings } from "../constants/design";
-import { useResponsive } from "../hooks/useResponsive";
-import { clampValue } from "../utils/math";
-import { detectScrollAnimationEnd } from "../utils/viewport";
-import { LakeButton } from "./LakeButton";
-import { LakeRadio } from "./LakeRadio";
-import { Pressable } from "./Pressable";
-import { Space } from "./Space";
-import { Tile } from "./Tile";
-const styles = StyleSheet.create({
-    root: {
-        alignSelf: "stretch",
-        alignItems: "stretch",
-        flexGrow: 1,
-        overflow: "hidden",
-        marginHorizontal: negativeSpacings[12],
-    },
-    scrollSnap: {
-        scrollSnapType: "x mandatory",
-    },
-    container: {
-        alignSelf: "stretch",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        alignItems: "stretch",
-        justifyContent: "center",
-    },
-    mobileContainer: {
-        flexWrap: "nowrap",
-        justifyContent: "flex-start",
-        transitionProperty: "transform",
-        transitionDuration: "300ms",
-        transitionTimingFunction: "ease-in-out",
-    },
-    item: {
-        flexGrow: 0,
-        flexBasis: "33.333%",
-        maxWidth: 300,
-        padding: spacings[12],
-    },
-    itemAnimation: {
-        transform: "translateZ(0px)",
-        animationKeyframes: {
-            from: {
-                opacity: 0,
-                transform: "translateZ(0px) translateX(50px)",
-            },
-            to: {
-                opacity: 1,
-                transform: "translateZ(0px) translateX(0px)",
-            },
-        },
-        animationDuration: "200ms",
-        animationFillMode: "backwards",
-        animationTimingFunction: "ease-in-out",
-    },
-    itemLarge: {
-        flexBasis: "50%",
-        maxWidth: "none",
-    },
-    itemSmallViewport: {
-        width: "100%",
-        flexBasis: "auto",
-        maxWidth: "none",
-        scrollSnapAlign: "center",
-    },
-    tileContents: {
-        alignItems: "center",
-        alignSelf: "stretch",
-        flexGrow: 1,
-    },
-    tileRenderedContents: {
-        alignItems: "center",
-        alignSelf: "stretch",
-        flexGrow: 1,
-    },
-    leftButton: {
-        position: "absolute",
-        top: "50%",
-        left: negativeSpacings[24],
-        transform: "translateY(-50%)",
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0,
-        borderWidth: 1,
-        borderLeftWidth: 0,
-    },
-    rightButton: {
-        position: "absolute",
-        top: "50%",
-        right: negativeSpacings[24],
-        transform: "translateY(-50%)",
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
-        borderWidth: 1,
-        borderRightWidth: 0,
-    },
-});
-const identity = (x) => x;
-export const ChoicePicker = ({ items, getId = identity, large = false, renderItem, value, disabled = false, onChange, }) => {
-    const containerRef = useRef(null);
-    const { desktop } = useResponsive(breakpoints.medium);
-    const [mobilePosition, setMobilePosition] = useState("start");
-    useEffect(() => {
-        if (desktop) {
-            return;
-        }
-        // auto scroll to selected value on mobile
-        const scrollContainer = containerRef.current;
-        const index = items.findIndex(item => value === item);
-        if (index !== -1 && scrollContainer instanceof HTMLDivElement) {
-            const width = scrollContainer.offsetWidth;
-            scrollContainer.scrollTo({ x: index * width, animated: false });
-        }
-        // if no value is selected, select first item
-        if (value == null && items[0] != null) {
-            onChange(items[0]);
-        }
-        // disable exhaustive-deps because we only want to run this effect only when screen size go from desktop to mobile
-    }, [desktop]); // eslint-disable-line react-hooks/exhaustive-deps
-    const onScroll = () => {
-        // prevent scroll event when we change screen size from mobile to desktop
-        if (desktop) {
-            return;
-        }
-        const scrollContainer = containerRef.current;
-        if (scrollContainer instanceof HTMLDivElement) {
-            const scrollLeft = scrollContainer.scrollLeft;
-            const width = scrollContainer.offsetWidth;
-            const index = clampValue(0, items.length - 1)(Math.round(scrollLeft / width));
-            const item = items[index];
-            if (item != null) {
-                onChange(item);
-            }
-            match(index)
-                .with(0, () => setMobilePosition("start"))
-                .with(items.length - 1, () => setMobilePosition("end"))
-                .otherwise(() => setMobilePosition("middle"));
-        }
-    };
-    const onPressPrevious = () => {
-        const scrollContainer = containerRef.current;
-        if (scrollContainer instanceof HTMLDivElement) {
-            const scrollLeft = scrollContainer.scrollLeft;
-            const width = scrollContainer.offsetWidth;
-            const index = Math.round(scrollLeft / width);
-            const previousIndex = Math.max(0, index - 1);
-            // remove scroll snap during scroll animation to avoid weird behavior on older browsers
-            scrollContainer.style.scrollSnapType = "none";
-            containerRef.current?.scrollTo({ x: previousIndex * width, animated: true });
-            detectScrollAnimationEnd(scrollContainer).onResolve(() => {
-                // set back scroll snap
-                // @ts-expect-error
-                scrollContainer.style.scrollSnapType = null;
-            });
-        }
-    };
-    const onPressNext = () => {
-        const scrollContainer = containerRef.current;
-        if (scrollContainer instanceof HTMLDivElement) {
-            const scrollLeft = scrollContainer.scrollLeft;
-            const width = scrollContainer.offsetWidth;
-            const index = Math.round(scrollLeft / width);
-            const nextIndex = Math.min(items.length - 1, index + 1);
-            // remove scroll snap during scroll animation to avoid weird behavior on older browsers
-            scrollContainer.style.scrollSnapType = "none";
-            containerRef.current?.scrollTo({ x: nextIndex * width, animated: true });
-            detectScrollAnimationEnd(scrollContainer).onResolve(() => {
-                // set back scroll snap
-                // @ts-expect-error
-                scrollContainer.style.scrollSnapType = null;
-            });
-        }
-    };
-    return (_jsxs(View, { children: [_jsx(View, { style: styles.root, children: _jsx(ScrollView, { ref: containerRef, horizontal: !desktop, onScroll: onScroll, scrollEventThrottle: 200, style: styles.scrollSnap, contentContainerStyle: [
-                        styles.container,
-                        !desktop && styles.mobileContainer,
-                        !desktop && { width: `${items.length * 100}%` },
-                    ], children: items.map((item, index) => (_jsx(Pressable, { disabled: disabled, style: [
-                            styles.item,
-                            disabled && commonStyles.disabled,
-                            desktop && styles.itemAnimation,
-                            desktop && { animationDelay: `${200 + 100 * index}ms` },
-                            large && styles.itemLarge,
-                            !desktop && styles.itemSmallViewport,
-                            !desktop && { width: `${100 / items.length}%` },
-                        ], onPress: () => onChange(item), children: ({ hovered }) => (_jsx(Tile, { hovered: hovered, selected: value != null && getId(item) === getId(value), flexGrow: 1, children: _jsxs(View, { style: styles.tileContents, children: [_jsx(View, { style: styles.tileRenderedContents, children: renderItem(item) }), desktop && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(LakeRadio, { value: value != null && getId(item) === getId(value) })] }))] }) })) }, String(index)))) }) }), !desktop && (_jsx(LakeButton, { icon: "chevron-left-filled", mode: "secondary", forceBackground: true, onPress: onPressPrevious, disabled: mobilePosition === "start" || disabled, style: styles.leftButton })), !desktop && (_jsx(LakeButton, { icon: "chevron-right-filled", mode: "secondary", forceBackground: true, onPress: onPressNext, disabled: mobilePosition === "end" || disabled, style: styles.rightButton }))] }));
-};

package/src/components/DatePicker.d.ts

@@ -1,90 +0,0 @@
-import { Option } from "@swan-io/boxed";
-import { ValidatorResult } from "react-ux-form";
-import { Except } from "type-fest";
-export type MonthNames = readonly [
-    string,
-    string,
-    string,
-    string,
-    string,
-    string,
-    string,
-    string,
-    string,
-    string,
-    string,
-    string
-];
-export type WeekDayNames = readonly [string, string, string, string, string, string, string];
-declare const weekDayIndex: {
-    sunday: number;
-    monday: number;
-    tuesday: number;
-    wednesday: number;
-    thursday: number;
-    friday: number;
-    saturday: number;
-};
-export type DatePickerDate = {
-    day: number;
-    month: number;
-    year: number;
-};
-export type DatePickerRange = {
-    start: Option<DatePickerDate>;
-    end: Option<DatePickerDate>;
-};
-export type DateFormat = "DD/MM/YYYY" | "MM/DD/YYYY";
-export declare const validateDateRangeOrder: (value: {
-    start: string;
-    end: string;
-}, format: DateFormat) => boolean;
-export declare const isTodayOrFutureDate: (date: DatePickerDate) => boolean;
-export declare const isDateInRange: (minDate: Date, maxDate: Date) => (date: DatePickerDate) => boolean;
-export type DatePickerProps = {
-    label: string;
-    value?: string;
-    error?: string;
-    format: DateFormat;
-    firstWeekDay: keyof typeof weekDayIndex;
-    monthNames: MonthNames;
-    weekDayNames: WeekDayNames;
-    isSelectable?: (date: DatePickerDate) => boolean;
-    onChange: (date: string) => void;
-};
-export declare const DatePicker: ({ label, value, error, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
-type DatePickerModalProps = Except<DatePickerProps, "error"> & {
-    visible: boolean;
-    cancelLabel: string;
-    confirmLabel: string;
-    validate?: (value: string) => ValidatorResult;
-    onDissmiss: () => void;
-};
-export declare const DatePickerModal: ({ value, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, visible, label, cancelLabel, confirmLabel, validate, onDissmiss, }: DatePickerModalProps) => import("react/jsx-runtime").JSX.Element;
-export type DateRangePickerProps = {
-    value: {
-        start: string;
-        end: string;
-    };
-    error?: string;
-    format: DateFormat;
-    startLabel: string;
-    endLabel: string;
-    firstWeekDay: keyof typeof weekDayIndex;
-    monthNames: MonthNames;
-    weekDayNames: WeekDayNames;
-    isSelectable?: (date: DatePickerDate) => boolean;
-    onChange: (date: {
-        start: string;
-        end: string;
-    }) => void;
-};
-export declare const DateRangePicker: ({ value, error, format, startLabel, endLabel, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
-type DateRangePickerModalProps = DateRangePickerProps & {
-    visible: boolean;
-    cancelLabel: string;
-    confirmLabel: string;
-    onDissmiss: () => void;
-};
-export declare const DateRangePickerModal: ({ value, error, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, visible, startLabel, endLabel, cancelLabel, confirmLabel, onDissmiss, }: DateRangePickerModalProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/DatePicker.js

@@ -1,619 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Option } from "@swan-io/boxed";
-import dayjs from "dayjs";
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
-import { StyleSheet, View } from "react-native";
-import { useForm } from "react-ux-form";
-import { Rifm } from "rifm";
-import { P, match } from "ts-pattern";
-import { colors, spacings } from "../constants/design";
-import { useDisclosure } from "../hooks/useDisclosure";
-import { useFirstMountState } from "../hooks/useFirstMountState";
-import { useResponsive } from "../hooks/useResponsive";
-import { noop } from "../utils/function";
-import { isNotNullish, isNotNullishOrEmpty, isNullishOrEmpty } from "../utils/nullish";
-import { getRifmProps } from "../utils/rifm";
-import { BottomPanel } from "./BottomPanel";
-import { Box } from "./Box";
-import { Fill } from "./Fill";
-import { Icon } from "./Icon";
-import { LakeButton } from "./LakeButton";
-import { LakeLabel } from "./LakeLabel";
-import { LakeModal } from "./LakeModal";
-import { LakeSelect } from "./LakeSelect";
-import { LakeText } from "./LakeText";
-import { LakeTextInput } from "./LakeTextInput";
-import { Popover } from "./Popover";
-import { Pressable } from "./Pressable";
-import { Separator } from "./Separator";
-import { Space } from "./Space";
-const styles = StyleSheet.create({
-    label: {
-        flex: 1,
-    },
-    arrowContainer: {
-        height: 40, // input height
-    },
-    popover: {
-        padding: spacings[12],
-    },
-    popoverDesktop: {
-        padding: spacings[24],
-    },
-    rangeCalendarSide: {
-        flex: 1,
-    },
-    button: {
-        flex: 1,
-    },
-    monthSelect: {
-        width: 130,
-    },
-    yearSelect: {
-        width: 100,
-    },
-    weekRow: {
-        paddingVertical: spacings[4],
-    },
-    dayName: {
-        flex: 1,
-        height: 32,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    dayContainer: {
-        flex: 1,
-        alignItems: "center",
-    },
-    dayRangeIndicator: {
-        position: "absolute",
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        backgroundColor: colors.current[100],
-    },
-    dayStartRangeIndicator: {
-        left: "50%",
-    },
-    dayEndRangeIndicator: {
-        right: "50%",
-    },
-    dayNumber: {
-        width: 32,
-        height: 32,
-        alignItems: "center",
-        justifyContent: "center",
-        borderRadius: 16,
-    },
-    dayNumberFocused: {},
-    dayNumberHover: {
-        backgroundColor: colors.current[100],
-    },
-    dayNumberPressed: {},
-    dayNumberSelected: {
-        backgroundColor: colors.current[500],
-    },
-    todayIndicator: {
-        position: "absolute",
-        left: 0,
-        right: 0,
-        bottom: 0,
-        width: 4,
-        height: 4,
-        marginHorizontal: "auto",
-        borderRadius: 2,
-        backgroundColor: colors.current[500],
-    },
-});
-const MODALE_MOBILE_THRESHOLD = 600;
-const DATE_PICKER_MOBILE_THRESHOLD = 400;
-const DATE_RANGE_PICKER_THRESHOLD = 800;
-const NB_DAYS_IN_WEEK = 7;
-const weekDayIndex = {
-    sunday: 0,
-    monday: 1,
-    tuesday: 2,
-    wednesday: 3,
-    thursday: 4,
-    friday: 5,
-    saturday: 6,
-};
-const rifmDateProps = getRifmProps({
-    accept: "numeric",
-    charMap: { 2: "/", 4: "/" },
-    maxLength: 8,
-});
-const parseDate = (value, format) => {
-    const date = dayjs.utc(value, format);
-    return date.isValid()
-        ? Option.Some({ day: date.date(), month: date.month(), year: date.year() })
-        : Option.None();
-};
-const parseRange = (value, format) => {
-    return {
-        start: parseDate(value.start, format),
-        end: parseDate(value.end, format),
-    };
-};
-const stringifyDate = (value, format) => {
-    const date = dayjs.utc().year(value.year).month(value.month).date(value.day);
-    return date.format(format);
-};
-export const validateDateRangeOrder = (value, format) => {
-    const range = parseRange(value, format);
-    if (range.start.isNone() || range.end.isNone()) {
-        return true;
-    }
-    if (isDateAfter(range.start.value, range.end.value)) {
-        return false;
-    }
-    return true;
-};
-const range = (start, end) => {
-    const result = [];
-    for (let i = start; i <= end; i++) {
-        result.push(i);
-    }
-    return result;
-};
-const groupEvery = (input, groupSize) => {
-    const result = [];
-    const nbGroups = Math.ceil(input.length / groupSize);
-    for (let i = 0; i < nbGroups; i++) {
-        result.push(input.slice(i * groupSize, (i + 1) * groupSize));
-    }
-    return result;
-};
-const padEnd = (input, length, value) => {
-    const itemsToAppend = new Array(length - input.length).fill(value);
-    return [...input, ...itemsToAppend];
-};
-export const isTodayOrFutureDate = (date) => {
-    const yesterday = new Date();
-    yesterday.setDate(yesterday.getDate() - 1);
-    const yesterdayDate = {
-        day: yesterday.getDate(),
-        month: yesterday.getMonth(),
-        year: yesterday.getFullYear(),
-    };
-    return isDateAfter(date, yesterdayDate);
-};
-export const isDateInRange = (minDate, maxDate) => (date) => {
-    const min = {
-        day: minDate.getDate(),
-        month: minDate.getMonth(),
-        year: minDate.getFullYear(),
-    };
-    const max = {
-        day: maxDate.getDate(),
-        month: maxDate.getMonth(),
-        year: maxDate.getFullYear(),
-    };
-    return isDateAfter(date, min) && isDateBefore(date, max);
-};
-const isDateToday = (date) => {
-    const today = new Date();
-    return (date.day === today.getDate() &&
-        date.month === today.getMonth() &&
-        date.year === today.getFullYear());
-};
-const getMonthDates = (month, year) => {
-    const aggregate = (acc, date) => {
-        const dateDay = date.getDate();
-        const dateMonth = date.getMonth();
-        const dateYear = date.getFullYear();
-        if (date.getMonth() !== month) {
-            return acc;
-        }
-        return aggregate([...acc, { day: dateDay, month: dateMonth, year: dateYear }], new Date(year, month, dateDay + 1));
-    };
-    return aggregate([], new Date(year, month, 1));
-};
-const getMonthWeeks = (month, year, firstWeekDay) => {
-    const firstWeekDayIndex = weekDayIndex[firstWeekDay];
-    const monthFirstWeekDay = new Date(year, month, 1).getDay();
-    const monthDates = getMonthDates(month, year).map(date => Option.Some(date));
-    const nbDaysToPrepend = monthFirstWeekDay >= firstWeekDayIndex
-        ? monthFirstWeekDay - firstWeekDayIndex
-        : NB_DAYS_IN_WEEK - firstWeekDayIndex + monthFirstWeekDay;
-    for (let i = 0; i < nbDaysToPrepend; i++) {
-        monthDates.unshift(Option.None());
-    }
-    const weeks = groupEvery(monthDates, NB_DAYS_IN_WEEK);
-    const lastWeek = weeks[weeks.length - 1];
-    if (!lastWeek) {
-        return weeks;
-    }
-    weeks[weeks.length - 1] = padEnd(lastWeek, NB_DAYS_IN_WEEK, Option.None());
-    return weeks;
-};
-const getWeekDayNames = (dayNames, firstWeekDay = "sunday") => {
-    const firstWeekDayIndex = weekDayIndex[firstWeekDay];
-    const firstWeekDayNames = dayNames.slice(firstWeekDayIndex);
-    const lastWeekDayNames = dayNames.slice(0, firstWeekDayIndex);
-    // @ts-expect-error
-    return [...firstWeekDayNames, ...lastWeekDayNames];
-};
-const isDateEquals = (date1, date2) => {
-    return date1.day === date2.day && date1.month === date2.month && date1.year === date2.year;
-};
-const isDateBefore = (date1, date2) => {
-    return (date1.year < date2.year ||
-        (date1.year === date2.year && date1.month < date2.month) ||
-        (date1.year === date2.year && date1.month === date2.month && date1.day < date2.day));
-};
-const isDateAfter = (date1, date2) => {
-    return (date1.year > date2.year ||
-        (date1.year === date2.year && date1.month > date2.month) ||
-        (date1.year === date2.year && date1.month === date2.month && date1.day > date2.day));
-};
-const isDateRange = (value) => {
-    return match(value)
-        .with({ start: P._, end: P._ }, () => true)
-        .otherwise(() => false);
-};
-const isSelectedDate = (date, value) => {
-    return match(value)
-        .with(Option.pattern.Some(P.select()), value => isDateEquals(value, date))
-        .with(Option.pattern.None, () => false)
-        .with(P.when(isDateRange), ({ start, end }) => {
-        // if range is invalid, we don't display any selection
-        if (start.isSome() && end.isSome() && isDateAfter(start.value, end.value)) {
-            return false;
-        }
-        return (start.match({
-            Some: start => isDateEquals(start, date),
-            None: () => false,
-        }) ||
-            end.match({
-                Some: end => isDateEquals(end, date),
-                None: () => false,
-            }));
-    })
-        .exhaustive();
-};
-const getRangeIndicatorType = (date, value) => {
-    if (!isDateRange(value)) {
-        return "none";
-    }
-    const { start, end } = value;
-    if (start.isNone() || end.isNone()) {
-        return "none";
-    }
-    const startDate = start.value;
-    const endDate = end.value;
-    // no interval indicator if range is invalid
-    if (isDateAfter(startDate, endDate)) {
-        return "none";
-    }
-    if (isDateEquals(startDate, endDate)) {
-        return "none";
-    }
-    if (isDateEquals(date, startDate)) {
-        return "start";
-    }
-    if (isDateEquals(date, endDate)) {
-        return "end";
-    }
-    if (isDateAfter(date, startDate) && isDateBefore(date, endDate)) {
-        return "between";
-    }
-    return "none";
-};
-const computeDateDistanceInDays = (date1, date2) => {
-    const date1Date = new Date(date1.year, date1.month, date1.day);
-    const date2Date = new Date(date2.year, date2.month, date2.day);
-    const diffInMs = Math.abs(date2Date.getTime() - date1Date.getTime());
-    return Math.round(diffInMs / (1000 * 3600 * 24));
-};
-const getNewDateRange = (currentRange, selectedDate) => {
-    const { start, end } = currentRange;
-    // Handle initial selection
-    if (start.isNone()) {
-        return { start: Option.Some(selectedDate), end: Option.None() };
-    }
-    if (end.isNone()) {
-        if (isDateAfter(selectedDate, start.value)) {
-            return { start, end: Option.Some(selectedDate) };
-        }
-        return { start: Option.Some(selectedDate), end: currentRange.start };
-    }
-    // Handle selection outside of the current range
-    if (isDateBefore(selectedDate, start.value)) {
-        return { start: Option.Some(selectedDate), end: currentRange.end };
-    }
-    if (isDateAfter(selectedDate, end.value)) {
-        return { start: currentRange.start, end: Option.Some(selectedDate) };
-    }
-    // We change the closest date to the new date
-    const startDistance = computeDateDistanceInDays(start.value, selectedDate);
-    const endDistance = computeDateDistanceInDays(end.value, selectedDate);
-    if (startDistance < endDistance) {
-        return { start: Option.Some(selectedDate), end: currentRange.end };
-    }
-    return { start: currentRange.start, end: Option.Some(selectedDate) };
-};
-const getTodayYearMonth = () => ({
-    month: new Date().getMonth(),
-    year: new Date().getFullYear(),
-});
-const getYearMonth = (value, format) => {
-    if (isNullishOrEmpty(value)) {
-        return Option.None();
-    }
-    return parseDate(value, format);
-};
-const isYearMonthBefore = (date1, date2) => {
-    return date1.year < date2.year || (date1.year === date2.year && date1.month < date2.month);
-};
-const isYearMonthEquals = (date1, date2) => {
-    return date1.year === date2.year && date1.month === date2.month;
-};
-const minYearMonth = (date1, date2) => {
-    return isYearMonthBefore(date1, date2) ? date1 : date2;
-};
-const maxYearMonth = (date1, date2) => {
-    return isYearMonthBefore(date1, date2) ? date2 : date1;
-};
-const incrementYearMonth = ({ month, year }) => {
-    if (month === 11) {
-        return { month: 0, year: year + 1 };
-    }
-    return { month: month + 1, year };
-};
-const decrementYearMonth = ({ month, year }) => {
-    if (month === 0) {
-        return { month: 11, year: year - 1 };
-    }
-    return { month: month - 1, year };
-};
-const YearMonthSelect = ({ monthNames, value, arrowsPosition = "right", hideArrows, minValue, maxValue, onChange, }) => {
-    const monthItems = useMemo(() => monthNames.map((name, index) => ({ name, value: index })), [monthNames]);
-    const yearItems = useMemo(() => range(value.year - 5, value.year + 5).map(year => ({
-        name: year.toString(),
-        value: year,
-    })), [value.year]);
-    const selectMonth = (month) => {
-        onChange({ year: value.year, month });
-    };
-    const selectYear = (year) => {
-        onChange({ year, month: value.month });
-    };
-    const setPreviousMonth = () => {
-        onChange(decrementYearMonth(value));
-    };
-    const setNextMonth = () => {
-        onChange(incrementYearMonth(value));
-    };
-    const isPreviousDisabled = !minValue
-        ? false
-        : value.year <= minValue.year && value.month <= minValue.month;
-    const isNextDisabled = !maxValue
-        ? false
-        : value.year >= maxValue.year && value.month >= maxValue.month;
-    return (_jsxs(Box, { direction: "row", alignItems: "center", children: [arrowsPosition === "around" && hideArrows !== true && (_jsxs(_Fragment, { children: [_jsx(LakeButton, { size: "small", mode: "tertiary", icon: "arrow-left-filled", disabled: isPreviousDisabled, onPress: setPreviousMonth }), _jsx(Fill, { minWidth: 12 })] })), _jsx(LakeSelect, { items: monthItems, value: value.month, onValueChange: selectMonth, mode: "borderless", size: "small", hideErrors: true, style: styles.monthSelect }), _jsx(LakeSelect, { items: yearItems, value: value.year, onValueChange: selectYear, mode: "borderless", size: "small", hideErrors: true, style: styles.yearSelect }), hideArrows !== true && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 12 }), arrowsPosition === "right" && (_jsxs(_Fragment, { children: [_jsx(LakeButton, { size: "small", mode: "tertiary", icon: "arrow-left-filled", disabled: isPreviousDisabled, onPress: setPreviousMonth }), _jsx(Space, { width: 12 })] })), _jsx(LakeButton, { size: "small", mode: "tertiary", icon: "arrow-right-filled", disabled: isNextDisabled, onPress: setNextMonth })] }))] }));
-};
-const MonthCalendar = ({ month, year, value, firstWeekDay, weekDayNames, isSelectable, onChange, }) => {
-    const dayNames = useMemo(() => getWeekDayNames(weekDayNames, firstWeekDay), [weekDayNames, firstWeekDay]);
-    const weeks = useMemo(() => getMonthWeeks(month, year, firstWeekDay), [month, year, firstWeekDay]);
-    return (_jsxs(View, { children: [_jsx(Box, { direction: "row", alignItems: "center", style: styles.weekRow, children: dayNames.map(dayName => (_jsx(View, { style: styles.dayName, children: _jsx(LakeText, { variant: "medium", color: colors.gray[600], children: dayName.substring(0, 1) }) }, dayName))) }), weeks.map((week, weekIndex) => (_jsx(Box, { direction: "row", alignItems: "center", style: styles.weekRow, children: week.map((date, dateIndex) => {
-                    const isDisabled = date.match({
-                        Some: date => isNotNullish(isSelectable) && !isSelectable(date),
-                        None: () => true,
-                    });
-                    const isSelected = date.match({
-                        Some: date => isSelectedDate(date, value),
-                        None: () => false,
-                    });
-                    const isToday = date.match({
-                        Some: date => isDateToday(date),
-                        None: () => false,
-                    });
-                    const rangeIndicator = date.match({
-                        Some: date => getRangeIndicatorType(date, value),
-                        None: () => "none",
-                    });
-                    return (_jsxs(View, { style: styles.dayContainer, children: [rangeIndicator !== "none" && (_jsx(View, { style: [
-                                    styles.dayRangeIndicator,
-                                    rangeIndicator === "start" && styles.dayStartRangeIndicator,
-                                    rangeIndicator === "end" && styles.dayEndRangeIndicator,
-                                ] })), _jsxs(Pressable, { disabled: isDisabled, onPress: () => date.match({ Some: onChange, None: noop }), style: ({ focused, hovered, pressed }) => [
-                                    styles.dayNumber,
-                                    focused && styles.dayNumberFocused,
-                                    hovered && styles.dayNumberHover,
-                                    pressed && styles.dayNumberPressed,
-                                    isSelected && styles.dayNumberSelected,
-                                ], children: [_jsx(LakeText, { variant: "smallRegular", color: isSelected
-                                            ? colors.current.contrast
-                                            : isDisabled
-                                                ? colors.gray[300]
-                                                : isToday
-                                                    ? colors.current[500]
-                                                    : colors.gray[900], children: date.match({ Some: ({ day }) => day.toString(), None: () => " " }) }), isToday && _jsx(View, { style: styles.todayIndicator })] })] }, dateIndex));
-                }) }, weekIndex)))] }));
-};
-const DatePickerPopoverContent = ({ value, format, firstWeekDay, monthNames, weekDayNames, desktop, isSelectable, onChange, }) => {
-    const [monthYear, setMonthYear] = useState(() => getYearMonth(value, format).getWithDefault(getTodayYearMonth()));
-    // Automatically change displayed year and month when user change the value with text input
-    useEffect(() => {
-        const yearMonth = getYearMonth(value, format);
-        if (yearMonth.isSome()) {
-            setMonthYear(yearMonth.value);
-        }
-    }, [value, format]);
-    const handleChange = useCallback((date) => {
-        const formatted = stringifyDate(date, format);
-        onChange(formatted);
-    }, [format, onChange]);
-    return (_jsxs(_Fragment, { children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: monthYear, hideArrows: !desktop, onChange: setMonthYear }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: monthYear.month, year: monthYear.year, value: isNotNullishOrEmpty(value) ? parseDate(value, format) : Option.None(), firstWeekDay: firstWeekDay, weekDayNames: weekDayNames, isSelectable: isSelectable, onChange: handleChange })] }));
-};
-export const DatePicker = ({ label, value, error, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, }) => {
-    const { desktop } = useResponsive(DATE_PICKER_MOBILE_THRESHOLD);
-    const ref = useRef(null);
-    const [isOpened, { open, close }] = useDisclosure(false);
-    const popoverId = useId();
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", alignItems: "end", children: _jsx(LakeLabel, { label: label, style: styles.label, actions: _jsx(LakeButton, { mode: "secondary", icon: "calendar-ltr-regular", size: "small", onPress: open }), render: id => (_jsx(Rifm, { value: value ?? "", onChange: onChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { ref: ref, id: id, placeholder: format, value: value, error: error, onChange: onChange, ariaExpanded: isOpened })) })) }) }), _jsx(Popover, { id: popoverId, role: "dialog", onDismiss: close, referenceRef: ref, visible: isOpened, children: _jsx(View, { style: desktop ? styles.popoverDesktop : styles.popover, children: _jsx(DatePickerPopoverContent, { value: value, format: format, firstWeekDay: firstWeekDay, monthNames: monthNames, weekDayNames: weekDayNames, desktop: desktop, isSelectable: isSelectable, onChange: onChange }) }) })] }));
-};
-export const DatePickerModal = ({ value, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, visible, label, cancelLabel, confirmLabel, validate, onDissmiss, }) => {
-    const { desktop } = useResponsive(DATE_PICKER_MOBILE_THRESHOLD);
-    const { Field, submitForm, setFieldValue, resetField } = useForm({
-        date: {
-            initialValue: value ?? "",
-            validate,
-        },
-    });
-    const handleCancel = () => {
-        setFieldValue("date", value ?? "");
-        onDissmiss();
-    };
-    const handleConfirm = () => {
-        submitForm(({ date }) => {
-            if (isNotNullishOrEmpty(date)) {
-                onChange(date);
-            }
-            onDissmiss();
-        });
-    };
-    useEffect(() => {
-        if (!visible) {
-            resetField("date");
-        }
-    }, [visible, resetField]);
-    return (_jsxs(DateModal, { visible: visible, maxWidth: 500, onPressClose: handleCancel, children: [_jsx(Field, { name: "date", children: ({ ref, value, error, onBlur, onChange }) => (_jsxs(_Fragment, { children: [_jsx(LakeLabel, { label: label, render: id => (_jsx(Rifm, { value: value, onChange: onChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { ref: ref, id: id, placeholder: format, value: value, error: error, onBlur: onBlur, onChange: onChange })) })) }), _jsx(DatePickerPopoverContent, { value: value, format: format, firstWeekDay: firstWeekDay, monthNames: monthNames, weekDayNames: weekDayNames, desktop: desktop, isSelectable: isSelectable, onChange: onChange })] })) }), _jsx(Space, { height: 24 }), _jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeButton, { mode: "secondary", size: "small", onPress: handleCancel, style: styles.button, children: cancelLabel }), _jsx(Space, { width: 24 }), _jsx(LakeButton, { color: "current", size: "small", onPress: handleConfirm, style: styles.button, children: confirmLabel })] })] }));
-};
-const DateModal = ({ children, visible, maxWidth, withCloseButton, onPressClose, }) => {
-    const { desktop } = useResponsive(MODALE_MOBILE_THRESHOLD);
-    if (desktop) {
-        return (_jsx(LakeModal, { visible: visible, maxWidth: maxWidth, onPressClose: withCloseButton === true ? onPressClose : undefined, children: children }));
-    }
-    return (_jsx(BottomPanel, { visible: visible, onPressClose: onPressClose, children: _jsx(View, { style: styles.popover, children: children }) }));
-};
-const DateRangePickerModalContent = ({ value, format, firstWeekDay, monthNames, weekDayNames, desktop, displayTwoCalendar, isSelectable, onChange, }) => {
-    const isFirstMount = useFirstMountState();
-    const [periods, setPeriods] = useState(() => {
-        const startYearMonth = getYearMonth(value.start, format).getWithDefault(getTodayYearMonth());
-        const endYearMonth = getYearMonth(value.end, format).getWithDefault(incrementYearMonth(startYearMonth));
-        return {
-            start: startYearMonth,
-            end: isYearMonthEquals(startYearMonth, endYearMonth)
-                ? incrementYearMonth(startYearMonth)
-                : endYearMonth,
-        };
-    });
-    // Automatically change displayed year and month when start date changes
-    useEffect(() => {
-        if (isFirstMount) {
-            return;
-        }
-        const startYearMonth = getYearMonth(value.start, format);
-        if (startYearMonth.isSome()) {
-            setPeriods(periods => {
-                const isStartAndEndSameMonth = isYearMonthEquals(startYearMonth.value, periods.end);
-                if (isStartAndEndSameMonth) {
-                    return {
-                        start: decrementYearMonth(periods.end),
-                        end: periods.end,
-                    };
-                }
-                // change end period if it becomes before start period
-                const endPeriod = maxYearMonth(periods.end, incrementYearMonth(startYearMonth.value));
-                return {
-                    start: startYearMonth.value,
-                    end: endPeriod,
-                };
-            });
-        }
-    }, [isFirstMount, value.start, format]);
-    // Automatically change displayed year and month when end date changes
-    useEffect(() => {
-        if (isFirstMount) {
-            return;
-        }
-        const endYearMonth = getYearMonth(value.end, format);
-        if (endYearMonth.isSome()) {
-            setPeriods(periods => {
-                const isStartAndEndSameMonth = isYearMonthEquals(periods.start, endYearMonth.value);
-                if (isStartAndEndSameMonth) {
-                    return {
-                        start: periods.start,
-                        end: incrementYearMonth(periods.start),
-                    };
-                }
-                // change start period if it becomes after end period
-                const startPeriod = minYearMonth(periods.start, decrementYearMonth(endYearMonth.value));
-                return {
-                    start: startPeriod,
-                    end: endYearMonth.value,
-                };
-            });
-        }
-    }, [isFirstMount, value.end, format]);
-    const setStartPeriod = useCallback((yearMonth) => {
-        setPeriods(periods => ({
-            start: yearMonth,
-            end: maxYearMonth(periods.end, incrementYearMonth(yearMonth)),
-        }));
-    }, []);
-    const setEndPeriod = useCallback((yearMonth) => {
-        setPeriods(periods => ({
-            start: minYearMonth(periods.start, decrementYearMonth(yearMonth)),
-            end: yearMonth,
-        }));
-    }, []);
-    const dateRange = useMemo(() => parseRange(value, format), [value, format]);
-    const handleSelectDate = (date) => {
-        const newRange = getNewDateRange(dateRange, date);
-        const newValue = {
-            start: newRange.start.match({
-                Some: date => stringifyDate(date, format),
-                None: () => value.start,
-            }),
-            end: newRange.end.match({
-                Some: date => stringifyDate(date, format),
-                None: () => value.end,
-            }),
-        };
-        onChange(newValue);
-    };
-    if (!displayTwoCalendar) {
-        return (_jsxs(_Fragment, { children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: periods.start, hideArrows: !desktop, onChange: setStartPeriod }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: periods.start.month, year: periods.start.year, value: dateRange, firstWeekDay: firstWeekDay, weekDayNames: weekDayNames, isSelectable: isSelectable, onChange: handleSelectDate })] }));
-    }
-    return (_jsx(View, { children: _jsxs(Box, { direction: "row", alignItems: "start", children: [_jsxs(View, { style: styles.rangeCalendarSide, children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: periods.start, maxValue: decrementYearMonth(periods.end), arrowsPosition: "around", onChange: setStartPeriod }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: periods.start.month, year: periods.start.year, value: dateRange, firstWeekDay: firstWeekDay, weekDayNames: weekDayNames, isSelectable: isSelectable, onChange: handleSelectDate })] }), _jsx(Separator, { space: 24, horizontal: true }), _jsxs(View, { style: styles.rangeCalendarSide, children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: periods.end, minValue: incrementYearMonth(periods.start), arrowsPosition: "around", onChange: setEndPeriod }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: periods.end.month, year: periods.end.year, value: dateRange, firstWeekDay: firstWeekDay, weekDayNames: weekDayNames, isSelectable: isSelectable, onChange: handleSelectDate })] })] }) }));
-};
-export const DateRangePicker = ({ value, error, format, startLabel, endLabel, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, }) => {
-    const { desktop } = useResponsive(DATE_PICKER_MOBILE_THRESHOLD);
-    const { desktop: displayTwoCalendar } = useResponsive(DATE_RANGE_PICKER_THRESHOLD);
-    const ref = useRef(null);
-    const [isOpened, { open, close }] = useDisclosure(false);
-    const handleStartChange = useCallback((start) => {
-        onChange({ start, end: value.end });
-    }, [value, onChange]);
-    const handleEndChange = useCallback((end) => {
-        onChange({ start: value.start, end });
-    }, [value, onChange]);
-    return (_jsxs(View, { children: [_jsxs(Box, { direction: "row", alignItems: "end", children: [_jsx(LakeLabel, { label: startLabel, style: styles.label, render: id => (_jsx(Rifm, { value: value.start, onChange: handleStartChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { ref: ref, id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true, ariaExpanded: isOpened })) })) }), _jsx(Space, { width: 12 }), _jsx(Box, { style: styles.arrowContainer, justifyContent: "center", children: _jsx(Icon, { name: "arrow-right-filled", size: 20 }) }), _jsx(Space, { width: 12 }), _jsx(LakeLabel, { label: endLabel, style: styles.label, render: id => (_jsx(Rifm, { value: value.end, onChange: handleEndChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true, ariaExpanded: isOpened })) })) }), _jsx(Space, { width: 12 }), _jsx(LakeButton, { mode: "secondary", icon: "calendar-ltr-regular", size: "small", onPress: open })] }), _jsx(Space, { height: 4 }), _jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error ?? " " }), _jsx(DateModal, { visible: isOpened, maxWidth: 900, withCloseButton: true, onPressClose: close, children: _jsx(DateRangePickerModalContent, { value: value, format: format, firstWeekDay: firstWeekDay, monthNames: monthNames, weekDayNames: weekDayNames, desktop: desktop, displayTwoCalendar: displayTwoCalendar, isSelectable: isSelectable, onChange: onChange }) })] }));
-};
-export const DateRangePickerModal = ({ value, error, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, visible, startLabel, endLabel, cancelLabel, confirmLabel, onDissmiss, }) => {
-    const { desktop } = useResponsive(MODALE_MOBILE_THRESHOLD);
-    const { desktop: displayTwoCalendar } = useResponsive(DATE_RANGE_PICKER_THRESHOLD);
-    const [localeValue, setLocaleValue] = useState(value);
-    useEffect(() => {
-        setLocaleValue(value);
-    }, [value]);
-    const handleStartChange = (start) => {
-        setLocaleValue({ start, end: localeValue.end });
-    };
-    const handleEndChange = (end) => {
-        setLocaleValue({ start: localeValue.start, end });
-    };
-    const handleCancel = () => {
-        setLocaleValue(value);
-        onDissmiss();
-    };
-    const handleConfirm = () => {
-        onChange(localeValue);
-        onDissmiss();
-    };
-    return (_jsxs(DateModal, { visible: visible, maxWidth: 900, onPressClose: handleCancel, children: [_jsxs(View, { children: [_jsxs(Box, { direction: "row", alignItems: "end", children: [_jsx(LakeLabel, { label: startLabel, style: styles.label, render: id => (_jsx(Rifm, { value: localeValue.start, onChange: handleStartChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true })) })) }), _jsx(Space, { width: 12 }), _jsx(Box, { style: styles.arrowContainer, justifyContent: "center", children: _jsx(Icon, { name: "arrow-right-filled", size: 20 }) }), _jsx(Space, { width: 12 }), _jsx(LakeLabel, { label: endLabel, style: styles.label, render: id => (_jsx(Rifm, { value: localeValue.end, onChange: handleEndChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true })) })) })] }), _jsx(Space, { height: 4 }), _jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error ?? " " })] }), _jsx(DateRangePickerModalContent, { value: localeValue, format: format, firstWeekDay: firstWeekDay, monthNames: monthNames, weekDayNames: weekDayNames, desktop: desktop, displayTwoCalendar: displayTwoCalendar, isSelectable: isSelectable, onChange: setLocaleValue }), _jsx(Space, { height: 24 }), _jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeButton, { mode: "secondary", size: "small", onPress: handleCancel, style: styles.button, children: cancelLabel }), _jsx(Space, { width: 24 }), _jsx(LakeButton, { color: "current", size: "small", onPress: handleConfirm, style: styles.button, children: confirmLabel })] })] }));
-};

package/src/components/FileTile.d.ts

@@ -1,10 +0,0 @@
-type Props = {
-    variant?: "none" | "pending" | "verified" | "refused";
-    name: string;
-    url?: string;
-    onRemove?: () => void;
-    title?: string;
-    description?: string;
-};
-export declare const FileTile: ({ variant, name, url, onRemove, title, description }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/FileTile.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { StyleSheet } from "react-native";
-import { match } from "ts-pattern";
-import { commonStyles } from "../constants/commonStyles";
-import { backgroundColor, colors, shadows, spacings } from "../constants/design";
-import { getIconNameFromFilename } from "../utils/file";
-import { isNotNullish, isNotNullishOrEmpty } from "../utils/nullish";
-import { Box } from "./Box";
-import { LakeAlert } from "./LakeAlert";
-import { LakeButton } from "./LakeButton";
-import { LakeText } from "./LakeText";
-import { Space } from "./Space";
-import { Tag } from "./Tag";
-const styles = StyleSheet.create({
-    base: {
-        backgroundColor: backgroundColor.accented,
-        borderRadius: 8,
-        boxShadow: shadows.tile,
-        overflow: "hidden",
-    },
-    content: {
-        height: 56,
-        paddingLeft: spacings[20],
-        paddingRight: spacings[8],
-    },
-});
-export const FileTile = ({ variant = "none", name, url, onRemove, title, description }) => (_jsxs(Box, { style: styles.base, children: [_jsxs(Box, { alignItems: "center", direction: "row", style: styles.content, children: [_jsx(Tag, { icon: getIconNameFromFilename(name), iconSize: 20, color: match(variant)
-                        .with("none", "pending", () => "shakespear")
-                        .with("verified", () => "positive")
-                        .with("refused", () => "negative")
-                        .exhaustive() }), _jsx(Space, { width: 16 }), _jsx(LakeText, { numberOfLines: 1, color: colors.gray[700], style: commonStyles.fill, children: name }), _jsx(Space, { width: 12 }), isNotNullishOrEmpty(url) && (_jsx(LakeButton, { mode: "tertiary", size: "small", icon: "open-filled", onPress: () => {
-                        window.open(url, "_blank");
-                    } })), isNotNullish(onRemove) && (_jsx(LakeButton, { mode: "tertiary", size: "small", icon: "delete-regular", color: "negative", onPress: onRemove }))] }), variant !== "none" && (_jsx(LakeAlert, { anchored: true, title: title, variant: match(variant)
-                .with("pending", () => "info")
-                .with("verified", () => "success")
-                .with("refused", () => "error")
-                .exhaustive(), children: description }))] }));

package/src/components/LakeModal.d.ts

@@ -1,14 +0,0 @@
-import { ReactNode } from "react";
-import { ColorVariants } from "../constants/design";
-import { IconName } from "./Icon";
-import { Context } from "./ResponsiveContainer";
-export type LakeModalProps = {
-    visible: boolean;
-    title?: string;
-    icon?: IconName;
-    color?: ColorVariants;
-    children: ReactNode | ((context: Context) => ReactNode);
-    maxWidth?: number;
-    onPressClose?: () => void;
-};
-export declare const LakeModal: ({ visible, icon, title, color, children, maxWidth, onPressClose, }: LakeModalProps) => import("react/jsx-runtime").JSX.Element | null;

package/src/components/LakeModal.js

@@ -1,135 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, useEffect, useState } from "react";
-import { ScrollView, StyleSheet, View } from "react-native";
-import { commonStyles } from "../constants/commonStyles";
-import { backgroundColor, breakpoints, colors, negativeSpacings, shadows, spacings, } from "../constants/design";
-import { useBodyClassName } from "../hooks/useBodyClassName";
-import { FocusTrap } from "./FocusTrap";
-import { Icon } from "./Icon";
-import { LakeButton } from "./LakeButton";
-import { LakeHeading } from "./LakeHeading";
-import { LoadingView } from "./LoadingView";
-import { Portal } from "./Portal";
-import { Pressable } from "./Pressable";
-import { ResponsiveContainer } from "./ResponsiveContainer";
-import { Space } from "./Space";
-import { TransitionView } from "./TransitionView";
-const BACKGROUND_COLOR = "rgba(0, 0, 0, 0.6)";
-const styles = StyleSheet.create({
-    root: {
-        ...StyleSheet.absoluteFillObject,
-    },
-    container: {
-        ...StyleSheet.absoluteFillObject,
-    },
-    inert: {
-        pointerEvents: "none",
-    },
-    fill: {
-        ...StyleSheet.absoluteFillObject,
-        animationFillMode: "forwards",
-    },
-    overlay: {
-        ...StyleSheet.absoluteFillObject,
-        backgroundColor: BACKGROUND_COLOR,
-    },
-    overlayEnter: {
-        animationKeyframes: {
-            "0%": { opacity: 0 },
-        },
-        animationDuration: "200ms",
-        animationTimingFunction: "ease-in-out",
-    },
-    overlayLeave: {
-        animationKeyframes: {
-            "100%": { opacity: 0 },
-        },
-        animationDuration: "200ms",
-        animationTimingFunction: "ease-in-out",
-    },
-    modalEnter: {
-        animationKeyframes: {
-            "0%": {
-                opacity: 0,
-                transform: "translateY(-20px)",
-            },
-        },
-        animationDuration: "300ms",
-        animationTimingFunction: "ease-in-out",
-    },
-    modalLeave: {
-        animationKeyframes: {
-            "100%": {
-                opacity: 0,
-                transform: "translateY(-20px)",
-            },
-        },
-        animationDuration: "300ms",
-        animationTimingFunction: "ease-in-out",
-    },
-    modalContainer: {
-        ...StyleSheet.absoluteFillObject,
-    },
-    modalContentContainer: {
-        padding: spacings[24],
-        justifyContent: "center",
-        flexGrow: 1,
-    },
-    modalContentContainerSmall: {
-        padding: spacings[8],
-        flexGrow: 1,
-        justifyContent: "center",
-    },
-    modal: {
-        backgroundColor: backgroundColor.default,
-        borderRadius: 24,
-        padding: spacings[48],
-        boxShadow: shadows.modal,
-        alignSelf: "stretch",
-        width: "100%",
-        marginHorizontal: "auto",
-    },
-    modalSmall: {
-        borderRadius: 16,
-        backgroundColor: backgroundColor.default,
-        width: "100%",
-        padding: spacings[24],
-        alignSelf: "stretch",
-        marginHorizontal: "auto",
-    },
-    modalHeader: {
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "space-between",
-    },
-    modalIconTitle: {
-        ...commonStyles.fill,
-    },
-    trap: {
-        ...commonStyles.fill,
-    },
-    pressableOverlay: {
-        ...StyleSheet.absoluteFillObject,
-    },
-    closeButton: {
-        top: negativeSpacings[16],
-        right: negativeSpacings[16],
-    },
-});
-export const LakeModal = ({ visible, icon, title, color = "current", children, maxWidth = 570, onPressClose, }) => {
-    const [rootElement, setRootElement] = useState(() => undefined);
-    useEffect(() => {
-        const rootElement = document.createElement("div");
-        document.body.append(rootElement);
-        setRootElement(rootElement);
-        return () => {
-            rootElement.remove();
-            setRootElement(undefined);
-        };
-    }, []);
-    useBodyClassName("ModalOpen", { enabled: visible });
-    if (rootElement == null) {
-        return null;
-    }
-    return (_jsx(Portal, { container: rootElement, children: _jsxs(View, { "aria-modal": true, style: [styles.container, !visible && styles.inert], children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? _jsx(View, { style: styles.overlay }) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: styles.fill, enter: styles.modalEnter, leave: styles.modalLeave, children: visible ? (_jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.tiny, children: ({ large, small }) => (_jsx(FocusTrap, { autoFocus: true, focusLock: true, returnFocus: true, onEscapeKey: onPressClose, style: styles.trap, children: _jsxs(ScrollView, { style: styles.modalContainer, contentContainerStyle: large ? styles.modalContentContainer : styles.modalContentContainerSmall, children: [onPressClose != null ? (_jsx(Pressable, { onPress: onPressClose, style: styles.pressableOverlay })) : null, _jsxs(View, { role: "dialog", style: [large ? styles.modal : styles.modalSmall, { maxWidth }], children: [_jsxs(View, { style: styles.modalHeader, children: [_jsxs(View, { style: styles.modalIconTitle, children: [icon != null ? (_jsx(Icon, { name: icon, size: large ? 40 : 32, color: colors[color][500] })) : null, icon != null && title != null ? _jsx(Space, { height: 12 }) : null, title != null ? (_jsxs(_Fragment, { children: [_jsx(LakeHeading, { level: 2, variant: "h3", children: title }), _jsx(Space, { height: 12 })] })) : null] }), onPressClose != null ? (_jsx(LakeButton, { style: styles.closeButton, mode: "tertiary", onPress: onPressClose, icon: "lake-close" })) : null] }), typeof children == "function" ? children({ large, small }) : children] })] }) })) })) : null }) })] }) }));
-};