@graphcommerce/next-ui 3.0.1

package/Theme/types.ts

@@ -0,0 +1,63 @@
+export {}
+
+declare module '@material-ui/core/styles/createPalette' {
+  // interface PaletteOptions {
+  //   tertiary: PaletteColorOptions
+  // }
+  // interface Palette {
+  //   tertiary: PaletteColor & ColorPartial
+  // }
+
+  interface SimplePaletteColorOptions {
+    mutedText: string
+  }
+  interface PaletteColor {
+    mutedText: string
+  }
+  interface TypeBackground {
+    highlight: string
+  }
+}
+
+declare module '@material-ui/core/styles/createTheme' {
+  interface Theme {
+    spacings: {
+      xxs: string
+      xs: string
+      sm: string
+      md: string
+      lg: string
+      xl: string
+      xxl: string
+    }
+    page: {
+      horizontal: string
+      vertical: string
+      headerInnerHeight: {
+        xs: string
+        sm: string
+        md: string
+      }
+    }
+  }
+  interface ThemeOptions {
+    spacings: {
+      xxs: string
+      xs: string
+      sm: string
+      md: string
+      lg: string
+      xl: string
+      xxl: string
+    }
+    page: {
+      horizontal: string | number
+      vertical: string | number
+      headerInnerHeight: {
+        xs: string
+        sm: string
+        md: string
+      }
+    }
+  }
+}

package/TimeAgo/index.tsx

@@ -0,0 +1,29 @@
+export type TimeAgoProps = {
+  date: Date
+  locale?: string
+}
+
+export default function TimeAgo(props: TimeAgoProps) {
+  const { date, locale = 'en' } = props
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 24
+
+  const timestamp = date.getTime()
+  const elapsed = Date.now() - timestamp
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
+
+  if (elapsed < msPerMinute) {
+    return <span>{rtf.format(-Math.floor(elapsed / 1000), 'seconds')}</span>
+  }
+
+  if (elapsed < msPerHour) {
+    return <span>{rtf.format(-Math.floor(elapsed / msPerMinute), 'minutes')}</span>
+  }
+
+  if (elapsed < msPerDay) {
+    return <span>{rtf.format(-Math.floor(elapsed / msPerHour), 'hours')}</span>
+  }
+
+  return <span>{rtf.format(-Math.round(elapsed / msPerDay), 'days')}</span>
+}

package/Title/index.tsx

@@ -0,0 +1,71 @@
+import { makeStyles, Theme, Typography, TypographyProps } from '@material-ui/core'
+import clsx from 'clsx'
+import React from 'react'
+import { UseStyles } from '../Styles'
+import SvgImage, { SvgImageProps } from '../SvgImage'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    container: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 6,
+      flexFlow: 'unset',
+      [theme.breakpoints.up('md')]: {
+        flexFlow: 'column',
+      },
+    },
+    typography: {},
+    icon: {
+      [theme.breakpoints.down('sm')]: {
+        width: 48,
+        height: 48,
+      },
+    },
+    small: {
+      flexFlow: 'unset',
+    },
+  }),
+  {
+    name: 'Title',
+  },
+)
+
+export type TitleProps = {
+  children: React.ReactNode
+  icon?: SvgImageProps['src']
+  size?: 'small' | 'medium'
+  variant?: TypographyProps['variant']
+  component?: React.ElementType
+} & UseStyles<typeof useStyles>
+
+const Title = React.forwardRef<HTMLDivElement, TitleProps>((props, ref) => {
+  const { children, icon, size = 'medium', component, variant } = props
+  const classes = useStyles(props)
+  const small = size === 'small'
+
+  return (
+    <div className={clsx(classes.container, small && classes.small)}>
+      {icon && (
+        <SvgImage
+          src={icon}
+          size={small ? 30 : 56}
+          mobileSize={small ? 20 : 56}
+          loading='eager'
+          classes={{ root: small ? undefined : classes.icon }}
+        />
+      )}
+      <Typography
+        ref={ref}
+        variant={variant || (small ? 'h6' : 'h3')}
+        component={component ?? 'h1'}
+        className={small ? undefined : classes.typography}
+      >
+        {children}
+      </Typography>
+    </div>
+  )
+})
+
+export default Title

package/ToggleButton/index.tsx

@@ -0,0 +1,100 @@
+// @inheritedComponent ButtonBase
+
+import { capitalize, makeStyles, Theme } from '@material-ui/core'
+import clsx from 'clsx'
+import React, { FormEvent } from 'react'
+import Button, { ButtonProps } from '../Button'
+import { UseStyles } from '../Styles'
+
+type StyleProps = { selected?: boolean; color?: ButtonProps['color'] }
+
+export const useStyles = makeStyles(
+  (theme: Theme) => ({
+    /* Styles applied to the root element. */
+    root: {
+      border: '2px solid transparent',
+      backgroundColor: theme.palette.background.default,
+      borderRadius: 4,
+      // boxShadow: theme.shadows['1'],
+      boxShadow: `0px 0px 2px ${theme.palette.grey[400]}`,
+      '&$disabled': {
+        borderWidth: 2,
+      },
+      '&:hover': {},
+      '&$selected': {},
+    },
+    disabled: {},
+    selected: ({ color = 'default' }: StyleProps) => ({
+      border: `2px solid ${theme.palette[color]?.main ?? theme.palette.primary.main}`,
+      boxShadow: `unset`,
+    }),
+    /* Styles applied to the `label` wrapper element. */
+    label: {},
+    sizeSmall: {},
+    sizeLarge: {
+      padding: `${theme.spacings.xxs} ${theme.spacings.xs}`,
+    },
+  }),
+  { name: 'ToggleButton' },
+)
+
+export type ToggleButtonProps = Omit<ButtonProps, 'onClick' | 'onChange'> & {
+  selected?: boolean
+  onClick?: (e: FormEvent<HTMLButtonElement>, v: any) => void
+  onChange?: (e: FormEvent<HTMLButtonElement>, v: any) => void
+} & UseStyles<typeof useStyles>
+
+const ToggleButton = React.forwardRef<any, ToggleButtonProps>((props, ref) => {
+  const { root, selected: selectedClass, sizeLarge, sizeSmall, ...classes } = useStyles(props)
+  const {
+    children,
+    className,
+    disabled = false,
+    onChange,
+    onClick,
+    selected,
+    size = 'medium',
+    value,
+    color,
+    ...other
+  } = props
+
+  const handleChange = (event: FormEvent<HTMLButtonElement>) => onChange?.(event, value)
+
+  const handleClick = (event: FormEvent<HTMLButtonElement>) => {
+    if (onClick) {
+      onClick(event, value)
+      if (event.isDefaultPrevented()) return
+    }
+    handleChange(event)
+  }
+
+  return (
+    <Button
+      className={clsx(
+        root,
+        {
+          [classes.disabled]: disabled,
+          [selectedClass]: selected,
+          [sizeLarge]: size === 'large',
+          [sizeSmall]: size === 'small',
+        },
+        className,
+      )}
+      variant='outlined'
+      disabled={disabled}
+      ref={ref}
+      onClick={handleClick}
+      onChange={handleChange}
+      value={value}
+      aria-pressed={selected}
+      size={size}
+      {...other}
+      classes={classes}
+    >
+      {children}
+    </Button>
+  )
+})
+
+export default ToggleButton

package/ToggleButtonGroup/index.tsx

@@ -0,0 +1,112 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { capitalize } from '@material-ui/core/utils'
+import { ToggleButtonGroupProps } from '@material-ui/lab'
+import clsx from 'clsx'
+import React, { PropsWithoutRef } from 'react'
+import { isFragment } from 'react-is'
+import { UseStyles } from '../Styles'
+
+function isValueSelected(value: string, candidate: string | string[]) {
+  if (candidate === undefined || value === undefined) return false
+  if (Array.isArray(candidate)) return candidate.indexOf(value) >= 0
+  return value === candidate
+}
+
+export type ToggleButtonPropsBase = Omit<PropsWithoutRef<ToggleButtonGroupProps>, 'size'> & {
+  required?: boolean
+  minWidth?: number
+}
+
+export const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: ({ minWidth = 200 }: ToggleButtonPropsBase) => ({
+      display: 'grid',
+      gridTemplateColumns: `repeat(auto-fit, minmax(${minWidth}px, 1fr))`,
+      gap: `calc(${theme.spacings.xxs} * 2)`,
+    }),
+    vertical: {
+      gridAutoFlow: 'column',
+    },
+    grouped: {},
+    groupedHorizontal: {},
+    groupedVertical: {},
+  }),
+  { name: 'ToggleButtonGroup' },
+)
+
+export type ToggleButtonProps = ToggleButtonPropsBase & UseStyles<typeof useStyles>
+
+const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonProps>((props, ref) => {
+  const classes = useStyles(props)
+  const {
+    children,
+    className,
+    exclusive = false,
+    required = false,
+    onChange,
+    orientation = 'horizontal',
+    minWidth,
+    value,
+    ...other
+  } = props
+
+  const handleChange = (event, buttonValue) => {
+    if (!onChange) return
+
+    const index = value && value.indexOf(buttonValue)
+    let newValue: string[]
+
+    if (value && index >= 0) {
+      newValue = value.slice()
+      newValue.splice(index, 1)
+    } else {
+      newValue = value ? [...value, buttonValue] : [buttonValue]
+    }
+    onChange(event, newValue)
+  }
+
+  const handleExclusiveChange = (event, buttonValue) => {
+    if (!onChange || value === buttonValue) return
+    if (required) onChange(event, buttonValue)
+    else onChange(event, value === buttonValue ? null : buttonValue)
+  }
+
+  return (
+    <div
+      role='group'
+      className={clsx(classes.root, { [classes.vertical]: orientation === 'vertical' }, className)}
+      ref={ref}
+      {...other}
+    >
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return null
+
+        if (process.env.NODE_ENV !== 'production') {
+          if (isFragment(child)) {
+            console.error(
+              [
+                "@graphcommerce/next-ui: The ToggleButtonGroup component doesn't accept a Fragment as a child.",
+                'Consider providing an array instead.',
+              ].join('\n'),
+            )
+          }
+        }
+
+        return React.cloneElement(child, {
+          className: clsx(
+            classes.grouped,
+            classes[`grouped${capitalize(orientation)}`],
+            child.props.className,
+          ),
+          onChange: exclusive ? handleExclusiveChange : handleChange,
+          selected:
+            child.props.selected === undefined
+              ? isValueSelected(child.props.value, value)
+              : child.props.selected,
+        })
+      })}
+    </div>
+  )
+})
+
+export default ToggleButtonGroup

package/UspList/UspListItem.tsx

@@ -0,0 +1,46 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import clsx from 'clsx'
+import React from 'react'
+import { UseStyles } from '../Styles'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      display: 'grid',
+      gridAutoFlow: 'column',
+      maxWidth: 'max-content',
+      alignItems: 'center',
+      gridTemplateColumns: '30px 1fr',
+    },
+    gap: {
+      gap: theme.spacings.xs,
+    },
+    smallText: {
+      '& > p': {
+        marginLeft: 5,
+      },
+    },
+    normalText: {
+      ...theme.typography.body1,
+    },
+  }),
+  { name: 'UspListItem' },
+)
+
+export type UspListItemProps = UseStyles<typeof useStyles> & {
+  text: React.ReactNode
+  icon?: React.ReactNode
+  size?: string
+}
+
+export default function UspListItem(props: UspListItemProps) {
+  const { text, icon, size = 'normal' } = props
+  const classes = useStyles()
+
+  return (
+    <li className={clsx(classes.root, size === 'normal' && classes.gap)}>
+      <div>{icon}</div>
+      <div className={classes?.[`${size}Text`]}>{text}</div>
+    </li>
+  )
+}

package/UspList/index.tsx

@@ -0,0 +1,32 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import clsx from 'clsx'
+import React from 'react'
+import { UseStyles } from '../Styles'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      listStyleType: 'none',
+      padding: 0,
+      margin: 0,
+      display: 'grid',
+      alignContent: 'start',
+    },
+    gap: {
+      gap: theme.spacings.xs,
+    },
+  }),
+  { name: 'UspList' },
+)
+
+export type UspListProps = UseStyles<typeof useStyles> & {
+  children: React.ReactNode
+  size?: string
+}
+
+export default function UspList(props: UspListProps) {
+  const { children, size } = props
+  const classes = useStyles()
+
+  return <ul className={clsx(classes.root, size !== 'small' && classes.gap)}>{children}</ul>
+}

package/icons/icon_addresses.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.000000 0 0 0 0 0.000000 0 0 0 0 0.000000 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g filter="url(#filter-1)" id="home-2">
+            <g transform="translate(4.500000, 4.500000)">
+                <polyline id="Path" stroke="#000000" stroke-width="1.5" points="2.55555556 11.5 1.77635684e-15 11.5 11.5 0 23 11.5 20.4444444 11.5"></polyline>
+                <path d="M2.55555556,11.5 L2.55555556,20.4444444 C2.55555556,21.8558388 3.69971675,23 5.11111111,23 L17.8888889,23 C19.3002832,23 20.4444444,21.8558388 20.4444444,20.4444444 L20.4444444,11.5" id="Path" stroke="#000000" stroke-width="1.5"></path>
+                <rect id="Rectangle" stroke="#000000" stroke-width="1.5" x="8.94444444" y="11.5" width="5.11111111" height="5.11111111"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

package/icons/icon_arrow_back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>

package/icons/icon_arrow_forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>

package/icons/icon_box.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M6.28009357,10.906 L11.9990936,14.123 L24.9690936,6.828 L19.2500936,3.61 L6.28009357,10.906 Z M13.5290936,14.984 L19.2500936,18.202 L32.2190936,10.906 L26.4990936,7.688 L13.5290936,14.984 Z M5.50009357,26.781 L18.5000936,34.093 L18.5000936,19.501 L5.50009357,12.188 L5.50009357,26.781 Z M20.0000936,19.501 L20.0000936,34.093 L33.0000936,26.781 L33.0000936,12.188 L20.0000936,19.501 Z M19.2500936,36.125 L19.2480936,36.125 L19.2470936,36.125 L19.2450936,36.125 L19.2440936,36.125 L19.2430936,36.125 C19.1070936,36.124 18.9800936,36.087 18.8710936,36.022 L4.38309357,27.873 C4.14609357,27.74 4,27.49 4,27.219 L4,10.92 C3.99809357,10.79 4.02809357,10.659 4.09609357,10.538 C4.16809357,10.41 4.27209357,10.311 4.39209357,10.247 L18.8820936,2.096 C19.1100936,1.968 19.3890936,1.968 19.6180936,2.096 L26.8350936,6.156 C26.8570936,6.167 26.8800936,6.179 26.9010936,6.193 L34.1060936,10.246 C34.2270936,10.311 34.3320936,10.41 34.4030936,10.538 C34.4710936,10.659 34.5020936,10.79 34.5001844,10.92 L34.5001844,27.219 C34.5001844,27.49 34.3530936,27.74 34.1170936,27.873 L19.6290936,36.022 C19.5190936,36.087 19.3920936,36.124 19.2570936,36.125 L19.2560936,36.125 L19.2550936,36.125 L19.2530936,36.125 L19.2520936,36.125 L19.2500936,36.125 Z" id="Fill-4" fill="#000000"></path>
+    </g>
+</svg>

package/icons/icon_chat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z"/></svg>

package/icons/icon_checkmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>

package/icons/icon_checkmark_green.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#01D26A"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>

package/icons/icon_chevron_back.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="chevron-right" transform="translate(3, 9)" stroke="#000000" stroke-width="1.6">
+            <polyline id="Path-2-Copy" points="7 0 0 7 7 14"></polyline>
+        </g>
+    </g>
+</svg>

package/icons/icon_chevron_down.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(16, 16) scale(-1, 1) translate(-16, -16) translate(13, 19) rotate(-90)" stroke="#000000" stroke-width="1.6">
+            <polyline points="7 0 0 7 7 14"></polyline>
+        </g>
+    </g>
+</svg>

package/icons/icon_chevron_left.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="chevron-right" transform="translate(11.000000, 9.000000)" stroke="#000000" stroke-width="1.6">
+            <polyline id="Path-2-Copy" points="7 0 0 7 7 14"></polyline>
+        </g>
+    </g>
+</svg>

package/icons/icon_chevron_right.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="chevron-right" transform="translate(16.500000, 16.000000) scale(-1, 1) translate(-16.500000, -16.000000) translate(13.000000, 9.000000)" stroke="#000000" stroke-width="1.6">
+            <polyline id="Path-2-Copy" points="7 0 0 7 7 14"></polyline>
+        </g>
+    </g>
+</svg>

package/icons/icon_chevron_up.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(16, 16) scale(-1, 1) translate(-3, -23) translate(13, 19) rotate(90)" stroke="#000000" stroke-width="1.6">
+            <polyline points="7 0 0 7 7 14"></polyline>
+        </g>
+    </g>
+</svg>

package/icons/icon_close.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M4,4 L16,16 M4,16 L16,4" id="Combined-Shape" stroke="#000000" stroke-width="1.5"></path>
+    </g>
+</svg>

package/icons/icon_close_circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path 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"/></svg>

package/icons/icon_collapse_vertical.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="arrow-bar-right" transform="translate(16.000000, 16.000000) scale(-1, 1) translate(-16.000000, -16.000000) translate(8.000000, 8.000000)" stroke="#000000" stroke-width="1.5">
+            <line x1="16" y1="8" x2="6" y2="8" id="Path"></line>
+            <line x1="16" y1="8" x2="12" y2="12" id="Path"></line>
+            <line x1="16" y1="8" x2="12" y2="4" id="Path"></line>
+            <line x1="1" y1="0" x2="1" y2="16" id="Path"></line>
+        </g>
+    </g>
+</svg>

package/icons/icon_customer_service.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M20.868,15.6119 L20.868,15.6009 C20.868,15.1869 20.532,14.8559 20.118,14.8559 C19.704,14.8559 19.368,15.1979 19.368,15.6119 C19.368,16.0259 19.704,16.3619 20.118,16.3619 C20.532,16.3619 20.868,16.0259 20.868,15.6119 M12.026,15.6119 L12.026,15.6009 C12.026,15.1869 11.69,14.8559 11.276,14.8559 C10.862,14.8559 10.526,15.1979 10.526,15.6119 C10.526,16.0259 10.862,16.3619 11.276,16.3619 C11.69,16.3619 12.026,16.0259 12.026,15.6119 M16.447,15.6119 L16.447,15.6009 C16.447,15.1869 16.111,14.8559 15.697,14.8559 C15.283,14.8559 14.947,15.1979 14.947,15.6119 C14.947,16.0259 15.283,16.3619 15.697,16.3619 C16.111,16.3619 16.447,16.0259 16.447,15.6119 M10.945,22.5879 C11.057,22.5879 11.169,22.6129 11.272,22.6629 C15.326,24.6329 20.437,23.6269 23.157,20.3269 C25.825,17.0909 25.376,12.5509 22.113,9.7679 C18.783,6.9289 13.551,6.7179 9.941,9.2789 C6.401,11.7899 5.484,16.2749 7.807,19.7129 C7.938,19.9059 7.972,20.1479 7.898,20.3699 L6.876,23.4359 L10.788,22.6039 C10.84,22.5929 10.892,22.5879 10.945,22.5879 M5.75,25.1929 C5.539,25.1929 5.334,25.1039 5.191,24.9429 C5.012,24.7419 4.953,24.4619 5.038,24.2059 L6.361,20.2369 C3.829,16.1529 4.958,10.9739 9.073,8.0549 C13.226,5.1099 19.25,5.3559 23.087,8.6269 C26.989,11.9559 27.517,17.3959 24.315,21.2809 C21.22,25.0339 15.474,26.2329 10.854,24.1239 L5.906,25.1759 C5.854,25.1869 5.802,25.1929 5.75,25.1929" id="Fill-1" fill="#020203"></path>
+    </g>
+</svg>

package/icons/icon_email.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>

package/icons/icon_email_outline.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M29.75,9 C30.715,9 31.5,9.785 31.5,10.75 L31.5,27.417 C31.5,28.382 30.715,29.167 29.75,29.167 L7.75,29.167 C6.785,29.167 6,28.382 6,27.417 L6,10.75 C6,9.785 6.785,9 7.75,9 L29.75,9 Z M30,13.817 L19.166,21.041 C19.04,21.125 18.896,21.167 18.75,21.167 C18.604,21.167 18.46,21.125 18.334,21.041 L7.5,13.817 L7.5,27.417 C7.5,27.555 7.612,27.667 7.75,27.667 L29.75,27.667 C29.888,27.667 30,27.555 30,27.417 L30,13.817 Z M29.75,10.5 L7.75,10.5 C7.612,10.5 7.5,10.612 7.5,10.75 L7.5,12.015 L18.75,19.516 L30,12.015 L30,10.75 C30,10.612 29.888,10.5 29.75,10.5 Z" id="Combined-Shape" fill="#000000"></path>
+    </g>
+</svg>

package/icons/icon_expand_vertical.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="arrow-bar-right" transform="translate(8.000000, 8.000000)" stroke="#000000" stroke-width="1.5">
+            <line x1="16" y1="8" x2="6" y2="8" id="Path"></line>
+            <line x1="16" y1="8" x2="12" y2="12" id="Path"></line>
+            <line x1="16" y1="8" x2="12" y2="4" id="Path"></line>
+            <line x1="1" y1="0" x2="1" y2="16" id="Path"></line>
+        </g>
+    </g>
+</svg>

package/icons/icon_heart.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.000000 0 0 0 0 0.000000 0 0 0 0 0.000000 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g filter="url(#filter-1)" id="heart">
+            <g transform="translate(6.000000, 7.000000)">
+                <path d="M1.55555556,10.1333333 C-0.561535985,7.85976111 -0.418515836,4.31534872 1.875,2.21666667 C4.16851584,0.117984617 7.74401957,0.259761113 9.86111111,2.53333333 C10.0565865,2.66280511 10.2748145,3.09327507 10.5,3.09186372 C10.7203289,3.0904828 10.9476292,2.66001284 11.1388889,2.53333333 C13.2559804,0.259761168 16.8314841,0.117984701 19.1249999,2.21666673 C21.4185158,4.31534876 21.5615359,7.85976111 19.4444444,10.1333333 L10.5,19 L1.55555556,10.1333333 Z" id="Path" stroke="#000000" stroke-width="1.7"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/icons/icon_home.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M15.944,25.10975 L21.555,25.10975 L21.555,19.49975 L15.944,19.49975 L15.944,25.10975 Z M22.306,26.60975 L15.194,26.60975 C14.78,26.60975 14.444,26.27375 14.444,25.85975 L14.444,18.74975 C14.444,18.33575 14.78,17.99975 15.194,17.99975 L22.306,17.99975 C22.72,17.99975 23.056,18.33575 23.056,18.74975 L23.056,25.85975 C23.056,26.27375 22.72,26.60975 22.306,26.60975 L22.306,26.60975 Z M7.056,18.74975 L7.056,31.19375 C7.056,32.74075 8.314,33.99975 9.861,33.99975 L27.639,33.99975 C29.186,33.99975 30.444,32.74075 30.444,31.19375 L30.444,18.74975 C30.444,18.33575 30.78,17.99975 31.194,17.99975 L32.939,17.99975 L18.75,3.81075 L4.561,17.99975 L6.306,17.99975 C6.72,17.99975 7.056,18.33575 7.056,18.74975 L7.056,18.74975 Z M27.639,35.49975 L9.861,35.49975 C7.487,35.49975 5.556,33.56775 5.556,31.19375 L5.556,19.49975 L2.75,19.49975 C2.446,19.49975 2.173,19.31675 2.057,19.03675 C1.941,18.75675 2.005,18.43475 2.22,18.21975 L18.22,2.21975 C18.513,1.92675 18.987,1.92675 19.28,2.21975 L35.28,18.21975 C35.495,18.43475 35.559,18.75675 35.443,19.03675 C35.327,19.31675 35.054,19.49975 34.75,19.49975 L31.944,19.49975 L31.944,31.19375 C31.944,33.56775 30.013,35.49975 27.639,35.49975 L27.639,35.49975 Z" id="Fill-1" fill="#000000"></path>
+    </g>
+</svg>

package/icons/icon_id.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M26.167,24.75 C26.167,24.336 25.831,24 25.417,24 L12.083,24 C11.669,24 11.333,24.336 11.333,24.75 C11.333,25.164 11.669,25.5 12.083,25.5 L25.417,25.5 C25.831,25.5 26.167,25.164 26.167,24.75 L26.167,24.75 Z M26.167,19.416 C26.167,19.002 25.831,18.666 25.417,18.666 L22.75,18.666 C22.336,18.666 22,19.002 22,19.416 C22,19.83 22.336,20.166 22.75,20.166 L25.417,20.166 C25.831,20.166 26.167,19.83 26.167,19.416 L26.167,19.416 Z M26.167,14.083 C26.167,13.669 25.831,13.333 25.417,13.333 L22.75,13.333 C22.336,13.333 22,13.669 22,14.083 C22,14.497 22.336,14.833 22.75,14.833 L25.417,14.833 C25.831,14.833 26.167,14.497 26.167,14.083 L26.167,14.083 Z M14.75,14.833 C13.693,14.833 12.833,15.693 12.833,16.75 C12.833,17.807 13.693,18.666 14.75,18.666 C15.807,18.666 16.667,17.807 16.667,16.75 C16.667,15.693 15.807,14.833 14.75,14.833 L14.75,14.833 Z M14.75,20.166 C12.866,20.166 11.333,18.634 11.333,16.75 C11.333,14.866 12.866,13.333 14.75,13.333 C16.634,13.333 18.167,14.866 18.167,16.75 C18.167,18.634 16.634,20.166 14.75,20.166 L14.75,20.166 Z M7.75,9.5 C7.612,9.5 7.5,9.612 7.5,9.75 L7.5,29.083 C7.5,29.221 7.612,29.333 7.75,29.333 L29.75,29.333 C29.888,29.333 30,29.221 30,29.083 L30,9.75 C30,9.612 29.888,9.5 29.75,9.5 L7.75,9.5 Z M29.75,30.833 L7.75,30.833 C6.785,30.833 6,30.048 6,29.083 L6,9.75 C6,8.785 6.785,8 7.75,8 L29.75,8 C30.715,8 31.5,8.785 31.5,9.75 L31.5,29.083 C31.5,30.048 30.715,30.833 29.75,30.833 L29.75,30.833 Z" id="Fill-1" fill="#000000"></path>
+    </g>
+</svg>