ak-badge - npm Package Compare versions

Comparing version 1.0.2 to 2.0.0

CHANGELOG.md

@@ -1,6 +0,28 @@
-<a name="1.0.2"></a>
-## 1.0.2 (2016-11-09)
+<a name="2.0.0"></a>
+# 2.0.0 (2016-11-22)
 
 
 
+<a name="ak-badge@2.0.0"></a>
+# ak-badge@2.0.0 (2016-11-22)
+
+
+### Bug Fixes
+
+* **docs:** support docs for JSX files and add missing JSDoc class annotations ([0204a7e](https://bitbucket.org/atlassian/atlaskit/commits/0204a7e))
+
+
+### Code Refactoring
+
+* **component:** migrate badge from skate to react ([3677995](https://bitbucket.org/atlassian/atlaskit/commits/3677995))
+
+
+### BREAKING CHANGES
+
+* component: web component is no longer exported, 'change' event has been replaced with
+
+onValueUpdated React prop/handler
+
+
+
 <a name="ak-badge@1.0.2"></a>
@@ -51,2 +73,7 @@ ## ak-badge@1.0.2 (2016-11-09)
 
+### Features
+
+* date-calendar props added & tests ([c01dc70](https://bitbucket.org/atlassian/atlaskit/commits/c01dc70))
+
+
 ### BREAKING CHANGES
@@ -53,0 +80,0 @@

dist/bundle-cjs.js

@@ -68,9 +68,9 @@ module.exports = /******/
 function(module, exports, __webpack_require__) {
+    module.exports = __webpack_require__(3);
+}, /* 1 */
+, /* 2 */
+, /* 3 */
+/***/
+function(module, exports, __webpack_require__) {
     "use strict";
-    function _interopRequireWildcard(obj) {
-        if (obj && obj.__esModule) return obj;
-        var newObj = {};
-        if (null != obj) for (var key in obj) Object.prototype.hasOwnProperty.call(obj, key) && (newObj[key] = obj[key]);
-        return newObj.default = obj, newObj;
-    }
     function _interopRequireDefault(obj) {
@@ -83,108 +83,155 @@ return obj && obj.__esModule ? obj : {
         value: !0
-    }), exports.events = void 0;
-    var _hasOwn = Object.prototype.hasOwnProperty, _forOwn = function(object, iterator) {
-        for (var prop in object) _hasOwn.call(object, prop) && iterator(object[prop], prop);
-    }, _renderArbitrary = function _renderArbitrary(child) {
-        var type = typeof child;
-        "number" === type || "string" === type || "object" === type && child instanceof String ? _skatejs.vdom.text(child) : "function" === type && child.__jsxDOMWrapper ? child() : Array.isArray(child) ? child.forEach(_renderArbitrary) : "object" === type && "[object Object]" === String(child) && _forOwn(child, _renderArbitrary);
-    }, _skatejs = __webpack_require__(3), _classnames = __webpack_require__(4), _classnames2 = _interopRequireDefault(_classnames), _akutilCommon = __webpack_require__(5), _shadow = __webpack_require__(6), _shadow2 = _interopRequireDefault(_shadow), _events = __webpack_require__(8), events = _interopRequireWildcard(_events), APPEARANCE_ENUM = {
+    });
+    var _getPrototypeOf = __webpack_require__(4), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(5), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(6), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(7), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(8), _inherits3 = _interopRequireDefault(_inherits2), _classnames = __webpack_require__(9), _classnames2 = _interopRequireDefault(_classnames), _react = __webpack_require__(10), _react2 = _interopRequireDefault(_react), _style = __webpack_require__(11), _style2 = _interopRequireDefault(_style), APPEARANCE_ENUM = {
         values: [ "default", "primary", "important", "added", "removed" ],
-        missingDefault: "default",
-        invalidDefault: "default"
-    }, definition = {
-        render: function(elem) {
-            var displayValue = function() {
-                return elem.value < 0 ? 0 : elem.max > 0 && elem.value > elem.max ? elem.max + "+" : elem.value === 1 / 0 ? "∞" : elem.value;
-            }(), classes = (0, _classnames2.default)([ _shadow2.default.locals.value, _shadow2.default.locals[elem.appearance] ]);
-            return _skatejs.vdom.elementOpen("span", null, null, "class", "container"), _skatejs.vdom.elementOpen("style"), 
-            _renderArbitrary(_shadow2.default.toString()), _skatejs.vdom.elementClose("style"), 
-            _skatejs.vdom.elementOpen("span", null, null, "class", classes), _renderArbitrary(displayValue), 
-            _skatejs.vdom.elementClose("span"), _skatejs.vdom.elementClose("span");
-        },
-        updated: function(elem, prev) {
-            return prev && prev.value !== elem.value && (0, _skatejs.emit)(elem, events.change, {
-                detail: {
-                    oldValue: prev.value,
-                    newValue: elem.value
-                }
-            }), _skatejs.Component.updated(elem, prev);
-        },
-        props: {
-            /**
-	     * @description The value displayed within the badge.
-	     * @memberof AkBadge
-	     * @instance
-	     * @type {number}
-	     * @default 0
-	     */
-            value: _skatejs.prop.number({
-                attribute: !0,
-                default: 0
-            }),
-            /**
-	     * @description The max value to display.
-	     * If value is 100, and max is 50, "50+" will be displayed
-	     * @memberof AkBadge
-	     * @instance
-	     * @type {number}
-	     * @default 99
-	     */
-            max: _skatejs.prop.number({
-                attribute: !0,
-                default: 99
-            }),
-            /**
-	     * @description Affects the visual style of the badge.
-	     * Allowed values are: 'default', 'primary', 'important', 'added', 'removed'.
-	     * @memberof AkBadge
-	     * @instance
-	     * @type {string}
-	     * @default default
-	     */
-            appearance: (0, _akutilCommon.enumeration)(APPEARANCE_ENUM)({
-                attribute: !0
-            })
+        defaultValue: "default"
+    }, Badge = function(_PureComponent) {
+        function Badge() {
+            return (0, _classCallCheck3.default)(this, Badge), (0, _possibleConstructorReturn3.default)(this, (Badge.__proto__ || (0, 
+            _getPrototypeOf2.default)(Badge)).apply(this, arguments));
         }
-    };
-    exports.default = (0, _skatejs.define)("ak-badge", definition), exports.events = events;
-}, /* 1 */
-, /* 2 */
-, /* 3 */
-/***/
-function(module, exports) {
-    module.exports = require("skatejs");
+        return (0, _inherits3.default)(Badge, _PureComponent), (0, _createClass3.default)(Badge, [ {
+            key: "componentWillUpdate",
+            // triggered on prop/state change, but not on first render
+            value: function(nextProps) {
+                var _props = this.props, onValueUpdated = _props.onValueUpdated, oldValue = _props.value, newValue = nextProps.value;
+                onValueUpdated && newValue !== oldValue && onValueUpdated({
+                    oldValue: oldValue,
+                    newValue: newValue
+                });
+            }
+        }, {
+            key: "displayValue",
+            value: function() {
+                var _props2 = this.props, value = _props2.value, max = _props2.max;
+                return value < 0 ? 0 : max > 0 && value > max ? max + "+" : value === 1 / 0 ? "∞" : value;
+            }
+        }, {
+            key: "validAppearance",
+            value: function() {
+                var appearance = this.props.appearance, values = APPEARANCE_ENUM.values, defaultValue = APPEARANCE_ENUM.defaultValue;
+                return values.indexOf(appearance) !== -1 ? appearance : defaultValue;
+            }
+        }, {
+            key: "render",
+            value: function() {
+                return _react2.default.createElement("span", {
+                    className: _style2.default.root
+                }, _react2.default.createElement("span", {
+                    className: (0, _classnames2.default)([ _style2.default.value, _style2.default[this.validAppearance()] ])
+                }, this.displayValue().toString()));
+            }
+        } ], [ {
+            key: "propTypes",
+            get: function() {
+                return {
+                    /**
+	         * @description The value displayed within the badge.
+	         * @memberof AkBadge
+	         * @instance
+	         * @type {number}
+	         * @default 0
+	         */
+                    value: _react.PropTypes.number,
+                    /**
+	         * @description The max value to display.
+	         * If value is 100, and max is 50, "50+" will be displayed
+	         * @memberof AkBadge
+	         * @instance
+	         * @type {number}
+	         * @default 99
+	         */
+                    max: _react.PropTypes.number,
+                    /**
+	         * @description Affects the visual style of the badge.
+	         * Allowed values are: 'default', 'primary', 'important', 'added', 'removed'.
+	         * @memberof AkBadge
+	         * @instance
+	         * @type {string}
+	         * @default default
+	         */
+                    appearance: _react.PropTypes.oneOf(APPEARANCE_ENUM.values),
+                    /**
+	         * @description Handler function to be called when the 'updated' prop is changed.
+	         * @memberof AkBadge
+	         * @instance
+	         * @type {function}
+	         */
+                    onValueUpdated: _react.PropTypes.func
+                };
+            }
+        }, {
+            key: "defaultProps",
+            get: function() {
+                return {
+                    value: 0,
+                    max: 99,
+                    appearance: APPEARANCE_ENUM.defaultValue
+                };
+            }
+        } ]), Badge;
+    }(_react.PureComponent);
+    exports.default = Badge;
 }, /* 4 */
 /***/
 function(module, exports) {
-    module.exports = require("classnames");
+    module.exports = require("babel-runtime/core-js/object/get-prototype-of");
 }, /* 5 */
 /***/
 function(module, exports) {
-    module.exports = require("akutil-common");
+    module.exports = require("babel-runtime/helpers/classCallCheck");
 }, /* 6 */
 /***/
+function(module, exports) {
+    module.exports = require("babel-runtime/helpers/createClass");
+}, /* 7 */
+/***/
+function(module, exports) {
+    module.exports = require("babel-runtime/helpers/possibleConstructorReturn");
+}, /* 8 */
+/***/
+function(module, exports) {
+    module.exports = require("babel-runtime/helpers/inherits");
+}, /* 9 */
+/***/
+function(module, exports) {
+    module.exports = require("classnames");
+}, /* 10 */
+/***/
+function(module, exports) {
+    module.exports = require("react");
+}, /* 11 */
+/***/
 function(module, exports, __webpack_require__) {
-    exports = module.exports = __webpack_require__(7)(), // imports
+    // style-loader: Adds some css to the DOM by adding a <style> tag
+    // load the styles
+    var content = __webpack_require__(12);
+    "string" == typeof content && (content = [ [ module.id, content, "" ] ]);
+    // add the styles to the DOM
+    __webpack_require__(14)(content, {});
+    content.locals && (module.exports = content.locals);
+}, /* 12 */
+/***/
+function(module, exports, __webpack_require__) {
+    exports = module.exports = __webpack_require__(13)(), // imports
     // module
-    exports.push([ module.id, ".gIx1yPKCVLDLrsZFjWp91,ak-badge{display:inline-block}.gIx1yPKCVLDLrsZFjWp91:not([defined]),ak-badge:not([defined]){display:none}:host{display:inline-block}:host(:not([defined])){display:none}.ijTcAcAZxkHj_XyMF7WOj{display:inline-block}._1XOjyz6nkYp0PwNm2_R5GN{border-radius:2em;display:inline-block;font-size:12px;font-weight:400;line-height:1;min-width:1px;padding:.16666667em .5em;text-align:center}.h4MwqeVnS3URyoNhqd_8p{background:#ebecf0;color:#42526e}._3m6YegzVE32UQC6u2al8qi{background:#0052cc;color:#fff}.Ky0Y9zBAheCic3aMGGJ1W{background:#ff5630;color:#fff}._2HkxMzs0MGI9iWTzp7zpWq{background:#e3fcef;color:#064}.VGziEGICtgeF8FIY3d0-f{background:#ffebe6;color:#bf2600}", "" ]), 
+    exports.push([ module.id, "._1eQzTdeGbqIWe_WROsHkkO{display:inline-block}.Yw_zm_VhTLL1R9aJ2MNlb{border-radius:2em;display:inline-block;font-size:12px;font-weight:400;line-height:1;min-width:1px;padding:.16666667em .5em;text-align:center}._6iGVg-VgMB7lkx5H42Mlu{background:#ebecf0;color:#42526e}._1bi2_7c3H90bAH8Pw4xwgU{background:#0052cc;color:#fff}._3kjVDacGCyZLvhB7sWqhiX{background:#ff5630;color:#fff}._19ukTzPJwVJQixg5_wz3_k{background:#e3fcef;color:#064}._1XyvUNNWjj746a67rD0MSo{background:#ffebe6;color:#bf2600}", "" ]), 
     // exports
     exports.locals = {
-        "ak-badge": "gIx1yPKCVLDLrsZFjWp91",
-        akBadge: "gIx1yPKCVLDLrsZFjWp91",
-        container: "ijTcAcAZxkHj_XyMF7WOj",
-        container: "ijTcAcAZxkHj_XyMF7WOj",
-        value: "_1XOjyz6nkYp0PwNm2_R5GN",
-        value: "_1XOjyz6nkYp0PwNm2_R5GN",
-        default: "h4MwqeVnS3URyoNhqd_8p",
-        default: "h4MwqeVnS3URyoNhqd_8p",
-        primary: "_3m6YegzVE32UQC6u2al8qi",
-        primary: "_3m6YegzVE32UQC6u2al8qi",
-        important: "Ky0Y9zBAheCic3aMGGJ1W",
-        important: "Ky0Y9zBAheCic3aMGGJ1W",
-        added: "_2HkxMzs0MGI9iWTzp7zpWq",
-        added: "_2HkxMzs0MGI9iWTzp7zpWq",
-        removed: "VGziEGICtgeF8FIY3d0-f",
-        removed: "VGziEGICtgeF8FIY3d0-f"
+        container: "_1eQzTdeGbqIWe_WROsHkkO",
+        container: "_1eQzTdeGbqIWe_WROsHkkO",
+        value: "Yw_zm_VhTLL1R9aJ2MNlb",
+        value: "Yw_zm_VhTLL1R9aJ2MNlb",
+        default: "_6iGVg-VgMB7lkx5H42Mlu",
+        default: "_6iGVg-VgMB7lkx5H42Mlu",
+        primary: "_1bi2_7c3H90bAH8Pw4xwgU",
+        primary: "_1bi2_7c3H90bAH8Pw4xwgU",
+        important: "_3kjVDacGCyZLvhB7sWqhiX",
+        important: "_3kjVDacGCyZLvhB7sWqhiX",
+        added: "_19ukTzPJwVJQixg5_wz3_k",
+        added: "_19ukTzPJwVJQixg5_wz3_k",
+        removed: "_1XyvUNNWjj746a67rD0MSo",
+        removed: "_1XyvUNNWjj746a67rD0MSo"
     };
-}, /* 7 */
+}, /* 13 */
 /***/
@@ -224,11 +271,146 @@ function(module, exports) {
     };
-}, /* 8 */
+}, /* 14 */
 /***/
-function(module, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", {
-        value: !0
-    });
-    // eslint-disable-next-line import/prefer-default-export
-    exports.change = "change";
+function(module, exports, __webpack_require__) {
+    function addStylesToDom(styles, options) {
+        for (var i = 0; i < styles.length; i++) {
+            var item = styles[i], domStyle = stylesInDom[item.id];
+            if (domStyle) {
+                domStyle.refs++;
+                for (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j](item.parts[j]);
+                for (;j < item.parts.length; j++) domStyle.parts.push(addStyle(item.parts[j], options));
+            } else {
+                for (var parts = [], j = 0; j < item.parts.length; j++) parts.push(addStyle(item.parts[j], options));
+                stylesInDom[item.id] = {
+                    id: item.id,
+                    refs: 1,
+                    parts: parts
+                };
+            }
+        }
+    }
+    function listToStyles(list) {
+        for (var styles = [], newStyles = {}, i = 0; i < list.length; i++) {
+            var item = list[i], id = item[0], css = item[1], media = item[2], sourceMap = item[3], part = {
+                css: css,
+                media: media,
+                sourceMap: sourceMap
+            };
+            newStyles[id] ? newStyles[id].parts.push(part) : styles.push(newStyles[id] = {
+                id: id,
+                parts: [ part ]
+            });
+        }
+        return styles;
+    }
+    function insertStyleElement(options, styleElement) {
+        var head = getHeadElement(), lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
+        if ("top" === options.insertAt) lastStyleElementInsertedAtTop ? lastStyleElementInsertedAtTop.nextSibling ? head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling) : head.appendChild(styleElement) : head.insertBefore(styleElement, head.firstChild), 
+        styleElementsInsertedAtTop.push(styleElement); else {
+            if ("bottom" !== options.insertAt) throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
+            head.appendChild(styleElement);
+        }
+    }
+    function removeStyleElement(styleElement) {
+        styleElement.parentNode.removeChild(styleElement);
+        var idx = styleElementsInsertedAtTop.indexOf(styleElement);
+        idx >= 0 && styleElementsInsertedAtTop.splice(idx, 1);
+    }
+    function createStyleElement(options) {
+        var styleElement = document.createElement("style");
+        return styleElement.type = "text/css", insertStyleElement(options, styleElement), 
+        styleElement;
+    }
+    function createLinkElement(options) {
+        var linkElement = document.createElement("link");
+        return linkElement.rel = "stylesheet", insertStyleElement(options, linkElement), 
+        linkElement;
+    }
+    function addStyle(obj, options) {
+        var styleElement, update, remove;
+        if (options.singleton) {
+            var styleIndex = singletonCounter++;
+            styleElement = singletonElement || (singletonElement = createStyleElement(options)), 
+            update = applyToSingletonTag.bind(null, styleElement, styleIndex, !1), remove = applyToSingletonTag.bind(null, styleElement, styleIndex, !0);
+        } else obj.sourceMap && "function" == typeof URL && "function" == typeof URL.createObjectURL && "function" == typeof URL.revokeObjectURL && "function" == typeof Blob && "function" == typeof btoa ? (styleElement = createLinkElement(options), 
+        update = updateLink.bind(null, styleElement), remove = function() {
+            removeStyleElement(styleElement), styleElement.href && URL.revokeObjectURL(styleElement.href);
+        }) : (styleElement = createStyleElement(options), update = applyToTag.bind(null, styleElement), 
+        remove = function() {
+            removeStyleElement(styleElement);
+        });
+        return update(obj), function(newObj) {
+            if (newObj) {
+                if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) return;
+                update(obj = newObj);
+            } else remove();
+        };
+    }
+    function applyToSingletonTag(styleElement, index, remove, obj) {
+        var css = remove ? "" : obj.css;
+        if (styleElement.styleSheet) styleElement.styleSheet.cssText = replaceText(index, css); else {
+            var cssNode = document.createTextNode(css), childNodes = styleElement.childNodes;
+            childNodes[index] && styleElement.removeChild(childNodes[index]), childNodes.length ? styleElement.insertBefore(cssNode, childNodes[index]) : styleElement.appendChild(cssNode);
+        }
+    }
+    function applyToTag(styleElement, obj) {
+        var css = obj.css, media = obj.media;
+        if (media && styleElement.setAttribute("media", media), styleElement.styleSheet) styleElement.styleSheet.cssText = css; else {
+            for (;styleElement.firstChild; ) styleElement.removeChild(styleElement.firstChild);
+            styleElement.appendChild(document.createTextNode(css));
+        }
+    }
+    function updateLink(linkElement, obj) {
+        var css = obj.css, sourceMap = obj.sourceMap;
+        sourceMap && (// http://stackoverflow.com/a/26603875
+        css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */");
+        var blob = new Blob([ css ], {
+            type: "text/css"
+        }), oldSrc = linkElement.href;
+        linkElement.href = URL.createObjectURL(blob), oldSrc && URL.revokeObjectURL(oldSrc);
+    }
+    /*
+		MIT License http://www.opensource.org/licenses/mit-license.php
+		Author Tobias Koppers @sokra
+	*/
+    var stylesInDom = {}, memoize = function(fn) {
+        var memo;
+        return function() {
+            return "undefined" == typeof memo && (memo = fn.apply(this, arguments)), memo;
+        };
+    }, isOldIE = memoize(function() {
+        return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
+    }), getHeadElement = memoize(function() {
+        return document.head || document.getElementsByTagName("head")[0];
+    }), singletonElement = null, singletonCounter = 0, styleElementsInsertedAtTop = [];
+    module.exports = function(list, options) {
+        options = options || {}, // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
+        // tags it will allow on a page
+        "undefined" == typeof options.singleton && (options.singleton = isOldIE()), // By default, add <style> tags to the bottom of <head>.
+        "undefined" == typeof options.insertAt && (options.insertAt = "bottom");
+        var styles = listToStyles(list);
+        return addStylesToDom(styles, options), function(newList) {
+            for (var mayRemove = [], i = 0; i < styles.length; i++) {
+                var item = styles[i], domStyle = stylesInDom[item.id];
+                domStyle.refs--, mayRemove.push(domStyle);
+            }
+            if (newList) {
+                var newStyles = listToStyles(newList);
+                addStylesToDom(newStyles, options);
+            }
+            for (var i = 0; i < mayRemove.length; i++) {
+                var domStyle = mayRemove[i];
+                if (0 === domStyle.refs) {
+                    for (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j]();
+                    delete stylesInDom[domStyle.id];
+                }
+            }
+        };
+    };
+    var replaceText = function() {
+        var textStore = [];
+        return function(index, replacement) {
+            return textStore[index] = replacement, textStore.filter(Boolean).join("\n");
+        };
+    }();
 } ]);

dist/bundle-cjs.min.js

@@ -1,1 +0,1 @@
-module.exports=function(e){function n(a){if(t[a])return t[a].exports;var r=t[a]={exports:{},id:a,loaded:!1};return e[a].call(r.exports,r,r.exports,n),r.loaded=!0,r.exports}var t={};return n.m=e,n.c=t,n.p="",n(0)}([function(e,n,t){"use strict";function a(e){if(e&&e.__esModule)return e;var n={};if(null!=e)for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&(n[t]=e[t]);return n.default=e,n}function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.events=void 0;var o=Object.prototype.hasOwnProperty,i=function(e,n){for(var t in e)o.call(e,t)&&n(e[t],t)},l=function e(n){var t=typeof n;"number"===t||"string"===t||"object"===t&&n instanceof String?u.vdom.text(n):"function"===t&&n.__jsxDOMWrapper?n():Array.isArray(n)?n.forEach(e):"object"===t&&"[object Object]"===String(n)&&i(n,e)},u=t(3),d=t(4),p=r(d),c=t(5),s=t(6),f=r(s),m=t(8),v=a(m),y={values:["default","primary","important","added","removed"],missingDefault:"default",invalidDefault:"default"},g={render:function(e){var n=function(){return e.value<0?0:e.max>0&&e.value>e.max?e.max+"+":e.value===1/0?"∞":e.value}(),t=(0,p.default)([f.default.locals.value,f.default.locals[e.appearance]]);return u.vdom.elementOpen("span",null,null,"class","container"),u.vdom.elementOpen("style"),l(f.default.toString()),u.vdom.elementClose("style"),u.vdom.elementOpen("span",null,null,"class",t),l(n),u.vdom.elementClose("span"),u.vdom.elementClose("span")},updated:function(e,n){return n&&n.value!==e.value&&(0,u.emit)(e,v.change,{detail:{oldValue:n.value,newValue:e.value}}),u.Component.updated(e,n)},props:{value:u.prop.number({attribute:!0,default:0}),max:u.prop.number({attribute:!0,default:99}),appearance:(0,c.enumeration)(y)({attribute:!0})}};n.default=(0,u.define)("ak-badge",g),n.events=v},,,function(e,n){e.exports=require("skatejs")},function(e,n){e.exports=require("classnames")},function(e,n){e.exports=require("akutil-common")},function(e,n,t){n=e.exports=t(7)(),n.push([e.id,".gIx1yPKCVLDLrsZFjWp91,ak-badge{display:inline-block}.gIx1yPKCVLDLrsZFjWp91:not([defined]),ak-badge:not([defined]){display:none}:host{display:inline-block}:host(:not([defined])){display:none}.ijTcAcAZxkHj_XyMF7WOj{display:inline-block}._1XOjyz6nkYp0PwNm2_R5GN{border-radius:2em;display:inline-block;font-size:12px;font-weight:400;line-height:1;min-width:1px;padding:.16666667em .5em;text-align:center}.h4MwqeVnS3URyoNhqd_8p{background:#ebecf0;color:#42526e}._3m6YegzVE32UQC6u2al8qi{background:#0052cc;color:#fff}.Ky0Y9zBAheCic3aMGGJ1W{background:#ff5630;color:#fff}._2HkxMzs0MGI9iWTzp7zpWq{background:#e3fcef;color:#064}.VGziEGICtgeF8FIY3d0-f{background:#ffebe6;color:#bf2600}",""]),n.locals={"ak-badge":"gIx1yPKCVLDLrsZFjWp91",akBadge:"gIx1yPKCVLDLrsZFjWp91",container:"ijTcAcAZxkHj_XyMF7WOj",container:"ijTcAcAZxkHj_XyMF7WOj",value:"_1XOjyz6nkYp0PwNm2_R5GN",value:"_1XOjyz6nkYp0PwNm2_R5GN",default:"h4MwqeVnS3URyoNhqd_8p",default:"h4MwqeVnS3URyoNhqd_8p",primary:"_3m6YegzVE32UQC6u2al8qi",primary:"_3m6YegzVE32UQC6u2al8qi",important:"Ky0Y9zBAheCic3aMGGJ1W",important:"Ky0Y9zBAheCic3aMGGJ1W",added:"_2HkxMzs0MGI9iWTzp7zpWq",added:"_2HkxMzs0MGI9iWTzp7zpWq",removed:"VGziEGICtgeF8FIY3d0-f",removed:"VGziEGICtgeF8FIY3d0-f"}},function(e,n){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],n=0;n<this.length;n++){var t=this[n];t[2]?e.push("@media "+t[2]+"{"+t[1]+"}"):e.push(t[1])}return e.join("")},e.i=function(n,t){"string"==typeof n&&(n=[[null,n,""]]);for(var a={},r=0;r<this.length;r++){var o=this[r][0];"number"==typeof o&&(a[o]=!0)}for(r=0;r<n.length;r++){var i=n[r];"number"==typeof i[0]&&a[i[0]]||(t&&!i[2]?i[2]=t:t&&(i[2]="("+i[2]+") and ("+t+")"),e.push(i))}},e}},function(e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.change="change"}]);
+module.exports=function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){e.exports=r(3)},,,function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var a=r(4),o=n(a),i=r(5),u=n(i),s=r(6),l=n(s),f=r(7),c=n(f),p=r(8),d=n(p),h=r(9),v=n(h),b=r(10),m=n(b),g=r(11),y=n(g),_={values:["default","primary","important","added","removed"],defaultValue:"default"},x=function(e){function t(){return(0,u.default)(this,t),(0,c.default)(this,(t.__proto__||(0,o.default)(t)).apply(this,arguments))}return(0,d.default)(t,e),(0,l.default)(t,[{key:"componentWillUpdate",value:function(e){var t=this.props,r=t.onValueUpdated,n=t.value,a=e.value;r&&a!==n&&r({oldValue:n,newValue:a})}},{key:"displayValue",value:function(){var e=this.props,t=e.value,r=e.max;return t<0?0:r>0&&t>r?r+"+":t===1/0?"∞":t}},{key:"validAppearance",value:function(){var e=this.props.appearance,t=_.values,r=_.defaultValue;return t.indexOf(e)!==-1?e:r}},{key:"render",value:function(){return m.default.createElement("span",{className:y.default.root},m.default.createElement("span",{className:(0,v.default)([y.default.value,y.default[this.validAppearance()]])},this.displayValue().toString()))}}],[{key:"propTypes",get:function(){return{value:b.PropTypes.number,max:b.PropTypes.number,appearance:b.PropTypes.oneOf(_.values),onValueUpdated:b.PropTypes.func}}},{key:"defaultProps",get:function(){return{value:0,max:99,appearance:_.defaultValue}}}]),t}(b.PureComponent);t.default=x},function(e,t){e.exports=require("babel-runtime/core-js/object/get-prototype-of")},function(e,t){e.exports=require("babel-runtime/helpers/classCallCheck")},function(e,t){e.exports=require("babel-runtime/helpers/createClass")},function(e,t){e.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(e,t){e.exports=require("babel-runtime/helpers/inherits")},function(e,t){e.exports=require("classnames")},function(e,t){e.exports=require("react")},function(e,t,r){var n=r(12);"string"==typeof n&&(n=[[e.id,n,""]]),r(14)(n,{}),n.locals&&(e.exports=n.locals)},function(e,t,r){t=e.exports=r(13)(),t.push([e.id,"._1eQzTdeGbqIWe_WROsHkkO{display:inline-block}.Yw_zm_VhTLL1R9aJ2MNlb{border-radius:2em;display:inline-block;font-size:12px;font-weight:400;line-height:1;min-width:1px;padding:.16666667em .5em;text-align:center}._6iGVg-VgMB7lkx5H42Mlu{background:#ebecf0;color:#42526e}._1bi2_7c3H90bAH8Pw4xwgU{background:#0052cc;color:#fff}._3kjVDacGCyZLvhB7sWqhiX{background:#ff5630;color:#fff}._19ukTzPJwVJQixg5_wz3_k{background:#e3fcef;color:#064}._1XyvUNNWjj746a67rD0MSo{background:#ffebe6;color:#bf2600}",""]),t.locals={container:"_1eQzTdeGbqIWe_WROsHkkO",container:"_1eQzTdeGbqIWe_WROsHkkO",value:"Yw_zm_VhTLL1R9aJ2MNlb",value:"Yw_zm_VhTLL1R9aJ2MNlb",default:"_6iGVg-VgMB7lkx5H42Mlu",default:"_6iGVg-VgMB7lkx5H42Mlu",primary:"_1bi2_7c3H90bAH8Pw4xwgU",primary:"_1bi2_7c3H90bAH8Pw4xwgU",important:"_3kjVDacGCyZLvhB7sWqhiX",important:"_3kjVDacGCyZLvhB7sWqhiX",added:"_19ukTzPJwVJQixg5_wz3_k",added:"_19ukTzPJwVJQixg5_wz3_k",removed:"_1XyvUNNWjj746a67rD0MSo",removed:"_1XyvUNNWjj746a67rD0MSo"}},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var r=this[t];r[2]?e.push("@media "+r[2]+"{"+r[1]+"}"):e.push(r[1])}return e.join("")},e.i=function(t,r){"string"==typeof t&&(t=[[null,t,""]]);for(var n={},a=0;a<this.length;a++){var o=this[a][0];"number"==typeof o&&(n[o]=!0)}for(a=0;a<t.length;a++){var i=t[a];"number"==typeof i[0]&&n[i[0]]||(r&&!i[2]?i[2]=r:r&&(i[2]="("+i[2]+") and ("+r+")"),e.push(i))}},e}},function(e,t,r){function n(e,t){for(var r=0;r<e.length;r++){var n=e[r],a=d[n.id];if(a){a.refs++;for(var o=0;o<a.parts.length;o++)a.parts[o](n.parts[o]);for(;o<n.parts.length;o++)a.parts.push(l(n.parts[o],t))}else{for(var i=[],o=0;o<n.parts.length;o++)i.push(l(n.parts[o],t));d[n.id]={id:n.id,refs:1,parts:i}}}}function a(e){for(var t=[],r={},n=0;n<e.length;n++){var a=e[n],o=a[0],i=a[1],u=a[2],s=a[3],l={css:i,media:u,sourceMap:s};r[o]?r[o].parts.push(l):t.push(r[o]={id:o,parts:[l]})}return t}function o(e,t){var r=b(),n=y[y.length-1];if("top"===e.insertAt)n?n.nextSibling?r.insertBefore(t,n.nextSibling):r.appendChild(t):r.insertBefore(t,r.firstChild),y.push(t);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");r.appendChild(t)}}function i(e){e.parentNode.removeChild(e);var t=y.indexOf(e);t>=0&&y.splice(t,1)}function u(e){var t=document.createElement("style");return t.type="text/css",o(e,t),t}function s(e){var t=document.createElement("link");return t.rel="stylesheet",o(e,t),t}function l(e,t){var r,n,a;if(t.singleton){var o=g++;r=m||(m=u(t)),n=f.bind(null,r,o,!1),a=f.bind(null,r,o,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(r=s(t),n=p.bind(null,r),a=function(){i(r),r.href&&URL.revokeObjectURL(r.href)}):(r=u(t),n=c.bind(null,r),a=function(){i(r)});return n(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;n(e=t)}else a()}}function f(e,t,r,n){var a=r?"":n.css;if(e.styleSheet)e.styleSheet.cssText=_(t,a);else{var o=document.createTextNode(a),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(o,i[t]):e.appendChild(o)}}function c(e,t){var r=t.css,n=t.media;if(n&&e.setAttribute("media",n),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}function p(e,t){var r=t.css,n=t.sourceMap;n&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */");var a=new Blob([r],{type:"text/css"}),o=e.href;e.href=URL.createObjectURL(a),o&&URL.revokeObjectURL(o)}var d={},h=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},v=h(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),b=h(function(){return document.head||document.getElementsByTagName("head")[0]}),m=null,g=0,y=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=v()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var r=a(e);return n(r,t),function(e){for(var o=[],i=0;i<r.length;i++){var u=r[i],s=d[u.id];s.refs--,o.push(s)}if(e){var l=a(e);n(l,t)}for(var i=0;i<o.length;i++){var s=o[i];if(0===s.refs){for(var f=0;f<s.parts.length;f++)s.parts[f]();delete d[s.id]}}}};var _=function(){var e=[];return function(t,r){return e[t]=r,e.filter(Boolean).join("\n")}}()}]);

dist/bundle.js

 !function(root, factory) {
-    "object" == typeof exports && "object" == typeof module ? module.exports = factory(require("skatejs"), require("classnames"), require("akutil-common")) : "function" == typeof define && define.amd ? define([ "skatejs", "classnames", "akutil-common" ], factory) : "object" == typeof exports ? exports.akBadge = factory(require("skatejs"), require("classnames"), require("akutil-common")) : root.akBadge = factory(root.skatejs, root.classnames, root["akutil-common"]);
-}(this, function(__WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__) {
+    "object" == typeof exports && "object" == typeof module ? module.exports = factory(require("babel-runtime/core-js/object/get-prototype-of"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/createClass"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("classnames"), require("react")) : "function" == typeof define && define.amd ? define([ "babel-runtime/core-js/object/get-prototype-of", "babel-runtime/helpers/classCallCheck", "babel-runtime/helpers/createClass", "babel-runtime/helpers/possibleConstructorReturn", "babel-runtime/helpers/inherits", "classnames", "react" ], factory) : "object" == typeof exports ? exports.akBadge = factory(require("babel-runtime/core-js/object/get-prototype-of"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/createClass"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("classnames"), require("react")) : root.akBadge = factory(root["babel-runtime/core-js/object/get-prototype-of"], root["babel-runtime/helpers/classCallCheck"], root["babel-runtime/helpers/createClass"], root["babel-runtime/helpers/possibleConstructorReturn"], root["babel-runtime/helpers/inherits"], root.classnames, root.react);
+}(this, function(__WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_9__, __WEBPACK_EXTERNAL_MODULE_10__) {
     /******/
@@ -71,9 +71,9 @@ return function(modules) {
     function(module, exports, __webpack_require__) {
+        module.exports = __webpack_require__(3);
+    }, /* 1 */
+    , /* 2 */
+    , /* 3 */
+    /***/
+    function(module, exports, __webpack_require__) {
         "use strict";
-        function _interopRequireWildcard(obj) {
-            if (obj && obj.__esModule) return obj;
-            var newObj = {};
-            if (null != obj) for (var key in obj) Object.prototype.hasOwnProperty.call(obj, key) && (newObj[key] = obj[key]);
-            return newObj.default = obj, newObj;
-        }
         function _interopRequireDefault(obj) {
@@ -86,74 +86,93 @@ return obj && obj.__esModule ? obj : {
             value: !0
-        }), exports.events = void 0;
-        var _hasOwn = Object.prototype.hasOwnProperty, _forOwn = function(object, iterator) {
-            for (var prop in object) _hasOwn.call(object, prop) && iterator(object[prop], prop);
-        }, _renderArbitrary = function _renderArbitrary(child) {
-            var type = typeof child;
-            "number" === type || "string" === type || "object" === type && child instanceof String ? _skatejs.vdom.text(child) : "function" === type && child.__jsxDOMWrapper ? child() : Array.isArray(child) ? child.forEach(_renderArbitrary) : "object" === type && "[object Object]" === String(child) && _forOwn(child, _renderArbitrary);
-        }, _skatejs = __webpack_require__(3), _classnames = __webpack_require__(4), _classnames2 = _interopRequireDefault(_classnames), _akutilCommon = __webpack_require__(5), _shadow = __webpack_require__(6), _shadow2 = _interopRequireDefault(_shadow), _events = __webpack_require__(8), events = _interopRequireWildcard(_events), APPEARANCE_ENUM = {
+        });
+        var _getPrototypeOf = __webpack_require__(4), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(5), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(6), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(7), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(8), _inherits3 = _interopRequireDefault(_inherits2), _classnames = __webpack_require__(9), _classnames2 = _interopRequireDefault(_classnames), _react = __webpack_require__(10), _react2 = _interopRequireDefault(_react), _style = __webpack_require__(11), _style2 = _interopRequireDefault(_style), APPEARANCE_ENUM = {
             values: [ "default", "primary", "important", "added", "removed" ],
-            missingDefault: "default",
-            invalidDefault: "default"
-        }, definition = {
-            render: function(elem) {
-                var displayValue = function() {
-                    return elem.value < 0 ? 0 : elem.max > 0 && elem.value > elem.max ? elem.max + "+" : elem.value === 1 / 0 ? "∞" : elem.value;
-                }(), classes = (0, _classnames2.default)([ _shadow2.default.locals.value, _shadow2.default.locals[elem.appearance] ]);
-                return _skatejs.vdom.elementOpen("span", null, null, "class", "container"), _skatejs.vdom.elementOpen("style"), 
-                _renderArbitrary(_shadow2.default.toString()), _skatejs.vdom.elementClose("style"), 
-                _skatejs.vdom.elementOpen("span", null, null, "class", classes), _renderArbitrary(displayValue), 
-                _skatejs.vdom.elementClose("span"), _skatejs.vdom.elementClose("span");
-            },
-            updated: function(elem, prev) {
-                return prev && prev.value !== elem.value && (0, _skatejs.emit)(elem, events.change, {
-                    detail: {
-                        oldValue: prev.value,
-                        newValue: elem.value
-                    }
-                }), _skatejs.Component.updated(elem, prev);
-            },
-            props: {
-                /**
-	     * @description The value displayed within the badge.
-	     * @memberof AkBadge
-	     * @instance
-	     * @type {number}
-	     * @default 0
-	     */
-                value: _skatejs.prop.number({
-                    attribute: !0,
-                    default: 0
-                }),
-                /**
-	     * @description The max value to display.
-	     * If value is 100, and max is 50, "50+" will be displayed
-	     * @memberof AkBadge
-	     * @instance
-	     * @type {number}
-	     * @default 99
-	     */
-                max: _skatejs.prop.number({
-                    attribute: !0,
-                    default: 99
-                }),
-                /**
-	     * @description Affects the visual style of the badge.
-	     * Allowed values are: 'default', 'primary', 'important', 'added', 'removed'.
-	     * @memberof AkBadge
-	     * @instance
-	     * @type {string}
-	     * @default default
-	     */
-                appearance: (0, _akutilCommon.enumeration)(APPEARANCE_ENUM)({
-                    attribute: !0
-                })
+            defaultValue: "default"
+        }, Badge = function(_PureComponent) {
+            function Badge() {
+                return (0, _classCallCheck3.default)(this, Badge), (0, _possibleConstructorReturn3.default)(this, (Badge.__proto__ || (0, 
+                _getPrototypeOf2.default)(Badge)).apply(this, arguments));
             }
-        };
-        exports.default = (0, _skatejs.define)("ak-badge", definition), exports.events = events;
-    }, /* 1 */
-    , /* 2 */
-    , /* 3 */
-    /***/
-    function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
+            return (0, _inherits3.default)(Badge, _PureComponent), (0, _createClass3.default)(Badge, [ {
+                key: "componentWillUpdate",
+                // triggered on prop/state change, but not on first render
+                value: function(nextProps) {
+                    var _props = this.props, onValueUpdated = _props.onValueUpdated, oldValue = _props.value, newValue = nextProps.value;
+                    onValueUpdated && newValue !== oldValue && onValueUpdated({
+                        oldValue: oldValue,
+                        newValue: newValue
+                    });
+                }
+            }, {
+                key: "displayValue",
+                value: function() {
+                    var _props2 = this.props, value = _props2.value, max = _props2.max;
+                    return value < 0 ? 0 : max > 0 && value > max ? max + "+" : value === 1 / 0 ? "∞" : value;
+                }
+            }, {
+                key: "validAppearance",
+                value: function() {
+                    var appearance = this.props.appearance, values = APPEARANCE_ENUM.values, defaultValue = APPEARANCE_ENUM.defaultValue;
+                    return values.indexOf(appearance) !== -1 ? appearance : defaultValue;
+                }
+            }, {
+                key: "render",
+                value: function() {
+                    return _react2.default.createElement("span", {
+                        className: _style2.default.root
+                    }, _react2.default.createElement("span", {
+                        className: (0, _classnames2.default)([ _style2.default.value, _style2.default[this.validAppearance()] ])
+                    }, this.displayValue().toString()));
+                }
+            } ], [ {
+                key: "propTypes",
+                get: function() {
+                    return {
+                        /**
+	         * @description The value displayed within the badge.
+	         * @memberof AkBadge
+	         * @instance
+	         * @type {number}
+	         * @default 0
+	         */
+                        value: _react.PropTypes.number,
+                        /**
+	         * @description The max value to display.
+	         * If value is 100, and max is 50, "50+" will be displayed
+	         * @memberof AkBadge
+	         * @instance
+	         * @type {number}
+	         * @default 99
+	         */
+                        max: _react.PropTypes.number,
+                        /**
+	         * @description Affects the visual style of the badge.
+	         * Allowed values are: 'default', 'primary', 'important', 'added', 'removed'.
+	         * @memberof AkBadge
+	         * @instance
+	         * @type {string}
+	         * @default default
+	         */
+                        appearance: _react.PropTypes.oneOf(APPEARANCE_ENUM.values),
+                        /**
+	         * @description Handler function to be called when the 'updated' prop is changed.
+	         * @memberof AkBadge
+	         * @instance
+	         * @type {function}
+	         */
+                        onValueUpdated: _react.PropTypes.func
+                    };
+                }
+            }, {
+                key: "defaultProps",
+                get: function() {
+                    return {
+                        value: 0,
+                        max: 99,
+                        appearance: APPEARANCE_ENUM.defaultValue
+                    };
+                }
+            } ]), Badge;
+        }(_react.PureComponent);
+        exports.default = Badge;
     }, /* 4 */
@@ -169,26 +188,54 @@ /***/
     /***/
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
+    }, /* 7 */
+    /***/
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_7__;
+    }, /* 8 */
+    /***/
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_8__;
+    }, /* 9 */
+    /***/
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_9__;
+    }, /* 10 */
+    /***/
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
+    }, /* 11 */
+    /***/
     function(module, exports, __webpack_require__) {
-        exports = module.exports = __webpack_require__(7)(), // imports
+        // style-loader: Adds some css to the DOM by adding a <style> tag
+        // load the styles
+        var content = __webpack_require__(12);
+        "string" == typeof content && (content = [ [ module.id, content, "" ] ]);
+        // add the styles to the DOM
+        __webpack_require__(14)(content, {});
+        content.locals && (module.exports = content.locals);
+    }, /* 12 */
+    /***/
+    function(module, exports, __webpack_require__) {
+        exports = module.exports = __webpack_require__(13)(), // imports
         // module
-        exports.push([ module.id, ".gIx1yPKCVLDLrsZFjWp91,ak-badge{display:inline-block}.gIx1yPKCVLDLrsZFjWp91:not([defined]),ak-badge:not([defined]){display:none}:host{display:inline-block}:host(:not([defined])){display:none}.ijTcAcAZxkHj_XyMF7WOj{display:inline-block}._1XOjyz6nkYp0PwNm2_R5GN{border-radius:2em;display:inline-block;font-size:12px;font-weight:400;line-height:1;min-width:1px;padding:.16666667em .5em;text-align:center}.h4MwqeVnS3URyoNhqd_8p{background:#ebecf0;color:#42526e}._3m6YegzVE32UQC6u2al8qi{background:#0052cc;color:#fff}.Ky0Y9zBAheCic3aMGGJ1W{background:#ff5630;color:#fff}._2HkxMzs0MGI9iWTzp7zpWq{background:#e3fcef;color:#064}.VGziEGICtgeF8FIY3d0-f{background:#ffebe6;color:#bf2600}", "" ]), 
+        exports.push([ module.id, "._1eQzTdeGbqIWe_WROsHkkO{display:inline-block}.Yw_zm_VhTLL1R9aJ2MNlb{border-radius:2em;display:inline-block;font-size:12px;font-weight:400;line-height:1;min-width:1px;padding:.16666667em .5em;text-align:center}._6iGVg-VgMB7lkx5H42Mlu{background:#ebecf0;color:#42526e}._1bi2_7c3H90bAH8Pw4xwgU{background:#0052cc;color:#fff}._3kjVDacGCyZLvhB7sWqhiX{background:#ff5630;color:#fff}._19ukTzPJwVJQixg5_wz3_k{background:#e3fcef;color:#064}._1XyvUNNWjj746a67rD0MSo{background:#ffebe6;color:#bf2600}", "" ]), 
         // exports
         exports.locals = {
-            "ak-badge": "gIx1yPKCVLDLrsZFjWp91",
-            akBadge: "gIx1yPKCVLDLrsZFjWp91",
-            container: "ijTcAcAZxkHj_XyMF7WOj",
-            container: "ijTcAcAZxkHj_XyMF7WOj",
-            value: "_1XOjyz6nkYp0PwNm2_R5GN",
-            value: "_1XOjyz6nkYp0PwNm2_R5GN",
-            default: "h4MwqeVnS3URyoNhqd_8p",
-            default: "h4MwqeVnS3URyoNhqd_8p",
-            primary: "_3m6YegzVE32UQC6u2al8qi",
-            primary: "_3m6YegzVE32UQC6u2al8qi",
-            important: "Ky0Y9zBAheCic3aMGGJ1W",
-            important: "Ky0Y9zBAheCic3aMGGJ1W",
-            added: "_2HkxMzs0MGI9iWTzp7zpWq",
-            added: "_2HkxMzs0MGI9iWTzp7zpWq",
-            removed: "VGziEGICtgeF8FIY3d0-f",
-            removed: "VGziEGICtgeF8FIY3d0-f"
+            container: "_1eQzTdeGbqIWe_WROsHkkO",
+            container: "_1eQzTdeGbqIWe_WROsHkkO",
+            value: "Yw_zm_VhTLL1R9aJ2MNlb",
+            value: "Yw_zm_VhTLL1R9aJ2MNlb",
+            default: "_6iGVg-VgMB7lkx5H42Mlu",
+            default: "_6iGVg-VgMB7lkx5H42Mlu",
+            primary: "_1bi2_7c3H90bAH8Pw4xwgU",
+            primary: "_1bi2_7c3H90bAH8Pw4xwgU",
+            important: "_3kjVDacGCyZLvhB7sWqhiX",
+            important: "_3kjVDacGCyZLvhB7sWqhiX",
+            added: "_19ukTzPJwVJQixg5_wz3_k",
+            added: "_19ukTzPJwVJQixg5_wz3_k",
+            removed: "_1XyvUNNWjj746a67rD0MSo",
+            removed: "_1XyvUNNWjj746a67rD0MSo"
         };
-    }, /* 7 */
+    }, /* 13 */
     /***/
@@ -228,12 +275,147 @@ function(module, exports) {
         };
-    }, /* 8 */
+    }, /* 14 */
     /***/
-    function(module, exports) {
-        "use strict";
-        Object.defineProperty(exports, "__esModule", {
-            value: !0
-        });
-        // eslint-disable-next-line import/prefer-default-export
-        exports.change = "change";
+    function(module, exports, __webpack_require__) {
+        function addStylesToDom(styles, options) {
+            for (var i = 0; i < styles.length; i++) {
+                var item = styles[i], domStyle = stylesInDom[item.id];
+                if (domStyle) {
+                    domStyle.refs++;
+                    for (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j](item.parts[j]);
+                    for (;j < item.parts.length; j++) domStyle.parts.push(addStyle(item.parts[j], options));
+                } else {
+                    for (var parts = [], j = 0; j < item.parts.length; j++) parts.push(addStyle(item.parts[j], options));
+                    stylesInDom[item.id] = {
+                        id: item.id,
+                        refs: 1,
+                        parts: parts
+                    };
+                }
+            }
+        }
+        function listToStyles(list) {
+            for (var styles = [], newStyles = {}, i = 0; i < list.length; i++) {
+                var item = list[i], id = item[0], css = item[1], media = item[2], sourceMap = item[3], part = {
+                    css: css,
+                    media: media,
+                    sourceMap: sourceMap
+                };
+                newStyles[id] ? newStyles[id].parts.push(part) : styles.push(newStyles[id] = {
+                    id: id,
+                    parts: [ part ]
+                });
+            }
+            return styles;
+        }
+        function insertStyleElement(options, styleElement) {
+            var head = getHeadElement(), lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
+            if ("top" === options.insertAt) lastStyleElementInsertedAtTop ? lastStyleElementInsertedAtTop.nextSibling ? head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling) : head.appendChild(styleElement) : head.insertBefore(styleElement, head.firstChild), 
+            styleElementsInsertedAtTop.push(styleElement); else {
+                if ("bottom" !== options.insertAt) throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
+                head.appendChild(styleElement);
+            }
+        }
+        function removeStyleElement(styleElement) {
+            styleElement.parentNode.removeChild(styleElement);
+            var idx = styleElementsInsertedAtTop.indexOf(styleElement);
+            idx >= 0 && styleElementsInsertedAtTop.splice(idx, 1);
+        }
+        function createStyleElement(options) {
+            var styleElement = document.createElement("style");
+            return styleElement.type = "text/css", insertStyleElement(options, styleElement), 
+            styleElement;
+        }
+        function createLinkElement(options) {
+            var linkElement = document.createElement("link");
+            return linkElement.rel = "stylesheet", insertStyleElement(options, linkElement), 
+            linkElement;
+        }
+        function addStyle(obj, options) {
+            var styleElement, update, remove;
+            if (options.singleton) {
+                var styleIndex = singletonCounter++;
+                styleElement = singletonElement || (singletonElement = createStyleElement(options)), 
+                update = applyToSingletonTag.bind(null, styleElement, styleIndex, !1), remove = applyToSingletonTag.bind(null, styleElement, styleIndex, !0);
+            } else obj.sourceMap && "function" == typeof URL && "function" == typeof URL.createObjectURL && "function" == typeof URL.revokeObjectURL && "function" == typeof Blob && "function" == typeof btoa ? (styleElement = createLinkElement(options), 
+            update = updateLink.bind(null, styleElement), remove = function() {
+                removeStyleElement(styleElement), styleElement.href && URL.revokeObjectURL(styleElement.href);
+            }) : (styleElement = createStyleElement(options), update = applyToTag.bind(null, styleElement), 
+            remove = function() {
+                removeStyleElement(styleElement);
+            });
+            return update(obj), function(newObj) {
+                if (newObj) {
+                    if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) return;
+                    update(obj = newObj);
+                } else remove();
+            };
+        }
+        function applyToSingletonTag(styleElement, index, remove, obj) {
+            var css = remove ? "" : obj.css;
+            if (styleElement.styleSheet) styleElement.styleSheet.cssText = replaceText(index, css); else {
+                var cssNode = document.createTextNode(css), childNodes = styleElement.childNodes;
+                childNodes[index] && styleElement.removeChild(childNodes[index]), childNodes.length ? styleElement.insertBefore(cssNode, childNodes[index]) : styleElement.appendChild(cssNode);
+            }
+        }
+        function applyToTag(styleElement, obj) {
+            var css = obj.css, media = obj.media;
+            if (media && styleElement.setAttribute("media", media), styleElement.styleSheet) styleElement.styleSheet.cssText = css; else {
+                for (;styleElement.firstChild; ) styleElement.removeChild(styleElement.firstChild);
+                styleElement.appendChild(document.createTextNode(css));
+            }
+        }
+        function updateLink(linkElement, obj) {
+            var css = obj.css, sourceMap = obj.sourceMap;
+            sourceMap && (// http://stackoverflow.com/a/26603875
+            css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */");
+            var blob = new Blob([ css ], {
+                type: "text/css"
+            }), oldSrc = linkElement.href;
+            linkElement.href = URL.createObjectURL(blob), oldSrc && URL.revokeObjectURL(oldSrc);
+        }
+        /*
+		MIT License http://www.opensource.org/licenses/mit-license.php
+		Author Tobias Koppers @sokra
+	*/
+        var stylesInDom = {}, memoize = function(fn) {
+            var memo;
+            return function() {
+                return "undefined" == typeof memo && (memo = fn.apply(this, arguments)), memo;
+            };
+        }, isOldIE = memoize(function() {
+            return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
+        }), getHeadElement = memoize(function() {
+            return document.head || document.getElementsByTagName("head")[0];
+        }), singletonElement = null, singletonCounter = 0, styleElementsInsertedAtTop = [];
+        module.exports = function(list, options) {
+            options = options || {}, // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
+            // tags it will allow on a page
+            "undefined" == typeof options.singleton && (options.singleton = isOldIE()), // By default, add <style> tags to the bottom of <head>.
+            "undefined" == typeof options.insertAt && (options.insertAt = "bottom");
+            var styles = listToStyles(list);
+            return addStylesToDom(styles, options), function(newList) {
+                for (var mayRemove = [], i = 0; i < styles.length; i++) {
+                    var item = styles[i], domStyle = stylesInDom[item.id];
+                    domStyle.refs--, mayRemove.push(domStyle);
+                }
+                if (newList) {
+                    var newStyles = listToStyles(newList);
+                    addStylesToDom(newStyles, options);
+                }
+                for (var i = 0; i < mayRemove.length; i++) {
+                    var domStyle = mayRemove[i];
+                    if (0 === domStyle.refs) {
+                        for (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j]();
+                        delete stylesInDom[domStyle.id];
+                    }
+                }
+            };
+        };
+        var replaceText = function() {
+            var textStore = [];
+            return function(index, replacement) {
+                return textStore[index] = replacement, textStore.filter(Boolean).join("\n");
+            };
+        }();
     } ]);
 });

dist/bundle.min.js

@@ -1,1 +0,1 @@
-!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("skatejs"),require("classnames"),require("akutil-common")):"function"==typeof define&&define.amd?define(["skatejs","classnames","akutil-common"],n):"object"==typeof exports?exports.akBadge=n(require("skatejs"),require("classnames"),require("akutil-common")):e.akBadge=n(e.skatejs,e.classnames,e["akutil-common"])}(this,function(e,n,t){return function(e){function n(a){if(t[a])return t[a].exports;var o=t[a]={exports:{},id:a,loaded:!1};return e[a].call(o.exports,o,o.exports,n),o.loaded=!0,o.exports}var t={};return n.m=e,n.c=t,n.p="",n(0)}([function(e,n,t){"use strict";function a(e){if(e&&e.__esModule)return e;var n={};if(null!=e)for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&(n[t]=e[t]);return n.default=e,n}function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.events=void 0;var r=Object.prototype.hasOwnProperty,i=function(e,n){for(var t in e)r.call(e,t)&&n(e[t],t)},l=function e(n){var t=typeof n;"number"===t||"string"===t||"object"===t&&n instanceof String?u.vdom.text(n):"function"===t&&n.__jsxDOMWrapper?n():Array.isArray(n)?n.forEach(e):"object"===t&&"[object Object]"===String(n)&&i(n,e)},u=t(3),d=t(4),s=o(d),c=t(5),p=t(6),f=o(p),m=t(8),v=a(m),y={values:["default","primary","important","added","removed"],missingDefault:"default",invalidDefault:"default"},g={render:function(e){var n=function(){return e.value<0?0:e.max>0&&e.value>e.max?e.max+"+":e.value===1/0?"∞":e.value}(),t=(0,s.default)([f.default.locals.value,f.default.locals[e.appearance]]);return u.vdom.elementOpen("span",null,null,"class","container"),u.vdom.elementOpen("style"),l(f.default.toString()),u.vdom.elementClose("style"),u.vdom.elementOpen("span",null,null,"class",t),l(n),u.vdom.elementClose("span"),u.vdom.elementClose("span")},updated:function(e,n){return n&&n.value!==e.value&&(0,u.emit)(e,v.change,{detail:{oldValue:n.value,newValue:e.value}}),u.Component.updated(e,n)},props:{value:u.prop.number({attribute:!0,default:0}),max:u.prop.number({attribute:!0,default:99}),appearance:(0,c.enumeration)(y)({attribute:!0})}};n.default=(0,u.define)("ak-badge",g),n.events=v},,,function(n,t){n.exports=e},function(e,t){e.exports=n},function(e,n){e.exports=t},function(e,n,t){n=e.exports=t(7)(),n.push([e.id,".gIx1yPKCVLDLrsZFjWp91,ak-badge{display:inline-block}.gIx1yPKCVLDLrsZFjWp91:not([defined]),ak-badge:not([defined]){display:none}:host{display:inline-block}:host(:not([defined])){display:none}.ijTcAcAZxkHj_XyMF7WOj{display:inline-block}._1XOjyz6nkYp0PwNm2_R5GN{border-radius:2em;display:inline-block;font-size:12px;font-weight:400;line-height:1;min-width:1px;padding:.16666667em .5em;text-align:center}.h4MwqeVnS3URyoNhqd_8p{background:#ebecf0;color:#42526e}._3m6YegzVE32UQC6u2al8qi{background:#0052cc;color:#fff}.Ky0Y9zBAheCic3aMGGJ1W{background:#ff5630;color:#fff}._2HkxMzs0MGI9iWTzp7zpWq{background:#e3fcef;color:#064}.VGziEGICtgeF8FIY3d0-f{background:#ffebe6;color:#bf2600}",""]),n.locals={"ak-badge":"gIx1yPKCVLDLrsZFjWp91",akBadge:"gIx1yPKCVLDLrsZFjWp91",container:"ijTcAcAZxkHj_XyMF7WOj",container:"ijTcAcAZxkHj_XyMF7WOj",value:"_1XOjyz6nkYp0PwNm2_R5GN",value:"_1XOjyz6nkYp0PwNm2_R5GN",default:"h4MwqeVnS3URyoNhqd_8p",default:"h4MwqeVnS3URyoNhqd_8p",primary:"_3m6YegzVE32UQC6u2al8qi",primary:"_3m6YegzVE32UQC6u2al8qi",important:"Ky0Y9zBAheCic3aMGGJ1W",important:"Ky0Y9zBAheCic3aMGGJ1W",added:"_2HkxMzs0MGI9iWTzp7zpWq",added:"_2HkxMzs0MGI9iWTzp7zpWq",removed:"VGziEGICtgeF8FIY3d0-f",removed:"VGziEGICtgeF8FIY3d0-f"}},function(e,n){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],n=0;n<this.length;n++){var t=this[n];t[2]?e.push("@media "+t[2]+"{"+t[1]+"}"):e.push(t[1])}return e.join("")},e.i=function(n,t){"string"==typeof n&&(n=[[null,n,""]]);for(var a={},o=0;o<this.length;o++){var r=this[o][0];"number"==typeof r&&(a[r]=!0)}for(o=0;o<n.length;o++){var i=n[o];"number"==typeof i[0]&&a[i[0]]||(t&&!i[2]?i[2]=t:t&&(i[2]="("+i[2]+") and ("+t+")"),e.push(i))}},e}},function(e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.change="change"}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("classnames"),require("react")):"function"==typeof define&&define.amd?define(["babel-runtime/core-js/object/get-prototype-of","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/createClass","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","classnames","react"],t):"object"==typeof exports?exports.akBadge=t(require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("classnames"),require("react")):e.akBadge=t(e["babel-runtime/core-js/object/get-prototype-of"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/createClass"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e.classnames,e.react)}(this,function(e,t,r,n,a,o,i){return function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){e.exports=r(3)},,,function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var a=r(4),o=n(a),i=r(5),s=n(i),u=r(6),l=n(u),c=r(7),p=n(c),f=r(8),d=n(f),b=r(9),h=n(b),m=r(10),v=n(m),g=r(11),y=n(g),x={values:["default","primary","important","added","removed"],defaultValue:"default"},_=function(e){function t(){return(0,s.default)(this,t),(0,p.default)(this,(t.__proto__||(0,o.default)(t)).apply(this,arguments))}return(0,d.default)(t,e),(0,l.default)(t,[{key:"componentWillUpdate",value:function(e){var t=this.props,r=t.onValueUpdated,n=t.value,a=e.value;r&&a!==n&&r({oldValue:n,newValue:a})}},{key:"displayValue",value:function(){var e=this.props,t=e.value,r=e.max;return t<0?0:r>0&&t>r?r+"+":t===1/0?"∞":t}},{key:"validAppearance",value:function(){var e=this.props.appearance,t=x.values,r=x.defaultValue;return t.indexOf(e)!==-1?e:r}},{key:"render",value:function(){return v.default.createElement("span",{className:y.default.root},v.default.createElement("span",{className:(0,h.default)([y.default.value,y.default[this.validAppearance()]])},this.displayValue().toString()))}}],[{key:"propTypes",get:function(){return{value:m.PropTypes.number,max:m.PropTypes.number,appearance:m.PropTypes.oneOf(x.values),onValueUpdated:m.PropTypes.func}}},{key:"defaultProps",get:function(){return{value:0,max:99,appearance:x.defaultValue}}}]),t}(m.PureComponent);t.default=_},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t){e.exports=r},function(e,t){e.exports=n},function(e,t){e.exports=a},function(e,t){e.exports=o},function(e,t){e.exports=i},function(e,t,r){var n=r(12);"string"==typeof n&&(n=[[e.id,n,""]]),r(14)(n,{}),n.locals&&(e.exports=n.locals)},function(e,t,r){t=e.exports=r(13)(),t.push([e.id,"._1eQzTdeGbqIWe_WROsHkkO{display:inline-block}.Yw_zm_VhTLL1R9aJ2MNlb{border-radius:2em;display:inline-block;font-size:12px;font-weight:400;line-height:1;min-width:1px;padding:.16666667em .5em;text-align:center}._6iGVg-VgMB7lkx5H42Mlu{background:#ebecf0;color:#42526e}._1bi2_7c3H90bAH8Pw4xwgU{background:#0052cc;color:#fff}._3kjVDacGCyZLvhB7sWqhiX{background:#ff5630;color:#fff}._19ukTzPJwVJQixg5_wz3_k{background:#e3fcef;color:#064}._1XyvUNNWjj746a67rD0MSo{background:#ffebe6;color:#bf2600}",""]),t.locals={container:"_1eQzTdeGbqIWe_WROsHkkO",container:"_1eQzTdeGbqIWe_WROsHkkO",value:"Yw_zm_VhTLL1R9aJ2MNlb",value:"Yw_zm_VhTLL1R9aJ2MNlb",default:"_6iGVg-VgMB7lkx5H42Mlu",default:"_6iGVg-VgMB7lkx5H42Mlu",primary:"_1bi2_7c3H90bAH8Pw4xwgU",primary:"_1bi2_7c3H90bAH8Pw4xwgU",important:"_3kjVDacGCyZLvhB7sWqhiX",important:"_3kjVDacGCyZLvhB7sWqhiX",added:"_19ukTzPJwVJQixg5_wz3_k",added:"_19ukTzPJwVJQixg5_wz3_k",removed:"_1XyvUNNWjj746a67rD0MSo",removed:"_1XyvUNNWjj746a67rD0MSo"}},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var r=this[t];r[2]?e.push("@media "+r[2]+"{"+r[1]+"}"):e.push(r[1])}return e.join("")},e.i=function(t,r){"string"==typeof t&&(t=[[null,t,""]]);for(var n={},a=0;a<this.length;a++){var o=this[a][0];"number"==typeof o&&(n[o]=!0)}for(a=0;a<t.length;a++){var i=t[a];"number"==typeof i[0]&&n[i[0]]||(r&&!i[2]?i[2]=r:r&&(i[2]="("+i[2]+") and ("+r+")"),e.push(i))}},e}},function(e,t,r){function n(e,t){for(var r=0;r<e.length;r++){var n=e[r],a=d[n.id];if(a){a.refs++;for(var o=0;o<a.parts.length;o++)a.parts[o](n.parts[o]);for(;o<n.parts.length;o++)a.parts.push(l(n.parts[o],t))}else{for(var i=[],o=0;o<n.parts.length;o++)i.push(l(n.parts[o],t));d[n.id]={id:n.id,refs:1,parts:i}}}}function a(e){for(var t=[],r={},n=0;n<e.length;n++){var a=e[n],o=a[0],i=a[1],s=a[2],u=a[3],l={css:i,media:s,sourceMap:u};r[o]?r[o].parts.push(l):t.push(r[o]={id:o,parts:[l]})}return t}function o(e,t){var r=m(),n=y[y.length-1];if("top"===e.insertAt)n?n.nextSibling?r.insertBefore(t,n.nextSibling):r.appendChild(t):r.insertBefore(t,r.firstChild),y.push(t);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");r.appendChild(t)}}function i(e){e.parentNode.removeChild(e);var t=y.indexOf(e);t>=0&&y.splice(t,1)}function s(e){var t=document.createElement("style");return t.type="text/css",o(e,t),t}function u(e){var t=document.createElement("link");return t.rel="stylesheet",o(e,t),t}function l(e,t){var r,n,a;if(t.singleton){var o=g++;r=v||(v=s(t)),n=c.bind(null,r,o,!1),a=c.bind(null,r,o,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(r=u(t),n=f.bind(null,r),a=function(){i(r),r.href&&URL.revokeObjectURL(r.href)}):(r=s(t),n=p.bind(null,r),a=function(){i(r)});return n(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;n(e=t)}else a()}}function c(e,t,r,n){var a=r?"":n.css;if(e.styleSheet)e.styleSheet.cssText=x(t,a);else{var o=document.createTextNode(a),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(o,i[t]):e.appendChild(o)}}function p(e,t){var r=t.css,n=t.media;if(n&&e.setAttribute("media",n),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}function f(e,t){var r=t.css,n=t.sourceMap;n&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */");var a=new Blob([r],{type:"text/css"}),o=e.href;e.href=URL.createObjectURL(a),o&&URL.revokeObjectURL(o)}var d={},b=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},h=b(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),m=b(function(){return document.head||document.getElementsByTagName("head")[0]}),v=null,g=0,y=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=h()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var r=a(e);return n(r,t),function(e){for(var o=[],i=0;i<r.length;i++){var s=r[i],u=d[s.id];u.refs--,o.push(u)}if(e){var l=a(e);n(l,t)}for(var i=0;i<o.length;i++){var u=o[i];if(0===u.refs){for(var c=0;c<u.parts.length;c++)u.parts[c]();delete d[u.id]}}}};var x=function(){var e=[];return function(t,r){return e[t]=r,e.filter(Boolean).join("\n")}}()}])});

package.json

 {
   "name": "ak-badge",
-  "version": "1.0.2",
-  "description": "ak-badge webcomponent",
+  "version": "2.0.0",
+  "description": "ak-badge React component",
   "main": "dist/bundle.js",
   "webpack": "dist/bundle-cjs.js",
-  "ak:webpack:raw": "src/index.js",
+  "ak:webpack:raw": "src/index.jsx",
   "scripts": {
@@ -15,13 +15,10 @@ "prepublish": "cd ../.. && npm run prepublish/single ak-badge"
   "dependencies": {
-    "akutil-common": "^5.0.0",
     "akutil-shared-styles": "^37.0.0",
     "babel-runtime": "^6.11.6",
-    "classnames": "^2.2.5",
-    "skatejs": "^4.0.6"
+    "classnames": "^2.2.5"
   },
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
-  "devDependencies": {
-    "akutil-common-test": "*",
-    "akutil-react": "*"
+  "peerDependencies": {
+    "react": "^15.3.2"
   },
@@ -28,0 +25,0 @@ "repository": {

README.md

@@ -5,3 +5,3 @@ [![AtlasKit component registry](https://img.shields.io/badge/AtlasKit-components-FF5230.svg)](http://aui-cdn.atlassian.com/atlaskit/registry/)
 [![Report an issue](https://img.shields.io/badge/Report-an_issue-6554C0.svg)](https://ecosystem.atlassian.net/browse/AK)
-[![Ask in our forum](https://img.shields.io/badge/Ask-in_our_forum-6554C0.svg)](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-badge,ak-badge@1.0.2)
+[![Ask in our forum](https://img.shields.io/badge/Ask-in_our_forum-6554C0.svg)](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-badge,ak-badge@2.0.0)
 
@@ -17,7 +17,7 @@ # Badge
 
-![Example badge](https://bytebucket.org/atlassian/atlaskit/raw/3239a8d9ad5bb010ea787383e19b630918c1d78b/packages/ak-badge/docs/badge.png)
+![Example badge](https://bytebucket.org/atlassian/atlaskit/raw/10507aa785346305cec7fcb0d0221885d3802710/packages/ak-badge/docs/badge.png)
 
 ## Try it out
 
-Interact with a [live demo of the ak-badge component](https://aui-cdn.atlassian.com/atlaskit/stories/ak-badge/1.0.2/).
+Interact with a [live demo of the ak-badge component](https://aui-cdn.atlassian.com/atlaskit/stories/ak-badge/2.0.0/).
 
@@ -34,40 +34,11 @@ ## Installation
 
-The `ak-badge` package exports the AkBadge [Skate](https://github.com/skatejs/skatejs) component.
+The `ak-badge` package exports the Badge React component.
 
-Import the component in your JS resource as follows:
+Import the component in your React app as follows:
 
-#### bundle.js
-
 ```javascript
-import AkBadge from 'ak-badge';
+import Badge from 'ak-badge';
+ReactDOM.render(<Badge />, container);
 ```
 
-Now we can use the defined tag in our HTML markup:
-
-#### index.html
-
-```html
-<html>
-<head>
-  <script src="bundle.js"></script>
-</head>
-<body>
-  <!-- ... -->
-  <ak-badge value="256" appearance="added"></ak-badge>
-</body>
-```
-
-### React
-
-This is a standard web component, if you want to use it in your React app, use the Skate.js [React integration](https://github.com/webcomponents/react-integration).
-
-```
-import AkBadge from 'ak-badge';
-import reactify from 'skatejs-react-integration';
-
-const ReactComponent = reactify(AkBadge, {});
-
-ReactDOM.render(<ReactComponent />, container);
-```
-
 <a name="AkBadge"></a>
@@ -82,2 +53,3 @@
     *  [akBadge.appearance](#AkBadge+appearance) : <code>string</code>
+    *  [akBadge.onValueUpdated](#AkBadge+onValueUpdated) : <code>function</code>
 
@@ -87,3 +59,3 @@ <a name="new_AkBadge_new"></a>
 ### new AkBadge()
-Create instances of the component programmatically, or using markup.
+Return React class reference for the Badge component.
 
@@ -93,3 +65,3 @@ **JS Example**
 import AkBadge from 'ak-badge';
-const component = new AkBadge();
+ReactDOM.render(<AkBadge />, container);
 ```
@@ -119,3 +91,9 @@ <a name="AkBadge+value"></a>
 **Default**: <code>&quot;default&quot;</code>  
+<a name="AkBadge+onValueUpdated"></a>
 
+### akBadge.onValueUpdated : <code>function</code>
+Handler function to be called when the 'updated' prop is changed.
+
+**Kind**: instance property of <code>[AkBadge](#AkBadge)</code>  
+
 ## Support and feedback
@@ -129,3 +107,3 @@
 
-Ask a question in our [forum](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-badge,ak-badge@1.0.2).
+Ask a question in our [forum](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-badge,ak-badge@2.0.0).
 
@@ -132,0 +110,0 @@ Check [if someone has already asked the same question before](https://answers.atlassian.com/questions/topics/42926171/atlaskit).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67653

increased by63.37%

Dependency count

4

decreased by-20%

Dev dependency count

0

decreased by-100%

Lines of code

840

increased by77.59%

Worsened metrics

Number of lines in readme file

109

decreased by-16.79%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedasap@2.0.6(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcreate-react-class@15.7.0(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@15.7.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedua-parser-js@0.7.40(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• - Removedakutil-common@^5.0.0

• - Removedskatejs@^4.0.6

• - Removedakutil-common@5.0.1(transitive)

• - Removedcreate-error@0.3.1(transitive)

• - Removedincremental-dom@0.4.1(transitive)

• - Removedkeycode@2.2.1(transitive)

• - Removedskatejs@4.6.7(transitive)