@artsy/palette-mobile 14.0.44 → 14.0.45--canary.331.3541.0

package/dist/elements/Popover/Popover.js

@@ -9,7 +9,7 @@ import { Touchable } from "../Touchable";
 export const Popover = ({ variant = "dark", children, visible, onOpenComplete, onPressOutside, onDismiss, onCloseComplete, placement = "top", title, content, noCloseIcon, }) => {
     const color = useColor();
     const DROP_SHADOW = {
-        shadowColor: color("black100"),
+        shadowColor: color("mono100"),
         shadowOffset: {
             width: 0,
             height: 2,
@@ -20,17 +20,17 @@ export const Popover = ({ variant = "dark", children, visible, onOpenComplete, o
     };
     const POPOVER_VARIANTS = {
         light: {
-            backgroundColor: color("white100"),
-            fill: "black100",
+            backgroundColor: color("mono0"),
+            fill: "mono100",
             shadow: DROP_SHADOW,
         },
         dark: {
-            backgroundColor: color("black100"),
-            fill: "white100",
+            backgroundColor: color("mono100"),
+            fill: "mono0",
         },
     };
     const style = POPOVER_VARIANTS[variant];
-    return (_jsx(RNPopover, { backgroundStyle: { opacity: 0.5, backgroundColor: color("black100") }, popoverStyle: [{ backgroundColor: style.backgroundColor }, style.shadow], from: children, isVisible: visible, 
+    return (_jsx(RNPopover, { backgroundStyle: { opacity: 0.5, backgroundColor: color("mono100") }, popoverStyle: [{ backgroundColor: style.backgroundColor }, style.shadow], from: children, isVisible: visible, 
         // this is required to make sure that the popover is positioned correctly on android
         verticalOffset: Platform.OS === "android" ? -(StatusBar.currentHeight ?? 0) : 0, onCloseComplete: onCloseComplete, onOpenComplete: onOpenComplete, onRequestClose: onPressOutside, placement: placement, arrowSize: { height: 11, width: 22 }, animationConfig: {
             duration: 400,

package/dist/elements/Popover/Popover.stories.js

@@ -8,14 +8,14 @@ import { Text } from "../Text";
 storiesOf("Popover", module)
     .add("Variants", () => {
     const [visible, setVisible] = useState(null);
-    return (_jsxs(Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [_jsx(Popover, { visible: visible === "top-dark", title: _jsx(Text, { color: "white100", variant: "xs", children: "Popover Top Dark" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("top-dark"), children: "Top Dark" }) }), _jsx(Popover, { visible: visible === "bottom-dark", placement: "bottom", title: _jsx(Text, { color: "white100", variant: "xs", children: "Popover Bottom Dark" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("bottom-dark"), children: "Bottom Dark" }) }), _jsx(Popover, { visible: visible === "top-light", placement: "top", variant: "light", title: _jsx(Text, { variant: "xs", children: "Popover Top Light" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("top-light"), children: "Top Light" }) }), _jsx(Popover, { visible: visible === "bottom-light", placement: "bottom", variant: "light", title: _jsx(Text, { variant: "xs", children: "Popover Bottom Light" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("bottom-light"), children: "Bottom Light" }) })] }));
+    return (_jsxs(Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [_jsx(Popover, { visible: visible === "top-dark", title: _jsx(Text, { color: "mono0", variant: "xs", children: "Popover Top Dark" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("top-dark"), children: "Top Dark" }) }), _jsx(Popover, { visible: visible === "bottom-dark", placement: "bottom", title: _jsx(Text, { color: "mono0", variant: "xs", children: "Popover Bottom Dark" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("bottom-dark"), children: "Bottom Dark" }) }), _jsx(Popover, { visible: visible === "top-light", placement: "top", variant: "light", title: _jsx(Text, { variant: "xs", children: "Popover Top Light" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("top-light"), children: "Top Light" }) }), _jsx(Popover, { visible: visible === "bottom-light", placement: "bottom", variant: "light", title: _jsx(Text, { variant: "xs", children: "Popover Bottom Light" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("bottom-light"), children: "Bottom Light" }) })] }));
 })
     .add("With title and/or content", () => {
     const [visible, setVisible] = useState(null);
-    return (_jsxs(Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [_jsx(Popover, { visible: visible === "title", title: _jsx(Text, { weight: "medium", color: "white100", children: "Popover title" }), content: _jsxs(_Fragment, { children: [_jsx(Text, { color: "white100", children: "Popover descriptive text with some not so long long long body" }), _jsx(Text, { color: "white100", children: "And some line break" })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("title"), children: "Some title and description" }) }), _jsx(Popover, { visible: visible === "buttons", placement: "bottom", variant: "light", content: _jsxs(_Fragment, { children: [_jsx(Text, { weight: "medium", mb: 1, children: "Popover title" }), _jsx(Flex, { height: 80, backgroundColor: "black30", mb: 1 }), _jsx(Text, { mb: 1, children: "Popover descriptive text" }), _jsxs(Flex, { flexDirection: "row", justifyContent: "flex-end", children: [_jsx(Button, { size: "small", variant: "outlineGray", children: "Learn more" }), _jsx(Button, { size: "small", ml: 1, onPress: () => setVisible(null), children: "Got it" })] })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("buttons"), children: "Buttons and more content" }) }), _jsx(Popover, { visible: visible === "no-close", placement: "bottom", noCloseIcon: true, variant: "light", content: _jsxs(_Fragment, { children: [_jsx(Text, { weight: "medium", mb: 1, children: "Popover title?" }), _jsx(Flex, { height: 80, backgroundColor: "black30", mb: 1 }), _jsx(Text, { mb: 1, children: "Popover descriptive text" }), _jsx(Button, { size: "small", onPress: () => setVisible(null), children: "Got it" })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("no-close"), children: "Content without close icon" }) })] }));
+    return (_jsxs(Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [_jsx(Popover, { visible: visible === "title", title: _jsx(Text, { weight: "medium", color: "mono0", children: "Popover title" }), content: _jsxs(_Fragment, { children: [_jsx(Text, { color: "mono0", children: "Popover descriptive text with some not so long long long body" }), _jsx(Text, { color: "mono0", children: "And some line break" })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("title"), children: "Some title and description" }) }), _jsx(Popover, { visible: visible === "buttons", placement: "bottom", variant: "light", content: _jsxs(_Fragment, { children: [_jsx(Text, { weight: "medium", mb: 1, children: "Popover title" }), _jsx(Flex, { height: 80, backgroundColor: "mono30", mb: 1 }), _jsx(Text, { mb: 1, children: "Popover descriptive text" }), _jsxs(Flex, { flexDirection: "row", justifyContent: "flex-end", children: [_jsx(Button, { size: "small", variant: "outlineGray", children: "Learn more" }), _jsx(Button, { size: "small", ml: 1, onPress: () => setVisible(null), children: "Got it" })] })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("buttons"), children: "Buttons and more content" }) }), _jsx(Popover, { visible: visible === "no-close", placement: "bottom", noCloseIcon: true, variant: "light", content: _jsxs(_Fragment, { children: [_jsx(Text, { weight: "medium", mb: 1, children: "Popover title?" }), _jsx(Flex, { height: 80, backgroundColor: "mono30", mb: 1 }), _jsx(Text, { mb: 1, children: "Popover descriptive text" }), _jsx(Button, { size: "small", onPress: () => setVisible(null), children: "Got it" })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("no-close"), children: "Content without close icon" }) })] }));
 })
     .add("Edge positions", () => {
     const [topVisible, setTopVisible] = useState(true);
     const [bottomVisible, setBottomVisible] = useState(false);
-    return (_jsxs(Flex, { flex: 1, backgroundColor: "black30", justifyContent: "space-between", px: 1, children: [_jsx(Flex, { backgroundColor: "white100", width: 80, px: 1, children: _jsx(Popover, { visible: topVisible, placement: "bottom", onDismiss: () => setTopVisible(false), onCloseComplete: () => setBottomVisible(true), title: _jsx(Text, { color: "white100", variant: "xs", children: "Top-Left" }), children: _jsx(Text, { children: "Top-left" }) }) }), _jsx(Flex, { backgroundColor: "white100", width: 120, mb: 6, alignSelf: "flex-end", px: 1, children: _jsx(Popover, { visible: bottomVisible, onDismiss: () => setBottomVisible(false), title: _jsx(Text, { color: "white100", variant: "xs", children: "Bottom-Right" }), children: _jsx(Text, { children: "Bottom-right" }) }) })] }));
+    return (_jsxs(Flex, { flex: 1, backgroundColor: "mono30", justifyContent: "space-between", px: 1, children: [_jsx(Flex, { backgroundColor: "mono0", width: 80, px: 1, children: _jsx(Popover, { visible: topVisible, placement: "bottom", onDismiss: () => setTopVisible(false), onCloseComplete: () => setBottomVisible(true), title: _jsx(Text, { color: "mono0", variant: "xs", children: "Top-Left" }), children: _jsx(Text, { children: "Top-left" }) }) }), _jsx(Flex, { backgroundColor: "mono0", width: 120, mb: 6, alignSelf: "flex-end", px: 1, children: _jsx(Popover, { visible: bottomVisible, onDismiss: () => setBottomVisible(false), title: _jsx(Text, { color: "mono0", variant: "xs", children: "Bottom-Right" }), children: _jsx(Text, { children: "Bottom-right" }) }) })] }));
 });

package/dist/elements/ProgressBar/ProgressBar.js

@@ -5,7 +5,7 @@ import { useSpace } from "../../utils/hooks";
 import { useColor } from "../../utils/hooks/useColor";
 import { Flex } from "../Flex";
 const clamp = (num, min, max) => Math.max(min, Math.min(num, max));
-export const ProgressBar = ({ animationDuration = 200, backgroundColor = "black30", height = 2, onCompletion, progress: unclampedProgress, trackColor = "blue100", style, progressBarStyle, }) => {
+export const ProgressBar = ({ animationDuration = 200, backgroundColor = "mono30", height = 2, onCompletion, progress: unclampedProgress, trackColor = "blue100", style, progressBarStyle, }) => {
     const color = useColor();
     const space = useSpace();
     const width = useSharedValue(0);

package/dist/elements/Radio/RadioButton.js

@@ -13,16 +13,16 @@ export const RadioButton = ({ accessibilityState, block, disabled, error, onPres
     const fontScale = PixelRatio.getFontScale();
     const radioButtonSize = RADIOBUTTON_SIZE * fontScale;
     const defaultRadioButtonStyle = {
-        backgroundColor: color("white100"),
-        borderColor: color("black30"),
+        backgroundColor: color("mono0"),
+        borderColor: color("mono30"),
     };
     const selectedRadioButtonStyle = {
-        backgroundColor: color("black100"),
-        borderColor: color("black100"),
+        backgroundColor: color("mono100"),
+        borderColor: color("mono100"),
     };
     const disabledRadioButtonStyle = {
-        backgroundColor: color("black5"),
-        borderColor: color("black10"),
+        backgroundColor: color("mono5"),
+        borderColor: color("mono10"),
     };
     const radioButtonStyles = {
         default: {
@@ -30,15 +30,15 @@ export const RadioButton = ({ accessibilityState, block, disabled, error, onPres
             selected: selectedRadioButtonStyle,
         },
         error: {
-            notSelected: { backgroundColor: color("white100"), borderColor: color("red100") },
+            notSelected: { backgroundColor: color("mono0"), borderColor: color("red100") },
             selected: selectedRadioButtonStyle,
         },
     };
     const radioButtonStyle = disabled
         ? disabledRadioButtonStyle
         : radioButtonStyles[error ? "error" : "default"][selected ? "selected" : "notSelected"];
-    const textColor = error ? color("red100") : disabled ? color("black30") : color("black100");
-    const subtitleColor = error ? color("red100") : color("black30");
+    const textColor = error ? color("red100") : disabled ? color("mono30") : color("mono100");
+    const subtitleColor = error ? color("red100") : color("mono30");
     const AnimatedDot = (_jsx(Flex, { mt: "2px", children: _jsx(CssTransition, { style: [
                 styles(fontScale).container,
                 { marginRight: space(1) * fontScale },
@@ -77,6 +77,6 @@ export const RadioDot = ({ size }) => {
         } }));
 };
 export const DisabledDot = styled(RadioDot) `
-  border-bottom-color: ${themeGet("colors.black30")};
-  border-left-color: ${themeGet("colors.black30")};
+  border-bottom-color: ${themeGet("colors.mono30")};
+  border-left-color: ${themeGet("colors.mono30")};
 `;

package/dist/elements/Radio/RadioDot.js

@@ -6,21 +6,21 @@ export const RADIO_DOT_MODES = {
     default: {
         resting: {
             borderWidth: INACTIVE_BORDER_WIDTH,
-            borderColor: "black30",
+            borderColor: "mono30",
         },
         selected: {
             borderWidth: ACTIVE_BORDER_WIDTH,
-            borderColor: "black100",
+            borderColor: "mono100",
         },
     },
     disabled: {
         resting: {
             borderWidth: INACTIVE_BORDER_WIDTH,
-            borderColor: "black10",
+            borderColor: "mono10",
         },
         selected: {
             borderWidth: ACTIVE_BORDER_WIDTH,
-            borderColor: "black10",
+            borderColor: "mono10",
         },
     },
     error: {
@@ -30,17 +30,17 @@ export const RADIO_DOT_MODES = {
         },
         selected: {
             borderWidth: ACTIVE_BORDER_WIDTH,
-            borderColor: "black100",
+            borderColor: "mono100",
         },
     },
     hover: {
         resting: {
             borderWidth: INACTIVE_BORDER_WIDTH,
-            borderColor: "black10",
+            borderColor: "mono10",
         },
         selected: {
             borderWidth: INACTIVE_BORDER_WIDTH,
-            borderColor: "black100",
+            borderColor: "mono100",
         },
     },
 };

package/dist/elements/Screen/Screen.stories.js

@@ -4,15 +4,15 @@ import { Flex } from "../Flex";
 import { Screen } from "../Screen";
 import { Text } from "../Text";
 storiesOf("Screen", module)
-    .add("With Header and BottomView", () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title" }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "black30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
+    .add("With Header and BottomView", () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title" }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
     .add("With Header and Right Element", () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title", rightElements: _jsx(Text, { variant: "xs", children: "Very long right element" }) }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) })] })))
     .add("With Header, Without Left Element and Right Element", () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title", hideLeftElements: true, rightElements: _jsx(Text, { variant: "xs", children: "Very long right element" }) }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) })] })))
-    .add("With Right Element & Custom Left Element", () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title", leftElements: _jsx(Text, { variant: "xs", children: "Very long left element" }), rightElements: _jsx(Text, { variant: "xs", children: "right element" }) }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "black30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
-    .add("ScrollView With AnimatedHeader", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.Body, { children: _jsxs(Screen.ScrollView, { children: [_jsx(Text, { variant: "lg-display", children: "Title" }), Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)))] }) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "black30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
-    .add("ScrollView With AnimatedHeader and Right Element", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title", rightElements: _jsx(Text, { children: "Right" }) }), _jsx(Screen.Body, { children: _jsxs(Screen.ScrollView, { children: [_jsx(Text, { variant: "lg-display", children: "Title" }), Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)))] }) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "black30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
+    .add("With Right Element & Custom Left Element", () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title", leftElements: _jsx(Text, { variant: "xs", children: "Very long left element" }), rightElements: _jsx(Text, { variant: "xs", children: "right element" }) }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
+    .add("ScrollView With AnimatedHeader", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.Body, { children: _jsxs(Screen.ScrollView, { children: [_jsx(Text, { variant: "lg-display", children: "Title" }), Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)))] }) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
+    .add("ScrollView With AnimatedHeader and Right Element", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title", rightElements: _jsx(Text, { children: "Right" }) }), _jsx(Screen.Body, { children: _jsxs(Screen.ScrollView, { children: [_jsx(Text, { variant: "lg-display", children: "Title" }), Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)))] }) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
     .add("FlatList With AnimatedHeader", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.Body, { children: _jsx(Screen.FlatList, { ListHeaderComponent: () => _jsx(Text, { variant: "lg-display", children: "Title" }), data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
                     return (_jsx(Text, { my: 1, children: item }, index));
-                } }) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "black30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
+                } }) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
     .add("FlatList With AnimatedHeader and StickySubHeader", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.StickySubHeader, { title: "Title", children: _jsx(Flex, { width: "100%", height: 60, backgroundColor: "red10" }) }), _jsx(Screen.Body, { children: _jsx(Screen.FlatList, { data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
                     return (_jsx(Text, { my: 1, children: item }, index));
                 } }) })] })))

package/dist/elements/Screen/StickySubHeader.js

@@ -7,7 +7,7 @@ import { Flex } from "../Flex";
 import { Separator } from "../Separator";
 import { Text } from "../Text";
 export const STICKY_BAR_HEIGHT = 42;
-export const DEFAULT_SEPARATOR_COMPONENT = _jsx(Separator, { borderColor: "black5" });
+export const DEFAULT_SEPARATOR_COMPONENT = _jsx(Separator, { borderColor: "mono5" });
 export const BOTTOM_TABS_HEIGHT = 65;
 export const StickySubHeader = ({ title, largeTitle = false, separatorComponent = DEFAULT_SEPARATOR_COMPONENT, subTitle, children, Component, }) => {
     const space = useSpace();
@@ -34,5 +34,5 @@ export const StickySubHeader = ({ title, largeTitle = false, separatorComponent
             ],
         };
     }, [visible.value, stickyBarHeight]);
-    return (_jsxs(Flex, { children: [stickyBarHeight === null && (_jsx(Flex, { onLayout: (event) => handleLayout(event), position: "absolute", backgroundColor: "white100", zIndex: -1000, style: sharedStyles, children: _jsxs(Flex, { mb: 1, children: [_jsx(Text, { variant: largeTitle ? "xl" : "lg-display", color: "white100", children: title }), !!subTitle && (_jsx(Text, { variant: "xs", mt: 0.5, color: "white100", children: subTitle })), Component] }) })), _jsx(Animated.View, { style: [sharedStyles, animatedStyles], children: _jsxs(Flex, { style: { height: stickyBarHeight }, mb: 1, children: [_jsx(Text, { variant: largeTitle ? "xl" : "lg-display", children: title }), subTitle && (_jsx(Text, { variant: "xs", mt: 0.5, children: subTitle })), Component] }) }), children, children !== undefined && separatorComponent] }));
+    return (_jsxs(Flex, { children: [stickyBarHeight === null && (_jsx(Flex, { onLayout: (event) => handleLayout(event), position: "absolute", backgroundColor: "mono0", zIndex: -1000, style: sharedStyles, children: _jsxs(Flex, { mb: 1, children: [_jsx(Text, { variant: largeTitle ? "xl" : "lg-display", color: "mono0", children: title }), !!subTitle && (_jsx(Text, { variant: "xs", mt: 0.5, color: "mono0", children: subTitle })), Component] }) })), _jsx(Animated.View, { style: [sharedStyles, animatedStyles], children: _jsxs(Flex, { style: { height: stickyBarHeight }, mb: 1, children: [_jsx(Text, { variant: largeTitle ? "xl" : "lg-display", children: title }), subTitle && (_jsx(Text, { variant: "xs", mt: 0.5, children: subTitle })), Component] }) }), children, children !== undefined && separatorComponent] }));
 };

package/dist/elements/SearchInput/RoundSearchInput.js

@@ -48,7 +48,7 @@ export const RoundSearchInput = ({ value, placeholder, onLeftIconPress, ...rest
             fontFamily: theme.theme.fonts.sans.regular,
             fontSize: 16,
             lineHeight: 20,
-            color: color("black100"),
+            color: color("mono100"),
         };
     }, [color]);
     const renderAndroidPlaceholderMeasuringHack = useCallback(() => {
@@ -73,13 +73,13 @@ export const RoundSearchInput = ({ value, placeholder, onLeftIconPress, ...rest
             paddingRight: CONTAINER_HORIZONTAL_PADDING,
             paddingLeft: 2 * CONTAINER_HORIZONTAL_PADDING + 16,
             borderRadius: SEARCH_INPUT_CONTAINER_BORDER_RADIUS,
-            backgroundColor: color("black5"),
+            backgroundColor: color("mono5"),
         }, children: [renderAndroidPlaceholderMeasuringHack(), _jsx(TextInput, { ...rest, placeholder: getPlaceholder(), ref: ref, onLayout: (event) => {
                     setInputWidth(event.nativeEvent.layout.width);
                 }, style: inputStyles, autoCapitalize: "none", blurOnSubmit: true, 
                 // We only support up to 100 chars search in our backend,
                 // anything above that would lead to an error
-                maxLength: 100, clearButtonMode: "always", placeholderTextColor: color("black60"), onFocus: (e) => {
+                maxLength: 100, clearButtonMode: "always", placeholderTextColor: color("mono60"), onFocus: (e) => {
                     setIsFocused(true);
                     rest.onFocus?.(e);
                 }, enterKeyHint: "search", returnKeyType: "search" }), _jsx(Flex, { position: "absolute", height: SEARCH_INPUT_CONTAINER_HEIGHT, justifyContent: "center", alignItems: "center", style: {
@@ -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: "black60", width: ICON_SIZE, height: ICON_SIZE })) : (_jsx(ArrowLeftIcon, { long: true, fill: "black60", width: ICON_SIZE, height: ICON_SIZE })) }) })] }));
+                    }, 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 })) }) })] }));
 };
 export const SEARCH_INPUT_CONTAINER_HEIGHT = 48;
 const CONTAINER_HORIZONTAL_PADDING = 16;

package/dist/elements/SearchInput/SearchInput.js

@@ -10,7 +10,7 @@ export const SearchInput = ({ enableCancelButton = true, onChangeText, onClear,
             }, onChangeText: onChangeText, ...props, onFocus: (e) => {
                 props.onFocus?.(e);
             }, style: {
-                color: color("black100"),
+                color: color("mono100"),
             }, onBlur: (e) => {
                 props.onBlur?.(e);
             } }) }));

package/dist/elements/SimpleMessage/SimpleMessage.js

@@ -4,12 +4,12 @@ import styled from "styled-components/native";
 import { Flex } from "../Flex";
 import { Text } from "../Text";
 const StyledFlex = styled(Flex) `
-  background-color: ${themeGet("colors.black5")};
+  background-color: ${themeGet("colors.mono5")};
   border-radius: 2px;
 `;
 /**
  * A generic message window for displaying ZeroStates, notices, errors, etc.
  */
 export const SimpleMessage = ({ children, textVariant = "sm", ...restProps }) => {
-    return (_jsx(StyledFlex, { p: 2, ...restProps, children: _jsx(Text, { color: "black60", variant: textVariant, children: children }) }));
+    return (_jsx(StyledFlex, { p: 2, ...restProps, children: _jsx(Text, { color: "mono60", variant: textVariant, children: children }) }));
 };

package/dist/elements/Skeleton/Skeleton.js

@@ -26,9 +26,9 @@ export const Skeleton = ({ children }) => {
 };
 export const SkeletonText = ({ children, ...rest }) => {
     const color = useColor();
-    return (_jsx(Flex, { alignSelf: "flex-start", children: _jsx(Text, { ...rest, bg: color("black10"), color: "transparent", children: children }) }));
+    return (_jsx(Flex, { alignSelf: "flex-start", children: _jsx(Text, { ...rest, bg: color("mono10"), color: "transparent", children: children }) }));
 };
 export const SkeletonBox = ({ children, ...rest }) => {
     const color = useColor();
-    return (_jsx(Flex, { ...rest, bg: color("black10"), children: children }));
+    return (_jsx(Flex, { ...rest, bg: color("mono10"), children: children }));
 };

package/dist/elements/Spinner/Spinner.js

@@ -35,7 +35,7 @@ export const getSize = (props) => {
 /**
  * Spinner component for React Native
  */
-export const Spinner = ({ size = "medium", color: theColor = "black100", ...rest }) => {
+export const Spinner = ({ size = "medium", color: theColor = "mono100", ...rest }) => {
     const color = useColor();
     const rotation = useMemo(() => new Animated.Value(0), []);
     const startRotation = () => {

package/dist/elements/Switch/Switch.js

@@ -7,7 +7,7 @@ export const Switch = ({ value,
 thumbColorActive = Platform.OS === "ios" ? "white" : "blue100", 
 // Regardless of the color scheme, the thumb and track colors are always white
 // @ts-expect-error
-thumbColorInactive = Platform.OS === "ios" ? "white" : "black10", trackColorActive = Platform.OS === "ios" ? "blue100" : "blue10", trackColorInactive = "black30", disabled, ...restProps }) => {
+thumbColorInactive = Platform.OS === "ios" ? "white" : "mono10", trackColorActive = Platform.OS === "ios" ? "blue100" : "blue10", trackColorInactive = "mono30", disabled, ...restProps }) => {
     const color = useColor();
     let thumbColor = value ? color(thumbColorActive) : color(thumbColorInactive);
     let trackColor = {
@@ -16,12 +16,12 @@ thumbColorInactive = Platform.OS === "ios" ? "white" : "black10", trackColorActi
     };
     let iosBackground = color(trackColorInactive);
     if (disabled) {
-        thumbColor = Platform.OS === "ios" ? color("white100") : color("black30");
+        thumbColor = Platform.OS === "ios" ? color("mono0") : color("mono30");
         trackColor = {
-            false: color("black10"),
-            true: Platform.OS === "ios" ? color("black30") : color("black10"),
+            false: color("mono10"),
+            true: Platform.OS === "ios" ? color("mono30") : color("mono10"),
         };
-        iosBackground = color("black10");
+        iosBackground = color("mono10");
     }
     return (_jsx(RNSwitch, { accessibilityRole: "switch", value: value, disabled: disabled, thumbColor: thumbColor, trackColor: trackColor, ios_backgroundColor: iosBackground, ...restProps }));
 };

package/dist/elements/Switch/Switch.stories.js

@@ -18,5 +18,5 @@ export const Variants = () => {
     const handleSwitchChange = (id) => {
         setSwitches((prevSwitches) => prevSwitches.map((sw) => (sw.id === id ? { ...sw, value: !sw.value } : sw)));
     };
-    return (_jsxs(List, { children: [_jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Default State" }), _jsx(Switch, { value: switches[0].value, onValueChange: () => handleSwitchChange(1) })] }), _jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Disabled" }), _jsx(Switch, { disabled: true, value: switches[1].value, onValueChange: () => handleSwitchChange(2) })] }), _jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Custom Colors 1" }), _jsx(Switch, { value: switches[2].value, onValueChange: () => handleSwitchChange(3), trackColorActive: "red100", trackColorInactive: "green100", thumbColorActive: "yellow100", thumbColorInactive: "orange100" })] }), _jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Custom Colors 2" }), _jsx(Switch, { value: switches[3].value, onValueChange: () => handleSwitchChange(4), thumbColorActive: "yellow100", trackColorActive: "blue100", thumbColorInactive: "white100", trackColorInactive: "red100" })] })] }));
+    return (_jsxs(List, { children: [_jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Default State" }), _jsx(Switch, { value: switches[0].value, onValueChange: () => handleSwitchChange(1) })] }), _jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Disabled" }), _jsx(Switch, { disabled: true, value: switches[1].value, onValueChange: () => handleSwitchChange(2) })] }), _jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Custom Colors 1" }), _jsx(Switch, { value: switches[2].value, onValueChange: () => handleSwitchChange(3), trackColorActive: "red100", trackColorInactive: "green100", thumbColorActive: "yellow100", thumbColorInactive: "orange100" })] }), _jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Custom Colors 2" }), _jsx(Switch, { value: switches[3].value, onValueChange: () => handleSwitchChange(4), thumbColorActive: "yellow100", trackColorActive: "blue100", thumbColorInactive: "mono0", trackColorInactive: "red100" })] })] }));
 };

package/dist/elements/Tabs/TabsContainer.js

@@ -25,7 +25,7 @@ export const TabsContainer = ({ children, indicators = [], initialTabName, rende
                     }, style: {
                         height: TAB_BAR_HEIGHT,
                         borderBottomWidth: 1,
-                        borderColor: color("black30"),
+                        borderColor: color("mono30"),
                     }, TabItemComponent: (props) => {
                         const Indicator = indicators.find((indicator) => {
                             return indicator.tabName === props.name;

package/dist/elements/Text/LinkText.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Text } from "./Text";
-export const LinkText = ({ style, ...props }) => (_jsx(Text, { color: "black100", ...props, style: [style, { textDecorationLine: "underline" }] }));
+export const LinkText = ({ style, ...props }) => (_jsx(Text, { color: "mono100", ...props, style: [style, { textDecorationLine: "underline" }] }));

package/dist/elements/ToolTip/ToolTipFlyout.js

@@ -42,19 +42,19 @@ export const ToolTipFlyout = ({ containerStyle, tapToDismiss, height, width, onC
     };
     return (_jsx(TouchableWithoutFeedback, { onPress: onPress, testID: testID, children: _jsx(Animated.View, { style: [
                 {
-                    backgroundColor: color("black100"),
+                    backgroundColor: color("mono100"),
                     position: "absolute",
                     alignSelf: "center",
                     zIndex: 1000,
                 },
                 containerStyle,
                 animationStyle,
-            ], children: _jsx(Flex, { justifyContent: "center", alignItems: "center", bg: "black100", children: _jsx(ToolTipTextContainer, { text: text }) }) }) }));
+            ], children: _jsx(Flex, { justifyContent: "center", alignItems: "center", bg: "mono100", children: _jsx(ToolTipTextContainer, { text: text }) }) }) }));
 };
 /** Please be careful with applying any styling here. This forms the basis with which we measure
  * in advance by how large we can inflate a tooltip.
  */
 export const ToolTipTextContainer = ({ text }) => {
     const color = useColor();
-    return (_jsx(Text, { variant: "xs", color: color("white100"), pb: 0.5, children: text }));
+    return (_jsx(Text, { variant: "xs", color: color("mono0"), pb: 0.5, children: text }));
 };

package/dist/elements/Touchable/TouchableHighlightColor.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { Touchable } from "./Touchable";
 export const TouchableHighlightColor = (props) => {
-    const { activeOpacity = 1, activeColor = "blue100", normalColor = "black100", onPressIn, onPressOut, render, ...restProps } = props;
+    const { activeOpacity = 1, activeColor = "blue100", normalColor = "mono100", onPressIn, onPressOut, render, ...restProps } = props;
     const [highlighted, setHighlighted] = useState(false);
     const color = highlighted ? activeColor : normalColor;
     return (_jsx(Touchable, { noFeedback: true, activeOpacity: activeOpacity, onPressIn: (event) => {

package/dist/elements/VisualClue/VisualClue.stories.js

@@ -4,4 +4,4 @@ import { VisualClueDot, VisualClueText } from "./";
 import { List } from "../../storybook/helpers";
 import { Box } from "../Box";
 import { Text } from "../Text";
-storiesOf("Theme/Text", module).add("Visual Clue", () => (_jsxs(List, { children: [_jsxs(Box, { children: [_jsx(Text, { children: "Default" }), _jsx(Box, { position: "absolute", top: "4px", right: "-8px", children: _jsx(VisualClueDot, {}) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Diameter: 4" }), _jsx(Box, { position: "absolute", top: "4px", right: "-4px", children: _jsx(VisualClueDot, { diameter: 4 }) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Diameter: 8" }), _jsx(Box, { position: "absolute", top: "4px", right: "-10px", children: _jsx(VisualClueDot, { diameter: 8 }) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Color: red50" }), _jsx(Box, { position: "absolute", top: "4px", right: "-8px", children: _jsx(VisualClueDot, { color: "red50" }) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Color: red100" }), _jsx(Box, { position: "absolute", top: "4px", right: "-8px", children: _jsx(VisualClueDot, { color: "red100" }) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Color: black60" }), _jsx(Box, { position: "absolute", top: "4px", right: "-8px", children: _jsx(VisualClueDot, { color: "black60" }) })] }), _jsxs(_Fragment, { children: [_jsx(Text, { children: "A Feature" }), _jsx(VisualClueText, { style: { top: 14, right: -24 } })] })] })));
+storiesOf("Theme/Text", module).add("Visual Clue", () => (_jsxs(List, { children: [_jsxs(Box, { children: [_jsx(Text, { children: "Default" }), _jsx(Box, { position: "absolute", top: "4px", right: "-8px", children: _jsx(VisualClueDot, {}) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Diameter: 4" }), _jsx(Box, { position: "absolute", top: "4px", right: "-4px", children: _jsx(VisualClueDot, { diameter: 4 }) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Diameter: 8" }), _jsx(Box, { position: "absolute", top: "4px", right: "-10px", children: _jsx(VisualClueDot, { diameter: 8 }) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Color: red50" }), _jsx(Box, { position: "absolute", top: "4px", right: "-8px", children: _jsx(VisualClueDot, { color: "red50" }) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Color: red100" }), _jsx(Box, { position: "absolute", top: "4px", right: "-8px", children: _jsx(VisualClueDot, { color: "red100" }) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Color: mono60" }), _jsx(Box, { position: "absolute", top: "4px", right: "-8px", children: _jsx(VisualClueDot, { color: "mono60" }) })] }), _jsxs(_Fragment, { children: [_jsx(Text, { children: "A Feature" }), _jsx(VisualClueText, { style: { top: 14, right: -24 } })] })] })));

package/dist/svgs/AddCircleFillIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const AddCircleFillIcon = ({ fill = "black100", ...restProps }) => {
+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.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const AddCircleIcon = ({ fill = "black100", ...restProps }) => {
+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.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const AddIcon = ({ fill = "black100", ...restProps }) => {
+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.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const AlertCircleFillIcon = ({ fill = "black100", ...restProps }) => {
+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.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const AlertIcon = ({ fill = "black100", ...restProps }) => {
+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.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const AppleIcon = ({ fill = "black100", ...restProps }) => {
+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.js

@@ -1,7 +1,7 @@
 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 = "black100", ...restProps }) => {
+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("black100") }), _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("black100") })] }));
+    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") })] }));
 };

package/dist/svgs/ArrowCircleFillIcons.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-const FilledArrowCircle = ({ fill = "black100", rotate, ...restProps }) => {
+const FilledArrowCircle = ({ fill = "mono100", rotate, ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, style: rotate !== undefined ? { transform: [{ rotate }] } : {}, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M16 9.5C16 13.366 12.866 16.5 9 16.5C5.13401 16.5 2 13.366 2 9.5C2 5.63401 5.13401 2.5 9 2.5C12.866 2.5 16 5.63401 16 9.5Z M9 6.5002L6 11.7002L12 11.7002L9 6.5002Z", fill: color(fill) }) }));
 };

package/dist/svgs/ArrowDownCircleIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const ArrowDownCircleIcon = ({ fill = "black100", ...restProps }) => {
+export const ArrowDownCircleIcon = ({ 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 1zm4.302 6.622l-.746-.79L9 10.431 5.489 6.875l-.791.782L9 12.102l4.302-4.48z", fill: color(fill), fillRule: "nonzero" }) }));
 };

package/dist/svgs/ArrowDownIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const ArrowDownIcon = ({ fill = "black100", ...restProps }) => {
+export const ArrowDownIcon = ({ fill = "mono100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M9 12.88L2.06 5.94l.88-.88L9 11.12l6.06-6.06.88.88z", fill: color(fill), fillRule: "evenodd" }) }));
 };

package/dist/svgs/ArrowLeftCircleIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const ArrowLeftCircleIcon = ({ fill = "black100", ...restProps }) => {
+export const ArrowLeftCircleIcon = ({ 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 1zm2.169 11.556L7.569 9l3.6-3.511-.782-.791L5.987 9l4.444 4.302.738-.746z", fill: color(fill), fillRule: "nonzero" }) }));
 };

package/dist/svgs/ArrowLeftIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const ArrowLeftIcon = ({ fill = "black100", long = false, ...restProps }) => {
+export const ArrowLeftIcon = ({ fill = "mono100", long = false, ...restProps }) => {
     const color = useColor();
     if (long) {
         return (_jsx(Icon, { ...restProps, viewBox: "0 0 24 24", children: _jsx(Path, { d: "M7.825 13L13.425 18.6L12 20L4 12L12 4L13.425 5.4L7.825 11H20V13H7.825Z", fill: color(fill), fillRule: "evenodd" }) }));

package/dist/svgs/ArrowRightCircleIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const ArrowRightCircleIcon = ({ fill = "black100", ...restProps }) => {
+export const ArrowRightCircleIcon = ({ 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 1zm3.013 8l-4.4-4.302-.782.79 3.6 3.556-3.6 3.512.782.79L12.013 9z", fill: color(fill), fillRule: "nonzero" }) }));
 };

package/dist/svgs/ArrowRightIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const ArrowRightIcon = ({ fill = "black100", ...restProps }) => {
+export const ArrowRightIcon = ({ fill = "mono100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M5.94 15.94l-.88-.88L11.12 9 5.06 2.94l.88-.88L12.88 9z", fill: color(fill), fillRule: "evenodd" }) }));
 };

package/dist/svgs/ArrowUpCircleIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const ArrowUpCircleIcon = ({ fill = "black100", ...restProps }) => {
+export const ArrowUpCircleIcon = ({ 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 1zm4.302 9.387L9 5.987 4.698 10.43l.79.782 3.556-3.555 3.512 3.51.746-.781z", fill: color(fill), fillRule: "nonzero" }) }));
 };

package/dist/svgs/ArrowUpIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const ArrowUpIcon = ({ fill = "black100", ...restProps }) => {
+export const ArrowUpIcon = ({ fill = "mono100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M15.06 12.94L9 6.88l-6.06 6.06-.88-.88L9 5.12l6.94 6.94z", fill: color(fill), fillRule: "evenodd" }) }));
 };