@artsy/palette-mobile 23.14.0 → 24.0.0

package/dist/elements/EntityHeader/EntityHeader.js

@@ -1,22 +1,49 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LockIcon } from "@artsy/icons/native";
-import { isValidElement, useMemo } from "react";
-import { Text as RNText } from "react-native";
-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(RNText, { ellipsizeMode: "tail", numberOfLines: 1, children: _jsx(Text, { color: theme === "light" ? "mono100" : "mono0", variant: "sm", lineHeight: "18px", style: { flexShrink: 1 }, children: name }) }), displayPrivateIcon && (_jsx(LockIcon, { ml: "2px", width: 16, height: 16, testID: "lock-icon", fill: theme === "light" ? "mono100" : "mono0" }))] }));
-    const headerMeta = useMemo(() => {
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityHeader = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var text_1 = require("../../utils/text");
+var Avatar_1 = require("../Avatar");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+var EntityHeader = function (_a) {
+    var _b = _a.avatarSize, avatarSize = _b === void 0 ? "xs" : _b, FollowButton = _a.FollowButton, RightButton = _a.RightButton, imageUrl = _a.imageUrl, initials = _a.initials, meta = _a.meta, name = _a.name, _c = _a.smallVariant, smallVariant = _c === void 0 ? false : _c, displayPrivateIcon = _a.displayPrivateIcon, _d = _a.theme, theme = _d === void 0 ? "light" : _d, restProps = __rest(_a, ["avatarSize", "FollowButton", "RightButton", "imageUrl", "initials", "meta", "name", "smallVariant", "displayPrivateIcon", "theme"]);
+    var 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 }));
+    var headerName = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { ellipsizeMode: "tail", numberOfLines: 1, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: theme === "light" ? "mono100" : "mono0", variant: "sm", lineHeight: "18px", style: { flexShrink: 1 }, children: name }) }), displayPrivateIcon && ((0, jsx_runtime_1.jsx)(native_1.LockIcon, { ml: "2px", width: 16, height: 16, testID: "lock-icon", fill: theme === "light" ? "mono100" : "mono0" }))] }));
+    var headerMeta = (0, react_1.useMemo)(function () {
         if (meta) {
-            if (isValidElement(meta)) {
+            if ((0, react_1.isValidElement)(meta)) {
                 return meta;
             }
-            return (_jsx(Text, { ellipsizeMode: "tail", numberOfLines: 1, variant: "xs", color: theme === "light" ? "mono60" : "mono0", style: { flexShrink: 1 }, children: meta }));
+            return ((0, jsx_runtime_1.jsx)(Text_1.Text, { ellipsizeMode: "tail", numberOfLines: 1, variant: "xs", color: theme === "light" ? "mono60" : "mono0", 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" ? "mono100" : "mono0" }) })), smallVariant ? (_jsxs(Flex, { flexDirection: "row", justifyContent: "flex-start", flexGrow: 1, alignItems: "center", children: [headerName, _jsx(Text, { variant: "sm", ml: "0.5", color: theme === "light" ? "mono100" : "mono0", 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] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, __assign({ 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" ? "mono100" : "mono0" }) })), 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" ? "mono100" : "mono0", 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] }))] })));
 };
+exports.EntityHeader = EntityHeader;

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

@@ -1,25 +1,33 @@
-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 {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithPrivateIcon = exports.WithRightButton = exports.VariantSmall = exports.Image = exports.Initials = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var EntityHeader_1 = require("./EntityHeader");
+var Box_1 = require("../Box");
+var Button_1 = require("../Button");
+var Text_1 = require("../Text");
+exports.default = {
     title: "EntityHeader",
-    component: EntityHeader,
+    component: EntityHeader_1.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 })] }))) })] }));
+var avatarSizes = ["xxs", "xs", "sm", "md"];
+var Initials = function () {
+    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(function (size) { return ((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 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.Initials = Initials;
+var Image = function () {
+    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(function (size) { return ((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 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.Image = Image;
+var VariantSmall = function () {
+    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(function (size) { return ((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 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.VariantSmall = VariantSmall;
+var WithRightButton = function () {
+    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(function (size) { return ((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 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.WithRightButton = WithRightButton;
+var WithPrivateIcon = function () {
+    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(function (size) { return ((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 })] })); }) })] }));
 };
+exports.WithPrivateIcon = WithPrivateIcon;

package/dist/elements/EntityHeader/index.js

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

package/dist/elements/Flex/Flex.js

@@ -1,4 +1,32 @@
-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 })));
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Flex = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Box_1 = require("../Box");
+exports.Flex = (0, react_1.forwardRef)(function (_a, ref) {
+    var backgroundColor = _a.backgroundColor, restProps = __rest(_a, ["backgroundColor"]);
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, __assign({ backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : "transparent" }, restProps, { ref: ref })));
+});

package/dist/elements/Flex/index.js

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

package/dist/elements/Header/ArtsyLogoHeader.js

@@ -1,11 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ArtsyLogoIcon } from "@artsy/icons/native";
-import { StyleSheet } from "react-native";
-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(ArtsyLogoIcon, { height: 32, width: 94 }) }), _jsx(Spacer, { x: 1 })] }), _jsx(Spacer, { x: 2 })] }));
-const styles = StyleSheet.create({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArtsyLogoHeader = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var react_native_1 = require("react-native");
+var Box_1 = require("../Box");
+var Flex_1 = require("../Flex");
+var Spacer_1 = require("../Spacer");
+var ArtsyLogoHeader = function (_a) {
+    var _b = _a.shadow, shadow = _b === void 0 ? false : _b;
+    return ((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)(native_1.ArtsyLogoIcon, { height: 32, width: 94 }) }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 })] }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 2 })] }));
+};
+exports.ArtsyLogoHeader = ArtsyLogoHeader;
+var styles = react_native_1.StyleSheet.create({
     boxShadowStyle: {
         shadowColor: "black",
         shadowOffset: { width: 0, height: 4 },

package/dist/elements/Header/index.js

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

package/dist/elements/Histogram/Histogram.js

@@ -1,23 +1,28 @@
-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) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Histogram = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Box_1 = require("../Box");
+var Flex_1 = require("../Flex");
+var BAR_WIDTH = 2;
+var BAR_ROUNDNESS = 10;
+var isSelected = function (value, min, max) {
     return value >= min && value <= max;
 };
-const getPercentByEntity = (maxValue, entityCount) => {
+var getPercentByEntity = function (maxValue, entityCount) {
     if (maxValue === 0) {
         return 100;
     }
     return (100 / maxValue) * entityCount;
 };
-export const Histogram = ({ bars, selectedRange }) => {
-    const maxValue = Math.max(...bars.map((bar) => bar.count));
-    const [min, max] = selectedRange;
-    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 (_jsx(Box, { height: `${percent}%`, bg: selected ? "blue100" : "mono15", width: BAR_WIDTH, borderTopLeftRadius: BAR_ROUNDNESS, borderTopRightRadius: BAR_ROUNDNESS }, `bar-${index}`));
+var Histogram = function (_a) {
+    var bars = _a.bars, selectedRange = _a.selectedRange;
+    var maxValue = Math.max.apply(Math, bars.map(function (bar) { return bar.count; }));
+    var min = selectedRange[0], max = selectedRange[1];
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { height: 110, flexDirection: "row", justifyContent: "space-between", alignItems: "flex-end", children: bars.map(function (entity, index) {
+            var percent = getPercentByEntity(maxValue, entity.count);
+            var selected = isSelected(entity.value, min, max);
+            return ((0, jsx_runtime_1.jsx)(Box_1.Box, { height: "".concat(percent, "%"), bg: selected ? "blue100" : "mono15", width: BAR_WIDTH, borderTopLeftRadius: BAR_ROUNDNESS, borderTopRightRadius: BAR_ROUNDNESS }, "bar-".concat(index)));
         }) }));
 };
+exports.Histogram = Histogram;

package/dist/elements/Histogram/index.js

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

package/dist/elements/Image/Image.js

@@ -1,35 +1,65 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import FastImage from "@d11/react-native-fast-image";
-import { memo, useState } from "react";
-import { Blurhash } from "react-native-blurhash";
-import { getImageURL } from "./helpers/getImageURL";
-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 [isLoading, setIsLoading] = useState(true);
-    const dimensions = useImageDimensions({ aspectRatio, width, height });
-    const color = useColor();
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageSkeleton = exports.Image = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_fast_image_1 = __importDefault(require("@d11/react-native-fast-image"));
+var react_1 = require("react");
+var react_native_blurhash_1 = require("react-native-blurhash");
+var getImageURL_1 = require("./helpers/getImageURL");
+var hooks_1 = require("../../utils/hooks");
+var useScreenDimensions_1 = require("../../utils/hooks/useScreenDimensions");
+var Flex_1 = require("../Flex");
+var Skeleton_1 = require("../Skeleton");
+exports.Image = (0, react_1.memo)(function (_a) {
+    var aspectRatio = _a.aspectRatio, width = _a.width, height = _a.height, _b = _a.performResize, performResize = _b === void 0 ? true : _b, src = _a.src, style = _a.style, resizeMode = _a.resizeMode, geminiResizeMode = _a.geminiResizeMode, _c = _a.showLoadingState, showLoadingState = _c === void 0 ? false : _c, blurhash = _a.blurhash, flexProps = __rest(_a, ["aspectRatio", "width", "height", "performResize", "src", "style", "resizeMode", "geminiResizeMode", "showLoadingState", "blurhash"]);
+    var _d = (0, react_1.useState)(true), isLoading = _d[0], setIsLoading = _d[1];
+    var dimensions = useImageDimensions({ aspectRatio: aspectRatio, width: width, height: height });
+    var color = (0, hooks_1.useColor)();
     if (showLoadingState) {
         // Keep logic as small as possible here to save on performance
-        return _jsx(Flex, { backgroundColor: "mono10", ...dimensions, style: { position: "absolute" } });
+        return (0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({ backgroundColor: "mono10" }, dimensions, { style: { position: "absolute" } }));
     }
-    return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [_jsx(FastImage, { style: [
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, __assign({ position: "relative" }, flexProps, { style: __assign({}, dimensions), children: [(0, jsx_runtime_1.jsx)(react_native_fast_image_1.default, { 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("mono30") },
-                ], resizeMode: resizeMode, onLoadEnd: () => setIsLoading(false), source: {
-                    priority: FastImage.priority.normal,
-                    uri: getImageURL({ src, dimensions, geminiResizeMode, performResize }),
-                } }), isLoading && (_jsx(Flex, { style: [dimensions, { position: "absolute" }], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) }))] }));
+                ], resizeMode: resizeMode, onLoadEnd: function () { return setIsLoading(false); }, source: {
+                    priority: react_native_fast_image_1.default.priority.normal,
+                    uri: (0, getImageURL_1.getImageURL)({ src: src, dimensions: dimensions, geminiResizeMode: geminiResizeMode, performResize: performResize }),
+                } }), isLoading && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: [dimensions, { position: "absolute" }], children: (0, jsx_runtime_1.jsx)(exports.ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) }))] })));
 });
-const useImageDimensions = (props) => {
-    const screenDimensions = useScreenDimensions();
-    const imageWidth = props.width ?? screenDimensions.width;
-    let imageHeight;
+var useImageDimensions = function (props) {
+    var _a, _b;
+    var screenDimensions = (0, useScreenDimensions_1.useScreenDimensions)();
+    var imageWidth = (_a = props.width) !== null && _a !== void 0 ? _a : screenDimensions.width;
+    var imageHeight;
     if (props.height) {
         imageHeight = props.height;
     }
@@ -37,18 +67,20 @@ const useImageDimensions = (props) => {
         if (!props.aspectRatio) {
             console.error("[Image] Error: `aspectRatio` is required if `height` is not provided.");
         }
-        const aspectRatio = props.aspectRatio ?? 1;
+        var aspectRatio = (_b = props.aspectRatio) !== null && _b !== void 0 ? _b : 1;
         imageHeight = imageWidth / aspectRatio;
     }
-    const dimensions = {
+    var dimensions = {
         width: imageWidth,
         height: imageHeight,
     };
     return dimensions;
 };
-export const ImageSkeleton = ({ dimensions, blurhash, style }) => {
+var ImageSkeleton = function (_a) {
+    var dimensions = _a.dimensions, blurhash = _a.blurhash, style = _a.style;
     if (!!blurhash) {
-        return (_jsx(Flex, { backgroundColor: "mono10", ...dimensions, style: style, children: _jsx(Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16, decodeAsync: true }) }));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({ backgroundColor: "mono10" }, dimensions, { style: style, children: (0, jsx_runtime_1.jsx)(react_native_blurhash_1.Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16, decodeAsync: true }) })));
     }
-    return (_jsx(Flex, { style: style, children: _jsx(Skeleton, { children: _jsx(SkeletonBox, { ...dimensions }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: style, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonBox, __assign({}, dimensions)) }) }));
 };
+exports.ImageSkeleton = ImageSkeleton;

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

@@ -1,44 +1,56 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Image } from "./Image";
-import { Flex } from "../Flex";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithoutAutomaticResizingBlurhash = exports.WithAspectRatioBlurhash = exports.WithWidthAndHeightBlurhash = exports.WithDefaultFallbackScreenWidthBlurhash = exports.WithPercentageWidthAndHeight = exports.WithoutAutomaticResizing = exports.WithAspectRatio = exports.WithWidthAndHeight = exports.WithDefaultFallbackScreenWidth = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Image_1 = require("./Image");
+var Flex_1 = require("../Flex");
+exports.default = {
     title: "Image",
 };
-export const WithDefaultFallbackScreenWidth = () => (_jsx(Image, { aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }));
-WithDefaultFallbackScreenWidth.story = {
+var WithDefaultFallbackScreenWidth = function () { return ((0, jsx_runtime_1.jsx)(Image_1.Image, { aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })); };
+exports.WithDefaultFallbackScreenWidth = WithDefaultFallbackScreenWidth;
+exports.WithDefaultFallbackScreenWidth.story = {
     name: "With default fallback screen width",
 };
-export const WithWidthAndHeight = () => (_jsx(Image, { width: 250, height: 400, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }));
-WithWidthAndHeight.story = {
+var WithWidthAndHeight = function () { return ((0, jsx_runtime_1.jsx)(Image_1.Image, { width: 250, height: 400, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })); };
+exports.WithWidthAndHeight = WithWidthAndHeight;
+exports.WithWidthAndHeight.story = {
     name: "With width and height",
 };
-export const WithAspectRatio = () => (_jsx(Image, { width: 250, aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }));
-WithAspectRatio.story = {
+var WithAspectRatio = function () { return ((0, jsx_runtime_1.jsx)(Image_1.Image, { width: 250, aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })); };
+exports.WithAspectRatio = WithAspectRatio;
+exports.WithAspectRatio.story = {
     name: "With aspect ratio",
 };
-export const WithoutAutomaticResizing = () => (_jsx(Image, { aspectRatio: 0.62, performResize: false, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }));
-WithoutAutomaticResizing.story = {
+var WithoutAutomaticResizing = function () { return ((0, jsx_runtime_1.jsx)(Image_1.Image, { aspectRatio: 0.62, performResize: false, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })); };
+exports.WithoutAutomaticResizing = WithoutAutomaticResizing;
+exports.WithoutAutomaticResizing.story = {
     name: "Without automatic resizing",
 };
-export const WithPercentageWidthAndHeight = () => {
-    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%" } }) })] }));
+var WithPercentageWidthAndHeight = function () {
+    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%" } }) })] }));
 };
-WithPercentageWidthAndHeight.story = {
+exports.WithPercentageWidthAndHeight = WithPercentageWidthAndHeight;
+exports.WithPercentageWidthAndHeight.story = {
     name: "With percentage width and height",
 };
-export const WithDefaultFallbackScreenWidthBlurhash = () => (_jsx(Image, { aspectRatio: 0.62, blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }));
-WithDefaultFallbackScreenWidthBlurhash.story = {
+var WithDefaultFallbackScreenWidthBlurhash = function () { return ((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" })); };
+exports.WithDefaultFallbackScreenWidthBlurhash = WithDefaultFallbackScreenWidthBlurhash;
+exports.WithDefaultFallbackScreenWidthBlurhash.story = {
     name: "With default fallback screen width + blurhash",
 };
-export const WithWidthAndHeightBlurhash = () => (_jsx(Image, { blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", width: 250, height: 400, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }));
-WithWidthAndHeightBlurhash.story = {
+var WithWidthAndHeightBlurhash = function () { return ((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" })); };
+exports.WithWidthAndHeightBlurhash = WithWidthAndHeightBlurhash;
+exports.WithWidthAndHeightBlurhash.story = {
     name: "With width and height + blurhash",
 };
-export const WithAspectRatioBlurhash = () => (_jsx(Image, { blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", width: 250, aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }));
-WithAspectRatioBlurhash.story = {
+var WithAspectRatioBlurhash = function () { return ((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" })); };
+exports.WithAspectRatioBlurhash = WithAspectRatioBlurhash;
+exports.WithAspectRatioBlurhash.story = {
     name: "With aspect ratio + blurhash",
 };
-export const WithoutAutomaticResizingBlurhash = () => (_jsx(Image, { blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", aspectRatio: 0.62, performResize: false, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }));
-WithoutAutomaticResizingBlurhash.story = {
+var WithoutAutomaticResizingBlurhash = function () { return ((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" })); };
+exports.WithoutAutomaticResizingBlurhash = WithoutAutomaticResizingBlurhash;
+exports.WithoutAutomaticResizingBlurhash.story = {
     name: "Without automatic resizing + blurhash",
 };

package/dist/elements/Image/__tests__/getImageURL.tests.js

@@ -1,7 +1,9 @@
-import { getImageURL } from "../helpers/getImageURL";
-describe("getImageURL", () => {
-    it("should return the original url if performResize is true", () => {
-        const url = getImageURL({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var getImageURL_1 = require("../helpers/getImageURL");
+describe("getImageURL", function () {
+    it("should return the original url if performResize is true", function () {
+        var url = (0, getImageURL_1.getImageURL)({
             src: "https://example.com/image.jpg",
             dimensions: { width: 100, height: 100 },
             geminiResizeMode: "fill",
@@ -9,8 +11,8 @@ describe("getImageURL", () => {
         });
         expect(url).toBe("https://d7hftxdivxxvm.cloudfront.net/?height=200&quality=80&resize_to=fill&src=https%3A%2F%2Fexample.com%2Fimage.jpg&width=200");
     });
-    it("should return the original url if performResize is true and the url is already resized", () => {
-        const url = getImageURL({
+    it("should return the original url if performResize is true and the url is already resized", function () {
+        var url = (0, getImageURL_1.getImageURL)({
             src: "https://d7hftxdivxxvm.cloudfront.net/?height=100&quality=80&resize_to=fill&src=https%3A%2F%2Fexample.com%2Fimage.jpg&width=100",
             dimensions: { width: 100, height: 100 },
             geminiResizeMode: "fill",
@@ -18,8 +20,8 @@ describe("getImageURL", () => {
         });
         expect(url).toBe("https://d7hftxdivxxvm.cloudfront.net/?height=100&quality=80&resize_to=fill&src=https%3A%2F%2Fexample.com%2Fimage.jpg&width=100");
     });
-    it("should return the original url if performResize is false", () => {
-        const url = getImageURL({
+    it("should return the original url if performResize is false", function () {
+        var url = (0, getImageURL_1.getImageURL)({
             src: "https://example.com/image.jpg",
             dimensions: { width: 100, height: 100 },
             geminiResizeMode: "fill",

package/dist/elements/Image/helpers/getImageURL.js

@@ -1,17 +1,21 @@
-import { PixelRatio } from "react-native";
-import { createGeminiUrl, imageAlreadyResized, } from "../../../utils/createGeminiUrl";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getImageURL = void 0;
+var react_native_1 = require("react-native");
+var createGeminiUrl_1 = require("../../../utils/createGeminiUrl");
 /**
  * This method retuns a valid image url to be used within an Image Component
  * It handles the case of resizing the image on the fly using Gemini
  */
-export const getImageURL = ({ src, dimensions, geminiResizeMode, performResize, }) => {
-    let uri = src;
+var getImageURL = function (_a) {
+    var src = _a.src, dimensions = _a.dimensions, geminiResizeMode = _a.geminiResizeMode, performResize = _a.performResize;
+    var uri = src;
     if (performResize) {
-        if (!imageAlreadyResized(src)) {
-            uri = createGeminiUrl({
+        if (!(0, createGeminiUrl_1.imageAlreadyResized)(src)) {
+            uri = (0, createGeminiUrl_1.createGeminiUrl)({
                 imageURL: src,
-                width: PixelRatio.getPixelSizeForLayoutSize(dimensions.width),
-                height: PixelRatio.getPixelSizeForLayoutSize(dimensions.height),
+                width: react_native_1.PixelRatio.getPixelSizeForLayoutSize(dimensions.width),
+                height: react_native_1.PixelRatio.getPixelSizeForLayoutSize(dimensions.height),
                 resizeMode: geminiResizeMode,
             });
         }
@@ -23,3 +27,4 @@ export const getImageURL = ({ src, dimensions, geminiResizeMode, performResize,
     }
     return uri;
 };
+exports.getImageURL = getImageURL;