@wix/design-system
Version:
@wix/design-system
39 lines • 4.26 kB
JavaScript
import React from 'react';
import { classes } from './Avatar.st.css.js';
const personSvg = (React.createElement("svg", { className: classes.placeholder, viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
React.createElement("g", { clipPath: "url(#avatarPersonClip0)" },
React.createElement("g", { opacity: "0.5" },
React.createElement("g", { clipPath: "url(#avatarPersonClip1)" },
React.createElement("rect", { width: "48", height: "48", rx: "23.4032", fill: "var(--wds-illustration-color-6, #002294)" }),
React.createElement("g", { filter: "url(#avatarPersonBlur)" },
React.createElement("path", { d: "M27.494 -18.5711C25.7001 -18.2145 23.9293 -17.7199 22.2045 -17.0872C15.1213 -14.4645 8.843 -9.4722 4.70346 -2.44384C-4.76 13.6029 0.506418 34.1589 16.4667 43.4649C32.4269 52.7708 53.0326 47.2954 62.4961 31.2486C71.9596 15.1904 66.6931 -5.36561 50.7444 -14.6601C43.4542 -18.9162 35.2096 -20.078 27.494 -18.5711Z", fill: "url(#avatarPersonGradient)" })))),
React.createElement("circle", { cx: "23.9999", cy: "19.2", r: "9.6", fill: "var(--wds-illustration-color-6, #002294)" }),
React.createElement("circle", { cx: "24", cy: "55.2", r: "24", fill: "var(--wds-illustration-color-6, #002294)" })),
React.createElement("defs", null,
React.createElement("filter", { id: "avatarPersonBlur", x: "-14.4", y: "-33.6", width: "96", height: "96", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
React.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
React.createElement("feGaussianBlur", { stdDeviation: "7.2", result: "effect1_foregroundBlur" })),
React.createElement("linearGradient", { id: "avatarPersonGradient", x1: "57.6693", y1: "-13.1682", x2: "0.185771", y2: "60.1835", gradientUnits: "userSpaceOnUse" },
React.createElement("stop", { offset: "0.176006", stopColor: "var(--wds-illustration-color-5, #EAEFFF)" }),
React.createElement("stop", { offset: "0.576923", stopColor: "var(--wds-illustration-color-3, #B8C4FF)" }),
React.createElement("stop", { offset: "0.85", stopColor: "var(--wds-illustration-color-6, #002294)" })),
React.createElement("clipPath", { id: "avatarPersonClip0" },
React.createElement("rect", { width: "48", height: "48", rx: "24", fill: "white" })),
React.createElement("clipPath", { id: "avatarPersonClip1" },
React.createElement("rect", { width: "48", height: "48", rx: "23.4032", fill: "white" })))));
const businessSvg = (React.createElement("svg", { className: classes.placeholder, viewBox: "0 0 48 48" },
React.createElement("path", { d: "M21,13.387 C21,12.705 21.669,12.223 22.316,12.438 L22.316,12.438 L34.632,16.544 C35.449,16.816 36,17.581 36,18.441 L36,18.441 L36,34 L38,34 L38,36 L10,36 L10,34 L12,34 L12,21.659 C12,21.259 12.238,20.898 12.606,20.74 L12.606,20.74 L17.606,18.597 C18.266,18.314 19,18.799 19,19.517 L19,19.517 L19,34 L21,34 Z M32,29 L25,29 L25,31 L32,31 L32,29 Z M32,24 L25,24 L25,26 L32,26 L32,24 Z M32,19 L25,19 L25,21 L32,21 L32,19 Z" })));
const smallBusinessSvg = (React.createElement("svg", { className: classes.placeholder, viewBox: "0 0 24 24" },
React.createElement("path", { d: "M18,17 L18,8.754 C18,8.308 17.704,7.916 17.275,7.793 L11.637,6.182 C11.318,6.091 11,6.331 11,6.663 L11,17 L9,17 L9,8.934 C9,8.535 8.555,8.297 8.223,8.518 L6.223,9.852 C6.083,9.944 6,10.101 6,10.268 L6,17 L5,17 L5,18 L6,18 L9,18 L11,18 L18,18 L19,18 L19,17 L18,17 Z" })));
export const placeholderSVGs = {
size90: { circle: personSvg, square: businessSvg },
size72: { circle: personSvg, square: businessSvg },
size60: { circle: personSvg, square: businessSvg },
size48: { circle: personSvg, square: businessSvg },
size36: { circle: personSvg, square: businessSvg },
size30: { circle: personSvg, square: businessSvg },
size24: { circle: personSvg, square: smallBusinessSvg },
size18: { circle: personSvg, square: smallBusinessSvg },
};
//# sourceMappingURL=assets.js.map