@artsy/palette-mobile 13.2.33 → 13.2.35

package/dist/elements/MeasuredView/MeasuredView.js

@@ -1,29 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOffscreenStyle = exports.MeasuredView = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const Box_1 = require("../Box");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useWindowDimensions } from "react-native";
+import { Box } from "../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.
  */
-const MeasuredView = ({ children, setMeasuredState, show }) => {
-    const offscreenStyle = (0, exports.useOffscreenStyle)(show);
-    const onLayout = (0, react_1.useCallback)((event) => {
+export const MeasuredView = ({ children, setMeasuredState, show }) => {
+    const offscreenStyle = useOffscreenStyle(show);
+    const onLayout = useCallback((event) => {
         setMeasuredState(event.nativeEvent.layout);
     }, []);
     if (__TEST__)
         return null;
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { style: offscreenStyle, backgroundColor: "pink", onLayout: onLayout, accessibilityElementsHidden: true, children: children }));
+    return (_jsx(Box, { style: offscreenStyle, backgroundColor: "pink", onLayout: onLayout, accessibilityElementsHidden: true, children: children }));
 };
-exports.MeasuredView = MeasuredView;
-const useOffscreenStyle = (notOffscreen) => {
-    const { width, height } = (0, react_native_1.useWindowDimensions)();
+export const useOffscreenStyle = (notOffscreen) => {
+    const { width, height } = useWindowDimensions();
     if (notOffscreen) {
         return {};
     }
     return { position: "absolute", top: width + height, left: width + height };
 };
-exports.useOffscreenStyle = useOffscreenStyle;

package/dist/elements/MeasuredView/index.js

@@ -1,17 +1 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./MeasuredView"), exports);
+export * from "./MeasuredView";

package/dist/elements/MenuItem/MenuItem.js

@@ -1,14 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const svgs_1 = require("../../svgs");
-const hooks_1 = require("../../utils/hooks");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-const Touchable_1 = require("../Touchable");
-const MenuItem = ({ title, text, value, onPress, disabled = false, chevron = (0, jsx_runtime_1.jsx)(svgs_1.ChevronIcon, { direction: "right", fill: "black60" }), }) => {
-    const color = (0, hooks_1.useColor)();
-    return ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { onPress: onPress, underlayColor: color("black5"), 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: "black60", 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("black60"), children: text }))] }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronIcon } from "../../svgs";
+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(ChevronIcon, { direction: "right", fill: "black60" }), }) => {
+    const color = useColor();
+    return (_jsx(Touchable, { onPress: onPress, underlayColor: color("black5"), 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: "black60", numberOfLines: 1, textAlign: "right", children: value }) })), !!(onPress && chevron) && _jsx(Flex, { ml: 1, children: chevron }), !!text && (_jsx(Text, { variant: "md", color: color("black60"), children: text }))] }) }));
 };
-exports.MenuItem = MenuItem;

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

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

package/dist/elements/MenuItem/index.js

@@ -1,17 +1 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./MenuItem"), exports);
+export * from "./MenuItem";

package/dist/elements/Message/Message.js

@@ -1,29 +1,26 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Message = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const svgs_1 = require("../../svgs");
-const useColor_1 = require("../../utils/hooks/useColor");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-const Message = ({ bodyTextStyle, children, containerStyle, IconComponent, iconPosition = "left", onClose, showCloseButton = false, testID, text, title, titleStyle, variant = "default", }) => {
-    const color = (0, useColor_1.useColor)();
-    const [tempHeight, setTempHeight] = (0, react_1.useState)(undefined);
-    const scaleYAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Animated, Easing, TouchableOpacity } from "react-native";
+import { CloseIcon } from "../../svgs";
+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 = () => {
-        react_native_1.Animated.timing(scaleYAnim, {
+        Animated.timing(scaleYAnim, {
             toValue: 1,
             duration: 150,
-            easing: react_native_1.Easing.linear,
+            easing: Easing.linear,
             useNativeDriver: true,
         }).start(() => {
             setTempHeight(0);
         });
         onClose?.();
     };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { testID: testID, style: {
+    return (_jsx(Animated.View, { testID: testID, style: {
             height: tempHeight,
             transform: [
                 {
@@ -33,9 +30,8 @@ const Message = ({ bodyTextStyle, children, containerStyle, IconComponent, iconP
                     }),
                 },
             ],
-        }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: color(colors[variant].background), ...containerStyle, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { px: 2, 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, children: (0, jsx_runtime_1.jsx)(IconComponent, {}) })), !!title && ((0, jsx_runtime_1.jsx)(Text_1.Text, { pr: 2, variant: "xs", color: color(colors[variant].title), ...titleStyle, children: title }))] }), !!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { 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", 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, { testID: "Message-close-button", onPress: handleClose, hitSlop: { bottom: 10, right: 10, left: 10, top: 10 }, children: (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color("black100") }) }) }))] }) }) }));
+        }, children: _jsx(Flex, { backgroundColor: color(colors[variant].background), ...containerStyle, children: _jsxs(Flex, { px: 2, 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, 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", children: _jsx(IconComponent, {}) })), !!showCloseButton && (_jsx(Flex, { style: { marginTop: 2 }, children: _jsx(TouchableOpacity, { testID: "Message-close-button", onPress: handleClose, hitSlop: { bottom: 10, right: 10, left: 10, top: 10 }, children: _jsx(CloseIcon, { fill: color("black100") }) }) }))] }) }) }));
 };
-exports.Message = Message;
 const colors = {
     default: {
         background: "black5",

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

@@ -1,12 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@storybook/react-native");
-const react_native_2 = require("react-native");
-const Message_1 = require("./Message");
-const decorators_1 = require("../../storybook/decorators");
-const helpers_1 = require("../../storybook/helpers");
-(0, react_native_1.storiesOf)("Message", module)
-    .addDecorator(decorators_1.withTheme)
-    .add("Variants", () => ((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_2.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" })] })))
-    .add("Color Variants", () => ((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" })] })));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { Text } from "react-native";
+import { Message } from "./Message";
+import { withTheme } from "../../storybook/decorators";
+import { List } from "../../storybook/helpers";
+storiesOf("Message", module)
+    .addDecorator(withTheme)
+    .add("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" })] })))
+    .add("Color Variants", () => (_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" })] })));

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

@@ -1,28 +1,26 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@testing-library/react-native");
-const Message_1 = require("./Message");
-const renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent } from "@testing-library/react-native";
+import { Message } from "./Message";
+import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
 describe("Message", () => {
     it("it renders", () => {
-        const MessageComponent = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", title: "title", text: "text" }));
+        const MessageComponent = renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text" }));
         expect(MessageComponent).toBeTruthy();
         expect(MessageComponent.getByText("title")).toBeDefined();
         expect(MessageComponent.getByText("text")).toBeDefined();
     });
     it("does not show close button when !showCloseButton", () => {
-        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", title: "title", text: "text" }));
+        const { getByTestId } = renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text" }));
         expect(() => getByTestId("Message-close-button")).toThrow("Unable to find an element with testID: Message-close-button");
     });
     it("shows close button when showCloseButton", () => {
-        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", title: "title", text: "text", showCloseButton: true }));
+        const { getByTestId } = renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text", showCloseButton: true }));
         expect(getByTestId("Message-close-button")).toBeDefined();
     });
     it("fires onClose press event", () => {
         const onClose = jest.fn();
-        const { getByTestId } = (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(getByTestId("Message-close-button"));
+        const { getByTestId } = renderWithWrappers(_jsx(Message, { variant: "default", onClose: onClose, title: "title", text: "text", showCloseButton: true }));
+        fireEvent.press(getByTestId("Message-close-button"));
         expect(onClose).toHaveBeenCalled();
     });
 });

package/dist/elements/Message/index.js

@@ -1,17 +1 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Message"), exports);
+export * from "./Message";

package/dist/elements/Pill/Pill.js

@@ -1,42 +1,13 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pill = exports.PILL_VARIANT_NAMES = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const theme_get_1 = __importDefault(require("@styled-system/theme-get"));
-const interactions_1 = require("moti/interactions");
-const react_1 = require("react");
-const styled_components_1 = __importStar(require("styled-components"));
-const svgs_1 = require("../../svgs");
-const Flex_1 = require("../Flex");
-const Image_1 = require("../Image");
-const Text_1 = require("../Text");
-exports.PILL_VARIANT_NAMES = [
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import themeGet from "@styled-system/theme-get";
+import { MotiPressable } from "moti/interactions";
+import { useMemo } from "react";
+import styled, { css } from "styled-components";
+import { CloseIcon } from "../../svgs";
+import { Flex } from "../Flex";
+import { Image } from "../Image";
+import { Text } from "../Text";
+export const PILL_VARIANT_NAMES = [
     "badge",
     "default",
     "dotted",
@@ -45,21 +16,20 @@ exports.PILL_VARIANT_NAMES = [
     "search",
     "onboarding",
 ];
-const Pill = ({ variant = "default", src, selected, disabled, Icon, children, onPress, ...rest }) => {
+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 ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...rest, children: (0, jsx_runtime_1.jsxs)(Container, { variant: variant, selected: selected, disabled: disabled, onPress: onPress, animate: (0, react_1.useMemo)(() => ({ hovered, pressed }) => {
+    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,
                 };
-            }, []), 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: { marginBottom: 2 }, children: children }), showCloseIcon && (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color, ml: 0.5, width: 15, height: 15 })] }) }));
+            }, []), 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: { marginBottom: 2 }, children: children }), showCloseIcon && _jsx(CloseIcon, { fill: color, ml: 0.5, width: 15, height: 15 })] }) }));
 };
-exports.Pill = Pill;
-const Container = (0, styled_components_1.default)(interactions_1.MotiPressable) `
+const Container = styled(MotiPressable) `
   align-items: center;
-  border: 1px solid ${(0, theme_get_1.default)("colors.black15")};
+  border: 1px solid ${themeGet("colors.black15")};
   flex-direction: row;
   justify-content: center;
   text-align: center;
@@ -67,98 +37,98 @@ const Container = (0, styled_components_1.default)(interactions_1.MotiPressable)
 
   ${(props) => {
     const states = PILL_VARIANTS[props.variant];
-    return (0, styled_components_1.css) `
+    return css `
       ${states.default}
       ${props.selected && states.selected}
       ${props.disabled && states.disabled}
     `;
 }}
 `;
-const Thumbnail = (0, styled_components_1.default)(Image_1.Image) `
-  background-color: ${(0, theme_get_1.default)("colors.black30")};
+const Thumbnail = styled(Image) `
+  background-color: ${themeGet("colors.black30")};
 `;
 const PILL_STATES = {
-    default: (0, styled_components_1.css) `
+    default: css `
     border-radius: 15px;
     height: 30px;
-    padding: 0 ${(0, theme_get_1.default)("space.2")};
+    padding: 0 ${themeGet("space.2")};
   `,
-    selected: (0, styled_components_1.css) `
-    border-color: ${(0, theme_get_1.default)("colors.blue100")};
-    background-color: ${(0, theme_get_1.default)("colors.blue100")};
+    selected: css `
+    border-color: ${themeGet("colors.blue100")};
+    background-color: ${themeGet("colors.blue100")};
   `,
-    disabled: (0, styled_components_1.css) `
-    background-color: ${(0, theme_get_1.default)("colors.black5")};
-    border-color: ${(0, theme_get_1.default)("colors.black5")};
+    disabled: css `
+    background-color: ${themeGet("colors.black5")};
+    border-color: ${themeGet("colors.black5")};
   `,
 };
 const PILL_VARIANTS = {
     default: PILL_STATES,
     onboarding: {
         ...PILL_STATES,
-        default: (0, styled_components_1.css) `
+        default: css `
       ${PILL_STATES.default}
       border-radius: 20px;
       height: 40px;
-      border-color: ${(0, theme_get_1.default)("colors.black60")};
+      border-color: ${themeGet("colors.black60")};
     `,
     },
     dotted: {
         ...PILL_STATES,
-        default: (0, styled_components_1.css) `
+        default: css `
       ${PILL_STATES.default}
       border-style: dashed;
     `,
-        selected: (0, styled_components_1.css) `
+        selected: css `
       ${PILL_STATES.selected}
-      background-color: ${(0, theme_get_1.default)("colors.black10")};
-      border-color: ${(0, theme_get_1.default)("colors.black10")};
+      background-color: ${themeGet("colors.black10")};
+      border-color: ${themeGet("colors.black10")};
     `,
     },
     search: {
         ...PILL_STATES,
-        default: (0, styled_components_1.css) `
+        default: css `
       ${PILL_STATES.default}
     `,
     },
     profile: {
-        default: (0, styled_components_1.css) `
-      background-color: ${(0, theme_get_1.default)("colors.black5")};
-      border-color: ${(0, theme_get_1.default)("colors.black5")};
+        default: css `
+      background-color: ${themeGet("colors.black5")};
+      border-color: ${themeGet("colors.black5")};
       border-radius: 25px;
       height: 50px;
-      padding: 0 ${(0, theme_get_1.default)("space.1")}};
+      padding: 0 ${themeGet("space.1")}};
     `,
-        selected: (0, styled_components_1.css) `
-      border-color: ${(0, theme_get_1.default)("colors.blue100")};
+        selected: css `
+      border-color: ${themeGet("colors.blue100")};
     `,
-        disabled: (0, styled_components_1.css) ``,
+        disabled: css ``,
     },
     badge: {
-        default: (0, styled_components_1.css) `
+        default: css `
       border-radius: 15px;
       height: 30px;
       padding: 0 15px;
-      background-color: ${(0, theme_get_1.default)("colors.blue10")};
-      border-color: ${(0, theme_get_1.default)("colors.blue10")};
+      background-color: ${themeGet("colors.blue10")};
+      border-color: ${themeGet("colors.blue10")};
     `,
-        selected: (0, styled_components_1.css) `
-      background-color: ${(0, theme_get_1.default)("colors.blue150")};
-      border-color: ${(0, theme_get_1.default)("colors.blue150")};
+        selected: css `
+      background-color: ${themeGet("colors.blue150")};
+      border-color: ${themeGet("colors.blue150")};
     `,
-        disabled: (0, styled_components_1.css) `
-      background-color: ${(0, theme_get_1.default)("colors.blue10")};
-      border-color: ${(0, theme_get_1.default)("colors.blue10")};
+        disabled: css `
+      background-color: ${themeGet("colors.blue10")};
+      border-color: ${themeGet("colors.blue10")};
     `,
     },
     filter: {
         ...PILL_STATES,
-        default: (0, styled_components_1.css) `
+        default: css `
       height: 30px;
-      padding: 0 ${(0, theme_get_1.default)("space.1")};
+      padding: 0 ${themeGet("space.1")};
     `,
-        disabled: (0, styled_components_1.css) `
-      border-color: ${(0, theme_get_1.default)("colors.black60")};
+        disabled: css `
+      border-color: ${themeGet("colors.black60")};
     `,
     },
 };

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

@@ -1,28 +1,26 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@storybook/react-native");
-const react_1 = require("react");
-const Pill_1 = require("./Pill");
-const helpers_1 = require("../../storybook/helpers");
-const svgs_1 = require("../../svgs");
-const Flex_1 = require("../Flex");
-exports.default = {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { useState } from "react";
+import { Pill } from "./Pill";
+import { List } from "../../storybook/helpers";
+import { GraphIcon } from "../../svgs";
+import { Flex } from "../Flex";
+export default {
     title: "Pill",
-    component: Pill_1.Pill,
+    component: Pill,
 };
-(0, react_native_1.storiesOf)("Pill", module)
-    .add("Variants", () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: {
+storiesOf("Pill", module)
+    .add("Variants", () => (_jsxs(List, { contentContainerStyle: {
         marginHorizontal: 20,
         justifyContent: "flex-start",
         alignItems: "flex-start",
-    }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { children: "Default" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", 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, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", children: "Badge" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", 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, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", 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, ml: 1, children: "Painting" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", disabled: true, ml: 1, children: "Sculpture" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", 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, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", disabled: true, ml: 1, children: "Search" })] })] })))
-    .add("Profile with image", () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20 }, 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, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", src: src, disabled: true, ml: 1, children: "Disabled" })] })))
+    }, children: [_jsxs(Flex, { flexDirection: "row", children: [_jsx(Pill, { children: "Default" }), _jsx(Pill, { selected: true, ml: 1, children: "Selected" }), _jsx(Pill, { disabled: true, ml: 1, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", children: [_jsx(Pill, { variant: "filter", children: "Filter" }), _jsx(Pill, { variant: "filter", selected: true, ml: 1, children: "Selected" }), _jsx(Pill, { variant: "filter", disabled: true, ml: 1, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", children: [_jsx(Pill, { Icon: GraphIcon, variant: "badge", children: "Badge" }), _jsx(Pill, { Icon: GraphIcon, variant: "badge", selected: true, ml: 1, children: "Selected" }), _jsx(Pill, { Icon: GraphIcon, variant: "badge", disabled: true, ml: 1, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", children: [_jsx(Pill, { variant: "profile", children: "Profile" }), _jsx(Pill, { variant: "profile", selected: true, ml: 1, children: "Selected" }), _jsx(Pill, { variant: "profile", disabled: true, ml: 1, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", children: [_jsx(Pill, { variant: "search", children: "Unique" }), _jsx(Pill, { variant: "search", selected: true, ml: 1, children: "Painting" }), _jsx(Pill, { variant: "search", disabled: true, ml: 1, children: "Sculpture" })] }), _jsxs(Flex, { flexDirection: "row", children: [_jsx(Pill, { variant: "search", children: "Search" }), _jsx(Pill, { variant: "search", selected: true, ml: 1, children: "Selected" }), _jsx(Pill, { variant: "search", disabled: true, ml: 1, children: "Search" })] })] })))
+    .add("Profile with image", () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20 }, children: [_jsx(Pill, { variant: "profile", src: src, children: "Artist" }), _jsx(Pill, { variant: "profile", src: src, selected: true, ml: 1, children: "Selected" }), _jsx(Pill, { variant: "profile", src: src, disabled: true, ml: 1, children: "Disabled" })] })))
     .add("Controlled state", () => {
-    const [selected, setSelected] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsx)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20 }, children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { selected: selected, onPress: () => setSelected((prev) => !prev), children: "Pill" }) }));
+    const [selected, setSelected] = useState(false);
+    return (_jsx(List, { contentContainerStyle: { marginHorizontal: 20 }, children: _jsx(Pill, { selected: selected, onPress: () => setSelected((prev) => !prev), children: "Pill" }) }));
 })
     .add("Onboarding", () => {
-    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20 }, 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", ml: 1, children: "No, I'm just starting out" })] }));
+    return (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20 }, children: [_jsx(Pill, { variant: "onboarding", selected: true, children: "Yes, I love collecting art" }), _jsx(Pill, { variant: "onboarding", ml: 1, children: "No, I'm just starting out" })] }));
 });
 const src = "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg";

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

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

package/dist/elements/Pill/index.js

@@ -1,17 +1 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Pill"), exports);
+export * from "./Pill";