@artsy/palette-mobile 11.0.11 → 11.0.13

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v11.0.13 (Thu Apr 13 2023)
+
+#### 🐛 Bug Fix
+
+- ci(npm): Fix package publishing [#86](https://github.com/artsy/palette-mobile/pull/86) ([@damassi](https://github.com/damassi))
+
+#### Authors: 1
+
+- Christopher Pappas ([@damassi](https://github.com/damassi))
+
+---
+
+# v11.0.12 (Thu Apr 13 2023)
+
+#### 🐛 Bug Fix
+
+- docs(dev): Update README with notes on yalc [#85](https://github.com/artsy/palette-mobile/pull/85) ([@damassi](https://github.com/damassi))
+
+#### Authors: 1
+
+- Christopher Pappas ([@damassi](https://github.com/damassi))
+
+---
+
 # v11.0.11 (Fri Apr 07 2023)
 
 #### 🐛 Bug Fix

package/README.md

@@ -60,6 +60,8 @@ And then either open Xcode and run, or Android Studio, or run `yarn ios` or `yar
 
 You can add this library using `yarn add @artsy/palette-mobile`. _Don't forget to also add all the `peerDependencies` to your project._
 
+For connecting Palette to a locally running version of our mobile apps, see [these docs](https://github.com/artsy/eigen/blob/main/docs/developing_local_palette.md).
+
 ## About Artsy
 
 <a href="https://www.artsy.net/">

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,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._test_THEMES = exports.Theme = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const native_1 = require("styled-components/native");
+const tokens_1 = require("./tokens");
+const Theme = ({ children, theme = "v3light" }) => {
+    const currentTheme = getTheme(theme);
+    return (0, jsx_runtime_1.jsx)(native_1.ThemeProvider, { theme: currentTheme, children: children });
+};
+exports.Theme = Theme;
+const getTheme = (theme) => {
+    if (theme === "v3light") {
+        return tokens_1.THEMES.v3light;
+    }
+    if (theme === "v3dark") {
+        return tokens_1.THEMES.v3dark;
+    }
+    return tokens_1.THEMES.v3light;
+};
+/**
+ * Only use this if it's are absolutely neccessary, and only in tests.
+ */
+exports._test_THEMES = tokens_1.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,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CssTransition = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+class CssTransition extends react_1.Component {
+    animatedValue = new react_native_1.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 react_native_1.Animated.Value(0);
+        react_native_1.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 (0, jsx_runtime_1.jsx)(react_native_1.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;
+        }, {});
+    }
+}
+exports.CssTransition = CssTransition;

package/dist/animation/index.d.ts

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

package/dist/animation/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CssTransition"), exports);

package/dist/constants.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Touch area box for UI elements
+ */
+export declare const DEFAULT_HIT_SLOP: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};

package/dist/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_HIT_SLOP = void 0;
+/**
+ * Touch area box for UI elements
+ */
+exports.DEFAULT_HIT_SLOP = { top: 20, bottom: 20, left: 20, right: 20 };

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,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArtsyKeyboardAvoidingView = exports.ArtsyKeyboardAvoidingViewContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+exports.ArtsyKeyboardAvoidingViewContext = (0, react_1.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,
+});
+const ArtsyKeyboardAvoidingView = ({ children }) => {
+    const { isPresentedModally, isVisible, bottomOffset } = (0, react_1.useContext)(exports.ArtsyKeyboardAvoidingViewContext);
+    return ((0, jsx_runtime_1.jsx)(KeyboardAvoidingView, { enabled: isVisible, mode: isPresentedModally ? "bottom-based" : "top-based", bottomOffset: bottomOffset, style: { flex: 1 }, children: children }));
+};
+exports.ArtsyKeyboardAvoidingView = ArtsyKeyboardAvoidingView;
+/**
+ * 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 react_1.Component {
+    _frame = null;
+    _subscriptions = [];
+    _initialFrameHeight = 0;
+    viewRef = (0, react_1.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 (react_native_1.Platform.OS === "android") {
+                    keyboardY -= react_native_1.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 = react_native_1.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) {
+            react_native_1.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: react_native_1.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 (react_native_1.Platform.OS === "ios") {
+            this._subscriptions = [
+                react_native_1.Keyboard.addListener("keyboardWillChangeFrame", this._onKeyboardChange),
+            ];
+        }
+        else {
+            this._subscriptions = [
+                react_native_1.Keyboard.addListener("keyboardDidHide", this._onKeyboardChange),
+                react_native_1.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 ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: this.viewRef, style: react_native_1.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,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ArtsyKeyboardAvoidingView"), exports);

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,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = void 0;
+const normalizeText_1 = require("../../utils/normalizeText");
+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_1.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 = (0, normalizeText_1.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);
+    }
+}
+exports.Autocomplete = Autocomplete;

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

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

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

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Autocomplete_1 = require("./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_1.Autocomplete, () => {
+    it(`lets you search for individual words in search terms`, async () => {
+        const auto = new Autocomplete_1.Autocomplete(artists);
+        expect(auto.getSuggestions("formerly")).toEqual(["Prince"]);
+    });
+    it(`doesn't care about capitalization`, async () => {
+        const auto = new Autocomplete_1.Autocomplete(artists);
+        expect(auto.getSuggestions("fOrMerly")).toEqual(["Prince"]);
+    });
+    it(`doesn't care about punctuation`, async () => {
+        const auto = new Autocomplete_1.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_1.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_1.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_1.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_1.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,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Autocomplete"), exports);

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

@@ -0,0 +1,12 @@
+import { ImgHTMLAttributes } from "react";
+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;
+export {};

package/dist/elements/Avatar/Avatar.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const hooks_1 = require("../../utils/hooks");
+const Flex_1 = require("../Flex");
+const Text_1 = require("../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 */
+const Avatar = ({ src, initials, size = DEFAULT_SIZE }) => {
+    const color = (0, hooks_1.useColor)();
+    const { diameter, textSize } = VARIANTS[size];
+    if (src) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.Image, { resizeMode: "cover", style: {
+                width: diameter,
+                height: diameter,
+                borderRadius: diameter / 2,
+                borderColor: color("white100"),
+                borderWidth: 1,
+            }, source: { uri: src }, accessibilityLabel: "AvatarImage" }));
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: diameter, height: diameter, borderColor: "black10", borderWidth: 1, borderRadius: diameter, overflow: "hidden", alignItems: "center", justifyContent: "center", accessibilityLabel: "Avatar", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: textSize, children: initials }) }));
+};
+exports.Avatar = Avatar;

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,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Variants = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Avatar_1 = require("./Avatar");
+const helpers_1 = require("../../storybook/helpers");
+exports.default = {
+    title: "Avatar",
+    component: Avatar_1.Avatar,
+};
+const sizes = ["md", "sm", "xs", "xxs"];
+function Variants() {
+    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(helpers_1.Row, { children: sizes.map((s) => ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { initials: "A", size: s }, s))) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: sizes.map((s) => ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { initials: "AA", size: s }, s))) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: sizes.map((s) => ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { src: "https://placekitten.com/300/300", size: s }, s))) })] }));
+}
+exports.Variants = Variants;

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("@testing-library/react-native");
+const react_native_2 = require("react-native");
+const Avatar_1 = require("./Avatar");
+const renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
+describe("Avatar", () => {
+    it("renders initials if no image url and initials provided", () => {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { initials: "AB" }));
+        expect(react_native_1.screen.UNSAFE_queryByType(react_native_2.Image)).not.toBeTruthy();
+        expect(react_native_1.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,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Avatar"), exports);