UNPKG

class101-ui

Version:

A React-based UI Component Library, powered by Class101.

1,034 lines (948 loc) 133 kB
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } var styled = require('styled-components'); var styled__default = _interopDefault(styled); var React = _interopDefault(require('react')); var reactRouterDom = require('react-router-dom'); function buildMediaQuery({ minWidth, maxWidth }, not) { let query = ''; if (minWidth) { query += `(min-width: ${minWidth}px)`; } if (minWidth && maxWidth) { query += ' and '; } if (maxWidth) { query += `(max-width: ${maxWidth}px)`; } if (not) { query = `not all and ${query}`; } return query; } const SIZES = { sm: { maxWidth: 1023 }, md: {}, lg: { minWidth: 1024 }, }; const media = { sm(first, ...interpolations) { const mediaQuery = buildMediaQuery(SIZES.sm); return styled.css ` @media ${mediaQuery} { ${styled.css(first, ...interpolations)}; } `; }, md(first, ...interpolations) { const mediaQuery = buildMediaQuery(SIZES.md); return styled.css ` @media ${mediaQuery} { ${styled.css(first, ...interpolations)}; } `; }, lg(first, ...interpolations) { const mediaQuery = buildMediaQuery(SIZES.lg); return styled.css ` @media ${mediaQuery} { ${styled.css(first, ...interpolations)}; } `; }, }; var index = /*#__PURE__*/Object.freeze({ buildMediaQuery: buildMediaQuery, default: buildMediaQuery, SIZES: SIZES, media: media }); const white = '#FFF'; const black = '#000'; const gray000 = '#f8f8f9'; const gray50 = gray000; const gray100 = '#edeff0'; const gray200 = '#dde0e2'; const gray300 = '#cdd1d4'; const gray400 = '#bdc2c6'; const gray500 = '#a8aeb3'; const gray600 = '#858a8d'; const gray700 = '#616568'; const gray800 = '#3e4042'; const gray900 = '#1b1c1d'; const red000 = '#fff0f0'; const red50 = red000; const red100 = '#ffd9d9'; const red200 = '#ffc9c9'; const red300 = '#f7abb0'; const red400 = '#f28896'; const red500 = '#ed6b85'; const red600 = '#e52c60'; const red700 = '#e0004d'; const red800 = '#c20042'; const red900 = '#a40038'; const redError = '#ff5252'; const orange000 = '#fff9f2'; const orange50 = orange000; const orange100 = '#ffe8cc'; const orange200 = '#ffd8a8'; const orange300 = '#ffc078'; const orange400 = '#ffa94d'; const orange500 = '#ff922b'; const orange600 = '#fd7e14'; const orange700 = '#f76707'; const orange800 = '#e8590c'; const orange900 = '#d9480f'; const blue000 = '#e8fbfc'; const blue100 = '#d0eff5'; const blue200 = '#b0dfeb'; const blue300 = '#96cee0'; const blue400 = '#7abdd3'; const blue500 = '#5faec9'; const blue600 = '#459fbf'; const blue700 = '#2a8fb4'; const blue800 = '#1080aa'; const blue900 = '#0e7196'; const green500 = '#00b79d'; var index$1 = /*#__PURE__*/Object.freeze({ white: white, black: black, gray000: gray000, gray50: gray50, gray100: gray100, gray200: gray200, gray300: gray300, gray400: gray400, gray500: gray500, gray600: gray600, gray700: gray700, gray800: gray800, gray900: gray900, red000: red000, red50: red50, red100: red100, red200: red200, red300: red300, red400: red400, red500: red500, red600: red600, red700: red700, red800: red800, red900: red900, redError: redError, orange000: orange000, orange50: orange50, orange100: orange100, orange200: orange200, orange300: orange300, orange400: orange400, orange500: orange500, orange600: orange600, orange700: orange700, orange800: orange800, orange900: orange900, blue000: blue000, blue100: blue100, blue200: blue200, blue300: blue300, blue400: blue400, blue500: blue500, blue600: blue600, blue700: blue700, blue800: blue800, blue900: blue900, green500: green500 }); class SvgAdd extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" })); } } SvgAdd.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgAddCircleOutline extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" })); } } SvgAddCircleOutline.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgAlert extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M21.872 19.51A1 1 0 0 1 21 21H3a1 1 0 0 1-.872-1.49l9-16a1 1 0 0 1 1.744 0l9 16zM13 15V9h-2v6h2zm0 3v-2h-2v2h2z" })); } } SvgAlert.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgArrow extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("defs", null, React.createElement("path", { id: "arrow_svg__a", d: "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" })), React.createElement("use", { fill: this.props.fillColor, fillRule: "evenodd", xlinkHref: "#arrow_svg__a" })); } } SvgArrow.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgBell extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M17 11a5 5 0 1 0-10 0v6h10v-6zm-6.5-6.839V3.5a1.5 1.5 0 0 1 3 0v.661A7.003 7.003 0 0 1 19 11v5.5l1 .5v2H4v-2l1-.5V11a7.003 7.003 0 0 1 5.5-6.839zM10 20h4a2 2 0 1 1-4 0z" })); } } SvgBell.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgBellOff extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M4.5 19H4v-2l1-.5V11a7.003 7.003 0 0 1 5.5-6.839V3.5a1.5 1.5 0 0 1 3 0v.661a6.993 6.993 0 0 1 3.693 2.146L19.5 4 21 5.5l-2.619 2.619C18.78 8.997 19 9.973 19 11v5.5l1 .5v2H7.5l-3 3L3 20.5 4.5 19zm5-2H17v-6c0-.458-.062-.902-.177-1.323L9.5 17zM7 16.5l8.777-8.777A5 5 0 0 0 7 11v5.5zm3 3.5h4a2 2 0 1 1-4 0z" })); } } SvgBellOff.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgBookmark extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M17 5H7.009l-.007 12.966L12 15.824l5 2.143V5zm0-2c1.1 0 2 .9 2 2v16l-7-3-7 3 .01-16c0-1.1.89-2 1.99-2h10z" })); } } SvgBookmark.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgBright extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M19 7a1 1 0 0 1-2 0V3a1 1 0 0 1 2 0v4zm7.485 3.929a1 1 0 0 1-1.414-1.414L27.9 6.686a1 1 0 0 1 1.415 1.415l-2.829 2.828zM29 19a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2h-4zm-3.929 7.485a1 1 0 0 1 1.414-1.414l2.829 2.828a1 1 0 0 1-1.415 1.415l-2.828-2.829zM17 29a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0v-4zm-7.485-3.929a1 1 0 1 1 1.414 1.414L8.1 29.314a1 1 0 1 1-1.415-1.415l2.829-2.828zM7 17a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2h4zm3.929-7.485a1 1 0 1 1-1.414 1.414L6.686 8.1a1 1 0 0 1 1.415-1.415l2.828 2.829zM18 26a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm0-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" })); } } SvgBright.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgCamera extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M9 3h6l1.83 2H20c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2h3.17L9 3zm6.2 10c0 2.133-1.067 3.2-3.2 3.2S8.8 15.133 8.8 13 9.867 9.8 12 9.8s3.2 1.067 3.2 3.2zM12 18c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5z" })); } } SvgCamera.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgCategory extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M3 5h18v2H3V5zm0 6h18v2H3v-2zm0 6h18v2H3v-2z" })); } } SvgCategory.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgCheck extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M10 18l-6-6 1.5-1.5L10 15l9-9 1.5 1.5z" })); } } SvgCheck.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgCheckCircle extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1.666 14.795l7.5-7.5-1.175-1.184-6.325 6.326-2.992-2.984-1.175 1.175 4.167 4.167z" })); } } SvgCheckCircle.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgCheckCircleOutline extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 18C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1.5-6L17 9.5 15.5 8l-5 5-2-2L7 12.5l3.5 3.5z" })); } } SvgCheckCircleOutline.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgCheckboxIndeterminated extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z" })); } } SvgCheckboxIndeterminated.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgCheckboxOff extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M19 19H5V5h14v14zM5 3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5z" })); } } SvgCheckboxOff.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgCheckboxOn extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zm-8.666 13.684l7.5-7.5L16.659 8l-6.325 6.326-2.992-2.984-1.175 1.175 4.167 4.167z" })); } } SvgCheckboxOn.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgChevron extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M8.5 18.5l6-6.5-6-6.5L10 4l7.5 8-7.5 8z" })); } } SvgChevron.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgChevronDown extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M5.5 8.5l6.5 6 6.5-6L20 10l-8 7.5L4 10z" })); } } SvgChevronDown.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgClock extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z" })); } } SvgClock.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgClose extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("defs", null, React.createElement("path", { id: "close_svg__a", d: "M17.59 5L12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" })), React.createElement("use", { fill: this.props.fillColor, fillRule: "evenodd", xlinkHref: "#close_svg__a" })); } } SvgClose.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgCloseCircle extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" })); } } SvgCloseCircle.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgComment extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M8.948 4h6.104c1.782 0 2.9.278 3.879.801a5.452 5.452 0 0 1 2.268 2.268c.523.978.801 2.097.801 3.879v1.104c0 1.782-.278 2.9-.801 3.879a5.452 5.452 0 0 1-2.268 2.268c-.978.523-2.097.801-3.879.801H14l-2 2-2-2H8.948c-1.782 0-2.9-.278-3.879-.801a5.452 5.452 0 0 1-2.268-2.268C2.278 14.953 2 13.834 2 12.052v-1.104c0-1.782.278-2.9.801-3.879A5.452 5.452 0 0 1 5.07 4.801C6.047 4.278 7.166 4 8.948 4zM8 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm4 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm4 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" })); } } SvgComment.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgCompass extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M10.65 13.35l3.601.901-.9-3.602-2.702 2.702zM12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm4.596-4.132a1 1 0 0 1-1.213.728L9 15 7.404 8.617a1 1 0 0 1 1.213-1.213L15 9l1.596 6.383a1 1 0 0 1 0 .485z" })); } } SvgCompass.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgConfetti extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M25.168 16.555L24 14.803l-1.168 1.752a1 1 0 1 1-1.664-1.11l2-3a1 1 0 0 1 1.664 0L26 14.197l1.168-1.752a1 1 0 1 1 1.664 1.11l-2 3a1 1 0 0 1-1.664 0zM16 9v3a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1h3V4a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1h-3zm12 15a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM25 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm1.707 4.293l10 10a1 1 0 0 1-.356 1.643l-16 6c-.804.302-1.589-.483-1.287-1.287l6-16a1 1 0 0 1 1.643-.356z" })); } } SvgConfetti.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgContents extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M4.889 2H19.11a.9.9 0 0 1 .889.91v18.18a.9.9 0 0 1-.889.91H4.89A.9.9 0 0 1 4 21.09V2.91A.9.9 0 0 1 4.889 2zM6 4v6h12V4H6zm0 8v2h12v-2H6zm0 4v2h10v-2H6z" })); } } SvgContents.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgCoupon extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M16.586 15l-1.293-1.293a1 1 0 0 1 1.414-1.414L18 13.586l3.086-3.086-1.82-1.82a3.002 3.002 0 0 1-3.788-3.788L13.5 2.914 10.414 6l1.293 1.293a1 1 0 1 1-1.414 1.414L9 7.414 2.914 13.5l1.978 1.978a3.002 3.002 0 0 1 3.787 3.787l1.821 1.82L16.586 15zM3.979 17.393L1.5 14.914a2 2 0 0 1 0-2.828L12.086 1.5a2 2 0 0 1 2.828 0l2.48 2.48a1 1 0 0 1 .113 1.278 1 1 0 0 0 1.392 1.392 1 1 0 0 1 1.279.114L22.5 9.086a2 2 0 0 1 0 2.828L11.914 22.5a2 2 0 0 1-2.828 0l-2.322-2.322a1 1 0 0 1-.114-1.28 1 1 0 0 0-1.392-1.391 1 1 0 0 1-1.279-.114zm8.314-6.686a1 1 0 1 1 1.414-1.414l1 1a1 1 0 0 1-1.414 1.414l-1-1z" })); } } SvgCoupon.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgCreditCard extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("g", { fill: this.props.fillColor, fillRule: "evenodd" }, React.createElement("path", { d: "M4 12v6h16v-6H4zm0-4h16V6H4v2zM3 4h18c.667 0 1 .333 1 1v14c0 .667-.333 1-1 1H3c-.667 0-1-.333-1-1V5c0-.667.333-1 1-1z" }), React.createElement("path", { d: "M6 14h4v2H6z" }))); } } SvgCreditCard.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgCrop extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M6 6V3a1 1 0 0 1 2 0v3h9a1 1 0 0 1 1 1v9.002L21 16a1 1 0 0 1 0 2l-14 .008a1 1 0 0 1-1-1V9h2v7.007l8-.004V8H3a1 1 0 0 1 0-2h3zm12 15a1 1 0 0 1-2 0v-2h2v2z" })); } } SvgCrop.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgCrown extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M15.96 11.04L21 6v14H3V6l5.04 5.04L12 4l3.96 7.04z" })); } } SvgCrown.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgDepositPassbook extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M21 13l1.69 6.757A1 1 0 0 1 21.72 21H2.28a1 1 0 0 1-.97-1.243L3 13V4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v9zm-2 0V5H5v8h14zM4.562 15l-1 4h16.876l-1-4H4.562zM7 7h10v2H7V7z" })); } } SvgDepositPassbook.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgDownload extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M19 19v-6h2v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7h2v6h14zm-6-7.827l3.586-3.587L18 9l-6 6.001L6 9l1.414-1.414L11 11.173V3h2v8.173z" })); } } SvgDownload.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgDropDown extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fillRule: "evenodd", d: "M17 10l-5 5-5-5z" })); } } SvgDropDown.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgEarybird extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M3 5.315h2.14c1.557-1.218 3.043-1.59 4.456-1.116 2.12.712 2.603 2.118 2.58 3.801v.896a9.543 9.543 0 0 0 8.058-4.056s3.58 8.057-4.477 11.638C17.601 17.73 19.773 18.088 22 18c-2 1-4 2-7 2C9 20 4 15.577 4 9c0-.667.064-1.257.19-1.77A61.884 61.884 0 0 1 3 5.315z" })); } } SvgEarybird.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgEdit extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M4 21a1 1 0 0 1-1-1v-4a1 1 0 0 1 .293-.707l11-11a3.828 3.828 0 0 1 5.414 5.414l-11 11A1 1 0 0 1 8 21H4zm1-2h2.586l.707-.707-2.586-2.586-.707.707V19z" })); } } SvgEdit.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgEditBody extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M9 4.5v3h5v12h3v-12h5v-3H9zm-6 8h3v7h3v-7h3v-3H3v3z" })); } } SvgEditBody.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgEditBold extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M15.6 11.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 7.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" })); } } SvgEditBold.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgEditBullet extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" })); } } SvgEditBullet.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgEditNumber extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" })); } } SvgEditNumber.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgEditOutline extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M13.5 7.914l-8.5 8.5V19h2.586l8.5-8.5L13.5 7.914zM14.914 6.5L17.5 9.086l.793-.793a1.828 1.828 0 0 0-2.586-2.586l-.793.793zM4 21a1 1 0 0 1-1-1v-4a1 1 0 0 1 .293-.707l11-11a3.828 3.828 0 0 1 5.414 5.414l-11 11A1 1 0 0 1 8 21H4z" })); } } SvgEditOutline.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgEye extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zm2.31 0l.104.165a17.523 17.523 0 0 0 1.92 2.467C7.334 16.765 9.572 18 12 18s4.666-1.235 6.666-3.368A17.523 17.523 0 0 0 20.69 12a17.523 17.523 0 0 0-2.025-2.632C16.666 7.235 14.428 6 12 6S7.334 7.235 5.334 9.368A17.523 17.523 0 0 0 3.31 12zM12 8a1 1 0 0 1 0 2 2 2 0 1 0 2 2 1 1 0 0 1 2 0 4 4 0 1 1-4-4z" })); } } SvgEye.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgFullScreen extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M4 10V4h6v2H6v4H4zm0 4h2v2.5L8.5 14l1.5 1.5L7.5 18H10v2H4v-6zm16-4h-2V7.5L15.5 10 14 8.5 16.5 6H14V4h6v6zm0 4v6h-6v-2h4v-4h2z" })); } } SvgFullScreen.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgFullScreenExit extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M10 4v6H4V8h4V4h2zm4 16v-6h6v2h-4v4h-2zm-4 0H8v-2.5L5.5 20 4 18.5 6.5 16H4v-2h6v6zm4-16h2v2.5L18.5 4 20 5.5 17.5 8H20v2h-6V4z" })); } } SvgFullScreenExit.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgGear extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" })); } } SvgGear.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgGift extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M11 10H4v2h7v-2zm2 0v2h7v-2h-7zm-2 4H5v6h6v-6zm2 0v6h6v-6h-6zM5.535 8A4 4 0 0 1 12 3.354 4 4 0 0 1 18.465 8H20c1.219 0 2 .781 2 2v2c0 .843-.374 1.477-1.008 1.788.005.069.008.14.008.212v6c0 1.219-.781 2-2 2H5c-1.219 0-2-.781-2-2v-6c0-.072.003-.143.008-.212C2.374 13.478 2 12.843 2 12v-2c0-1.219.781-2 2-2h1.535zM15 8a2 2 0 1 0-2-2v2h2zm-4-2a2 2 0 1 0-2 2h2V6z" })); } } SvgGift.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgGroove extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M7 8h10V6H7v2zm0 5h10v-2H7v2zm0 5h10v-2H7v2z" })); } } SvgGroove.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgHeart extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M5 16.5c-1.911-1.911-3.5-3.962-3.5-7A5.5 5.5 0 0 1 7 4c2.5 0 4 1.5 5 2.5 1-1 2.5-2.5 5-2.5a5.5 5.5 0 0 1 5.5 5.5c0 3.038-1.589 5.089-3.5 7-1.333 1.333-3.667 2.833-7 4.5-3.333-1.667-5.667-3.167-7-4.5z" })); } } SvgHeart.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgHeartOutline extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M17.586 15.086c2.07-2.07 2.914-3.572 2.914-5.586A3.5 3.5 0 0 0 17 6c-1.074 0-1.92.392-2.829 1.19a14.88 14.88 0 0 0-.757.724L12 9.328l-1.414-1.414a14.88 14.88 0 0 0-.757-.724C8.919 6.392 8.074 6 7 6a3.5 3.5 0 0 0-3.5 3.5c0 2.014.844 3.516 2.914 5.586 1.038 1.037 2.91 2.277 5.586 3.67 2.677-1.393 4.548-2.633 5.586-3.67zM5 16.5c-1.911-1.911-3.5-3.962-3.5-7A5.5 5.5 0 0 1 7 4c2.5 0 4 1.5 5 2.5 1-1 2.5-2.5 5-2.5a5.5 5.5 0 0 1 5.5 5.5c0 3.038-1.589 5.089-3.5 7-1.333 1.333-3.667 2.833-7 4.5-3.333-1.667-5.667-3.167-7-4.5z" })); } } SvgHeartOutline.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgHelp extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" })); } } SvgHelp.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgHome extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M5.957 9.71A1 1 0 0 1 6 10v9h3v-4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4h3v-9a1 1 0 0 1 .043-.29l-2.207-1.963L12 4.338 5.957 9.709zM4 11.45l-.336.297a1 1 0 1 1-1.328-1.494l9-8a1 1 0 0 1 1.328 0l4.5 4 4.5 4a1 1 0 0 1-1.328 1.494L20 11.45V20a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-4h-2v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8.55z" })); } } SvgHome.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgInfo extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M19.071 19.071C17.118 21.024 14.761 22 12 22s-5.118-.976-7.071-2.929C2.976 17.118 2 14.761 2 12s.976-5.118 2.929-7.071C6.882 2.976 9.239 2 12 2s5.118.976 7.071 2.929C21.024 6.882 22 9.239 22 12s-.976 5.118-2.929 7.071zM11 11v6h2v-6h-2zm0-4v2h2V7h-2z" })); } } SvgInfo.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgLeaf extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: "#D7CAA4", d: "M7.22 20.985a3.63 3.63 0 0 1-.053-.005 18.575 18.575 0 0 1-2.443 1.467.5.5 0 1 1-.447-.894c.578-.29 1.14-.611 1.688-.966C5.21 20.121 4.722 19.258 4.5 18c-.347-1.97-.014-3.636 1-5 1.653.697 2.653 2.03 3 4 .096.543.14 1.037.132 1.483a21.532 21.532 0 0 0 2.08-2.279c-.92-.231-1.639-.865-2.157-1.9-.666-1.333-.666-3.333 0-6 2 .8 3.334 2.119 4 3.957.093.255.166.5.22.737.384-.785.677-1.568.88-2.35C12.218 9.912 11.5 8.696 11.5 7c0-2 1-4 3-6 2 2 3 4 3 6 0 1.964-.964 3.285-2.893 3.963-.172.647-.4 1.293-.685 1.938a5.71 5.71 0 0 1 .563-.322c1.333-.666 3.333-.666 6 0-.735 2.816-2.068 4.483-4 5-1.786.479-3.297.029-4.532-1.35a23.568 23.568 0 0 1-1.872 2.222c.105-.005.213-.007.323-.007 1.768 0 3.32.38 4.652 1.141-.908 1.981-2.362 2.971-4.362 2.971-1.786 0-2.944-.523-3.474-1.571z" })); } } SvgLeaf.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgLeesonTime extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M17 4h2.005C20.107 4 21 4.89 21 6v13c0 1.105-.893 2-1.995 2H4.995A1.994 1.994 0 0 1 3 19V6c0-1.105.893-2 1.995-2H7V2h3v2h4V2h3v2zm2 15V8H5v11h14zm-6-6h4.09v4.09H13V13z" })); } } SvgLeesonTime.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgLike extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M4 11.495c0-.55.443-.995.999-.995h1.002c.552 0 .999.456.999.995v8.01c0 .55-.443.995-.999.995H4.999c-.552 0-.999-.456-.999-.995v-8.01zM14 9.5h5.604a2 2 0 0 1 1.967 2.358l-1.422 7.82a1 1 0 0 1-.984.822H10a1 1 0 0 1-1-1v-9L12 3c1.5 0 2.5 1 2.5 2.5 0 1-.167 2.333-.5 4z" })); } } SvgLike.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgLikeOutline extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M4 11.495c0-.55.443-.995.999-.995h1.002c.552 0 .999.456.999.995v8.01c0 .55-.443.995-.999.995H4.999c-.552 0-.999-.456-.999-.995v-8.01zM19.64 8.5a2 2 0 0 1 1.972 2.329l-1.473 8.835a1 1 0 0 1-.986.836H10a1 1 0 0 1-1-1v-9L12 3h1.405a3 3 0 0 1 3 3c0 .112-.135.945-.405 2.5h3.64zM11 10.885V18.5h7.306l1.333-8h-6.035l.785-4.321A1 1 0 0 0 13.405 5h-.05L11 10.885z" })); } } SvgLikeOutline.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgLink extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M5 19h14v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h6v2H5v14zm16-9h-2V6.5L13.5 12 12 10.5 17.5 5H14V3h7v7z" })); } } SvgLink.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgLocation extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("g", { fill: "none", fillRule: "evenodd" }, React.createElement("path", { fill: this.props.fillColor, d: "M12.549 19.512a24.131 24.131 0 0 0 2.475-2.262c2.185-2.306 3.476-4.674 3.476-6.917 0-1.805-.628-3.318-1.905-4.594C15.32 4.463 13.805 3.836 12 3.836c-1.805 0-3.319.627-4.595 1.903C6.128 7.015 5.5 8.529 5.5 10.333c0 2.243 1.291 4.61 3.476 6.917A24.131 24.131 0 0 0 12 19.936c.172-.129.356-.27.549-.424zm7.951-9.179c0 2.862-1.521 5.65-4.024 8.292a26.108 26.108 0 0 1-3.568 3.126c-.164.119-.285.202-.353.248l-.555.37-.555-.37a12.457 12.457 0 0 1-.353-.248 26.108 26.108 0 0 1-3.568-3.126C5.021 15.983 3.5 13.195 3.5 10.333c0-2.336.839-4.357 2.49-6.009C7.644 2.674 9.665 1.836 12 1.836s4.357.837 6.01 2.488c1.651 1.652 2.49 3.673 2.49 6.009z" }), React.createElement("path", { fill: "#000", d: "M13.75 10.333c0-1.252-.498-1.75-1.75-1.75s-1.75.498-1.75 1.75c0 1.253.498 1.75 1.75 1.75s1.75-.497 1.75-1.75zm1.5 0c0 2.081-1.17 3.25-3.25 3.25s-3.25-1.169-3.25-3.25c0-2.08 1.17-3.25 3.25-3.25s3.25 1.17 3.25 3.25z" }))); } } SvgLocation.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgLock extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M6 10V7a6 6 0 1 1 12 0v3h1c.667 0 1 .333 1 1v10c0 .667-.333 1-1 1H5c-.667 0-1-.333-1-1V11c0-.667.333-1 1-1h1zm2 0h8V7a4 4 0 1 0-8 0v3zm3 6.732V18a1 1 0 0 0 2 0v-1.268a2 2 0 1 0-2 0z" })); } } SvgLock.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgLockOutline extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M11 16.732a2 2 0 1 1 2 0V18a1 1 0 0 1-2 0v-1.268zM6 10V7a6 6 0 1 1 12 0v3h1c.667 0 1 .333 1 1v10c0 .667-.333 1-1 1H5c-.667 0-1-.333-1-1V11c0-.667.333-1 1-1h1zm2 0h8V7a4 4 0 1 0-8 0v3zm-2 2v8h12v-8H6z" })); } } SvgLockOutline.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgLockOutlineOff extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M11 16.732a2 2 0 1 1 2 0V18a1 1 0 0 1-2 0v-1.268zM8 10h11c.667 0 1 .333 1 1v10c0 .667-.333 1-1 1H5c-.667 0-1-.333-1-1V11c0-.667.333-1 1-1h1V7a6 6 0 1 1 12 0 1 1 0 0 1-2 0 4 4 0 1 0-8 0v3zm-2 2v8h12v-8H6z" })); } } SvgLockOutlineOff.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgLogout extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M5 19h5v-3h2v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v4h-2V5H5v14zm12.173-8l-3.587-3.586L15 6l6.001 6L15 18l-1.414-1.414L17.173 13H9v-2h8.173z" })); } } SvgLogout.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgMenu extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M3 8h18V6H3v2zm0 5h18v-2H3v2zm0 5h18v-2H3v2z" })); } } SvgMenu.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgMessage extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M20 4c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2l.01-12c0-1.1.89-2 1.99-2h16zM6.555 7.168a1 1 0 0 0-1.11 1.664l6 4a1 1 0 0 0 1.11 0l6-4a1 1 0 1 0-1.11-1.664L12 10.798l-5.445-3.63z" })); } } SvgMessage.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgMessageOutline extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 2v12h16V6H4zm3.514 2.143L12 10.833l4.486-2.69a1 1 0 1 1 1.028 1.714l-5 3a1 1 0 0 1-1.028 0l-5-3a1 1 0 1 1 1.028-1.714z" })); } } SvgMessageOutline.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgMinus extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M4 11h16v2H4z" })); } } SvgMinus.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgMinusCircle extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" })); } } SvgMinusCircle.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgMoreHorizontal extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M16 12c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2zm-2 0c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-6 0c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2z" })); } } SvgMoreHorizontal.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgMoreVertical extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" })); } } SvgMoreVertical.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgPaper extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z" })); } } SvgPaper.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgPaper2 extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" })); } } SvgPaper2.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgPerson extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M12 12c2.762 0 5-2.238 5-5s-2.238-5-5-5-5 2.238-5 5 2.238 5 5 5zm-7 7.5V22h14v-2.5c0-2.992-2.622-5.5-7-5.5s-7 2.508-7 5.5z" })); } } SvgPerson.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgPersonOutline extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M18 21v-2c0-2.347-1.495-6-6-6s-6 3.653-6 6v2H4v-2c0-2.826 1.607-6.544 5.505-7.666A4.997 4.997 0 0 1 7 7c0-2.762 2.238-5 5-5 2.763 0 5 2.238 5 5a4.997 4.997 0 0 1-2.505 4.334C18.393 12.456 20 16.174 20 19v2h-2zm-6-11c1.658 0 3-1.342 3-3s-1.342-3-3-3-3 1.342-3 3 1.342 3 3 3z" })); } } SvgPersonOutline.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgPhone extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M4.338 11.411a4.572 4.572 0 0 1-.021-6.441L5.92 3.346a1.15 1.15 0 0 1 1.608-.017l3.06 2.969c.458.443.464 1.175.014 1.628l-2.704 2.703 5.547 5.404 2.654-2.6a1.141 1.141 0 0 1 1.607.01l2.959 2.959c.446.445.446 1.165.003 1.613l-1.619 1.628a4.57 4.57 0 0 1-6.47.009l-8.241-8.24z" })); } } SvgPhone.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgPhoto extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm4.5 10.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" })); } } SvgPhoto.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgPhotoAdd extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M21 14h-2V5H5v13h10v2H4c-.552 0-1-.423-1-.944V3.944C3 3.423 3.448 3 4 3h16c.552 0 1 .423 1 .944V14zM9 12.5l2 2.01L14.5 10l2.5 3v3H6l3-3.5zM19 18v-2h2v2h2v2h-2v2h-2v-2h-2v-2h2z" })); } } SvgPhotoAdd.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgPlay extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M5 19.29V4.71a1 1 0 0 1 1.49-.872l12.96 7.29a1 1 0 0 1 0 1.744l-12.96 7.29A1 1 0 0 1 5 19.29z" })); } } SvgPlay.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgPlayFast extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M11 14.667l-6.445 4.297A1 1 0 0 1 3 18.13V5.87a1 1 0 0 1 1.555-.833L11 9.333V5.87a1 1 0 0 1 1.555-.833l9.197 6.132a1 1 0 0 1 0 1.664l-9.197 6.132A1 1 0 0 1 11 18.13v-3.464z" })); } } SvgPlayFast.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgPlayForward extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M18.553 4.447L21 2v6h-6l2.135-2.135a8 8 0 1 0 1.735 10.236l1.71 1.038A9.995 9.995 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2c2.507 0 4.798.922 6.553 2.447zM11.96 16c-1.697 0-2.854-1.022-2.902-2.416h1.508c.092.648.665 1.08 1.405 1.08.838 0 1.416-.561 1.416-1.41 0-.86-.583-1.432-1.41-1.432-.606 0-1.065.264-1.335.702H9.18L9.571 8h4.902v1.357h-3.638l-.173 2.005h.097c.33-.476.882-.762 1.655-.762 1.48 0 2.53 1.086 2.53 2.616 0 1.654-1.195 2.784-2.985 2.784z" })); } } SvgPlayForward.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgPlayOutline extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M17.42 12L7.5 6.42v11.16L17.42 12zM5.5 19.29V4.71a1 1 0 0 1 1.49-.872l12.96 7.29a1 1 0 0 1 0 1.744l-12.96 7.29a1 1 0 0 1-1.49-.872z" })); } } SvgPlayOutline.defaultProps = { fillColor: '#3E4042', size: 24 }; class SvgPlayPrevious extends React.PureComponent { render() { return React.createElement("svg", { width: this.props.size, height: this.props.size, viewBox: "0 0 24 24" }, React.createElement("path", { fill: this.props.fillColor, fillRule: "evenodd", d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.995 9.995 0 0 1-8.58-4.861L5.13 16.1A8 8 0 1