@artsy/palette-mobile 23.14.0 → 24.0.0

package/dist/elements/Message/Message.tests.js

@@ -1,43 +1,45 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { fireEvent, screen } from "@testing-library/react-native";
-import { Message } from "./Message";
-import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
-describe("Message", () => {
-    it("it renders", () => {
-        renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text" }));
-        expect(screen.getByText("title")).toBeOnTheScreen();
-        expect(screen.getByText("text")).toBeOnTheScreen();
-    });
-    it("does not show close button when !showCloseButton", () => {
-        renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text" }));
-        expect(screen.queryByTestId("Message-close-button")).not.toBeOnTheScreen();
-    });
-    it("shows close button when showCloseButton", () => {
-        renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text", showCloseButton: true }));
-        expect(screen.getByTestId("Message-close-button")).toBeOnTheScreen();
-    });
-    it("fires onClose press event", () => {
-        const onClose = jest.fn();
-        renderWithWrappers(_jsx(Message, { variant: "default", onClose: onClose, title: "title", text: "text", showCloseButton: true }));
-        fireEvent.press(screen.getByTestId("Message-close-button"));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_1 = require("@testing-library/react-native");
+var Message_1 = require("./Message");
+var renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
+describe("Message", function () {
+    it("it renders", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", title: "title", text: "text" }));
+        expect(react_native_1.screen.getByText("title")).toBeOnTheScreen();
+        expect(react_native_1.screen.getByText("text")).toBeOnTheScreen();
+    });
+    it("does not show close button when !showCloseButton", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", title: "title", text: "text" }));
+        expect(react_native_1.screen.queryByTestId("Message-close-button")).not.toBeOnTheScreen();
+    });
+    it("shows close button when showCloseButton", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", title: "title", text: "text", showCloseButton: true }));
+        expect(react_native_1.screen.getByTestId("Message-close-button")).toBeOnTheScreen();
+    });
+    it("fires onClose press event", function () {
+        var onClose = jest.fn();
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", onClose: onClose, title: "title", text: "text", showCloseButton: true }));
+        react_native_1.fireEvent.press(react_native_1.screen.getByTestId("Message-close-button"));
         expect(onClose).toHaveBeenCalled();
     });
-    it("shows icon component when IconComponent left", () => {
-        renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text", showCloseButton: true, IconComponent: () => _jsx(_Fragment, {}) }));
-        expect(screen.getByTestId("icon-component-left")).toBeOnTheScreen();
+    it("shows icon component when IconComponent left", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", title: "title", text: "text", showCloseButton: true, IconComponent: function () { return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}); } }));
+        expect(react_native_1.screen.getByTestId("icon-component-left")).toBeOnTheScreen();
     });
-    it("shows icon component when IconComponent right", () => {
-        renderWithWrappers(_jsx(Message, { iconPosition: "right", variant: "default", title: "title", text: "text", showCloseButton: true, IconComponent: () => _jsx(_Fragment, {}) }));
-        expect(screen.getByTestId("icon-component-right")).toBeOnTheScreen();
+    it("shows icon component when IconComponent right", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Message_1.Message, { iconPosition: "right", variant: "default", title: "title", text: "text", showCloseButton: true, IconComponent: function () { return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}); } }));
+        expect(react_native_1.screen.getByTestId("icon-component-right")).toBeOnTheScreen();
     });
-    it("shows icon component when IconComponent bottom", () => {
-        renderWithWrappers(_jsx(Message, { iconPosition: "bottom", variant: "default", title: "title", text: "text", showCloseButton: true, IconComponent: () => _jsx(_Fragment, {}) }));
-        expect(screen.getByTestId("icon-component-bottom")).toBeOnTheScreen();
+    it("shows icon component when IconComponent bottom", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Message_1.Message, { iconPosition: "bottom", variant: "default", title: "title", text: "text", showCloseButton: true, IconComponent: function () { return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}); } }));
+        expect(react_native_1.screen.getByTestId("icon-component-bottom")).toBeOnTheScreen();
     });
-    it("does not show icon component when !IconComponent ", () => {
-        renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text", showCloseButton: true }));
-        expect(screen.queryByTestId("icon-component-left")).not.toBeOnTheScreen();
-        expect(screen.queryByTestId("icon-component-right")).not.toBeOnTheScreen();
-        expect(screen.queryByTestId("icon-component-bottom")).not.toBeOnTheScreen();
+    it("does not show icon component when !IconComponent ", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", title: "title", text: "text", showCloseButton: true }));
+        expect(react_native_1.screen.queryByTestId("icon-component-left")).not.toBeOnTheScreen();
+        expect(react_native_1.screen.queryByTestId("icon-component-right")).not.toBeOnTheScreen();
+        expect(react_native_1.screen.queryByTestId("icon-component-bottom")).not.toBeOnTheScreen();
     });
 });

package/dist/elements/Message/index.js

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

package/dist/elements/Pill/Pill.js

@@ -1,14 +1,79 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CloseIcon } from "@artsy/icons/native";
-import themeGet from "@styled-system/theme-get";
-import { MotiPressable } from "moti/interactions";
-import { useMemo } from "react";
-import { PixelRatio, Platform } from "react-native";
-import styled, { css } from "styled-components";
-import { Flex } from "../Flex";
-import { Image } from "../Image";
-import { Text } from "../Text";
-export const PILL_VARIANT_NAMES = [
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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.Pill = exports.PILL_VARIANT_NAMES = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var theme_get_1 = __importDefault(require("@styled-system/theme-get"));
+var interactions_1 = require("moti/interactions");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var styled_components_1 = __importStar(require("styled-components"));
+var Flex_1 = require("../Flex");
+var Image_1 = require("../Image");
+var Text_1 = require("../Text");
+exports.PILL_VARIANT_NAMES = [
     "badge",
     "default",
     "dotted",
@@ -18,154 +83,67 @@ export const PILL_VARIANT_NAMES = [
     "onboarding",
     "link",
 ];
-export const Pill = ({ variant = "default", src, selected, disabled, Icon, children, onPress, ...rest }) => {
-    const stateString = selected ? "selected" : disabled ? "disabled" : "default";
-    const color = TEXT_COLOR[variant][stateString];
-    const showCloseIcon = (variant === "filter" && !disabled) || (["profile"].includes(variant) && selected);
-    return (_jsx(Flex, { ...rest, children: _jsxs(Container, { variant: variant, selected: selected, disabled: disabled, onPress: onPress, animate: useMemo(() => ({ hovered, pressed }) => {
-                "worklet";
-                return {
-                    opacity: hovered || pressed ? 0.5 : 1,
+var Pill = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? "default" : _b, src = _a.src, selected = _a.selected, disabled = _a.disabled, Icon = _a.Icon, children = _a.children, onPress = _a.onPress, rest = __rest(_a, ["variant", "src", "selected", "disabled", "Icon", "children", "onPress"]);
+    var stateString = selected ? "selected" : disabled ? "disabled" : "default";
+    var color = TEXT_COLOR[variant][stateString];
+    var showCloseIcon = (variant === "filter" && !disabled) || (["profile"].includes(variant) && selected);
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({}, rest, { children: (0, jsx_runtime_1.jsxs)(Container, { variant: variant, selected: selected, disabled: disabled, onPress: onPress, animate: (0, react_1.useMemo)(function () {
+                return function (_a) {
+                    "worklet";
+                    var hovered = _a.hovered, pressed = _a.pressed;
+                    return {
+                        opacity: hovered || pressed ? 0.5 : 1,
+                    };
                 };
-            }, []), children: [variant === "profile" && src && (_jsx(Flex, { overflow: "hidden", borderRadius: 50, height: 30, width: 30, mr: 1, children: _jsx(Thumbnail, { src: src, height: 30, width: 30 }) })), Icon && _jsx(Icon, { fill: color, ml: -0.5, mr: 0.5 }), _jsx(Text, { variant: "xs", color: color, style: Platform.select({
+            }, []), children: [variant === "profile" && src && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { overflow: "hidden", borderRadius: 50, height: 30, width: 30, mr: 1, children: (0, jsx_runtime_1.jsx)(Thumbnail, { src: src, height: 30, width: 30 }) })), Icon && (0, jsx_runtime_1.jsx)(Icon, { fill: color, ml: -0.5, mr: 0.5 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: color, style: react_native_1.Platform.select({
                         android: { lineHeight: undefined },
                         default: {},
-                    }), children: children }), showCloseIcon && _jsx(CloseIcon, { fill: color, ml: 0.5, width: 15, height: 15 })] }) }));
+                    }), children: children }), showCloseIcon && (0, jsx_runtime_1.jsx)(native_1.CloseIcon, { fill: color, ml: 0.5, width: 15, height: 15 })] }) })));
 };
-const Container = styled(MotiPressable) `
-  align-items: center;
-  border: 1px solid ${themeGet("colors.mono15")};
-  flex-direction: row;
-  justify-content: center;
-  text-align: center;
-
-  ${(props) => {
-    const states = PILL_VARIANTS[props.variant];
-    return css `
-      ${states.default}
-      ${props.selected && states.selected}
-      ${props.disabled && states.disabled}
-    `;
-}}
-`;
-const Thumbnail = styled(Image) `
-  background-color: ${themeGet("colors.mono30")};
-`;
-const PILL_STATES = {
-    default: css `
-    border-radius: 15px;
-    height: ${PixelRatio.getFontScale() * 30}px;
-    padding-horizontal: 15px;
-  `,
-    selected: css `
-    border-color: ${themeGet("colors.blue100")};
-    background-color: ${themeGet("colors.blue100")};
-  `,
-    disabled: css `
-    background-color: ${themeGet("colors.mono5")};
-    border-color: ${themeGet("colors.mono5")};
-  `,
+exports.Pill = Pill;
+var Container = (0, styled_components_1.default)(interactions_1.MotiPressable)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid ", ";\n  flex-direction: row;\n  justify-content: center;\n  text-align: center;\n\n  ", "\n"], ["\n  align-items: center;\n  border: 1px solid ", ";\n  flex-direction: row;\n  justify-content: center;\n  text-align: center;\n\n  ", "\n"])), (0, theme_get_1.default)("colors.mono15"), function (props) {
+    var states = PILL_VARIANTS[props.variant];
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n    "])), states.default, props.selected && states.selected, props.disabled && states.disabled);
+});
+var Thumbnail = (0, styled_components_1.default)(Image_1.Image)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), (0, theme_get_1.default)("colors.mono30"));
+var PILL_STATES = {
+    default: (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    border-radius: 15px;\n    height: ", "px;\n    padding-horizontal: 15px;\n  "], ["\n    border-radius: 15px;\n    height: ", "px;\n    padding-horizontal: 15px;\n  "])), react_native_1.PixelRatio.getFontScale() * 30),
+    selected: (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    border-color: ", ";\n    background-color: ", ";\n  "], ["\n    border-color: ", ";\n    background-color: ", ";\n  "])), (0, theme_get_1.default)("colors.blue100"), (0, theme_get_1.default)("colors.blue100")),
+    disabled: (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    background-color: ", ";\n    border-color: ", ";\n  "], ["\n    background-color: ", ";\n    border-color: ", ";\n  "])), (0, theme_get_1.default)("colors.mono5"), (0, theme_get_1.default)("colors.mono5")),
 };
-const PILL_VARIANTS = {
+var PILL_VARIANTS = {
     default: PILL_STATES,
-    onboarding: {
-        ...PILL_STATES,
-        default: css `
-      ${PILL_STATES.default}
-      border-radius: 20px;
-      height: 40px;
-      border-color: ${themeGet("colors.mono60")};
-    `,
-    },
-    dotted: {
-        ...PILL_STATES,
-        default: css `
-      ${PILL_STATES.default}
-      border-style: dashed;
-    `,
-        selected: css `
-      ${PILL_STATES.selected}
-      background-color: ${themeGet("colors.mono10")};
-      border-color: ${themeGet("colors.mono10")};
-    `,
-    },
-    search: {
-        ...PILL_STATES,
-    },
-    profile: {
-        ...PILL_STATES,
-        default: css `
-      background-color: ${themeGet("colors.mono5")};
-      border-color: ${themeGet("colors.mono5")};
-      border-radius: 25px;
-      height: 50px;
-      padding: 0 ${themeGet("space.1")};
-    `,
-        selected: css `
-      border-color: ${themeGet("colors.blue100")};
-    `,
-    },
+    onboarding: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      ", "\n      border-radius: 20px;\n      height: 40px;\n      border-color: ", ";\n    "], ["\n      ", "\n      border-radius: 20px;\n      height: 40px;\n      border-color: ", ";\n    "])), PILL_STATES.default, (0, theme_get_1.default)("colors.mono60")) }),
+    dotted: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      ", "\n      border-style: dashed;\n    "], ["\n      ", "\n      border-style: dashed;\n    "])), PILL_STATES.default), selected: (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      ", "\n      background-color: ", ";\n      border-color: ", ";\n    "], ["\n      ", "\n      background-color: ", ";\n      border-color: ", ";\n    "])), PILL_STATES.selected, (0, theme_get_1.default)("colors.mono10"), (0, theme_get_1.default)("colors.mono10")) }),
+    search: __assign({}, PILL_STATES),
+    profile: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      background-color: ", ";\n      border-color: ", ";\n      border-radius: 25px;\n      height: 50px;\n      padding: 0 ", ";\n    "], ["\n      background-color: ", ";\n      border-color: ", ";\n      border-radius: 25px;\n      height: 50px;\n      padding: 0 ", ";\n    "])), (0, theme_get_1.default)("colors.mono5"), (0, theme_get_1.default)("colors.mono5"), (0, theme_get_1.default)("space.1")), selected: (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      border-color: ", ";\n    "], ["\n      border-color: ", ";\n    "])), (0, theme_get_1.default)("colors.blue100")) }),
     badge: {
-        default: css `
-      ${PILL_STATES.default}
-      border-radius: 15px;
-      background-color: ${themeGet("colors.blue10")};
-      border-color: ${themeGet("colors.blue10")};
-    `,
-        selected: css `
-      background-color: ${themeGet("colors.blue150")};
-      border-color: ${themeGet("colors.blue150")};
-    `,
-        disabled: css `
-      background-color: ${themeGet("colors.blue10")};
-      border-color: ${themeGet("colors.blue10")};
-    `,
-    },
-    filter: {
-        ...PILL_STATES,
-        default: css `
-      height: 30px;
-      padding: 0 ${themeGet("space.1")};
-    `,
-        disabled: css `
-      border-color: ${themeGet("colors.mono60")};
-    `,
-    },
-    link: {
-        ...PILL_STATES,
-        default: css `
-      ${PILL_STATES.default}
-      border-color: ${themeGet("colors.mono5")};
-      background-color: ${themeGet("colors.mono5")};
-    `,
+        default: (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      ", "\n      border-radius: 15px;\n      background-color: ", ";\n      border-color: ", ";\n    "], ["\n      ", "\n      border-radius: 15px;\n      background-color: ", ";\n      border-color: ", ";\n    "])), PILL_STATES.default, (0, theme_get_1.default)("colors.blue10"), (0, theme_get_1.default)("colors.blue10")),
+        selected: (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      background-color: ", ";\n      border-color: ", ";\n    "], ["\n      background-color: ", ";\n      border-color: ", ";\n    "])), (0, theme_get_1.default)("colors.blue150"), (0, theme_get_1.default)("colors.blue150")),
+        disabled: (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      background-color: ", ";\n      border-color: ", ";\n    "], ["\n      background-color: ", ";\n      border-color: ", ";\n    "])), (0, theme_get_1.default)("colors.blue10"), (0, theme_get_1.default)("colors.blue10")),
     },
+    filter: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      height: 30px;\n      padding: 0 ", ";\n    "], ["\n      height: 30px;\n      padding: 0 ", ";\n    "])), (0, theme_get_1.default)("space.1")), disabled: (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      border-color: ", ";\n    "], ["\n      border-color: ", ";\n    "])), (0, theme_get_1.default)("colors.mono60")) }),
+    link: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      ", "\n      border-color: ", ";\n      background-color: ", ";\n    "], ["\n      ", "\n      border-color: ", ";\n      background-color: ", ";\n    "])), PILL_STATES.default, (0, theme_get_1.default)("colors.mono5"), (0, theme_get_1.default)("colors.mono5")) }),
 };
-const defaultColors = {
+var defaultColors = {
     default: "mono100",
     // @ts-expect-error We want to set the color to white here regardless of the theme
     selected: "white",
     disabled: "mono60",
 };
-const TEXT_COLOR = {
+var TEXT_COLOR = {
     default: defaultColors,
     onboarding: defaultColors,
-    dotted: {
-        ...defaultColors,
-        selected: "mono100",
-    },
+    dotted: __assign(__assign({}, defaultColors), { selected: "mono100" }),
     search: defaultColors,
-    profile: {
-        ...defaultColors,
-        selected: "mono100",
-    },
+    profile: __assign(__assign({}, defaultColors), { selected: "mono100" }),
     badge: {
         default: "blue100",
         selected: "mono0",
         disabled: "blue100",
     },
-    filter: {
-        ...defaultColors,
-        disabled: "mono100",
-    },
+    filter: __assign(__assign({}, defaultColors), { disabled: "mono100" }),
     link: defaultColors,
 };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;

package/dist/elements/Pill/Pill.stories.js

@@ -1,32 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { GraphIcon } from "@artsy/icons/native";
-import { useState } from "react";
-import { Pill } from "./Pill";
-import { List } from "../../storybook/helpers";
-import { Flex } from "../Flex";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = exports.Onboarding = exports.ControlledState = exports.ProfileWithImage = exports.Variants = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var react_1 = require("react");
+var Pill_1 = require("./Pill");
+var helpers_1 = require("../../storybook/helpers");
+var Flex_1 = require("../Flex");
+exports.default = {
     title: "Pill",
 };
-export const Variants = () => (_jsxs(List, { contentContainerStyle: {
+var Variants = function () { return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: {
         marginHorizontal: 20,
         justifyContent: "flex-start",
         alignItems: "flex-start",
-    }, children: [_jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { children: "Default" }), _jsx(Pill, { selected: true, children: "Selected" }), _jsx(Pill, { disabled: true, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "filter", children: "Filter" }), _jsx(Pill, { variant: "filter", selected: true, children: "Selected" }), _jsx(Pill, { variant: "filter", disabled: true, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { Icon: GraphIcon, variant: "badge", children: "Badge" }), _jsx(Pill, { Icon: GraphIcon, variant: "badge", selected: true, children: "Selected" }), _jsx(Pill, { Icon: GraphIcon, variant: "badge", disabled: true, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "profile", children: "Profile" }), _jsx(Pill, { variant: "profile", selected: true, children: "Selected" }), _jsx(Pill, { variant: "profile", disabled: true, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "search", children: "Unique" }), _jsx(Pill, { variant: "search", selected: true, children: "Painting" }), _jsx(Pill, { variant: "search", disabled: true, children: "Sculpture" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "search", children: "Search" }), _jsx(Pill, { variant: "search", selected: true, children: "Selected" }), _jsx(Pill, { variant: "search", disabled: true, children: "Search" })] })] }));
-export const ProfileWithImage = () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, gap: 1 }, children: [_jsx(Pill, { variant: "profile", src: src, children: "Artist" }), _jsx(Pill, { variant: "profile", src: src, selected: true, children: "Selected" }), _jsx(Pill, { variant: "profile", src: src, disabled: true, children: "Disabled" })] }));
-ProfileWithImage.story = {
+    }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", gap: 1, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { children: "Default" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { selected: true, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { disabled: true, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", gap: 1, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", children: "Filter" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", selected: true, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", disabled: true, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", gap: 1, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: native_1.GraphIcon, variant: "badge", children: "Badge" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: native_1.GraphIcon, variant: "badge", selected: true, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: native_1.GraphIcon, variant: "badge", disabled: true, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", gap: 1, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", children: "Profile" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", selected: true, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", disabled: true, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", gap: 1, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", children: "Unique" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", selected: true, children: "Painting" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", disabled: true, children: "Sculpture" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", gap: 1, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", children: "Search" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", selected: true, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", disabled: true, children: "Search" })] })] })); };
+exports.Variants = Variants;
+var ProfileWithImage = function () { return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20, gap: 1 }, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", src: src, children: "Artist" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", src: src, selected: true, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", src: src, disabled: true, children: "Disabled" })] })); };
+exports.ProfileWithImage = ProfileWithImage;
+exports.ProfileWithImage.story = {
     name: "Profile with image",
 };
-export const ControlledState = () => {
-    const [selected, setSelected] = useState(false);
-    return (_jsx(List, { contentContainerStyle: { marginHorizontal: 20, gap: 1 }, children: _jsx(Pill, { selected: selected, onPress: () => setSelected((prev) => !prev), children: "Pill" }) }));
+var ControlledState = function () {
+    var _a = (0, react_1.useState)(false), selected = _a[0], setSelected = _a[1];
+    return ((0, jsx_runtime_1.jsx)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20, gap: 1 }, children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { selected: selected, onPress: function () { return setSelected(function (prev) { return !prev; }); }, children: "Pill" }) }));
 };
-ControlledState.story = {
+exports.ControlledState = ControlledState;
+exports.ControlledState.story = {
     name: "Controlled state",
 };
-export const Onboarding = () => {
-    return (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, gap: 1 }, children: [_jsx(Pill, { variant: "onboarding", selected: true, children: "Yes, I love collecting art" }), _jsx(Pill, { variant: "onboarding", children: "No, I'm just starting out" })] }));
+var Onboarding = function () {
+    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20, gap: 1 }, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "onboarding", selected: true, children: "Yes, I love collecting art" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "onboarding", children: "No, I'm just starting out" })] }));
 };
-export const Link = () => {
-    return (_jsx(List, { contentContainerStyle: { marginHorizontal: 20 }, children: _jsx(Pill, { variant: "link", children: "Yes, I love collecting art" }) }));
+exports.Onboarding = Onboarding;
+var Link = function () {
+    return ((0, jsx_runtime_1.jsx)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20 }, children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "link", children: "Yes, I love collecting art" }) }));
 };
-const src = "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg";
+exports.Link = Link;
+var src = "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg";

package/dist/elements/Pill/Pill.tests.js

@@ -1,18 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent, render, screen } from "@testing-library/react-native";
-import { Pill } from "./Pill";
-import { Theme } from "../../Theme";
-describe("Pill", () => {
-    it("invokes the onClick callback", () => {
-        const onPress = jest.fn();
-        render(_jsx(Theme, { children: _jsx(Pill, { onPress: onPress, children: "wow" }) }));
-        fireEvent.press(screen.getByText("wow"));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_1 = require("@testing-library/react-native");
+var Pill_1 = require("./Pill");
+var Theme_1 = require("../../Theme");
+describe("Pill", function () {
+    it("invokes the onClick callback", function () {
+        var onPress = jest.fn();
+        (0, react_native_1.render)((0, jsx_runtime_1.jsx)(Theme_1.Theme, { children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { onPress: onPress, children: "wow" }) }));
+        react_native_1.fireEvent.press(react_native_1.screen.getByText("wow"));
         expect(onPress).toHaveBeenCalled();
     });
-    it("should not be pressable if disabled is passed", () => {
-        const onPress = jest.fn();
-        render(_jsx(Theme, { children: _jsx(Pill, { disabled: true, onPress: onPress, children: "Press me" }) }));
-        fireEvent.press(screen.getByText("Press me"));
+    it("should not be pressable if disabled is passed", function () {
+        var onPress = jest.fn();
+        (0, react_native_1.render)((0, jsx_runtime_1.jsx)(Theme_1.Theme, { children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { disabled: true, onPress: onPress, children: "Press me" }) }));
+        react_native_1.fireEvent.press(react_native_1.screen.getByText("Press me"));
         expect(onPress).not.toHaveBeenCalled();
     });
 });

package/dist/elements/Pill/index.js

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

package/dist/elements/PopIn/PopIn.js

@@ -1,17 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { Animated } from "react-native";
-export const PopIn = ({ children, xOffset, yOffset, }) => {
-    const entranceProgress = useRef(new Animated.Value(0)).current;
-    useEffect(() => {
-        Animated.spring(entranceProgress, {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopIn = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var PopIn = function (_a) {
+    var children = _a.children, xOffset = _a.xOffset, yOffset = _a.yOffset;
+    var entranceProgress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(function () {
+        react_native_1.Animated.spring(entranceProgress, {
             toValue: 1,
             bounciness: 12,
             speed: 28,
             useNativeDriver: true,
         }).start();
     }, []);
-    return (_jsx(Animated.View, { style: {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
             opacity: entranceProgress,
             transform: [
                 {
@@ -39,3 +43,4 @@ export const PopIn = ({ children, xOffset, yOffset, }) => {
             ],
         }, children: children }));
 };
+exports.PopIn = PopIn;

package/dist/elements/PopIn/index.js

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