@artsy/palette-mobile 14.0.24 → 14.0.26

package/dist/elements/Button/Button.js

@@ -108,6 +108,9 @@ const useStyleForVariantAndState = (variant, state) => {
                 case DisplayState.Disabled:
                     retval.backgroundColor = color("black30");
                     retval.borderColor = color("black30");
+                    // We want to show the text color as white regardless of the theme
+                    // This makes it easier to read
+                    retval.textColor = "white";
                     break;
                 case DisplayState.Loading:
                     retval.backgroundColor = color("black100");
@@ -127,7 +130,7 @@ const useStyleForVariantAndState = (variant, state) => {
         case "fillLight":
             switch (state) {
                 case DisplayState.Enabled:
-                    retval.backgroundColor = color("white100");
+                    retval.backgroundColor = color("background");
                     retval.borderColor = color("white100");
                     retval.textColor = color("black100");
                     break;
@@ -137,7 +140,7 @@ const useStyleForVariantAndState = (variant, state) => {
                     retval.textColor = color("white100");
                     break;
                 case DisplayState.Loading:
-                    retval.backgroundColor = color("white100");
+                    retval.backgroundColor = color("background");
                     retval.borderColor = color("white100");
                     retval.textColor = "rgba(0, 0, 0, 0)";
                     retval.loaderColor = "black100";
@@ -209,17 +212,17 @@ const useStyleForVariantAndState = (variant, state) => {
         case "outline":
             switch (state) {
                 case DisplayState.Enabled:
-                    retval.backgroundColor = color("white100");
+                    retval.backgroundColor = color("background");
                     retval.borderColor = color("black60");
                     retval.textColor = color("black100");
                     break;
                 case DisplayState.Disabled:
-                    retval.backgroundColor = color("white100");
+                    retval.backgroundColor = color("background");
                     retval.borderColor = color("black30");
                     retval.textColor = color("black30");
                     break;
                 case DisplayState.Loading:
-                    retval.backgroundColor = color("white100");
+                    retval.backgroundColor = color("background");
                     retval.borderColor = color("black60");
                     retval.textColor = "rgba(0, 0, 0, 0)";
                     retval.loaderColor = "black100";
@@ -237,17 +240,17 @@ const useStyleForVariantAndState = (variant, state) => {
         case "outlineGray":
             switch (state) {
                 case DisplayState.Enabled:
-                    retval.backgroundColor = color("white100");
+                    retval.backgroundColor = color("background");
                     retval.borderColor = color("black30");
                     retval.textColor = color("black100");
                     break;
                 case DisplayState.Disabled:
-                    retval.backgroundColor = color("white100");
+                    retval.backgroundColor = color("background");
                     retval.borderColor = color("black30");
                     retval.textColor = color("black30");
                     break;
                 case DisplayState.Loading:
-                    retval.backgroundColor = color("white100");
+                    retval.backgroundColor = color("background");
                     retval.borderColor = color("black30");
                     retval.textColor = "rgba(0, 0, 0, 0)";
                     retval.loaderColor = "black100";

package/dist/elements/Message/Message.js

@@ -42,7 +42,9 @@ const colors = {
     info: {
         background: "blue10",
         title: "blue100",
-        text: "black100",
+        // The text should be black regardless of the theme
+        // @ts-expect-error
+        text: "black",
         icon: "black100",
     },
     success: {

package/dist/elements/Screen/Body.js

@@ -7,5 +7,5 @@ export const Body = ({ children, fullwidth, scroll, disableKeyboardAvoidance = f
     const Wrapper = disableKeyboardAvoidance ? Fragment : KeyboardAvoidingView;
     return (_jsx(Wrapper, { ...(disableKeyboardAvoidance
             ? {}
-            : { style: { flex: 1 }, behavior: Platform.OS === "ios" ? "padding" : "height" }), children: _jsx(Flex, { flex: 1, ...flexProps, children: _jsx(Flex, { flex: 1, px: fullwidth ? undefined : SCREEN_HORIZONTAL_PADDING, children: scroll ? _jsx(ScrollView, { children: children }) : children }) }) }));
+            : { style: { flex: 1 }, behavior: Platform.OS === "ios" ? "padding" : "height" }), children: _jsx(Flex, { flex: 1, ...flexProps, backgroundColor: "background", children: _jsx(Flex, { flex: 1, px: fullwidth ? undefined : SCREEN_HORIZONTAL_PADDING, children: scroll ? _jsx(ScrollView, { children: children }) : children }) }) }));
 };

package/dist/elements/Screen/FloatingHeader.js

@@ -6,5 +6,5 @@ import { Flex } from "../Flex";
 import { Spacer } from "../Spacer";
 export const FloatingHeader = ({ onBack, rightElements, ...flexProps }) => {
     const insets = useSafeAreaInsets();
-    return (_jsxs(Flex, { position: "absolute", pointerEvents: "box-none", top: insets.top, left: 0, right: 0, zIndex: ZINDEX.floatingHeader, px: 1, py: 1, flexDirection: "row", alignItems: "center", ...flexProps, children: [_jsx(BackButtonWithBackground, { onPress: onBack }), _jsx(Flex, { flex: 1 }), rightElements && (_jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [_jsx(Spacer, { x: 1 }), rightElements] }))] }));
+    return (_jsxs(Flex, { position: "absolute", pointerEvents: "box-none", top: insets.top, left: 0, right: 0, zIndex: ZINDEX.floatingHeader, px: 1, py: 1, flexDirection: "row", alignItems: "center", backgroundColor: "background", ...flexProps, children: [_jsx(BackButtonWithBackground, { onPress: onBack }), _jsx(Flex, { flex: 1 }), rightElements && (_jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [_jsx(Spacer, { x: 1 }), rightElements] }))] }));
 };

package/dist/elements/SearchInput/RoundSearchInput.js

@@ -48,8 +48,9 @@ export const RoundSearchInput = ({ value, placeholder, onLeftIconPress, ...rest
             fontFamily: theme.theme.fonts.sans.regular,
             fontSize: 16,
             lineHeight: 20,
+            color: color("black100"),
         };
-    }, []);
+    }, [color]);
     const renderAndroidPlaceholderMeasuringHack = useCallback(() => {
         if (!isArray(placeholder)) {
             return null;

package/dist/elements/SearchInput/SearchInput.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { MagnifyingGlassIcon } from "../../svgs";
+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: () => {
                 onClear?.();
             }, onChangeText: onChangeText, ...props, onFocus: (e) => {
                 props.onFocus?.(e);
+            }, style: {
+                color: color("black100"),
             }, onBlur: (e) => {
                 props.onBlur?.(e);
             } }) }));

package/dist/elements/Switch/Switch.js

@@ -1,7 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Platform, Switch as RNSwitch } from "react-native";
 import { useColor } from "../../utils/hooks";
-export const Switch = ({ value, thumbColorActive = Platform.OS === "ios" ? "white100" : "blue100", thumbColorInactive = Platform.OS === "ios" ? "white100" : "black10", trackColorActive = Platform.OS === "ios" ? "blue100" : "blue10", trackColorInactive = "black30", disabled, ...restProps }) => {
+export const Switch = ({ value, 
+// Regardless of the color scheme, the thumb and track colors are always white
+// @ts-expect-error
+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 }) => {
     const color = useColor();
     let thumbColor = value ? color(thumbColorActive) : color(thumbColorInactive);
     let trackColor = {

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, ...restProps }) => {
+export const AddCircleFillIcon = ({ fill = "black100", ...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, ...restProps }) => {
+export const AddCircleIcon = ({ fill = "black100", ...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, ...restProps }) => {
+export const AddIcon = ({ fill = "black100", ...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, ...restProps }) => {
+export const AlertCircleFillIcon = ({ fill = "black100", ...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, ...restProps }) => {
+export const AlertIcon = ({ fill = "black100", ...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, ...restProps }) => {
+export const AppleIcon = ({ fill = "black100", ...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, ...restProps }) => {
+export const ArrowBackIcon = ({ fill = "black100", ...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") })] }));
 };

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, rotate, ...restProps }) => {
+const FilledArrowCircle = ({ fill = "black100", 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, ...restProps }) => {
+export const ArrowDownCircleIcon = ({ fill = "black100", ...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, ...restProps }) => {
+export const ArrowDownIcon = ({ fill = "black100", ...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, ...restProps }) => {
+export const ArrowLeftCircleIcon = ({ fill = "black100", ...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, long = false, ...restProps }) => {
+export const ArrowLeftIcon = ({ fill = "black100", 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, ...restProps }) => {
+export const ArrowRightCircleIcon = ({ fill = "black100", ...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, ...restProps }) => {
+export const ArrowRightIcon = ({ fill = "black100", ...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, ...restProps }) => {
+export const ArrowUpCircleIcon = ({ fill = "black100", ...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, ...restProps }) => {
+export const ArrowUpIcon = ({ fill = "black100", ...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" }) }));
 };

package/dist/svgs/ArrowUpRightIcon.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 ArrowUpRightIcon = ({ fill, ...restProps }) => {
+export const ArrowUpRightIcon = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M4.17188 14.8125L3.1875 13.8281L11.6625 5.34375H6.64688V3.9375H14.0531V11.3438H12.6469V6.32813L4.17188 14.8125Z", fillRule: "nonzero", fill: color(fill) }) }));
 };

package/dist/svgs/ArtsyLogoBlackIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { G, Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const ArtsyLogoBlackIcon = ({ scale = 1, fill, ...restProps }) => {
+export const ArtsyLogoBlackIcon = ({ scale = 1, fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 94 32", width: `${scale * 94}px`, height: `${scale * 32}px`, children: _jsxs(G, { fill: color(fill), fillRule: "evenodd", children: [_jsx(Path, { d: "M2.355 2.173h89.323v27.613H53.872v-4.55h-2.119v4.55H2.355V2.173zM.162 31.953h93.71V.006H.161v31.945z" }), _jsx(Path, { d: "M19.168 10.297h-2.402L12.59 20.92h2.401l1.097-2.946h3.775l1.081 2.946h2.402l-4.177-10.623zm-2.435 5.732l1.233-3.33 1.22 3.33h-2.453zM40.024 10.297v2.11h3.761v8.513h2.262v-8.513h3.776v-2.11h-9.799M78.516 10.297l-2.719 4.53-2.702-4.53h-2.63l4.21 6.723v3.9h2.261v-3.9l4.21-6.723h-2.63M65.963 15.326c-.7-.505-1.658-.737-2.503-.942-.176-.043-.347-.084-.513-.127l-.105-.027c-.689-.17-1.632-.405-1.632-1.219 0-.869 1.025-1.1 1.63-1.1.686 0 1.548.202 1.758 1.172l.007.033h2.13v-.042c-.072-1.96-1.464-3.085-3.816-3.085-1.752 0-3.797.808-3.797 3.086 0 2.37 2.134 2.878 4.017 3.326.173.042.343.082.509.124.96.247 1.446.688 1.446 1.308 0 1.336-1.77 1.403-2.126 1.403-1.245 0-1.921-.459-2.128-1.443l-.006-.032H58.67l.001.041c.017.843.12 1.356.668 1.993 1.04 1.198 2.688 1.377 3.58 1.377 2.054 0 4.264-1.054 4.264-3.371 0-.984-.468-1.933-1.221-2.475M34.967 16.402c.82-.592 1.331-1.64 1.331-2.736 0-1.184-.617-2.283-1.609-2.867-.84-.502-1.691-.502-2.514-.502h-4.846V20.92h2.278v-5.251l4.225 5.25h2.758l-3.217-3.897c.576-.098 1.055-.231 1.594-.62m-5.36-1.214v-2.89h2.558c.508 0 .96.022 1.322.281.344.248.548.684.548 1.165 0 .958-.692 1.444-2.056 1.444h-2.372" })] }) }));
 };

package/dist/svgs/ArtsyLogoWhiteIcon.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { G, Icon, Path } from "./Icon";
-export const ArtsyLogoWhiteIcon = ({ fill, ...restProps }) => {
+export const ArtsyLogoWhiteIcon = ({ fill = "black100", ...restProps }) => {
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 94 32", children: _jsxs(G, { fill: "none", fillRule: "evenodd", children: [_jsx(Path, { fill: "none", d: "M0 0h94v32H0z" }), _jsx(Path, { d: "M2.355 2.173h89.323v27.613H53.872v-4.55h-2.119v4.55H2.355V2.173zM.162 31.953h93.71V.006H.161v31.945z", fill: "#FFF" }), _jsx(Path, { d: "M19.168 10.297h-2.402L12.59 20.92h2.401l1.097-2.946h3.775l1.081 2.946h2.402l-4.177-10.623zm-2.435 5.732l1.233-3.33 1.22 3.33h-2.453zM40.024 10.297v2.11h3.761v8.513h2.262v-8.513h3.776v-2.11h-9.799M78.516 10.297l-2.719 4.53-2.702-4.53h-2.63l4.21 6.723v3.9h2.261v-3.9l4.21-6.723h-2.63M65.963 15.326c-.7-.505-1.658-.737-2.503-.942-.176-.043-.347-.084-.513-.127l-.105-.027c-.689-.17-1.632-.405-1.632-1.219 0-.869 1.025-1.1 1.63-1.1.686 0 1.548.202 1.758 1.172l.007.033h2.13v-.042c-.072-1.96-1.464-3.085-3.816-3.085-1.752 0-3.797.808-3.797 3.086 0 2.37 2.134 2.878 4.017 3.326.173.042.343.082.509.124.96.247 1.446.688 1.446 1.308 0 1.336-1.77 1.403-2.126 1.403-1.245 0-1.921-.459-2.128-1.443l-.006-.032H58.67l.001.041c.017.843.12 1.356.668 1.993 1.04 1.198 2.688 1.377 3.58 1.377 2.054 0 4.264-1.054 4.264-3.371 0-.984-.468-1.933-1.221-2.475M34.967 16.402c.82-.592 1.331-1.64 1.331-2.736 0-1.184-.617-2.283-1.609-2.867-.84-.502-1.691-.502-2.514-.502h-4.846V20.92h2.278v-5.251l4.225 5.25h2.758l-3.217-3.897c.576-.098 1.055-.231 1.594-.62m-5.36-1.214v-2.89h2.558c.508 0 .96.022 1.322.281.344.248.548.684.548 1.165 0 .958-.692 1.444-2.056 1.444h-2.372", fill: "#FFF" })] }) }));
 };

package/dist/svgs/ArtsyMarkBlackIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { G, Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const ArtsyMarkBlackIcon = ({ fill, ...restProps }) => {
+export const ArtsyMarkBlackIcon = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 32 32", children: _jsxs(G, { fill: color(fill), fillRule: "evenodd", children: [_jsx(Path, { d: "M0 31.963h31.876V.09H0v31.874zm29.583-2.293h-4.824v-6.283h-2.295v6.283H2.294V2.382h27.289V29.67z" }), _jsx(Path, { d: "M12.854 5.677h-2.53L5.64 17.737h2.422l1.265-3.382h4.541l1.247 3.382h2.424l-4.685-12.06zm-2.82 6.636l1.555-4.197 1.537 4.197h-3.093z" })] }) }));
 };

package/dist/svgs/ArtsyMarkWhiteIcon.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { G, Icon, Path } from "./Icon";
-export const ArtsyMarkWhiteIcon = ({ fill, ...restProps }) => {
+export const ArtsyMarkWhiteIcon = ({ fill = "black100", ...restProps }) => {
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 32 32", children: _jsxs(G, { fill: "none", fillRule: "evenodd", children: [_jsx(Path, { fill: "none", d: "M0 0h32v32H0z" }), _jsx(Path, { d: "M0 31.963h31.876V.09H0v31.874zm29.583-2.293h-4.824v-6.283h-2.295v6.283H2.294V2.382h27.289V29.67z", fill: "#FFF" }), _jsx(Path, { d: "M12.854 5.677h-2.53L5.64 17.737h2.422l1.265-3.382h4.541l1.247 3.382h2.424l-4.685-12.06zm-2.82 6.636l1.555-4.197 1.537 4.197h-3.093z", fill: "#FFF" })] }) }));
 };

package/dist/svgs/ArtworkIcon.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 ArtworkIcon = ({ fill, ...restProps }) => {
+export const ArtworkIcon = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M5.688 6l3.359-3.756L12.314 6H15v9H3V6h2.688zM7.03 6h3.958L9.036 3.756 7.03 6zM4 7v7h10V7H4zm2 2v3h6V9H6zM5 8h8v5H5V8z", fill: color(fill), fillRule: "nonzero" }) }));
 };

package/dist/svgs/AuctionIcon.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 AuctionIcon = ({ fill, ...restProps }) => {
+export const AuctionIcon = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M11.729 10.745l3.776 3.865-.91.89-3.766-3.855-3.446 3.446-5.052-5.052 7.94-7.939 5.051 5.052-3.593 3.593zM10.27 3.717l-6.322 6.322 3.435 3.435 6.323-6.322-3.436-3.435z", fill: color(fill), fillRule: "nonzero" }) }));
 };

package/dist/svgs/BellFillIcon.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 BellFillIcon = ({ fill, ...restProps }) => {
+export const BellFillIcon = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M14.591 12.229a8.82 8.82 0 0 1-1.653-4.979V5.938a3.938 3.938 0 1 0-7.876 0V7.25a8.82 8.82 0 0 1-1.653 4.979.446.446 0 0 0-.053.464c.074.15.227.245.394.245h2.949a2.336 2.336 0 0 0-.105.656 2.406 2.406 0 0 0 4.812 0 2.336 2.336 0 0 0-.105-.656h2.949c.167 0 .32-.095.394-.245a.446.446 0 0 0-.053-.464zm-4.06 1.365a1.531 1.531 0 1 1-3.062 0c.002-.228.056-.452.157-.656h2.748c.101.204.155.428.157.656z", fill: color(fill), fillRule: "nonzero" }) }));
 };

package/dist/svgs/BellIcon.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 BellIcon = ({ fill, ...restProps }) => {
+export const BellIcon = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M14.591 12.229a8.82 8.82 0 0 1-1.653-4.979V5.938a3.938 3.938 0 1 0-7.876 0V7.25a8.82 8.82 0 0 1-1.653 4.979.446.446 0 0 0-.053.464c.074.15.227.245.394.245h2.949a2.336 2.336 0 0 0-.105.656 2.406 2.406 0 0 0 4.812 0 2.336 2.336 0 0 0-.105-.656h2.949c.167 0 .32-.095.394-.245a.446.446 0 0 0-.053-.464zm-4.06 1.365a1.531 1.531 0 1 1-3.062 0c.002-.228.056-.452.157-.656h2.748c.101.204.155.428.157.656zm-5.959-1.531A9.625 9.625 0 0 0 5.937 7.25V5.938a3.063 3.063 0 0 1 6.126 0V7.25a9.625 9.625 0 0 0 1.364 4.813H4.572z", fill: color(fill), fillRule: "nonzero" }) }));
 };

package/dist/svgs/BlueChipIcon.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 BlueChipIcon = ({ fill, ...restProps }) => {
+export const BlueChipIcon = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M9 16A7 7 0 1 0 9 2a7 7 0 0 0 0 14zm0 1A8 8 0 1 1 9 1a8 8 0 0 1 0 16zM6.879 8.842L9 10.964l2.121-2.122L9 6.721 6.879 8.842zM9 5.307l3.536 3.535L9 12.378 5.464 8.842 9 5.307z", fill: color(fill), fillRule: "nonzero" }) }));
 };

package/dist/svgs/BoltCircleFill.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon, Mask, Path, Rect } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const BoltCircleFill = ({ fill, ...restProps }) => {
+export const BoltCircleFill = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsxs(Icon, { ...restProps, viewBox: "0 0 20 20", children: [_jsxs(Mask, { id: "path-1-outside-1", maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20", fill: "black", children: [_jsx(Rect, { fill: color("white100"), width: "20", height: "20" }), _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM9.65332 10.6357H7.16602C6.98145 10.6357 6.84961 10.5082 6.84961 10.3369C6.84961 10.2402 6.89355 10.1523 6.96826 10.0556L10.9585 5.06782C11.2573 4.69428 11.7231 4.93598 11.5562 5.38862L10.2422 8.94819H12.7295C12.9141 8.94819 13.0415 9.08002 13.0415 9.24702C13.0415 9.34809 13.002 9.43598 12.9272 9.52827L8.93701 14.5205C8.63818 14.8896 8.16797 14.6479 8.33936 14.1953L9.65332 10.6357Z" })] }), _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM9.65332 10.6357H7.16602C6.98145 10.6357 6.84961 10.5082 6.84961 10.3369C6.84961 10.2402 6.89355 10.1523 6.96826 10.0556L10.9585 5.06782C11.2573 4.69428 11.7231 4.93598 11.5562 5.38862L10.2422 8.94819H12.7295C12.9141 8.94819 13.0415 9.08002 13.0415 9.24702C13.0415 9.34809 13.002 9.43598 12.9272 9.52827L8.93701 14.5205C8.63818 14.8896 8.16797 14.6479 8.33936 14.1953L9.65332 10.6357Z", fill: color("blue100") }), _jsx(Path, { d: "M9.65332 10.6357L11.5296 11.3283L12.5235 8.63569H9.65332V10.6357ZM6.96826 10.0556L5.40652 8.80622L5.396 8.81938L5.38569 8.83271L6.96826 10.0556ZM10.9585 5.06782L12.5202 6.31721L12.5202 6.31721L10.9585 5.06782ZM11.5562 5.38862L13.4324 6.08121L13.4325 6.08087L11.5562 5.38862ZM10.2422 8.94819L8.36594 8.2556L7.372 10.9482H10.2422V8.94819ZM12.9272 9.52827L11.3727 8.26984L11.365 8.27955L12.9272 9.52827ZM8.93701 14.5205L10.4915 15.7789L10.4993 15.7692L8.93701 14.5205ZM8.33936 14.1953L10.2098 14.9035L10.2127 14.8957L10.2156 14.8878L8.33936 14.1953ZM16 10C16 13.3137 13.3137 16 10 16V20C15.5228 20 20 15.5228 20 10H16ZM10 4C13.3137 4 16 6.68629 16 10H20C20 4.47715 15.5228 0 10 0V4ZM4 10C4 6.68629 6.68629 4 10 4V0C4.47715 0 0 4.47715 0 10H4ZM10 16C6.68629 16 4 13.3137 4 10H0C0 15.5228 4.47715 20 10 20V16ZM7.16602 12.6357H9.65332V8.63569H7.16602V12.6357ZM4.84961 10.3369C4.84961 11.7063 5.97279 12.6357 7.16602 12.6357V8.63569C7.54143 8.63569 7.96949 8.77093 8.31684 9.10125C8.6687 9.43586 8.84961 9.88988 8.84961 10.3369H4.84961ZM5.38569 8.83271C5.20692 9.06406 4.84961 9.58615 4.84961 10.3369H8.84961C8.84961 10.8942 8.58019 11.2405 8.55083 11.2785L5.38569 8.83271ZM9.39676 3.81843L5.40652 8.80622L8.53 11.305L12.5202 6.31721L9.39676 3.81843ZM13.4325 6.08087C13.7791 5.14144 13.5841 3.79417 12.3671 3.15047C11.2 2.53314 10.0047 3.05853 9.39676 3.81843L12.5202 6.31721C12.2111 6.70357 11.3982 7.16304 10.4969 6.68633C9.54577 6.18326 9.50018 5.18315 9.67978 4.69636L13.4325 6.08087ZM12.1184 9.64078L13.4324 6.08121L9.6799 4.69603L8.36594 8.2556L12.1184 9.64078ZM12.7295 6.94819H10.2422V10.9482H12.7295V6.94819ZM15.0415 9.24702C15.0415 7.93755 13.9803 6.94819 12.7295 6.94819V10.9482C12.332 10.9482 11.8971 10.7988 11.5549 10.4634C11.2148 10.1302 11.0415 9.68521 11.0415 9.24702H15.0415ZM14.4817 10.7867C14.7402 10.4674 15.0415 9.9485 15.0415 9.24702H11.0415C11.0415 9.02309 11.088 8.80951 11.1662 8.62171C11.2396 8.44574 11.326 8.32758 11.3728 8.26987L14.4817 10.7867ZM10.4993 15.7692L14.4895 10.777L11.365 8.27955L7.37474 13.2717L10.4993 15.7692ZM6.46895 13.487C6.10916 14.4372 6.3091 15.7875 7.52407 16.4325C8.67558 17.0438 9.87203 16.5441 10.4915 15.7788L7.38252 13.2621C7.70317 12.866 8.5151 12.4299 9.39963 12.8995C10.3476 13.4028 10.3982 14.4059 10.2098 14.9035L6.46895 13.487ZM7.77707 9.9431L6.4631 13.5027L10.2156 14.8878L11.5296 11.3283L7.77707 9.9431Z", fill: color("white100"), mask: "url(#path-1-outside-1)" })] }));
 };

package/dist/svgs/BoltFill.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 BoltFill = ({ fill, ...restProps }) => {
+export const BoltFill = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 11 17", children: _jsx(Path, { d: "M0.873047 9.82227H4.73535L2.69824 15.3594C2.43164 16.0635 3.16309 16.4395 3.62109 15.8652L9.83496 8.09961C9.95117 7.95605 10.0127 7.81934 10.0127 7.66211C10.0127 7.40234 9.80762 7.19727 9.52051 7.19727H5.6582L7.69531 1.66016C7.96191 0.956055 7.23047 0.580078 6.77246 1.16113L0.558594 8.91992C0.442383 9.07031 0.380859 9.20703 0.380859 9.35742C0.380859 9.62402 0.585938 9.82227 0.873047 9.82227Z", fill: color(fill ?? "onBackgroundMedium") }) }));
 };

package/dist/svgs/BookmarkFill.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 BookmarkFill = ({ fill, ...restProps }) => {
+export const BookmarkFill = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 21", children: _jsx(Path, { d: "M5.94922 15.8745C6.2124 15.8745 6.36816 15.7241 6.85156 15.2568L8.95166 13.189C8.97852 13.1621 9.02686 13.1621 9.04834 13.189L11.1484 15.2568C11.6318 15.7241 11.7876 15.8745 12.0508 15.8745C12.4106 15.8745 12.6201 15.6382 12.6201 15.2192V5.89502C12.6201 4.87451 12.1099 4.35352 11.1001 4.35352H6.8999C5.89014 4.35352 5.37988 4.87451 5.37988 5.89502V15.2192C5.37988 15.6382 5.58936 15.8745 5.94922 15.8745Z", fill: color(fill ?? "onBackgroundMedium") }) }));
 };

package/dist/svgs/BriefcaseIcon.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 BriefcaseIcon = ({ fill, ...restProps }) => {
+export const BriefcaseIcon = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M7.15 4.88a2.398 2.398 0 00-.094.214h3.888a2.398 2.398 0 00-.094-.214 1.805 1.805 0 00-.61-.71c-.278-.186-.671-.326-1.24-.326s-.962.14-1.24.326a1.805 1.805 0 00-.61.71zm4.594-.447c.115.229.194.456.25.66h3.131c.483 0 .875.393.875.876v8.312a.875.875 0 01-.875.875H2.875A.875.875 0 012 14.281V5.97c0-.484.392-.875.875-.875h3.131c.056-.205.135-.432.25-.661.194-.388.492-.79.95-1.095.46-.307 1.05-.494 1.794-.494s1.335.187 1.795.494c.457.305.755.707.95 1.095zM3 14.156v-3.75h5.5v.5h1v-.5H15v3.75H3zm6.5-4.75H15V6.094H3v3.312h5.5v-.5h1v.5z", fill: color(fill), fillRule: "evenodd", clipRule: "evenodd" }) }));
 };

package/dist/svgs/CertificateIcon.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 CertificateIcon = ({ fill, ...restProps }) => {
+export const CertificateIcon = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M9.001 4.45a3.73 3.73 0 012.925 6.044v5.347L9 14.281l-2.924 1.56v-5.347A3.73 3.73 0 019.002 4.45zm2.027 9.896V11.31a3.712 3.712 0 01-2.027.599c-.747 0-1.444-.22-2.027-.599v3.036l2.027-1.083 2.027 1.083V11.31zM14.658 2c.742 0 1.345.602 1.345 1.345v8.512c0 .744-.603 1.346-1.346 1.346l-1.793-.001v-.897h1.793c.248 0 .449-.2.449-.448V3.345c0-.247-.201-.448-.449-.448H3.345c-.247 0-.448.2-.448.448v8.512c0 .248.2.449.448.449l1.792-.001v.897H3.345A1.345 1.345 0 012 11.858V3.345C2 2.602 2.602 2 3.345 2h11.312zM9 5.347a2.833 2.833 0 100 5.665 2.833 2.833 0 000-5.665z", fill: color(fill) || color("onBackground"), fillRule: "nonzero" }) }));
 };

package/dist/svgs/CheckCircleFillIcon.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 CheckCircleFillIcon = ({ fill, ...restProps }) => {
+export const CheckCircleFillIcon = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M9 1a8 8 0 1 1 0 16A8 8 0 0 1 9 1zm4.32 5.796l-.764-.783-4.81 4.765-2.302-2.25-.782.783 3.085 3.067 5.573-5.582z", fill: color(fill), fillRule: "nonzero" }) }));
 };

package/dist/svgs/CheckCircleIcon.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 CheckCircleIcon = ({ fill, ...restProps }) => {
+export const CheckCircleIcon = ({ fill = "black100", ...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.32 5.796l-.764-.783-4.81 4.765-2.302-2.25-.782.783 3.085 3.067 5.573-5.582z", fill: color(fill), fillRule: "nonzero" }) }));
 };

package/dist/svgs/CheckIcon.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 CheckIcon = ({ fill, ...restProps }) => {
+export const CheckIcon = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M6.936 12.206l7.64-7.63.848.849-8.492 8.48-4.248-4.282.852-.846z", fill: color(fill), fillRule: "nonzero" }) }));
 };

package/dist/svgs/ClockFill.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 ClockFill = ({ fill, ...restProps }) => {
+export const ClockFill = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 16 16", children: _jsx(Path, { d: "M8 15.1826C12.0869 15.1826 15.4707 11.7915 15.4707 7.71191C15.4707 3.625 12.0796 0.241211 7.99268 0.241211C3.91309 0.241211 0.529297 3.625 0.529297 7.71191C0.529297 11.7915 3.92041 15.1826 8 15.1826ZM4.16943 8.50293C3.87646 8.50293 3.65674 8.2832 3.65674 7.99023C3.65674 7.70459 3.87646 7.48486 4.16943 7.48486H7.4873V3.05371C7.4873 2.76807 7.70703 2.54834 7.99268 2.54834C8.27832 2.54834 8.50537 2.76807 8.50537 3.05371V7.99023C8.50537 8.2832 8.27832 8.50293 7.99268 8.50293H4.16943Z", fill: color(fill ?? "onBackgroundMedium") }) }));
 };

package/dist/svgs/CloseCircleFillIcon.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 CloseCircleFillIcon = ({ fill, ...restProps }) => {
+export const CloseCircleFillIcon = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17ZM12.502 6.28005L9.78199 9.00005L12.502 11.72L11.72 12.502L8.99999 9.78205L6.27999 12.502L5.49799 11.72L8.21799 9.00005L5.49799 6.28005L6.27999 5.49805L8.99999 8.21805L11.72 5.49805L12.502 6.28005Z", fillRule: "evenodd", clipRule: "evenodd", fill: color(fill) }) }));
 };

package/dist/svgs/CloseCircleIcon.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 CloseCircleIcon = ({ fill, ...restProps }) => {
+export const CloseCircleIcon = ({ fill = "black100", ...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.11zm3.502-9.831L9.782 9l2.72 2.72-.782.782L9 9.782l-2.72 2.72-.782-.782L8.218 9l-2.72-2.72.782-.782L9 8.218l2.72-2.72.782.782z", fill: color(fill), fillRule: "nonzero" }) }));
 };

package/dist/svgs/CloseIcon.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 CloseIcon = ({ fill, ...restProps }) => {
+export const CloseIcon = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M9.88 9l4.56 4.56-.88.88L9 9.88l-4.56 4.56-.88-.88L8.12 9 3.56 4.44l.88-.88L9 8.12l4.56-4.56.88.88z", fill: color(fill), fillRule: "evenodd" }) }));
 };

package/dist/svgs/CollapseIcon.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 CollapseIcon = ({ fill, ...restProps }) => {
+export const CollapseIcon = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M7 11.708L2.76 15.96l-.708-.706L6.293 11H2v-1h6v6H7v-4.292zM11 6.292l4.24-4.252.708.706L11.707 7H16v1h-6V2h1v4.292z", fill: color(fill), fillRule: "nonzero" }) }));
 };

package/dist/svgs/CreditCardIcon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Circle, G, Icon, Path, Rect } from "./Icon";
-export const CreditCardIcon = ({ type, fill, ...restProps }) => {
+export const CreditCardIcon = ({ type, fill = "black100", ...restProps }) => {
     const { parts } = cardTypeMap[type ?? "Unknown"] || cardTypeMap.Unknown;
     return (_jsx(Icon, { viewBox: "0 0 30 20", ...restProps, children: parts }));
 };

package/dist/svgs/DecreaseIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { G, Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const DecreaseIcon = ({ fill, ...restProps }) => {
+export const DecreaseIcon = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 10 10", children: _jsx(G, { transform: "rotate(180, 5, 5)", children: _jsx(Path, { d: "M0 4.92701L0.927644 5.83942L4.34137 2.31752V10H5.67718V2.31752L9.07236 5.83942L10 4.92701L5.00928 0L0 4.92701Z", fill: color(fill) }) }) }));
 };

package/dist/svgs/DocumentIcon.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 DocumentIcon = ({ fill, ...restProps }) => {
+export const DocumentIcon = ({ fill = "black100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M14 2H4v14h10V2zm1-.5v15a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-15a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5zM6 10h6v1H6v-1zm0 3h4v1H6v-1z", fill: color(fill), fillRule: "nonzero" }) }));
 };