@muvehealth/fixins
Version:
Component library for Muvehealth
1,080 lines (953 loc) • 49.6 kB
Flow
// @flow
import React from 'react'
import styled from 'react-emotion'
import { borderRadius, color, left, position, space, top, zIndex } from 'styled-system'
import { shouldForwardPropFunc } from '../../utils'
const propOmits = [
'bg',
'borderRadius',
'color',
'left',
'position',
'top',
'zIndex',
'mr',
]
const shouldForwardProp = shouldForwardPropFunc(propOmits)
const Svg = styled('svg', { shouldForwardProp })(
borderRadius,
color,
left,
position,
top,
space,
zIndex,
)
type Props = {
width?: number,
height?: number,
}
const BeatsIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 26 20" height={height} width={width} {...props}>
<desc>
Beats Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<polyline points="1 11.3196571 4.94302857 11.3196571 6.14285714 8.16554286 8.71428571 15.4 11.8 1 14.3714286 19 16.9428571 6.65714286 19 14.3714286 20.5428571 11.2857143 24.6571429 11.2857143" />
</g>
</Svg>
)
BeatsIcon.defaultProps = {
width: 24,
height: 20,
}
// -------------------------------------
const BedIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 24 20" height={height} width={width} {...props}>
<desc>
Bed Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<path d="M12.1723984,3.7930996 L12.1723984,8.55157303 C19.0002234,8.55157303 23.3447968,11.2411417 23.3447968,11.2411417 L23.3447968,19 L23.3447968,16.2069004 L1,16.2069004 L1,19 L1,11.2411417 C1,11.2411417 5.34457332,8.55157303 12.1723984,8.55157303 L12.1723984,3.79287615 L3.48287933,3.7930996 L20.8619174,3.7930996 L14.478009,3.7930996 L12.1723984,3.7930996 Z M20.8640217,1 L20.8640217,3.7930996 L20.8640217,9.75171207 L20.8640217,1 Z M3.48287933,1 L3.48287933,3.7930996 L3.48287933,9.75171207 L3.48287933,1 Z" />
</g>
</Svg>
)
BedIcon.defaultProps = {
width: 24,
height: 20,
}
// -------------------------------------
const CalendarIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 26 26" height={height} width={width} {...props}>
<desc>
Calendar Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd">
<path d="M1,4 L25,4 L25,25 L1,25 L1,4 Z M1,10.5 L25,10.5 L1,10.5 Z M20,0.4 L20,4 L20,0.4 Z M15.25,0.4 L15.25,4 L15.25,0.4 Z M10.5,0.4 L10.5,4 L10.5,0.4 Z M5.5,0.4 L5.5,4 L5.5,0.4 Z" strokeLinecap="square" fillRule="nonzero" />
<polyline strokeLinecap="round" strokeLinejoin="round" points="16.9993844 14 12.5452307 19.6399999 10 17.1333333" />
</g>
</Svg>
)
CalendarIcon.defaultProps = {
width: 26,
height: 26,
}
// -------------------------------------
const ChartIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 29 36" height={height} width={width} {...props}>
<desc>
Chart Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<g transform="translate(-289.000000, -275.000000)">
<g transform="translate(290.000000, 276.000000)">
<polyline points="19.276725 2.26666667 25.4998841 2.26666667 25.4998841 34 -0.000115909091 34 -0.000115909091 2.26666667 6.220725 2.26666667" />
<path d="M18.5454545,0 L18.5454545,2.26666667 C18.5454545,3.51333333 17.5022727,4.53333333 16.2272727,4.53333333 L9.27272727,4.53333333 C7.99772727,4.53333333 6.95454545,3.51333333 6.95454545,2.26666667 L6.95454545,0" />
<path d="M6.95454545,0 L18.5454545,0" />
</g>
</g>
</g>
</Svg>
)
ChartIcon.defaultProps = {
width: 29,
height: 36,
}
// -------------------------------------
const ChartCompleteIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 29 36" height={height} width={width} {...props}>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<g transform="translate(-484.000000, -275.000000)">
<g transform="translate(485.000000, 276.000000)">
<path d="M13.3901523,28.5133193 L23.7361553,18.2104516" />
<path d="M26.4053936,20.8697245 L16.0593906,31.1706943" />
<path d="M23.8120298,18.1368122 C24.5488513,17.4004186 25.7441607,17.4004186 26.4819354,18.1368122 C27.2187568,18.86941 27.2187568,20.0622537 26.4819354,20.7948515" />
<polyline points="16.0598672 31.1702198 11.7838243 32.7692188 13.3899617 28.5121805" />
<path d="M22.3794697,19.6751726 L25.0455624,22.329416" />
<polyline points="7.55555556 34 0 34 0 1.88888889 5.84675061 1.88888889" />
<polyline points="18.8888889 1.88888889 25.5 1.88888889 25.5 12.2777778" />
<path d="M17.9444444,0 L17.9444444,2.36111111 C17.9444444,3.65972222 16.9244444,4.72222222 15.6777778,4.72222222 L8.87777778,4.72222222 C7.63111111,4.72222222 6.61111111,3.65972222 6.61111111,2.36111111 L6.61111111,0" />
<path d="M6.61111111,0 L17.9444444,0" />
</g>
</g>
</g>
</Svg>
)
ChartCompleteIcon.defaultProps = {
width: 29,
height: 36,
}
// -------------------------------------
const ChartInProgressIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 28 36" height={height} width={width} {...props}>
<g stroke="currentColor" fill="none" fillRule="evenodd">
<g transform="translate(-387.000000, -275.000000)">
<g transform="translate(388.000000, 276.000000)">
<g strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
<path d="M18.3323965,1.88888889 L25.5,1.88888889 L25.5,20.8115079 M11.8055556,34 L0,34 L0,1.88888889 L6.22084091,1.88888889" />
<path d="M17.9444444,0 L17.9444444,2.36111111 C17.9444444,3.65972222 16.9244444,4.72222222 15.6777778,4.72222222 L8.87777778,4.72222222 C7.63111111,4.72222222 6.61111111,3.65972222 6.61111111,2.36111111 L6.61111111,0" />
<path d="M6.61111111,0 L17.9444444,0" />
</g>
<g transform="translate(15.000000, 25.000000)" strokeWidth="2">
<path d="M6.61111111,9.44444444 C9.21912243,9.44444444 11.3333333,7.33023354 11.3333333,4.72222222 C11.3333333,2.1142109 9.21912243,0 6.61111111,0" />
<path d="M0,9.44444444 C2.60801132,9.44444444 4.72222222,7.33023354 4.72222222,4.72222222 C4.72222222,2.1142109 2.60801132,0 0,0" strokeOpacity="0.5" transform="translate(2.361111, 4.722222) rotate(-180.000000) translate(-2.361111, -4.722222) " />
</g>
</g>
</g>
</g>
</Svg>
)
ChartInProgressIcon.defaultProps = {
width: 28,
height: 36,
}
// -------------------------------------
const ClipboardIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 15 20" height={height} width={width} {...props}>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<g transform="translate(1.000000, 1.000000)">
<path d="M3.6,1.2 L3.6,2.84217094e-14 L9.6,7.49299612e-14 L9.6,1.2 L9.65454545,1.2 L13.19988,1.2 L13.19988,18 L-0.00012,18 L-0.00012,1.2 L3.51818182,1.20000027 L3.6,1.20000027 L3.6,1.2 Z M9.6,1.2 C9.6,1.86 9.06,2.4 8.4,2.4 L4.8,2.4 C4.14000012,2.4 3.60000019,1.86000019 3.6,1.2" />
<path d="M10.2,7.79064 L7.8,7.79064" />
<polyline points="6 6.59064 4.2174 8.39064 3 7.22724" />
<path d="M10.2,13.2 L7.8,13.2" />
<polyline points="6 12 4.2174 13.8 3 12.6366" />
</g>
</g>
</Svg>
)
ClipboardIcon.defaultProps = {
width: 15,
height: 20,
}
// -------------------------------------
const CircleBangIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 20 20" height={height} width={width} {...props}>
<desc>
Circle and an Exclaimation Point Icon
</desc>
<g stroke="currentColor" strokeWidth="2" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round" transform="translate(-624.000000, -552.000000)">
<g transform="translate(603.000000, 537.000000)">
<g transform="translate(22.000000, 16.000000)">
<path d="M18,9 C18,4.02926087 13.9699565,0 9,0 C4.02886957,0 0,4.02926087 0,9 C0,13.9707391 4.02886957,18 9,18 C13.9699565,18 18,13.9707391 18,9 Z" />
<path d="M9,9 L9,4.84615385" />
<path d="M9,12.4615385 L9,11.5194186" />
</g>
</g>
</g>
</Svg>
)
CircleBangIcon.defaultProps = {
width: 24,
height: 24,
}
// -------------------------------------
const CircleCheckIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 36 36" height={height} width={width} {...props}>
<desc>
Circle and a Check Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<g transform="translate(-285.000000, -363.000000)">
<g transform="translate(286.000000, 364.000000)">
<path d="M29.2374734,5.01654255 C35.9276862,11.7060106 35.9276862,22.5500532 29.2374734,29.2395213 C22.5494947,35.9282447 11.7039628,35.9282447 5.01598404,29.2395213 C-1.67199468,22.5500532 -1.67199468,11.7060106 5.01598404,5.01654255 C11.7039628,-1.67218085 22.5494947,-1.67218085 29.2374734,5.01654255 Z" />
<polyline points="23.7446581 12.6388889 16.6773504 21.5877525 12.6388889 17.6104798" />
</g>
</g>
</g>
</Svg>
)
CircleCheckIcon.defaultProps = {
width: 24,
height: 24,
}
// -------------------------------------
const CirclePlusIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 37 36" height={height} width={width} {...props}>
<desc>
Circle and a Plus Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<g transform="translate(-379.000000, -186.000000)">
<g transform="translate(380.000000, 187.000000)">
<path d="M29.8732291,4.98704755 C36.7089236,11.6372532 36.7089236,22.417649 29.8732291,29.0678547 C23.0398173,35.71732 11.9584443,35.71732 5.12503245,29.0678547 C-1.70837942,22.417649 -1.70837942,11.6372532 5.12503245,4.98704755 C11.9584443,-1.66241782 23.0398173,-1.66241782 29.8732291,4.98704755 Z" />
<g transform="translate(10.208333, 9.932432)">
<path d="M0,7.09459459 L14.5833333,7.09459459" />
<path d="M7.29166667,0 L7.29166667,14.1891892" />
</g>
</g>
</g>
</g>
</Svg>
)
CirclePlusIcon.defaultProps = {
width: 37,
height: 36,
}
// -------------------------------------
type CircleXProps = {
height?: number,
width?: number,
noBorder?: boolean
}
const CircleXIcon = ({ height, width, noBorder, ...props }: CircleXProps) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 20 20" height={height} width={width} {...props}>
<desc>
Circle X
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<g transform="translate(1.000000, 1.000000)">
{ noBorder === false && <path d="M18,9 C18,13.9704 13.9698,18 9,18 C4.029,18 0,13.9704 0,9 C0,4.029 4.029,0 9,0 C13.9698,0 18,4.029 18,9 Z" /> }
<path d="M11.9996,6 L6,12" />
<path d="M12,12 L6,6" />
</g>
</g>
</Svg>
)
CircleXIcon.defaultProps = {
width: 20,
height: 20,
noBorder: false,
}
// -------------------------------------
export const DataCalendar = (currentColor: string = '#000') => (`<svg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g stroke='${currentColor}' stroke-width='1' fill='${currentColor}' fill-rule='evenodd'><g transform='translate(-117.000000, -582.000000)'><path d='M130.79986,582 L130.79986,584.4 L128.39978,584.4 L128.39978,582 L127.20034,582 L127.20034,584.4 L124.79966,584.4 L124.79966,582 L123.59962,582 L123.59962,584.4 L121.20014,584.4 L121.20014,582 L119.9995,582 L119.9995,584.4 L117,584.4 L117,600 L135,600 L135,584.4 L132.0005,584.4 L132.0005,582 L130.79986,582 Z M118.20004,589.2 L133.80056,589.2 L133.80056,585.6 L118.20004,585.6 L118.20004,589.2 Z M118.20004,598.7994 L133.80056,598.7994 L133.80056,590.4 L118.20004,590.4 L118.20004,598.7994 Z'></path></g></g></svg>`)
// -------------------------------------
export const DataCheckmark = (currentColor: string = '#000') => (`<svg width='14px' height='12px' viewBox='0 0 14 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g stroke='${currentColor}' stroke-width='3' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(-1619.000000, -1145.000000)'><polyline points='1631.15385 1146.81818 1624.69231 1155 1621 1151.36364'></polyline></g></g></svg>`)
// -------------------------------------
export const DataDownArrow = (currentColor: string = '#000') => (`<svg width='14px' height='8px' viewBox='0 0 14 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g stroke='${currentColor}' stroke-width='2' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(-143.000000, -39.000000)'><polyline points='156 40 150 46 144 40'></polyline></g></g></svg>`)
// -------------------------------------
type DownArrowProps = {
height?: number,
width?: number,
isOpen?: boolean
}
const DownArrowIcon = ({ height, width, isOpen, ...props }: DownArrowProps) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 40 20" height={height} width={width} {...props}>
<g
stroke="currentColor"
strokeWidth="1.25"
fill="none"
fillRule="evenodd"
strokeLinecap="round"
strokeLinejoin="round"
transform={isOpen === true ? 'rotate(180)' : null}
>
<g transform="translate(-183.000000, -285.000000)">
<polyline points="221.5 286.222222 202.75 304 184 286.222222" />
</g>
</g>
</Svg>
)
DownArrowIcon.defaultProps = {
width: 40,
height: 20,
isOpen: false,
}
// -------------------------------------
const EllipsesIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 26 26" height={height} width={width} {...props}>
<desc>
Ellipses Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<g transform="translate(1.000000, 1.000000)">
<path d="M24,12 C24,18.6272 18.6264,24 12,24 C5.372,24 0,18.6272 0,12 C0,5.372 5.372,0 12,0 C18.6264,0 24,5.372 24,12 Z" />
<path d="M7,12 C7,12.553 6.553,13 6,13 C5.447,13 5,12.553 5,12 C5,11.447 5.447,11 6,11 C6.553,11 7,11.447 7,12 Z" fill="currentColor" />
<path d="M13,12 C13,12.553 12.553,13 12,13 C11.447,13 11,12.553 11,12 C11,11.447 11.447,11 12,11 C12.553,11 13,11.447 13,12 Z" fill="currentColor" />
<path d="M19,12 C19,12.553 18.553,13 18,13 C17.447,13 17,12.553 17,12 C17,11.447 17.447,11 18,11 C18.553,11 19,11.447 19,12 Z" fill="currentColor" />
</g>
</g>
</Svg>
)
EllipsesIcon.defaultProps = {
width: 24,
height: 24,
}
// -------------------------------------
const FaceHappyIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 38 38" height={height} width={width} {...props}>
<desc>
Face Happy Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<path d="M37,19 C37,9.058 28.942,1 19,1 C9.0604,1 1,9.058 1,19 C1,28.942 9.0604,37 19,37 C28.942,37 37,28.942 37,19 Z" />
<path d="M14.5,15.625 C14.5,16.247125 13.997125,16.75 13.375,16.75 C12.752875,16.75 12.25,16.247125 12.25,15.625 C12.25,15.002875 12.752875,14.5 13.375,14.5 C13.997125,14.5 14.5,15.002875 14.5,15.625 Z" />
<path d="M25.75,15.625 C25.75,16.247125 25.247125,16.75 24.625,16.75 C24.002875,16.75 23.5,16.247125 23.5,15.625 C23.5,15.002875 24.002875,14.5 24.625,14.5 C25.247125,14.5 25.75,15.002875 25.75,15.625 Z" />
<path d="M11,28.5 C12.4579916,25.85175 15.4182681,24 18.8743848,24 C22.3218889,24 25.2833958,25.86525 26.75,28.5" transform="translate(18.875000, 26.250000) rotate(-180.000000) translate(-18.875000, -26.250000) " />
</g>
</Svg>
)
FaceHappyIcon.defaultProps = {
width: 24,
height: 24,
}
// -------------------------------------
const FaceMehIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 38 38" height={height} width={width} {...props}>
<desc>
Face Meh Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<path d="M37,19 C37,9.058 28.942,1 19,1 C9.0604,1 1,9.058 1,19 C1,28.942 9.0604,37 19,37 C28.942,37 37,28.942 37,19 Z" />
<path d="M14.75,15.125 C14.75,15.747125 14.247125,16.25 13.625,16.25 C13.002875,16.25 12.5,15.747125 12.5,15.125 C12.5,14.502875 13.002875,14 13.625,14 C14.247125,14 14.75,14.502875 14.75,15.125 Z" />
<path d="M25.75,15.125 C25.75,15.747125 25.247125,16.25 24.625,16.25 C24.002875,16.25 23.5,15.747125 23.5,15.125 C23.5,14.502875 24.002875,14 24.625,14 C25.247125,14 25.75,14.502875 25.75,15.125 Z" />
<path d="M12.5,26 L25.75,26" />
</g>
</Svg>
)
FaceMehIcon.defaultProps = {
width: 24,
height: 24,
}
// -------------------------------------
const FaceSadIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 38 38" height={height} width={width} {...props}>
<desc>
Face Sad Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<path d="M37,19 C37,9.058 28.942,1 19,1 C9.0604,1 1,9.058 1,19 C1,28.942 9.0604,37 19,37 C28.942,37 37,28.942 37,19 Z" />
<path d="M14.75,15.125 C14.75,15.747125 14.247125,16.25 13.625,16.25 C13.002875,16.25 12.5,15.747125 12.5,15.125 C12.5,14.502875 13.002875,14 13.625,14 C14.247125,14 14.75,14.502875 14.75,15.125 Z" />
<path d="M25.75,15.125 C25.75,15.747125 25.247125,16.25 24.625,16.25 C24.002875,16.25 23.5,15.747125 23.5,15.125 C23.5,14.502875 24.002875,14 24.625,14 C25.247125,14 25.75,14.502875 25.75,15.125 Z" />
<path d="M11,28.5 C12.4579916,25.85175 15.4182681,24 18.8743848,24 C22.3218889,24 25.2833958,25.86525 26.75,28.5" />
</g>
</Svg>
)
FaceSadIcon.defaultProps = {
width: 24,
height: 24,
}
// -------------------------------------
const FloppyDiskIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 38 38" height={height} width={width} {...props}>
<desc>
Floppy Disk Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round" transform="translate(-142.000000, -682.000000)">
<g transform="translate(143.000000, 683.000000)">
<polygon points="0 7.20015652 0 36.0001565 36 36.0001565 36 0.000156521739 7.2 0.000156521739" />
<polyline points="9.39130435 0 9.39130435 12.5217391 26.6086957 12.5217391 26.6086957 0" />
<path d="M14.0869565,4.69565217 L14.0869565,7.82608696" />
<polyline points="28.9565217 36 28.9565217 21.9130435 7.04347826 21.9130435 7.04347826 36" />
</g>
</g>
</Svg>
)
FloppyDiskIcon.defaultProps = {
width: 36,
height: 36,
}
// -------------------------------------
const FootstepsIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 28 36" height={height} width={width} {...props}>
<desc>
Footsteps Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<g transform="translate(-289.000000, -448.000000)">
<g transform="translate(290.000000, 449.000000)">
<path d="M17.9031769,23.3347575 L24.2913216,24.4117761 C24.2913216,24.4117761 25.3617393,20.1769389 25.7135653,14.7717414 C26.0646443,9.36510783 23.5137189,7.17947801 21.3676549,7.17947801 C19.2186029,7.17947801 16.7819649,8.91994012 16.7819649,14.0465488 C16.7819649,19.1738755 17.9031769,23.3347575 17.9031769,23.3347575 Z" />
<path d="M17.3655031,27.53796 L23.1314162,28.696832 C23.1314162,28.696832 22.4359809,34.5371451 18.6674835,33.9598631 C14.8974921,33.3811451 16.8732455,28.5999004 17.3655031,27.53796 Z" />
<path d="M8.39013983,16.1546333 L1.73590494,17.2323699 C1.73590494,17.2323699 0.620900425,12.9968147 0.254419528,7.59161714 C-0.111283279,2.18570161 2.54589775,7.18012422e-05 4.78135342,7.18012422e-05 C7.01992145,7.18012422e-05 9.55805454,1.7398159 9.55805454,6.8664246 C9.55805454,11.9944693 8.39013983,16.1546333 8.39013983,16.1546333 Z" />
<path d="M8.95013198,20.358482 L2.94404696,21.516636 C2.94404696,21.516636 3.66844975,27.3576671 7.59391923,26.7796671 C11.5209449,26.2009491 9.462894,21.4204224 8.95013198,20.358482 Z" />
</g>
</g>
</g>
</Svg>
)
FootstepsIcon.defaultProps = {
width: 28,
height: 36,
}
// -------------------------------------
const HeartIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 26 23" height={height} width={width} {...props}>
<desc>
Heart Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<g transform="translate(1.000000, 1.000000)">
<path d="M13.7439234,1.7549719 C16.0854843,-0.584990635 19.8799317,-0.584990635 22.2206934,1.7549719 C24.560656,4.09653278 24.560656,7.89098023 22.2206934,10.2317419 M1.75601082,10.2317419 C-0.585550052,7.89098023 -0.585550052,4.09653278 1.75601082,1.7549719 C4.09677253,-0.584990635 7.89121998,-0.584990635 10.2327809,1.7549719 M13.7439234,1.7549719 L11.9881523,3.2270385 L13.7439234,1.7549719 Z M10.2327809,1.7549719 L11.9877528,3.2270385 L10.2327809,1.7549719 Z" />
<path d="M10.3887784,7.99375317 L12.7870801,15.1854618 L10.3888103,7.99384905 L7.99135567,12.7879592 L-0.000319667014,12.7879592 M15.1845827,12.7879592 L23.9754256,12.7879592 L15.1845827,12.7879592 Z M12.7870801,15.1854618 L15.1845827,12.7879592 L12.7870801,15.1854618 Z" />
<path d="M16.7829178,15.9846293 L13.0707846,20.2937407 C12.4754048,20.9402672 11.5004204,20.9402672 10.9050406,20.2937407 L7.19210822,15.9846293" />
</g>
</g>
</Svg>
)
HeartIcon.defaultProps = {
width: 26,
height: 23,
}
// -------------------------------------
const IVIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 12 20" height={height} width={width} {...props}>
<desc>
IV Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<g transform="translate(1.000000, 1.000000)">
<path d="M10.2139275,9 L10.2139275,11.0868014 C10.2139275,13.2798776 8.0872419,15.0589249 5.10696376,15.0589249 C2.12559127,15.0589249 0,13.2798776 0,11.0868014 L3.314293e-05,10.9935993 L0,5.31866825 L10.2139275,5.31866825 L10.2139275,9 Z M3.14625446,1.82391563 C3.14625446,0.818573334 3.96300388,0 4.97017009,0 C5.9773363,0 6.79408572,0.818573334 6.79408572,1.82391563 C6.79408572,2.83217619 5.9773363,3.64856082 4.97017009,3.64856082 L4.97017009,5.3" />
<path d="M0,10.5893702 C2.86901928,8.68556703 7.37226697,12.4767581 10.2139275,10.5893702" />
<path d="M4.71938169,17.6153362 L4.71938169,15.3781213" />
</g>
</g>
</Svg>
)
IVIcon.defaultProps = {
width: 12,
height: 20,
}
// -------------------------------------
const MagGlassIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 28 28" height={height} width={width} {...props}>
<desc>
Search Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<g transform="translate(-40.000000, -119.000000)">
<g transform="translate(19.000000, 104.000000)">
<g transform="translate(23.000000, 17.000000)">
<path d="M17.7401739,8.86956522 C17.7401739,3.97147826 13.7681739,0 8.86956522,0 C3.972,0 0,3.97147826 0,8.86956522 C0,13.7676522 3.972,17.7391304 8.86956522,17.7391304 C13.7681739,17.7391304 17.7401739,13.7676522 17.7401739,8.86956522 Z" />
<path d="M15.2007652,15.1997217 L23.9998957,23.9998957" />
</g>
</g>
</g>
</g>
</Svg>
)
MagGlassIcon.defaultProps = {
width: 28,
height: 28,
}
// -------------------------------------
const MonitorIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 24 20" height={height} width={width} {...props}>
<desc>
Heart Beat Monitor Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<path d="M22.2666667,1 C22.6692667,1 23,1.33 23,1.73333333 L23,14.9333333 C23,15.3366667 22.6692667,15.6666667 22.2666667,15.6666667 L1.73333333,15.6666667 C1.32926667,15.6666667 1,15.3366667 1,14.9333333 L1,1.73333333 C1,1.33 1.32926667,1 1.73333333,1 L22.2666667,1 Z" />
<path d="M17.8666667,19.3333333 L6.13333333,19.3333333" />
<polyline points="1.73333333 9.13325333 7.6 9.13325333 9.3336 11.1337867 11.2666667 3.93318667 12.7333333 12.7331867 14.9333333 9.13325333 22.2666667 9.13325333" />
</g>
</Svg>
)
MonitorIcon.defaultProps = {
width: 24,
height: 20,
}
// -------------------------------------
const MultiPeopleIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 26 26" height={height} width={width} {...props}>
<desc>
Multiple Peopl Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<path d="M15.6086957,3.60869565 C15.6086957,5.04973913 14.4405217,6.21791304 13,6.21791304 C11.5573913,6.21791304 10.3913043,5.04973913 10.3913043,3.60869565 C10.3913043,2.16869565 11.5573913,1 13,1 C14.4405217,1 15.6086957,2.16869565 15.6086957,3.60869565 Z" />
<polyline points="10.3913043 16.6521739 11.4347826 25 14.5652174 25 15.6086957 16.6521739" />
<polyline points="8.30434783 12.0054087 8.30434783 16.6520174 10.3913043 16.6520174" />
<polyline points="17.6956522 12.0054087 17.6956522 16.6520174 15.6086957 16.6520174" />
<path d="M17.6956522,11.9565217 C17.6956522,9.364 15.5925217,7.26086957 13,7.26086957 C10.405913,7.26086957 8.30434783,9.364 8.30434783,11.9565217" />
<path d="M23.4347826,5.17391304 C23.4347826,6.61391304 22.266087,7.7826087 20.8255652,7.7826087 C19.384,7.7826087 18.2173913,6.61391304 18.2173913,5.17391304 C18.2173913,3.7333913 19.384,2.56521739 20.8255652,2.56521739 C22.266087,2.56521739 23.4347826,3.7333913 23.4347826,5.17391304 Z" />
<polyline points="18.7391304 19.7907478 19.2608696 23.4345739 22.3913043 23.4345739 23.4347826 17.1737043" />
<polyline points="25 13.8870609 25 17.1740174 23.4347826 17.1740174" />
<path d="M25,13.8345739 C25,11.0698783 23.5913043,8.82587826 20.826087,8.82587826" />
<path d="M2.56521739,5.17391304 C2.56521739,6.61391304 3.73391304,7.7826087 5.17443478,7.7826087 C6.616,7.7826087 7.7826087,6.61391304 7.7826087,5.17391304 C7.7826087,3.7333913 6.616,2.56521739 5.17443478,2.56521739 C3.73391304,2.56521739 2.56521739,3.7333913 2.56521739,5.17391304 Z" />
<polyline points="2.56521739 17.173913 3.60869565 23.4347826 6.73913043 23.4347826 7.26086957 19.7909565" />
<polyline points="1 13.8870609 1 17.1740174 2.56521739 17.1740174" />
<path d="M1,13.8345739 C1,11.0698783 2.40869565,8.82587826 5.17391304,8.82587826" />
</g>
</Svg>
)
MultiPeopleIcon.defaultProps = {
width: 26,
height: 26,
}
// -------------------------------------
const MuveUIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 39 46" height={height} width={width} {...props}>
<desc>
Muve Healthcare U Icon
</desc>
<g>
<path fill="#18afb6" d="M28.6613,40.7914 C28.6613,40.7914 27.5723,40.9004 26.9543,40.9004 C19.1703,40.9004 12.8363,34.6084 12.8363,26.8744 L12.8363,7.1904 C12.8363,3.6694 9.9633,0.8134 6.4193,0.8134 C2.8723,0.8134 0.0003,3.6694 0.0003,7.1904 L0.0003,26.8744 C0.0003,37.4214 8.6373,46.0004 19.2543,46.0004 C22.9233,46.0004 26.3513,44.9734 29.2713,43.1944 C29.3853,43.1374 29.4843,43.0614 29.5773,42.9694 C29.7333,42.8134 29.8483,42.6324 29.9063,42.4374 C29.9433,42.3164 29.9533,42.1894 29.9533,42.0644 C29.9533,41.7394 29.8293,41.4134 29.5773,41.1644 C29.3263,40.9154 28.9883,40.7914 28.6613,40.7914" />
<path fill="#1fd4db" d="M32.088,1.0015 C28.544,1.0015 25.671,3.8555 25.671,7.3775 L25.671,27.0595 C25.671,30.2825 23.241,32.9605 20.112,33.3825 C19.757,33.3825 19.476,33.5245 19.243,33.7555 C19.012,33.9855 18.867,34.3055 18.867,34.6565 C18.867,35.0095 19.012,35.3285 19.243,35.5585 C21.283,37.4015 23.983,38.5365 26.954,38.5365 C33.323,38.5365 38.507,33.3895 38.507,27.0635 L38.507,27.0595 L38.507,7.3775 C38.507,3.8555 35.635,1.0015 32.088,1.0015" />
</g>
</Svg>
)
MuveUIcon.defaultProps = {
width: 29,
height: 36,
}
// -------------------------------------
const NavigatorIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 23 20" height={height} width={width} {...props}>
<desc>
Navigator Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<path d="M11.3816336,13.4589294 L17.6128288,16.922012 L17.6128288,16.9233964 L17.6128288,18.3077988 C17.6128288,18.6892017 17.3020305,19 16.9206276,19 L1.6922012,19 C1.31218274,19 1,18.6892017 1,18.3077988 L1,16.9233964 L7.2311952,13.4596216 M7.2311952,13.4596908 C5.15043839,11.7444162 5.1532072,8.70911398 5.1532072,8.70911398 L5.155976,5.5471389 C5.45431472,3.75226119 7.48661744,2.38516382 9.3064144,2.38516382 L9.3064144,2.38447162 C11.1275958,2.38447162 13.1585141,3.75087679 13.457545,5.5457545 L13.4596216,8.70842178 C13.4596216,8.70842178 13.4623904,11.7444162 11.3816336,13.4589986 L7.2311952,13.4596908 Z M21.766036,6.5271217 L19.9987138,6.5271217 L16.2284264,6.5271217 L21.766036,6.5271217 Z M21.766036,3.7792927 L19.9987138,3.7792927 L16.2284264,3.7792927 L21.766036,3.7792927 Z M21.766036,1 L19.9987138,1 L16.2284264,1 L21.766036,1 Z" />
</g>
</Svg>
)
NavigatorIcon.defaultProps = {
width: 23,
height: 20,
}
// -------------------------------------
const NoteIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 37 38" height={height} width={width} {...props}>
<desc>
Note Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round" transform="translate(-372.000000, -188.000000)">
<g transform="translate(373.000000, 189.000000)">
<g transform="translate(29.571429, 0.000000)">
<path d="M0.244162733,30.3230348 L0.244162733,2.48329565" />
<g>
<path d="M5.14285714,2.57142857 L5.14285714,30.8571429" />
<polyline points="0.244162733 30.3230348 2.59198882 36.0000783 4.93746708 30.3230348" />
<path d="M0.244162733,2.35009565 C0.244162733,1.05253043 1.2944236,0.00226956522 2.59198882,0.00226956522 C3.8864236,0.00226956522 4.93746708,1.05253043 4.93746708,2.35009565" />
<path d="M0.244162733,7.04347826 L4.93981491,7.04347826" />
</g>
</g>
<path d="M23.1428571,12.0385286 L23.1428571,32.3502429 C23.1428571,32.9468143 22.6607143,33.4289571 22.0641429,33.4289571 L1.07871429,33.4289571 C0.482142857,33.4289571 0,32.9468143 0,32.3502429 L0,3.65052857 C0,3.05395714 0.482142857,2.57181429 1.07871429,2.57181429 L13.6761429,2.57181429" />
<polygon points="23.1454286 11.5714286 14.1454286 11.5714286 14.1454286 2.57142857" />
</g>
</g>
</Svg>
)
NoteIcon.defaultProps = {
width: 35,
height: 36,
}
// -------------------------------------
const PencilIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 36 36" height={height} width={width} {...props}>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<g transform="translate(-76.000000, -363.000000)">
<g transform="translate(77.000000, 364.000000)">
<path d="M3.40788182,25.7840545 L28.0609727,1.13405455" />
<path d="M32.8665636,5.94366364 L8.21656364,30.5921182" />
<polyline points="3.40788182 25.7840545 0.000154545455 33.9996909 8.21579091 30.5919636" />
<path d="M28.1969727,0.995581818 C29.5245182,-0.331963636 31.6773364,-0.331963636 33.0048818,0.995581818 C34.3339727,2.32467273 34.3308818,4.47903636 33.0048818,5.80503636" />
<path d="M25.7942545,3.40061818 L30.5990727,8.21007273" />
</g>
</g>
</g>
</Svg>
)
PencilIcon.defaultProps = {
width: 36,
height: 36,
}
// -------------------------------------
const PhoneIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 38 38" height={height} width={width} {...props}>
<desc>
Phone Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round" transform="translate(-255.000000, -583.000000)">
<g transform="translate(256.000000, 584.000000)">
<path d="M13.3123359,9 L10.4743744,11.5197902 C9.17458121,12.8230593 10.8541353,18.4213786 15.342281,22.9076844 C19.8311097,27.3987715 25.428485,29.0845514 26.7146178,27.8010909 L29.25,24.9165494 L24.9039232,21.1693092 L21.4266519,22.9076844 L15.342281,16.8230298 L17.0805751,13.3449133 L13.3123359,9 Z" />
<path d="M34.4347826,25.0434783 C35.4764348,22.7645217 36,20.6686957 36,18 C36,8.05852174 27.9422609,0 18,0 C8.05930435,0 0,8.05852174 0,18 C0,27.9406957 8.05930435,36 18,36 C21.5671304,36 24.8932174,34.9614783 27.6902609,33.1716522 C27.6902609,33.1716522 31.5931304,31.1094783 27.5212174,26.9131304" />
</g>
</g>
</Svg>
)
PhoneIcon.defaultProps = {
width: 36,
height: 36,
}
// -------------------------------------
const PlusIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 36 36" height={height} width={width} {...props}>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<g transform="translate(-603.000000, -680.000000)">
<g transform="translate(603.000000, 680.000000)">
<path d="M1.2012,18.00048 L34.8012,18.00048" />
<path d="M18.0012,1.20048 L18.0012,34.80048" />
</g>
</g>
</g>
</Svg>
)
PlusIcon.defaultProps = {
width: 36,
height: 36,
}
// -------------------------------------
const PlusSmallIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 12 12" height={height} width={width} {...props}>
<g stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
<path d="M1,6 L11,6" />
<path d="M6,1 L6,11" />
</g>
</Svg>
)
PlusSmallIcon.defaultProps = {
width: 12,
height: 12,
}
// -------------------------------------
//
const LineIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 13 13" height={height} width={width} {...props}>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<path d="M1,6.385 L11.77,6.385" />
</g>
</Svg>
)
LineIcon.defaultProps = {
width: 13,
height: 13,
}
// -------------------------------------
const RolodexIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 26 25" height={height} width={width} {...props}>
<desc>
Rolodex Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round" transform="translate(-80.000000, -195.000000)">
<g transform="translate(80.000000, 195.000000)">
<g transform="translate(1.000000, 1.000000)">
<path d="M24,20.8 C24,21.68 23.28,22.4 22.4,22.4 L1.6,22.4 C0.72,22.4 0,21.68 0,20.8 L0,8 C0,7.12 0.72,6.4 1.6,6.4 L22.4,6.4 C23.28,6.4 24,7.12 24,8 L24,20.8 Z" />
<path d="M1.5,3 L22.5,3" />
<path d="M3.2,0 L20.8,0" />
<path d="M18.4,14.4 C17.0744,14.4 16,13.3256 16,12 C16,10.6744 17.0744,9.6 18.4,9.6 C19.7256,9.6 20.8,10.6744 20.8,12 C20.8,13.3256 19.7256,14.4 18.4,14.4 Z" />
<path d="M3.2,11.2 L8,11.2" />
<path d="M3.2,14.4 L11.2,14.4" />
<path d="M3.2,17.6 L11.2,17.6" />
</g>
</g>
</g>
</Svg>
)
RolodexIcon.defaultProps = {
width: 37,
height: 36,
}
// -------------------------------------
const ScalpelIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 20 20" height={height} width={width} {...props}>
<desc>
Scalpel Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<g transform="translate(1.000000, 1.000000)">
<path d="M13.5202952,1.88916029 L15.9553335,4.323811" />
<path d="M14.8563301,0.510377512 C15.5364976,-0.170177512 16.6379426,-0.170177512 17.31811,0.510377512 C17.9982775,1.19054498 17.9971148,2.29198995 17.31811,2.97215742 L6.25250239,13.953277 L3.87559809,11.5759852 L14.8563301,0.510377512 Z M0,18 L5.06269378,12.7656388 L7.19145064,14.9635787 L4.13924893,18 L0,18 Z" />
</g>
</g>
</Svg>
)
ScalpelIcon.defaultProps = {
width: 20,
height: 20,
}
// -------------------------------------
const StopwatchIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 34 38" height={height} width={width} {...props}>
<desc>
Stopwatch Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round" transform="translate(-257.000000, -386.000000)">
<g transform="translate(258.000000, 387.000000)">
<path d="M18,20.3478261 C18,21.6453913 16.9497391,22.6956522 15.6521739,22.6956522 C14.3546087,22.6956522 13.3043478,21.6453913 13.3043478,20.3478261 C13.3043478,19.0502609 14.3546087,18 15.6521739,18 C16.9497391,18 18,19.0502609 18,20.3478261 Z" />
<path d="M15.6521739,4.69565217 L15.6521739,0" />
<path d="M11.7391304,0 L19.5652174,0" />
<path d="M31.3043478,20.3478261 C31.3043478,28.9925217 24.2968696,36 15.6521739,36 C7.00747826,36 0,28.9925217 0,20.3478261 C0,11.7031304 7.00747826,4.69565217 15.6521739,4.69565217 C24.2968696,4.69565217 31.3043478,11.7031304 31.3043478,20.3478261 Z" />
<polyline points="26.6086957 8.60869565 28.9565217 6.26086957 29.7391304 7.04347826 27.3913043 9.39130435" />
<path d="M8.60869565,13.3043478 L14.0869565,18.7826087" />
</g>
</g>
</Svg>
)
StopwatchIcon.defaultProps = {
width: 32,
height: 36,
}
// -------------------------------------
const TrashCanIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 21 26" height={height} width={width} {...props}>
<desc>
Trash Can Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round" transform="translate(1.000000, 1.000000)">
<path d="M18,4 L15.6952,23.2056 C15.6432,23.6424 15.24,24 14.8,24 L5.2,24 C4.76,24 4.3568,23.6424 4.3048,23.2056 L2,4" />
<path d="M0,4 L19.2,4" />
<path d="M7,4 L7,1.6 C7,0.72 7.72,0 8.6,0 L11.8,0 C12.68,0 13.4,0.72 13.4,1.6 L13.4,4" />
<path d="M7.60000038,10 L8.10000038,18" />
<path d="M11.8999996,10 L12.3999996,18" transform="translate(12.150000, 14.000000) scale(-1, 1) translate(-12.150000, -14.000000) " />
</g>
</Svg>
)
TrashCanIcon.defaultProps = {
width: 21,
height: 26,
}
// -------------------------------------
const XIcon = ({ height, width, ...props }: Props) => (
// $FlowFixMe: Don't want to limit styled-system props
<Svg viewBox="0 0 38 38" height={height} width={width} {...props}>
<desc>
X Icon
</desc>
<g stroke="currentColor" strokeWidth="1.25" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<g transform="translate(-601.000000, -287.000000)">
<g transform="translate(602.000000, 288.000000)">
<path d="M35.9976,0 L0,36" />
<path d="M36,36 L0,0" />
</g>
</g>
</g>
</Svg>
)
XIcon.defaultProps = {
width: 34,
height: 34,
}
// -------------------------------------
const PlusToggleIcon = ({ width, height, ...styles }: { width?: number, height?: number }) => (
// $FlowFixMe: Don't want to limit styled-system props
<ToggleContainer width={width} height={height} {...styles}>
<LineIcon id="horizontal" width={width} height={height} />
<LineIcon id="vertical" width={width} height={height} />
</ToggleContainer>
)
PlusToggleIcon.defaultProps = {
width: 13,
height: 13,
}
// -------------------------------------
// TODO: refactor so it functions on it's own and is not dependednt on details[open]
const ToggleContainer = styled('div')({
'& > svg': {
position: 'absolute',
zIndex: 2,
},
'& > svg#vertical': {
transition: 'all 0.5s ease-in-out',
transform: 'rotate(-90deg)',
opacity: 1,
},
'& > svg#horizontal': {
transition: 'all 0.5s ease-in-out',
transform: 'rotate(-180deg)',
},
'.isOpen > svg#vertical': {
transition: 'all 0.5s ease-in-out',
transform: 'rotate(90deg)',
opacity: 0,
},
'.isOpen > svg#horizontal': {
transition: 'all 0.5s ease-in-out',
transform: 'rotate(180deg)',
},
}, ({ color: iconColor, height, width }) => ({
width,
height,
color: iconColor || '#18AFB6',
}), space)
type IconProps = {
type: string | null,
height?: number,
width?: number,
}
const Icons = ({ type, height, width, ...props }: IconProps) => {
switch (type) {
case 'Beats':
// $FlowFixMe: Don't want to limit styled-system props
return <BeatsIcon height={height} width={width} {...props} />
case 'Bed':
// $FlowFixMe: Don't want to limit styled-system props
return <BedIcon height={height} width={width} {...props} />
case 'Calendar':
// $FlowFixMe: Don't want to limit styled-system props
return <CalendarIcon height={height} width={width} {...props} />
case 'Chart':
// $FlowFixMe: Don't want to limit styled-system props
return <ChartIcon height={height} width={width} {...props} />
case 'ChartComplete':
// $FlowFixMe: Don't want to limit styled-system props
return <ChartCompleteIcon height={height} width={width} {...props} />
case 'ChartInProgress':
// $FlowFixMe: Don't want to limit styled-system props
return <ChartInProgressIcon height={height} width={width} {...props} />
case 'Clipboard':
// $FlowFixMe: Don't want to limit styled-system props
return <ClipboardIcon height={height} width={width} {...props} />
case 'CircleBang':
// $FlowFixMe: Don't want to limit styled-system props
return <CircleBangIcon height={height} width={width} {...props} />
case 'CircleCheck':
// $FlowFixMe: Don't want to limit styled-system props
return <CircleCheckIcon height={height} width={width} {...props} />
case 'CirclePlus':
// $FlowFixMe: Don't want to limit styled-system props
return <CirclePlusIcon height={height} width={width} {...props} />
case 'CircleX':
// $FlowFixMe: Don't want to limit styled-system props
return <CircleXIcon height={height} width={width} {...props} />
case 'DownArrow':
// $FlowFixMe: Don't want to limit styled-system props
return <DownArrowIcon height={height} width={width} {...props} />
case 'Ellipses':
// $FlowFixMe: Don't want to limit styled-system props
return <EllipsesIcon height={height} width={width} {...props} />
case 'FaceHappy':
// $FlowFixMe: Don't want to limit styled-system props
return <FaceHappyIcon height={height} width={width} {...props} />
case 'FaceMeh':
// $FlowFixMe: Don't want to limit styled-system props
return <FaceMehIcon height={height} width={width} {...props} />
case 'FaceSad':
// $FlowFixMe: Don't want to limit styled-system props
return <FaceSadIcon height={height} width={width} {...props} />
case 'FloppyDisk':
// $FlowFixMe: Don't want to limit styled-system props
return <FloppyDiskIcon height={height} width={width} {...props} />
case 'Footsteps':
// $FlowFixMe: Don't want to limit styled-system props
return <FootstepsIcon height={height} width={width} {...props} />
case 'Heart':
// $FlowFixMe: Don't want to limit styled-system props
return <HeartIcon height={height} width={width} {...props} />
case 'IV':
// $FlowFixMe: Don't want to limit styled-system props
return <IVIcon height={height} width={width} {...props} />
case 'Line':
// $FlowFixMe: Don't want to limit styled-system props
return <LineIcon height={height} width={width} {...props} />
case 'MagGlass':
// $FlowFixMe: Don't want to limit styled-system props
return <MagGlassIcon height={height} width={width} {...props} />
case 'Monitor':
// $FlowFixMe: Don't want to limit styled-system props
return <MonitorIcon height={height} width={width} {...props} />
case 'MultiPeople':
// $FlowFixMe: Don't want to limit styled-system props
return <MultiPeopleIcon height={height} width={width} {...props} />
case 'MuveU':
// $FlowFixMe: Don't want to limit styled-system props
return <MuveUIcon height={height} width={width} {...props} />
case 'Navigator':
// $FlowFixMe: Don't want to limit styled-system props
return <NavigatorIcon height={height} width={width} {...props} />
case 'Note':
// $FlowFixMe: Don't want to limit styled-system props
return <NoteIcon height={height} width={width} {...props} />
case 'Pencil':
// $FlowFixMe: Don't want to limit styled-system props
return <PencilIcon height={height} width={width} {...props} />
case 'Phone':
// $FlowFixMe: Don't want to limit styled-system props
return <PhoneIcon height={height} width={width} {...props} />
case 'Plus':
// $FlowFixMe: Don't want to limit styled-system props
return <PlusIcon height={height} width={width} {...props} />
case 'PlusSmall':
// $FlowFixMe: Don't want to limit styled-system props
return <PlusSmallIcon height={height} width={width} {...props} />
case 'PlusToggle':
// $FlowFixMe: Don't want to limit styled-system props
return <PlusToggleIcon height={height} width={width} {...props} />
case 'Rolodex':
// $FlowFixMe: Don't want to limit styled-system props
return <RolodexIcon height={height} width={width} {...props} />
case 'Scalpel':
// $FlowFixMe: Don't want to limit styled-system props
return <ScalpelIcon height={height} width={width} {...props} />
case 'Stopwatch':
// $FlowFixMe: Don't want to limit styled-system props
return <StopwatchIcon height={height} width={width} {...props} />
case 'TrashCan':
// $FlowFixMe: Don't want to limit styled-system props
return <TrashCanIcon height={height} width={width} {...props} />
case 'X':
// $FlowFixMe: Don't want to limit styled-system props
return <XIcon height={height} width={width} {...props} />
default:
return null
}
}
Icons.defaultProps = {
type: null,
height: undefined,
width: undefined,
}
export default Icons