(function (global, factory) {
	if (typeof define === "function" && define.amd) {
		define(['exports', 'react', 'classnames', 'styled-components'], factory);
	} else if (typeof exports !== "undefined") {
		factory(exports, require('react'), require('classnames'), require('styled-components'));
	} else {
		var mod = {
			exports: {}
		};
		factory(mod.exports, global.react, global.classnames, global.styledComponents);
		global.index = mod.exports;
	}
})(this, function (exports, _react, _classnames, _styledComponents) {
	'use strict';

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

	var _react2 = _interopRequireDefault(_react);

	var _classnames2 = _interopRequireDefault(_classnames);

	var _styledComponents2 = _interopRequireDefault(_styledComponents);

	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");
		}
	}

	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;
		};
	}();

	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 _templateObject = _taggedTemplateLiteral(['\n    position: relative;\n    display: block;\n    width: 2.66667rem;\n    min-width: 2.66667rem;\n    height: calc(1rem - 1px);\n    margin-bottom: 0;\n    margin-left: 0;\n    padding: 1px;\n    cursor: pointer;\n    outline: 0;\n    user-select: none;\n    background-color: var(--px-toggle__background-border--unchecked, #889aa5);\n    text-indent: -9999rem;\n    pointer-events: auto;\n    border-radius: 2rem;\n    transition: background 0.4s;\n    &:before {\n      border-radius: 2rem;\n      transition: background 0.4s;\n    }\n    &:after {\n      position: absolute;\n      display: block;\n      content: "";\n    }\n    &:before {\n      position: absolute;\n      display: block;\n      content: "";\n      top: 1px;\n      right: 1px;\n      bottom: 1px;\n      left: 1px;\n      background-color: var(--px-toggle__background--unchecked, #d8e0e5);\n    }\n    &:hover {\n      &:before {\n        background-color: var(--px-toggle__background--unchecked--hover, #b6c3cc);\n      }\n      background-color: var(--px-toggle__background-border--unchecked--hover, #677e8c);\n    }\n    &:active {\n      &:before {\n        background-color: var(--px-toggle__background--unchecked--pressed, #748b99);\n      }\n      background-color: var(--px-toggle__background-border--unchecked-pressed, #4f6472);\n    }\n    &:after {\n      top: -3px;\n      left: -1px;\n      height: 1.33333rem;\n      width: 1.33333rem;\n      border: 1px solid var(--px-toggle__switch-border, #889aa5);\n      border-radius: 50%;\n      box-shadow: 0 1px 2px var(--px-toggle__switch-shadow-color, rgba(0, 0, 0, 0.15));\n      background-color: var(--px-toggle__switch, #fff);\n      transition: margin 0.4s, background 0.4s, border-color 0.4s;\n    }\n    &:hover:after {\n      background-color: var(--px-toggle__switch--hover, #c5d1d8);\n      border: 1px solid var(--px-toggle__switch-border--hover, #889aa5);\n    }\n    &:active:after {\n      background-color: var(--px-toggle__switch--pressed, #96a8b2);\n      border: 1px solid var(--px-toggle__switch-border--pressed, #889aa5);\n    }\n\t\t', '\n\t\t\n\n\t\t', '\n\t\t', '\n\t\t', '\n}\n'], ['\n    position: relative;\n    display: block;\n    width: 2.66667rem;\n    min-width: 2.66667rem;\n    height: calc(1rem - 1px);\n    margin-bottom: 0;\n    margin-left: 0;\n    padding: 1px;\n    cursor: pointer;\n    outline: 0;\n    user-select: none;\n    background-color: var(--px-toggle__background-border--unchecked, #889aa5);\n    text-indent: -9999rem;\n    pointer-events: auto;\n    border-radius: 2rem;\n    transition: background 0.4s;\n    &:before {\n      border-radius: 2rem;\n      transition: background 0.4s;\n    }\n    &:after {\n      position: absolute;\n      display: block;\n      content: "";\n    }\n    &:before {\n      position: absolute;\n      display: block;\n      content: "";\n      top: 1px;\n      right: 1px;\n      bottom: 1px;\n      left: 1px;\n      background-color: var(--px-toggle__background--unchecked, #d8e0e5);\n    }\n    &:hover {\n      &:before {\n        background-color: var(--px-toggle__background--unchecked--hover, #b6c3cc);\n      }\n      background-color: var(--px-toggle__background-border--unchecked--hover, #677e8c);\n    }\n    &:active {\n      &:before {\n        background-color: var(--px-toggle__background--unchecked--pressed, #748b99);\n      }\n      background-color: var(--px-toggle__background-border--unchecked-pressed, #4f6472);\n    }\n    &:after {\n      top: -3px;\n      left: -1px;\n      height: 1.33333rem;\n      width: 1.33333rem;\n      border: 1px solid var(--px-toggle__switch-border, #889aa5);\n      border-radius: 50%;\n      box-shadow: 0 1px 2px var(--px-toggle__switch-shadow-color, rgba(0, 0, 0, 0.15));\n      background-color: var(--px-toggle__switch, #fff);\n      transition: margin 0.4s, background 0.4s, border-color 0.4s;\n    }\n    &:hover:after {\n      background-color: var(--px-toggle__switch--hover, #c5d1d8);\n      border: 1px solid var(--px-toggle__switch-border--hover, #889aa5);\n    }\n    &:active:after {\n      background-color: var(--px-toggle__switch--pressed, #96a8b2);\n      border: 1px solid var(--px-toggle__switch-border--pressed, #889aa5);\n    }\n\t\t', '\n\t\t\n\n\t\t', '\n\t\t', '\n\t\t', '\n}\n']),
	    _templateObject2 = _taggedTemplateLiteral(['\n\t\t\tcursor: not-allowed;\n\t\t\tbackground-color: var(--px-toggle__background-border--unchecked--disabled, rgba(0, 0, 0, 0.2));\n\t\t\tpointer-events: none;\n\t\t'], ['\n\t\t\tcursor: not-allowed;\n\t\t\tbackground-color: var(--px-toggle__background-border--unchecked--disabled, rgba(0, 0, 0, 0.2));\n\t\t\tpointer-events: none;\n\t\t']),
	    _templateObject3 = _taggedTemplateLiteral(['\n\t\t\twidth: 5.33333rem;\n\t\t\tmin-width: 5.33333rem;\n\t\t\theight: 2rem;\n\t\t\t&:after {\n\t\t\t\ttop: -.33333rem;\n\t\t\t\tleft: -.06667rem;\n\t\t\t\theight: calc(2.66667rem);\n\t\t\t\twidth: calc(2.66667rem);\n\t\t\t}\n\t\t'], ['\n\t\t\twidth: 5.33333rem;\n\t\t\tmin-width: 5.33333rem;\n\t\t\theight: 2rem;\n\t\t\t&:after {\n\t\t\t\ttop: -.33333rem;\n\t\t\t\tleft: -.06667rem;\n\t\t\t\theight: calc(2.66667rem);\n\t\t\t\twidth: calc(2.66667rem);\n\t\t\t}\n\t\t']),
	    _templateObject4 = _taggedTemplateLiteral(['\n\t\t\twidth: 4rem;\n\t\t\tmin-width: 4rem;\n\t\t\theight: 1.33333rem;\n\t\t\t&:after {\n\t\t\t\ttop: -.33333rem;\n\t\t\t\tleft: -.06667rem;\n\t\t\t\theight: 2rem;\n\t\t\t\twidth: 2rem;\n\t\t\t}\n\t\t'], ['\n\t\t\twidth: 4rem;\n\t\t\tmin-width: 4rem;\n\t\t\theight: 1.33333rem;\n\t\t\t&:after {\n\t\t\t\ttop: -.33333rem;\n\t\t\t\tleft: -.06667rem;\n\t\t\t\theight: 2rem;\n\t\t\t\twidth: 2rem;\n\t\t\t}\n\t\t']),
	    _templateObject5 = _taggedTemplateLiteral(['\n\t\t\twidth: 2rem;\n\t\t\tmin-width: 2rem;\n\t\t\theight: calc(.66667rem + 1px);\n\t\t\t&:after {\n\t\t\t\ttop: -2px;\n\t\t\t\tleft: 0;\n\t\t\t\theight: 1rem;\n\t\t\t\twidth: 1rem;\n\t\t\t}\n\t\t'], ['\n\t\t\twidth: 2rem;\n\t\t\tmin-width: 2rem;\n\t\t\theight: calc(.66667rem + 1px);\n\t\t\t&:after {\n\t\t\t\ttop: -2px;\n\t\t\t\tleft: 0;\n\t\t\t\theight: 1rem;\n\t\t\t\twidth: 1rem;\n\t\t\t}\n\t\t']),
	    _templateObject6 = _taggedTemplateLiteral(['\n    position: absolute !important;\n    overflow: hidden !important;\n    width: 1px !important;\n    height: 1px !important;\n    margin: -1px !important;\n    clip: rect(0 0 0 0) !important;\n\t\t\n\t\t&:disabled, \n\t\t&:disabled + label {\n\t\t\t\n\t\t\tbackground-color: var(--px-toggle__background-border--unchecked--disabled, rgba(0, 0, 0, 0.2));\n  \t\tpointer-events: none;\n\t\t\t\n\t\t\t&:after{\n        background-color: var(--px-toggle__switch--disabled, #fff);\n    \t}\n\t\t\t&:before{\n\t\t\t\t\tbackground-color: var(--px-toggle__background--unchecked--disabled, #fff);\n\t\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t}\n\t\t&:checked:disabled + label{\n\t\t\tbackground-color: var(--px-toggle__background--checked--disabled, rgba(0, 0, 0, 0.2));\n\t\t\t&:after{\n\t\t\t\tbox-shadow: none;\n\t  \t\tbackground-color: var(--px-toggle__switch--disabled, white);\n\t\t\t\tborder-width: 1px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: var(--px-toggle__switch-border--disabled, rgba(0, 0, 0, 0.2));\n\t\t\t}\n\t\t\t&:before{\n\t\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n    &:checked + label {\n\t\t\tbackground-color: var(--px-toggle__background--checked, #007acc);\n\t\t\t&:before {\n\t\t\t\t\tbackground-color: var(--px-toggle__background--checked, #007acc);\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\t\tbackground-color: var(--px-toggle__background--checked--hover, #005c99);\n\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tbackground-color: var(--px-toggle__background--checked--hover, #005c99);\n\t\t\t\t\t}\n\t\t\t}\n\t\t\t&:active {\n\t\t\t\t\tbackground-color: var(--px-toggle__background--checked--pressed, #003d66);\n\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tbackground-color: var(--px-toggle__background--checked--pressed, #003d66);\n\t\t\t\t\t}\n\t\t\t}\n\t\t\t&:after {\n\t\t\t\t\tmargin-left: 1.467rem;\n\t\t\t}\n\t\t\t', '\n\t\t\t', '\n\t\t\t', '\n    }\n'], ['\n    position: absolute !important;\n    overflow: hidden !important;\n    width: 1px !important;\n    height: 1px !important;\n    margin: -1px !important;\n    clip: rect(0 0 0 0) !important;\n\t\t\n\t\t&:disabled, \n\t\t&:disabled + label {\n\t\t\t\n\t\t\tbackground-color: var(--px-toggle__background-border--unchecked--disabled, rgba(0, 0, 0, 0.2));\n  \t\tpointer-events: none;\n\t\t\t\n\t\t\t&:after{\n        background-color: var(--px-toggle__switch--disabled, #fff);\n    \t}\n\t\t\t&:before{\n\t\t\t\t\tbackground-color: var(--px-toggle__background--unchecked--disabled, #fff);\n\t\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t}\n\t\t&:checked:disabled + label{\n\t\t\tbackground-color: var(--px-toggle__background--checked--disabled, rgba(0, 0, 0, 0.2));\n\t\t\t&:after{\n\t\t\t\tbox-shadow: none;\n\t  \t\tbackground-color: var(--px-toggle__switch--disabled, white);\n\t\t\t\tborder-width: 1px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: var(--px-toggle__switch-border--disabled, rgba(0, 0, 0, 0.2));\n\t\t\t}\n\t\t\t&:before{\n\t\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n    &:checked + label {\n\t\t\tbackground-color: var(--px-toggle__background--checked, #007acc);\n\t\t\t&:before {\n\t\t\t\t\tbackground-color: var(--px-toggle__background--checked, #007acc);\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\t\tbackground-color: var(--px-toggle__background--checked--hover, #005c99);\n\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tbackground-color: var(--px-toggle__background--checked--hover, #005c99);\n\t\t\t\t\t}\n\t\t\t}\n\t\t\t&:active {\n\t\t\t\t\tbackground-color: var(--px-toggle__background--checked--pressed, #003d66);\n\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tbackground-color: var(--px-toggle__background--checked--pressed, #003d66);\n\t\t\t\t\t}\n\t\t\t}\n\t\t\t&:after {\n\t\t\t\t\tmargin-left: 1.467rem;\n\t\t\t}\n\t\t\t', '\n\t\t\t', '\n\t\t\t', '\n    }\n']),
	    _templateObject7 = _taggedTemplateLiteral(['\n\t\t\t\twidth: 5.33333rem;\n\t\t\t\tmin-width: 5.33333rem;\n\t\t\t\theight: 2rem;\n\t\t\t\t&:after {\n\t\t\t\t\tmargin-left: 2.8rem;\n\t\t\t\t\ttop: -.33333rem;\n\t\t\t\t\tleft: -.06667rem;\n\t\t\t\t\theight: calc(2.66667rem);\n\t\t\t\t\twidth: calc(2.66667rem);\n\t\t\t\t}\n\t\t\t'], ['\n\t\t\t\twidth: 5.33333rem;\n\t\t\t\tmin-width: 5.33333rem;\n\t\t\t\theight: 2rem;\n\t\t\t\t&:after {\n\t\t\t\t\tmargin-left: 2.8rem;\n\t\t\t\t\ttop: -.33333rem;\n\t\t\t\t\tleft: -.06667rem;\n\t\t\t\t\theight: calc(2.66667rem);\n\t\t\t\t\twidth: calc(2.66667rem);\n\t\t\t\t}\n\t\t\t']),
	    _templateObject8 = _taggedTemplateLiteral(['\n\t\t\t\twidth: 4rem;\n\t\t\t\tmin-width: 4rem;\n\t\t\t\theight: 1.33333rem;\n\t\t\t\t&:after {\n\t\t\t\t\tmargin-left: 2.133rem;\t\t\t\t\t\n\t\t\t\t\ttop: -.33333rem;\n\t\t\t\t\tleft: -.06667rem;\n\t\t\t\t\theight: 2rem;\n\t\t\t\t\twidth: 2rem;\n\t\t\t\t}\n\t\t\t'], ['\n\t\t\t\twidth: 4rem;\n\t\t\t\tmin-width: 4rem;\n\t\t\t\theight: 1.33333rem;\n\t\t\t\t&:after {\n\t\t\t\t\tmargin-left: 2.133rem;\t\t\t\t\t\n\t\t\t\t\ttop: -.33333rem;\n\t\t\t\t\tleft: -.06667rem;\n\t\t\t\t\theight: 2rem;\n\t\t\t\t\twidth: 2rem;\n\t\t\t\t}\n\t\t\t']),
	    _templateObject9 = _taggedTemplateLiteral(['\n\t\t\t'], ['\n\t\t\t']);

	function _taggedTemplateLiteral(strings, raw) {
		return Object.freeze(Object.defineProperties(strings, {
			raw: {
				value: Object.freeze(raw)
			}
		}));
	}

	var ToggleLabel = _styledComponents2.default.label(_templateObject, function (props) {
		return props.disabled && (0, _styledComponents.css)(_templateObject2);
	}, function (props) {
		return props.size === 'huge' && (0, _styledComponents.css)(_templateObject3);
	}, function (props) {
		return props.size === 'large' && (0, _styledComponents.css)(_templateObject4);
	}, function (props) {
		return props.size === 'small' && (0, _styledComponents.css)(_templateObject5);
	});
	var ToggleInputStyle = _styledComponents2.default.input(_templateObject6, function (props) {
		return props.size === 'huge' && (0, _styledComponents.css)(_templateObject7);
	}, function (props) {
		return props.size === 'large' && (0, _styledComponents.css)(_templateObject8);
	}, function (props) {
		return props.size === 'small' && (0, _styledComponents.css)(_templateObject9);
	});

	var ToggleInput = function (_React$Component) {
		_inherits(ToggleInput, _React$Component);

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

			return _possibleConstructorReturn(this, (ToggleInput.__proto__ || Object.getPrototypeOf(ToggleInput)).call(this, props));
		}

		_createClass(ToggleInput, [{
			key: '_handleClick',
			value: function _handleClick(e) {
				if (!this.props.disabled && this.props.onClick) {
					this.props.onClick(e);
				}
			}
		}, {
			key: 'render',
			value: function render() {
				var _props = this.props,
				    checked = _props.checked,
				    name = _props.name,
				    value = _props.value,
				    id = _props.id,
				    disabled = _props.disabled,
				    className = _props.className,
				    size = _props.size;

				var classes = (0, _classnames2.default)('toggle', { 'toggle--disabled': disabled });
				var inputClasses = (0, _classnames2.default)({ 'toggle--disabled': disabled });
				var labelClasses = (0, _classnames2.default)({ 'toggle--disabled': disabled });
				return _react2.default.createElement(
					'div',
					{ className: classes },
					_react2.default.createElement(ToggleInputStyle, {
						id: id,
						size: size,
						name: name,
						value: value,
						type: 'checkbox',
						checked: checked,
						disabled: disabled }),
					_react2.default.createElement(ToggleLabel, {
						disabled: disabled,
						size: size,
						onClick: this._handleClick.bind(this),
						classNames: labelClasses,
						'for': id })
				);
			}
		}]);

		return ToggleInput;
	}(_react2.default.Component);

	ToggleInput.displayName = 'ToggleInput';
	ToggleInput.defaultProps = {
		id: 'toggleInput',
		disabled: null,
		checked: null,
		value: null,
		name: null
	};

	exports.default = ToggleInput;
});