@artsy/palette-mobile 17.33.0 → 18.0.0

package/dist/elements/BackButton/BackButton.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronSmallLeftIcon, CloseIcon } from "@artsy/icons/native";
 import { TouchableOpacity } from "react-native";
 import { DEFAULT_HIT_SLOP } from "../../constants";
-import { ChevronIcon, CloseIcon } from "../../svgs";
 import { Flex } from "../Flex";
 export const BackButton = ({ color = "onBackgroundHigh", hitSlop = DEFAULT_HIT_SLOP, onPress, showX = false, style, iconSize = 18, }) => {
-    return (_jsx(TouchableOpacity, { onPress: onPress, hitSlop: hitSlop, accessibilityRole: "button", accessibilityLabel: showX ? "Close" : "Go back", accessibilityHint: showX ? "Dismiss this screen" : "Go back to the previous screen", style: style, children: showX ? (_jsx(CloseIcon, { fill: color, width: iconSize, height: iconSize })) : (_jsx(ChevronIcon, { direction: "left", fill: color, height: iconSize, width: iconSize })) }));
+    return (_jsx(TouchableOpacity, { onPress: onPress, hitSlop: hitSlop, accessibilityRole: "button", accessibilityLabel: showX ? "Close" : "Go back", accessibilityHint: showX ? "Dismiss this screen" : "Go back to the previous screen", style: style, children: showX ? (_jsx(CloseIcon, { fill: color, width: iconSize, height: iconSize })) : (_jsx(ChevronSmallLeftIcon, { fill: color, height: iconSize, width: iconSize })) }));
 };
 export const BackButtonWithBackground = ({ color = "onBackgroundHigh", hitSlop = DEFAULT_HIT_SLOP, onPress, showX = false, style, }) => {
-    return (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: showX ? "Close" : "Back", accessibilityHint: showX ? "Closes the modal" : "Navigates to the previous screen", onPress: onPress, hitSlop: hitSlop, children: _jsx(Flex, { backgroundColor: "background", width: 40, height: 40, borderRadius: 20, alignItems: "center", justifyContent: "center", accessibilityRole: "button", accessibilityLabel: showX ? "Close" : "Go back", accessibilityHint: showX ? "Dismiss this screen" : "Go back to the previous screen", style: style, children: showX ? (_jsx(CloseIcon, { fill: color, width: 26, height: 26 })) : (_jsx(ChevronIcon, { fill: color, direction: "left" })) }) }));
+    return (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: showX ? "Close" : "Back", accessibilityHint: showX ? "Closes the modal" : "Navigates to the previous screen", onPress: onPress, hitSlop: hitSlop, children: _jsx(Flex, { backgroundColor: "background", width: 40, height: 40, borderRadius: 20, alignItems: "center", justifyContent: "center", accessibilityRole: "button", accessibilityLabel: showX ? "Close" : "Go back", accessibilityHint: showX ? "Dismiss this screen" : "Go back to the previous screen", style: style, children: showX ? (_jsx(CloseIcon, { fill: color, width: 26, height: 26 })) : (_jsx(ChevronSmallLeftIcon, { fill: color })) }) }));
 };

package/dist/elements/Banner/Banner.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseIcon } from "@artsy/icons/native";
 import { useRef, useState } from "react";
 import { Animated, Easing, TouchableOpacity } from "react-native";
 import { DEFAULT_HIT_SLOP } from "../../constants";
-import { CloseIcon } from "../../svgs";
 import { Flex } from "../Flex";
 import { Text } from "../Text";
 export const Banner = ({ text, onClose, dismissable = false, variant = "defaultLight", children, ...restProps }) => {

package/dist/elements/Button/FollowButton.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckIcon } from "../../svgs/CheckIcon";
+import { CheckmarkIcon } from "@artsy/icons/native";
 import { formatLargeNumber } from "../../utils/formatLargeNumber";
 import { Button } from "../Button";
 import { Text } from "../Text";
 export const FollowButton = ({ isFollowed, followCount, longestText, loading, ...restProps }) => {
-    return (_jsx(Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && !loading && _jsx(CheckIcon, { fill: "mono60", width: "16px", height: "16px" }), loading: loading, ...restProps, children: !loading && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && (_jsx(_Fragment, { children: _jsx(Text, { variant: "xs", color: "mono60", children: " " + formatLargeNumber(followCount, 1) }) }))] })) }));
+    return (_jsx(Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && !loading && _jsx(CheckmarkIcon, { fill: "mono60", width: "16px", height: "16px" }), loading: loading, ...restProps, children: !loading && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && (_jsx(_Fragment, { children: _jsx(Text, { variant: "xs", color: "mono60", children: " " + formatLargeNumber(followCount, 1) }) }))] })) }));
 };

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { BellStrokeIcon, LinkIcon } from "@artsy/icons/native";
 import { capitalize } from "lodash";
 import { useState } from "react";
 import { Button as RNButton } from "react-native";
@@ -7,7 +8,6 @@ import { CTAButton } from "./CTAButton";
 import { FollowButton } from "./FollowButton";
 import { LinkButton } from "./LinkButton";
 import { DataList, List } from "../../storybook/helpers";
-import { BellIcon, LinkIcon } from "../../svgs";
 import { Wrap } from "../../utils/Wrap";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
@@ -42,7 +42,7 @@ export const TheFollowButton = () => {
 };
 export const TheCTAButton = () => (_jsx(List, { children: _jsx(CTAButton, { onPress: () => console.log("pressed"), children: "cta button" }) }));
 export const TheLinkButton = () => (_jsx(List, { children: _jsx(LinkButton, { onPress: () => console.log("pressed"), children: "LinkButton" }) }));
-export const Miscellaneous = () => (_jsxs(List, { children: [_jsx(Button, { loading: true, disabled: true, children: "loading and disabled" }), _jsx(Button, { loading: true, disabled: true, icon: _jsx(LinkIcon, {}), children: "loading and disabled with icon" }), _jsx(Button, { block: true, children: "block" }), _jsx(Flex, { backgroundColor: "orange", width: 400, height: 80, alignItems: "center", justifyContent: "center", children: _jsx(Button, { variant: "fillLight", icon: _jsx(LinkIcon, {}), children: "left icon" }) }), _jsx(Button, { icon: _jsx(LinkIcon, { fill: "mono0" }), iconPosition: "right", children: "right icon" }), _jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "mono0" }), iconPosition: "right", children: "Right Icon Small" }), _jsx(Button, { variant: "fillDark", size: "small", icon: _jsx(BellIcon, { fill: "mono0", width: "16px", height: "16px" }), children: "Create Alert" }), _jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 2, height: "100%", backgroundColor: "green100" }), _jsxs(Box, { children: [_jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "mono0" }), iconPosition: "right", longestText: "this is a very long text", children: "shortest text" }), _jsx(Spacer, { y: 1 }), _jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "mono0" }), iconPosition: "right", longestText: "this is a very long text", children: "this is a very long text" })] }), _jsx(Box, { width: 2, height: "100%", backgroundColor: "green100" })] }), _jsx(Button, { icon: _jsx(LinkIcon, { fill: "mono0" }), block: true, iconPosition: "left-start", children: "left-start aligned icon" })] }));
+export const Miscellaneous = () => (_jsxs(List, { children: [_jsx(Button, { loading: true, disabled: true, children: "loading and disabled" }), _jsx(Button, { loading: true, disabled: true, icon: _jsx(LinkIcon, {}), children: "loading and disabled with icon" }), _jsx(Button, { block: true, children: "block" }), _jsx(Flex, { backgroundColor: "orange", width: 400, height: 80, alignItems: "center", justifyContent: "center", children: _jsx(Button, { variant: "fillLight", icon: _jsx(LinkIcon, {}), children: "left icon" }) }), _jsx(Button, { icon: _jsx(LinkIcon, { fill: "mono0" }), iconPosition: "right", children: "right icon" }), _jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "mono0" }), iconPosition: "right", children: "Right Icon Small" }), _jsx(Button, { variant: "fillDark", size: "small", icon: _jsx(BellStrokeIcon, { fill: "mono0", width: "16px", height: "16px" }), children: "Create Alert" }), _jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 2, height: "100%", backgroundColor: "green100" }), _jsxs(Box, { children: [_jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "mono0" }), iconPosition: "right", longestText: "this is a very long text", children: "shortest text" }), _jsx(Spacer, { y: 1 }), _jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "mono0" }), iconPosition: "right", longestText: "this is a very long text", children: "this is a very long text" })] }), _jsx(Box, { width: 2, height: "100%", backgroundColor: "green100" })] }), _jsx(Button, { icon: _jsx(LinkIcon, { fill: "mono0" }), block: true, iconPosition: "left-start", children: "left-start aligned icon" })] }));
 export const Playground = () => {
     const [loading, setLoading] = useState(false);
     const [disabled, setDisabled] = useState(true);

package/dist/elements/ButtonNew/FollowButton.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckIcon } from "../../svgs/CheckIcon";
+import { CheckmarkIcon } from "@artsy/icons/native";
 import { formatLargeNumber } from "../../utils/formatLargeNumber";
 import { Button } from "../Button";
 import { Text } from "../Text";
 export const FollowButton = ({ isFollowed, followCount, longestText, loading, ...restProps }) => {
-    return (_jsx(Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && !loading && _jsx(CheckIcon, { fill: "mono60", width: "16px", height: "16px" }), loading: loading, ...restProps, children: !loading && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && (_jsx(_Fragment, { children: _jsx(Text, { variant: "xs", color: "mono60", children: " " + formatLargeNumber(followCount, 1) }) }))] })) }));
+    return (_jsx(Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && !loading && _jsx(CheckmarkIcon, { fill: "mono60", width: "16px", height: "16px" }), loading: loading, ...restProps, children: !loading && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && (_jsx(_Fragment, { children: _jsx(Text, { variant: "xs", color: "mono60", children: " " + formatLargeNumber(followCount, 1) }) }))] })) }));
 };

package/dist/elements/Checkbox/Check.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckmarkIcon } from "@artsy/icons/native";
 import { themeGet } from "@styled-system/theme-get";
 import styled, { css } from "styled-components/native";
-import { CheckIcon } from "../../svgs/CheckIcon";
 import { Box } from "../Box";
 export const CHECK_SIZE = 22;
 const CHECK_MODES = {
@@ -38,7 +38,7 @@ const CHECK_MODES = {
 };
 /** Toggeable check mark */
 export const Check = ({ disabled, selected, testID, ...rest }) => {
-    return (_jsx(Container, { disabled: disabled, selected: selected, ...rest, "aria-disabled": disabled, "aria-checked": selected, accessibilityRole: "checkbox", testID: testID, children: !!selected && _jsx(CheckIcon, { fill: "mono0" }) }));
+    return (_jsx(Container, { disabled: disabled, selected: selected, ...rest, "aria-disabled": disabled, "aria-checked": selected, accessibilityRole: "checkbox", testID: testID, children: !!selected && _jsx(CheckmarkIcon, { fill: "mono0" }) }));
 };
 const Container = styled(Box) `
   width: ${CHECK_SIZE}px;

package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckmarkFillIcon, ChevronSmallDownIcon, ChevronSmallUpIcon } from "@artsy/icons/native";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { LayoutAnimation } from "react-native";
-import { CheckCircleIcon, ChevronIcon } from "../../svgs";
 import { Collapse } from "../Collapse";
 import { Flex } from "../Flex";
 import { Text } from "../Text";
@@ -39,5 +39,5 @@ export const CollapsibleMenuItem = forwardRef(({ children, overtitle, title, isE
     return (_jsxs(Flex, { ref: componentRef, collapsable: false, children: [_jsxs(Touchable, { accessibilityRole: "button", accessibilityLabel: "Collapsible Element", accessibilityState: { disabled }, accessibilityHint: "Tap to " + (isOpen ? "collapse" : "expand"), onPress: () => {
                     setIsOpen(!isOpen);
                     isOpen ? onCollapse?.() : onExpand?.();
-                }, disabled: disabled, children: [!!overtitle && (_jsx(Text, { variant: "sm", color: disabled ? "mono30" : "mono100", children: overtitle })), _jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Text, { variant: "lg", color: disabled ? "mono30" : "mono100", style: { maxWidth: "90%" }, children: title }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [!!isCompleted && (_jsx(CheckCircleIcon, { fill: "green100", height: 24, width: 24, style: { marginRight: 5 } })), _jsx(ChevronIcon, { direction: isOpen ? "up" : "down", fill: disabled ? "mono30" : "mono60" })] })] })] }), _jsx(Collapse, { opened: isOpen, children: children })] }));
+                }, disabled: disabled, children: [!!overtitle && (_jsx(Text, { variant: "sm", color: disabled ? "mono30" : "mono100", children: overtitle })), _jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Text, { variant: "lg", color: disabled ? "mono30" : "mono100", style: { maxWidth: "90%" }, children: title }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [!!isCompleted && (_jsx(CheckmarkFillIcon, { fill: "green100", height: 24, width: 24, style: { marginRight: 5 } })), isOpen ? (_jsx(ChevronSmallUpIcon, { fill: disabled ? "mono30" : "mono60" })) : (_jsx(ChevronSmallDownIcon, { fill: disabled ? "mono30" : "mono60" }))] })] })] }), _jsx(Collapse, { opened: isOpen, children: children })] }));
 });

package/dist/elements/EntityHeader/EntityHeader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LockIcon } from "@artsy/icons/native";
 import { isValidElement, useMemo } from "react";
 import { Text as RNText } from "react-native";
-import { LockIcon } from "../../svgs";
 import { bullet } from "../../utils/text";
 import { Avatar } from "../Avatar";
 import { Flex } from "../Flex";

package/dist/elements/Header/ArtsyLogoHeader.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArtsyLogoIcon } from "@artsy/icons/native";
 import { StyleSheet } from "react-native";
-import { ArtsyLogoBlackIcon } from "../../svgs";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
 import { Spacer } from "../Spacer";
-export const ArtsyLogoHeader = ({ shadow = false }) => (_jsxs(_Fragment, { children: [_jsxs(Box, { mt: 2, mb: 1, style: shadow ? styles.boxShadowStyle : {}, children: [_jsx(Flex, { alignItems: "center", children: _jsx(ArtsyLogoBlackIcon, { scale: 0.75 }) }), _jsx(Spacer, { x: 1 })] }), _jsx(Spacer, { x: 2 })] }));
+export const ArtsyLogoHeader = ({ shadow = false }) => (_jsxs(_Fragment, { children: [_jsxs(Box, { mt: 2, mb: 1, style: shadow ? styles.boxShadowStyle : {}, children: [_jsx(Flex, { alignItems: "center", children: _jsx(ArtsyLogoIcon, { height: 32, width: 94 }) }), _jsx(Spacer, { x: 1 })] }), _jsx(Spacer, { x: 2 })] }));
 const styles = StyleSheet.create({
     boxShadowStyle: {
         shadowColor: "black",

package/dist/elements/Input/Input.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { EventEmitter } from "events";
+import { CloseFillIcon, HideIcon, ShowIcon, TriangleDownIcon } from "@artsy/icons/native";
 import { THEME } from "@artsy/palette-tokens";
 import themeGet from "@styled-system/theme-get";
 import isArray from "lodash/isArray";
@@ -10,7 +11,6 @@ import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-na
 import styled from "styled-components";
 import { getInputState, getInputVariant, getInputVariants, } from "./helpers";
 import { maskValue, unmaskText } from "./maskValue";
-import { EyeClosedIcon, EyeOpenedIcon, TriangleDown, XCircleIcon } from "../../svgs";
 import { useTheme } from "../../utils/hooks";
 import { useMeasure } from "../../utils/hooks/useMeasure";
 import { Flex } from "../Flex";
@@ -222,7 +222,7 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
                             justifyContent: "space-between",
                         },
                         selectComponentStyles,
-                    ], children: [_jsx(Text, { color: disabled ? "mono30" : "mono100", children: selectDisplayLabel }), _jsx(TriangleDown, { fill: "mono60", width: 10 })] }) }));
+                    ], children: [_jsx(Text, { color: disabled ? "mono30" : "mono100", children: selectDisplayLabel }), _jsx(TriangleDownIcon, { fill: "mono60", width: 10 })] }) }));
         }
         return null;
     }, [
@@ -248,7 +248,7 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
                     } }) }));
         }
         if (enableClearButton && value) {
-            return (_jsx(Flex, { justifyContent: "center", position: "absolute", right: `${HORIZONTAL_PADDING}px`, top: hasTitle ? LABEL_HEIGHT : 0, height: INPUT_MIN_HEIGHT, zIndex: 100, ref: rightComponentRef, children: _jsx(Touchable, { haptic: "impactMedium", onPress: handleClear, hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, accessibilityRole: "button", accessibilityHint: "Clears the input", accessibilityLabel: "Clear", testID: "clear-input-button", children: _jsx(XCircleIcon, { fill: "mono30" }) }) }));
+            return (_jsx(Flex, { justifyContent: "center", position: "absolute", right: `${HORIZONTAL_PADDING}px`, top: hasTitle ? LABEL_HEIGHT : 0, height: INPUT_MIN_HEIGHT, zIndex: 100, ref: rightComponentRef, children: _jsx(Touchable, { haptic: "impactMedium", onPress: handleClear, hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, accessibilityRole: "button", accessibilityHint: "Clears the input", accessibilityLabel: "Clear", testID: "clear-input-button", children: _jsx(CloseFillIcon, { fill: "mono30" }) }) }));
         }
         if (secureTextEntry) {
             return (_jsx(Flex, { justifyContent: "center", position: "absolute", right: `${HORIZONTAL_PADDING}px`, top: hasTitle ? LABEL_HEIGHT : 0, height: INPUT_MIN_HEIGHT, zIndex: 100, ref: rightComponentRef, children: _jsx(Touchable, { haptic: true, onPress: () => {
@@ -257,7 +257,7 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
                             duration: 200,
                         });
                         setShowPassword(!showPassword);
-                    }, accessibilityRole: "button", accessibilityLabel: showPassword ? "hide password icon" : "show password icon", accessibilityHint: showPassword ? "Hides the password" : "Shows the password", hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, children: !showPassword ? _jsx(EyeClosedIcon, { fill: "mono30" }) : _jsx(EyeOpenedIcon, { fill: "mono60" }) }) }));
+                    }, accessibilityRole: "button", accessibilityLabel: showPassword ? "hide password icon" : "show password icon", accessibilityHint: showPassword ? "Hides the password" : "Shows the password", hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, children: !showPassword ? _jsx(HideIcon, { fill: "mono30" }) : _jsx(ShowIcon, { fill: "mono60" }) }) }));
         }
         return null;
     }, [

package/dist/elements/Input/Input.stories.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "@artsy/icons/native";
 import { storiesOf } from "@storybook/react-native";
 import { Input } from "./Input";
 import { List } from "../../storybook/helpers";
-import { MagnifyingGlassIcon } from "../../svgs";
 import { Join } from "../Join";
 import { Separator } from "../Separator";
 import { Text } from "../Text";
-storiesOf("Input", module).add("Variants", () => (_jsx(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: _jsxs(Join, { separator: _jsx(Separator, { my: 2 }), children: [_jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "Default" }), _jsx(Input, {})] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title" }), _jsx(Input, { title: "Title" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and required" }), _jsx(Input, { title: "Title", required: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and optional" }), _jsx(Input, { title: "Title", optional: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and clear button" }), _jsx(Input, { title: "Title", enableClearButton: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and loading" }), _jsx(Input, { title: "Title", loading: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and icon" }), _jsx(Input, { title: "Title", icon: _jsx(MagnifyingGlassIcon, {}) })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and error" }), _jsx(Input, { title: "Title", error: "this is an error" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and disabled" }), _jsx(Input, { title: "Disabled", disabled: true })] }), _jsx(_Fragment, { children: _jsx(Input, { placeholder: "I'm a placeholder" }) }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title, clear button and value" }), _jsx(Input, { value: "5", enableClearButton: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With fixed right placeholder" }), _jsx(Input, { fixedRightPlaceholder: "cm" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With placeholder" }), _jsx(Input, { placeholder: "I'm a placeholder" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and placeholder" }), _jsx(Input, { title: "full text", value: "Wow this is a long text, I wonder if I can read the whole thing!" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With text limit" }), _jsx(Input, { title: "Text with limit", maxLength: 100, showLimit: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine Without limit" }), _jsx(Input, { title: "Text area", multiline: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine With limit" }), _jsx(Input, { title: "Text area with limit", multiline: true, maxLength: 150, showLimit: true })] })] }) })));
+storiesOf("Input", module).add("Variants", () => (_jsx(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: _jsxs(Join, { separator: _jsx(Separator, { my: 2 }), children: [_jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "Default" }), _jsx(Input, {})] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title" }), _jsx(Input, { title: "Title" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and required" }), _jsx(Input, { title: "Title", required: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and optional" }), _jsx(Input, { title: "Title", optional: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and clear button" }), _jsx(Input, { title: "Title", enableClearButton: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and loading" }), _jsx(Input, { title: "Title", loading: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and icon" }), _jsx(Input, { title: "Title", icon: _jsx(SearchIcon, {}) })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and error" }), _jsx(Input, { title: "Title", error: "this is an error" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and disabled" }), _jsx(Input, { title: "Disabled", disabled: true })] }), _jsx(_Fragment, { children: _jsx(Input, { placeholder: "I'm a placeholder" }) }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title, clear button and value" }), _jsx(Input, { value: "5", enableClearButton: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With fixed right placeholder" }), _jsx(Input, { fixedRightPlaceholder: "cm" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With placeholder" }), _jsx(Input, { placeholder: "I'm a placeholder" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and placeholder" }), _jsx(Input, { title: "full text", value: "Wow this is a long text, I wonder if I can read the whole thing!" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With text limit" }), _jsx(Input, { title: "Text with limit", maxLength: 100, showLimit: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine Without limit" }), _jsx(Input, { title: "Text area", multiline: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine With limit" }), _jsx(Input, { title: "Text area with limit", multiline: true, maxLength: 150, showLimit: true })] })] }) })));

package/dist/elements/Input/helpers.d.ts

@@ -39,5 +39,5 @@ export declare const getInputState: ({ isFocused, value, }: {
 export declare const getInputVariant: ({ disabled, hasError, }: {
     disabled: boolean;
     hasError: boolean;
-}) => "default" | "disabled" | "error";
+}) => "disabled" | "error" | "default";
 export {};

package/dist/elements/LegacyTabs/StepTabs.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckmarkIcon, ChevronSmallRightIcon } from "@artsy/icons/native";
 import { useState } from "react";
 import { TouchableOpacity } from "react-native";
 import { TabBarContainer } from "./TabBarContainer";
-import { CheckIcon, ChevronIcon } from "../../svgs";
 import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
 import { Box } from "../Box";
 import { Tab } from "../LegacyTabs";
@@ -29,6 +29,6 @@ export const StepTabs = ({ onTabPress, activeTab, tabs }) => {
                         });
                     }, children: [_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [_jsx(Tab, { label: label, onPress: () => onTabSelect(label, index), active: activeTab === index, style: { paddingHorizontal: 0, paddingLeft: 8, paddingRight: 5 }, onLayout: () => {
                                         // noop
-                                    } }), !!completed && _jsx(CheckIcon, { fill: "green100", height: 15, width: 15 })] }), _jsx(ChevronIcon, { fill: "mono60", height: 10, width: 10 })] }) }, label + index));
+                                    } }), !!completed && _jsx(CheckmarkIcon, { fill: "green100", height: 15, width: 15 })] }), _jsx(ChevronSmallRightIcon, { fill: "mono60", height: 10, width: 10 })] }) }, label + index));
         }) }));
 };

package/dist/elements/MenuItem/MenuItem.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronIcon } from "../../svgs";
+import { ChevronSmallRightIcon } from "@artsy/icons/native";
 import { useColor } from "../../utils/hooks";
 import { Flex } from "../Flex";
 import { Text } from "../Text";
 import { Touchable } from "../Touchable";
-export const MenuItem = ({ title, text, value, onPress, disabled = false, chevron = _jsx(ChevronIcon, { direction: "right", fill: "mono60" }), }) => {
+export const MenuItem = ({ title, text, value, onPress, disabled = false, chevron = _jsx(ChevronSmallRightIcon, { fill: "mono60" }), }) => {
     const color = useColor();
     return (_jsx(Touchable, { accessibilityRole: "button", accessibilityState: { disabled }, accessibilityLabel: "Menu item ${title}", onPress: onPress, underlayColor: color("mono5"), disabled: disabled, children: _jsxs(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", py: 2, px: 2, pr: "15px", children: [_jsx(Flex, { flexDirection: "row", mr: 2, children: _jsx(Text, { variant: "md", color: "onBackgroundHigh", children: title }) }), !!value && (_jsx(Flex, { flex: 1, children: _jsx(Text, { variant: "md", color: "mono60", numberOfLines: 1, textAlign: "right", children: value }) })), !!(onPress && chevron) && _jsx(Flex, { ml: 1, children: chevron }), !!text && (_jsx(Text, { variant: "md", color: color("mono60"), children: text }))] }) }));
 };

package/dist/elements/Message/Message.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseIcon } from "@artsy/icons/native";
 import { useRef, useState } from "react";
 import { Animated, Easing, TouchableOpacity } from "react-native";
-import { CloseIcon } from "../../svgs";
 import { useColor } from "../../utils/hooks/useColor";
 import { Flex } from "../Flex";
 import { Text } from "../Text";

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

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InfoIcon } from "@artsy/icons/native";
 import { storiesOf } from "@storybook/react-native";
 import { Text } from "react-native";
 import { Message } from "./Message";
 import { withTheme } from "../../storybook/decorators";
 import { List } from "../../storybook/helpers";
-import { InfoCircleIcon } from "../../svgs";
 import { Button } from "../Button";
 storiesOf("Message", module)
     .addDecorator(withTheme)
     .add("Variants", () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [_jsx(Message, { variant: "default", title: "Without Close Button", text: "Text" }), _jsx(Message, { variant: "default", title: "Without Close Button", children: _jsx(Text, { children: "Text" }) }), _jsx(Message, { variant: "default", text: "Without title" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Title", text: "Text" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Title", text: "Very very very very very very very very very very very very very very long text" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Very very very very very very very very very very very very very very long title", text: "Text" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Very very very very very very very very very very very very very very long title", text: "Very very very very very very very very very very very very very very long text" })] })))
     .add("Color Variants", () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [_jsx(Message, { variant: "default", showCloseButton: true, title: "Default", text: "Text" }), _jsx(Message, { variant: "info", showCloseButton: true, title: "Info", text: "Text" }), _jsx(Message, { variant: "success", showCloseButton: true, title: "Success", text: "Text" }), _jsx(Message, { variant: "warning", showCloseButton: true, title: "Warning", text: "Text" }), _jsx(Message, { variant: "error", showCloseButton: true, title: "Error", text: "Text" }), _jsx(Message, { variant: "dark", showCloseButton: true, title: "Error", text: "Text" })] })))
-    .add("IconComponent position", () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [_jsx(Message, { variant: "default", showCloseButton: true, title: "Default position", text: "Text", IconComponent: () => _jsx(InfoCircleIcon, {}) }), _jsx(Message, { iconPosition: "right", variant: "default", showCloseButton: true, title: "Rign", text: "Text", IconComponent: () => _jsx(Button, { size: "small", children: "Click" }) }), _jsx(Message, { iconPosition: "bottom", variant: "default", showCloseButton: true, title: "Bottom", text: "Text", IconComponent: () => {
+    .add("IconComponent position", () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [_jsx(Message, { variant: "default", showCloseButton: true, title: "Default position", text: "Text", IconComponent: () => _jsx(InfoIcon, {}) }), _jsx(Message, { iconPosition: "right", variant: "default", showCloseButton: true, title: "Rign", text: "Text", IconComponent: () => _jsx(Button, { size: "small", children: "Click" }) }), _jsx(Message, { iconPosition: "bottom", variant: "default", showCloseButton: true, title: "Bottom", text: "Text", IconComponent: () => {
                 return _jsx(Button, { size: "small", children: "Click" });
             } }), _jsx(Message, { iconPosition: "bottom", variant: "dark", showCloseButton: true, title: "Bottom, dark", text: "Text", IconComponent: () => {
                 return (_jsx(Button, { variant: "outlineLight", size: "small", children: "Click" }));

package/dist/elements/Pill/Pill.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
+import { IconProps } from "@artsy/icons/native";
 import { MotiPressableProps } from "moti/interactions";
 import { FlattenInterpolation } from "styled-components";
-import { IconProps } from "../../svgs/Icon";
 import { FlexProps } from "../Flex";
 export declare const PILL_VARIANT_NAMES: readonly ["badge", "default", "dotted", "filter", "profile", "search", "onboarding", "link"];
 export type PillState = "default" | "selected" | "disabled";

package/dist/elements/Pill/Pill.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseIcon } from "@artsy/icons/native";
 import themeGet from "@styled-system/theme-get";
 import { MotiPressable } from "moti/interactions";
 import { useMemo } from "react";
 import { PixelRatio } from "react-native";
 import styled, { css } from "styled-components";
-import { CloseIcon } from "../../svgs";
 import { Flex } from "../Flex";
 import { Image } from "../Image";
 import { Text } from "../Text";
@@ -96,7 +96,7 @@ const PILL_VARIANTS = {
       border-color: ${themeGet("colors.mono5")};
       border-radius: 25px;
       height: 50px;
-      padding: 0 ${themeGet("space.1")}};
+      padding: 0 ${themeGet("space.1")};
     `,
         selected: css `
       border-color: ${themeGet("colors.blue100")};

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GraphIcon } from "@artsy/icons/native";
 import { storiesOf } from "@storybook/react-native";
 import { useState } from "react";
 import { Pill } from "./Pill";
 import { List } from "../../storybook/helpers";
-import { GraphIcon } from "../../svgs";
 import { Flex } from "../Flex";
 export default {
     title: "Pill",

package/dist/elements/Popover/Popover.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseIcon } from "@artsy/icons/native";
 import RNPopover from "react-native-popover-view";
 import { Easing } from "react-native-reanimated";
-import { CloseIcon } from "../../svgs";
 import { useColor } from "../../utils/hooks";
 import { Flex } from "../Flex";
 import { Touchable } from "../Touchable";

package/dist/elements/Screen/Header.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronLeftIcon } from "@artsy/icons/native";
 import Animated, { Easing, FadeIn, FadeOut, useAnimatedStyle, useDerivedValue, } from "react-native-reanimated";
 import { useScreenScrollContext } from "./ScreenScrollContext";
 import { NAVBAR_HEIGHT, ZINDEX } from "./constants";
 import { DEFAULT_HIT_SLOP, DEFAULT_ICON_SIZE } from "../../constants";
-import { ArrowLeftIcon } from "../../svgs/ArrowLeftIcon";
 import { useScreenDimensions, useSpace } from "../../utils/hooks";
 import { Flex } from "../Flex";
 import { Text } from "../Text";
@@ -49,5 +49,5 @@ const Center = ({ animated, hideTitle, title }) => {
 const Left = ({ hideLeftElements, leftElements, onBack }) => {
     if (hideLeftElements)
         return null;
-    return (_jsx(_Fragment, { children: leftElements || (_jsx(Touchable, { accessibilityRole: "button", accessibilityLabel: "Back", accessibilityHint: "Navigates to the previous screen", onPress: onBack, underlayColor: "transparent", hitSlop: DEFAULT_HIT_SLOP, children: _jsx(ArrowLeftIcon, { fill: "onBackgroundHigh" }) })) }));
+    return (_jsx(_Fragment, { children: leftElements || (_jsx(Touchable, { accessibilityRole: "button", accessibilityLabel: "Back", accessibilityHint: "Navigates to the previous screen", onPress: onBack, underlayColor: "transparent", hitSlop: DEFAULT_HIT_SLOP, children: _jsx(ChevronLeftIcon, { fill: "onBackgroundHigh" }) })) }));
 };

package/dist/elements/SearchInput/RoundSearchInput.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeftIcon, SearchIcon } from "@artsy/icons/native";
 import isArray from "lodash/isArray";
 import isString from "lodash/isString";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { PixelRatio, TextInput } from "react-native";
 import { DEFAULT_HIT_SLOP } from "../../constants";
-import { ArrowLeftIcon, MagnifyingGlassIcon } from "../../svgs";
 import { useColor, useTheme } from "../../utils/hooks";
 import { Flex } from "../Flex";
 import { Text } from "../Text";
@@ -88,7 +88,7 @@ export const RoundSearchInput = ({ value, placeholder, onLeftIconPress, ...rest
                         ref.current?.blur();
                         setIsFocused(false);
                         onLeftIconPress?.();
-                    }, hitSlop: DEFAULT_HIT_SLOP, haptic: "impactLight", children: !isFocused ? (_jsx(MagnifyingGlassIcon, { fill: "mono60", width: ICON_SIZE, height: ICON_SIZE })) : (_jsx(ArrowLeftIcon, { long: true, fill: "mono60", width: ICON_SIZE, height: ICON_SIZE })) }) })] }));
+                    }, hitSlop: DEFAULT_HIT_SLOP, haptic: "impactLight", children: !isFocused ? (_jsx(SearchIcon, { fill: "mono60", width: ICON_SIZE, height: ICON_SIZE })) : (_jsx(ArrowLeftIcon, { fill: "mono60", width: ICON_SIZE, height: ICON_SIZE })) }) })] }));
 };
 export const SEARCH_INPUT_CONTAINER_HEIGHT = 48;
 const CONTAINER_HORIZONTAL_PADDING = 16;

package/dist/elements/SearchInput/SearchInput.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { MagnifyingGlassIcon } from "../../svgs";
+import { SearchIcon } from "@artsy/icons/native";
 import { useColor } from "../../utils/hooks";
 import { Flex } from "../Flex";
 import { Input } from "../Input";
 export const SearchInput = ({ enableCancelButton = true, onChangeText, onClear, ...props }) => {
     const color = useColor();
-    return (_jsx(Flex, { flexDirection: "row", justifyContent: "center", children: _jsx(Input, { icon: _jsx(MagnifyingGlassIcon, { width: 18, height: 18, fill: "onBackgroundHigh" }), autoCorrect: false, enableClearButton: enableCancelButton, returnKeyType: "search", onClear: () => {
+    return (_jsx(Flex, { flexDirection: "row", justifyContent: "center", children: _jsx(Input, { icon: _jsx(SearchIcon, { width: 18, height: 18, fill: "onBackgroundHigh" }), autoCorrect: false, enableClearButton: enableCancelButton, returnKeyType: "search", onClear: () => {
                 onClear?.();
             }, onChangeText: onChangeText, ...props, onFocus: (e) => {
                 props.onFocus?.(e);

package/dist/elements/ToolTip/ToolTip.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { TriangleDownIcon } from "@artsy/icons/native";
 import { noop } from "lodash";
 import { createContext, useContext, useRef, useState } from "react";
 import { View } from "react-native";
 import { ToolTipFlyout, ToolTipTextContainer } from "./ToolTipFlyout";
-import { TriangleDown } from "../../svgs/TriangleDown";
 import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
 import { useTheme } from "../../utils/hooks/useTheme";
 export const ToolTipContext = createContext({
@@ -58,7 +58,7 @@ export const ToolTip = ({ children, enabled = true, flowDirection, initialToolTi
                             bottom: childrenDimensions.height + yOffset,
                             left: xOffset,
                             ...extraStyle,
-                        }, tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, onToolTipPress: onPress, position: position, testID: testID, text: toolTipText }), !!enabled && position === "TOP" && !!toolTipText && (_jsx(TriangleDown, { style: {
+                        }, tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, onToolTipPress: onPress, position: position, testID: testID, text: toolTipText }), !!enabled && position === "TOP" && !!toolTipText && (_jsx(TriangleDownIcon, { style: {
                             left: triangleXDisplacement + xOffset,
                             position: "absolute",
                             bottom: childrenDimensions.height + yOffset - 5, // where 5 is the triangle icon size
@@ -74,7 +74,7 @@ export const ToolTip = ({ children, enabled = true, flowDirection, initialToolTi
                 }, children: children }), !!enabled && position === "BOTTOM" && (_jsxs(_Fragment, { children: [_jsx(ToolTipFlyout, { containerStyle: {
                             top: childrenDimensions.height + yOffset,
                             ...extraStyle,
-                        }, tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, onToolTipPress: onPress, position: position, testID: testID, text: toolTipText }), !!enabled && position === "BOTTOM" && !!toolTipText && (_jsx(TriangleDown, { style: {
+                        }, tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, onToolTipPress: onPress, position: position, testID: testID, text: toolTipText }), !!enabled && position === "BOTTOM" && !!toolTipText && (_jsx(TriangleDownIcon, { style: {
                             transform: [{ rotate: "180deg" }],
                             left: triangleXDisplacement + xOffset,
                             position: "absolute",

package/dist/elements/Touchable/Touchable.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrashIcon } from "@artsy/icons/native";
 import { Touchable } from "./Touchable";
 import { List } from "../../storybook/helpers";
-import { TrashIcon } from "../../svgs";
 import { Flex } from "../Flex";
 import { Text } from "../Text";
 export default {

package/dist/index.d.ts

@@ -3,8 +3,6 @@ export * from "./constants";
 export * from "./elements";
 export * from "./utils/hooks";
 export * from "./utils/text";
-export * from "./svgs";
-export * from "./svgs/Icon";
 export * from "./Theme";
 export * from "./tokens";
 export * from "./types";

package/dist/index.js

@@ -3,8 +3,6 @@ export * from "./constants";
 export * from "./elements";
 export * from "./utils/hooks";
 export * from "./utils/text";
-export * from "./svgs";
-export * from "./svgs/Icon";
 export * from "./Theme";
 export * from "./tokens";
 export * from "./types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "17.33.0",
+  "version": "18.0.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",
@@ -33,6 +33,7 @@
     "FOR DEPS NEEDED FOR THE STORYBOOK APP, ADD THEM AS DEV DEPS BELOW."
   ],
   "dependencies": {
+    "@artsy/icons": "^3.49.0",
     "@artsy/palette-tokens": "^7.0.0",
     "@d11/react-native-fast-image": "^8.10.0",
     "@shopify/flash-list": "^1.8.3",

package/dist/svgs/AddCircleFillIcon.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from "./Icon";
-export declare const AddCircleFillIcon: ({ fill, ...restProps }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/svgs/AddCircleFillIcon.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon, Path } from "./Icon";
-import { useColor } from "../utils/hooks";
-export const AddCircleFillIcon = ({ fill = "mono100", ...restProps }) => {
-    const color = useColor();
-    return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M9 1a8 8 0 1 0 0 16A8 8 0 0 0 9 1zm.551 7.449H13V9.55H9.551V13H8.45V9.551H5V8.45h3.449V5H9.55v3.449z", fill: color(fill), fillRule: "nonzero" }) }));
-};

package/dist/svgs/AddCircleIcon.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from "./Icon";
-export declare const AddCircleIcon: ({ fill, ...restProps }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/svgs/AddCircleIcon.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon, Path } from "./Icon";
-import { useColor } from "../utils/hooks";
-export const AddCircleIcon = ({ fill = "mono100", ...restProps }) => {
-    const color = useColor();
-    return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M9 1a8 8 0 1 0 0 16A8 8 0 0 0 9 1zm0 15.111A7.111 7.111 0 1 1 9 1.89 7.111 7.111 0 0 1 9 16.11zm.551-7.662H13V9.55H9.551V13H8.45V9.551H5V8.45h3.449V5H9.55v3.449z", fill: color(fill), fillRule: "nonzero" }) }));
-};

package/dist/svgs/AddIcon.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from "./Icon";
-export declare const AddIcon: ({ fill, ...restProps }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/svgs/AddIcon.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon, Path } from "./Icon";
-import { useColor } from "../utils/hooks";
-export const AddIcon = ({ fill = "mono100", ...restProps }) => {
-    const color = useColor();
-    return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M15 9.5H9.514V15H8.476V9.5H3V8.48h5.476V3h1.038v5.48H15z", fill: color(fill), fillRule: "evenodd" }) }));
-};

package/dist/svgs/AlertCircleFillIcon.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from "./Icon";
-export declare const AlertCircleFillIcon: ({ fill, ...restProps }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/svgs/AlertCircleFillIcon.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon, Path } from "./Icon";
-import { useColor } from "../utils/hooks";
-export const AlertCircleFillIcon = ({ fill = "mono100", ...restProps }) => {
-    const color = useColor();
-    return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17C13.4183 17 17 13.4183 17 9ZM8.42225 5.13333H9.5778L9.39114 10.7778H8.60892L8.42225 5.13333ZM8.42225 11.6578H9.56892V12.8667H8.44003L8.42225 11.6578Z", fill: color(fill), fillRule: "evenodd", clipRule: "evenodd" }) }));
-};

package/dist/svgs/AlertIcon.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from "./Icon";
-export declare const AlertIcon: ({ fill, ...restProps }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/svgs/AlertIcon.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon, Path } from "./Icon";
-import { useColor } from "../utils/hooks";
-export const AlertIcon = ({ fill = "mono100", ...restProps }) => {
-    const color = useColor();
-    return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M9 1.889A7.111 7.111 0 1 1 9 16.11 7.111 7.111 0 0 1 9 1.89zM9 1a8 8 0 1 0 0 16A8 8 0 0 0 9 1zm-.578 4.133h1.156l-.187 5.645H8.61l-.187-5.645zm0 6.525H9.57v1.209H8.44l-.018-1.21z", fill: color(fill), fillRule: "nonzero" }) }));
-};

package/dist/svgs/AppleIcon.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from "./Icon";
-export declare const AppleIcon: ({ fill, ...restProps }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/svgs/AppleIcon.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon, Path } from "./Icon";
-import { useColor } from "../utils/hooks";
-export const AppleIcon = ({ fill = "mono100", ...restProps }) => {
-    const color = useColor();
-    return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M11.3,3.6c-0.5,0.7-1.4,1.1-2.1,1.1c-0.1,0-0.2,0-0.2,0c0-0.1,0-0.2,0-0.3c0-0.8,0.4-1.6,0.8-2.2C10.4,1.5,11.3,1,12.1,1c0,0.1,0,0.2,0,0.3C12.1,2.1,11.8,3,11.3,3.6z M7.9,16.7C7.5,16.9,7.2,17,6.7,17c-1,0-1.6-0.9-2.4-2c-0.9-1.3-1.6-3.4-1.6-5.3c0-3.1,2-4.8,3.9-4.8c0.6,0,1.1,0.2,1.5,0.4c0.4,0.2,0.7,0.3,1,0.3c0.3,0,0.6-0.1,0.9-0.3c0.5-0.2,1.1-0.5,1.8-0.5c0.4,0,2,0,3.1,1.6l0,0c-0.3,0.2-1.6,1.1-1.6,3c0,2.4,2,3.2,2.1,3.2l0,0C15.2,13,14.9,14,14.3,15c-0.7,1-1.4,2-2.4,2c-0.5,0-0.8-0.2-1.2-0.3c-0.4-0.2-0.7-0.3-1.4-0.3C8.7,16.3,8.3,16.5,7.9,16.7z", fill: color(fill), fillRule: "evenodd" }) }));
-};

package/dist/svgs/ArrowBackIcon.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from "./Icon";
-export declare const ArrowBackIcon: ({ fill, ...restProps }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/svgs/ArrowBackIcon.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon, Path } from "./Icon";
-import { useColor } from "../utils/hooks";
-export const ArrowBackIcon = ({ fill = "mono100", ...restProps }) => {
-    const color = useColor();
-    return (_jsxs(Icon, { ...restProps, viewBox: "0 0 18 18", children: [_jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M5.91163 2.49087L2.24335 6.15914L5.91163 9.82742L5.37894 10.3601L1.17798 6.15914L5.37894 1.95818L5.91163 2.49087Z", fill: color("mono100") }), _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M2.21411 5.60327H11.6098C14.4925 5.60327 16.8294 7.94017 16.8294 10.8229C16.8294 13.7056 14.4925 16.0425 11.6098 16.0425H5.98362V15.1503H11.5446C13.906 15.1503 15.8203 13.236 15.8203 10.8746C15.8203 8.51321 13.906 6.59891 11.5446 6.59891H2.21411V5.60327Z", fill: color("mono100") })] }));
-};