@artsy/palette-mobile 13.2.34 → 13.2.35

package/dist/elements/Checkbox/Checkbox.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { themeGet } from "@styled-system/theme-get";
+import { useState } from "react";
+import { PixelRatio, StyleSheet, TouchableWithoutFeedback, } from "react-native";
+import styled from "styled-components/native";
+import { CssTransition } from "../../animation/CssTransition";
+import { useTheme } from "../../utils/hooks/useTheme";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+const CHECKBOX_SIZE = 20;
+const DURATION = 250;
+export const Checkbox = ({ checked: checkedProp, disabled, error, onPress, text, subtitle, children, checkboxAccessibilityProps, ...restProps }) => {
+    const { color, space } = useTheme();
+    const fontScale = PixelRatio.getFontScale();
+    const checkboxSize = CHECKBOX_SIZE * fontScale;
+    const [checked, setChecked] = useState(checkedProp);
+    const isChecked = checkedProp ?? checked;
+    const defaultCheckboxStyle = {
+        backgroundColor: color("white100"),
+        borderColor: color("black60"),
+    };
+    const checkedCheckboxStyle = {
+        backgroundColor: color("black100"),
+        borderColor: color("black100"),
+    };
+    const disabledCheckboxStyle = {
+        backgroundColor: color("black5"),
+        borderColor: color("black10"),
+    };
+    const checkboxStyles = {
+        default: {
+            unchecked: defaultCheckboxStyle,
+            checked: checkedCheckboxStyle,
+        },
+        error: {
+            unchecked: { backgroundColor: color("white100"), borderColor: color("red100") },
+            checked: checkedCheckboxStyle,
+        },
+    };
+    const checkboxStyle = disabled
+        ? disabledCheckboxStyle
+        : checkboxStyles[error ? "error" : "default"][isChecked ? "checked" : "unchecked"];
+    const textColor = error ? color("red100") : disabled ? color("black30") : color("black100");
+    const subtitleColor = error ? color("red100") : disabled ? color("black30") : color("black60");
+    return (_jsx(TouchableWithoutFeedback, { onPress: (event) => {
+            if (disabled) {
+                return;
+            }
+            setChecked(!checked);
+            onPress?.(event);
+        }, children: _jsxs(Flex, { flex: 1, ...restProps, children: [_jsxs(Flex, { flexDirection: "row", children: [_jsx(Flex, { mt: "2px", ...checkboxAccessibilityProps, children: _jsx(CssTransition, { style: [
+                                    styles(fontScale).container,
+                                    text || subtitle || children ? { marginRight: space(1) * fontScale } : {},
+                                    checkboxStyle,
+                                ], animate: ["backgroundColor", "borderColor"], duration: DURATION, children: !!isChecked &&
+                                    (!!disabled ? (_jsx(DisabledMark, { size: checkboxSize })) : (_jsx(CheckMark, { size: checkboxSize }))) }) }), _jsxs(Flex, { justifyContent: "center", flex: 1, children: [!!text && (_jsx(Text, { variant: "sm-display", color: textColor, children: text })), children] })] }), !!subtitle && (_jsx(Flex, { ml: `${(CHECKBOX_SIZE + space(1)) * fontScale}px`, mt: "6px", children: _jsx(Text, { variant: "xs", color: subtitleColor, children: subtitle }) }))] }) }));
+};
+// styled-component does not have support for Animated.View
+const styles = (fontScale) => StyleSheet.create({
+    container: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        borderWidth: 1,
+        borderStyle: "solid",
+        width: CHECKBOX_SIZE * fontScale,
+        height: CHECKBOX_SIZE * fontScale,
+    },
+});
+// This component represents the √ mark in CSS. We are not using styled-system since it's easier to specify raw CSS
+// properties with styled-component.
+export const CheckMark = ({ size }) => (_jsx(Box, { style: { transform: [{ rotate: "-45deg" }] }, top: "-12%", width: size * 0.625, height: size * 0.3125, borderBottomWidth: "2px", borderBottomColor: "white100", borderLeftWidth: "2px", borderLeftColor: "white100" }));
+export const DisabledMark = styled(CheckMark) `
+  border-bottom-color: ${themeGet("colors.black30")};
+  border-left-color: ${themeGet("colors.black30")};
+`;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./Checkbox").CheckboxProps>;
+};
+export default _default;
+export declare function Variants(): JSX.Element;

package/dist/elements/Checkbox/Checkbox.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from "./Checkbox";
+import { List, Row } from "../../storybook/helpers";
+export default {
+    title: "Checkbox",
+    component: Checkbox,
+};
+export function Variants() {
+    return (_jsxs(List, { style: { marginLeft: 20 }, children: [_jsx(Row, { children: _jsx(Checkbox, { text: "Default" }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Checked", checked: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Disabled", disabled: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Checked and disabled", checked: true, disabled: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Error", error: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: `Default with multiline
+text` }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Disabled", subtitle: "With subtitle", disabled: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: `Error with multiline
+text`, subtitle: "With subtitle", error: true }) })] }));
+}

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

@@ -0,0 +1,2 @@
+export * from "./Check";
+export * from "./Checkbox";

package/dist/elements/Checkbox/index.js

@@ -0,0 +1,2 @@
+export * from "./Check";
+export * from "./Checkbox";

package/dist/elements/ClassTheme/ClassTheme.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { useTheme } from "../../";
+export declare const ClassTheme: ({ theme, children, }: {
+    theme?: "v3" | undefined;
+    children: import("react").ReactNode | ((helpers: ReturnType<typeof useTheme>) => React.ReactNode);
+}) => JSX.Element;

package/dist/elements/ClassTheme/ClassTheme.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme, Theme } from "../../";
+export const ClassTheme = ({ theme = "v3", children, }) => {
+    const currentTheme = useTheme();
+    return (_jsx(Theme, { theme: theme, children: typeof children === "function" ? children(currentTheme) : children }));
+};

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

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

package/dist/elements/ClassTheme/index.js

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

package/dist/elements/Collapse/Collapse.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface CollapseProps {
+    opened: boolean;
+    children: ReactNode;
+}
+export declare const Collapse: React.FC<CollapseProps>;

package/dist/elements/Collapse/Collapse.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from "react-native";
+export const Collapse = ({ opened, children }) => {
+    if (!opened) {
+        return null;
+    }
+    return _jsx(View, { children: children });
+};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./Collapse").CollapseProps>;
+};
+export default _default;
+export declare const Something: () => JSX.Element;

package/dist/elements/Collapse/Collapse.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Collapse } from "./Collapse";
+import { LinkText, Text } from "../Text";
+export default {
+    title: "Collapse",
+    component: Collapse,
+};
+export const Something = () => {
+    const [opened, setOpened] = useState(true);
+    return (_jsxs(_Fragment, { children: [_jsx(LinkText, { onPress: () => setOpened((v) => !v), children: "toggle" }), _jsx(Collapse, { opened: opened, children: _jsx(Text, { children: "inside" }) })] }));
+};

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

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

package/dist/elements/Collapse/index.js

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

package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+interface CollapsableMenuItemProps {
+    overtitle?: string;
+    title: string;
+    isExpanded?: boolean;
+    disabled?: boolean;
+    onExpand?: () => void;
+    onCollapse?: () => void;
+}
+export interface CollapsibleMenuItem {
+    isExpanded: () => boolean;
+    collapse: (onAnimationEnd?: () => void) => void;
+    expand: (onAnimationEnd?: () => void) => void;
+    completed: () => void;
+    offsetTop: () => Promise<number>;
+}
+export declare const CollapsibleMenuItem: import("react").ForwardRefExoticComponent<CollapsableMenuItemProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<CollapsibleMenuItem>>;
+export {};

package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { LayoutAnimation } from "react-native";
+import { CheckCircleIcon, ChevronIcon } from "../../svgs";
+import { Collapse } from "../Collapse";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+import { Touchable } from "../Touchable";
+export const CollapsibleMenuItem = forwardRef(({ children, overtitle, title, isExpanded = false, disabled = false, onExpand, onCollapse }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isCompleted, setIsCompleted] = useState(false);
+    const componentRef = useRef(null);
+    useEffect(() => {
+        setIsOpen(isExpanded);
+    }, []);
+    useImperativeHandle(ref, () => ({
+        collapse(onAnimationEnd) {
+            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut, onAnimationEnd);
+            setIsOpen(false);
+        },
+        expand(onAnimationEnd) {
+            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut, onAnimationEnd);
+            setIsOpen(true);
+        },
+        completed() {
+            setIsCompleted(true);
+        },
+        isExpanded() {
+            return isOpen;
+        },
+        offsetTop: () => {
+            return new Promise((resolve) => {
+                componentRef.current?.measureInWindow((_, h) => {
+                    resolve(h);
+                });
+            });
+        },
+    }), [isOpen]);
+    return (_jsxs(Flex, { ref: componentRef, collapsable: false, children: [_jsxs(Touchable, { onPress: () => {
+                    setIsOpen(!isOpen);
+                    isOpen ? onCollapse?.() : onExpand?.();
+                }, disabled: disabled, children: [!!overtitle && (_jsx(Text, { variant: "sm", color: disabled ? "black30" : "black100", children: overtitle })), _jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Text, { variant: "lg", color: disabled ? "black30" : "black100", style: { maxWidth: "90%" }, children: title }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [!!isCompleted && (_jsx(CheckCircleIcon, { fill: "green100", height: 24, width: 24, style: { marginRight: 5 } })), _jsx(ChevronIcon, { direction: isOpen ? "up" : "down", fill: disabled ? "black30" : "black60" })] })] })] }), _jsx(Collapse, { opened: isOpen, children: children })] }));
+});

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const ArtworkDetails: ({ handlePress }: {
+    handlePress: () => void;
+}) => JSX.Element;
+export declare const UploadPhotos: ({ handlePress }: {
+    handlePress: () => void;
+}) => JSX.Element;
+export declare const ContactInformation: ({ handlePress }: {
+    handlePress: () => void;
+}) => JSX.Element;
+export declare const DisplayContent: () => JSX.Element;
+export declare const ComponentWithCollapsibleMenu: () => JSX.Element;

package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.stories.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { useRef, useState } from "react";
+import { ScrollView, View } from "react-native";
+import { CollapsibleMenuItem } from "./CollapsibleMenuItem";
+import { Button } from "../Button";
+import { Flex } from "../Flex";
+import { Join } from "../Join";
+import { Separator } from "../Separator";
+import { Spacer } from "../Spacer";
+import { Text } from "../Text";
+export const ArtworkDetails = ({ handlePress }) => {
+    return (_jsxs(Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [_jsx(Text, { children: "ArtworkDetails content" }), _jsx(Spacer, { y: 1 }), _jsx(CTAButton, { text: "Save & Continue", onPress: handlePress })] }));
+};
+export const UploadPhotos = ({ handlePress }) => {
+    return (_jsxs(Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [_jsx(Text, { children: "Upload Photos content" }), _jsx(Spacer, { y: 1 }), _jsx(CTAButton, { text: "Save & Continue", onPress: handlePress })] }));
+};
+export const ContactInformation = ({ handlePress }) => {
+    return (_jsxs(Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [_jsx(Text, { children: "ContactInformation content" }), _jsx(Spacer, { y: 1 }), _jsx(CTAButton, { text: "Submit Artwork", onPress: handlePress })] }));
+};
+const CTAButton = ({ onPress, text }) => (_jsx(Button, { block: true, haptic: true, maxWidth: 540, onPress: onPress, children: text }));
+export const DisplayContent = () => {
+    return (_jsx(View, { style: { backgroundColor: `rgba(255,145,125,.3)`, padding: 20, marginTop: 20 }, children: _jsx(Text, { children: "This is the collapsible menu content" }) }));
+};
+export const ComponentWithCollapsibleMenu = () => {
+    const items = [
+        {
+            overtitle: "Optional overtitle",
+            title: "Artwork Details",
+            Content: (_jsx(ArtworkDetails, { handlePress: () => {
+                    expandCollapsibleMenuContent(1);
+                    enableStep(1);
+                } })),
+        },
+        {
+            overtitle: "Optional overtitle",
+            title: "Upload Photos",
+            Content: (_jsx(UploadPhotos, { handlePress: () => {
+                    expandCollapsibleMenuContent(2);
+                    enableStep(2);
+                } })),
+        },
+        {
+            overtitle: "Optional overtitle",
+            title: "Contact Information",
+            Content: (_jsx(ContactInformation, { handlePress: () => {
+                    // navigation.navigate("ArtworkSubmittedScreen")
+                    // do nothing
+                } })),
+        },
+    ];
+    const TOTAL_STEPS = items.length;
+    const [validSteps, setValidSteps] = useState([true, ...new Array(TOTAL_STEPS - 1).fill(false)]);
+    const stepsRefs = useRef(new Array(TOTAL_STEPS).fill(null)).current;
+    const enableStep = (stepIndex) => {
+        const newValidSteps = [...validSteps];
+        newValidSteps[stepIndex] = true;
+        setValidSteps(newValidSteps);
+    };
+    const expandCollapsibleMenuContent = (indexToExpand) => {
+        items.forEach((_, index) => {
+            if (indexToExpand !== index) {
+                stepsRefs[index].collapse();
+            }
+            else {
+                if (index > 0) {
+                    stepsRefs[index - 1].completed();
+                }
+                stepsRefs[index].expand();
+            }
+        });
+    };
+    return (_jsx(View, { style: { margin: 20 }, children: _jsx(Flex, { children: _jsxs(ScrollView, { contentContainerStyle: {
+                    paddingVertical: 20,
+                    paddingHorizontal: 20,
+                    justifyContent: "center",
+                }, children: [_jsx(Spacer, { y: 4 }), _jsx(Join, { separator: _jsx(Separator, { my: 2, marginTop: "40", marginBottom: "20" }), children: items.map(({ overtitle, title, Content }, index) => {
+                            const disabled = !validSteps[index];
+                            return (_jsx(CollapsibleMenuItem, { overtitle: overtitle, title: title, onExpand: () => expandCollapsibleMenuContent(index), isExpanded: index === 0, disabled: disabled, ref: (ref) => {
+                                    if (ref) {
+                                        stepsRefs[index] = ref;
+                                    }
+                                }, children: Content }, index));
+                        }) })] }) }) }));
+};
+storiesOf("Collapsible Menu ", module).add("Collapse Collapse Items", () => (_jsx(_Fragment, { children: _jsx(ComponentWithCollapsibleMenu, {}) })));

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

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

package/dist/elements/CollapsibleMenuItem/index.js

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

package/dist/elements/Dialog/Dialog.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+interface DialogAction {
+    text: string;
+    onPress: () => void;
+}
+export interface DialogProps {
+    isVisible: boolean;
+    title: string;
+    detail?: string;
+    primaryCta: DialogAction;
+    secondaryCta?: DialogAction;
+    onBackgroundPress?: () => void;
+}
+export declare const Dialog: (props: DialogProps) => JSX.Element;
+export {};

package/dist/elements/Dialog/Dialog.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Animated, Modal, ScrollView, StyleSheet, TouchableWithoutFeedback } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useTheme } from "../../utils/hooks/useTheme";
+import { Button } from "../Button";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+export const Dialog = (props) => {
+    const { isVisible, title, detail, primaryCta, secondaryCta, onBackgroundPress, ...other } = props;
+    const [visible, setVisible] = useState(isVisible);
+    const { space, color } = useTheme();
+    const value = useRef(new Animated.Value(Number(isVisible))).current;
+    const fadeIn = () => {
+        return new Promise((resolve) => {
+            Animated.timing(value, {
+                toValue: 1,
+                useNativeDriver: true,
+                duration: 180,
+            }).start(resolve);
+        });
+    };
+    const fadeOut = () => {
+        return new Promise((resolve) => {
+            Animated.timing(value, {
+                toValue: 0,
+                useNativeDriver: true,
+                duration: 150,
+            }).start(resolve);
+        });
+    };
+    useEffect(() => {
+        if (isVisible) {
+            setVisible(true);
+            fadeIn();
+        }
+        else {
+            fadeOut().then(() => {
+                setVisible(false);
+            });
+        }
+    }, [isVisible]);
+    const backdrop = (_jsx(Animated.View, { style: [
+            StyleSheet.absoluteFillObject,
+            { opacity: value, backgroundColor: "rgba(194,194,194,0.5)" },
+        ] }));
+    return (_jsxs(Modal, { ...other, visible: visible, statusBarTranslucent: true, transparent: true, animationType: "none", children: [!!onBackgroundPress ? (_jsx(TouchableWithoutFeedback, { testID: "dialog-backdrop", onPress: onBackgroundPress, children: backdrop })) : (backdrop), _jsx(SafeAreaView, { pointerEvents: "box-none", style: {
+                    flex: 1,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    padding: space(2),
+                    backgroundColor: "transparent",
+                }, children: _jsxs(Animated.View, { style: {
+                        width: "100%",
+                        maxHeight: "100%",
+                        opacity: value,
+                        backgroundColor: color("white100"),
+                        borderWidth: 1,
+                        borderColor: color("black5"),
+                        shadowColor: "rgba(0, 0, 0, 0.06)",
+                        shadowOffset: {
+                            height: 2,
+                            width: 0,
+                        },
+                        shadowOpacity: 1,
+                        shadowRadius: 10,
+                    }, children: [_jsx(Text, { testID: "dialog-title", variant: "sm-display", mb: 0.5, mt: 2, mx: 2, children: title }), !!detail && (_jsx(ScrollView, { alwaysBounceVertical: false, contentContainerStyle: { paddingHorizontal: space(2) }, children: _jsx(Text, { testID: "dialog-detail", variant: "sm", color: "black60", children: detail }) })), _jsxs(Flex, { mt: 2, mb: 2, mx: 2, flexDirection: "row", justifyContent: "flex-end", children: [!!secondaryCta && (_jsx(Button, { size: "small", testID: "dialog-secondary-action-button", variant: "text", onPress: secondaryCta.onPress, children: secondaryCta.text })), _jsx(Button, { size: "small", variant: "fillDark", testID: "dialog-primary-action-button", ml: 2, onPress: primaryCta.onPress, children: primaryCta.text })] })] }) })] }));
+};

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

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

package/dist/elements/Dialog/Dialog.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { useState } from "react";
+import { Dialog } from ".";
+import { List } from "../../storybook/helpers";
+import { Button } from "../Button";
+const DialogDemo = (props) => {
+    const [visible, setVisible] = useState(false);
+    return (_jsxs(List, { children: [_jsx(Button, { onPress: () => setVisible(true), children: "Show" }), _jsx(Dialog, { isVisible: visible, title: "Dialog Title", primaryCta: {
+                    text: "OK",
+                    onPress: () => setVisible(false),
+                }, ...props })] }));
+};
+storiesOf("Dialog", module)
+    .add("Default", () => _jsx(DialogDemo, {}))
+    .add("With secondary action", () => (_jsx(DialogDemo, { secondaryCta: {
+        text: "Cancel",
+        onPress: () => { },
+    } })))
+    .add("With details", () => (_jsx(DialogDemo, { detail: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." })))
+    .add("With long details", () => (_jsx(DialogDemo, { detail: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.".repeat(100) })))
+    .add("With background press handler", () => _jsx(DialogDemo, { onBackgroundPress: () => { } }));

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

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

package/dist/elements/Dialog/Dialog.tests.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent } from "@testing-library/react-native";
+import { Dialog } from "./Dialog";
+import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
+describe("Dialog", () => {
+    it("renders without error", () => {
+        const { getByText } = renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
+                text: "Primary Action Button",
+                onPress: jest.fn(),
+            } }));
+        expect(getByText("title")).toBeTruthy();
+    });
+    it("should render details if it is passed", () => {
+        const { getByText } = renderWithWrappers(_jsx(Dialog, { title: "title", detail: "Some unique detail", isVisible: true, primaryCta: {
+                text: "Primary Action Button",
+                onPress: jest.fn(),
+            } }));
+        expect(getByText("Some unique detail")).toBeTruthy();
+    });
+    it("should render the primary action button", () => {
+        const primaryActionMock = jest.fn();
+        const { getByTestId, getByText } = renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
+                text: "Primary Action Button",
+                onPress: primaryActionMock,
+            } }));
+        const primaryButton = getByTestId("dialog-primary-action-button");
+        fireEvent.press(primaryButton);
+        expect(primaryActionMock).toHaveBeenCalled();
+        expect(getByText("Primary Action Button")).toBeTruthy();
+    });
+    it("should render the secondary action button if it is passed", () => {
+        const secondaryActionMock = jest.fn();
+        const { getByTestId, getByText } = renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
+                text: "Primary Action Button",
+                onPress: jest.fn(),
+            }, secondaryCta: {
+                text: "Secondary Action Button",
+                onPress: secondaryActionMock,
+            } }));
+        const secondaryButton = getByTestId("dialog-secondary-action-button");
+        fireEvent.press(secondaryButton);
+        expect(secondaryActionMock).toHaveBeenCalled();
+        expect(getByText("Secondary Action Button")).toBeTruthy();
+    });
+    it("should call onBackgroundPress when backdrop is pressed", () => {
+        const onBackgroundPressMock = jest.fn();
+        const { getByTestId } = renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, onBackgroundPress: onBackgroundPressMock, primaryCta: {
+                text: "Primary Action Button",
+                onPress: jest.fn(),
+            } }));
+        fireEvent.press(getByTestId("dialog-backdrop"));
+        expect(onBackgroundPressMock).toHaveBeenCalled();
+    });
+});

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

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

package/dist/elements/Dialog/index.js

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

package/dist/elements/EntityHeader/EntityHeader.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { AvatarSize } from "../Avatar";
+import { FlexProps } from "../Flex";
+export interface EntityHeaderProps extends FlexProps {
+    avatarSize?: AvatarSize;
+    /**
+     * @deprecated Use `RightButton` instead
+     */
+    FollowButton?: JSX.Element;
+    RightButton?: JSX.Element;
+    imageUrl?: string;
+    initials?: string;
+    meta?: string | JSX.Element;
+    name: string;
+    smallVariant?: boolean;
+    displayPrivateIcon?: boolean;
+    theme?: "dark" | "light";
+}
+export declare const EntityHeader: ({ avatarSize, FollowButton, RightButton, imageUrl, initials, meta, name, smallVariant, displayPrivateIcon, theme, ...restProps }: EntityHeaderProps) => JSX.Element;

package/dist/elements/EntityHeader/EntityHeader.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement, useMemo } from "react";
+import { LockIcon } from "../../svgs";
+import { bullet } from "../../utils/text";
+import { Avatar } from "../Avatar";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+export const EntityHeader = ({ avatarSize = "xs", FollowButton, RightButton, imageUrl, initials, meta, name, smallVariant = false, displayPrivateIcon, theme = "light", ...restProps }) => {
+    const rightButton = (RightButton || FollowButton) && (_jsx(Flex, { ml: smallVariant ? 0.5 : 1, flexDirection: "row", alignItems: "center", justifyContent: "flex-end", children: RightButton || FollowButton }));
+    const headerName = (_jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [_jsx(Text, { color: theme === "light" ? "black100" : "white100", ellipsizeMode: "tail", numberOfLines: 1, variant: "sm", lineHeight: "18px", style: { flexShrink: 1 }, children: name }), displayPrivateIcon && (_jsx(LockIcon, { ml: "2px", width: 16, height: 16, testID: "lock-icon", fill: theme === "light" ? "black100" : "white100" }))] }));
+    const headerMeta = useMemo(() => {
+        if (meta) {
+            if (isValidElement(meta)) {
+                return meta;
+            }
+            return (_jsx(Text, { ellipsizeMode: "tail", numberOfLines: 1, variant: "xs", color: theme === "light" ? "black60" : "white100", style: { flexShrink: 1 }, children: meta }));
+        }
+        return null;
+    }, [meta, theme]);
+    return (_jsxs(Flex, { flexDirection: "row", flexWrap: "nowrap", ...restProps, children: [!!(imageUrl || initials) && (_jsx(Flex, { mr: 1, justifyContent: "center", children: _jsx(Avatar, { size: avatarSize, src: imageUrl, initials: initials, color: theme === "light" ? "black100" : "white100" }) })), smallVariant ? (_jsxs(Flex, { flexDirection: "row", justifyContent: "flex-start", flexGrow: 1, alignItems: "center", children: [headerName, _jsx(Text, { variant: "sm", ml: "0.5", color: theme === "light" ? "black100" : "white100", children: bullet }), rightButton] })) : (_jsxs(Flex, { justifyContent: "space-between", width: 0, flexGrow: 1, flexDirection: "row", children: [_jsxs(Flex, { alignSelf: "center", flexShrink: 1, children: [headerName, headerMeta] }), rightButton] }))] }));
+};

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: ({ avatarSize, FollowButton, RightButton, imageUrl, initials, meta, name, smallVariant, displayPrivateIcon, theme, ...restProps }: import("./EntityHeader").EntityHeaderProps) => JSX.Element;
+};
+export default _default;
+export declare const Initials: () => JSX.Element;
+export declare const Image: () => JSX.Element;
+export declare const VariantSmall: () => JSX.Element;
+export declare const WithRightButton: () => JSX.Element;
+export declare const WithPrivateIcon: () => JSX.Element;

package/dist/elements/EntityHeader/EntityHeader.stories.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EntityHeader } from "./EntityHeader";
+import { Box } from "../Box";
+import { Button } from "../Button";
+import { Text } from "../Text";
+export default {
+    title: "EntityHeader",
+    component: EntityHeader,
+};
+const avatarSizes = ["xxs", "xs", "sm", "md"];
+export const Initials = () => {
+    return (_jsxs(Box, { children: [_jsx(Text, { variant: "md", children: "Avatar Sizes" }), _jsx(Box, { mx: 2, children: avatarSizes.map((size) => (_jsxs(Box, { mb: 1, children: [_jsx(Text, { children: size }), _jsx(EntityHeader, { name: "Artist Name", initials: "AN", meta: "Meta stuff", avatarSize: size })] }))) })] }));
+};
+export const Image = () => {
+    return (_jsxs(Box, { children: [_jsx(Text, { variant: "md", children: "Avatar Sizes" }), _jsx(Box, { mx: 2, children: avatarSizes.map((size) => (_jsxs(Box, { mb: 1, children: [_jsx(Text, { children: size }), _jsx(EntityHeader, { imageUrl: "https://picsum.photos/200/200", name: "Artist Name", initials: "AN", meta: "Meta stuff", avatarSize: size })] }))) })] }));
+};
+export const VariantSmall = () => {
+    return (_jsxs(Box, { children: [_jsx(Text, { variant: "md", children: "Avatar Sizes" }), _jsx(Box, { mx: 2, children: avatarSizes.map((size) => (_jsxs(Box, { mb: 1, children: [_jsx(Text, { children: size }), _jsx(EntityHeader, { imageUrl: "https://picsum.photos/200/200", name: "Artist Name", initials: "AN", meta: "Meta stuff", avatarSize: size, smallVariant: true })] }))) })] }));
+};
+export const WithRightButton = () => {
+    return (_jsxs(Box, { children: [_jsx(Text, { variant: "md", children: "Avatar Sizes" }), _jsx(Box, { mx: 2, children: avatarSizes.map((size) => (_jsxs(Box, { mb: 1, children: [_jsx(Text, { children: size }), _jsx(EntityHeader, { imageUrl: "https://picsum.photos/200/200", name: "Artist Name", initials: "AN", meta: "Meta stuff", avatarSize: size, RightButton: _jsx(Button, { size: "small", children: "Right Button" }) })] }))) })] }));
+};
+export const WithPrivateIcon = () => {
+    return (_jsxs(Box, { children: [_jsx(Text, { variant: "md", children: "Avatar Sizes" }), _jsx(Box, { mx: 2, children: avatarSizes.map((size) => (_jsxs(Box, { mb: 1, children: [_jsx(Text, { children: size }), _jsx(EntityHeader, { imageUrl: "https://picsum.photos/200/200", name: "Artist Name", initials: "AN", meta: "Meta stuff", avatarSize: size, displayPrivateIcon: true })] }))) })] }));
+};

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

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

package/dist/elements/EntityHeader/index.js

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

package/dist/elements/Flex/Flex.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { View } from "react-native";
+import { BoxProps } from "../Box";
+export type FlexProps = BoxProps;
+export declare const Flex: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<View>>;