@atlaskit/reactions 21.4.0 → 21.6.0

package/dist/cjs/store/ReactionConsumer.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ReactionConsumer = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -27,6 +31,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/**
+ * A custom mapper class that takes the store instance and mapper functions "mapStateToProps" and "mapActionsToProps" to return the renderProps pattern as a child component
+ * @deprecated please avoid using this class as it will be removed in a future release
+ */
 var ReactionConsumer = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(ReactionConsumer, _React$PureComponent);
 
@@ -38,11 +46,11 @@ var ReactionConsumer = /*#__PURE__*/function (_React$PureComponent) {
     (0, _classCallCheck2.default)(this, ReactionConsumer);
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPropsFromActions", function (actions) {
-      var actionsMapper = _this.props.actionsMapper;
+      var mapActionsToProps = _this.props.mapActionsToProps;
 
-      if (actionsMapper) {
+      if (mapActionsToProps) {
         if (!_this.previousActions || !_this.propsFromActions || _this.previousActions !== actions) {
-          _this.propsFromActions = actionsMapper(actions);
+          _this.propsFromActions = mapActionsToProps(actions);
         }
       }
 
@@ -50,18 +58,15 @@ var ReactionConsumer = /*#__PURE__*/function (_React$PureComponent) {
       return _this.propsFromActions;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPropsFromState", function (state) {
-      var stateMapper = _this.props.stateMapper;
-
-      if (stateMapper) {
-        return stateMapper(state);
-      }
-
-      return undefined;
+      var mapStateToProps = _this.props.mapStateToProps;
+      return mapStateToProps ? mapStateToProps(state) : undefined;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnChange", function () {
       _this.forceUpdate();
     });
-    _this.state = {};
+    _this.state = {
+      store: undefined
+    };
     return _this;
   }
 
@@ -80,11 +85,34 @@ var ReactionConsumer = /*#__PURE__*/function (_React$PureComponent) {
     }
   }, {
     key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.state.store) {
-        this.state.store.removeOnChangeListener(this.handleOnChange);
+    value: function () {
+      var _componentWillUnmount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (this.state.store) {
+                  this.state.store.removeOnChangeListener(this.handleOnChange);
+                }
+
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function componentWillUnmount() {
+        return _componentWillUnmount.apply(this, arguments);
       }
-    }
+
+      return componentWillUnmount;
+    }()
+    /**
+     * Get the actions the child component might need to dispatch from its props
+     */
+
   }, {
     key: "render",
     value: function render() {

package/dist/cjs/store/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "MemoryReactionsStore", {
   enumerable: true,
   get: function get() {
-    return _ReactionsStore.MemoryReactionsStore;
+    return _MemoryReactionsStore.MemoryReactionsStore;
   }
 });
 Object.defineProperty(exports, "ReactionConsumer", {
@@ -15,7 +15,13 @@ Object.defineProperty(exports, "ReactionConsumer", {
     return _ReactionConsumer.ReactionConsumer;
   }
 });
+Object.defineProperty(exports, "ufoExperiences", {
+  enumerable: true,
+  get: function get() {
+    return _MemoryReactionsStore.ufoExperiences;
+  }
+});
 
 var _ReactionConsumer = require("./ReactionConsumer");
 
-var _ReactionsStore = require("./ReactionsStore");
+var _MemoryReactionsStore = require("./MemoryReactionsStore");

package/dist/cjs/store/utils.js

@@ -5,13 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getReactionsSortFunction = exports.flattenAris = exports.compareEmojiId = exports.byEmojiId = exports.addOne = void 0;
+exports.getReactionsSortFunction = exports.flattenAris = exports.byEmojiId = exports.addOne = void 0;
 exports.isRealErrorFromService = isRealErrorFromService;
-exports.updateByEmojiId = exports.sortByRelevance = exports.sortByPreviousPosition = exports.removeOne = exports.readyState = void 0;
+exports.updateByEmojiId = exports.removeOne = exports.readyState = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _ReactionStatus = require("../types/ReactionStatus");
+var _types = require("../types");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -21,8 +21,6 @@ var compareEmojiId = function compareEmojiId(l, r) {
   return l.localeCompare(r);
 };
 
-exports.compareEmojiId = compareEmojiId;
-
 var sortByRelevance = function sortByRelevance(a, b) {
   if (a.count > b.count) {
     return -1;
@@ -33,8 +31,6 @@ var sortByRelevance = function sortByRelevance(a, b) {
   }
 };
 
-exports.sortByRelevance = sortByRelevance;
-
 var sortByPreviousPosition = function sortByPreviousPosition(reactions) {
   var indexes = reactions.reduce(function (map, reaction, index) {
     map[reaction.emojiId] = index;
@@ -51,11 +47,9 @@ var sortByPreviousPosition = function sortByPreviousPosition(reactions) {
   };
 };
 
-exports.sortByPreviousPosition = sortByPreviousPosition;
-
 var readyState = function readyState(reactions) {
   return {
-    status: _ReactionStatus.ReactionStatus.ready,
+    status: _types.ReactionStatus.ready,
     reactions: reactions.filter(function (reaction) {
       return reaction.count > 0;
     })

package/dist/cjs/types/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "ReactionStatus", {
   enumerable: true,
   get: function get() {
-    return _ReactionStatus.ReactionStatus;
+    return _reaction.ReactionStatus;
   }
 });
 
-var _ReactionStatus = require("./ReactionStatus");
+var _reaction = require("./reaction");

package/dist/cjs/types/reaction.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionStatus = void 0;
+
+/**
+ * Collection of reactions as object (key is unique id from containerAri and ari combined)
+ */
+
+/**
+ * MetaData for Reaction object
+ */
+
+/**
+ * Event handler for when the user clicks on the reaction
+ * @param id give id for the emoji
+ * @param event selected mouse event proerties
+ */
+
+/**
+ * Event handler for when the user hovers with the mouse on the reaction
+ * @param reaction reaction object
+ * @param event (Optional) custom DOM event handler callback
+ */
+
+/**
+ * Condition of the reaction when gets loaded from the store
+ */
+var ReactionStatus;
+/**
+ * state in which the reaction is at
+ */
+
+exports.ReactionStatus = ReactionStatus;
+
+(function (ReactionStatus) {
+  ReactionStatus["ready"] = "READY";
+  ReactionStatus["loading"] = "LOADING";
+  ReactionStatus["error"] = "ERROR";
+  ReactionStatus["notLoaded"] = "NOT_LOADED";
+})(ReactionStatus || (exports.ReactionStatus = ReactionStatus = {}));

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.4.0"
+	"version": "21.6.0"
 }

package/dist/es2019/MockReactionsClient.js

@@ -0,0 +1,126 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { constants } from './shared';
+export const containerAri = 'ari:cloud:owner:demo-cloud-id:container/1';
+export const ari = 'ari:cloud:owner:demo-cloud-id:item/1';
+export const getReactionSummary = (shortName, count, reacted) => {
+  return {
+    ari,
+    containerAri,
+    emojiId: constants.DefaultReactionsByShortName.get(shortName).id,
+    count,
+    reacted
+  };
+};
+export const getUser = (id, displayName) => ({
+  id,
+  displayName
+});
+
+const getReactionKey = (containerAri, ari) => {
+  return `${containerAri}|${ari}`;
+};
+
+const defaultUsers = [getUser('oscar', 'Oscar Wallhult'), getUser('julien', 'Julien Michel Hoarau'), getUser('craig', 'Craig Petchell'), getUser('jerome', 'Jerome Touffe-Blin'), getUser('esoares', 'Eduardo Soares'), getUser('lpereira', 'Luiz Pereira'), getUser('pcurren', 'Paul Curren'), getUser('ttjandra', 'Tara Tjandra'), getUser('severington', 'Ste Everington'), getUser('sguillope', 'Sylvain Guillope'), getUser('alunnon', 'Alex Lunnon')];
+const mockData = {
+  [getReactionKey(containerAri, ari)]: [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 999, false), getReactionSummary(':astonished:', 9, false), getReactionSummary(':heart:', 99, false)]
+};
+/**
+ * Mocked version of the client to fetch user information
+ */
+
+export class MockReactionsClient {
+  constructor(delay = 0) {
+    _defineProperty(this, "delayPromise", () => new Promise(resolve => window.setTimeout(resolve, this.delay)));
+
+    this.delay = delay;
+  }
+
+  async getReactions(containerAri, aris) {
+    await this.delayPromise();
+    return aris.reduce((results, ari) => {
+      const reactionKey = getReactionKey(containerAri, ari);
+      results[ari] = mockData[reactionKey] || [];
+      return results;
+    }, {});
+  }
+
+  async getDetailedReaction(containerAri, ari, emojiId) {
+    await this.delayPromise();
+    const reactionKey = `${containerAri}|${ari}`;
+    const reactionsMockData = mockData[reactionKey];
+
+    if (reactionsMockData) {
+      const reaction = reactionsMockData.find(reaction_1 => reaction_1.emojiId === emojiId);
+
+      if (reaction) {
+        const users = [...defaultUsers].slice(Math.floor(Math.random() * 4), Math.floor(Math.random() * 9) + 4).slice(0, reaction.count);
+        return { ...reaction,
+          users
+        };
+      }
+    }
+
+    return {
+      containerAri,
+      ari,
+      emojiId,
+      count: 1,
+      reacted: true,
+      users: []
+    };
+  }
+
+  async addReaction(containerAri, ari, emojiId) {
+    await this.delayPromise();
+    const reactionKey = getReactionKey(containerAri, ari);
+    let found = false;
+    const reactionsMockData = mockData[reactionKey];
+
+    if (reactionsMockData) {
+      mockData[reactionKey] = reactionsMockData.map(reaction => {
+        if (reaction.emojiId === emojiId) {
+          found = true;
+          return { ...reaction,
+            count: reaction.count + 1,
+            reacted: true
+          };
+        }
+
+        return reaction;
+      });
+    }
+
+    if (!found) {
+      mockData[reactionKey] = [...(reactionsMockData ? reactionsMockData : []), {
+        containerAri,
+        ari,
+        emojiId,
+        count: 1,
+        reacted: true
+      }];
+    }
+
+    return mockData[reactionKey];
+  }
+
+  async deleteReaction(containerAri, ari, emojiId) {
+    await this.delayPromise();
+    const reactionKey = getReactionKey(containerAri, ari);
+    mockData[reactionKey] = mockData[reactionKey].map(reaction => {
+      if (reaction.emojiId === emojiId) {
+        if (reaction.count === 1) {
+          return undefined;
+        }
+
+        return { ...reaction,
+          count: reaction.count - 1,
+          reacted: false
+        };
+      }
+
+      return reaction;
+    }).filter(reaction_1 => !!reaction_1);
+    return mockData[reactionKey];
+  }
+
+}

package/dist/es2019/analytics/analytics.js

@@ -0,0 +1,64 @@
+import { createAndFireEvent } from '@atlaskit/analytics-next';
+import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
+import { name as packageName, version as packageVersion } from '../version.json';
+export const createAndFireEventInElementsChannel = createAndFireEvent('fabric-elements');
+export const createAndFireSafe = (createAnalyticsEvent, creator, ...args) => {
+  if (createAnalyticsEvent) {
+    createAndFireEventInElementsChannel(creator(...args))(createAnalyticsEvent);
+  }
+};
+
+const createPayload = (action, actionSubject, eventType, actionSubjectId) => (attributes = {}) => ({
+  action,
+  actionSubject,
+  eventType,
+  actionSubjectId,
+  attributes: { ...attributes,
+    packageName,
+    packageVersion
+  }
+});
+
+const calculateDuration = startTime => startTime ? Date.now() - startTime : undefined;
+
+const getPreviousState = reaction => {
+  if (reaction) {
+    if (reaction.reacted) {
+      return 'existingReacted';
+    }
+
+    return 'existingNotReacted';
+  }
+
+  return 'new';
+};
+
+export const createRestSucceededEvent = actionSubject => createPayload('succeeded', actionSubject, OPERATIONAL_EVENT_TYPE)();
+export const createRestFailedEvent = (actionSubject, errorCode) => createPayload('failed', actionSubject, OPERATIONAL_EVENT_TYPE)({
+  errorCode
+});
+export const createReactionsRenderedEvent = startTime => createPayload('rendered', 'reactionView', OPERATIONAL_EVENT_TYPE)({
+  duration: calculateDuration(startTime)
+});
+export const createPickerButtonClickedEvent = reactionEmojiCount => createPayload('clicked', 'reactionPickerButton', UI_EVENT_TYPE)({
+  reactionEmojiCount
+});
+export const createPickerCancelledEvent = startTime => createPayload('cancelled', 'reactionPicker', UI_EVENT_TYPE)({
+  duration: calculateDuration(startTime)
+});
+export const createPickerMoreClickedEvent = startTime => createPayload('clicked', 'reactionPicker', UI_EVENT_TYPE, 'more')({
+  duration: calculateDuration(startTime)
+});
+export const createReactionSelectionEvent = (source, emojiId, reaction, startTime) => createPayload('clicked', 'reactionPicker', UI_EVENT_TYPE, 'emoji')({
+  duration: calculateDuration(startTime),
+  source,
+  previousState: getPreviousState(reaction),
+  emojiId
+});
+export const createReactionHoveredEvent = startTime => createPayload('hovered', 'existingReaction', UI_EVENT_TYPE)({
+  duration: calculateDuration(startTime)
+});
+export const createReactionClickedEvent = (added, emojiId) => createPayload('clicked', 'existingReaction', UI_EVENT_TYPE)({
+  added,
+  emojiId
+});

package/dist/es2019/analytics/index.js

@@ -1,66 +1,4 @@
-import { createAndFireEvent } from '@atlaskit/analytics-next';
-import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
-import { name as packageName, version as packageVersion } from '../version.json';
+import * as _Analytics from './analytics';
+export { _Analytics as Analytics };
 import * as _UFO from './ufo';
-export { _UFO as UFO };
-export const createAndFireEventInElementsChannel = createAndFireEvent('fabric-elements');
-export const createAndFireSafe = (createAnalyticsEvent, creator, ...args) => {
-  if (createAnalyticsEvent) {
-    createAndFireEventInElementsChannel(creator(...args))(createAnalyticsEvent);
-  }
-};
-
-const createPayload = (action, actionSubject, eventType, actionSubjectId) => attributes => ({
-  action,
-  actionSubject,
-  eventType,
-  actionSubjectId,
-  attributes: { ...attributes,
-    packageName,
-    packageVersion
-  }
-});
-
-const calculateDuration = startTime => startTime ? Date.now() - startTime : undefined;
-
-const getPreviousState = reaction => {
-  if (reaction) {
-    if (reaction.reacted) {
-      return 'existingReacted';
-    }
-
-    return 'existingNotReacted';
-  }
-
-  return 'new';
-};
-
-export const createRestSucceededEvent = actionSubject => createPayload('succeeded', actionSubject, OPERATIONAL_EVENT_TYPE)({});
-export const createRestFailedEvent = (actionSubject, errorCode) => createPayload('failed', actionSubject, OPERATIONAL_EVENT_TYPE)({
-  errorCode
-});
-export const createReactionsRenderedEvent = startTime => createPayload('rendered', 'reactionView', OPERATIONAL_EVENT_TYPE)({
-  duration: calculateDuration(startTime)
-});
-export const createPickerButtonClickedEvent = reactionEmojiCount => createPayload('clicked', 'reactionPickerButton', UI_EVENT_TYPE)({
-  reactionEmojiCount
-});
-export const createPickerCancelledEvent = startTime => createPayload('cancelled', 'reactionPicker', UI_EVENT_TYPE)({
-  duration: calculateDuration(startTime)
-});
-export const createPickerMoreClickedEvent = startTime => createPayload('clicked', 'reactionPicker', UI_EVENT_TYPE, 'more')({
-  duration: calculateDuration(startTime)
-});
-export const createReactionSelectionEvent = (source, emojiId, reaction, startTime) => createPayload('clicked', 'reactionPicker', UI_EVENT_TYPE, 'emoji')({
-  duration: calculateDuration(startTime),
-  source,
-  previousState: getPreviousState(reaction),
-  emojiId
-});
-export const createReactionHoveredEvent = startTime => createPayload('hovered', 'existingReaction', UI_EVENT_TYPE)({
-  duration: calculateDuration(startTime)
-});
-export const createReactionClickedEvent = (added, emojiId) => createPayload('clicked', 'existingReaction', UI_EVENT_TYPE)({
-  added,
-  emojiId
-});
+export { _UFO as UFO };

package/dist/es2019/analytics/ufo.js

@@ -2,7 +2,6 @@ import { ConcurrentExperience, UFOExperience, ExperiencePerformanceTypes, Experi
 import { withSampling } from '@atlaskit/emoji';
 /**
  * Initial experience config object (deferred from @atlaskit/ufo inner types)
- * TODO: Check if possible to add this to exported types from @atlaskit/ufo
  */
 
 /**

package/dist/es2019/client/ReactionServiceClient.js

@@ -1,6 +1,23 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { utils } from '@atlaskit/util-service-support';
+
+/**
+ * Utility class to retrieve/modify all actions on reactions collection
+ */
 export class ReactionServiceClient {
+  /**
+   * oAuth token
+   */
+
+  /**
+   * API config
+   */
+
+  /**
+   *
+   * @param baseUrl base domain url
+   * @param sessionToken oAuth token for reactions emoji services
+   */
   constructor(baseUrl, sessionToken) {
     _defineProperty(this, "requestService", (path, options) => utils.requestService(this.serviceConfig, { ...options,
       path
@@ -11,14 +28,16 @@ export class ReactionServiceClient {
     };
     this.sessionToken = sessionToken;
   }
+  /**
+   * Get http headers for the "fetch" request
+   * @param hasBody
+   */
+
 
-  getHeaders(hasBody = true) {
+  getHeaders() {
     const headers = {};
     headers['Accept'] = 'application/json';
-
-    if (hasBody) {
-      headers['Content-Type'] = 'application/json';
-    }
+    headers['Content-Type'] = 'application/json';
 
     if (this.sessionToken) {
       headers['Authorization'] = this.sessionToken;
@@ -26,6 +45,12 @@ export class ReactionServiceClient {
 
     return headers;
   }
+  /**
+   * Send a request to remote service
+   * @param path endpoint api url
+   * @param options Optional custom params
+   */
+
 
   getReactions(containerAri, aris) {
     if (aris.length === 0) {
@@ -46,7 +71,7 @@ export class ReactionServiceClient {
 
   getDetailedReaction(containerAri, ari, emojiId) {
     const reactionId = `${containerAri}|${ari}|${emojiId}`;
-    const headers = this.getHeaders(false);
+    const headers = this.getHeaders();
     return this.requestService('reactions', {
       queryParams: {
         reactionId: reactionId

package/dist/es2019/components/{Counter.js → Counter/Counter.js}

@@ -1,33 +1,28 @@
 /** @jsx jsx */
+import React from 'react';
 import { jsx, css } from '@emotion/core';
-import { N500, B400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-import React, { memo } from 'react';
 import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion'; // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
 
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
-export const counterTestId = 'counter-container';
-export const countStyle = css({
-  fontSize: 11,
-  // TODO: nice to have a theme level token for fontSize
-  color: token('color.text.subtlest', N500),
-  overflow: 'hidden',
-  position: 'relative',
-  padding: '4px 8px 4px 0',
-  lineHeight: '14px'
-});
-export const highlightStyle = css({
-  color: token('color.text.selected', B400),
-  fontWeight: 600
-});
-export const containerStyle = css({
-  display: 'flex',
-  flexDirection: 'column'
-});
-export const Counter = /*#__PURE__*/memo(({
+import * as styles from './styles';
+/**
+ * Test id for wrapper div
+ */
+
+export const RENDER_COUNTER_TESTID = 'counter-container';
+/**
+ * Test id for container div
+ */
+
+export const RENDER_COUNTER_WRAPPER_TESTID = 'counter-wrapper';
+
+/**
+ * Display reaction count next to the emoji button
+ */
+export const Counter = ({
   highlight = false,
-  limit = 100,
-  overLimitLabel = '99+',
+  limit = 1000,
+  overLimitLabel = '1k+',
   className,
   value,
   animationDuration = mediumDurationMs
@@ -49,23 +44,23 @@ export const Counter = /*#__PURE__*/memo(({
   const increase = previousValue ? previousValue < value : false;
   return jsx("div", {
     className: className,
-    css: countStyle,
-    style: {
+    "data-testid": RENDER_COUNTER_WRAPPER_TESTID,
+    css: [styles.countStyle, {
       width: label.length * 7
-    }
+    }]
   }, jsx(ExitingPersistence, null, jsx(SlideIn, {
     enterFrom: increase ? 'bottom' : 'top',
     key: value,
     duration: animationDuration
   }, (motion, direction) => jsx("div", {
     ref: motion.ref,
-    css: [containerStyle, css({
+    css: [styles.containerStyle, css({
       position: direction === 'exiting' ? 'absolute' : undefined
     })],
     className: motion.className,
-    "data-testid": counterTestId
+    "data-testid": RENDER_COUNTER_TESTID
   }, jsx("div", {
-    css: highlight && highlightStyle,
+    css: highlight && styles.highlightStyle,
     key: value
   }, label)))));
-});
+};

package/dist/es2019/components/Counter/index.js

@@ -0,0 +1,3 @@
+export { Counter, RENDER_COUNTER_TESTID, RENDER_COUNTER_WRAPPER_TESTID } from './Counter';
+import * as _styles from './styles';
+export { _styles as styles };