@artsy/palette-mobile 3.1.0 → 3.2.0

package/dist/Theme.d.ts

@@ -13,7 +13,6 @@ export declare const useTheme: () => {
     color: ColorFuncOverload;
     space: (spaceName: SpacingUnit) => number;
 };
-export declare const isThemeV3: (theme: AllThemesType) => boolean;
 /**
  * Only use this if it's are absolutely neccessary, and only in tests.
  */

package/dist/Theme.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports._test_THEMES = exports.isThemeV3 = exports.useTheme = exports.Theme = void 0;
+exports._test_THEMES = exports.useTheme = exports.Theme = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remeda_1 = require("remeda");
@@ -37,7 +37,7 @@ const useTheme = () => {
         console.error("You are trying to use the `Theme` but you have not wrapped your component/screen with `<Theme>`. Please wrap and try again.");
         throw new Error("ThemeContext is not defined. Wrap your component with `<Theme>` and try again.");
     }
-    const themeIfUnwrapped = tokens_1.THEMES.v3;
+    const themeIfUnwrapped = tokens_1.THEMES.v5light;
     return {
         theme: theme ?? themeIfUnwrapped,
         color: color(theme ?? themeIfUnwrapped),
@@ -45,8 +45,6 @@ const useTheme = () => {
     };
 };
 exports.useTheme = useTheme;
-const isThemeV3 = (theme) => theme.id === "v3";
-exports.isThemeV3 = isThemeV3;
 /**
  * Only use this if it's are absolutely neccessary, and only in tests.
  */

package/dist/elements/Avatar/Avatar.d.ts

@@ -1,14 +1,12 @@
 import { ImgHTMLAttributes } from "react";
+declare type AvatarSize = "xxs" | "xs" | "sm" | "md";
 export interface AvatarProps extends ImgHTMLAttributes<any> {
     src?: string;
     /** If an image is missing, show initials instead */
     initials?: string;
     /** The size of the Avatar */
-    size?: "xxs" | "xs" | "sm" | "md";
+    size?: AvatarSize;
 }
 /** A circular Avatar component containing an image or initials */
 export declare const Avatar: ({ src, initials, size }: AvatarProps) => JSX.Element;
-export declare const InitialsHolder: import("styled-components").StyledComponent<{
-    ({ backgroundColor, ...restProps }: import("../../atoms").BoxProps): JSX.Element;
-    displayName: string;
-}, any, {}, never>;
+export {};

package/dist/elements/Avatar/Avatar.js

@@ -1,40 +1,34 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InitialsHolder = exports.Avatar = void 0;
+exports.Avatar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const theme_get_1 = require("@styled-system/theme-get");
 const react_native_1 = require("react-native");
-const native_1 = __importDefault(require("styled-components/native"));
-const styled_system_1 = require("styled-system");
 const atoms_1 = require("../../atoms");
 const hooks_1 = require("../../hooks");
 const Text_1 = require("../Text");
 const DEFAULT_SIZE = "md";
-const SIZES = {
+const VARIANTS = {
     xxs: {
         diameter: 30,
-        typeSize: "13",
+        textSize: "xs",
     },
     xs: {
         diameter: 45,
-        typeSize: "13",
+        textSize: "sm-display",
     },
     sm: {
         diameter: 70,
-        typeSize: "16",
+        textSize: "md",
     },
     md: {
         diameter: 100,
-        typeSize: "24",
+        textSize: "lg-display",
     },
 };
 /** A circular Avatar component containing an image or initials */
 const Avatar = ({ src, initials, size = DEFAULT_SIZE }) => {
     const color = (0, hooks_1.useColor)();
-    const { diameter, typeSize } = SIZES[size];
+    const { diameter, textSize } = VARIANTS[size];
     if (src) {
         return ((0, jsx_runtime_1.jsx)(react_native_1.Image, { resizeMode: "cover", style: {
                 width: diameter,
@@ -42,16 +36,8 @@ const Avatar = ({ src, initials, size = DEFAULT_SIZE }) => {
                 borderRadius: diameter / 2,
                 borderColor: color("white100"),
                 borderWidth: 1,
-            }, source: {
-                uri: src,
-            } }));
+            }, source: { uri: src } }));
     }
-    return ((0, jsx_runtime_1.jsx)(exports.InitialsHolder, { width: diameter, height: diameter, justifyContent: "center", alignItems: "center", borderRadius: diameter, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: typeSize, lineHeight: diameter, children: initials }) }));
+    return ((0, jsx_runtime_1.jsx)(atoms_1.Flex, { width: diameter, height: diameter, borderColor: "black10", borderWidth: 1, borderRadius: diameter, overflow: "hidden", alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: textSize, children: initials }) }));
 };
 exports.Avatar = Avatar;
-exports.InitialsHolder = (0, native_1.default)(atoms_1.Flex) `
-  border: ${(0, theme_get_1.themeGet)("colors.black10")};
-  text-align: center;
-  overflow: hidden;
-  ${styled_system_1.borderRadius}
-`;

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

@@ -0,0 +1,7 @@
+import { AvatarProps } from "./Avatar";
+declare const _default: {
+    title: string;
+    component: ({ src, initials, size }: AvatarProps) => JSX.Element;
+};
+export default _default;
+export declare function Variants(): JSX.Element;

package/dist/elements/Avatar/Avatar.stories.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Variants = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const storybookHelpers_1 = require("../../storybookHelpers");
+const Avatar_1 = require("./Avatar");
+exports.default = {
+    title: "Avatar",
+    component: Avatar_1.Avatar,
+};
+const sizes = ["md", "sm", "xs", "xxs"];
+function Variants() {
+    return ((0, jsx_runtime_1.jsxs)(storybookHelpers_1.List, { children: [(0, jsx_runtime_1.jsx)(storybookHelpers_1.Row, { children: sizes.map((s) => ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { initials: "A", size: s }, s))) }), (0, jsx_runtime_1.jsx)(storybookHelpers_1.Row, { children: sizes.map((s) => ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { initials: "AA", size: s }, s))) }), (0, jsx_runtime_1.jsx)(storybookHelpers_1.Row, { children: sizes.map((s) => ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { src: "https://placekitten.com/300/300", size: s }, s))) })] }));
+}
+exports.Variants = Variants;

package/dist/elements/Checkbox/Checkbox.d.ts

@@ -1,15 +1,15 @@
 /// <reference types="react" />
-/// <reference types="styled-components-react-native" />
-import { TouchableWithoutFeedbackProps } from "react-native";
-import { FlexProps } from "../../atoms";
-export interface CheckboxProps extends TouchableWithoutFeedbackProps, FlexProps {
+import { TouchableProps } from "../../elements";
+declare type DisplayState = "unpressed" | "pressed";
+export interface CheckboxProps {
     checked?: boolean;
     disabled?: boolean;
     error?: boolean;
     text?: React.ReactElement | string;
     subtitle?: React.ReactElement | string;
-    children?: React.ReactElement | string;
+    onPress?: TouchableProps["onPress"];
+    /** Used only for tests and stories */
+    testOnly_state?: DisplayState;
 }
-export declare const Checkbox: ({ checked: checkedProp, disabled, error, onPress, style, text, subtitle, children, ...restProps }: CheckboxProps) => JSX.Element;
-export declare const CheckMark: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
-export declare const DisabledMark: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof JSX.IntrinsicElements, any, {}, never>;
+export declare const Checkbox: ({ checked: checkedProp, disabled, error, onPress, text, subtitle, testOnly_state, }: CheckboxProps) => JSX.Element;
+export {};

package/dist/elements/Checkbox/Checkbox.js

@@ -1,96 +1,105 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DisabledMark = exports.CheckMark = exports.Checkbox = void 0;
+exports.Checkbox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const theme_get_1 = require("@styled-system/theme-get");
+const elements_1 = require("../../elements");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
-const native_1 = __importDefault(require("styled-components/native"));
-const animation_1 = require("../../animation");
 const atoms_1 = require("../../atoms");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
 const Theme_1 = require("../../Theme");
 const Text_1 = require("../Text");
-const CHECKBOX_SIZE = 20;
-const DURATION = 250;
-const Checkbox = ({ checked: checkedProp, disabled, error, onPress, style, text, subtitle, children, ...restProps }) => {
+const hooks_1 = require("../../hooks");
+const CHECKBOX_SIZEx1 = 20;
+const ANIMATION_DURATION = 250;
+const Checkbox = ({ checked: checkedProp, disabled, error, onPress, text, subtitle, testOnly_state, }) => {
     const { color, space } = (0, Theme_1.useTheme)();
     const fontScale = react_native_1.PixelRatio.getFontScale();
-    const checkboxSize = CHECKBOX_SIZE * fontScale;
-    const [checked, setChecked] = (0, react_1.useState)(checkedProp);
-    const isChecked = checkedProp ?? checked;
-    const defaultCheckboxStyle = {
-        backgroundColor: color("white100"),
-        borderColor: color("black60"),
-    };
-    const checkedCheckboxStyle = {
-        backgroundColor: color("black100"),
-        borderColor: color("black100"),
-    };
-    const disabledCheckboxStyle = {
-        backgroundColor: color("black5"),
-        borderColor: color("black10"),
+    const checkboxSize = CHECKBOX_SIZEx1 * fontScale;
+    const [checked, setChecked] = (0, react_1.useState)(checkedProp ?? false);
+    const [displayState, setDisplayState] = (0, react_1.useState)(testOnly_state ?? "unpressed");
+    const containerColor = {
+        unchecked: { border: color("black100"), background: color("white100") },
+        error: { border: color("red100"), background: color("white100") },
+        checked: { border: color("black100"), background: color("black100") },
+        disabled: { border: color("black30"), background: color("black30") },
     };
-    const checkboxStyles = {
-        default: {
-            unchecked: defaultCheckboxStyle,
-            checked: checkedCheckboxStyle,
-        },
-        error: {
-            unchecked: { backgroundColor: color("white100"), borderColor: color("red100") },
-            checked: checkedCheckboxStyle,
-        },
-    };
-    const checkboxStyle = disabled
-        ? disabledCheckboxStyle
-        : checkboxStyles[error ? "error" : "default"][isChecked ? "checked" : "unchecked"];
-    const textColor = error ? color("red100") : disabled ? color("black30") : color("black100");
-    const subtitleColor = error ? color("red100") : color("black30");
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: (event) => {
-            if (disabled) {
+    const toggleProgress = (0, react_native_reanimated_1.useDerivedValue)(() => (0, react_native_reanimated_1.withTiming)(checked ? 1 : 0, { duration: ANIMATION_DURATION }));
+    const toggleAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        backgroundColor: (0, react_native_reanimated_1.interpolateColor)(toggleProgress.value, [0, 1], [
+            containerColor.unchecked.background,
+            disabled ? containerColor.disabled.background : containerColor.checked.background,
+        ]),
+        borderColor: (0, react_native_reanimated_1.interpolateColor)(toggleProgress.value, [0, 1], [
+            error
+                ? containerColor.error.border
+                : disabled
+                    ? containerColor.disabled.border
+                    : containerColor.unchecked.border,
+            disabled ? containerColor.disabled.border : containerColor.checked.border,
+        ]),
+    }), [toggleProgress]);
+    const pressedStateProgress = (0, react_native_reanimated_1.useDerivedValue)(() => (0, react_native_reanimated_1.withTiming)(displayState === "pressed" ? 1 : 0, { duration: ANIMATION_DURATION }));
+    const textColor = color(error ? "red100" : disabled ? "onBackgroundLow" : "onBackgroundHigh");
+    const pressedTextColor = color("brand");
+    const pressAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        color: (0, react_native_reanimated_1.interpolateColor)(pressedStateProgress.value, [0, 1], [textColor, pressedTextColor]),
+    }), [pressedStateProgress]);
+    const subtitleColor = error
+        ? "red100"
+        : disabled
+            ? "onBackgroundLow"
+            : "onBackgroundMedium";
+    return ((0, jsx_runtime_1.jsx)(elements_1.Touchable, { noFeedback: true, disabled: disabled, onPressIn: () => setDisplayState("pressed"), onPressOut: () => setDisplayState("unpressed"), onPress: (event) => {
+            if (disabled)
                 return;
-            }
             setChecked(!checked);
             onPress?.(event);
-        }, children: (0, jsx_runtime_1.jsxs)(atoms_1.Flex, { flex: 1, ...restProps, children: [(0, jsx_runtime_1.jsxs)(atoms_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(atoms_1.Flex, { mt: "2px", children: (0, jsx_runtime_1.jsx)(animation_1.CssTransition, { style: [
-                                    styles(fontScale).container,
-                                    text || subtitle || children ? { marginRight: space("1") * fontScale } : {},
-                                    checkboxStyle,
-                                ], animate: ["backgroundColor", "borderColor"], duration: DURATION, children: !!isChecked &&
-                                    (!!disabled ? ((0, jsx_runtime_1.jsx)(exports.DisabledMark, { size: checkboxSize })) : ((0, jsx_runtime_1.jsx)(exports.CheckMark, { size: checkboxSize }))) }) }), (0, jsx_runtime_1.jsxs)(atoms_1.Flex, { justifyContent: "center", flex: 1, children: [!!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", color: textColor, children: text })), children] })] }), !!subtitle && ((0, jsx_runtime_1.jsx)(atoms_1.Flex, { ml: (CHECKBOX_SIZE + space("1")) * fontScale, mt: "6px", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: subtitleColor, children: subtitle }) }))] }) }));
+        }, children: (0, jsx_runtime_1.jsxs)(atoms_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsxs)(atoms_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
+                                {
+                                    width: checkboxSize,
+                                    height: checkboxSize,
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    borderWidth: 1,
+                                },
+                                toggleAnim,
+                            ], children: checked && (0, jsx_runtime_1.jsx)(Checkmark, { size: checkboxSize }) }), (0, jsx_runtime_1.jsx)(atoms_1.Flex, { ml: "1", flex: 1, children: !!text && ((0, jsx_runtime_1.jsxs)(AText, { variant: "sm-display", color: textColor, numberOfLines: 2, underline: displayState === "pressed", style: pressAnim, children: [text, " ", displayState] })) })] }), !!subtitle && ((0, jsx_runtime_1.jsx)(atoms_1.Flex, { ml: (checkboxSize + space("1")) * fontScale, mt: "0.5", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: subtitleColor, children: subtitle }) }))] }) }));
 };
 exports.Checkbox = Checkbox;
-// styled-component does not have support for Animated.View
-const styles = (fontScale) => react_native_1.StyleSheet.create({
-    container: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        borderWidth: 1,
-        borderStyle: "solid",
-        width: CHECKBOX_SIZE * fontScale,
-        height: CHECKBOX_SIZE * fontScale,
-    },
-});
-// This component represents the √ mark in CSS. We are not using styled-system since it's easier to specify raw CSS
-// properties with styled-component.
-exports.CheckMark = native_1.default.View.attrs({}) `
-  transform: rotate(-45deg);
-  top: -12%;
-  width: ${(props) => 
-// @ts-expect-error
-props.size * 0.625};
-  height: ${(props) => 
-// @ts-expect-error
-props.size * 0.3125};
-  border-bottom-color: white;
-  border-bottom-width: 2px;
-  border-left-color: white;
-  border-left-width: 2px;
-`;
-exports.DisabledMark = (0, native_1.default)(exports.CheckMark) `
-  border-bottom-color: ${(0, theme_get_1.themeGet)("colors.black30")};
-  border-left-color: ${(0, theme_get_1.themeGet)("colors.black30")};
-`;
+const AText = react_native_reanimated_1.default.createAnimatedComponent(Text_1.Text);
+function Checkmark({ size }) {
+    const color = (0, hooks_1.useColor)();
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+            width: size * 0.625,
+            height: size * 0.3125,
+            borderColor: color("white100"),
+            borderBottomWidth: 2,
+            borderLeftWidth: 2,
+            transform: [{ rotate: "-45deg" }],
+            top: -2,
+        } }));
+}

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

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: ({ checked: checkedProp, disabled, error, onPress, text, subtitle, testOnly_state, }: import("./Checkbox").CheckboxProps) => JSX.Element;
+};
+export default _default;
+export declare function Variants(): JSX.Element;

package/dist/elements/Checkbox/Checkbox.stories.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Variants = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const storybookHelpers_1 = require("../../storybookHelpers");
+const Checkbox_1 = require("./Checkbox");
+exports.default = {
+    title: "Checkbox",
+    component: Checkbox_1.Checkbox,
+};
+function Variants() {
+    return ((0, jsx_runtime_1.jsxs)(storybookHelpers_1.List, { style: { marginLeft: 20 }, children: [(0, jsx_runtime_1.jsx)(storybookHelpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Default" }) }), (0, jsx_runtime_1.jsx)(storybookHelpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Pressed", testOnly_state: "pressed" }) }), (0, jsx_runtime_1.jsx)(storybookHelpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Checked", checked: true }) }), (0, jsx_runtime_1.jsx)(storybookHelpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Disabled", disabled: true }) }), (0, jsx_runtime_1.jsx)(storybookHelpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Checked and disabled", checked: true, disabled: true }) }), (0, jsx_runtime_1.jsx)(storybookHelpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Error", error: true }) }), (0, jsx_runtime_1.jsx)(storybookHelpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: `Default with multiline
+text` }) }), (0, jsx_runtime_1.jsx)(storybookHelpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Disabled", subtitle: "With subtitle", disabled: true }) }), (0, jsx_runtime_1.jsx)(storybookHelpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: `Error with multiline
+text`, subtitle: "With subtitle", error: true }) })] }));
+}
+exports.Variants = Variants;

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

@@ -1,2 +1 @@
 export * from "./Checkbox";
-export * from "./Check";

package/dist/elements/Checkbox/index.js

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Checkbox"), exports);
-__exportStar(require("./Check"), exports);

package/dist/elements/Text/Text.js

@@ -11,20 +11,16 @@ const native_1 = __importDefault(require("styled-components/native"));
 const styled_system_1 = require("styled-system");
 const Theme_1 = require("../../Theme");
 const helpers_1 = require("./helpers");
-exports.Text = (0, react_1.forwardRef)(({ variant = "sm", italic = false, color = "onBackgroundHigh", caps, weight = "regular", underline = false, style, children, ...rest }, ref) => {
+exports.Text = (0, react_1.forwardRef)(({ variant = "sm", italic = false, color = "onBackgroundHigh", caps, weight = "regular", underline = false, style, children, ...restProps }, ref) => {
     const { theme } = (0, Theme_1.useTheme)();
     const fontFamily = (0, helpers_1.useFontFamilyFor)({ italic, weight });
-    if (!(0, Theme_1.isThemeV3)(theme)) {
-        console.warn("Text is missing because null is returned. Wrap your Text with ThemeV3.");
-        return null;
-    }
     const nativeTextStyle = [caps ? { textTransform: "uppercase" } : {}];
     return ((0, jsx_runtime_1.jsx)(InnerStyledText, { ref: ref, style: [
             ...nativeTextStyle,
             { textAlignVertical: "center" },
             { textDecorationLine: !!underline ? "underline" : "none" },
             style, // keep last so we can override
-        ], fontFamily: fontFamily, ...theme.textTreatments[variant], children: children, color: color, ...rest }));
+        ], fontFamily: fontFamily, ...theme.textTreatments[variant], children: children, color: color, ...restProps }));
 });
 const InnerStyledText = (0, native_1.default)(react_native_1.Text) `
   ${styled_system_1.color}

package/dist/elements/Text/helpers.js

@@ -4,9 +4,6 @@ exports.useTextStyleForPalette = exports.useFontFamilyFor = void 0;
 const Theme_1 = require("../../Theme");
 const useFontFamilyFor = ({ italic, weight, }) => {
     const { theme } = (0, Theme_1.useTheme)();
-    if (!(0, Theme_1.isThemeV3)(theme)) {
-        return "no-font";
-    }
     const { fonts } = theme;
     if (italic && weight === "medium") {
         return fonts.sans.mediumItalic;

package/dist/elements/index.d.ts

@@ -6,7 +6,6 @@ export * from "./Button";
 export * from "./Checkbox";
 export * from "./Collapse";
 export * from "./CollapsibleMenuItem";
-export * from "./Dialog";
 export * from "./EntityHeader";
 export * from "./Header";
 export * from "./Histogram";

package/dist/elements/index.js

@@ -22,7 +22,6 @@ __exportStar(require("./Button"), exports);
 __exportStar(require("./Checkbox"), exports);
 __exportStar(require("./Collapse"), exports);
 __exportStar(require("./CollapsibleMenuItem"), exports);
-__exportStar(require("./Dialog"), exports);
 __exportStar(require("./EntityHeader"), exports);
 __exportStar(require("./Header"), exports);
 __exportStar(require("./Histogram"), exports);

package/dist/molecules/MenuItem.js

@@ -8,6 +8,6 @@ const hooks_1 = require("../hooks");
 const svgs_1 = require("../svgs");
 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)(elements_1.Touchable, { onPress: onPress, underlayColor: color("black5"), disabled: disabled, children: (0, jsx_runtime_1.jsxs)(atoms_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", py: "2", px: "2", pr: "15px", children: [(0, jsx_runtime_1.jsx)(atoms_1.Flex, { flexDirection: "row", mr: "2", children: (0, jsx_runtime_1.jsx)(elements_1.Text, { variant: "md", children: title }) }), !!value && ((0, jsx_runtime_1.jsx)(atoms_1.Flex, { flex: 1, children: (0, jsx_runtime_1.jsx)(elements_1.Text, { variant: "md", color: "black60", numberOfLines: 1, textAlign: "right", children: value }) })), !!(onPress && chevron) && (0, jsx_runtime_1.jsx)(atoms_1.Flex, { ml: "1", children: chevron }), !!text && ((0, jsx_runtime_1.jsx)(elements_1.Text, { variant: "md", color: color("black60"), children: text }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(elements_1.Touchable, { onPress: onPress, underlayColor: color("black5"), disabled: disabled, children: (0, jsx_runtime_1.jsxs)(atoms_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", py: "2", px: "2", pr: "15px", children: [(0, jsx_runtime_1.jsx)(atoms_1.Flex, { flexDirection: "row", mr: "2", children: (0, jsx_runtime_1.jsx)(elements_1.Text, { variant: "md", color: "onBackgroundHigh", children: title }) }), !!value && ((0, jsx_runtime_1.jsx)(atoms_1.Flex, { flex: 1, children: (0, jsx_runtime_1.jsx)(elements_1.Text, { variant: "md", color: "black60", numberOfLines: 1, textAlign: "right", children: value }) })), !!(onPress && chevron) && (0, jsx_runtime_1.jsx)(atoms_1.Flex, { ml: "1", children: chevron }), !!text && ((0, jsx_runtime_1.jsx)(elements_1.Text, { variant: "md", color: color("black60"), children: text }))] }) }));
 };
 exports.MenuItem = MenuItem;

package/dist/storybookHelpers.js

@@ -24,5 +24,5 @@ const List = ({ children, contentContainerStyle, style, horizontal, }) => ((0, j
         contentContainerStyle,
     ], style: style }));
 exports.List = List;
-const Row = ({ children }) => ((0, jsx_runtime_1.jsx)(atoms_1.Flex, { width: "100%", flexDirection: "row", justifyContent: "space-evenly", children: children }));
+const Row = ({ children }) => ((0, jsx_runtime_1.jsx)(atoms_1.Flex, { width: "100%", flexDirection: "row", justifyContent: "space-evenly", alignItems: "center", children: children }));
 exports.Row = Row;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "install:all": "yarn install && yarn bundle-install && yarn pod-install",
@@ -13,7 +13,7 @@
     "bundle-install": "bundle install",
     "pod-install": "cd ios && bundle exec pod install && cd ..",
     "test": "jest",
-    "build-lib": "tsc -p tsconfig.lib.json",
+    "build-lib": "tsc",
     "build-lib:clean": "rimraf dist && yarn build-lib",
     "release": "auto shipit",
     "release:canary": "auto canary",
@@ -25,13 +25,13 @@
     "FOR DEPS NEEDED FOR THE STORYBOOK APP, ADD THEM AS DEV DEPS BELOW."
   ],
   "dependencies": {
-    "@artsy/palette-tokens": "^4.0.0",
+    "@artsy/palette-tokens": "^4.0.1",
     "@styled-system/core": "^5.1.2",
     "@styled-system/theme-get": "^5.1.2",
     "events": "^3.3.0",
     "react-nanny": "^2.15.0",
     "react-spring": "8.0.22",
-    "remeda": "^1.1.0",
+    "remeda": "^1.2.0",
     "styled-components": "^5.3.6",
     "styled-system": "^5.1.5"
   },
@@ -43,6 +43,7 @@
     "react-native": "*",
     "react-native-haptic-feedback": "*",
     "react-native-linear-gradient": "*",
+    "react-native-reanimated": "*",
     "react-native-svg": "*"
   },
   "devDependencies": {
@@ -79,6 +80,7 @@
     "react-native": "0.69.5",
     "react-native-haptic-feedback": "^1.14.0",
     "react-native-linear-gradient": "^2.6.2",
+    "react-native-reanimated": "^2.12.0",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-svg": "^13.4.0",
     "react-test-renderer": "^18.2.0",

package/dist/elements/Checkbox/Check.d.ts

@@ -1,8 +0,0 @@
-export declare const CHECK_SIZE = 22;
-export interface CheckProps {
-    disabled?: boolean;
-    error?: boolean;
-    hover?: boolean;
-    selected?: boolean;
-}
-export declare const Check: ({ disabled, selected, ...restProps }: CheckProps) => JSX.Element;

package/dist/elements/Checkbox/Check.js

@@ -1,89 +0,0 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Check = exports.CHECK_SIZE = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const theme_get_1 = require("@styled-system/theme-get");
-const native_1 = __importStar(require("styled-components/native"));
-const atoms_1 = require("../../atoms");
-const CheckIcon_1 = require("../../svgs/CheckIcon");
-exports.CHECK_SIZE = 22;
-const CHECK_MODES = {
-    default: {
-        resting: (0, native_1.css) `
-      background-color: ${(0, theme_get_1.themeGet)("colors.white100")};
-      border-color: ${(0, theme_get_1.themeGet)("colors.black10")};
-    `,
-        selected: (0, native_1.css) `
-      background-color: ${(0, theme_get_1.themeGet)("colors.black100")};
-      border-color: ${(0, theme_get_1.themeGet)("colors.black100")};
-    `,
-    },
-    disabled: {
-        resting: (0, native_1.css) `
-      background-color: ${(0, theme_get_1.themeGet)("colors.black5")};
-      border-color: ${(0, theme_get_1.themeGet)("colors.black10")};
-    `,
-        selected: (0, native_1.css) `
-      background-color: ${(0, theme_get_1.themeGet)("colors.black30")};
-      border-color: ${(0, theme_get_1.themeGet)("colors.black30")};
-    `,
-    },
-    error: {
-        resting: (0, native_1.css) `
-      background-color: ${(0, theme_get_1.themeGet)("colors.white100")};
-      border-color: ${(0, theme_get_1.themeGet)("colors.red100")};
-    `,
-        selected: (0, native_1.css) `
-      background-color: ${(0, theme_get_1.themeGet)("colors.black100")};
-      border-color: ${(0, theme_get_1.themeGet)("colors.black100")};
-    `,
-    },
-};
-const Check = ({ disabled, selected, ...restProps }) => ((0, jsx_runtime_1.jsx)(Container, { disabled: disabled, selected: selected, ...restProps, children: !!selected && (0, jsx_runtime_1.jsx)(CheckIcon_1.CheckIcon, { fill: "white100" }) }));
-exports.Check = Check;
-const Container = (0, native_1.default)(atoms_1.Box) `
-  width: ${exports.CHECK_SIZE}px;
-  height: ${exports.CHECK_SIZE}px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid;
-  border-radius: 1px;
-
-  ${(props) => {
-    const mode = (() => {
-        switch (true) {
-            case props.error:
-                return CHECK_MODES.error;
-            case props.disabled:
-                return CHECK_MODES.disabled;
-            default:
-                return CHECK_MODES.default;
-        }
-    })();
-    return props.selected ? mode.selected : mode.resting;
-}};
-`;

package/dist/elements/Dialog/Dialog.d.ts

@@ -1,14 +0,0 @@
-interface DialogAction {
-    text: string;
-    onPress: () => void;
-}
-export interface DialogProps {
-    isVisible: boolean;
-    title: string;
-    detail?: string;
-    primaryCta: DialogAction;
-    secondaryCta?: DialogAction;
-    onBackgroundPress?: () => void;
-}
-export declare const Dialog: (props: DialogProps) => JSX.Element;
-export {};

package/dist/elements/Dialog/Dialog.js

@@ -1,72 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dialog = 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_safe_area_context_1 = require("react-native-safe-area-context");
-const atoms_1 = require("../../atoms");
-const Theme_1 = require("../../Theme");
-const Button_1 = require("../Button");
-const Text_1 = require("../Text");
-const Dialog = (props) => {
-    const { isVisible, title, detail, primaryCta, secondaryCta, onBackgroundPress, ...other } = props;
-    const [visible, setVisible] = (0, react_1.useState)(isVisible);
-    const { space, color } = (0, Theme_1.useTheme)();
-    const value = (0, react_1.useRef)(new react_native_1.Animated.Value(Number(isVisible))).current;
-    const fadeIn = () => {
-        return new Promise((resolve) => {
-            react_native_1.Animated.timing(value, {
-                toValue: 1,
-                useNativeDriver: true,
-                duration: 180,
-            }).start(resolve);
-        });
-    };
-    const fadeOut = () => {
-        return new Promise((resolve) => {
-            react_native_1.Animated.timing(value, {
-                toValue: 0,
-                useNativeDriver: true,
-                duration: 150,
-            }).start(resolve);
-        });
-    };
-    (0, react_1.useEffect)(() => {
-        if (isVisible) {
-            setVisible(true);
-            fadeIn();
-        }
-        else {
-            fadeOut().then(() => {
-                setVisible(false);
-            });
-        }
-    }, [isVisible]);
-    const backdrop = ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
-            react_native_1.StyleSheet.absoluteFillObject,
-            { opacity: value, backgroundColor: "rgba(194,194,194,0.5)" },
-        ] }));
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.Modal, { ...other, visible: visible, statusBarTranslucent: true, transparent: true, animationType: "none", children: [!!onBackgroundPress ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { testID: "dialog-backdrop", onPress: onBackgroundPress, children: backdrop })) : (backdrop), (0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaView, { pointerEvents: "box-none", style: {
-                    flex: 1,
-                    justifyContent: "center",
-                    alignItems: "center",
-                    padding: space(2),
-                    backgroundColor: "transparent",
-                }, children: (0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: {
-                        width: "100%",
-                        maxHeight: "100%",
-                        opacity: value,
-                        backgroundColor: color("white100"),
-                        borderWidth: 1,
-                        borderColor: color("black5"),
-                        shadowColor: "rgba(0, 0, 0, 0.06)",
-                        shadowOffset: {
-                            height: 2,
-                            width: 0,
-                        },
-                        shadowOpacity: 1,
-                        shadowRadius: 10,
-                    }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { testID: "dialog-title", variant: "md", mb: 0.5, mt: 2, mx: 2, children: title }), !!detail && ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { alwaysBounceVertical: false, contentContainerStyle: { paddingHorizontal: space(2) }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { testID: "dialog-detail", variant: "sm", color: "black60", children: detail }) })), (0, jsx_runtime_1.jsxs)(atoms_1.Flex, { mt: 2, mb: 2, mx: 2, flexDirection: "row", justifyContent: "flex-end", children: [!!secondaryCta && ((0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", testID: "dialog-secondary-action-button", variant: "text", onPress: secondaryCta.onPress, children: secondaryCta.text })), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", variant: "fillDark", testID: "dialog-primary-action-button", ml: 2, onPress: primaryCta.onPress, children: primaryCta.text })] })] }) })] }));
-};
-exports.Dialog = Dialog;

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

@@ -1 +0,0 @@
-export * from "./Dialog";

package/dist/elements/Dialog/index.js

@@ -1,17 +0,0 @@
-"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("./Dialog"), exports);