qube-ui/dist/index.es.js

import React, { Component, Fragment, createRef, PureComponent, useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import styled, { css, createGlobalStyle } from 'styled-components';
import { Icon, Button, Menu, Tab, Modal, Header, Grid, Divider, Pagination, Input, Label, TextArea, Checkbox, Table, Dropdown } from 'semantic-ui-react';
import reactDom, { createPortal, findDOMNode } from 'react-dom';
import { Spring } from 'react-spring';
import { DateRangePicker } from 'react-dates';
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';
import { CustomPicker } from 'react-color';
import { EditableInput, Hue, Saturation } from 'react-color/lib/components/common';
import domain from 'domain';

function _taggedTemplateLiteralLoose(strings, raw) {
  if (!raw) {
    raw = strings.slice(0);
  }

  strings.raw = raw;
  return strings;
}

var taggedTemplateLiteralLoose = _taggedTemplateLiteralLoose;

var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

function commonjsRequire () {
	throw new Error('Dynamic requires are not currently supported by rollup-plugin-commonjs');
}

function unwrapExports (x) {
	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}

function createCommonjsModule(fn, module) {
	return module = { exports: {} }, fn(module, module.exports), module.exports;
}

var _extends_1 = createCommonjsModule(function (module) {
function _extends() {
  module.exports = _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

module.exports = _extends;
});

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

var objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;

var IconName = ['assets', 'dash', 'date-time', 'expand', 'help', 'image-big', 'image', 'left-navigation', 'logout', 'multimedia1', 'playlist', 'right-navigation', 'weather', 'video-big .path1', 'video-big .path2', 'virtual-ticket', 'tv', 'timer', 'ticket-bold', 'priority', 'more-options', 'move', 'list', 'grid', 'settings-qmpad', 'eye-closed', 'refresh', 'info', 'duplicate', 'checkbox-off', 'checkbox-on', 'radio-button-off', 'radio-button-on', 'management', 'login', 'data', 'dashboard', 'add', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'calendar', 'clock', 'color', 'download', 'edit', 'email', 'error', 'gear', 'key', 'language', 'left-to-right', 'link', 'lock', 'multimedia', 'no-notications', 'notifications', 'on-off', 'preview', 'priority-ticket', 'restore', 'right-to-left', 'rss', 'save', 'search', 'select-down', 'select-left', 'select-right', 'select-up', 'sms', 'stopwatch', 'success', 'text', 'ticket', 'transfer', 'unlock', 'update', 'upload', 'user', 'warning', 'zoom-in', 'zoom-out', 'cancel', 'pause', 'transfer-bold', 'call', 'end'];

function _templateObject() {
  var data = taggedTemplateLiteralLoose(["\n\tmargin: 0 !important;\n\tcolor: ", " !important;\n\n\t&&&& {\n\t\theight: 1em;\n\t}\n\n\t&&&.disabled {\n\t\tcursor: not-allowed !important;\n\t\tpointer-events: none !important;\n\t}\n\n\t&&&.clickable {\n\t\tcursor: pointer;\n\t}\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
/**
 * extends react semantic ui default icon
 * https://react.semantic-ui.com/elements/icon/
 * icon component
 */

var IconStyled = styled(function (_ref) {
  var color = _ref.color,
      props = objectWithoutPropertiesLoose(_ref, ["color"]);

  return React.createElement(Icon, props);
})(_templateObject(), function (_ref2) {
  var color = _ref2.color;
  return color;
});
IconStyled.propTypes = _extends_1({}, Icon.propTypes, {
  /** color of the icon */
  color: PropTypes.string
});
IconStyled.displayName = 'IconStyled';

var Icon$1 = function Icon$$1(_ref3) {
  var icon = _ref3.icon,
      className = _ref3.className,
      onClick = _ref3.onClick,
      props = objectWithoutPropertiesLoose(_ref3, ["icon", "className", "onClick"]);

  var combinedClassName = "icoqube" + icon + (className ? ' '.concat(className) : '') + (onClick ? ' clickable' : '');
  return React.createElement(IconStyled, _extends_1({}, props, {
    onClick: onClick,
    className: combinedClassName
  }));
};

Icon$1.defaultProps = {
  className: '',
  color: 'black',
  onClick: undefined
};
Icon$1.propTypes = {
  /** icon of type iconName to be displayed (examples: success, add) */
  icon: PropTypes.oneOf(IconName).isRequired,

  /** css class name to be applied on the icon */
  className: PropTypes.string,

  /** string color value for the icon (examples: black, blue, #FFF) */
  color: PropTypes.string,

  /** onClick function handler */
  onClick: PropTypes.func
};
Icon$1.displayName = 'Icon';

function _templateObject2() {
  var data = taggedTemplateLiteralLoose(["\n\t", "\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1() {
  var data = taggedTemplateLiteralLoose(["\n\tfont-size: ", "px!important;\n\tfont-style: ", "!important;\n\tfont-weight: ", "!important;\n\tline-height: ", "px!important;\n\tcolor: ", "!important;\n\ttext-transform: ", "!important;\n\tborder-bottom: ", "!important;\n"]);

  _templateObject$1 = function _templateObject() {
    return data;
  };

  return data;
}
var typographyStyles = css(_templateObject$1(), function (_ref) {
  var size = _ref.size,
      theme = _ref.theme;
  return theme.text[size].font;
}, function (_ref2) {
  var italic = _ref2.italic;
  return italic ? 'italic' : 'normal';
}, function (_ref3) {
  var bold = _ref3.bold;
  return bold ? 'bold' : 'normal';
}, function (_ref4) {
  var size = _ref4.size,
      theme = _ref4.theme;
  return theme.text[size].line;
}, function (_ref5) {
  var color = _ref5.color,
      theme = _ref5.theme;
  return theme.colors[color];
}, function (_ref6) {
  var uppercase = _ref6.uppercase;
  return uppercase ? 'uppercase' : 'none';
}, function (_ref7) {
  var color = _ref7.color,
      underlined = _ref7.underlined,
      theme = _ref7.theme;
  return underlined ? "1px solid " + theme.colors[color] : '0';
});
var Text = styled.div(_templateObject2(), typographyStyles);
Text.displayName = 'Text';
Text.defaultProps = {
  color: 'darkGray',
  italic: false,
  uppercase: false,
  size: 'md',
  bold: false,
  underlined: false
};
Text.propTypes = {
  color: PropTypes.string,
  italic: PropTypes.bool,
  uppercase: PropTypes.bool,
  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
  bold: PropTypes.bool,
  underlined: PropTypes.bool
};

var ButtonText = function ButtonText(props) {
  return React.createElement(Text, _extends_1({
    uppercase: true
  }, props));
};

ButtonText.displayName = 'ButtonText';

function _templateObject$2() {
  var data = taggedTemplateLiteralLoose(["\n\tpadding-right: 16px !important;\n\tpadding-left: 16px !important;\n\n\tbackground-color: ", " !important;\n\tborder-radius: ", " !important;\n\tpointer-events: ", " !important;\n\tcursor: ", ";\n\n\t&:active {\n\t\tbackground-color: ", " !important;\n\t}\n\n\ti.icon {\n\t\tmargin-right: 0 !important;\n\t\tmargin-left: 6px !important;\n\t}\n"]);

  _templateObject$2 = function _templateObject() {
    return data;
  };

  return data;
}

var Button$1 = function Button$$1(_ref) {
  var icon = _ref.icon,
      content = _ref.content,
      labelPosition = _ref.labelPosition,
      iconColor = _ref.iconColor,
      loading = _ref.loading,
      children = _ref.children,
      size = _ref.size,
      props = objectWithoutPropertiesLoose(_ref, ["icon", "content", "labelPosition", "iconColor", "loading", "children", "size"]);

  return React.createElement(ButtonStyled, _extends_1({
    loading: loading
  }, props), React.createElement(ButtonText, {
    size: size,
    color: loading ? 'transparent' : 'white'
  }, children || content, icon && React.createElement(Icon$1, {
    color: iconColor,
    icon: icon
  })));
};
/**
 * extends react semantic ui default button
 * https://react.semantic-ui.com/elements/button/#types-button
 * button component
 */


var ButtonStyled = styled(Button)(_templateObject$2(), function (_ref2) {
  var theme = _ref2.theme;
  return theme.buttons.bg;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.buttons.borderRadius;
}, function (_ref4) {
  var loading = _ref4.loading;
  return loading ? 'none' : 'auto';
}, function (_ref5) {
  var disabled = _ref5.disabled;
  return disabled ? 'not-allowed' : 'pointer';
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.buttons.activeBg;
});
ButtonStyled.displayName = 'ButtonStyled';
Button$1.defaultProps = {
  size: 'lg',
  iconColor: 'white',
  icon: null,
  labelPosition: 'left',
  content: null,
  loading: false,
  children: null
};
Button$1.propTypes = {
  /** children */
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),

  /** Size of the text */
  size: PropTypes.string,

  /** icon to be displayed */
  icon: PropTypes.oneOf(IconName),

  /** label position on element */
  labelPosition: PropTypes.oneOf(['left', 'right']),

  /** text visible on the button */
  content: PropTypes.string,

  /** color of the icon */
  iconColor: PropTypes.string,

  /** loading state of the button */
  loading: PropTypes.bool
};
Button$1.displayName = 'Button';

function _templateObject$3() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: ", " !important;\n\theight: ", " !important;\n\tpadding: 0 !important;\n\tbackground-color: ", " !important;\n\tborder-radius: 50% !important;\n\tcursor: ", ";\n\ttext-transform: uppercase !important;\n\n\t&:active,\n\t&:focus {\n\t\tbackground-color: ", " !important;\n\t}\n"]);

  _templateObject$3 = function _templateObject() {
    return data;
  };

  return data;
}

var IconButton = function IconButton(_ref) {
  var icon = _ref.icon,
      btnSize = _ref.btnSize,
      iconSize = _ref.iconSize,
      iconColor = _ref.iconColor,
      props = objectWithoutPropertiesLoose(_ref, ["icon", "btnSize", "iconSize", "iconColor"]);

  return React.createElement(IconButtonStyled, _extends_1({}, props, {
    btnSize: btnSize
  }), React.createElement(Icon$1, {
    color: iconColor,
    size: iconSize,
    icon: icon
  }));
};
/**
 * extends react semantic ui default button
 * https://react.semantic-ui.com/elements/button/#types-button
 * button component
 */


var IconButtonStyled = styled(function (_ref2) {
  var btnSize = _ref2.btnSize,
      props = objectWithoutPropertiesLoose(_ref2, ["btnSize"]);

  return React.createElement(Button, props);
})(_templateObject$3(), function (_ref3) {
  var btnSize = _ref3.btnSize;
  return btnSize;
}, function (_ref4) {
  var btnSize = _ref4.btnSize;
  return btnSize;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.buttons.bg;
}, function (_ref6) {
  var disabled = _ref6.disabled;
  return disabled ? 'not-allowed' : 'pointer';
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.buttons.activeBg;
});
IconButtonStyled.displayName = 'IconButtonStyled';
IconButton.defaultProps = {
  iconSize: 'small',
  btnSize: '24px',
  iconColor: 'white'
};
IconButton.propTypes = {
  /** icon to be displayed */
  icon: PropTypes.oneOf(IconName).isRequired,

  /** color of the icon */
  iconColor: PropTypes.string,

  /** size of the icon */
  iconSize: PropTypes.string,

  /** size of the button */
  btnSize: PropTypes.string
};
IconButton.displayName = 'IconButton';

function _templateObject$4() {
  var data = taggedTemplateLiteralLoose(["\n\tpadding: 0 !important;\n\tborder-radius: 0 !important;\n\tborder-bottom: 1px solid ", " !important;\n\tappearance: none !important;\n\tbackground: transparent !important;\n\t&:hover,\n\t&:focus {\n\t\tcolor: ", " !important;\n\t\toutline: 0 !important;\n\t}\n"]);

  _templateObject$4 = function _templateObject() {
    return data;
  };

  return data;
}
var Link = styled(function (_ref) {
  var disabled = _ref.disabled,
      props = objectWithoutPropertiesLoose(_ref, ["disabled"]);

  return React.createElement(ButtonText, _extends_1({
    color: disabled ? 'strokeGray' : 'activeBlue'
  }, props));
})(_templateObject$4(), function (_ref2) {
  var theme = _ref2.theme,
      disabled = _ref2.disabled;
  return disabled ? theme.colors.strokeGray : theme.colors.deepBlue;
}, function (_ref3) {
  var theme = _ref3.theme,
      disabled = _ref3.disabled;
  return disabled ? theme.colors.strokeGray : theme.colors.deepBlue;
});
Link.defaultProps = {
  disabled: false
};
Link.propTypes = {
  /** boolean indicating whether disabled element should render */
  disabled: PropTypes.bool
};
Link.displayName = 'Link';

var ButtonLink = function ButtonLink(_ref) {
  var size = _ref.size,
      props = objectWithoutPropertiesLoose(_ref, ["size"]);

  return React.createElement(Button, _extends_1({
    as: function as(linkProps) {
      return React.createElement(Link, _extends_1({
        size: size
      }, linkProps));
    }
  }, props));
};

ButtonLink.defaultProps = {
  size: 'lg'
};
ButtonLink.propTypes = {
  /** string indicating size ['sm','md','lg','xl','xxl'] */
  size: PropTypes.string
};
ButtonLink.displayName = 'ButtonLink';

function _templateObject$5() {
  var data = taggedTemplateLiteralLoose(["\n\tpadding: 8px 16px;\n\tbackground: ", ";\n\tborder-width: 0;\n\tborder-bottom-left-radius: 16px;\n\tborder-bottom-right-radius: 16px;\n\tbox-shadow: ", ";\n\tcolor: ", ";\n\tcursor: ", ";\n\tfont-size: 14px;\n\ttext-transform: uppercase;\n\tuser-select: none;\n\n\t:active {\n\t\tbox-shadow: ", ";\n\t\toutline: none;\n\t}\n"]);

  _templateObject$5 = function _templateObject() {
    return data;
  };

  return data;
}
var TopButtonStyled = styled.button(_templateObject$5(), function (_ref) {
  var theme = _ref.theme,
      disabled = _ref.disabled;
  return disabled ? theme.colors.strokeGray : theme.colors.jellyfish;
}, function (_ref2) {
  var disabled = _ref2.disabled;
  return disabled ? 'none' : '0px 2px 6px rgba(0, 0, 0, 0.25)';
}, function (_ref3) {
  var disabled = _ref3.disabled,
      theme = _ref3.theme;
  return disabled ? theme.colors.gray : 'white';
}, function (_ref4) {
  var disabled = _ref4.disabled;
  return disabled ? 'not-allowed' : 'pointer';
}, function (_ref5) {
  var disabled = _ref5.disabled;
  return disabled ? 'none' : '0px 2px 4px rgba(0, 0, 0, 0.25)';
});

var TopButton = function TopButton(props) {
  return React.createElement(TopButtonStyled, props);
};

TopButton.defaultProps = {
  children: 'Apply'
};
TopButton.propTypes = {
  /** Name of the button to be displayed */
  children: PropTypes.string
};
TopButton.displayName = 'TopButton';

function _templateObject$6() {
  var data = taggedTemplateLiteralLoose(["\n\tpadding: 8px;\n\tfont-size: 16px;\n\tline-height: 19px;\n\tborder: ", ";\n\tborder-radius: 4px;\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tcursor: pointer;\n\toutline: none;\n"]);

  _templateObject$6 = function _templateObject() {
    return data;
  };

  return data;
}

var SelectButton = function SelectButton(props) {
  return React.createElement(SelectButtonStyled, _extends_1({
    type: "button"
  }, props));
};

var SelectButtonStyled = styled.button(_templateObject$6(), function (_ref) {
  var theme = _ref.theme,
      selected = _ref.selected,
      backgroundColor = _ref.backgroundColor;
  return "1px solid " + (selected ? backgroundColor || theme.colors.deepBlue : theme.colors.strokeGray);
}, function (_ref2) {
  var theme = _ref2.theme,
      selected = _ref2.selected,
      backgroundColor = _ref2.backgroundColor;
  return selected ? backgroundColor || theme.colors.deepBlue : theme.colors.white;
}, function (_ref3) {
  var theme = _ref3.theme,
      selected = _ref3.selected,
      colorText = _ref3.colorText;
  return selected ? theme.colors.white : colorText || theme.colors.gray;
});
SelectButton.defaultProps = {
  selected: false
};
SelectButton.displayName = 'SelectButton';
SelectButton.propTypes = {
  selected: PropTypes.bool
};

function _templateObject$7() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\n\tbutton {\n\t\tborder-radius: 0;\n\t\twidth: ", ";\n\t}\n\n\tbutton:first-child {\n\t\tborder-radius: 4px 0px 0px 4px;\n\t}\n\n\tbutton:last-child {\n\t\tborder-radius: 0px 4px 4px 0px;\n\t}\n"]);

  _templateObject$7 = function _templateObject() {
    return data;
  };

  return data;
}

var SelectGroupButton = function SelectGroupButton(_ref) {
  var children = _ref.children,
      childWidth = _ref.childWidth,
      props = objectWithoutPropertiesLoose(_ref, ["children", "childWidth"]);

  return React.createElement(SelectGroupButtonWrapper, _extends_1({
    childWidth: childWidth
  }, props), children);
};

var SelectGroupButtonWrapper = styled.div(_templateObject$7(), function (_ref2) {
  var childWidth = _ref2.childWidth;
  return childWidth;
});
SelectGroupButton.defaultProps = {
  childWidth: '178px'
};
SelectGroupButton.propTypes = {
  /**  Node with the childrens */
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,

  /**  Child width to apply for each child element */
  childWidth: PropTypes.string
};
SelectGroupButton.displayName = 'SelectGroupButton';
SelectGroupButtonWrapper.displayName = 'SelectGroupButtonWrapper';

var colors = {
  white: '#FFFFFF',
  black: '#424242',
  // primary
  deepBlue: '#0D0CB5',
  activeBlue: '#005BEA',
  purple: '#4E2F60',
  // secondary
  yellow: '#FBB03B',
  orange: '#EC8222',
  red: '#CF0A2C',
  darkRed: '#A21D21',
  lightBlue: '#DAEDFF',
  malibu: '#63BDE9',
  pacificBlue: '#1692CE',
  green: '#3EC28F',
  lightGreen: '#95C623',
  purpleHeart: '#6A11CB',
  ultraMarine: '#0D0CB5',
  oliveDrab: '#679009',
  mariner: '#4265AA',
  summerSky: '#36A8DF',
  whisper: '#ECECEC',
  // grayscale
  darkGray: '#424242',
  mediumGray: '#6A6A6A',
  gray: '#B8B8B8',
  strokeGray: '#DDDDDD',
  lightGray: '#F3F3F3',
  // gradient
  blueOcean: 'linear-gradient(90deg,#0D0CB5 0%,rgba(255, 255, 255, 0) 100%),#2681E0',
  wine: 'linear-gradient(90deg,#4E2F60 0%,rgba(255, 255, 255, 0) 100%),#852D91',
  jellyfish: 'linear-gradient(90deg,#6A11CB 0%,rgba(255,255,255,0) 100%),#2575FC'
};

var SPACE_UNIT = 1;
var theme = {
  name: 'DEFAULT',
  colors: colors,
  borderRadius: '0',
  navbar: {
    backgroundColor: colors.darkRed
  },
  buttons: {
    borderRadius: '16px',
    bg: colors.activeBlue,
    activeBg: colors.deepBlue,
    text: colors.white,
    dropdown: {
      separatorColor: colors.gray,
      activeBackgroundColor: colors.gray
    }
  },
  list: {
    pairCell: colors.lightGray,
    unPairCell: colors.white,
    title: colors.black,
    additionalInfo: colors.gray,
    activeCell: colors.lightBlue,
    boxShadow: '0 3px 3px rgba(0, 0, 0, 0.25)'
  },
  span: {
    defaultColor: colors.activeBlue,
    negative: colors.red,
    positive: colors.green,
    primary: colors.activeBlue
  },
  block: {
    borderRadius: '0',
    backgroundColor: colors.darkRed,
    labelColor: colors.darkGray,
    color: colors.darkGray
  },
  input: {
    borderRadius: '0'
  },
  select: {
    borderRadius: '4px',
    placeholderColor: colors.darkGray,
    focusedBackgroundColor: colors.whisper,
    selectedBackgroundColor: colors.activeBlue,
    menuPadding: '5px 10px 5px 10px'
  },
  toggle: {
    color: colors.green
  },
  timePicker: {
    errorColor: colors.red,
    disabledColor: colors.lightGray,
    primaryColor: colors.activeBlue,
    activeColor: colors.deepBlue,
    hoverColor: colors.lightGray,
    textColor: colors.darkGray
  },
  numberSpinner: {
    errorColor: colors.red,
    disabledColor: colors.lightGray,
    disabledColorText: colors.gray,
    primaryColor: colors.activeBlue,
    activeColor: colors.deepBlue,
    hoverColor: colors.lightGray,
    textColor: colors.darkGray,
    borderColor: colors.white
  },
  toast: {
    titleColor: colors.darkGray,
    messageColor: colors.mediumGray,
    errorColor: colors.red,
    successColor: colors.green,
    warningColor: colors.yellow
  },
  passwordStrengthMeter: {
    none: colors.strokeGray,
    bad: colors.red,
    medium: colors.yellow,
    good: colors.lightGreen,
    excellent: colors.green
  },
  status: {
    bg: {
      success: colors.green,
      error: colors.red,
      info: colors.lightBlue,
      blocked: colors.jellyfish
    },
    color: {
      success: colors.white,
      error: colors.white,
      info: colors.darkGray,
      blocked: colors.white
    }
  },
  bulletState: {
    colors: {
      on: colors.green,
      away: colors.yellow,
      off: colors.red
    }
  },
  inputRange: {
    borderColor: colors.strokeGray,
    backgroundThumbColor: colors.white,
    gradient: function gradient(value) {
      return "linear-gradient(90deg, " + colors.purpleHeart + " 0%, " + colors.ultraMarine + " " + value + "%, " + colors.strokeGray + " " + value + "%, " + colors.strokeGray + " 100%)";
    }
  },
  gradeDropdown: {
    veryHigh: colors.darkRed,
    high: colors.orange,
    normal: colors.yellow,
    low: colors.green,
    veryLow: colors.activeBlue
  },
  label: {
    defaultColor: colors.activeBlue
  },
  listCard: {
    defaultBorder: colors.strokeGray,
    errorBorder: colors.red
  },
  dndList: {
    active: colors.activeBlue,
    dragOver: colors.lightBlue
  },
  space: {
    xxs: SPACE_UNIT * 0.25 + "em",
    xs: SPACE_UNIT * 0.5 + "em",
    sm: SPACE_UNIT * 0.75 + "em",
    md: SPACE_UNIT * 1.25 + "em",
    lg: SPACE_UNIT * 2 + "em",
    xl: SPACE_UNIT * 3.25 + "em",
    xxl: SPACE_UNIT * 5.25 + "em"
  },
  text: {
    sm: {
      font: 12,
      line: 14
    },
    md: {
      font: 13,
      line: 15
    },
    lg: {
      font: 15,
      line: 18
    },
    xl: {
      font: 18,
      line: 21
    },
    xxl: {
      font: 22,
      line: 26
    }
  }
};

var colorLuminance = (function (hex, lum) {
  if (lum === void 0) {
    lum = 0;
  }

  var rgb = '#';
  var c;
  hex.slice(1).match(/.{1,2}/g).forEach(function (element) {
    c = parseInt(element, 16);
    c = Math.round(Math.min(Math.max(0, c + c * lum), 255)).toString(16);
    rgb += ("00" + c).substr(c.length);
  });
  return rgb;
});

function _templateObject$8() {
  var data = taggedTemplateLiteralLoose(["\n\tbackground-position: center;\n\ttransition: background 0.8s;\n\tuser-select: none;\n\tcursor: pointer;\n\n\t:hover {\n\t\tbackground: ", "\n\t\t\tradial-gradient(circle, transparent 1%, ", " 1%) center/15000%;\n\t}\n\n\t:active {\n\t\tbackground-color: ", ";\n\t\tbackground-size: 100%;\n\t\ttransition: background 0s;\n\t}\n"]);

  _templateObject$8 = function _templateObject() {
    return data;
  };

  return data;
}
var Ripple = styled.div(_templateObject$8(), function (_ref) {
  var color = _ref.color;
  return colorLuminance(color, 0.1);
}, function (_ref2) {
  var color = _ref2.color;
  return colorLuminance(color, 0.1);
}, function (_ref3) {
  var color = _ref3.color;
  return colorLuminance(color, 0.3);
});
Ripple.propTypes = {
  /** color to be displayed in the ripple effect */
  color: PropTypes.string.isRequired
};
Ripple.displayName = 'Ripple';

function _templateObject3() {
  var data = taggedTemplateLiteralLoose(["\n\tpadding-left: 18px;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$1() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: 68px;\n\theight: 100%;\n\talign-items: center;\n\tjustify-content: center;\n\n\tbackground: ", ";\n\tborder-radius: 3px 0 0 3px;\n\tcolor: ", ";\n"]);

  _templateObject2$1 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$9() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tmin-width: 200px;\n\tmax-width: ", ";\n\theight: 68px;\n\n\talign-items: center;\n\n\tbackground-color: ", ";\n\tborder-radius: 3px;\n\tbox-shadow: 0 0 8px rgba(0, 0, 0, 0.15);\n\n\tcolor: ", ";\n\tfont-size: 35px;\n\toutline: none;\n"]);

  _templateObject$9 = function _templateObject() {
    return data;
  };

  return data;
}

var GenerateButton = function GenerateButton(_ref) {
  var children = _ref.children,
      onClick = _ref.onClick,
      boldContent = _ref.boldContent,
      bgColor = _ref.bgColor,
      fullWidth = _ref.fullWidth,
      props = objectWithoutPropertiesLoose(_ref, ["children", "onClick", "boldContent", "bgColor", "fullWidth"]);

  return React.createElement(GenerateButtonStyled, _extends_1({
    fullWidth: fullWidth,
    color: theme.colors.strokeGray,
    onClick: onClick
  }, props), boldContent && React.createElement(BoldContentWrapper, {
    bgColor: bgColor
  }, boldContent), React.createElement(Content, null, children));
};

var GenerateButtonStyled = styled(Ripple)(_templateObject$9(), function (_ref2) {
  var fullWidth = _ref2.fullWidth;
  return fullWidth ? '100%' : '340px';
}, function (_ref3) {
  var theme$$1 = _ref3.theme;
  return theme$$1.colors.white;
}, function (_ref4) {
  var theme$$1 = _ref4.theme;
  return theme$$1.colors.darkGray;
});
var BoldContentWrapper = styled.div(_templateObject2$1(), function (_ref5) {
  var bgColor = _ref5.bgColor;
  return bgColor;
}, function (_ref6) {
  var theme$$1 = _ref6.theme;
  return theme$$1.colors.white;
});
var Content = styled.div(_templateObject3());
GenerateButton.defaultProps = {
  boldContent: '',
  bgColor: theme.colors.red,
  fullWidth: false
};
GenerateButton.propTypes = {
  /** onClick handler */
  onClick: PropTypes.func.isRequired,

  /** text visible on bold side of button */
  boldContent: PropTypes.string,

  /** bold side color */
  bgColor: PropTypes.string,

  /** if the button is full width */
  fullWidth: PropTypes.bool,

  /** main content of the button */
  children: PropTypes.string.isRequired
};
GenerateButton.displayName = 'GenerateButton';

function _templateObject2$2() {
  var data = taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n"]);

  _templateObject2$2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$a() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tmin-width: 200px;\n\twidth: ", ";\n\theight: ", ";\n\n\talign-items: center;\n\tjustify-content: center;\n\n\tbackground-color: ", ";\n\n\tfont-size: 28px;\n\tbox-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);\n\tborder-radius: 4px;\n"]);

  _templateObject$a = function _templateObject() {
    return data;
  };

  return data;
}

var SquareButton = function SquareButton(_ref) {
  var children = _ref.children,
      onClick = _ref.onClick,
      width = _ref.width,
      height = _ref.height,
      bgColor = _ref.bgColor,
      textColor = _ref.textColor,
      props = objectWithoutPropertiesLoose(_ref, ["children", "onClick", "width", "height", "bgColor", "textColor"]);

  return React.createElement(SquareButtonStyled, _extends_1({
    onClick: onClick,
    width: width,
    height: height,
    bgColor: bgColor,
    color: bgColor || theme.colors.strokeGray
  }, props), React.createElement(Content$1, {
    textColor: textColor
  }, children));
};

var SquareButtonStyled = styled(Ripple)(_templateObject$a(), function (_ref2) {
  var width = _ref2.width;
  return width;
}, function (_ref3) {
  var height = _ref3.height;
  return height;
}, function (_ref4) {
  var bgColor = _ref4.bgColor,
      theme$$1 = _ref4.theme;
  return bgColor || theme$$1.colors.white;
});
var Content$1 = styled.div(_templateObject2$2(), function (_ref5) {
  var textColor = _ref5.textColor;
  return textColor;
});
SquareButton.defaultProps = {
  width: '427px',
  height: '68px',
  bgColor: undefined,
  textColor: theme.colors.darkGray
};
SquareButton.propTypes = {
  /** onClick handler */
  onClick: PropTypes.func.isRequired,

  /** button width */
  width: PropTypes.string,

  /** button height */
  height: PropTypes.string,

  /** button background color */
  bgColor: PropTypes.string,

  /** button text color */
  textColor: PropTypes.string,

  /** main content of the button */
  children: PropTypes.string.isRequired
};
SquareButton.displayName = 'SquareButton';

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;
  subClass.__proto__ = superClass;
}

var inheritsLoose = _inheritsLoose;

function _templateObject$b() {
  var data = taggedTemplateLiteralLoose(["\n\tbackground-color: ", " !important;\n\tbox-shadow: 0 2px 3px rgba(0, 0, 0, 0.4) !important;\n\n\t& .item {\n\t\tcolor: #fff !important;\n\t}\n\n\t&&& a.active.item {\n\t\tborder-color: #fff !important;\n\t\tfont-weight: 700;\n\t}\n\n\t&&& a.item:hover {\n\t\tborder-color: #fff !important;\n\t\tfont-weight: 700;\n\t}\n"]);

  _templateObject$b = function _templateObject() {
    return data;
  };

  return data;
}

var MenuExtended =
/*#__PURE__*/
function (_SemanticUIMenu) {
  inheritsLoose(MenuExtended, _SemanticUIMenu);

  function MenuExtended() {
    return _SemanticUIMenu.apply(this, arguments) || this;
  }

  return MenuExtended;
}(Menu);

MenuExtended.propTypes = _extends_1({}, Menu.propTypes, {
  color: PropTypes.string.isRequired
  /**
   * semantic UI Menu extended. Can be used as navbar
   * https://react.semantic-ui.com/collections/menu/
   */

});
var Navbar = styled(MenuExtended)(_templateObject$b(), function (_ref) {
  var color = _ref.color;
  return color;
});
Navbar.propTypes = {
  /** Navbar Color can be specified. Hexadecimal color ex: #a21d21 * */
  color: PropTypes.string.isRequired
};
Navbar.displayName = 'Navbar';

function _templateObject$c() {
  var data = taggedTemplateLiteralLoose(["\n\tborder-color: #cccccc !important;\n\n\t.active.item {\n\t\tborder-color: ", " !important;\n\t\tcolor: ", " !important;\n\t}\n\n\t.item {\n\t\tpadding: 8px 12px !important;\n\t\tcolor: #cccccc !important;\n\t\tfont-size: 15px !important;\n\t}\n"]);

  _templateObject$c = function _templateObject() {
    return data;
  };

  return data;
}

var Tabs = function Tabs(_ref) {
  var panes = _ref.panes,
      props = objectWithoutPropertiesLoose(_ref, ["panes"]);

  return React.createElement(TabStyled, _extends_1({
    menu: {
      secondary: true,
      pointing: true
    },
    panes: panes
  }, props));
};

var TabStyled = styled(Tab)(_templateObject$c(), function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.activeBlue;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.activeBlue;
});

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return self;
}

var assertThisInitialized = _assertThisInitialized;

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

var defineProperty = _defineProperty;

var _ref =
/*#__PURE__*/
React.createElement("path", {
  d: "M93.262 36.578c-.14.14-.376.235-.663.235-.308 0-.56-.067-.802-.381v.347h-.286v-3.99h.286v1.637c.241-.314.494-.381.802-.381.287 0 .522.095.663.235.275.274.347.723.347 1.149 0 .425-.072.874-.347 1.149zm-.702-2.281c-.662 0-.763.571-.763 1.132 0 .56.101 1.132.763 1.132s.763-.572.763-1.132c0-.56-.1-1.132-.763-1.132zM94.888 37.826c-.135.129-.331.174-.51.174h-.135v-.252h.106c.309 0 .399-.101.494-.37l.219-.6-.988-2.701h.315l.813 2.365.814-2.365h.314l-1.257 3.435a.713.713 0 0 1-.185.314zM100.886 36.958l-.399-.398c-.23.162-.522.252-.836.252a1.43 1.43 0 0 1-1.049-.426c-.393-.392-.387-.835-.387-1.603 0-.767-.006-1.21.387-1.602a1.43 1.43 0 0 1 1.05-.426c.426 0 .779.151 1.054.426.393.392.382.835.382 1.602 0 .679.005 1.093-.258 1.452l.392.386-.336.337zm-.64-3.413a.815.815 0 0 0-.595-.247.815.815 0 0 0-.594.247c-.197.213-.236.437-.236 1.238 0 .802.039 1.026.236 1.239.14.151.359.247.594.247a.699.699 0 0 0 .41-.13l-.42-.42.336-.336.387.387c.101-.202.118-.47.118-.986 0-.802-.04-1.026-.236-1.239zM101.839 35.49v-.533h1.638v.533h-1.638zM105.99 36.779h-1.616v-3.99h1.555c.74 0 1.206.42 1.206 1.092 0 .432-.269.74-.539.847.309.123.601.42.601.924 0 .734-.5 1.127-1.207 1.127zm-.112-3.447h-.898v1.143h.898c.387 0 .651-.202.651-.571 0-.37-.264-.572-.651-.572zm.056 1.687h-.954v1.216h.954c.421 0 .657-.258.657-.61 0-.354-.236-.606-.657-.606zM108.448 35.523c0 .488.258.796.724.796.319 0 .488-.09.69-.292l.364.342c-.291.292-.566.443-1.066.443-.712 0-1.279-.375-1.279-1.457 0-.92.477-1.451 1.206-1.451.764 0 1.207.56 1.207 1.367v.252h-1.846zm1.2-.785a.585.585 0 0 0-.561-.358.593.593 0 0 0-.566.358.89.89 0 0 0-.073.387h1.279a.888.888 0 0 0-.079-.386zM111.898 36.778c-.533 0-.78-.38-.78-.79v-1.563h-.325v-.438h.325v-.863h.572v.863h.55v.438h-.55v1.535c0 .207.101.33.315.33h.235v.488h-.342zM113.817 36.778c-.533 0-.78-.38-.78-.79v-1.563h-.326v-.438h.326v-.863h.572v.863h.55v.438h-.55v1.535c0 .207.101.33.314.33h.236v.488h-.342zM115.292 35.523c0 .488.258.796.724.796.319 0 .488-.09.69-.292l.365.342c-.292.292-.567.443-1.066.443-.713 0-1.28-.375-1.28-1.457 0-.92.477-1.451 1.207-1.451.763 0 1.206.56 1.206 1.367v.252h-1.846zm1.201-.785a.587.587 0 0 0-.562-.358.594.594 0 0 0-.566.358.89.89 0 0 0-.073.387h1.279a.888.888 0 0 0-.078-.386zM119.46 34.604c-.129-.129-.23-.19-.427-.19-.308 0-.566.246-.566.638v1.726h-.572v-2.84h.561v.307c.145-.201.437-.341.757-.341.275 0 .483.072.679.268l-.432.432z",
  fill: "#fff"
});

var _ref2 =
/*#__PURE__*/
React.createElement("path", {
  d: "M.986 22.506l12.426 7.018v-3.13l-9.288-5.31v-9.265l-3.138-1.77v12.457z",
  fill: "url(#paint0_linear)"
});

var _ref3 =
/*#__PURE__*/
React.createElement("path", {
  d: "M22.823 11.793l3.134-1.769L13.5 2.964 1.076 10.047 4.21 11.82l9.291-5.294 9.322 5.268z",
  fill: "url(#paint1_linear)"
});

var _ref4 =
/*#__PURE__*/
React.createElement("path", {
  d: "M16.487 24.653l-3.075 1.742v3.125l3.075-1.764 3.076-1.767v-3.102l-3.076 1.766z",
  fill: "url(#paint2_linear)"
});

var _ref5 =
/*#__PURE__*/
React.createElement("path", {
  d: "M25.838 26.015v3.07l3.013-1.794v-3.078l-3.013-1.802V10.024l-3.138 1.77v12.42l3.138 1.801z",
  fill: "url(#paint3_linear)"
});

var _ref6 =
/*#__PURE__*/
React.createElement("path", {
  d: "M88.524 8.693c-.101 0-.2.005-.301.009v-.009c-2.732 0-5.063.993-6.719 2.67V1.332a1.333 1.333 0 0 0-2.667 0v17.002l.002.003c.035 5.465 3.915 9.46 9.404 9.46v-.008c.094.002.186.008.281.008 5.265 0 9.126-4.03 9.126-9.534 0-5.539-3.826-9.57-9.126-9.57zm-.316 16.51a7.042 7.042 0 0 1-2.837-.579c-2.302-1.049-3.867-3.439-3.867-6.361 0-1.704.467-3.214 1.329-4.39.012-.015.021-.031.032-.046.066-.087.139-.169.21-.252.084-.1.167-.201.257-.295l.061-.06c.136-.137.276-.271.425-.395.003-.004.008-.007.012-.01.155-.13.317-.252.485-.367l.116-.073c.127-.084.258-.165.393-.24.126-.068.256-.131.39-.193.047-.022.092-.046.14-.068.765-.329 1.632-.525 2.589-.575.088-.003.175-.012.265-.012 3.93 0 6.775 2.944 6.775 6.976 0 4.065-2.879 6.94-6.775 6.94zM44.603 27.172c.102 0 .201-.005.302-.009v.009c2.732 0 5.062-.993 6.718-2.67v10.032a1.333 1.333 0 0 0 2.668 0V17.532l-.003-.004c-.034-5.465-3.914-9.46-9.404-9.46v.008c-.093-.002-.185-.008-.28-.008-5.266 0-9.127 4.031-9.127 9.535 0 5.538 3.827 9.57 9.126 9.57zm.316-16.51a7.04 7.04 0 0 1 2.837.58c2.302 1.048 3.867 3.438 3.867 6.36 0 1.704-.467 3.214-1.328 4.39-.012.015-.022.031-.033.046-.066.087-.139.17-.209.253-.085.1-.167.2-.258.295l-.06.06a6.088 6.088 0 0 1-.425.395l-.012.009c-.156.13-.317.252-.485.367-.038.026-.078.049-.116.074a6.08 6.08 0 0 1-.394.239 6.842 6.842 0 0 1-.389.193c-.047.023-.093.046-.141.068-.764.329-1.632.526-2.588.575-.089.003-.176.012-.266.012-3.93 0-6.774-2.944-6.774-6.975 0-4.066 2.878-6.94 6.774-6.94zM72.728 8.062c-.736 0-1.334.597-1.334 1.332V19.98c0 3.12-1.79 5.398-4.949 5.398s-4.948-2.278-4.948-5.398V9.394a1.334 1.334 0 0 0-2.668 0V19.98c0 4.522 3.088 7.817 7.616 7.817s7.617-3.295 7.617-7.817V9.394c0-.735-.598-1.332-1.334-1.332zM120 18.024c0-5.46-3.916-9.442-9.348-9.442-5.503 0-9.454 3.981-9.454 9.407 0 5.672 4.021 9.794 9.595 9.794 3.628 0 7.081-2.064 8.282-4.928a1.51 1.51 0 0 0 .065-.15l.014-.03-.004-.002c.043-.128.071-.263.071-.406 0-.717-.582-1.298-1.299-1.298-.528 0-.969.354-1.165.826l-.002-.001c-.882 2.008-3.458 3.558-6.139 3.558-3.527 0-6.243-2.572-6.667-6.306l16.016.035c.035-.387.035-.74.035-1.057zm-15.98-1.303c.494-3.347 3.069-5.673 6.526-5.673 3.527 0 6.138 2.326 6.632 5.708l-13.158-.035z",
  fill: "#fff"
});

var _ref7 =
/*#__PURE__*/
React.createElement("defs", null, React.createElement("linearGradient", {
  id: "paint0_linear",
  x1: 1.258,
  y1: 16.424,
  x2: 13.449,
  y2: 23.384,
  gradientUnits: "userSpaceOnUse"
}, React.createElement("stop", {
  stopColor: "#BCBEC0"
}), React.createElement("stop", {
  offset: 1,
  stopColor: "#fff"
})), React.createElement("linearGradient", {
  id: "paint1_linear",
  x1: 1.076,
  y1: 7.391,
  x2: 22.256,
  y2: 7.391,
  gradientUnits: "userSpaceOnUse"
}, React.createElement("stop", {
  stopColor: "#BCBEC0"
}), React.createElement("stop", {
  offset: 1,
  stopColor: "#fff"
})), React.createElement("linearGradient", {
  id: "paint2_linear",
  x1: 18.858,
  y1: 24.874,
  x2: 14.624,
  y2: 27.254,
  gradientUnits: "userSpaceOnUse"
}, React.createElement("stop", {
  stopColor: "#BCBEC0"
}), React.createElement("stop", {
  offset: 1,
  stopColor: "#fff"
})), React.createElement("linearGradient", {
  id: "paint3_linear",
  x1: 25.776,
  y1: 10.998,
  x2: 25.776,
  y2: 27.864,
  gradientUnits: "userSpaceOnUse"
}, React.createElement("stop", {
  stopColor: "#BCBEC0"
}), React.createElement("stop", {
  offset: 1,
  stopColor: "#fff"
})));

var QubeLogo = 'data:image/svg+xml,%3Csvg%20width%3D%22120%22%20height%3D%2238%22%20viewBox%3D%220%200%20120%2038%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M93.2616%2036.5776C93.1213%2036.7178%2092.8857%2036.8129%2092.5994%2036.8129C92.2909%2036.8129%2092.0382%2036.7456%2091.7971%2036.4319V36.7792H91.511V32.7894H91.7971V34.4256C92.0382%2034.1117%2092.2909%2034.0446%2092.5994%2034.0446C92.8857%2034.0446%2093.1213%2034.1399%2093.2616%2034.2799C93.5365%2034.5544%2093.6094%2035.0027%2093.6094%2035.4287C93.6094%2035.8545%2093.5365%2036.3028%2093.2616%2036.5776ZM92.5604%2034.2968C91.8982%2034.2968%2091.7972%2034.8682%2091.7972%2035.4287C91.7972%2035.9891%2091.8983%2036.5607%2092.5604%2036.5607C93.2224%2036.5607%2093.3233%2035.9891%2093.3233%2035.4287C93.3233%2034.8682%2093.2222%2034.2968%2092.5604%2034.2968Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M94.8881%2037.8259C94.7533%2037.9549%2094.5569%2037.9997%2094.3774%2037.9997H94.2427V37.7475H94.3494C94.6579%2037.7475%2094.7478%2037.6466%2094.843%2037.3776L95.062%2036.778L94.0743%2034.0769H94.3886L95.2022%2036.4418L96.0158%2034.0769H96.3301L95.0733%2037.5121C95.0228%2037.6578%2094.9611%2037.7643%2094.8881%2037.8259Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M100.886%2036.9578L100.487%2036.5599C100.257%2036.7223%2099.9654%2036.8121%2099.6512%2036.8121C99.2248%2036.8121%2098.877%2036.6607%2098.602%2036.3862C98.2092%2035.994%2098.2148%2035.5513%2098.2148%2034.7835C98.2148%2034.0156%2098.2092%2033.573%2098.602%2033.1806C98.877%2032.9061%2099.2248%2032.7549%2099.6512%2032.7549C100.078%2032.7549%20100.431%2032.9061%20100.706%2033.1806C101.099%2033.5728%20101.088%2034.0156%20101.088%2034.7835C101.088%2035.4616%20101.093%2035.8762%20100.83%2036.235L101.222%2036.6215L100.886%2036.9578ZM100.246%2033.545C100.106%2033.3936%2099.8869%2033.2983%2099.6512%2033.2983C99.4157%2033.2983%2099.1967%2033.3936%2099.0566%2033.545C98.86%2033.758%2098.8208%2033.9821%2098.8208%2034.7835C98.8208%2035.5847%2098.86%2035.8089%2099.0566%2036.0219C99.1967%2036.1732%2099.4157%2036.2686%2099.6512%2036.2686C99.8028%2036.2686%2099.943%2036.2237%20100.061%2036.1397L99.6401%2035.7195L99.9767%2035.3832L100.364%2035.7699C100.465%2035.5681%20100.482%2035.2991%20100.482%2034.7836C100.482%2033.9821%20100.442%2033.758%20100.246%2033.545Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M101.839%2035.4897V34.9573H103.477V35.4897H101.839Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M105.99%2036.7786H104.374V32.7887H105.929C106.669%2032.7887%20107.135%2033.2089%20107.135%2033.8813C107.135%2034.3127%20106.866%2034.6212%20106.596%2034.7276C106.905%2034.8507%20107.197%2035.1478%20107.197%2035.6522C107.197%2036.3864%20106.697%2036.7786%20105.99%2036.7786ZM105.878%2033.3322H104.98V34.4754H105.878C106.265%2034.4754%20106.529%2034.2735%20106.529%2033.9038C106.529%2033.534%20106.265%2033.3322%20105.878%2033.3322ZM105.934%2035.019H104.98V36.235H105.934C106.355%2036.235%20106.591%2035.9771%20106.591%2035.6242C106.591%2035.2712%20106.355%2035.019%20105.934%2035.019Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M108.448%2035.5231C108.448%2036.0106%20108.706%2036.3188%20109.172%2036.3188C109.491%2036.3188%20109.66%2036.2292%20109.862%2036.0274L110.226%2036.3692C109.935%2036.6606%20109.66%2036.812%20109.16%2036.812C108.448%2036.812%20107.881%2036.4365%20107.881%2035.355C107.881%2034.4359%20108.358%2033.9035%20109.087%2033.9035C109.851%2033.9035%20110.294%2034.4638%20110.294%2035.2707V35.5229H108.448V35.5231ZM109.648%2034.7385C109.559%2034.5255%20109.357%2034.3798%20109.087%2034.3798C108.818%2034.3798%20108.61%2034.5255%20108.521%2034.7385C108.465%2034.8673%20108.453%2034.9515%20108.448%2035.1252H109.727C109.721%2034.9514%20109.705%2034.8673%20109.648%2034.7385Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M111.898%2036.7781C111.365%2036.7781%20111.118%2036.3971%20111.118%2035.988V34.4245H110.793V33.9872H111.118V33.1242H111.69V33.9872H112.24V34.4245H111.69V35.9599C111.69%2036.1672%20111.791%2036.2906%20112.005%2036.2906H112.24V36.7781H111.898Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M113.817%2036.7781C113.284%2036.7781%20113.037%2036.3971%20113.037%2035.988V34.4245H112.711V33.9872H113.037V33.1242H113.609V33.9872H114.159V34.4245H113.609V35.9599C113.609%2036.1672%20113.71%2036.2906%20113.923%2036.2906H114.159V36.7781H113.817Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M115.292%2035.5231C115.292%2036.0106%20115.55%2036.3188%20116.016%2036.3188C116.335%2036.3188%20116.504%2036.2292%20116.706%2036.0274L117.071%2036.3692C116.779%2036.6606%20116.504%2036.812%20116.005%2036.812C115.292%2036.812%20114.725%2036.4365%20114.725%2035.355C114.725%2034.4359%20115.202%2033.9035%20115.932%2033.9035C116.695%2033.9035%20117.138%2034.4638%20117.138%2035.2707V35.5229H115.292V35.5231ZM116.493%2034.7385C116.403%2034.5255%20116.201%2034.3798%20115.931%2034.3798C115.662%2034.3798%20115.455%2034.5255%20115.365%2034.7385C115.309%2034.8673%20115.297%2034.9515%20115.292%2035.1252H116.571C116.566%2034.9514%20116.549%2034.8673%20116.493%2034.7385Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M119.46%2034.604C119.331%2034.4752%20119.23%2034.4134%20119.033%2034.4134C118.725%2034.4134%20118.467%2034.6601%20118.467%2035.0523V36.7783H117.895V33.9371H118.456V34.2453C118.601%2034.0436%20118.893%2033.9035%20119.213%2033.9035C119.488%2033.9035%20119.696%2033.9763%20119.892%2034.1724L119.46%2034.604Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M0.98584%2022.506L13.4121%2029.5243V26.3946L4.12378%2021.0833V11.819L0.98584%2010.0499V22.506Z%22%20fill%3D%22url%28%23paint0_linear%29%22%2F%3E%3Cpath%20d%3D%22M22.8229%2011.7933L25.9567%2010.0241L13.5008%202.96313L1.07617%2010.0483L4.21022%2011.8191L13.501%206.52529L22.8229%2011.7933Z%22%20fill%3D%22url%28%23paint1_linear%29%22%2F%3E%3Cpath%20d%3D%22M16.4874%2024.6532L13.4122%2026.3947V29.5201L16.4874%2027.7556L19.5625%2025.9892V22.8869L16.4874%2024.6532Z%22%20fill%3D%22url%28%23paint2_linear%29%22%2F%3E%3Cpath%20d%3D%22M25.8382%2026.0152V29.0841L28.8506%2027.2913V24.2132L25.8382%2022.4112V10.0241L22.7003%2011.7933V24.2132L25.8382%2026.0152Z%22%20fill%3D%22url%28%23paint3_linear%29%22%2F%3E%3Cpath%20d%3D%22M88.5242%208.69291C88.4226%208.69291%2088.3233%208.69843%2088.223%208.70194L88.2236%208.69341C85.4909%208.69341%2083.1604%209.68624%2081.5045%2011.3625V1.33155C81.5045%200.5962%2080.907%200%2080.1709%200C79.4339%200%2078.837%200.5962%2078.837%201.33155V18.3337L78.8392%2018.3372C78.8738%2023.8025%2082.7537%2027.797%2088.243%2027.797L88.2425%2027.7892C88.3366%2027.7915%2088.429%2027.797%2088.5244%2027.797C93.7892%2027.797%2097.6502%2023.7663%2097.6502%2018.2626C97.6499%2012.7245%2093.8238%208.69291%2088.5242%208.69291ZM88.2081%2025.2029C87.1759%2025.2029%2086.2219%2024.9959%2085.3715%2024.624C83.0691%2023.5751%2081.5041%2021.1854%2081.5041%2018.2627C81.5041%2016.559%2081.9709%2015.0494%2082.8328%2013.8731C82.8446%2013.8581%2082.8542%2013.8418%2082.8655%2013.8272C82.9314%2013.7399%2083.0039%2013.6582%2083.0743%2013.5747C83.159%2013.4753%2083.2418%2013.3736%2083.3321%2013.2795C83.3521%2013.2591%2083.3729%2013.2406%2083.393%2013.2202C83.5288%2013.0826%2083.669%2012.9489%2083.8178%2012.8246C83.8213%2012.8214%2083.8259%2012.8184%2083.8296%2012.8153C83.9848%2012.6848%2084.1466%2012.5634%2084.3147%2012.4481C84.3525%2012.4227%2084.3923%2012.3996%2084.4307%2012.3748C84.5584%2012.2907%2084.6895%2012.2104%2084.8244%2012.1356C84.9504%2012.0673%2085.0801%2012.0035%2085.2135%2011.9418C85.2606%2011.9199%2085.3064%2011.8964%2085.3545%2011.8745C86.1189%2011.5455%2086.986%2011.3487%2087.9428%2011.2992C88.0315%2011.2962%2088.1182%2011.2869%2088.2082%2011.2869C92.1389%2011.2869%2094.9825%2014.2315%2094.9825%2018.2626C94.9824%2022.3285%2092.1041%2025.2029%2088.2081%2025.2029Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M44.6034%2027.1723C44.705%2027.1723%2044.804%2027.1668%2044.9047%2027.1634L44.9042%2027.1718C47.6368%2027.1718%2049.9673%2026.179%2051.6232%2024.5027V34.5338C51.6232%2035.269%2052.2207%2035.8652%2052.9569%2035.8652C53.6937%2035.8652%2054.2905%2035.269%2054.2905%2034.5338V17.5316L54.2884%2017.5281C54.2537%2012.0628%2050.374%208.06824%2044.8843%208.06824L44.8848%208.07601C44.7909%208.07388%2044.6986%208.06824%2044.6032%208.06824C39.3383%208.06824%2035.4774%2012.099%2035.4774%2017.6027C35.4777%2023.1407%2039.3037%2027.1723%2044.6034%2027.1723ZM44.9194%2010.6624C45.9515%2010.6624%2046.9055%2010.8693%2047.7558%2011.2413C50.0583%2012.2902%2051.6232%2014.6798%2051.6232%2017.6025C51.6232%2019.3063%2051.1563%2020.8158%2050.2945%2021.9922C50.2827%2022.0071%2050.2732%2022.0235%2050.2619%2022.0381C50.196%2022.1253%2050.1233%2022.2072%2050.053%2022.2907C49.9682%2022.3901%2049.8856%2022.4917%2049.7951%2022.5858C49.7753%2022.6062%2049.7544%2022.6246%2049.7343%2022.6452C49.5985%2022.7828%2049.4581%2022.9164%2049.3095%2023.0407C49.3061%2023.0438%2049.3014%2023.0469%2049.2979%2023.05C49.1425%2023.1805%2048.9807%2023.3018%2048.8128%2023.4171C48.775%2023.4426%2048.7351%2023.4656%2048.6968%2023.4906C48.569%2023.5746%2048.438%2023.6549%2048.3031%2023.7296C48.177%2023.798%2048.0471%2023.8618%2047.914%2023.9234C47.8669%2023.9455%2047.8211%2023.9688%2047.773%2023.9908C47.0086%2024.3197%2046.1415%2024.5165%2045.1847%2024.566C45.096%2024.569%2045.0092%2024.5784%2044.9192%2024.5784C40.9885%2024.5784%2038.1449%2021.6339%2038.1449%2017.6028C38.1452%2013.5366%2041.0234%2010.6624%2044.9194%2010.6624Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M72.7282%208.06204C71.9915%208.06204%2071.3941%208.65874%2071.3941%209.39409V19.9804C71.3941%2023.0997%2069.6037%2025.3784%2066.4452%2025.3784C63.2864%2025.3784%2061.4966%2023.0997%2061.4966%2019.9804V9.39409C61.4966%208.65874%2060.8987%208.06204%2060.1622%208.06204C59.4256%208.06204%2058.8286%208.65874%2058.8286%209.39409V19.9804C58.8286%2024.5022%2061.9172%2027.7971%2066.4452%2027.7971C70.9731%2027.7971%2074.0616%2024.5022%2074.0616%2019.9804V9.39409C74.0616%208.65862%2073.4639%208.06204%2072.7282%208.06204Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M120%2018.024C120%2012.5631%20116.084%208.58167%20110.652%208.58167C105.149%208.58167%20101.198%2012.5633%20101.198%2017.9892C101.198%2023.661%20105.219%2027.7832%20110.793%2027.7832C114.421%2027.7832%20117.874%2025.7195%20119.075%2022.8545C119.099%2022.8061%20119.121%2022.7572%20119.14%2022.7057C119.144%2022.6954%20119.149%2022.6853%20119.154%2022.675L119.15%2022.6733C119.193%2022.5447%20119.221%2022.41%20119.221%2022.2674C119.221%2021.5504%20118.639%2020.9692%20117.922%2020.9692C117.394%2020.9692%20116.953%2021.323%20116.757%2021.7952L116.755%2021.7936C115.873%2023.8019%20113.297%2025.3522%20110.616%2025.3522C107.089%2025.3522%20104.373%2022.7805%20103.949%2019.0463L119.965%2019.081C120%2018.6935%20120%2018.3412%20120%2018.024ZM104.02%2016.7206C104.514%2013.3737%20107.089%2011.0482%20110.546%2011.0482C114.073%2011.0482%20116.684%2013.3737%20117.178%2016.756L104.02%2016.7206Z%22%20fill%3D%22white%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear%22%20x1%3D%221.2581%22%20y1%3D%2216.424%22%20x2%3D%2213.4488%22%20y2%3D%2223.3842%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23BCBEC0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint1_linear%22%20x1%3D%221.07617%22%20y1%3D%227.39112%22%20x2%3D%2222.2555%22%20y2%3D%227.39112%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23BCBEC0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint2_linear%22%20x1%3D%2218.8581%22%20y1%3D%2224.8741%22%20x2%3D%2214.6244%22%20y2%3D%2227.2544%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23BCBEC0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint3_linear%22%20x1%3D%2225.7755%22%20y1%3D%2210.9983%22%20x2%3D%2225.7755%22%20y2%3D%2227.8636%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23BCBEC0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E';

var _ref$1 =
/*#__PURE__*/
React.createElement("path", {
  d: "M.986 19.543l12.426 7.018v-3.13l-9.288-5.31V8.855L.986 7.086v12.457z",
  fill: "url(#paint0_linear)"
});

var _ref2$1 =
/*#__PURE__*/
React.createElement("path", {
  d: "M22.823 8.83l3.134-1.769L13.5 0 1.076 7.085 4.21 8.856l9.291-5.294 9.322 5.268z",
  fill: "url(#paint1_linear)"
});

var _ref3$1 =
/*#__PURE__*/
React.createElement("path", {
  d: "M16.487 21.69l-3.075 1.741v3.126l3.075-1.765 3.076-1.766v-3.102l-3.076 1.766z",
  fill: "url(#paint2_linear)"
});

var _ref4$1 =
/*#__PURE__*/
React.createElement("path", {
  d: "M25.838 23.052v3.069l3.013-1.793V21.25l-3.013-1.802V7.061L22.7 8.831v12.42l3.138 1.801z",
  fill: "url(#paint3_linear)"
});

var _ref5$1 =
/*#__PURE__*/
React.createElement("defs", null, React.createElement("linearGradient", {
  id: "paint0_linear",
  x1: 1.258,
  y1: 13.461,
  x2: 13.449,
  y2: 20.421,
  gradientUnits: "userSpaceOnUse"
}, React.createElement("stop", {
  stopColor: "#BCBEC0"
}), React.createElement("stop", {
  offset: 1,
  stopColor: "#fff"
})), React.createElement("linearGradient", {
  id: "paint1_linear",
  x1: 1.076,
  y1: 4.428,
  x2: 22.256,
  y2: 4.428,
  gradientUnits: "userSpaceOnUse"
}, React.createElement("stop", {
  stopColor: "#BCBEC0"
}), React.createElement("stop", {
  offset: 1,
  stopColor: "#fff"
})), React.createElement("linearGradient", {
  id: "paint2_linear",
  x1: 18.858,
  y1: 21.911,
  x2: 14.624,
  y2: 24.291,
  gradientUnits: "userSpaceOnUse"
}, React.createElement("stop", {
  stopColor: "#BCBEC0"
}), React.createElement("stop", {
  offset: 1,
  stopColor: "#fff"
})), React.createElement("linearGradient", {
  id: "paint3_linear",
  x1: 25.775,
  y1: 8.035,
  x2: 25.775,
  y2: 24.901,
  gradientUnits: "userSpaceOnUse"
}, React.createElement("stop", {
  stopColor: "#BCBEC0"
}), React.createElement("stop", {
  offset: 1,
  stopColor: "#fff"
})));

var QubeSymbol = 'data:image/svg+xml,%3Csvg%20width%3D%2229%22%20height%3D%2227%22%20viewBox%3D%220%200%2029%2027%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0.98584%2019.5429L13.4121%2026.5611V23.4315L4.12378%2018.1202V8.8559L0.98584%207.08673V19.5429Z%22%20fill%3D%22url%28%23paint0_linear%29%22%2F%3E%3Cpath%20d%3D%22M22.8229%208.83018L25.9567%207.06101L13.5008%200L1.07617%207.0852L4.21022%208.856L13.501%203.56216L22.8229%208.83018Z%22%20fill%3D%22url%28%23paint1_linear%29%22%2F%3E%3Cpath%20d%3D%22M16.4873%2021.6901L13.4121%2023.4315V26.557L16.4873%2024.7924L19.5625%2023.026V19.9238L16.4873%2021.6901Z%22%20fill%3D%22url%28%23paint2_linear%29%22%2F%3E%3Cpath%20d%3D%22M25.8381%2023.0521V26.1209L28.8506%2024.3282V21.2501L25.8381%2019.448V7.06097L22.7002%208.83014V21.2501L25.8381%2023.0521Z%22%20fill%3D%22url%28%23paint3_linear%29%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear%22%20x1%3D%221.2581%22%20y1%3D%2213.4608%22%20x2%3D%2213.4488%22%20y2%3D%2220.421%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23BCBEC0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint1_linear%22%20x1%3D%221.07617%22%20y1%3D%224.42799%22%20x2%3D%2222.2555%22%20y2%3D%224.42799%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23BCBEC0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint2_linear%22%20x1%3D%2218.858%22%20y1%3D%2221.9109%22%20x2%3D%2214.6244%22%20y2%3D%2224.2912%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23BCBEC0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint3_linear%22%20x1%3D%2225.7754%22%20y1%3D%228.03516%22%20x2%3D%2225.7754%22%20y2%3D%2224.9005%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23BCBEC0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E';

function _templateObject7() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\n\theight: 40px;\n\talign-items: center;\n\tpadding-left: 16px;\n\n\tbackground: ", ";\n\tborder-radius: 4px;\n\tcolor: ", ";\n\tcursor: pointer;\n\ttext-decoration: none;\n\n\t&:hover {\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t}\n\n\t&:active,\n\t&:focus {\n\t\tcolor: ", ";\n\t}\n"]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = taggedTemplateLiteralLoose(["\n\tz-index: 2;\n\n\tmargin-top: 32px;\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = taggedTemplateLiteralLoose(["\n\tz-index: 2;\n\tmargin-top: 6px;\n\tcolor: ", ";\n\tfont-size: 16px;\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = taggedTemplateLiteralLoose(["\n\t&&&.small.icon {\n\t\tcolor: ", " !important;\n\t\tfont-size: 18px !important;\n\t}\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$1() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\tpadding-top: 28px;\n\tpadding-left: 16px;\n"]);

  _templateObject3$1 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$3() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: 100%;\n"]);

  _templateObject2$3 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$d() {
  var data = taggedTemplateLiteralLoose(["\n\tz-index: 2;\n\tdisplay: ", ";\n\n\twidth: 100%;\n\theight: 100%;\n\tmin-height: 664px;\n\tpadding: 12px;\n\n\tbackground: ", ";\n\tbox-shadow: 2px 0px 2px rgba(0, 0, 0, 0.08);\n\tuser-select: none;\n"]);

  _templateObject$d = function _templateObject() {
    return data;
  };

  return data;
}

var SubNav = function SubNav(_ref) {
  var collapse = _ref.collapse,
      _ref$activeItem = _ref.activeItem,
      items = _ref$activeItem.items,
      icon = _ref$activeItem.icon,
      title = _ref$activeItem.title,
      isActive = _ref.isActive,
      setRoute = _ref.setRoute,
      subNavBgColor = _ref.subNavBgColor,
      subNavColor = _ref.subNavColor,
      subNavColorTitle = _ref.subNavColorTitle,
      subNavHoverBgColor = _ref.subNavHoverBgColor,
      subNavHoverColor = _ref.subNavHoverColor,
      subNavHighlightBgColor = _ref.subNavHighlightBgColor,
      subNavHighlightColor = _ref.subNavHighlightColor;

  var _onClick = function onClick(_ref2) {
    var onClickItem = _ref2.onClickItem,
        path = _ref2.path;
    return onClickItem ? onClickItem(path) : setRoute(path);
  };

  return React.createElement(SubNavStyled, {
    collapse: collapse,
    bgColor: subNavBgColor,
    "data-test-id": "submenu"
  }, React.createElement(Header$1, null, React.createElement(FullWidth, null, icon && React.createElement(HeaderIcon, {
    icon: icon,
    size: "small",
    collapse: collapse,
    color: subNavColorTitle,
    "data-test-id": "submenu-icon"
  })), React.createElement(Title, {
    color: subNavColorTitle,
    "data-test-id": "submenu-title"
  }, title)), React.createElement(SubNavList, null, items.map(function (item) {
    return React.createElement(SubNavLink, {
      key: item.id,
      active: isActive(item),
      onClick: function onClick() {
        return _onClick(item);
      },
      bgColor: subNavBgColor,
      color: subNavColor,
      hoverBgColor: subNavHoverBgColor,
      hoverColor: subNavHoverColor,
      subNavHighlightBgColor: subNavHighlightBgColor,
      highlightColor: subNavHighlightColor
    }, item.title);
  })));
};

var SubNavStyled = styled.div(_templateObject$d(), function (_ref3) {
  var collapse = _ref3.collapse;
  return collapse ? 'block' : 'none';
}, function (_ref4) {
  var bgColor = _ref4.bgColor;
  return bgColor;
});
var FullWidth = styled.div(_templateObject2$3());
var Header$1 = styled.div(_templateObject3$1());
var HeaderIcon = styled(function (_ref5) {
  var collapse = _ref5.collapse,
      props = objectWithoutPropertiesLoose(_ref5, ["collapse"]);

  return React.createElement(Icon$1, props);
})(_templateObject4(), function (_ref6) {
  var color = _ref6.color;
  return color;
});
HeaderIcon.displayName = 'HeaderIcon';
var Title = styled.div(_templateObject5(), function (_ref7) {
  var color = _ref7.color;
  return color;
});
var SubNavList = styled.div(_templateObject6());
var SubNavLink = styled.a(_templateObject7(), function (_ref8) {
  var active = _ref8.active,
      hoverBgColor = _ref8.hoverBgColor,
      bgColor = _ref8.bgColor;
  return active ? hoverBgColor : bgColor;
}, function (_ref9) {
  var active = _ref9.active,
      highlightColor = _ref9.highlightColor,
      color = _ref9.color;
  return active ? highlightColor : color;
}, function (_ref10) {
  var hoverBgColor = _ref10.hoverBgColor;
  return hoverBgColor;
}, function (_ref11) {
  var hoverColor = _ref11.hoverColor;
  return hoverColor;
}, function (_ref12) {
  var highlightColor = _ref12.highlightColor;
  return highlightColor;
});
SubNavLink.displayName = 'SubNavLink';
SubNav.propTypes = {
  setRoute: PropTypes.func.isRequired,
  collapse: PropTypes.bool.isRequired,
  isActive: PropTypes.func.isRequired,
  activeItem: PropTypes.shape({
    title: PropTypes.string,
    items: PropTypes.arrayOf(PropTypes.shape({
      icon: PropTypes.string,
      title: PropTypes.string,
      path: PropTypes.string,
      items: PropTypes.arrayOf(PropTypes.shape({
        title: PropTypes.string,
        path: PropTypes.string
      }))
    }))
  }).isRequired,
  subNavBgColor: PropTypes.string.isRequired,
  subNavColor: PropTypes.string.isRequired,
  subNavColorTitle: PropTypes.string.isRequired,
  subNavHoverBgColor: PropTypes.string.isRequired,
  subNavHoverColor: PropTypes.string.isRequired,
  subNavHighlightBgColor: PropTypes.string.isRequired,
  subNavHighlightColor: PropTypes.string.isRequired
};
SubNav.displayName = 'SubNav';

function _templateObject6$1() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: none !important;\n\tmargin-left: 8px !important;\n\n\t&&&.icon.arrow {\n\t\tcolor: ", " !important;\n\t}\n"]);

  _templateObject6$1 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5$1() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: ", ";\n"]);

  _templateObject5$1 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$1() {
  var data = taggedTemplateLiteralLoose(["\n\tmargin: ", " !important;\n\n\t&&&.small.icon {\n\t\twidth: ", " !important;\n\t\tfont-size: 15px;\n\t}\n"]);

  _templateObject4$1 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$2() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tjustify-content: ", ";\n\n\tcolor: white;\n\tfont-size: 15px;\n"]);

  _templateObject3$2 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$4() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: baseline;\n\tjustify-content: center;\n"]);

  _templateObject2$4 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$e() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: 100%;\n\theight: 46px;\n\tjustify-content: ", ";\n\tpadding: ", ";\n\n\tbackground: ", ";\n\tcursor: pointer;\n\ttext-decoration: none;\n\tuser-select: none;\n\n\tp {\n\t\tcolor: ", " !important;\n\t}\n\n\t.small.icon {\n\t\tcolor: ", " !important;\n\t}\n\n\t:hover {\n\t\tbackground: ", ";\n\n\t\tp {\n\t\t\tcolor: ", " !important;\n\t\t}\n\n\t\t.small.icon {\n\t\t\tcolor: ", " !important;\n\t\t}\n\n\t\t.arrow {\n\t\t\tdisplay: ", " !important;\n\t\t}\n\t}\n"]);

  _templateObject$e = function _templateObject() {
    return data;
  };

  return data;
}

var SideNavLink = function SideNavLink(_ref) {
  var collapse = _ref.collapse,
      item = _ref.item,
      isActive = _ref.isActive,
      _onClick = _ref.onClick,
      color = _ref.color,
      highlightColor = _ref.highlightColor,
      highlightBgColor = _ref.highlightBgColor,
      hoverBgColor = _ref.hoverBgColor,
      hoverColor = _ref.hoverColor;
  return React.createElement(SideNavLinkStyled, {
    collapse: collapse,
    active: isActive(item),
    onClick: function onClick() {
      return _onClick(item);
    },
    color: color,
    highlightBgColor: highlightBgColor,
    highlightColor: highlightColor,
    hoverBgColor: hoverBgColor,
    hoverColor: hoverColor
  }, React.createElement(SideNavLinkWrapper, {
    collapse: collapse
  }, React.createElement(Flex, null, item.icon && React.createElement(SideNavLinkIcon, {
    icon: item.icon,
    color: color,
    size: "small",
    collapse: collapse
  }), item.title && React.createElement(SideNavLinkText, {
    collapse: collapse
  }, item.title)), React.createElement(SideNavLinkArrow, {
    className: "arrow",
    icon: "arrow-right",
    color: hoverColor
  })));
};

var SideNavLinkStyled = styled.div(_templateObject$e(), function (_ref2) {
  var collapse = _ref2.collapse;
  return collapse ? 'center' : 'start';
}, function (_ref3) {
  var collapse = _ref3.collapse;
  return collapse ? '0 4px' : '0 32px';
}, function (_ref4) {
  var active = _ref4.active,
      highlightBgColor = _ref4.highlightBgColor;
  return active ? highlightBgColor : undefined;
}, function (_ref5) {
  var active = _ref5.active,
      highlightColor = _ref5.highlightColor,
      color = _ref5.color;
  return active ? highlightColor : color;
}, function (_ref6) {
  var highlightColor = _ref6.highlightColor,
      active = _ref6.active;
  return active ? highlightColor : undefined;
}, function (_ref7) {
  var hoverBgColor = _ref7.hoverBgColor,
      highlightBgColor = _ref7.highlightBgColor,
      collapse = _ref7.collapse;
  return collapse ? highlightBgColor : hoverBgColor;
}, function (_ref8) {
  var hoverColor = _ref8.hoverColor;
  return hoverColor;
}, function (_ref9) {
  var highlightColor = _ref9.highlightColor,
      hoverColor = _ref9.hoverColor,
      collapse = _ref9.collapse;
  return collapse ? highlightColor : hoverColor;
}, function (_ref10) {
  var collapse = _ref10.collapse;
  return collapse ? 'none' : 'block';
});
SideNavLinkStyled.displayName = 'SideNavLinkStyled';
var Flex = styled.div(_templateObject2$4());
var SideNavLinkWrapper = styled.div(_templateObject3$2(), function (_ref11) {
  var collapse = _ref11.collapse;
  return collapse ? 'center' : 'space-between';
});
var SideNavLinkIcon = styled(function (_ref12) {
  var collapse = _ref12.collapse,
      props = objectWithoutPropertiesLoose(_ref12, ["collapse"]);

  return React.createElement(Icon$1, props);
})(_templateObject4$1(), function (_ref13) {
  var collapse = _ref13.collapse;
  return collapse ? ' auto' : '0 20px 0 0';
}, function (_ref14) {
  var collapse = _ref14.collapse;
  return collapse ? ' 100%' : null;
});
var SideNavLinkText = styled.p(_templateObject5$1(), function (_ref15) {
  var collapse = _ref15.collapse;
  return collapse ? 'none' : 'inline-block';
});
var SideNavLinkArrow = styled(Icon$1)(_templateObject6$1(), function (_ref16) {
  var color = _ref16.color;
  return color;
});
SideNavLink.propTypes = {
  item: PropTypes.shape({
    id: PropTypes.string,
    icon: PropTypes.string,
    title: PropTypes.string,
    path: PropTypes.string,
    items: PropTypes.arrayOf(PropTypes.shape({
      title: PropTypes.string,
      path: PropTypes.string
    }))
  }).isRequired,
  isActive: PropTypes.func.isRequired,
  onClick: PropTypes.func.isRequired,
  collapse: PropTypes.bool.isRequired,
  color: PropTypes.string.isRequired,
  hoverBgColor: PropTypes.string.isRequired,
  hoverColor: PropTypes.string.isRequired,
  highlightBgColor: PropTypes.string.isRequired,
  highlightColor: PropTypes.string.isRequired
};
SideNavLink.displayName = 'SideNavLink';

function _templateObject2$5() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: ", ";\n\theight: 36px;\n\tpadding: ", ";\n\n\tcolor: ", ";\n\tfont-size: ", ";\n\ttext-align: ", ";\n\ttext-transform: uppercase;\n\n\ttransition: ", ";\n"]);

  _templateObject2$5 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$f() {
  var data = taggedTemplateLiteralLoose(["\n\tpadding-left: 0px;\n"]);

  _templateObject$f = function _templateObject() {
    return data;
  };

  return data;
}

var SideNavSection = function SideNavSection(_ref) {
  var collapse = _ref.collapse,
      _ref$section = _ref.section,
      items = _ref$section.items,
      title = _ref$section.title,
      isActive = _ref.isActive,
      setRoute = _ref.setRoute,
      colorTitle = _ref.colorTitle,
      color = _ref.color,
      hoverBgColor = _ref.hoverBgColor,
      hoverColor = _ref.hoverColor,
      highlightBgColor = _ref.highlightBgColor,
      highlightColor = _ref.highlightColor;

  var _onClick = function onClick(_ref2) {
    var onClickItem = _ref2.onClickItem,
        path = _ref2.path;
    return onClickItem ? onClickItem(path) : setRoute(path);
  };

  return React.createElement("section", null, React.createElement(SideNavSectionStyled, null, React.createElement(SideNavSectionTitle, {
    show: !!title,
    collapse: collapse,
    color: colorTitle
  }, title), items.map(function (item) {
    return item.render ? collapse ? item.render.collapsed : item.render.expanded : React.createElement(SideNavLink, {
      key: item.id,
      item: item,
      collapse: collapse,
      onClick: function onClick() {
        return _onClick(item);
      },
      isActive: isActive,
      color: color,
      highlightColor: highlightColor,
      highlightBgColor: highlightBgColor,
      hoverBgColor: hoverBgColor,
      hoverColor: hoverColor
    });
  })));
};

var SideNavSectionStyled = styled.div(_templateObject$f());
var SideNavSectionTitle = styled.div(_templateObject2$5(), function (_ref3) {
  var show = _ref3.show;
  return show ? 'block' : 'none';
}, function (_ref4) {
  var collapse = _ref4.collapse;
  return collapse ? '0' : '0 32px;';
}, function (_ref5) {
  var color = _ref5.color;
  return color;
}, function (_ref6) {
  var collapse = _ref6.collapse;
  return collapse ? '11px' : '15px';
}, function (_ref7) {
  var collapse = _ref7.collapse;
  return collapse ? 'center' : 'left';
}, function (_ref8) {
  var collapse = _ref8.collapse;
  return collapse ? '0' : '0.3s';
});
SideNavSection.propTypes = {
  setRoute: PropTypes.func.isRequired,
  isActive: PropTypes.func.isRequired,
  collapse: PropTypes.bool.isRequired,
  section: PropTypes.shape({
    title: PropTypes.string,
    items: PropTypes.arrayOf(PropTypes.shape({
      render: PropTypes.shape({
        collapsed: PropTypes.element.isRequired,
        expanded: PropTypes.element.isRequired
      }),
      icon: PropTypes.string,
      title: PropTypes.string,
      path: PropTypes.string,
      items: PropTypes.arrayOf(PropTypes.shape({
        title: PropTypes.string,
        path: PropTypes.string
      }))
    }))
  }).isRequired,
  color: PropTypes.string.isRequired,
  colorTitle: PropTypes.string.isRequired,
  hoverBgColor: PropTypes.string.isRequired,
  hoverColor: PropTypes.string.isRequired,
  highlightBgColor: PropTypes.string.isRequired,
  highlightColor: PropTypes.string.isRequired
};
SideNavSection.displayName = 'SideNavSection';

function _templateObject12() {
  var data = taggedTemplateLiteralLoose(["\n\tcursor: pointer;\n\tfont-size: 17px !important;\n"]);

  _templateObject12 = function _templateObject12() {
    return data;
  };

  return data;
}

function _templateObject11() {
  var data = taggedTemplateLiteralLoose(["\n\tpadding: 10px 0;\n"]);

  _templateObject11 = function _templateObject11() {
    return data;
  };

  return data;
}

function _templateObject10() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: absolute;\n\tbottom: 10px;\n\tleft: ", " !important;\n"]);

  _templateObject10 = function _templateObject10() {
    return data;
  };

  return data;
}

function _templateObject9() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: ", ";\n\twidth: 100%;\n\tjustify-content: center;\n\tmargin: auto;\n\tcursor: pointer;\n\n\timg {\n\t\tmax-width: 154px;\n\t}\n"]);

  _templateObject9 = function _templateObject9() {
    return data;
  };

  return data;
}

function _templateObject8() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: ", ";\n\tmargin: auto;\n\tcursor: pointer;\n\n\timg {\n\t\tmin-width: 24px;\n\t\tmax-width: 32px;\n\t}\n"]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7$1() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: 100%;\n\theight: 38px;\n\n\tjustify-content: center;\n\n\tmargin-top: 12px;\n\tmargin-bottom: 32px;\n"]);

  _templateObject7$1 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6$2() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: relative;\n\tz-index: 3;\n\n\twidth: ", ";\n\theight: 100%;\n\tmin-height: 664px;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: 32px 0;\n\n\tbackground: ", ";\n\tbox-shadow: ", ";\n\ttransition: width 260ms cubic-bezier(0.2, 0, 0, 1) 0s;\n"]);

  _templateObject6$2 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5$2() {
  var data = taggedTemplateLiteralLoose(["\n\tz-index: 2;\n\tdisplay: flex;\n\theight: 100%;\n"]);

  _templateObject5$2 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$2() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: ", ";\n\n\twidth: ", ";\n\tmargin: auto;\n\tborder: 1px solid ", ";\n"]);

  _templateObject4$2 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$3() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\theight: 60px;\n\tflex-direction: column;\n"]);

  _templateObject3$3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$6() {
  var data = taggedTemplateLiteralLoose(["\n\tcolor: black;\n"]);

  _templateObject2$6 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$g() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: absolute;\n\tright: -12px;\n\tdisplay: flex;\n\twidth: 30px;\n\theight: 30px;\n\n\talign-items: center;\n\tjustify-content: center;\n\tborder: 1px solid #dddddd;\n\n\tbackground: #ffffff;\n\tborder-radius: 50%;\n\tbox-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);\n\n\tcursor: pointer;\n"]);

  _templateObject$g = function _templateObject() {
    return data;
  };

  return data;
}

var SideNav =
/*#__PURE__*/
function (_Component) {
  inheritsLoose(SideNav, _Component);

  function SideNav(props) {
    var _this;

    _this = _Component.call(this, props) || this;

    defineProperty(assertThisInitialized(_this), "onMouseEnter", function () {
      _this.timeout = setTimeout(function () {
        return _this.setState({
          onHover: true
        });
      }, 350);
    });

    defineProperty(assertThisInitialized(_this), "onMouseLeave", function () {
      clearTimeout(_this.timeout);

      _this.setState({
        onHover: false
      });
    });

    defineProperty(assertThisInitialized(_this), "getActiveItem", function (_ref) {
      var items = _ref.items;
      return items.find(function (item) {
        return _this.isActive(item) || item.items && _this.getActiveItem(item);
      });
    });

    defineProperty(assertThisInitialized(_this), "isActive", function (item) {
      var _this$props = _this.props,
          matchPath = _this$props.matchPath,
          location = _this$props.location;
      var params = item.matchPath ? {
        path: item.matchPath,
        exact: false
      } : item.path;
      var match = matchPath(location, params);
      return match && (match.isExact || item.matchPath);
    });

    defineProperty(assertThisInitialized(_this), "activeSection", function () {
      var nav = _this.props.nav;
      return nav.find(function (section) {
        return _this.getActiveItem(section);
      });
    });

    defineProperty(assertThisInitialized(_this), "activeItem", function () {
      var activeSection = _this.activeSection();

      return activeSection && _this.getActiveItem(activeSection);
    });

    defineProperty(assertThisInitialized(_this), "activeItemHasSubNav", function () {
      return _this.activeItem() && _this.activeItem().items;
    });

    defineProperty(assertThisInitialized(_this), "isCollapsed", function () {
      var onHover = _this.state.onHover;
      return _this.activeSection() !== undefined && _this.activeItemHasSubNav() !== undefined && !onHover;
    });

    defineProperty(assertThisInitialized(_this), "notLastElement", function (index) {
      var nav = _this.props.nav;
      return index !== nav.length - 1;
    });

    defineProperty(assertThisInitialized(_this), "renderCollapseToggle", function (isToggleCollapsed, setToggleCollapsed) {
      return React.createElement(CollapseToggle, {
        onClick: function onClick() {
          return setToggleCollapsed(!isToggleCollapsed);
        }
      }, React.createElement(ToggleIcon, {
        icon: !isToggleCollapsed ? 'select-left' : 'select-right',
        color: theme.colors.darkGray
      }));
    });

    _this.state = {
      onHover: false
    };
    return _this;
  }

  var _proto = SideNav.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var _this$props2 = this.props,
        nav = _this$props2.nav,
        _setRoute = _this$props2.setRoute,
        customActions = _this$props2.customActions,
        logo = _this$props2.logo,
        symbol = _this$props2.symbol,
        bgColor = _this$props2.bgColor,
        dividerColor = _this$props2.dividerColor,
        color = _this$props2.color,
        hoverBgColor = _this$props2.hoverBgColor,
        hoverColor = _this$props2.hoverColor,
        highlightColor = _this$props2.highlightColor,
        highlightBgColor = _this$props2.highlightBgColor,
        colorTitle = _this$props2.colorTitle,
        subNavBgColor = _this$props2.subNavBgColor,
        subNavColor = _this$props2.subNavColor,
        subNavColorTitle = _this$props2.subNavColorTitle,
        subNavHoverBgColor = _this$props2.subNavHoverBgColor,
        subNavHoverColor = _this$props2.subNavHoverColor,
        subNavHighlightBgColor = _this$props2.subNavHighlightBgColor,
        subNavHighlightColor = _this$props2.subNavHighlightColor,
        customIconColor = _this$props2.customIconColor,
        setToggleCollapsed = _this$props2.setToggleCollapsed,
        isToggleCollapsed = _this$props2.isToggleCollapsed;
    var collapse = this.isCollapsed();
    return React.createElement(SideNavStyled, {
      id: "menu"
    }, React.createElement(Nav, {
      isToggleCollapsed: isToggleCollapsed,
      collapse: collapse,
      onMouseEnter: this.onMouseEnter,
      onMouseLeave: this.onMouseLeave,
      bgColor: bgColor
    }, setToggleCollapsed && this.renderCollapseToggle(isToggleCollapsed, setToggleCollapsed), !isToggleCollapsed && React.createElement("div", null, React.createElement(LogoContainer, null, React.createElement(Logo, {
      collapse: collapse,
      onClick: function onClick() {
        return _setRoute('/');
      }
    }, React.createElement("img", {
      src: logo,
      "data-test-id": "menu-logo",
      draggable: "false",
      alt: "logo"
    })), React.createElement(LogoIcon, {
      collapse: collapse,
      onClick: function onClick() {
        return _setRoute('/');
      }
    }, React.createElement("img", {
      src: symbol,
      "data-test-id": "menu-small-logo",
      draggable: "false",
      alt: "small logo"
    }))), nav.map(function (section, index) {
      return React.createElement("div", {
        key: section.id
      }, React.createElement(SideNavSection, {
        section: section,
        collapse: collapse,
        isActive: _this2.isActive,
        setRoute: function setRoute(route) {
          _this2.onMouseLeave();

          _setRoute(route);
        },
        hoverBgColor: hoverBgColor,
        hoverColor: hoverColor,
        color: color,
        colorTitle: colorTitle,
        highlightBgColor: highlightBgColor,
        highlightColor: highlightColor
      }), React.createElement(DividerContainer, null, React.createElement(Divider$1, {
        color: dividerColor,
        collapse: collapse,
        show: _this2.notLastElement(index)
      })));
    }), React.createElement(CustomIconList, {
      collapse: collapse
    }, customActions.map(function (_ref2) {
      var icon = _ref2.icon,
          onClick = _ref2.onClick;
      return React.createElement(CustomIconRow, {
        key: icon
      }, React.createElement(CustomIcon, {
        icon: icon,
        color: customIconColor,
        size: "small",
        onClick: onClick
      }));
    })))), this.activeItem() && this.activeItem().items && React.createElement(SubNav, {
      collapse: collapse,
      activeItem: this.activeItem(),
      isActive: function isActive(item) {
        return _this2.isActive(item);
      },
      setRoute: _setRoute,
      subNavBgColor: subNavBgColor,
      subNavColor: subNavColor,
      subNavColorTitle: subNavColorTitle,
      subNavHoverBgColor: subNavHoverBgColor,
      subNavHoverColor: subNavHoverColor,
      subNavHighlightBgColor: subNavHighlightBgColor,
      subNavHighlightColor: subNavHighlightColor
    }));
  };

  return SideNav;
}(Component);

var CollapseToggle = styled.div(_templateObject$g());
CollapseToggle.displayName = 'CollapseToggle';
var ToggleIcon = styled(Icon$1)(_templateObject2$6());
var DividerContainer = styled.div(_templateObject3$3());
var Divider$1 = styled.div(_templateObject4$2(), function (_ref3) {
  var show = _ref3.show;
  return show ? 'block' : 'none';
}, function (_ref4) {
  var collapse = _ref4.collapse;
  return collapse ? '56px' : '75%';
}, function (_ref5) {
  var color = _ref5.color;
  return color;
});
var SideNavStyled = styled.div(_templateObject5$2());
var Nav = styled.div(_templateObject6$2(), function (_ref6) {
  var collapse = _ref6.collapse,
      isToggleCollapsed = _ref6.isToggleCollapsed;
  return collapse ? '56px' : isToggleCollapsed ? '20px' : '100%';
}, function (_ref7) {
  var bgColor = _ref7.bgColor;
  return bgColor;
}, function (_ref8) {
  var collapse = _ref8.collapse;
  return collapse ? 'none' : ' 2px 0px 2px rgba(0, 0, 0, 0.08)';
});
Nav.displayName = 'Nav';
var LogoContainer = styled.div(_templateObject7$1());
var LogoIcon = styled.div(_templateObject8(), function (_ref9) {
  var collapse = _ref9.collapse;
  return collapse ? 'block' : 'none';
});
LogoIcon.displayName = 'LogoIcon';
var Logo = styled.div(_templateObject9(), function (_ref10) {
  var collapse = _ref10.collapse;
  return collapse ? 'none' : 'flex';
});
Logo.displayName = 'Logo';
var CustomIconList = styled.div(_templateObject10(), function (_ref11) {
  var collapse = _ref11.collapse;
  return collapse ? '18px' : '32px';
});
var CustomIconRow = styled.div(_templateObject11());
var CustomIcon = styled(function (_ref12) {
  var collapse = _ref12.collapse,
      props = objectWithoutPropertiesLoose(_ref12, ["collapse"]);

  return React.createElement(Icon$1, props);
})(_templateObject12());
CustomIcon.displayName = 'CustomIcon';
SideNav.defaultProps = {
  logo: QubeLogo,
  symbol: QubeSymbol,
  bgColor: theme.colors.deepBlue,
  colorTitle: theme.colors.white,
  color: theme.colors.white,
  hoverBgColor: theme.colors.activeBlue,
  hoverColor: theme.colors.white,
  highlightBgColor: theme.colors.white,
  highlightColor: theme.colors.deepBlue,
  dividerColor: theme.colors.white,
  subNavBgColor: theme.colors.white,
  subNavColor: theme.colors.black,
  subNavColorTitle: theme.colors.deepBlue,
  subNavHoverBgColor: theme.colors.lightGray,
  subNavHoverColor: theme.colors.activeBlue,
  subNavHighlightBgColor: theme.colors.lightGray,
  subNavHighlightColor: theme.colors.deepBlue,
  customIconColor: theme.colors.white,
  customActions: [],
  isToggleCollapsed: false,
  setToggleCollapsed: undefined
};
SideNav.propTypes = {
  setRoute: PropTypes.func.isRequired,
  location: PropTypes.string.isRequired,
  matchPath: PropTypes.func.isRequired,
  customActions: PropTypes.arrayOf(PropTypes.shape({
    icon: PropTypes.string.isRequired,
    onClick: PropTypes.func.isRequired
  })),
  nav: PropTypes.arrayOf(PropTypes.shape({
    title: PropTypes.string,
    items: PropTypes.arrayOf(PropTypes.shape({
      icon: PropTypes.string,
      title: PropTypes.string,
      path: PropTypes.string,
      items: PropTypes.arrayOf(PropTypes.shape({
        title: PropTypes.string,
        path: PropTypes.string
      }))
    }))
  })).isRequired,

  /* Custom logo image  */
  logo: PropTypes.string,

  /* Custom symbol image  */
  symbol: PropTypes.string,

  /* Background color of SideNav  */
  bgColor: PropTypes.string,

  /* Font color of SideNav  */
  color: PropTypes.string,

  /* Section title color of SideNav  */
  colorTitle: PropTypes.string,

  /* When Hover background color of SideNav  */
  hoverBgColor: PropTypes.string,

  /* When Hover font color of SideNav  */
  hoverColor: PropTypes.string,

  /* when active background color of SideNav  */
  highlightBgColor: PropTypes.string,

  /* when active font color of SideNav  */
  highlightColor: PropTypes.string,

  /* Divider color of SideNav  */
  dividerColor: PropTypes.string,

  /* Background color of SubNav    */
  subNavBgColor: PropTypes.string,

  /* font color of SubNav    */
  subNavColor: PropTypes.string,

  /* title color of SubNav    */
  subNavColorTitle: PropTypes.string,

  /* When Hover background color of SubNav    */
  subNavHoverBgColor: PropTypes.string,

  /* When Hover font color of SubNav    */
  subNavHoverColor: PropTypes.string,

  /* When active background color of SubNav    */
  subNavHighlightBgColor: PropTypes.string,

  /* When active font color of SubNav    */
  subNavHighlightColor: PropTypes.string,

  /* Custom Icon color   */
  customIconColor: PropTypes.string,

  /* if was collapse with toggle   */
  isToggleCollapsed: PropTypes.bool,

  /* function to run when toggle  */
  setToggleCollapsed: PropTypes.func
};
SideNav.displayName = 'SideNav';

function _templateObject3$4() {
  var data = taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n\tfont-weight: ", ";\n"]);

  _templateObject3$4 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$7() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\theight: 34px;\n\tflex-direction: column;\n\tjustify-content: center;\n\tpadding-left: 12px;\n\n\tborder: 0.5px solid ", ";\n\tcursor: pointer;\n\n\t&:focus span,\n\t&:hover span {\n\t\tcolor: ", ";\n\t}\n"]);

  _templateObject2$7 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$h() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: absolute;\n\tleft: 6px;\n\twidth: 2px;\n\theight: 20px;\n\tbackground-color: ", ";\n"]);

  _templateObject$h = function _templateObject() {
    return data;
  };

  return data;
}

var AnchorMenuItem = function AnchorMenuItem(_ref) {
  var title = _ref.title,
      active = _ref.active,
      props = objectWithoutPropertiesLoose(_ref, ["title", "active"]);

  return React.createElement(MenuItemStyled, props, active && React.createElement(Marker, null), React.createElement(NormalTextStyled, {
    active: active
  }, title));
};

AnchorMenuItem.defaultProps = {
  active: false
};
AnchorMenuItem.displayName = 'AnchorMenuItem';
AnchorMenuItem.propTypes = {
  title: PropTypes.string.isRequired,
  active: PropTypes.bool,
  onClick: PropTypes.func.isRequired
};
var Marker = styled.div(_templateObject$h(), function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.deepBlue;
});
Marker.displayName = 'Marker';
var MenuItemStyled = styled.div(_templateObject2$7(), function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.lightGray;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.colors.activeBlue;
});
MenuItemStyled.displayName = 'MenuItemStyled';
var NormalTextStyled = styled.span(_templateObject3$4(), function (_ref5) {
  var theme = _ref5.theme,
      active = _ref5.active;
  return active ? theme.colors.deepBlue + " !important" : theme.colors.black;
}, function (_ref6) {
  var active = _ref6.active;
  return active ? 'bold' : 'normal';
});
NormalTextStyled.displayName = 'NormalTextStyled';

function _templateObject$i() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: relative;\n\tborder: 0.5px solid ", ";\n\tborder-radius: 4px;\n"]);

  _templateObject$i = function _templateObject() {
    return data;
  };

  return data;
}

var AnchorMenuMapper = function AnchorMenuMapper(_ref) {
  var items = _ref.items,
      props = objectWithoutPropertiesLoose(_ref, ["items"]);

  return React.createElement(AnchorMenuStyled, props, items.map(function (_ref2) {
    var title = _ref2.title,
        rest = objectWithoutPropertiesLoose(_ref2, ["title"]);

    return React.createElement(AnchorMenuItem, _extends_1({
      key: title,
      title: title
    }, rest));
  }));
};

var AnchorMenuStyled = styled.div(_templateObject$i(), function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.lightGray;
});
AnchorMenuMapper.propTypes = {
  items: PropTypes.arrayOf(PropTypes.shape({
    title: PropTypes.string.isRequired,
    anchor: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
      current: PropTypes.instanceOf(Element)
    })]),
    path: PropTypes.string,
    active: PropTypes.bool
  })).isRequired
};

var ScrollableAnchorMenu =
/*#__PURE__*/
function (_Component) {
  inheritsLoose(ScrollableAnchorMenu, _Component);

  function ScrollableAnchorMenu(props) {
    var _this;

    _this = _Component.call(this, props) || this;

    defineProperty(assertThisInitialized(_this), "setSelectedItem", function (selectedItem, lockSelectedItem, scrollingTo) {
      _this.setState({
        selectedItem: selectedItem,
        lockSelectedItem: lockSelectedItem,
        scrollingTo: scrollingTo
      });
    });

    defineProperty(assertThisInitialized(_this), "limitValue", function (val, min, max) {
      return val < min ? min : val > max ? max : val;
    });

    defineProperty(assertThisInitialized(_this), "getCoords", function (elem) {
      var _elem$getBoundingClie = elem.getBoundingClientRect(),
          top = _elem$getBoundingClie.top;

      var _document = document,
          body = _document.body;
      var docEl = document.documentElement;
      var scrollTop = window.scrollY || docEl.scrollTop || body.scrollTop;
      var clientTop = docEl.clientTop || body.clientTop || 0;
      return top + scrollTop - clientTop;
    });

    defineProperty(assertThisInitialized(_this), "findCurrentSection", function (items) {
      var sectionIndex = items.findIndex(function (_ref) {
        var anchor = _ref.anchor;
        return _this.getCoords(anchor.current) - document.documentElement.scrollTop > 0;
      });
      return sectionIndex >= 0 ? sectionIndex - 1 : items.length - 1;
    });

    defineProperty(assertThisInitialized(_this), "searchItemsForCurrentSection", function () {
      var items = _this.props.items;

      var currentSection = _this.limitValue(_this.findCurrentSection(items), 0, items.length - 1);

      return currentSection >= 0 ? currentSection : items.length - 1;
    });

    defineProperty(assertThisInitialized(_this), "clearLockTimeOut", function () {
      clearTimeout(_this.lockClear);
      _this.lockClear = setTimeout(function () {
        _this.setSelectedItem(_this.searchItemsForCurrentSection(), false, -1);
      }, 200);
    });

    defineProperty(assertThisInitialized(_this), "handleScroll", function () {
      var _this$state = _this.state,
          selectedItem = _this$state.selectedItem,
          lockSelectedItem = _this$state.lockSelectedItem,
          scrollingTo = _this$state.scrollingTo;

      if (!lockSelectedItem) {
        _this.setSelectedItem(_this.searchItemsForCurrentSection(), false, -1);
      } else if (scrollingTo === document.documentElement.scrollTop) {
        clearTimeout(_this.lockClear);

        _this.setSelectedItem(selectedItem, false, scrollingTo);
      } else {
        _this.clearLockTimeOut();
      }
    });

    defineProperty(assertThisInitialized(_this), "onItemClick", function (anchor, index) {
      var y = _this.getCoords(anchor.current);

      _this.setSelectedItem(index, true, y);

      window.scrollTo({
        top: y,
        behavior: 'smooth'
      });
    });

    _this.lockClear = '';
    _this.state = {
      selectedItem: 0,
      lockSelectedItem: false,
      scrollingTo: -1
    };
    return _this;
  }

  var _proto = ScrollableAnchorMenu.prototype;

  _proto.componentDidMount = function componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  };

  _proto.UNSAFE_componentWillUnmount = function UNSAFE_componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  };

  _proto.render = function render() {
    var _this2 = this;

    var selectedItem = this.state.selectedItem;

    var _this$props = this.props,
        items = _this$props.items,
        props = objectWithoutPropertiesLoose(_this$props, ["items"]);

    var computedItems = items.map(function (item, index) {
      return _extends_1({
        onClick: function onClick() {
          return _this2.onItemClick(item.anchor, index);
        },
        active: selectedItem === index
      }, item);
    });
    return React.createElement(AnchorMenuMapper, _extends_1({
      items: computedItems
    }, props));
  };

  return ScrollableAnchorMenu;
}(Component);

ScrollableAnchorMenu.displayName = 'ScrollableAnchorMenu';
ScrollableAnchorMenu.propTypes = {
  items: PropTypes.arrayOf(PropTypes.shape({
    anchor: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
      current: PropTypes.instanceOf(Element)
    })]),
    title: PropTypes.string.isRequired
  })).isRequired
};

var NavigationAnchorMenu = function NavigationAnchorMenu(_ref) {
  var items = _ref.items,
      onItemClick = _ref.onItemClick;
  var newItems = items.map(function (item) {
    return _extends_1({
      onClick: function onClick() {
        return onItemClick(item.path);
      }
    }, item);
  });
  return React.createElement(AnchorMenuMapper, {
    items: newItems
  });
};

NavigationAnchorMenu.displayName = 'NavigationAnchorMenu';
NavigationAnchorMenu.propTypes = {
  onItemClick: PropTypes.func.isRequired,
  items: PropTypes.arrayOf(PropTypes.shape({
    path: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    active: PropTypes.bool
  })).isRequired
};

var AnchorMenu = function AnchorMenu(_ref) {
  var type = _ref.type,
      items = _ref.items,
      onItemClick = _ref.onItemClick,
      props = objectWithoutPropertiesLoose(_ref, ["type", "items", "onItemClick"]);

  return type === 'scrollable' ? React.createElement(ScrollableAnchorMenu, _extends_1({
    items: items
  }, props)) : React.createElement(NavigationAnchorMenu, _extends_1({
    items: items,
    onItemClick: onItemClick
  }, props));
};

AnchorMenu.defaultProps = {
  onItemClick: undefined
};
AnchorMenu.propTypes = {
  type: PropTypes.oneOf(['scrollable', 'navigation']).isRequired,
  items: PropTypes.arrayOf(PropTypes.shape({
    title: PropTypes.string.isRequired,
    anchor: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
      current: PropTypes.instanceOf(Element)
    })]),
    path: PropTypes.string,
    active: PropTypes.bool
  })).isRequired,
  onItemClick: PropTypes.func
};

function _templateObject$j() {
  var data = taggedTemplateLiteralLoose(["\n\tpadding: 24px 15px;\n\n\tbackground-color: ", " !important;\n\tborder-radius: ", " !important;\n\tcolor: ", " !important;\n\tvertical-align: middle;\n\n\tp {\n\t\tpadding: 0 !important;\n\t\tmargin: 0 !important;\n\t\ttext-align: center;\n\t}\n"]);

  _templateObject$j = function _templateObject() {
    return data;
  };

  return data;
}
var BlockWrapper = styled.div(_templateObject$j(), function (_ref) {
  var theme = _ref.theme,
      background = _ref.background;
  return background || theme.block.backgroundColor;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.block.borderRadius;
}, function (_ref3) {
  var theme = _ref3.theme,
      color = _ref3.color;
  return color || theme.block.color;
});
BlockWrapper.displayName = 'BlockWrapper';
BlockWrapper.propTypes = {
  color: PropTypes.string,
  background: PropTypes.string
};

/**
 * block component
 */

var Block = function Block(_ref) {
  var value = _ref.value,
      label = _ref.label,
      props = objectWithoutPropertiesLoose(_ref, ["value", "label"]);

  return React.createElement(BlockWrapper, props, React.createElement("div", null, React.createElement("p", {
    style: {
      fontSize: 40
    }
  }, " " + value), React.createElement("p", {
    style: {
      fontSize: 14,
      textTransform: 'uppercase'
    }
  }, label)));
};

Block.defaultProps = {
  color: '#fff',
  background: '#a21d21'
};
Block.propTypes = {
  /** value present on the middle of the component */
  value: PropTypes.number.isRequired,

  /** text present below the value */
  label: PropTypes.string.isRequired,

  /** text color */
  color: PropTypes.string,

  /** background color [hex] */
  background: PropTypes.string
};
Block.displayName = 'Block';

function _templateObject$k() {
  var data = taggedTemplateLiteralLoose(["\n\tvertical-align: middle;\n\n\t&&& p {\n\t\tpadding: 0 !important;\n\t\tmargin: 0 !important;\n\t\ttext-align: left;\n\t}\n\n\t&&& div {\n\t\tpadding-left: 8px !important;\n\n\t\tborder-color: ", ";\n\t\tborder-left-width: 5px;\n\t\tborder-left-style: solid;\n\t}\n"]);

  _templateObject$k = function _templateObject() {
    return data;
  };

  return data;
}
var BlockBarWrapper = styled(BlockWrapper)(_templateObject$k(), function (_ref) {
  var theme = _ref.theme,
      labelColor = _ref.labelColor;
  return labelColor || theme.block.labelColor;
});
BlockBarWrapper.propTypes = {
  labelColor: PropTypes.string
};
BlockBarWrapper.displayName = 'BlockBarWrapper';

/**
 * block component
 */

var BlockBar = function BlockBar(_ref) {
  var value = _ref.value,
      label = _ref.label,
      labelColor = _ref.labelColor,
      props = objectWithoutPropertiesLoose(_ref, ["value", "label", "labelColor"]);

  return React.createElement(BlockBarWrapper, _extends_1({
    labelColor: labelColor
  }, props), React.createElement("div", null, React.createElement("p", {
    style: {
      fontSize: 40
    }
  }, " " + value), React.createElement("p", {
    style: {
      fontSize: 14,
      textTransform: 'uppercase'
    }
  }, label)));
};

BlockBar.defaultProps = {
  labelColor: '#ffffff'
};
BlockBar.propTypes = {
  value: PropTypes.number.isRequired,
  label: PropTypes.string.isRequired,
  labelColor: PropTypes.string
};
BlockBar.displayName = 'BlockBar';

function _templateObject$l() {
  var data = taggedTemplateLiteralLoose(["\n\tcolor: ", " !important;\n\tfont-weight: ", " !important;\n"]);

  _templateObject$l = function _templateObject() {
    return data;
  };

  return data;
}
var Span = styled.span(_templateObject$l(), function (_ref) {
  var theme = _ref.theme,
      type = _ref.type,
      color = _ref.color;
  return type ? theme.span[type] : color || theme.span.defaultColor;
}, function (_ref2) {
  var bold = _ref2.bold;
  return bold ? 700 : undefined;
});
Span.propTypes = {
  bold: PropTypes.bool,
  color: PropTypes.string,
  type: PropTypes.oneOf(['positive', 'negative', 'primary'])
};
Span.displayName = 'Span';

function _templateObject$m() {
  var data = taggedTemplateLiteralLoose(["\n\tbox-shadow: 0 0 3px rgba(0, 0, 0, 0.25);\n\n\t&&.ui.modal > .close {\n\t\ttop: 8px;\n\t\tright: 8px;\n\t\tcolor: ", ";\n\t\tpadding: 0;\n\t\twidth: 10px;\n\t\tfont-size: 18px;\n\n\t\t:hover {\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"]);

  _templateObject$m = function _templateObject() {
    return data;
  };

  return data;
}

var ModalStyled = function ModalStyled(_ref) {
  var children = _ref.children,
      props = objectWithoutPropertiesLoose(_ref, ["children"]);

  return React.createElement(ModalStyledWrapper, props, children);
};

var ModalStyledWrapper = styled(Modal)(_templateObject$m(), function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.gray;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.mediumGray;
});
ModalStyled.displayName = 'ModalStyled';
ModalStyled.propTypes = {
  children: PropTypes.node
};
ModalStyled.defaultProps = {
  children: null
};

var secondary = {
  name: 'SECONDARY',
  colors: colors,
  borderRadius: '0',
  navbar: {
    backgroundColor: colors.darkRed
  },
  buttons: {
    borderRadius: '0',
    primary: colors.activeBlue,
    danger: colors.red,
    success: colors.green,
    white: colors.white,
    activeBg: {
      primary: colors.darkBlue,
      danger: colors.darkRed,
      success: colors.green,
      white: colors.white
    },
    dropdown: {
      separatorColor: colors.gray,
      activeBackgroundColor: colors.gray
    }
  },
  list: {
    pairCell: colors.lightGray,
    unPairCell: colors.white,
    title: colors.black,
    additionalInfo: colors.gray,
    activeCell: colors.lightBlue
  },
  span: {
    defaultColor: colors.activeBlue,
    negative: colors.red,
    positive: colors.green,
    primary: colors.activeBlue
  },
  block: {
    borderRadius: '0',
    backgroundColor: colors.darkRed,
    labelColor: colors.darkGray,
    color: colors.darkGray
  },
  input: {
    borderRadius: '0'
  },
  select: {
    borderRadius: '4px',
    placeholderColor: '#424242',
    focusedBackgroundColor: '#ECECEC',
    selectedBackgroundColor: '#005BEA',
    menuPadding: '5px 10px 5px 10px'
  },
  toggle: {
    color: colors.green
  },
  timePicker: {
    errorColor: colors.red,
    disabledColor: colors.lightGray,
    primaryColor: colors.activeBlue,
    activeColor: colors.deepBlue,
    hoverColor: colors.lightGray,
    textColor: colors.darkGray
  },
  toast: {
    titleColor: colors.darkGray,
    messageColor: colors.mediumGray,
    errorColor: colors.red,
    successColor: colors.green,
    warningColor: colors.yellow
  },
  status: {
    bg: {
      success: colors.green,
      error: colors.red,
      info: colors.lightBlue
    },
    color: {
      success: colors.white,
      error: colors.white,
      info: colors.darkGray
    }
  }
};

function _templateObject$n() {
  var data = taggedTemplateLiteralLoose(["\n\t&&.header {\n\t\tborder-bottom: none;\n\t}\n"]);

  _templateObject$n = function _templateObject() {
    return data;
  };

  return data;
}
var NoBorderModalHeader = styled(Header)(_templateObject$n());

var ModalHeader = function ModalHeader(_ref) {
  var children = _ref.children;
  return React.createElement(NoBorderModalHeader, null, children);
};

var ModalTitleHeader = function ModalTitleHeader(_ref2) {
  var title = _ref2.title;
  return React.createElement(NoBorderModalHeader, {
    content: title
  });
};
var ModalIconTitleHeader = function ModalIconTitleHeader(_ref3) {
  var title = _ref3.title,
      icon = _ref3.icon,
      iconColor = _ref3.iconColor;
  return React.createElement(NoBorderModalHeader, {
    icon: React.createElement(Icon$1, {
      color: iconColor,
      size: "big",
      icon: icon
    }),
    content: title
  });
};
ModalHeader.defaultProps = {
  children: ''
};
ModalHeader.propTypes = {
  children: PropTypes.node
};
ModalHeader.displayName = 'ModalHeader';
ModalTitleHeader.propTypes = {
  title: PropTypes.string.isRequired
};
ModalTitleHeader.displayName = 'ModalTitleHeader';
ModalIconTitleHeader.defaultProps = {
  title: '',
  iconColor: theme.colors.red
};
ModalIconTitleHeader.propTypes = {
  title: PropTypes.string,
  icon: PropTypes.string.isRequired,
  iconColor: PropTypes.string
};
ModalIconTitleHeader.displayName = 'ModalIconTitleHeader';

var ModalContent = function ModalContent(_ref) {
  var children = _ref.children;
  return React.createElement(Modal.Content, null, children);
};

ModalContent.defaultProps = {
  children: null
};
ModalContent.propTypes = {
  children: PropTypes.node
};
ModalContent.displayName = 'ModalContent';

function _templateObject$o() {
  var data = taggedTemplateLiteralLoose(["\n\tpadding: 1.25rem 1.5rem;\n"]);

  _templateObject$o = function _templateObject() {
    return data;
  };

  return data;
}
var SemanticModalFooter = styled.div(_templateObject$o());

var ModalFooter = function ModalFooter(_ref) {
  var children = _ref.children;
  return React.createElement(SemanticModalFooter, null, children);
};

var ModalSingleButtonFooter = function ModalSingleButtonFooter(_ref2) {
  var buttonText = _ref2.buttonText,
      buttonOnClickHandler = _ref2.buttonOnClickHandler,
      buttonId = _ref2.buttonId,
      loading = _ref2.loading,
      props = objectWithoutPropertiesLoose(_ref2, ["buttonText", "buttonOnClickHandler", "buttonId", "loading"]);

  return React.createElement(SemanticModalFooter, null, React.createElement(Grid, null, React.createElement(Grid.Column, {
    align: "right"
  }, React.createElement(Button$1, _extends_1({
    id: buttonId,
    onClick: buttonOnClickHandler,
    content: buttonText,
    loading: loading
  }, props)))));
};
var ModalDoubleButtonFooter = function ModalDoubleButtonFooter(_ref3) {
  var leftButtonText = _ref3.leftButtonText,
      leftButtonOnClickHandler = _ref3.leftButtonOnClickHandler,
      leftButtonId = _ref3.leftButtonId,
      rightButtonText = _ref3.rightButtonText,
      rightButtonOnClickHandler = _ref3.rightButtonOnClickHandler,
      rightButtonId = _ref3.rightButtonId,
      loading = _ref3.loading,
      disabled = _ref3.disabled,
      props = objectWithoutPropertiesLoose(_ref3, ["leftButtonText", "leftButtonOnClickHandler", "leftButtonId", "rightButtonText", "rightButtonOnClickHandler", "rightButtonId", "loading", "disabled"]);

  return React.createElement(SemanticModalFooter, null, React.createElement(Grid, null, React.createElement(Grid.Column, {
    verticalAlign: "middle",
    width: 8,
    align: "left"
  }, React.createElement(ButtonLink, {
    id: leftButtonId,
    onClick: leftButtonOnClickHandler
  }, leftButtonText)), React.createElement(Grid.Column, {
    width: 8,
    align: "right"
  }, React.createElement(Button$1, _extends_1({
    id: rightButtonId,
    onClick: rightButtonOnClickHandler,
    content: rightButtonText,
    loading: loading,
    disabled: disabled
  }, props)))));
};
var ModalDoubleButtonContentFooter = function ModalDoubleButtonContentFooter(_ref4) {
  var leftButtonText = _ref4.leftButtonText,
      leftButtonOnClickHandler = _ref4.leftButtonOnClickHandler,
      leftButtonId = _ref4.leftButtonId,
      rightButtonText = _ref4.rightButtonText,
      rightButtonOnClickHandler = _ref4.rightButtonOnClickHandler,
      rightButtonId = _ref4.rightButtonId,
      loading = _ref4.loading,
      disabled = _ref4.disabled,
      props = objectWithoutPropertiesLoose(_ref4, ["leftButtonText", "leftButtonOnClickHandler", "leftButtonId", "rightButtonText", "rightButtonOnClickHandler", "rightButtonId", "loading", "disabled"]);

  return React.createElement(Grid, null, React.createElement(Grid.Column, {
    verticalAlign: "middle",
    width: 8,
    align: "left"
  }, React.createElement(ButtonLink, {
    id: leftButtonId,
    onClick: leftButtonOnClickHandler
  }, leftButtonText)), React.createElement(Grid.Column, {
    width: 8,
    align: "right"
  }, React.createElement(Button$1, _extends_1({
    id: rightButtonId,
    onClick: rightButtonOnClickHandler,
    content: rightButtonText,
    loading: loading,
    disabled: disabled
  }, props))));
};
ModalFooter.defaultProps = {
  children: null
};
ModalFooter.propTypes = {
  children: PropTypes.node
};
ModalFooter.displayName = 'ModalFooter';
ModalSingleButtonFooter.defaultProps = {
  buttonId: '',
  loading: false
};
ModalSingleButtonFooter.propTypes = {
  buttonId: PropTypes.string,
  buttonText: PropTypes.string.isRequired,
  buttonOnClickHandler: PropTypes.func.isRequired,
  loading: PropTypes.bool
};
ModalSingleButtonFooter.displayName = 'ModalSingleButtonFooter';
ModalDoubleButtonFooter.defaultProps = {
  leftButtonId: '',
  rightButtonId: '',
  loading: false,
  disabled: false
};
ModalDoubleButtonFooter.propTypes = {
  leftButtonId: PropTypes.string,
  leftButtonText: PropTypes.string.isRequired,
  leftButtonOnClickHandler: PropTypes.func.isRequired,
  rightButtonId: PropTypes.string,
  rightButtonText: PropTypes.string.isRequired,
  rightButtonOnClickHandler: PropTypes.func.isRequired,
  loading: PropTypes.bool,
  disabled: PropTypes.bool
};
ModalDoubleButtonFooter.displayName = 'ModalDoubleButtonFooter';
ModalDoubleButtonContentFooter.defaultProps = {
  leftButtonId: '',
  rightButtonId: '',
  loading: false,
  disabled: false
};
ModalDoubleButtonContentFooter.propTypes = {
  leftButtonId: PropTypes.string,
  leftButtonText: PropTypes.string.isRequired,
  leftButtonOnClickHandler: PropTypes.func.isRequired,
  rightButtonId: PropTypes.string,
  rightButtonText: PropTypes.string.isRequired,
  rightButtonOnClickHandler: PropTypes.func.isRequired,
  loading: PropTypes.bool,
  disabled: PropTypes.bool
};
ModalDoubleButtonContentFooter.displayName = 'ModalDoubleButtonContentFooter';

var Modal$1 = function Modal$$1(_ref) {
  var children = _ref.children,
      dimmer = _ref.dimmer,
      size = _ref.size,
      closeOnDimmerClick = _ref.closeOnDimmerClick,
      props = objectWithoutPropertiesLoose(_ref, ["children", "dimmer", "size", "closeOnDimmerClick"]);

  return React.createElement(ModalStyled, _extends_1({
    dimmer: dimmer,
    size: size,
    closeOnDimmerClick: closeOnDimmerClick,
    closeIcon: true
  }, props), children);
};

Modal$1.Header = function (_ref2) {
  var props = _extends_1({}, _ref2);

  return React.createElement(ModalHeader, props);
};

Modal$1.Header.displayName = 'Modal.Header';

Modal$1.TitleHeader = function (_ref3) {
  var props = _extends_1({}, _ref3);

  return React.createElement(ModalTitleHeader, props);
};

Modal$1.TitleHeader.displayName = 'Modal.ModalTitleHeader';

Modal$1.IconTitleHeader = function (_ref4) {
  var props = _extends_1({}, _ref4);

  return React.createElement(ModalIconTitleHeader, props);
};

Modal$1.IconTitleHeader.displayName = 'Modal.ModalIconTitleHeader';

Modal$1.Content = function (_ref5) {
  var props = _extends_1({}, _ref5);

  return React.createElement(ModalContent, props);
};

Modal$1.Content.displayName = 'Modal.Content';

Modal$1.Footer = function (_ref6) {
  var props = _extends_1({}, _ref6);

  return React.createElement(ModalFooter, props);
};

Modal$1.Footer.displayName = 'Modal.Footer';

Modal$1.SingleButtonFooter = function (_ref7) {
  var props = _extends_1({}, _ref7);

  return React.createElement(ModalSingleButtonFooter, props);
};

Modal$1.SingleButtonFooter.displayName = 'Modal.SingleButtonFooter';

Modal$1.DoubleButtonFooter = function (_ref8) {
  var props = _extends_1({}, _ref8);

  return React.createElement(ModalDoubleButtonFooter, props);
};

Modal$1.DoubleButtonFooter.displayName = 'Modal.DoubleButtonFooter';

Modal$1.ModalDoubleButtonContentFooter = function (_ref9) {
  var props = _extends_1({}, _ref9);

  return React.createElement(ModalDoubleButtonContentFooter, props);
};

Modal$1.ModalDoubleButtonContentFooter.displayName = 'Modal.ModalDoubleButtonContentFooter';
Modal$1.defaultProps = {
  dimmer: 'inverted',
  size: 'tiny',
  children: null,
  closeOnDimmerClick: false,
  closeIcon: true
};
Modal$1.propTypes = {
  /**  Custom content that is added to modal content */
  children: PropTypes.node,

  /**  Color of the icon */
  dimmer: PropTypes.string,

  /**  Simple text content for the Modal.  */
  size: PropTypes.string,

  /** Close modal clicking outside */
  closeOnDimmerClick: PropTypes.bool,

  /** Has icon to close modal */
  closeIcon: PropTypes.bool
};
Modal$1.displayName = 'Modal';

function _templateObject5$3() {
  var data = taggedTemplateLiteralLoose(["\n\t&&&& {\n\t\tright: 0;\n\t\tbottom: 0;\n\t\ttop: 0;\n\t\twidth: 100% !important;\n\t\theight: 100%;\n\t\tmargin: 0 !important;\n\t\tposition: relative;\n\t}\n"]);

  _templateObject5$3 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$3() {
  var data = taggedTemplateLiteralLoose(["\n\t.ui.dimmer {\n\t\tpadding: 0;\n\t}\n"]);

  _templateObject4$3 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$5() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: absolute;\n\ttop: 24px;\n\tleft: 24px;\n"]);

  _templateObject3$5 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$8() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-top: 136px;\n"]);

  _templateObject2$8 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$p() {
  var data = taggedTemplateLiteralLoose(["\n\tmargin-right: 4px !important;\n"]);

  _templateObject$p = function _templateObject() {
    return data;
  };

  return data;
}

var FullScreenModal = function FullScreenModal(_ref) {
  var negativeLabel = _ref.negativeLabel,
      negativeActionHandler = _ref.negativeActionHandler,
      children = _ref.children,
      props = objectWithoutPropertiesLoose(_ref, ["negativeLabel", "negativeActionHandler", "children"]);

  return React.createElement(React.Fragment, null, React.createElement(ModalGlobalStyle, null), React.createElement(FullModalStyled, _extends_1({
    size: "fullscreen",
    dimmer: "inverted",
    closeIcon: true
  }, props), React.createElement(Modal$1.Content, null, React.createElement(Top, null, React.createElement(ButtonLink, {
    onClick: negativeActionHandler
  }, React.createElement(IconSpaced, {
    icon: "arrow-left",
    color: theme.colors.activeBlue
  }), negativeLabel)), children && React.createElement(CenteredContent, null, children))));
};

var IconSpaced = styled(Icon$1)(_templateObject$p());
var CenteredContent = styled.div(_templateObject2$8());
CenteredContent.displayName = 'CenteredContent';
var Top = styled.div(_templateObject3$5()); // add global style to affect modal wrapper at the body

var ModalGlobalStyle = createGlobalStyle(_templateObject4$3());
var FullModalStyled = styled(ModalStyled)(_templateObject5$3());
FullScreenModal.defaultProps = {
  children: null,
  negativeLabel: '',
  negativeActionHandler: null
};
FullScreenModal.propTypes = {
  /**  Custom content that is added to modal content */
  children: PropTypes.node,

  /**  Left button label  */
  negativeLabel: PropTypes.string,

  /**  Left button click handler  */
  negativeActionHandler: PropTypes.func
};

var ErrorModal = function ErrorModal(_ref) {
  var title = _ref.title,
      errors = _ref.errors,
      buttonText = _ref.buttonText,
      buttonOnClickHandler = _ref.buttonOnClickHandler,
      buttonId = _ref.buttonId,
      props = objectWithoutPropertiesLoose(_ref, ["title", "errors", "buttonText", "buttonOnClickHandler", "buttonId"]);

  return React.createElement(Modal$1, _extends_1({
    closeIcon: false
  }, props), React.createElement(Modal$1.IconTitleHeader, {
    title: title,
    icon: "warning"
  }), React.createElement(Modal$1.Content, null, React.createElement("ul", null, errors.map(function (error, index) {
    return React.createElement("li", {
      key: error + "-" + index
    }, error);
  }))), React.createElement(Modal$1.SingleButtonFooter, {
    buttonText: buttonText,
    buttonOnClickHandler: buttonOnClickHandler,
    buttonId: buttonId
  }));
};

ErrorModal.defaultProps = {
  buttonId: ''
};
ErrorModal.propTypes = {
  /**  Modal title */
  title: PropTypes.string.isRequired,

  /** Array of errors to be displayed */
  errors: PropTypes.arrayOf(PropTypes.string).isRequired,

  /** Button text on Modal Footer */
  buttonText: PropTypes.string.isRequired,

  /** OnClick function for Modal Footer button */
  buttonOnClickHandler: PropTypes.func.isRequired,

  /** Id for Modal Footer button */
  buttonId: PropTypes.string
};
ErrorModal.displayName = 'ErrorModal';

var ConfirmationModal = function ConfirmationModal(_ref) {
  var title = _ref.title,
      contentText = _ref.contentText,
      leftButtonText = _ref.leftButtonText,
      leftButtonOnClickHandler = _ref.leftButtonOnClickHandler,
      leftButtonId = _ref.leftButtonId,
      rightButtonText = _ref.rightButtonText,
      rightButtonOnClickHandler = _ref.rightButtonOnClickHandler,
      rightButtonId = _ref.rightButtonId,
      loading = _ref.loading,
      props = objectWithoutPropertiesLoose(_ref, ["title", "contentText", "leftButtonText", "leftButtonOnClickHandler", "leftButtonId", "rightButtonText", "rightButtonOnClickHandler", "rightButtonId", "loading"]);

  return React.createElement(Modal$1, props, React.createElement(Modal$1.IconTitleHeader, {
    title: title,
    icon: "warning"
  }), React.createElement(Modal$1.Content, null, contentText), React.createElement(Modal$1.DoubleButtonFooter, {
    leftButtonText: leftButtonText,
    leftButtonOnClickHandler: leftButtonOnClickHandler,
    leftButtonId: leftButtonId,
    rightButtonText: rightButtonText,
    rightButtonOnClickHandler: rightButtonOnClickHandler,
    rightButtonId: rightButtonId,
    loading: loading
  }));
};

ConfirmationModal.defaultProps = {
  leftButtonId: '',
  rightButtonId: '',
  loading: false
};
ConfirmationModal.propTypes = {
  /**  Modal title */
  title: PropTypes.string.isRequired,

  /** Modal content text */
  contentText: PropTypes.string.isRequired,

  /** Left button text on Modal Footer */
  leftButtonText: PropTypes.string.isRequired,

  /** OnClick function for Modal Footer left button */
  leftButtonOnClickHandler: PropTypes.func.isRequired,

  /** Id for Modal Footer left button */
  leftButtonId: PropTypes.string,

  /** Right button text on Modal Footer */
  rightButtonText: PropTypes.string.isRequired,

  /** OnClick function for Modal Footer right button */
  rightButtonOnClickHandler: PropTypes.func.isRequired,

  /** Id for Modal Footer right button */
  rightButtonId: PropTypes.string,

  /** Loading for Modal Footer right button */
  loading: PropTypes.bool
};
ConfirmationModal.displayName = 'ConfirmationModal';

var classnames = createCommonjsModule(function (module) {
/*!
  Copyright (c) 2017 Jed Watson.
  Licensed under the MIT License (MIT), see
  http://jedwatson.github.io/classnames
*/
/* global define */

(function () {

	var hasOwn = {}.hasOwnProperty;

	function classNames () {
		var classes = [];

		for (var i = 0; i < arguments.length; i++) {
			var arg = arguments[i];
			if (!arg) continue;

			var argType = typeof arg;

			if (argType === 'string' || argType === 'number') {
				classes.push(arg);
			} else if (Array.isArray(arg) && arg.length) {
				var inner = classNames.apply(null, arg);
				if (inner) {
					classes.push(inner);
				}
			} else if (argType === 'object') {
				for (var key in arg) {
					if (hasOwn.call(arg, key) && arg[key]) {
						classes.push(key);
					}
				}
			}
		}

		return classes.join(' ');
	}

	if (module.exports) {
		classNames.default = classNames;
		module.exports = classNames;
	} else {
		window.classNames = classNames;
	}
}());
});

var constant = createCommonjsModule(function (module, exports) {

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = {

  GLOBAL: {
    HIDE: '__react_tooltip_hide_event',
    REBUILD: '__react_tooltip_rebuild_event',
    SHOW: '__react_tooltip_show_event'
  }
};
});

unwrapExports(constant);

var staticMethods = createCommonjsModule(function (module, exports) {

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function (target) {
  /**
   * Hide all tooltip
   * @trigger ReactTooltip.hide()
   */
  target.hide = function (target) {
    dispatchGlobalEvent(_constant2.default.GLOBAL.HIDE, { target: target });
  };

  /**
   * Rebuild all tooltip
   * @trigger ReactTooltip.rebuild()
   */
  target.rebuild = function () {
    dispatchGlobalEvent(_constant2.default.GLOBAL.REBUILD);
  };

  /**
   * Show specific tooltip
   * @trigger ReactTooltip.show()
   */
  target.show = function (target) {
    dispatchGlobalEvent(_constant2.default.GLOBAL.SHOW, { target: target });
  };

  target.prototype.globalRebuild = function () {
    if (this.mount) {
      this.unbindListener();
      this.bindListener();
    }
  };

  target.prototype.globalShow = function (event) {
    if (this.mount) {
      // Create a fake event, specific show will limit the type to `solid`
      // only `float` type cares e.clientX e.clientY
      var e = { currentTarget: event.detail.target };
      this.showTooltip(e, true);
    }
  };

  target.prototype.globalHide = function (event) {
    if (this.mount) {
      var hasTarget = event && event.detail && event.detail.target && true || false;
      this.hideTooltip({ currentTarget: hasTarget && event.detail.target }, hasTarget);
    }
  };
};



var _constant2 = _interopRequireDefault(constant);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var dispatchGlobalEvent = function dispatchGlobalEvent(eventName, opts) {
  // Compatible with IE
  // @see http://stackoverflow.com/questions/26596123/internet-explorer-9-10-11-event-constructor-doesnt-work
  var event = void 0;

  if (typeof window.CustomEvent === 'function') {
    event = new window.CustomEvent(eventName, { detail: opts });
  } else {
    event = document.createEvent('Event');
    event.initEvent(eventName, false, true);
    event.detail = opts;
  }

  window.dispatchEvent(event);
}; /**
    * Static methods for react-tooltip
    */
});

unwrapExports(staticMethods);

var windowListener = createCommonjsModule(function (module, exports) {

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function (target) {
  target.prototype.bindWindowEvents = function (resizeHide) {
    // ReactTooltip.hide
    window.removeEventListener(_constant2.default.GLOBAL.HIDE, this.globalHide);
    window.addEventListener(_constant2.default.GLOBAL.HIDE, this.globalHide, false);

    // ReactTooltip.rebuild
    window.removeEventListener(_constant2.default.GLOBAL.REBUILD, this.globalRebuild);
    window.addEventListener(_constant2.default.GLOBAL.REBUILD, this.globalRebuild, false);

    // ReactTooltip.show
    window.removeEventListener(_constant2.default.GLOBAL.SHOW, this.globalShow);
    window.addEventListener(_constant2.default.GLOBAL.SHOW, this.globalShow, false);

    // Resize
    if (resizeHide) {
      window.removeEventListener('resize', this.onWindowResize);
      window.addEventListener('resize', this.onWindowResize, false);
    }
  };

  target.prototype.unbindWindowEvents = function () {
    window.removeEventListener(_constant2.default.GLOBAL.HIDE, this.globalHide);
    window.removeEventListener(_constant2.default.GLOBAL.REBUILD, this.globalRebuild);
    window.removeEventListener(_constant2.default.GLOBAL.SHOW, this.globalShow);
    window.removeEventListener('resize', this.onWindowResize);
  };

  /**
   * invoked by resize event of window
   */
  target.prototype.onWindowResize = function () {
    if (!this.mount) return;
    this.hideTooltip();
  };
};



var _constant2 = _interopRequireDefault(constant);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
});

unwrapExports(windowListener);

var customEvent = createCommonjsModule(function (module, exports) {

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function (target) {
  target.prototype.isCustomEvent = function (ele) {
    var event = this.state.event;

    return event || !!ele.getAttribute('data-event');
  };

  /* Bind listener for custom event */
  target.prototype.customBindListener = function (ele) {
    var _this = this;

    var _state = this.state,
        event = _state.event,
        eventOff = _state.eventOff;

    var dataEvent = ele.getAttribute('data-event') || event;
    var dataEventOff = ele.getAttribute('data-event-off') || eventOff;

    dataEvent.split(' ').forEach(function (event) {
      ele.removeEventListener(event, customListeners.get(ele, event));
      var customListener = checkStatus.bind(_this, dataEventOff);
      customListeners.set(ele, event, customListener);
      ele.addEventListener(event, customListener, false);
    });
    if (dataEventOff) {
      dataEventOff.split(' ').forEach(function (event) {
        ele.removeEventListener(event, _this.hideTooltip);
        ele.addEventListener(event, _this.hideTooltip, false);
      });
    }
  };

  /* Unbind listener for custom event */
  target.prototype.customUnbindListener = function (ele) {
    var _state2 = this.state,
        event = _state2.event,
        eventOff = _state2.eventOff;

    var dataEvent = event || ele.getAttribute('data-event');
    var dataEventOff = eventOff || ele.getAttribute('data-event-off');

    ele.removeEventListener(dataEvent, customListeners.get(ele, event));
    if (dataEventOff) ele.removeEventListener(dataEventOff, this.hideTooltip);
  };
};

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/**
 * Custom events to control showing and hiding of tooltip
 *
 * @attributes
 * - `event` {String}
 * - `eventOff` {String}
 */

var checkStatus = function checkStatus(dataEventOff, e) {
  var show = this.state.show;
  var id = this.props.id;

  var dataIsCapture = e.currentTarget.getAttribute('data-iscapture');
  var isCapture = dataIsCapture && dataIsCapture === 'true' || this.props.isCapture;
  var currentItem = e.currentTarget.getAttribute('currentItem');

  if (!isCapture) e.stopPropagation();
  if (show && currentItem === 'true') {
    if (!dataEventOff) this.hideTooltip(e);
  } else {
    e.currentTarget.setAttribute('currentItem', 'true');
    setUntargetItems(e.currentTarget, this.getTargetArray(id));
    this.showTooltip(e);
  }
};

var setUntargetItems = function setUntargetItems(currentTarget, targetArray) {
  for (var i = 0; i < targetArray.length; i++) {
    if (currentTarget !== targetArray[i]) {
      targetArray[i].setAttribute('currentItem', 'false');
    } else {
      targetArray[i].setAttribute('currentItem', 'true');
    }
  }
};

var customListeners = {
  id: '9b69f92e-d3fe-498b-b1b4-c5e63a51b0cf',
  set: function set(target, event, listener) {
    if (this.id in target) {
      var map = target[this.id];
      map[event] = listener;
    } else {
      // this is workaround for WeakMap, which is not supported in older browsers, such as IE
      Object.defineProperty(target, this.id, {
        configurable: true,
        value: _defineProperty({}, event, listener)
      });
    }
  },
  get: function get(target, event) {
    var map = target[this.id];
    if (map !== undefined) {
      return map[event];
    }
  }
};
});

unwrapExports(customEvent);

var isCapture = createCommonjsModule(function (module, exports) {

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function (target) {
  target.prototype.isCapture = function (currentTarget) {
    return currentTarget && currentTarget.getAttribute('data-iscapture') === 'true' || this.props.isCapture || false;
  };
};
});

unwrapExports(isCapture);

var getEffect = createCommonjsModule(function (module, exports) {

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function (target) {
  target.prototype.getEffect = function (currentTarget) {
    var dataEffect = currentTarget.getAttribute('data-effect');
    return dataEffect || this.props.effect || 'float';
  };
};
});

unwrapExports(getEffect);

var trackRemoval = createCommonjsModule(function (module, exports) {

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function (target) {
  target.prototype.bindRemovalTracker = function () {
    var _this = this;

    var MutationObserver = getMutationObserverClass();
    if (MutationObserver == null) return;

    var observer = new MutationObserver(function (mutations) {
      for (var m1 = 0; m1 < mutations.length; m1++) {
        var mutation = mutations[m1];
        for (var m2 = 0; m2 < mutation.removedNodes.length; m2++) {
          var element = mutation.removedNodes[m2];
          if (element === _this.state.currentTarget) {
            _this.hideTooltip();
            return;
          }
        }
      }
    });

    observer.observe(window.document, { childList: true, subtree: true });

    this.removalTracker = observer;
  };

  target.prototype.unbindRemovalTracker = function () {
    if (this.removalTracker) {
      this.removalTracker.disconnect();
      this.removalTracker = null;
    }
  };
};

/**
 * Tracking target removing from DOM.
 * It's necessary to hide tooltip when it's target disappears.
 * Otherwise, the tooltip would be shown forever until another target
 * is triggered.
 *
 * If MutationObserver is not available, this feature just doesn't work.
 */

// https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/
var getMutationObserverClass = function getMutationObserverClass() {
  return window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
};
});

unwrapExports(trackRemoval);

var getPosition = createCommonjsModule(function (module, exports) {

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function (e, target, node, place, desiredPlace, effect, offset) {
  var _getDimensions = getDimensions(node),
      tipWidth = _getDimensions.width,
      tipHeight = _getDimensions.height;

  var _getDimensions2 = getDimensions(target),
      targetWidth = _getDimensions2.width,
      targetHeight = _getDimensions2.height;

  var _getCurrentOffset = getCurrentOffset(e, target, effect),
      mouseX = _getCurrentOffset.mouseX,
      mouseY = _getCurrentOffset.mouseY;

  var defaultOffset = getDefaultPosition(effect, targetWidth, targetHeight, tipWidth, tipHeight);

  var _calculateOffset = calculateOffset(offset),
      extraOffset_X = _calculateOffset.extraOffset_X,
      extraOffset_Y = _calculateOffset.extraOffset_Y;

  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;

  var _getParent = getParent(node),
      parentTop = _getParent.parentTop,
      parentLeft = _getParent.parentLeft;

  // Get the edge offset of the tooltip


  var getTipOffsetLeft = function getTipOffsetLeft(place) {
    var offset_X = defaultOffset[place].l;
    return mouseX + offset_X + extraOffset_X;
  };
  var getTipOffsetRight = function getTipOffsetRight(place) {
    var offset_X = defaultOffset[place].r;
    return mouseX + offset_X + extraOffset_X;
  };
  var getTipOffsetTop = function getTipOffsetTop(place) {
    var offset_Y = defaultOffset[place].t;
    return mouseY + offset_Y + extraOffset_Y;
  };
  var getTipOffsetBottom = function getTipOffsetBottom(place) {
    var offset_Y = defaultOffset[place].b;
    return mouseY + offset_Y + extraOffset_Y;
  };

  //
  // Functions to test whether the tooltip's sides are inside
  // the client window for a given orientation p
  //
  //  _____________
  // |             | <-- Right side
  // | p = 'left'  |\
  // |             |/  |\
  // |_____________|   |_\  <-- Mouse
  //      / \           |
  //       |
  //       |
  //  Bottom side
  //
  var outsideLeft = function outsideLeft(p) {
    return getTipOffsetLeft(p) < 0;
  };
  var outsideRight = function outsideRight(p) {
    return getTipOffsetRight(p) > windowWidth;
  };
  var outsideTop = function outsideTop(p) {
    return getTipOffsetTop(p) < 0;
  };
  var outsideBottom = function outsideBottom(p) {
    return getTipOffsetBottom(p) > windowHeight;
  };

  // Check whether the tooltip with orientation p is completely inside the client window
  var outside = function outside(p) {
    return outsideLeft(p) || outsideRight(p) || outsideTop(p) || outsideBottom(p);
  };
  var inside = function inside(p) {
    return !outside(p);
  };

  var placesList = ['top', 'bottom', 'left', 'right'];
  var insideList = [];
  for (var i = 0; i < 4; i++) {
    var p = placesList[i];
    if (inside(p)) {
      insideList.push(p);
    }
  }

  var isNewState = false;
  var newPlace = void 0;
  if (inside(desiredPlace) && desiredPlace !== place) {
    isNewState = true;
    newPlace = desiredPlace;
  } else if (insideList.length > 0 && outside(desiredPlace) && outside(place)) {
    isNewState = true;
    newPlace = insideList[0];
  }

  if (isNewState) {
    return {
      isNewState: true,
      newState: { place: newPlace }
    };
  }

  return {
    isNewState: false,
    position: {
      left: parseInt(getTipOffsetLeft(place) - parentLeft, 10),
      top: parseInt(getTipOffsetTop(place) - parentTop, 10)
    }
  };
};

var getDimensions = function getDimensions(node) {
  var _node$getBoundingClie = node.getBoundingClientRect(),
      height = _node$getBoundingClie.height,
      width = _node$getBoundingClie.width;

  return {
    height: parseInt(height, 10),
    width: parseInt(width, 10)
  };
};

// Get current mouse offset
/**
 * Calculate the position of tooltip
 *
 * @params
 * - `e` {Event} the event of current mouse
 * - `target` {Element} the currentTarget of the event
 * - `node` {DOM} the react-tooltip object
 * - `place` {String} top / right / bottom / left
 * - `effect` {String} float / solid
 * - `offset` {Object} the offset to default position
 *
 * @return {Object}
 * - `isNewState` {Bool} required
 * - `newState` {Object}
 * - `position` {Object} {left: {Number}, top: {Number}}
 */
var getCurrentOffset = function getCurrentOffset(e, currentTarget, effect) {
  var boundingClientRect = currentTarget.getBoundingClientRect();
  var targetTop = boundingClientRect.top;
  var targetLeft = boundingClientRect.left;

  var _getDimensions3 = getDimensions(currentTarget),
      targetWidth = _getDimensions3.width,
      targetHeight = _getDimensions3.height;

  if (effect === 'float') {
    return {
      mouseX: e.clientX,
      mouseY: e.clientY
    };
  }
  return {
    mouseX: targetLeft + targetWidth / 2,
    mouseY: targetTop + targetHeight / 2
  };
};

// List all possibility of tooltip final offset
// This is useful in judging if it is necessary for tooltip to switch position when out of window
var getDefaultPosition = function getDefaultPosition(effect, targetWidth, targetHeight, tipWidth, tipHeight) {
  var top = void 0;
  var right = void 0;
  var bottom = void 0;
  var left = void 0;
  var disToMouse = 3;
  var triangleHeight = 2;
  var cursorHeight = 12; // Optimize for float bottom only, cause the cursor will hide the tooltip

  if (effect === 'float') {
    top = {
      l: -(tipWidth / 2),
      r: tipWidth / 2,
      t: -(tipHeight + disToMouse + triangleHeight),
      b: -disToMouse
    };
    bottom = {
      l: -(tipWidth / 2),
      r: tipWidth / 2,
      t: disToMouse + cursorHeight,
      b: tipHeight + disToMouse + triangleHeight + cursorHeight
    };
    left = {
      l: -(tipWidth + disToMouse + triangleHeight),
      r: -disToMouse,
      t: -(tipHeight / 2),
      b: tipHeight / 2
    };
    right = {
      l: disToMouse,
      r: tipWidth + disToMouse + triangleHeight,
      t: -(tipHeight / 2),
      b: tipHeight / 2
    };
  } else if (effect === 'solid') {
    top = {
      l: -(tipWidth / 2),
      r: tipWidth / 2,
      t: -(targetHeight / 2 + tipHeight + triangleHeight),
      b: -(targetHeight / 2)
    };
    bottom = {
      l: -(tipWidth / 2),
      r: tipWidth / 2,
      t: targetHeight / 2,
      b: targetHeight / 2 + tipHeight + triangleHeight
    };
    left = {
      l: -(tipWidth + targetWidth / 2 + triangleHeight),
      r: -(targetWidth / 2),
      t: -(tipHeight / 2),
      b: tipHeight / 2
    };
    right = {
      l: targetWidth / 2,
      r: tipWidth + targetWidth / 2 + triangleHeight,
      t: -(tipHeight / 2),
      b: tipHeight / 2
    };
  }

  return { top: top, bottom: bottom, left: left, right: right };
};

// Consider additional offset into position calculation
var calculateOffset = function calculateOffset(offset) {
  var extraOffset_X = 0;
  var extraOffset_Y = 0;

  if (Object.prototype.toString.apply(offset) === '[object String]') {
    offset = JSON.parse(offset.toString().replace(/\'/g, '\"'));
  }
  for (var key in offset) {
    if (key === 'top') {
      extraOffset_Y -= parseInt(offset[key], 10);
    } else if (key === 'bottom') {
      extraOffset_Y += parseInt(offset[key], 10);
    } else if (key === 'left') {
      extraOffset_X -= parseInt(offset[key], 10);
    } else if (key === 'right') {
      extraOffset_X += parseInt(offset[key], 10);
    }
  }

  return { extraOffset_X: extraOffset_X, extraOffset_Y: extraOffset_Y };
};

// Get the offset of the parent elements
var getParent = function getParent(currentTarget) {
  var currentParent = currentTarget;
  while (currentParent) {
    if (window.getComputedStyle(currentParent).getPropertyValue('transform') !== 'none') break;
    currentParent = currentParent.parentElement;
  }

  var parentTop = currentParent && currentParent.getBoundingClientRect().top || 0;
  var parentLeft = currentParent && currentParent.getBoundingClientRect().left || 0;

  return { parentTop: parentTop, parentLeft: parentLeft };
};
});

unwrapExports(getPosition);

var getTipContent = createCommonjsModule(function (module, exports) {

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function (tip, children, getContent, multiline) {
  if (children) return children;
  if (getContent !== undefined && getContent !== null) return getContent; // getContent can be 0, '', etc.
  if (getContent === null) return null; // Tip not exist and children is null or undefined

  var regexp = /<br\s*\/?>/;
  if (!multiline || multiline === 'false' || !regexp.test(tip)) {
    // No trim(), so that user can keep their input
    return tip;
  }

  // Multiline tooltip content
  return tip.split(regexp).map(function (d, i) {
    return _react2.default.createElement(
      'span',
      { key: i, className: 'multi-line' },
      d
    );
  });
};



var _react2 = _interopRequireDefault(React);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
});

unwrapExports(getTipContent);

var aria = createCommonjsModule(function (module, exports) {

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.parseAria = parseAria;
/**
 * Support aria- and role in ReactTooltip
 *
 * @params props {Object}
 * @return {Object}
 */
function parseAria(props) {
  var ariaObj = {};
  Object.keys(props).filter(function (prop) {
    // aria-xxx and role is acceptable
    return (/(^aria-\w+$|^role$)/.test(prop)
    );
  }).forEach(function (prop) {
    ariaObj[prop] = props[prop];
  });

  return ariaObj;
}
});

unwrapExports(aria);
var aria_1 = aria.parseAria;

var nodeListToArray = createCommonjsModule(function (module, exports) {

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function (nodeList) {
  var length = nodeList.length;
  if (nodeList.hasOwnProperty) {
    return Array.prototype.slice.call(nodeList);
  }
  return new Array(length).fill().map(function (index) {
    return nodeList[index];
  });
};
});

unwrapExports(nodeListToArray);

var style = createCommonjsModule(function (module, exports) {

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = '.__react_component_tooltip{border-radius:3px;display:inline-block;font-size:13px;left:-999em;opacity:0;padding:8px 21px;position:fixed;pointer-events:none;transition:opacity 0.3s ease-out;top:-999em;visibility:hidden;z-index:999}.__react_component_tooltip.allow_hover,.__react_component_tooltip.allow_click{pointer-events:auto}.__react_component_tooltip:before,.__react_component_tooltip:after{content:"";width:0;height:0;position:absolute}.__react_component_tooltip.show{opacity:0.9;margin-top:0px;margin-left:0px;visibility:visible}.__react_component_tooltip.type-dark{color:#fff;background-color:#222}.__react_component_tooltip.type-dark.place-top:after{border-top-color:#222;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-dark.place-bottom:after{border-bottom-color:#222;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-dark.place-left:after{border-left-color:#222;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-dark.place-right:after{border-right-color:#222;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-dark.border{border:1px solid #fff}.__react_component_tooltip.type-dark.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-dark.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-dark.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-dark.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-success{color:#fff;background-color:#8DC572}.__react_component_tooltip.type-success.place-top:after{border-top-color:#8DC572;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-success.place-bottom:after{border-bottom-color:#8DC572;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-success.place-left:after{border-left-color:#8DC572;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-success.place-right:after{border-right-color:#8DC572;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-success.border{border:1px solid #fff}.__react_component_tooltip.type-success.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-success.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-success.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-success.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-warning{color:#fff;background-color:#F0AD4E}.__react_component_tooltip.type-warning.place-top:after{border-top-color:#F0AD4E;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-warning.place-bottom:after{border-bottom-color:#F0AD4E;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-warning.place-left:after{border-left-color:#F0AD4E;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-warning.place-right:after{border-right-color:#F0AD4E;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-warning.border{border:1px solid #fff}.__react_component_tooltip.type-warning.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-warning.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-warning.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-warning.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-error{color:#fff;background-color:#BE6464}.__react_component_tooltip.type-error.place-top:after{border-top-color:#BE6464;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-error.place-bottom:after{border-bottom-color:#BE6464;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-error.place-left:after{border-left-color:#BE6464;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-error.place-right:after{border-right-color:#BE6464;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-error.border{border:1px solid #fff}.__react_component_tooltip.type-error.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-error.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-error.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-error.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-info{color:#fff;background-color:#337AB7}.__react_component_tooltip.type-info.place-top:after{border-top-color:#337AB7;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-info.place-bottom:after{border-bottom-color:#337AB7;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-info.place-left:after{border-left-color:#337AB7;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-info.place-right:after{border-right-color:#337AB7;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-info.border{border:1px solid #fff}.__react_component_tooltip.type-info.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-info.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-info.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-info.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-light{color:#222;background-color:#fff}.__react_component_tooltip.type-light.place-top:after{border-top-color:#fff;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-light.place-bottom:after{border-bottom-color:#fff;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-light.place-left:after{border-left-color:#fff;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-light.place-right:after{border-right-color:#fff;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-light.border{border:1px solid #222}.__react_component_tooltip.type-light.border.place-top:before{border-top:8px solid #222}.__react_component_tooltip.type-light.border.place-bottom:before{border-bottom:8px solid #222}.__react_component_tooltip.type-light.border.place-left:before{border-left:8px solid #222}.__react_component_tooltip.type-light.border.place-right:before{border-right:8px solid #222}.__react_component_tooltip.place-top{margin-top:-10px}.__react_component_tooltip.place-top:before{border-left:10px solid transparent;border-right:10px solid transparent;bottom:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-top:after{border-left:8px solid transparent;border-right:8px solid transparent;bottom:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-bottom{margin-top:10px}.__react_component_tooltip.place-bottom:before{border-left:10px solid transparent;border-right:10px solid transparent;top:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-bottom:after{border-left:8px solid transparent;border-right:8px solid transparent;top:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-left{margin-left:-10px}.__react_component_tooltip.place-left:before{border-top:6px solid transparent;border-bottom:6px solid transparent;right:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-left:after{border-top:5px solid transparent;border-bottom:5px solid transparent;right:-6px;top:50%;margin-top:-4px}.__react_component_tooltip.place-right{margin-left:10px}.__react_component_tooltip.place-right:before{border-top:6px solid transparent;border-bottom:6px solid transparent;left:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-right:after{border-top:5px solid transparent;border-bottom:5px solid transparent;left:-6px;top:50%;margin-top:-4px}.__react_component_tooltip .multi-line{display:block;padding:2px 0px;text-align:center}';
});

unwrapExports(style);

var dist = createCommonjsModule(function (module) {

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _class, _class2, _temp;

/* Decorators */


/* Utils */


/* CSS */




var _react2 = _interopRequireDefault(React);



var _propTypes2 = _interopRequireDefault(PropTypes);



var _classnames2 = _interopRequireDefault(classnames);



var _staticMethods2 = _interopRequireDefault(staticMethods);



var _windowListener2 = _interopRequireDefault(windowListener);



var _customEvent2 = _interopRequireDefault(customEvent);



var _isCapture2 = _interopRequireDefault(isCapture);



var _getEffect2 = _interopRequireDefault(getEffect);



var _trackRemoval2 = _interopRequireDefault(trackRemoval);



var _getPosition2 = _interopRequireDefault(getPosition);



var _getTipContent2 = _interopRequireDefault(getTipContent);





var _nodeListToArray2 = _interopRequireDefault(nodeListToArray);



var _style2 = _interopRequireDefault(style);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.default)(_class = (0, _customEvent2.default)(_class = (0, _isCapture2.default)(_class = (0, _getEffect2.default)(_class = (0, _trackRemoval2.default)(_class = (_temp = _class2 = function (_React$Component) {
  _inherits(ReactTooltip, _React$Component);

  function ReactTooltip(props) {
    _classCallCheck(this, ReactTooltip);

    var _this = _possibleConstructorReturn(this, (ReactTooltip.__proto__ || Object.getPrototypeOf(ReactTooltip)).call(this, props));

    _this.state = {
      place: props.place || 'top', // Direction of tooltip
      desiredPlace: props.place || 'top',
      type: 'dark', // Color theme of tooltip
      effect: 'float', // float or fixed
      show: false,
      border: false,
      offset: {},
      extraClass: '',
      html: false,
      delayHide: 0,
      delayShow: 0,
      event: props.event || null,
      eventOff: props.eventOff || null,
      currentEvent: null, // Current mouse event
      currentTarget: null, // Current target of mouse event
      ariaProps: (0, aria.parseAria)(props), // aria- and role attributes
      isEmptyTip: false,
      disable: false,
      originTooltip: null,
      isMultiline: false
    };

    _this.bind(['showTooltip', 'updateTooltip', 'hideTooltip', 'hideTooltipOnScroll', 'getTooltipContent', 'globalRebuild', 'globalShow', 'globalHide', 'onWindowResize', 'mouseOnToolTip']);

    _this.mount = true;
    _this.delayShowLoop = null;
    _this.delayHideLoop = null;
    _this.delayReshow = null;
    _this.intervalUpdateContent = null;
    return _this;
  }

  /**
   * For unify the bind and unbind listener
   */


  _createClass(ReactTooltip, [{
    key: 'bind',
    value: function bind(methodArray) {
      var _this2 = this;

      methodArray.forEach(function (method) {
        _this2[method] = _this2[method].bind(_this2);
      });
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _props = this.props,
          insecure = _props.insecure,
          resizeHide = _props.resizeHide;

      if (insecure) {
        this.setStyleHeader(); // Set the style to the <link>
      }
      this.bindListener(); // Bind listener for tooltip
      this.bindWindowEvents(resizeHide); // Bind global event for static method
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.mount = false;

      this.clearTimer();

      this.unbindListener();
      this.removeScrollListener();
      this.unbindWindowEvents();
    }

    /**
     * Return if the mouse is on the tooltip.
     * @returns {boolean} true - mouse is on the tooltip
     */

  }, {
    key: 'mouseOnToolTip',
    value: function mouseOnToolTip() {
      var show = this.state.show;


      if (show && this.tooltipRef) {
        /* old IE or Firefox work around */
        if (!this.tooltipRef.matches) {
          /* old IE work around */
          if (this.tooltipRef.msMatchesSelector) {
            this.tooltipRef.matches = this.tooltipRef.msMatchesSelector;
          } else {
            /* old Firefox work around */
            this.tooltipRef.matches = this.tooltipRef.mozMatchesSelector;
          }
        }
        return this.tooltipRef.matches(':hover');
      }
      return false;
    }
    /**
     * Pick out corresponded target elements
     */

  }, {
    key: 'getTargetArray',
    value: function getTargetArray(id) {
      var targetArray = void 0;
      if (!id) {
        targetArray = document.querySelectorAll('[data-tip]:not([data-for])');
      } else {
        var escaped = id.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
        targetArray = document.querySelectorAll('[data-tip][data-for="' + escaped + '"]');
      }
      // targetArray is a NodeList, convert it to a real array
      return (0, _nodeListToArray2.default)(targetArray);
    }

    /**
     * Bind listener to the target elements
     * These listeners used to trigger showing or hiding the tooltip
     */

  }, {
    key: 'bindListener',
    value: function bindListener() {
      var _this3 = this;

      var _props2 = this.props,
          id = _props2.id,
          globalEventOff = _props2.globalEventOff,
          isCapture$$1 = _props2.isCapture;

      var targetArray = this.getTargetArray(id);

      targetArray.forEach(function (target) {
        var isCaptureMode = _this3.isCapture(target);
        var effect = _this3.getEffect(target);
        if (target.getAttribute('currentItem') === null) {
          target.setAttribute('currentItem', 'false');
        }
        _this3.unbindBasicListener(target);

        if (_this3.isCustomEvent(target)) {
          _this3.customBindListener(target);
          return;
        }

        target.addEventListener('mouseenter', _this3.showTooltip, isCaptureMode);
        if (effect === 'float') {
          target.addEventListener('mousemove', _this3.updateTooltip, isCaptureMode);
        }
        target.addEventListener('mouseleave', _this3.hideTooltip, isCaptureMode);
      });

      // Global event to hide tooltip
      if (globalEventOff) {
        window.removeEventListener(globalEventOff, this.hideTooltip);
        window.addEventListener(globalEventOff, this.hideTooltip, isCapture$$1);
      }

      // Track removal of targetArray elements from DOM
      this.bindRemovalTracker();
    }

    /**
     * Unbind listeners on target elements
     */

  }, {
    key: 'unbindListener',
    value: function unbindListener() {
      var _this4 = this;

      var _props3 = this.props,
          id = _props3.id,
          globalEventOff = _props3.globalEventOff;

      var targetArray = this.getTargetArray(id);
      targetArray.forEach(function (target) {
        _this4.unbindBasicListener(target);
        if (_this4.isCustomEvent(target)) _this4.customUnbindListener(target);
      });

      if (globalEventOff) window.removeEventListener(globalEventOff, this.hideTooltip);
      this.unbindRemovalTracker();
    }

    /**
     * Invoke this before bind listener and unmount the component
     * it is necessary to invoke this even when binding custom event
     * so that the tooltip can switch between custom and default listener
     */

  }, {
    key: 'unbindBasicListener',
    value: function unbindBasicListener(target) {
      var isCaptureMode = this.isCapture(target);
      target.removeEventListener('mouseenter', this.showTooltip, isCaptureMode);
      target.removeEventListener('mousemove', this.updateTooltip, isCaptureMode);
      target.removeEventListener('mouseleave', this.hideTooltip, isCaptureMode);
    }
  }, {
    key: 'getTooltipContent',
    value: function getTooltipContent() {
      var _props4 = this.props,
          getContent = _props4.getContent,
          children = _props4.children;

      // Generate tooltip content

      var content = void 0;
      if (getContent) {
        if (Array.isArray(getContent)) {
          content = getContent[0] && getContent[0](this.state.originTooltip);
        } else {
          content = getContent(this.state.originTooltip);
        }
      }

      return (0, _getTipContent2.default)(this.state.originTooltip, children, content, this.state.isMultiline);
    }
  }, {
    key: 'isEmptyTip',
    value: function isEmptyTip(placeholder) {
      return typeof placeholder === 'string' && placeholder === '' || placeholder === null;
    }

    /**
     * When mouse enter, show the tooltip
     */

  }, {
    key: 'showTooltip',
    value: function showTooltip(e, isGlobalCall) {
      if (isGlobalCall) {
        // Don't trigger other elements belongs to other ReactTooltip
        var targetArray = this.getTargetArray(this.props.id);
        var isMyElement = targetArray.some(function (ele) {
          return ele === e.currentTarget;
        });
        if (!isMyElement) return;
      }
      // Get the tooltip content
      // calculate in this phrase so that tip width height can be detected
      var _props5 = this.props,
          multiline = _props5.multiline,
          getContent = _props5.getContent;

      var originTooltip = e.currentTarget.getAttribute('data-tip');
      var isMultiline = e.currentTarget.getAttribute('data-multiline') || multiline || false;

      // If it is focus event or called by ReactTooltip.show, switch to `solid` effect
      var switchToSolid = e instanceof window.FocusEvent || isGlobalCall;

      // if it needs to skip adding hide listener to scroll
      var scrollHide = true;
      if (e.currentTarget.getAttribute('data-scroll-hide')) {
        scrollHide = e.currentTarget.getAttribute('data-scroll-hide') === 'true';
      } else if (this.props.scrollHide != null) {
        scrollHide = this.props.scrollHide;
      }

      // Make sure the correct place is set
      var desiredPlace = e.currentTarget.getAttribute('data-place') || this.props.place || 'top';
      var effect = switchToSolid && 'solid' || this.getEffect(e.currentTarget);
      var offset = e.currentTarget.getAttribute('data-offset') || this.props.offset || {};
      var result = (0, _getPosition2.default)(e, e.currentTarget, this.tooltipRef, desiredPlace, desiredPlace, effect, offset);
      if (result.position && this.props.overridePosition) {
        result.position = this.props.overridePosition(result.position, e.currentTarget, this.tooltipRef, desiredPlace, desiredPlace, effect, offset);
      }

      var place = result.isNewState ? result.newState.place : desiredPlace;

      // To prevent previously created timers from triggering
      this.clearTimer();

      var target = e.currentTarget;

      var reshowDelay = this.state.show ? target.getAttribute('data-delay-update') || this.props.delayUpdate : 0;

      var self = this;

      var updateState = function updateState() {
        self.setState({
          originTooltip: originTooltip,
          isMultiline: isMultiline,
          desiredPlace: desiredPlace,
          place: place,
          type: target.getAttribute('data-type') || self.props.type || 'dark',
          effect: effect,
          offset: offset,
          html: target.getAttribute('data-html') ? target.getAttribute('data-html') === 'true' : self.props.html || false,
          delayShow: target.getAttribute('data-delay-show') || self.props.delayShow || 0,
          delayHide: target.getAttribute('data-delay-hide') || self.props.delayHide || 0,
          delayUpdate: target.getAttribute('data-delay-update') || self.props.delayUpdate || 0,
          border: target.getAttribute('data-border') ? target.getAttribute('data-border') === 'true' : self.props.border || false,
          extraClass: target.getAttribute('data-class') || self.props.class || self.props.className || '',
          disable: target.getAttribute('data-tip-disable') ? target.getAttribute('data-tip-disable') === 'true' : self.props.disable || false,
          currentTarget: target
        }, function () {
          if (scrollHide) self.addScrollListener(self.state.currentTarget);
          self.updateTooltip(e);

          if (getContent && Array.isArray(getContent)) {
            self.intervalUpdateContent = setInterval(function () {
              if (self.mount) {
                var _getContent = self.props.getContent;

                var placeholder = (0, _getTipContent2.default)(originTooltip, '', _getContent[0](), isMultiline);
                var isEmptyTip = self.isEmptyTip(placeholder);
                self.setState({
                  isEmptyTip: isEmptyTip
                });
                self.updatePosition();
              }
            }, getContent[1]);
          }
        });
      };

      // If there is no delay call immediately, don't allow events to get in first.
      if (reshowDelay) {
        this.delayReshow = setTimeout(updateState, reshowDelay);
      } else {
        updateState();
      }
    }

    /**
     * When mouse hover, update tool tip
     */

  }, {
    key: 'updateTooltip',
    value: function updateTooltip(e) {
      var _this5 = this;

      var _state = this.state,
          delayShow = _state.delayShow,
          disable = _state.disable;
      var afterShow = this.props.afterShow;

      var placeholder = this.getTooltipContent();
      var delayTime = parseInt(delayShow, 10);
      var eventTarget = e.currentTarget || e.target;

      // Check if the mouse is actually over the tooltip, if so don't hide the tooltip
      if (this.mouseOnToolTip()) {
        return;
      }

      if (this.isEmptyTip(placeholder) || disable) return; // if the tooltip is empty, disable the tooltip
      var updateState = function updateState() {
        if (Array.isArray(placeholder) && placeholder.length > 0 || placeholder) {
          var isInvisible = !_this5.state.show;
          _this5.setState({
            currentEvent: e,
            currentTarget: eventTarget,
            show: true
          }, function () {
            _this5.updatePosition();
            if (isInvisible && afterShow) afterShow(e);
          });
        }
      };

      clearTimeout(this.delayShowLoop);
      if (delayShow) {
        this.delayShowLoop = setTimeout(updateState, delayTime);
      } else {
        updateState();
      }
    }

    /*
    * If we're mousing over the tooltip remove it when we leave.
     */

  }, {
    key: 'listenForTooltipExit',
    value: function listenForTooltipExit() {
      var show = this.state.show;


      if (show && this.tooltipRef) {
        this.tooltipRef.addEventListener('mouseleave', this.hideTooltip);
      }
    }
  }, {
    key: 'removeListenerForTooltipExit',
    value: function removeListenerForTooltipExit() {
      var show = this.state.show;


      if (show && this.tooltipRef) {
        this.tooltipRef.removeEventListener('mouseleave', this.hideTooltip);
      }
    }

    /**
     * When mouse leave, hide tooltip
     */

  }, {
    key: 'hideTooltip',
    value: function hideTooltip(e, hasTarget) {
      var _this6 = this;

      var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { isScroll: false };
      var disable = this.state.disable;
      var isScroll = options.isScroll;

      var delayHide = isScroll ? 0 : this.state.delayHide;
      var afterHide = this.props.afterHide;

      var placeholder = this.getTooltipContent();
      if (!this.mount) return;
      if (this.isEmptyTip(placeholder) || disable) return; // if the tooltip is empty, disable the tooltip
      if (hasTarget) {
        // Don't trigger other elements belongs to other ReactTooltip
        var targetArray = this.getTargetArray(this.props.id);
        var isMyElement = targetArray.some(function (ele) {
          return ele === e.currentTarget;
        });
        if (!isMyElement || !this.state.show) return;
      }

      var resetState = function resetState() {
        var isVisible = _this6.state.show;
        // Check if the mouse is actually over the tooltip, if so don't hide the tooltip
        if (_this6.mouseOnToolTip()) {
          _this6.listenForTooltipExit();
          return;
        }
        _this6.removeListenerForTooltipExit();

        _this6.setState({
          show: false
        }, function () {
          _this6.removeScrollListener();
          if (isVisible && afterHide) afterHide(e);
        });
      };

      this.clearTimer();
      if (delayHide) {
        this.delayHideLoop = setTimeout(resetState, parseInt(delayHide, 10));
      } else {
        resetState();
      }
    }

    /**
     * When scroll, hide tooltip
     */

  }, {
    key: 'hideTooltipOnScroll',
    value: function hideTooltipOnScroll(event, hasTarget) {
      this.hideTooltip(event, hasTarget, { isScroll: true });
    }

    /**
     * Add scroll event listener when tooltip show
     * automatically hide the tooltip when scrolling
     */

  }, {
    key: 'addScrollListener',
    value: function addScrollListener(currentTarget) {
      var isCaptureMode = this.isCapture(currentTarget);
      window.addEventListener('scroll', this.hideTooltipOnScroll, isCaptureMode);
    }
  }, {
    key: 'removeScrollListener',
    value: function removeScrollListener() {
      window.removeEventListener('scroll', this.hideTooltipOnScroll);
    }

    // Calculation the position

  }, {
    key: 'updatePosition',
    value: function updatePosition() {
      var _this7 = this;

      var _state2 = this.state,
          currentEvent = _state2.currentEvent,
          currentTarget = _state2.currentTarget,
          place = _state2.place,
          desiredPlace = _state2.desiredPlace,
          effect = _state2.effect,
          offset = _state2.offset;

      var node = this.tooltipRef;
      var result = (0, _getPosition2.default)(currentEvent, currentTarget, node, place, desiredPlace, effect, offset);
      if (result.position && this.props.overridePosition) {
        result.position = this.props.overridePosition(result.position, currentEvent, currentTarget, node, place, desiredPlace, effect, offset);
      }

      if (result.isNewState) {
        // Switch to reverse placement
        return this.setState(result.newState, function () {
          _this7.updatePosition();
        });
      }
      // Set tooltip position
      node.style.left = result.position.left + 'px';
      node.style.top = result.position.top + 'px';
    }

    /**
     * Set style tag in header
     * in this way we can insert default css
     */

  }, {
    key: 'setStyleHeader',
    value: function setStyleHeader() {
      var head = document.getElementsByTagName('head')[0];
      if (!head.querySelector('style[id="react-tooltip"]')) {
        var tag = document.createElement('style');
        tag.id = 'react-tooltip';
        tag.innerHTML = _style2.default;
        /* eslint-disable */
        if (typeof __webpack_nonce__ !== 'undefined' && __webpack_nonce__) {
          tag.setAttribute('nonce', __webpack_nonce__);
        }
        /* eslint-enable */
        head.insertBefore(tag, head.firstChild);
      }
    }

    /**
     * CLear all kinds of timeout of interval
     */

  }, {
    key: 'clearTimer',
    value: function clearTimer() {
      clearTimeout(this.delayShowLoop);
      clearTimeout(this.delayHideLoop);
      clearTimeout(this.delayReshow);
      clearInterval(this.intervalUpdateContent);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this8 = this;

      var _state3 = this.state,
          extraClass = _state3.extraClass,
          html = _state3.html,
          ariaProps = _state3.ariaProps,
          disable = _state3.disable;

      var placeholder = this.getTooltipContent();
      var isEmptyTip = this.isEmptyTip(placeholder);
      var tooltipClass = (0, _classnames2.default)('__react_component_tooltip', { 'show': this.state.show && !disable && !isEmptyTip }, { 'border': this.state.border }, { 'place-top': this.state.place === 'top' }, { 'place-bottom': this.state.place === 'bottom' }, { 'place-left': this.state.place === 'left' }, { 'place-right': this.state.place === 'right' }, { 'type-dark': this.state.type === 'dark' }, { 'type-success': this.state.type === 'success' }, { 'type-warning': this.state.type === 'warning' }, { 'type-error': this.state.type === 'error' }, { 'type-info': this.state.type === 'info' }, { 'type-light': this.state.type === 'light' }, { 'allow_hover': this.props.delayUpdate }, { 'allow_click': this.props.clickable });

      var Wrapper = this.props.wrapper;
      if (ReactTooltip.supportedWrappers.indexOf(Wrapper) < 0) {
        Wrapper = ReactTooltip.defaultProps.wrapper;
      }

      if (html) {
        return _react2.default.createElement(Wrapper, _extends({ className: tooltipClass + ' ' + extraClass,
          id: this.props.id,
          ref: function ref(_ref) {
            return _this8.tooltipRef = _ref;
          }
        }, ariaProps, {
          'data-id': 'tooltip',
          dangerouslySetInnerHTML: { __html: placeholder } }));
      } else {
        return _react2.default.createElement(
          Wrapper,
          _extends({ className: tooltipClass + ' ' + extraClass,
            id: this.props.id
          }, ariaProps, {
            ref: function ref(_ref2) {
              return _this8.tooltipRef = _ref2;
            },
            'data-id': 'tooltip' }),
          placeholder
        );
      }
    }
  }], [{
    key: 'getDerivedStateFromProps',
    value: function getDerivedStateFromProps(nextProps, prevState) {
      var ariaProps = prevState.ariaProps;

      var newAriaProps = (0, aria.parseAria)(nextProps);
      var isChanged = Object.keys(newAriaProps).some(function (props) {
        return newAriaProps[props] !== ariaProps[props];
      });
      if (!isChanged) {
        return null;
      }
      return _extends({}, prevState, {
        ariaProps: newAriaProps
      });
    }
  }]);

  return ReactTooltip;
}(_react2.default.Component), _class2.propTypes = {
  children: _propTypes2.default.any,
  place: _propTypes2.default.string,
  type: _propTypes2.default.string,
  effect: _propTypes2.default.string,
  offset: _propTypes2.default.object,
  multiline: _propTypes2.default.bool,
  border: _propTypes2.default.bool,
  insecure: _propTypes2.default.bool,
  class: _propTypes2.default.string,
  className: _propTypes2.default.string,
  id: _propTypes2.default.string,
  html: _propTypes2.default.bool,
  delayHide: _propTypes2.default.number,
  delayUpdate: _propTypes2.default.number,
  delayShow: _propTypes2.default.number,
  event: _propTypes2.default.string,
  eventOff: _propTypes2.default.string,
  watchWindow: _propTypes2.default.bool,
  isCapture: _propTypes2.default.bool,
  globalEventOff: _propTypes2.default.string,
  getContent: _propTypes2.default.any,
  afterShow: _propTypes2.default.func,
  afterHide: _propTypes2.default.func,
  overridePosition: _propTypes2.default.func,
  disable: _propTypes2.default.bool,
  scrollHide: _propTypes2.default.bool,
  resizeHide: _propTypes2.default.bool,
  wrapper: _propTypes2.default.string,
  clickable: _propTypes2.default.bool
}, _class2.defaultProps = {
  insecure: true,
  resizeHide: true,
  wrapper: 'div',
  clickable: false
}, _class2.supportedWrappers = ['div', 'span'], _class2.displayName = 'ReactTooltip', _temp)) || _class) || _class) || _class) || _class) || _class) || _class;

/* export default not fit for standalone, it will exports {default:...} */


module.exports = ReactTooltip;
});

var ReactTooltip = unwrapExports(dist);

function _templateObject$q() {
  var data = taggedTemplateLiteralLoose(["\n\tbackground-color: ", ";\n\n\t&&&&.qube-tooltip:after {\n\t\tborder-top-color: ", ";\n\t\tborder-right-color: ", ";\n\t\tborder-bottom-color: ", ";\n\t\tborder-left-color: ", ";\n\t}\n\n\t&&&&.qube-tooltip {\n\t\tpadding: 12px;\n\n\t\tanimation: fadein 0.5s;\n\t\tbackground-color: ", ";\n\t\tborder-radius: none;\n\t\tbox-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);\n\t\tcolor: #fff;\n\t\tline-height: 18px;\n\t\topacity: 1;\n\t}\n"]);

  _templateObject$q = function _templateObject() {
    return data;
  };

  return data;
}
var StyledTooltip = styled(ReactTooltip)(_templateObject$q(), function (_ref) {
  var theme = _ref.theme;
  return theme.colors.darkGray;
}, function (_ref2) {
  var theme = _ref2.theme,
      place = _ref2.place;
  return place === 'top' ? theme.colors.darkGray : '';
}, function (_ref3) {
  var theme = _ref3.theme,
      place = _ref3.place;
  return place === 'right' ? theme.colors.darkGray : '';
}, function (_ref4) {
  var theme = _ref4.theme,
      place = _ref4.place;
  return place === 'bottom' ? theme.colors.darkGray : '';
}, function (_ref5) {
  var theme = _ref5.theme,
      place = _ref5.place;
  return place === 'left' ? theme.colors.darkGray : '';
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.colors.darkGray;
});
StyledTooltip.defaultProps = {
  effect: 'solid',
  className: 'qube-tooltip',
  suppressClassNameWarning: true
};
StyledTooltip.propTypes = {
  id: PropTypes.string.isRequired,
  text: PropTypes.string,
  place: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
  multiline: PropTypes.bool,

  /** Supress styled component class name warning */
  suppressClassNameWarning: PropTypes.bool
};
StyledTooltip.displayName = 'StyledTooltip';

function _templateObject$r() {
  var data = taggedTemplateLiteralLoose(["\n\tcursor: help;\n"]);

  _templateObject$r = function _templateObject() {
    return data;
  };

  return data;
}

var HelpTooltip = function HelpTooltip(_ref) {
  var id = _ref.id,
      text = _ref.text,
      place = _ref.place,
      multiline = _ref.multiline,
      icon = _ref.icon,
      color = _ref.color,
      disabled = _ref.disabled;
  return React.createElement(Fragment, null, React.createElement(IconStyled$1, {
    icon: icon,
    color: color,
    "data-tip": text,
    "data-for": id,
    disabled: disabled
  }), React.createElement(StyledTooltip, {
    id: id,
    place: place,
    multiline: multiline
  }));
};

var IconStyled$1 = styled(Icon$1)(_templateObject$r());
IconStyled$1.displayName = 'IconStyled';
HelpTooltip.defaultProps = {
  icon: 'management',
  color: '#EC8222',
  place: 'top',
  multiline: false,
  disabled: false
};
HelpTooltip.propTypes = {
  id: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired,
  place: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
  icon: PropTypes.oneOf(IconName),
  color: PropTypes.string,
  multiline: PropTypes.bool,
  disabled: PropTypes.bool
};
HelpTooltip.displayName = 'HelpTooltip';

var Tooltip = function Tooltip(_ref) {
  var id = _ref.id,
      place = _ref.place,
      trigger = _ref.trigger,
      multiline = _ref.multiline,
      props = objectWithoutPropertiesLoose(_ref, ["id", "place", "trigger", "multiline"]);

  return React.createElement(Fragment, null, trigger, React.createElement(StyledTooltip, _extends_1({}, props, {
    id: id,
    place: place,
    multiline: multiline,
    effect: "solid"
  })));
};

Tooltip.defaultProps = {
  multiline: false,
  place: 'bottom'
};
Tooltip.propTypes = {
  id: PropTypes.string.isRequired,
  trigger: PropTypes.object.isRequired,
  place: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
  multiline: PropTypes.bool
};
Tooltip.displayName = 'Tooltip';

var spanTrigger = React.createElement("span", {
  "data-tip": "Tooltip Example",
  "data-for": "spanTrigger"
}, "Default tooltip");
var iconTrigger = React.createElement(Icon$1, {
  icon: "management",
  "data-tip": "Tooltip <br/> Example",
  "data-for": "iconTrigger"
});
var buttonTrigger = React.createElement(Button$1, {
  icon: "add",
  content: "Example on a button",
  "data-tip": "Tooltip place top",
  "data-for": "buttonTrigger"
});

var TooltipExample = function TooltipExample() {
  return React.createElement("div", null, React.createElement(Header, {
    as: "h1"
  }, "Tooltip"), React.createElement(Divider, null), React.createElement(Grid, {
    columns: 4,
    padded: true
  }, React.createElement(Grid.Row, null), React.createElement(Grid.Row, null, React.createElement(Grid.Column, null, React.createElement(Tooltip, {
    trigger: spanTrigger,
    id: "spanTrigger"
  })), React.createElement(Grid.Column, null, "Multiline text", React.createElement(Tooltip, {
    trigger: iconTrigger,
    id: "iconTrigger",
    multiline: true
  })), React.createElement(Grid.Column, null, React.createElement(Tooltip, {
    trigger: buttonTrigger,
    id: "buttonTrigger",
    place: "top"
  }))), React.createElement(Grid.Row, null), React.createElement(Grid.Row, null)));
};

function _templateObject$s() {
  var data = taggedTemplateLiteralLoose(["\n\t&&&& > .active.item,\n\t&&&& > .active.item:hover {\n\t\tborder-color: ", " !important;\n\t\tcolor: ", " !important;\n\t}\n\n\t&&&& > .item:focus {\n\t\toutline: none !important;\n\t}\n\n\t&&&& > .item:hover {\n\t\tcolor: ", " !important;\n\t}\n\n\t&&&& > a[type='ellipsisItem'] {\n\t\tpointer-events: none;\n\t}\n"]);

  _templateObject$s = function _templateObject() {
    return data;
  };

  return data;
}
var PaginationStyled = styled(function (_ref) {
  var activeColor = _ref.activeColor,
      props = objectWithoutPropertiesLoose(_ref, ["activeColor"]);

  return React.createElement(Pagination, props);
})(_templateObject$s(), function (_ref2) {
  var activeColor = _ref2.activeColor;
  return activeColor;
}, function (_ref3) {
  var activeColor = _ref3.activeColor;
  return activeColor;
}, function (_ref4) {
  var activeColor = _ref4.activeColor;
  return activeColor;
});

var Pagination$1 = function Pagination$$1(_ref5) {
  var activePage = _ref5.activePage,
      totalPages = _ref5.totalPages,
      onPageChange = _ref5.onPageChange,
      activeColor = _ref5.activeColor,
      props = objectWithoutPropertiesLoose(_ref5, ["activePage", "totalPages", "onPageChange", "activeColor"]);

  return React.createElement(PaginationStyled, _extends_1({
    activePage: activePage,
    firstItem: null,
    onPageChange: onPageChange,
    lastItem: null,
    pointing: true,
    secondary: true,
    activeColor: activeColor,
    nextItem: {
      content: React.createElement(Icon$1, {
        icon: "select-right",
        color: theme.colors.activeBlue
      }),
      icon: true
    },
    prevItem: {
      content: React.createElement(Icon$1, {
        icon: "select-left",
        color: theme.colors.activeBlue
      }),
      icon: true
    },
    ellipsisItem: {
      content: React.createElement(Icon, {
        name: "ellipsis horizontal"
      }),
      icon: true
    },
    totalPages: totalPages
  }, props));
};

Pagination$1.defaultProps = {
  activeColor: theme.colors.activeBlue
};
Pagination$1.displayName = 'Pagination';
Pagination$1.propTypes = {
  /** Current page */
  activePage: PropTypes.number.isRequired,

  /** Total number of pages */
  totalPages: PropTypes.number.isRequired,

  /** Page change handler, return page number */
  onPageChange: PropTypes.func.isRequired,

  /** color for the icons and active text */
  activeColor: PropTypes.string
};

// export Foo and Bar as named exports

function _templateObject$t() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tcursor: ", " !important;\n\topacity: 1 !important;\n\n\ti.icon {\n\t\tcolor: ", " !important;\n\t\topacity: 1 !important;\n\t\ttransition: none !important;\n\t}\n\n\t&&& input {\n\t\tpadding: 8px;\n\t\tborder-color: ", ";\n\t\tborder-radius: 4px;\n\t\tcolor: ", ";\n\n\t\t:focus {\n\t\t\tborder-color: ", ";\n\t\t}\n\n\t\t::placeholder {\n\t\t\tcolor: ", ";\n\t\t\tuser-select: none;\n\t\t}\n\t}\n\n\t.label {\n\t\tborder-radius: 0 ", " ", " 0 !important;\n\t}\n\n\t:focus-within ::placeholder {\n\t\tcolor: ", " !important;\n\t}\n\n\t:focus-within i {\n\t\tcolor: ", " !important;\n\t}\n"]);

  _templateObject$t = function _templateObject() {
    return data;
  };

  return data;
}
var Input$1 = styled(Input)(_templateObject$t(), function (_ref) {
  var disabled = _ref.disabled;
  return disabled ? 'not-allowed' : 'pointer';
}, function (_ref2) {
  var theme = _ref2.theme,
      disabled = _ref2.disabled;
  return disabled ? theme.colors.strokeGray : theme.colors.mediumGray;
}, function (_ref3) {
  var theme = _ref3.theme,
      error = _ref3.error;
  return error ? theme.colors.red : theme.colors.strokeGray;
}, function (_ref4) {
  var theme = _ref4.theme,
      disabled = _ref4.disabled;
  return disabled ? theme.colors.strokeGray : theme.colors.darkGray;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.colors.activeBlue;
}, function (_ref6) {
  var theme = _ref6.theme,
      disabled = _ref6.disabled;
  return disabled ? theme.colors.strokeGray : theme.colors.gray;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.input.borderRadius;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.input.borderRadius;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.colors.mediumGray;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.colors.activeBlue;
});
Input$1.displayName = 'Input';

function _templateObject$u() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-block !important;\n\tcolor: ", ";\n\tcursor: pointer;\n\tfloat: right !important;\n\tfont-size: 11px !important;\n\tfont-style: normal !important;\n\tfont-weight: normal !important;\n\tline-height: normal !important;\n\ttext-align: right !important;\n"]);

  _templateObject$u = function _templateObject() {
    return data;
  };

  return data;
}
var LabelLink = styled.div(_templateObject$u(), function (_ref) {
  var theme = _ref.theme,
      disabled = _ref.disabled;
  return disabled ? theme.colors.strokeGray : theme.colors.activeBlue;
});
LabelLink.defaultProps = {
  disabled: false
};
LabelLink.propTypes = {
  /** Bool for the disabled state */
  disabled: PropTypes.bool
};
LabelLink.displayName = 'LabelLink';

function _templateObject$v() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: relative;\n\ttop: -2px;\n\n\tmargin-right: 9px !important;\n\tmargin-bottom: 3px !important;\n\n\tcolor: ", ";\n\tfloat: left !important;\n\tfont-size: 16px !important;\n"]);

  _templateObject$v = function _templateObject() {
    return data;
  };

  return data;
}
var InputIcon = styled(Icon$1)(_templateObject$v(), function (_ref) {
  var theme = _ref.theme,
      disabled = _ref.disabled;
  return disabled ? theme.colors.strokeGray : theme.colors.mediumGray;
});
InputIcon.defaultProps = {
  disabled: false
};
InputIcon.propTypes = {
  /** Bool for the disabled state */
  disabled: PropTypes.bool
};
InputIcon.displayName = 'IconInput';

var ErrorText = function ErrorText(props) {
  return React.createElement(Text, _extends_1({
    size: "sm",
    italic: true,
    color: "red"
  }, props));
};

ErrorText.displayName = 'ErrorText';

var Error$1 = function Error(_ref) {
  var children = _ref.children,
      props = objectWithoutPropertiesLoose(_ref, ["children"]);

  return React.createElement(ErrorText, props, React.createElement("error-label", null, children));
};

Error$1.displayName = 'Error';
Error$1.propTypes = {
  /** child content to the error-label */
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};

function _templateObject$w() {
  var data = taggedTemplateLiteralLoose(["\n\t&& {\n\t\tfont-size: 12px;\n\t}\n\n\t&&& {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbackground-color: ", " !important;\n\t\tcolor: ", ";\n\t\tfont-style: normal;\n\t\tfont-weight: normal;\n\t\tline-height: 14px;\n\t\ttext-align: ", ";\n\t}\n"]);

  _templateObject$w = function _templateObject() {
    return data;
  };

  return data;
}
var ColorLabel = styled(function (_ref) {
  var color = _ref.color,
      props = objectWithoutPropertiesLoose(_ref, ["color"]);

  return React.createElement(Label, props);
})(_templateObject$w(), function (_ref2) {
  var color = _ref2.color,
      theme = _ref2.theme;
  return theme.colors[color] || theme.label.defaultColor;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.white;
}, function (_ref4) {
  var align = _ref4.align;
  return align || 'center';
});
ColorLabel.displayName = 'Label';
ColorLabel.defaultProps = {
  color: undefined,
  align: undefined
};
ColorLabel.propTypes = {
  color: PropTypes.string,
  align: PropTypes.oneOf(['left', 'right'])
};

var LabelText = function LabelText(_ref) {
  var disabled = _ref.disabled,
      props = objectWithoutPropertiesLoose(_ref, ["disabled"]);

  return React.createElement(Text, _extends_1({
    color: disabled ? 'strokeGray' : 'mediumGray',
    bold: true,
    size: "sm"
  }, props));
};

LabelText.defaultProps = {
  disabled: false
};
LabelText.propTypes = {
  disabled: PropTypes.bool
};
LabelText.displayName = 'LabelText';

var Label$1 = function Label$$1(_ref) {
  var children = _ref.children,
      props = objectWithoutPropertiesLoose(_ref, ["children"]);

  return React.createElement(LabelText, props, React.createElement("label", null, children));
};

Label$1.defaultProps = {
  children: ''
};
Label$1.propTypes = {
  /** Children of this component must be a string */
  children: PropTypes.string
};
Label$1.displayName = 'Label';

function _templateObject$x() {
  var data = taggedTemplateLiteralLoose(["\n\theight: 12px;\n\tmargin: 5px 0 11px 0;\n\tcolor: ", ";\n\tfont-size: 12px;\n\tfont-style: italic;\n\tfont-weight: 400;\n"]);

  _templateObject$x = function _templateObject() {
    return data;
  };

  return data;
}
var BottomLabel = styled.div(_templateObject$x(), function (_ref) {
  var theme = _ref.theme,
      disabled = _ref.disabled;
  return disabled ? theme.colors.strokeGray : theme.colors.mediumGray;
});
BottomLabel.defaultProps = {
  disabled: false
};
BottomLabel.propTypes = {
  /** Bool for the disabled state */
  disabled: PropTypes.bool
};
BottomLabel.displayName = 'BottomLabel';

function _templateObject3$6() {
  var data = taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n"]);

  _templateObject3$6 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$9() {
  var data = taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n\tfont-weight: bold;\n"]);

  _templateObject2$9 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$y() {
  var data = taggedTemplateLiteralLoose(["\n\tfont-size: 35px;\n\twhite-space: nowrap;\n"]);

  _templateObject$y = function _templateObject() {
    return data;
  };

  return data;
}

var TicketLabel = function TicketLabel(_ref) {
  var typeTicketLabel = _ref.typeTicketLabel,
      color = _ref.color,
      queueTag = _ref.queueTag,
      ticketNumber = _ref.ticketNumber,
      props = objectWithoutPropertiesLoose(_ref, ["typeTicketLabel", "color", "queueTag", "ticketNumber"]);

  var getQueueTagColor = function getQueueTagColor(type, customColor) {
    if (type === 'normal') return theme.colors.red;
    if (type === 'prioritary') return theme.colors.activeBlue;
    if (!type && customColor) return customColor;
    return theme.colors.black;
  };

  return React.createElement(TicketLabelWrapper, props, React.createElement(TicketQueueTag, {
    queueTagColor: getQueueTagColor(typeTicketLabel, color)
  }, queueTag + " "), React.createElement(TicketNumber, {
    typeTicketLabel: typeTicketLabel,
    color: color
  }, ticketNumber));
};

var TicketLabelWrapper = styled.div(_templateObject$y());
TicketLabelWrapper.displayName = 'TicketLabelWrapper';
var TicketQueueTag = styled.span(_templateObject2$9(), function (_ref2) {
  var queueTagColor = _ref2.queueTagColor;
  return queueTagColor;
});
TicketQueueTag.displayName = 'TicketQueueTag';
var TicketNumber = styled.span(_templateObject3$6(), function (_ref3) {
  var typeTicketLabel = _ref3.typeTicketLabel,
      color = _ref3.color;
  return !typeTicketLabel && color ? color : theme.colors.darkGray;
});
TicketNumber.displayName = 'TicketNumber';
TicketLabel.defaultProps = {
  typeTicketLabel: undefined,
  color: undefined
};
TicketLabel.propTypes = {
  /** string with the type of ticket label */
  typeTicketLabel: PropTypes.oneOf(['normal', 'prioritary']),

  /** string to use in the cases of ticket label color customization */
  color: PropTypes.string,

  /** string with the queue tag content */
  queueTag: PropTypes.string.isRequired,

  /** string with the queue number content */
  ticketNumber: PropTypes.string.isRequired
};

function _templateObject2$a() {
  var data = taggedTemplateLiteralLoose(["\n\tdiv:last-child {\n\t\tmargin-bottom: 0;\n\t}\n"]);

  _templateObject2$a = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$z() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-bottom: 12px;\n"]);

  _templateObject$z = function _templateObject() {
    return data;
  };

  return data;
}

var InputField = function InputField(_ref) {
  var label = _ref.label,
      id = _ref.id,
      hint = _ref.hint,
      error = _ref.error,
      disabled = _ref.disabled,
      labelIcon = _ref.labelIcon,
      rightLabel = _ref.rightLabel,
      rightLabelOnClick = _ref.rightLabelOnClick,
      element = _ref.element,
      props = objectWithoutPropertiesLoose(_ref, ["label", "id", "hint", "error", "disabled", "labelIcon", "rightLabel", "rightLabelOnClick", "element"]);

  var Element = element;
  return React.createElement(InputFieldContainer, null, React.createElement("div", null, labelIcon && React.createElement(InputIcon, {
    disabled: disabled,
    icon: labelIcon
  }), label && React.createElement(Label$1, {
    htmlFor: id,
    disabled: disabled
  }, label), rightLabel && React.createElement(LabelLink, {
    id: id,
    disabled: disabled,
    onClick: !disabled ? rightLabelOnClick : undefined
  }, rightLabel)), React.createElement(Element, _extends_1({
    id: id,
    error: !!error,
    disabled: disabled
  }, props)), hint && React.createElement(BottomLabel, {
    "data-test-id": "hint",
    disabled: disabled
  }, hint), error && React.createElement(ListErrorWrapper, null, [].concat(error).map(function (child, i) {
    return React.createElement(Error$1, {
      key: i
    }, child);
  })));
};

var InputFieldContainer = styled.div(_templateObject$z());
var ListErrorWrapper = styled.div(_templateObject2$a());
InputField.defaultProps = {
  hint: '',
  error: '',
  label: '',
  id: '',
  disabled: false,
  labelIcon: undefined,
  rightLabelOnClick: undefined,
  rightLabel: undefined,
  element: Input$1
};
InputField.propTypes = {
  /** Text message hint */
  hint: PropTypes.string,

  /** Text message error */
  error: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),

  /** Text for the label */
  label: PropTypes.string,

  /** String to the ID attribute */
  id: PropTypes.string,

  /** Bool for the disabled state */
  disabled: PropTypes.bool,

  /** Icon name for the Icon placed on the left of the label */
  labelIcon: PropTypes.oneOf(IconName),

  /** Func to be called when LabelLink is clicked */
  rightLabelOnClick: PropTypes.func,

  /** LabelLink's text */
  rightLabel: PropTypes.string,

  /** Element to be rendered inside the component */
  element: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
};
InputField.displayName = 'InputField';

function _templateObject4$4() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\theight: 34px;\n\tbox-sizing: border-box;\n\tborder: 1px solid #dddddd;\n\tborder-radius: 4px;\n\tcursor: pointer !important;\n\tuser-select: none;\n"]);

  _templateObject4$4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$7() {
  var data = taggedTemplateLiteralLoose(["\n\tmargin-right: 9px !important;\n\tmargin-left: 9px !important;\n\tcolor: ", ";\n\tfloat: left;\n\tfont-size: 16px !important;\n\tline-height: 34px !important;\n\tuser-select: none;\n"]);

  _templateObject3$7 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$b() {
  var data = taggedTemplateLiteralLoose(["\n\toverflow: hidden;\n\twidth: calc(100% - 40px);\n\tcolor: ", ";\n\tfloat: left;\n\tfont-size: 14px;\n\tline-height: 34px;\n\ttext-overflow: ellipsis;\n\tuser-select: none;\n\twhite-space: nowrap;\n"]);

  _templateObject2$b = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$A() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: none;\n"]);

  _templateObject$A = function _templateObject() {
    return data;
  };

  return data;
}

var InputFile =
/*#__PURE__*/
function (_Component) {
  inheritsLoose(InputFile, _Component);

  function InputFile(props) {
    var _this;

    _this = _Component.call(this, props) || this;

    defineProperty(assertThisInitialized(_this), "handleClick", function () {
      _this.fieldField.current.click();
    });

    _this.fieldField = React.createRef();
    _this.handleClick = _this.handleClick.bind(assertThisInitialized(_this));
    return _this;
  }

  var _proto = InputFile.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        inputFileLabel = _this$props.inputFileLabel,
        disabled = _this$props.disabled,
        color = _this$props.color,
        props = objectWithoutPropertiesLoose(_this$props, ["inputFileLabel", "disabled", "color"]);

    return React.createElement(InputFileContainer, {
      onClick: !disabled ? this.handleClick : undefined
    }, React.createElement(InputFileHidden, _extends_1({
      ref: this.fieldField,
      type: "file"
    }, props)), React.createElement(AddIcon, {
      color: color,
      disabled: disabled,
      icon: "add"
    }), React.createElement(Label$2, {
      disabled: disabled
    }, inputFileLabel));
  };

  return InputFile;
}(Component);

var InputFileHidden = styled.input(_templateObject$A());
var Label$2 = styled.span(_templateObject2$b(), function (_ref) {
  var disabled = _ref.disabled;
  return disabled ? theme.colors.strokeGray : theme.colors.black;
});
var AddIcon = styled(Icon$1)(_templateObject3$7(), function (_ref2) {
  var disabled = _ref2.disabled,
      color = _ref2.color;
  return disabled ? theme.colors.strokeGray : color;
});
var InputFileContainer = styled.div(_templateObject4$4());
InputFile.defaultProps = {
  disabled: false,
  color: theme.colors.activeBlue
};
InputFile.propTypes = {
  /** Label to be showed inside the input */
  inputFileLabel: PropTypes.string.isRequired,

  /** Color of the input icon */
  color: PropTypes.string,

  /** Bool of the disabled state */
  disabled: PropTypes.bool
};
InputFile.displayName = 'InputFile';
InputFileHidden.displayName = 'InputFileHidden';
InputFileContainer.displayName = 'InputFileContainer';
AddIcon.displayName = 'AddIcon';
Label$2.displayName = 'Label';

function _templateObject$B() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\n\tpadding: 8px !important;\n\tborder-color: ", " !important;\n\tborder-radius: 4px !important;\n\tcolor: ", ";\n\n\tcursor: ", " !important;\n\n\t&:focus {\n\t\tborder-color: ", " !important;\n\t}\n"]);

  _templateObject$B = function _templateObject() {
    return data;
  };

  return data;
}
var TextArea$1 = styled(function (_ref) {
  var error = _ref.error,
      disabled = _ref.disabled,
      props = objectWithoutPropertiesLoose(_ref, ["error", "disabled"]);

  return React.createElement(TextArea, _extends_1({
    disabled: disabled
  }, props));
})(_templateObject$B(), function (_ref2) {
  var theme = _ref2.theme,
      error = _ref2.error;
  return error ? theme.colors.red : theme.colors.strokeGray;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.darkGray;
}, function (_ref4) {
  var disabled = _ref4.disabled;
  return disabled && 'not-allowed';
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.colors.activeBlue;
});
TextArea$1.defaultProps = {
  disabled: false,
  error: false
};
TextArea$1.propTypes = {
  /** Bool for the disabled state */
  disabled: PropTypes.bool,

  /** Bool for the error state */
  error: PropTypes.bool
};
TextArea$1.displayName = 'TextArea';

function _templateObject$C() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: block !important;\n\twidth: 36px !important;\n\theight: 22px !important;\n\n\t&&&& input ~ label {\n\t\twidth: 36px !important;\n\t\theight: 22px !important;\n\t}\n\n\t&&&& input ~ .box:before {\n\t\twidth: 100% !important;\n\t\theight: 100% !important;\n\t}\n\n\t&&&& input ~ label:before {\n\t\twidth: 100% !important;\n\t\theight: 100% !important;\n\t}\n\n\t&&&& input ~ .box:after {\n\t\ttop: 2px !important;\n\t\tleft: 0.05rem !important;\n\t\twidth: 18px !important;\n\t\theight: 18px !important;\n\t}\n\n\t&&&& input ~ label:after {\n\t\ttop: 2px !important;\n\t\tleft: 0.05rem !important;\n\t\twidth: 18px !important;\n\t\theight: 18px !important;\n\t}\n\n\t&&&& input:checked ~ label:before {\n\t\twidth: 100% !important;\n\t\theight: 100% !important;\n\t\tbackground-color: ", " !important;\n\t}\n\n\t&&&& input:checked ~ .box:before {\n\t\twidth: 100% !important;\n\t\theight: 100% !important;\n\t\tbackground-color: ", " !important;\n\t}\n\n\t&&&& input:focus:checked ~ label:before {\n\t\twidth: 100% !important;\n\t\theight: 100% !important;\n\t\tbackground-color: ", " !important;\n\t}\n\n\t&&&& input:focus:checked ~ .box:before {\n\t\twidth: 100% !important;\n\t\theight: 100% !important;\n\t\tbackground-color: ", " !important;\n\t}\n\n\t&&&& input:checked ~ .box:after {\n\t\ttop: 2px !important;\n\t\tleft: 1.15rem !important;\n\t\twidth: 18px !important;\n\t\theight: 18px !important;\n\t}\n\n\t&&&& input:checked ~ label:after {\n\t\ttop: 2px !important;\n\t\tleft: 1.15rem !important;\n\t\twidth: 18px !important;\n\t\theight: 18px !important;\n\t}\n"]);

  _templateObject$C = function _templateObject() {
    return data;
  };

  return data;
}
var Toggle = styled(function (props) {
  return React.createElement(Checkbox, _extends_1({
    toggle: true
  }, props));
})(_templateObject$C(), function (_ref) {
  var theme = _ref.theme;
  return theme.toggle.color;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.toggle.color;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.toggle.color;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.toggle.color;
});
Toggle.displayName = 'Toggle';

function _templateObject4$5() {
  var data = taggedTemplateLiteralLoose(["\n\theight: ", ";\n\tline-height: ", ";\n\tmargin-left: ", ";\n\tmargin-right: ", ";\n\topacity: ", ";\n\tcursor: default;\n"]);

  _templateObject4$5 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$8() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: absolute !important;\n\theight: 0;\n\twidth: 0;\n\tvisibility: hidden;\n"]);

  _templateObject3$8 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$c() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\tcursor: ", ";\n\twidth: ", "px;\n\theight: ", "px;\n\tline-height: ", "px;\n\tbackground: ", ";\n\tborder-radius: 3px;\n"]);

  _templateObject2$c = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$D() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex;\n\tflex-direction: ", ";\n\talign-items: center;\n\tuser-select: none;\n"]);

  _templateObject$D = function _templateObject() {
    return data;
  };

  return data;
}

var Checkbox$1 =
/*#__PURE__*/
function (_Component) {
  inheritsLoose(Checkbox$$1, _Component);

  function Checkbox$$1(props) {
    var _this;

    _this = _Component.call(this, props) || this;

    defineProperty(assertThisInitialized(_this), "handleClick", function () {
      _this.hiddenCheckbox.click();
    });

    _this.hiddenCheckbox = createRef();
    return _this;
  }

  var _proto = Checkbox$$1.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        id = _this$props.id,
        checked = _this$props.checked,
        color = _this$props.color,
        background = _this$props.background,
        label = _this$props.label,
        labelPosition = _this$props.labelPosition,
        height = _this$props.height,
        width = _this$props.width,
        disabled = _this$props.disabled,
        props = objectWithoutPropertiesLoose(_this$props, ["id", "checked", "color", "background", "label", "labelPosition", "height", "width", "disabled"]);

    return React.createElement(CheckboxWrapper, {
      labelPosition: labelPosition,
      onClick: function onClick(e) {
        return e.stopPropagation();
      }
    }, React.createElement(CheckboxContainer, {
      width: width,
      height: height,
      disabled: disabled,
      background: background
    }, React.createElement(HiddenCheckbox, _extends_1({
      defaultChecked: checked,
      disabled: disabled,
      ref: function ref(checkbox) {
        _this2.hiddenCheckbox = checkbox;
      }
    }, props)), checked ? React.createElement("svg", {
      fillOpacity: disabled ? 0.5 : 1,
      xmlns: "http://www.w3.org/2000/svg",
      width: "100%",
      height: "100%",
      viewBox: "0 0 14 14"
    }, React.createElement("path", {
      d: "M12.4444 0H1.55556C0.7 0 0 0.7 0 1.55556V12.4444C0 13.3 0.7 14 1.55556 14H12.4444C13.3 14 14 13.3 14 12.4444V1.55556C14 0.7 13.3 0 12.4444 0ZM5.44444 10.8889L1.55556 7L2.64444 5.91111L5.44444 8.71111L11.3556 2.8L12.4444 3.88889L5.44444 10.8889Z",
      fill: color ? "" + color : theme.colors.activeBlue
    })) : React.createElement("svg", {
      fillOpacity: disabled ? 0.5 : 1,
      xmlns: "http://www.w3.org/2000/svg",
      width: "100%",
      height: "100%",
      viewBox: "0 0 14 14"
    }, React.createElement("path", {
      d: "M12.4444 0.915033C12.6138 0.915033 12.7742 0.982135 12.896 1.10396C13.0179 1.22581 13.085 1.38618 13.085 1.55556V12.4444C13.085 12.6138 13.0179 12.7742 12.896 12.896C12.7742 13.0179 12.6138 13.085 12.4444 13.085H1.55556C1.38618 13.085 1.22581 13.0179 1.10396 12.896C0.982134 12.7742 0.915033 12.6138 0.915033 12.4444V1.55556C0.915033 1.38618 0.982134 1.22581 1.10396 1.10396C1.22581 0.982135 1.38618 0.915033 1.55556 0.915033H12.4444ZM12.4444 0H1.55556C0.7 0 0 0.7 0 1.55556V12.4444C0 13.3 0.7 14 1.55556 14H12.4444C13.3 14 14 13.3 14 12.4444V1.55556C14 0.7 13.3 0 12.4444 0Z",
      fill: color ? "" + color : theme.colors.darkGray
    }))), label && React.createElement(LabelWrapper, {
      height: height,
      labelPosition: labelPosition,
      disabled: disabled,
      onClick: this.handleClick
    }, React.createElement(Label$1, {
      htmlFor: id
    }, label)));
  };

  return Checkbox$$1;
}(Component);

var CheckboxWrapper = styled.div(_templateObject$D(), function (_ref) {
  var labelPosition = _ref.labelPosition;
  return labelPosition === 'right' ? 'row' : 'row-reverse';
});
var CheckboxContainer = styled.label(_templateObject2$c(), function (_ref2) {
  var disabled = _ref2.disabled;
  return disabled ? 'default' : 'pointer';
}, function (_ref3) {
  var width = _ref3.width;
  return width;
}, function (_ref4) {
  var height = _ref4.height;
  return height;
}, function (_ref5) {
  var height = _ref5.height;
  return height;
}, function (_ref6) {
  var background = _ref6.background;
  return background ? "" + background : 'white';
});
var HiddenCheckbox = styled.input.attrs({
  type: 'checkbox'
})(_templateObject3$8());
var LabelWrapper = styled.div(_templateObject4$5(), function (_ref7) {
  var height = _ref7.height;
  return height + "px";
}, function (_ref8) {
  var height = _ref8.height;
  return height + "px";
}, function (_ref9) {
  var labelPosition = _ref9.labelPosition;
  return labelPosition === 'right' ? '8px' : '0';
}, function (_ref10) {
  var labelPosition = _ref10.labelPosition;
  return labelPosition === 'left' ? '8px' : '0';
}, function (_ref11) {
  var disabled = _ref11.disabled;
  return disabled ? '0.5' : '1';
});
CheckboxWrapper.displayName = 'CheckboxWrapper';
CheckboxContainer.displayName = 'CheckboxContainer';
HiddenCheckbox.displayName = 'HiddenCheckbox';
LabelWrapper.displayName = 'LabelWrapper';
Checkbox$1.displayName = 'Checkbox';
Checkbox$1.defaultProps = {
  height: 14,
  width: 14,
  label: null,
  labelPosition: 'right',
  id: '',
  disabled: false,
  color: undefined,
  background: undefined
};
Checkbox$1.propTypes = {
  /* checkbox height in pixels */
  height: PropTypes.number,

  /* checkbox width in pixels */
  width: PropTypes.number,

  /* boolean to checkbox status */
  checked: PropTypes.bool.isRequired,

  /** customize checkbox color */
  color: PropTypes.string,

  /** css rule string to customize the checkbox background  */
  background: PropTypes.string,

  /** label that will be displayed along with the checkbox */
  label: PropTypes.string,

  /** label position */
  labelPosition: PropTypes.oneOf(['left', 'right']),

  /** label position */
  id: PropTypes.string,

  /** boolean to control the disabled attribute of the input checkbox */
  disabled: PropTypes.bool
};

function _templateObject4$6() {
  var data = taggedTemplateLiteralLoose(["\n\theight: ", ";\n\tline-height: ", ";\n\tmargin-left: ", ";\n\tmargin-right: ", ";\n\topacity: ", ";\n\tcursor: default;\n"]);

  _templateObject4$6 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$9() {
  var data = taggedTemplateLiteralLoose(["\n\theight: 0;\n\twidth: 0;\n\tvisibility: hidden;\n"]);

  _templateObject3$9 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$d() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\tcursor: ", ";\n\twidth: ", "px;\n\theight: ", "px;\n\tline-height: ", "px;\n\tbackground: ", ";\n\tborder-radius: 3px;\n"]);

  _templateObject2$d = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$E() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex;\n\tflex-direction: ", ";\n\talign-items: center;\n\tuser-select: none;\n"]);

  _templateObject$E = function _templateObject() {
    return data;
  };

  return data;
}

var Radio =
/*#__PURE__*/
function (_Component) {
  inheritsLoose(Radio, _Component);

  function Radio(props) {
    var _this;

    _this = _Component.call(this, props) || this;

    defineProperty(assertThisInitialized(_this), "handleClick", function () {
      _this.hiddenRadio.click();
    });

    _this.hiddenRadio = createRef();
    return _this;
  }

  var _proto = Radio.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        id = _this$props.id,
        checked = _this$props.checked,
        color = _this$props.color,
        background = _this$props.background,
        label = _this$props.label,
        labelPosition = _this$props.labelPosition,
        height = _this$props.height,
        width = _this$props.width,
        disabled = _this$props.disabled,
        props = objectWithoutPropertiesLoose(_this$props, ["id", "checked", "color", "background", "label", "labelPosition", "height", "width", "disabled"]);

    return React.createElement(RadioWrapper, _extends_1({
      labelPosition: labelPosition
    }, props), React.createElement(RadioContainer, {
      width: width,
      height: height,
      disabled: disabled,
      background: background
    }, React.createElement(HiddenRadio, _extends_1({
      checked: checked,
      disabled: disabled,
      ref: function ref(radio) {
        _this2.hiddenRadio = radio;
      }
    }, props)), checked ? React.createElement("svg", {
      fillOpacity: disabled ? 0.5 : 1,
      width: "100%",
      height: "100%",
      viewBox: "0 0 14 14",
      fill: "none",
      xmlns: "http://www.w3.org/2000/svg"
    }, React.createElement("path", {
      fillRule: "evenodd",
      clipRule: "evenodd",
      d: "M7 3.5C5.04 3.5 3.5 5.04 3.5 7C3.5 8.96 5.04 10.5 7 10.5C8.96 10.5 10.5 8.96 10.5 7C10.5 5.04 8.96 3.5 7 3.5ZM7 0C3.15 0 0 3.15 0 7C0 10.85 3.15 14 7 14C10.85 14 14 10.85 14 7C14 3.15 10.85 0 7 0ZM7 12.6C3.92 12.6 1.4 10.08 1.4 7C1.4 3.92 3.92 1.4 7 1.4C10.08 1.4 12.6 3.92 12.6 7C12.6 10.08 10.08 12.6 7 12.6Z",
      fill: color ? "" + color : theme.colors.activeBlue
    })) : React.createElement("svg", {
      fillOpacity: disabled ? 0.5 : 1,
      xmlns: "http://www.w3.org/2000/svg",
      width: "100%",
      height: "100%",
      viewBox: "0 0 14 14",
      fill: "none"
    }, React.createElement("path", {
      fillRule: "evenodd",
      clipRule: "evenodd",
      d: "M7 0C3.15 0 0 3.15 0 7C0 10.85 3.15 14 7 14C10.85 14 14 10.85 14 7C14 3.15 10.85 0 7 0ZM7 12.6C3.92 12.6 1.4 10.08 1.4 7C1.4 3.92 3.92 1.4 7 1.4C10.08 1.4 12.6 3.92 12.6 7C12.6 10.08 10.08 12.6 7 12.6Z",
      fill: color ? "" + color : theme.colors.darkGray
    }))), label && React.createElement(LabelWrapper$1, {
      height: height,
      labelPosition: labelPosition,
      disabled: disabled,
      onClick: this.handleClick
    }, React.createElement(Label$1, {
      htmlFor: id
    }, label)));
  };

  return Radio;
}(Component);

var RadioWrapper = styled.div(_templateObject$E(), function (_ref) {
  var labelPosition = _ref.labelPosition;
  return labelPosition === 'right' ? 'row' : 'row-reverse';
});
var RadioContainer = styled.label(_templateObject2$d(), function (_ref2) {
  var disabled = _ref2.disabled;
  return disabled ? 'default' : 'pointer';
}, function (_ref3) {
  var width = _ref3.width;
  return width;
}, function (_ref4) {
  var height = _ref4.height;
  return height;
}, function (_ref5) {
  var height = _ref5.height;
  return height;
}, function (_ref6) {
  var background = _ref6.background;
  return background ? "" + background : 'white';
});
var HiddenRadio = styled.input.attrs({
  type: 'checkbox'
})(_templateObject3$9());
var LabelWrapper$1 = styled.div(_templateObject4$6(), function (_ref7) {
  var height = _ref7.height;
  return height + "px";
}, function (_ref8) {
  var height = _ref8.height;
  return height + "px";
}, function (_ref9) {
  var labelPosition = _ref9.labelPosition;
  return labelPosition === 'right' ? '8px' : '0';
}, function (_ref10) {
  var labelPosition = _ref10.labelPosition;
  return labelPosition === 'left' ? '8px' : '0';
}, function (_ref11) {
  var disabled = _ref11.disabled;
  return disabled ? '0.5' : '1';
});
RadioWrapper.displayName = 'RadioWrapper';
RadioContainer.displayName = 'RadioContainer';
HiddenRadio.displayName = 'HiddenRadio';
LabelWrapper$1.displayName = 'LabelWrapper';
Radio.defaultProps = {
  id: '',
  height: 14,
  width: 14,
  label: null,
  labelPosition: 'left',
  disabled: false,
  color: undefined,
  background: undefined
};
Radio.propTypes = {
  /**  String to the Id attribute */
  id: PropTypes.string,

  /* radio height in pixels */
  height: PropTypes.number,

  /* radio width in pixels */
  width: PropTypes.number,

  /* boolean to radio status */
  checked: PropTypes.bool.isRequired,

  /** customize radio color */
  color: PropTypes.string,

  /** css rule string to customize the radio background  */
  background: PropTypes.string,

  /** label that will be displayed along with the radio */
  label: PropTypes.string,

  /** label position */
  labelPosition: PropTypes.oneOf(['left', 'right']),

  /** onChange function handler */
  onChange: PropTypes.func.isRequired,

  /** boolean to control the disabled attribute of the input checkbox */
  disabled: PropTypes.bool
};

function _templateObject$F() {
  var data = taggedTemplateLiteralLoose(["\n\topacity: 1 !important;\n\n\t& input {\n\t\twidth: 40px !important;\n\t\tpadding: 1px 0 !important;\n\t\tborder: ", " !important;\n\t\tborder-color: ", " !important;\n\t\tbackground: transparent !important;\n\t\tcolor: ", " !important;\n\n\t\tfont-size: 18px;\n\t\ttext-align: center !important;\n\t\ttext-transform: uppercase;\n\n\t\t&:hover {\n\t\t\tborder-color: ", " !important;\n\t\t\tbackground: white !important;\n\t\t}\n\t\t&:focus {\n\t\t\tborder-color: ", " !important;\n\t\t\tbackground: white !important;\n\t\t}\n\t}\n"]);

  _templateObject$F = function _templateObject() {
    return data;
  };

  return data;
}
var TagContainer = styled(function (_ref) {
  var noBorder = _ref.noBorder,
      props = objectWithoutPropertiesLoose(_ref, ["noBorder"]);

  return React.createElement(Input, props);
})(_templateObject$F(), function (_ref2) {
  var noBorder = _ref2.noBorder;
  return noBorder ? 0 : 'auto';
}, function (_ref3) {
  var theme = _ref3.theme,
      error = _ref3.error;
  return error ? theme.colors.red : 'transparent';
}, function (_ref4) {
  var color = _ref4.color;
  return color;
}, function (_ref5) {
  var theme = _ref5.theme,
      error = _ref5.error;
  return error ? theme.colors.red : theme.colors.activeBlue;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.colors.activeBlue;
});

var Tag = function Tag(_ref7) {
  var _onChange = _ref7.onChange,
      props = objectWithoutPropertiesLoose(_ref7, ["onChange"]);

  return React.createElement(TagContainer, _extends_1({
    onChange: function onChange(event) {
      var regex = /[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,\-.\/:;<=>?@\[\]^_`´{|}~]/;
      event.target.value = event.target.value.replace(regex, '').toUpperCase();

      if (_onChange !== undefined) {
        _onChange(event);
      }
    }
  }, props));
};

Tag.defaultProps = {
  noBorder: false,
  maxLength: 2,
  onChange: undefined
};
Tag.propTypes = {
  /** hex value of text color */
  color: PropTypes.string.isRequired,

  /** maximum character text length */
  maxLength: PropTypes.number,

  /** onChange Value Handler */
  onChange: PropTypes.func,

  /** defines if input has border */
  noBorder: PropTypes.bool
};
Tag.displayName = 'Tag';
TagContainer.displayName = 'TagContainer';

function _templateObject2$e() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: 100% !important;\n\tborder-spacing: 0;\n\ttable-layout: fixed;\n\tmargin: 0;\n\tpadding: 0;\n\n\t.first-column {\n\t\twidth: 40px;\n\t\theight: 34px;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tvertical-align: middle;\n\t\tborder: ", ";\n\t\tborder-top-left-radius: 4px !important;\n\t\tborder-bottom-left-radius: 4px !important;\n\t\tborder-right: 0;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.first-column:focus-within {\n\t\tborder-width: 1px 0 1px 1px;\n\t\tborder-style: solid;\n\t\tborder-color: ", ";\n\t}\n\n\t.first-column:focus-within + .second-column {\n\t\tborder-left: ", ";\n\t}\n\n\t.first-column:focus-within + .second-column.errorBlock {\n\t\tborder-left: ", ";\n\t}\n\n\t.first-column.errorBlock:focus-within + .second-column.errorBlock {\n\t\tborder-left: 0 !important;\n\t}\n\n\t.second-column {\n\t\twidth: 40px;\n\t\tmax-width: 34px;\n\t\tmax-height: 34px;\n\t\tvertical-align: middle;\n\t\tborder: ", ";\n\t\tborder-right: 0;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.second-column:focus-within {\n\t\tborder-top: ", ";\n\t\tborder-bottom: ", ";\n\t\tborder-left: ", ";\n\t}\n\n\t.second-column:focus-within + .third-column {\n\t\tborder-left: ", ";\n\t}\n\n\t.second-column:focus-within + .third-column.errorBlock {\n\t\tborder-left: ", ";\n\t}\n\n\t.second-column.errorBlock:focus-within + .third-column.errorBlock {\n\t\tborder-left: 0 !important;\n\t}\n\n\t.third-column {\n\t\tmax-height: 34px;\n\t\tvertical-align: middle;\n\t\tborder: ", ";\n\t\tbox-sizing: border-box;\n\t\tborder-top-right-radius: 4px !important;\n\t\tborder-bottom-right-radius: 4px !important;\n\t}\n\n\t.third-column:focus-within {\n\t\tborder: ", ";\n\t}\n\n\t.first-column.errorBlock {\n\t\tborder: ", ";\n\t}\n\n\t.first-column.errorBlock + .second-column {\n\t\tborder-left: 0;\n\t}\n\n\t.second-column.errorBlock {\n\t\tborder: ", ";\n\t}\n\n\t.second-column.errorBlock + .first-column {\n\t\tborder-right: 0;\n\t}\n\n\t.second-column.errorBlock + .third-column {\n\t\tborder-left: 0;\n\t}\n\n\t.third-column.errorBlock {\n\t\tborder: ", ";\n\t}\n"]);

  _templateObject2$e = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$G() {
  var data = taggedTemplateLiteralLoose(["\n\tmargin-top: 11px;\n\tmargin-bottom: 28px;\n"]);

  _templateObject$G = function _templateObject() {
    return data;
  };

  return data;
}

var InputGroup = function InputGroup(_ref) {
  var id = _ref.id,
      children = _ref.children,
      disabled = _ref.disabled,
      label = _ref.label,
      hint = _ref.hint,
      errors = _ref.errors,
      props = objectWithoutPropertiesLoose(_ref, ["id", "children", "disabled", "label", "hint", "errors"]);

  var getClassName = function getClassName(currentIndex) {
    return ['first-column', 'second-column', 'third-column'][currentIndex];
  };

  var getInputName = function getInputName(currentIndex) {
    return ['colour', 'tag', 'name'][currentIndex];
  };

  var errorsToArray = errors ? Object.keys(errors).reduce(function (acc, element) {
    if (element && Array.isArray(errors[element])) {
      errors[element].map(function (errorItem) {
        return acc.indexOf(errorItem) === -1 && acc.push(errorItem);
      });
    } else if (element && errors[element] && acc.indexOf(errors[element]) === -1) {
      acc.push(errors[element]);
    }

    return acc;
  }, []) : undefined;
  return React.createElement(React.Fragment, null, label && React.createElement(Label$1, {
    htmlFor: id,
    disabled: disabled
  }, label), React.createElement(InputGroupContainer, null, React.createElement(InputGroupTable, props, React.createElement("tbody", null, React.createElement("tr", null, children.map(function (element, index) {
    return React.createElement("td", {
      key: element.props.id,
      className: getClassName(index) + " " + (errors && (Array.isArray(errors[getInputName(index)]) && errors[getInputName(index)].length > 0 || errors[getInputName(index)]) && 'errorBlock')
    }, element);
  })))), !errorsToArray && hint && React.createElement(BottomLabel, {
    "data-test-id": "hint",
    disabled: disabled
  }, hint), errorsToArray && errorsToArray.map(function (element) {
    return React.createElement(Error$1, {
      key: element
    }, element);
  })));
};

var InputGroupContainer = styled.div(_templateObject$G());
var InputGroupTable = styled.table(_templateObject2$e(), function (_ref2) {
  var theme = _ref2.theme;
  return "1px solid " + theme.colors.strokeGray;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.activeBlue;
}, function (_ref4) {
  var theme = _ref4.theme;
  return "1px solid " + theme.colors.activeBlue;
}, function (_ref5) {
  var theme = _ref5.theme;
  return "1px solid " + theme.colors.red + " !important";
}, function (_ref6) {
  var theme = _ref6.theme;
  return "1px solid " + theme.colors.strokeGray;
}, function (_ref7) {
  var theme = _ref7.theme;
  return "1px solid " + theme.colors.activeBlue;
}, function (_ref8) {
  var theme = _ref8.theme;
  return "1px solid " + theme.colors.activeBlue;
}, function (_ref9) {
  var theme = _ref9.theme;
  return "1px solid " + theme.colors.activeBlue;
}, function (_ref10) {
  var theme = _ref10.theme;
  return "1px solid " + theme.colors.activeBlue;
}, function (_ref11) {
  var theme = _ref11.theme;
  return "1px solid " + theme.colors.red;
}, function (_ref12) {
  var theme = _ref12.theme;
  return "1px solid " + theme.colors.strokeGray;
}, function (_ref13) {
  var theme = _ref13.theme;
  return "1px solid " + theme.colors.activeBlue;
}, function (_ref14) {
  var theme = _ref14.theme;
  return "1px solid " + theme.colors.red;
}, function (_ref15) {
  var theme = _ref15.theme;
  return "1px solid " + theme.colors.red;
}, function (_ref16) {
  var theme = _ref16.theme;
  return "1px solid " + theme.colors.red;
});
InputGroup.defaultProps = {
  id: '',
  disabled: false,
  hint: '',
  label: undefined,
  errors: undefined
};
InputGroup.displayName = 'InputGroup';
InputGroup.propTypes = {
  /**  String to the Id attribute */
  id: PropTypes.string,

  /**  Node it always have 3 children */
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,

  /**  Bool to disable */
  disabled: PropTypes.bool,

  /**  String for the hint */
  hint: PropTypes.string,

  /**  String with the label content */
  label: PropTypes.string,

  /**  Shape with the errors content */
  errors: PropTypes.shape({
    tag: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
    name: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
    colour: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)])
  })
};

function _templateObject4$7() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: relative;\n\twidth: 100%;\n\tmargin-top: 8px;\n\tbackground-color: ", ";\n"]);

  _templateObject4$7 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$a() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: ", ";\n\tmax-width: 100%;\n\theight: 3px;\n\tbackground-color: ", ";\n\ttransition: 0.75s;\n"]);

  _templateObject3$a = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$f() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: start;\n\tjustify-content: space-between;\n\tbackground-color: white;\n\tmix-blend-mode: hard-light;\n"]);

  _templateObject2$f = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$H() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: 23.7%;\n\theight: 3px;\n\tbackground-color: gray;\n"]);

  _templateObject$H = function _templateObject() {
    return data;
  };

  return data;
}

var PasswordStrengthMeter =
/*#__PURE__*/
function (_Component) {
  inheritsLoose(PasswordStrengthMeter, _Component);

  function PasswordStrengthMeter() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _Component.call.apply(_Component, [this].concat(args)) || this;

    defineProperty(assertThisInitialized(_this), "getColor", function () {
      var passwordStrengthMeter = theme.passwordStrengthMeter;
      var score = _this.props.score;
      var colorArray = [passwordStrengthMeter.none, passwordStrengthMeter.bad, passwordStrengthMeter.medium, passwordStrengthMeter.good, passwordStrengthMeter.excellent];
      return colorArray[score];
    });

    return _this;
  }

  var _proto = PasswordStrengthMeter.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        score = _this$props.score,
        props = objectWithoutPropertiesLoose(_this$props, ["score"]);

    return React.createElement(PasswordStrengthStyled, props, React.createElement(ProgressBar, {
      backgroundColor: this.getColor,
      score: score
    }), React.createElement(BoxContainer, null, React.createElement(Box, null), React.createElement(Box, null), React.createElement(Box, null), React.createElement(Box, null)));
  };

  return PasswordStrengthMeter;
}(Component);

var Box = styled.div(_templateObject$H());
var BoxContainer = styled.div(_templateObject2$f());
var ProgressBar = styled.div(_templateObject3$a(), function (_ref) {
  var score = _ref.score;
  return score * 25 + "%";
}, function (_ref2) {
  var backgroundColor = _ref2.backgroundColor;
  return backgroundColor;
});
var PasswordStrengthStyled = styled.div(_templateObject4$7(), function (_ref3) {
  var theme$$1 = _ref3.theme;
  return theme$$1.passwordStrengthMeter.none;
});
PasswordStrengthMeter.propTypes = {
  /** Score of the password's strength */
  score: PropTypes.number.isRequired
};
PasswordStrengthMeter.displayName = 'PasswordStrength';
Box.displayName = 'Box';
BoxContainer.displayName = 'BoxContainer';
ProgressBar.displayName = 'ProgressBar';
PasswordStrengthStyled.displayName = 'PasswordStrengthStyled';

function _templateObject$I() {
  var data = taggedTemplateLiteralLoose(["\n\tcursor: pointer !important;\n\tpointer-events: all !important;\n\t&&& {\n\t\tcolor: ", " !important;\n\t}\n"]);

  _templateObject$I = function _templateObject() {
    return data;
  };

  return data;
}

var InputPassword =
/*#__PURE__*/
function (_Component) {
  inheritsLoose(InputPassword, _Component);

  function InputPassword(props) {
    var _this;

    _this = _Component.call(this, props) || this;

    defineProperty(assertThisInitialized(_this), "setType", function (type) {
      _this.setState({
        type: type
      });
    });

    defineProperty(assertThisInitialized(_this), "iconInputElement", function () {
      var type = _this.state.type;
      return React.createElement(IconInput, {
        icon: type === 'password' ? 'preview' : 'eye-closed',
        onClick: function onClick() {
          return _this.setType(type === 'password' ? 'text' : 'password');
        }
      });
    });

    _this.state = {
      type: 'password'
    };
    return _this;
  }

  var _proto = InputPassword.prototype;

  _proto.render = function render() {
    var type = this.state.type;

    var _this$props = this.props,
        score = _this$props.score,
        meter = _this$props.meter,
        props = objectWithoutPropertiesLoose(_this$props, ["score", "meter"]);

    return React.createElement(React.Fragment, null, React.createElement(Input$1, _extends_1({
      type: type,
      icon: this.iconInputElement
    }, props)), meter && React.createElement(PasswordStrengthMeter, {
      score: score
    }));
  };

  return InputPassword;
}(Component);

var IconInput = styled(Icon$1)(_templateObject$I(), function (_ref) {
  var theme = _ref.theme;
  return theme.colors.activeBlue;
});

var scoreValidation = function scoreValidation(props, propName, componentName) {
  if (props.meter && (props[propName] === null || props[propName] === undefined)) {
    return new Error("Failed prop type: '" + propName + "' is set to required when 'meter' is true, in " + componentName + ".");
  }
};

InputPassword.propTypes = {
  /** boolean indicating whether password strength validation should render */
  meter: PropTypes.bool,

  /** custom prop validation function to check the score of the password if meter is true and score defined */
  score: scoreValidation
};
InputPassword.defaultProps = {
  meter: false
};
IconInput.displayName = 'IconInput';
InputPassword.displayName = 'InputPassword';

function _templateObject$J() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\theight: 8px;\n\tpadding: 0;\n\tmargin: 14px 0;\n\tappearance: none;\n\tbackground: ", ";\n\tborder-radius: 8px;\n\tcursor: pointer;\n\toutline: none;\n\tbox-shadow: none;\n\ttransition: background 450ms ease-in;\n\t::-webkit-slider-thumb {\n\t\twidth: 30px;\n\t\theight: 30px;\n\t\tborder: 1px solid ", ";\n\t\tappearance: none;\n\t\tbackground: ", ";\n\t\tborder-radius: 50%;\n\t}\n\t::-moz-range-thumb {\n\t\twidth: 30px;\n\t\theight: 30px;\n\t\tborder: 1px solid ", ";\n\t\tappearance: none;\n\t\tbackground: ", ";\n\t\tborder-radius: 50%;\n\t\toutline: 0;\n\t}\n\t::-moz-focus-outer {\n\t\tborder: 0;\n\t}\n"]);

  _templateObject$J = function _templateObject() {
    return data;
  };

  return data;
}

var InputRange = function InputRange(_ref) {
  var min = _ref.min,
      step = _ref.step,
      max = _ref.max,
      value = _ref.value,
      _onChange = _ref.onChange,
      onUpdate = _ref.onUpdate,
      props = objectWithoutPropertiesLoose(_ref, ["min", "step", "max", "value", "onChange", "onUpdate"]);

  return React.createElement(InputRangeStyled, _extends_1({
    type: "range",
    min: 0,
    step: step / (max - min) * 100,
    max: 100,
    value: (value - min) * 100 / (max - min),
    onChange: function onChange(e) {
      return _onChange(e.target.value / 100 * (max - min) + min);
    },
    onMouseUp: function onMouseUp(e) {
      return onUpdate(e.target.value / 100 * (max - min) + min);
    }
  }, props));
};

var InputRangeStyled = styled.input(_templateObject$J(), function (_ref2) {
  var value = _ref2.value,
      theme = _ref2.theme;
  return theme.inputRange.gradient(value);
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.inputRange.borderColor;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.inputRange.backgroundThumbColor;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.inputRange.borderColor;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.inputRange.backgroundThumbColor;
});
InputRange.defaultProps = {
  min: 0,
  step: 1,
  max: 100
};
InputRange.propTypes = {
  /** minimum value of the input */
  // eslint-disable-next-line consistent-return
  min: function min(props, propName, componentName) {
    var min = props.min,
        max = props.max;

    if (typeof min === 'number' && min > max) {
      return new Error("Invalid prop " + propName + " supplied to " + componentName + ". Validation failed. Please provide a minimum number lower than " + max + ".");
    }

    if (typeof min !== 'number' && typeof min !== 'undefined') {
      return new Error("Invalid prop " + propName + " supplied to " + componentName + ". Validation failed. Please provide a number.");
    }
  },

  /** step value of the input means that the value of the input will increase by the step */
  // eslint-disable-next-line consistent-return
  step: function step(props, propName, componentName) {
    var step = props.step,
        min = props.min,
        max = props.max;

    if (typeof step === 'number' && (step > max || step < min)) {
      return new Error("Invalid prop " + propName + " supplied to " + componentName + ". Validation failed. Please provide a step number between " + min + " and " + max);
    }

    if (typeof step !== 'number' && typeof step !== 'undefined') {
      return new Error("Invalid prop " + propName + " supplied to " + componentName + ". Validation failed. Please provide a number.");
    }
  },

  /** maximum value of the input */
  max: PropTypes.number,

  /** value of the input */
  // eslint-disable-next-line consistent-return,react/require-default-props
  value: function value(props, propName, componentName) {
    var min = props.min,
        max = props.max,
        value = props.value;

    if (typeof value === 'number' && (value < min || value > max)) {
      return new Error("Invalid prop " + propName + " supplied to " + componentName + ". Validation failed. Please provide a value number between " + min + " and " + max + ".");
    }

    if (typeof value !== 'number') {
      return new Error("Invalid prop " + propName + " supplied to " + componentName + ". Validation failed. Please provide a number.");
    }
  },

  /** onChange function handler */
  onChange: PropTypes.func.isRequired,

  /** onUpdate function handler */
  onUpdate: PropTypes.func.isRequired
};
InputRange.displayName = 'InputRange';

function _templateObject4$8() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex;\n\talign-items: center;\n"]);

  _templateObject4$8 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$b() {
  var data = taggedTemplateLiteralLoose(["\n\tmargin-top: 4px !important;\n\tmargin-bottom: 0px !important;\n\ttransform: rotate(180deg);\n"]);

  _templateObject3$b = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$g() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: block !important;\n\tmargin: 0 auto !important;\n\tmargin-bottom: 4px !important;\n\topacity: 1;\n\tcolor: ", " !important;\n\tpointer-events: ", ";\n\t:active {\n\t\tcolor: ", " !important;\n\t}\n"]);

  _templateObject2$g = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$K() {
  var data = taggedTemplateLiteralLoose(["\n\tinput {\n\t\tdisplay: block;\n\t\theight: 20px;\n\t\ttext-align: center !important;\n\t\tpadding: 0 !important;\n\t\tborder: 1px solid\n\t\t\t", " !important;\n\t\tbackground-color: transparent !important;\n\t\tbox-shadow: none !important;\n\t\tcolor: ", " !important;\n\t\tpointer-events: ", ";\n\t\ttransition: none !important;\n\t}\n\n\tinput:hover {\n\t\tbox-sizing: border-box !important;\n\t\tpadding: 0 !important;\n\t\tborder: ", " !important;\n\t\tborder-color: ", " !important;\n\t\tborder-radius: 4px !important;\n\t}\n\n\tinput:focus {\n\t\tbox-sizing: border-box !important;\n\t\tpadding: 0 !important;\n\t\tborder: ", " !important;\n\t\tborder-color: ", " !important;\n\t\tborder-radius: 4px !important;\n\t}\n"]);

  _templateObject$K = function _templateObject() {
    return data;
  };

  return data;
}

var NumberSpinner =
/*#__PURE__*/
function (_Component) {
  inheritsLoose(NumberSpinner, _Component);

  function NumberSpinner() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _Component.call.apply(_Component, [this].concat(args)) || this;

    defineProperty(assertThisInitialized(_this), "getValue", function (event) {
      var _this$props = _this.props,
          max = _this$props.max,
          min = _this$props.min;
      var numValue = Number(event.target.value.replace(/\D/, ''));
      return numValue > max ? max : numValue < min ? min : numValue;
    });

    defineProperty(assertThisInitialized(_this), "stepLimiter", function (newValue) {
      var _this$props2 = _this.props,
          max = _this$props2.max,
          min = _this$props2.min;
      var numValue = Number(newValue);
      return numValue > max ? min : numValue < min ? max : numValue;
    });

    defineProperty(assertThisInitialized(_this), "setValueByStep", function (event, newValue) {
      var _this$props3 = _this.props,
          disabled = _this$props3.disabled,
          onChange = _this$props3.onChange;
      !disabled && onChange(event, _this.stepLimiter(newValue));
    });

    defineProperty(assertThisInitialized(_this), "setValueWheel", function (e) {
      var _this$props4 = _this.props,
          scrollInput = _this$props4.scrollInput,
          value = _this$props4.value;

      if (scrollInput) {
        e.stopPropagation();

        _this.setValueByStep(e, Number(value) + (e.deltaY > 0 ? -1 : 1));
      }
    });

    return _this;
  }

  var _proto = NumberSpinner.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var _this$props5 = this.props,
        _onChange = _this$props5.onChange,
        name = _this$props5.name,
        min = _this$props5.min,
        max = _this$props5.max,
        value = _this$props5.value,
        disabled = _this$props5.disabled,
        readOnly = _this$props5.readOnly,
        error = _this$props5.error,
        scrollInput = _this$props5.scrollInput,
        props = objectWithoutPropertiesLoose(_this$props5, ["onChange", "name", "min", "max", "value", "disabled", "readOnly", "error", "scrollInput"]);

    var size = String(max).length;
    return React.createElement(Container, null, React.createElement("div", null, React.createElement(IconUp, {
      disabled: disabled,
      icon: "select-up",
      onClick: function onClick(e) {
        return _this2.setValueByStep(e, Number(value) + 1);
      }
    }), React.createElement(Input$2, _extends_1({
      readOnly: readOnly,
      name: name,
      error: error,
      disabled: disabled,
      min: min,
      value: value,
      max: max,
      input: React.createElement("input", {
        size: size,
        maxLength: size + 1
      }),
      onWheel: this.setValueWheel,
      onChange: function onChange(e) {
        return _onChange(e, _this2.getValue(e));
      }
    }, props)), React.createElement(IconDown, {
      disabled: disabled,
      icon: "select-up",
      onClick: function onClick(e) {
        return _this2.setValueByStep(e, Number(value) - 1);
      }
    })));
  };

  return NumberSpinner;
}(Component);

NumberSpinner.defaultProps = {
  min: 0,
  max: 10,
  value: 0,
  disabled: false,
  readOnly: false,
  error: false,
  scrollInput: false
};

var minPropValidation = function minPropValidation(props, propName, componentName) {
  var min = props.min,
      max = props.max;

  if (typeof min === 'number' && min > max) {
    return new Error("Invalid prop " + propName + " supplied to " + componentName + ". Validation failed. Please provide a minimum number lower than " + max + ".");
  }

  if (typeof min !== 'number' && typeof min !== 'undefined') {
    return new Error("Invalid prop " + propName + " supplied to " + componentName + ". Validation failed. Please provide a number.");
  }
};

var valuePropValidation = function valuePropValidation(props, propName, componentName) {
  var min = props.min,
      max = props.max,
      value = props.value;

  if (typeof value === 'number' && (value < min || value > max)) {
    return new Error("Invalid prop " + propName + " supplied to " + componentName + ". Validation failed. Please provide a value number between " + min + " and " + max + ".");
  }

  if (typeof value === 'string' && (Number(value) < min || Number(value) > max)) {
    return new Error("Invalid prop " + propName + " supplied to " + componentName + ". Validation failed. Please provide a value number inside the string between " + min + " and " + max + ".");
  }

  if (typeof value !== 'number' && typeof value !== 'string') {
    return new Error("Invalid prop " + propName + " supplied to " + componentName + ". Validation failed. Please provide a number.");
  }
};

NumberSpinner.propTypes = {
  /** onChange function handler */
  onChange: PropTypes.func.isRequired,

  /** name string to the input */
  name: PropTypes.string.isRequired,

  /** boolean to activate or deactivate the scroll input feature */
  scrollInput: PropTypes.bool,

  /** minimum value of the input */
  min: minPropValidation,

  /** maximum value of the input */
  max: PropTypes.number,

  /** value of the input */
  value: valuePropValidation,

  /** boolean to control the disabled attribute of the input */
  disabled: PropTypes.bool,

  /** boolean to control the readOnly attribute of the input */
  readOnly: PropTypes.bool,

  /** boolean to control the error status of the input */
  error: PropTypes.bool
};
var Input$2 = styled(function (_ref) {
  var size = _ref.size,
      maxLength = _ref.maxLength,
      props = objectWithoutPropertiesLoose(_ref, ["size", "maxLength"]);

  return React.createElement(Input, props);
})(_templateObject$K(), function (_ref2) {
  var error = _ref2.error,
      disabled = _ref2.disabled,
      theme = _ref2.theme;
  return error && !disabled ? theme.numberSpinner.errorColor : theme.numberSpinner.borderColor;
}, function (_ref3) {
  var disabled = _ref3.disabled,
      theme = _ref3.theme;
  return disabled ? theme.numberSpinner.disabledColorText : theme.numberSpinner.textColor;
}, function (_ref4) {
  var disabled = _ref4.disabled,
      readOnly = _ref4.readOnly;
  return disabled || readOnly ? 'none' : 'initial';
}, function (_ref5) {
  var disabled = _ref5.disabled,
      readOnly = _ref5.readOnly;
  return disabled || readOnly ? 'none' : '1px solid';
}, function (_ref6) {
  var disabled = _ref6.disabled,
      error = _ref6.error,
      theme = _ref6.theme;
  return disabled && 'none' || error && theme.numberSpinner.errorColor || theme.numberSpinner.hoverColor;
}, function (_ref7) {
  var disabled = _ref7.disabled,
      readOnly = _ref7.readOnly;
  return disabled || readOnly ? 'none' : '1px solid';
}, function (_ref8) {
  var disabled = _ref8.disabled,
      error = _ref8.error,
      theme = _ref8.theme;
  return disabled && 'none' || error && theme.numberSpinner.errorColor || theme.numberSpinner.primaryColor;
});
Input$2.displayName = 'Input';
var IconUp = styled(Icon$1)(_templateObject2$g(), function (_ref9) {
  var disabled = _ref9.disabled,
      theme = _ref9.theme;
  return disabled ? theme.numberSpinner.disabledColor : theme.numberSpinner.primaryColor;
}, function (_ref10) {
  var disabled = _ref10.disabled;
  return disabled ? 'none' : 'initial';
}, function (_ref11) {
  var disabled = _ref11.disabled,
      theme = _ref11.theme;
  return disabled ? theme.numberSpinner.disabledColor : theme.numberSpinner.activeColor;
});
IconUp.displayName = 'IconUp';
var IconDown = styled(IconUp)(_templateObject3$b());
IconDown.displayName = 'IconDown';
var Container = styled.div(_templateObject4$8());
Container.displayName = 'Container';

function areInputsEqual(newInputs, lastInputs) {
  if (newInputs.length !== lastInputs.length) {
    return false;
  }

  for (var i = 0; i < newInputs.length; i++) {
    if (newInputs[i] !== lastInputs[i]) {
      return false;
    }
  }

  return true;
}

function index$2 (resultFn, isEqual) {
  if (isEqual === void 0) {
    isEqual = areInputsEqual;
  }

  var lastThis;
  var lastArgs = [];
  var lastResult;
  var calledOnce = false;

  var result = function result() {
    for (var _len = arguments.length, newArgs = new Array(_len), _key = 0; _key < _len; _key++) {
      newArgs[_key] = arguments[_key];
    }

    if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {
      return lastResult;
    }

    lastResult = resultFn.apply(this, newArgs);
    calledOnce = true;
    lastThis = this;
    lastArgs = newArgs;
    return lastResult;
  };

  return result;
}

function memoize(fn) {
  var cache = {};
  return function (arg) {
    if (cache[arg] === undefined) cache[arg] = fn(arg);
    return cache[arg];
  };
}

var unitlessKeys = {
  animationIterationCount: 1,
  borderImageOutset: 1,
  borderImageSlice: 1,
  borderImageWidth: 1,
  boxFlex: 1,
  boxFlexGroup: 1,
  boxOrdinalGroup: 1,
  columnCount: 1,
  columns: 1,
  flex: 1,
  flexGrow: 1,
  flexPositive: 1,
  flexShrink: 1,
  flexNegative: 1,
  flexOrder: 1,
  gridRow: 1,
  gridRowEnd: 1,
  gridRowSpan: 1,
  gridRowStart: 1,
  gridColumn: 1,
  gridColumnEnd: 1,
  gridColumnSpan: 1,
  gridColumnStart: 1,
  fontWeight: 1,
  lineHeight: 1,
  opacity: 1,
  order: 1,
  orphans: 1,
  tabSize: 1,
  widows: 1,
  zIndex: 1,
  zoom: 1,
  WebkitLineClamp: 1,
  // SVG-related properties
  fillOpacity: 1,
  floodOpacity: 1,
  stopOpacity: 1,
  strokeDasharray: 1,
  strokeDashoffset: 1,
  strokeMiterlimit: 1,
  strokeOpacity: 1,
  strokeWidth: 1
};

/* eslint-disable */
// murmurhash2 via https://github.com/garycourt/murmurhash-js/blob/master/murmurhash2_gc.js
function murmurhash2_32_gc(str) {
  var l = str.length,
      h = l ^ l,
      i = 0,
      k;

  while (l >= 4) {
    k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
    k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0x5bd1e995 & 0xffff) << 16);
    k ^= k >>> 24;
    k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0x5bd1e995 & 0xffff) << 16);
    h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16) ^ k;
    l -= 4;
    ++i;
  }

  switch (l) {
    case 3:
      h ^= (str.charCodeAt(i + 2) & 0xff) << 16;

    case 2:
      h ^= (str.charCodeAt(i + 1) & 0xff) << 8;

    case 1:
      h ^= str.charCodeAt(i) & 0xff;
      h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
  }

  h ^= h >>> 13;
  h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
  h ^= h >>> 15;
  return (h >>> 0).toString(36);
}

function stylis_min (W) {
  function M(d, c, e, h, a) {
    for (var m = 0, b = 0, v = 0, n = 0, q, g, x = 0, K = 0, k, u = k = q = 0, l = 0, r = 0, I = 0, t = 0, B = e.length, J = B - 1, y, f = '', p = '', F = '', G = '', C; l < B;) {
      g = e.charCodeAt(l);
      l === J && 0 !== b + n + v + m && (0 !== b && (g = 47 === b ? 10 : 47), n = v = m = 0, B++, J++);

      if (0 === b + n + v + m) {
        if (l === J && (0 < r && (f = f.replace(N, '')), 0 < f.trim().length)) {
          switch (g) {
            case 32:
            case 9:
            case 59:
            case 13:
            case 10:
              break;

            default:
              f += e.charAt(l);
          }

          g = 59;
        }

        switch (g) {
          case 123:
            f = f.trim();
            q = f.charCodeAt(0);
            k = 1;

            for (t = ++l; l < B;) {
              switch (g = e.charCodeAt(l)) {
                case 123:
                  k++;
                  break;

                case 125:
                  k--;
                  break;

                case 47:
                  switch (g = e.charCodeAt(l + 1)) {
                    case 42:
                    case 47:
                      a: {
                        for (u = l + 1; u < J; ++u) {
                          switch (e.charCodeAt(u)) {
                            case 47:
                              if (42 === g && 42 === e.charCodeAt(u - 1) && l + 2 !== u) {
                                l = u + 1;
                                break a;
                              }

                              break;

                            case 10:
                              if (47 === g) {
                                l = u + 1;
                                break a;
                              }

                          }
                        }

                        l = u;
                      }

                  }

                  break;

                case 91:
                  g++;

                case 40:
                  g++;

                case 34:
                case 39:
                  for (; l++ < J && e.charCodeAt(l) !== g;) {
                  }

              }

              if (0 === k) break;
              l++;
            }

            k = e.substring(t, l);
            0 === q && (q = (f = f.replace(ca, '').trim()).charCodeAt(0));

            switch (q) {
              case 64:
                0 < r && (f = f.replace(N, ''));
                g = f.charCodeAt(1);

                switch (g) {
                  case 100:
                  case 109:
                  case 115:
                  case 45:
                    r = c;
                    break;

                  default:
                    r = O;
                }

                k = M(c, r, k, g, a + 1);
                t = k.length;
                0 < A && (r = X(O, f, I), C = H(3, k, r, c, D, z, t, g, a, h), f = r.join(''), void 0 !== C && 0 === (t = (k = C.trim()).length) && (g = 0, k = ''));
                if (0 < t) switch (g) {
                  case 115:
                    f = f.replace(da, ea);

                  case 100:
                  case 109:
                  case 45:
                    k = f + '{' + k + '}';
                    break;

                  case 107:
                    f = f.replace(fa, '$1 $2');
                    k = f + '{' + k + '}';
                    k = 1 === w || 2 === w && L('@' + k, 3) ? '@-webkit-' + k + '@' + k : '@' + k;
                    break;

                  default:
                    k = f + k, 112 === h && (k = (p += k, ''));
                } else k = '';
                break;

              default:
                k = M(c, X(c, f, I), k, h, a + 1);
            }

            F += k;
            k = I = r = u = q = 0;
            f = '';
            g = e.charCodeAt(++l);
            break;

          case 125:
          case 59:
            f = (0 < r ? f.replace(N, '') : f).trim();
            if (1 < (t = f.length)) switch (0 === u && (q = f.charCodeAt(0), 45 === q || 96 < q && 123 > q) && (t = (f = f.replace(' ', ':')).length), 0 < A && void 0 !== (C = H(1, f, c, d, D, z, p.length, h, a, h)) && 0 === (t = (f = C.trim()).length) && (f = '\x00\x00'), q = f.charCodeAt(0), g = f.charCodeAt(1), q) {
              case 0:
                break;

              case 64:
                if (105 === g || 99 === g) {
                  G += f + e.charAt(l);
                  break;
                }

              default:
                58 !== f.charCodeAt(t - 1) && (p += P(f, q, g, f.charCodeAt(2)));
            }
            I = r = u = q = 0;
            f = '';
            g = e.charCodeAt(++l);
        }
      }

      switch (g) {
        case 13:
        case 10:
          47 === b ? b = 0 : 0 === 1 + q && 107 !== h && 0 < f.length && (r = 1, f += '\x00');
          0 < A * Y && H(0, f, c, d, D, z, p.length, h, a, h);
          z = 1;
          D++;
          break;

        case 59:
        case 125:
          if (0 === b + n + v + m) {
            z++;
            break;
          }

        default:
          z++;
          y = e.charAt(l);

          switch (g) {
            case 9:
            case 32:
              if (0 === n + m + b) switch (x) {
                case 44:
                case 58:
                case 9:
                case 32:
                  y = '';
                  break;

                default:
                  32 !== g && (y = ' ');
              }
              break;

            case 0:
              y = '\\0';
              break;

            case 12:
              y = '\\f';
              break;

            case 11:
              y = '\\v';
              break;

            case 38:
              0 === n + b + m && (r = I = 1, y = '\f' + y);
              break;

            case 108:
              if (0 === n + b + m + E && 0 < u) switch (l - u) {
                case 2:
                  112 === x && 58 === e.charCodeAt(l - 3) && (E = x);

                case 8:
                  111 === K && (E = K);
              }
              break;

            case 58:
              0 === n + b + m && (u = l);
              break;

            case 44:
              0 === b + v + n + m && (r = 1, y += '\r');
              break;

            case 34:
            case 39:
              0 === b && (n = n === g ? 0 : 0 === n ? g : n);
              break;

            case 91:
              0 === n + b + v && m++;
              break;

            case 93:
              0 === n + b + v && m--;
              break;

            case 41:
              0 === n + b + m && v--;
              break;

            case 40:
              if (0 === n + b + m) {
                if (0 === q) switch (2 * x + 3 * K) {
                  case 533:
                    break;

                  default:
                    q = 1;
                }
                v++;
              }

              break;

            case 64:
              0 === b + v + n + m + u + k && (k = 1);
              break;

            case 42:
            case 47:
              if (!(0 < n + m + v)) switch (b) {
                case 0:
                  switch (2 * g + 3 * e.charCodeAt(l + 1)) {
                    case 235:
                      b = 47;
                      break;

                    case 220:
                      t = l, b = 42;
                  }

                  break;

                case 42:
                  47 === g && 42 === x && t + 2 !== l && (33 === e.charCodeAt(t + 2) && (p += e.substring(t, l + 1)), y = '', b = 0);
              }
          }

          0 === b && (f += y);
      }

      K = x;
      x = g;
      l++;
    }

    t = p.length;

    if (0 < t) {
      r = c;
      if (0 < A && (C = H(2, p, r, d, D, z, t, h, a, h), void 0 !== C && 0 === (p = C).length)) return G + p + F;
      p = r.join(',') + '{' + p + '}';

      if (0 !== w * E) {
        2 !== w || L(p, 2) || (E = 0);

        switch (E) {
          case 111:
            p = p.replace(ha, ':-moz-$1') + p;
            break;

          case 112:
            p = p.replace(Q, '::-webkit-input-$1') + p.replace(Q, '::-moz-$1') + p.replace(Q, ':-ms-input-$1') + p;
        }

        E = 0;
      }
    }

    return G + p + F;
  }

  function X(d, c, e) {
    var h = c.trim().split(ia);
    c = h;
    var a = h.length,
        m = d.length;

    switch (m) {
      case 0:
      case 1:
        var b = 0;

        for (d = 0 === m ? '' : d[0] + ' '; b < a; ++b) {
          c[b] = Z(d, c[b], e, m).trim();
        }

        break;

      default:
        var v = b = 0;

        for (c = []; b < a; ++b) {
          for (var n = 0; n < m; ++n) {
            c[v++] = Z(d[n] + ' ', h[b], e, m).trim();
          }
        }

    }

    return c;
  }

  function Z(d, c, e) {
    var h = c.charCodeAt(0);
    33 > h && (h = (c = c.trim()).charCodeAt(0));

    switch (h) {
      case 38:
        return c.replace(F, '$1' + d.trim());

      case 58:
        return d.trim() + c.replace(F, '$1' + d.trim());

      default:
        if (0 < 1 * e && 0 < c.indexOf('\f')) return c.replace(F, (58 === d.charCodeAt(0) ? '' : '$1') + d.trim());
    }

    return d + c;
  }

  function P(d, c, e, h) {
    var a = d + ';',
        m = 2 * c + 3 * e + 4 * h;

    if (944 === m) {
      d = a.indexOf(':', 9) + 1;
      var b = a.substring(d, a.length - 1).trim();
      b = a.substring(0, d).trim() + b + ';';
      return 1 === w || 2 === w && L(b, 1) ? '-webkit-' + b + b : b;
    }

    if (0 === w || 2 === w && !L(a, 1)) return a;

    switch (m) {
      case 1015:
        return 97 === a.charCodeAt(10) ? '-webkit-' + a + a : a;

      case 951:
        return 116 === a.charCodeAt(3) ? '-webkit-' + a + a : a;

      case 963:
        return 110 === a.charCodeAt(5) ? '-webkit-' + a + a : a;

      case 1009:
        if (100 !== a.charCodeAt(4)) break;

      case 969:
      case 942:
        return '-webkit-' + a + a;

      case 978:
        return '-webkit-' + a + '-moz-' + a + a;

      case 1019:
      case 983:
        return '-webkit-' + a + '-moz-' + a + '-ms-' + a + a;

      case 883:
        if (45 === a.charCodeAt(8)) return '-webkit-' + a + a;
        if (0 < a.indexOf('image-set(', 11)) return a.replace(ja, '$1-webkit-$2') + a;
        break;

      case 932:
        if (45 === a.charCodeAt(4)) switch (a.charCodeAt(5)) {
          case 103:
            return '-webkit-box-' + a.replace('-grow', '') + '-webkit-' + a + '-ms-' + a.replace('grow', 'positive') + a;

          case 115:
            return '-webkit-' + a + '-ms-' + a.replace('shrink', 'negative') + a;

          case 98:
            return '-webkit-' + a + '-ms-' + a.replace('basis', 'preferred-size') + a;
        }
        return '-webkit-' + a + '-ms-' + a + a;

      case 964:
        return '-webkit-' + a + '-ms-flex-' + a + a;

      case 1023:
        if (99 !== a.charCodeAt(8)) break;
        b = a.substring(a.indexOf(':', 15)).replace('flex-', '').replace('space-between', 'justify');
        return '-webkit-box-pack' + b + '-webkit-' + a + '-ms-flex-pack' + b + a;

      case 1005:
        return ka.test(a) ? a.replace(aa, ':-webkit-') + a.replace(aa, ':-moz-') + a : a;

      case 1e3:
        b = a.substring(13).trim();
        c = b.indexOf('-') + 1;

        switch (b.charCodeAt(0) + b.charCodeAt(c)) {
          case 226:
            b = a.replace(G, 'tb');
            break;

          case 232:
            b = a.replace(G, 'tb-rl');
            break;

          case 220:
            b = a.replace(G, 'lr');
            break;

          default:
            return a;
        }

        return '-webkit-' + a + '-ms-' + b + a;

      case 1017:
        if (-1 === a.indexOf('sticky', 9)) break;

      case 975:
        c = (a = d).length - 10;
        b = (33 === a.charCodeAt(c) ? a.substring(0, c) : a).substring(d.indexOf(':', 7) + 1).trim();

        switch (m = b.charCodeAt(0) + (b.charCodeAt(7) | 0)) {
          case 203:
            if (111 > b.charCodeAt(8)) break;

          case 115:
            a = a.replace(b, '-webkit-' + b) + ';' + a;
            break;

          case 207:
          case 102:
            a = a.replace(b, '-webkit-' + (102 < m ? 'inline-' : '') + 'box') + ';' + a.replace(b, '-webkit-' + b) + ';' + a.replace(b, '-ms-' + b + 'box') + ';' + a;
        }

        return a + ';';

      case 938:
        if (45 === a.charCodeAt(5)) switch (a.charCodeAt(6)) {
          case 105:
            return b = a.replace('-items', ''), '-webkit-' + a + '-webkit-box-' + b + '-ms-flex-' + b + a;

          case 115:
            return '-webkit-' + a + '-ms-flex-item-' + a.replace(ba, '') + a;

          default:
            return '-webkit-' + a + '-ms-flex-line-pack' + a.replace('align-content', '').replace(ba, '') + a;
        }
        break;

      case 973:
      case 989:
        if (45 !== a.charCodeAt(3) || 122 === a.charCodeAt(4)) break;

      case 931:
      case 953:
        if (!0 === la.test(d)) return 115 === (b = d.substring(d.indexOf(':') + 1)).charCodeAt(0) ? P(d.replace('stretch', 'fill-available'), c, e, h).replace(':fill-available', ':stretch') : a.replace(b, '-webkit-' + b) + a.replace(b, '-moz-' + b.replace('fill-', '')) + a;
        break;

      case 962:
        if (a = '-webkit-' + a + (102 === a.charCodeAt(5) ? '-ms-' + a : '') + a, 211 === e + h && 105 === a.charCodeAt(13) && 0 < a.indexOf('transform', 10)) return a.substring(0, a.indexOf(';', 27) + 1).replace(ma, '$1-webkit-$2') + a;
    }

    return a;
  }

  function L(d, c) {
    var e = d.indexOf(1 === c ? ':' : '{'),
        h = d.substring(0, 3 !== c ? e : 10);
    e = d.substring(e + 1, d.length - 1);
    return R(2 !== c ? h : h.replace(na, '$1'), e, c);
  }

  function ea(d, c) {
    var e = P(c, c.charCodeAt(0), c.charCodeAt(1), c.charCodeAt(2));
    return e !== c + ';' ? e.replace(oa, ' or ($1)').substring(4) : '(' + c + ')';
  }

  function H(d, c, e, h, a, m, b, v, n, q) {
    for (var g = 0, x = c, w; g < A; ++g) {
      switch (w = S[g].call(B, d, x, e, h, a, m, b, v, n, q)) {
        case void 0:
        case !1:
        case !0:
        case null:
          break;

        default:
          x = w;
      }
    }

    if (x !== c) return x;
  }

  function T(d) {
    switch (d) {
      case void 0:
      case null:
        A = S.length = 0;
        break;

      default:
        switch (d.constructor) {
          case Array:
            for (var c = 0, e = d.length; c < e; ++c) {
              T(d[c]);
            }

            break;

          case Function:
            S[A++] = d;
            break;

          case Boolean:
            Y = !!d | 0;
        }

    }

    return T;
  }

  function U(d) {
    d = d.prefix;
    void 0 !== d && (R = null, d ? 'function' !== typeof d ? w = 1 : (w = 2, R = d) : w = 0);
    return U;
  }

  function B(d, c) {
    var e = d;
    33 > e.charCodeAt(0) && (e = e.trim());
    V = e;
    e = [V];

    if (0 < A) {
      var h = H(-1, c, e, e, D, z, 0, 0, 0, 0);
      void 0 !== h && 'string' === typeof h && (c = h);
    }

    var a = M(O, e, c, 0, 0);
    0 < A && (h = H(-2, a, e, e, D, z, a.length, 0, 0, 0), void 0 !== h && (a = h));
    V = '';
    E = 0;
    z = D = 1;
    return a;
  }

  var ca = /^\0+/g,
      N = /[\0\r\f]/g,
      aa = /: */g,
      ka = /zoo|gra/,
      ma = /([,: ])(transform)/g,
      ia = /,\r+?/g,
      F = /([\t\r\n ])*\f?&/g,
      fa = /@(k\w+)\s*(\S*)\s*/,
      Q = /::(place)/g,
      ha = /:(read-only)/g,
      G = /[svh]\w+-[tblr]{2}/,
      da = /\(\s*(.*)\s*\)/g,
      oa = /([\s\S]*?);/g,
      ba = /-self|flex-/g,
      na = /[^]*?(:[rp][el]a[\w-]+)[^]*/,
      la = /stretch|:\s*\w+\-(?:conte|avail)/,
      ja = /([^-])(image-set\()/,
      z = 1,
      D = 1,
      E = 0,
      w = 1,
      O = [],
      S = [],
      A = 0,
      R = null,
      Y = 0,
      V = '';
  B.use = T;
  B.set = U;
  void 0 !== W && U(W);
  return B;
}

var stylisRuleSheet = createCommonjsModule(function (module, exports) {
(function (factory) {
	module['exports'] = factory();
}(function () {

	return function (insertRule) {
		var delimiter = '/*|*/';
		var needle = delimiter+'}';

		function toSheet (block) {
			if (block)
				try {
					insertRule(block + '}');
				} catch (e) {}
		}

		return function ruleSheet (context, content, selectors, parents, line, column, length, ns, depth, at) {
			switch (context) {
				// property
				case 1:
					// @import
					if (depth === 0 && content.charCodeAt(0) === 64)
						return insertRule(content+';'), ''
					break
				// selector
				case 2:
					if (ns === 0)
						return content + delimiter
					break
				// at-rule
				case 3:
					switch (ns) {
						// @font-face, @page
						case 102:
						case 112:
							return insertRule(selectors[0]+content), ''
						default:
							return content + (at === 0 ? delimiter : '')
					}
				case -2:
					content.split(needle).forEach(toSheet);
			}
		}
	}
}));
});

var hyphenateRegex = /[A-Z]|^ms/g;
var processStyleName = memoize(function (styleName) {
  return styleName.replace(hyphenateRegex, '-$&').toLowerCase();
});
var processStyleValue = function processStyleValue(key, value) {
  if (value == null || typeof value === 'boolean') {
    return '';
  }

  if (unitlessKeys[key] !== 1 && key.charCodeAt(1) !== 45 && // custom properties
  !isNaN(value) && value !== 0) {
    return value + 'px';
  }

  return value;
};

if (process.env.NODE_ENV !== 'production') {
  var contentValuePattern = /(attr|calc|counters?|url)\(/;
  var contentValues = ['normal', 'none', 'counter', 'open-quote', 'close-quote', 'no-open-quote', 'no-close-quote', 'initial', 'inherit', 'unset'];
  var oldProcessStyleValue = processStyleValue;

  processStyleValue = function processStyleValue(key, value) {
    if (key === 'content') {
      if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
        console.error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
      }
    }

    return oldProcessStyleValue(key, value);
  };
}

var classnames$1 = function classnames(args) {
  var len = args.length;
  var i = 0;
  var cls = '';

  for (; i < len; i++) {
    var arg = args[i];
    if (arg == null) continue;
    var toAdd = void 0;

    switch (typeof arg) {
      case 'boolean':
        break;

      case 'function':
        if (process.env.NODE_ENV !== 'production') {
          console.error('Passing functions to cx is deprecated and will be removed in the next major version of Emotion.\n' + 'Please call the function before passing it to cx.');
        }

        toAdd = classnames([arg()]);
        break;

      case 'object':
        {
          if (Array.isArray(arg)) {
            toAdd = classnames(arg);
          } else {
            toAdd = '';

            for (var k in arg) {
              if (arg[k] && k) {
                toAdd && (toAdd += ' ');
                toAdd += k;
              }
            }
          }

          break;
        }

      default:
        {
          toAdd = arg;
        }
    }

    if (toAdd) {
      cls && (cls += ' ');
      cls += toAdd;
    }
  }

  return cls;
};
var isBrowser = typeof document !== 'undefined';

/*

high performance StyleSheet for css-in-js systems

- uses multiple style tags behind the scenes for millions of rules
- uses `insertRule` for appending in production for *much* faster performance
- 'polyfills' on server side

// usage

import StyleSheet from 'glamor/lib/sheet'
let styleSheet = new StyleSheet()

styleSheet.inject()
- 'injects' the stylesheet into the page (or into memory if on server)

styleSheet.insert('#box { border: 1px solid red; }')
- appends a css rule into the stylesheet

styleSheet.flush()
- empties the stylesheet of all its contents

*/
// $FlowFixMe
function sheetForTag(tag) {
  if (tag.sheet) {
    // $FlowFixMe
    return tag.sheet;
  } // this weirdness brought to you by firefox


  for (var i = 0; i < document.styleSheets.length; i++) {
    if (document.styleSheets[i].ownerNode === tag) {
      // $FlowFixMe
      return document.styleSheets[i];
    }
  }
}

function makeStyleTag(opts) {
  var tag = document.createElement('style');
  tag.setAttribute('data-emotion', opts.key || '');

  if (opts.nonce !== undefined) {
    tag.setAttribute('nonce', opts.nonce);
  }

  tag.appendChild(document.createTextNode('')) // $FlowFixMe
  ;
  (opts.container !== undefined ? opts.container : document.head).appendChild(tag);
  return tag;
}

var StyleSheet =
/*#__PURE__*/
function () {
  function StyleSheet(options) {
    this.isSpeedy = process.env.NODE_ENV === 'production'; // the big drawback here is that the css won't be editable in devtools

    this.tags = [];
    this.ctr = 0;
    this.opts = options;
  }

  var _proto = StyleSheet.prototype;

  _proto.inject = function inject() {
    if (this.injected) {
      throw new Error('already injected!');
    }

    this.tags[0] = makeStyleTag(this.opts);
    this.injected = true;
  };

  _proto.speedy = function speedy(bool) {
    if (this.ctr !== 0) {
      // cannot change speedy mode after inserting any rule to sheet. Either call speedy(${bool}) earlier in your app, or call flush() before speedy(${bool})
      throw new Error("cannot change speedy now");
    }

    this.isSpeedy = !!bool;
  };

  _proto.insert = function insert(rule, sourceMap) {
    // this is the ultrafast version, works across browsers
    if (this.isSpeedy) {
      var tag = this.tags[this.tags.length - 1];
      var sheet = sheetForTag(tag);

      try {
        sheet.insertRule(rule, sheet.cssRules.length);
      } catch (e) {
        if (process.env.NODE_ENV !== 'production') {
          console.warn('illegal rule', rule); // eslint-disable-line no-console
        }
      }
    } else {
      var _tag = makeStyleTag(this.opts);

      this.tags.push(_tag);

      _tag.appendChild(document.createTextNode(rule + (sourceMap || '')));
    }

    this.ctr++;

    if (this.ctr % 65000 === 0) {
      this.tags.push(makeStyleTag(this.opts));
    }
  };

  _proto.flush = function flush() {
    // $FlowFixMe
    this.tags.forEach(function (tag) {
      return tag.parentNode.removeChild(tag);
    });
    this.tags = [];
    this.ctr = 0; // todo - look for remnants in document.styleSheets

    this.injected = false;
  };

  return StyleSheet;
}();

function createEmotion(context, options) {
  if (context.__SECRET_EMOTION__ !== undefined) {
    return context.__SECRET_EMOTION__;
  }

  if (options === undefined) options = {};
  var key = options.key || 'css';

  if (process.env.NODE_ENV !== 'production') {
    if (/[^a-z-]/.test(key)) {
      throw new Error("Emotion key must only contain lower case alphabetical characters and - but \"" + key + "\" was passed");
    }
  }

  var current;

  function insertRule(rule) {
    current += rule;

    if (isBrowser) {
      sheet.insert(rule, currentSourceMap);
    }
  }

  var insertionPlugin = stylisRuleSheet(insertRule);
  var stylisOptions;

  if (options.prefix !== undefined) {
    stylisOptions = {
      prefix: options.prefix
    };
  }

  var caches = {
    registered: {},
    inserted: {},
    nonce: options.nonce,
    key: key
  };
  var sheet = new StyleSheet(options);

  if (isBrowser) {
    // 🚀
    sheet.inject();
  }

  var stylis = new stylis_min(stylisOptions);
  stylis.use(options.stylisPlugins)(insertionPlugin);
  var currentSourceMap = '';

  function handleInterpolation(interpolation, couldBeSelectorInterpolation) {
    if (interpolation == null) {
      return '';
    }

    switch (typeof interpolation) {
      case 'boolean':
        return '';

      case 'function':
        if (interpolation.__emotion_styles !== undefined) {
          var selector = interpolation.toString();

          if (selector === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
            throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
          }

          return selector;
        }

        if (this === undefined && process.env.NODE_ENV !== 'production') {
          console.error('Interpolating functions in css calls is deprecated and will be removed in the next major version of Emotion.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`");
        }

        return handleInterpolation.call(this, this === undefined ? interpolation() : // $FlowFixMe
        interpolation(this.mergedProps, this.context), couldBeSelectorInterpolation);

      case 'object':
        return createStringFromObject.call(this, interpolation);

      default:
        var cached = caches.registered[interpolation];
        return couldBeSelectorInterpolation === false && cached !== undefined ? cached : interpolation;
    }
  }

  var objectToStringCache = new WeakMap();

  function createStringFromObject(obj) {
    if (objectToStringCache.has(obj)) {
      // $FlowFixMe
      return objectToStringCache.get(obj);
    }

    var string = '';

    if (Array.isArray(obj)) {
      obj.forEach(function (interpolation) {
        string += handleInterpolation.call(this, interpolation, false);
      }, this);
    } else {
      Object.keys(obj).forEach(function (key) {
        if (typeof obj[key] !== 'object') {
          if (caches.registered[obj[key]] !== undefined) {
            string += key + "{" + caches.registered[obj[key]] + "}";
          } else {
            string += processStyleName(key) + ":" + processStyleValue(key, obj[key]) + ";";
          }
        } else {
          if (key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
            throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
          }

          if (Array.isArray(obj[key]) && typeof obj[key][0] === 'string' && caches.registered[obj[key][0]] === undefined) {
            obj[key].forEach(function (value) {
              string += processStyleName(key) + ":" + processStyleValue(key, value) + ";";
            });
          } else {
            string += key + "{" + handleInterpolation.call(this, obj[key], false) + "}";
          }
        }
      }, this);
    }

    objectToStringCache.set(obj, string);
    return string;
  }

  var name;
  var stylesWithLabel;
  var labelPattern = /label:\s*([^\s;\n{]+)\s*;/g;

  var createClassName = function createClassName(styles, identifierName) {
    return murmurhash2_32_gc(styles + identifierName) + identifierName;
  };

  if (process.env.NODE_ENV !== 'production') {
    var oldCreateClassName = createClassName;
    var sourceMappingUrlPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;

    createClassName = function createClassName(styles, identifierName) {
      return oldCreateClassName(styles.replace(sourceMappingUrlPattern, function (sourceMap) {
        currentSourceMap = sourceMap;
        return '';
      }), identifierName);
    };
  }

  var createStyles = function createStyles(strings) {
    var stringMode = true;
    var styles = '';
    var identifierName = '';

    if (strings == null || strings.raw === undefined) {
      stringMode = false;
      styles += handleInterpolation.call(this, strings, false);
    } else {
      styles += strings[0];
    }

    for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      interpolations[_key - 1] = arguments[_key];
    }

    interpolations.forEach(function (interpolation, i) {
      styles += handleInterpolation.call(this, interpolation, styles.charCodeAt(styles.length - 1) === 46 // .
      );

      if (stringMode === true && strings[i + 1] !== undefined) {
        styles += strings[i + 1];
      }
    }, this);
    stylesWithLabel = styles;
    styles = styles.replace(labelPattern, function (match, p1) {
      identifierName += "-" + p1;
      return '';
    });
    name = createClassName(styles, identifierName);
    return styles;
  };

  if (process.env.NODE_ENV !== 'production') {
    var oldStylis = stylis;

    stylis = function stylis(selector, styles) {
      oldStylis(selector, styles);
      currentSourceMap = '';
    };
  }

  function insert(scope, styles) {
    if (caches.inserted[name] === undefined) {
      current = '';
      stylis(scope, styles);
      caches.inserted[name] = current;
    }
  }

  var css$$1 = function css$$1() {
    var styles = createStyles.apply(this, arguments);
    var selector = key + "-" + name;

    if (caches.registered[selector] === undefined) {
      caches.registered[selector] = stylesWithLabel;
    }

    insert("." + selector, styles);
    return selector;
  };

  var keyframes = function keyframes() {
    var styles = createStyles.apply(this, arguments);
    var animation = "animation-" + name;
    insert('', "@keyframes " + animation + "{" + styles + "}");
    return animation;
  };

  var injectGlobal = function injectGlobal() {
    var styles = createStyles.apply(this, arguments);
    insert('', styles);
  };

  function getRegisteredStyles(registeredStyles, classNames) {
    var rawClassName = '';
    classNames.split(' ').forEach(function (className) {
      if (caches.registered[className] !== undefined) {
        registeredStyles.push(className);
      } else {
        rawClassName += className + " ";
      }
    });
    return rawClassName;
  }

  function merge(className, sourceMap) {
    var registeredStyles = [];
    var rawClassName = getRegisteredStyles(registeredStyles, className);

    if (registeredStyles.length < 2) {
      return className;
    }

    return rawClassName + css$$1(registeredStyles, sourceMap);
  }

  function cx() {
    for (var _len2 = arguments.length, classNames = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      classNames[_key2] = arguments[_key2];
    }

    return merge(classnames$1(classNames));
  }

  function hydrateSingleId(id) {
    caches.inserted[id] = true;
  }

  function hydrate(ids) {
    ids.forEach(hydrateSingleId);
  }

  function flush() {
    if (isBrowser) {
      sheet.flush();
      sheet.inject();
    }

    caches.inserted = {};
    caches.registered = {};
  }

  if (isBrowser) {
    var chunks = document.querySelectorAll("[data-emotion-" + key + "]");
    Array.prototype.forEach.call(chunks, function (node) {
      // $FlowFixMe
      sheet.tags[0].parentNode.insertBefore(node, sheet.tags[0]); // $FlowFixMe

      node.getAttribute("data-emotion-" + key).split(' ').forEach(hydrateSingleId);
    });
  }

  var emotion = {
    flush: flush,
    hydrate: hydrate,
    cx: cx,
    merge: merge,
    getRegisteredStyles: getRegisteredStyles,
    injectGlobal: injectGlobal,
    keyframes: keyframes,
    css: css$$1,
    sheet: sheet,
    caches: caches
  };
  context.__SECRET_EMOTION__ = emotion;
  return emotion;
}

var context = typeof global !== 'undefined' ? global : {};

var _createEmotion = createEmotion(context),
    flush = _createEmotion.flush,
    hydrate = _createEmotion.hydrate,
    cx = _createEmotion.cx,
    merge = _createEmotion.merge,
    getRegisteredStyles = _createEmotion.getRegisteredStyles,
    injectGlobal = _createEmotion.injectGlobal,
    keyframes = _createEmotion.keyframes,
    css$1 = _createEmotion.css,
    sheet = _createEmotion.sheet,
    caches = _createEmotion.caches;

var performanceNow = createCommonjsModule(function (module) {
// Generated by CoffeeScript 1.12.2
(function() {
  var getNanoSeconds, hrtime, loadTime, moduleLoadTime, nodeLoadTime, upTime;

  if ((typeof performance !== "undefined" && performance !== null) && performance.now) {
    module.exports = function() {
      return performance.now();
    };
  } else if ((typeof process !== "undefined" && process !== null) && process.hrtime) {
    module.exports = function() {
      return (getNanoSeconds() - nodeLoadTime) / 1e6;
    };
    hrtime = process.hrtime;
    getNanoSeconds = function() {
      var hr;
      hr = hrtime();
      return hr[0] * 1e9 + hr[1];
    };
    moduleLoadTime = getNanoSeconds();
    upTime = process.uptime() * 1e9;
    nodeLoadTime = moduleLoadTime - upTime;
  } else if (Date.now) {
    module.exports = function() {
      return Date.now() - loadTime;
    };
    loadTime = Date.now();
  } else {
    module.exports = function() {
      return new Date().getTime() - loadTime;
    };
    loadTime = new Date().getTime();
  }

}).call(commonjsGlobal);


});

var root = typeof window === 'undefined' ? commonjsGlobal : window
  , vendors = ['moz', 'webkit']
  , suffix = 'AnimationFrame'
  , raf = root['request' + suffix]
  , caf = root['cancel' + suffix] || root['cancelRequest' + suffix];

for(var i = 0; !raf && i < vendors.length; i++) {
  raf = root[vendors[i] + 'Request' + suffix];
  caf = root[vendors[i] + 'Cancel' + suffix]
      || root[vendors[i] + 'CancelRequest' + suffix];
}

// Some versions of FF have rAF but not cAF
if(!raf || !caf) {
  var last = 0
    , id = 0
    , queue = []
    , frameDuration = 1000 / 60;

  raf = function(callback) {
    if(queue.length === 0) {
      var _now = performanceNow()
        , next = Math.max(0, frameDuration - (_now - last));
      last = next + _now;
      setTimeout(function() {
        var cp = queue.slice(0);
        // Clear queue here to prevent
        // callbacks from appending listeners
        // to the current frame's queue
        queue.length = 0;
        for(var i = 0; i < cp.length; i++) {
          if(!cp[i].cancelled) {
            try{
              cp[i].callback(last);
            } catch(e) {
              setTimeout(function() { throw e }, 0);
            }
          }
        }
      }, Math.round(next));
    }
    queue.push({
      handle: ++id,
      callback: callback,
      cancelled: false
    });
    return id
  };

  caf = function(handle) {
    for(var i = 0; i < queue.length; i++) {
      if(queue[i].handle === handle) {
        queue[i].cancelled = true;
      }
    }
  };
}

var raf_1 = function(fn) {
  // Wrap in a new function to prevent
  // `cancel` potentially being assigned
  // to the native rAF function
  return raf.call(root, fn)
};
var cancel = function() {
  caf.apply(root, arguments);
};
var polyfill = function(object) {
  if (!object) {
    object = root;
  }
  object.requestAnimationFrame = raf;
  object.cancelAnimationFrame = caf;
};
raf_1.cancel = cancel;
raf_1.polyfill = polyfill;

var AutosizeInput_1 = createCommonjsModule(function (module, exports) {

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();



var _react2 = _interopRequireDefault(React);



var _propTypes2 = _interopRequireDefault(PropTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var sizerStyle = {
	position: 'absolute',
	top: 0,
	left: 0,
	visibility: 'hidden',
	height: 0,
	overflow: 'scroll',
	whiteSpace: 'pre'
};

var INPUT_PROPS_BLACKLIST = ['extraWidth', 'injectStyles', 'inputClassName', 'inputRef', 'inputStyle', 'minWidth', 'onAutosize', 'placeholderIsMinWidth'];

var cleanInputProps = function cleanInputProps(inputProps) {
	INPUT_PROPS_BLACKLIST.forEach(function (field) {
		return delete inputProps[field];
	});
	return inputProps;
};

var copyStyles = function copyStyles(styles, node) {
	node.style.fontSize = styles.fontSize;
	node.style.fontFamily = styles.fontFamily;
	node.style.fontWeight = styles.fontWeight;
	node.style.fontStyle = styles.fontStyle;
	node.style.letterSpacing = styles.letterSpacing;
	node.style.textTransform = styles.textTransform;
};

var isIE = typeof window !== 'undefined' && window.navigator ? /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent) : false;

var generateId = function generateId() {
	// we only need an auto-generated ID for stylesheet injection, which is only
	// used for IE. so if the browser is not IE, this should return undefined.
	return isIE ? '_' + Math.random().toString(36).substr(2, 12) : undefined;
};

var AutosizeInput = function (_Component) {
	_inherits(AutosizeInput, _Component);

	function AutosizeInput(props) {
		_classCallCheck(this, AutosizeInput);

		var _this = _possibleConstructorReturn(this, (AutosizeInput.__proto__ || Object.getPrototypeOf(AutosizeInput)).call(this, props));

		_this.inputRef = function (el) {
			_this.input = el;
			if (typeof _this.props.inputRef === 'function') {
				_this.props.inputRef(el);
			}
		};

		_this.placeHolderSizerRef = function (el) {
			_this.placeHolderSizer = el;
		};

		_this.sizerRef = function (el) {
			_this.sizer = el;
		};

		_this.state = {
			inputWidth: props.minWidth,
			inputId: props.id || generateId()
		};
		return _this;
	}

	_createClass(AutosizeInput, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
			this.mounted = true;
			this.copyInputStyles();
			this.updateInputWidth();
		}
	}, {
		key: 'componentWillReceiveProps',
		value: function componentWillReceiveProps(nextProps) {
			var id = nextProps.id;

			if (id !== this.props.id) {
				this.setState({ inputId: id || generateId() });
			}
		}
	}, {
		key: 'componentDidUpdate',
		value: function componentDidUpdate(prevProps, prevState) {
			if (prevState.inputWidth !== this.state.inputWidth) {
				if (typeof this.props.onAutosize === 'function') {
					this.props.onAutosize(this.state.inputWidth);
				}
			}
			this.updateInputWidth();
		}
	}, {
		key: 'componentWillUnmount',
		value: function componentWillUnmount() {
			this.mounted = false;
		}
	}, {
		key: 'copyInputStyles',
		value: function copyInputStyles() {
			if (!this.mounted || !window.getComputedStyle) {
				return;
			}
			var inputStyles = this.input && window.getComputedStyle(this.input);
			if (!inputStyles) {
				return;
			}
			copyStyles(inputStyles, this.sizer);
			if (this.placeHolderSizer) {
				copyStyles(inputStyles, this.placeHolderSizer);
			}
		}
	}, {
		key: 'updateInputWidth',
		value: function updateInputWidth() {
			if (!this.mounted || !this.sizer || typeof this.sizer.scrollWidth === 'undefined') {
				return;
			}
			var newInputWidth = void 0;
			if (this.props.placeholder && (!this.props.value || this.props.value && this.props.placeholderIsMinWidth)) {
				newInputWidth = Math.max(this.sizer.scrollWidth, this.placeHolderSizer.scrollWidth) + 2;
			} else {
				newInputWidth = this.sizer.scrollWidth + 2;
			}
			// add extraWidth to the detected width. for number types, this defaults to 16 to allow for the stepper UI
			var extraWidth = this.props.type === 'number' && this.props.extraWidth === undefined ? 16 : parseInt(this.props.extraWidth) || 0;
			newInputWidth += extraWidth;
			if (newInputWidth < this.props.minWidth) {
				newInputWidth = this.props.minWidth;
			}
			if (newInputWidth !== this.state.inputWidth) {
				this.setState({
					inputWidth: newInputWidth
				});
			}
		}
	}, {
		key: 'getInput',
		value: function getInput() {
			return this.input;
		}
	}, {
		key: 'focus',
		value: function focus() {
			this.input.focus();
		}
	}, {
		key: 'blur',
		value: function blur() {
			this.input.blur();
		}
	}, {
		key: 'select',
		value: function select() {
			this.input.select();
		}
	}, {
		key: 'renderStyles',
		value: function renderStyles() {
			// this method injects styles to hide IE's clear indicator, which messes
			// with input size detection. the stylesheet is only injected when the
			// browser is IE, and can also be disabled by the `injectStyles` prop.
			var injectStyles = this.props.injectStyles;

			return isIE && injectStyles ? _react2.default.createElement('style', { dangerouslySetInnerHTML: {
					__html: 'input#' + this.state.inputId + '::-ms-clear {display: none;}'
				} }) : null;
		}
	}, {
		key: 'render',
		value: function render() {
			var sizerValue = [this.props.defaultValue, this.props.value, ''].reduce(function (previousValue, currentValue) {
				if (previousValue !== null && previousValue !== undefined) {
					return previousValue;
				}
				return currentValue;
			});

			var wrapperStyle = _extends({}, this.props.style);
			if (!wrapperStyle.display) wrapperStyle.display = 'inline-block';

			var inputStyle = _extends({
				boxSizing: 'content-box',
				width: this.state.inputWidth + 'px'
			}, this.props.inputStyle);

			var inputProps = _objectWithoutProperties(this.props, []);

			cleanInputProps(inputProps);
			inputProps.className = this.props.inputClassName;
			inputProps.id = this.state.inputId;
			inputProps.style = inputStyle;

			return _react2.default.createElement(
				'div',
				{ className: this.props.className, style: wrapperStyle },
				this.renderStyles(),
				_react2.default.createElement('input', _extends({}, inputProps, { ref: this.inputRef })),
				_react2.default.createElement(
					'div',
					{ ref: this.sizerRef, style: sizerStyle },
					sizerValue
				),
				this.props.placeholder ? _react2.default.createElement(
					'div',
					{ ref: this.placeHolderSizerRef, style: sizerStyle },
					this.props.placeholder
				) : null
			);
		}
	}]);

	return AutosizeInput;
}(React.Component);

AutosizeInput.propTypes = {
	className: _propTypes2.default.string, // className for the outer element
	defaultValue: _propTypes2.default.any, // default field value
	extraWidth: _propTypes2.default.oneOfType([// additional width for input element
	_propTypes2.default.number, _propTypes2.default.string]),
	id: _propTypes2.default.string, // id to use for the input, can be set for consistent snapshots
	injectStyles: _propTypes2.default.bool, // inject the custom stylesheet to hide clear UI, defaults to true
	inputClassName: _propTypes2.default.string, // className for the input element
	inputRef: _propTypes2.default.func, // ref callback for the input element
	inputStyle: _propTypes2.default.object, // css styles for the input element
	minWidth: _propTypes2.default.oneOfType([// minimum width for input element
	_propTypes2.default.number, _propTypes2.default.string]),
	onAutosize: _propTypes2.default.func, // onAutosize handler: function(newWidth) {}
	onChange: _propTypes2.default.func, // onChange handler: function(event) {}
	placeholder: _propTypes2.default.string, // placeholder text
	placeholderIsMinWidth: _propTypes2.default.bool, // don't collapse size to less than the placeholder
	style: _propTypes2.default.object, // css styles for the outer element
	value: _propTypes2.default.any // field value
};
AutosizeInput.defaultProps = {
	minWidth: 1,
	injectStyles: true
};

exports.default = AutosizeInput;
});

var AutosizeInput = unwrapExports(AutosizeInput_1);

var interopRequireDefault = createCommonjsModule(function (module) {
function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {
    "default": obj
  };
}

module.exports = _interopRequireDefault;
});

unwrapExports(interopRequireDefault);

var hasClass_1 = createCommonjsModule(function (module, exports) {

exports.__esModule = true;
exports.default = hasClass;

function hasClass(element, className) {
  if (element.classList) return !!className && element.classList.contains(className);else return (" " + (element.className.baseVal || element.className) + " ").indexOf(" " + className + " ") !== -1;
}

module.exports = exports["default"];
});

unwrapExports(hasClass_1);

var addClass_1 = createCommonjsModule(function (module, exports) {



exports.__esModule = true;
exports.default = addClass;

var _hasClass = interopRequireDefault(hasClass_1);

function addClass(element, className) {
  if (element.classList) element.classList.add(className);else if (!(0, _hasClass.default)(element, className)) if (typeof element.className === 'string') element.className = element.className + ' ' + className;else element.setAttribute('class', (element.className && element.className.baseVal || '') + ' ' + className);
}

module.exports = exports["default"];
});

unwrapExports(addClass_1);

function replaceClassName(origClass, classToRemove) {
  return origClass.replace(new RegExp('(^|\\s)' + classToRemove + '(?:\\s|$)', 'g'), '$1').replace(/\s+/g, ' ').replace(/^\s*|\s*$/g, '');
}

var removeClass = function removeClass(element, className) {
  if (element.classList) element.classList.remove(className);else if (typeof element.className === 'string') element.className = replaceClassName(element.className, className);else element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));
};

/**
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

function componentWillMount() {
  // Call this.constructor.gDSFP to support sub-classes.
  var state = this.constructor.getDerivedStateFromProps(this.props, this.state);
  if (state !== null && state !== undefined) {
    this.setState(state);
  }
}

function componentWillReceiveProps(nextProps) {
  // Call this.constructor.gDSFP to support sub-classes.
  // Use the setState() updater to ensure state isn't stale in certain edge cases.
  function updater(prevState) {
    var state = this.constructor.getDerivedStateFromProps(nextProps, prevState);
    return state !== null && state !== undefined ? state : null;
  }
  // Binding "this" is important for shallow renderer support.
  this.setState(updater.bind(this));
}

function componentWillUpdate(nextProps, nextState) {
  try {
    var prevProps = this.props;
    var prevState = this.state;
    this.props = nextProps;
    this.state = nextState;
    this.__reactInternalSnapshotFlag = true;
    this.__reactInternalSnapshot = this.getSnapshotBeforeUpdate(
      prevProps,
      prevState
    );
  } finally {
    this.props = prevProps;
    this.state = prevState;
  }
}

// React may warn about cWM/cWRP/cWU methods being deprecated.
// Add a flag to suppress these warnings for this special case.
componentWillMount.__suppressDeprecationWarning = true;
componentWillReceiveProps.__suppressDeprecationWarning = true;
componentWillUpdate.__suppressDeprecationWarning = true;

function polyfill$1(Component$$1) {
  var prototype = Component$$1.prototype;

  if (!prototype || !prototype.isReactComponent) {
    throw new Error('Can only polyfill class components');
  }

  if (
    typeof Component$$1.getDerivedStateFromProps !== 'function' &&
    typeof prototype.getSnapshotBeforeUpdate !== 'function'
  ) {
    return Component$$1;
  }

  // If new component APIs are defined, "unsafe" lifecycles won't be called.
  // Error if any of these lifecycles are present,
  // Because they would work differently between older and newer (16.3+) versions of React.
  var foundWillMountName = null;
  var foundWillReceivePropsName = null;
  var foundWillUpdateName = null;
  if (typeof prototype.componentWillMount === 'function') {
    foundWillMountName = 'componentWillMount';
  } else if (typeof prototype.UNSAFE_componentWillMount === 'function') {
    foundWillMountName = 'UNSAFE_componentWillMount';
  }
  if (typeof prototype.componentWillReceiveProps === 'function') {
    foundWillReceivePropsName = 'componentWillReceiveProps';
  } else if (typeof prototype.UNSAFE_componentWillReceiveProps === 'function') {
    foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
  }
  if (typeof prototype.componentWillUpdate === 'function') {
    foundWillUpdateName = 'componentWillUpdate';
  } else if (typeof prototype.UNSAFE_componentWillUpdate === 'function') {
    foundWillUpdateName = 'UNSAFE_componentWillUpdate';
  }
  if (
    foundWillMountName !== null ||
    foundWillReceivePropsName !== null ||
    foundWillUpdateName !== null
  ) {
    var componentName = Component$$1.displayName || Component$$1.name;
    var newApiName =
      typeof Component$$1.getDerivedStateFromProps === 'function'
        ? 'getDerivedStateFromProps()'
        : 'getSnapshotBeforeUpdate()';

    throw Error(
      'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
        componentName +
        ' uses ' +
        newApiName +
        ' but also contains the following legacy lifecycles:' +
        (foundWillMountName !== null ? '\n  ' + foundWillMountName : '') +
        (foundWillReceivePropsName !== null
          ? '\n  ' + foundWillReceivePropsName
          : '') +
        (foundWillUpdateName !== null ? '\n  ' + foundWillUpdateName : '') +
        '\n\nThe above lifecycles should be removed. Learn more about this warning here:\n' +
        'https://fb.me/react-async-component-lifecycle-hooks'
    );
  }

  // React <= 16.2 does not support static getDerivedStateFromProps.
  // As a workaround, use cWM and cWRP to invoke the new static lifecycle.
  // Newer versions of React will ignore these lifecycles if gDSFP exists.
  if (typeof Component$$1.getDerivedStateFromProps === 'function') {
    prototype.componentWillMount = componentWillMount;
    prototype.componentWillReceiveProps = componentWillReceiveProps;
  }

  // React <= 16.2 does not support getSnapshotBeforeUpdate.
  // As a workaround, use cWU to invoke the new lifecycle.
  // Newer versions of React will ignore that lifecycle if gSBU exists.
  if (typeof prototype.getSnapshotBeforeUpdate === 'function') {
    if (typeof prototype.componentDidUpdate !== 'function') {
      throw new Error(
        'Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype'
      );
    }

    prototype.componentWillUpdate = componentWillUpdate;

    var componentDidUpdate = prototype.componentDidUpdate;

    prototype.componentDidUpdate = function componentDidUpdatePolyfill(
      prevProps,
      prevState,
      maybeSnapshot
    ) {
      // 16.3+ will not execute our will-update method;
      // It will pass a snapshot value to did-update though.
      // Older versions will require our polyfilled will-update value.
      // We need to handle both cases, but can't just check for the presence of "maybeSnapshot",
      // Because for <= 15.x versions this might be a "prevContext" object.
      // We also can't just check "__reactInternalSnapshot",
      // Because get-snapshot might return a falsy value.
      // So check for the explicit __reactInternalSnapshotFlag flag to determine behavior.
      var snapshot = this.__reactInternalSnapshotFlag
        ? this.__reactInternalSnapshot
        : maybeSnapshot;

      componentDidUpdate.call(this, prevProps, prevState, snapshot);
    };
  }

  return Component$$1;
}

var reactLifecyclesCompat_es = /*#__PURE__*/Object.freeze({
  polyfill: polyfill$1
});

var PropTypes$1 = createCommonjsModule(function (module, exports) {

exports.__esModule = true;
exports.classNamesShape = exports.timeoutsShape = void 0;

var _propTypes = _interopRequireDefault(PropTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var timeoutsShape = process.env.NODE_ENV !== 'production' ? _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
  enter: _propTypes.default.number,
  exit: _propTypes.default.number,
  appear: _propTypes.default.number
}).isRequired]) : null;
exports.timeoutsShape = timeoutsShape;
var classNamesShape = process.env.NODE_ENV !== 'production' ? _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
  enter: _propTypes.default.string,
  exit: _propTypes.default.string,
  active: _propTypes.default.string
}), _propTypes.default.shape({
  enter: _propTypes.default.string,
  enterDone: _propTypes.default.string,
  enterActive: _propTypes.default.string,
  exit: _propTypes.default.string,
  exitDone: _propTypes.default.string,
  exitActive: _propTypes.default.string
})]) : null;
exports.classNamesShape = classNamesShape;
});

unwrapExports(PropTypes$1);
var PropTypes_1 = PropTypes$1.classNamesShape;
var PropTypes_2 = PropTypes$1.timeoutsShape;

var Transition_1 = createCommonjsModule(function (module, exports) {

exports.__esModule = true;
exports.default = exports.EXITING = exports.ENTERED = exports.ENTERING = exports.EXITED = exports.UNMOUNTED = void 0;

var PropTypes$$1 = _interopRequireWildcard(PropTypes);

var _react = _interopRequireDefault(React);

var _reactDom = _interopRequireDefault(reactDom);





function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var UNMOUNTED = 'unmounted';
exports.UNMOUNTED = UNMOUNTED;
var EXITED = 'exited';
exports.EXITED = EXITED;
var ENTERING = 'entering';
exports.ENTERING = ENTERING;
var ENTERED = 'entered';
exports.ENTERED = ENTERED;
var EXITING = 'exiting';
/**
 * The Transition component lets you describe a transition from one component
 * state to another _over time_ with a simple declarative API. Most commonly
 * it's used to animate the mounting and unmounting of a component, but can also
 * be used to describe in-place transition states as well.
 *
 * ---
 *
 * **Note**: `Transition` is a platform-agnostic base component. If you're using
 * transitions in CSS, you'll probably want to use
 * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)
 * instead. It inherits all the features of `Transition`, but contains
 * additional features necessary to play nice with CSS transitions (hence the
 * name of the component).
 *
 * ---
 *
 * By default the `Transition` component does not alter the behavior of the
 * component it renders, it only tracks "enter" and "exit" states for the
 * components. It's up to you to give meaning and effect to those states. For
 * example we can add styles to a component when it enters or exits:
 *
 * ```jsx
 * import { Transition } from 'react-transition-group';
 *
 * const duration = 300;
 *
 * const defaultStyle = {
 *   transition: `opacity ${duration}ms ease-in-out`,
 *   opacity: 0,
 * }
 *
 * const transitionStyles = {
 *   entering: { opacity: 0 },
 *   entered:  { opacity: 1 },
 * };
 *
 * const Fade = ({ in: inProp }) => (
 *   <Transition in={inProp} timeout={duration}>
 *     {state => (
 *       <div style={{
 *         ...defaultStyle,
 *         ...transitionStyles[state]
 *       }}>
 *         I'm a fade Transition!
 *       </div>
 *     )}
 *   </Transition>
 * );
 * ```
 *
 * There are 4 main states a Transition can be in:
 *  - `'entering'`
 *  - `'entered'`
 *  - `'exiting'`
 *  - `'exited'`
 *
 * Transition state is toggled via the `in` prop. When `true` the component
 * begins the "Enter" stage. During this stage, the component will shift from
 * its current transition state, to `'entering'` for the duration of the
 * transition and then to the `'entered'` stage once it's complete. Let's take
 * the following example (we'll use the
 * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):
 *
 * ```jsx
 * function App() {
 *   const [inProp, setInProp] = useState(false);
 *   return (
 *     <div>
 *       <Transition in={inProp} timeout={500}>
 *         {state => (
 *           // ...
 *         )}
 *       </Transition>
 *       <button onClick={() => setInProp(true)}>
 *         Click to Enter
 *       </button>
 *     </div>
 *   );
 * }
 * ```
 *
 * When the button is clicked the component will shift to the `'entering'` state
 * and stay there for 500ms (the value of `timeout`) before it finally switches
 * to `'entered'`.
 *
 * When `in` is `false` the same thing happens except the state moves from
 * `'exiting'` to `'exited'`.
 */

exports.EXITING = EXITING;

var Transition =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(Transition, _React$Component);

  function Transition(props, context) {
    var _this;

    _this = _React$Component.call(this, props, context) || this;
    var parentGroup = context.transitionGroup; // In the context of a TransitionGroup all enters are really appears

    var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
    var initialStatus;
    _this.appearStatus = null;

    if (props.in) {
      if (appear) {
        initialStatus = EXITED;
        _this.appearStatus = ENTERING;
      } else {
        initialStatus = ENTERED;
      }
    } else {
      if (props.unmountOnExit || props.mountOnEnter) {
        initialStatus = UNMOUNTED;
      } else {
        initialStatus = EXITED;
      }
    }

    _this.state = {
      status: initialStatus
    };
    _this.nextCallback = null;
    return _this;
  }

  var _proto = Transition.prototype;

  _proto.getChildContext = function getChildContext() {
    return {
      transitionGroup: null // allows for nested Transitions

    };
  };

  Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
    var nextIn = _ref.in;

    if (nextIn && prevState.status === UNMOUNTED) {
      return {
        status: EXITED
      };
    }

    return null;
  }; // getSnapshotBeforeUpdate(prevProps) {
  //   let nextStatus = null
  //   if (prevProps !== this.props) {
  //     const { status } = this.state
  //     if (this.props.in) {
  //       if (status !== ENTERING && status !== ENTERED) {
  //         nextStatus = ENTERING
  //       }
  //     } else {
  //       if (status === ENTERING || status === ENTERED) {
  //         nextStatus = EXITING
  //       }
  //     }
  //   }
  //   return { nextStatus }
  // }


  _proto.componentDidMount = function componentDidMount() {
    this.updateStatus(true, this.appearStatus);
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    var nextStatus = null;

    if (prevProps !== this.props) {
      var status = this.state.status;

      if (this.props.in) {
        if (status !== ENTERING && status !== ENTERED) {
          nextStatus = ENTERING;
        }
      } else {
        if (status === ENTERING || status === ENTERED) {
          nextStatus = EXITING;
        }
      }
    }

    this.updateStatus(false, nextStatus);
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this.cancelNextCallback();
  };

  _proto.getTimeouts = function getTimeouts() {
    var timeout = this.props.timeout;
    var exit, enter, appear;
    exit = enter = appear = timeout;

    if (timeout != null && typeof timeout !== 'number') {
      exit = timeout.exit;
      enter = timeout.enter; // TODO: remove fallback for next major

      appear = timeout.appear !== undefined ? timeout.appear : enter;
    }

    return {
      exit: exit,
      enter: enter,
      appear: appear
    };
  };

  _proto.updateStatus = function updateStatus(mounting, nextStatus) {
    if (mounting === void 0) {
      mounting = false;
    }

    if (nextStatus !== null) {
      // nextStatus will always be ENTERING or EXITING.
      this.cancelNextCallback();

      var node = _reactDom.default.findDOMNode(this);

      if (nextStatus === ENTERING) {
        this.performEnter(node, mounting);
      } else {
        this.performExit(node);
      }
    } else if (this.props.unmountOnExit && this.state.status === EXITED) {
      this.setState({
        status: UNMOUNTED
      });
    }
  };

  _proto.performEnter = function performEnter(node, mounting) {
    var _this2 = this;

    var enter = this.props.enter;
    var appearing = this.context.transitionGroup ? this.context.transitionGroup.isMounting : mounting;
    var timeouts = this.getTimeouts();
    var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
    // if we are mounting and running this it means appear _must_ be set

    if (!mounting && !enter) {
      this.safeSetState({
        status: ENTERED
      }, function () {
        _this2.props.onEntered(node);
      });
      return;
    }

    this.props.onEnter(node, appearing);
    this.safeSetState({
      status: ENTERING
    }, function () {
      _this2.props.onEntering(node, appearing);

      _this2.onTransitionEnd(node, enterTimeout, function () {
        _this2.safeSetState({
          status: ENTERED
        }, function () {
          _this2.props.onEntered(node, appearing);
        });
      });
    });
  };

  _proto.performExit = function performExit(node) {
    var _this3 = this;

    var exit = this.props.exit;
    var timeouts = this.getTimeouts(); // no exit animation skip right to EXITED

    if (!exit) {
      this.safeSetState({
        status: EXITED
      }, function () {
        _this3.props.onExited(node);
      });
      return;
    }

    this.props.onExit(node);
    this.safeSetState({
      status: EXITING
    }, function () {
      _this3.props.onExiting(node);

      _this3.onTransitionEnd(node, timeouts.exit, function () {
        _this3.safeSetState({
          status: EXITED
        }, function () {
          _this3.props.onExited(node);
        });
      });
    });
  };

  _proto.cancelNextCallback = function cancelNextCallback() {
    if (this.nextCallback !== null) {
      this.nextCallback.cancel();
      this.nextCallback = null;
    }
  };

  _proto.safeSetState = function safeSetState(nextState, callback) {
    // This shouldn't be necessary, but there are weird race conditions with
    // setState callbacks and unmounting in testing, so always make sure that
    // we can cancel any pending setState callbacks after we unmount.
    callback = this.setNextCallback(callback);
    this.setState(nextState, callback);
  };

  _proto.setNextCallback = function setNextCallback(callback) {
    var _this4 = this;

    var active = true;

    this.nextCallback = function (event) {
      if (active) {
        active = false;
        _this4.nextCallback = null;
        callback(event);
      }
    };

    this.nextCallback.cancel = function () {
      active = false;
    };

    return this.nextCallback;
  };

  _proto.onTransitionEnd = function onTransitionEnd(node, timeout, handler) {
    this.setNextCallback(handler);
    var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;

    if (!node || doesNotHaveTimeoutOrListener) {
      setTimeout(this.nextCallback, 0);
      return;
    }

    if (this.props.addEndListener) {
      this.props.addEndListener(node, this.nextCallback);
    }

    if (timeout != null) {
      setTimeout(this.nextCallback, timeout);
    }
  };

  _proto.render = function render() {
    var status = this.state.status;

    if (status === UNMOUNTED) {
      return null;
    }

    var _this$props = this.props,
        children = _this$props.children,
        childProps = _objectWithoutPropertiesLoose(_this$props, ["children"]); // filter props for Transtition


    delete childProps.in;
    delete childProps.mountOnEnter;
    delete childProps.unmountOnExit;
    delete childProps.appear;
    delete childProps.enter;
    delete childProps.exit;
    delete childProps.timeout;
    delete childProps.addEndListener;
    delete childProps.onEnter;
    delete childProps.onEntering;
    delete childProps.onEntered;
    delete childProps.onExit;
    delete childProps.onExiting;
    delete childProps.onExited;

    if (typeof children === 'function') {
      return children(status, childProps);
    }

    var child = _react.default.Children.only(children);

    return _react.default.cloneElement(child, childProps);
  };

  return Transition;
}(_react.default.Component);

Transition.contextTypes = {
  transitionGroup: PropTypes$$1.object
};
Transition.childContextTypes = {
  transitionGroup: function transitionGroup() {}
};
Transition.propTypes = process.env.NODE_ENV !== "production" ? {
  /**
   * A `function` child can be used instead of a React element. This function is
   * called with the current transition status (`'entering'`, `'entered'`,
   * `'exiting'`, `'exited'`, `'unmounted'`), which can be used to apply context
   * specific props to a component.
   *
   * ```jsx
   * <Transition in={this.state.in} timeout={150}>
   *   {state => (
   *     <MyComponent className={`fade fade-${state}`} />
   *   )}
   * </Transition>
   * ```
   */
  children: PropTypes$$1.oneOfType([PropTypes$$1.func.isRequired, PropTypes$$1.element.isRequired]).isRequired,

  /**
   * Show the component; triggers the enter or exit states
   */
  in: PropTypes$$1.bool,

  /**
   * By default the child component is mounted immediately along with
   * the parent `Transition` component. If you want to "lazy mount" the component on the
   * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay
   * mounted, even on "exited", unless you also specify `unmountOnExit`.
   */
  mountOnEnter: PropTypes$$1.bool,

  /**
   * By default the child component stays mounted after it reaches the `'exited'` state.
   * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.
   */
  unmountOnExit: PropTypes$$1.bool,

  /**
   * Normally a component is not transitioned if it is shown when the `<Transition>` component mounts.
   * If you want to transition on the first mount set `appear` to `true`, and the
   * component will transition in as soon as the `<Transition>` mounts.
   *
   * > Note: there are no specific "appear" states. `appear` only adds an additional `enter` transition.
   */
  appear: PropTypes$$1.bool,

  /**
   * Enable or disable enter transitions.
   */
  enter: PropTypes$$1.bool,

  /**
   * Enable or disable exit transitions.
   */
  exit: PropTypes$$1.bool,

  /**
   * The duration of the transition, in milliseconds.
   * Required unless `addEndListener` is provided.
   *
   * You may specify a single timeout for all transitions:
   *
   * ```jsx
   * timeout={500}
   * ```
   *
   * or individually:
   *
   * ```jsx
   * timeout={{
   *  appear: 500,
   *  enter: 300,
   *  exit: 500,
   * }}
   * ```
   *
   * - `appear` defaults to the value of `enter`
   * - `enter` defaults to `0`
   * - `exit` defaults to `0`
   *
   * @type {number | { enter?: number, exit?: number, appear?: number }}
   */
  timeout: function timeout(props) {
    var pt = PropTypes$1.timeoutsShape;
    if (!props.addEndListener) pt = pt.isRequired;

    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      args[_key - 1] = arguments[_key];
    }

    return pt.apply(void 0, [props].concat(args));
  },

  /**
   * Add a custom transition end trigger. Called with the transitioning
   * DOM node and a `done` callback. Allows for more fine grained transition end
   * logic. **Note:** Timeouts are still used as a fallback if provided.
   *
   * ```jsx
   * addEndListener={(node, done) => {
   *   // use the css transitionend event to mark the finish of a transition
   *   node.addEventListener('transitionend', done, false);
   * }}
   * ```
   */
  addEndListener: PropTypes$$1.func,

  /**
   * Callback fired before the "entering" status is applied. An extra parameter
   * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
   *
   * @type Function(node: HtmlElement, isAppearing: bool) -> void
   */
  onEnter: PropTypes$$1.func,

  /**
   * Callback fired after the "entering" status is applied. An extra parameter
   * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
   *
   * @type Function(node: HtmlElement, isAppearing: bool)
   */
  onEntering: PropTypes$$1.func,

  /**
   * Callback fired after the "entered" status is applied. An extra parameter
   * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
   *
   * @type Function(node: HtmlElement, isAppearing: bool) -> void
   */
  onEntered: PropTypes$$1.func,

  /**
   * Callback fired before the "exiting" status is applied.
   *
   * @type Function(node: HtmlElement) -> void
   */
  onExit: PropTypes$$1.func,

  /**
   * Callback fired after the "exiting" status is applied.
   *
   * @type Function(node: HtmlElement) -> void
   */
  onExiting: PropTypes$$1.func,

  /**
   * Callback fired after the "exited" status is applied.
   *
   * @type Function(node: HtmlElement) -> void
   */
  onExited: PropTypes$$1.func // Name the function so it is clearer in the documentation

} : {};

function noop() {}

Transition.defaultProps = {
  in: false,
  mountOnEnter: false,
  unmountOnExit: false,
  appear: false,
  enter: true,
  exit: true,
  onEnter: noop,
  onEntering: noop,
  onEntered: noop,
  onExit: noop,
  onExiting: noop,
  onExited: noop
};
Transition.UNMOUNTED = 0;
Transition.EXITED = 1;
Transition.ENTERING = 2;
Transition.ENTERED = 3;
Transition.EXITING = 4;

var _default = (0, reactLifecyclesCompat_es.polyfill)(Transition);

exports.default = _default;
});

unwrapExports(Transition_1);
var Transition_2 = Transition_1.EXITING;
var Transition_3 = Transition_1.ENTERED;
var Transition_4 = Transition_1.ENTERING;
var Transition_5 = Transition_1.EXITED;
var Transition_6 = Transition_1.UNMOUNTED;

var CSSTransition_1 = createCommonjsModule(function (module, exports) {

exports.__esModule = true;
exports.default = void 0;

var PropTypes$$1 = _interopRequireWildcard(PropTypes);

var _addClass = _interopRequireDefault(addClass_1);

var _removeClass = _interopRequireDefault(removeClass);

var _react = _interopRequireDefault(React);

var _Transition = _interopRequireDefault(Transition_1);



function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var addClass = function addClass(node, classes) {
  return node && classes && classes.split(' ').forEach(function (c) {
    return (0, _addClass.default)(node, c);
  });
};

var removeClass$$1 = function removeClass$$1(node, classes) {
  return node && classes && classes.split(' ').forEach(function (c) {
    return (0, _removeClass.default)(node, c);
  });
};
/**
 * A transition component inspired by the excellent
 * [ng-animate](http://www.nganimate.org/) library, you should use it if you're
 * using CSS transitions or animations. It's built upon the
 * [`Transition`](https://reactcommunity.org/react-transition-group/transition)
 * component, so it inherits all of its props.
 *
 * `CSSTransition` applies a pair of class names during the `appear`, `enter`,
 * and `exit` states of the transition. The first class is applied and then a
 * second `*-active` class in order to activate the CSSS transition. After the
 * transition, matching `*-done` class names are applied to persist the
 * transition state.
 *
 * ```jsx
 * function App() {
 *   const [inProp, setInProp] = useState(false);
 *   return (
 *     <div>
 *       <CSSTransition in={inProp} timeout={200} classNames="my-node">
 *         <div>
 *           {"I'll receive my-node-* classes"}
 *         </div>
 *       </CSSTransition>
 *       <button type="button" onClick={() => setInProp(true)}>
 *         Click to Enter
 *       </button>
 *     </div>
 *   );
 * }
 * ```
 *
 * When the `in` prop is set to `true`, the child component will first receive
 * the class `example-enter`, then the `example-enter-active` will be added in
 * the next tick. `CSSTransition` [forces a
 * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)
 * between before adding the `example-enter-active`. This is an important trick
 * because it allows us to transition between `example-enter` and
 * `example-enter-active` even though they were added immediately one after
 * another. Most notably, this is what makes it possible for us to animate
 * _appearance_.
 *
 * ```css
 * .my-node-enter {
 *   opacity: 0;
 * }
 * .my-node-enter-active {
 *   opacity: 1;
 *   transition: opacity 200ms;
 * }
 * .my-node-exit {
 *   opacity: 1;
 * }
 * .my-node-exit-active {
 *   opacity: 0;
 *   transition: opacity: 200ms;
 * }
 * ```
 *
 * `*-active` classes represent which styles you want to animate **to**.
 */


var CSSTransition =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(CSSTransition, _React$Component);

  function CSSTransition() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

    _this.onEnter = function (node, appearing) {
      var _this$getClassNames = _this.getClassNames(appearing ? 'appear' : 'enter'),
          className = _this$getClassNames.className;

      _this.removeClasses(node, 'exit');

      addClass(node, className);

      if (_this.props.onEnter) {
        _this.props.onEnter(node, appearing);
      }
    };

    _this.onEntering = function (node, appearing) {
      var _this$getClassNames2 = _this.getClassNames(appearing ? 'appear' : 'enter'),
          activeClassName = _this$getClassNames2.activeClassName;

      _this.reflowAndAddClass(node, activeClassName);

      if (_this.props.onEntering) {
        _this.props.onEntering(node, appearing);
      }
    };

    _this.onEntered = function (node, appearing) {
      var appearClassName = _this.getClassNames('appear').doneClassName;

      var enterClassName = _this.getClassNames('enter').doneClassName;

      var doneClassName = appearing ? appearClassName + " " + enterClassName : enterClassName;

      _this.removeClasses(node, appearing ? 'appear' : 'enter');

      addClass(node, doneClassName);

      if (_this.props.onEntered) {
        _this.props.onEntered(node, appearing);
      }
    };

    _this.onExit = function (node) {
      var _this$getClassNames3 = _this.getClassNames('exit'),
          className = _this$getClassNames3.className;

      _this.removeClasses(node, 'appear');

      _this.removeClasses(node, 'enter');

      addClass(node, className);

      if (_this.props.onExit) {
        _this.props.onExit(node);
      }
    };

    _this.onExiting = function (node) {
      var _this$getClassNames4 = _this.getClassNames('exit'),
          activeClassName = _this$getClassNames4.activeClassName;

      _this.reflowAndAddClass(node, activeClassName);

      if (_this.props.onExiting) {
        _this.props.onExiting(node);
      }
    };

    _this.onExited = function (node) {
      var _this$getClassNames5 = _this.getClassNames('exit'),
          doneClassName = _this$getClassNames5.doneClassName;

      _this.removeClasses(node, 'exit');

      addClass(node, doneClassName);

      if (_this.props.onExited) {
        _this.props.onExited(node);
      }
    };

    _this.getClassNames = function (type) {
      var classNames = _this.props.classNames;
      var isStringClassNames = typeof classNames === 'string';
      var prefix = isStringClassNames && classNames ? classNames + '-' : '';
      var className = isStringClassNames ? prefix + type : classNames[type];
      var activeClassName = isStringClassNames ? className + '-active' : classNames[type + 'Active'];
      var doneClassName = isStringClassNames ? className + '-done' : classNames[type + 'Done'];
      return {
        className: className,
        activeClassName: activeClassName,
        doneClassName: doneClassName
      };
    };

    return _this;
  }

  var _proto = CSSTransition.prototype;

  _proto.removeClasses = function removeClasses(node, type) {
    var _this$getClassNames6 = this.getClassNames(type),
        className = _this$getClassNames6.className,
        activeClassName = _this$getClassNames6.activeClassName,
        doneClassName = _this$getClassNames6.doneClassName;

    className && removeClass$$1(node, className);
    activeClassName && removeClass$$1(node, activeClassName);
    doneClassName && removeClass$$1(node, doneClassName);
  };

  _proto.reflowAndAddClass = function reflowAndAddClass(node, className) {
    // This is for to force a repaint,
    // which is necessary in order to transition styles when adding a class name.
    if (className) {
      /* eslint-disable no-unused-expressions */
      node && node.scrollTop;
      /* eslint-enable no-unused-expressions */

      addClass(node, className);
    }
  };

  _proto.render = function render() {
    var props = _extends({}, this.props);

    delete props.classNames;
    return _react.default.createElement(_Transition.default, _extends({}, props, {
      onEnter: this.onEnter,
      onEntered: this.onEntered,
      onEntering: this.onEntering,
      onExit: this.onExit,
      onExiting: this.onExiting,
      onExited: this.onExited
    }));
  };

  return CSSTransition;
}(_react.default.Component);

CSSTransition.defaultProps = {
  classNames: ''
};
CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, _Transition.default.propTypes, {
  /**
   * The animation classNames applied to the component as it enters, exits or
   * has finished the transition. A single name can be provided and it will be
   * suffixed for each stage: e.g.
   *
   * `classNames="fade"` applies `fade-enter`, `fade-enter-active`,
   * `fade-enter-done`, `fade-exit`, `fade-exit-active`, `fade-exit-done`,
   * `fade-appear`, `fade-appear-active`, and `fade-appear-done`.
   *
   * **Note**: `fade-appear-done` and `fade-enter-done` will _both_ be applied.
   * This allows you to define different behavior for when appearing is done and
   * when regular entering is done, using selectors like
   * `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply an
   * epic entrance animation when element first appears in the DOM using
   * [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can
   * simply use `fade-enter-done` for defining both cases.
   *
   * Each individual classNames can also be specified independently like:
   *
   * ```js
   * classNames={{
   *  appear: 'my-appear',
   *  appearActive: 'my-active-appear',
   *  appearDone: 'my-done-appear',
   *  enter: 'my-enter',
   *  enterActive: 'my-active-enter',
   *  enterDone: 'my-done-enter',
   *  exit: 'my-exit',
   *  exitActive: 'my-active-exit',
   *  exitDone: 'my-done-exit',
   * }}
   * ```
   *
   * If you want to set these classes using CSS Modules:
   *
   * ```js
   * import styles from './styles.css';
   * ```
   *
   * you might want to use camelCase in your CSS file, that way could simply
   * spread them instead of listing them one by one:
   *
   * ```js
   * classNames={{ ...styles }}
   * ```
   *
   * @type {string | {
   *  appear?: string,
   *  appearActive?: string,
   *  appearDone?: string,
   *  enter?: string,
   *  enterActive?: string,
   *  enterDone?: string,
   *  exit?: string,
   *  exitActive?: string,
   *  exitDone?: string,
   * }}
   */
  classNames: PropTypes$1.classNamesShape,

  /**
   * A `<Transition>` callback fired immediately after the 'enter' or 'appear' class is
   * applied.
   *
   * @type Function(node: HtmlElement, isAppearing: bool)
   */
  onEnter: PropTypes$$1.func,

  /**
   * A `<Transition>` callback fired immediately after the 'enter-active' or
   * 'appear-active' class is applied.
   *
   * @type Function(node: HtmlElement, isAppearing: bool)
   */
  onEntering: PropTypes$$1.func,

  /**
   * A `<Transition>` callback fired immediately after the 'enter' or
   * 'appear' classes are **removed** and the `done` class is added to the DOM node.
   *
   * @type Function(node: HtmlElement, isAppearing: bool)
   */
  onEntered: PropTypes$$1.func,

  /**
   * A `<Transition>` callback fired immediately after the 'exit' class is
   * applied.
   *
   * @type Function(node: HtmlElement)
   */
  onExit: PropTypes$$1.func,

  /**
   * A `<Transition>` callback fired immediately after the 'exit-active' is applied.
   *
   * @type Function(node: HtmlElement)
   */
  onExiting: PropTypes$$1.func,

  /**
   * A `<Transition>` callback fired immediately after the 'exit' classes
   * are **removed** and the `exit-done` class is added to the DOM node.
   *
   * @type Function(node: HtmlElement)
   */
  onExited: PropTypes$$1.func
}) : {};
var _default = CSSTransition;
exports.default = _default;
module.exports = exports["default"];
});

unwrapExports(CSSTransition_1);

var ChildMapping = createCommonjsModule(function (module, exports) {

exports.__esModule = true;
exports.getChildMapping = getChildMapping;
exports.mergeChildMappings = mergeChildMappings;
exports.getInitialChildMapping = getInitialChildMapping;
exports.getNextChildMapping = getNextChildMapping;



/**
 * Given `this.props.children`, return an object mapping key to child.
 *
 * @param {*} children `this.props.children`
 * @return {object} Mapping of key to child
 */
function getChildMapping(children, mapFn) {
  var mapper = function mapper(child) {
    return mapFn && (0, React.isValidElement)(child) ? mapFn(child) : child;
  };

  var result = Object.create(null);
  if (children) React.Children.map(children, function (c) {
    return c;
  }).forEach(function (child) {
    // run the map function here instead so that the key is the computed one
    result[child.key] = mapper(child);
  });
  return result;
}
/**
 * When you're adding or removing children some may be added or removed in the
 * same render pass. We want to show *both* since we want to simultaneously
 * animate elements in and out. This function takes a previous set of keys
 * and a new set of keys and merges them with its best guess of the correct
 * ordering. In the future we may expose some of the utilities in
 * ReactMultiChild to make this easy, but for now React itself does not
 * directly have this concept of the union of prevChildren and nextChildren
 * so we implement it here.
 *
 * @param {object} prev prev children as returned from
 * `ReactTransitionChildMapping.getChildMapping()`.
 * @param {object} next next children as returned from
 * `ReactTransitionChildMapping.getChildMapping()`.
 * @return {object} a key set that contains all keys in `prev` and all keys
 * in `next` in a reasonable order.
 */


function mergeChildMappings(prev, next) {
  prev = prev || {};
  next = next || {};

  function getValueForKey(key) {
    return key in next ? next[key] : prev[key];
  } // For each key of `next`, the list of keys to insert before that key in
  // the combined list


  var nextKeysPending = Object.create(null);
  var pendingKeys = [];

  for (var prevKey in prev) {
    if (prevKey in next) {
      if (pendingKeys.length) {
        nextKeysPending[prevKey] = pendingKeys;
        pendingKeys = [];
      }
    } else {
      pendingKeys.push(prevKey);
    }
  }

  var i;
  var childMapping = {};

  for (var nextKey in next) {
    if (nextKeysPending[nextKey]) {
      for (i = 0; i < nextKeysPending[nextKey].length; i++) {
        var pendingNextKey = nextKeysPending[nextKey][i];
        childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
      }
    }

    childMapping[nextKey] = getValueForKey(nextKey);
  } // Finally, add the keys which didn't appear before any key in `next`


  for (i = 0; i < pendingKeys.length; i++) {
    childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
  }

  return childMapping;
}

function getProp(child, prop, props) {
  return props[prop] != null ? props[prop] : child.props[prop];
}

function getInitialChildMapping(props, onExited) {
  return getChildMapping(props.children, function (child) {
    return (0, React.cloneElement)(child, {
      onExited: onExited.bind(null, child),
      in: true,
      appear: getProp(child, 'appear', props),
      enter: getProp(child, 'enter', props),
      exit: getProp(child, 'exit', props)
    });
  });
}

function getNextChildMapping(nextProps, prevChildMapping, onExited) {
  var nextChildMapping = getChildMapping(nextProps.children);
  var children = mergeChildMappings(prevChildMapping, nextChildMapping);
  Object.keys(children).forEach(function (key) {
    var child = children[key];
    if (!(0, React.isValidElement)(child)) return;
    var hasPrev = key in prevChildMapping;
    var hasNext = key in nextChildMapping;
    var prevChild = prevChildMapping[key];
    var isLeaving = (0, React.isValidElement)(prevChild) && !prevChild.props.in; // item is new (entering)

    if (hasNext && (!hasPrev || isLeaving)) {
      // console.log('entering', key)
      children[key] = (0, React.cloneElement)(child, {
        onExited: onExited.bind(null, child),
        in: true,
        exit: getProp(child, 'exit', nextProps),
        enter: getProp(child, 'enter', nextProps)
      });
    } else if (!hasNext && hasPrev && !isLeaving) {
      // item is old (exiting)
      // console.log('leaving', key)
      children[key] = (0, React.cloneElement)(child, {
        in: false
      });
    } else if (hasNext && hasPrev && (0, React.isValidElement)(prevChild)) {
      // item hasn't changed transition states
      // copy over the last transition props;
      // console.log('unchanged', key)
      children[key] = (0, React.cloneElement)(child, {
        onExited: onExited.bind(null, child),
        in: prevChild.props.in,
        exit: getProp(child, 'exit', nextProps),
        enter: getProp(child, 'enter', nextProps)
      });
    }
  });
  return children;
}
});

unwrapExports(ChildMapping);
var ChildMapping_1 = ChildMapping.getChildMapping;
var ChildMapping_2 = ChildMapping.mergeChildMappings;
var ChildMapping_3 = ChildMapping.getInitialChildMapping;
var ChildMapping_4 = ChildMapping.getNextChildMapping;

var TransitionGroup_1 = createCommonjsModule(function (module, exports) {

exports.__esModule = true;
exports.default = void 0;

var _propTypes = _interopRequireDefault(PropTypes);

var _react = _interopRequireDefault(React);





function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

var values = Object.values || function (obj) {
  return Object.keys(obj).map(function (k) {
    return obj[k];
  });
};

var defaultProps = {
  component: 'div',
  childFactory: function childFactory(child) {
    return child;
  }
  /**
   * The `<TransitionGroup>` component manages a set of transition components
   * (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition
   * components, `<TransitionGroup>` is a state machine for managing the mounting
   * and unmounting of components over time.
   *
   * Consider the example below. As items are removed or added to the TodoList the
   * `in` prop is toggled automatically by the `<TransitionGroup>`.
   *
   * Note that `<TransitionGroup>`  does not define any animation behavior!
   * Exactly _how_ a list item animates is up to the individual transition
   * component. This means you can mix and match animations across different list
   * items.
   */

};

var TransitionGroup =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(TransitionGroup, _React$Component);

  function TransitionGroup(props, context) {
    var _this;

    _this = _React$Component.call(this, props, context) || this;

    var handleExited = _this.handleExited.bind(_assertThisInitialized(_assertThisInitialized(_this))); // Initial children should all be entering, dependent on appear


    _this.state = {
      handleExited: handleExited,
      firstRender: true
    };
    return _this;
  }

  var _proto = TransitionGroup.prototype;

  _proto.getChildContext = function getChildContext() {
    return {
      transitionGroup: {
        isMounting: !this.appeared
      }
    };
  };

  _proto.componentDidMount = function componentDidMount() {
    this.appeared = true;
    this.mounted = true;
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this.mounted = false;
  };

  TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
    var prevChildMapping = _ref.children,
        handleExited = _ref.handleExited,
        firstRender = _ref.firstRender;
    return {
      children: firstRender ? (0, ChildMapping.getInitialChildMapping)(nextProps, handleExited) : (0, ChildMapping.getNextChildMapping)(nextProps, prevChildMapping, handleExited),
      firstRender: false
    };
  };

  _proto.handleExited = function handleExited(child, node) {
    var currentChildMapping = (0, ChildMapping.getChildMapping)(this.props.children);
    if (child.key in currentChildMapping) return;

    if (child.props.onExited) {
      child.props.onExited(node);
    }

    if (this.mounted) {
      this.setState(function (state) {
        var children = _extends({}, state.children);

        delete children[child.key];
        return {
          children: children
        };
      });
    }
  };

  _proto.render = function render() {
    var _this$props = this.props,
        Component$$1 = _this$props.component,
        childFactory = _this$props.childFactory,
        props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);

    var children = values(this.state.children).map(childFactory);
    delete props.appear;
    delete props.enter;
    delete props.exit;

    if (Component$$1 === null) {
      return children;
    }

    return _react.default.createElement(Component$$1, props, children);
  };

  return TransitionGroup;
}(_react.default.Component);

TransitionGroup.childContextTypes = {
  transitionGroup: _propTypes.default.object.isRequired
};
TransitionGroup.propTypes = process.env.NODE_ENV !== "production" ? {
  /**
   * `<TransitionGroup>` renders a `<div>` by default. You can change this
   * behavior by providing a `component` prop.
   * If you use React v16+ and would like to avoid a wrapping `<div>` element
   * you can pass in `component={null}`. This is useful if the wrapping div
   * borks your css styles.
   */
  component: _propTypes.default.any,

  /**
   * A set of `<Transition>` components, that are toggled `in` and out as they
   * leave. the `<TransitionGroup>` will inject specific transition props, so
   * remember to spread them through if you are wrapping the `<Transition>` as
   * with our `<Fade>` example.
   *
   * While this component is meant for multiple `Transition` or `CSSTransition`
   * children, sometimes you may want to have a single transition child with
   * content that you want to be transitioned out and in when you change it
   * (e.g. routes, images etc.) In that case you can change the `key` prop of
   * the transition child as you change its content, this will cause
   * `TransitionGroup` to transition the child out and back in.
   */
  children: _propTypes.default.node,

  /**
   * A convenience prop that enables or disables appear animations
   * for all children. Note that specifying this will override any defaults set
   * on individual children Transitions.
   */
  appear: _propTypes.default.bool,

  /**
   * A convenience prop that enables or disables enter animations
   * for all children. Note that specifying this will override any defaults set
   * on individual children Transitions.
   */
  enter: _propTypes.default.bool,

  /**
   * A convenience prop that enables or disables exit animations
   * for all children. Note that specifying this will override any defaults set
   * on individual children Transitions.
   */
  exit: _propTypes.default.bool,

  /**
   * You may need to apply reactive updates to a child as it is exiting.
   * This is generally done by using `cloneElement` however in the case of an exiting
   * child the element has already been removed and not accessible to the consumer.
   *
   * If you do need to update a child as it leaves you can provide a `childFactory`
   * to wrap every child, even the ones that are leaving.
   *
   * @type Function(child: ReactElement) -> ReactElement
   */
  childFactory: _propTypes.default.func
} : {};
TransitionGroup.defaultProps = defaultProps;

var _default = (0, reactLifecyclesCompat_es.polyfill)(TransitionGroup);

exports.default = _default;
module.exports = exports["default"];
});

unwrapExports(TransitionGroup_1);

var ReplaceTransition_1 = createCommonjsModule(function (module, exports) {

exports.__esModule = true;
exports.default = void 0;

var _propTypes = _interopRequireDefault(PropTypes);

var _react = _interopRequireDefault(React);



var _TransitionGroup = _interopRequireDefault(TransitionGroup_1);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

/**
 * The `<ReplaceTransition>` component is a specialized `Transition` component
 * that animates between two children.
 *
 * ```jsx
 * <ReplaceTransition in>
 *   <Fade><div>I appear first</div></Fade>
 *   <Fade><div>I replace the above</div></Fade>
 * </ReplaceTransition>
 * ```
 */
var ReplaceTransition =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(ReplaceTransition, _React$Component);

  function ReplaceTransition() {
    var _this;

    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
      _args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;

    _this.handleEnter = function () {
      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
        args[_key2] = arguments[_key2];
      }

      return _this.handleLifecycle('onEnter', 0, args);
    };

    _this.handleEntering = function () {
      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
        args[_key3] = arguments[_key3];
      }

      return _this.handleLifecycle('onEntering', 0, args);
    };

    _this.handleEntered = function () {
      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
        args[_key4] = arguments[_key4];
      }

      return _this.handleLifecycle('onEntered', 0, args);
    };

    _this.handleExit = function () {
      for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
        args[_key5] = arguments[_key5];
      }

      return _this.handleLifecycle('onExit', 1, args);
    };

    _this.handleExiting = function () {
      for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
        args[_key6] = arguments[_key6];
      }

      return _this.handleLifecycle('onExiting', 1, args);
    };

    _this.handleExited = function () {
      for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
        args[_key7] = arguments[_key7];
      }

      return _this.handleLifecycle('onExited', 1, args);
    };

    return _this;
  }

  var _proto = ReplaceTransition.prototype;

  _proto.handleLifecycle = function handleLifecycle(handler, idx, originalArgs) {
    var _child$props;

    var children = this.props.children;

    var child = _react.default.Children.toArray(children)[idx];

    if (child.props[handler]) (_child$props = child.props)[handler].apply(_child$props, originalArgs);
    if (this.props[handler]) this.props[handler]((0, reactDom.findDOMNode)(this));
  };

  _proto.render = function render() {
    var _this$props = this.props,
        children = _this$props.children,
        inProp = _this$props.in,
        props = _objectWithoutPropertiesLoose(_this$props, ["children", "in"]);

    var _React$Children$toArr = _react.default.Children.toArray(children),
        first = _React$Children$toArr[0],
        second = _React$Children$toArr[1];

    delete props.onEnter;
    delete props.onEntering;
    delete props.onEntered;
    delete props.onExit;
    delete props.onExiting;
    delete props.onExited;
    return _react.default.createElement(_TransitionGroup.default, props, inProp ? _react.default.cloneElement(first, {
      key: 'first',
      onEnter: this.handleEnter,
      onEntering: this.handleEntering,
      onEntered: this.handleEntered
    }) : _react.default.cloneElement(second, {
      key: 'second',
      onEnter: this.handleExit,
      onEntering: this.handleExiting,
      onEntered: this.handleExited
    }));
  };

  return ReplaceTransition;
}(_react.default.Component);

ReplaceTransition.propTypes = process.env.NODE_ENV !== "production" ? {
  in: _propTypes.default.bool.isRequired,
  children: function children(props, propName) {
    if (_react.default.Children.count(props[propName]) !== 2) return new Error("\"" + propName + "\" must be exactly two transition components.");
    return null;
  }
} : {};
var _default = ReplaceTransition;
exports.default = _default;
module.exports = exports["default"];
});

unwrapExports(ReplaceTransition_1);

var reactTransitionGroup = createCommonjsModule(function (module) {

var _CSSTransition = _interopRequireDefault(CSSTransition_1);

var _ReplaceTransition = _interopRequireDefault(ReplaceTransition_1);

var _TransitionGroup = _interopRequireDefault(TransitionGroup_1);

var _Transition = _interopRequireDefault(Transition_1);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

module.exports = {
  Transition: _Transition.default,
  TransitionGroup: _TransitionGroup.default,
  ReplaceTransition: _ReplaceTransition.default,
  CSSTransition: _CSSTransition.default
};
});

unwrapExports(reactTransitionGroup);
var reactTransitionGroup_1 = reactTransitionGroup.Transition;
var reactTransitionGroup_2 = reactTransitionGroup.TransitionGroup;
var reactTransitionGroup_3 = reactTransitionGroup.ReplaceTransition;
var reactTransitionGroup_4 = reactTransitionGroup.CSSTransition;

function _typeof(obj) {
  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
    _typeof = function (obj) {
      return typeof obj;
    };
  } else {
    _typeof = function (obj) {
      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
    };
  }

  return _typeof(obj);
}

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

function _defineProperty$1(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _extends$2() {
  _extends$2 = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends$2.apply(this, arguments);
}

function _objectSpread(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    var ownKeys = Object.keys(source);

    if (typeof Object.getOwnPropertySymbols === 'function') {
      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
      }));
    }

    ownKeys.forEach(function (key) {
      _defineProperty$1(target, key, source[key]);
    });
  }

  return target;
}

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  };
  return _getPrototypeOf(o);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };

  return _setPrototypeOf(o, p);
}

function _objectWithoutPropertiesLoose$1(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};

  var target = _objectWithoutPropertiesLoose$1(source, excluded);

  var key, i;

  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }

  return target;
}

function _assertThisInitialized$1(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return self;
}

function _possibleConstructorReturn(self, call) {
  if (call && (typeof call === "object" || typeof call === "function")) {
    return call;
  }

  return _assertThisInitialized$1(self);
}

function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) {
    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

    return arr2;
  }
}

function _iterableToArray(iter) {
  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance");
}

// ==============================
// NO OP
// ==============================
var noop = function noop() {};
// Class Name Prefixer
// ==============================

/**
 String representation of component state for styling with class names.

 Expects an array of strings OR a string/object pair:
 - className(['comp', 'comp-arg', 'comp-arg-2'])
   @returns 'react-select__comp react-select__comp-arg react-select__comp-arg-2'
 - className('comp', { some: true, state: false })
   @returns 'react-select__comp react-select__comp--some'
*/

function applyPrefixToName(prefix, name) {
  if (!name) {
    return prefix;
  } else if (name[0] === '-') {
    return prefix + name;
  } else {
    return prefix + '__' + name;
  }
}

function classNames(prefix, cssKey, state, className) {
  var arr = [cssKey, className];

  if (state && prefix) {
    for (var key in state) {
      if (state.hasOwnProperty(key) && state[key]) {
        arr.push("".concat(applyPrefixToName(prefix, key)));
      }
    }
  }

  return arr.filter(function (i) {
    return i;
  }).map(function (i) {
    return String(i).trim();
  }).join(' ');
} // ==============================
// Clean Value
// ==============================

var cleanValue = function cleanValue(value) {
  if (Array.isArray(value)) return value.filter(Boolean);
  if (_typeof(value) === 'object' && value !== null) return [value];
  return [];
}; // ==============================
// Handle Input Change
// ==============================

function handleInputChange(inputValue, actionMeta, onInputChange) {
  if (onInputChange) {
    var newValue = onInputChange(inputValue, actionMeta);
    if (typeof newValue === 'string') return newValue;
  }

  return inputValue;
} // ==============================
// Scroll Helpers
// ==============================

function isDocumentElement(el) {
  return [document.documentElement, document.body, window].indexOf(el) > -1;
} // Normalized Scroll Top
// ------------------------------

function getScrollTop(el) {
  if (isDocumentElement(el)) {
    return window.pageYOffset;
  }

  return el.scrollTop;
}
function scrollTo(el, top) {
  // with a scroll distance, we perform scroll on the element
  if (isDocumentElement(el)) {
    window.scrollTo(0, top);
    return;
  }

  el.scrollTop = top;
} // Get Scroll Parent
// ------------------------------

function getScrollParent(element) {
  var style = getComputedStyle(element);
  var excludeStaticParent = style.position === 'absolute';
  var overflowRx = /(auto|scroll)/;
  var docEl = document.documentElement; // suck it, flow...

  if (style.position === 'fixed') return docEl;

  for (var parent = element; parent = parent.parentElement;) {
    style = getComputedStyle(parent);

    if (excludeStaticParent && style.position === 'static') {
      continue;
    }

    if (overflowRx.test(style.overflow + style.overflowY + style.overflowX)) {
      return parent;
    }
  }

  return docEl;
} // Animated Scroll To
// ------------------------------

/**
  @param t: time (elapsed)
  @param b: initial value
  @param c: amount of change
  @param d: duration
*/

function easeOutCubic(t, b, c, d) {
  return c * ((t = t / d - 1) * t * t + 1) + b;
}

function animatedScrollTo(element, to) {
  var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200;
  var callback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : noop;
  var start = getScrollTop(element);
  var change = to - start;
  var increment = 10;
  var currentTime = 0;

  function animateScroll() {
    currentTime += increment;
    var val = easeOutCubic(currentTime, start, change, duration);
    scrollTo(element, val);

    if (currentTime < duration) {
      raf_1(animateScroll);
    } else {
      callback(element);
    }
  }

  animateScroll();
} // Scroll Into View
// ------------------------------

function scrollIntoView(menuEl, focusedEl) {
  var menuRect = menuEl.getBoundingClientRect();
  var focusedRect = focusedEl.getBoundingClientRect();
  var overScroll = focusedEl.offsetHeight / 3;

  if (focusedRect.bottom + overScroll > menuRect.bottom) {
    scrollTo(menuEl, Math.min(focusedEl.offsetTop + focusedEl.clientHeight - menuEl.offsetHeight + overScroll, menuEl.scrollHeight));
  } else if (focusedRect.top - overScroll < menuRect.top) {
    scrollTo(menuEl, Math.max(focusedEl.offsetTop - overScroll, 0));
  }
} // ==============================
// Get bounding client object
// ==============================
// cannot get keys using array notation with DOMRect

function getBoundingClientObj(element) {
  var rect = element.getBoundingClientRect();
  return {
    bottom: rect.bottom,
    height: rect.height,
    left: rect.left,
    right: rect.right,
    top: rect.top,
    width: rect.width
  };
}
// Touch Capability Detector
// ==============================

function isTouchCapable() {
  try {
    document.createEvent('TouchEvent');
    return true;
  } catch (e) {
    return false;
  }
} // ==============================
// Mobile Device Detector
// ==============================

function isMobileDevice() {
  try {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  } catch (e) {
    return false;
  }
}

function getMenuPlacement(_ref) {
  var maxHeight = _ref.maxHeight,
      menuEl = _ref.menuEl,
      minHeight = _ref.minHeight,
      placement = _ref.placement,
      shouldScroll = _ref.shouldScroll,
      isFixedPosition = _ref.isFixedPosition,
      theme = _ref.theme;
  var spacing = theme.spacing;
  var scrollParent = getScrollParent(menuEl);
  var defaultState = {
    placement: 'bottom',
    maxHeight: maxHeight
  }; // something went wrong, return default state

  if (!menuEl || !menuEl.offsetParent) return defaultState; // we can't trust `scrollParent.scrollHeight` --> it may increase when
  // the menu is rendered

  var _scrollParent$getBoun = scrollParent.getBoundingClientRect(),
      scrollHeight = _scrollParent$getBoun.height;

  var _menuEl$getBoundingCl = menuEl.getBoundingClientRect(),
      menuBottom = _menuEl$getBoundingCl.bottom,
      menuHeight = _menuEl$getBoundingCl.height,
      menuTop = _menuEl$getBoundingCl.top;

  var _menuEl$offsetParent$ = menuEl.offsetParent.getBoundingClientRect(),
      containerTop = _menuEl$offsetParent$.top;

  var viewHeight = window.innerHeight;
  var scrollTop = getScrollTop(scrollParent);
  var marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10);
  var marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10);
  var viewSpaceAbove = containerTop - marginTop;
  var viewSpaceBelow = viewHeight - menuTop;
  var scrollSpaceAbove = viewSpaceAbove + scrollTop;
  var scrollSpaceBelow = scrollHeight - scrollTop - menuTop;
  var scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;
  var scrollUp = scrollTop + menuTop - marginTop;
  var scrollDuration = 160;

  switch (placement) {
    case 'auto':
    case 'bottom':
      // 1: the menu will fit, do nothing
      if (viewSpaceBelow >= menuHeight) {
        return {
          placement: 'bottom',
          maxHeight: maxHeight
        };
      } // 2: the menu will fit, if scrolled


      if (scrollSpaceBelow >= menuHeight && !isFixedPosition) {
        if (shouldScroll) {
          animatedScrollTo(scrollParent, scrollDown, scrollDuration);
        }

        return {
          placement: 'bottom',
          maxHeight: maxHeight
        };
      } // 3: the menu will fit, if constrained


      if (!isFixedPosition && scrollSpaceBelow >= minHeight || isFixedPosition && viewSpaceBelow >= minHeight) {
        if (shouldScroll) {
          animatedScrollTo(scrollParent, scrollDown, scrollDuration);
        } // we want to provide as much of the menu as possible to the user,
        // so give them whatever is available below rather than the minHeight.


        var constrainedHeight = isFixedPosition ? viewSpaceBelow - marginBottom : scrollSpaceBelow - marginBottom;
        return {
          placement: 'bottom',
          maxHeight: constrainedHeight
        };
      } // 4. Forked beviour when there isn't enough space below
      // AUTO: flip the menu, render above


      if (placement === 'auto' || isFixedPosition) {
        // may need to be constrained after flipping
        var _constrainedHeight = maxHeight;
        var spaceAbove = isFixedPosition ? viewSpaceAbove : scrollSpaceAbove;

        if (spaceAbove >= minHeight) {
          _constrainedHeight = Math.min(spaceAbove - marginBottom - spacing.controlHeight, maxHeight);
        }

        return {
          placement: 'top',
          maxHeight: _constrainedHeight
        };
      } // BOTTOM: allow browser to increase scrollable area and immediately set scroll


      if (placement === 'bottom') {
        scrollTo(scrollParent, scrollDown);
        return {
          placement: 'bottom',
          maxHeight: maxHeight
        };
      }

      break;

    case 'top':
      // 1: the menu will fit, do nothing
      if (viewSpaceAbove >= menuHeight) {
        return {
          placement: 'top',
          maxHeight: maxHeight
        };
      } // 2: the menu will fit, if scrolled


      if (scrollSpaceAbove >= menuHeight && !isFixedPosition) {
        if (shouldScroll) {
          animatedScrollTo(scrollParent, scrollUp, scrollDuration);
        }

        return {
          placement: 'top',
          maxHeight: maxHeight
        };
      } // 3: the menu will fit, if constrained


      if (!isFixedPosition && scrollSpaceAbove >= minHeight || isFixedPosition && viewSpaceAbove >= minHeight) {
        var _constrainedHeight2 = maxHeight; // we want to provide as much of the menu as possible to the user,
        // so give them whatever is available below rather than the minHeight.

        if (!isFixedPosition && scrollSpaceAbove >= minHeight || isFixedPosition && viewSpaceAbove >= minHeight) {
          _constrainedHeight2 = isFixedPosition ? viewSpaceAbove - marginTop : scrollSpaceAbove - marginTop;
        }

        if (shouldScroll) {
          animatedScrollTo(scrollParent, scrollUp, scrollDuration);
        }

        return {
          placement: 'top',
          maxHeight: _constrainedHeight2
        };
      } // 4. not enough space, the browser WILL NOT increase scrollable area when
      // absolutely positioned element rendered above the viewport (only below).
      // Flip the menu, render below


      return {
        placement: 'bottom',
        maxHeight: maxHeight
      };

    default:
      throw new Error("Invalid placement provided \"".concat(placement, "\"."));
  } // fulfil contract with flow: implicit return value of undefined


  return defaultState;
} // Menu Component
// ------------------------------

function alignToControl(placement) {
  var placementToCSSProp = {
    bottom: 'top',
    top: 'bottom'
  };
  return placement ? placementToCSSProp[placement] : 'bottom';
}

var coercePlacement = function coercePlacement(p) {
  return p === 'auto' ? 'bottom' : p;
};

var menuCSS = function menuCSS(_ref2) {
  var _ref3;

  var placement = _ref2.placement,
      _ref2$theme = _ref2.theme,
      borderRadius = _ref2$theme.borderRadius,
      spacing = _ref2$theme.spacing,
      colors = _ref2$theme.colors;
  return _ref3 = {
    label: 'menu'
  }, _defineProperty$1(_ref3, alignToControl(placement), '100%'), _defineProperty$1(_ref3, "backgroundColor", colors.neutral0), _defineProperty$1(_ref3, "borderRadius", borderRadius), _defineProperty$1(_ref3, "boxShadow", '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)'), _defineProperty$1(_ref3, "marginBottom", spacing.menuGutter), _defineProperty$1(_ref3, "marginTop", spacing.menuGutter), _defineProperty$1(_ref3, "position", 'absolute'), _defineProperty$1(_ref3, "width", '100%'), _defineProperty$1(_ref3, "zIndex", 1), _ref3;
}; // NOTE: internal only

var MenuPlacer =
/*#__PURE__*/
function (_Component) {
  _inherits(MenuPlacer, _Component);

  function MenuPlacer() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, MenuPlacer);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(MenuPlacer)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "state", {
      maxHeight: _this.props.maxMenuHeight,
      placement: null
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getPlacement", function (ref) {
      var _this$props = _this.props,
          minMenuHeight = _this$props.minMenuHeight,
          maxMenuHeight = _this$props.maxMenuHeight,
          menuPlacement = _this$props.menuPlacement,
          menuPosition = _this$props.menuPosition,
          menuShouldScrollIntoView = _this$props.menuShouldScrollIntoView,
          theme = _this$props.theme;
      var getPortalPlacement = _this.context.getPortalPlacement;
      if (!ref) return; // DO NOT scroll if position is fixed

      var isFixedPosition = menuPosition === 'fixed';
      var shouldScroll = menuShouldScrollIntoView && !isFixedPosition;
      var state = getMenuPlacement({
        maxHeight: maxMenuHeight,
        menuEl: ref,
        minHeight: minMenuHeight,
        placement: menuPlacement,
        shouldScroll: shouldScroll,
        isFixedPosition: isFixedPosition,
        theme: theme
      });
      if (getPortalPlacement) getPortalPlacement(state);

      _this.setState(state);
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getUpdatedProps", function () {
      var menuPlacement = _this.props.menuPlacement;
      var placement = _this.state.placement || coercePlacement(menuPlacement);
      return _objectSpread({}, _this.props, {
        placement: placement,
        maxHeight: _this.state.maxHeight
      });
    });

    return _this;
  }

  _createClass(MenuPlacer, [{
    key: "render",
    value: function render() {
      var children = this.props.children;
      return children({
        ref: this.getPlacement,
        placerProps: this.getUpdatedProps()
      });
    }
  }]);

  return MenuPlacer;
}(Component);

_defineProperty$1(MenuPlacer, "contextTypes", {
  getPortalPlacement: PropTypes.func
});

var Menu$1 = function Menu$$1(props) {
  var children = props.children,
      className = props.className,
      cx$$1 = props.cx,
      getStyles = props.getStyles,
      innerRef = props.innerRef,
      innerProps = props.innerProps;
  var cn = cx$$1(
  /*#__PURE__*/
  css$1(getStyles('menu', props)), {
    menu: true
  }, className);
  return React.createElement("div", _extends$2({
    className: cn
  }, innerProps, {
    ref: innerRef
  }), children);
};
// Menu List
// ==============================

var menuListCSS = function menuListCSS(_ref4) {
  var maxHeight = _ref4.maxHeight,
      baseUnit = _ref4.theme.spacing.baseUnit;
  return {
    maxHeight: maxHeight,
    overflowY: 'auto',
    paddingBottom: baseUnit,
    paddingTop: baseUnit,
    position: 'relative',
    // required for offset[Height, Top] > keyboard scroll
    WebkitOverflowScrolling: 'touch'
  };
};
var MenuList = function MenuList(props) {
  var children = props.children,
      className = props.className,
      cx$$1 = props.cx,
      getStyles = props.getStyles,
      isMulti = props.isMulti,
      innerRef = props.innerRef;
  return React.createElement("div", {
    className: cx$$1(
    /*#__PURE__*/
    css$1(getStyles('menuList', props)), {
      'menu-list': true,
      'menu-list--is-multi': isMulti
    }, className),
    ref: innerRef
  }, children);
}; // ==============================
// Menu Notices
// ==============================

var noticeCSS = function noticeCSS(_ref5) {
  var _ref5$theme = _ref5.theme,
      baseUnit = _ref5$theme.spacing.baseUnit,
      colors = _ref5$theme.colors;
  return {
    color: colors.neutral40,
    padding: "".concat(baseUnit * 2, "px ").concat(baseUnit * 3, "px"),
    textAlign: 'center'
  };
};

var noOptionsMessageCSS = noticeCSS;
var loadingMessageCSS = noticeCSS;
var NoOptionsMessage = function NoOptionsMessage(props) {
  var children = props.children,
      className = props.className,
      cx$$1 = props.cx,
      getStyles = props.getStyles,
      innerProps = props.innerProps;
  return React.createElement("div", _extends$2({
    className: cx$$1(
    /*#__PURE__*/
    css$1(getStyles('noOptionsMessage', props)), {
      'menu-notice': true,
      'menu-notice--no-options': true
    }, className)
  }, innerProps), children);
};
NoOptionsMessage.defaultProps = {
  children: 'No options'
};
var LoadingMessage = function LoadingMessage(props) {
  var children = props.children,
      className = props.className,
      cx$$1 = props.cx,
      getStyles = props.getStyles,
      innerProps = props.innerProps;
  return React.createElement("div", _extends$2({
    className: cx$$1(
    /*#__PURE__*/
    css$1(getStyles('loadingMessage', props)), {
      'menu-notice': true,
      'menu-notice--loading': true
    }, className)
  }, innerProps), children);
};
LoadingMessage.defaultProps = {
  children: 'Loading...'
}; // ==============================
// Menu Portal
// ==============================

var menuPortalCSS = function menuPortalCSS(_ref6) {
  var rect = _ref6.rect,
      offset = _ref6.offset,
      position = _ref6.position;
  return {
    left: rect.left,
    position: position,
    top: offset,
    width: rect.width,
    zIndex: 1
  };
};
var MenuPortal =
/*#__PURE__*/
function (_Component2) {
  _inherits(MenuPortal, _Component2);

  function MenuPortal() {
    var _getPrototypeOf3;

    var _this2;

    _classCallCheck(this, MenuPortal);

    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      args[_key2] = arguments[_key2];
    }

    _this2 = _possibleConstructorReturn(this, (_getPrototypeOf3 = _getPrototypeOf(MenuPortal)).call.apply(_getPrototypeOf3, [this].concat(args)));

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this2)), "state", {
      placement: null
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this2)), "getPortalPlacement", function (_ref7) {
      var placement = _ref7.placement;
      var initialPlacement = coercePlacement(_this2.props.menuPlacement); // avoid re-renders if the placement has not changed

      if (placement !== initialPlacement) {
        _this2.setState({
          placement: placement
        });
      }
    });

    return _this2;
  }

  _createClass(MenuPortal, [{
    key: "getChildContext",
    value: function getChildContext() {
      return {
        getPortalPlacement: this.getPortalPlacement
      };
    } // callback for occassions where the menu must "flip"

  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          appendTo = _this$props2.appendTo,
          children = _this$props2.children,
          controlElement = _this$props2.controlElement,
          menuPlacement = _this$props2.menuPlacement,
          position = _this$props2.menuPosition,
          getStyles = _this$props2.getStyles;
      var isFixed = position === 'fixed'; // bail early if required elements aren't present

      if (!appendTo && !isFixed || !controlElement) {
        return null;
      }

      var placement = this.state.placement || coercePlacement(menuPlacement);
      var rect = getBoundingClientObj(controlElement);
      var scrollDistance = isFixed ? 0 : window.pageYOffset;
      var offset = rect[placement] + scrollDistance;
      var state = {
        offset: offset,
        position: position,
        rect: rect
      }; // same wrapper element whether fixed or portalled

      var menuWrapper = React.createElement("div", {
        className:
        /*#__PURE__*/

        /*#__PURE__*/
        css$1(getStyles('menuPortal', state))
      }, children);
      return appendTo ? createPortal(menuWrapper, appendTo) : menuWrapper;
    }
  }]);

  return MenuPortal;
}(Component);

_defineProperty$1(MenuPortal, "childContextTypes", {
  getPortalPlacement: PropTypes.func
});

var isArray = Array.isArray;
var keyList = Object.keys;
var hasProp = Object.prototype.hasOwnProperty;

function equal(a, b) {
  // fast-deep-equal index.js 2.0.1
  if (a === b) return true;

  if (a && b && _typeof(a) == 'object' && _typeof(b) == 'object') {
    var arrA = isArray(a),
        arrB = isArray(b),
        i,
        length,
        key;

    if (arrA && arrB) {
      length = a.length;
      if (length != b.length) return false;

      for (i = length; i-- !== 0;) {
        if (!equal(a[i], b[i])) return false;
      }

      return true;
    }

    if (arrA != arrB) return false;
    var dateA = a instanceof Date,
        dateB = b instanceof Date;
    if (dateA != dateB) return false;
    if (dateA && dateB) return a.getTime() == b.getTime();
    var regexpA = a instanceof RegExp,
        regexpB = b instanceof RegExp;
    if (regexpA != regexpB) return false;
    if (regexpA && regexpB) return a.toString() == b.toString();
    var keys = keyList(a);
    length = keys.length;

    if (length !== keyList(b).length) {
      return false;
    }

    for (i = length; i-- !== 0;) {
      if (!hasProp.call(b, keys[i])) return false;
    } // end fast-deep-equal
    // Custom handling for React


    for (i = length; i-- !== 0;) {
      key = keys[i];

      if (key === '_owner' && a.$$typeof) {
        // React-specific: avoid traversing React elements' _owner.
        //  _owner contains circular references
        // and is not needed when comparing the actual elements (and not their owners)
        // .$$typeof and ._store on just reasonable markers of a react element
        continue;
      } else {
        // all other properties should be traversed as usual
        if (!equal(a[key], b[key])) return false;
      }
    } // fast-deep-equal index.js 2.0.1


    return true;
  }

  return a !== a && b !== b;
} // end fast-deep-equal


function exportedEqual(a, b) {
  try {
    return equal(a, b);
  } catch (error) {
    if (error.message && error.message.match(/stack|recursion/i)) {
      // warn on circular references, don't crash
      // browsers give this different errors name and messages:
      // chrome/safari: "RangeError", "Maximum call stack size exceeded"
      // firefox: "InternalError", too much recursion"
      // edge: "Error", "Out of stack space"
      console.warn('Warning: react-fast-compare does not handle circular references.', error.name, error.message);
      return false;
    } // some other error. we should definitely know about these


    throw error;
  }
}

var diacritics = [{
  base: 'A',
  letters: /[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F]/g
}, {
  base: 'AA',
  letters: /[\uA732]/g
}, {
  base: 'AE',
  letters: /[\u00C6\u01FC\u01E2]/g
}, {
  base: 'AO',
  letters: /[\uA734]/g
}, {
  base: 'AU',
  letters: /[\uA736]/g
}, {
  base: 'AV',
  letters: /[\uA738\uA73A]/g
}, {
  base: 'AY',
  letters: /[\uA73C]/g
}, {
  base: 'B',
  letters: /[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181]/g
}, {
  base: 'C',
  letters: /[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E]/g
}, {
  base: 'D',
  letters: /[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779]/g
}, {
  base: 'DZ',
  letters: /[\u01F1\u01C4]/g
}, {
  base: 'Dz',
  letters: /[\u01F2\u01C5]/g
}, {
  base: 'E',
  letters: /[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E]/g
}, {
  base: 'F',
  letters: /[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B]/g
}, {
  base: 'G',
  letters: /[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E]/g
}, {
  base: 'H',
  letters: /[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D]/g
}, {
  base: 'I',
  letters: /[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g
}, {
  base: 'J',
  letters: /[\u004A\u24BF\uFF2A\u0134\u0248]/g
}, {
  base: 'K',
  letters: /[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2]/g
}, {
  base: 'L',
  letters: /[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780]/g
}, {
  base: 'LJ',
  letters: /[\u01C7]/g
}, {
  base: 'Lj',
  letters: /[\u01C8]/g
}, {
  base: 'M',
  letters: /[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C]/g
}, {
  base: 'N',
  letters: /[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4]/g
}, {
  base: 'NJ',
  letters: /[\u01CA]/g
}, {
  base: 'Nj',
  letters: /[\u01CB]/g
}, {
  base: 'O',
  letters: /[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C]/g
}, {
  base: 'OI',
  letters: /[\u01A2]/g
}, {
  base: 'OO',
  letters: /[\uA74E]/g
}, {
  base: 'OU',
  letters: /[\u0222]/g
}, {
  base: 'P',
  letters: /[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754]/g
}, {
  base: 'Q',
  letters: /[\u0051\u24C6\uFF31\uA756\uA758\u024A]/g
}, {
  base: 'R',
  letters: /[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782]/g
}, {
  base: 'S',
  letters: /[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784]/g
}, {
  base: 'T',
  letters: /[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786]/g
}, {
  base: 'TZ',
  letters: /[\uA728]/g
}, {
  base: 'U',
  letters: /[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244]/g
}, {
  base: 'V',
  letters: /[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245]/g
}, {
  base: 'VY',
  letters: /[\uA760]/g
}, {
  base: 'W',
  letters: /[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72]/g
}, {
  base: 'X',
  letters: /[\u0058\u24CD\uFF38\u1E8A\u1E8C]/g
}, {
  base: 'Y',
  letters: /[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE]/g
}, {
  base: 'Z',
  letters: /[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762]/g
}, {
  base: 'a',
  letters: /[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250]/g
}, {
  base: 'aa',
  letters: /[\uA733]/g
}, {
  base: 'ae',
  letters: /[\u00E6\u01FD\u01E3]/g
}, {
  base: 'ao',
  letters: /[\uA735]/g
}, {
  base: 'au',
  letters: /[\uA737]/g
}, {
  base: 'av',
  letters: /[\uA739\uA73B]/g
}, {
  base: 'ay',
  letters: /[\uA73D]/g
}, {
  base: 'b',
  letters: /[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g
}, {
  base: 'c',
  letters: /[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184]/g
}, {
  base: 'd',
  letters: /[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A]/g
}, {
  base: 'dz',
  letters: /[\u01F3\u01C6]/g
}, {
  base: 'e',
  letters: /[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD]/g
}, {
  base: 'f',
  letters: /[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C]/g
}, {
  base: 'g',
  letters: /[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F]/g
}, {
  base: 'h',
  letters: /[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265]/g
}, {
  base: 'hv',
  letters: /[\u0195]/g
}, {
  base: 'i',
  letters: /[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131]/g
}, {
  base: 'j',
  letters: /[\u006A\u24D9\uFF4A\u0135\u01F0\u0249]/g
}, {
  base: 'k',
  letters: /[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3]/g
}, {
  base: 'l',
  letters: /[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747]/g
}, {
  base: 'lj',
  letters: /[\u01C9]/g
}, {
  base: 'm',
  letters: /[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F]/g
}, {
  base: 'n',
  letters: /[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5]/g
}, {
  base: 'nj',
  letters: /[\u01CC]/g
}, {
  base: 'o',
  letters: /[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275]/g
}, {
  base: 'oi',
  letters: /[\u01A3]/g
}, {
  base: 'ou',
  letters: /[\u0223]/g
}, {
  base: 'oo',
  letters: /[\uA74F]/g
}, {
  base: 'p',
  letters: /[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755]/g
}, {
  base: 'q',
  letters: /[\u0071\u24E0\uFF51\u024B\uA757\uA759]/g
}, {
  base: 'r',
  letters: /[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783]/g
}, {
  base: 's',
  letters: /[\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B]/g
}, {
  base: 't',
  letters: /[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787]/g
}, {
  base: 'tz',
  letters: /[\uA729]/g
}, {
  base: 'u',
  letters: /[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289]/g
}, {
  base: 'v',
  letters: /[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C]/g
}, {
  base: 'vy',
  letters: /[\uA761]/g
}, {
  base: 'w',
  letters: /[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73]/g
}, {
  base: 'x',
  letters: /[\u0078\u24E7\uFF58\u1E8B\u1E8D]/g
}, {
  base: 'y',
  letters: /[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF]/g
}, {
  base: 'z',
  letters: /[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g
}];
var stripDiacritics = function stripDiacritics(str) {
  for (var i = 0; i < diacritics.length; i++) {
    str = str.replace(diacritics[i].letters, diacritics[i].base);
  }

  return str;
};

var trimString = function trimString(str) {
  return str.replace(/^\s+|\s+$/g, '');
};

var defaultStringify = function defaultStringify(option) {
  return "".concat(option.label, " ").concat(option.value);
};

var createFilter = function createFilter(config) {
  return function (option, rawInput) {
    var _ignoreCase$ignoreAcc = _objectSpread({
      ignoreCase: true,
      ignoreAccents: true,
      stringify: defaultStringify,
      trim: true,
      matchFrom: 'any'
    }, config),
        ignoreCase = _ignoreCase$ignoreAcc.ignoreCase,
        ignoreAccents = _ignoreCase$ignoreAcc.ignoreAccents,
        stringify = _ignoreCase$ignoreAcc.stringify,
        trim = _ignoreCase$ignoreAcc.trim,
        matchFrom = _ignoreCase$ignoreAcc.matchFrom;

    var input = trim ? trimString(rawInput) : rawInput;
    var candidate = trim ? trimString(stringify(option)) : stringify(option);

    if (ignoreCase) {
      input = input.toLowerCase();
      candidate = candidate.toLowerCase();
    }

    if (ignoreAccents) {
      input = stripDiacritics(input);
      candidate = stripDiacritics(candidate);
    }

    return matchFrom === 'start' ? candidate.substr(0, input.length) === input : candidate.indexOf(input) > -1;
  };
};

var A11yText = function A11yText(props) {
  return React.createElement("span", _extends$2({
    className:
    /*#__PURE__*/

    /*#__PURE__*/
    css$1({
      label: 'a11yText',
      zIndex: 9999,
      border: 0,
      clip: 'rect(1px, 1px, 1px, 1px)',
      height: 1,
      width: 1,
      position: 'absolute',
      overflow: 'hidden',
      padding: 0,
      whiteSpace: 'nowrap',
      backgroundColor: 'red',
      color: 'blue'
    })
  }, props));
};

var DummyInput =
/*#__PURE__*/
function (_Component) {
  _inherits(DummyInput, _Component);

  function DummyInput() {
    _classCallCheck(this, DummyInput);

    return _possibleConstructorReturn(this, _getPrototypeOf(DummyInput).apply(this, arguments));
  }

  _createClass(DummyInput, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          inProp = _this$props.in,
          out = _this$props.out,
          onExited = _this$props.onExited,
          appear = _this$props.appear,
          enter = _this$props.enter,
          exit = _this$props.exit,
          innerRef = _this$props.innerRef,
          emotion = _this$props.emotion,
          props = _objectWithoutProperties(_this$props, ["in", "out", "onExited", "appear", "enter", "exit", "innerRef", "emotion"]);

      return React.createElement("input", _extends$2({
        ref: innerRef
      }, props, {
        className:
        /*#__PURE__*/

        /*#__PURE__*/
        css$1({
          label: 'dummyInput',
          // get rid of any default styles
          background: 0,
          border: 0,
          fontSize: 'inherit',
          outline: 0,
          padding: 0,
          // important! without `width` browsers won't allow focus
          width: 1,
          // remove cursor on desktop
          color: 'transparent',
          // remove cursor on mobile whilst maintaining "scroll into view" behaviour
          left: -100,
          opacity: 0,
          position: 'relative',
          transform: 'scale(0)'
        })
      }));
    }
  }]);

  return DummyInput;
}(Component);

var NodeResolver =
/*#__PURE__*/
function (_Component) {
  _inherits(NodeResolver, _Component);

  function NodeResolver() {
    _classCallCheck(this, NodeResolver);

    return _possibleConstructorReturn(this, _getPrototypeOf(NodeResolver).apply(this, arguments));
  }

  _createClass(NodeResolver, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.props.innerRef(findDOMNode(this));
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.props.innerRef(null);
    }
  }, {
    key: "render",
    value: function render() {
      return this.props.children;
    }
  }]);

  return NodeResolver;
}(Component);

var STYLE_KEYS = ['boxSizing', 'height', 'overflow', 'paddingRight', 'position'];
var LOCK_STYLES = {
  boxSizing: 'border-box',
  // account for possible declaration `width: 100%;` on body
  overflow: 'hidden',
  position: 'relative',
  height: '100%'
};

function preventTouchMove(e) {
  e.preventDefault();
}
function allowTouchMove(e) {
  e.stopPropagation();
}
function preventInertiaScroll() {
  var top = this.scrollTop;
  var totalScroll = this.scrollHeight;
  var currentScroll = top + this.offsetHeight;

  if (top === 0) {
    this.scrollTop = 1;
  } else if (currentScroll === totalScroll) {
    this.scrollTop = top - 1;
  }
} // `ontouchstart` check works on most browsers
// `maxTouchPoints` works on IE10/11 and Surface

function isTouchDevice() {
  return 'ontouchstart' in window || navigator.maxTouchPoints;
}

var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
var activeScrollLocks = 0;

var ScrollLock =
/*#__PURE__*/
function (_Component) {
  _inherits(ScrollLock, _Component);

  function ScrollLock() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, ScrollLock);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ScrollLock)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "originalStyles", {});

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "listenerOptions", {
      capture: false,
      passive: false
    });

    return _this;
  }

  _createClass(ScrollLock, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      if (!canUseDOM) return;
      var _this$props = this.props,
          accountForScrollbars = _this$props.accountForScrollbars,
          touchScrollTarget = _this$props.touchScrollTarget;
      var target = document.body;
      var targetStyle = target && target.style;

      if (accountForScrollbars) {
        // store any styles already applied to the body
        STYLE_KEYS.forEach(function (key) {
          var val = targetStyle && targetStyle[key];
          _this2.originalStyles[key] = val;
        });
      } // apply the lock styles and padding if this is the first scroll lock


      if (accountForScrollbars && activeScrollLocks < 1) {
        var currentPadding = parseInt(this.originalStyles.paddingRight, 10) || 0;
        var clientWidth = document.body ? document.body.clientWidth : 0;
        var adjustedPadding = window.innerWidth - clientWidth + currentPadding || 0;
        Object.keys(LOCK_STYLES).forEach(function (key) {
          var val = LOCK_STYLES[key];

          if (targetStyle) {
            targetStyle[key] = val;
          }
        });

        if (targetStyle) {
          targetStyle.paddingRight = "".concat(adjustedPadding, "px");
        }
      } // account for touch devices


      if (target && isTouchDevice()) {
        // Mobile Safari ignores { overflow: hidden } declaration on the body.
        target.addEventListener('touchmove', preventTouchMove, this.listenerOptions); // Allow scroll on provided target

        if (touchScrollTarget) {
          touchScrollTarget.addEventListener('touchstart', preventInertiaScroll, this.listenerOptions);
          touchScrollTarget.addEventListener('touchmove', allowTouchMove, this.listenerOptions);
        }
      } // increment active scroll locks


      activeScrollLocks += 1;
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var _this3 = this;

      if (!canUseDOM) return;
      var _this$props2 = this.props,
          accountForScrollbars = _this$props2.accountForScrollbars,
          touchScrollTarget = _this$props2.touchScrollTarget;
      var target = document.body;
      var targetStyle = target && target.style; // safely decrement active scroll locks

      activeScrollLocks = Math.max(activeScrollLocks - 1, 0); // reapply original body styles, if any

      if (accountForScrollbars && activeScrollLocks < 1) {
        STYLE_KEYS.forEach(function (key) {
          var val = _this3.originalStyles[key];

          if (targetStyle) {
            targetStyle[key] = val;
          }
        });
      } // remove touch listeners


      if (target && isTouchDevice()) {
        target.removeEventListener('touchmove', preventTouchMove, this.listenerOptions);

        if (touchScrollTarget) {
          touchScrollTarget.removeEventListener('touchstart', preventInertiaScroll, this.listenerOptions);
          touchScrollTarget.removeEventListener('touchmove', allowTouchMove, this.listenerOptions);
        }
      }
    }
  }, {
    key: "render",
    value: function render() {
      return null;
    }
  }]);

  return ScrollLock;
}(Component);

_defineProperty$1(ScrollLock, "defaultProps", {
  accountForScrollbars: true
});

// NOTE:
// We shouldn't need this after updating to React v16.3.0, which introduces:
// - createRef() https://reactjs.org/docs/react-api.html#reactcreateref
// - forwardRef() https://reactjs.org/docs/react-api.html#reactforwardref
var ScrollBlock =
/*#__PURE__*/
function (_PureComponent) {
  _inherits(ScrollBlock, _PureComponent);

  function ScrollBlock() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, ScrollBlock);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ScrollBlock)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "state", {
      touchScrollTarget: null
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getScrollTarget", function (ref) {
      if (ref === _this.state.touchScrollTarget) return;

      _this.setState({
        touchScrollTarget: ref
      });
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "blurSelectInput", function () {
      if (document.activeElement) {
        document.activeElement.blur();
      }
    });

    return _this;
  }

  _createClass(ScrollBlock, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          children = _this$props.children,
          isEnabled = _this$props.isEnabled;
      var touchScrollTarget = this.state.touchScrollTarget; // bail early if not enabled

      if (!isEnabled) return children;
      /*
       * Div
       * ------------------------------
       * blocks scrolling on non-body elements behind the menu
        * NodeResolver
       * ------------------------------
       * we need a reference to the scrollable element to "unlock" scroll on
       * mobile devices
        * ScrollLock
       * ------------------------------
       * actually does the scroll locking
       */

      return React.createElement("div", null, React.createElement("div", {
        onClick: this.blurSelectInput,
        className:
        /*#__PURE__*/

        /*#__PURE__*/
        css$1({
          position: 'fixed',
          left: 0,
          bottom: 0,
          right: 0,
          top: 0
        })
      }), React.createElement(NodeResolver, {
        innerRef: this.getScrollTarget
      }, children), touchScrollTarget ? React.createElement(ScrollLock, {
        touchScrollTarget: touchScrollTarget
      }) : null);
    }
  }]);

  return ScrollBlock;
}(PureComponent);

var ScrollCaptor =
/*#__PURE__*/
function (_Component) {
  _inherits(ScrollCaptor, _Component);

  function ScrollCaptor() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, ScrollCaptor);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ScrollCaptor)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "isBottom", false);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "isTop", false);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "scrollTarget", void 0);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "touchStart", void 0);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "cancelScroll", function (event) {
      event.preventDefault();
      event.stopPropagation();
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "handleEventDelta", function (event, delta) {
      var _this$props = _this.props,
          onBottomArrive = _this$props.onBottomArrive,
          onBottomLeave = _this$props.onBottomLeave,
          onTopArrive = _this$props.onTopArrive,
          onTopLeave = _this$props.onTopLeave;
      var _this$scrollTarget = _this.scrollTarget,
          scrollTop = _this$scrollTarget.scrollTop,
          scrollHeight = _this$scrollTarget.scrollHeight,
          clientHeight = _this$scrollTarget.clientHeight;
      var target = _this.scrollTarget;
      var isDeltaPositive = delta > 0;
      var availableScroll = scrollHeight - clientHeight - scrollTop;
      var shouldCancelScroll = false; // reset bottom/top flags

      if (availableScroll > delta && _this.isBottom) {
        if (onBottomLeave) onBottomLeave(event);
        _this.isBottom = false;
      }

      if (isDeltaPositive && _this.isTop) {
        if (onTopLeave) onTopLeave(event);
        _this.isTop = false;
      } // bottom limit


      if (isDeltaPositive && delta > availableScroll) {
        if (onBottomArrive && !_this.isBottom) {
          onBottomArrive(event);
        }

        target.scrollTop = scrollHeight;
        shouldCancelScroll = true;
        _this.isBottom = true; // top limit
      } else if (!isDeltaPositive && -delta > scrollTop) {
        if (onTopArrive && !_this.isTop) {
          onTopArrive(event);
        }

        target.scrollTop = 0;
        shouldCancelScroll = true;
        _this.isTop = true;
      } // cancel scroll


      if (shouldCancelScroll) {
        _this.cancelScroll(event);
      }
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onWheel", function (event) {
      _this.handleEventDelta(event, event.deltaY);
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onTouchStart", function (event) {
      // set touch start so we can calculate touchmove delta
      _this.touchStart = event.changedTouches[0].clientY;
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onTouchMove", function (event) {
      var deltaY = _this.touchStart - event.changedTouches[0].clientY;

      _this.handleEventDelta(event, deltaY);
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getScrollTarget", function (ref) {
      _this.scrollTarget = ref;
    });

    return _this;
  }

  _createClass(ScrollCaptor, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.startListening(this.scrollTarget);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.stopListening(this.scrollTarget);
    }
  }, {
    key: "startListening",
    value: function startListening(el) {
      // bail early if no scroll available
      if (!el) return;
      if (el.scrollHeight <= el.clientHeight) return; // all the if statements are to appease Flow 😢

      if (typeof el.addEventListener === 'function') {
        el.addEventListener('wheel', this.onWheel, false);
      }

      if (typeof el.addEventListener === 'function') {
        el.addEventListener('touchstart', this.onTouchStart, false);
      }

      if (typeof el.addEventListener === 'function') {
        el.addEventListener('touchmove', this.onTouchMove, false);
      }
    }
  }, {
    key: "stopListening",
    value: function stopListening(el) {
      // bail early if no scroll available
      if (el.scrollHeight <= el.clientHeight) return; // all the if statements are to appease Flow 😢

      if (typeof el.removeEventListener === 'function') {
        el.removeEventListener('wheel', this.onWheel, false);
      }

      if (typeof el.removeEventListener === 'function') {
        el.removeEventListener('touchstart', this.onTouchStart, false);
      }

      if (typeof el.removeEventListener === 'function') {
        el.removeEventListener('touchmove', this.onTouchMove, false);
      }
    }
  }, {
    key: "render",
    value: function render() {
      return React.createElement(NodeResolver, {
        innerRef: this.getScrollTarget
      }, this.props.children);
    }
  }]);

  return ScrollCaptor;
}(Component);

var ScrollCaptorSwitch =
/*#__PURE__*/
function (_Component2) {
  _inherits(ScrollCaptorSwitch, _Component2);

  function ScrollCaptorSwitch() {
    _classCallCheck(this, ScrollCaptorSwitch);

    return _possibleConstructorReturn(this, _getPrototypeOf(ScrollCaptorSwitch).apply(this, arguments));
  }

  _createClass(ScrollCaptorSwitch, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          isEnabled = _this$props2.isEnabled,
          props = _objectWithoutProperties(_this$props2, ["isEnabled"]);

      return isEnabled ? React.createElement(ScrollCaptor, props) : this.props.children;
    }
  }]);

  return ScrollCaptorSwitch;
}(Component);

_defineProperty$1(ScrollCaptorSwitch, "defaultProps", {
  isEnabled: true
});

var instructionsAriaMessage = function instructionsAriaMessage(event) {
  var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var isSearchable = context.isSearchable,
      isMulti = context.isMulti,
      label = context.label,
      isDisabled = context.isDisabled;

  switch (event) {
    case 'menu':
      return "Use Up and Down to choose options".concat(isDisabled ? '' : ', press Enter to select the currently focused option', ", press Escape to exit the menu, press Tab to select the option and exit the menu.");

    case 'input':
      return "".concat(label ? label : 'Select', " is focused ").concat(isSearchable ? ',type to refine list' : '', ", press Down to open the menu, ").concat(isMulti ? ' press left to focus selected values' : '');

    case 'value':
      return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';
  }
};
var valueEventAriaMessage = function valueEventAriaMessage(event, context) {
  var value = context.value,
      isDisabled = context.isDisabled;
  if (!value) return;

  switch (event) {
    case 'deselect-option':
    case 'pop-value':
    case 'remove-value':
      return "option ".concat(value, ", deselected.");

    case 'select-option':
      return isDisabled ? "option ".concat(value, " is disabled. Select another option.") : "option ".concat(value, ", selected.");
  }
};
var valueFocusAriaMessage = function valueFocusAriaMessage(_ref) {
  var focusedValue = _ref.focusedValue,
      getOptionLabel = _ref.getOptionLabel,
      selectValue = _ref.selectValue;
  return "value ".concat(getOptionLabel(focusedValue), " focused, ").concat(selectValue.indexOf(focusedValue) + 1, " of ").concat(selectValue.length, ".");
};
var optionFocusAriaMessage = function optionFocusAriaMessage(_ref2) {
  var focusedOption = _ref2.focusedOption,
      getOptionLabel = _ref2.getOptionLabel,
      options = _ref2.options;
  return "option ".concat(getOptionLabel(focusedOption), " focused").concat(focusedOption.isDisabled ? ' disabled' : '', ", ").concat(options.indexOf(focusedOption) + 1, " of ").concat(options.length, ".");
};
var resultsAriaMessage = function resultsAriaMessage(_ref3) {
  var inputValue = _ref3.inputValue,
      screenReaderMessage = _ref3.screenReaderMessage;
  return "".concat(screenReaderMessage).concat(inputValue ? ' for search term ' + inputValue : '', ".");
};

var formatGroupLabel = function formatGroupLabel(group) {
  return group.label;
};
var getOptionLabel = function getOptionLabel(option) {
  return option.label;
};
var getOptionValue = function getOptionValue(option) {
  return option.value;
};
var isOptionDisabled = function isOptionDisabled(option) {
  return !!option.isDisabled;
};

var containerCSS = function containerCSS(_ref) {
  var isDisabled = _ref.isDisabled,
      isRtl = _ref.isRtl;
  return {
    label: 'container',
    direction: isRtl ? 'rtl' : null,
    pointerEvents: isDisabled ? 'none' : null,
    // cancel mouse events when disabled
    position: 'relative'
  };
};
var SelectContainer = function SelectContainer(props) {
  var children = props.children,
      className = props.className,
      cx$$1 = props.cx,
      getStyles = props.getStyles,
      innerProps = props.innerProps,
      isDisabled = props.isDisabled,
      isRtl = props.isRtl;
  return React.createElement("div", _extends$2({
    className: cx$$1(
    /*#__PURE__*/
    css$1(getStyles('container', props)), {
      '--is-disabled': isDisabled,
      '--is-rtl': isRtl
    }, className)
  }, innerProps), children);
}; // ==============================
// Value Container
// ==============================

var valueContainerCSS = function valueContainerCSS(_ref2) {
  var spacing = _ref2.theme.spacing;
  return {
    alignItems: 'center',
    display: 'flex',
    flex: 1,
    flexWrap: 'wrap',
    padding: "".concat(spacing.baseUnit / 2, "px ").concat(spacing.baseUnit * 2, "px"),
    WebkitOverflowScrolling: 'touch',
    position: 'relative',
    overflow: 'hidden'
  };
};
var ValueContainer =
/*#__PURE__*/
function (_Component) {
  _inherits(ValueContainer, _Component);

  function ValueContainer() {
    _classCallCheck(this, ValueContainer);

    return _possibleConstructorReturn(this, _getPrototypeOf(ValueContainer).apply(this, arguments));
  }

  _createClass(ValueContainer, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          children = _this$props.children,
          className = _this$props.className,
          cx$$1 = _this$props.cx,
          isMulti = _this$props.isMulti,
          getStyles = _this$props.getStyles,
          hasValue = _this$props.hasValue;
      return React.createElement("div", {
        className: cx$$1(
        /*#__PURE__*/
        css$1(getStyles('valueContainer', this.props)), {
          'value-container': true,
          'value-container--is-multi': isMulti,
          'value-container--has-value': hasValue
        }, className)
      }, children);
    }
  }]);

  return ValueContainer;
}(Component); // ==============================
// Indicator Container
// ==============================

var indicatorsContainerCSS = function indicatorsContainerCSS() {
  return {
    alignItems: 'center',
    alignSelf: 'stretch',
    display: 'flex',
    flexShrink: 0
  };
};
var IndicatorsContainer = function IndicatorsContainer(props) {
  var children = props.children,
      className = props.className,
      cx$$1 = props.cx,
      getStyles = props.getStyles;
  return React.createElement("div", {
    className: cx$$1(
    /*#__PURE__*/
    css$1(getStyles('indicatorsContainer', props)), {
      'indicators': true
    }, className)
  }, children);
};

// ==============================
// Dropdown & Clear Icons
// ==============================
var Svg = function Svg(_ref) {
  var size = _ref.size,
      props = _objectWithoutProperties(_ref, ["size"]);

  return React.createElement("svg", _extends$2({
    height: size,
    width: size,
    viewBox: "0 0 20 20",
    "aria-hidden": "true",
    focusable: "false",
    className:
    /*#__PURE__*/

    /*#__PURE__*/
    css$1({
      display: 'inline-block',
      fill: 'currentColor',
      lineHeight: 1,
      stroke: 'currentColor',
      strokeWidth: 0
    })
  }, props));
};

var CrossIcon = function CrossIcon(props) {
  return React.createElement(Svg, _extends$2({
    size: 20
  }, props), React.createElement("path", {
    d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
  }));
};
var DownChevron = function DownChevron(props) {
  return React.createElement(Svg, _extends$2({
    size: 20
  }, props), React.createElement("path", {
    d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
  }));
}; // ==============================
// Dropdown & Clear Buttons
// ==============================

var baseCSS = function baseCSS(_ref2) {
  var isFocused = _ref2.isFocused,
      _ref2$theme = _ref2.theme,
      baseUnit = _ref2$theme.spacing.baseUnit,
      colors = _ref2$theme.colors;
  return {
    label: 'indicatorContainer',
    color: isFocused ? colors.neutral60 : colors.neutral20,
    display: 'flex',
    padding: baseUnit * 2,
    transition: 'color 150ms',
    ':hover': {
      color: isFocused ? colors.neutral80 : colors.neutral40
    }
  };
};

var dropdownIndicatorCSS = baseCSS;
var DropdownIndicator = function DropdownIndicator(props) {
  var children = props.children,
      className = props.className,
      cx$$1 = props.cx,
      getStyles = props.getStyles,
      innerProps = props.innerProps;
  return React.createElement("div", _extends$2({}, innerProps, {
    className: cx$$1(
    /*#__PURE__*/
    css$1(getStyles('dropdownIndicator', props)), {
      'indicator': true,
      'dropdown-indicator': true
    }, className)
  }), children || React.createElement(DownChevron, null));
};
var clearIndicatorCSS = baseCSS;
var ClearIndicator = function ClearIndicator(props) {
  var children = props.children,
      className = props.className,
      cx$$1 = props.cx,
      getStyles = props.getStyles,
      innerProps = props.innerProps;
  return React.createElement("div", _extends$2({}, innerProps, {
    className: cx$$1(
    /*#__PURE__*/
    css$1(getStyles('clearIndicator', props)), {
      'indicator': true,
      'clear-indicator': true
    }, className)
  }), children || React.createElement(CrossIcon, null));
}; // ==============================
// Separator
// ==============================

var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref3) {
  var isDisabled = _ref3.isDisabled,
      _ref3$theme = _ref3.theme,
      baseUnit = _ref3$theme.spacing.baseUnit,
      colors = _ref3$theme.colors;
  return {
    label: 'indicatorSeparator',
    alignSelf: 'stretch',
    backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
    marginBottom: baseUnit * 2,
    marginTop: baseUnit * 2,
    width: 1
  };
};
var IndicatorSeparator = function IndicatorSeparator(props) {
  var className = props.className,
      cx$$1 = props.cx,
      getStyles = props.getStyles,
      innerProps = props.innerProps;
  return React.createElement("span", _extends$2({}, innerProps, {
    className: cx$$1(
    /*#__PURE__*/
    css$1(getStyles('indicatorSeparator', props)), {
      'indicator-separator': true
    }, className)
  }));
}; // ==============================
// Loading
// ==============================

var keyframesName = 'react-select-loading-indicator';
var keyframesInjected = false;
var loadingIndicatorCSS = function loadingIndicatorCSS(_ref4) {
  var isFocused = _ref4.isFocused,
      size = _ref4.size,
      _ref4$theme = _ref4.theme,
      colors = _ref4$theme.colors,
      baseUnit = _ref4$theme.spacing.baseUnit;
  return {
    label: 'loadingIndicator',
    color: isFocused ? colors.neutral60 : colors.neutral20,
    display: 'flex',
    padding: baseUnit * 2,
    transition: 'color 150ms',
    alignSelf: 'center',
    fontSize: size,
    lineHeight: 1,
    marginRight: size,
    textAlign: 'center',
    verticalAlign: 'middle'
  };
};

var LoadingDot = function LoadingDot(_ref5) {
  var color = _ref5.color,
      delay = _ref5.delay,
      offset = _ref5.offset;
  return React.createElement("span", {
    className:
    /*#__PURE__*/

    /*#__PURE__*/
    css$1({
      animationDuration: '1s',
      animationDelay: "".concat(delay, "ms"),
      animationIterationCount: 'infinite',
      animationName: keyframesName,
      animationTimingFunction: 'ease-in-out',
      backgroundColor: color,
      borderRadius: '1em',
      display: 'inline-block',
      marginLeft: offset ? '1em' : null,
      height: '1em',
      verticalAlign: 'top',
      width: '1em'
    })
  });
};

var LoadingIndicator = function LoadingIndicator(props) {
  var className = props.className,
      cx$$1 = props.cx,
      getStyles = props.getStyles,
      innerProps = props.innerProps,
      isFocused = props.isFocused,
      isRtl = props.isRtl,
      colors = props.theme.colors;
  var color = isFocused ? colors.neutral80 : colors.neutral20;

  if (!keyframesInjected) {
    // eslint-disable-next-line no-unused-expressions
    injectGlobal("@keyframes ", keyframesName, "{0%,80%,100%{opacity:0;}40%{opacity:1;}};");
    keyframesInjected = true;
  }

  return React.createElement("div", _extends$2({}, innerProps, {
    className: cx$$1(
    /*#__PURE__*/
    css$1(getStyles('loadingIndicator', props)), {
      'indicator': true,
      'loading-indicator': true
    }, className)
  }), React.createElement(LoadingDot, {
    color: color,
    delay: 0,
    offset: isRtl
  }), React.createElement(LoadingDot, {
    color: color,
    delay: 160,
    offset: true
  }), React.createElement(LoadingDot, {
    color: color,
    delay: 320,
    offset: !isRtl
  }));
};
LoadingIndicator.defaultProps = {
  size: 4
};

var css$1$1 = function css$$1(_ref) {
  var isDisabled = _ref.isDisabled,
      isFocused = _ref.isFocused,
      _ref$theme = _ref.theme,
      colors = _ref$theme.colors,
      borderRadius = _ref$theme.borderRadius,
      spacing = _ref$theme.spacing;
  return {
    label: 'control',
    alignItems: 'center',
    backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,
    borderColor: isDisabled ? colors.neutral10 : isFocused ? colors.primary : colors.neutral20,
    borderRadius: borderRadius,
    borderStyle: 'solid',
    borderWidth: 1,
    boxShadow: isFocused ? "0 0 0 1px ".concat(colors.primary) : null,
    cursor: 'default',
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    minHeight: spacing.controlHeight,
    outline: '0 !important',
    position: 'relative',
    transition: 'all 100ms',
    '&:hover': {
      borderColor: isFocused ? colors.primary : colors.neutral30
    }
  };
};

var Control = function Control(props) {
  var children = props.children,
      cx$$1 = props.cx,
      getStyles = props.getStyles,
      className = props.className,
      isDisabled = props.isDisabled,
      isFocused = props.isFocused,
      innerRef = props.innerRef,
      innerProps = props.innerProps,
      menuIsOpen = props.menuIsOpen;
  return React.createElement("div", _extends$2({
    ref: innerRef,
    className: cx$$1(
    /*#__PURE__*/
    css$1(getStyles('control', props)), {
      'control': true,
      'control--is-disabled': isDisabled,
      'control--is-focused': isFocused,
      'control--menu-is-open': menuIsOpen
    }, className)
  }, innerProps), children);
};

var groupCSS = function groupCSS(_ref) {
  var spacing = _ref.theme.spacing;
  return {
    paddingBottom: spacing.baseUnit * 2,
    paddingTop: spacing.baseUnit * 2
  };
};

var Group = function Group(props) {
  var children = props.children,
      className = props.className,
      cx$$1 = props.cx,
      getStyles = props.getStyles,
      Heading = props.Heading,
      headingProps = props.headingProps,
      label = props.label,
      theme = props.theme,
      selectProps = props.selectProps;
  return React.createElement("div", {
    className: cx$$1(
    /*#__PURE__*/
    css$1(getStyles('group', props)), {
      'group': true
    }, className)
  }, React.createElement(Heading, _extends$2({}, headingProps, {
    selectProps: selectProps,
    theme: theme,
    getStyles: getStyles,
    cx: cx$$1
  }), label), React.createElement("div", null, children));
};

var groupHeadingCSS = function groupHeadingCSS(_ref2) {
  var spacing = _ref2.theme.spacing;
  return {
    label: 'group',
    color: '#999',
    cursor: 'default',
    display: 'block',
    fontSize: '75%',
    fontWeight: '500',
    marginBottom: '0.25em',
    paddingLeft: spacing.baseUnit * 3,
    paddingRight: spacing.baseUnit * 3,
    textTransform: 'uppercase'
  };
};
var GroupHeading = function GroupHeading(props) {
  var className = props.className,
      cx$$1 = props.cx,
      getStyles = props.getStyles,
      theme = props.theme,
      selectProps = props.selectProps,
      cleanProps = _objectWithoutProperties(props, ["className", "cx", "getStyles", "theme", "selectProps"]);

  return React.createElement("div", _extends$2({
    className: cx$$1(
    /*#__PURE__*/
    css$1(getStyles('groupHeading', _objectSpread({
      theme: theme
    }, cleanProps))), {
      'group-heading': true
    }, className)
  }, cleanProps));
};

var inputCSS = function inputCSS(_ref) {
  var isDisabled = _ref.isDisabled,
      _ref$theme = _ref.theme,
      spacing = _ref$theme.spacing,
      colors = _ref$theme.colors;
  return {
    margin: spacing.baseUnit / 2,
    paddingBottom: spacing.baseUnit / 2,
    paddingTop: spacing.baseUnit / 2,
    visibility: isDisabled ? 'hidden' : 'visible',
    color: colors.neutral80
  };
};

var inputStyle = function inputStyle(isHidden) {
  return {
    label: 'input',
    background: 0,
    border: 0,
    fontSize: 'inherit',
    opacity: isHidden ? 0 : 1,
    outline: 0,
    padding: 0,
    color: 'inherit'
  };
};

var Input$3 = function Input$$1(_ref2) {
  var className = _ref2.className,
      cx$$1 = _ref2.cx,
      getStyles = _ref2.getStyles,
      innerRef = _ref2.innerRef,
      isHidden = _ref2.isHidden,
      isDisabled = _ref2.isDisabled,
      theme = _ref2.theme,
      selectProps = _ref2.selectProps,
      props = _objectWithoutProperties(_ref2, ["className", "cx", "getStyles", "innerRef", "isHidden", "isDisabled", "theme", "selectProps"]);

  return React.createElement("div", {
    className:
    /*#__PURE__*/

    /*#__PURE__*/
    css$1(getStyles('input', _objectSpread({
      theme: theme
    }, props)))
  }, React.createElement(AutosizeInput, _extends$2({
    className: cx$$1(null, {
      'input': true
    }, className),
    inputRef: innerRef,
    inputStyle: inputStyle(isHidden),
    disabled: isDisabled
  }, props)));
};

var multiValueCSS = function multiValueCSS(_ref) {
  var _ref$theme = _ref.theme,
      spacing = _ref$theme.spacing,
      borderRadius = _ref$theme.borderRadius,
      colors = _ref$theme.colors;
  return {
    label: 'multiValue',
    backgroundColor: colors.neutral10,
    borderRadius: borderRadius / 2,
    display: 'flex',
    margin: spacing.baseUnit / 2,
    minWidth: 0 // resolves flex/text-overflow bug

  };
};
var multiValueLabelCSS = function multiValueLabelCSS(_ref2) {
  var _ref2$theme = _ref2.theme,
      borderRadius = _ref2$theme.borderRadius,
      colors = _ref2$theme.colors,
      cropWithEllipsis = _ref2.cropWithEllipsis;
  return {
    borderRadius: borderRadius / 2,
    color: colors.neutral80,
    fontSize: '85%',
    overflow: 'hidden',
    padding: 3,
    paddingLeft: 6,
    textOverflow: cropWithEllipsis ? 'ellipsis' : null,
    whiteSpace: 'nowrap'
  };
};
var multiValueRemoveCSS = function multiValueRemoveCSS(_ref3) {
  var _ref3$theme = _ref3.theme,
      spacing = _ref3$theme.spacing,
      borderRadius = _ref3$theme.borderRadius,
      colors = _ref3$theme.colors,
      isFocused = _ref3.isFocused;
  return {
    alignItems: 'center',
    borderRadius: borderRadius / 2,
    backgroundColor: isFocused && colors.dangerLight,
    display: 'flex',
    paddingLeft: spacing.baseUnit,
    paddingRight: spacing.baseUnit,
    ':hover': {
      backgroundColor: colors.dangerLight,
      color: colors.danger
    }
  };
};
var MultiValueGeneric = function MultiValueGeneric(_ref4) {
  var children = _ref4.children,
      innerProps = _ref4.innerProps;
  return React.createElement("div", innerProps, children);
};
var MultiValueContainer = MultiValueGeneric;
var MultiValueLabel = MultiValueGeneric;
var MultiValueRemove =
/*#__PURE__*/
function (_Component) {
  _inherits(MultiValueRemove, _Component);

  function MultiValueRemove() {
    _classCallCheck(this, MultiValueRemove);

    return _possibleConstructorReturn(this, _getPrototypeOf(MultiValueRemove).apply(this, arguments));
  }

  _createClass(MultiValueRemove, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          children = _this$props.children,
          innerProps = _this$props.innerProps;
      return React.createElement("div", innerProps, children || React.createElement(CrossIcon, {
        size: 14
      }));
    }
  }]);

  return MultiValueRemove;
}(Component);

var MultiValue =
/*#__PURE__*/
function (_Component2) {
  _inherits(MultiValue, _Component2);

  function MultiValue() {
    _classCallCheck(this, MultiValue);

    return _possibleConstructorReturn(this, _getPrototypeOf(MultiValue).apply(this, arguments));
  }

  _createClass(MultiValue, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          children = _this$props2.children,
          className = _this$props2.className,
          components = _this$props2.components,
          cx$$1 = _this$props2.cx,
          data = _this$props2.data,
          getStyles = _this$props2.getStyles,
          innerProps = _this$props2.innerProps,
          isDisabled = _this$props2.isDisabled,
          removeProps = _this$props2.removeProps,
          selectProps = _this$props2.selectProps;
      var Container = components.Container,
          Label$$1 = components.Label,
          Remove = components.Remove;

      var containerInnerProps = _objectSpread({
        className: cx$$1(
        /*#__PURE__*/
        css$1(getStyles('multiValue', this.props)), {
          'multi-value': true,
          'multi-value--is-disabled': isDisabled
        }, className)
      }, innerProps);

      var labelInnerProps = {
        className: cx$$1(
        /*#__PURE__*/
        css$1(getStyles('multiValueLabel', this.props)), {
          'multi-value__label': true
        }, className)
      };

      var removeInnerProps = _objectSpread({
        className: cx$$1(
        /*#__PURE__*/
        css$1(getStyles('multiValueRemove', this.props)), {
          'multi-value__remove': true
        }, className)
      }, removeProps);

      return React.createElement(Container, {
        data: data,
        innerProps: containerInnerProps,
        selectProps: selectProps
      }, React.createElement(Label$$1, {
        data: data,
        innerProps: labelInnerProps,
        selectProps: selectProps
      }, children), React.createElement(Remove, {
        data: data,
        innerProps: removeInnerProps,
        selectProps: selectProps
      }));
    }
  }]);

  return MultiValue;
}(Component);

_defineProperty$1(MultiValue, "defaultProps", {
  cropWithEllipsis: true
});

var optionCSS = function optionCSS(_ref) {
  var isDisabled = _ref.isDisabled,
      isFocused = _ref.isFocused,
      isSelected = _ref.isSelected,
      _ref$theme = _ref.theme,
      spacing = _ref$theme.spacing,
      colors = _ref$theme.colors;
  return {
    label: 'option',
    backgroundColor: isSelected ? colors.primary : isFocused ? colors.primary25 : 'transparent',
    color: isDisabled ? colors.neutral20 : isSelected ? colors.neutral0 : 'inherit',
    cursor: 'default',
    display: 'block',
    fontSize: 'inherit',
    padding: "".concat(spacing.baseUnit * 2, "px ").concat(spacing.baseUnit * 3, "px"),
    width: '100%',
    userSelect: 'none',
    WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
    // provide some affordance on touch devices
    ':active': {
      backgroundColor: isSelected ? colors.primary : colors.primary50
    }
  };
};

var Option = function Option(props) {
  var children = props.children,
      className = props.className,
      cx$$1 = props.cx,
      getStyles = props.getStyles,
      isDisabled = props.isDisabled,
      isFocused = props.isFocused,
      isSelected = props.isSelected,
      innerRef = props.innerRef,
      innerProps = props.innerProps;
  return React.createElement("div", _extends$2({
    ref: innerRef,
    className: cx$$1(
    /*#__PURE__*/
    css$1(getStyles('option', props)), {
      'option': true,
      'option--is-disabled': isDisabled,
      'option--is-focused': isFocused,
      'option--is-selected': isSelected
    }, className)
  }, innerProps), children);
};

var placeholderCSS = function placeholderCSS(_ref) {
  var _ref$theme = _ref.theme,
      spacing = _ref$theme.spacing,
      colors = _ref$theme.colors;
  return {
    label: 'placeholder',
    color: colors.neutral50,
    marginLeft: spacing.baseUnit / 2,
    marginRight: spacing.baseUnit / 2,
    position: 'absolute',
    top: '50%',
    transform: 'translateY(-50%)'
  };
};

var Placeholder = function Placeholder(props) {
  var children = props.children,
      className = props.className,
      cx$$1 = props.cx,
      getStyles = props.getStyles,
      innerProps = props.innerProps;
  return React.createElement("div", _extends$2({
    className: cx$$1(
    /*#__PURE__*/
    css$1(getStyles('placeholder', props)), {
      'placeholder': true
    }, className)
  }, innerProps), children);
};

var css$2 = function css$$1(_ref) {
  var isDisabled = _ref.isDisabled,
      _ref$theme = _ref.theme,
      spacing = _ref$theme.spacing,
      colors = _ref$theme.colors;
  return {
    label: 'singleValue',
    color: isDisabled ? colors.neutral40 : colors.neutral80,
    marginLeft: spacing.baseUnit / 2,
    marginRight: spacing.baseUnit / 2,
    maxWidth: "calc(100% - ".concat(spacing.baseUnit * 2, "px)"),
    overflow: 'hidden',
    position: 'absolute',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    top: '50%',
    transform: 'translateY(-50%)'
  };
};

var SingleValue = function SingleValue(props) {
  var children = props.children,
      className = props.className,
      cx$$1 = props.cx,
      getStyles = props.getStyles,
      isDisabled = props.isDisabled,
      innerProps = props.innerProps;
  return React.createElement("div", _extends$2({
    className: cx$$1(
    /*#__PURE__*/
    css$1(getStyles('singleValue', props)), {
      'single-value': true,
      'single-value--is-disabled': isDisabled
    }, className)
  }, innerProps), children);
};

var components = {
  ClearIndicator: ClearIndicator,
  Control: Control,
  DropdownIndicator: DropdownIndicator,
  DownChevron: DownChevron,
  CrossIcon: CrossIcon,
  Group: Group,
  GroupHeading: GroupHeading,
  IndicatorsContainer: IndicatorsContainer,
  IndicatorSeparator: IndicatorSeparator,
  Input: Input$3,
  LoadingIndicator: LoadingIndicator,
  Menu: Menu$1,
  MenuList: MenuList,
  MenuPortal: MenuPortal,
  LoadingMessage: LoadingMessage,
  NoOptionsMessage: NoOptionsMessage,
  MultiValue: MultiValue,
  MultiValueContainer: MultiValueContainer,
  MultiValueLabel: MultiValueLabel,
  MultiValueRemove: MultiValueRemove,
  Option: Option,
  Placeholder: Placeholder,
  SelectContainer: SelectContainer,
  SingleValue: SingleValue,
  ValueContainer: ValueContainer
};
var defaultComponents = function defaultComponents(props) {
  return _objectSpread({}, components, props.components);
};

var defaultStyles = {
  clearIndicator: clearIndicatorCSS,
  container: containerCSS,
  control: css$1$1,
  dropdownIndicator: dropdownIndicatorCSS,
  group: groupCSS,
  groupHeading: groupHeadingCSS,
  indicatorsContainer: indicatorsContainerCSS,
  indicatorSeparator: indicatorSeparatorCSS,
  input: inputCSS,
  loadingIndicator: loadingIndicatorCSS,
  loadingMessage: loadingMessageCSS,
  menu: menuCSS,
  menuList: menuListCSS,
  menuPortal: menuPortalCSS,
  multiValue: multiValueCSS,
  multiValueLabel: multiValueLabelCSS,
  multiValueRemove: multiValueRemoveCSS,
  noOptionsMessage: noOptionsMessageCSS,
  option: optionCSS,
  placeholder: placeholderCSS,
  singleValue: css$2,
  valueContainer: valueContainerCSS
}; // Merge Utility

var colors$1 = {
  primary: '#2684FF',
  primary75: '#4C9AFF',
  primary50: '#B2D4FF',
  primary25: '#DEEBFF',
  danger: '#DE350B',
  dangerLight: '#FFBDAD',
  neutral0: 'hsl(0, 0%, 100%)',
  neutral5: 'hsl(0, 0%, 95%)',
  neutral10: 'hsl(0, 0%, 90%)',
  neutral20: 'hsl(0, 0%, 80%)',
  neutral30: 'hsl(0, 0%, 70%)',
  neutral40: 'hsl(0, 0%, 60%)',
  neutral50: 'hsl(0, 0%, 50%)',
  neutral60: 'hsl(0, 0%, 40%)',
  neutral70: 'hsl(0, 0%, 30%)',
  neutral80: 'hsl(0, 0%, 20%)',
  neutral90: 'hsl(0, 0%, 10%)'
};
var borderRadius = 4;
var baseUnit = 4;
/* Used to calculate consistent margin/padding on elements */

var controlHeight = 38;
/* The minimum height of the control */

var menuGutter = baseUnit * 2;
/* The amount of space between the control and menu */

var spacing = {
  baseUnit: baseUnit,
  controlHeight: controlHeight,
  menuGutter: menuGutter
};
var defaultTheme = {
  borderRadius: borderRadius,
  colors: colors$1,
  spacing: spacing
};

var defaultProps = {
  backspaceRemovesValue: true,
  blurInputOnSelect: isTouchCapable(),
  captureMenuScroll: !isTouchCapable(),
  closeMenuOnSelect: true,
  closeMenuOnScroll: false,
  components: {},
  controlShouldRenderValue: true,
  escapeClearsValue: false,
  filterOption: createFilter(),
  formatGroupLabel: formatGroupLabel,
  getOptionLabel: getOptionLabel,
  getOptionValue: getOptionValue,
  isDisabled: false,
  isLoading: false,
  isMulti: false,
  isRtl: false,
  isSearchable: true,
  isOptionDisabled: isOptionDisabled,
  loadingMessage: function loadingMessage() {
    return 'Loading...';
  },
  maxMenuHeight: 300,
  minMenuHeight: 140,
  menuIsOpen: false,
  menuPlacement: 'bottom',
  menuPosition: 'absolute',
  menuShouldBlockScroll: false,
  menuShouldScrollIntoView: !isMobileDevice(),
  noOptionsMessage: function noOptionsMessage() {
    return 'No options';
  },
  openMenuOnFocus: false,
  openMenuOnClick: true,
  options: [],
  pageSize: 5,
  placeholder: 'Select...',
  screenReaderStatus: function screenReaderStatus(_ref) {
    var count = _ref.count;
    return "".concat(count, " result").concat(count !== 1 ? 's' : '', " available");
  },
  styles: {},
  tabIndex: '0',
  tabSelectsValue: true
};
var instanceId = 1;

var Select =
/*#__PURE__*/
function (_Component) {
  _inherits(Select, _Component);

  // Misc. Instance Properties
  // ------------------------------
  // TODO
  // Refs
  // ------------------------------
  // Lifecycle
  // ------------------------------
  function Select(_props) {
    var _this;

    _classCallCheck(this, Select);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Select).call(this, _props));

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "state", {
      ariaLiveSelection: '',
      ariaLiveContext: '',
      focusedOption: null,
      focusedValue: null,
      inputIsHidden: false,
      isFocused: false,
      isComposing: false,
      menuOptions: {
        render: [],
        focusable: []
      },
      selectValue: []
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "blockOptionHover", false);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "clearFocusValueOnUpdate", false);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "commonProps", void 0);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "components", void 0);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "hasGroups", false);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "initialTouchX", 0);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "initialTouchY", 0);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "inputIsHiddenAfterUpdate", void 0);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "instancePrefix", '');

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "openAfterFocus", false);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "scrollToFocusedOptionOnUpdate", false);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "userIsDragging", void 0);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "controlRef", null);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getControlRef", function (ref) {
      _this.controlRef = ref;
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "focusedOptionRef", null);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getFocusedOptionRef", function (ref) {
      _this.focusedOptionRef = ref;
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "menuListRef", null);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getMenuListRef", function (ref) {
      _this.menuListRef = ref;
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "inputRef", null);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getInputRef", function (ref) {
      _this.inputRef = ref;
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "cacheComponents", function (components$$1) {
      _this.components = defaultComponents({
        components: components$$1
      });
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "focus", _this.focusInput);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "blur", _this.blurInput);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onChange", function (newValue, actionMeta) {
      var _this$props = _this.props,
          onChange = _this$props.onChange,
          name = _this$props.name;
      onChange(newValue, _objectSpread({}, actionMeta, {
        name: name
      }));
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "setValue", function (newValue) {
      var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'set-value';
      var option = arguments.length > 2 ? arguments[2] : undefined;
      var _this$props2 = _this.props,
          closeMenuOnSelect = _this$props2.closeMenuOnSelect,
          isMulti = _this$props2.isMulti;

      _this.onInputChange('', {
        action: 'set-value'
      });

      if (closeMenuOnSelect) {
        _this.inputIsHiddenAfterUpdate = !isMulti;

        _this.onMenuClose();
      } // when the select value should change, we should reset focusedValue


      _this.clearFocusValueOnUpdate = true;

      _this.onChange(newValue, {
        action: action,
        option: option
      });
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "selectOption", function (newValue) {
      var _this$props3 = _this.props,
          blurInputOnSelect = _this$props3.blurInputOnSelect,
          isMulti = _this$props3.isMulti;
      var selectValue = _this.state.selectValue;

      if (isMulti) {
        if (_this.isOptionSelected(newValue, selectValue)) {
          var candidate = _this.getOptionValue(newValue);

          _this.setValue(selectValue.filter(function (i) {
            return _this.getOptionValue(i) !== candidate;
          }), 'deselect-option', newValue);

          _this.announceAriaLiveSelection({
            event: 'deselect-option',
            context: {
              value: _this.getOptionLabel(newValue)
            }
          });
        } else {
          if (!_this.isOptionDisabled(newValue, selectValue)) {
            _this.setValue([].concat(_toConsumableArray(selectValue), [newValue]), 'select-option', newValue);

            _this.announceAriaLiveSelection({
              event: 'select-option',
              context: {
                value: _this.getOptionLabel(newValue)
              }
            });
          } else {
            // announce that option is disabled
            _this.announceAriaLiveSelection({
              event: 'select-option',
              context: {
                value: _this.getOptionLabel(newValue),
                isDisabled: true
              }
            });
          }
        }
      } else {
        if (!_this.isOptionDisabled(newValue, selectValue)) {
          _this.setValue(newValue, 'select-option');

          _this.announceAriaLiveSelection({
            event: 'select-option',
            context: {
              value: _this.getOptionLabel(newValue)
            }
          });
        } else {
          // announce that option is disabled
          _this.announceAriaLiveSelection({
            event: 'select-option',
            context: {
              value: _this.getOptionLabel(newValue),
              isDisabled: true
            }
          });
        }
      }

      if (blurInputOnSelect) {
        _this.blurInput();
      }
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "removeValue", function (removedValue) {
      var selectValue = _this.state.selectValue;

      var candidate = _this.getOptionValue(removedValue);

      _this.onChange(selectValue.filter(function (i) {
        return _this.getOptionValue(i) !== candidate;
      }), {
        action: 'remove-value',
        removedValue: removedValue
      });

      _this.announceAriaLiveSelection({
        event: 'remove-value',
        context: {
          value: removedValue ? _this.getOptionLabel(removedValue) : ''
        }
      });

      _this.focusInput();
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "clearValue", function () {
      var isMulti = _this.props.isMulti;

      _this.onChange(isMulti ? [] : null, {
        action: 'clear'
      });
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "popValue", function () {
      var selectValue = _this.state.selectValue;
      var lastSelectedValue = selectValue[selectValue.length - 1];

      _this.announceAriaLiveSelection({
        event: 'pop-value',
        context: {
          value: lastSelectedValue ? _this.getOptionLabel(lastSelectedValue) : ''
        }
      });

      _this.onChange(selectValue.slice(0, selectValue.length - 1), {
        action: 'pop-value',
        removedValue: lastSelectedValue
      });
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getOptionLabel", function (data) {
      return _this.props.getOptionLabel(data);
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getOptionValue", function (data) {
      return _this.props.getOptionValue(data);
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getStyles", function (key, props) {
      var base = defaultStyles[key](props);
      base.boxSizing = 'border-box';
      var custom = _this.props.styles[key];
      return custom ? custom(base, props) : base;
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getElementId", function (element) {
      return "".concat(_this.instancePrefix, "-").concat(element);
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getActiveDescendentId", function () {
      var menuIsOpen = _this.props.menuIsOpen;
      var _this$state = _this.state,
          menuOptions = _this$state.menuOptions,
          focusedOption = _this$state.focusedOption;
      if (!focusedOption || !menuIsOpen) return undefined;
      var index = menuOptions.focusable.indexOf(focusedOption);
      var option = menuOptions.render[index];
      return option && option.key;
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "announceAriaLiveSelection", function (_ref2) {
      var event = _ref2.event,
          context = _ref2.context;

      _this.setState({
        ariaLiveSelection: valueEventAriaMessage(event, context)
      });
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "announceAriaLiveContext", function (_ref3) {
      var event = _ref3.event,
          context = _ref3.context;

      _this.setState({
        ariaLiveContext: instructionsAriaMessage(event, _objectSpread({}, context, {
          label: _this.props['aria-label']
        }))
      });
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onMenuMouseDown", function (event) {
      if (event.button !== 0) {
        return;
      }

      event.stopPropagation();
      event.preventDefault();

      _this.focusInput();
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onMenuMouseMove", function (event) {
      _this.blockOptionHover = false;
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onControlMouseDown", function (event) {
      var openMenuOnClick = _this.props.openMenuOnClick;

      if (!_this.state.isFocused) {
        if (openMenuOnClick) {
          _this.openAfterFocus = true;
        }

        _this.focusInput();
      } else if (!_this.props.menuIsOpen) {
        if (openMenuOnClick) {
          _this.openMenu('first');
        }
      } else {
        //$FlowFixMe
        if (event.target.tagName !== 'INPUT') {
          _this.onMenuClose();
        }
      } //$FlowFixMe


      if (event.target.tagName !== 'INPUT') {
        event.preventDefault();
      }
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onDropdownIndicatorMouseDown", function (event) {
      // ignore mouse events that weren't triggered by the primary button
      if (event && event.type === 'mousedown' && event.button !== 0) {
        return;
      }

      if (_this.props.isDisabled) return;
      var _this$props4 = _this.props,
          isMulti = _this$props4.isMulti,
          menuIsOpen = _this$props4.menuIsOpen;

      _this.focusInput();

      if (menuIsOpen) {
        _this.inputIsHiddenAfterUpdate = !isMulti;

        _this.onMenuClose();
      } else {
        _this.openMenu('first');
      }

      event.preventDefault();
      event.stopPropagation();
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onClearIndicatorMouseDown", function (event) {
      // ignore mouse events that weren't triggered by the primary button
      if (event && event.type === 'mousedown' && event.button !== 0) {
        return;
      }

      _this.clearValue();

      event.stopPropagation();
      _this.openAfterFocus = false;
      setTimeout(function () {
        return _this.focusInput();
      });
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onScroll", function (event) {
      if (typeof _this.props.closeMenuOnScroll === 'boolean') {
        if (event.target instanceof HTMLElement && isDocumentElement(event.target)) {
          _this.props.onMenuClose();
        }
      } else if (typeof _this.props.closeMenuOnScroll === 'function') {
        if (_this.props.closeMenuOnScroll(event)) {
          _this.props.onMenuClose();
        }
      }
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onCompositionStart", function () {
      _this.setState({
        isComposing: true
      });
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onCompositionEnd", function () {
      _this.setState({
        isComposing: false
      });
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onTouchStart", function (_ref4) {
      var touches = _ref4.touches;
      var touch = touches.item(0);

      if (!touch) {
        return;
      }

      _this.initialTouchX = touch.clientX;
      _this.initialTouchY = touch.clientY;
      _this.userIsDragging = false;
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onTouchMove", function (_ref5) {
      var touches = _ref5.touches;
      var touch = touches.item(0);

      if (!touch) {
        return;
      }

      var deltaX = Math.abs(touch.clientX - _this.initialTouchX);
      var deltaY = Math.abs(touch.clientY - _this.initialTouchY);
      var moveThreshold = 5;
      _this.userIsDragging = deltaX > moveThreshold || deltaY > moveThreshold;
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onTouchEnd", function (event) {
      if (_this.userIsDragging) return; // close the menu if the user taps outside
      // we're checking on event.target here instead of event.currentTarget, because we want to assert information
      // on events on child elements, not the document (which we've attached this handler to).

      if (_this.controlRef && !_this.controlRef.contains(event.target) && _this.menuListRef && !_this.menuListRef.contains(event.target)) {
        _this.blurInput();
      } // reset move vars


      _this.initialTouchX = 0;
      _this.initialTouchY = 0;
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onControlTouchEnd", function (event) {
      if (_this.userIsDragging) return;

      _this.onControlMouseDown(event);
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onClearIndicatorTouchEnd", function (event) {
      if (_this.userIsDragging) return;

      _this.onClearIndicatorMouseDown(event);
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onDropdownIndicatorTouchEnd", function (event) {
      if (_this.userIsDragging) return;

      _this.onDropdownIndicatorMouseDown(event);
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "handleInputChange", function (event) {
      var inputValue = event.currentTarget.value;
      _this.inputIsHiddenAfterUpdate = false;

      _this.onInputChange(inputValue, {
        action: 'input-change'
      });

      _this.onMenuOpen();
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onInputFocus", function (event) {
      var _this$props5 = _this.props,
          isSearchable = _this$props5.isSearchable,
          isMulti = _this$props5.isMulti;

      if (_this.props.onFocus) {
        _this.props.onFocus(event);
      }

      _this.inputIsHiddenAfterUpdate = false;

      _this.announceAriaLiveContext({
        event: 'input',
        context: {
          isSearchable: isSearchable,
          isMulti: isMulti
        }
      });

      _this.setState({
        isFocused: true
      });

      if (_this.openAfterFocus || _this.props.openMenuOnFocus) {
        _this.openMenu('first');
      }

      _this.openAfterFocus = false;
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onInputBlur", function (event) {
      if (_this.menuListRef && _this.menuListRef.contains(document.activeElement)) {
        _this.inputRef.focus();

        return;
      }

      if (_this.props.onBlur) {
        _this.props.onBlur(event);
      }

      _this.onInputChange('', {
        action: 'input-blur'
      });

      _this.onMenuClose();

      _this.setState({
        focusedValue: null,
        isFocused: false
      });
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onOptionHover", function (focusedOption) {
      if (_this.blockOptionHover || _this.state.focusedOption === focusedOption) {
        return;
      }

      _this.setState({
        focusedOption: focusedOption
      });
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "shouldHideSelectedOptions", function () {
      var _this$props6 = _this.props,
          hideSelectedOptions = _this$props6.hideSelectedOptions,
          isMulti = _this$props6.isMulti;
      if (hideSelectedOptions === undefined) return isMulti;
      return hideSelectedOptions;
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onKeyDown", function (event) {
      var _this$props7 = _this.props,
          isMulti = _this$props7.isMulti,
          backspaceRemovesValue = _this$props7.backspaceRemovesValue,
          escapeClearsValue = _this$props7.escapeClearsValue,
          inputValue = _this$props7.inputValue,
          isClearable = _this$props7.isClearable,
          isDisabled = _this$props7.isDisabled,
          menuIsOpen = _this$props7.menuIsOpen,
          onKeyDown = _this$props7.onKeyDown,
          tabSelectsValue = _this$props7.tabSelectsValue,
          openMenuOnFocus = _this$props7.openMenuOnFocus;
      var _this$state2 = _this.state,
          isComposing = _this$state2.isComposing,
          focusedOption = _this$state2.focusedOption,
          focusedValue = _this$state2.focusedValue,
          selectValue = _this$state2.selectValue;
      if (isDisabled) return;

      if (typeof onKeyDown === 'function') {
        onKeyDown(event);

        if (event.defaultPrevented) {
          return;
        }
      } // Block option hover events when the user has just pressed a key


      _this.blockOptionHover = true;

      switch (event.key) {
        case 'ArrowLeft':
          if (!isMulti || inputValue) return;

          _this.focusValue('previous');

          break;

        case 'ArrowRight':
          if (!isMulti || inputValue) return;

          _this.focusValue('next');

          break;

        case 'Delete':
        case 'Backspace':
          if (inputValue) return;

          if (focusedValue) {
            _this.removeValue(focusedValue);
          } else {
            if (!backspaceRemovesValue) return;

            if (isMulti) {
              _this.popValue();
            } else if (isClearable) {
              _this.clearValue();
            }
          }

          break;

        case 'Tab':
          if (isComposing) return;

          if (event.shiftKey || !menuIsOpen || !tabSelectsValue || !focusedOption || // don't capture the event if the menu opens on focus and the focused
          // option is already selected; it breaks the flow of navigation
          openMenuOnFocus && _this.isOptionSelected(focusedOption, selectValue)) {
            return;
          }

          _this.selectOption(focusedOption);

          break;

        case 'Enter':
          if (event.keyCode === 229) {
            // ignore the keydown event from an Input Method Editor(IME)
            // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
            break;
          }

          if (menuIsOpen) {
            if (!focusedOption) return;
            if (isComposing) return;

            _this.selectOption(focusedOption);

            break;
          }

          return;

        case 'Escape':
          if (menuIsOpen) {
            _this.inputIsHiddenAfterUpdate = false;

            _this.onInputChange('', {
              action: 'menu-close'
            });

            _this.onMenuClose();
          } else if (isClearable && escapeClearsValue) {
            _this.clearValue();
          }

          break;

        case ' ':
          // space
          if (inputValue) {
            return;
          }

          if (!menuIsOpen) {
            _this.openMenu('first');

            break;
          }

          if (!focusedOption) return;

          _this.selectOption(focusedOption);

          break;

        case 'ArrowUp':
          if (menuIsOpen) {
            _this.focusOption('up');
          } else {
            _this.openMenu('last');
          }

          break;

        case 'ArrowDown':
          if (menuIsOpen) {
            _this.focusOption('down');
          } else {
            _this.openMenu('first');
          }

          break;

        case 'PageUp':
          if (!menuIsOpen) return;

          _this.focusOption('pageup');

          break;

        case 'PageDown':
          if (!menuIsOpen) return;

          _this.focusOption('pagedown');

          break;

        case 'Home':
          if (!menuIsOpen) return;

          _this.focusOption('first');

          break;

        case 'End':
          if (!menuIsOpen) return;

          _this.focusOption('last');

          break;

        default:
          return;
      }

      event.preventDefault();
    });

    var value = _props.value;
    _this.cacheComponents = index$2(_this.cacheComponents, exportedEqual).bind(_assertThisInitialized$1(_assertThisInitialized$1(_this)));

    _this.cacheComponents(_props.components);

    _this.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);

    var _selectValue = cleanValue(value);

    var _menuOptions = _this.buildMenuOptions(_props, _selectValue);

    _this.state.menuOptions = _menuOptions;
    _this.state.selectValue = _selectValue;
    return _this;
  }

  _createClass(Select, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.startListeningComposition();
      this.startListeningToTouch();

      if (this.props.closeMenuOnScroll && document && document.addEventListener) {
        // Listen to all scroll events, and filter them out inside of 'onScroll'
        document.addEventListener('scroll', this.onScroll, true);
      }

      if (this.props.autoFocus) {
        this.focusInput();
      }
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var _this$props8 = this.props,
          options = _this$props8.options,
          value = _this$props8.value,
          inputValue = _this$props8.inputValue; // re-cache custom components

      this.cacheComponents(nextProps.components); // rebuild the menu options

      if (nextProps.value !== value || nextProps.options !== options || nextProps.inputValue !== inputValue) {
        var selectValue = cleanValue(nextProps.value);
        var menuOptions = this.buildMenuOptions(nextProps, selectValue);
        var focusedValue = this.getNextFocusedValue(selectValue);
        var focusedOption = this.getNextFocusedOption(menuOptions.focusable);
        this.setState({
          menuOptions: menuOptions,
          selectValue: selectValue,
          focusedOption: focusedOption,
          focusedValue: focusedValue
        });
      } // some updates should toggle the state of the input visibility


      if (this.inputIsHiddenAfterUpdate != null) {
        this.setState({
          inputIsHidden: this.inputIsHiddenAfterUpdate
        });
        delete this.inputIsHiddenAfterUpdate;
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var _this$props9 = this.props,
          isDisabled = _this$props9.isDisabled,
          menuIsOpen = _this$props9.menuIsOpen;
      var isFocused = this.state.isFocused;

      if ( // ensure focus is restored correctly when the control becomes enabled
      isFocused && !isDisabled && prevProps.isDisabled || // ensure focus is on the Input when the menu opens
      isFocused && menuIsOpen && !prevProps.menuIsOpen) {
        this.focusInput();
      } // scroll the focused option into view if necessary


      if (this.menuListRef && this.focusedOptionRef && this.scrollToFocusedOptionOnUpdate) {
        scrollIntoView(this.menuListRef, this.focusedOptionRef);
      }

      this.scrollToFocusedOptionOnUpdate = false;
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.stopListeningComposition();
      this.stopListeningToTouch();
      document.removeEventListener('scroll', this.onScroll, true);
    }
  }, {
    key: "onMenuOpen",
    // ==============================
    // Consumer Handlers
    // ==============================
    value: function onMenuOpen() {
      this.props.onMenuOpen();
    }
  }, {
    key: "onMenuClose",
    value: function onMenuClose() {
      var _this$props10 = this.props,
          isSearchable = _this$props10.isSearchable,
          isMulti = _this$props10.isMulti;
      this.announceAriaLiveContext({
        event: 'input',
        context: {
          isSearchable: isSearchable,
          isMulti: isMulti
        }
      });
      this.onInputChange('', {
        action: 'menu-close'
      });
      this.props.onMenuClose();
    }
  }, {
    key: "onInputChange",
    value: function onInputChange(newValue, actionMeta) {
      this.props.onInputChange(newValue, actionMeta);
    } // ==============================
    // Methods
    // ==============================

  }, {
    key: "focusInput",
    value: function focusInput() {
      if (!this.inputRef) return;
      this.inputRef.focus();
    }
  }, {
    key: "blurInput",
    value: function blurInput() {
      if (!this.inputRef) return;
      this.inputRef.blur();
    } // aliased for consumers

  }, {
    key: "openMenu",
    value: function openMenu(focusOption) {
      var _this$state3 = this.state,
          menuOptions = _this$state3.menuOptions,
          selectValue = _this$state3.selectValue,
          isFocused = _this$state3.isFocused;
      var isMulti = this.props.isMulti;
      var openAtIndex = focusOption === 'first' ? 0 : menuOptions.focusable.length - 1;

      if (!isMulti) {
        var selectedIndex = menuOptions.focusable.indexOf(selectValue[0]);

        if (selectedIndex > -1) {
          openAtIndex = selectedIndex;
        }
      } // only scroll if the menu isn't already open


      this.scrollToFocusedOptionOnUpdate = !(isFocused && this.menuListRef);
      this.inputIsHiddenAfterUpdate = false;
      this.onMenuOpen();
      this.setState({
        focusedValue: null,
        focusedOption: menuOptions.focusable[openAtIndex]
      });
      this.announceAriaLiveContext({
        event: 'menu'
      });
    }
  }, {
    key: "focusValue",
    value: function focusValue(direction) {
      var _this$props11 = this.props,
          isMulti = _this$props11.isMulti,
          isSearchable = _this$props11.isSearchable;
      var _this$state4 = this.state,
          selectValue = _this$state4.selectValue,
          focusedValue = _this$state4.focusedValue; // Only multiselects support value focusing

      if (!isMulti) return;
      this.setState({
        focusedOption: null
      });
      var focusedIndex = selectValue.indexOf(focusedValue);

      if (!focusedValue) {
        focusedIndex = -1;
        this.announceAriaLiveContext({
          event: 'value'
        });
      }

      var lastIndex = selectValue.length - 1;
      var nextFocus = -1;
      if (!selectValue.length) return;

      switch (direction) {
        case 'previous':
          if (focusedIndex === 0) {
            // don't cycle from the start to the end
            nextFocus = 0;
          } else if (focusedIndex === -1) {
            // if nothing is focused, focus the last value first
            nextFocus = lastIndex;
          } else {
            nextFocus = focusedIndex - 1;
          }

          break;

        case 'next':
          if (focusedIndex > -1 && focusedIndex < lastIndex) {
            nextFocus = focusedIndex + 1;
          }

          break;
      }

      if (nextFocus === -1) {
        this.announceAriaLiveContext({
          event: 'input',
          context: {
            isSearchable: isSearchable,
            isMulti: isMulti
          }
        });
      }

      this.setState({
        inputIsHidden: nextFocus === -1 ? false : true,
        focusedValue: selectValue[nextFocus]
      });
    }
  }, {
    key: "focusOption",
    value: function focusOption() {
      var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'first';
      var pageSize = this.props.pageSize;
      var _this$state5 = this.state,
          focusedOption = _this$state5.focusedOption,
          menuOptions = _this$state5.menuOptions;
      var options = menuOptions.focusable;
      if (!options.length) return;
      var nextFocus = 0; // handles 'first'

      var focusedIndex = options.indexOf(focusedOption);

      if (!focusedOption) {
        focusedIndex = -1;
        this.announceAriaLiveContext({
          event: 'menu'
        });
      }

      if (direction === 'up') {
        nextFocus = focusedIndex > 0 ? focusedIndex - 1 : options.length - 1;
      } else if (direction === 'down') {
        nextFocus = (focusedIndex + 1) % options.length;
      } else if (direction === 'pageup') {
        nextFocus = focusedIndex - pageSize;
        if (nextFocus < 0) nextFocus = 0;
      } else if (direction === 'pagedown') {
        nextFocus = focusedIndex + pageSize;
        if (nextFocus > options.length - 1) nextFocus = options.length - 1;
      } else if (direction === 'last') {
        nextFocus = options.length - 1;
      }

      this.scrollToFocusedOptionOnUpdate = true;
      this.setState({
        focusedOption: options[nextFocus],
        focusedValue: null
      });
      this.announceAriaLiveContext({
        event: 'menu',
        context: {
          isDisabled: isOptionDisabled(options[nextFocus])
        }
      });
    }
  }, {
    key: "getTheme",
    // ==============================
    // Getters
    // ==============================
    value: function getTheme() {
      // Use the default theme if there are no customizations.
      if (!this.props.theme) {
        return defaultTheme;
      } // If the theme prop is a function, assume the function
      // knows how to merge the passed-in default theme with
      // its own modifications.


      if (typeof this.props.theme === 'function') {
        return this.props.theme(defaultTheme);
      } // Otherwise, if a plain theme object was passed in,
      // overlay it with the default theme.


      return _objectSpread({}, defaultTheme, this.props.theme);
    }
  }, {
    key: "getCommonProps",
    value: function getCommonProps() {
      var clearValue = this.clearValue,
          getStyles = this.getStyles,
          setValue = this.setValue,
          selectOption = this.selectOption,
          props = this.props;
      var classNamePrefix = props.classNamePrefix,
          isMulti = props.isMulti,
          isRtl = props.isRtl,
          options = props.options;
      var selectValue = this.state.selectValue;
      var hasValue = this.hasValue();

      var getValue = function getValue() {
        return selectValue;
      };

      var cx$$1 = classNames.bind(null, classNamePrefix);
      return {
        cx: cx$$1,
        clearValue: clearValue,
        getStyles: getStyles,
        getValue: getValue,
        hasValue: hasValue,
        isMulti: isMulti,
        isRtl: isRtl,
        options: options,
        selectOption: selectOption,
        setValue: setValue,
        selectProps: props,
        theme: this.getTheme()
      };
    }
  }, {
    key: "getNextFocusedValue",
    value: function getNextFocusedValue(nextSelectValue) {
      if (this.clearFocusValueOnUpdate) {
        this.clearFocusValueOnUpdate = false;
        return null;
      }

      var _this$state6 = this.state,
          focusedValue = _this$state6.focusedValue,
          lastSelectValue = _this$state6.selectValue;
      var lastFocusedIndex = lastSelectValue.indexOf(focusedValue);

      if (lastFocusedIndex > -1) {
        var nextFocusedIndex = nextSelectValue.indexOf(focusedValue);

        if (nextFocusedIndex > -1) {
          // the focused value is still in the selectValue, return it
          return focusedValue;
        } else if (lastFocusedIndex < nextSelectValue.length) {
          // the focusedValue is not present in the next selectValue array by
          // reference, so return the new value at the same index
          return nextSelectValue[lastFocusedIndex];
        }
      }

      return null;
    }
  }, {
    key: "getNextFocusedOption",
    value: function getNextFocusedOption(options) {
      var lastFocusedOption = this.state.focusedOption;
      return lastFocusedOption && options.indexOf(lastFocusedOption) > -1 ? lastFocusedOption : options[0];
    }
  }, {
    key: "hasValue",
    value: function hasValue() {
      var selectValue = this.state.selectValue;
      return selectValue.length > 0;
    }
  }, {
    key: "hasOptions",
    value: function hasOptions() {
      return !!this.state.menuOptions.render.length;
    }
  }, {
    key: "countOptions",
    value: function countOptions() {
      return this.state.menuOptions.focusable.length;
    }
  }, {
    key: "isClearable",
    value: function isClearable() {
      var _this$props12 = this.props,
          isClearable = _this$props12.isClearable,
          isMulti = _this$props12.isMulti; // single select, by default, IS NOT clearable
      // multi select, by default, IS clearable

      if (isClearable === undefined) return isMulti;
      return isClearable;
    }
  }, {
    key: "isOptionDisabled",
    value: function isOptionDisabled$$1(option, selectValue) {
      return typeof this.props.isOptionDisabled === 'function' ? this.props.isOptionDisabled(option, selectValue) : false;
    }
  }, {
    key: "isOptionSelected",
    value: function isOptionSelected(option, selectValue) {
      var _this2 = this;

      if (selectValue.indexOf(option) > -1) return true;

      if (typeof this.props.isOptionSelected === 'function') {
        return this.props.isOptionSelected(option, selectValue);
      }

      var candidate = this.getOptionValue(option);
      return selectValue.some(function (i) {
        return _this2.getOptionValue(i) === candidate;
      });
    }
  }, {
    key: "filterOption",
    value: function filterOption(option, inputValue) {
      return this.props.filterOption ? this.props.filterOption(option, inputValue) : true;
    }
  }, {
    key: "formatOptionLabel",
    value: function formatOptionLabel(data, context) {
      if (typeof this.props.formatOptionLabel === 'function') {
        var inputValue = this.props.inputValue;
        var selectValue = this.state.selectValue;
        return this.props.formatOptionLabel(data, {
          context: context,
          inputValue: inputValue,
          selectValue: selectValue
        });
      } else {
        return this.getOptionLabel(data);
      }
    }
  }, {
    key: "formatGroupLabel",
    value: function formatGroupLabel$$1(data) {
      return this.props.formatGroupLabel(data);
    } // ==============================
    // Mouse Handlers
    // ==============================

  }, {
    key: "startListeningComposition",
    // ==============================
    // Composition Handlers
    // ==============================
    value: function startListeningComposition() {
      if (document && document.addEventListener) {
        document.addEventListener('compositionstart', this.onCompositionStart, false);
        document.addEventListener('compositionend', this.onCompositionEnd, false);
      }
    }
  }, {
    key: "stopListeningComposition",
    value: function stopListeningComposition() {
      if (document && document.removeEventListener) {
        document.removeEventListener('compositionstart', this.onCompositionStart);
        document.removeEventListener('compositionend', this.onCompositionEnd);
      }
    }
  }, {
    key: "startListeningToTouch",
    // ==============================
    // Touch Handlers
    // ==============================
    value: function startListeningToTouch() {
      if (document && document.addEventListener) {
        document.addEventListener('touchstart', this.onTouchStart, false);
        document.addEventListener('touchmove', this.onTouchMove, false);
        document.addEventListener('touchend', this.onTouchEnd, false);
      }
    }
  }, {
    key: "stopListeningToTouch",
    value: function stopListeningToTouch() {
      if (document && document.removeEventListener) {
        document.removeEventListener('touchstart', this.onTouchStart);
        document.removeEventListener('touchmove', this.onTouchMove);
        document.removeEventListener('touchend', this.onTouchEnd);
      }
    }
  }, {
    key: "buildMenuOptions",
    // ==============================
    // Menu Options
    // ==============================
    value: function buildMenuOptions(props, selectValue) {
      var _this3 = this;

      var _props$inputValue = props.inputValue,
          inputValue = _props$inputValue === void 0 ? '' : _props$inputValue,
          options = props.options;

      var toOption = function toOption(option, id) {
        var isDisabled = _this3.isOptionDisabled(option, selectValue);

        var isSelected = _this3.isOptionSelected(option, selectValue);

        var label = _this3.getOptionLabel(option);

        var value = _this3.getOptionValue(option);

        if (_this3.shouldHideSelectedOptions() && isSelected || !_this3.filterOption({
          label: label,
          value: value,
          data: option
        }, inputValue)) {
          return;
        }

        var onHover = isDisabled ? undefined : function () {
          return _this3.onOptionHover(option);
        };
        var onSelect = isDisabled ? undefined : function () {
          return _this3.selectOption(option);
        };
        var optionId = "".concat(_this3.getElementId('option'), "-").concat(id);
        return {
          innerProps: {
            id: optionId,
            onClick: onSelect,
            onMouseMove: onHover,
            onMouseOver: onHover,
            tabIndex: -1
          },
          data: option,
          isDisabled: isDisabled,
          isSelected: isSelected,
          key: optionId,
          label: label,
          type: 'option',
          value: value
        };
      };

      return options.reduce(function (acc, item, itemIndex) {
        if (item.options) {
          // TODO needs a tidier implementation
          if (!_this3.hasGroups) _this3.hasGroups = true;
          var items = item.options;
          var children = items.map(function (child, i) {
            var option = toOption(child, "".concat(itemIndex, "-").concat(i));
            if (option) acc.focusable.push(child);
            return option;
          }).filter(Boolean);

          if (children.length) {
            var groupId = "".concat(_this3.getElementId('group'), "-").concat(itemIndex);
            acc.render.push({
              type: 'group',
              key: groupId,
              data: item,
              options: children
            });
          }
        } else {
          var option = toOption(item, "".concat(itemIndex));

          if (option) {
            acc.render.push(option);
            acc.focusable.push(item);
          }
        }

        return acc;
      }, {
        render: [],
        focusable: []
      });
    } // ==============================
    // Renderers
    // ==============================

  }, {
    key: "constructAriaLiveMessage",
    value: function constructAriaLiveMessage() {
      var _this$state7 = this.state,
          ariaLiveContext = _this$state7.ariaLiveContext,
          selectValue = _this$state7.selectValue,
          focusedValue = _this$state7.focusedValue,
          focusedOption = _this$state7.focusedOption;
      var _this$props13 = this.props,
          options = _this$props13.options,
          menuIsOpen = _this$props13.menuIsOpen,
          inputValue = _this$props13.inputValue,
          screenReaderStatus = _this$props13.screenReaderStatus; // An aria live message representing the currently focused value in the select.

      var focusedValueMsg = focusedValue ? valueFocusAriaMessage({
        focusedValue: focusedValue,
        getOptionLabel: this.getOptionLabel,
        selectValue: selectValue
      }) : ''; // An aria live message representing the currently focused option in the select.

      var focusedOptionMsg = focusedOption && menuIsOpen ? optionFocusAriaMessage({
        focusedOption: focusedOption,
        getOptionLabel: this.getOptionLabel,
        options: options
      }) : ''; // An aria live message representing the set of focusable results and current searchterm/inputvalue.

      var resultsMsg = resultsAriaMessage({
        inputValue: inputValue,
        screenReaderMessage: screenReaderStatus({
          count: this.countOptions()
        })
      });
      return "".concat(focusedValueMsg, " ").concat(focusedOptionMsg, " ").concat(resultsMsg, " ").concat(ariaLiveContext);
    }
  }, {
    key: "renderInput",
    value: function renderInput() {
      var _this$props14 = this.props,
          isDisabled = _this$props14.isDisabled,
          isSearchable = _this$props14.isSearchable,
          inputId = _this$props14.inputId,
          inputValue = _this$props14.inputValue,
          tabIndex = _this$props14.tabIndex;
      var Input$$1 = this.components.Input;
      var inputIsHidden = this.state.inputIsHidden;
      var id = inputId || this.getElementId('input');

      if (!isSearchable) {
        // use a dummy input to maintain focus/blur functionality
        return React.createElement(DummyInput, {
          id: id,
          innerRef: this.getInputRef,
          onBlur: this.onInputBlur,
          onChange: noop,
          onFocus: this.onInputFocus,
          readOnly: true,
          disabled: isDisabled,
          tabIndex: tabIndex,
          value: ""
        });
      } // aria attributes makes the JSX "noisy", separated for clarity


      var ariaAttributes = {
        'aria-autocomplete': 'list',
        'aria-label': this.props['aria-label'],
        'aria-labelledby': this.props['aria-labelledby']
      };
      var _this$commonProps = this.commonProps,
          cx$$1 = _this$commonProps.cx,
          theme = _this$commonProps.theme,
          selectProps = _this$commonProps.selectProps;
      return React.createElement(Input$$1, _extends$2({
        autoCapitalize: "none",
        autoComplete: "off",
        autoCorrect: "off",
        cx: cx$$1,
        getStyles: this.getStyles,
        id: id,
        innerRef: this.getInputRef,
        isDisabled: isDisabled,
        isHidden: inputIsHidden,
        onBlur: this.onInputBlur,
        onChange: this.handleInputChange,
        onFocus: this.onInputFocus,
        selectProps: selectProps,
        spellCheck: "false",
        tabIndex: tabIndex,
        theme: theme,
        type: "text",
        value: inputValue
      }, ariaAttributes));
    }
  }, {
    key: "renderPlaceholderOrValue",
    value: function renderPlaceholderOrValue() {
      var _this4 = this;

      var _this$components = this.components,
          MultiValue = _this$components.MultiValue,
          MultiValueContainer = _this$components.MultiValueContainer,
          MultiValueLabel = _this$components.MultiValueLabel,
          MultiValueRemove = _this$components.MultiValueRemove,
          SingleValue = _this$components.SingleValue,
          Placeholder = _this$components.Placeholder;
      var commonProps = this.commonProps;
      var _this$props15 = this.props,
          controlShouldRenderValue = _this$props15.controlShouldRenderValue,
          isDisabled = _this$props15.isDisabled,
          isMulti = _this$props15.isMulti,
          inputValue = _this$props15.inputValue,
          placeholder = _this$props15.placeholder;
      var _this$state8 = this.state,
          selectValue = _this$state8.selectValue,
          focusedValue = _this$state8.focusedValue,
          isFocused = _this$state8.isFocused;

      if (!this.hasValue() || !controlShouldRenderValue) {
        return inputValue ? null : React.createElement(Placeholder, _extends$2({}, commonProps, {
          key: "placeholder",
          isDisabled: isDisabled,
          isFocused: isFocused
        }), placeholder);
      }

      if (isMulti) {
        var selectValues = selectValue.map(function (opt) {
          var isOptionFocused = opt === focusedValue;
          return React.createElement(MultiValue, _extends$2({}, commonProps, {
            components: {
              Container: MultiValueContainer,
              Label: MultiValueLabel,
              Remove: MultiValueRemove
            },
            isFocused: isOptionFocused,
            isDisabled: isDisabled,
            key: _this4.getOptionValue(opt),
            removeProps: {
              onClick: function onClick() {
                return _this4.removeValue(opt);
              },
              onTouchEnd: function onTouchEnd() {
                return _this4.removeValue(opt);
              },
              onMouseDown: function onMouseDown(e) {
                e.preventDefault();
                e.stopPropagation();
              }
            },
            data: opt
          }), _this4.formatOptionLabel(opt, 'value'));
        });
        return selectValues;
      }

      if (inputValue) {
        return null;
      }

      var singleValue = selectValue[0];
      return React.createElement(SingleValue, _extends$2({}, commonProps, {
        data: singleValue,
        isDisabled: isDisabled
      }), this.formatOptionLabel(singleValue, 'value'));
    }
  }, {
    key: "renderClearIndicator",
    value: function renderClearIndicator() {
      var ClearIndicator = this.components.ClearIndicator;
      var commonProps = this.commonProps;
      var _this$props16 = this.props,
          isDisabled = _this$props16.isDisabled,
          isLoading = _this$props16.isLoading;
      var isFocused = this.state.isFocused;

      if (!this.isClearable() || !ClearIndicator || isDisabled || !this.hasValue() || isLoading) {
        return null;
      }

      var innerProps = {
        onMouseDown: this.onClearIndicatorMouseDown,
        onTouchEnd: this.onClearIndicatorTouchEnd,
        'aria-hidden': 'true'
      };
      return React.createElement(ClearIndicator, _extends$2({}, commonProps, {
        innerProps: innerProps,
        isFocused: isFocused
      }));
    }
  }, {
    key: "renderLoadingIndicator",
    value: function renderLoadingIndicator() {
      var LoadingIndicator = this.components.LoadingIndicator;
      var commonProps = this.commonProps;
      var _this$props17 = this.props,
          isDisabled = _this$props17.isDisabled,
          isLoading = _this$props17.isLoading;
      var isFocused = this.state.isFocused;
      if (!LoadingIndicator || !isLoading) return null;
      var innerProps = {
        'aria-hidden': 'true'
      };
      return React.createElement(LoadingIndicator, _extends$2({}, commonProps, {
        innerProps: innerProps,
        isDisabled: isDisabled,
        isFocused: isFocused
      }));
    }
  }, {
    key: "renderIndicatorSeparator",
    value: function renderIndicatorSeparator() {
      var _this$components2 = this.components,
          DropdownIndicator = _this$components2.DropdownIndicator,
          IndicatorSeparator = _this$components2.IndicatorSeparator; // separator doesn't make sense without the dropdown indicator

      if (!DropdownIndicator || !IndicatorSeparator) return null;
      var commonProps = this.commonProps;
      var isDisabled = this.props.isDisabled;
      var isFocused = this.state.isFocused;
      return React.createElement(IndicatorSeparator, _extends$2({}, commonProps, {
        isDisabled: isDisabled,
        isFocused: isFocused
      }));
    }
  }, {
    key: "renderDropdownIndicator",
    value: function renderDropdownIndicator() {
      var DropdownIndicator = this.components.DropdownIndicator;
      if (!DropdownIndicator) return null;
      var commonProps = this.commonProps;
      var isDisabled = this.props.isDisabled;
      var isFocused = this.state.isFocused;
      var innerProps = {
        onMouseDown: this.onDropdownIndicatorMouseDown,
        onTouchEnd: this.onDropdownIndicatorTouchEnd,
        'aria-hidden': 'true'
      };
      return React.createElement(DropdownIndicator, _extends$2({}, commonProps, {
        innerProps: innerProps,
        isDisabled: isDisabled,
        isFocused: isFocused
      }));
    }
  }, {
    key: "renderMenu",
    value: function renderMenu() {
      var _this5 = this;

      var _this$components3 = this.components,
          Group = _this$components3.Group,
          GroupHeading = _this$components3.GroupHeading,
          Menu$$1 = _this$components3.Menu,
          MenuList$$1 = _this$components3.MenuList,
          MenuPortal$$1 = _this$components3.MenuPortal,
          LoadingMessage$$1 = _this$components3.LoadingMessage,
          NoOptionsMessage$$1 = _this$components3.NoOptionsMessage,
          Option = _this$components3.Option;
      var commonProps = this.commonProps;
      var _this$state9 = this.state,
          focusedOption = _this$state9.focusedOption,
          menuOptions = _this$state9.menuOptions;
      var _this$props18 = this.props,
          captureMenuScroll = _this$props18.captureMenuScroll,
          inputValue = _this$props18.inputValue,
          isLoading = _this$props18.isLoading,
          loadingMessage = _this$props18.loadingMessage,
          minMenuHeight = _this$props18.minMenuHeight,
          maxMenuHeight = _this$props18.maxMenuHeight,
          menuIsOpen = _this$props18.menuIsOpen,
          menuPlacement = _this$props18.menuPlacement,
          menuPosition = _this$props18.menuPosition,
          menuPortalTarget = _this$props18.menuPortalTarget,
          menuShouldBlockScroll = _this$props18.menuShouldBlockScroll,
          menuShouldScrollIntoView = _this$props18.menuShouldScrollIntoView,
          noOptionsMessage = _this$props18.noOptionsMessage,
          onMenuScrollToTop = _this$props18.onMenuScrollToTop,
          onMenuScrollToBottom = _this$props18.onMenuScrollToBottom;
      if (!menuIsOpen) return null; // TODO: Internal Option Type here

      var render = function render(props) {
        // for performance, the menu options in state aren't changed when the
        // focused option changes so we calculate additional props based on that
        var isFocused = focusedOption === props.data;
        props.innerRef = isFocused ? _this5.getFocusedOptionRef : undefined;
        return React.createElement(Option, _extends$2({}, commonProps, props, {
          isFocused: isFocused
        }), _this5.formatOptionLabel(props.data, 'menu'));
      };

      var menuUI;

      if (this.hasOptions()) {
        menuUI = menuOptions.render.map(function (item) {
          if (item.type === 'group') {
            var type = item.type,
                group = _objectWithoutProperties(item, ["type"]);

            var headingId = "".concat(item.key, "-heading");
            return React.createElement(Group, _extends$2({}, commonProps, group, {
              Heading: GroupHeading,
              headingProps: {
                id: headingId
              },
              label: _this5.formatGroupLabel(item.data)
            }), item.options.map(function (option) {
              return render(option);
            }));
          } else if (item.type === 'option') {
            return render(item);
          }
        });
      } else if (isLoading) {
        var message = loadingMessage({
          inputValue: inputValue
        });
        if (message === null) return null;
        menuUI = React.createElement(LoadingMessage$$1, commonProps, message);
      } else {
        var _message = noOptionsMessage({
          inputValue: inputValue
        });

        if (_message === null) return null;
        menuUI = React.createElement(NoOptionsMessage$$1, commonProps, _message);
      }

      var menuPlacementProps = {
        minMenuHeight: minMenuHeight,
        maxMenuHeight: maxMenuHeight,
        menuPlacement: menuPlacement,
        menuPosition: menuPosition,
        menuShouldScrollIntoView: menuShouldScrollIntoView
      };
      var menuElement = React.createElement(MenuPlacer, _extends$2({}, commonProps, menuPlacementProps), function (_ref6) {
        var ref = _ref6.ref,
            _ref6$placerProps = _ref6.placerProps,
            placement = _ref6$placerProps.placement,
            maxHeight = _ref6$placerProps.maxHeight;
        return React.createElement(Menu$$1, _extends$2({}, commonProps, menuPlacementProps, {
          innerRef: ref,
          innerProps: {
            onMouseDown: _this5.onMenuMouseDown,
            onMouseMove: _this5.onMenuMouseMove
          },
          isLoading: isLoading,
          placement: placement
        }), React.createElement(ScrollCaptorSwitch, {
          isEnabled: captureMenuScroll,
          onTopArrive: onMenuScrollToTop,
          onBottomArrive: onMenuScrollToBottom
        }, React.createElement(ScrollBlock, {
          isEnabled: menuShouldBlockScroll
        }, React.createElement(MenuList$$1, _extends$2({}, commonProps, {
          innerRef: _this5.getMenuListRef,
          isLoading: isLoading,
          maxHeight: maxHeight
        }), menuUI))));
      }); // positioning behaviour is almost identical for portalled and fixed,
      // so we use the same component. the actual portalling logic is forked
      // within the component based on `menuPosition`

      return menuPortalTarget || menuPosition === 'fixed' ? React.createElement(MenuPortal$$1, _extends$2({}, commonProps, {
        appendTo: menuPortalTarget,
        controlElement: this.controlRef,
        menuPlacement: menuPlacement,
        menuPosition: menuPosition
      }), menuElement) : menuElement;
    }
  }, {
    key: "renderFormField",
    value: function renderFormField() {
      var _this6 = this;

      var _this$props19 = this.props,
          delimiter = _this$props19.delimiter,
          isDisabled = _this$props19.isDisabled,
          isMulti = _this$props19.isMulti,
          name = _this$props19.name;
      var selectValue = this.state.selectValue;
      if (!name || isDisabled) return;

      if (isMulti) {
        if (delimiter) {
          var value = selectValue.map(function (opt) {
            return _this6.getOptionValue(opt);
          }).join(delimiter);
          return React.createElement("input", {
            name: name,
            type: "hidden",
            value: value
          });
        } else {
          var input = selectValue.length > 0 ? selectValue.map(function (opt, i) {
            return React.createElement("input", {
              key: "i-".concat(i),
              name: name,
              type: "hidden",
              value: _this6.getOptionValue(opt)
            });
          }) : React.createElement("input", {
            name: name,
            type: "hidden"
          });
          return React.createElement("div", null, input);
        }
      } else {
        var _value = selectValue[0] ? this.getOptionValue(selectValue[0]) : '';

        return React.createElement("input", {
          name: name,
          type: "hidden",
          value: _value
        });
      }
    }
  }, {
    key: "renderLiveRegion",
    value: function renderLiveRegion() {
      if (!this.state.isFocused) return null;
      return React.createElement(A11yText, {
        "aria-live": "assertive"
      }, React.createElement("p", {
        id: "aria-selection-event"
      }, "\xA0", this.state.ariaLiveSelection), React.createElement("p", {
        id: "aria-context"
      }, "\xA0", this.constructAriaLiveMessage()));
    }
  }, {
    key: "render",
    value: function render() {
      var _this$components4 = this.components,
          Control = _this$components4.Control,
          IndicatorsContainer = _this$components4.IndicatorsContainer,
          SelectContainer = _this$components4.SelectContainer,
          ValueContainer = _this$components4.ValueContainer;
      var _this$props20 = this.props,
          className = _this$props20.className,
          id = _this$props20.id,
          isDisabled = _this$props20.isDisabled,
          menuIsOpen = _this$props20.menuIsOpen;
      var isFocused = this.state.isFocused;
      var commonProps = this.commonProps = this.getCommonProps();
      return React.createElement(SelectContainer, _extends$2({}, commonProps, {
        className: className,
        innerProps: {
          id: id,
          onKeyDown: this.onKeyDown
        },
        isDisabled: isDisabled,
        isFocused: isFocused
      }), this.renderLiveRegion(), React.createElement(Control, _extends$2({}, commonProps, {
        innerRef: this.getControlRef,
        innerProps: {
          onMouseDown: this.onControlMouseDown,
          onTouchEnd: this.onControlTouchEnd
        },
        isDisabled: isDisabled,
        isFocused: isFocused,
        menuIsOpen: menuIsOpen
      }), React.createElement(ValueContainer, _extends$2({}, commonProps, {
        isDisabled: isDisabled
      }), this.renderPlaceholderOrValue(), this.renderInput()), React.createElement(IndicatorsContainer, _extends$2({}, commonProps, {
        isDisabled: isDisabled
      }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
    }
  }]);

  return Select;
}(Component);

_defineProperty$1(Select, "defaultProps", defaultProps);

var defaultProps$1 = {
  defaultInputValue: '',
  defaultMenuIsOpen: false,
  defaultValue: null
};

var manageState = function manageState(SelectComponent) {
  var _class, _temp;

  return _temp = _class =
  /*#__PURE__*/
  function (_Component) {
    _inherits(StateManager, _Component);

    function StateManager() {
      var _getPrototypeOf2;

      var _this;

      _classCallCheck(this, StateManager);

      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(StateManager)).call.apply(_getPrototypeOf2, [this].concat(args)));

      _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "select", void 0);

      _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "state", {
        inputValue: _this.props.inputValue !== undefined ? _this.props.inputValue : _this.props.defaultInputValue,
        menuIsOpen: _this.props.menuIsOpen !== undefined ? _this.props.menuIsOpen : _this.props.defaultMenuIsOpen,
        value: _this.props.value !== undefined ? _this.props.value : _this.props.defaultValue
      });

      _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onChange", function (value, actionMeta) {
        _this.callProp('onChange', value, actionMeta);

        _this.setState({
          value: value
        });
      });

      _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onInputChange", function (value, actionMeta) {
        // TODO: for backwards compatibility, we allow the prop to return a new
        // value, but now inputValue is a controllable prop we probably shouldn't
        var newValue = _this.callProp('onInputChange', value, actionMeta);

        _this.setState({
          inputValue: newValue !== undefined ? newValue : value
        });
      });

      _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onMenuOpen", function () {
        _this.callProp('onMenuOpen');

        _this.setState({
          menuIsOpen: true
        });
      });

      _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onMenuClose", function () {
        _this.callProp('onMenuClose');

        _this.setState({
          menuIsOpen: false
        });
      });

      return _this;
    }

    _createClass(StateManager, [{
      key: "focus",
      value: function focus() {
        this.select.focus();
      }
    }, {
      key: "blur",
      value: function blur() {
        this.select.blur();
      } // FIXME: untyped flow code, return any

    }, {
      key: "getProp",
      value: function getProp(key) {
        return this.props[key] !== undefined ? this.props[key] : this.state[key];
      } // FIXME: untyped flow code, return any

    }, {
      key: "callProp",
      value: function callProp(name) {
        if (typeof this.props[name] === 'function') {
          var _this$props;

          for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
            args[_key2 - 1] = arguments[_key2];
          }

          return (_this$props = this.props)[name].apply(_this$props, args);
        }
      }
    }, {
      key: "render",
      value: function render() {
        var _this2 = this;

        var _this$props2 = this.props,
            defaultInputValue = _this$props2.defaultInputValue,
            defaultMenuIsOpen = _this$props2.defaultMenuIsOpen,
            defaultValue = _this$props2.defaultValue,
            props = _objectWithoutProperties(_this$props2, ["defaultInputValue", "defaultMenuIsOpen", "defaultValue"]);

        return React.createElement(SelectComponent, _extends$2({}, props, {
          ref: function ref(_ref) {
            _this2.select = _ref;
          },
          inputValue: this.getProp('inputValue'),
          menuIsOpen: this.getProp('menuIsOpen'),
          onChange: this.onChange,
          onInputChange: this.onInputChange,
          onMenuClose: this.onMenuClose,
          onMenuOpen: this.onMenuOpen,
          value: this.getProp('value')
        }));
      }
    }]);

    return StateManager;
  }(Component), _defineProperty$1(_class, "defaultProps", defaultProps$1), _temp;
};

var defaultProps$2 = {
  cacheOptions: false,
  defaultOptions: false,
  filterOption: null
};
var makeAsyncSelect = function makeAsyncSelect(SelectComponent) {
  var _class, _temp;

  return _temp = _class =
  /*#__PURE__*/
  function (_Component) {
    _inherits(Async, _Component);

    function Async(props) {
      var _this;

      _classCallCheck(this, Async);

      _this = _possibleConstructorReturn(this, _getPrototypeOf(Async).call(this));

      _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "select", void 0);

      _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "lastRequest", void 0);

      _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "mounted", false);

      _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "optionsCache", {});

      _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "handleInputChange", function (newValue, actionMeta) {
        var _this$props = _this.props,
            cacheOptions = _this$props.cacheOptions,
            onInputChange = _this$props.onInputChange; // TODO

        var inputValue = handleInputChange(newValue, actionMeta, onInputChange);

        if (!inputValue) {
          delete _this.lastRequest;

          _this.setState({
            inputValue: '',
            loadedInputValue: '',
            loadedOptions: [],
            isLoading: false,
            passEmptyOptions: false
          });

          return;
        }

        if (cacheOptions && _this.optionsCache[inputValue]) {
          _this.setState({
            inputValue: inputValue,
            loadedInputValue: inputValue,
            loadedOptions: _this.optionsCache[inputValue],
            isLoading: false,
            passEmptyOptions: false
          });
        } else {
          var request = _this.lastRequest = {};

          _this.setState({
            inputValue: inputValue,
            isLoading: true,
            passEmptyOptions: !_this.state.loadedInputValue
          }, function () {
            _this.loadOptions(inputValue, function (options) {
              if (!_this.mounted) return;

              if (options) {
                _this.optionsCache[inputValue] = options;
              }

              if (request !== _this.lastRequest) return;
              delete _this.lastRequest;

              _this.setState({
                isLoading: false,
                loadedInputValue: inputValue,
                loadedOptions: options || [],
                passEmptyOptions: false
              });
            });
          });
        }

        return inputValue;
      });

      _this.state = {
        defaultOptions: Array.isArray(props.defaultOptions) ? props.defaultOptions : undefined,
        inputValue: typeof props.inputValue !== 'undefined' ? props.inputValue : '',
        isLoading: props.defaultOptions === true ? true : false,
        loadedOptions: [],
        passEmptyOptions: false
      };
      return _this;
    }

    _createClass(Async, [{
      key: "componentDidMount",
      value: function componentDidMount() {
        var _this2 = this;

        this.mounted = true;
        var defaultOptions = this.props.defaultOptions;
        var inputValue = this.state.inputValue;

        if (defaultOptions === true) {
          this.loadOptions(inputValue, function (options) {
            if (!_this2.mounted) return;
            var isLoading = !!_this2.lastRequest;

            _this2.setState({
              defaultOptions: options || [],
              isLoading: isLoading
            });
          });
        }
      }
    }, {
      key: "componentWillReceiveProps",
      value: function componentWillReceiveProps(nextProps) {
        // if the cacheOptions prop changes, clear the cache
        if (nextProps.cacheOptions !== this.props.cacheOptions) {
          this.optionsCache = {};
        }

        if (nextProps.defaultOptions !== this.props.defaultOptions) {
          this.setState({
            defaultOptions: Array.isArray(nextProps.defaultOptions) ? nextProps.defaultOptions : undefined
          });
        }
      }
    }, {
      key: "componentWillUnmount",
      value: function componentWillUnmount() {
        this.mounted = false;
      }
    }, {
      key: "focus",
      value: function focus() {
        this.select.focus();
      }
    }, {
      key: "blur",
      value: function blur() {
        this.select.blur();
      }
    }, {
      key: "loadOptions",
      value: function loadOptions(inputValue, callback) {
        var loadOptions = this.props.loadOptions;
        if (!loadOptions) return callback();
        var loader = loadOptions(inputValue, callback);

        if (loader && typeof loader.then === 'function') {
          loader.then(callback, function () {
            return callback();
          });
        }
      }
    }, {
      key: "render",
      value: function render() {
        var _this3 = this;

        var _this$props2 = this.props,
            loadOptions = _this$props2.loadOptions,
            props = _objectWithoutProperties(_this$props2, ["loadOptions"]);

        var _this$state = this.state,
            defaultOptions = _this$state.defaultOptions,
            inputValue = _this$state.inputValue,
            isLoading = _this$state.isLoading,
            loadedInputValue = _this$state.loadedInputValue,
            loadedOptions = _this$state.loadedOptions,
            passEmptyOptions = _this$state.passEmptyOptions;
        var options = passEmptyOptions ? [] : inputValue && loadedInputValue ? loadedOptions : defaultOptions || [];
        return React.createElement(SelectComponent, _extends$2({}, props, {
          ref: function ref(_ref) {
            _this3.select = _ref;
          },
          options: options,
          isLoading: isLoading,
          onInputChange: this.handleInputChange
        }));
      }
    }]);

    return Async;
  }(Component), _defineProperty$1(_class, "defaultProps", defaultProps$2), _temp;
};
var SelectState = manageState(Select);
var Async = makeAsyncSelect(SelectState);

var compareOption = function compareOption() {
  var inputValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  var option = arguments.length > 1 ? arguments[1] : undefined;
  var candidate = String(inputValue).toLowerCase();
  var optionValue = String(option.value).toLowerCase();
  var optionLabel = String(option.label).toLowerCase();
  return optionValue === candidate || optionLabel === candidate;
};

var builtins = {
  formatCreateLabel: function formatCreateLabel(inputValue) {
    return "Create \"".concat(inputValue, "\"");
  },
  isValidNewOption: function isValidNewOption(inputValue, selectValue, selectOptions) {
    return !(!inputValue || selectValue.some(function (option) {
      return compareOption(inputValue, option);
    }) || selectOptions.some(function (option) {
      return compareOption(inputValue, option);
    }));
  },
  getNewOptionData: function getNewOptionData(inputValue, optionLabel) {
    return {
      label: optionLabel,
      value: inputValue,
      __isNew__: true
    };
  }
};
var defaultProps$3 = _objectSpread({
  allowCreateWhileLoading: false,
  createOptionPosition: 'last'
}, builtins);
var makeCreatableSelect = function makeCreatableSelect(SelectComponent) {
  var _class, _temp;

  return _temp = _class =
  /*#__PURE__*/
  function (_Component) {
    _inherits(Creatable, _Component);

    function Creatable(props) {
      var _this;

      _classCallCheck(this, Creatable);

      _this = _possibleConstructorReturn(this, _getPrototypeOf(Creatable).call(this, props));

      _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "select", void 0);

      _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "onChange", function (newValue, actionMeta) {
        var _this$props = _this.props,
            getNewOptionData = _this$props.getNewOptionData,
            inputValue = _this$props.inputValue,
            isMulti = _this$props.isMulti,
            onChange = _this$props.onChange,
            onCreateOption = _this$props.onCreateOption,
            value = _this$props.value;

        if (actionMeta.action !== 'select-option') {
          return onChange(newValue, actionMeta);
        }

        var newOption = _this.state.newOption;
        var valueArray = Array.isArray(newValue) ? newValue : [newValue];

        if (valueArray[valueArray.length - 1] === newOption) {
          if (onCreateOption) onCreateOption(inputValue);else {
            var newOptionData = getNewOptionData(inputValue, inputValue);
            var newActionMeta = {
              action: 'create-option'
            };

            if (isMulti) {
              onChange([].concat(_toConsumableArray(cleanValue(value)), [newOptionData]), newActionMeta);
            } else {
              onChange(newOptionData, newActionMeta);
            }
          }
          return;
        }

        onChange(newValue, actionMeta);
      });

      var options = props.options || [];
      _this.state = {
        newOption: undefined,
        options: options
      };
      return _this;
    }

    _createClass(Creatable, [{
      key: "componentWillReceiveProps",
      value: function componentWillReceiveProps(nextProps) {
        var allowCreateWhileLoading = nextProps.allowCreateWhileLoading,
            createOptionPosition = nextProps.createOptionPosition,
            formatCreateLabel = nextProps.formatCreateLabel,
            getNewOptionData = nextProps.getNewOptionData,
            inputValue = nextProps.inputValue,
            isLoading = nextProps.isLoading,
            isValidNewOption = nextProps.isValidNewOption,
            value = nextProps.value;
        var options = nextProps.options || [];
        var newOption = this.state.newOption;

        if (isValidNewOption(inputValue, cleanValue(value), options)) {
          newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue));
        } else {
          newOption = undefined;
        }

        this.setState({
          newOption: newOption,
          options: (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption].concat(_toConsumableArray(options)) : [].concat(_toConsumableArray(options), [newOption]) : options
        });
      }
    }, {
      key: "focus",
      value: function focus() {
        this.select.focus();
      }
    }, {
      key: "blur",
      value: function blur() {
        this.select.blur();
      }
    }, {
      key: "render",
      value: function render() {
        var _this2 = this;

        var props = _extends$2({}, this.props);

        var options = this.state.options;
        return React.createElement(SelectComponent, _extends$2({}, props, {
          ref: function ref(_ref) {
            _this2.select = _ref;
          },
          options: options,
          onChange: this.onChange
        }));
      }
    }]);

    return Creatable;
  }(Component), _defineProperty$1(_class, "defaultProps", defaultProps$3), _temp;
}; // TODO: do this in package entrypoint

var SelectCreatable = makeCreatableSelect(Select);
var Creatable = manageState(SelectCreatable);

var SelectCreatable$1 = makeCreatableSelect(Select);
var SelectCreatableState = manageState(SelectCreatable$1);
var AsyncCreatable = makeAsyncSelect(SelectCreatableState);

// strip transition props off before spreading onto select component
// note we need to be explicit about innerRef for flow
var AnimatedInput = function AnimatedInput(WrappedComponent) {
  return function (_ref) {
    var inProp = _ref.in,
        onExited = _ref.onExited,
        appear = _ref.appear,
        enter = _ref.enter,
        exit = _ref.exit,
        props = _objectWithoutProperties(_ref, ["in", "onExited", "appear", "enter", "exit"]);

    return React.createElement(WrappedComponent, props);
  };
};

var Fade = function Fade(_ref) {
  var Tag = _ref.component,
      _ref$duration = _ref.duration,
      duration = _ref$duration === void 0 ? 1 : _ref$duration,
      inProp = _ref.in,
      onExited = _ref.onExited,
      props = _objectWithoutProperties(_ref, ["component", "duration", "in", "onExited"]);

  var transition = {
    entering: {
      opacity: 0
    },
    entered: {
      opacity: 1,
      transition: "opacity ".concat(duration, "ms")
    },
    exiting: {
      opacity: 0
    },
    exited: {
      opacity: 0
    }
  };
  return React.createElement(reactTransitionGroup_1, {
    mountOnEnter: true,
    unmountOnExit: true,
    in: inProp,
    timeout: duration
  }, function (state) {
    var innerProps = {
      style: _objectSpread({}, transition[state])
    };
    return React.createElement(Tag, _extends$2({
      innerProps: innerProps
    }, props));
  });
}; // ==============================
// Collapse Transition
// ==============================

var collapseDuration = 260;
// wrap each MultiValue with a collapse transition; decreases width until
// finally removing from DOM
var Collapse =
/*#__PURE__*/
function (_Component) {
  _inherits(Collapse, _Component);

  function Collapse() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, Collapse);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Collapse)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "duration", collapseDuration);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "rafID", void 0);

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "state", {
      width: 'auto'
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "transition", {
      exiting: {
        width: 0,
        transition: "width ".concat(_this.duration, "ms ease-out")
      },
      exited: {
        width: 0
      }
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getWidth", function (ref) {
      if (ref && isNaN(_this.state.width)) {
        /*
          Here we're invoking requestAnimationFrame with a callback invoking our
          call to getBoundingClientRect and setState in order to resolve an edge case
          around portalling. Certain portalling solutions briefly remove children from the DOM
          before appending them to the target node. This is to avoid us trying to call getBoundingClientrect
          while the Select component is in this state.
        */
        // cannot use `offsetWidth` because it is rounded
        _this.rafID = window.requestAnimationFrame(function () {
          var _ref$getBoundingClien = ref.getBoundingClientRect(),
              width = _ref$getBoundingClien.width;

          _this.setState({
            width: width
          });
        });
      }
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getStyle", function (width) {
      return {
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        width: width
      };
    });

    _defineProperty$1(_assertThisInitialized$1(_assertThisInitialized$1(_this)), "getTransition", function (state) {
      return _this.transition[state];
    });

    return _this;
  }

  _createClass(Collapse, [{
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.rafID) {
        window.cancelAnimationFrame(this.rafID);
      }
    } // width must be calculated; cannot transition from `undefined` to `number`

  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          children = _this$props.children,
          inProp = _this$props.in;
      var width = this.state.width;
      return React.createElement(reactTransitionGroup_1, {
        enter: false,
        mountOnEnter: true,
        unmountOnExit: true,
        in: inProp,
        timeout: this.duration
      }, function (state) {
        var style = _objectSpread({}, _this2.getStyle(width), _this2.getTransition(state));

        return React.createElement("div", {
          ref: _this2.getWidth,
          style: style
        }, children);
      });
    }
  }]);

  return Collapse;
}(Component);

var AnimatedMultiValue = function AnimatedMultiValue(WrappedComponent) {
  return function (_ref) {
    var inProp = _ref.in,
        onExited = _ref.onExited,
        props = _objectWithoutProperties(_ref, ["in", "onExited"]);

    return React.createElement(Collapse, {
      in: inProp,
      onExited: onExited
    }, React.createElement(WrappedComponent, _extends$2({
      cropWithEllipsis: inProp
    }, props)));
  };
};

var AnimatedPlaceholder = function AnimatedPlaceholder(WrappedComponent) {
  return function (props) {
    return React.createElement(Fade, _extends$2({
      component: WrappedComponent,
      duration: props.isMulti ? collapseDuration : 1
    }, props));
  };
};

var AnimatedSingleValue = function AnimatedSingleValue(WrappedComponent) {
  return function (props) {
    return React.createElement(Fade, _extends$2({
      component: WrappedComponent
    }, props));
  };
};

// make ValueContainer a transition group
var AnimatedValueContainer = function AnimatedValueContainer(WrappedComponent) {
  return function (props) {
    return React.createElement(reactTransitionGroup_2, _extends$2({
      component: WrappedComponent
    }, props));
  };
};

var makeAnimated = function makeAnimated() {
  var externalComponents = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var components$$1 = defaultComponents({
    components: externalComponents
  });

  var Input$$1 = components$$1.Input,
      MultiValue = components$$1.MultiValue,
      Placeholder = components$$1.Placeholder,
      SingleValue = components$$1.SingleValue,
      ValueContainer = components$$1.ValueContainer,
      rest = _objectWithoutProperties(components$$1, ["Input", "MultiValue", "Placeholder", "SingleValue", "ValueContainer"]);

  return _objectSpread({
    Input: AnimatedInput(Input$$1),
    MultiValue: AnimatedMultiValue(MultiValue),
    Placeholder: AnimatedPlaceholder(Placeholder),
    SingleValue: AnimatedSingleValue(SingleValue),
    ValueContainer: AnimatedValueContainer(ValueContainer)
  }, rest);
};

var AnimatedComponents = makeAnimated();
var Input$1$1 = AnimatedComponents.Input;
var MultiValue$1 = AnimatedComponents.MultiValue;
var Placeholder$1 = AnimatedComponents.Placeholder;
var SingleValue$1 = AnimatedComponents.SingleValue;
var ValueContainer$1 = AnimatedComponents.ValueContainer;
var index$4 = index$2(makeAnimated, exportedEqual);

var index$1$1 = manageState(Select);

function _templateObject$L() {
  var data = taggedTemplateLiteralLoose(["\n\tpointer-events: none;\n"]);

  _templateObject$L = function _templateObject() {
    return data;
  };

  return data;
}

var MultiInputOption = function MultiInputOption(_ref) {
  var children = _ref.children,
      isSelected = _ref.isSelected,
      props = objectWithoutPropertiesLoose(_ref, ["children", "isSelected"]);

  return React.createElement(components.Option, props, React.createElement(CheckboxEventLess, null, React.createElement(Checkbox$1, {
    label: children,
    checked: isSelected
  })));
};

var CheckboxEventLess = styled.div(_templateObject$L());
MultiInputOption.defaultProps = {
  classNamePrefix: 'multi-input-option',
  children: null,
  isSelected: false
};
MultiInputOption.displayName = 'MultiInputOption';
MultiInputOption.propTypes = {
  isSelected: PropTypes.bool,
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
  classNamePrefix: PropTypes.string
};

var MultiInputValueContainer = function MultiInputValueContainer(_ref) {
  var children = _ref.children,
      getValue = _ref.getValue,
      selectProps = _ref.selectProps,
      props = objectWithoutPropertiesLoose(_ref, ["children", "getValue", "selectProps"]);

  var valueLength = getValue().length;
  var inputValue = selectProps.inputValue,
      formatMessage = selectProps.formatMessage;
  return React.createElement(components.ValueContainer, props, !inputValue && formatMessage(valueLength), React.Children.map(children, function (child) {
    return child && child.type === components.Input ? child : null;
  }));
};

MultiInputValueContainer.defaultProps = {
  getValue: undefined,
  selectProps: {},
  children: null
};
MultiInputValueContainer.propTypes = {
  getValue: PropTypes.func,
  selectProps: PropTypes.shape({
    inputValue: PropTypes.string,
    formatMessage: PropTypes.func
  }),
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
};

function _templateObject$M() {
  var data = taggedTemplateLiteralLoose(["\n\t& .select__placeholder {\n\t\tcolor: ", ";\n\t}\n\t& .select__control {\n\t\tmin-height: 34px;\n\t\tborder-radius: ", ";\n\t}\n\t& .select__menu {\n\t\tz-index: 3;\n\t\tpadding: ", ";\n\t\tborder-radius: ", ";\n\t}\n\t& .select__option {\n\t\tmargin-top: 2px;\n\t\tmargin-bottom: 2px;\n\t\tborder-radius: ", " !important;\n\t\tcursor: pointer;\n\t}\n\t& .select__option--is-focused {\n\t\tbackground-color: ", " !important;\n\t}\n\t& .select__option--is-selected {\n\t\tbackground-color: ", " !important;\n\t}\n\t& .select__value-container {\n\t\tpadding: 0 8px;\n\t}\n\t& .select__indicator {\n\t\twidth: 32px;\n\t\theight: 32px;\n\t}\n\t& .select__indicator-separator {\n\t\tdisplay: none;\n\t}\n"]);

  _templateObject$M = function _templateObject() {
    return data;
  };

  return data;
}
var SelectStyled = styled(index$1$1)(_templateObject$M(), function (_ref) {
  var theme = _ref.theme;
  return theme.select.placeholderColor;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.select.borderRadius;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.select.menuPadding;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.select.borderRadius;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.select.borderRadius;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.select.focusedBackgroundColor;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.select.selectedBackgroundColor;
});

var Select$1 = function Select$$1(_ref8) {
  var isMulti = _ref8.isMulti,
      props = objectWithoutPropertiesLoose(_ref8, ["isMulti"]);

  if (isMulti) {
    props = _extends_1({}, props, {
      isMulti: isMulti,
      hideSelectedOptions: false,
      closeMenuOnSelect: false,
      components: {
        Option: MultiInputOption,
        ValueContainer: MultiInputValueContainer
      }
    });
  }

  return React.createElement(SelectStyled, props);
};

Select$1.defaultProps = {
  isMulti: false,
  classNamePrefix: 'select',
  formatMessage: function formatMessage(elem) {
    return elem;
  }
};
Select$1.displayName = 'Select';
Select$1.propTypes = {
  /** If users are allowed to select more than one option */
  isMulti: PropTypes.bool,

  /** String to be pre-appended to internal classNames */
  classNamePrefix: PropTypes.string,

  /** Function to format multi select label container */
  formatMessage: PropTypes.func
};

function _templateObject$N() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-block;\n\tcursor: pointer;\n"]);

  _templateObject$N = function _templateObject() {
    return data;
  };

  return data;
}

var Collapse$1 = function Collapse(_ref) {
  var trigger = _ref.trigger,
      children = _ref.children;

  var _useState = useState(false),
      open = _useState[0],
      setOpen = _useState[1];

  return React.createElement(Fragment, null, React.createElement(Wrapper, {
    onClick: function onClick() {
      return setOpen(!open);
    }
  }, trigger), React.createElement(Spring, {
    from: {
      height: open ? 0 : 'auto',
      opacity: open ? 0 : 1
    },
    to: {
      height: open ? 'auto' : 0,
      opacity: open ? 1 : 0
    },
    after: {
      display: open ? 'block' : 'none'
    }
  }, function (props) {
    return React.createElement("div", {
      open: open,
      className: "show",
      style: props
    }, children);
  }));
};

var Wrapper = styled.div(_templateObject$N());
Wrapper.displayName = 'Wrapper';
Collapse$1.displayName = 'Collapse';
Collapse$1.defaultPropTypes = {
  children: null,
  trigger: null
};
Collapse$1.propTypes = {
  /**  Trigger element  */
  trigger: PropTypes.node.isRequired,

  /**  hidden element */
  children: PropTypes.node.isRequired
};

function _templateObject6$3() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: ", ";\n\tpadding: 20px;\n\tborder: thin solid ", ";\n\tborder-radius: 0 0 4px 4px;\n"]);

  _templateObject6$3 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5$4() {
  var data = taggedTemplateLiteralLoose(["\n\tmargin-right: 6px;\n\tcolor: ", ";\n\tfont-size: 13px;\n\ttext-transform: uppercase;\n"]);

  _templateObject5$4 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$9() {
  var data = taggedTemplateLiteralLoose(["\n\tcolor: ", " !important;\n\ttransform: ", ";\n\ttransition: 0.33s;\n"]);

  _templateObject4$9 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$c() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n"]);

  _templateObject3$c = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$h() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 12px 20px;\n\n\tbackground: ", ";\n\tborder-radius: ", ";\n\tcolor: white;\n\tcursor: ", ";\n"]);

  _templateObject2$h = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$O() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex;\n\tmargin-right: 18px;\n\tmargin-left: auto;\n"]);

  _templateObject$O = function _templateObject() {
    return data;
  };

  return data;
}

var Expandable = function Expandable(_ref) {
  var title = _ref.title,
      icon = _ref.icon,
      tooltip = _ref.tooltip,
      children = _ref.children,
      open = _ref.open,
      disabled = _ref.disabled,
      onClick = _ref.onClick,
      headerComponent = _ref.headerComponent,
      props = objectWithoutPropertiesLoose(_ref, ["title", "icon", "tooltip", "children", "open", "disabled", "onClick", "headerComponent"]);

  var id = title.replace(/ /g, '-');
  var color = disabled ? colors.gray : colors.yellow;
  var text = disabled ? '' : tooltip;

  var handleOnClick = function handleOnClick(e) {
    return disabled ? e.stopPropagation() : onClick();
  };

  return React.createElement(Fragment, null, React.createElement(ExpandableHeader, _extends_1({
    onClick: handleOnClick,
    open: open,
    disabled: disabled
  }, props), React.createElement(Flex$1, null, React.createElement(Title$1, {
    disabled: disabled
  }, title), icon && React.createElement(HelpTooltip, {
    id: id,
    disabled: disabled,
    icon: icon,
    color: color,
    text: text,
    place: "bottom",
    multiline: true
  })), headerComponent && React.createElement(HeaderComponentContainer, {
    onClick: function onClick(e) {
      return e.stopPropagation();
    }
  }, headerComponent), React.createElement(IconAnimated, {
    open: open,
    icon: "select-down",
    color: "#FFF",
    disabled: disabled
  })), React.createElement(ExpandableContent, {
    open: open,
    disabled: disabled
  }, children));
};

var HeaderComponentContainer = styled.div(_templateObject$O());
HeaderComponentContainer.displayName = 'HeaderComponentContainer';
var ExpandableHeader = styled.div(_templateObject2$h(), function (_ref2) {
  var open = _ref2.open,
      disabled = _ref2.disabled,
      theme = _ref2.theme;
  return disabled ? theme.colors.strokeGray : open ? theme.colors.deepBlue : theme.colors.activeBlue;
}, function (_ref3) {
  var open = _ref3.open;
  return open ? '4px 4px 0 0' : '4px';
}, function (_ref4) {
  var disabled = _ref4.disabled;
  return disabled ? 'not-allowed' : 'pointer';
});
ExpandableHeader.displayName = 'ExpandableHeader';
var Flex$1 = styled.div(_templateObject3$c());
var IconAnimated = styled(Icon$1)(_templateObject4$9(), function (_ref5) {
  var disabled = _ref5.disabled,
      theme = _ref5.theme;
  return disabled ? theme.colors.gray : 'white';
}, function (_ref6) {
  var open = _ref6.open;
  return open && 'rotate(180deg)';
});
IconAnimated.displayName = 'IconAnimated';
var Title$1 = styled.div(_templateObject5$4(), function (_ref7) {
  var disabled = _ref7.disabled,
      theme = _ref7.theme;
  return disabled ? theme.colors.gray : 'white';
});
var ExpandableContent = styled.div(_templateObject6$3(), function (_ref8) {
  var open = _ref8.open;
  return open ? 'block' : 'none';
}, function (_ref9) {
  var disabled = _ref9.disabled,
      theme = _ref9.theme;
  return disabled ? theme.colors.strokeGray : theme.colors.deepBlue;
});
ExpandableContent.displayName = 'ExpandableContent';
Expandable.displayName = 'Expandable';
Expandable.defaultProps = {
  icon: null,
  tooltip: null,
  disabled: false,
  headerComponent: null
};
Expandable.propTypes = {
  /** Title  */
  title: PropTypes.string.isRequired,

  /** Disabled flag */
  disabled: PropTypes.bool,

  /** Warning icon name */
  icon: PropTypes.string,

  /** Anything that can be rendered  */
  children: PropTypes.node.isRequired,

  /** Tooltip text message  */
  tooltip: PropTypes.string,

  /** If it is open prop */
  open: PropTypes.bool.isRequired,

  /** Set onClick handler */
  onClick: PropTypes.func.isRequired,

  /** Displayed component to the arrow's left side */
  headerComponent: PropTypes.node
};

var ExpandableSection = function ExpandableSection(_ref) {
  var title = _ref.title,
      icon = _ref.icon,
      children = _ref.children,
      tooltip = _ref.tooltip,
      disabled = _ref.disabled,
      props = objectWithoutPropertiesLoose(_ref, ["title", "icon", "children", "tooltip", "disabled"]);

  var _useState = useState(false),
      open = _useState[0],
      setOpen = _useState[1];

  return React.createElement(Expandable, _extends_1({
    title: title,
    icon: icon,
    tooltip: tooltip,
    onClick: function onClick() {
      return setOpen(!open);
    },
    open: open,
    disabled: disabled
  }, props), children);
};

ExpandableSection.displayName = 'ExpandableSection';
ExpandableSection.defaultProps = {
  icon: null,
  tooltip: null,
  disabled: false,
  headerComponent: null
};
ExpandableSection.propTypes = {
  /** Title  */
  title: PropTypes.string.isRequired,

  /** Warning icon name */
  icon: PropTypes.string,

  /** Anything that can be rendered  */
  children: PropTypes.node.isRequired,

  /** Tooltip text message  */
  tooltip: PropTypes.string,

  /** Disabled flag  */
  disabled: PropTypes.bool,

  /** Displayed component to the arrow's left side */
  headerComponent: PropTypes.node
};

var moment = createCommonjsModule(function (module, exports) {
(function (global, factory) {
    module.exports = factory();
}(commonjsGlobal, (function () {
    var hookCallback;

    function hooks () {
        return hookCallback.apply(null, arguments);
    }

    // This is done to register the method called with moment()
    // without creating circular dependencies.
    function setHookCallback (callback) {
        hookCallback = callback;
    }

    function isArray(input) {
        return input instanceof Array || Object.prototype.toString.call(input) === '[object Array]';
    }

    function isObject(input) {
        // IE8 will treat undefined and null as object if it wasn't for
        // input != null
        return input != null && Object.prototype.toString.call(input) === '[object Object]';
    }

    function isObjectEmpty(obj) {
        if (Object.getOwnPropertyNames) {
            return (Object.getOwnPropertyNames(obj).length === 0);
        } else {
            var k;
            for (k in obj) {
                if (obj.hasOwnProperty(k)) {
                    return false;
                }
            }
            return true;
        }
    }

    function isUndefined(input) {
        return input === void 0;
    }

    function isNumber(input) {
        return typeof input === 'number' || Object.prototype.toString.call(input) === '[object Number]';
    }

    function isDate(input) {
        return input instanceof Date || Object.prototype.toString.call(input) === '[object Date]';
    }

    function map(arr, fn) {
        var res = [], i;
        for (i = 0; i < arr.length; ++i) {
            res.push(fn(arr[i], i));
        }
        return res;
    }

    function hasOwnProp(a, b) {
        return Object.prototype.hasOwnProperty.call(a, b);
    }

    function extend(a, b) {
        for (var i in b) {
            if (hasOwnProp(b, i)) {
                a[i] = b[i];
            }
        }

        if (hasOwnProp(b, 'toString')) {
            a.toString = b.toString;
        }

        if (hasOwnProp(b, 'valueOf')) {
            a.valueOf = b.valueOf;
        }

        return a;
    }

    function createUTC (input, format, locale, strict) {
        return createLocalOrUTC(input, format, locale, strict, true).utc();
    }

    function defaultParsingFlags() {
        // We need to deep clone this object.
        return {
            empty           : false,
            unusedTokens    : [],
            unusedInput     : [],
            overflow        : -2,
            charsLeftOver   : 0,
            nullInput       : false,
            invalidMonth    : null,
            invalidFormat   : false,
            userInvalidated : false,
            iso             : false,
            parsedDateParts : [],
            meridiem        : null,
            rfc2822         : false,
            weekdayMismatch : false
        };
    }

    function getParsingFlags(m) {
        if (m._pf == null) {
            m._pf = defaultParsingFlags();
        }
        return m._pf;
    }

    var some;
    if (Array.prototype.some) {
        some = Array.prototype.some;
    } else {
        some = function (fun) {
            var t = Object(this);
            var len = t.length >>> 0;

            for (var i = 0; i < len; i++) {
                if (i in t && fun.call(this, t[i], i, t)) {
                    return true;
                }
            }

            return false;
        };
    }

    function isValid(m) {
        if (m._isValid == null) {
            var flags = getParsingFlags(m);
            var parsedParts = some.call(flags.parsedDateParts, function (i) {
                return i != null;
            });
            var isNowValid = !isNaN(m._d.getTime()) &&
                flags.overflow < 0 &&
                !flags.empty &&
                !flags.invalidMonth &&
                !flags.invalidWeekday &&
                !flags.weekdayMismatch &&
                !flags.nullInput &&
                !flags.invalidFormat &&
                !flags.userInvalidated &&
                (!flags.meridiem || (flags.meridiem && parsedParts));

            if (m._strict) {
                isNowValid = isNowValid &&
                    flags.charsLeftOver === 0 &&
                    flags.unusedTokens.length === 0 &&
                    flags.bigHour === undefined;
            }

            if (Object.isFrozen == null || !Object.isFrozen(m)) {
                m._isValid = isNowValid;
            }
            else {
                return isNowValid;
            }
        }
        return m._isValid;
    }

    function createInvalid (flags) {
        var m = createUTC(NaN);
        if (flags != null) {
            extend(getParsingFlags(m), flags);
        }
        else {
            getParsingFlags(m).userInvalidated = true;
        }

        return m;
    }

    // Plugins that add properties should also add the key here (null value),
    // so we can properly clone ourselves.
    var momentProperties = hooks.momentProperties = [];

    function copyConfig(to, from) {
        var i, prop, val;

        if (!isUndefined(from._isAMomentObject)) {
            to._isAMomentObject = from._isAMomentObject;
        }
        if (!isUndefined(from._i)) {
            to._i = from._i;
        }
        if (!isUndefined(from._f)) {
            to._f = from._f;
        }
        if (!isUndefined(from._l)) {
            to._l = from._l;
        }
        if (!isUndefined(from._strict)) {
            to._strict = from._strict;
        }
        if (!isUndefined(from._tzm)) {
            to._tzm = from._tzm;
        }
        if (!isUndefined(from._isUTC)) {
            to._isUTC = from._isUTC;
        }
        if (!isUndefined(from._offset)) {
            to._offset = from._offset;
        }
        if (!isUndefined(from._pf)) {
            to._pf = getParsingFlags(from);
        }
        if (!isUndefined(from._locale)) {
            to._locale = from._locale;
        }

        if (momentProperties.length > 0) {
            for (i = 0; i < momentProperties.length; i++) {
                prop = momentProperties[i];
                val = from[prop];
                if (!isUndefined(val)) {
                    to[prop] = val;
                }
            }
        }

        return to;
    }

    var updateInProgress = false;

    // Moment prototype object
    function Moment(config) {
        copyConfig(this, config);
        this._d = new Date(config._d != null ? config._d.getTime() : NaN);
        if (!this.isValid()) {
            this._d = new Date(NaN);
        }
        // Prevent infinite loop in case updateOffset creates new moment
        // objects.
        if (updateInProgress === false) {
            updateInProgress = true;
            hooks.updateOffset(this);
            updateInProgress = false;
        }
    }

    function isMoment (obj) {
        return obj instanceof Moment || (obj != null && obj._isAMomentObject != null);
    }

    function absFloor (number) {
        if (number < 0) {
            // -0 -> 0
            return Math.ceil(number) || 0;
        } else {
            return Math.floor(number);
        }
    }

    function toInt(argumentForCoercion) {
        var coercedNumber = +argumentForCoercion,
            value = 0;

        if (coercedNumber !== 0 && isFinite(coercedNumber)) {
            value = absFloor(coercedNumber);
        }

        return value;
    }

    // compare two arrays, return the number of differences
    function compareArrays(array1, array2, dontConvert) {
        var len = Math.min(array1.length, array2.length),
            lengthDiff = Math.abs(array1.length - array2.length),
            diffs = 0,
            i;
        for (i = 0; i < len; i++) {
            if ((dontConvert && array1[i] !== array2[i]) ||
                (!dontConvert && toInt(array1[i]) !== toInt(array2[i]))) {
                diffs++;
            }
        }
        return diffs + lengthDiff;
    }

    function warn(msg) {
        if (hooks.suppressDeprecationWarnings === false &&
                (typeof console !==  'undefined') && console.warn) {
            console.warn('Deprecation warning: ' + msg);
        }
    }

    function deprecate(msg, fn) {
        var firstTime = true;

        return extend(function () {
            if (hooks.deprecationHandler != null) {
                hooks.deprecationHandler(null, msg);
            }
            if (firstTime) {
                var args = [];
                var arg;
                for (var i = 0; i < arguments.length; i++) {
                    arg = '';
                    if (typeof arguments[i] === 'object') {
                        arg += '\n[' + i + '] ';
                        for (var key in arguments[0]) {
                            arg += key + ': ' + arguments[0][key] + ', ';
                        }
                        arg = arg.slice(0, -2); // Remove trailing comma and space
                    } else {
                        arg = arguments[i];
                    }
                    args.push(arg);
                }
                warn(msg + '\nArguments: ' + Array.prototype.slice.call(args).join('') + '\n' + (new Error()).stack);
                firstTime = false;
            }
            return fn.apply(this, arguments);
        }, fn);
    }

    var deprecations = {};

    function deprecateSimple(name, msg) {
        if (hooks.deprecationHandler != null) {
            hooks.deprecationHandler(name, msg);
        }
        if (!deprecations[name]) {
            warn(msg);
            deprecations[name] = true;
        }
    }

    hooks.suppressDeprecationWarnings = false;
    hooks.deprecationHandler = null;

    function isFunction(input) {
        return input instanceof Function || Object.prototype.toString.call(input) === '[object Function]';
    }

    function set (config) {
        var prop, i;
        for (i in config) {
            prop = config[i];
            if (isFunction(prop)) {
                this[i] = prop;
            } else {
                this['_' + i] = prop;
            }
        }
        this._config = config;
        // Lenient ordinal parsing accepts just a number in addition to
        // number + (possibly) stuff coming from _dayOfMonthOrdinalParse.
        // TODO: Remove "ordinalParse" fallback in next major release.
        this._dayOfMonthOrdinalParseLenient = new RegExp(
            (this._dayOfMonthOrdinalParse.source || this._ordinalParse.source) +
                '|' + (/\d{1,2}/).source);
    }

    function mergeConfigs(parentConfig, childConfig) {
        var res = extend({}, parentConfig), prop;
        for (prop in childConfig) {
            if (hasOwnProp(childConfig, prop)) {
                if (isObject(parentConfig[prop]) && isObject(childConfig[prop])) {
                    res[prop] = {};
                    extend(res[prop], parentConfig[prop]);
                    extend(res[prop], childConfig[prop]);
                } else if (childConfig[prop] != null) {
                    res[prop] = childConfig[prop];
                } else {
                    delete res[prop];
                }
            }
        }
        for (prop in parentConfig) {
            if (hasOwnProp(parentConfig, prop) &&
                    !hasOwnProp(childConfig, prop) &&
                    isObject(parentConfig[prop])) {
                // make sure changes to properties don't modify parent config
                res[prop] = extend({}, res[prop]);
            }
        }
        return res;
    }

    function Locale(config) {
        if (config != null) {
            this.set(config);
        }
    }

    var keys;

    if (Object.keys) {
        keys = Object.keys;
    } else {
        keys = function (obj) {
            var i, res = [];
            for (i in obj) {
                if (hasOwnProp(obj, i)) {
                    res.push(i);
                }
            }
            return res;
        };
    }

    var defaultCalendar = {
        sameDay : '[Today at] LT',
        nextDay : '[Tomorrow at] LT',
        nextWeek : 'dddd [at] LT',
        lastDay : '[Yesterday at] LT',
        lastWeek : '[Last] dddd [at] LT',
        sameElse : 'L'
    };

    function calendar (key, mom, now) {
        var output = this._calendar[key] || this._calendar['sameElse'];
        return isFunction(output) ? output.call(mom, now) : output;
    }

    var defaultLongDateFormat = {
        LTS  : 'h:mm:ss A',
        LT   : 'h:mm A',
        L    : 'MM/DD/YYYY',
        LL   : 'MMMM D, YYYY',
        LLL  : 'MMMM D, YYYY h:mm A',
        LLLL : 'dddd, MMMM D, YYYY h:mm A'
    };

    function longDateFormat (key) {
        var format = this._longDateFormat[key],
            formatUpper = this._longDateFormat[key.toUpperCase()];

        if (format || !formatUpper) {
            return format;
        }

        this._longDateFormat[key] = formatUpper.replace(/MMMM|MM|DD|dddd/g, function (val) {
            return val.slice(1);
        });

        return this._longDateFormat[key];
    }

    var defaultInvalidDate = 'Invalid date';

    function invalidDate () {
        return this._invalidDate;
    }

    var defaultOrdinal = '%d';
    var defaultDayOfMonthOrdinalParse = /\d{1,2}/;

    function ordinal (number) {
        return this._ordinal.replace('%d', number);
    }

    var defaultRelativeTime = {
        future : 'in %s',
        past   : '%s ago',
        s  : 'a few seconds',
        ss : '%d seconds',
        m  : 'a minute',
        mm : '%d minutes',
        h  : 'an hour',
        hh : '%d hours',
        d  : 'a day',
        dd : '%d days',
        M  : 'a month',
        MM : '%d months',
        y  : 'a year',
        yy : '%d years'
    };

    function relativeTime (number, withoutSuffix, string, isFuture) {
        var output = this._relativeTime[string];
        return (isFunction(output)) ?
            output(number, withoutSuffix, string, isFuture) :
            output.replace(/%d/i, number);
    }

    function pastFuture (diff, output) {
        var format = this._relativeTime[diff > 0 ? 'future' : 'past'];
        return isFunction(format) ? format(output) : format.replace(/%s/i, output);
    }

    var aliases = {};

    function addUnitAlias (unit, shorthand) {
        var lowerCase = unit.toLowerCase();
        aliases[lowerCase] = aliases[lowerCase + 's'] = aliases[shorthand] = unit;
    }

    function normalizeUnits(units) {
        return typeof units === 'string' ? aliases[units] || aliases[units.toLowerCase()] : undefined;
    }

    function normalizeObjectUnits(inputObject) {
        var normalizedInput = {},
            normalizedProp,
            prop;

        for (prop in inputObject) {
            if (hasOwnProp(inputObject, prop)) {
                normalizedProp = normalizeUnits(prop);
                if (normalizedProp) {
                    normalizedInput[normalizedProp] = inputObject[prop];
                }
            }
        }

        return normalizedInput;
    }

    var priorities = {};

    function addUnitPriority(unit, priority) {
        priorities[unit] = priority;
    }

    function getPrioritizedUnits(unitsObj) {
        var units = [];
        for (var u in unitsObj) {
            units.push({unit: u, priority: priorities[u]});
        }
        units.sort(function (a, b) {
            return a.priority - b.priority;
        });
        return units;
    }

    function zeroFill(number, targetLength, forceSign) {
        var absNumber = '' + Math.abs(number),
            zerosToFill = targetLength - absNumber.length,
            sign = number >= 0;
        return (sign ? (forceSign ? '+' : '') : '-') +
            Math.pow(10, Math.max(0, zerosToFill)).toString().substr(1) + absNumber;
    }

    var formattingTokens = /(\[[^\[]*\])|(\\)?([Hh]mm(ss)?|Mo|MM?M?M?|Do|DDDo|DD?D?D?|ddd?d?|do?|w[o|w]?|W[o|W]?|Qo?|YYYYYY|YYYYY|YYYY|YY|gg(ggg?)?|GG(GGG?)?|e|E|a|A|hh?|HH?|kk?|mm?|ss?|S{1,9}|x|X|zz?|ZZ?|.)/g;

    var localFormattingTokens = /(\[[^\[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})/g;

    var formatFunctions = {};

    var formatTokenFunctions = {};

    // token:    'M'
    // padded:   ['MM', 2]
    // ordinal:  'Mo'
    // callback: function () { this.month() + 1 }
    function addFormatToken (token, padded, ordinal, callback) {
        var func = callback;
        if (typeof callback === 'string') {
            func = function () {
                return this[callback]();
            };
        }
        if (token) {
            formatTokenFunctions[token] = func;
        }
        if (padded) {
            formatTokenFunctions[padded[0]] = function () {
                return zeroFill(func.apply(this, arguments), padded[1], padded[2]);
            };
        }
        if (ordinal) {
            formatTokenFunctions[ordinal] = function () {
                return this.localeData().ordinal(func.apply(this, arguments), token);
            };
        }
    }

    function removeFormattingTokens(input) {
        if (input.match(/\[[\s\S]/)) {
            return input.replace(/^\[|\]$/g, '');
        }
        return input.replace(/\\/g, '');
    }

    function makeFormatFunction(format) {
        var array = format.match(formattingTokens), i, length;

        for (i = 0, length = array.length; i < length; i++) {
            if (formatTokenFunctions[array[i]]) {
                array[i] = formatTokenFunctions[array[i]];
            } else {
                array[i] = removeFormattingTokens(array[i]);
            }
        }

        return function (mom) {
            var output = '', i;
            for (i = 0; i < length; i++) {
                output += isFunction(array[i]) ? array[i].call(mom, format) : array[i];
            }
            return output;
        };
    }

    // format date using native date object
    function formatMoment(m, format) {
        if (!m.isValid()) {
            return m.localeData().invalidDate();
        }

        format = expandFormat(format, m.localeData());
        formatFunctions[format] = formatFunctions[format] || makeFormatFunction(format);

        return formatFunctions[format](m);
    }

    function expandFormat(format, locale) {
        var i = 5;

        function replaceLongDateFormatTokens(input) {
            return locale.longDateFormat(input) || input;
        }

        localFormattingTokens.lastIndex = 0;
        while (i >= 0 && localFormattingTokens.test(format)) {
            format = format.replace(localFormattingTokens, replaceLongDateFormatTokens);
            localFormattingTokens.lastIndex = 0;
            i -= 1;
        }

        return format;
    }

    var match1         = /\d/;            //       0 - 9
    var match2         = /\d\d/;          //      00 - 99
    var match3         = /\d{3}/;         //     000 - 999
    var match4         = /\d{4}/;         //    0000 - 9999
    var match6         = /[+-]?\d{6}/;    // -999999 - 999999
    var match1to2      = /\d\d?/;         //       0 - 99
    var match3to4      = /\d\d\d\d?/;     //     999 - 9999
    var match5to6      = /\d\d\d\d\d\d?/; //   99999 - 999999
    var match1to3      = /\d{1,3}/;       //       0 - 999
    var match1to4      = /\d{1,4}/;       //       0 - 9999
    var match1to6      = /[+-]?\d{1,6}/;  // -999999 - 999999

    var matchUnsigned  = /\d+/;           //       0 - inf
    var matchSigned    = /[+-]?\d+/;      //    -inf - inf

    var matchOffset    = /Z|[+-]\d\d:?\d\d/gi; // +00:00 -00:00 +0000 -0000 or Z
    var matchShortOffset = /Z|[+-]\d\d(?::?\d\d)?/gi; // +00 -00 +00:00 -00:00 +0000 -0000 or Z

    var matchTimestamp = /[+-]?\d+(\.\d{1,3})?/; // 123456789 123456789.123

    // any word (or two) characters or numbers including two/three word month in arabic.
    // includes scottish gaelic two word and hyphenated months
    var matchWord = /[0-9]{0,256}['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFF07\uFF10-\uFFEF]{1,256}|[\u0600-\u06FF\/]{1,256}(\s*?[\u0600-\u06FF]{1,256}){1,2}/i;

    var regexes = {};

    function addRegexToken (token, regex, strictRegex) {
        regexes[token] = isFunction(regex) ? regex : function (isStrict, localeData) {
            return (isStrict && strictRegex) ? strictRegex : regex;
        };
    }

    function getParseRegexForToken (token, config) {
        if (!hasOwnProp(regexes, token)) {
            return new RegExp(unescapeFormat(token));
        }

        return regexes[token](config._strict, config._locale);
    }

    // Code from http://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript
    function unescapeFormat(s) {
        return regexEscape(s.replace('\\', '').replace(/\\(\[)|\\(\])|\[([^\]\[]*)\]|\\(.)/g, function (matched, p1, p2, p3, p4) {
            return p1 || p2 || p3 || p4;
        }));
    }

    function regexEscape(s) {
        return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
    }

    var tokens = {};

    function addParseToken (token, callback) {
        var i, func = callback;
        if (typeof token === 'string') {
            token = [token];
        }
        if (isNumber(callback)) {
            func = function (input, array) {
                array[callback] = toInt(input);
            };
        }
        for (i = 0; i < token.length; i++) {
            tokens[token[i]] = func;
        }
    }

    function addWeekParseToken (token, callback) {
        addParseToken(token, function (input, array, config, token) {
            config._w = config._w || {};
            callback(input, config._w, config, token);
        });
    }

    function addTimeToArrayFromToken(token, input, config) {
        if (input != null && hasOwnProp(tokens, token)) {
            tokens[token](input, config._a, config, token);
        }
    }

    var YEAR = 0;
    var MONTH = 1;
    var DATE = 2;
    var HOUR = 3;
    var MINUTE = 4;
    var SECOND = 5;
    var MILLISECOND = 6;
    var WEEK = 7;
    var WEEKDAY = 8;

    // FORMATTING

    addFormatToken('Y', 0, 0, function () {
        var y = this.year();
        return y <= 9999 ? '' + y : '+' + y;
    });

    addFormatToken(0, ['YY', 2], 0, function () {
        return this.year() % 100;
    });

    addFormatToken(0, ['YYYY',   4],       0, 'year');
    addFormatToken(0, ['YYYYY',  5],       0, 'year');
    addFormatToken(0, ['YYYYYY', 6, true], 0, 'year');

    // ALIASES

    addUnitAlias('year', 'y');

    // PRIORITIES

    addUnitPriority('year', 1);

    // PARSING

    addRegexToken('Y',      matchSigned);
    addRegexToken('YY',     match1to2, match2);
    addRegexToken('YYYY',   match1to4, match4);
    addRegexToken('YYYYY',  match1to6, match6);
    addRegexToken('YYYYYY', match1to6, match6);

    addParseToken(['YYYYY', 'YYYYYY'], YEAR);
    addParseToken('YYYY', function (input, array) {
        array[YEAR] = input.length === 2 ? hooks.parseTwoDigitYear(input) : toInt(input);
    });
    addParseToken('YY', function (input, array) {
        array[YEAR] = hooks.parseTwoDigitYear(input);
    });
    addParseToken('Y', function (input, array) {
        array[YEAR] = parseInt(input, 10);
    });

    // HELPERS

    function daysInYear(year) {
        return isLeapYear(year) ? 366 : 365;
    }

    function isLeapYear(year) {
        return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
    }

    // HOOKS

    hooks.parseTwoDigitYear = function (input) {
        return toInt(input) + (toInt(input) > 68 ? 1900 : 2000);
    };

    // MOMENTS

    var getSetYear = makeGetSet('FullYear', true);

    function getIsLeapYear () {
        return isLeapYear(this.year());
    }

    function makeGetSet (unit, keepTime) {
        return function (value) {
            if (value != null) {
                set$1(this, unit, value);
                hooks.updateOffset(this, keepTime);
                return this;
            } else {
                return get(this, unit);
            }
        };
    }

    function get (mom, unit) {
        return mom.isValid() ?
            mom._d['get' + (mom._isUTC ? 'UTC' : '') + unit]() : NaN;
    }

    function set$1 (mom, unit, value) {
        if (mom.isValid() && !isNaN(value)) {
            if (unit === 'FullYear' && isLeapYear(mom.year()) && mom.month() === 1 && mom.date() === 29) {
                mom._d['set' + (mom._isUTC ? 'UTC' : '') + unit](value, mom.month(), daysInMonth(value, mom.month()));
            }
            else {
                mom._d['set' + (mom._isUTC ? 'UTC' : '') + unit](value);
            }
        }
    }

    // MOMENTS

    function stringGet (units) {
        units = normalizeUnits(units);
        if (isFunction(this[units])) {
            return this[units]();
        }
        return this;
    }


    function stringSet (units, value) {
        if (typeof units === 'object') {
            units = normalizeObjectUnits(units);
            var prioritized = getPrioritizedUnits(units);
            for (var i = 0; i < prioritized.length; i++) {
                this[prioritized[i].unit](units[prioritized[i].unit]);
            }
        } else {
            units = normalizeUnits(units);
            if (isFunction(this[units])) {
                return this[units](value);
            }
        }
        return this;
    }

    function mod(n, x) {
        return ((n % x) + x) % x;
    }

    var indexOf;

    if (Array.prototype.indexOf) {
        indexOf = Array.prototype.indexOf;
    } else {
        indexOf = function (o) {
            // I know
            var i;
            for (i = 0; i < this.length; ++i) {
                if (this[i] === o) {
                    return i;
                }
            }
            return -1;
        };
    }

    function daysInMonth(year, month) {
        if (isNaN(year) || isNaN(month)) {
            return NaN;
        }
        var modMonth = mod(month, 12);
        year += (month - modMonth) / 12;
        return modMonth === 1 ? (isLeapYear(year) ? 29 : 28) : (31 - modMonth % 7 % 2);
    }

    // FORMATTING

    addFormatToken('M', ['MM', 2], 'Mo', function () {
        return this.month() + 1;
    });

    addFormatToken('MMM', 0, 0, function (format) {
        return this.localeData().monthsShort(this, format);
    });

    addFormatToken('MMMM', 0, 0, function (format) {
        return this.localeData().months(this, format);
    });

    // ALIASES

    addUnitAlias('month', 'M');

    // PRIORITY

    addUnitPriority('month', 8);

    // PARSING

    addRegexToken('M',    match1to2);
    addRegexToken('MM',   match1to2, match2);
    addRegexToken('MMM',  function (isStrict, locale) {
        return locale.monthsShortRegex(isStrict);
    });
    addRegexToken('MMMM', function (isStrict, locale) {
        return locale.monthsRegex(isStrict);
    });

    addParseToken(['M', 'MM'], function (input, array) {
        array[MONTH] = toInt(input) - 1;
    });

    addParseToken(['MMM', 'MMMM'], function (input, array, config, token) {
        var month = config._locale.monthsParse(input, token, config._strict);
        // if we didn't find a month name, mark the date as invalid.
        if (month != null) {
            array[MONTH] = month;
        } else {
            getParsingFlags(config).invalidMonth = input;
        }
    });

    // LOCALES

    var MONTHS_IN_FORMAT = /D[oD]?(\[[^\[\]]*\]|\s)+MMMM?/;
    var defaultLocaleMonths = 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_');
    function localeMonths (m, format) {
        if (!m) {
            return isArray(this._months) ? this._months :
                this._months['standalone'];
        }
        return isArray(this._months) ? this._months[m.month()] :
            this._months[(this._months.isFormat || MONTHS_IN_FORMAT).test(format) ? 'format' : 'standalone'][m.month()];
    }

    var defaultLocaleMonthsShort = 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_');
    function localeMonthsShort (m, format) {
        if (!m) {
            return isArray(this._monthsShort) ? this._monthsShort :
                this._monthsShort['standalone'];
        }
        return isArray(this._monthsShort) ? this._monthsShort[m.month()] :
            this._monthsShort[MONTHS_IN_FORMAT.test(format) ? 'format' : 'standalone'][m.month()];
    }

    function handleStrictParse(monthName, format, strict) {
        var i, ii, mom, llc = monthName.toLocaleLowerCase();
        if (!this._monthsParse) {
            // this is not used
            this._monthsParse = [];
            this._longMonthsParse = [];
            this._shortMonthsParse = [];
            for (i = 0; i < 12; ++i) {
                mom = createUTC([2000, i]);
                this._shortMonthsParse[i] = this.monthsShort(mom, '').toLocaleLowerCase();
                this._longMonthsParse[i] = this.months(mom, '').toLocaleLowerCase();
            }
        }

        if (strict) {
            if (format === 'MMM') {
                ii = indexOf.call(this._shortMonthsParse, llc);
                return ii !== -1 ? ii : null;
            } else {
                ii = indexOf.call(this._longMonthsParse, llc);
                return ii !== -1 ? ii : null;
            }
        } else {
            if (format === 'MMM') {
                ii = indexOf.call(this._shortMonthsParse, llc);
                if (ii !== -1) {
                    return ii;
                }
                ii = indexOf.call(this._longMonthsParse, llc);
                return ii !== -1 ? ii : null;
            } else {
                ii = indexOf.call(this._longMonthsParse, llc);
                if (ii !== -1) {
                    return ii;
                }
                ii = indexOf.call(this._shortMonthsParse, llc);
                return ii !== -1 ? ii : null;
            }
        }
    }

    function localeMonthsParse (monthName, format, strict) {
        var i, mom, regex;

        if (this._monthsParseExact) {
            return handleStrictParse.call(this, monthName, format, strict);
        }

        if (!this._monthsParse) {
            this._monthsParse = [];
            this._longMonthsParse = [];
            this._shortMonthsParse = [];
        }

        // TODO: add sorting
        // Sorting makes sure if one month (or abbr) is a prefix of another
        // see sorting in computeMonthsParse
        for (i = 0; i < 12; i++) {
            // make the regex if we don't have it already
            mom = createUTC([2000, i]);
            if (strict && !this._longMonthsParse[i]) {
                this._longMonthsParse[i] = new RegExp('^' + this.months(mom, '').replace('.', '') + '$', 'i');
                this._shortMonthsParse[i] = new RegExp('^' + this.monthsShort(mom, '').replace('.', '') + '$', 'i');
            }
            if (!strict && !this._monthsParse[i]) {
                regex = '^' + this.months(mom, '') + '|^' + this.monthsShort(mom, '');
                this._monthsParse[i] = new RegExp(regex.replace('.', ''), 'i');
            }
            // test the regex
            if (strict && format === 'MMMM' && this._longMonthsParse[i].test(monthName)) {
                return i;
            } else if (strict && format === 'MMM' && this._shortMonthsParse[i].test(monthName)) {
                return i;
            } else if (!strict && this._monthsParse[i].test(monthName)) {
                return i;
            }
        }
    }

    // MOMENTS

    function setMonth (mom, value) {
        var dayOfMonth;

        if (!mom.isValid()) {
            // No op
            return mom;
        }

        if (typeof value === 'string') {
            if (/^\d+$/.test(value)) {
                value = toInt(value);
            } else {
                value = mom.localeData().monthsParse(value);
                // TODO: Another silent failure?
                if (!isNumber(value)) {
                    return mom;
                }
            }
        }

        dayOfMonth = Math.min(mom.date(), daysInMonth(mom.year(), value));
        mom._d['set' + (mom._isUTC ? 'UTC' : '') + 'Month'](value, dayOfMonth);
        return mom;
    }

    function getSetMonth (value) {
        if (value != null) {
            setMonth(this, value);
            hooks.updateOffset(this, true);
            return this;
        } else {
            return get(this, 'Month');
        }
    }

    function getDaysInMonth () {
        return daysInMonth(this.year(), this.month());
    }

    var defaultMonthsShortRegex = matchWord;
    function monthsShortRegex (isStrict) {
        if (this._monthsParseExact) {
            if (!hasOwnProp(this, '_monthsRegex')) {
                computeMonthsParse.call(this);
            }
            if (isStrict) {
                return this._monthsShortStrictRegex;
            } else {
                return this._monthsShortRegex;
            }
        } else {
            if (!hasOwnProp(this, '_monthsShortRegex')) {
                this._monthsShortRegex = defaultMonthsShortRegex;
            }
            return this._monthsShortStrictRegex && isStrict ?
                this._monthsShortStrictRegex : this._monthsShortRegex;
        }
    }

    var defaultMonthsRegex = matchWord;
    function monthsRegex (isStrict) {
        if (this._monthsParseExact) {
            if (!hasOwnProp(this, '_monthsRegex')) {
                computeMonthsParse.call(this);
            }
            if (isStrict) {
                return this._monthsStrictRegex;
            } else {
                return this._monthsRegex;
            }
        } else {
            if (!hasOwnProp(this, '_monthsRegex')) {
                this._monthsRegex = defaultMonthsRegex;
            }
            return this._monthsStrictRegex && isStrict ?
                this._monthsStrictRegex : this._monthsRegex;
        }
    }

    function computeMonthsParse () {
        function cmpLenRev(a, b) {
            return b.length - a.length;
        }

        var shortPieces = [], longPieces = [], mixedPieces = [],
            i, mom;
        for (i = 0; i < 12; i++) {
            // make the regex if we don't have it already
            mom = createUTC([2000, i]);
            shortPieces.push(this.monthsShort(mom, ''));
            longPieces.push(this.months(mom, ''));
            mixedPieces.push(this.months(mom, ''));
            mixedPieces.push(this.monthsShort(mom, ''));
        }
        // Sorting makes sure if one month (or abbr) is a prefix of another it
        // will match the longer piece.
        shortPieces.sort(cmpLenRev);
        longPieces.sort(cmpLenRev);
        mixedPieces.sort(cmpLenRev);
        for (i = 0; i < 12; i++) {
            shortPieces[i] = regexEscape(shortPieces[i]);
            longPieces[i] = regexEscape(longPieces[i]);
        }
        for (i = 0; i < 24; i++) {
            mixedPieces[i] = regexEscape(mixedPieces[i]);
        }

        this._monthsRegex = new RegExp('^(' + mixedPieces.join('|') + ')', 'i');
        this._monthsShortRegex = this._monthsRegex;
        this._monthsStrictRegex = new RegExp('^(' + longPieces.join('|') + ')', 'i');
        this._monthsShortStrictRegex = new RegExp('^(' + shortPieces.join('|') + ')', 'i');
    }

    function createDate (y, m, d, h, M, s, ms) {
        // can't just apply() to create a date:
        // https://stackoverflow.com/q/181348
        var date;
        // the date constructor remaps years 0-99 to 1900-1999
        if (y < 100 && y >= 0) {
            // preserve leap years using a full 400 year cycle, then reset
            date = new Date(y + 400, m, d, h, M, s, ms);
            if (isFinite(date.getFullYear())) {
                date.setFullYear(y);
            }
        } else {
            date = new Date(y, m, d, h, M, s, ms);
        }

        return date;
    }

    function createUTCDate (y) {
        var date;
        // the Date.UTC function remaps years 0-99 to 1900-1999
        if (y < 100 && y >= 0) {
            var args = Array.prototype.slice.call(arguments);
            // preserve leap years using a full 400 year cycle, then reset
            args[0] = y + 400;
            date = new Date(Date.UTC.apply(null, args));
            if (isFinite(date.getUTCFullYear())) {
                date.setUTCFullYear(y);
            }
        } else {
            date = new Date(Date.UTC.apply(null, arguments));
        }

        return date;
    }

    // start-of-first-week - start-of-year
    function firstWeekOffset(year, dow, doy) {
        var // first-week day -- which january is always in the first week (4 for iso, 1 for other)
            fwd = 7 + dow - doy,
            // first-week day local weekday -- which local weekday is fwd
            fwdlw = (7 + createUTCDate(year, 0, fwd).getUTCDay() - dow) % 7;

        return -fwdlw + fwd - 1;
    }

    // https://en.wikipedia.org/wiki/ISO_week_date#Calculating_a_date_given_the_year.2C_week_number_and_weekday
    function dayOfYearFromWeeks(year, week, weekday, dow, doy) {
        var localWeekday = (7 + weekday - dow) % 7,
            weekOffset = firstWeekOffset(year, dow, doy),
            dayOfYear = 1 + 7 * (week - 1) + localWeekday + weekOffset,
            resYear, resDayOfYear;

        if (dayOfYear <= 0) {
            resYear = year - 1;
            resDayOfYear = daysInYear(resYear) + dayOfYear;
        } else if (dayOfYear > daysInYear(year)) {
            resYear = year + 1;
            resDayOfYear = dayOfYear - daysInYear(year);
        } else {
            resYear = year;
            resDayOfYear = dayOfYear;
        }

        return {
            year: resYear,
            dayOfYear: resDayOfYear
        };
    }

    function weekOfYear(mom, dow, doy) {
        var weekOffset = firstWeekOffset(mom.year(), dow, doy),
            week = Math.floor((mom.dayOfYear() - weekOffset - 1) / 7) + 1,
            resWeek, resYear;

        if (week < 1) {
            resYear = mom.year() - 1;
            resWeek = week + weeksInYear(resYear, dow, doy);
        } else if (week > weeksInYear(mom.year(), dow, doy)) {
            resWeek = week - weeksInYear(mom.year(), dow, doy);
            resYear = mom.year() + 1;
        } else {
            resYear = mom.year();
            resWeek = week;
        }

        return {
            week: resWeek,
            year: resYear
        };
    }

    function weeksInYear(year, dow, doy) {
        var weekOffset = firstWeekOffset(year, dow, doy),
            weekOffsetNext = firstWeekOffset(year + 1, dow, doy);
        return (daysInYear(year) - weekOffset + weekOffsetNext) / 7;
    }

    // FORMATTING

    addFormatToken('w', ['ww', 2], 'wo', 'week');
    addFormatToken('W', ['WW', 2], 'Wo', 'isoWeek');

    // ALIASES

    addUnitAlias('week', 'w');
    addUnitAlias('isoWeek', 'W');

    // PRIORITIES

    addUnitPriority('week', 5);
    addUnitPriority('isoWeek', 5);

    // PARSING

    addRegexToken('w',  match1to2);
    addRegexToken('ww', match1to2, match2);
    addRegexToken('W',  match1to2);
    addRegexToken('WW', match1to2, match2);

    addWeekParseToken(['w', 'ww', 'W', 'WW'], function (input, week, config, token) {
        week[token.substr(0, 1)] = toInt(input);
    });

    // HELPERS

    // LOCALES

    function localeWeek (mom) {
        return weekOfYear(mom, this._week.dow, this._week.doy).week;
    }

    var defaultLocaleWeek = {
        dow : 0, // Sunday is the first day of the week.
        doy : 6  // The week that contains Jan 6th is the first week of the year.
    };

    function localeFirstDayOfWeek () {
        return this._week.dow;
    }

    function localeFirstDayOfYear () {
        return this._week.doy;
    }

    // MOMENTS

    function getSetWeek (input) {
        var week = this.localeData().week(this);
        return input == null ? week : this.add((input - week) * 7, 'd');
    }

    function getSetISOWeek (input) {
        var week = weekOfYear(this, 1, 4).week;
        return input == null ? week : this.add((input - week) * 7, 'd');
    }

    // FORMATTING

    addFormatToken('d', 0, 'do', 'day');

    addFormatToken('dd', 0, 0, function (format) {
        return this.localeData().weekdaysMin(this, format);
    });

    addFormatToken('ddd', 0, 0, function (format) {
        return this.localeData().weekdaysShort(this, format);
    });

    addFormatToken('dddd', 0, 0, function (format) {
        return this.localeData().weekdays(this, format);
    });

    addFormatToken('e', 0, 0, 'weekday');
    addFormatToken('E', 0, 0, 'isoWeekday');

    // ALIASES

    addUnitAlias('day', 'd');
    addUnitAlias('weekday', 'e');
    addUnitAlias('isoWeekday', 'E');

    // PRIORITY
    addUnitPriority('day', 11);
    addUnitPriority('weekday', 11);
    addUnitPriority('isoWeekday', 11);

    // PARSING

    addRegexToken('d',    match1to2);
    addRegexToken('e',    match1to2);
    addRegexToken('E',    match1to2);
    addRegexToken('dd',   function (isStrict, locale) {
        return locale.weekdaysMinRegex(isStrict);
    });
    addRegexToken('ddd',   function (isStrict, locale) {
        return locale.weekdaysShortRegex(isStrict);
    });
    addRegexToken('dddd',   function (isStrict, locale) {
        return locale.weekdaysRegex(isStrict);
    });

    addWeekParseToken(['dd', 'ddd', 'dddd'], function (input, week, config, token) {
        var weekday = config._locale.weekdaysParse(input, token, config._strict);
        // if we didn't get a weekday name, mark the date as invalid
        if (weekday != null) {
            week.d = weekday;
        } else {
            getParsingFlags(config).invalidWeekday = input;
        }
    });

    addWeekParseToken(['d', 'e', 'E'], function (input, week, config, token) {
        week[token] = toInt(input);
    });

    // HELPERS

    function parseWeekday(input, locale) {
        if (typeof input !== 'string') {
            return input;
        }

        if (!isNaN(input)) {
            return parseInt(input, 10);
        }

        input = locale.weekdaysParse(input);
        if (typeof input === 'number') {
            return input;
        }

        return null;
    }

    function parseIsoWeekday(input, locale) {
        if (typeof input === 'string') {
            return locale.weekdaysParse(input) % 7 || 7;
        }
        return isNaN(input) ? null : input;
    }

    // LOCALES
    function shiftWeekdays (ws, n) {
        return ws.slice(n, 7).concat(ws.slice(0, n));
    }

    var defaultLocaleWeekdays = 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_');
    function localeWeekdays (m, format) {
        var weekdays = isArray(this._weekdays) ? this._weekdays :
            this._weekdays[(m && m !== true && this._weekdays.isFormat.test(format)) ? 'format' : 'standalone'];
        return (m === true) ? shiftWeekdays(weekdays, this._week.dow)
            : (m) ? weekdays[m.day()] : weekdays;
    }

    var defaultLocaleWeekdaysShort = 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_');
    function localeWeekdaysShort (m) {
        return (m === true) ? shiftWeekdays(this._weekdaysShort, this._week.dow)
            : (m) ? this._weekdaysShort[m.day()] : this._weekdaysShort;
    }

    var defaultLocaleWeekdaysMin = 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_');
    function localeWeekdaysMin (m) {
        return (m === true) ? shiftWeekdays(this._weekdaysMin, this._week.dow)
            : (m) ? this._weekdaysMin[m.day()] : this._weekdaysMin;
    }

    function handleStrictParse$1(weekdayName, format, strict) {
        var i, ii, mom, llc = weekdayName.toLocaleLowerCase();
        if (!this._weekdaysParse) {
            this._weekdaysParse = [];
            this._shortWeekdaysParse = [];
            this._minWeekdaysParse = [];

            for (i = 0; i < 7; ++i) {
                mom = createUTC([2000, 1]).day(i);
                this._minWeekdaysParse[i] = this.weekdaysMin(mom, '').toLocaleLowerCase();
                this._shortWeekdaysParse[i] = this.weekdaysShort(mom, '').toLocaleLowerCase();
                this._weekdaysParse[i] = this.weekdays(mom, '').toLocaleLowerCase();
            }
        }

        if (strict) {
            if (format === 'dddd') {
                ii = indexOf.call(this._weekdaysParse, llc);
                return ii !== -1 ? ii : null;
            } else if (format === 'ddd') {
                ii = indexOf.call(this._shortWeekdaysParse, llc);
                return ii !== -1 ? ii : null;
            } else {
                ii = indexOf.call(this._minWeekdaysParse, llc);
                return ii !== -1 ? ii : null;
            }
        } else {
            if (format === 'dddd') {
                ii = indexOf.call(this._weekdaysParse, llc);
                if (ii !== -1) {
                    return ii;
                }
                ii = indexOf.call(this._shortWeekdaysParse, llc);
                if (ii !== -1) {
                    return ii;
                }
                ii = indexOf.call(this._minWeekdaysParse, llc);
                return ii !== -1 ? ii : null;
            } else if (format === 'ddd') {
                ii = indexOf.call(this._shortWeekdaysParse, llc);
                if (ii !== -1) {
                    return ii;
                }
                ii = indexOf.call(this._weekdaysParse, llc);
                if (ii !== -1) {
                    return ii;
                }
                ii = indexOf.call(this._minWeekdaysParse, llc);
                return ii !== -1 ? ii : null;
            } else {
                ii = indexOf.call(this._minWeekdaysParse, llc);
                if (ii !== -1) {
                    return ii;
                }
                ii = indexOf.call(this._weekdaysParse, llc);
                if (ii !== -1) {
                    return ii;
                }
                ii = indexOf.call(this._shortWeekdaysParse, llc);
                return ii !== -1 ? ii : null;
            }
        }
    }

    function localeWeekdaysParse (weekdayName, format, strict) {
        var i, mom, regex;

        if (this._weekdaysParseExact) {
            return handleStrictParse$1.call(this, weekdayName, format, strict);
        }

        if (!this._weekdaysParse) {
            this._weekdaysParse = [];
            this._minWeekdaysParse = [];
            this._shortWeekdaysParse = [];
            this._fullWeekdaysParse = [];
        }

        for (i = 0; i < 7; i++) {
            // make the regex if we don't have it already

            mom = createUTC([2000, 1]).day(i);
            if (strict && !this._fullWeekdaysParse[i]) {
                this._fullWeekdaysParse[i] = new RegExp('^' + this.weekdays(mom, '').replace('.', '\\.?') + '$', 'i');
                this._shortWeekdaysParse[i] = new RegExp('^' + this.weekdaysShort(mom, '').replace('.', '\\.?') + '$', 'i');
                this._minWeekdaysParse[i] = new RegExp('^' + this.weekdaysMin(mom, '').replace('.', '\\.?') + '$', 'i');
            }
            if (!this._weekdaysParse[i]) {
                regex = '^' + this.weekdays(mom, '') + '|^' + this.weekdaysShort(mom, '') + '|^' + this.weekdaysMin(mom, '');
                this._weekdaysParse[i] = new RegExp(regex.replace('.', ''), 'i');
            }
            // test the regex
            if (strict && format === 'dddd' && this._fullWeekdaysParse[i].test(weekdayName)) {
                return i;
            } else if (strict && format === 'ddd' && this._shortWeekdaysParse[i].test(weekdayName)) {
                return i;
            } else if (strict && format === 'dd' && this._minWeekdaysParse[i].test(weekdayName)) {
                return i;
            } else if (!strict && this._weekdaysParse[i].test(weekdayName)) {
                return i;
            }
        }
    }

    // MOMENTS

    function getSetDayOfWeek (input) {
        if (!this.isValid()) {
            return input != null ? this : NaN;
        }
        var day = this._isUTC ? this._d.getUTCDay() : this._d.getDay();
        if (input != null) {
            input = parseWeekday(input, this.localeData());
            return this.add(input - day, 'd');
        } else {
            return day;
        }
    }

    function getSetLocaleDayOfWeek (input) {
        if (!this.isValid()) {
            return input != null ? this : NaN;
        }
        var weekday = (this.day() + 7 - this.localeData()._week.dow) % 7;
        return input == null ? weekday : this.add(input - weekday, 'd');
    }

    function getSetISODayOfWeek (input) {
        if (!this.isValid()) {
            return input != null ? this : NaN;
        }

        // behaves the same as moment#day except
        // as a getter, returns 7 instead of 0 (1-7 range instead of 0-6)
        // as a setter, sunday should belong to the previous week.

        if (input != null) {
            var weekday = parseIsoWeekday(input, this.localeData());
            return this.day(this.day() % 7 ? weekday : weekday - 7);
        } else {
            return this.day() || 7;
        }
    }

    var defaultWeekdaysRegex = matchWord;
    function weekdaysRegex (isStrict) {
        if (this._weekdaysParseExact) {
            if (!hasOwnProp(this, '_weekdaysRegex')) {
                computeWeekdaysParse.call(this);
            }
            if (isStrict) {
                return this._weekdaysStrictRegex;
            } else {
                return this._weekdaysRegex;
            }
        } else {
            if (!hasOwnProp(this, '_weekdaysRegex')) {
                this._weekdaysRegex = defaultWeekdaysRegex;
            }
            return this._weekdaysStrictRegex && isStrict ?
                this._weekdaysStrictRegex : this._weekdaysRegex;
        }
    }

    var defaultWeekdaysShortRegex = matchWord;
    function weekdaysShortRegex (isStrict) {
        if (this._weekdaysParseExact) {
            if (!hasOwnProp(this, '_weekdaysRegex')) {
                computeWeekdaysParse.call(this);
            }
            if (isStrict) {
                return this._weekdaysShortStrictRegex;
            } else {
                return this._weekdaysShortRegex;
            }
        } else {
            if (!hasOwnProp(this, '_weekdaysShortRegex')) {
                this._weekdaysShortRegex = defaultWeekdaysShortRegex;
            }
            return this._weekdaysShortStrictRegex && isStrict ?
                this._weekdaysShortStrictRegex : this._weekdaysShortRegex;
        }
    }

    var defaultWeekdaysMinRegex = matchWord;
    function weekdaysMinRegex (isStrict) {
        if (this._weekdaysParseExact) {
            if (!hasOwnProp(this, '_weekdaysRegex')) {
                computeWeekdaysParse.call(this);
            }
            if (isStrict) {
                return this._weekdaysMinStrictRegex;
            } else {
                return this._weekdaysMinRegex;
            }
        } else {
            if (!hasOwnProp(this, '_weekdaysMinRegex')) {
                this._weekdaysMinRegex = defaultWeekdaysMinRegex;
            }
            return this._weekdaysMinStrictRegex && isStrict ?
                this._weekdaysMinStrictRegex : this._weekdaysMinRegex;
        }
    }


    function computeWeekdaysParse () {
        function cmpLenRev(a, b) {
            return b.length - a.length;
        }

        var minPieces = [], shortPieces = [], longPieces = [], mixedPieces = [],
            i, mom, minp, shortp, longp;
        for (i = 0; i < 7; i++) {
            // make the regex if we don't have it already
            mom = createUTC([2000, 1]).day(i);
            minp = this.weekdaysMin(mom, '');
            shortp = this.weekdaysShort(mom, '');
            longp = this.weekdays(mom, '');
            minPieces.push(minp);
            shortPieces.push(shortp);
            longPieces.push(longp);
            mixedPieces.push(minp);
            mixedPieces.push(shortp);
            mixedPieces.push(longp);
        }
        // Sorting makes sure if one weekday (or abbr) is a prefix of another it
        // will match the longer piece.
        minPieces.sort(cmpLenRev);
        shortPieces.sort(cmpLenRev);
        longPieces.sort(cmpLenRev);
        mixedPieces.sort(cmpLenRev);
        for (i = 0; i < 7; i++) {
            shortPieces[i] = regexEscape(shortPieces[i]);
            longPieces[i] = regexEscape(longPieces[i]);
            mixedPieces[i] = regexEscape(mixedPieces[i]);
        }

        this._weekdaysRegex = new RegExp('^(' + mixedPieces.join('|') + ')', 'i');
        this._weekdaysShortRegex = this._weekdaysRegex;
        this._weekdaysMinRegex = this._weekdaysRegex;

        this._weekdaysStrictRegex = new RegExp('^(' + longPieces.join('|') + ')', 'i');
        this._weekdaysShortStrictRegex = new RegExp('^(' + shortPieces.join('|') + ')', 'i');
        this._weekdaysMinStrictRegex = new RegExp('^(' + minPieces.join('|') + ')', 'i');
    }

    // FORMATTING

    function hFormat() {
        return this.hours() % 12 || 12;
    }

    function kFormat() {
        return this.hours() || 24;
    }

    addFormatToken('H', ['HH', 2], 0, 'hour');
    addFormatToken('h', ['hh', 2], 0, hFormat);
    addFormatToken('k', ['kk', 2], 0, kFormat);

    addFormatToken('hmm', 0, 0, function () {
        return '' + hFormat.apply(this) + zeroFill(this.minutes(), 2);
    });

    addFormatToken('hmmss', 0, 0, function () {
        return '' + hFormat.apply(this) + zeroFill(this.minutes(), 2) +
            zeroFill(this.seconds(), 2);
    });

    addFormatToken('Hmm', 0, 0, function () {
        return '' + this.hours() + zeroFill(this.minutes(), 2);
    });

    addFormatToken('Hmmss', 0, 0, function () {
        return '' + this.hours() + zeroFill(this.minutes(), 2) +
            zeroFill(this.seconds(), 2);
    });

    function meridiem (token, lowercase) {
        addFormatToken(token, 0, 0, function () {
            return this.localeData().meridiem(this.hours(), this.minutes(), lowercase);
        });
    }

    meridiem('a', true);
    meridiem('A', false);

    // ALIASES

    addUnitAlias('hour', 'h');

    // PRIORITY
    addUnitPriority('hour', 13);

    // PARSING

    function matchMeridiem (isStrict, locale) {
        return locale._meridiemParse;
    }

    addRegexToken('a',  matchMeridiem);
    addRegexToken('A',  matchMeridiem);
    addRegexToken('H',  match1to2);
    addRegexToken('h',  match1to2);
    addRegexToken('k',  match1to2);
    addRegexToken('HH', match1to2, match2);
    addRegexToken('hh', match1to2, match2);
    addRegexToken('kk', match1to2, match2);

    addRegexToken('hmm', match3to4);
    addRegexToken('hmmss', match5to6);
    addRegexToken('Hmm', match3to4);
    addRegexToken('Hmmss', match5to6);

    addParseToken(['H', 'HH'], HOUR);
    addParseToken(['k', 'kk'], function (input, array, config) {
        var kInput = toInt(input);
        array[HOUR] = kInput === 24 ? 0 : kInput;
    });
    addParseToken(['a', 'A'], function (input, array, config) {
        config._isPm = config._locale.isPM(input);
        config._meridiem = input;
    });
    addParseToken(['h', 'hh'], function (input, array, config) {
        array[HOUR] = toInt(input);
        getParsingFlags(config).bigHour = true;
    });
    addParseToken('hmm', function (input, array, config) {
        var pos = input.length - 2;
        array[HOUR] = toInt(input.substr(0, pos));
        array[MINUTE] = toInt(input.substr(pos));
        getParsingFlags(config).bigHour = true;
    });
    addParseToken('hmmss', function (input, array, config) {
        var pos1 = input.length - 4;
        var pos2 = input.length - 2;
        array[HOUR] = toInt(input.substr(0, pos1));
        array[MINUTE] = toInt(input.substr(pos1, 2));
        array[SECOND] = toInt(input.substr(pos2));
        getParsingFlags(config).bigHour = true;
    });
    addParseToken('Hmm', function (input, array, config) {
        var pos = input.length - 2;
        array[HOUR] = toInt(input.substr(0, pos));
        array[MINUTE] = toInt(input.substr(pos));
    });
    addParseToken('Hmmss', function (input, array, config) {
        var pos1 = input.length - 4;
        var pos2 = input.length - 2;
        array[HOUR] = toInt(input.substr(0, pos1));
        array[MINUTE] = toInt(input.substr(pos1, 2));
        array[SECOND] = toInt(input.substr(pos2));
    });

    // LOCALES

    function localeIsPM (input) {
        // IE8 Quirks Mode & IE7 Standards Mode do not allow accessing strings like arrays
        // Using charAt should be more compatible.
        return ((input + '').toLowerCase().charAt(0) === 'p');
    }

    var defaultLocaleMeridiemParse = /[ap]\.?m?\.?/i;
    function localeMeridiem (hours, minutes, isLower) {
        if (hours > 11) {
            return isLower ? 'pm' : 'PM';
        } else {
            return isLower ? 'am' : 'AM';
        }
    }


    // MOMENTS

    // Setting the hour should keep the time, because the user explicitly
    // specified which hour they want. So trying to maintain the same hour (in
    // a new timezone) makes sense. Adding/subtracting hours does not follow
    // this rule.
    var getSetHour = makeGetSet('Hours', true);

    var baseConfig = {
        calendar: defaultCalendar,
        longDateFormat: defaultLongDateFormat,
        invalidDate: defaultInvalidDate,
        ordinal: defaultOrdinal,
        dayOfMonthOrdinalParse: defaultDayOfMonthOrdinalParse,
        relativeTime: defaultRelativeTime,

        months: defaultLocaleMonths,
        monthsShort: defaultLocaleMonthsShort,

        week: defaultLocaleWeek,

        weekdays: defaultLocaleWeekdays,
        weekdaysMin: defaultLocaleWeekdaysMin,
        weekdaysShort: defaultLocaleWeekdaysShort,

        meridiemParse: defaultLocaleMeridiemParse
    };

    // internal storage for locale config files
    var locales = {};
    var localeFamilies = {};
    var globalLocale;

    function normalizeLocale(key) {
        return key ? key.toLowerCase().replace('_', '-') : key;
    }

    // pick the locale from the array
    // try ['en-au', 'en-gb'] as 'en-au', 'en-gb', 'en', as in move through the list trying each
    // substring from most specific to least, but move to the next array item if it's a more specific variant than the current root
    function chooseLocale(names) {
        var i = 0, j, next, locale, split;

        while (i < names.length) {
            split = normalizeLocale(names[i]).split('-');
            j = split.length;
            next = normalizeLocale(names[i + 1]);
            next = next ? next.split('-') : null;
            while (j > 0) {
                locale = loadLocale(split.slice(0, j).join('-'));
                if (locale) {
                    return locale;
                }
                if (next && next.length >= j && compareArrays(split, next, true) >= j - 1) {
                    //the next array item is better than a shallower substring of this one
                    break;
                }
                j--;
            }
            i++;
        }
        return globalLocale;
    }

    function loadLocale(name) {
        var oldLocale = null;
        // TODO: Find a better way to register and load all the locales in Node
        if (!locales[name] && ('object' !== 'undefined') &&
                module && module.exports) {
            try {
                oldLocale = globalLocale._abbr;
                var aliasedRequire = commonjsRequire;
                aliasedRequire('./locale/' + name);
                getSetGlobalLocale(oldLocale);
            } catch (e) {}
        }
        return locales[name];
    }

    // This function will load locale and then set the global locale.  If
    // no arguments are passed in, it will simply return the current global
    // locale key.
    function getSetGlobalLocale (key, values) {
        var data;
        if (key) {
            if (isUndefined(values)) {
                data = getLocale(key);
            }
            else {
                data = defineLocale(key, values);
            }

            if (data) {
                // moment.duration._locale = moment._locale = data;
                globalLocale = data;
            }
            else {
                if ((typeof console !==  'undefined') && console.warn) {
                    //warn user if arguments are passed but the locale could not be set
                    console.warn('Locale ' + key +  ' not found. Did you forget to load it?');
                }
            }
        }

        return globalLocale._abbr;
    }

    function defineLocale (name, config) {
        if (config !== null) {
            var locale, parentConfig = baseConfig;
            config.abbr = name;
            if (locales[name] != null) {
                deprecateSimple('defineLocaleOverride',
                        'use moment.updateLocale(localeName, config) to change ' +
                        'an existing locale. moment.defineLocale(localeName, ' +
                        'config) should only be used for creating a new locale ' +
                        'See http://momentjs.com/guides/#/warnings/define-locale/ for more info.');
                parentConfig = locales[name]._config;
            } else if (config.parentLocale != null) {
                if (locales[config.parentLocale] != null) {
                    parentConfig = locales[config.parentLocale]._config;
                } else {
                    locale = loadLocale(config.parentLocale);
                    if (locale != null) {
                        parentConfig = locale._config;
                    } else {
                        if (!localeFamilies[config.parentLocale]) {
                            localeFamilies[config.parentLocale] = [];
                        }
                        localeFamilies[config.parentLocale].push({
                            name: name,
                            config: config
                        });
                        return null;
                    }
                }
            }
            locales[name] = new Locale(mergeConfigs(parentConfig, config));

            if (localeFamilies[name]) {
                localeFamilies[name].forEach(function (x) {
                    defineLocale(x.name, x.config);
                });
            }

            // backwards compat for now: also set the locale
            // make sure we set the locale AFTER all child locales have been
            // created, so we won't end up with the child locale set.
            getSetGlobalLocale(name);


            return locales[name];
        } else {
            // useful for testing
            delete locales[name];
            return null;
        }
    }

    function updateLocale(name, config) {
        if (config != null) {
            var locale, tmpLocale, parentConfig = baseConfig;
            // MERGE
            tmpLocale = loadLocale(name);
            if (tmpLocale != null) {
                parentConfig = tmpLocale._config;
            }
            config = mergeConfigs(parentConfig, config);
            locale = new Locale(config);
            locale.parentLocale = locales[name];
            locales[name] = locale;

            // backwards compat for now: also set the locale
            getSetGlobalLocale(name);
        } else {
            // pass null for config to unupdate, useful for tests
            if (locales[name] != null) {
                if (locales[name].parentLocale != null) {
                    locales[name] = locales[name].parentLocale;
                } else if (locales[name] != null) {
                    delete locales[name];
                }
            }
        }
        return locales[name];
    }

    // returns locale data
    function getLocale (key) {
        var locale;

        if (key && key._locale && key._locale._abbr) {
            key = key._locale._abbr;
        }

        if (!key) {
            return globalLocale;
        }

        if (!isArray(key)) {
            //short-circuit everything else
            locale = loadLocale(key);
            if (locale) {
                return locale;
            }
            key = [key];
        }

        return chooseLocale(key);
    }

    function listLocales() {
        return keys(locales);
    }

    function checkOverflow (m) {
        var overflow;
        var a = m._a;

        if (a && getParsingFlags(m).overflow === -2) {
            overflow =
                a[MONTH]       < 0 || a[MONTH]       > 11  ? MONTH :
                a[DATE]        < 1 || a[DATE]        > daysInMonth(a[YEAR], a[MONTH]) ? DATE :
                a[HOUR]        < 0 || a[HOUR]        > 24 || (a[HOUR] === 24 && (a[MINUTE] !== 0 || a[SECOND] !== 0 || a[MILLISECOND] !== 0)) ? HOUR :
                a[MINUTE]      < 0 || a[MINUTE]      > 59  ? MINUTE :
                a[SECOND]      < 0 || a[SECOND]      > 59  ? SECOND :
                a[MILLISECOND] < 0 || a[MILLISECOND] > 999 ? MILLISECOND :
                -1;

            if (getParsingFlags(m)._overflowDayOfYear && (overflow < YEAR || overflow > DATE)) {
                overflow = DATE;
            }
            if (getParsingFlags(m)._overflowWeeks && overflow === -1) {
                overflow = WEEK;
            }
            if (getParsingFlags(m)._overflowWeekday && overflow === -1) {
                overflow = WEEKDAY;
            }

            getParsingFlags(m).overflow = overflow;
        }

        return m;
    }

    // Pick the first defined of two or three arguments.
    function defaults(a, b, c) {
        if (a != null) {
            return a;
        }
        if (b != null) {
            return b;
        }
        return c;
    }

    function currentDateArray(config) {
        // hooks is actually the exported moment object
        var nowValue = new Date(hooks.now());
        if (config._useUTC) {
            return [nowValue.getUTCFullYear(), nowValue.getUTCMonth(), nowValue.getUTCDate()];
        }
        return [nowValue.getFullYear(), nowValue.getMonth(), nowValue.getDate()];
    }

    // convert an array to a date.
    // the array should mirror the parameters below
    // note: all values past the year are optional and will default to the lowest possible value.
    // [year, month, day , hour, minute, second, millisecond]
    function configFromArray (config) {
        var i, date, input = [], currentDate, expectedWeekday, yearToUse;

        if (config._d) {
            return;
        }

        currentDate = currentDateArray(config);

        //compute day of the year from weeks and weekdays
        if (config._w && config._a[DATE] == null && config._a[MONTH] == null) {
            dayOfYearFromWeekInfo(config);
        }

        //if the day of the year is set, figure out what it is
        if (config._dayOfYear != null) {
            yearToUse = defaults(config._a[YEAR], currentDate[YEAR]);

            if (config._dayOfYear > daysInYear(yearToUse) || config._dayOfYear === 0) {
                getParsingFlags(config)._overflowDayOfYear = true;
            }

            date = createUTCDate(yearToUse, 0, config._dayOfYear);
            config._a[MONTH] = date.getUTCMonth();
            config._a[DATE] = date.getUTCDate();
        }

        // Default to current date.
        // * if no year, month, day of month are given, default to today
        // * if day of month is given, default month and year
        // * if month is given, default only year
        // * if year is given, don't default anything
        for (i = 0; i < 3 && config._a[i] == null; ++i) {
            config._a[i] = input[i] = currentDate[i];
        }

        // Zero out whatever was not defaulted, including time
        for (; i < 7; i++) {
            config._a[i] = input[i] = (config._a[i] == null) ? (i === 2 ? 1 : 0) : config._a[i];
        }

        // Check for 24:00:00.000
        if (config._a[HOUR] === 24 &&
                config._a[MINUTE] === 0 &&
                config._a[SECOND] === 0 &&
                config._a[MILLISECOND] === 0) {
            config._nextDay = true;
            config._a[HOUR] = 0;
        }

        config._d = (config._useUTC ? createUTCDate : createDate).apply(null, input);
        expectedWeekday = config._useUTC ? config._d.getUTCDay() : config._d.getDay();

        // Apply timezone offset from input. The actual utcOffset can be changed
        // with parseZone.
        if (config._tzm != null) {
            config._d.setUTCMinutes(config._d.getUTCMinutes() - config._tzm);
        }

        if (config._nextDay) {
            config._a[HOUR] = 24;
        }

        // check for mismatching day of week
        if (config._w && typeof config._w.d !== 'undefined' && config._w.d !== expectedWeekday) {
            getParsingFlags(config).weekdayMismatch = true;
        }
    }

    function dayOfYearFromWeekInfo(config) {
        var w, weekYear, week, weekday, dow, doy, temp, weekdayOverflow;

        w = config._w;
        if (w.GG != null || w.W != null || w.E != null) {
            dow = 1;
            doy = 4;

            // TODO: We need to take the current isoWeekYear, but that depends on
            // how we interpret now (local, utc, fixed offset). So create
            // a now version of current config (take local/utc/offset flags, and
            // create now).
            weekYear = defaults(w.GG, config._a[YEAR], weekOfYear(createLocal(), 1, 4).year);
            week = defaults(w.W, 1);
            weekday = defaults(w.E, 1);
            if (weekday < 1 || weekday > 7) {
                weekdayOverflow = true;
            }
        } else {
            dow = config._locale._week.dow;
            doy = config._locale._week.doy;

            var curWeek = weekOfYear(createLocal(), dow, doy);

            weekYear = defaults(w.gg, config._a[YEAR], curWeek.year);

            // Default to current week.
            week = defaults(w.w, curWeek.week);

            if (w.d != null) {
                // weekday -- low day numbers are considered next week
                weekday = w.d;
                if (weekday < 0 || weekday > 6) {
                    weekdayOverflow = true;
                }
            } else if (w.e != null) {
                // local weekday -- counting starts from beginning of week
                weekday = w.e + dow;
                if (w.e < 0 || w.e > 6) {
                    weekdayOverflow = true;
                }
            } else {
                // default to beginning of week
                weekday = dow;
            }
        }
        if (week < 1 || week > weeksInYear(weekYear, dow, doy)) {
            getParsingFlags(config)._overflowWeeks = true;
        } else if (weekdayOverflow != null) {
            getParsingFlags(config)._overflowWeekday = true;
        } else {
            temp = dayOfYearFromWeeks(weekYear, week, weekday, dow, doy);
            config._a[YEAR] = temp.year;
            config._dayOfYear = temp.dayOfYear;
        }
    }

    // iso 8601 regex
    // 0000-00-00 0000-W00 or 0000-W00-0 + T + 00 or 00:00 or 00:00:00 or 00:00:00.000 + +00:00 or +0000 or +00)
    var extendedIsoRegex = /^\s*((?:[+-]\d{6}|\d{4})-(?:\d\d-\d\d|W\d\d-\d|W\d\d|\d\d\d|\d\d))(?:(T| )(\d\d(?::\d\d(?::\d\d(?:[.,]\d+)?)?)?)([\+\-]\d\d(?::?\d\d)?|\s*Z)?)?$/;
    var basicIsoRegex = /^\s*((?:[+-]\d{6}|\d{4})(?:\d\d\d\d|W\d\d\d|W\d\d|\d\d\d|\d\d))(?:(T| )(\d\d(?:\d\d(?:\d\d(?:[.,]\d+)?)?)?)([\+\-]\d\d(?::?\d\d)?|\s*Z)?)?$/;

    var tzRegex = /Z|[+-]\d\d(?::?\d\d)?/;

    var isoDates = [
        ['YYYYYY-MM-DD', /[+-]\d{6}-\d\d-\d\d/],
        ['YYYY-MM-DD', /\d{4}-\d\d-\d\d/],
        ['GGGG-[W]WW-E', /\d{4}-W\d\d-\d/],
        ['GGGG-[W]WW', /\d{4}-W\d\d/, false],
        ['YYYY-DDD', /\d{4}-\d{3}/],
        ['YYYY-MM', /\d{4}-\d\d/, false],
        ['YYYYYYMMDD', /[+-]\d{10}/],
        ['YYYYMMDD', /\d{8}/],
        // YYYYMM is NOT allowed by the standard
        ['GGGG[W]WWE', /\d{4}W\d{3}/],
        ['GGGG[W]WW', /\d{4}W\d{2}/, false],
        ['YYYYDDD', /\d{7}/]
    ];

    // iso time formats and regexes
    var isoTimes = [
        ['HH:mm:ss.SSSS', /\d\d:\d\d:\d\d\.\d+/],
        ['HH:mm:ss,SSSS', /\d\d:\d\d:\d\d,\d+/],
        ['HH:mm:ss', /\d\d:\d\d:\d\d/],
        ['HH:mm', /\d\d:\d\d/],
        ['HHmmss.SSSS', /\d\d\d\d\d\d\.\d+/],
        ['HHmmss,SSSS', /\d\d\d\d\d\d,\d+/],
        ['HHmmss', /\d\d\d\d\d\d/],
        ['HHmm', /\d\d\d\d/],
        ['HH', /\d\d/]
    ];

    var aspNetJsonRegex = /^\/?Date\((\-?\d+)/i;

    // date from iso format
    function configFromISO(config) {
        var i, l,
            string = config._i,
            match = extendedIsoRegex.exec(string) || basicIsoRegex.exec(string),
            allowTime, dateFormat, timeFormat, tzFormat;

        if (match) {
            getParsingFlags(config).iso = true;

            for (i = 0, l = isoDates.length; i < l; i++) {
                if (isoDates[i][1].exec(match[1])) {
                    dateFormat = isoDates[i][0];
                    allowTime = isoDates[i][2] !== false;
                    break;
                }
            }
            if (dateFormat == null) {
                config._isValid = false;
                return;
            }
            if (match[3]) {
                for (i = 0, l = isoTimes.length; i < l; i++) {
                    if (isoTimes[i][1].exec(match[3])) {
                        // match[2] should be 'T' or space
                        timeFormat = (match[2] || ' ') + isoTimes[i][0];
                        break;
                    }
                }
                if (timeFormat == null) {
                    config._isValid = false;
                    return;
                }
            }
            if (!allowTime && timeFormat != null) {
                config._isValid = false;
                return;
            }
            if (match[4]) {
                if (tzRegex.exec(match[4])) {
                    tzFormat = 'Z';
                } else {
                    config._isValid = false;
                    return;
                }
            }
            config._f = dateFormat + (timeFormat || '') + (tzFormat || '');
            configFromStringAndFormat(config);
        } else {
            config._isValid = false;
        }
    }

    // RFC 2822 regex: For details see https://tools.ietf.org/html/rfc2822#section-3.3
    var rfc2822 = /^(?:(Mon|Tue|Wed|Thu|Fri|Sat|Sun),?\s)?(\d{1,2})\s(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s(\d{2,4})\s(\d\d):(\d\d)(?::(\d\d))?\s(?:(UT|GMT|[ECMP][SD]T)|([Zz])|([+-]\d{4}))$/;

    function extractFromRFC2822Strings(yearStr, monthStr, dayStr, hourStr, minuteStr, secondStr) {
        var result = [
            untruncateYear(yearStr),
            defaultLocaleMonthsShort.indexOf(monthStr),
            parseInt(dayStr, 10),
            parseInt(hourStr, 10),
            parseInt(minuteStr, 10)
        ];

        if (secondStr) {
            result.push(parseInt(secondStr, 10));
        }

        return result;
    }

    function untruncateYear(yearStr) {
        var year = parseInt(yearStr, 10);
        if (year <= 49) {
            return 2000 + year;
        } else if (year <= 999) {
            return 1900 + year;
        }
        return year;
    }

    function preprocessRFC2822(s) {
        // Remove comments and folding whitespace and replace multiple-spaces with a single space
        return s.replace(/\([^)]*\)|[\n\t]/g, ' ').replace(/(\s\s+)/g, ' ').replace(/^\s\s*/, '').replace(/\s\s*$/, '');
    }

    function checkWeekday(weekdayStr, parsedInput, config) {
        if (weekdayStr) {
            // TODO: Replace the vanilla JS Date object with an indepentent day-of-week check.
            var weekdayProvided = defaultLocaleWeekdaysShort.indexOf(weekdayStr),
                weekdayActual = new Date(parsedInput[0], parsedInput[1], parsedInput[2]).getDay();
            if (weekdayProvided !== weekdayActual) {
                getParsingFlags(config).weekdayMismatch = true;
                config._isValid = false;
                return false;
            }
        }
        return true;
    }

    var obsOffsets = {
        UT: 0,
        GMT: 0,
        EDT: -4 * 60,
        EST: -5 * 60,
        CDT: -5 * 60,
        CST: -6 * 60,
        MDT: -6 * 60,
        MST: -7 * 60,
        PDT: -7 * 60,
        PST: -8 * 60
    };

    function calculateOffset(obsOffset, militaryOffset, numOffset) {
        if (obsOffset) {
            return obsOffsets[obsOffset];
        } else if (militaryOffset) {
            // the only allowed military tz is Z
            return 0;
        } else {
            var hm = parseInt(numOffset, 10);
            var m = hm % 100, h = (hm - m) / 100;
            return h * 60 + m;
        }
    }

    // date and time from ref 2822 format
    function configFromRFC2822(config) {
        var match = rfc2822.exec(preprocessRFC2822(config._i));
        if (match) {
            var parsedArray = extractFromRFC2822Strings(match[4], match[3], match[2], match[5], match[6], match[7]);
            if (!checkWeekday(match[1], parsedArray, config)) {
                return;
            }

            config._a = parsedArray;
            config._tzm = calculateOffset(match[8], match[9], match[10]);

            config._d = createUTCDate.apply(null, config._a);
            config._d.setUTCMinutes(config._d.getUTCMinutes() - config._tzm);

            getParsingFlags(config).rfc2822 = true;
        } else {
            config._isValid = false;
        }
    }

    // date from iso format or fallback
    function configFromString(config) {
        var matched = aspNetJsonRegex.exec(config._i);

        if (matched !== null) {
            config._d = new Date(+matched[1]);
            return;
        }

        configFromISO(config);
        if (config._isValid === false) {
            delete config._isValid;
        } else {
            return;
        }

        configFromRFC2822(config);
        if (config._isValid === false) {
            delete config._isValid;
        } else {
            return;
        }

        // Final attempt, use Input Fallback
        hooks.createFromInputFallback(config);
    }

    hooks.createFromInputFallback = deprecate(
        'value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), ' +
        'which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are ' +
        'discouraged and will be removed in an upcoming major release. Please refer to ' +
        'http://momentjs.com/guides/#/warnings/js-date/ for more info.',
        function (config) {
            config._d = new Date(config._i + (config._useUTC ? ' UTC' : ''));
        }
    );

    // constant that refers to the ISO standard
    hooks.ISO_8601 = function () {};

    // constant that refers to the RFC 2822 form
    hooks.RFC_2822 = function () {};

    // date from string and format string
    function configFromStringAndFormat(config) {
        // TODO: Move this to another part of the creation flow to prevent circular deps
        if (config._f === hooks.ISO_8601) {
            configFromISO(config);
            return;
        }
        if (config._f === hooks.RFC_2822) {
            configFromRFC2822(config);
            return;
        }
        config._a = [];
        getParsingFlags(config).empty = true;

        // This array is used to make a Date, either with `new Date` or `Date.UTC`
        var string = '' + config._i,
            i, parsedInput, tokens, token, skipped,
            stringLength = string.length,
            totalParsedInputLength = 0;

        tokens = expandFormat(config._f, config._locale).match(formattingTokens) || [];

        for (i = 0; i < tokens.length; i++) {
            token = tokens[i];
            parsedInput = (string.match(getParseRegexForToken(token, config)) || [])[0];
            // console.log('token', token, 'parsedInput', parsedInput,
            //         'regex', getParseRegexForToken(token, config));
            if (parsedInput) {
                skipped = string.substr(0, string.indexOf(parsedInput));
                if (skipped.length > 0) {
                    getParsingFlags(config).unusedInput.push(skipped);
                }
                string = string.slice(string.indexOf(parsedInput) + parsedInput.length);
                totalParsedInputLength += parsedInput.length;
            }
            // don't parse if it's not a known token
            if (formatTokenFunctions[token]) {
                if (parsedInput) {
                    getParsingFlags(config).empty = false;
                }
                else {
                    getParsingFlags(config).unusedTokens.push(token);
                }
                addTimeToArrayFromToken(token, parsedInput, config);
            }
            else if (config._strict && !parsedInput) {
                getParsingFlags(config).unusedTokens.push(token);
            }
        }

        // add remaining unparsed input length to the string
        getParsingFlags(config).charsLeftOver = stringLength - totalParsedInputLength;
        if (string.length > 0) {
            getParsingFlags(config).unusedInput.push(string);
        }

        // clear _12h flag if hour is <= 12
        if (config._a[HOUR] <= 12 &&
            getParsingFlags(config).bigHour === true &&
            config._a[HOUR] > 0) {
            getParsingFlags(config).bigHour = undefined;
        }

        getParsingFlags(config).parsedDateParts = config._a.slice(0);
        getParsingFlags(config).meridiem = config._meridiem;
        // handle meridiem
        config._a[HOUR] = meridiemFixWrap(config._locale, config._a[HOUR], config._meridiem);

        configFromArray(config);
        checkOverflow(config);
    }


    function meridiemFixWrap (locale, hour, meridiem) {
        var isPm;

        if (meridiem == null) {
            // nothing to do
            return hour;
        }
        if (locale.meridiemHour != null) {
            return locale.meridiemHour(hour, meridiem);
        } else if (locale.isPM != null) {
            // Fallback
            isPm = locale.isPM(meridiem);
            if (isPm && hour < 12) {
                hour += 12;
            }
            if (!isPm && hour === 12) {
                hour = 0;
            }
            return hour;
        } else {
            // this is not supposed to happen
            return hour;
        }
    }

    // date from string and array of format strings
    function configFromStringAndArray(config) {
        var tempConfig,
            bestMoment,

            scoreToBeat,
            i,
            currentScore;

        if (config._f.length === 0) {
            getParsingFlags(config).invalidFormat = true;
            config._d = new Date(NaN);
            return;
        }

        for (i = 0; i < config._f.length; i++) {
            currentScore = 0;
            tempConfig = copyConfig({}, config);
            if (config._useUTC != null) {
                tempConfig._useUTC = config._useUTC;
            }
            tempConfig._f = config._f[i];
            configFromStringAndFormat(tempConfig);

            if (!isValid(tempConfig)) {
                continue;
            }

            // if there is any input that was not parsed add a penalty for that format
            currentScore += getParsingFlags(tempConfig).charsLeftOver;

            //or tokens
            currentScore += getParsingFlags(tempConfig).unusedTokens.length * 10;

            getParsingFlags(tempConfig).score = currentScore;

            if (scoreToBeat == null || currentScore < scoreToBeat) {
                scoreToBeat = currentScore;
                bestMoment = tempConfig;
            }
        }

        extend(config, bestMoment || tempConfig);
    }

    function configFromObject(config) {
        if (config._d) {
            return;
        }

        var i = normalizeObjectUnits(config._i);
        config._a = map([i.year, i.month, i.day || i.date, i.hour, i.minute, i.second, i.millisecond], function (obj) {
            return obj && parseInt(obj, 10);
        });

        configFromArray(config);
    }

    function createFromConfig (config) {
        var res = new Moment(checkOverflow(prepareConfig(config)));
        if (res._nextDay) {
            // Adding is smart enough around DST
            res.add(1, 'd');
            res._nextDay = undefined;
        }

        return res;
    }

    function prepareConfig (config) {
        var input = config._i,
            format = config._f;

        config._locale = config._locale || getLocale(config._l);

        if (input === null || (format === undefined && input === '')) {
            return createInvalid({nullInput: true});
        }

        if (typeof input === 'string') {
            config._i = input = config._locale.preparse(input);
        }

        if (isMoment(input)) {
            return new Moment(checkOverflow(input));
        } else if (isDate(input)) {
            config._d = input;
        } else if (isArray(format)) {
            configFromStringAndArray(config);
        } else if (format) {
            configFromStringAndFormat(config);
        }  else {
            configFromInput(config);
        }

        if (!isValid(config)) {
            config._d = null;
        }

        return config;
    }

    function configFromInput(config) {
        var input = config._i;
        if (isUndefined(input)) {
            config._d = new Date(hooks.now());
        } else if (isDate(input)) {
            config._d = new Date(input.valueOf());
        } else if (typeof input === 'string') {
            configFromString(config);
        } else if (isArray(input)) {
            config._a = map(input.slice(0), function (obj) {
                return parseInt(obj, 10);
            });
            configFromArray(config);
        } else if (isObject(input)) {
            configFromObject(config);
        } else if (isNumber(input)) {
            // from milliseconds
            config._d = new Date(input);
        } else {
            hooks.createFromInputFallback(config);
        }
    }

    function createLocalOrUTC (input, format, locale, strict, isUTC) {
        var c = {};

        if (locale === true || locale === false) {
            strict = locale;
            locale = undefined;
        }

        if ((isObject(input) && isObjectEmpty(input)) ||
                (isArray(input) && input.length === 0)) {
            input = undefined;
        }
        // object construction must be done this way.
        // https://github.com/moment/moment/issues/1423
        c._isAMomentObject = true;
        c._useUTC = c._isUTC = isUTC;
        c._l = locale;
        c._i = input;
        c._f = format;
        c._strict = strict;

        return createFromConfig(c);
    }

    function createLocal (input, format, locale, strict) {
        return createLocalOrUTC(input, format, locale, strict, false);
    }

    var prototypeMin = deprecate(
        'moment().min is deprecated, use moment.max instead. http://momentjs.com/guides/#/warnings/min-max/',
        function () {
            var other = createLocal.apply(null, arguments);
            if (this.isValid() && other.isValid()) {
                return other < this ? this : other;
            } else {
                return createInvalid();
            }
        }
    );

    var prototypeMax = deprecate(
        'moment().max is deprecated, use moment.min instead. http://momentjs.com/guides/#/warnings/min-max/',
        function () {
            var other = createLocal.apply(null, arguments);
            if (this.isValid() && other.isValid()) {
                return other > this ? this : other;
            } else {
                return createInvalid();
            }
        }
    );

    // Pick a moment m from moments so that m[fn](other) is true for all
    // other. This relies on the function fn to be transitive.
    //
    // moments should either be an array of moment objects or an array, whose
    // first element is an array of moment objects.
    function pickBy(fn, moments) {
        var res, i;
        if (moments.length === 1 && isArray(moments[0])) {
            moments = moments[0];
        }
        if (!moments.length) {
            return createLocal();
        }
        res = moments[0];
        for (i = 1; i < moments.length; ++i) {
            if (!moments[i].isValid() || moments[i][fn](res)) {
                res = moments[i];
            }
        }
        return res;
    }

    // TODO: Use [].sort instead?
    function min () {
        var args = [].slice.call(arguments, 0);

        return pickBy('isBefore', args);
    }

    function max () {
        var args = [].slice.call(arguments, 0);

        return pickBy('isAfter', args);
    }

    var now = function () {
        return Date.now ? Date.now() : +(new Date());
    };

    var ordering = ['year', 'quarter', 'month', 'week', 'day', 'hour', 'minute', 'second', 'millisecond'];

    function isDurationValid(m) {
        for (var key in m) {
            if (!(indexOf.call(ordering, key) !== -1 && (m[key] == null || !isNaN(m[key])))) {
                return false;
            }
        }

        var unitHasDecimal = false;
        for (var i = 0; i < ordering.length; ++i) {
            if (m[ordering[i]]) {
                if (unitHasDecimal) {
                    return false; // only allow non-integers for smallest unit
                }
                if (parseFloat(m[ordering[i]]) !== toInt(m[ordering[i]])) {
                    unitHasDecimal = true;
                }
            }
        }

        return true;
    }

    function isValid$1() {
        return this._isValid;
    }

    function createInvalid$1() {
        return createDuration(NaN);
    }

    function Duration (duration) {
        var normalizedInput = normalizeObjectUnits(duration),
            years = normalizedInput.year || 0,
            quarters = normalizedInput.quarter || 0,
            months = normalizedInput.month || 0,
            weeks = normalizedInput.week || normalizedInput.isoWeek || 0,
            days = normalizedInput.day || 0,
            hours = normalizedInput.hour || 0,
            minutes = normalizedInput.minute || 0,
            seconds = normalizedInput.second || 0,
            milliseconds = normalizedInput.millisecond || 0;

        this._isValid = isDurationValid(normalizedInput);

        // representation for dateAddRemove
        this._milliseconds = +milliseconds +
            seconds * 1e3 + // 1000
            minutes * 6e4 + // 1000 * 60
            hours * 1000 * 60 * 60; //using 1000 * 60 * 60 instead of 36e5 to avoid floating point rounding errors https://github.com/moment/moment/issues/2978
        // Because of dateAddRemove treats 24 hours as different from a
        // day when working around DST, we need to store them separately
        this._days = +days +
            weeks * 7;
        // It is impossible to translate months into days without knowing
        // which months you are are talking about, so we have to store
        // it separately.
        this._months = +months +
            quarters * 3 +
            years * 12;

        this._data = {};

        this._locale = getLocale();

        this._bubble();
    }

    function isDuration (obj) {
        return obj instanceof Duration;
    }

    function absRound (number) {
        if (number < 0) {
            return Math.round(-1 * number) * -1;
        } else {
            return Math.round(number);
        }
    }

    // FORMATTING

    function offset (token, separator) {
        addFormatToken(token, 0, 0, function () {
            var offset = this.utcOffset();
            var sign = '+';
            if (offset < 0) {
                offset = -offset;
                sign = '-';
            }
            return sign + zeroFill(~~(offset / 60), 2) + separator + zeroFill(~~(offset) % 60, 2);
        });
    }

    offset('Z', ':');
    offset('ZZ', '');

    // PARSING

    addRegexToken('Z',  matchShortOffset);
    addRegexToken('ZZ', matchShortOffset);
    addParseToken(['Z', 'ZZ'], function (input, array, config) {
        config._useUTC = true;
        config._tzm = offsetFromString(matchShortOffset, input);
    });

    // HELPERS

    // timezone chunker
    // '+10:00' > ['10',  '00']
    // '-1530'  > ['-15', '30']
    var chunkOffset = /([\+\-]|\d\d)/gi;

    function offsetFromString(matcher, string) {
        var matches = (string || '').match(matcher);

        if (matches === null) {
            return null;
        }

        var chunk   = matches[matches.length - 1] || [];
        var parts   = (chunk + '').match(chunkOffset) || ['-', 0, 0];
        var minutes = +(parts[1] * 60) + toInt(parts[2]);

        return minutes === 0 ?
          0 :
          parts[0] === '+' ? minutes : -minutes;
    }

    // Return a moment from input, that is local/utc/zone equivalent to model.
    function cloneWithOffset(input, model) {
        var res, diff;
        if (model._isUTC) {
            res = model.clone();
            diff = (isMoment(input) || isDate(input) ? input.valueOf() : createLocal(input).valueOf()) - res.valueOf();
            // Use low-level api, because this fn is low-level api.
            res._d.setTime(res._d.valueOf() + diff);
            hooks.updateOffset(res, false);
            return res;
        } else {
            return createLocal(input).local();
        }
    }

    function getDateOffset (m) {
        // On Firefox.24 Date#getTimezoneOffset returns a floating point.
        // https://github.com/moment/moment/pull/1871
        return -Math.round(m._d.getTimezoneOffset() / 15) * 15;
    }

    // HOOKS

    // This function will be called whenever a moment is mutated.
    // It is intended to keep the offset in sync with the timezone.
    hooks.updateOffset = function () {};

    // MOMENTS

    // keepLocalTime = true means only change the timezone, without
    // affecting the local hour. So 5:31:26 +0300 --[utcOffset(2, true)]-->
    // 5:31:26 +0200 It is possible that 5:31:26 doesn't exist with offset
    // +0200, so we adjust the time as needed, to be valid.
    //
    // Keeping the time actually adds/subtracts (one hour)
    // from the actual represented time. That is why we call updateOffset
    // a second time. In case it wants us to change the offset again
    // _changeInProgress == true case, then we have to adjust, because
    // there is no such time in the given timezone.
    function getSetOffset (input, keepLocalTime, keepMinutes) {
        var offset = this._offset || 0,
            localAdjust;
        if (!this.isValid()) {
            return input != null ? this : NaN;
        }
        if (input != null) {
            if (typeof input === 'string') {
                input = offsetFromString(matchShortOffset, input);
                if (input === null) {
                    return this;
                }
            } else if (Math.abs(input) < 16 && !keepMinutes) {
                input = input * 60;
            }
            if (!this._isUTC && keepLocalTime) {
                localAdjust = getDateOffset(this);
            }
            this._offset = input;
            this._isUTC = true;
            if (localAdjust != null) {
                this.add(localAdjust, 'm');
            }
            if (offset !== input) {
                if (!keepLocalTime || this._changeInProgress) {
                    addSubtract(this, createDuration(input - offset, 'm'), 1, false);
                } else if (!this._changeInProgress) {
                    this._changeInProgress = true;
                    hooks.updateOffset(this, true);
                    this._changeInProgress = null;
                }
            }
            return this;
        } else {
            return this._isUTC ? offset : getDateOffset(this);
        }
    }

    function getSetZone (input, keepLocalTime) {
        if (input != null) {
            if (typeof input !== 'string') {
                input = -input;
            }

            this.utcOffset(input, keepLocalTime);

            return this;
        } else {
            return -this.utcOffset();
        }
    }

    function setOffsetToUTC (keepLocalTime) {
        return this.utcOffset(0, keepLocalTime);
    }

    function setOffsetToLocal (keepLocalTime) {
        if (this._isUTC) {
            this.utcOffset(0, keepLocalTime);
            this._isUTC = false;

            if (keepLocalTime) {
                this.subtract(getDateOffset(this), 'm');
            }
        }
        return this;
    }

    function setOffsetToParsedOffset () {
        if (this._tzm != null) {
            this.utcOffset(this._tzm, false, true);
        } else if (typeof this._i === 'string') {
            var tZone = offsetFromString(matchOffset, this._i);
            if (tZone != null) {
                this.utcOffset(tZone);
            }
            else {
                this.utcOffset(0, true);
            }
        }
        return this;
    }

    function hasAlignedHourOffset (input) {
        if (!this.isValid()) {
            return false;
        }
        input = input ? createLocal(input).utcOffset() : 0;

        return (this.utcOffset() - input) % 60 === 0;
    }

    function isDaylightSavingTime () {
        return (
            this.utcOffset() > this.clone().month(0).utcOffset() ||
            this.utcOffset() > this.clone().month(5).utcOffset()
        );
    }

    function isDaylightSavingTimeShifted () {
        if (!isUndefined(this._isDSTShifted)) {
            return this._isDSTShifted;
        }

        var c = {};

        copyConfig(c, this);
        c = prepareConfig(c);

        if (c._a) {
            var other = c._isUTC ? createUTC(c._a) : createLocal(c._a);
            this._isDSTShifted = this.isValid() &&
                compareArrays(c._a, other.toArray()) > 0;
        } else {
            this._isDSTShifted = false;
        }

        return this._isDSTShifted;
    }

    function isLocal () {
        return this.isValid() ? !this._isUTC : false;
    }

    function isUtcOffset () {
        return this.isValid() ? this._isUTC : false;
    }

    function isUtc () {
        return this.isValid() ? this._isUTC && this._offset === 0 : false;
    }

    // ASP.NET json date format regex
    var aspNetRegex = /^(\-|\+)?(?:(\d*)[. ])?(\d+)\:(\d+)(?:\:(\d+)(\.\d*)?)?$/;

    // from http://docs.closure-library.googlecode.com/git/closure_goog_date_date.js.source.html
    // somewhat more in line with 4.4.3.2 2004 spec, but allows decimal anywhere
    // and further modified to allow for strings containing both week and day
    var isoRegex = /^(-|\+)?P(?:([-+]?[0-9,.]*)Y)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)W)?(?:([-+]?[0-9,.]*)D)?(?:T(?:([-+]?[0-9,.]*)H)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)S)?)?$/;

    function createDuration (input, key) {
        var duration = input,
            // matching against regexp is expensive, do it on demand
            match = null,
            sign,
            ret,
            diffRes;

        if (isDuration(input)) {
            duration = {
                ms : input._milliseconds,
                d  : input._days,
                M  : input._months
            };
        } else if (isNumber(input)) {
            duration = {};
            if (key) {
                duration[key] = input;
            } else {
                duration.milliseconds = input;
            }
        } else if (!!(match = aspNetRegex.exec(input))) {
            sign = (match[1] === '-') ? -1 : 1;
            duration = {
                y  : 0,
                d  : toInt(match[DATE])                         * sign,
                h  : toInt(match[HOUR])                         * sign,
                m  : toInt(match[MINUTE])                       * sign,
                s  : toInt(match[SECOND])                       * sign,
                ms : toInt(absRound(match[MILLISECOND] * 1000)) * sign // the millisecond decimal point is included in the match
            };
        } else if (!!(match = isoRegex.exec(input))) {
            sign = (match[1] === '-') ? -1 : 1;
            duration = {
                y : parseIso(match[2], sign),
                M : parseIso(match[3], sign),
                w : parseIso(match[4], sign),
                d : parseIso(match[5], sign),
                h : parseIso(match[6], sign),
                m : parseIso(match[7], sign),
                s : parseIso(match[8], sign)
            };
        } else if (duration == null) {// checks for null or undefined
            duration = {};
        } else if (typeof duration === 'object' && ('from' in duration || 'to' in duration)) {
            diffRes = momentsDifference(createLocal(duration.from), createLocal(duration.to));

            duration = {};
            duration.ms = diffRes.milliseconds;
            duration.M = diffRes.months;
        }

        ret = new Duration(duration);

        if (isDuration(input) && hasOwnProp(input, '_locale')) {
            ret._locale = input._locale;
        }

        return ret;
    }

    createDuration.fn = Duration.prototype;
    createDuration.invalid = createInvalid$1;

    function parseIso (inp, sign) {
        // We'd normally use ~~inp for this, but unfortunately it also
        // converts floats to ints.
        // inp may be undefined, so careful calling replace on it.
        var res = inp && parseFloat(inp.replace(',', '.'));
        // apply sign while we're at it
        return (isNaN(res) ? 0 : res) * sign;
    }

    function positiveMomentsDifference(base, other) {
        var res = {};

        res.months = other.month() - base.month() +
            (other.year() - base.year()) * 12;
        if (base.clone().add(res.months, 'M').isAfter(other)) {
            --res.months;
        }

        res.milliseconds = +other - +(base.clone().add(res.months, 'M'));

        return res;
    }

    function momentsDifference(base, other) {
        var res;
        if (!(base.isValid() && other.isValid())) {
            return {milliseconds: 0, months: 0};
        }

        other = cloneWithOffset(other, base);
        if (base.isBefore(other)) {
            res = positiveMomentsDifference(base, other);
        } else {
            res = positiveMomentsDifference(other, base);
            res.milliseconds = -res.milliseconds;
            res.months = -res.months;
        }

        return res;
    }

    // TODO: remove 'name' arg after deprecation is removed
    function createAdder(direction, name) {
        return function (val, period) {
            var dur, tmp;
            //invert the arguments, but complain about it
            if (period !== null && !isNaN(+period)) {
                deprecateSimple(name, 'moment().' + name  + '(period, number) is deprecated. Please use moment().' + name + '(number, period). ' +
                'See http://momentjs.com/guides/#/warnings/add-inverted-param/ for more info.');
                tmp = val; val = period; period = tmp;
            }

            val = typeof val === 'string' ? +val : val;
            dur = createDuration(val, period);
            addSubtract(this, dur, direction);
            return this;
        };
    }

    function addSubtract (mom, duration, isAdding, updateOffset) {
        var milliseconds = duration._milliseconds,
            days = absRound(duration._days),
            months = absRound(duration._months);

        if (!mom.isValid()) {
            // No op
            return;
        }

        updateOffset = updateOffset == null ? true : updateOffset;

        if (months) {
            setMonth(mom, get(mom, 'Month') + months * isAdding);
        }
        if (days) {
            set$1(mom, 'Date', get(mom, 'Date') + days * isAdding);
        }
        if (milliseconds) {
            mom._d.setTime(mom._d.valueOf() + milliseconds * isAdding);
        }
        if (updateOffset) {
            hooks.updateOffset(mom, days || months);
        }
    }

    var add      = createAdder(1, 'add');
    var subtract = createAdder(-1, 'subtract');

    function getCalendarFormat(myMoment, now) {
        var diff = myMoment.diff(now, 'days', true);
        return diff < -6 ? 'sameElse' :
                diff < -1 ? 'lastWeek' :
                diff < 0 ? 'lastDay' :
                diff < 1 ? 'sameDay' :
                diff < 2 ? 'nextDay' :
                diff < 7 ? 'nextWeek' : 'sameElse';
    }

    function calendar$1 (time, formats) {
        // We want to compare the start of today, vs this.
        // Getting start-of-today depends on whether we're local/utc/offset or not.
        var now = time || createLocal(),
            sod = cloneWithOffset(now, this).startOf('day'),
            format = hooks.calendarFormat(this, sod) || 'sameElse';

        var output = formats && (isFunction(formats[format]) ? formats[format].call(this, now) : formats[format]);

        return this.format(output || this.localeData().calendar(format, this, createLocal(now)));
    }

    function clone () {
        return new Moment(this);
    }

    function isAfter (input, units) {
        var localInput = isMoment(input) ? input : createLocal(input);
        if (!(this.isValid() && localInput.isValid())) {
            return false;
        }
        units = normalizeUnits(units) || 'millisecond';
        if (units === 'millisecond') {
            return this.valueOf() > localInput.valueOf();
        } else {
            return localInput.valueOf() < this.clone().startOf(units).valueOf();
        }
    }

    function isBefore (input, units) {
        var localInput = isMoment(input) ? input : createLocal(input);
        if (!(this.isValid() && localInput.isValid())) {
            return false;
        }
        units = normalizeUnits(units) || 'millisecond';
        if (units === 'millisecond') {
            return this.valueOf() < localInput.valueOf();
        } else {
            return this.clone().endOf(units).valueOf() < localInput.valueOf();
        }
    }

    function isBetween (from, to, units, inclusivity) {
        var localFrom = isMoment(from) ? from : createLocal(from),
            localTo = isMoment(to) ? to : createLocal(to);
        if (!(this.isValid() && localFrom.isValid() && localTo.isValid())) {
            return false;
        }
        inclusivity = inclusivity || '()';
        return (inclusivity[0] === '(' ? this.isAfter(localFrom, units) : !this.isBefore(localFrom, units)) &&
            (inclusivity[1] === ')' ? this.isBefore(localTo, units) : !this.isAfter(localTo, units));
    }

    function isSame (input, units) {
        var localInput = isMoment(input) ? input : createLocal(input),
            inputMs;
        if (!(this.isValid() && localInput.isValid())) {
            return false;
        }
        units = normalizeUnits(units) || 'millisecond';
        if (units === 'millisecond') {
            return this.valueOf() === localInput.valueOf();
        } else {
            inputMs = localInput.valueOf();
            return this.clone().startOf(units).valueOf() <= inputMs && inputMs <= this.clone().endOf(units).valueOf();
        }
    }

    function isSameOrAfter (input, units) {
        return this.isSame(input, units) || this.isAfter(input, units);
    }

    function isSameOrBefore (input, units) {
        return this.isSame(input, units) || this.isBefore(input, units);
    }

    function diff (input, units, asFloat) {
        var that,
            zoneDelta,
            output;

        if (!this.isValid()) {
            return NaN;
        }

        that = cloneWithOffset(input, this);

        if (!that.isValid()) {
            return NaN;
        }

        zoneDelta = (that.utcOffset() - this.utcOffset()) * 6e4;

        units = normalizeUnits(units);

        switch (units) {
            case 'year': output = monthDiff(this, that) / 12; break;
            case 'month': output = monthDiff(this, that); break;
            case 'quarter': output = monthDiff(this, that) / 3; break;
            case 'second': output = (this - that) / 1e3; break; // 1000
            case 'minute': output = (this - that) / 6e4; break; // 1000 * 60
            case 'hour': output = (this - that) / 36e5; break; // 1000 * 60 * 60
            case 'day': output = (this - that - zoneDelta) / 864e5; break; // 1000 * 60 * 60 * 24, negate dst
            case 'week': output = (this - that - zoneDelta) / 6048e5; break; // 1000 * 60 * 60 * 24 * 7, negate dst
            default: output = this - that;
        }

        return asFloat ? output : absFloor(output);
    }

    function monthDiff (a, b) {
        // difference in months
        var wholeMonthDiff = ((b.year() - a.year()) * 12) + (b.month() - a.month()),
            // b is in (anchor - 1 month, anchor + 1 month)
            anchor = a.clone().add(wholeMonthDiff, 'months'),
            anchor2, adjust;

        if (b - anchor < 0) {
            anchor2 = a.clone().add(wholeMonthDiff - 1, 'months');
            // linear across the month
            adjust = (b - anchor) / (anchor - anchor2);
        } else {
            anchor2 = a.clone().add(wholeMonthDiff + 1, 'months');
            // linear across the month
            adjust = (b - anchor) / (anchor2 - anchor);
        }

        //check for negative zero, return zero if negative zero
        return -(wholeMonthDiff + adjust) || 0;
    }

    hooks.defaultFormat = 'YYYY-MM-DDTHH:mm:ssZ';
    hooks.defaultFormatUtc = 'YYYY-MM-DDTHH:mm:ss[Z]';

    function toString () {
        return this.clone().locale('en').format('ddd MMM DD YYYY HH:mm:ss [GMT]ZZ');
    }

    function toISOString(keepOffset) {
        if (!this.isValid()) {
            return null;
        }
        var utc = keepOffset !== true;
        var m = utc ? this.clone().utc() : this;
        if (m.year() < 0 || m.year() > 9999) {
            return formatMoment(m, utc ? 'YYYYYY-MM-DD[T]HH:mm:ss.SSS[Z]' : 'YYYYYY-MM-DD[T]HH:mm:ss.SSSZ');
        }
        if (isFunction(Date.prototype.toISOString)) {
            // native implementation is ~50x faster, use it when we can
            if (utc) {
                return this.toDate().toISOString();
            } else {
                return new Date(this.valueOf() + this.utcOffset() * 60 * 1000).toISOString().replace('Z', formatMoment(m, 'Z'));
            }
        }
        return formatMoment(m, utc ? 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' : 'YYYY-MM-DD[T]HH:mm:ss.SSSZ');
    }

    /**
     * Return a human readable representation of a moment that can
     * also be evaluated to get a new moment which is the same
     *
     * @link https://nodejs.org/dist/latest/docs/api/util.html#util_custom_inspect_function_on_objects
     */
    function inspect () {
        if (!this.isValid()) {
            return 'moment.invalid(/* ' + this._i + ' */)';
        }
        var func = 'moment';
        var zone = '';
        if (!this.isLocal()) {
            func = this.utcOffset() === 0 ? 'moment.utc' : 'moment.parseZone';
            zone = 'Z';
        }
        var prefix = '[' + func + '("]';
        var year = (0 <= this.year() && this.year() <= 9999) ? 'YYYY' : 'YYYYYY';
        var datetime = '-MM-DD[T]HH:mm:ss.SSS';
        var suffix = zone + '[")]';

        return this.format(prefix + year + datetime + suffix);
    }

    function format (inputString) {
        if (!inputString) {
            inputString = this.isUtc() ? hooks.defaultFormatUtc : hooks.defaultFormat;
        }
        var output = formatMoment(this, inputString);
        return this.localeData().postformat(output);
    }

    function from (time, withoutSuffix) {
        if (this.isValid() &&
                ((isMoment(time) && time.isValid()) ||
                 createLocal(time).isValid())) {
            return createDuration({to: this, from: time}).locale(this.locale()).humanize(!withoutSuffix);
        } else {
            return this.localeData().invalidDate();
        }
    }

    function fromNow (withoutSuffix) {
        return this.from(createLocal(), withoutSuffix);
    }

    function to (time, withoutSuffix) {
        if (this.isValid() &&
                ((isMoment(time) && time.isValid()) ||
                 createLocal(time).isValid())) {
            return createDuration({from: this, to: time}).locale(this.locale()).humanize(!withoutSuffix);
        } else {
            return this.localeData().invalidDate();
        }
    }

    function toNow (withoutSuffix) {
        return this.to(createLocal(), withoutSuffix);
    }

    // If passed a locale key, it will set the locale for this
    // instance.  Otherwise, it will return the locale configuration
    // variables for this instance.
    function locale (key) {
        var newLocaleData;

        if (key === undefined) {
            return this._locale._abbr;
        } else {
            newLocaleData = getLocale(key);
            if (newLocaleData != null) {
                this._locale = newLocaleData;
            }
            return this;
        }
    }

    var lang = deprecate(
        'moment().lang() is deprecated. Instead, use moment().localeData() to get the language configuration. Use moment().locale() to change languages.',
        function (key) {
            if (key === undefined) {
                return this.localeData();
            } else {
                return this.locale(key);
            }
        }
    );

    function localeData () {
        return this._locale;
    }

    var MS_PER_SECOND = 1000;
    var MS_PER_MINUTE = 60 * MS_PER_SECOND;
    var MS_PER_HOUR = 60 * MS_PER_MINUTE;
    var MS_PER_400_YEARS = (365 * 400 + 97) * 24 * MS_PER_HOUR;

    // actual modulo - handles negative numbers (for dates before 1970):
    function mod$1(dividend, divisor) {
        return (dividend % divisor + divisor) % divisor;
    }

    function localStartOfDate(y, m, d) {
        // the date constructor remaps years 0-99 to 1900-1999
        if (y < 100 && y >= 0) {
            // preserve leap years using a full 400 year cycle, then reset
            return new Date(y + 400, m, d) - MS_PER_400_YEARS;
        } else {
            return new Date(y, m, d).valueOf();
        }
    }

    function utcStartOfDate(y, m, d) {
        // Date.UTC remaps years 0-99 to 1900-1999
        if (y < 100 && y >= 0) {
            // preserve leap years using a full 400 year cycle, then reset
            return Date.UTC(y + 400, m, d) - MS_PER_400_YEARS;
        } else {
            return Date.UTC(y, m, d);
        }
    }

    function startOf (units) {
        var time;
        units = normalizeUnits(units);
        if (units === undefined || units === 'millisecond' || !this.isValid()) {
            return this;
        }

        var startOfDate = this._isUTC ? utcStartOfDate : localStartOfDate;

        switch (units) {
            case 'year':
                time = startOfDate(this.year(), 0, 1);
                break;
            case 'quarter':
                time = startOfDate(this.year(), this.month() - this.month() % 3, 1);
                break;
            case 'month':
                time = startOfDate(this.year(), this.month(), 1);
                break;
            case 'week':
                time = startOfDate(this.year(), this.month(), this.date() - this.weekday());
                break;
            case 'isoWeek':
                time = startOfDate(this.year(), this.month(), this.date() - (this.isoWeekday() - 1));
                break;
            case 'day':
            case 'date':
                time = startOfDate(this.year(), this.month(), this.date());
                break;
            case 'hour':
                time = this._d.valueOf();
                time -= mod$1(time + (this._isUTC ? 0 : this.utcOffset() * MS_PER_MINUTE), MS_PER_HOUR);
                break;
            case 'minute':
                time = this._d.valueOf();
                time -= mod$1(time, MS_PER_MINUTE);
                break;
            case 'second':
                time = this._d.valueOf();
                time -= mod$1(time, MS_PER_SECOND);
                break;
        }

        this._d.setTime(time);
        hooks.updateOffset(this, true);
        return this;
    }

    function endOf (units) {
        var time;
        units = normalizeUnits(units);
        if (units === undefined || units === 'millisecond' || !this.isValid()) {
            return this;
        }

        var startOfDate = this._isUTC ? utcStartOfDate : localStartOfDate;

        switch (units) {
            case 'year':
                time = startOfDate(this.year() + 1, 0, 1) - 1;
                break;
            case 'quarter':
                time = startOfDate(this.year(), this.month() - this.month() % 3 + 3, 1) - 1;
                break;
            case 'month':
                time = startOfDate(this.year(), this.month() + 1, 1) - 1;
                break;
            case 'week':
                time = startOfDate(this.year(), this.month(), this.date() - this.weekday() + 7) - 1;
                break;
            case 'isoWeek':
                time = startOfDate(this.year(), this.month(), this.date() - (this.isoWeekday() - 1) + 7) - 1;
                break;
            case 'day':
            case 'date':
                time = startOfDate(this.year(), this.month(), this.date() + 1) - 1;
                break;
            case 'hour':
                time = this._d.valueOf();
                time += MS_PER_HOUR - mod$1(time + (this._isUTC ? 0 : this.utcOffset() * MS_PER_MINUTE), MS_PER_HOUR) - 1;
                break;
            case 'minute':
                time = this._d.valueOf();
                time += MS_PER_MINUTE - mod$1(time, MS_PER_MINUTE) - 1;
                break;
            case 'second':
                time = this._d.valueOf();
                time += MS_PER_SECOND - mod$1(time, MS_PER_SECOND) - 1;
                break;
        }

        this._d.setTime(time);
        hooks.updateOffset(this, true);
        return this;
    }

    function valueOf () {
        return this._d.valueOf() - ((this._offset || 0) * 60000);
    }

    function unix () {
        return Math.floor(this.valueOf() / 1000);
    }

    function toDate () {
        return new Date(this.valueOf());
    }

    function toArray () {
        var m = this;
        return [m.year(), m.month(), m.date(), m.hour(), m.minute(), m.second(), m.millisecond()];
    }

    function toObject () {
        var m = this;
        return {
            years: m.year(),
            months: m.month(),
            date: m.date(),
            hours: m.hours(),
            minutes: m.minutes(),
            seconds: m.seconds(),
            milliseconds: m.milliseconds()
        };
    }

    function toJSON () {
        // new Date(NaN).toJSON() === null
        return this.isValid() ? this.toISOString() : null;
    }

    function isValid$2 () {
        return isValid(this);
    }

    function parsingFlags () {
        return extend({}, getParsingFlags(this));
    }

    function invalidAt () {
        return getParsingFlags(this).overflow;
    }

    function creationData() {
        return {
            input: this._i,
            format: this._f,
            locale: this._locale,
            isUTC: this._isUTC,
            strict: this._strict
        };
    }

    // FORMATTING

    addFormatToken(0, ['gg', 2], 0, function () {
        return this.weekYear() % 100;
    });

    addFormatToken(0, ['GG', 2], 0, function () {
        return this.isoWeekYear() % 100;
    });

    function addWeekYearFormatToken (token, getter) {
        addFormatToken(0, [token, token.length], 0, getter);
    }

    addWeekYearFormatToken('gggg',     'weekYear');
    addWeekYearFormatToken('ggggg',    'weekYear');
    addWeekYearFormatToken('GGGG',  'isoWeekYear');
    addWeekYearFormatToken('GGGGG', 'isoWeekYear');

    // ALIASES

    addUnitAlias('weekYear', 'gg');
    addUnitAlias('isoWeekYear', 'GG');

    // PRIORITY

    addUnitPriority('weekYear', 1);
    addUnitPriority('isoWeekYear', 1);


    // PARSING

    addRegexToken('G',      matchSigned);
    addRegexToken('g',      matchSigned);
    addRegexToken('GG',     match1to2, match2);
    addRegexToken('gg',     match1to2, match2);
    addRegexToken('GGGG',   match1to4, match4);
    addRegexToken('gggg',   match1to4, match4);
    addRegexToken('GGGGG',  match1to6, match6);
    addRegexToken('ggggg',  match1to6, match6);

    addWeekParseToken(['gggg', 'ggggg', 'GGGG', 'GGGGG'], function (input, week, config, token) {
        week[token.substr(0, 2)] = toInt(input);
    });

    addWeekParseToken(['gg', 'GG'], function (input, week, config, token) {
        week[token] = hooks.parseTwoDigitYear(input);
    });

    // MOMENTS

    function getSetWeekYear (input) {
        return getSetWeekYearHelper.call(this,
                input,
                this.week(),
                this.weekday(),
                this.localeData()._week.dow,
                this.localeData()._week.doy);
    }

    function getSetISOWeekYear (input) {
        return getSetWeekYearHelper.call(this,
                input, this.isoWeek(), this.isoWeekday(), 1, 4);
    }

    function getISOWeeksInYear () {
        return weeksInYear(this.year(), 1, 4);
    }

    function getWeeksInYear () {
        var weekInfo = this.localeData()._week;
        return weeksInYear(this.year(), weekInfo.dow, weekInfo.doy);
    }

    function getSetWeekYearHelper(input, week, weekday, dow, doy) {
        var weeksTarget;
        if (input == null) {
            return weekOfYear(this, dow, doy).year;
        } else {
            weeksTarget = weeksInYear(input, dow, doy);
            if (week > weeksTarget) {
                week = weeksTarget;
            }
            return setWeekAll.call(this, input, week, weekday, dow, doy);
        }
    }

    function setWeekAll(weekYear, week, weekday, dow, doy) {
        var dayOfYearData = dayOfYearFromWeeks(weekYear, week, weekday, dow, doy),
            date = createUTCDate(dayOfYearData.year, 0, dayOfYearData.dayOfYear);

        this.year(date.getUTCFullYear());
        this.month(date.getUTCMonth());
        this.date(date.getUTCDate());
        return this;
    }

    // FORMATTING

    addFormatToken('Q', 0, 'Qo', 'quarter');

    // ALIASES

    addUnitAlias('quarter', 'Q');

    // PRIORITY

    addUnitPriority('quarter', 7);

    // PARSING

    addRegexToken('Q', match1);
    addParseToken('Q', function (input, array) {
        array[MONTH] = (toInt(input) - 1) * 3;
    });

    // MOMENTS

    function getSetQuarter (input) {
        return input == null ? Math.ceil((this.month() + 1) / 3) : this.month((input - 1) * 3 + this.month() % 3);
    }

    // FORMATTING

    addFormatToken('D', ['DD', 2], 'Do', 'date');

    // ALIASES

    addUnitAlias('date', 'D');

    // PRIORITY
    addUnitPriority('date', 9);

    // PARSING

    addRegexToken('D',  match1to2);
    addRegexToken('DD', match1to2, match2);
    addRegexToken('Do', function (isStrict, locale) {
        // TODO: Remove "ordinalParse" fallback in next major release.
        return isStrict ?
          (locale._dayOfMonthOrdinalParse || locale._ordinalParse) :
          locale._dayOfMonthOrdinalParseLenient;
    });

    addParseToken(['D', 'DD'], DATE);
    addParseToken('Do', function (input, array) {
        array[DATE] = toInt(input.match(match1to2)[0]);
    });

    // MOMENTS

    var getSetDayOfMonth = makeGetSet('Date', true);

    // FORMATTING

    addFormatToken('DDD', ['DDDD', 3], 'DDDo', 'dayOfYear');

    // ALIASES

    addUnitAlias('dayOfYear', 'DDD');

    // PRIORITY
    addUnitPriority('dayOfYear', 4);

    // PARSING

    addRegexToken('DDD',  match1to3);
    addRegexToken('DDDD', match3);
    addParseToken(['DDD', 'DDDD'], function (input, array, config) {
        config._dayOfYear = toInt(input);
    });

    // HELPERS

    // MOMENTS

    function getSetDayOfYear (input) {
        var dayOfYear = Math.round((this.clone().startOf('day') - this.clone().startOf('year')) / 864e5) + 1;
        return input == null ? dayOfYear : this.add((input - dayOfYear), 'd');
    }

    // FORMATTING

    addFormatToken('m', ['mm', 2], 0, 'minute');

    // ALIASES

    addUnitAlias('minute', 'm');

    // PRIORITY

    addUnitPriority('minute', 14);

    // PARSING

    addRegexToken('m',  match1to2);
    addRegexToken('mm', match1to2, match2);
    addParseToken(['m', 'mm'], MINUTE);

    // MOMENTS

    var getSetMinute = makeGetSet('Minutes', false);

    // FORMATTING

    addFormatToken('s', ['ss', 2], 0, 'second');

    // ALIASES

    addUnitAlias('second', 's');

    // PRIORITY

    addUnitPriority('second', 15);

    // PARSING

    addRegexToken('s',  match1to2);
    addRegexToken('ss', match1to2, match2);
    addParseToken(['s', 'ss'], SECOND);

    // MOMENTS

    var getSetSecond = makeGetSet('Seconds', false);

    // FORMATTING

    addFormatToken('S', 0, 0, function () {
        return ~~(this.millisecond() / 100);
    });

    addFormatToken(0, ['SS', 2], 0, function () {
        return ~~(this.millisecond() / 10);
    });

    addFormatToken(0, ['SSS', 3], 0, 'millisecond');
    addFormatToken(0, ['SSSS', 4], 0, function () {
        return this.millisecond() * 10;
    });
    addFormatToken(0, ['SSSSS', 5], 0, function () {
        return this.millisecond() * 100;
    });
    addFormatToken(0, ['SSSSSS', 6], 0, function () {
        return this.millisecond() * 1000;
    });
    addFormatToken(0, ['SSSSSSS', 7], 0, function () {
        return this.millisecond() * 10000;
    });
    addFormatToken(0, ['SSSSSSSS', 8], 0, function () {
        return this.millisecond() * 100000;
    });
    addFormatToken(0, ['SSSSSSSSS', 9], 0, function () {
        return this.millisecond() * 1000000;
    });


    // ALIASES

    addUnitAlias('millisecond', 'ms');

    // PRIORITY

    addUnitPriority('millisecond', 16);

    // PARSING

    addRegexToken('S',    match1to3, match1);
    addRegexToken('SS',   match1to3, match2);
    addRegexToken('SSS',  match1to3, match3);

    var token;
    for (token = 'SSSS'; token.length <= 9; token += 'S') {
        addRegexToken(token, matchUnsigned);
    }

    function parseMs(input, array) {
        array[MILLISECOND] = toInt(('0.' + input) * 1000);
    }

    for (token = 'S'; token.length <= 9; token += 'S') {
        addParseToken(token, parseMs);
    }
    // MOMENTS

    var getSetMillisecond = makeGetSet('Milliseconds', false);

    // FORMATTING

    addFormatToken('z',  0, 0, 'zoneAbbr');
    addFormatToken('zz', 0, 0, 'zoneName');

    // MOMENTS

    function getZoneAbbr () {
        return this._isUTC ? 'UTC' : '';
    }

    function getZoneName () {
        return this._isUTC ? 'Coordinated Universal Time' : '';
    }

    var proto = Moment.prototype;

    proto.add               = add;
    proto.calendar          = calendar$1;
    proto.clone             = clone;
    proto.diff              = diff;
    proto.endOf             = endOf;
    proto.format            = format;
    proto.from              = from;
    proto.fromNow           = fromNow;
    proto.to                = to;
    proto.toNow             = toNow;
    proto.get               = stringGet;
    proto.invalidAt         = invalidAt;
    proto.isAfter           = isAfter;
    proto.isBefore          = isBefore;
    proto.isBetween         = isBetween;
    proto.isSame            = isSame;
    proto.isSameOrAfter     = isSameOrAfter;
    proto.isSameOrBefore    = isSameOrBefore;
    proto.isValid           = isValid$2;
    proto.lang              = lang;
    proto.locale            = locale;
    proto.localeData        = localeData;
    proto.max               = prototypeMax;
    proto.min               = prototypeMin;
    proto.parsingFlags      = parsingFlags;
    proto.set               = stringSet;
    proto.startOf           = startOf;
    proto.subtract          = subtract;
    proto.toArray           = toArray;
    proto.toObject          = toObject;
    proto.toDate            = toDate;
    proto.toISOString       = toISOString;
    proto.inspect           = inspect;
    proto.toJSON            = toJSON;
    proto.toString          = toString;
    proto.unix              = unix;
    proto.valueOf           = valueOf;
    proto.creationData      = creationData;
    proto.year       = getSetYear;
    proto.isLeapYear = getIsLeapYear;
    proto.weekYear    = getSetWeekYear;
    proto.isoWeekYear = getSetISOWeekYear;
    proto.quarter = proto.quarters = getSetQuarter;
    proto.month       = getSetMonth;
    proto.daysInMonth = getDaysInMonth;
    proto.week           = proto.weeks        = getSetWeek;
    proto.isoWeek        = proto.isoWeeks     = getSetISOWeek;
    proto.weeksInYear    = getWeeksInYear;
    proto.isoWeeksInYear = getISOWeeksInYear;
    proto.date       = getSetDayOfMonth;
    proto.day        = proto.days             = getSetDayOfWeek;
    proto.weekday    = getSetLocaleDayOfWeek;
    proto.isoWeekday = getSetISODayOfWeek;
    proto.dayOfYear  = getSetDayOfYear;
    proto.hour = proto.hours = getSetHour;
    proto.minute = proto.minutes = getSetMinute;
    proto.second = proto.seconds = getSetSecond;
    proto.millisecond = proto.milliseconds = getSetMillisecond;
    proto.utcOffset            = getSetOffset;
    proto.utc                  = setOffsetToUTC;
    proto.local                = setOffsetToLocal;
    proto.parseZone            = setOffsetToParsedOffset;
    proto.hasAlignedHourOffset = hasAlignedHourOffset;
    proto.isDST                = isDaylightSavingTime;
    proto.isLocal              = isLocal;
    proto.isUtcOffset          = isUtcOffset;
    proto.isUtc                = isUtc;
    proto.isUTC                = isUtc;
    proto.zoneAbbr = getZoneAbbr;
    proto.zoneName = getZoneName;
    proto.dates  = deprecate('dates accessor is deprecated. Use date instead.', getSetDayOfMonth);
    proto.months = deprecate('months accessor is deprecated. Use month instead', getSetMonth);
    proto.years  = deprecate('years accessor is deprecated. Use year instead', getSetYear);
    proto.zone   = deprecate('moment().zone is deprecated, use moment().utcOffset instead. http://momentjs.com/guides/#/warnings/zone/', getSetZone);
    proto.isDSTShifted = deprecate('isDSTShifted is deprecated. See http://momentjs.com/guides/#/warnings/dst-shifted/ for more information', isDaylightSavingTimeShifted);

    function createUnix (input) {
        return createLocal(input * 1000);
    }

    function createInZone () {
        return createLocal.apply(null, arguments).parseZone();
    }

    function preParsePostFormat (string) {
        return string;
    }

    var proto$1 = Locale.prototype;

    proto$1.calendar        = calendar;
    proto$1.longDateFormat  = longDateFormat;
    proto$1.invalidDate     = invalidDate;
    proto$1.ordinal         = ordinal;
    proto$1.preparse        = preParsePostFormat;
    proto$1.postformat      = preParsePostFormat;
    proto$1.relativeTime    = relativeTime;
    proto$1.pastFuture      = pastFuture;
    proto$1.set             = set;

    proto$1.months            =        localeMonths;
    proto$1.monthsShort       =        localeMonthsShort;
    proto$1.monthsParse       =        localeMonthsParse;
    proto$1.monthsRegex       = monthsRegex;
    proto$1.monthsShortRegex  = monthsShortRegex;
    proto$1.week = localeWeek;
    proto$1.firstDayOfYear = localeFirstDayOfYear;
    proto$1.firstDayOfWeek = localeFirstDayOfWeek;

    proto$1.weekdays       =        localeWeekdays;
    proto$1.weekdaysMin    =        localeWeekdaysMin;
    proto$1.weekdaysShort  =        localeWeekdaysShort;
    proto$1.weekdaysParse  =        localeWeekdaysParse;

    proto$1.weekdaysRegex       =        weekdaysRegex;
    proto$1.weekdaysShortRegex  =        weekdaysShortRegex;
    proto$1.weekdaysMinRegex    =        weekdaysMinRegex;

    proto$1.isPM = localeIsPM;
    proto$1.meridiem = localeMeridiem;

    function get$1 (format, index, field, setter) {
        var locale = getLocale();
        var utc = createUTC().set(setter, index);
        return locale[field](utc, format);
    }

    function listMonthsImpl (format, index, field) {
        if (isNumber(format)) {
            index = format;
            format = undefined;
        }

        format = format || '';

        if (index != null) {
            return get$1(format, index, field, 'month');
        }

        var i;
        var out = [];
        for (i = 0; i < 12; i++) {
            out[i] = get$1(format, i, field, 'month');
        }
        return out;
    }

    // ()
    // (5)
    // (fmt, 5)
    // (fmt)
    // (true)
    // (true, 5)
    // (true, fmt, 5)
    // (true, fmt)
    function listWeekdaysImpl (localeSorted, format, index, field) {
        if (typeof localeSorted === 'boolean') {
            if (isNumber(format)) {
                index = format;
                format = undefined;
            }

            format = format || '';
        } else {
            format = localeSorted;
            index = format;
            localeSorted = false;

            if (isNumber(format)) {
                index = format;
                format = undefined;
            }

            format = format || '';
        }

        var locale = getLocale(),
            shift = localeSorted ? locale._week.dow : 0;

        if (index != null) {
            return get$1(format, (index + shift) % 7, field, 'day');
        }

        var i;
        var out = [];
        for (i = 0; i < 7; i++) {
            out[i] = get$1(format, (i + shift) % 7, field, 'day');
        }
        return out;
    }

    function listMonths (format, index) {
        return listMonthsImpl(format, index, 'months');
    }

    function listMonthsShort (format, index) {
        return listMonthsImpl(format, index, 'monthsShort');
    }

    function listWeekdays (localeSorted, format, index) {
        return listWeekdaysImpl(localeSorted, format, index, 'weekdays');
    }

    function listWeekdaysShort (localeSorted, format, index) {
        return listWeekdaysImpl(localeSorted, format, index, 'weekdaysShort');
    }

    function listWeekdaysMin (localeSorted, format, index) {
        return listWeekdaysImpl(localeSorted, format, index, 'weekdaysMin');
    }

    getSetGlobalLocale('en', {
        dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/,
        ordinal : function (number) {
            var b = number % 10,
                output = (toInt(number % 100 / 10) === 1) ? 'th' :
                (b === 1) ? 'st' :
                (b === 2) ? 'nd' :
                (b === 3) ? 'rd' : 'th';
            return number + output;
        }
    });

    // Side effect imports

    hooks.lang = deprecate('moment.lang is deprecated. Use moment.locale instead.', getSetGlobalLocale);
    hooks.langData = deprecate('moment.langData is deprecated. Use moment.localeData instead.', getLocale);

    var mathAbs = Math.abs;

    function abs () {
        var data           = this._data;

        this._milliseconds = mathAbs(this._milliseconds);
        this._days         = mathAbs(this._days);
        this._months       = mathAbs(this._months);

        data.milliseconds  = mathAbs(data.milliseconds);
        data.seconds       = mathAbs(data.seconds);
        data.minutes       = mathAbs(data.minutes);
        data.hours         = mathAbs(data.hours);
        data.months        = mathAbs(data.months);
        data.years         = mathAbs(data.years);

        return this;
    }

    function addSubtract$1 (duration, input, value, direction) {
        var other = createDuration(input, value);

        duration._milliseconds += direction * other._milliseconds;
        duration._days         += direction * other._days;
        duration._months       += direction * other._months;

        return duration._bubble();
    }

    // supports only 2.0-style add(1, 's') or add(duration)
    function add$1 (input, value) {
        return addSubtract$1(this, input, value, 1);
    }

    // supports only 2.0-style subtract(1, 's') or subtract(duration)
    function subtract$1 (input, value) {
        return addSubtract$1(this, input, value, -1);
    }

    function absCeil (number) {
        if (number < 0) {
            return Math.floor(number);
        } else {
            return Math.ceil(number);
        }
    }

    function bubble () {
        var milliseconds = this._milliseconds;
        var days         = this._days;
        var months       = this._months;
        var data         = this._data;
        var seconds, minutes, hours, years, monthsFromDays;

        // if we have a mix of positive and negative values, bubble down first
        // check: https://github.com/moment/moment/issues/2166
        if (!((milliseconds >= 0 && days >= 0 && months >= 0) ||
                (milliseconds <= 0 && days <= 0 && months <= 0))) {
            milliseconds += absCeil(monthsToDays(months) + days) * 864e5;
            days = 0;
            months = 0;
        }

        // The following code bubbles up values, see the tests for
        // examples of what that means.
        data.milliseconds = milliseconds % 1000;

        seconds           = absFloor(milliseconds / 1000);
        data.seconds      = seconds % 60;

        minutes           = absFloor(seconds / 60);
        data.minutes      = minutes % 60;

        hours             = absFloor(minutes / 60);
        data.hours        = hours % 24;

        days += absFloor(hours / 24);

        // convert days to months
        monthsFromDays = absFloor(daysToMonths(days));
        months += monthsFromDays;
        days -= absCeil(monthsToDays(monthsFromDays));

        // 12 months -> 1 year
        years = absFloor(months / 12);
        months %= 12;

        data.days   = days;
        data.months = months;
        data.years  = years;

        return this;
    }

    function daysToMonths (days) {
        // 400 years have 146097 days (taking into account leap year rules)
        // 400 years have 12 months === 4800
        return days * 4800 / 146097;
    }

    function monthsToDays (months) {
        // the reverse of daysToMonths
        return months * 146097 / 4800;
    }

    function as (units) {
        if (!this.isValid()) {
            return NaN;
        }
        var days;
        var months;
        var milliseconds = this._milliseconds;

        units = normalizeUnits(units);

        if (units === 'month' || units === 'quarter' || units === 'year') {
            days = this._days + milliseconds / 864e5;
            months = this._months + daysToMonths(days);
            switch (units) {
                case 'month':   return months;
                case 'quarter': return months / 3;
                case 'year':    return months / 12;
            }
        } else {
            // handle milliseconds separately because of floating point math errors (issue #1867)
            days = this._days + Math.round(monthsToDays(this._months));
            switch (units) {
                case 'week'   : return days / 7     + milliseconds / 6048e5;
                case 'day'    : return days         + milliseconds / 864e5;
                case 'hour'   : return days * 24    + milliseconds / 36e5;
                case 'minute' : return days * 1440  + milliseconds / 6e4;
                case 'second' : return days * 86400 + milliseconds / 1000;
                // Math.floor prevents floating point math errors here
                case 'millisecond': return Math.floor(days * 864e5) + milliseconds;
                default: throw new Error('Unknown unit ' + units);
            }
        }
    }

    // TODO: Use this.as('ms')?
    function valueOf$1 () {
        if (!this.isValid()) {
            return NaN;
        }
        return (
            this._milliseconds +
            this._days * 864e5 +
            (this._months % 12) * 2592e6 +
            toInt(this._months / 12) * 31536e6
        );
    }

    function makeAs (alias) {
        return function () {
            return this.as(alias);
        };
    }

    var asMilliseconds = makeAs('ms');
    var asSeconds      = makeAs('s');
    var asMinutes      = makeAs('m');
    var asHours        = makeAs('h');
    var asDays         = makeAs('d');
    var asWeeks        = makeAs('w');
    var asMonths       = makeAs('M');
    var asQuarters     = makeAs('Q');
    var asYears        = makeAs('y');

    function clone$1 () {
        return createDuration(this);
    }

    function get$2 (units) {
        units = normalizeUnits(units);
        return this.isValid() ? this[units + 's']() : NaN;
    }

    function makeGetter(name) {
        return function () {
            return this.isValid() ? this._data[name] : NaN;
        };
    }

    var milliseconds = makeGetter('milliseconds');
    var seconds      = makeGetter('seconds');
    var minutes      = makeGetter('minutes');
    var hours        = makeGetter('hours');
    var days         = makeGetter('days');
    var months       = makeGetter('months');
    var years        = makeGetter('years');

    function weeks () {
        return absFloor(this.days() / 7);
    }

    var round = Math.round;
    var thresholds = {
        ss: 44,         // a few seconds to seconds
        s : 45,         // seconds to minute
        m : 45,         // minutes to hour
        h : 22,         // hours to day
        d : 26,         // days to month
        M : 11          // months to year
    };

    // helper function for moment.fn.from, moment.fn.fromNow, and moment.duration.fn.humanize
    function substituteTimeAgo(string, number, withoutSuffix, isFuture, locale) {
        return locale.relativeTime(number || 1, !!withoutSuffix, string, isFuture);
    }

    function relativeTime$1 (posNegDuration, withoutSuffix, locale) {
        var duration = createDuration(posNegDuration).abs();
        var seconds  = round(duration.as('s'));
        var minutes  = round(duration.as('m'));
        var hours    = round(duration.as('h'));
        var days     = round(duration.as('d'));
        var months   = round(duration.as('M'));
        var years    = round(duration.as('y'));

        var a = seconds <= thresholds.ss && ['s', seconds]  ||
                seconds < thresholds.s   && ['ss', seconds] ||
                minutes <= 1             && ['m']           ||
                minutes < thresholds.m   && ['mm', minutes] ||
                hours   <= 1             && ['h']           ||
                hours   < thresholds.h   && ['hh', hours]   ||
                days    <= 1             && ['d']           ||
                days    < thresholds.d   && ['dd', days]    ||
                months  <= 1             && ['M']           ||
                months  < thresholds.M   && ['MM', months]  ||
                years   <= 1             && ['y']           || ['yy', years];

        a[2] = withoutSuffix;
        a[3] = +posNegDuration > 0;
        a[4] = locale;
        return substituteTimeAgo.apply(null, a);
    }

    // This function allows you to set the rounding function for relative time strings
    function getSetRelativeTimeRounding (roundingFunction) {
        if (roundingFunction === undefined) {
            return round;
        }
        if (typeof(roundingFunction) === 'function') {
            round = roundingFunction;
            return true;
        }
        return false;
    }

    // This function allows you to set a threshold for relative time strings
    function getSetRelativeTimeThreshold (threshold, limit) {
        if (thresholds[threshold] === undefined) {
            return false;
        }
        if (limit === undefined) {
            return thresholds[threshold];
        }
        thresholds[threshold] = limit;
        if (threshold === 's') {
            thresholds.ss = limit - 1;
        }
        return true;
    }

    function humanize (withSuffix) {
        if (!this.isValid()) {
            return this.localeData().invalidDate();
        }

        var locale = this.localeData();
        var output = relativeTime$1(this, !withSuffix, locale);

        if (withSuffix) {
            output = locale.pastFuture(+this, output);
        }

        return locale.postformat(output);
    }

    var abs$1 = Math.abs;

    function sign(x) {
        return ((x > 0) - (x < 0)) || +x;
    }

    function toISOString$1() {
        // for ISO strings we do not use the normal bubbling rules:
        //  * milliseconds bubble up until they become hours
        //  * days do not bubble at all
        //  * months bubble up until they become years
        // This is because there is no context-free conversion between hours and days
        // (think of clock changes)
        // and also not between days and months (28-31 days per month)
        if (!this.isValid()) {
            return this.localeData().invalidDate();
        }

        var seconds = abs$1(this._milliseconds) / 1000;
        var days         = abs$1(this._days);
        var months       = abs$1(this._months);
        var minutes, hours, years;

        // 3600 seconds -> 60 minutes -> 1 hour
        minutes           = absFloor(seconds / 60);
        hours             = absFloor(minutes / 60);
        seconds %= 60;
        minutes %= 60;

        // 12 months -> 1 year
        years  = absFloor(months / 12);
        months %= 12;


        // inspired by https://github.com/dordille/moment-isoduration/blob/master/moment.isoduration.js
        var Y = years;
        var M = months;
        var D = days;
        var h = hours;
        var m = minutes;
        var s = seconds ? seconds.toFixed(3).replace(/\.?0+$/, '') : '';
        var total = this.asSeconds();

        if (!total) {
            // this is the same as C#'s (Noda) and python (isodate)...
            // but not other JS (goog.date)
            return 'P0D';
        }

        var totalSign = total < 0 ? '-' : '';
        var ymSign = sign(this._months) !== sign(total) ? '-' : '';
        var daysSign = sign(this._days) !== sign(total) ? '-' : '';
        var hmsSign = sign(this._milliseconds) !== sign(total) ? '-' : '';

        return totalSign + 'P' +
            (Y ? ymSign + Y + 'Y' : '') +
            (M ? ymSign + M + 'M' : '') +
            (D ? daysSign + D + 'D' : '') +
            ((h || m || s) ? 'T' : '') +
            (h ? hmsSign + h + 'H' : '') +
            (m ? hmsSign + m + 'M' : '') +
            (s ? hmsSign + s + 'S' : '');
    }

    var proto$2 = Duration.prototype;

    proto$2.isValid        = isValid$1;
    proto$2.abs            = abs;
    proto$2.add            = add$1;
    proto$2.subtract       = subtract$1;
    proto$2.as             = as;
    proto$2.asMilliseconds = asMilliseconds;
    proto$2.asSeconds      = asSeconds;
    proto$2.asMinutes      = asMinutes;
    proto$2.asHours        = asHours;
    proto$2.asDays         = asDays;
    proto$2.asWeeks        = asWeeks;
    proto$2.asMonths       = asMonths;
    proto$2.asQuarters     = asQuarters;
    proto$2.asYears        = asYears;
    proto$2.valueOf        = valueOf$1;
    proto$2._bubble        = bubble;
    proto$2.clone          = clone$1;
    proto$2.get            = get$2;
    proto$2.milliseconds   = milliseconds;
    proto$2.seconds        = seconds;
    proto$2.minutes        = minutes;
    proto$2.hours          = hours;
    proto$2.days           = days;
    proto$2.weeks          = weeks;
    proto$2.months         = months;
    proto$2.years          = years;
    proto$2.humanize       = humanize;
    proto$2.toISOString    = toISOString$1;
    proto$2.toString       = toISOString$1;
    proto$2.toJSON         = toISOString$1;
    proto$2.locale         = locale;
    proto$2.localeData     = localeData;

    proto$2.toIsoString = deprecate('toIsoString() is deprecated. Please use toISOString() instead (notice the capitals)', toISOString$1);
    proto$2.lang = lang;

    // Side effect imports

    // FORMATTING

    addFormatToken('X', 0, 0, 'unix');
    addFormatToken('x', 0, 0, 'valueOf');

    // PARSING

    addRegexToken('x', matchSigned);
    addRegexToken('X', matchTimestamp);
    addParseToken('X', function (input, array, config) {
        config._d = new Date(parseFloat(input, 10) * 1000);
    });
    addParseToken('x', function (input, array, config) {
        config._d = new Date(toInt(input));
    });

    // Side effect imports


    hooks.version = '2.24.0';

    setHookCallback(createLocal);

    hooks.fn                    = proto;
    hooks.min                   = min;
    hooks.max                   = max;
    hooks.now                   = now;
    hooks.utc                   = createUTC;
    hooks.unix                  = createUnix;
    hooks.months                = listMonths;
    hooks.isDate                = isDate;
    hooks.locale                = getSetGlobalLocale;
    hooks.invalid               = createInvalid;
    hooks.duration              = createDuration;
    hooks.isMoment              = isMoment;
    hooks.weekdays              = listWeekdays;
    hooks.parseZone             = createInZone;
    hooks.localeData            = getLocale;
    hooks.isDuration            = isDuration;
    hooks.monthsShort           = listMonthsShort;
    hooks.weekdaysMin           = listWeekdaysMin;
    hooks.defineLocale          = defineLocale;
    hooks.updateLocale          = updateLocale;
    hooks.locales               = listLocales;
    hooks.weekdaysShort         = listWeekdaysShort;
    hooks.normalizeUnits        = normalizeUnits;
    hooks.relativeTimeRounding  = getSetRelativeTimeRounding;
    hooks.relativeTimeThreshold = getSetRelativeTimeThreshold;
    hooks.calendarFormat        = getCalendarFormat;
    hooks.prototype             = proto;

    // currently HTML5 input type only supports 24-hour formats
    hooks.HTML5_FMT = {
        DATETIME_LOCAL: 'YYYY-MM-DDTHH:mm',             // <input type="datetime-local" />
        DATETIME_LOCAL_SECONDS: 'YYYY-MM-DDTHH:mm:ss',  // <input type="datetime-local" step="1" />
        DATETIME_LOCAL_MS: 'YYYY-MM-DDTHH:mm:ss.SSS',   // <input type="datetime-local" step="0.001" />
        DATE: 'YYYY-MM-DD',                             // <input type="date" />
        TIME: 'HH:mm',                                  // <input type="time" />
        TIME_SECONDS: 'HH:mm:ss',                       // <input type="time" step="1" />
        TIME_MS: 'HH:mm:ss.SSS',                        // <input type="time" step="0.001" />
        WEEK: 'GGGG-[W]WW',                             // <input type="week" />
        MONTH: 'YYYY-MM'                                // <input type="month" />
    };

    return hooks;

})));
});

function isValidMoment(testMoment) {
  if (typeof moment.isMoment === 'function' && !moment.isMoment(testMoment)) {
    return false;
  }

  /* istanbul ignore else  */
  if (typeof testMoment.isValid === 'function') {
    // moment 1.7.0+
    return testMoment.isValid();
  }

  /* istanbul ignore next */
  return !isNaN(testMoment);
}

var momentValidationWrapper = {
  isValidMoment : isValidMoment,
};

var messages = {
  invalidPredicate: '`predicate` must be a function',
  invalidPropValidator: '`propValidator` must be a function',
  requiredCore: 'is marked as required',
  invalidTypeCore: 'Invalid input type',
  predicateFailureCore: 'Failed to succeed with predicate',
  anonymousMessage: '<<anonymous>>',
  baseInvalidMessage: 'Invalid ',
};

function constructPropValidatorVariations(propValidator) {
  if (typeof propValidator !== 'function') {
    throw new Error(messages.invalidPropValidator);
  }

  var requiredPropValidator = propValidator.bind(null, false, null);
  requiredPropValidator.isRequired = propValidator.bind(null, true, null);

  requiredPropValidator.withPredicate = function predicateApplication(predicate) {
    if (typeof predicate !== 'function') {
      throw new Error(messages.invalidPredicate);
    }
    var basePropValidator = propValidator.bind(null, false, predicate);
    basePropValidator.isRequired = propValidator.bind(null, true, predicate);
    return basePropValidator;
  };

  return requiredPropValidator;
}

function createInvalidRequiredErrorMessage(propName, componentName, value) {
  return new Error(
    'The prop `' + propName + '` ' + messages.requiredCore +
    ' in `' + componentName + '`, but its value is `' + value + '`.'
  );
}

var independentGuardianValue = -1;

function preValidationRequireCheck(isRequired, componentName, propFullName, propValue) {
  var isPropValueUndefined = typeof propValue === 'undefined';
  var isPropValueNull = propValue === null;

  if (isRequired) {
    if (isPropValueUndefined) {
      return createInvalidRequiredErrorMessage(propFullName, componentName, 'undefined');
    } else if (isPropValueNull) {
      return createInvalidRequiredErrorMessage(propFullName, componentName, 'null');
    }
  }

  if (isPropValueUndefined || isPropValueNull) {
    return null;
  }

  return independentGuardianValue;
}

function createMomentChecker(type, typeValidator, validator, momentType) {

  function propValidator(
    isRequired, // Bound parameter to indicate with the propType is required
    predicate, // Bound parameter to allow user to add dynamic validation
    props,
    propName,
    componentName,
    location,
    propFullName
  ) {
    var propValue = props[ propName ];
    var propType = typeof propValue;

    componentName = componentName || messages.anonymousMessage;
    propFullName = propFullName || propName;

    var preValidationRequireCheckValue = preValidationRequireCheck(
      isRequired, componentName, propFullName, propValue
    );

    if (preValidationRequireCheckValue !== independentGuardianValue) {
      return preValidationRequireCheckValue;
    }

    if (typeValidator && !typeValidator(propValue)) {
      return new Error(
        messages.invalidTypeCore + ': `' + propName + '` of type `' + propType + '` ' +
        'supplied to `' + componentName + '`, expected `' + type + '`.'
      );
    }

    if (!validator(propValue)) {
      return new Error(
        messages.baseInvalidMessage + location + ' `' + propName + '` of type `' + propType + '` ' +
        'supplied to `' + componentName + '`, expected `' + momentType + '`.'
      );
    }

    if (predicate && !predicate(propValue)) {
      var predicateName = predicate.name || messages.anonymousMessage;
      return new Error(
        messages.baseInvalidMessage + location + ' `' + propName + '` of type `' + propType + '` ' +
        'supplied to `' + componentName + '`. ' + messages.predicateFailureCore + ' `' +
        predicateName + '`.'
      );
    }

    return null;

  }

  return constructPropValidatorVariations(propValidator);

}

var core = {
  constructPropValidatorVariations: constructPropValidatorVariations,
  createMomentChecker: createMomentChecker,
  messages: messages,
};

var src = {

  momentObj : core.createMomentChecker(
    'object',
    function(obj) {
      return typeof obj === 'object';
    },
    function isValid(value) {
      return momentValidationWrapper.isValidMoment(value);
    },
    'Moment'
  ),

  momentString : core.createMomentChecker(
    'string',
    function(str) {
      return typeof str === 'string';
    },
    function isValid(value) {
      return momentValidationWrapper.isValidMoment(moment(value));
    },
    'Moment'
  ),

  momentDurationObj : core.createMomentChecker(
    'object',
    function(obj) {
      return typeof obj === 'object';
    },
    function isValid(value) {
      return moment.isDuration(value);
    },
    'Duration'
  ),

};
var src_1 = src.momentObj;

function _templateObject$P() {
  var data = taggedTemplateLiteralLoose(["\n\t.DayPicker__withBorder {\n\t\tbox-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);\n\t}\n\t.DateRangePickerInput {\n\t\tdisplay: flex;\n\t\tbackground-color: ", ";\n\t}\n\n\t.DateRangePickerInput__withBorder {\n\t\tborder: thin solid ", ";\n\t\tborder-radius: 4px;\n\t}\n\n\t.DateRangePickerInput_calendarIcon {\n\t\twidth: 34px;\n\t\theight: 34px;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\toutline: none;\n\t}\n\n\t.DateInput {\n\t\twidth: 50%;\n\t}\n\n\t.DateInput:before {\n\t\tposition: absolute;\n\t\ttop: 20%;\n\t\tbottom: 20%;\n\t\tborder-right: thin solid ", ";\n\t\tcontent: '';\n\t}\n\n\t.DateInput_input {\n\t\tpadding: 7px 7px 5px 7px;\n\t\tfont-size: 15px;\n\t\tline-height: 20px;\n\t}\n\n\t.DateInput_input__focused {\n\t\tborder-bottom: 2px solid ", ";\n\t}\n\n\t.DateRangePickerInput_arrow {\n\t\tdisplay: none;\n\t\twidth: 0;\n\t\tmargin: 0 4px;\n\t}\n\n\t.DateRangePickerInput_arrow svg {\n\t\twidth: 22px;\n\t}\n\n\t/* NOTE: the order of these styles DO matter */\n\n\t.CalendarDay__default {\n\t\tborder: 1px solid transparent;\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t}\n\n\t.CalendarDay__blocked_out_of_range:active,\n\t.CalendarDay__blocked_out_of_range:hover {\n\t\tborder: 1px solid transparent;\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t}\n\t/* Will edit everything selected including everything between a range of dates */\n\t.CalendarDay__selected_span {\n\t\tborder: 1px solid transparent; /* default styles include a border  */\n\t\tbackground: ", "; /* background */\n\t\tcolor: ", "; /* text */\n\t}\n\n\t.CalendarDay__selected_span:hover {\n\t\tborder: 1px solid transparent;\n\t\tbackground: ", "; /* background */\n\t\tcolor: ", "; /* text */\n\t}\n\n\t/*  Will edit selected date or the endpoints of a range of dates */\n\t.CalendarDay__selected {\n\t\tborder: 1px solid transparent; /* default styles include a border  */\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t}\n\n\t/*  Will edit when hovered over. _span style also has this property */\n\t.CalendarDay__selected:hover {\n\t\tborder: 1px solid transparent;\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t}\n\n\t/*  Will edit when the second date (end date) in a range of dates */\n\t/*  is not yet selected. Edits the dates between your mouse and said date */\n\t.CalendarDay__hovered_span {\n\t\tborder: 1px solid transparent;\n\t\tbackground: ", "; /* background */\n\t}\n\n\t.CalendarDay__hovered_span:hover {\n\t\tborder: 1px solid transparent; /* default styles include a border  */\n\t\tbackground: ", "; /* background */\n\t\tcolor: ", ";\n\t}\n"]);

  _templateObject$P = function _templateObject() {
    return data;
  };

  return data;
}

var DatePicker = function DatePicker(props) {
  return React.createElement(DatePickerStyledWrapper, null, React.createElement(DateRangePicker, _extends_1({}, props, {
    hideKeyboardShortcutsPanel: true,
    customInputIcon: React.createElement(Icon$1, {
      icon: "calendar",
      color: theme.colors.activeBlue
    })
  })));
};

var DatePickerStyledWrapper = styled.div(_templateObject$P(), theme.colors.white, theme.colors.strokeGray, theme.colors.strokeGray, theme.colors.activeBlue, theme.colors.white, theme.colors.black, theme.colors.lightGray, theme.colors.strokeGray, theme.colors.strokeGray, theme.colors.black, theme.colors.activeBlue, theme.colors.white, theme.colors.deepBlue, theme.colors.white, theme.colors.activeBlue, theme.colors.white, theme.colors.lightBlue, theme.colors.lightBlue, theme.colors.activeBlue);
DatePicker.displayName = 'DatePicker';
DatePicker.defaultProps = {
  startDatePlaceholderText: '',
  endDatePlaceholderText: '',
  startDate: null,
  endDate: null,
  startDateId: 'startDate',
  endDateId: 'endDate'
};
DatePicker.propTypes = {
  /**  starDate placeholder text  */
  startDatePlaceholderText: PropTypes.string,

  /**  endDate placeholder text  */
  endDatePlaceholderText: PropTypes.string,

  /** momentPropTypes.momentObj or null */
  startDate: src_1,

  /** momentPropTypes.momentObj or null */
  endDate: src_1,

  /** triggers when Dates changes */
  onDatesChange: PropTypes.func.isRequired,

  /** triggers when focus changes */
  onFocusChange: PropTypes.func.isRequired,

  /** START_DATE, END_DATE or null */
  focusedInput: PropTypes.oneOf(['startDate', 'endDate']),
  startDateId: PropTypes.string,
  endDateId: PropTypes.string
};

function _templateObject4$a() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tmargin: 16px;\n\n\t& > div {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-direction: row-reverse;\n\t}\n\t& span {\n\t\twidth: 25%;\n\t\tpadding-right: 8px;\n\t\tfont-weight: bold;\n\t}\n\t& input {\n\t\tborder: 1px solid ", " !important;\n\t\tborder-radius: 4px !important;\n\t\tpadding: 7px;\n\t\twidth: 75%;\n\t\t:focus {\n\t\t\tborder: 1px solid ", " !important;\n\t\t\toutline: 0;\n\t\t}\n\t}\n"]);

  _templateObject4$a = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$d() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: relative;\n\theight: 14px;\n\tmargin: 16px;\n\t& .hue-horizontal {\n\t\tborder-radius: 5% / 50%;\n\t\t//Hue picker indicator\n\t\t& > div > div {\n\t\t\tmargin-top: 0 !important;\n\t\t\twidth: 14px !important;\n\t\t\tborder-radius: 50% !important;\n\t\t\theight: 14px !important;\n\t\t\ttransform: translateX(-7px) !important;\n\t\t}\n\t}\n"]);

  _templateObject3$d = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$i() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: relative;\n\theight: 180px;\n\n\t& .saturation-white > div > div {\n\t\twidth: 8px !important;\n\t\theight: 8px !important;\n\t\ttransform: translate(-4px, -4px) !important;\n\t}\n"]);

  _templateObject2$i = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$Q() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: 180px;\n"]);

  _templateObject$Q = function _templateObject() {
    return data;
  };

  return data;
}

var CustomColorPicker = function CustomColorPicker(_ref) {
  var hex = _ref.hex,
      hsl = _ref.hsl,
      hsv = _ref.hsv,
      onChange = _ref.onChange;
  return React.createElement(CustomColorPickerContainer, null, React.createElement(SaturationContainer, null, React.createElement(Saturation, {
    hsl: hsl,
    hsv: hsv,
    onChange: onChange
  })), React.createElement(HueContainer, null, React.createElement(Hue, {
    hsl: hsl,
    onChange: onChange
  })), React.createElement(EditableInputContainer, null, React.createElement(EditableInput, {
    label: "hex",
    value: hex,
    onChange: onChange
  })));
};

CustomColorPicker.displayName = 'ColorPicker';
CustomColorPicker.defaultProps = {
  hex: null,
  hsv: null,
  hsl: null,
  onChange: null
};
CustomColorPicker.propTypes = {
  hex: PropTypes.string,
  hsl: PropTypes.shape({
    h: PropTypes.number,
    s: PropTypes.number,
    l: PropTypes.number,
    a: PropTypes.number
  }),
  hsv: PropTypes.shape({
    h: PropTypes.number,
    s: PropTypes.number,
    v: PropTypes.number,
    a: PropTypes.number
  }),
  onChange: PropTypes.func
};
var CustomColorPickerContainer = styled.div(_templateObject$Q());
var SaturationContainer = styled.div(_templateObject2$i());
var HueContainer = styled.div(_templateObject3$d());
var EditableInputContainer = styled.div(_templateObject4$a(), function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.strokeGray;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.deepBlue;
});
var CustomColorPicker$1 = CustomPicker(CustomColorPicker);

function _templateObject2$j() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: 180px;\n\theight: 20px;\n\tflex-direction: row-reverse;\n\talign-items: center;\n\n\tpadding: 5px;\n\n\tbackground: #424242;\n"]);

  _templateObject2$j = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$R() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: ", ";\n\tz-index: 5;\n\n\tdisplay: ", ";\n\tbox-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 8px;\n\tbackground-color: ", ";\n"]);

  _templateObject$R = function _templateObject() {
    return data;
  };

  return data;
}

var ColorPicker =
/*#__PURE__*/
function (_Component) {
  inheritsLoose(ColorPicker, _Component);

  function ColorPicker(props) {
    var _this;

    _this = _Component.call(this, props) || this;

    defineProperty(assertThisInitialized(_this), "handleOnClose", function () {
      var _this$props = _this.props,
          onClose = _this$props.onClose,
          setColor = _this$props.setColor;
      var color = _this.state.color;
      setColor(color);
      onClose();
    });

    var _color = props.color;
    _this.state = {
      color: _color
    };
    _this.setWrapperRef = _this.setWrapperRef.bind(assertThisInitialized(_this));
    _this.handleClickOutside = _this.handleClickOutside.bind(assertThisInitialized(_this));
    return _this;
  }

  var _proto = ColorPicker.prototype;

  _proto.componentDidMount = function componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  };

  _proto.setWrapperRef = function setWrapperRef(node) {
    this.wrapperRef = node;
  };

  _proto.handleClickOutside = function handleClickOutside(event) {
    var _this$props2 = this.props,
        isVisible = _this$props2.isVisible,
        isDisplayerMode = _this$props2.isDisplayerMode;

    if (this.wrapperRef && !this.wrapperRef.contains(event.target) && isVisible && isDisplayerMode) {
      this.handleOnClose();
    }
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props3 = this.props,
        isVisible = _this$props3.isVisible,
        isDisplayerMode = _this$props3.isDisplayerMode,
        setColor = _this$props3.setColor,
        props = objectWithoutPropertiesLoose(_this$props3, ["isVisible", "isDisplayerMode", "setColor"]);

    var color = this.state.color;
    return React.createElement(ColorPickerStyled, {
      className: "" + (isVisible && 'isActive'),
      isVisible: isVisible,
      isDisplayerMode: isDisplayerMode,
      ref: this.setWrapperRef,
      onClick: function onClick(e) {
        return e.stopPropagation();
      }
    }, React.createElement(TopHeader, null, React.createElement(Icon$1, {
      style: {
        cursor: 'pointer'
      },
      icon: "error",
      color: "white",
      size: "tiny",
      onClick: this.handleOnClose
    })), React.createElement(CustomColorPicker$1, _extends_1({}, props, {
      color: color,
      onChangeComplete: function onChangeComplete(colorValue) {
        return _this2.setState({
          color: colorValue
        }) || !isDisplayerMode && setColor(colorValue);
      },
      disableAlpha: true,
      className: "color-picker"
    })));
  };

  return ColorPicker;
}(Component);

var ColorPickerStyled = styled.div(_templateObject$R(), function (_ref) {
  var isDisplayerMode = _ref.isDisplayerMode;
  return isDisplayerMode ? 'absolute' : 'inherit';
}, function (_ref2) {
  var isVisible = _ref2.isVisible;
  return isVisible ? 'inline-block' : 'none';
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.white;
});
ColorPickerStyled.displayName = 'ColorPickerStyled';
var TopHeader = styled.div(_templateObject2$j());
ColorPicker.displayName = 'ColorPicker';
ColorPicker.defaultProps = {
  isVisible: true,
  isDisplayerMode: true
};
ColorPicker.propTypes = {
  isVisible: PropTypes.bool,
  color: PropTypes.shape({
    hex: PropTypes.string.isRequired
  }).isRequired,
  setColor: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
  isDisplayerMode: PropTypes.bool
};

function _templateObject3$e() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-block;\n\twidth: 22px;\n\theight: 22px;\n\tbackground: transparent;\n\tcursor: pointer;\n"]);

  _templateObject3$e = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$k() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\theight: 100%;\n\tbackground: ", ";\n\tborder-radius: 50%;\n\tcursor: ", ";\n"]);

  _templateObject2$k = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$S() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: fixed;\n\tdisplay: block;\n\twidth: 0;\n\theight: 0;\n\tborder: 0;\n\tbackground: transparent;\n\toutline: 0;\n"]);

  _templateObject$S = function _templateObject() {
    return data;
  };

  return data;
}

var ColorDisplayer = function ColorDisplayer(_ref) {
  var escKeyCall = _ref.escKeyCall,
      color = _ref.color,
      style = _ref.style,
      onChange = _ref.onChange,
      activeFocus = _ref.activeFocus,
      disabled = _ref.disabled,
      props = objectWithoutPropertiesLoose(_ref, ["escKeyCall", "color", "style", "onChange", "activeFocus", "disabled"]);

  var _useState = useState(false),
      display = _useState[0],
      setDisplay = _useState[1];

  var inputFocus = React.createRef();

  var handleEscKey = function handleEscKey(event) {
    if (event.keyCode === 27) {
      escKeyCall();
      setDisplay(false);
    }
  };

  useEffect(function () {
    document.addEventListener('keydown', handleEscKey);
    return function () {
      document.removeEventListener('keydown', handleEscKey);
    };
  });

  var handleOpen = function handleOpen(flag) {
    if (activeFocus && flag) {
      inputFocus.current.focus();
    }

    setDisplay(flag);
  };

  return React.createElement(Fragment, null, React.createElement(ColorButtonContainer, {
    onClick: function onClick(event) {
      event.stopPropagation();
      if (!disabled) handleOpen(!display);
    },
    style: style
  }, React.createElement(ColorBox, {
    color: color,
    disabled: disabled
  })), activeFocus && React.createElement(InputHidden, {
    ref: inputFocus
  }), React.createElement(ColorPicker, _extends_1({}, props, {
    isVisible: display,
    color: color,
    setColor: onChange,
    onClose: function onClose() {
      return setDisplay(false);
    }
  })));
};

var InputHidden = styled.input(_templateObject$S());
var ColorBox = styled(function (_ref2) {
  var color = _ref2.color,
      disabled = _ref2.disabled,
      props = objectWithoutPropertiesLoose(_ref2, ["color", "disabled"]);

  return React.createElement("div", props);
})(_templateObject2$k(), function (_ref3) {
  var theme = _ref3.theme,
      color = _ref3.color,
      disabled = _ref3.disabled;
  return disabled ? theme.colors.lightGray : color.hex;
}, function (_ref4) {
  var disabled = _ref4.disabled;
  return disabled ? 'not-allowed' : 'inherit';
});
ColorBox.displayName = 'ColorBox';
var ColorButtonContainer = styled.div(_templateObject3$e());
ColorButtonContainer.displayName = 'ColorButtonContainer';
ColorDisplayer.displayName = 'ColorDisplayer';
ColorDisplayer.defaultProps = {
  escKeyCall: function escKeyCall() {},
  color: {
    hex: '#e10020'
  },
  activeFocus: false,
  style: {},
  disabled: false
};
ColorDisplayer.propTypes = {
  escKeyCall: PropTypes.func,
  onChange: PropTypes.func.isRequired,
  style: PropTypes.shape({}),
  color: PropTypes.shape({
    hex: PropTypes.string.isRequired
  }),
  activeFocus: PropTypes.bool,
  disabled: PropTypes.bool
};

function _templateObject2$l() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: 5px;\n\tpadding-bottom: 2px;\n\tcolor: ", " !important;\n\ttext-align: center;\n"]);

  _templateObject2$l = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$T() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex;\n\talign-items: center;\n"]);

  _templateObject$T = function _templateObject() {
    return data;
  };

  return data;
}

var TimePicker =
/*#__PURE__*/
function (_Component) {
  inheritsLoose(TimePicker, _Component);

  function TimePicker(props) {
    var _this;

    _this = _Component.call(this, props) || this;

    defineProperty(assertThisInitialized(_this), "formatMomentDuration", function (value, format) {
      return moment.utc(value.asMilliseconds()).format(format);
    });

    defineProperty(assertThisInitialized(_this), "formatTimeItem", function (value) {
      return ((value || '') + "00").substr(0, 2);
    });

    defineProperty(assertThisInitialized(_this), "isNumber", function (value) {
      return Number.isInteger(Number(value)) && String(value) === String(Number(value));
    });

    defineProperty(assertThisInitialized(_this), "isValidTime", function (event, type, value) {
      switch (type) {
        case 'hours':
          return event.target.selectionEnd === 0 || event.target.selectionEnd === 1 && Number(value.charAt(0)) < 3 || event.target.selectionEnd === 2 && Number(value.charAt(0)) < 2 || event.target.selectionEnd === 2 && Number(value.charAt(0)) === 2 && Number(value.charAt(1)) < 4;

        case 'minutes':
        case 'seconds':
        default:
          return event.target.selectionEnd !== 1 || event.target.selectionEnd === 1 && Number(value.charAt(0)) < 6;
      }
    });

    defineProperty(assertThisInitialized(_this), "onInputChange", function (event, type) {
      var oldValue = _this.state[type];
      var _event$target = event.target,
          inputValue = _event$target.value,
          position = _event$target.selectionEnd;
      var isTyped = inputValue.length > oldValue.length;
      var cursorCharacter = inputValue[position - 1];
      var addedCharacter = isTyped ? cursorCharacter : null;
      var removedCharacter = isTyped ? null : oldValue[position - 1];
      var replacedSingleCharacter = inputValue.length === oldValue.length ? oldValue[position - 1] : null;
      var newValue = oldValue;
      var newPosition = position;

      if (addedCharacter !== null) {
        if (position > 2) {
          newPosition = 2;
        } else if (_this.isNumber(addedCharacter)) {
          if (position === 2) {
            newValue = "" + inputValue.substr(0, 1) + inputValue.substr(1, 1);
          }

          if (position === 1) {
            newValue = "" + inputValue.substr(0, 1) + inputValue.substr(2, 1);
          }
        } else {
          newPosition = position - 1;
        }
      } else if (replacedSingleCharacter !== null) {
        if (_this.isNumber(cursorCharacter)) {
          newValue = inputValue;
        } else {
          newValue = oldValue;
          newPosition = position - 1;
        }
      } else if (removedCharacter !== null) {
        if (position === 0) newValue = "0" + inputValue.substr(0, 1);else newValue = inputValue.substr(0, 1);
      }

      return {
        newValue: newValue,
        newPosition: newPosition
      };
    });

    defineProperty(assertThisInitialized(_this), "onChange", function (event, type, value) {
      var onChange = _this.props.onChange;
      var _this$state = _this.state,
          hoursValue = _this$state.hoursValue,
          minutesValue = _this$state.minutesValue,
          secondsValue = _this$state.secondsValue;
      var target = event.target,
          nativeEvent = event.nativeEvent,
          selectionEnd = event.target.selectionEnd;
      var durationObject = {
        hours: hoursValue,
        minutes: minutesValue,
        seconds: secondsValue
      };
      var typeValue = type + "Value";

      if (nativeEvent.type === 'click') {
        var _this$setState, _extends2;

        _this.setState((_this$setState = {}, _this$setState[typeValue] = value, _this$setState));

        onChange(moment.duration(_extends_1({}, durationObject, (_extends2 = {}, _extends2[type] = value, _extends2))));
      } else {
        var _this$onInputChange = _this.onInputChange(event, typeValue),
            newValue = _this$onInputChange.newValue,
            newPosition = _this$onInputChange.newPosition;

        newValue = _this.formatTimeItem(newValue);

        if (_this.isValidTime(event, type, newValue)) {
          var _this$setState2, _extends3;

          _this.setState((_this$setState2 = {}, _this$setState2[typeValue] = newValue, _this$setState2), function () {
            target.selectionStart = newPosition;
            target.selectionEnd = newPosition;
          });

          onChange(moment.duration(_extends_1({}, durationObject, (_extends3 = {}, _extends3[type] = newValue, _extends3))));
        } else {
          _this.setState({}, function () {
            target.selectionStart = selectionEnd - 1;
            target.selectionEnd = selectionEnd - 1;
          });
        }
      }
    });

    defineProperty(assertThisInitialized(_this), "onBlur", function () {
      var onBlur = _this.props.onBlur;
      var _this$state2 = _this.state,
          hoursValue = _this$state2.hoursValue,
          minutesValue = _this$state2.minutesValue,
          secondsValue = _this$state2.secondsValue;
      onBlur(moment.duration({
        hours: hoursValue,
        minutes: minutesValue,
        seconds: secondsValue
      }));
    });

    var _this$props = _this.props,
        _value = _this$props.value,
        hours = _this$props.hours,
        minutes = _this$props.minutes,
        seconds = _this$props.seconds;
    _this.state = {
      hoursValue: hours ? _this.formatMomentDuration(_value, 'HH') : 0,
      minutesValue: minutes ? _this.formatMomentDuration(_value, 'mm') : 0,
      secondsValue: seconds ? _this.formatMomentDuration(_value, 'ss') : 0
    };
    return _this;
  }

  var _proto = TimePicker.prototype;

  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
    var value = this.props.value;

    if (value.hours() !== Number(prevState.hoursValue)) {
      this.setState({
        hoursValue: this.formatMomentDuration(value, 'HH')
      });
    }

    if (value.minutes() !== Number(prevState.minutesValue)) {
      this.setState({
        minutesValue: this.formatMomentDuration(value, 'mm')
      });
    }

    if (value.seconds() !== Number(prevState.secondsValue)) {
      this.setState({
        secondsValue: this.formatMomentDuration(value, 'ss')
      });
    }
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props2 = this.props,
        disabled = _this$props2.disabled,
        error = _this$props2.error,
        hours = _this$props2.hours,
        minutes = _this$props2.minutes,
        seconds = _this$props2.seconds,
        onChange = _this$props2.onChange,
        onBlur = _this$props2.onBlur,
        value = _this$props2.value,
        props = objectWithoutPropertiesLoose(_this$props2, ["disabled", "error", "hours", "minutes", "seconds", "onChange", "onBlur", "value"]);

    var _this$state3 = this.state,
        hoursValue = _this$state3.hoursValue,
        minutesValue = _this$state3.minutesValue,
        secondsValue = _this$state3.secondsValue;
    return React.createElement(Container$1, null, hours && React.createElement("div", null, React.createElement(NumberSpinner, _extends_1({
      name: "hours",
      disabled: disabled,
      error: error,
      min: 0,
      max: 23,
      onChange: function onChange(event, val) {
        return _this2.onChange(event, 'hours', val);
      },
      onBlur: this.onBlur,
      value: hoursValue
    }, props))), minutes && hours && React.createElement(MiddleColumn, {
      disabled: disabled
    }, ":"), minutes && React.createElement("div", null, React.createElement(NumberSpinner, _extends_1({
      name: "minutes",
      disabled: disabled,
      error: error,
      min: 0,
      max: 59,
      onChange: function onChange(event, val) {
        return _this2.onChange(event, 'minutes', val);
      },
      onBlur: this.onBlur,
      value: minutesValue
    }, props))), seconds && minutes && React.createElement(MiddleColumn, {
      disabled: disabled
    }, ":"), seconds && React.createElement("div", null, React.createElement(NumberSpinner, _extends_1({
      name: "seconds",
      disabled: disabled,
      error: error,
      min: 0,
      max: 59,
      onChange: function onChange(event, val) {
        return _this2.onChange(event, 'seconds', val);
      },
      onBlur: this.onBlur,
      value: secondsValue
    }, props))));
  };

  return TimePicker;
}(Component);

var hoursPropValidation = function hoursPropValidation(props, propName, componentName) {
  var minutes = props.minutes,
      seconds = props.seconds,
      hours = props.hours;

  if (props[propName] === undefined || typeof props[propName] !== 'boolean') {
    return new Error("Failed prop format: The prop '" + propName + "' is marked as required in " + componentName + ", but its value is " + typeof props[propName] + ".");
  }

  if (minutes === false && seconds === true && hours === true || minutes === false && seconds === false && hours === false) {
    return new Error('Please provide a valid time combination!');
  }

  return null;
};

TimePicker.defaultProps = {
  disabled: false,
  error: false,
  onBlur: function onBlur() {}
};
TimePicker.displayName = 'TimePicker';
TimePicker.propTypes = {
  onChange: PropTypes.func.isRequired,
  onBlur: PropTypes.func,
  name: PropTypes.string.isRequired,
  value: PropTypes.objectOf(moment).isRequired,
  disabled: PropTypes.bool,
  error: PropTypes.bool,
  seconds: PropTypes.bool.isRequired,
  minutes: PropTypes.bool.isRequired,
  hours: hoursPropValidation
};
var Container$1 = styled.div(_templateObject$T());
Container$1.displayName = 'Container';
var MiddleColumn = styled.div(_templateObject2$l(), function (_ref) {
  var disabled = _ref.disabled,
      theme = _ref.theme;
  return disabled ? theme.timePicker.disabledColor : theme.timePicker.textColor;
});
MiddleColumn.displayName = 'MiddleColumn';

var Header$2 = function Header$$1(_ref) {
  var bold = _ref.bold,
      italic = _ref.italic,
      underlined = _ref.underlined,
      uppercase = _ref.uppercase,
      size = _ref.size,
      color = _ref.color,
      props = objectWithoutPropertiesLoose(_ref, ["bold", "italic", "underlined", "uppercase", "size", "color"]);

  return React.createElement(Header, _extends_1({
    as: function as(textProps) {
      return React.createElement(Text, _extends_1({
        size: size,
        color: color,
        bold: bold,
        underlined: underlined,
        uppercase: uppercase
      }, textProps));
    }
  }, props));
};

Header$2.displayName = 'Header';
Header$2.defaultProps = {
  color: 'darkGray',
  italic: false,
  uppercase: false,
  size: 'xl',
  bold: true,
  underlined: false
};
Header$2.propTypes = {
  color: PropTypes.string,
  italic: PropTypes.bool,
  uppercase: PropTypes.bool,
  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
  bold: PropTypes.bool,
  underlined: PropTypes.bool
};

var BigHeader = function BigHeader(props) {
  return React.createElement(Header$2, _extends_1({
    color: "darkGray",
    bold: true,
    size: "xxl"
  }, props));
};

BigHeader.displayName = 'BigHeader';

var SubHeader = function SubHeader(props) {
  return React.createElement(Header$2, _extends_1({
    color: "darkGray",
    bold: true,
    size: "lg"
  }, props));
};

SubHeader.displayName = 'SubHeader';

var TextTruncate = function TextTruncate(_ref) {
  var text = _ref.text,
      length = _ref.length,
      place = _ref.place;
  var ending = '...';
  var truncatedString = "" + text.substring(0, length - ending.length) + ending;
  var slashedString = text.split(' ').join('_') + "-tooltip";
  if (text.length < length) return text;
  return React.createElement(Fragment, null, React.createElement(Tooltip, {
    multiline: true,
    id: slashedString,
    place: place,
    trigger: React.createElement("div", {
      "data-tip": text,
      "data-for": slashedString
    }, truncatedString)
  }));
};

TextTruncate.defaultProps = {
  length: 38,
  place: 'top'
};
TextTruncate.propTypes = {
  /** The string to truncate */
  text: PropTypes.string.isRequired,

  /** Tooltip position */
  place: PropTypes.oneOf(['top', 'right', 'left', 'bottom']),

  /** The max lenght of the visible string  */
  length: PropTypes.number
};

function _templateObject4$b() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tpadding-left: 0;\n\tpadding-right: 0;\n\theight: 100%;\n\tfont-weight: bold;\n"]);

  _templateObject4$b = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$f() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n"]);

  _templateObject3$f = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$m() {
  var data = taggedTemplateLiteralLoose(["\n\tmargin: 0 15px;\n"]);

  _templateObject2$m = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$U() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex;\n\talign-items: center;\n"]);

  _templateObject$U = function _templateObject() {
    return data;
  };

  return data;
}
var FROM_LOWER_LIMIT = moment.duration('00:00').asMilliseconds();
var FROM_HIGHER_LIMIT = moment.duration('23:58').asMilliseconds();
var TO_LOWER_LIMIT = moment.duration('00:01').asMilliseconds();
var TO_HIGHER_LIMIT = moment.duration('23:59').asMilliseconds();

var TimePickerGroup = function TimePickerGroup(_ref) {
  var from = _ref.from,
      to = _ref.to,
      onChange = _ref.onChange,
      disabled = _ref.disabled,
      hours = _ref.hours,
      minutes = _ref.minutes,
      seconds = _ref.seconds,
      fromLabel = _ref.fromLabel,
      toLabel = _ref.toLabel,
      middleLabel = _ref.middleLabel,
      props = objectWithoutPropertiesLoose(_ref, ["from", "to", "onChange", "disabled", "hours", "minutes", "seconds", "fromLabel", "toLabel", "middleLabel"]);

  var _useState = useState(from),
      beginTime = _useState[0],
      setBeginTime = _useState[1];

  var _useState2 = useState(to),
      endTime = _useState2[0],
      setEndTime = _useState2[1];

  var getLeastSignificantValue = function getLeastSignificantValue() {
    return seconds ? 's' : minutes ? 'm' : 'h';
  };

  var checkBounds = function checkBounds(value, isFrom) {
    if (isFrom === void 0) {
      isFrom = false;
    }

    return isFrom ? value >= FROM_LOWER_LIMIT && value <= FROM_HIGHER_LIMIT : value >= TO_LOWER_LIMIT && value <= TO_HIGHER_LIMIT;
  };

  var handleChangeFrom = function handleChangeFrom(value) {
    if (checkBounds(value, true)) {
      var newEndTime = endTime;

      if (value.asMilliseconds() >= endTime.asMilliseconds()) {
        newEndTime = value.clone().add(moment.duration(1, getLeastSignificantValue()));
        setEndTime(newEndTime);
      }

      setBeginTime(value);
      onChange({
        from: value,
        to: newEndTime
      });
    } else {
      setBeginTime(beginTime.clone());
    }
  };

  var handleChangeTo = function handleChangeTo(value) {
    if (checkBounds(value)) {
      var newBeginTime = beginTime;

      if (beginTime.asMilliseconds() >= value.asMilliseconds()) {
        newBeginTime = value.clone().subtract(moment.duration(1, getLeastSignificantValue()));
        setBeginTime(newBeginTime);
      }

      setEndTime(value);
      onChange({
        from: newBeginTime,
        to: value
      });
    } else {
      setEndTime(endTime.clone());
    }
  };

  return React.createElement(Container$2, _extends_1({
    middleLabel: middleLabel
  }, props), React.createElement(TimePickerWithLabel, null, fromLabel && React.createElement(LabelText, null, fromLabel), React.createElement(TimePicker, {
    name: "TimePickerFrom",
    disabled: disabled,
    onChange: handleChangeFrom,
    hours: hours,
    minutes: minutes,
    seconds: seconds,
    value: beginTime
  })), React.createElement(MiddleLabel, null, middleLabel && React.createElement(SpanStyled, null, middleLabel)), React.createElement(TimePickerWithLabel, null, toLabel && React.createElement(LabelText, null, toLabel), React.createElement(TimePicker, {
    name: "TimePickerTo",
    disabled: disabled,
    onChange: handleChangeTo,
    hours: hours,
    minutes: minutes,
    seconds: seconds,
    value: endTime
  })));
};

var Container$2 = styled.div(_templateObject$U());
Container$2.displayName = 'Container';
var MiddleLabel = styled.div(_templateObject2$m());
var TimePickerWithLabel = styled.div(_templateObject3$f());
var SpanStyled = styled.span(_templateObject4$b());
TimePickerGroup.defaultProps = {
  fromLabel: '',
  toLabel: '',
  disabled: false,
  hours: true,
  minutes: true,
  seconds: false,
  middleLabel: ''
};
TimePickerGroup.propTypes = {
  from: PropTypes.objectOf(moment).isRequired,
  to: PropTypes.objectOf(moment).isRequired,
  fromLabel: PropTypes.string,
  toLabel: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  disabled: PropTypes.bool,
  hours: PropTypes.bool,
  minutes: PropTypes.bool,
  seconds: PropTypes.bool,
  middleLabel: PropTypes.string
};

var SmileyVeryBad = function SmileyVeryBad(_ref) {
  var fill = _ref.fill,
      width = _ref.width,
      height = _ref.height;
  return React.createElement("svg", {
    width: width,
    height: height,
    viewBox: "0 0 88 88",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, React.createElement("path", {
    d: "M43.9955 0C19.7366 0 0 19.7366 0 43.9965C0 68.2583 19.7366 87.996 43.9955 87.996C68.2583 87.996 87.998 68.2583 87.998 43.9965C87.998 19.7366 68.2593 0 43.9955 0ZM43.9955 81.9499C23.0716 81.9499 6.04707 64.9234 6.04707 43.9965C6.04707 23.0716 23.0716 6.04707 43.9955 6.04707C64.9244 6.04707 81.9509 23.0716 81.9509 43.9965C81.9509 64.9234 64.9244 81.9499 43.9955 81.9499Z",
    fill: fill
  }), React.createElement("path", {
    d: "M44.0327 15.0532C27.882 15.0532 14.7427 28.1935 14.7427 44.3432C14.7427 60.4929 27.882 73.6322 44.0327 73.6322C60.1844 73.6322 73.3247 60.4929 73.3247 44.3432C73.3257 28.1925 60.1854 15.0532 44.0327 15.0532ZM28.784 31.1001C29.2587 30.2939 30.2998 30.0187 31.1111 30.4924L41.4516 36.5526C42.2629 37.0293 42.53 38.0674 42.0603 38.8787C41.7439 39.4179 41.1744 39.7192 40.5919 39.7192C40.3954 39.7192 40.1938 39.6708 40.0053 39.6013C39.958 39.6991 39.9227 39.7988 39.8693 39.8976C38.9168 41.5162 36.8336 42.0604 35.216 41.1121C33.5924 40.1627 33.0542 38.0764 34.0016 36.4599C34.051 36.3752 34.1155 36.3046 34.1689 36.228L29.3917 33.4303C28.5804 32.9515 28.3113 31.9104 28.784 31.1001ZM58.7331 57.2981C58.1052 57.9945 57.0288 58.0469 56.3354 57.417C52.9571 54.3723 48.5972 50.6775 44.0488 50.6775C39.4863 50.6775 35.1163 54.3814 31.738 57.4422C31.4134 57.7385 31.0053 57.8846 30.5981 57.8846C30.1375 57.8846 29.6769 57.6962 29.3403 57.3253C28.7084 56.6319 28.7618 55.5565 29.4562 54.9296C33.4604 51.2984 38.6427 47.2781 44.0518 47.2781C49.4418 47.2781 54.613 51.2822 58.6101 54.8933C59.3106 55.5273 59.363 56.6026 58.7331 57.2981ZM58.6767 33.4293L53.8975 36.223C53.9589 36.3036 54.0194 36.3742 54.0668 36.4588C55.0192 38.0754 54.4739 40.1617 52.8543 41.1111C51.2368 42.0564 49.1495 41.5112 48.2052 39.8946C48.1517 39.7978 48.1124 39.6981 48.0671 39.5953C47.8746 39.6668 47.6791 39.7152 47.4805 39.7152C46.8939 39.7152 46.3265 39.4169 46.0121 38.8757C45.5374 38.0664 45.8075 37.0283 46.6168 36.5516L56.9613 30.4914C57.7686 30.0167 58.8097 30.2848 59.2844 31.0991C59.7571 31.9104 59.487 32.9515 58.6767 33.4293Z",
    fill: fill
  }));
};

SmileyVeryBad.defaultProps = {
  fill: theme.colors.red,
  width: 24,
  height: 24
};
SmileyVeryBad.propTypes = {
  fill: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number
};

var SmileyBad = function SmileyBad(_ref) {
  var fill = _ref.fill,
      width = _ref.width,
      height = _ref.height;
  return React.createElement("svg", {
    width: width,
    height: height,
    viewBox: "0 0 89 88",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, React.createElement("path", {
    d: "M44.0305 14.7104C27.8808 14.7104 14.7415 27.8507 14.7415 44.0015C14.7415 60.1512 27.8798 73.2904 44.0305 73.2904C60.1813 73.2904 73.3225 60.1512 73.3225 44.0015C73.3215 27.8497 60.1813 14.7104 44.0305 14.7104ZM50.8597 31.736C52.7393 31.736 54.2632 33.2568 54.2632 35.1364C54.2632 37.011 52.7393 38.5369 50.8597 38.5369C48.9841 38.5369 47.4622 37.011 47.4622 35.1364C47.4622 33.2568 48.9841 31.736 50.8597 31.736ZM36.7025 31.736C38.5862 31.736 40.102 33.2568 40.102 35.1364C40.102 37.011 38.5862 38.5369 36.7025 38.5369C34.8289 38.5369 33.305 37.011 33.305 35.1364C33.305 33.2568 34.8289 31.736 36.7025 31.736ZM58.7632 54.9366C58.1373 55.634 57.0589 55.6894 56.3635 55.0605C52.9913 52.0138 48.6293 50.3358 44.0799 50.3358C39.5214 50.3358 35.1494 52.0209 31.7731 55.0867C31.4466 55.379 31.0374 55.5272 30.6292 55.5272C30.1686 55.5272 29.708 55.3397 29.3714 54.9698C28.7395 54.2754 28.7949 53.2001 29.4914 52.5691C33.4955 48.9399 38.6779 46.9373 44.0799 46.9373C49.4739 46.9373 54.6442 48.9268 58.6423 52.5399C59.3357 53.1688 59.3911 54.2402 58.7632 54.9366Z",
    fill: fill
  }), React.createElement("path", {
    d: "M44.0025 0C19.7386 0 0 19.7366 0 43.9975C0 68.2603 19.7386 88 44.0025 88C68.2624 88 88.002 68.2603 88.002 43.9975C88.002 19.7366 68.2624 0 44.0025 0ZM44.0025 81.9529C23.0746 81.9529 6.04707 64.9264 6.04707 43.9975C6.04707 23.0716 23.0746 6.04707 44.0025 6.04707C64.9304 6.04707 81.9549 23.0716 81.9549 43.9975C81.9549 64.9264 64.9304 81.9529 44.0025 81.9529Z",
    fill: fill
  }));
};

SmileyBad.defaultProps = {
  fill: theme.colors.red,
  width: 24,
  height: 24
};
SmileyBad.propTypes = {
  fill: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number
};

var SmileyBlank = function SmileyBlank(_ref) {
  var fill = _ref.fill,
      width = _ref.width,
      height = _ref.height;
  return React.createElement("svg", {
    width: width,
    height: height,
    viewBox: "0 0 89 88",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, React.createElement("path", {
    d: "M44.0025 0C19.7386 0 0 19.7366 0 43.9975C0 68.2603 19.7386 88 44.0025 88C68.2624 88 88.002 68.2603 88.002 43.9975C88.002 19.7366 68.2624 0 44.0025 0ZM44.0025 81.9529C23.0746 81.9529 6.04707 64.9264 6.04707 43.9975C6.04707 23.0716 23.0746 6.04707 44.0025 6.04707C64.9304 6.04707 81.9549 23.0716 81.9549 43.9975C81.9549 64.9264 64.9304 81.9529 44.0025 81.9529Z",
    fill: fill
  }), React.createElement("path", {
    d: "M44.0328 14.7126C27.8821 14.7126 14.7428 27.8519 14.7428 44.0016C14.7428 60.1513 27.8821 73.2896 44.0328 73.2896C60.1835 73.2896 73.3228 60.1503 73.3228 44.0006C73.3228 27.8509 60.1845 14.7126 44.0328 14.7126ZM51.1159 31.7341C52.9895 31.7341 54.5093 33.257 54.5093 35.1366C54.5093 37.0112 52.9895 38.5361 51.1159 38.5361C49.2383 38.5361 47.7165 37.0112 47.7165 35.1366C47.7165 33.257 49.2373 31.7341 51.1159 31.7341ZM36.9587 31.7341C38.8343 31.7341 40.3562 33.257 40.3562 35.1366C40.3562 37.0112 38.8343 38.5361 36.9587 38.5361C35.0771 38.5361 33.5552 37.0112 33.5552 35.1366C33.5552 33.257 35.0771 31.7341 36.9587 31.7341ZM53.4622 54.5235H34.6044C33.6691 54.5235 32.9092 53.7606 32.9092 52.8243C32.9092 51.885 33.6691 51.1241 34.6044 51.1241H53.4622C54.4015 51.1241 55.1614 51.885 55.1614 52.8243C55.1604 53.7606 54.4015 54.5235 53.4622 54.5235Z",
    fill: fill
  }));
};

SmileyBlank.defaultProps = {
  fill: '#FBDC3B',
  width: 24,
  height: 24
};
SmileyBlank.propTypes = {
  fill: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number
};

var SmileyGood = function SmileyGood(_ref) {
  var fill = _ref.fill,
      width = _ref.width,
      height = _ref.height;
  return React.createElement("svg", {
    width: width,
    height: height,
    viewBox: "0 0 89 88",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, React.createElement("path", {
    d: "M44.0025 0C19.7386 0 0 19.7366 0 43.9975C0 68.2603 19.7386 88 44.0025 88C68.2624 88 88.002 68.2603 88.002 43.9975C88.002 19.7366 68.2624 0 44.0025 0ZM44.0025 81.9529C23.0746 81.9529 6.04707 64.9264 6.04707 43.9975C6.04707 23.0716 23.0746 6.04707 44.0025 6.04707C64.9304 6.04707 81.9549 23.0716 81.9549 43.9975C81.9549 64.9264 64.9304 81.9529 44.0025 81.9529Z",
    fill: fill
  }), React.createElement("path", {
    d: "M44.0325 14.7126C27.8818 14.7126 14.7426 27.8519 14.7426 44.0016C14.7426 60.1513 27.8818 73.2896 44.0325 73.2896C60.1833 73.2896 73.3225 60.1503 73.3225 44.0006C73.3225 27.8509 60.1843 14.7126 44.0325 14.7126ZM51.1157 31.7341C52.9893 31.7341 54.5091 33.257 54.5091 35.1366C54.5091 37.0112 52.9893 38.5361 51.1157 38.5361C49.2381 38.5361 47.7162 37.0112 47.7162 35.1366C47.7162 33.257 49.2371 31.7341 51.1157 31.7341ZM36.9212 31.7341C38.7988 31.7341 40.3227 33.257 40.3227 35.1366C40.3227 37.0112 38.7988 38.5361 36.9212 38.5361C35.0416 38.5361 33.5237 37.0112 33.5237 35.1366C33.5237 33.257 35.0416 31.7341 36.9212 31.7341ZM58.5697 50.1777C54.5857 53.9259 50.6077 57.792 44.0114 57.792C37.4745 57.792 33.3262 53.9894 29.4188 50.1424C28.7526 49.4863 28.675 48.4402 29.3029 47.7448C29.9288 47.0514 31.0051 47 31.7026 47.6279C35.0768 50.6917 37.9643 54.3935 44.0114 54.3935C50.0585 54.3935 52.9207 50.7018 56.293 47.6541C56.9894 47.0252 58.0628 47.0806 58.6927 47.773C59.3195 48.4745 59.2671 49.5458 58.5697 50.1777Z",
    fill: fill
  }));
};

SmileyGood.defaultProps = {
  fill: '#44A40A',
  width: 24,
  height: 24
};
SmileyGood.propTypes = {
  fill: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number
};

var SmileyVeryGood = function SmileyVeryGood(_ref) {
  var fill = _ref.fill,
      width = _ref.width,
      height = _ref.height;
  return React.createElement("svg", {
    width: width,
    height: height,
    viewBox: "0 0 88 88",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, React.createElement("path", {
    d: "M44.0025 0C19.7397 0 0 19.7366 0 43.9975C0 68.2603 19.7397 88 44.0025 88C68.2634 88 88.001 68.2603 88.001 43.9975C88.001 19.7366 68.2634 0 44.0025 0ZM44.0025 81.9529C23.0746 81.9529 6.04707 64.9264 6.04707 43.9975C6.04707 23.0716 23.0746 6.04707 44.0025 6.04707C64.9294 6.04707 81.9539 23.0716 81.9539 43.9975C81.9539 64.9264 64.9294 81.9529 44.0025 81.9529Z",
    fill: fill
  }), React.createElement("path", {
    d: "M59.0276 46.9375H28.9757C28.6703 46.9375 28.4345 47.0212 28.3277 47.1653C28.2229 47.3104 28.2148 47.5603 28.3065 47.8526C28.4597 48.3283 32.2099 59.5799 44.0027 59.5799C54.4561 59.5799 59.457 47.768 59.5074 47.649C59.6384 47.3275 59.6071 47.1431 59.5709 47.0897C59.5346 47.0363 59.3764 46.9375 59.0276 46.9375Z",
    fill: fill
  }), React.createElement("path", {
    d: "M43.9988 14.7126C27.8501 14.7126 14.7119 27.8519 14.7119 44.0016C14.7119 60.1513 27.8491 73.2906 43.9988 73.2906C60.1506 73.2906 73.2908 60.1513 73.2908 44.0016C73.2908 27.8519 60.1516 14.7126 43.9988 14.7126ZM51.3773 28.1936C54.1922 28.1936 56.481 30.4814 56.481 33.2953C56.481 34.2346 55.7211 34.9955 54.7818 34.9955C53.8424 34.9955 53.0825 34.2346 53.0825 33.2953C53.0825 32.354 52.3166 31.59 51.3763 31.59C50.4369 31.59 49.668 32.355 49.668 33.2953C49.668 34.2346 48.9101 34.9955 47.9707 34.9955C47.0375 34.9955 46.2735 34.2346 46.2735 33.2953C46.2745 30.4824 48.5624 28.1936 51.3773 28.1936ZM36.6254 28.1936C39.4383 28.1936 41.7271 30.4814 41.7271 33.2953C41.7271 34.2346 40.9672 34.9955 40.0299 34.9955C39.0926 34.9955 38.3307 34.2346 38.3307 33.2953C38.3307 32.354 37.5627 31.59 36.6244 31.59C35.6831 31.59 34.9202 32.355 34.9202 33.2953C34.9202 34.2346 34.1562 34.9955 33.2209 34.9955C32.2836 34.9955 31.5197 34.2346 31.5197 33.2953C31.5207 30.4824 33.8105 28.1936 36.6254 28.1936ZM62.3033 48.797C62.0725 49.3614 56.5001 62.6034 44.0029 62.6034C29.9676 62.6034 25.4676 48.9028 25.4242 48.7647C25.0372 47.5442 25.2065 46.3096 25.8889 45.3794C26.5712 44.4491 27.6959 43.914 28.9749 43.914H59.0268C60.332 43.914 61.4436 44.4582 62.0806 45.4046C62.7175 46.3529 62.7992 47.5896 62.3033 48.797Z",
    fill: fill
  }));
};

SmileyVeryGood.defaultProps = {
  fill: '#44A40A',
  width: 24,
  height: 24
};
SmileyVeryGood.propTypes = {
  fill: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number
};

var Star = function Star(_ref) {
  var fill = _ref.fill,
      width = _ref.width,
      height = _ref.height;
  return React.createElement("svg", {
    width: width,
    height: height,
    viewBox: "0 0 26 24",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, React.createElement("path", {
    d: "M12.7502 0L16.6898 7.90022L25.5 9.16742L19.1249 15.3165L20.6298 24L12.7502 19.9004L4.87022 24L6.37512 15.3165L0 9.16742L8.81023 7.90022L12.7502 0Z",
    fill: fill
  }));
};

Star.displayName = 'Star';
Star.defaultProps = {
  fill: theme.colors.gray,
  width: 26,
  height: 24
};
Star.propTypes = {
  fill: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number
};

function _templateObject$V() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-block;\n\tmargin: 0 2px;\n"]);

  _templateObject$V = function _templateObject() {
    return data;
  };

  return data;
}

var Rating = function Rating(_ref) {
  var number = _ref.number,
      type = _ref.type;
  var _theme$colors = theme.colors,
      yellow = _theme$colors.yellow,
      gray = _theme$colors.gray,
      orange = _theme$colors.orange;
  var threeStars = [yellow, yellow, gray];
  var fiveStars = [yellow, yellow, yellow, gray, gray];
  var threeSmileys = [function () {
    return React.createElement(SmileyBad, null);
  }, function () {
    return React.createElement(SmileyBlank, null);
  }, function () {
    return React.createElement(SmileyGood, null);
  }];
  var fiveSmileys = [function () {
    return React.createElement(SmileyVeryBad, null);
  }, function () {
    return React.createElement(SmileyBad, {
      fill: orange
    });
  }, function () {
    return React.createElement(SmileyBlank, null);
  }, function () {
    return React.createElement(SmileyGood, {
      fill: "#95C623"
    });
  }, function () {
    return React.createElement(SmileyVeryGood, null);
  }];
  var stars = number === 3 ? threeStars : fiveStars;
  var smileys = number === 3 ? threeSmileys : fiveSmileys;

  var renderSmileys = function renderSmileys() {
    return smileys.map(function (Smiley, index$$1) {
      return React.createElement(SvgContainer, {
        key: index$$1
      }, React.createElement(Smiley, null));
    });
  };

  var renderStars = function renderStars() {
    return stars.map(function (color, index$$1) {
      return React.createElement(SvgContainer, {
        key: index$$1
      }, React.createElement(Star, {
        fill: color
      }));
    });
  };

  return React.createElement("div", null, type === 'stars' ? renderStars(stars) : renderSmileys(smileys));
};

var SvgContainer = styled.div(_templateObject$V());
Rating.displayName = 'Rating';
Rating.defaultProps = {
  number: 3,
  type: 'stars'
};
Rating.propTypes = {
  /** number of Rating elements */
  number: PropTypes.oneOf([3, 5]),

  /**  type of Rating */
  type: PropTypes.oneOf(['stars', 'smileys'])
};

function _templateObject$W() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: ", "px;\n\theight: ", "px;\n\tbox-sizing: border-box;\n\tborder: thin ", ";\n\tborder-color: ", ";\n\tborder-radius: 4px;\n\tbox-shadow: ", ";\n\n\t:active,\n\t:hover {\n\t\tborder-color: ", ";\n\t}\n\tcursor: pointer;\n\tuser-select: none;\n"]);

  _templateObject$W = function _templateObject() {
    return data;
  };

  return data;
}
var WidgetCardWrapper = styled.div(_templateObject$W(), function (_ref) {
  var width = _ref.width;
  return width;
}, function (_ref2) {
  var height = _ref2.height;
  return height;
}, function (_ref3) {
  var borderStyle = _ref3.borderStyle;
  return borderStyle;
}, function (_ref4) {
  var theme = _ref4.theme,
      selected = _ref4.selected;
  return selected ? theme.colors.deepBlue : theme.colors.strokeGray;
}, function (_ref5) {
  var borderStyle = _ref5.borderStyle;
  return borderStyle === 'dashed' && '0px 0px 4px rgba(0, 0, 0, 0.25)';
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.colors.deepBlue;
});
WidgetCardWrapper.displayName = 'WidgetCardWrapper';
WidgetCardWrapper.defaultProps = {
  borderStyle: 'solid',
  width: 57,
  height: 57,
  selected: false
};
WidgetCardWrapper.propTypes = {
  borderStyle: PropTypes.oneOf(['dashed', 'solid']),
  width: PropTypes.number,
  height: PropTypes.number,
  selected: PropTypes.bool
};

var WidgetCardContainer = function WidgetCardContainer(_ref) {
  var borderStyle = _ref.borderStyle,
      selected = _ref.selected,
      children = _ref.children,
      width = _ref.width,
      height = _ref.height,
      props = objectWithoutPropertiesLoose(_ref, ["borderStyle", "selected", "children", "width", "height"]);

  return React.createElement(WidgetCardWrapper, _extends_1({
    borderStyle: borderStyle,
    selected: selected,
    width: width,
    height: height
  }, props), children);
};

WidgetCardContainer.defaultProps = {
  borderStyle: 'solid',
  children: undefined,
  width: 57,
  height: 57,
  selected: false
};
WidgetCardContainer.propTypes = {
  /** Style of the border (can be dashed or solid) */
  borderStyle: PropTypes.oneOf(['dashed', 'solid']),

  /** Card content */
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),

  /** Card Width in pixels */
  width: PropTypes.number,

  /** Card Height in pixels */
  height: PropTypes.number,

  /**   is selected */
  selected: PropTypes.bool
};
WidgetCardContainer.displayName = 'WidgetCardContainer';

function _templateObject3$g() {
  var data = taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n\tfont-size: 12px;\n"]);

  _templateObject3$g = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$n() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n"]);

  _templateObject2$n = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$X() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: fit-content;\n\ttext-align: center;\n\n\t:hover {\n\t\t.Rating-label {\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"]);

  _templateObject$X = function _templateObject() {
    return data;
  };

  return data;
}

var RatingBox = function RatingBox(_ref) {
  var number = _ref.number,
      label = _ref.label,
      type = _ref.type;
  return React.createElement(RatingBoxStyled, null, React.createElement(RatingBoxWrapper, {
    width: 169,
    height: 60,
    number: number
  }, React.createElement(Rating, {
    number: number,
    type: type
  })), label && React.createElement(Label$3, {
    className: "Rating-label"
  }, label));
};

var RatingBoxStyled = styled.div(_templateObject$X(), function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.deepBlue;
});
var RatingBoxWrapper = styled(WidgetCardContainer)(_templateObject2$n());
var Label$3 = styled.div(_templateObject3$g(), function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.mediumGray;
});
RatingBox.displayName = 'RatingBox';
RatingBox.defaultProps = {
  number: 3,
  label: undefined,
  type: 'stars'
};
RatingBox.propTypes = {
  /** number of Rating elements */
  number: PropTypes.oneOf([3, 5]),

  /**  type of Rating */
  type: PropTypes.oneOf(['stars', 'smileys']),

  /**  Label bellow the box */
  label: PropTypes.string
};

var constant$2 = createCommonjsModule(function (module, exports) {

exports.__esModule = true;
exports.ACTION = exports.TYPE = exports.POSITION = void 0;
var POSITION = {
  TOP_LEFT: 'top-left',
  TOP_RIGHT: 'top-right',
  TOP_CENTER: 'top-center',
  BOTTOM_LEFT: 'bottom-left',
  BOTTOM_RIGHT: 'bottom-right',
  BOTTOM_CENTER: 'bottom-center'
};
exports.POSITION = POSITION;
var TYPE = {
  INFO: 'info',
  SUCCESS: 'success',
  WARNING: 'warning',
  ERROR: 'error',
  DEFAULT: 'default'
};
exports.TYPE = TYPE;
var ACTION = {
  SHOW: 0,
  CLEAR: 1,
  DID_MOUNT: 2,
  WILL_UNMOUNT: 3,
  ON_CHANGE: 4
};
exports.ACTION = ACTION;
});

unwrapExports(constant$2);
var constant_1 = constant$2.ACTION;
var constant_2 = constant$2.TYPE;
var constant_3 = constant$2.POSITION;

var propValidator = createCommonjsModule(function (module, exports) {

exports.__esModule = true;
exports.isValidDelay = isValidDelay;
exports.objectValues = objectValues;
exports.falseOrElement = exports.falseOrDelay = void 0;



function isValidDelay(val) {
  return typeof val === 'number' && !isNaN(val) && val > 0;
}

function objectValues(obj) {
  return Object.keys(obj).map(function (key) {
    return obj[key];
  });
}

function withRequired(fn) {
  fn.isRequired = function (props, propName, componentName) {
    var prop = props[propName];

    if (typeof prop === 'undefined') {
      return new Error("The prop " + propName + " is marked as required in \n      " + componentName + ", but its value is undefined.");
    }

    fn(props, propName, componentName);
  };

  return fn;
}

var falseOrDelay = withRequired(function (props, propName, componentName) {
  var prop = props[propName];

  if (prop !== false && !isValidDelay(prop)) {
    return new Error(componentName + " expect " + propName + " \n      to be a valid Number > 0 or equal to false. " + prop + " given.");
  }

  return null;
});
exports.falseOrDelay = falseOrDelay;
var falseOrElement = withRequired(function (props, propName, componentName) {
  var prop = props[propName];

  if (prop !== false && !(0, React.isValidElement)(prop)) {
    return new Error(componentName + " expect " + propName + " \n      to be a valid react element or equal to false. " + prop + " given.");
  }

  return null;
});
exports.falseOrElement = falseOrElement;
});

unwrapExports(propValidator);
var propValidator_1 = propValidator.isValidDelay;
var propValidator_2 = propValidator.objectValues;
var propValidator_3 = propValidator.falseOrElement;
var propValidator_4 = propValidator.falseOrDelay;

var ProgressBar_1 = createCommonjsModule(function (module, exports) {

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireDefault(React);

var _propTypes = _interopRequireDefault(PropTypes);

var _classnames = _interopRequireDefault(classnames);





function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ProgressBar(_ref) {
  var _animationEvent;

  var delay = _ref.delay,
      isRunning = _ref.isRunning,
      closeToast = _ref.closeToast,
      type = _ref.type,
      hide = _ref.hide,
      className = _ref.className,
      userStyle = _ref.style,
      controlledProgress = _ref.controlledProgress,
      progress = _ref.progress,
      isProgressDone = _ref.isProgressDone,
      rtl = _ref.rtl;

  var style = _extends({}, userStyle, {
    animationDuration: delay + "ms",
    animationPlayState: isRunning ? 'running' : 'paused',
    opacity: hide ? 0 : 1,
    transform: controlledProgress ? "scaleX(" + progress + ")" : null
  });

  var classNames = (0, _classnames.default)('Toastify__progress-bar', controlledProgress ? 'Toastify__progress-bar--controlled' : 'Toastify__progress-bar--animated', "Toastify__progress-bar--" + type, {
    'Toastify__progress-bar--rtl': rtl
  }, className);
  var animationEvent = (_animationEvent = {}, _animationEvent[controlledProgress && isProgressDone ? 'onTransitionEnd' : 'onAnimationEnd'] = controlledProgress && !isProgressDone ? null : closeToast, _animationEvent);
  return _react.default.createElement("div", _extends({
    className: classNames,
    style: style
  }, animationEvent));
}

ProgressBar.propTypes = {
  /**
   * The animation delay which determine when to close the toast
   */
  delay: propValidator.falseOrDelay.isRequired,

  /**
   * Whether or not the animation is running or paused
   */
  isRunning: _propTypes.default.bool.isRequired,

  /**
   * Func to close the current toast
   */
  closeToast: _propTypes.default.func.isRequired,

  /**
   * Support rtl content
   */
  rtl: _propTypes.default.bool.isRequired,

  /**
   * Optional type : info, success ...
   */
  type: _propTypes.default.string,

  /**
   * Hide or not the progress bar
   */
  hide: _propTypes.default.bool,

  /**
   * Optionnal className
   */
  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),

  /**
   * Controlled progress value
   */
  progress: _propTypes.default.number,

  /**
   * Tell wether or not controlled progress bar is used
   */
  controlledProgress: _propTypes.default.bool,

  /**
   * Helper to close the toast when using controlled progress value
   */
  isProgressDone: _propTypes.default.bool
};
ProgressBar.defaultProps = {
  type: constant$2.TYPE.DEFAULT,
  hide: false
};
var _default = ProgressBar;
exports.default = _default;
});

unwrapExports(ProgressBar_1);

var Toast_1 = createCommonjsModule(function (module, exports) {

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireWildcard(React);

var _propTypes = _interopRequireDefault(PropTypes);

var _classnames = _interopRequireDefault(classnames);

var _ProgressBar = _interopRequireDefault(ProgressBar_1);





function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

function getX(e) {
  return e.targetTouches && e.targetTouches.length >= 1 ? e.targetTouches[0].clientX : e.clientX;
}

function getY(e) {
  return e.targetTouches && e.targetTouches.length >= 1 ? e.targetTouches[0].clientY : e.clientY;
}

var noop = function noop() {};

var Toast =
/*#__PURE__*/
function (_Component) {
  _inheritsLoose(Toast, _Component);

  function Toast() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
    _this.state = {
      isRunning: true,
      preventExitTransition: false
    };
    _this.flag = {
      canCloseOnClick: true,
      canDrag: false
    };
    _this.drag = {
      start: 0,
      x: 0,
      y: 0,
      deltaX: 0,
      removalDistance: 0
    };
    _this.ref = null;

    _this.pauseToast = function () {
      if (_this.props.autoClose) {
        _this.setState({
          isRunning: false
        });
      }
    };

    _this.playToast = function () {
      if (_this.props.autoClose) {
        _this.setState({
          isRunning: true
        });
      }
    };

    _this.onDragStart = function (e) {
      _this.flag.canCloseOnClick = true;
      _this.flag.canDrag = true;
      _this.ref.style.transition = '';
      _this.drag.start = _this.drag.x = getX(e.nativeEvent);
      _this.drag.removalDistance = _this.ref.offsetWidth * (_this.props.draggablePercent / 100);
    };

    _this.onDragMove = function (e) {
      if (_this.flag.canDrag) {
        if (_this.state.isRunning) {
          _this.pauseToast();
        }

        _this.drag.x = getX(e);
        _this.drag.deltaX = _this.drag.x - _this.drag.start; // prevent false positif during a toast click

        _this.drag.start !== _this.drag.x && (_this.flag.canCloseOnClick = false);
        _this.ref.style.transform = "translateX(" + _this.drag.deltaX + "px)";
        _this.ref.style.opacity = 1 - Math.abs(_this.drag.deltaX / _this.drag.removalDistance);
      }
    };

    _this.onDragEnd = function (e) {
      if (_this.flag.canDrag) {
        _this.flag.canDrag = false;

        if (Math.abs(_this.drag.deltaX) > _this.drag.removalDistance) {
          _this.setState({
            preventExitTransition: true
          }, _this.props.closeToast);

          return;
        }

        _this.drag.y = getY(e);
        _this.ref.style.transition = 'transform 0.2s, opacity 0.2s';
        _this.ref.style.transform = 'translateX(0)';
        _this.ref.style.opacity = 1;
      }
    };

    _this.onDragTransitionEnd = function () {
      var _this$ref$getBounding = _this.ref.getBoundingClientRect(),
          top = _this$ref$getBounding.top,
          bottom = _this$ref$getBounding.bottom,
          left = _this$ref$getBounding.left,
          right = _this$ref$getBounding.right;

      if (_this.props.pauseOnHover && _this.drag.x >= left && _this.drag.x <= right && _this.drag.y >= top && _this.drag.y <= bottom) {
        _this.pauseToast();
      } else {
        _this.playToast();
      }
    };

    return _this;
  }

  var _proto = Toast.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.props.onOpen(this.props.children.props);

    if (this.props.draggable) {
      this.bindDragEvents();
    } // Maybe I could bind the event in the ToastContainer and rely on delegation


    if (this.props.pauseOnFocusLoss) {
      this.bindFocusEvents();
    }
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (prevProps.draggable !== this.props.draggable) {
      if (this.props.draggable) {
        this.bindDragEvents();
      } else {
        this.unbindDragEvents();
      }
    }

    if (prevProps.pauseOnFocusLoss !== this.props.pauseOnFocusLoss) {
      if (this.props.pauseOnFocusLoss) {
        this.bindFocusEvents();
      } else {
        this.unbindFocusEvents();
      }
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this.props.onClose(this.props.children.props);

    if (this.props.draggable) {
      this.unbindDragEvents();
    }

    if (this.props.pauseOnFocusLoss) {
      this.unbindFocusEvents();
    }
  };

  _proto.bindFocusEvents = function bindFocusEvents() {
    window.addEventListener('focus', this.playToast);
    window.addEventListener('blur', this.pauseToast);
  };

  _proto.unbindFocusEvents = function unbindFocusEvents() {
    window.removeEventListener('focus', this.playToast);
    window.removeEventListener('blur', this.pauseToast);
  };

  _proto.bindDragEvents = function bindDragEvents() {
    document.addEventListener('mousemove', this.onDragMove);
    document.addEventListener('mouseup', this.onDragEnd);
    document.addEventListener('touchmove', this.onDragMove);
    document.addEventListener('touchend', this.onDragEnd);
  };

  _proto.unbindDragEvents = function unbindDragEvents() {
    document.removeEventListener('mousemove', this.onDragMove);
    document.removeEventListener('mouseup', this.onDragEnd);
    document.removeEventListener('touchmove', this.onDragMove);
    document.removeEventListener('touchend', this.onDragEnd);
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        closeButton = _this$props.closeButton,
        children = _this$props.children,
        autoClose = _this$props.autoClose,
        pauseOnHover = _this$props.pauseOnHover,
        closeOnClick = _this$props.closeOnClick,
        type = _this$props.type,
        hideProgressBar = _this$props.hideProgressBar,
        closeToast = _this$props.closeToast,
        Transition = _this$props.transition,
        position = _this$props.position,
        onExited = _this$props.onExited,
        className = _this$props.className,
        bodyClassName = _this$props.bodyClassName,
        progressClassName = _this$props.progressClassName,
        progressStyle = _this$props.progressStyle,
        updateId = _this$props.updateId,
        role = _this$props.role,
        progress = _this$props.progress,
        isProgressDone = _this$props.isProgressDone,
        rtl = _this$props.rtl;
    var toastProps = {
      className: (0, _classnames.default)('Toastify__toast', "Toastify__toast--" + type, {
        'Toastify__toast--rtl': rtl
      }, className)
    };

    if (autoClose && pauseOnHover) {
      toastProps.onMouseEnter = this.pauseToast;
      toastProps.onMouseLeave = this.playToast;
    } // prevent toast from closing when user drags the toast


    if (closeOnClick) {
      toastProps.onClick = function () {
        return _this2.flag.canCloseOnClick && closeToast();
      };
    }

    var controlledProgress = parseFloat(progress) === progress;
    return _react.default.createElement(Transition, {
      in: this.props.in,
      appear: true,
      unmountOnExit: true,
      onExited: onExited,
      position: position,
      preventExitTransition: this.state.preventExitTransition
    }, _react.default.createElement("div", _extends({}, toastProps, {
      ref: function ref(_ref) {
        return _this2.ref = _ref;
      },
      onMouseDown: this.onDragStart,
      onTouchStart: this.onDragStart,
      onTransitionEnd: this.onDragTransitionEnd
    }), _react.default.createElement("div", _extends({}, this.props.in && {
      role: role
    }, {
      className: (0, _classnames.default)('Toastify__toast-body', bodyClassName)
    }), children), closeButton && closeButton, (autoClose || controlledProgress) && _react.default.createElement(_ProgressBar.default, _extends({}, updateId && !controlledProgress ? {
      key: "pb-" + updateId
    } : {}, {
      rtl: rtl,
      delay: autoClose,
      isRunning: this.state.isRunning,
      closeToast: closeToast,
      hide: hideProgressBar,
      type: type,
      style: progressStyle,
      className: progressClassName,
      controlledProgress: controlledProgress,
      isProgressDone: isProgressDone,
      progress: progress
    }))));
  };

  return Toast;
}(_react.Component);

Toast.propTypes = {
  closeButton: propValidator.falseOrElement.isRequired,
  autoClose: propValidator.falseOrDelay.isRequired,
  children: _propTypes.default.node.isRequired,
  closeToast: _propTypes.default.func.isRequired,
  position: _propTypes.default.oneOf((0, propValidator.objectValues)(constant$2.POSITION)).isRequired,
  pauseOnHover: _propTypes.default.bool.isRequired,
  pauseOnFocusLoss: _propTypes.default.bool.isRequired,
  closeOnClick: _propTypes.default.bool.isRequired,
  transition: _propTypes.default.func.isRequired,
  rtl: _propTypes.default.bool.isRequired,
  hideProgressBar: _propTypes.default.bool.isRequired,
  draggable: _propTypes.default.bool.isRequired,
  draggablePercent: _propTypes.default.number.isRequired,
  in: _propTypes.default.bool,
  onExited: _propTypes.default.func,
  onOpen: _propTypes.default.func,
  onClose: _propTypes.default.func,
  type: _propTypes.default.oneOf((0, propValidator.objectValues)(constant$2.TYPE)),
  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
  bodyClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
  progressClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
  progressStyle: _propTypes.default.object,
  progress: _propTypes.default.number,
  isProgressDone: _propTypes.default.bool,
  updateId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  ariaLabel: _propTypes.default.string
};
Toast.defaultProps = {
  type: constant$2.TYPE.DEFAULT,
  in: true,
  onOpen: noop,
  onClose: noop,
  className: null,
  bodyClassName: null,
  progressClassName: null,
  updateId: null,
  role: 'alert'
};
var _default = Toast;
exports.default = _default;
});

unwrapExports(Toast_1);

var CloseButton_1 = createCommonjsModule(function (module, exports) {

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireDefault(React);

var _propTypes = _interopRequireDefault(PropTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function CloseButton(_ref) {
  var closeToast = _ref.closeToast,
      type = _ref.type,
      ariaLabel = _ref.ariaLabel;
  return _react.default.createElement("button", {
    className: "Toastify__close-button Toastify__close-button--" + type,
    type: "button",
    onClick: closeToast,
    "aria-label": ariaLabel
  }, "\u2716");
}

CloseButton.propTypes = {
  closeToast: _propTypes.default.func,
  arialLabel: _propTypes.default.string
};
CloseButton.defaultProps = {
  ariaLabel: 'close'
};
var _default = CloseButton;
exports.default = _default;
});

unwrapExports(CloseButton_1);

var cssTransition = createCommonjsModule(function (module, exports) {

exports.__esModule = true;
exports.default = _default;

var _react = _interopRequireDefault(React);

var _Transition = _interopRequireDefault(Transition_1);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var noop = function noop() {};

function _default(_ref) {
  var enter = _ref.enter,
      exit = _ref.exit,
      _ref$duration = _ref.duration,
      duration = _ref$duration === void 0 ? 750 : _ref$duration,
      _ref$appendPosition = _ref.appendPosition,
      appendPosition = _ref$appendPosition === void 0 ? false : _ref$appendPosition;
  return function Animation(_ref2) {
    var children = _ref2.children,
        position = _ref2.position,
        preventExitTransition = _ref2.preventExitTransition,
        props = _objectWithoutPropertiesLoose(_ref2, ["children", "position", "preventExitTransition"]);

    var enterClassName = appendPosition ? enter + "--" + position : enter;
    var exitClassName = appendPosition ? exit + "--" + position : exit;
    var enterDuration, exitDuration;

    if (Array.isArray(duration) && duration.length === 2) {
      enterDuration = duration[0];
      exitDuration = duration[1];
    } else {
      enterDuration = exitDuration = duration;
    }

    var onEnter = function onEnter(node) {
      node.classList.add(enterClassName);
      node.style.animationFillMode = 'forwards';
      node.style.animationDuration = enterDuration * 0.001 + "s";
    };

    var onEntered = function onEntered(node) {
      node.classList.remove(enterClassName);
      node.style.cssText = '';
    };

    var onExit = function onExit(node) {
      node.classList.add(exitClassName);
      node.style.animationFillMode = 'forwards';
      node.style.animationDuration = exitDuration * 0.001 + "s";
    };

    return _react.default.createElement(_Transition.default, _extends({}, props, {
      timeout: preventExitTransition ? 0 : {
        enter: enterDuration,
        exit: exitDuration
      },
      onEnter: onEnter,
      onEntered: onEntered,
      onExit: preventExitTransition ? noop : onExit
    }), children);
  };
}
});

unwrapExports(cssTransition);

var Transitions = createCommonjsModule(function (module, exports) {

exports.__esModule = true;
exports.Flip = exports.Zoom = exports.Slide = exports.Bounce = void 0;

var _cssTransition = _interopRequireDefault(cssTransition);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Bounce = (0, _cssTransition.default)({
  enter: 'Toastify__bounce-enter',
  exit: 'Toastify__bounce-exit',
  appendPosition: true
});
exports.Bounce = Bounce;
var Slide = (0, _cssTransition.default)({
  enter: 'Toastify__slide-enter',
  exit: 'Toastify__slide-exit',
  duration: [450, 750],
  appendPosition: true
});
exports.Slide = Slide;
var Zoom = (0, _cssTransition.default)({
  enter: 'Toastify__zoom-enter',
  exit: 'Toastify__zoom-exit'
});
exports.Zoom = Zoom;
var Flip = (0, _cssTransition.default)({
  enter: 'Toastify__flip-enter',
  exit: 'Toastify__flip-exit'
});
exports.Flip = Flip;
});

unwrapExports(Transitions);
var Transitions_1 = Transitions.Flip;
var Transitions_2 = Transitions.Zoom;
var Transitions_3 = Transitions.Slide;
var Transitions_4 = Transitions.Bounce;

var eventManager_1 = createCommonjsModule(function (module, exports) {

exports.__esModule = true;
exports.default = void 0;
var eventManager = {
  list: new Map(),
  on: function on(event, callback) {
    this.list.has(event) || this.list.set(event, []);
    this.list.get(event).push(callback);
    return this;
  },
  off: function off(event) {
    this.list.delete(event);
    return this;
  },
  emit: function emit(event) {
    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      args[_key - 1] = arguments[_key];
    }

    if (!this.list.has(event)) {
      return false;
    }

    this.list.get(event).forEach(function (callback) {
      return setTimeout(function () {
        return callback.call.apply(callback, [null].concat(args));
      }, 0);
    });
    return true;
  }
};
var _default = eventManager;
exports.default = _default;
});

unwrapExports(eventManager_1);

var ToastContainer_1 = createCommonjsModule(function (module, exports) {

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireWildcard(React);

var _propTypes = _interopRequireDefault(PropTypes);

var _classnames = _interopRequireDefault(classnames);

var _TransitionGroup = _interopRequireDefault(TransitionGroup_1);

var _Toast = _interopRequireDefault(Toast_1);

var _CloseButton = _interopRequireDefault(CloseButton_1);





var _eventManager = _interopRequireDefault(eventManager_1);



function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var ToastContainer =
/*#__PURE__*/
function (_Component) {
  _inheritsLoose(ToastContainer, _Component);

  function ToastContainer() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
    _this.state = {
      toast: []
    };
    _this.toastKey = 1;
    _this.collection = {};

    _this.isToastActive = function (id) {
      return _this.state.toast.indexOf(id) !== -1;
    };

    return _this;
  }

  var _proto = ToastContainer.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var _this2 = this;

    _eventManager.default.on(constant$2.ACTION.SHOW, function (content, options) {
      return _this2.show(content, options);
    }).on(constant$2.ACTION.CLEAR, function (id) {
      return !id ? _this2.clear() : _this2.removeToast(id);
    }).emit(constant$2.ACTION.DID_MOUNT, this);
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    _eventManager.default.off(constant$2.ACTION.SHOW).off(constant$2.ACTION.CLEAR).emit(constant$2.ACTION.WILL_UNMOUNT);
  };

  _proto.removeToast = function removeToast(id) {
    this.setState({
      toast: this.state.toast.filter(function (v) {
        return v !== id;
      })
    }, this.dispatchChange);
  };

  _proto.dispatchChange = function dispatchChange() {
    _eventManager.default.emit(constant$2.ACTION.ON_CHANGE, this.state.toast.length);
  };

  _proto.makeCloseButton = function makeCloseButton(toastClose, toastId, type) {
    var _this3 = this;

    var closeButton = this.props.closeButton;

    if ((0, _react.isValidElement)(toastClose) || toastClose === false) {
      closeButton = toastClose;
    }

    return closeButton === false ? false : (0, _react.cloneElement)(closeButton, {
      closeToast: function closeToast() {
        return _this3.removeToast(toastId);
      },
      type: type
    });
  };

  _proto.getAutoCloseDelay = function getAutoCloseDelay(toastAutoClose) {
    return toastAutoClose === false || (0, propValidator.isValidDelay)(toastAutoClose) ? toastAutoClose : this.props.autoClose;
  };

  _proto.canBeRendered = function canBeRendered(content) {
    return (0, _react.isValidElement)(content) || typeof content === 'string' || typeof content === 'number' || typeof content === 'function';
  };

  _proto.parseClassName = function parseClassName(prop) {
    if (typeof prop === 'string') {
      return prop;
    } else if (prop !== null && typeof prop === 'object' && 'toString' in prop) {
      return prop.toString();
    }

    return null;
  };

  _proto.show = function show(content, options) {
    var _this4 = this,
        _extends2;

    if (!this.canBeRendered(content)) {
      throw new Error("The element you provided cannot be rendered. You provided an element of type " + typeof content);
    }

    var toastId = options.toastId;

    var closeToast = function closeToast() {
      return _this4.removeToast(toastId);
    };

    var toastOptions = {
      id: toastId,
      // ⚠️ if no options.key, this.toastKey - 1 is assigned
      key: options.key || this.toastKey++,
      type: options.type,
      closeToast: closeToast,
      updateId: options.updateId,
      rtl: this.props.rtl,
      position: options.position || this.props.position,
      transition: options.transition || this.props.transition,
      className: this.parseClassName(options.className || this.props.toastClassName),
      bodyClassName: this.parseClassName(options.bodyClassName || this.props.bodyClassName),
      closeButton: this.makeCloseButton(options.closeButton, toastId, options.type),
      pauseOnHover: typeof options.pauseOnHover === 'boolean' ? options.pauseOnHover : this.props.pauseOnHover,
      pauseOnFocusLoss: typeof options.pauseOnFocusLoss === 'boolean' ? options.pauseOnFocusLoss : this.props.pauseOnFocusLoss,
      draggable: typeof options.draggable === 'boolean' ? options.draggable : this.props.draggable,
      draggablePercent: typeof options.draggablePercent === 'number' && !isNaN(options.draggablePercent) ? options.draggablePercent : this.props.draggablePercent,
      closeOnClick: typeof options.closeOnClick === 'boolean' ? options.closeOnClick : this.props.closeOnClick,
      progressClassName: this.parseClassName(options.progressClassName || this.props.progressClassName),
      progressStyle: this.props.progressStyle,
      autoClose: this.getAutoCloseDelay(options.autoClose),
      hideProgressBar: typeof options.hideProgressBar === 'boolean' ? options.hideProgressBar : this.props.hideProgressBar,
      progress: parseFloat(options.progress),
      isProgressDone: options.isProgressDone
    };
    typeof options.onOpen === 'function' && (toastOptions.onOpen = options.onOpen);
    typeof options.onClose === 'function' && (toastOptions.onClose = options.onClose); // add closeToast function to react component only

    if ((0, _react.isValidElement)(content) && typeof content.type !== 'string' && typeof content.type !== 'number') {
      content = (0, _react.cloneElement)(content, {
        closeToast: closeToast
      });
    } else if (typeof content === 'function') {
      content = content({
        closeToast: closeToast
      });
    }

    this.collection = _extends({}, this.collection, (_extends2 = {}, _extends2[toastId] = {
      position: toastOptions.position,
      options: toastOptions,
      content: content
    }, _extends2));
    this.setState({
      toast: (toastOptions.updateId ? _toConsumableArray(this.state.toast) : _toConsumableArray(this.state.toast).concat([toastId])).filter(function (id) {
        return id !== options.staleToastId;
      })
    }, this.dispatchChange);
  };

  _proto.makeToast = function makeToast(content, options) {
    return _react.default.createElement(_Toast.default, _extends({}, options, {
      isDocumentHidden: this.state.isDocumentHidden,
      key: "toast-" + options.key
    }), content);
  };

  _proto.clear = function clear() {
    this.setState({
      toast: []
    });
  };

  _proto.renderToast = function renderToast() {
    var _this5 = this;

    var toastToRender = {};
    var _this$props = this.props,
        className = _this$props.className,
        style = _this$props.style,
        newestOnTop = _this$props.newestOnTop;
    var collection = newestOnTop ? Object.keys(this.collection).reverse() : Object.keys(this.collection); // group toast by position

    collection.forEach(function (toastId) {
      var _this5$collection$toa = _this5.collection[toastId],
          position = _this5$collection$toa.position,
          options = _this5$collection$toa.options,
          content = _this5$collection$toa.content;
      toastToRender[position] || (toastToRender[position] = []);

      if (_this5.state.toast.indexOf(options.id) !== -1) {
        toastToRender[position].push(_this5.makeToast(content, options));
      } else {
        toastToRender[position].push(null);
        delete _this5.collection[toastId];
      }
    });
    return Object.keys(toastToRender).map(function (position) {
      var disablePointer = toastToRender[position].length === 1 && toastToRender[position][0] === null;
      var props = {
        className: (0, _classnames.default)('Toastify__toast-container', "Toastify__toast-container--" + position, {
          'Toastify__toast-container--rtl': _this5.props.rtl
        }, _this5.parseClassName(className)),
        style: disablePointer ? _extends({}, style, {
          pointerEvents: 'none'
        }) : _extends({}, style)
      };
      return _react.default.createElement(_TransitionGroup.default, _extends({}, props, {
        key: "container-" + position
      }), toastToRender[position]);
    });
  };

  _proto.render = function render() {
    return _react.default.createElement("div", {
      className: "Toastify"
    }, this.renderToast());
  };

  return ToastContainer;
}(_react.Component);

ToastContainer.propTypes = {
  /**
   * Set toast position
   */
  position: _propTypes.default.oneOf((0, propValidator.objectValues)(constant$2.POSITION)),

  /**
   * Disable or set autoClose delay
   */
  autoClose: propValidator.falseOrDelay,

  /**
   * Disable or set a custom react element for the close button
   */
  closeButton: propValidator.falseOrElement,

  /**
   * Hide or not progress bar when autoClose is enabled
   */
  hideProgressBar: _propTypes.default.bool,

  /**
   * Pause toast duration on hover
   */
  pauseOnHover: _propTypes.default.bool,

  /**
   * Dismiss toast on click
   */
  closeOnClick: _propTypes.default.bool,

  /**
   * Newest on top
   */
  newestOnTop: _propTypes.default.bool,

  /**
   * An optional className
   */
  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),

  /**
   * An optional style
   */
  style: _propTypes.default.object,

  /**
   * An optional className for the toast
   */
  toastClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),

  /**
   * An optional className for the toast body
   */
  bodyClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),

  /**
   * An optional className for the toast progress bar
   */
  progressClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),

  /**
   * An optional style for the toast progress bar
   */
  progressStyle: _propTypes.default.object,

  /**
   * Define enter and exit transition using react-transition-group
   */
  transition: _propTypes.default.func,

  /**
   * Support rtl display
   */
  rtl: _propTypes.default.bool,

  /**
   * Allow toast to be draggable
   */
  draggable: _propTypes.default.bool,

  /**
   * The percentage of the toast's width it takes for a drag to dismiss a toast
   */
  draggablePercent: _propTypes.default.number,

  /**
   * Pause the toast on focus loss
   */
  pauseOnFocusLoss: _propTypes.default.bool
};
ToastContainer.defaultProps = {
  position: constant$2.POSITION.TOP_RIGHT,
  transition: Transitions.Bounce,
  rtl: false,
  autoClose: 5000,
  hideProgressBar: false,
  closeButton: _react.default.createElement(_CloseButton.default, null),
  pauseOnHover: true,
  pauseOnFocusLoss: true,
  closeOnClick: true,
  newestOnTop: false,
  draggable: true,
  draggablePercent: 80,
  className: null,
  style: null,
  toastClassName: null,
  bodyClassName: null,
  progressClassName: null,
  progressStyle: null
};
var _default = ToastContainer;
exports.default = _default;
});

unwrapExports(ToastContainer_1);

var toast_1 = createCommonjsModule(function (module, exports) {

exports.__esModule = true;
exports.default = void 0;

var _eventManager = _interopRequireDefault(eventManager_1);



function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var container = null;
var queue = [];

var noop = function noop() {
  return false;
};
/**
 * Merge provided options with the defaults settings and generate the toastId
 */


function mergeOptions(options, type) {
  return _extends({}, options, {
    type: type,
    toastId: getToastId(options)
  });
}
/**
 * Generate a random toastId
 */


function generateToastId() {
  return (Math.random().toString(36) + Date.now().toString(36)).substr(2, 10);
}
/**
 * Generate the toastId either automatically or by provided toastId
 */


function getToastId(options) {
  if (options && (typeof options.toastId === 'string' || typeof options.toastId === 'number' && !isNaN(options.toastId))) {
    return options.toastId;
  }

  return generateToastId();
}
/**
 * Dispatch toast. If the container is not mounted, the toast is enqueued
 */


function emitEvent(content, options) {
  if (container !== null) {
    _eventManager.default.emit(constant$2.ACTION.SHOW, content, options);
  } else {
    queue.push({
      action: constant$2.ACTION.SHOW,
      content: content,
      options: options
    });
  }

  return options.toastId;
}

var toast = _extends(function (content, options) {
  return emitEvent(content, mergeOptions(options, options && options.type || constant$2.TYPE.DEFAULT));
}, {
  success: function success(content, options) {
    return emitEvent(content, mergeOptions(options, constant$2.TYPE.SUCCESS));
  },
  info: function info(content, options) {
    return emitEvent(content, mergeOptions(options, constant$2.TYPE.INFO));
  },
  warn: function warn(content, options) {
    return emitEvent(content, mergeOptions(options, constant$2.TYPE.WARNING));
  },
  warning: function warning(content, options) {
    return emitEvent(content, mergeOptions(options, constant$2.TYPE.WARNING));
  },
  error: function error(content, options) {
    return emitEvent(content, mergeOptions(options, constant$2.TYPE.ERROR));
  },
  dismiss: function dismiss(id) {
    if (id === void 0) {
      id = null;
    }

    return container && _eventManager.default.emit(constant$2.ACTION.CLEAR, id);
  },
  isActive: noop,
  update: function update(toastId, options) {
    setTimeout(function () {
      if (container && typeof container.collection[toastId] !== 'undefined') {
        var _container$collection = container.collection[toastId],
            oldOptions = _container$collection.options,
            oldContent = _container$collection.content;

        var nextOptions = _extends({}, oldOptions, options, {
          toastId: options.toastId || toastId
        });

        if (!options.toastId || options.toastId === toastId) {
          nextOptions.updateId = generateToastId();
        } else {
          nextOptions.staleToastId = toastId;
        }

        var content = typeof nextOptions.render !== 'undefined' ? nextOptions.render : oldContent;
        delete nextOptions.render;
        emitEvent(content, nextOptions);
      }
    }, 0);
  },
  done: function done(id, progress) {
    if (progress === void 0) {
      progress = 1;
    }

    toast.update(id, {
      progress: progress,
      isProgressDone: true
    });
  },
  onChange: function onChange(callback) {
    if (typeof callback === 'function') {
      _eventManager.default.on(constant$2.ACTION.ON_CHANGE, callback);
    }
  },
  POSITION: constant$2.POSITION,
  TYPE: constant$2.TYPE
});
/**
 * Wait until the ToastContainer is mounted to dispatch the toast
 * and attach isActive method
 */


_eventManager.default.on(constant$2.ACTION.DID_MOUNT, function (containerInstance) {
  container = containerInstance;

  toast.isActive = function (id) {
    return container.isToastActive(id);
  };

  queue.forEach(function (item) {
    _eventManager.default.emit(item.action, item.content, item.options);
  });
  queue = [];
}).on(constant$2.ACTION.WILL_UNMOUNT, function () {
  container = null;
  toast.isActive = noop;
});

var _default = toast;
exports.default = _default;
});

unwrapExports(toast_1);

var lib = createCommonjsModule(function (module, exports) {

exports.__esModule = true;

var _ToastContainer = _interopRequireDefault(ToastContainer_1);

exports.ToastContainer = _ToastContainer.default;



exports.Bounce = Transitions.Bounce;
exports.Slide = Transitions.Slide;
exports.Zoom = Transitions.Zoom;
exports.Flip = Transitions.Flip;



exports.ToastPosition = constant$2.POSITION;
exports.ToastType = constant$2.TYPE;

var _toast = _interopRequireDefault(toast_1);

exports.toast = _toast.default;

var _cssTransition = _interopRequireDefault(cssTransition);

exports.cssTransition = _cssTransition.default;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
});

unwrapExports(lib);
var lib_1 = lib.ToastContainer;
var lib_2 = lib.Bounce;
var lib_3 = lib.Slide;
var lib_4 = lib.Zoom;
var lib_5 = lib.Flip;
var lib_6 = lib.ToastPosition;
var lib_7 = lib.ToastType;
var lib_8 = lib.toast;
var lib_9 = lib.cssTransition;

function _templateObject$Y() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\n\twidth: 60px;\n\theight: 60px;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: 0;\n\n\tbackground: ", ";\n"]);

  _templateObject$Y = function _templateObject() {
    return data;
  };

  return data;
}
var ToastIconWrapper = styled.div(_templateObject$Y(), function (_ref) {
  var bgColor = _ref.bgColor;
  return bgColor;
});
ToastIconWrapper.displayName = 'ToastIconWrapper';

var ToastIcon = function ToastIcon(_ref2) {
  var bgColor = _ref2.bgColor,
      icon = _ref2.icon,
      size = _ref2.size,
      color = _ref2.color,
      props = objectWithoutPropertiesLoose(_ref2, ["bgColor", "icon", "size", "color"]);

  return React.createElement(ToastIconWrapper, _extends_1({
    bgColor: bgColor
  }, props), React.createElement(Icon$1, {
    icon: icon,
    size: size,
    color: color
  }));
};

ToastIcon.defaultProps = {
  bgColor: theme.toast.successColor,
  size: 'big',
  color: 'white'
};
ToastIcon.propTypes = {
  bgColor: PropTypes.string,
  icon: PropTypes.oneOf(IconName).isRequired,
  size: PropTypes.string,
  color: PropTypes.string
};
ToastIcon.displayName = 'ToastIcon';

function _templateObject2$o() {
  var data = taggedTemplateLiteralLoose(["\n\tpadding-left: 16px;\n\n\tcolor: ", ";\n\tfont-size: 13px;\n"]);

  _templateObject2$o = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$Z() {
  var data = taggedTemplateLiteralLoose(["\n\tpadding: 8px 16px;\n\n\tcolor: ", ";\n\tfont-size: 15px;\n\tfont-weight: bold;\n"]);

  _templateObject$Z = function _templateObject() {
    return data;
  };

  return data;
}
var ToastTitle = styled.div(_templateObject$Z(), function (_ref) {
  var theme = _ref.theme;
  return theme.toast.titleColor;
});
var ToastMessage = styled.div(_templateObject2$o(), function (_ref2) {
  var theme = _ref2.theme;
  return theme.toast.messageColor;
});

var ToastBody = function ToastBody(_ref3) {
  var title = _ref3.title,
      message = _ref3.message;
  return React.createElement("div", null, React.createElement(ToastTitle, null, title), React.createElement(ToastMessage, null, message));
};

ToastBody.defaultProps = {
  title: ''
};
ToastBody.propTypes = {
  /** Text that will show on top in the body */
  title: PropTypes.string,

  /** Text that will show on bottom in the body, bellow title if exists */
  message: PropTypes.string.isRequired
};
ToastBody.displayName = 'ToastBody';

function _templateObject$_() {
  var data = taggedTemplateLiteralLoose(["\n\t.Toastify__toast {\n\t\tmin-height: 0;\n\t\tpadding: 0;\n\t}\n\n\t.Toastify__toast-body {\n\t\tdisplay: flex;\n\t\tmargin: 0;\n\t}\n\n\t.Toastify__close-button.Toastify__close-button--default .qube {\n\t\twidth: 300px !important;\n\t\theight: 60px !important;\n\n\t\tbackground: transparent;\n\t\tborder-radius: 4px;\n\n\t\tbox-shadow: 0 0 3px rgba(0, 0, 0, 0.25);\n\t}\n"]);

  _templateObject$_ = function _templateObject() {
    return data;
  };

  return data;
}
var ToastWrapper = styled(lib_1)(_templateObject$_());
ToastWrapper.defaultProps = {
  suppressClassNameWarning: true
};
ToastWrapper.displayName = 'ToastWrapper';

var Toast$1 = function Toast(_ref) {
  var bgColor = _ref.bgColor,
      icon = _ref.icon,
      title = _ref.title,
      message = _ref.message,
      size = _ref.size,
      color = _ref.color;
  return React.createElement(Fragment, null, React.createElement(ToastIcon, {
    bgColor: bgColor,
    icon: icon,
    size: size,
    color: color
  }), React.createElement(ToastBody, {
    title: title,
    message: message
  }));
};

Toast$1.defaultProps = {
  bgColor: theme.toast.successColor,
  size: 'big',
  title: '',
  color: 'white'
};
Toast$1.propTypes = {
  bgColor: PropTypes.string,
  icon: PropTypes.oneOf(IconName).isRequired,
  title: PropTypes.string,
  message: PropTypes.string.isRequired,
  size: PropTypes.string,
  color: PropTypes.string
};
Toast$1.displayName = 'Toast';

var notify = function notify(bgColor, icon, title, message, size, color, options) {
  lib_8(React.createElement(Toast$1, {
    bgColor: bgColor,
    icon: icon,
    title: title,
    message: message,
    size: size,
    color: color
  }), _extends_1({}, options));
};

var notifyError = function notifyError(title, message, options) {
  lib_8(React.createElement(Toast$1, {
    bgColor: theme.toast.errorColor,
    icon: "error",
    title: title,
    message: message,
    size: "big",
    color: "white"
  }), _extends_1({
    hideProgressBar: true,
    closeButton: false,
    autoClose: 5000,
    pauseOnFocusLoss: false,
    position: 'bottom-right'
  }, options));
};

var notifySuccess = function notifySuccess(title, message, options) {
  lib_8(React.createElement(Toast$1, {
    bgColor: theme.toast.successColor,
    icon: "success",
    title: title,
    message: message,
    size: "big",
    color: "white"
  }), _extends_1({
    hideProgressBar: true,
    closeButton: false,
    autoClose: 5000,
    pauseOnFocusLoss: false,
    position: 'bottom-right'
  }, options));
};

var notifyWarning = function notifyWarning(title, message, options) {
  lib_8(React.createElement(Toast$1, {
    bgColor: theme.toast.warningColor,
    icon: "warning",
    title: title,
    message: message,
    size: "big",
    color: "white"
  }), _extends_1({
    hideProgressBar: true,
    closeButton: false,
    autoClose: 5000,
    pauseOnFocusLoss: false,
    position: 'bottom-right'
  }, options));
};

function _templateObject$10() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\twidth: ", ";\n\theight: ", ";\n\tmargin: 0 auto;\n"]);

  _templateObject$10 = function _templateObject() {
    return data;
  };

  return data;
}
var CenteredGridStyled = styled.div(_templateObject$10(), function (_ref) {
  var width = _ref.width;
  return width.toString().indexOf('%') !== -1 ? width : width + "px";
}, function (_ref2) {
  var height = _ref2.height;
  return height.toString().indexOf('%') !== -1 ? height : height + "px";
});
/**
 * @param children
 * @param props height and width
 */

var CenteredGrid = function CenteredGrid(_ref3) {
  var children = _ref3.children,
      props = objectWithoutPropertiesLoose(_ref3, ["children"]);

  return React.createElement(CenteredGridStyled, props, React.createElement(Grid, {
    verticalAlign: "middle",
    style: {
      height: '100%'
    }
  }, React.createElement(Grid.Row, null, React.createElement(Grid.Column, null, children))));
};

CenteredGrid.defaultProps = {
  width: '100%',
  height: '100%'
};
CenteredGrid.propTypes = {
  /** children nodes */
  children: PropTypes.node.isRequired,

  /** width in pixels or percentage ('100' - pixels; '100%' - percentage) */
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  /** height in pixels or percentage ('100' - pixels; '100%' - percentage) */
  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};

function _templateObject$11() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: relative;\n\tdisplay: block;\n\twidth: 100%;\n\tbox-sizing: border-box;\n\tpadding: 20px;\n\tmargin-bottom: 17px;\n\tborder: thin solid ", ";\n\tborder-radius: 4px;\n"]);

  _templateObject$11 = function _templateObject() {
    return data;
  };

  return data;
}
var Section = styled.div(_templateObject$11(), theme.colors.strokeGray);
Section.displayName = 'Section';

function _templateObject2$p() {
  var data = taggedTemplateLiteralLoose(["\n\tcolor: ", " !important;\n\tcursor: ", ";\n\tuser-select: ", ";\n\n\t:hover {\n\t\ttext-decoration: ", ";\n\t}\n"]);

  _templateObject2$p = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$12() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline;\n\n\t:after {\n\t\tcontent: ' > ';\n\t}\n"]);

  _templateObject$12 = function _templateObject() {
    return data;
  };

  return data;
}

var Crumb = function Crumb(_ref) {
  var crumbIndex = _ref.crumbIndex,
      crumbs = _ref.crumbs,
      _onClick = _ref.onClick,
      children = _ref.children,
      props = objectWithoutPropertiesLoose(_ref, ["crumbIndex", "crumbs", "onClick", "children"]);

  var newPath = [''].concat(crumbs.slice(0, crumbIndex + 1)).join('/');
  return React.createElement(StyledCrumb, {
    key: newPath
  }, React.createElement(StyledCrumbSpan, _extends_1({
    index: crumbIndex,
    onClick: function onClick() {
      return crumbIndex !== 0 && _onClick(newPath);
    }
  }, props), children));
};

Crumb.displayName = 'Crumb';
Crumb.propTypes = {
  /** specific location of the breadcrumb in the crumbs array */
  crumbIndex: PropTypes.number.isRequired,

  /** Array of crumb keys to be translated */
  crumbs: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,

  /** onClick crumb handler */
  onClick: PropTypes.func.isRequired,

  /** children nodes */
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};
var StyledCrumb = styled.span(_templateObject$12());
StyledCrumb.displayName = 'StyledCrumb';
var StyledCrumbSpan = styled.a(_templateObject2$p(), function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.gray;
}, function (_ref3) {
  var index = _ref3.index;
  return index !== 0 && 'pointer';
}, function (_ref4) {
  var index = _ref4.index;
  return index === 0 && 'none';
}, function (_ref5) {
  var index = _ref5.index;
  return index !== 0 && 'underline';
});
StyledCrumbSpan.displayName = 'StyledCrumbSpan';

function _templateObject2$q() {
  var data = taggedTemplateLiteralLoose(["\n\tuser-select: none;\n"]);

  _templateObject2$q = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$13() {
  var data = taggedTemplateLiteralLoose(["\n\tcolor: ", " !important;\n\tfont-size: 11px;\n"]);

  _templateObject$13 = function _templateObject() {
    return data;
  };

  return data;
}

var isNotNumber = function isNotNumber(segment) {
  return Number.isNaN(Number(segment));
};

var BreadCrumbs = function BreadCrumbs(_ref) {
  var path = _ref.path,
      finalItem = _ref.finalItem,
      onClick = _ref.onClick,
      translationFunction = _ref.translationFunction,
      props = objectWithoutPropertiesLoose(_ref, ["path", "finalItem", "onClick", "translationFunction"]);

  var items = path.split('/').filter(function (item) {
    return item;
  });
  var lastItem = items.length > 1 ? items[items.length - 1] : null;
  items = items.slice(0, items.length - 1);
  return React.createElement(Text, _extends_1({}, props, {
    color: theme.colors.gray,
    size: "sm"
  }), items.filter(isNotNumber).map(function (crumb, index$$1) {
    return React.createElement(Crumb, _extends_1({
      key: crumb,
      crumbIndex: index$$1,
      crumbs: items,
      onClick: onClick
    }, props), translationFunction(crumb));
  }), lastItem && React.createElement(NoUserSelect, null, finalItem || translationFunction(lastItem)));
};

BreadCrumbs.defaultProps = {
  finalItem: ''
};
BreadCrumbs.displayName = 'BreadCrumbs';
BreadCrumbs.propTypes = {
  /** Path of the page: with react router -> props.location.pathname */
  path: PropTypes.string.isRequired,

  /** Custom Name for the last crumb name */
  finalItem: PropTypes.string,

  /** Action for the crumb click */
  onClick: PropTypes.func.isRequired,

  /** translation function applied to reach crumb item */
  translationFunction: PropTypes.func.isRequired
};
var BreadCrumbsStyled = styled.p(_templateObject$13(), function (_ref2) {
  var theme$$1 = _ref2.theme;
  return theme$$1.colors.gray;
});
BreadCrumbsStyled.displayName = 'BreadCrumbsStyled';
var NoUserSelect = styled.span(_templateObject2$q());

var lottie = createCommonjsModule(function (module) {
(typeof navigator !== "undefined") && (function(root, factory) {
    if (module.exports) {
        module.exports = factory(root);
    } else {
        root.lottie = factory(root);
        root.bodymovin = root.lottie;
    }
}((window || {}), function(window) {
    var svgNS = "http://www.w3.org/2000/svg";

var locationHref = '';

var initialDefaultFrame = -999999;

var subframeEnabled = true;
var expressionsPlugin;
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
var bm_pow = Math.pow;
var bm_sqrt = Math.sqrt;
var bm_floor = Math.floor;
var bm_max = Math.max;
var bm_min = Math.min;

var BMMath = {};
(function(){
    var propertyNames = ["abs", "acos", "acosh", "asin", "asinh", "atan", "atanh", "atan2", "ceil", "cbrt", "expm1", "clz32", "cos", "cosh", "exp", "floor", "fround", "hypot", "imul", "log", "log1p", "log2", "log10", "max", "min", "pow", "random", "round", "sign", "sin", "sinh", "sqrt", "tan", "tanh", "trunc", "E", "LN10", "LN2", "LOG10E", "LOG2E", "PI", "SQRT1_2", "SQRT2"];
    var i, len = propertyNames.length;
    for(i=0;i<len;i+=1){
        BMMath[propertyNames[i]] = Math[propertyNames[i]];
    }
}());

function ProjectInterface(){return {};}

BMMath.random = Math.random;
BMMath.abs = function(val){
    var tOfVal = typeof val;
    if(tOfVal === 'object' && val.length){
        var absArr = createSizedArray(val.length);
        var i, len = val.length;
        for(i=0;i<len;i+=1){
            absArr[i] = Math.abs(val[i]);
        }
        return absArr;
    }
    return Math.abs(val);

};
var defaultCurveSegments = 150;
var degToRads = Math.PI/180;
var roundCorner = 0.5519;

function styleDiv(element){
    element.style.position = 'absolute';
    element.style.top = 0;
    element.style.left = 0;
    element.style.display = 'block';
    element.style.transformOrigin = element.style.webkitTransformOrigin = '0 0';
    element.style.backfaceVisibility  = element.style.webkitBackfaceVisibility = 'visible';
    element.style.transformStyle = element.style.webkitTransformStyle = element.style.mozTransformStyle = "preserve-3d";
}

function BMEnterFrameEvent(n,c,t,d){
    this.type = n;
    this.currentTime = c;
    this.totalTime = t;
    this.direction = d < 0 ? -1:1;
}

function BMCompleteEvent(n,d){
    this.type = n;
    this.direction = d < 0 ? -1:1;
}

function BMCompleteLoopEvent(n,c,t,d){
    this.type = n;
    this.currentLoop = t;
    this.totalLoops = c;
    this.direction = d < 0 ? -1:1;
}

function BMSegmentStartEvent(n,f,t){
    this.type = n;
    this.firstFrame = f;
    this.totalFrames = t;
}

function BMDestroyEvent(n,t){
    this.type = n;
    this.target = t;
}

var createElementID = (function(){
    var _count = 0;
    return function createID() {
        return '__lottie_element_' + ++_count
    }
}());

function HSVtoRGB(h, s, v) {
    var r, g, b, i, f, p, q, t;
    i = Math.floor(h * 6);
    f = h * 6 - i;
    p = v * (1 - s);
    q = v * (1 - f * s);
    t = v * (1 - (1 - f) * s);
    switch (i % 6) {
        case 0: r = v; g = t; b = p; break;
        case 1: r = q; g = v; b = p; break;
        case 2: r = p; g = v; b = t; break;
        case 3: r = p; g = q; b = v; break;
        case 4: r = t; g = p; b = v; break;
        case 5: r = v; g = p; b = q; break;
    }
    return [ r,
        g,
         b ];
}

function RGBtoHSV(r, g, b) {
    var max = Math.max(r, g, b), min = Math.min(r, g, b),
        d = max - min,
        h,
        s = (max === 0 ? 0 : d / max),
        v = max / 255;

    switch (max) {
        case min: h = 0; break;
        case r: h = (g - b) + d * (g < b ? 6: 0); h /= 6 * d; break;
        case g: h = (b - r) + d * 2; h /= 6 * d; break;
        case b: h = (r - g) + d * 4; h /= 6 * d; break;
    }

    return [
         h,
         s,
         v
    ];
}

function addSaturationToRGB(color,offset){
    var hsv = RGBtoHSV(color[0]*255,color[1]*255,color[2]*255);
    hsv[1] += offset;
    if (hsv[1] > 1) {
        hsv[1] = 1;
    }
    else if (hsv[1] <= 0) {
        hsv[1] = 0;
    }
    return HSVtoRGB(hsv[0],hsv[1],hsv[2]);
}

function addBrightnessToRGB(color,offset){
    var hsv = RGBtoHSV(color[0]*255,color[1]*255,color[2]*255);
    hsv[2] += offset;
    if (hsv[2] > 1) {
        hsv[2] = 1;
    }
    else if (hsv[2] < 0) {
        hsv[2] = 0;
    }
    return HSVtoRGB(hsv[0],hsv[1],hsv[2]);
}

function addHueToRGB(color,offset) {
    var hsv = RGBtoHSV(color[0]*255,color[1]*255,color[2]*255);
    hsv[0] += offset/360;
    if (hsv[0] > 1) {
        hsv[0] -= 1;
    }
    else if (hsv[0] < 0) {
        hsv[0] += 1;
    }
    return HSVtoRGB(hsv[0],hsv[1],hsv[2]);
}

var rgbToHex = (function(){
    var colorMap = [];
    var i;
    var hex;
    for(i=0;i<256;i+=1){
        hex = i.toString(16);
        colorMap[i] = hex.length == 1 ? '0' + hex : hex;
    }

    return function(r, g, b) {
        if(r<0){
            r = 0;
        }
        if(g<0){
            g = 0;
        }
        if(b<0){
            b = 0;
        }
        return '#' + colorMap[r] + colorMap[g] + colorMap[b];
    };
}());
function BaseEvent(){}
BaseEvent.prototype = {
	triggerEvent: function (eventName, args) {
	    if (this._cbs[eventName]) {
	        var len = this._cbs[eventName].length;
	        for (var i = 0; i < len; i++){
	            this._cbs[eventName][i](args);
	        }
	    }
	},
	addEventListener: function (eventName, callback) {
	    if (!this._cbs[eventName]){
	        this._cbs[eventName] = [];
	    }
	    this._cbs[eventName].push(callback);

		return function() {
			this.removeEventListener(eventName, callback);
		}.bind(this);
	},
	removeEventListener: function (eventName,callback){
	    if (!callback){
	        this._cbs[eventName] = null;
	    }else if(this._cbs[eventName]){
	        var i = 0, len = this._cbs[eventName].length;
	        while(i<len){
	            if(this._cbs[eventName][i] === callback){
	                this._cbs[eventName].splice(i,1);
	                i -=1;
	                len -= 1;
	            }
	            i += 1;
	        }
	        if(!this._cbs[eventName].length){
	            this._cbs[eventName] = null;
	        }
	    }
	}
};
var createTypedArray = (function(){
	function createRegularArray(type, len){
		var i = 0, arr = [], value;
		switch(type) {
			case 'int16':
			case 'uint8c':
				value = 1;
				break;
			default:
				value = 1.1;
				break;
		}
		for(i = 0; i < len; i += 1) {
			arr.push(value);
		}
		return arr;
	}
	function createTypedArray(type, len){
		if(type === 'float32') {
			return new Float32Array(len);
		} else if(type === 'int16') {
			return new Int16Array(len);
		} else if(type === 'uint8c') {
			return new Uint8ClampedArray(len);
		}
	}
	if(typeof Uint8ClampedArray === 'function' && typeof Float32Array === 'function') {
		return createTypedArray;
	} else {
		return createRegularArray;
	}
}());

function createSizedArray(len) {
	return Array.apply(null,{length:len});
}
function createNS(type) {
	//return {appendChild:function(){},setAttribute:function(){},style:{}}
	return document.createElementNS(svgNS, type);
}
function createTag(type) {
	//return {appendChild:function(){},setAttribute:function(){},style:{}}
	return document.createElement(type);
}
function DynamicPropertyContainer(){}DynamicPropertyContainer.prototype = {
	addDynamicProperty: function(prop) {
		if(this.dynamicProperties.indexOf(prop) === -1) {
	        this.dynamicProperties.push(prop);
	        this.container.addDynamicProperty(this);
	    	this._isAnimated = true;
	    }
	},
	iterateDynamicProperties: function(){
	    this._mdf = false;
	    var i, len = this.dynamicProperties.length;
	    for(i=0;i<len;i+=1){
	        this.dynamicProperties[i].getValue();
	        if(this.dynamicProperties[i]._mdf) {
	            this._mdf = true;
	        }
	    }
	},
	initDynamicPropertyContainer: function(container){
	    this.container = container;
	    this.dynamicProperties = [];
	    this._mdf = false;
	    this._isAnimated = false;
	}
};
var getBlendMode = (function() {

	var blendModeEnums = {
        0:'source-over',
        1:'multiply',
        2:'screen',
        3:'overlay',
        4:'darken',
        5:'lighten',
        6:'color-dodge',
        7:'color-burn',
        8:'hard-light',
        9:'soft-light',
        10:'difference',
        11:'exclusion',
        12:'hue',
        13:'saturation',
        14:'color',
        15:'luminosity'
    };

	return function(mode) {
		return blendModeEnums[mode] || '';
	}
}());
/*!
 Transformation Matrix v2.0
 (c) Epistemex 2014-2015
 www.epistemex.com
 By Ken Fyrstenberg
 Contributions by leeoniya.
 License: MIT, header required.
 */

/**
 * 2D transformation matrix object initialized with identity matrix.
 *
 * The matrix can synchronize a canvas context by supplying the context
 * as an argument, or later apply current absolute transform to an
 * existing context.
 *
 * All values are handled as floating point values.
 *
 * @param {CanvasRenderingContext2D} [context] - Optional context to sync with Matrix
 * @prop {number} a - scale x
 * @prop {number} b - shear y
 * @prop {number} c - shear x
 * @prop {number} d - scale y
 * @prop {number} e - translate x
 * @prop {number} f - translate y
 * @prop {CanvasRenderingContext2D|null} [context=null] - set or get current canvas context
 * @constructor
 */

var Matrix = (function(){

    var _cos = Math.cos;
    var _sin = Math.sin;
    var _tan = Math.tan;
    var _rnd = Math.round;

    function reset(){
        this.props[0] = 1;
        this.props[1] = 0;
        this.props[2] = 0;
        this.props[3] = 0;
        this.props[4] = 0;
        this.props[5] = 1;
        this.props[6] = 0;
        this.props[7] = 0;
        this.props[8] = 0;
        this.props[9] = 0;
        this.props[10] = 1;
        this.props[11] = 0;
        this.props[12] = 0;
        this.props[13] = 0;
        this.props[14] = 0;
        this.props[15] = 1;
        return this;
    }

    function rotate(angle) {
        if(angle === 0){
            return this;
        }
        var mCos = _cos(angle);
        var mSin = _sin(angle);
        return this._t(mCos, -mSin,  0, 0, mSin,  mCos, 0, 0, 0,  0,  1, 0, 0, 0, 0, 1);
    }

    function rotateX(angle){
        if(angle === 0){
            return this;
        }
        var mCos = _cos(angle);
        var mSin = _sin(angle);
        return this._t(1, 0, 0, 0, 0, mCos, -mSin, 0, 0, mSin,  mCos, 0, 0, 0, 0, 1);
    }

    function rotateY(angle){
        if(angle === 0){
            return this;
        }
        var mCos = _cos(angle);
        var mSin = _sin(angle);
        return this._t(mCos,  0,  mSin, 0, 0, 1, 0, 0, -mSin,  0,  mCos, 0, 0, 0, 0, 1);
    }

    function rotateZ(angle){
        if(angle === 0){
            return this;
        }
        var mCos = _cos(angle);
        var mSin = _sin(angle);
        return this._t(mCos, -mSin,  0, 0, mSin,  mCos, 0, 0, 0,  0,  1, 0, 0, 0, 0, 1);
    }

    function shear(sx,sy){
        return this._t(1, sy, sx, 1, 0, 0);
    }

    function skew(ax, ay){
        return this.shear(_tan(ax), _tan(ay));
    }

    function skewFromAxis(ax, angle){
        var mCos = _cos(angle);
        var mSin = _sin(angle);
        return this._t(mCos, mSin,  0, 0, -mSin,  mCos, 0, 0, 0,  0,  1, 0, 0, 0, 0, 1)
            ._t(1, 0,  0, 0, _tan(ax),  1, 0, 0, 0,  0,  1, 0, 0, 0, 0, 1)
            ._t(mCos, -mSin,  0, 0, mSin,  mCos, 0, 0, 0,  0,  1, 0, 0, 0, 0, 1);
        //return this._t(mCos, mSin, -mSin, mCos, 0, 0)._t(1, 0, _tan(ax), 1, 0, 0)._t(mCos, -mSin, mSin, mCos, 0, 0);
    }

    function scale(sx, sy, sz) {
        if(!sz && sz !== 0) {
            sz = 1;
        }
        if(sx === 1 && sy === 1 && sz === 1){
            return this;
        }
        return this._t(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1);
    }

    function setTransform(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p) {
        this.props[0] = a;
        this.props[1] = b;
        this.props[2] = c;
        this.props[3] = d;
        this.props[4] = e;
        this.props[5] = f;
        this.props[6] = g;
        this.props[7] = h;
        this.props[8] = i;
        this.props[9] = j;
        this.props[10] = k;
        this.props[11] = l;
        this.props[12] = m;
        this.props[13] = n;
        this.props[14] = o;
        this.props[15] = p;
        return this;
    }

    function translate(tx, ty, tz) {
        tz = tz || 0;
        if(tx !== 0 || ty !== 0 || tz !== 0){
            return this._t(1,0,0,0,0,1,0,0,0,0,1,0,tx,ty,tz,1);
        }
        return this;
    }

    function transform(a2, b2, c2, d2, e2, f2, g2, h2, i2, j2, k2, l2, m2, n2, o2, p2) {

        var _p = this.props;

        if(a2 === 1 && b2 === 0 && c2 === 0 && d2 === 0 && e2 === 0 && f2 === 1 && g2 === 0 && h2 === 0 && i2 === 0 && j2 === 0 && k2 === 1 && l2 === 0){
            //NOTE: commenting this condition because TurboFan deoptimizes code when present
            //if(m2 !== 0 || n2 !== 0 || o2 !== 0){
                _p[12] = _p[12] * a2 + _p[15] * m2;
                _p[13] = _p[13] * f2 + _p[15] * n2;
                _p[14] = _p[14] * k2 + _p[15] * o2;
                _p[15] = _p[15] * p2;
            //}
            this._identityCalculated = false;
            return this;
        }

        var a1 = _p[0];
        var b1 = _p[1];
        var c1 = _p[2];
        var d1 = _p[3];
        var e1 = _p[4];
        var f1 = _p[5];
        var g1 = _p[6];
        var h1 = _p[7];
        var i1 = _p[8];
        var j1 = _p[9];
        var k1 = _p[10];
        var l1 = _p[11];
        var m1 = _p[12];
        var n1 = _p[13];
        var o1 = _p[14];
        var p1 = _p[15];

        /* matrix order (canvas compatible):
         * ace
         * bdf
         * 001
         */
        _p[0] = a1 * a2 + b1 * e2 + c1 * i2 + d1 * m2;
        _p[1] = a1 * b2 + b1 * f2 + c1 * j2 + d1 * n2 ;
        _p[2] = a1 * c2 + b1 * g2 + c1 * k2 + d1 * o2 ;
        _p[3] = a1 * d2 + b1 * h2 + c1 * l2 + d1 * p2 ;

        _p[4] = e1 * a2 + f1 * e2 + g1 * i2 + h1 * m2 ;
        _p[5] = e1 * b2 + f1 * f2 + g1 * j2 + h1 * n2 ;
        _p[6] = e1 * c2 + f1 * g2 + g1 * k2 + h1 * o2 ;
        _p[7] = e1 * d2 + f1 * h2 + g1 * l2 + h1 * p2 ;

        _p[8] = i1 * a2 + j1 * e2 + k1 * i2 + l1 * m2 ;
        _p[9] = i1 * b2 + j1 * f2 + k1 * j2 + l1 * n2 ;
        _p[10] = i1 * c2 + j1 * g2 + k1 * k2 + l1 * o2 ;
        _p[11] = i1 * d2 + j1 * h2 + k1 * l2 + l1 * p2 ;

        _p[12] = m1 * a2 + n1 * e2 + o1 * i2 + p1 * m2 ;
        _p[13] = m1 * b2 + n1 * f2 + o1 * j2 + p1 * n2 ;
        _p[14] = m1 * c2 + n1 * g2 + o1 * k2 + p1 * o2 ;
        _p[15] = m1 * d2 + n1 * h2 + o1 * l2 + p1 * p2 ;

        this._identityCalculated = false;
        return this;
    }

    function isIdentity() {
        if(!this._identityCalculated){
            this._identity = !(this.props[0] !== 1 || this.props[1] !== 0 || this.props[2] !== 0 || this.props[3] !== 0 || this.props[4] !== 0 || this.props[5] !== 1 || this.props[6] !== 0 || this.props[7] !== 0 || this.props[8] !== 0 || this.props[9] !== 0 || this.props[10] !== 1 || this.props[11] !== 0 || this.props[12] !== 0 || this.props[13] !== 0 || this.props[14] !== 0 || this.props[15] !== 1);
            this._identityCalculated = true;
        }
        return this._identity;
    }

    function equals(matr){
        var i = 0;
        while (i < 16) {
            if(matr.props[i] !== this.props[i]) {
                return false;
            }
            i+=1;
        }
        return true;
    }

    function clone(matr){
        var i;
        for(i=0;i<16;i+=1){
            matr.props[i] = this.props[i];
        }
    }

    function cloneFromProps(props){
        var i;
        for(i=0;i<16;i+=1){
            this.props[i] = props[i];
        }
    }

    function applyToPoint(x, y, z) {

        return {
            x: x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],
            y: x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],
            z: x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14]
        };
        /*return {
         x: x * me.a + y * me.c + me.e,
         y: x * me.b + y * me.d + me.f
         };*/
    }
    function applyToX(x, y, z) {
        return x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12];
    }
    function applyToY(x, y, z) {
        return x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13];
    }
    function applyToZ(x, y, z) {
        return x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14];
    }

    function inversePoint(pt) {
        var determinant = this.props[0] * this.props[5] - this.props[1] * this.props[4];
        var a = this.props[5]/determinant;
        var b = - this.props[1]/determinant;
        var c = - this.props[4]/determinant;
        var d = this.props[0]/determinant;
        var e = (this.props[4] * this.props[13] - this.props[5] * this.props[12])/determinant;
        var f = - (this.props[0] * this.props[13] - this.props[1] * this.props[12])/determinant;
        return [pt[0] * a + pt[1] * c + e, pt[0] * b + pt[1] * d + f, 0];
    }

    function inversePoints(pts){
        var i, len = pts.length, retPts = [];
        for(i=0;i<len;i+=1){
            retPts[i] = inversePoint(pts[i]);
        }
        return retPts;
    }

    function applyToTriplePoints(pt1, pt2, pt3) {
        var arr = createTypedArray('float32', 6);
        if(this.isIdentity()) {
            arr[0] = pt1[0];
            arr[1] = pt1[1];
            arr[2] = pt2[0];
            arr[3] = pt2[1];
            arr[4] = pt3[0];
            arr[5] = pt3[1];
        } else {
            var p0 = this.props[0], p1 = this.props[1], p4 = this.props[4], p5 = this.props[5], p12 = this.props[12], p13 = this.props[13];
            arr[0] = pt1[0] * p0 + pt1[1] * p4 + p12;
            arr[1] = pt1[0] * p1 + pt1[1] * p5 + p13;
            arr[2] = pt2[0] * p0 + pt2[1] * p4 + p12;
            arr[3] = pt2[0] * p1 + pt2[1] * p5 + p13;
            arr[4] = pt3[0] * p0 + pt3[1] * p4 + p12;
            arr[5] = pt3[0] * p1 + pt3[1] * p5 + p13;
        }
        return arr;
    }

    function applyToPointArray(x,y,z){
        var arr;
        if(this.isIdentity()) {
            arr = [x,y,z];
        } else {
            arr = [x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14]];
        }
        return arr;
    }

    function applyToPointStringified(x, y) {
        if(this.isIdentity()) {
            return x + ',' + y;
        }
        var _p = this.props;
        return Math.round((x * _p[0] + y * _p[4] + _p[12]) * 100) / 100+','+ Math.round((x * _p[1] + y * _p[5] + _p[13]) * 100) / 100;
    }

    function toCSS() {
        //Doesn't make much sense to add this optimization. If it is an identity matrix, it's very likely this will get called only once since it won't be keyframed.
        /*if(this.isIdentity()) {
            return '';
        }*/
        var i = 0;
        var props = this.props;
        var cssValue = 'matrix3d(';
        var v = 10000;
        while(i<16){
            cssValue += _rnd(props[i]*v)/v;
            cssValue += i === 15 ? ')':',';
            i += 1;
        }
        return cssValue;
    }

    function roundMatrixProperty(val) {
        var v = 10000;
        if((val < 0.000001 && val > 0) || (val > -0.000001 && val < 0)) {
            return _rnd(val * v) / v;
        }
        return val;
    }

    function to2dCSS() {
        //Doesn't make much sense to add this optimization. If it is an identity matrix, it's very likely this will get called only once since it won't be keyframed.
        /*if(this.isIdentity()) {
            return '';
        }*/
        var props = this.props;
        var _a = roundMatrixProperty(props[0]);
        var _b = roundMatrixProperty(props[1]);
        var _c = roundMatrixProperty(props[4]);
        var _d = roundMatrixProperty(props[5]);
        var _e = roundMatrixProperty(props[12]);
        var _f = roundMatrixProperty(props[13]);
        return "matrix(" + _a + ',' + _b + ',' + _c + ',' + _d + ',' + _e + ',' + _f + ")";
    }

    return function(){
        this.reset = reset;
        this.rotate = rotate;
        this.rotateX = rotateX;
        this.rotateY = rotateY;
        this.rotateZ = rotateZ;
        this.skew = skew;
        this.skewFromAxis = skewFromAxis;
        this.shear = shear;
        this.scale = scale;
        this.setTransform = setTransform;
        this.translate = translate;
        this.transform = transform;
        this.applyToPoint = applyToPoint;
        this.applyToX = applyToX;
        this.applyToY = applyToY;
        this.applyToZ = applyToZ;
        this.applyToPointArray = applyToPointArray;
        this.applyToTriplePoints = applyToTriplePoints;
        this.applyToPointStringified = applyToPointStringified;
        this.toCSS = toCSS;
        this.to2dCSS = to2dCSS;
        this.clone = clone;
        this.cloneFromProps = cloneFromProps;
        this.equals = equals;
        this.inversePoints = inversePoints;
        this.inversePoint = inversePoint;
        this._t = this.transform;
        this.isIdentity = isIdentity;
        this._identity = true;
        this._identityCalculated = false;

        this.props = createTypedArray('float32', 16);
        this.reset();
    };
}());

/*
 Copyright 2014 David Bau.

 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the
 "Software"), to deal in the Software without restriction, including
 without limitation the rights to use, copy, modify, merge, publish,
 distribute, sublicense, and/or sell copies of the Software, and to
 permit persons to whom the Software is furnished to do so, subject to
 the following conditions:

 The above copyright notice and this permission notice shall be
 included in all copies or substantial portions of the Software.

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
 CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
 TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

 */

(function (pool, math) {
//
// The following constants are related to IEEE 754 limits.
//
    var global = this,
        width = 256,        // each RC4 output is 0 <= x < 256
        chunks = 6,         // at least six RC4 outputs for each double
        digits = 52,        // there are 52 significant digits in a double
        rngname = 'random', // rngname: name for Math.random and Math.seedrandom
        startdenom = math.pow(width, chunks),
        significance = math.pow(2, digits),
        overflow = significance * 2,
        mask = width - 1;
         // node.js crypto module, initialized at the bottom.

//
// seedrandom()
// This is the seedrandom function described above.
//
    function seedrandom(seed, options, callback) {
        var key = [];
        options = (options === true) ? { entropy: true } : (options || {});

        // Flatten the seed string or build one from local entropy if needed.
        var shortseed = mixkey(flatten(
            options.entropy ? [seed, tostring(pool)] :
                (seed === null) ? autoseed() : seed, 3), key);

        // Use the seed to initialize an ARC4 generator.
        var arc4 = new ARC4(key);

        // This function returns a random double in [0, 1) that contains
        // randomness in every bit of the mantissa of the IEEE 754 value.
        var prng = function() {
            var n = arc4.g(chunks),             // Start with a numerator n < 2 ^ 48
                d = startdenom,                 //   and denominator d = 2 ^ 48.
                x = 0;                          //   and no 'extra last byte'.
            while (n < significance) {          // Fill up all significant digits by
                n = (n + x) * width;              //   shifting numerator and
                d *= width;                       //   denominator and generating a
                x = arc4.g(1);                    //   new least-significant-byte.
            }
            while (n >= overflow) {             // To avoid rounding up, before adding
                n /= 2;                           //   last byte, shift everything
                d /= 2;                           //   right using integer math until
                x >>>= 1;                         //   we have exactly the desired bits.
            }
            return (n + x) / d;                 // Form the number within [0, 1).
        };

        prng.int32 = function() { return arc4.g(4) | 0; };
        prng.quick = function() { return arc4.g(4) / 0x100000000; };
        prng.double = prng;

        // Mix the randomness into accumulated entropy.
        mixkey(tostring(arc4.S), pool);

        // Calling convention: what to return as a function of prng, seed, is_math.
        return (options.pass || callback ||
        function(prng, seed, is_math_call, state) {
            if (state) {
                // Load the arc4 state from the given state if it has an S array.
                if (state.S) { copy(state, arc4); }
                // Only provide the .state method if requested via options.state.
                prng.state = function() { return copy(arc4, {}); };
            }

            // If called as a method of Math (Math.seedrandom()), mutate
            // Math.random because that is how seedrandom.js has worked since v1.0.
            if (is_math_call) { math[rngname] = prng; return seed; }

            // Otherwise, it is a newer calling convention, so return the
            // prng directly.
            else return prng;
        })(
            prng,
            shortseed,
            'global' in options ? options.global : (this == math),
            options.state);
    }
    math['seed' + rngname] = seedrandom;

//
// ARC4
//
// An ARC4 implementation.  The constructor takes a key in the form of
// an array of at most (width) integers that should be 0 <= x < (width).
//
// The g(count) method returns a pseudorandom integer that concatenates
// the next (count) outputs from ARC4.  Its return value is a number x
// that is in the range 0 <= x < (width ^ count).
//
    function ARC4(key) {
        var t, keylen = key.length,
            me = this, i = 0, j = me.i = me.j = 0, s = me.S = [];

        // The empty key [] is treated as [0].
        if (!keylen) { key = [keylen++]; }

        // Set up S using the standard key scheduling algorithm.
        while (i < width) {
            s[i] = i++;
        }
        for (i = 0; i < width; i++) {
            s[i] = s[j = mask & (j + key[i % keylen] + (t = s[i]))];
            s[j] = t;
        }

        // The "g" method returns the next (count) outputs as one number.
        me.g = function(count) {
            // Using instance members instead of closure state nearly doubles speed.
            var t, r = 0,
                i = me.i, j = me.j, s = me.S;
            while (count--) {
                t = s[i = mask & (i + 1)];
                r = r * width + s[mask & ((s[i] = s[j = mask & (j + t)]) + (s[j] = t))];
            }
            me.i = i; me.j = j;
            return r;
            // For robust unpredictability, the function call below automatically
            // discards an initial batch of values.  This is called RC4-drop[256].
            // See http://google.com/search?q=rsa+fluhrer+response&btnI
        };
    }

//
// copy()
// Copies internal state of ARC4 to or from a plain object.
//
    function copy(f, t) {
        t.i = f.i;
        t.j = f.j;
        t.S = f.S.slice();
        return t;
    }

//
// flatten()
// Converts an object tree to nested arrays of strings.
//
    function flatten(obj, depth) {
        var result = [], typ = (typeof obj), prop;
        if (depth && typ == 'object') {
            for (prop in obj) {
                try { result.push(flatten(obj[prop], depth - 1)); } catch (e) {}
            }
        }
        return (result.length ? result : typ == 'string' ? obj : obj + '\0');
    }

//
// mixkey()
// Mixes a string seed into a key that is an array of integers, and
// returns a shortened string seed that is equivalent to the result key.
//
    function mixkey(seed, key) {
        var stringseed = seed + '', smear, j = 0;
        while (j < stringseed.length) {
            key[mask & j] =
                mask & ((smear ^= key[mask & j] * 19) + stringseed.charCodeAt(j++));
        }
        return tostring(key);
    }

//
// autoseed()
// Returns an object for autoseeding, using window.crypto and Node crypto
// module if available.
//
    function autoseed() {
        try {
            var out = new Uint8Array(width);
            (global.crypto || global.msCrypto).getRandomValues(out);
            return tostring(out);
        } catch (e) {
            var browser = global.navigator,
                plugins = browser && browser.plugins;
            return [+new Date(), global, plugins, global.screen, tostring(pool)];
        }
    }

//
// tostring()
// Converts an array of charcodes to a string
//
    function tostring(a) {
        return String.fromCharCode.apply(0, a);
    }

//
// When seedrandom.js is loaded, we immediately mix a few bits
// from the built-in RNG into the entropy pool.  Because we do
// not want to interfere with deterministic PRNG state later,
// seedrandom will not call math.random on its own again after
// initialization.
//
    mixkey(math.random(), pool);

//
// Nodejs and AMD support: export the implementation as a module using
// either convention.
//

// End anonymous scope, and pass initial values.
})(
    [],     // pool: entropy pool starts empty
    BMMath    // math: package containing random, pow, and seedrandom
);
var BezierFactory = (function(){
    /**
     * BezierEasing - use bezier curve for transition easing function
     * by Gaëtan Renaudeau 2014 - 2015 – MIT License
     *
     * Credits: is based on Firefox's nsSMILKeySpline.cpp
     * Usage:
     * var spline = BezierEasing([ 0.25, 0.1, 0.25, 1.0 ])
     * spline.get(x) => returns the easing value | x must be in [0, 1] range
     *
     */

        var ob = {};
    ob.getBezierEasing = getBezierEasing;
    var beziers = {};

    function getBezierEasing(a,b,c,d,nm){
        var str = nm || ('bez_' + a+'_'+b+'_'+c+'_'+d).replace(/\./g, 'p');
        if(beziers[str]){
            return beziers[str];
        }
        var bezEasing = new BezierEasing([a,b,c,d]);
        beziers[str] = bezEasing;
        return bezEasing;
    }

// These values are established by empiricism with tests (tradeoff: performance VS precision)
    var NEWTON_ITERATIONS = 4;
    var NEWTON_MIN_SLOPE = 0.001;
    var SUBDIVISION_PRECISION = 0.0000001;
    var SUBDIVISION_MAX_ITERATIONS = 10;

    var kSplineTableSize = 11;
    var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);

    var float32ArraySupported = typeof Float32Array === "function";

    function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
    function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
    function C (aA1)      { return 3.0 * aA1; }

// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
    function calcBezier (aT, aA1, aA2) {
        return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT;
    }

// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
    function getSlope (aT, aA1, aA2) {
        return 3.0 * A(aA1, aA2)*aT*aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
    }

    function binarySubdivide (aX, aA, aB, mX1, mX2) {
        var currentX, currentT, i = 0;
        do {
            currentT = aA + (aB - aA) / 2.0;
            currentX = calcBezier(currentT, mX1, mX2) - aX;
            if (currentX > 0.0) {
                aB = currentT;
            } else {
                aA = currentT;
            }
        } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
        return currentT;
    }

    function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
        for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
            var currentSlope = getSlope(aGuessT, mX1, mX2);
            if (currentSlope === 0.0) return aGuessT;
            var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
            aGuessT -= currentX / currentSlope;
        }
        return aGuessT;
    }

    /**
     * points is an array of [ mX1, mY1, mX2, mY2 ]
     */
    function BezierEasing (points) {
        this._p = points;
        this._mSampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
        this._precomputed = false;

        this.get = this.get.bind(this);
    }

    BezierEasing.prototype = {

        get: function (x) {
            var mX1 = this._p[0],
                mY1 = this._p[1],
                mX2 = this._p[2],
                mY2 = this._p[3];
            if (!this._precomputed) this._precompute();
            if (mX1 === mY1 && mX2 === mY2) return x; // linear
            // Because JavaScript number are imprecise, we should guarantee the extremes are right.
            if (x === 0) return 0;
            if (x === 1) return 1;
            return calcBezier(this._getTForX(x), mY1, mY2);
        },

        // Private part

        _precompute: function () {
            var mX1 = this._p[0],
                mY1 = this._p[1],
                mX2 = this._p[2],
                mY2 = this._p[3];
            this._precomputed = true;
            if (mX1 !== mY1 || mX2 !== mY2)
                this._calcSampleValues();
        },

        _calcSampleValues: function () {
            var mX1 = this._p[0],
                mX2 = this._p[2];
            for (var i = 0; i < kSplineTableSize; ++i) {
                this._mSampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
            }
        },

        /**
         * getTForX chose the fastest heuristic to determine the percentage value precisely from a given X projection.
         */
        _getTForX: function (aX) {
            var mX1 = this._p[0],
                mX2 = this._p[2],
                mSampleValues = this._mSampleValues;

            var intervalStart = 0.0;
            var currentSample = 1;
            var lastSample = kSplineTableSize - 1;

            for (; currentSample !== lastSample && mSampleValues[currentSample] <= aX; ++currentSample) {
                intervalStart += kSampleStepSize;
            }
            --currentSample;

            // Interpolate to provide an initial guess for t
            var dist = (aX - mSampleValues[currentSample]) / (mSampleValues[currentSample+1] - mSampleValues[currentSample]);
            var guessForT = intervalStart + dist * kSampleStepSize;

            var initialSlope = getSlope(guessForT, mX1, mX2);
            if (initialSlope >= NEWTON_MIN_SLOPE) {
                return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
            } else if (initialSlope === 0.0) {
                return guessForT;
            } else {
                return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
            }
        }
    };

    return ob;

}());
(function () {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }
    if(!window.requestAnimationFrame)
        window.requestAnimationFrame = function (callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = setTimeout(function () {
                    callback(currTime + timeToCall);
                },
                timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    if(!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function (id) {
            clearTimeout(id);
        };
}());

function extendPrototype(sources,destination){
    var i, len = sources.length, sourcePrototype;
    for (i = 0;i < len;i += 1) {
        sourcePrototype = sources[i].prototype;
        for (var attr in sourcePrototype) {
            if (sourcePrototype.hasOwnProperty(attr)) destination.prototype[attr] = sourcePrototype[attr];
        }
    }
}

function getDescriptor(object, prop) {
    return Object.getOwnPropertyDescriptor(object, prop);
}

function createProxyFunction(prototype) {
	function ProxyFunction(){}
	ProxyFunction.prototype = prototype;
	return ProxyFunction;
}
function bezFunction(){

    function pointOnLine2D(x1,y1, x2,y2, x3,y3){
        var det1 = (x1*y2) + (y1*x3) + (x2*y3) - (x3*y2) - (y3*x1) - (x2*y1);
        return det1 > -0.001 && det1 < 0.001;
    }

    function pointOnLine3D(x1,y1,z1, x2,y2,z2, x3,y3,z3){
        if(z1 === 0 && z2 === 0 && z3 === 0) {
            return pointOnLine2D(x1,y1, x2,y2, x3,y3);
        }
        var dist1 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2) + Math.pow(z2 - z1, 2));
        var dist2 = Math.sqrt(Math.pow(x3 - x1, 2) + Math.pow(y3 - y1, 2) + Math.pow(z3 - z1, 2));
        var dist3 = Math.sqrt(Math.pow(x3 - x2, 2) + Math.pow(y3 - y2, 2) + Math.pow(z3 - z2, 2));
        var diffDist;
        if(dist1 > dist2){
            if(dist1 > dist3){
                diffDist = dist1 - dist2 - dist3;
            } else {
                diffDist = dist3 - dist2 - dist1;
            }
        } else if(dist3 > dist2){
            diffDist = dist3 - dist2 - dist1;
        } else {
            diffDist = dist2 - dist1 - dist3;
        }
        return diffDist > -0.0001 && diffDist < 0.0001;
    }

    var getBezierLength = (function(){

        return function(pt1,pt2,pt3,pt4){
            var curveSegments = defaultCurveSegments;
            var k;
            var i, len;
            var ptCoord,perc,addedLength = 0;
            var ptDistance;
            var point = [],lastPoint = [];
            var lengthData = bezier_length_pool.newElement();
            len = pt3.length;
            for(k=0;k<curveSegments;k+=1){
                perc = k/(curveSegments-1);
                ptDistance = 0;
                for(i=0;i<len;i+=1){
                    ptCoord = bm_pow(1-perc,3)*pt1[i]+3*bm_pow(1-perc,2)*perc*pt3[i]+3*(1-perc)*bm_pow(perc,2)*pt4[i]+bm_pow(perc,3)*pt2[i];
                    point[i] = ptCoord;
                    if(lastPoint[i] !== null){
                        ptDistance += bm_pow(point[i] - lastPoint[i],2);
                    }
                    lastPoint[i] = point[i];
                }
                if(ptDistance){
                    ptDistance = bm_sqrt(ptDistance);
                    addedLength += ptDistance;
                }
                lengthData.percents[k] = perc;
                lengthData.lengths[k] = addedLength;
            }
            lengthData.addedLength = addedLength;
            return lengthData;
        };
    }());

    function getSegmentsLength(shapeData) {
        var segmentsLength = segments_length_pool.newElement();
        var closed = shapeData.c;
        var pathV = shapeData.v;
        var pathO = shapeData.o;
        var pathI = shapeData.i;
        var i, len = shapeData._length;
        var lengths = segmentsLength.lengths;
        var totalLength = 0;
        for(i=0;i<len-1;i+=1){
            lengths[i] = getBezierLength(pathV[i],pathV[i+1],pathO[i],pathI[i+1]);
            totalLength += lengths[i].addedLength;
        }
        if(closed && len){
            lengths[i] = getBezierLength(pathV[i],pathV[0],pathO[i],pathI[0]);
            totalLength += lengths[i].addedLength;
        }
        segmentsLength.totalLength = totalLength;
        return segmentsLength;
    }

    function BezierData(length){
        this.segmentLength = 0;
        this.points = new Array(length);
    }

    function PointData(partial,point){
        this.partialLength = partial;
        this.point = point;
    }

    var buildBezierData = (function(){

        var storedData = {};

        return function (pt1, pt2, pt3, pt4){
            var bezierName = (pt1[0]+'_'+pt1[1]+'_'+pt2[0]+'_'+pt2[1]+'_'+pt3[0]+'_'+pt3[1]+'_'+pt4[0]+'_'+pt4[1]).replace(/\./g, 'p');
            if(!storedData[bezierName]){
                var curveSegments = defaultCurveSegments;
                var k, i, len;
                var ptCoord,perc,addedLength = 0;
                var ptDistance;
                var point,lastPoint = null;
                if (pt1.length === 2 && (pt1[0] != pt2[0] || pt1[1] != pt2[1]) && pointOnLine2D(pt1[0],pt1[1],pt2[0],pt2[1],pt1[0]+pt3[0],pt1[1]+pt3[1]) && pointOnLine2D(pt1[0],pt1[1],pt2[0],pt2[1],pt2[0]+pt4[0],pt2[1]+pt4[1])){
                    curveSegments = 2;
                }
                var bezierData = new BezierData(curveSegments);
                len = pt3.length;
                for (k = 0; k < curveSegments; k += 1) {
                    point = createSizedArray(len);
                    perc = k / (curveSegments - 1);
                    ptDistance = 0;
                    for (i = 0; i < len; i += 1){
                        ptCoord = bm_pow(1-perc,3)*pt1[i]+3*bm_pow(1-perc,2)*perc*(pt1[i] + pt3[i])+3*(1-perc)*bm_pow(perc,2)*(pt2[i] + pt4[i])+bm_pow(perc,3)*pt2[i];
                        point[i] = ptCoord;
                        if(lastPoint !== null){
                            ptDistance += bm_pow(point[i] - lastPoint[i],2);
                        }
                    }
                    ptDistance = bm_sqrt(ptDistance);
                    addedLength += ptDistance;
                    bezierData.points[k] = new PointData(ptDistance, point);
                    lastPoint = point;
                }
                bezierData.segmentLength = addedLength;
                storedData[bezierName] = bezierData;
            }
            return storedData[bezierName];
        };
    }());

    function getDistancePerc(perc,bezierData){
        var percents = bezierData.percents;
        var lengths = bezierData.lengths;
        var len = percents.length;
        var initPos = bm_floor((len-1)*perc);
        var lengthPos = perc*bezierData.addedLength;
        var lPerc = 0;
        if(initPos === len - 1 || initPos === 0 || lengthPos === lengths[initPos]){
            return percents[initPos];
        }else{
            var dir = lengths[initPos] > lengthPos ? -1 : 1;
            var flag = true;
            while(flag){
                if(lengths[initPos] <= lengthPos && lengths[initPos+1] > lengthPos){
                    lPerc = (lengthPos - lengths[initPos]) / (lengths[initPos+1] - lengths[initPos]);
                    flag = false;
                }else{
                    initPos += dir;
                }
                if(initPos < 0 || initPos >= len - 1){
                    //FIX for TypedArrays that don't store floating point values with enough accuracy
                    if(initPos === len - 1) {
                        return percents[initPos];
                    }
                    flag = false;
                }
            }
            return percents[initPos] + (percents[initPos+1] - percents[initPos])*lPerc;
        }
    }

    function getPointInSegment(pt1, pt2, pt3, pt4, percent, bezierData) {
        var t1 = getDistancePerc(percent,bezierData);
        var u1 = 1 - t1;
        var ptX = Math.round((u1*u1*u1* pt1[0] + (t1*u1*u1 + u1*t1*u1 + u1*u1*t1)* pt3[0] + (t1*t1*u1 + u1*t1*t1 + t1*u1*t1)*pt4[0] + t1*t1*t1* pt2[0])* 1000) / 1000;
        var ptY = Math.round((u1*u1*u1* pt1[1] + (t1*u1*u1 + u1*t1*u1 + u1*u1*t1)* pt3[1] + (t1*t1*u1 + u1*t1*t1 + t1*u1*t1)*pt4[1] + t1*t1*t1* pt2[1])* 1000) / 1000;
        return [ptX, ptY];
    }

    var bezier_segment_points = createTypedArray('float32', 8);

    function getNewSegment(pt1,pt2,pt3,pt4,startPerc,endPerc, bezierData){

        startPerc = startPerc < 0 ? 0 : startPerc > 1 ? 1 : startPerc;
        var t0 = getDistancePerc(startPerc,bezierData);
        endPerc = endPerc > 1 ? 1 : endPerc;
        var t1 = getDistancePerc(endPerc,bezierData);
        var i, len = pt1.length;
        var u0 = 1 - t0;
        var u1 = 1 - t1;
        var u0u0u0 = u0*u0*u0;
        var t0u0u0_3 = t0*u0*u0*3;
        var t0t0u0_3 = t0*t0*u0*3;
        var t0t0t0 = t0*t0*t0;
        //
        var u0u0u1 = u0*u0*u1;
        var t0u0u1_3 = t0*u0*u1 + u0*t0*u1 + u0*u0*t1;
        var t0t0u1_3 = t0*t0*u1 + u0*t0*t1 + t0*u0*t1;
        var t0t0t1 = t0*t0*t1;
        //
        var u0u1u1 = u0*u1*u1;
        var t0u1u1_3 = t0*u1*u1 + u0*t1*u1 + u0*u1*t1;
        var t0t1u1_3 = t0*t1*u1 + u0*t1*t1 + t0*u1*t1;
        var t0t1t1 = t0*t1*t1;
        //
        var u1u1u1 = u1*u1*u1;
        var t1u1u1_3 = t1*u1*u1 + u1*t1*u1 + u1*u1*t1;
        var t1t1u1_3 = t1*t1*u1 + u1*t1*t1 + t1*u1*t1;
        var t1t1t1 = t1*t1*t1;
        for(i=0;i<len;i+=1){
            bezier_segment_points[i * 4] = Math.round((u0u0u0 * pt1[i] + t0u0u0_3 * pt3[i] + t0t0u0_3 * pt4[i] + t0t0t0 * pt2[i]) * 1000) / 1000;
            bezier_segment_points[i * 4 + 1] = Math.round((u0u0u1 * pt1[i] + t0u0u1_3 * pt3[i] + t0t0u1_3 * pt4[i] + t0t0t1 * pt2[i]) * 1000) / 1000;
            bezier_segment_points[i * 4 + 2] = Math.round((u0u1u1 * pt1[i] + t0u1u1_3 * pt3[i] + t0t1u1_3 * pt4[i] + t0t1t1 * pt2[i]) * 1000) / 1000;
            bezier_segment_points[i * 4 + 3] = Math.round((u1u1u1 * pt1[i] + t1u1u1_3 * pt3[i] + t1t1u1_3 * pt4[i] + t1t1t1 * pt2[i]) * 1000) / 1000;
        }

        return bezier_segment_points;
    }

    return {
        getSegmentsLength : getSegmentsLength,
        getNewSegment : getNewSegment,
        getPointInSegment : getPointInSegment,
        buildBezierData : buildBezierData,
        pointOnLine2D : pointOnLine2D,
        pointOnLine3D : pointOnLine3D
    };
}

var bez = bezFunction();
function dataFunctionManager(){

    //var tCanvasHelper = createTag('canvas').getContext('2d');

    function completeLayers(layers, comps, fontManager){
        var layerData;
        var i, len = layers.length;
        var j, jLen, k, kLen;
        for(i=0;i<len;i+=1){
            layerData = layers[i];
            if(!('ks' in layerData) || layerData.completed){
                continue;
            }
            layerData.completed = true;
            if(layerData.tt){
                layers[i-1].td = layerData.tt;
            }
            if(layerData.hasMask){
                var maskProps = layerData.masksProperties;
                jLen = maskProps.length;
                for(j=0;j<jLen;j+=1){
                    if(maskProps[j].pt.k.i){
                        convertPathsToAbsoluteValues(maskProps[j].pt.k);
                    }else{
                        kLen = maskProps[j].pt.k.length;
                        for(k=0;k<kLen;k+=1){
                            if(maskProps[j].pt.k[k].s){
                                convertPathsToAbsoluteValues(maskProps[j].pt.k[k].s[0]);
                            }
                            if(maskProps[j].pt.k[k].e){
                                convertPathsToAbsoluteValues(maskProps[j].pt.k[k].e[0]);
                            }
                        }
                    }
                }
            }
            if(layerData.ty===0){
                layerData.layers = findCompLayers(layerData.refId, comps);
                completeLayers(layerData.layers,comps, fontManager);
            }else if(layerData.ty === 4){
                completeShapes(layerData.shapes);
            }else if(layerData.ty == 5){
                completeText(layerData, fontManager);
            }
        }
    }

    function findCompLayers(id,comps){
        var i = 0, len = comps.length;
        while(i<len){
            if(comps[i].id === id){
                if(!comps[i].layers.__used) {
                    comps[i].layers.__used = true;
                    return comps[i].layers;
                }
                return JSON.parse(JSON.stringify(comps[i].layers));
            }
            i += 1;
        }
    }

    function completeShapes(arr){
        var i, len = arr.length;
        var j, jLen;
        for(i=len-1;i>=0;i-=1){
            if(arr[i].ty == 'sh'){
                if(arr[i].ks.k.i){
                    convertPathsToAbsoluteValues(arr[i].ks.k);
                }else{
                    jLen = arr[i].ks.k.length;
                    for(j=0;j<jLen;j+=1){
                        if(arr[i].ks.k[j].s){
                            convertPathsToAbsoluteValues(arr[i].ks.k[j].s[0]);
                        }
                        if(arr[i].ks.k[j].e){
                            convertPathsToAbsoluteValues(arr[i].ks.k[j].e[0]);
                        }
                    }
                }
            }else if(arr[i].ty == 'gr'){
                completeShapes(arr[i].it);
            }
        }
        /*if(hasPaths){
            //mx: distance
            //ss: sensitivity
            //dc: decay
            arr.splice(arr.length-1,0,{
                "ty": "ms",
                "mx":20,
                "ss":10,
                 "dc":0.001,
                "maxDist":200
            });
        }*/
    }

    function convertPathsToAbsoluteValues(path){
        var i, len = path.i.length;
        for(i=0;i<len;i+=1){
            path.i[i][0] += path.v[i][0];
            path.i[i][1] += path.v[i][1];
            path.o[i][0] += path.v[i][0];
            path.o[i][1] += path.v[i][1];
        }
    }

    function checkVersion(minimum,animVersionString){
        var animVersion = animVersionString ? animVersionString.split('.') : [100,100,100];
        if(minimum[0]>animVersion[0]){
            return true;
        } else if(animVersion[0] > minimum[0]){
            return false;
        }
        if(minimum[1]>animVersion[1]){
            return true;
        } else if(animVersion[1] > minimum[1]){
            return false;
        }
        if(minimum[2]>animVersion[2]){
            return true;
        } else if(animVersion[2] > minimum[2]){
            return false;
        }
    }

    var checkText = (function(){
        var minimumVersion = [4,4,14];

        function updateTextLayer(textLayer){
            var documentData = textLayer.t.d;
            textLayer.t.d = {
                k: [
                    {
                        s:documentData,
                        t:0
                    }
                ]
            };
        }

        function iterateLayers(layers){
            var i, len = layers.length;
            for(i=0;i<len;i+=1){
                if(layers[i].ty === 5){
                    updateTextLayer(layers[i]);
                }
            }
        }

        return function (animationData){
            if(checkVersion(minimumVersion,animationData.v)){
                iterateLayers(animationData.layers);
                if(animationData.assets){
                    var i, len = animationData.assets.length;
                    for(i=0;i<len;i+=1){
                        if(animationData.assets[i].layers){
                            iterateLayers(animationData.assets[i].layers);

                        }
                    }
                }
            }
        };
    }());

    var checkChars = (function() {
        var minimumVersion = [4,7,99];
        return function (animationData){
            if(animationData.chars && !checkVersion(minimumVersion,animationData.v)){
                var i, len = animationData.chars.length, j, jLen;
                var pathData, paths;
                for(i = 0; i < len; i += 1) {
                    if(animationData.chars[i].data && animationData.chars[i].data.shapes) {
                        paths = animationData.chars[i].data.shapes[0].it;
                        jLen = paths.length;

                        for(j = 0; j < jLen; j += 1) {
                            pathData = paths[j].ks.k;
                            if(!pathData.__converted) {
                                convertPathsToAbsoluteValues(paths[j].ks.k);
                                pathData.__converted = true;
                            }
                        }
                    }
                }
            }
        };
    }());

    var checkColors = (function(){
        var minimumVersion = [4,1,9];

        function iterateShapes(shapes){
            var i, len = shapes.length;
            var j, jLen;
            for(i=0;i<len;i+=1){
                if(shapes[i].ty === 'gr'){
                    iterateShapes(shapes[i].it);
                }else if(shapes[i].ty === 'fl' || shapes[i].ty === 'st'){
                    if(shapes[i].c.k && shapes[i].c.k[0].i){
                        jLen = shapes[i].c.k.length;
                        for(j=0;j<jLen;j+=1){
                            if(shapes[i].c.k[j].s){
                                shapes[i].c.k[j].s[0] /= 255;
                                shapes[i].c.k[j].s[1] /= 255;
                                shapes[i].c.k[j].s[2] /= 255;
                                shapes[i].c.k[j].s[3] /= 255;
                            }
                            if(shapes[i].c.k[j].e){
                                shapes[i].c.k[j].e[0] /= 255;
                                shapes[i].c.k[j].e[1] /= 255;
                                shapes[i].c.k[j].e[2] /= 255;
                                shapes[i].c.k[j].e[3] /= 255;
                            }
                        }
                    } else {
                        shapes[i].c.k[0] /= 255;
                        shapes[i].c.k[1] /= 255;
                        shapes[i].c.k[2] /= 255;
                        shapes[i].c.k[3] /= 255;
                    }
                }
            }
        }

        function iterateLayers(layers){
            var i, len = layers.length;
            for(i=0;i<len;i+=1){
                if(layers[i].ty === 4){
                    iterateShapes(layers[i].shapes);
                }
            }
        }

        return function (animationData){
            if(checkVersion(minimumVersion,animationData.v)){
                iterateLayers(animationData.layers);
                if(animationData.assets){
                    var i, len = animationData.assets.length;
                    for(i=0;i<len;i+=1){
                        if(animationData.assets[i].layers){
                            iterateLayers(animationData.assets[i].layers);

                        }
                    }
                }
            }
        };
    }());

    var checkShapes = (function(){
        var minimumVersion = [4,4,18];



        function completeShapes(arr){
            var i, len = arr.length;
            var j, jLen;
            for(i=len-1;i>=0;i-=1){
                if(arr[i].ty == 'sh'){
                    if(arr[i].ks.k.i){
                        arr[i].ks.k.c = arr[i].closed;
                    }else{
                        jLen = arr[i].ks.k.length;
                        for(j=0;j<jLen;j+=1){
                            if(arr[i].ks.k[j].s){
                                arr[i].ks.k[j].s[0].c = arr[i].closed;
                            }
                            if(arr[i].ks.k[j].e){
                                arr[i].ks.k[j].e[0].c = arr[i].closed;
                            }
                        }
                    }
                }else if(arr[i].ty == 'gr'){
                    completeShapes(arr[i].it);
                }
            }
        }

        function iterateLayers(layers){
            var layerData;
            var i, len = layers.length;
            var j, jLen, k, kLen;
            for(i=0;i<len;i+=1){
                layerData = layers[i];
                if(layerData.hasMask){
                    var maskProps = layerData.masksProperties;
                    jLen = maskProps.length;
                    for(j=0;j<jLen;j+=1){
                        if(maskProps[j].pt.k.i){
                            maskProps[j].pt.k.c = maskProps[j].cl;
                        }else{
                            kLen = maskProps[j].pt.k.length;
                            for(k=0;k<kLen;k+=1){
                                if(maskProps[j].pt.k[k].s){
                                    maskProps[j].pt.k[k].s[0].c = maskProps[j].cl;
                                }
                                if(maskProps[j].pt.k[k].e){
                                    maskProps[j].pt.k[k].e[0].c = maskProps[j].cl;
                                }
                            }
                        }
                    }
                }
                if(layerData.ty === 4){
                    completeShapes(layerData.shapes);
                }
            }
        }

        return function (animationData){
            if(checkVersion(minimumVersion,animationData.v)){
                iterateLayers(animationData.layers);
                if(animationData.assets){
                    var i, len = animationData.assets.length;
                    for(i=0;i<len;i+=1){
                        if(animationData.assets[i].layers){
                            iterateLayers(animationData.assets[i].layers);

                        }
                    }
                }
            }
        };
    }());

    function completeData(animationData, fontManager){
        if(animationData.__complete){
            return;
        }
        checkColors(animationData);
        checkText(animationData);
        checkChars(animationData);
        checkShapes(animationData);
        completeLayers(animationData.layers, animationData.assets, fontManager);
        animationData.__complete = true;
        //blitAnimation(animationData, animationData.assets, fontManager);
    }

    function completeText(data, fontManager){
        if(data.t.a.length === 0 && !('m' in data.t.p)){
            data.singleShape = true;
        }
    }

    var moduleOb = {};
    moduleOb.completeData = completeData;

    return moduleOb;
}

var dataManager = dataFunctionManager();
var FontManager = (function(){

    var maxWaitingTime = 5000;
    var emptyChar = {
        w: 0,
        size:0,
        shapes:[]
    };
    var combinedCharacters = [];
    //Hindi characters
    combinedCharacters = combinedCharacters.concat([2304, 2305, 2306, 2307, 2362, 2363, 2364, 2364, 2366
    , 2367, 2368, 2369, 2370, 2371, 2372, 2373, 2374, 2375, 2376, 2377, 2378, 2379
    , 2380, 2381, 2382, 2383, 2387, 2388, 2389, 2390, 2391, 2402, 2403]);

    function setUpNode(font, family){
        var parentNode = createTag('span');
        parentNode.style.fontFamily    = family;
        var node = createTag('span');
        // Characters that vary significantly among different fonts
        node.innerHTML = 'giItT1WQy@!-/#';
        // Visible - so we can measure it - but not on the screen
        parentNode.style.position      = 'absolute';
        parentNode.style.left          = '-10000px';
        parentNode.style.top           = '-10000px';
        // Large font size makes even subtle changes obvious
        parentNode.style.fontSize      = '300px';
        // Reset any font properties
        parentNode.style.fontVariant   = 'normal';
        parentNode.style.fontStyle     = 'normal';
        parentNode.style.fontWeight    = 'normal';
        parentNode.style.letterSpacing = '0';
        parentNode.appendChild(node);
        document.body.appendChild(parentNode);

        // Remember width with no applied web font
        var width = node.offsetWidth;
        node.style.fontFamily = font + ', '+family;
        return {node:node, w:width, parent:parentNode};
    }

    function checkLoadedFonts() {
        var i, len = this.fonts.length;
        var node, w;
        var loadedCount = len;
        for(i=0;i<len; i+= 1){
            if(this.fonts[i].loaded){
                loadedCount -= 1;
                continue;
            }
            if(this.fonts[i].fOrigin === 'n' || this.fonts[i].origin === 0){
                this.fonts[i].loaded = true;
            } else{
                node = this.fonts[i].monoCase.node;
                w = this.fonts[i].monoCase.w;
                if(node.offsetWidth !== w){
                    loadedCount -= 1;
                    this.fonts[i].loaded = true;
                }else{
                    node = this.fonts[i].sansCase.node;
                    w = this.fonts[i].sansCase.w;
                    if(node.offsetWidth !== w){
                        loadedCount -= 1;
                        this.fonts[i].loaded = true;
                    }
                }
                if(this.fonts[i].loaded){
                    this.fonts[i].sansCase.parent.parentNode.removeChild(this.fonts[i].sansCase.parent);
                    this.fonts[i].monoCase.parent.parentNode.removeChild(this.fonts[i].monoCase.parent);
                }
            }
        }

        if(loadedCount !== 0 && Date.now() - this.initTime < maxWaitingTime){
            setTimeout(this.checkLoadedFonts.bind(this),20);
        }else{
            setTimeout(function(){this.isLoaded = true;}.bind(this),0);

        }
    }

    function createHelper(def, fontData){
        var tHelper = createNS('text');
        tHelper.style.fontSize = '100px';
        //tHelper.style.fontFamily = fontData.fFamily;
        tHelper.setAttribute('font-family', fontData.fFamily);
        tHelper.setAttribute('font-style', fontData.fStyle);
        tHelper.setAttribute('font-weight', fontData.fWeight);
        tHelper.textContent = '1';
        if(fontData.fClass){
            tHelper.style.fontFamily = 'inherit';
            tHelper.setAttribute('class', fontData.fClass);
        } else {
            tHelper.style.fontFamily = fontData.fFamily;
        }
        def.appendChild(tHelper);
        var tCanvasHelper = createTag('canvas').getContext('2d');
        tCanvasHelper.font = fontData.fWeight + ' ' + fontData.fStyle + ' 100px '+ fontData.fFamily;
        //tCanvasHelper.font = ' 100px '+ fontData.fFamily;
        return tHelper;
    }

    function addFonts(fontData, defs){
        if(!fontData){
            this.isLoaded = true;
            return;
        }
        if(this.chars){
            this.isLoaded = true;
            this.fonts = fontData.list;
            return;
        }


        var fontArr = fontData.list;
        var i, len = fontArr.length;
        var _pendingFonts = len;
        for(i=0; i<len; i+= 1){
            var shouldLoadFont = true;
            var loadedSelector;
            var j;
            fontArr[i].loaded = false;
            fontArr[i].monoCase = setUpNode(fontArr[i].fFamily,'monospace');
            fontArr[i].sansCase = setUpNode(fontArr[i].fFamily,'sans-serif');
            if(!fontArr[i].fPath) {
                fontArr[i].loaded = true;
                _pendingFonts -= 1;
            }else if(fontArr[i].fOrigin === 'p' || fontArr[i].origin === 3){
                loadedSelector = document.querySelectorAll('style[f-forigin="p"][f-family="'+ fontArr[i].fFamily +'"], style[f-origin="3"][f-family="'+ fontArr[i].fFamily +'"]');

                if (loadedSelector.length > 0) {
                    shouldLoadFont = false;
                }

                if (shouldLoadFont) {
                    var s = createTag('style');
                    s.setAttribute('f-forigin', fontArr[i].fOrigin);
                    s.setAttribute('f-origin', fontArr[i].origin);
                    s.setAttribute('f-family', fontArr[i].fFamily);
                    s.type = "text/css";
                    s.innerHTML = "@font-face {" + "font-family: "+fontArr[i].fFamily+"; font-style: normal; src: url('"+fontArr[i].fPath+"');}";
                    defs.appendChild(s);
                }
            } else if(fontArr[i].fOrigin === 'g' || fontArr[i].origin === 1){
                loadedSelector = document.querySelectorAll('link[f-forigin="g"], link[f-origin="1"]');

                for (j = 0; j < loadedSelector.length; j++) {
                    if (loadedSelector[j].href.indexOf(fontArr[i].fPath) !== -1) {
                        // Font is already loaded
                        shouldLoadFont = false;
                    }
                }

                if (shouldLoadFont) {
                    var l = createTag('link');
                    l.setAttribute('f-forigin', fontArr[i].fOrigin);
                    l.setAttribute('f-origin', fontArr[i].origin);
                    l.type = "text/css";
                    l.rel = "stylesheet";
                    l.href = fontArr[i].fPath;
                    document.body.appendChild(l);
                }
            } else if(fontArr[i].fOrigin === 't' || fontArr[i].origin === 2){
                loadedSelector = document.querySelectorAll('script[f-forigin="t"], script[f-origin="2"]');

                for (j = 0; j < loadedSelector.length; j++) {
                    if (fontArr[i].fPath === loadedSelector[j].src) {
                        // Font is already loaded
                        shouldLoadFont = false;
                    }
                }

                if (shouldLoadFont) {
                    var sc = createTag('link');
                    sc.setAttribute('f-forigin', fontArr[i].fOrigin);
                    sc.setAttribute('f-origin', fontArr[i].origin);
                    sc.setAttribute('rel','stylesheet');
                    sc.setAttribute('href',fontArr[i].fPath);
                    defs.appendChild(sc);
                }
            }
            fontArr[i].helper = createHelper(defs,fontArr[i]);
            fontArr[i].cache = {};
            this.fonts.push(fontArr[i]);
        }
        if (_pendingFonts === 0) {
            this.isLoaded = true;
        } else {
            //On some cases even if the font is loaded, it won't load correctly when measuring text on canvas.
            //Adding this timeout seems to fix it
           setTimeout(this.checkLoadedFonts.bind(this), 100);
        }
    }

    function addChars(chars){
        if(!chars){
            return;
        }
        if(!this.chars){
            this.chars = [];
        }
        var i, len = chars.length;
        var j, jLen = this.chars.length, found;
        for(i=0;i<len;i+=1){
            j = 0;
            found = false;
            while(j<jLen){
                if(this.chars[j].style === chars[i].style && this.chars[j].fFamily === chars[i].fFamily && this.chars[j].ch === chars[i].ch){
                    found = true;
                }
                j += 1;
            }
            if(!found){
                this.chars.push(chars[i]);
                jLen += 1;
            }
        }
    }

    function getCharData(char, style, font){
        var i = 0, len = this.chars.length;
        while( i < len) {
            if(this.chars[i].ch === char && this.chars[i].style === style && this.chars[i].fFamily === font){
                return this.chars[i];
            }
            i+= 1;
        }
        if(console && console.warn) {
            console.warn('Missing character from exported characters list: ', char, style, font);
        }
        return emptyChar;
    }

    function measureText(char, fontName, size) {
        var fontData = this.getFontByName(fontName);
        var index = char.charCodeAt(0);
        if(!fontData.cache[index + 1]) {
            var tHelper = fontData.helper;
            //Canvas version
            //fontData.cache[index] = tHelper.measureText(char).width / 100;
            //SVG version
            //console.log(tHelper.getBBox().width)
            if (char === ' ') {
                tHelper.textContent = '|' + char + '|';
                var doubleSize = tHelper.getComputedTextLength();
                tHelper.textContent = '||';
                var singleSize = tHelper.getComputedTextLength();
                fontData.cache[index + 1] = (doubleSize - singleSize)/100;
            } else {
                tHelper.textContent = char;
                fontData.cache[index + 1] = (tHelper.getComputedTextLength())/100;
            }
        }
        return fontData.cache[index + 1] * size;
    }

    function getFontByName(name){
        var i = 0, len = this.fonts.length;
        while(i<len){
            if(this.fonts[i].fName === name) {
                return this.fonts[i];
            }
            i += 1;
        }
        return this.fonts[0];
    }

    function getCombinedCharacterCodes() {
        return combinedCharacters;
    }

    function loaded() {
        return this.isLoaded;
    }

    var Font = function(){
        this.fonts = [];
        this.chars = null;
        this.typekitLoaded = 0;
        this.isLoaded = false;
        this.initTime = Date.now();
    };
    //TODO: for now I'm adding these methods to the Class and not the prototype. Think of a better way to implement it. 
    Font.getCombinedCharacterCodes = getCombinedCharacterCodes;

    Font.prototype.addChars = addChars;
    Font.prototype.addFonts = addFonts;
    Font.prototype.getCharData = getCharData;
    Font.prototype.getFontByName = getFontByName;
    Font.prototype.measureText = measureText;
    Font.prototype.checkLoadedFonts = checkLoadedFonts;
    Font.prototype.loaded = loaded;

    return Font;

}());
var PropertyFactory = (function(){

    var initFrame = initialDefaultFrame;
    var math_abs = Math.abs;

    function interpolateValue(frameNum, caching) {
        var offsetTime = this.offsetTime;
        var newValue;
        if (this.propType === 'multidimensional') {
            newValue = createTypedArray('float32', this.pv.length);
        }
        var iterationIndex = caching.lastIndex;
        var i = iterationIndex;
        var len = this.keyframes.length - 1, flag = true;
        var keyData, nextKeyData;

        while (flag) {
            keyData = this.keyframes[i];
            nextKeyData = this.keyframes[i + 1];
            if (i === len - 1 && frameNum >= nextKeyData.t - offsetTime){
                if(keyData.h){
                    keyData = nextKeyData;
                }
                iterationIndex = 0;
                break;
            }
            if ((nextKeyData.t - offsetTime) > frameNum){
                iterationIndex = i;
                break;
            }
            if (i < len - 1){
                i += 1;
            } else {
                iterationIndex = 0;
                flag = false;
            }
        }

        var k, kLen, perc, jLen, j, fnc;
        var nextKeyTime = nextKeyData.t - offsetTime;
        var keyTime = keyData.t - offsetTime;
        var endValue;
        if (keyData.to) {
            if (!keyData.bezierData) {
                keyData.bezierData = bez.buildBezierData(keyData.s, nextKeyData.s || keyData.e, keyData.to, keyData.ti);
            }
            var bezierData = keyData.bezierData;
            if (frameNum >= nextKeyTime || frameNum < keyTime) {
                var ind = frameNum >= nextKeyTime ? bezierData.points.length - 1 : 0;
                kLen = bezierData.points[ind].point.length;
                for (k = 0; k < kLen; k += 1) {
                    newValue[k] = bezierData.points[ind].point[k];
                }
                // caching._lastKeyframeIndex = -1;
            } else {
                if (keyData.__fnct) {
                    fnc = keyData.__fnct;
                } else {
                    fnc = BezierFactory.getBezierEasing(keyData.o.x, keyData.o.y, keyData.i.x, keyData.i.y, keyData.n).get;
                    keyData.__fnct = fnc;
                }
                perc = fnc((frameNum - keyTime) / (nextKeyTime - keyTime));
                var distanceInLine = bezierData.segmentLength*perc;

                var segmentPerc;
                var addedLength =  (caching.lastFrame < frameNum && caching._lastKeyframeIndex === i) ? caching._lastAddedLength : 0;
                j =  (caching.lastFrame < frameNum && caching._lastKeyframeIndex === i) ? caching._lastPoint : 0;
                flag = true;
                jLen = bezierData.points.length;
                while (flag) {
                    addedLength += bezierData.points[j].partialLength;
                    if (distanceInLine === 0 || perc === 0 || j === bezierData.points.length - 1) {
                        kLen = bezierData.points[j].point.length;
                        for (k = 0; k < kLen; k += 1) {
                            newValue[k] = bezierData.points[j].point[k];
                        }
                        break;
                    } else if (distanceInLine >= addedLength && distanceInLine < addedLength + bezierData.points[j + 1].partialLength) {
                        segmentPerc = (distanceInLine - addedLength) / bezierData.points[j + 1].partialLength;
                        kLen = bezierData.points[j].point.length;
                        for (k = 0; k < kLen; k += 1) {
                            newValue[k] = bezierData.points[j].point[k] + (bezierData.points[j + 1].point[k] - bezierData.points[j].point[k]) * segmentPerc;
                        }
                        break;
                    }
                    if (j < jLen - 1){
                        j += 1;
                    } else {
                        flag = false;
                    }
                }
                caching._lastPoint = j;
                caching._lastAddedLength = addedLength - bezierData.points[j].partialLength;
                caching._lastKeyframeIndex = i;
            }
        } else {
            var outX, outY, inX, inY, keyValue;
            len = keyData.s.length;
            endValue = nextKeyData.s || keyData.e;
            if (this.sh && keyData.h !== 1) {
                if (frameNum >= nextKeyTime) {
                    newValue[0] = endValue[0];
                    newValue[1] = endValue[1];
                    newValue[2] = endValue[2];
                } else if (frameNum <= keyTime) {
                    newValue[0] = keyData.s[0];
                    newValue[1] = keyData.s[1];
                    newValue[2] = keyData.s[2];
                } else {
                    var quatStart = createQuaternion(keyData.s);
                    var quatEnd = createQuaternion(endValue);
                    var time = (frameNum - keyTime) / (nextKeyTime - keyTime);
                    quaternionToEuler(newValue, slerp(quatStart, quatEnd, time));
                }
                
            } else {
                for(i = 0; i < len; i += 1) {
                    if (keyData.h !== 1) {
                        if (frameNum >= nextKeyTime) {
                            perc = 1;
                        } else if(frameNum < keyTime) {
                            perc = 0;
                        } else {
                            if(keyData.o.x.constructor === Array) {
                                if (!keyData.__fnct) {
                                    keyData.__fnct = [];
                                }
                                if (!keyData.__fnct[i]) {
                                    outX = (typeof keyData.o.x[i] === 'undefined') ? keyData.o.x[0] : keyData.o.x[i];
                                    outY = (typeof keyData.o.y[i] === 'undefined') ? keyData.o.y[0] : keyData.o.y[i];
                                    inX = (typeof keyData.i.x[i] === 'undefined') ? keyData.i.x[0] : keyData.i.x[i];
                                    inY = (typeof keyData.i.y[i] === 'undefined') ? keyData.i.y[0] : keyData.i.y[i];
                                    fnc = BezierFactory.getBezierEasing(outX, outY, inX, inY).get;
                                    keyData.__fnct[i] = fnc;
                                } else {
                                    fnc = keyData.__fnct[i];
                                }
                            } else {
                                if (!keyData.__fnct) {
                                    outX = keyData.o.x;
                                    outY = keyData.o.y;
                                    inX = keyData.i.x;
                                    inY = keyData.i.y;
                                    fnc = BezierFactory.getBezierEasing(outX, outY, inX, inY).get;
                                    keyData.__fnct = fnc;
                                } else {
                                    fnc = keyData.__fnct;
                                }
                            }
                            perc = fnc((frameNum - keyTime) / (nextKeyTime - keyTime ));
                        }
                    }

                    endValue = nextKeyData.s || keyData.e;
                    keyValue = keyData.h === 1 ? keyData.s[i] : keyData.s[i] + (endValue[i] - keyData.s[i]) * perc;

                    if (len === 1) {
                        newValue = keyValue;
                    } else {
                        newValue[i] = keyValue;
                    }
                }
            }
        }
        caching.lastIndex = iterationIndex;
        return newValue;
    }

    //based on @Toji's https://github.com/toji/gl-matrix/
    function slerp(a, b, t) {
        var out = [];
        var ax = a[0], ay = a[1], az = a[2], aw = a[3],
        bx = b[0], by = b[1], bz = b[2], bw = b[3];

        var omega, cosom, sinom, scale0, scale1;

        cosom = ax * bx + ay * by + az * bz + aw * bw;
        if (cosom < 0.0) {
            cosom = -cosom;
            bx = -bx;
            by = -by;
            bz = -bz;
            bw = -bw;
        }
        if ((1.0 - cosom) > 0.000001) {
            omega = Math.acos(cosom);
            sinom = Math.sin(omega);
            scale0 = Math.sin((1.0 - t) * omega) / sinom;
            scale1 = Math.sin(t * omega) / sinom;
        } else {
            scale0 = 1.0 - t;
            scale1 = t;
        }
        out[0] = scale0 * ax + scale1 * bx;
        out[1] = scale0 * ay + scale1 * by;
        out[2] = scale0 * az + scale1 * bz;
        out[3] = scale0 * aw + scale1 * bw;

        return out;
    }

    function quaternionToEuler(out, quat) {
        var qx = quat[0];
        var qy = quat[1];
        var qz = quat[2];
        var qw = quat[3];
        var heading = Math.atan2(2*qy*qw-2*qx*qz , 1 - 2*qy*qy - 2*qz*qz);
        var attitude = Math.asin(2*qx*qy + 2*qz*qw); 
        var bank = Math.atan2(2*qx*qw-2*qy*qz , 1 - 2*qx*qx - 2*qz*qz);
        out[0] = heading/degToRads;
        out[1] = attitude/degToRads;
        out[2] = bank/degToRads;
    }

    function createQuaternion(values) {
        var heading = values[0] * degToRads;
        var attitude = values[1] * degToRads;
        var bank = values[2] * degToRads;
        var c1 = Math.cos(heading / 2);
        var c2 = Math.cos(attitude / 2);
        var c3 = Math.cos(bank / 2);
        var s1 = Math.sin(heading / 2);
        var s2 = Math.sin(attitude / 2);
        var s3 = Math.sin(bank / 2);
        var w = c1 * c2 * c3 - s1 * s2 * s3;
        var x = s1 * s2 * c3 + c1 * c2 * s3;
        var y = s1 * c2 * c3 + c1 * s2 * s3;
        var z = c1 * s2 * c3 - s1 * c2 * s3;

        return [x,y,z,w];
    }

    function getValueAtCurrentTime(){
        var frameNum = this.comp.renderedFrame - this.offsetTime;
        var initTime = this.keyframes[0].t - this.offsetTime;
        var endTime = this.keyframes[this.keyframes.length- 1].t-this.offsetTime;
        if(!(frameNum === this._caching.lastFrame || (this._caching.lastFrame !== initFrame && ((this._caching.lastFrame >= endTime && frameNum >= endTime) || (this._caching.lastFrame < initTime && frameNum < initTime))))){
            if(this._caching.lastFrame >= frameNum) {
                this._caching._lastKeyframeIndex = -1;
                this._caching.lastIndex = 0;
            }

            var renderResult = this.interpolateValue(frameNum, this._caching);
            this.pv = renderResult;
        }
        this._caching.lastFrame = frameNum;
        return this.pv;
    }

    function setVValue(val) {
        var multipliedValue;
        if(this.propType === 'unidimensional') {
            multipliedValue = val * this.mult;
            if(math_abs(this.v - multipliedValue) > 0.00001) {
                this.v = multipliedValue;
                this._mdf = true;
            }
        } else {
            var i = 0, len = this.v.length;
            while (i < len) {
                multipliedValue = val[i] * this.mult;
                if (math_abs(this.v[i] - multipliedValue) > 0.00001) {
                    this.v[i] = multipliedValue;
                    this._mdf = true;
                }
                i += 1;
            }
        }
    }

    function processEffectsSequence() {
        if(this.elem.globalData.frameId === this.frameId || !this.effectsSequence.length) {
            return;
        }        
        if(this.lock) {
            this.setVValue(this.pv);
            return;
        }
        this.lock = true;
        this._mdf = this._isFirstFrame;
        var i, len = this.effectsSequence.length;
        var finalValue = this.kf ? this.pv : this.data.k;
        for(i = 0; i < len; i += 1) {
            finalValue = this.effectsSequence[i](finalValue);
        }
        this.setVValue(finalValue);
        this._isFirstFrame = false;
        this.lock = false;
        this.frameId = this.elem.globalData.frameId;
    }

    function addEffect(effectFunction) {
        this.effectsSequence.push(effectFunction);
        this.container.addDynamicProperty(this);
    }

    function ValueProperty(elem, data, mult, container){
        this.propType = 'unidimensional';
        this.mult = mult || 1;
        this.data = data;
        this.v = mult ? data.k * mult : data.k;
        this.pv = data.k;
        this._mdf = false;
        this.elem = elem;
        this.container = container;
        this.comp = elem.comp;
        this.k = false;
        this.kf = false;
        this.vel = 0;
        this.effectsSequence = [];
        this._isFirstFrame = true;
        this.getValue = processEffectsSequence;
        this.setVValue = setVValue;
        this.addEffect = addEffect;
    }

    function MultiDimensionalProperty(elem, data, mult, container) {
        this.propType = 'multidimensional';
        this.mult = mult || 1;
        this.data = data;
        this._mdf = false;
        this.elem = elem;
        this.container = container;
        this.comp = elem.comp;
        this.k = false;
        this.kf = false;
        this.frameId = -1;
        var i, len = data.k.length;
        this.v = createTypedArray('float32', len);
        this.pv = createTypedArray('float32', len);
        var arr = createTypedArray('float32', len);
        this.vel = createTypedArray('float32', len);
        for (i = 0; i < len; i += 1) {
            this.v[i] = data.k[i] * this.mult;
            this.pv[i] = data.k[i];
        }
        this._isFirstFrame = true;
        this.effectsSequence = [];
        this.getValue = processEffectsSequence;
        this.setVValue = setVValue;
        this.addEffect = addEffect;
    }

    function KeyframedValueProperty(elem, data, mult, container) {
        this.propType = 'unidimensional';
        this.keyframes = data.k;
        this.offsetTime = elem.data.st;
        this.frameId = -1;
        this._caching = {lastFrame: initFrame, lastIndex: 0, value: 0, _lastKeyframeIndex: -1};
        this.k = true;
        this.kf = true;
        this.data = data;
        this.mult = mult || 1;
        this.elem = elem;
        this.container = container;
        this.comp = elem.comp;
        this.v = initFrame;
        this.pv = initFrame;
        this._isFirstFrame = true;
        this.getValue = processEffectsSequence;
        this.setVValue = setVValue;
        this.interpolateValue = interpolateValue;
        this.effectsSequence = [getValueAtCurrentTime.bind(this)];
        this.addEffect = addEffect;
    }

    function KeyframedMultidimensionalProperty(elem, data, mult, container){
        this.propType = 'multidimensional';
        var i, len = data.k.length;
        var s, e,to,ti;
        for (i = 0; i < len - 1; i += 1) {
            if (data.k[i].to && data.k[i].s && data.k[i].e) {
                s = data.k[i].s;
                e = data.k[i].e;
                to = data.k[i].to;
                ti = data.k[i].ti;
                if((s.length === 2 && !(s[0] === e[0] && s[1] === e[1]) && bez.pointOnLine2D(s[0],s[1],e[0],e[1],s[0] + to[0],s[1] + to[1]) && bez.pointOnLine2D(s[0],s[1],e[0],e[1],e[0] + ti[0],e[1] + ti[1])) || (s.length === 3 && !(s[0] === e[0] && s[1] === e[1] && s[2] === e[2]) && bez.pointOnLine3D(s[0],s[1],s[2],e[0],e[1],e[2],s[0] + to[0],s[1] + to[1],s[2] + to[2]) && bez.pointOnLine3D(s[0],s[1],s[2],e[0],e[1],e[2],e[0] + ti[0],e[1] + ti[1],e[2] + ti[2]))){
                    data.k[i].to = null;
                    data.k[i].ti = null;
                }
                if(s[0] === e[0] && s[1] === e[1] && to[0] === 0 && to[1] === 0 && ti[0] === 0 && ti[1] === 0) {
                    if(s.length === 2 || (s[2] === e[2] && to[2] === 0 && ti[2] === 0)) {
                        data.k[i].to = null;
                        data.k[i].ti = null;
                    }
                }
            }
        }
        this.effectsSequence = [getValueAtCurrentTime.bind(this)];
        this.keyframes = data.k;
        this.offsetTime = elem.data.st;
        this.k = true;
        this.kf = true;
        this._isFirstFrame = true;
        this.mult = mult || 1;
        this.elem = elem;
        this.container = container;
        this.comp = elem.comp;
        this.getValue = processEffectsSequence;
        this.setVValue = setVValue;
        this.interpolateValue = interpolateValue;
        this.frameId = -1;
        var arrLen = data.k[0].s.length;
        this.v = createTypedArray('float32', arrLen);
        this.pv = createTypedArray('float32', arrLen);
        for (i = 0; i < arrLen; i += 1) {
            this.v[i] = initFrame;
            this.pv[i] = initFrame;
        }
        this._caching={lastFrame:initFrame,lastIndex:0,value:createTypedArray('float32', arrLen)};
        this.addEffect = addEffect;
    }

    function getProp(elem,data,type, mult, container) {
        var p;
        if(!data.k.length){
            p = new ValueProperty(elem,data, mult, container);
        }else if(typeof(data.k[0]) === 'number'){
            p = new MultiDimensionalProperty(elem,data, mult, container);
        }else{
            switch(type){
                case 0:
                    p = new KeyframedValueProperty(elem,data,mult, container);
                    break;
                case 1:
                    p = new KeyframedMultidimensionalProperty(elem,data,mult, container);
                    break;
            }
        }
        if(p.effectsSequence.length){
            container.addDynamicProperty(p);
        }
        return p;
    }

    var ob = {
        getProp: getProp
    };
    return ob;
}());
var TransformPropertyFactory = (function() {

    function applyToMatrix(mat) {
        var _mdf = this._mdf;
        this.iterateDynamicProperties();
        this._mdf = this._mdf || _mdf;
        if (this.a) {
            mat.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);
        }
        if (this.s) {
            mat.scale(this.s.v[0], this.s.v[1], this.s.v[2]);
        }
        if (this.sk) {
            mat.skewFromAxis(-this.sk.v, this.sa.v);
        }
        if (this.r) {
            mat.rotate(-this.r.v);
        } else {
            mat.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]);
        }
        if (this.data.p.s) {
            if (this.data.p.z) {
                mat.translate(this.px.v, this.py.v, -this.pz.v);
            } else {
                mat.translate(this.px.v, this.py.v, 0);
            }
        } else {
            mat.translate(this.p.v[0], this.p.v[1], -this.p.v[2]);
        }
    }
    function processKeys(forceRender){
        if (this.elem.globalData.frameId === this.frameId) {
            return;
        }
        if(this._isDirty) {
            this.precalculateMatrix();
            this._isDirty = false;
        }

        this.iterateDynamicProperties();

        if (this._mdf || forceRender) {
            this.v.cloneFromProps(this.pre.props);
            if (this.appliedTransformations < 1) {
                this.v.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);
            }
            if(this.appliedTransformations < 2) {
                this.v.scale(this.s.v[0], this.s.v[1], this.s.v[2]);
            }
            if (this.sk && this.appliedTransformations < 3) {
                this.v.skewFromAxis(-this.sk.v, this.sa.v);
            }
            if (this.r && this.appliedTransformations < 4) {
                this.v.rotate(-this.r.v);
            } else if (!this.r && this.appliedTransformations < 4){
                this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]);
            }
            if (this.autoOriented) {
                var v1,v2, frameRate = this.elem.globalData.frameRate;
                if(this.p && this.p.keyframes && this.p.getValueAtTime) {
                    if (this.p._caching.lastFrame+this.p.offsetTime <= this.p.keyframes[0].t) {
                        v1 = this.p.getValueAtTime((this.p.keyframes[0].t + 0.01) / frameRate,0);
                        v2 = this.p.getValueAtTime(this.p.keyframes[0].t / frameRate, 0);
                    } else if(this.p._caching.lastFrame+this.p.offsetTime >= this.p.keyframes[this.p.keyframes.length - 1].t) {
                        v1 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t / frameRate), 0);
                        v2 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t - 0.01) / frameRate, 0);
                    } else {
                        v1 = this.p.pv;
                        v2 = this.p.getValueAtTime((this.p._caching.lastFrame+this.p.offsetTime - 0.01) / frameRate, this.p.offsetTime);
                    }
                } else if(this.px && this.px.keyframes && this.py.keyframes && this.px.getValueAtTime && this.py.getValueAtTime) {
                    v1 = [];
                    v2 = [];
                    var px = this.px, py = this.py, frameRate;
                    if (px._caching.lastFrame+px.offsetTime <= px.keyframes[0].t) {
                        v1[0] = px.getValueAtTime((px.keyframes[0].t + 0.01) / frameRate,0);
                        v1[1] = py.getValueAtTime((py.keyframes[0].t + 0.01) / frameRate,0);
                        v2[0] = px.getValueAtTime((px.keyframes[0].t) / frameRate,0);
                        v2[1] = py.getValueAtTime((py.keyframes[0].t) / frameRate,0);
                    } else if(px._caching.lastFrame+px.offsetTime >= px.keyframes[px.keyframes.length - 1].t) {
                        v1[0] = px.getValueAtTime((px.keyframes[px.keyframes.length - 1].t / frameRate),0);
                        v1[1] = py.getValueAtTime((py.keyframes[py.keyframes.length - 1].t / frameRate),0);
                        v2[0] = px.getValueAtTime((px.keyframes[px.keyframes.length - 1].t - 0.01) / frameRate,0);
                        v2[1] = py.getValueAtTime((py.keyframes[py.keyframes.length - 1].t - 0.01) / frameRate,0);
                    } else {
                        v1 = [px.pv, py.pv];
                        v2[0] = px.getValueAtTime((px._caching.lastFrame+px.offsetTime - 0.01) / frameRate,px.offsetTime);
                        v2[1] = py.getValueAtTime((py._caching.lastFrame+py.offsetTime - 0.01) / frameRate,py.offsetTime);
                    }
                }
                this.v.rotate(-Math.atan2(v1[1] - v2[1], v1[0] - v2[0]));
            }
            if(this.data.p && this.data.p.s){
                if(this.data.p.z) {
                    this.v.translate(this.px.v, this.py.v, -this.pz.v);
                } else {
                    this.v.translate(this.px.v, this.py.v, 0);
                }
            }else{
                this.v.translate(this.p.v[0],this.p.v[1],-this.p.v[2]);
            }
        }
        this.frameId = this.elem.globalData.frameId;
    }

    function precalculateMatrix() {
        if(!this.a.k) {
            this.pre.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);
            this.appliedTransformations = 1;
        } else {
            return;
        }
        if(!this.s.effectsSequence.length) {
            this.pre.scale(this.s.v[0], this.s.v[1], this.s.v[2]);
            this.appliedTransformations = 2;
        } else {
            return;
        }
        if(this.sk) {
            if(!this.sk.effectsSequence.length && !this.sa.effectsSequence.length) {
                this.pre.skewFromAxis(-this.sk.v, this.sa.v);
            this.appliedTransformations = 3;
            } else {
                return;
            }
        }
        if (this.r) {
            if(!this.r.effectsSequence.length) {
                this.pre.rotate(-this.r.v);
                this.appliedTransformations = 4;
            } else {
                return;
            }
        } else if(!this.rz.effectsSequence.length && !this.ry.effectsSequence.length && !this.rx.effectsSequence.length && !this.or.effectsSequence.length) {
            this.pre.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]);
            this.appliedTransformations = 4;
        }
    }

    function autoOrient(){
        //
        //var prevP = this.getValueAtTime();
    }

    function addDynamicProperty(prop) {
        this._addDynamicProperty(prop);
        this.elem.addDynamicProperty(prop);
        this._isDirty = true;
    }

    function TransformProperty(elem,data,container){
        this.elem = elem;
        this.frameId = -1;
        this.propType = 'transform';
        this.data = data;
        this.v = new Matrix();
        //Precalculated matrix with non animated properties
        this.pre = new Matrix();
        this.appliedTransformations = 0;
        this.initDynamicPropertyContainer(container || elem);
        if(data.p && data.p.s){
            this.px = PropertyFactory.getProp(elem,data.p.x,0,0,this);
            this.py = PropertyFactory.getProp(elem,data.p.y,0,0,this);
            if(data.p.z){
                this.pz = PropertyFactory.getProp(elem,data.p.z,0,0,this);
            }
        }else{
            this.p = PropertyFactory.getProp(elem,data.p || {k:[0,0,0]},1,0,this);
        }
        if(data.rx) {
            this.rx = PropertyFactory.getProp(elem, data.rx, 0, degToRads, this);
            this.ry = PropertyFactory.getProp(elem, data.ry, 0, degToRads, this);
            this.rz = PropertyFactory.getProp(elem, data.rz, 0, degToRads, this);
            if(data.or.k[0].ti) {
                var i, len = data.or.k.length;
                for(i=0;i<len;i+=1) {
                    data.or.k[i].to = data.or.k[i].ti = null;
                }
            }
            this.or = PropertyFactory.getProp(elem, data.or, 1, degToRads, this);
            //sh Indicates it needs to be capped between -180 and 180
            this.or.sh = true;
        } else {
            this.r = PropertyFactory.getProp(elem, data.r || {k: 0}, 0, degToRads, this);
        }
        if(data.sk){
            this.sk = PropertyFactory.getProp(elem, data.sk, 0, degToRads, this);
            this.sa = PropertyFactory.getProp(elem, data.sa, 0, degToRads, this);
        }
        this.a = PropertyFactory.getProp(elem,data.a || {k:[0,0,0]},1,0,this);
        this.s = PropertyFactory.getProp(elem,data.s || {k:[100,100,100]},1,0.01,this);
        // Opacity is not part of the transform properties, that's why it won't use this.dynamicProperties. That way transforms won't get updated if opacity changes.
        if(data.o){
            this.o = PropertyFactory.getProp(elem,data.o,0,0.01,elem);
        } else {
            this.o = {_mdf:false,v:1};
        }
        this._isDirty = true;
        if(!this.dynamicProperties.length){
            this.getValue(true);
        }
    }

    TransformProperty.prototype = {
        applyToMatrix: applyToMatrix,
        getValue: processKeys,
        precalculateMatrix: precalculateMatrix,
        autoOrient: autoOrient
    };

    extendPrototype([DynamicPropertyContainer], TransformProperty);
    TransformProperty.prototype.addDynamicProperty = addDynamicProperty;
    TransformProperty.prototype._addDynamicProperty = DynamicPropertyContainer.prototype.addDynamicProperty;

    function getTransformProperty(elem,data,container){
        return new TransformProperty(elem,data,container);
    }

    return {
        getTransformProperty: getTransformProperty
    };

}());
function ShapePath(){
	this.c = false;
	this._length = 0;
	this._maxLength = 8;
	this.v = createSizedArray(this._maxLength);
	this.o = createSizedArray(this._maxLength);
	this.i = createSizedArray(this._maxLength);
}

ShapePath.prototype.setPathData = function(closed, len) {
	this.c = closed;
	this.setLength(len);
	var i = 0;
	while(i < len){
		this.v[i] = point_pool.newElement();
		this.o[i] = point_pool.newElement();
		this.i[i] = point_pool.newElement();
		i += 1;
	}
};

ShapePath.prototype.setLength = function(len) {
	while(this._maxLength < len) {
		this.doubleArrayLength();
	}
	this._length = len;
};

ShapePath.prototype.doubleArrayLength = function() {
	this.v = this.v.concat(createSizedArray(this._maxLength));
	this.i = this.i.concat(createSizedArray(this._maxLength));
	this.o = this.o.concat(createSizedArray(this._maxLength));
	this._maxLength *= 2;
};

ShapePath.prototype.setXYAt = function(x, y, type, pos, replace) {
	var arr;
	this._length = Math.max(this._length, pos + 1);
	if(this._length >= this._maxLength) {
		this.doubleArrayLength();
	}
	switch(type){
		case 'v':
			arr = this.v;
			break;
		case 'i':
			arr = this.i;
			break;
		case 'o':
			arr = this.o;
			break;
	}
	if(!arr[pos] || (arr[pos] && !replace)){
		arr[pos] = point_pool.newElement();
	}
	arr[pos][0] = x;
	arr[pos][1] = y;
};

ShapePath.prototype.setTripleAt = function(vX,vY,oX,oY,iX,iY,pos, replace) {
	this.setXYAt(vX,vY,'v',pos, replace);
	this.setXYAt(oX,oY,'o',pos, replace);
	this.setXYAt(iX,iY,'i',pos, replace);
};

ShapePath.prototype.reverse = function() {
	var newPath = new ShapePath();
	newPath.setPathData(this.c, this._length);
	var vertices = this.v, outPoints = this.o, inPoints = this.i;
	var init = 0;
	if (this.c) {
		newPath.setTripleAt(vertices[0][0], vertices[0][1], inPoints[0][0], inPoints[0][1], outPoints[0][0], outPoints[0][1], 0, false);
        init = 1;
    }
    var cnt = this._length - 1;
    var len = this._length;

    var i;
    for (i = init; i < len; i += 1) {
    	newPath.setTripleAt(vertices[cnt][0], vertices[cnt][1], inPoints[cnt][0], inPoints[cnt][1], outPoints[cnt][0], outPoints[cnt][1], i, false);
        cnt -= 1;
    }
    return newPath;
};
var ShapePropertyFactory = (function(){

    var initFrame = -999999;

    function interpolateShape(frameNum, previousValue, caching) {
        var iterationIndex = caching.lastIndex;
        var keyPropS,keyPropE,isHold, j, k, jLen, kLen, perc, vertexValue;
        var kf = this.keyframes;
        if(frameNum < kf[0].t-this.offsetTime){
            keyPropS = kf[0].s[0];
            isHold = true;
            iterationIndex = 0;
        }else if(frameNum >= kf[kf.length - 1].t-this.offsetTime){
            keyPropS = kf[kf.length - 1].s ? kf[kf.length - 1].s[0] : kf[kf.length - 2].e[0];
            /*if(kf[kf.length - 1].s){
                keyPropS = kf[kf.length - 1].s[0];
            }else{
                keyPropS = kf[kf.length - 2].e[0];
            }*/
            isHold = true;
        }else{
            var i = iterationIndex;
            var len = kf.length- 1,flag = true,keyData,nextKeyData;
            while(flag){
                keyData = kf[i];
                nextKeyData = kf[i+1];
                if((nextKeyData.t - this.offsetTime) > frameNum){
                    break;
                }
                if(i < len - 1){
                    i += 1;
                }else{
                    flag = false;
                }
            }
            isHold = keyData.h === 1;
            iterationIndex = i;
            if(!isHold){
                if(frameNum >= nextKeyData.t-this.offsetTime){
                    perc = 1;
                }else if(frameNum < keyData.t-this.offsetTime){
                    perc = 0;
                }else{
                    var fnc;
                    if(keyData.__fnct){
                        fnc = keyData.__fnct;
                    }else{
                        fnc = BezierFactory.getBezierEasing(keyData.o.x,keyData.o.y,keyData.i.x,keyData.i.y).get;
                        keyData.__fnct = fnc;
                    }
                    perc = fnc((frameNum-(keyData.t-this.offsetTime))/((nextKeyData.t-this.offsetTime)-(keyData.t-this.offsetTime)));
                }
                keyPropE = nextKeyData.s ? nextKeyData.s[0] : keyData.e[0];
            }
            keyPropS = keyData.s[0];
        }
        jLen = previousValue._length;
        kLen = keyPropS.i[0].length;
        caching.lastIndex = iterationIndex;

        for(j=0;j<jLen;j+=1){
            for(k=0;k<kLen;k+=1){
                vertexValue = isHold ? keyPropS.i[j][k] :  keyPropS.i[j][k]+(keyPropE.i[j][k]-keyPropS.i[j][k])*perc;
                previousValue.i[j][k] = vertexValue;
                vertexValue = isHold ? keyPropS.o[j][k] :  keyPropS.o[j][k]+(keyPropE.o[j][k]-keyPropS.o[j][k])*perc;
                previousValue.o[j][k] = vertexValue;
                vertexValue = isHold ? keyPropS.v[j][k] :  keyPropS.v[j][k]+(keyPropE.v[j][k]-keyPropS.v[j][k])*perc;
                previousValue.v[j][k] = vertexValue;
            }
        }
    }

    function interpolateShapeCurrentTime(){
        var frameNum = this.comp.renderedFrame - this.offsetTime;
        var initTime = this.keyframes[0].t - this.offsetTime;
        var endTime = this.keyframes[this.keyframes.length - 1].t - this.offsetTime;
        var lastFrame = this._caching.lastFrame;
        if(!(lastFrame !== initFrame && ((lastFrame < initTime && frameNum < initTime) || (lastFrame > endTime && frameNum > endTime)))){
            ////
            this._caching.lastIndex = lastFrame < frameNum ? this._caching.lastIndex : 0;
            this.interpolateShape(frameNum, this.pv, this._caching);
            ////
        }
        this._caching.lastFrame = frameNum;
        return this.pv;
    }

    function resetShape(){
        this.paths = this.localShapeCollection;
    }

    function shapesEqual(shape1, shape2) {
        if(shape1._length !== shape2._length || shape1.c !== shape2.c){
            return false;
        }
        var i, len = shape1._length;
        for(i = 0; i < len; i += 1) {
            if(shape1.v[i][0] !== shape2.v[i][0] 
            || shape1.v[i][1] !== shape2.v[i][1] 
            || shape1.o[i][0] !== shape2.o[i][0] 
            || shape1.o[i][1] !== shape2.o[i][1] 
            || shape1.i[i][0] !== shape2.i[i][0] 
            || shape1.i[i][1] !== shape2.i[i][1]) {
                return false;
            }
        }
        return true;
    }

    function setVValue(newPath) {
        if(!shapesEqual(this.v, newPath)) {
            this.v = shape_pool.clone(newPath);
            this.localShapeCollection.releaseShapes();
            this.localShapeCollection.addShape(this.v);
            this._mdf = true;
            this.paths = this.localShapeCollection;
        }
    }

    function processEffectsSequence() {
        if(this.elem.globalData.frameId === this.frameId || !this.effectsSequence.length) {
            return;
        }
        if(this.lock) {
            this.setVValue(this.pv);
            return;
        }
        this.lock = true;
        this._mdf = false;
        var finalValue = this.kf ? this.pv : this.data.ks ? this.data.ks.k : this.data.pt.k;
        var i, len = this.effectsSequence.length;
        for(i = 0; i < len; i += 1) {
            finalValue = this.effectsSequence[i](finalValue);
        }
        this.setVValue(finalValue);
        this.lock = false;
        this.frameId = this.elem.globalData.frameId;
    }
    function ShapeProperty(elem, data, type){
        this.propType = 'shape';
        this.comp = elem.comp;
        this.container = elem;
        this.elem = elem;
        this.data = data;
        this.k = false;
        this.kf = false;
        this._mdf = false;
        var pathData = type === 3 ? data.pt.k : data.ks.k;
        this.v = shape_pool.clone(pathData);
        this.pv = shape_pool.clone(this.v);
        this.localShapeCollection = shapeCollection_pool.newShapeCollection();
        this.paths = this.localShapeCollection;
        this.paths.addShape(this.v);
        this.reset = resetShape;
        this.effectsSequence = [];
    }

    function addEffect(effectFunction) {
        this.effectsSequence.push(effectFunction);
        this.container.addDynamicProperty(this);
    }

    ShapeProperty.prototype.interpolateShape = interpolateShape;
    ShapeProperty.prototype.getValue = processEffectsSequence;
    ShapeProperty.prototype.setVValue = setVValue;
    ShapeProperty.prototype.addEffect = addEffect;

    function KeyframedShapeProperty(elem,data,type){
        this.propType = 'shape';
        this.comp = elem.comp;
        this.elem = elem;
        this.container = elem;
        this.offsetTime = elem.data.st;
        this.keyframes = type === 3 ? data.pt.k : data.ks.k;
        this.k = true;
        this.kf = true;
        var len = this.keyframes[0].s[0].i.length;
        var jLen = this.keyframes[0].s[0].i[0].length;
        this.v = shape_pool.newElement();
        this.v.setPathData(this.keyframes[0].s[0].c, len);
        this.pv = shape_pool.clone(this.v);
        this.localShapeCollection = shapeCollection_pool.newShapeCollection();
        this.paths = this.localShapeCollection;
        this.paths.addShape(this.v);
        this.lastFrame = initFrame;
        this.reset = resetShape;
        this._caching = {lastFrame: initFrame, lastIndex: 0};
        this.effectsSequence = [interpolateShapeCurrentTime.bind(this)];
    }
    KeyframedShapeProperty.prototype.getValue = processEffectsSequence;
    KeyframedShapeProperty.prototype.interpolateShape = interpolateShape;
    KeyframedShapeProperty.prototype.setVValue = setVValue;
    KeyframedShapeProperty.prototype.addEffect = addEffect;

    var EllShapeProperty = (function(){

        var cPoint = roundCorner;

        function EllShapeProperty(elem,data) {
            /*this.v = {
                v: createSizedArray(4),
                i: createSizedArray(4),
                o: createSizedArray(4),
                c: true
            };*/
            this.v = shape_pool.newElement();
            this.v.setPathData(true, 4);
            this.localShapeCollection = shapeCollection_pool.newShapeCollection();
            this.paths = this.localShapeCollection;
            this.localShapeCollection.addShape(this.v);
            this.d = data.d;
            this.elem = elem;
            this.comp = elem.comp;
            this.frameId = -1;
            this.initDynamicPropertyContainer(elem);
            this.p = PropertyFactory.getProp(elem,data.p,1,0,this);
            this.s = PropertyFactory.getProp(elem,data.s,1,0,this);
            if(this.dynamicProperties.length){
                this.k = true;
            }else{
                this.k = false;
                this.convertEllToPath();
            }
        }
        EllShapeProperty.prototype = {
            reset: resetShape,
            getValue: function (){
                if(this.elem.globalData.frameId === this.frameId){
                    return;
                }
                this.frameId = this.elem.globalData.frameId;
                this.iterateDynamicProperties();

                if(this._mdf){
                    this.convertEllToPath();
                }
            },
            convertEllToPath: function() {
                var p0 = this.p.v[0], p1 = this.p.v[1], s0 = this.s.v[0]/2, s1 = this.s.v[1]/2;
                var _cw = this.d !== 3;
                var _v = this.v;
                _v.v[0][0] = p0;
                _v.v[0][1] = p1 - s1;
                _v.v[1][0] = _cw ? p0 + s0 : p0 - s0;
                _v.v[1][1] = p1;
                _v.v[2][0] = p0;
                _v.v[2][1] = p1 + s1;
                _v.v[3][0] = _cw ? p0 - s0 : p0 + s0;
                _v.v[3][1] = p1;
                _v.i[0][0] = _cw ? p0 - s0 * cPoint : p0 + s0 * cPoint;
                _v.i[0][1] = p1 - s1;
                _v.i[1][0] = _cw ? p0 + s0 : p0 - s0;
                _v.i[1][1] = p1 - s1 * cPoint;
                _v.i[2][0] = _cw ? p0 + s0 * cPoint : p0 - s0 * cPoint;
                _v.i[2][1] = p1 + s1;
                _v.i[3][0] = _cw ? p0 - s0 : p0 + s0;
                _v.i[3][1] = p1 + s1 * cPoint;
                _v.o[0][0] = _cw ? p0 + s0 * cPoint : p0 - s0 * cPoint;
                _v.o[0][1] = p1 - s1;
                _v.o[1][0] = _cw ? p0 + s0 : p0 - s0;
                _v.o[1][1] = p1 + s1 * cPoint;
                _v.o[2][0] = _cw ? p0 - s0 * cPoint : p0 + s0 * cPoint;
                _v.o[2][1] = p1 + s1;
                _v.o[3][0] = _cw ? p0 - s0 : p0 + s0;
                _v.o[3][1] = p1 - s1 * cPoint;
            }
        };

        extendPrototype([DynamicPropertyContainer], EllShapeProperty);

        return EllShapeProperty;
    }());

    var StarShapeProperty = (function() {

        function StarShapeProperty(elem,data) {
            this.v = shape_pool.newElement();
            this.v.setPathData(true, 0);
            this.elem = elem;
            this.comp = elem.comp;
            this.data = data;
            this.frameId = -1;
            this.d = data.d;
            this.initDynamicPropertyContainer(elem);
            if(data.sy === 1){
                this.ir = PropertyFactory.getProp(elem,data.ir,0,0,this);
                this.is = PropertyFactory.getProp(elem,data.is,0,0.01,this);
                this.convertToPath = this.convertStarToPath;
            } else {
                this.convertToPath = this.convertPolygonToPath;
            }
            this.pt = PropertyFactory.getProp(elem,data.pt,0,0,this);
            this.p = PropertyFactory.getProp(elem,data.p,1,0,this);
            this.r = PropertyFactory.getProp(elem,data.r,0,degToRads,this);
            this.or = PropertyFactory.getProp(elem,data.or,0,0,this);
            this.os = PropertyFactory.getProp(elem,data.os,0,0.01,this);
            this.localShapeCollection = shapeCollection_pool.newShapeCollection();
            this.localShapeCollection.addShape(this.v);
            this.paths = this.localShapeCollection;
            if(this.dynamicProperties.length){
                this.k = true;
            }else{
                this.k = false;
                this.convertToPath();
            }
        }
        StarShapeProperty.prototype = {
            reset: resetShape,
            getValue: function() {
                if(this.elem.globalData.frameId === this.frameId){
                    return;
                }
                this.frameId = this.elem.globalData.frameId;
                this.iterateDynamicProperties();
                if(this._mdf){
                    this.convertToPath();
                }
            },
            convertStarToPath: function() {
                var numPts = Math.floor(this.pt.v)*2;
                var angle = Math.PI*2/numPts;
                /*this.v.v.length = numPts;
                this.v.i.length = numPts;
                this.v.o.length = numPts;*/
                var longFlag = true;
                var longRad = this.or.v;
                var shortRad = this.ir.v;
                var longRound = this.os.v;
                var shortRound = this.is.v;
                var longPerimSegment = 2*Math.PI*longRad/(numPts*2);
                var shortPerimSegment = 2*Math.PI*shortRad/(numPts*2);
                var i, rad,roundness,perimSegment, currentAng = -Math.PI/ 2;
                currentAng += this.r.v;
                var dir = this.data.d === 3 ? -1 : 1;
                this.v._length = 0;
                for(i=0;i<numPts;i+=1){
                    rad = longFlag ? longRad : shortRad;
                    roundness = longFlag ? longRound : shortRound;
                    perimSegment = longFlag ? longPerimSegment : shortPerimSegment;
                    var x = rad * Math.cos(currentAng);
                    var y = rad * Math.sin(currentAng);
                    var ox = x === 0 && y === 0 ? 0 : y/Math.sqrt(x*x + y*y);
                    var oy = x === 0 && y === 0 ? 0 : -x/Math.sqrt(x*x + y*y);
                    x +=  + this.p.v[0];
                    y +=  + this.p.v[1];
                    this.v.setTripleAt(x,y,x-ox*perimSegment*roundness*dir,y-oy*perimSegment*roundness*dir,x+ox*perimSegment*roundness*dir,y+oy*perimSegment*roundness*dir, i, true);

                    /*this.v.v[i] = [x,y];
                    this.v.i[i] = [x+ox*perimSegment*roundness*dir,y+oy*perimSegment*roundness*dir];
                    this.v.o[i] = [x-ox*perimSegment*roundness*dir,y-oy*perimSegment*roundness*dir];
                    this.v._length = numPts;*/
                    longFlag = !longFlag;
                    currentAng += angle*dir;
                }
            },
            convertPolygonToPath: function() {
                var numPts = Math.floor(this.pt.v);
                var angle = Math.PI*2/numPts;
                var rad = this.or.v;
                var roundness = this.os.v;
                var perimSegment = 2*Math.PI*rad/(numPts*4);
                var i, currentAng = -Math.PI/ 2;
                var dir = this.data.d === 3 ? -1 : 1;
                currentAng += this.r.v;
                this.v._length = 0;
                for(i=0;i<numPts;i+=1){
                    var x = rad * Math.cos(currentAng);
                    var y = rad * Math.sin(currentAng);
                    var ox = x === 0 && y === 0 ? 0 : y/Math.sqrt(x*x + y*y);
                    var oy = x === 0 && y === 0 ? 0 : -x/Math.sqrt(x*x + y*y);
                    x +=  + this.p.v[0];
                    y +=  + this.p.v[1];
                    this.v.setTripleAt(x,y,x-ox*perimSegment*roundness*dir,y-oy*perimSegment*roundness*dir,x+ox*perimSegment*roundness*dir,y+oy*perimSegment*roundness*dir, i, true);
                    currentAng += angle*dir;
                }
                this.paths.length = 0;
                this.paths[0] = this.v;
            }

        };
        extendPrototype([DynamicPropertyContainer], StarShapeProperty);

        return StarShapeProperty;
    }());

    var RectShapeProperty = (function() {

         function RectShapeProperty(elem,data) {
            this.v = shape_pool.newElement();
            this.v.c = true;
            this.localShapeCollection = shapeCollection_pool.newShapeCollection();
            this.localShapeCollection.addShape(this.v);
            this.paths = this.localShapeCollection;
            this.elem = elem;
            this.comp = elem.comp;
            this.frameId = -1;
            this.d = data.d;
            this.initDynamicPropertyContainer(elem);
            this.p = PropertyFactory.getProp(elem,data.p,1,0,this);
            this.s = PropertyFactory.getProp(elem,data.s,1,0,this);
            this.r = PropertyFactory.getProp(elem,data.r,0,0,this);
            if(this.dynamicProperties.length){
                this.k = true;
            }else{
                this.k = false;
                this.convertRectToPath();
            }
        }
        RectShapeProperty.prototype = {
            convertRectToPath: function (){
                var p0 = this.p.v[0], p1 = this.p.v[1], v0 = this.s.v[0]/2, v1 = this.s.v[1]/2;
                var round = bm_min(v0,v1,this.r.v);
                var cPoint = round*(1-roundCorner);
                this.v._length = 0;

                if(this.d === 2 || this.d === 1) {
                    this.v.setTripleAt(p0+v0, p1-v1+round,p0+v0, p1-v1+round,p0+v0,p1-v1+cPoint,0, true);
                    this.v.setTripleAt(p0+v0, p1+v1-round,p0+v0, p1+v1-cPoint,p0+v0, p1+v1-round,1, true);
                    if(round!== 0){
                        this.v.setTripleAt(p0+v0-round, p1+v1,p0+v0-round,p1+v1,p0+v0-cPoint,p1+v1,2, true);
                        this.v.setTripleAt(p0-v0+round,p1+v1,p0-v0+cPoint,p1+v1,p0-v0+round,p1+v1,3, true);
                        this.v.setTripleAt(p0-v0,p1+v1-round,p0-v0,p1+v1-round,p0-v0,p1+v1-cPoint,4, true);
                        this.v.setTripleAt(p0-v0,p1-v1+round,p0-v0,p1-v1+cPoint,p0-v0,p1-v1+round,5, true);
                        this.v.setTripleAt(p0-v0+round,p1-v1,p0-v0+round,p1-v1,p0-v0+cPoint,p1-v1,6, true);
                        this.v.setTripleAt(p0+v0-round,p1-v1,p0+v0-cPoint,p1-v1,p0+v0-round,p1-v1,7, true);
                    } else {
                        this.v.setTripleAt(p0-v0,p1+v1,p0-v0+cPoint,p1+v1,p0-v0,p1+v1,2);
                        this.v.setTripleAt(p0-v0,p1-v1,p0-v0,p1-v1+cPoint,p0-v0,p1-v1,3);
                    }
                }else{
                    this.v.setTripleAt(p0+v0,p1-v1+round,p0+v0,p1-v1+cPoint,p0+v0,p1-v1+round,0, true);
                    if(round!== 0){
                        this.v.setTripleAt(p0+v0-round,p1-v1,p0+v0-round,p1-v1,p0+v0-cPoint,p1-v1,1, true);
                        this.v.setTripleAt(p0-v0+round,p1-v1,p0-v0+cPoint,p1-v1,p0-v0+round,p1-v1,2, true);
                        this.v.setTripleAt(p0-v0,p1-v1+round,p0-v0,p1-v1+round,p0-v0,p1-v1+cPoint,3, true);
                        this.v.setTripleAt(p0-v0,p1+v1-round,p0-v0,p1+v1-cPoint,p0-v0,p1+v1-round,4, true);
                        this.v.setTripleAt(p0-v0+round,p1+v1,p0-v0+round,p1+v1,p0-v0+cPoint,p1+v1,5, true);
                        this.v.setTripleAt(p0+v0-round,p1+v1,p0+v0-cPoint,p1+v1,p0+v0-round,p1+v1,6, true);
                        this.v.setTripleAt(p0+v0,p1+v1-round,p0+v0,p1+v1-round,p0+v0,p1+v1-cPoint,7, true);
                    } else {
                        this.v.setTripleAt(p0-v0,p1-v1,p0-v0+cPoint,p1-v1,p0-v0,p1-v1,1, true);
                        this.v.setTripleAt(p0-v0,p1+v1,p0-v0,p1+v1-cPoint,p0-v0,p1+v1,2, true);
                        this.v.setTripleAt(p0+v0,p1+v1,p0+v0-cPoint,p1+v1,p0+v0,p1+v1,3, true);

                    }
                }
            },
            getValue: function(frameNum){
                if(this.elem.globalData.frameId === this.frameId){
                    return;
                }
                this.frameId = this.elem.globalData.frameId;
                this.iterateDynamicProperties();
                if(this._mdf){
                    this.convertRectToPath();
                }

            },
            reset: resetShape
        };
        extendPrototype([DynamicPropertyContainer], RectShapeProperty);

        return RectShapeProperty;
    }());

    function getShapeProp(elem,data,type){
        var prop;
        if(type === 3 || type === 4){
            var dataProp = type === 3 ? data.pt : data.ks;
            var keys = dataProp.k;
            if(keys.length){
                prop = new KeyframedShapeProperty(elem, data, type);
            }else{
                prop = new ShapeProperty(elem, data, type);
            }
        }else if(type === 5){
            prop = new RectShapeProperty(elem, data);
        }else if(type === 6){
            prop = new EllShapeProperty(elem, data);
        }else if(type === 7){
            prop = new StarShapeProperty(elem, data);
        }
        if(prop.k){
            elem.addDynamicProperty(prop);
        }
        return prop;
    }

    function getConstructorFunction() {
        return ShapeProperty;
    }

    function getKeyframedConstructorFunction() {
        return KeyframedShapeProperty;
    }

    var ob = {};
    ob.getShapeProp = getShapeProp;
    ob.getConstructorFunction = getConstructorFunction;
    ob.getKeyframedConstructorFunction = getKeyframedConstructorFunction;
    return ob;
}());
var ShapeModifiers = (function(){
    var ob = {};
    var modifiers = {};
    ob.registerModifier = registerModifier;
    ob.getModifier = getModifier;

    function registerModifier(nm,factory){
        if(!modifiers[nm]){
            modifiers[nm] = factory;
        }
    }

    function getModifier(nm,elem, data){
        return new modifiers[nm](elem, data);
    }

    return ob;
}());

function ShapeModifier(){}
ShapeModifier.prototype.initModifierProperties = function(){};
ShapeModifier.prototype.addShapeToModifier = function(){};
ShapeModifier.prototype.addShape = function(data){
    if(!this.closed){
        var shapeData = {shape:data.sh, data: data, localShapeCollection:shapeCollection_pool.newShapeCollection()};
        this.shapes.push(shapeData);
        this.addShapeToModifier(shapeData);
        if(this._isAnimated) {
            data.setAsAnimated();
        }
    }
};
ShapeModifier.prototype.init = function(elem,data){
    this.shapes = [];
    this.elem = elem;
    this.initDynamicPropertyContainer(elem);
    this.initModifierProperties(elem,data);
    this.frameId = initialDefaultFrame;
    this.closed = false;
    this.k = false;
    if(this.dynamicProperties.length){
        this.k = true;
    }else{
        this.getValue(true);
    }
};
ShapeModifier.prototype.processKeys = function(){
    if(this.elem.globalData.frameId === this.frameId){
        return;
    }
    this.frameId = this.elem.globalData.frameId;
    this.iterateDynamicProperties();
};

extendPrototype([DynamicPropertyContainer], ShapeModifier);
function TrimModifier(){
}
extendPrototype([ShapeModifier], TrimModifier);
TrimModifier.prototype.initModifierProperties = function(elem, data) {
    this.s = PropertyFactory.getProp(elem, data.s, 0, 0.01, this);
    this.e = PropertyFactory.getProp(elem, data.e, 0, 0.01, this);
    this.o = PropertyFactory.getProp(elem, data.o, 0, 0, this);
    this.sValue = 0;
    this.eValue = 0;
    this.getValue = this.processKeys;
    this.m = data.m;
    this._isAnimated = !!this.s.effectsSequence.length || !!this.e.effectsSequence.length || !!this.o.effectsSequence.length;
};

TrimModifier.prototype.addShapeToModifier = function(shapeData){
    shapeData.pathsData = [];
};

TrimModifier.prototype.calculateShapeEdges = function(s, e, shapeLength, addedLength, totalModifierLength) {
    var segments = [];
    if (e <= 1) {
        segments.push({
            s: s,
            e: e
        });
    } else if (s >= 1) {
        segments.push({
            s: s - 1,
            e: e - 1
        });
    } else {
        segments.push({
            s: s,
            e: 1
        });
        segments.push({
            s: 0,
            e: e - 1
        });
    }
    var shapeSegments = [];
    var i, len = segments.length, segmentOb;
    for (i = 0; i < len; i += 1) {
        segmentOb = segments[i];
        if (segmentOb.e * totalModifierLength < addedLength || segmentOb.s * totalModifierLength > addedLength + shapeLength) ; else {
            var shapeS, shapeE;
            if (segmentOb.s * totalModifierLength <= addedLength) {
                shapeS = 0;
            } else {
                shapeS = (segmentOb.s * totalModifierLength - addedLength) / shapeLength;
            }
            if(segmentOb.e * totalModifierLength >= addedLength + shapeLength) {
                shapeE = 1;
            } else {
                shapeE = ((segmentOb.e * totalModifierLength - addedLength) / shapeLength);
            }
            shapeSegments.push([shapeS, shapeE]);
        }
    }
    if (!shapeSegments.length) {
        shapeSegments.push([0, 0]);
    }
    return shapeSegments;
};

TrimModifier.prototype.releasePathsData = function(pathsData) {
    var i, len = pathsData.length;
    for (i = 0; i < len; i += 1) {
        segments_length_pool.release(pathsData[i]);
    }
    pathsData.length = 0;
    return pathsData;
};

TrimModifier.prototype.processShapes = function(_isFirstFrame) {
    var s, e;
    if (this._mdf || _isFirstFrame) {
        var o = (this.o.v % 360) / 360;
        if (o < 0) {
            o += 1;
        }
        s = (this.s.v > 1 ? 1 : this.s.v < 0 ? 0 : this.s.v) + o;
        e = (this.e.v > 1 ? 1 : this.e.v < 0 ? 0 : this.e.v) + o;
        if (s > e) {
            var _s = s;
            s = e;
            e = _s;
        }
        s = Math.round(s * 10000) * 0.0001;
        e = Math.round(e * 10000) * 0.0001;
        this.sValue = s;
        this.eValue = e;
    } else {
        s = this.sValue;
        e = this.eValue;
    }
    var shapePaths;
    var i, len = this.shapes.length, j, jLen;
    var pathsData, pathData, totalShapeLength, totalModifierLength = 0;

    if (e === s) {
        for (i = 0; i < len; i += 1) {
            this.shapes[i].localShapeCollection.releaseShapes();
            this.shapes[i].shape._mdf = true;
            this.shapes[i].shape.paths = this.shapes[i].localShapeCollection;
        }
    } else if (!((e === 1 && s === 0) || (e===0 && s === 1))){
        var segments = [], shapeData, localShapeCollection;
        for (i = 0; i < len; i += 1) {
            shapeData = this.shapes[i];
            // if shape hasn't changed and trim properties haven't changed, cached previous path can be used
            if (!shapeData.shape._mdf && !this._mdf && !_isFirstFrame && this.m !== 2) {
                shapeData.shape.paths = shapeData.localShapeCollection;
            } else {
                shapePaths = shapeData.shape.paths;
                jLen = shapePaths._length;
                totalShapeLength = 0;
                if (!shapeData.shape._mdf && shapeData.pathsData.length) {
                    totalShapeLength = shapeData.totalShapeLength;
                } else {
                    pathsData = this.releasePathsData(shapeData.pathsData);
                    for (j = 0; j < jLen; j += 1) {
                        pathData = bez.getSegmentsLength(shapePaths.shapes[j]);
                        pathsData.push(pathData);
                        totalShapeLength += pathData.totalLength;
                    }
                    shapeData.totalShapeLength = totalShapeLength;
                    shapeData.pathsData = pathsData;
                }

                totalModifierLength += totalShapeLength;
                shapeData.shape._mdf = true;
            }
        }
        var shapeS = s, shapeE = e, addedLength = 0, edges;
        for (i = len - 1; i >= 0; i -= 1) {
            shapeData = this.shapes[i];
            if (shapeData.shape._mdf) {
                localShapeCollection = shapeData.localShapeCollection;
                localShapeCollection.releaseShapes();
                //if m === 2 means paths are trimmed individually so edges need to be found for this specific shape relative to whoel group
                if (this.m === 2 && len > 1) {
                    edges = this.calculateShapeEdges(s, e, shapeData.totalShapeLength, addedLength, totalModifierLength);
                    addedLength += shapeData.totalShapeLength;
                } else {
                    edges = [[shapeS, shapeE]];
                }
                jLen = edges.length;
                for (j = 0; j < jLen; j += 1) {
                    shapeS = edges[j][0];
                    shapeE = edges[j][1];
                    segments.length = 0;
                    if (shapeE <= 1) {
                        segments.push({
                            s:shapeData.totalShapeLength * shapeS,
                            e:shapeData.totalShapeLength * shapeE
                        });
                    } else if (shapeS >= 1) {
                        segments.push({
                            s:shapeData.totalShapeLength * (shapeS - 1),
                            e:shapeData.totalShapeLength * (shapeE - 1)
                        });
                    } else {
                        segments.push({
                            s:shapeData.totalShapeLength * shapeS,
                            e:shapeData.totalShapeLength
                        });
                        segments.push({
                            s:0,
                            e:shapeData.totalShapeLength * (shapeE - 1)
                        });
                    }
                    var newShapesData = this.addShapes(shapeData,segments[0]);
                    if (segments[0].s !== segments[0].e) {
                        if (segments.length > 1) {
                            var lastShapeInCollection = shapeData.shape.paths.shapes[shapeData.shape.paths._length - 1];
                            if (lastShapeInCollection.c) {
                                var lastShape = newShapesData.pop();
                                this.addPaths(newShapesData, localShapeCollection);
                                newShapesData = this.addShapes(shapeData, segments[1], lastShape);
                            } else {
                                this.addPaths(newShapesData, localShapeCollection);
                                newShapesData = this.addShapes(shapeData, segments[1]);
                            }
                        } 
                        this.addPaths(newShapesData, localShapeCollection);
                    }
                    
                }
                shapeData.shape.paths = localShapeCollection;
            }
        }
    } else if (this._mdf) {
        for (i = 0; i < len; i += 1) {
            //Releasign Trim Cached paths data when no trim applied in case shapes are modified inbetween.
            //Don't remove this even if it's losing cached info.
            this.shapes[i].pathsData.length = 0;
            this.shapes[i].shape._mdf = true;
        }
    }
};

TrimModifier.prototype.addPaths = function(newPaths, localShapeCollection) {
    var i, len = newPaths.length;
    for (i = 0; i < len; i += 1) {
        localShapeCollection.addShape(newPaths[i]);
    }
};

TrimModifier.prototype.addSegment = function(pt1, pt2, pt3, pt4, shapePath, pos, newShape) {
    shapePath.setXYAt(pt2[0], pt2[1], 'o', pos);
    shapePath.setXYAt(pt3[0], pt3[1], 'i', pos + 1);
    if(newShape){
        shapePath.setXYAt(pt1[0], pt1[1], 'v', pos);
    }
    shapePath.setXYAt(pt4[0], pt4[1], 'v', pos + 1);
};

TrimModifier.prototype.addSegmentFromArray = function(points, shapePath, pos, newShape) {
    shapePath.setXYAt(points[1], points[5], 'o', pos);
    shapePath.setXYAt(points[2], points[6], 'i', pos + 1);
    if(newShape){
        shapePath.setXYAt(points[0], points[4], 'v', pos);
    }
    shapePath.setXYAt(points[3], points[7], 'v', pos + 1);
};

TrimModifier.prototype.addShapes = function(shapeData, shapeSegment, shapePath) {
    var pathsData = shapeData.pathsData;
    var shapePaths = shapeData.shape.paths.shapes;
    var i, len = shapeData.shape.paths._length, j, jLen;
    var addedLength = 0;
    var currentLengthData,segmentCount;
    var lengths;
    var segment;
    var shapes = [];
    var initPos;
    var newShape = true;
    if (!shapePath) {
        shapePath = shape_pool.newElement();
        segmentCount = 0;
        initPos = 0;
    } else {
        segmentCount = shapePath._length;
        initPos = shapePath._length;
    }
    shapes.push(shapePath);
    for (i = 0; i < len; i += 1) {
        lengths = pathsData[i].lengths;
        shapePath.c = shapePaths[i].c;
        jLen = shapePaths[i].c ? lengths.length : lengths.length + 1;
        for (j = 1; j < jLen; j +=1) {
            currentLengthData = lengths[j-1];
            if (addedLength + currentLengthData.addedLength < shapeSegment.s) {
                addedLength += currentLengthData.addedLength;
                shapePath.c = false;
            } else if(addedLength > shapeSegment.e) {
                shapePath.c = false;
                break;
            } else {
                if (shapeSegment.s <= addedLength && shapeSegment.e >= addedLength + currentLengthData.addedLength) {
                    this.addSegment(shapePaths[i].v[j - 1], shapePaths[i].o[j - 1], shapePaths[i].i[j], shapePaths[i].v[j], shapePath, segmentCount, newShape);
                    newShape = false;
                } else {
                    segment = bez.getNewSegment(shapePaths[i].v[j - 1], shapePaths[i].v[j], shapePaths[i].o[j - 1], shapePaths[i].i[j], (shapeSegment.s - addedLength)/currentLengthData.addedLength,(shapeSegment.e - addedLength)/currentLengthData.addedLength, lengths[j-1]);
                    this.addSegmentFromArray(segment, shapePath, segmentCount, newShape);
                    // this.addSegment(segment.pt1, segment.pt3, segment.pt4, segment.pt2, shapePath, segmentCount, newShape);
                    newShape = false;
                    shapePath.c = false;
                }
                addedLength += currentLengthData.addedLength;
                segmentCount += 1;
            }
        }
        if (shapePaths[i].c && lengths.length) {
            currentLengthData = lengths[j - 1];
            if (addedLength <= shapeSegment.e) {
                var segmentLength = lengths[j - 1].addedLength;
                if (shapeSegment.s <= addedLength && shapeSegment.e >= addedLength + segmentLength) {
                    this.addSegment(shapePaths[i].v[j - 1], shapePaths[i].o[j - 1], shapePaths[i].i[0], shapePaths[i].v[0], shapePath, segmentCount, newShape);
                    newShape = false;
                } else {
                    segment = bez.getNewSegment(shapePaths[i].v[j - 1], shapePaths[i].v[0], shapePaths[i].o[j - 1], shapePaths[i].i[0], (shapeSegment.s - addedLength) / segmentLength, (shapeSegment.e - addedLength) / segmentLength, lengths[j - 1]);
                    this.addSegmentFromArray(segment, shapePath, segmentCount, newShape);
                    // this.addSegment(segment.pt1, segment.pt3, segment.pt4, segment.pt2, shapePath, segmentCount, newShape);
                    newShape = false;
                    shapePath.c = false;
                }
            } else {
                shapePath.c = false;
            }
            addedLength += currentLengthData.addedLength;
            segmentCount += 1;
        }
        if (shapePath._length) {
            shapePath.setXYAt(shapePath.v[initPos][0], shapePath.v[initPos][1], 'i', initPos);
            shapePath.setXYAt(shapePath.v[shapePath._length - 1][0], shapePath.v[shapePath._length - 1][1],'o', shapePath._length - 1);
        }
        if (addedLength > shapeSegment.e) {
            break;
        }
        if (i < len - 1) {
            shapePath = shape_pool.newElement();
            newShape = true;
            shapes.push(shapePath);
            segmentCount = 0;
        }
    }
    return shapes;
};


ShapeModifiers.registerModifier('tm', TrimModifier);
function RoundCornersModifier(){}
extendPrototype([ShapeModifier],RoundCornersModifier);
RoundCornersModifier.prototype.initModifierProperties = function(elem,data){
    this.getValue = this.processKeys;
    this.rd = PropertyFactory.getProp(elem,data.r,0,null,this);
    this._isAnimated = !!this.rd.effectsSequence.length;
};

RoundCornersModifier.prototype.processPath = function(path, round){
    var cloned_path = shape_pool.newElement();
    cloned_path.c = path.c;
    var i, len = path._length;
    var currentV,currentI,currentO,closerV, distance,newPosPerc,index = 0;
    var vX,vY,oX,oY,iX,iY;
    for(i=0;i<len;i+=1){
        currentV = path.v[i];
        currentO = path.o[i];
        currentI = path.i[i];
        if(currentV[0]===currentO[0] && currentV[1]===currentO[1] && currentV[0]===currentI[0] && currentV[1]===currentI[1]){
            if((i===0 || i === len - 1) && !path.c){
                cloned_path.setTripleAt(currentV[0],currentV[1],currentO[0],currentO[1],currentI[0],currentI[1],index);
                /*cloned_path.v[index] = currentV;
                cloned_path.o[index] = currentO;
                cloned_path.i[index] = currentI;*/
                index += 1;
            } else {
                if(i===0){
                    closerV = path.v[len-1];
                } else {
                    closerV = path.v[i-1];
                }
                distance = Math.sqrt(Math.pow(currentV[0]-closerV[0],2)+Math.pow(currentV[1]-closerV[1],2));
                newPosPerc = distance ? Math.min(distance/2,round)/distance : 0;
                vX = iX = currentV[0]+(closerV[0]-currentV[0])*newPosPerc;
                vY = iY = currentV[1]-(currentV[1]-closerV[1])*newPosPerc;
                oX = vX-(vX-currentV[0])*roundCorner;
                oY = vY-(vY-currentV[1])*roundCorner;
                cloned_path.setTripleAt(vX,vY,oX,oY,iX,iY,index);
                index += 1;

                if(i === len - 1){
                    closerV = path.v[0];
                } else {
                    closerV = path.v[i+1];
                }
                distance = Math.sqrt(Math.pow(currentV[0]-closerV[0],2)+Math.pow(currentV[1]-closerV[1],2));
                newPosPerc = distance ? Math.min(distance/2,round)/distance : 0;
                vX = oX = currentV[0]+(closerV[0]-currentV[0])*newPosPerc;
                vY = oY = currentV[1]+(closerV[1]-currentV[1])*newPosPerc;
                iX = vX-(vX-currentV[0])*roundCorner;
                iY = vY-(vY-currentV[1])*roundCorner;
                cloned_path.setTripleAt(vX,vY,oX,oY,iX,iY,index);
                index += 1;
            }
        } else {
            cloned_path.setTripleAt(path.v[i][0],path.v[i][1],path.o[i][0],path.o[i][1],path.i[i][0],path.i[i][1],index);
            index += 1;
        }
    }
    return cloned_path;
};

RoundCornersModifier.prototype.processShapes = function(_isFirstFrame){
    var shapePaths;
    var i, len = this.shapes.length;
    var j, jLen;
    var rd = this.rd.v;

    if(rd !== 0){
        var shapeData, newPaths, localShapeCollection;
        for(i=0;i<len;i+=1){
            shapeData = this.shapes[i];
            newPaths = shapeData.shape.paths;
            localShapeCollection = shapeData.localShapeCollection;
            if(!(!shapeData.shape._mdf && !this._mdf && !_isFirstFrame)){
                localShapeCollection.releaseShapes();
                shapeData.shape._mdf = true;
                shapePaths = shapeData.shape.paths.shapes;
                jLen = shapeData.shape.paths._length;
                for(j=0;j<jLen;j+=1){
                    localShapeCollection.addShape(this.processPath(shapePaths[j],rd));
                }
            }
            shapeData.shape.paths = shapeData.localShapeCollection;
        }

    }
    if(!this.dynamicProperties.length){
        this._mdf = false;
    }
};

ShapeModifiers.registerModifier('rd',RoundCornersModifier);
function RepeaterModifier(){}
extendPrototype([ShapeModifier], RepeaterModifier);

RepeaterModifier.prototype.initModifierProperties = function(elem,data){
    this.getValue = this.processKeys;
    this.c = PropertyFactory.getProp(elem,data.c,0,null,this);
    this.o = PropertyFactory.getProp(elem,data.o,0,null,this);
    this.tr = TransformPropertyFactory.getTransformProperty(elem,data.tr,this);
    this.so = PropertyFactory.getProp(elem,data.tr.so,0,0.01,this);
    this.eo = PropertyFactory.getProp(elem,data.tr.eo,0,0.01,this);
    this.data = data;
    if(!this.dynamicProperties.length){
        this.getValue(true);
    }
    this._isAnimated = !!this.dynamicProperties.length;
    this.pMatrix = new Matrix();
    this.rMatrix = new Matrix();
    this.sMatrix = new Matrix();
    this.tMatrix = new Matrix();
    this.matrix = new Matrix();
};

RepeaterModifier.prototype.applyTransforms = function(pMatrix, rMatrix, sMatrix, transform, perc, inv){
    var dir = inv ? -1 : 1;
    var scaleX = transform.s.v[0] + (1 - transform.s.v[0]) * (1 - perc);
    var scaleY = transform.s.v[1] + (1 - transform.s.v[1]) * (1 - perc);
    pMatrix.translate(transform.p.v[0] * dir * perc, transform.p.v[1] * dir * perc, transform.p.v[2]);
    rMatrix.translate(-transform.a.v[0], -transform.a.v[1], transform.a.v[2]);
    rMatrix.rotate(-transform.r.v * dir * perc);
    rMatrix.translate(transform.a.v[0], transform.a.v[1], transform.a.v[2]);
    sMatrix.translate(-transform.a.v[0], -transform.a.v[1], transform.a.v[2]);
    sMatrix.scale(inv ? 1/scaleX : scaleX, inv ? 1/scaleY : scaleY);
    sMatrix.translate(transform.a.v[0], transform.a.v[1], transform.a.v[2]);
};

RepeaterModifier.prototype.init = function(elem, arr, pos, elemsData) {
    this.elem = elem;
    this.arr = arr;
    this.pos = pos;
    this.elemsData = elemsData;
    this._currentCopies = 0;
    this._elements = [];
    this._groups = [];
    this.frameId = -1;
    this.initDynamicPropertyContainer(elem);
    this.initModifierProperties(elem,arr[pos]);
    while(pos>0){
        pos -= 1;
        //this._elements.unshift(arr.splice(pos,1)[0]);
        this._elements.unshift(arr[pos]);
    }
    if(this.dynamicProperties.length){
        this.k = true;
    }else{
        this.getValue(true);
    }
};

RepeaterModifier.prototype.resetElements = function(elements){
    var i, len = elements.length;
    for(i = 0; i < len; i += 1) {
        elements[i]._processed = false;
        if(elements[i].ty === 'gr'){
            this.resetElements(elements[i].it);
        }
    }
};

RepeaterModifier.prototype.cloneElements = function(elements){
    var len = elements.length;
    var newElements = JSON.parse(JSON.stringify(elements));
    this.resetElements(newElements);
    return newElements;
};

RepeaterModifier.prototype.changeGroupRender = function(elements, renderFlag) {
    var i, len = elements.length;
    for(i = 0; i < len; i += 1) {
        elements[i]._render = renderFlag;
        if(elements[i].ty === 'gr') {
            this.changeGroupRender(elements[i].it, renderFlag);
        }
    }
};

RepeaterModifier.prototype.processShapes = function(_isFirstFrame) {
    var items, itemsTransform, i, dir, cont;
    if(this._mdf || _isFirstFrame){
        var copies = Math.ceil(this.c.v);
        if(this._groups.length < copies){
            while(this._groups.length < copies){
                var group = {
                    it:this.cloneElements(this._elements),
                    ty:'gr'
                };
                group.it.push({"a":{"a":0,"ix":1,"k":[0,0]},"nm":"Transform","o":{"a":0,"ix":7,"k":100},"p":{"a":0,"ix":2,"k":[0,0]},"r":{"a":1,"ix":6,"k":[{s:0,e:0,t:0},{s:0,e:0,t:1}]},"s":{"a":0,"ix":3,"k":[100,100]},"sa":{"a":0,"ix":5,"k":0},"sk":{"a":0,"ix":4,"k":0},"ty":"tr"});
                
                this.arr.splice(0,0,group);
                this._groups.splice(0,0,group);
                this._currentCopies += 1;
            }
            this.elem.reloadShapes();
        }
        cont = 0;
        var renderFlag;
        for(i = 0; i  <= this._groups.length - 1; i += 1){
            renderFlag = cont < copies;
            this._groups[i]._render = renderFlag;
            this.changeGroupRender(this._groups[i].it, renderFlag);
            cont += 1;
        }
        
        this._currentCopies = copies;
        ////

        var offset = this.o.v;
        var offsetModulo = offset%1;
        var roundOffset = offset > 0 ? Math.floor(offset) : Math.ceil(offset);
        var tMat = this.tr.v.props;
        var pProps = this.pMatrix.props;
        var rProps = this.rMatrix.props;
        var sProps = this.sMatrix.props;
        this.pMatrix.reset();
        this.rMatrix.reset();
        this.sMatrix.reset();
        this.tMatrix.reset();
        this.matrix.reset();
        var iteration = 0;

        if(offset > 0) {
            while(iteration<roundOffset){
                this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, false);
                iteration += 1;
            }
            if(offsetModulo){
                this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, offsetModulo, false);
                iteration += offsetModulo;
            }
        } else if(offset < 0) {
            while(iteration>roundOffset){
                this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, true);
                iteration -= 1;
            }
            if(offsetModulo){
                this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, - offsetModulo, true);
                iteration -= offsetModulo;
            }
        }
        i = this.data.m === 1 ? 0 : this._currentCopies - 1;
        dir = this.data.m === 1 ? 1 : -1;
        cont = this._currentCopies;
        var j, jLen;
        while(cont){
            items = this.elemsData[i].it;
            itemsTransform = items[items.length - 1].transform.mProps.v.props;
            jLen = itemsTransform.length;
            items[items.length - 1].transform.mProps._mdf = true;
            items[items.length - 1].transform.op._mdf = true;
            items[items.length - 1].transform.op.v = this.so.v + (this.eo.v - this.so.v) * (i / (this._currentCopies - 1));
            if(iteration !== 0){
                if((i !== 0 && dir === 1) || (i !== this._currentCopies - 1 && dir === -1)){
                    this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, false);
                }
                this.matrix.transform(rProps[0],rProps[1],rProps[2],rProps[3],rProps[4],rProps[5],rProps[6],rProps[7],rProps[8],rProps[9],rProps[10],rProps[11],rProps[12],rProps[13],rProps[14],rProps[15]);
                this.matrix.transform(sProps[0],sProps[1],sProps[2],sProps[3],sProps[4],sProps[5],sProps[6],sProps[7],sProps[8],sProps[9],sProps[10],sProps[11],sProps[12],sProps[13],sProps[14],sProps[15]);
                this.matrix.transform(pProps[0],pProps[1],pProps[2],pProps[3],pProps[4],pProps[5],pProps[6],pProps[7],pProps[8],pProps[9],pProps[10],pProps[11],pProps[12],pProps[13],pProps[14],pProps[15]);
                
                for(j=0;j<jLen;j+=1) {
                    itemsTransform[j] = this.matrix.props[j];
                }
                this.matrix.reset();
            } else {
                this.matrix.reset();
                for(j=0;j<jLen;j+=1) {
                    itemsTransform[j] = this.matrix.props[j];
                }
            }
            iteration += 1;
            cont -= 1;
            i += dir;
        }
    } else {
        cont = this._currentCopies;
        i = 0;
        dir = 1;
        while(cont){
            items = this.elemsData[i].it;
            itemsTransform = items[items.length - 1].transform.mProps.v.props;
            items[items.length - 1].transform.mProps._mdf = false;
            items[items.length - 1].transform.op._mdf = false;
            cont -= 1;
            i += dir;
        }
    }
};

RepeaterModifier.prototype.addShape = function(){};

ShapeModifiers.registerModifier('rp',RepeaterModifier);
function ShapeCollection(){
	this._length = 0;
	this._maxLength = 4;
	this.shapes = createSizedArray(this._maxLength);
}

ShapeCollection.prototype.addShape = function(shapeData){
	if(this._length === this._maxLength){
		this.shapes = this.shapes.concat(createSizedArray(this._maxLength));
		this._maxLength *= 2;
	}
	this.shapes[this._length] = shapeData;
	this._length += 1;
};

ShapeCollection.prototype.releaseShapes = function(){
	var i;
	for(i = 0; i < this._length; i += 1) {
		shape_pool.release(this.shapes[i]);
	}
	this._length = 0;
};
function DashProperty(elem, data, renderer, container) {
    this.elem = elem;
    this.frameId = -1;
    this.dataProps = createSizedArray(data.length);
    this.renderer = renderer;
    this.k = false;
    this.dashStr = '';
    this.dashArray = createTypedArray('float32',  data.length ? data.length - 1 : 0);
    this.dashoffset = createTypedArray('float32',  1);
    this.initDynamicPropertyContainer(container);
    var i, len = data.length || 0, prop;
    for(i = 0; i < len; i += 1) {
        prop = PropertyFactory.getProp(elem,data[i].v,0, 0, this);
        this.k = prop.k || this.k;
        this.dataProps[i] = {n:data[i].n,p:prop};
    }
    if(!this.k){
        this.getValue(true);
    }
    this._isAnimated = this.k;
}

DashProperty.prototype.getValue = function(forceRender) {
    if(this.elem.globalData.frameId === this.frameId && !forceRender){
        return;
    }
    this.frameId = this.elem.globalData.frameId;
    this.iterateDynamicProperties();
    this._mdf = this._mdf || forceRender;
    if (this._mdf) {
        var i = 0, len = this.dataProps.length;
        if(this.renderer === 'svg') {
            this.dashStr = '';
        }
        for(i=0;i<len;i+=1){
            if(this.dataProps[i].n != 'o'){
                if(this.renderer === 'svg') {
                    this.dashStr += ' ' + this.dataProps[i].p.v;
                }else{
                    this.dashArray[i] = this.dataProps[i].p.v;
                }
            }else{
                this.dashoffset[0] = this.dataProps[i].p.v;
            }
        }
    }
};
extendPrototype([DynamicPropertyContainer], DashProperty);
function GradientProperty(elem,data,container){
    this.data = data;
    this.c = createTypedArray('uint8c', data.p*4);
    var cLength = data.k.k[0].s ? (data.k.k[0].s.length - data.p*4) : data.k.k.length - data.p*4;
    this.o = createTypedArray('float32', cLength);
    this._cmdf = false;
    this._omdf = false;
    this._collapsable = this.checkCollapsable();
    this._hasOpacity = cLength;
    this.initDynamicPropertyContainer(container);
    this.prop = PropertyFactory.getProp(elem,data.k,1,null,this);
    this.k = this.prop.k;
    this.getValue(true);
}

GradientProperty.prototype.comparePoints = function(values, points) {
    var i = 0, len = this.o.length/2, diff;
    while(i < len) {
        diff = Math.abs(values[i*4] - values[points*4 + i*2]);
        if(diff > 0.01){
            return false;
        }
        i += 1;
    }
    return true;
};

GradientProperty.prototype.checkCollapsable = function() {
    if (this.o.length/2 !== this.c.length/4) {
        return false;
    }
    if (this.data.k.k[0].s) {
        var i = 0, len = this.data.k.k.length;
        while (i < len) {
            if (!this.comparePoints(this.data.k.k[i].s, this.data.p)) {
                return false;
            }
            i += 1;
        }
    } else if(!this.comparePoints(this.data.k.k, this.data.p)) {
        return false;
    }
    return true;
};

GradientProperty.prototype.getValue = function(forceRender){
    this.prop.getValue();
    this._mdf = false;
    this._cmdf = false;
    this._omdf = false;
    if(this.prop._mdf || forceRender){
        var i, len = this.data.p*4;
        var mult, val;
        for(i=0;i<len;i+=1){
            mult = i%4 === 0 ? 100 : 255;
            val = Math.round(this.prop.v[i]*mult);
            if(this.c[i] !== val){
                this.c[i] = val;
                this._cmdf = !forceRender;
            }
        }
        if(this.o.length){
            len = this.prop.v.length;
            for(i=this.data.p*4;i<len;i+=1){
                mult = i%2 === 0 ? 100 : 1;
                val = i%2 === 0 ?  Math.round(this.prop.v[i]*100):this.prop.v[i];
                if(this.o[i-this.data.p*4] !== val){
                    this.o[i-this.data.p*4] = val;
                    this._omdf = !forceRender;
                }
            }
        }
        this._mdf = !forceRender;
    }
};

extendPrototype([DynamicPropertyContainer], GradientProperty);
var buildShapeString = function(pathNodes, length, closed, mat) {
	if(length === 0) {
            return '';
        }
        var _o = pathNodes.o;
        var _i = pathNodes.i;
        var _v = pathNodes.v;
        var i, shapeString = " M" + mat.applyToPointStringified(_v[0][0], _v[0][1]);
        for(i = 1; i < length; i += 1) {
            shapeString += " C" + mat.applyToPointStringified(_o[i - 1][0], _o[i - 1][1]) + " " + mat.applyToPointStringified(_i[i][0], _i[i][1]) + " " + mat.applyToPointStringified(_v[i][0], _v[i][1]);
        }
        if (closed && length) {
            shapeString += " C" + mat.applyToPointStringified(_o[i - 1][0], _o[i - 1][1]) + " " + mat.applyToPointStringified(_i[0][0], _i[0][1]) + " " + mat.applyToPointStringified(_v[0][0], _v[0][1]);
            shapeString += 'z';
        }
        return shapeString;
};
var ImagePreloader = (function(){

    var proxyImage = (function(){
        var canvas = createTag('canvas');
        canvas.width = 1;
        canvas.height = 1;
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(0, 0, 1, 1);
        return canvas;
    }());

    function imageLoaded(){
        this.loadedAssets += 1;
        if(this.loadedAssets === this.totalImages){
            if(this.imagesLoadedCb) {
                this.imagesLoadedCb(null);
            }
        }
    }

    function getAssetsPath(assetData, assetsPath, original_path) {
        var path = '';
        if (assetData.e) {
            path = assetData.p;
        } else if(assetsPath) {
            var imagePath = assetData.p;
            if (imagePath.indexOf('images/') !== -1) {
                imagePath = imagePath.split('/')[1];
            }
            path = assetsPath + imagePath;
        } else {
            path = original_path;
            path += assetData.u ? assetData.u : '';
            path += assetData.p;
        }
        return path;
    }

    function createImageData(assetData) {
        var path = getAssetsPath(assetData, this.assetsPath, this.path);
        var img = createTag('img');
        img.crossOrigin = 'anonymous';
        img.addEventListener('load', this._imageLoaded.bind(this), false);
        img.addEventListener('error', function() {
            ob.img = proxyImage;
            this._imageLoaded();
        }.bind(this), false);
        img.src = path;
        var ob = {
            img: img,
            assetData: assetData
        };
        return ob;
    }

    function loadAssets(assets, cb){
        this.imagesLoadedCb = cb;
        var i, len = assets.length;
        for (i = 0; i < len; i += 1) {
            if(!assets[i].layers){
                this.totalImages += 1;
                this.images.push(this._createImageData(assets[i]));
            }
        }
    }

    function setPath(path){
        this.path = path || '';
    }

    function setAssetsPath(path){
        this.assetsPath = path || '';
    }

    function getImage(assetData) {
        var i = 0, len = this.images.length;
        while (i < len) {
            if (this.images[i].assetData === assetData) {
                return this.images[i].img;
            }
            i += 1;
        }
    }

    function destroy() {
        this.imagesLoadedCb = null;
        this.images.length = 0;
    }

    function loaded() {
        return this.totalImages === this.loadedAssets;
    }

    return function ImagePreloader(){
        this.loadAssets = loadAssets;
        this.setAssetsPath = setAssetsPath;
        this.setPath = setPath;
        this.loaded = loaded;
        this.destroy = destroy;
        this.getImage = getImage;
        this._createImageData = createImageData;
        this._imageLoaded = imageLoaded;
        this.assetsPath = '';
        this.path = '';
        this.totalImages = 0;
        this.loadedAssets = 0;
        this.imagesLoadedCb = null;
        this.images = [];
    };
}());
var featureSupport = (function(){
	var ob = {
		maskType: true
	};
	if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent) || /Edge\/\d./i.test(navigator.userAgent)) {
	   ob.maskType = false;
	}
	return ob;
}());
var filtersFactory = (function(){
	var ob = {};
	ob.createFilter = createFilter;
	ob.createAlphaToLuminanceFilter = createAlphaToLuminanceFilter;

	function createFilter(filId){
        	var fil = createNS('filter');
        	fil.setAttribute('id',filId);
                fil.setAttribute('filterUnits','objectBoundingBox');
                fil.setAttribute('x','0%');
                fil.setAttribute('y','0%');
                fil.setAttribute('width','100%');
                fil.setAttribute('height','100%');
                return fil;
	}

	function createAlphaToLuminanceFilter(){
                var feColorMatrix = createNS('feColorMatrix');
                feColorMatrix.setAttribute('type','matrix');
                feColorMatrix.setAttribute('color-interpolation-filters','sRGB');
                feColorMatrix.setAttribute('values','0 0 0 1 0  0 0 0 1 0  0 0 0 1 0  0 0 0 1 1');
                return feColorMatrix;
	}

	return ob;
}());
var assetLoader = (function(){

	function formatResponse(xhr) {
		if(xhr.response && typeof xhr.response === 'object') {
			return xhr.response;
		} else if(xhr.response && typeof xhr.response === 'string') {
			return JSON.parse(xhr.response);
		} else if(xhr.responseText) {
			return JSON.parse(xhr.responseText);
		}
	}

	function loadAsset(path, callback, errorCallback) {
		var response;
		var xhr = new XMLHttpRequest();
		xhr.open('GET', path, true);
		// set responseType after calling open or IE will break.
		xhr.responseType = "json";
	    xhr.send();
	    xhr.onreadystatechange = function () {
	        if (xhr.readyState == 4) {
	            if(xhr.status == 200){
	            	response = formatResponse(xhr);
	            	callback(response);
	            }else{
	                try{
	            		response = formatResponse(xhr);
	            		callback(response);
	                }catch(err){
	                	if(errorCallback) {
	                		errorCallback(err);
	                	}
	                }
	            }
	        }
	    };
	}
	return {
		load: loadAsset
	}
}());

function TextAnimatorProperty(textData, renderType, elem){
    this._isFirstFrame = true;
	this._hasMaskedPath = false;
	this._frameId = -1;
	this._textData = textData;
	this._renderType = renderType;
    this._elem = elem;
	this._animatorsData = createSizedArray(this._textData.a.length);
	this._pathData = {};
	this._moreOptions = {
		alignment: {}
	};
	this.renderedLetters = [];
    this.lettersChangedFlag = false;
    this.initDynamicPropertyContainer(elem);

}

TextAnimatorProperty.prototype.searchProperties = function(){
    var i, len = this._textData.a.length, animatorProps;
    var getProp = PropertyFactory.getProp;
    for(i=0;i<len;i+=1){
        animatorProps = this._textData.a[i];
        this._animatorsData[i] = new TextAnimatorDataProperty(this._elem, animatorProps, this);
    }
    if(this._textData.p && 'm' in this._textData.p){
        this._pathData = {
            f: getProp(this._elem,this._textData.p.f,0,0,this),
            l: getProp(this._elem,this._textData.p.l,0,0,this),
            r: this._textData.p.r,
            m: this._elem.maskManager.getMaskProperty(this._textData.p.m)
        };
        this._hasMaskedPath = true;
    } else {
        this._hasMaskedPath = false;
    }
    this._moreOptions.alignment = getProp(this._elem,this._textData.m.a,1,0,this);
};

TextAnimatorProperty.prototype.getMeasures = function(documentData, lettersChangedFlag){
    this.lettersChangedFlag = lettersChangedFlag;
    if(!this._mdf && !this._isFirstFrame && !lettersChangedFlag && (!this._hasMaskedPath || !this._pathData.m._mdf)) {
        return;
    }
    this._isFirstFrame = false;
    var alignment = this._moreOptions.alignment.v;
    var animators = this._animatorsData;
    var textData = this._textData;
    var matrixHelper = this.mHelper;
    var renderType = this._renderType;
    var renderedLettersCount = this.renderedLetters.length;
    var data = this.data;
    var xPos,yPos;
    var i, len;
    var letters = documentData.l, pathInfo, currentLength, currentPoint, segmentLength, flag, pointInd, segmentInd, prevPoint, points, segments, partialLength, totalLength, perc, tanAngle, mask;
    if(this._hasMaskedPath) {
        mask = this._pathData.m;
        if(!this._pathData.n || this._pathData._mdf){
            var paths = mask.v;
            if(this._pathData.r){
                paths = paths.reverse();
            }
            // TODO: release bezier data cached from previous pathInfo: this._pathData.pi
            pathInfo = {
                tLength: 0,
                segments: []
            };
            len = paths._length - 1;
            var bezierData;
            totalLength = 0;
            for (i = 0; i < len; i += 1) {
                bezierData = bez.buildBezierData(paths.v[i]
                    , paths.v[i + 1]
                    , [paths.o[i][0] - paths.v[i][0], paths.o[i][1] - paths.v[i][1]]
                    , [paths.i[i + 1][0] - paths.v[i + 1][0], paths.i[i + 1][1] - paths.v[i + 1][1]]);
                pathInfo.tLength += bezierData.segmentLength;
                pathInfo.segments.push(bezierData);
                totalLength += bezierData.segmentLength;
            }
            i = len;
            if (mask.v.c) {
                bezierData = bez.buildBezierData(paths.v[i]
                    , paths.v[0]
                    , [paths.o[i][0] - paths.v[i][0], paths.o[i][1] - paths.v[i][1]]
                    , [paths.i[0][0] - paths.v[0][0], paths.i[0][1] - paths.v[0][1]]);
                pathInfo.tLength += bezierData.segmentLength;
                pathInfo.segments.push(bezierData);
                totalLength += bezierData.segmentLength;
            }
            this._pathData.pi = pathInfo;
        }
        pathInfo = this._pathData.pi;

        currentLength = this._pathData.f.v;
        segmentInd = 0;
        pointInd = 1;
        segmentLength = 0;
        flag = true;
        segments = pathInfo.segments;
        if (currentLength < 0 && mask.v.c) {
            if (pathInfo.tLength < Math.abs(currentLength)) {
                currentLength = -Math.abs(currentLength) % pathInfo.tLength;
            }
            segmentInd = segments.length - 1;
            points = segments[segmentInd].points;
            pointInd = points.length - 1;
            while (currentLength < 0) {
                currentLength += points[pointInd].partialLength;
                pointInd -= 1;
                if (pointInd < 0) {
                    segmentInd -= 1;
                    points = segments[segmentInd].points;
                    pointInd = points.length - 1;
                }
            }

        }
        points = segments[segmentInd].points;
        prevPoint = points[pointInd - 1];
        currentPoint = points[pointInd];
        partialLength = currentPoint.partialLength;
    }


    len = letters.length;
    xPos = 0;
    yPos = 0;
    var yOff = documentData.finalSize * 1.2 * 0.714;
    var firstLine = true;
    var animatorProps, animatorSelector;
    var j, jLen;
    var letterValue;

    jLen = animators.length;

    var mult, ind = -1, offf, xPathPos, yPathPos;
    var initPathPos = currentLength,initSegmentInd = segmentInd, initPointInd = pointInd, currentLine = -1;
    var elemOpacity;
    var sc,sw,fc,k;
    var lineLength = 0;
    var letterSw, letterSc, letterFc, letterM = '', letterP = this.defaultPropsArray, letterO;

    //
    if(documentData.j === 2 || documentData.j === 1) {
        var animatorJustifyOffset = 0;
        var animatorFirstCharOffset = 0;
        var justifyOffsetMult = documentData.j === 2 ? -0.5 : -1;
        var lastIndex = 0;
        var isNewLine = true;

        for (i = 0; i < len; i += 1) {
            if (letters[i].n) {
                if(animatorJustifyOffset) {
                    animatorJustifyOffset += animatorFirstCharOffset;
                }
                while (lastIndex < i) {
                    letters[lastIndex].animatorJustifyOffset = animatorJustifyOffset;
                    lastIndex += 1;
                }
                animatorJustifyOffset = 0;
                isNewLine = true;
            } else {
                for (j = 0; j < jLen; j += 1) {
                    animatorProps = animators[j].a;
                    if (animatorProps.t.propType) {
                        if (isNewLine && documentData.j === 2) {
                            animatorFirstCharOffset += animatorProps.t.v * justifyOffsetMult;
                        }
                        animatorSelector = animators[j].s;
                        mult = animatorSelector.getMult(letters[i].anIndexes[j], textData.a[j].s.totalChars);
                        if (mult.length) {
                            animatorJustifyOffset += animatorProps.t.v*mult[0] * justifyOffsetMult;
                        } else {
                            animatorJustifyOffset += animatorProps.t.v*mult * justifyOffsetMult;
                        }
                    }
                }
                isNewLine = false;
            }
        }
        if(animatorJustifyOffset) {
            animatorJustifyOffset += animatorFirstCharOffset;
        }
        while(lastIndex < i) {
            letters[lastIndex].animatorJustifyOffset = animatorJustifyOffset;
            lastIndex += 1;
        }
    }
    //

    for( i = 0; i < len; i += 1) {

        matrixHelper.reset();
        elemOpacity = 1;
        if(letters[i].n) {
            xPos = 0;
            yPos += documentData.yOffset;
            yPos += firstLine ? 1 : 0;
            currentLength = initPathPos ;
            firstLine = false;
            lineLength = 0;
            if(this._hasMaskedPath) {
                segmentInd = initSegmentInd;
                pointInd = initPointInd;
                points = segments[segmentInd].points;
                prevPoint = points[pointInd - 1];
                currentPoint = points[pointInd];
                partialLength = currentPoint.partialLength;
                segmentLength = 0;
            }
            letterO = letterSw = letterFc = letterM = '';
            letterP = this.defaultPropsArray;
        }else{
            if(this._hasMaskedPath) {
                if(currentLine !== letters[i].line){
                    switch(documentData.j){
                        case 1:
                            currentLength += totalLength - documentData.lineWidths[letters[i].line];
                            break;
                        case 2:
                            currentLength += (totalLength - documentData.lineWidths[letters[i].line])/2;
                            break;
                    }
                    currentLine = letters[i].line;
                }
                if (ind !== letters[i].ind) {
                    if (letters[ind]) {
                        currentLength += letters[ind].extra;
                    }
                    currentLength += letters[i].an / 2;
                    ind = letters[i].ind;
                }
                currentLength += alignment[0] * letters[i].an / 200;
                var animatorOffset = 0;
                for (j = 0; j < jLen; j += 1) {
                    animatorProps = animators[j].a;
                    if (animatorProps.p.propType) {
                        animatorSelector = animators[j].s;
                        mult = animatorSelector.getMult(letters[i].anIndexes[j],textData.a[j].s.totalChars);
                        if(mult.length){
                            animatorOffset += animatorProps.p.v[0] * mult[0];
                        } else{
                            animatorOffset += animatorProps.p.v[0] * mult;
                        }

                    }
                    if (animatorProps.a.propType) {
                        animatorSelector = animators[j].s;
                        mult = animatorSelector.getMult(letters[i].anIndexes[j],textData.a[j].s.totalChars);
                        if(mult.length){
                            animatorOffset += animatorProps.a.v[0] * mult[0];
                        } else{
                            animatorOffset += animatorProps.a.v[0] * mult;
                        }

                    }
                }
                flag = true;
                while (flag) {
                    if (segmentLength + partialLength >= currentLength + animatorOffset || !points) {
                        perc = (currentLength + animatorOffset - segmentLength) / currentPoint.partialLength;
                        xPathPos = prevPoint.point[0] + (currentPoint.point[0] - prevPoint.point[0]) * perc;
                        yPathPos = prevPoint.point[1] + (currentPoint.point[1] - prevPoint.point[1]) * perc;
                        matrixHelper.translate(-alignment[0]*letters[i].an/200, -(alignment[1] * yOff / 100));
                        flag = false;
                    } else if (points) {
                        segmentLength += currentPoint.partialLength;
                        pointInd += 1;
                        if (pointInd >= points.length) {
                            pointInd = 0;
                            segmentInd += 1;
                            if (!segments[segmentInd]) {
                                if (mask.v.c) {
                                    pointInd = 0;
                                    segmentInd = 0;
                                    points = segments[segmentInd].points;
                                } else {
                                    segmentLength -= currentPoint.partialLength;
                                    points = null;
                                }
                            } else {
                                points = segments[segmentInd].points;
                            }
                        }
                        if (points) {
                            prevPoint = currentPoint;
                            currentPoint = points[pointInd];
                            partialLength = currentPoint.partialLength;
                        }
                    }
                }
                offf = letters[i].an / 2 - letters[i].add;
                matrixHelper.translate(-offf, 0, 0);
            } else {
                offf = letters[i].an/2 - letters[i].add;
                matrixHelper.translate(-offf,0,0);

                // Grouping alignment
                matrixHelper.translate(-alignment[0]*letters[i].an/200, -alignment[1]*yOff/100, 0);
            }

            lineLength += letters[i].l/2;
            for(j=0;j<jLen;j+=1){
                animatorProps = animators[j].a;
                if (animatorProps.t.propType) {
                    animatorSelector = animators[j].s;
                    mult = animatorSelector.getMult(letters[i].anIndexes[j],textData.a[j].s.totalChars);
                    //This condition is to prevent applying tracking to first character in each line. Might be better to use a boolean "isNewLine"
                    if(xPos !== 0 || documentData.j !== 0) {
                        if(this._hasMaskedPath) {
                            if(mult.length) {
                                currentLength += animatorProps.t.v*mult[0];
                            } else {
                                currentLength += animatorProps.t.v*mult;
                            }
                        }else{
                            if(mult.length) {
                                xPos += animatorProps.t.v*mult[0];
                            } else {
                                xPos += animatorProps.t.v*mult;
                            }
                        }
                    }
                }
            }
            lineLength += letters[i].l/2;
            if(documentData.strokeWidthAnim) {
                sw = documentData.sw || 0;
            }
            if(documentData.strokeColorAnim) {
                if(documentData.sc){
                    sc = [documentData.sc[0], documentData.sc[1], documentData.sc[2]];
                }else{
                    sc = [0,0,0];
                }
            }
            if(documentData.fillColorAnim && documentData.fc) {
                fc = [documentData.fc[0], documentData.fc[1], documentData.fc[2]];
            }
            for(j=0;j<jLen;j+=1){
                animatorProps = animators[j].a;
                if (animatorProps.a.propType) {
                    animatorSelector = animators[j].s;
                    mult = animatorSelector.getMult(letters[i].anIndexes[j],textData.a[j].s.totalChars);

                    if(mult.length){
                        matrixHelper.translate(-animatorProps.a.v[0]*mult[0], -animatorProps.a.v[1]*mult[1], animatorProps.a.v[2]*mult[2]);
                    } else {
                        matrixHelper.translate(-animatorProps.a.v[0]*mult, -animatorProps.a.v[1]*mult, animatorProps.a.v[2]*mult);
                    }
                }
            }
            for(j=0;j<jLen;j+=1){
                animatorProps = animators[j].a;
                if (animatorProps.s.propType) {
                    animatorSelector = animators[j].s;
                    mult = animatorSelector.getMult(letters[i].anIndexes[j],textData.a[j].s.totalChars);
                    if(mult.length){
                        matrixHelper.scale(1+((animatorProps.s.v[0]-1)*mult[0]),1+((animatorProps.s.v[1]-1)*mult[1]),1);
                    } else {
                        matrixHelper.scale(1+((animatorProps.s.v[0]-1)*mult),1+((animatorProps.s.v[1]-1)*mult),1);
                    }
                }
            }
            for(j=0;j<jLen;j+=1) {
                animatorProps = animators[j].a;
                animatorSelector = animators[j].s;
                mult = animatorSelector.getMult(letters[i].anIndexes[j],textData.a[j].s.totalChars);
                if (animatorProps.sk.propType) {
                    if(mult.length) {
                        matrixHelper.skewFromAxis(-animatorProps.sk.v * mult[0], animatorProps.sa.v * mult[1]);
                    } else {
                        matrixHelper.skewFromAxis(-animatorProps.sk.v * mult, animatorProps.sa.v * mult);
                    }
                }
                if (animatorProps.r.propType) {
                    if(mult.length) {
                        matrixHelper.rotateZ(-animatorProps.r.v * mult[2]);
                    } else {
                        matrixHelper.rotateZ(-animatorProps.r.v * mult);
                    }
                }
                if (animatorProps.ry.propType) {

                    if(mult.length) {
                        matrixHelper.rotateY(animatorProps.ry.v*mult[1]);
                    }else{
                        matrixHelper.rotateY(animatorProps.ry.v*mult);
                    }
                }
                if (animatorProps.rx.propType) {
                    if(mult.length) {
                        matrixHelper.rotateX(animatorProps.rx.v*mult[0]);
                    } else {
                        matrixHelper.rotateX(animatorProps.rx.v*mult);
                    }
                }
                if (animatorProps.o.propType) {
                    if(mult.length) {
                        elemOpacity += ((animatorProps.o.v)*mult[0] - elemOpacity)*mult[0];
                    } else {
                        elemOpacity += ((animatorProps.o.v)*mult - elemOpacity)*mult;
                    }
                }
                if (documentData.strokeWidthAnim && animatorProps.sw.propType) {
                    if(mult.length) {
                        sw += animatorProps.sw.v*mult[0];
                    } else {
                        sw += animatorProps.sw.v*mult;
                    }
                }
                if (documentData.strokeColorAnim && animatorProps.sc.propType) {
                    for(k=0;k<3;k+=1){
                        if(mult.length) {
                            sc[k] = sc[k] + (animatorProps.sc.v[k] - sc[k])*mult[0];
                        } else {
                            sc[k] = sc[k] + (animatorProps.sc.v[k] - sc[k])*mult;
                        }
                    }
                }
                if (documentData.fillColorAnim && documentData.fc) {
                    if(animatorProps.fc.propType){
                        for(k=0;k<3;k+=1){
                            if(mult.length) {
                                fc[k] = fc[k] + (animatorProps.fc.v[k] - fc[k])*mult[0];
                            } else {
                                fc[k] = fc[k] + (animatorProps.fc.v[k] - fc[k])*mult;
                            }
                        }
                    }
                    if(animatorProps.fh.propType){
                        if(mult.length) {
                            fc = addHueToRGB(fc,animatorProps.fh.v*mult[0]);
                        } else {
                            fc = addHueToRGB(fc,animatorProps.fh.v*mult);
                        }
                    }
                    if(animatorProps.fs.propType){
                        if(mult.length) {
                            fc = addSaturationToRGB(fc,animatorProps.fs.v*mult[0]);
                        } else {
                            fc = addSaturationToRGB(fc,animatorProps.fs.v*mult);
                        }
                    }
                    if(animatorProps.fb.propType){
                        if(mult.length) {
                            fc = addBrightnessToRGB(fc,animatorProps.fb.v*mult[0]);
                        } else {
                            fc = addBrightnessToRGB(fc,animatorProps.fb.v*mult);
                        }
                    }
                }
            }

            for(j=0;j<jLen;j+=1){
                animatorProps = animators[j].a;

                if (animatorProps.p.propType) {
                    animatorSelector = animators[j].s;
                    mult = animatorSelector.getMult(letters[i].anIndexes[j],textData.a[j].s.totalChars);
                    if(this._hasMaskedPath) {
                        if(mult.length) {
                            matrixHelper.translate(0, animatorProps.p.v[1] * mult[0], -animatorProps.p.v[2] * mult[1]);
                        } else {
                            matrixHelper.translate(0, animatorProps.p.v[1] * mult, -animatorProps.p.v[2] * mult);
                        }
                    }else{
                        if(mult.length) {
                            matrixHelper.translate(animatorProps.p.v[0] * mult[0], animatorProps.p.v[1] * mult[1], -animatorProps.p.v[2] * mult[2]);
                        } else {
                            matrixHelper.translate(animatorProps.p.v[0] * mult, animatorProps.p.v[1] * mult, -animatorProps.p.v[2] * mult);
                        
                        }
                    }
                }
            }
            if(documentData.strokeWidthAnim){
                letterSw = sw < 0 ? 0 : sw;
            }
            if(documentData.strokeColorAnim){
                letterSc = 'rgb('+Math.round(sc[0]*255)+','+Math.round(sc[1]*255)+','+Math.round(sc[2]*255)+')';
            }
            if(documentData.fillColorAnim && documentData.fc){
                letterFc = 'rgb('+Math.round(fc[0]*255)+','+Math.round(fc[1]*255)+','+Math.round(fc[2]*255)+')';
            }

            if(this._hasMaskedPath) {
                matrixHelper.translate(0,-documentData.ls);

                matrixHelper.translate(0, alignment[1]*yOff/100 + yPos,0);
                if (textData.p.p) {
                    tanAngle = (currentPoint.point[1] - prevPoint.point[1]) / (currentPoint.point[0] - prevPoint.point[0]);
                    var rot = Math.atan(tanAngle) * 180 / Math.PI;
                    if (currentPoint.point[0] < prevPoint.point[0]) {
                        rot += 180;
                    }
                    matrixHelper.rotate(-rot * Math.PI / 180);
                }
                matrixHelper.translate(xPathPos, yPathPos, 0);
                currentLength -= alignment[0]*letters[i].an/200;
                if(letters[i+1] && ind !== letters[i+1].ind){
                    currentLength += letters[i].an / 2;
                    currentLength += documentData.tr/1000*documentData.finalSize;
                }
            }else{

                matrixHelper.translate(xPos,yPos,0);

                if(documentData.ps){
                    //matrixHelper.translate(documentData.ps[0],documentData.ps[1],0);
                    matrixHelper.translate(documentData.ps[0],documentData.ps[1] + documentData.ascent,0);
                }
                switch(documentData.j){
                    case 1:
                        matrixHelper.translate(letters[i].animatorJustifyOffset + documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[letters[i].line]),0,0);
                        break;
                    case 2:
                        matrixHelper.translate(letters[i].animatorJustifyOffset + documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[letters[i].line])/2,0,0);
                        break;
                }
                matrixHelper.translate(0,-documentData.ls);
                matrixHelper.translate(offf,0,0);
                matrixHelper.translate(alignment[0]*letters[i].an/200,alignment[1]*yOff/100,0);
                xPos += letters[i].l + documentData.tr/1000*documentData.finalSize;
            }
            if(renderType === 'html'){
                letterM = matrixHelper.toCSS();
            }else if(renderType === 'svg'){
                letterM = matrixHelper.to2dCSS();
            }else{
                letterP = [matrixHelper.props[0],matrixHelper.props[1],matrixHelper.props[2],matrixHelper.props[3],matrixHelper.props[4],matrixHelper.props[5],matrixHelper.props[6],matrixHelper.props[7],matrixHelper.props[8],matrixHelper.props[9],matrixHelper.props[10],matrixHelper.props[11],matrixHelper.props[12],matrixHelper.props[13],matrixHelper.props[14],matrixHelper.props[15]];
            }
            letterO = elemOpacity;
        }

        if(renderedLettersCount <= i) {
            letterValue = new LetterProps(letterO,letterSw,letterSc,letterFc,letterM,letterP);
            this.renderedLetters.push(letterValue);
            renderedLettersCount += 1;
            this.lettersChangedFlag = true;
        } else {
            letterValue = this.renderedLetters[i];
            this.lettersChangedFlag = letterValue.update(letterO, letterSw, letterSc, letterFc, letterM, letterP) || this.lettersChangedFlag;
        }
    }
};

TextAnimatorProperty.prototype.getValue = function(){
	if(this._elem.globalData.frameId === this._frameId){
        return;
    }
    this._frameId = this._elem.globalData.frameId;
    this.iterateDynamicProperties();
};

TextAnimatorProperty.prototype.mHelper = new Matrix();
TextAnimatorProperty.prototype.defaultPropsArray = [];
extendPrototype([DynamicPropertyContainer], TextAnimatorProperty);
function TextAnimatorDataProperty(elem, animatorProps, container) {
	var defaultData = {propType:false};
	var getProp = PropertyFactory.getProp;
	var textAnimator_animatables = animatorProps.a;
	this.a = {
		r: textAnimator_animatables.r ? getProp(elem, textAnimator_animatables.r, 0, degToRads, container) : defaultData,
		rx: textAnimator_animatables.rx ? getProp(elem, textAnimator_animatables.rx, 0, degToRads, container) : defaultData,
		ry: textAnimator_animatables.ry ? getProp(elem, textAnimator_animatables.ry, 0, degToRads, container) : defaultData,
		sk: textAnimator_animatables.sk ? getProp(elem, textAnimator_animatables.sk, 0, degToRads, container) : defaultData,
		sa: textAnimator_animatables.sa ? getProp(elem, textAnimator_animatables.sa, 0, degToRads, container) : defaultData,
		s: textAnimator_animatables.s ? getProp(elem, textAnimator_animatables.s, 1, 0.01, container) : defaultData,
		a: textAnimator_animatables.a ? getProp(elem, textAnimator_animatables.a, 1, 0, container) : defaultData,
		o: textAnimator_animatables.o ? getProp(elem, textAnimator_animatables.o, 0, 0.01, container) : defaultData,
		p: textAnimator_animatables.p ? getProp(elem,textAnimator_animatables.p, 1, 0, container) : defaultData,
		sw: textAnimator_animatables.sw ? getProp(elem, textAnimator_animatables.sw, 0, 0, container) : defaultData,
		sc: textAnimator_animatables.sc ? getProp(elem, textAnimator_animatables.sc, 1, 0, container) : defaultData,
		fc: textAnimator_animatables.fc ? getProp(elem, textAnimator_animatables.fc, 1, 0, container) : defaultData,
		fh: textAnimator_animatables.fh ? getProp(elem, textAnimator_animatables.fh, 0, 0, container) : defaultData,
		fs: textAnimator_animatables.fs ? getProp(elem, textAnimator_animatables.fs, 0, 0.01, container) : defaultData,
		fb: textAnimator_animatables.fb ? getProp(elem, textAnimator_animatables.fb, 0, 0.01, container) : defaultData,
		t: textAnimator_animatables.t ? getProp(elem, textAnimator_animatables.t, 0, 0, container) : defaultData
	};

	this.s = TextSelectorProp.getTextSelectorProp(elem,animatorProps.s, container);
    this.s.t = animatorProps.s.t;
}
function LetterProps(o, sw, sc, fc, m, p){
    this.o = o;
    this.sw = sw;
    this.sc = sc;
    this.fc = fc;
    this.m = m;
    this.p = p;
    this._mdf = {
    	o: true,
    	sw: !!sw,
    	sc: !!sc,
    	fc: !!fc,
    	m: true,
    	p: true
    };
}

LetterProps.prototype.update = function(o, sw, sc, fc, m, p) {
	this._mdf.o = false;
	this._mdf.sw = false;
	this._mdf.sc = false;
	this._mdf.fc = false;
	this._mdf.m = false;
	this._mdf.p = false;
	var updated = false;

	if(this.o !== o) {
		this.o = o;
		this._mdf.o = true;
		updated = true;
	}
	if(this.sw !== sw) {
		this.sw = sw;
		this._mdf.sw = true;
		updated = true;
	}
	if(this.sc !== sc) {
		this.sc = sc;
		this._mdf.sc = true;
		updated = true;
	}
	if(this.fc !== fc) {
		this.fc = fc;
		this._mdf.fc = true;
		updated = true;
	}
	if(this.m !== m) {
		this.m = m;
		this._mdf.m = true;
		updated = true;
	}
	if(p.length && (this.p[0] !== p[0] || this.p[1] !== p[1] || this.p[4] !== p[4] || this.p[5] !== p[5] || this.p[12] !== p[12] || this.p[13] !== p[13])) {
		this.p = p;
		this._mdf.p = true;
		updated = true;
	}
	return updated;
};
function TextProperty(elem, data){
	this._frameId = initialDefaultFrame;
	this.pv = '';
	this.v = '';
	this.kf = false;
	this._isFirstFrame = true;
	this._mdf = false;
    this.data = data;
	this.elem = elem;
    this.comp = this.elem.comp;
	this.keysIndex = 0;
    this.canResize = false;
    this.minimumFontSize = 1;
    this.effectsSequence = [];
	this.currentData = {
		ascent: 0,
        boxWidth: this.defaultBoxWidth,
        f: '',
        fStyle: '',
        fWeight: '',
        fc: '',
        j: '',
        justifyOffset: '',
        l: [],
        lh: 0,
        lineWidths: [],
        ls: '',
        of: '',
        s: '',
        sc: '',
        sw: 0,
        t: 0,
        tr: 0,
        sz:0,
        ps:null,
        fillColorAnim: false,
        strokeColorAnim: false,
        strokeWidthAnim: false,
        yOffset: 0,
        finalSize:0,
        finalText:[],
        finalLineHeight: 0,
        __complete: false

	};
    this.copyData(this.currentData, this.data.d.k[0].s);

    if(!this.searchProperty()) {
        this.completeTextData(this.currentData);
    }
}

TextProperty.prototype.defaultBoxWidth = [0,0];

TextProperty.prototype.copyData = function(obj, data) {
    for(var s in data) {
        if(data.hasOwnProperty(s)) {
            obj[s] = data[s];
        }
    }
    return obj;
};

TextProperty.prototype.setCurrentData = function(data){
    if(!data.__complete) {
        this.completeTextData(data);
    }
    this.currentData = data;
    this.currentData.boxWidth = this.currentData.boxWidth || this.defaultBoxWidth;
    this._mdf = true;
};

TextProperty.prototype.searchProperty = function() {
    return this.searchKeyframes();
};

TextProperty.prototype.searchKeyframes = function() {
    this.kf = this.data.d.k.length > 1;
    if(this.kf) {
        this.addEffect(this.getKeyframeValue.bind(this));
    }
    return this.kf;
};

TextProperty.prototype.addEffect = function(effectFunction) {
	this.effectsSequence.push(effectFunction);
    this.elem.addDynamicProperty(this);
};

TextProperty.prototype.getValue = function(_finalValue) {
    if((this.elem.globalData.frameId === this.frameId || !this.effectsSequence.length) && !_finalValue) {
        return;
    }
    this.currentData.t = this.data.d.k[this.keysIndex].s.t;
    var currentValue = this.currentData;
    var currentIndex = this.keysIndex;
    if(this.lock) {
        this.setCurrentData(this.currentData);
        return;
    }
    this.lock = true;
    this._mdf = false;
    var i, len = this.effectsSequence.length;
    var finalValue = _finalValue || this.data.d.k[this.keysIndex].s;
    for(i = 0; i < len; i += 1) {
        //Checking if index changed to prevent creating a new object every time the expression updates.
        if(currentIndex !== this.keysIndex) {
            finalValue = this.effectsSequence[i](finalValue, finalValue.t);
        } else {
            finalValue = this.effectsSequence[i](this.currentData, finalValue.t);
        }
    }
    if(currentValue !== finalValue) {
        this.setCurrentData(finalValue);
    }
    this.pv = this.v = this.currentData;
    this.lock = false;
    this.frameId = this.elem.globalData.frameId;
};

TextProperty.prototype.getKeyframeValue = function() {
    var textKeys = this.data.d.k, textDocumentData;
    var frameNum = this.elem.comp.renderedFrame;
    var i = 0, len = textKeys.length;
    while(i <= len - 1) {
        textDocumentData = textKeys[i].s;
        if(i === len - 1 || textKeys[i+1].t > frameNum){
            break;
        }
        i += 1;
    }
    if(this.keysIndex !== i) {
        this.keysIndex = i;
    }
    return this.data.d.k[this.keysIndex].s;
};

TextProperty.prototype.buildFinalText = function(text) {
    var combinedCharacters = FontManager.getCombinedCharacterCodes();
    var charactersArray = [];
    var i = 0, len = text.length;
    while (i < len) {
        if (combinedCharacters.indexOf(text.charCodeAt(i)) !== -1) {
            charactersArray[charactersArray.length - 1] += text.charAt(i);
        } else {
            charactersArray.push(text.charAt(i));
        }
        i += 1;
    }
    return charactersArray;
};

TextProperty.prototype.completeTextData = function(documentData) {
    documentData.__complete = true;
    var fontManager = this.elem.globalData.fontManager;
    var data = this.data;
    var letters = [];
    var i, len;
    var newLineFlag, index = 0, val;
    var anchorGrouping = data.m.g;
    var currentSize = 0, currentPos = 0, currentLine = 0, lineWidths = [];
    var lineWidth = 0;
    var maxLineWidth = 0;
    var j, jLen;
    var fontData = fontManager.getFontByName(documentData.f);
    var charData, cLength = 0;
    var styles = fontData.fStyle ? fontData.fStyle.split(' ') : [];

    var fWeight = 'normal', fStyle = 'normal';
    len = styles.length;
    var styleName;
    for(i=0;i<len;i+=1){
        styleName = styles[i].toLowerCase();
        switch(styleName) {
            case 'italic':
            fStyle = 'italic';
            break;
            case 'bold':
            fWeight = '700';
            break;
            case 'black':
            fWeight = '900';
            break;
            case 'medium':
            fWeight = '500';
            break;
            case 'regular':
            case 'normal':
            fWeight = '400';
            break;
            case 'light':
            case 'thin':
            fWeight = '200';
            break;
        }
    }
    documentData.fWeight = fontData.fWeight || fWeight;
    documentData.fStyle = fStyle;
    len = documentData.t.length;
    documentData.finalSize = documentData.s;
    documentData.finalText = this.buildFinalText(documentData.t);
    documentData.finalLineHeight = documentData.lh;
    var trackingOffset = documentData.tr/1000*documentData.finalSize;
    var charCode;
    if(documentData.sz){
        var flag = true;
        var boxWidth = documentData.sz[0];
        var boxHeight = documentData.sz[1];
        var currentHeight, finalText;
        while(flag) {
            finalText = this.buildFinalText(documentData.t);
            currentHeight = 0;
            lineWidth = 0;
            len = finalText.length;
            trackingOffset = documentData.tr/1000*documentData.finalSize;
            var lastSpaceIndex = -1;
            for(i=0;i<len;i+=1){
                charCode = finalText[i].charCodeAt(0);
                newLineFlag = false;
                if(finalText[i] === ' '){
                    lastSpaceIndex = i;
                }else if(charCode === 13 || charCode === 3){
                    lineWidth = 0;
                    newLineFlag = true;
                    currentHeight += documentData.finalLineHeight || documentData.finalSize*1.2;
                }
                if(fontManager.chars){
                    charData = fontManager.getCharData(finalText[i], fontData.fStyle, fontData.fFamily);
                    cLength = newLineFlag ? 0 : charData.w*documentData.finalSize/100;
                }else{
                    //tCanvasHelper.font = documentData.s + 'px '+ fontData.fFamily;
                    cLength = fontManager.measureText(finalText[i], documentData.f, documentData.finalSize);
                }
                if(lineWidth + cLength > boxWidth && finalText[i] !== ' '){
                    if(lastSpaceIndex === -1){
                        len += 1;
                    } else {
                        i = lastSpaceIndex;
                    }
                    currentHeight += documentData.finalLineHeight || documentData.finalSize*1.2;
                    finalText.splice(i, lastSpaceIndex === i ? 1 : 0,"\r");
                    //finalText = finalText.substr(0,i) + "\r" + finalText.substr(i === lastSpaceIndex ? i + 1 : i);
                    lastSpaceIndex = -1;
                    lineWidth = 0;
                }else {
                    lineWidth += cLength;
                    lineWidth += trackingOffset;
                }
            }
            currentHeight += fontData.ascent*documentData.finalSize/100;
            if(this.canResize && documentData.finalSize > this.minimumFontSize && boxHeight < currentHeight) {
                documentData.finalSize -= 1;
                documentData.finalLineHeight = documentData.finalSize * documentData.lh / documentData.s;
            } else {
                documentData.finalText = finalText;
                len = documentData.finalText.length;
                flag = false;
            }
        }

    }
    lineWidth = - trackingOffset;
    cLength = 0;
    var uncollapsedSpaces = 0;
    var currentChar;
    for (i = 0;i < len ;i += 1) {
        newLineFlag = false;
        currentChar = documentData.finalText[i];
        charCode = currentChar.charCodeAt(0);
        if (currentChar === ' '){
            val = '\u00A0';
        } else if (charCode === 13 || charCode === 3) {
            uncollapsedSpaces = 0;
            lineWidths.push(lineWidth);
            maxLineWidth = lineWidth > maxLineWidth ? lineWidth : maxLineWidth;
            lineWidth = - 2 * trackingOffset;
            val = '';
            newLineFlag = true;
            currentLine += 1;
        }else{
            val = documentData.finalText[i];
        }
        if(fontManager.chars){
            charData = fontManager.getCharData(currentChar, fontData.fStyle, fontManager.getFontByName(documentData.f).fFamily);
            cLength = newLineFlag ? 0 : charData.w*documentData.finalSize/100;
        }else{
            //var charWidth = fontManager.measureText(val, documentData.f, documentData.finalSize);
            //tCanvasHelper.font = documentData.finalSize + 'px '+ fontManager.getFontByName(documentData.f).fFamily;
            cLength = fontManager.measureText(val, documentData.f, documentData.finalSize);
        }

        //
        if(currentChar === ' '){
            uncollapsedSpaces += cLength + trackingOffset;
        } else {
            lineWidth += cLength + trackingOffset + uncollapsedSpaces;
            uncollapsedSpaces = 0;
        }
        letters.push({l:cLength,an:cLength,add:currentSize,n:newLineFlag, anIndexes:[], val: val, line: currentLine, animatorJustifyOffset: 0});
        if(anchorGrouping == 2){
            currentSize += cLength;
            if(val === '' || val === '\u00A0' || i === len - 1){
                if(val === '' || val === '\u00A0'){
                    currentSize -= cLength;
                }
                while(currentPos<=i){
                    letters[currentPos].an = currentSize;
                    letters[currentPos].ind = index;
                    letters[currentPos].extra = cLength;
                    currentPos += 1;
                }
                index += 1;
                currentSize = 0;
            }
        }else if(anchorGrouping == 3){
            currentSize += cLength;
            if(val === '' || i === len - 1){
                if(val === ''){
                    currentSize -= cLength;
                }
                while(currentPos<=i){
                    letters[currentPos].an = currentSize;
                    letters[currentPos].ind = index;
                    letters[currentPos].extra = cLength;
                    currentPos += 1;
                }
                currentSize = 0;
                index += 1;
            }
        }else{
            letters[index].ind = index;
            letters[index].extra = 0;
            index += 1;
        }
    }
    documentData.l = letters;
    maxLineWidth = lineWidth > maxLineWidth ? lineWidth : maxLineWidth;
    lineWidths.push(lineWidth);
    if(documentData.sz){
        documentData.boxWidth = documentData.sz[0];
        documentData.justifyOffset = 0;
    }else{
        documentData.boxWidth = maxLineWidth;
        switch(documentData.j){
            case 1:
                documentData.justifyOffset = - documentData.boxWidth;
                break;
            case 2:
                documentData.justifyOffset = - documentData.boxWidth/2;
                break;
            default:
                documentData.justifyOffset = 0;
        }
    }
    documentData.lineWidths = lineWidths;

    var animators = data.a, animatorData, letterData;
    jLen = animators.length;
    var based, ind, indexes = [];
    for(j=0;j<jLen;j+=1){
        animatorData = animators[j];
        if(animatorData.a.sc){
            documentData.strokeColorAnim = true;
        }
        if(animatorData.a.sw){
            documentData.strokeWidthAnim = true;
        }
        if(animatorData.a.fc || animatorData.a.fh || animatorData.a.fs || animatorData.a.fb){
            documentData.fillColorAnim = true;
        }
        ind = 0;
        based = animatorData.s.b;
        for(i=0;i<len;i+=1){
            letterData = letters[i];
            letterData.anIndexes[j] = ind;
            if((based == 1 && letterData.val !== '') || (based == 2 && letterData.val !== '' && letterData.val !== '\u00A0') || (based == 3 && (letterData.n || letterData.val == '\u00A0' || i == len - 1)) || (based == 4 && (letterData.n || i == len - 1))){
                if(animatorData.s.rn === 1){
                    indexes.push(ind);
                }
                ind += 1;
            }
        }
        data.a[j].s.totalChars = ind;
        var currentInd = -1, newInd;
        if(animatorData.s.rn === 1){
            for(i = 0; i < len; i += 1){
                letterData = letters[i];
                if(currentInd != letterData.anIndexes[j]){
                    currentInd = letterData.anIndexes[j];
                    newInd = indexes.splice(Math.floor(Math.random()*indexes.length),1)[0];
                }
                letterData.anIndexes[j] = newInd;
            }
        }
    }
    documentData.yOffset = documentData.finalLineHeight || documentData.finalSize*1.2;
    documentData.ls = documentData.ls || 0;
    documentData.ascent = fontData.ascent*documentData.finalSize/100;
};

TextProperty.prototype.updateDocumentData = function(newData, index) {
	index = index === undefined ? this.keysIndex : index;
    var dData = this.copyData({}, this.data.d.k[index].s);
    dData = this.copyData(dData, newData);
    this.data.d.k[index].s = dData;
    this.recalculate(index);
    this.elem.addDynamicProperty(this);
};

TextProperty.prototype.recalculate = function(index) {
    var dData = this.data.d.k[index].s;
    dData.__complete = false;
    this.keysIndex = 0;
    this._isFirstFrame = true;
    this.getValue(dData);
};

TextProperty.prototype.canResizeFont = function(_canResize) {
    this.canResize = _canResize;
    this.recalculate(this.keysIndex);
    this.elem.addDynamicProperty(this);
};

TextProperty.prototype.setMinimumFontSize = function(_fontValue) {
    this.minimumFontSize = Math.floor(_fontValue) || 1;
    this.recalculate(this.keysIndex);
    this.elem.addDynamicProperty(this);
};

var TextSelectorProp = (function(){
    var max = Math.max;
    var min = Math.min;
    var floor = Math.floor;

    function TextSelectorProp(elem,data){
        this._currentTextLength = -1;
        this.k = false;
        this.data = data;
        this.elem = elem;
        this.comp = elem.comp;
        this.finalS = 0;
        this.finalE = 0;
        this.initDynamicPropertyContainer(elem);
        this.s = PropertyFactory.getProp(elem,data.s || {k:0},0,0,this);
        if('e' in data){
            this.e = PropertyFactory.getProp(elem,data.e,0,0,this);
        }else{
            this.e = {v:100};
        }
        this.o = PropertyFactory.getProp(elem,data.o || {k:0},0,0,this);
        this.xe = PropertyFactory.getProp(elem,data.xe || {k:0},0,0,this);
        this.ne = PropertyFactory.getProp(elem,data.ne || {k:0},0,0,this);
        this.a = PropertyFactory.getProp(elem,data.a,0,0.01,this);
        if(!this.dynamicProperties.length){
            this.getValue();
        }
    }

    TextSelectorProp.prototype = {
        getMult: function(ind) {
            if(this._currentTextLength !== this.elem.textProperty.currentData.l.length) {
                this.getValue();
            }
            //var easer = bez.getEasingCurve(this.ne.v/100,0,1-this.xe.v/100,1);
            var easer = BezierFactory.getBezierEasing(this.ne.v/100,0,1-this.xe.v/100,1).get;
            var mult = 0;
            var s = this.finalS;
            var e = this.finalE;
            var type = this.data.sh;
            if(type == 2){
                if(e === s){
                    mult = ind >= e ? 1 : 0;
                }else{
                    mult = max(0,min(0.5/(e-s) + (ind-s)/(e-s),1));
                }
                mult = easer(mult);
            }else if(type == 3){
                if(e === s){
                    mult = ind >= e ? 0 : 1;
                }else{
                    mult = 1 - max(0,min(0.5/(e-s) + (ind-s)/(e-s),1));
                }

                mult = easer(mult);
            }else if(type == 4){
                if(e === s){
                    mult = 0;
                }else{
                    mult = max(0,min(0.5/(e-s) + (ind-s)/(e-s),1));
                    if(mult<0.5){
                        mult *= 2;
                    }else{
                        mult = 1 - 2*(mult-0.5);
                    }
                }
                mult = easer(mult);
            }else if(type == 5){
                if(e === s){
                    mult = 0;
                }else{
                    var tot = e - s;
                    /*ind += 0.5;
                    mult = -4/(tot*tot)*(ind*ind)+(4/tot)*ind;*/
                    ind = min(max(0,ind+0.5-s),e-s);
                    var x = -tot/2+ind;
                    var a = tot/2;
                    mult = Math.sqrt(1 - (x*x)/(a*a));
                }
                mult = easer(mult);
            }else if(type == 6){
                if(e === s){
                    mult = 0;
                }else{
                    ind = min(max(0,ind+0.5-s),e-s);
                    mult = (1+(Math.cos((Math.PI+Math.PI*2*(ind)/(e-s)))))/2;
                    /*
                     ind = Math.min(Math.max(s,ind),e-1);
                     mult = (1+(Math.cos((Math.PI+Math.PI*2*(ind-s)/(e-1-s)))))/2;
                     mult = Math.max(mult,(1/(e-1-s))/(e-1-s));*/
                }
                mult = easer(mult);
            }else {
                if(ind >= floor(s)){
                    if(ind-s < 0){
                        mult = 1 - (s - ind);
                    }else{
                        mult = max(0,min(e-ind,1));
                    }
                }
                mult = easer(mult);
            }
            return mult*this.a.v;
        },
        getValue: function(newCharsFlag) {
            this.iterateDynamicProperties();
            this._mdf = newCharsFlag || this._mdf;
            this._currentTextLength = this.elem.textProperty.currentData.l.length || 0;
            if(newCharsFlag && this.data.r === 2) {
                this.e.v = this._currentTextLength;
            }
            var divisor = this.data.r === 2 ? 1 : 100 / this.data.totalChars;
            var o = this.o.v/divisor;
            var s = this.s.v/divisor + o;
            var e = (this.e.v/divisor) + o;
            if(s>e){
                var _s = s;
                s = e;
                e = _s;
            }
            this.finalS = s;
            this.finalE = e;
        }
    };
    extendPrototype([DynamicPropertyContainer], TextSelectorProp);

    function getTextSelectorProp(elem, data,arr) {
        return new TextSelectorProp(elem, data, arr);
    }

    return {
        getTextSelectorProp: getTextSelectorProp
    };
}());

    
var pool_factory = (function() {
	return function(initialLength, _create, _release, _clone) {

		var _length = 0;
		var _maxLength = initialLength;
		var pool = createSizedArray(_maxLength);

		var ob = {
			newElement: newElement,
			release: release
		};

		function newElement(){
			var element;
			if(_length){
				_length -= 1;
				element = pool[_length];
			} else {
				element = _create();
			}
			return element;
		}

		function release(element) {
			if(_length === _maxLength) {
				pool = pooling.double(pool);
				_maxLength = _maxLength*2;
			}
			if (_release) {
				_release(element);
			}
			pool[_length] = element;
			_length += 1;
		}

		return ob;
	};
}());

var pooling = (function(){

	function double(arr){
		return arr.concat(createSizedArray(arr.length));
	}

	return {
		double: double
	};
}());
var point_pool = (function(){

	function create() {
		return createTypedArray('float32', 2);
	}
	return pool_factory(8, create);
}());
var shape_pool = (function(){

	function create() {
		return new ShapePath();
	}

	function release(shapePath) {
		var len = shapePath._length, i;
		for(i = 0; i < len; i += 1) {
			point_pool.release(shapePath.v[i]);
			point_pool.release(shapePath.i[i]);
			point_pool.release(shapePath.o[i]);
			shapePath.v[i] = null;
			shapePath.i[i] = null;
			shapePath.o[i] = null;
		}
		shapePath._length = 0;
		shapePath.c = false;
	}

	function clone(shape) {
		var cloned = factory.newElement();
		var i, len = shape._length === undefined ? shape.v.length : shape._length;
		cloned.setLength(len);
		cloned.c = shape.c;
		
		for(i = 0; i < len; i += 1) {
			cloned.setTripleAt(shape.v[i][0],shape.v[i][1],shape.o[i][0],shape.o[i][1],shape.i[i][0],shape.i[i][1], i);
		}
		return cloned;
	}

	var factory = pool_factory(4, create, release);
	factory.clone = clone;

	return factory;
}());
var shapeCollection_pool = (function(){
	var ob = {
		newShapeCollection: newShapeCollection,
		release: release
	};

	var _length = 0;
	var _maxLength = 4;
	var pool = createSizedArray(_maxLength);

	function newShapeCollection(){
		var shapeCollection;
		if(_length){
			_length -= 1;
			shapeCollection = pool[_length];
		} else {
			shapeCollection = new ShapeCollection();
		}
		return shapeCollection;
	}

	function release(shapeCollection) {
		var i, len = shapeCollection._length;
		for(i = 0; i < len; i += 1) {
			shape_pool.release(shapeCollection.shapes[i]);
		}
		shapeCollection._length = 0;

		if(_length === _maxLength) {
			pool = pooling.double(pool);
			_maxLength = _maxLength*2;
		}
		pool[_length] = shapeCollection;
		_length += 1;
	}

	return ob;
}());
var segments_length_pool = (function(){

	function create() {
		return {
			lengths: [],
			totalLength: 0
		};
	}

	function release(element) {
		var i, len = element.lengths.length;
		for(i=0;i<len;i+=1) {
			bezier_length_pool.release(element.lengths[i]);
		}
		element.lengths.length = 0;
	}

	return pool_factory(8, create, release);
}());
var bezier_length_pool = (function(){

	function create() {
		return {
            addedLength: 0,
            percents: createTypedArray('float32', defaultCurveSegments),
            lengths: createTypedArray('float32', defaultCurveSegments),
        };
	}
	return pool_factory(8, create);
}());
function BaseRenderer(){}
BaseRenderer.prototype.checkLayers = function(num){
    var i, len = this.layers.length, data;
    this.completeLayers = true;
    for (i = len - 1; i >= 0; i--) {
        if (!this.elements[i]) {
            data = this.layers[i];
            if(data.ip - data.st <= (num - this.layers[i].st) && data.op - data.st > (num - this.layers[i].st))
            {
                this.buildItem(i);
            }
        }
        this.completeLayers = this.elements[i] ? this.completeLayers:false;
    }
    this.checkPendingElements();
};

BaseRenderer.prototype.createItem = function(layer){
    switch(layer.ty){
        case 2:
            return this.createImage(layer);
        case 0:
            return this.createComp(layer);
        case 1:
            return this.createSolid(layer);
        case 3:
            return this.createNull(layer);
        case 4:
            return this.createShape(layer);
        case 5:
            return this.createText(layer);
        case 13:
            return this.createCamera(layer);
    }
    return this.createNull(layer);
};

BaseRenderer.prototype.createCamera = function(){
    throw new Error('You\'re using a 3d camera. Try the html renderer.');
};

BaseRenderer.prototype.buildAllItems = function(){
    var i, len = this.layers.length;
    for(i=0;i<len;i+=1){
        this.buildItem(i);
    }
    this.checkPendingElements();
};

BaseRenderer.prototype.includeLayers = function(newLayers){
    this.completeLayers = false;
    var i, len = newLayers.length;
    var j, jLen = this.layers.length;
    for(i=0;i<len;i+=1){
        j = 0;
        while(j<jLen){
            if(this.layers[j].id == newLayers[i].id){
                this.layers[j] = newLayers[i];
                break;
            }
            j += 1;
        }
    }
};

BaseRenderer.prototype.setProjectInterface = function(pInterface){
    this.globalData.projectInterface = pInterface;
};

BaseRenderer.prototype.initItems = function(){
    if(!this.globalData.progressiveLoad){
        this.buildAllItems();
    }
};
BaseRenderer.prototype.buildElementParenting = function(element, parentName, hierarchy) {
    var elements = this.elements;
    var layers = this.layers;
    var i=0, len = layers.length;
    while (i < len) {
        if (layers[i].ind == parentName) {
            if (!elements[i] || elements[i] === true) {
                this.buildItem(i);
                this.addPendingElement(element);
            } else {
                hierarchy.push(elements[i]);
                elements[i].setAsParent();
                if(layers[i].parent !== undefined) {
                    this.buildElementParenting(element, layers[i].parent, hierarchy);
                } else {
                    element.setHierarchy(hierarchy);
                }
            }
        }
        i += 1;
    }
};

BaseRenderer.prototype.addPendingElement = function(element){
    this.pendingElements.push(element);
};

BaseRenderer.prototype.searchExtraCompositions = function(assets){
    var i, len = assets.length;
    for(i=0;i<len;i+=1){
        if(assets[i].xt){
            var comp = this.createComp(assets[i]);
            comp.initExpressions();
            this.globalData.projectInterface.registerComposition(comp);
        }
    }
};

BaseRenderer.prototype.setupGlobalData = function(animData, fontsContainer) {
    this.globalData.fontManager = new FontManager();
    this.globalData.fontManager.addChars(animData.chars);
    this.globalData.fontManager.addFonts(animData.fonts, fontsContainer);
    this.globalData.getAssetData = this.animationItem.getAssetData.bind(this.animationItem);
    this.globalData.getAssetsPath = this.animationItem.getAssetsPath.bind(this.animationItem);
    this.globalData.imageLoader = this.animationItem.imagePreloader;
    this.globalData.frameId = 0;
    this.globalData.frameRate = animData.fr;
    this.globalData.nm = animData.nm;
    this.globalData.compSize = {
        w: animData.w,
        h: animData.h
    };
};
function SVGRenderer(animationItem, config){
    this.animationItem = animationItem;
    this.layers = null;
    this.renderedFrame = -1;
    this.svgElement = createNS('svg');
    var ariaLabel = '';
    if (config && config.title) {
        var titleElement = createNS('title');
        var titleId = createElementID();
        titleElement.setAttribute('id', titleId);
        titleElement.textContent = config.title;
        this.svgElement.appendChild(titleElement);
        ariaLabel += titleId;
    }
    if (config && config.description) {
        var descElement = createNS('desc');
        var descId = createElementID();
        descElement.setAttribute('id', descId);
        descElement.textContent = config.description;
        this.svgElement.appendChild(descElement);
        ariaLabel += ' ' + descId;
    }
    if (ariaLabel) {
        this.svgElement.setAttribute('aria-labelledby', ariaLabel);
    }
    var defs = createNS( 'defs');
    this.svgElement.appendChild(defs);
    var maskElement = createNS('g');
    this.svgElement.appendChild(maskElement);
    this.layerElement = maskElement;
    this.renderConfig = {
        preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
        imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
        progressiveLoad: (config && config.progressiveLoad) || false,
        hideOnTransparent: (config && config.hideOnTransparent === false) ? false : true,
        viewBoxOnly: (config && config.viewBoxOnly) || false,
        viewBoxSize: (config && config.viewBoxSize) || false,
        className: (config && config.className) || ''
    };

    this.globalData = {
        _mdf: false,
        frameNum: -1,
        defs: defs,
        renderConfig: this.renderConfig
    };
    this.elements = [];
    this.pendingElements = [];
    this.destroyed = false;
    this.rendererType = 'svg';

}

extendPrototype([BaseRenderer],SVGRenderer);

SVGRenderer.prototype.createNull = function (data) {
    return new NullElement(data,this.globalData,this);
};

SVGRenderer.prototype.createShape = function (data) {
    return new SVGShapeElement(data,this.globalData,this);
};

SVGRenderer.prototype.createText = function (data) {
    return new SVGTextElement(data,this.globalData,this);

};

SVGRenderer.prototype.createImage = function (data) {
    return new IImageElement(data,this.globalData,this);
};

SVGRenderer.prototype.createComp = function (data) {
    return new SVGCompElement(data,this.globalData,this);

};

SVGRenderer.prototype.createSolid = function (data) {
    return new ISolidElement(data,this.globalData,this);
};

SVGRenderer.prototype.configAnimation = function(animData){
    this.svgElement.setAttribute('xmlns','http://www.w3.org/2000/svg');
    if(this.renderConfig.viewBoxSize) {
        this.svgElement.setAttribute('viewBox',this.renderConfig.viewBoxSize);
    } else {
        this.svgElement.setAttribute('viewBox','0 0 '+animData.w+' '+animData.h);
    }

    if(!this.renderConfig.viewBoxOnly) {
        this.svgElement.setAttribute('width',animData.w);
        this.svgElement.setAttribute('height',animData.h);
        this.svgElement.style.width = '100%';
        this.svgElement.style.height = '100%';
        this.svgElement.style.transform = 'translate3d(0,0,0)';
    }
    if(this.renderConfig.className) {
        this.svgElement.setAttribute('class', this.renderConfig.className);
    }
    this.svgElement.setAttribute('preserveAspectRatio',this.renderConfig.preserveAspectRatio);
    //this.layerElement.style.transform = 'translate3d(0,0,0)';
    //this.layerElement.style.transformOrigin = this.layerElement.style.mozTransformOrigin = this.layerElement.style.webkitTransformOrigin = this.layerElement.style['-webkit-transform'] = "0px 0px 0px";
    this.animationItem.wrapper.appendChild(this.svgElement);
    //Mask animation
    var defs = this.globalData.defs;

    this.setupGlobalData(animData, defs);
    this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;
    this.data = animData;

    var maskElement = createNS( 'clipPath');
    var rect = createNS('rect');
    rect.setAttribute('width',animData.w);
    rect.setAttribute('height',animData.h);
    rect.setAttribute('x',0);
    rect.setAttribute('y',0);
    var maskId = createElementID();
    maskElement.setAttribute('id', maskId);
    maskElement.appendChild(rect);
    this.layerElement.setAttribute("clip-path", "url(" + locationHref + "#"+maskId+")");

    defs.appendChild(maskElement);
    this.layers = animData.layers;
    this.elements = createSizedArray(animData.layers.length);
};


SVGRenderer.prototype.destroy = function () {
    this.animationItem.wrapper.innerHTML = '';
    this.layerElement = null;
    this.globalData.defs = null;
    var i, len = this.layers ? this.layers.length : 0;
    for (i = 0; i < len; i++) {
        if(this.elements[i]){
            this.elements[i].destroy();
        }
    }
    this.elements.length = 0;
    this.destroyed = true;
    this.animationItem = null;
};

SVGRenderer.prototype.updateContainerSize = function () {
};

SVGRenderer.prototype.buildItem  = function(pos){
    var elements = this.elements;
    if(elements[pos] || this.layers[pos].ty == 99){
        return;
    }
    elements[pos] = true;
    var element = this.createItem(this.layers[pos]);

    elements[pos] = element;
    if(expressionsPlugin){
        if(this.layers[pos].ty === 0){
            this.globalData.projectInterface.registerComposition(element);
        }
        element.initExpressions();
    }
    this.appendElementInPos(element,pos);
    if(this.layers[pos].tt){
        if(!this.elements[pos - 1] || this.elements[pos - 1] === true){
            this.buildItem(pos - 1);
            this.addPendingElement(element);
        } else {
            element.setMatte(elements[pos - 1].layerId);
        }
    }
};

SVGRenderer.prototype.checkPendingElements  = function(){
    while(this.pendingElements.length){
        var element = this.pendingElements.pop();
        element.checkParenting();
        if(element.data.tt){
            var i = 0, len = this.elements.length;
            while(i<len){
                if(this.elements[i] === element){
                    element.setMatte(this.elements[i - 1].layerId);
                    break;
                }
                i += 1;
            }
        }
    }
};

SVGRenderer.prototype.renderFrame = function(num){
    if(this.renderedFrame === num || this.destroyed){
        return;
    }
    if(num === null){
        num = this.renderedFrame;
    }else{
        this.renderedFrame = num;
    }
    // console.log('-------');
    // console.log('FRAME ',num);
    this.globalData.frameNum = num;
    this.globalData.frameId += 1;
    this.globalData.projectInterface.currentFrame = num;
    this.globalData._mdf = false;
    var i, len = this.layers.length;
    if(!this.completeLayers){
        this.checkLayers(num);
    }
    for (i = len - 1; i >= 0; i--) {
        if(this.completeLayers || this.elements[i]){
            this.elements[i].prepareFrame(num - this.layers[i].st);
        }
    }
    if(this.globalData._mdf) {
        for (i = 0; i < len; i += 1) {
            if(this.completeLayers || this.elements[i]){
                this.elements[i].renderFrame();
            }
        }
    }
};

SVGRenderer.prototype.appendElementInPos = function(element, pos){
    var newElement = element.getBaseElement();
    if(!newElement){
        return;
    }
    var i = 0;
    var nextElement;
    while(i<pos){
        if(this.elements[i] && this.elements[i]!== true && this.elements[i].getBaseElement()){
            nextElement = this.elements[i].getBaseElement();
        }
        i += 1;
    }
    if(nextElement){
        this.layerElement.insertBefore(newElement, nextElement);
    } else {
        this.layerElement.appendChild(newElement);
    }
};

SVGRenderer.prototype.hide = function(){
    this.layerElement.style.display = 'none';
};

SVGRenderer.prototype.show = function(){
    this.layerElement.style.display = 'block';
};

function CanvasRenderer(animationItem, config){
    this.animationItem = animationItem;
    this.renderConfig = {
        clearCanvas: (config && config.clearCanvas !== undefined) ? config.clearCanvas : true,
        context: (config && config.context) || null,
        progressiveLoad: (config && config.progressiveLoad) || false,
        preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
        imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
        className: (config && config.className) || ''
    };
    this.renderConfig.dpr = (config && config.dpr) || 1;
    if (this.animationItem.wrapper) {
        this.renderConfig.dpr = (config && config.dpr) || window.devicePixelRatio || 1;
    }
    this.renderedFrame = -1;
    this.globalData = {
        frameNum: -1,
        _mdf: false,
        renderConfig: this.renderConfig,
        currentGlobalAlpha: -1
    };
    this.contextData = new CVContextData();
    this.elements = [];
    this.pendingElements = [];
    this.transformMat = new Matrix();
    this.completeLayers = false;
    this.rendererType = 'canvas';
}
extendPrototype([BaseRenderer],CanvasRenderer);

CanvasRenderer.prototype.createShape = function (data) {
    return new CVShapeElement(data, this.globalData, this);
};

CanvasRenderer.prototype.createText = function (data) {
    return new CVTextElement(data, this.globalData, this);
};

CanvasRenderer.prototype.createImage = function (data) {
    return new CVImageElement(data, this.globalData, this);
};

CanvasRenderer.prototype.createComp = function (data) {
    return new CVCompElement(data, this.globalData, this);
};

CanvasRenderer.prototype.createSolid = function (data) {
    return new CVSolidElement(data, this.globalData, this);
};

CanvasRenderer.prototype.createNull = SVGRenderer.prototype.createNull;

CanvasRenderer.prototype.ctxTransform = function(props){
    if(props[0] === 1 && props[1] === 0 && props[4] === 0 && props[5] === 1 && props[12] === 0 && props[13] === 0){
        return;
    }
    if(!this.renderConfig.clearCanvas){
        this.canvasContext.transform(props[0],props[1],props[4],props[5],props[12],props[13]);
        return;
    }
    this.transformMat.cloneFromProps(props);
    var cProps = this.contextData.cTr.props;
    this.transformMat.transform(cProps[0],cProps[1],cProps[2],cProps[3],cProps[4],cProps[5],cProps[6],cProps[7],cProps[8],cProps[9],cProps[10],cProps[11],cProps[12],cProps[13],cProps[14],cProps[15]);
    //this.contextData.cTr.transform(props[0],props[1],props[2],props[3],props[4],props[5],props[6],props[7],props[8],props[9],props[10],props[11],props[12],props[13],props[14],props[15]);
    this.contextData.cTr.cloneFromProps(this.transformMat.props);
    var trProps = this.contextData.cTr.props;
    this.canvasContext.setTransform(trProps[0],trProps[1],trProps[4],trProps[5],trProps[12],trProps[13]);
};

CanvasRenderer.prototype.ctxOpacity = function(op){
    /*if(op === 1){
        return;
    }*/
    if(!this.renderConfig.clearCanvas){
        this.canvasContext.globalAlpha *= op < 0 ? 0 : op;
        this.globalData.currentGlobalAlpha = this.contextData.cO;
        return;
    }
    this.contextData.cO *= op < 0 ? 0 : op;
    if(this.globalData.currentGlobalAlpha !== this.contextData.cO) {
        this.canvasContext.globalAlpha = this.contextData.cO;
        this.globalData.currentGlobalAlpha = this.contextData.cO;
    }
};

CanvasRenderer.prototype.reset = function(){
    if(!this.renderConfig.clearCanvas){
        this.canvasContext.restore();
        return;
    }
    this.contextData.reset();
};

CanvasRenderer.prototype.save = function(actionFlag){
    if(!this.renderConfig.clearCanvas){
        this.canvasContext.save();
        return;
    }
    if(actionFlag){
        this.canvasContext.save();
    }
    var props = this.contextData.cTr.props;
    if(this.contextData._length <= this.contextData.cArrPos) {
        this.contextData.duplicate();
    }
    var i, arr = this.contextData.saved[this.contextData.cArrPos];
    for (i = 0; i < 16; i += 1) {
        arr[i] = props[i];
    }
    this.contextData.savedOp[this.contextData.cArrPos] = this.contextData.cO;
    this.contextData.cArrPos += 1;
};

CanvasRenderer.prototype.restore = function(actionFlag){
    if(!this.renderConfig.clearCanvas){
        this.canvasContext.restore();
        return;
    }
    if(actionFlag){
        this.canvasContext.restore();
        this.globalData.blendMode = 'source-over';
    }
    this.contextData.cArrPos -= 1;
    var popped = this.contextData.saved[this.contextData.cArrPos];
    var i,arr = this.contextData.cTr.props;
    for(i=0;i<16;i+=1){
        arr[i] = popped[i];
    }
    this.canvasContext.setTransform(popped[0],popped[1],popped[4],popped[5],popped[12],popped[13]);
    popped = this.contextData.savedOp[this.contextData.cArrPos];
    this.contextData.cO = popped;
    if(this.globalData.currentGlobalAlpha !== popped) {
        this.canvasContext.globalAlpha = popped;
        this.globalData.currentGlobalAlpha = popped;
    }
};

CanvasRenderer.prototype.configAnimation = function(animData){
    if(this.animationItem.wrapper){
        this.animationItem.container = createTag('canvas');
        this.animationItem.container.style.width = '100%';
        this.animationItem.container.style.height = '100%';
        //this.animationItem.container.style.transform = 'translate3d(0,0,0)';
        //this.animationItem.container.style.webkitTransform = 'translate3d(0,0,0)';
        this.animationItem.container.style.transformOrigin = this.animationItem.container.style.mozTransformOrigin = this.animationItem.container.style.webkitTransformOrigin = this.animationItem.container.style['-webkit-transform'] = "0px 0px 0px";
        this.animationItem.wrapper.appendChild(this.animationItem.container);
        this.canvasContext = this.animationItem.container.getContext('2d');
        if(this.renderConfig.className) {
            this.animationItem.container.setAttribute('class', this.renderConfig.className);
        }
    }else{
        this.canvasContext = this.renderConfig.context;
    }
    this.data = animData;
    this.layers = animData.layers;
    this.transformCanvas = {
        w: animData.w,
        h:animData.h,
        sx:0,
        sy:0,
        tx:0,
        ty:0
    };
    this.setupGlobalData(animData, document.body);
    this.globalData.canvasContext = this.canvasContext;
    this.globalData.renderer = this;
    this.globalData.isDashed = false;
    this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;
    this.globalData.transformCanvas = this.transformCanvas;
    this.elements = createSizedArray(animData.layers.length);

    this.updateContainerSize();
};

CanvasRenderer.prototype.updateContainerSize = function () {
    this.reset();
    var elementWidth,elementHeight;
    if(this.animationItem.wrapper && this.animationItem.container){
        elementWidth = this.animationItem.wrapper.offsetWidth;
        elementHeight = this.animationItem.wrapper.offsetHeight;
        this.animationItem.container.setAttribute('width',elementWidth * this.renderConfig.dpr );
        this.animationItem.container.setAttribute('height',elementHeight * this.renderConfig.dpr);
    }else{
        elementWidth = this.canvasContext.canvas.width * this.renderConfig.dpr;
        elementHeight = this.canvasContext.canvas.height * this.renderConfig.dpr;
    }
    var elementRel,animationRel;
    if(this.renderConfig.preserveAspectRatio.indexOf('meet') !== -1 || this.renderConfig.preserveAspectRatio.indexOf('slice') !== -1){
        var par = this.renderConfig.preserveAspectRatio.split(' ');
        var fillType = par[1] || 'meet';
        var pos = par[0] || 'xMidYMid';
        var xPos = pos.substr(0,4);
        var yPos = pos.substr(4);
        elementRel = elementWidth/elementHeight;
        animationRel = this.transformCanvas.w/this.transformCanvas.h;
        if(animationRel>elementRel && fillType === 'meet' || animationRel<elementRel && fillType === 'slice'){
            this.transformCanvas.sx = elementWidth/(this.transformCanvas.w/this.renderConfig.dpr);
            this.transformCanvas.sy = elementWidth/(this.transformCanvas.w/this.renderConfig.dpr);
        }else{
            this.transformCanvas.sx = elementHeight/(this.transformCanvas.h / this.renderConfig.dpr);
            this.transformCanvas.sy = elementHeight/(this.transformCanvas.h / this.renderConfig.dpr);
        }

        if(xPos === 'xMid' && ((animationRel<elementRel && fillType==='meet') || (animationRel>elementRel && fillType === 'slice'))){
            this.transformCanvas.tx = (elementWidth-this.transformCanvas.w*(elementHeight/this.transformCanvas.h))/2*this.renderConfig.dpr;
        } else if(xPos === 'xMax' && ((animationRel<elementRel && fillType==='meet') || (animationRel>elementRel && fillType === 'slice'))){
            this.transformCanvas.tx = (elementWidth-this.transformCanvas.w*(elementHeight/this.transformCanvas.h))*this.renderConfig.dpr;
        } else {
            this.transformCanvas.tx = 0;
        }
        if(yPos === 'YMid' && ((animationRel>elementRel && fillType==='meet') || (animationRel<elementRel && fillType === 'slice'))){
            this.transformCanvas.ty = ((elementHeight-this.transformCanvas.h*(elementWidth/this.transformCanvas.w))/2)*this.renderConfig.dpr;
        } else if(yPos === 'YMax' && ((animationRel>elementRel && fillType==='meet') || (animationRel<elementRel && fillType === 'slice'))){
            this.transformCanvas.ty = ((elementHeight-this.transformCanvas.h*(elementWidth/this.transformCanvas.w)))*this.renderConfig.dpr;
        } else {
            this.transformCanvas.ty = 0;
        }

    }else if(this.renderConfig.preserveAspectRatio == 'none'){
        this.transformCanvas.sx = elementWidth/(this.transformCanvas.w/this.renderConfig.dpr);
        this.transformCanvas.sy = elementHeight/(this.transformCanvas.h/this.renderConfig.dpr);
        this.transformCanvas.tx = 0;
        this.transformCanvas.ty = 0;
    }else{
        this.transformCanvas.sx = this.renderConfig.dpr;
        this.transformCanvas.sy = this.renderConfig.dpr;
        this.transformCanvas.tx = 0;
        this.transformCanvas.ty = 0;
    }
    this.transformCanvas.props = [this.transformCanvas.sx,0,0,0,0,this.transformCanvas.sy,0,0,0,0,1,0,this.transformCanvas.tx,this.transformCanvas.ty,0,1];
    /*var i, len = this.elements.length;
    for(i=0;i<len;i+=1){
        if(this.elements[i] && this.elements[i].data.ty === 0){
            this.elements[i].resize(this.globalData.transformCanvas);
        }
    }*/
    this.ctxTransform(this.transformCanvas.props);
    this.canvasContext.beginPath();
    this.canvasContext.rect(0,0,this.transformCanvas.w,this.transformCanvas.h);
    this.canvasContext.closePath();
    this.canvasContext.clip();

    this.renderFrame(this.renderedFrame, true);
};

CanvasRenderer.prototype.destroy = function () {
    if(this.renderConfig.clearCanvas) {
        this.animationItem.wrapper.innerHTML = '';
    }
    var i, len = this.layers ? this.layers.length : 0;
    for (i = len - 1; i >= 0; i-=1) {
        if(this.elements[i]) {
            this.elements[i].destroy();
        }
    }
    this.elements.length = 0;
    this.globalData.canvasContext = null;
    this.animationItem.container = null;
    this.destroyed = true;
};

CanvasRenderer.prototype.renderFrame = function(num, forceRender){
    if((this.renderedFrame === num && this.renderConfig.clearCanvas === true && !forceRender) || this.destroyed || num === -1){
        return;
    }
    this.renderedFrame = num;
    this.globalData.frameNum = num - this.animationItem._isFirstFrame;
    this.globalData.frameId += 1;
    this.globalData._mdf = !this.renderConfig.clearCanvas || forceRender;
    this.globalData.projectInterface.currentFrame = num;

     // console.log('--------');
     // console.log('NEW: ',num);
    var i, len = this.layers.length;
    if(!this.completeLayers){
        this.checkLayers(num);
    }

    for (i = 0; i < len; i++) {
        if(this.completeLayers || this.elements[i]){
            this.elements[i].prepareFrame(num - this.layers[i].st);
        }
    }
    if(this.globalData._mdf) {
        if(this.renderConfig.clearCanvas === true){
            this.canvasContext.clearRect(0, 0, this.transformCanvas.w, this.transformCanvas.h);
        }else{
            this.save();
        }
        for (i = len - 1; i >= 0; i-=1) {
            if(this.completeLayers || this.elements[i]){
                this.elements[i].renderFrame();
            }
        }
        if(this.renderConfig.clearCanvas !== true){
            this.restore();
        }
    }
};

CanvasRenderer.prototype.buildItem = function(pos){
    var elements = this.elements;
    if(elements[pos] || this.layers[pos].ty == 99){
        return;
    }
    var element = this.createItem(this.layers[pos], this,this.globalData);
    elements[pos] = element;
    element.initExpressions();
    /*if(this.layers[pos].ty === 0){
        element.resize(this.globalData.transformCanvas);
    }*/
};

CanvasRenderer.prototype.checkPendingElements  = function(){
    while(this.pendingElements.length){
        var element = this.pendingElements.pop();
        element.checkParenting();
    }
};

CanvasRenderer.prototype.hide = function(){
    this.animationItem.container.style.display = 'none';
};

CanvasRenderer.prototype.show = function(){
    this.animationItem.container.style.display = 'block';
};

function HybridRenderer(animationItem, config){
    this.animationItem = animationItem;
    this.layers = null;
    this.renderedFrame = -1;
    this.renderConfig = {
        className: (config && config.className) || '',
        imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
        hideOnTransparent: (config && config.hideOnTransparent === false) ? false : true
    };
    this.globalData = {
        _mdf: false,
        frameNum: -1,
        renderConfig: this.renderConfig
    };
    this.pendingElements = [];
    this.elements = [];
    this.threeDElements = [];
    this.destroyed = false;
    this.camera = null;
    this.supports3d = true;
    this.rendererType = 'html';

}

extendPrototype([BaseRenderer],HybridRenderer);

HybridRenderer.prototype.buildItem = SVGRenderer.prototype.buildItem;

HybridRenderer.prototype.checkPendingElements  = function(){
    while(this.pendingElements.length){
        var element = this.pendingElements.pop();
        element.checkParenting();
    }
};

HybridRenderer.prototype.appendElementInPos = function(element, pos){
    var newDOMElement = element.getBaseElement();
    if(!newDOMElement){
        return;
    }
    var layer = this.layers[pos];
    if(!layer.ddd || !this.supports3d){
        if(this.threeDElements) {
            this.addTo3dContainer(newDOMElement,pos);
        } else {
            var i = 0;
            var nextDOMElement, nextLayer, tmpDOMElement;
            while(i<pos){
                if(this.elements[i] && this.elements[i]!== true && this.elements[i].getBaseElement){
                    nextLayer = this.elements[i];
                    tmpDOMElement = this.layers[i].ddd ? this.getThreeDContainerByPos(i) : nextLayer.getBaseElement();
                    nextDOMElement = tmpDOMElement || nextDOMElement;
                }
                i += 1;
            }
            if(nextDOMElement){
                if(!layer.ddd || !this.supports3d){
                    this.layerElement.insertBefore(newDOMElement, nextDOMElement);
                }
            } else {
                if(!layer.ddd || !this.supports3d){
                    this.layerElement.appendChild(newDOMElement);
                }
            }
        }
        
    } else {
        this.addTo3dContainer(newDOMElement,pos);
    }
};

HybridRenderer.prototype.createShape = function (data) {
    if(!this.supports3d){
        return new SVGShapeElement(data, this.globalData, this);
    }
    return new HShapeElement(data, this.globalData, this);
};

HybridRenderer.prototype.createText = function (data) {
    if(!this.supports3d){
        return new SVGTextElement(data, this.globalData, this);
    }
    return new HTextElement(data, this.globalData, this);
};

HybridRenderer.prototype.createCamera = function (data) {
    this.camera = new HCameraElement(data, this.globalData, this);
    return this.camera;
};

HybridRenderer.prototype.createImage = function (data) {
    if(!this.supports3d){
        return new IImageElement(data, this.globalData, this);
    }
    return new HImageElement(data, this.globalData, this);
};

HybridRenderer.prototype.createComp = function (data) {
    if(!this.supports3d){
        return new SVGCompElement(data, this.globalData, this);
    }
    return new HCompElement(data, this.globalData, this);

};

HybridRenderer.prototype.createSolid = function (data) {
    if(!this.supports3d){
        return new ISolidElement(data, this.globalData, this);
    }
    return new HSolidElement(data, this.globalData, this);
};

HybridRenderer.prototype.createNull = SVGRenderer.prototype.createNull;

HybridRenderer.prototype.getThreeDContainerByPos = function(pos){
    var i = 0, len = this.threeDElements.length;
    while(i<len) {
        if(this.threeDElements[i].startPos <= pos && this.threeDElements[i].endPos >= pos) {
            return this.threeDElements[i].perspectiveElem;
        }
        i += 1;
    }
};

HybridRenderer.prototype.createThreeDContainer = function(pos, type){
    var perspectiveElem = createTag('div');
    styleDiv(perspectiveElem);
    var container = createTag('div');
    styleDiv(container);
    if(type === '3d') {
        perspectiveElem.style.width = this.globalData.compSize.w+'px';
        perspectiveElem.style.height = this.globalData.compSize.h+'px';
        perspectiveElem.style.transformOrigin = perspectiveElem.style.mozTransformOrigin = perspectiveElem.style.webkitTransformOrigin = "50% 50%";
        container.style.transform = container.style.webkitTransform = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)';
    }
    
    perspectiveElem.appendChild(container);
    //this.resizerElem.appendChild(perspectiveElem);
    var threeDContainerData = {
        container:container,
        perspectiveElem:perspectiveElem,
        startPos: pos,
        endPos: pos,
        type: type
    };
    this.threeDElements.push(threeDContainerData);
    return threeDContainerData;
};

HybridRenderer.prototype.build3dContainers = function(){
    var i, len = this.layers.length;
    var lastThreeDContainerData;
    var currentContainer = '';
    for(i=0;i<len;i+=1){
        if(this.layers[i].ddd && this.layers[i].ty !== 3){
            if(currentContainer !== '3d'){
                currentContainer = '3d';
                lastThreeDContainerData = this.createThreeDContainer(i,'3d');
            }
            lastThreeDContainerData.endPos = Math.max(lastThreeDContainerData.endPos,i);
        } else {
            if(currentContainer !== '2d'){
                currentContainer = '2d';
                lastThreeDContainerData = this.createThreeDContainer(i,'2d');
            }
            lastThreeDContainerData.endPos = Math.max(lastThreeDContainerData.endPos,i);
        }
    }
    len = this.threeDElements.length;
    for(i = len - 1; i >= 0; i --) {
        this.resizerElem.appendChild(this.threeDElements[i].perspectiveElem);
    }
};

HybridRenderer.prototype.addTo3dContainer = function(elem,pos){
    var i = 0, len = this.threeDElements.length;
    while(i<len){
        if(pos <= this.threeDElements[i].endPos){
            var j = this.threeDElements[i].startPos;
            var nextElement;
            while(j<pos){
                if(this.elements[j] && this.elements[j].getBaseElement){
                    nextElement = this.elements[j].getBaseElement();
                }
                j += 1;
            }
            if(nextElement){
                this.threeDElements[i].container.insertBefore(elem, nextElement);
            } else {
                this.threeDElements[i].container.appendChild(elem);
            }
            break;
        }
        i += 1;
    }
};

HybridRenderer.prototype.configAnimation = function(animData){
    var resizerElem = createTag('div');
    var wrapper = this.animationItem.wrapper;
    resizerElem.style.width = animData.w+'px';
    resizerElem.style.height = animData.h+'px';
    this.resizerElem = resizerElem;
    styleDiv(resizerElem);
    resizerElem.style.transformStyle = resizerElem.style.webkitTransformStyle = resizerElem.style.mozTransformStyle = "flat";
    if(this.renderConfig.className) {
      resizerElem.setAttribute('class', this.renderConfig.className);
    }
    wrapper.appendChild(resizerElem);

    resizerElem.style.overflow = 'hidden';
    var svg = createNS('svg');
    svg.setAttribute('width','1');
    svg.setAttribute('height','1');
    styleDiv(svg);
    this.resizerElem.appendChild(svg);
    var defs = createNS('defs');
    svg.appendChild(defs);
    this.data = animData;
    //Mask animation
    this.setupGlobalData(animData, svg);
    this.globalData.defs = defs;
    this.layers = animData.layers;
    this.layerElement = this.resizerElem;
    this.build3dContainers();
    this.updateContainerSize();
};

HybridRenderer.prototype.destroy = function () {
    this.animationItem.wrapper.innerHTML = '';
    this.animationItem.container = null;
    this.globalData.defs = null;
    var i, len = this.layers ? this.layers.length : 0;
    for (i = 0; i < len; i++) {
        this.elements[i].destroy();
    }
    this.elements.length = 0;
    this.destroyed = true;
    this.animationItem = null;
};

HybridRenderer.prototype.updateContainerSize = function () {
    var elementWidth = this.animationItem.wrapper.offsetWidth;
    var elementHeight = this.animationItem.wrapper.offsetHeight;
    var elementRel = elementWidth/elementHeight;
    var animationRel = this.globalData.compSize.w/this.globalData.compSize.h;
    var sx,sy,tx,ty;
    if(animationRel>elementRel){
        sx = elementWidth/(this.globalData.compSize.w);
        sy = elementWidth/(this.globalData.compSize.w);
        tx = 0;
        ty = ((elementHeight-this.globalData.compSize.h*(elementWidth/this.globalData.compSize.w))/2);
    }else{
        sx = elementHeight/(this.globalData.compSize.h);
        sy = elementHeight/(this.globalData.compSize.h);
        tx = (elementWidth-this.globalData.compSize.w*(elementHeight/this.globalData.compSize.h))/2;
        ty = 0;
    }
    this.resizerElem.style.transform = this.resizerElem.style.webkitTransform = 'matrix3d(' + sx + ',0,0,0,0,'+sy+',0,0,0,0,1,0,'+tx+','+ty+',0,1)';
};

HybridRenderer.prototype.renderFrame = SVGRenderer.prototype.renderFrame;

HybridRenderer.prototype.hide = function(){
    this.resizerElem.style.display = 'none';
};

HybridRenderer.prototype.show = function(){
    this.resizerElem.style.display = 'block';
};

HybridRenderer.prototype.initItems = function(){
    this.buildAllItems();
    if(this.camera){
        this.camera.setup();
    } else {
        var cWidth = this.globalData.compSize.w;
        var cHeight = this.globalData.compSize.h;
        var i, len = this.threeDElements.length;
        for(i=0;i<len;i+=1){
            this.threeDElements[i].perspectiveElem.style.perspective = this.threeDElements[i].perspectiveElem.style.webkitPerspective = Math.sqrt(Math.pow(cWidth,2) + Math.pow(cHeight,2)) + 'px';
        }
    }
};

HybridRenderer.prototype.searchExtraCompositions = function(assets){
    var i, len = assets.length;
    var floatingContainer = createTag('div');
    for(i=0;i<len;i+=1){
        if(assets[i].xt){
            var comp = this.createComp(assets[i],floatingContainer,this.globalData.comp,null);
            comp.initExpressions();
            this.globalData.projectInterface.registerComposition(comp);
        }
    }
};

function MaskElement(data,element,globalData) {
    this.data = data;
    this.element = element;
    this.globalData = globalData;
    this.storedData = [];
    this.masksProperties = this.data.masksProperties || [];
    this.maskElement = null;
    var defs = this.globalData.defs;
    var i, len = this.masksProperties ? this.masksProperties.length : 0;
    this.viewData = createSizedArray(len);
    this.solidPath = '';


    var path, properties = this.masksProperties;
    var count = 0;
    var currentMasks = [];
    var j, jLen;
    var layerId = createElementID();
    var rect, expansor, feMorph,x;
    var maskType = 'clipPath', maskRef = 'clip-path';
    for (i = 0; i < len; i++) {

        if((properties[i].mode !== 'a' && properties[i].mode !== 'n')|| properties[i].inv || properties[i].o.k !== 100){
            maskType = 'mask';
            maskRef = 'mask';
        }

        if((properties[i].mode == 's' || properties[i].mode == 'i') && count === 0){
            rect = createNS( 'rect');
            rect.setAttribute('fill', '#ffffff');
            rect.setAttribute('width', this.element.comp.data.w || 0);
            rect.setAttribute('height', this.element.comp.data.h || 0);
            currentMasks.push(rect);
        } else {
            rect = null;
        }

        path = createNS( 'path');
        if(properties[i].mode == 'n') {
            // TODO move this to a factory or to a constructor
            this.viewData[i] = {
                op: PropertyFactory.getProp(this.element,properties[i].o,0,0.01,this.element),
                prop: ShapePropertyFactory.getShapeProp(this.element,properties[i],3),
                elem: path,
                lastPath: ''
            };
            defs.appendChild(path);
            continue;
        }
        count += 1;

        path.setAttribute('fill', properties[i].mode === 's' ? '#000000':'#ffffff');
        path.setAttribute('clip-rule','nonzero');
        var filterID;

        if (properties[i].x.k !== 0) {
            maskType = 'mask';
            maskRef = 'mask';
            x = PropertyFactory.getProp(this.element,properties[i].x,0,null,this.element);
            filterID = createElementID();
            expansor = createNS('filter');
            expansor.setAttribute('id',filterID);
            feMorph = createNS('feMorphology');
            feMorph.setAttribute('operator','dilate');
            feMorph.setAttribute('in','SourceGraphic');
            feMorph.setAttribute('radius','0');
            expansor.appendChild(feMorph);
            defs.appendChild(expansor);
            path.setAttribute('stroke', properties[i].mode === 's' ? '#000000':'#ffffff');
        } else {
            feMorph = null;
            x = null;
        }

        // TODO move this to a factory or to a constructor
        this.storedData[i] = {
             elem: path,
             x: x,
             expan: feMorph,
            lastPath: '',
            lastOperator:'',
            filterId:filterID,
            lastRadius:0
        };
        if(properties[i].mode == 'i'){
            jLen = currentMasks.length;
            var g = createNS('g');
            for(j=0;j<jLen;j+=1){
                g.appendChild(currentMasks[j]);
            }
            var mask = createNS('mask');
            mask.setAttribute('mask-type','alpha');
            mask.setAttribute('id',layerId+'_'+count);
            mask.appendChild(path);
            defs.appendChild(mask);
            g.setAttribute('mask','url(' + locationHref + '#'+layerId+'_'+count+')');

            currentMasks.length = 0;
            currentMasks.push(g);
        }else{
            currentMasks.push(path);
        }
        if(properties[i].inv && !this.solidPath){
            this.solidPath = this.createLayerSolidPath();
        }
        // TODO move this to a factory or to a constructor
        this.viewData[i] = {
            elem: path,
            lastPath: '',
            op: PropertyFactory.getProp(this.element,properties[i].o,0,0.01,this.element),
            prop:ShapePropertyFactory.getShapeProp(this.element,properties[i],3),
            invRect: rect
        };
        if(!this.viewData[i].prop.k){
            this.drawPath(properties[i],this.viewData[i].prop.v,this.viewData[i]);
        }
    }

    this.maskElement = createNS( maskType);

    len = currentMasks.length;
    for(i=0;i<len;i+=1){
        this.maskElement.appendChild(currentMasks[i]);
    }

    if(count > 0){
        this.maskElement.setAttribute('id', layerId);
        this.element.maskedElement.setAttribute(maskRef, "url(" + locationHref + "#" + layerId + ")");
        defs.appendChild(this.maskElement);
    }
    if (this.viewData.length) {
        this.element.addRenderableComponent(this);
    }

}

MaskElement.prototype.getMaskProperty = function(pos){
    return this.viewData[pos].prop;
};

MaskElement.prototype.renderFrame = function (isFirstFrame) {
    var finalMat = this.element.finalTransform.mat;
    var i, len = this.masksProperties.length;
    for (i = 0; i < len; i++) {
        if(this.viewData[i].prop._mdf || isFirstFrame){
            this.drawPath(this.masksProperties[i],this.viewData[i].prop.v,this.viewData[i]);
        }
        if(this.viewData[i].op._mdf || isFirstFrame){
            this.viewData[i].elem.setAttribute('fill-opacity',this.viewData[i].op.v);
        }
        if(this.masksProperties[i].mode !== 'n'){
            if(this.viewData[i].invRect && (this.element.finalTransform.mProp._mdf || isFirstFrame)){
                this.viewData[i].invRect.setAttribute('x', -finalMat.props[12]);
                this.viewData[i].invRect.setAttribute('y', -finalMat.props[13]);
            }
            if(this.storedData[i].x && (this.storedData[i].x._mdf || isFirstFrame)){
                var feMorph = this.storedData[i].expan;
                if(this.storedData[i].x.v < 0){
                    if(this.storedData[i].lastOperator !== 'erode'){
                        this.storedData[i].lastOperator = 'erode';
                        this.storedData[i].elem.setAttribute('filter','url(' + locationHref + '#'+this.storedData[i].filterId+')');
                    }
                    feMorph.setAttribute('radius',-this.storedData[i].x.v);
                }else{
                    if(this.storedData[i].lastOperator !== 'dilate'){
                        this.storedData[i].lastOperator = 'dilate';
                        this.storedData[i].elem.setAttribute('filter',null);
                    }
                    this.storedData[i].elem.setAttribute('stroke-width', this.storedData[i].x.v*2);

                }
            }
        }
    }
};

MaskElement.prototype.getMaskelement = function () {
    return this.maskElement;
};

MaskElement.prototype.createLayerSolidPath = function(){
    var path = 'M0,0 ';
    path += ' h' + this.globalData.compSize.w ;
    path += ' v' + this.globalData.compSize.h ;
    path += ' h-' + this.globalData.compSize.w ;
    path += ' v-' + this.globalData.compSize.h + ' ';
    return path;
};

MaskElement.prototype.drawPath = function(pathData,pathNodes,viewData){
    var pathString = " M"+pathNodes.v[0][0]+','+pathNodes.v[0][1];
    var i, len;
    len = pathNodes._length;
    for(i=1;i<len;i+=1){
        //pathString += " C"+pathNodes.o[i-1][0]+','+pathNodes.o[i-1][1] + " "+pathNodes.i[i][0]+','+pathNodes.i[i][1] + " "+pathNodes.v[i][0]+','+pathNodes.v[i][1];
        pathString += " C"+pathNodes.o[i-1][0]+','+pathNodes.o[i-1][1] + " "+pathNodes.i[i][0]+','+pathNodes.i[i][1] + " "+pathNodes.v[i][0]+','+pathNodes.v[i][1];
    }
        //pathString += " C"+pathNodes.o[i-1][0]+','+pathNodes.o[i-1][1] + " "+pathNodes.i[0][0]+','+pathNodes.i[0][1] + " "+pathNodes.v[0][0]+','+pathNodes.v[0][1];
    if(pathNodes.c && len > 1){
        pathString += " C"+pathNodes.o[i-1][0]+','+pathNodes.o[i-1][1] + " "+pathNodes.i[0][0]+','+pathNodes.i[0][1] + " "+pathNodes.v[0][0]+','+pathNodes.v[0][1];
    }
    //pathNodes.__renderedString = pathString;

    if(viewData.lastPath !== pathString){
        var pathShapeValue = '';
        if(viewData.elem){
            if(pathNodes.c){
                pathShapeValue = pathData.inv ? this.solidPath + pathString : pathString;
            }
            viewData.elem.setAttribute('d',pathShapeValue);
        }
        viewData.lastPath = pathString;
    }
};

MaskElement.prototype.destroy = function(){
    this.element = null;
    this.globalData = null;
    this.maskElement = null;
    this.data = null;
    this.masksProperties = null;
};

/**
 * @file 
 * Handles AE's layer parenting property.
 *
 */

function HierarchyElement(){}

HierarchyElement.prototype = {
	/**
     * @function 
     * Initializes hierarchy properties
     *
     */
	initHierarchy: function() {
		//element's parent list
	    this.hierarchy = [];
	    //if element is parent of another layer _isParent will be true
	    this._isParent = false;
	    this.checkParenting();
	},
	/**
     * @function 
     * Sets layer's hierarchy.
     * @param {array} hierarch
     * layer's parent list
     *
     */ 
	setHierarchy: function(hierarchy){
	    this.hierarchy = hierarchy;
	},
	/**
     * @function 
     * Sets layer as parent.
     *
     */ 
	setAsParent: function() {
	    this._isParent = true;
	},
	/**
     * @function 
     * Searches layer's parenting chain
     *
     */ 
	checkParenting: function(){
	    if (this.data.parent !== undefined){
	        this.comp.buildElementParenting(this, this.data.parent, []);
	    }
	}
};
/**
 * @file 
 * Handles element's layer frame update.
 * Checks layer in point and out point
 *
 */

function FrameElement(){}

FrameElement.prototype = {
    /**
     * @function 
     * Initializes frame related properties.
     *
     */
    initFrame: function(){
        //set to true when inpoint is rendered
        this._isFirstFrame = false;
        //list of animated properties
        this.dynamicProperties = [];
        // If layer has been modified in current tick this will be true
        this._mdf = false;
    },
    /**
     * @function 
     * Calculates all dynamic values
     *
     * @param {number} num
     * current frame number in Layer's time
     * @param {boolean} isVisible
     * if layers is currently in range
     * 
     */
    prepareProperties: function(num, isVisible) {
        var i, len = this.dynamicProperties.length;
        for (i = 0;i < len; i += 1) {
            if (isVisible || (this._isParent && this.dynamicProperties[i].propType === 'transform')) {
                this.dynamicProperties[i].getValue();
                if (this.dynamicProperties[i]._mdf) {
                    this.globalData._mdf = true;
                    this._mdf = true;
                }
            }
        }
    },
    addDynamicProperty: function(prop) {
        if(this.dynamicProperties.indexOf(prop) === -1) {
            this.dynamicProperties.push(prop);
        }
    }
};
function TransformElement(){}

TransformElement.prototype = {
    initTransform: function() {
        this.finalTransform = {
            mProp: this.data.ks ? TransformPropertyFactory.getTransformProperty(this, this.data.ks, this) : {o:0},
            _matMdf: false,
            _opMdf: false,
            mat: new Matrix()
        };
        if (this.data.ao) {
            this.finalTransform.mProp.autoOriented = true;
        }

        //TODO: check TYPE 11: Guided elements
        if (this.data.ty !== 11) ;
    },
    renderTransform: function() {

        this.finalTransform._opMdf = this.finalTransform.mProp.o._mdf || this._isFirstFrame;
        this.finalTransform._matMdf = this.finalTransform.mProp._mdf || this._isFirstFrame;

        if (this.hierarchy) {
            var mat;
            var finalMat = this.finalTransform.mat;
            var i = 0, len = this.hierarchy.length;
            //Checking if any of the transformation matrices in the hierarchy chain has changed.
            if (!this.finalTransform._matMdf) {
                while (i < len) {
                    if (this.hierarchy[i].finalTransform.mProp._mdf) {
                        this.finalTransform._matMdf = true;
                        break;
                    }
                    i += 1;
                }
            }
            
            if (this.finalTransform._matMdf) {
                mat = this.finalTransform.mProp.v.props;
                finalMat.cloneFromProps(mat);
                for (i = 0; i < len; i += 1) {
                    mat = this.hierarchy[i].finalTransform.mProp.v.props;
                    finalMat.transform(mat[0], mat[1], mat[2], mat[3], mat[4], mat[5], mat[6], mat[7], mat[8], mat[9], mat[10], mat[11], mat[12], mat[13], mat[14], mat[15]);
                }
            }
        }
    },
    globalToLocal: function(pt) {
        var transforms = [];
        transforms.push(this.finalTransform);
        var flag = true;
        var comp = this.comp;
        while (flag) {
            if (comp.finalTransform) {
                if (comp.data.hasMask) {
                    transforms.splice(0, 0, comp.finalTransform);
                }
                comp = comp.comp;
            } else {
                flag = false;
            }
        }
        var i, len = transforms.length,ptNew;
        for (i = 0; i < len; i += 1) {
            ptNew = transforms[i].mat.applyToPointArray(0, 0, 0);
            //ptNew = transforms[i].mat.applyToPointArray(pt[0],pt[1],pt[2]);
            pt = [pt[0] - ptNew[0], pt[1] - ptNew[1], 0];
        }
        return pt;
    },
    mHelper: new Matrix()
};
function RenderableElement(){

}

RenderableElement.prototype = {
    initRenderable: function() {
        //layer's visibility related to inpoint and outpoint. Rename isVisible to isInRange
        this.isInRange = false;
        //layer's display state
        this.hidden = false;
        // If layer's transparency equals 0, it can be hidden
        this.isTransparent = false;
        //list of animated components
        this.renderableComponents = [];
    },
    addRenderableComponent: function(component) {
        if(this.renderableComponents.indexOf(component) === -1) {
            this.renderableComponents.push(component);
        }
    },
    removeRenderableComponent: function(component) {
        if(this.renderableComponents.indexOf(component) !== -1) {
            this.renderableComponents.splice(this.renderableComponents.indexOf(component), 1);
        }
    },
    prepareRenderableFrame: function(num) {
        this.checkLayerLimits(num);
    },
    checkTransparency: function(){
        if(this.finalTransform.mProp.o.v <= 0) {
            if(!this.isTransparent && this.globalData.renderConfig.hideOnTransparent){
                this.isTransparent = true;
                this.hide();
            }
        } else if(this.isTransparent) {
            this.isTransparent = false;
            this.show();
        }
    },
    /**
     * @function 
     * Initializes frame related properties.
     *
     * @param {number} num
     * current frame number in Layer's time
     * 
     */
    checkLayerLimits: function(num) {
        if(this.data.ip - this.data.st <= num && this.data.op - this.data.st > num)
        {
            if(this.isInRange !== true){
                this.globalData._mdf = true;
                this._mdf = true;
                this.isInRange = true;
                this.show();
            }
        } else {
            if(this.isInRange !== false){
                this.globalData._mdf = true;
                this.isInRange = false;
                this.hide();
            }
        }
    },
    renderRenderable: function() {
        var i, len = this.renderableComponents.length;
        for(i = 0; i < len; i += 1) {
            this.renderableComponents[i].renderFrame(this._isFirstFrame);
        }
        /*this.maskManager.renderFrame(this.finalTransform.mat);
        this.renderableEffectsManager.renderFrame(this._isFirstFrame);*/
    },
    sourceRectAtTime: function(){
        return {
            top:0,
            left:0,
            width:100,
            height:100
        };
    },
    getLayerSize: function(){
        if(this.data.ty === 5){
            return {w:this.data.textData.width,h:this.data.textData.height};
        }else{
            return {w:this.data.width,h:this.data.height};
        }
    }
};
function RenderableDOMElement() {}

(function(){
    var _prototype = {
        initElement: function(data,globalData,comp) {
            this.initFrame();
            this.initBaseData(data, globalData, comp);
            this.initTransform(data, globalData, comp);
            this.initHierarchy();
            this.initRenderable();
            this.initRendererElement();
            this.createContainerElements();
            this.createRenderableComponents();
            this.createContent();
            this.hide();
        },
        hide: function(){
            if (!this.hidden && (!this.isInRange || this.isTransparent)) {
                var elem = this.baseElement || this.layerElement;
                elem.style.display = 'none';
                this.hidden = true;
            }
        },
        show: function(){
            if (this.isInRange && !this.isTransparent){
                if (!this.data.hd) {
                    var elem = this.baseElement || this.layerElement;
                    elem.style.display = 'block';
                }
                this.hidden = false;
                this._isFirstFrame = true;
            }
        },
        renderFrame: function() {
            //If it is exported as hidden (data.hd === true) no need to render
            //If it is not visible no need to render
            if (this.data.hd || this.hidden) {
                return;
            }
            this.renderTransform();
            this.renderRenderable();
            this.renderElement();
            this.renderInnerContent();
            if (this._isFirstFrame) {
                this._isFirstFrame = false;
            }
        },
        renderInnerContent: function() {},
        prepareFrame: function(num) {
            this._mdf = false;
            this.prepareRenderableFrame(num);
            this.prepareProperties(num, this.isInRange);
            this.checkTransparency();
        },
        destroy: function(){
            this.innerElem =  null;
            this.destroyBaseElement();
        }
    };
    extendPrototype([RenderableElement, createProxyFunction(_prototype)], RenderableDOMElement);
}());
function ProcessedElement(element, position) {
	this.elem = element;
	this.pos = position;
}
function SVGStyleData(data, level) {
	this.data = data;
	this.type = data.ty;
	this.d = '';
	this.lvl = level;
	this._mdf = false;
	this.closed = data.hd === true;
	this.pElem = createNS('path');
	this.msElem = null;
}

SVGStyleData.prototype.reset = function() {
	this.d = '';
	this._mdf = false;
};
function SVGShapeData(transformers, level, shape) {
    this.caches = [];
    this.styles = [];
    this.transformers = transformers;
    this.lStr = '';
    this.sh = shape;
    this.lvl = level;
    //TODO find if there are some cases where _isAnimated can be false. 
    // For now, since shapes add up with other shapes. They have to be calculated every time.
    // One way of finding out is checking if all styles associated to this shape depend only of this shape
    this._isAnimated = !!shape.k;
    // TODO: commenting this for now since all shapes are animated
    var i = 0, len = transformers.length;
    while(i < len) {
    	if(transformers[i].mProps.dynamicProperties.length) {
    		this._isAnimated = true;
    		break;
    	}
    	i += 1;
    }
}

SVGShapeData.prototype.setAsAnimated = function() {
    this._isAnimated = true;
};
function SVGTransformData(mProps, op, container) {
	this.transform = {
		mProps: mProps,
		op: op,
		container: container
	};
	this.elements = [];
    this._isAnimated = this.transform.mProps.dynamicProperties.length || this.transform.op.effectsSequence.length;
}
function SVGStrokeStyleData(elem, data, styleOb){
	this.initDynamicPropertyContainer(elem);
	this.getValue = this.iterateDynamicProperties;
	this.o = PropertyFactory.getProp(elem,data.o,0,0.01,this);
	this.w = PropertyFactory.getProp(elem,data.w,0,null,this);
	this.d = new DashProperty(elem,data.d||{},'svg',this);
	this.c = PropertyFactory.getProp(elem,data.c,1,255,this);
	this.style = styleOb;
    this._isAnimated = !!this._isAnimated;
}

extendPrototype([DynamicPropertyContainer], SVGStrokeStyleData);
function SVGFillStyleData(elem, data, styleOb){
	this.initDynamicPropertyContainer(elem);
	this.getValue = this.iterateDynamicProperties;
	this.o = PropertyFactory.getProp(elem,data.o,0,0.01,this);
	this.c = PropertyFactory.getProp(elem,data.c,1,255,this);
	this.style = styleOb;
}

extendPrototype([DynamicPropertyContainer], SVGFillStyleData);
function SVGGradientFillStyleData(elem, data, styleOb){
    this.initDynamicPropertyContainer(elem);
    this.getValue = this.iterateDynamicProperties;
    this.initGradientData(elem, data, styleOb);
}

SVGGradientFillStyleData.prototype.initGradientData = function(elem, data, styleOb){
    this.o = PropertyFactory.getProp(elem,data.o,0,0.01,this);
    this.s = PropertyFactory.getProp(elem,data.s,1,null,this);
    this.e = PropertyFactory.getProp(elem,data.e,1,null,this);
    this.h = PropertyFactory.getProp(elem,data.h||{k:0},0,0.01,this);
    this.a = PropertyFactory.getProp(elem,data.a||{k:0},0,degToRads,this);
    this.g = new GradientProperty(elem,data.g,this);
    this.style = styleOb;
    this.stops = [];
    this.setGradientData(styleOb.pElem, data);
    this.setGradientOpacity(data, styleOb);
    this._isAnimated = !!this._isAnimated;

};

SVGGradientFillStyleData.prototype.setGradientData = function(pathElement,data){

    var gradientId = createElementID();
    var gfill = createNS(data.t === 1 ? 'linearGradient' : 'radialGradient');
    gfill.setAttribute('id',gradientId);
    gfill.setAttribute('spreadMethod','pad');
    gfill.setAttribute('gradientUnits','userSpaceOnUse');
    var stops = [];
    var stop, j, jLen;
    jLen = data.g.p*4;
    for(j=0;j<jLen;j+=4){
        stop = createNS('stop');
        gfill.appendChild(stop);
        stops.push(stop);
    }
    pathElement.setAttribute( data.ty === 'gf' ? 'fill':'stroke','url(' + locationHref + '#'+gradientId+')');
    
    this.gf = gfill;
    this.cst = stops;
};

SVGGradientFillStyleData.prototype.setGradientOpacity = function(data, styleOb){
    if(this.g._hasOpacity && !this.g._collapsable){
        var stop, j, jLen;
        var mask = createNS("mask");
        var maskElement = createNS( 'path');
        mask.appendChild(maskElement);
        var opacityId = createElementID();
        var maskId = createElementID();
        mask.setAttribute('id',maskId);
        var opFill = createNS(data.t === 1 ? 'linearGradient' : 'radialGradient');
        opFill.setAttribute('id',opacityId);
        opFill.setAttribute('spreadMethod','pad');
        opFill.setAttribute('gradientUnits','userSpaceOnUse');
        jLen = data.g.k.k[0].s ? data.g.k.k[0].s.length : data.g.k.k.length;
        var stops = this.stops;
        for(j=data.g.p*4;j<jLen;j+=2){
            stop = createNS('stop');
            stop.setAttribute('stop-color','rgb(255,255,255)');
            opFill.appendChild(stop);
            stops.push(stop);
        }
        maskElement.setAttribute( data.ty === 'gf' ? 'fill':'stroke','url(' + locationHref + '#'+opacityId+')');
        this.of = opFill;
        this.ms = mask;
        this.ost = stops;
        this.maskId = maskId;
        styleOb.msElem = maskElement;
    }
};

extendPrototype([DynamicPropertyContainer], SVGGradientFillStyleData);
function SVGGradientStrokeStyleData(elem, data, styleOb){
	this.initDynamicPropertyContainer(elem);
	this.getValue = this.iterateDynamicProperties;
	this.w = PropertyFactory.getProp(elem,data.w,0,null,this);
	this.d = new DashProperty(elem,data.d||{},'svg',this);
    this.initGradientData(elem, data, styleOb);
    this._isAnimated = !!this._isAnimated;
}

extendPrototype([SVGGradientFillStyleData, DynamicPropertyContainer], SVGGradientStrokeStyleData);
function ShapeGroupData() {
	this.it = [];
    this.prevViewData = [];
    this.gr = createNS('g');
}
var SVGElementsRenderer = (function() {
	var _identityMatrix = new Matrix();
	var _matrixHelper = new Matrix();

	var ob = {
		createRenderFunction: createRenderFunction
	};

	function createRenderFunction(data) {
	    var ty = data.ty;
	    switch(data.ty) {
	        case 'fl':
	        return renderFill;
	        case 'gf':
	        return renderGradient;
	        case 'gs':
	        return renderGradientStroke;
	        case 'st':
	        return renderStroke;
	        case 'sh':
	        case 'el':
	        case 'rc':
	        case 'sr':
	        return renderPath;
	        case 'tr':
	        return renderContentTransform;
	    }
	}

	function renderContentTransform(styleData, itemData, isFirstFrame) {
	    if(isFirstFrame || itemData.transform.op._mdf){
	        itemData.transform.container.setAttribute('opacity',itemData.transform.op.v);
	    }
	    if(isFirstFrame || itemData.transform.mProps._mdf){
	        itemData.transform.container.setAttribute('transform',itemData.transform.mProps.v.to2dCSS());
	    }
	}

	function renderPath(styleData, itemData, isFirstFrame) {
	    var j, jLen,pathStringTransformed,redraw,pathNodes,l, lLen = itemData.styles.length;
	    var lvl = itemData.lvl;
	    var paths, mat, props, iterations, k;
	    for(l=0;l<lLen;l+=1){
	        redraw = itemData.sh._mdf || isFirstFrame;
	        if(itemData.styles[l].lvl < lvl){
	            mat = _matrixHelper.reset();
	            iterations = lvl - itemData.styles[l].lvl;
	            k = itemData.transformers.length-1;
	            while(!redraw && iterations > 0) {
	                redraw = itemData.transformers[k].mProps._mdf || redraw;
	                iterations --;
	                k --;
	            }
	            if(redraw) {
	                iterations = lvl - itemData.styles[l].lvl;
	                k = itemData.transformers.length-1;
	                while(iterations > 0) {
	                    props = itemData.transformers[k].mProps.v.props;
	                    mat.transform(props[0],props[1],props[2],props[3],props[4],props[5],props[6],props[7],props[8],props[9],props[10],props[11],props[12],props[13],props[14],props[15]);
	                    iterations --;
	                    k --;
	                }
	            }
	        } else {
	            mat = _identityMatrix;
	        }
	        paths = itemData.sh.paths;
	        jLen = paths._length;
	        if(redraw){
	            pathStringTransformed = '';
	            for(j=0;j<jLen;j+=1){
	                pathNodes = paths.shapes[j];
	                if(pathNodes && pathNodes._length){
	                    pathStringTransformed += buildShapeString(pathNodes, pathNodes._length, pathNodes.c, mat);
	                }
	            }
	            itemData.caches[l] = pathStringTransformed;
	        } else {
	            pathStringTransformed = itemData.caches[l];
	        }
	        itemData.styles[l].d += styleData.hd === true ? '' : pathStringTransformed;
	        itemData.styles[l]._mdf = redraw || itemData.styles[l]._mdf;
	    }
	}

	function renderFill (styleData,itemData, isFirstFrame){
	    var styleElem = itemData.style;

	    if(itemData.c._mdf || isFirstFrame){
	        styleElem.pElem.setAttribute('fill','rgb('+bm_floor(itemData.c.v[0])+','+bm_floor(itemData.c.v[1])+','+bm_floor(itemData.c.v[2])+')');
	    }
	    if(itemData.o._mdf || isFirstFrame){
	        styleElem.pElem.setAttribute('fill-opacity',itemData.o.v);
	    }
	}
	function renderGradientStroke (styleData, itemData, isFirstFrame) {
	    renderGradient(styleData, itemData, isFirstFrame);
	    renderStroke(styleData, itemData, isFirstFrame);
	}

	function renderGradient(styleData, itemData, isFirstFrame) {
	    var gfill = itemData.gf;
	    var hasOpacity = itemData.g._hasOpacity;
	    var pt1 = itemData.s.v, pt2 = itemData.e.v;

	    if (itemData.o._mdf || isFirstFrame) {
	        var attr = styleData.ty === 'gf' ? 'fill-opacity' : 'stroke-opacity';
	        itemData.style.pElem.setAttribute(attr, itemData.o.v);
	    }
	    if (itemData.s._mdf || isFirstFrame) {
	        var attr1 = styleData.t === 1 ? 'x1' : 'cx';
	        var attr2 = attr1 === 'x1' ? 'y1' : 'cy';
	        gfill.setAttribute(attr1, pt1[0]);
	        gfill.setAttribute(attr2, pt1[1]);
	        if (hasOpacity && !itemData.g._collapsable) {
	            itemData.of.setAttribute(attr1, pt1[0]);
	            itemData.of.setAttribute(attr2, pt1[1]);
	        }
	    }
	    var stops, i, len, stop;
	    if (itemData.g._cmdf || isFirstFrame) {
	        stops = itemData.cst;
	        var cValues = itemData.g.c;
	        len = stops.length;
	        for (i = 0; i < len; i += 1){
	            stop = stops[i];
	            stop.setAttribute('offset', cValues[i * 4] + '%');
	            stop.setAttribute('stop-color','rgb('+ cValues[i * 4 + 1] + ',' + cValues[i * 4 + 2] + ','+cValues[i * 4 + 3] + ')');
	        }
	    }
	    if (hasOpacity && (itemData.g._omdf || isFirstFrame)) {
	        var oValues = itemData.g.o;
	        if(itemData.g._collapsable) {
	            stops = itemData.cst;
	        } else {
	            stops = itemData.ost;
	        }
	        len = stops.length;
	        for (i = 0; i < len; i += 1) {
	            stop = stops[i];
	            if(!itemData.g._collapsable) {
	                stop.setAttribute('offset', oValues[i * 2] + '%');
	            }
	            stop.setAttribute('stop-opacity', oValues[i * 2 + 1]);
	        }
	    }
	    if (styleData.t === 1) {
	        if (itemData.e._mdf  || isFirstFrame) {
	            gfill.setAttribute('x2', pt2[0]);
	            gfill.setAttribute('y2', pt2[1]);
	            if (hasOpacity && !itemData.g._collapsable) {
	                itemData.of.setAttribute('x2', pt2[0]);
	                itemData.of.setAttribute('y2', pt2[1]);
	            }
	        }
	    } else {
	        var rad;
	        if (itemData.s._mdf || itemData.e._mdf || isFirstFrame) {
	            rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));
	            gfill.setAttribute('r', rad);
	            if(hasOpacity && !itemData.g._collapsable){
	                itemData.of.setAttribute('r', rad);
	            }
	        }
	        if (itemData.e._mdf || itemData.h._mdf || itemData.a._mdf || isFirstFrame) {
	            if (!rad) {
	                rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));
	            }
	            var ang = Math.atan2(pt2[1] - pt1[1], pt2[0] - pt1[0]);

	            var percent = itemData.h.v >= 1 ? 0.99 : itemData.h.v <= -1 ? -0.99: itemData.h.v;
	            var dist = rad * percent;
	            var x = Math.cos(ang + itemData.a.v) * dist + pt1[0];
	            var y = Math.sin(ang + itemData.a.v) * dist + pt1[1];
	            gfill.setAttribute('fx', x);
	            gfill.setAttribute('fy', y);
	            if (hasOpacity && !itemData.g._collapsable) {
	                itemData.of.setAttribute('fx', x);
	                itemData.of.setAttribute('fy', y);
	            }
	        }
	        //gfill.setAttribute('fy','200');
	    }
	}
	function renderStroke(styleData, itemData, isFirstFrame) {
	    var styleElem = itemData.style;
	    var d = itemData.d;
	    if (d && (d._mdf || isFirstFrame) && d.dashStr) {
	        styleElem.pElem.setAttribute('stroke-dasharray', d.dashStr);
	        styleElem.pElem.setAttribute('stroke-dashoffset', d.dashoffset[0]);
	    }
	    if(itemData.c && (itemData.c._mdf || isFirstFrame)){
	        styleElem.pElem.setAttribute('stroke','rgb(' + bm_floor(itemData.c.v[0]) + ',' + bm_floor(itemData.c.v[1]) + ',' + bm_floor(itemData.c.v[2]) + ')');
	    }
	    if(itemData.o._mdf || isFirstFrame){
	        styleElem.pElem.setAttribute('stroke-opacity', itemData.o.v);
	    }
	    if(itemData.w._mdf || isFirstFrame){
	        styleElem.pElem.setAttribute('stroke-width', itemData.w.v);
	        if(styleElem.msElem){
	            styleElem.msElem.setAttribute('stroke-width', itemData.w.v);
	        }
	    }
	}
	return ob;
}());
function ShapeTransformManager() {
	this.sequences = {};
	this.sequenceList = [];
    this.transform_key_count = 0;
}

ShapeTransformManager.prototype = {
	addTransformSequence: function(transforms) {
		var i, len = transforms.length;
		var key = '_';
		for(i = 0; i < len; i += 1) {
			key += transforms[i].transform.key + '_';
		}
		var sequence = this.sequences[key];
		if(!sequence) {
			sequence = {
				transforms: [].concat(transforms),
				finalTransform: new Matrix(),
				_mdf: false
			};
			this.sequences[key] = sequence;
			this.sequenceList.push(sequence);
		}
		return sequence;
	},
	processSequence: function(sequence, isFirstFrame) {
		var i = 0, len = sequence.transforms.length, _mdf = isFirstFrame;
		while (i < len && !isFirstFrame) {
			if (sequence.transforms[i].transform.mProps._mdf) {
				_mdf = true;
				break;
			}
			i += 1;
		}
		if (_mdf) {
			var props;
			sequence.finalTransform.reset();
			for (i = len - 1; i >= 0; i -= 1) {
		        props = sequence.transforms[i].transform.mProps.v.props;
		        sequence.finalTransform.transform(props[0],props[1],props[2],props[3],props[4],props[5],props[6],props[7],props[8],props[9],props[10],props[11],props[12],props[13],props[14],props[15]);
			}
		}
		sequence._mdf = _mdf;
		
	},
	processSequences: function(isFirstFrame) {
		var i, len = this.sequenceList.length;
		for (i = 0; i < len; i += 1) {
			this.processSequence(this.sequenceList[i], isFirstFrame);
		}

	},
	getNewKey: function() {
		return '_' + this.transform_key_count++;
	}
};
function CVShapeData(element, data, styles, transformsManager) {
    this.styledShapes = [];
    this.tr = [0,0,0,0,0,0];
    var ty = 4;
    if(data.ty == 'rc'){
        ty = 5;
    }else if(data.ty == 'el'){
        ty = 6;
    }else if(data.ty == 'sr'){
        ty = 7;
    }
    this.sh = ShapePropertyFactory.getShapeProp(element,data,ty,element);
    var i , len = styles.length,styledShape;
    for (i = 0; i < len; i += 1) {
        if (!styles[i].closed) {
            styledShape = {
                transforms: transformsManager.addTransformSequence(styles[i].transforms),
                trNodes: []
            };
            this.styledShapes.push(styledShape);
            styles[i].elements.push(styledShape);
        }
    }
}

CVShapeData.prototype.setAsAnimated = SVGShapeData.prototype.setAsAnimated;
function BaseElement(){
}

BaseElement.prototype = {
    checkMasks: function(){
        if(!this.data.hasMask){
            return false;
        }
        var i = 0, len = this.data.masksProperties.length;
        while(i<len) {
            if((this.data.masksProperties[i].mode !== 'n' && this.data.masksProperties[i].cl !== false)) {
                return true;
            }
            i += 1;
        }
        return false;
    },
    initExpressions: function(){
        this.layerInterface = LayerExpressionInterface(this);
        if(this.data.hasMask && this.maskManager) {
            this.layerInterface.registerMaskInterface(this.maskManager);
        }
        var effectsInterface = EffectsExpressionInterface.createEffectsInterface(this,this.layerInterface);
        this.layerInterface.registerEffectsInterface(effectsInterface);

        if(this.data.ty === 0 || this.data.xt){
            this.compInterface = CompExpressionInterface(this);
        } else if(this.data.ty === 4){
            this.layerInterface.shapeInterface = ShapeExpressionInterface(this.shapesData,this.itemsData,this.layerInterface);
            this.layerInterface.content = this.layerInterface.shapeInterface;
        } else if(this.data.ty === 5){
            this.layerInterface.textInterface = TextExpressionInterface(this);
            this.layerInterface.text = this.layerInterface.textInterface;
        }
    },
    setBlendMode: function(){
        var blendModeValue = getBlendMode(this.data.bm);
        var elem = this.baseElement || this.layerElement;

        elem.style['mix-blend-mode'] = blendModeValue;
    },
    initBaseData: function(data, globalData, comp){
        this.globalData = globalData;
        this.comp = comp;
        this.data = data;
        this.layerId = createElementID();
        
        //Stretch factor for old animations missing this property.
        if(!this.data.sr){
            this.data.sr = 1;
        }
        // effects manager
        this.effectsManager = new EffectsManager(this.data,this,this.dynamicProperties);
        
    },
    getType: function(){
        return this.type;
    }
    ,sourceRectAtTime: function(){}
};
function NullElement(data,globalData,comp){
    this.initFrame();
	this.initBaseData(data, globalData, comp);
    this.initFrame();
    this.initTransform(data, globalData, comp);
    this.initHierarchy();
}

NullElement.prototype.prepareFrame = function(num) {
    this.prepareProperties(num, true);
};

NullElement.prototype.renderFrame = function() {
};

NullElement.prototype.getBaseElement = function() {
	return null;
};

NullElement.prototype.destroy = function() {
};

NullElement.prototype.sourceRectAtTime = function() {
};

NullElement.prototype.hide = function() {
};

extendPrototype([BaseElement,TransformElement,HierarchyElement,FrameElement], NullElement);

function SVGBaseElement(){
}

SVGBaseElement.prototype = {
    initRendererElement: function() {
        this.layerElement = createNS('g');
    },
    createContainerElements: function(){
        this.matteElement = createNS('g');
        this.transformedElement = this.layerElement;
        this.maskedElement = this.layerElement;
        this._sizeChanged = false;
        var layerElementParent = null;
        //If this layer acts as a mask for the following layer
        var filId, fil, gg;
        if (this.data.td) {
            if (this.data.td == 3 || this.data.td == 1) {
                var masker = createNS('mask');
                masker.setAttribute('id', this.layerId);
                masker.setAttribute('mask-type', this.data.td == 3 ? 'luminance' : 'alpha');
                masker.appendChild(this.layerElement);
                layerElementParent = masker;
                this.globalData.defs.appendChild(masker);
                // This is only for IE and Edge when mask if of type alpha
                if (!featureSupport.maskType && this.data.td == 1) {
                    masker.setAttribute('mask-type', 'luminance');
                    filId = createElementID();
                    fil = filtersFactory.createFilter(filId);
                    this.globalData.defs.appendChild(fil);
                    fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());
                    gg = createNS('g');
                    gg.appendChild(this.layerElement);
                    layerElementParent = gg;
                    masker.appendChild(gg);
                    gg.setAttribute('filter','url(' + locationHref + '#' + filId + ')');
                }
            } else if(this.data.td == 2) {
                var maskGroup = createNS('mask');
                maskGroup.setAttribute('id', this.layerId);
                maskGroup.setAttribute('mask-type','alpha');
                var maskGrouper = createNS('g');
                maskGroup.appendChild(maskGrouper);
                filId = createElementID();
                fil = filtersFactory.createFilter(filId);
                ////

                // This solution doesn't work on Android when meta tag with viewport attribute is set
                /*var feColorMatrix = createNS('feColorMatrix');
                feColorMatrix.setAttribute('type', 'matrix');
                feColorMatrix.setAttribute('color-interpolation-filters', 'sRGB');
                feColorMatrix.setAttribute('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 -1 1');
                fil.appendChild(feColorMatrix);*/
                ////
                var feCTr = createNS('feComponentTransfer');
                feCTr.setAttribute('in','SourceGraphic');
                fil.appendChild(feCTr);
                var feFunc = createNS('feFuncA');
                feFunc.setAttribute('type','table');
                feFunc.setAttribute('tableValues','1.0 0.0');
                feCTr.appendChild(feFunc);
                ////
                this.globalData.defs.appendChild(fil);
                var alphaRect = createNS('rect');
                alphaRect.setAttribute('width',  this.comp.data.w);
                alphaRect.setAttribute('height', this.comp.data.h);
                alphaRect.setAttribute('x','0');
                alphaRect.setAttribute('y','0');
                alphaRect.setAttribute('fill','#ffffff');
                alphaRect.setAttribute('opacity','0');
                maskGrouper.setAttribute('filter', 'url(' + locationHref + '#'+filId+')');
                maskGrouper.appendChild(alphaRect);
                maskGrouper.appendChild(this.layerElement);
                layerElementParent = maskGrouper;
                if (!featureSupport.maskType) {
                    maskGroup.setAttribute('mask-type', 'luminance');
                    fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());
                    gg = createNS('g');
                    maskGrouper.appendChild(alphaRect);
                    gg.appendChild(this.layerElement);
                    layerElementParent = gg;
                    maskGrouper.appendChild(gg);
                }
                this.globalData.defs.appendChild(maskGroup);
            }
        } else if (this.data.tt) {
            this.matteElement.appendChild(this.layerElement);
            layerElementParent = this.matteElement;
            this.baseElement = this.matteElement;
        } else {
            this.baseElement = this.layerElement;
        }
        if (this.data.ln) {
            this.layerElement.setAttribute('id', this.data.ln);
        }
        if (this.data.cl) {
            this.layerElement.setAttribute('class', this.data.cl);
        }
        //Clipping compositions to hide content that exceeds boundaries. If collapsed transformations is on, component should not be clipped
        if (this.data.ty === 0 && !this.data.hd) {
            var cp = createNS( 'clipPath');
            var pt = createNS('path');
            pt.setAttribute('d','M0,0 L' + this.data.w + ',0' + ' L' + this.data.w + ',' + this.data.h + ' L0,' + this.data.h + 'z');
            var clipId = createElementID();
            cp.setAttribute('id',clipId);
            cp.appendChild(pt);
            this.globalData.defs.appendChild(cp);

            if (this.checkMasks()) {
                var cpGroup = createNS('g');
                cpGroup.setAttribute('clip-path','url(' + locationHref + '#'+clipId + ')');
                cpGroup.appendChild(this.layerElement);
                this.transformedElement = cpGroup;
                if (layerElementParent) {
                    layerElementParent.appendChild(this.transformedElement);
                } else {
                    this.baseElement = this.transformedElement;
                }
            } else {
                this.layerElement.setAttribute('clip-path','url(' + locationHref + '#'+clipId+')');
            }
            
        }
        if (this.data.bm !== 0) {
            this.setBlendMode();
        }

    },
    renderElement: function() {
        if (this.finalTransform._matMdf) {
            this.transformedElement.setAttribute('transform', this.finalTransform.mat.to2dCSS());
        }
        if (this.finalTransform._opMdf) {
            this.transformedElement.setAttribute('opacity', this.finalTransform.mProp.o.v);
        }
    },
    destroyBaseElement: function() {
        this.layerElement = null;
        this.matteElement = null;
        this.maskManager.destroy();
    },
    getBaseElement: function() {
        if (this.data.hd) {
            return null;
        }
        return this.baseElement;
    },
    createRenderableComponents: function() {
        this.maskManager = new MaskElement(this.data, this, this.globalData);
        this.renderableEffectsManager = new SVGEffects(this);
    },
    setMatte: function(id) {
        if (!this.matteElement) {
            return;
        }
        this.matteElement.setAttribute("mask", "url(" + locationHref + "#" + id + ")");
    }
};
function IShapeElement(){
}

IShapeElement.prototype = {
    addShapeToModifiers: function(data) {
        var i, len = this.shapeModifiers.length;
        for(i=0;i<len;i+=1){
            this.shapeModifiers[i].addShape(data);
        }
    },
    isShapeInAnimatedModifiers: function(data) {
        var i = 0, len = this.shapeModifiers.length;
        while(i < len) {
            if(this.shapeModifiers[i].isAnimatedWithShape(data)) {
                return true;
            }
        }
        return false;
    },
    renderModifiers: function() {
        if(!this.shapeModifiers.length){
            return;
        }
        var i, len = this.shapes.length;
        for(i=0;i<len;i+=1){
            this.shapes[i].sh.reset();
        }

        len = this.shapeModifiers.length;
        for(i=len-1;i>=0;i-=1){
            this.shapeModifiers[i].processShapes(this._isFirstFrame);
        }
    },
    lcEnum: {
        '1': 'butt',
        '2': 'round',
        '3': 'square'
    },
    ljEnum: {
        '1': 'miter',
        '2': 'round',
        '3': 'bevel'
    },
    searchProcessedElement: function(elem){
        var elements = this.processedElements;
        var i = 0, len = elements.length;
        while (i < len) {
            if (elements[i].elem === elem) {
                return elements[i].pos;
            }
            i += 1;
        }
        return 0;
    },
    addProcessedElement: function(elem, pos){
        var elements = this.processedElements;
        var i = elements.length;
        while(i) {
            i -= 1;
            if (elements[i].elem === elem) {
                elements[i].pos = pos;
                return;
            }
        }
        elements.push(new ProcessedElement(elem, pos));
    },
    prepareFrame: function(num) {
        this.prepareRenderableFrame(num);
        this.prepareProperties(num, this.isInRange);
    }
};
function ITextElement(){
}

ITextElement.prototype.initElement = function(data,globalData,comp){
    this.lettersChangedFlag = true;
    this.initFrame();
    this.initBaseData(data, globalData, comp);
    this.textProperty = new TextProperty(this, data.t, this.dynamicProperties);
    this.textAnimator = new TextAnimatorProperty(data.t, this.renderType, this);
    this.initTransform(data, globalData, comp);
    this.initHierarchy();
    this.initRenderable();
    this.initRendererElement();
    this.createContainerElements();
    this.createRenderableComponents();
    this.createContent();
    this.hide();
    this.textAnimator.searchProperties(this.dynamicProperties);
};

ITextElement.prototype.prepareFrame = function(num) {
    this._mdf = false;
    this.prepareRenderableFrame(num);
    this.prepareProperties(num, this.isInRange);
    if(this.textProperty._mdf || this.textProperty._isFirstFrame) {
        this.buildNewText();
        this.textProperty._isFirstFrame = false;
        this.textProperty._mdf = false;
    }
};

ITextElement.prototype.createPathShape = function(matrixHelper, shapes) {
    var j,jLen = shapes.length;
    var pathNodes;
    var shapeStr = '';
    for(j=0;j<jLen;j+=1){
        pathNodes = shapes[j].ks.k;
        shapeStr += buildShapeString(pathNodes, pathNodes.i.length, true, matrixHelper);
    }
    return shapeStr;
};

ITextElement.prototype.updateDocumentData = function(newData, index) {
    this.textProperty.updateDocumentData(newData, index);
};

ITextElement.prototype.canResizeFont = function(_canResize) {
    this.textProperty.canResizeFont(_canResize);
};

ITextElement.prototype.setMinimumFontSize = function(_fontSize) {
    this.textProperty.setMinimumFontSize(_fontSize);
};

ITextElement.prototype.applyTextPropertiesToMatrix = function(documentData, matrixHelper, lineNumber, xPos, yPos) {
    if(documentData.ps){
        matrixHelper.translate(documentData.ps[0],documentData.ps[1] + documentData.ascent,0);
    }
    matrixHelper.translate(0,-documentData.ls,0);
    switch(documentData.j){
        case 1:
            matrixHelper.translate(documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[lineNumber]),0,0);
            break;
        case 2:
            matrixHelper.translate(documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[lineNumber] )/2,0,0);
            break;
    }
    matrixHelper.translate(xPos, yPos, 0);
};


ITextElement.prototype.buildColor = function(colorData) {
    return 'rgb(' + Math.round(colorData[0]*255) + ',' + Math.round(colorData[1]*255) + ',' + Math.round(colorData[2]*255) + ')';
};

ITextElement.prototype.emptyProp = new LetterProps();

ITextElement.prototype.destroy = function(){
    
};
function ICompElement(){}

extendPrototype([BaseElement, TransformElement, HierarchyElement, FrameElement, RenderableDOMElement], ICompElement);

ICompElement.prototype.initElement = function(data,globalData,comp) {
    this.initFrame();
    this.initBaseData(data, globalData, comp);
    this.initTransform(data, globalData, comp);
    this.initRenderable();
    this.initHierarchy();
    this.initRendererElement();
    this.createContainerElements();
    this.createRenderableComponents();
    if(this.data.xt || !globalData.progressiveLoad){
        this.buildAllItems();
    }
    this.hide();
};

/*ICompElement.prototype.hide = function(){
    if(!this.hidden){
        this.hideElement();
        var i,len = this.elements.length;
        for( i = 0; i < len; i+=1 ){
            if(this.elements[i]){
                this.elements[i].hide();
            }
        }
    }
};*/

ICompElement.prototype.prepareFrame = function(num){
    this._mdf = false;
    this.prepareRenderableFrame(num);
    this.prepareProperties(num, this.isInRange);
    if(!this.isInRange && !this.data.xt){
        return;
    }

    if (!this.tm._placeholder) {
        var timeRemapped = this.tm.v;
        if(timeRemapped === this.data.op){
            timeRemapped = this.data.op - 1;
        }
        this.renderedFrame = timeRemapped;
    } else {
        this.renderedFrame = num/this.data.sr;
    }
    var i,len = this.elements.length;
    if(!this.completeLayers){
        this.checkLayers(this.renderedFrame);
    }
    //This iteration needs to be backwards because of how expressions connect between each other
    for( i = len - 1; i >= 0; i -= 1 ){
        if(this.completeLayers || this.elements[i]){
            this.elements[i].prepareFrame(this.renderedFrame - this.layers[i].st);
            if(this.elements[i]._mdf) {
                this._mdf = true;
            }
        }
    }
};

ICompElement.prototype.renderInnerContent = function() {
    var i,len = this.layers.length;
    for( i = 0; i < len; i += 1 ){
        if(this.completeLayers || this.elements[i]){
            this.elements[i].renderFrame();
        }
    }
};

ICompElement.prototype.setElements = function(elems){
    this.elements = elems;
};

ICompElement.prototype.getElements = function(){
    return this.elements;
};

ICompElement.prototype.destroyElements = function(){
    var i,len = this.layers.length;
    for( i = 0; i < len; i+=1 ){
        if(this.elements[i]){
            this.elements[i].destroy();
        }
    }
};

ICompElement.prototype.destroy = function(){
    this.destroyElements();
    this.destroyBaseElement();
};

function IImageElement(data,globalData,comp){
    this.assetData = globalData.getAssetData(data.refId);
    this.initElement(data,globalData,comp);
    this.sourceRect = {top:0,left:0,width:this.assetData.w,height:this.assetData.h};
}

extendPrototype([BaseElement,TransformElement,SVGBaseElement,HierarchyElement,FrameElement,RenderableDOMElement], IImageElement);

IImageElement.prototype.createContent = function(){

    var assetPath = this.globalData.getAssetsPath(this.assetData);

    this.innerElem = createNS('image');
    this.innerElem.setAttribute('width',this.assetData.w+"px");
    this.innerElem.setAttribute('height',this.assetData.h+"px");
    this.innerElem.setAttribute('preserveAspectRatio',this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio);
    this.innerElem.setAttributeNS('http://www.w3.org/1999/xlink','href',assetPath);
    
    this.layerElement.appendChild(this.innerElem);
};

IImageElement.prototype.sourceRectAtTime = function() {
	return this.sourceRect;
};
function ISolidElement(data,globalData,comp){
    this.initElement(data,globalData,comp);
}
extendPrototype([IImageElement], ISolidElement);

ISolidElement.prototype.createContent = function(){

    var rect = createNS('rect');
    ////rect.style.width = this.data.sw;
    ////rect.style.height = this.data.sh;
    ////rect.style.fill = this.data.sc;
    rect.setAttribute('width',this.data.sw);
    rect.setAttribute('height',this.data.sh);
    rect.setAttribute('fill',this.data.sc);
    this.layerElement.appendChild(rect);
};
function SVGCompElement(data,globalData,comp){
    this.layers = data.layers;
    this.supports3d = true;
    this.completeLayers = false;
    this.pendingElements = [];
    this.elements = this.layers ? createSizedArray(this.layers.length) : [];
    //this.layerElement = createNS('g');
    this.initElement(data,globalData,comp);
    this.tm = data.tm ? PropertyFactory.getProp(this,data.tm,0,globalData.frameRate,this) : {_placeholder:true};
}

extendPrototype([SVGRenderer, ICompElement, SVGBaseElement], SVGCompElement);
function SVGTextElement(data,globalData,comp){
    this.textSpans = [];
    this.renderType = 'svg';
    this.initElement(data,globalData,comp);
}

extendPrototype([BaseElement,TransformElement,SVGBaseElement,HierarchyElement,FrameElement,RenderableDOMElement,ITextElement], SVGTextElement);

SVGTextElement.prototype.createContent = function(){

    if (this.data.singleShape && !this.globalData.fontManager.chars) {
        this.textContainer = createNS('text');
    }
};

SVGTextElement.prototype.buildTextContents = function(textArray) {
    var i = 0, len = textArray.length;
    var textContents = [], currentTextContent = '';
    while (i < len) {
        if(textArray[i] === String.fromCharCode(13) || textArray[i] === String.fromCharCode(3)) {
            textContents.push(currentTextContent);
            currentTextContent = '';
        } else {
            currentTextContent += textArray[i];
        }
        i += 1;
    }
    textContents.push(currentTextContent);
    return textContents;
};

SVGTextElement.prototype.buildNewText = function(){
    var i, len;

    var documentData = this.textProperty.currentData;
    this.renderedLetters = createSizedArray(documentData ? documentData.l.length : 0);
    if(documentData.fc) {
        this.layerElement.setAttribute('fill', this.buildColor(documentData.fc));
    }else{
        this.layerElement.setAttribute('fill', 'rgba(0,0,0,0)');
    }
    if(documentData.sc){
        this.layerElement.setAttribute('stroke', this.buildColor(documentData.sc));
        this.layerElement.setAttribute('stroke-width', documentData.sw);
    }
    this.layerElement.setAttribute('font-size', documentData.finalSize);
    var fontData = this.globalData.fontManager.getFontByName(documentData.f);
    if(fontData.fClass){
        this.layerElement.setAttribute('class',fontData.fClass);
    } else {
        this.layerElement.setAttribute('font-family', fontData.fFamily);
        var fWeight = documentData.fWeight, fStyle = documentData.fStyle;
        this.layerElement.setAttribute('font-style', fStyle);
        this.layerElement.setAttribute('font-weight', fWeight);
    }
    this.layerElement.setAttribute('arial-label', documentData.t);

    var letters = documentData.l || [];
    var usesGlyphs = !!this.globalData.fontManager.chars;
    len = letters.length;

    var tSpan;
    var matrixHelper = this.mHelper;
    var shapes, shapeStr = '', singleShape = this.data.singleShape;
    var xPos = 0, yPos = 0, firstLine = true;
    var trackingOffset = documentData.tr/1000*documentData.finalSize;
    if(singleShape && !usesGlyphs && !documentData.sz) {
        var tElement = this.textContainer;
        var justify = 'start';
        switch(documentData.j) {
            case 1:
                justify = 'end';
                break;
            case 2:
                justify = 'middle';
                break;
        }
        tElement.setAttribute('text-anchor',justify);
        tElement.setAttribute('letter-spacing',trackingOffset);
        var textContent = this.buildTextContents(documentData.finalText);
        len = textContent.length;
        yPos = documentData.ps ? documentData.ps[1] + documentData.ascent : 0;
        for ( i = 0; i < len; i += 1) {
            tSpan = this.textSpans[i] || createNS('tspan');
            tSpan.textContent = textContent[i];
            tSpan.setAttribute('x', 0);
            tSpan.setAttribute('y', yPos);
            tSpan.style.display = 'inherit';
            tElement.appendChild(tSpan);
            this.textSpans[i] = tSpan;
            yPos += documentData.finalLineHeight;
        }
        
        this.layerElement.appendChild(tElement);
    } else {
        var cachedSpansLength = this.textSpans.length;
        var shapeData, charData;
        for (i = 0; i < len; i += 1) {
            if(!usesGlyphs || !singleShape || i === 0){
                tSpan = cachedSpansLength > i ? this.textSpans[i] : createNS(usesGlyphs?'path':'text');
                if (cachedSpansLength <= i) {
                    tSpan.setAttribute('stroke-linecap', 'butt');
                    tSpan.setAttribute('stroke-linejoin','round');
                    tSpan.setAttribute('stroke-miterlimit','4');
                    this.textSpans[i] = tSpan;
                    this.layerElement.appendChild(tSpan);
                }
                tSpan.style.display = 'inherit';
            }
            
            matrixHelper.reset();
            matrixHelper.scale(documentData.finalSize / 100, documentData.finalSize / 100);
            if (singleShape) {
                if(letters[i].n) {
                    xPos = -trackingOffset;
                    yPos += documentData.yOffset;
                    yPos += firstLine ? 1 : 0;
                    firstLine = false;
                }
                this.applyTextPropertiesToMatrix(documentData, matrixHelper, letters[i].line, xPos, yPos);
                xPos += letters[i].l || 0;
                //xPos += letters[i].val === ' ' ? 0 : trackingOffset;
                xPos += trackingOffset;
            }
            if(usesGlyphs) {
                charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
                shapeData = charData && charData.data || {};
                shapes = shapeData.shapes ? shapeData.shapes[0].it : [];
                if(!singleShape){
                    tSpan.setAttribute('d',this.createPathShape(matrixHelper,shapes));
                } else {
                    shapeStr += this.createPathShape(matrixHelper,shapes);
                }
            } else {
                if(singleShape) {
                    tSpan.setAttribute("transform", "translate(" + matrixHelper.props[12] + "," + matrixHelper.props[13] + ")");
                }
                tSpan.textContent = letters[i].val;
                tSpan.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space","preserve");
            }
            //
        }
        if (singleShape && tSpan) {
            tSpan.setAttribute('d',shapeStr);
        }
    }
    while (i < this.textSpans.length){
        this.textSpans[i].style.display = 'none';
        i += 1;
    }
    
    this._sizeChanged = true;
};

SVGTextElement.prototype.sourceRectAtTime = function(time){
    this.prepareFrame(this.comp.renderedFrame - this.data.st);
    this.renderInnerContent();
    if(this._sizeChanged){
        this._sizeChanged = false;
        var textBox = this.layerElement.getBBox();
        this.bbox = {
            top: textBox.y,
            left: textBox.x,
            width: textBox.width,
            height: textBox.height
        };
    }
    return this.bbox;
};

SVGTextElement.prototype.renderInnerContent = function(){

    if(!this.data.singleShape){
        this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
        if(this.lettersChangedFlag || this.textAnimator.lettersChangedFlag){
            this._sizeChanged = true;
            var  i,len;
            var renderedLetters = this.textAnimator.renderedLetters;

            var letters = this.textProperty.currentData.l;

            len = letters.length;
            var renderedLetter, textSpan;
            for(i=0;i<len;i+=1){
                if(letters[i].n){
                    continue;
                }
                renderedLetter = renderedLetters[i];
                textSpan = this.textSpans[i];
                if(renderedLetter._mdf.m) {
                    textSpan.setAttribute('transform',renderedLetter.m);
                }
                if(renderedLetter._mdf.o) {
                    textSpan.setAttribute('opacity',renderedLetter.o);
                }
                if(renderedLetter._mdf.sw){
                    textSpan.setAttribute('stroke-width',renderedLetter.sw);
                }
                if(renderedLetter._mdf.sc){
                    textSpan.setAttribute('stroke',renderedLetter.sc);
                }
                if(renderedLetter._mdf.fc){
                    textSpan.setAttribute('fill',renderedLetter.fc);
                }
            }
        }
    }
};
function SVGShapeElement(data,globalData,comp){
    //List of drawable elements
    this.shapes = [];
    // Full shape data
    this.shapesData = data.shapes;
    //List of styles that will be applied to shapes
    this.stylesList = [];
    //List of modifiers that will be applied to shapes
    this.shapeModifiers = [];
    //List of items in shape tree
    this.itemsData = [];
    //List of items in previous shape tree
    this.processedElements = [];
    // List of animated components
    this.animatedContents = [];
    this.initElement(data,globalData,comp);
    //Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.
    // List of elements that have been created
    this.prevViewData = [];
    //Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.
}

extendPrototype([BaseElement,TransformElement,SVGBaseElement,IShapeElement,HierarchyElement,FrameElement,RenderableDOMElement], SVGShapeElement);

SVGShapeElement.prototype.initSecondaryElement = function() {
};

SVGShapeElement.prototype.identityMatrix = new Matrix();

SVGShapeElement.prototype.buildExpressionInterface = function(){};

SVGShapeElement.prototype.createContent = function(){
    this.searchShapes(this.shapesData,this.itemsData,this.prevViewData,this.layerElement, 0, [], true);
    this.filterUniqueShapes();
};

/*
This method searches for multiple shapes that affect a single element and one of them is animated
*/
SVGShapeElement.prototype.filterUniqueShapes = function(){
    var i, len = this.shapes.length, shape;
    var j, jLen = this.stylesList.length;
    var style;
    var tempShapes = [];
    var areAnimated = false;
    for(j = 0; j < jLen; j += 1) {
        style = this.stylesList[j];
        areAnimated = false;
        tempShapes.length = 0;
        for(i = 0; i < len; i += 1) {
            shape = this.shapes[i];
            if(shape.styles.indexOf(style) !== -1) {
                tempShapes.push(shape);
                areAnimated = shape._isAnimated || areAnimated;
            }
        }
        if(tempShapes.length > 1 && areAnimated) {
            this.setShapesAsAnimated(tempShapes);
        }
    }
};

SVGShapeElement.prototype.setShapesAsAnimated = function(shapes){
    var i, len = shapes.length;
    for(i = 0; i < len; i += 1) {
        shapes[i].setAsAnimated();
    }
};

SVGShapeElement.prototype.createStyleElement = function(data, level){
    //TODO: prevent drawing of hidden styles
    var elementData;
    var styleOb = new SVGStyleData(data, level);

    var pathElement = styleOb.pElem;
    if(data.ty === 'st') {
        elementData = new SVGStrokeStyleData(this, data, styleOb);
    } else if(data.ty === 'fl') {
        elementData = new SVGFillStyleData(this, data, styleOb);
    } else if(data.ty === 'gf' || data.ty === 'gs') {
        var gradientConstructor = data.ty === 'gf' ? SVGGradientFillStyleData : SVGGradientStrokeStyleData;
        elementData = new gradientConstructor(this, data, styleOb);
        this.globalData.defs.appendChild(elementData.gf);
        if (elementData.maskId) {
            this.globalData.defs.appendChild(elementData.ms);
            this.globalData.defs.appendChild(elementData.of);
            pathElement.setAttribute('mask','url(' + locationHref + '#' + elementData.maskId + ')');
        }
    }
    
    if(data.ty === 'st' || data.ty === 'gs') {
        pathElement.setAttribute('stroke-linecap', this.lcEnum[data.lc] || 'round');
        pathElement.setAttribute('stroke-linejoin',this.ljEnum[data.lj] || 'round');
        pathElement.setAttribute('fill-opacity','0');
        if(data.lj === 1) {
            pathElement.setAttribute('stroke-miterlimit',data.ml);
        }
    }

    if(data.r === 2) {
        pathElement.setAttribute('fill-rule', 'evenodd');
    }

    if(data.ln){
        pathElement.setAttribute('id',data.ln);
    }
    if(data.cl){
        pathElement.setAttribute('class',data.cl);
    }
    if(data.bm){
        pathElement.style['mix-blend-mode'] = getBlendMode(data.bm);
    }
    this.stylesList.push(styleOb);
    this.addToAnimatedContents(data, elementData);
    return elementData;
};

SVGShapeElement.prototype.createGroupElement = function(data) {
    var elementData = new ShapeGroupData();
    if(data.ln){
        elementData.gr.setAttribute('id',data.ln);
    }
    if(data.cl){
        elementData.gr.setAttribute('class',data.cl);
    }
    if(data.bm){
        elementData.gr.style['mix-blend-mode'] = getBlendMode(data.bm);
    }
    return elementData;
};

SVGShapeElement.prototype.createTransformElement = function(data, container) {
    var transformProperty = TransformPropertyFactory.getTransformProperty(this,data,this);
    var elementData = new SVGTransformData(transformProperty, transformProperty.o, container);
    this.addToAnimatedContents(data, elementData);
    return elementData;
};

SVGShapeElement.prototype.createShapeElement = function(data, ownTransformers, level) {
    var ty = 4;
    if(data.ty === 'rc'){
        ty = 5;
    }else if(data.ty === 'el'){
        ty = 6;
    }else if(data.ty === 'sr'){
        ty = 7;
    }
    var shapeProperty = ShapePropertyFactory.getShapeProp(this,data,ty,this);
    var elementData = new SVGShapeData(ownTransformers, level, shapeProperty);
    this.shapes.push(elementData);
    this.addShapeToModifiers(elementData);
    this.addToAnimatedContents(data, elementData);
    return elementData;
};

SVGShapeElement.prototype.addToAnimatedContents = function(data, element) {
    var i = 0, len = this.animatedContents.length;
    while(i < len) {
        if(this.animatedContents[i].element === element) {
            return;
        }
        i += 1;
    }
    this.animatedContents.push({
        fn: SVGElementsRenderer.createRenderFunction(data),
        element: element,
        data: data
    });
};

SVGShapeElement.prototype.setElementStyles = function(elementData){
    var arr = elementData.styles;
    var j, jLen = this.stylesList.length;
    for (j = 0; j < jLen; j += 1) {
        if (!this.stylesList[j].closed) {
            arr.push(this.stylesList[j]);
        }
    }
};

SVGShapeElement.prototype.reloadShapes = function(){
    this._isFirstFrame = true;
    var i, len = this.itemsData.length;
    for( i = 0; i < len; i += 1) {
        this.prevViewData[i] = this.itemsData[i];
    }
    this.searchShapes(this.shapesData,this.itemsData,this.prevViewData,this.layerElement, 0, [], true);
    this.filterUniqueShapes();
    len = this.dynamicProperties.length;
    for(i = 0; i < len; i += 1) {
        this.dynamicProperties[i].getValue();
    }
    this.renderModifiers();
};

SVGShapeElement.prototype.searchShapes = function(arr,itemsData,prevViewData,container, level, transformers, render){
    var ownTransformers = [].concat(transformers);
    var i, len = arr.length - 1;
    var j, jLen;
    var ownStyles = [], ownModifiers = [], currentTransform, modifier, processedPos;
    for(i=len;i>=0;i-=1){
        processedPos = this.searchProcessedElement(arr[i]);
        if(!processedPos){
            arr[i]._render = render;
        } else {
            itemsData[i] = prevViewData[processedPos - 1];
        }
        if(arr[i].ty == 'fl' || arr[i].ty == 'st' || arr[i].ty == 'gf' || arr[i].ty == 'gs'){
            if(!processedPos){
                itemsData[i] = this.createStyleElement(arr[i], level);
            } else {
                itemsData[i].style.closed = false;
            }
            if(arr[i]._render){
                container.appendChild(itemsData[i].style.pElem);
            }
            ownStyles.push(itemsData[i].style);
        }else if(arr[i].ty == 'gr'){
            if(!processedPos){
                itemsData[i] = this.createGroupElement(arr[i]);
            } else {
                jLen = itemsData[i].it.length;
                for(j=0;j<jLen;j+=1){
                    itemsData[i].prevViewData[j] = itemsData[i].it[j];
                }
            }
            this.searchShapes(arr[i].it,itemsData[i].it,itemsData[i].prevViewData,itemsData[i].gr, level + 1, ownTransformers, render);
            if(arr[i]._render){
                container.appendChild(itemsData[i].gr);
            }
        }else if(arr[i].ty == 'tr'){
            if(!processedPos){
                itemsData[i] = this.createTransformElement(arr[i], container);
            }
            currentTransform = itemsData[i].transform;
            ownTransformers.push(currentTransform);
        }else if(arr[i].ty == 'sh' || arr[i].ty == 'rc' || arr[i].ty == 'el' || arr[i].ty == 'sr'){
            if(!processedPos){
                itemsData[i] = this.createShapeElement(arr[i], ownTransformers, level);
            }
            this.setElementStyles(itemsData[i]);

        }else if(arr[i].ty == 'tm' || arr[i].ty == 'rd' || arr[i].ty == 'ms'){
            if(!processedPos){
                modifier = ShapeModifiers.getModifier(arr[i].ty);
                modifier.init(this,arr[i]);
                itemsData[i] = modifier;
                this.shapeModifiers.push(modifier);
            } else {
                modifier = itemsData[i];
                modifier.closed = false;
            }
            ownModifiers.push(modifier);
        }else if(arr[i].ty == 'rp'){
            if(!processedPos){
                modifier = ShapeModifiers.getModifier(arr[i].ty);
                itemsData[i] = modifier;
                modifier.init(this,arr,i,itemsData);
                this.shapeModifiers.push(modifier);
                render = false;
            }else{
                modifier = itemsData[i];
                modifier.closed = true;
            }
            ownModifiers.push(modifier);
        }
        this.addProcessedElement(arr[i], i + 1);
    }
    len = ownStyles.length;
    for(i=0;i<len;i+=1){
        ownStyles[i].closed = true;
    }
    len = ownModifiers.length;
    for(i=0;i<len;i+=1){
        ownModifiers[i].closed = true;
    }
};

SVGShapeElement.prototype.renderInnerContent = function() {
    this.renderModifiers();
    var i, len = this.stylesList.length;
    for(i=0;i<len;i+=1){
        this.stylesList[i].reset();
    }
    this.renderShape();

    for (i = 0; i < len; i += 1) {
        if (this.stylesList[i]._mdf || this._isFirstFrame) {
            if(this.stylesList[i].msElem){
                this.stylesList[i].msElem.setAttribute('d', this.stylesList[i].d);
                //Adding M0 0 fixes same mask bug on all browsers
                this.stylesList[i].d = 'M0 0' + this.stylesList[i].d;
            }
            this.stylesList[i].pElem.setAttribute('d', this.stylesList[i].d || 'M0 0');
        }
    }
};

SVGShapeElement.prototype.renderShape = function() {
    var i, len = this.animatedContents.length;
    var animatedContent;
    for(i = 0; i < len; i += 1) {
        animatedContent = this.animatedContents[i];
        if((this._isFirstFrame || animatedContent.element._isAnimated) && animatedContent.data !== true) {
            animatedContent.fn(animatedContent.data, animatedContent.element, this._isFirstFrame);
        }
    }
};

SVGShapeElement.prototype.destroy = function(){
    this.destroyBaseElement();
    this.shapesData = null;
    this.itemsData = null;
};

function SVGTintFilter(filter, filterManager){
    this.filterManager = filterManager;
    var feColorMatrix = createNS('feColorMatrix');
    feColorMatrix.setAttribute('type','matrix');
    feColorMatrix.setAttribute('color-interpolation-filters','linearRGB');
    feColorMatrix.setAttribute('values','0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0');
    feColorMatrix.setAttribute('result','f1');
    filter.appendChild(feColorMatrix);
    feColorMatrix = createNS('feColorMatrix');
    feColorMatrix.setAttribute('type','matrix');
    feColorMatrix.setAttribute('color-interpolation-filters','sRGB');
    feColorMatrix.setAttribute('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0');
    feColorMatrix.setAttribute('result','f2');
    filter.appendChild(feColorMatrix);
    this.matrixFilter = feColorMatrix;
    if(filterManager.effectElements[2].p.v !== 100 || filterManager.effectElements[2].p.k){
        var feMerge = createNS('feMerge');
        filter.appendChild(feMerge);
        var feMergeNode;
        feMergeNode = createNS('feMergeNode');
        feMergeNode.setAttribute('in','SourceGraphic');
        feMerge.appendChild(feMergeNode);
        feMergeNode = createNS('feMergeNode');
        feMergeNode.setAttribute('in','f2');
        feMerge.appendChild(feMergeNode);
    }
}

SVGTintFilter.prototype.renderFrame = function(forceRender){
    if(forceRender || this.filterManager._mdf){
        var colorBlack = this.filterManager.effectElements[0].p.v;
        var colorWhite = this.filterManager.effectElements[1].p.v;
        var opacity = this.filterManager.effectElements[2].p.v/100;
        this.matrixFilter.setAttribute('values',(colorWhite[0]- colorBlack[0])+' 0 0 0 '+ colorBlack[0] +' '+ (colorWhite[1]- colorBlack[1]) +' 0 0 0 '+ colorBlack[1] +' '+ (colorWhite[2]- colorBlack[2]) +' 0 0 0 '+ colorBlack[2] +' 0 0 0 ' + opacity + ' 0');
    }
};
function SVGFillFilter(filter, filterManager){
    this.filterManager = filterManager;
    var feColorMatrix = createNS('feColorMatrix');
    feColorMatrix.setAttribute('type','matrix');
    feColorMatrix.setAttribute('color-interpolation-filters','sRGB');
    feColorMatrix.setAttribute('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0');
    filter.appendChild(feColorMatrix);
    this.matrixFilter = feColorMatrix;
}
SVGFillFilter.prototype.renderFrame = function(forceRender){
    if(forceRender || this.filterManager._mdf){
        var color = this.filterManager.effectElements[2].p.v;
        var opacity = this.filterManager.effectElements[6].p.v;
        this.matrixFilter.setAttribute('values','0 0 0 0 '+color[0]+' 0 0 0 0 '+color[1]+' 0 0 0 0 '+color[2]+' 0 0 0 '+opacity+' 0');
    }
};
function SVGStrokeEffect(elem, filterManager){
    this.initialized = false;
    this.filterManager = filterManager;
    this.elem = elem;
    this.paths = [];
}

SVGStrokeEffect.prototype.initialize = function(){

    var elemChildren = this.elem.layerElement.children || this.elem.layerElement.childNodes;
    var path,groupPath, i, len;
    if(this.filterManager.effectElements[1].p.v === 1){
        len = this.elem.maskManager.masksProperties.length;
        i = 0;
    } else {
        i = this.filterManager.effectElements[0].p.v - 1;
        len = i + 1;
    }
    groupPath = createNS('g'); 
    groupPath.setAttribute('fill','none');
    groupPath.setAttribute('stroke-linecap','round');
    groupPath.setAttribute('stroke-dashoffset',1);
    for(i;i<len;i+=1){
        path = createNS('path');
        groupPath.appendChild(path);
        this.paths.push({p:path,m:i});
    }
    if(this.filterManager.effectElements[10].p.v === 3){
        var mask = createNS('mask');
        var id = createElementID();
        mask.setAttribute('id',id);
        mask.setAttribute('mask-type','alpha');
        mask.appendChild(groupPath);
        this.elem.globalData.defs.appendChild(mask);
        var g = createNS('g');
        g.setAttribute('mask','url(' + locationHref + '#'+id+')');
        while (elemChildren[0]) {
            g.appendChild(elemChildren[0]);
        }
        this.elem.layerElement.appendChild(g);
        this.masker = mask;
        groupPath.setAttribute('stroke','#fff');
    } else if(this.filterManager.effectElements[10].p.v === 1 || this.filterManager.effectElements[10].p.v === 2){
        if(this.filterManager.effectElements[10].p.v === 2){
            elemChildren = this.elem.layerElement.children || this.elem.layerElement.childNodes;
            while(elemChildren.length){
                this.elem.layerElement.removeChild(elemChildren[0]);
            }
        }
        this.elem.layerElement.appendChild(groupPath);
        this.elem.layerElement.removeAttribute('mask');
        groupPath.setAttribute('stroke','#fff');
    }
    this.initialized = true;
    this.pathMasker = groupPath;
};

SVGStrokeEffect.prototype.renderFrame = function(forceRender){
    if(!this.initialized){
        this.initialize();
    }
    var i, len = this.paths.length;
    var mask, path;
    for(i=0;i<len;i+=1){
        if(this.paths[i].m === -1) {
            continue;
        }
        mask = this.elem.maskManager.viewData[this.paths[i].m];
        path = this.paths[i].p;
        if(forceRender || this.filterManager._mdf || mask.prop._mdf){
            path.setAttribute('d',mask.lastPath);
        }
        if(forceRender || this.filterManager.effectElements[9].p._mdf || this.filterManager.effectElements[4].p._mdf || this.filterManager.effectElements[7].p._mdf || this.filterManager.effectElements[8].p._mdf || mask.prop._mdf){
            var dasharrayValue;
            if(this.filterManager.effectElements[7].p.v !== 0 || this.filterManager.effectElements[8].p.v !== 100){
                var s = Math.min(this.filterManager.effectElements[7].p.v,this.filterManager.effectElements[8].p.v)/100;
                var e = Math.max(this.filterManager.effectElements[7].p.v,this.filterManager.effectElements[8].p.v)/100;
                var l = path.getTotalLength();
                dasharrayValue = '0 0 0 ' + l*s + ' ';
                var lineLength = l*(e-s);
                var segment = 1+this.filterManager.effectElements[4].p.v*2*this.filterManager.effectElements[9].p.v/100;
                var units = Math.floor(lineLength/segment);
                var j;
                for(j=0;j<units;j+=1){
                    dasharrayValue += '1 ' + this.filterManager.effectElements[4].p.v*2*this.filterManager.effectElements[9].p.v/100 + ' ';
                }
                dasharrayValue += '0 ' + l*10 + ' 0 0';
            } else {
                dasharrayValue = '1 ' + this.filterManager.effectElements[4].p.v*2*this.filterManager.effectElements[9].p.v/100;
            }
            path.setAttribute('stroke-dasharray',dasharrayValue);
        }
    }
    if(forceRender || this.filterManager.effectElements[4].p._mdf){
        this.pathMasker.setAttribute('stroke-width',this.filterManager.effectElements[4].p.v*2);
    }
    
    if(forceRender || this.filterManager.effectElements[6].p._mdf){
        this.pathMasker.setAttribute('opacity',this.filterManager.effectElements[6].p.v);
    }
    if(this.filterManager.effectElements[10].p.v === 1 || this.filterManager.effectElements[10].p.v === 2){
        if(forceRender || this.filterManager.effectElements[3].p._mdf){
            var color = this.filterManager.effectElements[3].p.v;
            this.pathMasker.setAttribute('stroke','rgb('+bm_floor(color[0]*255)+','+bm_floor(color[1]*255)+','+bm_floor(color[2]*255)+')');
        }
    }
};
function SVGTritoneFilter(filter, filterManager){
    this.filterManager = filterManager;
    var feColorMatrix = createNS('feColorMatrix');
    feColorMatrix.setAttribute('type','matrix');
    feColorMatrix.setAttribute('color-interpolation-filters','linearRGB');
    feColorMatrix.setAttribute('values','0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0');
    feColorMatrix.setAttribute('result','f1');
    filter.appendChild(feColorMatrix);
    var feComponentTransfer = createNS('feComponentTransfer');
    feComponentTransfer.setAttribute('color-interpolation-filters','sRGB');
    filter.appendChild(feComponentTransfer);
    this.matrixFilter = feComponentTransfer;
    var feFuncR = createNS('feFuncR');
    feFuncR.setAttribute('type','table');
    feComponentTransfer.appendChild(feFuncR);
    this.feFuncR = feFuncR;
    var feFuncG = createNS('feFuncG');
    feFuncG.setAttribute('type','table');
    feComponentTransfer.appendChild(feFuncG);
    this.feFuncG = feFuncG;
    var feFuncB = createNS('feFuncB');
    feFuncB.setAttribute('type','table');
    feComponentTransfer.appendChild(feFuncB);
    this.feFuncB = feFuncB;
}

SVGTritoneFilter.prototype.renderFrame = function(forceRender){
    if(forceRender || this.filterManager._mdf){
        var color1 = this.filterManager.effectElements[0].p.v;
        var color2 = this.filterManager.effectElements[1].p.v;
        var color3 = this.filterManager.effectElements[2].p.v;
        var tableR = color3[0] + ' ' + color2[0] + ' ' + color1[0];
        var tableG = color3[1] + ' ' + color2[1] + ' ' + color1[1];
        var tableB = color3[2] + ' ' + color2[2] + ' ' + color1[2];
        this.feFuncR.setAttribute('tableValues', tableR);
        this.feFuncG.setAttribute('tableValues', tableG);
        this.feFuncB.setAttribute('tableValues', tableB);
        //var opacity = this.filterManager.effectElements[2].p.v/100;
        //this.matrixFilter.setAttribute('values',(colorWhite[0]- colorBlack[0])+' 0 0 0 '+ colorBlack[0] +' '+ (colorWhite[1]- colorBlack[1]) +' 0 0 0 '+ colorBlack[1] +' '+ (colorWhite[2]- colorBlack[2]) +' 0 0 0 '+ colorBlack[2] +' 0 0 0 ' + opacity + ' 0');
    }
};
function SVGProLevelsFilter(filter, filterManager){
    this.filterManager = filterManager;
    var effectElements = this.filterManager.effectElements;
    var feComponentTransfer = createNS('feComponentTransfer');
    
    if(effectElements[10].p.k || effectElements[10].p.v !== 0 || effectElements[11].p.k || effectElements[11].p.v !== 1 || effectElements[12].p.k || effectElements[12].p.v !== 1 || effectElements[13].p.k || effectElements[13].p.v !== 0 || effectElements[14].p.k || effectElements[14].p.v !== 1){
        this.feFuncR = this.createFeFunc('feFuncR', feComponentTransfer);
    }
    if(effectElements[17].p.k || effectElements[17].p.v !== 0 || effectElements[18].p.k || effectElements[18].p.v !== 1 || effectElements[19].p.k || effectElements[19].p.v !== 1 || effectElements[20].p.k || effectElements[20].p.v !== 0 || effectElements[21].p.k || effectElements[21].p.v !== 1){
        this.feFuncG = this.createFeFunc('feFuncG', feComponentTransfer);
    }
    if(effectElements[24].p.k || effectElements[24].p.v !== 0 || effectElements[25].p.k || effectElements[25].p.v !== 1 || effectElements[26].p.k || effectElements[26].p.v !== 1 || effectElements[27].p.k || effectElements[27].p.v !== 0 || effectElements[28].p.k || effectElements[28].p.v !== 1){
        this.feFuncB = this.createFeFunc('feFuncB', feComponentTransfer);
    }
    if(effectElements[31].p.k || effectElements[31].p.v !== 0 || effectElements[32].p.k || effectElements[32].p.v !== 1 || effectElements[33].p.k || effectElements[33].p.v !== 1 || effectElements[34].p.k || effectElements[34].p.v !== 0 || effectElements[35].p.k || effectElements[35].p.v !== 1){
        this.feFuncA = this.createFeFunc('feFuncA', feComponentTransfer);
    }
    
    if(this.feFuncR || this.feFuncG || this.feFuncB || this.feFuncA){
        feComponentTransfer.setAttribute('color-interpolation-filters','sRGB');
        filter.appendChild(feComponentTransfer);
        feComponentTransfer = createNS('feComponentTransfer');
    }

    if(effectElements[3].p.k || effectElements[3].p.v !== 0 || effectElements[4].p.k || effectElements[4].p.v !== 1 || effectElements[5].p.k || effectElements[5].p.v !== 1 || effectElements[6].p.k || effectElements[6].p.v !== 0 || effectElements[7].p.k || effectElements[7].p.v !== 1){

        feComponentTransfer.setAttribute('color-interpolation-filters','sRGB');
        filter.appendChild(feComponentTransfer);
        this.feFuncRComposed = this.createFeFunc('feFuncR', feComponentTransfer);
        this.feFuncGComposed = this.createFeFunc('feFuncG', feComponentTransfer);
        this.feFuncBComposed = this.createFeFunc('feFuncB', feComponentTransfer);
    }
}

SVGProLevelsFilter.prototype.createFeFunc = function(type, feComponentTransfer) {
    var feFunc = createNS(type);
    feFunc.setAttribute('type','table');
    feComponentTransfer.appendChild(feFunc);
    return feFunc;
};

SVGProLevelsFilter.prototype.getTableValue = function(inputBlack, inputWhite, gamma, outputBlack, outputWhite) {
    var cnt = 0;
    var segments = 256;
    var perc;
    var min = Math.min(inputBlack, inputWhite);
    var max = Math.max(inputBlack, inputWhite);
    var table = Array.call(null,{length:segments});
    var colorValue;
    var pos = 0;
    var outputDelta = outputWhite - outputBlack; 
    var inputDelta = inputWhite - inputBlack; 
    while(cnt <= 256) {
        perc = cnt/256;
        if(perc <= min){
            colorValue = inputDelta < 0 ? outputWhite : outputBlack;
        } else if(perc >= max){
            colorValue = inputDelta < 0 ? outputBlack : outputWhite;
        } else {
            colorValue = (outputBlack + outputDelta * Math.pow((perc - inputBlack) / inputDelta, 1 / gamma));
        }
        table[pos++] = colorValue;
        cnt += 256/(segments-1);
    }
    return table.join(' ');
};

SVGProLevelsFilter.prototype.renderFrame = function(forceRender){
    if(forceRender || this.filterManager._mdf){
        var val;
        var effectElements = this.filterManager.effectElements;
        if(this.feFuncRComposed && (forceRender || effectElements[3].p._mdf || effectElements[4].p._mdf || effectElements[5].p._mdf || effectElements[6].p._mdf || effectElements[7].p._mdf)){
            val = this.getTableValue(effectElements[3].p.v,effectElements[4].p.v,effectElements[5].p.v,effectElements[6].p.v,effectElements[7].p.v);
            this.feFuncRComposed.setAttribute('tableValues',val);
            this.feFuncGComposed.setAttribute('tableValues',val);
            this.feFuncBComposed.setAttribute('tableValues',val);
        }


        if(this.feFuncR && (forceRender || effectElements[10].p._mdf || effectElements[11].p._mdf || effectElements[12].p._mdf || effectElements[13].p._mdf || effectElements[14].p._mdf)){
            val = this.getTableValue(effectElements[10].p.v,effectElements[11].p.v,effectElements[12].p.v,effectElements[13].p.v,effectElements[14].p.v);
            this.feFuncR.setAttribute('tableValues',val);
        }

        if(this.feFuncG && (forceRender || effectElements[17].p._mdf || effectElements[18].p._mdf || effectElements[19].p._mdf || effectElements[20].p._mdf || effectElements[21].p._mdf)){
            val = this.getTableValue(effectElements[17].p.v,effectElements[18].p.v,effectElements[19].p.v,effectElements[20].p.v,effectElements[21].p.v);
            this.feFuncG.setAttribute('tableValues',val);
        }

        if(this.feFuncB && (forceRender || effectElements[24].p._mdf || effectElements[25].p._mdf || effectElements[26].p._mdf || effectElements[27].p._mdf || effectElements[28].p._mdf)){
            val = this.getTableValue(effectElements[24].p.v,effectElements[25].p.v,effectElements[26].p.v,effectElements[27].p.v,effectElements[28].p.v);
            this.feFuncB.setAttribute('tableValues',val);
        }

        if(this.feFuncA && (forceRender || effectElements[31].p._mdf || effectElements[32].p._mdf || effectElements[33].p._mdf || effectElements[34].p._mdf || effectElements[35].p._mdf)){
            val = this.getTableValue(effectElements[31].p.v,effectElements[32].p.v,effectElements[33].p.v,effectElements[34].p.v,effectElements[35].p.v);
            this.feFuncA.setAttribute('tableValues',val);
        }
        
    }
};
function SVGDropShadowEffect(filter, filterManager){
    filter.setAttribute('x','-100%');
    filter.setAttribute('y','-100%');
    filter.setAttribute('width','400%');
    filter.setAttribute('height','400%');
    this.filterManager = filterManager;

    var feGaussianBlur = createNS('feGaussianBlur');
    feGaussianBlur.setAttribute('in','SourceAlpha');
    feGaussianBlur.setAttribute('result','drop_shadow_1');
    feGaussianBlur.setAttribute('stdDeviation','0');
    this.feGaussianBlur = feGaussianBlur;
    filter.appendChild(feGaussianBlur);

    var feOffset = createNS('feOffset');
    feOffset.setAttribute('dx','25');
    feOffset.setAttribute('dy','0');
    feOffset.setAttribute('in','drop_shadow_1');
    feOffset.setAttribute('result','drop_shadow_2');
    this.feOffset = feOffset;
    filter.appendChild(feOffset);
    var feFlood = createNS('feFlood');
    feFlood.setAttribute('flood-color','#00ff00');
    feFlood.setAttribute('flood-opacity','1');
    feFlood.setAttribute('result','drop_shadow_3');
    this.feFlood = feFlood;
    filter.appendChild(feFlood);

    var feComposite = createNS('feComposite');
    feComposite.setAttribute('in','drop_shadow_3');
    feComposite.setAttribute('in2','drop_shadow_2');
    feComposite.setAttribute('operator','in');
    feComposite.setAttribute('result','drop_shadow_4');
    filter.appendChild(feComposite);


    var feMerge = createNS('feMerge');
    filter.appendChild(feMerge);
    var feMergeNode;
    feMergeNode = createNS('feMergeNode');
    feMerge.appendChild(feMergeNode);
    feMergeNode = createNS('feMergeNode');
    feMergeNode.setAttribute('in','SourceGraphic');
    this.feMergeNode = feMergeNode;
    this.feMerge = feMerge;
    this.originalNodeAdded = false;
    feMerge.appendChild(feMergeNode);
}

SVGDropShadowEffect.prototype.renderFrame = function(forceRender){
    if(forceRender || this.filterManager._mdf){
        if(forceRender || this.filterManager.effectElements[4].p._mdf){
            this.feGaussianBlur.setAttribute('stdDeviation', this.filterManager.effectElements[4].p.v / 4);
        }
        if(forceRender || this.filterManager.effectElements[0].p._mdf){
            var col = this.filterManager.effectElements[0].p.v;
            this.feFlood.setAttribute('flood-color',rgbToHex(Math.round(col[0]*255),Math.round(col[1]*255),Math.round(col[2]*255)));
        }
        if(forceRender || this.filterManager.effectElements[1].p._mdf){
            this.feFlood.setAttribute('flood-opacity',this.filterManager.effectElements[1].p.v/255);
        }
        if(forceRender || this.filterManager.effectElements[2].p._mdf || this.filterManager.effectElements[3].p._mdf){
            var distance = this.filterManager.effectElements[3].p.v;
            var angle = (this.filterManager.effectElements[2].p.v - 90) * degToRads;
            var x = distance * Math.cos(angle);
            var y = distance * Math.sin(angle);
            this.feOffset.setAttribute('dx', x);
            this.feOffset.setAttribute('dy', y);
        }
        /*if(forceRender || this.filterManager.effectElements[5].p._mdf){
            if(this.filterManager.effectElements[5].p.v === 1 && this.originalNodeAdded) {
                this.feMerge.removeChild(this.feMergeNode);
                this.originalNodeAdded = false;
            } else if(this.filterManager.effectElements[5].p.v === 0 && !this.originalNodeAdded) {
                this.feMerge.appendChild(this.feMergeNode);
                this.originalNodeAdded = true;
            }
        }*/
    }
};
var _svgMatteSymbols = [];

function SVGMatte3Effect(filterElem, filterManager, elem){
    this.initialized = false;
    this.filterManager = filterManager;
    this.filterElem = filterElem;
    this.elem = elem;
    elem.matteElement = createNS('g');
    elem.matteElement.appendChild(elem.layerElement);
    elem.matteElement.appendChild(elem.transformedElement);
    elem.baseElement = elem.matteElement;
}

SVGMatte3Effect.prototype.findSymbol = function(mask) {
    var i = 0, len = _svgMatteSymbols.length;
    while(i < len) {
        if(_svgMatteSymbols[i] === mask) {
            return _svgMatteSymbols[i];
        }
        i += 1;
    }
    return null;
};

SVGMatte3Effect.prototype.replaceInParent = function(mask, symbolId) {
    var parentNode = mask.layerElement.parentNode;
    if(!parentNode) {
        return;
    }
    var children = parentNode.children;
    var i = 0, len = children.length;
    while (i < len) {
        if (children[i] === mask.layerElement) {
            break;
        }
        i += 1;
    }
    var nextChild;
    if (i <= len - 2) {
        nextChild = children[i + 1];
    }
    var useElem = createNS('use');
    useElem.setAttribute('href', '#' + symbolId);
    if(nextChild) {
        parentNode.insertBefore(useElem, nextChild);
    } else {
        parentNode.appendChild(useElem);
    }
};

SVGMatte3Effect.prototype.setElementAsMask = function(elem, mask) {
    if(!this.findSymbol(mask)) {
        var symbolId = createElementID();
        var masker = createNS('mask');
        masker.setAttribute('id', mask.layerId);
        masker.setAttribute('mask-type', 'alpha');
        _svgMatteSymbols.push(mask);
        var defs = elem.globalData.defs;
        defs.appendChild(masker);
        var symbol = createNS('symbol');
        symbol.setAttribute('id', symbolId);
        this.replaceInParent(mask, symbolId);
        symbol.appendChild(mask.layerElement);
        defs.appendChild(symbol);
        var useElem = createNS('use');
        useElem.setAttribute('href', '#' + symbolId);
        masker.appendChild(useElem);
        mask.data.hd = false;
        mask.show();
    }
    elem.setMatte(mask.layerId);
};

SVGMatte3Effect.prototype.initialize = function() {
    var ind = this.filterManager.effectElements[0].p.v;
    var elements = this.elem.comp.elements;
    var i = 0, len = elements.length;
    while (i < len) {
    	if (elements[i] && elements[i].data.ind === ind) {
    		this.setElementAsMask(this.elem, elements[i]);
    	}
    	i += 1;
    }
    this.initialized = true;
};

SVGMatte3Effect.prototype.renderFrame = function() {
	if(!this.initialized) {
		this.initialize();
	}
};
function SVGEffects(elem){
    var i, len = elem.data.ef ? elem.data.ef.length : 0;
    var filId = createElementID();
    var fil = filtersFactory.createFilter(filId);
    var count = 0;
    this.filters = [];
    var filterManager;
    for(i=0;i<len;i+=1){
        filterManager = null;
        if(elem.data.ef[i].ty === 20){
            count += 1;
            filterManager = new SVGTintFilter(fil, elem.effectsManager.effectElements[i]);
        }else if(elem.data.ef[i].ty === 21){
            count += 1;
            filterManager = new SVGFillFilter(fil, elem.effectsManager.effectElements[i]);
        }else if(elem.data.ef[i].ty === 22){
            filterManager = new SVGStrokeEffect(elem, elem.effectsManager.effectElements[i]);
        }else if(elem.data.ef[i].ty === 23){
            count += 1;
            filterManager = new SVGTritoneFilter(fil, elem.effectsManager.effectElements[i]);
        }else if(elem.data.ef[i].ty === 24){
            count += 1;
            filterManager = new SVGProLevelsFilter(fil, elem.effectsManager.effectElements[i]);
        }else if(elem.data.ef[i].ty === 25){
            count += 1;
            filterManager = new SVGDropShadowEffect(fil, elem.effectsManager.effectElements[i]);
        }else if(elem.data.ef[i].ty === 28){
            //count += 1;
            filterManager = new SVGMatte3Effect(fil, elem.effectsManager.effectElements[i], elem);
        }
        if(filterManager) {
            this.filters.push(filterManager);
        }
    }
    if(count){
        elem.globalData.defs.appendChild(fil);
        elem.layerElement.setAttribute('filter','url(' + locationHref + '#'+filId+')');
    }
    if (this.filters.length) {
        elem.addRenderableComponent(this);
    }
}

SVGEffects.prototype.renderFrame = function(_isFirstFrame){
    var i, len = this.filters.length;
    for(i=0;i<len;i+=1){
        this.filters[i].renderFrame(_isFirstFrame);
    }
};
function CVContextData() {
	this.saved = [];
    this.cArrPos = 0;
    this.cTr = new Matrix();
    this.cO = 1;
    var i, len = 15;
    this.savedOp = createTypedArray('float32', len);
    for(i=0;i<len;i+=1){
        this.saved[i] = createTypedArray('float32', 16);
    }
    this._length = len;
}

CVContextData.prototype.duplicate = function() {
	var newLength = this._length * 2;
	var currentSavedOp = this.savedOp;
    this.savedOp = createTypedArray('float32', newLength);
    this.savedOp.set(currentSavedOp);
    var i = 0;
    for(i = this._length; i < newLength; i += 1) {
        this.saved[i] = createTypedArray('float32', 16);
    }
    this._length = newLength;
};

CVContextData.prototype.reset = function() {
	this.cArrPos = 0;
	this.cTr.reset();
    this.cO = 1;
};
function CVBaseElement(){
}

CVBaseElement.prototype = {
    createElements: function(){},
    initRendererElement: function(){},
    createContainerElements: function(){
        this.canvasContext = this.globalData.canvasContext;
        this.renderableEffectsManager = new CVEffects(this);
    },
    createContent: function(){},
    setBlendMode: function(){
        var globalData = this.globalData;
        if(globalData.blendMode !== this.data.bm) {
            globalData.blendMode = this.data.bm;
            var blendModeValue = getBlendMode(this.data.bm);
            globalData.canvasContext.globalCompositeOperation = blendModeValue;
        }
    },
    createRenderableComponents: function(){
        this.maskManager = new CVMaskElement(this.data, this);
    },
    hideElement: function(){
        if (!this.hidden && (!this.isInRange || this.isTransparent)) {
            this.hidden = true;
        }
    },
    showElement: function(){
        if (this.isInRange && !this.isTransparent){
            this.hidden = false;
            this._isFirstFrame = true;
            this.maskManager._isFirstFrame = true;
        }
    },
    renderFrame: function() {
        if (this.hidden || this.data.hd) {
            return;
        }
        this.renderTransform();
        this.renderRenderable();
        this.setBlendMode();
        this.globalData.renderer.save();
        this.globalData.renderer.ctxTransform(this.finalTransform.mat.props);
        this.globalData.renderer.ctxOpacity(this.finalTransform.mProp.o.v);
        this.renderInnerContent();
        this.globalData.renderer.restore();
        if(this.maskManager.hasMasks) {
            this.globalData.renderer.restore(true);
        }
        if (this._isFirstFrame) {
            this._isFirstFrame = false;
        }
    },
    destroy: function(){
        this.canvasContext = null;
        this.data = null;
        this.globalData = null;
        this.maskManager.destroy();
    },
    mHelper: new Matrix()
};
CVBaseElement.prototype.hide = CVBaseElement.prototype.hideElement;
CVBaseElement.prototype.show = CVBaseElement.prototype.showElement;

function CVImageElement(data, globalData, comp){
    this.failed = false;
    this.assetData = globalData.getAssetData(data.refId);
    this.img = globalData.imageLoader.getImage(this.assetData);
    this.initElement(data,globalData,comp);
}
extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement], CVImageElement);

CVImageElement.prototype.initElement = SVGShapeElement.prototype.initElement;
CVImageElement.prototype.prepareFrame = IImageElement.prototype.prepareFrame;

CVImageElement.prototype.createContent = function(){

    if (this.img.width && (this.assetData.w !== this.img.width || this.assetData.h !== this.img.height)) {
        var canvas = createTag('canvas');
        canvas.width = this.assetData.w;
        canvas.height = this.assetData.h;
        var ctx = canvas.getContext('2d');

        var imgW = this.img.width;
        var imgH = this.img.height;
        var imgRel = imgW / imgH;
        var canvasRel = this.assetData.w/this.assetData.h;
        var widthCrop, heightCrop;
        var par = this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio;
        if((imgRel > canvasRel && par === 'xMidYMid slice') || (imgRel < canvasRel && par !== 'xMidYMid slice')) {
            heightCrop = imgH;
            widthCrop = heightCrop*canvasRel;
        } else {
            widthCrop = imgW;
            heightCrop = widthCrop/canvasRel;
        }
        ctx.drawImage(this.img,(imgW-widthCrop)/2,(imgH-heightCrop)/2,widthCrop,heightCrop,0,0,this.assetData.w,this.assetData.h);
        this.img = canvas;
    }

};

CVImageElement.prototype.renderInnerContent = function(parentMatrix){
    if (this.failed) {
        return;
    }
    this.canvasContext.drawImage(this.img, 0, 0);
};

CVImageElement.prototype.destroy = function(){
    this.img = null;
};
function CVCompElement(data, globalData, comp) {
    this.completeLayers = false;
    this.layers = data.layers;
    this.pendingElements = [];
    this.elements = createSizedArray(this.layers.length);
    this.initElement(data, globalData, comp);
    this.tm = data.tm ? PropertyFactory.getProp(this,data.tm,0,globalData.frameRate, this) : {_placeholder:true};
}

extendPrototype([CanvasRenderer, ICompElement, CVBaseElement], CVCompElement);

CVCompElement.prototype.renderInnerContent = function() {
    var i,len = this.layers.length;
    for( i = len - 1; i >= 0; i -= 1 ){
        if(this.completeLayers || this.elements[i]){
            this.elements[i].renderFrame();
        }
    }
};

CVCompElement.prototype.destroy = function(){
    var i,len = this.layers.length;
    for( i = len - 1; i >= 0; i -= 1 ){
        if(this.elements[i]) {
            this.elements[i].destroy();
        }
    }
    this.layers = null;
    this.elements = null;
};

function CVMaskElement(data,element){
    this.data = data;
    this.element = element;
    this.masksProperties = this.data.masksProperties || [];
    this.viewData = createSizedArray(this.masksProperties.length);
    var i, len = this.masksProperties.length, hasMasks = false;
    for (i = 0; i < len; i++) {
        if(this.masksProperties[i].mode !== 'n'){
            hasMasks = true;
        }
        this.viewData[i] = ShapePropertyFactory.getShapeProp(this.element,this.masksProperties[i],3);
    }
    this.hasMasks = hasMasks;
    if(hasMasks) {
        this.element.addRenderableComponent(this);
    }
}

CVMaskElement.prototype.renderFrame = function () {
    if(!this.hasMasks){
        return;
    }
    var transform = this.element.finalTransform.mat;
    var ctx = this.element.canvasContext;
    var i, len = this.masksProperties.length;
    var pt,pts,data;
    ctx.beginPath();
    for (i = 0; i < len; i++) {
        if(this.masksProperties[i].mode !== 'n'){
            if (this.masksProperties[i].inv) {
                ctx.moveTo(0, 0);
                ctx.lineTo(this.element.globalData.compSize.w, 0);
                ctx.lineTo(this.element.globalData.compSize.w, this.element.globalData.compSize.h);
                ctx.lineTo(0, this.element.globalData.compSize.h);
                ctx.lineTo(0, 0);
            }
            data = this.viewData[i].v;
            pt = transform.applyToPointArray(data.v[0][0],data.v[0][1],0);
            ctx.moveTo(pt[0], pt[1]);
            var j, jLen = data._length;
            for (j = 1; j < jLen; j++) {
                pts = transform.applyToTriplePoints(data.o[j - 1], data.i[j], data.v[j]);
                ctx.bezierCurveTo(pts[0], pts[1], pts[2], pts[3], pts[4], pts[5]);
            }
            pts = transform.applyToTriplePoints(data.o[j - 1], data.i[0], data.v[0]);
            ctx.bezierCurveTo(pts[0], pts[1], pts[2], pts[3], pts[4], pts[5]);
        }
    }
    this.element.globalData.renderer.save(true);
    ctx.clip();
};

CVMaskElement.prototype.getMaskProperty = MaskElement.prototype.getMaskProperty;

CVMaskElement.prototype.destroy = function(){
    this.element = null;
};
function CVShapeElement(data, globalData, comp) {
    this.shapes = [];
    this.shapesData = data.shapes;
    this.stylesList = [];
    this.itemsData = [];
    this.prevViewData = [];
    this.shapeModifiers = [];
    this.processedElements = [];
    this.transformsManager = new ShapeTransformManager();
    this.initElement(data, globalData, comp);
}

extendPrototype([BaseElement,TransformElement,CVBaseElement,IShapeElement,HierarchyElement,FrameElement,RenderableElement], CVShapeElement);

CVShapeElement.prototype.initElement = RenderableDOMElement.prototype.initElement;

CVShapeElement.prototype.transformHelper = {opacity:1,_opMdf:false};

CVShapeElement.prototype.dashResetter = [];

CVShapeElement.prototype.createContent = function(){
    this.searchShapes(this.shapesData,this.itemsData,this.prevViewData, true, []);
};

CVShapeElement.prototype.createStyleElement = function(data, transforms) {
    var styleElem = {
        data: data,
        type: data.ty,
        preTransforms: this.transformsManager.addTransformSequence(transforms),
        transforms: [],
        elements: [],
        closed: data.hd === true
    };
    var elementData = {};
    if(data.ty == 'fl' || data.ty == 'st'){
        elementData.c = PropertyFactory.getProp(this,data.c,1,255,this);
        if(!elementData.c.k){
            styleElem.co = 'rgb('+bm_floor(elementData.c.v[0])+','+bm_floor(elementData.c.v[1])+','+bm_floor(elementData.c.v[2])+')';
        }
    } else if (data.ty === 'gf' || data.ty === 'gs') {
        elementData.s = PropertyFactory.getProp(this,data.s,1,null,this);
        elementData.e = PropertyFactory.getProp(this,data.e,1,null,this);
        elementData.h = PropertyFactory.getProp(this,data.h||{k:0},0,0.01,this);
        elementData.a = PropertyFactory.getProp(this,data.a||{k:0},0,degToRads,this);
        elementData.g = new GradientProperty(this,data.g,this);
    }
    elementData.o = PropertyFactory.getProp(this,data.o,0,0.01,this);
    if(data.ty == 'st' || data.ty == 'gs') {
        styleElem.lc = this.lcEnum[data.lc] || 'round';
        styleElem.lj = this.ljEnum[data.lj] || 'round';
        if(data.lj == 1) {
            styleElem.ml = data.ml;
        }
        elementData.w = PropertyFactory.getProp(this,data.w,0,null,this);
        if(!elementData.w.k){
            styleElem.wi = elementData.w.v;
        }
        if(data.d){
            var d = new DashProperty(this,data.d,'canvas', this);
            elementData.d = d;
            if(!elementData.d.k){
                styleElem.da = elementData.d.dashArray;
                styleElem.do = elementData.d.dashoffset[0];
            }
        }
    } else {
        styleElem.r = data.r === 2 ? 'evenodd' : 'nonzero';
    }
    this.stylesList.push(styleElem);
    elementData.style = styleElem;
    return elementData;
};

CVShapeElement.prototype.createGroupElement = function(data) {
    var elementData = {
        it: [],
        prevViewData: []
    };
    return elementData;
};

CVShapeElement.prototype.createTransformElement = function(data) {
    var elementData = {
        transform : {
            opacity: 1,
            _opMdf:false,
            key: this.transformsManager.getNewKey(),
            op: PropertyFactory.getProp(this,data.o,0,0.01,this),
            mProps: TransformPropertyFactory.getTransformProperty(this,data,this)
        }
    };
    return elementData;
};

CVShapeElement.prototype.createShapeElement = function(data) {
    var elementData = new CVShapeData(this, data, this.stylesList, this.transformsManager);
    
    this.shapes.push(elementData);
    this.addShapeToModifiers(elementData);
    return elementData;
};

CVShapeElement.prototype.reloadShapes = function() {
    this._isFirstFrame = true;
    var i, len = this.itemsData.length;
    for (i = 0; i < len; i += 1) {
        this.prevViewData[i] = this.itemsData[i];
    }
    this.searchShapes(this.shapesData,this.itemsData,this.prevViewData, true, []);
    len = this.dynamicProperties.length;
    for (i = 0; i < len; i += 1) {
        this.dynamicProperties[i].getValue();
    }
    this.renderModifiers();
    this.transformsManager.processSequences(this._isFirstFrame);
};

CVShapeElement.prototype.addTransformToStyleList = function(transform) {
    var i, len = this.stylesList.length;
    for (i = 0; i < len; i += 1) {
        if(!this.stylesList[i].closed) {
            this.stylesList[i].transforms.push(transform);
        }
    }
};

CVShapeElement.prototype.removeTransformFromStyleList = function() {
    var i, len = this.stylesList.length;
    for (i = 0; i < len; i += 1) {
        if(!this.stylesList[i].closed) {
            this.stylesList[i].transforms.pop();
        }
    }
};

CVShapeElement.prototype.closeStyles = function(styles) {
    var i, len = styles.length;
    for (i = 0; i < len; i += 1) {
        styles[i].closed = true;
    }
};

CVShapeElement.prototype.searchShapes = function(arr,itemsData, prevViewData, shouldRender, transforms){
    var i, len = arr.length - 1;
    var j, jLen;
    var ownStyles = [], ownModifiers = [], processedPos, modifier, currentTransform;
    var ownTransforms = [].concat(transforms);
    for(i=len;i>=0;i-=1){
        processedPos = this.searchProcessedElement(arr[i]);
        if(!processedPos){
            arr[i]._shouldRender = shouldRender;
        } else {
            itemsData[i] = prevViewData[processedPos - 1];
        }
        if(arr[i].ty == 'fl' || arr[i].ty == 'st'|| arr[i].ty == 'gf'|| arr[i].ty == 'gs'){
            if(!processedPos){
                itemsData[i] = this.createStyleElement(arr[i], ownTransforms);
            } else {
                itemsData[i].style.closed = false;
            }
            
            ownStyles.push(itemsData[i].style);
        }else if(arr[i].ty == 'gr'){
            if(!processedPos){
                itemsData[i] = this.createGroupElement(arr[i]);
            } else {
                jLen = itemsData[i].it.length;
                for(j=0;j<jLen;j+=1){
                    itemsData[i].prevViewData[j] = itemsData[i].it[j];
                }
            }
            this.searchShapes(arr[i].it,itemsData[i].it,itemsData[i].prevViewData, shouldRender, ownTransforms);
        }else if(arr[i].ty == 'tr'){
            if(!processedPos){
                currentTransform = this.createTransformElement(arr[i]);
                itemsData[i] = currentTransform;
            }
            ownTransforms.push(itemsData[i]);
            this.addTransformToStyleList(itemsData[i]);
        }else if(arr[i].ty == 'sh' || arr[i].ty == 'rc' || arr[i].ty == 'el' || arr[i].ty == 'sr'){
            if(!processedPos){
                itemsData[i] = this.createShapeElement(arr[i]);
            }
            
        }else if(arr[i].ty == 'tm' || arr[i].ty == 'rd'){
            if(!processedPos){
                modifier = ShapeModifiers.getModifier(arr[i].ty);
                modifier.init(this,arr[i]);
                itemsData[i] = modifier;
                this.shapeModifiers.push(modifier);
            } else {
                modifier = itemsData[i];
                modifier.closed = false;
            }
            ownModifiers.push(modifier);
        } else if(arr[i].ty == 'rp'){
            if(!processedPos){
                modifier = ShapeModifiers.getModifier(arr[i].ty);
                itemsData[i] = modifier;
                modifier.init(this,arr,i,itemsData);
                this.shapeModifiers.push(modifier);
                shouldRender = false;
            }else{
                modifier = itemsData[i];
                modifier.closed = true;
            }
            ownModifiers.push(modifier);
        }
        this.addProcessedElement(arr[i], i + 1);
    }
    this.removeTransformFromStyleList();
    this.closeStyles(ownStyles);
    len = ownModifiers.length;
    for(i=0;i<len;i+=1){
        ownModifiers[i].closed = true;
    }
};

CVShapeElement.prototype.renderInnerContent = function() {
    this.transformHelper.opacity = 1;
    this.transformHelper._opMdf = false;
    this.renderModifiers();
    this.transformsManager.processSequences(this._isFirstFrame);
    this.renderShape(this.transformHelper,this.shapesData,this.itemsData,true);
};

CVShapeElement.prototype.renderShapeTransform = function(parentTransform, groupTransform) {
    if(parentTransform._opMdf || groupTransform.op._mdf || this._isFirstFrame) {
        groupTransform.opacity = parentTransform.opacity;
        groupTransform.opacity *= groupTransform.op.v;
        groupTransform._opMdf = true;
    }
};

CVShapeElement.prototype.drawLayer = function() {
    var i, len = this.stylesList.length;
    var j, jLen, k, kLen,elems,nodes, renderer = this.globalData.renderer, ctx = this.globalData.canvasContext, type, currentStyle;
    for(i=0;i<len;i+=1){
        currentStyle = this.stylesList[i];
        type = currentStyle.type;

        //Skipping style when
        //Stroke width equals 0
        //style should not be rendered (extra unused repeaters)
        //current opacity equals 0
        //global opacity equals 0
        if(((type === 'st' || type === 'gs') && currentStyle.wi === 0) || !currentStyle.data._shouldRender || currentStyle.coOp === 0 || this.globalData.currentGlobalAlpha === 0){
            continue;
        }
        renderer.save();
        elems = currentStyle.elements;
        if(type === 'st' || type === 'gs'){
            ctx.strokeStyle = type === 'st' ? currentStyle.co : currentStyle.grd;
            ctx.lineWidth = currentStyle.wi;
            ctx.lineCap = currentStyle.lc;
            ctx.lineJoin = currentStyle.lj;
            ctx.miterLimit = currentStyle.ml || 0;
        } else {
            ctx.fillStyle = type === 'fl' ? currentStyle.co : currentStyle.grd;
        }
        renderer.ctxOpacity(currentStyle.coOp);
        if(type !== 'st' && type !== 'gs'){
            ctx.beginPath();
        }
        renderer.ctxTransform(currentStyle.preTransforms.finalTransform.props);
        jLen = elems.length;
        for(j=0;j<jLen;j+=1){
            if(type === 'st' || type === 'gs'){
                ctx.beginPath();
                if(currentStyle.da){
                    ctx.setLineDash(currentStyle.da);
                    ctx.lineDashOffset = currentStyle.do;
                }
            }
            nodes = elems[j].trNodes;
            kLen = nodes.length;

            for(k=0;k<kLen;k+=1){
                if(nodes[k].t == 'm'){
                    ctx.moveTo(nodes[k].p[0],nodes[k].p[1]);
                }else if(nodes[k].t == 'c'){
                    ctx.bezierCurveTo(nodes[k].pts[0],nodes[k].pts[1],nodes[k].pts[2],nodes[k].pts[3],nodes[k].pts[4],nodes[k].pts[5]);
                }else{
                    ctx.closePath();
                }
            }
            if(type === 'st' || type === 'gs'){
                ctx.stroke();
                if(currentStyle.da){
                    ctx.setLineDash(this.dashResetter);
                }
            }
        }
        if(type !== 'st' && type !== 'gs'){
            ctx.fill(currentStyle.r);
        }
        renderer.restore();
    }
};

CVShapeElement.prototype.renderShape = function(parentTransform,items,data,isMain){
    var i, len = items.length - 1;
    var groupTransform;
    groupTransform = parentTransform;
    for(i=len;i>=0;i-=1){
        if(items[i].ty == 'tr'){
            groupTransform = data[i].transform;
            this.renderShapeTransform(parentTransform, groupTransform);
        }else if(items[i].ty == 'sh' || items[i].ty == 'el' || items[i].ty == 'rc' || items[i].ty == 'sr'){
            this.renderPath(items[i],data[i]);
        }else if(items[i].ty == 'fl'){
            this.renderFill(items[i],data[i],groupTransform);
        }else if(items[i].ty == 'st'){
            this.renderStroke(items[i],data[i],groupTransform);
        }else if(items[i].ty == 'gf' || items[i].ty == 'gs'){
            this.renderGradientFill(items[i],data[i],groupTransform);
        }else if(items[i].ty == 'gr'){
            this.renderShape(groupTransform,items[i].it,data[i].it);
        }else if(items[i].ty == 'tm');
    }
    if(isMain){
        this.drawLayer();
    }
    
};

CVShapeElement.prototype.renderStyledShape = function(styledShape, shape){
    if(this._isFirstFrame || shape._mdf || styledShape.transforms._mdf) {
        var shapeNodes = styledShape.trNodes;
        var paths = shape.paths;
        var i, len, j, jLen = paths._length;
        shapeNodes.length = 0;
        var groupTransformMat = styledShape.transforms.finalTransform;
        for (j = 0; j < jLen; j += 1) {
            var pathNodes = paths.shapes[j];
            if(pathNodes && pathNodes.v){
                len = pathNodes._length;
                for (i = 1; i < len; i += 1) {
                    if (i === 1) {
                        shapeNodes.push({
                            t: 'm',
                            p: groupTransformMat.applyToPointArray(pathNodes.v[0][0], pathNodes.v[0][1], 0)
                        });
                    }
                    shapeNodes.push({
                        t: 'c',
                        pts: groupTransformMat.applyToTriplePoints(pathNodes.o[i - 1], pathNodes.i[i], pathNodes.v[i])
                    });
                }
                if (len === 1) {
                    shapeNodes.push({
                        t: 'm',
                        p: groupTransformMat.applyToPointArray(pathNodes.v[0][0], pathNodes.v[0][1], 0)
                    });
                }
                if (pathNodes.c && len) {
                    shapeNodes.push({
                        t: 'c',
                        pts: groupTransformMat.applyToTriplePoints(pathNodes.o[i - 1], pathNodes.i[0], pathNodes.v[0])
                    });
                    shapeNodes.push({
                        t: 'z'
                    });
                }
            }
        }
        styledShape.trNodes = shapeNodes;
    }
};

CVShapeElement.prototype.renderPath = function(pathData,itemData){
    if(pathData.hd !== true && pathData._shouldRender) {
        var i, len = itemData.styledShapes.length;
        for (i = 0; i < len; i += 1) {
            this.renderStyledShape(itemData.styledShapes[i], itemData.sh);
        }
    }
};

CVShapeElement.prototype.renderFill = function(styleData,itemData, groupTransform){
    var styleElem = itemData.style;

    if (itemData.c._mdf || this._isFirstFrame) {
        styleElem.co = 'rgb(' 
        + bm_floor(itemData.c.v[0]) + ',' 
        + bm_floor(itemData.c.v[1]) + ',' 
        + bm_floor(itemData.c.v[2]) + ')';
    }
    if (itemData.o._mdf || groupTransform._opMdf || this._isFirstFrame) {
        styleElem.coOp = itemData.o.v * groupTransform.opacity;
    }
};

CVShapeElement.prototype.renderGradientFill = function(styleData,itemData, groupTransform){
    var styleElem = itemData.style;
    if(!styleElem.grd || itemData.g._mdf || itemData.s._mdf || itemData.e._mdf || (styleData.t !== 1 && (itemData.h._mdf || itemData.a._mdf))) {
        var ctx = this.globalData.canvasContext;
        var grd;
        var pt1 = itemData.s.v, pt2 = itemData.e.v;
        if (styleData.t === 1) {
            grd = ctx.createLinearGradient(pt1[0], pt1[1], pt2[0], pt2[1]);
        } else {
            var rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));
            var ang = Math.atan2(pt2[1] - pt1[1], pt2[0] - pt1[0]);

            var percent = itemData.h.v >= 1 ? 0.99 : itemData.h.v <= -1 ? -0.99: itemData.h.v;
            var dist = rad * percent;
            var x = Math.cos(ang + itemData.a.v) * dist + pt1[0];
            var y = Math.sin(ang + itemData.a.v) * dist + pt1[1];
            var grd = ctx.createRadialGradient(x, y, 0, pt1[0], pt1[1], rad);
        }

        var i, len = styleData.g.p;
        var cValues = itemData.g.c;
        var opacity = 1;

        for (i = 0; i < len; i += 1){
            if(itemData.g._hasOpacity && itemData.g._collapsable) {
                opacity = itemData.g.o[i*2 + 1];
            }
            grd.addColorStop(cValues[i * 4] / 100,'rgba('+ cValues[i * 4 + 1] + ',' + cValues[i * 4 + 2] + ','+cValues[i * 4 + 3] + ',' + opacity + ')');
        }
        styleElem.grd = grd;
    }
    styleElem.coOp = itemData.o.v*groupTransform.opacity;
    
};

CVShapeElement.prototype.renderStroke = function(styleData,itemData, groupTransform){
    var styleElem = itemData.style;
    var d = itemData.d;
    if(d && (d._mdf  || this._isFirstFrame)){
        styleElem.da = d.dashArray;
        styleElem.do = d.dashoffset[0];
    }
    if(itemData.c._mdf || this._isFirstFrame){
        styleElem.co = 'rgb('+bm_floor(itemData.c.v[0])+','+bm_floor(itemData.c.v[1])+','+bm_floor(itemData.c.v[2])+')';
    }
    if(itemData.o._mdf || groupTransform._opMdf || this._isFirstFrame){
        styleElem.coOp = itemData.o.v*groupTransform.opacity;
    }
    if(itemData.w._mdf || this._isFirstFrame){
        styleElem.wi = itemData.w.v;
    }
};


CVShapeElement.prototype.destroy = function(){
    this.shapesData = null;
    this.globalData = null;
    this.canvasContext = null;
    this.stylesList.length = 0;
    this.itemsData.length = 0;
};


function CVSolidElement(data, globalData, comp) {
    this.initElement(data,globalData,comp);
}
extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement], CVSolidElement);

CVSolidElement.prototype.initElement = SVGShapeElement.prototype.initElement;
CVSolidElement.prototype.prepareFrame = IImageElement.prototype.prepareFrame;

CVSolidElement.prototype.renderInnerContent = function() {
    var ctx = this.canvasContext;
    ctx.fillStyle = this.data.sc;
    ctx.fillRect(0, 0, this.data.sw, this.data.sh);
    //
};
function CVTextElement(data, globalData, comp){
    this.textSpans = [];
    this.yOffset = 0;
    this.fillColorAnim = false;
    this.strokeColorAnim = false;
    this.strokeWidthAnim = false;
    this.stroke = false;
    this.fill = false;
    this.justifyOffset = 0;
    this.currentRender = null;
    this.renderType = 'canvas';
    this.values = {
        fill: 'rgba(0,0,0,0)',
        stroke: 'rgba(0,0,0,0)',
        sWidth: 0,
        fValue: ''
    };
    this.initElement(data,globalData,comp);
}
extendPrototype([BaseElement,TransformElement,CVBaseElement,HierarchyElement,FrameElement,RenderableElement,ITextElement], CVTextElement);

CVTextElement.prototype.tHelper = createTag('canvas').getContext('2d');

CVTextElement.prototype.buildNewText = function(){
    var documentData = this.textProperty.currentData;
    this.renderedLetters = createSizedArray(documentData.l ? documentData.l.length : 0);

    var hasFill = false;
    if(documentData.fc) {
        hasFill = true;
        this.values.fill = this.buildColor(documentData.fc);
    }else{
        this.values.fill = 'rgba(0,0,0,0)';
    }
    this.fill = hasFill;
    var hasStroke = false;
    if(documentData.sc){
        hasStroke = true;
        this.values.stroke = this.buildColor(documentData.sc);
        this.values.sWidth = documentData.sw;
    }
    var fontData = this.globalData.fontManager.getFontByName(documentData.f);
    var i, len;
    var letters = documentData.l;
    var matrixHelper = this.mHelper;
    this.stroke = hasStroke;
    this.values.fValue = documentData.finalSize + 'px '+ this.globalData.fontManager.getFontByName(documentData.f).fFamily;
    len = documentData.finalText.length;
    //this.tHelper.font = this.values.fValue;
    var charData, shapeData, k, kLen, shapes, j, jLen, pathNodes, commands, pathArr, singleShape = this.data.singleShape;
    var trackingOffset = documentData.tr/1000*documentData.finalSize;
    var xPos = 0, yPos = 0, firstLine = true;
    var cnt = 0;
    for (i = 0; i < len; i += 1) {
        charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
        shapeData = charData && charData.data || {};
        matrixHelper.reset();
        if(singleShape && letters[i].n) {
            xPos = -trackingOffset;
            yPos += documentData.yOffset;
            yPos += firstLine ? 1 : 0;
            firstLine = false;
        }

        shapes = shapeData.shapes ? shapeData.shapes[0].it : [];
        jLen = shapes.length;
        matrixHelper.scale(documentData.finalSize/100,documentData.finalSize/100);
        if(singleShape){
            this.applyTextPropertiesToMatrix(documentData, matrixHelper, letters[i].line, xPos, yPos);
        }
        commands = createSizedArray(jLen);
        for(j=0;j<jLen;j+=1){
            kLen = shapes[j].ks.k.i.length;
            pathNodes = shapes[j].ks.k;
            pathArr = [];
            for(k=1;k<kLen;k+=1){
                if(k==1){
                    pathArr.push(matrixHelper.applyToX(pathNodes.v[0][0],pathNodes.v[0][1],0),matrixHelper.applyToY(pathNodes.v[0][0],pathNodes.v[0][1],0));
                }
                pathArr.push(matrixHelper.applyToX(pathNodes.o[k-1][0],pathNodes.o[k-1][1],0),matrixHelper.applyToY(pathNodes.o[k-1][0],pathNodes.o[k-1][1],0),matrixHelper.applyToX(pathNodes.i[k][0],pathNodes.i[k][1],0),matrixHelper.applyToY(pathNodes.i[k][0],pathNodes.i[k][1],0),matrixHelper.applyToX(pathNodes.v[k][0],pathNodes.v[k][1],0),matrixHelper.applyToY(pathNodes.v[k][0],pathNodes.v[k][1],0));
            }
            pathArr.push(matrixHelper.applyToX(pathNodes.o[k-1][0],pathNodes.o[k-1][1],0),matrixHelper.applyToY(pathNodes.o[k-1][0],pathNodes.o[k-1][1],0),matrixHelper.applyToX(pathNodes.i[0][0],pathNodes.i[0][1],0),matrixHelper.applyToY(pathNodes.i[0][0],pathNodes.i[0][1],0),matrixHelper.applyToX(pathNodes.v[0][0],pathNodes.v[0][1],0),matrixHelper.applyToY(pathNodes.v[0][0],pathNodes.v[0][1],0));
            commands[j] = pathArr;
        }
        if(singleShape){
            xPos += letters[i].l;
            xPos += trackingOffset;
        }
        if(this.textSpans[cnt]){
            this.textSpans[cnt].elem = commands;
        } else {
            this.textSpans[cnt] = {elem: commands};
        }
        cnt +=1;
    }
};

CVTextElement.prototype.renderInnerContent = function(){
    var ctx = this.canvasContext;
    var finalMat = this.finalTransform.mat.props;
    ctx.font = this.values.fValue;
    ctx.lineCap = 'butt';
    ctx.lineJoin = 'miter';
    ctx.miterLimit = 4;

    if(!this.data.singleShape){
        this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
    }

    var  i,len, j, jLen, k, kLen;
    var renderedLetters = this.textAnimator.renderedLetters;

    var letters = this.textProperty.currentData.l;

    len = letters.length;
    var renderedLetter;
    var lastFill = null, lastStroke = null, lastStrokeW = null, commands, pathArr;
    for(i=0;i<len;i+=1){
        if(letters[i].n){
            continue;
        }
        renderedLetter = renderedLetters[i];
        if(renderedLetter){
            this.globalData.renderer.save();
            this.globalData.renderer.ctxTransform(renderedLetter.p);
            this.globalData.renderer.ctxOpacity(renderedLetter.o);
        }
        if(this.fill){
            if(renderedLetter && renderedLetter.fc){
                if(lastFill !== renderedLetter.fc){
                    lastFill = renderedLetter.fc;
                    ctx.fillStyle = renderedLetter.fc;
                }
            }else if(lastFill !== this.values.fill){
                lastFill = this.values.fill;
                ctx.fillStyle = this.values.fill;
            }
            commands = this.textSpans[i].elem;
            jLen = commands.length;
            this.globalData.canvasContext.beginPath();
            for(j=0;j<jLen;j+=1) {
                pathArr = commands[j];
                kLen = pathArr.length;
                this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);
                for (k = 2; k < kLen; k += 6) {
                    this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);
                }
            }
            this.globalData.canvasContext.closePath();
            this.globalData.canvasContext.fill();
            ///ctx.fillText(this.textSpans[i].val,0,0);
        }
        if(this.stroke){
            if(renderedLetter && renderedLetter.sw){
                if(lastStrokeW !== renderedLetter.sw){
                    lastStrokeW = renderedLetter.sw;
                    ctx.lineWidth = renderedLetter.sw;
                }
            }else if(lastStrokeW !== this.values.sWidth){
                lastStrokeW = this.values.sWidth;
                ctx.lineWidth = this.values.sWidth;
            }
            if(renderedLetter && renderedLetter.sc){
                if(lastStroke !== renderedLetter.sc){
                    lastStroke = renderedLetter.sc;
                    ctx.strokeStyle = renderedLetter.sc;
                }
            }else if(lastStroke !== this.values.stroke){
                lastStroke = this.values.stroke;
                ctx.strokeStyle = this.values.stroke;
            }
            commands = this.textSpans[i].elem;
            jLen = commands.length;
            this.globalData.canvasContext.beginPath();
            for(j=0;j<jLen;j+=1) {
                pathArr = commands[j];
                kLen = pathArr.length;
                this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);
                for (k = 2; k < kLen; k += 6) {
                    this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);
                }
            }
            this.globalData.canvasContext.closePath();
            this.globalData.canvasContext.stroke();
            ///ctx.strokeText(letters[i].val,0,0);
        }
        if(renderedLetter) {
            this.globalData.renderer.restore();
        }
    }
};
function CVEffects() {

}
CVEffects.prototype.renderFrame = function(){};
function HBaseElement(data,globalData,comp){}
HBaseElement.prototype = {
    checkBlendMode: function(){},
    initRendererElement: function(){
        this.baseElement = createTag(this.data.tg || 'div');
        if(this.data.hasMask) {
            this.svgElement = createNS('svg');
            this.layerElement = createNS('g');
            this.maskedElement = this.layerElement;
            this.svgElement.appendChild(this.layerElement);
            this.baseElement.appendChild(this.svgElement);
        } else {
            this.layerElement = this.baseElement;
        }
        styleDiv(this.baseElement);
    },
    createContainerElements: function(){
        this.renderableEffectsManager = new CVEffects(this);
        this.transformedElement = this.baseElement;
        this.maskedElement = this.layerElement;
        if (this.data.ln) {
            this.layerElement.setAttribute('id',this.data.ln);
        }
        if (this.data.cl) {
            this.layerElement.setAttribute('class', this.data.cl);
        }
        if (this.data.bm !== 0) {
            this.setBlendMode();
        }
    },
    renderElement: function() {
        if(this.finalTransform._matMdf){
            this.transformedElement.style.transform = this.transformedElement.style.webkitTransform = this.finalTransform.mat.toCSS();
        }
        if(this.finalTransform._opMdf){
            this.transformedElement.style.opacity = this.finalTransform.mProp.o.v;
        }
    },
    renderFrame: function() {
        //If it is exported as hidden (data.hd === true) no need to render
        //If it is not visible no need to render
        if (this.data.hd || this.hidden) {
            return;
        }
        this.renderTransform();
        this.renderRenderable();
        this.renderElement();
        this.renderInnerContent();
        if (this._isFirstFrame) {
            this._isFirstFrame = false;
        }
    },
    destroy: function(){
        this.layerElement = null;
        this.transformedElement = null;
        if(this.matteElement) {
            this.matteElement = null;
        }
        if(this.maskManager) {
            this.maskManager.destroy();
            this.maskManager = null;
        }
    },
    createRenderableComponents: function(){
        this.maskManager = new MaskElement(this.data, this, this.globalData);
    },
    addEffects: function(){
    },
    setMatte: function(){}
};
HBaseElement.prototype.getBaseElement = SVGBaseElement.prototype.getBaseElement;
HBaseElement.prototype.destroyBaseElement = HBaseElement.prototype.destroy;
HBaseElement.prototype.buildElementParenting = HybridRenderer.prototype.buildElementParenting;
function HSolidElement(data,globalData,comp){
    this.initElement(data,globalData,comp);
}
extendPrototype([BaseElement,TransformElement,HBaseElement,HierarchyElement,FrameElement,RenderableDOMElement], HSolidElement);

HSolidElement.prototype.createContent = function(){
    var rect;
    if(this.data.hasMask){
        rect = createNS('rect');
        rect.setAttribute('width',this.data.sw);
        rect.setAttribute('height',this.data.sh);
        rect.setAttribute('fill',this.data.sc);
        this.svgElement.setAttribute('width',this.data.sw);
        this.svgElement.setAttribute('height',this.data.sh);
    } else {
        rect = createTag('div');
        rect.style.width = this.data.sw + 'px';
        rect.style.height = this.data.sh + 'px';
        rect.style.backgroundColor = this.data.sc;
    }
    this.layerElement.appendChild(rect);
};

function HCompElement(data,globalData,comp){
    this.layers = data.layers;
    this.supports3d = !data.hasMask;
    this.completeLayers = false;
    this.pendingElements = [];
    this.elements = this.layers ? createSizedArray(this.layers.length) : [];
    this.initElement(data,globalData,comp);
    this.tm = data.tm ? PropertyFactory.getProp(this,data.tm,0,globalData.frameRate,this) : {_placeholder:true};
}

extendPrototype([HybridRenderer, ICompElement, HBaseElement], HCompElement);
HCompElement.prototype._createBaseContainerElements = HCompElement.prototype.createContainerElements;

HCompElement.prototype.createContainerElements = function(){
    this._createBaseContainerElements();
    //divElement.style.clip = 'rect(0px, '+this.data.w+'px, '+this.data.h+'px, 0px)';
    if(this.data.hasMask){
        this.svgElement.setAttribute('width',this.data.w);
        this.svgElement.setAttribute('height',this.data.h);
        this.transformedElement = this.baseElement;
    } else {
        this.transformedElement = this.layerElement;
    }
};

HCompElement.prototype.addTo3dContainer = function(elem,pos) {
    var j = 0;
    var nextElement;
    while(j<pos){
        if(this.elements[j] && this.elements[j].getBaseElement){
            nextElement = this.elements[j].getBaseElement();
        }
        j += 1;
    }
    if(nextElement){
        this.layerElement.insertBefore(elem, nextElement);
    } else {
        this.layerElement.appendChild(elem);
    }
};

function HShapeElement(data,globalData,comp){
    //List of drawable elements
    this.shapes = [];
    // Full shape data
    this.shapesData = data.shapes;
    //List of styles that will be applied to shapes
    this.stylesList = [];
    //List of modifiers that will be applied to shapes
    this.shapeModifiers = [];
    //List of items in shape tree
    this.itemsData = [];
    //List of items in previous shape tree
    this.processedElements = [];
    // List of animated components
    this.animatedContents = [];
    this.shapesContainer = createNS('g');
    this.initElement(data,globalData,comp);
    //Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.
    // List of elements that have been created
    this.prevViewData = [];
    this.currentBBox = {
        x:999999,
        y: -999999,
        h: 0,
        w: 0
    };
}
extendPrototype([BaseElement,TransformElement,HSolidElement,SVGShapeElement,HBaseElement,HierarchyElement,FrameElement,RenderableElement], HShapeElement);
HShapeElement.prototype._renderShapeFrame = HShapeElement.prototype.renderInnerContent;

HShapeElement.prototype.createContent = function(){
    var cont;
    this.baseElement.style.fontSize = 0;
    if (this.data.hasMask) {
        this.layerElement.appendChild(this.shapesContainer);
        cont = this.svgElement;
    } else {
        cont = createNS('svg');
        var size = this.comp.data ? this.comp.data : this.globalData.compSize;
        cont.setAttribute('width',size.w);
        cont.setAttribute('height',size.h);
        cont.appendChild(this.shapesContainer);
        this.layerElement.appendChild(cont);
    }

    this.searchShapes(this.shapesData,this.itemsData,this.prevViewData,this.shapesContainer,0, [], true);
    this.filterUniqueShapes();
    this.shapeCont = cont;
};

HShapeElement.prototype.getTransformedPoint = function(transformers, point) {
    var i, len = transformers.length;
    for(i = 0; i < len; i += 1) {
        point = transformers[i].mProps.v.applyToPointArray(point[0], point[1], 0);
    }
    return point;
};

HShapeElement.prototype.calculateShapeBoundingBox = function(item, boundingBox) {
    var shape = item.sh.v;
    var transformers = item.transformers;
    var i, len = shape._length, vPoint, oPoint, nextIPoint, nextVPoint;
    if (len <= 1) {
        return;
    }
    for (i = 0; i < len - 1; i += 1) {
        vPoint = this.getTransformedPoint(transformers, shape.v[i]);
        oPoint = this.getTransformedPoint(transformers, shape.o[i]);
        nextIPoint = this.getTransformedPoint(transformers, shape.i[i + 1]);
        nextVPoint = this.getTransformedPoint(transformers, shape.v[i + 1]);
        this.checkBounds(vPoint, oPoint, nextIPoint, nextVPoint, boundingBox);
    }
    if(shape.c) {
        vPoint = this.getTransformedPoint(transformers, shape.v[i]);
        oPoint = this.getTransformedPoint(transformers, shape.o[i]);
        nextIPoint = this.getTransformedPoint(transformers, shape.i[0]);
        nextVPoint = this.getTransformedPoint(transformers, shape.v[0]);
        this.checkBounds(vPoint, oPoint, nextIPoint, nextVPoint, boundingBox);
    }
};

HShapeElement.prototype.checkBounds = function(vPoint, oPoint, nextIPoint, nextVPoint, boundingBox) {
    this.getBoundsOfCurve(vPoint, oPoint, nextIPoint, nextVPoint);
    var bounds = this.shapeBoundingBox;
    boundingBox.x = bm_min(bounds.left, boundingBox.x);
    boundingBox.xMax = bm_max(bounds.right, boundingBox.xMax);
    boundingBox.y = bm_min(bounds.top, boundingBox.y);
    boundingBox.yMax = bm_max(bounds.bottom, boundingBox.yMax);
};

HShapeElement.prototype.shapeBoundingBox = {
    left:0,
    right:0,
    top:0,
    bottom:0,
};

HShapeElement.prototype.tempBoundingBox = {
    x:0,
    xMax:0,
    y:0,
    yMax:0,
    width:0,
    height:0
};

HShapeElement.prototype.getBoundsOfCurve = function(p0, p1, p2, p3) {

    var bounds = [[p0[0],p3[0]], [p0[1],p3[1]]];

    for (var a, b, c, t, b2ac, t1, t2, i = 0; i < 2; ++i) {

      b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
      a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
      c = 3 * p1[i] - 3 * p0[i];

      b = b | 0;
      a = a | 0;
      c = c | 0;

      if (a === 0) {

        if (b === 0) {
          continue;
        }

        t = -c / b;

        if (0 < t && t < 1) {
          bounds[i].push(this.calculateF(t,p0,p1,p2,p3,i));
        }
        continue;
      }

      b2ac = b * b - 4 * c * a;

      if (b2ac < 0) {
        continue;
      }

      t1 = (-b + bm_sqrt(b2ac))/(2 * a);
      if (0 < t1 && t1 < 1) bounds[i].push(this.calculateF(t1,p0,p1,p2,p3,i));

      t2 = (-b - bm_sqrt(b2ac))/(2 * a);
      if (0 < t2 && t2 < 1) bounds[i].push(this.calculateF(t2,p0,p1,p2,p3,i));

    }

    this.shapeBoundingBox.left = bm_min.apply(null, bounds[0]);
    this.shapeBoundingBox.top = bm_min.apply(null, bounds[1]);
    this.shapeBoundingBox.right = bm_max.apply(null, bounds[0]);
    this.shapeBoundingBox.bottom = bm_max.apply(null, bounds[1]);
  };

  HShapeElement.prototype.calculateF = function(t, p0, p1, p2, p3, i) {
    return bm_pow(1-t, 3) * p0[i]
        + 3 * bm_pow(1-t, 2) * t * p1[i]
        + 3 * (1-t) * bm_pow(t, 2) * p2[i]
        + bm_pow(t, 3) * p3[i];
  };

HShapeElement.prototype.calculateBoundingBox = function(itemsData, boundingBox) {
    var i, len = itemsData.length;
    for(i = 0; i < len; i += 1) {
        if(itemsData[i] && itemsData[i].sh) {
            this.calculateShapeBoundingBox(itemsData[i], boundingBox);
        } else if(itemsData[i] && itemsData[i].it) {
            this.calculateBoundingBox(itemsData[i].it, boundingBox);
        }
    }
};

HShapeElement.prototype.currentBoxContains = function(box) {
    return this.currentBBox.x <= box.x 
    && this.currentBBox.y <= box.y 
    && this.currentBBox.width + this.currentBBox.x >= box.x + box.width
    && this.currentBBox.height + this.currentBBox.y >= box.y + box.height
};

HShapeElement.prototype.renderInnerContent = function() {
    this._renderShapeFrame();

    if(!this.hidden && (this._isFirstFrame || this._mdf)) {
        var tempBoundingBox = this.tempBoundingBox;
        var max = 999999;
        tempBoundingBox.x = max;
        tempBoundingBox.xMax = -max;
        tempBoundingBox.y = max;
        tempBoundingBox.yMax = -max;
        this.calculateBoundingBox(this.itemsData, tempBoundingBox);
        tempBoundingBox.width = tempBoundingBox.xMax < tempBoundingBox.x ? 0 : tempBoundingBox.xMax - tempBoundingBox.x;
        tempBoundingBox.height = tempBoundingBox.yMax < tempBoundingBox.y ? 0 : tempBoundingBox.yMax - tempBoundingBox.y;
        //var tempBoundingBox = this.shapeCont.getBBox();
        if(this.currentBoxContains(tempBoundingBox)) {
            return;
        }
        var changed = false;
        if(this.currentBBox.w !== tempBoundingBox.width){
            this.currentBBox.w = tempBoundingBox.width;
            this.shapeCont.setAttribute('width',tempBoundingBox.width);
            changed = true;
        }
        if(this.currentBBox.h !== tempBoundingBox.height){
            this.currentBBox.h = tempBoundingBox.height;
            this.shapeCont.setAttribute('height',tempBoundingBox.height);
            changed = true;
        }
        if(changed  || this.currentBBox.x !== tempBoundingBox.x  || this.currentBBox.y !== tempBoundingBox.y){
            this.currentBBox.w = tempBoundingBox.width;
            this.currentBBox.h = tempBoundingBox.height;
            this.currentBBox.x = tempBoundingBox.x;
            this.currentBBox.y = tempBoundingBox.y;

            this.shapeCont.setAttribute('viewBox',this.currentBBox.x+' '+this.currentBBox.y+' '+this.currentBBox.w+' '+this.currentBBox.h);
            this.shapeCont.style.transform = this.shapeCont.style.webkitTransform = 'translate(' + this.currentBBox.x + 'px,' + this.currentBBox.y + 'px)';
        }
    }

};
function HTextElement(data,globalData,comp){
    this.textSpans = [];
    this.textPaths = [];
    this.currentBBox = {
        x:999999,
        y: -999999,
        h: 0,
        w: 0
    };
    this.renderType = 'svg';
    this.isMasked = false;
    this.initElement(data,globalData,comp);

}
extendPrototype([BaseElement,TransformElement,HBaseElement,HierarchyElement,FrameElement,RenderableDOMElement,ITextElement], HTextElement);

HTextElement.prototype.createContent = function(){
    this.isMasked = this.checkMasks();
    if(this.isMasked){
        this.renderType = 'svg';
        this.compW = this.comp.data.w;
        this.compH = this.comp.data.h;
        this.svgElement.setAttribute('width',this.compW);
        this.svgElement.setAttribute('height',this.compH);
        var g = createNS('g');
        this.maskedElement.appendChild(g);
        this.innerElem = g;
    } else {
        this.renderType = 'html';
        this.innerElem = this.layerElement;
    }

    this.checkParenting();

};

HTextElement.prototype.buildNewText = function(){
    var documentData = this.textProperty.currentData;
    this.renderedLetters = createSizedArray(documentData.l ? documentData.l.length : 0);
    var innerElemStyle = this.innerElem.style;
    innerElemStyle.color = innerElemStyle.fill = documentData.fc ? this.buildColor(documentData.fc) : 'rgba(0,0,0,0)';
    if(documentData.sc){
        innerElemStyle.stroke = this.buildColor(documentData.sc);
        innerElemStyle.strokeWidth = documentData.sw+'px';
    }
    var fontData = this.globalData.fontManager.getFontByName(documentData.f);
    if(!this.globalData.fontManager.chars){
        innerElemStyle.fontSize = documentData.finalSize+'px';
        innerElemStyle.lineHeight = documentData.finalSize+'px';
        if(fontData.fClass){
            this.innerElem.className = fontData.fClass;
        } else {
            innerElemStyle.fontFamily = fontData.fFamily;
            var fWeight = documentData.fWeight, fStyle = documentData.fStyle;
            innerElemStyle.fontStyle = fStyle;
            innerElemStyle.fontWeight = fWeight;
        }
    }
    var i, len;

    var letters = documentData.l;
    len = letters.length;
    var tSpan,tParent,tCont;
    var matrixHelper = this.mHelper;
    var shapes, shapeStr = '';
    var cnt = 0;
    for (i = 0;i < len ;i += 1) {
        if(this.globalData.fontManager.chars){
            if(!this.textPaths[cnt]){
                tSpan = createNS('path');
                tSpan.setAttribute('stroke-linecap', 'butt');
                tSpan.setAttribute('stroke-linejoin','round');
                tSpan.setAttribute('stroke-miterlimit','4');
            } else {
                tSpan = this.textPaths[cnt];
            }
            if(!this.isMasked){
                if(this.textSpans[cnt]){
                    tParent = this.textSpans[cnt];
                    tCont = tParent.children[0];
                } else {

                    tParent = createTag('div');
                    tCont = createNS('svg');
                    tCont.appendChild(tSpan);
                    styleDiv(tParent);
                }
            }
        }else{
            if(!this.isMasked){
                if(this.textSpans[cnt]){
                    tParent = this.textSpans[cnt];
                    tSpan = this.textPaths[cnt];
                } else {
                    tParent = createTag('span');
                    styleDiv(tParent);
                    tSpan = createTag('span');
                    styleDiv(tSpan);
                    tParent.appendChild(tSpan);
                }
            } else {
                tSpan = this.textPaths[cnt] ? this.textPaths[cnt] : createNS('text');
            }
        }
        //tSpan.setAttribute('visibility', 'hidden');
        if(this.globalData.fontManager.chars){
            var charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
            var shapeData;
            if(charData){
                shapeData = charData.data;
            } else {
                shapeData = null;
            }
            matrixHelper.reset();
            if(shapeData && shapeData.shapes){
                shapes = shapeData.shapes[0].it;
                matrixHelper.scale(documentData.finalSize/100,documentData.finalSize/100);
                shapeStr = this.createPathShape(matrixHelper,shapes);
                tSpan.setAttribute('d',shapeStr);
            }
            if(!this.isMasked){
                this.innerElem.appendChild(tParent);
                if(shapeData && shapeData.shapes){

                    //document.body.appendChild is needed to get exact measure of shape
                    document.body.appendChild(tCont);
                    var boundingBox = tCont.getBBox();
                    tCont.setAttribute('width',boundingBox.width + 2);
                    tCont.setAttribute('height',boundingBox.height + 2);
                    tCont.setAttribute('viewBox',(boundingBox.x-1)+' '+ (boundingBox.y-1)+' '+ (boundingBox.width+2)+' '+ (boundingBox.height+2));
                    tCont.style.transform = tCont.style.webkitTransform = 'translate(' + (boundingBox.x-1) + 'px,' + (boundingBox.y-1) + 'px)';

                    letters[i].yOffset = boundingBox.y-1;

                } else{
                    tCont.setAttribute('width',1);
                    tCont.setAttribute('height',1);
                }
                    tParent.appendChild(tCont);
            }else{
                this.innerElem.appendChild(tSpan);
            }
        }else{
            tSpan.textContent = letters[i].val;
            tSpan.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space","preserve");
            if(!this.isMasked){
                this.innerElem.appendChild(tParent);
                //
                tSpan.style.transform = tSpan.style.webkitTransform = 'translate3d(0,'+ -documentData.finalSize/1.2+'px,0)';
            } else {
                this.innerElem.appendChild(tSpan);
            }
        }
        //
        if(!this.isMasked){
            this.textSpans[cnt] = tParent;
        }else{
            this.textSpans[cnt] = tSpan;
        }
        this.textSpans[cnt].style.display = 'block';
        this.textPaths[cnt] = tSpan;
        cnt += 1;
    }
    while(cnt < this.textSpans.length){
        this.textSpans[cnt].style.display = 'none';
        cnt += 1;
    }
};

HTextElement.prototype.renderInnerContent = function() {

    if(this.data.singleShape){
        if(!this._isFirstFrame && !this.lettersChangedFlag){
            return;
        } else {
            // Todo Benchmark if using this is better than getBBox
             if(this.isMasked && this.finalTransform._matMdf){
                 this.svgElement.setAttribute('viewBox',-this.finalTransform.mProp.p.v[0]+' '+ -this.finalTransform.mProp.p.v[1]+' '+this.compW+' '+this.compH);
                this.svgElement.style.transform = this.svgElement.style.webkitTransform = 'translate(' + -this.finalTransform.mProp.p.v[0] + 'px,' + -this.finalTransform.mProp.p.v[1] + 'px)';
             }
        }
    }

    this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
    if(!this.lettersChangedFlag && !this.textAnimator.lettersChangedFlag){
        return;
    }
    var  i,len, count = 0;
    var renderedLetters = this.textAnimator.renderedLetters;

    var letters = this.textProperty.currentData.l;

    len = letters.length;
    var renderedLetter, textSpan, textPath;
    for(i=0;i<len;i+=1){
        if(letters[i].n){
            count += 1;
            continue;
        }
        textSpan = this.textSpans[i];
        textPath = this.textPaths[i];
        renderedLetter = renderedLetters[count];
        count += 1;
        if(renderedLetter._mdf.m) {
            if(!this.isMasked){
                textSpan.style.transform = textSpan.style.webkitTransform = renderedLetter.m;
            }else{
                textSpan.setAttribute('transform',renderedLetter.m);
            }
        }
        ////textSpan.setAttribute('opacity',renderedLetter.o);
        textSpan.style.opacity = renderedLetter.o;
        if(renderedLetter.sw && renderedLetter._mdf.sw){
            textPath.setAttribute('stroke-width',renderedLetter.sw);
        }
        if(renderedLetter.sc && renderedLetter._mdf.sc){
            textPath.setAttribute('stroke',renderedLetter.sc);
        }
        if(renderedLetter.fc && renderedLetter._mdf.fc){
            textPath.setAttribute('fill',renderedLetter.fc);
            textPath.style.color = renderedLetter.fc;
        }
    }

    if(this.innerElem.getBBox && !this.hidden && (this._isFirstFrame || this._mdf)){
        var boundingBox = this.innerElem.getBBox();

        if(this.currentBBox.w !== boundingBox.width){
            this.currentBBox.w = boundingBox.width;
            this.svgElement.setAttribute('width',boundingBox.width);
        }
        if(this.currentBBox.h !== boundingBox.height){
            this.currentBBox.h = boundingBox.height;
            this.svgElement.setAttribute('height',boundingBox.height);
        }

        var margin = 1;
        if(this.currentBBox.w !== (boundingBox.width + margin*2) || this.currentBBox.h !== (boundingBox.height + margin*2)  || this.currentBBox.x !== (boundingBox.x - margin)  || this.currentBBox.y !== (boundingBox.y - margin)){
            this.currentBBox.w = boundingBox.width + margin*2;
            this.currentBBox.h = boundingBox.height + margin*2;
            this.currentBBox.x = boundingBox.x - margin;
            this.currentBBox.y = boundingBox.y - margin;

            this.svgElement.setAttribute('viewBox',this.currentBBox.x+' '+this.currentBBox.y+' '+this.currentBBox.w+' '+this.currentBBox.h);
            this.svgElement.style.transform = this.svgElement.style.webkitTransform = 'translate(' + this.currentBBox.x + 'px,' + this.currentBBox.y + 'px)';
        }
    }
};
function HImageElement(data,globalData,comp){
    this.assetData = globalData.getAssetData(data.refId);
    this.initElement(data,globalData,comp);
}

extendPrototype([BaseElement,TransformElement,HBaseElement,HSolidElement,HierarchyElement,FrameElement,RenderableElement], HImageElement);


HImageElement.prototype.createContent = function(){
    var assetPath = this.globalData.getAssetsPath(this.assetData);
    var img = new Image();

    if(this.data.hasMask){
        this.imageElem = createNS('image');
        this.imageElem.setAttribute('width',this.assetData.w+"px");
        this.imageElem.setAttribute('height',this.assetData.h+"px");
        this.imageElem.setAttributeNS('http://www.w3.org/1999/xlink','href',assetPath);
        this.layerElement.appendChild(this.imageElem);
        this.baseElement.setAttribute('width',this.assetData.w);
        this.baseElement.setAttribute('height',this.assetData.h);
    } else {
        this.layerElement.appendChild(img);
    }
    img.src = assetPath;
    if(this.data.ln){
        this.baseElement.setAttribute('id',this.data.ln);
    }
};
function HCameraElement(data,globalData,comp){
    this.initFrame();
    this.initBaseData(data,globalData,comp);
    this.initHierarchy();
    var getProp = PropertyFactory.getProp;
    this.pe = getProp(this,data.pe,0,0,this);
    if(data.ks.p.s){
        this.px = getProp(this,data.ks.p.x,1,0,this);
        this.py = getProp(this,data.ks.p.y,1,0,this);
        this.pz = getProp(this,data.ks.p.z,1,0,this);
    }else{
        this.p = getProp(this,data.ks.p,1,0,this);
    }
    if(data.ks.a){
        this.a = getProp(this,data.ks.a,1,0,this);
    }
    if(data.ks.or.k.length && data.ks.or.k[0].to){
        var i,len = data.ks.or.k.length;
        for(i=0;i<len;i+=1){
            data.ks.or.k[i].to = null;
            data.ks.or.k[i].ti = null;
        }
    }
    this.or = getProp(this,data.ks.or,1,degToRads,this);
    this.or.sh = true;
    this.rx = getProp(this,data.ks.rx,0,degToRads,this);
    this.ry = getProp(this,data.ks.ry,0,degToRads,this);
    this.rz = getProp(this,data.ks.rz,0,degToRads,this);
    this.mat = new Matrix();
    this._prevMat = new Matrix();
    this._isFirstFrame = true;
    
    // TODO: find a better way to make the HCamera element to be compatible with the LayerInterface and TransformInterface.
    this.finalTransform = {
        mProp: this
    };
}
extendPrototype([BaseElement, FrameElement, HierarchyElement], HCameraElement);

HCameraElement.prototype.setup = function() {
    var i, len = this.comp.threeDElements.length, comp;
    for(i=0;i<len;i+=1){
        //[perspectiveElem,container]
        comp = this.comp.threeDElements[i];
        if(comp.type === '3d') {
            comp.perspectiveElem.style.perspective = comp.perspectiveElem.style.webkitPerspective = this.pe.v+'px';
            comp.container.style.transformOrigin = comp.container.style.mozTransformOrigin = comp.container.style.webkitTransformOrigin = "0px 0px 0px";
            comp.perspectiveElem.style.transform = comp.perspectiveElem.style.webkitTransform = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)';
        }
    }
};

HCameraElement.prototype.createElements = function(){
};

HCameraElement.prototype.hide = function(){
};

HCameraElement.prototype.renderFrame = function(){
    var _mdf = this._isFirstFrame;
    var i, len;
    if(this.hierarchy){
        len = this.hierarchy.length;
        for(i=0;i<len;i+=1){
            _mdf = this.hierarchy[i].finalTransform.mProp._mdf || _mdf;
        }
    }
    if(_mdf || this.pe._mdf || (this.p && this.p._mdf) || (this.px && (this.px._mdf || this.py._mdf || this.pz._mdf)) || this.rx._mdf || this.ry._mdf || this.rz._mdf || this.or._mdf || (this.a && this.a._mdf)) {
        this.mat.reset();

        if(this.hierarchy){
            len = this.hierarchy.length - 1;
            for (i = len; i >= 0; i -= 1) {
                /*mat = this.hierarchy[i].finalTransform.mProp.v.props;
                console.log(mat)
                this.mat.transform(-mat[0],-mat[1],-mat[2],-mat[3],-mat[4],-mat[5],-mat[6],-mat[7],-mat[8],-mat[9],-mat[10],-mat[11],-mat[12],-mat[13],-mat[14],mat[15]);
                console.log(this.mat.props)*/
                var mTransf = this.hierarchy[i].finalTransform.mProp;
                this.mat.translate(-mTransf.p.v[0],-mTransf.p.v[1],mTransf.p.v[2]);
                this.mat.rotateX(-mTransf.or.v[0]).rotateY(-mTransf.or.v[1]).rotateZ(mTransf.or.v[2]);
                this.mat.rotateX(-mTransf.rx.v).rotateY(-mTransf.ry.v).rotateZ(mTransf.rz.v);
                this.mat.scale(1/mTransf.s.v[0],1/mTransf.s.v[1],1/mTransf.s.v[2]);
                this.mat.translate(mTransf.a.v[0],mTransf.a.v[1],mTransf.a.v[2]);
            }
        }

        if(this.p){
            this.mat.translate(-this.p.v[0],-this.p.v[1],this.p.v[2]);
        }else{
            this.mat.translate(-this.px.v,-this.py.v,this.pz.v);
        }
        if(this.a){
            var diffVector = [this.p.v[0]-this.a.v[0],this.p.v[1]-this.a.v[1],this.p.v[2]-this.a.v[2]];
            var mag = Math.sqrt(Math.pow(diffVector[0],2)+Math.pow(diffVector[1],2)+Math.pow(diffVector[2],2));
            //var lookDir = getNormalizedPoint(getDiffVector(this.a.v,this.p.v));
            var lookDir = [diffVector[0]/mag,diffVector[1]/mag,diffVector[2]/mag];
            var lookLengthOnXZ = Math.sqrt( lookDir[2]*lookDir[2] + lookDir[0]*lookDir[0] );
            var m_rotationX = (Math.atan2( lookDir[1], lookLengthOnXZ ));
            var m_rotationY = (Math.atan2( lookDir[0], -lookDir[2]));
            this.mat.rotateY(m_rotationY).rotateX(-m_rotationX);

        }
        this.mat.rotateX(-this.rx.v).rotateY(-this.ry.v).rotateZ(this.rz.v);
        this.mat.rotateX(-this.or.v[0]).rotateY(-this.or.v[1]).rotateZ(this.or.v[2]);
        this.mat.translate(this.globalData.compSize.w/2,this.globalData.compSize.h/2,0);
        this.mat.translate(0,0,this.pe.v);


        

        var hasMatrixChanged = !this._prevMat.equals(this.mat);
        if((hasMatrixChanged || this.pe._mdf) && this.comp.threeDElements) {
            len = this.comp.threeDElements.length;
            var comp;
            for(i=0;i<len;i+=1){
                comp = this.comp.threeDElements[i];
                if(comp.type === '3d') {
                    if(hasMatrixChanged) {
                        comp.container.style.transform = comp.container.style.webkitTransform = this.mat.toCSS();
                    }
                    if(this.pe._mdf) {
                        comp.perspectiveElem.style.perspective = comp.perspectiveElem.style.webkitPerspective = this.pe.v+'px';
                    }
                }
            }
            this.mat.clone(this._prevMat);
        }
    }
    this._isFirstFrame = false;
};

HCameraElement.prototype.prepareFrame = function(num) {
    this.prepareProperties(num, true);
};

HCameraElement.prototype.destroy = function(){
};
HCameraElement.prototype.getBaseElement = function(){return null;};
var animationManager = (function(){
    var moduleOb = {};
    var registeredAnimations = [];
    var initTime = 0;
    var len = 0;
    var playingAnimationsNum = 0;
    var _stopped = true;
    var _isFrozen = false;

    function removeElement(ev){
        var i = 0;
        var animItem = ev.target;
        while(i<len) {
            if (registeredAnimations[i].animation === animItem) {
                registeredAnimations.splice(i, 1);
                i -= 1;
                len -= 1;
                if(!animItem.isPaused){
                    subtractPlayingCount();
                }
            }
            i += 1;
        }
    }

    function registerAnimation(element, animationData){
        if(!element){
            return null;
        }
        var i=0;
        while(i<len){
            if(registeredAnimations[i].elem == element && registeredAnimations[i].elem !== null ){
                return registeredAnimations[i].animation;
            }
            i+=1;
        }
        var animItem = new AnimationItem();
        setupAnimation(animItem, element);
        animItem.setData(element, animationData);
        return animItem;
    }

    function getRegisteredAnimations() {
        var i, len = registeredAnimations.length;
        var animations = [];
        for(i = 0; i < len; i += 1) {
            animations.push(registeredAnimations[i].animation);
        }
        return animations;
    }

    function addPlayingCount(){
        playingAnimationsNum += 1;
        activate();
    }

    function subtractPlayingCount(){
        playingAnimationsNum -= 1;
    }

    function setupAnimation(animItem, element){
        animItem.addEventListener('destroy',removeElement);
        animItem.addEventListener('_active',addPlayingCount);
        animItem.addEventListener('_idle',subtractPlayingCount);
        registeredAnimations.push({elem: element,animation:animItem});
        len += 1;
    }

    function loadAnimation(params){
        var animItem = new AnimationItem();
        setupAnimation(animItem, null);
        animItem.setParams(params);
        return animItem;
    }


    function setSpeed(val,animation){
        var i;
        for(i=0;i<len;i+=1){
            registeredAnimations[i].animation.setSpeed(val, animation);
        }
    }

    function setDirection(val, animation){
        var i;
        for(i=0;i<len;i+=1){
            registeredAnimations[i].animation.setDirection(val, animation);
        }
    }

    function play(animation){
        var i;
        for(i=0;i<len;i+=1){
            registeredAnimations[i].animation.play(animation);
        }
    }
    function resume(nowTime) {
        var elapsedTime = nowTime - initTime;
        var i;
        for(i=0;i<len;i+=1){
            registeredAnimations[i].animation.advanceTime(elapsedTime);
        }
        initTime = nowTime;
        if(playingAnimationsNum && !_isFrozen) {
            window.requestAnimationFrame(resume);
        } else {
            _stopped = true;
        }
    }

    function first(nowTime){
        initTime = nowTime;
        window.requestAnimationFrame(resume);
    }

    function pause(animation) {
        var i;
        for(i=0;i<len;i+=1){
            registeredAnimations[i].animation.pause(animation);
        }
    }

    function goToAndStop(value,isFrame,animation) {
        var i;
        for(i=0;i<len;i+=1){
            registeredAnimations[i].animation.goToAndStop(value,isFrame,animation);
        }
    }

    function stop(animation) {
        var i;
        for(i=0;i<len;i+=1){
            registeredAnimations[i].animation.stop(animation);
        }
    }

    function togglePause(animation) {
        var i;
        for(i=0;i<len;i+=1){
            registeredAnimations[i].animation.togglePause(animation);
        }
    }

    function destroy(animation) {
        var i;
        for(i=(len-1);i>=0;i-=1){
            registeredAnimations[i].animation.destroy(animation);
        }
    }

    function searchAnimations(animationData, standalone, renderer){
        var animElements = [].concat([].slice.call(document.getElementsByClassName('lottie')),
                  [].slice.call(document.getElementsByClassName('bodymovin')));
        var i, len = animElements.length;
        for(i=0;i<len;i+=1){
            if(renderer){
                animElements[i].setAttribute('data-bm-type',renderer);
            }
            registerAnimation(animElements[i], animationData);
        }
        if(standalone && len === 0){
            if(!renderer){
                renderer = 'svg';
            }
            var body = document.getElementsByTagName('body')[0];
            body.innerHTML = '';
            var div = createTag('div');
            div.style.width = '100%';
            div.style.height = '100%';
            div.setAttribute('data-bm-type',renderer);
            body.appendChild(div);
            registerAnimation(div, animationData);
        }
    }

    function resize(){
        var i;
        for(i=0;i<len;i+=1){
            registeredAnimations[i].animation.resize();
        }
    }

    function activate(){
        if(!_isFrozen && playingAnimationsNum){
            if(_stopped) {
                window.requestAnimationFrame(first);
                _stopped = false;
            }
        }
    }

    function freeze() {
        _isFrozen = true;
    }

    function unfreeze() {
        _isFrozen = false;
        activate();
    }

    moduleOb.registerAnimation = registerAnimation;
    moduleOb.loadAnimation = loadAnimation;
    moduleOb.setSpeed = setSpeed;
    moduleOb.setDirection = setDirection;
    moduleOb.play = play;
    moduleOb.pause = pause;
    moduleOb.stop = stop;
    moduleOb.togglePause = togglePause;
    moduleOb.searchAnimations = searchAnimations;
    moduleOb.resize = resize;
    //moduleOb.start = start;
    moduleOb.goToAndStop = goToAndStop;
    moduleOb.destroy = destroy;
    moduleOb.freeze = freeze;
    moduleOb.unfreeze = unfreeze;
    moduleOb.getRegisteredAnimations = getRegisteredAnimations;
    return moduleOb;
}());

var AnimationItem = function () {
    this._cbs = [];
    this.name = '';
    this.path = '';
    this.isLoaded = false;
    this.currentFrame = 0;
    this.currentRawFrame = 0;
    this.totalFrames = 0;
    this.frameRate = 0;
    this.frameMult = 0;
    this.playSpeed = 1;
    this.playDirection = 1;
    this.playCount = 0;
    this.animationData = {};
    this.assets = [];
    this.isPaused = true;
    this.autoplay = false;
    this.loop = true;
    this.renderer = null;
    this.animationID = createElementID();
    this.assetsPath = '';
    this.timeCompleted = 0;
    this.segmentPos = 0;
    this.subframeEnabled = subframeEnabled;
    this.segments = [];
    this._idle = true;
    this._completedLoop = false;
    this.projectInterface = ProjectInterface();
    this.imagePreloader = new ImagePreloader();
};

extendPrototype([BaseEvent], AnimationItem);

AnimationItem.prototype.setParams = function(params) {
    if(params.context){
        this.context = params.context;
    }
    if(params.wrapper || params.container){
        this.wrapper = params.wrapper || params.container;
    }
    var animType = params.animType ? params.animType : params.renderer ? params.renderer : 'svg';
    switch(animType){
        case 'canvas':
            this.renderer = new CanvasRenderer(this, params.rendererSettings);
            break;
        case 'svg':
            this.renderer = new SVGRenderer(this, params.rendererSettings);
            break;
        default:
            this.renderer = new HybridRenderer(this, params.rendererSettings);
            break;
    }
    this.renderer.setProjectInterface(this.projectInterface);
    this.animType = animType;

    if(params.loop === '' || params.loop === null);else if(params.loop === false){
        this.loop = false;
    }else if(params.loop === true){
        this.loop = true;
    }else{
        this.loop = parseInt(params.loop);
    }
    this.autoplay = 'autoplay' in params ? params.autoplay : true;
    this.name = params.name ? params.name :  '';
    this.autoloadSegments = params.hasOwnProperty('autoloadSegments') ? params.autoloadSegments :  true;
    this.assetsPath = params.assetsPath;
    if(params.animationData){
        this.configAnimation(params.animationData);
    }else if(params.path){
        if(params.path.substr(-4) != 'json'){
            if (params.path.substr(-1, 1) != '/') {
                params.path += '/';
            }
            params.path += 'data.json';
        }

        if(params.path.lastIndexOf('\\') != -1){
            this.path = params.path.substr(0,params.path.lastIndexOf('\\')+1);
        }else{
            this.path = params.path.substr(0,params.path.lastIndexOf('/')+1);
        }
        this.fileName = params.path.substr(params.path.lastIndexOf('/')+1);
        this.fileName = this.fileName.substr(0,this.fileName.lastIndexOf('.json'));

        assetLoader.load(params.path, this.configAnimation.bind(this), function() {
            this.trigger('data_failed');
        }.bind(this));
    }
};

AnimationItem.prototype.setData = function (wrapper, animationData) {
    var params = {
        wrapper: wrapper,
        animationData: animationData ? (typeof animationData  === "object") ? animationData : JSON.parse(animationData) : null
    };
    var wrapperAttributes = wrapper.attributes;

    params.path = wrapperAttributes.getNamedItem('data-animation-path') ? wrapperAttributes.getNamedItem('data-animation-path').value : wrapperAttributes.getNamedItem('data-bm-path') ? wrapperAttributes.getNamedItem('data-bm-path').value :  wrapperAttributes.getNamedItem('bm-path') ? wrapperAttributes.getNamedItem('bm-path').value : '';
    params.animType = wrapperAttributes.getNamedItem('data-anim-type') ? wrapperAttributes.getNamedItem('data-anim-type').value : wrapperAttributes.getNamedItem('data-bm-type') ? wrapperAttributes.getNamedItem('data-bm-type').value : wrapperAttributes.getNamedItem('bm-type') ? wrapperAttributes.getNamedItem('bm-type').value :  wrapperAttributes.getNamedItem('data-bm-renderer') ? wrapperAttributes.getNamedItem('data-bm-renderer').value : wrapperAttributes.getNamedItem('bm-renderer') ? wrapperAttributes.getNamedItem('bm-renderer').value : 'canvas';

    var loop = wrapperAttributes.getNamedItem('data-anim-loop') ? wrapperAttributes.getNamedItem('data-anim-loop').value :  wrapperAttributes.getNamedItem('data-bm-loop') ? wrapperAttributes.getNamedItem('data-bm-loop').value :  wrapperAttributes.getNamedItem('bm-loop') ? wrapperAttributes.getNamedItem('bm-loop').value : '';
    if(loop === '');else if(loop === 'false'){
        params.loop = false;
    }else if(loop === 'true'){
        params.loop = true;
    }else{
        params.loop = parseInt(loop);
    }
    var autoplay = wrapperAttributes.getNamedItem('data-anim-autoplay') ? wrapperAttributes.getNamedItem('data-anim-autoplay').value :  wrapperAttributes.getNamedItem('data-bm-autoplay') ? wrapperAttributes.getNamedItem('data-bm-autoplay').value :  wrapperAttributes.getNamedItem('bm-autoplay') ? wrapperAttributes.getNamedItem('bm-autoplay').value : true;
    params.autoplay = autoplay !== "false";

    params.name = wrapperAttributes.getNamedItem('data-name') ? wrapperAttributes.getNamedItem('data-name').value :  wrapperAttributes.getNamedItem('data-bm-name') ? wrapperAttributes.getNamedItem('data-bm-name').value : wrapperAttributes.getNamedItem('bm-name') ? wrapperAttributes.getNamedItem('bm-name').value :  '';
    var prerender = wrapperAttributes.getNamedItem('data-anim-prerender') ? wrapperAttributes.getNamedItem('data-anim-prerender').value :  wrapperAttributes.getNamedItem('data-bm-prerender') ? wrapperAttributes.getNamedItem('data-bm-prerender').value :  wrapperAttributes.getNamedItem('bm-prerender') ? wrapperAttributes.getNamedItem('bm-prerender').value : '';

    if(prerender === 'false'){
        params.prerender = false;
    }
    this.setParams(params);
};

AnimationItem.prototype.includeLayers = function(data) {
    if(data.op > this.animationData.op){
        this.animationData.op = data.op;
        this.totalFrames = Math.floor(data.op - this.animationData.ip);
    }
    var layers = this.animationData.layers;
    var i, len = layers.length;
    var newLayers = data.layers;
    var j, jLen = newLayers.length;
    for(j=0;j<jLen;j+=1){
        i = 0;
        while(i<len){
            if(layers[i].id == newLayers[j].id){
                layers[i] = newLayers[j];
                break;
            }
            i += 1;
        }
    }
    if(data.chars || data.fonts){
        this.renderer.globalData.fontManager.addChars(data.chars);
        this.renderer.globalData.fontManager.addFonts(data.fonts, this.renderer.globalData.defs);
    }
    if(data.assets){
        len = data.assets.length;
        for(i = 0; i < len; i += 1){
            this.animationData.assets.push(data.assets[i]);
        }
    }
    this.animationData.__complete = false;
    dataManager.completeData(this.animationData,this.renderer.globalData.fontManager);
    this.renderer.includeLayers(data.layers);
    if(expressionsPlugin){
        expressionsPlugin.initExpressions(this);
    }
    this.loadNextSegment();
};

AnimationItem.prototype.loadNextSegment = function() {
    var segments = this.animationData.segments;
    if(!segments || segments.length === 0 || !this.autoloadSegments){
        this.trigger('data_ready');
        this.timeCompleted = this.totalFrames;
        return;
    }
    var segment = segments.shift();
    this.timeCompleted = segment.time * this.frameRate;
    var segmentPath = this.path+this.fileName+'_' + this.segmentPos + '.json';
    this.segmentPos += 1;
    assetLoader.load(segmentPath, this.includeLayers.bind(this), function() {
        this.trigger('data_failed');
    }.bind(this));
};

AnimationItem.prototype.loadSegments = function() {
    var segments = this.animationData.segments;
    if(!segments) {
        this.timeCompleted = this.totalFrames;
    }
    this.loadNextSegment();
};

AnimationItem.prototype.imagesLoaded = function() {
    this.trigger('loaded_images');
    this.checkLoaded();
};

AnimationItem.prototype.preloadImages = function() {
    this.imagePreloader.setAssetsPath(this.assetsPath);
    this.imagePreloader.setPath(this.path);
    this.imagePreloader.loadAssets(this.animationData.assets, this.imagesLoaded.bind(this));
};

AnimationItem.prototype.configAnimation = function (animData) {
    if(!this.renderer){
        return;
    }
    this.animationData = animData;
    this.totalFrames = Math.floor(this.animationData.op - this.animationData.ip);
    this.renderer.configAnimation(animData);
    if(!animData.assets){
        animData.assets = [];
    }
    this.renderer.searchExtraCompositions(animData.assets);

    this.assets = this.animationData.assets;
    this.frameRate = this.animationData.fr;
    this.firstFrame = Math.round(this.animationData.ip);
    this.frameMult = this.animationData.fr / 1000;
    this.trigger('config_ready');
    this.preloadImages();
    this.loadSegments();
    this.updaFrameModifier();
    this.waitForFontsLoaded();
};

AnimationItem.prototype.waitForFontsLoaded = function(){
    if(!this.renderer) {
        return;
    }
    if(this.renderer.globalData.fontManager.loaded()){
        this.checkLoaded();
    }else{
        setTimeout(this.waitForFontsLoaded.bind(this),20);
    }
};

AnimationItem.prototype.checkLoaded = function () {
    if (!this.isLoaded && this.renderer.globalData.fontManager.loaded() && (this.imagePreloader.loaded() || this.renderer.rendererType !== 'canvas')) {
        this.isLoaded = true;
        dataManager.completeData(this.animationData, this.renderer.globalData.fontManager);
        if(expressionsPlugin){
            expressionsPlugin.initExpressions(this);
        }
        this.renderer.initItems();
        setTimeout(function() {
            this.trigger('DOMLoaded');
        }.bind(this), 0);
        this.gotoFrame();
        if(this.autoplay){
            this.play();
        }
    }
};

AnimationItem.prototype.resize = function () {
    this.renderer.updateContainerSize();
};

AnimationItem.prototype.setSubframe = function(flag){
    this.subframeEnabled = flag ? true : false;
};

AnimationItem.prototype.gotoFrame = function () {
    this.currentFrame = this.subframeEnabled ? this.currentRawFrame : ~~this.currentRawFrame;

    if(this.timeCompleted !== this.totalFrames && this.currentFrame > this.timeCompleted){
        this.currentFrame = this.timeCompleted;
    }
    this.trigger('enterFrame');
    this.renderFrame();
};

AnimationItem.prototype.renderFrame = function () {
    if(this.isLoaded === false){
        return;
    }
    this.renderer.renderFrame(this.currentFrame + this.firstFrame);
};

AnimationItem.prototype.play = function (name) {
    if(name && this.name != name){
        return;
    }
    if(this.isPaused === true){
        this.isPaused = false;
        if(this._idle){
            this._idle = false;
            this.trigger('_active');
        }
    }
};

AnimationItem.prototype.pause = function (name) {
    if(name && this.name != name){
        return;
    }
    if(this.isPaused === false){
        this.isPaused = true;
        this._idle = true;
        this.trigger('_idle');
    }
};

AnimationItem.prototype.togglePause = function (name) {
    if(name && this.name != name){
        return;
    }
    if(this.isPaused === true){
        this.play();
    }else{
        this.pause();
    }
};

AnimationItem.prototype.stop = function (name) {
    if(name && this.name != name){
        return;
    }
    this.pause();
    this.playCount = 0;
    this._completedLoop = false;
    this.setCurrentRawFrameValue(0);
};

AnimationItem.prototype.goToAndStop = function (value, isFrame, name) {
    if(name && this.name != name){
        return;
    }
    if(isFrame){
        this.setCurrentRawFrameValue(value);
    }else{
        this.setCurrentRawFrameValue(value * this.frameModifier);
    }
    this.pause();
};

AnimationItem.prototype.goToAndPlay = function (value, isFrame, name) {
    this.goToAndStop(value, isFrame, name);
    this.play();
};

AnimationItem.prototype.advanceTime = function (value) {
    if (this.isPaused === true || this.isLoaded === false) {
        return;
    }
    var nextValue = this.currentRawFrame + value * this.frameModifier;
    var _isComplete = false;
    // Checking if nextValue > totalFrames - 1 for addressing non looping and looping animations.
    // If animation won't loop, it should stop at totalFrames - 1. If it will loop it should complete the last frame and then loop.
    if (nextValue >= this.totalFrames - 1 && this.frameModifier > 0) {
        if (!this.loop || this.playCount === this.loop) {
            if (!this.checkSegments(nextValue >  this.totalFrames ? nextValue % this.totalFrames : 0)) {
                _isComplete = true;
                nextValue = this.totalFrames - 1;
            }
        } else if (nextValue >= this.totalFrames) {
            this.playCount += 1;
            if (!this.checkSegments(nextValue % this.totalFrames)) {
                this.setCurrentRawFrameValue(nextValue % this.totalFrames);
                this._completedLoop = true;
                this.trigger('loopComplete');
            }
        } else {
            this.setCurrentRawFrameValue(nextValue);
        }
    } else if(nextValue < 0) {
        if (!this.checkSegments(nextValue % this.totalFrames)) {
            if (this.loop && !(this.playCount-- <= 0 && this.loop !== true)) {
                this.setCurrentRawFrameValue(this.totalFrames + (nextValue % this.totalFrames));
                if(!this._completedLoop) {
                    this._completedLoop = true;
                } else {
                    this.trigger('loopComplete');
                }
            } else {
                _isComplete = true;
                nextValue = 0;
            }
        }
    } else {
        this.setCurrentRawFrameValue(nextValue);
    }
    if (_isComplete) {
        this.setCurrentRawFrameValue(nextValue);
        this.pause();
        this.trigger('complete');
    }
};

AnimationItem.prototype.adjustSegment = function(arr, offset){
    this.playCount = 0;
    if(arr[1] < arr[0]){
        if(this.frameModifier > 0){
            if(this.playSpeed < 0){
                this.setSpeed(-this.playSpeed);
            } else {
                this.setDirection(-1);
            }
        }
        this.timeCompleted = this.totalFrames = arr[0] - arr[1];
        this.firstFrame = arr[1];
        this.setCurrentRawFrameValue(this.totalFrames - 0.001 - offset);
    } else if(arr[1] > arr[0]){
        if(this.frameModifier < 0){
            if(this.playSpeed < 0){
                this.setSpeed(-this.playSpeed);
            } else {
                this.setDirection(1);
            }
        }
        this.timeCompleted = this.totalFrames = arr[1] - arr[0];
        this.firstFrame = arr[0];
        this.setCurrentRawFrameValue(0.001 + offset);
    }
    this.trigger('segmentStart');
};
AnimationItem.prototype.setSegment = function (init,end) {
    var pendingFrame = -1;
    if(this.isPaused) {
        if (this.currentRawFrame + this.firstFrame < init) {
            pendingFrame = init;
        } else if (this.currentRawFrame + this.firstFrame > end) {
            pendingFrame = end - init;
        }
    }

    this.firstFrame = init;
    this.timeCompleted = this.totalFrames = end - init;
    if(pendingFrame !== -1) {
        this.goToAndStop(pendingFrame,true);
    }
};

AnimationItem.prototype.playSegments = function (arr, forceFlag) {
    if (forceFlag) {
        this.segments.length = 0;
    }
    if (typeof arr[0] === 'object') {
        var i, len = arr.length;
        for (i = 0; i < len; i += 1) {
            this.segments.push(arr[i]);
        }
    } else {
        this.segments.push(arr);
    }
    if (this.segments.length && forceFlag) {
        this.adjustSegment(this.segments.shift(), 0);
    }
    if (this.isPaused) {
        this.play();
    }
};

AnimationItem.prototype.resetSegments = function (forceFlag) {
    this.segments.length = 0;
    this.segments.push([this.animationData.ip,this.animationData.op]);
    //this.segments.push([this.animationData.ip*this.frameRate,Math.floor(this.animationData.op - this.animationData.ip+this.animationData.ip*this.frameRate)]);
    if (forceFlag) {
        this.checkSegments(0);
    }
};
AnimationItem.prototype.checkSegments = function(offset) {
    if (this.segments.length) {
        this.adjustSegment(this.segments.shift(), offset);
        return true;
    }
    return false;
};

AnimationItem.prototype.destroy = function (name) {
    if ((name && this.name != name) || !this.renderer) {
        return;
    }
    this.renderer.destroy();
    this.imagePreloader.destroy();
    this.trigger('destroy');
    this._cbs = null;
    this.onEnterFrame = this.onLoopComplete = this.onComplete = this.onSegmentStart = this.onDestroy = null;
    this.renderer = null;
};

AnimationItem.prototype.setCurrentRawFrameValue = function(value){
    this.currentRawFrame = value;
    this.gotoFrame();
};

AnimationItem.prototype.setSpeed = function (val) {
    this.playSpeed = val;
    this.updaFrameModifier();
};

AnimationItem.prototype.setDirection = function (val) {
    this.playDirection = val < 0 ? -1 : 1;
    this.updaFrameModifier();
};

AnimationItem.prototype.updaFrameModifier = function () {
    this.frameModifier = this.frameMult * this.playSpeed * this.playDirection;
};

AnimationItem.prototype.getPath = function () {
    return this.path;
};

AnimationItem.prototype.getAssetsPath = function (assetData) {
    var path = '';
    if(assetData.e) {
        path = assetData.p;
    } else if(this.assetsPath){
        var imagePath = assetData.p;
        if(imagePath.indexOf('images/') !== -1){
            imagePath = imagePath.split('/')[1];
        }
        path = this.assetsPath + imagePath;
    } else {
        path = this.path;
        path += assetData.u ? assetData.u : '';
        path += assetData.p;
    }
    return path;
};

AnimationItem.prototype.getAssetData = function (id) {
    var i = 0, len = this.assets.length;
    while (i < len) {
        if(id == this.assets[i].id){
            return this.assets[i];
        }
        i += 1;
    }
};

AnimationItem.prototype.hide = function () {
    this.renderer.hide();
};

AnimationItem.prototype.show = function () {
    this.renderer.show();
};

AnimationItem.prototype.getDuration = function (isFrame) {
    return isFrame ? this.totalFrames : this.totalFrames / this.frameRate;
};

AnimationItem.prototype.trigger = function(name){
    if(this._cbs && this._cbs[name]){
        switch(name){
            case 'enterFrame':
                this.triggerEvent(name,new BMEnterFrameEvent(name,this.currentFrame,this.totalFrames,this.frameModifier));
                break;
            case 'loopComplete':
                this.triggerEvent(name,new BMCompleteLoopEvent(name,this.loop,this.playCount,this.frameMult));
                break;
            case 'complete':
                this.triggerEvent(name,new BMCompleteEvent(name,this.frameMult));
                break;
            case 'segmentStart':
                this.triggerEvent(name,new BMSegmentStartEvent(name,this.firstFrame,this.totalFrames));
                break;
            case 'destroy':
                this.triggerEvent(name,new BMDestroyEvent(name,this));
                break;
            default:
                this.triggerEvent(name);
        }
    }
    if(name === 'enterFrame' && this.onEnterFrame){
        this.onEnterFrame.call(this,new BMEnterFrameEvent(name,this.currentFrame,this.totalFrames,this.frameMult));
    }
    if(name === 'loopComplete' && this.onLoopComplete){
        this.onLoopComplete.call(this,new BMCompleteLoopEvent(name,this.loop,this.playCount,this.frameMult));
    }
    if(name === 'complete' && this.onComplete){
        this.onComplete.call(this,new BMCompleteEvent(name,this.frameMult));
    }
    if(name === 'segmentStart' && this.onSegmentStart){
        this.onSegmentStart.call(this,new BMSegmentStartEvent(name,this.firstFrame,this.totalFrames));
    }
    if(name === 'destroy' && this.onDestroy){
        this.onDestroy.call(this,new BMDestroyEvent(name,this));
    }
};

var Expressions = (function(){
    var ob = {};
    ob.initExpressions = initExpressions;


    function initExpressions(animation){

    	var stackCount = 0;
    	var registers = [];

    	function pushExpression() {
			stackCount += 1;
    	}

    	function popExpression() {
			stackCount -= 1;
			if (stackCount === 0) {
				releaseInstances();
			}
    	}

    	function registerExpressionProperty(expression) {
    		if (registers.indexOf(expression) === -1) {
				registers.push(expression);
    		}
    	}

    	function releaseInstances() {
    		var i, len = registers.length;
    		for (i = 0; i < len; i += 1) {
				registers[i].release();
    		}
    		registers.length = 0;
    	}

        animation.renderer.compInterface = CompExpressionInterface(animation.renderer);
        animation.renderer.globalData.projectInterface.registerComposition(animation.renderer);
        animation.renderer.globalData.pushExpression = pushExpression;
        animation.renderer.globalData.popExpression = popExpression;
        animation.renderer.globalData.registerExpressionProperty = registerExpressionProperty;
    }
   return ob;
}());

expressionsPlugin = Expressions;

var ExpressionManager = (function(){
    var ob = {};
    var Math = BMMath;

    var easeInBez = BezierFactory.getBezierEasing(0.333,0,.833,.833, 'easeIn').get;
    var easeOutBez = BezierFactory.getBezierEasing(0.167,0.167,.667,1, 'easeOut').get;
    var easeInOutBez = BezierFactory.getBezierEasing(.33,0,.667,1, 'easeInOut').get;

    function initiateExpression(elem,data,property){
        var val = data.x;
        var needsVelocity = /velocity(?![\w\d])/.test(val);
        var _needsRandom = val.indexOf('random') !== -1;
        var elemType = elem.data.ty;
        var transform,content,effect;
        var thisProperty = property;
        thisProperty.valueAtTime = thisProperty.getValueAtTime;
        Object.defineProperty(thisProperty, 'value', {
            get: function() {
                return thisProperty.v
            }
        });
        elem.comp.frameDuration = 1/elem.comp.globalData.frameRate;
        elem.comp.displayStartTime = 0;
        var inPoint = elem.data.ip/elem.comp.globalData.frameRate;
        var outPoint = elem.data.op/elem.comp.globalData.frameRate;
        var width = elem.data.sw ? elem.data.sw : 0;
        var height = elem.data.sh ? elem.data.sh : 0;
        var name = elem.data.nm;
        var loopIn, loopOut, smooth;
        var toWorld,fromWorld,fromComp,toComp,anchorPoint, thisLayer,thisComp,mask,valueAtTime,velocityAtTime;
        var __expression_functions = [];
        if(data.xf) {
            var i, len = data.xf.length;
            for(i = 0; i < len; i += 1) {
                __expression_functions[i] = eval('(function(){ return ' + data.xf[i] + '}())');
            }
        }

        var scoped_bm_rt;
        var expression_function = eval('[function _expression_function(){' + val+';scoped_bm_rt=$bm_rt}' + ']')[0];
        var numKeys = property.kf ? data.k.length : 0;

        var active = !this.data || this.data.hd !== true;

        var wiggle = function wiggle(freq,amp){
            var i,j, len = this.pv.length ? this.pv.length : 1;
            var addedAmps = createTypedArray('float32', len);
            freq = 5;
            var iterations = Math.floor(time*freq);
            i = 0;
            j = 0;
            while(i<iterations){
                //var rnd = BMMath.random();
                for(j=0;j<len;j+=1){
                    addedAmps[j] += -amp + amp*2*BMMath.random();
                    //addedAmps[j] += -amp + amp*2*rnd;
                }
                i += 1;
            }
            //var rnd2 = BMMath.random();
            var periods = time*freq;
            var perc = periods - Math.floor(periods);
            var arr = createTypedArray('float32', len);
            if(len>1){
                for(j=0;j<len;j+=1){
                    arr[j] = this.pv[j] + addedAmps[j] + (-amp + amp*2*BMMath.random())*perc;
                    //arr[j] = this.pv[j] + addedAmps[j] + (-amp + amp*2*rnd)*perc;
                    //arr[i] = this.pv[i] + addedAmp + amp1*perc + amp2*(1-perc);
                }
                return arr;
            } else {
                return this.pv + addedAmps[0] + (-amp + amp*2*BMMath.random())*perc;
            }
        }.bind(this);

        if(thisProperty.loopIn) {
            loopIn = thisProperty.loopIn.bind(thisProperty);
        }

        if(thisProperty.loopOut) {
            loopOut = thisProperty.loopOut.bind(thisProperty);
        }

        if(thisProperty.smooth) {
            smooth = thisProperty.smooth.bind(thisProperty);
        }

        if(this.getValueAtTime) {
            valueAtTime = this.getValueAtTime.bind(this);
        }

        if(this.getVelocityAtTime) {
            velocityAtTime = this.getVelocityAtTime.bind(this);
        }

        var comp = elem.comp.globalData.projectInterface.bind(elem.comp.globalData.projectInterface);

        function seedRandom(seed){
            BMMath.seedrandom(randSeed + seed);
        }

        var time, velocity, value, text, textIndex, textTotal, selectorValue;
        var index = elem.data.ind;
        var hasParent = !!(elem.hierarchy && elem.hierarchy.length);
        var parent;
        var randSeed = Math.floor(Math.random()*1000000);
        var globalData = elem.globalData;
        function executeExpression(_value) {
            // globalData.pushExpression();
            value = _value;
            if (_needsRandom) {
                seedRandom(randSeed);
            }
            if (this.frameExpressionId === elem.globalData.frameId && this.propType !== 'textSelector') {
                return value;
            }
            if(this.propType === 'textSelector'){
                textIndex = this.textIndex;
                textTotal = this.textTotal;
                selectorValue = this.selectorValue;
            }
            if (!thisLayer) {
                text = elem.layerInterface.text;
                thisLayer = elem.layerInterface;
                thisComp = elem.comp.compInterface;
                toWorld = thisLayer.toWorld.bind(thisLayer);
                fromWorld = thisLayer.fromWorld.bind(thisLayer);
                fromComp = thisLayer.fromComp.bind(thisLayer);
                toComp = thisLayer.toComp.bind(thisLayer);
                mask = thisLayer.mask ? thisLayer.mask.bind(thisLayer) : null;
            }
            if (!transform) {
                transform = elem.layerInterface("ADBE Transform Group");
                if(transform) {
                    anchorPoint = transform.anchorPoint;
                    /*position = transform.position;
                    rotation = transform.rotation;
                    scale = transform.scale;*/
                }
            }
            
            if (elemType === 4 && !content) {
                content = thisLayer("ADBE Root Vectors Group");
            }
            if (!effect) {
                effect = thisLayer(4);
            }
            hasParent = !!(elem.hierarchy && elem.hierarchy.length);
            if (hasParent && !parent) {
                parent = elem.hierarchy[0].layerInterface;
            }
            time = this.comp.renderedFrame/this.comp.globalData.frameRate;
            if (needsVelocity) {
                velocity = velocityAtTime(time);
            }
            expression_function();
            this.frameExpressionId = elem.globalData.frameId;


            //TODO: Check if it's possible to return on ShapeInterface the .v value
            if (scoped_bm_rt.propType === "shape") {
                scoped_bm_rt = scoped_bm_rt.v;
            }
            // globalData.popExpression();
            return scoped_bm_rt;
        }
        return executeExpression;
    }

    ob.initiateExpression = initiateExpression;
    return ob;
}());
var expressionHelpers = (function(){

    function searchExpressions(elem,data,prop){
        if(data.x){
            prop.k = true;
            prop.x = true;
            prop.initiateExpression = ExpressionManager.initiateExpression;
            prop.effectsSequence.push(prop.initiateExpression(elem,data,prop).bind(prop));
        }
    }

    function getValueAtTime(frameNum) {
        frameNum *= this.elem.globalData.frameRate;
        frameNum -= this.offsetTime;
        if(frameNum !== this._cachingAtTime.lastFrame) {
            this._cachingAtTime.lastIndex = this._cachingAtTime.lastFrame < frameNum ? this._cachingAtTime.lastIndex : 0;
            this._cachingAtTime.value = this.interpolateValue(frameNum, this._cachingAtTime);
            this._cachingAtTime.lastFrame = frameNum;
        }
        return this._cachingAtTime.value;

    }

    function getSpeedAtTime(frameNum) {
        var delta = -0.01;
        var v1 = this.getValueAtTime(frameNum);
        var v2 = this.getValueAtTime(frameNum + delta);
        var speed = 0;
        if(v1.length){
            var i;
            for(i=0;i<v1.length;i+=1){
                speed += Math.pow(v2[i] - v1[i], 2);
            }
            speed = Math.sqrt(speed) * 100;
        } else {
            speed = 0;
        }
        return speed;
    }

    function getVelocityAtTime(frameNum) {
        if(this.vel !== undefined){
            return this.vel;
        }
        var delta = -0.001;
        //frameNum += this.elem.data.st;
        var v1 = this.getValueAtTime(frameNum);
        var v2 = this.getValueAtTime(frameNum + delta);
        var velocity;
        if(v1.length){
            velocity = createTypedArray('float32', v1.length);
            var i;
            for(i=0;i<v1.length;i+=1){
                //removing frameRate
                //if needed, don't add it here
                //velocity[i] = this.elem.globalData.frameRate*((v2[i] - v1[i])/delta);
                velocity[i] = (v2[i] - v1[i])/delta;
            }
        } else {
            velocity = (v2 - v1)/delta;
        }
        return velocity;
    }

    function getStaticValueAtTime() {
        return this.pv;
    }

    function setGroupProperty(propertyGroup){
        this.propertyGroup = propertyGroup;
    }

	return {
		searchExpressions: searchExpressions,
		getSpeedAtTime: getSpeedAtTime,
		getVelocityAtTime: getVelocityAtTime,
		getValueAtTime: getValueAtTime,
		getStaticValueAtTime: getStaticValueAtTime,
		setGroupProperty: setGroupProperty,
	}
}());
(function addPropertyDecorator() {

    function loopOut(type,duration,durationFlag){
        if(!this.k || !this.keyframes){
            return this.pv;
        }
        type = type ? type.toLowerCase() : '';
        var currentFrame = this.comp.renderedFrame;
        var keyframes = this.keyframes;
        var lastKeyFrame = keyframes[keyframes.length - 1].t;
        if(currentFrame<=lastKeyFrame){
            return this.pv;
        }else{
            var cycleDuration, firstKeyFrame;
            if(!durationFlag){
                if(!duration || duration > keyframes.length - 1){
                    duration = keyframes.length - 1;
                }
                firstKeyFrame = keyframes[keyframes.length - 1 - duration].t;
                cycleDuration = lastKeyFrame - firstKeyFrame;
            } else {
                if(!duration){
                    cycleDuration = Math.max(0,lastKeyFrame - this.elem.data.ip);
                } else {
                    cycleDuration = Math.abs(lastKeyFrame - elem.comp.globalData.frameRate*duration);
                }
                firstKeyFrame = lastKeyFrame - cycleDuration;
            }
            var i, len, ret;
            if(type === 'pingpong') {
                var iterations = Math.floor((currentFrame - firstKeyFrame)/cycleDuration);
                if(iterations % 2 !== 0){
                    return this.getValueAtTime(((cycleDuration - (currentFrame - firstKeyFrame) % cycleDuration +  firstKeyFrame)) / this.comp.globalData.frameRate, 0);
                }
            } else if(type === 'offset'){
                var initV = this.getValueAtTime(firstKeyFrame / this.comp.globalData.frameRate, 0);
                var endV = this.getValueAtTime(lastKeyFrame / this.comp.globalData.frameRate, 0);
                var current = this.getValueAtTime(((currentFrame - firstKeyFrame) % cycleDuration +  firstKeyFrame) / this.comp.globalData.frameRate, 0);
                var repeats = Math.floor((currentFrame - firstKeyFrame)/cycleDuration);
                if(this.pv.length){
                    ret = new Array(initV.length);
                    len = ret.length;
                    for(i=0;i<len;i+=1){
                        ret[i] = (endV[i]-initV[i])*repeats + current[i];
                    }
                    return ret;
                }
                return (endV-initV)*repeats + current;
            } else if(type === 'continue'){
                var lastValue = this.getValueAtTime(lastKeyFrame / this.comp.globalData.frameRate, 0);
                var nextLastValue = this.getValueAtTime((lastKeyFrame - 0.001) / this.comp.globalData.frameRate, 0);
                if(this.pv.length){
                    ret = new Array(lastValue.length);
                    len = ret.length;
                    for(i=0;i<len;i+=1){
                        ret[i] = lastValue[i] + (lastValue[i]-nextLastValue[i])*((currentFrame - lastKeyFrame)/ this.comp.globalData.frameRate)/0.0005;
                    }
                    return ret;
                }
                return lastValue + (lastValue-nextLastValue)*(((currentFrame - lastKeyFrame))/0.001);
            }
            return this.getValueAtTime((((currentFrame - firstKeyFrame) % cycleDuration +  firstKeyFrame)) / this.comp.globalData.frameRate, 0);
        }
    }

    function loopIn(type,duration, durationFlag) {
        if(!this.k){
            return this.pv;
        }
        type = type ? type.toLowerCase() : '';
        var currentFrame = this.comp.renderedFrame;
        var keyframes = this.keyframes;
        var firstKeyFrame = keyframes[0].t;
        if(currentFrame>=firstKeyFrame){
            return this.pv;
        }else{
            var cycleDuration, lastKeyFrame;
            if(!durationFlag){
                if(!duration || duration > keyframes.length - 1){
                    duration = keyframes.length - 1;
                }
                lastKeyFrame = keyframes[duration].t;
                cycleDuration = lastKeyFrame - firstKeyFrame;
            } else {
                if(!duration){
                    cycleDuration = Math.max(0,this.elem.data.op - firstKeyFrame);
                } else {
                    cycleDuration = Math.abs(elem.comp.globalData.frameRate*duration);
                }
                lastKeyFrame = firstKeyFrame + cycleDuration;
            }
            var i, len, ret;
            if(type === 'pingpong') {
                var iterations = Math.floor((firstKeyFrame - currentFrame)/cycleDuration);
                if(iterations % 2 === 0){
                    return this.getValueAtTime((((firstKeyFrame - currentFrame)%cycleDuration +  firstKeyFrame)) / this.comp.globalData.frameRate, 0);
                }
            } else if(type === 'offset'){
                var initV = this.getValueAtTime(firstKeyFrame / this.comp.globalData.frameRate, 0);
                var endV = this.getValueAtTime(lastKeyFrame / this.comp.globalData.frameRate, 0);
                var current = this.getValueAtTime((cycleDuration - (firstKeyFrame - currentFrame)%cycleDuration +  firstKeyFrame) / this.comp.globalData.frameRate, 0);
                var repeats = Math.floor((firstKeyFrame - currentFrame)/cycleDuration)+1;
                if(this.pv.length){
                    ret = new Array(initV.length);
                    len = ret.length;
                    for(i=0;i<len;i+=1){
                        ret[i] = current[i]-(endV[i]-initV[i])*repeats;
                    }
                    return ret;
                }
                return current-(endV-initV)*repeats;
            } else if(type === 'continue'){
                var firstValue = this.getValueAtTime(firstKeyFrame / this.comp.globalData.frameRate, 0);
                var nextFirstValue = this.getValueAtTime((firstKeyFrame + 0.001) / this.comp.globalData.frameRate, 0);
                if(this.pv.length){
                    ret = new Array(firstValue.length);
                    len = ret.length;
                    for(i=0;i<len;i+=1){
                        ret[i] = firstValue[i] + (firstValue[i]-nextFirstValue[i])*(firstKeyFrame - currentFrame)/0.001;
                    }
                    return ret;
                }
                return firstValue + (firstValue-nextFirstValue)*(firstKeyFrame - currentFrame)/0.001;
            }
            return this.getValueAtTime(((cycleDuration - (firstKeyFrame - currentFrame) % cycleDuration +  firstKeyFrame)) / this.comp.globalData.frameRate, 0);
        }
    }

    function smooth(width, samples) {
        if (!this.k){
            return this.pv;
        }
        width = (width || 0.4) * 0.5;
        samples = Math.floor(samples || 5);
        if (samples <= 1) {
            return this.pv;
        }
        var currentTime = this.comp.renderedFrame / this.comp.globalData.frameRate;
        var initFrame = currentTime - width;
        var endFrame = currentTime + width;
        var sampleFrequency = samples > 1 ? (endFrame - initFrame) / (samples - 1) : 1;
        var i = 0, j = 0;
        var value;
        if (this.pv.length) {
            value = createTypedArray('float32', this.pv.length);
        } else {
            value = 0;
        }
        var sampleValue;
        while (i < samples) {
            sampleValue = this.getValueAtTime(initFrame + i * sampleFrequency);
            if(this.pv.length) {
                for (j = 0; j < this.pv.length; j += 1) {
                    value[j] += sampleValue[j];
                }
            } else {
                value += sampleValue;
            }
            i += 1;
        }
        if(this.pv.length) {
            for (j = 0; j < this.pv.length; j += 1) {
                value[j] /= samples;
            }
        } else {
            value /= samples;
        }
        return value;
    }

    function getTransformValueAtTime(time) {
        console.warn('Transform at time not supported');
    }

    function getTransformStaticValueAtTime(time) {

    }

    var getTransformProperty = TransformPropertyFactory.getTransformProperty;
    TransformPropertyFactory.getTransformProperty = function(elem, data, container) {
        var prop = getTransformProperty(elem, data, container);
        if(prop.dynamicProperties.length) {
            prop.getValueAtTime = getTransformValueAtTime.bind(prop);
        } else {
            prop.getValueAtTime = getTransformStaticValueAtTime.bind(prop);
        }
        prop.setGroupProperty = expressionHelpers.setGroupProperty;
        return prop;
    };

    var propertyGetProp = PropertyFactory.getProp;
    PropertyFactory.getProp = function(elem,data,type, mult, container){
        var prop = propertyGetProp(elem,data,type, mult, container);
        //prop.getVelocityAtTime = getVelocityAtTime;
        //prop.loopOut = loopOut;
        //prop.loopIn = loopIn;
        if(prop.kf){
            prop.getValueAtTime = expressionHelpers.getValueAtTime.bind(prop);
        } else {
            prop.getValueAtTime = expressionHelpers.getStaticValueAtTime.bind(prop);
        }
        prop.setGroupProperty = expressionHelpers.setGroupProperty;
        prop.loopOut = loopOut;
        prop.loopIn = loopIn;
        prop.smooth = smooth;
        prop.getVelocityAtTime = expressionHelpers.getVelocityAtTime.bind(prop);
        prop.getSpeedAtTime = expressionHelpers.getSpeedAtTime.bind(prop);
        prop.numKeys = data.a === 1 ? data.k.length : 0;
        prop.propertyIndex = data.ix;
        var value = 0;
        if(type !== 0) {
            value = createTypedArray('float32', data.a === 1 ?  data.k[0].s.length : data.k.length);
        }
        prop._cachingAtTime = {
            lastFrame: initialDefaultFrame,
            lastIndex: 0,
            value: value
        };
        expressionHelpers.searchExpressions(elem,data,prop);
        if(prop.k){
            container.addDynamicProperty(prop);
        }

        return prop;
    };

    function getShapeValueAtTime(frameNum) {
        //For now this caching object is created only when needed instead of creating it when the shape is initialized.
        if (!this._cachingAtTime) {
            this._cachingAtTime = {
                shapeValue: shape_pool.clone(this.pv),
                lastIndex: 0,
                lastTime: initialDefaultFrame
            };
        }
        
        frameNum *= this.elem.globalData.frameRate;
        frameNum -= this.offsetTime;
        if(frameNum !== this._cachingAtTime.lastTime) {
            this._cachingAtTime.lastIndex = this._cachingAtTime.lastTime < frameNum ? this._caching.lastIndex : 0;
            this._cachingAtTime.lastTime = frameNum;
            this.interpolateShape(frameNum, this._cachingAtTime.shapeValue, this._cachingAtTime);
        }
        return this._cachingAtTime.shapeValue;
    }

    var ShapePropertyConstructorFunction = ShapePropertyFactory.getConstructorFunction();
    var KeyframedShapePropertyConstructorFunction = ShapePropertyFactory.getKeyframedConstructorFunction();

    function ShapeExpressions(){}
    ShapeExpressions.prototype = {
        vertices: function(prop, time){
            if (this.k) {
                this.getValue();
            }
            var shapePath = this.v;
            if(time !== undefined) {
                shapePath = this.getValueAtTime(time, 0);
            }
            var i, len = shapePath._length;
            var vertices = shapePath[prop];
            var points = shapePath.v;
            var arr = createSizedArray(len);
            for(i = 0; i < len; i += 1) {
                if(prop === 'i' || prop === 'o') {
                    arr[i] = [vertices[i][0] - points[i][0], vertices[i][1] - points[i][1]];
                } else {
                    arr[i] = [vertices[i][0], vertices[i][1]];
                }
                
            }
            return arr;
        },
        points: function(time){
            return this.vertices('v', time);
        },
        inTangents: function(time){
            return this.vertices('i', time);
        },
        outTangents: function(time){
            return this.vertices('o', time);
        },
        isClosed: function(){
            return this.v.c;
        },
        pointOnPath: function(perc, time){
            var shapePath = this.v;
            if(time !== undefined) {
                shapePath = this.getValueAtTime(time, 0);
            }
            if(!this._segmentsLength) {
                this._segmentsLength = bez.getSegmentsLength(shapePath);
            }

            var segmentsLength = this._segmentsLength;
            var lengths = segmentsLength.lengths;
            var lengthPos = segmentsLength.totalLength * perc;
            var i = 0, len = lengths.length;
            var accumulatedLength = 0, pt;
            while(i < len) {
                if(accumulatedLength + lengths[i].addedLength > lengthPos) {
                    var initIndex = i;
                    var endIndex = (shapePath.c && i === len - 1) ? 0 : i + 1;
                    var segmentPerc = (lengthPos - accumulatedLength)/lengths[i].addedLength;
                    pt = bez.getPointInSegment(shapePath.v[initIndex], shapePath.v[endIndex], shapePath.o[initIndex], shapePath.i[endIndex], segmentPerc, lengths[i]);
                    break;
                } else {
                    accumulatedLength += lengths[i].addedLength;
                }
                i += 1;
            }
            if(!pt){
                pt = shapePath.c ? [shapePath.v[0][0],shapePath.v[0][1]]:[shapePath.v[shapePath._length-1][0],shapePath.v[shapePath._length-1][1]];
            }
            return pt;
        },
        vectorOnPath: function(perc, time, vectorType){
            //perc doesn't use triple equality because it can be a Number object as well as a primitive.
            perc = perc == 1 ? this.v.c ? 0 : 0.999 : perc;
            var pt1 = this.pointOnPath(perc, time);
            var pt2 = this.pointOnPath(perc + 0.001, time);
            var xLength = pt2[0] - pt1[0];
            var yLength = pt2[1] - pt1[1];
            var magnitude = Math.sqrt(Math.pow(xLength,2) + Math.pow(yLength,2));
            var unitVector = vectorType === 'tangent' ? [xLength/magnitude, yLength/magnitude] : [-yLength/magnitude, xLength/magnitude];
            return unitVector;
        },
        tangentOnPath: function(perc, time){
            return this.vectorOnPath(perc, time, 'tangent');
        },
        normalOnPath: function(perc, time){
            return this.vectorOnPath(perc, time, 'normal');
        },
        setGroupProperty: expressionHelpers.setGroupProperty,
        getValueAtTime: expressionHelpers.getStaticValueAtTime
    };
    extendPrototype([ShapeExpressions], ShapePropertyConstructorFunction);
    extendPrototype([ShapeExpressions], KeyframedShapePropertyConstructorFunction);
    KeyframedShapePropertyConstructorFunction.prototype.getValueAtTime = getShapeValueAtTime;
    KeyframedShapePropertyConstructorFunction.prototype.initiateExpression = ExpressionManager.initiateExpression;

    var propertyGetShapeProp = ShapePropertyFactory.getShapeProp;
    ShapePropertyFactory.getShapeProp = function(elem,data,type, arr, trims){
        var prop = propertyGetShapeProp(elem,data,type, arr, trims);
        prop.propertyIndex = data.ix;
        prop.lock = false;
        if(type === 3){
            expressionHelpers.searchExpressions(elem,data.pt,prop);
        } else if(type === 4){
            expressionHelpers.searchExpressions(elem,data.ks,prop);
        }
        if(prop.k){
            elem.addDynamicProperty(prop);
        }
        return prop;
    };
}());
(function addDecorator() {

    function searchExpressions(){
        if(this.data.d.x){
            this.calculateExpression = ExpressionManager.initiateExpression.bind(this)(this.elem,this.data.d,this);
            this.addEffect(this.getExpressionValue.bind(this));
            return true;
        }
    }

    TextProperty.prototype.getExpressionValue = function(currentValue, text) {
        var newValue = this.calculateExpression(text);
        if(currentValue.t !== newValue) {
            var newData = {};
            this.copyData(newData, currentValue);
            newData.t = newValue.toString();
            newData.__complete = false;
            return newData;
        }
        return currentValue;
    };

    TextProperty.prototype.searchProperty = function(){

        var isKeyframed = this.searchKeyframes();
        var hasExpressions = this.searchExpressions();
        this.kf = isKeyframed || hasExpressions;
        return this.kf;
    };

    TextProperty.prototype.searchExpressions = searchExpressions;
    
}());
var ShapeExpressionInterface = (function(){

    function iterateElements(shapes,view, propertyGroup){
        var arr = [];
        var i, len = shapes ? shapes.length : 0;
        for(i=0;i<len;i+=1){
            if(shapes[i].ty == 'gr'){
                arr.push(groupInterfaceFactory(shapes[i],view[i],propertyGroup));
            }else if(shapes[i].ty == 'fl'){
                arr.push(fillInterfaceFactory(shapes[i],view[i],propertyGroup));
            }else if(shapes[i].ty == 'st'){
                arr.push(strokeInterfaceFactory(shapes[i],view[i],propertyGroup));
            }else if(shapes[i].ty == 'tm'){
                arr.push(trimInterfaceFactory(shapes[i],view[i],propertyGroup));
            }else if(shapes[i].ty == 'tr');else if(shapes[i].ty == 'el'){
                arr.push(ellipseInterfaceFactory(shapes[i],view[i],propertyGroup));
            }else if(shapes[i].ty == 'sr'){
                arr.push(starInterfaceFactory(shapes[i],view[i],propertyGroup));
            } else if(shapes[i].ty == 'sh'){
                arr.push(pathInterfaceFactory(shapes[i],view[i],propertyGroup));
            } else if(shapes[i].ty == 'rc'){
                arr.push(rectInterfaceFactory(shapes[i],view[i],propertyGroup));
            } else if(shapes[i].ty == 'rd'){
                arr.push(roundedInterfaceFactory(shapes[i],view[i],propertyGroup));
            } else if(shapes[i].ty == 'rp'){
                arr.push(repeaterInterfaceFactory(shapes[i],view[i],propertyGroup));
            }
        }
        return arr;
    }

    function contentsInterfaceFactory(shape,view, propertyGroup){
       var interfaces;
       var interfaceFunction = function _interfaceFunction(value){
           var i = 0, len = interfaces.length;
            while(i<len){
                if(interfaces[i]._name === value || interfaces[i].mn === value || interfaces[i].propertyIndex === value || interfaces[i].ix === value || interfaces[i].ind === value){
                   return interfaces[i];
                }
                i+=1;
            }
            if(typeof value === 'number'){
               return interfaces[value-1];
            }
       };
       interfaceFunction.propertyGroup = function(val){
           if(val === 1){
               return interfaceFunction;
           } else{
               return propertyGroup(val-1);
           }
       };
       interfaces = iterateElements(shape.it, view.it, interfaceFunction.propertyGroup);
       interfaceFunction.numProperties = interfaces.length;
       interfaceFunction.propertyIndex = shape.cix;
       interfaceFunction._name = shape.nm;

       return interfaceFunction;
   }

    function groupInterfaceFactory(shape,view, propertyGroup){
        var interfaceFunction = function _interfaceFunction(value){
            switch(value){
                case 'ADBE Vectors Group':
                case 'Contents':
                case 2:
                    return interfaceFunction.content;
                //Not necessary for now. Keeping them here in case a new case appears
                //case 'ADBE Vector Transform Group':
                //case 3:
                default:
                    return interfaceFunction.transform;
            }
        };
        interfaceFunction.propertyGroup = function(val){
            if(val === 1){
                return interfaceFunction;
            } else{
                return propertyGroup(val-1);
            }
        };
        var content = contentsInterfaceFactory(shape,view,interfaceFunction.propertyGroup);
        var transformInterface = transformInterfaceFactory(shape.it[shape.it.length - 1],view.it[view.it.length - 1],interfaceFunction.propertyGroup);
        interfaceFunction.content = content;
        interfaceFunction.transform = transformInterface;
        Object.defineProperty(interfaceFunction, '_name', {
            get: function(){
                return shape.nm;
            }
        });
        //interfaceFunction.content = interfaceFunction;
        interfaceFunction.numProperties = shape.np;
        interfaceFunction.propertyIndex = shape.ix;
        interfaceFunction.nm = shape.nm;
        interfaceFunction.mn = shape.mn;
        return interfaceFunction;
    }

    function fillInterfaceFactory(shape,view,propertyGroup){
        function interfaceFunction(val){
            if(val === 'Color' || val === 'color'){
                return interfaceFunction.color;
            } else if(val === 'Opacity' || val === 'opacity'){
                return interfaceFunction.opacity;
            }
        }
        Object.defineProperties(interfaceFunction, {
            'color': {
                get: ExpressionPropertyInterface(view.c)
            },
            'opacity': {
                get: ExpressionPropertyInterface(view.o)
            },
            '_name': { value: shape.nm },
            'mn': { value: shape.mn }
        });

        view.c.setGroupProperty(propertyGroup);
        view.o.setGroupProperty(propertyGroup);
        return interfaceFunction;
    }

    function strokeInterfaceFactory(shape,view,propertyGroup){
        function _propertyGroup(val){
            if(val === 1){
                return ob;
            } else{
                return propertyGroup(val-1);
            }
        }
        function _dashPropertyGroup(val){
            if(val === 1){
                return dashOb;
            } else{
                return _propertyGroup(val-1);
            }
        }
        function addPropertyToDashOb(i) {
            Object.defineProperty(dashOb, shape.d[i].nm, {
                get: ExpressionPropertyInterface(view.d.dataProps[i].p)
            });
        }
        var i, len = shape.d ? shape.d.length : 0;
        var dashOb = {};
        for (i = 0; i < len; i += 1) {
            addPropertyToDashOb(i);
            view.d.dataProps[i].p.setGroupProperty(_dashPropertyGroup);
        }

        function interfaceFunction(val){
            if(val === 'Color' || val === 'color'){
                return interfaceFunction.color;
            } else if(val === 'Opacity' || val === 'opacity'){
                return interfaceFunction.opacity;
            } else if(val === 'Stroke Width' || val === 'stroke width'){
                return interfaceFunction.strokeWidth;
            }
        }
        Object.defineProperties(interfaceFunction, {
            'color': {
                get: ExpressionPropertyInterface(view.c)
            },
            'opacity': {
                get: ExpressionPropertyInterface(view.o)
            },
            'strokeWidth': {
                get: ExpressionPropertyInterface(view.w)
            },
            'dash': {
                get: function() {
                    return dashOb;
                }
            },
            '_name': { value: shape.nm },
            'mn': { value: shape.mn }
        });

        view.c.setGroupProperty(_propertyGroup);
        view.o.setGroupProperty(_propertyGroup);
        view.w.setGroupProperty(_propertyGroup);
        return interfaceFunction;
    }

    function trimInterfaceFactory(shape,view,propertyGroup){
        function _propertyGroup(val){
            if(val == 1){
                return interfaceFunction;
            } else {
                return propertyGroup(--val);
            }
        }
        interfaceFunction.propertyIndex = shape.ix;

        view.s.setGroupProperty(_propertyGroup);
        view.e.setGroupProperty(_propertyGroup);
        view.o.setGroupProperty(_propertyGroup);

        function interfaceFunction(val){
            if(val === shape.e.ix || val === 'End' || val === 'end'){
                return interfaceFunction.end;
            }
            if(val === shape.s.ix){
                return interfaceFunction.start;
            }
            if(val === shape.o.ix){
                return interfaceFunction.offset;
            }
        }
        interfaceFunction.propertyIndex = shape.ix;
        interfaceFunction.propertyGroup = propertyGroup;

        Object.defineProperties(interfaceFunction, {
            'start': {
                get: ExpressionPropertyInterface(view.s)
            },
            'end': {
                get: ExpressionPropertyInterface(view.e)
            },
            'offset': {
                get: ExpressionPropertyInterface(view.o)
            },
            '_name': { value: shape.nm }
        });
        interfaceFunction.mn = shape.mn;
        return interfaceFunction;
    }

    function transformInterfaceFactory(shape,view,propertyGroup){
        function _propertyGroup(val){
            if(val == 1){
                return interfaceFunction;
            } else {
                return propertyGroup(--val);
            }
        }
        view.transform.mProps.o.setGroupProperty(_propertyGroup);
        view.transform.mProps.p.setGroupProperty(_propertyGroup);
        view.transform.mProps.a.setGroupProperty(_propertyGroup);
        view.transform.mProps.s.setGroupProperty(_propertyGroup);
        view.transform.mProps.r.setGroupProperty(_propertyGroup);
        if(view.transform.mProps.sk){
            view.transform.mProps.sk.setGroupProperty(_propertyGroup);
            view.transform.mProps.sa.setGroupProperty(_propertyGroup);
        }
        view.transform.op.setGroupProperty(_propertyGroup);

        function interfaceFunction(value){
            if(shape.a.ix === value || value === 'Anchor Point'){
                return interfaceFunction.anchorPoint;
            }
            if(shape.o.ix === value || value === 'Opacity'){
                return interfaceFunction.opacity;
            }
            if(shape.p.ix === value || value === 'Position'){
                return interfaceFunction.position;
            }
            if(shape.r.ix === value || value === 'Rotation' || value === 'ADBE Vector Rotation'){
                return interfaceFunction.rotation;
            }
            if(shape.s.ix === value || value === 'Scale'){
                return interfaceFunction.scale;
            }
            if(shape.sk && shape.sk.ix === value || value === 'Skew'){
                return interfaceFunction.skew;
            }
            if(shape.sa && shape.sa.ix === value || value === 'Skew Axis'){
                return interfaceFunction.skewAxis;
            }

        }
        Object.defineProperties(interfaceFunction, {
            'opacity': {
                get: ExpressionPropertyInterface(view.transform.mProps.o)
            },
            'position': {
                get: ExpressionPropertyInterface(view.transform.mProps.p)
            },
            'anchorPoint': {
                get: ExpressionPropertyInterface(view.transform.mProps.a)
            },
            'scale': {
                get: ExpressionPropertyInterface(view.transform.mProps.s)
            },
            'rotation': {
                get: ExpressionPropertyInterface(view.transform.mProps.r)
            },
            'skew': {
                get: ExpressionPropertyInterface(view.transform.mProps.sk)
            },
            'skewAxis': {
                get: ExpressionPropertyInterface(view.transform.mProps.sa)
            },
            '_name': { value: shape.nm }
        });
        interfaceFunction.ty = 'tr';
        interfaceFunction.mn = shape.mn;
        interfaceFunction.propertyGroup = propertyGroup;
        return interfaceFunction;
    }

    function ellipseInterfaceFactory(shape,view,propertyGroup){
        function _propertyGroup(val){
            if(val == 1){
                return interfaceFunction;
            } else {
                return propertyGroup(--val);
            }
        }
        interfaceFunction.propertyIndex = shape.ix;
        var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
        prop.s.setGroupProperty(_propertyGroup);
        prop.p.setGroupProperty(_propertyGroup);
        function interfaceFunction(value){
            if(shape.p.ix === value){
                return interfaceFunction.position;
            }
            if(shape.s.ix === value){
                return interfaceFunction.size;
            }
        }

        Object.defineProperties(interfaceFunction, {
            'size': {
                get: ExpressionPropertyInterface(prop.s)
            },
            'position': {
                get: ExpressionPropertyInterface(prop.p)
            },
            '_name': { value: shape.nm }
        });
        interfaceFunction.mn = shape.mn;
        return interfaceFunction;
    }

    function starInterfaceFactory(shape,view,propertyGroup){
        function _propertyGroup(val){
            if(val == 1){
                return interfaceFunction;
            } else {
                return propertyGroup(--val);
            }
        }
        var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
        interfaceFunction.propertyIndex = shape.ix;
        prop.or.setGroupProperty(_propertyGroup);
        prop.os.setGroupProperty(_propertyGroup);
        prop.pt.setGroupProperty(_propertyGroup);
        prop.p.setGroupProperty(_propertyGroup);
        prop.r.setGroupProperty(_propertyGroup);
        if(shape.ir){
            prop.ir.setGroupProperty(_propertyGroup);
            prop.is.setGroupProperty(_propertyGroup);
        }

        function interfaceFunction(value){
            if(shape.p.ix === value){
                return interfaceFunction.position;
            }
            if(shape.r.ix === value){
                return interfaceFunction.rotation;
            }
            if(shape.pt.ix === value){
                return interfaceFunction.points;
            }
            if(shape.or.ix === value || 'ADBE Vector Star Outer Radius' === value){
                return interfaceFunction.outerRadius;
            }
            if(shape.os.ix === value){
                return interfaceFunction.outerRoundness;
            }
            if(shape.ir && (shape.ir.ix === value || 'ADBE Vector Star Inner Radius' === value)){
                return interfaceFunction.innerRadius;
            }
            if(shape.is && shape.is.ix === value){
                return interfaceFunction.innerRoundness;
            }

        }

        Object.defineProperties(interfaceFunction, {
            'position': {
                get: ExpressionPropertyInterface(prop.p)
            },
            'rotation': {
                get: ExpressionPropertyInterface(prop.r)
            },
            'points': {
                get: ExpressionPropertyInterface(prop.pt)
            },
            'outerRadius': {
                get: ExpressionPropertyInterface(prop.or)
            },
            'outerRoundness': {
                get: ExpressionPropertyInterface(prop.os)
            },
            'innerRadius': {
                get: ExpressionPropertyInterface(prop.ir)
            },
            'innerRoundness': {
                get: ExpressionPropertyInterface(prop.is)
            },
            '_name': { value: shape.nm }
        });
        interfaceFunction.mn = shape.mn;
        return interfaceFunction;
    }

    function rectInterfaceFactory(shape,view,propertyGroup){
        function _propertyGroup(val){
            if(val == 1){
                return interfaceFunction;
            } else {
                return propertyGroup(--val);
            }
        }
        var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
        interfaceFunction.propertyIndex = shape.ix;
        prop.p.setGroupProperty(_propertyGroup);
        prop.s.setGroupProperty(_propertyGroup);
        prop.r.setGroupProperty(_propertyGroup);

        function interfaceFunction(value){
            if(shape.p.ix === value){
                return interfaceFunction.position;
            }
            if(shape.r.ix === value){
                return interfaceFunction.roundness;
            }
            if(shape.s.ix === value || value === 'Size' || value === 'ADBE Vector Rect Size'){
                return interfaceFunction.size;
            }

        }
        Object.defineProperties(interfaceFunction, {
            'position': {
                get: ExpressionPropertyInterface(prop.p)
            },
            'roundness': {
                get: ExpressionPropertyInterface(prop.r)
            },
            'size': {
                get: ExpressionPropertyInterface(prop.s)
            },
            '_name': { value: shape.nm }
        });
        interfaceFunction.mn = shape.mn;
        return interfaceFunction;
    }

    function roundedInterfaceFactory(shape,view,propertyGroup){
        function _propertyGroup(val){
            if(val == 1){
                return interfaceFunction;
            } else {
                return propertyGroup(--val);
            }
        }
        var prop = view;
        interfaceFunction.propertyIndex = shape.ix;
        prop.rd.setGroupProperty(_propertyGroup);

        function interfaceFunction(value){
            if(shape.r.ix === value || 'Round Corners 1' === value){
                return interfaceFunction.radius;
            }

        }
        Object.defineProperties(interfaceFunction, {
            'radius': {
                get: ExpressionPropertyInterface(prop.rd)
            },
            '_name': { value: shape.nm }
        });
        interfaceFunction.mn = shape.mn;
        return interfaceFunction;
    }

    function repeaterInterfaceFactory(shape,view,propertyGroup){
        function _propertyGroup(val){
            if(val == 1){
                return interfaceFunction;
            } else {
                return propertyGroup(--val);
            }
        }
        var prop = view;
        interfaceFunction.propertyIndex = shape.ix;
        prop.c.setGroupProperty(_propertyGroup);
        prop.o.setGroupProperty(_propertyGroup);

        function interfaceFunction(value){
            if(shape.c.ix === value || 'Copies' === value){
                return interfaceFunction.copies;
            } else if(shape.o.ix === value || 'Offset' === value){
                return interfaceFunction.offset;
            }

        }
        Object.defineProperties(interfaceFunction, {
            'copies': {
                get: ExpressionPropertyInterface(prop.c)
            },
            'offset': {
                get: ExpressionPropertyInterface(prop.o)
            },
            '_name': { value: shape.nm }
        });
        interfaceFunction.mn = shape.mn;
        return interfaceFunction;
    }

    function pathInterfaceFactory(shape,view,propertyGroup){
        var prop = view.sh;
        function _propertyGroup(val){
            if(val == 1){
                return interfaceFunction;
            } else {
                return propertyGroup(--val);
            }
        }
        prop.setGroupProperty(_propertyGroup);

        function interfaceFunction(val){
            if(val === 'Shape' || val === 'shape' || val === 'Path' || val === 'path' || val === 'ADBE Vector Shape' || val === 2){
                return interfaceFunction.path;
            }
        }
        Object.defineProperties(interfaceFunction, {
            'path': {
                get: function(){
                    if(prop.k){
                        prop.getValue();
                    }
                    return prop;
                }
            },
            'shape': {
                get: function(){
                    if(prop.k){
                        prop.getValue();
                    }
                    return prop;
                }
            },
            '_name': { value: shape.nm },
            'ix': { value: shape.ix },
            'mn': { value: shape.mn }
        });
        return interfaceFunction;
    }

    return function(shapes,view,propertyGroup) {
        var interfaces;
        function _interfaceFunction(value){
            if(typeof value === 'number'){
                return interfaces[value-1];
            } else {
                var i = 0, len = interfaces.length;
                while(i<len){
                    if(interfaces[i]._name === value){
                        return interfaces[i];
                    }
                    i+=1;
                }
            }
        }
        _interfaceFunction.propertyGroup = propertyGroup;
        interfaces = iterateElements(shapes, view, _interfaceFunction);
        _interfaceFunction.numProperties = interfaces.length;
        return _interfaceFunction;
    };
}());

var TextExpressionInterface = (function(){
	return function(elem){
        var _prevValue, _sourceText;
        function _thisLayerFunction(){
        }
        Object.defineProperty(_thisLayerFunction, "sourceText", {
            get: function(){
                elem.textProperty.getValue();
                var stringValue = elem.textProperty.currentData.t;
                if(stringValue !== _prevValue) {
                    elem.textProperty.currentData.t = _prevValue;
                    _sourceText = new String(stringValue);
                    //If stringValue is an empty string, eval returns undefined, so it has to be returned as a String primitive
                    _sourceText.value = stringValue ? stringValue : new String(stringValue);
                }
                return _sourceText;
            }
        });
        return _thisLayerFunction;
    };
}());
var LayerExpressionInterface = (function (){
    function toWorld(arr, time){
        var toWorldMat = new Matrix();
        toWorldMat.reset();
        var transformMat;
        if(time) {
            //Todo implement value at time on transform properties
            //transformMat = this._elem.finalTransform.mProp.getValueAtTime(time);
            transformMat = this._elem.finalTransform.mProp;
        } else {
            transformMat = this._elem.finalTransform.mProp;
        }
        transformMat.applyToMatrix(toWorldMat);
        if(this._elem.hierarchy && this._elem.hierarchy.length){
            var i, len = this._elem.hierarchy.length;
            for(i=0;i<len;i+=1){
                this._elem.hierarchy[i].finalTransform.mProp.applyToMatrix(toWorldMat);
            }
            return toWorldMat.applyToPointArray(arr[0],arr[1],arr[2]||0);
        }
        return toWorldMat.applyToPointArray(arr[0],arr[1],arr[2]||0);
    }
    function fromWorld(arr, time){
        var toWorldMat = new Matrix();
        toWorldMat.reset();
        var transformMat;
        if(time) {
            //Todo implement value at time on transform properties
            //transformMat = this._elem.finalTransform.mProp.getValueAtTime(time);
            transformMat = this._elem.finalTransform.mProp;
        } else {
            transformMat = this._elem.finalTransform.mProp;
        }
        transformMat.applyToMatrix(toWorldMat);
        if(this._elem.hierarchy && this._elem.hierarchy.length){
            var i, len = this._elem.hierarchy.length;
            for(i=0;i<len;i+=1){
                this._elem.hierarchy[i].finalTransform.mProp.applyToMatrix(toWorldMat);
            }
            return toWorldMat.inversePoint(arr);
        }
        return toWorldMat.inversePoint(arr);
    }
    function fromComp(arr){
        var toWorldMat = new Matrix();
        toWorldMat.reset();
        this._elem.finalTransform.mProp.applyToMatrix(toWorldMat);
        if(this._elem.hierarchy && this._elem.hierarchy.length){
            var i, len = this._elem.hierarchy.length;
            for(i=0;i<len;i+=1){
                this._elem.hierarchy[i].finalTransform.mProp.applyToMatrix(toWorldMat);
            }
            return toWorldMat.inversePoint(arr);
        }
        return toWorldMat.inversePoint(arr);
    }

    function sampleImage() {
        return [1,1,1,1];
    }


    return function(elem){

        var transformInterface;

        function _registerMaskInterface(maskManager){
            _thisLayerFunction.mask = new MaskManagerInterface(maskManager, elem);
        }
        function _registerEffectsInterface(effects){
            _thisLayerFunction.effect = effects;
        }

        function _thisLayerFunction(name){
            switch(name){
                case "ADBE Root Vectors Group":
                case "Contents":
                case 2:
                    return _thisLayerFunction.shapeInterface;
                case 1:
                case 6:
                case "Transform":
                case "transform":
                case "ADBE Transform Group":
                    return transformInterface;
                case 4:
                case "ADBE Effect Parade":
                case "effects":
                case "Effects":
                    return _thisLayerFunction.effect;
            }
        }
        _thisLayerFunction.toWorld = toWorld;
        _thisLayerFunction.fromWorld = fromWorld;
        _thisLayerFunction.toComp = toWorld;
        _thisLayerFunction.fromComp = fromComp;
        _thisLayerFunction.sampleImage = sampleImage;
        _thisLayerFunction.sourceRectAtTime = elem.sourceRectAtTime.bind(elem);
        _thisLayerFunction._elem = elem;
        transformInterface = TransformExpressionInterface(elem.finalTransform.mProp);
        var anchorPointDescriptor = getDescriptor(transformInterface, 'anchorPoint');
        Object.defineProperties(_thisLayerFunction,{
            hasParent: {
                get: function(){
                    return elem.hierarchy.length;
                }
            },
            parent: {
                get: function(){
                    return elem.hierarchy[0].layerInterface;
                }
            },
            rotation: getDescriptor(transformInterface, 'rotation'),
            scale: getDescriptor(transformInterface, 'scale'),
            position: getDescriptor(transformInterface, 'position'),
            opacity: getDescriptor(transformInterface, 'opacity'),
            anchorPoint: anchorPointDescriptor,
            anchor_point: anchorPointDescriptor,
            transform: {
                get: function () {
                    return transformInterface;
                }
            },
            active: {
                get: function(){
                    return elem.isInRange;
                }
            }
        });

        _thisLayerFunction.startTime = elem.data.st;
        _thisLayerFunction.index = elem.data.ind;
        _thisLayerFunction.source = elem.data.refId;
        _thisLayerFunction.height = elem.data.ty === 0 ? elem.data.h : 100;
        _thisLayerFunction.width = elem.data.ty === 0 ? elem.data.w : 100;
        _thisLayerFunction.inPoint = elem.data.ip/elem.comp.globalData.frameRate;
        _thisLayerFunction.outPoint = elem.data.op/elem.comp.globalData.frameRate;
        _thisLayerFunction._name = elem.data.nm;

        _thisLayerFunction.registerMaskInterface = _registerMaskInterface;
        _thisLayerFunction.registerEffectsInterface = _registerEffectsInterface;
        return _thisLayerFunction;
    };
}());

var CompExpressionInterface = (function (){
    return function(comp){
        function _thisLayerFunction(name){
            var i=0, len = comp.layers.length;
            while(i<len){
                if(comp.layers[i].nm === name || comp.layers[i].ind === name){
                    return comp.elements[i].layerInterface;
                }
                i += 1;
            }
            return null;
            //return {active:false};
        }
        Object.defineProperty(_thisLayerFunction, "_name", { value:comp.data.nm });
        _thisLayerFunction.layer = _thisLayerFunction;
        _thisLayerFunction.pixelAspect = 1;
        _thisLayerFunction.height = comp.data.h || comp.globalData.compSize.h;
        _thisLayerFunction.width = comp.data.w || comp.globalData.compSize.w;
        _thisLayerFunction.pixelAspect = 1;
        _thisLayerFunction.frameDuration = 1/comp.globalData.frameRate;
        _thisLayerFunction.displayStartTime = 0;
        _thisLayerFunction.numLayers = comp.layers.length;
        return _thisLayerFunction;
    };
}());
var TransformExpressionInterface = (function (){
    return function(transform){
        function _thisFunction(name){
            switch(name){
                case "scale":
                case "Scale":
                case "ADBE Scale":
                case 6:
                    return _thisFunction.scale;
                case "rotation":
                case "Rotation":
                case "ADBE Rotation":
                case "ADBE Rotate Z":
                case 10:
                    return _thisFunction.rotation;
                case "ADBE Rotate X":
                    return _thisFunction.xRotation;
                case "ADBE Rotate Y":
                    return _thisFunction.yRotation;
                case "position":
                case "Position":
                case "ADBE Position":
                case 2:
                    return _thisFunction.position;
                case 'ADBE Position_0':
                    return _thisFunction.xPosition;
                case 'ADBE Position_1':
                    return _thisFunction.yPosition;
                case 'ADBE Position_2':
                    return _thisFunction.zPosition;
                case "anchorPoint":
                case "AnchorPoint":
                case "Anchor Point":
                case "ADBE AnchorPoint":
                case 1:
                    return _thisFunction.anchorPoint;
                case "opacity":
                case "Opacity":
                case 11:
                    return _thisFunction.opacity;
            }
        }

        Object.defineProperty(_thisFunction, "rotation", {
            get: ExpressionPropertyInterface(transform.r || transform.rz)
        });

        Object.defineProperty(_thisFunction, "zRotation", {
            get: ExpressionPropertyInterface(transform.rz || transform.r)
        });

        Object.defineProperty(_thisFunction, "xRotation", {
            get: ExpressionPropertyInterface(transform.rx)
        });

        Object.defineProperty(_thisFunction, "yRotation", {
            get: ExpressionPropertyInterface(transform.ry)
        });
        Object.defineProperty(_thisFunction, "scale", {
            get: ExpressionPropertyInterface(transform.s)
        });

        if(transform.p) {
            var _transformFactory = ExpressionPropertyInterface(transform.p);
        }
        Object.defineProperty(_thisFunction, "position", {
            get: function () {
                if(transform.p) {
                    return _transformFactory();
                } else {
                    return [transform.px.v, transform.py.v, transform.pz ? transform.pz.v : 0];
                }
            }
        });

        Object.defineProperty(_thisFunction, "xPosition", {
            get: ExpressionPropertyInterface(transform.px)
        });

        Object.defineProperty(_thisFunction, "yPosition", {
            get: ExpressionPropertyInterface(transform.py)
        });

        Object.defineProperty(_thisFunction, "zPosition", {
            get: ExpressionPropertyInterface(transform.pz)
        });

        Object.defineProperty(_thisFunction, "anchorPoint", {
            get: ExpressionPropertyInterface(transform.a)
        });

        Object.defineProperty(_thisFunction, "opacity", {
            get: ExpressionPropertyInterface(transform.o)
        });

        Object.defineProperty(_thisFunction, "skew", {
            get: ExpressionPropertyInterface(transform.sk)
        });

        Object.defineProperty(_thisFunction, "skewAxis", {
            get: ExpressionPropertyInterface(transform.sa)
        });

        Object.defineProperty(_thisFunction, "orientation", {
            get: ExpressionPropertyInterface(transform.or)
        });

        return _thisFunction;
    };
}());
var ProjectInterface = (function (){

    function registerComposition(comp){
        this.compositions.push(comp);
    }

    return function(){
        function _thisProjectFunction(name){
            var i = 0, len = this.compositions.length;
            while(i<len){
                if(this.compositions[i].data && this.compositions[i].data.nm === name){
                    if(this.compositions[i].prepareFrame && this.compositions[i].data.xt) {
                        this.compositions[i].prepareFrame(this.currentFrame);
                    }
                    return this.compositions[i].compInterface;
                }
                i+=1;
            }
        }

        _thisProjectFunction.compositions = [];
        _thisProjectFunction.currentFrame = 0;

        _thisProjectFunction.registerComposition = registerComposition;



        return _thisProjectFunction;
    };
}());
var EffectsExpressionInterface = (function (){
    var ob = {
        createEffectsInterface: createEffectsInterface
    };

    function createEffectsInterface(elem, propertyGroup){
        if(elem.effectsManager){

            var effectElements = [];
            var effectsData = elem.data.ef;
            var i, len = elem.effectsManager.effectElements.length;
            for(i=0;i<len;i+=1){
                effectElements.push(createGroupInterface(effectsData[i],elem.effectsManager.effectElements[i],propertyGroup,elem));
            }

            return function(name){
                var effects = elem.data.ef || [], i = 0, len = effects.length;
                while(i<len) {
                    if(name === effects[i].nm || name === effects[i].mn || name === effects[i].ix){
                        return effectElements[i];
                    }
                    i += 1;
                }
            };
        }
    }

    function createGroupInterface(data,elements, propertyGroup, elem){
        var effectElements = [];
        var i, len = data.ef.length;
        for(i=0;i<len;i+=1){
            if(data.ef[i].ty === 5){
                effectElements.push(createGroupInterface(data.ef[i],elements.effectElements[i],elements.effectElements[i].propertyGroup, elem));
            } else {
                effectElements.push(createValueInterface(elements.effectElements[i],data.ef[i].ty, elem, _propertyGroup));
            }
        }

        function _propertyGroup(val) {
            if(val === 1){
               return groupInterface;
            } else{
               return propertyGroup(val-1);
            }
        }

        var groupInterface = function(name){
            var effects = data.ef, i = 0, len = effects.length;
            while(i<len) {
                if(name === effects[i].nm || name === effects[i].mn || name === effects[i].ix){
                    if(effects[i].ty === 5){
                        return effectElements[i];
                    } else {
                        return effectElements[i]();
                    }
                }
                i += 1;
            }
            return effectElements[0]();
        };

        groupInterface.propertyGroup = _propertyGroup;

        if(data.mn === 'ADBE Color Control'){
            Object.defineProperty(groupInterface, 'color', {
                get: function(){
                    return effectElements[0]();
                }
            });
        }
        Object.defineProperty(groupInterface, 'numProperties', {
            get: function(){
                return data.np;
            }
        });
        groupInterface.active = groupInterface.enabled = data.en !== 0;
        return groupInterface;
    }

    function createValueInterface(element, type, elem, propertyGroup){
        var expressionProperty = ExpressionPropertyInterface(element.p);
        function interfaceFunction(){
            if(type === 10){
                return elem.comp.compInterface(element.p.v);
            }
            return expressionProperty();
        }

        if(element.p.setGroupProperty) {
            element.p.setGroupProperty(propertyGroup);
        }

        return interfaceFunction;
    }

    return ob;

}());
var MaskManagerInterface = (function(){

	function MaskInterface(mask, data){
		this._mask = mask;
		this._data = data;
	}
	Object.defineProperty(MaskInterface.prototype, 'maskPath', {
        get: function(){
                if(this._mask.prop.k){
                    this._mask.prop.getValue();
                }
                return this._mask.prop;
            }
        });

	var MaskManager = function(maskManager, elem){
		var _masksInterfaces = createSizedArray(maskManager.viewData.length);
		var i, len = maskManager.viewData.length;
		for(i = 0; i < len; i += 1) {
			_masksInterfaces[i] = new MaskInterface(maskManager.viewData[i], maskManager.masksProperties[i]);
		}

		var maskFunction = function(name){
			i = 0;
		    while(i<len){
		        if(maskManager.masksProperties[i].nm === name){
		            return _masksInterfaces[i];
		        }
		        i += 1;
		    }
		};
		return maskFunction;
	};
	return MaskManager;
}());

var ExpressionPropertyInterface = (function() {

    var defaultUnidimensionalValue = {pv:0, v:0, mult: 1};
    var defaultMultidimensionalValue = {pv:[0,0,0], v:[0,0,0], mult: 1};

    function completeProperty(expressionValue, property, type) {
        Object.defineProperty(expressionValue, 'velocity', {
            get: function(){
                return property.getVelocityAtTime(property.comp.currentFrame);
            }
        });
        expressionValue.numKeys = property.keyframes ? property.keyframes.length : 0;
        expressionValue.key = function(pos) {
            if (!expressionValue.numKeys) {
                return 0;
            } else {
                var value = '';
                if ('s' in property.keyframes[pos-1]) {
                    value = property.keyframes[pos-1].s;
                } else if ('e' in property.keyframes[pos-2]) {
                    value = property.keyframes[pos-2].e;
                } else {
                    value = property.keyframes[pos-2].s;
                }
                var valueProp = type === 'unidimensional' ? new Number(value) : Object.assign({}, value);
                valueProp.time = property.keyframes[pos-1].t / property.elem.comp.globalData.frameRate;
                return valueProp;
            }
        };
        expressionValue.valueAtTime = property.getValueAtTime;
        expressionValue.speedAtTime = property.getSpeedAtTime;
        expressionValue.velocityAtTime = property.getVelocityAtTime;
        expressionValue.propertyGroup = property.propertyGroup;
    }

    function UnidimensionalPropertyInterface(property) {
        if(!property || !('pv' in property)) {
            property = defaultUnidimensionalValue;
        }
        var mult = 1 / property.mult;
        var val = property.pv * mult;
        var expressionValue = new Number(val);
        expressionValue.value = val;
        completeProperty(expressionValue, property, 'unidimensional');

        return function() {
            if (property.k) {
                property.getValue();
            }
            val = property.v * mult;
            if(expressionValue.value !== val) {
                expressionValue = new Number(val);
                expressionValue.value = val;
                completeProperty(expressionValue, property, 'unidimensional');
            }
            return expressionValue;
        }
    }

    function MultidimensionalPropertyInterface(property) {
        if(!property || !('pv' in property)) {
            property = defaultMultidimensionalValue;
        }
        var mult = 1 / property.mult;
        var len = property.pv.length;
        var expressionValue = createTypedArray('float32', len);
        var arrValue = createTypedArray('float32', len);
        expressionValue.value = arrValue;
        completeProperty(expressionValue, property, 'multidimensional');

        return function() {
            if (property.k) {
                property.getValue();
            }
            for (var i = 0; i < len; i += 1) {
                expressionValue[i] = arrValue[i] = property.v[i] * mult;
            }
            return expressionValue;
        }
    }

    //TODO: try to avoid using this getter
    function defaultGetter() {
        return defaultUnidimensionalValue;
    }
    
    return function(property) {
        if(!property) {
            return defaultGetter;
        } else if (property.propType === 'unidimensional') {
            return UnidimensionalPropertyInterface(property);
        } else {
            return MultidimensionalPropertyInterface(property);
        }
    }
}());

(function(){

    var TextExpressionSelectorProp = (function(){

        function getValueProxy(index,total){
            this.textIndex = index+1;
            this.textTotal = total;
            this.v = this.getValue() * this.mult;
            return this.v;
        }

        return function TextExpressionSelectorProp(elem,data){
            this.pv = 1;
            this.comp = elem.comp;
            this.elem = elem;
            this.mult = 0.01;
            this.propType = 'textSelector';
            this.textTotal = data.totalChars;
            this.selectorValue = 100;
            this.lastValue = [1,1,1];
            this.k = true;
            this.x = true;
            this.getValue = ExpressionManager.initiateExpression.bind(this)(elem,data,this);
            this.getMult = getValueProxy;
            this.getVelocityAtTime = expressionHelpers.getVelocityAtTime;
            if(this.kf){
                this.getValueAtTime = expressionHelpers.getValueAtTime.bind(this);
            } else {
                this.getValueAtTime = expressionHelpers.getStaticValueAtTime.bind(this);
            }
            this.setGroupProperty = expressionHelpers.setGroupProperty;
        };
    }());

	var propertyGetTextProp = TextSelectorProp.getTextSelectorProp;
	TextSelectorProp.getTextSelectorProp = function(elem, data,arr){
	    if(data.t === 1){
	        return new TextExpressionSelectorProp(elem, data,arr);
	    } else {
	        return propertyGetTextProp(elem,data,arr);
	    }
	};
}());
function SliderEffect(data,elem, container){
    this.p = PropertyFactory.getProp(elem,data.v,0,0,container);
}
function AngleEffect(data,elem, container){
    this.p = PropertyFactory.getProp(elem,data.v,0,0,container);
}
function ColorEffect(data,elem, container){
    this.p = PropertyFactory.getProp(elem,data.v,1,0,container);
}
function PointEffect(data,elem, container){
    this.p = PropertyFactory.getProp(elem,data.v,1,0,container);
}
function LayerIndexEffect(data,elem, container){
    this.p = PropertyFactory.getProp(elem,data.v,0,0,container);
}
function MaskIndexEffect(data,elem, container){
    this.p = PropertyFactory.getProp(elem,data.v,0,0,container);
}
function CheckboxEffect(data,elem, container){
    this.p = PropertyFactory.getProp(elem,data.v,0,0,container);
}
function NoValueEffect(){
    this.p = {};
}
function EffectsManager(){}
function EffectsManager(data,element){
    var effects = data.ef || [];
    this.effectElements = [];
    var i,len = effects.length;
    var effectItem;
    for(i=0;i<len;i++) {
        effectItem = new GroupEffect(effects[i],element);
        this.effectElements.push(effectItem);
    }
}

function GroupEffect(data,element){
    this.init(data,element);
}

extendPrototype([DynamicPropertyContainer], GroupEffect);

GroupEffect.prototype.getValue = GroupEffect.prototype.iterateDynamicProperties;

GroupEffect.prototype.init = function(data,element){
    this.data = data;
    this.effectElements = [];
    this.initDynamicPropertyContainer(element);
    var i, len = this.data.ef.length;
    var eff, effects = this.data.ef;
    for(i=0;i<len;i+=1){
        eff = null;
        switch(effects[i].ty){
            case 0:
                eff = new SliderEffect(effects[i],element,this);
                break;
            case 1:
                eff = new AngleEffect(effects[i],element,this);
                break;
            case 2:
                eff = new ColorEffect(effects[i],element,this);
                break;
            case 3:
                eff = new PointEffect(effects[i],element,this);
                break;
            case 4:
            case 7:
                eff = new CheckboxEffect(effects[i],element,this);
                break;
            case 10:
                eff = new LayerIndexEffect(effects[i],element,this);
                break;
            case 11:
                eff = new MaskIndexEffect(effects[i],element,this);
                break;
            case 5:
                eff = new EffectsManager(effects[i],element,this);
                break;
            //case 6:
            default:
                eff = new NoValueEffect(effects[i],element,this);
                break;
        }
        if(eff) {
            this.effectElements.push(eff);
        }
    }
};

    var lottiejs = {};

    function setLocationHref (href) {
        locationHref = href;
    }

    function searchAnimations() {
        {
            animationManager.searchAnimations();
        }
    }

    function setSubframeRendering(flag) {
        subframeEnabled = flag;
    }

    function loadAnimation(params) {
        return animationManager.loadAnimation(params);
    }

    function setQuality(value) {
        if (typeof value === 'string') {
            switch (value) {
                case 'high':
                    defaultCurveSegments = 200;
                    break;
                case 'medium':
                    defaultCurveSegments = 50;
                    break;
                case 'low':
                    defaultCurveSegments = 10;
                    break;
            }
        } else if (!isNaN(value) && value > 1) {
            defaultCurveSegments = value;
        }
    }

    function inBrowser() {
        return typeof navigator !== 'undefined';
    }

    function installPlugin(type, plugin) {
        if (type === 'expressions') {
            expressionsPlugin = plugin;
        }
    }

    function getFactory(name) {
        switch (name) {
            case "propertyFactory":
                return PropertyFactory;
            case "shapePropertyFactory":
                return ShapePropertyFactory;
            case "matrix":
                return Matrix;
        }
    }

    lottiejs.play = animationManager.play;
    lottiejs.pause = animationManager.pause;
    lottiejs.setLocationHref = setLocationHref;
    lottiejs.togglePause = animationManager.togglePause;
    lottiejs.setSpeed = animationManager.setSpeed;
    lottiejs.setDirection = animationManager.setDirection;
    lottiejs.stop = animationManager.stop;
    lottiejs.searchAnimations = searchAnimations;
    lottiejs.registerAnimation = animationManager.registerAnimation;
    lottiejs.loadAnimation = loadAnimation;
    lottiejs.setSubframeRendering = setSubframeRendering;
    lottiejs.resize = animationManager.resize;
    //lottiejs.start = start;
    lottiejs.goToAndStop = animationManager.goToAndStop;
    lottiejs.destroy = animationManager.destroy;
    lottiejs.setQuality = setQuality;
    lottiejs.inBrowser = inBrowser;
    lottiejs.installPlugin = installPlugin;
    lottiejs.freeze = animationManager.freeze;
    lottiejs.unfreeze = animationManager.unfreeze;
    lottiejs.getRegisteredAnimations = animationManager.getRegisteredAnimations;
    lottiejs.__getFactory = getFactory;
    lottiejs.version = '5.5.1';

    function checkReady() {
        if (document.readyState === "complete") {
            clearInterval(readyStateCheckInterval);
            searchAnimations();
        }
    }

    function getQueryVariable(variable) {
        var vars = queryString.split('&');
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split('=');
            if (decodeURIComponent(pair[0]) == variable) {
                return decodeURIComponent(pair[1]);
            }
        }
    }
    var renderer = '';
    {
        var scripts = document.getElementsByTagName('script');
        var index = scripts.length - 1;
        var myScript = scripts[index] || {
            src: ''
        };
        var queryString = myScript.src.replace(/^[^\?]+\??/, '');
        renderer = getQueryVariable('renderer');
    }
    var readyStateCheckInterval = setInterval(checkReady, 100);
    return lottiejs;
}));
});

var v = "5.3.4";
var fr = 60;
var ip = 0;
var op = 240;
var w = 500;
var h = 500;
var nm = "Composição 1";
var ddd = 1;
var assets = [
	{
		id: "image_0",
		w: 24,
		h: 39,
		u: "",
		p: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAnCAYAAAAVW4iAAAABqElEQVRIS9WWPU7DQBCF37MDtKFBgoZwEjoERWD5CwRxCN+AHIHcwGkQSCk4QnID0iNZhH8q3IUoeNAGCWGySYy9LjIHmG/f5/HuEDmVu3GrQJ7Tev/NoORGnz7Idd3bHkAFxUIv8gQ4+31oKwB3K1CAnANY/WskG0DroPgAhjpMlQ6gdfS1DsZ0WAEMdRBGHdkAWocDHxyvIx1A6xjAE4lPR9LxnvgN3HKgIEysI3kCFZTcAX2ZMB3pEqig6ETwINOn498At9xVMuZnSdrMrEjriLSO77vDdtHZvhPbTWN3kbPTnXWAyjuBus9Z0W7ugId8E3Bv5gH7jzkryhXAkDzIJwHBRlRgjTx8sq2oI0IPzeXWcPGyCAhFUENzRb+AP0VWsicg0Ij6Hx6u195HFi9WnjMoko449HD5rcP44PAoFSAUSA1XcR1WACQaUa9n1GEGHL8kVdQennqCDvObPB0QAqI96yX330VUJyaoY2GhBn9xZDqSkojqq0GRtEHHw8XSTdJGY6cIJzFACFA3TqXD/A1+AKxjfi6TDjPg9K0FvS5a0GECfAGHQaT2XgdD9QAAAABJRU5ErkJggg==",
		e: 1
	},
	{
		id: "image_1",
		w: 49,
		h: 29,
		u: "",
		p: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAdCAYAAAAD8oRRAAACwUlEQVRYR8WYX44SQRDGv+oZcN/kBkJi1uCL6wGMk40xJK6RG8gN7BvY3mC4wXoDjMlmkzWGiRfwDV1MZvcG8obMnzI9K0RgYP7QA/NEQnd1/SbfV1U9hAqf2rNRD4DSRxBYzr49HlRxHFUR1HZGDsVQIDxfis/wLIHedNi+MXmuUYgjZ9QMY3aJ6M3WJIn7Af4oDJ/+NgFjBsLxGzamEqD3BZKaaIkFw/Z5gT2pS3eGqJ3+kMyJ7u+XTMYDswqH7WHJ/SgNYTk/u4LgMvCg7OH/7yPgY8B1iWGrsMQKQ9Sc6xMWsQvQsmlNkAATAG749VFS0fI+uSG0aSMSiglv8wYvu46AWxZxL/yST2LZENq09kyCSe6g+5I8/MmOYplVkrdC1E6ve0xw95/8CjPxhzCsu5v8kgphvxg7YHZBeFLyFRrfRuBbEKng6nitJC9BHHVGzTC09aIqTGsKzCNiGVwdf58HvINw/EatFrgMqty0pkgA6oeBpbTEyH45VocxrRGcCTGpBIJxiMpjBAJE6N/JqeM3LUQKXH0PMJM6AIYnOE68sWRsuzN2OCYFqqQbm8p/AmIZXT5cVKnUEmt1fvUAOnx/WG0XhH54TygMluerzc2u6zfsaSwZKDJem3rbK3HYE8KSwUVrUVZXhseMcxO/JI1v+0WnmvQnunJGl62td47s2elfcnbHd5hYBzMyemcxEzhVOmn7ckPMN4tXviTmXS5BWfl7ArRROkYgkiDaLzMoBt5lZVTgf32XkNHFdumYg5hH0n4ROF/7qlEgc72UGP2wjrWqkzdMYTmlBbZe+13ESUku5hfdsPTHgg1VZ68QC7+c+bpRSnDGRwNC8qUj+lxcOubllBax6zdEJFwwb5iIuR/b5aWzH4h5ST7TJZn0cJncTQjsRRFL7CidvUIsDuv6J8nvQXq3zav7bev+Ai2g8mv/19MmAAAAAElFTkSuQmCC",
		e: 1
	},
	{
		id: "image_2",
		w: 25,
		h: 114,
		u: "",
		p: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAByCAYAAACm2nr6AAAC0ElEQVRoQ92aWVYTQRSGb4UmBkKwFSecCGqCURTECScIDu/uQHZg78B2B1mCrEA9iiBjx3kWnKcH2QF545x0+noqgBol3Z2h/oeu99SX77tdb1eQwhOLjQ4TkSlUMFpa7qQFhUwiGpT31xWi62PxQoFNYr7y95+vC0TXb+qOHTaY6NpaZWqGFLszZYhofbn0VUNWusvLe7zmWjGk2N12bqwO1QtQ0eBld9sOy8/xqp+LKx58a+tdg1nIT7Jsdzewa65Y7N5louJQOyr9954mUX20N8QiQ7z8mGo9JSbFoToks5Q8prpAio+JIgYzGdV2d51JTB+Tj8nkGru7Qlr0ca41h9fvBQayAWGy8T4gFwTShjBpmwDk2gSBTAJMNgMgUQhky5T6XFEIZCvCZNs0IBcE0o4waZ8B5NoOgcwCTHYAIM0QyE5Lfa5mCGQXwmR3FpALAul4ADCBQOIIk/hDQK5OAKQJAtnzSH2uJghkL8Jk32NALggk8QRgAoEkESbJp4BcXQBIBALZ/0x9rggEkkKYHHgOyAWBHHwBMIFAuhEm3S8BuQ4FBbLu8Cv1uTCQntcAk97AQI68AeSCQPoQJn1vAbmOBgUSPjanPhcGcnweYHIiMJCT7wC5IJB+hEn/e0CuU0GBNJ7+oD4XBnLmI8DkbGAg5z4BckEgAwiTgc+qc42IxkFFEKZsQ4iGl6zUTxWQeRZk2FbKWl01EVr6S71y5QSxkbdScver5NQDkiPijE2RDFmdi2vu3GlDX6s2EUQjDeyYsrvrmo92vhoIZ4UTMvJWcs5rxae4DlcJRBAtOIKMwnTXLT+X/xn8hW9+cuUECzM/k5BbaxUfoXlBBF+37XDZofohCu1iORO+rWmOsTTuPlSfkO//5srKzVh7KvH7Mfm5yP3rurQMkUMlYjM/mfzvMdUB8mORBGfsiYRc6FNyBKVnNbKGbCW3r1z6C7QGPOO8hs2vAAAAAElFTkSuQmCC",
		e: 1
	},
	{
		id: "image_3",
		w: 100,
		h: 71,
		u: "",
		p: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABHCAYAAADx2uLMAAAIVklEQVR4Xu2czW7cVBTH/8cep9m1LEqpVJpECKSuKPvSjCqQIgQ0QiBVbDpvUL9BnTdw3yCRCqoEQglFEEQXGcEDkEU/1CJNhyJFYsXsosbjg66/Pf6647EzmYxnNZN4/HF/Pvd//uceD2nXHr8EKcbR71c20bymPgKkXXvMIBIn0mUmw/rjyt7Uz2qOT4C0a08YDo/gtaWqZBzuXXk5x+MytUsn7cMnHDu6C2dAIPO1cmhi74P/pnZ2c3jgOJAgUrw3hD4IxtFeoy/HdW+kAInMX/5bRpcVGNZeoy91gwmBJKMjfmxH+GlLhd3oS41URoCkRIc4OBEiQjOAwqZlL5rYW2n0pWI4LhCJ6Igpv7M9DYhJP9p7r/EvFUKJAAmEPDFVJWE4QNztCPtQbN161OhLFVxIu+6nvelA2DWN4cuNjpHPzp92WkNbb/zLZFg8IKWjI07K0X3esKyFRl9KcskBQuCR4HADIxte5BwGpEA/+q3Rl3G5kHb9qSsRicGPZVaR/6cBoZTvA2DaB0G3Hr3b1MckyWQAGYkOiSwsqTMRygp2WoqlH+429bEiLi6QKqMjDx5hw3rdavQlh0oKkCqiI8NgCvKEgU1k2L++YxbdLfP4f9JWPQ3xrz7uyj1tyB3gZAqcI/yBp2H0SeWOtdvoS8xVxICkwpDOrArhxbK2SOFyqKgd7K406y8it4oCkTaBDqM0w5gPL6X8EtwcpOCedUYxsD3f9bEQSJ3RIb/vARMM+5f51RcPyEQmUMqj5EVHPMtzhL9PTB1rd2Xu/IsLRP4Odh1knoMfNZmT7bs7ZJorfSFt9Rmniq1ciaTa6MjQJQLdsxYwF/pCWvsZF5TXkwXErOpvlQYziLRgp6I+Zlo/rRin2Z9Qq/0s5DFpiSQGxJ3aMrUjBV5u+SXcvg8F+vDhyvZpBJMCpAYTGNOVMYqT+dNmd2izjp9X/jxNYEIgpaIjH14QHbXum7Zs1dZPi38RGvKSgaXYWkeiHD+SWUkM8JhpbrnyS6gzAxBM+8elmdcXZ2hbN54aYNIBOpu1NpKc37OjY/KsTTLyRoVfQZ9s0ocPL8+svoRX3u6d0+i1ycDtmM+ouESSYgInjY7E9wncHSotHduXZk5fRnMdaO3nV1mxTYBW6zWBWfUwyeiQmDZB2LIxFP5lZgqXCSD+7db66GmbWNlk0FJYAQxq9O6bcdLcFAcvmeYG1YGSujQAsWnDNmdB+DOB+IOl3XihM7EQy7NFTQ6VGcwMeHJZW2Zpp09gY7h9+UQ39hUCccC0e+da6pEBwp30rpPaTOD40VGgeUToEsOwtt8+kYVLOSBeuCyuPV22rNYmCKvx6aaCDpW05jsnUtxTnDA6UhIH3rJZM7B98UTpy1hAQn150SbCpuNfvOpvDSWSyqMjRfMGAJu2bZ0YfSkFJNCXj593mBSRKrv+ZdQXZAh/pqeRKk5KlnaKziUeeX0GDPxwaer6MhGQQF8WLJ1Bd2W66DNhjJu1SRUnJVNo/9jOg0ls4Pvp6cvkQPwRXustqzwU/uVmPFoioRM9moSPKJnmFkdqqi6FJ0dEW3aLDDw4fn2pDog37q21F22bFZMI748Kf+nokIBXet85UxsBG7b1+lj1pXIg/sCoa391ABLNcGcTjl9igCuLjhTzmszacqe2AYN0fHfxWPSlNiAOmPXeudahrTPR3dJ3cC68Mdf3x8oIE/veZ5V0PLhYq3+pF0hUX1y3HylceoeepPwy2nAhCS/uacbM2hg7Hpha/MvxAAn0pdd2shincBlNk/33dZlATyiiS8qS8OLnGRF+BRv24WHl+nKsQAJ9+aTXgcj7SRjLeBYmrR1jLQuE089E0ZFcUhaNfWIaq0xfpgIk0BcLOjN0t3BZY3QUpLm5azRFBtOdNvcZXIm+TA9IVF9UxQDx7TqjQ3rfqbpUrDPe/nfggimtL9MH4uvLp702gwwGVsda3y+6g+uPjpHCpxhSuoczmoHNN8b+YYUTAyTQl8966+z4F29hrI4SSUFlOUvIs6a2DF0Sv3hh4Ju3xnow6cQB8QdD+bxvQOgLRQqXRX3FGfAqEfIgEvMywtSprQ9F6eD+eSn/cmKB+MKv2Iq4w247n2V/xMDdOL9zMjbA5QymtOMX503owhp2ivTlZAPxw2W9d1W1VZOjC2OSPqKS6Ji8/BJm94x7WMjWl9kA4l2Ouv73OrPQF5Zq7JNbNKszOlL27V7LACAD35xP6MtMAQn0Zb0v3H5GY19tJjD2bEzpyAtjRexP/GJfTF9mEkigL2iJ+tid3HYkyamtkswqY2qLMUj7ENGX2QUS6suySi2xvh809k1mAiNqX6V2FFLBPjStPftAfGO5/qptKyRqSkulpxNnNPJdeel9ZwKhPpgNfPumUw87NUCC6/3iH51E4XK0sS/DR1QyVSVGMlPMo1icjkq0Fsyooz99QMQlr/fOKapmMOhOfMD9T+UyqwqjYwvDYeqa/ekEEujLwTKponEcN4s7+qULiIW/WJE57wjxFulujms/3UB8MF++ahMpJlg0XowZHZMWJ51zEOmtreP+hcLnVuYDiA/mq4MOgb3GC++PEkIutiyerlJ1w9WJ+xekn+yaLyC+viws6Mxe40UUSLVp7hY0TR+3BD9/QPxouXWwTEM2QcWNfanRkWUCJYuIWVnw/AIJwbTJdtb3Ix39ZcovyTJIsRdMbtEACcF0xHMjwlgWlu7j0TEAoPvGrgyE6HcaINHREP5lcVE0jjuNF8VCjg0sxI1dA2TSEUj7/q2DZUAxAPYa+xIeZQe2PVEzQ6MhZcDdOmiDKNLYx12obOB+fe2kzZQlA+rrf0VjH6rSibxD/g+NG3LFW5dl+AAAAABJRU5ErkJggg==",
		e: 1
	},
	{
		id: "image_4",
		w: 99,
		h: 71,
		u: "",
		p: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAABHCAYAAAATBvm1AAAIb0lEQVR4Xu1d0WrbVhj+/2PHFiRpdLFBLzbiiw0KW9eErZCOljqMDXrVvUH0BtMbVH0D5w3WJ+jKaAsrI/XKFmjYnLaD7KIX8RissF3YtCPGtXTGOZLsI/lIlmRZkWPpKol0bHG+c77v//7/l4JQHKc+A0v1Iw2QGHjqd7LAN1CuH9UB0ACE6wAIBRinsBiU+lHNBDCA4g51EUAGR3FkNwP1llqxKjoFogPCGv9iRKDOHRRgZATF0rUjDYAySlof7gFn9inaPxRgzBiM8tUXdQRiAOL14VfxWRd4ydkdBRgzAkPZOqqZJWoA0J3hknd2gP27M/XC7ijASBsMpgv9sqMLdM2zAxyNGHGSV7ULMFIEY2nruYaIBkVcD6OkoHMFGCmAoWy9qFMAgwJcd9nHFWUZJbEIyrM7fBKSwi0t3kcoW62aBSUDKDi6INIOgughvHQlivcIiWJnJFlDGy21UiE6AOiAaPuFoSaPJnq4OyTnhrtDOFeAEROMpcstDZEYAMwvuCD4aEeY1TG6EmfcR1cFGBHBUD5r1SkQgwJ1dMHrEyZ5CGkE5YJRaEY0FJSNVs0qAcuo7nhXuW8GJ3gImWDbfxvtqmJnBGGy0VIVYnnzSAAQh3bE/EaUcQUYEjCUjZZGkblnWB+Gpr48UhTaESOoKGJegCGAoWwccF0A7hfkXoBdnsRDRBlXgAEAXBcs00BEIY80jDmdNJI3dRFMO3IP4ca+Yd5jocFQN1pqzxroFHBUX/BlU0d05BXsSGIe03ssLBjKxacaIDL3vB5FXP3aIaWdEA8RRcwXDgzl44M6L/IAjueRIjrlsfxTzHFidU8EeWHAUC7s16BUYuI80gWBkiLRznC2JCkPSY0ibhBw5sHgutDv64igUwprYxPkhqw+AxanDpEWzZ1pMJQL+7YuADp+QXC8McVVltiblq783uNMgqFc2K8D9wtCHkmIVOPSR9SyaZSUR1AzghjERUvU5PwqpgvEAoMiyyOF+ISQc0nHhUdX0bzHmdgZam1P7VdYPxLqALgmr7aFJfYSeIiJYh7wfSH0OPdgKB/+zOvOzC+M5ZFyIMqeZih/isVb92jPLRjKB0/sfqRh3Vle4ImSoJMl/TIc1wWERv+Xi/PX+KzU9mukZLLi/46/EWyq1EVS2pk4Tlwk3voFANzpK6YOjzc7YnyRc2kG4LpAWD8S0wXmF3ycHEJJvJc1hCKy9h4I2LRoSX978NGhOPFzQVPLtZ80yv2CP4+UQJRjpi5Spqs2AOr9p598J1v9uQZjpfakToE6/Uj2rY6vcr+Rk9OCdHdk5z26gNjoP73EFlTgkUswlNpejVi8WXhHLq7ZeoipvAchd/pvLR0ObV2YGzC4LlhOPxLXBd8qd2yqdHekWYeYKMoR6BGgaZVAf3uw6dGFuQBj+f09jVL2SJWQR5ojURYWTpsi6v1fN6W6kGswVt7bq1sADQC8JKOk8V5VMX2dlK4EdvZHZb5ephhNBV1E2uj99mmoLuQSDOX8Xq1MoEERbialnaTjeCAQQIH2gpDTY9A4ininz0LuCLqQKzCYLgz6rB8Jb3lXXcgqzxFdeRYAYBMJ0XqHm8eTxDnK+UyjqeXzP2pAoAF0lMxzATnVVR7fe7SRUK13ePlxlEmOek0mYKycf1SnSBpAwdGFqF4gqYdIOs73/O94Y3IXCBgnzy83ok5wnOtmCgbXBcvkuuDNIwVTUtKYftbjEGG3Wl4yOlPqQuaaoap76qDC+5FujSKkCLE5BjjsCB5ihjTXBNPUen9cSUUXMgVj9d0fNArItvFavNSFELKGCPZ4tDOzcW0gltb7/UqqupAJGCvvPKqDRRtAmC7YE2SDkdQLZD3OZmwEYPUF4+Roaya6MFMwVPVhbcDEmeBNGSXF2x0jKktKO0nH8XsnuFutVmeqCzMBg+sC6bPagqALQdW2GazydL1HkyJkogupg7GqPmT1Ba4L0ijJl2jz0JUkCXeKCcE2JchAyEwXUgNjRX1YBwoNQDGPlDSmP9VxXfaep5OXn2euC1ODwXTBtBgIbh4pPu3kRswBdqtm3+gcb0+sL8QxbGlcG2r6VPWuavH3Izl+Ycp6QlJxTWccNqlJtN7x7P1CUmACwVhdva+Bndp2XlLlfIXwsqoxrvekn9NIeaTiIdq0BFrv5bVc6EIsmlpZ+Z71IzEuldcXZB5CKspyKsuOrkiXvc/j5PhqrnQhEhhcFwYWu3HbL4iHP7/v/J6qh0i6qySpEkTcXYJBLnUhFAyuCwOmC45fkF0d4KKzW+XRqnuI0DTR0nrH2zPPIyXVhVAwVlfvH/M+1UnHWNOYJOURRlez9B6UtEnZ1N4cb+deFybujMGgwvo8v5mER5Bgx6arpDQ3Pq5LCTVO/tyeG12Ioxnf8kbioCNlupqG5gBhd6kMc6cLkcBwLxqLpiaJedbeA7FpmqD1Xs2nLsQCw72Y+wyW+uD5J+EY2x3eF+Wm4z2k5c82llB789d860IiMNigwEhrWjEfWpBIdQ9eX/jv7y/OhC4kBsMdyD2ISQ2g1O595ZOZhsMefY4sCEDE22WFNPKYR5oY7CS4IFZDgqMnoU8LTSPKblMBAtwbkJJ+FnVh6p3h/wAnb+W8p8/7xsqxcmss74HPsET1N6++nGu/kGBT2GSTdOBQT1B8kiicdrwPtntorsveYPD6n69YaL2wR2IwRnpyVzXNKhNXz7tdI9MV0tvlQaXR6eSvvpD1qpgaDPeGl5fvb5Aysq5B/l9SRnQV0ERM4V6ZWnqnc2Mu80izACo1MEb+5MHX7FFa9pyF+086fJHXM2C68O+NhdSF1AU8yqo4d+6Bzh6KpKMnU7sIVH/dubHQunAqYLimcWBVDSDYKYNS6MKEVfw/MM9906el5gwAAAAASUVORK5CYII=",
		e: 1
	},
	{
		id: "image_5",
		w: 25,
		h: 99,
		u: "",
		p: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAABjCAYAAABuUKvEAAACn0lEQVRoQ93aSXLaUBAG4G5BhkUkwGCDReZ5TohtEmce7diYRW6QI3AE5QbKDcQNqHLZIbOVeXJVfANTFVIsJdsrV9BLmSEVTBSEpdeLpy3iffX3r7drlOW5ZQDQVldzBnB6UN41x1pnmwwcbW0tvxC09TfSPBuxGAqhZllTGwkDebqR1rEI8EgKr+uW9cDyK7kirYNtQCj47asX0g6xxMApbLUvr0gbM0Nh6WG/ffWLNDAG8DgcXte89oWy/OcT7rdfG5FpKyszeq8/oqzMt+9Jr3fdfq8A2/g4pktuL6DiH2ldLzARWcGyct83Y6hEfCfpPJNBUZI6LzMq0YCRJmkDMF2C5mVGJfbEbyf/67LCGGi8kWZfygDXJC0kToBE4mWenTSTRBIUyCAFMvSUYFwkSJIiSYoAiaae8e8kOkyBqBRImgR5TtDJbgIktkcYZO8L/p3E9lEg+4VBDrzk38nAQWGQQ68IxnWYAjkiChI/+pp/J/FjwiDHKZKcWCDo5KQoSOIUQZLEaZN/JzTIGYokZymQc2/4dzJIgpynSJIhQd4SdHKBAhmhQEbf8R/XEAkyRpEkS4K8J+jkIgVyiQBJjpMgH/h3krxMgVwRBrn6kaCTawRI6rowyI1P/DtJ3RQGufWZ/7iGb1Mgd4RB7n4h6OSeMMgE1yQmk1BDdfJr0J3YgKzkQF2rlccbaymo3g8MqQCAsX1nWF8uZTrWUAJAcAnB0avlrOuaEKpTW03CihJD40d5rOdaEKrT3/rpxEYAo+6E9Fo543kNyCtSYYj6jm2SsXneXrY3UM25J0GGJgsx/efsqOsmhyckPfMPBKEIdUevzme7Nje8HNq17ZHOL7Y7sRFB/yVJRq3kfd5eUEznFxubatXZEW6bar8B4RdHqI6Phb0AAAAASUVORK5CYII=",
		e: 1
	},
	{
		id: "image_6",
		w: 99,
		h: 68,
		u: "",
		p: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAABECAYAAACVkosbAAAIyElEQVR4Xu1cQW8bRRj9vnFCc0uOVVOoUxJoBSjJL6iPUdWqFggkKqRYiANIoK4QQhWXbgEJBBy2gkMPCDkCLkVI5R+QE1JLZdqKplJSed2Ke32DJN5Bs7szO7s76521147trC+pms2sPW/e9973ZrwIA3odrTbKU+DUANEAgKdI0Hjy6+rNAd1uIobFvD/FfLWxAkANBFh3x3bvgP5P2KQlMP75ZfWvvO87CePlBsb8+TuMBTVAOCPmno+O/j/4D4SN0j4Y9s3Vp5MwiXl9hr7AKFcbc3sdpwYEWCk6wZc/n/sIK/ivOVvahFDr8Y1VM68PM+7j9AQG04PSvmMAAmPCrFeOgtXPK1P0/+WyxS+nBFpIqfHkRqEnmcA4fu52BSgalOCFYGLDupAOhAecuDH/B8FNp+Mcaj3RAmP+LNMDypiwLImxVHZ6Y4VAJCzyG6UZx7Drh09PEsFgerC7u28wUUamB+EJi9b/AKME0eYTjxExTxi3jQTMxz8vW+OuA1nefwyMo2t/lAlOm4CBNfVwCDuiYFV7/68p2pHr1OMG96MtQkjN/umV37N8qHG9VoBxfO12hSKYFNC1plwTAg0QvcKgypMYN8oeRNjEqU7Nrq/a4zrROu8b59du1SggY8IJlfvxVrwKCNHRDYgV3BhIBoHANUL2zUnVEzy2dpv5fCbOs9FJHwVWRMshILQJRdP+8eWJ0xN3vl2x/m/PAiRShMF1oAsr+K9SRFtpZRUalKxN4ffg366FBGp2fXL0JCTg82dvrQCULIr0zLBZoWMSwjGLWAmbCKRm10+PvZ4ore2x839WkYIFgL6lVdRvTVZoWlnf4UoMiIeMXbUJkV4FZ98aZz3p2vQdP3fHpOjmTrPdrWyS9cWMVjYKelLMklg62whg2D+8VNdxL6N2TWoH7oaBDrUA6Hqv+VNCp51oZRWiLXrDkMkIDJ1odHwpugvoGPb346UnqWDw1ePuUzBQEM4MpsFTl8Is/U74fbms+g1KaNjXx0NPtMHgoByrNqoEXFCUfQlfwvGJUfcrak3JXJ5S4hh6FXZ3R15PMoPBQTn+6h0TgET0hHfuilS2Xyub2Hyq4hilhrXZFrB9/fTI6knPYPD+pINgURLeYtVhRe9WNl7OFOVJxDly1O+z8C5lIn/99MjlXX2BIfTk9caKZ4WZnqgCxbj7EWDI7yCy+tO1SZsV4HJVytwAYINSMEdJT3IBg4Py7GuNKiVoBZF7Wirbt5XVss5eqqxcJG0k1HKmZizbWjjw/fhcweCgPPdGg6W/yrwreWI0RDvZykZPoYRYoGBFdEugRQk17W8PVk8GAobQkxliAYX1eCSfXsp04hg9rVA1nnFnx+7nRvWUmjvfHYyeDAwMoScXGyvEIW5/0hcrQvXeq/8BYIpyKOa7+z5MuI/xbkIRNihxTNsabn8ycDCEnrx5r4puf4J+f8JtsHqVJm/z9iXaynKW4OzagGA58MzQ9GRoYAg9uXjX9I98xvIudSrbt5VV7teHGOFRVmGHGatoi+Vdj6wXB340dehguHpSa8w5eyVWutblrGnAVjYLK3xgQizcJBSMbeuFgR1NPRAwOEvKF/9eoSXHohA9Epq8oaUn2olWNuKyYmeBNfb3YaPTmTYGYYUPFAyhJ2/dqxKCft6lKhdBGUlnD5vP7KKdlCwn3K+NCNbON0u5Hk0dCTAEU2r3TUqJAUj9I6NB1iWXdVXEHsQe+lY27fiRhoa1mP49+moxFz0ZKTC4ngBMs02tS/IED9LKZmRFqJT59noTqWNsf92fnowcGAFLtsoUnXrQn8hWOClm6X54QtVTRPKq6CZV187eLYhS/4MIG3szJcM2e4tWRhYMAco79ytACYu9pf14ta7ohJTiA6cEmuna5G8ThMNHBibrT8ydL57PfJRo5MEQoLz9wABCmWDOqmq9WrSTGsr+TUKUFR7rQuO2oOTUdj5f0o7qxwYMoSfTRxggl6LlRZsVPEOJr2iOuzenAYWi0XvwlYakMeTSBbhZcrD28MuF1KNEYwWGYMm7W2VwKCtd/lfWBm5lY128Tr8Tjlnotb0pYnbTk7EEQwKlAg7UkfD9+LS8q3t50rCyLmViQCScRVaUzjZFNHc+W1DqyViDIUB574GB1D28HftKW7qDCljVh2jHcq1uGoYILYdAbcdcCOnJRIDh6onRmCP/HjEpwUvqA9xDEW0p2k8IHn1PwX4QApsIUHtoenoyMWDIeoJTWAcq5V1xpxPrH4bFiuAbXHK6QK/uArDt6sl8ld/fqiBg3duPHxFWhFxWLKRkR1Mn+3Xyg4cGeF8GUuZdgjT5WVmFFQ73OwELw4tk4sHw9KQ5R5w9E4BK/Yn30dPLkzeR2a1smrOLNKSTqBndeF42tsolwDoF4u7HZ7ayQmXVGZhOdJ/EiokUcJ2iu2hsVxxw6hjaj1c3jrxh5+CF6BTutHsuT/w9H4oylQTQyQ+3DQSWd6G0Hx8uL32XJ2nJd2PFoWWGDA7TkxJ2TCBU2j/xxGSYrCjAkFBx9WRqSuRdwxJteWEc6jKlKl+LH21XKPL+RC5ZvW9opZWnQjNSlH7x40cGMD3pM+9KdGyK+xfM6AKKqydHOiYCxvZPvElOj+51WVFoho4PBoBTl5vlffdoKhXP2dLZWcwCRAGGJhj8ssXL2xUoEQspLMfyLrmd5ymH6EMi2VjCfYsylREQdvnSJ032MDS2QRTpT1R7I3pAFMzoAQj+J2WzOffMvmNQwCuqE/NBjxJ56kOXexbM6AMQ9qenzGbZ6VCLAl5Q71XoJ4AFGH2CIfTEbFbQAXZeeLkXVhRlKicg5GGWzCZ7piN7CE54/0TjXgUzNCYp6yWunrgPVMMrWf62ACPLbGW81tUTJOwhOF5/kvIqwEiboRx+f8psVhxEZoWXuw1XgJHDZOsOsfRps4bUBcXTk8irAEN3JnO6ztUT94FqcT0pwMhpkrMOo9KTAoyss5jz9bKeFGDkPLm9Dsf05H+6Q8nQwzMmWgAAAABJRU5ErkJggg==",
		e: 1
	},
	{
		id: "image_7",
		w: 49,
		h: 53,
		u: "",
		p: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAA1CAYAAADoDQMKAAAE2ElEQVRoQ9WZXWscVRjH/2c2aRbSmlGo1BuzxQtfbkwFwdKLbEBEvDEXXigWut8g8w2cfoPJN9hCEe9ML1oFhTYUqVc2wQuFIklA0dqbXRTcbGaeR87svO+8nJmdbSYDIbnYl/N7zv/5P/9zInCGnwsX7m0CbImzyLC8fHdNE7AArMv1nykIXf9ad5wlC8w3osU/MxAvnL9rMmAAWEmqp/EQvu7BWM2SfmMhdP2bjmNT39d9Xu82DkLq3qYlUxBvqZpOoyCWX/rWEAQJsAImgNUwGgFx/tJ3XWGjz8yrIIYEEPK3/FF4ThWifel+pyW4D+Z1uWBBNFk4y789CC4GORUIvXNfPyHNZOItd7FSOi5EZOFRqILdeO4Q7dd+6GnEFohW3KoTQchqewCZUDkgzw2i/cajrnBggentmHRkxQMIb0diUJ7EThOivfaoI8aaxcQfT6rsVd+XTtAD3mLToPz3ZYDMbyfWHutt2AYcfOFLJVU6spmjjZx0J79Xcix3LhDtdx73mFkGNVf3geskqpzZyDGohMRSdqNWiPZ7P3eJqA/iVWXppEnM64lU+BTLrQWi3f2l44ypL5hcvw+qn3SdNOmouFPBAJwNonugL+I/Ew62wiGV3qCZ0lF1p5wBWBli8f0nBhOZIF4JFxiJC2muM6s7ZQzA0hALHz7psiP6Al7OScSFcPJOu46rcRWJRbNT1J1iAzGMI+oQHx2stSCHlZdzPL8PeiAysFSlM/26yQyZsty0vpGv855iiM0DXUPLAvGNeL6JSycaF4LXqQy2su7khcTA/YouCrRP/pAhzRCe3yeTZkw6sQb1ZoOKdKq4U2IApu/EZ083BZGsvpvvJ9km4jq51QtfG81EmdJJwCtP9Qh8HOL6sy7A0nHWgy/NiwHJRpMfnJeJZpXO9PTfZwfGBOLTPztotUwA4X1O1iHF12QyaSpIpw538oo0FA6MfwYfyIsECFx/aoLF9H1OMPr95JmdgULJRaZ1UHX/sJMTs6PfVeBOgujmwnjBGgw2BqE7ff539vkvy6PTJKbSNwWxO8+aNfAd24Yx+mvjcPryLA/Cr1DaIaWgejVKZ19zHOPf3zceZF+e5UHId+UdUsr2TZrEkmeJ0HWGzDBGv11zdZ9/eVYEIcWmGgMS7lTOmqPBkbaXjo/NwWGo+9kg5LvzDin+blR1p/hNxy4cpzf69eqU7meH8GUVHXgqh/tk32RP9SMB6o323s3UfT0QsQUlbulUp/q0Ow0FsXn80xX5D5PKj0BRT0Q/ulTsDi/F0oIjE7ZPjm0Te1cCv69KUQ4ibwCq9M1kJ3ZbttYb/fhmKd3XIyf/U/IOKTnuJIiPhEPG+OFbO1UrXn1OJN8pLTcnPqdIZwgmy/7+dZnN5vKUk1N0N5TcCbeckTDw4PLMuq9XTu7cSBmAkewkiHc1YuPk3uW9uZQ+8aHVdmJqAAaWeySYDWfn1dp1X/9OxJrcjQtDwWyRPbawM1/ppMFU3wlvN0C4BZCJr16pzTLLSrA6hMAuIEzcvlgpKpRdaM1yEkdgNvHly4URuc6F1gch+CYWzlnovzhXyywLrygncQeObZym7mfZiX0IYTRB91UghmAYTdJ9OQjGNs4tmk3TvRqEtEzb6TVV9wUQzw4h0Gu67vMg/gcsd5WVtPOCsgAAAABJRU5ErkJggg==",
		e: 1
	}
];
var layers = [
	{
		ddd: 1,
		ind: 1,
		ty: 2,
		nm: "qube-icon-08.ai",
		cl: "ai",
		parent: 2,
		refId: "image_0",
		sr: 1,
		ks: {
			o: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 105,
						s: [
							0
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 119,
						s: [
							100
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 120,
						s: [
							100
						],
						e: [
							0
						]
					},
					{
						t: 135
					}
				],
				ix: 11
			},
			rx: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 105,
						s: [
							161
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 119,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 120,
						s: [
							0
						],
						e: [
							161
						]
					},
					{
						t: 135
					}
				],
				ix: 8
			},
			ry: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 105,
						s: [
							-30
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 119,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 120,
						s: [
							0
						],
						e: [
							-30
						]
					},
					{
						t: 135
					}
				],
				ix: 9
			},
			rz: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 105,
						s: [
							55
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 119,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 120,
						s: [
							0
						],
						e: [
							55
						]
					},
					{
						t: 135
					}
				],
				ix: 10
			},
			or: {
				a: 0,
				k: [
					0,
					0,
					0
				],
				ix: 7
			},
			p: {
				a: 0,
				k: [
					25.583,
					28.396,
					2.282
				],
				ix: 2
			},
			a: {
				a: 0,
				k: [
					0,
					13.937,
					0
				],
				ix: 1
			},
			s: {
				a: 0,
				k: [
					100,
					100,
					100
				],
				ix: 6
			}
		},
		ao: 0,
		ip: 105,
		op: 135,
		st: 55,
		bm: 0
	},
	{
		ddd: 1,
		ind: 2,
		ty: 2,
		nm: "qube-icon-07.ai",
		cl: "ai",
		parent: 3,
		refId: "image_1",
		sr: 1,
		ks: {
			o: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 89.999,
						s: [
							0
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 104.999,
						s: [
							100
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 134.999,
						s: [
							100
						],
						e: [
							0
						]
					},
					{
						t: 149.99921875
					}
				],
				ix: 11
			},
			rx: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 89.999,
						s: [
							174
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 104.999,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 134.999,
						s: [
							0
						],
						e: [
							174
						]
					},
					{
						t: 149.99921875
					}
				],
				ix: 8
			},
			ry: {
				a: 0,
				k: 0,
				ix: 9
			},
			rz: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 89.999,
						s: [
							62
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 104.999,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 134.999,
						s: [
							0
						],
						e: [
							62
						]
					},
					{
						t: 149.99921875
					}
				],
				ix: 10
			},
			or: {
				a: 0,
				k: [
					0,
					0,
					0
				],
				ix: 7
			},
			p: {
				a: 0,
				k: [
					12.625,
					106.25,
					0
				],
				ix: 2
			},
			a: {
				a: 0,
				k: [
					12.75,
					6.938,
					0
				],
				ix: 1
			},
			s: {
				a: 0,
				k: [
					100,
					100,
					100
				],
				ix: 6
			}
		},
		ao: 0,
		ip: 90,
		op: 150,
		st: 100.8,
		bm: 0
	},
	{
		ddd: 1,
		ind: 3,
		ty: 2,
		nm: "qube-icon-06.ai",
		cl: "ai",
		parent: 4,
		refId: "image_2",
		sr: 1,
		ks: {
			o: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 75,
						s: [
							0
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 90,
						s: [
							100
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 150,
						s: [
							100
						],
						e: [
							0
						]
					},
					{
						t: 166
					}
				],
				ix: 11
			},
			rx: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 75,
						s: [
							-170
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 90,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 150,
						s: [
							0
						],
						e: [
							-170
						]
					},
					{
						t: 166
					}
				],
				ix: 8
			},
			ry: {
				a: 0,
				k: 0,
				ix: 9
			},
			rz: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 75,
						s: [
							59
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 90,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 150,
						s: [
							0
						],
						e: [
							59
						]
					},
					{
						t: 166
					}
				],
				ix: 10
			},
			or: {
				a: 0,
				k: [
					0,
					0,
					0
				],
				ix: 7
			},
			p: {
				a: 0,
				k: [
					86,
					64.156,
					0
				],
				ix: 2
			},
			a: {
				a: 0,
				k: [
					11.75,
					7.5,
					0
				],
				ix: 1
			},
			s: {
				a: 0,
				k: [
					100,
					100,
					100
				],
				ix: 6
			}
		},
		ao: 0,
		ip: 75,
		op: 165.6,
		st: 84,
		bm: 0
	},
	{
		ddd: 1,
		ind: 4,
		ty: 2,
		nm: "qube-icon-05.ai",
		cl: "ai",
		parent: 5,
		refId: "image_3",
		sr: 1,
		ks: {
			o: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 60.001,
						s: [
							0
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 75.001,
						s: [
							100
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 166.001,
						s: [
							100
						],
						e: [
							0
						]
					},
					{
						t: 180.00078125
					}
				],
				ix: 11
			},
			rx: {
				a: 0,
				k: 0,
				ix: 8
			},
			ry: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 60.001,
						s: [
							178
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 75.001,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 166.001,
						s: [
							0
						],
						e: [
							178
						]
					},
					{
						t: 180.00078125
					}
				],
				ix: 9
			},
			rz: {
				a: 0,
				k: 0,
				ix: 10
			},
			or: {
				a: 0,
				k: [
					0,
					0,
					0
				],
				ix: 7
			},
			p: {
				a: 0,
				k: [
					99,
					15,
					0
				],
				ix: 2
			},
			a: {
				a: 0,
				k: [
					0,
					15.25,
					0
				],
				ix: 1
			},
			s: {
				a: 0,
				k: [
					100,
					100,
					100
				],
				ix: 6
			}
		},
		ao: 0,
		ip: 60,
		op: 180,
		st: 67.2,
		bm: 0
	},
	{
		ddd: 1,
		ind: 5,
		ty: 2,
		nm: "qube-icon-04.ai",
		cl: "ai",
		parent: 6,
		refId: "image_4",
		sr: 1,
		ks: {
			o: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 46,
						s: [
							0
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 60,
						s: [
							100
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 180,
						s: [
							100
						],
						e: [
							0
						]
					},
					{
						t: 194.999609375
					}
				],
				ix: 11
			},
			rx: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 46,
						s: [
							189
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 60,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 180,
						s: [
							0
						],
						e: [
							189
						]
					},
					{
						t: 194.999609375
					}
				],
				ix: 8
			},
			ry: {
				a: 0,
				k: 0,
				ix: 9
			},
			rz: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 46,
						s: [
							-61
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 60,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 180,
						s: [
							0
						],
						e: [
							-61
						]
					},
					{
						t: 194.999609375
					}
				],
				ix: 10
			},
			or: {
				a: 0,
				k: [
					0,
					0,
					0
				],
				ix: 7
			},
			p: {
				a: 0,
				k: [
					12.125,
					7.938,
					0
				],
				ix: 2
			},
			a: {
				a: 0,
				k: [
					12.5,
					64.5,
					0
				],
				ix: 1
			},
			s: {
				a: 0,
				k: [
					100,
					100,
					100
				],
				ix: 6
			}
		},
		ao: 0,
		ip: 46,
		op: 195,
		st: 50.4,
		bm: 0
	},
	{
		ddd: 1,
		ind: 6,
		ty: 2,
		nm: "qube-icon-03.ai",
		cl: "ai",
		parent: 7,
		refId: "image_5",
		sr: 1,
		ks: {
			o: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 30,
						s: [
							0
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 46,
						s: [
							100
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 195,
						s: [
							100
						],
						e: [
							0
						]
					},
					{
						t: 211.000390625
					}
				],
				ix: 11
			},
			rx: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 30,
						s: [
							178
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 46,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 195,
						s: [
							0
						],
						e: [
							178
						]
					},
					{
						t: 211.000390625
					}
				],
				ix: 8
			},
			ry: {
				a: 0,
				k: 0,
				ix: 9
			},
			rz: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 30,
						s: [
							59
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 46,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 195,
						s: [
							0
						],
						e: [
							59
						]
					},
					{
						t: 211.000390625
					}
				],
				ix: 10
			},
			or: {
				a: 0,
				k: [
					0,
					0,
					0
				],
				ix: 7
			},
			p: {
				a: 0,
				k: [
					13,
					5.25,
					0
				],
				ix: 2
			},
			a: {
				a: 0,
				k: [
					12.5,
					93.25,
					0
				],
				ix: 1
			},
			s: {
				a: 0,
				k: [
					100,
					100,
					100
				],
				ix: 6
			}
		},
		ao: 0,
		ip: 30,
		op: 211,
		st: 33.6,
		bm: 0
	},
	{
		ddd: 1,
		ind: 7,
		ty: 2,
		nm: "qube-icon-02.ai",
		cl: "ai",
		parent: 8,
		refId: "image_6",
		sr: 1,
		ks: {
			o: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 14.999,
						s: [
							0
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 29.999,
						s: [
							100
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 210.999,
						s: [
							100
						],
						e: [
							0
						]
					},
					{
						t: 225.99921875
					}
				],
				ix: 11
			},
			rx: {
				a: 0,
				k: 0,
				ix: 8
			},
			ry: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 14.999,
						s: [
							-181
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 29.999,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 210.999,
						s: [
							0
						],
						e: [
							-181
						]
					},
					{
						t: 225.99921875
					}
				],
				ix: 9
			},
			rz: {
				a: 0,
				k: 0,
				ix: 10
			},
			or: {
				a: 0,
				k: [
					0,
					0,
					0
				],
				ix: 7
			},
			p: {
				a: 0,
				k: [
					0.25,
					53.25,
					0
				],
				ix: 2
			},
			a: {
				a: 0,
				k: [
					99,
					68,
					0
				],
				ix: 1
			},
			s: {
				a: 0,
				k: [
					100,
					100,
					100
				],
				ix: 6
			}
		},
		ao: 0,
		ip: 15,
		op: 226,
		st: 4.8,
		bm: 0
	},
	{
		ddd: 1,
		ind: 8,
		ty: 2,
		nm: "qube-icon-01.ai",
		cl: "ai",
		refId: "image_7",
		sr: 1,
		ks: {
			o: {
				a: 0,
				k: 100,
				ix: 11
			},
			rx: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 0,
						s: [
							85
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 15,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 226,
						s: [
							0
						],
						e: [
							85
						]
					},
					{
						t: 239
					}
				],
				ix: 8,
				x: "var $bm_rt;\n$bm_rt = transform.xRotation;"
			},
			ry: {
				a: 0,
				k: 0,
				ix: 9
			},
			rz: {
				a: 0,
				k: 0,
				ix: 10
			},
			or: {
				a: 0,
				k: [
					0,
					0,
					0
				],
				ix: 7
			},
			p: {
				a: 0,
				k: [
					296.75,
					309.25,
					0
				],
				ix: 2
			},
			a: {
				a: 0,
				k: [
					49,
					-0.062,
					0
				],
				ix: 1
			},
			s: {
				a: 0,
				k: [
					100,
					100,
					100
				],
				ix: 6
			}
		},
		ao: 0,
		ip: 0,
		op: 240,
		st: 0,
		bm: 0
	}
];
var markers = [
];
var blueAnimation = {
	v: v,
	fr: fr,
	ip: ip,
	op: op,
	w: w,
	h: h,
	nm: nm,
	ddd: ddd,
	assets: assets,
	layers: layers,
	markers: markers
};

var v$1 = "5.3.4";
var fr$1 = 60;
var ip$1 = 0;
var op$1 = 240;
var w$1 = 500;
var h$1 = 500;
var nm$1 = "Composição 1";
var ddd$1 = 1;
var assets$1 = [
	{
		id: "image_0",
		w: 24,
		h: 39,
		u: "",
		p: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAnCAYAAAAVW4iAAAABnklEQVRIS7WW63GCQBSFz+Gxo//SQdJJWqAUOgglaAfaiXYQ+3BmA4KgPDazTMxEXc0q7P29cz/ux1m4hKPabrcRwBnH7i+lfGvbdgHyXfceDSClfOm6Lgb48fehRwFspYyo1AzA66WRQQCtQyksAPQ6TPUUoNcBxATOdIwCkFL26TDpGATQOgDe1fEUQOsAEIPn6bCN9913IGUWkeZ0DAJoHSQX/Lksts3+VaR1eJ53dVlGAWRZFinAOh22UGodvh88nA5rQLbbKdvDz5zjzjkgzx1P4BqQ54XbCfLCMaAo9m4nKPaOAXvngLJ0q6h0C0hZlpWjCbgEuoRVNTpgo5SKp9Ppql+8quow1gQpoJLJZKI/+b/F6jAcQGAphIhJfl0tXodhgI1eF086jL/Mw/H4jKJUAclEiDMdRsDxccAyDEOjjhuA2naCNYkkDMM+HbbFuv4XkOrYCSH0f/vhYl03dyZQ8yAIElM6bElsGiNgrdMhhPi0bXTr3CUg1XtoEPRrzCjFtm1Piuae5w3SYUxR0zQr3/d17AbrMAG+AZ94z7Y9sCJ6AAAAAElFTkSuQmCC",
		e: 1
	},
	{
		id: "image_1",
		w: 49,
		h: 29,
		u: "",
		p: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAdCAYAAAAD8oRRAAACnklEQVRYR82Y33HaQBDGv5UYwksG34CHMS/BFYQOQgehg9BBVILoQCW4hNBBqMTRjAfZyJoL5CUx1m3mhLExf2Q4nUj0rLvdn+7bb/dEKPGZTCZ9gIJlCPba7fa3MsJRGZve3Ey7jqt08p829h8TeHBxcfHDZlyrENfX8uxd7SEA+EtekgwePvyuBZeX4qcNGGsQURT5IPIA1A9MLGQir91qFZZYYYjJ3V2fGFo6Hw5MfuM1HoOLScwYYjqddpXSuqdN3RuxMGNYq1UDIY6X2NEQUsqzP4uFD8ZXo2xzF1FIUF7rSIkdBXF7G3tE7B+heyNOZoyZ04Nd7CCIKI57DnAFZkPdG7EAzMNq9W2J5UJEUdQht3JF235vmJXBMkIIRV6r1dzrYjshtO4XaeqDuQTdG4Asl4zTx8edEtuCiOPEA8rXvTEKeFipVF652DNEHMc9wNHd9qN5gJOtDIngNZtLiVEkZaeSprpZfT5ZCvYCjR9dd0D394kexk7rOvYg9E5hJqckSTwGSvd/u7ljxkBw3mj4zzWhHUkp5QP0PznSTm4ijIjIE0JkI/2WO0kpOynzv+0N+48sVESDcyG+r7+yt9lJKftcaDq1Kp6ZzqXREFryW8+bY0eSSF/bWdnzUg7ySMdfSccIQi/K6gUICMi9sVn99kvXGYgN6RhDrBZKKbtPF38rd4g90DOAdUfeKZ3CEGswfVD2F8NufyEaQalc6ViDeIGZ2aqXkFkdJB3rEE/10nEcx2ezeskalqjXD5ZOKRAvp/Krp299RFv/mvbV+0ip9GjplAqx2nw+nw+YsxFmX72EStFAiPevGlYRZ3uzT5hsri3ZcRxPjwZr/WXGzEG9oHROchLrQfQI47pupvc0Tf28hmXysVZr/gIhsf6oK5m1DgAAAABJRU5ErkJggg==",
		e: 1
	},
	{
		id: "image_2",
		w: 25,
		h: 114,
		u: "",
		p: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAByCAYAAACm2nr6AAAC90lEQVRoQ92aS1ITURRA7+3ClDOlCpJqtUqzAt2BLsEdyA7sHdjsIEuAHThH6hES8v8Hwp+kIeRvlcwYmFzrUYKGgg6dzr2DZN7vvHNud0YXgfG3qdQKEdrIwdhQ6pNBhk1AH/X5M4Uopd4NCWwA/PL/5WcCUUq9/D0CCxG/PVTGN+Rv9wgAvHgs/dQQ3R0J9eHvJ83VM0R3H5GxdjvUSQBPg9fdhyOwAfHrUw72PPiNTWUjouXW3Q3smuuHUp8Rbrq/9Xr7iSZKqQ8jMPThNx+T39+YiR4qgWEDwtjHNBOIHuoIDP0xTd3ddSZKba8Q6r8Cf93dIdEY+c0x6XlUEpCt7Ti/iQgkGhMwicZ2+HNti0DiCX6TmAhkJylgIgGJJwRM4okUf66dpAgkzW+SSEpAUhl+k6QIJC1gkkpn+XOlMiKQHL9JOiMByeb5TTK5eYFkcwX+XNm8ACSXL/Kb5AoCkHyhxG+SL84LpFAs8+cqlAQgxVKF36RYFoCUylV+k1JFAFKu7PKbiEAqVQGTSnWPP1dlVwBSFYHs1fhz7cpA9vlN9moikAN+k9r+vED2Dw75c8lADo/4TQ5EIEfH/CaHcwM5Oj7hzyUCOT455TcRgZycnvGbzA/k9KzOn0sEclZv8JuIQOoNh99EBNJwzvlNRCCOhIlzfsGfSwRyftHkNxGBXDQv+U1EIE0Jk+Zliz/XZUsE0uY3abVYIQ4irGCr3eEwuSKgyGvT1KsqgO2ZQ3D9+jpghcOLv25XTbDdmZlJdGgY1ptgsHR/jwXbna7fXA4hWK9Coe+PrsN1ulNDrgggYoZCN91d13w63Z5nEwRYDwSeWYuL/7q7QroeIEQQ1Ruaprm8Nen2Y0tk3d4TTBAdJLKDweCal8Pv3q5er++W64oIIoHAQuSpaR66BPb6j0CI1ofDoW2aZmOa24/l6vcH902iAGQvL3vr7jr4/uAOol9JK7i0NFV3V8hg8JOIYHVhwfDV3RVSr9efh8Pha7/d3Z7/AxVi2rslfVoKAAAAAElFTkSuQmCC",
		e: 1
	},
	{
		id: "image_3",
		w: 100,
		h: 71,
		u: "",
		p: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABHCAYAAADx2uLMAAAHBklEQVR4Xu2bbW7aWBSGz3shViKlTVEUqZGaD1Yw/TH/ww6mOyg7qHdQZwfuDpIdTHYw7GCygClhUilSP8SgVEqFwHd07ocxBAIBG9vYKFKQIYrt5577nvecY3xu39yApFev1y+ofKV+B/C5fSPNWbQMmL9SP6sCn0AUCAEgAl1SEHDE3BT4vqR26Y+B6FPpEcinIPDr9fp/qZ1dAf/xLCA6WggdAekdHx+X+rKmxTEHCCkwkqhVAXlHR0elviQMZiEgfA4cL0S4HA4rXr1+WOpLQmCeB0RtY9QDSX8wGJT6kgCUZYDoaIHoSQrc4zdvSn2JEcwKQMwmRnQtpXCPjg5LfYkBTBxAWPlZ+K+qAu7hYakvq3CJDYjaxVhjJJ33+79KfVmSSvxAdEbWA4ijpdSXZ4JJCojaxkjSNSAZTKkvC4JJFojaxpgLriCDUl8WgLIWILyJcU4mQefbjuPXarWyPjYDzlqBGAPTIwnv9esDf4EFU7ivpAFEcxHoBETNw4ODUl8iyy49INruM5zWcDholv5FU8kCEJUnC+BTpVLxiq4vmQGiYgXcGIN3sL9fWH3JGhAdtoSOlEHzoID6klUgugEj0apU0KzVaoXpv2QaiHYv/JKfhBCF0Jd8AFHygp6U5O/v17xNNid5AmLyQuqAyK3Van9uIpg8AtHuBdQiKRnM35sEJs9AFAcBXAZBwGA2oj7GQDiDOQkbTGa56bks03SyUyf2mP7ApKiR91OPhY7cjK4YqR45dXXcrHqb9o6O6T835cnIe6P31r+AyN/b28u9vqjL+qfd9kBwAezZ8M8ZEAusw42xly9f5lZfbF5J7Xb7FQnhk6T3Y5ExLyqi0ZJehExGUEsIuLu7u7nTlxCIjYx2u/2WAB8QZznasqZvaVJeDodbXq22kxtj+QjICMxtA4IuAKMvs3QjmxFidEedXI/MYF8ehH8mEAum0/niEqQHor2pQp59IBZOh4i83d3dTA9ezAXC95v1pVqtepLwwSQ9Wcuypm5ZYR6osjTb4JctKSveixc7mWyMLQRktI3dnVaqwwsQnWUs7V0ciG2Lkbzk+tjOTrb05VlALJjb29sGQXDon4Qrb5ZnmfAboaOI14c8H4huivWCgHwe7MuKviwFxIL598uXpiDhE0j5l9C7jOnKWozhUkAiWxrXxzhaUteXlYCE+uI4LggfcwzEPv/SIpIMJjV9WRmIjZa7u7vTQEqfCH+Mb2O5iBALREkjdH0sFX2JDUioL3d3jQqDgfhttHNNr19F9WTFWtaqW9YYEF1QU2d07jiOD2BthcvYgUQipimJHT/rS26B8OX0ALiO46xFXxIDovWl+2p7+5dLEB9NUhUmncYY2F+rVnuTihC9vnS0XDOYra2tRPUlUSBRfeGcXxIXLhMpv68DiF5MoKvBYOAm5V/WAiQCpgFUPICN5bjYZ1RDohFigdjLOa9Wq7Hry1qB2Cv5+vVrUwIeSWssV25QrTNCzGWoaOkRkVutVmPTl1SA8BV1u91X/f7A5YYSG8v8RYgCYiQG19xGjkNfUgMS1Ree6QXEezuGZeGEc1nzW7hpRYgFYn9fsfADWLr/kjoQC+bbt28NnuslorO8ArHlIyn1YN8y/iUzQCyY79+/vyMC18dO8hYh0XoeN8YAYijPGhzPHJAwYn788ATBJdUYmzt1koktawKI1RhujDUBLORfMgvECn8QBD4B7x9FixVUTSvLQOwaaxkwT+pLpoHYK+l2u295rpf1ZeEZLtslDIFFZ8ksRO2FzM+4z9Du/AkfMpZl2W+GLQhjIsPjkTefuJU8S19yASQC5p0k8kE4mZuRZRcIXw77l6n6kisgETAeQevLzIws20DspTzSl1wCsfpCnFpK+pATDZm2fT3Sl9wCiUTLKYALO9gX1ZhIi3Y0dWLrzdMiSBcPJ3QjrPZO1LKW1pBZYK6J6PfcAxmBuW8IIS9C/5KPLYtPX82L8aIyKcZTkZS/z3q9ngsIT9fHJrKocPY41SzL3lQWds4cxyrGGxMh0aXDhUse7COiD2NpbXaAXJqoeORJNhJIVF+4Z0GYGLyY8B5r9CFsDnl7munaNxqIBXN/f99QNSVAD16sHwjrBFeB5z63UgggFszPnz+b6lELgqmPJe7UlU5AV7EXehUKiPUvjuO4BOjBi4RKJ1LiUggVFc8aISocELtMHx4eTqUZ7ItZQ1oAuLq7VJOqsEAiYBqShZYLl6sZw04QBM1V27iFBxIB0yQCT8SoJ5LNLNaEa484+RG8WAcdSiARqe12pRrs4744AcZYzi6dEMnYR4FKIFNyH9YX7omTGuybCuRqMKi6OzvL6cRT6VYJ5Im78/DwwP7FgxBnJiNrcZ98VZ0ogSzkAGZ/qd/vv+VPHcdJ/Ln3/wFt/B5n/eJbVAAAAABJRU5ErkJggg==",
		e: 1
	},
	{
		id: "image_4",
		w: 99,
		h: 71,
		u: "",
		p: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAABHCAYAAAATBvm1AAAGiUlEQVR4Xu2c327TSBTGvzNuol6s1L5BUsG2W0TVtVAlIgRJn4B9g/oN1m9AeAP3DeB+L5brXdYk3coSFfJChSJRpGzeYCNxASXxrMb/mqRJmxbbmaHjC2RBOzbz8znfOd+MTdDHwmfgY7drMVCTFn4nN/gGTrrdBnEICHUigoaxgIeh2+1Wh5w3CbSXXF7DKBhEt9tdHQwCmxjZAFYEAA2jYAjich8+frQI1ARQSSBoGAWDODk5aXABgaiexIGGUTCETqdTZUapSYRIF0YEWsMoCIbQhdPTgQ2CDaKVVBU0jIIIxJfpfPhgEScRDZXJaNCRURCLTqfTIDKaINRHJ33WuU5TOYARugDGmuDYSyuj0eZtxrmGkSEM3++ulpc/2wRmE2El0udYHTSMDGf6kqHedzoWIh+pApDIRLE8aBiFUTjudBqMowlQXZhI0dRrGIUBEBcSuiB8JID2EgAaRqEIAN/3V5eWyjZjZHNg5awyisJCR0ZBQN69f28JaxugSurlpcKsYRSC4fj4uMHBwn5h8snXkVEIApGShI80jH2k6U++hpEzDKELYEs2I2aDeOwjaRg5T/v54f1370IfCYRKuOA5IsrTBFpHRg6IfP+4ARYuedbjVkF0CxpGDnM9c0jf96tgRugjRXOfdMzxuY6M/HEIXQgiD8kmUOgjaRj5z/u5K7zx/dhHospUAKNgdGTkQ+jI9xuMi36Bh7pwpgkTqUnDyAeAGFXowjDsnLGXANAw8pvvqSMLXRgEQbi+IPYjpSkpDYSkWtKRkSua12/ejPcLE6lHocjoKbu90zs6ahjRkmd9piaoERl9cDi3bq2pt/HZ8/zQRwLRXrrKljZt53sHmSODET0XJffa2tp/cUDnmkUyG1zowufTgc2IxJ6klbFVNtVggFqBQfb62to/oxOkRJryXr+OdYEq4Q3HfygYGT0Ct2/fvv37tKdUahiedzThI8Umhnow+hzkbPx4S5TdMw8pYXieVwXCTWETPpKCMDiel0pGqgvKwHBdf7W8fHqBj6QODA60GLi9vr4+pgtKwDj0PAtg0X6kaa5qqBUKwAD1CGRvbEzXBalhHHheg0AOAdupsa0mjD4HdzY3Ni7UBSlhuJ5XLQXcAbHH8UOfWHrTLW6ZI4PwfLlcnksXpILhuu7qUrlsA+xJVBTF+zCSCmnUzjh3LluaQovArc3NzX+zaKgKrabah57FOHd40rSpC6PHIgivsoCQjFEIDPfgoGEQcwDaHmva1IPRFy9J3rnzk5MlhEJguK5XZaXAAcfjKBtNpBmlYGD/65cvTdM0Qx8pjyOXyBC6IPYjEdGTsxdD1ITBCC3GKDNdKFTA3XbbIoiUNP4SiYKR0QNn1tZWtrpQCAzXPWiA4ICwnUx8lIWmV0tnKUu6aqrPiZrbd+/kogu5wnBdt8qZIZq2x+lG+TOVVgoGA/YHg6+56kIuMIQuRPuR6Mlo03b+XIXIYK1gyCzTzKZfuK64X0vAX7ptC+BO9HLh+GQrBqPHGSxzayvTfqEQGH+4boM4OUS0fXE0xK2zvJrRF6akuX23cF345jQldGHIRYXEYx/psmiQGAanfWCwMF24NgyhC4MAqS6kneJEhaSEZjC0KAgs0zQz8ZGum4quBeOl61qcU9ovjA4yWa5KDiP0kUzTlEIXrgQj0QWE6wvTD0Vg9EG8ec80pdKFuWBM6sKFvyR7mgL2DQYpdeHCeZ2lCyrCYKAWE6WqxLpw4bz++dcrIWjR95HmPCRMUz1wsnZ25NeFSyNjGEBsl/x1ThbnLI4FCnifCM2de/eU0YW5NSPg7BlH9IKJ7GmKiPZLBlNOF+aCkfyQ/NUUhT5SrSZvv3DZwzyzSp31DxL2GaGPVNvZkb5fyByGGFCSDrwvXp6/f3/nu9CFK6WpaT8c9SDhV2bCb7QWVk1x/vTzctnZzXHd+bpPcR6/dyULXehJ9BYpordIxxaRwr8J7zGDlb4XxAO7VqtJ6yMtHEZyA9F6BppEPPxOX4al7VuGEMJ3qwvfnKZmpK5kpS/+4v03RUafiNsParVneTxxqox5pTQ1CwqH4RAT3/y+epriwNPB6bKzu5vffqQbAyP5j7ru4c9ggah46vNoBgEvDEY3ThdySVOzBnXb7V/EFn/xfb9plReB3oLDfvjwZupCoTDSSGn/bVMo8tGXbIjQBzH70YObrQsLgRE3jT8YpZKFgD4Nh6e/7e7uflIlfy/iPv8HJr7qxcBYO7oAAAAASUVORK5CYII=",
		e: 1
	},
	{
		id: "image_5",
		w: 25,
		h: 100,
		u: "",
		p: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAABkCAYAAABzVZt8AAAE9klEQVRoQ7WaS27cRhCGu0axMdfQwgIIZONlEMAAYeQSWeUIOgJzg8kNpE3W8t6WhvN+vzXaem4Q7QzDZgdV3Ww2H81nUwvDj5n6+P/1VzebJnx+7H8F4N5H171jLf3A58c+x9rAwA8g8P5w3b5tloJEhfn9FTDPdd2vtmAZEFGac/73Lx3Wc133v6YwI0QWfgXgt037VQQJRew58Nu6/SoLIRiGowPBX1X7VQmiesP5P1cdCkepftWCAJCuV8bA++h+6BUFozJEAoR9AnYBzm5d98ODCVYJkgFQdQGYz4KrW9f9fZeElYYUACgWQh6/Zz/feK77mxrmUpCyAO1zOF+94McPGuZCSA1A2CvUdmGcebmQJgAxV+IXI8QWgEY4XOr1RFgFoJgkxDYgZVcbgJhdbQGo92hXqwBM15cn3OPFtOqw5J9NFxLGlGzRc6vVgy9PvriRiD6RAjYBUG2EtApAyGMflcjFLaGosYJw4h/7A7LLZg/irQFUIiDGq9Z6VabJKYCwa2CMcAysfduUoiwATfyTj0rSEbYFoGg/+cN8uxooCGeHILZSlBzIMLPQH6CSDLssKAgjC/3BKG2XTQCmCyFWm6wNnbLLH6ISaZdlBcIuxsAfjuVJK9r5q86BaricarVIyUIEqTvJ4doeFZXLfcIRGKCSkGjYD0yTXKggtGswQrvMG05TANUejCYxu1KLpSEMRRbp7sBwNFF2tQGgdA3Hk0oTX0WBUjMcT0tPfC0ATgZCykx8XQDZNZqgkvyJbwKgPo8ms9yJbwzACCPENPE2AGTXGJVkTLwtANk1nqJd8Ym3CsDa4+k8bZdpNc2bfnlldLn671HJZDqP22UZQMzJbB7Z1QKASk5mC2FXWwDsyXS2EPfCkL3hGJOX04NYT9AugrQIoOufzpeaXSI+ucNZQUFYDWbzpbSrHQBVJYhp4lN/L3Um5iDZA+1yxS3RbIFK7Fuk7rmw9myxyl8ga/RAB5Cq+WJVYFdNiyIPGcyXqxy7mgOEkuXaYJclAPZksVxn2GUPQOlarNYJuywD0K7FaqPZZR9AFZerjbSrHQA1frnehP8TlNrRCidZi6macrUxRudQgmRtmbYABF+tt3G71D5utk/tPInVQLtFlI9RpL7VZhvZ1QKAIowQ05WlVtOSPZB7uViB0a71ZqftJ/Ys0u6MJKRgpa3aAx1AW/t6K5SYEtYYQHZtd8YI2wCQgM12nxlhWwDyaLPbpyJsE0D9QYhe1DoA7druDirCbQDILoLQ0Kgcy/sAMUmmpSIV0/B+Wv5D+D089MJ2fzBOvA0ApWu3P2ZOvC1ABCm5mlaxKDqNAIPdQSgJJ96qAvEUQkDaBBBkfzjJdEWbibwA+QBR7crxg1JGinSLorABg/3xJM8n0Z6c3A+EZu0kVgWAXz0cT4lHUVJRdFKuD+Dsgu/EwOH4rD2KsgbwO4zf3dzc0As3BLHXA/6Jdzo959272As2cDwJJeEaknncLugBMHYfBD89x3EyX6iREH2dKt3kVwas1337tnd9fZ37QgYcT2ctwqUAF8bB63bfPBQVV5E+Pp+zn0ikLOI+4507xxHNrPIDp+dz+omEDuDwCSDoOY5T+20pAckcNLgHFhibWU3J+SWyC194Ad77/q3be/8+v5mVIM/nF7TrwoB53791H2wWV40/vbz8+avj/Fvlyqp+9n+OccITzqkqWgAAAABJRU5ErkJggg==",
		e: 1
	},
	{
		id: "image_6",
		w: 99,
		h: 68,
		u: "",
		p: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAABECAYAAACVkosbAAAHwElEQVR4Xu2cf47TVhDHZ543aUCgTYQWCgU2USn9sxygErkBe4P1DfANSG+QvcHuDcoNmhMs/QNF2lKlAdTVFqQQQGQ3cTzV2H72c347sRPHibVaWYnzbL+PZ75vZp4fQkxbo9HIX3ZNQyAYQPAJNDR+fvTo95hOl4pmMeq7qNfrRSG0CiEeeo0jgrtfA7KMx48fv4r6vGloLzIY9fpfZRSWAYDPwO98COxzjyGfEk8yGhqlUulTGjoxqntYGEa9fqYjgg4IT+2LmgJCnhAR2wRU/enHHytR3cy6tzMXjNNGI5+77B0AUgUR971OmB2E2m9NEGg8KpU2Xk9CwTg9beRzua4BLMoAu2i7HHebDwTINgigpiGw69pYPZkJBosygaggwqHf99GBcLyb58BOEKyN1JOJMOr1epkIDUB8FjSCuEB4UNpAUC2V9jdKT0bCeF2v6wioA7AoozMA8rxR7CCUc4kmIRmlhw83Qk+8nj09Pc1nc7kDIGR35IryKkE4l8b/CbFGAo3S/fup1hO0IWRzrijjrm8FyQChmiUCnfT7/dTqCb6u118BwS9Bd5REEDJghDYCVR88eJA6PbF9gasRVR6urlYjfNcUtAgPhJNWccy3ya7r4b17qdETRTMa+Wyuy4m9F6sR61AgPD0BwBqAZdxPgZ4MjaY4pgAhKgjoxRQhUhyBjIQaFI7bV2MM5an3O9sVsYnfoW3PJ1dXl2utJ2PjDDvxh1QBgU9HZF+dTlei7kA0Hgji1IAuuB8VCGfMZf9vE0L1h7t311JPpkbgZ2dnOhEylP3AwckDIbWEodh6cu/OnbXSk6kw+InjQlHXNA0EtHNSCbQIFYRrKHaEUtOEMG7fvr0W8clMMKQQMJRen6oIZOtJQlzTGBDyY1tQjr7LZCqFQiHR9ZNQMCSUs7PGEyGo6tUwVqcR00G4UTwg6wlWvt/b4yF8Ire5YMg7efOmwTWNqlrTiHvUpIh1GBCuwNvBbBMA9L29vT+SRmQhGPJm/m40eNIBF5p2R8YoiuUsMnxdFIQsxLsV+Zq5o+l3C4V/kgIlEhhS5C0Ajk+ej9OSBIGwubpQjjRNJEJPIoOhiHwREI8B0K6JSzAJBSGNrY0gKrduFVaqJ5HDUKCUUdOqnIRMOAhpIQymKRD1QqGwEj2JDYaE8vbtW50A3SSkDAFmyEM5BMekRZTvho5zkwOOH/KEWzbkzeCa/F0NARjKUvUkdhhST4TYMZCTkDPmmlYIwgco8Agsa2l6shQYvus6L2pa35nYoNRyVTfmfLwyi/BB+JbTJoJKobAbu54sFYaE8u7duzIgVljkEw5C+jk732VZQi8UbsamJyuBIaG8f/9eBxScYd1PoEWoIBxrdf5q/X4/Fj1ZKQypJ9ls1kAUBvHEOGc8rAh37GI9yjWNA6FCOTJNM1I9WTkMaSXn5+dF9s2ATlHLlw4XTDyjpnlBSChtBKjcuHEjEj1JDAzfdf33RNMsNwmZaBC+9QI2iSz95s3F9CRxMCSUfy8uDpCg6szhGnRbbipj/jhiUYtQQUgtASKsaRrq165dmys+SSwMz31dXHC+y0C7qBVJQBcLCEXguf2jq6ur0HqSeBh8Z61WK9/r9SoE8NyOoBNmEQMg5NyANhFVrl+/PrOerAUMVeS1nZ1jngOspjVmTHEswyIG3tSyH5wmELHrmhqfrBUMCeXDhw9lADwGhP2Eg/DVDuElWZYxSU/WEoaE8vHjRx04CYk8E9KrT6i1iqBLG+ne3IG05/284M6LKQIJmpHHDbw+5weIalwiL/u3bDbL1dGhevxaw5B6YlqWIQCdmZB+0SiBIDzQbQAwstksu1xvW3sY8k5arVaRiKr227b+o+zUKhJhEUGLc5MMfzKUTCZj60lqYChQygTA+S5H5JMLwr1ke5LES03TePiezq3VaulOZjgo8l74uDSNGGkRKgh/P50onLvi+ARAcFGLXwZykpBjxVW1oknHhRHrECD806cZiQ2lKASn6vHQ91xxj5rCgUilZkx6rFpfvz7RLItF/ukglGiHr+FBbBwMCerz588HAJyEFPu+wK/GNclr4ilNqRXwWRzvly9fuH7iJCEnBWqBjhp2b34nzmkRajFtlgtP6zEs8plMhqE8Hxb4+MRatQhvP62dHPa+Op1Osd+nYxQcn8jRpuo64rMI52wb7qZGAet0OmUiOgZU39RaAohNGdqGtRI+/tu3bwY604nsotZIFzagM+qyHvaT7pvY+CU/lOM2WsCnQWq1KJ/LXTKUF0MFpIhBbOzQdhqEwe9ZT1CIKgI4ScgYQGxhhKTCeiKExvUTZ2b9wIpD87gm9RK2biokED682+3y8k/BJQHn0IjBU29hzAGDf0JEedM0+VVsXrF0ttWIhiwpePItjDlhyJ91OlTMZPqcqj8cdFvB1+mCKxWNOu0WxoIw5M97vV6Zh8KIwdfnvIBuhp6e4ZCIrnZDmjFN80AIwXOlRq5mN6kbtjBiekj6fX4pyC5sea9jTzvVFsa0HlrgexZ5TtU7ejJ928KY3kcLH0FERQCwZ0Ju3dTC3RlNA0RUdqH4S5YrTW8tI5p+DtUKEXF8wsPhgJ5sYYTqxugOdvWEofhrQkbX/LaleXrA1RMW+Wdby5inB2P4DRH9+j8BENYhBOw6xQAAAABJRU5ErkJggg==",
		e: 1
	},
	{
		id: "image_7",
		w: 49,
		h: 53,
		u: "",
		p: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAA1CAYAAADoDQMKAAAEzUlEQVRoQ9WYS24bRxCGq2lAgKAAFBdCYG9EIvBCm8RceCEEsKQTxDcwb+C5QcY3GN2AvkG8zQMTJUG0ZGQttDHACF5oERg0AcG2xOn6g+ZMz6PnSXIoUtwMuCCnvq6//qpqQff486vrPicIR9xHhp9d98kDNBwQDlT89wrCdd1tCXKIxIv44d8biF9+c20hhEVETVM9aw+hdU9Eu3nSX1sI13XbjEZf676odtcOQumeqWEDeFnVdNYK4o+//raY2WbmJsAEVMNYC4g/T08PBVOfgV1mFTxIQTBXo1gpxOnpoE0Nrw/wgQpYB64gIphykJVADAaDbTmVDb1kderMlHgGWaiajTuHGLx924OEw+CmPn0wiFUNTJ8xqBCmOBt3BnF+fn4IEg4zvtMBT2WjA9XZMLKgpbVSi724uGgzhAPwD/4px09dn35RFvwCVzB33uyGw+H27a1ngfBjsmi1/rNhdMC6TuJulcexFDm9Gw57xHB8v/edRmvd/x4BmJJKfI/VhIbJykatEMP37w9Jch8xvw8LVVvogpLKklUtEFdXV21Pyj5AB/rEUk/tOnPAlDXAhSBGo9H255uJTSwTfh9vVLlQM0hKW29eA5wb4r8PHyyWbAPcTL0kqIEQIKuhhXViFHhQM2EDrGC5M0OMRqNDBvpg7E79Xr80owiLspAYMcJGV2C5qT4SWW5liOvr6yces0OMg6i7Zvh7aoTIcqfIZjWMPhCzjyS7enymiqbcUgil+42NDQfAi6TTZPl87CWGpEyrTc5M2f9VJintVIUQNzc3NgMWGM306cdSv1RJFXdz1QAzITzPe86sbhV4N+y2ieIsGR1S81CUoXid6DEkT1LmgKi7uWm5CQgAh0SkVsOY30dzfqTbaJ6pUh+m5Sa7d9EYUjqmn0lIawoBoK2CJ6LpfY5Kkb8eFo8MCYB5JDV/AxwTw3r27Pv+9PIMgAo+dZ+Ttk5jcSmbRitKynyP6VKmpKTkV97tF+fo6OijnqMURO6MG+k3vjrGYDRIbB7KnUJDny+y3KjvpHYOiTfgibW/v/9v6vKsCMJf2MumUL8+MhedKg2wXFJnkGQ9fdr9PXefKIJQP8reBYp3gnDNnFNSU7cCxpCwut1vp7ov3OzKIKJs5Eiq1Hpnb4AAH3uTid3tdkPdLwQRuFd4hRKvk0hCxZIyB8T8MZ1PBKG3t7eX0n0NEL7lzt74qg2IkvmSVfCPH+fqfmGIKBvzS8q8WwqyMQbB/qbTccp0XxNEVgM0oApcKr1z4JjZszudTiXd1wKRykbmopMzU8W7ucTJ5IHodR4+nEn3tUH4lpul82QD1DcWyd2ALlmy9ejR1z8tIp3M244yizV/lG6A+QNiMEKMwezs7Oyo8WYpn8KxI++N4TxjdHPzhk+CXzeIrFartbDua5WTro2SAfFEesJqtb76ZylHb/zpXJlIN8BQUpcAW1tbW7XrvvZM+BAJyx1LwPny6ZOzbOnUUtjxPwkk9XoyubU3Nzdrs8xZJTi3nIjoRG2DQoi5RoVZA61bTpdB8KUjcp2B1gnxiogcIcRSLXNW+KpyeqP2cCHEynS/SCbOguBXrvt5IMZB8Guj+1khjoPCXSvdV4VQltlbV92XQahiVcGvte6LIP4H6HIYxljTu58AAAAASUVORK5CYII=",
		e: 1
	}
];
var layers$1 = [
	{
		ddd: 1,
		ind: 1,
		ty: 2,
		nm: "qube-icon-08.ai",
		cl: "ai",
		parent: 2,
		refId: "image_0",
		sr: 1,
		ks: {
			o: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 105,
						s: [
							0
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 115,
						s: [
							100
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 125,
						s: [
							100
						],
						e: [
							100
						]
					},
					{
						t: 135
					}
				],
				ix: 11
			},
			rx: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 105,
						s: [
							-186
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 115,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 125,
						s: [
							0
						],
						e: [
							-186
						]
					},
					{
						t: 135
					}
				],
				ix: 8
			},
			ry: {
				a: 0,
				k: 0,
				ix: 9
			},
			rz: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 105,
						s: [
							61
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 115,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 125,
						s: [
							0
						],
						e: [
							60
						]
					},
					{
						t: 135
					}
				],
				ix: 10
			},
			or: {
				a: 0,
				k: [
					0,
					0,
					0
				],
				ix: 7
			},
			p: {
				a: 0,
				k: [
					25.656,
					29.156,
					0
				],
				ix: 2
			},
			a: {
				a: 0,
				k: [
					0.375,
					13.75,
					0
				],
				ix: 1
			},
			s: {
				a: 0,
				k: [
					100,
					100,
					100
				],
				ix: 6
			}
		},
		ao: 0,
		ip: 105,
		op: 135,
		st: 0,
		bm: 0
	},
	{
		ddd: 1,
		ind: 2,
		ty: 2,
		nm: "qube-icon-07.ai",
		cl: "ai",
		parent: 3,
		refId: "image_1",
		sr: 1,
		ks: {
			o: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 90,
						s: [
							0
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 105,
						s: [
							100
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 135,
						s: [
							100
						],
						e: [
							0
						]
					},
					{
						t: 150
					}
				],
				ix: 11
			},
			rx: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 90,
						s: [
							-163
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 105,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 135,
						s: [
							0
						],
						e: [
							-163
						]
					},
					{
						t: 150
					}
				],
				ix: 8
			},
			ry: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 90,
						s: [
							30
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 105,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 135,
						s: [
							0
						],
						e: [
							30
						]
					},
					{
						t: 150
					}
				],
				ix: 9
			},
			rz: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 90,
						s: [
							53
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 105,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 135,
						s: [
							0
						],
						e: [
							53
						]
					},
					{
						t: 150
					}
				],
				ix: 10
			},
			or: {
				a: 0,
				k: [
					0,
					0,
					0
				],
				ix: 7
			},
			p: {
				a: 0,
				k: [
					13.625,
					106.25,
					0
				],
				ix: 2
			},
			a: {
				a: 0,
				k: [
					12.875,
					7,
					0
				],
				ix: 1
			},
			s: {
				a: 0,
				k: [
					100,
					100,
					100
				],
				ix: 6
			}
		},
		ao: 0,
		ip: 90,
		op: 150,
		st: 0,
		bm: 0
	},
	{
		ddd: 1,
		ind: 3,
		ty: 2,
		nm: "qube-icon-06.ai",
		cl: "ai",
		parent: 4,
		refId: "image_2",
		sr: 1,
		ks: {
			o: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 75,
						s: [
							0
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 90,
						s: [
							100
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 150,
						s: [
							100
						],
						e: [
							0
						]
					},
					{
						t: 166
					}
				],
				ix: 11
			},
			rx: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 75,
						s: [
							170
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 90,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 150,
						s: [
							0
						],
						e: [
							170
						]
					},
					{
						t: 166
					}
				],
				ix: 8
			},
			ry: {
				a: 0,
				k: 0,
				ix: 9
			},
			rz: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 75,
						s: [
							60
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 90,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 150,
						s: [
							0
						],
						e: [
							60
						]
					},
					{
						t: 166
					}
				],
				ix: 10
			},
			or: {
				a: 0,
				k: [
					0,
					0,
					0
				],
				ix: 7
			},
			p: {
				a: 0,
				k: [
					85.719,
					65.781,
					0
				],
				ix: 2
			},
			a: {
				a: 0,
				k: [
					11.5,
					9,
					0
				],
				ix: 1
			},
			s: {
				a: 0,
				k: [
					100,
					100,
					100
				],
				ix: 6
			}
		},
		ao: 0,
		ip: 75,
		op: 166,
		st: 0,
		bm: 0
	},
	{
		ddd: 1,
		ind: 4,
		ty: 2,
		nm: "qube-icon-05.ai",
		cl: "ai",
		parent: 5,
		refId: "image_3",
		sr: 1,
		ks: {
			o: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 60,
						s: [
							0
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 75,
						s: [
							100
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 166,
						s: [
							100
						],
						e: [
							0
						]
					},
					{
						t: 180
					}
				],
				ix: 11
			},
			rx: {
				a: 0,
				k: 0,
				ix: 8
			},
			ry: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 60,
						s: [
							170
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 75,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 166,
						s: [
							0
						],
						e: [
							170
						]
					},
					{
						t: 180
					}
				],
				ix: 9
			},
			rz: {
				a: 0,
				k: 0,
				ix: 10
			},
			or: {
				a: 0,
				k: [
					0,
					0,
					0
				],
				ix: 7
			},
			p: {
				a: 0,
				k: [
					99.25,
					15,
					0
				],
				ix: 2
			},
			a: {
				a: 0,
				k: [
					0,
					15,
					0
				],
				ix: 1
			},
			s: {
				a: 0,
				k: [
					100,
					100,
					100
				],
				ix: 6
			}
		},
		ao: 0,
		ip: 60,
		op: 180,
		st: 0,
		bm: 0
	},
	{
		ddd: 1,
		ind: 5,
		ty: 2,
		nm: "qube-icon-04.ai",
		cl: "ai",
		parent: 6,
		refId: "image_4",
		sr: 1,
		ks: {
			o: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 45,
						s: [
							0
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 60,
						s: [
							100
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 180,
						s: [
							100
						],
						e: [
							0
						]
					},
					{
						t: 195
					}
				],
				ix: 11
			},
			rx: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 45,
						s: [
							170
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 60,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 180,
						s: [
							0
						],
						e: [
							170
						]
					},
					{
						t: 195
					}
				],
				ix: 8
			},
			ry: {
				a: 0,
				k: 0,
				ix: 9
			},
			rz: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 45,
						s: [
							-60
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 60,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 180,
						s: [
							0
						],
						e: [
							-60
						]
					},
					{
						t: 195
					}
				],
				ix: 10
			},
			or: {
				a: 0,
				k: [
					0,
					0,
					0
				],
				ix: 7
			},
			p: {
				a: 0,
				k: [
					13.25,
					7.75,
					0
				],
				ix: 2
			},
			a: {
				a: 0,
				k: [
					13.375,
					64.5,
					0
				],
				ix: 1
			},
			s: {
				a: 0,
				k: [
					100,
					100,
					100
				],
				ix: 6
			}
		},
		ao: 0,
		ip: 45,
		op: 195,
		st: 0,
		bm: 0
	},
	{
		ddd: 1,
		ind: 6,
		ty: 2,
		nm: "qube-icon-03.ai",
		cl: "ai",
		parent: 7,
		refId: "image_5",
		sr: 1,
		ks: {
			o: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 30,
						s: [
							0
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 45,
						s: [
							100
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 195,
						s: [
							100
						],
						e: [
							0
						]
					},
					{
						t: 211
					}
				],
				ix: 11
			},
			rx: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 30,
						s: [
							170
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 45,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 195,
						s: [
							0
						],
						e: [
							170
						]
					},
					{
						t: 211
					}
				],
				ix: 8
			},
			ry: {
				a: 0,
				k: 0,
				ix: 9
			},
			rz: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 30,
						s: [
							60
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 45,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 195,
						s: [
							0
						],
						e: [
							60
						]
					},
					{
						t: 211
					}
				],
				ix: 10
			},
			or: {
				a: 0,
				k: [
					0,
					0,
					0
				],
				ix: 7
			},
			p: {
				a: 0,
				k: [
					12.625,
					5,
					0
				],
				ix: 2
			},
			a: {
				a: 0,
				k: [
					13,
					93.5,
					0
				],
				ix: 1
			},
			s: {
				a: 0,
				k: [
					100,
					100,
					100
				],
				ix: 6
			}
		},
		ao: 0,
		ip: 30,
		op: 211,
		st: 0,
		bm: 0
	},
	{
		ddd: 1,
		ind: 7,
		ty: 2,
		nm: "qube-icon-02.ai",
		cl: "ai",
		parent: 8,
		refId: "image_6",
		sr: 1,
		ks: {
			o: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 15,
						s: [
							0
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 30,
						s: [
							100
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 211,
						s: [
							100
						],
						e: [
							0
						]
					},
					{
						t: 225
					}
				],
				ix: 11
			},
			rx: {
				a: 0,
				k: 0,
				ix: 8
			},
			ry: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 15,
						s: [
							-180
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 30,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 211,
						s: [
							0
						],
						e: [
							180
						]
					},
					{
						t: 225
					}
				],
				ix: 9
			},
			rz: {
				a: 0,
				k: 0,
				ix: 10
			},
			or: {
				a: 0,
				k: [
					0,
					0,
					0
				],
				ix: 7
			},
			p: {
				a: 0,
				k: [
					-0.375,
					39.875,
					0
				],
				ix: 2
			},
			a: {
				a: 0,
				k: [
					99.375,
					54.625,
					0
				],
				ix: 1
			},
			s: {
				a: 0,
				k: [
					100,
					100,
					100
				],
				ix: 6
			}
		},
		ao: 0,
		ip: 15,
		op: 225,
		st: 0,
		bm: 0
	},
	{
		ddd: 1,
		ind: 8,
		ty: 2,
		nm: "qube-icon-01.ai",
		cl: "ai",
		refId: "image_7",
		sr: 1,
		ks: {
			o: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 0,
						s: [
							0
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 15,
						s: [
							100
						],
						e: [
							100
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 225,
						s: [
							100
						],
						e: [
							0
						]
					},
					{
						t: 239
					}
				],
				ix: 11
			},
			rx: {
				a: 1,
				k: [
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 0,
						s: [
							85
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 15,
						s: [
							0
						],
						e: [
							0
						]
					},
					{
						i: {
							x: [
								0.833
							],
							y: [
								0.833
							]
						},
						o: {
							x: [
								0.167
							],
							y: [
								0.167
							]
						},
						n: [
							"0p833_0p833_0p167_0p167"
						],
						t: 225,
						s: [
							0
						],
						e: [
							85
						]
					},
					{
						t: 239
					}
				],
				ix: 8
			},
			ry: {
				a: 0,
				k: 0,
				ix: 9
			},
			rz: {
				a: 0,
				k: 0,
				ix: 10
			},
			or: {
				a: 0,
				k: [
					0,
					0,
					0
				],
				ix: 7
			},
			p: {
				a: 0,
				k: [
					282,
					330,
					0
				],
				ix: 2
			},
			a: {
				a: 0,
				k: [
					48.75,
					0,
					0
				],
				ix: 1
			},
			s: {
				a: 0,
				k: [
					100,
					100,
					100
				],
				ix: 6
			}
		},
		ao: 0,
		ip: 0,
		op: 240,
		st: 0,
		bm: 0
	}
];
var markers$1 = [
];
var whiteAnimation = {
	v: v$1,
	fr: fr$1,
	ip: ip$1,
	op: op$1,
	w: w$1,
	h: h$1,
	nm: nm$1,
	ddd: ddd$1,
	assets: assets$1,
	layers: layers$1,
	markers: markers$1
};

function _templateObject$14() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: ", ";\n\theight: ", ";\n"]);

  _templateObject$14 = function _templateObject() {
    return data;
  };

  return data;
}
var LoadingDiv = styled.div(_templateObject$14(), function (_ref) {
  var size = _ref.size;
  return size || '200px';
}, function (_ref2) {
  var size = _ref2.size;
  return size || '200px';
});

var Loading =
/*#__PURE__*/
function (_Component) {
  inheritsLoose(Loading, _Component);

  function Loading() {
    return _Component.apply(this, arguments) || this;
  }

  var _proto = Loading.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var color = this.props.color;
    lottie.loadAnimation({
      container: this.loadingContainer,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: color === 'white' ? whiteAnimation : blueAnimation
    });
  };

  _proto.render = function render() {
    var _this = this;

    return React.createElement(LoadingDiv, _extends_1({
      className: "loading-animated-qube",
      ref: function ref(el) {
        return _this.loadingContainer = el;
      }
    }, this.props));
  };

  return Loading;
}(Component);

Loading.defaultProps = {
  color: 'blue'
};
Loading.displayName = 'Loading';
Loading.propTypes = {
  color: PropTypes.oneOf(['white', 'blue'])
};

function _templateObject$15() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: absolute;\n\tdisplay: ", ";\n\n\twidth: 100%;\n\theight: 100%;\n\tbackground: rgba(255, 255, 255, 0.8);\n"]);

  _templateObject$15 = function _templateObject() {
    return data;
  };

  return data;
}
var ModalLoading = styled.div(_templateObject$15(), function (_ref) {
  var active = _ref.active;
  return active ? 'block' : 'none';
});

var LoadingModal = function LoadingModal(props) {
  return React.createElement(ModalLoading, props, React.createElement(CenteredGrid, {
    width: "100%",
    height: "100%"
  }, React.createElement(Loading, {
    style: {
      margin: 'auto'
    },
    size: "200px"
  })));
};

LoadingModal.displayName = 'Loading';
LoadingModal.propTypes = {
  active: PropTypes.bool.isRequired
};

function _templateObject$16() {
  var data = taggedTemplateLiteralLoose(["\n\tborder-top: 1px solid #ddd;\n"]);

  _templateObject$16 = function _templateObject() {
    return data;
  };

  return data;
}
var ListHeaderContainer = styled(Grid)(_templateObject$16());

function _templateObject$17() {
  var data = taggedTemplateLiteralLoose(["\n\ttext-align: end;\n"]);

  _templateObject$17 = function _templateObject() {
    return data;
  };

  return data;
}
var ListHeaderPaginationContainer = styled(Grid.Column)(_templateObject$17());

function _templateObject$18() {
  var data = taggedTemplateLiteralLoose(["\n\tdiv:first-child {\n\t\tmargin-right: 21px;\n\t}\n"]);

  _templateObject$18 = function _templateObject() {
    return data;
  };

  return data;
}

var ListHeader = function ListHeader(_ref) {
  var checked = _ref.checked,
      handleSelectAll = _ref.handleSelectAll,
      pagination = _ref.pagination,
      children = _ref.children;
  return React.createElement(ListHeaderContainer, {
    padded: true,
    verticalAlign: "middle"
  }, React.createElement(ActionsListWrapper, {
    tablet: 8
  }, checked !== undefined && React.createElement(Checkbox$1, {
    onChange: handleSelectAll,
    checked: checked
  }), children), pagination && pagination.totalPages > 1 && React.createElement(ListHeaderPaginationContainer, {
    computer: 8,
    tablet: 8,
    mobile: 16,
    floated: "right"
  }, React.createElement(Pagination$1, {
    activePage: pagination.activePage,
    onPageChange: pagination.handlePageChange,
    totalPages: pagination.totalPages,
    siblingRange: 1
  })));
};

var ActionsListWrapper = styled(Grid.Column)(_templateObject$18());
ListHeader.defaultProps = {
  children: undefined,
  checked: undefined,
  handleSelectAll: undefined,
  pagination: undefined,
  selectAllCheckboxColor: undefined
};
ListHeader.displayName = 'ListHeader';
ListHeader.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
  checked: PropTypes.bool,
  handleSelectAll: PropTypes.func,
  pagination: PropTypes.shape({
    activePage: PropTypes.number.isRequired,
    handlePageChange: PropTypes.func.isRequired,
    totalPages: PropTypes.number.isRequired
  }),
  selectAllCheckboxColor: PropTypes.string
};

function _templateObject$19() {
  var data = taggedTemplateLiteralLoose(["\n\t&&&&.list-wrapper {\n\t\twidth: 100% !important;\n\t\tmargin: 0 !important;\n\t}\n\n\t@media only screen and (max-width: 767px) {\n\t\t&&&&.list-wrapper {\n\t\t\twidth: 100% !important;\n\t\t\tmargin-right: 0 !important;\n\t\t\tmargin-left: 0 !important;\n\t\t}\n\t}\n"]);

  _templateObject$19 = function _templateObject() {
    return data;
  };

  return data;
}
var ListCardContainerWrapper = styled(Grid)(_templateObject$19());

var ListCardWrapper = function ListCardWrapper(props) {
  return React.createElement(ListCardContainerWrapper, _extends_1({
    className: "list-wrapper",
    stackable: true,
    columns: 4
  }, props));
};

ListCardWrapper.displayName = 'ListCardWrapper';

function _templateObject$1a() {
  var data = taggedTemplateLiteralLoose(["\n\tmin-width: ", ";\n"]);

  _templateObject$1a = function _templateObject() {
    return data;
  };

  return data;
}

var List = function List(_ref) {
  var checked = _ref.checked,
      _handleSelectAll = _ref.handleSelectAll,
      pagination = _ref.pagination,
      extra = _ref.extra,
      selectAllCheckboxColor = _ref.selectAllCheckboxColor,
      children = _ref.children,
      cards = _ref.cards,
      props = objectWithoutPropertiesLoose(_ref, ["checked", "handleSelectAll", "pagination", "extra", "selectAllCheckboxColor", "children", "cards"]);

  return React.createElement(ListContainer, _extends_1({
    pagination: pagination
  }, props), (checked !== undefined || pagination) && React.createElement(ListHeader, {
    checked: checked,
    handleSelectAll: function handleSelectAll() {
      return _handleSelectAll(!checked);
    },
    pagination: pagination,
    selectAllCheckboxColor: selectAllCheckboxColor
  }, extra && children[0]), cards ? React.createElement(ListCardWrapper, null, !extra ? children : children[1]) : React.createElement(React.Fragment, null, !extra ? children : children[1]));
};

var ListContainer = styled(function (_ref2) {
  var pagination = _ref2.pagination,
      props = objectWithoutPropertiesLoose(_ref2, ["pagination"]);

  return React.createElement(Grid.Row, props);
})(_templateObject$1a(), function (_ref3) {
  var pagination = _ref3.pagination;
  return pagination && pagination.totalPages > 1 ? '410px' : 'min-content';
});
ListContainer.displayName = 'ListContainer';
List.defaultProps = {
  checked: undefined,
  extra: undefined,
  cards: undefined,
  handleSelectAll: undefined,
  pagination: undefined,
  selectAllCheckboxColor: theme.colors.activeBlue
};
List.displayName = 'List';
List.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,

  /** state of the select all checkbox */
  checked: PropTypes.bool,

  /** activate extra actions in header, must use ListHeaderAction container */
  extra: PropTypes.bool,

  /** activate card display in body, must use ListCard container for each item */
  cards: PropTypes.bool,

  /** select all handler function, return checkbox state */
  handleSelectAll: PropTypes.func,

  /** set pagination options to show the pagination wrapper */
  pagination: PropTypes.shape({
    activePage: PropTypes.number.isRequired,
    handlePageChange: PropTypes.func.isRequired,
    totalPages: PropTypes.number.isRequired
  }),
  selectAllCheckboxColor: PropTypes.string
};

function _templateObject$1b() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex !important;\n\tmargin-left: 18px !important;\n\tcursor: pointer !important;\n"]);

  _templateObject$1b = function _templateObject() {
    return data;
  };

  return data;
}
var ListHeaderAction = styled(Icon$1)(_templateObject$1b());
ListHeaderAction.displayName = 'ListHeaderAction';

function _templateObject$1c() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 0 1rem;\n\tbackground-color: ", ";\n\tcursor: pointer;\n\n\t&&&&.active {\n\t\tbackground-color: ", ";\n\t}\n\n\t", "\n"]);

  _templateObject$1c = function _templateObject() {
    return data;
  };

  return data;
}
var ListRowWrapper = styled(function (_ref) {
  var index = _ref.index,
      props = objectWithoutPropertiesLoose(_ref, ["index"]);

  return React.createElement("div", props);
})(_templateObject$1c(), function (_ref2) {
  var theme = _ref2.theme,
      index = _ref2.index;
  return index % 2 === 0 ? theme.list.pairCell : theme.list.unPairCell;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.lightBlue;
}, function (_ref4) {
  var removehover = _ref4.removehover,
      theme = _ref4.theme;
  return !removehover && "\n\t&&&&:hover {\n\t\tposition: relative;\n\t\tbackground-color: " + theme.colors.lightBlue + ";\n\t\tbox-shadow: " + theme.list.boxShadow + ";\n\t\ttransition: all 0.2s ease-in-out;\n\n\t\t.onHoverShow {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\t}";
});
ListRowWrapper.displayName = 'ListRowWrapper';

function _templateObject2$r() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tcursor: ", ";\n"]);

  _templateObject2$r = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1d() {
  var data = taggedTemplateLiteralLoose(["\n\t&&&& {\n\t\theight: 100%;\n\t}\n"]);

  _templateObject$1d = function _templateObject() {
    return data;
  };

  return data;
}

var ListRowActionWrapper = function ListRowActionWrapper(_ref) {
  var color = _ref.color,
      typeAction = _ref.typeAction,
      isActive = _ref.isActive,
      handleAction = _ref.handleAction,
      props = objectWithoutPropertiesLoose(_ref, ["color", "typeAction", "isActive", "handleAction"]);

  return React.createElement(ListBlockContainer, _extends_1({
    onClick: function onClick(e) {
      return e.stopPropagation();
    },
    typeAction: typeAction
  }, props), typeAction === 'checkbox' && React.createElement(Checkbox$1, {
    onChange: function onChange() {
      return handleAction(!isActive);
    },
    checked: isActive
  }), typeAction === 'radio' && React.createElement(Radio, {
    onChange: function onChange() {
      return handleAction(!isActive);
    },
    checked: isActive
  }), typeAction === 'icon' && React.createElement(IconWrapper, {
    icon: "lock",
    color: theme.colors.red
  }));
};

var IconWrapper = styled(Icon$1)(_templateObject$1d());
var ListBlockContainer = styled.div(_templateObject2$r(), function (_ref2) {
  var typeAction = _ref2.typeAction;
  return typeAction === 'icon' ? 'default' : 'pointer';
});
ListRowActionWrapper.defaultProps = {
  color: theme.colors.activeBlue
};
ListBlockContainer.displayName = 'ListBlockContainer';
ListRowActionWrapper.displayName = 'ListRowActionWrapper';
ListRowActionWrapper.propTypes = {
  /** string with type of the row action */
  typeAction: PropTypes.oneOf(['checkbox', 'radio', 'icon']).isRequired,

  /** bool to control the state of the action */
  isActive: PropTypes.bool.isRequired,

  /** function handler to the row action */
  handleAction: PropTypes.func.isRequired,

  /** string with action color */
  color: PropTypes.string
};

function _templateObject$1e() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n"]);

  _templateObject$1e = function _templateObject() {
    return data;
  };

  return data;
}

var ListRowLeft = function ListRowLeft(_ref) {
  var children = _ref.children,
      color = _ref.color,
      typeAction = _ref.typeAction,
      handleAction = _ref.handleAction,
      isActive = _ref.isActive,
      props = objectWithoutPropertiesLoose(_ref, ["children", "color", "typeAction", "handleAction", "isActive"]);

  return React.createElement(Wrapper$1, props, typeAction !== undefined && React.createElement(ListRowActionWrapper, {
    color: color,
    typeAction: typeAction,
    isActive: isActive,
    handleAction: handleAction
  }), children);
};

var Wrapper$1 = styled.div(_templateObject$1e());
ListRowLeft.defaultProps = {
  typeAction: undefined,
  isActive: undefined,
  handleAction: undefined,
  color: theme.colors.activeBlue
};
ListRowLeft.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,

  /** string with type of the row action */
  typeAction: PropTypes.oneOf(['checkbox', 'radio', 'icon']),

  /** bool to control the state of the action */
  isActive: PropTypes.bool,

  /** function handler to the row action */
  handleAction: PropTypes.func,

  /** string with action color */
  color: PropTypes.string
};
ListRowLeft.displayName = 'ListRowLeft';

function _templateObject4$c() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: none;\n"]);

  _templateObject4$c = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$h() {
  var data = taggedTemplateLiteralLoose(["\n\tmargin-right: 18px;\n\n\t:last-child {\n\t\tmargin-right: 0;\n\t}\n"]);

  _templateObject3$h = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$s() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n"]);

  _templateObject2$s = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1f() {
  var data = taggedTemplateLiteralLoose(["\n\toutline: none;\n"]);

  _templateObject$1f = function _templateObject() {
    return data;
  };

  return data;
}

var renderElements = function renderElements(element) {
  return Array.isArray(element) ? element.map(function (child, i) {
    return React.createElement(Div, {
      key: i
    }, child);
  }) : React.createElement(Div, null, element);
};

var ListRowRight = function ListRowRight(_ref) {
  var children = _ref.children,
      showOnHover = _ref.showOnHover;
  return React.createElement(ListRowRightStyled, {
    role: "row",
    tabIndex: "0",
    onClick: function onClick(e) {
      return e.stopPropagation();
    }
  }, showOnHover && React.createElement(OnHoverShow, {
    className: "onHoverShow"
  }, renderElements(showOnHover)), React.createElement(Flex$2, null, renderElements(children)));
};

var ListRowRightStyled = styled.div(_templateObject$1f());
var Flex$2 = styled.div(_templateObject2$s());
var Div = styled.div(_templateObject3$h());
var OnHoverShow = styled.span(_templateObject4$c());
OnHoverShow.displayName = 'OnHoverShow';
ListRowRight.defaultProps = {
  showOnHover: null,
  children: null
};
ListRowRight.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),

  /** components shown when hovered */
  showOnHover: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
};
ListRowRight.displayName = 'ListRowRight';

var ListRow = function ListRow(_ref) {
  var index = _ref.index,
      isActive = _ref.isActive,
      handleAction = _ref.handleAction,
      children = _ref.children,
      props = objectWithoutPropertiesLoose(_ref, ["index", "isActive", "handleAction", "children"]);

  var renderChildrenWithProps = function renderChildrenWithProps() {
    return React.Children.map(children, function (child) {
      return React.cloneElement(child, {
        handleAction: handleAction,
        isActive: isActive
      });
    });
  };

  return React.createElement(ListRowWrapper, _extends_1({
    index: index,
    className: isActive && 'active'
  }, props), renderChildrenWithProps(children));
};

ListRow.Left = function (_ref2) {
  var props = _extends_1({}, _ref2);

  return React.createElement(ListRowLeft, props);
};

ListRow.Left.displayName = 'ListRow.Left';

ListRow.Right = function (_ref3) {
  var props = _extends_1({}, _ref3);

  return React.createElement(ListRowRight, props);
};

ListRow.Right.displayName = 'ListRow.Right';
ListRow.defaultProps = {
  isActive: false,
  handleAction: undefined
};
ListRow.displayName = 'ListRow';
ListRow.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,

  /** array index for striping css */
  index: PropTypes.number.isRequired,

  /** bool that control the action state */
  isActive: PropTypes.bool,

  /** handle action function */
  handleAction: PropTypes.func
};

function _templateObject$1g() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\tmargin-right: 12px;\n\tmargin-left: auto;\n\tcursor: pointer;\n\tfloat: right;\n\tline-height: 34px;\n\n\t& > div > i {\n\t\tline-height: 34px;\n\t}\n"]);

  _templateObject$1g = function _templateObject() {
    return data;
  };

  return data;
}
var ListRowRight$1 = styled.div(_templateObject$1g());

var ListAddInfoWrapper = function ListAddInfoWrapper(props) {
  return React.createElement(ListRowRight$1, _extends_1({
    className: "additional-info-wrapper"
  }, props));
};

ListAddInfoWrapper.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};
ListAddInfoWrapper.displayName = 'ListAddInfoWrapper';

function _templateObject$1h() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\tmargin-right: 12px;\n\tmargin-left: auto;\n\tcursor: pointer;\n\tfloat: right;\n\tline-height: 34px;\n\n\t& > div > i {\n\t\tline-height: 34px;\n\t}\n"]);

  _templateObject$1h = function _templateObject() {
    return data;
  };

  return data;
}
var ListRowRight$2 = styled.div(_templateObject$1h());

var ListActionsWrapper = function ListActionsWrapper(props) {
  return React.createElement(ListRowRight$2, _extends_1({
    className: "actions-wrapper",
    onClick: function onClick(e) {
      return e.stopPropagation();
    }
  }, props));
};

ListActionsWrapper.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};
ListActionsWrapper.displayName = 'ListActionsWrapper';

function _templateObject$1i() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: ", ";\n\tmin-height: 68px;\n\tflex-wrap: wrap;\n\tjustify-content: space-between;\n\tpadding: 14px 12px 16px;\n\tmargin-right: ", ";\n\tmargin-bottom: 20px;\n\tborder: 1px solid ", " !important;\n\tborder-radius: 4px;\n\tcursor: pointer;\n\n\t@media only screen and (max-width: 767px) {\n\t\twidth: 100% !important;\n\t\tmargin-right: 0 !important;\n\t\tmargin-bottom: 20px !important;\n\t}\n\n\t:hover {\n\t\tposition: relative;\n\t\tbackground-color: #daedff !important;\n\t\tbox-shadow: 0 3px 3px rgba(0, 0, 0, 0.25) !important;\n\t\ttransition: all 0.2s ease-in-out;\n\t}\n\n\t:hover > .additional-info-wrapper {\n\t\tdisplay: ", ";\n\t}\n\n\t> .actions-wrapper {\n\t\tdisplay: ", ";\n\t}\n\n\t:hover > .actions-wrapper {\n\t\tdisplay: ", ";\n\t\ttransition: all 0.1s ease-in;\n\t}\n\n\t.active {\n\t\tbackground-color: #daedff !important;\n\t}\n"]);

  _templateObject$1i = function _templateObject() {
    return data;
  };

  return data;
}
var CardWrapper = styled(function (_ref) {
  var numCols = _ref.numCols,
      last = _ref.last,
      actions = _ref.actions,
      addInfo = _ref.addInfo,
      error = _ref.error,
      props = objectWithoutPropertiesLoose(_ref, ["numCols", "last", "actions", "addInfo", "error"]);

  return React.createElement(Grid.Column, props);
})(_templateObject$1i(), function (_ref2) {
  var numCols = _ref2.numCols;
  return (100 - (numCols - 1) * 2) / numCols + "% !important";
}, function (_ref3) {
  var last = _ref3.last,
      numCols = _ref3.numCols;
  return last || numCols === 1 ? '0' : '2%';
}, function (_ref4) {
  var error = _ref4.error;
  return error ? theme.listCard.errorBorder : theme.listCard.defaultBorder;
}, function (_ref5) {
  var actions = _ref5.actions;
  return actions && 'none';
}, function (_ref6) {
  var actions = _ref6.actions,
      addInfo = _ref6.addInfo;
  return !addInfo && actions ? 'block' : 'none';
}, function (_ref7) {
  var actions = _ref7.actions;
  return actions && 'block';
});

var ListCard = function ListCard(_ref8) {
  var checked = _ref8.checked,
      props = objectWithoutPropertiesLoose(_ref8, ["checked"]);

  return React.createElement(CardWrapper, _extends_1({
    className: "" + (checked && 'active')
  }, props));
};

ListCard.defaultProps = {
  checked: undefined,
  last: false,
  numCols: 4,
  error: false
};
ListCard.displayName = 'ListCard';
ListCard.propTypes = {
  checked: PropTypes.bool,
  last: PropTypes.bool,
  numCols: PropTypes.number,
  error: PropTypes.bool
};

function _templateObject6$4() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: ", ";\n\tpadding: 16px 0;\n\tborder-bottom: 1px solid ", ";\n"]);

  _templateObject6$4 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5$5() {
  var data = taggedTemplateLiteralLoose(["\n\ttransform: ", ";\n\ttransition: 0.33s;\n"]);

  _templateObject5$5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$d() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: none;\n"]);

  _templateObject4$d = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$i() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n"]);

  _templateObject3$i = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$t() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tmargin-right: 18px;\n"]);

  _templateObject2$t = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1j() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 10px 12px 10px 10px;\n\tmargin-bottom: 1px;\n\n\tbackground: ", ";\n\n\tcursor: pointer;\n\n\t:hover {\n\t\tposition: relative;\n\t\tbackground-color: ", " !important;\n\t\tbox-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);\n\t\ttransition: all 0.2s ease-in-out;\n\n\t\t.onHoverShow {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t.OnHoverHide {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n"]);

  _templateObject$1j = function _templateObject() {
    return data;
  };

  return data;
}

var ListExpandableRow = function ListExpandableRow(_ref) {
  var children = _ref.children,
      activeIndex = _ref.activeIndex,
      index = _ref.index,
      _onClick = _ref.onClick,
      componentsLeft = _ref.componentsLeft,
      componentsRightShowOnHover = _ref.componentsRightShowOnHover,
      componentsRight = _ref.componentsRight,
      componentsRightHideOnHover = _ref.componentsRightHideOnHover,
      props = objectWithoutPropertiesLoose(_ref, ["children", "activeIndex", "index", "onClick", "componentsLeft", "componentsRightShowOnHover", "componentsRight", "componentsRightHideOnHover"]);

  var renderElements = function renderElements(element) {
    return element.map(function (child, i) {
      return React.createElement(FlexCenter, {
        key: i
      }, child);
    });
  };

  return React.createElement(Fragment, null, React.createElement(Row, _extends_1({
    expanded: index === activeIndex,
    index: index,
    onClick: function onClick() {
      return _onClick(index);
    }
  }, props), React.createElement(Flex$3, null, renderElements(componentsLeft)), React.createElement(Flex$3, null, componentsRightHideOnHover && React.createElement(Flex$3, {
    className: "OnHoverHide"
  }, renderElements(componentsRightHideOnHover)), componentsRightShowOnHover && React.createElement(OnHoverShow$1, {
    className: "onHoverShow"
  }, renderElements(componentsRightShowOnHover)), componentsRight && renderElements(componentsRight), React.createElement(IconAnimated$1, {
    expanded: index === activeIndex,
    icon: "select-down"
  }))), React.createElement(Body, {
    expanded: index === activeIndex,
    index: index
  }, children));
};

var Row = styled.div(_templateObject$1j(), function (_ref2) {
  var index = _ref2.index,
      expanded = _ref2.expanded,
      theme = _ref2.theme;
  return expanded ? theme.colors.lightBlue : index % 2 ? 'white' : theme.colors.lightGray;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.lightBlue;
});
Row.displayName = 'Row';
var FlexCenter = styled.div(_templateObject2$t());
var Flex$3 = styled.div(_templateObject3$i());
Flex$3.displayName = 'Flex';
var OnHoverShow$1 = styled.span(_templateObject4$d());
OnHoverShow$1.displayName = 'OnHoverShow';
var IconAnimated$1 = styled(function (_ref4) {
  var expanded = _ref4.expanded,
      props = objectWithoutPropertiesLoose(_ref4, ["expanded"]);

  return React.createElement(Icon$1, props);
})(_templateObject5$5(), function (_ref5) {
  var expanded = _ref5.expanded;
  return expanded && 'rotate(180deg)';
});
IconAnimated$1.displayName = 'IconAnimated';
var Body = styled.div(_templateObject6$4(), function (_ref6) {
  var expanded = _ref6.expanded;
  return expanded ? 'block' : 'none';
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.colors.strokeGray;
});
Body.displayName = 'Body';
ListExpandableRow.defaultProps = {
  activeIndex: null,
  componentsRightHideOnHover: []
};
ListExpandableRow.propTypes = {
  activeIndex: PropTypes.number,
  index: PropTypes.number.isRequired,
  onClick: PropTypes.func.isRequired,
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
  componentsRight: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
  componentsLeft: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
  componentsRightShowOnHover: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
  componentsRightHideOnHover: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
};
ListExpandableRow.displayName = 'ListExpandableRow';

function _templateObject6$5() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: ", ";\n\tborder-bottom: ", ";\n"]);

  _templateObject6$5 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5$6() {
  var data = taggedTemplateLiteralLoose(["\n\ttransform: ", ";\n\ttransition: 0.33s;\n"]);

  _templateObject5$6 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$e() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n"]);

  _templateObject4$e = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$j() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\n\tcursor: pointer;\n"]);

  _templateObject3$j = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$u() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: 40px;\n\theight: 40px;\n\tmargin-right: 12px;\n"]);

  _templateObject2$u = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1k() {
  var data = taggedTemplateLiteralLoose(["\n\tmargin-right: 5px;\n\tcolor: ", ";\n\tfont-size: 15px;\n\tline-height: 16px;\n\n\t:hover {\n\t\tcolor: ", ";\n\t}\n"]);

  _templateObject$1k = function _templateObject() {
    return data;
  };

  return data;
}

var ListExpandableCustomRow = function ListExpandableCustomRow(_ref) {
  var children = _ref.children,
      activeIndex = _ref.activeIndex,
      index = _ref.index,
      _onClick = _ref.onClick,
      image = _ref.image,
      title = _ref.title,
      arrow = _ref.arrow,
      divider = _ref.divider,
      props = objectWithoutPropertiesLoose(_ref, ["children", "activeIndex", "index", "onClick", "image", "title", "arrow", "divider"]);

  var expanded = index === activeIndex;
  return React.createElement(Fragment, null, React.createElement(Row$1, _extends_1({
    expanded: expanded,
    index: index,
    onClick: function onClick() {
      return _onClick(index);
    }
  }, props), React.createElement(Flex$4, null, React.createElement(Flex$4, null, image && React.createElement(Image$1, {
    src: image,
    alt: "qube standard",
    draggable: "false"
  }), title && React.createElement(Title$2, {
    expanded: expanded
  }, title)), arrow && React.createElement(IconAnimated$2, {
    expanded: expanded,
    icon: "select-down"
  }))), React.createElement(Body$1, {
    expanded: expanded,
    index: index,
    divider: divider
  }, children));
};

var Title$2 = styled.div(_templateObject$1k(), function (_ref2) {
  var theme = _ref2.theme,
      expanded = _ref2.expanded;
  return expanded ? theme.colors.deepBlue : theme.colors.activeBlue;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.deepBlue;
});
Title$2.displayName = 'Title';
var Image$1 = styled.img(_templateObject2$u());
Image$1.displayName = 'Image';
var Row$1 = styled.div(_templateObject3$j());
Row$1.displayName = 'Row';
var Flex$4 = styled.div(_templateObject4$e());
Flex$4.displayName = 'Flex';
var IconAnimated$2 = styled(function (_ref4) {
  var expanded = _ref4.expanded,
      props = objectWithoutPropertiesLoose(_ref4, ["expanded"]);

  return React.createElement(Icon$1, props);
})(_templateObject5$6(), function (_ref5) {
  var expanded = _ref5.expanded;
  return expanded && 'rotate(180deg)';
});
IconAnimated$2.displayName = 'IconAnimated';
var Body$1 = styled.div(_templateObject6$5(), function (_ref6) {
  var expanded = _ref6.expanded;
  return expanded ? 'block' : 'none';
}, function (_ref7) {
  var theme = _ref7.theme,
      divider = _ref7.divider;
  return divider ? "thin solid " + theme.colors.strokeGray : 'none';
});
Body$1.displayName = 'Body';
ListExpandableCustomRow.defaultProps = {
  activeIndex: null,
  image: null,
  title: null,
  arrow: true,
  divider: false
};
ListExpandableCustomRow.propTypes = {
  activeIndex: PropTypes.number,
  index: PropTypes.number.isRequired,
  onClick: PropTypes.func.isRequired,
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
  image: PropTypes.string,
  title: PropTypes.string,
  arrow: PropTypes.bool,
  divider: PropTypes.bool
};
ListExpandableCustomRow.displayName = 'ListExpandableCustomRow';

var ListExpandable = function ListExpandable(_ref) {
  var children = _ref.children,
      expandedIndex = _ref.expandedIndex,
      props = objectWithoutPropertiesLoose(_ref, ["children", "expandedIndex"]);

  var _useState = useState(expandedIndex),
      activeIndex = _useState[0],
      setActiveIndex = _useState[1];

  useEffect(function () {
    setActiveIndex(expandedIndex);
  }, [expandedIndex]);

  var onClick = function onClick(index) {
    return index === activeIndex ? setActiveIndex(null) : setActiveIndex(index);
  };

  var renderChildrenWithProps = function renderChildrenWithProps() {
    return React.Children.map(children, function (child) {
      return React.cloneElement(child, {
        onClick: onClick,
        activeIndex: activeIndex
      });
    });
  };

  return React.createElement("div", props, renderChildrenWithProps());
};

ListExpandable.Row = function (_ref2) {
  var props = _extends_1({}, _ref2);

  return React.createElement(ListExpandableRow, props);
};

ListExpandable.CustomRow = function (_ref3) {
  var props = _extends_1({}, _ref3);

  return React.createElement(ListExpandableCustomRow, props);
};

ListExpandable.Row.displayName = 'ListExpandable.Row';
ListExpandable.CustomRow.displayName = 'ListExpandable.CustomRow';
ListExpandable.Row.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};
ListExpandable.CustomRow.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};
ListExpandable.defaultProps = {
  expandedIndex: null
};
ListExpandable.propTypes = {
  /** index of the initial expanded element */
  expandedIndex: PropTypes.number,
  children: PropTypes.node.isRequired
};
ListExpandable.displayName = 'ListExpandable';

/**
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/**
 * Use invariant() to assert state which your program assumes to be true.
 *
 * Provide sprintf-style format (only %s is supported) and arguments
 * to provide information about what broke and what you were
 * expecting.
 *
 * The invariant message will be stripped in production, but the invariant
 * will remain to ensure logic does not differ in production.
 */

var NODE_ENV = process.env.NODE_ENV;

var invariant = function(condition, format, a, b, c, d, e, f) {
  if (NODE_ENV !== 'production') {
    if (format === undefined) {
      throw new Error('invariant requires an error message argument');
    }
  }

  if (!condition) {
    var error;
    if (format === undefined) {
      error = new Error(
        'Minified exception occurred; use the non-minified dev environment ' +
        'for the full error message and additional helpful warnings.'
      );
    } else {
      var args = [a, b, c, d, e, f];
      var argIndex = 0;
      error = new Error(
        format.replace(/%s/g, function() { return args[argIndex++]; })
      );
      error.name = 'Invariant Violation';
    }

    error.framesToPop = 1; // we don't care about invariant's own frame
    throw error;
  }
};

var invariant_1 = invariant;

//

var shallowequal = function shallowEqual(objA, objB, compare, compareContext) {
  var ret = compare ? compare.call(compareContext, objA, objB) : void 0;

  if (ret !== void 0) {
    return !!ret;
  }

  if (objA === objB) {
    return true;
  }

  if (typeof objA !== "object" || !objA || typeof objB !== "object" || !objB) {
    return false;
  }

  var keysA = Object.keys(objA);
  var keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);

  // Test for A's keys different from B.
  for (var idx = 0; idx < keysA.length; idx++) {
    var key = keysA[idx];

    if (!bHasOwnProperty(key)) {
      return false;
    }

    var valueA = objA[key];
    var valueB = objB[key];

    ret = compare ? compare.call(compareContext, valueA, valueB, key) : void 0;

    if (ret === false || (ret === void 0 && valueA !== valueB)) {
      return false;
    }
  }

  return true;
};

var useCollector_1 = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var shallowequal_1 = __importDefault(shallowequal);

/**
 *
 * @param monitor The monitor to collect state from
 * @param collect The collecting function
 * @param onUpdate A method to invoke when updates occur
 */
function useCollector(monitor, collect, onUpdate) {
    var _a = React.useState(function () { return collect(monitor); }), collected = _a[0], setCollected = _a[1];
    var updateCollected = React.useCallback(function () {
        var nextValue = collect(monitor);
        if (!shallowequal_1.default(collected, nextValue)) {
            setCollected(nextValue);
            if (onUpdate) {
                onUpdate();
            }
        }
    }, [collected, monitor, onUpdate]);
    // update the collected properties after the first render
    // and the components are attached to dnd-core
    React.useLayoutEffect(updateCollected, []);
    return [collected, updateCollected];
}
exports.useCollector = useCollector;
});

unwrapExports(useCollector_1);
var useCollector_2 = useCollector_1.useCollector;

var useMonitorOutput_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });


function useMonitorOutput(monitor, collect, onCollect) {
    var _a = useCollector_1.useCollector(monitor, collect, onCollect), collected = _a[0], updateCollected = _a[1];
    React.useLayoutEffect(function subscribeToMonitorStateChange() {
        var handlerId = monitor.getHandlerId();
        if (handlerId == null) {
            return undefined;
        }
        return monitor.subscribeToStateChange(updateCollected, {
            handlerIds: [handlerId],
        });
    }, [monitor, updateCollected]);
    return collected;
}
exports.useMonitorOutput = useMonitorOutput;
});

unwrapExports(useMonitorOutput_1);
var useMonitorOutput_2 = useMonitorOutput_1.useMonitorOutput;

var registration = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });
function registerTarget(type, target, manager) {
    var registry = manager.getRegistry();
    var targetId = registry.addTarget(type, target);
    return [targetId, function () { return registry.removeTarget(targetId); }];
}
exports.registerTarget = registerTarget;
function registerSource(type, source, manager) {
    var registry = manager.getRegistry();
    var sourceId = registry.addSource(type, source);
    return [sourceId, function () { return registry.removeSource(sourceId); }];
}
exports.registerSource = registerSource;
});

unwrapExports(registration);
var registration_1 = registration.registerTarget;
var registration_2 = registration.registerSource;

var interfaces = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });
var HandlerRole;
(function (HandlerRole) {
    HandlerRole["SOURCE"] = "SOURCE";
    HandlerRole["TARGET"] = "TARGET";
})(HandlerRole = exports.HandlerRole || (exports.HandlerRole = {}));
});

unwrapExports(interfaces);
var interfaces_1 = interfaces.HandlerRole;

function symbolObservablePonyfill(root) {
	var result;
	var Symbol = root.Symbol;

	if (typeof Symbol === 'function') {
		if (Symbol.observable) {
			result = Symbol.observable;
		} else {
			result = Symbol('observable');
			Symbol.observable = result;
		}
	} else {
		result = '@@observable';
	}

	return result;
}

/* global window */

var root$1;

if (typeof self !== 'undefined') {
  root$1 = self;
} else if (typeof window !== 'undefined') {
  root$1 = window;
} else if (typeof global !== 'undefined') {
  root$1 = global;
} else if (typeof module !== 'undefined') {
  root$1 = module;
} else {
  root$1 = Function('return this')();
}

var result = symbolObservablePonyfill(root$1);

/**
 * These are private action types reserved by Redux.
 * For any unknown actions, you must return the current state.
 * If the current state is undefined, you must return the initial state.
 * Do not reference these action types directly in your code.
 */
var randomString = function randomString() {
  return Math.random().toString(36).substring(7).split('').join('.');
};

var ActionTypes = {
  INIT: "@@redux/INIT" + randomString(),
  REPLACE: "@@redux/REPLACE" + randomString(),
  PROBE_UNKNOWN_ACTION: function PROBE_UNKNOWN_ACTION() {
    return "@@redux/PROBE_UNKNOWN_ACTION" + randomString();
  }
};

/**
 * @param {any} obj The object to inspect.
 * @returns {boolean} True if the argument appears to be a plain object.
 */
function isPlainObject(obj) {
  if (typeof obj !== 'object' || obj === null) return false;
  var proto = obj;

  while (Object.getPrototypeOf(proto) !== null) {
    proto = Object.getPrototypeOf(proto);
  }

  return Object.getPrototypeOf(obj) === proto;
}

/**
 * Creates a Redux store that holds the state tree.
 * The only way to change the data in the store is to call `dispatch()` on it.
 *
 * There should only be a single store in your app. To specify how different
 * parts of the state tree respond to actions, you may combine several reducers
 * into a single reducer function by using `combineReducers`.
 *
 * @param {Function} reducer A function that returns the next state tree, given
 * the current state tree and the action to handle.
 *
 * @param {any} [preloadedState] The initial state. You may optionally specify it
 * to hydrate the state from the server in universal apps, or to restore a
 * previously serialized user session.
 * If you use `combineReducers` to produce the root reducer function, this must be
 * an object with the same shape as `combineReducers` keys.
 *
 * @param {Function} [enhancer] The store enhancer. You may optionally specify it
 * to enhance the store with third-party capabilities such as middleware,
 * time travel, persistence, etc. The only store enhancer that ships with Redux
 * is `applyMiddleware()`.
 *
 * @returns {Store} A Redux store that lets you read the state, dispatch actions
 * and subscribe to changes.
 */

function createStore(reducer, preloadedState, enhancer) {
  var _ref2;

  if (typeof preloadedState === 'function' && typeof enhancer === 'function' || typeof enhancer === 'function' && typeof arguments[3] === 'function') {
    throw new Error('It looks like you are passing several store enhancers to ' + 'createStore(). This is not supported. Instead, compose them ' + 'together to a single function');
  }

  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState;
    preloadedState = undefined;
  }

  if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function.');
    }

    return enhancer(createStore)(reducer, preloadedState);
  }

  if (typeof reducer !== 'function') {
    throw new Error('Expected the reducer to be a function.');
  }

  var currentReducer = reducer;
  var currentState = preloadedState;
  var currentListeners = [];
  var nextListeners = currentListeners;
  var isDispatching = false;

  function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice();
    }
  }
  /**
   * Reads the state tree managed by the store.
   *
   * @returns {any} The current state tree of your application.
   */


  function getState() {
    if (isDispatching) {
      throw new Error('You may not call store.getState() while the reducer is executing. ' + 'The reducer has already received the state as an argument. ' + 'Pass it down from the top reducer instead of reading it from the store.');
    }

    return currentState;
  }
  /**
   * Adds a change listener. It will be called any time an action is dispatched,
   * and some part of the state tree may potentially have changed. You may then
   * call `getState()` to read the current state tree inside the callback.
   *
   * You may call `dispatch()` from a change listener, with the following
   * caveats:
   *
   * 1. The subscriptions are snapshotted just before every `dispatch()` call.
   * If you subscribe or unsubscribe while the listeners are being invoked, this
   * will not have any effect on the `dispatch()` that is currently in progress.
   * However, the next `dispatch()` call, whether nested or not, will use a more
   * recent snapshot of the subscription list.
   *
   * 2. The listener should not expect to see all state changes, as the state
   * might have been updated multiple times during a nested `dispatch()` before
   * the listener is called. It is, however, guaranteed that all subscribers
   * registered before the `dispatch()` started will be called with the latest
   * state by the time it exits.
   *
   * @param {Function} listener A callback to be invoked on every dispatch.
   * @returns {Function} A function to remove this change listener.
   */


  function subscribe(listener) {
    if (typeof listener !== 'function') {
      throw new Error('Expected the listener to be a function.');
    }

    if (isDispatching) {
      throw new Error('You may not call store.subscribe() while the reducer is executing. ' + 'If you would like to be notified after the store has been updated, subscribe from a ' + 'component and invoke store.getState() in the callback to access the latest state. ' + 'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.');
    }

    var isSubscribed = true;
    ensureCanMutateNextListeners();
    nextListeners.push(listener);
    return function unsubscribe() {
      if (!isSubscribed) {
        return;
      }

      if (isDispatching) {
        throw new Error('You may not unsubscribe from a store listener while the reducer is executing. ' + 'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.');
      }

      isSubscribed = false;
      ensureCanMutateNextListeners();
      var index = nextListeners.indexOf(listener);
      nextListeners.splice(index, 1);
    };
  }
  /**
   * Dispatches an action. It is the only way to trigger a state change.
   *
   * The `reducer` function, used to create the store, will be called with the
   * current state tree and the given `action`. Its return value will
   * be considered the **next** state of the tree, and the change listeners
   * will be notified.
   *
   * The base implementation only supports plain object actions. If you want to
   * dispatch a Promise, an Observable, a thunk, or something else, you need to
   * wrap your store creating function into the corresponding middleware. For
   * example, see the documentation for the `redux-thunk` package. Even the
   * middleware will eventually dispatch plain object actions using this method.
   *
   * @param {Object} action A plain object representing “what changed”. It is
   * a good idea to keep actions serializable so you can record and replay user
   * sessions, or use the time travelling `redux-devtools`. An action must have
   * a `type` property which may not be `undefined`. It is a good idea to use
   * string constants for action types.
   *
   * @returns {Object} For convenience, the same action object you dispatched.
   *
   * Note that, if you use a custom middleware, it may wrap `dispatch()` to
   * return something else (for example, a Promise you can await).
   */


  function dispatch(action) {
    if (!isPlainObject(action)) {
      throw new Error('Actions must be plain objects. ' + 'Use custom middleware for async actions.');
    }

    if (typeof action.type === 'undefined') {
      throw new Error('Actions may not have an undefined "type" property. ' + 'Have you misspelled a constant?');
    }

    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.');
    }

    try {
      isDispatching = true;
      currentState = currentReducer(currentState, action);
    } finally {
      isDispatching = false;
    }

    var listeners = currentListeners = nextListeners;

    for (var i = 0; i < listeners.length; i++) {
      var listener = listeners[i];
      listener();
    }

    return action;
  }
  /**
   * Replaces the reducer currently used by the store to calculate the state.
   *
   * You might need this if your app implements code splitting and you want to
   * load some of the reducers dynamically. You might also need this if you
   * implement a hot reloading mechanism for Redux.
   *
   * @param {Function} nextReducer The reducer for the store to use instead.
   * @returns {void}
   */


  function replaceReducer(nextReducer) {
    if (typeof nextReducer !== 'function') {
      throw new Error('Expected the nextReducer to be a function.');
    }

    currentReducer = nextReducer;
    dispatch({
      type: ActionTypes.REPLACE
    });
  }
  /**
   * Interoperability point for observable/reactive libraries.
   * @returns {observable} A minimal observable of state changes.
   * For more information, see the observable proposal:
   * https://github.com/tc39/proposal-observable
   */


  function observable() {
    var _ref;

    var outerSubscribe = subscribe;
    return _ref = {
      /**
       * The minimal observable subscription method.
       * @param {Object} observer Any object that can be used as an observer.
       * The observer object should have a `next` method.
       * @returns {subscription} An object with an `unsubscribe` method that can
       * be used to unsubscribe the observable from the store, and prevent further
       * emission of values from the observable.
       */
      subscribe: function subscribe(observer) {
        if (typeof observer !== 'object' || observer === null) {
          throw new TypeError('Expected the observer to be an object.');
        }

        function observeState() {
          if (observer.next) {
            observer.next(getState());
          }
        }

        observeState();
        var unsubscribe = outerSubscribe(observeState);
        return {
          unsubscribe: unsubscribe
        };
      }
    }, _ref[result] = function () {
      return this;
    }, _ref;
  } // When a store is created, an "INIT" action is dispatched so that every
  // reducer returns their initial state. This effectively populates
  // the initial state tree.


  dispatch({
    type: ActionTypes.INIT
  });
  return _ref2 = {
    dispatch: dispatch,
    subscribe: subscribe,
    getState: getState,
    replaceReducer: replaceReducer
  }, _ref2[result] = observable, _ref2;
}

/**
 * Prints a warning in the console if it exists.
 *
 * @param {String} message The warning message.
 * @returns {void}
 */
function warning(message) {
  /* eslint-disable no-console */
  if (typeof console !== 'undefined' && typeof console.error === 'function') {
    console.error(message);
  }
  /* eslint-enable no-console */


  try {
    // This error was thrown as a convenience so that if you enable
    // "break on all exceptions" in your console,
    // it would pause the execution at this line.
    throw new Error(message);
  } catch (e) {} // eslint-disable-line no-empty

}

function getUndefinedStateErrorMessage(key, action) {
  var actionType = action && action.type;
  var actionDescription = actionType && "action \"" + String(actionType) + "\"" || 'an action';
  return "Given " + actionDescription + ", reducer \"" + key + "\" returned undefined. " + "To ignore an action, you must explicitly return the previous state. " + "If you want this reducer to hold no value, you can return null instead of undefined.";
}

function getUnexpectedStateShapeWarningMessage(inputState, reducers, action, unexpectedKeyCache) {
  var reducerKeys = Object.keys(reducers);
  var argumentName = action && action.type === ActionTypes.INIT ? 'preloadedState argument passed to createStore' : 'previous state received by the reducer';

  if (reducerKeys.length === 0) {
    return 'Store does not have a valid reducer. Make sure the argument passed ' + 'to combineReducers is an object whose values are reducers.';
  }

  if (!isPlainObject(inputState)) {
    return "The " + argumentName + " has unexpected type of \"" + {}.toString.call(inputState).match(/\s([a-z|A-Z]+)/)[1] + "\". Expected argument to be an object with the following " + ("keys: \"" + reducerKeys.join('", "') + "\"");
  }

  var unexpectedKeys = Object.keys(inputState).filter(function (key) {
    return !reducers.hasOwnProperty(key) && !unexpectedKeyCache[key];
  });
  unexpectedKeys.forEach(function (key) {
    unexpectedKeyCache[key] = true;
  });
  if (action && action.type === ActionTypes.REPLACE) return;

  if (unexpectedKeys.length > 0) {
    return "Unexpected " + (unexpectedKeys.length > 1 ? 'keys' : 'key') + " " + ("\"" + unexpectedKeys.join('", "') + "\" found in " + argumentName + ". ") + "Expected to find one of the known reducer keys instead: " + ("\"" + reducerKeys.join('", "') + "\". Unexpected keys will be ignored.");
  }
}

function assertReducerShape(reducers) {
  Object.keys(reducers).forEach(function (key) {
    var reducer = reducers[key];
    var initialState = reducer(undefined, {
      type: ActionTypes.INIT
    });

    if (typeof initialState === 'undefined') {
      throw new Error("Reducer \"" + key + "\" returned undefined during initialization. " + "If the state passed to the reducer is undefined, you must " + "explicitly return the initial state. The initial state may " + "not be undefined. If you don't want to set a value for this reducer, " + "you can use null instead of undefined.");
    }

    if (typeof reducer(undefined, {
      type: ActionTypes.PROBE_UNKNOWN_ACTION()
    }) === 'undefined') {
      throw new Error("Reducer \"" + key + "\" returned undefined when probed with a random type. " + ("Don't try to handle " + ActionTypes.INIT + " or other actions in \"redux/*\" ") + "namespace. They are considered private. Instead, you must return the " + "current state for any unknown actions, unless it is undefined, " + "in which case you must return the initial state, regardless of the " + "action type. The initial state may not be undefined, but can be null.");
    }
  });
}
/**
 * Turns an object whose values are different reducer functions, into a single
 * reducer function. It will call every child reducer, and gather their results
 * into a single state object, whose keys correspond to the keys of the passed
 * reducer functions.
 *
 * @param {Object} reducers An object whose values correspond to different
 * reducer functions that need to be combined into one. One handy way to obtain
 * it is to use ES6 `import * as reducers` syntax. The reducers may never return
 * undefined for any action. Instead, they should return their initial state
 * if the state passed to them was undefined, and the current state for any
 * unrecognized action.
 *
 * @returns {Function} A reducer function that invokes every reducer inside the
 * passed object, and builds a state object with the same shape.
 */


function combineReducers(reducers) {
  var reducerKeys = Object.keys(reducers);
  var finalReducers = {};

  for (var i = 0; i < reducerKeys.length; i++) {
    var key = reducerKeys[i];

    if (process.env.NODE_ENV !== 'production') {
      if (typeof reducers[key] === 'undefined') {
        warning("No reducer provided for key \"" + key + "\"");
      }
    }

    if (typeof reducers[key] === 'function') {
      finalReducers[key] = reducers[key];
    }
  }

  var finalReducerKeys = Object.keys(finalReducers);
  var unexpectedKeyCache;

  if (process.env.NODE_ENV !== 'production') {
    unexpectedKeyCache = {};
  }

  var shapeAssertionError;

  try {
    assertReducerShape(finalReducers);
  } catch (e) {
    shapeAssertionError = e;
  }

  return function combination(state, action) {
    if (state === void 0) {
      state = {};
    }

    if (shapeAssertionError) {
      throw shapeAssertionError;
    }

    if (process.env.NODE_ENV !== 'production') {
      var warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action, unexpectedKeyCache);

      if (warningMessage) {
        warning(warningMessage);
      }
    }

    var hasChanged = false;
    var nextState = {};

    for (var _i = 0; _i < finalReducerKeys.length; _i++) {
      var _key = finalReducerKeys[_i];
      var reducer = finalReducers[_key];
      var previousStateForKey = state[_key];
      var nextStateForKey = reducer(previousStateForKey, action);

      if (typeof nextStateForKey === 'undefined') {
        var errorMessage = getUndefinedStateErrorMessage(_key, action);
        throw new Error(errorMessage);
      }

      nextState[_key] = nextStateForKey;
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
    }

    return hasChanged ? nextState : state;
  };
}

function bindActionCreator(actionCreator, dispatch) {
  return function () {
    return dispatch(actionCreator.apply(this, arguments));
  };
}
/**
 * Turns an object whose values are action creators, into an object with the
 * same keys, but with every function wrapped into a `dispatch` call so they
 * may be invoked directly. This is just a convenience method, as you can call
 * `store.dispatch(MyActionCreators.doSomething())` yourself just fine.
 *
 * For convenience, you can also pass a single function as the first argument,
 * and get a function in return.
 *
 * @param {Function|Object} actionCreators An object whose values are action
 * creator functions. One handy way to obtain it is to use ES6 `import * as`
 * syntax. You may also pass a single function.
 *
 * @param {Function} dispatch The `dispatch` function available on your Redux
 * store.
 *
 * @returns {Function|Object} The object mimicking the original object, but with
 * every action creator wrapped into the `dispatch` call. If you passed a
 * function as `actionCreators`, the return value will also be a single
 * function.
 */


function bindActionCreators(actionCreators, dispatch) {
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch);
  }

  if (typeof actionCreators !== 'object' || actionCreators === null) {
    throw new Error("bindActionCreators expected an object or a function, instead received " + (actionCreators === null ? 'null' : typeof actionCreators) + ". " + "Did you write \"import ActionCreators from\" instead of \"import * as ActionCreators from\"?");
  }

  var keys = Object.keys(actionCreators);
  var boundActionCreators = {};

  for (var i = 0; i < keys.length; i++) {
    var key = keys[i];
    var actionCreator = actionCreators[key];

    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch);
    }
  }

  return boundActionCreators;
}

function _defineProperty$2(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _objectSpread$1(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    var ownKeys = Object.keys(source);

    if (typeof Object.getOwnPropertySymbols === 'function') {
      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
      }));
    }

    ownKeys.forEach(function (key) {
      _defineProperty$2(target, key, source[key]);
    });
  }

  return target;
}

/**
 * Composes single-argument functions from right to left. The rightmost
 * function can take multiple arguments as it provides the signature for
 * the resulting composite function.
 *
 * @param {...Function} funcs The functions to compose.
 * @returns {Function} A function obtained by composing the argument functions
 * from right to left. For example, compose(f, g, h) is identical to doing
 * (...args) => f(g(h(...args))).
 */
function compose() {
  for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {
    funcs[_key] = arguments[_key];
  }

  if (funcs.length === 0) {
    return function (arg) {
      return arg;
    };
  }

  if (funcs.length === 1) {
    return funcs[0];
  }

  return funcs.reduce(function (a, b) {
    return function () {
      return a(b.apply(void 0, arguments));
    };
  });
}

/**
 * Creates a store enhancer that applies middleware to the dispatch method
 * of the Redux store. This is handy for a variety of tasks, such as expressing
 * asynchronous actions in a concise manner, or logging every action payload.
 *
 * See `redux-thunk` package as an example of the Redux middleware.
 *
 * Because middleware is potentially asynchronous, this should be the first
 * store enhancer in the composition chain.
 *
 * Note that each middleware will be given the `dispatch` and `getState` functions
 * as named arguments.
 *
 * @param {...Function} middlewares The middleware chain to be applied.
 * @returns {Function} A store enhancer applying the middleware.
 */

function applyMiddleware() {
  for (var _len = arguments.length, middlewares = new Array(_len), _key = 0; _key < _len; _key++) {
    middlewares[_key] = arguments[_key];
  }

  return function (createStore) {
    return function () {
      var store = createStore.apply(void 0, arguments);

      var _dispatch = function dispatch() {
        throw new Error("Dispatching while constructing your middleware is not allowed. " + "Other middleware would not be applied to this dispatch.");
      };

      var middlewareAPI = {
        getState: store.getState,
        dispatch: function dispatch() {
          return _dispatch.apply(void 0, arguments);
        }
      };
      var chain = middlewares.map(function (middleware) {
        return middleware(middlewareAPI);
      });
      _dispatch = compose.apply(void 0, chain)(store.dispatch);
      return _objectSpread$1({}, store, {
        dispatch: _dispatch
      });
    };
  };
}

/*
 * This is a dummy function to check if the function name has been altered by minification.
 * If the function has been minified and NODE_ENV !== 'production', warn the user.
 */

function isCrushed() {}

if (process.env.NODE_ENV !== 'production' && typeof isCrushed.name === 'string' && isCrushed.name !== 'isCrushed') {
  warning('You are currently using minified code outside of NODE_ENV === "production". ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) ' + 'to ensure you have the correct code for your production build.');
}

var redux = /*#__PURE__*/Object.freeze({
  createStore: createStore,
  combineReducers: combineReducers,
  bindActionCreators: bindActionCreators,
  applyMiddleware: applyMiddleware,
  compose: compose,
  __DO_NOT_USE__ActionTypes: ActionTypes
});

var types = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });
exports.INIT_COORDS = 'dnd-core/INIT_COORDS';
exports.BEGIN_DRAG = 'dnd-core/BEGIN_DRAG';
exports.PUBLISH_DRAG_SOURCE = 'dnd-core/PUBLISH_DRAG_SOURCE';
exports.HOVER = 'dnd-core/HOVER';
exports.DROP = 'dnd-core/DROP';
exports.END_DRAG = 'dnd-core/END_DRAG';
});

unwrapExports(types);
var types_1 = types.INIT_COORDS;
var types_2 = types.BEGIN_DRAG;
var types_3 = types.PUBLISH_DRAG_SOURCE;
var types_4 = types.HOVER;
var types_5 = types.DROP;
var types_6 = types.END_DRAG;

var setClientOffset_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });

function setClientOffset(clientOffset, sourceClientOffset) {
    return {
        type: types.INIT_COORDS,
        payload: {
            sourceClientOffset: sourceClientOffset || null,
            clientOffset: clientOffset || null,
        },
    };
}
exports.setClientOffset = setClientOffset;
});

unwrapExports(setClientOffset_1);
var setClientOffset_2 = setClientOffset_1.setClientOffset;

var js_utils = createCommonjsModule(function (module, exports) {
// cheap lodash replacements
Object.defineProperty(exports, "__esModule", { value: true });
/**
 * drop-in replacement for _.get
 * @param obj
 * @param path
 * @param defaultValue
 */
function get(obj, path, defaultValue) {
    return path
        .split('.')
        .reduce(function (a, c) { return (a && a[c] ? a[c] : defaultValue || null); }, obj);
}
exports.get = get;
/**
 * drop-in replacement for _.without
 */
function without(items, item) {
    return items.filter(function (i) { return i !== item; });
}
exports.without = without;
/**
 * drop-in replacement for _.isString
 * @param input
 */
function isString(input) {
    return typeof input === 'string';
}
exports.isString = isString;
/**
 * drop-in replacement for _.isString
 * @param input
 */
function isObject(input) {
    return typeof input === 'object';
}
exports.isObject = isObject;
/**
 * repalcement for _.xor
 * @param itemsA
 * @param itemsB
 */
function xor(itemsA, itemsB) {
    var map = new Map();
    var insertItem = function (item) {
        return map.set(item, map.has(item) ? map.get(item) + 1 : 1);
    };
    itemsA.forEach(insertItem);
    itemsB.forEach(insertItem);
    var result = [];
    map.forEach(function (count, key) {
        if (count === 1) {
            result.push(key);
        }
    });
    return result;
}
exports.xor = xor;
/**
 * replacement for _.intersection
 * @param itemsA
 * @param itemsB
 */
function intersection(itemsA, itemsB) {
    return itemsA.filter(function (t) { return itemsB.indexOf(t) > -1; });
}
exports.intersection = intersection;
});

unwrapExports(js_utils);
var js_utils_1 = js_utils.get;
var js_utils_2 = js_utils.without;
var js_utils_3 = js_utils.isString;
var js_utils_4 = js_utils.isObject;
var js_utils_5 = js_utils.xor;
var js_utils_6 = js_utils.intersection;

var beginDrag = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var invariant_1$$1 = __importDefault(invariant_1);



var ResetCoordinatesAction = {
    type: types.INIT_COORDS,
    payload: {
        clientOffset: null,
        sourceClientOffset: null,
    },
};
function createBeginDrag(manager) {
    return function beginDrag(sourceIds, options) {
        if (sourceIds === void 0) { sourceIds = []; }
        if (options === void 0) { options = {
            publishSource: true,
        }; }
        var _a = options.publishSource, publishSource = _a === void 0 ? true : _a, clientOffset = options.clientOffset, getSourceClientOffset = options.getSourceClientOffset;
        var monitor = manager.getMonitor();
        var registry = manager.getRegistry();
        // Initialize the coordinates using the client offset
        manager.dispatch(setClientOffset_1.setClientOffset(clientOffset));
        verifyInvariants(sourceIds, monitor, registry);
        // Get the draggable source
        var sourceId = getDraggableSource(sourceIds, monitor);
        if (sourceId === null) {
            manager.dispatch(ResetCoordinatesAction);
            return;
        }
        // Get the source client offset
        var sourceClientOffset = null;
        if (clientOffset) {
            verifyGetSourceClientOffsetIsFunction(getSourceClientOffset);
            sourceClientOffset = getSourceClientOffset(sourceId);
        }
        // Initialize the full coordinates
        manager.dispatch(setClientOffset_1.setClientOffset(clientOffset, sourceClientOffset));
        var source = registry.getSource(sourceId);
        var item = source.beginDrag(monitor, sourceId);
        verifyItemIsObject(item);
        registry.pinSource(sourceId);
        var itemType = registry.getSourceType(sourceId);
        return {
            type: types.BEGIN_DRAG,
            payload: {
                itemType: itemType,
                item: item,
                sourceId: sourceId,
                clientOffset: clientOffset || null,
                sourceClientOffset: sourceClientOffset || null,
                isSourcePublic: !!publishSource,
            },
        };
    };
}
exports.default = createBeginDrag;
function verifyInvariants(sourceIds, monitor, registry) {
    invariant_1$$1.default(!monitor.isDragging(), 'Cannot call beginDrag while dragging.');
    for (var _i = 0, sourceIds_1 = sourceIds; _i < sourceIds_1.length; _i++) {
        var s = sourceIds_1[_i];
        invariant_1$$1.default(registry.getSource(s), 'Expected sourceIds to be registered.');
    }
}
function verifyGetSourceClientOffsetIsFunction(getSourceClientOffset) {
    invariant_1$$1.default(typeof getSourceClientOffset === 'function', 'When clientOffset is provided, getSourceClientOffset must be a function.');
}
function verifyItemIsObject(item) {
    invariant_1$$1.default(js_utils.isObject(item), 'Item must be an object.');
}
function getDraggableSource(sourceIds, monitor) {
    var sourceId = null;
    for (var i = sourceIds.length - 1; i >= 0; i--) {
        if (monitor.canDragSource(sourceIds[i])) {
            sourceId = sourceIds[i];
            break;
        }
    }
    return sourceId;
}
});

unwrapExports(beginDrag);

var publishDragSource = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });

function createPublishDragSource(manager) {
    return function publishDragSource() {
        var monitor = manager.getMonitor();
        if (monitor.isDragging()) {
            return { type: types.PUBLISH_DRAG_SOURCE };
        }
    };
}
exports.default = createPublishDragSource;
});

unwrapExports(publishDragSource);

var matchesType_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });
function matchesType(targetType, draggedItemType) {
    if (draggedItemType === null) {
        return targetType === null;
    }
    return Array.isArray(targetType)
        ? targetType.some(function (t) { return t === draggedItemType; })
        : targetType === draggedItemType;
}
exports.default = matchesType;
});

unwrapExports(matchesType_1);

var hover = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var invariant_1$$1 = __importDefault(invariant_1);
var matchesType_1$$1 = __importDefault(matchesType_1);

function createHover(manager) {
    return function hover(targetIdsArg, _a) {
        var clientOffset = (_a === void 0 ? {} : _a).clientOffset;
        verifyTargetIdsIsArray(targetIdsArg);
        var targetIds = targetIdsArg.slice(0);
        var monitor = manager.getMonitor();
        var registry = manager.getRegistry();
        checkInvariants(targetIds, monitor, registry);
        var draggedItemType = monitor.getItemType();
        removeNonMatchingTargetIds(targetIds, registry, draggedItemType);
        hoverAllTargets(targetIds, monitor, registry);
        return {
            type: types.HOVER,
            payload: {
                targetIds: targetIds,
                clientOffset: clientOffset || null,
            },
        };
    };
}
exports.default = createHover;
function verifyTargetIdsIsArray(targetIdsArg) {
    invariant_1$$1.default(Array.isArray(targetIdsArg), 'Expected targetIds to be an array.');
}
function checkInvariants(targetIds, monitor, registry) {
    invariant_1$$1.default(monitor.isDragging(), 'Cannot call hover while not dragging.');
    invariant_1$$1.default(!monitor.didDrop(), 'Cannot call hover after drop.');
    for (var i = 0; i < targetIds.length; i++) {
        var targetId = targetIds[i];
        invariant_1$$1.default(targetIds.lastIndexOf(targetId) === i, 'Expected targetIds to be unique in the passed array.');
        var target = registry.getTarget(targetId);
        invariant_1$$1.default(target, 'Expected targetIds to be registered.');
    }
}
function removeNonMatchingTargetIds(targetIds, registry, draggedItemType) {
    // Remove those targetIds that don't match the targetType.  This
    // fixes shallow isOver which would only be non-shallow because of
    // non-matching targets.
    for (var i = targetIds.length - 1; i >= 0; i--) {
        var targetId = targetIds[i];
        var targetType = registry.getTargetType(targetId);
        if (!matchesType_1$$1.default(targetType, draggedItemType)) {
            targetIds.splice(i, 1);
        }
    }
}
function hoverAllTargets(targetIds, monitor, registry) {
    // Finally call hover on all matching targets.
    for (var _i = 0, targetIds_1 = targetIds; _i < targetIds_1.length; _i++) {
        var targetId = targetIds_1[_i];
        var target = registry.getTarget(targetId);
        target.hover(monitor, targetId);
    }
}
});

unwrapExports(hover);

var drop = createCommonjsModule(function (module, exports) {
var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var invariant_1$$1 = __importDefault(invariant_1);


function createDrop(manager) {
    return function drop(options) {
        if (options === void 0) { options = {}; }
        var monitor = manager.getMonitor();
        var registry = manager.getRegistry();
        verifyInvariants(monitor);
        var targetIds = getDroppableTargets(monitor);
        // Multiple actions are dispatched here, which is why this doesn't return an action
        targetIds.forEach(function (targetId, index) {
            var dropResult = determineDropResult(targetId, index, registry, monitor);
            var action = {
                type: types.DROP,
                payload: {
                    dropResult: __assign({}, options, dropResult),
                },
            };
            manager.dispatch(action);
        });
    };
}
exports.default = createDrop;
function verifyInvariants(monitor) {
    invariant_1$$1.default(monitor.isDragging(), 'Cannot call drop while not dragging.');
    invariant_1$$1.default(!monitor.didDrop(), 'Cannot call drop twice during one drag operation.');
}
function determineDropResult(targetId, index, registry, monitor) {
    var target = registry.getTarget(targetId);
    var dropResult = target ? target.drop(monitor, targetId) : undefined;
    verifyDropResultType(dropResult);
    if (typeof dropResult === 'undefined') {
        dropResult = index === 0 ? {} : monitor.getDropResult();
    }
    return dropResult;
}
function verifyDropResultType(dropResult) {
    invariant_1$$1.default(typeof dropResult === 'undefined' || js_utils.isObject(dropResult), 'Drop result must either be an object or undefined.');
}
function getDroppableTargets(monitor) {
    var targetIds = monitor
        .getTargetIds()
        .filter(monitor.canDropOnTarget, monitor);
    targetIds.reverse();
    return targetIds;
}
});

unwrapExports(drop);

var endDrag = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var invariant_1$$1 = __importDefault(invariant_1);

function createEndDrag(manager) {
    return function endDrag() {
        var monitor = manager.getMonitor();
        var registry = manager.getRegistry();
        verifyIsDragging(monitor);
        var sourceId = monitor.getSourceId();
        var source = registry.getSource(sourceId, true);
        source.endDrag(monitor, sourceId);
        registry.unpinSource();
        return { type: types.END_DRAG };
    };
}
exports.default = createEndDrag;
function verifyIsDragging(monitor) {
    invariant_1$$1.default(monitor.isDragging(), 'Cannot call endDrag while not dragging.');
}
});

unwrapExports(endDrag);

var dragDrop = createCommonjsModule(function (module, exports) {
function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var beginDrag_1 = __importDefault(beginDrag);
var publishDragSource_1 = __importDefault(publishDragSource);
var hover_1 = __importDefault(hover);
var drop_1 = __importDefault(drop);
var endDrag_1 = __importDefault(endDrag);
__export(types);
function createDragDropActions(manager) {
    return {
        beginDrag: beginDrag_1.default(manager),
        publishDragSource: publishDragSource_1.default(manager),
        hover: hover_1.default(manager),
        drop: drop_1.default(manager),
        endDrag: endDrag_1.default(manager),
    };
}
exports.default = createDragDropActions;
});

unwrapExports(dragDrop);

var equality = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });
exports.strictEquality = function (a, b) { return a === b; };
/**
 * Determine if two cartesian coordinate offsets are equal
 * @param offsetA
 * @param offsetB
 */
function areCoordsEqual(offsetA, offsetB) {
    if (!offsetA && !offsetB) {
        return true;
    }
    else if (!offsetA || !offsetB) {
        return false;
    }
    else {
        return offsetA.x === offsetB.x && offsetA.y === offsetB.y;
    }
}
exports.areCoordsEqual = areCoordsEqual;
/**
 * Determines if two arrays of items are equal
 * @param a The first array of items
 * @param b The second array of items
 */
function areArraysEqual(a, b, isEqual) {
    if (isEqual === void 0) { isEqual = exports.strictEquality; }
    if (a.length !== b.length) {
        return false;
    }
    for (var i = 0; i < a.length; ++i) {
        if (!isEqual(a[i], b[i])) {
            return false;
        }
    }
    return true;
}
exports.areArraysEqual = areArraysEqual;
});

unwrapExports(equality);
var equality_1 = equality.strictEquality;
var equality_2 = equality.areCoordsEqual;
var equality_3 = equality.areArraysEqual;

var dragOffset_1 = createCommonjsModule(function (module, exports) {
var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });


var initialState = {
    initialSourceClientOffset: null,
    initialClientOffset: null,
    clientOffset: null,
};
function dragOffset(state, action) {
    if (state === void 0) { state = initialState; }
    var payload = action.payload;
    switch (action.type) {
        case dragDrop.INIT_COORDS:
        case dragDrop.BEGIN_DRAG:
            return {
                initialSourceClientOffset: payload.sourceClientOffset,
                initialClientOffset: payload.clientOffset,
                clientOffset: payload.clientOffset,
            };
        case dragDrop.HOVER:
            if (equality.areCoordsEqual(state.clientOffset, payload.clientOffset)) {
                return state;
            }
            return __assign({}, state, { clientOffset: payload.clientOffset });
        case dragDrop.END_DRAG:
        case dragDrop.DROP:
            return initialState;
        default:
            return state;
    }
}
exports.default = dragOffset;
});

unwrapExports(dragOffset_1);

var registry = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });
exports.ADD_SOURCE = 'dnd-core/ADD_SOURCE';
exports.ADD_TARGET = 'dnd-core/ADD_TARGET';
exports.REMOVE_SOURCE = 'dnd-core/REMOVE_SOURCE';
exports.REMOVE_TARGET = 'dnd-core/REMOVE_TARGET';
function addSource(sourceId) {
    return {
        type: exports.ADD_SOURCE,
        payload: {
            sourceId: sourceId,
        },
    };
}
exports.addSource = addSource;
function addTarget(targetId) {
    return {
        type: exports.ADD_TARGET,
        payload: {
            targetId: targetId,
        },
    };
}
exports.addTarget = addTarget;
function removeSource(sourceId) {
    return {
        type: exports.REMOVE_SOURCE,
        payload: {
            sourceId: sourceId,
        },
    };
}
exports.removeSource = removeSource;
function removeTarget(targetId) {
    return {
        type: exports.REMOVE_TARGET,
        payload: {
            targetId: targetId,
        },
    };
}
exports.removeTarget = removeTarget;
});

unwrapExports(registry);
var registry_1 = registry.ADD_SOURCE;
var registry_2 = registry.ADD_TARGET;
var registry_3 = registry.REMOVE_SOURCE;
var registry_4 = registry.REMOVE_TARGET;
var registry_5 = registry.addSource;
var registry_6 = registry.addTarget;
var registry_7 = registry.removeSource;
var registry_8 = registry.removeTarget;

var dragOperation_1 = createCommonjsModule(function (module, exports) {
var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });



var initialState = {
    itemType: null,
    item: null,
    sourceId: null,
    targetIds: [],
    dropResult: null,
    didDrop: false,
    isSourcePublic: null,
};
function dragOperation(state, action) {
    if (state === void 0) { state = initialState; }
    var payload = action.payload;
    switch (action.type) {
        case dragDrop.BEGIN_DRAG:
            return __assign({}, state, { itemType: payload.itemType, item: payload.item, sourceId: payload.sourceId, isSourcePublic: payload.isSourcePublic, dropResult: null, didDrop: false });
        case dragDrop.PUBLISH_DRAG_SOURCE:
            return __assign({}, state, { isSourcePublic: true });
        case dragDrop.HOVER:
            return __assign({}, state, { targetIds: payload.targetIds });
        case registry.REMOVE_TARGET:
            if (state.targetIds.indexOf(payload.targetId) === -1) {
                return state;
            }
            return __assign({}, state, { targetIds: js_utils.without(state.targetIds, payload.targetId) });
        case dragDrop.DROP:
            return __assign({}, state, { dropResult: payload.dropResult, didDrop: true, targetIds: [] });
        case dragDrop.END_DRAG:
            return __assign({}, state, { itemType: null, item: null, sourceId: null, dropResult: null, didDrop: false, isSourcePublic: null, targetIds: [] });
        default:
            return state;
    }
}
exports.default = dragOperation;
});

unwrapExports(dragOperation_1);

var refCount_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });

function refCount(state, action) {
    if (state === void 0) { state = 0; }
    switch (action.type) {
        case registry.ADD_SOURCE:
        case registry.ADD_TARGET:
            return state + 1;
        case registry.REMOVE_SOURCE:
        case registry.REMOVE_TARGET:
            return state - 1;
        default:
            return state;
    }
}
exports.default = refCount;
});

unwrapExports(refCount_1);

var dirtiness = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });

exports.NONE = [];
exports.ALL = [];
exports.NONE.__IS_NONE__ = true;
exports.ALL.__IS_ALL__ = true;
/**
 * Determines if the given handler IDs are dirty or not.
 *
 * @param dirtyIds The set of dirty handler ids
 * @param handlerIds The set of handler ids to check
 */
function areDirty(dirtyIds, handlerIds) {
    if (dirtyIds === exports.NONE) {
        return false;
    }
    if (dirtyIds === exports.ALL || typeof handlerIds === 'undefined') {
        return true;
    }
    var commonIds = js_utils.intersection(handlerIds, dirtyIds);
    return commonIds.length > 0;
}
exports.areDirty = areDirty;
});

unwrapExports(dirtiness);
var dirtiness_1 = dirtiness.NONE;
var dirtiness_2 = dirtiness.ALL;
var dirtiness_3 = dirtiness.areDirty;

var dirtyHandlerIds_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });





function dirtyHandlerIds(state, action) {
    if (state === void 0) { state = dirtiness.NONE; }
    switch (action.type) {
        case dragDrop.HOVER:
            break;
        case registry.ADD_SOURCE:
        case registry.ADD_TARGET:
        case registry.REMOVE_TARGET:
        case registry.REMOVE_SOURCE:
            return dirtiness.NONE;
        case dragDrop.BEGIN_DRAG:
        case dragDrop.PUBLISH_DRAG_SOURCE:
        case dragDrop.END_DRAG:
        case dragDrop.DROP:
        default:
            return dirtiness.ALL;
    }
    var _a = action.payload, _b = _a.targetIds, targetIds = _b === void 0 ? [] : _b, _c = _a.prevTargetIds, prevTargetIds = _c === void 0 ? [] : _c;
    var result = js_utils.xor(targetIds, prevTargetIds);
    var didChange = result.length > 0 || !equality.areArraysEqual(targetIds, prevTargetIds);
    if (!didChange) {
        return dirtiness.NONE;
    }
    // Check the target ids at the innermost position. If they are valid, add them
    // to the result
    var prevInnermostTargetId = prevTargetIds[prevTargetIds.length - 1];
    var innermostTargetId = targetIds[targetIds.length - 1];
    if (prevInnermostTargetId !== innermostTargetId) {
        if (prevInnermostTargetId) {
            result.push(prevInnermostTargetId);
        }
        if (innermostTargetId) {
            result.push(innermostTargetId);
        }
    }
    return result;
}
exports.default = dirtyHandlerIds;
});

unwrapExports(dirtyHandlerIds_1);

var stateId_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });
function stateId(state) {
    if (state === void 0) { state = 0; }
    return state + 1;
}
exports.default = stateId;
});

unwrapExports(stateId_1);

var reducers = createCommonjsModule(function (module, exports) {
var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var dragOffset_1$$1 = __importDefault(dragOffset_1);
var dragOperation_1$$1 = __importDefault(dragOperation_1);
var refCount_1$$1 = __importDefault(refCount_1);
var dirtyHandlerIds_1$$1 = __importDefault(dirtyHandlerIds_1);
var stateId_1$$1 = __importDefault(stateId_1);

function reduce(state, action) {
    if (state === void 0) { state = {}; }
    return {
        dirtyHandlerIds: dirtyHandlerIds_1$$1.default(state.dirtyHandlerIds, {
            type: action.type,
            payload: __assign({}, action.payload, { prevTargetIds: js_utils.get(state, 'dragOperation.targetIds', []) }),
        }),
        dragOffset: dragOffset_1$$1.default(state.dragOffset, action),
        refCount: refCount_1$$1.default(state.refCount, action),
        dragOperation: dragOperation_1$$1.default(state.dragOperation, action),
        stateId: stateId_1$$1.default(state.stateId),
    };
}
exports.default = reduce;
});

unwrapExports(reducers);

var coords = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });
/**
 * Coordinate addition
 * @param a The first coordinate
 * @param b The second coordinate
 */
function add(a, b) {
    return {
        x: a.x + b.x,
        y: a.y + b.y,
    };
}
exports.add = add;
/**
 * Coordinate subtraction
 * @param a The first coordinate
 * @param b The second coordinate
 */
function subtract(a, b) {
    return {
        x: a.x - b.x,
        y: a.y - b.y,
    };
}
exports.subtract = subtract;
/**
 * Returns the cartesian distance of the drag source component's position, based on its position
 * at the time when the current drag operation has started, and the movement difference.
 *
 * Returns null if no item is being dragged.
 *
 * @param state The offset state to compute from
 */
function getSourceClientOffset(state) {
    var clientOffset = state.clientOffset, initialClientOffset = state.initialClientOffset, initialSourceClientOffset = state.initialSourceClientOffset;
    if (!clientOffset || !initialClientOffset || !initialSourceClientOffset) {
        return null;
    }
    return subtract(add(clientOffset, initialSourceClientOffset), initialClientOffset);
}
exports.getSourceClientOffset = getSourceClientOffset;
/**
 * Determines the x,y offset between the client offset and the initial client offset
 *
 * @param state The offset state to compute from
 */
function getDifferenceFromInitialOffset(state) {
    var clientOffset = state.clientOffset, initialClientOffset = state.initialClientOffset;
    if (!clientOffset || !initialClientOffset) {
        return null;
    }
    return subtract(clientOffset, initialClientOffset);
}
exports.getDifferenceFromInitialOffset = getDifferenceFromInitialOffset;
});

unwrapExports(coords);
var coords_1 = coords.add;
var coords_2 = coords.subtract;
var coords_3 = coords.getSourceClientOffset;
var coords_4 = coords.getDifferenceFromInitialOffset;

var DragDropMonitorImpl_1 = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var invariant_1$$1 = __importDefault(invariant_1);
var matchesType_1$$1 = __importDefault(matchesType_1);


var DragDropMonitorImpl = /** @class */ (function () {
    function DragDropMonitorImpl(store, registry) {
        this.store = store;
        this.registry = registry;
    }
    DragDropMonitorImpl.prototype.subscribeToStateChange = function (listener, options) {
        var _this = this;
        if (options === void 0) { options = { handlerIds: undefined }; }
        var handlerIds = options.handlerIds;
        invariant_1$$1.default(typeof listener === 'function', 'listener must be a function.');
        invariant_1$$1.default(typeof handlerIds === 'undefined' || Array.isArray(handlerIds), 'handlerIds, when specified, must be an array of strings.');
        var prevStateId = this.store.getState().stateId;
        var handleChange = function () {
            var state = _this.store.getState();
            var currentStateId = state.stateId;
            try {
                var canSkipListener = currentStateId === prevStateId ||
                    (currentStateId === prevStateId + 1 &&
                        !dirtiness.areDirty(state.dirtyHandlerIds, handlerIds));
                if (!canSkipListener) {
                    listener();
                }
            }
            finally {
                prevStateId = currentStateId;
            }
        };
        return this.store.subscribe(handleChange);
    };
    DragDropMonitorImpl.prototype.subscribeToOffsetChange = function (listener) {
        var _this = this;
        invariant_1$$1.default(typeof listener === 'function', 'listener must be a function.');
        var previousState = this.store.getState().dragOffset;
        var handleChange = function () {
            var nextState = _this.store.getState().dragOffset;
            if (nextState === previousState) {
                return;
            }
            previousState = nextState;
            listener();
        };
        return this.store.subscribe(handleChange);
    };
    DragDropMonitorImpl.prototype.canDragSource = function (sourceId) {
        if (!sourceId) {
            return false;
        }
        var source = this.registry.getSource(sourceId);
        invariant_1$$1.default(source, 'Expected to find a valid source.');
        if (this.isDragging()) {
            return false;
        }
        return source.canDrag(this, sourceId);
    };
    DragDropMonitorImpl.prototype.canDropOnTarget = function (targetId) {
        // undefined on initial render
        if (!targetId) {
            return false;
        }
        var target = this.registry.getTarget(targetId);
        invariant_1$$1.default(target, 'Expected to find a valid target.');
        if (!this.isDragging() || this.didDrop()) {
            return false;
        }
        var targetType = this.registry.getTargetType(targetId);
        var draggedItemType = this.getItemType();
        return (matchesType_1$$1.default(targetType, draggedItemType) && target.canDrop(this, targetId));
    };
    DragDropMonitorImpl.prototype.isDragging = function () {
        return Boolean(this.getItemType());
    };
    DragDropMonitorImpl.prototype.isDraggingSource = function (sourceId) {
        // undefined on initial render
        if (!sourceId) {
            return false;
        }
        var source = this.registry.getSource(sourceId, true);
        invariant_1$$1.default(source, 'Expected to find a valid source.');
        if (!this.isDragging() || !this.isSourcePublic()) {
            return false;
        }
        var sourceType = this.registry.getSourceType(sourceId);
        var draggedItemType = this.getItemType();
        if (sourceType !== draggedItemType) {
            return false;
        }
        return source.isDragging(this, sourceId);
    };
    DragDropMonitorImpl.prototype.isOverTarget = function (targetId, options) {
        if (options === void 0) { options = { shallow: false }; }
        // undefined on initial render
        if (!targetId) {
            return false;
        }
        var shallow = options.shallow;
        if (!this.isDragging()) {
            return false;
        }
        var targetType = this.registry.getTargetType(targetId);
        var draggedItemType = this.getItemType();
        if (draggedItemType && !matchesType_1$$1.default(targetType, draggedItemType)) {
            return false;
        }
        var targetIds = this.getTargetIds();
        if (!targetIds.length) {
            return false;
        }
        var index = targetIds.indexOf(targetId);
        if (shallow) {
            return index === targetIds.length - 1;
        }
        else {
            return index > -1;
        }
    };
    DragDropMonitorImpl.prototype.getItemType = function () {
        return this.store.getState().dragOperation.itemType;
    };
    DragDropMonitorImpl.prototype.getItem = function () {
        return this.store.getState().dragOperation.item;
    };
    DragDropMonitorImpl.prototype.getSourceId = function () {
        return this.store.getState().dragOperation.sourceId;
    };
    DragDropMonitorImpl.prototype.getTargetIds = function () {
        return this.store.getState().dragOperation.targetIds;
    };
    DragDropMonitorImpl.prototype.getDropResult = function () {
        return this.store.getState().dragOperation.dropResult;
    };
    DragDropMonitorImpl.prototype.didDrop = function () {
        return this.store.getState().dragOperation.didDrop;
    };
    DragDropMonitorImpl.prototype.isSourcePublic = function () {
        return this.store.getState().dragOperation.isSourcePublic;
    };
    DragDropMonitorImpl.prototype.getInitialClientOffset = function () {
        return this.store.getState().dragOffset.initialClientOffset;
    };
    DragDropMonitorImpl.prototype.getInitialSourceClientOffset = function () {
        return this.store.getState().dragOffset.initialSourceClientOffset;
    };
    DragDropMonitorImpl.prototype.getClientOffset = function () {
        return this.store.getState().dragOffset.clientOffset;
    };
    DragDropMonitorImpl.prototype.getSourceClientOffset = function () {
        return coords.getSourceClientOffset(this.store.getState().dragOffset);
    };
    DragDropMonitorImpl.prototype.getDifferenceFromInitialOffset = function () {
        return coords.getDifferenceFromInitialOffset(this.store.getState().dragOffset);
    };
    return DragDropMonitorImpl;
}());
exports.default = DragDropMonitorImpl;
});

unwrapExports(DragDropMonitorImpl_1);

var domain$1; // The domain module is executed on demand
var hasSetImmediate = typeof setImmediate === "function";

// Use the fastest means possible to execute a task in its own turn, with
// priority over other events including network IO events in Node.js.
//
// An exception thrown by a task will permanently interrupt the processing of
// subsequent tasks. The higher level `asap` function ensures that if an
// exception is thrown by a task, that the task queue will continue flushing as
// soon as possible, but if you use `rawAsap` directly, you are responsible to
// either ensure that no exceptions are thrown from your task, or to manually
// call `rawAsap.requestFlush` if an exception is thrown.
var raw = rawAsap;
function rawAsap(task) {
    if (!queue$1.length) {
        requestFlush();
        flushing = true;
    }
    // Avoids a function call
    queue$1[queue$1.length] = task;
}

var queue$1 = [];
// Once a flush has been requested, no further calls to `requestFlush` are
// necessary until the next `flush` completes.
var flushing = false;
// The position of the next task to execute in the task queue. This is
// preserved between calls to `flush` so that it can be resumed if
// a task throws an exception.
var index$8 = 0;
// If a task schedules additional tasks recursively, the task queue can grow
// unbounded. To prevent memory excaustion, the task queue will periodically
// truncate already-completed tasks.
var capacity = 1024;

// The flush function processes all tasks that have been scheduled with
// `rawAsap` unless and until one of those tasks throws an exception.
// If a task throws an exception, `flush` ensures that its state will remain
// consistent and will resume where it left off when called again.
// However, `flush` does not make any arrangements to be called again if an
// exception is thrown.
function flush$1() {
    while (index$8 < queue$1.length) {
        var currentIndex = index$8;
        // Advance the index before calling the task. This ensures that we will
        // begin flushing on the next task the task throws an error.
        index$8 = index$8 + 1;
        queue$1[currentIndex].call();
        // Prevent leaking memory for long chains of recursive calls to `asap`.
        // If we call `asap` within tasks scheduled by `asap`, the queue will
        // grow, but to avoid an O(n) walk for every task we execute, we don't
        // shift tasks off the queue after they have been executed.
        // Instead, we periodically shift 1024 tasks off the queue.
        if (index$8 > capacity) {
            // Manually shift all values starting at the index back to the
            // beginning of the queue.
            for (var scan = 0, newLength = queue$1.length - index$8; scan < newLength; scan++) {
                queue$1[scan] = queue$1[scan + index$8];
            }
            queue$1.length -= index$8;
            index$8 = 0;
        }
    }
    queue$1.length = 0;
    index$8 = 0;
    flushing = false;
}

rawAsap.requestFlush = requestFlush;
function requestFlush() {
    // Ensure flushing is not bound to any domain.
    // It is not sufficient to exit the domain, because domains exist on a stack.
    // To execute code outside of any domain, the following dance is necessary.
    var parentDomain = process.domain;
    if (parentDomain) {
        if (!domain$1) {
            // Lazy execute the domain module.
            // Only employed if the user elects to use domains.
            domain$1 = domain;
        }
        domain$1.active = process.domain = null;
    }

    // `setImmediate` is slower that `process.nextTick`, but `process.nextTick`
    // cannot handle recursion.
    // `requestFlush` will only be called recursively from `asap.js`, to resume
    // flushing after an error is thrown into a domain.
    // Conveniently, `setImmediate` was introduced in the same version
    // `process.nextTick` started throwing recursion errors.
    if (flushing && hasSetImmediate) {
        setImmediate(flush$1);
    } else {
        process.nextTick(flush$1);
    }

    if (parentDomain) {
        domain$1.active = process.domain = parentDomain;
    }
}

var freeTasks = [];

/**
 * Calls a task as soon as possible after returning, in its own event, with
 * priority over IO events. An exception thrown in a task can be handled by
 * `process.on("uncaughtException") or `domain.on("error")`, but will otherwise
 * crash the process. If the error is handled, all subsequent tasks will
 * resume.
 *
 * @param {{call}} task A callable object, typically a function that takes no
 * arguments.
 */
var asap_1 = asap;
function asap(task) {
    var rawTask;
    if (freeTasks.length) {
        rawTask = freeTasks.pop();
    } else {
        rawTask = new RawTask();
    }
    rawTask.task = task;
    rawTask.domain = process.domain;
    raw(rawTask);
}

function RawTask() {
    this.task = null;
    this.domain = null;
}

RawTask.prototype.call = function () {
    if (this.domain) {
        this.domain.enter();
    }
    var threw = true;
    try {
        this.task.call();
        threw = false;
        // If the task throws an exception (presumably) Node.js restores the
        // domain stack for the next event.
        if (this.domain) {
            this.domain.exit();
        }
    } finally {
        // We use try/finally and a threw flag to avoid messing up stack traces
        // when we catch and release errors.
        if (threw) {
            // In Node.js, uncaught exceptions are considered fatal errors.
            // Re-throw them to interrupt flushing!
            // Ensure that flushing continues if an uncaught exception is
            // suppressed listening process.on("uncaughtException") or
            // domain.on("error").
            raw.requestFlush();
        }
        // If the task threw an error, we do not want to exit the domain here.
        // Exiting the domain would prevent the domain from catching the error.
        this.task = null;
        this.domain = null;
        freeTasks.push(this);
    }
};

var getNextUniqueId_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });
var nextUniqueId = 0;
function getNextUniqueId() {
    return nextUniqueId++;
}
exports.default = getNextUniqueId;
});

unwrapExports(getNextUniqueId_1);

var contracts = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var invariant_1$$1 = __importDefault(invariant_1);
function validateSourceContract(source) {
    invariant_1$$1.default(typeof source.canDrag === 'function', 'Expected canDrag to be a function.');
    invariant_1$$1.default(typeof source.beginDrag === 'function', 'Expected beginDrag to be a function.');
    invariant_1$$1.default(typeof source.endDrag === 'function', 'Expected endDrag to be a function.');
}
exports.validateSourceContract = validateSourceContract;
function validateTargetContract(target) {
    invariant_1$$1.default(typeof target.canDrop === 'function', 'Expected canDrop to be a function.');
    invariant_1$$1.default(typeof target.hover === 'function', 'Expected hover to be a function.');
    invariant_1$$1.default(typeof target.drop === 'function', 'Expected beginDrag to be a function.');
}
exports.validateTargetContract = validateTargetContract;
function validateType(type, allowArray) {
    if (allowArray && Array.isArray(type)) {
        type.forEach(function (t) { return validateType(t, false); });
        return;
    }
    invariant_1$$1.default(typeof type === 'string' || typeof type === 'symbol', allowArray
        ? 'Type can only be a string, a symbol, or an array of either.'
        : 'Type can only be a string or a symbol.');
}
exports.validateType = validateType;
});

unwrapExports(contracts);
var contracts_1 = contracts.validateSourceContract;
var contracts_2 = contracts.validateTargetContract;
var contracts_3 = contracts.validateType;

var HandlerRegistryImpl_1 = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var asap_1$$1 = __importDefault(asap_1);
var invariant_1$$1 = __importDefault(invariant_1);

var getNextUniqueId_1$$1 = __importDefault(getNextUniqueId_1);


function getNextHandlerId(role) {
    var id = getNextUniqueId_1$$1.default().toString();
    switch (role) {
        case interfaces.HandlerRole.SOURCE:
            return "S" + id;
        case interfaces.HandlerRole.TARGET:
            return "T" + id;
        default:
            throw new Error("Unknown Handler Role: " + role);
    }
}
function parseRoleFromHandlerId(handlerId) {
    switch (handlerId[0]) {
        case 'S':
            return interfaces.HandlerRole.SOURCE;
        case 'T':
            return interfaces.HandlerRole.TARGET;
        default:
            invariant_1$$1.default(false, "Cannot parse handler ID: " + handlerId);
    }
}
function mapContainsValue(map, searchValue) {
    var entries = map.entries();
    var isDone = false;
    do {
        var _a = entries.next(), done = _a.done, _b = _a.value, value = _b[1];
        if (value === searchValue) {
            return true;
        }
        isDone = done;
    } while (!isDone);
    return false;
}
var HandlerRegistryImpl = /** @class */ (function () {
    function HandlerRegistryImpl(store) {
        this.store = store;
        this.types = new Map();
        this.dragSources = new Map();
        this.dropTargets = new Map();
        this.pinnedSourceId = null;
        this.pinnedSource = null;
    }
    HandlerRegistryImpl.prototype.addSource = function (type, source) {
        contracts.validateType(type);
        contracts.validateSourceContract(source);
        var sourceId = this.addHandler(interfaces.HandlerRole.SOURCE, type, source);
        this.store.dispatch(registry.addSource(sourceId));
        return sourceId;
    };
    HandlerRegistryImpl.prototype.addTarget = function (type, target) {
        contracts.validateType(type, true);
        contracts.validateTargetContract(target);
        var targetId = this.addHandler(interfaces.HandlerRole.TARGET, type, target);
        this.store.dispatch(registry.addTarget(targetId));
        return targetId;
    };
    HandlerRegistryImpl.prototype.containsHandler = function (handler) {
        return (mapContainsValue(this.dragSources, handler) ||
            mapContainsValue(this.dropTargets, handler));
    };
    HandlerRegistryImpl.prototype.getSource = function (sourceId, includePinned) {
        if (includePinned === void 0) { includePinned = false; }
        invariant_1$$1.default(this.isSourceId(sourceId), 'Expected a valid source ID.');
        var isPinned = includePinned && sourceId === this.pinnedSourceId;
        var source = isPinned ? this.pinnedSource : this.dragSources.get(sourceId);
        return source;
    };
    HandlerRegistryImpl.prototype.getTarget = function (targetId) {
        invariant_1$$1.default(this.isTargetId(targetId), 'Expected a valid target ID.');
        return this.dropTargets.get(targetId);
    };
    HandlerRegistryImpl.prototype.getSourceType = function (sourceId) {
        invariant_1$$1.default(this.isSourceId(sourceId), 'Expected a valid source ID.');
        return this.types.get(sourceId);
    };
    HandlerRegistryImpl.prototype.getTargetType = function (targetId) {
        invariant_1$$1.default(this.isTargetId(targetId), 'Expected a valid target ID.');
        return this.types.get(targetId);
    };
    HandlerRegistryImpl.prototype.isSourceId = function (handlerId) {
        var role = parseRoleFromHandlerId(handlerId);
        return role === interfaces.HandlerRole.SOURCE;
    };
    HandlerRegistryImpl.prototype.isTargetId = function (handlerId) {
        var role = parseRoleFromHandlerId(handlerId);
        return role === interfaces.HandlerRole.TARGET;
    };
    HandlerRegistryImpl.prototype.removeSource = function (sourceId) {
        var _this = this;
        invariant_1$$1.default(this.getSource(sourceId), 'Expected an existing source.');
        this.store.dispatch(registry.removeSource(sourceId));
        asap_1$$1.default(function () {
            _this.dragSources.delete(sourceId);
            _this.types.delete(sourceId);
        });
    };
    HandlerRegistryImpl.prototype.removeTarget = function (targetId) {
        invariant_1$$1.default(this.getTarget(targetId), 'Expected an existing target.');
        this.store.dispatch(registry.removeTarget(targetId));
        this.dropTargets.delete(targetId);
        this.types.delete(targetId);
    };
    HandlerRegistryImpl.prototype.pinSource = function (sourceId) {
        var source = this.getSource(sourceId);
        invariant_1$$1.default(source, 'Expected an existing source.');
        this.pinnedSourceId = sourceId;
        this.pinnedSource = source;
    };
    HandlerRegistryImpl.prototype.unpinSource = function () {
        invariant_1$$1.default(this.pinnedSource, 'No source is pinned at the time.');
        this.pinnedSourceId = null;
        this.pinnedSource = null;
    };
    HandlerRegistryImpl.prototype.addHandler = function (role, type, handler) {
        var id = getNextHandlerId(role);
        this.types.set(id, type);
        if (role === interfaces.HandlerRole.SOURCE) {
            this.dragSources.set(id, handler);
        }
        else if (role === interfaces.HandlerRole.TARGET) {
            this.dropTargets.set(id, handler);
        }
        return id;
    };
    return HandlerRegistryImpl;
}());
exports.default = HandlerRegistryImpl;
});

unwrapExports(HandlerRegistryImpl_1);

var DragDropManagerImpl_1 = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });

var reducers_1 = __importDefault(reducers);
var dragDrop_1 = __importDefault(dragDrop);
var DragDropMonitorImpl_1$$1 = __importDefault(DragDropMonitorImpl_1);
var HandlerRegistryImpl_1$$1 = __importDefault(HandlerRegistryImpl_1);
function makeStoreInstance(debugMode) {
    // TODO: if we ever make a react-native version of this,
    // we'll need to consider how to pull off dev-tooling
    var reduxDevTools = typeof window !== 'undefined' &&
        window.__REDUX_DEVTOOLS_EXTENSION__;
    return redux.createStore(reducers_1.default, debugMode &&
        reduxDevTools &&
        reduxDevTools({
            name: 'dnd-core',
            instanceId: 'dnd-core',
        }));
}
var DragDropManagerImpl = /** @class */ (function () {
    function DragDropManagerImpl(debugMode) {
        var _this = this;
        if (debugMode === void 0) { debugMode = false; }
        this.isSetUp = false;
        this.handleRefCountChange = function () {
            var shouldSetUp = _this.store.getState().refCount > 0;
            if (_this.backend) {
                if (shouldSetUp && !_this.isSetUp) {
                    _this.backend.setup();
                    _this.isSetUp = true;
                }
                else if (!shouldSetUp && _this.isSetUp) {
                    _this.backend.teardown();
                    _this.isSetUp = false;
                }
            }
        };
        var store = makeStoreInstance(debugMode);
        this.store = store;
        this.monitor = new DragDropMonitorImpl_1$$1.default(store, new HandlerRegistryImpl_1$$1.default(store));
        store.subscribe(this.handleRefCountChange);
    }
    DragDropManagerImpl.prototype.receiveBackend = function (backend) {
        this.backend = backend;
    };
    DragDropManagerImpl.prototype.getMonitor = function () {
        return this.monitor;
    };
    DragDropManagerImpl.prototype.getBackend = function () {
        return this.backend;
    };
    DragDropManagerImpl.prototype.getRegistry = function () {
        return this.monitor.registry;
    };
    DragDropManagerImpl.prototype.getActions = function () {
        var manager = this;
        var dispatch = this.store.dispatch;
        function bindActionCreator(actionCreator) {
            return function () {
                var args = [];
                for (var _i = 0; _i < arguments.length; _i++) {
                    args[_i] = arguments[_i];
                }
                var action = actionCreator.apply(manager, args);
                if (typeof action !== 'undefined') {
                    dispatch(action);
                }
            };
        }
        var actions = dragDrop_1.default(this);
        return Object.keys(actions).reduce(function (boundActions, key) {
            var action = actions[key];
            boundActions[key] = bindActionCreator(action);
            return boundActions;
        }, {});
    };
    DragDropManagerImpl.prototype.dispatch = function (action) {
        this.store.dispatch(action);
    };
    return DragDropManagerImpl;
}());
exports.default = DragDropManagerImpl;
});

unwrapExports(DragDropManagerImpl_1);

var factories = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var DragDropManagerImpl_1$$1 = __importDefault(DragDropManagerImpl_1);
function createDragDropManager(backendFactory, globalContext, backendOptions, debugMode) {
    var manager = new DragDropManagerImpl_1$$1.default(debugMode);
    var backend = backendFactory(manager, globalContext, backendOptions);
    manager.receiveBackend(backend);
    return manager;
}
exports.createDragDropManager = createDragDropManager;
});

unwrapExports(factories);
var factories_1 = factories.createDragDropManager;

var lib$1 = createCommonjsModule(function (module, exports) {
function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(interfaces);
__export(factories);
});

unwrapExports(lib$1);

var DndContext = createCommonjsModule(function (module, exports) {
var __importStar = (commonjsGlobal && commonjsGlobal.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React$$1 = __importStar(React);

/**
 * Create the React Context
 */
exports.DndContext = React$$1.createContext({
    dragDropManager: undefined,
});
/**
 * Creates the context object we're providing
 * @param backend
 * @param context
 */
function createDndContext(backend, context, options, debugMode) {
    return {
        dragDropManager: lib$1.createDragDropManager(backend, context, options, debugMode),
    };
}
exports.createDndContext = createDndContext;
});

unwrapExports(DndContext);
var DndContext_1 = DndContext.DndContext;
var DndContext_2 = DndContext.createDndContext;

var useDragDropManager_1 = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });

var invariant_1$$1 = __importDefault(invariant_1);

/**
 * A hook to retrieve the DragDropManager from Context
 */
function useDragDropManager() {
    var dragDropManager = React.useContext(DndContext.DndContext).dragDropManager;
    invariant_1$$1.default(dragDropManager != null, 'Expected drag drop context');
    return dragDropManager;
}
exports.useDragDropManager = useDragDropManager;
});

unwrapExports(useDragDropManager_1);
var useDragDropManager_2 = useDragDropManager_1.useDragDropManager;

var DragSourceMonitorImpl_1 = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var invariant_1$$1 = __importDefault(invariant_1);
var isCallingCanDrag = false;
var isCallingIsDragging = false;
var DragSourceMonitorImpl = /** @class */ (function () {
    function DragSourceMonitorImpl(manager) {
        this.sourceId = null;
        this.internalMonitor = manager.getMonitor();
    }
    DragSourceMonitorImpl.prototype.receiveHandlerId = function (sourceId) {
        this.sourceId = sourceId;
    };
    DragSourceMonitorImpl.prototype.getHandlerId = function () {
        return this.sourceId;
    };
    DragSourceMonitorImpl.prototype.canDrag = function () {
        invariant_1$$1.default(!isCallingCanDrag, 'You may not call monitor.canDrag() inside your canDrag() implementation. ' +
            'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor');
        try {
            isCallingCanDrag = true;
            return this.internalMonitor.canDragSource(this.sourceId);
        }
        finally {
            isCallingCanDrag = false;
        }
    };
    DragSourceMonitorImpl.prototype.isDragging = function () {
        if (!this.sourceId) {
            return false;
        }
        invariant_1$$1.default(!isCallingIsDragging, 'You may not call monitor.isDragging() inside your isDragging() implementation. ' +
            'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor');
        try {
            isCallingIsDragging = true;
            return this.internalMonitor.isDraggingSource(this.sourceId);
        }
        finally {
            isCallingIsDragging = false;
        }
    };
    DragSourceMonitorImpl.prototype.subscribeToStateChange = function (listener, options) {
        return this.internalMonitor.subscribeToStateChange(listener, options);
    };
    DragSourceMonitorImpl.prototype.isDraggingSource = function (sourceId) {
        return this.internalMonitor.isDraggingSource(sourceId);
    };
    DragSourceMonitorImpl.prototype.isOverTarget = function (targetId, options) {
        return this.internalMonitor.isOverTarget(targetId, options);
    };
    DragSourceMonitorImpl.prototype.getTargetIds = function () {
        return this.internalMonitor.getTargetIds();
    };
    DragSourceMonitorImpl.prototype.isSourcePublic = function () {
        return this.internalMonitor.isSourcePublic();
    };
    DragSourceMonitorImpl.prototype.getSourceId = function () {
        return this.internalMonitor.getSourceId();
    };
    DragSourceMonitorImpl.prototype.subscribeToOffsetChange = function (listener) {
        return this.internalMonitor.subscribeToOffsetChange(listener);
    };
    DragSourceMonitorImpl.prototype.canDragSource = function (sourceId) {
        return this.internalMonitor.canDragSource(sourceId);
    };
    DragSourceMonitorImpl.prototype.canDropOnTarget = function (targetId) {
        return this.internalMonitor.canDropOnTarget(targetId);
    };
    DragSourceMonitorImpl.prototype.getItemType = function () {
        return this.internalMonitor.getItemType();
    };
    DragSourceMonitorImpl.prototype.getItem = function () {
        return this.internalMonitor.getItem();
    };
    DragSourceMonitorImpl.prototype.getDropResult = function () {
        return this.internalMonitor.getDropResult();
    };
    DragSourceMonitorImpl.prototype.didDrop = function () {
        return this.internalMonitor.didDrop();
    };
    DragSourceMonitorImpl.prototype.getInitialClientOffset = function () {
        return this.internalMonitor.getInitialClientOffset();
    };
    DragSourceMonitorImpl.prototype.getInitialSourceClientOffset = function () {
        return this.internalMonitor.getInitialSourceClientOffset();
    };
    DragSourceMonitorImpl.prototype.getSourceClientOffset = function () {
        return this.internalMonitor.getSourceClientOffset();
    };
    DragSourceMonitorImpl.prototype.getClientOffset = function () {
        return this.internalMonitor.getClientOffset();
    };
    DragSourceMonitorImpl.prototype.getDifferenceFromInitialOffset = function () {
        return this.internalMonitor.getDifferenceFromInitialOffset();
    };
    return DragSourceMonitorImpl;
}());
exports.DragSourceMonitorImpl = DragSourceMonitorImpl;
});

unwrapExports(DragSourceMonitorImpl_1);
var DragSourceMonitorImpl_2 = DragSourceMonitorImpl_1.DragSourceMonitorImpl;

var cloneWithRef_1 = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });

var invariant_1$$1 = __importDefault(invariant_1);
function setRef(ref, node) {
    if (typeof ref === 'function') {
        ref(node);
    }
    else {
        ref.current = node;
    }
}
function cloneWithRef(element, newRef) {
    var previousRef = element.ref;
    invariant_1$$1.default(typeof previousRef !== 'string', 'Cannot connect React DnD to an element with an existing string ref. ' +
        'Please convert it to use a callback ref instead, or wrap it into a <span> or <div>. ' +
        'Read more: https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute');
    if (!previousRef) {
        // When there is no ref on the element, use the new ref directly
        return React.cloneElement(element, {
            ref: newRef,
        });
    }
    return React.cloneElement(element, {
        ref: function (node) {
            setRef(newRef, node);
            if (previousRef) {
                setRef(previousRef, node);
            }
        },
    });
}
exports.cloneWithRef = cloneWithRef;
});

unwrapExports(cloneWithRef_1);
var cloneWithRef_2 = cloneWithRef_1.cloneWithRef;

var wrapConnectorHooks_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });


function throwIfCompositeComponentElement(element) {
    // Custom components can no longer be wrapped directly in React DnD 2.0
    // so that we don't need to depend on findDOMNode() from react-dom.
    if (typeof element.type === 'string') {
        return;
    }
    var displayName = element.type.displayName || element.type.name || 'the component';
    throw new Error('Only native element nodes can now be passed to React DnD connectors.' +
        ("You can either wrap " + displayName + " into a <div>, or turn it into a ") +
        'drag source or a drop target itself.');
}
function wrapHookToRecognizeElement(hook) {
    return function (elementOrNode, options) {
        if (elementOrNode === void 0) { elementOrNode = null; }
        if (options === void 0) { options = null; }
        // When passed a node, call the hook straight away.
        if (!React.isValidElement(elementOrNode)) {
            var node = elementOrNode;
            hook(node, options);
            // return the node so it can be chained (e.g. when within callback refs
            // <div ref={node => connectDragSource(connectDropTarget(node))}/>
            return node;
        }
        // If passed a ReactElement, clone it and attach this function as a ref.
        // This helps us achieve a neat API where user doesn't even know that refs
        // are being used under the hood.
        var element = elementOrNode;
        throwIfCompositeComponentElement(element);
        // When no options are passed, use the hook directly
        var ref = options ? function (node) { return hook(node, options); } : hook;
        return cloneWithRef_1.cloneWithRef(element, ref);
    };
}
function wrapConnectorHooks(hooks) {
    var wrappedHooks = {};
    Object.keys(hooks).forEach(function (key) {
        var hook = hooks[key];
        // ref objects should be passed straight through without wrapping
        if (key.endsWith('Ref')) {
            wrappedHooks[key] = hooks[key];
        }
        else {
            var wrappedHook_1 = wrapHookToRecognizeElement(hook);
            wrappedHooks[key] = function () { return wrappedHook_1; };
        }
    });
    return wrappedHooks;
}
exports.default = wrapConnectorHooks;
});

unwrapExports(wrapConnectorHooks_1);

var isRef_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });
function isRef(obj) {
    return (
    // eslint-disable-next-line no-prototype-builtins
    obj !== null && typeof obj === 'object' && obj.hasOwnProperty('current'));
}
exports.isRef = isRef;
});

unwrapExports(isRef_1);
var isRef_2 = isRef_1.isRef;

var SourceConnector_1 = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var wrapConnectorHooks_1$$1 = __importDefault(wrapConnectorHooks_1);

var shallowequal_1 = __importDefault(shallowequal);
var SourceConnector = /** @class */ (function () {
    function SourceConnector(backend) {
        var _this = this;
        this.backend = backend;
        this.hooks = wrapConnectorHooks_1$$1.default({
            dragSource: function (node, options) {
                _this.dragSourceOptions = options || null;
                if (isRef_1.isRef(node)) {
                    _this.dragSourceRef = node;
                }
                else {
                    _this.dragSourceNode = node;
                }
                _this.reconnectDragSource();
            },
            dragPreview: function (node, options) {
                _this.dragPreviewOptions = options || null;
                if (isRef_1.isRef(node)) {
                    _this.dragPreviewRef = node;
                }
                else {
                    _this.dragPreviewNode = node;
                }
                _this.reconnectDragPreview();
            },
        });
        this.handlerId = null;
        // The drop target may either be attached via ref or connect function
        this.dragSourceRef = null;
        this.dragSourceOptionsInternal = null;
        // The drag preview may either be attached via ref or connect function
        this.dragPreviewRef = null;
        this.dragPreviewOptionsInternal = null;
        this.lastConnectedHandlerId = null;
        this.lastConnectedDragSource = null;
        this.lastConnectedDragSourceOptions = null;
        this.lastConnectedDragPreview = null;
        this.lastConnectedDragPreviewOptions = null;
    }
    SourceConnector.prototype.receiveHandlerId = function (newHandlerId) {
        if (this.handlerId === newHandlerId) {
            return;
        }
        this.handlerId = newHandlerId;
        this.reconnect();
    };
    Object.defineProperty(SourceConnector.prototype, "connectTarget", {
        get: function () {
            return this.dragSource;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(SourceConnector.prototype, "dragSourceOptions", {
        get: function () {
            return this.dragSourceOptionsInternal;
        },
        set: function (options) {
            this.dragSourceOptionsInternal = options;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(SourceConnector.prototype, "dragPreviewOptions", {
        get: function () {
            return this.dragPreviewOptionsInternal;
        },
        set: function (options) {
            this.dragPreviewOptionsInternal = options;
        },
        enumerable: true,
        configurable: true
    });
    SourceConnector.prototype.reconnect = function () {
        this.reconnectDragSource();
        this.reconnectDragPreview();
    };
    SourceConnector.prototype.reconnectDragSource = function () {
        // if nothing has changed then don't resubscribe
        var didChange = this.didHandlerIdChange() ||
            this.didConnectedDragSourceChange() ||
            this.didDragSourceOptionsChange();
        if (didChange) {
            this.disconnectDragSource();
        }
        var dragSource = this.dragSource;
        if (!this.handlerId) {
            return;
        }
        if (!dragSource) {
            this.lastConnectedDragSource = dragSource;
            return;
        }
        if (didChange) {
            this.lastConnectedHandlerId = this.handlerId;
            this.lastConnectedDragSource = dragSource;
            this.lastConnectedDragSourceOptions = this.dragSourceOptions;
            this.dragSourceUnsubscribe = this.backend.connectDragSource(this.handlerId, dragSource, this.dragSourceOptions);
        }
    };
    SourceConnector.prototype.reconnectDragPreview = function () {
        // if nothing has changed then don't resubscribe
        var didChange = this.didHandlerIdChange() ||
            this.didConnectedDragPreviewChange() ||
            this.didDragPreviewOptionsChange();
        if (didChange) {
            this.disconnectDragPreview();
        }
        var dragPreview = this.dragPreview;
        if (!this.handlerId || !dragPreview) {
            return;
        }
        if (didChange) {
            this.lastConnectedHandlerId = this.handlerId;
            this.lastConnectedDragPreview = dragPreview;
            this.lastConnectedDragPreviewOptions = this.dragPreviewOptions;
            this.dragPreviewUnsubscribe = this.backend.connectDragPreview(this.handlerId, dragPreview, this.dragPreviewOptions);
        }
    };
    SourceConnector.prototype.didHandlerIdChange = function () {
        return this.lastConnectedHandlerId !== this.handlerId;
    };
    SourceConnector.prototype.didConnectedDragSourceChange = function () {
        return this.lastConnectedDragSource !== this.dragSource;
    };
    SourceConnector.prototype.didConnectedDragPreviewChange = function () {
        return this.lastConnectedDragPreview !== this.dragPreview;
    };
    SourceConnector.prototype.didDragSourceOptionsChange = function () {
        return !shallowequal_1.default(this.lastConnectedDragSourceOptions, this.dragSourceOptions);
    };
    SourceConnector.prototype.didDragPreviewOptionsChange = function () {
        return !shallowequal_1.default(this.lastConnectedDragPreviewOptions, this.dragPreviewOptions);
    };
    SourceConnector.prototype.disconnectDragSource = function () {
        if (this.dragSourceUnsubscribe) {
            this.dragSourceUnsubscribe();
            this.dragSourceUnsubscribe = undefined;
        }
    };
    SourceConnector.prototype.disconnectDragPreview = function () {
        if (this.dragPreviewUnsubscribe) {
            this.dragPreviewUnsubscribe();
            this.dragPreviewUnsubscribe = undefined;
            this.dragPreviewNode = null;
            this.dragPreviewRef = null;
        }
    };
    Object.defineProperty(SourceConnector.prototype, "dragSource", {
        get: function () {
            return (this.dragSourceNode || (this.dragSourceRef && this.dragSourceRef.current));
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(SourceConnector.prototype, "dragPreview", {
        get: function () {
            return (this.dragPreviewNode ||
                (this.dragPreviewRef && this.dragPreviewRef.current));
        },
        enumerable: true,
        configurable: true
    });
    return SourceConnector;
}());
exports.SourceConnector = SourceConnector;
});

unwrapExports(SourceConnector_1);
var SourceConnector_2 = SourceConnector_1.SourceConnector;

var drag = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });

var invariant_1$$1 = __importDefault(invariant_1);




function useDragSourceMonitor() {
    var manager = useDragDropManager_1.useDragDropManager();
    var monitor = React.useMemo(function () { return new DragSourceMonitorImpl_1.DragSourceMonitorImpl(manager); }, [manager]);
    var connector = React.useMemo(function () { return new SourceConnector_1.SourceConnector(manager.getBackend()); }, [
        manager,
    ]);
    return [monitor, connector];
}
exports.useDragSourceMonitor = useDragSourceMonitor;
function useDragHandler(spec, monitor, connector) {
    var manager = useDragDropManager_1.useDragDropManager();
    var handler = React.useMemo(function () {
        return {
            beginDrag: function () {
                var _a = spec.current, begin = _a.begin, item = _a.item;
                if (begin) {
                    var beginResult = begin(monitor);
                    invariant_1$$1.default(beginResult == null || typeof beginResult === 'object', 'dragSpec.begin() must either return an object, undefined, or null');
                    return beginResult || item || {};
                }
                return item || {};
            },
            canDrag: function () {
                if (typeof spec.current.canDrag === 'boolean') {
                    return spec.current.canDrag;
                }
                else if (typeof spec.current.canDrag === 'function') {
                    return spec.current.canDrag(monitor);
                }
                else {
                    return true;
                }
            },
            isDragging: function (globalMonitor, target) {
                var isDragging = spec.current.isDragging;
                return isDragging
                    ? isDragging(monitor)
                    : target === globalMonitor.getSourceId();
            },
            endDrag: function () {
                var end = spec.current.end;
                if (end) {
                    end(monitor.getItem(), monitor);
                }
                connector.reconnect();
            },
        };
    }, []);
    React.useLayoutEffect(function registerHandler() {
        var _a = registration.registerSource(spec.current.item.type, handler, manager), handlerId = _a[0], unregister = _a[1];
        monitor.receiveHandlerId(handlerId);
        connector.receiveHandlerId(handlerId);
        return unregister;
    }, []);
}
exports.useDragHandler = useDragHandler;
});

unwrapExports(drag);
var drag_1 = drag.useDragSourceMonitor;
var drag_2 = drag.useDragHandler;

var useDrag_1 = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });

var invariant_1$$1 = __importDefault(invariant_1);


/**
 * useDragSource hook
 * @param sourceSpec The drag source specification *
 */
function useDrag(spec) {
    var specRef = React.useRef(spec);
    specRef.current = spec;
    // TODO: wire options into createSourceConnector
    invariant_1$$1.default(spec.item != null, 'item must be defined');
    invariant_1$$1.default(spec.item.type != null, 'item type must be defined');
    var _a = drag.useDragSourceMonitor(), monitor = _a[0], connector = _a[1];
    drag.useDragHandler(specRef, monitor, connector);
    var result = useMonitorOutput_1.useMonitorOutput(monitor, specRef.current.collect || (function () { return ({}); }), function () { return connector.reconnect(); });
    var connectDragSource = React.useMemo(function () { return connector.hooks.dragSource(); }, [
        connector,
    ]);
    var connectDragPreview = React.useMemo(function () { return connector.hooks.dragPreview(); }, [
        connector,
    ]);
    React.useLayoutEffect(function () {
        connector.dragSourceOptions = specRef.current.options || null;
        connector.reconnect();
    }, [connector]);
    React.useLayoutEffect(function () {
        connector.dragPreviewOptions = specRef.current.previewOptions || null;
        connector.reconnect();
    }, [connector]);
    return [result, connectDragSource, connectDragPreview];
}
exports.useDrag = useDrag;
});

unwrapExports(useDrag_1);
var useDrag_2 = useDrag_1.useDrag;

var TargetConnector_1 = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var shallowequal_1 = __importDefault(shallowequal);
var wrapConnectorHooks_1$$1 = __importDefault(wrapConnectorHooks_1);

var TargetConnector = /** @class */ (function () {
    function TargetConnector(backend) {
        var _this = this;
        this.backend = backend;
        this.hooks = wrapConnectorHooks_1$$1.default({
            dropTarget: function (node, options) {
                _this.dropTargetOptions = options;
                if (isRef_1.isRef(node)) {
                    _this.dropTargetRef = node;
                }
                else {
                    _this.dropTargetNode = node;
                }
                _this.reconnect();
            },
        });
        this.handlerId = null;
        // The drop target may either be attached via ref or connect function
        this.dropTargetRef = null;
        this.dropTargetOptionsInternal = null;
        this.lastConnectedHandlerId = null;
        this.lastConnectedDropTarget = null;
        this.lastConnectedDropTargetOptions = null;
    }
    Object.defineProperty(TargetConnector.prototype, "connectTarget", {
        get: function () {
            return this.dropTarget;
        },
        enumerable: true,
        configurable: true
    });
    TargetConnector.prototype.reconnect = function () {
        // if nothing has changed then don't resubscribe
        var didChange = this.didHandlerIdChange() ||
            this.didDropTargetChange() ||
            this.didOptionsChange();
        if (didChange) {
            this.disconnectDropTarget();
        }
        var dropTarget = this.dropTarget;
        if (!this.handlerId) {
            return;
        }
        if (!dropTarget) {
            this.lastConnectedDropTarget = dropTarget;
            return;
        }
        if (didChange) {
            this.lastConnectedHandlerId = this.handlerId;
            this.lastConnectedDropTarget = dropTarget;
            this.lastConnectedDropTargetOptions = this.dropTargetOptions;
            this.unsubscribeDropTarget = this.backend.connectDropTarget(this.handlerId, dropTarget, this.dropTargetOptions);
        }
    };
    TargetConnector.prototype.receiveHandlerId = function (newHandlerId) {
        if (newHandlerId === this.handlerId) {
            return;
        }
        this.handlerId = newHandlerId;
        this.reconnect();
    };
    Object.defineProperty(TargetConnector.prototype, "dropTargetOptions", {
        get: function () {
            return this.dropTargetOptionsInternal;
        },
        set: function (options) {
            this.dropTargetOptionsInternal = options;
        },
        enumerable: true,
        configurable: true
    });
    TargetConnector.prototype.didHandlerIdChange = function () {
        return this.lastConnectedHandlerId !== this.handlerId;
    };
    TargetConnector.prototype.didDropTargetChange = function () {
        return this.lastConnectedDropTarget !== this.dropTarget;
    };
    TargetConnector.prototype.didOptionsChange = function () {
        return !shallowequal_1.default(this.lastConnectedDropTargetOptions, this.dropTargetOptions);
    };
    TargetConnector.prototype.disconnectDropTarget = function () {
        if (this.unsubscribeDropTarget) {
            this.unsubscribeDropTarget();
            this.unsubscribeDropTarget = undefined;
        }
    };
    Object.defineProperty(TargetConnector.prototype, "dropTarget", {
        get: function () {
            return (this.dropTargetNode || (this.dropTargetRef && this.dropTargetRef.current));
        },
        enumerable: true,
        configurable: true
    });
    return TargetConnector;
}());
exports.TargetConnector = TargetConnector;
});

unwrapExports(TargetConnector_1);
var TargetConnector_2 = TargetConnector_1.TargetConnector;

var DropTargetMonitorImpl_1 = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var invariant_1$$1 = __importDefault(invariant_1);
var isCallingCanDrop = false;
var DropTargetMonitorImpl = /** @class */ (function () {
    function DropTargetMonitorImpl(manager) {
        this.targetId = null;
        this.internalMonitor = manager.getMonitor();
    }
    DropTargetMonitorImpl.prototype.receiveHandlerId = function (targetId) {
        this.targetId = targetId;
    };
    DropTargetMonitorImpl.prototype.getHandlerId = function () {
        return this.targetId;
    };
    DropTargetMonitorImpl.prototype.subscribeToStateChange = function (listener, options) {
        return this.internalMonitor.subscribeToStateChange(listener, options);
    };
    DropTargetMonitorImpl.prototype.canDrop = function () {
        // Cut out early if the target id has not been set. This should prevent errors
        // where the user has an older version of dnd-core like in
        // https://github.com/react-dnd/react-dnd/issues/1310
        if (!this.targetId) {
            return false;
        }
        invariant_1$$1.default(!isCallingCanDrop, 'You may not call monitor.canDrop() inside your canDrop() implementation. ' +
            'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target-monitor');
        try {
            isCallingCanDrop = true;
            return this.internalMonitor.canDropOnTarget(this.targetId);
        }
        finally {
            isCallingCanDrop = false;
        }
    };
    DropTargetMonitorImpl.prototype.isOver = function (options) {
        if (!this.targetId) {
            return false;
        }
        return this.internalMonitor.isOverTarget(this.targetId, options);
    };
    DropTargetMonitorImpl.prototype.getItemType = function () {
        return this.internalMonitor.getItemType();
    };
    DropTargetMonitorImpl.prototype.getItem = function () {
        return this.internalMonitor.getItem();
    };
    DropTargetMonitorImpl.prototype.getDropResult = function () {
        return this.internalMonitor.getDropResult();
    };
    DropTargetMonitorImpl.prototype.didDrop = function () {
        return this.internalMonitor.didDrop();
    };
    DropTargetMonitorImpl.prototype.getInitialClientOffset = function () {
        return this.internalMonitor.getInitialClientOffset();
    };
    DropTargetMonitorImpl.prototype.getInitialSourceClientOffset = function () {
        return this.internalMonitor.getInitialSourceClientOffset();
    };
    DropTargetMonitorImpl.prototype.getSourceClientOffset = function () {
        return this.internalMonitor.getSourceClientOffset();
    };
    DropTargetMonitorImpl.prototype.getClientOffset = function () {
        return this.internalMonitor.getClientOffset();
    };
    DropTargetMonitorImpl.prototype.getDifferenceFromInitialOffset = function () {
        return this.internalMonitor.getDifferenceFromInitialOffset();
    };
    return DropTargetMonitorImpl;
}());
exports.DropTargetMonitorImpl = DropTargetMonitorImpl;
});

unwrapExports(DropTargetMonitorImpl_1);
var DropTargetMonitorImpl_2 = DropTargetMonitorImpl_1.DropTargetMonitorImpl;

var drop$2 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });





function useDropTargetMonitor() {
    var manager = useDragDropManager_1.useDragDropManager();
    var monitor = React.useMemo(function () { return new DropTargetMonitorImpl_1.DropTargetMonitorImpl(manager); }, [manager]);
    var connector = React.useMemo(function () { return new TargetConnector_1.TargetConnector(manager.getBackend()); }, [
        manager,
    ]);
    return [monitor, connector];
}
exports.useDropTargetMonitor = useDropTargetMonitor;
function useDropHandler(spec, monitor, connector) {
    var manager = useDragDropManager_1.useDragDropManager();
    var handler = React.useMemo(function () {
        return {
            canDrop: function () {
                var canDrop = spec.current.canDrop;
                return canDrop ? canDrop(monitor.getItem(), monitor) : true;
            },
            hover: function () {
                var hover = spec.current.hover;
                if (hover) {
                    hover(monitor.getItem(), monitor);
                }
            },
            drop: function () {
                var drop = spec.current.drop;
                if (drop) {
                    return drop(monitor.getItem(), monitor);
                }
            },
        };
    }, [monitor]);
    React.useLayoutEffect(function registerHandler() {
        var _a = registration.registerTarget(spec.current.accept, handler, manager), handlerId = _a[0], unregister = _a[1];
        monitor.receiveHandlerId(handlerId);
        connector.receiveHandlerId(handlerId);
        return unregister;
    }, [monitor, connector]);
}
exports.useDropHandler = useDropHandler;
});

unwrapExports(drop$2);
var drop_1 = drop$2.useDropTargetMonitor;
var drop_2 = drop$2.useDropHandler;

var useDrop_1 = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });

var invariant_1$$1 = __importDefault(invariant_1);


/**
 * useDropTarget Hook
 * @param spec The drop target specification
 */
function useDrop(spec) {
    var specRef = React.useRef(spec);
    specRef.current = spec;
    invariant_1$$1.default(spec.accept != null, 'accept must be defined');
    var _a = drop$2.useDropTargetMonitor(), monitor = _a[0], connector = _a[1];
    drop$2.useDropHandler(specRef, monitor, connector);
    var result = useMonitorOutput_1.useMonitorOutput(monitor, specRef.current.collect || (function () { return ({}); }), function () { return connector.reconnect(); });
    var connectDropTarget = React.useMemo(function () { return connector.hooks.dropTarget(); }, [
        connector,
    ]);
    React.useLayoutEffect(function () {
        connector.dropTargetOptions = spec.options || null;
        connector.reconnect();
    }, [spec.options]);
    return [result, connectDropTarget];
}
exports.useDrop = useDrop;
});

unwrapExports(useDrop_1);
var useDrop_2 = useDrop_1.useDrop;

var ItemTypes = {
  ROW: 'ROW',
  CARD: 'CARD'
};

var _ref$2 =
/*#__PURE__*/
React.createElement("path", {
  d: "M2.781.151H.755A.755.755 0 0 0 0 .906v2.026c0 .416.339.755.755.755H2.78a.755.755 0 0 0 .755-.755V.906A.755.755 0 0 0 2.78.15zM9.013.151H6.987a.756.756 0 0 0-.755.755v2.026c0 .416.338.755.755.755h2.026a.756.756 0 0 0 .755-.755V.906A.756.756 0 0 0 9.013.15zM15.245.151H13.22a.755.755 0 0 0-.755.755v2.026c0 .416.339.755.755.755h2.027A.755.755 0 0 0 16 2.932V.906a.755.755 0 0 0-.755-.755zM2.781 6.232H.755A.756.756 0 0 0 0 6.987v2.026c0 .417.339.755.755.755H2.78a.756.756 0 0 0 .755-.755V6.987a.755.755 0 0 0-.755-.755zM9.013 6.232H6.987a.756.756 0 0 0-.755.755v2.026c0 .417.338.755.755.755h2.026a.756.756 0 0 0 .755-.755V6.987a.756.756 0 0 0-.755-.755zM15.245 6.232H13.22a.756.756 0 0 0-.755.755v2.026c0 .417.339.755.755.755h2.027A.756.756 0 0 0 16 9.013V6.987a.756.756 0 0 0-.755-.755zM2.781 12.313H.755a.756.756 0 0 0-.755.755v2.026c0 .416.339.755.755.755H2.78a.756.756 0 0 0 .755-.755v-2.026a.755.755 0 0 0-.755-.755zM9.013 12.313H6.987a.756.756 0 0 0-.755.755v2.026c0 .416.338.755.755.755h2.026a.756.756 0 0 0 .755-.755v-2.026a.756.756 0 0 0-.755-.755zM15.245 12.313H13.22a.755.755 0 0 0-.755.755v2.026c0 .416.339.755.755.755h2.027a.755.755 0 0 0 .754-.755v-2.026a.755.755 0 0 0-.755-.755z",
  fill: "#424242"
});

var dragIconBlack = 'data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%20%3Cpath%20d%3D%22M2.78144%200.151001H0.75456C0.33856%200.151001%200%200.489561%200%200.905561V2.93212C0%203.34812%200.33856%203.68668%200.75456%203.68668H2.78112C3.19712%203.68668%203.53568%203.34812%203.53568%202.93212V0.905561C3.536%200.489561%203.19744%200.151001%202.78144%200.151001Z%22%20fill%3D%22%23424242%22%2F%3E%20%20%3Cpath%20d%3D%22M9.01337%200.151001H6.98681C6.57049%200.151001%206.23193%200.489561%206.23193%200.905561V2.93212C6.23193%203.34812%206.57049%203.68668%206.98681%203.68668H9.01337C9.42969%203.68668%209.76825%203.34812%209.76825%202.93212V0.905561C9.76793%200.489561%209.42937%200.151001%209.01337%200.151001Z%22%20fill%3D%22%23424242%22%2F%3E%20%20%3Cpath%20d%3D%22M15.2455%200.151001H13.2189C12.8029%200.151001%2012.4644%200.489561%2012.4644%200.905561V2.93212C12.4644%203.34812%2012.8029%203.68668%2013.2189%203.68668H15.2455C15.6615%203.68668%2016%203.34812%2016%202.93212V0.905561C16%200.489561%2015.6615%200.151001%2015.2455%200.151001Z%22%20fill%3D%22%23424242%22%2F%3E%20%20%3Cpath%20d%3D%22M2.78144%206.23193H0.75456C0.33856%206.23193%200%206.57049%200%206.98681V9.01337C0%209.42969%200.33856%209.76825%200.75456%209.76825H2.78112C3.19712%209.76825%203.53568%209.42969%203.53568%209.01337V6.98681C3.536%206.57049%203.19744%206.23193%202.78144%206.23193Z%22%20fill%3D%22%23424242%22%2F%3E%20%20%3Cpath%20d%3D%22M9.01337%206.23193H6.98681C6.57049%206.23193%206.23193%206.57049%206.23193%206.98681V9.01337C6.23193%209.42969%206.57049%209.76825%206.98681%209.76825H9.01337C9.42969%209.76825%209.76825%209.42969%209.76825%209.01337V6.98681C9.76793%206.57049%209.42937%206.23193%209.01337%206.23193Z%22%20fill%3D%22%23424242%22%2F%3E%20%20%3Cpath%20d%3D%22M15.2455%206.23193H13.2189C12.8029%206.23193%2012.4644%206.57049%2012.4644%206.98681V9.01337C12.4644%209.42969%2012.8029%209.76825%2013.2189%209.76825H15.2455C15.6615%209.76825%2016%209.42969%2016%209.01337V6.98681C16%206.57049%2015.6615%206.23193%2015.2455%206.23193Z%22%20fill%3D%22%23424242%22%2F%3E%20%20%3Cpath%20d%3D%22M2.78144%2012.3129H0.75456C0.33856%2012.3129%200%2012.6515%200%2013.0675V15.094C0%2015.5104%200.33856%2015.8486%200.75456%2015.8486H2.78112C3.19712%2015.8486%203.53568%2015.51%203.53568%2015.094V13.0675C3.536%2012.6515%203.19744%2012.3129%202.78144%2012.3129Z%22%20fill%3D%22%23424242%22%2F%3E%20%20%3Cpath%20d%3D%22M9.01337%2012.3129H6.98681C6.57049%2012.3129%206.23193%2012.6515%206.23193%2013.0675V15.094C6.23193%2015.5104%206.57049%2015.8486%206.98681%2015.8486H9.01337C9.42969%2015.8486%209.76825%2015.51%209.76825%2015.094V13.0675C9.76793%2012.6515%209.42937%2012.3129%209.01337%2012.3129Z%22%20fill%3D%22%23424242%22%2F%3E%20%20%3Cpath%20d%3D%22M15.2455%2012.3129H13.2189C12.8029%2012.3129%2012.4644%2012.6515%2012.4644%2013.0675V15.094C12.4644%2015.5104%2012.8029%2015.8486%2013.2189%2015.8486H15.2455C15.6615%2015.8486%2016%2015.51%2016%2015.094V13.0675C16%2012.6515%2015.6615%2012.3129%2015.2455%2012.3129Z%22%20fill%3D%22%23424242%22%2F%3E%3C%2Fsvg%3E';

function _templateObject4$f() {
  var data = taggedTemplateLiteralLoose(["\n\tcursor: grab;\n"]);

  _templateObject4$f = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$k() {
  var data = taggedTemplateLiteralLoose(["\n\tbackground-color: ", ";\n"]);

  _templateObject3$k = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$v() {
  var data = taggedTemplateLiteralLoose(["\n\topacity: ", ";\n"]);

  _templateObject2$v = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1l() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-grow: 2;\n\talign-items: center;\n\tjustify-content: space-between;\n"]);

  _templateObject$1l = function _templateObject() {
    return data;
  };

  return data;
}
var dragEndHandler = function dragEndHandler(index, callback) {
  return function (item) {
    return callback(index, item);
  };
};
var dropHandler = function dropHandler(index, callback) {
  return function (item) {
    item.type === ItemTypes.CARD && callback(index, item);
    return item;
  };
};
var hoverHandler = function hoverHandler(ref, index, newItemCallback, moveCallback) {
  return function (item) {
    if (!ref.current) return;
    var dragIndex = item.index;
    var hoverIndex = index;
    if (dragIndex === hoverIndex) return;
    item.type === ItemTypes.CARD ? newItemCallback(hoverIndex, item) : moveCallback(dragIndex, hoverIndex);
    item.index = hoverIndex;
  };
};

var DndListRow = function DndListRow(_ref) {
  var id = _ref.id,
      index = _ref.index,
      moveItem = _ref.moveItem,
      changedNewItem = _ref.changedNewItem,
      isNewItem = _ref.isNewItem,
      children = _ref.children,
      dragComplete = _ref.dragComplete,
      props = objectWithoutPropertiesLoose(_ref, ["id", "index", "moveItem", "changedNewItem", "isNewItem", "children", "dragComplete"]);

  var ref = useRef(null);

  var _useDrag = useDrag_2({
    item: {
      type: ItemTypes.ROW,
      id: id,
      index: index
    },
    end: dragEndHandler(index, dragComplete),
    collect: function collect(monitor) {
      return {
        isDragging: monitor.isDragging()
      };
    }
  }),
      isDragging = _useDrag[0].isDragging,
      drag = _useDrag[1],
      preview = _useDrag[2];

  var _useDrop = useDrop_2({
    accept: [ItemTypes.ROW, ItemTypes.CARD],
    drop: dropHandler(index, dragComplete),
    hover: hoverHandler(ref, index, changedNewItem, moveItem),
    collect: function collect(monitor) {
      return {
        canDrop: monitor.canDrop(),
        isUserDragging: !!monitor.getItem()
      };
    }
  }),
      _useDrop$ = _useDrop[0],
      canDrop = _useDrop$.canDrop,
      isUserDragging = _useDrop$.isUserDragging,
      drop = _useDrop[1];

  if (!isUserDragging && isNewItem) changedNewItem(-1);
  preview(drop(ref));
  return React.createElement(DivStyled, {
    ref: ref,
    drawBackground: isDragging && canDrop || isNewItem
  }, React.createElement(ListRowStyled, _extends_1({
    removehover: canDrop ? 'removeHover' : undefined,
    transparent: isDragging || isNewItem ? 'transparent' : undefined,
    index: index,
    key: id
  }, props), React.createElement(FlexGrow, null, children), React.createElement(DragIcon, {
    ref: drag,
    src: dragIconBlack,
    alt: "drag"
  })));
};

var FlexGrow = styled.div(_templateObject$1l());
DndListRow.displayName = 'DndListRow';
var ListRowStyled = styled(ListRow)(_templateObject2$v(), function (_ref2) {
  var transparent = _ref2.transparent;
  return transparent ? 0 : 1;
});
ListRowStyled.displayName = 'ListRowStyled';
var DivStyled = styled.div(_templateObject3$k(), function (_ref3) {
  var drawBackground = _ref3.drawBackground,
      theme = _ref3.theme;
  return drawBackground && theme.dndList.dragOver;
});
DivStyled.displayName = 'DivStyled';
var DragIcon = styled.img(_templateObject4$f());
DragIcon.displayName = 'DragIcon';
DndListRow.defaultProps = {
  changedNewItem: function changedNewItem() {},
  isNewItem: false
};
DndListRow.propTypes = {
  id: PropTypes.number.isRequired,
  index: PropTypes.number.isRequired,
  moveItem: PropTypes.func.isRequired,
  dragComplete: PropTypes.func.isRequired,
  changedNewItem: PropTypes.func,
  isNewItem: PropTypes.bool,
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};

function _templateObject$1m() {
  var data = taggedTemplateLiteralLoose(["\n\theight: 50px;\n\tbackground-color: ", ";\n"]);

  _templateObject$1m = function _templateObject() {
    return data;
  };

  return data;
}

var DndEmptyList = function DndEmptyList(_ref) {
  var addFirstItem = _ref.addFirstItem;

  var _useDrop = useDrop_2({
    accept: [ItemTypes.CARD],
    drop: addFirstItem,
    collect: function collect(monitor) {
      return {
        isOver: monitor.isOver(),
        canDrop: monitor.canDrop()
      };
    }
  }),
      _useDrop$ = _useDrop[0],
      canDrop = _useDrop$.canDrop,
      isOver = _useDrop$.isOver,
      drop = _useDrop[1];

  return React.createElement(EmptyList, {
    ref: drop,
    hover: canDrop && isOver
  });
};

DndEmptyList.displayName = 'DndEmptyList';
DndEmptyList.propTypes = {
  addFirstItem: PropTypes.func.isRequired
};
var EmptyList = styled.div(_templateObject$1m(), function (_ref2) {
  var hover = _ref2.hover,
      theme = _ref2.theme;
  return hover && theme.dndList.dragOver;
});
EmptyList.displayName = 'EmptyList';

var DndListContainer = function DndListContainer(_ref) {
  var items = _ref.items,
      Component$$1 = _ref.container,
      onItemChange = _ref.onItemChange,
      onNewItem = _ref.onNewItem,
      props = objectWithoutPropertiesLoose(_ref, ["items", "container", "onItemChange", "onNewItem"]);

  var _useState = useState(items),
      itemsArr = _useState[0],
      setItemsArr = _useState[1];

  var _useState2 = useState(-1),
      newItemIndex = _useState2[0],
      setNewItemIndex = _useState2[1];

  useEffect(function () {
    setItemsArr([].concat(items));
    setNewItemIndex(-1);
  }, [JSON.stringify(items)]);

  var moveItem = function moveItem(index, atIndex) {
    itemsArr.splice(atIndex, 0, itemsArr.splice(index, 1)[0]);
    setItemsArr([].concat(itemsArr));
  };

  var dragComplete = function dragComplete(index, item) {
    newItemIndex !== -1 ? setTimeout(function () {
      return onNewItem(item, index);
    }, 10) : onItemChange(item, index);
  };

  var changedNewItemHandler = function changedNewItemHandler(index, item) {
    if (index === -1) itemsArr.splice(newItemIndex, 1);else if (newItemIndex === -1) itemsArr.splice(index, 0, _extends_1({}, item, {
      id: -1,
      index: index
    }));else itemsArr.splice(index, 0, itemsArr.splice(newItemIndex, 1)[0]);
    setItemsArr([].concat(itemsArr));
    setNewItemIndex(index);
  };

  var addFirstItem = function addFirstItem(item) {
    setItemsArr([item]);
    onNewItem(item, 0);
  };

  return items.length ? itemsArr.map(function (item, index) {
    return React.createElement(DndListRow, _extends_1({
      isNewItem: index === newItemIndex,
      changedNewItem: changedNewItemHandler,
      key: item.id,
      index: index,
      id: item.id,
      moveItem: moveItem,
      dragComplete: dragComplete
    }, props), React.createElement(Component$$1, {
      item: item,
      index: index
    }));
  }) : React.createElement(DndEmptyList, {
    addFirstItem: addFirstItem
  });
};

DndListContainer.propTypes = {
  items: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired
  })).isRequired,
  container: PropTypes.func.isRequired,
  onItemChange: PropTypes.func.isRequired,
  onNewItem: PropTypes.func.isRequired
};

var DndProvider = createCommonjsModule(function (module, exports) {
var __rest = (commonjsGlobal && commonjsGlobal.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importStar = (commonjsGlobal && commonjsGlobal.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React$$1 = __importStar(React);
var react_1 = React;

/**
 * A React component that provides the React-DnD context
 */
exports.DndProvider = react_1.memo(function (_a) {
    var children = _a.children, props = __rest(_a, ["children"]);
    var context = 'manager' in props
        ? { dragDropManager: props.manager }
        : createSingletonDndContext(props.backend, props.context, props.options, props.debugMode);
    return React$$1.createElement(DndContext.DndContext.Provider, { value: context }, children);
});
var instanceSymbol = Symbol.for('__REACT_DND_CONTEXT_INSTANCE__');
function createSingletonDndContext(backend, context, options, debugMode) {
    if (context === void 0) { context = getGlobalContext(); }
    var ctx = context;
    if (!ctx[instanceSymbol]) {
        ctx[instanceSymbol] = DndContext.createDndContext(backend, context, options, debugMode);
    }
    return ctx[instanceSymbol];
}
function getGlobalContext() {
    return typeof commonjsGlobal !== 'undefined' ? commonjsGlobal : window;
}
});

unwrapExports(DndProvider);
var DndProvider_1 = DndProvider.DndProvider;

var js_utils$2 = createCommonjsModule(function (module, exports) {
// cheap lodash replacements
Object.defineProperty(exports, "__esModule", { value: true });
function memoize(fn) {
    var result = null;
    var memoized = function () {
        if (result == null) {
            result = fn();
        }
        return result;
    };
    return memoized;
}
exports.memoize = memoize;
/**
 * drop-in replacement for _.without
 */
function without(items, item) {
    return items.filter(function (i) { return i !== item; });
}
exports.without = without;
function union(itemsA, itemsB) {
    var set = new Set();
    var insertItem = function (item) { return set.add(item); };
    itemsA.forEach(insertItem);
    itemsB.forEach(insertItem);
    var result = [];
    set.forEach(function (key) { return result.push(key); });
    return result;
}
exports.union = union;
});

unwrapExports(js_utils$2);
var js_utils_1$1 = js_utils$2.memoize;
var js_utils_2$1 = js_utils$2.without;
var js_utils_3$1 = js_utils$2.union;

var EnterLeaveCounter_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });

var EnterLeaveCounter = /** @class */ (function () {
    function EnterLeaveCounter(isNodeInDocument) {
        this.entered = [];
        this.isNodeInDocument = isNodeInDocument;
    }
    EnterLeaveCounter.prototype.enter = function (enteringNode) {
        var _this = this;
        var previousLength = this.entered.length;
        var isNodeEntered = function (node) {
            return _this.isNodeInDocument(node) &&
                (!node.contains || node.contains(enteringNode));
        };
        this.entered = js_utils$2.union(this.entered.filter(isNodeEntered), [enteringNode]);
        return previousLength === 0 && this.entered.length > 0;
    };
    EnterLeaveCounter.prototype.leave = function (leavingNode) {
        var previousLength = this.entered.length;
        this.entered = js_utils$2.without(this.entered.filter(this.isNodeInDocument), leavingNode);
        return previousLength > 0 && this.entered.length === 0;
    };
    EnterLeaveCounter.prototype.reset = function () {
        this.entered = [];
    };
    return EnterLeaveCounter;
}());
exports.default = EnterLeaveCounter;
});

unwrapExports(EnterLeaveCounter_1);

var BrowserDetector = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });

exports.isFirefox = js_utils$2.memoize(function () {
    return /firefox/i.test(navigator.userAgent);
});
exports.isSafari = js_utils$2.memoize(function () { return Boolean(window.safari); });
});

unwrapExports(BrowserDetector);
var BrowserDetector_1 = BrowserDetector.isFirefox;
var BrowserDetector_2 = BrowserDetector.isSafari;

var MonotonicInterpolant_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });
var MonotonicInterpolant = /** @class */ (function () {
    function MonotonicInterpolant(xs, ys) {
        var length = xs.length;
        // Rearrange xs and ys so that xs is sorted
        var indexes = [];
        for (var i = 0; i < length; i++) {
            indexes.push(i);
        }
        indexes.sort(function (a, b) { return (xs[a] < xs[b] ? -1 : 1); });
        var dxs = [];
        var ms = [];
        var dx;
        var dy;
        for (var i = 0; i < length - 1; i++) {
            dx = xs[i + 1] - xs[i];
            dy = ys[i + 1] - ys[i];
            dxs.push(dx);
            ms.push(dy / dx);
        }
        // Get degree-1 coefficients
        var c1s = [ms[0]];
        for (var i = 0; i < dxs.length - 1; i++) {
            var m2 = ms[i];
            var mNext = ms[i + 1];
            if (m2 * mNext <= 0) {
                c1s.push(0);
            }
            else {
                dx = dxs[i];
                var dxNext = dxs[i + 1];
                var common = dx + dxNext;
                c1s.push((3 * common) / ((common + dxNext) / m2 + (common + dx) / mNext));
            }
        }
        c1s.push(ms[ms.length - 1]);
        // Get degree-2 and degree-3 coefficients
        var c2s = [];
        var c3s = [];
        var m;
        for (var i = 0; i < c1s.length - 1; i++) {
            m = ms[i];
            var c1 = c1s[i];
            var invDx = 1 / dxs[i];
            var common = c1 + c1s[i + 1] - m - m;
            c2s.push((m - c1 - common) * invDx);
            c3s.push(common * invDx * invDx);
        }
        this.xs = xs;
        this.ys = ys;
        this.c1s = c1s;
        this.c2s = c2s;
        this.c3s = c3s;
    }
    MonotonicInterpolant.prototype.interpolate = function (x) {
        var _a = this, xs = _a.xs, ys = _a.ys, c1s = _a.c1s, c2s = _a.c2s, c3s = _a.c3s;
        // The rightmost point in the dataset should give an exact result
        var i = xs.length - 1;
        if (x === xs[i]) {
            return ys[i];
        }
        // Search for the interval x is in, returning the corresponding y if x is one of the original xs
        var low = 0;
        var high = c3s.length - 1;
        var mid;
        while (low <= high) {
            mid = Math.floor(0.5 * (low + high));
            var xHere = xs[mid];
            if (xHere < x) {
                low = mid + 1;
            }
            else if (xHere > x) {
                high = mid - 1;
            }
            else {
                return ys[mid];
            }
        }
        i = Math.max(0, high);
        // Interpolate
        var diff = x - xs[i];
        var diffSq = diff * diff;
        return ys[i] + c1s[i] * diff + c2s[i] * diffSq + c3s[i] * diff * diffSq;
    };
    return MonotonicInterpolant;
}());
exports.default = MonotonicInterpolant;
});

unwrapExports(MonotonicInterpolant_1);

var OffsetUtils = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });

var MonotonicInterpolant_1$$1 = __importDefault(MonotonicInterpolant_1);
var ELEMENT_NODE = 1;
function getNodeClientOffset(node) {
    var el = node.nodeType === ELEMENT_NODE ? node : node.parentElement;
    if (!el) {
        return null;
    }
    var _a = el.getBoundingClientRect(), top = _a.top, left = _a.left;
    return { x: left, y: top };
}
exports.getNodeClientOffset = getNodeClientOffset;
function getEventClientOffset(e) {
    return {
        x: e.clientX,
        y: e.clientY,
    };
}
exports.getEventClientOffset = getEventClientOffset;
function isImageNode(node) {
    return (node.nodeName === 'IMG' &&
        (BrowserDetector.isFirefox() || !document.documentElement.contains(node)));
}
function getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight) {
    var dragPreviewWidth = isImage ? dragPreview.width : sourceWidth;
    var dragPreviewHeight = isImage ? dragPreview.height : sourceHeight;
    // Work around @2x coordinate discrepancies in browsers
    if (BrowserDetector.isSafari() && isImage) {
        dragPreviewHeight /= window.devicePixelRatio;
        dragPreviewWidth /= window.devicePixelRatio;
    }
    return { dragPreviewWidth: dragPreviewWidth, dragPreviewHeight: dragPreviewHeight };
}
function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint) {
    // The browsers will use the image intrinsic size under different conditions.
    // Firefox only cares if it's an image, but WebKit also wants it to be detached.
    var isImage = isImageNode(dragPreview);
    var dragPreviewNode = isImage ? sourceNode : dragPreview;
    var dragPreviewNodeOffsetFromClient = getNodeClientOffset(dragPreviewNode);
    var offsetFromDragPreview = {
        x: clientOffset.x - dragPreviewNodeOffsetFromClient.x,
        y: clientOffset.y - dragPreviewNodeOffsetFromClient.y,
    };
    var sourceWidth = sourceNode.offsetWidth, sourceHeight = sourceNode.offsetHeight;
    var anchorX = anchorPoint.anchorX, anchorY = anchorPoint.anchorY;
    var _a = getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight), dragPreviewWidth = _a.dragPreviewWidth, dragPreviewHeight = _a.dragPreviewHeight;
    var calculateYOffset = function () {
        var interpolantY = new MonotonicInterpolant_1$$1.default([0, 0.5, 1], [
            // Dock to the top
            offsetFromDragPreview.y,
            // Align at the center
            (offsetFromDragPreview.y / sourceHeight) * dragPreviewHeight,
            // Dock to the bottom
            offsetFromDragPreview.y + dragPreviewHeight - sourceHeight,
        ]);
        var y = interpolantY.interpolate(anchorY);
        // Work around Safari 8 positioning bug
        if (BrowserDetector.isSafari() && isImage) {
            // We'll have to wait for @3x to see if this is entirely correct
            y += (window.devicePixelRatio - 1) * dragPreviewHeight;
        }
        return y;
    };
    var calculateXOffset = function () {
        // Interpolate coordinates depending on anchor point
        // If you know a simpler way to do this, let me know
        var interpolantX = new MonotonicInterpolant_1$$1.default([0, 0.5, 1], [
            // Dock to the left
            offsetFromDragPreview.x,
            // Align at the center
            (offsetFromDragPreview.x / sourceWidth) * dragPreviewWidth,
            // Dock to the right
            offsetFromDragPreview.x + dragPreviewWidth - sourceWidth,
        ]);
        return interpolantX.interpolate(anchorX);
    };
    // Force offsets if specified in the options.
    var offsetX = offsetPoint.offsetX, offsetY = offsetPoint.offsetY;
    var isManualOffsetX = offsetX === 0 || offsetX;
    var isManualOffsetY = offsetY === 0 || offsetY;
    return {
        x: isManualOffsetX ? offsetX : calculateXOffset(),
        y: isManualOffsetY ? offsetY : calculateYOffset(),
    };
}
exports.getDragPreviewOffset = getDragPreviewOffset;
});

unwrapExports(OffsetUtils);
var OffsetUtils_1 = OffsetUtils.getNodeClientOffset;
var OffsetUtils_2 = OffsetUtils.getEventClientOffset;
var OffsetUtils_3 = OffsetUtils.getDragPreviewOffset;

var NativeTypes = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });
exports.FILE = '__NATIVE_FILE__';
exports.URL = '__NATIVE_URL__';
exports.TEXT = '__NATIVE_TEXT__';
});

unwrapExports(NativeTypes);
var NativeTypes_1 = NativeTypes.FILE;
var NativeTypes_2 = NativeTypes.URL;
var NativeTypes_3 = NativeTypes.TEXT;

var getDataFromDataTransfer_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });
function getDataFromDataTransfer(dataTransfer, typesToTry, defaultValue) {
    var result = typesToTry.reduce(function (resultSoFar, typeToTry) { return resultSoFar || dataTransfer.getData(typeToTry); }, '');
    return result != null ? result : defaultValue;
}
exports.getDataFromDataTransfer = getDataFromDataTransfer;
});

unwrapExports(getDataFromDataTransfer_1);
var getDataFromDataTransfer_2 = getDataFromDataTransfer_1.getDataFromDataTransfer;

var nativeTypesConfig = createCommonjsModule(function (module, exports) {
var __importStar = (commonjsGlobal && commonjsGlobal.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
var NativeTypes$$1 = __importStar(NativeTypes);

exports.nativeTypesConfig = (_a = {},
    _a[NativeTypes$$1.FILE] = {
        exposeProperties: {
            files: function (dataTransfer) {
                return Array.prototype.slice.call(dataTransfer.files);
            },
            items: function (dataTransfer) { return dataTransfer.items; },
        },
        matchesTypes: ['Files'],
    },
    _a[NativeTypes$$1.URL] = {
        exposeProperties: {
            urls: function (dataTransfer, matchesTypes) {
                return getDataFromDataTransfer_1.getDataFromDataTransfer(dataTransfer, matchesTypes, '').split('\n');
            },
        },
        matchesTypes: ['Url', 'text/uri-list'],
    },
    _a[NativeTypes$$1.TEXT] = {
        exposeProperties: {
            text: function (dataTransfer, matchesTypes) {
                return getDataFromDataTransfer_1.getDataFromDataTransfer(dataTransfer, matchesTypes, '');
            },
        },
        matchesTypes: ['Text', 'text/plain'],
    },
    _a);
});

unwrapExports(nativeTypesConfig);
var nativeTypesConfig_1 = nativeTypesConfig.nativeTypesConfig;

var NativeDragSource_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });
var NativeDragSource = /** @class */ (function () {
    function NativeDragSource(config) {
        var _this = this;
        this.config = config;
        this.item = {};
        Object.keys(this.config.exposeProperties).forEach(function (property) {
            Object.defineProperty(_this.item, property, {
                configurable: true,
                enumerable: true,
                get: function () {
                    // eslint-disable-next-line no-console
                    console.warn("Browser doesn't allow reading \"" + property + "\" until the drop event.");
                    return null;
                },
            });
        });
    }
    NativeDragSource.prototype.mutateItemByReadingDataTransfer = function (dataTransfer) {
        var _this = this;
        var newProperties = {};
        if (dataTransfer) {
            Object.keys(this.config.exposeProperties).forEach(function (property) {
                newProperties[property] = {
                    value: _this.config.exposeProperties[property](dataTransfer, _this.config.matchesTypes),
                };
            });
        }
        Object.defineProperties(this.item, newProperties);
    };
    NativeDragSource.prototype.canDrag = function () {
        return true;
    };
    NativeDragSource.prototype.beginDrag = function () {
        return this.item;
    };
    NativeDragSource.prototype.isDragging = function (monitor, handle) {
        return handle === monitor.getSourceId();
    };
    NativeDragSource.prototype.endDrag = function () {
        // empty
    };
    return NativeDragSource;
}());
exports.NativeDragSource = NativeDragSource;
});

unwrapExports(NativeDragSource_1);
var NativeDragSource_2 = NativeDragSource_1.NativeDragSource;

var NativeDragSources = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });


function createNativeDragSource(type) {
    return new NativeDragSource_1.NativeDragSource(nativeTypesConfig.nativeTypesConfig[type]);
}
exports.createNativeDragSource = createNativeDragSource;
function matchNativeItemType(dataTransfer) {
    if (!dataTransfer) {
        return null;
    }
    var dataTransferTypes = Array.prototype.slice.call(dataTransfer.types || []);
    return (Object.keys(nativeTypesConfig.nativeTypesConfig).filter(function (nativeItemType) {
        var matchesTypes = nativeTypesConfig.nativeTypesConfig[nativeItemType].matchesTypes;
        return matchesTypes.some(function (t) { return dataTransferTypes.indexOf(t) > -1; });
    })[0] || null);
}
exports.matchNativeItemType = matchNativeItemType;
});

unwrapExports(NativeDragSources);
var NativeDragSources_1 = NativeDragSources.createNativeDragSource;
var NativeDragSources_2 = NativeDragSources.matchNativeItemType;

var OptionsReader_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });
var OptionsReader = /** @class */ (function () {
    function OptionsReader(globalContext) {
        this.globalContext = globalContext;
    }
    Object.defineProperty(OptionsReader.prototype, "window", {
        get: function () {
            if (this.globalContext) {
                return this.globalContext;
            }
            else if (typeof window !== 'undefined') {
                return window;
            }
            return undefined;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(OptionsReader.prototype, "document", {
        get: function () {
            if (this.window) {
                return this.window.document;
            }
            return undefined;
        },
        enumerable: true,
        configurable: true
    });
    return OptionsReader;
}());
exports.OptionsReader = OptionsReader;
});

unwrapExports(OptionsReader_1);
var OptionsReader_2 = OptionsReader_1.OptionsReader;

var HTML5Backend_1 = createCommonjsModule(function (module, exports) {
var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
var __importStar = (commonjsGlobal && commonjsGlobal.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var EnterLeaveCounter_1$$1 = __importDefault(EnterLeaveCounter_1);



var NativeTypes$$1 = __importStar(NativeTypes);

var HTML5Backend = /** @class */ (function () {
    function HTML5Backend(manager, globalContext) {
        var _this = this;
        this.sourcePreviewNodes = new Map();
        this.sourcePreviewNodeOptions = new Map();
        this.sourceNodes = new Map();
        this.sourceNodeOptions = new Map();
        this.dragStartSourceIds = null;
        this.dropTargetIds = [];
        this.dragEnterTargetIds = [];
        this.currentNativeSource = null;
        this.currentNativeHandle = null;
        this.currentDragSourceNode = null;
        this.altKeyPressed = false;
        this.mouseMoveTimeoutTimer = null;
        this.asyncEndDragFrameId = null;
        this.dragOverTargetIds = null;
        this.getSourceClientOffset = function (sourceId) {
            return OffsetUtils.getNodeClientOffset(_this.sourceNodes.get(sourceId));
        };
        this.endDragNativeItem = function () {
            if (!_this.isDraggingNativeItem()) {
                return;
            }
            _this.actions.endDrag();
            _this.registry.removeSource(_this.currentNativeHandle);
            _this.currentNativeHandle = null;
            _this.currentNativeSource = null;
        };
        this.isNodeInDocument = function (node) {
            // Check the node either in the main document or in the current context
            return _this.document && _this.document.body && document.body.contains(node);
        };
        this.endDragIfSourceWasRemovedFromDOM = function () {
            var node = _this.currentDragSourceNode;
            if (_this.isNodeInDocument(node)) {
                return;
            }
            if (_this.clearCurrentDragSourceNode()) {
                _this.actions.endDrag();
            }
        };
        this.handleTopDragStartCapture = function () {
            _this.clearCurrentDragSourceNode();
            _this.dragStartSourceIds = [];
        };
        this.handleTopDragStart = function (e) {
            if (e.defaultPrevented) {
                return;
            }
            var dragStartSourceIds = _this.dragStartSourceIds;
            _this.dragStartSourceIds = null;
            var clientOffset = OffsetUtils.getEventClientOffset(e);
            // Avoid crashing if we missed a drop event or our previous drag died
            if (_this.monitor.isDragging()) {
                _this.actions.endDrag();
            }
            // Don't publish the source just yet (see why below)
            _this.actions.beginDrag(dragStartSourceIds || [], {
                publishSource: false,
                getSourceClientOffset: _this.getSourceClientOffset,
                clientOffset: clientOffset,
            });
            var dataTransfer = e.dataTransfer;
            var nativeType = NativeDragSources.matchNativeItemType(dataTransfer);
            if (_this.monitor.isDragging()) {
                if (dataTransfer && typeof dataTransfer.setDragImage === 'function') {
                    // Use custom drag image if user specifies it.
                    // If child drag source refuses drag but parent agrees,
                    // use parent's node as drag image. Neither works in IE though.
                    var sourceId = _this.monitor.getSourceId();
                    var sourceNode = _this.sourceNodes.get(sourceId);
                    var dragPreview = _this.sourcePreviewNodes.get(sourceId) || sourceNode;
                    if (dragPreview) {
                        var _a = _this.getCurrentSourcePreviewNodeOptions(), anchorX = _a.anchorX, anchorY = _a.anchorY, offsetX = _a.offsetX, offsetY = _a.offsetY;
                        var anchorPoint = { anchorX: anchorX, anchorY: anchorY };
                        var offsetPoint = { offsetX: offsetX, offsetY: offsetY };
                        var dragPreviewOffset = OffsetUtils.getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint);
                        dataTransfer.setDragImage(dragPreview, dragPreviewOffset.x, dragPreviewOffset.y);
                    }
                }
                try {
                    // Firefox won't drag without setting data
                    dataTransfer.setData('application/json', {});
                }
                catch (err) {
                    // IE doesn't support MIME types in setData
                }
                // Store drag source node so we can check whether
                // it is removed from DOM and trigger endDrag manually.
                _this.setCurrentDragSourceNode(e.target);
                // Now we are ready to publish the drag source.. or are we not?
                var captureDraggingState = _this.getCurrentSourcePreviewNodeOptions().captureDraggingState;
                if (!captureDraggingState) {
                    // Usually we want to publish it in the next tick so that browser
                    // is able to screenshot the current (not yet dragging) state.
                    //
                    // It also neatly avoids a situation where render() returns null
                    // in the same tick for the source element, and browser freaks out.
                    setTimeout(function () { return _this.actions.publishDragSource(); }, 0);
                }
                else {
                    // In some cases the user may want to override this behavior, e.g.
                    // to work around IE not supporting custom drag previews.
                    //
                    // When using a custom drag layer, the only way to prevent
                    // the default drag preview from drawing in IE is to screenshot
                    // the dragging state in which the node itself has zero opacity
                    // and height. In this case, though, returning null from render()
                    // will abruptly end the dragging, which is not obvious.
                    //
                    // This is the reason such behavior is strictly opt-in.
                    _this.actions.publishDragSource();
                }
            }
            else if (nativeType) {
                // A native item (such as URL) dragged from inside the document
                _this.beginDragNativeItem(nativeType);
            }
            else if (dataTransfer &&
                !dataTransfer.types &&
                ((e.target && !e.target.hasAttribute) ||
                    !e.target.hasAttribute('draggable'))) {
                // Looks like a Safari bug: dataTransfer.types is null, but there was no draggable.
                // Just let it drag. It's a native type (URL or text) and will be picked up in
                // dragenter handler.
                return;
            }
            else {
                // If by this time no drag source reacted, tell browser not to drag.
                e.preventDefault();
            }
        };
        this.handleTopDragEndCapture = function () {
            if (_this.clearCurrentDragSourceNode()) {
                // Firefox can dispatch this event in an infinite loop
                // if dragend handler does something like showing an alert.
                // Only proceed if we have not handled it already.
                _this.actions.endDrag();
            }
        };
        this.handleTopDragEnterCapture = function (e) {
            _this.dragEnterTargetIds = [];
            var isFirstEnter = _this.enterLeaveCounter.enter(e.target);
            if (!isFirstEnter || _this.monitor.isDragging()) {
                return;
            }
            var dataTransfer = e.dataTransfer;
            var nativeType = NativeDragSources.matchNativeItemType(dataTransfer);
            if (nativeType) {
                // A native item (such as file or URL) dragged from outside the document
                _this.beginDragNativeItem(nativeType);
            }
        };
        this.handleTopDragEnter = function (e) {
            var dragEnterTargetIds = _this.dragEnterTargetIds;
            _this.dragEnterTargetIds = [];
            if (!_this.monitor.isDragging()) {
                // This is probably a native item type we don't understand.
                return;
            }
            _this.altKeyPressed = e.altKey;
            if (!BrowserDetector.isFirefox()) {
                // Don't emit hover in `dragenter` on Firefox due to an edge case.
                // If the target changes position as the result of `dragenter`, Firefox
                // will still happily dispatch `dragover` despite target being no longer
                // there. The easy solution is to only fire `hover` in `dragover` on FF.
                _this.actions.hover(dragEnterTargetIds, {
                    clientOffset: OffsetUtils.getEventClientOffset(e),
                });
            }
            var canDrop = dragEnterTargetIds.some(function (targetId) {
                return _this.monitor.canDropOnTarget(targetId);
            });
            if (canDrop) {
                // IE requires this to fire dragover events
                e.preventDefault();
                if (e.dataTransfer) {
                    e.dataTransfer.dropEffect = _this.getCurrentDropEffect();
                }
            }
        };
        this.handleTopDragOverCapture = function () {
            _this.dragOverTargetIds = [];
        };
        this.handleTopDragOver = function (e) {
            var dragOverTargetIds = _this.dragOverTargetIds;
            _this.dragOverTargetIds = [];
            if (!_this.monitor.isDragging()) {
                // This is probably a native item type we don't understand.
                // Prevent default "drop and blow away the whole document" action.
                e.preventDefault();
                if (e.dataTransfer) {
                    e.dataTransfer.dropEffect = 'none';
                }
                return;
            }
            _this.altKeyPressed = e.altKey;
            _this.actions.hover(dragOverTargetIds || [], {
                clientOffset: OffsetUtils.getEventClientOffset(e),
            });
            var canDrop = (dragOverTargetIds || []).some(function (targetId) {
                return _this.monitor.canDropOnTarget(targetId);
            });
            if (canDrop) {
                // Show user-specified drop effect.
                e.preventDefault();
                if (e.dataTransfer) {
                    e.dataTransfer.dropEffect = _this.getCurrentDropEffect();
                }
            }
            else if (_this.isDraggingNativeItem()) {
                // Don't show a nice cursor but still prevent default
                // "drop and blow away the whole document" action.
                e.preventDefault();
            }
            else {
                e.preventDefault();
                if (e.dataTransfer) {
                    e.dataTransfer.dropEffect = 'none';
                }
            }
        };
        this.handleTopDragLeaveCapture = function (e) {
            if (_this.isDraggingNativeItem()) {
                e.preventDefault();
            }
            var isLastLeave = _this.enterLeaveCounter.leave(e.target);
            if (!isLastLeave) {
                return;
            }
            if (_this.isDraggingNativeItem()) {
                _this.endDragNativeItem();
            }
        };
        this.handleTopDropCapture = function (e) {
            _this.dropTargetIds = [];
            e.preventDefault();
            if (_this.isDraggingNativeItem()) {
                _this.currentNativeSource.mutateItemByReadingDataTransfer(e.dataTransfer);
            }
            _this.enterLeaveCounter.reset();
        };
        this.handleTopDrop = function (e) {
            var dropTargetIds = _this.dropTargetIds;
            _this.dropTargetIds = [];
            _this.actions.hover(dropTargetIds, {
                clientOffset: OffsetUtils.getEventClientOffset(e),
            });
            _this.actions.drop({ dropEffect: _this.getCurrentDropEffect() });
            if (_this.isDraggingNativeItem()) {
                _this.endDragNativeItem();
            }
            else {
                _this.endDragIfSourceWasRemovedFromDOM();
            }
        };
        this.handleSelectStart = function (e) {
            var target = e.target;
            // Only IE requires us to explicitly say
            // we want drag drop operation to start
            if (typeof target.dragDrop !== 'function') {
                return;
            }
            // Inputs and textareas should be selectable
            if (target.tagName === 'INPUT' ||
                target.tagName === 'SELECT' ||
                target.tagName === 'TEXTAREA' ||
                target.isContentEditable) {
                return;
            }
            // For other targets, ask IE
            // to enable drag and drop
            e.preventDefault();
            target.dragDrop();
        };
        this.options = new OptionsReader_1.OptionsReader(globalContext);
        this.actions = manager.getActions();
        this.monitor = manager.getMonitor();
        this.registry = manager.getRegistry();
        this.enterLeaveCounter = new EnterLeaveCounter_1$$1.default(this.isNodeInDocument);
    }
    Object.defineProperty(HTML5Backend.prototype, "window", {
        // public for test
        get: function () {
            return this.options.window;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(HTML5Backend.prototype, "document", {
        get: function () {
            return this.options.document;
        },
        enumerable: true,
        configurable: true
    });
    HTML5Backend.prototype.setup = function () {
        if (this.window === undefined) {
            return;
        }
        if (this.window.__isReactDndBackendSetUp) {
            throw new Error('Cannot have two HTML5 backends at the same time.');
        }
        this.window.__isReactDndBackendSetUp = true;
        this.addEventListeners(this.window);
    };
    HTML5Backend.prototype.teardown = function () {
        if (this.window === undefined) {
            return;
        }
        this.window.__isReactDndBackendSetUp = false;
        this.removeEventListeners(this.window);
        this.clearCurrentDragSourceNode();
        if (this.asyncEndDragFrameId) {
            this.window.cancelAnimationFrame(this.asyncEndDragFrameId);
        }
    };
    HTML5Backend.prototype.connectDragPreview = function (sourceId, node, options) {
        var _this = this;
        this.sourcePreviewNodeOptions.set(sourceId, options);
        this.sourcePreviewNodes.set(sourceId, node);
        return function () {
            _this.sourcePreviewNodes.delete(sourceId);
            _this.sourcePreviewNodeOptions.delete(sourceId);
        };
    };
    HTML5Backend.prototype.connectDragSource = function (sourceId, node, options) {
        var _this = this;
        this.sourceNodes.set(sourceId, node);
        this.sourceNodeOptions.set(sourceId, options);
        var handleDragStart = function (e) { return _this.handleDragStart(e, sourceId); };
        var handleSelectStart = function (e) { return _this.handleSelectStart(e); };
        node.setAttribute('draggable', 'true');
        node.addEventListener('dragstart', handleDragStart);
        node.addEventListener('selectstart', handleSelectStart);
        return function () {
            _this.sourceNodes.delete(sourceId);
            _this.sourceNodeOptions.delete(sourceId);
            node.removeEventListener('dragstart', handleDragStart);
            node.removeEventListener('selectstart', handleSelectStart);
            node.setAttribute('draggable', 'false');
        };
    };
    HTML5Backend.prototype.connectDropTarget = function (targetId, node) {
        var _this = this;
        var handleDragEnter = function (e) { return _this.handleDragEnter(e, targetId); };
        var handleDragOver = function (e) { return _this.handleDragOver(e, targetId); };
        var handleDrop = function (e) { return _this.handleDrop(e, targetId); };
        node.addEventListener('dragenter', handleDragEnter);
        node.addEventListener('dragover', handleDragOver);
        node.addEventListener('drop', handleDrop);
        return function () {
            node.removeEventListener('dragenter', handleDragEnter);
            node.removeEventListener('dragover', handleDragOver);
            node.removeEventListener('drop', handleDrop);
        };
    };
    HTML5Backend.prototype.addEventListeners = function (target) {
        // SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
        if (!target.addEventListener) {
            return;
        }
        target.addEventListener('dragstart', this
            .handleTopDragStart);
        target.addEventListener('dragstart', this.handleTopDragStartCapture, true);
        target.addEventListener('dragend', this.handleTopDragEndCapture, true);
        target.addEventListener('dragenter', this
            .handleTopDragEnter);
        target.addEventListener('dragenter', this.handleTopDragEnterCapture, true);
        target.addEventListener('dragleave', this.handleTopDragLeaveCapture, true);
        target.addEventListener('dragover', this.handleTopDragOver);
        target.addEventListener('dragover', this.handleTopDragOverCapture, true);
        target.addEventListener('drop', this.handleTopDrop);
        target.addEventListener('drop', this.handleTopDropCapture, true);
    };
    HTML5Backend.prototype.removeEventListeners = function (target) {
        // SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
        if (!target.removeEventListener) {
            return;
        }
        target.removeEventListener('dragstart', this.handleTopDragStart);
        target.removeEventListener('dragstart', this.handleTopDragStartCapture, true);
        target.removeEventListener('dragend', this.handleTopDragEndCapture, true);
        target.removeEventListener('dragenter', this
            .handleTopDragEnter);
        target.removeEventListener('dragenter', this.handleTopDragEnterCapture, true);
        target.removeEventListener('dragleave', this.handleTopDragLeaveCapture, true);
        target.removeEventListener('dragover', this
            .handleTopDragOver);
        target.removeEventListener('dragover', this.handleTopDragOverCapture, true);
        target.removeEventListener('drop', this.handleTopDrop);
        target.removeEventListener('drop', this.handleTopDropCapture, true);
    };
    HTML5Backend.prototype.getCurrentSourceNodeOptions = function () {
        var sourceId = this.monitor.getSourceId();
        var sourceNodeOptions = this.sourceNodeOptions.get(sourceId);
        return __assign({ dropEffect: this.altKeyPressed ? 'copy' : 'move' }, (sourceNodeOptions || {}));
    };
    HTML5Backend.prototype.getCurrentDropEffect = function () {
        if (this.isDraggingNativeItem()) {
            // It makes more sense to default to 'copy' for native resources
            return 'copy';
        }
        return this.getCurrentSourceNodeOptions().dropEffect;
    };
    HTML5Backend.prototype.getCurrentSourcePreviewNodeOptions = function () {
        var sourceId = this.monitor.getSourceId();
        var sourcePreviewNodeOptions = this.sourcePreviewNodeOptions.get(sourceId);
        return __assign({ anchorX: 0.5, anchorY: 0.5, captureDraggingState: false }, (sourcePreviewNodeOptions || {}));
    };
    HTML5Backend.prototype.isDraggingNativeItem = function () {
        var itemType = this.monitor.getItemType();
        return Object.keys(NativeTypes$$1).some(function (key) { return NativeTypes$$1[key] === itemType; });
    };
    HTML5Backend.prototype.beginDragNativeItem = function (type) {
        this.clearCurrentDragSourceNode();
        this.currentNativeSource = NativeDragSources.createNativeDragSource(type);
        this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource);
        this.actions.beginDrag([this.currentNativeHandle]);
    };
    HTML5Backend.prototype.setCurrentDragSourceNode = function (node) {
        var _this = this;
        this.clearCurrentDragSourceNode();
        this.currentDragSourceNode = node;
        // A timeout of > 0 is necessary to resolve Firefox issue referenced
        // See:
        //   * https://github.com/react-dnd/react-dnd/pull/928
        //   * https://github.com/react-dnd/react-dnd/issues/869
        var MOUSE_MOVE_TIMEOUT = 1000;
        // Receiving a mouse event in the middle of a dragging operation
        // means it has ended and the drag source node disappeared from DOM,
        // so the browser didn't dispatch the dragend event.
        //
        // We need to wait before we start listening for mousemove events.
        // This is needed because the drag preview needs to be drawn or else it fires an 'mousemove' event
        // immediately in some browsers.
        //
        // See:
        //   * https://github.com/react-dnd/react-dnd/pull/928
        //   * https://github.com/react-dnd/react-dnd/issues/869
        //
        this.mouseMoveTimeoutTimer = setTimeout(function () {
            return (_this.window &&
                _this.window.addEventListener('mousemove', _this.endDragIfSourceWasRemovedFromDOM, true));
        }, MOUSE_MOVE_TIMEOUT);
    };
    HTML5Backend.prototype.clearCurrentDragSourceNode = function () {
        if (this.currentDragSourceNode) {
            this.currentDragSourceNode = null;
            if (this.window) {
                this.window.clearTimeout(this.mouseMoveTimeoutTimer || undefined);
                this.window.removeEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
            }
            this.mouseMoveTimeoutTimer = null;
            return true;
        }
        return false;
    };
    HTML5Backend.prototype.handleDragStart = function (e, sourceId) {
        if (e.defaultPrevented) {
            return;
        }
        if (!this.dragStartSourceIds) {
            this.dragStartSourceIds = [];
        }
        this.dragStartSourceIds.unshift(sourceId);
    };
    HTML5Backend.prototype.handleDragEnter = function (e, targetId) {
        this.dragEnterTargetIds.unshift(targetId);
    };
    HTML5Backend.prototype.handleDragOver = function (e, targetId) {
        if (this.dragOverTargetIds === null) {
            this.dragOverTargetIds = [];
        }
        this.dragOverTargetIds.unshift(targetId);
    };
    HTML5Backend.prototype.handleDrop = function (e, targetId) {
        this.dropTargetIds.unshift(targetId);
    };
    return HTML5Backend;
}());
exports.default = HTML5Backend;
});

unwrapExports(HTML5Backend_1);

var getEmptyImage_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });
var emptyImage;
function getEmptyImage() {
    if (!emptyImage) {
        emptyImage = new Image();
        emptyImage.src =
            'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
    }
    return emptyImage;
}
exports.getEmptyImage = getEmptyImage;
});

unwrapExports(getEmptyImage_1);
var getEmptyImage_2 = getEmptyImage_1.getEmptyImage;

var lib$2 = createCommonjsModule(function (module, exports) {
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
var __importStar = (commonjsGlobal && commonjsGlobal.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var HTML5Backend_1$$1 = __importDefault(HTML5Backend_1);
var NativeTypes$$1 = __importStar(NativeTypes);
exports.NativeTypes = NativeTypes$$1;

exports.getEmptyImage = getEmptyImage_1.getEmptyImage;
var createHTML5Backend = function (manager, context) { return new HTML5Backend_1$$1.default(manager, context); };
exports.default = createHTML5Backend;
});

var HTML5Backend$1 = unwrapExports(lib$2);
var lib_1$1 = lib$2.NativeTypes;
var lib_2$1 = lib$2.getEmptyImage;

var DndHTML5Provider = function DndHTML5Provider(_ref) {
  var children = _ref.children;
  return React.createElement(DndProvider_1, {
    backend: HTML5Backend$1
  }, children);
};

DndHTML5Provider.defaultProps = {
  children: null
};
DndHTML5Provider.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
};

var _ref$3 =
/*#__PURE__*/
React.createElement("g", {
  clipPath: "url(#clip0)"
}, React.createElement("path", {
  d: "M29.83 121.665L96.144 160V83.33L29.829 44.991v76.673z",
  fill: "url(#paint0_linear)"
}), React.createElement("path", {
  d: "M96.144 83.33l66.31-38.338-66.31-38.339V83.33z",
  fill: "#1A00BB"
}), React.createElement("path", {
  d: "M29.83 44.992l66.315 38.337V6.653L29.829 44.992z",
  fill: "#0B009A"
}), React.createElement("path", {
  d: "M162.454 121.665L96.144 160V83.33l66.31-38.338v76.673z",
  fill: "url(#paint1_linear)"
}), React.createElement("path", {
  d: "M64.15 111.361L0 70.586l29.84-25.59 66.305 38.33L64.15 111.36zM129.299 0l64.075 38.08-30.933 6.912L96.144 6.659 129.3 0zM67.12 0L.15 38.08l29.69 6.916L96.144 6.665 67.12 0zM128.648 111.361l64.577-40.775-30.784-25.594L96.144 83.32l32.504 28.04z",
  fill: "#DDD"
}), React.createElement("mask", {
  id: "a",
  maskUnits: "userSpaceOnUse",
  x: 96,
  y: 6,
  width: 67,
  height: 78
}, React.createElement("path", {
  d: "M96.144 83.303l66.31-38.336-66.31-38.336v76.672z",
  fill: "url(#paint2_linear)"
})), React.createElement("g", {
  mask: "url(#a)"
}, React.createElement("path", {
  d: "M96.144 83.303l66.31-38.336-66.31-38.336v76.672z",
  fill: "#0C00A9"
})), React.createElement("path", {
  d: "M113.812 73.113L96.144 83.329V6.608l17.668 66.506z",
  fill: "#14008C"
}));

var _ref2$2 =
/*#__PURE__*/
React.createElement("defs", null, React.createElement("linearGradient", {
  id: "paint0_linear",
  x1: 80.904,
  y1: 90.909,
  x2: 34.389,
  y2: 120.908,
  gradientUnits: "userSpaceOnUse"
}, React.createElement("stop", {
  offset: 0,
  stopColor: "#0D0CB5"
}), React.createElement("stop", {
  offset: 0.996,
  stopColor: "#005BEA"
})), React.createElement("linearGradient", {
  id: "paint1_linear",
  x1: 129.3,
  y1: 83.82,
  x2: 129.3,
  y2: 171.142,
  gradientUnits: "userSpaceOnUse"
}, React.createElement("stop", {
  offset: 0,
  stopColor: "#0D0CB5"
}), React.createElement("stop", {
  offset: 0.996,
  stopColor: "#005BEA"
})), React.createElement("linearGradient", {
  id: "paint2_linear",
  x1: 54.966,
  y1: 115.656,
  x2: 129.024,
  y2: 26.37,
  gradientUnits: "userSpaceOnUse"
}, React.createElement("stop", {
  stopColor: "#fff"
}), React.createElement("stop", {
  offset: 1
})), React.createElement("clipPath", {
  id: "clip0"
}, React.createElement("path", {
  fill: "#fff",
  d: "M0 0h193.374v160H0z"
})));

var boxImage = 'data:image/svg+xml,%3Csvg%20width%3D%22194%22%20height%3D%22160%22%20viewBox%3D%220%200%20194%20160%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%20%3Cg%20clip-path%3D%22url%28%23clip0%29%22%3E%20%20%3Cpath%20d%3D%22M29.8291%20121.665L96.1446%20160V83.3294L29.8291%2044.9919V121.665Z%22%20fill%3D%22url%28%23paint0_linear%29%22%2F%3E%20%20%3Cpath%20d%3D%22M96.1445%2083.3294L162.454%2044.992L96.1445%206.65308V83.3294Z%22%20fill%3D%22%231A00BB%22%2F%3E%20%20%3Cpath%20d%3D%22M29.8291%2044.992L96.1446%2083.3294V6.65308L29.8291%2044.992Z%22%20fill%3D%22%230B009A%22%2F%3E%20%20%3Cpath%20d%3D%22M162.454%20121.665L96.1445%20160V83.3294L162.454%2044.9919V121.665Z%22%20fill%3D%22url%28%23paint1_linear%29%22%2F%3E%20%20%3Cpath%20d%3D%22M64.1496%20111.361L0%2070.5862L29.8407%2044.9963L96.1446%2083.3251L64.1496%20111.361Z%22%20fill%3D%22%23DDDDDD%22%2F%3E%20%20%3Cpath%20d%3D%22M129.299%200L193.374%2038.08L162.441%2044.992L96.1445%206.65891L129.299%200Z%22%20fill%3D%22%23DDDDDD%22%2F%3E%20%20%3Cpath%20d%3D%22M67.12%200L0.150879%2038.08L29.8405%2044.9964L96.1444%206.66473L67.12%200Z%22%20fill%3D%22%23DDDDDD%22%2F%3E%20%20%3Cpath%20d%3D%22M128.648%20111.361L193.225%2070.5861L162.441%2044.9919L96.1445%2083.3207L128.648%20111.361Z%22%20fill%3D%22%23DDDDDD%22%2F%3E%20%20%3Cmask%20id%3D%22mask0%22%20mask-type%3D%22alpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%2296%22%20y%3D%226%22%20width%3D%2267%22%20height%3D%2278%22%3E%20%20%3Cpath%20d%3D%22M96.1445%2083.3034L162.454%2044.9674L96.1445%206.63135V83.3034Z%22%20fill%3D%22url%28%23paint2_linear%29%22%2F%3E%20%20%3C%2Fmask%3E%20%20%3Cg%20mask%3D%22url%28%23mask0%29%22%3E%20%20%3Cpath%20d%3D%22M96.1445%2083.3034L162.454%2044.9674L96.1445%206.63135V83.3034Z%22%20fill%3D%22%230C00A9%22%2F%3E%20%20%3C%2Fg%3E%20%20%3Cpath%20d%3D%22M113.812%2073.1127L96.1445%2083.3295V6.60657L113.812%2073.1127Z%22%20fill%3D%22%2314008C%22%2F%3E%20%20%3C%2Fg%3E%20%20%3Cdefs%3E%20%20%3ClinearGradient%20id%3D%22paint0_linear%22%20x1%3D%2280.9043%22%20y1%3D%2290.909%22%20x2%3D%2234.3888%22%20y2%3D%22120.908%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%20%20%3Cstop%20offset%3D%220.00027743%22%20stop-color%3D%22%230D0CB5%22%2F%3E%20%20%3Cstop%20offset%3D%220.9964%22%20stop-color%3D%22%23005BEA%22%2F%3E%20%20%3C%2FlinearGradient%3E%20%20%3ClinearGradient%20id%3D%22paint1_linear%22%20x1%3D%22129.3%22%20y1%3D%2283.8196%22%20x2%3D%22129.3%22%20y2%3D%22171.142%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%20%20%3Cstop%20offset%3D%220.00027743%22%20stop-color%3D%22%230D0CB5%22%2F%3E%20%20%3Cstop%20offset%3D%220.9964%22%20stop-color%3D%22%23005BEA%22%2F%3E%20%20%3C%2FlinearGradient%3E%20%20%3ClinearGradient%20id%3D%22paint2_linear%22%20x1%3D%2254.966%22%20y1%3D%22115.656%22%20x2%3D%22129.024%22%20y2%3D%2226.3697%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%20%20%3Cstop%20stop-color%3D%22white%22%2F%3E%20%20%3Cstop%20offset%3D%221%22%2F%3E%20%20%3C%2FlinearGradient%3E%20%20%3CclipPath%20id%3D%22clip0%22%3E%20%20%3Crect%20width%3D%22193.374%22%20height%3D%22160%22%20fill%3D%22white%22%2F%3E%20%20%3C%2FclipPath%3E%20%20%3C%2Fdefs%3E%3C%2Fsvg%3E';

function _templateObject4$g() {
  var data = taggedTemplateLiteralLoose(["\n\tmax-width: 350px;\n\tmargin: 16px 0 20px 0;\n\tcolor: ", ";\n\tfont-size: 13px;\n\ttext-align: center;\n"]);

  _templateObject4$g = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$l() {
  var data = taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n\tfont-size: 18px;\n\tfont-weight: bold;\n\ttext-align: center;\n"]);

  _templateObject3$l = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$w() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n"]);

  _templateObject2$w = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1n() {
  var data = taggedTemplateLiteralLoose(["\n\tmargin: 40px 0;\n"]);

  _templateObject$1n = function _templateObject() {
    return data;
  };

  return data;
}

var EmptyState = function EmptyState(_ref) {
  var image = _ref.image,
      hasImage = _ref.hasImage,
      title = _ref.title,
      description = _ref.description,
      component = _ref.component;
  return React.createElement(Center, null, hasImage && React.createElement(ImageStyled, {
    src: image,
    alt: "box"
  }), React.createElement(Title$3, null, title), React.createElement(Description, null, description), component && component());
};

var ImageStyled = styled.img(_templateObject$1n());
var Center = styled.div(_templateObject2$w());
var Title$3 = styled.div(_templateObject3$l(), function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.darkGray;
});
var Description = styled.div(_templateObject4$g(), function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.mediumGray;
});
EmptyState.defaultProps = {
  title: 'No results found',
  description: 'We could not find any matching results, try search for another service, queue or product',
  image: boxImage,
  hasImage: true,
  component: null
};
EmptyState.displayName = 'EmptyState';
EmptyState.propTypes = {
  /** Component element */
  component: PropTypes.func,

  /** Title of the emptyState */
  title: PropTypes.string,

  /** Description of the emptyState */
  description: PropTypes.string,

  /** The main image of the emptyState */
  image: PropTypes.string,

  /** Bool to render image */
  hasImage: PropTypes.bool
  /** @component * */

};

function _templateObject$1o() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: ", ";\n\twidth: 100%;\n\tpadding: 6px 15px;\n\n\tbackground: ", ";\n\tfont-weight: ", ";\n\tborder-radius: 4px;\n\tcolor: ", ";\n\tfont-size: 12px;\n"]);

  _templateObject$1o = function _templateObject() {
    return data;
  };

  return data;
}
var StatusMessage = styled.div(_templateObject$1o(), function (_ref) {
  var show = _ref.show;
  return show ? 'block' : 'none';
}, function (_ref2) {
  var theme = _ref2.theme,
      type = _ref2.type;
  return theme.status.bg[type];
}, function (_ref3) {
  var type = _ref3.type;
  return type === 'blocked' && 'bold';
}, function (_ref4) {
  var theme = _ref4.theme,
      type = _ref4.type;
  return theme.status.color[type];
});
StatusMessage.defaultProps = {
  show: false,
  children: 'Saving changes...',
  type: 'info'
};
StatusMessage.propTypes = {
  /**   display status */
  show: PropTypes.bool,

  /** message display on status */
  type: PropTypes.oneOf(['success', 'error', 'info', 'blocked']),

  /** type of status */
  children: PropTypes.string
};
StatusMessage.displayName = 'StatusMessage';

function _templateObject$1p() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-block;\n\twidth: 6px;\n\theight: 6px;\n\tbackground-color: ", ";\n\tborder-radius: 50%;\n"]);

  _templateObject$1p = function _templateObject() {
    return data;
  };

  return data;
}
var states = ['on', 'off', 'away'];
var BulletState = styled.span(_templateObject$1p(), function (_ref) {
  var theme = _ref.theme,
      state = _ref.state;
  return theme.bulletState.colors[state];
});
BulletState.propTypes = {
  state: PropTypes.oneOf(states).isRequired
};
BulletState.displayName = 'BulletState';

function _templateObject$1q() {
  var data = taggedTemplateLiteralLoose(["\n\t:after {\n\t\tcontent: ", ";\n\t}\n"]);

  _templateObject$1q = function _templateObject() {
    return data;
  };

  return data;
}

var getArrowContent = function getArrowContent(sortable, direction, isSorted) {
  if (sortable === 'true') {
    if (isSorted) {
      if (direction === 'ascending') {
        return '"\\F0D8"';
      }

      return '"\\F0D7"';
    }

    return '"\\F0DA"';
  }

  return 'none';
};

var getDirection = function getDirection(direction, isSorted) {
  return isSorted && direction === 'ascending' ? 'descending' : 'ascending';
};

var HeaderCell = function HeaderCell(_ref) {
  var cell = _ref.cell,
      sortable = _ref.sortable,
      direction = _ref.direction,
      sortHandler = _ref.sortHandler,
      isSorted = _ref.isSorted,
      children = _ref.children,
      props = objectWithoutPropertiesLoose(_ref, ["cell", "sortable", "direction", "sortHandler", "isSorted", "children"]);

  return React.createElement(HeaderCellStyled, _extends_1({
    sorted: sortable ? direction || 'ascending' : null,
    sortable: sortable.toString(),
    direction: direction,
    onClick: function onClick() {
      return sortable && sortHandler(_extends_1({}, cell, {
        direction: getDirection(direction, isSorted)
      }));
    },
    isSorted: isSorted
  }, props), children);
};

var HeaderCellStyled = styled(function (_ref2) {
  var sortable = _ref2.sortable,
      direction = _ref2.direction,
      isSorted = _ref2.isSorted,
      props = objectWithoutPropertiesLoose(_ref2, ["sortable", "direction", "isSorted"]);

  return React.createElement(Table.HeaderCell, props);
})(_templateObject$1q(), function (_ref3) {
  var sortable = _ref3.sortable,
      direction = _ref3.direction,
      isSorted = _ref3.isSorted;
  return getArrowContent(sortable, direction, isSorted) + " !important";
});
HeaderCell.displayName = 'HeaderCell';
HeaderCell.defaultProps = {
  sortable: true,
  direction: null,
  isSorted: false
};
HeaderCell.propTypes = {
  cell: PropTypes.shape({
    value: PropTypes.string,
    sortable: PropTypes.bool,
    width: PropTypes.number
  }).isRequired,
  sortable: PropTypes.bool,
  isSorted: PropTypes.bool,
  direction: PropTypes.string,
  sortHandler: PropTypes.func.isRequired,
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};

function _templateObject$1r() {
  var data = taggedTemplateLiteralLoose(["\n\tbackground: linear-gradient(90deg, #6a11cb 0%, rgba(255, 255, 255, 0) 100%), #0d0cb5 !important;\n\n\t& th {\n\t\theight: 22px;\n\t\tpadding: 0 11px !important;\n\t\tborder-bottom: none !important;\n\t\tbackground: rgba(0, 0, 0, 0.05) !important;\n\t\tcolor: white !important;\n\t\tfont-size: 13px;\n\t}\n\n\tth:first-child {\n\t\tborder-bottom-left-radius: 4px !important;\n\t\tborder-top-left-radius: 4px !important;\n\t}\n\n\tth:last-child {\n\t\tborder-bottom-right-radius: 4px !important;\n\t\tborder-top-right-radius: 4px !important;\n\t}\n\n\tth:not(:first-child) {\n\t\tborder-left-color: white !important;\n\t}\n"]);

  _templateObject$1r = function _templateObject() {
    return data;
  };

  return data;
}

var TableHeader = function TableHeader(_ref) {
  var headers = _ref.headers,
      columnSorted = _ref.columnSorted,
      direction = _ref.direction,
      sortHandler = _ref.sortHandler,
      props = objectWithoutPropertiesLoose(_ref, ["headers", "columnSorted", "direction", "sortHandler"]);

  return React.createElement(Header$3, props, React.createElement(Table.Row, null, headers.map(function (obj) {
    var value = obj.value,
        sortable = obj.sortable,
        style = obj.style;
    return React.createElement(HeaderCell, {
      key: value,
      cell: obj,
      sortable: sortable,
      sortHandler: sortHandler,
      isSorted: columnSorted === value,
      direction: direction,
      style: style
    }, value);
  })));
};

TableHeader.defaultProps = {
  columnSorted: '',
  direction: null
};
TableHeader.displayName = 'TableHeader';
TableHeader.propTypes = {
  headers: PropTypes.arrayOf(PropTypes.shape({
    value: PropTypes.string,
    sortable: PropTypes.bool,
    style: PropTypes.shape({})
  })).isRequired,
  columnSorted: PropTypes.string,
  direction: PropTypes.string,
  sortHandler: PropTypes.func.isRequired
};
var Header$3 = styled(Table.Header)(_templateObject$1r());

function _templateObject$1s() {
  var data = taggedTemplateLiteralLoose(["\n\ttr:first-child {\n\t\theight: 8px;\n\t\tborder: none;\n\t\toutline: thin solid transparent;\n\t}\n\n\ttd {\n\t\tborder-top: none !important;\n\t\tborder-bottom: none !important;\n\t}\n"]);

  _templateObject$1s = function _templateObject() {
    return data;
  };

  return data;
}

var TableBody = function TableBody(_ref) {
  var children = _ref.children,
      props = objectWithoutPropertiesLoose(_ref, ["children"]);

  return React.createElement(TableBodyStyled, props, React.createElement(Table.Row, null), children);
};

TableBody.displayName = 'TableBody';
TableBody.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};
var TableBodyStyled = styled(Table.Body)(_templateObject$1s());

var Table$1 = function Table$$1(_ref) {
  var props = _extends_1({}, _ref);

  return React.createElement(Table, _extends_1({
    sortable: true,
    celled: true,
    striped: true,
    basic: "very"
  }, props));
};

Table$1.Header = function (_ref2) {
  var props = _extends_1({}, _ref2);

  return React.createElement(TableHeader, props);
};

Table$1.Body = function (_ref3) {
  var props = _extends_1({}, _ref3);

  return React.createElement(TableBody, props);
};

Table$1.Row = function (_ref4) {
  var props = _extends_1({}, _ref4);

  return React.createElement(Table.Row, props);
};

Table$1.Cell = function (_ref5) {
  var props = _extends_1({}, _ref5);

  return React.createElement(Table.Cell, props);
};

Table$1.defaultProps = {};
Table$1.displayName = 'Table';
Table$1.Header.displayName = 'Table.Header';
Table$1.Body.displayName = 'Table.Body';
Table$1.Row.displayName = 'Table.Row';
Table$1.Cell.displayName = 'Table.Cell';
Table$1.propTypes = {};

function _templateObject$1t() {
  var data = taggedTemplateLiteralLoose(["\n\tpadding-right: 16px !important;\n\tpadding-left: 16px !important;\n\tbackground-color: ", " !important;\n\tborder-radius: ", " !important;\n\tcolor: ", " !important;\n\n\tcursor: ", " !important;\n\n\t&&&.disabled {\n\t\tbackground-color: ", " !important;\n\t\tcolor: ", " !important;\n\t}\n\n\t&&&.visible {\n\t\tbackground-color: ", " !important;\n\t}\n\n\t&:active {\n\t\tbackground-color: ", " !important;\n\t}\n\n\ti.icon {\n\t\tmargin: 0 !important;\n\t\tmargin-left: 6px !important;\n\t}\n\n\t.visible.menu {\n\t\tmin-width: 90% !important;\n\t\tmargin-top: 2px;\n\t}\n\n\tdiv.item {\n\t\tborder-top: solid 1px ", " !important;\n\t\ttext-align: right !important;\n\t}\n\n\tdiv.item.active {\n\t\tbackground-color: ", " !important;\n\t\tfont-weight: normal !important;\n\t}\n"]);

  _templateObject$1t = function _templateObject() {
    return data;
  };

  return data;
}
/**
 * extends react semantic ui default dropdown
 * https://react.semantic-ui.com/modules/dropdown/
 * dropdown module
 */

var Dropdown$1 = function Dropdown$$1(_ref) {
  var icon = _ref.icon,
      text = _ref.text,
      options = _ref.options,
      props = objectWithoutPropertiesLoose(_ref, ["icon", "text", "options"]);

  return React.createElement(DropdownStyled, _extends_1({
    button: true,
    direction: "left",
    text: text,
    options: options,
    icon: React.createElement(Icon$1, {
      icon: icon
    })
  }, props));
};

Dropdown$1.defaultProps = {
  icon: 'select-down',
  text: '',
  options: []
};
Dropdown$1.propTypes = {
  /** icon of type iconName to be displayed (examples: success, add) */
  icon: PropTypes.oneOf(IconName),

  /** text visible on the button */
  text: PropTypes.string,

  /** options to show when expanded */
  options: PropTypes.arrayOf(PropTypes.shape({
    key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
  }))
};
Dropdown$1.displayName = 'Dropdown';
var DropdownStyled = styled(Dropdown)(_templateObject$1t(), function (_ref2) {
  var theme = _ref2.theme;
  return theme.buttons.bg;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.buttons.borderRadius;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.buttons.text;
}, function (_ref5) {
  var disabled = _ref5.disabled;
  return disabled ? 'not-allowed' : 'pointer';
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.colors.strokeGray;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.colors.gray;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.buttons.activeBg;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.buttons.activeBg;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.buttons.dropdown.separatorColor;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.buttons.dropdown.activeBackgroundColor;
});
DropdownStyled.displayName = 'DropdownStyled';

function _templateObject5$7() {
  var data = taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n"]);

  _templateObject5$7 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$h() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-block;\n\twidth: 18px;\n\theight: 18px;\n\tmargin-right: 6px;\n\tbackground-color: ", ";\n"]);

  _templateObject4$h = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$m() {
  var data = taggedTemplateLiteralLoose(["\n\t&&&& {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tpadding: 6px 8px !important;\n\t}\n\n\t&&&&:hover {\n\t\tbackground-color: ", " !important;\n\t\tborder-radius: 4px;\n\t}\n"]);

  _templateObject3$m = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$x() {
  var data = taggedTemplateLiteralLoose(["\n\t&&&& {\n\t\tpadding: 0;\n\t\tmargin-top: 0;\n\t\tmargin-bottom: 10px;\n\t\tfont-size: 12px;\n\t\tfont-weight: bold;\n\t\tline-height: 14px;\n\t\ttext-transform: none;\n\t}\n"]);

  _templateObject2$x = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1u() {
  var data = taggedTemplateLiteralLoose(["\n\t&&& {\n\t\twidth: 220px;\n\t\tpadding: 12px 8px 8px 8px;\n\t\tborder: 1px solid #ffffff;\n\t\tborder-radius: 4px;\n\t\tbox-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);\n\t}\n\n\t&&& .selected.item {\n\t\tbackground-color: ", ";\n\t\tborder-radius: 4px;\n\t}\n"]);

  _templateObject$1u = function _templateObject() {
    return data;
  };

  return data;
}

var GradeDropdown = function GradeDropdown(_ref) {
  var options = _ref.options,
      header = _ref.header,
      children = _ref.children,
      onChange = _ref.onChange,
      value = _ref.value,
      props = objectWithoutPropertiesLoose(_ref, ["options", "header", "children", "onChange", "value"]);

  return React.createElement(Dropdown, _extends_1({
    trigger: children,
    icon: null
  }, props), React.createElement(DropdownMenu, null, header && React.createElement(DropdownHeader, {
    content: header
  }), options.map(function (_ref2) {
    var val = _ref2.value,
        color = _ref2.color,
        name = _ref2.name;
    return React.createElement(DropdownItem, {
      onClick: function onClick() {
        return onChange({
          value: val,
          name: name
        });
      },
      selected: value === val,
      key: val
    }, React.createElement(Square, {
      color: color
    }), React.createElement(Name, {
      color: color
    }, name));
  })));
};

var DropdownMenu = styled(Dropdown.Menu)(_templateObject$1u(), function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.lightBlue;
});
var DropdownHeader = styled(Dropdown.Header)(_templateObject2$x());
var DropdownItem = styled(Dropdown.Item)(_templateObject3$m(), function (_ref4) {
  var theme = _ref4.theme;
  return theme.colors.lightBlue;
});
var Square = styled.div(_templateObject4$h(), function (_ref5) {
  var color = _ref5.color;
  return color || 'black';
});
var Name = styled.div(_templateObject5$7(), function (_ref6) {
  var color = _ref6.color;
  return color || 'black';
});
GradeDropdown.displayName = 'GradeDropdown';
DropdownMenu.displayName = 'DropdownMenu';
DropdownHeader.displayName = 'DropdownHeader';
DropdownItem.displayName = 'DropdownItem';
Square.displayName = 'Square';
Name.displayName = 'Name';
GradeDropdown.defaultProps = {
  header: null
};
GradeDropdown.propTypes = {
  /** dropdown options */
  options: PropTypes.arrayOf(PropTypes.shape({
    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
    name: PropTypes.string.isRequired,
    color: PropTypes.string
  })).isRequired,

  /** value controlled by the parent */
  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,

  /** dropdown header */
  header: PropTypes.string,

  /** component that will trigger the dropdown */
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,

  /** function called when an option is clicked */
  onChange: PropTypes.func.isRequired
};

function _templateObject3$n() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex;\n\twidth: 50%;\n\theight: calc(100% - 20px);\n\tflex-flow: column;\n\talign-items: center;\n\tjustify-content: flex-start;\n\tpadding: 0 6px;\n\tcolor: ", ";\n\tfont-size: 10px;\n"]);

  _templateObject3$n = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$y() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: relative;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 20px;\n\tfont-size: 10px;\n"]);

  _templateObject2$y = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1v() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: 100%;\n\theight: ", ";\n\tflex-flow: column;\n\talign-items: baseline;\n\tjustify-content: space-evenly;\n\tpadding: 0 6px;\n\tcolor: ", ";\n\tfont-size: 28px;\n"]);

  _templateObject$1v = function _templateObject() {
    return data;
  };

  return data;
}

var WidgetWeather = function WidgetWeather(_ref) {
  var selected = _ref.selected,
      temperature = _ref.temperature,
      temperatureColor = _ref.temperatureColor,
      temperatureMin = _ref.temperatureMin,
      temperatureMinColor = _ref.temperatureMinColor,
      temperatureMax = _ref.temperatureMax,
      temperatureMaxColor = _ref.temperatureMaxColor,
      props = objectWithoutPropertiesLoose(_ref, ["selected", "temperature", "temperatureColor", "temperatureMin", "temperatureMinColor", "temperatureMax", "temperatureMaxColor"]);

  return React.createElement(WidgetCardContainer, _extends_1({
    selected: selected
  }, props), React.createElement(TemperatureContainer, {
    expand: temperatureMax !== undefined && temperatureMin !== undefined,
    color: temperatureColor
  }, temperature, "\xBA"), (temperatureMax !== undefined || temperatureMin !== undefined) && React.createElement(ContainerMinMax, null, temperatureMin && React.createElement(TemperatureMinMaxContainer, {
    color: temperatureMinColor
  }, temperatureMin, "\xBA"), temperatureMax && React.createElement(TemperatureMinMaxContainer, {
    color: temperatureMaxColor
  }, temperatureMax, "\xBA")));
};

var TemperatureContainer = styled.div(_templateObject$1v(), function (_ref2) {
  var expand = _ref2.expand;
  return expand ? 'calc(100% - 20px)' : '100%';
}, function (_ref3) {
  var color = _ref3.color;
  return color;
});
TemperatureContainer.displayName = 'TemperatureContainer';
var ContainerMinMax = styled.div(_templateObject2$y());
var TemperatureMinMaxContainer = styled.div(_templateObject3$n(), function (_ref4) {
  var color = _ref4.color;
  return color;
});
TemperatureMinMaxContainer.displayName = 'TemperatureMinMaxContainer';
WidgetWeather.defaultProps = {
  selected: false,
  temperature: 24,
  temperatureColor: 'black',
  temperatureMin: undefined,
  temperatureMinColor: 'black',
  temperatureMax: undefined,
  temperatureMaxColor: 'black'
};
WidgetWeather.propTypes = {
  /**   is selected */
  selected: PropTypes.bool,

  /**   temperature */
  temperature: PropTypes.number,

  /**   temperature color */
  temperatureColor: PropTypes.string,

  /**   temperature min */
  temperatureMin: PropTypes.number,

  /**   temperature min color */
  temperatureMinColor: PropTypes.string,

  /**   temperature max */
  temperatureMax: PropTypes.number,

  /**   temperature max color */
  temperatureMaxColor: PropTypes.string
};
WidgetWeather.displayName = 'WidgetWeather';

var _ref$4 =
/*#__PURE__*/
React.createElement("path", {
  d: "M22.847 11.513H19.93a.486.486 0 1 0 0 .973h2.917a.487.487 0 0 0 0-.973zM3.403 11.513H.487a.486.486 0 1 0 0 .973h2.916a.486.486 0 0 0 0-.973zM19.917 3.75a.488.488 0 0 0-.688 0l-2.062 2.062a.485.485 0 1 0 .687.688v-.001l2.061-2.061h.001a.487.487 0 0 0 .001-.688zM6.167 17.5a.484.484 0 0 0-.687 0l-2.063 2.06v.001a.486.486 0 1 0 .688.688l2.061-2.062a.484.484 0 0 0 0-.688zM11.667.333a.486.486 0 0 0-.487.487v2.916a.486.486 0 0 0 .973 0V.82a.487.487 0 0 0-.486-.487zM11.667 19.777a.486.486 0 0 0-.487.486v2.916a.487.487 0 1 0 .973 0v-2.916a.486.486 0 0 0-.486-.486zM6.167 5.813L4.105 3.75a.487.487 0 0 0-.688.688l2.062 2.06V6.5a.485.485 0 1 0 .688-.687zM19.917 19.561L17.853 17.5v-.001a.486.486 0 1 0-.687.687l2.062 2.063a.487.487 0 0 0 .688-.688zM11.667 5.195a6.805 6.805 0 1 0 0 13.61 6.805 6.805 0 1 0 0-13.61zm4.124 10.93a5.794 5.794 0 0 1-4.124 1.708 5.797 5.797 0 0 1-4.125-1.709A5.794 5.794 0 0 1 5.833 12c0-1.559.607-3.023 1.71-4.125a5.796 5.796 0 0 1 4.124-1.709c1.558 0 3.023.607 4.124 1.709A5.794 5.794 0 0 1 17.5 12a5.794 5.794 0 0 1-1.71 4.124z",
  fill: "#1A1A1A"
});

var icon = 'data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M22.8473%2011.5132H19.9304C19.6616%2011.5132%2019.4441%2011.731%2019.4441%2011.9995C19.4441%2012.2682%2019.6616%2012.4862%2019.9304%2012.4862H22.8466C22.8466%2012.4862%2022.8466%2012.4862%2022.8473%2012.4862C23.1154%2012.4862%2023.3333%2012.2682%2023.3333%2011.9995C23.3333%2011.731%2023.1154%2011.5132%2022.8473%2011.5132Z%22%20fill%3D%22%231A1A1A%22%2F%3E%3Cpath%20d%3D%22M3.40317%2011.5132H0.487H0.486333C0.217667%2011.5132%200%2011.731%200%2011.9995C0%2012.2677%200.217667%2012.4862%200.486333%2012.4862H3.40267H3.40317C3.67117%2012.4862%203.88883%2012.2682%203.88883%2011.9998C3.88883%2011.7317%203.67117%2011.5132%203.40317%2011.5132Z%22%20fill%3D%22%231A1A1A%22%2F%3E%3Cpath%20d%3D%22M19.9171%203.74955C19.7261%203.56005%2019.4186%203.56005%2019.2287%203.74955L17.1666%205.81238V5.81288C16.9764%206.00221%2016.9764%206.31005%2017.1666%206.49955C17.3561%206.68938%2017.6641%206.68938%2017.8537%206.49955L17.8544%206.49888L19.9154%204.43805C19.9162%204.43805%2019.9162%204.43738%2019.9162%204.43738C20.1064%204.24755%2020.1064%203.94005%2019.9171%203.74955Z%22%20fill%3D%22%231A1A1A%22%2F%3E%3Cpath%20d%3D%22M6.16679%2017.4994C5.97712%2017.3088%205.66896%2017.3088%205.47996%2017.4994C5.47996%2017.4994%205.47996%2017.4994%205.47912%2017.4994L3.41729%2019.5604C3.41729%2019.5604%203.41729%2019.561%203.41679%2019.561C3.22696%2019.7513%203.22696%2020.0588%203.41679%2020.2485C3.60729%2020.4386%203.91446%2020.4386%204.10479%2020.2485L6.16596%2018.1866L6.16679%2018.1861C6.35712%2017.9968%206.35712%2017.6889%206.16679%2017.4994Z%22%20fill%3D%22%231A1A1A%22%2F%3E%3Cpath%20d%3D%22M11.6666%200.333008C11.3981%200.333008%2011.1804%200.550841%2011.1804%200.819674V3.73551C11.1804%203.73601%2011.1804%203.73601%2011.1804%203.73601C11.1804%204.00468%2011.3981%204.22201%2011.6666%204.22201C11.9349%204.22201%2012.1526%204.00468%2012.1526%203.73651V0.819674C12.1526%200.550841%2011.9349%200.333674%2011.6666%200.333008Z%22%20fill%3D%22%231A1A1A%22%2F%3E%3Cpath%20d%3D%22M11.6666%2019.7773C11.3981%2019.7773%2011.1804%2019.9952%2011.1804%2020.2627V20.264V23.1792C11.1804%2023.4487%2011.3981%2023.6657%2011.6666%2023.6663C11.9349%2023.6663%2012.1526%2023.4487%2012.1526%2023.1792V20.2627C12.1526%2019.9952%2011.9349%2019.7773%2011.6666%2019.7773Z%22%20fill%3D%22%231A1A1A%22%2F%3E%3Cpath%20d%3D%22M6.16678%205.81288L4.10478%203.74955C3.91445%203.56005%203.60728%203.56005%203.41678%203.74955C3.22695%203.94005%203.22762%204.24788%203.41678%204.43738C3.41728%204.43738%203.41728%204.43738%203.41728%204.43805L5.47912%206.49871C5.47912%206.49871%205.47912%206.49938%205.47995%206.49955C5.66895%206.68938%205.97712%206.68938%206.16678%206.49955C6.35712%206.31005%206.35712%206.00221%206.16678%205.81288Z%22%20fill%3D%22%231A1A1A%22%2F%3E%3Cpath%20d%3D%22M19.917%2019.5612L19.9162%2019.5607L17.8544%2017.4997L17.8537%2017.4988C17.6641%2017.309%2017.3561%2017.309%2017.1666%2017.4988C16.9764%2017.6887%2016.9764%2017.997%2017.1666%2018.1863C17.1666%2018.1863%2017.1666%2018.1863%2017.1666%2018.1868L19.2287%2020.2487C19.4185%2020.4388%2019.7259%2020.4388%2019.917%2020.2487C20.1064%2020.059%2020.1064%2019.7515%2019.917%2019.5612Z%22%20fill%3D%22%231A1A1A%22%2F%3E%3Cpath%20d%3D%22M11.6667%205.19482C7.90841%205.19482%204.86157%208.24116%204.86157%2011.9998C4.86157%2015.7583%207.90841%2018.8042%2011.6667%2018.8042C15.4247%2018.8042%2018.4726%2015.7583%2018.4726%2011.9998C18.4726%208.24149%2015.4247%205.19482%2011.6667%205.19482ZM15.7909%2016.1243C14.6901%2017.2258%2013.2247%2017.8333%2011.6667%2017.8333C10.1089%2017.8333%208.64407%2017.2258%207.54224%2016.1243C6.44024%2015.0218%205.83341%2013.5583%205.83341%2011.9998C5.83341%2010.4412%206.44024%208.97699%207.54224%207.87482C8.64407%206.77332%2010.1089%206.16649%2011.6667%206.16649C13.2247%206.16649%2014.6901%206.77332%2015.7909%207.87482C16.8932%208.97699%2017.5002%2010.4412%2017.5002%2011.9998C17.5002%2013.5583%2016.8932%2015.0218%2015.7909%2016.1243Z%22%20fill%3D%22%231A1A1A%22%2F%3E%3C%2Fsvg%3E';

function _templateObject8$1() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: relative;\n\ttop: -7px;\n\tleft: -1px;\n\tdisplay: inline-flex;\n\twidth: 50%;\n\theight: calc(100% - 20px);\n\tflex-flow: column;\n\talign-items: center;\n\tjustify-content: flex-start;\n\tpadding: 0 6px;\n\tcolor: ", ";\n\tfont-size: 6px;\n"]);

  _templateObject8$1 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7$2() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: relative;\n\ttop: -7px;\n\tleft: 2px;\n\tdisplay: inline-flex;\n\twidth: 50%;\n\theight: calc(100% - 20px);\n\tflex-flow: column;\n\talign-items: center;\n\tjustify-content: flex-start;\n\tpadding: 0 6px;\n\tcolor: ", ";\n\tfont-size: 6px;\n"]);

  _templateObject7$2 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6$6() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex;\n\twidth: 100%;\n\theight: 20px;\n"]);

  _templateObject6$6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5$8() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: 100%;\n\theight: ", ";\n\tflex-flow: column;\n\talign-items: baseline;\n\tjustify-content: ", ";\n\tpadding: 0 3px;\n\tcolor: ", ";\n\tfont-size: 14px;\n"]);

  _templateObject5$8 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$i() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: relative;\n\tdisplay: inline-flex;\n\twidth: 50%;\n\theight: 100%;\n\tflex-flow: column;\n\tjustify-content: space-around;\n\tfloat: right;\n"]);

  _templateObject4$i = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$o() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: 23px;\n\theight: 23px;\n"]);

  _templateObject3$o = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$z() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex;\n\twidth: 50%;\n\theight: 100%;\n\tflex-flow: column;\n\tjustify-content: space-around;\n\tpadding-left: 4px;\n"]);

  _templateObject2$z = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1w() {
  var data = taggedTemplateLiteralLoose(["\n\t&&&& {\n\t\tflex-flow: row;\n\t}\n"]);

  _templateObject$1w = function _templateObject() {
    return data;
  };

  return data;
}

var WidgetWeatherIcon = function WidgetWeatherIcon(_ref) {
  var selected = _ref.selected,
      temperature = _ref.temperature,
      temperatureColor = _ref.temperatureColor,
      temperatureMin = _ref.temperatureMin,
      temperatureMinColor = _ref.temperatureMinColor,
      temperatureMax = _ref.temperatureMax,
      temperatureMaxColor = _ref.temperatureMaxColor,
      props = objectWithoutPropertiesLoose(_ref, ["selected", "temperature", "temperatureColor", "temperatureMin", "temperatureMinColor", "temperatureMax", "temperatureMaxColor"]);

  return React.createElement(WidgetWrapperCustom, _extends_1({
    selected: selected
  }, props), React.createElement(IconWrapper$1, null, React.createElement(IconImage, {
    alt: "iconSun",
    src: icon
  })), React.createElement(TemperatureWrapper, null, React.createElement(TemperatureContainer$1, {
    expand: temperatureMax !== undefined && temperatureMin !== undefined,
    color: temperatureColor
  }, temperature, "\xBA"), (temperatureMax !== undefined || temperatureMin !== undefined) && React.createElement(ContainerMinMax$1, null, temperatureMin && React.createElement(TemperatureMinContainer, {
    color: temperatureMinColor
  }, temperatureMin, "\xBA"), temperatureMax && React.createElement(TemperatureMaxContainer, {
    color: temperatureMaxColor
  }, temperatureMax, "\xBA"))));
};

var WidgetWrapperCustom = styled(WidgetCardContainer)(_templateObject$1w());
var IconWrapper$1 = styled.div(_templateObject2$z());
var IconImage = styled.img(_templateObject3$o());
var TemperatureWrapper = styled.div(_templateObject4$i());
var TemperatureContainer$1 = styled.div(_templateObject5$8(), function (_ref2) {
  var expand = _ref2.expand;
  return expand ? 'calc(100% - 26px)' : '100%';
}, function (_ref3) {
  var expand = _ref3.expand;
  return expand ? 'flex-end' : 'space-around';
}, function (_ref4) {
  var color = _ref4.color;
  return color;
});
TemperatureContainer$1.displayName = 'TemperatureContainer';
var ContainerMinMax$1 = styled.div(_templateObject6$6());
var TemperatureMinContainer = styled.div(_templateObject7$2(), function (_ref5) {
  var color = _ref5.color;
  return color;
});
TemperatureMinContainer.displayName = 'TemperatureMinContainer';
var TemperatureMaxContainer = styled.div(_templateObject8$1(), function (_ref6) {
  var color = _ref6.color;
  return color;
});
TemperatureMaxContainer.displayName = 'TemperatureMaxContainer';
WidgetWeatherIcon.defaultProps = {
  selected: false,
  temperature: 24,
  temperatureColor: 'black',
  temperatureMin: undefined,
  temperatureMinColor: 'black',
  temperatureMax: undefined,
  temperatureMaxColor: 'black'
};
WidgetWeatherIcon.propTypes = {
  /**   is selected */
  selected: PropTypes.bool,

  /**   temperature */
  temperature: PropTypes.number,

  /**   temperature color */
  temperatureColor: PropTypes.string,

  /**   temperature min */
  temperatureMin: PropTypes.number,

  /**   temperature min color */
  temperatureMinColor: PropTypes.string,

  /**   temperature max */
  temperatureMax: PropTypes.number,

  /**   temperature max color */
  temperatureMaxColor: PropTypes.string
};
WidgetWeatherIcon.displayName = 'WidgetWrapper';

function _templateObject$1x() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: 100%;\n\theight: 100%;\n\tflex-flow: column;\n\talign-items: center;\n\tjustify-content: space-evenly;\n\tpadding: 0 6px;\n\tcolor: ", ";\n\tfont-size: ", ";\n\tfont-weight: bold;\n"]);

  _templateObject$1x = function _templateObject() {
    return data;
  };

  return data;
}

var WidgetDate = function WidgetDate(_ref) {
  var selected = _ref.selected,
      format = _ref.format,
      color = _ref.color,
      font = _ref.font,
      day = _ref.day,
      month = _ref.month,
      year = _ref.year,
      props = objectWithoutPropertiesLoose(_ref, ["selected", "format", "color", "font", "day", "month", "year"]);

  var getFormat = function getFormat() {
    switch (format) {
      case 'mm/dd/yyyy':
        return month + "/" + day + "/" + year;

      case 'dd/mm':
        return day + "/" + month;

      case 'yyyy/mm/dd':
        return year + "/" + month + "/" + day;

      case 'dd/mm/yyyy':
      default:
        return day + "/" + month + "/" + year;
    }
  };

  return React.createElement(WidgetCardContainer, _extends_1({
    selected: selected
  }, props), React.createElement(DateContainer, {
    color: color,
    font: font
  }, getFormat()));
};

var DateContainer = styled.div(_templateObject$1x(), function (_ref2) {
  var color = _ref2.color;
  return color;
}, function (_ref3) {
  var font = _ref3.font;
  return font + "px";
});
DateContainer.displayName = 'DateContainer';
WidgetDate.defaultProps = {
  format: 'dd/mm/yyyy',
  font: 10
};
WidgetDate.propTypes = {
  /**   is selected */
  selected: PropTypes.bool.isRequired,

  /**   date format */
  format: PropTypes.oneOf(['dd/mm/yyyy', 'mm/dd/yyyy', 'dd/mm', 'yyyy/mm/dd']),

  /**   color */
  color: PropTypes.string.isRequired,

  /**   date font */
  font: PropTypes.number,

  /**   day */
  day: PropTypes.number.isRequired,

  /**   month */
  month: PropTypes.number.isRequired,

  /**   year */
  year: PropTypes.number.isRequired
};
WidgetDate.displayName = 'WidgetDate';

function _templateObject3$p() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: 100%;\n\theight: calc(100% - 19px);\n\tflex-flow: column;\n\talign-items: center;\n\tjustify-content: start;\n\tpadding: 3px 0 0;\n\tcolor: ", ";\n\tfont-size: ", ";\n"]);

  _templateObject3$p = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$A() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: 100%;\n\theight: 19px;\n\tflex-flow: column;\n\talign-items: center;\n\tjustify-content: space-around;\n\tpadding: 0 3px;\n\tcolor: ", ";\n\tfont-size: ", ";\n\ttext-transform: uppercase;\n"]);

  _templateObject2$A = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1y() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex;\n\twidth: 100%;\n\theight: 100%;\n\tflex-flow: column;\n\tjustify-content: space-around;\n"]);

  _templateObject$1y = function _templateObject() {
    return data;
  };

  return data;
}

var WidgetDateShort = function WidgetDateShort(_ref) {
  var selected = _ref.selected,
      colorDay = _ref.colorDay,
      colorWeek = _ref.colorWeek,
      fontDay = _ref.fontDay,
      fontWeek = _ref.fontWeek,
      dd = _ref.dd,
      weekDay = _ref.weekDay,
      props = objectWithoutPropertiesLoose(_ref, ["selected", "colorDay", "colorWeek", "fontDay", "fontWeek", "dd", "weekDay"]);

  return React.createElement(WidgetCardContainer, _extends_1({
    selected: selected
  }, props), React.createElement(DateWrapper, null, React.createElement(WeekContainer, {
    color: colorWeek,
    font: fontWeek
  }, weekDay), React.createElement(DayContainer, {
    color: colorDay,
    font: fontDay
  }, dd)));
};

var DateWrapper = styled.div(_templateObject$1y());
var WeekContainer = styled.div(_templateObject2$A(), function (_ref2) {
  var color = _ref2.color;
  return color;
}, function (_ref3) {
  var font = _ref3.font;
  return font + "px";
});
WeekContainer.displayName = 'WeekContainer';
var DayContainer = styled.div(_templateObject3$p(), function (_ref4) {
  var color = _ref4.color;
  return color;
}, function (_ref5) {
  var font = _ref5.font;
  return font + "px";
});
DayContainer.displayName = 'DayContainer';
WidgetDateShort.defaultProps = {
  selected: false,
  colorWeek: 'black',
  colorDay: 'black',
  fontWeek: 16,
  fontDay: 34,
  dd: 1,
  weekDay: 'Mon'
};
WidgetDateShort.propTypes = {
  /**   is selected */
  selected: PropTypes.bool,

  /**   color week */
  colorWeek: PropTypes.string,

  /**   color day */
  colorDay: PropTypes.string,

  /**   font week */
  fontWeek: PropTypes.number,

  /**   font day */
  fontDay: PropTypes.number,

  /**   day */
  dd: PropTypes.number,

  /**   week day */
  weekDay: PropTypes.string
};
WidgetDateShort.displayName = 'WidgetWrapper';

function _templateObject$1z() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: 100%;\n\theight: 100%;\n\tflex-flow: column;\n\talign-items: center;\n\tjustify-content: space-evenly;\n\tfont-size: 13px;\n\tfont-weight: bold;\n"]);

  _templateObject$1z = function _templateObject() {
    return data;
  };

  return data;
}

var WidgetCard = function WidgetCard(_ref) {
  var image = _ref.image,
      text = _ref.text,
      place = _ref.place,
      props = objectWithoutPropertiesLoose(_ref, ["image", "text", "place"]);

  return React.createElement(WidgetCardContainer, _extends_1({
    width: 93,
    height: 93
  }, props), React.createElement(WidgetContainer, null, React.createElement("img", {
    src: image,
    alt: "box",
    draggable: false
  }), React.createElement(TextTruncate, {
    text: text,
    place: place,
    length: 13
  })));
};

var WidgetContainer = styled.div(_templateObject$1z());
WidgetCard.displayName = 'WidgetCard';
WidgetCard.defaultProps = {
  place: 'bottom'
};
WidgetCard.propTypes = {
  /** Image to be displayed */
  image: PropTypes.string.isRequired,

  /** Text to be displayed */
  text: PropTypes.string.isRequired,

  /** Tooltip position */
  place: PropTypes.oneOf(['top', 'right', 'left', 'bottom'])
};

function _templateObject$1A() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: inline-block;\n\twidth: fit-content;\n\tcolor: ", ";\n\tfont-family: ", ", sans-serif;\n\tfont-size: ", "px;\n\tfont-weight: ", ";\n\tline-height: 100%;\n\n\tspan {\n\t\tpadding-left: 7%;\n\t\tfont-family: Roboto, sans-serif;\n\t\tfont-size: 25%;\n\t\tline-height: 100%;\n\t\tvertical-align: ", ";\n\t}\n"]);

  _templateObject$1A = function _templateObject() {
    return data;
  };

  return data;
}

var DigitalClock = function DigitalClock(_ref) {
  var color = _ref.color,
      font = _ref.font,
      hour = _ref.hour,
      minute = _ref.minute,
      period = _ref.period,
      size = _ref.size,
      props = objectWithoutPropertiesLoose(_ref, ["color", "font", "hour", "minute", "period", "size"]);

  var fontSize = size || (font === 'Roboto' ? 20 : 30);
  return React.createElement(DigitalClockContainer, _extends_1({
    color: color,
    font: font,
    size: fontSize
  }, props), hour + ":" + minute, period && React.createElement("span", null, period));
};

var DigitalClockContainer = styled.div(_templateObject$1A(), function (_ref2) {
  var theme = _ref2.theme,
      color = _ref2.color;
  return color || theme.colors.black;
}, function (_ref3) {
  var font = _ref3.font;
  return font;
}, function (_ref4) {
  var size = _ref4.size;
  return size;
}, function (_ref5) {
  var font = _ref5.font;
  return font === 'Roboto' ? 'bold' : 'normal';
}, function (_ref6) {
  var font = _ref6.font;
  return font === 'Roboto' ? 'top' : 'bottom';
});
DigitalClockContainer.displayName = 'DigitalClockContainer';
DigitalClock.displayName = 'DigitalClock';
DigitalClock.defaultProps = {
  period: undefined,
  size: undefined,
  color: undefined,
  font: 'Roboto',
  hour: 10,
  minute: 10
};
DigitalClock.propTypes = {
  /** Text color */
  color: PropTypes.string,

  /** Text font-family */
  font: PropTypes.oneOf(['Roboto', 'DS-Digital']),

  /** Hour to be displayed */
  hour: PropTypes.number,

  /** Minutes to be displayed */
  minute: PropTypes.number,

  /** Hour period */
  period: PropTypes.oneOf(['AM', 'PM']),

  /** Text font-size */
  size: PropTypes.number
};

function _templateObject$1B() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: 100%;\n\theight: 100%;\n\talign-items: center;\n\tjustify-content: center;\n"]);

  _templateObject$1B = function _templateObject() {
    return data;
  };

  return data;
}

var TimeWidget = function TimeWidget(_ref) {
  var color = _ref.color,
      font = _ref.font,
      hour = _ref.hour,
      minute = _ref.minute,
      period = _ref.period,
      size = _ref.size,
      props = objectWithoutPropertiesLoose(_ref, ["color", "font", "hour", "minute", "period", "size"]);

  return React.createElement(WidgetCardContainer, props, React.createElement(TimeWidgetContainer, null, React.createElement(DigitalClock, {
    color: color,
    font: font,
    hour: hour,
    minute: minute,
    period: period,
    size: size
  })));
};

var TimeWidgetContainer = styled.div(_templateObject$1B());
TimeWidgetContainer.displayName = 'TimeWidgetContainer';
TimeWidget.displayName = 'TimeWidget';
TimeWidget.defaultProps = {
  period: undefined,
  size: undefined,
  font: undefined,
  color: undefined,
  hour: undefined,
  minute: undefined
};
TimeWidget.propTypes = {
  /** Text color */
  color: PropTypes.string,

  /** Text font-family */
  font: PropTypes.oneOf(['Roboto', 'DS-Digital']),

  /** Hour to be displayed */
  hour: PropTypes.number,

  /** Minutes to be displayed */
  minute: PropTypes.number,

  /** Hour period */
  period: PropTypes.oneOf(['AM', 'PM']),

  /** Text font-size */
  size: PropTypes.number
};

function _templateObject4$j() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: ", ";\n\tbackground-image: url(", ");\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n\tbackground-size: 100% auto;\n\n\tborder-radius: 4px;\n\n\t&:hover,\n\t&focus {\n\t\tborder-radius: 0;\n\t}\n"]);

  _templateObject4$j = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$q() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: absolute;\n\tz-index: 2;\n\n\t:before {\n\t\tdisplay: inline-block;\n\t\tborder-radius: 2px;\n\t\tline-height: 0.9em;\n\t}\n\n\ttop: 3px;\n\tright: 8px;\n"]);

  _templateObject3$q = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$B() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: absolute;\n\tz-index: 2;\n\ttop: 8px;\n\tleft: 8px;\n"]);

  _templateObject2$B = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1C() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: relative;\n\twidth: ", ";\n\theight: ", ";\n\tborder: 2px solid transparent;\n\n\tcursor: pointer;\n\n\t&:after {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 4px;\n\t\tbox-shadow: ", ";\n\t\tcontent: '';\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\t&:after {\n\t\t\tbox-shadow: 0 0 0 2px ", ";\n\t\t}\n\t}\n"]);

  _templateObject$1C = function _templateObject() {
    return data;
  };

  return data;
}

var ImageCard = function ImageCard(_ref) {
  var checkboxId = _ref.checkboxId,
      handleSelect = _ref.handleSelect,
      image = _ref.image,
      video = _ref.video,
      checked = _ref.checked,
      width = _ref.width,
      height = _ref.height,
      props = objectWithoutPropertiesLoose(_ref, ["checkboxId", "handleSelect", "image", "video", "checked", "width", "height"]);

  return React.createElement(ImageCardStyled, _extends_1({
    checked: checked,
    width: width,
    height: height
  }, props), checked !== undefined && React.createElement(CheckboxWrapper$1, null, React.createElement(Checkbox$1, {
    checked: checked,
    onChange: function onChange(e) {
      e.stopPropagation();
      handleSelect(e.target.checked);
    }
  })), video && React.createElement(IconStyled$2, {
    size: "big",
    checked: checked,
    color: theme.colors.gray,
    icon: "multimedia"
  }), React.createElement(ImgCover, {
    src: image,
    alt: "image"
  }));
};

var ImageCardStyled = styled.div(_templateObject$1C(), function (_ref2) {
  var width = _ref2.width;
  return width ? width + "px" : '100%';
}, function (_ref3) {
  var height = _ref3.height;
  return height ? height + "px" : '100%';
}, function (_ref4) {
  var theme$$1 = _ref4.theme,
      checked = _ref4.checked;
  return checked ? "0 0 0 2px " + theme$$1.colors.activeBlue : "0 0 0 1px " + theme$$1.colors.strokeGray;
}, function (_ref5) {
  var theme$$1 = _ref5.theme;
  return theme$$1.colors.activeBlue;
});
ImageCardStyled.displayName = 'ImageCardStyled';
var CheckboxWrapper$1 = styled.div(_templateObject2$B());
CheckboxWrapper$1.displayName = 'CheckboxWrapper';
var IconStyled$2 = styled(Icon$1)(_templateObject3$q());
IconStyled$2.displayName = 'IconStyled';
var ImgCover = styled.div(_templateObject4$j(), function (_ref6) {
  var theme$$1 = _ref6.theme;
  return theme$$1.colors.lightGray;
}, function (_ref7) {
  var src = _ref7.src;
  return src;
});
ImageCard.defaultProps = {
  checked: undefined,
  handleSelect: undefined,
  checkboxId: undefined,
  width: null,
  height: null,
  video: false
};
ImageCard.propTypes = {
  /** checkbox is checked and the ImageCard is selected */
  checked: PropTypes.bool,

  /** func to handle when element is selected  */
  handleSelect: PropTypes.func,

  /** background image url */
  image: PropTypes.string.isRequired,

  /** button id to use in functional tests */
  checkboxId: PropTypes.string,

  /** ImageCard's witdh */
  width: PropTypes.number,

  /** ImageCard's height */
  height: PropTypes.number,

  /** if is a video */
  video: PropTypes.bool
};
ImageCard.displayName = 'ImageCard';

function _templateObject$1D() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: grid;\n\tgrid-column-gap: ", "px;\n\tgrid-row-gap: ", "px;\n\tgrid-template-columns: ", ";\n\n\t@media screen and (min-width: 768px) and (max-width: 991px) {\n\t\tgrid-template-columns: ", ";\n\t}\n\n\t@media screen and (min-width: 992px) and (max-width: 1200px) {\n\t\tgrid-template-columns: ", ";\n\t}\n\n\t@media screen and (min-width: 1200px) {\n\t\tgrid-template-columns: ", ";\n\t}\n\n\t", ";\n\n\t", "\n"]);

  _templateObject$1D = function _templateObject() {
    return data;
  };

  return data;
}

var CustomGrid = function CustomGrid(_ref) {
  var minWidth = _ref.minWidth,
      rowGap = _ref.rowGap,
      columnGap = _ref.columnGap,
      children = _ref.children,
      squared = _ref.squared,
      mobile = _ref.mobile,
      tablet = _ref.tablet,
      desktop = _ref.desktop,
      bigDesktop = _ref.bigDesktop;
  return React.createElement(GridStyled, {
    minWidth: minWidth,
    squared: squared,
    rowGap: rowGap,
    columnGap: columnGap,
    mobile: mobile,
    tablet: tablet,
    desktop: desktop,
    bigDesktop: bigDesktop
  }, children);
};

var GridStyled = styled.div(_templateObject$1D(), function (_ref2) {
  var columnGap = _ref2.columnGap;
  return columnGap;
}, function (_ref3) {
  var rowGap = _ref3.rowGap;
  return rowGap;
}, function (_ref4) {
  var mobile = _ref4.mobile,
      minWidth = _ref4.minWidth;
  return "repeat(" + (mobile || 'auto-fit') + ", minmax(" + minWidth + "px, 1fr))";
}, function (_ref5) {
  var tablet = _ref5.tablet,
      minWidth = _ref5.minWidth;
  return "repeat(" + (tablet || 'auto-fit') + ", minmax(" + minWidth + "px, 1fr))";
}, function (_ref6) {
  var desktop = _ref6.desktop,
      minWidth = _ref6.minWidth;
  return "repeat(" + (desktop || 'auto-fit') + ", minmax(" + minWidth + "px, 1fr))";
}, function (_ref7) {
  var bigDesktop = _ref7.bigDesktop,
      minWidth = _ref7.minWidth;
  return "repeat(" + (bigDesktop || 'auto-fit') + ", minmax(" + minWidth + "px, 1fr))";
}, function (_ref8) {
  var squared = _ref8.squared;
  return squared && 'grid-auto-rows: 1fr';
}, function (_ref9) {
  var squared = _ref9.squared;
  return squared && " \n\t\t&:before {\n\t\t\twidth: 0;\n\t\t\tpadding-bottom: 100%;\n\t\t\tcontent: '';\n\t\t\tgrid-column: 1 / 1;\n\t\t\tgrid-row: 1 / 1;\n\t\t}\n\t\t*:first-child {\n\t\t\tgrid-column: 1 / 1;\n\t\t\tgrid-row: 1 / 1;\n\t\t}\n  \t";
});
GridStyled.displayName = 'GridStyled';
CustomGrid.defaultProps = {
  minWidth: 40,
  rowGap: 20,
  columnGap: 20,
  squared: false,
  mobile: undefined,
  tablet: undefined,
  desktop: undefined,
  bigDesktop: undefined
};
CustomGrid.displayName = 'CustomGrid';
CustomGrid.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,

  /** min width of grid column */
  minWidth: PropTypes.number,

  /** space between rows */
  rowGap: PropTypes.number,

  /** space between columns */
  columnGap: PropTypes.number,

  /** grid elements in squared shape */
  squared: PropTypes.bool,

  /**  number of columns on mobile size */
  mobile: PropTypes.number,

  /**  number of columns on tablet size */
  tablet: PropTypes.number,

  /**  number of columns on desktop size */
  desktop: PropTypes.number,

  /**  number of columns on bigDesktop size */
  bigDesktop: PropTypes.number
};

function _templateObject8$2() {
  var data = taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n"]);

  _templateObject8$2 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7$3() {
  var data = taggedTemplateLiteralLoose(["\n\toverflow: hidden;\n\tpadding-right: 2px;\n\tcolor: ", ";\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n"]);

  _templateObject7$3 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6$7() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n"]);

  _templateObject6$7 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5$9() {
  var data = taggedTemplateLiteralLoose(["\n\tmargin-bottom: 6px;\n\tcolor: ", ";\n\tfont-size: 13px;\n"]);

  _templateObject5$9 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$k() {
  var data = taggedTemplateLiteralLoose(["\n\tpadding: 10px 12px 12px 12px;\n"]);

  _templateObject4$k = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$r() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: absolute;\n\tz-index: 2;\n\ttop: 8px;\n\tleft: 8px;\n"]);

  _templateObject3$r = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$C() {
  var data = taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\theight: ", ";\n\tbackground-color: ", ";\n\tbackground-image: url(", ");\n\tbackground-size: cover;\n\n\t&:first-child {\n\t\tborder-top-left-radius: 4px;\n\t}\n\t&:last-child {\n\t\tborder-top-right-radius: 4px;\n\t}\n"]);

  _templateObject2$C = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1E() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: relative;\n\tdisplay: inline-block;\n\twidth: ", ";\n\theight: 100%;\n\tborder: 2px solid transparent;\n\tuser-select: none;\n\n\t&:after {\n\t\tposition: absolute;\n\t\ttop: 0%;\n\t\tleft: 0%;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 4px;\n\t\tbox-shadow: ", ";\n\t\tcontent: '';\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\t&:after {\n\t\t\tbox-shadow: 0 0 0 2px ", ";\n\t\t}\n\t}\n"]);

  _templateObject$1E = function _templateObject() {
    return data;
  };

  return data;
}

var PlaylistCard = function PlaylistCard(_ref) {
  var buttonId = _ref.buttonId,
      handleSelect = _ref.handleSelect,
      images = _ref.images,
      checked = _ref.checked,
      selected = _ref.selected,
      width = _ref.width,
      imageHeight = _ref.imageHeight,
      title = _ref.title,
      leftText = _ref.leftText,
      rightText = _ref.rightText,
      props = objectWithoutPropertiesLoose(_ref, ["buttonId", "handleSelect", "images", "checked", "selected", "width", "imageHeight", "title", "leftText", "rightText"]);

  return React.createElement(PlaylistCardStyled, _extends_1({
    checked: checked,
    width: width
  }, props, {
    selected: selected
  }), checked !== undefined && React.createElement(CheckboxWrapper$2, null, React.createElement(Checkbox$1, {
    checked: checked,
    onChange: function onChange(e) {
      e.stopPropagation();
      handleSelect(e.target.checked);
    }
  })), React.createElement(CustomGrid, {
    rowGap: 0,
    columnGap: 0,
    minWidth: 30
  }, images.slice(0, 3).map(function (image, index) {
    return React.createElement(ImgCover$1, {
      key: index,
      src: image,
      alt: "logo",
      height: imageHeight
    });
  })), React.createElement(Content$2, null, React.createElement(Title$4, null, title), React.createElement(Flex$5, null, React.createElement(InfoLeft, null, leftText), React.createElement(InfoRight, null, rightText))));
};

var PlaylistCardStyled = styled.div(_templateObject$1E(), function (_ref2) {
  var width = _ref2.width;
  return width && width + "px";
}, function (_ref3) {
  var theme = _ref3.theme,
      checked = _ref3.checked;
  return checked ? " 0 0 0 2px " + theme.colors.activeBlue : " 0 0 0 1px " + theme.colors.strokeGray;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.colors.activeBlue;
});
var ImgCover$1 = styled.div(_templateObject2$C(), function (_ref5) {
  var height = _ref5.height;
  return height && height + "px";
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.colors.strokeGray;
}, function (_ref7) {
  var src = _ref7.src;
  return src;
});
var CheckboxWrapper$2 = styled.div(_templateObject3$r());
CheckboxWrapper$2.displayName = 'CheckboxWrapper';
var Content$2 = styled.div(_templateObject4$k());
var Title$4 = styled.div(_templateObject5$9(), function (_ref8) {
  var theme = _ref8.theme;
  return theme.colors.activeBlue;
});
var Flex$5 = styled.div(_templateObject6$7());
var InfoLeft = styled.div(_templateObject7$3(), function (_ref9) {
  var theme = _ref9.theme;
  return theme.colors.mediumGray;
});
var InfoRight = styled.div(_templateObject8$2(), function (_ref10) {
  var theme = _ref10.theme;
  return theme.colors.mediumGray;
});
PlaylistCard.defaultProps = {
  checked: undefined,
  handleSelect: undefined,
  buttonId: undefined,
  width: undefined,
  imageHeight: 74,
  selected: false,
  rightText: undefined,
  leftText: undefined
};
PlaylistCard.propTypes = {
  /** if is checked */
  checked: PropTypes.bool,

  /** func to handle when element is selected  */
  handleSelect: PropTypes.func,

  /** array of images */
  images: PropTypes.arrayOf(PropTypes.string).isRequired,

  /** button id to use in functional tests */
  buttonId: PropTypes.string,

  /** card's width */
  width: PropTypes.number,

  /** card's images height */
  imageHeight: PropTypes.number,

  /** if the card is selected */
  selected: PropTypes.bool,

  /** card's title */
  title: PropTypes.string.isRequired,

  /** card's leftText */
  leftText: PropTypes.string,

  /** card's rightText */
  rightText: PropTypes.string
};
PlaylistCard.displayName = 'PlaylistCard';

function _templateObject4$l() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tmargin-left: auto;\n\tflex-direction: column;\n\ttext-align: end;\n"]);

  _templateObject4$l = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$s() {
  var data = taggedTemplateLiteralLoose(["\n\tfont-weight: bold;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\tmargin-right: 20px;\n"]);

  _templateObject3$s = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$D() {
  var data = taggedTemplateLiteralLoose(["\n\tmargin-right: 20px;\n\tcolor: ", ";\n\tfont-size: 35px;\n\tline-height: 39px;\n\twhite-space: nowrap;\n"]);

  _templateObject2$D = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1F() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tmin-width: 260px;\n\talign-items: center;\n\tpadding: 16px 16px 16px 20px;\n\tbackground-color: ", ";\n\tborder-radius: 4px;\n\tbox-shadow: 0 0 8px rgba(0, 0, 0, 0.15);\n\tborder: ", ";\n\n\tspan,\n\ti {\n\t\tcolor: ", "};\n\t}\n"]);

  _templateObject$1F = function _templateObject() {
    return data;
  };

  return data;
}

var TicketCard = function TicketCard(_ref) {
  var queueTag = _ref.queueTag,
      ticketNumber = _ref.ticketNumber,
      hour = _ref.hour,
      language = _ref.language,
      priority = _ref.priority,
      props = objectWithoutPropertiesLoose(_ref, ["queueTag", "ticketNumber", "hour", "language", "priority"]);

  return React.createElement(TicketCardWrapper, _extends_1({
    priority: priority,
    color: theme.colors.strokeGray
  }, props), React.createElement(TicketNumber$1, null, React.createElement(TicketLabel, {
    queueTag: queueTag,
    ticketNumber: ticketNumber
  })), priority && React.createElement(PriorityWrapper, null, priority), React.createElement(InfoWrapper, null, React.createElement(Text, {
    color: theme.colors.gray
  }, hour), language && React.createElement(Text, {
    color: theme.colors.mediumGray
  }, language)));
};

var TicketCardWrapper = styled(Ripple)(_templateObject$1F(), function (_ref2) {
  var theme$$1 = _ref2.theme;
  return theme$$1.colors.white;
}, function (_ref3) {
  var priority = _ref3.priority,
      theme$$1 = _ref3.theme;
  return priority && "1px solid " + theme$$1.colors.activeBlue;
}, function (_ref4) {
  var priority = _ref4.priority,
      theme$$1 = _ref4.theme;
  return priority && theme$$1.colors.activeBlue + " !important";
});
var TicketNumber$1 = styled.span(_templateObject2$D(), function (_ref5) {
  var theme$$1 = _ref5.theme;
  return theme$$1.colors.darkGray;
});
var PriorityWrapper = styled.span(_templateObject3$s());
var InfoWrapper = styled.div(_templateObject4$l());
PriorityWrapper.displayName = 'PriorityWrapper';
TicketCard.displayName = 'TicketCard';
TicketCard.defaultProps = {
  priority: undefined,
  language: undefined
};
TicketCard.propTypes = {
  /** Queue Tag displayed in the ticket card */
  queueTag: PropTypes.string.isRequired,

  /** Ticker Number displayed in the ticket card */
  ticketNumber: PropTypes.string.isRequired,

  /** Hour displayed in the ticket card */
  hour: PropTypes.string.isRequired,

  /** Language displayed in the ticket card */
  language: PropTypes.string,

  /** Define ticket's priority */
  priority: PropTypes.string,

  /** Number to be displayed in the ticket card */
  onClick: PropTypes.func.isRequired
};

function _templateObject$1G() {
  var data = taggedTemplateLiteralLoose(["\n\tposition: relative;\n\tdisplay: block;\n\twidth: ", "%;\n\theight: ", "%;\n\tbox-sizing: border-box;\n\tfloat: left;\n"]);

  _templateObject$1G = function _templateObject() {
    return data;
  };

  return data;
}

var Row$2 = function Row(_ref) {
  var children = _ref.children,
      width = _ref.width,
      height = _ref.height,
      props = objectWithoutPropertiesLoose(_ref, ["children", "width", "height"]);

  return React.createElement(RowWrapper, _extends_1({
    width: width,
    height: height
  }, props), children);
};

var RowWrapper = styled.div(_templateObject$1G(), function (_ref2) {
  var width = _ref2.width;
  return width;
}, function (_ref3) {
  var height = _ref3.height;
  return height;
});
RowWrapper.displayName = 'RowWrapper';
Row$2.displayName = 'Row';
Row$2.defaultProps = {
  children: undefined,
  width: 100,
  height: 100
};
Row$2.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
  width: PropTypes.number,
  height: PropTypes.number
};

var build = createCommonjsModule(function (module) {
module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r});},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0});},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(e,t){e.exports=React;},function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0});var r={alignItems:"center",display:"flex",userSelect:"none"};t.defaultMenuStyle=r;var i={overflow:"hidden",userSelect:"none"};t.defaultWrapperStyle=i;var s={alignCenter:!0,alignOnResize:!0,arrowClass:"scroll-menu-arrow",arrowDisabledClass:"scroll-menu-arrow--disabled",arrowLeft:null,arrowRight:null,clickWhenDrag:!1,data:[],dragging:!0,hideArrows:!1,hideSingleArrow:!1,inertiaScrolling:!1,inertiaScrollingSlowdown:.25,innerWrapperClass:"menu-wrapper--inner",innerWrapperStyle:{textAlign:"left",userSelect:"none",whiteSpace:"nowrap"},itemClass:"menu-item-wrapper",itemClassActive:"active",itemStyle:{display:"inline-block"},menuClass:"horizontal-menu",menuStyle:r,onSelect:function(){return !1},onUpdate:function(){return !1},scrollBy:0,scrollToSelected:!1,selected:"",transition:.4,translate:0,useButtonRole:!0,wrapperClass:"menu-wrapper",wrapperStyle:i,wheel:!0,xPoint:0,rtl:!1};t.defaultProps=s;},function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var i=r(n(3));t.default=i.default;},function(e,t,n){var r=this&&this.__extends||function(){var e=function(t,n){return (e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t;}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);})(t,n)};return function(t,n){function r(){this.constructor=t;}e(t,n),t.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r);}}(),i=this&&this.__assign||function(){return (i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)},s=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t};Object.defineProperty(t,"__esModule",{value:!0});var a=s(n(0)),o=n(1),l=n(4),u=n(5),d=function(e){function t(t){var n=e.call(this,t)||this;return n.state={dragging:!1,firstItemVisible:!0,lastItemVisible:!1,leftArrowVisible:!1,rightArrowVisible:!0,startDragTranslate:0,translate:n.props.translate,xDraggedDistance:0,xPoint:0},n.setRef=function(e){var t=Object.entries(e)[0],r=t[0],i=t[1];i.elem&&(n.ref[r]=i);},n.setMenuInnerRef=function(e){n.menuInner=e;},n.setWrapperRef=function(e){n.menuWrapper=e;},n.checkFirstLastItemVisibility=function(e){var t=e.translate,r=void 0===t?n.state.translate:t,i=n.menuItems,s=!0,a=!1;if(i){var o=n.getVisibleItems({offset:r});s=o.includes(i[0]),a=o.includes(i.slice(-1)[0]);}return {firstItemVisible:s,lastItemVisible:a}},n.setFirstLastItemVisibility=function(){var e=n.state,t=e.firstItemVisible,r=e.lastItemVisible,i=n.checkFirstLastItemVisibility({}),s=i.firstItemVisible,a=i.lastItemVisible;if(t!==s||r!==a){var o=!s,l=!a;n.setState({firstItemVisible:s,lastItemVisible:a,leftArrowVisible:o,rightArrowVisible:l});}},n.onLoad=function(){n.setInitial(),n.mounted=!0;},n.resizeHandler=function(){if(!n.props.alignOnResize)return !1;clearTimeout(n.resizeTimer),n.resizeTimer=setTimeout(function(){return n.resize()},250);},n.resize=function(){var e=n.props.alignCenter;n.updateWidth({});var t=n.getVisibleItems({}),r=n.getOffsetToItemByIndex({index:t[0]&&t[0][1].index||0}),i=e?n.getCenterOffset({items:t}):0;n.setState({translate:-r+i}),n.setFirstLastItemVisibility();},n.setInitial=function(){var e=n.props,t=e.selected,r=e.data,s=e.translate,a=e.scrollToSelected,u=e.alignCenter,d=n.state.translate;if(!r||!r.length)return !1;n.menuItems.length&&r===n.data||(n.menuItems=n.getMenuItems(),n.data=r),n.updateWidth({});var f=i({},n.state);(!n.mounted&&s===o.defaultProps.translate||!l.translateIsValid(s)&&!l.translateIsValid(d))&&(f.translate=u?n.firstPageOffset:o.defaultProps.translate);var c=n.checkFirstLastItemVisibility({translate:s}),m=c.firstItemVisible,p=c.lastItemVisible;(f.firstItemVisible=m,f.lastItemVisible=p,f.leftArrowVisible=!m,f.rightArrowVisible=!p,a)&&(n.isScrollNeeded({itemId:t,translate:f.translate})&&(f.translate=n.getOffsetToItemByKey(t)));n.setState(i({},f));},n.isScrollNeeded=function(e){var t=e.itemId,r=e.translate,i=void 0===r?n.state.translate:r,s=n.getItemByKey(t);return !n.getVisibleItems({offset:i}).includes(s)},n.scrollTo=function(e){var t=n.state.translate,r=n.getOffsetToItemByKey(e);if(n.selected=e,t===r)return !1;n.setState({translate:r});},n.getMenuItems=function(){return Object.entries(n.ref).slice(0,n.props.data.length||0)},n.getItemsWidth=function(e){var t=e.items;return (void 0===t?n.menuItems:t).map(function(e){return e[1].elem}).filter(Boolean).reduce(function(e,t){return e+l.getClientRect(t).width},0)},n.getWidth=function(e){var t=e.items,r=window&&window.innerWidth,i=l.getClientRect(n.menuWrapper);return {wWidth:r,menuPos:i.x,menuWidth:i.width,allItemsWidth:n.getItemsWidth({items:t})}},n.updateWidth=function(e){var t=e.items,r=void 0===t?n.menuItems:t,i=n.getWidth({items:r}),s=i.wWidth,a=i.menuPos,o=i.menuWidth,l=i.allItemsWidth,u=n.getPagesOffsets({allItemsWidth:l,items:r,menuWidth:o}),d=u.firstPageOffset,f=u.lastPageOffset;n.menuPos=a,n.wWidth=s,n.allItemsWidth=l,n.menuWidth=o,n.firstPageOffset=d,n.lastPageOffset=f;},n.getFirstPageOffset=function(e){var t=e.items,r=void 0===t?n.menuItems:t,i=e.offset,s=void 0===i?n.state.translate:i,a=e.menuWidth,o=void 0===a?n.menuWidth:a,l=n.getVisibleItems({items:r,menuWidth:o,offset:s});return n.getCenterOffset({items:l,menuWidth:o})},n.getLastPageOffset=function(e){var t=e.items,r=void 0===t?n.menuItems:t,i=e.allItemsWidth,s=void 0===i?n.allItemsWidth:i,a=e.menuWidth,o=void 0===a?n.menuWidth:a,l=n.props.rtl,u=n.getVisibleItems({items:r,menuWidth:o,offset:l?s-o:-s+o});return n.getCenterOffset({items:u,menuWidth:o})},n.getPagesOffsets=function(e){var t=e.items,r=void 0===t?n.menuItems:t,i=e.allItemsWidth,s=void 0===i?n.allItemsWidth:i,a=e.menuWidth,o=void 0===a?n.menuWidth:a,l=e.offset,u=void 0===l?n.state.translate:l;return {firstPageOffset:n.getFirstPageOffset({items:r,menuWidth:o,offset:u}),lastPageOffset:n.getLastPageOffset({allItemsWidth:s,items:r,menuWidth:o})}},n.onItemClick=function(e){var t=n.props,r=t.clickWhenDrag,i=t.onSelect;if(n.state.xDraggedDistance>5&&!r)return !1;n.selected=e,i&&i(e);},n.getVisibleItems=function(e){var t=e.items,r=void 0===t?n.menuItems:t,i=e.menuWidth,s=void 0===i?n.menuWidth:i,a=e.offset,u=void 0===a?n.state.translate:a,d=e.translate,f=void 0===d?n.state.translate||o.defaultProps.translate:d;return r.filter(function(e){var t=l.getClientRect(e[1].elem).width,i=n.getItemInd(r,e),a=n.getOffsetToItemByIndex({index:i,menuItems:r,translate:f});return n.elemVisible({elWidth:t,menuWidth:s,offset:u,x:a})})},n.elemVisible=function(e){var t=e.x,r=e.offset,i=void 0===r?0:r,s=e.elWidth,a=e.menuWidth,o=void 0===a?n.menuWidth:a,l=n.props.rtl,u=l?-(o+1):-1,d=l?1:o+1,f=l?-(t+i):t+i,c=l?f-s:f+s;return l?c>=u&&f<=d:f>=u&&c<=d},n.getItemInd=function(e,t){return void 0===e&&(e=n.menuItems),e&&t?e.findIndex(function(e){return e[0]===t[0]}):0},n.getNextItemInd=function(e,t){var r=n.menuItems;if(e){if(!t.length)return 0}else if(!t.length)return r.length;var i=e?n.getItemInd(r,t[0])-1:n.getItemInd(r,t.slice(-1)[0])+1;return i<0?0:i},n.getOffsetToItemByKey=function(e){var t=n.state.translate,r=n.getItemIndexByKey(e);if(-1===r)return t;var i=n.props,s=i.alignCenter,a=i.rtl;t=n.getOffsetToItemByIndex({index:r});var l=n.getVisibleItems({offset:-t}),u=s?n.getCenterOffset({items:l}):o.defaultProps.translate;return t=-(t-(a?-u:u)),n.itBeforeStart(t)?t=n.getOffsetAtStart():n.itAfterEnd(t)&&(t=n.getOffsetAtEnd()),t},n.getItemByKey=function(e){return n.menuItems.find(function(t){return t[1].key===e})||["",{key:"n",elem:null,index:-1}]},n.getItemIndexByKey=function(e){return e?n.menuItems.findIndex(function(t){return t[1].key===e}):-1},n.getOffsetToItemByIndex=function(e){var t=e.index,r=e.menuItems,i=void 0===r?n.menuItems:r,s=e.translate,a=void 0===s?n.state.translate:s;if(!i.length)return 0;var o=t>=i.length?i.length-1:t,u=l.getClientRect(i[o][1].elem),d=u.x,f=u.x2;return n.props.rtl?n.menuPos+n.menuWidth-a-f:+d-a-n.menuPos},n.getScrollRightOffset=function(e,t){void 0===t&&(t=n.menuItems);var r=n.props,i=r.scrollBy,s=r.rtl,a=i?e[0][1].index+i:s?n.getPrevItem((e[0]&&e[0][1]||t[0][1]).key)[1].index:n.getNextItem((e.slice(-1)[0]&&e.slice(-1)||t.slice(-1))[0][1].key)[1].index,o=-n.getOffsetToItemByIndex({index:a,menuItems:t});return s?-o:o},n.getScrollLeftOffset=function(e,t){void 0===t&&(t=n.menuItems);var r=n.props,i=r.scrollBy,s=(r.rtl?n.getNextItem((e.slice(-1)[0]&&e.slice(-1)||t.slice(-1))[0][1].key):n.getPrevItem((e[0]&&e[0][1]||t[0][1]).key))[1].index-(i?i-1:e.length);return -n.getOffsetToItemByIndex({index:s<0?0:s,menuItems:t})},n.getNextItem=function(e){var t=n.menuItems;return t[t.findIndex(function(t){return t[1].key===e})+1]||t.slice(-1)[0]},n.getPrevItem=function(e){var t=n.menuItems;return t[t.findIndex(function(t){return t[1].key===e})-1]||t[0]},n.getOffset=function(e,t){void 0===t&&(t=n.menuItems),e=n.props.rtl?!e:e;var r=n.getVisibleItems({items:t});return e?n.getScrollLeftOffset(r,t):n.getScrollRightOffset(r,t)},n.getCenterOffset=function(e){var t=e.items,r=void 0===t?n.menuItems:t,i=e.menuWidth,s=void 0===i?n.menuWidth:i;return r.length?(s-n.getItemsWidth({items:r}))/2:0},n.handleWheel=function(e){if(!n.props.wheel)return !1;e.deltaY<0?n.handleArrowClick():n.handleArrowClick(!1);},n.getOffsetAtStart=function(){var e=n.firstPageOffset;return n.props.alignCenter?e:o.defaultProps.translate},n.getOffsetAtEnd=function(){var e=n.props.alignCenter,t=n,r=t.allItemsWidth,i=t.menuWidth,s=t.lastPageOffset,a=r-i;return e?-a-s:-a},n.handleArrowClickRight=function(){n.handleArrowClick(!1);},n.handleArrowClick=function(e){void 0===e&&(e=!0);var t=n.props,r=t.alignCenter,i=t.rtl,s=n,a=s.allItemsWidth,l=s.menuWidth;if(!r&&!e&&a<l)return !1;var u=0,d=n.getVisibleItems({}),f=d[0]&&0===d[0][1].index,c=d.slice(-1)[0]&&d.slice(-1)[0][1].index===n.menuItems.length-1,m=n.getOffset(e);if(e&&(f||n.itBeforeStart(m)))u=n.getOffsetAtStart();else if(e||!c&&!n.itAfterEnd(m)){var p=r?n.getCenterOffset({items:n.getVisibleItems({offset:m})}):0;u=m+(i?e?p+n.menuWidth:-p-n.menuWidth:p);}else u=n.getOffsetAtEnd();n.setState({startDragTranslate:0,translate:u,xDraggedDistance:0,xPoint:o.defaultProps.xPoint});},n.itBeforeStart=function(e){var t=n.props.alignCenter,r=n,i=r.menuWidth,s=r.allItemsWidth,a=r.firstPageOffset;return s<i||(t?e>a:e>o.defaultProps.translate)},n.itAfterEnd=function(e){var t=n.props.alignCenter,r=n,i=r.menuWidth,s=r.allItemsWidth,a=r.lastPageOffset;return s<i||(t?e<o.defaultProps.translate&&Math.abs(e)>s-i+a:e<o.defaultProps.translate&&Math.abs(e)>s-i)},n.getPoint=function(e){return "touches"in e?e.touches[0].clientX:"clientX"in e?e.clientX:0},n.handleDragStart=function(e){if(e&&"buttons"in e&&2===e.buttons)return !1;if(!n.props.dragging)return !1;var t=n.state.translate;n.dragHistory=[{time:Date.now(),position:t}],n.setState({dragging:!0,startDragTranslate:t,xDraggedDistance:0,xPoint:0});},n.handleDrag=function(e){var t=n.props,r=t.dragging,i=t.rtl,s=n.state,a=s.translate,l=s.dragging,u=s.xPoint,d=s.xDraggedDistance;if(!r||!l)return !1;var f=n.getPoint(e),c=u===o.defaultProps.xPoint?o.defaultProps.xPoint:u-f,m=a-(i?-c:c);n.itBeforeStart(m)?m-=Math.abs(c)/2:n.itAfterEnd(m)&&(m+=Math.abs(c)/2),0!==c&&n.dragHistory.push({time:Date.now(),position:m});var p=m;n.setState({translate:p,xDraggedDistance:d+Math.abs(c),xPoint:f});},n.handleDragStop=function(e){var t=n,r=t.allItemsWidth,i=t.menuWidth,s=n.state,a=s.translate,l=s.xPoint,u=void 0===l?n.getPoint(e):l,d=n.state,f=d.dragging,c=d.startDragTranslate,m=n.props,p=m.dragging,g=m.alignCenter;if(!p||!f)return !1;if(n.props.inertiaScrolling){var h=Date.now(),v=n.dragHistory.filter(function(e){return h-e.time<150});if(v.length>2){var I=v[0],y=v[v.length-1],b=(y.position-I.position)/(y.time-I.time);a+=(b*=n.props.inertiaScrollingSlowdown)*(1e3*n.props.transition);}}var w=a;n.itBeforeStart(a)?(w=n.getOffsetAtStart(),u=o.defaultProps.xPoint):n.itAfterEnd(a)&&(w=n.getOffsetAtEnd(),u=o.defaultProps.xPoint),!g&&r<=i&&(w=o.defaultProps.translate,u=o.defaultProps.xPoint),n.setState({dragging:!1,translate:w,xPoint:u},function(){return n.onUpdate({translate:w,translateOld:c})});},n.isArrowsVisible=function(){var e=n,t=e.allItemsWidth,r=e.menuWidth,i=e.props.hideArrows;return !Boolean(i&&t<=r)},n.onUpdate=function(e){var t=e.translate,r=void 0===t?n.state.translate:t,i=e.translateOld,s=void 0===i?n.state.translate:i,a=n.props.onUpdate,o=n.lastTranslateUpdate;r!==s&&r!==o&&(n.lastTranslateUpdate=r,"function"==typeof a&&a({translate:r}));},n.ref={},n.menuWrapper=null,n.menuInner=null,n.mounted=!1,n.needUpdate=!1,n.allItemsWidth=0,n.menuPos=0,n.menuWidth=0,n.wWidth=0,n.firstPageOffset=0,n.lastPageOffset=0,n.lastTranslateUpdate=0,n.menuItems=[],n.selected=String(t.selected)||"",n.onLoadTimer=0,n.rafTimer=0,n.resizeTimer=0,n.frameId=0,n.data=null,n.dragHistory=[],n}return r(t,e),t.prototype.componentDidCatch=function(e,t){console.log("ScrollMenu catched error: ",e,t);},t.prototype.componentDidMount=function(){var e=this;this.setInitial(),window.requestAnimationFrame=window.requestAnimationFrame||function(){return !1};var t=l.testPassiveEventSupport(),n=!t||{passive:!0,capture:!0},r=!!t&&{passive:!0,capture:!1};window.addEventListener("load",this.onLoad,r),window.addEventListener("resize",this.resizeHandler,r),document.addEventListener("mousemove",this.handleDrag,n),document.addEventListener("mouseup",this.handleDragStop,n),this.onLoadTimer=setTimeout(function(){return e.onLoad(),e.forceUpdate()},0);},t.prototype.shouldComponentUpdate=function(e,t){var n=this.state,r=n.translate,i=n.dragging,s=n.firstItemVisible,a=n.lastItemVisible,o=t.translate,u=t.dragging,d=t.firstItemVisible,f=t.lastItemVisible,c=this.props,m=c.translate,p=c.selected,g=c.scrollToSelected,h=e.translate,v=e.selected,I=l.notUndefOrNull(h)&&m!==h,y=h!==o||r!==o||I,b=l.notUndefOrNull(v)&&p!==v,w=b||this.selected!==v,P=y||w,S=s!==d,W=a!==f,O=o,x=this.props.data!==e.data||this.props.data.length!==e.data.length,C=l.translateIsValid(h)&&I&&!x;return (x||g&&b)&&(this.needUpdate=!0),P&&(b&&(this.selected=v),C&&(O=h)),C&&this.setState({translate:+O}),x||y||i!==u||P||S||W},t.prototype.componentDidUpdate=function(e,t){var n=this;this.needUpdate&&(this.needUpdate=!1,this.onLoad());var r=t.translate,i=this.state,s=i.translate;i.dragging||r===s||this.onUpdate({translate:s,translateOld:r});var a=this.props,o=a.hideSingleArrow,l=a.transition;o&&(cancelAnimationFrame(this.frameId),clearTimeout(this.rafTimer),this.frameId=requestAnimationFrame(this.setFirstLastItemVisibility),this.rafTimer=setTimeout(function(){cancelAnimationFrame(n.frameId),n.frameId=requestAnimationFrame(n.setFirstLastItemVisibility);},1e3*l+10));},t.prototype.componentWillUnmount=function(){window.removeEventListener("resize",this.resizeHandler),document.removeEventListener("mousemove",this.handleDrag),document.removeEventListener("mouseup",this.handleDragStop),clearTimeout(this.rafTimer),clearTimeout(this.onLoadTimer),clearTimeout(this.resizeTimer),cancelAnimationFrame(this.frameId);},t.prototype.render=function(){var e=this.props,t=e.arrowClass,n=e.arrowDisabledClass,r=e.arrowLeft,s=e.arrowRight,l=e.data,d=e.inertiaScrolling,f=e.innerWrapperStyle,c=e.innerWrapperClass,m=e.itemStyle,p=e.itemClass,g=e.itemClassActive,h=e.menuStyle,v=e.menuClass,I=e.transition,y=e.useButtonRole,b=e.wrapperClass,w=e.wrapperStyle,P=e.rtl,S=this.state,W=S.translate,O=S.dragging,x=S.leftArrowVisible,C=S.rightArrowVisible,A=this.selected,_=this.mounted;if(!l||!l.length)return null;var V=!_||this.isArrowsVisible(),D=i({},o.defaultMenuStyle,h),T=i({},o.defaultWrapperStyle,w),k=i({},o.defaultProps.itemStyle,m),E={className:t,disabledClass:n};return a.createElement("div",{className:v,style:D,onWheel:this.handleWheel},r&&a.createElement(u.ArrowWrapper,i({},E,{isDisabled:!V||!x,onClick:this.handleArrowClick}),r),a.createElement("div",{className:b,style:T,ref:this.setWrapperRef,onMouseDown:this.handleDragStart,onTouchStart:this.handleDragStart,onTouchEnd:this.handleDragStop,onMouseMove:this.handleDrag,onTouchMove:this.handleDrag},a.createElement(u.InnerWrapper,{data:l,translate:W,dragging:O,mounted:_,transition:_?I:0,selected:A,setRef:this.setRef,setMenuInnerRef:this.setMenuInnerRef,onClick:this.onItemClick,innerWrapperStyle:f,innerWrapperClass:c,itemStyle:k,itemClass:p,itemClassActive:g,inertiaScrolling:d,useButtonRole:y,rtl:P})),s&&a.createElement(u.ArrowWrapper,i({},E,{isDisabled:!V||!C,onClick:this.handleArrowClickRight}),s))},t.defaultProps=o.defaultProps,t}(a.Component);t.ScrollMenu=d,t.default=d;},function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0});t.notUndefOrNull=function(e){return void 0!==e&&null!==e};t.getClientRect=function(e){if(!e||!e.getBoundingClientRect||"function"!=typeof e.getBoundingClientRect)return {width:0,x:0,x2:0};var t=e.getBoundingClientRect(),n=t.left,r=void 0===n?0:n,i=t.width,s=void 0===i?0:i,a=t.right;return {width:s,x:+r,x2:+(void 0===a?0:a)}};t.formatTranslate=function(e){return +e.toFixed(0)};var r=function(e){return "number"==typeof e&&!isNaN(+e)};t.translateIsValid=r;t.validateTranslate=function(e,t){return r(e)?+e:t};t.testPassiveEventSupport=function(){var e=!1;try{var t={get passive(){return e=!0,!1}};window.addEventListener("testPassiveEventSupport",t,t),window.removeEventListener("testPassiveEventSupport",t,t);}catch(t){e=!1;}return e};},function(e,t,n){var r=this&&this.__extends||function(){var e=function(t,n){return (e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t;}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);})(t,n)};return function(t,n){function r(){this.constructor=t;}e(t,n),t.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r);}}(),i=this&&this.__assign||function(){return (i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)},s=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var a=s(n(0)),o=n(1),l={disabledClass:o.defaultProps.arrowDisabledClass},u=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return r(t,e),t.prototype.render=function(){var e=this.props,t=e.isDisabled,n=e.className,r=e.disabledClass,i=e.onClick,s=e.children,o=n+" "+(t?r:"");return a.default.createElement("div",{className:o,onClick:function(){return i()}},a.default.cloneElement(s,s.props))},t.defaultProps=l,t}(a.default.PureComponent);t.ArrowWrapper=u,t.innerStyle=function(e){var t=e.translate,n=e.dragging,r=e.mounted,i=e.transition,s=e.inertiaScrolling;return {transform:"translate3d("+(e.rtl?-t:t)+"px, 0, 0)",transition:"transform "+(n||!r?"0":i)+"s"+(s?" ease-out":""),width:"9900px"}};var d=function(e){function n(t){var n=e.call(this,t)||this;return n.setMenuInnerRef=function(e){(0, n.props.setMenuInnerRef)({menuInner:{key:"menuInner",elem:e}});},n.setRef=function(e,t,r,i){var s;(0, n.props.setRef)(((s={})[e]={index:r,key:t,elem:i},s));},n.state={data:[],items:[],selected:""},n}return r(n,e),n.getDerivedStateFromProps=function(e,t){return t.data!==e.data||t.selected!==e.selected?{data:e.data,items:n.setItems(e.data,e.selected,e.onClick),selected:e.selected}:null},n.prototype.render=function(){var e=this,n=this.props,r=n.translate,s=n.dragging,o=n.mounted,l=n.transition,u=n.innerWrapperStyle,d=n.innerWrapperClass,f=n.itemStyle,c=n.itemClass,m=n.itemClassActive,p=n.inertiaScrolling,g=n.useButtonRole,h=n.rtl,v=t.innerStyle({dragging:s,inertiaScrolling:p,mounted:o,rtl:h,transition:l,translate:r}),I=i({},v,u);return a.default.createElement("div",{className:d,style:I,ref:function(t){return e.setMenuInnerRef(t)}},this.state.items.map(function(t,n){return a.default.createElement("div",{ref:function(r){return e.setRef("menuitem-"+n,String(t.key||""),n,r)},className:c+" "+(t.props.selected?m:""),key:"menuItem-"+t.key,style:f,onClick:t.props.onClick(),tabIndex:0,role:g?"button":""},t)}))},n.defaultProps={data:[],dragging:!0,mounted:!1,selected:o.defaultProps.selected,transition:o.defaultProps.transition,translate:o.defaultProps.translate},n.isElementActive=function(e,t){return String(e)===String(t)},n.setItems=function(e,t,r){return e.map(function(e){var i=e.props.onClick,s=void 0===i?function(){return !1}:i,o={onClick:function(){return n.forwardClickHandler(e.key,s,r)},selected:n.isElementActive(e.key,t)};return a.default.cloneElement(e,o)})},n.forwardClickHandler=function(e,t,n){return void 0===t&&(t=function(){return !1}),function(){t(),n(e);}},n}(a.default.PureComponent);t.InnerWrapper=d;}]);
});

var ScrollMenu = unwrapExports(build);

function _templateObject2$E() {
  var data = taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\twidth: 13px;\n\theight: 26px;\n\n\talign-items: center;\n\tjustify-content: center;\n\n\tmargin-right: ", ";\n\tmargin-left: ", ";\n\n\tcursor: pointer;\n\ttext-align: center;\n\ttext-transform: uppercase;\n"]);

  _templateObject2$E = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1H() {
  var data = taggedTemplateLiteralLoose(["\n\t", "\n\t.menu-item-wrapper:focus {\n\t\toutline: none !important;\n\t}\n\n\t.scroll-menu-arrow--disabled i {\n\t\tcolor: ", ";\n\t\tcursor: default;\n\t}\n"]);

  _templateObject$1H = function _templateObject() {
    return data;
  };

  return data;
}

var Arrow = function Arrow(_ref) {
  var side = _ref.side,
      iconColor = _ref.iconColor;
  return React.createElement(ArrowWrapper, {
    side: side
  }, React.createElement(Icon$1, {
    icon: side === 'left' ? 'select-left' : 'select-right',
    color: iconColor
  }));
};

var Carousel = function Carousel(_ref2) {
  var data = _ref2.data,
      arrowsColor = _ref2.arrowsColor,
      arrowsColorDisabled = _ref2.arrowsColorDisabled,
      borderColor = _ref2.borderColor,
      props = objectWithoutPropertiesLoose(_ref2, ["data", "arrowsColor", "arrowsColorDisabled", "borderColor"]);

  return React.createElement("div", null, React.createElement(ScrollMenuContainer, {
    arrowsColorDisabled: arrowsColorDisabled,
    borderColor: borderColor
  }, React.createElement(ScrollMenu, _extends_1({
    data: data,
    alignCenter: false,
    arrowLeft: React.createElement(Arrow, {
      side: "left",
      iconColor: arrowsColor
    }),
    arrowRight: React.createElement(Arrow, {
      side: "right",
      iconColor: arrowsColor
    }),
    scrollBy: 1,
    hideSingleArrow: true,
    wheel: false
  }, props))));
};

var ScrollMenuContainer = styled.div(_templateObject$1H(), function (_ref3) {
  var borderColor = _ref3.borderColor;
  return borderColor && "\n\tborder: 2px solid " + borderColor + ";\n\tbox-sizing: border-box;\n\tborder-radius: 4px;\n\t\tpadding: 0 14px;\n\t";
}, function (_ref4) {
  var arrowsColorDisabled = _ref4.arrowsColorDisabled;
  return arrowsColorDisabled + " !important";
});
var ArrowWrapper = styled.div(_templateObject2$E(), function (_ref5) {
  var side = _ref5.side;
  return side === 'left' ? '6px' : '0';
}, function (_ref6) {
  var side = _ref6.side;
  return side === 'right' ? '6px' : '0';
});
ArrowWrapper.displayName = 'ArrowWrapper';
Arrow.defaultProps = {
  iconColor: theme.colors.mediumGray
};
Arrow.propTypes = {
  side: PropTypes.string.isRequired,
  iconColor: PropTypes.string
};
Carousel.defaultProps = {
  data: undefined,
  arrowsColor: theme.colors.mediumGray,
  arrowsColorDisabled: theme.colors.strokeGray,
  borderColor: undefined
};
Carousel.propTypes = {
  /** children components that will be inside carousel */
  data: PropTypes.arrayOf(PropTypes.node),

  /** carousel arrows color */
  arrowsColor: PropTypes.string,

  /** carousel arrows color when disabled*/
  arrowsColorDisabled: PropTypes.string,

  /** carousel border color */
  borderColor: PropTypes.string
};

export { Button$1 as Button, IconButton, ButtonLink, TopButton, SelectButton, SelectGroupButton, GenerateButton, SquareButton, Navbar, Tabs, SideNav, AnchorMenu, Block, BlockWrapper, BlockBar, Span, Modal$1 as Modal, FullScreenModal, ErrorModal, ConfirmationModal, HelpTooltip, StyledTooltip, Tooltip, TooltipExample, Pagination$1 as Pagination, Input$1 as Input, InputField, InputFile, TextArea$1 as TextArea, Toggle, Checkbox$1 as Checkbox, Radio, Tag, InputGroup, InputPassword, InputRange, NumberSpinner, Error$1 as Error, Select$1 as Select, Collapse$1 as Collapse, ExpandableSection, DatePicker, ColorPicker, ColorDisplayer, TimePicker, TimePickerGroup, Rating, RatingBox, Icon$1 as Icon, IconName, Toast$1 as Toast, ToastWrapper, notify, notifySuccess, notifyError, notifyWarning, CenteredGrid, Section, Text, BigHeader, Header$2 as Header, SubHeader, ButtonText, LabelText, ErrorText, TextTruncate, BreadCrumbs, Loading, LoadingModal, List, ListHeader, ListHeaderAction, ListRow, ListAddInfoWrapper, ListActionsWrapper, ListCard, ListExpandable, DndListRow, DndListContainer, DndHTML5Provider, EmptyState, StatusMessage, BulletState, Table$1 as Table, TableHeader, TableBody, PasswordStrengthMeter, Dropdown$1 as Dropdown, GradeDropdown, ColorLabel, Label$1 as Label, BottomLabel, TicketLabel, WidgetWeather, WidgetWeatherIcon, WidgetDate, WidgetDateShort, WidgetCardContainer, WidgetCard, DigitalClock, TimeWidget, ImageCard, PlaylistCard, TicketCard, CustomGrid, Row$2 as Row, Carousel, Ripple, theme as DefaultTheme, secondary as SecondaryTheme };
//# sourceMappingURL=index.es.js.map