Merge branch 'master' of github.com:yldio/joyent-dashboard into topology-view

frontend/locales/en-us.json

@@ -18,5 +18,24 @@
   "mem-res-set-size": "Memory resident set size",
   "mem-res-set-size-sm": "Process memory that is actually stored in the RAM",
   "apache-http-reqs": "Apache HTTP requests",
-  "apache-http-reqs-sm": "Number of website requests to apache if it is used"
-}
+  "apache-http-reqs-sm": "Number of website requests to apache if it is used",
+  "metrics": {
+    "add": {
+      "add-label": "Add",
+      "added-label": "Added",
+      "link-label": "Learn more"
+    },
+    "cpu_agg_usage": {
+      "title": "Aggregated CPU usage",
+      "description": "CPU usages accross all of the CPU cores."
+    },
+    "cpu_wait_time": {
+      "title": "Memory resident set size",
+      "description": "Process memory that is actually stored in the RAM."
+    },
+    "zfs_used": {
+      "title": "Apache HTTP requests",
+      "description": "Number of website requests to apache if it is used."
+    }
+  }
+}

frontend/scripts/build-locales.js

@@ -22,13 +22,31 @@ const source = ({
   })();
 `;
 
+const flattenMessages = (nestedMessages, prefix='') => {
+  return Object.keys(nestedMessages).reduce((messages, key) => {
+    const value = nestedMessages[key];
+    const prefixedKey = prefix ? `${prefix}.${key}` : key;
+
+    if(typeof value === 'string') {
+      messages[prefixedKey] = value;
+    }
+    else {
+      Object.assign(messages, flattenMessages(value, prefixedKey));
+    }
+
+    return messages;
+  }, {});
+};
+
 const compile = async () => {
   const files = await readdir(root);
   const jsons = files.filter(filename => path.extname(filename) === '.json');
 
   const locales = jsons.reduce((res, filename) => {
     const name = path.parse(filename).name;
-    const json = JSON.stringify(require(path.join(root, filename)));
+    const messages = require(path.join(root, filename));
+    const flattenedMessages = flattenMessages(messages);
+    const json = JSON.stringify(flattenedMessages);
     const lang = name.split(/\-/)[0];
 
     return {

frontend/src/components/empty/instances.js

@@ -0,0 +1,19 @@
+const React = require('react');
+const ReactIntl = require('react-intl');
+
+const Column = require('@ui/components/column');
+const Row = require('@ui/components/row');
+
+const {
+  FormattedMessage
+} = ReactIntl;
+
+module.exports = () => (
+  <Row>
+    <Column xs={12}>
+      <p name='empty'>
+        <FormattedMessage id='no-instances' />
+      </p>
+    </Column>
+  </Row>
+);

frontend/src/components/metrics-row/index.js

@@ -0,0 +1,56 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const Column = require('@ui/components/column');
+const MiniMetric = require('@ui/components/mini-metric');
+const PropTypes = require('@root/prop-types');
+const Row = require('@ui/components/row');
+
+const {
+  default: styled
+} = Styled;
+
+const {
+  MiniMetricGraph,
+  MiniMetricMeta,
+  MiniMetricTitle,
+  MiniMetricSubtitle,
+  MiniMetricView
+} = MiniMetric;
+
+const StyledRow = styled(Row)`
+  margin: 0;
+
+  & > div {
+    padding-left: 0;
+    padding-right: 0;
+  }
+`;
+
+const MetricsRow = ({
+  datasets = []
+}) => {
+  const _datasets = datasets.map((metric, i) => (
+    <Column key={i} xs={4}>
+      <MiniMetricView borderless>
+        <MiniMetricMeta>
+          <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+          <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+        </MiniMetricMeta>
+        <MiniMetricGraph data={metric.data} />
+      </MiniMetricView>
+    </Column>
+  ));
+
+  return (
+    <StyledRow>
+      {_datasets}
+    </StyledRow>
+  );
+};
+
+MetricsRow.propTypes = {
+  datasets: React.PropTypes.arrayOf(PropTypes.dataset)
+};
+
+module.exports = MetricsRow;

frontend/src/components/service-item/index.js

@@ -0,0 +1,115 @@
+const forceArray = require('force-array');
+const React = require('react');
+const ReactRouter = require('react-router');
+
+const Anchor = require('@ui/components/anchor');
+const List = require('@ui/components/list');
+const MetricsRow = require('@components/metrics-row');
+const PropTypes = require('@root/prop-types');
+
+const {
+  Link
+} = ReactRouter;
+
+const {
+  ListItem,
+  ListItemView,
+  ListItemMeta,
+  ListItemTitle,
+  ListItemSubTitle,
+  ListItemDescription,
+  ListItemGroupView,
+  ListItemOutlet,
+  ListItemOptions,
+  ListItemHeader
+} = List;
+
+const ServiceItem = ({
+  org = '',
+  project = '',
+  service = {}
+}) => {
+  const isChild = !!service.parent;
+
+  const childs = forceArray(service.services).map((service) => (
+    <ServiceItem
+      key={service.uuid}
+      org={org}
+      project={project}
+      service={service}
+    />
+  ));
+
+  const to = `/${org}/projects/${project}/services/${service.id}`;
+
+  const title = isChild ? (
+    <ListItemTitle>{service.name}</ListItemTitle>
+  ) : (
+    <ListItemTitle>
+      <Link to={to}>
+        {Anchor.fn(
+          <Anchor secondary>
+            {service.name}
+          </Anchor>
+        )}
+      </Link>
+    </ListItemTitle>
+  );
+
+  const subtitle = (
+    <ListItemSubTitle>{service.instances} instances</ListItemSubTitle>
+  );
+
+  const description = (
+    <ListItemDescription>Flags</ListItemDescription>
+  );
+
+  const header = isChild ? null : (
+    <ListItemHeader>
+      <ListItemMeta>
+        {title}
+        {subtitle}
+        {description}
+      </ListItemMeta>
+      <ListItemOptions>…</ListItemOptions>
+    </ListItemHeader>
+  );
+
+  const view = childs.length ? (
+    <ListItemGroupView>
+      {childs}
+    </ListItemGroupView>
+  ) : (
+    <ListItemView>
+      <ListItemMeta>
+        {isChild && title}
+        {isChild && subtitle}
+        {description}
+      </ListItemMeta>
+      <ListItemOutlet>
+        <MetricsRow metrics={service.metrics} />
+      </ListItemOutlet>
+    </ListItemView>
+  );
+
+  return (
+    <ListItem
+      collapsed={service.collapsed}
+      flat={isChild}
+      headed={!isChild}
+      key={service.uuid}
+      stacked={isChild && (service.instances > 1)}
+    >
+      {header}
+      {view}
+    </ListItem>
+  );
+};
+
+ServiceItem.propTypes = {
+  org: React.PropTypes.string,
+  project: React.PropTypes.string,
+  service: PropTypes.service
+};
+
+module.exports = ServiceItem;

frontend/src/containers/metrics/add-metrics.js

@@ -0,0 +1,65 @@
+const React = require('react');
+const PropTypes = require('@root/prop-types');
+const AddMetric = require('@ui/components/add-metric');
+const ReactIntl = require('react-intl');
+
+const {
+  FormattedMessage
+} = ReactIntl;
+
+const {
+  AddMetricButton,
+  AddMetricDescription,
+  AddMetricLink,
+  AddMetricTile,
+  AddMetricTitle
+} = AddMetric;
+
+const AddMetrics = ({
+  metricTypes,
+  metrics,
+  onAddMetric
+}) => {
+
+  const added = (metric) =>
+    Boolean(metrics.filter((m) => m.id === metric).length);
+  const addButton = (metric) => (
+    <AddMetricButton metric={metric} onClick={onAddMetric}>
+      <FormattedMessage id={'metrics.add.add-label'} onClick={onAddMetric} />
+    </AddMetricButton>
+  );
+  const addedButton = (
+    <AddMetricButton disabled>
+      <FormattedMessage id={'metrics.add.added-label'} />
+    </AddMetricButton>
+  );
+
+  const metricList = metricTypes.map((metric) => (
+    <AddMetricTile key={metric}>
+      <AddMetricTitle>
+        <FormattedMessage id={`metrics.${metric}.title`} />
+      </AddMetricTitle>
+      <AddMetricDescription>
+        <FormattedMessage id={`metrics.${metric}.description`} />
+      </AddMetricDescription>
+      <AddMetricLink href='http://somelink.com'>
+        <FormattedMessage id={'metrics.add.link-label'} />
+      </AddMetricLink>
+      { added(metric) ? addedButton : addButton(metric) }
+    </AddMetricTile>
+  ));
+
+  return (
+    <div>
+      {metricList}
+    </div>
+  );
+};
+
+AddMetrics.propTypes = {
+  metricTypes: PropTypes.metricTypes.isRequired,
+  metrics: React.PropTypes.arrayOf(PropTypes.metric).isRequired,
+  onAddMetric: React.PropTypes.func.isRequired,
+};
+
+module.exports = AddMetrics;

frontend/src/containers/service/instances.js

@@ -1,5 +1,84 @@
 const React = require('react');
+const ReactRedux = require('react-redux');
 
-module.exports = () => (
-  <p>instances</p>
-);
+const actions = require('@state/actions');
+const EmptyInstances = require('@components/empty/instances');
+const PropTypes = require('@root/prop-types');
+const List = require('@ui/components/list');
+const DatasetsRow = require('@components/metrics-row');
+const selectors = require('@state/selectors');
+
+const {
+  toggleInstanceCollapsed
+} = actions;
+
+const {
+  connect
+} = ReactRedux;
+
+const {
+  instancesByServiceIdSelector
+} = selectors;
+
+const {
+  ListItem,
+  ListItemView,
+  ListItemMeta,
+  ListItemTitle,
+  ListItemOptions,
+  ListItemOutlet
+} = List;
+
+const Instances = ({
+  instances = [],
+  toggleCollapsed = () => null
+}) => {
+  const onClick = (uuid) => () => toggleCollapsed(uuid);
+
+  const empty = instances.length ? null : (
+    <EmptyInstances />
+  );
+
+  const instanceList = instances.map((instance) => (
+    <ListItem collapsed={!instance.collapsed} key={instance.uuid} >
+      <ListItemView>
+        <ListItemMeta onClick={onClick(instance.uuid)}>
+          <ListItemTitle>{instance.name}</ListItemTitle>
+        </ListItemMeta>
+        <ListItemOutlet>
+          <DatasetsRow metrics={instance.metrics} />
+        </ListItemOutlet>
+      </ListItemView>
+      <ListItemOptions>
+        …
+      </ListItemOptions>
+    </ListItem>
+  ));
+
+  return (
+    <div>
+      {empty}
+      {instanceList}
+    </div>
+  );
+};
+
+Instances.propTypes = {
+  instances: React.PropTypes.arrayOf(PropTypes.instance),
+  toggleCollapsed: React.PropTypes.func
+};
+
+const mapStateToProps = (state, {
+  params = {}
+}) => ({
+  instances: instancesByServiceIdSelector(params.serviceId)(state)
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleCollapsed: (uuid) => dispatch(toggleInstanceCollapsed(uuid))
+});
+
+module.exports = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Instances);

frontend/src/containers/service/metrics.js

@@ -1,5 +1,71 @@
 const React = require('react');
+const ReactRedux = require('react-redux');
+const PropTypes = require('@root/prop-types');
+const selectors = require('@state/selectors');
+const AddMetrics = require('../metrics/add-metrics');
+const actions = require('@state/actions');
 
-module.exports = () => (
-  <p>metrics</p>
-);
+const {
+  connect
+} = ReactRedux;
+
+const {
+  metricsByServiceIdSelector,
+  serviceByIdSelector
+} = selectors;
+
+const {
+  addMetric
+} = actions;
+
+const Metrics = ({
+  addMetric,
+  metrics,
+  metricTypes,
+  service
+}) => {
+
+  const onAddMetric = (metric) => {
+    addMetric({
+      id: metric,
+      service: service.uuid
+    });
+  };
+
+  return (
+    <div>
+      <p>metrics</p>
+      <div>
+        <AddMetrics
+          metricTypes={metricTypes}
+          metrics={metrics}
+          onAddMetric={onAddMetric}
+        />
+      </div>
+    </div>
+  );
+};
+
+Metrics.propTypes = {
+  addMetric: React.PropTypes.func.isRequired,
+  metricTypes: PropTypes.metricTypes,
+  metrics: React.PropTypes.arrayOf(PropTypes.metric),
+  service: PropTypes.service
+};
+
+const mapStateToProps = (state, {
+  params = {}
+}) => ({
+  metrics: metricsByServiceIdSelector(params.serviceId)(state),
+  metricTypes: state.metrics.ui.types,
+  service: serviceByIdSelector(params.serviceId)(state)
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  addMetric: (payload) => dispatch(addMetric(payload))
+});
+
+module.exports = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Metrics);

frontend/src/containers/services/index.js

@@ -1,10 +1,9 @@
 const React = require('react');
 const ReactRedux = require('react-redux');
-const ReactRouter = require('react-router');
 
 const EmptyServices = require('@components/empty/services');
 const PropTypes = require('@root/prop-types');
-const Row = require('@ui/components/row');
+const ServiceItem = require('@components/service-item');
 const selectors = require('@state/selectors');
 
 const {
@@ -17,10 +16,6 @@ const {
   servicesByProjectIdSelector
 } = selectors;
 
-const {
-  Link
-} = ReactRouter;
-
 const Services = ({
   org = {},
   project = {},
@@ -30,37 +25,19 @@ const Services = ({
     <EmptyServices />
   );
 
-  const serviceList = (services) => {
-    if (!services || !services.length) {
-      return null;
-    }
-
-    const list = services.map((service) => {
-      const to = `/${org.id}/projects/${project.id}/services/${service.id}`;
-
-      return (
-        <li key={service.id}>
-          <Link activeClassName='active' to={to}>
-            {service.name}
-          </Link>
-          {serviceList(service.services)}
-        </li>
-      );
-    });
-
-    return (
-      <ul>
-        {list}
-      </ul>
-    );
-  };
+  const serviceList = services.map((service) => (
+    <ServiceItem
+      key={service.uuid}
+      org={org.id}
+      project={project.id}
+      service={service}
+    />
+  ));
 
   return (
     <div>
       {empty}
-      <Row>
-        {serviceList(services)}
-      </Row>
+      {serviceList}
     </div>
   );
 };

frontend/src/mock-state.json

@@ -47,16 +47,147 @@
     }]
   },
   "metrics": {
-    "data": [{
-      "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d4",
-      "id": "agg-cpu-usage"
-    }, {
-      "uuid": "9e77b50e-42d7-425d-8daf-c0e98e2bdd6a",
-      "id": "mem-res-set-size"
-    }, {
-      "uuid": "347dbdc7-15e3-4e12-8dfb-865d38526e14",
-      "id": "apache-http-reqs"
-    }]
+    "ui": {
+      "types": [
+        "cpu_agg_usage",
+        "cpu_wait_time",
+        "zfs_used",
+        "zfs_available",
+        "load_average",
+        "mem_agg_usage",
+        "mem_limit",
+        "mem_swap",
+        "mem_swap_limit",
+        "net_agg_packets_in",
+        "net_agg_packets_out",
+        "net_agg_bytes_in",
+        "net_agg_bytes_out",
+        "time_of_day"
+      ]
+    },
+    "data": {
+      "types": [{
+        "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d4",
+        "id": "agg-cpu-usage"
+      }, {
+        "uuid": "9e77b50e-42d7-425d-8daf-c0e98e2bdd6a",
+        "id": "mem-res-set-size"
+      }, {
+        "uuid": "347dbdc7-15e3-4e12-8dfb-865d38526e14",
+        "id": "apache-http-reqs"
+      }, {
+        "uuid": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "name": "Memory",
+        "id": "memory"
+      }],
+      "datasets": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "uuid": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "data": [{
+          "firstQuartile": 15,
+          "thirdQuartile": 15,
+          "median": 15,
+          "max": 15,
+          "min": 15
+        }, {
+          "firstQuartile": 26,
+          "thirdQuartile": 26,
+          "median": 26,
+          "max": 26,
+          "min": 26
+        }, {
+          "firstQuartile": 17,
+          "thirdQuartile": 17,
+          "median": 17,
+          "max": 17,
+          "min": 17
+        }, {
+          "firstQuartile": 15,
+          "thirdQuartile": 25,
+          "median": 19,
+          "max": 19,
+          "min": 20
+        }, {
+          "firstQuartile": 19,
+          "thirdQuartile": 25,
+          "median": 21,
+          "max": 20,
+          "min": 25
+        }, {
+          "firstQuartile": 24,
+          "thirdQuartile": 30,
+          "median": 25,
+          "max": 26,
+          "min": 27
+        }, {
+          "firstQuartile": 28,
+          "thirdQuartile": 34,
+          "median": 30,
+          "max": 30,
+          "min": 30
+        }, {
+          "firstQuartile": 30,
+          "thirdQuartile": 45,
+          "median": 35,
+          "max": 40,
+          "min": 40
+        }, {
+          "firstQuartile": 20,
+          "thirdQuartile": 55,
+          "median": 45,
+          "max": 44,
+          "min": 44
+        }, {
+          "firstQuartile": 55,
+          "thirdQuartile": 55,
+          "median": 55,
+          "max": 55,
+          "min": 55
+        }, {
+          "firstQuartile": 57,
+          "thirdQuartile": 56,
+          "median": 57,
+          "max": 58,
+          "min": 57
+        }, {
+          "firstQuartile": 57,
+          "thirdQuartile": 56,
+          "median": 56,
+          "max": 56,
+          "min": 56
+        }, {
+          "firstQuartile": 60,
+          "thirdQuartile": 56,
+          "median": 60,
+          "max": 60,
+          "min": 60
+        }, {
+          "firstQuartile": 57,
+          "thirdQuartile": 57,
+          "median": 57,
+          "max": 57,
+          "min": 57
+        }, {
+          "firstQuartile": 57,
+          "thirdQuartile": 55,
+          "median": 55,
+          "max": 55,
+          "min": 55
+        }, {
+          "firstQuartile": 20,
+          "thirdQuartile": 45,
+          "median": 45,
+          "max": 45,
+          "min": 45
+        }, {
+          "firstQuartile": 15,
+          "thirdQuartile": 40,
+          "median": 30,
+          "max": 49,
+          "min": 30
+        }]
+      }]
+    }
   },
   "orgs": {
     "ui": {
@@ -142,6 +273,7 @@
   },
   "services": {
     "ui": {
+      "collapsed": [],
       "sections": [
         "summary",
         "instances",
@@ -157,113 +289,219 @@
       "uuid": "081a792c-47e0-4439-924b-2efa9788ae9e",
       "id": "nginx",
       "name": "Nginx",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 1,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
       "id": "wordpress",
       "name": "Wordpress",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 1,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "6a0eee76-c019-413b-9d5f-44712b55b993",
       "id": "nfs",
       "name": "NFS",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 1,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
       "id": "memcached",
       "name": "Memcached",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 5,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "4ee4103e-1a52-4099-a48e-01588f597c70",
       "id": "percona",
       "name": "Percona",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 5,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034",
       "id": "primary",
       "name": "Primary",
       "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 1,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "c8411ef0-ab39-42cb-a704-d20b170eff31",
       "id": "secondaries",
       "name": "Secondaries",
       "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 4,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "97c68055-db88-45c9-ad49-f26da4264777",
       "id": "consul",
       "name": "Consul",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 1,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }]
   },
   "instances": {
+    "ui": {
+      "collapsed": []
+    },
     "data": [{
       "uuid": "309ecd9f-ac03-474b-aff7-4bd2e743296c",
       "name": "wordpress_01",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "0db6db53-de6f-4378-839e-5d5b452fbaf2",
       "name": "nfs_01",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "6a0eee76-c019-413b-9d5f-44712b55b993",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "250c8a6c-7d02-49a9-8abd-e1c22773041d",
       "name": "consul",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "97c68055-db88-45c9-ad49-f26da4264777",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "2c921f3a-8bc3-4f57-9cd7-789ebae72061",
       "name": "memcache_01",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "68d3046e-8e34-4f5d-a0e5-db3795a250fd",
       "name": "memcache_02",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "2ea99763-3b44-4179-8393-d66d94961051",
       "name": "memcache_03",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "25f6bc62-63b8-4959-908e-1f6d7ff6341d",
       "name": "memcache_04",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "8be01042-0281-4a77-a357-25979e87bf3d",
       "name": "memcache_05",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "3d652e9d-73e8-4a6f-8171-84fa83740662",
       "name": "nginx",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "081a792c-47e0-4439-924b-2efa9788ae9e",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "c3ec7633-a02b-4615-86a0-9e6faeaae94b",
       "name": "percona-primary",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "service": "4ee4103e-1a52-4099-a48e-01588f597c70",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "c2b5fec2-31e2-41a7-b7fc-cd0bb1822e76",
       "name": "percona-secundary",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "c8411ef0-ab39-42cb-a704-d20b170eff31",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "service": "4ee4103e-1a52-4099-a48e-01588f597c70",
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }]
   }
 }

frontend/src/prop-types.js

@@ -28,15 +28,50 @@ const Service = React.PropTypes.shape({
   ...BaseObject
 });
 
+const Instance = React.PropTypes.shape({
+  ...BaseObject,
+  datacenter: React.PropTypes.string,
+  service: React.PropTypes.string,
+  project: React.PropTypes.string
+});
+
+const Metric = React.PropTypes.shape({
+  ...BaseObject
+});
+
+const Dataset = React.PropTypes.shape({
+  uuid: React.PropTypes.string,
+  type: React.PropTypes.string,
+  data: React.PropTypes.arrayOf(
+    React.PropTypes.shape({
+      firstQuartile: React.PropTypes.string,
+      thirdQuartile: React.PropTypes.string,
+      median: React.PropTypes.string,
+      max: React.PropTypes.string,
+      min: React.PropTypes.string
+    })
+  )
+});
+
 const Sections = React.PropTypes.arrayOf(
   React.PropTypes.string
 );
 
+// consinder renaming this to 'Types' as it could be used for any
+const MetricTypes = React.PropTypes.arrayOf(
+  React.PropTypes.string
+);
+
 module.exports = {
   account: Account,
   link: Link,
   org: Org,
   project: Project,
   sections: Sections,
-  service: Service
+  service: Service,
+  instance: Instance,
+  metric: Metric,
+  // consinder renaming this to 'Types' as it could be used for any
+  metricTypes: MetricTypes,
+  dataset: Dataset
 };

frontend/src/state/actions.js

@@ -10,5 +10,8 @@ const APP = constantCase(process.env['APP_NAME']);
 module.exports = {
   ...require('@state/thunks'),
   updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`),
-  toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`)
+  toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`),
+  toggleServiceCollapsed: createAction(`${APP}/APP/TOGGLE_SERVICE_COLLAPSED`),
+  addMetric: createAction(`${APP}/APP/ADD_METRIC`),
+  toggleInstanceCollapsed: createAction(`${APP}/APP/TOGGLE_INSTANCE_COLLAPSED`)
 };

frontend/src/state/reducers/common.js

@@ -0,0 +1,25 @@
+const toggleCollapsed = (state, action) => {
+  const {
+    ui
+  } = state;
+
+  const {
+    collapsed = []
+  } = ui;
+
+  const _collapsed = collapsed.indexOf(action.payload) >= 0
+    ? collapsed.filter((uuid) => uuid !== action.payload)
+    : [...collapsed, action.payload];
+
+  return {
+    ...state,
+    ui: {
+      ...ui,
+      collapsed: _collapsed
+    }
+  };
+};
+
+module.exports = {
+  toggleCollapsed
+};

frontend/src/state/reducers/index.js

@@ -8,7 +8,9 @@ module.exports = () => {
   return combineReducers({
     account: require('@state/reducers/account'),
     app: require('@state/reducers/app'),
+    instances: require('@state/reducers/instances'),
     intl: require('@state/reducers/intl'),
+    metrics: require('@state/reducers/metrics'),
     orgs: require('@state/reducers/orgs'),
     projects: require('@state/reducers/projects'),
     services: require('@state/reducers/services')

frontend/src/state/reducers/instances.js

@@ -0,0 +1,20 @@
+const ReduxActions = require('redux-actions');
+
+const actions = require('@state/actions');
+const common = require('@state/reducers/common');
+
+const {
+  handleActions
+} = ReduxActions;
+
+const {
+  toggleInstanceCollapsed
+} = actions;
+
+const {
+  toggleCollapsed
+} = common;
+
+module.exports = handleActions({
+  [toggleInstanceCollapsed.toString()]: toggleCollapsed
+}, {});

frontend/src/state/reducers/metrics.js

@@ -0,0 +1,30 @@
+const ReduxActions = require('redux-actions');
+
+const actions = require('@state/actions');
+
+const {
+  handleActions
+} = ReduxActions;
+
+const {
+  addMetric
+} = actions;
+
+// This will need to be handled by an async action
+// to update on the server too
+module.exports = handleActions({
+  [addMetric.toString()]: (state, action) => {
+    return ({
+      ...state,
+      data: {
+        types: [
+          ...state.data.types,
+          action.payload
+        ],
+        datasets: [
+          ...state.data.datasets
+        ]
+      }
+    });
+  }
+}, {});

frontend/src/state/reducers/services.js

@@ -1,9 +1,20 @@
 const ReduxActions = require('redux-actions');
 
+const actions = require('@state/actions');
+const common = require('@state/reducers/common');
+
 const {
   handleActions
 } = ReduxActions;
 
+const {
+  toggleServiceCollapsed
+} = actions;
+
+const {
+  toggleCollapsed
+} = common;
+
 module.exports = handleActions({
-  'x': (state) => state // somehow handleActions needs at least one reducer
+  [toggleServiceCollapsed.toString()]: toggleCollapsed
 }, {});

frontend/src/state/selectors.js

@@ -15,6 +15,11 @@ const serviceUiSections = (state) => get(state, 'services.ui.sections', []);
 const orgs = (state) => get(state, 'orgs.data', []);
 const projects = (state) => get(state, 'projects.data', []);
 const services = (state) => get(state, 'services.data', []);
+const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
+const collapsedInstances = (state) => get(state, 'instances.ui.collapsed', []);
+const instances = (state) => get(state, 'instances.data', []);
+const metricTypes = (state) => get(state, 'metrics.data.types', []);
+const metricDatasets = (state) => get(state, 'metrics.data.datasets', []);
 
 const projectById = (projectId) => createSelector(
   projects,
@@ -43,17 +48,52 @@ const orgSections = (orgId) => createSelector(
   )
 );
 
+const isCollapsed = (collapsed, uuid) => collapsed.indexOf(uuid) >= 0;
+
+const datasets = (metrics, uuids) => uuids.map((uuid) => find(metrics, [
+  'uuid',
+  uuid
+]));
+
 const servicesByProjectId = (projectId) => createSelector(
-  [services, projectById(projectId)],
-  (services, project) =>
+  [services, projectById(projectId), collapsedServices, metricDatasets],
+  (services, project, collapsed, metrics) =>
     services.filter((s) => s.project === project.uuid)
     .map((service) => ({
       ...service,
       services: services.filter((s) => s.parent === service.uuid)
     }))
     .filter((s) => !s.parent)
+    .map((service) => ({
+      ...service,
+      metrics: datasets(metrics, service.metrics),
+      collapsed: isCollapsed(collapsed, service.uuid),
+      services: service.services.map((service) => ({
+        ...service,
+        metrics: datasets(metrics, service.metrics),
+        collapsed: isCollapsed(collapsed, service.uuid)
+      }))
+    }))
 );
 
+const instancesByServiceId = (serviceId) => createSelector(
+  [instances, serviceById(serviceId), collapsedInstances, metricDatasets],
+  (instances, service, collapsed, metrics) =>
+    instances.filter((i) => i.service === service.uuid)
+    .map((instance) => ({
+      ...instance,
+      metrics: datasets(metrics, instance.metrics),
+      collapsed: isCollapsed(collapsed, instance.uuid)
+    }))
+);
+
+const metricsByServiceId = (serviceId) => createSelector(
+  [metricTypes, serviceById(serviceId)],
+  (metricTypes, service) =>
+    metricTypes.filter((i) => i.service === service.uuid)
+);
+
+
 module.exports = {
   accountSelector: account,
   accountUISelector: accountUi,
@@ -66,5 +106,7 @@ module.exports = {
   serviceSectionsSelector: serviceUiSections,
   projectsByOrgIdSelector: projectsByOrgId,
   projectByIdSelector: projectById,
-  servicesByProjectIdSelector: servicesByProjectId
+  servicesByProjectIdSelector: servicesByProjectId,
+  instancesByServiceIdSelector: instancesByServiceId,
+  metricsByServiceIdSelector: metricsByServiceId
 };

ui/.storybook/config.js

@@ -1,6 +1,15 @@
 const { configure } = require('@kadira/storybook');
 
+const req = require.context('../src/components', true, /story.js$/)
+
 function loadStories() {
+  let stories = req.keys();
+      stories = stories.sort();
+
+  stories.forEach(story => req(story));
+
+  // Fallback to stories/index.js file for anything that
+  // hasn't been moved
   require('../stories');
 }
 

ui/package.json

@@ -8,7 +8,7 @@
     "lint": "make lint",
     "test": "make test",
     "build": "make compile",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -s ./src/shared/assets -p 6006",
     "build-storybook": "build-storybook"
   },
   "dependencies": {
@@ -31,7 +31,8 @@
     "react-faux-dom": "^3.0.0",
     "react-select": "^1.0.0-rc.2",
     "reduce-css-calc": "^1.3.0",
-    "styled-components": "^1.2.1"
+    "styled-components": "^1.2.1",
+    "transform-props-with": "^2.1.0"
   },
   "devDependencies": {
     "@kadira/storybook": "^2.35.2",
@@ -53,6 +54,7 @@
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-react": "^6.8.0",
     "eslint-plugin-standard": "^2.0.1",
+    "jsdom": "^9.9.1",
     "memory-fs": "^0.4.1",
     "nyc": "^10.0.0",
     "pre-commit": "^1.2.2",

ui/src/components/add-metric/button.js

@@ -0,0 +1,53 @@
+const React = require('react');
+const Styled = require('styled-components');
+const fns = require('../../shared/functions');
+const Button = require('../button');
+
+const {
+  default: styled
+} = Styled;
+
+const {
+  remcalc
+} = fns;
+
+const StyledButton = styled(Button)`
+  position: absolute;
+  left: ${remcalc(24)};
+  bottom: ${remcalc(24)};
+`;
+
+const AddMetricButton = ({
+  children,
+  disabled,
+  metric,
+  onClick
+}) => {
+  const onButtonClick = (e) => onClick(metric);
+  return disabled ?
+     (
+       <StyledButton
+         disabled
+         name='add-metric-button'
+       >
+         {children}
+       </StyledButton>
+     ) : (
+       <StyledButton
+         name='add-metric-button'
+         onClick={onButtonClick}
+         secondary
+       >
+         {children}
+       </StyledButton>
+    );
+};
+
+AddMetricButton.propTypes = {
+  children: React.PropTypes.node,
+  disabled: React.PropTypes.bool,
+  metric: React.PropTypes.string,
+  onClick: React.PropTypes.func,
+};
+
+module.exports = AddMetricButton;

ui/src/components/add-metric/description.js

@@ -0,0 +1,28 @@
+const React = require('react');
+const Styled = require('styled-components');
+const constants = require('../../shared/constants');
+
+const {
+  colors
+} = constants;
+
+const {
+  default: styled
+} = Styled;
+
+const StyledDescription = styled.p`
+  margin: 0;
+  color: ${colors.regular};
+`;
+
+const Description = (props) => (
+  <StyledDescription name='add-metric-description'>
+    {props.children}
+  </StyledDescription>
+);
+
+Description.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = Description;

ui/src/components/add-metric/index.js

@@ -0,0 +1,7 @@
+module.exports = {
+  AddMetricButton: require('./button'),
+  AddMetricDescription: require('./description'),
+  AddMetricLink: require('./link'),
+  AddMetricTile: require('./tile'),
+  AddMetricTitle: require('./title'),
+};

ui/src/components/add-metric/link.js

@@ -0,0 +1,26 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
+
+const StyledLink = styled.a`
+  text-decoration: underline !important;
+`;
+
+const Link = ({
+  children,
+  href
+}) => (
+  <StyledLink href={href} name='add-metric-link'>
+    {children}
+  </StyledLink>
+);
+
+Link.propTypes = {
+  children: React.PropTypes.node,
+  href: React.PropTypes.string.isRequired
+};
+
+module.exports = Link;

ui/src/components/add-metric/readme.md

@@ -0,0 +1 @@
+# `<AddMetric>`

ui/src/components/add-metric/story.js

@@ -0,0 +1,40 @@
+const React = require('react');
+const Base = require('../base');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const {
+  AddMetricButton,
+  AddMetricDescription,
+  AddMetricLink,
+  AddMetricTile,
+  AddMetricTitle
+} = require('./');
+
+storiesOf('Add Metric', module)
+  .add('Add Metric', () => (
+    <Base>
+      <AddMetricTile>
+        <AddMetricTitle>Aggregated CPU usage</AddMetricTitle>
+        <AddMetricDescription>
+          CPU usages accross all of the CPU cores.
+        </AddMetricDescription>
+        <AddMetricLink href='http://somelink.com'>Learn more</AddMetricLink>
+        <AddMetricButton>Add</AddMetricButton>
+      </AddMetricTile>
+    </Base>
+  ))
+  .add('Added Metric', () => (
+    <Base>
+      <AddMetricTile>
+        <AddMetricTitle>Aggregated CPU usage</AddMetricTitle>
+        <AddMetricDescription>
+          CPU usages accross all of the CPU cores.
+        </AddMetricDescription>
+        <AddMetricLink href='http://somelink.com'>Learn more</AddMetricLink>
+        <AddMetricButton disabled>Added</AddMetricButton>
+      </AddMetricTile>
+    </Base>
+  ));

ui/src/components/add-metric/tile.js

@@ -0,0 +1,64 @@
+const React = require('react');
+const Styled = require('styled-components');
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+
+const {
+  boxes,
+  breakpoints,
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const spacing = remcalc(24);
+
+const StyledTile = styled.div`
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 0 ${spacing} ${spacing} 0;
+  padding: ${spacing};
+  width: ${remcalc(300)};
+  height: ${remcalc(247)};
+  box-shadow: ${boxes.bottomShaddow};
+  border: 1px solid ${colors.borderSecondary};
+  background-color: ${colors.brandSecondary};
+
+  ${breakpoints.small`
+    width: ${remcalc(300)};
+    height: ${remcalc(247)};
+  `}
+
+  ${breakpoints.medium`
+    width: ${remcalc(300)};
+    height: ${remcalc(247)};
+  `}
+
+  ${breakpoints.large`
+    width: ${remcalc(300)};
+    height: ${remcalc(247)};
+  `}
+`;
+
+const Tile = ({
+  children
+}) => {
+  return (
+    <StyledTile name='add-metric-tile'>
+      {children}
+    </StyledTile>
+  );
+};
+
+Tile.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = Tile;

ui/src/components/add-metric/title.js

@@ -0,0 +1,30 @@
+const React = require('react');
+const Styled = require('styled-components');
+const constants = require('../../shared/constants');
+
+const {
+  colors
+} = constants;
+
+const {
+  default: styled
+} = Styled;
+
+const StyledTitle = styled.h4`
+  margin: 0;
+  color: ${colors.semibold};
+`;
+
+const Title = ({
+  children
+}) => (
+  <StyledTitle name='add-metric-title'>
+    {children}
+  </StyledTitle>
+);
+
+Title.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = Title;

ui/src/components/anchor/index.js

@@ -0,0 +1,26 @@
+const constants = require('../../shared/constants');
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  default: styled
+} = Styled;
+
+const color = (props) => props.secondary
+  ? colors.brandSecondaryLink
+  : colors.brandPrimaryLink;
+
+const Anchor = styled.a`
+  color: ${color} !important;
+`;
+
+module.exports = Anchor;
+
+module.exports.fn = (element) => (props) => React.cloneElement(element, {
+  ...element.props,
+  ...props
+}, element.props.children);

ui/src/components/avatar/story.js

@@ -0,0 +1,40 @@
+const React = require('react');
+const fakeData = require('../../shared/fake-data');
+const Base = require('../base');
+
+const {
+  profile
+} = fakeData;
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Avatar = require('./');
+
+storiesOf('Avatar', module)
+  .add('Avatar Picture', () => (
+    <Base>
+      <Avatar
+        color='#ef6176'
+        name='Tom'
+        src={profile}
+      />
+    </Base>
+  ))
+  .add('Avatar Text', () => (
+    <Base>
+      <Avatar
+        color='#35a8c0'
+        name='Alex'
+      />
+      <Avatar
+        color='#35a8c0'
+        name='Thomas'
+      />
+      <Avatar
+        color='#35a8c0'
+        name='귀여운 오리'
+      />
+    </Base>
+  ));

ui/src/components/base/index.js

@@ -1,28 +1,42 @@
 const constants = require('../../shared/constants');
+const fncs = require('../../shared/functions');
+
 const Styled = require('styled-components');
 
 const {
   forms,
-  links,
   tables,
-  typography
+  typography,
+  colors
 } = constants;
 
 const {
-  default: styled
+  default: styled,
 } = Styled;
 
+const {
+  generateFonts
+} = fncs;
+
+
+// The name that will be used in the 'font-family' property
+const fontFamilies = [
+  'LibreFranklin'
+];
+
+// The name the font file without the extension
+const fontFilenames = [
+  'librefranklin-webfont'
+];
+
 module.exports = styled.div`
-  @font-face {
-    font-family: 'LibreFranklin';
-    src: url('../../shared/fonts/LibreFranklin.ttf')  format('truetype')
-  }
+  ${generateFonts(fontFamilies, fontFilenames)};
 
   font-family: 'LibreFranklin', -apple-system, BlinkMacSystemFont,
     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 1rem;
   line-height: 1.5;
-  color: #373A3C;
+  color: ${colors.fonts.regular};
   background-color: #FFFFFF;
 
   /**************************************************************************
@@ -329,13 +343,12 @@ module.exports = styled.div`
    */
 
   & a {
-    color: ${links.color};
-    text-decoration: ${links.decoration};
+    color: ${colors.brandPrimaryLink};
+    text-decoration: underline;
 
     &:focus,
     &:hover {
-      color: ${links.hoverColor};
-      text-decoration: ${links.hoverDecoration};
+      text-decoration: none;
     }
 
     &:focus {
@@ -350,8 +363,7 @@ module.exports = styled.div`
 
     &:focus,
     &:hover {
-      color: ${links.hoverColor};
-      text-decoration: ${links.hoverDecoration};
+      text-decoration: none;
     }
 
     &:focus {

ui/src/components/button/story.js

@@ -0,0 +1,27 @@
+const React = require('react');
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Button = require('./');
+
+storiesOf('Button', module)
+  .add('With text', () => (
+    <Button>
+      Inspire the lazy
+    </Button>
+  )).add('Secondary', () => (
+    <Button secondary>
+      Inspire the brave
+    </Button>
+  )).add('Disabled', () => (
+    <Button disabled>
+      Inspire the liars
+    </Button>
+  )).add('Anchor', () => (
+    <div>
+      <Button href='#'>
+        Inspire the anchor
+      </Button>
+    </div>
+  ));

ui/src/components/checkbox/story.js

@@ -0,0 +1,18 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Checkbox = require('./');
+
+storiesOf('Checkbox', module)
+  .add('Default', () => (
+    <Checkbox />
+  ))
+  .add('Checked', () => (
+    <Checkbox checked onChange={function noop() {}} />
+  ))
+  .add('Disabled', () => (
+    <Checkbox disabled />
+  ));

ui/src/components/close/index.js

@@ -0,0 +1,44 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const fns = require('../../shared/functions');
+
+const {
+  default: styled
+} = Styled;
+
+const {
+  remcalc
+} = fns;
+
+const StyledButton = styled.button`
+  background: none;
+  border: none;
+  position: absolute;
+  top: ${remcalc(16)};
+  right: ${remcalc(16)};
+`;
+
+const Close = ({
+  style,
+  onClick
+}) => {
+  return (
+    <StyledButton
+      onClick={onClick}
+      style={style}
+    >
+      <img
+        alt="Close"
+        src="./close.svg"
+      />
+    </StyledButton>
+  );
+};
+
+Close.propTypes = {
+  onClick: React.PropTypes.func,
+  style: React.PropTypes.object
+};
+
+module.exports = Close;

ui/src/components/close/story.js

@@ -0,0 +1,20 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base = require('../base');
+const Close = require('./');
+
+storiesOf('Close', module)
+  .add('Default', () => (
+    <Base
+      style={{
+        position: 'relative',
+        width: 60
+      }}
+    >
+      <Close onClick={function noop() {}} />
+    </Base>
+  ));

ui/src/components/input/index.js

@@ -11,7 +11,7 @@ const {
 } = constants;
 
 const {
-  remcalc
+  remcalc,
 } = fns;
 
 const {
@@ -19,37 +19,57 @@ const {
 } = composers;
 
 const {
-  default: styled
+  default: styled,
+  css
 } = Styled;
 
+const successBakcground = css`
+  background-color: ${colors.brandSecondary};
+  background-image: url("./input-confirm.svg");
+  background-repeat: no-repeat;
+  background-position: 98% 20px;
+`;
+
+const defaultBackground = css`
+  background-color: ${colors.brandSecondary};
+`;
+
 const Label = styled.label`
-  color: #464646;
+  color: ${props => props.error ? colors.alert : colors.fonts.regular}
 `;
 
 const InputField = styled.input`
-  background: ${colors.brandSecondary};
+  ${baseBox()};
+  
+  ${props => props.success ? successBakcground : defaultBackground }
+  
+  border-color: ${props => props.error ? colors.alert : 'auto'}
+  color: ${props => props.error ? colors.alert : colors.fonts.semibold}
   display: block;
   font-size: 16px;
-  height: ${remcalc(50)};
-  padding-left: ${remcalc(15)};
-  padding-right: ${remcalc(15)};
+  padding: ${remcalc('15 18')};
   visibility: visible;
   width: 100%;
-
-  ${baseBox()}
-
+  
   &:focus {
     border-color: ${boxes.border.checked};
     outline: none;
   }
 `;
 
+const Error = styled.span`
+  float: right;
+  color: ${colors.alert};
+  font-size: ${remcalc(14)};
+`;
+
 const Input = ({
   autoComplete,
   autoFocus,
   children,
   className,
   disabled = false,
+  error,
   form,
   id,
   inputMode,
@@ -65,23 +85,30 @@ const Input = ({
   selectionDirection,
   spellCheck,
   style,
+  success,
   tabIndex,
   type,
   value
 }) => {
   const _label = label || children;
   const _children = label && children ? children : null;
+  const _error = error ? (<Error>{error}</Error>) : null;
 
   return (
     <div>
-      <Label htmlFor={id}>
+      <Label
+        error={error}
+        htmlFor={id}
+      >
         {_label}
       </Label>
+      {_error}
       <InputField
         aria-labelledby={labelledby}
         autoComplete={autoComplete}
         autoFocus={autoFocus}
         disabled={disabled}
+        error={error}
         form={form}
         id={id}
         inputMode={inputMode}
@@ -94,6 +121,7 @@ const Input = ({
         required={required}
         selectionDirection={selectionDirection}
         spellCheck={spellCheck}
+        success={success}
         tabIndex={tabIndex}
         type={type}
         value={value}
@@ -109,6 +137,7 @@ Input.propTypes = {
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   disabled: React.PropTypes.bool,
+  error: React.PropTypes.string,
   form: React.PropTypes.string,
   id: React.PropTypes.string,
   inputMode: React.PropTypes.string,
@@ -124,6 +153,7 @@ Input.propTypes = {
   selectionDirection: React.PropTypes.string,
   spellCheck: React.PropTypes.bool,
   style: React.PropTypes.object,
+  success: React.PropTypes.bool,
   tabIndex: React.PropTypes.string,
   type: React.PropTypes.string,
   value: React.PropTypes.string

ui/src/components/input/story.js

@@ -0,0 +1,42 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base= require('../base');
+const Input = require('./');
+
+storiesOf('Input', module)
+  .add('Default', () => (
+    <Base>
+      <Input placeholder="I am the placeholder" />
+    </Base>
+  ))
+  .add('type=email', () => (
+    <Base>
+      <Input
+        label='Email Address'
+        placeholder='Enter email'
+        type='email'
+      >
+        <small>We&apos;ll never share your email with anyone else.</small>
+      </Input>
+    </Base>
+  ))
+  .add('Error', () => (
+    <Base>
+      <Input
+        error="Somethings missing"
+        value="alexw/makeusproud.com"
+      />
+    </Base>
+  ))
+  .add('Success', () => (
+    <Base>
+      <Input
+        success
+        value="alexw@makeusproud.com"
+      />
+    </Base>
+  ));

ui/src/components/list/collapsed.js

@@ -1,18 +0,0 @@
-const React = require('react');
-
-module.exports = (Component) => (props) => {
-  // eslint-disable-next-line react/prop-types
-  const _children = React.Children.map(props.children, (c) => {
-    return React.cloneElement(c, {
-      ...c.props,
-      // eslint-disable-next-line react/prop-types
-      collapsed: props.collapsed
-    });
-  });
-
-  return (
-    <Component {...props}>
-      {_children}
-    </Component>
-  );
-};

ui/src/components/list/description.js

@@ -1,19 +1,41 @@
-const Title = require('./title');
-const Styled = require('styled-components');
+const fns = require('../../shared/functions');
 const React = require('react');
+const Styled = require('styled-components');
+const Title = require('./title');
 
 const {
-  default: styled
+  remcalc
+} = fns;
+
+const {
+  default: styled,
+  css
 } = Styled;
 
 const margin = (props) => props.collapsed ? `
   margin-left: auto;
 ` : '';
 
-const justify = (props) => props.collapsed ? 'flex-end' : 'flex-start';
-const xs = (props) => props.collapsed ? 6 : 12;
+const justify = (props) => props.collapsed
+  ? 'flex-end'
+  : 'flex-start';
+
+const xs = (props) => props.collapsed
+  ? 6
+  : 12;
+
+const collapsed = (...args) => (props) => !props.collapsed
+  ? css(...args)
+  : css``;
 
 const StyledTitle = styled(Title)`
+  ${collapsed`
+    position: absolute;
+    bottom: 0;
+    padding-bottom: ${remcalc(12)};
+    padding-top: 0;
+  `}
+
   font-weight: normal !important;
   flex-grow: 2;
 `;

ui/src/components/list/group-view.js

@@ -0,0 +1,25 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const View = require('./view').raw;
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+module.exports = styled(View)`
+  display: block;
+  padding-top: ${remcalc(62)};
+  padding-left: ${remcalc(23)};
+  padding-right: ${remcalc(23)};
+  padding-bottom: ${remcalc(5)};
+  background-color: ${colors.brandInactive};
+`;

ui/src/components/list/header.js

@@ -0,0 +1,55 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const Item = require('./item');
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const StyledItem = styled(Item)`
+  position: absolute;
+
+  background-color: ${colors.brandPrimary};
+  border: solid 1px ${colors.borderPrimary};
+  box-shadow: none;
+
+  width: calc(100% + ${remcalc(2)});
+  margin: 0;
+
+  top: ${remcalc(-1)};
+  left: ${remcalc(-1)};
+  right: ${remcalc(-1)};
+`;
+
+const addFromHeader = (children) => React.Children.map(children, (c) => {
+  return React.cloneElement(c, {
+    ...c.props,
+    fromHeader: true
+  });
+});
+
+const Header = (props) => (
+  <StyledItem
+    collapsed
+    headed
+    name='list-item-header'
+  >
+    {addFromHeader(props.children)}
+  </StyledItem>
+);
+
+Header.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = Header;

ui/src/components/list/index.js

@@ -1,10 +1,12 @@
 module.exports = {
-  ListItem: require('./item'),
-  ListItemView: require('./view'),
-  ListItemTitle: require('./title'),
-  ListItemSubTitle: require('./subtitle'),
   ListItemDescription: require('./description'),
+  ListItemHeader: require('./header'),
+  ListItemGroupView: require('./group-view'),
+  ListItem: require('./item'),
   ListItemMeta: require('./meta'),
+  ListItemOptions: require('./options'),
   ListItemOutlet: require('./outlet'),
-  ListItemOptions: require('./options')
+  ListItemSubTitle: require('./subtitle'),
+  ListItemTitle: require('./title'),
+  ListItemView: require('./view')
 };

ui/src/components/list/item.js

@@ -1,9 +1,9 @@
-const Collapsed = require('./collapsed');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const React = require('react');
 const Row = require('../row');
 const Styled = require('styled-components');
+const transferProps = require('./transfer-props');
 
 const {
   boxes,
@@ -18,16 +18,49 @@ const {
   default: styled
 } = Styled;
 
-const height = (props) => props.collapsed ? remcalc(48) : remcalc(126);
-
-const Item = styled(Row)`
-  height: ${height}
-  box-shadow: ${boxes.bottomShaddow};
-  border: 1px solid ${colors.borderSecondary};
-  background-color: ${colors.brandSecondary};
+const paper = `
+  0 8px 0 -5px #fafafa,
+  0 8px 1px -4px ${colors.borderSecondary},
+  0 16px 0 -10px #fafafa,
+  0 16px 1px -9px ${colors.borderSecondary};
 `;
 
-module.exports = Collapsed((props) => (
+const height = (props) => props.collapsed
+  ? remcalc(48)
+  : 'auto';
+
+const minHeight = (props) => props.collapsed
+  ? 'auto'
+  : remcalc(126);
+
+// remcalc(126)
+const shadow = (props) => props.stacked
+  ? paper
+  : props.flat
+    ? 'none'
+    : props.collapsed && props.headed
+      ? boxes.bottomShaddowDarker
+      : boxes.bottomShaddow;
+
+const marginBottom = (props) => props.stacked
+  ? remcalc(16)
+  : remcalc(10);
+
+const Item = styled(Row)`
+  position: relative;
+
+  height: ${height};
+  min-height: ${minHeight};
+  box-shadow: ${shadow};
+  border: 1px solid ${colors.borderSecondary};
+  background-color: ${colors.brandSecondary};
+  margin-bottom: ${marginBottom};
+`;
+
+module.exports = transferProps([
+  'collapsed',
+  'headed'
+], (props) => (
   <Item name='list-item' {...props}>
     {props.children}
   </Item>

ui/src/components/list/meta.js

@@ -1,27 +1,47 @@
-const Collapsed = require('./collapsed');
 const Column = require('../column');
-const Styled = require('styled-components');
 const React = require('react');
 const Row = require('../row');
+const Styled = require('styled-components');
+const transferProps = require('./transfer-props');
+const View = require('./view');
 
 const {
   default: styled
 } = Styled;
 
-const xs = (props) => props.collapsed ? 12 : 6;
+const xs = (props) => props.collapsed
+  ? 12
+  : 6;
+
+const display = (props) => !props.collapsed
+  ? 'block'
+  : 'flex';
 
 const InnerRow = styled(Row)`
+  display: ${display};
   height: 100%;
 `;
 
-module.exports = Collapsed((props) => (
-  <Column
-    name='list-item-meta'
-    xs={xs(props)}
-    {...props}
-  >
-    <InnerRow>
-      {props.children}
-    </InnerRow>
-  </Column>
-));
+module.exports = transferProps([
+  'collapsed',
+  'headed',
+  'fromHeader'
+], (props) => {
+  const meta = (
+    <Column
+      name='list-item-meta'
+      xs={xs(props)}
+      {...props}
+    >
+      <InnerRow collapsed={props.collapsed}>
+        {props.children}
+      </InnerRow>
+    </Column>
+  );
+
+  return !props.fromHeader ? meta : (
+    <View collapsed fromHeader>
+      {meta}
+    </View>
+  );
+});

ui/src/components/list/mini-metric-data.js

@@ -0,0 +1,103 @@
+module.exports = [{
+  firstQuartile: 15,
+  thirdQuartile: 15,
+  median: 15,
+  max: 15,
+  min: 15,
+}, {
+  firstQuartile: 26,
+  thirdQuartile: 26,
+  median: 26,
+  max: 26,
+  min: 26,
+}, {
+  firstQuartile: 17,
+  thirdQuartile: 17,
+  median: 17,
+  max: 17,
+  min: 17,
+}, {
+  firstQuartile: 15,
+  thirdQuartile: 25,
+  median: 19,
+  max: 19,
+  min: 20,
+}, {
+  firstQuartile: 19,
+  thirdQuartile: 25,
+  median: 21,
+  max: 20,
+  min: 25,
+}, {
+  firstQuartile: 24,
+  thirdQuartile: 30,
+  median: 25,
+  max: 26,
+  min: 27,
+}, {
+  firstQuartile: 28,
+  thirdQuartile: 34,
+  median: 30,
+  max: 30,
+  min: 30,
+}, {
+  firstQuartile: 30,
+  thirdQuartile: 45,
+  median: 35,
+  max: 40,
+  min: 40,
+}, {
+  firstQuartile: 20,
+  thirdQuartile: 55,
+  median: 45,
+  max: 44,
+  min: 44,
+}, {
+  firstQuartile: 55,
+  thirdQuartile: 55,
+  median: 55,
+  max: 55,
+  min: 55,
+}, {
+  firstQuartile: 57,
+  thirdQuartile: 56,
+  median: 57,
+  max: 58,
+  min: 57,
+}, {
+  firstQuartile: 57,
+  thirdQuartile: 56,
+  median: 56,
+  max: 56,
+  min: 56,
+}, {
+  firstQuartile: 60,
+  thirdQuartile: 56,
+  median: 60,
+  max: 60,
+  min: 60,
+}, {
+  firstQuartile: 57,
+  thirdQuartile: 57,
+  median: 57,
+  max: 57,
+  min: 57,
+}, {
+  firstQuartile: 57,
+  thirdQuartile: 55,
+  median: 55,
+  max: 55,
+  min: 55,
+}, {
+  firstQuartile: 20,
+  thirdQuartile: 45,
+  median: 45,
+  max: 45,
+  min: 45,
+}, {
+  firstQuartile: 15,
+  thirdQuartile: 40,
+  median: 30,
+  max: 49,
+  min: 30,
+}];

ui/src/components/list/options.js

@@ -2,6 +2,7 @@ const Button = require('../button');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const React = require('react');
+const transferProps = require('./transfer-props');
 const Styled = require('styled-components');
 
 const {
@@ -16,11 +17,17 @@ const {
   default: styled
 } = Styled;
 
-const height = (props) => props.collapsed ? remcalc(46) : remcalc(124);
+const height = (props) => props.collapsed
+  ? remcalc(46)
+  : remcalc(124);
+
+const borderLeftColor = (props) => !props.fromHeader
+  ? colors.borderSecondary
+  : colors.borderPrimary;
 
 const Nav = styled.nav`
   flex: 0 0 ${remcalc(47)};
-  border-left: 1px solid ${colors.borderSecondary};
+  border-left: 1px solid ${borderLeftColor};
 `;
 
 const StyledButton = styled(Button)`
@@ -44,17 +51,24 @@ const StyledButton = styled(Button)`
   }
 `;
 
-const Options = (props) => (
-  <Nav name='list-item-options'>
+const Options = transferProps([
+  'collapsed',
+  'headed',
+  'fromHeader'
+], (props) => (
+  <Nav
+    fromHeader={props.fromHeader}
+    name='list-item-options'
+  >
     <StyledButton
       rect
-      secondary
+      secondary={!props.fromHeader}
       {...props}
     >
       {props.children}
     </StyledButton>
   </Nav>
-);
+));
 
 Options.propTypes = {
   children: React.PropTypes.node

ui/src/components/list/outlet.js

@@ -1,25 +1,31 @@
 const Column = require('../column');
+const Styled = require('styled-components');
 const React = require('react');
 
-const Outlet = (props) => {
-  if (props.collapsed) {
-    return null;
-  }
+const {
+  default: styled
+} = Styled;
 
-  return (
-    <Column
-      name='list-item-outlet'
-      xs={6}
-      {...props}
-    >
-      {props.children}
-    </Column>
-  );
-};
+const display = (props) => props.collapsed
+  ? 'none'
+  : 'block';
+
+const StyledColumn = styled(Column)`
+  display: ${display}
+`;
+
+const Outlet = (props) => (
+  <StyledColumn
+    name='list-item-outlet'
+    xs={6}
+    {...props}
+  >
+    {props.children}
+  </StyledColumn>
+);
 
 Outlet.propTypes = {
-  children: React.PropTypes.node,
-  collapsed: React.PropTypes.bool
+  children: React.PropTypes.node
 };
 
 module.exports = Outlet;

ui/src/components/list/story.js

@@ -0,0 +1,320 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base = require('../base');
+const Row = require('../row');
+const Column = require('../column');
+const MiniMetricData = require('./mini-metric-data');
+
+const {
+  MiniMetricGraph,
+  MiniMetricMeta,
+  MiniMetricTitle,
+  MiniMetricSubtitle,
+  MiniMetricView
+} = require('../mini-metric');
+
+const {
+  ListItemDescription,
+  ListItemHeader,
+  ListItem,
+  ListItemMeta,
+  ListItemOptions,
+  ListItemOutlet,
+  ListItemSubTitle,
+  ListItemTitle,
+  ListItemView,
+  ListItemGroupView
+} = require('./');
+
+storiesOf('List Item', module)
+  .add('default', () => (
+    <Base>
+      <ListItem>
+        <ListItemView>
+          <ListItemMeta>
+            <ListItemTitle>Nginx 01</ListItemTitle>
+            <ListItemSubTitle>4 instances</ListItemSubTitle>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOutlet>
+            Metrics
+          </ListItemOutlet>
+        </ListItemView>
+        <ListItemOptions>
+          …
+        </ListItemOptions>
+      </ListItem>
+    </Base>
+  ))
+  .add('collapsed', () => (
+    <Base>
+      <ListItem collapsed>
+        <ListItemView>
+          <ListItemMeta>
+            <ListItemTitle>Nginx 01</ListItemTitle>
+            <ListItemSubTitle>4 instances</ListItemSubTitle>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOutlet>
+            Metrics
+          </ListItemOutlet>
+        </ListItemView>
+        <ListItemOptions>
+          …
+        </ListItemOptions>
+      </ListItem>
+    </Base>
+  ))
+  .add('headed', () => (
+    <Base>
+      <ListItem headed>
+        <ListItemHeader>
+          <ListItemMeta>
+            <ListItemTitle>Nginx 01</ListItemTitle>
+            <ListItemSubTitle>4 instances</ListItemSubTitle>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOptions>
+            …
+          </ListItemOptions>
+        </ListItemHeader>
+        <ListItemView>
+          <ListItemMeta>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOutlet>
+            Metrics
+          </ListItemOutlet>
+        </ListItemView>
+      </ListItem>
+    </Base>
+  ))
+  .add('headed collapsed', () => (
+    <Base>
+      <ListItem collapsed headed>
+        <ListItemHeader>
+          <ListItemMeta>
+            <ListItemTitle>Nginx 01</ListItemTitle>
+            <ListItemSubTitle>4 instances</ListItemSubTitle>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOptions>
+            …
+          </ListItemOptions>
+        </ListItemHeader>
+        <ListItemView>
+          <ListItemMeta>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOutlet>
+            Metrics
+          </ListItemOutlet>
+        </ListItemView>
+      </ListItem>
+    </Base>
+  ))
+  .add('stacked', () => (
+    <Base>
+      <ListItem stacked>
+        <ListItemView>
+          <ListItemMeta>
+            <ListItemTitle>Nginx 01</ListItemTitle>
+            <ListItemSubTitle>4 instances</ListItemSubTitle>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOutlet>
+            Metrics
+          </ListItemOutlet>
+        </ListItemView>
+        <ListItemOptions>
+          …
+        </ListItemOptions>
+      </ListItem>
+    </Base>
+  ))
+  .add('view-group', () => (
+    <Base>
+      <ListItem headed>
+        <ListItemHeader>
+          <ListItemMeta>
+            <ListItemTitle>Percona</ListItemTitle>
+            <ListItemSubTitle>5 instances</ListItemSubTitle>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOptions>…</ListItemOptions>
+        </ListItemHeader>
+        <ListItemGroupView>
+          <ListItem flat>
+            <ListItemView>
+              <ListItemMeta>
+                <ListItemTitle>percona_database</ListItemTitle>
+              </ListItemMeta>
+              <ListItemOutlet>
+                Metrics
+              </ListItemOutlet>
+            </ListItemView>
+          </ListItem>
+          <ListItem flat>
+            <ListItemView>
+              <ListItemMeta>
+                <ListItemTitle>percona_database</ListItemTitle>
+                <ListItemSubTitle>5 instances</ListItemSubTitle>
+                <ListItemDescription>Flags</ListItemDescription>
+              </ListItemMeta>
+              <ListItemOutlet>
+                Metrics
+              </ListItemOutlet>
+            </ListItemView>
+          </ListItem>
+          <ListItem flat stacked>
+            <ListItemView>
+              <ListItemMeta>
+                <ListItemTitle>percona_database</ListItemTitle>
+                <ListItemSubTitle>5 instances</ListItemSubTitle>
+              </ListItemMeta>
+              <ListItemOutlet>
+                Metrics
+              </ListItemOutlet>
+            </ListItemView>
+          </ListItem>
+        </ListItemGroupView>
+      </ListItem>
+    </Base>
+  ))
+  .add('view-group with metrics', () => (
+    <Base>
+      <ListItem headed>
+        <ListItemHeader>
+          <ListItemMeta>
+            <ListItemTitle>Percona</ListItemTitle>
+            <ListItemSubTitle>5 instances</ListItemSubTitle>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOptions>…</ListItemOptions>
+        </ListItemHeader>
+        <ListItemGroupView>
+          <ListItem flat>
+            <ListItemView>
+              <ListItemMeta>
+                <ListItemTitle>percona_database</ListItemTitle>
+              </ListItemMeta>
+              <ListItemOutlet>
+                <Row>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                </Row>
+              </ListItemOutlet>
+            </ListItemView>
+          </ListItem>
+          <ListItem flat>
+            <ListItemView>
+              <ListItemMeta>
+                <ListItemTitle>percona_database</ListItemTitle>
+                <ListItemSubTitle>5 instances</ListItemSubTitle>
+                <ListItemDescription>Flags</ListItemDescription>
+              </ListItemMeta>
+              <ListItemOutlet>
+                <Row>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                </Row>
+              </ListItemOutlet>
+            </ListItemView>
+          </ListItem>
+          <ListItem flat stacked>
+            <ListItemView>
+              <ListItemMeta>
+                <ListItemTitle>percona_database</ListItemTitle>
+                <ListItemSubTitle>5 instances</ListItemSubTitle>
+              </ListItemMeta>
+              <ListItemOutlet>
+                <Row>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                </Row>
+              </ListItemOutlet>
+            </ListItemView>
+          </ListItem>
+        </ListItemGroupView>
+      </ListItem>
+    </Base>
+  ));

ui/src/components/list/subtitle.js

@@ -1,33 +1,64 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
 const Title = require('./title');
 const React = require('react');
 const Styled = require('styled-components');
 
+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
 const {
   default: styled
 } = Styled;
 
+const padding = (props) => !props.collapsed
+  ? `0 ${remcalc(18)}`
+  : 0;
+
+const color = (props) => props.fromHeader
+  ? colors.brandPrimaryColor
+  : '#646464';
+
+const display = (props) => !props.collapsed
+  ? 'inline-block'
+  : 'flex';
+
 const Span = styled.span`
-  display: flex;
+  display: ${display};
   flex-direction: column;
-  justify-content: flex-start;
 
   font-weight: normal;
   font-style: normal;
   font-stretch: normal;
   font-size: 14px;
-  color: #646464;
+  color: ${color};
+
+  justify-content: flex-end;
+`;
+
+const StyledTitle = styled(Title)`
+  display: ${display};
+  padding: ${padding};
 `;
 
 const Subtitle = (props) => (
-  <Title name='list-item-subtitle' {...props}>
-    <Span>
+  <StyledTitle name='list-item-subtitle' {...props}>
+    <Span
+      fromHeader={props.fromHeader}
+    >
       {props.children}
     </Span>
-  </Title>
+  </StyledTitle>
 );
 
 Subtitle.propTypes = {
-  children: React.PropTypes.node
+  children: React.PropTypes.node,
+  fromHeader: React.PropTypes.bool
 };
 
 module.exports = Subtitle;

ui/src/components/list/title.js

@@ -16,17 +16,39 @@ const {
   default: styled
 } = Styled;
 
-const justify = (props) => props.collapsed ? 'center' : 'flex-start';
-const width = (props) => props.collapsed ? 'auto' : '100%';
-const direction = (props) => props.collapsed ? 'column' : 'row';
-const grow = (props) => props.collapsed ? 0 : 2;
-const xs = (props) => props.collapsed ? 6 : 12;
+const color = (props) => !props.fromHeader
+  ? colors.brandSecondaryColor
+  : colors.brandPrimaryColor;
+
+const padding = (props) => !props.collapsed
+  ? `${remcalc(12)} ${remcalc(18)} 0 ${remcalc(18)}`
+  : `0 ${remcalc(18)}`;
+
+const justify = (props) => props.collapsed
+  ? 'center'
+  : 'flex-start';
+
+const width = (props) => props.collapsed
+  ? 'auto'
+  : '100%';
+
+const direction = (props) => props.collapsed
+  ? 'column'
+  : 'row';
+
+const grow = (props) => props.collapsed
+  ? 0
+  : 2;
+
+const xs = (props) => props.collapsed
+  ? 6
+  : 12;
 
 const Container = styled.div`
   font-size: ${remcalc(16)};
   font-weight: 600;
   line-height: 1.5;
-  color: ${colors.brandSecondaryColor};
+  color: ${color};
 
   display: flex;
   flex-direction: ${direction};
@@ -35,12 +57,15 @@ const Container = styled.div`
   flex-grow: ${grow};
   width: ${width};
 
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding: ${padding};
 `;
 
+const display = (props) => !props.collapsed
+  ? 'inline-block'
+  : 'flex';
+
 const Span = styled.span`
-  display: flex;
+  display: ${display};
   flex-direction: column;
   justify-content: center;
 `;

ui/src/components/list/transfer-props.js

@@ -0,0 +1,29 @@
+const isString = require('lodash.isstring');
+const React = require('react');
+
+const transfer = (parentProps, props) => {
+// eslint-disable-next-line react/prop-types
+  return React.Children.map(props.children, (c) => {
+    return c && React.cloneElement(c, {
+      ...c.props,
+      ...parentProps.reduce((sum, name) => ({
+        ...sum,
+        [name]: props[name]
+      }), {})
+    });
+  });
+};
+
+module.exports = (parentProps, Component) => (props) => {
+// eslint-disable-next-line react/prop-types
+  const _children = !isString(props.children)
+    ? transfer(parentProps, props)
+// eslint-disable-next-line react/prop-types
+    : props.children;
+
+  return (
+    <Component {...props}>
+      {_children}
+    </Component>
+  );
+};

ui/src/components/list/view.js

@@ -1,20 +1,53 @@
-const Collapsed = require('./collapsed');
+const fns = require('../../shared/functions');
 const React = require('react');
 const Row = require('../row');
 const Styled = require('styled-components');
+const transferProps = require('./transfer-props');
+
+const {
+  remcalc
+} = fns;
 
 const {
   default: styled
 } = Styled;
 
-const View = styled(Row)`
+const height = (props) => props.collapsed
+  ? remcalc(48)
+  : 'auto';
+
+const paddingTop = (props) => props.headed && !props.fromHeader
+  ? remcalc(47)
+  : remcalc(0);
+
+const StyledView = styled(Row)`
   flex: 1;
   margin: 0;
-  height: 100%;
+  height: ${height};
+  padding-top: ${paddingTop};
 `;
 
-module.exports = Collapsed((props) => (
-  <View name='list-item-view' {...props}>
-    {props.children}
-  </View>
-));
+const View = (props) => {
+  const hide = props.headed && !props.fromHeader && props.collapsed;
+
+  return hide ? null : (
+    <StyledView name='list-item-view' {...props}>
+      {props.children}
+    </StyledView>
+  );
+};
+
+View.propTypes = {
+  children: React.PropTypes.node,
+  collapsed: React.PropTypes.bool,
+  fromHeader: React.PropTypes.bool,
+  headed: React.PropTypes.bool
+};
+
+module.exports = transferProps([
+  'collapsed',
+  'headed',
+  'fromHeader'
+], View);
+
+module.exports.raw = View;

ui/src/components/mini-metric/graph.js

@@ -0,0 +1,115 @@
+const buildArray = require('build-array');
+const Chart = require('chart.js');
+const fns = require('../../shared/functions');
+const React = require('react');
+const Styled = require('styled-components');
+const whisker = require('chartjs-chart-box-plot');
+
+whisker(Chart);
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const Container = styled.div`
+  position: relative;
+  height: ${remcalc(72)};
+  width: 100%;
+`;
+
+const Canvas = styled.canvas`
+  position: absolute;
+  bottom: 0;
+`;
+
+class Graph extends React.Component {
+  componentDidMount() {
+    const {
+      data = [],
+      labels = 0,
+      max = 100,
+      min = 0
+    } = this.props;
+
+    const _labels = !Array.isArray(labels)
+      ? buildArray(labels || data.length).map((v, i) => '')
+      : labels;
+
+    this._chart = new Chart(this._refs.component, {
+      type: 'whisker',
+      responsive: true,
+      maintainAspectRatio: true,
+      options: {
+        scales: {
+          xAxes: [{
+            display: false,
+            barPercentage: 1.0,
+            categoryPercentage: 1.0
+          }],
+          yAxes: [{
+            display: false,
+            ticks: {
+              min: min,
+              max: max
+            }
+          }]
+        },
+        legend: {
+          display: false
+        }
+      },
+      data: {
+        labels: _labels,
+        datasets: [{
+          data
+        }]
+      }
+    });
+  }
+  componentWillReceiveProps(nextProps) {
+    const {
+      data = [],
+      labels = 0
+    } = this.props;
+
+    const _labels = !Array.isArray(labels)
+      ? buildArray(labels || data.length).map((v, i) => '')
+      : labels;
+
+    this._chart.data.datasets = [{
+      data
+    }];
+
+    this._chart.data.labels = _labels;
+    this._chart.update(0);
+  }
+  ref(name) {
+    this._refs = this._refs || {};
+
+    return (el) => {
+      this._refs[name] = el;
+    };
+  }
+  render() {
+    return (
+      <Container>
+        <Canvas
+          innerRef={this.ref('component')}
+        />
+      </Container>
+    );
+  }
+}
+
+Graph.propTypes = {
+  data: React.PropTypes.array,
+  labels: React.PropTypes.number,
+  max: React.PropTypes.number,
+  min: React.PropTypes.number
+};
+
+module.exports = Graph;

ui/src/components/mini-metric/index.js

@@ -1,166 +1,7 @@
-const React = require('react');
-const Styled = require('styled-components');
-const constants = require('../../shared/constants');
-
-const {
-  colors
-} = constants;
-
-const {
-  default: styled
-} = Styled;
-
-const buildArray = require('build-array');
-const Chart = require('chart.js');
-const whisker = require('chartjs-chart-box-plot');
-
-whisker(Chart);
-
-const StyledDiv = styled.div`
-  height: 127px;
-  width: 158px;
-  background-color: ${colors.miniBackground};
-  border: solid 1px ${colors.borderSecondary};
-
-  &::before {
-    position: absolute;
-    z-index: 1;
-    width: 9px;
-    height: 127px;
-    background-image:
-      linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0));
-    content: '';
-  }
-`;
-
-const Devider = styled.div`
-  width: 158px;
-  height: 1px;
-  background-color: ${colors.seperator}
-`;
-
-const TextMetric = styled.div`
-  height: 38px;
-  padding: 8px 12px;
-`;
-
-const InnerTextBox = styled.div`
-  width: 136px;
-  height: 36px;
-  font-family: 'Libre Franklin', sans-serif;
-  font-size: 12px;
-  font-weight: normal;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: 18px;
-  text-align: right;
-  color: ${colors.regular};
-
-  & p {
-    margin: 0;
-  }
-
-  & h3 {
-    margin: 0;
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 1.29;
-    color: ${colors.semibold};
-  }
-`;
-
-const StyledCanvas = styled.canvas`
-`;
-
-class MiniMetric extends React.Component {
-  componentDidMount() {
-    const {
-      datasets = [],
-      labels = 0,
-      max = 100,
-      min = 0
-    } = this.props;
-
-    const _labels = !Array.isArray(labels)
-      ? buildArray(labels).map((v, i) => '')
-      : labels;
-
-    this._chart = new Chart(this._refs.component, {
-      type: 'whisker',
-      responsive: true,
-      maintainAspectRatio: true,
-      options: {
-        scales: {
-          xAxes: [{
-            display: false,
-            barPercentage: 1.0,
-            categoryPercentage: 1.0
-          }],
-          yAxes: [{
-            display: false,
-            ticks: {
-              min: min,
-              max: max
-            }
-          }]
-        },
-        legend: {
-          display: false
-        }
-      },
-      data: {
-        labels: _labels,
-        datasets: datasets
-      }
-    });
-  }
-  componentWillReceiveProps(nextProps) {
-    const {
-      datasets = [],
-      labels = 0
-    } = this.props;
-
-    this._chart.data.datasets = datasets;
-    this._chart.data.labels = buildArray(labels).map((v, i) => '');
-    this._chart.update(0);
-  }
-  ref(name) {
-    this._refs = this._refs || {};
-
-    return (el) => {
-      this._refs[name] = el;
-    };
-  }
-  render() {
-    const {
-      name,
-    } = this.props;
-
-    return (
-      <StyledDiv>
-        <TextMetric>
-          <InnerTextBox>
-            <h3>{name}: 54%</h3>
-            <p>(1280/3000 MB)</p>
-          </InnerTextBox>
-        </TextMetric>
-        <Devider />
-        <StyledCanvas
-          height='72'
-          innerRef={this.ref('component')}
-          width='157'
-        />
-      </StyledDiv>
-    );
-  }
-}
-
-MiniMetric.propTypes = {
-  datasets: React.PropTypes.array,
-  labels: React.PropTypes.number,
-  max: React.PropTypes.number,
-  min: React.PropTypes.number,
-  name: React.PropTypes.string,
+module.exports = {
+  MiniMetricGraph: require('./graph'),
+  MiniMetricMeta: require('./meta'),
+  MiniMetricTitle: require('./title'),
+  MiniMetricSubtitle: require('./subtitle'),
+  MiniMetricView: require('./view')
 };
-
-module.exports = MiniMetric;

ui/src/components/mini-metric/meta.js

@@ -0,0 +1,41 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const OuterBox = styled.div`
+  height: ${remcalc(53)};
+  padding: ${remcalc(8)} ${remcalc(12)};
+  border-bottom: ${remcalc(1)} solid ${colors.seperator};
+`;
+
+const InnerBox = styled.div`
+  width: 100%;
+  height: ${remcalc(36)};
+`;
+
+const Meta = (props) => (
+  <OuterBox {...props}>
+    <InnerBox>
+      {props.children}
+    </InnerBox>
+  </OuterBox>
+);
+
+Meta.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = Meta;

ui/src/components/mini-metric/subtitle.js

@@ -0,0 +1,26 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const Styled = require('styled-components');
+
+const {
+  remcalc
+} = fns;
+
+const {
+  colors
+} = constants;
+
+const {
+  default: styled
+} = Styled;
+
+module.exports = styled.p`
+  margin: 0;
+  text-align: right;
+  font-size: ${remcalc(12)};
+  line-height: ${remcalc(18)};
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  color: ${colors.regular};
+`;

ui/src/components/mini-metric/title.js

@@ -0,0 +1,26 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+module.exports = styled.h3`
+  margin: 0;
+  text-align: right;
+  font-size: ${remcalc(14)};
+  font-weight: 600;
+  font-style: normal;
+  line-height: 1.29;
+  color: ${colors.semibold};
+  margin-bottom: ${remcalc(3)} !important;
+`;

ui/src/components/mini-metric/view.js

@@ -0,0 +1,52 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const border = (props) => !props.borderless
+  ? `solid ${remcalc(1)} ${colors.borderSecondary}`
+  : 'none';
+
+const Container = styled.div`
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background-color: ${colors.miniBackground};
+  border: ${border};
+`;
+
+const Shadow = styled.div`
+  z-index: 1;
+  position: absolute;
+  height: 100%;
+  width: ${remcalc(9)};
+  left: 0;
+  top: 0;
+  background-image:
+    linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0));
+`;
+
+const View = (props) => (
+  <Container {...props}>
+    <Shadow />
+    {props.children}
+  </Container>
+);
+
+View.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = View;

ui/src/components/modal/story.js

@@ -0,0 +1,17 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base= require('../base');
+const Modal = require('./');
+
+storiesOf('Modal', module)
+  .add('Default', () => (
+    <Base>
+      <Modal>
+        <h2>This is the Modal</h2>
+      </Modal>
+    </Base>
+  ));

ui/src/components/notification/index.js

@@ -1,8 +1,9 @@
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
-const match = require('../../shared/match');
+const composers = require('../../shared/composers');
 const React = require('react');
 const Styled = require('styled-components');
+const Close = require('../close');
 
 const {
   colors
@@ -12,51 +13,58 @@ const {
   remcalc
 } = fns;
 
-const {
-  prop: matchProp
-} = match;
-
 const {
   default: styled
 } = Styled;
 
-const background = matchProp({
-  warning: colors.warningLight,
-  alert: colors.alertLight,
-}, 'transparent');
+const {
+  baseBox,
+  pseudoEl
+} = composers;
 
-const border = matchProp({
-  warning: colors.warning,
-  alert: 'red',
-}, 'none');
+const decorationWidth = remcalc(108);
 
 const StyledNotification = styled.div`
-  border-radius: 4px;
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
   display: inline-block;
-  height: 100%;
+  min-height: 100%;
+  position: relative;
+  width: 100%;
 
-  background-color: ${background('type')};
-  border: ${border('type')};
+  ${baseBox(0)}
+  
+  &::before {
+    background-color: ${props => colors[props.type] || colors.brandPrimary}
+    width: ${decorationWidth};
+    height: 100%;
+    
+    ${pseudoEl()}
+  }
 `;
 
 const StyledContent = styled.div`
   float: left;
-  padding: ${remcalc(20)};
+  padding: ${remcalc(18)} 20% ${remcalc(18)} ${remcalc(18)};
+  margin-left: ${decorationWidth};
+  width: 100%;
 `;
 
 const Notificaton = ({
   children,
   className,
   style,
-  type = ''
+  type,
+  close
 }) => {
+  const renderClose = close ? (<Close onClick={close} />) : null;
+
   return (
     <StyledNotification
       className={className}
       style={style}
       type={type}
     >
+      { renderClose  }
+
       <StyledContent>
         {children}
       </StyledContent>
@@ -67,8 +75,9 @@ const Notificaton = ({
 Notificaton.propTypes = {
   children: React.PropTypes.object,
   className: React.PropTypes.str,
+  close: React.PropTypes.func,
   style: React.PropTypes.object,
-  type: React.PropTypes.str
+  type: React.PropTypes.string
 };
 
 module.exports = Notificaton;

ui/src/components/notification/story.js

@@ -0,0 +1,34 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base= require('../base');
+const Notificaton = require('./');
+
+storiesOf('Notificaton', module)
+  .add('Default', () => (
+    <Base>
+      <Notificaton>
+        <span>This is the default content</span>
+      </Notificaton>
+    </Base>
+  ))
+  .add('Success', () => (
+    <Base>
+      <Notificaton
+        close={function noop() {}}
+        type="success"
+      >
+        <span>This is a success notification that is closable</span>
+      </Notificaton>
+    </Base>
+  ))
+  .add('Alert', () => (
+    <Base>
+      <Notificaton type="alert">
+        <span>This is the alert content</span>
+      </Notificaton>
+    </Base>
+  ));

ui/src/components/pagination/story.js

@@ -0,0 +1,20 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Pagination = require('./');
+
+storiesOf('Pagination', module)
+  .add('Default', () => (
+    <Pagination>
+      <a>
+        <span>&laquo;</span>
+        <span>Previous</span>
+      </a>
+      <a>1</a>
+      <a active>2</a>
+      <a>3</a>
+    </Pagination>
+  ));

ui/src/components/radio-group/story.js

@@ -0,0 +1,27 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base= require('../base');
+const RadioGroup = require('./');
+const Radio = require('./item');
+
+
+storiesOf('Radio Group', module)
+  .add('Default', () => (
+    <Base>
+      <RadioGroup>
+        <Radio name='hello' value='default'>
+          Video killed the radio star
+        </Radio>
+        <Radio name='hello' value='fancy'>
+          Video killed the radio star
+        </Radio>
+        <Radio name='hello' value='none'>
+          Video killed the radio star
+        </Radio>
+      </RadioGroup>
+    </Base>
+  ));

ui/src/components/radio/story.js

@@ -0,0 +1,20 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Radio = require('./');
+
+storiesOf('Radio', module)
+  .add('Default', () => (
+    <Radio>
+      Video killed the radio star
+    </Radio>
+  ))
+  .add('Checked', () => (
+    <Radio checked onChange={function noop() {}} />
+  ))
+  .add('Disabled', () => (
+    <Radio disabled />
+  ));

ui/src/components/range-slider/story.js

@@ -0,0 +1,12 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const RangeSlider = require('./');
+
+storiesOf('Range Slider', module)
+  .add('Default', () => (
+    <RangeSlider />
+  ));

ui/src/components/select-custom/story.js

@@ -0,0 +1,28 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const {
+  selectData
+} = require('../../shared/fake-data');
+
+const SelectCustom = require('./');
+
+storiesOf('Select Custom', module)
+  .add('Default', () => (
+    <SelectCustom
+      label="This is the label"
+      onChange={function noop() {}}
+      options={selectData}
+    />
+  ))
+  .add('Multiple', () => (
+    <SelectCustom
+      label="This is the label"
+      multi
+      onChange={function noop() {}}
+      options={selectData}
+    />
+  ));

ui/src/components/select/story.js

@@ -0,0 +1,26 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Select = require('./');
+
+storiesOf('Select', module)
+  .add('Default', () => (
+    <Select label='example select'>
+      <option>Apple</option>
+      <option>Banana</option>
+      <option>Pear</option>
+      <option>Orange</option>
+    </Select>
+  ))
+  .add('multiple', () => (
+    <Select label='example multiple select' multiple>
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </Select>
+  ));

ui/src/components/tabs/story.js

@@ -0,0 +1,23 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Tabs = require('./');
+const Tab = require('./tab');
+const Base = require('../base');
+
+storiesOf('Tabs', module)
+  .add('Default', () => (
+    <Base>
+      <Tabs name='my-tab-group'>
+        <Tab title='Your Dashboard'>
+          <h1>Containers</h1>
+        </Tab>
+        <Tab title='YLD'>
+          <h1>User</h1>
+        </Tab>
+      </Tabs>
+    </Base>
+  ));

ui/src/components/tabs/tab/index.js

@@ -10,7 +10,8 @@ const {
 } = composers;
 
 const {
-  boxes
+  boxes,
+  colors
 } = constants;
 
 const {
@@ -44,9 +45,8 @@ const StyledRadio = styled.input`
 
   &:checked {
     & + .${classNames.label} {
-      background: #FAFAFA;
+      background: ${colors.brandInactive};
       border-bottom-width: 0;
-      padding-bottom: ${remcalc(11)};
 
       ${moveZ({
         amount: 1
@@ -60,16 +60,12 @@ const StyledRadio = styled.input`
 `;
 
 const StyledLabel = styled.label`
-  background: #F2F2F2;
-  border: ${boxes.border.unchecked};
-  color: #646464;
+  background: transparent;
+  border: 1px solid #D8D8D8;
   display: inline-block;
   font-size: ${remcalc(20)};
-  left: 1px;
-  margin-left: -1px;
-  margin-bottom: 0;
-  padding: ${remcalc(10)};
-  position: relative;
+  padding: ${remcalc('12 25')};
+  margin-right: 0.5rem;
   vertical-align: bottom;
 `;
 
@@ -82,14 +78,15 @@ const StyledPanel = styled.div`
 `;
 
 const StyledContent = styled.div`
-  background: #FAFAFA;
+  background: ${colors.brandInactive};
   border: ${boxes.border.unchecked};
   box-sizing: border-box;
+  box-shadow: 0 -1px 26px 0 rgba(0, 0, 0, 0.2);
   display: block;
   float: left;
   font-size: ${remcalc(16)};
   margin-top: ${remcalc(-9)};
-  padding: ${remcalc('0 20')};
+  padding: ${remcalc('20 25')};
   width: 100%;
 `;
 

ui/src/components/textarea/index.js

@@ -0,0 +1,146 @@
+const React = require('react');
+
+const composers = require('../../shared/composers');
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const Styled = require('styled-components');
+
+const {
+  boxes,
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  baseBox
+} = composers;
+
+const {
+  default: styled
+} = Styled;
+
+const Label = styled.label`
+  color: ${props => props.error ? colors.alert : colors.fonts.regular}
+`;
+
+const InputField = styled.textarea`
+  background: ${colors.brandSecondary};
+  color: ${props => props.error ? colors.alert : colors.fonts.semibold}
+  display: block;
+  font-size: 16px;
+  padding: ${remcalc('15 18')};
+  visibility: visible;
+  width: 100%;
+  min-height: ${remcalc(96)};
+  ${baseBox()};
+  border-color: ${props => props.error ? colors.alert : ''};
+  
+  &:focus {
+    border-color: ${boxes.border.checked};
+    outline: none;
+  }
+`;
+
+const Error = styled.span`
+  float: right;
+  color: ${colors.alert};
+  font-size: ${remcalc(14)};
+`;
+
+const Textarea = ({
+  autoComplete,
+  autoFocus,
+  children,
+  className,
+  disabled = false,
+  error,
+  form,
+  id,
+  inputMode,
+  label,
+  labelledby,
+  list,
+  name,
+  onChange,
+  pattern,
+  placeholder,
+  readOnly,
+  required,
+  selectionDirection,
+  spellCheck,
+  style,
+  tabIndex,
+  type,
+  value
+}) => {
+  const _label = label || children;
+  const _children = label && children ? children : null;
+  const _error = error ? (<Error>{error}</Error>) : null;
+
+  return (
+    <div>
+      <Label
+        error={error}
+        htmlFor={id}
+      >
+        {_label}
+      </Label>
+      {_error}
+      <InputField
+        aria-labelledby={labelledby}
+        autoComplete={autoComplete}
+        autoFocus={autoFocus}
+        disabled={disabled}
+        error={error}
+        form={form}
+        id={id}
+        inputMode={inputMode}
+        list={list}
+        name={name}
+        onChange={onChange}
+        pattern={pattern}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        required={required}
+        selectionDirection={selectionDirection}
+        spellCheck={spellCheck}
+        tabIndex={tabIndex}
+        type={type}
+        value={value}
+      />
+      {_children}
+    </div>
+  );
+};
+
+Textarea.propTypes = {
+  autoComplete: React.PropTypes.string,
+  autoFocus: React.PropTypes.bool,
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  disabled: React.PropTypes.bool,
+  error: React.PropTypes.string,
+  form: React.PropTypes.string,
+  id: React.PropTypes.string,
+  inputMode: React.PropTypes.string,
+  label: React.PropTypes.string,
+  labelledby: React.PropTypes.string,
+  list: React.PropTypes.string,
+  name: React.PropTypes.string,
+  onChange: React.PropTypes.func,
+  pattern: React.PropTypes.string,
+  placeholder: React.PropTypes.string,
+  readOnly: React.PropTypes.bool,
+  required: React.PropTypes.bool,
+  selectionDirection: React.PropTypes.string,
+  spellCheck: React.PropTypes.bool,
+  style: React.PropTypes.object,
+  tabIndex: React.PropTypes.string,
+  type: React.PropTypes.string,
+  value: React.PropTypes.string
+};
+
+module.exports = Textarea;

ui/src/components/textarea/readme.md

@@ -0,0 +1,60 @@
+# Input
+
+## demo
+
+```embed
+const  React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Input = require('./index.js');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column>
+        <Input
+          placeholder='Enter email'
+          label='Email Address'
+          type='email'
+        >
+          <small>We'll never share your email with anyone else.</small>
+        </Input>
+      </Column>
+    </Row>
+    <Row>
+      <Column>
+        <Input placeholder='Password' type='password'>
+          Password
+        </Input>
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Input = require('ui/input');
+
+module.exports = () => {
+  return (
+    <div>
+      <Input
+        placeholder='Enter email'
+        label='Email Address'
+        type='email'
+      >
+        <small>We'll never share your email with anyone else.</small>
+      </Input>
+      <Input placeholder='Password' type='password'>
+        Password
+      </Input>
+    </div>
+  );
+}
+```

ui/src/components/textarea/story.js

@@ -0,0 +1,24 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base= require('../base');
+const Textarea = require('./');
+
+storiesOf('Textarea', module)
+  .add('Default', () => (
+    <Base>
+      <Textarea placeholder="I am the placeholder" />
+    </Base>
+  ))
+  .add('Error', () => (
+    <Base>
+      <Textarea
+        error="Somethings missing"
+        placeholder="There was an error"
+        value="alexw/makeusproud.com"
+      />
+    </Base>
+  ));

ui/src/components/toggle/index.js

@@ -5,13 +5,11 @@ const React = require('react');
 const Styled = require('styled-components');
 
 const {
-  boxes,
-  colors,
-  typography
+  colors
 } = constants;
 
 const {
-  pseudoEl
+  baseBox
 } = composers;
 
 const {
@@ -20,100 +18,125 @@ const {
 } = fns;
 
 const {
-  default: styled
+  default: styled,
+  css
 } = Styled;
 
-const classNames = {
-  label: rndId()
-};
-
-const StyledLabel = styled.label`
-  border-radius: ${boxes.borderRadius};
-  color: #464646;
-  height: 2.5rem;
-  width: ${remcalc(110)};
+const StyledText = styled.span`
+  padding: 1rem;
+  display: inline-block;
 `;
 
-const StyledToggleLabel = styled.div`
-  background-color: #E6E6E6;
-  border: solid 1px #D8D8D8;
-  border-radius: ${boxes.borderRadius};
-  color: #000000;
-  height: ${remcalc(54)};
-  margin: 0.125rem;
-  padding-left: ${remcalc(12)};
-  position: relative;
-  text-align: right;
-  width: ${remcalc(106)};
-
-  &::before {
-    content: "Off";
-    font-family: ${typography.fontPrimary};
-    font-size: inherit;
-    font-weight: bold;
-    position: absolute;
-    right: 24px;
-    top: 19px;
-  }
-
-  &::after {
-    background-color: #FFFFFF;
-    border-radius: ${boxes.borderRadius};
-    height: ${remcalc(46)};
-    width: ${remcalc(46)};
-
-    ${pseudoEl({
-      top: '3px',
-      left: '3px',
-    })}
-  }
+const StyledDiv = styled.div`
+  display: inline-block;
+  background-color: ${colors.brandInactive};
+  
+  ${baseBox()}
 `;
 
-const StyledInput = styled.input`
+const inputStyled = css`
+  background-size: 200% 100%;
+  transition:all .5s ease;
+  min-width: ${remcalc(120)};
+  text-align: center;
+`;
+
+
+const StyledInput0 = styled.input`
   display: none;
 
+  & + span {
+    background: linear-gradient(to right, 
+                transparent 50%, 
+                ${colors.brandSecondary} 50%);
+    background-position: left bottom;
+    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
+    
+    ${inputStyled}
+  }
+  
   &:checked {
-    & + .${classNames.label} {
-      background: ${colors.confirmation};
-      border: ${boxes.border.confirmed};
-      color: #FFFFFF;
-      padding-left: 0;
-      padding-right: ${remcalc(12)};
-      text-align: left;
-
-      &::before {
-        content: "On";
-        left: 20px;
-        right: auto;
-      }
-
-      &::after {
-        left: auto;
-        right: 3px;
-      }
+      
+    & + span {
+      background-position: right bottom;
     }
   }
 `;
 
+const StyledInput1 = styled.input`
+  display: none;
+
+  & + span { 
+    background: linear-gradient(to right, 
+                ${colors.brandSecondary} 50%, 
+                transparent 50%);
+    background-position: right bottom;
+    
+    ${inputStyled}
+  }
+  
+  &:checked {
+      
+    & + span {
+      background-position: left bottom;
+    }
+  }
+`;
+
+/*
+TODO: Remove !important - it is used to overirde a global style
+ */
+const StyledLabel = styled.label`
+  margin-bottom: 0 !important;
+`;
+
 const Toggle = ({
   checked,
   className,
   defaultChecked,
+  options = [
+    {
+      label: 'On',
+      checked: true
+    },
+    {
+      label: 'Off',
+      checked: false
+    }
+  ],
   id = rndId(),
   style
 }) => {
   return (
-    <StyledLabel
-      className={className}
-      htmlFor={id}
-      style={style}
-    >
-      <StyledInput
-        id={id}
-        type='checkbox'
-      />
-      <StyledToggleLabel className={classNames.label} />
-    </StyledLabel>
+    <StyledDiv>
+      {options.map( (option, index) => {
+
+        if ( index >= 2 ) return;
+
+        const customProps = {
+          defaultChecked: option.checked,
+          name: 'toggler',
+          type: 'radio',
+          value: option.label,
+          id: rndId()
+        };
+
+        const InputVarients = {
+          input_0: (<StyledInput0 {...customProps} />),
+          input_1: (<StyledInput1 {...customProps} />)
+        };
+
+        return (
+          <StyledLabel
+            htmlFor={customProps.id}
+            key={index}
+          >
+            {InputVarients[`input_${index}`]}
+            <StyledText>{option.label}</StyledText>
+          </StyledLabel>
+        );
+      })}
+    </StyledDiv>
   );
 };
 
@@ -122,6 +145,7 @@ Toggle.propTypes = {
   className: React.PropTypes.string,
   defaultChecked: React.PropTypes.bool,
   id: React.PropTypes.string,
+  options: React.PropTypes.array,
   style: React.PropTypes.object
 };
 

ui/src/components/toggle/readme.md

@@ -16,7 +16,11 @@ nmodule.exports = ReactDOM.renderToString(
   <Base>  
     <Row>
       <Column>
-        <Toggle checked />
+        <Toggle 
+          checked 
+          labelLeft='Topology' 
+          lavelRight='List'
+        />
       </Column>
     </Row>
   </Base>

ui/src/components/toggle/story.js

@@ -0,0 +1,37 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base = require('../base');
+const Toggle = require('./');
+
+storiesOf('Toggle', module)
+  .add('default', () => (
+    <Base>
+      <Toggle checked />
+    </Base>
+  ))
+  .add('checked', () => (
+    <Base>
+      <Toggle
+        defaultChecked
+        options={[
+          {
+            label: 'Topology',
+            checked: true
+          },
+          {
+            label: 'List',
+            checked: false
+          }
+        ]}
+      />
+    </Base>
+  ))
+  .add('no props', () => (
+    <Base>
+      <Toggle />
+    </Base>
+  ));

ui/src/components/tooltip/story.js

@@ -0,0 +1,29 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Tooltip = require('./');
+
+storiesOf('Tooltip', module)
+  .add('default', () => (
+    <Tooltip>
+      <li>One</li>
+      <li>Two</li>
+      <li>Three</li>
+    </Tooltip>
+  ))
+  .add('custom position', () => {
+    const arrowPosition = {
+      left: '90%',
+      bottom: '100%'
+    };
+    return (
+      <Tooltip arrowPosition={arrowPosition}>
+        <li>One</li>
+        <li>Two</li>
+        <li>Three</li>
+      </Tooltip>
+    );
+  });

ui/src/components/topology/story.js

@@ -1,4 +1,13 @@
-module.exports = {
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base = require('../base');
+const Topology = require('./');
+const TopologyView = require('./view');
+const services = {
   nodes: [
     {
       id: 'Nginx',
@@ -130,3 +139,16 @@ module.exports = {
     }
   ]
 };
+
+storiesOf('Topology', module)
+  .add('5 services', () => (
+    <Base>
+      <TopologyView>
+        <Topology
+          graph={services}
+          height={500}
+          width={500}
+        />
+      </TopologyView>
+    </Base>
+  ));

ui/src/components/widget/story.js

@@ -0,0 +1,24 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Widget = require('./');
+
+storiesOf('Widget', module)
+  .add('single', () => (
+    <Widget
+      checked
+      name='flag'
+      selectable='single'
+      value='flag_1'
+    >
+      <img
+        alt='england flag'
+        // eslint-disable-next-line max-len
+        src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png'
+      />
+      <p>Some text</p>
+    </Widget>
+  ));

ui/src/index.js

@@ -1,10 +1,13 @@
 module.exports = {
-  Avatar: require('./components/avatar'),
   Base: require('./components/base'),
+  AddMetric: require('./components/add-metric'),
+  Anchor: require('./components/anchor'),
+  Avatar: require('./components/avatar'),
   Button: require('./components/button'),
   Checkbox: require('./components/checkbox'),
   Column: require('./components/column'),
   Container: require('./components/container'),
+  Close: require('./components/close'),
   Input: require('./components/input'),
   List: require('./components/list'),
   Modal: require('./components/modal'),
@@ -22,5 +25,6 @@ module.exports = {
   Toggle: require('./components/toggle'),
   Topology: require('./components/topology'),
   Tooltip: require('./components/tooltip'),
+  Textarea: require('./components/textarea'),
   Widget: require('./components/widget'),
 };

ui/src/shared/assets/close.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+    <title>icon: close</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ui-components-revised" transform="translate(-3367.000000, -870.000000)" fill="#646464">
+            <g id="notifications" transform="translate(2457.000000, 72.000000)">
+                <g id="notification:-error" transform="translate(0.000000, 780.000000)">
+                    <path d="M916.899495,22.8994949 L916.899495,16.8994949 L914.899495,16.8994949 L914.899495,22.8994949 L908.899495,22.8994949 L908.899495,24.8994949 L914.899495,24.8994949 L914.899495,30.8994949 L916.899495,30.8994949 L916.899495,24.8994949 L922.899495,24.8994949 L922.899495,22.8994949 L916.899495,22.8994949 Z" id="icon:-close" transform="translate(915.899495, 23.899495) rotate(45.000000) translate(-915.899495, -23.899495) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

ui/src/shared/assets/input-confirm.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<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">
+    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+    <title>icon: confirmation</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <circle id="path-1" cx="9" cy="9" r="9"></circle>
+        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="18" height="18" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ui-components-revised" transform="translate(-1145.000000, -1341.000000)">
+            <g id="single-field-line" transform="translate(801.000000, 45.000000)">
+                <g id="text-field-+-confirmation" transform="translate(0.000000, 1254.000000)">
+                    <g id="icon:-confirmation" transform="translate(344.000000, 42.000000)">
+                        <use id="Oval" stroke="#00AF66" mask="url(#mask-2)" stroke-width="4" xlink:href="#path-1"></use>
+                        <polygon id="tick" fill="#00AF66" points="12.017 5.00007 8.121 10.33607 6.634 8.22707 5 9.37907 8.091 13.76807 13.632 6.17907"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

ui/src/shared/constants/boxes.js

@@ -3,6 +3,7 @@ const colors = require('./colors');
 const boxes = {
   borderRadius: '4px',
   bottomShaddow: '0 2px 0 0 rgba(0, 0, 0, 0.05)',
+  bottomShaddowDarker: '0 2px 0 0 rgba(0, 0, 0, 0.1)',
   insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)',
   border: {
     checked: `1px solid ${colors.brandPrimary}`,

ui/src/shared/constants/colors.js

@@ -10,7 +10,8 @@ const brandPrimary = {
   borderPrimary: '#2531BC',
   borderPrimaryDark: '#2531BC',
   borderPrimaryDarkest: '#062BA0',
-  brandPrimaryColor: '#FFFFFF'
+  brandPrimaryColor: '#FFFFFF',
+  brandPrimaryLink: '#364acd'
 };
 
 const brandSecondary = {
@@ -20,7 +21,8 @@ const brandSecondary = {
   borderSecondary: '#D8D8D8',
   borderSecondaryDark: '#D8D8D8',
   borderSecondaryDarkest: '#D8D8D8',
-  brandSecondaryColor: '#464646'
+  brandSecondaryColor: '#464646',
+  brandSecondaryLink: '#ffffff'
 };
 
 const brandInactive = {
@@ -33,6 +35,7 @@ const notifications = {
   alert: '#DA4B42',
   alertLight: '#FFC7C7',
   confirmation: '#00AF66',
+  success: '#00AF66',
   warning: '#E4A800',
   warningLight: '#FFFAED',
 };
@@ -52,8 +55,8 @@ const colors = {
   ...brandInactive,
   ...notifications,
   ...metrics,
-  ...fonts,
-  ...topology
+  ...topology,
+  fonts,
 };
 
 module.exports = colors;

ui/src/shared/constants/index.js

@@ -6,7 +6,6 @@ const boxes = require('./boxes');
 const typography = require('./typography');
 const sizes = require('./sizes');
 const breakpoints = require('./breakpoints');
-const links = require('./links');
 
 const tables = {
   bg: 'transparent',
@@ -21,7 +20,6 @@ const constants = traverse({
   colors,
   boxes,
   forms,
-  links,
   sizes,
   tables,
   typography

ui/src/shared/constants/links.js

@@ -1,14 +0,0 @@
-const Color = require('color');
-
-const links = {
-  color: '#364ACD',
-  decoration: 'none',
-  hoverColor: ({
-    color
-  }) => {
-    return Color(color).darken(0.15).hex();
-  },
-  hoverDecoration: 'underline'
-};
-
-module.exports = links;

ui/src/shared/constants/typography.js

@@ -1,8 +1,6 @@
 const colors = require('./colors');
 
 const typography = {
-  fontPrimary: 'sans serif',
-  dtFontWeight: 'bold',
   abbrBorderColor: colors.brandSecondary,
   textMuted: colors.brandSecondary
 };

ui/src/shared/fake-data/index.js

@@ -25,6 +25,10 @@ const selectData = [
   }
 ];
 
+// eslint-disable-next-line max-len
+const profile = 'https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg';
+
 module.exports = {
+  profile,
   selectData
 };

ui/src/shared/fonts/librefranklin-webfont.svg

@@ -0,0 +1,475 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+<metadata></metadata>
+<defs>
+<font id="libre_franklinregular" horiz-adv-x="1226" >
+<font-face units-per-em="2048" ascent="1638" descent="-410" />
+<missing-glyph horiz-adv-x="440" />
+<glyph unicode="&#xfb01;" horiz-adv-x="1263" d="M49 977v88q0 20 23 20h194q18 0 19 21v149q0 264 256 265h170q27 0 26 -25v-80q0 -20 -22 -20h-144q-119 0 -118 -148v-143q0 -18 18 -19h236q20 0 20 -20v-88q0 -18 -20 -19h-234q-16 0 -16 -18v-911q0 -29 -25 -29h-125q-23 0 -22 27v915q0 16 -15 16h-200 q-20 0 -21 19zM928 1315v172q0 33 28 33h129q12 0 20.5 -8.5t8.5 -22.5v-170q0 -20 -8 -29.5t-29 -9.5h-119q-31 0 -30 35zM934 29v1028q0 29 24 28h125q23 0 23 -26v-1024q0 -20 -8.5 -27.5t-28.5 -7.5h-105q-18 0 -24 6t-6 23z" />
+<glyph unicode="&#xfb02;" horiz-adv-x="1265" d="M49 977v88q0 20 23 20h194q18 0 19 21v149q0 264 256 265h170q27 0 26 -25v-80q0 -20 -22 -20h-144q-119 0 -118 -148v-143q0 -18 18 -19h236q20 0 20 -20v-88q0 -18 -20 -19h-234q-16 0 -16 -18v-911q0 -29 -25 -29h-125q-23 0 -22 27v915q0 16 -15 16h-200 q-20 0 -21 19zM934 29l2 1462q0 29 24 29h123q25 0 25 -27v-1458q0 -20 -8.5 -27.5t-28.5 -7.5h-107q-18 0 -24 6t-6 23z" />
+<glyph horiz-adv-x="0" />
+<glyph horiz-adv-x="0" />
+<glyph unicode="&#xd;" horiz-adv-x="438" />
+<glyph unicode=" "  horiz-adv-x="440" />
+<glyph unicode="&#x09;" horiz-adv-x="440" />
+<glyph unicode="&#xa0;" horiz-adv-x="440" />
+<glyph unicode="!" horiz-adv-x="499" d="M143 29v174q0 25 21 24h170q20 0 20 -22v-172q0 -18 -8 -25.5t-31 -7.5h-141q-16 0 -23.5 6t-7.5 23zM147 1497v4q0 18 19 19h168q10 0 15 -6.5t3 -14.5l-43 -1102q0 -29 -33 -28h-59q-27 0 -27 24z" />
+<glyph unicode="&#x22;" horiz-adv-x="837" d="M141 1499v4q0 16 19 17h176q20 0 18 -21l-51 -422q-4 -16 -10 -22t-25 -6h-49q-14 0 -19 5t-7 19zM487 1499v4q0 16 19 17h176q20 0 18 -21l-51 -422q-4 -16 -10 -22t-25 -6h-49q-14 0 -19 5t-7 19z" />
+<glyph unicode="#" horiz-adv-x="1234" d="M70 520v64q0 23 18 22h246l49 320h-219q-27 0 -27 24v64q0 23 19 22h243l70 461q8 25 20 23l70 -11q12 -2 17.5 -7t3.5 -19l-68 -447h315l70 461q2 10 7 17.5t14 5.5l69 -11q12 -2 17.5 -7t3.5 -19l-68 -447h205q20 0 20 -20v-62q0 -29 -32 -28h-209l-50 -320h203 q20 0 21 -20v-62q0 -29 -33 -28h-207l-72 -467q-4 -18 -10 -24.5t-20 -4.5l-58 8q-14 4 -20 8t-4 15l71 465h-315l-72 -467q-4 -18 -10 -24.5t-20 -4.5l-58 8q-14 4 -20 8t-4 15l71 465h-221q-27 0 -26 24zM446 606h316l49 320h-315z" />
+<glyph unicode="$" horiz-adv-x="1239" d="M70 240q0 10 10 16l67 63q14 10 23 11q10 0 20 -11q74 -94 160 -141t211 -51h6q14 0 15 16v502q0 18 -10.5 28.5t-30.5 20.5q-158 57 -249 116.5t-131 133.5t-40 176q0 166 118.5 276.5t317.5 133.5q8 2 15.5 8t7.5 14v101q0 8 5 14t13 6h82q14 0 19.5 -6t5.5 -22v-99 q0 -16 20 -16q115 -14 206 -59.5t171 -120.5q10 -6 10 -19q0 -10 -8 -18l-72 -74q-10 -10 -16 -10t-23 16q-41 51 -112.5 88t-155.5 51h-4q-16 0 -16 -16v-514q0 -12 5 -18.5t19 -10.5l78 -26q354 -137 354 -422q0 -109 -54 -197t-151.5 -140t-224.5 -56q-14 0 -19 -4.5 t-5 -16.5v-115q0 -29 -29 -28h-72q-27 0 -26 22v123q0 12 -3.5 15.5t-13.5 3.5q-166 2 -278.5 58t-200.5 169q-14 18 -14 29zM285 1133q0 -80 56 -139.5t198 -119.5q6 -2 16 -2q25 0 25 31v467q0 10 -6.5 15.5t-16.5 3.5q-125 -14 -198.5 -84t-73.5 -172zM707 139 q0 -14 18 -12q123 2 197.5 69.5t74.5 168.5q0 94 -60 156.5t-200 115.5q-6 2 -14 2q-16 0 -16 -21v-479z" />
+<glyph unicode="%" horiz-adv-x="1875" d="M113 1108q0 131 46 229.5t127 151.5t183 53t182 -53t125 -151.5t45 -229.5q0 -133 -45 -231.5t-125 -150.5t-182 -52q-104 0 -185 52t-126 150.5t-45 231.5zM248 1106q0 -150 58.5 -241t160.5 -91t160.5 91t58.5 241q0 154 -58.5 246t-160.5 92t-160.5 -93.5 t-58.5 -244.5zM389 10q0 12 6 21l991 1491q6 10 15.5 12t17.5 2h68q27 0 12 -23l-995 -1503q-8 -10 -16.5 -14t-22.5 -4h-53q-23 0 -23 18zM1055 414q0 131 46 229t127 151.5t183 53.5t182 -53.5t125 -151.5t45 -229q0 -133 -45 -231.5t-125 -150.5t-182 -52q-104 0 -185 52 t-126 150.5t-45 231.5zM1190 412q0 -145 59.5 -238.5t159.5 -93.5t159.5 92t59.5 240q0 150 -60.5 244t-158.5 94t-158.5 -95.5t-60.5 -242.5z" />
+<glyph unicode="&#x26;" horiz-adv-x="1593" d="M82 387q0 123 73.5 225.5t239.5 200.5q20 12 21 23q0 10 -17 28q-137 147 -137 301q0 106 56.5 192.5t154.5 135.5t219 49q168 0 276.5 -84t108.5 -223q0 -117 -89 -223.5t-271 -186.5q-16 -8 -17 -16q0 -8 11 -18l319 -373q10 -12 14 -12t10.5 6t10.5 10 q72 68 153.5 186.5t106.5 190.5q8 23 35 14l82 -29q10 -4 15 -14t3 -20q-31 -86 -113.5 -208t-181.5 -229q-10 -10 -10 -16q0 -4 6 -10l8 -8q57 -51 154.5 -88t187.5 -39q31 0 31 -27v-88q0 -20 -8 -28.5t-29 -8.5q-117 0 -251 49t-222 117q-12 8 -18 8q-4 0 -19 -10 q-203 -174 -458 -174q-211 0 -333 107.5t-122 289.5zM268 395q0 -117 85 -192.5t214 -75.5q84 0 170 36t150 93q16 16 16 27q0 8 -10 22l-342 397q-15 19 -31 19q-12 0 -26 -8q-104 -53 -165 -136t-61 -182zM442 1174q0 -98 84 -191l56 -61q6 -8 18 -9q6 0 18 5 q156 74 225.5 148.5t69.5 164.5q0 92 -60 140t-157 48q-114 0 -184 -71.5t-70 -173.5z" />
+<glyph unicode="'" horiz-adv-x="491" d="M141 1499v4q0 16 19 17h176q20 0 18 -21l-51 -422q-4 -16 -10 -22t-25 -6h-49q-14 0 -19 5t-7 19z" />
+<glyph unicode="(" horiz-adv-x="585" d="M139 584q0 246 78 482.5t211 436.5q12 16 33 17h69q13 0 16 -6.5t-1 -12.5q-109 -215 -173.5 -451.5t-64.5 -467.5q0 -225 55.5 -443.5t165.5 -455.5q2 -2 2 -9q0 -12 -16 -12h-76q-16 0 -24 14q-137 236 -206 448t-69 460z" />
+<glyph unicode=")" horiz-adv-x="585" d="M39 1509q0 10 14 11h70q23 0 35 -17q133 -201 210.5 -437.5t77.5 -481.5q0 -248 -68.5 -460t-205.5 -448q-12 -14 -25 -14h-75q-12 0 -15.5 6t0.5 15q111 236 165 453.5t54 445.5q0 233 -63 468.5t-172 450.5q-2 2 -2 8z" />
+<glyph unicode="*" horiz-adv-x="778" d="M59 1241l27 76q6 16 23 8l225 -90q16 -6 16 10l-18 258q0 6 5 11.5t13 5.5h96q16 0 17 -17l-17 -258q0 -16 13 -10l231 98q4 2 10 2q10 0 13 -12l22 -72q2 -4 2 -12t-12 -12l-233 -78q-10 -2 -5 -16l168 -205q4 -4 4 -15q0 -8 -12 -18l-65 -45q-8 -6 -17.5 -6t-13.5 6 l-148 235q-2 4 -5 4.5t-5 -4.5l-153 -243q-2 -6 -10.5 -6t-16.5 4l-72 49q-8 6 -8 11t6 15l174 218q4 14 -8 16l-237 68q-14 6 -9 24z" />
+<glyph unicode="+" horiz-adv-x="1140" d="M127 719v88q0 25 18 24h359v351q0 14 5 20t17 6h88q25 0 25 -18v-359h356q21 0 21 -20v-88q0 -27 -33 -27h-342v-356q0 -20 -20 -21h-89q-29 0 -28 33v342h-350q-27 0 -27 25z" />
+<glyph unicode="," horiz-adv-x="434" d="M92 -262l92 229q6 12 6 19q0 14 -22 14h-27q-27 0 -26 25v182q0 23 20 22h170q20 0 21 -20v-168q0 -14 -7 -25l-149 -286q-12 -23 -41 -23h-23q-10 0 -14 8.5t0 22.5z" />
+<glyph unicode="-" horiz-adv-x="780" d="M127 498v90q0 23 18 22l488 2q20 0 20 -20v-90q0 -29 -35 -29h-464q-14 0 -20.5 5t-6.5 20z" />
+<glyph unicode="." horiz-adv-x="428" d="M106 29v176q0 27 23 26h168q20 0 20 -24v-174q0 -18 -8 -25.5t-28 -7.5h-144q-16 0 -23.5 6t-7.5 23z" />
+<glyph unicode="/" horiz-adv-x="700" d="M27 -72l512 1573q6 18 26 19h90q20 0 21 -15q0 -6 -4 -18l-504 -1550q-8 -27 -37 -27h-88q-24 0 -16 18z" />
+<glyph unicode="0" horiz-adv-x="1409" d="M135 754q0 248 74 426t204 269t294 91q163 0 291 -91t202 -268t74 -425q0 -246 -74 -421t-202 -264t-293 -89q-166 0 -295 89t-202 263t-73 420zM336 756q0 -319 98 -472t273 -153q366 0 366 625q0 326 -97 480.5t-271 154.5t-271.5 -156t-97.5 -479z" />
+<glyph unicode="1" horiz-adv-x="952" d="M100 1239v82q0 14 4.5 19.5t16.5 11.5l303 151q35 16 61 17h88q23 0 23 -25v-1325q0 -14 12 -14h236q22 -1 22 -21v-115q0 -8 -6 -14t-16 -6h-719q-23 0 -23 20v115q0 20 23 21h258q16 0 16 10v1126q0 23 -18 17l-254 -95q-2 0 -4 -1t-4 1q-18 0 -19 25z" />
+<glyph unicode="2" d="M100 33v84q0 23 10.5 39t45.5 47l436 434q176 166 243.5 269.5t67.5 213.5q0 125 -90 195.5t-213 70.5q-96 0 -190.5 -49t-159.5 -153q-6 -10 -21 -10q-8 0 -20 6l-90 53q-16 10 -17 24q0 10 9 21q90 131 222 196.5t283 65.5q131 0 240 -48t173.5 -144.5t64.5 -233.5 q0 -133 -73 -247.5t-257 -288.5l-412 -388q-10 -6 -10 -14q0 -10 23 -10h718q14 0 20.5 -5t6.5 -18v-118q0 -25 -27 -25h-950q-18 0 -25.5 7t-7.5 26z" />
+<glyph unicode="3" horiz-adv-x="1312" d="M86 213q0 10 12 18l88 70q14 10 19 10q8 0 14 -10q90 -94 183.5 -133t215.5 -39q176 0 276.5 78t100.5 207q0 94 -54 163.5t-142 104.5t-189 35l-182 2q-25 0 -25 20v107q0 16 25 20l147 2q104 0 190.5 37t135.5 100.5t49 141.5q0 68 -41 124t-113.5 89t-162.5 33 q-203 0 -367 -158q-10 -10 -18 -10q-4 0 -19 10l-71 72q-6 6 -6 14t6 16q188 203 473 203q154 0 270.5 -50t179 -137t62.5 -198t-68.5 -200t-191.5 -132q-23 -6 -23 -14q0 -4 23 -14q133 -37 220 -136.5t87 -238.5q0 -129 -66.5 -228.5t-197.5 -155.5t-322 -56 q-313 0 -512 217q-6 10 -6 16z" />
+<glyph unicode="4" horiz-adv-x="1329" d="M92 434v105q0 12 9.5 29.5t23.5 37.5l666 893q12 12 22 16.5t29 4.5h137q25 0 25 -25v-922q0 -18 16 -18h192q29 0 29 -20v-101q0 -27 -29 -26h-190q-18 0 -18 -21v-356q0 -31 -33 -31h-140q-27 0 -26 27v366q0 14 -19 15h-663q-31 0 -31 26zM266 567q0 -12 21 -12h495 q8 0 13.5 4t5.5 10v684q0 25 -8 25q-4 0 -21 -16l-500 -680q-6 -8 -6 -15z" />
+<glyph unicode="5" horiz-adv-x="1339" d="M102 213q0 12 15 20l88 72q6 6 12 6q10 0 23 -12q96 -90 176 -131t200 -41q193 0 304.5 100.5t111.5 264.5q0 156 -98 238.5t-250 82.5q-96 0 -176 -31.5t-176 -89.5q-14 -8 -19 -8q-2 0 -18 10l-100 58q-8 4 -13.5 8t-5.5 10l4 27l56 694q2 18 8 23.5t37 5.5h833 q20 0 26.5 -6.5t4.5 -22.5l-8 -113q-2 -14 -6.5 -18t-22.5 -4h-696q-25 0 -25 -23l-37 -444v-4q0 -14 7.5 -19.5t17.5 -1.5q98 51 169.5 75t170.5 24q141 0 256.5 -51.5t184.5 -156t69 -257.5q0 -160 -75 -278t-207 -179t-302 -61q-158 0 -296 55t-232 158q-10 14 -11 20z " />
+<glyph unicode="6" horiz-adv-x="1353" d="M135 737q0 248 75 428.5t215 276.5t331 96q141 0 241.5 -56.5t157.5 -142.5q6 -12 6 -16q0 -10 -12 -16l-117 -47q-4 -2 -10 -3q-12 0 -21 15q-49 59 -105 89t-138 30q-213 0 -320.5 -150.5t-107.5 -396.5q0 -27 3 -37t13 -10q8 0 21 6q104 51 187 77.5t191 26.5 q154 0 266.5 -57t172 -158.5t59.5 -228.5q0 -141 -69.5 -251t-190.5 -170t-268 -60q-178 0 -309.5 89t-201 260t-69.5 406zM334 582q0 -104 43 -210t129 -176.5t209 -70.5q94 0 170 44t120 120t44 166q0 133 -89.5 221t-236.5 88q-84 0 -184.5 -27.5t-163.5 -66.5 q-25 -16 -33 -34t-8 -54z" />
+<glyph unicode="7" d="M86 1380l12 119q2 12 8.5 16.5t22.5 4.5h977q16 0 24.5 -7.5t6.5 -17.5l-2 -74q0 -31 -29 -73q-129 -193 -249 -446t-202 -487.5t-102 -375.5q-2 -39 -31 -39h-162q-16 0 -22 9t-2 26q66 266 211 605t368 687q6 10 7 19q0 10 -21 10h-792q-25 0 -23 24z" />
+<glyph unicode="8" horiz-adv-x="1368" d="M125 377q0 109 54 195.5t179 164.5q27 16 27 25q0 8 -25 20q-195 109 -194 318q0 123 65.5 223t183 158.5t267.5 58.5q147 0 261 -52t177.5 -147.5t63.5 -218.5q0 -96 -49.5 -172t-157.5 -151q-16 -12 -16 -19q0 -8 14 -14q276 -109 276 -363q0 -129 -71.5 -224 t-201.5 -147t-302 -52q-256 0 -403.5 104t-147.5 293zM299 399q0 -131 99.5 -203.5t287.5 -72.5q170 0 270.5 73.5t100.5 198.5q0 96 -51.5 154.5t-165.5 87.5l-267 63q-6 2 -18 2q-45 0 -106.5 -40.5t-105.5 -110.5t-44 -152zM352 1116q0 -186 211 -233l211 -49 q39 -10 95.5 31.5t98.5 114.5t42 144q0 121 -88 197t-238 76q-92 0 -169 -37t-120 -100.5t-43 -143.5z" />
+<glyph unicode="9" horiz-adv-x="1347" d="M113 1059q0 139 69.5 248.5t190.5 170t268 60.5q176 0 304 -90t197.5 -260t69.5 -406q0 -248 -73.5 -428t-213 -276t-327.5 -96q-145 0 -248.5 56t-163.5 142q-6 12 -6 17q0 10 13 16l116 47l8 2q12 0 23 -14q49 -57 109.5 -88t148.5 -31q207 0 312.5 150.5t105.5 396.5 q0 27 -3 37t-12 10q-8 0 -20 -6q-102 -51 -184 -78t-191 -27q-152 0 -263.5 57.5t-170.5 159t-59 230.5zM307 1065q0 -86 40 -156.5t112.5 -111.5t169.5 -41q86 0 185 29.5t161 74.5q25 16 33 33.5t8 54.5q0 102 -42 205.5t-127 172.5t-206 69q-94 0 -170 -43t-120 -119 t-44 -168z" />
+<glyph unicode=":" horiz-adv-x="428" d="M106 35v174q0 25 23 24h168q20 0 20 -22v-172q0 -33 -36 -33h-144q-31 0 -31 29zM106 840v172q0 27 23 26h168q20 0 20 -22v-174q0 -33 -36 -33h-144q-31 0 -31 31z" />
+<glyph unicode=";" horiz-adv-x="468" d="M92 -266l92 233l4 19q0 14 -20 14h-27q-27 0 -26 25v182q0 23 20 22h170q20 0 21 -20v-168q0 -14 -7 -25l-149 -288q-12 -23 -41 -23h-23q-10 0 -14 8t0 21zM106 836v174q0 27 23 26h168q20 0 20 -22v-176q0 -16 -8 -23.5t-28 -7.5h-144q-16 0 -23.5 6t-7.5 23z" />
+<glyph unicode="&#x3c;" horiz-adv-x="1114" d="M109 670v114q0 25 28 35l797 316q8 4 20 4q25 0 25 -31v-92q0 -16 -10.5 -25.5t-34.5 -21.5l-617 -242l617 -242q25 -10 34 -19t9 -28v-84q0 -35 -27 -35q-6 0 -18 5l-795 311q-29 14 -28 35z" />
+<glyph unicode="=" horiz-adv-x="1140" d="M127 459v88q0 25 18 24h850q20 0 21 -18v-88q0 -29 -33 -29l-829 -2q-27 0 -27 25zM127 922v88q0 23 18 22l850 2q20 0 21 -20v-88q0 -27 -33 -27l-829 -2q-27 0 -27 25z" />
+<glyph unicode="&#x3e;" horiz-adv-x="1114" d="M135 1016v92q0 31 25 31q12 0 20 -4l797 -316q29 -10 29 -35v-114q0 -20 -29 -35l-795 -311q-12 -4 -18 -5q-27 0 -27 35v84q0 19 9.5 28t33.5 19l617 242l-617 242q-25 12 -35 21t-10 26z" />
+<glyph unicode="?" horiz-adv-x="1071" d="M57 1249q-2 8 2 17q66 129 194 201.5t290 72.5q137 0 241.5 -46t160.5 -130t56 -190q0 -82 -28.5 -149t-70.5 -118t-111 -123q-70 -70 -112 -121t-70.5 -117.5t-28.5 -146.5q0 -10 -7.5 -17t-17.5 -7h-98q-27 0 -27 28q0 96 31 175t74 136.5t114 135.5q90 98 132 164.5 t42 152.5q0 109 -77.5 173.5t-204.5 64.5q-102 0 -198.5 -55.5t-131.5 -137.5q-4 -10 -9 -12t-16 2l-116 37q-11 2 -13 10zM399 29v174q0 25 21 24h170q20 0 20 -22v-172q0 -18 -8 -25.5t-31 -7.5h-143q-29 0 -29 29z" />
+<glyph unicode="@" horiz-adv-x="1708" d="M98 535q0 221 103.5 408t291 299t427.5 112q186 0 352 -72t269.5 -220.5t103.5 -367.5q0 -154 -51.5 -273.5t-142.5 -187t-204 -67.5q-80 0 -124 26.5t-60 81.5q-6 14 -10 15q-2 0 -13 -13q-106 -139 -286 -139q-78 0 -143.5 44t-104.5 126t-39 187q0 129 50 239.5 t140.5 175t204.5 64.5q158 0 238 -131q2 -4 7 -2t7 10l14 57q2 12 17 13h92q16 0 14 -15l-75 -454q-6 -37 -7 -66q0 -51 21.5 -73.5t66.5 -22.5q68 0 125.5 48t91 137t33.5 208q0 188 -84 312t-218 181.5t-285 57.5q-213 0 -369 -94.5t-237 -254t-81 -352.5 q0 -184 79 -330.5t233.5 -231.5t372.5 -85q119 0 191.5 28t166.5 89q10 8 22 8t19 -10l41 -53q4 -4 4 -15q0 -8 -8 -16t-11 -10q-92 -64 -206.5 -100.5t-245.5 -36.5q-242 0 -422 102t-275.5 276.5t-95.5 387.5zM614 508q0 -113 44 -178.5t124 -65.5q74 0 137.5 49 t101.5 130t38 171q0 109 -55.5 170.5t-133.5 61.5q-74 0 -132 -45t-91 -123t-33 -170z" />
+<glyph unicode="A" horiz-adv-x="1488" d="M94 9q-6 9 0 26l531 1456q6 16 14 22.5t27 6.5h159q39 0 47 -31l525 -1454l2 -10q0 -25 -23 -25h-145q-25 0 -33 20l-141 398q-4 8 -8.5 12t-16.5 4h-596q-18 0 -24 -16l-146 -400q-6 -18 -30 -18h-123q-13 0 -19 9zM467 600q0 -10 16 -10h496q23 0 16 26l-245 674 q-6 18 -15 19q-8 0 -14 -19l-250 -678z" />
+<glyph unicode="B" horiz-adv-x="1431" d="M199 25v1466q0 29 26 29h473q272 0 421 -101.5t149 -292.5q0 -125 -65.5 -208.5t-203.5 -133.5q-8 -2 -8 -8t8 -8q305 -78 306 -362q0 -203 -152 -304.5t-440 -101.5h-490q-10 0 -17 7t-7 18zM395 172q0 -16 4 -22.5t15 -6.5h288q201 0 299.5 65.5t98.5 203.5 q0 143 -102.5 212.5t-272.5 69.5h-301q-16 0 -22.5 -5t-6.5 -19v-498zM395 868q0 -27 19 -26h311q143 0 243.5 61.5t100.5 200.5q0 135 -98.5 203.5t-272.5 68.5h-276q-27 0 -27 -24v-484z" />
+<glyph unicode="C" horiz-adv-x="1447" d="M133 762q0 242 77 417t221 268t343 93q135 0 257 -57.5t202 -153.5t96 -209l2 -14q0 -8 -5 -12t-11 -4l-154 -13h-4q-6 0 -10 5t-6 16q-31 133 -127 213t-234 80q-215 0 -328.5 -159t-113.5 -474q0 -309 113.5 -466t339.5 -157q145 0 242 70.5t157 222.5q4 14 24 8 l121 -28q14 -4 11 -29q-31 -102 -107 -193.5t-192.5 -148.5t-264.5 -57q-203 0 -348 94t-223 270t-78 418z" />
+<glyph unicode="D" horiz-adv-x="1478" d="M199 33v1460q0 14 6 20.5t22 6.5q203 0 322 -2q414 -6 605.5 -192.5t191.5 -557.5q0 -768 -818 -768h-301q-29 0 -28 33zM395 170q0 -12 5.5 -17.5t19.5 -5.5h78q229 0 369.5 60.5t207 196t66.5 360.5t-63.5 355t-193.5 186.5t-345 62.5q-41 2 -127 2q-17 0 -17 -29 v-1171z" />
+<glyph unicode="E" horiz-adv-x="1286" d="M199 29v1462q0 16 5 22.5t19 6.5h920q20 0 20 -23v-104q0 -25 -26 -25h-715q-16 0 -21.5 -5t-5.5 -20v-479q0 -23 23 -22h530q23 0 23 -23v-108q0 -18 -23 -19h-530q-23 0 -23 -22v-498q0 -12 4 -16t17 -4h751q12 0 17.5 -4.5t5.5 -16.5v-108q0 -23 -23 -23h-940 q-16 0 -22 6t-6 23z" />
+<glyph unicode="F" horiz-adv-x="1230" d="M199 29v1462q-1 29 24 29h901q20 0 21 -23v-104q0 -25 -27 -25h-696q-16 0 -21.5 -5t-5.5 -20v-503q0 -23 23 -23h547q23 0 22 -20v-109q0 -10 -5 -14t-17 -4h-547q-23 0 -23 -23v-620q0 -27 -28 -27h-140q-16 0 -22 6t-6 23z" />
+<glyph unicode="G" horiz-adv-x="1513" d="M133 754q0 244 79 422t224.5 271t339.5 93q139 0 261 -57.5t201 -151.5t95 -201v-12q0 -8 -3 -12t-13 -8l-148 -23h-4q-12 0 -18 21q-23 125 -125 210t-248 85q-211 0 -323.5 -160t-112.5 -465q0 -319 112.5 -478t327.5 -159q125 0 215 55.5t136.5 141.5t52.5 174v123v4 q0 18 -21 18h-334q-23 0 -22 21v88q0 18 20 18l508 -2q31 0 31 -25v-718q0 -27 -25 -27h-47q-16 0 -24 4t-13 21l-22 190q-2 8 -7 8t-12 -10q-66 -104 -175 -168.5t-271 -64.5q-195 0 -338 93t-220 267t-77 414z" />
+<glyph unicode="H" horiz-adv-x="1505" d="M199 29v1462q0 29 24 29h148q25 0 24 -27v-602q0 -14 5.5 -19.5t17.5 -5.5h672q20 0 20 25v604q0 25 23 25h149q14 0 19.5 -6.5t5.5 -22.5v-1462q0 -29 -29 -29h-133q-18 0 -26.5 7t-8.5 24v661q0 18 -18 19h-680q-8 0 -12.5 -5.5t-4.5 -11.5v-663q0 -16 -8 -23.5 t-27 -7.5h-133q-16 0 -22 6t-6 23z" />
+<glyph unicode="I" horiz-adv-x="593" d="M199 29v1462q0 29 24 29h148q25 0 24 -27v-1458q0 -20 -8 -27.5t-29 -7.5h-129q-18 0 -24 6t-6 23z" />
+<glyph unicode="J" horiz-adv-x="856" d="M86 61l18 111q4 25 25 18q10 -4 37 -15t59.5 -18t71.5 -7q94 0 133 50t39 179v1114q0 27 25 27h149q23 0 23 -27v-1159q0 -178 -79 -266t-249 -88q-92 0 -156.5 20t-72.5 23q-29 10 -23 38z" />
+<glyph unicode="K" horiz-adv-x="1435" d="M199 27v1468q0 25 22 25h152q23 0 22 -25v-752q0 -14 6 -14q2 0 13 10l671 762q8 10 16.5 14.5t24.5 4.5h142q16 0 21 -9.5t-5 -19.5l-477 -533q-4 -8 -4 -13t4 -13l539 -903q4 -13 4 -15q0 -14 -17 -14h-168q-27 0 -37 18l-452 756q-4 10 -12 10q-6 0 -19 -12l-235 -268 q-14 -14 -15 -37v-436q0 -16 -8 -23.5t-27 -7.5h-131q-31 0 -30 27z" />
+<glyph unicode="L" horiz-adv-x="1232" d="M199 29v1462q-1 29 24 29h148q25 0 24 -27v-1321q0 -12 4 -16t17 -4h708q12 0 18.5 -4.5t6.5 -16.5v-108q0 -23 -25 -23h-897q-16 0 -22 6t-6 23z" />
+<glyph unicode="M" horiz-adv-x="1855" d="M199 31v1460q0 16 5 22.5t19 6.5h197q16 0 23.5 -5.5t11.5 -17.5l454 -1173q6 -18 15 -19q10 0 18 21l455 1167q6 27 30 27h207q23 0 23 -27v-1462q0 -31 -31 -31h-135q-31 0 -31 27v1171q0 10 -3 9t-7 -9l-451 -1171q-12 -27 -38 -27h-99q-31 0 -41 25l-444 1161 q-2 10 -6 10t-4 -10v-1159q0 -14 -6.5 -20.5t-22.5 -6.5h-111q-28 0 -28 31z" />
+<glyph unicode="N" horiz-adv-x="1550" d="M199 27v1464q0 16 5 22.5t21 6.5h117q16 0 24.5 -4.5t18.5 -16.5l768 -1124q10 -12 18 -13q12 0 13 19v1114q0 25 24 25h121q12 0 17.5 -5.5t5.5 -19.5v-1470q0 -25 -27 -25h-100q-16 0 -25.5 3t-17.5 13l-791 1149q-8 14 -15 12.5t-7 -14.5v-1136q0 -27 -29 -27h-115 q-27 0 -26 27z" />
+<glyph unicode="O" horiz-adv-x="1564" d="M133 754q0 248 79 425t225.5 269t346.5 92q199 0 345.5 -92t224.5 -268t78 -424q0 -246 -78 -420t-224.5 -265t-347.5 -91q-200 0 -346.5 90t-224.5 264t-78 420zM338 754q0 -317 111.5 -471t336.5 -154q222 0 331.5 153.5t109.5 471.5q0 324 -111.5 480.5t-331.5 156.5 q-223 0 -334.5 -158t-111.5 -479z" />
+<glyph unicode="P" horiz-adv-x="1413" d="M199 27v1464q0 16 5 22.5t19 6.5h516q256 0 410 -110t154 -333q0 -219 -146.5 -330.5t-394.5 -111.5h-348q-18 0 -19 -19v-585q0 -31 -30 -31h-140q-27 0 -26 27zM395 813q0 -16 4 -22.5t15 -6.5h329q168 0 263.5 75t95.5 224q0 152 -96.5 219.5t-276.5 67.5h-307 q-27 0 -27 -24v-533z" />
+<glyph unicode="Q" horiz-adv-x="1566" d="M133 756q0 250 78 426t224.5 267t346.5 91q201 0 347.5 -91t224.5 -267t78 -426q0 -477 -287 -670q-8 -6 -8 -18q0 -25 37.5 -63t98 -68.5t124.5 -38.5q20 -2 20 -19v-96q0 -23 -12 -30t-43 -7q-98 0 -197.5 57.5t-189.5 184.5q-8 12 -31 8q-68 -16 -162 -16 q-199 0 -345 89t-225 263t-79 424zM338 752q0 -318 111.5 -470.5t332.5 -152.5t333 153.5t112 471.5q0 637 -445 637q-444 0 -444 -639z" />
+<glyph unicode="R" horiz-adv-x="1425" d="M199 27v1464q0 16 5 22.5t19 6.5h572q244 0 377 -100.5t133 -293.5q0 -162 -87.5 -261t-211.5 -136q-8 -2 -10.5 -8t1.5 -12l287 -670q2 -4 2 -14q0 -25 -24 -25h-150q-23 0 -33 25l-264 645q-6 12 -16.5 18t-32.5 6h-346q-25 0 -25 -22v-639q0 -18 -7 -25.5t-28 -7.5 h-133q-16 0 -22 6t-6 21zM395 862q0 -27 19 -26h323q183 0 273 65.5t90 206.5q0 133 -80 200.5t-236 67.5h-360q-29 0 -29 -22v-492z" />
+<glyph unicode="S" horiz-adv-x="1312" d="M98 256q0 14 21 29l74 51q18 12 28 12q12 0 23 -12q88 -113 174 -160t231 -47q172 0 267.5 61.5t95.5 190.5q0 80 -50.5 136t-181.5 106l-311 106q-162 55 -238.5 158.5t-76.5 228.5q0 127 64.5 223.5t182 148.5t271.5 52q150 0 271.5 -53t207.5 -150q10 -10 10 -20 t-10 -19l-94 -73q-6 -6 -13 -6q-6 0 -24 18q-131 154 -348 154q-154 0 -242 -68t-88 -188q0 -160 219 -234l297 -98q180 -59 261 -158.5t81 -243.5q0 -197 -145.5 -309t-397.5 -112q-184 0 -324 65.5t-227 190.5q-8 16 -8 20z" />
+<glyph unicode="T" horiz-adv-x="1320" d="M86 1391v106q0 23 25 23h1101q25 0 25 -23v-106q0 -12 -6 -16.5t-19 -4.5h-415q-12 0 -17.5 -4t-5.5 -16v-1323q0 -27 -24 -27h-148q-25 0 -24 27v1321q0 14 -4.5 18t-16.5 4h-446q-12 0 -18.5 4t-6.5 17z" />
+<glyph unicode="U" horiz-adv-x="1452" d="M180 541v950q0 29 23 29h147q25 0 25 -27v-995q0 -186 91 -276.5t273 -90.5t275.5 91t93.5 282v989q0 27 22 27h121q23 0 23 -25v-989q0 -270 -138.5 -398t-408.5 -128q-285 0 -416 137t-131 424z" />
+<glyph unicode="V" horiz-adv-x="1447" d="M92 1499q0 20 25 21h141q25 0 35 -25l426 -1241q6 -18 14 -18t17 20l432 1241q6 23 30 23h121q15 0 20 -9.5t1 -19.5l-518 -1460q-6 -16 -16.5 -23.5t-28.5 -7.5h-140q-41 0 -49 29l-508 1460q-2 4 -2 10z" />
+<glyph unicode="W" horiz-adv-x="2140" d="M96 1493q0 27 31 27h131q29 0 35 -25l334 -1192q6 -23 12 -22q8 0 12 20l340 1196q8 23 37 23h117q16 0 24.5 -5.5t12.5 -19.5l336 -1198q6 -18 12 -18t12 18l338 1200q4 23 35 23h102q19 0 26 -10.5t3 -26.5l-422 -1452q-4 -16 -14.5 -23.5t-30.5 -7.5h-125 q-39 0 -47 29l-328 1161q-6 23 -14 -2l-332 -1157q-4 -16 -14 -23.5t-31 -7.5h-127q-39 0 -47 29l-416 1454q-2 4 -2 10z" />
+<glyph unicode="X" horiz-adv-x="1409" d="M92 12q0 10 12 31l469 707q10 14 11 24q0 10 -11 27l-458 688q-4 8 -4 14q0 16 16 17h166q14 0 21.5 -4.5t13.5 -14.5l358 -547q8 -14 19 -14q12 0 20 14l358 547q10 18 33 19h150q12 0 14 -8.5t-4 -18.5l-455 -678q-8 -10 -8 -22t8 -23l486 -727q12 -19 12 -27 q0 -16 -27 -16h-155q-25 0 -33 16l-389 586q-14 20 -23 21q-8 0 -24 -25l-383 -582q-10 -16 -35 -16h-135q-23 0 -23 12z" />
+<glyph unicode="Y" horiz-adv-x="1382" d="M84 1503q0 16 29 17h147q18 0 25.5 -5.5t17.5 -19.5l381 -655q12 -25 23 -25q8 0 22 21l379 659q8 14 16.5 19.5t26.5 5.5h127q14 0 19.5 -8.5t-3.5 -20.5l-487 -815q-8 -12 -10 -25.5t-2 -42.5v-573q0 -18 -9.5 -26.5t-29.5 -8.5h-123q-33 0 -33 31v569q0 18 -3 28.5 t-13 26.5l-494 832q-6 10 -6 16z" />
+<glyph unicode="Z" horiz-adv-x="1292" d="M96 25v47q0 14 4 24t19 31l796 1221q4 8 5 12q0 8 -15 8h-753q-23 0 -23 23v108q0 20 21 21h1024q18 0 18 -21v-53q0 -18 -16 -41l-809 -1233q-6 -8 -3 -13t11 -5h792q23 0 23 -19v-112q0 -23 -25 -23h-1042q-14 0 -20.5 5t-6.5 20z" />
+<glyph unicode="[" horiz-adv-x="587" d="M184 -311v1810q0 21 25 21h330q18 0 18 -15v-84q0 -16 -18 -16h-177q-25 0 -24 -27l-2 -1581q0 -12 5 -16t17 -4h174q23 0 23 -21v-71q0 -23 -23 -23h-317q-31 0 -31 27z" />
+<glyph unicode="\" horiz-adv-x="700" d="M25 1503q0 16 18 17h90q20 0 27 -19l514 -1573l2 -6q0 -12 -19 -12h-90q-25 0 -37 27l-503 1550q-2 6 -2 16z" />
+<glyph unicode="]" horiz-adv-x="587" d="M31 1421v84q0 14 18 15h328q14 0 20 -5.5t6 -15.5l-2 -1810q0 -27 -28 -27h-320q-20 0 -20 23v71q0 20 20 21h176q12 0 16.5 4t4.5 16v1581q0 27 -25 27h-176q-18 0 -18 16z" />
+<glyph unicode="^" horiz-adv-x="974" d="M104 303l299 729q14 35 37 54.5t45 19.5q25 0 46.5 -18.5t35.5 -55.5l301 -735q2 -4 2 -12q0 -14 -20 -15h-88q-29 0 -35 19l-227 577q-6 12 -15 13q-8 0 -14 -13l-229 -577q-4 -8 -11.5 -11.5t-19.5 -3.5h-92q-25 0 -15 29z" />
+<glyph unicode="_" horiz-adv-x="1060" d="M127 -127q0 25 18 25h768q20 0 21 -21v-90q0 -14 -7 -20.5t-26 -6.5l-747 -2q-27 0 -27 25v90z" />
+<glyph unicode="`" horiz-adv-x="583" d="M23 1434l33 94q2 8 8 11t14 -1l475 -197q16 -8 8 -28l-16 -45q-4 -14 -11 -17.5t-22 0.5l-467 148q-33 8 -22 35z" />
+<glyph unicode="a" horiz-adv-x="1122" d="M82 276q0 164 138 258.5t401 110.5l159 12q35 4 35 31v55q0 111 -68.5 175.5t-185.5 64.5q-180 0 -295 -164q-6 -10 -12 -13t-16 1l-111 37q-10 4 -10 14q0 6 6 19q61 109 175 169t269 60q201 0 307.5 -93t106.5 -257v-725q0 -18 -6 -24.5t-23 -6.5h-102q-25 0 -29 33 l-4 94q-2 14 -10 14t-19 -10q-157 -151 -364 -151q-160 0 -251 80.5t-91 215.5zM254 297q0 -88 62.5 -139.5t166.5 -51.5q63 0 125 23t109 61q47 37 72.5 79t25.5 81v170q0 33 -31 33l-133 -12q-190 -12 -293.5 -73.5t-103.5 -170.5z" />
+<glyph unicode="b" d="M158 33v1458q0 29 24 29h127q20 0 21 -29v-502q0 -23 10 -22q6 0 20 10q137 129 328 129q215 0 326.5 -154.5t111.5 -402.5q0 -264 -123.5 -416.5t-343.5 -152.5q-125 0 -206.5 50t-126.5 111q-6 8 -13 9q-8 0 -10 -15l-10 -102q-4 -18 -11.5 -25.5t-25.5 -7.5h-66 q-18 0 -25 7t-7 26zM330 367q0 -72 42 -132.5t109.5 -96.5t141.5 -36q147 0 236 111t89 332q0 209 -80 322.5t-231 113.5q-92 0 -171 -41t-136 -111v-462z" />
+<glyph unicode="c" horiz-adv-x="1110" d="M94 539q0 164 65.5 294t183.5 201.5t265 71.5q150 0 255.5 -69.5t168.5 -184.5l4 -16q0 -12 -14 -15l-113 -26l-6 -2q-10 0 -20 16q-66 88 -126.5 129t-138.5 41q-160 0 -254 -118t-94 -318q0 -203 95.5 -320t257.5 -117q96 0 168.5 47.5t132.5 145.5q6 10 12 11t14 -3 l88 -33q14 -6 9 -26q-63 -119 -174 -193.5t-265 -74.5q-150 0 -266.5 70.5t-182 197.5t-65.5 291z" />
+<glyph unicode="d" d="M98 526q0 172 61.5 303.5t170 204t248.5 72.5q92 0 159.5 -28.5t126.5 -80.5q16 -12 23 -12q10 0 10 27v481q0 27 23 27h124q23 0 23 -27v-1460q0 -18 -6 -25.5t-27 -7.5h-104q-29 0 -29 29v88q0 18 -10 18q-6 0 -17 -10q-61 -61 -133.5 -103t-187.5 -42 q-131 0 -233.5 61t-162 185t-59.5 300zM274 532q0 -215 93.5 -321.5t238.5 -106.5q80 0 146.5 38t104.5 95.5t38 114.5v494q-66 65 -132.5 99t-144.5 34q-156 0 -250 -117t-94 -330z" />
+<glyph unicode="e" horiz-adv-x="1189" d="M94 532q0 174 67.5 304.5t185.5 200t265 69.5t259 -65.5t173.5 -191.5t61.5 -298v-8q0 -18 -6 -27.5t-25 -9.5h-784q-18 0 -19 -31q0 -98 48.5 -182t130 -133t180.5 -49q205 0 319 170q8 8 14.5 9t14.5 -3l86 -43q16 -10 4 -29q-80 -123 -190.5 -179t-264.5 -56 q-150 0 -268.5 69.5t-185 195.5t-66.5 287zM276 618h623q23 0 29 5.5t6 23.5q0 90 -38 167t-110.5 123t-169.5 46q-104 0 -182 -52t-119 -135q-39 -79 -39 -169v-9z" />
+<glyph unicode="f" horiz-adv-x="776" d="M49 977v88q0 20 23 20h194q18 0 19 21v149q0 264 256 265h170q27 0 26 -25v-80q0 -20 -22 -20h-144q-119 0 -118 -148v-143q0 -18 18 -19h236q20 0 20 -20v-88q0 -18 -20 -19h-234q-16 0 -16 -18v-911q0 -29 -25 -29h-125q-23 0 -22 27v915q0 16 -15 16h-200 q-20 0 -21 19z" />
+<glyph unicode="g" horiz-adv-x="1232" d="M49 -70q0 137 193 232q23 10 0 22q-94 41 -95 121q0 45 42 86t120 68q10 2 10 10q0 10 -10 14q-90 47 -133 114t-43 161q0 160 121 252t342 92q195 0 307 -92q14 -10 21 -11q8 0 22 11q39 39 91.5 66.5t101.5 27.5q39 0 39 -33v-72q0 -20 -9.5 -29t-31.5 -7 q-68 0 -107 -19q-42 -17 -42 -40q0 -3 1 -7q2 -8 12.5 -30.5t16.5 -50.5t6 -58q0 -145 -113.5 -237.5t-330.5 -92.5q-145 0 -209 -24.5t-64 -63.5q0 -31 43 -46t144 -22l264 -14q176 -10 262 -84t86 -201q0 -156 -136 -243.5t-388 -87.5q-260 0 -396.5 74.5t-136.5 213.5z M203 -49q0 -98 100 -150.5t297 -52.5q346 0 346 205q0 72 -48 112.5t-157 47.5l-342 20h-6q-35 0 -78 -21q-47 -24 -79.5 -67t-32.5 -94zM293 760q0 -106 74.5 -164.5t212.5 -58.5q141 0 211.5 57t70.5 166q0 111 -71.5 172t-210.5 61q-135 0 -211 -62.5t-76 -170.5z" />
+<glyph unicode="h" horiz-adv-x="1196" d="M160 27v1466q0 27 22 27h121q23 0 23 -25v-547q0 -23 18 -6q117 90 199 127t180 37q158 0 243 -84t85 -227v-762q0 -33 -31 -33h-115q-27 0 -26 27v731q0 102 -52.5 157.5t-160.5 55.5q-86 0 -157 -38t-177 -128v-774q0 -31 -33 -31h-113q-26 0 -26 27z" />
+<glyph unicode="i" horiz-adv-x="489" d="M152 1315v172q0 33 28 33h129q12 0 20.5 -8.5t8.5 -22.5v-170q0 -20 -8 -29.5t-29 -9.5h-119q-31 0 -30 35zM158 29v1028q0 29 24 28h125q23 0 23 -26v-1024q0 -20 -8.5 -27.5t-28.5 -7.5h-105q-18 0 -24 6t-6 23z" />
+<glyph unicode="j" horiz-adv-x="489" d="M-90 -231q0 23 20 22l105 6q66 4 95.5 38t29.5 118v1104q0 29 24 28h125q23 0 23 -26v-1118q0 -152 -64.5 -220.5t-222.5 -68.5q-88 0 -111.5 5t-23.5 21v91zM152 1315v172q0 14 8 23.5t20 9.5h131q12 0 19.5 -8.5t7.5 -22.5v-170q0 -39 -35 -39h-121q-31 0 -30 35z" />
+<glyph unicode="k" horiz-adv-x="1155" d="M160 29v1462q0 29 22 29h125q25 0 25 -27v-950q0 -20 6 -21q6 0 14 13l506 526q23 25 43 24h125q25 0 25 -14q0 -6 -15 -24l-323 -330q-8 -12 -8 -19q0 -6 6 -16l385 -649q4 -5 4 -15q0 -18 -23 -18h-143q-12 0 -20.5 5t-16.5 20l-309 530q-4 10 -10.5 11t-14.5 -7 l-217 -219q-14 -14 -14 -41v-264q0 -20 -8.5 -27.5t-28.5 -7.5h-105q-18 0 -24 6t-6 23z" />
+<glyph unicode="l" horiz-adv-x="489" d="M158 29l2 1462q0 29 24 29h123q25 0 25 -27v-1458q0 -20 -8.5 -27.5t-28.5 -7.5h-107q-18 0 -24 6t-6 23z" />
+<glyph unicode="m" horiz-adv-x="1855" d="M158 27v1032q0 27 22 26h123q20 0 21 -22v-119q0 -25 20 -6q111 90 188.5 129t174.5 39q115 0 189.5 -51t100.5 -129q4 -6 9 -6q6 0 20 10q106 90 191.5 133t179.5 43q147 0 230 -84t83 -227v-762q0 -33 -31 -33h-114q-27 0 -27 27v731q0 102 -49 157.5t-148 55.5 q-82 0 -153.5 -40t-138.5 -100q-16 -16 -22.5 -28t-6.5 -31v-739q0 -33 -31 -33h-115q-27 0 -26 27v731q0 213 -197 213q-82 0 -150.5 -38t-170.5 -128v-774q0 -16 -7.5 -23.5t-23.5 -7.5h-113q-28 0 -28 27z" />
+<glyph unicode="n" horiz-adv-x="1196" d="M158 27v1032q0 27 22 26h123q23 0 23 -22v-119q0 -23 18 -6q115 90 196 129t181 39q156 0 243 -84t87 -225v-764q0 -33 -31 -33h-115q-27 0 -26 27v731q0 102 -52.5 157.5t-160.5 55.5q-86 0 -159 -38t-177 -128v-774q0 -16 -7.5 -23.5t-23.5 -7.5h-113q-28 0 -28 27z " />
+<glyph unicode="o" d="M94 537q0 166 66.5 295t184.5 201.5t269 72.5q152 0 269.5 -72.5t182 -202t64.5 -292.5q0 -162 -65.5 -289t-183 -198.5t-269.5 -71.5q-153 0 -271 70.5t-182.5 197.5t-64.5 289zM270 543q0 -201 92.5 -317.5t253.5 -116.5q160 0 249 115.5t89 318.5q0 201 -91 318.5 t-249 117.5q-160 0 -252 -118t-92 -318z" />
+<glyph unicode="p" horiz-adv-x="1222" d="M158 -311v1364q0 16 7 24t25 8h109q29 1 29 -30v-86q0 -18 10 -19q6 0 16 11q43 43 76 69.5t96.5 51t149.5 24.5q129 0 230.5 -61.5t159.5 -184.5t58 -301q0 -180 -58 -311t-164.5 -199.5t-248.5 -68.5q-170 0 -291 102q-14 14 -22 14q-10 0 -10 -26v-381q0 -27 -23 -27 h-127q-23 0 -22 27zM330 240q65 -68 131.5 -102t146.5 -34q154 0 247 117t93 336q0 213 -92 318.5t-238 105.5q-82 0 -147 -36t-103 -91t-38 -109v-505z" />
+<glyph unicode="q" d="M98 547q0 168 56.5 294t162 195.5t250.5 69.5q133 0 208 -42t130 -103q10 -10 13 -11q6 0 10 17l14 86q4 18 11.5 25t25.5 7h59q16 0 23.5 -8t7.5 -26v-1362q0 -27 -25 -27h-124q-23 0 -23 27v377q0 29 -8 28q-6 0 -23 -12q-59 -45 -137 -73.5t-166 -28.5 q-143 0 -247.5 69.5t-161 197.5t-56.5 300zM274 549q0 -213 92.5 -329t243.5 -116q82 0 158 35t129 97v483q0 70 -38 131t-104.5 98t-146.5 37q-145 0 -239.5 -111.5t-94.5 -324.5z" />
+<glyph unicode="r" horiz-adv-x="784" d="M158 27v1032q0 27 22 26h119q23 0 23 -22v-133q0 -12 7 -14.5t15 8.5q156 182 318 182q72 0 71 -27v-123q0 -20 -18 -16q-37 6 -92 6q-59 0 -129 -34.5t-117 -90t-47 -112.5v-678q0 -31 -31 -31h-113q-28 0 -28 27z" />
+<glyph unicode="s" horiz-adv-x="1048" d="M51 221q0 10 10 17l80 45q20 12 31 -2q111 -176 342 -177q121 2 200 50.5t79 126.5q0 57 -47.5 96t-153.5 69l-211 60q-150 39 -214.5 108.5t-64.5 169.5q0 94 52.5 168t147.5 114t218 40q135 0 242.5 -51t165.5 -140q14 -20 -2 -28l-86 -47q-8 -4 -13 -4q-8 0 -18 10 q-43 63 -118 101t-173 38q-113 0 -184.5 -48t-71.5 -126q0 -47 36 -85t130 -67l260 -77q135 -37 200.5 -110t65.5 -173q0 -94 -57 -167t-157.5 -112.5t-227.5 -39.5q-158 0 -280.5 62t-174.5 163q-6 10 -6 16z" />
+<glyph unicode="t" horiz-adv-x="792" d="M49 979v86q0 20 21 20h174q14 0 14 17l23 325q0 27 22 27h103q25 0 24 -29v-323q0 -16 16 -17h259q23 0 22 -18v-88q0 -20 -22 -21h-261q-16 0 -16 -18v-649q0 -92 30.5 -127t100.5 -35h141q23 0 23 -23l-2 -69q0 -20 -25 -27q-53 -10 -192 -10q-129 0 -188.5 60.5 t-59.5 191.5v684q0 23 -20 22h-164q-23 0 -23 21z" />
+<glyph unicode="u" horiz-adv-x="1185" d="M143 293v762q0 31 31 30h115q27 0 26 -28v-719q0 -102 56.5 -162.5t154.5 -60.5q84 0 165 46t165 132v764q0 29 33 28h112q29 0 29 -28l-4 -1030q0 -27 -22 -27h-119q-23 0 -23 23v120q0 25 -18 7q-111 -94 -197 -132t-176 -38q-143 0 -235.5 86t-92.5 227z" />
+<glyph unicode="v" horiz-adv-x="1120" d="M57 1065q0 20 25 20h127q23 0 33 -22l321 -805q6 -20 15 -20q8 0 18 22l319 803q6 23 31 22h94q15 0 20 -9t1 -19l-416 -1026q-10 -31 -47 -31h-74q-39 0 -51 29l-414 1026q-2 4 -2 10z" />
+<glyph unicode="w" horiz-adv-x="1630" d="M63 1065q0 20 25 20h121q23 0 33 -22l243 -797q6 -20 15 -20q6 0 16 22l242 797q6 20 28 20h97q25 0 30 -22l252 -797q6 -20 15 -20q8 0 14 22l236 795q10 23 34 22h82q13 0 19 -9t2 -19l-314 -1030q-8 -27 -39 -27h-98q-35 0 -43 27l-244 766q-6 18 -14 18q-4 0 -10 -18 l-232 -766q-8 -27 -38 -27h-105q-35 0 -43 27l-321 1028q-2 4 -3 10z" />
+<glyph unicode="x" horiz-adv-x="1114" d="M57 18q0 10 15 31l372 475q10 14 11 23q0 8 -11 22l-356 484q-6 6 -6 14t6 13t16 5h138q14 0 22 -4t17 -14l276 -375q10 -12 16 -12q8 0 15 12l268 375q8 10 16.5 14t24.5 4h107q20 0 20 -12q0 -4 -8 -16l-346 -463q-10 -14 -11 -21q0 -10 11 -24l374 -506q15 -21 15 -31 q0 -12 -23 -12h-143q-31 0 -43 18l-289 398q-10 16 -16 16t-19 -16l-301 -398q-12 -18 -43 -18h-96q-29 0 -29 18z" />
+<glyph unicode="y" horiz-adv-x="1085" d="M55 1063q0 23 25 22h127q23 0 33 -22l305 -795q6 -18 16 -18q12 0 21 24l301 789q10 23 28 22h97q12 0 18 -9t2 -19l-450 -1153q-55 -139 -137.5 -190.5t-223.5 -51.5q-72 0 -98.5 4t-26.5 23v80q0 14 11.5 20t46.5 6h129q49 0 90 36t64.5 89t23.5 103q0 31 -8 49 l-392 979q-2 4 -2 12z" />
+<glyph unicode="z" horiz-adv-x="987" d="M63 25v59q0 16 5.5 27.5t19.5 31.5l596 801l6 12q0 8 -16 9h-543q-12 0 -17 4t-5 18v76q0 23 20 22h758q18 0 18 -20v-66q0 -27 -20 -53l-598 -803q-8 -10 -6 -16t12 -6h602q23 0 23 -19v-77q0 -25 -27 -25h-803q-14 0 -19.5 5t-5.5 20z" />
+<glyph unicode="{" horiz-adv-x="624" d="M0 559v70q0 20 12 20q111 2 168.5 59.5t57.5 153.5v447q0 96 71.5 153.5t190.5 57.5h75q18 0 19 -15v-84q0 -16 -19 -16h-51q-74 0 -102.5 -26.5t-28.5 -82.5v-452q-2 -113 -60.5 -173.5t-144.5 -70.5q-12 -2 -13 -6t13 -6q86 -6 144.5 -64.5t60.5 -177.5v-457 q0 -61 29 -86.5t102 -25.5h47q23 0 23 -21v-71q0 -23 -23 -23h-69q-121 0 -192.5 58.5t-71.5 154.5v461q0 82 -59.5 142.5t-166.5 60.5q-12 0 -12 20z" />
+<glyph unicode="|" horiz-adv-x="534" d="M199 1710q0 25 22 25h90q25 0 25 -25v-2025q0 -23 -23 -23h-88q-25 0 -24 27z" />
+<glyph unicode="}" horiz-adv-x="624" d="M31 -244q0 20 22 21h47q76 0 104.5 26.5t28.5 85.5v457q0 119 58.5 177.5t144.5 64.5q14 2 13.5 6t-13.5 6q-86 10 -144.5 70.5t-58.5 173.5v452q0 55 -28.5 82t-102.5 27h-53q-18 0 -18 16v84q0 14 18 15h76q119 0 190.5 -57.5t71.5 -153.5v-447q0 -96 57.5 -153.5 t167.5 -59.5q12 0 13 -20v-70q0 -20 -13 -20q-106 0 -165.5 -60.5t-59.5 -142.5v-461q0 -98 -70.5 -155.5t-193.5 -57.5h-70q-23 0 -22 23v71z" />
+<glyph unicode="~" horiz-adv-x="1163" d="M123 743q0 10 10 17q66 59 123 90t137 31q53 0 97.5 -13.5t107.5 -42.5q53 -25 95 -38t89 -13q66 0 109 23.5t80 64.5q8 10 16 10q10 0 17 -14l30 -61q4 -8 4 -13q0 -8 -10 -22q-33 -47 -97.5 -78t-148.5 -31q-57 0 -102 14.5t-107 41.5q-57 25 -94 37t-82 12 q-68 0 -118 -26.5t-93 -69.5q-6 -8 -12 -9q-6 0 -12 13l-35 65q-4 8 -4 12z" />
+<glyph unicode="&#xa1;" horiz-adv-x="499" d="M145 883v174q0 16 6.5 22t24.5 6h141q23 0 31 -7t8 -25v-172q0 -23 -20 -23h-170q-20 0 -21 25zM150 -315l43 1007q2 14 7 19.5t19 5.5h60q33 0 32 -29l43 -1005v-5q0 -16 -18 -16h-168q-10 0 -15.5 6t-2.5 17z" />
+<glyph unicode="&#xa2;" horiz-adv-x="1142" d="M94 766q0 150 55.5 270.5t153.5 196.5t227 94v164q0 29 31 29h72q29 0 29 -27v-162q127 -12 220 -79.5t150 -172.5l4 -16q0 -12 -14 -14l-113 -27l-6 -2q-10 0 -20 16q-66 88 -126.5 129t-138.5 41q-160 0 -254 -117.5t-94 -318.5q0 -203 95.5 -319.5t257.5 -116.5 q96 0 168.5 47t132.5 145q6 10 12 11.5t14 -2.5l88 -33q15 -7 9 -27q-59 -109 -155.5 -181.5t-229.5 -84.5v-174q0 -35 -37 -35h-62q-18 0 -25.5 8t-7.5 25v180q-129 16 -228 90t-153.5 193.5t-54.5 269.5z" />
+<glyph unicode="&#xa3;" horiz-adv-x="1259" d="M25 23v108q0 18 18 19h61q86 -2 139.5 74.5t53.5 226.5q0 80 -23 260q-2 14 -14 14h-184q-16 0 -17 16v82q0 16 17 17h157q16 0 15 16l-29 154q-12 61 -12 116q0 127 58.5 220.5t157.5 143.5t218 50q135 0 252 -64.5t158 -162.5l2 -6q0 -8 -8.5 -11.5t-10.5 -3.5 l-110 -39q-4 -2 -13 -2q-12 0 -16 11q-70 127 -233 127q-115 0 -190 -67t-75 -179q0 -68 14.5 -148t32.5 -139q4 -16 17 -16h317q14 0 15 -13v-86q0 -14 -15 -14h-295q-20 0 -16 -16q14 -80 14 -172q0 -37 -2 -58q-2 -121 -33.5 -195.5t-70.5 -115.5q-14 -18 6 -18h358 q104 0 170 34.5t101 116.5q2 8 10 12t18 0l103 -26q25 -8 16 -25q-43 -131 -148.5 -197.5t-258.5 -66.5h-703q-22 0 -22 23z" />
+<glyph unicode="&#xa4;" horiz-adv-x="1099" d="M119 414q0 10 8 16l90 92q6 10 6 17q0 10 -6 18q-57 96 -57 207q0 119 63 213q8 16 -4 27l-90 92q-8 8 -8 18q0 12 8 21l49 49q10 10 21 10q8 0 16 -8l92 -94q12 -10 29 -2q96 63 211 63q113 0 215 -66q12 -10 24 3l99 98q6 6 13 6t11 -6l64 -64q10 -12 0 -24l-101 -101 q-8 -8 -2 -22q66 -98 66 -213q0 -123 -66 -213q-6 -14 2 -23l101 -98q12 -14 0 -27l-62 -63q-12 -12 -24 0l-96 98q-12 12 -25 4q-100 -68 -217 -67q-117 0 -215 63q-18 10 -29 -2l-90 -92q-8 -8 -18 -8q-12 0 -23 8l-47 51q-8 8 -8 19zM295 764q0 -68 33.5 -126t92 -93 t130.5 -35t129 35t91 93t34 126t-34 126t-91 93t-129 35t-130.5 -35t-92 -93.5t-33.5 -125.5z" />
+<glyph unicode="&#xa5;" horiz-adv-x="1247" d="M23 1501q0 18 26 19h154q18 0 26.5 -5.5t16.5 -19.5l379 -657q2 -2 7 -11.5t11 -9.5q8 0 16 19l385 659q10 16 17.5 20.5t25.5 4.5h121q15 0 20 -8.5t-3 -20.5l-473 -784h280q20 0 21 -21v-65q0 -14 -8.5 -20.5t-26.5 -6.5h-287v-191h301q20 0 21 -20v-66q0 -29 -35 -28 h-287v-254q0 -35 -41 -35h-123q-33 0 -32 31v258h-297q-14 0 -19.5 5t-5.5 19v66q0 23 16 22h306v191h-297q-25 0 -25 24v66q0 23 16 23h263l-465 782q-4 6 -4 14z" />
+<glyph unicode="&#xa6;" horiz-adv-x="534" d="M199 475q0 27 22 27h90q25 0 25 -27v-790q0 -23 -23 -23h-88q-25 0 -24 27zM199 1710q0 25 22 25h90q25 0 25 -25v-792q0 -20 -23 -21h-88q-25 0 -24 25z" />
+<glyph unicode="&#xa7;" horiz-adv-x="999" d="M82 72q-10 23 0 28l88 47q8 4 12 5q10 0 19 -13q51 -76 132 -120t187 -44t173 42t67 118q0 57 -47 105.5t-164 93.5l-184 72q-139 53 -203 125.5t-64 175.5q0 94 57.5 164.5t151.5 107.5q-117 61 -161 125.5t-44 146.5t48.5 147.5t137.5 103.5t204 38q127 0 229 -54 t156 -136q12 -20 -3 -29l-79 -45q-12 -4 -15 -4q-10 0 -20 10q-111 133 -258 133q-111 0 -173.5 -41t-62.5 -108q0 -49 38 -92.5t136 -83.5l174 -70q162 -66 233 -145.5t71 -190.5q0 -96 -51.5 -159.5t-139.5 -106.5q98 -56 147.5 -120.5t49.5 -147.5q0 -86 -50.5 -154 t-142.5 -107t-213 -39q-143 0 -262 60.5t-174 161.5zM252 729q0 -61 38 -101t148 -85l129 -54q80 -6 137.5 44.5t57.5 121.5q0 72 -37 120t-145 93l-117 45q-88 -8 -149.5 -62t-61.5 -122z" />
+<glyph unicode="&#xa8;" horiz-adv-x="512" d="M20 1321v172q0 14 5.5 20.5t17.5 6.5h125q12 0 17 -5.5t5 -19.5v-170q0 -18 -7 -24.5t-25 -6.5h-109q-16 0 -22.5 5.5t-6.5 21.5zM319 1321v172q0 27 23 27h127q12 0 17.5 -5.5t5.5 -19.5v-170q0 -18 -7.5 -24.5t-27.5 -6.5h-107q-18 0 -24.5 5.5t-6.5 21.5z" />
+<glyph unicode="&#xa9;" horiz-adv-x="1699" d="M70 760q0 211 104.5 390t283.5 284.5t392 105.5q211 0 390 -105.5t284.5 -284.5t105.5 -390q0 -213 -105.5 -392.5t-284.5 -283.5t-390 -104q-213 0 -392 104t-283.5 283.5t-104.5 392.5zM199 760q0 -197 86 -346.5t234.5 -230.5t330.5 -81q178 0 326.5 82t236.5 231.5 t88 344.5q0 193 -88 343t-236.5 233t-326.5 83q-180 0 -329.5 -83t-235.5 -233.5t-86 -342.5zM457 762q0 129 51 229.5t141 156.5t205 56t199 -58.5t137 -150.5q8 -14 -8 -20l-101 -29h-4q-10 0 -16 12q-80 133 -199 134q-113 0 -183.5 -88.5t-70.5 -237.5q0 -150 72 -239 t186 -89q76 0 133.5 41t96.5 111q6 12 24 4l70 -27q12 -2 6 -20q-49 -94 -136 -156.5t-206 -62.5q-115 0 -206 54t-141 153.5t-50 226.5z" />
+<glyph unicode="&#xaa;" horiz-adv-x="821" d="M82 1020q0 199 338 227l98 10q23 4 23 21v31q0 135 -158 135q-57 0 -97 -20.5t-73 -71.5q-6 -12 -23 -6l-79 24q-8 2 -5 21q78 145 285 145q133 0 200.5 -60.5t67.5 -168.5v-338q0 -33 3.5 -52.5t15.5 -50.5l2 -6q0 -16 -29 -16h-78q-12 0 -16 4t-6 14l-10 58 q-2 8 -6.5 9t-14.5 -7q-53 -47 -101 -69t-112 -22q-106 0 -165.5 50.5t-59.5 138.5zM207 1026q0 -47 39 -76.5t102 -29.5q84 0 141 55q51 45 52 88v92q0 12 -4.5 17.5t-18.5 3.5l-82 -7q-111 -10 -170 -46t-59 -97z" />
+<glyph unicode="&#xab;" horiz-adv-x="913" d="M80 528q0 10 6 19l260 362q6 8 10 10.5t11 2.5h63q8 0 13.5 -6.5t0.5 -14.5l-202 -358q-8 -20 0 -33l202 -346q2 -2 2 -6q0 -8 -20 -8h-59q-16 0 -21 12l-258 342q-8 10 -8 24zM444 528q0 6 9 19l260 362q4 8 8 10.5t10 2.5h64q8 0 13 -6.5t1 -14.5l-201 -358 q-4 -8 -4 -17q0 -4 4 -16l201 -346q2 -2 2 -6q0 -8 -20 -8h-60q-16 0 -20 12l-256 342q-10 14 -11 24z" />
+<glyph unicode="&#xac;" horiz-adv-x="1140" d="M127 719v88q0 25 18 24h850q21 0 21 -20v-88v-299q0 -14 -6 -20.5t-21 -6.5h-94q-25 0 -25 21l-2 278l-714 -2q-27 0 -27 25z" />
+<glyph unicode="&#xad;" horiz-adv-x="780" d="M127 498v90q0 23 18 22l488 2q20 0 20 -20v-90q0 -29 -35 -29h-464q-14 0 -20.5 5t-6.5 20z" />
+<glyph unicode="&#xae;" horiz-adv-x="1116" d="M70 1051q0 133 65.5 245.5t178 178t245.5 65.5q131 0 243.5 -65.5t178.5 -178t66 -245.5t-66 -245t-177.5 -177.5t-244.5 -65.5t-245.5 65.5t-178 177.5t-65.5 245zM168 1051q0 -180 107.5 -288t283.5 -108q174 0 281.5 107.5t107.5 288.5q0 119 -49 209t-137 139 t-203 49q-176 0 -283.5 -108.5t-107.5 -288.5zM373 815v465q0 10 6 10h211q78 0 121 -31.5t43 -91.5q0 -94 -97 -127q-4 0 -2 -6l86 -215q2 -6 -1 -10t-7 -4h-71q-6 0 -11 8l-78 209q0 2 -1 5t-13 3h-94q-8 0 -8 -8v-205q0 -12 -11 -12h-63q-10 0 -10 10zM457 1106 q0 -8 8 -8h113q88 0 88 61q0 63 -95 64h-104h-5t-4 -2t-1 -7v-108z" />
+<glyph unicode="&#xaf;" horiz-adv-x="647" d="M20 1389v79q0 10 4.5 16.5t12.5 6.5h573q8 0 12.5 -6t4.5 -15v-79q0 -27 -31 -27h-553q-12 0 -17.5 6t-5.5 19z" />
+<glyph unicode="&#xb0;" horiz-adv-x="950" d="M150 1432q0 143 92 234t233 91q92 0 167 -42t117 -115.5t42 -167.5q0 -95 -42 -168.5t-117 -115.5t-167 -42q-141 0 -233 91t-92 235zM270 1434q0 -96 54.5 -155.5t148.5 -59.5q92 0 146.5 58t54.5 153q0 92 -55.5 149t-147.5 57q-90 0 -145.5 -56t-55.5 -146z" />
+<glyph unicode="&#xb1;" horiz-adv-x="1140" d="M127 156v88q0 25 18 24h850q21 0 21 -18v-88q0 -29 -33 -29l-829 -2q-27 0 -27 25zM127 877v88q0 23 18 22h359v352q0 14 5 20.5t17 6.5h88q25 0 25 -18v-359h356q21 0 21 -20v-88q0 -27 -33 -27h-344v-356q0 -20 -21 -21h-86q-29 0 -28 33v342h-350q-27 0 -27 25z" />
+<glyph unicode="&#xb2;" horiz-adv-x="925" d="M101 807v53q0 12 6 23.5t29 29.5l274 273q111 104 153 169.5t42 135.5q0 78 -56.5 123t-134.5 45q-59 0 -118.5 -31t-100.5 -96q-4 -6 -11.5 -8t-15.5 6l-55 33q-18 10 -6 28q57 82 140 123t177 41q129 0 215 -69.5t86 -198.5q0 -82 -45 -155t-161 -183l-261 -242 q-16 -16 9 -16h452q16 0 17 -14v-76q0 -14 -17 -15h-598q-10 0 -15 4.5t-5 16.5z" />
+<glyph unicode="&#xb3;" horiz-adv-x="956" d="M111 921.5q0 4.5 8 10.5l55 45q12 8 21 0q57 -59 116.5 -84t135.5 -25q111 0 174 49.5t63 128.5q0 88 -72.5 139.5t-170.5 51.5l-113 2q-16 0 -16 12v68q0 4 4 8t12 4l90 2q102 0 170 49.5t68 124.5q0 66 -57.5 111t-143.5 45q-129 0 -229 -100q-10 -10 -23 0l-47 45 q-8 8 0 20q119 127 299 127q145 0 233.5 -68.5t88.5 -173.5q0 -72 -44.5 -127t-119.5 -81q-14 -4 -15 -9q0 -2 15 -10q84 -23 138 -85t54 -150q0 -125 -95 -201t-273 -76q-199 0 -320 135q-6 8 -6 12.5z" />
+<glyph unicode="&#xb4;" horiz-adv-x="583" d="M21 1323q0 16 12 18l473 197q2 2 8 2q12 0 17 -12l30 -94q2 -4 3 -13q0 -16 -23 -22l-469 -148q-4 -2 -12 -2q-14 0 -21 19l-16 45q-2 4 -2 10z" />
+<glyph unicode="&#xb6;" horiz-adv-x="1148" d="M94 1059q0 121 55.5 226.5t164 170t261.5 64.5h414q14 0 15 -13v-84q0 -12 -15 -12h-98q-14 0 -14 -16v-1551q0 -18 -15 -18h-84q-18 0 -18 18v1555q0 4 -4 8t-11 4h-73q-14 0 -15 -16v-1553q0 -16 -16 -16h-86q-16 0 -16 16v772q0 10 -11 11q-131 4 -229 62 t-151.5 155.5t-53.5 216.5z" />
+<glyph unicode="&#xb7;" horiz-adv-x="411" d="M92 684v166q0 25 19 24h188q10 0 14 -5t4 -17v-166q0 -16 -7 -23.5t-27 -7.5h-162q-16 0 -22.5 6.5t-6.5 22.5z" />
+<glyph unicode="&#xb8;" horiz-adv-x="452" d="M21 -367l22 54q6 10 19 4q57 -39 127 -39q117 0 117 78q0 45 -40 67.5t-126 26.5q-10 0 -13.5 2t0.5 10l76 174h96l-47 -116q-2 -4 0 -7.5t8 -3.5q90 -6 131.5 -49t41.5 -102q0 -76 -65 -119t-159 -43q-102 0 -180 45q-10 8 -8 18z" />
+<glyph unicode="&#xb9;" horiz-adv-x="751" d="M76 1556v54q0 8 3 11t9 7l191 96q20 10 39 11h55q14 0 14 -17v-833q0 -8 9 -8h147q14 -1 14 -15v-69q0 -14 -14 -15h-453q-12 0 -12 13v71q0 14 12 15h164q10 0 11 6v708q0 14 -13 11l-159 -60h-5q-12 0 -12 14z" />
+<glyph unicode="&#xba;" horiz-adv-x="841" d="M94 1182q0 160 90 258t236 98q149 0 238.5 -98.5t89.5 -257.5q0 -156 -88.5 -252t-239.5 -96q-152 0 -239 96t-87 252zM227 1188q0 -123 49.5 -191.5t143.5 -68.5q96 0 146 68.5t50 191.5q0 119 -51 186.5t-145 67.5t-143.5 -67.5t-49.5 -186.5z" />
+<glyph unicode="&#xbb;" horiz-adv-x="913" d="M102 164l203 346q4 6 4 16q0 12 -4 17l-201 358l-2 8q0 12 15 13h63q6 0 11.5 -2t9.5 -11l260 -362q6 -8 6 -19q0 -14 -8 -24l-256 -342q-8 -12 -21 -12h-59q-27 0 -21 14zM467 909q0 12 16 13h64q6 0 10 -2t8 -11l260 -362q8 -12 9 -19q0 -10 -11 -24l-256 -342 q-8 -12 -20 -12h-60q-27 0 -18 14l201 346q4 6 4 16q0 12 -4 17l-201 358q-2 2 -2 8z" />
+<glyph unicode="&#xbc;" horiz-adv-x="1824" d="M188 1343v54q0 8 3 11t9 7l191 96q20 10 39 11h55q14 0 14 -17v-833q0 -8 9 -8h147q14 -1 14 -15v-69q0 -14 -14 -15h-453q-12 0 -12 13v71q0 14 12 15h164q10 0 11 6v708q0 14 -13 11l-159 -60h-5q-12 0 -12 14zM449 10q0 12 6 21l991 1491q6 10 15.5 12t17.5 2h68 q27 0 12 -23l-995 -1503q-8 -10 -16.5 -14t-22.5 -4h-54q-23 0 -22 18zM1057 272v68q0 14 18 41l420 561q13 14 31 14h88q14 0 14 -16v-580q0 -12 10 -12h123q16 0 17 -12v-64q0 -16 -19 -16h-119q-12 0 -12 -12v-226q0 -18 -20 -18h-86q-18 0 -19 16v232q0 8 -12 8h-416 q-18 0 -18 16zM1165 353.5q2 -5.5 13 -5.5h311q12 0 12 10v430q0 14 -6 15q-4 0 -12 -10l-314 -426q-6 -8 -4 -13.5z" />
+<glyph unicode="&#xbd;" horiz-adv-x="1945" d="M188 1343v54q0 8 3 11t9 7l191 96q20 10 39 11h55q14 0 14 -17v-833q0 -8 9 -8h147q14 -1 14 -15v-69q0 -14 -14 -15h-453q-12 0 -12 13v71q0 14 12 15h164q10 0 11 6v708q0 14 -13 11l-159 -60h-5q-12 0 -12 14zM422 10q0 12 6 21l991 1491q6 10 15.5 12t17.5 2h68 q27 0 12 -23l-995 -1503q-8 -10 -16.5 -14t-22.5 -4h-54q-23 0 -22 18zM1209 20v54q0 12 6 23.5t29 29.5l274 272q111 104 153 170t42 136q0 78 -56.5 122.5t-134.5 44.5q-59 0 -118.5 -30.5t-100.5 -96.5q-4 -6 -11.5 -8t-15.5 6l-55 33q-18 10 -6 29q57 82 140 123t177 41 q129 0 215 -70t86 -199q0 -82 -45 -154.5t-161 -183.5l-261 -241q-16 -16 9 -17h452q16 0 17 -14v-76q0 -14 -17 -14h-598q-10 0 -15 4t-5 16z" />
+<glyph unicode="&#xbe;" horiz-adv-x="1908" d="M94 706.5q0 4.5 8 10.5l55 45q12 8 21 0q57 -59 116.5 -84t135.5 -25q111 0 174 49.5t63 128.5q0 88 -72.5 139.5t-170.5 51.5l-113 2q-16 0 -16 12v68q0 4 4 8t12 4l90 2q102 0 170 49.5t68 124.5q0 66 -57.5 111t-143.5 45q-129 0 -229 -100q-10 -10 -23 0l-47 45 q-8 8 0 20q119 127 299 127q145 0 233.5 -68.5t88.5 -173.5q0 -72 -44.5 -127t-119.5 -81q-14 -4 -15 -9q0 -2 15 -10q84 -23 138 -85t54 -150q0 -125 -95 -201t-273 -76q-199 0 -320 135q-6 8 -6 12.5zM498 10q0 12 6 21l991 1491q6 10 15.5 12t17.5 2h68q27 0 12 -23 l-995 -1503q-8 -10 -16.5 -14t-22.5 -4h-54q-23 0 -22 18zM1133 272v68q0 14 18 41l420 561q13 14 31 14h88q14 0 14 -16v-580q0 -12 10 -12h123q16 0 17 -12v-64q0 -16 -19 -16h-119q-12 0 -12 -12v-226q0 -18 -20 -18h-86q-18 0 -19 16v232q0 8 -12 8h-416q-18 0 -18 16z M1241 353.5q2 -5.5 13 -5.5h311q12 0 12 10v430q0 14 -6 15q-4 0 -12 -10l-314 -426q-6 -8 -4 -13.5z" />
+<glyph unicode="&#xbf;" horiz-adv-x="1056" d="M57 8q0 76 28 135.5t70 101.5t109 99q70 57 113 100t71.5 104.5t28.5 143.5q0 10 8.5 17.5t16.5 7.5h100q27 0 27 -29q0 -96 -32 -170t-76 -123t-115 -110q-86 -76 -128 -133.5t-42 -137.5q0 -106 76.5 -169.5t203.5 -63.5q104 0 200.5 54t129.5 134q4 10 9 12.5t17 -1.5 l117 -37q8 -2 11.5 -10.5t-1.5 -16.5q-63 -129 -192 -201.5t-291 -72.5q-215 0 -337 101t-122 265zM449 881v172q0 18 8 25t28 7h144q16 0 23 -6t7 -22v-174q0 -25 -22 -25h-168q-20 0 -20 23z" />
+<glyph unicode="&#xc0;" horiz-adv-x="1488" d="M94 9q-6 9 0 26l531 1456q6 16 14 22.5t27 6.5h159q39 0 47 -31l525 -1454l2 -10q0 -25 -23 -25h-145q-25 0 -33 20l-141 398q-4 8 -8.5 12t-16.5 4h-596q-18 0 -24 -16l-146 -400q-6 -18 -30 -18h-123q-13 0 -19 9zM447 1868l33 94q2 8 8 11t14 -1l475 -197q16 -8 8 -28 l-16 -45q-4 -14 -11 -17.5t-22 0.5l-467 148q-33 8 -22 35zM467 600q0 -10 16 -10h496q23 0 16 26l-245 674q-6 18 -15 19q-8 0 -14 -19l-250 -678z" />
+<glyph unicode="&#xc1;" horiz-adv-x="1488" d="M94 9q-6 9 0 26l531 1456q6 16 14 22.5t27 6.5h159q39 0 47 -31l525 -1454l2 -10q0 -25 -23 -25h-145q-25 0 -33 20l-141 398q-4 8 -8.5 12t-16.5 4h-596q-18 0 -24 -16l-146 -400q-6 -18 -30 -18h-123q-13 0 -19 9zM467 600q0 -10 16 -10h496q23 0 16 26l-245 674 q-6 18 -15 19q-8 0 -14 -19l-250 -678zM471 1757q0 16 12 18l473 197q2 2 8 2q12 0 17 -12l30 -94q2 -4 3 -13q0 -16 -23 -22l-469 -148q-4 -2 -12 -2q-14 0 -21 19l-16 45q-2 4 -2 10z" />
+<glyph unicode="&#xc2;" horiz-adv-x="1488" d="M94 9q-6 9 0 26l531 1456q6 16 14 22.5t27 6.5h159q39 0 47 -31l525 -1454l2 -10q0 -25 -23 -25h-145q-25 0 -33 20l-141 398q-4 8 -8.5 12t-16.5 4h-596q-18 0 -24 -16l-146 -400q-6 -18 -30 -18h-123q-13 0 -19 9zM436 1734q0 6 10 17l209 186q23 23 52 23h79 q14 0 23.5 -6.5t17.5 -12.5l207 -190q12 -12 12 -18.5t-14 -6.5h-121q-23 0 -37 13l-110 102q-4 4 -11.5 11t-11.5 7q-6 0 -24 -18l-119 -102q-10 -8 -17.5 -10.5t-19.5 -2.5h-110q-14 0 -15 8zM467 600q0 -10 16 -10h496q23 0 16 26l-245 674q-6 18 -15 19q-8 0 -14 -19 l-250 -678z" />
+<glyph unicode="&#xc3;" horiz-adv-x="1488" d="M94 9q-6 9 0 26l531 1456q6 16 14 22.5t27 6.5h159q39 0 47 -31l525 -1454l2 -10q0 -25 -23 -25h-145q-25 0 -33 20l-141 398q-4 8 -8.5 12t-16.5 4h-596q-18 0 -24 -16l-146 -400q-6 -18 -30 -18h-123q-13 0 -19 9zM440 1864q0 8 10 16q41 31 74 46t82 15q35 0 65.5 -7 t75.5 -21q33 -10 65.5 -19.5t63.5 -9.5q35 0 59.5 10t57.5 31q10 6 16 6q10 0 17 -16l20 -64q2 -4 2 -10q0 -10 -18 -21q-33 -20 -69 -32.5t-87 -12.5q-59 0 -141 29q-74 25 -119 25q-35 0 -57.5 -9.5t-41 -19.5t-24.5 -14q-10 -6 -14 -6q-8 0 -14 16l-21 55q-2 4 -2 13z M467 600q0 -10 16 -10h496q23 0 16 26l-245 674q-6 18 -15 19q-8 0 -14 -19l-250 -678z" />
+<glyph unicode="&#xc4;" horiz-adv-x="1488" d="M94 9q-6 9 0 26l531 1456q6 16 14 22.5t27 6.5h159q39 0 47 -31l525 -1454l2 -10q0 -25 -23 -25h-145q-25 0 -33 20l-141 398q-4 8 -8.5 12t-16.5 4h-596q-18 0 -24 -16l-146 -400q-6 -18 -30 -18h-123q-13 0 -19 9zM467 600q0 -10 16 -10h496q23 0 16 26l-245 674 q-6 18 -15 19q-8 0 -14 -19l-250 -678zM505 1755v172q0 14 5.5 20.5t17.5 6.5h125q12 0 17 -5.5t5 -19.5v-170q0 -18 -7 -24.5t-25 -6.5h-109q-16 0 -22.5 5.5t-6.5 21.5zM804 1755v172q0 27 23 27h127q12 0 17.5 -5.5t5.5 -19.5v-170q0 -18 -7.5 -24.5t-27.5 -6.5h-107 q-18 0 -24.5 5.5t-6.5 21.5z" />
+<glyph unicode="&#xc5;" horiz-adv-x="1488" d="M94 9q-6 9 0 26l531 1456q6 16 14 22.5t27 6.5h159q39 0 47 -31l525 -1454l2 -10q0 -25 -23 -25h-145q-25 0 -33 20l-141 398q-4 8 -8.5 12t-16.5 4h-596q-18 0 -24 -16l-146 -400q-6 -18 -30 -18h-123q-13 0 -19 9zM467 600q0 -10 16 -10h496q23 0 16 26l-245 674 q-6 18 -15 19q-8 0 -14 -19l-250 -678zM528 1765q0 86 62.5 146.5t153.5 60.5q88 0 150.5 -61.5t62.5 -149.5q0 -92 -61.5 -153.5t-151.5 -61.5t-153 62.5t-63 156.5zM625 1759q0 -45 34.5 -79.5t81.5 -34.5t80 33.5t33 80.5q0 52 -32.5 83.5t-80.5 31.5q-47 0 -81.5 -33 t-34.5 -82z" />
+<glyph unicode="&#xc6;" horiz-adv-x="2066" d="M92 16q0 6 6 19l811 1456q10 16 19.5 22.5t27.5 6.5h967q20 0 21 -23l-2 -104q0 -25 -27 -25h-670q-14 0 -20 -5t-6 -20v-479q0 -23 24 -22h500q23 0 22 -23v-108q0 -18 -22 -19h-502q-23 0 -22 -22v-498q0 -12 4 -16t16 -4h707q12 0 18 -4.5t6 -16.5v-108q0 -23 -24 -23 h-895q-29 0 -29 29v391q0 14 -14 14h-490q-20 0 -29 -16l-223 -400q-12 -18 -33 -18h-122q-18 0 -19 16zM576 595q2 -5 14 -5h409q23 -1 23 24v695q0 27 -14 26q-16 0 -31 -26l-395 -697q-8 -12 -6 -17z" />
+<glyph unicode="&#xc7;" horiz-adv-x="1447" d="M133 762q0 242 77 417t221 268t343 93q135 0 257 -57.5t202 -153.5t96 -209l2 -14q0 -8 -5 -12t-11 -4l-154 -13h-4q-6 0 -10 5t-6 16q-31 133 -127 213t-234 80q-215 0 -328.5 -159t-113.5 -474q0 -309 113.5 -466t339.5 -157q145 0 242 70.5t157 222.5q4 14 24 8 l121 -28q15 -4 11 -29q-29 -98 -99.5 -185.5t-179.5 -145.5t-246 -66l-35 -88q-2 -4 0 -7.5t9 -3.5q90 -6 131 -49t41 -102q0 -76 -64.5 -119t-159.5 -43q-102 0 -180 45q-10 8 -8 18l23 54q6 10 18 4q57 -39 127 -39q117 0 117 78q0 45 -40 67.5t-126 26.5q-10 0 -12.5 2 t0.5 10l63 146q-279 20 -435.5 226t-156.5 554z" />
+<glyph unicode="&#xc8;" horiz-adv-x="1286" d="M199 29v1462q0 16 5 22.5t19 6.5h920q20 0 20 -23v-104q0 -25 -26 -25h-715q-16 0 -21.5 -5t-5.5 -20v-479q0 -23 23 -22h530q23 0 23 -23v-108q0 -18 -23 -19h-530q-23 0 -23 -22v-498q0 -12 4 -16t17 -4h751q12 0 17.5 -4.5t5.5 -16.5v-108q0 -23 -23 -23h-940 q-16 0 -22 6t-6 23zM406 1868l33 94q2 8 8 11t14 -1l475 -197q16 -8 8 -28l-16 -45q-4 -14 -11 -17.5t-22 0.5l-467 148q-33 8 -22 35z" />
+<glyph unicode="&#xc9;" horiz-adv-x="1286" d="M199 29v1462q0 16 5 22.5t19 6.5h920q20 0 20 -23v-104q0 -25 -26 -25h-715q-16 0 -21.5 -5t-5.5 -20v-479q0 -23 23 -22h530q23 0 23 -23v-108q0 -18 -23 -19h-530q-23 0 -23 -22v-498q0 -12 4 -16t17 -4h751q12 0 17.5 -4.5t5.5 -16.5v-108q0 -23 -23 -23h-940 q-16 0 -22 6t-6 23zM430 1757q0 16 12 18l473 197q2 2 8 2q12 0 17 -12l30 -94q2 -4 3 -13q0 -16 -23 -22l-469 -148q-4 -2 -12 -2q-14 0 -21 19l-16 45q-2 4 -2 10z" />
+<glyph unicode="&#xca;" horiz-adv-x="1286" d="M199 29v1462q0 16 5 22.5t19 6.5h920q20 0 20 -23v-104q0 -25 -26 -25h-715q-16 0 -21.5 -5t-5.5 -20v-479q0 -23 23 -22h530q23 0 23 -23v-108q0 -18 -23 -19h-530q-23 0 -23 -22v-498q0 -12 4 -16t17 -4h751q12 0 17.5 -4.5t5.5 -16.5v-108q0 -23 -23 -23h-940 q-16 0 -22 6t-6 23zM395 1734q0 6 10 17l209 186q23 23 52 23h79q14 0 23.5 -6.5t17.5 -12.5l207 -190q12 -12 12 -18.5t-14 -6.5h-121q-23 0 -37 13l-110 102q-4 4 -11.5 11t-11.5 7q-6 0 -24 -18l-119 -102q-10 -8 -17.5 -10.5t-19.5 -2.5h-110q-14 0 -15 8z" />
+<glyph unicode="&#xcb;" horiz-adv-x="1286" d="M199 29v1462q0 16 5 22.5t19 6.5h920q20 0 20 -23v-104q0 -25 -26 -25h-715q-16 0 -21.5 -5t-5.5 -20v-479q0 -23 23 -22h530q23 0 23 -23v-108q0 -18 -23 -19h-530q-23 0 -23 -22v-498q0 -12 4 -16t17 -4h751q12 0 17.5 -4.5t5.5 -16.5v-108q0 -23 -23 -23h-940 q-16 0 -22 6t-6 23zM464 1755v172q0 14 5.5 20.5t17.5 6.5h125q12 0 17 -5.5t5 -19.5v-170q0 -18 -7 -24.5t-25 -6.5h-109q-16 0 -22.5 5.5t-6.5 21.5zM763 1755v172q0 27 23 27h127q12 0 17.5 -5.5t5.5 -19.5v-170q0 -18 -7.5 -24.5t-27.5 -6.5h-107q-18 0 -24.5 5.5 t-6.5 21.5z" />
+<glyph unicode="&#xcc;" horiz-adv-x="593" d="M6 1868l33 94q2 8 8 11t14 -1l475 -197q16 -8 8 -28l-16 -45q-4 -14 -11 -17.5t-22 0.5l-467 148q-33 8 -22 35zM199 29v1462q0 29 24 29h148q25 0 24 -27v-1458q0 -20 -8 -27.5t-29 -7.5h-129q-18 0 -24 6t-6 23z" />
+<glyph unicode="&#xcd;" horiz-adv-x="593" d="M31 1757q0 16 12 18l473 197q2 2 8 2q12 0 17 -12l30 -94q2 -4 3 -13q0 -16 -23 -22l-469 -148q-4 -2 -12 -2q-14 0 -21 19l-16 45q-2 4 -2 10zM199 29v1462q0 29 24 29h148q25 0 24 -27v-1458q0 -20 -8 -27.5t-29 -7.5h-129q-18 0 -24 6t-6 23z" />
+<glyph unicode="&#xce;" horiz-adv-x="593" d="M-4 1734q0 6 10 17l209 186q23 23 52 23h79q14 0 23.5 -6.5t17.5 -12.5l207 -190q12 -12 12 -18.5t-14 -6.5h-121q-23 0 -37 13l-110 102q-4 4 -11.5 11t-11.5 7q-6 0 -24 -18l-119 -102q-10 -8 -17.5 -10.5t-19.5 -2.5h-110q-14 0 -15 8zM199 29v1462q0 29 24 29h148 q25 0 24 -27v-1458q0 -20 -8 -27.5t-29 -7.5h-129q-18 0 -24 6t-6 23z" />
+<glyph unicode="&#xcf;" horiz-adv-x="593" d="M65 1755v172q0 14 5.5 20.5t17.5 6.5h125q12 0 17 -5.5t5 -19.5v-170q0 -18 -7 -24.5t-25 -6.5h-109q-16 0 -22.5 5.5t-6.5 21.5zM199 29v1462q0 29 24 29h148q25 0 24 -27v-1458q0 -20 -8 -27.5t-29 -7.5h-129q-18 0 -24 6t-6 23zM364 1755v172q0 27 23 27h127 q12 0 17.5 -5.5t5.5 -19.5v-170q0 -18 -7.5 -24.5t-27.5 -6.5h-107q-18 0 -24.5 5.5t-6.5 21.5z" />
+<glyph unicode="&#xd0;" horiz-adv-x="1488" d="M66 719v86q0 27 20 26h123v662q0 27 29 27q205 0 323 -2q414 -7 605.5 -193t191.5 -557q0 -768 -819 -768h-299q-31 0 -31 33v657h-115q-16 0 -22 6t-6 23zM406 170q0 -12 5 -17.5t19 -5.5h78q231 0 371.5 60.5t207 196t66.5 360.5t-63.5 355t-194.5 186.5t-346 62.5 q-39 2 -127 2q-16 0 -16 -29v-510h325q8 0 14.5 -7t6.5 -17v-86q0 -31 -39 -31h-307v-520z" />
+<glyph unicode="&#xd1;" horiz-adv-x="1550" d="M199 27v1464q0 16 5 22.5t21 6.5h117q16 0 24.5 -4.5t18.5 -16.5l768 -1124q10 -12 18 -13q12 0 13 19v1114q0 25 24 25h121q12 0 17.5 -5.5t5.5 -19.5v-1470q0 -25 -27 -25h-100q-16 0 -25.5 3t-17.5 13l-791 1149q-8 14 -15 12.5t-7 -14.5v-1136q0 -27 -29 -27h-115 q-27 0 -26 27zM498 1864q0 8 10 16q41 31 74 46t82 15q35 0 65.5 -7t75.5 -21q33 -10 65.5 -19.5t63.5 -9.5q35 0 59.5 10t57.5 31q10 6 16 6q10 0 17 -16l20 -64q2 -4 2 -10q0 -10 -18 -21q-33 -20 -69 -32.5t-87 -12.5q-59 0 -141 29q-74 25 -119 25q-35 0 -57.5 -9.5 t-41 -19.5t-24.5 -14q-10 -6 -14 -6q-8 0 -14 16l-21 55q-2 4 -2 13z" />
+<glyph unicode="&#xd2;" horiz-adv-x="1564" d="M133 754q0 248 79 425t225.5 269t346.5 92q199 0 345.5 -92t224.5 -268t78 -424q0 -246 -78 -420t-224.5 -265t-347.5 -91q-200 0 -346.5 90t-224.5 264t-78 420zM338 754q0 -317 111.5 -471t336.5 -154q222 0 331.5 153.5t109.5 471.5q0 324 -111.5 480.5t-331.5 156.5 q-223 0 -334.5 -158t-111.5 -479zM490 1868l33 94q2 8 8 11t14 -1l475 -197q16 -8 8 -28l-16 -45q-4 -14 -11 -17.5t-22 0.5l-467 148q-33 8 -22 35z" />
+<glyph unicode="&#xd3;" horiz-adv-x="1564" d="M133 754q0 248 79 425t225.5 269t346.5 92q199 0 345.5 -92t224.5 -268t78 -424q0 -246 -78 -420t-224.5 -265t-347.5 -91q-200 0 -346.5 90t-224.5 264t-78 420zM338 754q0 -317 111.5 -471t336.5 -154q222 0 331.5 153.5t109.5 471.5q0 324 -111.5 480.5t-331.5 156.5 q-223 0 -334.5 -158t-111.5 -479zM514 1757q0 16 12 18l473 197q2 2 8 2q12 0 17 -12l30 -94q2 -4 3 -13q0 -16 -23 -22l-469 -148q-4 -2 -12 -2q-14 0 -21 19l-16 45q-2 4 -2 10z" />
+<glyph unicode="&#xd4;" horiz-adv-x="1564" d="M133 754q0 248 79 425t225.5 269t346.5 92q199 0 345.5 -92t224.5 -268t78 -424q0 -246 -78 -420t-224.5 -265t-347.5 -91q-200 0 -346.5 90t-224.5 264t-78 420zM338 754q0 -317 111.5 -471t336.5 -154q222 0 331.5 153.5t109.5 471.5q0 324 -111.5 480.5t-331.5 156.5 q-223 0 -334.5 -158t-111.5 -479zM479 1734q0 6 10 17l209 186q23 23 52 23h79q14 0 23.5 -6.5t17.5 -12.5l207 -190q12 -12 12 -18.5t-14 -6.5h-121q-23 0 -37 13l-110 102q-4 4 -11.5 11t-11.5 7q-6 0 -24 -18l-119 -102q-10 -8 -17.5 -10.5t-19.5 -2.5h-110q-14 0 -15 8z " />
+<glyph unicode="&#xd5;" horiz-adv-x="1564" d="M133 754q0 248 79 425t225.5 269t346.5 92q199 0 345.5 -92t224.5 -268t78 -424q0 -246 -78 -420t-224.5 -265t-347.5 -91q-200 0 -346.5 90t-224.5 264t-78 420zM338 754q0 -317 111.5 -471t336.5 -154q222 0 331.5 153.5t109.5 471.5q0 324 -111.5 480.5t-331.5 156.5 q-223 0 -334.5 -158t-111.5 -479zM483 1864q0 8 10 16q41 31 74 46t82 15q35 0 65.5 -7t75.5 -21q33 -10 65.5 -19.5t63.5 -9.5q35 0 59.5 10t57.5 31q10 6 16 6q10 0 17 -16l20 -64q2 -4 2 -10q0 -10 -18 -21q-33 -20 -69 -32.5t-87 -12.5q-59 0 -141 29q-74 25 -119 25 q-35 0 -57.5 -9.5t-41 -19.5t-24.5 -14q-10 -6 -14 -6q-8 0 -14 16l-21 55q-2 4 -2 13z" />
+<glyph unicode="&#xd6;" horiz-adv-x="1564" d="M133 754q0 248 79 425t225.5 269t346.5 92q199 0 345.5 -92t224.5 -268t78 -424q0 -246 -78 -420t-224.5 -265t-347.5 -91q-200 0 -346.5 90t-224.5 264t-78 420zM338 754q0 -317 111.5 -471t336.5 -154q222 0 331.5 153.5t109.5 471.5q0 324 -111.5 480.5t-331.5 156.5 q-223 0 -334.5 -158t-111.5 -479zM548 1755v172q0 14 5.5 20.5t17.5 6.5h125q12 0 17 -5.5t5 -19.5v-170q0 -18 -7 -24.5t-25 -6.5h-109q-16 0 -22.5 5.5t-6.5 21.5zM847 1755v172q0 27 23 27h127q12 0 17.5 -5.5t5.5 -19.5v-170q0 -18 -7.5 -24.5t-27.5 -6.5h-107 q-18 0 -24.5 5.5t-6.5 21.5z" />
+<glyph unicode="&#xd7;" horiz-adv-x="1105" d="M135 1094q0 10 8 18l62 62q16 14 31 4l317 -318l311 314q14 10 19 10q8 0 18 -10l64 -64q16 -14 2 -29l-318 -317l318 -318q14 -12 0 -26l-64 -64q-8 -8 -18 -8q-12 0 -25 12l-307 308l-315 -316q-12 -14 -29 -2l-62 64q-10 10 -10 18q0 12 13 25l307 307l-314 311 q-8 10 -8 19z" />
+<glyph unicode="&#xd8;" horiz-adv-x="1492" d="M39 70q0 4 8 16l164 180q-113 190 -113 488q0 248 79 425t225.5 269t347.5 92q281 0 450 -182l148 166q23 23 36 6l68 -64q8 -8 8 -16q0 -6 -6 -16l-170 -189q113 -190 113 -489q0 -246 -78 -420t-224.5 -265t-346.5 -91q-283 0 -453 176l-139 -156q-16 -16 -27 -16 q-10 0 -27 12l-47 47q-16 16 -16 27zM307 754q0 -201 55 -330l715 807q-106 158 -327 158q-223 0 -333 -157t-110 -478zM418 285q109 -154 332 -154q221 0 328.5 151.5t107.5 471.5q-1 210 -56 333z" />
+<glyph unicode="&#xd9;" horiz-adv-x="1452" d="M180 541v950q0 29 23 29h147q25 0 25 -27v-995q0 -186 91 -276.5t273 -90.5t275.5 91t93.5 282v989q0 27 22 27h121q23 0 23 -25v-989q0 -270 -138.5 -398t-408.5 -128q-285 0 -416 137t-131 424zM447 1868l33 94q2 8 8 11t14 -1l475 -197q16 -8 8 -28l-16 -45 q-4 -14 -11 -17.5t-22 0.5l-467 148q-33 8 -22 35z" />
+<glyph unicode="&#xda;" horiz-adv-x="1452" d="M180 541v950q0 29 23 29h147q25 0 25 -27v-995q0 -186 91 -276.5t273 -90.5t275.5 91t93.5 282v989q0 27 22 27h121q23 0 23 -25v-989q0 -270 -138.5 -398t-408.5 -128q-285 0 -416 137t-131 424zM471 1757q0 16 12 18l473 197q2 2 8 2q12 0 17 -12l30 -94q2 -4 3 -13 q0 -16 -23 -22l-469 -148q-4 -2 -12 -2q-14 0 -21 19l-16 45q-2 4 -2 10z" />
+<glyph unicode="&#xdb;" horiz-adv-x="1452" d="M180 541v950q0 29 23 29h147q25 0 25 -27v-995q0 -186 91 -276.5t273 -90.5t275.5 91t93.5 282v989q0 27 22 27h121q23 0 23 -25v-989q0 -270 -138.5 -398t-408.5 -128q-285 0 -416 137t-131 424zM436 1734q0 6 10 17l209 186q23 23 52 23h79q14 0 23.5 -6.5t17.5 -12.5 l207 -190q12 -12 12 -18.5t-14 -6.5h-121q-23 0 -37 13l-110 102q-4 4 -11.5 11t-11.5 7q-6 0 -24 -18l-119 -102q-10 -8 -17.5 -10.5t-19.5 -2.5h-110q-14 0 -15 8z" />
+<glyph unicode="&#xdc;" horiz-adv-x="1452" d="M180 541v950q0 29 23 29h147q25 0 25 -27v-995q0 -186 91 -276.5t273 -90.5t275.5 91t93.5 282v989q0 27 22 27h121q23 0 23 -25v-989q0 -270 -138.5 -398t-408.5 -128q-285 0 -416 137t-131 424zM505 1755v172q0 14 5.5 20.5t17.5 6.5h125q12 0 17 -5.5t5 -19.5v-170 q0 -18 -7 -24.5t-25 -6.5h-109q-16 0 -22.5 5.5t-6.5 21.5zM804 1755v172q0 27 23 27h127q12 0 17.5 -5.5t5.5 -19.5v-170q0 -18 -7.5 -24.5t-27.5 -6.5h-107q-18 0 -24.5 5.5t-6.5 21.5z" />
+<glyph unicode="&#xdd;" horiz-adv-x="1382" d="M84 1503q0 16 29 17h147q18 0 25.5 -5.5t17.5 -19.5l381 -655q12 -25 23 -25q8 0 22 21l379 659q8 14 16.5 19.5t26.5 5.5h127q14 0 19.5 -8.5t-3.5 -20.5l-487 -815q-8 -12 -10 -25.5t-2 -42.5v-573q0 -18 -9.5 -26.5t-29.5 -8.5h-123q-33 0 -33 31v569q0 18 -3 28.5 t-13 26.5l-494 832q-6 10 -6 16zM422 1757q0 16 12 18l473 197q2 2 8 2q12 0 17 -12l30 -94q2 -4 3 -13q0 -16 -23 -22l-469 -148q-4 -2 -12 -2q-14 0 -21 19l-16 45q-2 4 -2 10z" />
+<glyph unicode="&#xde;" horiz-adv-x="1419" d="M199 27v1464q0 29 24 29h148q25 0 24 -27v-276q0 -14 15 -15h335q256 0 411 -104.5t155 -309.5q0 -219 -146.5 -328.5t-394.5 -109.5h-356q-18 0 -19 -20v-299q0 -31 -30 -31h-140q-27 0 -26 27zM395 526q0 -27 19 -26h336q170 0 264 71.5t94 219.5q0 262 -371 262h-315 q-27 0 -27 -25v-502z" />
+<glyph unicode="&#xdf;" horiz-adv-x="1245" d="M49 958v86q0 10 6 16.5t17 6.5h104q10 0 13.5 5t3.5 15q2 195 122.5 314t339.5 119q183 0 271 -82t88 -207q0 -76 -31 -126t-81 -83t-136 -74q-76 -41 -100.5 -62.5t-24.5 -58.5q0 -39 23.5 -56t97.5 -40q121 -45 195.5 -82t134 -114.5t59.5 -198.5q0 -170 -114.5 -263 t-293.5 -93q-74 0 -146.5 16t-121.5 45q-18 12 -10 29l47 86q10 12 27 2q49 -27 91 -40.5t99 -13.5q119 0 189.5 56.5t70.5 158.5q0 72 -34.5 118t-88 72t-143.5 56q-70 25 -116 49.5t-76.5 68.5t-30.5 114q0 76 42 127t138 104q14 8 65.5 40t78 72t26.5 89q0 76 -55.5 120 t-155.5 44q-127 0 -200.5 -77t-73.5 -220v-1069v-7q0 -20 -21 -20h-129q-20 0 -20 23v895q0 20 -17 20h-106q-23 0 -23 20z" />
+<glyph unicode="&#xe0;" horiz-adv-x="1122" d="M82 276q0 164 138 258.5t401 110.5l159 12q35 4 35 31v55q0 111 -68.5 175.5t-185.5 64.5q-180 0 -295 -164q-6 -10 -12 -13t-16 1l-111 37q-10 4 -10 14q0 6 6 19q61 109 175 169t269 60q201 0 307.5 -93t106.5 -257v-725q0 -18 -6 -24.5t-23 -6.5h-102q-25 0 -29 33 l-4 94q-2 14 -10 14t-19 -10q-157 -151 -364 -151q-160 0 -251 80.5t-91 215.5zM254 297q0 -88 62.5 -139.5t166.5 -51.5q63 0 125 23t109 61q47 37 72.5 79t25.5 81v170q0 33 -31 33l-133 -12q-190 -12 -293.5 -73.5t-103.5 -170.5zM266 1434l33 94q2 8 8 11t14 -1 l475 -197q16 -8 8 -28l-16 -45q-4 -14 -11 -17.5t-22 0.5l-467 148q-33 8 -22 35z" />
+<glyph unicode="&#xe1;" horiz-adv-x="1122" d="M82 276q0 164 138 258.5t401 110.5l159 12q35 4 35 31v55q0 111 -68.5 175.5t-185.5 64.5q-180 0 -295 -164q-6 -10 -12 -13t-16 1l-111 37q-10 4 -10 14q0 6 6 19q61 109 175 169t269 60q201 0 307.5 -93t106.5 -257v-725q0 -18 -6 -24.5t-23 -6.5h-102q-25 0 -29 33 l-4 94q-2 14 -10 14t-19 -10q-157 -151 -364 -151q-160 0 -251 80.5t-91 215.5zM254 297q0 -88 62.5 -139.5t166.5 -51.5q63 0 125 23t109 61q47 37 72.5 79t25.5 81v170q0 33 -31 33l-133 -12q-190 -12 -293.5 -73.5t-103.5 -170.5zM291 1323q0 16 12 18l473 197q2 2 8 2 q12 0 17 -12l30 -94q2 -4 3 -13q0 -16 -23 -22l-469 -148q-4 -2 -12 -2q-14 0 -21 19l-16 45q-2 4 -2 10z" />
+<glyph unicode="&#xe2;" horiz-adv-x="1122" d="M82 276q0 164 138 258.5t401 110.5l159 12q35 4 35 31v55q0 111 -68.5 175.5t-185.5 64.5q-180 0 -295 -164q-6 -10 -12 -13t-16 1l-111 37q-10 4 -10 14q0 6 6 19q61 109 175 169t269 60q201 0 307.5 -93t106.5 -257v-725q0 -18 -6 -24.5t-23 -6.5h-102q-25 0 -29 33 l-4 94q-2 14 -10 14t-19 -10q-157 -151 -364 -151q-160 0 -251 80.5t-91 215.5zM254 297q0 -88 62.5 -139.5t166.5 -51.5q63 0 125 23t109 61q47 37 72.5 79t25.5 81v170q0 33 -31 33l-133 -12q-190 -12 -293.5 -73.5t-103.5 -170.5zM256 1300q0 6 10 17l209 186 q23 23 52 23h79q14 0 23.5 -6.5t17.5 -12.5l207 -190q12 -12 12 -18.5t-14 -6.5h-121q-23 0 -37 13l-110 102q-4 4 -11.5 11t-11.5 7q-6 0 -24 -18l-119 -102q-10 -8 -17.5 -10.5t-19.5 -2.5h-110q-14 0 -15 8z" />
+<glyph unicode="&#xe3;" horiz-adv-x="1122" d="M82 276q0 164 138 258.5t401 110.5l159 12q35 4 35 31v55q0 111 -68.5 175.5t-185.5 64.5q-180 0 -295 -164q-6 -10 -12 -13t-16 1l-111 37q-10 4 -10 14q0 6 6 19q61 109 175 169t269 60q201 0 307.5 -93t106.5 -257v-725q0 -18 -6 -24.5t-23 -6.5h-102q-25 0 -29 33 l-4 94q-2 14 -10 14t-19 -10q-157 -151 -364 -151q-160 0 -251 80.5t-91 215.5zM254 297q0 -88 62.5 -139.5t166.5 -51.5q63 0 125 23t109 61q47 37 72.5 79t25.5 81v170q0 33 -31 33l-133 -12q-190 -12 -293.5 -73.5t-103.5 -170.5zM260 1430q0 8 10 16q41 31 74 46t82 15 q35 0 65.5 -7t75.5 -21q33 -10 65.5 -19.5t63.5 -9.5q35 0 59.5 10t57.5 31q10 6 16 6q10 0 17 -16l20 -64q2 -4 2 -10q0 -10 -18 -21q-33 -20 -69 -32.5t-87 -12.5q-59 0 -141 29q-74 25 -119 25q-35 0 -57.5 -9.5t-41 -19.5t-24.5 -14q-10 -6 -14 -6q-8 0 -14 16l-21 55 q-2 4 -2 13z" />
+<glyph unicode="&#xe4;" horiz-adv-x="1122" d="M82 276q0 164 138 258.5t401 110.5l159 12q35 4 35 31v55q0 111 -68.5 175.5t-185.5 64.5q-180 0 -295 -164q-6 -10 -12 -13t-16 1l-111 37q-10 4 -10 14q0 6 6 19q61 109 175 169t269 60q201 0 307.5 -93t106.5 -257v-725q0 -18 -6 -24.5t-23 -6.5h-102q-25 0 -29 33 l-4 94q-2 14 -10 14t-19 -10q-157 -151 -364 -151q-160 0 -251 80.5t-91 215.5zM254 297q0 -88 62.5 -139.5t166.5 -51.5q63 0 125 23t109 61q47 37 72.5 79t25.5 81v170q0 33 -31 33l-133 -12q-190 -12 -293.5 -73.5t-103.5 -170.5zM325 1321v172q0 14 5.5 20.5t17.5 6.5 h125q12 0 17 -5.5t5 -19.5v-170q0 -18 -7 -24.5t-25 -6.5h-109q-16 0 -22.5 5.5t-6.5 21.5zM624 1321v172q0 27 23 27h127q12 0 17.5 -5.5t5.5 -19.5v-170q0 -18 -7.5 -24.5t-27.5 -6.5h-107q-18 0 -24.5 5.5t-6.5 21.5z" />
+<glyph unicode="&#xe5;" horiz-adv-x="1122" d="M82 276q0 164 138 258.5t401 110.5l159 12q35 4 35 31v55q0 111 -68.5 175.5t-185.5 64.5q-180 0 -295 -164q-6 -10 -12 -13t-16 1l-111 37q-10 4 -10 14q0 6 6 19q61 109 175 169t269 60q201 0 307.5 -93t106.5 -257v-725q0 -18 -6 -24.5t-23 -6.5h-102q-25 0 -29 33 l-4 94q-2 14 -10 14t-19 -10q-157 -151 -364 -151q-160 0 -251 80.5t-91 215.5zM254 297q0 -88 62.5 -139.5t166.5 -51.5q63 0 125 23t109 61q47 37 72.5 79t25.5 81v170q0 33 -31 33l-133 -12q-190 -12 -293.5 -73.5t-103.5 -170.5zM348 1433q0 86 62.5 146.5t153.5 60.5 q88 0 150.5 -61.5t62.5 -149.5q0 -92 -61.5 -153.5t-151.5 -61.5t-153 62.5t-63 156.5zM445 1427q0 -45 34.5 -79.5t81.5 -34.5t80 33.5t33 80.5q0 52 -32.5 83.5t-80.5 31.5q-47 0 -81.5 -33t-34.5 -82z" />
+<glyph unicode="&#xe6;" horiz-adv-x="1896" d="M82 283q0 156 129 249t387 111l180 14q37 4 37 31v55q0 113 -68.5 176.5t-193.5 63.5q-172 0 -287 -164q-8 -12 -14 -14t-19 2l-106 37q-6 4 -7 14t3 19q133 229 444 229q147 0 236.5 -49t128.5 -150q63 98 161.5 148.5t225.5 50.5q147 0 259 -65.5t173 -190.5t61 -299 q0 -25 -7 -35t-29 -10l-758 -2q-23 0 -30 -8.5t-7 -36.5q0 -86 47 -167t129 -131t178 -50q117 0 187.5 45t136.5 125q8 8 12 9t15 -3l83 -43q16 -10 5 -29q-68 -113 -186 -174t-271 -61q-152 0 -250 63t-172 158q-6 10 -12 0q-86 -100 -189.5 -160.5t-267.5 -60.5t-254 80.5 t-90 222.5zM254 293q0 -86 57.5 -137.5t157.5 -51.5q92 0 172 34t127 90.5t47 123.5v164q0 16 -7 23.5t-26 7.5l-149 -12q-184 -14 -281.5 -76t-97.5 -166zM985 621l621 -3q23 0 28.5 6.5t5.5 24.5q0 88 -40.5 165t-113.5 123t-165 46q-94 0 -170 -44t-121 -127t-45 -191z " />
+<glyph unicode="&#xe7;" horiz-adv-x="1110" d="M94 539q0 164 65.5 294t183.5 201.5t265 71.5q150 0 255.5 -69.5t168.5 -184.5l4 -16q0 -12 -14 -15l-113 -26l-6 -2q-10 0 -20 16q-66 88 -126.5 129t-138.5 41q-160 0 -254 -118t-94 -318q0 -203 95.5 -320t257.5 -117q96 0 168.5 47.5t132.5 145.5q6 10 12 11t14 -3 l88 -33q15 -6 9 -26q-61 -111 -161 -183.5t-237 -82.5l-35 -88q-2 -4 0 -7.5t9 -3.5q90 -6 131 -49t41 -102q0 -76 -64.5 -119t-159.5 -43q-102 0 -180 45q-10 8 -8 18l23 54q6 10 18 4q57 -39 127 -39q117 0 117 78q0 45 -40 67.5t-126 26.5q-10 0 -12.5 2t-0.5 10l64 146 q-135 12 -239.5 85.5t-162 195.5t-57.5 276z" />
+<glyph unicode="&#xe8;" horiz-adv-x="1189" d="M94 532q0 174 67.5 304.5t185.5 200t265 69.5t259 -65.5t173.5 -191.5t61.5 -298v-8q0 -18 -6 -27.5t-25 -9.5h-784q-18 0 -19 -31q0 -98 48.5 -182t130 -133t180.5 -49q205 0 319 170q8 8 14.5 9t14.5 -3l86 -43q16 -10 4 -29q-80 -123 -190.5 -179t-264.5 -56 q-150 0 -268.5 69.5t-185 195.5t-66.5 287zM276 618h623q23 0 29 5.5t6 23.5q0 90 -38 167t-110.5 123t-169.5 46q-104 0 -182 -52t-119 -135t-39 -178zM313 1434l33 94q2 8 8 11t14 -1l475 -197q16 -8 8 -28l-16 -45q-4 -14 -11 -17.5t-22 0.5l-467 148q-33 8 -22 35z" />
+<glyph unicode="&#xe9;" horiz-adv-x="1189" d="M94 532q0 174 67.5 304.5t185.5 200t265 69.5t259 -65.5t173.5 -191.5t61.5 -298v-8q0 -18 -6 -27.5t-25 -9.5h-784q-18 0 -19 -31q0 -98 48.5 -182t130 -133t180.5 -49q205 0 319 170q8 8 14.5 9t14.5 -3l86 -43q16 -10 4 -29q-80 -123 -190.5 -179t-264.5 -56 q-150 0 -268.5 69.5t-185 195.5t-66.5 287zM276 618h623q23 0 29 5.5t6 23.5q0 90 -38 167t-110.5 123t-169.5 46q-104 0 -182 -52t-119 -135t-39 -178zM340 1323q0 16 12 18l473 197q2 2 8 2q12 0 17 -12l30 -94q2 -4 3 -13q0 -16 -23 -22l-469 -148q-4 -2 -12 -2 q-14 0 -21 19l-16 45q-2 4 -2 10z" />
+<glyph unicode="&#xea;" horiz-adv-x="1189" d="M94 532q0 174 67.5 304.5t185.5 200t265 69.5t259 -65.5t173.5 -191.5t61.5 -298v-8q0 -18 -6 -27.5t-25 -9.5h-784q-18 0 -19 -31q0 -98 48.5 -182t130 -133t180.5 -49q205 0 319 170q8 8 14.5 9t14.5 -3l86 -43q16 -10 4 -29q-80 -123 -190.5 -179t-264.5 -56 q-150 0 -268.5 69.5t-185 195.5t-66.5 287zM276 618h623q23 0 29 5.5t6 23.5q0 90 -38 167t-110.5 123t-169.5 46q-104 0 -182 -52t-119 -135t-39 -178zM305 1300q0 6 10 17l209 186q23 23 52 23h79q14 0 23.5 -6.5t17.5 -12.5l207 -190q12 -12 12 -18.5t-14 -6.5h-121 q-23 0 -37 13l-110 102q-4 4 -11.5 11t-11.5 7q-6 0 -24 -18l-119 -102q-10 -8 -17.5 -10.5t-19.5 -2.5h-110q-14 0 -15 8z" />
+<glyph unicode="&#xeb;" horiz-adv-x="1189" d="M94 532q0 174 67.5 304.5t185.5 200t265 69.5t259 -65.5t173.5 -191.5t61.5 -298v-8q0 -18 -6 -27.5t-25 -9.5h-784q-18 0 -19 -31q0 -98 48.5 -182t130 -133t180.5 -49q205 0 319 170q8 8 14.5 9t14.5 -3l86 -43q16 -10 4 -29q-80 -123 -190.5 -179t-264.5 -56 q-150 0 -268.5 69.5t-185 195.5t-66.5 287zM276 618h623q23 0 29 5.5t6 23.5q0 90 -38 167t-110.5 123t-169.5 46q-104 0 -182 -52t-119 -135t-39 -178zM374 1321v172q0 14 5.5 20.5t17.5 6.5h125q12 0 17 -5.5t5 -19.5v-170q0 -18 -7 -24.5t-25 -6.5h-109q-16 0 -22.5 5.5 t-6.5 21.5zM673 1321v172q0 27 23 27h127q12 0 17.5 -5.5t5.5 -19.5v-170q0 -18 -7.5 -24.5t-27.5 -6.5h-107q-18 0 -24.5 5.5t-6.5 21.5z" />
+<glyph unicode="&#xec;" horiz-adv-x="489" d="M-49 1434l33 94q2 8 8 11t14 -1l475 -197q16 -8 8 -28l-16 -45q-4 -14 -11 -17.5t-22 0.5l-467 148q-33 8 -22 35zM158 29v1028q0 29 24 28h125q23 0 23 -26v-1024q0 -20 -8.5 -27.5t-28.5 -7.5h-105q-18 0 -24 6t-6 23z" />
+<glyph unicode="&#xed;" horiz-adv-x="489" d="M-24 1323q0 16 12 18l473 197q2 2 8 2q12 0 17 -12l30 -94q2 -4 3 -13q0 -16 -23 -22l-469 -148q-4 -2 -12 -2q-14 0 -21 19l-16 45q-2 4 -2 10zM158 29v1028q0 29 24 28h125q23 0 23 -26v-1024q0 -20 -8.5 -27.5t-28.5 -7.5h-105q-18 0 -24 6t-6 23z" />
+<glyph unicode="&#xee;" horiz-adv-x="489" d="M-60 1300q0 6 10 17l209 186q23 23 52 23h79q14 0 23.5 -6.5t17.5 -12.5l207 -190q12 -12 12 -18.5t-14 -6.5h-121q-23 0 -37 13l-110 102q-4 4 -11.5 11t-11.5 7q-6 0 -24 -18l-119 -102q-10 -8 -17.5 -10.5t-19.5 -2.5h-110q-14 0 -15 8zM158 29v1028q0 29 24 28h125 q23 0 23 -26v-1024q0 -20 -8.5 -27.5t-28.5 -7.5h-105q-18 0 -24 6t-6 23z" />
+<glyph unicode="&#xef;" horiz-adv-x="489" d="M10 1321v172q0 14 5.5 20.5t17.5 6.5h125q12 0 17 -5.5t5 -19.5v-170q0 -18 -7 -24.5t-25 -6.5h-109q-16 0 -22.5 5.5t-6.5 21.5zM158 29v1028q0 29 24 28h125q23 0 23 -26v-1024q0 -20 -8.5 -27.5t-28.5 -7.5h-105q-18 0 -24 6t-6 23zM309 1321v172q0 27 23 27h127 q12 0 17.5 -5.5t5.5 -19.5v-170q0 -18 -7.5 -24.5t-27.5 -6.5h-107q-18 0 -24.5 5.5t-6.5 21.5z" />
+<glyph unicode="&#xf0;" d="M94 516q0 158 65.5 283t181.5 195.5t259 70.5q158 0 258 -100q-90 193 -291 329l-303 -172q-4 -2 -12 -2q-12 0 -21 15l-22 34q-6 10 -6 15q0 8 10 14l270 150q-98 55 -215 100q-8 4 -9 11t7 14l74 57q4 2 9 5t11 3q10 0 19 -4q150 -53 239 -109l197 111q2 2 10 2 q12 0 15 -6l28 -53q8 -12 -4 -21l-159 -88q426 -291 425 -833q0 -164 -63 -291t-181 -196.5t-276 -69.5q-152 0 -269.5 68.5t-182 190t-64.5 277.5zM270 522q0 -119 44 -213t123 -147t179 -53q99 0 175.5 53t119.5 147t43 213t-43 214t-120.5 148.5t-176.5 53.5 q-98 0 -177 -54.5t-123 -148.5t-44 -213z" />
+<glyph unicode="&#xf1;" horiz-adv-x="1196" d="M158 27v1032q0 27 22 26h123q23 0 23 -22v-119q0 -23 18 -6q115 90 196 129t181 39q156 0 243 -84t87 -225v-764q0 -33 -31 -33h-115q-27 0 -26 27v731q0 102 -52.5 157.5t-160.5 55.5q-86 0 -159 -38t-177 -128v-774q0 -16 -7.5 -23.5t-23.5 -7.5h-113q-28 0 -28 27z M320 1430q0 8 10 16q41 31 74 46t82 15q35 0 65.5 -7t75.5 -21q33 -10 65.5 -19.5t63.5 -9.5q35 0 59.5 10t57.5 31q10 6 16 6q10 0 17 -16l20 -64q2 -4 2 -10q0 -10 -18 -21q-33 -20 -69 -32.5t-87 -12.5q-59 0 -141 29q-74 25 -119 25q-35 0 -57.5 -9.5t-41 -19.5 t-24.5 -14q-10 -6 -14 -6q-8 0 -14 16l-21 55q-2 4 -2 13z" />
+<glyph unicode="&#xf2;" d="M94 537q0 166 66.5 295t184.5 201.5t269 72.5q152 0 269.5 -72.5t182 -202t64.5 -292.5q0 -162 -65.5 -289t-183 -198.5t-269.5 -71.5q-153 0 -271 70.5t-182.5 197.5t-64.5 289zM270 543q0 -201 92.5 -317.5t253.5 -116.5q160 0 249 115.5t89 318.5q0 201 -91 318.5 t-249 117.5q-160 0 -252 -118t-92 -318zM320 1434l33 94q2 8 8 11t14 -1l475 -197q16 -8 8 -28l-16 -45q-4 -14 -11 -17.5t-22 0.5l-467 148q-33 8 -22 35z" />
+<glyph unicode="&#xf3;" d="M94 537q0 166 66.5 295t184.5 201.5t269 72.5q152 0 269.5 -72.5t182 -202t64.5 -292.5q0 -162 -65.5 -289t-183 -198.5t-269.5 -71.5q-153 0 -271 70.5t-182.5 197.5t-64.5 289zM270 543q0 -201 92.5 -317.5t253.5 -116.5q160 0 249 115.5t89 318.5q0 201 -91 318.5 t-249 117.5q-160 0 -252 -118t-92 -318zM344 1323q0 16 12 18l473 197q2 2 8 2q12 0 17 -12l30 -94q2 -4 3 -13q0 -16 -23 -22l-469 -148q-4 -2 -12 -2q-14 0 -21 19l-16 45q-2 4 -2 10z" />
+<glyph unicode="&#xf4;" d="M94 537q0 166 66.5 295t184.5 201.5t269 72.5q152 0 269.5 -72.5t182 -202t64.5 -292.5q0 -162 -65.5 -289t-183 -198.5t-269.5 -71.5q-153 0 -271 70.5t-182.5 197.5t-64.5 289zM270 543q0 -201 92.5 -317.5t253.5 -116.5q160 0 249 115.5t89 318.5q0 201 -91 318.5 t-249 117.5q-160 0 -252 -118t-92 -318zM309 1300q0 6 10 17l209 186q23 23 52 23h79q14 0 23.5 -6.5t17.5 -12.5l207 -190q12 -12 12 -18.5t-14 -6.5h-121q-23 0 -37 13l-110 102q-4 4 -11.5 11t-11.5 7q-6 0 -24 -18l-119 -102q-10 -8 -17.5 -10.5t-19.5 -2.5h-110 q-14 0 -15 8z" />
+<glyph unicode="&#xf5;" d="M94 537q0 166 66.5 295t184.5 201.5t269 72.5q152 0 269.5 -72.5t182 -202t64.5 -292.5q0 -162 -65.5 -289t-183 -198.5t-269.5 -71.5q-153 0 -271 70.5t-182.5 197.5t-64.5 289zM270 543q0 -201 92.5 -317.5t253.5 -116.5q160 0 249 115.5t89 318.5q0 201 -91 318.5 t-249 117.5q-160 0 -252 -118t-92 -318zM315 1430q0 8 10 16q41 31 74 46t82 15q35 0 65.5 -7t75.5 -21q33 -10 65.5 -19.5t63.5 -9.5q35 0 59.5 10t57.5 31q10 6 16 6q10 0 17 -16l20 -64q2 -4 2 -10q0 -10 -18 -21q-33 -20 -69 -32.5t-87 -12.5q-59 0 -141 29 q-74 25 -119 25q-35 0 -57.5 -9.5t-41 -19.5t-24.5 -14q-10 -6 -14 -6q-8 0 -14 16l-21 55q-2 4 -2 13z" />
+<glyph unicode="&#xf6;" d="M94 537q0 166 66.5 295t184.5 201.5t269 72.5q152 0 269.5 -72.5t182 -202t64.5 -292.5q0 -162 -65.5 -289t-183 -198.5t-269.5 -71.5q-153 0 -271 70.5t-182.5 197.5t-64.5 289zM270 543q0 -201 92.5 -317.5t253.5 -116.5q160 0 249 115.5t89 318.5q0 201 -91 318.5 t-249 117.5q-160 0 -252 -118t-92 -318zM378 1321v172q0 14 5.5 20.5t17.5 6.5h125q12 0 17 -5.5t5 -19.5v-170q0 -18 -7 -24.5t-25 -6.5h-109q-16 0 -22.5 5.5t-6.5 21.5zM677 1321v172q0 27 23 27h127q12 0 17.5 -5.5t5.5 -19.5v-170q0 -18 -7.5 -24.5t-27.5 -6.5h-107 q-18 0 -24.5 5.5t-6.5 21.5z" />
+<glyph unicode="&#xf7;" horiz-adv-x="1142" d="M127 719v88q0 25 18 24h850q20 0 21 -20v-88q0 -27 -33 -27l-829 -2q-27 0 -27 25zM459 319v168q0 25 18 25h191q18 0 18 -20v-168q0 -16 -7 -23.5t-28 -7.5h-164q-16 0 -22 6t-6 20zM459 1042v168q0 25 18 25h191q10 0 14 -5t4 -18v-168q0 -16 -7 -23t-28 -7h-164 q-16 0 -22 6t-6 22z" />
+<glyph unicode="&#xf8;" horiz-adv-x="1193" d="M41 68q0 10 12 22l125 121q-86 137 -86 326q0 166 65.5 296t184.5 201.5t270 71.5q104 0 193.5 -35t157.5 -100l102 100q12 12 22 12t19 -10l39 -39q8 -8 8 -18t-8 -19l-113 -110q96 -143 96 -348q0 -162 -65.5 -289t-183 -198.5t-269.5 -71.5q-111 0 -205 37.5 t-161 107.5l-115 -113q-12 -12 -25 -12q-12 0 -24 12l-27 29q-12 16 -12 27zM268 543q0 -117 33 -211l555 536q-92 111 -244 111q-160 0 -252 -118t-92 -318zM354 231q94 -123 258 -122q160 0 250 115.5t90 318.5q0 131 -41 229z" />
+<glyph unicode="&#xf9;" horiz-adv-x="1185" d="M143 293v762q0 31 31 30h115q27 0 26 -28v-719q0 -102 56.5 -162.5t154.5 -60.5q84 0 165 46t165 132v764q0 29 33 28h112q29 0 29 -28l-4 -1030q0 -27 -22 -27h-119q-23 0 -23 23v120q0 25 -18 7q-111 -94 -197 -132t-176 -38q-143 0 -235.5 86t-92.5 227zM270 1434 l33 94q2 8 8 11t14 -1l475 -197q16 -8 8 -28l-16 -45q-4 -14 -11 -17.5t-22 0.5l-467 148q-33 8 -22 35z" />
+<glyph unicode="&#xfa;" horiz-adv-x="1185" d="M143 293v762q0 31 31 30h115q27 0 26 -28v-719q0 -102 56.5 -162.5t154.5 -60.5q84 0 165 46t165 132v764q0 29 33 28h112q29 0 29 -28l-4 -1030q0 -27 -22 -27h-119q-23 0 -23 23v120q0 25 -18 7q-111 -94 -197 -132t-176 -38q-143 0 -235.5 86t-92.5 227zM295 1323 q0 16 12 18l473 197q2 2 8 2q12 0 17 -12l30 -94q2 -4 3 -13q0 -16 -23 -22l-469 -148q-4 -2 -12 -2q-14 0 -21 19l-16 45q-2 4 -2 10z" />
+<glyph unicode="&#xfb;" horiz-adv-x="1185" d="M143 293v762q0 31 31 30h115q27 0 26 -28v-719q0 -102 56.5 -162.5t154.5 -60.5q84 0 165 46t165 132v764q0 29 33 28h112q29 0 29 -28l-4 -1030q0 -27 -22 -27h-119q-23 0 -23 23v120q0 25 -18 7q-111 -94 -197 -132t-176 -38q-143 0 -235.5 86t-92.5 227zM260 1300 q0 6 10 17l209 186q23 23 52 23h79q14 0 23.5 -6.5t17.5 -12.5l207 -190q12 -12 12 -18.5t-14 -6.5h-121q-23 0 -37 13l-110 102q-4 4 -11.5 11t-11.5 7q-6 0 -24 -18l-119 -102q-10 -8 -17.5 -10.5t-19.5 -2.5h-110q-14 0 -15 8z" />
+<glyph unicode="&#xfc;" horiz-adv-x="1185" d="M143 293v762q0 31 31 30h115q27 0 26 -28v-719q0 -102 56.5 -162.5t154.5 -60.5q84 0 165 46t165 132v764q0 29 33 28h112q29 0 29 -28l-4 -1030q0 -27 -22 -27h-119q-23 0 -23 23v120q0 25 -18 7q-111 -94 -197 -132t-176 -38q-143 0 -235.5 86t-92.5 227zM329 1321v172 q0 14 5.5 20.5t17.5 6.5h125q12 0 17 -5.5t5 -19.5v-170q0 -18 -7 -24.5t-25 -6.5h-109q-16 0 -22.5 5.5t-6.5 21.5zM628 1321v172q0 27 23 27h127q12 0 17.5 -5.5t5.5 -19.5v-170q0 -18 -7.5 -24.5t-27.5 -6.5h-107q-18 0 -24.5 5.5t-6.5 21.5z" />
+<glyph unicode="&#xfd;" horiz-adv-x="1085" d="M55 1063q0 23 25 22h127q23 0 33 -22l305 -795q6 -18 16 -18q12 0 21 24l301 789q10 23 28 22h97q12 0 18 -9t2 -19l-450 -1153q-55 -139 -137.5 -190.5t-223.5 -51.5q-72 0 -98.5 4t-26.5 23v80q0 14 11.5 20t46.5 6h129q49 0 90 36t64.5 89t23.5 103q0 31 -8 49 l-392 979q-2 4 -2 12zM291 1323q0 16 12 18l473 197q2 2 8 2q12 0 17 -12l30 -94q2 -4 3 -13q0 -16 -23 -22l-469 -148q-4 -2 -12 -2q-14 0 -21 19l-16 45q-2 4 -2 10z" />
+<glyph unicode="&#xfe;" horiz-adv-x="1218" d="M158 -311v1798q0 16 7 24.5t25 8.5h109q29 0 29 -31v-520q0 -18 10 -19q6 0 16 11q43 43 76 69.5t96.5 51t149.5 24.5q129 0 230.5 -61.5t159.5 -184.5t58 -301q0 -180 -58 -311t-164.5 -199.5t-248.5 -68.5q-170 0 -291 102q-14 14 -22 14q-10 0 -10 -26v-381 q0 -27 -23 -27h-127q-23 0 -22 27zM330 240q65 -68 131.5 -102t146.5 -34q154 0 247 117t93 336q0 213 -92 318.5t-238 105.5q-82 0 -147 -36t-103 -91t-38 -109v-505z" />
+<glyph unicode="&#xff;" horiz-adv-x="1085" d="M55 1063q0 23 25 22h127q23 0 33 -22l305 -795q6 -18 16 -18q12 0 21 24l301 789q10 23 28 22h97q12 0 18 -9t2 -19l-450 -1153q-55 -139 -137.5 -190.5t-223.5 -51.5q-72 0 -98.5 4t-26.5 23v80q0 14 11.5 20t46.5 6h129q49 0 90 36t64.5 89t23.5 103q0 31 -8 49 l-392 979q-2 4 -2 12zM325 1321v172q0 14 5.5 20.5t17.5 6.5h125q12 0 17 -5.5t5 -19.5v-170q0 -18 -7 -24.5t-25 -6.5h-109q-16 0 -22.5 5.5t-6.5 21.5zM624 1321v172q0 27 23 27h127q12 0 17.5 -5.5t5.5 -19.5v-170q0 -18 -7.5 -24.5t-27.5 -6.5h-107q-18 0 -24.5 5.5 t-6.5 21.5z" />
+<glyph unicode="&#x152;" horiz-adv-x="2301" d="M133 754q0 248 80 425t229.5 269t356.5 92q150 0 263.5 -58.5t184.5 -172.5l25 196q2 14 24 15h863q20 0 20 -23v-104q0 -25 -27 -25h-700q-14 0 -20.5 -5t-6.5 -20v-479q0 -23 23 -22h514q23 0 23 -23v-108q0 -18 -21 -19h-516q-23 0 -23 -22v-498q0 -12 4.5 -16 t16.5 -4h737q12 0 17.5 -4.5t5.5 -16.5v-108q0 -23 -23 -23h-883q-12 0 -17 3t-7 11l-29 195q-70 -113 -186.5 -171t-269.5 -58q-311 0 -484.5 201.5t-173.5 572.5zM338 754q0 -317 111.5 -471t336.5 -154q222 0 329.5 153.5t107.5 471.5q0 324 -109.5 480.5t-329.5 156.5 q-223 0 -334.5 -158t-111.5 -479z" />
+<glyph unicode="&#x153;" horiz-adv-x="2041" d="M94 537q0 168 66.5 297t184.5 200.5t269 71.5q137 0 244 -61.5t168 -172.5q10 -12 16 -12q10 0 17 12q61 111 166.5 172.5t236.5 61.5q229 0 363.5 -149.5t134.5 -411.5q0 -39 -37 -39h-764q-31 0 -31 -37q0 -98 48.5 -180t129 -129t177.5 -47q207 0 321 168q6 8 12.5 9 t16.5 -3l86 -43q16 -12 2 -29q-80 -123 -189.5 -179t-263.5 -56q-133 0 -239.5 57t-171.5 164q-6 14 -15 14q-10 0 -22 -18q-63 -104 -169 -160.5t-239 -56.5q-153 0 -271 69.5t-182.5 195.5t-64.5 292zM270 543q0 -201 93.5 -317.5t252.5 -116.5q158 0 248 115.5t90 318.5 q0 201 -92 318.5t-248 117.5q-158 0 -251 -118t-93 -318zM1135 621l618 -3q23 0 29 5.5t6 23.5q0 88 -40 166t-112.5 124t-167.5 46q-94 0 -170.5 -46t-119.5 -129t-43 -187z" />
+<glyph unicode="&#x178;" horiz-adv-x="1382" d="M84 1503q0 16 29 17h147q18 0 25.5 -5.5t17.5 -19.5l381 -655q12 -25 23 -25q8 0 22 21l379 659q8 14 16.5 19.5t26.5 5.5h127q14 0 19.5 -8.5t-3.5 -20.5l-487 -815q-8 -12 -10 -25.5t-2 -42.5v-573q0 -18 -9.5 -26.5t-29.5 -8.5h-123q-33 0 -33 31v569q0 18 -3 28.5 t-13 26.5l-494 832q-6 10 -6 16zM456 1755v172q0 14 5.5 20.5t17.5 6.5h125q12 0 17 -5.5t5 -19.5v-170q0 -18 -7 -24.5t-25 -6.5h-109q-16 0 -22.5 5.5t-6.5 21.5zM755 1755v172q0 27 23 27h127q12 0 17.5 -5.5t5.5 -19.5v-170q0 -18 -7.5 -24.5t-27.5 -6.5h-107 q-18 0 -24.5 5.5t-6.5 21.5z" />
+<glyph unicode="&#x2c6;" horiz-adv-x="653" d="M20 1300q0 6 10 17l209 186q23 23 52 23h79q14 0 23.5 -6.5t17.5 -12.5l207 -190q12 -12 12 -18.5t-14 -6.5h-121q-23 0 -37 13l-110 102q-4 4 -11.5 11t-11.5 7q-6 0 -24 -18l-119 -102q-10 -8 -17.5 -10.5t-19.5 -2.5h-110q-14 0 -15 8z" />
+<glyph unicode="&#x2dc;" horiz-adv-x="677" d="M37 1430q0 8 10 16q41 31 74 46t82 15q35 0 65.5 -7t75.5 -21q33 -10 65.5 -19.5t63.5 -9.5q35 0 59.5 10t57.5 31q10 6 16 6q10 0 17 -16l20 -64q2 -4 2 -10q0 -10 -18 -21q-33 -20 -69 -32.5t-87 -12.5q-59 0 -141 29q-74 25 -119 25q-35 0 -57.5 -9.5t-41 -19.5 t-24.5 -14q-10 -6 -14 -6q-8 0 -14 16l-21 55q-2 4 -2 13z" />
+<glyph unicode="&#x2000;" horiz-adv-x="987" />
+<glyph unicode="&#x2001;" horiz-adv-x="1974" />
+<glyph unicode="&#x2002;" horiz-adv-x="987" />
+<glyph unicode="&#x2003;" horiz-adv-x="1974" />
+<glyph unicode="&#x2004;" horiz-adv-x="658" />
+<glyph unicode="&#x2005;" horiz-adv-x="493" />
+<glyph unicode="&#x2006;" horiz-adv-x="329" />
+<glyph unicode="&#x2007;" horiz-adv-x="329" />
+<glyph unicode="&#x2008;" horiz-adv-x="246" />
+<glyph unicode="&#x2009;" horiz-adv-x="394" />
+<glyph unicode="&#x200a;" horiz-adv-x="109" />
+<glyph unicode="&#x2010;" horiz-adv-x="780" d="M127 498v90q0 23 18 22l488 2q20 0 20 -20v-90q0 -29 -35 -29h-464q-14 0 -20.5 5t-6.5 20z" />
+<glyph unicode="&#x2011;" horiz-adv-x="780" d="M127 498v90q0 23 18 22l488 2q20 0 20 -20v-90q0 -29 -35 -29h-464q-14 0 -20.5 5t-6.5 20z" />
+<glyph unicode="&#x2012;" horiz-adv-x="780" d="M127 498v90q0 23 18 22l488 2q20 0 20 -20v-90q0 -29 -35 -29h-464q-14 0 -20.5 5t-6.5 20z" />
+<glyph unicode="&#x2013;" horiz-adv-x="1142" d="M127 483v90q0 23 18 23l850 2q20 0 21 -20v-91q0 -29 -33 -28h-829q-14 0 -20.5 5t-6.5 19z" />
+<glyph unicode="&#x2014;" horiz-adv-x="1802" d="M127 483v90q0 23 18 23l1510 2q20 0 20 -20v-91q0 -29 -33 -28h-1488q-14 0 -20.5 5t-6.5 19z" />
+<glyph unicode="&#x2018;" horiz-adv-x="454" d="M106 1061v164q0 4 7 16l153 260q12 18 39 19h35q8 0 13 -7.5t3 -15.5l-92 -197q-4 -16 -4 -20q0 -14 16 -16h35q14 -2 19.5 -7.5t5.5 -17.5v-176q0 -20 -19 -21h-192q-18 0 -19 19z" />
+<glyph unicode="&#x2019;" horiz-adv-x="454" d="M98 1065l90 195q6 16 7 22q0 12 -17 16h-35q-14 2 -19 7.5t-5 17.5v176q0 20 18 21h193q18 0 18 -19v-164q0 -4 -6 -16l-154 -260q-12 -18 -41 -19h-32q-11 0 -16 7.5t-1 15.5z" />
+<glyph unicode="&#x201a;" horiz-adv-x="454" d="M98 -233l90 194q6 14 7 23q0 14 -17 14l-35 2q-25 2 -24 23v178q0 20 18 20h193q8 0 13 -5t5 -13v-164q0 -6 -2 -11t-4 -8l-154 -258q-10 -18 -41 -18h-32q-11 0 -16 7t-1 16z" />
+<glyph unicode="&#x201c;" horiz-adv-x="815" d="M106 1061v164q0 4 7 16l153 260q12 18 39 19h35q8 0 13 -7.5t3 -15.5l-92 -197q-4 -16 -4 -20q0 -14 16 -16h35q14 -2 19.5 -7.5t5.5 -17.5v-176q0 -20 -19 -21h-192q-19 1 -19 19zM469 1061v164q0 8 4 16l154 260q12 18 41 19h32q10 0 15.5 -7.5t1.5 -15.5l-90 -197 q-6 -12 -6 -22t16 -14h35q14 -2 19 -7.5t5 -17.5v-176q0 -20 -18 -21h-191q-18 1 -18 19z" />
+<glyph unicode="&#x201d;" horiz-adv-x="817" d="M98 1065l90 195q6 16 7 22q0 12 -17 16h-35q-14 2 -19 7.5t-5 17.5v176q0 20 18 21h193q18 0 18 -19v-164q0 -4 -6 -16l-154 -260q-12 -18 -41 -19h-32q-11 0 -16 7.5t-1 15.5zM459 1065l92 195q4 16 4 22q0 14 -16 16h-33q-14 2 -20.5 7.5t-6.5 17.5v176q0 20 19 21h192 q18 0 19 -19v-164q0 -10 -7 -16l-153 -260q-12 -18 -39 -19h-35q-8 0 -13 7.5t-3 15.5z" />
+<glyph unicode="&#x201e;" horiz-adv-x="817" d="M98 -233l90 194q6 14 7 23q0 14 -17 14l-35 2q-25 2 -24 23v178q0 20 18 20h193q8 0 13 -5t5 -13v-164q0 -6 -2 -11t-4 -8l-154 -258q-10 -18 -41 -18h-32q-11 0 -16 7t-1 16zM458 -233l90 194q6 14 7 23q0 14 -17 14l-35 2q-25 2 -24 23v178q0 20 18 20h193q8 0 13 -5 t5 -13v-164q0 -6 -2 -11t-4 -8l-154 -258q-10 -18 -41 -18h-32q-11 0 -16 7t-1 16z" />
+<glyph unicode="&#x2022;" horiz-adv-x="636" d="M123 772q0 80 57.5 137.5t136.5 57.5q80 0 137.5 -57.5t57.5 -137.5t-57.5 -137t-137.5 -57q-79 0 -136.5 57t-57.5 137z" />
+<glyph unicode="&#x2026;" horiz-adv-x="1533" d="M106 29v176q0 27 23 26h168q20 0 20 -24v-174q0 -18 -8 -25.5t-28 -7.5h-144q-16 0 -23.5 6t-7.5 23zM645 29v176q0 27 23 26h168q20 0 20 -24v-174q0 -18 -8 -25.5t-28 -7.5h-144q-16 0 -23.5 6t-7.5 23zM1183 29v176q0 27 23 26h168q20 0 20 -24v-174q0 -18 -8 -25.5 t-28 -7.5h-144q-16 0 -23.5 6t-7.5 23z" />
+<glyph unicode="&#x202f;" horiz-adv-x="394" />
+<glyph unicode="&#x2039;" horiz-adv-x="546" d="M80 528q0 10 6 19l260 362q6 8 10 10.5t11 2.5h63q8 0 13.5 -6.5t0.5 -14.5l-202 -358q-8 -20 0 -33l202 -346q2 -2 2 -6q0 -8 -20 -8h-59q-16 0 -21 12l-258 342q-8 10 -8 24z" />
+<glyph unicode="&#x203a;" horiz-adv-x="548" d="M102 907q0 6 5.5 10.5t11.5 4.5h63q6 0 10.5 -2t10.5 -11l260 -362q6 -8 6 -19q0 -14 -8 -24l-258 -342q-4 -12 -21 -12h-59q-25 0 -19 14l203 346q4 6 4 16q0 12 -4 17l-203 358q-2 2 -2 6z" />
+<glyph unicode="&#x205f;" horiz-adv-x="493" />
+<glyph unicode="&#x20ac;" horiz-adv-x="1228" d="M-25 563v66q0 25 19 24h158q-4 70 -5 109q0 41 5 110h-150q-27 0 -27 25v66q0 23 19 22h172q49 262 207.5 408.5t398.5 146.5q102 0 196.5 -35t168.5 -98q6 -6 6 -12q0 -8 -10 -19l-80 -73q-8 -8 -19.5 -10.5t-17.5 3.5q-115 92 -230 93q-170 0 -275 -101.5t-142 -302.5 l405 2q20 0 21 -20v-66q0 -14 -7.5 -20.5t-25.5 -6.5l-408 -2q-4 -70 -4 -114q0 -39 4 -105h420q20 0 21 -20v-64q0 -29 -33 -28l-393 -2q37 -199 146.5 -301.5t285.5 -102.5q133 0 248 88q12 12 22 2l74 -86q12 -16 4 -24q-74 -63 -169 -99t-200 -36q-244 0 -404.5 146 t-209.5 413h-164q-27 0 -27 24z" />
+<glyph unicode="&#x2122;" horiz-adv-x="1906" d="M53 1438v67q0 14 17 15h688q14 0 14 -15v-67q0 -12 -14 -13h-260q-14 0 -15 -12v-827q0 -16 -14 -17h-92q-16 0 -17 17v825q0 8 -2 11t-10 3h-278q-16 0 -17 13zM915 588v913q0 18 15 19h123q10 0 14 -3.5t8 -11.5l285 -733q10 -25 18 0l285 731q6 16 20 17h127 q16 0 17 -17v-913q0 -20 -21 -21h-84q-10 0 -14 3t-4 14v733q0 6 -3 5t-5 -7l-281 -731q-6 -16 -24 -17h-62q-20 0 -26 17l-277 725q-2 6 -4 6t-2 -6v-725q0 -10 -4 -13.5t-15 -3.5h-69q-17 1 -17 19z" />
+<glyph unicode="&#x25fc;" horiz-adv-x="1085" d="M0 0v1085h1085v-1085h-1085z" />
+<hkern u1="&#x28;" u2="j" k="-178" />
+<hkern u1="[" u2="j" k="-217" />
+<hkern u1="t" u2="q" k="12" />
+<hkern u1="&#x7b;" u2="j" k="-203" />
+<hkern u1="&#xbf;" u2="j" k="-111" />
+<hkern g1="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	g2="C,G,O,Q,Ccedilla,Ograve,Oacute,Ocircumflex,Otilde,Odieresis,OE" 	k="88" />
+<hkern g1="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	g2="T" 	k="217" />
+<hkern g1="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	g2="U,Ugrave,Uacute,Ucircumflex,Udieresis" 	k="88" />
+<hkern g1="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	g2="V" 	k="166" />
+<hkern g1="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	g2="W" 	k="201" />
+<hkern g1="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	g2="Y,Yacute,Ydieresis" 	k="207" />
+<hkern g1="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	g2="quoteright,quotedblright" 	k="135" />
+<hkern g1="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	g2="quotedbl,quotesingle" 	k="207" />
+<hkern g1="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	g2="t" 	k="47" />
+<hkern g1="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	g2="v" 	k="94" />
+<hkern g1="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	g2="w" 	k="74" />
+<hkern g1="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	g2="y,yacute,ydieresis" 	k="68" />
+<hkern g1="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	g2="S" 	k="6" />
+<hkern g1="B" 	g2="T" 	k="57" />
+<hkern g1="B" 	g2="V" 	k="43" />
+<hkern g1="B" 	g2="Y,Yacute,Ydieresis" 	k="68" />
+<hkern g1="F" 	g2="C,G,O,Q,Ccedilla,Ograve,Oacute,Ocircumflex,Otilde,Odieresis,OE" 	k="70" />
+<hkern g1="F" 	g2="t" 	k="88" />
+<hkern g1="F" 	g2="v" 	k="45" />
+<hkern g1="F" 	g2="w" 	k="70" />
+<hkern g1="F" 	g2="y,yacute,ydieresis" 	k="102" />
+<hkern g1="F" 	g2="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	k="158" />
+<hkern g1="F" 	g2="AE" 	k="313" />
+<hkern g1="F" 	g2="J" 	k="119" />
+<hkern g1="F" 	g2="a,agrave,aacute,acircumflex,atilde,adieresis,aring" 	k="176" />
+<hkern g1="F" 	g2="f,uniFB01,uniFB02" 	k="125" />
+<hkern g1="F" 	g2="g" 	k="131" />
+<hkern g1="F" 	g2="m,n,ntilde" 	k="135" />
+<hkern g1="F" 	g2="c,d,e,o,ccedilla,egrave,eacute,ecircumflex,edieresis,ograve,oacute,ocircumflex,otilde,odieresis,oslash,oe" 	k="162" />
+<hkern g1="F" 	g2="comma,period" 	k="266" />
+<hkern g1="F" 	g2="r" 	k="113" />
+<hkern g1="F" 	g2="s" 	k="111" />
+<hkern g1="F" 	g2="u,ugrave,uacute,ucircumflex,udieresis" 	k="74" />
+<hkern g1="F" 	g2="x" 	k="131" />
+<hkern g1="F" 	g2="z" 	k="131" />
+<hkern g1="F" 	g2="p" 	k="139" />
+<hkern g1="F" 	g2="q" 	k="150" />
+<hkern g1="G" 	g2="Y,Yacute,Ydieresis" 	k="88" />
+<hkern g1="K" 	g2="C,G,O,Q,Ccedilla,Ograve,Oacute,Ocircumflex,Otilde,Odieresis,OE" 	k="102" />
+<hkern g1="K" 	g2="v" 	k="170" />
+<hkern g1="K" 	g2="w" 	k="109" />
+<hkern g1="K" 	g2="y,yacute,ydieresis" 	k="109" />
+<hkern g1="K" 	g2="a,agrave,aacute,acircumflex,atilde,adieresis,aring" 	k="57" />
+<hkern g1="K" 	g2="c,d,e,o,ccedilla,egrave,eacute,ecircumflex,edieresis,ograve,oacute,ocircumflex,otilde,odieresis,oslash,oe" 	k="102" />
+<hkern g1="K" 	g2="u,ugrave,uacute,ucircumflex,udieresis" 	k="61" />
+<hkern g1="K" 	g2="hyphen,endash,emdash" 	k="102" />
+<hkern g1="L" 	g2="C,G,O,Q,Ccedilla,Ograve,Oacute,Ocircumflex,Otilde,Odieresis,OE" 	k="139" />
+<hkern g1="L" 	g2="T" 	k="201" />
+<hkern g1="L" 	g2="U,Ugrave,Uacute,Ucircumflex,Udieresis" 	k="90" />
+<hkern g1="L" 	g2="V" 	k="188" />
+<hkern g1="L" 	g2="W" 	k="164" />
+<hkern g1="L" 	g2="Y,Yacute,Ydieresis" 	k="252" />
+<hkern g1="L" 	g2="quoteright,quotedblright" 	k="313" />
+<hkern g1="L" 	g2="quotedbl,quotesingle" 	k="348" />
+<hkern g1="L" 	g2="v" 	k="133" />
+<hkern g1="L" 	g2="w" 	k="90" />
+<hkern g1="L" 	g2="y,yacute,ydieresis" 	k="106" />
+<hkern g1="L" 	g2="hyphen,endash,emdash" 	k="127" />
+<hkern g1="D,O,Q,Eth,Ograve,Oacute,Ocircumflex,Otilde,Odieresis" 	g2="T" 	k="113" />
+<hkern g1="D,O,Q,Eth,Ograve,Oacute,Ocircumflex,Otilde,Odieresis" 	g2="V" 	k="88" />
+<hkern g1="D,O,Q,Eth,Ograve,Oacute,Ocircumflex,Otilde,Odieresis" 	g2="W" 	k="88" />
+<hkern g1="D,O,Q,Eth,Ograve,Oacute,Ocircumflex,Otilde,Odieresis" 	g2="Y,Yacute,Ydieresis" 	k="135" />
+<hkern g1="D,O,Q,Eth,Ograve,Oacute,Ocircumflex,Otilde,Odieresis" 	g2="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	k="88" />
+<hkern g1="D,O,Q,Eth,Ograve,Oacute,Ocircumflex,Otilde,Odieresis" 	g2="AE" 	k="164" />
+<hkern g1="D,O,Q,Eth,Ograve,Oacute,Ocircumflex,Otilde,Odieresis" 	g2="comma,period" 	k="127" />
+<hkern g1="D,O,Q,Eth,Ograve,Oacute,Ocircumflex,Otilde,Odieresis" 	g2="X" 	k="119" />
+<hkern g1="D,O,Q,Eth,Ograve,Oacute,Ocircumflex,Otilde,Odieresis" 	g2="Z" 	k="43" />
+<hkern g1="P" 	g2="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	k="170" />
+<hkern g1="P" 	g2="AE" 	k="260" />
+<hkern g1="P" 	g2="J" 	k="170" />
+<hkern g1="P" 	g2="c,d,e,o,ccedilla,egrave,eacute,ecircumflex,edieresis,ograve,oacute,ocircumflex,otilde,odieresis,oslash,oe" 	k="106" />
+<hkern g1="P" 	g2="comma,period" 	k="254" />
+<hkern g1="P" 	g2="X" 	k="68" />
+<hkern g1="R" 	g2="T" 	k="27" />
+<hkern g1="R" 	g2="V" 	k="27" />
+<hkern g1="R" 	g2="W" 	k="27" />
+<hkern g1="R" 	g2="Y,Yacute,Ydieresis" 	k="37" />
+<hkern g1="S" 	g2="Y,Yacute,Ydieresis" 	k="31" />
+<hkern g1="S" 	g2="t" 	k="57" />
+<hkern g1="T" 	g2="C,G,O,Q,Ccedilla,Ograve,Oacute,Ocircumflex,Otilde,Odieresis,OE" 	k="113" />
+<hkern g1="T" 	g2="v" 	k="162" />
+<hkern g1="T" 	g2="w" 	k="156" />
+<hkern g1="T" 	g2="y,yacute,ydieresis" 	k="162" />
+<hkern g1="T" 	g2="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	k="217" />
+<hkern g1="T" 	g2="AE" 	k="303" />
+<hkern g1="T" 	g2="J" 	k="164" />
+<hkern g1="T" 	g2="a,agrave,aacute,acircumflex,atilde,adieresis,aring" 	k="172" />
+<hkern g1="T" 	g2="m,n,ntilde" 	k="162" />
+<hkern g1="T" 	g2="c,d,e,o,ccedilla,egrave,eacute,ecircumflex,edieresis,ograve,oacute,ocircumflex,otilde,odieresis,oslash,oe" 	k="217" />
+<hkern g1="T" 	g2="comma,period" 	k="283" />
+<hkern g1="T" 	g2="r" 	k="170" />
+<hkern g1="T" 	g2="s" 	k="201" />
+<hkern g1="T" 	g2="u,ugrave,uacute,ucircumflex,udieresis" 	k="176" />
+<hkern g1="T" 	g2="x" 	k="141" />
+<hkern g1="T" 	g2="z" 	k="156" />
+<hkern g1="T" 	g2="hyphen,endash,emdash" 	k="246" />
+<hkern g1="T" 	g2="colon,semicolon" 	k="178" />
+<hkern g1="U,Ugrave,Uacute,Ucircumflex,Udieresis" 	g2="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	k="88" />
+<hkern g1="U,Ugrave,Uacute,Ucircumflex,Udieresis" 	g2="AE" 	k="158" />
+<hkern g1="V" 	g2="C,G,O,Q,Ccedilla,Ograve,Oacute,Ocircumflex,Otilde,Odieresis,OE" 	k="88" />
+<hkern g1="V" 	g2="y,yacute,ydieresis" 	k="74" />
+<hkern g1="V" 	g2="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	k="166" />
+<hkern g1="V" 	g2="AE" 	k="260" />
+<hkern g1="V" 	g2="a,agrave,aacute,acircumflex,atilde,adieresis,aring" 	k="113" />
+<hkern g1="V" 	g2="g" 	k="135" />
+<hkern g1="V" 	g2="m,n,ntilde" 	k="119" />
+<hkern g1="V" 	g2="c,d,e,o,ccedilla,egrave,eacute,ecircumflex,edieresis,ograve,oacute,ocircumflex,otilde,odieresis,oslash,oe" 	k="125" />
+<hkern g1="V" 	g2="comma,period" 	k="260" />
+<hkern g1="V" 	g2="r" 	k="109" />
+<hkern g1="V" 	g2="s" 	k="98" />
+<hkern g1="V" 	g2="u,ugrave,uacute,ucircumflex,udieresis" 	k="119" />
+<hkern g1="V" 	g2="hyphen,endash,emdash" 	k="158" />
+<hkern g1="V" 	g2="colon,semicolon" 	k="96" />
+<hkern g1="W" 	g2="C,G,O,Q,Ccedilla,Ograve,Oacute,Ocircumflex,Otilde,Odieresis,OE" 	k="88" />
+<hkern g1="W" 	g2="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	k="201" />
+<hkern g1="W" 	g2="AE" 	k="268" />
+<hkern g1="W" 	g2="a,agrave,aacute,acircumflex,atilde,adieresis,aring" 	k="109" />
+<hkern g1="W" 	g2="m,n,ntilde" 	k="96" />
+<hkern g1="W" 	g2="c,d,e,o,ccedilla,egrave,eacute,ecircumflex,edieresis,ograve,oacute,ocircumflex,otilde,odieresis,oslash,oe" 	k="141" />
+<hkern g1="W" 	g2="comma,period" 	k="236" />
+<hkern g1="W" 	g2="u,ugrave,uacute,ucircumflex,udieresis" 	k="102" />
+<hkern g1="W" 	g2="hyphen,endash,emdash" 	k="133" />
+<hkern g1="X" 	g2="C,G,O,Q,Ccedilla,Ograve,Oacute,Ocircumflex,Otilde,Odieresis,OE" 	k="119" />
+<hkern g1="X" 	g2="y,yacute,ydieresis" 	k="119" />
+<hkern g1="X" 	g2="hyphen,endash,emdash" 	k="147" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="C,G,O,Q,Ccedilla,Ograve,Oacute,Ocircumflex,Otilde,Odieresis,OE" 	k="135" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="t" 	k="53" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="v" 	k="104" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="w" 	k="94" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="S" 	k="59" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	k="207" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="AE" 	k="283" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="a,agrave,aacute,acircumflex,atilde,adieresis,aring" 	k="186" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="g" 	k="207" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="m,n,ntilde" 	k="129" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="c,d,e,o,ccedilla,egrave,eacute,ecircumflex,edieresis,ograve,oacute,ocircumflex,otilde,odieresis,oslash,oe" 	k="217" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="comma,period" 	k="293" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="s" 	k="158" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="u,ugrave,uacute,ucircumflex,udieresis" 	k="141" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="x" 	k="119" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="z" 	k="111" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="hyphen,endash,emdash" 	k="236" />
+<hkern g1="Y,Yacute,Ydieresis" 	g2="colon,semicolon" 	k="125" />
+<hkern g1="Z" 	g2="C,G,O,Q,Ccedilla,Ograve,Oacute,Ocircumflex,Otilde,Odieresis,OE" 	k="47" />
+<hkern g1="Z" 	g2="hyphen,endash,emdash" 	k="113" />
+<hkern g1="C" 	g2="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	k="47" />
+<hkern g1="E" 	g2="C,G,O,Q,Ccedilla,Ograve,Oacute,Ocircumflex,Otilde,Odieresis,OE" 	k="94" />
+<hkern g1="E" 	g2="v" 	k="129" />
+<hkern g1="E" 	g2="w" 	k="102" />
+<hkern g1="E" 	g2="y,yacute,ydieresis" 	k="82" />
+<hkern g1="E" 	g2="x" 	k="45" />
+<hkern g1="f" 	g2="c,d,e,o,ccedilla,egrave,eacute,ecircumflex,edieresis,ograve,oacute,ocircumflex,otilde,odieresis,oslash,oe" 	k="43" />
+<hkern g1="f" 	g2="parenright,question,bracketright,braceright" 	k="-147" />
+<hkern g1="f" 	g2="comma,period" 	k="90" />
+<hkern g1="f" 	g2="quoteright,quotedblright" 	k="-133" />
+<hkern g1="f" 	g2="asterisk" 	k="-14" />
+<hkern g1="f" 	g2="q" 	k="27" />
+<hkern g1="k" 	g2="c,d,e,o,ccedilla,egrave,eacute,ecircumflex,edieresis,ograve,oacute,ocircumflex,otilde,odieresis,oslash,oe" 	k="59" />
+<hkern g1="k" 	g2="q" 	k="57" />
+<hkern g1="k" 	g2="hyphen,endash,emdash" 	k="119" />
+<hkern g1="k" 	g2="s" 	k="27" />
+<hkern g1="o,ograve,oacute,ocircumflex,otilde,odieresis,oslash" 	g2="comma,period" 	k="57" />
+<hkern g1="o,ograve,oacute,ocircumflex,otilde,odieresis,oslash" 	g2="f,uniFB01,uniFB02" 	k="27" />
+<hkern g1="o,ograve,oacute,ocircumflex,otilde,odieresis,oslash" 	g2="quotedbl,quotesingle" 	k="72" />
+<hkern g1="o,ograve,oacute,ocircumflex,otilde,odieresis,oslash" 	g2="t" 	k="12" />
+<hkern g1="o,ograve,oacute,ocircumflex,otilde,odieresis,oslash" 	g2="v" 	k="47" />
+<hkern g1="o,ograve,oacute,ocircumflex,otilde,odieresis,oslash" 	g2="x" 	k="43" />
+<hkern g1="r" 	g2="c,d,e,o,ccedilla,egrave,eacute,ecircumflex,edieresis,ograve,oacute,ocircumflex,otilde,odieresis,oslash,oe" 	k="27" />
+<hkern g1="r" 	g2="comma,period" 	k="170" />
+<hkern g1="r" 	g2="q" 	k="27" />
+<hkern g1="r" 	g2="hyphen,endash,emdash" 	k="113" />
+<hkern g1="r" 	g2="quotedbl,quotesingle" 	k="-20" />
+<hkern g1="r" 	g2="a,agrave,aacute,acircumflex,atilde,adieresis,aring" 	k="6" />
+<hkern g1="v" 	g2="c,d,e,o,ccedilla,egrave,eacute,ecircumflex,edieresis,ograve,oacute,ocircumflex,otilde,odieresis,oslash,oe" 	k="61" />
+<hkern g1="v" 	g2="comma,period" 	k="143" />
+<hkern g1="v" 	g2="q" 	k="61" />
+<hkern g1="w" 	g2="comma,period" 	k="143" />
+<hkern g1="x" 	g2="c,d,e,o,ccedilla,egrave,eacute,ecircumflex,edieresis,ograve,oacute,ocircumflex,otilde,odieresis,oslash,oe" 	k="59" />
+<hkern g1="x" 	g2="q" 	k="43" />
+<hkern g1="x" 	g2="hyphen,endash,emdash" 	k="119" />
+<hkern g1="x" 	g2="f,uniFB01,uniFB02" 	k="6" />
+<hkern g1="x" 	g2="t" 	k="29" />
+<hkern g1="x" 	g2="y,yacute,ydieresis" 	k="23" />
+<hkern g1="y,yacute,ydieresis" 	g2="comma,period" 	k="135" />
+<hkern g1="y,yacute,ydieresis" 	g2="g" 	k="12" />
+<hkern g1="b" 	g2="f,uniFB01,uniFB02" 	k="27" />
+<hkern g1="b" 	g2="t" 	k="12" />
+<hkern g1="b" 	g2="v" 	k="61" />
+<hkern g1="b" 	g2="x" 	k="43" />
+<hkern g1="e" 	g2="quotedbl,quotesingle" 	k="41" />
+<hkern g1="e" 	g2="t" 	k="8" />
+<hkern g1="e" 	g2="x" 	k="37" />
+<hkern g1="j" 	g2="parenright,question,bracketright,braceright" 	k="-61" />
+<hkern g1="p" 	g2="f,uniFB01,uniFB02" 	k="27" />
+<hkern g1="p" 	g2="t" 	k="6" />
+<hkern g1="p" 	g2="v" 	k="61" />
+<hkern g1="p" 	g2="x" 	k="43" />
+<hkern g1="t" 	g2="c,d,e,o,ccedilla,egrave,eacute,ecircumflex,edieresis,ograve,oacute,ocircumflex,otilde,odieresis,oslash,oe" 	k="27" />
+<hkern g1="t" 	g2="quoteright,quotedblright" 	k="-55" />
+<hkern g1="t" 	g2="quotedbl,quotesingle" 	k="-14" />
+<hkern g1="g" 	g2="c,d,e,o,ccedilla,egrave,eacute,ecircumflex,edieresis,ograve,oacute,ocircumflex,otilde,odieresis,oslash,oe" 	k="16" />
+<hkern g1="hyphen,endash,emdash" 	g2="T" 	k="246" />
+<hkern g1="hyphen,endash,emdash" 	g2="V" 	k="158" />
+<hkern g1="hyphen,endash,emdash" 	g2="W" 	k="133" />
+<hkern g1="hyphen,endash,emdash" 	g2="X" 	k="147" />
+<hkern g1="hyphen,endash,emdash" 	g2="Y,Yacute,Ydieresis" 	k="236" />
+<hkern g1="hyphen,endash,emdash" 	g2="Z" 	k="113" />
+<hkern g1="hyphen,endash,emdash" 	g2="x" 	k="119" />
+<hkern g1="comma,period" 	g2="T" 	k="283" />
+<hkern g1="comma,period" 	g2="V" 	k="260" />
+<hkern g1="comma,period" 	g2="W" 	k="236" />
+<hkern g1="comma,period" 	g2="Y,Yacute,Ydieresis" 	k="293" />
+<hkern g1="comma,period" 	g2="C,G,O,Q,Ccedilla,Ograve,Oacute,Ocircumflex,Otilde,Odieresis,OE" 	k="127" />
+<hkern g1="comma,period" 	g2="f,uniFB01,uniFB02" 	k="90" />
+<hkern g1="comma,period" 	g2="c,d,e,o,ccedilla,egrave,eacute,ecircumflex,edieresis,ograve,oacute,ocircumflex,otilde,odieresis,oslash,oe" 	k="57" />
+<hkern g1="comma,period" 	g2="v" 	k="143" />
+<hkern g1="comma,period" 	g2="w" 	k="139" />
+<hkern g1="comma,period" 	g2="y,yacute,ydieresis" 	k="113" />
+<hkern g1="quoteleft,quotedblleft" 	g2="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	k="170" />
+<hkern g1="quoteright,quotedblright" 	g2="c,d,e,o,ccedilla,egrave,eacute,ecircumflex,edieresis,ograve,oacute,ocircumflex,otilde,odieresis,oslash,oe" 	k="139" />
+<hkern g1="quoteright,quotedblright" 	g2="v" 	k="14" />
+<hkern g1="quoteright,quotedblright" 	g2="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	k="193" />
+<hkern g1="quoteright,quotedblright" 	g2="r" 	k="45" />
+<hkern g1="quoteright,quotedblright" 	g2="s" 	k="127" />
+<hkern g1="quotedbl,quotesingle" 	g2="c,d,e,o,ccedilla,egrave,eacute,ecircumflex,edieresis,ograve,oacute,ocircumflex,otilde,odieresis,oslash,oe" 	k="86" />
+<hkern g1="quotedbl,quotesingle" 	g2="A,Agrave,Aacute,Acircumflex,Atilde,Adieresis,Aring" 	k="207" />
+<hkern g1="quotedbl,quotesingle" 	g2="r" 	k="14" />
+<hkern g1="quotedbl,quotesingle" 	g2="s" 	k="90" />
+</font>
+</defs></svg> 

ui/src/shared/functions.js

@@ -14,6 +14,33 @@ const rndId = (_code) => {
     : lastDigit;
 };
 
+const generateFonts = (fontFamilies, fontFilenames) => {
+  const pathToFont = '../../shared/fonts/';
+  let fontCSS = '';
+
+  fontFamilies.forEach( (fontFamily, i) => {
+    fontCSS += `
+      @font-face {
+        font-family: ${fontFamily};
+        src: url(${pathToFont + fontFilenames[i]}.eot);
+        src: url(${pathToFont + fontFilenames[i]}.eot?#iefix) 
+             format('embedded-opentype');
+        src: url(${pathToFont + fontFilenames[i]}.woff) 
+             format('woff');
+        src: url(${pathToFont + fontFilenames[i]}.woff2) 
+             format('woff2');
+        src: url(${pathToFont + fontFilenames[i]}.ttf) 
+             format('truetype');
+        src: url(${pathToFont + fontFilenames[i]}.svg#${fontFamily}) 
+             format('svg');
+        font-weight: normal;
+        font-style: normal;  
+      }
+    `;
+  });
+  return fontCSS;
+};
+
 module.exports = {
   remcalc: (values) => {
     values = values.toString().replace('px', '').split(' ');
@@ -29,5 +56,6 @@ module.exports = {
     return outputRems;
   },
   calc: (str) => calc(`calc(${str})`),
-  rndId
+  rndId,
+  generateFonts
 };

ui/src/shared/mixins.css

@@ -1,30 +0,0 @@
-~boxes: "./constants.js";
-
-@define-mixin pseduo-element $type, $width:auto, $height:auto, $top:auto, $right:auto, $bottom:auto, $left:auto {
-  position: relative;
-
-  &:$( type ) {
-    bottom: $bottom;
-    content: "";
-    display: inline-block;
-    height: $height;
-    left: $left;
-    position: absolute;
-    right: $right;
-    top: $top;
-    width: $width;
-
-    @mixin-content;
-  }
-}
-
-@define-mixin move-z $amount:0, $position:relative {
-  position: $position;
-  z-index: $amount;
-}
-
-@define-mixin create-base-box-properties $border-radius: ~boxes.borderRadius, $border: ~boxes.border.unchecked, $box-shadow: ~boxes.bottomShaddow {
-  border: $border;
-  border-radius: $border-radius;
-  box-shadow: $box-shadow;
-}

ui/src/shared/redux-form-proxy.js

@@ -0,0 +1,36 @@
+const React = require('react');
+const transformPropsWith = require('transform-props-with');
+
+const {
+  default: tx
+} = transformPropsWith;
+
+const Proxy = tx(props => {
+  
+  const {
+    input,
+    meta,
+    ...rest
+  } = props;
+
+  return {
+    ...input,
+    ...meta,
+    ...rest
+  };
+});
+
+const isReduxForm = (props) =>
+  props.hasOwnProperty('input') || props.hasOwnProperty('meta');
+
+module.exports = (Component) => {
+  const ProxiedComponent = Proxy(Component);
+
+  return (props) => {
+    return isReduxForm(props) ? (
+      <ProxiedComponent {...props} />
+    ) : (
+      <Component {...props} />
+    );
+  };
+};

ui/stories/index.js

@@ -6,47 +6,20 @@ const {
 } = require('@kadira/storybook');
 
 const {
-  Avatar,
   Base,
-  Button,
-  Checkbox,
   Column,
   Container,
-  Input,
-  List: {
-    ListItem,
-    ListItemView,
-    ListItemTitle,
-    ListItemSubTitle,
-    ListItemDescription,
-    ListItemMeta,
-    ListItemOutlet,
-    ListItemOptions,
+  MiniMetric: {
+    MiniMetricGraph,
+    MiniMetricMeta,
+    MiniMetricTitle,
+    MiniMetricSubtitle,
+    MiniMetricView
   },
   Row,
-  MiniMetric,
-  Modal,
-  Notificaton,
-  Pagination,
-  Radio,
-  RadioGroup,
-  RangeSlider,
-  Select,
-  SelectCustom,
-  Tab,
-  Tabs,
-  Toggle,
-  Tooltip,
-  Topology,
-  Widget,
 } = require('../src/');
 
-
-
-const seed = require('./seed');
-const {
-	selectData
-} = seed;
+const MiniMetricData = require('../src/components/list/mini-metric-data');
 
 const styles = {
   base: {
@@ -102,436 +75,37 @@ storiesOf('Grid', module)
     </Base>
   ));
 
-const profile =
-  'https://pbs.twimg.com/profile_images/' +
-  '641289584580493312/VBfsPlff_400x400.jpg';
-
-storiesOf('Avatar', module)
-  .add('Avatar Picture', () => (
-    <Avatar
-      color='#ef6176'
-      name='Tom'
-      src={profile}
-    />
-  ))
-  .add('Avatar Text', () => (
-    <Base>
-      <Avatar
-        color='#35a8c0'
-        name='Alex'
-      />
-      <Avatar
-        color='#35a8c0'
-        name='Thomas'
-      />
-      <Avatar
-        color='#35a8c0'
-        name='귀여운 오리'
-      />
-    </Base>
-  ));
-
-storiesOf('Button', module)
-  .add('With text', () => (
-    <Button>
-      Inspire the lazy
-    </Button>
-  )).add('Secondary', () => (
-    <Button secondary>
-      Inspire the brave
-    </Button>
-  )).add('Disabled', () => (
-    <Button disabled>
-      Inspire the liars
-    </Button>
-  )).add('Anchor', () => (
-    <div>
-      <Button href='#'>
-        Inspire the anchor
-      </Button>
-    </div>
-  ));
-
-storiesOf('Checkbox', module)
-  .add('Default', () => (
-    <Checkbox />
-  ))
-  .add('Checked', () => (
-    <Checkbox checked onChange={function noop() {}} />
-  ))
-  .add('Disabled', () => (
-    <Checkbox disabled />
-  ));
-
-storiesOf('Radio', module)
-  .add('Default', () => (
-    <Radio>
-     Video killed the radio star
-    </Radio>
-  ))
-  .add('Checked', () => (
-    <Radio checked onChange={function noop() {}} />
-  ))
-  .add('Disabled', () => (
-    <Radio disabled />
-  ));
-
-storiesOf('Input', module)
-  .add('Default', () => (
-    <Input placeholder="I am the placeholder" />
-  ))
-  .add('type=email', () => (
-    <Input
-      label='Email Address'
-      placeholder='Enter email'
-      type='email'
-    >
-      <small>We&apos;ll never share your email with anyone else.</small>
-    </Input>
-  ));
-
-storiesOf('Modal', module)
-  .add('Default', () => (
-    <Modal>
-      <h2>This is the Modal</h2>
-    </Modal>
-  ));
-
-storiesOf('Notificaton', module)
-  .add('Default', () => (
-    <Notificaton>
-      <span>This is the default content</span>
-    </Notificaton>
-  ))
-  .add('warning', () => (
-    <Notificaton type='warning'>
-      <span>This is the warning content</span>
-    </Notificaton>
-  ))
-  .add('alert', () => (
-    <Notificaton type='alert'>
-      <span>This is the alert content</span>
-    </Notificaton>
-  ));
-
-storiesOf('Pagination', module)
-  .add('Default', () => (
-    <Pagination>
-      <a>
-        <span>&laquo;</span>
-        <span>Previous</span>
-      </a>
-      <a>1</a>
-      <a active>2</a>
-      <a>3</a>
-    </Pagination>
-  ));
-
-storiesOf('Radio Group', module)
-  .add('Default', () => (
-    <RadioGroup>
-      <Radio name='hello' value='default'>
-       Video killed the radio star
-      </Radio>
-      <Radio name='hello' value='fancy'>
-       Video killed the radio star
-      </Radio>
-      <Radio name='hello' value='none'>
-       Video killed the radio star
-      </Radio>
-    </RadioGroup>
-  ));
-
-storiesOf('RangeSlider', module)
-  .add('Default', () => (
-    <RangeSlider />
-  ));
-
-storiesOf('Select', module)
-  .add('Default', () => (
-    <Select label='example select'>
-      <option>Apple</option>
-      <option>Banana</option>
-      <option>Pear</option>
-      <option>Orange</option>
-    </Select>
-  ))
-  .add('multiple', () => (
-    <Select label='example multiple select' multiple>
-      <option>1</option>
-      <option>2</option>
-      <option>3</option>
-      <option>4</option>
-      <option>5</option>
-    </Select>
-  ));
-
-storiesOf('Select Custom', module)
-  .add('Default', () => (
-    <SelectCustom
-      label="This is the label"
-      onChange={function noop() {}}
-      options={selectData}
-    />
-  ))
-  .add('Multiple', () => (
-    <SelectCustom
-      label="This is the label"
-      multi
-      onChange={function noop() {}}
-      options={selectData}
-    />
-  ));
-
-storiesOf('Tabs', module)
-  .add('Default', () => (
-    <Tabs name='my-tab-group'>
-      <Tab title='Containers'>
-        <h1>Containers</h1>
-      </Tab>
-      <Tab title='Users'>
-        <h1>User</h1>
-      </Tab>
-    </Tabs>
-  ));
-
-storiesOf('Toggle', module)
-  .add('checked', () => (
-    <Toggle checked />
-  ))
-  .add('unchecked', () => (
-    <Toggle checked={false} />
-  ))
-  .add('defaultChecked', () => (
-    <Toggle defaultChecked />
-  ))
-  .add('no props', () => (
-    <Toggle />
-  ));
-
-storiesOf('Tooltip', module)
-  .add('default', () => (
-    <Tooltip>
-      <li>One</li>
-      <li>Two</li>
-      <li>Three</li>
-    </Tooltip>
-  ))
-  .add('custom position', () => {
-    const arrowPosition = {
-      left: '90%',
-      bottom: '100%'
-    };
-    return (
-      <Tooltip arrowPosition={arrowPosition}>
-        <li>One</li>
-        <li>Two</li>
-        <li>Three</li>
-      </Tooltip>
-    );
-  });
-
-storiesOf('Widget', module)
-  .add('single', () => (
-    <Widget
-      checked
-      name='flag'
-      selectable='single'
-      value='flag_1'
-    >
-      <img
-        alt='england flag'
-        // eslint-disable-next-line max-len
-        src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png'
-      />
-      <p>Some text</p>
-    </Widget>
-  ));
-
-const colors = {
-  perc: 'rgba(54, 74, 205, 0.2)',
-  alt: 'rgba(245, 93, 93, 0.2)'
-};
 storiesOf('Metrics', module)
   .add('Mini Metric', () => (
-    <MiniMetric
-      datasets={[{
-        backgroundColor: colors['perc'],
-        altBackgroundColor: colors['alt'],
-        data: [
-          {
-            firstQuartile: 15,
-            thirdQuartile: 15,
-            median: 15,
-            max: 15,
-            min: 15,
-          },
-          {
-            firstQuartile: 26,
-            thirdQuartile: 26,
-            median: 26,
-            max: 26,
-            min: 26,
-          },
-          {
-            firstQuartile: 17,
-            thirdQuartile: 17,
-            median: 17,
-            max: 17,
-            min: 17,
-          },
-          {
-            firstQuartile: 15,
-            thirdQuartile: 25,
-            median: 19,
-            max: 19,
-            min: 20,
-          },
-          {
-            firstQuartile: 19,
-            thirdQuartile: 25,
-            median: 21,
-            max: 20,
-            min: 25,
-          },
-          {
-            firstQuartile: 24,
-            thirdQuartile: 30,
-            median: 25,
-            max: 26,
-            min: 27,
-          },
-          {
-            firstQuartile: 28,
-            thirdQuartile: 34,
-            median: 30,
-            max: 30,
-            min: 30,
-          },
-          {
-            firstQuartile: 30,
-            thirdQuartile: 45,
-            median: 35,
-            max: 40,
-            min: 40,
-          },
-          {
-            firstQuartile: 20,
-            thirdQuartile: 55,
-            median: 45,
-            max: 44,
-            min: 44,
-          },
-          {
-            firstQuartile: 55,
-            thirdQuartile: 55,
-            median: 55,
-            max: 55,
-            min: 55,
-          },
-          {
-            firstQuartile: 57,
-            thirdQuartile: 56,
-            median: 57,
-            max: 58,
-            min: 57,
-          },
-          {
-            firstQuartile: 57,
-            thirdQuartile: 56,
-            median: 56,
-            max: 56,
-            min: 56,
-          },
-          {
-            firstQuartile: 60,
-            thirdQuartile: 56,
-            median: 60,
-            max: 60,
-            min: 60,
-          },
-          {
-            firstQuartile: 57,
-            thirdQuartile: 57,
-            median: 57,
-            max: 57,
-            min: 57,
-          },
-          {
-            firstQuartile: 57,
-            thirdQuartile: 55,
-            median: 55,
-            max: 55,
-            min: 55,
-          },
-          {
-            firstQuartile: 20,
-            thirdQuartile: 45,
-            median: 45,
-            max: 45,
-            min: 45,
-          },
-          {
-            firstQuartile: 15,
-            thirdQuartile: 40,
-            median: 30,
-            max: 49,
-            min: 30,
-          },
-        ]
-      }]}
-      labels={17}
-      name='Memory'
-    />
-  ));
-
-storiesOf('ListItem', module)
-  .add('default', () => (
     <Base>
-      <ListItem>
-        <ListItemView>
-          <ListItemMeta>
-            <ListItemTitle>Nginx 01</ListItemTitle>
-            <ListItemSubTitle>4 instances</ListItemSubTitle>
-            <ListItemDescription>Flags</ListItemDescription>
-          </ListItemMeta>
-          <ListItemOutlet>
-            Metrics
-          </ListItemOutlet>
-        </ListItemView>
-        <ListItemOptions>
-          …
-        </ListItemOptions>
-      </ListItem>
-    </Base>
-  ))
-  .add('collapsed', () => (
-    <Base>
-      <ListItem collapsed>
-        <ListItemView>
-          <ListItemMeta>
-            <ListItemTitle>Nginx 01</ListItemTitle>
-            <ListItemSubTitle>4 instances</ListItemSubTitle>
-            <ListItemDescription>Flags</ListItemDescription>
-          </ListItemMeta>
-          <ListItemOutlet>
-            Metrics
-          </ListItemOutlet>
-        </ListItemView>
-        <ListItemOptions>
-          …
-        </ListItemOptions>
-      </ListItem>
+      <Row around>
+        <Column xs={3}>
+          <MiniMetricView>
+            <MiniMetricMeta>
+              <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+              <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+            </MiniMetricMeta>
+            <MiniMetricGraph data={MiniMetricData} />
+          </MiniMetricView>
+        </Column>
+        <Column xs={3}>
+          <MiniMetricView>
+            <MiniMetricMeta>
+              <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+              <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+            </MiniMetricMeta>
+            <MiniMetricGraph data={MiniMetricData} />
+          </MiniMetricView>
+        </Column>
+        <Column xs={3}>
+          <MiniMetricView>
+            <MiniMetricMeta>
+              <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+              <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+            </MiniMetricMeta>
+            <MiniMetricGraph data={MiniMetricData} />
+          </MiniMetricView>
+        </Column>
+      </Row>
     </Base>
   ));
-
-const services = require('./services');
-
-storiesOf('Topology', module)
-  .add('5 services', () => (
-    <Topology
-      graph={services}
-      height={500}
-      width={500}
-    />
-  ));

ui/test/index.js

@@ -24,6 +24,12 @@ test('renders <Button> without exploding', (t) => {
   t.deepEqual(wrapper.length, 1);
 });
 
+test('renders <Close> without exploding', (t) => {
+  const Close = require('../src/components/close');
+  const wrapper = shallow(<Close />);
+  t.deepEqual(wrapper.length, 1);
+});
+
 test('renders <Checkbox> without exploding', (t) => {
   const Checkbox = require('../src/components/checkbox');
   const wrapper = shallow(<Checkbox />);