@artsy/palette-mobile 13.2.34 → 13.2.36

package/dist/Theme.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ThemeType, ThemeWithDarkModeType, THEMES } from "./tokens";
+type ThemeOptions = keyof typeof THEMES;
+interface ThemeProps {
+    children?: React.ReactNode;
+    theme?: ThemeOptions;
+}
+export declare const Theme: React.FC<ThemeProps>;
+/**
+ * Only use this if it's are absolutely neccessary, and only in tests.
+ */
+export declare const _test_THEMES: {
+    v3: ThemeType;
+    v3light: ThemeWithDarkModeType;
+    v3dark: ThemeWithDarkModeType;
+};
+export {};

package/dist/Theme.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider } from "styled-components/native";
+import { THEMES } from "./tokens";
+export const Theme = ({ children, theme = "v3light" }) => {
+    const currentTheme = getTheme(theme);
+    return _jsx(ThemeProvider, { theme: currentTheme, children: children });
+};
+const getTheme = (theme) => {
+    if (theme === "v3light") {
+        return THEMES.v3light;
+    }
+    if (theme === "v3dark") {
+        return THEMES.v3dark;
+    }
+    return THEMES.v3light;
+};
+/**
+ * Only use this if it's are absolutely neccessary, and only in tests.
+ */
+export const _test_THEMES = THEMES;

package/dist/animation/CssTransition.d.ts

@@ -0,0 +1,17 @@
+import { Component } from "react";
+import { StyleProp, ViewProps, ViewStyle } from "react-native";
+interface CssTransitionProps extends ViewProps {
+    animate: string[];
+    duration: number;
+}
+interface CssTransitionState {
+    previousStyle: StyleProp<ViewStyle>;
+}
+export declare class CssTransition extends Component<CssTransitionProps, CssTransitionState> {
+    private animatedValue;
+    constructor(props: any);
+    UNSAFE_componentWillReceiveProps(nextProps: CssTransitionProps): void;
+    render(): JSX.Element;
+    private mergeStyles;
+}
+export {};

package/dist/animation/CssTransition.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from "react";
+import { Animated } from "react-native";
+export class CssTransition extends Component {
+    animatedValue = new Animated.Value(0);
+    // @ts-expect-error STRICTNESS_MIGRATION --- 🚨 Unsafe legacy code 🚨 Please delete this and fix any type errors if you have time 🙏
+    constructor(props) {
+        super(props);
+        this.state = {
+            previousStyle: props.style,
+        };
+    }
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        this.setState({
+            previousStyle: this.props.style,
+        });
+        this.animatedValue = new Animated.Value(0);
+        Animated.timing(this.animatedValue, {
+            toValue: 1,
+            duration: nextProps.duration,
+            // not all style properties are animatable with the native driver
+            useNativeDriver: false,
+        }).start();
+    }
+    render() {
+        const { style, duration, ...props } = this.props;
+        const { previousStyle } = this.state;
+        const prevStyle = this.mergeStyles(previousStyle);
+        const nextStyle = this.mergeStyles(style);
+        const animateCheckboxStyle = this.props.animate.reduce((acc, cssProperty) => {
+            // @ts-expect-error STRICTNESS_MIGRATION --- 🚨 Unsafe legacy code 🚨 Please delete this and fix any type errors if you have time 🙏
+            acc[cssProperty] = this.animatedValue.interpolate({
+                inputRange: [0, 1],
+                outputRange: [prevStyle[cssProperty], nextStyle[cssProperty]],
+            });
+            return acc;
+        }, {});
+        return _jsx(Animated.View, { style: [style, animateCheckboxStyle], ...props });
+    }
+    // @ts-expect-error STRICTNESS_MIGRATION --- 🚨 Unsafe legacy code 🚨 Please delete this and fix any type errors if you have time 🙏
+    mergeStyles(style) {
+        // @ts-expect-error STRICTNESS_MIGRATION --- 🚨 Unsafe legacy code 🚨 Please delete this and fix any type errors if you have time 🙏
+        return style.reduce((acc, obj) => {
+            Object.keys(obj).forEach((key) => (acc[key] = obj[key]));
+            return acc;
+        }, {});
+    }
+}

package/dist/animation/index.d.ts

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

package/dist/animation/index.js

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

package/dist/constants.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Touch area box for UI elements
+ */
+export declare const DEFAULT_HIT_SLOP: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+/**
+ * Default active opacity for elements that use Palette's <Touchable />
+ */
+export declare let DEFAULT_ACTIVE_OPACITY: number;
+export declare const setGlobalActiveOpacity: (opacity: number) => void;

package/dist/constants.js

@@ -0,0 +1,12 @@
+/**
+ * Touch area box for UI elements
+ */
+export const DEFAULT_HIT_SLOP = { top: 20, bottom: 20, left: 20, right: 20 };
+/**
+ * Default active opacity for elements that use Palette's <Touchable />
+ */
+export let DEFAULT_ACTIVE_OPACITY = 0.8;
+// Set things globally
+export const setGlobalActiveOpacity = (opacity) => {
+    DEFAULT_ACTIVE_OPACITY = opacity;
+};

package/dist/elements/ArtsyKeyboardAvoidingView/ArtsyKeyboardAvoidingView.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const ArtsyKeyboardAvoidingViewContext: import("react").Context<{
+    isPresentedModally: boolean;
+    isVisible: boolean;
+    /**
+     * bottom offset is used when the screen is presented modally to account for
+     * any extra padding at the bottom of the screen (i.e. added for safe area insets)
+     */
+    bottomOffset: number;
+}>;
+export declare const ArtsyKeyboardAvoidingView: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;

package/dist/elements/ArtsyKeyboardAvoidingView/ArtsyKeyboardAvoidingView.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component, createRef, useContext, createContext } from "react";
+import { Dimensions, Keyboard, LayoutAnimation, StatusBar, Platform, StyleSheet, View, } from "react-native";
+export const ArtsyKeyboardAvoidingViewContext = createContext({
+    isPresentedModally: false,
+    isVisible: true,
+    /**
+     * bottom offset is used when the screen is presented modally to account for
+     * any extra padding at the bottom of the screen (i.e. added for safe area insets)
+     */
+    bottomOffset: 0,
+});
+export const ArtsyKeyboardAvoidingView = ({ children }) => {
+    const { isPresentedModally, isVisible, bottomOffset } = useContext(ArtsyKeyboardAvoidingViewContext);
+    return (_jsx(KeyboardAvoidingView, { enabled: isVisible, mode: isPresentedModally ? "bottom-based" : "top-based", bottomOffset: bottomOffset, style: { flex: 1 }, children: children }));
+};
+/**
+ * This code was mostly copied directly from 'react-native'
+ *
+ * The things we've changed are:
+ * - to allow for bottom-based keyboard height calculations for modals
+ * - to use measureInWindow to get the view offset, rather than the bounding box from onLayout
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of https://github.com/facebook/react-native
+ */
+class KeyboardAvoidingView extends Component {
+    _frame = null;
+    _subscriptions = [];
+    _initialFrameHeight = 0;
+    viewRef = createRef();
+    constructor(props) {
+        super(props);
+        this.state = { bottom: 0 };
+    }
+    _relativeKeyboardHeight(keyboardFrame) {
+        const frame = this._frame;
+        if (!frame || !keyboardFrame) {
+            return 0;
+        }
+        switch (this.props.mode) {
+            case "top-based": {
+                let keyboardY = keyboardFrame.screenY;
+                // on android the View layout frame coords start at -statusBarHeight but the
+                // keyboard screenY starts at 0 so we need to offset it to match the View frame
+                if (Platform.OS === "android") {
+                    keyboardY -= StatusBar.currentHeight ?? 0;
+                }
+                // Calculate the displacement needed for the view such that it
+                // no longer overlaps with the keyboard
+                return Math.max(frame.y + frame.height - keyboardY, 0);
+            }
+            case "bottom-based": {
+                let keyboardHeight = Dimensions.get("screen").height - keyboardFrame.screenY;
+                keyboardHeight -= this.props.bottomOffset;
+                return Math.max(keyboardHeight, 0);
+            }
+        }
+    }
+    _onKeyboardChange = (event) => {
+        if (event == null) {
+            this.setState({ bottom: 0 });
+            return;
+        }
+        const { duration, easing, endCoordinates } = event;
+        const height = this._relativeKeyboardHeight(endCoordinates);
+        if (this.state.bottom === height) {
+            return;
+        }
+        if (duration && easing) {
+            LayoutAnimation.configureNext({
+                // We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m
+                duration: duration > 10 ? duration : 10,
+                update: {
+                    duration: duration > 10 ? duration : 10,
+                    type: LayoutAnimation.Types[easing] || "keyboard",
+                },
+            });
+        }
+        this.setState({ bottom: height });
+    };
+    _onLayout = (event) => {
+        this._frame = event.nativeEvent.layout;
+        this.viewRef.current?.measureInWindow((x, y) => {
+            this._frame.x = x;
+            this._frame.y = y;
+        });
+        if (!this._initialFrameHeight) {
+            // save the initial frame height, before the keyboard is visible
+            this._initialFrameHeight = this._frame.height;
+        }
+    };
+    componentDidMount() {
+        if (Platform.OS === "ios") {
+            this._subscriptions = [
+                Keyboard.addListener("keyboardWillChangeFrame", this._onKeyboardChange),
+            ];
+        }
+        else {
+            this._subscriptions = [
+                Keyboard.addListener("keyboardDidHide", this._onKeyboardChange),
+                Keyboard.addListener("keyboardDidShow", this._onKeyboardChange),
+            ];
+        }
+    }
+    componentWillUnmount() {
+        this._subscriptions.forEach((subscription) => {
+            subscription.remove();
+        });
+    }
+    render() {
+        const { children, mode, enabled, style, ...props } = this.props;
+        const bottomHeight = enabled ? this.state.bottom : 0;
+        return (_jsx(View, { ref: this.viewRef, style: StyleSheet.compose(style, { paddingBottom: bottomHeight }), onLayout: this._onLayout, ...props, children: children }));
+    }
+}

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

@@ -0,0 +1 @@
+export * from './ArtsyKeyboardAvoidingView';

package/dist/elements/ArtsyKeyboardAvoidingView/index.js

@@ -0,0 +1 @@
+export * from './ArtsyKeyboardAvoidingView';

package/dist/elements/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,13 @@
+export interface AutocompleteEntry<T> {
+    key: T;
+    searchTerms: string[];
+    importance: number;
+}
+export declare class Autocomplete<T> {
+    private entries;
+    private maxCacheItems;
+    private cache;
+    private cacheOrder;
+    constructor(entries: Array<AutocompleteEntry<T>>, maxCacheItems?: number, stopWords?: string[]);
+    getSuggestions(searchString: string): T[];
+}

package/dist/elements/Autocomplete/Autocomplete.js

@@ -0,0 +1,49 @@
+import { normalizeText } from "../../utils/normalizeText";
+export class Autocomplete {
+    entries;
+    maxCacheItems;
+    cache = {};
+    cacheOrder = [];
+    constructor(entries, maxCacheItems = 100, stopWords = ["of", "the", "and"]) {
+        this.entries = entries;
+        this.maxCacheItems = maxCacheItems;
+        for (const entry of entries) {
+            entry.searchTerms = entry.searchTerms.map(normalizeText);
+            for (const searchTerm of entry.searchTerms.slice(0)) {
+                const parts = searchTerm.split(/\s+/).filter((s) => !stopWords.includes(s));
+                if (parts.length > 1) {
+                    entry.searchTerms.push(...parts);
+                }
+            }
+        }
+    }
+    getSuggestions(searchString) {
+        searchString = normalizeText(searchString);
+        if (this.cache[searchString]) {
+            return this.cache[searchString].map((e) => e.key);
+        }
+        // refine previous results if available
+        let possibleEntries = this.entries;
+        for (let i = searchString.length - 2; i > 0; i--) {
+            if (this.cache[searchString.slice(0, i)]) {
+                possibleEntries = this.cache[searchString.slice(0, i)];
+                break;
+            }
+        }
+        const results = possibleEntries.filter((entry) => {
+            for (const searchTerm of entry.searchTerms) {
+                if (searchTerm.startsWith(searchString)) {
+                    return true;
+                }
+            }
+            return false;
+        });
+        results.sort((a, b) => b.importance - a.importance);
+        this.cache[searchString] = results;
+        this.cacheOrder.push(searchString);
+        while (this.cacheOrder.length > this.maxCacheItems) {
+            delete this.cache[this.cacheOrder.shift()];
+        }
+        return results.map((e) => e.key);
+    }
+}

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

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

package/dist/elements/Autocomplete/Autocomplete.tests.js

@@ -0,0 +1,78 @@
+import { Autocomplete } from "./Autocomplete";
+const artists = [
+    {
+        key: "Pablo Picasso",
+        importance: 100,
+        searchTerms: ["Pablo Picasso"],
+    },
+    {
+        key: "Grayson Perry",
+        importance: 10,
+        searchTerms: ["Grayson Perry"],
+    },
+    {
+        key: "Prince",
+        importance: 50,
+        searchTerms: ["Prince", "The artist formerly known as 'Prince'"],
+    },
+    {
+        key: "James Brown",
+        importance: 100,
+        searchTerms: ["JB", "The King of Funk"],
+    },
+];
+describe(Autocomplete, () => {
+    it(`lets you search for individual words in search terms`, async () => {
+        const auto = new Autocomplete(artists);
+        expect(auto.getSuggestions("formerly")).toEqual(["Prince"]);
+    });
+    it(`doesn't care about capitalization`, async () => {
+        const auto = new Autocomplete(artists);
+        expect(auto.getSuggestions("fOrMerly")).toEqual(["Prince"]);
+    });
+    it(`doesn't care about punctuation`, async () => {
+        const auto = new Autocomplete([
+            ...artists,
+            {
+                key: "Dog",
+                importance: +Infinity,
+                searchTerms: ["Santa's little helper"],
+            },
+        ]);
+        expect(auto.getSuggestions("fOrMerl,y")).toEqual(["Prince"]);
+        expect(auto.getSuggestions("santas")).toEqual(["Dog"]);
+    });
+    it(`doesn't care about diacritics`, async () => {
+        const auto = new Autocomplete([
+            ...artists,
+            {
+                key: "Nordic",
+                importance: +Infinity,
+                searchTerms: ["Jón Jønssön"],
+            },
+        ]);
+        expect(auto.getSuggestions("Jon")).toEqual(["Nordic"]);
+        expect(auto.getSuggestions("Jonsson")).toEqual(["Nordic"]);
+    });
+    it(`orders results according to importance`, async () => {
+        const auto = new Autocomplete(artists);
+        expect(auto.getSuggestions("p")).toEqual(["Pablo Picasso", "Prince", "Grayson Perry"]);
+    });
+    it(`returns nothing when there are no matches`, async () => {
+        const auto = new Autocomplete(artists);
+        expect(auto.getSuggestions("z")).toEqual([]);
+    });
+    it(`ignores stop words which don't appear at the beginning of a search term`, async () => {
+        const auto = new Autocomplete([
+            ...artists,
+            {
+                key: "PaRappa the Rapper",
+                importance: +Infinity * 2,
+                searchTerms: ["PaRappa the Rapper"],
+            },
+        ], 10, ["the"]);
+        expect(auto.getSuggestions("the")).toContain("James Brown");
+        expect(auto.getSuggestions("the")).not.toContain("PaRappa the Rapper");
+        expect(auto.getSuggestions("Rapper")).toEqual(["PaRappa the Rapper"]);
+    });
+});

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

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

package/dist/elements/Autocomplete/index.js

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

package/dist/elements/Avatar/Avatar.d.ts

@@ -0,0 +1,11 @@
+import { ImgHTMLAttributes } from "react";
+export type AvatarSize = "xxs" | "xs" | "sm" | "md";
+export interface AvatarProps extends ImgHTMLAttributes<any> {
+    src?: string;
+    /** If an image is missing, show initials instead */
+    initials?: string;
+    /** The size of the Avatar */
+    size?: AvatarSize;
+}
+/** A circular Avatar component containing an image or initials */
+export declare const Avatar: ({ src, initials, size }: AvatarProps) => JSX.Element;

package/dist/elements/Avatar/Avatar.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Image } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, withDelay, } from "react-native-reanimated";
+import { useColor } from "../../utils/hooks";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+const DEFAULT_SIZE = "md";
+const VARIANTS = {
+    xxs: {
+        diameter: 30,
+        textSize: "xs",
+    },
+    xs: {
+        diameter: 45,
+        textSize: "sm-display",
+    },
+    sm: {
+        diameter: 70,
+        textSize: "md",
+    },
+    md: {
+        diameter: 100,
+        textSize: "lg-display",
+    },
+};
+/** A circular Avatar component containing an image or initials */
+export const Avatar = ({ src, initials, size = DEFAULT_SIZE }) => {
+    const color = useColor();
+    const [loading, setLoading] = useState(true);
+    const opacity = useSharedValue(0);
+    opacity.value = withDelay(100, withTiming(1, {
+        duration: 200,
+        easing: Easing.sin,
+    }));
+    const style = useAnimatedStyle(() => {
+        return {
+            opacity: loading ? 0 : opacity.value,
+        };
+    }, [loading]);
+    const { diameter, textSize } = VARIANTS[size];
+    if (src) {
+        return (_jsx(Box, { width: diameter, height: diameter, borderRadius: diameter / 2, overflow: "hidden", borderColor: color("white100"), borderWidth: 1, children: _jsx(Animated.View, { style: style, children: _jsx(Image, { onLoadStart: () => setLoading(true), onLoadEnd: () => setLoading(false), resizeMode: "cover", source: { uri: src }, accessibilityLabel: "AvatarImage", style: {
+                        width: diameter,
+                        height: diameter,
+                    } }) }) }));
+    }
+    return (_jsx(Flex, { width: diameter, height: diameter, borderColor: "black10", borderWidth: 1, borderRadius: diameter, overflow: "hidden", alignItems: "center", justifyContent: "center", accessibilityLabel: "Avatar", children: _jsx(Text, { variant: textSize, children: initials }) }));
+};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { AvatarProps } from "./Avatar";
+declare const _default: {
+    title: string;
+    component: ({ src, initials, size }: AvatarProps) => JSX.Element;
+};
+export default _default;
+export declare function Variants(): JSX.Element;

package/dist/elements/Avatar/Avatar.stories.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from "./Avatar";
+import { List, Row } from "../../storybook/helpers";
+export default {
+    title: "Avatar",
+    component: Avatar,
+};
+const sizes = ["md", "sm", "xs", "xxs"];
+export function Variants() {
+    return (_jsxs(List, { children: [_jsx(Row, { children: sizes.map((s) => (_jsx(Avatar, { initials: "A", size: s }, s))) }), _jsx(Row, { children: sizes.map((s) => (_jsx(Avatar, { initials: "AA", size: s }, s))) }), _jsx(Row, { children: sizes.map((s) => (_jsx(Avatar, { src: "https://placekitten.com/300/300", size: s }, s))) })] }));
+}

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

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

package/dist/elements/Avatar/Avatar.tests.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen } from "@testing-library/react-native";
+import { Image } from "react-native";
+import { Avatar } from "./Avatar";
+import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
+describe("Avatar", () => {
+    it("renders initials if no image url and initials provided", () => {
+        renderWithWrappers(_jsx(Avatar, { initials: "AB" }));
+        expect(screen.UNSAFE_queryByType(Image)).not.toBeTruthy();
+        expect(screen.getByText("AB")).toBeTruthy();
+    });
+});

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

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

package/dist/elements/Avatar/index.js

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

package/dist/elements/BackButton/BackButton.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { TouchableOpacityProps, ViewProps } from "react-native";
+import { Color } from "../../types";
+export interface BackButtonProps {
+    color?: Color;
+    hitSlop?: ViewProps["hitSlop"];
+    onPress?: () => void;
+    showX?: boolean;
+    style?: TouchableOpacityProps["style"];
+    iconSize?: number;
+}
+export declare const BackButton: React.FC<BackButtonProps>;
+export declare const BackButtonWithBackground: React.FC<BackButtonProps>;

package/dist/elements/BackButton/BackButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TouchableOpacity } from "react-native";
+import { DEFAULT_HIT_SLOP } from "../../constants";
+import { ChevronIcon, CloseIcon } from "../../svgs";
+import { Flex } from "../Flex";
+export const BackButton = ({ color = "onBackgroundHigh", hitSlop = DEFAULT_HIT_SLOP, onPress, showX = false, style, iconSize = 18, }) => {
+    return (_jsx(TouchableOpacity, { onPress: onPress, hitSlop: hitSlop, accessibilityRole: "button", accessibilityLabel: showX ? "Close" : "Go back", accessibilityHint: showX ? "Dismiss this screen" : "Go back to the previous screen", style: style, children: showX ? (_jsx(CloseIcon, { fill: color, width: iconSize, height: iconSize })) : (_jsx(ChevronIcon, { direction: "left", fill: color, height: iconSize, width: iconSize })) }));
+};
+export const BackButtonWithBackground = ({ color = "onBackgroundHigh", hitSlop = DEFAULT_HIT_SLOP, onPress, showX = false, style, }) => {
+    return (_jsx(TouchableOpacity, { onPress: onPress, hitSlop: hitSlop, children: _jsx(Flex, { backgroundColor: "background", width: 40, height: 40, borderRadius: 20, alignItems: "center", justifyContent: "center", accessibilityRole: "button", accessibilityLabel: showX ? "Close" : "Go back", accessibilityHint: showX ? "Dismiss this screen" : "Go back to the previous screen", style: style, children: showX ? (_jsx(CloseIcon, { fill: color, width: 26, height: 26 })) : (_jsx(ChevronIcon, { fill: color, direction: "left" })) }) }));
+};

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

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

package/dist/elements/BackButton/BackButton.stories.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BackButton, BackButtonWithBackground } from "./BackButton";
+import { Text } from "../../elements/Text";
+import { List } from "../../storybook/helpers";
+import { Flex } from "../Flex";
+export default {
+    title: "BackButton",
+    component: BackButton,
+};
+export const Styled = () => (_jsxs(List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: [_jsx(Text, { children: "Back button" }), _jsx(BackButton, {}), _jsx(Text, { children: "Back button with background" }), _jsxs(Flex, { children: [_jsx(Flex, { backgroundColor: "red", width: 50, height: 50, position: "absolute" }), _jsx(BackButtonWithBackground, {})] })] }));

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

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

package/dist/elements/BackButton/index.js

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

package/dist/elements/Banner/Banner.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { FlexProps } from "styled-system";
+export type BannerVariant = keyof typeof BANNER_VARIANTS;
+export interface BannerProps extends FlexProps {
+    text: string;
+    onClose?: () => void;
+    dismissable?: boolean;
+    variant?: BannerVariant;
+}
+export declare const Banner: ({ text, onClose, dismissable, variant, ...restProps }: BannerProps) => JSX.Element;
+declare const BANNER_VARIANTS: {
+    defaultLight: {
+        backgroundColor: string;
+        color: string;
+    };
+    defaultDark: {
+        backgroundColor: string;
+        color: string;
+    };
+    success: {
+        backgroundColor: string;
+        color: string;
+    };
+    error: {
+        backgroundColor: string;
+        color: string;
+    };
+    brand: {
+        backgroundColor: string;
+        color: string;
+    };
+};
+export {};