@artsy/palette-mobile 13.2.34 → 13.2.35

package/dist/elements/Input/Input.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/elements/Input/Input.stories.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { Input } from "./Input";
+import { List } from "../../storybook/helpers";
+import { MagnifyingGlassIcon } from "../../svgs";
+import { Join } from "../Join";
+import { Separator } from "../Separator";
+import { Text } from "../Text";
+storiesOf("Input", module).add("Variants", () => (_jsx(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: _jsxs(Join, { separator: _jsx(Separator, { my: 2 }), children: [_jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "Default" }), _jsx(Input, {})] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title" }), _jsx(Input, { title: "Title" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and required" }), _jsx(Input, { title: "Title", required: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and optional" }), _jsx(Input, { title: "Title", optional: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and clear button" }), _jsx(Input, { title: "Title", enableClearButton: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and loading" }), _jsx(Input, { title: "Title", loading: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and icon" }), _jsx(Input, { title: "Title", icon: _jsx(MagnifyingGlassIcon, {}) })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and error" }), _jsx(Input, { title: "Title", error: "this is an error" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and disabled" }), _jsx(Input, { title: "Disabled", disabled: true })] }), _jsx(_Fragment, { children: _jsx(Input, { placeholder: "I'm a placeholder" }) }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title, clear button and value" }), _jsx(Input, { value: "5", enableClearButton: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With fixed right placeholder" }), _jsx(Input, { fixedRightPlaceholder: "cm" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With placeholder" }), _jsx(Input, { placeholder: "I'm a placeholder" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and placeholder" }), _jsx(Input, { title: "full text", value: "Wow this is a long text, I wonder if I can read the whole thing!" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With text limit" }), _jsx(Input, { title: "Text with limit", maxLength: 100, showLimit: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine Without limit" }), _jsx(Input, { title: "Text area", multiline: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine With limit" }), _jsx(Input, { title: "Text area with limit", multiline: true, maxLength: 150, showLimit: true })] })] }) })));

package/dist/elements/Input/Input.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/elements/Input/Input.tests.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent } from "@testing-library/react-native";
+import { Input } from "./Input";
+import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
+describe("Input", () => {
+    const testID = "input";
+    it("renders an instance of native TextInput", () => {
+        const { getByTestId } = renderWithWrappers(_jsx(Input, { testID: testID }));
+        expect(getByTestId(testID).type).toEqual("TextInput");
+    });
+    it("uses correct font family", () => {
+        const { getByTestId } = renderWithWrappers(_jsx(Input, { testID: testID }));
+        expect(getByTestId(testID).props.style[0].fontFamily).toEqual("Unica77LL-Regular");
+    });
+    it("mutates given text as value", () => {
+        const { getByTestId, getByDisplayValue } = renderWithWrappers(_jsx(Input, { testID: testID }));
+        fireEvent.changeText(getByTestId(testID), "mockStr");
+        getByDisplayValue("mockStr");
+    });
+    it("Shows an error message when input has an error", () => {
+        const { getByText } = renderWithWrappers(_jsx(Input, { value: "", error: "input has an error" }));
+        getByText("input has an error");
+    });
+    it("should render the clear button when input is not empty and pressing it should clear the input", () => {
+        const { getByDisplayValue, queryByDisplayValue, getByPlaceholderText, getByLabelText } = renderWithWrappers(_jsx(Input, { placeholder: "USD", enableClearButton: true }));
+        // placeholder is rendered
+        getByPlaceholderText("USD");
+        fireEvent(getByPlaceholderText("USD"), "onChangeText", "Banksy");
+        getByDisplayValue("Banksy");
+        getByLabelText("Clear input button");
+        fireEvent.press(getByLabelText("Clear input button"));
+        expect(queryByDisplayValue("Banksy")).toBeFalsy();
+    });
+    it("should show the correct show/hide password icon", () => {
+        const { getByPlaceholderText, queryByLabelText, getByLabelText } = renderWithWrappers(_jsx(Input, { placeholder: "password", secureTextEntry: true }));
+        getByPlaceholderText("password");
+        getByLabelText("show password button");
+        fireEvent(getByPlaceholderText("password"), "onChangeText", "123456");
+        fireEvent.press(getByLabelText("show password button"));
+        expect(queryByLabelText("show password button")).toBeFalsy();
+        getByLabelText("hide password button");
+        fireEvent.press(getByLabelText("hide password button"));
+        expect(queryByLabelText("hide password button")).toBeFalsy();
+        getByLabelText("show password button");
+    });
+    it("enables scrolling when multiline is true", () => {
+        const { getByTestId } = renderWithWrappers(_jsx(Input, { testID: testID, multiline: true }));
+        expect(getByTestId(testID).props.scrollEnabled).toBe(true);
+    });
+});

package/dist/elements/Input/InputTitle.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const InputTitle: React.FC<{
+    children: React.ReactNode;
+    optional?: boolean;
+    required?: boolean;
+}>;

package/dist/elements/Input/InputTitle.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "../Text";
+export const InputTitle = ({ children: title, optional, required }) => {
+    if (!title) {
+        return null;
+    }
+    return (_jsxs(Text, { variant: "md", style: { fontSize: 13, marginBottom: 2, textTransform: "uppercase" }, children: [title, !!required && (_jsx(Text, { variant: "md", style: { fontSize: 13, textTransform: "none" }, color: "onBackgroundMedium", children: "Required" })), !!optional && (_jsxs(Text, { variant: "md", style: { fontSize: 13, textTransform: "none" }, color: "onBackgroundMedium", children: [" ", "Optional"] }))] }));
+};

package/dist/elements/Input/helpers.d.ts

@@ -0,0 +1,42 @@
+export declare const SHRINKED_LABEL_TOP = 13;
+export declare const EXPANDED_LABEL_TOP = 40;
+export type VariantState = {
+    untouched: {
+        inputBorderColor: string;
+        labelFontSize: number;
+        labelColor: string;
+        labelTop: number;
+        inputTextColor: string;
+    };
+    touched: {
+        inputBorderColor: string;
+        labelFontSize: number;
+        labelColor: string;
+        labelTop: number;
+        inputTextColor: string;
+    };
+    focused: {
+        inputBorderColor: string;
+        labelFontSize: number;
+        labelColor: string;
+        labelTop: number;
+        inputTextColor: string;
+    };
+};
+declare const DEFAULT_VARIANT_STATES: VariantState;
+export declare const INPUT_VARIANTS: {
+    default: VariantState;
+    error: VariantState;
+    disabled: VariantState;
+};
+export type InputState = keyof typeof DEFAULT_VARIANT_STATES;
+export type InputVariant = keyof typeof INPUT_VARIANTS;
+export declare const getInputState: ({ isFocused, value, }: {
+    isFocused: boolean;
+    value: string | undefined;
+}) => InputState;
+export declare const getInputVariant: ({ disabled, hasError, }: {
+    disabled: boolean;
+    hasError: boolean;
+}) => "default" | "disabled" | "error";
+export {};

package/dist/elements/Input/helpers.js

@@ -0,0 +1,107 @@
+import { THEME } from "@artsy/palette-tokens";
+export const SHRINKED_LABEL_TOP = 13;
+export const EXPANDED_LABEL_TOP = 40;
+const DEFAULT_VARIANT_STATES = {
+    // Unfocused input with no value
+    untouched: {
+        inputBorderColor: THEME.colors.black30,
+        labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10),
+        labelColor: THEME.colors.black60,
+        labelTop: EXPANDED_LABEL_TOP,
+        inputTextColor: THEME.colors.black100,
+    },
+    // Unfocused input with value
+    touched: {
+        inputBorderColor: THEME.colors.black60,
+        labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
+        labelColor: THEME.colors.black60,
+        labelTop: SHRINKED_LABEL_TOP,
+        inputTextColor: THEME.colors.black100,
+    },
+    // Focused input with or without value
+    focused: {
+        inputBorderColor: THEME.colors.blue100,
+        labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
+        labelColor: THEME.colors.blue100,
+        labelTop: SHRINKED_LABEL_TOP,
+        inputTextColor: THEME.colors.black100,
+    },
+};
+const ERROR_VARIANT_STATES = {
+    // Unfocused error input with no value
+    untouched: {
+        inputBorderColor: THEME.colors.red100,
+        labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10),
+        labelColor: THEME.colors.red100,
+        labelTop: EXPANDED_LABEL_TOP,
+        inputTextColor: THEME.colors.black100,
+    },
+    // Unfocused error input with value
+    touched: {
+        inputBorderColor: THEME.colors.red100,
+        labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
+        labelColor: THEME.colors.red100,
+        labelTop: SHRINKED_LABEL_TOP,
+        inputTextColor: THEME.colors.black100,
+    },
+    // Focused error input with or without value
+    focused: {
+        inputBorderColor: THEME.colors.red100,
+        labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
+        labelColor: THEME.colors.red100,
+        labelTop: SHRINKED_LABEL_TOP,
+        inputTextColor: THEME.colors.black100,
+    },
+};
+const DISABLED_VARIANT_STATES = {
+    // Unfocused disabled input with no value
+    untouched: {
+        inputBorderColor: THEME.colors.black30,
+        labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10),
+        labelColor: THEME.colors.black30,
+        labelTop: EXPANDED_LABEL_TOP,
+        inputTextColor: THEME.colors.black30,
+    },
+    // Unfocused disabled input with value
+    touched: {
+        inputBorderColor: THEME.colors.black30,
+        labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
+        labelColor: THEME.colors.black30,
+        labelTop: SHRINKED_LABEL_TOP,
+        inputTextColor: THEME.colors.black30,
+    },
+    // Focused disabled input with or without value
+    // Adding this just to satisfy typescript because a disabled input can't be focused
+    focused: {
+        inputBorderColor: THEME.colors.black30,
+        labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
+        labelColor: THEME.colors.black30,
+        labelTop: SHRINKED_LABEL_TOP,
+        inputTextColor: THEME.colors.black30,
+    },
+};
+export const INPUT_VARIANTS = {
+    default: DEFAULT_VARIANT_STATES,
+    error: ERROR_VARIANT_STATES,
+    disabled: DISABLED_VARIANT_STATES,
+};
+export const getInputState = ({ isFocused, value, }) => {
+    if (isFocused) {
+        return "focused";
+    }
+    else if (value) {
+        return "touched";
+    }
+    else {
+        return "untouched";
+    }
+};
+export const getInputVariant = ({ disabled, hasError, }) => {
+    if (hasError) {
+        return "error";
+    }
+    if (disabled) {
+        return "disabled";
+    }
+    return "default";
+};

package/dist/elements/Input/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Input";
+export * from "./helpers";
+export * from "./InputTitle";

package/dist/elements/Input/index.js

@@ -0,0 +1,3 @@
+export * from "./Input";
+export * from "./helpers";
+export * from "./InputTitle";

package/dist/elements/Input/maskValue.d.ts

@@ -0,0 +1,6 @@
+export declare const maskValue: ({ currentValue, mask, previousValue, }: {
+    currentValue: string | undefined;
+    mask: string | string[] | undefined;
+    previousValue?: string | undefined;
+}) => string | undefined;
+export declare const unmaskText: (mask: string) => string;

package/dist/elements/Input/maskValue.js

@@ -0,0 +1,44 @@
+const maskString = (value, mask) => {
+    let result = mask.replace(/9/g, "_");
+    for (const digit of value.replace(/\D/g, "")) {
+        if (result.includes("_")) {
+            result = result.replace("_", digit);
+        }
+        else {
+            result = result + digit;
+        }
+    }
+    if (result.includes("_")) {
+        result = result.slice(0, result.indexOf("_"));
+    }
+    return result;
+};
+export const maskValue = ({ currentValue, mask, previousValue = "", }) => {
+    if (!currentValue || !mask || mask.length === 0) {
+        return currentValue;
+    }
+    const value = unmaskText(currentValue);
+    if (previousValue && previousValue.length > currentValue.length) {
+        // user is deleting, don't mess with the format
+        return currentValue;
+    }
+    if (typeof mask === "string") {
+        return maskString(currentValue, mask);
+    }
+    else {
+        if (value.length <= unmaskText(mask[0]).length) {
+            return maskString(value, mask[0]);
+        }
+        else {
+            const nearestMask = [...mask].reverse().find((m) => {
+                if (value.length >= unmaskText(m).length) {
+                    return true;
+                }
+                return false;
+            }) || mask[0];
+            return maskString(value, nearestMask);
+        }
+    }
+};
+// Helper method to clean the mask and remove all non-digits and spaces
+export const unmaskText = (mask) => mask.replace(/\W/g, "");

package/dist/elements/Input/maskValue.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/elements/Input/maskValue.tests.js

@@ -0,0 +1,56 @@
+import { maskValue } from "./maskValue";
+const GERMANY_PHONE_MASKS = [
+    "999 999",
+    "999 9999",
+    "999 99999",
+    "999 999999",
+    "999 9999999",
+    "999 99999999",
+    "9999 99999999",
+];
+const TUNISIA_PHONE_MASK = "99 999 999";
+const UNITED_STATES_PHONE_MASK = "999 999 9999";
+describe(maskValue, () => {
+    it("leaves the value value alone if the user is deleting characters", () => {
+        expect(maskValue({
+            currentValue: "017672458053",
+            mask: GERMANY_PHONE_MASKS,
+        })).toBe("0176 72458053");
+        expect(maskValue({
+            currentValue: "17672458053",
+            mask: GERMANY_PHONE_MASKS,
+        })).toBe("176 72458053");
+        expect(maskValue({
+            currentValue: "030901820",
+            mask: GERMANY_PHONE_MASKS,
+        })).toBe("030 901820");
+        expect(maskValue({
+            currentValue: "901820",
+            mask: GERMANY_PHONE_MASKS,
+        })).toBe("901 820");
+        expect(maskValue({
+            currentValue: "20335902",
+            mask: TUNISIA_PHONE_MASK,
+        })).toBe("20 335 902");
+    });
+    it("works with empty strings", () => {
+        expect(maskValue({
+            currentValue: "",
+            mask: GERMANY_PHONE_MASKS,
+        })).toBe("");
+        expect(maskValue({
+            currentValue: "",
+            mask: "",
+        })).toBe("");
+    });
+    it("formats a given phone number to the given country's default format", () => {
+        expect(maskValue({
+            currentValue: "7825577664",
+            mask: UNITED_STATES_PHONE_MASK,
+        })).toBe("782 557 7664");
+        expect(maskValue({
+            currentValue: "782557766",
+            mask: UNITED_STATES_PHONE_MASK,
+        })).toBe("782 557 766");
+    });
+});

package/dist/elements/Join/Join.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+interface JoinProps {
+    children: React.ReactNode;
+    separator: React.ReactElement;
+    /** Flatten out nested fragments. Useful for Joins with conditional rendering */
+    flatten?: boolean;
+}
+/**
+ * `Join` is a higher order component that renders a separator component
+ * between each of `Join`'s direct children.
+ *
+ * @example
+ *
+ *  <Join separator={<SomeComponent/>}>
+ *    <child1/>
+ *    <child2/>
+ *    <child3/>
+ *  </Join>
+ *
+ * which renders
+ *
+ * <child1/>
+ * <SomeComponent/>
+ * <child2/>
+ * <SomeComponent/>
+ * <child3/>
+ */
+export declare const Join: ({ separator, children, flatten }: JoinProps) => any;
+export {};

package/dist/elements/Join/Join.js

@@ -0,0 +1,37 @@
+import { Children, cloneElement } from "react";
+import { flattenChildren } from "../../utils/flattenChildren";
+/**
+ * `Join` is a higher order component that renders a separator component
+ * between each of `Join`'s direct children.
+ *
+ * @example
+ *
+ *  <Join separator={<SomeComponent/>}>
+ *    <child1/>
+ *    <child2/>
+ *    <child3/>
+ *  </Join>
+ *
+ * which renders
+ *
+ * <child1/>
+ * <SomeComponent/>
+ * <child2/>
+ * <SomeComponent/>
+ * <child3/>
+ */
+export const Join = ({ separator, children, flatten = false }) => {
+    const childArray = flatten ? flattenChildren(children) : Children.toArray(children);
+    return childArray.reduce((acc, curr, currentIndex) => {
+        acc.push(cloneElement(curr, {
+            key: `join-${currentIndex}`,
+        }));
+        if (currentIndex !== childArray.length - 1) {
+            acc.push(separator &&
+                cloneElement(separator, {
+                    key: `join-sep-${currentIndex}`,
+                }));
+        }
+        return acc;
+    }, []);
+};

package/dist/elements/Join/index.d.ts

@@ -0,0 +1 @@
+export * from "./Join";

package/dist/elements/Join/index.js

@@ -0,0 +1 @@
+export * from "./Join";

package/dist/elements/LazyFlatlist/LazyFlatlist.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from "react";
+export declare function LazyFlatlist<T>(props: {
+    keyExtractor: (item: T) => string;
+    children: (props: {
+        viewedItems: Set<string>;
+        viewabilityConfig: any;
+        onViewableItemsChanged: any;
+        hasSeenItem: (item: T) => boolean;
+    }) => React.ReactNode | null | undefined;
+}): ReactElement;

package/dist/elements/LazyFlatlist/LazyFlatlist.js

@@ -0,0 +1,15 @@
+import { useHasSeenItem } from "./useHasSeenItem";
+export function LazyFlatlist(props) {
+    const { viewabilityConfig, onViewableItemsChanged, hasSeenItem, viewedItems } = useHasSeenItem({
+        keyExtractor: props.keyExtractor,
+    });
+    if (!props.children || typeof props.children !== "function") {
+        throw new Error("LazyScrollContext requires children");
+    }
+    return props.children({
+        viewedItems,
+        viewabilityConfig,
+        onViewableItemsChanged,
+        hasSeenItem,
+    });
+}

package/dist/elements/LazyFlatlist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./LazyFlatlist";
+export * from "./useHasSeenItem";

package/dist/elements/LazyFlatlist/index.js

@@ -0,0 +1,2 @@
+export * from "./LazyFlatlist";
+export * from "./useHasSeenItem";

package/dist/elements/LazyFlatlist/useHasSeenItem.d.ts

@@ -0,0 +1,12 @@
+import { ViewToken, ViewabilityConfig } from "react-native";
+export declare const useHasSeenItem: <T>({ keyExtractor }: {
+    keyExtractor: (item: T) => string;
+}) => {
+    onViewableItemsChanged: ({ viewableItems }: {
+        viewableItems: ViewToken[];
+        changed: ViewToken[];
+    }) => void;
+    viewabilityConfig: ViewabilityConfig;
+    hasSeenItem: (item: T) => boolean;
+    viewedItems: Set<string>;
+};

package/dist/elements/LazyFlatlist/useHasSeenItem.js

@@ -0,0 +1,27 @@
+import { useRef, useState } from "react";
+// This is a custom hook that is used to determine if a user has seen an item in a list or not
+export const useHasSeenItem = ({ keyExtractor }) => {
+    const [viewedItems, setViewedItems] = useState(new Set());
+    const viewabilityConfig = useRef({
+        // Percent of of the item that is visible for a partially occluded item to count as "viewable"
+        itemVisiblePercentThreshold: 20,
+        minimumViewTime: 300,
+        waitForInteraction: false,
+    }).current;
+    const viewedItemsRef = useRef(new Set()).current;
+    const onViewableItemsChanged = useRef(({ viewableItems }) => {
+        viewableItems.forEach(({ item }) => {
+            viewedItemsRef.add(keyExtractor(item));
+        });
+        setViewedItems(new Set(viewedItemsRef));
+    }).current;
+    const hasSeenItem = (item) => {
+        return viewedItems.has(keyExtractor(item));
+    };
+    return {
+        onViewableItemsChanged,
+        viewabilityConfig,
+        hasSeenItem,
+        viewedItems,
+    };
+};

package/dist/elements/LegacyScreen/LegacyScreen.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { FlexProps } from "../Flex";
+interface HeaderProps {
+    onBack?: () => void;
+    title?: string;
+    onSkip?: () => void;
+}
+export declare const Header: React.FC<HeaderProps>;
+/**
+ * @deprecated Use `Screen.Header` instead.
+ */
+export declare const FloatingHeader: React.FC<HeaderProps>;
+interface BodyProps extends Pick<FlexProps, "backgroundColor"> {
+    children?: React.ReactNode;
+    scroll?: boolean;
+    noTopSafe?: boolean;
+    noBottomSafe?: boolean;
+    fullwidth?: boolean;
+}
+export declare const LegacyScreen: (({ children }: {
+    children?: React.ReactNode;
+}) => JSX.Element) & {
+    Body: ({ scroll, noTopSafe, noBottomSafe, fullwidth, children, ...restFlexProps }: BodyProps) => JSX.Element;
+    Header: import("react").FC<HeaderProps>;
+    FloatingHeader: import("react").FC<HeaderProps>;
+    Background: import("react").FC<{
+        children?: import("react").ReactNode;
+    }>;
+    BottomView: import("react").FC<{
+        children?: import("react").ReactNode;
+    }>;
+    BodyXPadding: import("react").FC<import("..").BoxProps>;
+    SafeBottomPadding: () => JSX.Element | null;
+};
+export {};