From a1fa6694ddcfccf11d9d32b924ec972c911e8165 Mon Sep 17 00:00:00 2001
From: Hannah Nordgren <hey@hereshannahs.info>
Date: Wed, 27 Sep 2017 16:24:11 -0400
Subject: [PATCH 1/2] [FEATURE] changed sidebar close icon color (#81)

OVERVIEW

This PR changes the close icon on the sidebar when slid out.

SOLUTION

changed icon-x-navy to icon-x-black.
rebuilt.
---
 CHANGELOG.md                               |    4 +
 VERSION                                    |    2 +-
 app/public/quartz.js                       | 1454 +-------------------
 dist/component-sidebar.js                  |    2 +-
 package.json                               |    2 +-
 quartz-js/components/sidebar/sidebar.ui.js |    2 +-
 6 files changed, 9 insertions(+), 1457 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fe76f75..02610a2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 1.5.3
+**2017-9-27**
+* depreciated navy close icon, sidebars.
+
 ### 1.5.2
 **2017-9-27**
 * depreciated teal radio stack buttons.
diff --git a/VERSION b/VERSION
index 4cda8f1..8af85be 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-1.5.2
+1.5.3
diff --git a/app/public/quartz.js b/app/public/quartz.js
index b3d460a..c6eb9e5 100644
--- a/app/public/quartz.js
+++ b/app/public/quartz.js
@@ -1252,1459 +1252,7 @@ vhxm.components.shared.sidebar.ui.container = {
   view: function view(ctrl) {
     return m('.c-sidebar.bg-white.shadow--gray' + (vhxm.components.shared.sidebar.state.isLoaded() ? '' : '.loader-slate.loader--cover-hide.loader--large.is-loading'), {
       config: vhxm.components.shared.sidebar.state.isOpen() ? ctrl.animatorIn : ctrl.animatorOut
-    }, vhxm.components.shared.sidebar.state.isLoaded() ? [m('a.c-sidebar--close.icon-circle.icon-x-navy.icon--xsmall', {
-      onclick: function onclick() {
-        setTimeout(function () {
-          vhxm.components.shared.sidebar.toggle('close');
-        }, 0);
-      }
-    }), m('div', {
-      style: { opacity: 0 },
-      config: function config(elem) {
-        $(elem).velocity({ opacity: '1' }, { duration: 400 });
-      }
-    }, [m.component(vhxm.components.shared.sidebar.state.template())])] : '');
-  }
-};
-vhxm.components.shared.size.state = {
-  media: m.prop(null),
-  mediumUp: m.prop(null),
-  largeUp: m.prop(null),
-  smallOnly: m.prop(null),
-  smallToMedium: m.prop(null),
-  mediumOnly: m.prop(null),
-  smediumOnly: m.prop(null),
-  largeOnly: m.prop(null)
-};
-
-$(window).on('resize', function () {
-  m.startComputation();
-  var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content').replace(/['"]/g, '');
-  vhxm.components.shared.size.state.media(size);
-  vhxm.components.shared.size.state.mediumUp(!!size.match(/medium|large/));
-  vhxm.components.shared.size.state.smallToMedium(!!size.match(/small|smedium|medium/));
-  vhxm.components.shared.size.state.largeUp(!!size.match(/large|xlarge/));
-  vhxm.components.shared.size.state.smallOnly(size === 'small');
-  vhxm.components.shared.size.state.mediumOnly(size === 'medium');
-  vhxm.components.shared.size.state.smediumOnly(size === 'smedium');
-  vhxm.components.shared.size.state.largeOnly(!!size.match(/large/));
-  m.endComputation();
-});
-
-$(window).trigger('resize');
-vhxm.components.shared.tag.controller = function (opts) {
-  var self = this;
-
-  self.state = new vhxm.components.shared.tag.state();
-
-  if (opts.isProcessing) {
-    self.state.isProcessing = opts.isProcessing;
-  }
-  if (opts.onShow) {
-    self.state.onShow = opts.onShow;
-  }
-  if (opts.onRemove) {
-    self.state.onRemove = opts.onRemove;
-  }
-
-  self.formatLabelString = function (opts) {
-    if (opts.label && opts.label_length && opts.label.length > opts.label_length) {
-      return opts.label.substr(0, opts.label_length).trim() + '...';
-    }
-
-    return opts.label;
-  };
-};
-vhxm.components.shared.tag.state = function () {
-  this.isHover = m.prop(false);
-  this.isRemoveHover = m.prop(false);
-  this.isProcessing = m.prop(false);
-  this.onShow = function () {};
-  this.onRemove = function () {};
-};
-vhxm.components.shared.tag.ui.container = {
-  controller: vhxm.components.shared.tag.controller,
-  view: function view(ctrl, opts) {
-    return m('span.inline.relative.c-tag' + (ctrl.state.isHover() ? '.is-hover' : ''), {
-      onmouseover: function onmouseover() {
-        ctrl.state.isHover(true);
-      },
-      onmouseout: function onmouseout() {
-        ctrl.state.isHover(false);
-      }
-    }, [m('button.c-tag--button' + (ctrl.state.isHover() ? '.btn-teal.is-hover' : '.btn-gray') + (ctrl.state.isProcessing() ? '.is-processing' : ''), {
-      onclick: function onclick(event) {
-        event.preventDefault();
-        ctrl.state.onShow(event);
-      }
-    }, opts.label ? ctrl.formatLabelString(opts) : 'Tag'), m('a.c-tag--remove.icon--center.icon-x-white.icon--xxsmall' + (ctrl.state.isRemoveHover() ? '.btn-red' : '.btn-teal'), {
-      onclick: function onclick(event) {
-        event.preventDefault();
-        ctrl.state.onRemove(event);
-      },
-      onmouseover: function onmouseover() {
-        ctrl.state.isRemoveHover(true);
-      },
-      onmouseout: function onmouseout() {
-        ctrl.state.isRemoveHover(false);
-      }
-    })]);
-  }
-};vhxm.components.shared.autosuggest.ui.list.controller = function (opts, parent) {
-  var self = this;
-
-  self.parent = new vhxm.components.shared.autosuggest.controller(opts);
-  self.state = parent.state;
-  self.model = parent.model;
-
-  self.hasItems = function () {
-    return self.model.items() && self.model.items().length > 1;
-  };
-
-  self.handleItemClick = function (event, item) {
-    self.state.selected(item);
-    self.state.highlightIndex(-1);
-
-    if (opts.onselect) {
-      opts.onselect(self.state.selected(), true);
-    }
-    self.state.hasFocus(false);
-    self.model.items(null);
-    self.parent.scrollOptionsList(0);
-  };
-};
-/* ................................................
-  Select List Component
-.................................................*/
-vhxm.components.shared.autosuggest.ui.list.container = {
-  controller: function controller(opts, parent) {
-    return new vhxm.components.shared.autosuggest.ui.list.controller(opts, parent);
-  },
-  view: function view(ctrl) {
-    return m('ul.c-autosuggest--options.margin-left-reset', {
-      config: function config(el) {
-        ctrl.state.optionsHeight($(el).outerHeight());
-      }
-    }, [ctrl.model.items() ? ctrl.model.items().map(function (item, index) {
-      return m('li.c-autosuggest--option.padding-horizontal-medium.padding-horz-medium.padding-vert-small.padding-vertical-small' + (index === ctrl.state.highlightIndex() ? '.is-selected' : ''), {
-        config: function config(el) {
-          ctrl.state.optionHeight($(el).outerHeight());
-        },
-        onmouseover: function onmouseover() {
-          ctrl.state.highlightIndex(index);
-        },
-        onclick: function onclick(event) {
-          ctrl.handleItemClick(event, item);
-        }
-      }, item);
-    }) : '']);
-  }
-};
-/* ................................................
-  Media Item Component
-.................................................*/
-vhxm.components.shared.select.ui.item_media = {
-  view: function view(c, params) {
-    var item = params.item;
-    var index = params.index;
-    var ctrl = params.ctrl;
-    var opts = params.opts;
-
-    return m('.c-media-item--container.padding-horz-medium.padding-vert-small.clearfix' + (index === ctrl.state.highlightIndex() ? '.is-selected' : ''), {
-      config: function config(el) {
-        ctrl.state.optionHeight($(el).outerHeight());
-      },
-      onmouseover: function onmouseover() {
-        ctrl.state.highlightIndex(index);
-      },
-      onclick: function onclick(event) {
-        ctrl.handleItemClick(event, item);
-      }
-    }, [m('.c-media-item--image-container.left', [m('div.c-media-item--image.radius.margin-right-medium.img', {
-      style: {
-        width: '70px',
-        height: '40px',
-        backgroundImage: 'url(' + item[opts.prop_map.image] + ')'
-      }
-    })]), m('.c-media-item--content.clearfix.left', [m('p.text--navy.line-medium.truncate.block', ctrl.formatLabelString({
-      label: item[opts.prop_map.label],
-      label_length: opts.label_length
-    })), m('p.text--gray.line-medium.truncate.block', item[opts.prop_map.descriptor])]), ctrl.parent.multiselect ? m('.c-media-item--action.clearfix.right', [ctrl.state.isProcessing().indexOf(item[opts.prop_map.value]) >= 0 ? m('.c-item-toggle.loader-white.loader--small') : m('.c-item-toggle.icon--xsmall.icon-check-navy.border' + (ctrl.state.selected() && ctrl.state.selected()[item[opts.prop_map.key]] ? '.is-selected.icon-check-navy' : '.icon-plus-thin-white'))]) : '']);
-  }
-};
-/* ................................................
-  Standard Item Component
-.................................................*/
-vhxm.components.shared.select.ui.item_standard = {
-  view: function view(c, params) {
-    var item = params.item;
-    var index = params.index;
-    var ctrl = params.ctrl;
-    var opts = params.opts;
-
-    return m('li.c-select--option.padding-horz-medium' + (index === ctrl.state.highlightIndex() ? '.is-selected' : ''), {
-      config: function config(el) {
-        ctrl.state.optionHeight($(el).outerHeight());
-      },
-      onmouseover: function onmouseover() {
-        ctrl.state.highlightIndex(index);
-      },
-      onclick: function onclick(event) {
-        ctrl.handleItemClick(event, item);
-      }
-    }, [m('i.icon.icon--xsmall.right.margin-top-xsmall.margin-left-small' + (ctrl.state.selected() && ctrl.state.selected()[item[opts.prop_map.key]] ? '.is-selected.icon-check-navy' : '')), m('span.c-select--item-label.text--navy', item[opts.prop_map.label]), item[opts.prop_map.descriptor] ? m('span.right.text--gray', item[opts.prop_map.descriptor]) : '']);
-  }
-};
-vhxm.components.shared.select.ui.list.controller = function (opts, parent) {
-  var self = this;
-
-  self.parent = parent;
-  self.state = parent.state;
-  self.model = parent.model;
-
-  self.hasItems = function () {
-    return self.model.items() && self.model.items().length > 0;
-  };
-
-  self.handleItemClick = function (event, item) {
-    self.parent.selectItem(item);
-  };
-
-  self.formatLabelString = function (opts) {
-    if (opts.label && opts.label_length && opts.label.length > opts.label_length) {
-      return opts.label.substr(0, opts.label_length).trim() + '...';
-    }
-
-    return opts.label;
-  };
-};
-/* ................................................
-  Select List Component
-.................................................*/
-vhxm.components.shared.select.ui.list.container = {
-  controller: function controller(opts, parent) {
-    return new vhxm.components.shared.select.ui.list.controller(opts, parent);
-  },
-  view: function view(ctrl, opts) {
-    return m('ul.c-select--options.margin-left-reset.loader-slate.loader--transparent' + (ctrl.state.isLoading() ? '.is-loading' : ''), [ctrl.hasItems() ? ctrl.model.items().map(function (item, index) {
-      return m.component(vhxm.components.shared.select.ui['item_' + ctrl.parent.type], {
-        item: item,
-        index: index,
-        ctrl: ctrl,
-        opts: opts
-      });
-    }) : m.component(vhxm.components.shared.select.ui.list.empty, opts)]);
-  }
-};
-
-/* List Empty
-.................................................*/
-vhxm.components.shared.select.ui.list.empty = {
-  view: function view() {
-    return m('li.padding-horz-large.padding-top-small.padding-bottom-medium.text--gray.text-center', 'No results');
-  }
-};
-vhxm.components.shared.autosuggest.controller = function (opts) {
-  var self = this;
-
-  self.timeout = null;
-
-  self.init = function () {
-    self.state = new vhxm.components.shared.autosuggest.state();
-    self.model = new vhxm.components.shared.autosuggest.model();
-
-    self.model.items(null);
-    self.state.selected(null);
-
-    if (opts.focusonready) {
-      self.state.hasFocus(true);
-    }
-
-    if (opts.suggestonready) {
-      self.fetchResults('');
-    }
-
-    $(document).on('click', function (event) {
-      var is_list = $(event.target).closest('.c-autosuggest--container').length;
-
-      if (!is_list && self.state.hasFocus()) {
-        m.startComputation();
-        self.state.hasFocus(false);
-        self.model.items(null);
-        m.endComputation();
-      }
-    });
-  };
-
-  self.isListOpen = function () {
-    return self.model.items() && self.state.hasFocus();
-  };
-
-  self.fetchResults = function (query) {
-    self.state.highlightIndex(0);
-
-    m.startComputation();
-    if (opts.data()) {
-      var result = [];
-      opts.data().map(function (item) {
-        var query_clean = query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
-        if (item.toLowerCase().match(query_clean.toLowerCase())) {
-          result.push(item);
-        }
-      });
-      self.model.items(result.length ? result : null);
-      m.endComputation();
-      return;
-    }
-
-    if (opts.search) {
-      opts.search(query, function (data) {
-        self.model.items(data.length ? data : null);
-        m.endComputation();
-      });
-    }
-  };
-
-  self.handleKeydown = function (e) {
-    var container = $(e.target).closest('.c-select--container').find('.c-select--options');
-
-    // Down Arrow
-    if (e.keyCode === 40) {
-      self.state.hasFocus(true);
-      self.setHighlightedState('down', container);
-      e.preventDefault();
-    }
-    // Up Arrow
-    else if (e.keyCode === 38) {
-        self.state.hasFocus(true);
-        self.setHighlightedState('up', container);
-        e.preventDefault();
-      }
-      // Enter/Return
-      else if (e.keyCode === 13 && self.isListOpen()) {
-          if (self.model.items()) {
-            self.state.selected(self.model.items()[self.state.highlightIndex()]);
-            opts.onselect(self.state.selected(), true);
-          }
-
-          self.state.hasFocus(false);
-          self.model.items(null);
-          e.preventDefault();
-        }
-  };
-
-  self.handleClick = function (event) {
-    event.preventDefault();
-    self.state.hasFocus(true);
-  };
-
-  self.handleInput = function (event) {
-    event.preventDefault();
-    self.state.hasFocus(true);
-    self.state.selected(event.target.value);
-    opts.onselect(self.state.selected(), false);
-    self.debounceSearch(event);
-  };
-
-  self.setHighlightedState = function (direction, container) {
-    if (self.model.items()) {
-      if (direction === 'down') {
-        self.state.highlightIndex(self.state.highlightIndex() + 1);
-        if (self.state.highlightIndex() < self.model.items().length) {
-          self.state.scrollIndex(self.state.scrollIndex() + 1);
-        } else {
-          self.state.highlightIndex(self.model.items().length - 1);
-        }
-      } else if (direction === 'up') {
-        self.state.highlightIndex(self.state.highlightIndex() - 1);
-        if (self.state.highlightIndex() > 0) {
-          self.state.scrollIndex(self.state.scrollIndex() - 1);
-        } else {
-          self.state.highlightIndex(0);
-        }
-      }
-      self.scrollOptionsList(container);
-    }
-  };
-
-  self.scrollOptionsList = function (container) {
-    if (container.length) {
-      container.eq(0).scrollTop(self.state.optionHeight() * self.state.highlightIndex());
-    }
-  };
-
-  self.debounceSearch = function (event) {
-    if (self.timeout) {
-      clearTimeout(self.timeout);
-    }
-
-    self.timeout = setTimeout(function () {
-      self.fetchResults(event.target.value);
-      self.timeout = null;
-    }, 300);
-  };
-
-  if (opts.init) {
-    self.init();
-  }
-};
-vhxm.components.shared.autosuggest.model = function () {
-  this.items = m.prop([]);
-};
-vhxm.components.shared.autosuggest.state = function () {
-  this.selected = m.prop({});
-  this.highlighted = m.prop({});
-  this.highlightIndex = m.prop(null);
-  this.scrollIndex = m.prop(0);
-  this.optionHeight = m.prop(0);
-  this.optionsHeight = m.prop(0);
-  this.hasFocus = m.prop(false);
-};
-vhxm.components.shared.autosuggest.ui.container = {
-  controller: function controller(opts) {
-    opts.init = true;
-    return new vhxm.components.shared.autosuggest.controller(opts);
-  },
-  view: function view(ctrl, opts) {
-    if (opts.reset()) {
-      ctrl.state.selected(null);
-      opts.reset(false);
-    }
-    return m('.c-autosuggest--container.form', {
-      onkeydown: ctrl.handleKeydown,
-      onclick: ctrl.handleClick
-    }, [m('.c-autosuggest--input-container', [m('input.c-autosuggest--search', {
-      config: function config(el) {
-        if (ctrl.state.hasFocus()) {
-          setTimeout(function () {
-            el.focus();
-          }, 10);
-        }
-      },
-      autocomplete: 'off',
-      name: opts.name ? opts.name : null,
-      type: 'text',
-      value: ctrl.state.selected(),
-      placeholder: opts.placeholder ? opts.placeholder : '',
-      oninput: ctrl.handleInput
-    })]), m('.c-autosuggest--list' + (ctrl.isListOpen() ? '.is-open' : ''), [m.component(vhxm.components.shared.autosuggest.ui.list.container, opts, ctrl)])]);
-  }
-};
-vhxm.components.shared.avatar.ui = {
-  view: function view(ctrl, opts) {
-    return m('span.avatar.color-teal.avatar--' + (opts.size ? opts.size : 'medium'), [m('span.avatar-user.user-avatar', {
-      style: {
-        backgroundImage: 'url(' + opts.image + ')'
-      }
-    })]);
-  }
-};vhxm.components.shared.checkbox.ui.container = {
-  view: function view(ctrl, opts) {
-    return m('fieldset.checkbox.' + (opts.size ? opts.size : 'medium') + (opts.type === 'toggle' ? '.alt' : ''), [m('input[type=checkbox]', {
-      checked: opts.checked,
-      name: opts.name,
-      value: opts.value,
-      onchange: opts.onchange,
-      id: opts.name
-    }), m('label', {
-      for: opts.name
-    }, [opts.type === 'toggle' ? m('span.checkbox--contain', [m('span.checkbox--icon'), m('span.checkbox--circle', [m('i.circle-top', m.trust('<span></span>')), m('i.circle-bottom', m.trust('<span></span>'))]), m('span.checkbox--label')]) : m('span.checkbox--contain', [m('span.checkbox--icon', [m('span.checkbox-animate')]), opts.label ? m('span.checkbox--label', opts.label) : ''])])]);
-  }
-};
-vhxm.components.shared.filter.constants = Object.freeze({
-  date: {
-    title: 'Date'
-  },
-  location: {
-    title: 'Location'
-  }
-});vhxm.components.shared.filter.controller = function (opts) {
-  var self = this;
-  var api = opts.api ? opts.api : m.prop(null);
-
-  self.init = function () {
-    if (api() && api().state) {
-      self.state = api().state;
-      self.model = api().model;
-    } else {
-      self.state = new vhxm.components.shared.filter.state();
-      self.model = new vhxm.components.shared.filter.model();
-    }
-
-    api({
-      state: self.state,
-      model: self.model,
-      applyFilter: self.applyFilter,
-      removeFilter: self.removeFilter,
-      addFilter: self.addFilter
-    });
-
-    if (opts.filtersStartOpen) {
-      opts.filters.map(function (item) {
-        var name = void 0;
-
-        if (typeof item === 'string' && vhxm.components.shared.filter.ui[item]) {
-          name = item;
-        }
-        if ((typeof item === 'undefined' ? 'undefined' : _typeof(item)) === 'object') {
-          name = item.type;
-        }
-
-        if (name) {
-          self.state.dropdown.filtersOpen().push(name);
-        }
-      });
-    }
-
-    opts.beforeOpen = opts.beforeOpen ? opts.beforeOpen : function () {};
-    opts.afterClose = opts.afterClose ? opts.afterClose : function () {};
-  };
-
-  self.handleFilterClick = function (event, name) {
-    event.preventDefault();
-
-    var state = self.state.dropdown.filtersOpen().indexOf(name);
-
-    if (state === -1) {
-      self.state.dropdown.filtersOpen().push(name);
-    } else {
-      self.state.dropdown.filtersOpen().splice(state, 1);
-    }
-  };
-
-  self.handleApplyClick = function (event) {
-    event.preventDefault();
-
-    var state = self.state.dropdown.isOpen() ? false : true;
-
-    if (!state && self.state.selected().length && !opts.applyOnChange) {
-      self.applyFilter();
-    }
-
-    self.state.dropdown.isOpen(state);
-
-    if (state) {
-      return opts.beforeOpen();
-    } else {
-      return opts.afterClose();
-    }
-  };
-
-  self.handleFilterRemoveClick = function (filter) {
-    self.removeFilter(filter, function () {
-      self.applyFilter();
-    });
-  };
-
-  self.applyFilter = function () {
-    self.state.applied(true);
-    if (opts.filterHandler) {
-      opts.filterHandler(self.state.selected(), function () {});
-    }
-  };
-
-  self.removeFilter = function (filter, callback) {
-    self.state.selected().filter(function (item, index) {
-      if (item.value === filter.value) {
-        self.state.selected().splice(index, 1);
-      }
-    });
-
-    if (callback) {
-      callback();
-    }
-  };
-
-  self.openFilter = function (item) {
-    self.state.dropdown.filtersOpen().push(item.type);
-    self.state.dropdown.isOpen(true);
-  };
-
-  self.addFilter = function (filter, type) {
-    self.state.selected().map(function (item) {
-      if (item.type === type) {
-        self.removeFilter(item);
-      }
-    });
-    self.state.selected().push({
-      type: type,
-      label: filter.label,
-      value: filter.value
-    });
-  };
-
-  self.hasMultipleFilters = function () {
-    return opts.filters.length > 1;
-  };
-
-  self.iconHelper = function (item) {
-    if (self.hasMultipleFilters()) {
-      return '.icon--right.icon-chevron-' + (self.state.dropdown.filtersOpen().indexOf(item) >= 0 ? 'up' : 'down') + '-navy.icon--xxsmall';
-    }
-    return '';
-  };
-
-  if (opts && opts.init) {
-    self.init();
-  }
-
-  $(document).on('click', function (event) {
-    if ($('.c-filter--container.is-open').length && !$(event.target).closest('.c-filter--applied').length && !$(event.target).closest('.c-filter--trigger-container').length) {
-      m.startComputation();
-      self.state.dropdown.isOpen(false);
-      m.endComputation();
-    }
-  });
-};vhxm.components.shared.filter.model = function () {};
-vhxm.components.shared.filter.state = function () {
-  this.selected = m.prop([]);
-  this.applied = m.prop(false);
-  this.available = m.prop(null);
-  this.dropdown = {
-    isOpen: m.prop(false),
-    filtersOpen: m.prop([])
-  };
-};
-vhxm.components.shared.filter.ui.container = {
-  controller: function controller(opts) {
-    opts.init = true;
-    return new vhxm.components.shared.filter.controller(opts);
-  },
-  view: function view(ctrl, opts) {
-    var ready_to_apply = ctrl.state.dropdown.isOpen() && ctrl.state.selected() && ctrl.state.selected().length && !opts.applyOnChange;
-
-    return m('.c-filter--container.dropdown.dropdown--' + (opts.size ? opts.size : 'large') + (ctrl.state.dropdown.isOpen() ? '.is-open' : ''), [m('div.row', [m('.c-filter--trigger-container.small-' + (vhxm.components.shared.size.state.smallToMedium() ? '5' : '3') + '.column.pull.padding-reset', [m('a.c-filter--trigger.block.radius.head-5.text--gray' + (ready_to_apply ? '.text-center' : '.icon--right.icon-' + (ctrl.state.dropdown.isOpen() ? 'chevron-up-navy' : 'chevron-down-gray') + '.icon--xxsmall.margin-right-medium.fill-width'), {
-      onclick: ctrl.handleApplyClick
-    }, ready_to_apply ? 'Apply' : 'Filters'), m.component(vhxm.components.shared.filter.ui.dropdown, opts, ctrl)]), m('.c-filter--applied-container.small-' + (vhxm.components.shared.size.state.smallToMedium() ? '11' : '13') + '.column.pull.padding-reset', [m('.margin-left-small.padding-left-medium.border-left', [ctrl.state.applied() && ctrl.state.selected().length ? m.component(vhxm.components.shared.filter.ui.applied, opts, ctrl) : m('span.c-filter--label.text--gray', opts.label ? opts.label : m.trust('&nbsp;'))])])])]);
-  }
-};
-
-vhxm.components.shared.filter.ui.applied = {
-  controller: function controller(opts, parent_ctrl) {
-    return parent_ctrl;
-  },
-  view: function view(ctrl) {
-    var isSingle = ctrl.state.selected().length <= 1;
-
-    return m('div', [ctrl.state.selected().map(function (item) {
-      return m('span.c-filter--applied.inline', [m('a.text--navy' + (isSingle ? '.margin-right-small' : ''), {
-        href: '#',
-        onclick: function onclick(event) {
-          event.preventDefault();
-          ctrl.openFilter(item);
-        }
-      }, item.label), isSingle ? '' : m('a.icon--center.icon-x-navy.icon--xxsmall', {
-        onclick: function onclick(event) {
-          event.preventDefault();
-          ctrl.handleFilterRemoveClick(item);
-        }
-      })]);
-    })]);
-  }
-};
-
-vhxm.components.shared.filter.ui.dropdown = {
-  controller: function controller(opts, parent_ctrl) {
-    return parent_ctrl;
-  },
-  view: function view(ctrl, opts) {
-    return m('.c-filter--dropdown.dropdown-list', [m('ul.padding-reset', [opts.filters.map(function (item) {
-      if (typeof item === 'string' && vhxm.components.shared.filter.ui[item]) {
-        return m('li.border-bottom', [m((ctrl.hasMultipleFilters() ? 'a' : 'span') + '.c-filter--item.head-5.fill-width' + ctrl.iconHelper(item), {
-          href: '#',
-          onclick: function onclick(event) {
-            if (ctrl.hasMultipleFilters()) {
-              ctrl.handleFilterClick(event, item);
-            }
-          }
-        }, vhxm.components.shared.filter.constants[item].title), m('div.c-filter--item-container' + (ctrl.state.dropdown.filtersOpen().indexOf(item) >= 0 ? '.is-active' : ''), [m.component(vhxm.components.shared.filter.ui[item])])]);
-      }
-      if ((typeof item === 'undefined' ? 'undefined' : _typeof(item)) === 'object') {
-        if (item.template) {
-          return m.component(vhxm.components.shared.filter.ui.template, item, ctrl);
-        } else if (item.data) {
-          return m.component(vhxm.components.shared.filter.ui.data, item, ctrl);
-        }
-      }
-    })])]);
-  }
-};
-
-vhxm.components.shared.filter.ui.template = {
-  controller: function controller(item, parent_ctrl) {
-    return parent_ctrl;
-  },
-  view: function view(ctrl, item) {
-    return m('li.border-bottom', [m((ctrl.hasMultipleFilters() ? 'a' : 'span') + '.c-filter--item.head-5.fill-width' + ctrl.iconHelper(item), {
-      href: '#',
-      onclick: function onclick(event) {
-        if (ctrl.hasMultipleFilters()) {
-          ctrl.handleFilterClick(event, item.type);
-        }
-      }
-    }, item.title), m('div.c-filter--item-container' + (ctrl.state.dropdown.filtersOpen().indexOf(item.type) >= 0 ? '.is-active' : ''), [m.component(item.template)])]);
-  }
-};
-
-vhxm.components.shared.filter.ui.data = {
-  controller: function controller(opts, parent_ctrl) {
-    return parent_ctrl;
-  },
-  view: function view(ctrl, item) {
-    return m('li.border-bottom', [m((ctrl.hasMultipleFilters() ? 'a' : 'span') + '.c-filter--item.head-5.fill-width' + ctrl.iconHelper(item), {
-      href: '#',
-      onclick: function onclick(event) {
-        if (ctrl.hasMultipleFilters()) {
-          ctrl.handleFilterClick(event, item.type);
-        }
-      }
-    }, item.title), m('div.c-filter--item-container' + (ctrl.state.dropdown.filtersOpen().indexOf(item.type) >= 0 ? '.is-active' : ''), [m('ul.form', [item.data().map(function (child, index) {
-      return m('li', [m.component(vhxm.components.shared.checkbox.ui.container, {
-        name: item.type + '-' + index,
-        checked: child.checked,
-        label: child.label,
-        onchange: function onchange(event) {
-          ctrl.removeFilter(child);
-          if (event.target.checked) {
-            ctrl.addFilter(child, item.type);
-          }
-        }
-      })]);
-    })])])]);
-  }
-};vhxm.components.shared.header.ui.container = {
-  view: function view(ctrl, opts) {
-    var has_border = opts.border === false ? false : true;
-
-    return m('header.row.padding-bottom-medium' + (has_border ? '.border-bottom' : ''), [m('.column.small-16.medium-8.large-10', [m('.media', [m('.media-unit.text-top', [m('i.icon.icon--large.icon-' + opts.icon)]), m('.media-unit.media-fill.padding-left-medium', [m('h2.head-3', opts.title), m('p.text.text--gray.small-margin-bottom-small', opts.description ? opts.description : '')])])]), m('.column.small-16.medium-8.large-6.text-right', opts.buttons ? opts.buttons : '')]);
-  }
-};
-
-vhxm.components.shared.load_more.controller = function (opts) {
-  var self = this;
-
-  self.state = new vhxm.components.shared.load_more.state();
-  self.action = opts.action ? opts.action : function () {};
-
-  self.loadMore = function () {
-    self.state.is_loading(true);
-    self.action(function () {
-      self.state.is_loading(false);
-    });
-  };
-
-  self.isElementInViewport = function (el, isInit, ctx) {
-    if (!isInit) {
-      var rect = el.getBoundingClientRect();
-      window.addEventListener('scroll', function () {
-        if (el.getBoundingClientRect().top < window.innerHeight && el.getBoundingClientRect().top > 0 && !self.state.in_view()) {
-          m.startComputation();
-          self.state.is_loading(true);
-          m.endComputation();
-          self.loadMore();
-          self.state.in_view(true);
-          return true;
-        } else if (el.getBoundingClientRect().bottom < 0 && self.state.in_view()) {
-          self.state.in_view(false);
-          return false;
-        } else if (el.getBoundingClientRect().top > window.innerHeight && self.state.in_view()) {
-          self.state.in_view(false);
-          return false;
-        }
-      });
-    }
-  };
-};
-vhxm.components.shared.load_more.state = function () {
-  this.in_view = m.prop(false);
-  this.is_loading = m.prop(false);
-};
-vhxm.components.shared.load_more.ui.container = {
-  controller: function controller(opts) {
-    return new vhxm.components.shared.load_more.controller(opts);
-  },
-  view: function view(ctrl, opts) {
-    var self = this;
-    return m('a..btn.btn-vimeo-secondary-outline' + (ctrl.state.is_loading() ? '.is-loading' : ''), {
-      config: opts.onscroll ? ctrl.isElementInViewport : '',
-      onclick: !opts.onscroll ? function (e) {
-        e.preventDefault();
-        ctrl.loadMore();
-      } : '',
-      href: '#'
-    }, opts.label ? opts.label : 'Show More');
-  }
-
-};
-vhxm.components.shared.modal.controller = function (opts) {
-  var self = this;
-
-  self.setupStateType = function (type, opts) {
-    if (type && opts[type]) {
-      $.each(opts[type], function (key, item) {
-        if (key.match(/Callback/)) {
-          vhxm.components.shared.modal.state[type][key] = item;
-        } else {
-          vhxm.components.shared.modal.state[type][key](item);
-        }
-      });
-    }
-  };
-
-  self.setupState = function (opts) {
-    $.each(opts, function (key, item) {
-      if (!key.match(/content|actions/)) {
-        vhxm.components.shared.modal.state[key](item);
-      }
-    });
-
-    self.setupStateType('actions', opts);
-    self.setupStateType('content', opts);
-  };
-};vhxm.components.shared.modal.open = function () {
-  vhxm.components.shared.modal.state.onOpen()();
-  vhxm.components.shared.modal.state.isOpen(true);
-  m.redraw();
-};
-
-vhxm.components.shared.modal.close = function () {
-  vhxm.components.shared.modal.state.isOpen(false);
-  m.redraw();
-  vhxm.components.shared.modal.state.onClose()();
-};
-
-vhxm.components.shared.modal.setTo = function (opts) {
-  var ctrl = new vhxm.components.shared.modal.controller();
-  m.startComputation();
-  ctrl.setupState(opts);
-  m.endComputation();
-};
-
-$(document).on('keyup', function (ev) {
-  if (ev.keyCode === 27 && vhxm.components.shared.modal.state.isOpen()) {
-    vhxm.components.shared.modal.close();
-  }
-});
-vhxm.components.shared.modal.state = {
-  isOpen: m.prop(false),
-  size: m.prop('medium'),
-  hasActions: m.prop(2),
-  onOpen: m.prop(function () {}),
-  onClose: m.prop(function () {}),
-  content: {
-    title: m.prop(null),
-    body: m.prop(null)
-  },
-  actions: {
-    left: m.prop('Cancel'),
-    right: m.prop('OK'),
-    single: m.prop('OK'),
-    template: m.prop(null),
-    leftCallback: vhxm.components.shared.modal.close,
-    rightCallback: function rightCallback() {},
-    singleCallback: vhxm.components.shared.modal.close
-  }
-};vhxm.components.shared.modal.ui.container = {
-  controller: function controller(opts) {
-    var ctrl = new vhxm.components.shared.modal.controller();
-    ctrl.setupState(opts);
-  },
-  view: function view(ctrl, opts) {
-    var size = '.c-modal--' + vhxm.components.shared.modal.state.size();
-
-    return m('.c-modal' + (vhxm.components.shared.modal.state.isOpen() ? '.is-open' : ''), [m('.c-modal-container' + (vhxm.components.shared.modal.state.hasActions() ? '.c-modal--has-actions' : '') + size, {
-      config: function config(el) {
-        var margin = -$(el).outerHeight() / 2;
-        $(el).css('marginBottom', margin + 'px');
-      }
-    }, [vhxm.components.shared.modal.state.content.title() ? m.component(vhxm.components.shared.modal.ui.header) : '', vhxm.components.shared.modal.state.content.body() ? m.component(vhxm.components.shared.modal.ui.body) : '', vhxm.components.shared.modal.state.hasActions() ? m.component(vhxm.components.shared.modal.ui.actions) : '', m.component(vhxm.components.shared.modal.ui.close)]), vhxm.components.shared.modal.state.isOpen() ? m('.c-modal-bg', {
-      onclick: vhxm.components.shared.modal.close
-    }) : '']);
-  }
-};
-
-vhxm.components.shared.modal.ui.close = {
-  view: function view() {
-    return m('.c-modal--close' + (vhxm.components.shared.size.state.smallOnly() ? '.is-hidden' : ''), {
-      onclick: vhxm.components.shared.modal.close
-    }, [m('i.icon.icon--xsmall.icon-x-white')]);
-  }
-};
-
-vhxm.components.shared.modal.ui.header = {
-  view: function view() {
-    return m('.c-modal--header.padding-medium', [m('span', [m('.h2.head-4.head.secondary.text-left', vhxm.components.shared.modal.state.content.title())])]);
-  }
-};
-
-vhxm.components.shared.modal.ui.body = {
-  view: function view() {
-    return m('.c-modal--body.padding-medium', [m.component(vhxm.components.shared.modal.state.content.body())]);
-  }
-};
-
-vhxm.components.shared.modal.ui.actions = {
-  view: function view() {
-    var singleAction = parseInt(vhxm.components.shared.modal.state.hasActions(), 10) === 1;
-    if (vhxm.components.shared.modal.state.actions.template()) {
-      return m('.c-modal--actions', [m.component(vhxm.components.shared.modal.state.actions.template())]);
-    } else {
-      return m('.c-modal--actions', [m('.padding-small.text-center', [!singleAction ? m('.btn.btn--' + (singleAction ? 'fill' : 'half') + '.btn-gray', {
-        onclick: vhxm.components.shared.modal.state.actions.leftCallback
-      }, vhxm.components.shared.modal.state.actions.left()) : '', m('.btn.btn--' + (singleAction ? 'fill' : 'half') + '.btn-teal', {
-        onclick: vhxm.components.shared.modal.state.actions[singleAction ? 'singleCallback' : 'rightCallback']
-      }, vhxm.components.shared.modal.state.actions[singleAction ? 'single' : 'right']())])]);
-    }
-  }
-};
-vhxm.components.shared.radio.controller = function (opts) {
-  var self = this;
-  opts = opts || {};
-
-  if (typeof opts.checkedByDefault === 'undefined') {
-    opts.checkedByDefault = true;
-  }
-  self.state = new vhxm.components.shared.radio.state();
-
-  opts.items.map(function (item) {
-    if (item.checked) {
-      self.state.isChecked(item.value);
-    }
-  });
-
-  if (opts.checkedByDefault && !self.state.isChecked()) {
-    self.state.isChecked(opts.items[0].value);
-  }
-
-  if (opts.api) {
-    opts.api(self);
-  }
-};
-vhxm.components.shared.radio.state = function () {
-  this.isChecked = m.prop(null);
-};vhxm.components.shared.radio.ui.container = {
-  controller: vhxm.components.shared.radio.controller,
-  view: function view(ctrl, opts) {
-    return m('form.form', [m('ul.radio-' + (opts.color ? opts.color : 'vimeo-blue') + (opts.stacked ? '.radio--stacked' : opts.buttons ? '.radio--buttons' : ''), [opts.items.map(function (item, index) {
-      var is_checked = ctrl.state.isChecked() === item.value;
-      return m('li', [m('input', {
-        id: opts.name + '-' + index,
-        type: 'radio',
-        onchange: function onchange(event) {
-          ctrl.state.isChecked(item.value);
-          if (opts.onchange) {
-            opts.onchange(event);
-          }
-        },
-        name: opts.name,
-        value: item.value,
-        checked: is_checked
-      }), m('label' + (opts.buttons ? '.btn-' + (is_checked ? 'vimeo-blue' : 'gray') + '.btn--fill.btn-radio.margin-bottom-medium' : ''), {
-        for: opts.name + '-' + index
-      }, [m.component(vhxm.components.shared.radio.ui.icon), m('span.radio--label.text-left' + (opts.buttons ? '.padding-left-small' : '') + (opts.stacked ? '.truncate.truncate--xlarge' : ''), {
-        style: {
-          marginTop: !opts.buttons || opts.buttons && item.label.title ? '0px' : '8px'
-        }
-      }, opts.buttons ? [m('strong.text-2' + (is_checked ? '.text--white' : '.text--black'), item.label.title ? item.label.title : item.label), item.label.descriptor ? m('p.text-4' + (is_checked ? '.text--white' : ''), item.label.descriptor) : ''] : item.label)]), item.template ? m('div.clear.padding-top-xsmall', [item.template]) : '']);
-    })])]);
-  }
-};
-
-vhxm.components.shared.radio.ui.icon = {
-  view: function view() {
-    return m('span.radio--icon', [m('i.circle-top', [m('span')]), m('i.circle-bottom', [m('span')])]);
-  }
-};
-vhxm.components.shared.search_input.controller = function (opts) {
-  var self = this;
-
-  self.timeout = null;
-  self.state = new vhxm.components.shared.search_input.state();
-  self.state.value(opts.value ? opts.value : null);
-
-  self.debounceSearch = function (event) {
-    if (self.timeout) {
-      clearTimeout(self.timeout);
-    }
-
-    self.timeout = setTimeout(function () {
-      self.fetchResults(event.target.value);
-      self.timeout = null;
-    }, 300);
-  };
-
-  self.handleInput = function (event) {
-    self.debounceSearch(event);
-  };
-
-  self.fetchResults = function (query) {
-    opts.search(query, function (data) {
-      opts.callback(data);
-    });
-  };
-
-  self.updateQueryParam = function (query) {
-    var loc = window.location;
-    var search = void 0;
-    var href = loc.pathname;
-
-    if (query.length && window.history && window.history.replaceState) {
-      search = loc.search.length && loc.search.match(/\?/) ? loc.search : '?';
-      href += search.match(/q\=/) ? search.replace(/q\=[^&]*/, 'q=' + query) : search + '&q=' + query;
-      history.replaceState({}, '', href);
-    } else {
-      search = loc.search.replace(/q\=[^&]*/, '');
-      href += search.length === 1 ? '' : search;
-      history.replaceState({}, '', href);
-    }
-  };
-};vhxm.components.shared.search_input.state = function () {
-  this.value = m.prop(null);
-};
-vhxm.components.shared.search_input.ui.container = {
-  controller: function controller(opts) {
-    return new vhxm.components.shared.search_input.controller(opts);
-  },
-  view: function view(ctrl, opts) {
-    return m('input.c-select--search.padding-right-large.icon-search-black.icon--xsmall', {
-      config: opts.config ? opts.config : '',
-      type: 'text',
-      value: ctrl.state.value(),
-      placeholder: opts.placeholder ? opts.placeholder : 'Search',
-      onkeydown: function oninput(event) {
-        if (parseInt(event.which, 10) === 13 || parseInt(event.keyCode, 10) === 13) {
-          ctrl.fetchResults(event.target.value);
-          ctrl.timeout = null;
-        }
-      },
-      oninput: function oninput(event) {
-        ctrl.state.value(event.target.value);
-        if (opts.queryParam) {
-          ctrl.updateQueryParam(event.target.value);
-        }
-        if (opts.oninput) {
-          opts.oninput(event);
-        }
-        ctrl.handleInput(event);
-      }
-    });
-  }
-};
-vhxm.components.shared.select.controller = function (opts) {
-  var self = this;
-  var api = opts.api ? opts.api : m.prop(null);
-
-  self.init = function () {
-    self.state = new vhxm.components.shared.select.state();
-    self.model = new vhxm.components.shared.select.model();
-
-    self.type = opts.type || 'standard';
-    self.multiselect = opts.multiselect || false;
-    self.caret = opts.caret || 'right';
-    self.position = opts.position || m.prop('bottom');
-    self.model.items = opts.items;
-
-    if (opts.selected) {
-      opts.selected.map(function (item) {
-        self.selectItem(item, true);
-      });
-    }
-
-    self.state.focusInput(opts.focusOnOpen ? opts.focusOnOpen : true);
-
-    if (opts.isProcessing) {
-      self.state.isProcessing = opts.isProcessing;
-    }
-    if (opts.onSelect) {
-      self.state.onSelect = opts.onSelect;
-    }
-    if (opts.onAction) {
-      self.state.onAction = opts.onAction;
-    }
-    if (opts.onClose) {
-      self.state.onClose = opts.onClose;
-    }
-
-    $(document).on('click', function (event) {
-      var is_dropdown = $(event.target).closest('.c-select--container').length;
-
-      if (!is_dropdown && self.state.isDropdownOpen()) {
-        m.startComputation();
-        self.state.isDropdownOpen(false);
-        self.state.onClose();
-        m.endComputation();
-      }
-    });
-
-    api(self);
-
-    $(window).on('quartz:select:open', function () {
-      self.state.isDropdownOpen(false);
-    });
-  };
-
-  self.selectedLabel = function () {
-    var selected = opts.placeholder ? opts.placeholder : 'Select...';
-
-    if (self.state.selected()) {
-      if (Object.keys(self.state.selected()).length > 1) {
-        selected = 'Multiple items selected';
-      } else {
-        var key = Object.keys(self.state.selected())[0];
-        selected = self.state.selected()[key].label;
-      }
-    }
-
-    return selected;
-  };
-
-  self.handleKeydown = function (event) {
-    var container = $(event.target).closest('.c-select--container');
-    var options = container.find('.c-select--options');
-    var input = container.find('.c-select--input-container input');
-
-    // Down Arrow
-    if (event.keyCode === 40) {
-      event.preventDefault();
-      self.setHighlightedState('down', options);
-    }
-    // Up Arrow
-    else if (event.keyCode === 38) {
-        event.preventDefault();
-        self.setHighlightedState('up', options, input);
-      }
-      // Enter/Return
-      else if (event.keyCode === 13 && self.state.isDropdownOpen()) {
-          event.preventDefault();
-          if (self.state.highlightIndex() >= 0) {
-            self.selectItem(self.model.items()[self.state.highlightIndex()]);
-          }
-        }
-  };
-
-  self.handleClick = function (event) {
-    event.preventDefault();
-    var container = $(event.target).closest('.c-select--container').find('.c-select--options');
-
-    if (!self.state.isDropdownOpen()) {
-      self.state.focusInput(opts.focusOnOpen ? opts.focusOnOpen : true);
-      $(window).trigger('quartz:select:open');
-    }
-
-    self.state.isDropdownOpen(!self.state.isDropdownOpen());
-    if (!self.state.isDropdownOpen()) {
-      self.state.onClose();
-    }
-    self.scrollOptionsList(container);
-  };
-
-  self.handleInput = function (event) {
-    self.state.highlightIndex(-1);
-    self.state.searchInputValue(event.target.value);
-    self.state.isLoading(true);
-  };
-
-  self.selectItem = function (item, isInit) {
-    var selected = void 0;
-    var obj = {
-      value: item[opts.prop_map.value],
-      label: item[opts.prop_map.label]
-    };
-
-    if (!self.multiselect) {
-      self.state.selected({});
-    }
-
-    selected = self.state.selected() || self.state.selected({});
-
-    if (selected[item[opts.prop_map.key]]) {
-      delete selected[item[opts.prop_map.key]];
-      self.state.onSelect(obj, self.state.selected(), 'removed');
-    } else {
-      selected[item[opts.prop_map.key]] = obj;
-      self.state.onSelect(obj, self.state.selected(), 'added');
-    }
-
-    self.state.selected(selected);
-
-    if (!isInit) {
-      self.state.isDropdownOpen(self.multiselect ? true : false);
-      if (!self.multiselect) {
-        self.state.onClose();
-      }
-    }
-
-    if (self.multiselect) {
-      self.state.highlightIndex(-1);
-    }
-  };
-
-  self.handleAction = function (event) {
-    event.preventDefault();
-    m.startComputation();
-    self.state.footerLoading(true);
-    m.endComputation();
-
-    self.state.onAction(function () {
-      m.startComputation();
-      self.state.searchInputValue('');
-      self.state.footerLoading(false);
-      self.state.isDropdownOpen(false);
-      self.state.onClose();
-      m.endComputation();
-    });
-  };
-
-  self.searchCallback = function (data) {
-    m.startComputation();
-    self.model.items(data);
-    self.state.isLoading(false);
-    m.endComputation();
-  };
-
-  self.setHighlightedState = function (direction, container, input) {
-    if (direction === 'down') {
-      if (self.state.highlightIndex() < self.model.items().length - 1) {
-        self.state.highlightIndex(self.state.highlightIndex() + 1);
-      } else {
-        self.state.highlightIndex(self.model.items().length - 1);
-      }
-    } else if (direction === 'up') {
-      if (self.state.highlightIndex() > 0) {
-        self.state.highlightIndex(self.state.highlightIndex() - 1);
-      } else if (self.state.highlightIndex() <= 0) {
-        self.state.highlightIndex(-1);
-        input.focus();
-      }
-    }
-    self.scrollOptionsList(container);
-  };
-
-  self.scrollOptionsList = function (container) {
-    if (container.length) {
-      container.eq(0).scrollTop(self.state.optionHeight() * self.state.highlightIndex());
-    }
-  };
-
-  if (opts.init) {
-    self.init();
-  }
-};
-vhxm.components.shared.select.model = function () {
-  this.items = m.prop(null);
-};
-vhxm.components.shared.select.state = function () {
-  this.selected = m.prop(null);
-  this.highlighted = m.prop({});
-  this.isDropdownOpen = m.prop(false);
-  this.highlightIndex = m.prop(-1);
-  this.optionHeight = m.prop(0);
-  this.isLoading = m.prop(false);
-  this.searchInputValue = m.prop('');
-  this.footerLoading = m.prop(false);
-  this.focusInput = m.prop(true);
-  this.isProcessing = m.prop([]);
-  this.onSelect = function () {};
-  this.onClose = function () {};
-  this.onAction = function (done) {
-    done();
-  };
-};
-vhxm.components.shared.select.ui.container = {
-  controller: function controller(opts) {
-    opts.init = true;
-    return new vhxm.components.shared.select.controller(opts);
-  },
-  view: function view(ctrl, opts) {
-    var options = opts.search ? '.has-search' : '';
-    options += opts.trigger ? '.has-trigger' : '';
-    options += opts.action ? '.has-action' : '';
-    options += opts.type === 'media' ? '.has-media' : '';
-    options += opts.inline ? '.inline' : '';
-    options += '.caret--' + (ctrl.position() === 'top' ? 'bottom' : 'top') + '-' + ctrl.caret;
-
-    if (opts.trigger) {
-      opts.trigger.attrs.onclick = ctrl.handleClick;
-      opts.trigger.attrs.className = opts.trigger.attrs.className ? opts.trigger.attrs.className + ' c-select--trigger' : 'c-select--trigger';
-    }
-
-    return m('.c-select--container.relative.form' + options, {
-      onmouseleave: function onmouseleave() {
-        ctrl.state.highlightIndex(-1);
-      },
-      onkeydown: ctrl.handleKeydown
-    }, [opts.trigger ? opts.trigger : m('a.c-select--trigger.truncate.btn-dropdown-' + (opts.color ? opts.color : 'gray') + '.btn--fill' + (ctrl.state.isDropdownOpen() ? '.is-active' : ''), {
-      href: '#',
-      onclick: ctrl.handleClick
-    }, ctrl.selectedLabel()), m('.c-select--dropdown.bg-white.border.radius.fill-width' + (ctrl.state.isDropdownOpen() ? '.is-open' : ''), {
-      style: {
-        top: opts.offset ? opts.offset + 'px' : '40px'
-      },
-      config: function config(el) {
-        if (ctrl.position() === 'top') {
-          el.style.top = -(el.offsetHeight + 10) + 'px';
-        }
-      }
-    }, [opts.search ?
-    // if search is enabled
-    m('.c-select--input-container.padding-medium.absolute.bg-white.fill-width.radius', [m.component(vhxm.components.shared.search_input.ui.container, {
-      config: function config(el, init) {
-        if (ctrl.state.focusInput()) {
-          setTimeout(function () {
-            el.focus();
-            ctrl.state.focusInput(false);
-          }, 10);
-        }
-      },
-      callback: ctrl.searchCallback,
-      search: function search(query, callback) {
-        if (ctrl.state.highlightIndex() === -1) {
-          opts.search(query, callback);
-        }
-      },
-      placeholder: 'Search',
-      oninput: ctrl.handleInput
-    })]) : '', m.component(vhxm.components.shared.select.ui.list.container, opts, ctrl), opts.action && ctrl.state.searchInputValue().length ?
-    // show Create New Category dropdown footer action
-    m('.c-select--footer.border-top', [m('a.btn-teal.btn--fill' + (ctrl.state.footerLoading() ? '.is-loading' : ''), {
-      onclick: ctrl.handleAction,
-      href: '#'
-    }, opts.action + (ctrl.state.searchInputValue().length ? ' \'' + ctrl.state.searchInputValue() + '\'' : ''))]) : ''])]);
-  }
-};
-vhxm.components.shared.sidebar.controller = function (opts) {
-  var self = this;
-  self.opts = opts;
-
-  if (self.opts) {
-    if (self.opts.onInit) {
-      self.opts.onInit();
-    }
-    if (self.opts.loadedState) {
-      vhxm.components.shared.sidebar.setLoadedState(self.opts.loadedState);
-    }
-    if (opts.template) {
-      vhxm.components.shared.sidebar.setTemplate(self.opts.template);
-    }
-    if (opts.onOpen) {
-      vhxm.components.shared.sidebar.state.onOpen = self.opts.onOpen;
-    }
-    if (opts.onClose) {
-      vhxm.components.shared.sidebar.state.onClose = self.opts.onClose;
-    }
-    if (opts.onBeforeClose) {
-      vhxm.components.shared.sidebar.state.onBeforeClose = self.opts.onBeforeClose;
-    }
-  }
-
-  self.documentClickHandler = function (event) {
-
-    var is_sidebar = !$(event.target).closest('body').length || $(event.target).hasClass('c-sidebar') || $(event.target).closest('[data-flash], tr.is-clickable, .c-sidebar' + (self.opts && self.opts.clickBlackList ? ', ' + self.opts.clickBlackList : '')).length;
-
-    if (!is_sidebar && vhxm.components.shared.sidebar.state.isOpen()) {
-      vhxm.components.shared.sidebar.toggle('close');
-    }
-  };
-
-  self.animatorIn = function (elem, isInit) {
-    if (!isInit) {
-      $(elem).velocity('stop', true);
-      var callback = function callback() {
-        $(document).on('keyup', self.esc);
-        $(document).on('click', self.documentClickHandler);
-        vhxm.components.shared.sidebar.state.onOpen();
-        vhxm.components.shared.sidebar.state.skipTransition(true);
-      };
-
-      if (vhxm.components.shared.sidebar.state.isOpen()) {
-        if (vhxm.components.shared.sidebar.state.skipTransition()) {
-          elem.style.right = '0px';
-          callback();
-        } else {
-          $(elem).velocity({
-            right: 0
-          }, {
-            duration: vhxm.components.shared.sidebar.state.skipTransition() ? 0 : 500,
-            easing: [0.19, 1, 0.22, 1],
-            complete: callback
-          });
-        }
-      }
-    }
-  };
-
-  self.animatorOut = function (elem, isInit) {
-    $(elem).velocity('stop', true);
-    $(elem).velocity({
-      right: '-470'
-    }, {
-      duration: 500,
-      easing: [0.19, 1, 0.22, 1],
-      complete: function complete() {
-        vhxm.components.shared.sidebar.state.onClose();
-        $(document).off('keyup', self.esc);
-        $(document).off('click', self.documentClickHandler);
-        vhxm.components.shared.sidebar.state.skipTransition(false);
-      }
-    });
-  };
-
-  self.esc = function (event) {
-    if (event.keyCode === 27) {
-      vhxm.components.shared.sidebar.toggle('close');
-    }
-  };
-};vhxm.components.shared.sidebar.toggle = function (state, route) {
-  state = state === 'open' ? true : false;
-
-  var done = function done() {
-    vhxm.components.shared.sidebar.state.isOpen(state);
-    if (route) {
-      return m.route(route);
-    }
-
-    m.redraw();
-  };
-
-  if (vhxm.components.shared.sidebar.state.isOpen() && !state || !vhxm.components.shared.sidebar.state.isOpen() && state) {
-    if (!state) {
-      vhxm.components.shared.sidebar.state.onBeforeClose(done);
-    } else {
-      done();
-    }
-  }
-};
-
-vhxm.components.shared.sidebar.setTemplate = function (template) {
-  vhxm.components.shared.sidebar.state.template(template);
-};
-
-vhxm.components.shared.sidebar.setLoadedState = function (obj) {
-  if (!!(obj && obj.constructor && obj.call && obj.apply)) {
-    vhxm.components.shared.sidebar.state.isLoaded = obj;
-  } else {
-    throw 'Loaded State must be a Mithril prop.';
-  }
-
-  m.redraw();
-};
-vhxm.components.shared.sidebar.state = {
-  isOpen: m.prop(false),
-  isLoaded: m.prop(false),
-  skipTransition: m.prop(false),
-  template: m.prop(null),
-  onBeforeClose: function onBeforeClose(done) {
-    done();
-  },
-  onClose: function onClose() {},
-  onOpen: function onOpen() {}
-};
-vhxm.components.shared.sidebar.ui.container = {
-  controller: vhxm.components.shared.sidebar.controller,
-  view: function view(ctrl) {
-    return m('.c-sidebar.bg-white.shadow--gray' + (vhxm.components.shared.sidebar.state.isLoaded() ? '' : '.loader-slate.loader--cover-hide.loader--large.is-loading'), {
-      config: vhxm.components.shared.sidebar.state.isOpen() ? ctrl.animatorIn : ctrl.animatorOut
-    }, vhxm.components.shared.sidebar.state.isLoaded() ? [m('a.c-sidebar--close.icon-circle.icon-x-navy.icon--xsmall', {
+    }, vhxm.components.shared.sidebar.state.isLoaded() ? [m('a.c-sidebar--close.icon-circle.icon-x-black.icon--xsmall', {
       onclick: function onclick() {
         setTimeout(function () {
           vhxm.components.shared.sidebar.toggle('close');
diff --git a/dist/component-sidebar.js b/dist/component-sidebar.js
index d5a7edd..a3ebc08 100644
--- a/dist/component-sidebar.js
+++ b/dist/component-sidebar.js
@@ -135,7 +135,7 @@ vhxm.components.shared.sidebar.ui.container = {
   view: function view(ctrl) {
     return m('.c-sidebar.bg-white.shadow--gray' + (vhxm.components.shared.sidebar.state.isLoaded() ? '' : '.loader-slate.loader--cover-hide.loader--large.is-loading'), {
       config: vhxm.components.shared.sidebar.state.isOpen() ? ctrl.animatorIn : ctrl.animatorOut
-    }, vhxm.components.shared.sidebar.state.isLoaded() ? [m('a.c-sidebar--close.icon-circle.icon-x-navy.icon--xsmall', {
+    }, vhxm.components.shared.sidebar.state.isLoaded() ? [m('a.c-sidebar--close.icon-circle.icon-x-black.icon--xsmall', {
       onclick: function onclick() {
         setTimeout(function () {
           vhxm.components.shared.sidebar.toggle('close');
diff --git a/package.json b/package.json
index 1470c0d..adf3950 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "babel-core": "6.14.0",
     "babel-preset-es2015": "6.14.0",
     "chalk": "1.1.3",
-    "chokidar": "^1.5.2",
+    "chokidar": "^1.5.3",
     "clean-css": "^3.4.18",
     "concat-files": "^0.1.0",
     "fs-walk": "0.0.1",
diff --git a/quartz-js/components/sidebar/sidebar.ui.js b/quartz-js/components/sidebar/sidebar.ui.js
index 5bbb1d3..8c50ce8 100644
--- a/quartz-js/components/sidebar/sidebar.ui.js
+++ b/quartz-js/components/sidebar/sidebar.ui.js
@@ -4,7 +4,7 @@ vhxm.components.shared.sidebar.ui.container = {
     return m('.c-sidebar.bg-white.shadow--gray' + (vhxm.components.shared.sidebar.state.isLoaded() ? '' : '.loader-slate.loader--cover-hide.loader--large.is-loading'), {
       config: vhxm.components.shared.sidebar.state.isOpen() ? ctrl.animatorIn : ctrl.animatorOut
     }, vhxm.components.shared.sidebar.state.isLoaded() ? [
-      m('a.c-sidebar--close.icon-circle.icon-x-navy.icon--xsmall', {
+      m('a.c-sidebar--close.icon-circle.icon-x-black.icon--xsmall', {
         onclick: function() {
           setTimeout(function() {
             vhxm.components.shared.sidebar.toggle('close');

From ab070c76be479350d06812e3580735ee0c2af0fe Mon Sep 17 00:00:00 2001
From: Hannah Nordgren <hey@hereshannahs.info>
Date: Wed, 27 Sep 2017 16:27:18 -0400
Subject: [PATCH 2/2] [BUGFIX] updated quartz version number, not chokidar

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index adf3950..c14ab0b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vhx/quartz",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "VHX Style Guide and JS Components.",
   "homepage": "https://github.com/vhx/quartz",
   "author": "VHX",
@@ -22,7 +22,7 @@
     "babel-core": "6.14.0",
     "babel-preset-es2015": "6.14.0",
     "chalk": "1.1.3",
-    "chokidar": "^1.5.3",
+    "chokidar": "^1.5.2",
     "clean-css": "^3.4.18",
     "concat-files": "^0.1.0",
     "fs-walk": "0.0.1",