@swan-io/lake 1.0.0

package/src/components/LakeStepper.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Option } from "@swan-io/boxed";
+import { Link } from "@swan-io/chicane";
+import { StyleSheet, View } from "react-native";
+import { match, P } from "ts-pattern";
+import { colors } from "../constants/design";
+import { Box } from "./Box";
+import { Grid } from "./Grid";
+import { LakeHeading } from "./LakeHeading";
+import { LakeText } from "./LakeText";
+import { Space } from "./Space";
+const linkStyle = {
+    textDecoration: "none",
+};
+const styles = StyleSheet.create({
+    bar: {
+        width: "100%",
+        height: 4,
+        borderRadius: 2,
+        backgroundColor: colors.gray[100],
+        overflow: "hidden",
+        transformOrigin: "bottom",
+        transform: [{ scaleY: 0.5 }],
+        transitionDuration: "300ms",
+        transitionProperty: "transform",
+    },
+    barActive: {
+        transform: [{ scaleY: 1 }],
+    },
+    progressBar: {
+        width: "100%",
+        height: "100%",
+        backgroundColor: colors.current[500],
+        transformOrigin: "left",
+        transform: [{ scaleX: 0 }],
+        transitionDuration: "300ms",
+    },
+    progressBarDone: {
+        transform: [{ scaleX: 1 }],
+    },
+    progressBarError: {
+        backgroundColor: colors.negative[500],
+    },
+    mobileContainer: {
+        borderBottomWidth: 1,
+        borderBottomColor: colors.gray[100],
+        paddingBottom: 10,
+    },
+    mobileNumber: {
+        minWidth: 28,
+        height: 24,
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: colors.current[100],
+        backgroundColor: colors.current[50],
+    },
+    mobileNumberError: {
+        borderColor: colors.negative[100],
+        backgroundColor: colors.negative[50],
+    },
+});
+const StepLink = ({ to, disabled, style, children }) => {
+    return disabled ? (_jsx("span", { style: style, children: children })) : (_jsx(Link, { to: to, style: style, children: children }));
+};
+export const LakeStepper = ({ steps, activeStepId, style }) => {
+    const stepIds = steps
+        .map(step => match(step)
+        .with({ id: P.string }, ({ id }) => [id])
+        .with({ children: P.array(P.any) }, ({ children }) => children.map(({ id }) => id))
+        .exhaustive())
+        .flat();
+    const activeStepIndex = stepIds.indexOf(activeStepId);
+    return (_jsx(Grid, { numColumns: steps.length, horizontalSpace: 12, style: style, children: steps.map((step, index) => {
+            const stepNumber = index + 1;
+            const currentId = match(step)
+                .with({ id: P.string }, ({ id }) => id)
+                .with({ children: P.array(P.any) }, ({ children }) => children[0]?.id ?? "")
+                .exhaustive();
+            const isActive = match(step)
+                .with({ id: activeStepId }, () => true)
+                .with({ children: P.array(P.any) }, ({ children }) => children.some(({ id }) => id === activeStepId))
+                .otherwise(() => false);
+            const isDone = match(step)
+                .with({ id: P.string }, ({ id }) => stepIds.indexOf(id) < activeStepIndex)
+                .with({ children: P.array(P.any) }, ({ children }) => children.every(({ id }) => stepIds.indexOf(id) < activeStepIndex))
+                .exhaustive();
+            const hasErrors = match(step)
+                .with({ hasErrors: true }, () => true)
+                .with({ children: P.array(P.any) }, ({ children }) => children.some(({ hasErrors }) => hasErrors))
+                .otherwise(() => false);
+            const stepUrl = match(step)
+                .with({ id: P.string }, ({ url }) => url)
+                .with({ children: P.array(P.any) }, ({ children }) => children[0]?.url ?? "")
+                .exhaustive();
+            const subSteps = match(step)
+                .with({ id: P.string }, step => [step])
+                .with({ children: P.array(P.any) }, ({ children }) => children)
+                .exhaustive();
+            return (_jsxs(StepLink, { to: stepUrl, disabled: !isDone, style: linkStyle, children: [_jsxs(LakeText, { variant: isActive ? "medium" : "regular", color: hasErrors && (isDone || isActive)
+                            ? colors.negative[500]
+                            : isActive || isDone
+                                ? colors.current[500]
+                                : colors.gray[300], children: [stepNumber, ". ", step.label] }), _jsx(Space, { height: 12 }), _jsx(Grid, { numColumns: subSteps.length, horizontalSpace: 12, children: subSteps.map(subStep => {
+                            const isActive = subStep.id === activeStepId;
+                            const isDone = stepIds.indexOf(subStep.id) < activeStepIndex;
+                            const hasErrors = subStep.hasErrors === true;
+                            return (_jsx(View, { style: [styles.bar, isActive && styles.barActive], children: _jsx(View, { style: [
+                                        styles.progressBar,
+                                        (isActive || isDone) && styles.progressBarDone,
+                                        hasErrors && styles.progressBarError,
+                                    ] }) }, subStep.id));
+                        }) })] }, currentId));
+        }) }));
+};
+export const MobileStepTitle = ({ steps, activeStepId }) => {
+    const currentStep = Option.fromNullable(steps
+        .map((step, index) => match(step)
+        .with({ id: P.string }, step => ({ ...step, number: `${index + 1}` }))
+        .with({ children: P.array(P.any) }, ({ children }) => children.map((child, subIndex) => ({
+        ...child,
+        number: `${index + 1}.${subIndex + 1}`,
+    })))
+        .exhaustive())
+        .flat()
+        .find(({ id }) => id === activeStepId)).map(({ label, hasErrors, number }) => ({
+        number,
+        label,
+        isErrorState: hasErrors === true,
+    }));
+    return currentStep.match({
+        Some: ({ number, label, isErrorState }) => (_jsxs(Box, { direction: "row", alignItems: "center", justifyContent: "center", style: styles.mobileContainer, children: [_jsx(Box, { alignItems: "center", justifyContent: "center", style: [styles.mobileNumber, isErrorState && styles.mobileNumberError], children: _jsx(LakeText, { variant: "smallMedium", color: isErrorState ? colors.negative[500] : colors.current[500], children: number }) }), _jsx(Space, { width: 8 }), _jsx(LakeHeading, { level: 4, variant: "h4", color: isErrorState ? colors.negative[500] : colors.current[500], children: label })] })),
+        None: () => null,
+    });
+};

package/src/components/LakeText.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { Text, TextProps } from "react-native";
+declare const variants: {
+    semibold: import("react-native").TextStyle;
+    medium: import("react-native").TextStyle;
+    regular: import("react-native").TextStyle;
+    light: import("react-native").TextStyle;
+    smallSemibold: import("react-native").TextStyle;
+    smallMedium: import("react-native").TextStyle;
+    smallRegular: import("react-native").TextStyle;
+};
+export type TextVariant = keyof typeof variants;
+export declare const LakeText: import("react").ForwardRefExoticComponent<TextProps & {
+    align?: "center" | "left" | "right" | undefined;
+    children: ReactNode;
+    color?: string | undefined;
+    variant?: "semibold" | "medium" | "regular" | "light" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
+} & import("react").RefAttributes<Text>>;
+export {};

package/src/components/LakeText.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { StyleSheet, Text } from "react-native";
+import { texts } from "../constants/design";
+import { isNotNullish } from "../utils/nullish";
+const alignments = StyleSheet.create({
+    center: { textAlign: "center" },
+    left: { textAlign: "left" },
+    right: { textAlign: "right" },
+});
+const variants = StyleSheet.create({
+    semibold: texts.semibold,
+    medium: texts.medium,
+    regular: texts.regular,
+    light: texts.light,
+    smallSemibold: texts.smallSemibold,
+    smallMedium: texts.smallMedium,
+    smallRegular: texts.smallRegular,
+});
+export const LakeText = forwardRef(({ align = "left", children, color, style, variant = "regular", ...props }, forwardedRef) => (_jsx(Text, { ref: forwardedRef, style: [variants[variant], alignments[align], isNotNullish(color) && { color }, style], ...props, children: children })));

package/src/components/LakeTextInput.d.ts

@@ -0,0 +1,36 @@
+import { ChangeEventHandler, ReactNode } from "react";
+import { TextInput, TextInputProps } from "react-native";
+import { ColorVariants } from "../constants/design";
+import { IconName } from "./Icon";
+export type LakeTextInputProps = Omit<TextInputProps, "editable" | "onChange"> & {
+    error?: string;
+    readOnly?: boolean;
+    valid?: boolean;
+    disabled?: boolean;
+    color?: ColorVariants;
+    multiline?: boolean;
+    icon?: IconName;
+    unit?: string;
+    keyboardType?: TextInputProps["keyboardType"];
+    pattern?: string;
+    children?: ReactNode;
+    hideErrors?: boolean;
+    style?: TextInputProps["style"];
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+};
+export declare const LakeTextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "editable" | "onChange"> & {
+    error?: string | undefined;
+    readOnly?: boolean | undefined;
+    valid?: boolean | undefined;
+    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;
+    unit?: string | undefined;
+    keyboardType?: TextInputProps["keyboardType"];
+    pattern?: string | undefined;
+    children?: ReactNode;
+    hideErrors?: boolean | undefined;
+    style?: TextInputProps["style"];
+    onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+} & import("react").RefAttributes<TextInput | null>>;

package/src/components/LakeTextInput.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef, useState } from "react";
+import { StyleSheet, TextInput, View, } from "react-native";
+import { commonStyles } from "../constants/commonStyles";
+import { backgroundColor, colors, radii, shadows, spacings, texts, } from "../constants/design";
+import { useHover } from "../hooks/useHover";
+import { useMergeRefs } from "../hooks/useMergeRefs";
+import { useNativeProp } from "../hooks/useNativeProp";
+import { isNotNullish, isNotNullishOrEmpty, isNullish } from "../utils/nullish";
+import { Icon } from "./Icon";
+import { LakeText } from "./LakeText";
+const TRANSPARENT = "transparent";
+const styles = StyleSheet.create({
+    root: {
+        flexGrow: 1,
+        flexDirection: "row",
+    },
+    container: {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexDirection: "row",
+        alignItems: "stretch",
+    },
+    contents: {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexDirection: "row",
+        alignItems: "stretch",
+    },
+    input: {
+        ...texts.regular,
+        paddingHorizontal: spacings[16],
+        outlineStyle: "none",
+        height: 40,
+        borderColor: colors.gray[100],
+        placeholderTextColor: colors.gray[400],
+        borderWidth: 1,
+        borderRadius: radii[6],
+        backgroundColor: backgroundColor.accented,
+        color: colors.gray[900],
+        width: "100%",
+        flexShrink: 1,
+    },
+    multilineInput: {
+        height: "auto",
+        padding: spacings[8],
+    },
+    inputWithUnit: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+    },
+    hovered: {
+        boxShadow: shadows.tile,
+    },
+    disabled: {
+        backgroundColor: colors.gray[50],
+        borderColor: colors.gray[50],
+        color: colors.gray[900],
+        cursor: "not-allowed",
+    },
+    readOnly: {
+        backgroundColor: colors.gray[50],
+        borderColor: colors.gray[50],
+        color: colors.gray[900],
+    },
+    withIcon: {
+        paddingLeft: spacings[48],
+    },
+    error: {
+        borderColor: colors.negative[400],
+        paddingRight: spacings[48],
+    },
+    valid: {
+        borderColor: colors.positive[500],
+        paddingRight: spacings[48],
+    },
+    readOnlyError: {
+        borderColor: TRANSPARENT,
+        paddingRight: spacings[32],
+    },
+    endIcon: {
+        position: "absolute",
+        right: spacings[16],
+        top: "50%",
+        transform: [{ translateY: "-50%" }],
+    },
+    icon: {
+        position: "absolute",
+        left: spacings[16],
+        top: "50%",
+        transform: [{ translateY: "-50%" }],
+    },
+    readOnlyEndIcon: {
+        right: 0,
+    },
+    errorText: {
+        paddingTop: spacings[4],
+    },
+    unit: {
+        backgroundColor: colors.gray[50],
+        paddingHorizontal: spacings[16],
+        paddingVertical: spacings[8],
+        maxHeight: 40,
+        borderTopRightRadius: radii[6],
+        borderBottomRightRadius: radii[6],
+        borderColor: colors.gray[100],
+        borderWidth: 1,
+        borderLeftWidth: 0,
+        flexShrink: 0,
+    },
+    unitDisabled: {
+        borderColor: colors.gray[50],
+    },
+    focused: {
+        borderColor: colors.gray[500],
+        boxShadow: shadows.tile,
+    },
+});
+export const LakeTextInput = forwardRef(({ error, disabled = false, valid = false, readOnly = false, icon, children, unit, color = "gray", keyboardType = "default", hideErrors = false, onChange, pattern, style: stylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false, ...props }, forwardRef) => {
+    const inputRef = useRef(null);
+    const [isHovered, setIsHovered] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    useNativeProp(inputRef, "pattern", pattern);
+    useHover(inputRef, {
+        onHoverStart: () => setIsHovered(true),
+        onHoverEnd: () => setIsHovered(false),
+    });
+    const onFocus = useCallback((event) => {
+        setIsFocused(true);
+        originalOnFocus?.(event);
+    }, [originalOnFocus]);
+    const onBlur = useCallback((event) => {
+        setIsFocused(false);
+        originalOnBlur?.(event);
+    }, [originalOnBlur]);
+    const mergedRef = useMergeRefs(inputRef, forwardRef);
+    const isInteractive = !disabled && !readOnly;
+    const hasError = isNotNullishOrEmpty(error);
+    return (_jsxs(View, { style: commonStyles.fill, children: [_jsxs(View, { style: styles.root, accessibilityErrorMessage: error, children: [_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.contents, children: [_jsx(TextInput, { keyboardType: keyboardType, ref: mergedRef, ...props, defaultValue: defaultValue, value: isNullish(defaultValue) ? value ?? "" : value, onFocus: onFocus, onBlur: onBlur, editable: isInteractive, onChange: onChange, multiline: multiline, style: [
+                                            styles.input,
+                                            multiline && styles.multilineInput,
+                                            hasError && styles.error,
+                                            valid && styles.valid,
+                                            isNotNullish(icon) && styles.withIcon,
+                                            readOnly && hasError && styles.readOnlyError,
+                                            disabled && styles.disabled,
+                                            readOnly && styles.readOnly,
+                                            isHovered && isInteractive && styles.hovered,
+                                            isNotNullish(unit) && styles.inputWithUnit,
+                                            isFocused && styles.focused,
+                                            isFocused && { borderColor: colors[color][500] },
+                                            stylesFromProps,
+                                        ] }), hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.negative[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !hasError && valid && (_jsx(Icon, { name: "checkmark-filled", size: 20, color: colors.positive[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon }))] }), isNotNullish(unit) && (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit }))] }), children] }), !hideErrors && (_jsx(LakeText, { color: colors.negative[400], style: styles.errorText, children: error ?? " " }))] }));
+});

package/src/components/LakeTooltip.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import { ViewStyle } from "react-native";
+type Props = {
+    children: ReactNode;
+    content: ReactNode;
+    describedBy?: string;
+    matchReferenceWidth?: boolean;
+    hideArrow?: boolean;
+    onHide?: () => void;
+    onShow?: () => void;
+    placement: "left" | "top" | "bottom" | "right";
+    width?: number;
+    togglableOnFocus?: boolean;
+    containerStyle?: ViewStyle;
+};
+type TooltipRef = {
+    show: () => void;
+    hide: () => void;
+};
+export declare const LakeTooltip: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<TooltipRef>>>;
+export declare const InformationTooltip: ({ text }: {
+    text: string;
+}) => JSX.Element;
+export {};

package/src/components/LakeTooltip.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { StyleSheet, View } from "react-native";
+import { usePopper } from "react-popper";
+import { match } from "ts-pattern";
+import { colors, shadows } from "../constants/design";
+import { useHover } from "../hooks/useHover";
+import { isNullish } from "../utils/nullish";
+import { getRootElement, matchReferenceWidthModifier } from "../utils/popper";
+import { Icon } from "./Icon";
+import { LakeText } from "./LakeText";
+import { Portal } from "./Portal";
+const { matches: canHover } = window.matchMedia("(hover: hover)");
+const styles = StyleSheet.create({
+    base: {
+        alignItems: "center",
+    },
+    baseTop: {
+        marginBottom: 8,
+    },
+    baseBottom: {
+        marginTop: 8,
+    },
+    baseRight: {
+        marginLeft: 8,
+    },
+    baseLeft: {
+        marginRight: 8,
+    },
+    content: {
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+        backgroundColor: colors.gray[900],
+        color: colors.gray.contrast,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: colors.gray[900],
+        boxShadow: shadows.modal,
+    },
+    arrowContainer: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        margin: "auto",
+        width: 14,
+        height: 10,
+        overflow: "hidden",
+    },
+    arrowContainerHorizontal: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        margin: "auto",
+        width: 14,
+        height: 10,
+        overflow: "hidden",
+    },
+    arrowContainerTop: {
+        bottom: -7,
+    },
+    arrowContainerBottom: {
+        top: -7,
+    },
+    arrowContainerRight: {
+        left: -7,
+    },
+    arrowContainerLeft: {
+        right: -7,
+    },
+    arrow: {
+        position: "relative",
+        top: -7,
+        height: 14,
+        width: 14,
+        backgroundColor: colors.gray[900],
+        borderWidth: 1,
+        borderColor: colors.gray[900],
+        transform: [{ rotate: "45deg" }],
+    },
+    info: {
+        flexGrow: 0,
+    },
+});
+const isReactText = (node) => ["string", "number"].includes(typeof node);
+const MAX_WIDTH = "calc(100vw - 20px)";
+export const LakeTooltip = memo(forwardRef(({ children, content, describedBy, matchReferenceWidth = false, hideArrow = false, onHide, onShow, placement, width, togglableOnFocus = false, containerStyle, }, forwardedRef) => {
+    const referenceRef = useRef(null);
+    const rootElement = getRootElement(referenceRef.current);
+    const [popperElement, setPopperElement] = useState(null);
+    const timeoutRef = useRef(0);
+    const [visible, setVisible] = useState(false);
+    useImperativeHandle(forwardedRef, () => ({
+        show: () => setVisible(true),
+        hide: () => setVisible(false),
+    }));
+    useHover(referenceRef, {
+        disabled: !canHover,
+        onHoverChange: nextVisible => {
+            nextVisible ? onShow?.() : onHide?.();
+            setVisible(nextVisible);
+        },
+    });
+    const { attributes, update, styles: popperStyles, state, } = usePopper(referenceRef.current, popperElement, {
+        placement,
+        modifiers: useMemo(() => [
+            { name: "preventOverflow", enabled: true, options: { padding: 10 } },
+            { name: "flip", enabled: false },
+            { name: "hide", enabled: true },
+            { ...matchReferenceWidthModifier, enabled: matchReferenceWidth },
+        ], [matchReferenceWidth]),
+    });
+    const overflowOffset = state?.modifiersData.preventOverflow?.x ?? 0;
+    useEffect(() => {
+        const node = referenceRef.current;
+        if (!(node instanceof Element)) {
+            return;
+        }
+        const onFocus = (event) => {
+            event.preventDefault();
+            setVisible(true);
+        };
+        const onBlur = (event) => {
+            event.preventDefault();
+            const { target } = event;
+            if (target instanceof Element && (node === target || node.contains(target))) {
+                onHide?.();
+                setVisible(false);
+            }
+        };
+        const onPress = (event) => {
+            event.preventDefault();
+            if (!canHover) {
+                clearTimeout(timeoutRef.current);
+                setVisible(true);
+                timeoutRef.current = setTimeout(() => {
+                    setVisible(false);
+                }, 1500);
+            }
+        };
+        if (togglableOnFocus) {
+            node.addEventListener("focusin", onFocus);
+            node.addEventListener("focusout", onBlur);
+        }
+        node.addEventListener("mousedown", onPress);
+        return () => {
+            if (togglableOnFocus) {
+                node.removeEventListener("focusin", onFocus);
+                node.removeEventListener("focusout", onBlur);
+            }
+            node.removeEventListener("mousedown", onPress);
+        };
+    }, [referenceRef, togglableOnFocus, setVisible, onHide]);
+    useEffect(() => {
+        return () => clearTimeout(timeoutRef.current);
+    }, []);
+    useLayoutEffect(() => {
+        void update?.();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [content]);
+    return (_jsxs(_Fragment, { children: [_jsx(View, { ref: referenceRef, style: containerStyle, children: children }), isNullish(rootElement) || !visible ? null : (_jsx(Portal, { container: rootElement, children: _jsx("div", { ref: setPopperElement, style: { ...popperStyles.popper, maxWidth: MAX_WIDTH }, ...attributes.popper, role: "tooltip", "aria-describedby": describedBy, children: _jsxs(View, { style: [
+                            styles.base,
+                            state?.placement === "top" && styles.baseTop,
+                            state?.placement === "bottom" && styles.baseBottom,
+                            state?.placement === "right" && styles.baseRight,
+                            state?.placement === "left" && styles.baseLeft,
+                        ], children: [_jsx(View, { style: [styles.content, { width, maxWidth: MAX_WIDTH }], children: isReactText(content) ? (_jsx(LakeText, { align: "center", color: colors.gray.contrast, children: content })) : (content) }), !hideArrow && (_jsx(View, { accessibilityRole: "none", style: [
+                                    state?.placement === "right" || state?.placement === "left"
+                                        ? styles.arrowContainerHorizontal
+                                        : styles.arrowContainer,
+                                    state?.placement === "top" && styles.arrowContainerTop,
+                                    state?.placement === "bottom" && styles.arrowContainerBottom,
+                                    state?.placement === "right" && styles.arrowContainerRight,
+                                    state?.placement === "left" && styles.arrowContainerLeft,
+                                    {
+                                        transform: [
+                                            { translateX: -overflowOffset },
+                                            {
+                                                rotate: match(state?.placement)
+                                                    .with("bottom", () => "180deg")
+                                                    .with("left", () => "-90deg")
+                                                    .with("right", () => "90deg")
+                                                    .otherwise(() => "0deg"),
+                                            },
+                                        ],
+                                    },
+                                ], children: _jsx(View, { style: styles.arrow }) }))] }) }) }))] }));
+}));
+export const InformationTooltip = ({ text }) => (_jsx(LakeTooltip, { describedBy: "copy", placement: "bottom", togglableOnFocus: true, width: 300, content: text, children: _jsx(View, { style: styles.info, children: _jsx(Icon, { name: "info-regular", size: 24, color: colors.gray[900] }) }) }));