@artsy/palette-mobile 13.2.33 → 13.2.35

package/dist/elements/EntityHeader/EntityHeader.js

@@ -1,25 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EntityHeader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const svgs_1 = require("../../svgs");
-const text_1 = require("../../utils/text");
-const Avatar_1 = require("../Avatar");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-const EntityHeader = ({ avatarSize = "xs", FollowButton, RightButton, imageUrl, initials, meta, name, smallVariant = false, displayPrivateIcon, theme = "light", ...restProps }) => {
-    const rightButton = (RightButton || FollowButton) && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: smallVariant ? 0.5 : 1, flexDirection: "row", alignItems: "center", justifyContent: "flex-end", children: RightButton || FollowButton }));
-    const headerName = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { color: theme === "light" ? "black100" : "white100", ellipsizeMode: "tail", numberOfLines: 1, variant: "sm", lineHeight: "18px", style: { flexShrink: 1 }, children: name }), displayPrivateIcon && ((0, jsx_runtime_1.jsx)(svgs_1.LockIcon, { ml: "2px", width: 16, height: 16, testID: "lock-icon", fill: theme === "light" ? "black100" : "white100" }))] }));
-    const headerMeta = (0, react_1.useMemo)(() => {
+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 ((0, react_1.isValidElement)(meta)) {
+            if (isValidElement(meta)) {
                 return meta;
             }
-            return ((0, jsx_runtime_1.jsx)(Text_1.Text, { ellipsizeMode: "tail", numberOfLines: 1, variant: "xs", color: theme === "light" ? "black60" : "white100", style: { flexShrink: 1 }, children: 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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", flexWrap: "nowrap", ...restProps, children: [!!(imageUrl || initials) && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: 1, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { size: avatarSize, src: imageUrl, initials: initials, color: theme === "light" ? "black100" : "white100" }) })), smallVariant ? ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "flex-start", flexGrow: 1, alignItems: "center", children: [headerName, (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm", ml: "0.5", color: theme === "light" ? "black100" : "white100", children: text_1.bullet }), rightButton] })) : ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { justifyContent: "space-between", width: 0, flexGrow: 1, flexDirection: "row", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignSelf: "center", flexShrink: 1, children: [headerName, headerMeta] }), rightButton] }))] }));
+    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] }))] }));
 };
-exports.EntityHeader = EntityHeader;

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

@@ -1,33 +1,25 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithPrivateIcon = exports.WithRightButton = exports.VariantSmall = exports.Image = exports.Initials = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const EntityHeader_1 = require("./EntityHeader");
-const Box_1 = require("../Box");
-const Button_1 = require("../Button");
-const Text_1 = require("../Text");
-exports.default = {
+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_1.EntityHeader,
+    component: EntityHeader,
 };
 const avatarSizes = ["xxs", "xs", "sm", "md"];
-const Initials = () => {
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", children: "Avatar Sizes" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { mx: 2, children: avatarSizes.map((size) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { mb: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: size }), (0, jsx_runtime_1.jsx)(EntityHeader_1.EntityHeader, { name: "Artist Name", initials: "AN", meta: "Meta stuff", avatarSize: size })] }))) })] }));
+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 })] }))) })] }));
 };
-exports.Initials = Initials;
-const Image = () => {
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", children: "Avatar Sizes" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { mx: 2, children: avatarSizes.map((size) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { mb: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: size }), (0, jsx_runtime_1.jsx)(EntityHeader_1.EntityHeader, { imageUrl: "https://picsum.photos/200/200", 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 })] }))) })] }));
 };
-exports.Image = Image;
-const VariantSmall = () => {
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", children: "Avatar Sizes" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { mx: 2, children: avatarSizes.map((size) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { mb: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: size }), (0, jsx_runtime_1.jsx)(EntityHeader_1.EntityHeader, { imageUrl: "https://picsum.photos/200/200", name: "Artist Name", initials: "AN", meta: "Meta stuff", avatarSize: size, smallVariant: true })] }))) })] }));
+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 })] }))) })] }));
 };
-exports.VariantSmall = VariantSmall;
-const WithRightButton = () => {
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", children: "Avatar Sizes" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { mx: 2, children: avatarSizes.map((size) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { mb: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: size }), (0, jsx_runtime_1.jsx)(EntityHeader_1.EntityHeader, { imageUrl: "https://picsum.photos/200/200", name: "Artist Name", initials: "AN", meta: "Meta stuff", avatarSize: size, RightButton: (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", children: "Right Button" }) })] }))) })] }));
+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" }) })] }))) })] }));
 };
-exports.WithRightButton = WithRightButton;
-const WithPrivateIcon = () => {
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", children: "Avatar Sizes" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { mx: 2, children: avatarSizes.map((size) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { mb: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: size }), (0, jsx_runtime_1.jsx)(EntityHeader_1.EntityHeader, { imageUrl: "https://picsum.photos/200/200", name: "Artist Name", initials: "AN", meta: "Meta stuff", avatarSize: size, displayPrivateIcon: true })] }))) })] }));
+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 })] }))) })] }));
 };
-exports.WithPrivateIcon = WithPrivateIcon;

package/dist/elements/EntityHeader/index.js

@@ -1,17 +1 @@
-"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("./EntityHeader"), exports);
+export * from "./EntityHeader";

package/dist/elements/Flex/Flex.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Flex = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Box_1 = require("../Box");
-exports.Flex = (0, react_1.forwardRef)(({ backgroundColor, ...restProps }, ref) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { backgroundColor: backgroundColor ?? "transparent", ...restProps, ref: ref })));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Box } from "../Box";
+export const Flex = forwardRef(({ backgroundColor, ...restProps }, ref) => (_jsx(Box, { backgroundColor: backgroundColor ?? "transparent", ...restProps, ref: ref })));

package/dist/elements/Flex/index.js

@@ -1,17 +1 @@
-"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("./Flex"), exports);
+export * from "./Flex";

package/dist/elements/Header/ArtsyLogoHeader.js

@@ -1,15 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArtsyLogoHeader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("react-native");
-const svgs_1 = require("../../svgs");
-const Box_1 = require("../Box");
-const Flex_1 = require("../Flex");
-const Spacer_1 = require("../Spacer");
-const ArtsyLogoHeader = ({ shadow = false }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Box_1.Box, { mt: 2, mb: 1, style: shadow ? styles.boxShadowStyle : {}, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", children: (0, jsx_runtime_1.jsx)(svgs_1.ArtsyLogoBlackIcon, { scale: 0.75 }) }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 })] }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 2 })] }));
-exports.ArtsyLogoHeader = ArtsyLogoHeader;
-const styles = react_native_1.StyleSheet.create({
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { StyleSheet } from "react-native";
+import { ArtsyLogoBlackIcon } from "../../svgs";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { Spacer } from "../Spacer";
+export const ArtsyLogoHeader = ({ shadow = false }) => (_jsxs(_Fragment, { children: [_jsxs(Box, { mt: 2, mb: 1, style: shadow ? styles.boxShadowStyle : {}, children: [_jsx(Flex, { alignItems: "center", children: _jsx(ArtsyLogoBlackIcon, { scale: 0.75 }) }), _jsx(Spacer, { x: 1 })] }), _jsx(Spacer, { x: 2 })] }));
+const styles = StyleSheet.create({
     boxShadowStyle: {
         shadowColor: "black",
         shadowOffset: { width: 0, height: 4 },

package/dist/elements/Header/index.js

@@ -1,17 +1 @@
-"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("./ArtsyLogoHeader"), exports);
+export * from "./ArtsyLogoHeader";

package/dist/elements/Histogram/Histogram.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Histogram = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Box_1 = require("../Box");
-const Flex_1 = require("../Flex");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
 const BAR_WIDTH = 2;
 const BAR_ROUNDNESS = 10;
 const isSelected = (value, min, max) => {
@@ -15,13 +12,12 @@ const getPercentByEntity = (maxValue, entityCount) => {
     }
     return (100 / maxValue) * entityCount;
 };
-const Histogram = ({ bars, selectedRange }) => {
+export const Histogram = ({ bars, selectedRange }) => {
     const maxValue = Math.max(...bars.map((bar) => bar.count));
     const [min, max] = selectedRange;
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { height: 110, flexDirection: "row", justifyContent: "space-between", alignItems: "flex-end", children: bars.map((entity, index) => {
+    return (_jsx(Flex, { height: 110, flexDirection: "row", justifyContent: "space-between", alignItems: "flex-end", children: bars.map((entity, index) => {
             const percent = getPercentByEntity(maxValue, entity.count);
             const selected = isSelected(entity.value, min, max);
-            return ((0, jsx_runtime_1.jsx)(Box_1.Box, { height: `${percent}%`, bg: selected ? "blue100" : "black15", width: BAR_WIDTH, borderTopLeftRadius: BAR_ROUNDNESS, borderTopRightRadius: BAR_ROUNDNESS }, `bar-${index}`));
+            return (_jsx(Box, { height: `${percent}%`, bg: selected ? "blue100" : "black15", width: BAR_WIDTH, borderTopLeftRadius: BAR_ROUNDNESS, borderTopRightRadius: BAR_ROUNDNESS }, `bar-${index}`));
         }) }));
 };
-exports.Histogram = Histogram;

package/dist/elements/Histogram/index.js

@@ -1,17 +1 @@
-"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("./Histogram"), exports);
+export * from "./Histogram";

package/dist/elements/Image/Image.js

@@ -1,83 +1,54 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Image = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const react_native_blurhash_1 = require("react-native-blurhash");
-const react_native_fast_image_1 = __importDefault(require("react-native-fast-image"));
-const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const createGeminiUrl_1 = require("../../utils/createGeminiUrl");
-const hooks_1 = require("../../utils/hooks");
-const useScreenDimensions_1 = require("../../utils/hooks/useScreenDimensions");
-const Flex_1 = require("../Flex");
-const Skeleton_1 = require("../Skeleton");
-exports.Image = (0, react_1.memo)(({ aspectRatio, width, height, performResize = true, src, style, resizeMode, geminiResizeMode, showLoadingState = false, blurhash, ...flexProps }) => {
-    const loading = (0, react_native_reanimated_1.useSharedValue)(true);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import { PixelRatio, View } from "react-native";
+import { Blurhash } from "react-native-blurhash";
+import FastImage from "react-native-fast-image";
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated";
+import { createGeminiUrl } from "../../utils/createGeminiUrl";
+import { useColor } from "../../utils/hooks";
+import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
+import { Flex } from "../Flex";
+import { Skeleton, SkeletonBox } from "../Skeleton";
+export const Image = memo(({ aspectRatio, width, height, performResize = true, src, style, resizeMode, geminiResizeMode, showLoadingState = false, blurhash, ...flexProps }) => {
+    const loading = useSharedValue(true);
     const dimensions = useImageDimensions({ aspectRatio, width, height });
-    const color = (0, hooks_1.useColor)();
-    const animatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+    const color = useColor();
+    const animatedStyles = useAnimatedStyle(() => {
         return {
-            opacity: (0, react_native_reanimated_1.withTiming)(loading.value ? 0 : 1, { duration: 200, easing: react_native_reanimated_1.Easing.sin }),
+            opacity: withTiming(loading.value ? 0 : 1, { duration: 200, easing: Easing.sin }),
         };
     }, []);
-    const onAnimationEnd = (0, react_1.useCallback)(() => {
+    const onAnimationEnd = useCallback(() => {
         "worklet";
         loading.value = false;
         // No need to get the js thread involved here
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     if (showLoadingState) {
-        return (0, jsx_runtime_1.jsx)(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash });
+        return _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash });
     }
     let uri = src;
     if (performResize) {
-        uri = (0, createGeminiUrl_1.createGeminiUrl)({
+        uri = createGeminiUrl({
             imageURL: src,
-            width: react_native_1.PixelRatio.getPixelSizeForLayoutSize(dimensions.width),
-            height: react_native_1.PixelRatio.getPixelSizeForLayoutSize(dimensions.height),
+            width: PixelRatio.getPixelSizeForLayoutSize(dimensions.width),
+            height: PixelRatio.getPixelSizeForLayoutSize(dimensions.height),
             resizeMode: geminiResizeMode,
         });
     }
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [dimensions, { position: "absolute" }], children: (0, jsx_runtime_1.jsx)(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash }) }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedStyles, children: (0, jsx_runtime_1.jsx)(react_native_fast_image_1.default, { style: [
+    return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [_jsx(View, { style: [dimensions, { position: "absolute" }], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash }) }), _jsx(Animated.View, { style: animatedStyles, children: _jsx(FastImage, { style: [
                         dimensions,
                         style,
                         // If we have a blurhash, we don't want to show a background color
                         // That might flash before the image loads
                         { backgroundColor: blurhash ? "transparent" : color("black30") },
                     ], resizeMode: resizeMode, onLoadEnd: onAnimationEnd, source: {
-                        priority: react_native_fast_image_1.default.priority.normal,
+                        priority: FastImage.priority.normal,
                         uri,
                     } }) })] }));
 });
 const useImageDimensions = (props) => {
-    const screenDimensions = (0, useScreenDimensions_1.useScreenDimensions)();
+    const screenDimensions = useScreenDimensions();
     const imageWidth = props.width ?? screenDimensions.width;
     let imageHeight;
     if (props.height) {
@@ -98,7 +69,7 @@ const useImageDimensions = (props) => {
 };
 const ImageSkeleton = ({ dimensions, blurhash }) => {
     if (!!blurhash) {
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", backgroundColor: "black10", ...dimensions, children: (0, jsx_runtime_1.jsx)(react_native_blurhash_1.Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16 }) }));
+        return (_jsx(Flex, { position: "absolute", backgroundColor: "black10", ...dimensions, children: _jsx(Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16 }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonBox, { ...dimensions }) }) }));
+    return (_jsx(Flex, { position: "absolute", children: _jsx(Skeleton, { children: _jsx(SkeletonBox, { ...dimensions }) }) }));
 };

package/dist/elements/Image/Image.stories.js

@@ -1,18 +1,16 @@
-"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 Image_1 = require("./Image");
-const Flex_1 = require("../Flex");
-(0, react_native_1.storiesOf)("Image", module)
-    .add("With default fallback screen width", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
-    .add("With width and height", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { width: 250, height: 400, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
-    .add("With aspect ratio", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { width: 250, aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
-    .add("Without automatic resizing", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { aspectRatio: 0.62, performResize: false, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { Image } from "./Image";
+import { Flex } from "../Flex";
+storiesOf("Image", module)
+    .add("With default fallback screen width", () => (_jsx(Image, { aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("With width and height", () => (_jsx(Image, { width: 250, height: 400, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("With aspect ratio", () => (_jsx(Image, { width: 250, aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("Without automatic resizing", () => (_jsx(Image, { aspectRatio: 0.62, performResize: false, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
     .add("With percentage width and height", () => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", flex: 1, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, style: { aspectRatio: 0.69 }, children: (0, jsx_runtime_1.jsx)(Image_1.Image, { src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg", height: 260, width: 180, style: { width: "100%", height: "100%" } }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, style: { aspectRatio: 1 }, children: (0, jsx_runtime_1.jsx)(Image_1.Image, { src: "https://i.imgur.com/b9IZinu.gif", width: 200, height: 200, style: { width: "100%", height: "100%" } }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, style: { aspectRatio: 1.2 }, children: (0, jsx_runtime_1.jsx)(Image_1.Image, { width: 200, height: 240, src: "https://i.imgur.com/non-existing-image.gif", style: { width: "100%", height: "100%" } }) })] }));
+    return (_jsxs(Flex, { flexDirection: "row", flex: 1, children: [_jsx(Flex, { flex: 1, style: { aspectRatio: 0.69 }, children: _jsx(Image, { src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg", height: 260, width: 180, style: { width: "100%", height: "100%" } }) }), _jsx(Flex, { flex: 1, style: { aspectRatio: 1 }, children: _jsx(Image, { src: "https://i.imgur.com/b9IZinu.gif", width: 200, height: 200, style: { width: "100%", height: "100%" } }) }), _jsx(Flex, { flex: 1, style: { aspectRatio: 1.2 }, children: _jsx(Image, { width: 200, height: 240, src: "https://i.imgur.com/non-existing-image.gif", style: { width: "100%", height: "100%" } }) })] }));
 })
-    .add("With default fallback screen width + blurhash", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { aspectRatio: 0.62, blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
-    .add("With width and height + blurhash", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", width: 250, height: 400, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
-    .add("With aspect ratio + blurhash", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", width: 250, aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
-    .add("Without automatic resizing + blurhash", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", aspectRatio: 0.62, performResize: false, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })));
+    .add("With default fallback screen width + blurhash", () => (_jsx(Image, { aspectRatio: 0.62, blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("With width and height + blurhash", () => (_jsx(Image, { blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", width: 250, height: 400, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("With aspect ratio + blurhash", () => (_jsx(Image, { blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", width: 250, aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("Without automatic resizing + blurhash", () => (_jsx(Image, { blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", aspectRatio: 0.62, performResize: false, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })));

package/dist/elements/Image/index.js

@@ -1,17 +1 @@
-"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("./Image"), exports);
+export * from "./Image";