@artsy/palette-mobile 13.2.33 → 13.2.34

package/dist/elements/Radio/RadioButton.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-import { TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
-import { Insets, TouchableWithoutFeedbackProps } from "react-native";
-import { FlexProps } from "../Flex";
-export interface RadioButtonProps extends Omit<TouchableWithoutFeedbackProps, "hitSlop">, Omit<FlexProps, "hitSlop"> {
-    hitSlop?: Insets;
-    selected?: boolean;
-    focused?: boolean;
-    disabled?: boolean;
-    error?: boolean;
-    text?: React.ReactElement | string;
-    textVariant?: TextVariant;
-    subtitle?: React.ReactElement | string;
-    accessibilityState?: {
-        checked: boolean;
-    };
-}
-export declare const RadioButton: React.FC<RadioButtonProps>;
-interface RadioDotProps {
-    size: number;
-}
-export declare const RadioDot: ({ size }: RadioDotProps) => JSX.Element;
-export declare const DisabledDot: import("styled-components").StyledComponent<({ size }: RadioDotProps) => JSX.Element, any, {}, never>;
-export {};

package/dist/elements/Radio/RadioButton.js

@@ -1,89 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DisabledDot = exports.RadioDot = exports.RadioButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const theme_get_1 = require("@styled-system/theme-get");
-const react_native_1 = require("react-native");
-const native_1 = __importDefault(require("styled-components/native"));
-const animation_1 = require("../../animation");
-const useTheme_1 = require("../../utils/hooks/useTheme");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-const RADIOBUTTON_SIZE = 20;
-const DURATION = 150;
-const RadioButton = ({ selected, disabled, error, onPress, text, textVariant = "md", subtitle, accessibilityState, ...restProps }) => {
-    const { color, space } = (0, useTheme_1.useTheme)();
-    const fontScale = react_native_1.PixelRatio.getFontScale();
-    const radioButtonSize = RADIOBUTTON_SIZE * fontScale;
-    const defaultRadioButtonStyle = {
-        backgroundColor: color("white100"),
-        borderColor: color("black60"),
-    };
-    const selectedRadioButtonStyle = {
-        backgroundColor: color("black100"),
-        borderColor: color("black100"),
-    };
-    const disabledRadioButtonStyle = {
-        backgroundColor: color("black5"),
-        borderColor: color("black10"),
-    };
-    const radioButtonStyles = {
-        default: {
-            notSelected: defaultRadioButtonStyle,
-            selected: selectedRadioButtonStyle,
-        },
-        error: {
-            notSelected: { backgroundColor: color("white100"), borderColor: color("red100") },
-            selected: selectedRadioButtonStyle,
-        },
-    };
-    const radioButtonStyle = disabled
-        ? disabledRadioButtonStyle
-        : radioButtonStyles[error ? "error" : "default"][selected ? "selected" : "notSelected"];
-    const textColor = error ? color("red100") : disabled ? color("black30") : color("black100");
-    const subtitleColor = error ? color("red100") : color("black30");
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { accessibilityState: accessibilityState, onPress: (event) => {
-            if (disabled) {
-                return;
-            }
-            onPress?.(event);
-        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ...restProps, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { mt: "2px", children: (0, jsx_runtime_1.jsx)(animation_1.CssTransition, { style: [
-                                    styles(fontScale).container,
-                                    { marginRight: space(1) * fontScale },
-                                    radioButtonStyle,
-                                ], animate: ["borderColor"], duration: DURATION, children: !!selected &&
-                                    (!!disabled ? ((0, jsx_runtime_1.jsx)(exports.DisabledDot, { size: radioButtonSize })) : ((0, jsx_runtime_1.jsx)(exports.RadioDot, { size: radioButtonSize }))) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", children: !!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: textVariant, color: textColor, children: text })) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: `${(RADIOBUTTON_SIZE + space(1)) * fontScale}px`, mt: "6px", children: !!subtitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: subtitleColor, children: subtitle })) })] }) }));
-};
-exports.RadioButton = RadioButton;
-// styled-component does not have support for Animated.View
-const styles = (fontScale) => react_native_1.StyleSheet.create({
-    container: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        borderWidth: 1,
-        borderStyle: "solid",
-        height: RADIOBUTTON_SIZE * fontScale,
-        width: RADIOBUTTON_SIZE * fontScale,
-        borderRadius: (RADIOBUTTON_SIZE * fontScale) / 2,
-    },
-});
-// This component represents the white ● mark in CSS. We are not using styled-system since it's easier to specify raw CSS
-// properties with styled-component.
-// Height, Width, and Border Radius calculations are used to maintain the size of the white dot when scaling
-const RadioDot = ({ size }) => {
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
-            height: size * 0.625,
-            width: size * 0.625,
-            borderRadius: size * 0.3125,
-            backgroundColor: "white",
-        } }));
-};
-exports.RadioDot = RadioDot;
-exports.DisabledDot = (0, native_1.default)(exports.RadioDot) `
-  border-bottom-color: ${(0, theme_get_1.themeGet)("colors.black30")};
-  border-left-color: ${(0, theme_get_1.themeGet)("colors.black30")};
-`;

package/dist/elements/Radio/RadioButton.stories.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./RadioButton").RadioButtonProps>;
-};
-export default _default;

package/dist/elements/Radio/RadioButton.stories.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@storybook/react-native");
-const react_1 = require("react");
-const RadioButton_1 = require("./RadioButton");
-const helpers_1 = require("../../storybook/helpers");
-const Flex_1 = require("../Flex");
-exports.default = {
-    title: "RadioButton",
-    component: RadioButton_1.RadioButton,
-};
-(0, react_native_1.storiesOf)("RadioButton", module).add("Default", () => {
-    const [metric, setMetric] = (0, react_1.useState)("cm");
-    return ((0, jsx_runtime_1.jsx)(helpers_1.List, { contentContainerStyle: {
-            marginHorizontal: 20,
-            justifyContent: "flex-start",
-            alignItems: "flex-start",
-        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", gap: 20, children: [(0, jsx_runtime_1.jsx)(RadioButton_1.RadioButton, { onPress: () => {
-                        setMetric("cm");
-                    }, selected: metric === "cm", text: "centimeters" }), (0, jsx_runtime_1.jsx)(RadioButton_1.RadioButton, { onPress: () => {
-                        setMetric("in");
-                    }, selected: metric === "in", text: "inches" })] }) }));
-});

package/dist/elements/Radio/RadioDot.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import { FlexProps } from "../Flex";
-type RadioDotMode = "default" | "disabled" | "error" | "hover";
-export declare const RADIO_DOT_MODES: Record<RadioDotMode, {
-    resting: FlexProps;
-    selected: FlexProps;
-}>;
-interface RadioDotProps {
-    disabled?: boolean;
-    error?: boolean;
-    hover?: boolean;
-    selected?: boolean;
-}
-export declare const RadioDot: (props: RadioDotProps) => JSX.Element;
-export {};

package/dist/elements/Radio/RadioDot.js

@@ -1,72 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioDot = exports.RADIO_DOT_MODES = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Flex_1 = require("../Flex");
-exports.RADIO_DOT_MODES = {
-    default: {
-        resting: {
-            borderWidth: 2,
-            borderColor: "black10",
-        },
-        selected: {
-            borderWidth: 2,
-            borderColor: "black100",
-            backgroundColor: "black100",
-        },
-    },
-    disabled: {
-        resting: {
-            borderWidth: 2,
-            borderColor: "black10",
-            backgroundColor: "black10",
-        },
-        selected: {
-            borderWidth: 2,
-            borderColor: "black10",
-            backgroundColor: "black10",
-        },
-    },
-    error: {
-        resting: {
-            borderWidth: 2,
-            borderColor: "red100",
-        },
-        selected: {
-            borderWidth: 2,
-            borderColor: "black100",
-            backgroundColor: "black100",
-        },
-    },
-    hover: {
-        resting: {
-            borderWidth: 2,
-            borderColor: "black10",
-            backgroundColor: "black10",
-        },
-        selected: {
-            borderWidth: 2,
-            borderColor: "black100",
-            backgroundColor: "black100",
-        },
-    },
-};
-const RadioDot = (props) => ((0, jsx_runtime_1.jsx)(Container, { ...props, children: (0, jsx_runtime_1.jsx)(Dot, { ...props }) }));
-exports.RadioDot = RadioDot;
-const Container = ({ selected = false, hover = false, error = false, disabled = false, }) => {
-    const mode = (() => {
-        switch (true) {
-            case disabled:
-                return exports.RADIO_DOT_MODES.disabled;
-            case hover:
-                return exports.RADIO_DOT_MODES.hover;
-            case error:
-                return exports.RADIO_DOT_MODES.error;
-            default:
-                return exports.RADIO_DOT_MODES.default;
-        }
-    })();
-    const moreProps = selected ? mode.selected : mode.resting;
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: 20, height: 20, borderRadius: 50, alignItems: "center", justifyContent: "center", flexShrink: 0, ...moreProps }));
-};
-const Dot = ({ selected = false, disabled = false }) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: 10, height: 10, borderRadius: 50, alignItems: "center", justifyContent: "center", flexShrink: 0, backgroundColor: disabled && !selected ? "transparent" : "white100" }));

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

@@ -1,2 +0,0 @@
-export { RadioButton } from "./RadioButton";
-export { RadioDot } from "./RadioDot";

package/dist/elements/Radio/index.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioDot = exports.RadioButton = void 0;
-var RadioButton_1 = require("./RadioButton");
-Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return RadioButton_1.RadioButton; } });
-var RadioDot_1 = require("./RadioDot");
-Object.defineProperty(exports, "RadioDot", { enumerable: true, get: function () { return RadioDot_1.RadioDot; } });

package/dist/elements/Screen/Background.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const Background: React.FC<{
-    children: React.ReactNode;
-}>;

package/dist/elements/Screen/Background.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Background = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Flex_1 = require("../Flex");
-const Background = ({ children }) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, children: children }));
-exports.Background = Background;

package/dist/elements/Screen/Body.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { FlexProps } from "../Flex";
-export interface BodyProps extends FlexProps {
-    fullwidth?: boolean;
-    scroll?: boolean;
-    disableKeyboardAvoidance?: boolean;
-}
-export declare const Body: React.FC<BodyProps>;

package/dist/elements/Screen/Body.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Body = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const constants_1 = require("./constants");
-const Flex_1 = require("../Flex");
-const Body = ({ children, fullwidth, scroll, disableKeyboardAvoidance = false, ...flexProps }) => {
-    const Wrapper = disableKeyboardAvoidance ? react_1.Fragment : react_native_1.KeyboardAvoidingView;
-    return ((0, jsx_runtime_1.jsx)(Wrapper, { ...(disableKeyboardAvoidance
-            ? {}
-            : { style: { flex: 1 }, behavior: react_native_1.Platform.OS === "ios" ? "padding" : "height" }), children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, ...flexProps, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, px: fullwidth ? undefined : constants_1.SCREEN_HORIZONTAL_PADDING, children: scroll ? (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { children: children }) : children }) }) }));
-};
-exports.Body = Body;

package/dist/elements/Screen/BottomView.d.ts

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

package/dist/elements/Screen/BottomView.js

@@ -1,19 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BottomView = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
-const constants_1 = require("./constants");
-const useColor_1 = require("../../utils/hooks/useColor");
-const Flex_1 = require("../Flex");
-const BottomView = ({ children, darkMode }) => {
-    const color = (0, useColor_1.useColor)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_linear_gradient_1.default, { colors: [darkMode ? "rgba(0,0,0,0)" : "rgba(255,255,255,0)", color("background")], start: { x: 0, y: 0 }, end: { x: 0, y: 1 }, style: {
-                    width: "100%",
-                    height: 20,
-                }, pointerEvents: "none" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { px: constants_1.SCREEN_HORIZONTAL_PADDING, pt: 1, pb: 4, backgroundColor: "background", children: children })] }));
-};
-exports.BottomView = BottomView;

package/dist/elements/Screen/FloatingHeader.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { FlexProps } from "../Flex";
-export interface FloatingHeaderProps extends FlexProps {
-    onBack?: () => void;
-    rightElements?: React.ReactNode;
-}
-export declare const FloatingHeader: React.FC<FloatingHeaderProps>;

package/dist/elements/Screen/FloatingHeader.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FloatingHeader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_safe_area_context_1 = require("react-native-safe-area-context");
-const constants_1 = require("./constants");
-const BackButton_1 = require("../BackButton");
-const Flex_1 = require("../Flex");
-const Spacer_1 = require("../Spacer");
-const FloatingHeader = ({ onBack, rightElements, ...flexProps }) => {
-    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { position: "absolute", pointerEvents: "box-none", top: insets.top, left: 0, right: 0, zIndex: constants_1.ZINDEX.floatingHeader, px: 1, py: 1, flexDirection: "row", alignItems: "center", ...flexProps, children: [(0, jsx_runtime_1.jsx)(BackButton_1.BackButtonWithBackground, { onPress: onBack }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1 }), rightElements && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 }), rightElements] }))] }));
-};
-exports.FloatingHeader = FloatingHeader;

package/dist/elements/Screen/FullWidthDivider.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { FlexProps } from "../Flex";
-export declare const FullWidthDivider: React.FC<FlexProps>;

package/dist/elements/Screen/FullWidthDivider.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FullWidthDivider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Screen_1 = require("../Screen");
-const Separator_1 = require("../Separator");
-const FullWidthDivider = (flexProps) => {
-    return ((0, jsx_runtime_1.jsx)(Screen_1.Screen.FullWidthItem, { children: (0, jsx_runtime_1.jsx)(Separator_1.Separator, { my: 2, ...flexProps }) }));
-};
-exports.FullWidthDivider = FullWidthDivider;

package/dist/elements/Screen/FullWidthItem.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { FlexProps } from "../Flex";
-export declare const FullWidthItem: React.FC<FlexProps>;

package/dist/elements/Screen/FullWidthItem.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FullWidthItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const constants_1 = require("./constants");
-const Flex_1 = require("../Flex");
-const FullWidthItem = (props) => {
-    return (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...props, mx: -constants_1.SCREEN_HORIZONTAL_PADDING });
-};
-exports.FullWidthItem = FullWidthItem;

package/dist/elements/Screen/Header.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-import { FlexProps } from "../Flex";
-export interface HeaderProps {
-    animated?: boolean;
-    hideLeftElements?: boolean;
-    hideRightElements?: boolean;
-    hideTitle?: boolean;
-    leftElements?: React.ReactNode;
-    onBack?: () => void;
-    rightElements?: React.ReactNode;
-    scrollY?: number;
-    scrollYOffset?: number;
-    title?: string | JSX.Element;
-    titleProps?: FlexProps;
-    titleShown?: boolean;
-}
-export declare const AnimatedHeader: React.FC<HeaderProps>;
-export declare const Header: React.FC<HeaderProps>;

package/dist/elements/Screen/Header.js

@@ -1,69 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = exports.AnimatedHeader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const moti_1 = require("moti");
-const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const ScreenScrollContext_1 = require("./ScreenScrollContext");
-const constants_1 = require("./constants");
-const constants_2 = require("../../constants");
-const ArrowLeftIcon_1 = require("../../svgs/ArrowLeftIcon");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-const Touchable_1 = require("../Touchable");
-const AnimatedHeader = (props) => {
-    return (0, jsx_runtime_1.jsx)(exports.Header, { animated: true, ...props });
-};
-exports.AnimatedHeader = AnimatedHeader;
-const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, title, titleProps = {}, }) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: constants_1.NAVBAR_HEIGHT, flexDirection: "row", px: 2, zIndex: constants_1.ZINDEX.header, backgroundColor: "background", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, children: (0, jsx_runtime_1.jsx)(Left, { leftElements: leftElements, onBack: onBack, hideLeftElements: hideLeftElements }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...titleProps, children: (0, jsx_runtime_1.jsx)(Center, { animated: animated, title: title, hideTitle: hideTitle }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, alignItems: "flex-end", children: (0, jsx_runtime_1.jsx)(Right, { rightElements: rightElements, hideRightElements: hideRightElements }) })] }));
-};
-exports.Header = Header;
-const Right = ({ hideRightElements, rightElements }) => {
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !hideRightElements && rightElements });
-};
-const Center = ({ animated, hideTitle, title }) => {
-    const { scrollYOffset = 0, currentScrollY = 0 } = (0, ScreenScrollContext_1.useScreenScrollContext)();
-    if (hideTitle) {
-        return null;
-    }
-    const titleTextElement = ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm-display", numberOfLines: 1, children: title }));
-    if (!animated) {
-        return titleTextElement;
-    }
-    // Show / hide the title to avoid rerenders, which retrigger the animation
-    const display = currentScrollY < constants_1.NAVBAR_HEIGHT + scrollYOffset ? "none" : "flex";
-    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { entering: react_native_reanimated_1.FadeIn.duration(400).easing(react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp)), exiting: react_native_reanimated_1.FadeOut.duration(400).easing(react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp)), style: {
-            display,
-        }, children: (0, jsx_runtime_1.jsx)(moti_1.MotiView, { animate: {
-                opacity: display === "flex" ? 1 : 0,
-            }, children: titleTextElement }) }));
-};
-const Left = ({ hideLeftElements, leftElements, onBack }) => {
-    if (hideLeftElements)
-        return null;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: leftElements || ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { onPress: onBack, underlayColor: "transparent", hitSlop: constants_2.DEFAULT_HIT_SLOP, children: (0, jsx_runtime_1.jsx)(ArrowLeftIcon_1.ArrowLeftIcon, { fill: "onBackgroundHigh" }) })) }));
-};

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

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

package/dist/elements/Screen/Screen.stories.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@storybook/react-native");
-const Flex_1 = require("../Flex");
-const Screen_1 = require("../Screen");
-const Text_1 = require("../Text");
-(0, react_native_1.storiesOf)("Screen", module)
-    .add("With Header and BottomView", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.Header, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })))
-    .add("With Header and Right Element", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.Header, { title: "Title", rightElements: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "Very long right element" }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) })] })))
-    .add("With Header, Without Left Element and Right Element", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.Header, { title: "Title", hideLeftElements: true, rightElements: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "Very long right element" }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) })] })))
-    .add("With Right Element & Custom Left Element", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.Header, { title: "Title", leftElements: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "Very long left element" }), rightElements: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "right element" }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })))
-    .add("ScrollView With AnimatedHeader", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { children: (0, jsx_runtime_1.jsxs)(Screen_1.Screen.ScrollView, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", children: "Title" }), Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)))] }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })))
-    .add("ScrollView With AnimatedHeader and Right Element", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title", rightElements: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Right" }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { children: (0, jsx_runtime_1.jsxs)(Screen_1.Screen.ScrollView, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", children: "Title" }), Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)))] }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })))
-    .add("FlatList With AnimatedHeader", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { children: (0, jsx_runtime_1.jsx)(Screen_1.Screen.FlatList, { ListHeaderComponent: () => (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", children: "Title" }), data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
-                    return ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: item }, index));
-                } }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })))
-    .add("FlatList With AnimatedHeader and StickySubHeader", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.StickySubHeader, { title: "Title", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: "100%", height: 60, backgroundColor: "red10" }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { children: (0, jsx_runtime_1.jsx)(Screen_1.Screen.FlatList, { data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
-                    return ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: item }, index));
-                } }) })] })))
-    .add("Fullwidth", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.Header, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { fullwidth: true, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }) })] })));

package/dist/elements/Screen/ScreenBase.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { FlexProps } from "../Flex";
-export interface ScreenBaseProps extends FlexProps {
-    children: React.ReactNode;
-    safeArea?: boolean;
-}
-export declare const ScreenBase: React.FC<ScreenBaseProps>;

package/dist/elements/Screen/ScreenBase.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScreenBase = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_safe_area_context_1 = require("react-native-safe-area-context");
-const ScreenScrollContext_1 = require("./ScreenScrollContext");
-const Flex_1 = require("../Flex");
-const ScreenBase = ({ children, safeArea = true, ...flexProps }) => {
-    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    return ((0, jsx_runtime_1.jsx)(ScreenScrollContext_1.ScreenScrollContextProvider, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "background", mt: safeArea ? insets.top : 0, ...flexProps, children: [children, (0, jsx_runtime_1.jsx)(SafeAreaCover, { safeArea: true })] }) }));
-};
-exports.ScreenBase = ScreenBase;
-const SafeAreaCover = ({ safeArea }) => {
-    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", left: 0, right: 0, top: safeArea ? -insets.top : 0, height: insets.top, backgroundColor: "background" }));
-};

package/dist/elements/Screen/ScreenFlatList.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { FlatList, FlatListProps } from "react-native";
-export type ScreenFlatListProps<T> = FlatListProps<T> & {
-    innerRef?: React.ForwardedRef<FlatList<T>>;
-};
-export declare function ScreenFlatList<T>(props: ScreenFlatListProps<T>): JSX.Element;

package/dist/elements/Screen/ScreenFlatList.js

@@ -1,22 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScreenFlatList = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const lodash_1 = require("lodash");
-const react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
-const useListenForScreenScroll_1 = require("./hooks/useListenForScreenScroll");
-function ScreenFlatList(props) {
-    const { scrollHandler } = (0, useListenForScreenScroll_1.useListenForScreenScroll)();
-    let handleScroll;
-    if (props.onScroll) {
-        handleScroll = (0, lodash_1.flowRight)(scrollHandler, props.onScroll);
-    }
-    else {
-        handleScroll = scrollHandler;
-    }
-    return (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.FlatList, { ref: props.innerRef, ...props, onScroll: handleScroll });
-}
-exports.ScreenFlatList = ScreenFlatList;

package/dist/elements/Screen/ScreenScrollContext.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export interface ScreenScrollContextProps {
-    currentScrollY: number;
-    updateCurrentScrollY: (scrollY: number) => void;
-    scrollYOffset?: number;
-    updateScrollYOffset: (offset: number) => void;
-}
-export declare const ScreenScrollContextProvider: React.FC<React.PropsWithChildren<{}>>;
-export declare const useScreenScrollContext: () => ScreenScrollContextProps;

package/dist/elements/Screen/ScreenScrollContext.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useScreenScrollContext = exports.ScreenScrollContextProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ScreenScrollContext = (0, react_1.createContext)({
-    currentScrollY: 0,
-    updateCurrentScrollY: () => { },
-    scrollYOffset: undefined,
-    updateScrollYOffset: () => { },
-});
-const ScreenScrollContextProvider = ({ children, }) => {
-    const [currentScrollY, setCurrentScrollY] = (0, react_1.useState)(0);
-    const [scrollYOffset, setScrollYOffset] = (0, react_1.useState)(undefined);
-    const providerValue = {
-        currentScrollY,
-        scrollYOffset,
-        updateCurrentScrollY: (scrollY) => {
-            setCurrentScrollY(scrollY);
-        },
-        updateScrollYOffset: (yOffset) => {
-            setScrollYOffset(yOffset);
-        },
-    };
-    return ((0, jsx_runtime_1.jsx)(ScreenScrollContext.Provider, { value: providerValue, children: children }));
-};
-exports.ScreenScrollContextProvider = ScreenScrollContextProvider;
-const useScreenScrollContext = () => {
-    const context = (0, react_1.useContext)(ScreenScrollContext);
-    if (!context) {
-        throw new Error("useScreenScrollContext must be used within a Screen.ScreenScrollContextProvider component");
-    }
-    return context;
-};
-exports.useScreenScrollContext = useScreenScrollContext;

package/dist/elements/Screen/ScreenScrollView.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-import { ScrollViewProps } from "react-native";
-export declare const ScreenScrollView: React.FC<ScrollViewProps>;