@artsy/palette-mobile 6.1.0 → 7.0.0

package/dist/Theme.d.ts

@@ -27,7 +27,7 @@ export declare const _test_THEMES: {
             "6": number;
             "12": number;
         };
-        colors: Record<"black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue150" | "blue100" | "brand" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10" | "devpurple", string>;
+        colors: Record<"black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue150" | "blue100" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10" | "devpurple", string>;
         fonts: {
             sans: {
                 regular: string;

package/dist/elements/Button/Button.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 import { PressableProps } from "react-native";
 import { HapticFeedbackTypes } from "react-native-haptic-feedback";
-import { BoxProps } from "../../atoms";
+import { BoxProps } from "../..";
+type ButtonSize = "small" | "large";
+type ButtonVariant = "fillDark" | "fillLight" | "fillGray" | "fillSuccess" | "outline" | "outlineGray" | "outlineLight" | "text";
 export interface ButtonProps extends BoxProps {
     children: React.ReactNode;
-    size?: "small" | "large";
-    variant?: "fillDark" | "fillLight" | "fillGray" | "fillSuccess" | "outline" | "outlineGray" | "outlineLight" | "text";
+    size?: ButtonSize;
+    variant?: ButtonVariant;
     onPress?: PressableProps["onPress"];
     icon?: React.ReactNode;
     iconPosition?: "left" | "left-start" | "right";
@@ -26,13 +28,7 @@ export interface ButtonProps extends BoxProps {
     /** Pass the longest text to the button for the button to keep longest text width */
     longestText?: string;
     /** Used only for tests and stories */
-    testOnly_state?: DisplayState;
+    testOnly_pressed?: PressableProps["testOnly_pressed"];
 }
-declare enum DisplayState {
-    Enabled = "enabled",
-    Disabled = "disabled",
-    Loading = "loading",
-    Pressed = "pressed"
-}
-export declare const Button: ({ children, disabled, haptic, icon, iconPosition, loading, longestText, onPress, size, style, variant, testOnly_state, testID, ...restProps }: ButtonProps) => JSX.Element;
-export { DisplayState as _test_DisplayState };
+export declare const Button: ({ children, disabled: disabledProp, haptic, icon, iconPosition, loading: loadingProp, block, longestText, onPress, size, style, variant, testOnly_pressed, testID, ...restProps }: ButtonProps) => JSX.Element;
+export {};

package/dist/elements/Button/Button.js

@@ -1,302 +1,122 @@
 "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._test_DisplayState = exports.Button = void 0;
+exports.Button = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
 const react_native_haptic_feedback_1 = __importDefault(require("react-native-haptic-feedback"));
-const react_spring_1 = require("react-spring");
-// @ts-ignore
-const renderprops_native_1 = require("react-spring/renderprops-native");
-const native_1 = __importDefault(require("styled-components/native"));
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const __1 = require("../..");
+const MeasuredView_1 = require("../../utils/MeasuredView");
 const Spinner_1 = require("../Spinner");
 const Text_1 = require("../Text");
-const atoms_1 = require("../../atoms");
-const MeasuredView_1 = require("../../utils/MeasuredView");
-const hooks_1 = require("../../hooks");
-var DisplayState;
-(function (DisplayState) {
-    DisplayState["Enabled"] = "enabled";
-    DisplayState["Disabled"] = "disabled";
-    DisplayState["Loading"] = "loading";
-    DisplayState["Pressed"] = "pressed";
-})(DisplayState || (DisplayState = {}));
-exports._test_DisplayState = DisplayState;
-const Button = ({ children, disabled, haptic, icon, iconPosition = "left", loading, longestText, onPress, size = "large", style, variant = "fillDark", testOnly_state, testID, ...restProps }) => {
+const colors_1 = require("./colors");
+const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition = "left", loading: loadingProp, block, longestText, onPress, size = "large", style, variant = "fillDark", testOnly_pressed, testID, ...restProps }) => {
+    // these are basically booleans
+    const disabled = (0, react_native_reanimated_1.useSharedValue)(!!disabledProp ? 1 : 0);
+    const loading = (0, react_native_reanimated_1.useSharedValue)(!!loadingProp ? 1 : 0);
+    const pressed = (0, react_native_reanimated_1.useSharedValue)(!!testOnly_pressed ? 1 : 0);
+    const color = (0, __1.useColor)();
     const textStyle = (0, Text_1.useTextStyleForPalette)(size === "small" ? "xs" : "sm");
-    const [innerDisplayState, setInnerDisplayState] = (0, react_1.useState)(DisplayState.Enabled);
     const [longestTextMeasurements, setLongestTextMeasurements] = (0, react_1.useState)({
         width: 0,
         height: 0,
     });
-    const displayState = testOnly_state ?? // if we use the test prop, use that
-        (loading // if we have loading or disabled in props, they are used
-            ? DisplayState.Loading
-            : disabled
-                ? DisplayState.Disabled
-                : innerDisplayState); // otherwise use the inner state for pressed or enabled
-    const getSize = () => {
+    const height = (() => {
         switch (size) {
             case "small":
-                return { height: 30, mx: 15 };
+                return 30;
             case "large":
-                return { height: 50, mx: 30 };
+                return 50;
         }
-    };
+    })();
     const spinnerColor = variant === "text" ? "blue100" : "white100";
     const handlePress = (event) => {
         if (onPress === undefined || onPress === null) {
             return;
         }
-        if (displayState === DisplayState.Loading || displayState === DisplayState.Disabled) {
+        if (disabled.value === 1 || loading.value === 1) {
             return;
         }
-        // Did someone tap really fast? Flick the highlighted state
-        if (displayState === DisplayState.Enabled) {
-            setInnerDisplayState(DisplayState.Pressed);
-            setTimeout(() => {
-                setInnerDisplayState(DisplayState.Enabled);
-            }, 0.3);
-        }
-        else {
-            // Was already selected
-            setInnerDisplayState(DisplayState.Enabled);
-        }
         if (haptic !== undefined) {
             react_native_haptic_feedback_1.default.trigger(haptic === true ? "impactLight" : haptic);
         }
         onPress(event);
     };
-    const containerSize = getSize();
-    const to = useStyleForVariantAndState(variant, testOnly_state ?? displayState);
-    return ((0, jsx_runtime_1.jsx)(renderprops_native_1.Spring, { native: true, to: to, config: react_spring_1.config.stiff, children: (springProps) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testOnly_pressed: testOnly_state === DisplayState.Pressed, disabled: testOnly_state === DisplayState.Disabled || disabled, onPressIn: () => {
-                if (displayState === DisplayState.Loading) {
-                    return;
-                }
-                setInnerDisplayState(DisplayState.Pressed);
-            }, onPressOut: () => {
-                if (displayState === DisplayState.Loading) {
-                    return;
-                }
-                setInnerDisplayState(DisplayState.Enabled);
-            }, onPress: handlePress, testID: testID, children: (0, jsx_runtime_1.jsx)(atoms_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(AnimatedContainer, { ...restProps, style: {
-                        backgroundColor: springProps.backgroundColor,
-                        borderColor: springProps.borderColor,
-                        height: containerSize.height,
-                    }, children: (0, jsx_runtime_1.jsxs)(atoms_1.Flex, { mx: containerSize.mx, children: [(0, jsx_runtime_1.jsxs)(atoms_1.Flex, { height: "100%", flexDirection: "row", alignItems: "center", justifyContent: "center", children: [iconPosition === "left-start" && !!icon ? ((0, jsx_runtime_1.jsxs)(atoms_1.Box, { position: "absolute", left: 0, children: [icon, (0, jsx_runtime_1.jsx)(atoms_1.Spacer, { mr: 0.5 })] })) : null, iconPosition === "left" && !!icon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, (0, jsx_runtime_1.jsx)(atoms_1.Spacer, { mr: 0.5 })] })) : null, (0, jsx_runtime_1.jsx)(MeasuredView_1.MeasuredView, { setMeasuredState: setLongestTextMeasurements, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "red", style: textStyle, children: longestText ? longestText : children }) }), (0, jsx_runtime_1.jsx)(AnimatedText, { style: [
-                                            {
-                                                width: Math.ceil(longestTextMeasurements.width),
-                                                color: springProps.textColor,
-                                                textDecorationLine: springProps.textDecorationLine,
-                                            },
-                                            textStyle,
-                                        ], textAlign: "center", children: children }), iconPosition === "right" && !!icon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(atoms_1.Spacer, { mr: 0.5 }), icon] })) : null] }), displayState === DisplayState.Loading ? ((0, jsx_runtime_1.jsx)(SpinnerContainer, { children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: size, color: spinnerColor }) })) : null] }) }) }) })) }));
-};
-exports.Button = Button;
-const useStyleForVariantAndState = (variant, state) => {
-    const color = (0, hooks_1.useColor)();
-    const retval = {
-        textDecorationLine: "none",
-    };
-    if (state === DisplayState.Loading) {
-        retval.backgroundColor = variant === "text" ? color("black10") : color("blue100");
-        retval.borderColor = "rgba(0, 0, 0, 0)";
-        retval.borderWidth = 0;
-        retval.textColor = "rgba(0, 0, 0, 0)";
-        return retval;
-    }
-    switch (variant) {
-        case "fillDark":
-            retval.textColor = color("onPrimaryHigh");
-            switch (state) {
-                case DisplayState.Enabled:
-                    retval.backgroundColor = color("primary");
-                    retval.borderColor = color("primary");
-                    break;
-                case DisplayState.Disabled:
-                    retval.backgroundColor = color("black30");
-                    retval.borderColor = color("black30");
-                    break;
-                case DisplayState.Pressed:
-                    retval.backgroundColor = color("blue100");
-                    retval.borderColor = color("blue100");
-                    retval.textDecorationLine = "underline";
-                    break;
-                default:
-                    assertNever(state);
-            }
-            break;
-        case "fillLight":
-            switch (state) {
-                case DisplayState.Enabled:
-                    retval.backgroundColor = color("white100");
-                    retval.borderColor = color("white100");
-                    retval.textColor = color("black100");
-                    break;
-                case DisplayState.Disabled:
-                    retval.backgroundColor = color("black30");
-                    retval.borderColor = color("black30");
-                    retval.textColor = color("white100");
-                    break;
-                case DisplayState.Pressed:
-                    retval.backgroundColor = color("blue100");
-                    retval.borderColor = color("blue100");
-                    retval.textColor = color("white100");
-                    retval.textDecorationLine = "underline";
-                    break;
-                default:
-                    assertNever(state);
-            }
-            break;
-        case "fillGray":
-            switch (state) {
-                case DisplayState.Enabled:
-                    retval.backgroundColor = color("black10");
-                    retval.borderColor = color("black10");
-                    retval.textColor = color("black100");
-                    break;
-                case DisplayState.Disabled:
-                    retval.backgroundColor = color("black30");
-                    retval.borderColor = color("black30");
-                    retval.textColor = color("white100");
-                    break;
-                case DisplayState.Pressed:
-                    retval.backgroundColor = color("blue100");
-                    retval.borderColor = color("blue100");
-                    retval.textColor = color("white100");
-                    retval.textDecorationLine = "underline";
-                    break;
-                default:
-                    assertNever(state);
-            }
-            break;
-        case "fillSuccess":
-            retval.textColor = color("white100");
-            switch (state) {
-                case DisplayState.Enabled:
-                    retval.backgroundColor = color("blue100");
-                    retval.borderColor = color("blue100");
-                    break;
-                case DisplayState.Disabled:
-                    retval.backgroundColor = color("blue100");
-                    retval.borderColor = color("blue100");
-                    break;
-                case DisplayState.Pressed:
-                    retval.backgroundColor = color("blue10");
-                    retval.borderColor = color("blue10");
-                    retval.textDecorationLine = "underline";
-                    break;
-                default:
-                    assertNever(state);
-            }
-            break;
-        case "outline":
-            switch (state) {
-                case DisplayState.Enabled:
-                    retval.backgroundColor = color("background");
-                    retval.borderColor = color("onBackgroundMedium");
-                    retval.textColor = color("onBackgroundHigh");
-                    break;
-                case DisplayState.Disabled:
-                    retval.backgroundColor = color("background");
-                    retval.borderColor = color("onBackgroundLow");
-                    retval.textColor = color("onBackgroundLow");
-                    break;
-                case DisplayState.Pressed:
-                    retval.backgroundColor = color("blue100");
-                    retval.borderColor = color("blue100");
-                    retval.textColor = color("white100");
-                    retval.textDecorationLine = "underline";
-                    break;
-                default:
-                    assertNever(state);
+    const bgColor = (0, react_native_reanimated_1.useSharedValue)("black");
+    const borderColor = (0, react_native_reanimated_1.useSharedValue)("black");
+    const containerColorsAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        backgroundColor: bgColor.value,
+        borderColor: borderColor.value,
+    }));
+    const textColor = (0, react_native_reanimated_1.useSharedValue)("black");
+    const underline = (0, react_native_reanimated_1.useSharedValue)(0);
+    const textAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        color: textColor.value,
+        textDecorationLine: underline.value === 1 ? "underline" : "none",
+    }));
+    const colorsForVariantAndState = (0, colors_1.useColorsForVariantAndState)();
+    (0, react_native_reanimated_1.useAnimatedReaction)(() => [disabled.value, loading.value, pressed.value], ([disabledVal, loadingVal, pressedVal]) => {
+        const toColor = (c) => (0, react_native_reanimated_1.withTiming)(c, { duration: 150 });
+        const states = colorsForVariantAndState[variant];
+        const colors = disabledVal === 1
+            ? states.disabled
+            : loadingVal === 1
+                ? states.loading
+                : pressedVal === 1
+                    ? states.pressed
+                    : states.active;
+        const { bg, border, text } = colors;
+        bgColor.value = toColor(bg);
+        borderColor.value = toColor(border);
+        textColor.value = toColor(text);
+        underline.value = pressedVal;
+    }, [variant]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { disabled: disabled.value === 1, onPressIn: () => {
+            if (loading.value === 1) {
+                return;
             }
-            break;
-        case "outlineGray":
-            switch (state) {
-                case DisplayState.Enabled:
-                    retval.backgroundColor = color("white100");
-                    retval.borderColor = color("black30");
-                    retval.textColor = color("black100");
-                    break;
-                case DisplayState.Disabled:
-                    retval.backgroundColor = color("white100");
-                    retval.borderColor = color("black30");
-                    retval.textColor = color("black30");
-                    break;
-                case DisplayState.Pressed:
-                    retval.backgroundColor = color("blue100");
-                    retval.borderColor = color("blue100");
-                    retval.textColor = color("white100");
-                    retval.textDecorationLine = "underline";
-                    break;
-                default:
-                    assertNever(state);
+            pressed.value = 1;
+        }, onPressOut: () => {
+            if (loading.value === 1) {
+                return;
             }
-            break;
-        case "outlineLight":
-            switch (state) {
-                case DisplayState.Enabled:
-                    retval.backgroundColor = "rgba(0, 0, 0, 0)";
-                    retval.borderColor = color("white100");
-                    retval.textColor = color("white100");
-                    break;
-                case DisplayState.Disabled:
-                    retval.backgroundColor = "rgba(0, 0, 0, 0)";
-                    retval.borderColor = color("black30");
-                    retval.textColor = color("black30");
-                    break;
-                case DisplayState.Pressed:
-                    retval.backgroundColor = color("blue100");
-                    retval.borderColor = color("blue100");
-                    retval.textColor = color("white100");
-                    retval.textDecorationLine = "underline";
-                    break;
-                default:
-                    assertNever(state);
-            }
-            break;
-        case "text":
-            retval.backgroundColor = "rgba(0, 0, 0, 0)";
-            retval.borderColor = "rgba(0, 0, 0, 0)";
-            switch (state) {
-                case DisplayState.Enabled:
-                    retval.textColor = color("black100");
-                    break;
-                case DisplayState.Disabled:
-                    retval.textColor = color("black30");
-                    break;
-                case DisplayState.Pressed:
-                    retval.backgroundColor = color("black10");
-                    retval.borderColor = color("black10");
-                    retval.textColor = color("blue100");
-                    retval.textDecorationLine = "underline";
-                    break;
-                default:
-                    assertNever(state);
-            }
-            break;
-        default:
-            assertNever(variant);
-    }
-    return retval;
+            pressed.value = 0;
+        }, onPress: handlePress, testID: testID, testOnly_pressed: testOnly_pressed, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
+                {
+                    height: height,
+                    width: block ? "100%" : undefined,
+                    borderWidth: 1,
+                    borderRadius: 50,
+                },
+                containerColorsAnim,
+            ], children: (0, jsx_runtime_1.jsxs)(__1.Flex, { height: "100%", mx: 25, flexDirection: "row", alignItems: "center", justifyContent: "center", children: [iconPosition === "left-start" && !!icon ? ((0, jsx_runtime_1.jsxs)(__1.Box, { position: "absolute", left: 0, children: [icon, (0, jsx_runtime_1.jsx)(__1.Spacer, { x: "0.5" })] })) : null, iconPosition === "left" && !!icon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, (0, jsx_runtime_1.jsx)(__1.Spacer, { x: "0.5" })] })) : null, (0, jsx_runtime_1.jsx)(AText, { style: [{ width: Math.ceil(longestTextMeasurements.width) }, textStyle, textAnim], textAlign: "center", children: children }), !__TEST__ && ((0, jsx_runtime_1.jsx)(MeasuredView_1.MeasuredView, { setMeasuredState: setLongestTextMeasurements, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "red", style: textStyle, children: longestText ? longestText : children }) })), iconPosition === "right" && !!icon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(__1.Spacer, { x: "0.5" }), icon] })) : null, loading.value === 1 ? ((0, jsx_runtime_1.jsx)(__1.Box, { position: "absolute", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: size, color: spinnerColor }) })) : null] }) }) }));
 };
-const Container = (0, native_1.default)(atoms_1.Box) `
-  position: relative;
-  border-width: 1;
-  border-radius: 50;
-  width: ${(p) => (p.block ? "100%" : "auto")};
-  overflow: hidden;
-`;
-const SpinnerContainer = (0, native_1.default)(atoms_1.Box) `
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-`;
-const AnimatedContainer = (0, renderprops_native_1.animated)(Container);
-const AnimatedText = (0, renderprops_native_1.animated)(Text_1.Text);
+exports.Button = Button;
+const AText = react_native_reanimated_1.default.createAnimatedComponent(Text_1.Text);

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ButtonProps } from ".";
+declare const _default: {
+    title: string;
+    component: ({ children, disabled: disabledProp, haptic, icon, iconPosition, loading: loadingProp, block, longestText, onPress, size, style, variant, testOnly_pressed, testID, ...restProps }: ButtonProps) => JSX.Element;
+};
+export default _default;
+export declare const Sizes: () => JSX.Element;
+export declare const States: () => JSX.Element;
+export declare const Variants: () => JSX.Element;
+export declare const VariantsLoading: () => JSX.Element;
+export declare const VariantsDisabled: () => JSX.Element;
+export declare const TheFollowButton: () => JSX.Element;
+export declare const TheCTAButton: () => JSX.Element;
+export declare const TheLinkButton: () => JSX.Element;
+export declare const Miscellaneous: () => JSX.Element;
+export declare const Playground: () => JSX.Element;

package/dist/elements/Button/Button.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Playground = exports.Miscellaneous = exports.TheLinkButton = exports.TheCTAButton = exports.TheFollowButton = exports.VariantsDisabled = exports.VariantsLoading = exports.Variants = exports.States = exports.Sizes = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const react_1 = require("react");
+const _1 = require(".");
+const atoms_1 = require("../../atoms");
+const storybookHelpers_1 = require("../../storybookHelpers");
+const svgs_1 = require("../../svgs");
+const Wrap_1 = require("../../utils/Wrap");
+const lodash_1 = require("lodash");
+const __1 = require("..");
+const sizes = ["small", "large"];
+const variants = [
+    "fillDark",
+    "fillLight",
+    "fillGray",
+    "fillSuccess",
+    "outline",
+    "outlineGray",
+    "outlineLight",
+    "text",
+];
+exports.default = {
+    title: "Button",
+    component: _1.Button,
+};
+const Sizes = () => ((0, jsx_runtime_1.jsx)(storybookHelpers_1.DataList, { data: sizes, renderItem: ({ item: size }) => ((0, jsx_runtime_1.jsx)(_1.Button, { size: size, onPress: () => console.log(`tapped ${size}`), children: (0, lodash_1.capitalize)(size) })) }));
+exports.Sizes = Sizes;
+const States = () => {
+    const [variant, setVariant] = (0, react_1.useState)("fillDark");
+    return ((0, jsx_runtime_1.jsxs)(storybookHelpers_1.List, { children: [(0, jsx_runtime_1.jsx)(atoms_1.Flex, { flexDirection: "row", flexWrap: "wrap", px: "2", children: variants.map((variant) => ((0, jsx_runtime_1.jsx)(__1.LinkText, { color: "orange", onPress: () => setVariant(variant), mr: "2", children: variant }))) }), (0, jsx_runtime_1.jsx)(_1.Button, { variant: variant, onPress: () => console.log(`tapped`), longestText: "Regular YEA", children: "Regular" }), (0, jsx_runtime_1.jsx)(_1.Button, { variant: variant, onPress: () => console.log(`tapped`), disabled: true, children: "Disabled" }), (0, jsx_runtime_1.jsx)(_1.Button, { variant: variant, onPress: () => console.log(`tapped`), loading: true, children: "Loading" }), (0, jsx_runtime_1.jsx)(_1.Button, { variant: variant, onPress: () => console.log(`tapped`), testOnly_pressed: true, children: "Pressed" })] }));
+};
+exports.States = States;
+const Variants = () => ((0, jsx_runtime_1.jsx)(storybookHelpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => ((0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: variant === "outlineLight" || variant === "fillLight", children: (0, jsx_runtime_1.jsx)(atoms_1.Flex, { backgroundColor: "pink", p: 10, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: (0, jsx_runtime_1.jsx)(_1.Button, { variant: variant, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
+exports.Variants = Variants;
+const VariantsLoading = () => ((0, jsx_runtime_1.jsx)(storybookHelpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => ((0, jsx_runtime_1.jsx)(_1.Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant })) }));
+exports.VariantsLoading = VariantsLoading;
+const VariantsDisabled = () => ((0, jsx_runtime_1.jsx)(storybookHelpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => ((0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: variant === "outlineLight", children: (0, jsx_runtime_1.jsx)(atoms_1.Flex, { backgroundColor: "black100", p: 10, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: (0, jsx_runtime_1.jsx)(_1.Button, { variant: variant, disabled: true, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
+exports.VariantsDisabled = VariantsDisabled;
+const TheFollowButton = () => {
+    const [follow, setFollow] = (0, react_1.useState)(true);
+    return ((0, jsx_runtime_1.jsx)(storybookHelpers_1.List, { children: (0, jsx_runtime_1.jsx)(_1.FollowButton, { isFollowed: follow, onPress: () => setFollow((v) => !v) }) }));
+};
+exports.TheFollowButton = TheFollowButton;
+const TheCTAButton = () => ((0, jsx_runtime_1.jsx)(storybookHelpers_1.List, { children: (0, jsx_runtime_1.jsx)(_1.CTAButton, { onPress: () => console.log("pressed"), children: "cta button" }) }));
+exports.TheCTAButton = TheCTAButton;
+const TheLinkButton = () => ((0, jsx_runtime_1.jsx)(storybookHelpers_1.List, { children: (0, jsx_runtime_1.jsx)(_1.LinkButton, { onPress: () => console.log("pressed"), children: "LinkButton" }) }));
+exports.TheLinkButton = TheLinkButton;
+const Miscellaneous = () => ((0, jsx_runtime_1.jsxs)(storybookHelpers_1.List, { children: [(0, jsx_runtime_1.jsx)(_1.Button, { loading: true, disabled: true, children: "loading and disabled" }), (0, jsx_runtime_1.jsx)(_1.Button, { block: true, children: "block" }), (0, jsx_runtime_1.jsx)(atoms_1.Flex, { backgroundColor: "orange", width: 400, height: 80, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(_1.Button, { variant: "fillLight", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, {}), children: "left icon" }) }), (0, jsx_runtime_1.jsx)(_1.Button, { icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", children: "right icon" }), (0, jsx_runtime_1.jsx)(_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", children: "Right Icon Small" }), (0, jsx_runtime_1.jsx)(_1.Button, { variant: "fillDark", size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.BellIcon, { fill: "white100", width: "16px", height: "16px" }), children: "Create Alert" }), (0, jsx_runtime_1.jsxs)(atoms_1.Box, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(atoms_1.Box, { width: 2, height: "100%", backgroundColor: "green100" }), (0, jsx_runtime_1.jsxs)(atoms_1.Box, { children: [(0, jsx_runtime_1.jsx)(_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "shortest text" }), (0, jsx_runtime_1.jsx)(atoms_1.Spacer, { y: "1" }), (0, jsx_runtime_1.jsx)(_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "this is a very long text" })] }), (0, jsx_runtime_1.jsx)(atoms_1.Box, { width: 2, height: "100%", backgroundColor: "green100" })] }), (0, jsx_runtime_1.jsx)(_1.Button, { icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), block: true, iconPosition: "left-start", children: "left-start aligned icon" })] }));
+exports.Miscellaneous = Miscellaneous;
+const Playground = () => {
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [disabled, setDisabled] = (0, react_1.useState)(true);
+    const [block, setBlock] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "loading", onPress: () => setLoading((v) => !v) }), (0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "disabled", onPress: () => setDisabled((v) => !v) }), (0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "block", onPress: () => setBlock((v) => !v) }), (0, jsx_runtime_1.jsx)(storybookHelpers_1.List, { children: (0, jsx_runtime_1.jsxs)(_1.Button, { loading: loading, disabled: disabled, block: block, children: ["loading ", loading ? "true" : "false", ", disabled ", disabled ? "true" : "false", ", block", " ", block ? "true" : "false"] }) })] }));
+};
+exports.Playground = Playground;

package/dist/elements/Button/Button.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/elements/Button/Button.tests.js

@@ -0,0 +1,31 @@
+"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 _1 = require(".");
+const __1 = require("..");
+const renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
+describe("Button", () => {
+    it("shows spinner if loading is true", () => {
+        const { UNSAFE_queryAllByType } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(_1.Button, { loading: true, children: "wow" }));
+        expect(UNSAFE_queryAllByType(__1.Spinner)).toHaveLength(1);
+    });
+    it("invokes the onClick callback", () => {
+        const onPress = jest.fn();
+        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(_1.Button, { testID: "the-button", onPress: onPress, children: "wow" }));
+        react_native_1.fireEvent.press(getByTestId("the-button"));
+        expect(onPress).toHaveBeenCalled();
+    });
+    it("does not invoke the onClick callback if loading is true", () => {
+        const onPress = jest.fn();
+        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(_1.Button, { testID: "the-button", onPress: onPress, loading: true, children: "wow" }));
+        react_native_1.fireEvent.press(getByTestId("the-button"));
+        expect(onPress).not.toHaveBeenCalled();
+    });
+    it("does not invoke the onClick callback if disabled is true", () => {
+        const onPress = jest.fn();
+        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(_1.Button, { testID: "the-button", onPress: onPress, disabled: true, children: "wow" }));
+        react_native_1.fireEvent.press(getByTestId("the-button"));
+        expect(onPress).not.toHaveBeenCalled();
+    });
+});

package/dist/elements/Button/colors.d.ts

@@ -0,0 +1,9 @@
+import { ButtonProps } from "../..";
+import { NoUndefined } from "../../utils/types";
+type State = "disabled" | "loading" | "pressed" | "active";
+export declare const useColorsForVariantAndState: () => Record<NoUndefined<ButtonProps["variant"]>, Record<State, {
+    bg: string;
+    border: string;
+    text: string;
+}>>;
+export {};

package/dist/elements/Button/colors.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useColorsForVariantAndState = void 0;
+const __1 = require("../..");
+const useColorsForVariantAndState = () => {
+    const color = (0, __1.useColor)();
+    return {
+        fillDark: {
+            disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
+            loading: { bg: color("blue100"), border: color("blue100"), text: "transparent" },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") },
+            active: { bg: color("primary"), border: color("primary"), text: color("onPrimaryHigh") },
+        },
+        fillLight: {
+            disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
+            loading: { bg: color("blue100"), border: color("blue100"), text: "transparent" },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") },
+            active: {
+                bg: color("white100"),
+                border: color("white100"),
+                text: color("black100"),
+            },
+        },
+        fillGray: {
+            disabled: { bg: color("black30"), border: color("black30"), text: color("white100") },
+            loading: { bg: color("blue100"), border: color("blue100"), text: "transparent" },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            active: { bg: color("black10"), border: color("black10"), text: color("black100") },
+        },
+        fillSuccess: {
+            disabled: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            loading: { bg: color("blue100"), border: color("blue100"), text: "transparent" },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            active: { bg: color("blue10"), border: color("blue10"), text: color("white100") },
+        },
+        outline: {
+            disabled: {
+                bg: color("background"),
+                border: color("onBackgroundLow"),
+                text: color("onBackgroundLow"),
+            },
+            loading: { bg: color("blue100"), border: color("blue100"), text: "transparent" },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            active: {
+                bg: color("background"),
+                border: color("onBackgroundMedium"),
+                text: color("onBackgroundHigh"),
+            },
+        },
+        outlineGray: {
+            disabled: {
+                bg: color("white100"),
+                border: color("black30"),
+                text: color("black30"),
+            },
+            loading: { bg: color("blue100"), border: color("blue100"), text: "transparent" },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            active: {
+                bg: color("white100"),
+                border: color("black30"),
+                text: color("black100"),
+            },
+        },
+        outlineLight: {
+            disabled: {
+                bg: "rgba(0, 0, 0, 0)",
+                border: color("black30"),
+                text: color("black30"),
+            },
+            loading: { bg: color("blue100"), border: color("blue100"), text: "transparent" },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            active: {
+                bg: "rgba(0, 0, 0, 0)",
+                border: color("white100"),
+                text: color("white100"),
+            },
+        },
+        text: {
+            disabled: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black30") },
+            loading: { bg: color("black10"), border: color("black10"), text: "transparent" },
+            pressed: { bg: color("black10"), border: color("black10"), text: color("blue100") },
+            active: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black100") },
+        },
+    };
+};
+exports.useColorsForVariantAndState = useColorsForVariantAndState;

package/dist/elements/Button/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./Button";
-export * from "./FollowButton";
 export * from "./CTAButton";
+export * from "./FollowButton";
 export * from "./LinkButton";

package/dist/elements/Button/index.js

@@ -15,6 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Button"), exports);
-__exportStar(require("./FollowButton"), exports);
 __exportStar(require("./CTAButton"), exports);
+__exportStar(require("./FollowButton"), exports);
 __exportStar(require("./LinkButton"), exports);

package/dist/elements/Collapse/Collapse.d.ts

@@ -1,34 +1,5 @@
-import { Component } from "react";
-import { View } from "react-native";
-export interface CollapseProps {
-    /** Determines whether content is expanded or collapsed */
+import { ReactNode } from "react";
+export declare const Collapse: ({ opened, children }: {
     opened: boolean;
-    /**
-     * If we're rendering within a statically-sized component (e.g. FlatList), we need
-     * to propagate a sentinel value in order to trigger re-render or re-measure.
-     */
-    onAnimationFrame?: (animateValue: {
-        height: number;
-    }) => void;
-}
-interface State {
-    isMounted: boolean;
-    hasMeasured: boolean;
-    isMeasuring: boolean;
-    isAnimating: boolean;
-    measuredHeight?: number;
-}
-/** Collapses content with animation when open is not true */
-export declare class Collapse extends Component<CollapseProps, State> {
-    measureRef: View | null;
-    state: State;
-    componentDidMount(): void;
-    handleMeasureRef: (ref: View) => void;
-    measureChildren: () => void;
-    handleLayout: (ev: any) => void;
-    handleFrame: (animatedValue: any) => void;
-    componentWillReceiveProps(nextProps: CollapseProps): void;
-    measureView: () => JSX.Element;
-    render(): JSX.Element;
-}
-export {};
+    children: ReactNode;
+}) => JSX.Element | null;

package/dist/elements/Collapse/Collapse.js

@@ -2,89 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Collapse = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const react_native_1 = require("react-native");
-// @ts-ignore
-const renderprops_native_1 = require("react-spring/renderprops-native");
-const AnimatedView = (0, renderprops_native_1.animated)(react_native_1.View);
-/** Collapses content with animation when open is not true */
-class Collapse extends react_1.Component {
-    measureRef = null;
-    state = {
-        isMounted: false,
-        isMeasuring: false,
-        isAnimating: false,
-        hasMeasured: false,
-    };
-    componentDidMount() {
-        this.setState({ isMounted: true });
-    }
-    handleMeasureRef = (ref) => {
-        this.measureRef = ref;
-    };
-    measureChildren = () => {
-        this.setState({ isMeasuring: true }, () => {
-            requestAnimationFrame(() => {
-                if (!this.measureRef) {
-                    this.setState({
-                        isMeasuring: false,
-                    });
-                    return;
-                }
-                // @ts-ignore
-                this.measureRef.measure((x, y, width, height) => {
-                    this.setState({
-                        isMeasuring: false,
-                        hasMeasured: true,
-                        measuredHeight: height,
-                    });
-                });
-            });
-        });
-    };
-    handleLayout = (ev) => {
-        const { opened } = this.props;
-        const { hasMeasured, isMeasuring, measuredHeight, isAnimating } = this.state;
-        const height = ev.nativeEvent.layout.height;
-        if (!hasMeasured || !opened || isMeasuring || measuredHeight === height || isAnimating) {
-            return;
-        }
-        this.setState({
-            measuredHeight: height,
-        });
-    };
-    handleFrame = (animatedValue) => {
-        if (this.props.onAnimationFrame) {
-            this.props.onAnimationFrame(animatedValue);
-        }
-    };
-    componentWillReceiveProps(nextProps) {
-        const willExpand = nextProps.opened && !this.props.opened;
-        if (nextProps.opened !== this.props.opened) {
-            this.setState({ isAnimating: true }, () => {
-                if (willExpand && !this.measureRef && this.state.hasMeasured) {
-                    // We've previously measured children and can animate without further work.
-                    return;
-                }
-                else if (!this.state.hasMeasured) {
-                    // Children are ready to measure, measureRef might be mounted already.
-                    this.measureChildren();
-                }
-            });
-        }
-    }
-    measureView = () => ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: this.handleMeasureRef, style: { opacity: 0, position: "absolute" }, children: this.props.children }));
-    render() {
-        const { isMeasuring, isMounted, measuredHeight } = this.state;
-        // @ts-expect-error
-        const { opened, children } = this.props;
-        // We must render children once in order to measure and derive a static height for animation.
-        if (isMeasuring) {
-            return this.measureView();
-        }
-        return ((0, jsx_runtime_1.jsx)(renderprops_native_1.Spring, { native: true, immediate: !isMounted, from: { height: 0 }, to: { height: opened && measuredHeight ? measuredHeight : 0 }, onRest: () => {
-                this.setState({ isAnimating: false });
-            }, onFrame: this.handleFrame, children: (props) => ((0, jsx_runtime_1.jsx)(AnimatedView, { style: { ...props, overflow: "hidden" }, onLayout: this.handleLayout, children: children })) }));
-    }
-}
+const Collapse = ({ opened, children }) => opened ? (0, jsx_runtime_1.jsx)(react_native_1.View, { children: children }) : null;
 exports.Collapse = Collapse;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: ({ opened, children }: {
+        opened: boolean;
+        children: import("react").ReactNode;
+    }) => JSX.Element | null;
+};
+export default _default;
+export declare const Something: () => JSX.Element;

package/dist/elements/Collapse/Collapse.stories.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Something = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require(".");
+const Text_1 = require("../Text");
+exports.default = {
+    title: "Collapse",
+    component: _1.Collapse,
+};
+const Something = () => {
+    const [opened, setOpened] = (0, react_1.useState)(true);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.LinkText, { onPress: () => setOpened((v) => !v), children: "toggle" }), (0, jsx_runtime_1.jsx)(_1.Collapse, { opened: opened, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "inside" }) })] }));
+};
+exports.Something = Something;

package/dist/elements/Text/Text.js

@@ -20,8 +20,21 @@ exports.Text = (0, react_1.forwardRef)(({ variant = "sm", italic = false, color
             { textAlignVertical: "center" },
             { textDecorationLine: !!underline ? "underline" : "none" },
             style, // keep last so we can override
-        ], fontFamily: fontFamily, ...theme.textTreatments[variant], children: children, color: color, ...restProps }));
+        ], fontFamily: fontFamily, ...fixTextTreatmentForStyledComponent(theme.textTreatments[variant]), children: children, color: color, ...restProps }));
 });
+const fixTextTreatmentForStyledComponent = (treatment) => {
+    const treatmentWithUnits = { ...treatment };
+    if (treatment.fontSize !== undefined) {
+        treatmentWithUnits.fontSize = `${treatment.fontSize}px`;
+    }
+    if (treatment.lineHeight !== undefined) {
+        treatmentWithUnits.lineHeight = `${treatment.lineHeight}px`;
+    }
+    if (treatment.letterSpacing !== undefined) {
+        treatmentWithUnits.letterSpacing = `${treatment.letterSpacing}em`;
+    }
+    return treatmentWithUnits;
+};
 const InnerStyledText = (0, native_1.default)(react_native_1.Text) `
   ${styled_system_1.color}
   ${styled_system_1.space}

package/dist/hooks.js

@@ -6,4 +6,3 @@ const useColor = () => (0, Theme_1.useTheme)().color;
 exports.useColor = useColor;
 const useSpace = () => (0, Theme_1.useTheme)().space;
 exports.useSpace = useSpace;
-// ignore this comment

package/dist/setupJest.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/setupJest.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// @ts-expect-error
+global.__TEST__ = true;
+// @ts-expect-error
+const mock_1 = __importDefault(require("react-native-safe-area-context/jest/mock"));
+jest.mock("react-native-safe-area-context", () => mock_1.default);
+jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
+require("react-native-reanimated/src/reanimated2/jestUtils").setUpTests();
+// @ts-expect-error
+global.__reanimatedWorkletInit = () => { };
+jest.mock("react-native-reanimated", () => require("react-native-reanimated/mock"));

package/dist/tokens.d.ts

@@ -4,7 +4,8 @@
  * https://www.notion.so/artsy/Master-Library-810612339f474d0997fe359af4285c56
  */
 import { SpacingUnit as SpacingUnitV3Numbers } from "@artsy/palette-tokens/dist/themes/v3";
-import { TextVariant as TextVariantV3 } from "@artsy/palette-tokens/dist/typography/v3";
+import { TextTreatment as TextTreatmentWithUnits, TextVariant as TextVariantV3 } from "@artsy/palette-tokens/dist/typography/v3";
+export type { TextTreatmentWithUnits };
 type SpacingUnitV3 = `${SpacingUnitV3Numbers}`;
 export type { SpacingUnitV3 };
 type SpacingUnitPixels = number & {};
@@ -12,14 +13,14 @@ type SpacingUnitStringPixels = `${number}px` & {};
 export type SpacingUnitStrict = SpacingUnitV3;
 export type SpacingUnit = SpacingUnitStrict | SpacingUnitPixels | SpacingUnitStringPixels;
 export type ColorCssString = string & {};
-export declare const NAMED_LAYER_NAMES: readonly ["black100", "black60", "black30", "black15", "black10", "black5", "white100", "blue150", "blue100", "brand", "blue10", "green150", "green100", "green10", "yellow150", "yellow100", "yellow10", "orange150", "orange100", "orange10", "red150", "red100", "red10", "devpurple"];
+export declare const NAMED_LAYER_NAMES: readonly ["black100", "black60", "black30", "black15", "black10", "black5", "white100", "blue150", "blue100", "blue10", "green150", "green100", "green10", "yellow150", "yellow100", "yellow10", "orange150", "orange100", "orange10", "red150", "red100", "red10", "devpurple"];
 export type ColorNamedLayer = typeof NAMED_LAYER_NAMES[number];
-export declare const USAGE_LAYER_NAMES: readonly ["background", "surface", "primary", "secondary", "brand", "onBackground", "onBackgroundHigh", "onBackgroundMedium", "onBackgroundLow", "onSurface", "onSurfaceHigh", "onSurfaceMedium", "onSurfaceLow", "onPrimaryHigh", "onPrimaryMedium", "onPrimaryLow", "onSecondaryHigh", "onSecondaryMedium", "onSecondaryLow", "onBrand"];
+export declare const USAGE_LAYER_NAMES: readonly ["background", "onBackground", "onBackgroundHigh", "onBackgroundMedium", "onBackgroundLow", "surface", "onSurface", "onSurfaceHigh", "onSurfaceMedium", "onSurfaceLow", "primary", "onPrimaryHigh", "onPrimaryMedium", "onPrimaryLow", "secondary", "onSecondaryHigh", "onSecondaryMedium", "onSecondaryLow", "brand", "onBrand"];
 export type ColorUsageLayer = typeof USAGE_LAYER_NAMES[number];
 export type ColorStrict = ColorNamedLayer | ColorUsageLayer;
 export type Color = ColorNamedLayer | ColorUsageLayer | ColorCssString;
-export declare const isUsageLayerName: (name: Color) => name is "brand" | "background" | "surface" | "primary" | "secondary" | "onBackground" | "onBackgroundHigh" | "onBackgroundMedium" | "onBackgroundLow" | "onSurface" | "onSurfaceHigh" | "onSurfaceMedium" | "onSurfaceLow" | "onPrimaryHigh" | "onPrimaryMedium" | "onPrimaryLow" | "onSecondaryHigh" | "onSecondaryMedium" | "onSecondaryLow" | "onBrand";
-export declare const isNamedLayerName: (name: Color) => name is "black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue150" | "blue100" | "brand" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10" | "devpurple";
+export declare const isUsageLayerName: (name: Color) => name is "background" | "onBackground" | "onBackgroundHigh" | "onBackgroundMedium" | "onBackgroundLow" | "surface" | "onSurface" | "onSurfaceHigh" | "onSurfaceMedium" | "onSurfaceLow" | "primary" | "onPrimaryHigh" | "onPrimaryMedium" | "onPrimaryLow" | "secondary" | "onSecondaryHigh" | "onSecondaryMedium" | "onSecondaryLow" | "brand" | "onBrand";
+export declare const isNamedLayerName: (name: Color) => name is "black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue150" | "blue100" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10" | "devpurple";
 export interface TextTreatment {
     fontSize: number;
     lineHeight: number;
@@ -41,7 +42,7 @@ export declare const THEMES: {
             "6": number;
             "12": number;
         };
-        colors: Record<"black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue150" | "blue100" | "brand" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10" | "devpurple", string>;
+        colors: Record<"black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue150" | "blue100" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10" | "devpurple", string>;
         fonts: {
             sans: {
                 regular: string;

package/dist/tokens.js

@@ -32,7 +32,6 @@ exports.NAMED_LAYER_NAMES = [
     "white100",
     "blue150",
     "blue100",
-    "brand",
     "blue10",
     "green150",
     "green100",
@@ -50,27 +49,28 @@ exports.NAMED_LAYER_NAMES = [
     "devpurple",
 ];
 exports.USAGE_LAYER_NAMES = [
-    // Anything big/surface: background, cards, button fills, etc.
+    // name: Anything big/surface: background, cards, button fills, etc.
+    // onName: Anything small, texts, icons, etc.
+    // onNameContrast: Anything small, texts, icons, etc based on contrast.
     "background",
-    "surface",
-    "primary",
-    "secondary",
-    "brand",
-    // Anything small, texts, icons, etc.
     "onBackground",
     "onBackgroundHigh",
     "onBackgroundMedium",
     "onBackgroundLow",
+    "surface",
     "onSurface",
     "onSurfaceHigh",
     "onSurfaceMedium",
     "onSurfaceLow",
+    "primary",
     "onPrimaryHigh",
     "onPrimaryMedium",
     "onPrimaryLow",
+    "secondary",
     "onSecondaryHigh",
     "onSecondaryMedium",
     "onSecondaryLow",
+    "brand",
     "onBrand",
 ];
 const isUsageLayerName = (name) => {
@@ -139,11 +139,11 @@ exports.THEMES = {
                 onSurface: this.v3.colors.black100,
                 onSurfaceHigh: this.v3.colors.black100,
                 onSurfaceMedium: this.v3.colors.black60,
-                onSurfaceLow: this.v3.colors.black10,
+                onSurfaceLow: this.v3.colors.black5,
                 primary: this.v3.colors.black100,
                 onPrimaryHigh: this.v3.colors.white100,
-                onPrimaryMedium: this.v3.colors.black10,
-                onPrimaryLow: this.v3.colors.black10,
+                onPrimaryMedium: this.v3.colors.black5,
+                onPrimaryLow: this.v3.colors.black5,
                 secondary: this.v3.colors.black30,
                 onSecondaryHigh: this.v3.colors.black100,
                 onSecondaryMedium: this.v3.colors.black60,
@@ -178,8 +178,8 @@ exports.THEMES = {
                 onPrimaryLow: this.v3.colors.black60,
                 secondary: this.v3.colors.black60,
                 onSecondaryHigh: this.v3.colors.white100,
-                onSecondaryMedium: this.v3.colors.black10,
-                onSecondaryLow: this.v3.colors.black10,
+                onSecondaryMedium: this.v3.colors.black5,
+                onSecondaryLow: this.v3.colors.black5,
                 brand: this.v3.colors.blue100,
                 onBrand: this.v3.colors.white100,
             },

package/dist/utils/tests/renderWithWrappers.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from "react";
+/**
+ * Renders a React Component with our page wrappers
+ * by using @testing-library/react-native
+ * @param component
+ */
+export declare const renderWithWrappers: (component: ReactElement) => any;
+export declare const Providers: ({ children }: {
+    children?: React.ReactNode;
+}) => JSX.Element;

package/dist/utils/tests/renderWithWrappers.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Providers = exports.renderWithWrappers = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const react_native_1 = require("@testing-library/react-native");
+const Theme_1 = require("../../Theme");
+/**
+ * Renders a React Component with our page wrappers
+ * by using @testing-library/react-native
+ * @param component
+ */
+const renderWithWrappers = (component) => {
+    try {
+        return (0, react_native_1.render)(component, { wrapper: exports.Providers });
+    }
+    catch (error) {
+        throw new Error(error.stack);
+    }
+};
+exports.renderWithWrappers = renderWithWrappers;
+const Providers = ({ children }) => ((0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaProvider, { children: (0, jsx_runtime_1.jsx)(Theme_1.Theme, { children: children }) }));
+exports.Providers = Providers;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "6.1.0",
+  "version": "7.0.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",
@@ -19,7 +19,8 @@
     "setup:artsy": "./scripts/download-fonts",
     "start": "react-native start",
     "storybook-watcher": "sb-rn-watcher",
-    "test": "jest"
+    "test": "jest",
+    "test:w": "jest --watch"
   },
   "dependenciesComments": [
     "ONLY ADD DEPS THAT ARE OK TO SHIP WITH THIS LIBRARY.",
@@ -32,7 +33,6 @@
     "events": "^3.3.0",
     "lodash": "^4.17.21",
     "react-nanny": "^2.15.0",
-    "react-spring": "8.0.22",
     "styled-components": "^5.3.6",
     "styled-system": "^5.1.5"
   },
@@ -51,48 +51,54 @@
     "@auto-it/all-contributors": "^10.37.6",
     "@auto-it/first-time-contributor": "^10.37.6",
     "@babel/core": "^7.20.12",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@babel/runtime": "^7.20.7",
-    "@react-native-async-storage/async-storage": "^1.17.11",
-    "@storybook/react-native": "^6.0.1-beta.11",
+    "@babel/runtime": "^7.20.13",
+    "@react-native-async-storage/async-storage": "1.17.11",
+    "@storybook/react-native": "^6.0.1-beta.12",
+    "@testing-library/jest-native": "5.4.1",
+    "@testing-library/react-native": "11.5.1",
     "@tsconfig/react-native": "^2.0.3",
     "@types/events": "^3.0.0",
-    "@types/jest": "^29.2.5",
-    "@types/lodash": "^4.14.191",
+    "@types/jest": "29.4.0",
+    "@types/lodash": "4.14.191",
     "@types/react-native": "^0.70.8",
     "@types/react-test-renderer": "^18.0.0",
     "@types/styled-components": "^5.1.26",
-    "@types/styled-components-react-native": "^5.2.0",
+    "@types/styled-components-react-native": "^5.2.1",
     "@types/styled-system": "^5.1.16",
     "@types/styled-system__core": "^5.1.3",
     "@types/styled-system__theme-get": "^5.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "@typescript-eslint/parser": "^5.48.0",
-    "auto": "^10.37.6",
-    "babel-jest": "^29.3.1",
-    "eslint": "^8.31.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-import": "^2.26.0",
+    "@typescript-eslint/eslint-plugin": "5.50.0",
+    "@typescript-eslint/parser": "^5.50.0",
+    "auto": "10.37.6",
+    "babel-jest": "29.4.1",
+    "eslint": "8.33.0",
+    "eslint-config-prettier": "8.6.0",
+    "eslint-import-resolver-typescript": "3.5.3",
+    "eslint-plugin-import": "2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-storybook": "^0.6.8",
-    "jest": "^29.3.1",
-    "jotai": "^1.12.1",
-    "metro-react-native-babel-preset": "^0.73.7",
+    "eslint-plugin-storybook": "0.6.10",
+    "jest": "29.4.1",
+    "jest-environment-jsdom": "29.4.1",
+    "jest-extended": "3.2.3",
+    "jest-watch-typeahead": "2.2.2",
+    "jotai": "1.12.1",
+    "metro-react-native-babel-preset": "0.73.7",
     "react": "18.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "18.2.0",
     "react-native": "0.70.6",
-    "react-native-flipper": "^0.176.1",
-    "react-native-haptic-feedback": "^1.14.0",
-    "react-native-linear-gradient": "^2.6.2",
-    "react-native-reanimated": "^2.13.0",
+    "react-native-flipper": "0.177.0",
+    "react-native-haptic-feedback": "1.14.0",
+    "react-native-linear-gradient": "2.6.2",
+    "react-native-reanimated": "2.14.4",
     "react-native-safe-area-context": "^4.4.1",
-    "react-native-svg": "^13.7.0",
-    "react-test-renderer": "^18.2.0",
-    "rimraf": "^3.0.2",
-    "rn-flipper-async-storage-advanced": "^1.0.4",
-    "typescript": "^4.9.4"
+    "react-native-svg": "13.7.0",
+    "react-test-renderer": "18.2.0",
+    "rimraf": "4.1.2",
+    "rn-flipper-async-storage-advanced": "1.0.4",
+    "typescript": "4.9.5"
   },
   "files": [
     "dist"