@atlaskit/emoji 64.2.1 → 64.3.0

package/dist/cjs/components/common/styles.js

@@ -2,18 +2,16 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uploadRetryButton = exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadEmojiButton = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.toneSelectorContainer = exports.submitDelete = exports.shortName = exports.selected = exports.selectOnHover = exports.previewText = exports.previewSingleLine = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderEmoji = exports.placeholderContainer = exports.placeholder = exports.name = exports.hiddenToneButton = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiToneSelectorContainer = exports.emojiSprite = exports.emojiScrollable = exports.emojiPreviewSection = exports.emojiPreviewErrorMessage = exports.emojiPreview = exports.emojiNode = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiContainer = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.emoji = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.cancelButton = exports.buttons = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.AddCustomEmoji = void 0;
+exports.uploadRetryButton = exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadEmojiButton = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.toneSelectorContainer = exports.submitDelete = exports.selectOnHoverStyles = exports.previewText = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderContainer = exports.placeholder = exports.hiddenToneButton = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiToneSelectorContainer = exports.emojiStyles = exports.emojiSprite = exports.emojiShortName = exports.emojiScrollable = exports.emojiPreviewErrorMessage = exports.emojiPreview = exports.emojiPickerAddEmoji = exports.emojiNodeStyles = exports.emojiName = exports.emojiMainStyle = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiDeleteButton = exports.emojiContainer = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.commonSelectedStyles = exports.cancelButton = exports.buttons = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.addCustomEmoji = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _constants = require("@atlaskit/theme/constants");
+var _core = require("@emotion/core");
 
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+var _constants = require("@atlaskit/theme/constants");
 
 var _tokens = require("@atlaskit/tokens");
 
@@ -21,25 +19,25 @@ var _constants2 = require("../../util/constants");
 
 var _sharedStyles = require("../../util/shared-styles");
 
-var _typestyle = require("typestyle");
-
-var _$nest, _$nest2, _$nest3, _$nest4, _$nest6, _$nest7, _$nest8, _$nest9, _$nest10, _$nest11;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _colors = require("@atlaskit/theme/colors");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _css, _css2, _span, _css3, _css6, _input, _css7;
 
-var selected = 'emoji-common-selected';
-exports.selected = selected;
-var selectOnHover = 'emoji-common-select-on-hover';
-exports.selectOnHover = selectOnHover;
+var commonSelectedStyles = 'emoji-common-selected';
+exports.commonSelectedStyles = commonSelectedStyles;
+var selectOnHoverStyles = 'emoji-common-select-on-hover';
+exports.selectOnHoverStyles = selectOnHoverStyles;
 var emojiSprite = 'emoji-common-emoji-sprite';
 exports.emojiSprite = emojiSprite;
-var emojiNode = 'emoji-common-node';
-exports.emojiNode = emojiNode;
+var emojiNodeStyles = 'emoji-common-node';
+exports.emojiNodeStyles = emojiNodeStyles;
 var emojiImage = 'emoji-common-emoji-image';
 exports.emojiImage = emojiImage;
-var deleteButton = (0, _typestyle.style)({
+var emojiDeleteButton = 'emoji-common-deleteButton';
+exports.emojiDeleteButton = emojiDeleteButton;
+var emojiMainStyle = 'emoji-common-main-styles';
+exports.emojiMainStyle = emojiMainStyle;
+var deleteButton = (0, _core.css)({
   // hide by default
   visibility: 'hidden',
   display: 'flex',
@@ -53,7 +51,14 @@ var deleteButton = (0, _typestyle.style)({
   marginBottom: '-4px'
 });
 exports.deleteButton = deleteButton;
-var emoji = (0, _typestyle.style)({
+var emojiToneSelectorContainer = (0, _core.css)({
+  flex: 1,
+  display: 'flex',
+  justifyContent: 'flex-end',
+  padding: '8px 10px 8px 0'
+});
+exports.emojiToneSelectorContainer = emojiToneSelectorContainer;
+var emojiStyles = (0, _core.css)((_css = {
   borderRadius: '5px',
   backgroundColor: 'transparent',
   display: 'inline-block',
@@ -61,191 +66,147 @@ var emoji = (0, _typestyle.style)({
   // Ensure along with vertical align middle, we don't increase the line height for p and some
   // headings. Smaller headings get a slight increase in height, cannot add more negative margin
   // as a "selected" emoji (e.g. in the editor) will not look good.
-  margin: '-1px 0',
-  $nest: (_$nest = {}, (0, _defineProperty2.default)(_$nest, "&.".concat(selected, ",&.").concat(selectOnHover, ":hover"), {
-    backgroundColor: _sharedStyles.akEmojiSelectedBackgroundColor
-  }), (0, _defineProperty2.default)(_$nest, "&.".concat(selected, ",&.").concat(selectOnHover, ":hover .").concat(deleteButton), {
-    // show delete button on hover
-    visibility: 'visible'
-  }), (0, _defineProperty2.default)(_$nest, "img", {
-    display: 'block'
-  }), _$nest)
-});
-exports.emoji = emoji;
-var emojiContainer = (0, _typestyle.style)({
+  margin: '-1px 0'
+}, (0, _defineProperty2.default)(_css, "&.".concat(commonSelectedStyles, ",&.").concat(selectOnHoverStyles, ":hover"), {
+  backgroundColor: _sharedStyles.akEmojiSelectedBackgroundColor
+}), (0, _defineProperty2.default)(_css, "&.".concat(commonSelectedStyles, ",&.").concat(selectOnHoverStyles, ":hover .").concat(emojiDeleteButton), {
+  // show delete button on hover
+  visibility: 'visible'
+}), (0, _defineProperty2.default)(_css, "img", {
+  display: 'block'
+}), _css));
+exports.emojiStyles = emojiStyles;
+var emojiContainer = (0, _core.css)((_css2 = {
   display: 'inline-block',
   // Ensure along with vertical align middle, we don't increase the line height for h1..h6, and p
-  margin: '-1px 0',
-  $nest: (_$nest2 = {}, (0, _defineProperty2.default)(_$nest2, "&.".concat(selected, ",&.").concat(selectOnHover, ":hover"), {
-    backgroundColor: _sharedStyles.akEmojiSelectedBackgroundColor
-  }), (0, _defineProperty2.default)(_$nest2, ".".concat(emojiSprite), {
-    background: 'transparent no-repeat',
-    display: 'inline-block',
-    verticalAlign: 'middle',
-    height: "".concat(_constants2.defaultEmojiHeight, "px"),
-    width: "".concat(_constants2.defaultEmojiHeight, "px")
-  }), _$nest2)
-});
+  margin: '-1px 0'
+}, (0, _defineProperty2.default)(_css2, "&.".concat(commonSelectedStyles, ",&.").concat(selectOnHoverStyles, ":hover"), {
+  backgroundColor: _sharedStyles.akEmojiSelectedBackgroundColor
+}), (0, _defineProperty2.default)(_css2, ".".concat(emojiSprite), {
+  background: 'transparent no-repeat',
+  display: 'inline-block',
+  verticalAlign: 'middle',
+  minHeight: "".concat(_constants2.defaultEmojiHeight, "px"),
+  minWidth: "".concat(_constants2.defaultEmojiHeight, "px")
+}), _css2));
 exports.emojiContainer = emojiContainer;
 var placeholder = 'emoji-common-placeholder';
 exports.placeholder = placeholder;
-var placeholderContainer = (0, _typestyle.style)({
+var placeholderContainer = (0, _core.css)({
   // Ensure no vertical reflow
   margin: '-1px 0',
   display: 'inline-block',
-  background: '#f7f7f7',
+  background: (0, _tokens.token)('color.border', '#f7f7f7'),
   borderRadius: '20%',
   verticalAlign: 'middle',
   whiteSpace: 'nowrap'
 });
 exports.placeholderContainer = placeholderContainer;
-var placeholderEmoji = (0, _typestyle.style)({
-  display: 'inline-block',
-  verticalAlign: 'middle',
-  whiteSpace: 'nowrap'
-});
-exports.placeholderEmoji = placeholderEmoji;
-var emojiButton = (0, _typestyle.style)({
+var emojiButton = (0, _core.css)((_css3 = {
   backgroundColor: 'transparent',
   border: '0',
   cursor: 'pointer',
-  padding: 0,
-  $nest: (_$nest4 = {}, (0, _defineProperty2.default)(_$nest4, '&::-moz-focus-inner', {
-    border: '0 none',
-    padding: 0
-  }), (0, _defineProperty2.default)(_$nest4, '&>span', {
-    borderRadius: '5px',
-    padding: '8px',
-    $nest: (_$nest3 = {}, (0, _defineProperty2.default)(_$nest3, "&>.".concat(emojiSprite), {
-      height: '24px',
-      width: '24px'
-    }), (0, _defineProperty2.default)(_$nest3, "&>img", {
-      height: '24px',
-      width: '24px'
-    }), _$nest3)
-  }), _$nest4)
-});
+  padding: 0
+}, (0, _defineProperty2.default)(_css3, '&::-moz-focus-inner', {
+  border: '0 none',
+  padding: 0
+}), (0, _defineProperty2.default)(_css3, '&>span', (_span = {
+  borderRadius: '5px',
+  padding: '8px'
+}, (0, _defineProperty2.default)(_span, "&>.".concat(emojiSprite), {
+  height: '24px',
+  width: '24px'
+}), (0, _defineProperty2.default)(_span, "&>img", {
+  height: '24px',
+  width: '24px'
+}), _span)), _css3));
 exports.emojiButton = emojiButton;
-var hiddenToneButton = (0, _typestyle.style)({
+var hiddenToneButton = (0, _core.css)({
   // Hide currently selected tone that rendered in the ToneSelector to avoid duplication
-  // Set $ unique: true to be able to apply the ccs property to an element as described here https://github.com/typestyle/typestyle/issues/253
-  display: 'none',
-  $unique: true
+  display: 'none'
 }); // Emoji Preview
 
 exports.hiddenToneButton = hiddenToneButton;
 var buttons = 'emoji-common-buttons';
 exports.buttons = buttons;
-var preview = 'emoji-common-preview';
-exports.preview = preview;
-var previewImg = 'emoji-common-preview-image';
-exports.previewImg = previewImg;
-var previewText = 'emoji-common-preview-text';
-exports.previewText = previewText;
-var name = 'emoji-common-name';
-exports.name = name;
-var shortName = 'emoji-common-shortname';
-exports.shortName = shortName;
-var previewSingleLine = 'emoji-common-preview-single-line';
-exports.previewSingleLine = previewSingleLine;
 var toneSelectorContainer = 'emoji-common-tone-selector-container';
 exports.toneSelectorContainer = toneSelectorContainer;
-var emojiPreviewSection = 'emoji-preview-section';
-exports.emojiPreviewSection = emojiPreviewSection;
-var emojiPreview = (0, _typestyle.style)({
+var emojiPickerAddEmoji = 'emoji-picker-add-emoji';
+exports.emojiPickerAddEmoji = emojiPickerAddEmoji;
+var previewText = (0, _core.css)({
   display: 'flex',
-  height: '50px',
-  boxSizing: 'border-box',
-  $nest: (_$nest9 = {}, (0, _defineProperty2.default)(_$nest9, ".".concat(preview), {
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'nowrap',
-    padding: '10px',
-    $nest: (_$nest8 = {}, (0, _defineProperty2.default)(_$nest8, ".".concat(emojiSprite), {
-      height: '32px',
-      margin: '0',
-      width: '32px'
-    }), (0, _defineProperty2.default)(_$nest8, ".".concat(previewImg), {
-      display: 'inline-block',
-      flex: 'initial',
-      width: '32px',
-      $nest: {
-        '&>span': {
-          width: '32px',
-          height: '32px',
-          padding: 0,
-          maxHeight: 'inherit',
-          $nest: {
-            '&>img': {
-              position: 'relative',
-              left: '50%',
-              top: '50%',
-              transform: 'translateX(-50%) translateY(-50%)',
-              maxHeight: '32px',
-              maxWidth: '32px',
-              padding: 0,
-              display: 'block'
-            }
-          }
-        }
-      }
-    }), (0, _defineProperty2.default)(_$nest8, ".".concat(previewText), {
-      display: 'flex',
-      flexDirection: 'column',
-      marginLeft: '10px',
-      marginTop: '-2px',
-      maxWidth: '285px',
-      width: '285px'
-      /* IE */
-      ,
-      flexGrow: 1,
-      flexShrink: 1,
-      $nest: (_$nest6 = {}, (0, _defineProperty2.default)(_$nest6, ".".concat(name), {
-        display: 'block',
-        color: (0, _tokens.token)('color.text', colors.N900),
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        $nest: (0, _defineProperty2.default)({}, '&:first-letter', {
-          textTransform: 'uppercase'
-        })
-      }), (0, _defineProperty2.default)(_$nest6, ".".concat(shortName), {
-        display: 'block',
-        color: (0, _tokens.token)('color.text.subtle', colors.N200),
-        fontSize: '12px',
-        lineHeight: 1,
-        marginBottom: '-2px',
-        overflow: 'hidden',
-        paddingBottom: '2px',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-      }), _$nest6)
-    }), (0, _defineProperty2.default)(_$nest8, ".".concat(previewSingleLine), {
-      paddingTop: '10px',
-      $nest: (_$nest7 = {}, (0, _defineProperty2.default)(_$nest7, ".".concat(name), {
-        display: 'none'
-      }), (0, _defineProperty2.default)(_$nest7, ".".concat(shortName), {
-        color: (0, _tokens.token)('color.text', colors.N900),
-        fontSize: '14px'
-      }), _$nest7)
-    }), _$nest8)
-  }), (0, _defineProperty2.default)(_$nest9, ".".concat(previewText), {
-    maxWidth: '235px',
-    width: '235px'
-    /* IE */
-
-  }), _$nest9)
+  flexDirection: 'column',
+  alignSelf: 'center',
+  marginTop: '-2px',
+  marginLeft: '10px',
+  maxWidth: '285px',
+  width: '285px'
+  /* IE */
+  ,
+  flexGrow: 1,
+  flexShrink: 1
 });
-exports.emojiPreview = emojiPreview;
-var emojiToneSelectorContainer = (0, _typestyle.style)({
-  flex: 1,
+exports.previewText = previewText;
+var emojiName = (0, _core.css)((0, _defineProperty2.default)({
+  display: 'block',
+  color: (0, _tokens.token)('color.text', _colors.N900),
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+}, '&:first-letter', {
+  textTransform: 'uppercase'
+}));
+exports.emojiName = emojiName;
+var emojiShortName = (0, _core.css)((0, _defineProperty2.default)({
+  display: 'block',
+  color: (0, _tokens.token)('color.text.subtle', _colors.N200),
+  fontSize: '12px',
+  lineHeight: 1,
+  marginBottom: '-2px',
+  overflow: 'hidden',
+  paddingBottom: '2px',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+}, '&:first-of-type', {
+  color: (0, _tokens.token)('color.text', _colors.N900),
+  fontSize: '14px'
+}));
+exports.emojiShortName = emojiShortName;
+var preview = (0, _core.css)({
   display: 'flex',
-  justifyContent: 'flex-end',
-  padding: '8px 10px 8px 0'
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  padding: '10px'
+});
+exports.preview = preview;
+var previewImg = (0, _core.css)((_css6 = {
+  display: 'inline-block',
+  flex: 'initial',
+  width: '32px'
+}, (0, _defineProperty2.default)(_css6, "& .".concat(emojiSprite, ", > span"), {
+  width: '32px',
+  height: '32px',
+  padding: 0,
+  maxHeight: 'inherit'
+}), (0, _defineProperty2.default)(_css6, "& > span > img", {
+  position: 'relative',
+  left: '50%',
+  top: '50%',
+  transform: 'translateX(-50%) translateY(-50%)',
+  maxHeight: '32px',
+  maxWidth: '32px',
+  padding: 0,
+  display: 'block'
+}), _css6));
+exports.previewImg = previewImg;
+var emojiPreview = (0, _core.css)({
+  display: 'flex',
+  height: '50px',
+  boxSizing: 'border-box'
 }); // Scrollable
 
-exports.emojiToneSelectorContainer = emojiToneSelectorContainer;
-var emojiScrollable = (0, _typestyle.style)({
+exports.emojiPreview = emojiPreview;
+var emojiScrollable = (0, _core.css)({
   border: "1px solid ".concat((0, _tokens.token)('color.border', '#fff')),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   display: 'block',
@@ -256,7 +217,7 @@ var emojiScrollable = (0, _typestyle.style)({
 }); // EmojiUpload
 
 exports.emojiScrollable = emojiScrollable;
-var emojiUpload = (0, _typestyle.style)({
+var emojiUpload = (0, _core.css)({
   height: '78px',
   padding: '10px',
   display: 'flex',
@@ -264,101 +225,92 @@ var emojiUpload = (0, _typestyle.style)({
   justifyContent: 'space-around'
 });
 exports.emojiUpload = emojiUpload;
-var uploadChooseFileMessage = (0, _typestyle.style)({
-  color: (0, _tokens.token)('color.text.subtle', colors.N300),
+var uploadChooseFileMessage = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.subtle', _colors.N300),
   fontSize: '12px',
   paddingBottom: '7px'
 });
 exports.uploadChooseFileMessage = uploadChooseFileMessage;
-var emojiUploadBottom = (0, _typestyle.style)({
+var emojiUploadBottom = (0, _core.css)({
   fontSize: '11px'
 });
 exports.emojiUploadBottom = emojiUploadBottom;
-var uploadChooseFileRow = (0, _typestyle.style)({
+var uploadChooseFileRow = (0, _core.css)({
   display: 'flex',
   justifyContent: 'space-between'
 });
 exports.uploadChooseFileRow = uploadChooseFileRow;
-var uploadChooseFileEmojiName = (0, _typestyle.style)({
+var uploadChooseFileEmojiName = (0, _core.css)({
   flex: '1 1 auto',
   marginRight: '5px',
-  $nest: {
-    input: {
-      background: 'transparent',
-      border: 0,
-      outline: 'none',
-      $nest: (_$nest10 = {}, (0, _defineProperty2.default)(_$nest10, '&:invalid', {
-        boxShadow: 'none'
-      }), (0, _defineProperty2.default)(_$nest10, '&::-ms-clear', {
-        display: 'none'
-      }), _$nest10)
-    }
-  }
+  input: (_input = {
+    background: 'transparent',
+    border: 0,
+    outline: 'none'
+  }, (0, _defineProperty2.default)(_input, '&:invalid', {
+    boxShadow: 'none'
+  }), (0, _defineProperty2.default)(_input, '&::-ms-clear', {
+    display: 'none'
+  }), _input)
 });
 exports.uploadChooseFileEmojiName = uploadChooseFileEmojiName;
-var uploadChooseFileBrowse = (0, _typestyle.style)({
+var uploadChooseFileBrowse = (0, _core.css)({
   flex: '0 0 auto'
 });
 exports.uploadChooseFileBrowse = uploadChooseFileBrowse;
-var uploadPreviewFooter = (0, _typestyle.style)({
+var uploadPreviewFooter = (0, _core.css)({
   display: 'flex',
   flexDirection: 'column',
   height: '100px',
   padding: '10px'
 });
 exports.uploadPreviewFooter = uploadPreviewFooter;
-var uploadPreview = (0, _typestyle.style)({
+var uploadPreview = (0, _core.css)({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  background: (0, _tokens.token)('color.background.neutral', colors.N20),
+  background: (0, _tokens.token)('color.background.neutral', _colors.N20),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   padding: '10px'
 });
 exports.uploadPreview = uploadPreview;
-var uploadPreviewText = (0, _typestyle.style)({
-  $nest: {
-    h5: {
-      color: (0, _tokens.token)('color.text.subtle', colors.N300),
-      paddingBottom: '4px',
-      fontSize: '12px'
-    },
-    img: {
-      maxHeight: '20px',
-      maxWidth: '50px'
-    }
+var uploadPreviewText = (0, _core.css)({
+  h5: {
+    color: (0, _tokens.token)('color.text.subtle', _colors.N300),
+    paddingBottom: '4px',
+    fontSize: '12px'
+  },
+  img: {
+    maxHeight: '20px',
+    maxWidth: '50px'
   }
 });
 exports.uploadPreviewText = uploadPreviewText;
-var bigEmojiPreview = (0, _typestyle.style)({
+var bigEmojiPreview = (0, _core.css)({
   paddingLeft: '4px',
-  $nest: {
-    img: {
-      maxHeight: '40px',
-      maxWidth: '100px'
-    }
+  img: {
+    maxHeight: '40px',
+    maxWidth: '100px'
   }
 });
 exports.bigEmojiPreview = bigEmojiPreview;
-var uploadAddRow = (0, _typestyle.style)({
+var uploadAddRow = (0, _core.css)({
   display: 'flex',
   justifyContent: 'flex-end',
   alignItems: 'center',
   paddingTop: '10px'
 });
 exports.uploadAddRow = uploadAddRow;
-var AddCustomEmoji = (0, _typestyle.style)({
+var addCustomEmoji = (0, _core.css)({
   alignSelf: 'center',
   marginLeft: '10px',
   marginBottom: '10px'
 }); // Emoji Delete preview
 
-exports.AddCustomEmoji = AddCustomEmoji;
+exports.addCustomEmoji = addCustomEmoji;
 var submitDelete = 'emoji-submit-delete';
 exports.submitDelete = submitDelete;
-var previewButtonGroup = 'emoji-preview-button-group';
-exports.previewButtonGroup = previewButtonGroup;
-var deletePreview = (0, _typestyle.style)({
+var deletePreview = (0, _core.css)({
   height: '100px',
   padding: '10px',
   display: 'flex',
@@ -366,100 +318,92 @@ var deletePreview = (0, _typestyle.style)({
   justifyContent: 'flex-end'
 });
 exports.deletePreview = deletePreview;
-var deleteText = (0, _typestyle.style)({
+var deleteText = (0, _core.css)({
   height: '64px',
   fontSize: '12px',
-  $nest: {
-    ':first-child': {
-      color: (0, _tokens.token)('color.text.subtle', colors.N300),
-      lineHeight: '16px'
-    }
+  '&:first-of-type': {
+    color: (0, _tokens.token)('color.text.subtle', _colors.N300),
+    lineHeight: '16px'
   }
 });
 exports.deleteText = deleteText;
-var deleteFooter = (0, _typestyle.style)({
+var previewButtonGroup = (0, _core.css)({
+  display: 'flex'
+});
+exports.previewButtonGroup = previewButtonGroup;
+var deleteFooter = (0, _core.css)((_css7 = {
   display: 'flex',
   height: '40px',
   alignItems: 'center',
   justifyContent: 'space-between',
-  $nest: (_$nest11 = {
-    img: {
-      maxHeight: '32px',
-      maxWidth: '72px'
-    }
-  }, (0, _defineProperty2.default)(_$nest11, ".".concat(previewButtonGroup), {
+  img: {
+    maxHeight: '32px',
+    maxWidth: '72px'
+  }
+}, (0, _defineProperty2.default)(_css7, ".".concat(submitDelete), {
+  width: '84px',
+  fontWeight: 'bold',
+  marginRight: '4px'
+}), (0, _defineProperty2.default)(_css7, "button", {
+  display: 'flex',
+  justifyContent: 'center',
+  fontSize: '14px',
+  div: {
     display: 'flex'
-  }), (0, _defineProperty2.default)(_$nest11, ".".concat(submitDelete), {
-    width: '84px',
-    fontWeight: 'bold',
-    marginRight: '4px'
-  }), (0, _defineProperty2.default)(_$nest11, "button", {
-    display: 'flex',
-    justifyContent: 'center',
-    fontSize: '14px',
-    $nest: {
-      div: {
-        display: 'flex'
-      }
-    }
-  }), _$nest11)
-});
+  }
+}), _css7));
 exports.deleteFooter = deleteFooter;
-var emojiDeleteErrorMessage = (0, _typestyle.style)({
+var emojiDeleteErrorMessage = (0, _core.css)({
   display: 'flex',
-  color: (0, _tokens.token)('color.text.danger', colors.R400),
+  color: (0, _tokens.token)('color.text.danger', _colors.R400),
   alignItems: 'center',
   justifyContent: 'flex-end',
   paddingRight: '4px'
 });
 exports.emojiDeleteErrorMessage = emojiDeleteErrorMessage;
-var emojiChooseFileErrorMessage = (0, _typestyle.style)({
+var emojiChooseFileErrorMessage = (0, _core.css)({
   display: 'flex',
-  color: (0, _tokens.token)('color.text.danger', colors.R300),
+  color: (0, _tokens.token)('color.text.danger', _colors.R300),
   paddingRight: '10px',
   justifyContent: 'flex-start'
 });
 exports.emojiChooseFileErrorMessage = emojiChooseFileErrorMessage;
-var emojiPreviewErrorMessage = (0, _typestyle.style)({
+var emojiPreviewErrorMessage = (0, _core.css)({
   display: 'inline-flex',
-  color: (0, _tokens.token)('color.text.danger', colors.R400),
+  color: (0, _tokens.token)('color.text.danger', _colors.R400),
   paddingRight: '10px',
   justifyContent: 'flex-end',
   alignItems: 'center'
 });
 exports.emojiPreviewErrorMessage = emojiPreviewErrorMessage;
-var addCustomEmojiButton = (0, _typestyle.style)({
+var addCustomEmojiButton = (0, _core.css)({
   maxWidth: '285px'
 });
 exports.addCustomEmojiButton = addCustomEmojiButton;
-var uploadRetryButton = (0, _typestyle.style)({
+var uploadRetryButton = (0, _core.css)({
   maxWidth: '172px',
   justifyContent: 'center',
   fontWeight: 'bold',
   marginRight: '4px',
-  $nest: {
-    div: {
-      display: 'flex'
-    }
+  div: {
+    display: 'flex'
   }
 });
 exports.uploadRetryButton = uploadRetryButton;
-var uploadEmojiButton = (0, _typestyle.style)({
+var uploadEmojiButton = (0, _core.css)({
   maxWidth: '187px',
   justifyContent: 'center',
   marginRight: '4px',
-  $nest: {
-    div: {
-      display: 'flex'
-    }
+  div: {
+    display: 'flex'
   }
 });
 exports.uploadEmojiButton = uploadEmojiButton;
-var cancelButton = (0, _typestyle.style)({
+var cancelButton = (0, _core.css)({
   maxWidth: '100px'
 });
 exports.cancelButton = cancelButton;
-var buttonSpinner = (0, _typestyle.style)({
+var buttonSpinner = (0, _core.css)({
   marginRight: '10px',
   marginLeft: '10px'
 });