@atlaskit/emoji 64.2.1 → 64.4.1

package/dist/esm/components/picker/styles.js

@@ -1,18 +1,16 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-var _$nest4, _$nest5, _$nest6, _$nest8;
+var _css4, _css5, _css6;
 
-import { style } from 'typestyle';
+import { css } from '@emotion/core';
 import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
-import * as colors from '@atlaskit/theme/colors';
-import { akEmojiSelectedBackgroundColor, emojiPickerBorderColor, emojiPickerBoxShadow } from '../../util/shared-styles';
-import { emojiSprite, placeholder, emojiNode } from '../common/styles';
+import { emojiPickerBorderColor, emojiPickerBoxShadow } from '../../util/shared-styles';
+import { emojiSprite, placeholder, emojiNodeStyles } from '../common/styles';
 import { emojiPickerHeight, emojiPickerWidth } from '../../util/constants';
-export var active = 'emoji-picker-active';
-export var disable = 'emoji-picker-disable'; // Level 1 - picker
+import { B200, B300, N100A, N200, N30, N30A, N50, N900 } from '@atlaskit/theme/colors'; // Level 1 - picker
 
-export var emojiPicker = style({
+export var emojiPicker = css({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
@@ -28,62 +26,57 @@ export var emojiPicker = style({
 /// Category Selector
 
 export var addButton = 'emoji-picker-add-button';
-export var categorySelector = style({
+export var categorySelector = css(_defineProperty({
   flex: '0 0 auto',
-  backgroundColor: token('elevation.surface.sunken', colors.N30),
-  $nest: _defineProperty({
-    ul: {
-      listStyle: 'none',
-      margin: '0 4px',
-      padding: '3px 0',
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'space-around'
-    },
-    li: {
-      display: 'inline-block',
-      margin: 0,
-      padding: 0,
-      $nest: {
-        button: {
-          verticalAlign: 'middle'
-        }
-      }
+  backgroundColor: token('elevation.surface.sunken', N30),
+  ul: {
+    listStyle: 'none',
+    margin: '0 4px',
+    padding: '3px 0',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-around'
+  },
+  li: {
+    display: 'inline-block',
+    margin: 0,
+    padding: 0,
+    button: {
+      verticalAlign: 'middle'
     }
-  }, ".".concat(addButton), {
-    color: token('color.text.subtlest', colors.N200),
-    margin: '0 0 0 5px',
-    verticalAlign: 'middle'
-  })
-});
-export var category = style({
+  }
+}, ".".concat(addButton), {
+  color: token('color.text.subtlest', N200),
+  margin: '0 0 0 5px',
+  verticalAlign: 'middle'
+}));
+export var active = css(_defineProperty({
+  color: token('color.text.selected', B300)
+}, '&:hover', {
+  color: token('color.text.selected', B300)
+}));
+export var disable = css(_defineProperty({
+  color: token('color.text.subtlest', N50),
+  cursor: 'default'
+}, '&:hover', {
+  color: token('color.text.subtlest', N50)
+}));
+export var categoryStyles = css((_css4 = {
   backgroundColor: 'transparent',
   border: 0,
-  color: token('color.text.subtlest', colors.N100A),
+  color: token('color.text.subtlest', N100A),
   cursor: 'pointer',
   margin: '2px 0',
   padding: 0,
-  transition: 'color 0.2s ease',
-  $nest: (_$nest4 = {}, _defineProperty(_$nest4, '&::-moz-focus-inner', {
-    border: '0 none',
-    padding: 0
-  }), _defineProperty(_$nest4, "&.".concat(active), {
-    color: token('color.text.brand', colors.B300),
-    $nest: _defineProperty({}, '&:hover', {
-      color: token('color.text.brand', colors.B300)
-    })
-  }), _defineProperty(_$nest4, '&:hover', {
-    color: token('color.text.brand', colors.B200)
-  }), _defineProperty(_$nest4, "&.".concat(disable), {
-    color: token('color.text.subtlest', colors.N50),
-    cursor: 'default',
-    $nest: _defineProperty({}, '&:hover', {
-      color: token('color.text.subtlest', colors.N50)
-    })
-  }), _$nest4)
-}); /// EmojiPickerList
+  transition: 'color 0.2s ease'
+}, _defineProperty(_css4, '&::-moz-focus-inner', {
+  border: '0 none',
+  padding: 0
+}), _defineProperty(_css4, '&:hover', {
+  color: token('color.text.selected', B200)
+}), _css4)); /// EmojiPickerList
 
-export var emojiPickerList = style({
+export var emojiPickerList = css({
   display: 'flex',
   flexDirection: 'column',
   flex: '1 1 auto',
@@ -91,128 +84,94 @@ export var emojiPickerList = style({
   height: '0'
 }); // react-virtualized enables focus style by default - turn it off
 
-export var virtualList = style({
-  $nest: {
-    '&:focus': {
-      outline: 'none'
-    }
+export var virtualList = css({
+  '&:focus': {
+    outline: 'none'
   }
 }); //// Search
 
-export var searchIcon = 'search-icon';
-export var input = 'input';
-export var pickerSearch = style({
+export var searchIcon = css({
+  opacity: 0.5
+});
+export var input = css((_css5 = {
+  boxSizing: 'border-box',
+  color: 'inherit',
+  cursor: 'inherit',
+  fontSize: '14px',
+  outline: 'none',
+  padding: '1px 0 2px 6px',
+  width: '100%'
+}, _defineProperty(_css5, '&:invalid', {
+  boxShadow: 'none'
+}), _defineProperty(_css5, '&::-ms-clear', {
+  display: 'none'
+}), _css5));
+export var pickerSearch = css({
   boxSizing: 'border-box',
   padding: '10px 10px 11px 10px',
-  width: '100%',
-  $nest: (_$nest6 = {}, _defineProperty(_$nest6, ".".concat(searchIcon), {
-    opacity: 0.5
-  }), _defineProperty(_$nest6, ".".concat(input), {
-    boxSizing: 'border-box',
-    color: 'inherit',
-    cursor: 'inherit',
-    fontSize: '14px',
-    outline: 'none',
-    padding: '1px 0 2px 6px',
-    width: '100%',
-    $nest: (_$nest5 = {}, _defineProperty(_$nest5, '&:invalid', {
-      boxShadow: 'none'
-    }), _defineProperty(_$nest5, '&::-ms-clear', {
-      display: 'none'
-    }), _$nest5)
-  }), _$nest6)
+  width: '100%'
 }); //// Loading/Spinner
 
-export var emojiPickerSpinner = style({
+export var emojiPickerSpinner = css({
   display: 'flex',
   width: '100%',
   height: '150px',
   justifyContent: 'center',
   alignItems: 'center',
-  $nest: {
-    '>div': {
-      flex: '0 0 auto'
-    }
+  '>div': {
+    flex: '0 0 auto'
   }
 }); //// Category/Result
 
-export var emojiPickerRow = style({
+export var emojiPickerRow = css({
   marginLeft: '8px'
 });
-export var emojiCategoryTitle = style({
+export var emojiCategoryTitle = css({
   boxSizing: 'border-box',
-  color: token('color.text', colors.N900),
+  color: token('color.text', N900),
   fontSize: '14px',
   padding: '5px 8px',
   textTransform: 'lowercase',
-  $nest: {
-    '&:first-letter': {
-      textTransform: 'uppercase'
-    }
+  '&:first-letter': {
+    textTransform: 'uppercase'
   }
 });
-export var emojiItem = style({
+export var emojiItem = css((_css6 = {
   display: 'inline-block',
   textAlign: 'center',
-  width: '40px',
-  $nest: (_$nest8 = {}, _defineProperty(_$nest8, "&>.".concat(emojiNode), {
-    cursor: 'pointer',
-    padding: '8px',
-    borderRadius: '5px',
-    width: '24px',
-    height: '24px',
-    $nest: _defineProperty({
-      // Fit non-square emoji to square
-      '&>img': {
-        position: 'relative',
-        left: '50%',
-        top: '50%',
-        transform: 'translateX(-50%) translateY(-50%)',
-        maxHeight: '24px',
-        maxWidth: '24px',
-        display: 'block'
-      }
-    }, "&>.".concat(emojiSprite), {
-      height: '24px',
-      width: '24px'
-    })
-  }), _defineProperty(_$nest8, "&>.".concat(placeholder), {
-    padding: '0',
-    margin: '7px',
-    minWidth: '24px',
-    maxWidth: '24px'
-  }), _$nest8)
-});
-export var addEmoji = style({
-  border: '2px dashed #ccc',
-  borderRadius: "".concat(borderRadius(), "px"),
-  backgroundColor: 'transparent',
-  width: '32px',
-  height: '32px',
-  padding: 0,
-  margin: '4px',
-  verticalAlign: 'middle',
-  $nest: {
-    '&:hover': {
-      backgroundColor: akEmojiSelectedBackgroundColor
-    },
-    '&:focus': {
-      outline: '0'
-    },
-    span: {
-      backgroundColor: 'inherit'
-    }
-  }
-}); /// Footer
+  width: '40px'
+}, _defineProperty(_css6, "& .".concat(emojiNodeStyles), {
+  cursor: 'pointer',
+  padding: '8px',
+  borderRadius: '5px',
+  width: '24px',
+  height: '24px'
+}), _defineProperty(_css6, "& .".concat(placeholder), {
+  padding: '0',
+  margin: '7px',
+  minWidth: '24px',
+  maxWidth: '24px'
+}), _defineProperty(_css6, "& .".concat(emojiNodeStyles, " > img"), {
+  position: 'relative',
+  left: '50%',
+  top: '50%',
+  transform: 'translateX(-50%) translateY(-50%)',
+  maxHeight: '24px',
+  maxWidth: '24px',
+  display: 'block'
+}), _defineProperty(_css6, "& .".concat(emojiNodeStyles, " > .").concat(emojiSprite), {
+  height: '24px',
+  width: '24px'
+}), _css6)); /// Footer
 
-export var emojiPickerFooter = style({
+export var emojiPickerFooter = css({
   flex: '0 0 auto'
 });
-export var emojiPickerFooterWithTopShadow = style({
-  borderTop: "2px solid ".concat(token('color.border', colors.N30A)),
+export var emojiPickerFooterWithTopShadow = css({
+  borderTop: "2px solid ".concat(token('color.border', N30A)),
   boxShadow: "0px -1px 1px 0px ".concat(token('color.border', 'rgba(0, 0, 0, 0.1)'))
 });
-export var emojiActionsContainerWithBottomShadow = style({
-  borderBottom: "2px solid ".concat(token('color.border', colors.N30A)),
+export var emojiActionsContainerWithBottomShadow = css({
+  borderBottom: "2px solid ".concat(token('color.border', N30A)),
   boxShadow: "0px 1px 1px 0px ".concat(token('color.border', 'rgba(0, 0, 0, 0.1)'))
 });

package/dist/esm/components/typeahead/EmojiTypeAheadComponent.js

@@ -16,19 +16,19 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-import classNames from 'classnames';
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import uuid from 'uuid';
+import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 import { defaultListLimit } from '../../util/constants';
 import { toEmojiId } from '../../util/type-helpers';
 import { SearchSort } from '../../types';
 import debug from '../../util/logger';
-import { typeaheadCancelledEvent, typeaheadSelectedEvent, typeaheadRenderedEvent } from '../../util/analytics';
+import { typeaheadCancelledEvent, typeaheadSelectedEvent, typeaheadRenderedEvent, ufoExperiences } from '../../util/analytics';
 import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
 import EmojiList from './EmojiTypeAheadList';
-import * as styles from './styles';
-import { EmojiContextProvider } from '../../context/EmojiContextProvider';
+import { emojiTypeAhead } from './styles';
 
 var isFullShortName = function isFullShortName(query) {
   return query && query.length > 1 && query.charAt(0) === ':' && query.charAt(query.length - 1) === ':';
@@ -124,6 +124,11 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
 
       _this.fireAnalyticsEvent(typeaheadRenderedEvent(Date.now() - _this.renderStartTime, query, emojis));
 
+      ufoExperiences['emoji-searched'].success({
+        metadata: {
+          emojisLength: emojis.length
+        }
+      });
       debug('emoji-typeahead.applyPropChanges', emojis.length, wasVisible, visible);
 
       _this.setState({
@@ -187,6 +192,15 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
   }
 
   _createClass(EmojiTypeAheadComponent, [{
+    key: "getChildContext",
+    value: function getChildContext() {
+      return {
+        emoji: {
+          emojiProvider: this.props.emojiProvider
+        }
+      };
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       var emojiProvider = this.props.emojiProvider;
@@ -206,6 +220,8 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
         this.fireAnalyticsEvent(typeaheadCancelledEvent(Date.now() - this.openTime, query, emojis));
       }
 
+      ufoExperiences['emoji-searched'].abort();
+      ufoExperiences['emoji-selection-recorded'].abort();
       this.sessionId = uuid();
       this.selected = false;
     }
@@ -251,6 +267,11 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
         options.sort = SearchSort.UsageFrequency;
       }
 
+      ufoExperiences['emoji-searched'].start();
+      ufoExperiences['emoji-searched'].addMetadata({
+        queryLength: (query === null || query === void 0 ? void 0 : query.length) || 0,
+        source: 'typeahead'
+      });
       this.renderStartTime = Date.now();
       emojiProvider.filter(query, options);
     }
@@ -286,29 +307,26 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
       var style = {
         display: visible ? 'block' : 'none'
       };
-      var classes = classNames(['ak-emoji-typeahead', styles.emojiTypeAhead]);
-      var emojiContextValue = {
-        emoji: {
-          emojiProvider: this.props.emojiProvider
-        }
-      };
-      return /*#__PURE__*/React.createElement(EmojiContextProvider, {
-        emojiContextValue: emojiContextValue
-      }, /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         style: style,
-        className: classes
-      }, /*#__PURE__*/React.createElement(EmojiList, {
+        className: 'ak-emoji-typeahead',
+        css: emojiTypeAhead
+      }, jsx(EmojiList, {
         emojis: emojis,
         onEmojiSelected: recordUsageOnSelection,
         ref: this.onEmojiListRef,
         loading: loading
-      })));
+      }));
     }
   }]);
 
   return EmojiTypeAheadComponent;
 }(PureComponent);
 
+_defineProperty(EmojiTypeAheadComponent, "childContextTypes", {
+  emoji: PropTypes.object
+});
+
 _defineProperty(EmojiTypeAheadComponent, "defaultProps", {
   onSelection: function onSelection() {},
   onOpen: function onOpen() {},

package/dist/esm/components/typeahead/EmojiTypeAheadItem.js

@@ -10,13 +10,14 @@ 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; } }
 
-import classNames from 'classnames';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import React from 'react';
 import { PureComponent } from 'react';
 import { toEmojiId } from '../../util/type-helpers';
 import { leftClick } from '../../util/mouse';
-import * as styles from './styles';
-import EmojiPickerPreview from '../picker/EmojiPickerPreview';
+import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
+import { typeAheadItem, selected as selectedStyles, typeAheadItemRow, typeaheadSelected } from './styles';
 
 var EmojiTypeAheadItem = /*#__PURE__*/function (_PureComponent) {
   _inherits(EmojiTypeAheadItem, _PureComponent);
@@ -61,22 +62,19 @@ var EmojiTypeAheadItem = /*#__PURE__*/function (_PureComponent) {
   _createClass(EmojiTypeAheadItem, [{
     key: "render",
     value: function render() {
-      var _classNames;
-
       var _this$props3 = this.props,
           selected = _this$props3.selected,
           emoji = _this$props3.emoji;
-      var classes = classNames((_classNames = {
-        'ak-emoji-typeahead-item': true
-      }, _defineProperty(_classNames, styles.typeAheadItem, true), _defineProperty(_classNames, styles.selected, selected), _classNames));
-      return /*#__PURE__*/React.createElement("div", {
-        className: classes,
+      var classes = [typeAheadItem, selected && selectedStyles];
+      return jsx("div", {
+        className: "ak-emoji-typeahead-item ".concat(selected ? typeaheadSelected : ''),
+        css: classes,
         onMouseDown: this.onEmojiSelected,
         onMouseMove: this.onEmojiMenuItemMouseMove,
         "data-emoji-id": emoji.shortName
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.typeAheadItemRow
-      }, /*#__PURE__*/React.createElement(EmojiPickerPreview, {
+      }, jsx("div", {
+        css: typeAheadItemRow
+      }, emoji && jsx(EmojiPreviewComponent, {
         emoji: emoji
       })));
     }

package/dist/esm/components/typeahead/EmojiTypeAheadList.js

@@ -10,8 +10,9 @@ 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; } }
 
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import Spinner from '@atlaskit/spinner';
-import classNames from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
 import { emojiTypeAheadMaxHeight } from '../../util/shared-styles';
@@ -20,7 +21,7 @@ import debug from '../../util/logger';
 import { actualMouseMove, mouseLocation } from '../../util/mouse';
 import Scrollable from '../common/Scrollable';
 import EmojiItem from './EmojiTypeAheadItem';
-import * as styles from './styles';
+import { emojiTypeAheadSpinner, emojiTypeAheadSpinnerContainer, typeAheadEmpty, typeAheadList, typeAheadListContainer } from './styles';
 
 function wrapIndex(emojis, index) {
   var len = emojis.length;
@@ -209,9 +210,9 @@ var EmojiTypeAheadList = /*#__PURE__*/function (_PureComponent) {
 
       if (emojis && emojis.length) {
         this.items = {};
-        return /*#__PURE__*/React.createElement("div", null, emojis.map(function (emoji, idx) {
+        return jsx("div", null, emojis.map(function (emoji, idx) {
           var key = getKey(emoji);
-          var item = /*#__PURE__*/React.createElement(EmojiItem, {
+          var item = jsx(EmojiItem, {
             emoji: emoji,
             key: key,
             selected: _this2.isSelectedEmoji(emoji, idx),
@@ -240,34 +241,31 @@ var EmojiTypeAheadList = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _classNames;
-
       var _this$props2 = this.props,
           emojis = _this$props2.emojis,
           loading = _this$props2.loading;
       var hasEmoji = emojis && emojis.length;
-      var classes = classNames((_classNames = {
-        'ak-emoji-typeahead-list': true
-      }, _defineProperty(_classNames, styles.typeAheadList, true), _defineProperty(_classNames, styles.typeAheadEmpty, !hasEmoji && !loading), _classNames));
+      var classes = [typeAheadList, !hasEmoji && !loading && typeAheadEmpty];
       var listBody;
 
       if (loading) {
-        listBody = /*#__PURE__*/React.createElement("div", {
-          className: styles.emojiTypeAheadSpinnerContainer
-        }, /*#__PURE__*/React.createElement("div", {
-          className: styles.emojiTypeAheadSpinner
-        }, /*#__PURE__*/React.createElement(Spinner, {
+        listBody = jsx("div", {
+          css: emojiTypeAheadSpinnerContainer
+        }, jsx("div", {
+          css: emojiTypeAheadSpinner
+        }, jsx(Spinner, {
           size: "medium"
         })));
       } else {
         listBody = this.renderItems(emojis);
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.typeAheadListContainer
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classes
-      }, /*#__PURE__*/React.createElement(Scrollable, {
+      return jsx("div", {
+        css: typeAheadListContainer
+      }, jsx("div", {
+        className: 'ak-emoji-typeahead-list',
+        css: classes
+      }, jsx(Scrollable, {
         ref: this.handleScrollableRef,
         maxHeight: "".concat(emojiTypeAheadMaxHeight, "px")
       }, listBody)));

package/dist/esm/components/typeahead/styles.js

@@ -1,11 +1,11 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { style } from 'typestyle';
+import { css } from '@emotion/core';
 import { token } from '@atlaskit/tokens';
 import { emojiPreviewSelectedColor, emojiTypeAheadMaxHeight, emojiTypeAheadWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../util/shared-styles';
-export var selected = 'emoji-typeahead-selected';
 export var emojiTypeAhead = 'emoji-typeahead-element';
-export var typeAheadListContainer = 'emoji-typeahead-list-container';
-export var typeAheadList = style({
+export var typeAheadListContainer = 'emoji-typeahead-list-container'; // editor-core is using this static class name for testing
+
+export var typeaheadSelected = 'emoji-typeahead-selected';
+export var typeAheadList = css({
   background: token('elevation.surface.overlay', 'white'),
   border: "1px solid ".concat(noDialogContainerBorderColor),
   borderRadius: noDialogContainerBorderRadius,
@@ -13,31 +13,31 @@ export var typeAheadList = style({
   color: token('color.text.subtle', '#333'),
   width: emojiTypeAheadWidth
 });
-export var typeAheadEmpty = style({
+export var typeAheadEmpty = css({
   display: 'none'
 });
-export var typeAheadItem = style({
+export var selected = css({
+  backgroundColor: emojiPreviewSelectedColor
+});
+export var typeAheadItem = css({
   cursor: 'pointer',
   display: 'block',
   listStyleType: 'none',
   overflow: 'hidden',
-  width: emojiTypeAheadWidth,
-  $nest: _defineProperty({}, "&.".concat(selected), {
-    backgroundColor: emojiPreviewSelectedColor
-  })
+  width: emojiTypeAheadWidth
 });
-export var typeAheadItemRow = style({
+export var typeAheadItemRow = css({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap',
   verticalAlign: 'middle'
 });
-export var emojiTypeAheadSpinnerContainer = style({
+export var emojiTypeAheadSpinnerContainer = css({
   position: 'relative',
   height: "".concat(emojiTypeAheadMaxHeight, "px"),
   paddingTop: "".concat(((emojiTypeAheadMaxHeight - 30) / 2).toFixed(), "px"),
   boxSizing: 'border-box'
 });
-export var emojiTypeAheadSpinner = style({
+export var emojiTypeAheadSpinner = css({
   textAlign: 'center'
 });