@artsy/palette-mobile 23.14.0 → 24.0.0

package/dist/elements/LegacyTabs/TabBarContainer.js

@@ -1,71 +1,79 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { compact } from "lodash";
-import { useEffect, useRef } from "react";
-import { Animated, ScrollView, View } from "react-native";
-import { useColor } from "../../utils/hooks";
-import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
-import { Box } from "../Box";
-export const TAB_BAR_HEIGHT = 48;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActiveTabBorder = exports.TabBarContainer = exports.TAB_BAR_HEIGHT = void 0;
+exports.spring = spring;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var hooks_1 = require("../../utils/hooks");
+var useScreenDimensions_1 = require("../../utils/hooks/useScreenDimensions");
+var Box_1 = require("../Box");
+exports.TAB_BAR_HEIGHT = 48;
 /**
  * Wraps the respective tabs. Based on StickyTabPageTabBar
  * Usage: ```
  * <TabBarContainer>{props.tabs.map((tab) => <Tab {...tab} />)}</TabContainer>
  * ```
  */
-export const TabBarContainer = ({ children, activeTabIndex, scrollEnabled, tabLayouts, }) => {
-    const color = useColor();
-    const screen = useScreenDimensions();
-    const allTabLayoutsArePresent = tabLayouts.every((l) => l);
-    const scrollViewRef = useRef(null);
-    useEffect(() => {
+var TabBarContainer = function (_a) {
+    var children = _a.children, activeTabIndex = _a.activeTabIndex, scrollEnabled = _a.scrollEnabled, tabLayouts = _a.tabLayouts;
+    var color = (0, hooks_1.useColor)();
+    var screen = (0, useScreenDimensions_1.useScreenDimensions)();
+    var allTabLayoutsArePresent = tabLayouts.every(function (l) { return l; });
+    var scrollViewRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var _a;
         if (allTabLayoutsArePresent) {
             // attempt to center the active tab
-            let left = 0;
-            for (let i = 0; i < activeTabIndex; i++) {
+            var left = 0;
+            for (var i = 0; i < activeTabIndex; i++) {
                 left += tabLayouts[i].width;
             }
-            const center = left + tabLayouts[activeTabIndex].width / 2;
-            const scrollLeft = center - screen.width / 2;
-            scrollViewRef.current?.scrollTo({ x: scrollLeft });
+            var center = left + tabLayouts[activeTabIndex].width / 2;
+            var scrollLeft = center - screen.width / 2;
+            (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ x: scrollLeft });
         }
     }, [activeTabIndex]);
-    return (_jsx(Box, { children: _jsxs(ScrollView, { scrollEnabled: scrollEnabled, ref: scrollViewRef, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: { minWidth: "100%" }, children: [_jsx(View, { style: {
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { scrollEnabled: scrollEnabled, ref: scrollViewRef, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: { minWidth: "100%" }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                         position: "absolute",
                         bottom: 0,
                         left: 0,
                         right: 0,
                         borderBottomWidth: 1,
                         borderBottomColor: color("mono30"),
-                    } }), _jsxs(View, { style: {
+                    } }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
                         flex: 1,
                         minWidth: "100%",
-                        height: TAB_BAR_HEIGHT,
+                        height: exports.TAB_BAR_HEIGHT,
                         flexDirection: "row",
-                    }, children: [children, !!allTabLayoutsArePresent && (_jsx(ActiveTabBorder, { tabLayouts: compact(tabLayouts), activeTabIndex: activeTabIndex }))] })] }) }));
+                    }, children: [children, !!allTabLayoutsArePresent && ((0, jsx_runtime_1.jsx)(exports.ActiveTabBorder, { tabLayouts: (0, lodash_1.compact)(tabLayouts), activeTabIndex: activeTabIndex }))] })] }) }));
 };
-export function spring(node, toValue) {
-    return Animated.spring(node, { toValue, useNativeDriver: true, bounciness: -7, speed: 13 });
+exports.TabBarContainer = TabBarContainer;
+function spring(node, toValue) {
+    return react_native_1.Animated.spring(node, { toValue: toValue, useNativeDriver: true, bounciness: -7, speed: 13 });
 }
 /**
  * Underlines the Active Tab. Same implementation in StickyTabPageTabBar
  */
-export const ActiveTabBorder = ({ tabLayouts, activeTabIndex, }) => {
-    const color = useColor();
+var ActiveTabBorder = function (_a) {
+    var tabLayouts = _a.tabLayouts, activeTabIndex = _a.activeTabIndex;
+    var color = (0, hooks_1.useColor)();
     // We resize this border using the `scaleX` transform property rather than the `width` property, to avoid running
     // animations on the JS thread, so we need to set an initial, pre-transform span for the border.
-    const preTransformSpan = 100;
-    const span = tabLayouts[activeTabIndex].width;
-    let left = 0;
-    for (let i = 0; i < activeTabIndex; i++) {
+    var preTransformSpan = 100;
+    var span = tabLayouts[activeTabIndex].width;
+    var left = 0;
+    for (var i = 0; i < activeTabIndex; i++) {
         left += tabLayouts[i].width;
     }
-    const translateX = useRef(new Animated.Value(left)).current;
-    const scaleX = useRef(new Animated.Value(span / preTransformSpan)).current;
-    useEffect(() => {
-        Animated.parallel([spring(translateX, left), spring(scaleX, span / preTransformSpan)]).start();
+    var translateX = (0, react_1.useRef)(new react_native_1.Animated.Value(left)).current;
+    var scaleX = (0, react_1.useRef)(new react_native_1.Animated.Value(span / preTransformSpan)).current;
+    (0, react_1.useEffect)(function () {
+        react_native_1.Animated.parallel([spring(translateX, left), spring(scaleX, span / preTransformSpan)]).start();
     }, [left, span]);
-    const scaleXOffset = Animated.divide(Animated.subtract(preTransformSpan, Animated.multiply(scaleX, preTransformSpan)), 2);
-    return (_jsx(Animated.View, { style: {
+    var scaleXOffset = react_native_1.Animated.divide(react_native_1.Animated.subtract(preTransformSpan, react_native_1.Animated.multiply(scaleX, preTransformSpan)), 2);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
             height: 1,
             width: preTransformSpan,
             backgroundColor: color("mono100"),
@@ -73,11 +81,12 @@ export const ActiveTabBorder = ({ tabLayouts, activeTabIndex, }) => {
             bottom: 0,
             transform: [
                 {
-                    translateX: Animated.subtract(translateX, scaleXOffset),
+                    translateX: react_native_1.Animated.subtract(translateX, scaleXOffset),
                 },
                 {
-                    scaleX,
+                    scaleX: scaleX,
                 },
             ],
         } }));
 };
+exports.ActiveTabBorder = ActiveTabBorder;

package/dist/elements/LegacyTabs/index.js

@@ -1,10 +1,39 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ContentTabs } from "./ContentTabs";
-import { NavigationalTabs } from "./NavigationalTabs";
-import { StepTabs } from "./StepTabs";
-import { TabV3 } from "./Tab";
-export { NavigationalTabs, ContentTabs, StepTabs };
-export const Tab = ({ ...props }) => {
-    return _jsx(TabV3, { ...props });
+"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);
 };
-export const TAB_BAR_HEIGHT = 44;
+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.TAB_BAR_HEIGHT = exports.Tab = exports.StepTabs = exports.ContentTabs = exports.NavigationalTabs = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ContentTabs_1 = require("./ContentTabs");
+Object.defineProperty(exports, "ContentTabs", { enumerable: true, get: function () { return ContentTabs_1.ContentTabs; } });
+var NavigationalTabs_1 = require("./NavigationalTabs");
+Object.defineProperty(exports, "NavigationalTabs", { enumerable: true, get: function () { return NavigationalTabs_1.NavigationalTabs; } });
+var StepTabs_1 = require("./StepTabs");
+Object.defineProperty(exports, "StepTabs", { enumerable: true, get: function () { return StepTabs_1.StepTabs; } });
+var Tab_1 = require("./Tab");
+var Tab = function (_a) {
+    var props = __rest(_a, []);
+    return (0, jsx_runtime_1.jsx)(Tab_1.TabV3, __assign({}, props));
+};
+exports.Tab = Tab;
+exports.TAB_BAR_HEIGHT = 44;

package/dist/elements/List/BulletedItem.js

@@ -1,8 +1,35 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { bullet } from "../../utils/text";
-import { Flex } from "../Flex";
-import { Spacer } from "../Spacer";
-import { Text } from "../Text";
-export const BulletedItem = ({ children, color = "mono60", ...otherFlexProps }) => {
-    return (_jsxs(Flex, { flexDirection: "row", px: 1, ...otherFlexProps, children: [_jsx(Text, { variant: "sm", color: color, children: bullet }), _jsx(Spacer, { x: 1 }), _jsx(Text, { variant: "sm", color: color, children: children })] }));
+"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.BulletedItem = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var text_1 = require("../../utils/text");
+var Flex_1 = require("../Flex");
+var Spacer_1 = require("../Spacer");
+var Text_1 = require("../Text");
+var BulletedItem = function (_a) {
+    var children = _a.children, _b = _a.color, color = _b === void 0 ? "mono60" : _b, otherFlexProps = __rest(_a, ["children", "color"]);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, __assign({ flexDirection: "row", px: 1 }, otherFlexProps, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm", color: color, children: text_1.bullet }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm", color: color, children: children })] })));
+};
+exports.BulletedItem = BulletedItem;

package/dist/elements/List/List.stories.js

@@ -1,10 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BulletedItem } from "./BulletedItem";
-import { List } from "../../storybook/helpers";
-import { Flex } from "../Flex";
-import { Spacer } from "../Spacer";
-import { Text } from "../Text";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._BulletedItem = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var BulletedItem_1 = require("./BulletedItem");
+var helpers_1 = require("../../storybook/helpers");
+var Flex_1 = require("../Flex");
+var Spacer_1 = require("../Spacer");
+var Text_1 = require("../Text");
+exports.default = {
     title: "List",
 };
-export const _BulletedItem = () => (_jsx(List, { children: _jsxs(Flex, { children: [_jsx(BulletedItem, { children: "Bulleted Item text" }), _jsx(BulletedItem, { children: "The good thing about Bulleted Item text is that the bullet is aligned separately from the rest of the text" }), _jsx(Spacer, { y: 2 }), _jsx(Text, { variant: "sm", mx: 1, color: "mono60", children: "\u2022 Simple text acting as bulleted item" }), _jsx(Text, { variant: "sm", mx: 1, color: "mono60", children: "\u2022 Simple text acting as bulleted item longer text with a bullet infront of it, just like that. and that ain't so pretty, riiiight?!" })] }) }));
+var _BulletedItem = function () { return ((0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsx)(BulletedItem_1.BulletedItem, { children: "Bulleted Item text" }), (0, jsx_runtime_1.jsx)(BulletedItem_1.BulletedItem, { children: "The good thing about Bulleted Item text is that the bullet is aligned separately from the rest of the text" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 2 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm", mx: 1, color: "mono60", children: "\u2022 Simple text acting as bulleted item" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm", mx: 1, color: "mono60", children: "\u2022 Simple text acting as bulleted item longer text with a bullet infront of it, just like that. and that ain't so pretty, riiiight?!" })] }) })); };
+exports._BulletedItem = _BulletedItem;

package/dist/elements/List/index.js

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

package/dist/elements/MeasuredView/MeasuredView.js

@@ -1,25 +1,31 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { useWindowDimensions } from "react-native";
-import { isTestEnvironment } from "../../utils/tests/isTestEnvironment";
-import { Box } from "../Box";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOffscreenStyle = exports.MeasuredView = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var isTestEnvironment_1 = require("../../utils/tests/isTestEnvironment");
+var Box_1 = require("../Box");
 /**
  * A view that renders off-screen, measures the width and height of the view, and reports it back.
  * Note: it is rendering just null when in test mode.
  */
-export const MeasuredView = ({ children, setMeasuredState, show }) => {
-    const offscreenStyle = useOffscreenStyle(show);
-    const onLayout = useCallback((event) => {
+var MeasuredView = function (_a) {
+    var children = _a.children, setMeasuredState = _a.setMeasuredState, show = _a.show;
+    var offscreenStyle = (0, exports.useOffscreenStyle)(show);
+    var onLayout = (0, react_1.useCallback)(function (event) {
         setMeasuredState(event.nativeEvent.layout);
     }, []);
-    if (isTestEnvironment())
+    if ((0, isTestEnvironment_1.isTestEnvironment)())
         return null;
-    return (_jsx(Box, { style: offscreenStyle, backgroundColor: "pink", onLayout: onLayout, accessibilityElementsHidden: true, children: children }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { style: offscreenStyle, backgroundColor: "pink", onLayout: onLayout, accessibilityElementsHidden: true, children: children }));
 };
-export const useOffscreenStyle = (notOffscreen) => {
-    const { width, height } = useWindowDimensions();
+exports.MeasuredView = MeasuredView;
+var useOffscreenStyle = function (notOffscreen) {
+    var _a = (0, react_native_1.useWindowDimensions)(), width = _a.width, height = _a.height;
     if (notOffscreen) {
         return {};
     }
     return { position: "absolute", top: width + height, left: width + height };
 };
+exports.useOffscreenStyle = useOffscreenStyle;

package/dist/elements/MeasuredView/index.js

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

package/dist/elements/MenuItem/MenuItem.js

@@ -1,10 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronSmallRightIcon } from "@artsy/icons/native";
-import { useColor } from "../../utils/hooks";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-import { Touchable } from "../Touchable";
-export const MenuItem = ({ title, text, value, onPress, disabled = false, chevron = _jsx(ChevronSmallRightIcon, { fill: "mono60" }), }) => {
-    const color = useColor();
-    return (_jsx(Touchable, { accessibilityRole: "button", accessibilityState: { disabled }, accessibilityLabel: "Menu item ${title}", onPress: onPress, underlayColor: color("mono5"), disabled: disabled, children: _jsxs(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", py: 2, px: 2, pr: "15px", children: [_jsx(Flex, { flexDirection: "row", mr: 2, children: _jsx(Text, { variant: "md", color: "onBackgroundHigh", children: title }) }), !!value && (_jsx(Flex, { flex: 1, children: _jsx(Text, { variant: "md", color: "mono60", numberOfLines: 1, textAlign: "right", children: value }) })), !!(onPress && chevron) && _jsx(Flex, { ml: 1, children: chevron }), !!text && (_jsx(Text, { variant: "md", color: color("mono60"), children: text }))] }) }));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var hooks_1 = require("../../utils/hooks");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+var Touchable_1 = require("../Touchable");
+var MenuItem = function (_a) {
+    var title = _a.title, text = _a.text, value = _a.value, onPress = _a.onPress, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.chevron, chevron = _c === void 0 ? (0, jsx_runtime_1.jsx)(native_1.ChevronSmallRightIcon, { fill: "mono60" }) : _c;
+    var color = (0, hooks_1.useColor)();
+    return ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { accessibilityRole: "button", accessibilityState: { disabled: disabled }, accessibilityLabel: "Menu item ${title}", onPress: onPress, underlayColor: color("mono5"), disabled: disabled, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", py: 2, px: 2, pr: "15px", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", mr: 2, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", color: "onBackgroundHigh", children: title }) }), !!value && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", color: "mono60", numberOfLines: 1, textAlign: "right", children: value }) })), !!(onPress && chevron) && (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: 1, children: chevron }), !!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", color: color("mono60"), children: text }))] }) }));
 };
+exports.MenuItem = MenuItem;

package/dist/elements/MenuItem/MenuItem.stories.js

@@ -1,7 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { MenuItem } from "./MenuItem";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Variations = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var MenuItem_1 = require("./MenuItem");
+exports.default = {
     title: "Menu Item",
-    component: MenuItem,
+    component: MenuItem_1.MenuItem,
 };
-export const Variations = () => (_jsxs(_Fragment, { children: [_jsx(MenuItem, { title: "A title" }), _jsx(MenuItem, { title: "A title", value: "The value" })] }));
+var Variations = function () { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { title: "A title" }), (0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { title: "A title", value: "The value" })] })); };
+exports.Variations = Variations;

package/dist/elements/MenuItem/index.js

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

package/dist/elements/Message/Message.js

@@ -1,26 +1,41 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CloseIcon } from "@artsy/icons/native";
-import { useRef, useState } from "react";
-import { Animated, Easing, TouchableOpacity } from "react-native";
-import { useColor } from "../../utils/hooks/useColor";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-export const Message = ({ bodyTextStyle, children, containerStyle, IconComponent, iconPosition = "left", onClose, showCloseButton = false, testID, text, title, titleStyle, variant = "default", }) => {
-    const color = useColor();
-    const [tempHeight, setTempHeight] = useState(undefined);
-    const scaleYAnim = useRef(new Animated.Value(0)).current;
-    const handleClose = () => {
-        Animated.timing(scaleYAnim, {
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Message = 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 useColor_1 = require("../../utils/hooks/useColor");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+var Message = function (_a) {
+    var bodyTextStyle = _a.bodyTextStyle, children = _a.children, containerStyle = _a.containerStyle, IconComponent = _a.IconComponent, _b = _a.iconPosition, iconPosition = _b === void 0 ? "left" : _b, onClose = _a.onClose, _c = _a.showCloseButton, showCloseButton = _c === void 0 ? false : _c, testID = _a.testID, text = _a.text, title = _a.title, titleStyle = _a.titleStyle, _d = _a.variant, variant = _d === void 0 ? "default" : _d;
+    var color = (0, useColor_1.useColor)();
+    var _e = (0, react_1.useState)(undefined), tempHeight = _e[0], setTempHeight = _e[1];
+    var scaleYAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    var handleClose = function () {
+        react_native_1.Animated.timing(scaleYAnim, {
             toValue: 1,
             duration: 150,
-            easing: Easing.linear,
+            easing: react_native_1.Easing.linear,
             useNativeDriver: true,
-        }).start(() => {
+        }).start(function () {
             setTempHeight(0);
         });
-        onClose?.();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
     };
-    return (_jsx(Animated.View, { testID: testID, style: {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { testID: testID, style: {
             height: tempHeight,
             transform: [
                 {
@@ -30,9 +45,10 @@ export const Message = ({ bodyTextStyle, children, containerStyle, IconComponent
                     }),
                 },
             ],
-        }, children: _jsxs(Flex, { px: 2, backgroundColor: color(colors[variant].background), ...containerStyle, children: [_jsxs(Flex, { py: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Flex, { flex: 1, children: [_jsxs(Flex, { flexDirection: "row", children: [!!IconComponent && iconPosition === "left" && (_jsx(Flex, { mr: 1, testID: "icon-component-left", children: _jsx(IconComponent, {}) })), !!title && (_jsx(Text, { pr: 2, variant: "xs", color: color(colors[variant].title), ...titleStyle, children: title }))] }), !!text && (_jsx(Text, { variant: "xs", color: color(colors[variant].text), ...bodyTextStyle, children: text })), children] }), !!IconComponent && iconPosition === "right" && (_jsx(Flex, { mr: showCloseButton ? 1 : 0, justifyContent: "center", testID: "icon-component-right", children: _jsx(IconComponent, {}) })), !!showCloseButton && (_jsx(Flex, { style: { marginTop: 2 }, children: _jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityHint: "Dismiss message", testID: "Message-close-button", onPress: handleClose, hitSlop: { bottom: 10, right: 10, left: 10, top: 10 }, children: _jsx(CloseIcon, { fill: colors[variant].icon }) }) }))] }), !!IconComponent && iconPosition === "bottom" && (_jsx(Flex, { mb: 1, justifyContent: "center", testID: "icon-component-bottom", children: _jsx(IconComponent, {}) }))] }) }));
+        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, __assign({ px: 2, backgroundColor: color(colors[variant].background) }, containerStyle, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { py: 1, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [!!IconComponent && iconPosition === "left" && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: 1, testID: "icon-component-left", children: (0, jsx_runtime_1.jsx)(IconComponent, {}) })), !!title && ((0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ pr: 2, variant: "xs", color: color(colors[variant].title) }, titleStyle, { children: title })))] }), !!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ variant: "xs", color: color(colors[variant].text) }, bodyTextStyle, { children: text }))), children] }), !!IconComponent && iconPosition === "right" && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: showCloseButton ? 1 : 0, justifyContent: "center", testID: "icon-component-right", children: (0, jsx_runtime_1.jsx)(IconComponent, {}) })), !!showCloseButton && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: { marginTop: 2 }, children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { accessibilityRole: "button", accessibilityHint: "Dismiss message", testID: "Message-close-button", onPress: handleClose, hitSlop: { bottom: 10, right: 10, left: 10, top: 10 }, children: (0, jsx_runtime_1.jsx)(native_1.CloseIcon, { fill: colors[variant].icon }) }) }))] }), !!IconComponent && iconPosition === "bottom" && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mb: 1, justifyContent: "center", testID: "icon-component-bottom", children: (0, jsx_runtime_1.jsx)(IconComponent, {}) }))] })) }));
 };
-const colors = {
+exports.Message = Message;
+var colors = {
     default: {
         background: "mono5",
         title: "mono100",

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

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    decorators: import("@storybook/react").Decorator[];
+    decorators: DecoratorFunction<import("@storybook/react/*").ReactRenderer, TArgs>[];
 };
 export default _default;
 export declare const Variants: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Message/Message.stories.js

@@ -1,21 +1,27 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { InfoIcon } from "@artsy/icons/native";
-import { Text } from "react-native";
-import { Message } from "./Message";
-import { withTheme } from "../../storybook/decorators";
-import { List } from "../../storybook/helpers";
-import { Button } from "../Button";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconComponentPosition = exports.ColorVariants = exports.Variants = 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 Message_1 = require("./Message");
+var decorators_1 = require("../../storybook/decorators");
+var helpers_1 = require("../../storybook/helpers");
+var Button_1 = require("../Button");
+exports.default = {
     title: "Message",
-    decorators: [withTheme],
+    decorators: [decorators_1.withTheme],
 };
-export const Variants = () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [_jsx(Message, { variant: "default", title: "Without Close Button", text: "Text" }), _jsx(Message, { variant: "default", title: "Without Close Button", children: _jsx(Text, { children: "Text" }) }), _jsx(Message, { variant: "default", text: "Without title" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Title", text: "Text" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Title", text: "Very very very very very very very very very very very very very very long text" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Very very very very very very very very very very very very very very long title", text: "Text" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Very very very very very very very very very very very very very very long title", text: "Very very very very very very very very very very very very very very long text" })] }));
-export const ColorVariants = () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [_jsx(Message, { variant: "default", showCloseButton: true, title: "Default", text: "Text" }), _jsx(Message, { variant: "info", showCloseButton: true, title: "Info", text: "Text" }), _jsx(Message, { variant: "success", showCloseButton: true, title: "Success", text: "Text" }), _jsx(Message, { variant: "warning", showCloseButton: true, title: "Warning", text: "Text" }), _jsx(Message, { variant: "error", showCloseButton: true, title: "Error", text: "Text" }), _jsx(Message, { variant: "dark", showCloseButton: true, title: "Error", text: "Text" })] }));
-export const IconComponentPosition = () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [_jsx(Message, { variant: "default", showCloseButton: true, title: "Default position", text: "Text", IconComponent: () => _jsx(InfoIcon, {}) }), _jsx(Message, { iconPosition: "right", variant: "default", showCloseButton: true, title: "Rign", text: "Text", IconComponent: () => _jsx(Button, { size: "small", children: "Click" }) }), _jsx(Message, { iconPosition: "bottom", variant: "default", showCloseButton: true, title: "Bottom", text: "Text", IconComponent: () => {
-                return _jsx(Button, { size: "small", children: "Click" });
-            } }), _jsx(Message, { iconPosition: "bottom", variant: "dark", showCloseButton: true, title: "Bottom, dark", text: "Text", IconComponent: () => {
-                return (_jsx(Button, { variant: "outlineLight", size: "small", children: "Click" }));
-            } })] }));
-IconComponentPosition.story = {
+var Variants = function () { return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [(0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", title: "Without Close Button", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", title: "Without Close Button", children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { children: "Text" }) }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", text: "Without title" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Title", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Title", text: "Very very very very very very very very very very very very very very long text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Very very very very very very very very very very very very very very long title", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Very very very very very very very very very very very very very very long title", text: "Very very very very very very very very very very very very very very long text" })] })); };
+exports.Variants = Variants;
+var ColorVariants = function () { return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [(0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Default", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "info", showCloseButton: true, title: "Info", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "success", showCloseButton: true, title: "Success", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "warning", showCloseButton: true, title: "Warning", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "error", showCloseButton: true, title: "Error", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "dark", showCloseButton: true, title: "Error", text: "Text" })] })); };
+exports.ColorVariants = ColorVariants;
+var IconComponentPosition = function () { return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [(0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Default position", text: "Text", IconComponent: function () { return (0, jsx_runtime_1.jsx)(native_1.InfoIcon, {}); } }), (0, jsx_runtime_1.jsx)(Message_1.Message, { iconPosition: "right", variant: "default", showCloseButton: true, title: "Rign", text: "Text", IconComponent: function () { return (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", children: "Click" }); } }), (0, jsx_runtime_1.jsx)(Message_1.Message, { iconPosition: "bottom", variant: "default", showCloseButton: true, title: "Bottom", text: "Text", IconComponent: function () {
+                return (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", children: "Click" });
+            } }), (0, jsx_runtime_1.jsx)(Message_1.Message, { iconPosition: "bottom", variant: "dark", showCloseButton: true, title: "Bottom, dark", text: "Text", IconComponent: function () {
+                return ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "outlineLight", size: "small", children: "Click" }));
+            } })] })); };
+exports.IconComponentPosition = IconComponentPosition;
+exports.IconComponentPosition.story = {
     name: "IconComponent position",
 };