@artsy/palette-mobile 13.2.34 → 13.2.35

package/dist/svgs/UserSingleIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon, Path } from "./Icon";
+import { useColor } from "../utils/hooks";
+export const UserSingleIcon = ({ fill, ...restProps }) => {
+    const color = useColor();
+    return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M9 3a2.51 2.51 0 1 1 0 5.02A2.51 2.51 0 0 1 9 3zm0-1a3.51 3.51 0 1 0 0 7.02A3.51 3.51 0 0 0 9 2zm6 11v3h-1v-3a1.5 1.5 0 0 0-1.5-1.5h-7A1.5 1.5 0 0 0 4 13v3H3v-3a2.5 2.5 0 0 1 2.5-2.5h7A2.5 2.5 0 0 1 15 13z", fill: color(fill), fillRule: "nonzero" }) }));
+};

package/dist/svgs/VerifiedIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconProps } from "./Icon";
+export declare const VerifiedIcon: ({ fill, ...restProps }: IconProps) => JSX.Element;

package/dist/svgs/VerifiedIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon, Path } from "./Icon";
+import { useColor } from "../utils/hooks";
+export const VerifiedIcon = ({ fill, ...restProps }) => {
+    const color = useColor();
+    return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M5.2 3.08l-.5 1.18a.85.85 0 01-.44.44l-1.17.5a1.78 1.78 0 00-.96 2.3l.48 1.18a.84.84 0 010 .63l-.48 1.19c-.36.9.06 1.92.95 2.3l1.18.5c.2.08.36.24.44.44l.5 1.18a1.78 1.78 0 002.3.95l1.18-.48a.84.84 0 01.64 0l1.18.48a1.78 1.78 0 002.3-.95l.5-1.18a.85.85 0 01.44-.44l1.17-.5a1.78 1.78 0 00.96-2.3l-.48-1.18a.85.85 0 010-.63l.48-1.19c.36-.9-.06-1.92-.96-2.3l-1.17-.5a.85.85 0 01-.44-.44l-.5-1.17A1.78 1.78 0 0011.16 2c-.22 0-.45.04-.66.13l-1.18.48a.85.85 0 01-.63 0L7.5 2.13a1.78 1.78 0 00-2.3.95zm4.47.4L10.85 3a.84.84 0 011.09.45l.5 1.17c.17.43.51.76.94.95l1.17.5A.84.84 0 0115 7.14l-.47 1.18a1.78 1.78 0 000 1.34l.47 1.18a.84.84 0 01-.45 1.09l-1.17.5c-.43.17-.76.51-.95.94l-.5 1.17a.84.84 0 01-1.08.45l-1.18-.48a1.78 1.78 0 00-1.34 0L7.15 15a.84.84 0 01-1.09-.45l-.5-1.17a1.78 1.78 0 00-.94-.95l-1.17-.5A.84.84 0 013 10.86l.48-1.18a1.78 1.78 0 000-1.34L3 7.15a.84.84 0 01.45-1.09l1.17-.5c.43-.17.77-.51.95-.94l.5-1.17A.84.84 0 017.14 3l1.18.47a1.78 1.78 0 001.34 0zm1.74 3.38L8.1 10.17 6.78 8.85a.56.56 0 10-.8.79l1.72 1.72c.22.22.58.22.8 0l3.7-3.7a.56.56 0 000-.8.56.56 0 00-.79 0z", fillRule: "evenodd", fill: color(fill) || color("onBackground") }) }));
+};

package/dist/svgs/VerifiedPersonIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconProps } from "./Icon";
+export declare const VerifiedPersonIcon: ({ fill, ...restProps }: IconProps) => JSX.Element;

package/dist/svgs/VerifiedPersonIcon.js

@@ -0,0 +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 VerifiedPersonIcon = ({ fill, ...restProps }) => {
+    const color = useColor();
+    return (_jsxs(Icon, { ...restProps, viewBox: "0 0 18 18", children: [_jsx(Path, { d: "M9,3c0.7,0,1.3,0.3,1.8,0.7c0.5,0.5,0.7,1.1,0.7,1.8s-0.3,1.3-0.7,1.8C10.3,7.8,9.7,8,9,8S7.7,7.8,7.2,7.3C6.8,6.8,6.5,6.2,6.5,5.5s0.3-1.3,0.7-1.8C7.7,3.3,8.3,3,9,3z M9,2C8.1,2,7.2,2.4,6.5,3c-0.7,0.7-1,1.6-1,2.5s0.4,1.8,1,2.5C7.2,8.7,8.1,9,9,9s1.8-0.4,2.5-1c0.7-0.7,1-1.6,1-2.5s-0.4-1.8-1-2.5C10.8,2.4,9.9,2,9,2z M12.5,11.5h-7c-0.4,0-0.8,0.2-1.1,0.4C4.2,12.2,4,12.6,4,13v3H3v-3c0-0.7,0.3-1.3,0.7-1.8c0.5-0.5,1.1-0.7,1.8-0.7h7V11.5z", fill: color(fill) }), _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M14,17c2.2,0,4-1.8,4-4s-1.8-4-4-4s-4,1.8-4,4S11.8,17,14,17z M15.9,12.3c0.2-0.1,0.2-0.4,0-0.5c-0.2-0.1-0.4-0.1-0.6,0l-1.9,1.7l-0.8-0.7c-0.2-0.1-0.4-0.1-0.6,0c-0.2,0.1-0.2,0.4,0,0.5l1.1,1c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1L15.9,12.3z", fill: color(fill) })] }));
+};

package/dist/svgs/WhatsAppAppIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconProps } from "./Icon";
+export declare const WhatsAppAppIcon: ({ fill, ...restProps }: IconProps) => JSX.Element;

package/dist/svgs/WhatsAppAppIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, Path, Rect } from "./Icon";
+import { Flex } from "../elements/Flex";
+export const WhatsAppAppIcon = ({ fill, ...restProps }) => (_jsx(Flex, { borderRadius: 4, overflow: "hidden", children: _jsxs(Icon, { ...restProps, viewBox: "0 0 455.731 455.731", children: [_jsx(Rect, { x: "0", y: "0", fill: "#25D366", width: "455.731", height: "455.731" }), _jsx(Path, { d: "M68.494,387.41l22.323-79.284c-14.355-24.387-21.913-52.134-21.913-80.638 c0-87.765,71.402-159.167,159.167-159.167s159.166,71.402,159.166,159.167c0,87.765-71.401,159.167-159.166,159.167 c-27.347,0-54.125-7-77.814-20.292L68.494,387.41z M154.437,337.406l4.872,2.975c20.654,12.609,44.432,19.274,68.762,19.274 c72.877,0,132.166-59.29,132.166-132.167S300.948,95.321,228.071,95.321S95.904,154.611,95.904,227.488 c0,25.393,7.217,50.052,20.869,71.311l3.281,5.109l-12.855,45.658L154.437,337.406z", fill: "#FFFFFF" }), _jsx(Path, { d: "M183.359,153.407l-10.328-0.563c-3.244-0.177-6.426,0.907-8.878,3.037 c-5.007,4.348-13.013,12.754-15.472,23.708c-3.667,16.333,2,36.333,16.667,56.333c14.667,20,42,52,90.333,65.667 c15.575,4.404,27.827,1.435,37.28-4.612c7.487-4.789,12.648-12.476,14.508-21.166l1.649-7.702c0.524-2.448-0.719-4.932-2.993-5.98 l-34.905-16.089c-2.266-1.044-4.953-0.384-6.477,1.591l-13.703,17.764c-1.035,1.342-2.807,1.874-4.407,1.312 c-9.384-3.298-40.818-16.463-58.066-49.687c-0.748-1.441-0.562-3.19,0.499-4.419l13.096-15.15 c1.338-1.547,1.676-3.722,0.872-5.602l-15.046-35.201C187.187,154.774,185.392,153.518,183.359,153.407z", fill: "#FFFFFF" })] }) }));

package/dist/svgs/WorldGlobeCircleIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconProps } from "./Icon";
+export declare const WorldGlobeCircleIcon: ({ fill, ...restProps }: IconProps) => JSX.Element;

package/dist/svgs/WorldGlobeCircleIcon.js

@@ -0,0 +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 WorldGlobeCircleIcon = ({ fill, ...restProps }) => {
+    const color = useColor();
+    return (_jsxs(Icon, { ...restProps, viewBox: "0 0 19 19", children: [_jsx(Path, { d: "M16.1114 8.19C16.1114 12.4371 12.6684 15.88 8.4214 15.88C4.17436 15.88 0.731445 12.4371 0.731445 8.19C0.731445 3.94293 4.17436 0.5 8.4214 0.5C12.6684 0.5 16.1114 3.94293 16.1114 8.19Z", fill: color(fill), fillRule: "nonzero" }), _jsx(Path, { d: "M16.1114 8.19C16.1114 12.4371 12.6684 15.88 8.4214 15.88C4.17436 15.88 0.731445 12.4371 0.731445 8.19C0.731445 3.94293 4.17436 0.5 8.4214 0.5C12.6684 0.5 16.1114 3.94293 16.1114 8.19Z", fill: "white", fillRule: "nonzero", scale: 0.9, translateX: 0.8, translateY: 0.8 }), _jsx(Path, { d: "M14.679 10.7386L14.7015 10.6861C15.3645 9.10742 15.4669 7.34941 14.9918 5.70445C14.5166 4.0595 13.4925 2.62675 12.0899 1.64451L12.0223 1.59199C10.5724 0.602351 8.8213 0.152252 7.07374 0.320002C5.32618 0.487751 3.69275 1.26273 2.45762 2.51011C1.22249 3.7575 0.46384 5.39833 0.313655 7.14715C0.16347 8.89597 0.631256 10.6421 1.63563 12.0817V12.0967L1.67315 12.1417C2.25846 12.9633 3.00373 13.6582 3.86426 14.1846C4.72479 14.7111 5.68283 15.0584 6.6809 15.2055C7.67896 15.3527 8.69647 15.2967 9.67237 15.041C10.6483 14.7853 11.5624 14.3351 12.36 13.7175C12.3834 13.7075 12.404 13.6921 12.4201 13.6724C13.4077 12.8999 14.1847 11.8908 14.679 10.7386ZM7.78209 0.879169C9.13855 0.876105 10.4654 1.27565 11.5945 2.02719L11.6771 3.70044C11.6785 3.77728 11.6518 3.852 11.602 3.91054L9.93597 5.8314C9.88825 5.88676 9.82108 5.92167 9.74835 5.92895L7.39184 6.25159C7.31527 6.26203 7.23757 6.24328 7.1742 6.19907L5.69574 5.12608C5.59539 5.05561 5.4819 5.00602 5.362 4.98024C5.24211 4.95446 5.11825 4.95302 4.99779 4.97602C4.87781 4.99763 4.7637 5.04419 4.66286 5.1127C4.56202 5.18121 4.4767 5.27012 4.41242 5.3737L2.91896 7.70725C2.82695 7.85061 2.77751 8.01713 2.77636 8.18746L2.76135 10.8962C2.76203 10.9475 2.74922 10.998 2.72419 11.0428C2.69917 11.0876 2.66281 11.125 2.61876 11.1513L1.98836 11.534C1.26081 10.4181 0.87479 9.11427 0.877642 7.78228C0.879629 5.95207 1.6077 4.19739 2.9021 2.90324C4.19651 1.60908 5.95152 0.881156 7.78209 0.879169ZM2.34108 12.0217L2.92646 11.669C3.05848 11.5894 3.16783 11.4772 3.24404 11.3432C3.32026 11.2092 3.36079 11.0578 3.36174 10.9037L3.37675 8.18746C3.37909 8.13105 3.3973 8.07643 3.42928 8.02989L4.91524 5.69634C4.93688 5.66175 4.96534 5.63194 4.99889 5.60871C5.03244 5.58549 5.07037 5.56935 5.11037 5.56128C5.1918 5.54765 5.27534 5.56651 5.34302 5.6138L6.82147 6.68679C7.00866 6.81963 7.23952 6.876 7.46688 6.84436L9.83091 6.52922C10.0495 6.49789 10.2494 6.38863 10.3938 6.22158L12.0523 4.30071C12.1293 4.21581 12.1883 4.11619 12.2257 4.00786C12.2631 3.89953 12.2782 3.78474 12.27 3.67043L12.2174 2.4924C13.2934 3.39619 14.0687 4.60613 14.4401 5.96124C14.8114 7.31636 14.7613 8.7524 14.2963 10.0783L12.7503 8.66768C12.6239 8.55191 12.4673 8.47427 12.2987 8.44373C12.13 8.41319 11.9561 8.431 11.7972 8.4951L9.5157 9.44803C9.3719 9.50717 9.24586 9.60252 9.14986 9.7248C9.05385 9.84709 8.99115 9.99214 8.96785 10.1458L8.78773 11.3614C8.75446 11.5809 8.80348 11.805 8.92538 11.9906C9.04728 12.1761 9.23346 12.3102 9.44816 12.3669L11.0617 12.787C11.113 12.8026 11.1595 12.831 11.1968 12.8696L11.7521 13.4248C10.3046 14.4477 8.51818 14.8728 6.765 14.6114C5.01182 14.35 3.42712 13.4223 2.34108 12.0217ZM12.2325 13.0572L11.6246 12.4419C11.5111 12.3277 11.3682 12.2472 11.2118 12.2093L9.60576 11.7816C9.53424 11.7638 9.47177 11.7203 9.43025 11.6594C9.38873 11.5985 9.37106 11.5245 9.38062 11.4514L9.56073 10.2359C9.56754 10.1847 9.5878 10.1362 9.61943 10.0953C9.65107 10.0545 9.69296 10.0227 9.74085 10.0033L12.0298 9.05035C12.0825 9.02859 12.1404 9.02267 12.1964 9.03333C12.2524 9.044 12.304 9.07078 12.345 9.11038L14.0561 10.6711C13.627 11.5884 13.005 12.4022 12.2325 13.0572Z", fill: color(fill), scale: 0.6, translateX: 3.5, translateY: 3.5 })] }));
+};

package/dist/svgs/XCircleIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconProps } from "./Icon";
+export declare const XCircleIcon: ({ fill, ...restProps }: IconProps) => JSX.Element;

package/dist/svgs/XCircleIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Circle, Icon, Path } from "./Icon";
+import { useColor } from "../utils/hooks";
+export const XCircleIcon = ({ fill, ...restProps }) => {
+    const color = useColor();
+    return (_jsxs(Icon, { ...restProps, viewBox: "0 0 18 18", children: [_jsx(Circle, { cx: 9, cy: 9, r: 9, fill: color("background") }), _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16ZM12.3588 12.3587C12.0659 12.6516 11.591 12.6516 11.2981 12.3587L9 10.0607L6.70189 12.3588C6.409 12.6517 5.93413 12.6517 5.64123 12.3588C5.34834 12.0659 5.34834 11.591 5.64123 11.2981L7.93934 8.99999L5.64124 6.70189C5.34835 6.409 5.34835 5.93412 5.64124 5.64123C5.93413 5.34834 6.40901 5.34834 6.7019 5.64123L9 7.93933L11.2981 5.64125C11.591 5.34835 12.0659 5.34835 12.3587 5.64125C12.6516 5.93414 12.6516 6.40901 12.3587 6.70191L10.0607 8.99999L12.3588 11.2981C12.6516 11.591 12.6516 12.0659 12.3588 12.3587Z", fill: color(fill) })] }));
+};

package/dist/svgs/icons.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("styled-components").StyledComponent<({ width, height, ...restProps }: import("react-native-svg").SvgProps) => JSX.Element, any, import("./Icon").IconProps, never>;
+};
+export default _default;
+export declare const AllIcons: () => JSX.Element;

package/dist/svgs/icons.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Icons from ".";
+import { Icon } from "./Icon";
+import { Flex } from "../elements/Flex";
+import { Spacer } from "../elements/Spacer";
+import { Text } from "../elements/Text";
+import { List } from "../storybook/helpers";
+export default {
+    title: "Icons",
+    component: Icon,
+};
+const allIcons = Object.entries(Icons);
+export const AllIcons = () => (_jsx(List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: allIcons.map((icon) => {
+        const Comp = icon[1];
+        const name = icon[0];
+        return (_jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [_jsx(Comp, { fill: "onBackgroundHigh" }), _jsx(Spacer, { x: 1 }), _jsx(Text, { children: name })] }));
+    }) }));

package/dist/svgs/index.d.ts

@@ -0,0 +1,113 @@
+export * from "./AddCircleFillIcon";
+export * from "./AddCircleIcon";
+export * from "./AddIcon";
+export * from "./AlertCircleFillIcon";
+export * from "./AlertIcon";
+export * from "./ArrowCircleFillIcons";
+export * from "./ArrowDownCircleIcon";
+export * from "./ArrowDownIcon";
+export * from "./ArrowLeftCircleIcon";
+export * from "./ArrowLeftIcon";
+export * from "./ArrowRightCircleIcon";
+export * from "./ArrowRightIcon";
+export * from "./ArrowUpCircleIcon";
+export * from "./ArrowUpIcon";
+export * from "./ArtsyLogoBlackIcon";
+export * from "./ArtsyLogoWhiteIcon";
+export * from "./ArtsyMarkBlackIcon";
+export * from "./ArtsyMarkWhiteIcon";
+export * from "./ArtworkIcon";
+export * from "./AuctionIcon";
+export * from "./BellFillIcon";
+export * from "./BellIcon";
+export * from "./BlueChipIcon";
+export * from "./BoltCircleFill";
+export * from "./BoltFill";
+export * from "./BookmarkFill";
+export * from "./BriefcaseIcon";
+export * from "./CertificateIcon";
+export * from "./CheckCircleFillIcon";
+export * from "./CheckCircleIcon";
+export * from "./CheckIcon";
+export * from "./ChevronIcon";
+export * from "./ClockFill";
+export * from "./CloseCircleFillIcon";
+export * from "./CloseCircleIcon";
+export * from "./CloseIcon";
+export * from "./CollapseIcon";
+export * from "./CreditCardIcon";
+export * from "./DecreaseIcon";
+export * from "./DocumentIcon";
+export * from "./DownloadIcon";
+export * from "./EditIcon";
+export * from "./EmptyCheckCircleIcon";
+export * from "./EnterIcon";
+export * from "./EnvelopeIcon";
+export * from "./EstablishedIcon";
+export * from "./ExclamationMarkCircleFill";
+export * from "./ExpandIcon";
+export * from "./EyeClosedIcon";
+export * from "./EyeOpenedIcon";
+export * from "./FacebookIcon";
+export * from "./FairIcon";
+export * from "./FilterIcon";
+export * from "./FullWidthIcon";
+export * from "./GenomeIcon";
+export * from "./GraphIcon";
+export * from "./GridIcon";
+export * from "./GuaranteeIcon";
+export * from "./HeartFillIcon";
+export * from "./HeartIcon";
+export * from "./HideIcon";
+export * from "./HomeIcon";
+export * from "./ImageIcon";
+export * from "./ImageSetIcon";
+export * from "./IncreaseIcon";
+export * from "./InfoCircleIcon";
+export * from "./InstagramAppIcon";
+export * from "./InstitutionIcon";
+export * from "./LinkIcon";
+export * from "./LoaderIcon";
+export * from "./LockIcon";
+export * from "./LogoutIcon";
+export * from "./MagnifyingGlassIcon";
+export * from "./MapPinIcon";
+export * from "./MenuIcon";
+export * from "./MessageIcon";
+export * from "./MessagesAppIcon";
+export * from "./MoneyCircleIcon";
+export * from "./MoneyFillIcon";
+export * from "./MoreIcon";
+export * from "./MultiplePersonsIcon";
+export * from "./NoArtworkIcon";
+export * from "./NoImageIcon";
+export * from "./PageIcon";
+export * from "./Payment2Icon";
+export * from "./PaymentIcon";
+export * from "./PersonIcon";
+export * from "./PublicationIcon";
+export * from "./QuestionCircleIcon";
+export * from "./ReloadIcon";
+export * from "./SecureLockIcon";
+export * from "./SettingsIcon";
+export * from "./ShareIcon";
+export * from "./ShieldIcon";
+export * from "./ShieldFilledIcon";
+export * from "./StarCircleFill";
+export * from "./StarCircleIcon";
+export * from "./Stopwatch";
+export * from "./Tag2Icon";
+export * from "./TagIcon";
+export * from "./TimerIcon";
+export * from "./TopEmergingIcon";
+export * from "./TrashIcon";
+export * from "./TrendingIcon";
+export * from "./TriangleDown";
+export * from "./TwitterIcon";
+export * from "./UserMultiIcon";
+export * from "./UserSingleIcon";
+export * from "./VerifiedIcon";
+export * from "./VerifiedPersonIcon";
+export * from "./WhatsAppAppIcon";
+export * from "./WorldGlobeCircleIcon";
+export * from "./XCircleIcon";

package/dist/svgs/index.js

@@ -0,0 +1,113 @@
+export * from "./AddCircleFillIcon";
+export * from "./AddCircleIcon";
+export * from "./AddIcon";
+export * from "./AlertCircleFillIcon";
+export * from "./AlertIcon";
+export * from "./ArrowCircleFillIcons";
+export * from "./ArrowDownCircleIcon";
+export * from "./ArrowDownIcon";
+export * from "./ArrowLeftCircleIcon";
+export * from "./ArrowLeftIcon";
+export * from "./ArrowRightCircleIcon";
+export * from "./ArrowRightIcon";
+export * from "./ArrowUpCircleIcon";
+export * from "./ArrowUpIcon";
+export * from "./ArtsyLogoBlackIcon";
+export * from "./ArtsyLogoWhiteIcon";
+export * from "./ArtsyMarkBlackIcon";
+export * from "./ArtsyMarkWhiteIcon";
+export * from "./ArtworkIcon";
+export * from "./AuctionIcon";
+export * from "./BellFillIcon";
+export * from "./BellIcon";
+export * from "./BlueChipIcon";
+export * from "./BoltCircleFill";
+export * from "./BoltFill";
+export * from "./BookmarkFill";
+export * from "./BriefcaseIcon";
+export * from "./CertificateIcon";
+export * from "./CheckCircleFillIcon";
+export * from "./CheckCircleIcon";
+export * from "./CheckIcon";
+export * from "./ChevronIcon";
+export * from "./ClockFill";
+export * from "./CloseCircleFillIcon";
+export * from "./CloseCircleIcon";
+export * from "./CloseIcon";
+export * from "./CollapseIcon";
+export * from "./CreditCardIcon";
+export * from "./DecreaseIcon";
+export * from "./DocumentIcon";
+export * from "./DownloadIcon";
+export * from "./EditIcon";
+export * from "./EmptyCheckCircleIcon";
+export * from "./EnterIcon";
+export * from "./EnvelopeIcon";
+export * from "./EstablishedIcon";
+export * from "./ExclamationMarkCircleFill";
+export * from "./ExpandIcon";
+export * from "./EyeClosedIcon";
+export * from "./EyeOpenedIcon";
+export * from "./FacebookIcon";
+export * from "./FairIcon";
+export * from "./FilterIcon";
+export * from "./FullWidthIcon";
+export * from "./GenomeIcon";
+export * from "./GraphIcon";
+export * from "./GridIcon";
+export * from "./GuaranteeIcon";
+export * from "./HeartFillIcon";
+export * from "./HeartIcon";
+export * from "./HideIcon";
+export * from "./HomeIcon";
+export * from "./ImageIcon";
+export * from "./ImageSetIcon";
+export * from "./IncreaseIcon";
+export * from "./InfoCircleIcon";
+export * from "./InstagramAppIcon";
+export * from "./InstitutionIcon";
+export * from "./LinkIcon";
+export * from "./LoaderIcon";
+export * from "./LockIcon";
+export * from "./LogoutIcon";
+export * from "./MagnifyingGlassIcon";
+export * from "./MapPinIcon";
+export * from "./MenuIcon";
+export * from "./MessageIcon";
+export * from "./MessagesAppIcon";
+export * from "./MoneyCircleIcon";
+export * from "./MoneyFillIcon";
+export * from "./MoreIcon";
+export * from "./MultiplePersonsIcon";
+export * from "./NoArtworkIcon";
+export * from "./NoImageIcon";
+export * from "./PageIcon";
+export * from "./Payment2Icon";
+export * from "./PaymentIcon";
+export * from "./PersonIcon";
+export * from "./PublicationIcon";
+export * from "./QuestionCircleIcon";
+export * from "./ReloadIcon";
+export * from "./SecureLockIcon";
+export * from "./SettingsIcon";
+export * from "./ShareIcon";
+export * from "./ShieldIcon";
+export * from "./ShieldFilledIcon";
+export * from "./StarCircleFill";
+export * from "./StarCircleIcon";
+export * from "./Stopwatch";
+export * from "./Tag2Icon";
+export * from "./TagIcon";
+export * from "./TimerIcon";
+export * from "./TopEmergingIcon";
+export * from "./TrashIcon";
+export * from "./TrendingIcon";
+export * from "./TriangleDown";
+export * from "./TwitterIcon";
+export * from "./UserMultiIcon";
+export * from "./UserSingleIcon";
+export * from "./VerifiedIcon";
+export * from "./VerifiedPersonIcon";
+export * from "./WhatsAppAppIcon";
+export * from "./WorldGlobeCircleIcon";
+export * from "./XCircleIcon";

package/dist/tokens.d.ts

@@ -0,0 +1,67 @@
+/**
+ * All of the config for the Artsy theming system, based on the
+ * design system from our design team:
+ * https://www.figma.com/file/gZNkyqLT8AU3T61tluVJyB/Artsy-3.1-Design-System
+ */
+import { SpacingUnit as SpacingUnitNumbers } from "@artsy/palette-tokens/dist/themes/v3";
+import { TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
+import { Color, ColorDSValue, ColorLayerName, SpacingUnit } from "./types";
+import { TextTreatmentWithoutUnits } from "./utils/webTokensToMobile";
+export interface ThemeType {
+    space: Record<SpacingUnitNumbers, `${number}px`>;
+    colors: Record<ColorLayerName, string>;
+    fonts: {
+        sans: {
+            regular: string;
+            italic: string;
+            medium: string;
+            mediumItalic: string;
+        };
+    };
+    textTreatments: Record<TextVariant, TextTreatmentWithoutUnits>;
+}
+export interface ThemeWithDarkModeType extends ThemeType {
+    colors: Record<ColorDSValue, string>;
+}
+export type AllThemesType = ThemeType & ThemeWithDarkModeType;
+export type SpacingUnitsTheme = {
+    space: Record<SpacingUnit, any>;
+};
+export type ColorsTheme = {
+    colors: Record<Color, any>;
+};
+export declare const COLOR_LAYER_NAME: {
+    /** Adding this here for dev usage. Avoid using it for actual components. */
+    devpurple: string;
+    black100: string;
+    black60: string;
+    black30: string;
+    black15: string;
+    black10: string;
+    black5: string;
+    white100: string;
+    blue200: string;
+    blue150: string;
+    blue100: string;
+    brand: string;
+    blue15: string;
+    blue10: string;
+    green150: string;
+    green100: string;
+    green10: string;
+    yellow150: string;
+    yellow100: string;
+    yellow10: string;
+    orange150: string;
+    orange100: string;
+    orange10: string;
+    red150: string;
+    red100: string;
+    red10: string;
+};
+export declare const COLOR_LAYER_ROLE: readonly ["background", "onBackground", "onBackgroundHigh", "onBackgroundMedium", "onBackgroundLow", "surface", "onSurface", "onSurfaceHigh", "onSurfaceMedium", "onSurfaceLow", "primary", "onPrimaryHigh", "onPrimaryMedium", "onPrimaryLow", "secondary", "onSecondaryHigh", "onSecondaryMedium", "onSecondaryLow", "brand", "onBrand"];
+export declare const THEMES: {
+    v3: ThemeType;
+    v3light: ThemeWithDarkModeType;
+    v3dark: ThemeWithDarkModeType;
+};

package/dist/tokens.js

@@ -0,0 +1,104 @@
+/**
+ * All of the config for the Artsy theming system, based on the
+ * design system from our design team:
+ * https://www.figma.com/file/gZNkyqLT8AU3T61tluVJyB/Artsy-3.1-Design-System
+ */
+import { THEME } from "@artsy/palette-tokens";
+import { convertWebSpacingUnitsToMobile, convertWebTextTreatmentsToMobile, } from "./utils/webTokensToMobile";
+const { textVariants, space, colors } = THEME;
+export const COLOR_LAYER_NAME = {
+    ...colors,
+    /** Adding this here for dev usage. Avoid using it for actual components. */
+    devpurple: "#6E1EFF",
+};
+export const COLOR_LAYER_ROLE = [
+    // name: Anything big/surface: background, cards, button fills, etc.
+    // onName: Anything small, texts, icons, etc.
+    // onNameContrast: Anything small, texts, icons, etc based on contrast.
+    "background",
+    "onBackground",
+    "onBackgroundHigh",
+    "onBackgroundMedium",
+    "onBackgroundLow",
+    "surface",
+    "onSurface",
+    "onSurfaceHigh",
+    "onSurfaceMedium",
+    "onSurfaceLow",
+    "primary",
+    "onPrimaryHigh",
+    "onPrimaryMedium",
+    "onPrimaryLow",
+    "secondary",
+    "onSecondaryHigh",
+    "onSecondaryMedium",
+    "onSecondaryLow",
+    "brand",
+    "onBrand",
+];
+const v3 = {
+    space: convertWebSpacingUnitsToMobile(space),
+    colors: COLOR_LAYER_NAME,
+    fonts: {
+        sans: {
+            regular: "Unica77LL-Regular",
+            italic: "Unica77LL-Italic",
+            medium: "Unica77LL-Medium",
+            mediumItalic: "Unica77LL-MediumItalic",
+        },
+    },
+    textTreatments: convertWebTextTreatmentsToMobile(textVariants),
+};
+const v3light = {
+    ...v3,
+    colors: {
+        ...v3.colors,
+        background: colors.white100,
+        onBackground: colors.black100,
+        onBackgroundHigh: colors.black100,
+        onBackgroundMedium: colors.black60,
+        onBackgroundLow: colors.black30,
+        surface: colors.white100,
+        onSurface: colors.black100,
+        onSurfaceHigh: colors.black100,
+        onSurfaceMedium: colors.black60,
+        onSurfaceLow: colors.black5,
+        primary: colors.black100,
+        onPrimaryHigh: colors.white100,
+        onPrimaryMedium: colors.black5,
+        onPrimaryLow: colors.black5,
+        secondary: colors.black30,
+        onSecondaryHigh: colors.black100,
+        onSecondaryMedium: colors.black60,
+        onSecondaryLow: colors.black60,
+        brand: colors.blue100,
+        onBrand: colors.white100,
+    },
+};
+const v3dark = {
+    ...v3,
+    colors: {
+        ...v3.colors,
+        background: colors.black100,
+        onBackground: colors.white100,
+        onBackgroundHigh: colors.white100,
+        onBackgroundMedium: colors.black30,
+        onBackgroundLow: colors.black60,
+        surface: "#333",
+        onSurface: colors.white100,
+        onSurfaceHigh: colors.white100,
+        onSurfaceMedium: colors.black60,
+        onSurfaceLow: "#555",
+        primary: colors.white100,
+        onPrimaryHigh: colors.black100,
+        onPrimaryMedium: colors.black60,
+        onPrimaryLow: colors.black60,
+        secondary: colors.black60,
+        onSecondaryHigh: colors.white100,
+        onSecondaryMedium: colors.black5,
+        onSecondaryLow: colors.black5,
+        brand: colors.blue100,
+        onBrand: colors.white100,
+    },
+};
+export const THEMES = { v3, v3light, v3dark };

package/dist/types.d.ts

@@ -0,0 +1,16 @@
+import { SpacingUnit as BaseSpacingUnit } from "@artsy/palette-tokens";
+import { COLOR_LAYER_ROLE, COLOR_LAYER_NAME } from "./tokens";
+import { Neg } from "./utils/types";
+export type SpacingUnitDSValueNumber = BaseSpacingUnit;
+export type SpacingUnitDSValueNegativeNumber = Neg<SpacingUnitDSValueNumber>;
+export type SpacingUnitDSValue = SpacingUnitDSValueNumber | SpacingUnitDSValueNegativeNumber;
+export type SpacingUnitPixelValue = `${number}px` & {};
+export type SpacingUnitSpecialValue = 0 | "0px" | "auto";
+export type SpacingUnit = SpacingUnitDSValue | SpacingUnitPixelValue | SpacingUnitSpecialValue;
+export type ColorLayerName = keyof typeof COLOR_LAYER_NAME;
+export type ColorLayerRole = typeof COLOR_LAYER_ROLE[number];
+export type ColorCSS = string & {};
+export type ColorDSValue = ColorLayerName | ColorLayerRole;
+export type Color = ColorLayerName | ColorLayerRole | ColorCSS;
+export declare const isRoleLayer: (name: Color) => name is "background" | "onBackground" | "onBackgroundHigh" | "onBackgroundMedium" | "onBackgroundLow" | "surface" | "onSurface" | "onSurfaceHigh" | "onSurfaceMedium" | "onSurfaceLow" | "primary" | "onPrimaryHigh" | "onPrimaryMedium" | "onPrimaryLow" | "secondary" | "onSecondaryHigh" | "onSecondaryMedium" | "onSecondaryLow" | "brand" | "onBrand";
+export declare const isNameLayer: (name: Color) => name is "brand" | "devpurple" | "black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue200" | "blue150" | "blue100" | "blue15" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10";

package/dist/types.js

@@ -0,0 +1,7 @@
+import { COLOR_LAYER_ROLE, COLOR_LAYER_NAME } from "./tokens";
+export const isRoleLayer = (name) => {
+    return COLOR_LAYER_ROLE.includes(name);
+};
+export const isNameLayer = (name) => {
+    return Object.keys(COLOR_LAYER_NAME).includes(name);
+};

package/dist/utils/Wrap.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface WrapProps {
+    if: boolean;
+    children?: React.ReactNode;
+}
+export declare const Wrap: {
+    ({ if: condition, children }: WrapProps): JSX.Element;
+    Content({ children }: {
+        children?: React.ReactNode;
+    }): JSX.Element;
+};
+export {};

package/dist/utils/Wrap.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { getChildrenByTypeDeep } from "react-nanny";
+export const Wrap = ({ if: condition, children }) => {
+    if (condition) {
+        return _jsx(_Fragment, { children: children });
+    }
+    const wrapContentChildren = getChildrenByTypeDeep(children, Wrap.Content);
+    if (wrapContentChildren.length === 0) {
+        throw new Error("Wrap.Content is required");
+    }
+    if (wrapContentChildren.length > 1) {
+        throw new Error("You can't have more than one Wrap.Content");
+    }
+    const actualWrapContent = wrapContentChildren[0];
+    return _jsx(_Fragment, { children: actualWrapContent });
+};
+Wrap.Content = ({ children }) => _jsx(_Fragment, { children: children });

package/dist/utils/colors.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const All: () => JSX.Element;

package/dist/utils/colors.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex } from "../elements/Flex";
+import { Text } from "../elements/Text";
+import { List, Row } from "../storybook/helpers";
+import { COLOR_LAYER_NAME } from "../tokens";
+import { isRoleLayer } from "../types";
+import { useColor } from "../utils/hooks";
+export default {
+    title: "Tokens/colors",
+};
+const ColorSquare = ({ color: theColor, border }) => {
+    const color = useColor();
+    const contrast = theColor.startsWith("on") &&
+        (theColor.endsWith("High") || theColor.endsWith("Medium") || theColor.endsWith("Low"))
+        ? theColor.match(/(High|Medium|Low)$/)?.[0]
+        : undefined;
+    const colorWithoutContrast = theColor.replace(/(High|Medium|Low)$/, "");
+    const cssName = useCssColorName(theColor);
+    const namedName = useNamedColorName(theColor);
+    const displayName = isRoleLayer(theColor) ? namedName : cssName;
+    return (_jsxs(Flex, { children: [_jsx(Flex, { style: [
+                    {
+                        backgroundColor: color(theColor),
+                        width: 80,
+                        height: 80,
+                        alignItems: "center",
+                        justifyContent: "center",
+                    },
+                    border && {
+                        borderWidth: 0.5,
+                        borderColor: "grey",
+                    },
+                ] }), _jsx(Text, { children: colorWithoutContrast }), contrast && _jsx(Text, { children: contrast }), _jsx(Text, { color: "onBackgroundLow", children: displayName })] }));
+};
+export const All = () => (_jsxs(List, { children: [_jsxs(Row, { children: [_jsx(ColorSquare, { color: "black100", border: true }), _jsx(ColorSquare, { color: "black60" }), _jsx(ColorSquare, { color: "black30" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "black15" }), _jsx(ColorSquare, { color: "black10" }), _jsx(ColorSquare, { color: "black5" }), _jsx(ColorSquare, { color: "white100", border: true })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "blue150" }), _jsx(ColorSquare, { color: "blue100" }), _jsx(ColorSquare, { color: "blue10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "green150" }), _jsx(ColorSquare, { color: "green100" }), _jsx(ColorSquare, { color: "green10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "yellow150" }), _jsx(ColorSquare, { color: "yellow100" }), _jsx(ColorSquare, { color: "yellow10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "orange150" }), _jsx(ColorSquare, { color: "orange100" }), _jsx(ColorSquare, { color: "orange10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "red150" }), _jsx(ColorSquare, { color: "red100" }), _jsx(ColorSquare, { color: "red10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "brand" }), _jsx(ColorSquare, { color: "devpurple" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "background", border: true }) }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "onBackgroundHigh", border: true }), _jsx(ColorSquare, { color: "onBackgroundMedium" }), _jsx(ColorSquare, { color: "onBackgroundLow" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "surface", border: true }) }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "onSurfaceHigh", border: true }), _jsx(ColorSquare, { color: "onSurfaceMedium" }), _jsx(ColorSquare, { color: "onSurfaceLow" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "primary", border: true }) }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "onPrimaryHigh", border: true }), _jsx(ColorSquare, { color: "onPrimaryMedium" }), _jsx(ColorSquare, { color: "onPrimaryLow" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "secondary" }) }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "onSecondaryHigh" }), _jsx(ColorSquare, { color: "onSecondaryMedium" }), _jsx(ColorSquare, { color: "onSecondaryLow" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "brand" }) }), _jsx(Row, { children: _jsx(ColorSquare, { color: "onBrand", border: true }) })] }));
+const useNamedColorName = (theColor) => {
+    const color = useColor();
+    const cssName = useCssColorName(theColor);
+    const namedColor = Object.keys(COLOR_LAYER_NAME).find((name) => color(name) === color(theColor));
+    if (namedColor === undefined)
+        return cssName;
+    return namedColor;
+};
+const useCssColorName = (theColor) => {
+    const color = useColor();
+    return color(theColor);
+};

package/dist/utils/createGeminiUrl.d.ts

@@ -0,0 +1,9 @@
+export type GeminiResizeMode = "fit" | "fill";
+export declare function createGeminiUrl({ imageURL, width, height, geminiHost, imageQuality, resizeMode, }: {
+    imageURL: string;
+    width: number;
+    height: number;
+    geminiHost?: string;
+    imageQuality?: number;
+    resizeMode?: GeminiResizeMode;
+}): string;