@atlaskit/reactions 30.0.1 → 30.0.3

package/dist/es2019/components/compiled/Selector.js

@@ -0,0 +1,69 @@
+/* Selector.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./Selector.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Fragment } from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import { DefaultReactions } from '../../shared/constants';
+import { EmojiButton } from './EmojiButton';
+import { ShowMore } from '../ShowMore';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
+const styles = {
+  container: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
+  separator: "_t6vde4h9 _5wramuej _1p3lnqa1 _ahbq1b66 _12l2u2gc _4t3i1tcg _1e0c1o8l"
+};
+const revealAnimation = null;
+const revealStyle = null;
+
+/**
+ * Test id for wrapper Selector div
+ */
+export const RENDER_SELECTOR_TESTID = 'render-selector';
+const Reveal = ({
+  children,
+  testId
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax(["_y44v8out _tzy4idpf"])
+  }, children);
+};
+
+/**
+ * Reactions picker panel part of the <ReactionPicker /> component
+ */
+export const Selector = ({
+  emojiProvider,
+  onMoreClick,
+  onSelection,
+  showMore,
+  pickerQuickReactionEmojiIds = DefaultReactions
+}) => {
+  /**
+   * Render the default emoji icon
+   * @param emoji emoji item
+   * @param index location of the emoji in the array
+   */
+  const renderEmoji = (emoji, index) => {
+    var _emoji$id;
+    return /*#__PURE__*/React.createElement(Reveal, {
+      key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
+      testId: RENDER_SELECTOR_TESTID
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      content: emoji.shortName
+    }, /*#__PURE__*/React.createElement(EmojiButton, {
+      emojiId: emoji,
+      emojiProvider: emojiProvider,
+      onClick: onSelection
+    })));
+  };
+  return /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    xcss: styles.container
+  }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.separator
+  }), /*#__PURE__*/React.createElement(Reveal, null, /*#__PURE__*/React.createElement(ShowMore, {
+    key: "more",
+    onClick: onMoreClick
+  }))) : null);
+};

package/dist/es2019/components/compiled/StaticReaction.compiled.css

@@ -10,8 +10,10 @@
 ._2lx2vrvc{flex-direction:row}
 ._4cvr1y6m{align-items:flex-start}
 ._4t3i1tcg{height:24px}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
-._d0al73ad:hover{cursor:default}
+._d0al73ad:hover{cursor:default}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}

package/dist/es2019/components/compiled/StaticReaction.js

@@ -3,9 +3,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./StaticReaction.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Box } from '@atlaskit/primitives/compiled';
+import { Pressable } from '@atlaskit/primitives/compiled';
 const styles = {
-  staticReaction: "_1reo15vq _18m915vq _19itglyw _2rkoglpi _1e0c1txw _2lx2vrvc _4cvr1y6m _1ul914no _4t3i1tcg _syaz1gjq _1pfh1b66 _12l21b66 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _d0al73ad"
+  staticReaction: "_1reo15vq _18m915vq _19itglyw _2rkoglpi _1e0c1txw _2lx2vrvc _4cvr1y6m _1ul914no _4t3i1tcg _bfhksm61 _syaz1gjq _1pfh1b66 _12l21b66 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _d0al73ad _irr3166n"
 };
 export const StaticReaction = ({
   onMouseEnter,
@@ -14,11 +14,10 @@ export const StaticReaction = ({
   testId,
   dataAttributes = {}
 }) => {
-  return /*#__PURE__*/React.createElement(Box, _extends({
+  return /*#__PURE__*/React.createElement(Pressable, _extends({
     onMouseEnter: onMouseEnter,
     onFocus: onFocus,
     testId: testId,
-    xcss: styles.staticReaction,
-    backgroundColor: "color.background.neutral.subtle"
+    xcss: styles.staticReaction
   }, dataAttributes), children);
 };

package/dist/es2019/components/compiled/Trigger.compiled.css

@@ -0,0 +1,34 @@
+._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)}
+._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqoglyw{border-style:none}
+._1dqonqa1{border-style:solid}
+._1h6d13gt{border-color:var(--ds-border-disabled,#091e420f)}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1bsbviql{width:2rem}
+._1e0c1txw{display:flex}
+._1ul9146b{min-width:110px}
+._1ul91tcg{min-width:24px}
+._1ul9zwfg{min-width:2pc}
+._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
+._4t3iviql{height:2rem}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._irr3108i:hover{background-color:var(--ds-surface-hovered,#f1f2f4)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
+._1di61ji5:active{background-color:var(--ds-surface-pressed,#dcdfe4)}

package/dist/es2019/components/compiled/Trigger.js

@@ -0,0 +1,90 @@
+/* Trigger.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./Trigger.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import { defineMessages, useIntl } from 'react-intl-next';
+import Tooltip from '@atlaskit/tooltip';
+import EmojiAddIcon from '@atlaskit/icon/core/migration/emoji-add';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Pressable } from '@atlaskit/primitives/compiled';
+import { cx } from '@compiled/react';
+import React from 'react';
+const styles = {
+  trigger: "_2rko14q2 _189ee4h9 _1dqonqa1 _1ul9zwfg _4t3i1tcg _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _1e0c1txw _1bah1h6o _4cvr1h6o",
+  subtleTrigger: "_1dqoglyw _1ul91tcg",
+  expandedTrigger: "_1ul9146b",
+  triggerStylesRefresh: "_2rkoglpi",
+  roundTrigger: "_2rko14q2 _4t3iviql _1bsbviql",
+  transparentEnabledTrigger: "_1h6dmuej _bfhksm61 _irr3166n _1di61dty",
+  opaqueEnabledTrigger: "_1h6dmuej _bfhkvuon _irr3108i _1di61ji5",
+  disabledTrigger: "_1h6d13gt _bfhksyzs",
+  miniMode: "_2rkoglpi _1dqoglyw _1ul91tcg _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
+};
+
+/**
+ * Test id for the tooltip
+ */
+export const RENDER_TOOLTIP_TRIGGER_TESTID = 'render-tooltip-trigger';
+export const RENDER_TRIGGER_BUTTON_TESTID = 'render-trigger-button';
+const i18n = defineMessages({
+  addReaction: {
+    id: 'reaction-picker-trigger.add.reaction.message',
+    description: 'Message displayed when there are no page reactions existing on the page.',
+    defaultMessage: 'Add a reaction'
+  }
+});
+const addReactionStyles = {
+  addReactionMessage: "_11c8dcr7 _syaz1gjq _18u01b66"
+};
+
+/**
+ * Render an emoji button to open the reactions select picker
+ */
+export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    onClick,
+    miniMode,
+    tooltipContent,
+    disabled = false,
+    ariaAttributes = {},
+    showOpaqueBackground = false,
+    showAddReactionText = false,
+    subtleReactionsSummaryAndPicker = false,
+    showRoundTrigger = false,
+    reactionPickerTriggerIcon
+  } = props;
+  const handleMouseDown = (e, analyticsEvent) => {
+    if (onClick && !disabled) {
+      onClick(e, analyticsEvent);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    testId: RENDER_TOOLTIP_TRIGGER_TESTID,
+    content: tooltipContent
+  }, /*#__PURE__*/React.createElement(Pressable, _extends({
+    testId: RENDER_TRIGGER_BUTTON_TESTID,
+    xcss: cx(styles.trigger, subtleReactionsSummaryAndPicker && styles.subtleTrigger, showAddReactionText && styles.expandedTrigger, disabled ? styles.disabledTrigger : showOpaqueBackground ? styles.opaqueEnabledTrigger : styles.transparentEnabledTrigger, miniMode && styles.miniMode,
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    fg('platform-component-visual-refresh') && styles.triggerStylesRefresh, showRoundTrigger && styles.roundTrigger),
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/use-tokens-typography
+      lineHeight: '16px'
+    },
+    onClick: handleMouseDown,
+    isDisabled: disabled,
+    ref: ref
+  }, ariaAttributes), !!reactionPickerTriggerIcon ? reactionPickerTriggerIcon :
+  /*#__PURE__*/
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-21007
+  React.createElement(EmojiAddIcon, {
+    testId: "emoji-add-icon",
+    color: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
+    LEGACY_size: "small",
+    label: "Add reaction"
+  }), showAddReactionText && /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(addReactionStyles.addReactionMessage)
+  }, formatMessage(i18n.addReaction))));
+});

package/dist/es2019/containers/ConnectedReactionPicker/ConnectedReactionPicker.js

@@ -1,7 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { ReactionPicker, UfoErrorBoundary } from '../../components';
+import { UfoErrorBoundary } from '../../components';
 import { PickerRender } from '../../ufo';
+import { ReactionPicker as EmotionReactionPicker } from '../../components/ReactionPicker';
+import { ReactionPicker as CompiledReactionPicker } from '../../components/compiled/ReactionPicker';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+const ReactionPicker = componentWithFG('platform_editor_css_migrate_reactions', CompiledReactionPicker, EmotionReactionPicker);
 /**
  * Reaction Picker component
  */

package/dist/es2019/index.js

@@ -4,12 +4,16 @@ import { Reaction as EmotionReaction } from './components/Reaction';
 import { Reaction as CompiledReaction } from './components/compiled/Reaction';
 import { Reactions as EmotionReactions } from './components/Reactions';
 import { Reactions as CompiledReactions } from './components/compiled/Reactions';
+import { ReactionPicker as EmotionReactionPicker } from './components/ReactionPicker/ReactionPicker';
+import { ReactionPicker as CompiledReactionPicker } from './components/ReactionPicker/ReactionPicker';
 import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 const Reaction = componentWithFG('platform_editor_css_migrate_reactions', CompiledReaction, EmotionReaction);
 const Reactions = componentWithFG('platform_editor_css_migrate_reactions', CompiledReactions, EmotionReactions);
+const ReactionPicker = componentWithFG('platform_editor_css_migrate_reactions', CompiledReactionPicker, EmotionReactionPicker);
 export { ReactionServiceClient } from './client';
-export { Reaction, Reactions };
-export { ReactionPicker } from './components/ReactionPicker/ReactionPicker';
+export { Reaction };
+export { Reactions };
+export { ReactionPicker };
 export { useCloseManager } from './hooks/useCloseManager';
 export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';
 export { MemoryReactionsStore, ReactionConsumer } from './store';

package/dist/esm/analytics/index.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "30.0.1";
+var packageVersion = "30.0.3";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/components/ShowMore/ShowMore.js

@@ -1,9 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { IconButton } from '@atlaskit/button/new';
 import EditorMoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--editor-more';
@@ -19,10 +14,10 @@ export var RENDER_SHOWMORE_TESTID = 'show-more-button';
  */
 export var ShowMore = function ShowMore(_ref) {
   var onClick = _ref.onClick;
-  return jsx(FormattedMessage, messages.moreEmoji, function (message) {
-    return jsx(Tooltip, {
+  return /*#__PURE__*/React.createElement(FormattedMessage, messages.moreEmoji, function (message) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
       content: message
-    }, jsx(IconButton, {
+    }, /*#__PURE__*/React.createElement(IconButton, {
       label: messages.moreEmoji.defaultMessage,
       onClick: onClick,
       testId: RENDER_SHOWMORE_TESTID,

package/dist/esm/components/compiled/EmojiButton.compiled.css

@@ -0,0 +1,17 @@
+
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._189eidpf{border-width:0}._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._18u0ze3t{margin-left:var(--ds-space-0,0)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
+._1e0c1txw{display:flex}
+._1qu2glyw{outline-style:none}
+._2hwxze3t{margin-right:var(--ds-space-0,0)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._o7ksrkh3:hover{transition:transform .2s cubic-bezier(.23,1,.32,1)}
+._1llw1q5f:hover{transform:scale(1.33)}

package/dist/esm/components/compiled/EmojiButton.js

@@ -0,0 +1,39 @@
+/* EmojiButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiButton.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useIntl } from 'react-intl-next';
+import { ResourcedEmoji } from '@atlaskit/emoji';
+import { messages } from '../../shared/i18n';
+import { isLeftClick } from '../../shared/utils';
+import { Pressable } from '@atlaskit/primitives/compiled';
+var styles = {
+  emojiButton: "_12ji1r31 _1qu2glyw _12y31o36 _2rkoglpi _189eidpf _1e0c1txw _bfhksm61 _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _o7ksrkh3 _1llw1q5f"
+};
+export var RENDER_BUTTON_TESTID = 'button-emoji-id';
+/**
+ * custom button to render the custom emoji selector inside the reaction picker
+ */
+export var EmojiButton = function EmojiButton(_ref) {
+  var emojiId = _ref.emojiId,
+    onClick = _ref.onClick,
+    emojiProvider = _ref.emojiProvider;
+  var onButtonClick = function onButtonClick(event) {
+    event.preventDefault();
+    if (onClick && isLeftClick(event)) {
+      onClick(emojiId, undefined, event);
+    }
+  };
+  var intl = useIntl();
+  return /*#__PURE__*/React.createElement(Pressable, {
+    testId: RENDER_BUTTON_TESTID,
+    onClick: onButtonClick,
+    "aria-label": intl.formatMessage(messages.reactWithEmoji, {
+      emoji: emojiId.shortName
+    }),
+    xcss: styles.emojiButton
+  }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
+    emojiProvider: emojiProvider,
+    emojiId: emojiId
+  }));
+};

package/dist/esm/components/compiled/ReactionButton.compiled.css

@@ -4,15 +4,13 @@
 ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
 ._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqoglyw{border-style:none}
 ._1dqonqa1{border-style:solid}
 ._1h6d1yqz{border-color:var(--ds-border-selected,#0c66e4)}
-._1h6dmuej{border-color:var(--ds-border,#091e4224)}
-._1kl7glyw{border-left:none}
-._1s7zglyw{border-right:none}
-._n7zlglyw{border-bottom:none}
-._x3doglyw{border-top:none}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
 ._18m915vq{overflow-y:hidden}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
+._19pk12x7{margin-top:var(--ds-space-075,6px)}
 ._1e0c1txw{display:flex}
 ._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
 ._1reo15vq{overflow-x:hidden}
@@ -22,6 +20,7 @@
 ._4cvr1y6m{align-items:flex-start}
 ._4t3i1tcg{height:24px}
 ._4t3i3698{height:var(--_1ed2mu0)}
+._4t3igktf{height:20px}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}

package/dist/esm/components/compiled/ReactionButton.js

@@ -10,9 +10,10 @@ import { Pressable } from '@atlaskit/primitives/compiled';
 var styles = {
   reactionButton: "_2rko14q2 _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6dmuej _1e0c1txw _2lx2vrvc _4cvr1y6m _1ul914no _4t3i1tcg _bfhksm61 _syaz1gjq _1pfh1b66 _12l21b66 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _irr3166n _1di61dty",
   reactionStylesRefresh: "_2rkoglpi",
-  borderless: "_x3doglyw _1kl7glyw _1s7zglyw _n7zlglyw",
   reacted: "_1h6d1yqz _bfhkfg4m _irr3i1yw _1di619ru",
-  opaqueBackground: "_bfhkvuon _irr3108i _1di61ji5"
+  opaqueBackground: "_bfhkvuon _irr3108i _1di61ji5",
+  compactButton: "_4t3igktf _4cvr1h6o _19pk12x7",
+  borderless: "_1dqoglyw"
 };
 
 /**
@@ -29,6 +30,7 @@ export var ReactionButton = function ReactionButton(_ref) {
     flash = _ref$flash === void 0 ? false : _ref$flash,
     showSubtleStyle = _ref.showSubtleStyle,
     showOpaqueBackground = _ref.showOpaqueBackground,
+    useCompactStyles = _ref.useCompactStyles,
     reacted = _ref.reacted,
     ariaLabel = _ref.ariaLabel,
     ariaPressed = _ref.ariaPressed,
@@ -45,7 +47,7 @@ export var ReactionButton = function ReactionButton(_ref) {
     "aria-label": ariaLabel,
     "aria-pressed": ariaPressed,
     testId: testId,
-    xcss: cx(styles.reactionButton, reacted && styles.reacted, !reacted && showSubtleStyle && styles.borderless, !reacted && showOpaqueBackground && styles.opaqueBackground,
+    xcss: cx(styles.reactionButton, useCompactStyles && styles.compactButton, reacted && styles.reacted, !reacted && showSubtleStyle && styles.borderless, !reacted && showOpaqueBackground && styles.opaqueBackground,
     // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
     fg('platform-component-visual-refresh') && styles.reactionStylesRefresh)
   }, dataAttributes), /*#__PURE__*/React.createElement(FlashAnimation, {

package/dist/esm/components/compiled/ReactionPicker.compiled.css

@@ -0,0 +1,11 @@
+
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}._16qs1a23{box-shadow:var(--_3t1odq)}
+._1bch1b66>div{margin-top:var(--ds-space-050,4px)}
+._1e0c1txw{display:flex}
+._1pra1o8l.miniMode{display:inline-block}
+._79pa1b66>div{margin-bottom:var(--ds-space-050,4px)}
+._bfhk13b4{background-color:var(--_1f6rtr1)}
+._s7n4nkob{vertical-align:middle}
+._1hvw1o36:focus{outline-width:medium}
+._49pcglyw:focus{outline-style:none}
+._nt751r31:focus{outline-color:currentColor}