@atlaskit/emoji 68.0.4 → 69.0.0

package/dist/es2019/components/compiled/common/EmojiDeletePreview.js

@@ -0,0 +1,126 @@
+/* EmojiDeletePreview.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./EmojiDeletePreview.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Component } from 'react';
+import { N300 } from '@atlaskit/theme/colors';
+import { FormattedMessage, injectIntl } from 'react-intl-next';
+import AkButton from '@atlaskit/button/new';
+import Heading from '@atlaskit/heading';
+import FocusLock from 'react-focus-lock';
+import { messages } from '../../i18n';
+import CachingEmoji from '../../common/CachingEmoji';
+import EmojiErrorMessage, { emojiErrorScreenreaderTestId } from './EmojiErrorMessage';
+import RetryableButton from './RetryableButton';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import { fg } from '@atlaskit/platform-feature-flags';
+const deleteFooter = null;
+const deletePreview = null;
+const deleteText = null;
+const previewButtonGroup = null;
+export const emojiDeletePreviewTestId = 'emoji-delete-preview';
+const deleteEmojiLabelId = 'fabric.emoji.delete.label.id';
+class EmojiDeletePreview extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onSubmit", () => {
+      const {
+        emoji,
+        onDeleteEmoji,
+        onCloseDelete
+      } = this.props;
+      if (!this.state.loading) {
+        this.setState({
+          loading: true
+        });
+        onDeleteEmoji(emoji).then(success => {
+          if (success) {
+            onCloseDelete();
+            return;
+          }
+          this.setState({
+            loading: false,
+            error: true
+          });
+        });
+      }
+    });
+    _defineProperty(this, "onCancel", () => {
+      this.props.onCloseDelete();
+    });
+    this.state = {
+      loading: false,
+      error: false
+    };
+  }
+  UNSAFE_componentWillUpdate(nextProps) {
+    if (!fg('platform_editor_react18_elements_emoji')) {
+      if (nextProps.emoji.id !== this.props.emoji.id) {
+        this.setState({
+          error: false
+        });
+      }
+    }
+  }
+  componentDidUpdate(prevProps) {
+    if (fg('platform_editor_react18_elements_emoji')) {
+      if (prevProps.emoji.id !== this.props.emoji.id) {
+        this.setState({
+          error: false
+        });
+      }
+    }
+  }
+  render() {
+    const {
+      emoji,
+      intl
+    } = this.props;
+    const {
+      loading,
+      error
+    } = this.state;
+    const {
+      formatMessage
+    } = intl;
+    return /*#__PURE__*/React.createElement(FocusLock, {
+      noFocusGuards: true
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-testid": emojiDeletePreviewTestId,
+      className: ax(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _4t3i53f4 _1e0c1txw _2lx21bp4 _1bahesu3"])
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax(["_11c8dcr7 _4t3ivbgk _pnmb1n3s _jwwg7vkz"])
+    }, /*#__PURE__*/React.createElement(Heading, {
+      size: "xxsmall"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.deleteEmojiTitle)), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
+      values: {
+        emojiShortName: emoji.shortName
+      }
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: ax(["_11c82smr _1e0c1txw _4t3i1ylp _4cvr1h6o _1bah1yb4 _19l3zwfg _rtyst9kd _m73io7ol _1txf1igg _1qz31b66"])
+    }, /*#__PURE__*/React.createElement(CachingEmoji, {
+      emoji: emoji
+    }), /*#__PURE__*/React.createElement("div", {
+      className: ax(["_1e0c1txw"])
+    }, error ? !loading ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
+      message: formatMessage(messages.deleteEmojiFailed),
+      errorStyle: "delete",
+      tooltip: true
+    }) : null : null, /*#__PURE__*/React.createElement(VisuallyHidden, {
+      id: deleteEmojiLabelId
+    }, formatMessage(messages.deleteEmojiLabel)), /*#__PURE__*/React.createElement(RetryableButton, {
+      label: formatMessage(messages.deleteEmojiLabel),
+      onSubmit: this.onSubmit,
+      appearance: "danger",
+      loading: loading,
+      error: error,
+      ariaLabelledBy: `${emojiErrorScreenreaderTestId} ${deleteEmojiLabelId}`
+    }), /*#__PURE__*/React.createElement(AkButton, {
+      appearance: "subtle",
+      onClick: this.onCancel
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.cancelLabel))))));
+  }
+}
+export default injectIntl(EmojiDeletePreview);

package/dist/es2019/components/compiled/common/EmojiErrorMessage.compiled.css

@@ -0,0 +1,9 @@
+._1bah1y6m{justify-content:flex-start}
+._1bahesu3{justify-content:flex-end}
+._1e0c116y{display:inline-flex}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._syaz1ick{color:var(--ds-text-danger,#de350b)}
+._syaz1l5o{color:var(--ds-text-danger,#ff5630)}
+._u5f319bv{padding-right:10px}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/es2019/components/compiled/common/EmojiErrorMessage.js

@@ -0,0 +1,51 @@
+/* EmojiErrorMessage.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiErrorMessage.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { R300, R400 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
+import ErrorIcon from '@atlaskit/icon/core/migration/error';
+import { useIntl } from 'react-intl-next';
+import { messages } from '../../i18n';
+const errorMessageStyles = {
+  chooseFile: "_1e0c1txw _syaz1l5o _u5f319bv _1bah1y6m",
+  delete: "_1e0c1txw _syaz1ick _4cvr1h6o _1bahesu3 _u5f31b66",
+  preview: "_1e0c116y _syaz1ick _u5f319bv _1bahesu3 _4cvr1h6o"
+};
+export const emojiErrorScreenreaderTestId = 'emoji-error-screenreader-message';
+export const emojiErrorMessageTestId = 'emoji-error-message';
+export const emojiErrorMessageTooltipTestId = 'emoji-error-message-tooltip';
+export const emojiErrorIconTestId = 'emoji-error-icon';
+const EmojiErrorMessage = props => {
+  const {
+    errorStyle,
+    message,
+    tooltip
+  } = props;
+  const {
+    formatMessage
+  } = useIntl();
+  const visualContent = tooltip ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiErrorMessageTestId,
+    className: ax([errorMessageStyles[errorStyle]])
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: message,
+    position: "top",
+    testId: emojiErrorMessageTooltipTestId
+  }, /*#__PURE__*/React.createElement(ErrorIcon, {
+    color: "currentColor",
+    label: formatMessage(messages.error),
+    LEGACY_size: "medium",
+    spacing: "spacious",
+    testId: emojiErrorIconTestId
+  }))) : /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiErrorMessageTestId,
+    className: ax([errorMessageStyles[errorStyle]])
+  }, /*#__PURE__*/React.createElement(ErrorIcon, {
+    color: "currentColor",
+    label: formatMessage(messages.error),
+    LEGACY_size: "small"
+  }), message);
+  return visualContent;
+};
+export default EmojiErrorMessage;

package/dist/es2019/components/compiled/common/EmojiFallback.compiled.css

@@ -0,0 +1,7 @@
+._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1reo15vq{overflow-x:hidden}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}

package/dist/es2019/components/compiled/common/EmojiFallback.js

@@ -0,0 +1,33 @@
+/* EmojiFallback.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./EmojiFallback.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { EmojiNodeWrapper } from './Emoji';
+import { emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles } from '../../common/styles';
+const emojiFallbackStyles = null;
+export const EmojiFallback = props => {
+  const {
+    emoji,
+    selected,
+    selectOnHover,
+    className
+  } = props;
+  const {
+    fallback,
+    shortName
+  } = emoji;
+  const classes = `${emojiNodeStyles} ${selected ? commonSelectedStyles : ''} ${selectOnHover ? selectOnHoverStyles : ''} ${className ? className : ''}`;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    React.createElement(EmojiNodeWrapper, _extends({
+      type: "image"
+    }, props, {
+      className: classes
+    }), /*#__PURE__*/React.createElement("span", {
+      className: ax(["_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _4t3i1osq _1bah1h6o _4cvr1h6o"])
+    }, fallback || shortName))
+  );
+};
+export default EmojiFallback;

package/dist/es2019/components/compiled/common/EmojiPlaceholder.compiled.css

@@ -0,0 +1,21 @@
+._16qq1t1r:before{animation:k1mgd8jj 1s cubic-bezier(.4,0,.2,1) infinite}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
+._18m915vq{overflow-y:hidden}
+._18u0idpf{margin-left:0}
+._19pk1n1a{margin-top:-1px}
+._1cs8stnw:before{position:absolute}
+._1e0c1o8l{display:inline-block}
+._1kt9b3bt:before{content:""}
+._1mp41osq:before{width:100%}
+._1reo15vq{overflow-x:hidden}
+._1rus1j54:before{background-color:var(--ds-background-neutral,rgba(9,30,66,.04))}
+._2hwxidpf{margin-right:0}
+._bfhkttw1{background-color:var(--ds-border,#f7f7f7)}
+._cfu11ule:before{display:block}
+._kfgt1osq:before{height:100%}
+._kqswh2mm{position:relative}
+._o5721q9c{white-space:nowrap}
+._otyr1n1a{margin-bottom:-1px}
+._s7n4nkob{vertical-align:middle}
+._y3gn1h6o{text-align:center}
+@keyframes k1mgd8jj{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}

package/dist/es2019/components/compiled/common/EmojiPlaceholder.js

@@ -0,0 +1,51 @@
+/* EmojiPlaceholder.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiPlaceholder.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { N20A } from '@atlaskit/theme/colors';
+import { defaultEmojiHeight } from '../../../util/constants';
+import { placeholder } from '../../common/styles';
+const placeholderContainer = null;
+const easeSweep = null;
+const placeholderContainerAnimated = null;
+export const emojiPlaceholderTestId = shortName => `emoji-placeholder-${shortName}`;
+const EmojiPlaceholder = props => {
+  const {
+    shortName,
+    size = defaultEmojiHeight,
+    showTooltip,
+    representation,
+    loading = false
+  } = props;
+  let scaledWidth;
+  let scaledHeight;
+  if (representation && size) {
+    const width = representation.width;
+    const height = representation.height;
+    if (width && height) {
+      scaledWidth = size / height * width;
+      scaledHeight = size;
+    }
+  }
+  const width = scaledWidth || size;
+  const height = scaledHeight || size;
+  const style = {
+    fill: 'f7f7f7',
+    minWidth: `${width}px`,
+    width: `${width}px`,
+    height: `${height}px`
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    "data-testid": emojiPlaceholderTestId(shortName),
+    "aria-busy": loading,
+    role: "status",
+    "aria-label": shortName
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: ax(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkosqtm _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhkttw1 _s7n4nkob _o5721q9c _y3gn1h6o", loading && "", loading && "_16qq1t1r _1kt9b3bt _cfu11ule _1cs8stnw _1rus1j54 _kfgt1osq _1mp41osq", placeholder]),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    style: style,
+    title: showTooltip ? shortName : ''
+  });
+};
+export default EmojiPlaceholder;

package/dist/es2019/components/compiled/common/EmojiPreviewComponent.compiled.css

@@ -0,0 +1,52 @@
+._10hw2smr:first-of-type{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._118didpf span[role=img]>img{padding-bottom:0}
+._12s6idpf .emoji-common-emoji-sprite, ._1e4didpf span[role=img]{padding-top:0}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._18u019bv{margin-left:10px}
+._19bv19bv{padding-left:10px}
+._19pk1i6y{margin-top:var(--ds-space-negative-025,-2px)}
+._1bsb3sup{width:285px}
+._1bsbzwfg{width:2pc}
+._1bto1l2s{text-overflow:ellipsis}
+._1dvqidpf .emoji-common-emoji-sprite, ._vwlxidpf span[role=img]{padding-right:0}
+._1e0c1o8l{display:inline-block}
+._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
+._1e7azwfg span[role=img]>img{max-width:2pc}
+._1gdiidpf .emoji-common-emoji-sprite, ._1f45idpf span[role=img]{padding-bottom:0}
+._1h6o1ssb span[role=img]>img{top:50%}
+._1l4xidpf span[role=img]>img{padding-top:0}
+._1l79idpf span[role=img]>img{padding-right:0}
+._1n261q9c{flex-wrap:nowrap}
+._1o9zkb7n{flex-shrink:1}
+._1os4zwfg span[role=img]>img{max-height:2pc}
+._1pa4idpf span[role=img]>img{padding-left:0}
+._1pc7zwfg .emoji-common-emoji-sprite, ._u5wqzwfg span[role=img]{height:2pc}
+._1pglh2mm span[role=img]>img{position:relative}
+._1reo15vq{overflow-x:hidden}
+._1vjf1ssb span[role=img]>img{left:50%}
+._1wpz1h6o{align-self:center}
+._299mangw:first-letter{text-transform:uppercase}
+._2lx21bp4{flex-direction:column}
+._2lx2vrvc{flex-direction:row}
+._4cvr1h6o{align-items:center}
+._4t3izwfg{height:2pc}
+._5ilezwfg .emoji-common-emoji-sprite, ._boltzwfg span[role=img]{width:2pc}
+._7mh21ule span[role=img]>img{display:block}
+._8fp6dbra span[role=img]>img{transform:translateX(-50%) translateY(-50%)}
+._ca0q19bv{padding-top:10px}
+._i0dl1wug{flex-basis:auto}
+._n3td19bv{padding-bottom:10px}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._o5721q9c{white-space:nowrap}
+._otyr1i6y{margin-bottom:var(--ds-space-negative-025,-2px)}
+._p12f3sup{max-width:285px}
+._pdfdidpf .emoji-common-emoji-sprite, ._mwo3idpf span[role=img]{padding-left:0}
+._pnmbj3m3:first-of-type{color:var(--ds-text,#091e42)}
+._syaz1thw{color:var(--ds-text-subtle,#6b778c)}
+._syazj3m3{color:var(--ds-text,#091e42)}
+._u5f319bv{padding-right:10px}
+._vwz4kb7n{line-height:1}
+._w7981kw7 .emoji-common-emoji-sprite, ._1vqe1kw7 span[role=img]{max-height:inherit}

package/dist/es2019/components/compiled/common/EmojiPreviewComponent.js

@@ -0,0 +1,29 @@
+/* EmojiPreviewComponent.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiPreviewComponent.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { N200, N900 } from '@atlaskit/theme/colors';
+import CachingEmoji from '../../common/CachingEmoji';
+const emojiName = null;
+const emojiShortName = null;
+const preview = null;
+const previewImg = null;
+const previewText = null;
+export const EmojiPreviewComponent = ({
+  emoji
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _2lx2vrvc _1n261q9c _4t3izwfg _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1e0c1o8l _1bsbzwfg _12s6idpf _1e4didpf _1dvqidpf _vwlxidpf _1gdiidpf _1f45idpf _pdfdidpf _mwo3idpf _5ilezwfg _boltzwfg _1pc7zwfg _u5wqzwfg _w7981kw7 _1vqe1kw7 _1l4xidpf _1l79idpf _118didpf _1pa4idpf _1pglh2mm _1vjf1ssb _1h6o1ssb _8fp6dbra _1os4zwfg _1e7azwfg _7mh21ule"])
+  }, /*#__PURE__*/React.createElement(CachingEmoji, {
+    key: emoji.id || emoji.shortName,
+    emoji: emoji
+  })), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _2lx21bp4 _1wpz1h6o _19pk1i6y _18u019bv _p12f3sup _1bsb3sup _16jlkb7n _1o9zkb7n"])
+  }, emoji.name && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1reo15vq _18m915vq _1e0c1ule _syazj3m3 _1bto1l2s _o5721q9c _299mangw"])
+  }, emoji.name), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_11c8dcr7 _1reo15vq _18m915vq _1e0c1ule _syaz1thw _vwz4kb7n _otyr1i6y _n3tdv77o _1bto1l2s _o5721q9c _10hw2smr _pnmbj3m3"])
+  }, emoji.shortName)));
+};

package/dist/es2019/components/compiled/common/EmojiRadioButton.compiled.css

@@ -0,0 +1,39 @@
+
+._19itidpf{border:0}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
+._3y8msqtm +span{border-radius:var(--ds-border-radius-100,3px)}._11bcidpf::-moz-focus-inner{border-width:0}
+._dqozglyw::-moz-focus-inner{border-style:none}
+._154i14id{top:-10px}
+._157z1r31:focus+span{outline-color:currentColor}
+._19bvidpf{padding-left:0}
+._1at812x7>span{padding-top:var(--ds-space-075,6px)}
+._1cjo12x7>span{padding-bottom:var(--ds-space-075,6px)}
+._1cx6idpf::-moz-focus-inner{padding-right:0}
+._1dzmglyw:focus+span{outline-style:none}
+._1e0c1o8l{display:inline-block}
+._1i1213zc:focus+span{transition-duration:0s,.2s}
+._1i911tcg>span>img{height:24px}
+._1ltv14id{left:-10px}
+._1s3c1tcg>span>.emoji-common-emoji-sprite{width:24px}
+._1sqm1o36:focus+span{outline-width:medium}
+._1ye71tcg>span>img{width:24px}
+._1yg612x7>span{padding-left:var(--ds-space-075,6px)}
+._2ewlidpf::-moz-focus-inner{padding-left:0}
+._80omtlke{cursor:pointer}
+._bfhk1j28{background-color:transparent}
+._ca0qidpf{padding-top:0}
+._fh6w1n2i:focus+span{box-shadow:0 0 0 2px var(--ds-border-focused,#4c9aff)}
+._hjaq12x7>span{padding-right:var(--ds-space-075,6px)}
+._hlt21tcg>span>.emoji-common-emoji-sprite{height:24px}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lev4idpf::-moz-focus-inner{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._tyukidpf::-moz-focus-inner{padding-bottom:0}
+._tzy4idpf{opacity:0}
+._u5f3idpf{padding-right:0}
+._1hvw1o36:focus{outline-width:medium}
+._491113zc:focus{transition-duration:0s,.2s}
+._49pcglyw:focus{outline-style:none}
+._7ehi1n2i:focus{box-shadow:0 0 0 2px var(--ds-border-focused,#4c9aff)}
+._nt751r31:focus{outline-color:currentColor}

package/dist/es2019/components/compiled/common/EmojiRadioButton.js

@@ -0,0 +1,58 @@
+/* EmojiRadioButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiRadioButton.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { memo, forwardRef } from 'react';
+import { B100 } from '@atlaskit/theme/colors';
+import { leftClick } from '../../../util/mouse';
+import Emoji from './Emoji';
+import { TONESELECTOR_KEYBOARD_KEYS_SUPPORTED } from '../../../util/constants';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+const emojiButton = null;
+const emojiRadio = null;
+const handleMouseDown = (props, event) => {
+  const {
+    onSelected
+  } = props;
+  event.preventDefault();
+  if (onSelected && leftClick(event)) {
+    onSelected();
+  }
+};
+const handleKeyPress = (props, event) => {
+  if (TONESELECTOR_KEYBOARD_KEYS_SUPPORTED.includes(event.key)) {
+    const {
+      onSelected
+    } = props;
+    event.preventDefault();
+    event.stopPropagation();
+    if (onSelected) {
+      onSelected();
+    }
+  }
+};
+export const EmojiRadioButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    emoji,
+    selectOnHover,
+    ariaLabelText,
+    defaultChecked
+  } = props;
+  return /*#__PURE__*/React.createElement("label", {
+    onMouseDown: event => handleMouseDown(props, event),
+    onKeyDown: event => handleKeyPress(props, event),
+    className: ax(["_19itidpf _2rkosqtm _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1n2i _491113zc"])
+  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, ariaLabelText), /*#__PURE__*/React.createElement("input", {
+    ref: ref,
+    "data-testid": ariaLabelText,
+    type: "radio",
+    name: "skin-tone",
+    defaultChecked: defaultChecked,
+    className: ax(["_tzy4idpf _kqswstnw _154i14id _1ltv14id _3y8msqtm _157z1r31 _1dzmglyw _1sqm1o36 _fh6w1n2i _1i1213zc"])
+  }), /*#__PURE__*/React.createElement(Emoji, {
+    emoji: emoji,
+    selectOnHover: selectOnHover,
+    shouldBeInteractive: false,
+    "aria-hidden": true
+  }));
+});
+export default /*#__PURE__*/memo(EmojiRadioButton);

package/dist/es2019/components/compiled/common/EmojiUploadPicker.compiled.css

@@ -0,0 +1,26 @@
+._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._fqoxdcr7._fqoxdcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._scffidpf input{border:0}
+._12r21pd9._12r21pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._16jlkb7n{flex-grow:1}
+._19bv19bv{padding-left:10px}
+._1bah1b1v{justify-content:space-around}
+._1bah1yb4{justify-content:space-between}
+._1e0c1txw{display:flex}
+._1o9zkb7n{flex-shrink:1}
+._1rwq1j28 input{background-color:transparent}
+._1w901n3s._1w901n3s{color:var(--ds-text-subtle,#5e6c84)}
+._2hwx14y2{margin-right:5px}
+._2lx21bp4{flex-direction:column}
+._34ir1o36 input{outline-width:medium}
+._4cvresu3{align-items:flex-end}
+._4t3icae7{height:78px}
+._9bj2glyw input::-ms-clear{display:none}
+._ca0q19bv{padding-top:10px}
+._coc6glyw input:invalid{box-shadow:none}
+._gxxuglyw input{outline-style:none}
+._i0dl1wug{flex-basis:auto}
+._n3td19bv{padding-bottom:10px}
+._n3td1v6z{padding-bottom:7px}
+._u5f319bv{padding-right:10px}
+._xmji1r31 input{outline-color:currentColor}