emoji-picker-react 4.6.14 → 4.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/README.md +37 -12
  2. package/dist/components/Reactions/BtnPlus.d.ts +2 -0
  3. package/dist/components/Reactions/DEFAULT_REACTIONS.d.ts +1 -0
  4. package/dist/components/Reactions/Reactions.d.ts +2 -0
  5. package/dist/components/context/ElementRefContext.d.ts +1 -0
  6. package/dist/components/context/PickerContext.d.ts +1 -0
  7. package/dist/components/emoji/ClickableEmojiButton.d.ts +2 -1
  8. package/dist/components/emoji/Emoji.d.ts +2 -1
  9. package/dist/components/header/Search/BtnClearSearch.d.ts +2 -0
  10. package/dist/components/header/Search/IcnSearch.d.ts +2 -0
  11. package/dist/components/header/SkinTonePicker/BtnSkinToneVariation.d.ts +11 -0
  12. package/dist/components/navigation/CategoryButton.d.ts +11 -0
  13. package/dist/config/config.d.ts +2 -0
  14. package/dist/config/useConfig.d.ts +2 -0
  15. package/dist/emoji-picker-react.cjs.development.js +1265 -963
  16. package/dist/emoji-picker-react.cjs.development.js.map +1 -1
  17. package/dist/emoji-picker-react.cjs.production.min.js +1 -1
  18. package/dist/emoji-picker-react.cjs.production.min.js.map +1 -1
  19. package/dist/emoji-picker-react.esm.js +1266 -964
  20. package/dist/emoji-picker-react.esm.js.map +1 -1
  21. package/package.json +5 -2
  22. package/src/EmojiPickerReact.tsx +28 -3
  23. package/src/Stylesheet/stylesheet.tsx +14 -2
  24. package/src/components/Reactions/BtnPlus.tsx +78 -0
  25. package/src/components/Reactions/DEFAULT_REACTIONS.ts +9 -0
  26. package/src/components/Reactions/Reactions.tsx +62 -0
  27. package/src/components/Reactions/svg/plus.svg +17 -0
  28. package/src/components/body/Body.tsx +8 -2
  29. package/src/components/body/EmojiVariationPicker.tsx +6 -7
  30. package/src/components/context/ElementRefContext.tsx +10 -2
  31. package/src/components/context/PickerContext.tsx +16 -3
  32. package/src/components/emoji/ClickableEmojiButton.tsx +13 -3
  33. package/src/components/emoji/Emoji.tsx +4 -1
  34. package/src/components/footer/Preview.tsx +11 -8
  35. package/src/components/header/Header.tsx +6 -2
  36. package/src/components/header/Search/BtnClearSearch.tsx +91 -0
  37. package/src/components/header/{CssSearch.tsx → Search/CssSearch.tsx} +2 -2
  38. package/src/components/header/Search/IcnSearch.tsx +39 -0
  39. package/src/components/header/{Search.tsx → Search/Search.tsx} +14 -49
  40. package/src/components/header/SkinTonePicker/BtnSkinToneVariation.tsx +80 -0
  41. package/src/components/header/{SkinTonePicker.tsx → SkinTonePicker/SkinTonePicker.tsx} +25 -67
  42. package/src/components/main/PickerMain.tsx +27 -2
  43. package/src/components/navigation/CategoryButton.tsx +141 -0
  44. package/src/components/navigation/CategoryNavigation.tsx +10 -129
  45. package/src/config/config.ts +7 -2
  46. package/src/config/useConfig.ts +16 -3
  47. /package/dist/components/header/{CssSearch.d.ts → Search/CssSearch.d.ts} +0 -0
  48. /package/dist/components/header/{Search.d.ts → Search/Search.d.ts} +0 -0
  49. /package/dist/components/header/{SkinTonePicker.d.ts → SkinTonePicker/SkinTonePicker.d.ts} +0 -0
  50. /package/src/components/header/{svg → Search/svg}/magnifier.svg +0 -0
  51. /package/src/components/header/{svg → Search/svg}/times.svg +0 -0
@@ -1,38 +1,6 @@
1
- import React__default, { useState, useEffect, createElement, useRef, createContext, createRef, useContext, useMemo, useCallback, Fragment, memo, Component } from 'react';
1
+ import React__default, { useState, useEffect, createElement, createContext, useContext, useRef, useMemo, useCallback, createRef, Fragment, memo, Component } from 'react';
2
2
  import { createSheet, cx } from 'flairup';
3
3
 
4
- var ClassNames;
5
- (function (ClassNames) {
6
- ClassNames["hiddenOnSearch"] = "epr-hidden-on-search";
7
- ClassNames["searchActive"] = "epr-search-active";
8
- ClassNames["hidden"] = "epr-hidden";
9
- ClassNames["visible"] = "epr-visible";
10
- ClassNames["active"] = "epr-active";
11
- ClassNames["emoji"] = "epr-emoji";
12
- ClassNames["category"] = "epr-emoji-category";
13
- ClassNames["label"] = "epr-emoji-category-label";
14
- ClassNames["categoryContent"] = "epr-emoji-category-content";
15
- ClassNames["emojiHasVariations"] = "epr-emoji-has-variations";
16
- ClassNames["scrollBody"] = "epr-body";
17
- ClassNames["emojiList"] = "epr-emoji-list";
18
- ClassNames["external"] = "__EmojiPicker__";
19
- ClassNames["emojiPicker"] = "EmojiPickerReact";
20
- ClassNames["open"] = "epr-open";
21
- ClassNames["vertical"] = "epr-vertical";
22
- ClassNames["horizontal"] = "epr-horizontal";
23
- ClassNames["variationPicker"] = "epr-emoji-variation-picker";
24
- ClassNames["darkTheme"] = "epr-dark-theme";
25
- ClassNames["autoTheme"] = "epr-auto-theme";
26
- })(ClassNames || (ClassNames = {}));
27
- function asSelectors() {
28
- for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
29
- classNames[_key] = arguments[_key];
30
- }
31
- return classNames.map(function (c) {
32
- return "." + c;
33
- }).join('');
34
- }
35
-
36
4
  function _extends() {
37
5
  _extends = Object.assign ? Object.assign.bind() : function (target) {
38
6
  for (var i = 1; i < arguments.length; i++) {
@@ -103,6 +71,38 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
103
71
  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
104
72
  }
105
73
 
74
+ var ClassNames;
75
+ (function (ClassNames) {
76
+ ClassNames["hiddenOnSearch"] = "epr-hidden-on-search";
77
+ ClassNames["searchActive"] = "epr-search-active";
78
+ ClassNames["hidden"] = "epr-hidden";
79
+ ClassNames["visible"] = "epr-visible";
80
+ ClassNames["active"] = "epr-active";
81
+ ClassNames["emoji"] = "epr-emoji";
82
+ ClassNames["category"] = "epr-emoji-category";
83
+ ClassNames["label"] = "epr-emoji-category-label";
84
+ ClassNames["categoryContent"] = "epr-emoji-category-content";
85
+ ClassNames["emojiHasVariations"] = "epr-emoji-has-variations";
86
+ ClassNames["scrollBody"] = "epr-body";
87
+ ClassNames["emojiList"] = "epr-emoji-list";
88
+ ClassNames["external"] = "__EmojiPicker__";
89
+ ClassNames["emojiPicker"] = "EmojiPickerReact";
90
+ ClassNames["open"] = "epr-open";
91
+ ClassNames["vertical"] = "epr-vertical";
92
+ ClassNames["horizontal"] = "epr-horizontal";
93
+ ClassNames["variationPicker"] = "epr-emoji-variation-picker";
94
+ ClassNames["darkTheme"] = "epr-dark-theme";
95
+ ClassNames["autoTheme"] = "epr-auto-theme";
96
+ })(ClassNames || (ClassNames = {}));
97
+ function asSelectors() {
98
+ for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
99
+ classNames[_key] = arguments[_key];
100
+ }
101
+ return classNames.map(function (c) {
102
+ return "." + c;
103
+ }).join('');
104
+ }
105
+
106
106
  function useIsMounted() {
107
107
  var _React$useState = useState(false),
108
108
  isMounted = _React$useState[0],
@@ -118,7 +118,8 @@ var hidden = {
118
118
  display: 'none',
119
119
  opacity: '0',
120
120
  pointerEvents: 'none',
121
- visibility: 'hidden'
121
+ visibility: 'hidden',
122
+ overflow: 'hidden'
122
123
  };
123
124
  var commonStyles = /*#__PURE__*/stylesheet.create({
124
125
  hidden: /*#__PURE__*/_extends({
@@ -154,6 +155,18 @@ var commonInteractionStyles = /*#__PURE__*/stylesheet.create({
154
155
  visibleOnSearchOnly: hidden
155
156
  }
156
157
  },
158
+ hiddenOnReactions: {
159
+ transition: 'all 0.5s ease-in-out'
160
+ },
161
+ '.epr-reactions': {
162
+ hiddenOnReactions: {
163
+ height: '0px',
164
+ width: '0px',
165
+ opacity: '0',
166
+ pointerEvents: 'none',
167
+ overflow: 'hidden'
168
+ }
169
+ },
157
170
  '.EmojiPickerReact:not(.epr-search-active)': {
158
171
  categoryBtn: {
159
172
  ':hover': {
@@ -172,93 +185,8 @@ var commonInteractionStyles = /*#__PURE__*/stylesheet.create({
172
185
  }
173
186
  });
174
187
 
175
- function focusElement(element) {
176
- if (!element) {
177
- return;
178
- }
179
- requestAnimationFrame(function () {
180
- element.focus();
181
- });
182
- }
183
- function focusPrevElementSibling(element) {
184
- if (!element) return;
185
- var prev = element.previousElementSibling;
186
- focusElement(prev);
187
- }
188
- function focusNextElementSibling(element) {
189
- if (!element) return;
190
- var next = element.nextElementSibling;
191
- focusElement(next);
192
- }
193
- function focusFirstElementChild(element) {
194
- if (!element) return;
195
- var first = element.firstElementChild;
196
- focusElement(first);
197
- }
198
-
199
- function ElementRefContextProvider(_ref) {
200
- var children = _ref.children;
201
- var PickerMainRef = useRef(null);
202
- var AnchoredEmojiRef = useRef(null);
203
- var BodyRef = useRef(null);
204
- var SearchInputRef = useRef(null);
205
- var SkinTonePickerRef = useRef(null);
206
- var CategoryNavigationRef = useRef(null);
207
- var VariationPickerRef = useRef(null);
208
- return createElement(ElementRefContext.Provider, {
209
- value: {
210
- AnchoredEmojiRef: AnchoredEmojiRef,
211
- BodyRef: BodyRef,
212
- CategoryNavigationRef: CategoryNavigationRef,
213
- PickerMainRef: PickerMainRef,
214
- SearchInputRef: SearchInputRef,
215
- SkinTonePickerRef: SkinTonePickerRef,
216
- VariationPickerRef: VariationPickerRef
217
- }
218
- }, children);
219
- }
220
- var ElementRefContext = /*#__PURE__*/createContext({
221
- AnchoredEmojiRef: /*#__PURE__*/createRef(),
222
- BodyRef: /*#__PURE__*/createRef(),
223
- CategoryNavigationRef: /*#__PURE__*/createRef(),
224
- PickerMainRef: /*#__PURE__*/createRef(),
225
- SearchInputRef: /*#__PURE__*/createRef(),
226
- SkinTonePickerRef: /*#__PURE__*/createRef(),
227
- VariationPickerRef: /*#__PURE__*/createRef()
228
- });
229
- function useElementRef() {
230
- return useContext(ElementRefContext);
231
- }
232
- function usePickerMainRef() {
233
- return useElementRef()['PickerMainRef'];
234
- }
235
- function useAnchoredEmojiRef() {
236
- return useElementRef()['AnchoredEmojiRef'];
237
- }
238
- function useSetAnchoredEmojiRef() {
239
- var AnchoredEmojiRef = useAnchoredEmojiRef();
240
- return function (target) {
241
- if (target === null && AnchoredEmojiRef.current !== null) {
242
- focusElement(AnchoredEmojiRef.current);
243
- }
244
- AnchoredEmojiRef.current = target;
245
- };
246
- }
247
- function useBodyRef() {
248
- return useElementRef()['BodyRef'];
249
- }
250
- function useSearchInputRef() {
251
- return useElementRef()['SearchInputRef'];
252
- }
253
- function useSkinTonePickerRef() {
254
- return useElementRef()['SkinTonePickerRef'];
255
- }
256
- function useCategoryNavigationRef() {
257
- return useElementRef()['CategoryNavigationRef'];
258
- }
259
- function useVariationPickerRef() {
260
- return useElementRef()['VariationPickerRef'];
261
- }
188
+ var DEFAULT_REACTIONS = ['1f44d', '2764-fe0f', '1f603', '1f622', '1f64f', '1f44e', '1f621' // 😡
189
+ ];
262
190
 
263
191
  var SuggestionMode;
264
192
  (function (SuggestionMode) {
@@ -16909,7 +16837,9 @@ function basePickerConfig() {
16909
16837
  suggestedEmojisMode: SuggestionMode.FREQUENT,
16910
16838
  theme: Theme.LIGHT,
16911
16839
  unicodeToHide: new Set(KNOWN_FAILING_EMOJIS),
16912
- width: 350
16840
+ width: 350,
16841
+ reactionsDefaultOpen: false,
16842
+ reactions: DEFAULT_REACTIONS
16913
16843
  };
16914
16844
  }
16915
16845
  var basePreviewConfig = {
@@ -17044,29 +16974,39 @@ function useStyleConfig() {
17044
16974
  width: getDimension(width)
17045
16975
  }, style);
17046
16976
  }
17047
- function useEmojiVersionConfig() {
16977
+ function useReactionsOpenConfig() {
17048
16978
  var _usePickerConfig14 = usePickerConfig(),
17049
- emojiVersion = _usePickerConfig14.emojiVersion;
16979
+ reactionsDefaultOpen = _usePickerConfig14.reactionsDefaultOpen;
16980
+ return reactionsDefaultOpen;
16981
+ }
16982
+ function useEmojiVersionConfig() {
16983
+ var _usePickerConfig15 = usePickerConfig(),
16984
+ emojiVersion = _usePickerConfig15.emojiVersion;
17050
16985
  return emojiVersion;
17051
16986
  }
17052
16987
  function useSearchDisabledConfig() {
17053
- var _usePickerConfig15 = usePickerConfig(),
17054
- searchDisabled = _usePickerConfig15.searchDisabled;
16988
+ var _usePickerConfig16 = usePickerConfig(),
16989
+ searchDisabled = _usePickerConfig16.searchDisabled;
17055
16990
  return searchDisabled;
17056
16991
  }
17057
16992
  function useSkinTonePickerLocationConfig() {
17058
- var _usePickerConfig16 = usePickerConfig(),
17059
- skinTonePickerLocation = _usePickerConfig16.skinTonePickerLocation;
16993
+ var _usePickerConfig17 = usePickerConfig(),
16994
+ skinTonePickerLocation = _usePickerConfig17.skinTonePickerLocation;
17060
16995
  return skinTonePickerLocation;
17061
16996
  }
17062
16997
  function useUnicodeToHide() {
17063
- var _usePickerConfig17 = usePickerConfig(),
17064
- unicodeToHide = _usePickerConfig17.unicodeToHide;
16998
+ var _usePickerConfig18 = usePickerConfig(),
16999
+ unicodeToHide = _usePickerConfig18.unicodeToHide;
17065
17000
  return unicodeToHide;
17066
17001
  }
17002
+ function useReactionsConfig() {
17003
+ var _usePickerConfig19 = usePickerConfig(),
17004
+ reactions = _usePickerConfig19.reactions;
17005
+ return reactions;
17006
+ }
17067
17007
  function useGetEmojiUrlConfig() {
17068
- var _usePickerConfig18 = usePickerConfig(),
17069
- getEmojiUrl = _usePickerConfig18.getEmojiUrl;
17008
+ var _usePickerConfig20 = usePickerConfig(),
17009
+ getEmojiUrl = _usePickerConfig20.getEmojiUrl;
17070
17010
  return getEmojiUrl;
17071
17011
  }
17072
17012
  function getDimension(dimensionConfig) {
@@ -17081,270 +17021,50 @@ function useSearchResultsConfig(searchResultsCount) {
17081
17021
  return SEARCH_RESULTS_NO_RESULTS_FOUND;
17082
17022
  }
17083
17023
 
17084
- function useDebouncedState(initialValue, delay) {
17085
- if (delay === void 0) {
17086
- delay = 0;
17087
- }
17088
- var _useState = useState(initialValue),
17089
- state = _useState[0],
17090
- setState = _useState[1];
17091
- var timer = useRef(null);
17092
- function debouncedSetState(value) {
17093
- return new Promise(function (resolve) {
17094
- var _window;
17095
- if (timer.current) {
17096
- clearTimeout(timer.current);
17097
- }
17098
- timer.current = (_window = window) == null ? void 0 : _window.setTimeout(function () {
17099
- setState(value);
17100
- resolve(value);
17101
- }, delay);
17102
- });
17024
+ function elementCountInRow(parent, element) {
17025
+ if (!parent || !element) {
17026
+ return 0;
17103
17027
  }
17104
- return [state, debouncedSetState];
17028
+ var parentWidth = parent.getBoundingClientRect().width;
17029
+ var elementWidth = element.getBoundingClientRect().width;
17030
+ return Math.floor(parentWidth / elementWidth);
17105
17031
  }
17106
-
17107
- function useIsUnicodeHidden() {
17108
- var unicodeToHide = useUnicodeToHide();
17109
- return function (emojiUnified) {
17110
- return unicodeToHide.has(emojiUnified);
17111
- };
17032
+ function elementIndexInRow(parent, element) {
17033
+ if (!parent || !element) {
17034
+ return 0;
17035
+ }
17036
+ var elementWidth = element.getBoundingClientRect().width;
17037
+ var elementLeft = element.getBoundingClientRect().left;
17038
+ var parentLeft = parent.getBoundingClientRect().left;
17039
+ return Math.floor((elementLeft - parentLeft) / elementWidth);
17112
17040
  }
17113
-
17114
- function useDisallowedEmojis() {
17115
- var DisallowedEmojisRef = useRef({});
17116
- var emojiVersionConfig = useEmojiVersionConfig();
17117
- return useMemo(function () {
17118
- var emojiVersion = parseFloat("" + emojiVersionConfig);
17119
- if (!emojiVersionConfig || Number.isNaN(emojiVersion)) {
17120
- return DisallowedEmojisRef.current;
17121
- }
17122
- return allEmojis.reduce(function (disallowedEmojis, emoji) {
17123
- if (addedInNewerVersion(emoji, emojiVersion)) {
17124
- disallowedEmojis[emojiUnified(emoji)] = true;
17125
- }
17126
- return disallowedEmojis;
17127
- }, DisallowedEmojisRef.current);
17128
- }, [emojiVersionConfig]);
17041
+ function rowNumber(parent, element) {
17042
+ if (!parent || !element) {
17043
+ return 0;
17044
+ }
17045
+ var elementHeight = element.getBoundingClientRect().height;
17046
+ var elementTop = element.getBoundingClientRect().top;
17047
+ var parentTop = parent.getBoundingClientRect().top;
17048
+ return Math.round((elementTop - parentTop) / elementHeight);
17129
17049
  }
17130
- function useIsEmojiDisallowed() {
17131
- var disallowedEmojis = useDisallowedEmojis();
17132
- var isUnicodeHidden = useIsUnicodeHidden();
17133
- return function isEmojiDisallowed(emoji) {
17134
- var unified = unifiedWithoutSkinTone(emojiUnified(emoji));
17135
- return Boolean(disallowedEmojis[unified] || isUnicodeHidden(unified));
17136
- };
17050
+ function hasNextRow(parent, element) {
17051
+ if (!parent || !element) {
17052
+ return false;
17053
+ }
17054
+ var elementHeight = element.getBoundingClientRect().height;
17055
+ var elementTop = element.getBoundingClientRect().top;
17056
+ var parentTop = parent.getBoundingClientRect().top;
17057
+ var parentHeight = parent.getBoundingClientRect().height;
17058
+ return Math.round(elementTop - parentTop + elementHeight) < parentHeight;
17137
17059
  }
17138
- function addedInNewerVersion(emoji, supportedLevel) {
17139
- return addedIn(emoji) > supportedLevel;
17140
- }
17141
-
17142
- function useMarkInitialLoad(dispatch) {
17143
- useEffect(function () {
17144
- dispatch(true);
17145
- }, [dispatch]);
17146
- }
17147
-
17148
- function PickerContextProvider(_ref) {
17149
- var children = _ref.children;
17150
- var disallowedEmojis = useDisallowedEmojis();
17151
- var defaultSkinTone = useDefaultSkinToneConfig();
17152
- // Initialize the filter with the inititial dictionary
17153
- var filterRef = useRef(alphaNumericEmojiIndex);
17154
- var disallowClickRef = useRef(false);
17155
- var disallowMouseRef = useRef(false);
17156
- var disallowedEmojisRef = useRef(disallowedEmojis);
17157
- var suggestedUpdateState = useDebouncedState(Date.now(), 200);
17158
- var searchTerm = useDebouncedState('', 100);
17159
- var skinToneFanOpenState = useState(false);
17160
- var activeSkinTone = useState(defaultSkinTone);
17161
- var activeCategoryState = useState(null);
17162
- var emojisThatFailedToLoadState = useState(new Set());
17163
- var emojiVariationPickerState = useState(null);
17164
- var _useState = useState(false),
17165
- isPastInitialLoad = _useState[0],
17166
- setIsPastInitialLoad = _useState[1];
17167
- useMarkInitialLoad(setIsPastInitialLoad);
17168
- return createElement(PickerContext.Provider, {
17169
- value: {
17170
- activeCategoryState: activeCategoryState,
17171
- activeSkinTone: activeSkinTone,
17172
- disallowClickRef: disallowClickRef,
17173
- disallowMouseRef: disallowMouseRef,
17174
- disallowedEmojisRef: disallowedEmojisRef,
17175
- emojiVariationPickerState: emojiVariationPickerState,
17176
- emojisThatFailedToLoadState: emojisThatFailedToLoadState,
17177
- filterRef: filterRef,
17178
- isPastInitialLoad: isPastInitialLoad,
17179
- searchTerm: searchTerm,
17180
- skinToneFanOpenState: skinToneFanOpenState,
17181
- suggestedUpdateState: suggestedUpdateState
17182
- }
17183
- }, children);
17184
- }
17185
- var PickerContext = /*#__PURE__*/createContext({
17186
- activeCategoryState: [null, function () {}],
17187
- activeSkinTone: [SkinTones.NEUTRAL, function () {}],
17188
- disallowClickRef: {
17189
- current: false
17190
- },
17191
- disallowMouseRef: {
17192
- current: false
17193
- },
17194
- disallowedEmojisRef: {
17195
- current: {}
17196
- },
17197
- emojiVariationPickerState: [null, function () {}],
17198
- emojisThatFailedToLoadState: [/*#__PURE__*/new Set(), function () {}],
17199
- filterRef: {
17200
- current: {}
17201
- },
17202
- isPastInitialLoad: true,
17203
- searchTerm: ['', function () {
17204
- return new Promise(function () {
17205
- return undefined;
17206
- });
17207
- }],
17208
- skinToneFanOpenState: [false, function () {}],
17209
- suggestedUpdateState: [/*#__PURE__*/Date.now(), function () {}]
17210
- });
17211
- function useFilterRef() {
17212
- var _React$useContext = useContext(PickerContext),
17213
- filterRef = _React$useContext.filterRef;
17214
- return filterRef;
17215
- }
17216
- function useDisallowClickRef() {
17217
- var _React$useContext2 = useContext(PickerContext),
17218
- disallowClickRef = _React$useContext2.disallowClickRef;
17219
- return disallowClickRef;
17220
- }
17221
- function useDisallowMouseRef() {
17222
- var _React$useContext3 = useContext(PickerContext),
17223
- disallowMouseRef = _React$useContext3.disallowMouseRef;
17224
- return disallowMouseRef;
17225
- }
17226
- function useSearchTermState() {
17227
- var _React$useContext4 = useContext(PickerContext),
17228
- searchTerm = _React$useContext4.searchTerm;
17229
- return searchTerm;
17230
- }
17231
- function useActiveSkinToneState() {
17232
- var _React$useContext5 = useContext(PickerContext),
17233
- activeSkinTone = _React$useContext5.activeSkinTone;
17234
- return activeSkinTone;
17235
- }
17236
- function useEmojisThatFailedToLoadState() {
17237
- var _React$useContext6 = useContext(PickerContext),
17238
- emojisThatFailedToLoadState = _React$useContext6.emojisThatFailedToLoadState;
17239
- return emojisThatFailedToLoadState;
17240
- }
17241
- function useIsPastInitialLoad() {
17242
- var _React$useContext7 = useContext(PickerContext),
17243
- isPastInitialLoad = _React$useContext7.isPastInitialLoad;
17244
- return isPastInitialLoad;
17245
- }
17246
- function useEmojiVariationPickerState() {
17247
- var _React$useContext8 = useContext(PickerContext),
17248
- emojiVariationPickerState = _React$useContext8.emojiVariationPickerState;
17249
- return emojiVariationPickerState;
17250
- }
17251
- function useSkinToneFanOpenState() {
17252
- var _React$useContext9 = useContext(PickerContext),
17253
- skinToneFanOpenState = _React$useContext9.skinToneFanOpenState;
17254
- return skinToneFanOpenState;
17255
- }
17256
- function useUpdateSuggested() {
17257
- var _React$useContext11 = useContext(PickerContext),
17258
- suggestedUpdateState = _React$useContext11.suggestedUpdateState;
17259
- var suggestedUpdated = suggestedUpdateState[0],
17260
- setsuggestedUpdate = suggestedUpdateState[1];
17261
- return [suggestedUpdated, function updateSuggested() {
17262
- setsuggestedUpdate(Date.now());
17263
- }];
17264
- }
17265
-
17266
- function useDisallowMouseMove() {
17267
- var DisallowMouseRef = useDisallowMouseRef();
17268
- return function disallowMouseMove() {
17269
- DisallowMouseRef.current = true;
17270
- };
17271
- }
17272
- function useAllowMouseMove() {
17273
- var DisallowMouseRef = useDisallowMouseRef();
17274
- return function allowMouseMove() {
17275
- DisallowMouseRef.current = false;
17276
- };
17277
- }
17278
- function useIsMouseDisallowed() {
17279
- var DisallowMouseRef = useDisallowMouseRef();
17280
- return function isMouseDisallowed() {
17281
- return DisallowMouseRef.current;
17282
- };
17283
- }
17284
- function useOnMouseMove() {
17285
- var BodyRef = useBodyRef();
17286
- var allowMouseMove = useAllowMouseMove();
17287
- var isMouseDisallowed = useIsMouseDisallowed();
17288
- useEffect(function () {
17289
- var bodyRef = BodyRef.current;
17290
- bodyRef == null ? void 0 : bodyRef.addEventListener('mousemove', onMouseMove, {
17291
- passive: true
17292
- });
17293
- function onMouseMove() {
17294
- if (isMouseDisallowed()) {
17295
- allowMouseMove();
17296
- }
17297
- }
17298
- return function () {
17299
- bodyRef == null ? void 0 : bodyRef.removeEventListener('mousemove', onMouseMove);
17300
- };
17301
- }, [BodyRef, allowMouseMove, isMouseDisallowed]);
17302
- }
17303
-
17304
- function elementCountInRow(parent, element) {
17305
- if (!parent || !element) {
17306
- return 0;
17307
- }
17308
- var parentWidth = parent.getBoundingClientRect().width;
17309
- var elementWidth = element.getBoundingClientRect().width;
17310
- return Math.floor(parentWidth / elementWidth);
17311
- }
17312
- function elementIndexInRow(parent, element) {
17313
- if (!parent || !element) {
17314
- return 0;
17315
- }
17316
- var elementWidth = element.getBoundingClientRect().width;
17317
- var elementLeft = element.getBoundingClientRect().left;
17318
- var parentLeft = parent.getBoundingClientRect().left;
17319
- return Math.floor((elementLeft - parentLeft) / elementWidth);
17320
- }
17321
- function rowNumber(parent, element) {
17322
- if (!parent || !element) {
17323
- return 0;
17324
- }
17325
- var elementHeight = element.getBoundingClientRect().height;
17326
- var elementTop = element.getBoundingClientRect().top;
17327
- var parentTop = parent.getBoundingClientRect().top;
17328
- return Math.round((elementTop - parentTop) / elementHeight);
17329
- }
17330
- function hasNextRow(parent, element) {
17331
- if (!parent || !element) {
17332
- return false;
17333
- }
17334
- var elementHeight = element.getBoundingClientRect().height;
17335
- var elementTop = element.getBoundingClientRect().top;
17336
- var parentTop = parent.getBoundingClientRect().top;
17337
- var parentHeight = parent.getBoundingClientRect().height;
17338
- return Math.round(elementTop - parentTop + elementHeight) < parentHeight;
17339
- }
17340
- function getRowElements(elements, row, elementsInRow) {
17341
- if (row === -1) {
17342
- var lastRow = Math.floor((elements.length - 1) / elementsInRow);
17343
- var firstElementIndex = lastRow * elementsInRow;
17344
- var lastElementIndex = elements.length - 1;
17345
- return elements.slice(firstElementIndex, lastElementIndex + 1);
17346
- }
17347
- return elements.slice(row * elementsInRow, (row + 1) * elementsInRow);
17060
+ function getRowElements(elements, row, elementsInRow) {
17061
+ if (row === -1) {
17062
+ var lastRow = Math.floor((elements.length - 1) / elementsInRow);
17063
+ var firstElementIndex = lastRow * elementsInRow;
17064
+ var lastElementIndex = elements.length - 1;
17065
+ return elements.slice(firstElementIndex, lastElementIndex + 1);
17066
+ }
17067
+ return elements.slice(row * elementsInRow, (row + 1) * elementsInRow);
17348
17068
  }
17349
17069
  function getNextRowElements(allElements, currentRow, elementsInRow) {
17350
17070
  var nextRow = currentRow + 1;
@@ -17579,42 +17299,233 @@ function closestCategoryContent(element) {
17579
17299
  return element.closest(asSelectors(ClassNames.categoryContent));
17580
17300
  }
17581
17301
 
17582
- function parseNativeEmoji(unified) {
17583
- return unified.split('-').map(function (hex) {
17584
- return String.fromCodePoint(parseInt(hex, 16));
17585
- }).join('');
17302
+ function useDebouncedState(initialValue, delay) {
17303
+ if (delay === void 0) {
17304
+ delay = 0;
17305
+ }
17306
+ var _useState = useState(initialValue),
17307
+ state = _useState[0],
17308
+ setState = _useState[1];
17309
+ var timer = useRef(null);
17310
+ function debouncedSetState(value) {
17311
+ return new Promise(function (resolve) {
17312
+ var _window;
17313
+ if (timer.current) {
17314
+ clearTimeout(timer.current);
17315
+ }
17316
+ timer.current = (_window = window) == null ? void 0 : _window.setTimeout(function () {
17317
+ setState(value);
17318
+ resolve(value);
17319
+ }, delay);
17320
+ });
17321
+ }
17322
+ return [state, debouncedSetState];
17586
17323
  }
17587
17324
 
17588
- var SUGGESTED_LS_KEY = 'epr_suggested';
17589
- function getSuggested(mode) {
17590
- try {
17591
- var _window, _window$localStorage$, _window2;
17592
- if (!((_window = window) != null && _window.localStorage)) {
17593
- return [];
17594
- }
17595
- var recent = JSON.parse((_window$localStorage$ = (_window2 = window) == null ? void 0 : _window2.localStorage.getItem(SUGGESTED_LS_KEY)) != null ? _window$localStorage$ : '[]');
17596
- if (mode === SuggestionMode.FREQUENT) {
17597
- return recent.sort(function (a, b) {
17598
- return b.count - a.count;
17599
- });
17600
- }
17601
- return recent;
17602
- } catch (_unused) {
17603
- return [];
17604
- }
17325
+ function useIsUnicodeHidden() {
17326
+ var unicodeToHide = useUnicodeToHide();
17327
+ return function (emojiUnified) {
17328
+ return unicodeToHide.has(emojiUnified);
17329
+ };
17605
17330
  }
17606
- function setSuggested(emoji, skinTone) {
17607
- var recent = getSuggested();
17608
- var unified = emojiUnified(emoji, skinTone);
17609
- var originalUnified = emojiUnified(emoji);
17610
- var existing = recent.find(function (_ref) {
17611
- var u = _ref.unified;
17612
- return u === unified;
17613
- });
17614
- var nextList;
17615
- if (existing) {
17616
- nextList = [existing].concat(recent.filter(function (i) {
17617
- return i !== existing;
17331
+
17332
+ function useDisallowedEmojis() {
17333
+ var DisallowedEmojisRef = useRef({});
17334
+ var emojiVersionConfig = useEmojiVersionConfig();
17335
+ return useMemo(function () {
17336
+ var emojiVersion = parseFloat("" + emojiVersionConfig);
17337
+ if (!emojiVersionConfig || Number.isNaN(emojiVersion)) {
17338
+ return DisallowedEmojisRef.current;
17339
+ }
17340
+ return allEmojis.reduce(function (disallowedEmojis, emoji) {
17341
+ if (addedInNewerVersion(emoji, emojiVersion)) {
17342
+ disallowedEmojis[emojiUnified(emoji)] = true;
17343
+ }
17344
+ return disallowedEmojis;
17345
+ }, DisallowedEmojisRef.current);
17346
+ }, [emojiVersionConfig]);
17347
+ }
17348
+ function useIsEmojiDisallowed() {
17349
+ var disallowedEmojis = useDisallowedEmojis();
17350
+ var isUnicodeHidden = useIsUnicodeHidden();
17351
+ return function isEmojiDisallowed(emoji) {
17352
+ var unified = unifiedWithoutSkinTone(emojiUnified(emoji));
17353
+ return Boolean(disallowedEmojis[unified] || isUnicodeHidden(unified));
17354
+ };
17355
+ }
17356
+ function addedInNewerVersion(emoji, supportedLevel) {
17357
+ return addedIn(emoji) > supportedLevel;
17358
+ }
17359
+
17360
+ function useMarkInitialLoad(dispatch) {
17361
+ useEffect(function () {
17362
+ dispatch(true);
17363
+ }, [dispatch]);
17364
+ }
17365
+
17366
+ function PickerContextProvider(_ref) {
17367
+ var children = _ref.children;
17368
+ var disallowedEmojis = useDisallowedEmojis();
17369
+ var defaultSkinTone = useDefaultSkinToneConfig();
17370
+ var reactionsDefaultOpen = useReactionsOpenConfig();
17371
+ // Initialize the filter with the inititial dictionary
17372
+ var filterRef = useRef(alphaNumericEmojiIndex);
17373
+ var disallowClickRef = useRef(false);
17374
+ var disallowMouseRef = useRef(false);
17375
+ var disallowedEmojisRef = useRef(disallowedEmojis);
17376
+ var suggestedUpdateState = useDebouncedState(Date.now(), 200);
17377
+ var searchTerm = useDebouncedState('', 100);
17378
+ var skinToneFanOpenState = useState(false);
17379
+ var activeSkinTone = useState(defaultSkinTone);
17380
+ var activeCategoryState = useState(null);
17381
+ var emojisThatFailedToLoadState = useState(new Set());
17382
+ var emojiVariationPickerState = useState(null);
17383
+ var reactionsModeState = useState(reactionsDefaultOpen);
17384
+ var _useState = useState(false),
17385
+ isPastInitialLoad = _useState[0],
17386
+ setIsPastInitialLoad = _useState[1];
17387
+ useMarkInitialLoad(setIsPastInitialLoad);
17388
+ return createElement(PickerContext.Provider, {
17389
+ value: {
17390
+ activeCategoryState: activeCategoryState,
17391
+ activeSkinTone: activeSkinTone,
17392
+ disallowClickRef: disallowClickRef,
17393
+ disallowMouseRef: disallowMouseRef,
17394
+ disallowedEmojisRef: disallowedEmojisRef,
17395
+ emojiVariationPickerState: emojiVariationPickerState,
17396
+ emojisThatFailedToLoadState: emojisThatFailedToLoadState,
17397
+ filterRef: filterRef,
17398
+ isPastInitialLoad: isPastInitialLoad,
17399
+ searchTerm: searchTerm,
17400
+ skinToneFanOpenState: skinToneFanOpenState,
17401
+ suggestedUpdateState: suggestedUpdateState,
17402
+ reactionsModeState: reactionsModeState
17403
+ }
17404
+ }, children);
17405
+ }
17406
+ var PickerContext = /*#__PURE__*/createContext({
17407
+ activeCategoryState: [null, function () {}],
17408
+ activeSkinTone: [SkinTones.NEUTRAL, function () {}],
17409
+ disallowClickRef: {
17410
+ current: false
17411
+ },
17412
+ disallowMouseRef: {
17413
+ current: false
17414
+ },
17415
+ disallowedEmojisRef: {
17416
+ current: {}
17417
+ },
17418
+ emojiVariationPickerState: [null, function () {}],
17419
+ emojisThatFailedToLoadState: [/*#__PURE__*/new Set(), function () {}],
17420
+ filterRef: {
17421
+ current: {}
17422
+ },
17423
+ isPastInitialLoad: true,
17424
+ searchTerm: ['', function () {
17425
+ return new Promise(function () {
17426
+ return undefined;
17427
+ });
17428
+ }],
17429
+ skinToneFanOpenState: [false, function () {}],
17430
+ suggestedUpdateState: [/*#__PURE__*/Date.now(), function () {}],
17431
+ reactionsModeState: [false, function () {}]
17432
+ });
17433
+ function useFilterRef() {
17434
+ var _React$useContext = useContext(PickerContext),
17435
+ filterRef = _React$useContext.filterRef;
17436
+ return filterRef;
17437
+ }
17438
+ function useDisallowClickRef() {
17439
+ var _React$useContext2 = useContext(PickerContext),
17440
+ disallowClickRef = _React$useContext2.disallowClickRef;
17441
+ return disallowClickRef;
17442
+ }
17443
+ function useDisallowMouseRef() {
17444
+ var _React$useContext3 = useContext(PickerContext),
17445
+ disallowMouseRef = _React$useContext3.disallowMouseRef;
17446
+ return disallowMouseRef;
17447
+ }
17448
+ function useReactionsModeState() {
17449
+ var _React$useContext4 = useContext(PickerContext),
17450
+ reactionsModeState = _React$useContext4.reactionsModeState;
17451
+ return reactionsModeState;
17452
+ }
17453
+ function useSearchTermState() {
17454
+ var _React$useContext5 = useContext(PickerContext),
17455
+ searchTerm = _React$useContext5.searchTerm;
17456
+ return searchTerm;
17457
+ }
17458
+ function useActiveSkinToneState() {
17459
+ var _React$useContext6 = useContext(PickerContext),
17460
+ activeSkinTone = _React$useContext6.activeSkinTone;
17461
+ return activeSkinTone;
17462
+ }
17463
+ function useEmojisThatFailedToLoadState() {
17464
+ var _React$useContext7 = useContext(PickerContext),
17465
+ emojisThatFailedToLoadState = _React$useContext7.emojisThatFailedToLoadState;
17466
+ return emojisThatFailedToLoadState;
17467
+ }
17468
+ function useIsPastInitialLoad() {
17469
+ var _React$useContext8 = useContext(PickerContext),
17470
+ isPastInitialLoad = _React$useContext8.isPastInitialLoad;
17471
+ return isPastInitialLoad;
17472
+ }
17473
+ function useEmojiVariationPickerState() {
17474
+ var _React$useContext9 = useContext(PickerContext),
17475
+ emojiVariationPickerState = _React$useContext9.emojiVariationPickerState;
17476
+ return emojiVariationPickerState;
17477
+ }
17478
+ function useSkinToneFanOpenState() {
17479
+ var _React$useContext10 = useContext(PickerContext),
17480
+ skinToneFanOpenState = _React$useContext10.skinToneFanOpenState;
17481
+ return skinToneFanOpenState;
17482
+ }
17483
+ function useUpdateSuggested() {
17484
+ var _React$useContext12 = useContext(PickerContext),
17485
+ suggestedUpdateState = _React$useContext12.suggestedUpdateState;
17486
+ var suggestedUpdated = suggestedUpdateState[0],
17487
+ setsuggestedUpdate = suggestedUpdateState[1];
17488
+ return [suggestedUpdated, function updateSuggested() {
17489
+ setsuggestedUpdate(Date.now());
17490
+ }];
17491
+ }
17492
+
17493
+ function parseNativeEmoji(unified) {
17494
+ return unified.split('-').map(function (hex) {
17495
+ return String.fromCodePoint(parseInt(hex, 16));
17496
+ }).join('');
17497
+ }
17498
+
17499
+ var SUGGESTED_LS_KEY = 'epr_suggested';
17500
+ function getSuggested(mode) {
17501
+ try {
17502
+ var _window, _window$localStorage$, _window2;
17503
+ if (!((_window = window) != null && _window.localStorage)) {
17504
+ return [];
17505
+ }
17506
+ var recent = JSON.parse((_window$localStorage$ = (_window2 = window) == null ? void 0 : _window2.localStorage.getItem(SUGGESTED_LS_KEY)) != null ? _window$localStorage$ : '[]');
17507
+ if (mode === SuggestionMode.FREQUENT) {
17508
+ return recent.sort(function (a, b) {
17509
+ return b.count - a.count;
17510
+ });
17511
+ }
17512
+ return recent;
17513
+ } catch (_unused) {
17514
+ return [];
17515
+ }
17516
+ }
17517
+ function setSuggested(emoji, skinTone) {
17518
+ var recent = getSuggested();
17519
+ var unified = emojiUnified(emoji, skinTone);
17520
+ var originalUnified = emojiUnified(emoji);
17521
+ var existing = recent.find(function (_ref) {
17522
+ var u = _ref.unified;
17523
+ return u === unified;
17524
+ });
17525
+ var nextList;
17526
+ if (existing) {
17527
+ nextList = [existing].concat(recent.filter(function (i) {
17528
+ return i !== existing;
17618
17529
  }));
17619
17530
  } else {
17620
17531
  existing = {
@@ -17669,46 +17580,140 @@ function useHasOpenToggles() {
17669
17580
  };
17670
17581
  }
17671
17582
 
17672
- function useSetVariationPicker() {
17673
- var setAnchoredEmojiRef = useSetAnchoredEmojiRef();
17674
- var _useEmojiVariationPic = useEmojiVariationPickerState(),
17675
- setEmojiVariationPicker = _useEmojiVariationPic[1];
17676
- return function setVariationPicker(element) {
17677
- var _emojiFromElement = emojiFromElement(element),
17678
- emoji = _emojiFromElement[0];
17679
- if (emoji) {
17680
- setAnchoredEmojiRef(element);
17681
- setEmojiVariationPicker(emoji);
17682
- }
17683
- };
17583
+ function focusElement(element) {
17584
+ if (!element) {
17585
+ return;
17586
+ }
17587
+ requestAnimationFrame(function () {
17588
+ element.focus();
17589
+ });
17590
+ }
17591
+ function focusPrevElementSibling(element) {
17592
+ if (!element) return;
17593
+ var prev = element.previousElementSibling;
17594
+ focusElement(prev);
17595
+ }
17596
+ function focusNextElementSibling(element) {
17597
+ if (!element) return;
17598
+ var next = element.nextElementSibling;
17599
+ focusElement(next);
17600
+ }
17601
+ function focusFirstElementChild(element) {
17602
+ if (!element) return;
17603
+ var first = element.firstElementChild;
17604
+ focusElement(first);
17684
17605
  }
17685
17606
 
17686
- function useMouseDownHandlers(BodyRef) {
17687
- var mouseDownTimerRef = useRef();
17688
- var setVariationPicker = useSetVariationPicker();
17689
- var disallowClickRef = useDisallowClickRef();
17690
- var _useEmojiVariationPic = useEmojiVariationPickerState(),
17691
- setEmojiVariationPicker = _useEmojiVariationPic[1];
17692
- var closeAllOpenToggles = useCloseAllOpenToggles();
17693
- var _useActiveSkinToneSta = useActiveSkinToneState(),
17694
- activeSkinTone = _useActiveSkinToneSta[0];
17695
- var onEmojiClick = useOnEmojiClickConfig();
17696
- var _useUpdateSuggested = useUpdateSuggested(),
17697
- updateSuggested = _useUpdateSuggested[1];
17698
- var getEmojiUrl = useGetEmojiUrlConfig();
17699
- var activeEmojiStyle = useEmojiStyleConfig();
17700
- var onClick = useCallback(function onClick(event) {
17701
- if (disallowClickRef.current) {
17702
- return;
17703
- }
17704
- closeAllOpenToggles();
17705
- var _emojiFromEvent = emojiFromEvent(event),
17706
- emoji = _emojiFromEvent[0],
17707
- unified = _emojiFromEvent[1];
17708
- if (!emoji || !unified) {
17709
- return;
17607
+ function ElementRefContextProvider(_ref) {
17608
+ var children = _ref.children;
17609
+ var PickerMainRef = useRef(null);
17610
+ var AnchoredEmojiRef = useRef(null);
17611
+ var BodyRef = useRef(null);
17612
+ var SearchInputRef = useRef(null);
17613
+ var SkinTonePickerRef = useRef(null);
17614
+ var CategoryNavigationRef = useRef(null);
17615
+ var VariationPickerRef = useRef(null);
17616
+ var ReactionsRef = useRef(null);
17617
+ return createElement(ElementRefContext.Provider, {
17618
+ value: {
17619
+ AnchoredEmojiRef: AnchoredEmojiRef,
17620
+ BodyRef: BodyRef,
17621
+ CategoryNavigationRef: CategoryNavigationRef,
17622
+ PickerMainRef: PickerMainRef,
17623
+ SearchInputRef: SearchInputRef,
17624
+ SkinTonePickerRef: SkinTonePickerRef,
17625
+ VariationPickerRef: VariationPickerRef,
17626
+ ReactionsRef: ReactionsRef
17710
17627
  }
17711
- var skinToneToUse = activeVariationFromUnified(unified) || activeSkinTone;
17628
+ }, children);
17629
+ }
17630
+ var ElementRefContext = /*#__PURE__*/createContext({
17631
+ AnchoredEmojiRef: /*#__PURE__*/createRef(),
17632
+ BodyRef: /*#__PURE__*/createRef(),
17633
+ CategoryNavigationRef: /*#__PURE__*/createRef(),
17634
+ PickerMainRef: /*#__PURE__*/createRef(),
17635
+ SearchInputRef: /*#__PURE__*/createRef(),
17636
+ SkinTonePickerRef: /*#__PURE__*/createRef(),
17637
+ VariationPickerRef: /*#__PURE__*/createRef(),
17638
+ ReactionsRef: /*#__PURE__*/createRef()
17639
+ });
17640
+ function useElementRef() {
17641
+ return useContext(ElementRefContext);
17642
+ }
17643
+ function usePickerMainRef() {
17644
+ return useElementRef()['PickerMainRef'];
17645
+ }
17646
+ function useAnchoredEmojiRef() {
17647
+ return useElementRef()['AnchoredEmojiRef'];
17648
+ }
17649
+ function useSetAnchoredEmojiRef() {
17650
+ var AnchoredEmojiRef = useAnchoredEmojiRef();
17651
+ return function (target) {
17652
+ if (target === null && AnchoredEmojiRef.current !== null) {
17653
+ focusElement(AnchoredEmojiRef.current);
17654
+ }
17655
+ AnchoredEmojiRef.current = target;
17656
+ };
17657
+ }
17658
+ function useBodyRef() {
17659
+ return useElementRef()['BodyRef'];
17660
+ }
17661
+ function useReactionsRef() {
17662
+ return useElementRef()['ReactionsRef'];
17663
+ }
17664
+ function useSearchInputRef() {
17665
+ return useElementRef()['SearchInputRef'];
17666
+ }
17667
+ function useSkinTonePickerRef() {
17668
+ return useElementRef()['SkinTonePickerRef'];
17669
+ }
17670
+ function useCategoryNavigationRef() {
17671
+ return useElementRef()['CategoryNavigationRef'];
17672
+ }
17673
+ function useVariationPickerRef() {
17674
+ return useElementRef()['VariationPickerRef'];
17675
+ }
17676
+
17677
+ function useSetVariationPicker() {
17678
+ var setAnchoredEmojiRef = useSetAnchoredEmojiRef();
17679
+ var _useEmojiVariationPic = useEmojiVariationPickerState(),
17680
+ setEmojiVariationPicker = _useEmojiVariationPic[1];
17681
+ return function setVariationPicker(element) {
17682
+ var _emojiFromElement = emojiFromElement(element),
17683
+ emoji = _emojiFromElement[0];
17684
+ if (emoji) {
17685
+ setAnchoredEmojiRef(element);
17686
+ setEmojiVariationPicker(emoji);
17687
+ }
17688
+ };
17689
+ }
17690
+
17691
+ function useMouseDownHandlers(BodyRef) {
17692
+ var mouseDownTimerRef = useRef();
17693
+ var setVariationPicker = useSetVariationPicker();
17694
+ var disallowClickRef = useDisallowClickRef();
17695
+ var _useEmojiVariationPic = useEmojiVariationPickerState(),
17696
+ setEmojiVariationPicker = _useEmojiVariationPic[1];
17697
+ var closeAllOpenToggles = useCloseAllOpenToggles();
17698
+ var _useActiveSkinToneSta = useActiveSkinToneState(),
17699
+ activeSkinTone = _useActiveSkinToneSta[0];
17700
+ var onEmojiClick = useOnEmojiClickConfig();
17701
+ var _useUpdateSuggested = useUpdateSuggested(),
17702
+ updateSuggested = _useUpdateSuggested[1];
17703
+ var getEmojiUrl = useGetEmojiUrlConfig();
17704
+ var activeEmojiStyle = useEmojiStyleConfig();
17705
+ var onClick = useCallback(function onClick(event) {
17706
+ if (disallowClickRef.current) {
17707
+ return;
17708
+ }
17709
+ closeAllOpenToggles();
17710
+ var _emojiFromEvent = emojiFromEvent(event),
17711
+ emoji = _emojiFromEvent[0],
17712
+ unified = _emojiFromEvent[1];
17713
+ if (!emoji || !unified) {
17714
+ return;
17715
+ }
17716
+ var skinToneToUse = activeVariationFromUnified(unified) || activeSkinTone;
17712
17717
  updateSuggested();
17713
17718
  setSuggested(emoji, skinToneToUse);
17714
17719
  onEmojiClick(emojiClickOutput(emoji, skinToneToUse, activeEmojiStyle, getEmojiUrl), event);
@@ -17809,6 +17814,391 @@ function emojiClickOutput(emoji, activeSkinTone, activeEmojiStyle, getEmojiUrl)
17809
17814
  };
17810
17815
  }
17811
17816
 
17817
+ function Button(props) {
17818
+ return createElement("button", Object.assign({
17819
+ type: "button"
17820
+ }, props, {
17821
+ className: cx(styles.button, props.className)
17822
+ }), props.children);
17823
+ }
17824
+ var styles = /*#__PURE__*/stylesheet.create({
17825
+ button: {
17826
+ '.': 'epr-btn',
17827
+ cursor: 'pointer',
17828
+ border: '0',
17829
+ background: 'none',
17830
+ outline: 'none'
17831
+ }
17832
+ });
17833
+
17834
+ function ClickableEmojiButton(_ref) {
17835
+ var _cx;
17836
+ var emojiNames = _ref.emojiNames,
17837
+ unified = _ref.unified,
17838
+ hidden = _ref.hidden,
17839
+ hiddenOnSearch = _ref.hiddenOnSearch,
17840
+ _ref$showVariations = _ref.showVariations,
17841
+ showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
17842
+ hasVariations = _ref.hasVariations,
17843
+ children = _ref.children,
17844
+ _ref$round = _ref.round,
17845
+ round = _ref$round === void 0 ? false : _ref$round;
17846
+ return createElement(Button, {
17847
+ className: cx(styles$1.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$1.hasVariations, round && styles$1.round),
17848
+ "data-unified": unified,
17849
+ "aria-label": emojiNames[0],
17850
+ "data-full-name": emojiNames
17851
+ }, children);
17852
+ }
17853
+ var styles$1 = /*#__PURE__*/stylesheet.create({
17854
+ emoji: {
17855
+ '.': ClassNames.emoji,
17856
+ position: 'relative',
17857
+ width: 'var(--epr-emoji-fullsize)',
17858
+ height: 'var(--epr-emoji-fullsize)',
17859
+ boxSizing: 'border-box',
17860
+ display: 'flex',
17861
+ alignItems: 'center',
17862
+ justifyContent: 'center',
17863
+ maxWidth: 'var(--epr-emoji-fullsize)',
17864
+ maxHeight: 'var(--epr-emoji-fullsize)',
17865
+ borderRadius: '8px',
17866
+ overflow: 'hidden',
17867
+ transition: 'background-color 0.2s',
17868
+ ':hover': {
17869
+ backgroundColor: 'var(--epr-emoji-hover-color)'
17870
+ },
17871
+ ':focus': {
17872
+ backgroundColor: 'var(--epr-focus-bg-color)'
17873
+ }
17874
+ },
17875
+ round: {
17876
+ borderRadius: '50%'
17877
+ },
17878
+ hasVariations: {
17879
+ '.': ClassNames.emojiHasVariations,
17880
+ ':after': {
17881
+ content: '',
17882
+ display: 'block',
17883
+ width: '0',
17884
+ height: '0',
17885
+ right: '0px',
17886
+ bottom: '1px',
17887
+ position: 'absolute',
17888
+ borderLeft: '4px solid transparent',
17889
+ borderRight: '4px solid transparent',
17890
+ transform: 'rotate(135deg)',
17891
+ borderBottom: '4px solid var(--epr-emoji-variation-indicator-color)',
17892
+ zIndex: 'var(--epr-emoji-variations-indictator-z-index)'
17893
+ },
17894
+ ':hover:after': {
17895
+ borderBottom: '4px solid var(--epr-emoji-variation-indicator-color-hover)'
17896
+ }
17897
+ }
17898
+ });
17899
+
17900
+ var emojiStyles = /*#__PURE__*/stylesheet.create({
17901
+ external: {
17902
+ '.': ClassNames.external,
17903
+ fontSize: '0'
17904
+ },
17905
+ common: {
17906
+ alignSelf: 'center',
17907
+ justifySelf: 'center',
17908
+ display: 'block'
17909
+ }
17910
+ });
17911
+
17912
+ function EmojiImg(_ref) {
17913
+ var emojiName = _ref.emojiName,
17914
+ style = _ref.style,
17915
+ _ref$lazyLoad = _ref.lazyLoad,
17916
+ lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad,
17917
+ imgUrl = _ref.imgUrl,
17918
+ onError = _ref.onError,
17919
+ className = _ref.className;
17920
+ return createElement("img", {
17921
+ src: imgUrl,
17922
+ alt: emojiName,
17923
+ className: cx(styles$2.emojiImag, emojiStyles.external, emojiStyles.common, className),
17924
+ loading: lazyLoad ? 'lazy' : 'eager',
17925
+ onError: onError,
17926
+ style: style
17927
+ });
17928
+ }
17929
+ var styles$2 = /*#__PURE__*/stylesheet.create({
17930
+ emojiImag: {
17931
+ '.': 'epr-emoji-img',
17932
+ maxWidth: 'var(--epr-emoji-fullsize)',
17933
+ maxHeight: 'var(--epr-emoji-fullsize)',
17934
+ minWidth: 'var(--epr-emoji-fullsize)',
17935
+ minHeight: 'var(--epr-emoji-fullsize)',
17936
+ padding: 'var(--epr-emoji-padding)'
17937
+ }
17938
+ });
17939
+
17940
+ function NativeEmoji(_ref) {
17941
+ var unified = _ref.unified,
17942
+ style = _ref.style,
17943
+ className = _ref.className;
17944
+ return createElement("span", {
17945
+ className: cx(styles$3.nativeEmoji, emojiStyles.common, emojiStyles.external, className),
17946
+ "data-unified": unified,
17947
+ style: style
17948
+ }, parseNativeEmoji(unified));
17949
+ }
17950
+ var styles$3 = /*#__PURE__*/stylesheet.create({
17951
+ nativeEmoji: {
17952
+ '.': 'epr-emoji-native',
17953
+ fontFamily: '"Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji"!important',
17954
+ position: 'relative',
17955
+ lineHeight: '100%',
17956
+ fontSize: 'var(--epr-emoji-size)',
17957
+ textAlign: 'center',
17958
+ alignSelf: 'center',
17959
+ justifySelf: 'center',
17960
+ letterSpacing: '0',
17961
+ padding: 'var(--epr-emoji-padding)'
17962
+ }
17963
+ });
17964
+
17965
+ function ViewOnlyEmoji(_ref) {
17966
+ var emoji = _ref.emoji,
17967
+ unified = _ref.unified,
17968
+ emojiStyle = _ref.emojiStyle,
17969
+ size = _ref.size,
17970
+ lazyLoad = _ref.lazyLoad,
17971
+ _ref$getEmojiUrl = _ref.getEmojiUrl,
17972
+ getEmojiUrl = _ref$getEmojiUrl === void 0 ? emojiUrlByUnified : _ref$getEmojiUrl,
17973
+ className = _ref.className;
17974
+ var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
17975
+ setEmojisThatFailedToLoad = _useEmojisThatFailedT[1];
17976
+ var style = {};
17977
+ if (size) {
17978
+ style.width = style.height = style.fontSize = size + "px";
17979
+ }
17980
+ var emojiToRender = emoji ? emoji : emojiByUnified(unified);
17981
+ if (!emojiToRender) {
17982
+ return null;
17983
+ }
17984
+ if (isCustomEmoji(emojiToRender)) {
17985
+ return createElement(EmojiImg, {
17986
+ style: style,
17987
+ emojiName: unified,
17988
+ emojiStyle: EmojiStyle.NATIVE,
17989
+ lazyLoad: lazyLoad,
17990
+ imgUrl: emojiToRender.imgUrl,
17991
+ onError: onError,
17992
+ className: className
17993
+ });
17994
+ }
17995
+ return createElement(Fragment, null, emojiStyle === EmojiStyle.NATIVE ? createElement(NativeEmoji, {
17996
+ unified: unified,
17997
+ style: style,
17998
+ className: className
17999
+ }) : createElement(EmojiImg, {
18000
+ style: style,
18001
+ emojiName: emojiName(emojiToRender),
18002
+ emojiStyle: emojiStyle,
18003
+ lazyLoad: lazyLoad,
18004
+ imgUrl: getEmojiUrl(unified, emojiStyle),
18005
+ onError: onError,
18006
+ className: className
18007
+ }));
18008
+ function onError() {
18009
+ setEmojisThatFailedToLoad(function (prev) {
18010
+ return new Set(prev).add(unified);
18011
+ });
18012
+ }
18013
+ }
18014
+
18015
+ function ClickableEmoji(_ref) {
18016
+ var emoji = _ref.emoji,
18017
+ unified = _ref.unified,
18018
+ hidden = _ref.hidden,
18019
+ hiddenOnSearch = _ref.hiddenOnSearch,
18020
+ emojiStyle = _ref.emojiStyle,
18021
+ _ref$showVariations = _ref.showVariations,
18022
+ showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
18023
+ size = _ref.size,
18024
+ lazyLoad = _ref.lazyLoad,
18025
+ getEmojiUrl = _ref.getEmojiUrl,
18026
+ _ref$round = _ref.round,
18027
+ round = _ref$round === void 0 ? false : _ref$round;
18028
+ var hasVariations = emojiHasVariations(emoji);
18029
+ return createElement(ClickableEmojiButton, {
18030
+ hasVariations: hasVariations,
18031
+ showVariations: showVariations,
18032
+ hidden: hidden,
18033
+ hiddenOnSearch: hiddenOnSearch,
18034
+ emojiNames: emojiNames(emoji),
18035
+ unified: unified,
18036
+ round: round
18037
+ }, createElement(ViewOnlyEmoji, {
18038
+ unified: unified,
18039
+ emoji: emoji,
18040
+ size: size,
18041
+ emojiStyle: emojiStyle,
18042
+ lazyLoad: lazyLoad,
18043
+ getEmojiUrl: getEmojiUrl
18044
+ }));
18045
+ }
18046
+
18047
+ var Plus = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjgwcHgiIHZpZXdCb3g9IjAgMCAyMCA4MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjODY4Njg2IiBkPSJNNS43LDEwLjRjMCwwLjEsMC4xLDAuMywwLjIsMC40QzYsMTAuOSw2LjEsMTEsNi4zLDExaDMuNHYzLjRjMCwwLjEsMC4xLDAuMywwLjIsMC40CgljMC4xLDAuMSwwLjIsMC4yLDAuNCwwLjJjMC4zLDAsMC41LTAuMiwwLjUtMC41di0zLjRoMy40YzAuMywwLDAuNS0wLjIsMC41LTAuNXMtMC4yLTAuNS0wLjUtMC41aC0zLjRWNi43YzAtMC4zLTAuMi0wLjUtMC41LTAuNQoJQzkuOCw2LDkuNiw2LjIsOS42LDYuNXYzLjRINi4yQzUuOSw5LjksNS43LDEwLjEsNS43LDEwLjRMNS43LDEwLjR6Ii8+CjxwYXRoIGZpbGw9IiMzMzcxQjciIGQ9Ik01LjcsMzAuNGMwLDAuMSwwLjEsMC4zLDAuMiwwLjRTNi4xLDMxLDYuMywzMWgzLjR2My40YzAsMC4xLDAuMSwwLjMsMC4yLDAuNGMwLjEsMC4xLDAuMiwwLjIsMC40LDAuMgoJYzAuMywwLDAuNS0wLjIsMC41LTAuNXYtMy40aDMuNGMwLjMsMCwwLjUtMC4yLDAuNS0wLjVzLTAuMi0wLjUtMC41LTAuNWgtMy40di0zLjRjMC0wLjMtMC4yLTAuNS0wLjUtMC41cy0wLjUsMC4yLTAuNSwwLjV2My40SDYuMgoJQzUuOSwyOS45LDUuNywzMC4xLDUuNywzMC40TDUuNywzMC40eiIvPgo8cGF0aCBmaWxsPSIjQzBDMEJGIiBkPSJNNS43LDUwLjRjMCwwLjEsMC4xLDAuMywwLjIsMC40QzYsNTAuOSw2LjEsNTEsNi4zLDUxaDMuNHYzLjRjMCwwLjEsMC4xLDAuMywwLjIsMC40CgljMC4xLDAuMSwwLjIsMC4yLDAuNCwwLjJjMC4zLDAsMC41LTAuMiwwLjUtMC41di0zLjRoMy40YzAuMywwLDAuNS0wLjIsMC41LTAuNXMtMC4yLTAuNS0wLjUtMC41aC0zLjR2LTMuNGMwLTAuMy0wLjItMC41LTAuNS0wLjUKCXMtMC41LDAuMi0wLjUsMC41djMuNEg2LjJDNS45LDQ5LjksNS43LDUwLjEsNS43LDUwLjRMNS43LDUwLjR6Ii8+CjxwYXRoIGZpbGw9IiM2QUE5REQiIGQ9Ik01LjcsNzAuNGMwLDAuMSwwLjEsMC4zLDAuMiwwLjRTNi4xLDcxLDYuMyw3MWgzLjR2My40YzAsMC4xLDAuMSwwLjMsMC4yLDAuNGMwLjEsMC4xLDAuMiwwLjIsMC40LDAuMgoJYzAuMywwLDAuNS0wLjIsMC41LTAuNXYtMy40aDMuNGMwLjMsMCwwLjUtMC4yLDAuNS0wLjVzLTAuMi0wLjUtMC41LTAuNWgtMy40di0zLjRjMC0wLjMtMC4yLTAuNS0wLjUtMC41cy0wLjUsMC4yLTAuNSwwLjV2My40SDYuNAoJQzUuOSw2OS45LDUuNyw3MC4xLDUuNyw3MC40TDUuNyw3MC40eiIvPgo8L3N2Zz4=';
18048
+
18049
+ function BtnPlus() {
18050
+ var _useReactionsModeStat = useReactionsModeState(),
18051
+ setReactionsMode = _useReactionsModeStat[1];
18052
+ return createElement(Button, {
18053
+ "aria-label": "Show all Emojis",
18054
+ title: "Show all Emojis",
18055
+ tabIndex: 0,
18056
+ className: cx(styles$4.plusSign),
18057
+ onClick: function onClick() {
18058
+ return setReactionsMode(false);
18059
+ }
18060
+ });
18061
+ }
18062
+ var styles$4 = /*#__PURE__*/stylesheet.create({
18063
+ plusSign: {
18064
+ fontSize: '20px',
18065
+ padding: '18px',
18066
+ color: 'var(--epr-text-color)',
18067
+ borderRadius: '50%',
18068
+ textAlign: 'center',
18069
+ lineHeight: '100%',
18070
+ width: '20px',
18071
+ height: '20px',
18072
+ display: 'flex',
18073
+ justifyContent: 'center',
18074
+ alignItems: 'center',
18075
+ transition: 'background-color 0.1s ease-in-out',
18076
+ ':after': {
18077
+ content: '',
18078
+ minWidth: '20px',
18079
+ minHeight: '20px',
18080
+ backgroundImage: "url(" + Plus + ")",
18081
+ backgroundColor: 'transparent',
18082
+ backgroundRepeat: 'no-repeat',
18083
+ backgroundSize: '20px',
18084
+ backgroundPositionY: '0'
18085
+ },
18086
+ ':hover': {
18087
+ color: 'var(--epr-highlight-color)',
18088
+ backgroundColor: 'var(--epr-hover-bg-color)',
18089
+ // @ts-ignore
18090
+ ':after': {
18091
+ backgroundPositionY: '-20px'
18092
+ }
18093
+ },
18094
+ ':focus': {
18095
+ color: 'var(--epr-highlight-color)',
18096
+ backgroundColor: 'var(--epr-hover-bg-color)',
18097
+ // @ts-ignore
18098
+ ':after': {
18099
+ backgroundPositionY: '-40px'
18100
+ }
18101
+ }
18102
+ },
18103
+ '.epr-dark-theme': {
18104
+ plusSign: {
18105
+ ':after': {
18106
+ backgroundPositionY: '-40px'
18107
+ },
18108
+ ':hover:after': {
18109
+ backgroundPositionY: '-60px'
18110
+ }
18111
+ }
18112
+ },
18113
+ '.epr-auto-theme': {
18114
+ plusSign: {
18115
+ '@media (prefers-color-scheme: dark)': {
18116
+ ':after': {
18117
+ backgroundPositionY: '-40px'
18118
+ },
18119
+ ':hover:after': {
18120
+ backgroundPositionY: '-60px'
18121
+ }
18122
+ }
18123
+ }
18124
+ }
18125
+ });
18126
+
18127
+ function Reactions() {
18128
+ var _useReactionsModeStat = useReactionsModeState(),
18129
+ reactionsOpen = _useReactionsModeStat[0];
18130
+ var ReactionsRef = useReactionsRef();
18131
+ var reactions = useReactionsConfig();
18132
+ useMouseDownHandlers(ReactionsRef);
18133
+ var emojiStyle = useEmojiStyleConfig();
18134
+ if (!reactionsOpen) {
18135
+ return null;
18136
+ }
18137
+ return createElement("ul", {
18138
+ className: cx(styles$5.list, !reactionsOpen && commonStyles.hidden),
18139
+ ref: ReactionsRef
18140
+ }, reactions.map(function (reaction) {
18141
+ return createElement("li", {
18142
+ key: reaction
18143
+ }, createElement(ClickableEmoji, {
18144
+ emoji: emojiByUnified(reaction),
18145
+ emojiStyle: emojiStyle,
18146
+ unified: reaction,
18147
+ showVariations: false,
18148
+ round: true
18149
+ }));
18150
+ }), createElement("li", null, createElement(BtnPlus, null)));
18151
+ }
18152
+ var styles$5 = /*#__PURE__*/stylesheet.create({
18153
+ list: {
18154
+ listStyle: 'none',
18155
+ margin: '0',
18156
+ padding: '0 5px',
18157
+ display: 'flex',
18158
+ justifyContent: 'space-between',
18159
+ alignItems: 'center',
18160
+ height: '100%'
18161
+ }
18162
+ });
18163
+
18164
+ function useDisallowMouseMove() {
18165
+ var DisallowMouseRef = useDisallowMouseRef();
18166
+ return function disallowMouseMove() {
18167
+ DisallowMouseRef.current = true;
18168
+ };
18169
+ }
18170
+ function useAllowMouseMove() {
18171
+ var DisallowMouseRef = useDisallowMouseRef();
18172
+ return function allowMouseMove() {
18173
+ DisallowMouseRef.current = false;
18174
+ };
18175
+ }
18176
+ function useIsMouseDisallowed() {
18177
+ var DisallowMouseRef = useDisallowMouseRef();
18178
+ return function isMouseDisallowed() {
18179
+ return DisallowMouseRef.current;
18180
+ };
18181
+ }
18182
+ function useOnMouseMove() {
18183
+ var BodyRef = useBodyRef();
18184
+ var allowMouseMove = useAllowMouseMove();
18185
+ var isMouseDisallowed = useIsMouseDisallowed();
18186
+ useEffect(function () {
18187
+ var bodyRef = BodyRef.current;
18188
+ bodyRef == null ? void 0 : bodyRef.addEventListener('mousemove', onMouseMove, {
18189
+ passive: true
18190
+ });
18191
+ function onMouseMove() {
18192
+ if (isMouseDisallowed()) {
18193
+ allowMouseMove();
18194
+ }
18195
+ }
18196
+ return function () {
18197
+ bodyRef == null ? void 0 : bodyRef.removeEventListener('mousemove', onMouseMove);
18198
+ };
18199
+ }, [BodyRef, allowMouseMove, isMouseDisallowed]);
18200
+ }
18201
+
17812
18202
  function useOnScroll(BodyRef) {
17813
18203
  var closeAllOpenToggles = useCloseAllOpenToggles();
17814
18204
  useEffect(function () {
@@ -17975,303 +18365,81 @@ function useApplySearch() {
17975
18365
  };
17976
18366
  }
17977
18367
  function filterEmojiObjectByKeyword(emojis, keyword) {
17978
- var filtered = {};
17979
- for (var unified in emojis) {
17980
- var emoji = emojis[unified];
17981
- if (hasMatch(emoji, keyword)) {
17982
- filtered[unified] = emoji;
17983
- }
17984
- }
17985
- return filtered;
17986
- }
17987
- function hasMatch(emoji, keyword) {
17988
- return emojiNames(emoji).some(function (name) {
17989
- return name.includes(keyword);
17990
- });
17991
- }
17992
- function useIsEmojiFiltered() {
17993
- var _useFilterRef = useFilterRef(),
17994
- filter = _useFilterRef.current;
17995
- var _useSearchTermState3 = useSearchTermState(),
17996
- searchTerm = _useSearchTermState3[0];
17997
- return function (unified) {
17998
- return isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
17999
- };
18000
- }
18001
- function isEmojiFilteredBySearchTerm(unified, filter, searchTerm) {
18002
- var _filter$searchTerm;
18003
- if (!filter || !searchTerm) {
18004
- return false;
18005
- }
18006
- return !((_filter$searchTerm = filter[searchTerm]) != null && _filter$searchTerm[unified]);
18007
- }
18008
- function findLongestMatch(keyword, dict) {
18009
- if (!dict) {
18010
- return null;
18011
- }
18012
- if (dict[keyword]) {
18013
- return dict[keyword];
18014
- }
18015
- var longestMatchingKey = Object.keys(dict).sort(function (a, b) {
18016
- return b.length - a.length;
18017
- }).find(function (key) {
18018
- return keyword.includes(key);
18019
- });
18020
- if (longestMatchingKey) {
18021
- return dict[longestMatchingKey];
18022
- }
18023
- return null;
18024
- }
18025
- function getNormalizedSearchTerm(str) {
18026
- if (!str || typeof str !== 'string') {
18027
- return '';
18028
- }
18029
- return str.trim().toLowerCase();
18030
- }
18031
- function getStatusSearchResults(filterState, searchTerm) {
18032
- var _Object$entries;
18033
- if (!(filterState != null && filterState[searchTerm])) return '';
18034
- var searchResultsCount = ((_Object$entries = Object.entries(filterState == null ? void 0 : filterState[searchTerm])) == null ? void 0 : _Object$entries.length) || 0;
18035
- // eslint-disable-next-line react-hooks/rules-of-hooks
18036
- return useSearchResultsConfig(searchResultsCount);
18037
- }
18038
-
18039
- function useIsEmojiHidden() {
18040
- var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
18041
- emojisThatFailedToLoad = _useEmojisThatFailedT[0];
18042
- var isEmojiFiltered = useIsEmojiFiltered();
18043
- return function (emoji) {
18044
- var unified = emojiUnified(emoji);
18045
- var failedToLoad = emojisThatFailedToLoad.has(unified);
18046
- var filteredOut = isEmojiFiltered(unified);
18047
- return {
18048
- failedToLoad: failedToLoad,
18049
- filteredOut: filteredOut,
18050
- hidden: failedToLoad || filteredOut
18051
- };
18052
- };
18053
- }
18054
-
18055
- function Button(props) {
18056
- return createElement("button", Object.assign({
18057
- type: "button"
18058
- }, props, {
18059
- className: cx(styles.button, props.className)
18060
- }), props.children);
18061
- }
18062
- var styles = /*#__PURE__*/stylesheet.create({
18063
- button: {
18064
- '.': 'epr-btn',
18065
- cursor: 'pointer',
18066
- border: '0',
18067
- background: 'none',
18068
- outline: 'none'
18069
- }
18070
- });
18071
-
18072
- function ClickableEmojiButton(_ref) {
18073
- var _cx;
18074
- var emojiNames = _ref.emojiNames,
18075
- unified = _ref.unified,
18076
- hidden = _ref.hidden,
18077
- hiddenOnSearch = _ref.hiddenOnSearch,
18078
- _ref$showVariations = _ref.showVariations,
18079
- showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
18080
- hasVariations = _ref.hasVariations,
18081
- children = _ref.children;
18082
- return createElement(Button, {
18083
- className: cx(styles$1.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$1.hasVariations),
18084
- "data-unified": unified,
18085
- "aria-label": emojiNames[0],
18086
- "data-full-name": emojiNames
18087
- }, children);
18088
- }
18089
- var styles$1 = /*#__PURE__*/stylesheet.create({
18090
- emoji: {
18091
- '.': ClassNames.emoji,
18092
- position: 'relative',
18093
- width: 'var(--epr-emoji-fullsize)',
18094
- height: 'var(--epr-emoji-fullsize)',
18095
- boxSizing: 'border-box',
18096
- display: 'flex',
18097
- alignItems: 'center',
18098
- justifyContent: 'center',
18099
- maxWidth: 'var(--epr-emoji-fullsize)',
18100
- maxHeight: 'var(--epr-emoji-fullsize)',
18101
- borderRadius: '8px',
18102
- overflow: 'hidden',
18103
- transition: 'background-color 0.2s',
18104
- ':hover': {
18105
- backgroundColor: 'var(--epr-emoji-hover-color)'
18106
- },
18107
- ':focus': {
18108
- backgroundColor: 'var(--epr-focus-bg-color)'
18109
- }
18110
- },
18111
- hasVariations: {
18112
- '.': ClassNames.emojiHasVariations,
18113
- ':after': {
18114
- content: '',
18115
- display: 'block',
18116
- width: '0',
18117
- height: '0',
18118
- right: '0px',
18119
- bottom: '1px',
18120
- position: 'absolute',
18121
- borderLeft: '4px solid transparent',
18122
- borderRight: '4px solid transparent',
18123
- transform: 'rotate(135deg)',
18124
- borderBottom: '4px solid var(--epr-emoji-variation-indicator-color)',
18125
- zIndex: 'var(--epr-emoji-variations-indictator-z-index)'
18126
- },
18127
- ':hover:after': {
18128
- borderBottom: '4px solid var(--epr-emoji-variation-indicator-color-hover)'
18129
- }
18130
- }
18131
- });
18132
-
18133
- var emojiStyles = /*#__PURE__*/stylesheet.create({
18134
- external: {
18135
- '.': ClassNames.external,
18136
- fontSize: '0'
18137
- },
18138
- common: {
18139
- alignSelf: 'center',
18140
- justifySelf: 'center',
18141
- display: 'block'
18142
- }
18143
- });
18144
-
18145
- function EmojiImg(_ref) {
18146
- var emojiName = _ref.emojiName,
18147
- style = _ref.style,
18148
- _ref$lazyLoad = _ref.lazyLoad,
18149
- lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad,
18150
- imgUrl = _ref.imgUrl,
18151
- onError = _ref.onError,
18152
- className = _ref.className;
18153
- return createElement("img", {
18154
- src: imgUrl,
18155
- alt: emojiName,
18156
- className: cx(styles$2.emojiImag, emojiStyles.external, emojiStyles.common, className),
18157
- loading: lazyLoad ? 'lazy' : 'eager',
18158
- onError: onError,
18159
- style: style
18160
- });
18161
- }
18162
- var styles$2 = /*#__PURE__*/stylesheet.create({
18163
- emojiImag: {
18164
- '.': 'epr-emoji-img',
18165
- maxWidth: 'var(--epr-emoji-fullsize)',
18166
- maxHeight: 'var(--epr-emoji-fullsize)',
18167
- minWidth: 'var(--epr-emoji-fullsize)',
18168
- minHeight: 'var(--epr-emoji-fullsize)',
18169
- padding: 'var(--epr-emoji-padding)'
18170
- }
18171
- });
18172
-
18173
- function NativeEmoji(_ref) {
18174
- var unified = _ref.unified,
18175
- style = _ref.style,
18176
- className = _ref.className;
18177
- return createElement("span", {
18178
- className: cx(styles$3.nativeEmoji, emojiStyles.common, emojiStyles.external, className),
18179
- "data-unified": unified,
18180
- style: style
18181
- }, parseNativeEmoji(unified));
18182
- }
18183
- var styles$3 = /*#__PURE__*/stylesheet.create({
18184
- nativeEmoji: {
18185
- '.': 'epr-emoji-native',
18186
- fontFamily: '"Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji"!important',
18187
- position: 'relative',
18188
- lineHeight: '100%',
18189
- fontSize: 'var(--epr-emoji-size)',
18190
- textAlign: 'center',
18191
- alignSelf: 'center',
18192
- justifySelf: 'center',
18193
- letterSpacing: '0',
18194
- padding: 'var(--epr-emoji-padding)'
18368
+ var filtered = {};
18369
+ for (var unified in emojis) {
18370
+ var emoji = emojis[unified];
18371
+ if (hasMatch(emoji, keyword)) {
18372
+ filtered[unified] = emoji;
18373
+ }
18195
18374
  }
18196
- });
18197
-
18198
- function ViewOnlyEmoji(_ref) {
18199
- var emoji = _ref.emoji,
18200
- unified = _ref.unified,
18201
- emojiStyle = _ref.emojiStyle,
18202
- size = _ref.size,
18203
- lazyLoad = _ref.lazyLoad,
18204
- _ref$getEmojiUrl = _ref.getEmojiUrl,
18205
- getEmojiUrl = _ref$getEmojiUrl === void 0 ? emojiUrlByUnified : _ref$getEmojiUrl,
18206
- className = _ref.className;
18207
- var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
18208
- setEmojisThatFailedToLoad = _useEmojisThatFailedT[1];
18209
- var style = {};
18210
- if (size) {
18211
- style.width = style.height = style.fontSize = size + "px";
18375
+ return filtered;
18376
+ }
18377
+ function hasMatch(emoji, keyword) {
18378
+ return emojiNames(emoji).some(function (name) {
18379
+ return name.includes(keyword);
18380
+ });
18381
+ }
18382
+ function useIsEmojiFiltered() {
18383
+ var _useFilterRef = useFilterRef(),
18384
+ filter = _useFilterRef.current;
18385
+ var _useSearchTermState3 = useSearchTermState(),
18386
+ searchTerm = _useSearchTermState3[0];
18387
+ return function (unified) {
18388
+ return isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
18389
+ };
18390
+ }
18391
+ function isEmojiFilteredBySearchTerm(unified, filter, searchTerm) {
18392
+ var _filter$searchTerm;
18393
+ if (!filter || !searchTerm) {
18394
+ return false;
18212
18395
  }
18213
- var emojiToRender = emoji ? emoji : emojiByUnified(unified);
18214
- if (!emojiToRender) {
18396
+ return !((_filter$searchTerm = filter[searchTerm]) != null && _filter$searchTerm[unified]);
18397
+ }
18398
+ function findLongestMatch(keyword, dict) {
18399
+ if (!dict) {
18215
18400
  return null;
18216
18401
  }
18217
- if (isCustomEmoji(emojiToRender)) {
18218
- return createElement(EmojiImg, {
18219
- style: style,
18220
- emojiName: unified,
18221
- emojiStyle: EmojiStyle.NATIVE,
18222
- lazyLoad: lazyLoad,
18223
- imgUrl: emojiToRender.imgUrl,
18224
- onError: onError,
18225
- className: className
18226
- });
18402
+ if (dict[keyword]) {
18403
+ return dict[keyword];
18227
18404
  }
18228
- return createElement(Fragment, null, emojiStyle === EmojiStyle.NATIVE ? createElement(NativeEmoji, {
18229
- unified: unified,
18230
- style: style,
18231
- className: className
18232
- }) : createElement(EmojiImg, {
18233
- style: style,
18234
- emojiName: emojiName(emojiToRender),
18235
- emojiStyle: emojiStyle,
18236
- lazyLoad: lazyLoad,
18237
- imgUrl: getEmojiUrl(unified, emojiStyle),
18238
- onError: onError,
18239
- className: className
18240
- }));
18241
- function onError() {
18242
- setEmojisThatFailedToLoad(function (prev) {
18243
- return new Set(prev).add(unified);
18244
- });
18405
+ var longestMatchingKey = Object.keys(dict).sort(function (a, b) {
18406
+ return b.length - a.length;
18407
+ }).find(function (key) {
18408
+ return keyword.includes(key);
18409
+ });
18410
+ if (longestMatchingKey) {
18411
+ return dict[longestMatchingKey];
18412
+ }
18413
+ return null;
18414
+ }
18415
+ function getNormalizedSearchTerm(str) {
18416
+ if (!str || typeof str !== 'string') {
18417
+ return '';
18245
18418
  }
18419
+ return str.trim().toLowerCase();
18420
+ }
18421
+ function getStatusSearchResults(filterState, searchTerm) {
18422
+ var _Object$entries;
18423
+ if (!(filterState != null && filterState[searchTerm])) return '';
18424
+ var searchResultsCount = ((_Object$entries = Object.entries(filterState == null ? void 0 : filterState[searchTerm])) == null ? void 0 : _Object$entries.length) || 0;
18425
+ // eslint-disable-next-line react-hooks/rules-of-hooks
18426
+ return useSearchResultsConfig(searchResultsCount);
18246
18427
  }
18247
18428
 
18248
- function ClickableEmoji(_ref) {
18249
- var emoji = _ref.emoji,
18250
- unified = _ref.unified,
18251
- hidden = _ref.hidden,
18252
- hiddenOnSearch = _ref.hiddenOnSearch,
18253
- emojiStyle = _ref.emojiStyle,
18254
- _ref$showVariations = _ref.showVariations,
18255
- showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
18256
- size = _ref.size,
18257
- lazyLoad = _ref.lazyLoad,
18258
- getEmojiUrl = _ref.getEmojiUrl;
18259
- var hasVariations = emojiHasVariations(emoji);
18260
- return createElement(ClickableEmojiButton, {
18261
- hasVariations: hasVariations,
18262
- showVariations: showVariations,
18263
- hidden: hidden,
18264
- hiddenOnSearch: hiddenOnSearch,
18265
- emojiNames: emojiNames(emoji),
18266
- unified: unified
18267
- }, createElement(ViewOnlyEmoji, {
18268
- unified: unified,
18269
- emoji: emoji,
18270
- size: size,
18271
- emojiStyle: emojiStyle,
18272
- lazyLoad: lazyLoad,
18273
- getEmojiUrl: getEmojiUrl
18274
- }));
18429
+ function useIsEmojiHidden() {
18430
+ var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
18431
+ emojisThatFailedToLoad = _useEmojisThatFailedT[0];
18432
+ var isEmojiFiltered = useIsEmojiFiltered();
18433
+ return function (emoji) {
18434
+ var unified = emojiUnified(emoji);
18435
+ var failedToLoad = emojisThatFailedToLoad.has(unified);
18436
+ var filteredOut = isEmojiFiltered(unified);
18437
+ return {
18438
+ failedToLoad: failedToLoad,
18439
+ filteredOut: filteredOut,
18440
+ hidden: failedToLoad || filteredOut
18441
+ };
18442
+ };
18275
18443
  }
18276
18444
 
18277
18445
  function EmojiCategory(_ref) {
@@ -18282,16 +18450,16 @@ function EmojiCategory(_ref) {
18282
18450
  var category = categoryFromCategoryConfig(categoryConfig);
18283
18451
  var categoryName = categoryNameFromCategoryConfig(categoryConfig);
18284
18452
  return createElement("li", {
18285
- className: cx(styles$4.category, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch),
18453
+ className: cx(styles$6.category, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch),
18286
18454
  "data-name": category,
18287
18455
  "aria-label": categoryName
18288
18456
  }, createElement("h2", {
18289
- className: cx(styles$4.label)
18457
+ className: cx(styles$6.label)
18290
18458
  }, categoryName), createElement("div", {
18291
- className: cx(styles$4.categoryContent)
18459
+ className: cx(styles$6.categoryContent)
18292
18460
  }, children));
18293
18461
  }
18294
- var styles$4 = /*#__PURE__*/stylesheet.create({
18462
+ var styles$6 = /*#__PURE__*/stylesheet.create({
18295
18463
  category: {
18296
18464
  '.': ClassNames.category,
18297
18465
  ':not(:has(.epr-visible))': {
@@ -18369,7 +18537,7 @@ function EmojiList() {
18369
18537
  var categories = useCategoriesConfig();
18370
18538
  var renderdCategoriesCountRef = useRef(0);
18371
18539
  return createElement("ul", {
18372
- className: cx(styles$5.emojiList)
18540
+ className: cx(styles$7.emojiList)
18373
18541
  }, categories.map(function (categoryConfig) {
18374
18542
  var category = categoryFromCategoryConfig(categoryConfig);
18375
18543
  if (category === Categories.SUGGESTED) {
@@ -18438,7 +18606,7 @@ function RenderCategory(_ref) {
18438
18606
  hidden: hiddenCounter === emojis.length
18439
18607
  }, emojis);
18440
18608
  }
18441
- var styles$5 = /*#__PURE__*/stylesheet.create({
18609
+ var styles$7 = /*#__PURE__*/stylesheet.create({
18442
18610
  emojiList: {
18443
18611
  '.': ClassNames.emojiList,
18444
18612
  listStyle: 'none',
@@ -18577,7 +18745,7 @@ function EmojiVariationPicker() {
18577
18745
  }
18578
18746
  return createElement("div", {
18579
18747
  ref: VariationPickerRef,
18580
- className: cx(styles$6.variationPicker, getMenuDirection() === Direction.Down && styles$6.pointingUp, visible && styles$6.visible),
18748
+ className: cx(styles$8.variationPicker, getMenuDirection() === Direction.Down && styles$8.pointingUp, visible && styles$8.visible),
18581
18749
  style: {
18582
18750
  top: top
18583
18751
  }
@@ -18591,7 +18759,7 @@ function EmojiVariationPicker() {
18591
18759
  getEmojiUrl: getEmojiUrl
18592
18760
  });
18593
18761
  }) : null, createElement("div", {
18594
- className: cx(styles$6.pointer),
18762
+ className: cx(styles$8.pointer),
18595
18763
  style: pointerStyle
18596
18764
  }));
18597
18765
  }
@@ -18647,7 +18815,7 @@ function useVariationPickerTop(VariationPickerRef) {
18647
18815
  return emojiOffsetTop - height;
18648
18816
  }
18649
18817
  }
18650
- var styles$6 = /*#__PURE__*/stylesheet.create({
18818
+ var styles$8 = /*#__PURE__*/stylesheet.create({
18651
18819
  variationPicker: {
18652
18820
  '.': ClassNames.variationPicker,
18653
18821
  position: 'absolute',
@@ -18670,6 +18838,12 @@ var styles$6 = /*#__PURE__*/stylesheet.create({
18670
18838
  transform: 'scale(0.9)',
18671
18839
  transition: 'transform 0.1s ease-out, opacity 0.2s ease-out'
18672
18840
  },
18841
+ visible: {
18842
+ opacity: '1',
18843
+ visibility: 'visible',
18844
+ pointerEvents: 'all',
18845
+ transform: 'scale(1)'
18846
+ },
18673
18847
  pointingUp: {
18674
18848
  '.': 'pointing-up',
18675
18849
  transformOrigin: 'center 0%',
@@ -18681,12 +18855,6 @@ var styles$6 = /*#__PURE__*/stylesheet.create({
18681
18855
  transform: 'rotate(180deg) translateY(100%) translateX(18px)'
18682
18856
  }
18683
18857
  },
18684
- visible: {
18685
- opacity: '1',
18686
- visibility: 'visible',
18687
- pointerEvents: 'all',
18688
- transform: 'scale(1)'
18689
- },
18690
18858
  pointer: {
18691
18859
  '.': 'epr-emoji-pointer',
18692
18860
  content: '',
@@ -18707,7 +18875,6 @@ var styles$6 = /*#__PURE__*/stylesheet.create({
18707
18875
  },
18708
18876
  '.epr-auto-theme': {
18709
18877
  pointer: {
18710
- // @ts-ignore
18711
18878
  '@media (prefers-color-scheme: dark)': {
18712
18879
  backgroundPosition: '-25px 0'
18713
18880
  }
@@ -18721,11 +18888,11 @@ function Body() {
18721
18888
  useMouseDownHandlers(BodyRef);
18722
18889
  useOnMouseMove();
18723
18890
  return createElement("div", {
18724
- className: cx(styles$7.body),
18891
+ className: cx(styles$9.body, commonInteractionStyles.hiddenOnReactions),
18725
18892
  ref: BodyRef
18726
18893
  }, createElement(EmojiVariationPicker, null), createElement(EmojiList, null));
18727
18894
  }
18728
- var styles$7 = /*#__PURE__*/stylesheet.create({
18895
+ var styles$9 = /*#__PURE__*/stylesheet.create({
18729
18896
  body: {
18730
18897
  '.': ClassNames.scrollBody,
18731
18898
  flex: '1',
@@ -18825,10 +18992,10 @@ function Flex(_ref) {
18825
18992
  direction = _ref$direction === void 0 ? FlexDirection.ROW : _ref$direction;
18826
18993
  return createElement("div", {
18827
18994
  style: _extends({}, style),
18828
- className: cx(styles$8.flex, className, styles$8[direction])
18995
+ className: cx(styles$a.flex, className, styles$a[direction])
18829
18996
  }, children);
18830
18997
  }
18831
- var styles$8 = /*#__PURE__*/stylesheet.create((_stylesheet$create = {
18998
+ var styles$a = /*#__PURE__*/stylesheet.create((_stylesheet$create = {
18832
18999
  flex: {
18833
19000
  display: 'flex'
18834
19001
  }
@@ -18874,6 +19041,62 @@ function Relative(_ref) {
18874
19041
  }, children);
18875
19042
  }
18876
19043
 
19044
+ // eslint-disable-next-line complexity
19045
+ function BtnSkinToneVariation(_ref) {
19046
+ var isOpen = _ref.isOpen,
19047
+ onClick = _ref.onClick,
19048
+ isActive = _ref.isActive,
19049
+ skinToneVariation = _ref.skinToneVariation,
19050
+ style = _ref.style;
19051
+ return createElement(Button, {
19052
+ style: style,
19053
+ onClick: onClick,
19054
+ className: cx("epr-tone-" + skinToneVariation, styles$b.tone, !isOpen && styles$b.closedTone, isActive && styles$b.active),
19055
+ tabIndex: isOpen ? 0 : -1,
19056
+ "aria-pressed": isActive,
19057
+ "aria-label": "Skin tone " + skinTonesNamed[skinToneVariation]
19058
+ });
19059
+ }
19060
+ var styles$b = /*#__PURE__*/stylesheet.create({
19061
+ closedTone: {
19062
+ opacity: '0',
19063
+ zIndex: '0'
19064
+ },
19065
+ active: {
19066
+ '.': 'epr-active',
19067
+ zIndex: '1',
19068
+ opacity: '1'
19069
+ },
19070
+ tone: {
19071
+ '.': 'epr-tone',
19072
+ ':hover': {
19073
+ boxShadow: '0 0 0 3px var(--epr-active-skin-hover-color)'
19074
+ },
19075
+ ':focus': {
19076
+ boxShadow: '0 0 0 3px var(--epr-focus-bg-color)'
19077
+ },
19078
+ // @ts-ignore
19079
+ '&.epr-tone-neutral': {
19080
+ backgroundColor: '#ffd225'
19081
+ },
19082
+ '&.epr-tone-1f3fb': {
19083
+ backgroundColor: '#ffdfbd'
19084
+ },
19085
+ '&.epr-tone-1f3fc': {
19086
+ backgroundColor: '#e9c197'
19087
+ },
19088
+ '&.epr-tone-1f3fd': {
19089
+ backgroundColor: '#c88e62'
19090
+ },
19091
+ '&.epr-tone-1f3fe': {
19092
+ backgroundColor: '#a86637'
19093
+ },
19094
+ '&.epr-tone-1f3ff': {
19095
+ backgroundColor: '#60463a'
19096
+ }
19097
+ }
19098
+ });
19099
+
18877
19100
  /* eslint-disable complexity */
18878
19101
  var ITEM_SIZE = 28;
18879
19102
  function SkinTonePickerMenu() {
@@ -18910,7 +19133,7 @@ function SkinTonePicker(_ref) {
18910
19133
  var expandedSize = isOpen ? fullWidth : ITEM_SIZE + 'px';
18911
19134
  var vertical = direction === SkinTonePickerDirection.VERTICAL;
18912
19135
  return createElement(Relative, {
18913
- className: cx(styles$9.skinTones, vertical && styles$9.vertical, isOpen && styles$9.open),
19136
+ className: cx(styles$c.skinTones, vertical && styles$c.vertical, isOpen && styles$c.open, vertical && isOpen && styles$c.verticalShadow),
18914
19137
  style: vertical ? {
18915
19138
  flexBasis: expandedSize,
18916
19139
  height: expandedSize
@@ -18918,14 +19141,18 @@ function SkinTonePicker(_ref) {
18918
19141
  flexBasis: expandedSize
18919
19142
  }
18920
19143
  }, createElement("div", {
18921
- className: cx(styles$9.select),
19144
+ className: cx(styles$c.select),
18922
19145
  ref: SkinTonePickerRef
18923
19146
  }, skinToneVariations.map(function (skinToneVariation, i) {
18924
19147
  var active = skinToneVariation === activeSkinTone;
18925
- return createElement(Button, {
19148
+ return createElement(BtnSkinToneVariation, {
19149
+ key: skinToneVariation,
19150
+ skinToneVariation: skinToneVariation,
19151
+ isOpen: isOpen,
18926
19152
  style: {
18927
19153
  transform: cx(vertical ? "translateY(-" + i * (isOpen ? ITEM_SIZE : 0) + "px)" : "translateX(-" + i * (isOpen ? ITEM_SIZE : 0) + "px)", isOpen && active && 'scale(1.3)')
18928
19154
  },
19155
+ isActive: active,
18929
19156
  onClick: function onClick() {
18930
19157
  if (isOpen) {
18931
19158
  setActiveSkinTone(skinToneVariation);
@@ -18934,12 +19161,7 @@ function SkinTonePicker(_ref) {
18934
19161
  setIsOpen(true);
18935
19162
  }
18936
19163
  closeAllOpenToggles();
18937
- },
18938
- key: skinToneVariation,
18939
- className: cx("epr-tone-" + skinToneVariation, styles$9.tone, !isOpen && styles$9.closedTone, active && styles$9.active),
18940
- tabIndex: isOpen ? 0 : -1,
18941
- "aria-pressed": active,
18942
- "aria-label": "Skin tone " + skinTonesNamed[skinToneVariation]
19164
+ }
18943
19165
  });
18944
19166
  })));
18945
19167
  }
@@ -18948,7 +19170,7 @@ var SkinTonePickerDirection;
18948
19170
  SkinTonePickerDirection["VERTICAL"] = "epr-vertical";
18949
19171
  SkinTonePickerDirection["HORIZONTAL"] = "epr-horizontal";
18950
19172
  })(SkinTonePickerDirection || (SkinTonePickerDirection = {}));
18951
- var styles$9 = /*#__PURE__*/stylesheet.create({
19173
+ var styles$c = /*#__PURE__*/stylesheet.create({
18952
19174
  skinTones: {
18953
19175
  '.': 'epr-skin-tones',
18954
19176
  '--': {
@@ -18961,12 +19183,15 @@ var styles$9 = /*#__PURE__*/stylesheet.create({
18961
19183
  padding: '10px 0'
18962
19184
  },
18963
19185
  vertical: {
18964
- padding: '5px',
19186
+ padding: '9px',
18965
19187
  alignItems: 'flex-end',
18966
19188
  flexDirection: 'column',
18967
19189
  borderRadius: '6px',
18968
19190
  border: '1px solid var(--epr-bg-color)'
18969
19191
  },
19192
+ verticalShadow: {
19193
+ boxShadow: '0px 0 7px var(--epr-picker-border-color)'
19194
+ },
18970
19195
  open: {
18971
19196
  // @ts-ignore
18972
19197
  backdropFilter: 'blur(5px)',
@@ -18992,51 +19217,14 @@ var styles$9 = /*#__PURE__*/stylesheet.create({
18992
19217
  '> button': {
18993
19218
  width: 'var(--epr-skin-tone-size)',
18994
19219
  display: 'block',
18995
- cursor: 'pointer',
18996
- borderRadius: '4px',
18997
- height: 'var(--epr-skin-tone-size)',
18998
- position: 'absolute',
18999
- right: '0',
19000
- transition: 'transform 0.3s ease-in-out, opacity 0.35s ease-in-out',
19001
- zIndex: '0',
19002
- boxShadow: '0 0 0 0px var(--epr-active-skin-hover-color)'
19003
- }
19004
- },
19005
- closedTone: {
19006
- opacity: '0',
19007
- zIndex: '0'
19008
- },
19009
- active: {
19010
- '.': 'epr-active',
19011
- zIndex: '1',
19012
- opacity: '1'
19013
- },
19014
- tone: {
19015
- '.': 'epr-tone',
19016
- ':hover': {
19017
- boxShadow: '0 0 0 3px var(--epr-active-skin-hover-color)'
19018
- },
19019
- ':focus': {
19020
- boxShadow: '0 0 0 3px var(--epr-focus-bg-color)'
19021
- },
19022
- // @ts-ignore
19023
- '&.epr-tone-neutral': {
19024
- backgroundColor: '#ffd225'
19025
- },
19026
- '&.epr-tone-1f3fb': {
19027
- backgroundColor: '#ffdfbd'
19028
- },
19029
- '&.epr-tone-1f3fc': {
19030
- backgroundColor: '#e9c197'
19031
- },
19032
- '&.epr-tone-1f3fd': {
19033
- backgroundColor: '#c88e62'
19034
- },
19035
- '&.epr-tone-1f3fe': {
19036
- backgroundColor: '#a86637'
19037
- },
19038
- '&.epr-tone-1f3ff': {
19039
- backgroundColor: '#60463a'
19220
+ cursor: 'pointer',
19221
+ borderRadius: '4px',
19222
+ height: 'var(--epr-skin-tone-size)',
19223
+ position: 'absolute',
19224
+ right: '0',
19225
+ transition: 'transform 0.3s ease-in-out, opacity 0.35s ease-in-out',
19226
+ zIndex: '0',
19227
+ boxShadow: '0 0 0 0px var(--epr-active-skin-hover-color)'
19040
19228
  }
19041
19229
  }
19042
19230
  });
@@ -19048,7 +19236,7 @@ function Preview() {
19048
19236
  return null;
19049
19237
  }
19050
19238
  return createElement(Flex, {
19051
- className: cx(styles$a.preview)
19239
+ className: cx(styles$d.preview, commonInteractionStyles.hiddenOnReactions)
19052
19240
  }, createElement(PreviewBody, null), createElement(Space, null), isSkinToneInPreview ? createElement(SkinTonePickerMenu, null) : null);
19053
19241
  }
19054
19242
  function PreviewBody() {
@@ -19077,22 +19265,20 @@ function PreviewBody() {
19077
19265
  emojiStyle: emojiStyle,
19078
19266
  size: 45,
19079
19267
  getEmojiUrl: getEmojiUrl,
19080
- className: cx(styles$a.emoji)
19268
+ className: cx(styles$d.emoji)
19081
19269
  }) : defaultEmoji ? createElement(ViewOnlyEmoji, {
19082
19270
  unified: emojiUnified(defaultEmoji),
19083
19271
  emoji: defaultEmoji,
19084
19272
  emojiStyle: emojiStyle,
19085
19273
  size: 45,
19086
19274
  getEmojiUrl: getEmojiUrl,
19087
- className: cx(styles$a.emoji)
19088
- }) : null), show ? createElement("div", {
19089
- className: cx(styles$a.label)
19090
- }, emojiName(emoji)) : createElement("div", {
19091
- className: cx(styles$a.label)
19092
- }, defaultText));
19275
+ className: cx(styles$d.emoji)
19276
+ }) : null), createElement("div", {
19277
+ className: cx(styles$d.label)
19278
+ }, show ? emojiName(emoji) : defaultText));
19093
19279
  }
19094
19280
  }
19095
- var styles$a = /*#__PURE__*/stylesheet.create({
19281
+ var styles$d = /*#__PURE__*/stylesheet.create({
19096
19282
  preview: {
19097
19283
  alignItems: 'center',
19098
19284
  borderTop: '1px solid var(--epr-preview-border-color)',
@@ -19187,66 +19373,38 @@ function useShouldHideCustomEmojis() {
19187
19373
 
19188
19374
  var SVGNavigation = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMDBweCIgaGVpZ2h0PSI4MHB4IiB2aWV3Qm94PSIwIDAgMjAwIDgwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAgODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iTGF5ZXJfMTEiPgoJPGc+CgkJPHBhdGggZmlsbD0iIzMzNzFCNyIgc3Ryb2tlPSIjMzM3MUI3IiBzdHJva2Utd2lkdGg9IjAuMSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTIuOCwyOS41YzAuNiwwLDEuMS0wLjUsMS4xLTEuMQoJCQljMC0wLjYtMC41LTEuMi0xLjEtMS4yYy0wLjYsMC0xLjIsMC41LTEuMiwxLjJDMTEuNiwyOSwxMi4yLDI5LjUsMTIuOCwyOS41eiBNMTIuOCwyOGMwLjIsMCwwLjQsMC4yLDAuNCwwLjQKCQkJYzAsMC4yLTAuMiwwLjQtMC40LDAuNGMtMC4yLDAtMC40LTAuMi0wLjQtMC40QzEyLjQsMjguMSwxMi42LDI4LDEyLjgsMjh6Ii8+CgkJPHBhdGggZmlsbD0iIzMzNzFCNyIgc3Ryb2tlPSIjMzM3MUI3IiBzdHJva2Utd2lkdGg9IjAuMSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTAsMjNjLTMuOCwwLTcsMy4xLTcsN2MwLDMuOCwzLjEsNyw3LDcKCQkJczctMy4xLDctN0MxNywyNi4yLDEzLjgsMjMsMTAsMjN6IE0xMCwzNi4yYy0zLjQsMC02LjItMi44LTYuMi02LjJjMC0zLjQsMi44LTYuMiw2LjItNi4yczYuMiwyLjgsNi4yLDYuMgoJCQlDMTYuMiwzMy40LDEzLjQsMzYuMiwxMCwzNi4yeiIvPgoJCTxwYXRoIGZpbGw9IiMzMzcxQjciIHN0cm9rZT0iIzMzNzFCNyIgc3Ryb2tlLXdpZHRoPSIwLjEiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTE0LjYsMzEuMmMtMC4xLTAuMS0wLjItMC4yLTAuMy0wLjJINS43CgkJCWMtMC4xLDAtMC4yLDAuMS0wLjMsMC4yYy0wLjEsMC4xLTAuMSwwLjIsMCwwLjRjMC43LDIsMi41LDMuMyw0LjYsMy4zczMuOS0xLjMsNC42LTMuM0MxNC43LDMxLjUsMTQuNywzMS4zLDE0LjYsMzEuMnogTTEwLDM0LjEKCQkJYy0xLjYsMC0zLTAuOS0zLjctMi4yaDcuM0MxMywzMy4yLDExLjYsMzQuMSwxMCwzNC4xeiIvPgoJCTxwYXRoIGZpbGw9IiMzMzcxQjciIHN0cm9rZT0iIzMzNzFCNyIgc3Ryb2tlLXdpZHRoPSIwLjEiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTcuMiwyOS41YzAuNiwwLDEuMi0wLjUsMS4yLTEuMQoJCQljMC0wLjYtMC41LTEuMi0xLjItMS4yYy0wLjYsMC0xLjEsMC41LTEuMSwxLjJDNi4xLDI5LDYuNiwyOS41LDcuMiwyOS41eiBNNy4yLDI4YzAuMiwwLDAuNCwwLjIsMC40LDAuNGMwLDAuMi0wLjIsMC40LTAuNCwwLjQKCQkJYy0wLjIsMC0wLjQtMC4yLTAuNC0wLjRDNi44LDI4LjEsNywyOCw3LjIsMjh6Ii8+Cgk8L2c+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzM3MUI3IiBkPSJNNjQuMSwzMy40bDIuMywwYzAuMiwwLDAuNCwwLjIsMC40LDAuNHYyLjFjMCwwLjItMC4yLDAuNC0wLjQsMC40aC0yLjMKCQkJCWMtMC4yLDAtMC40LTAuMi0wLjQtMC40di0yLjFDNjMuNywzMy42LDYzLjgsMzMuNCw2NC4xLDMzLjR6Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzNzFCNyIgZD0iTTczLjUsMzMuNWgyLjRjMC4yLDAsMC40LDAuMiwwLjQsMC40djJjMCwwLjItMC4yLDAuNC0wLjQsMC40aC0yLjQKCQkJCWMtMC4yLDAtMC40LTAuMi0wLjQtMC40bDAtMkM3My4xLDMzLjYsNzMuMywzMy41LDczLjUsMzMuNXoiLz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzM3MUI3IiBkPSJNNjMuNywyOC40aDEyLjZ2NUg2My43VjI4LjR6Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzNzFCNyIgZD0iTTY1LjUsMjMuNmg4LjljMSwwLDEuOSwwLjgsMS45LDEuOXYzLjFINjMuN3YtMy4xQzYzLjcsMjQuNSw2NC41LDIzLjYsNjUuNSwyMy42eiIvPgoJCQk8ZWxsaXBzZSBmaWxsPSIjMzM3MUI3IiBjeD0iNjYuMiIgY3k9IjMwLjkiIHJ4PSIwLjkiIHJ5PSIxIi8+CgkJCTxlbGxpcHNlIGZpbGw9IiMzMzcxQjciIGN4PSI3My44IiBjeT0iMzAuOSIgcng9IjAuOSIgcnk9IjEiLz4KCQk8L2c+Cgk8L2c+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzM3MUI3IiBkPSJNOTYuNCwzMGMwLDMuNi0yLjksNi41LTYuNCw2LjVzLTYuNC0yLjktNi40LTYuNXMyLjktNi41LDYuNC02LjVTOTYuNCwyNi40LDk2LjQsMzB6Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzNzFCNyIgZD0iTTk2LjMsMjguNmMwLDAsMCwwLjEsMCwwLjFjLTAuOSwwLjEtMi45LDAuMS00LjYtMS4xYy0xLjEtMC44LTItMS43LTIuNi0yLjUKCQkJCWMtMC4zLTAuNC0wLjYtMC44LTAuNy0xYy0wLjEtMC4xLTAuMS0wLjEtMC4xLTAuMmMwLjUtMC4xLDEuMi0wLjIsMi0wLjFjMS4yLDAsMi41LDAuMywzLjUsMS4xYzEsMC44LDEuNywxLjgsMi4xLDIuOAoJCQkJQzk2LjEsMjcuOSw5Ni4yLDI4LjMsOTYuMywyOC42eiIvPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMzMzcxQjciIGQ9Ik04NCwzMi4yYzAsMCwwLTAuMSwwLTAuMWMwLjktMC4yLDIuOS0wLjQsNC43LDAuNmMxLjEsMC43LDEuOSwxLjUsMi40LDIuMwoJCQkJYzAuNCwwLjUsMC42LDEsMC43LDEuM2MtMC40LDAuMS0xLDAuMi0xLjcsMC4zYy0xLDAtMi4xLTAuMS0zLjItMC44cy0xLjktMS42LTIuNC0yLjVDODQuMiwzMi44LDg0LjEsMzIuNSw4NCwzMi4yeiIvPgoJCTwvZz4KCTwvZz4KCTxnPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMzMzcxQjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTExNi4zLDI2LjhsLTEuNCwybC0wLjgtMC44bC0wLjYtMC42bDAsMC45bC0wLjEsOC4yaC02LjgKCQkJCWwtMC4xLTguMmwwLTAuOWwtMC42LDAuNmwtMC44LDAuOGwtMS40LTJsMi42LTIuOWMwLjEtMC4xLDAuMi0wLjEsMC4zLTAuMWgxLjNsMC40LDAuN2MwLjcsMS4zLDIuNiwxLjMsMy4zLTAuMWwwLjMtMC42aDEuMgoJCQkJYzAuMSwwLDAuMiwwLDAuMywwLjFsMC4zLTAuM2wtMC4zLDAuM0wxMTYuMywyNi44eiIvPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMzMzcxQjciIGQ9Ik0xMTAuMSwyNy43aDJ2MC45YzAsMC40LTAuNCwwLjctMSwwLjdjLTAuNiwwLTEtMC4zLTEtMC43TDExMC4xLDI3LjdMMTEwLjEsMjcuN3oiLz4KCQk8L2c+Cgk8L2c+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzM3MUI3IiBkPSJNMTI2LjgsMzQuM2MwLDEuMi0xLDIuMi0yLjIsMi4ycy0yLjItMS0yLjItMi4yczEtMi4yLDIuMi0yLjJTMTI2LjgsMzMuMSwxMjYuOCwzNC4zeiIvPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMzMzcxQjciIGQ9Ik0xMzcuNiwzNC4zYzAsMS4yLTEsMi4yLTIuMiwyLjJjLTEuMiwwLTIuMi0xLTIuMi0yLjJzMS0yLjIsMi4yLTIuMgoJCQkJQzEzNi42LDMyLjEsMTM3LjYsMzMuMSwxMzcuNiwzNC4zeiIvPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMzMzcxQjciIGQ9Ik0xMjYuOCwyNC40djkuOSIvPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMzMzcxQjciIGQ9Ik0xMzcuNywyNC40djkuOSIvPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMzMzcxQjciIGQ9Ik0xMjYuOCwyMy41aDEwLjh2Mi43aC0xMC44QzEyNi44LDI2LjIsMTI2LjgsMjMuNSwxMjYuOCwyMy41eiIvPgoJCTwvZz4KCTwvZz4KCTxnPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSIjMzM3MUI3IiBkPSJNMTcwLjgsMjMuMUwxNzAuOCwyMy4xYy0wLjMsMC0wLjUsMC0wLjgsMGMtMi4xLDAtNCwxLTUuMywyLjVsLTAuMSwwbC0wLjEtMC4xbC0xLTEuMmwtMC4zLDMuNGwzLjQsMC4zCgkJCQlsLTEuMS0xLjNsLTAuMS0wLjFsMC4xLTAuMWMxLjEtMS41LDMtMi4zLDUtMi4xbDAsMGMzLjIsMC4zLDUuNSwzLjEsNS4yLDYuM2MtMC4zLDMtMy4xLDUuMy02LjEsNS4xYy0zLjEtMC4yLTUuNC0yLjktNS4zLTYKCQkJCWwtMS4zLTAuMWMtMC4yLDMuOCwyLjYsNy4xLDYuMyw3LjRjMy45LDAuMyw3LjMtMi42LDcuNi02LjVDMTc3LjIsMjYuOCwxNzQuNCwyMy41LDE3MC44LDIzLjF6Ii8+CgkJCTxwYXRoIGZpbGw9IiMzMzcxQjciIGQ9Ik0xNzAuMywyNy40YzAtMC4zLTAuMy0wLjYtMC42LTAuNnMtMC42LDAuMy0wLjYsMC42djMuMmMwLDAuMiwwLjEsMC4zLDAuMiwwLjRjMC4xLDAuMSwwLjMsMC4yLDAuNCwwLjIKCQkJCWgyLjRjMC40LDAsMC42LTAuMywwLjYtMC42YzAtMC40LTAuMy0wLjYtMC42LTAuNmgtMS42aC0wLjJ2LTAuMkwxNzAuMywyNy40TDE3MC4zLDI3LjR6Ii8+CgkJPC9nPgoJPC9nPgoJPGc+CgkJPGc+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzNzFCNyIgZD0iTTE4Ni4yLDIzLjRoNy43YzEuNSwwLDIuNywxLjIsMi43LDIuN3Y3LjdjMCwxLjUtMS4yLDIuNy0yLjcsMi43aC03LjcKCQkJCWMtMS41LDAtMi43LTEuMi0yLjctMi43di03LjdDMTgzLjQsMjQuNiwxODQuNywyMy40LDE4Ni4yLDIzLjR6Ii8+CgkJCTxlbGxpcHNlIGZpbGw9IiMzMzcxQjciIGN4PSIxODYiIGN5PSIyOC45IiByeD0iMC43IiByeT0iMC43Ii8+CgkJCTxlbGxpcHNlIGZpbGw9IiMzMzcxQjciIGN4PSIxOTQiIGN5PSIyNi43IiByeD0iMC43IiByeT0iMC43Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzNzFCNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNMTg2LDMzLjNsMC40LTAuM2MwLjQtMC4zLDEtMC4zLDEuNS0wLjFsMSwwLjQKCQkJCWMwLjUsMC4yLDEsMC4yLDEuNS0wLjFsMC44LTAuNWMwLjQtMC4zLDEtMC4zLDEuNS0wLjFsMS44LDAuOCIvPgoJCTwvZz4KCTwvZz4KCTxwYXRoIGZpbGw9IiMzMzcxQjciIHN0cm9rZT0iIzMzNzFCNyIgc3Ryb2tlLXdpZHRoPSIwLjI1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0xNTYsMjQuM2MtMC4yLTAuMS0wLjQtMC4xLTAuNSwwCgkJYzAsMC0wLjIsMC4xLTAuOSwwLjJjLTAuNywwLTIuNC0wLjEtMy44LTAuNmMtMC44LTAuMy0xLjctMC41LTIuNS0wLjVjLTAuMiwwLTAuNCwwLTAuNSwwYy0xLjMsMC0yLjUsMC4zLTMuNiwxCgkJYy0wLjIsMC4xLTAuMiwwLjItMC4yLDAuNHYxMS42YzAsMC4zLDAuMSwwLjUsMC4zLDAuNWMwLjYsMCwwLjUtMC40LDAuNS0wLjZ2LTUuN2MwLjctMC4zLDMuMi0xLjEsNS44LTAuMQoJCWMxLjYsMC42LDMuNSwwLjcsNC4zLDAuN2MwLjgsMCwxLjMtMC4zLDEuMy0wLjNjMC4yLTAuMSwwLjMtMC4yLDAuMy0wLjR2LTUuN0MxNTYuMiwyNC42LDE1Ni4xLDI0LjQsMTU2LDI0LjN6IE0xNTUuNiwzMC4yCgkJYy0wLjEsMC0wLjcsMC4xLTEsMC4xYy0wLjcsMC0yLjQtMC4xLTMuOC0wLjZjLTIuNS0xLTUtMC41LTYuMi0wLjF2LTQuOWMwLjktMC41LDIuMi0wLjcsMy4yLTAuN2MwLjEsMCwwLjMsMCwwLjQsMAoJCWMwLjcsMCwxLjUsMC4yLDIuMiwwLjRjMS42LDAuNiwzLjUsMC43LDQuMywwLjdjMC4yLDAsMC44LDAsMS0wLjFWMzAuMnoiLz4KCTxnPgoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzNzFCNyIgZD0iTTQ4LjEsMjMuNWgzLjdjMi41LDAsNC41LDIsNC41LDQuNWMwLDAuNS0wLjQsMC45LTAuOSwwLjlINDQuNWMtMC41LDAtMC45LTAuNC0wLjktMC45CgkJCUM0My42LDI1LjUsNDUuNiwyMy41LDQ4LjEsMjMuNXoiLz4KCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMzMzcxQjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTQzLjUsMjguOGMtMC4yLDAuMS0wLjUsMS4yLDAsMS41YzEuNCwxLDguNSwwLjgsMTEuMywwLjYKCQkJYzAuOC0wLjEsMS42LTAuNCwxLjctMS4yYzAtMC4zLTAuMS0wLjYtMC42LTAuOSIvPgoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzNzFCNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNNDMuNSwzMC42TDQzLjMsMzFjLTAuMiwwLjUsMC4yLDEsMC43LDAuOWMwLjMtMC4xLDAuNSwwLDAuNywwLjMKCQkJbDAuMSwwLjJjMC4zLDAuNSwxLDAuNiwxLjUsMC4ybDAsMGMwLjMtMC4yLDAuNy0wLjMsMS0wLjJsMC44LDAuM2MwLjQsMC4yLDAuOCwwLjEsMS4yLDBsMC41LTAuMmMwLjQtMC4yLDAuOS0wLjIsMS4zLDBsMC41LDAuMgoJCQljMC40LDAuMiwwLjgsMC4yLDEuMiwwbDAuMi0wLjFjMC4zLTAuMiwwLjgtMC4yLDEuMSwwLjFsMC4yLDAuMmMwLjMsMC4zLDAuOCwwLjIsMS0wLjJsMC4xLTAuMmMwLjEtMC4yLDAtMC4zLDAuMi0wLjMKCQkJYzAuNSwwLDEuMi0wLjMsMS4xLTAuN2wtMC40LTEuMSIvPgoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzNzFCNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNNDMuNSwzMi4yYy0wLjEsMC4yLTAuMywwLjgsMCwxLjFjMC4zLDAuNCwzLDEuMSw2LjQsMS4xCgkJCWMyLjIsMCw0LjYtMC4zLDYtMC42YzAuNS0wLjEsMC45LTAuNSwwLjgtMC45YzAtMC4yLTAuMi0wLjUtMC40LTAuNyIvPgoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzNzFCNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNNDMuNSwzMy4zYzAsMC41LDAuNiwyLjMsMS4zLDIuN2MxLjgsMC44LDUuNywwLjcsOC4xLDAuNQoJCQljMS4zLTAuMSwyLjUtMC43LDMuMi0xLjhjMC4zLTAuNSwwLjUtMSwwLjUtMS40Ii8+CgkJPGVsbGlwc2UgZmlsbD0iIzMzNzFCNyIgY3g9IjUxLjYiIGN5PSIyNi41IiByeD0iMC4zIiByeT0iMC40Ii8+CgkJPGVsbGlwc2UgZmlsbD0iIzMzNzFCNyIgY3g9IjUzIiBjeT0iMjUiIHJ4PSIwLjMiIHJ5PSIwLjQiLz4KCQk8ZWxsaXBzZSBmaWxsPSIjMzM3MUI3IiBjeD0iNTMiIGN5PSIyNy4yIiByeD0iMC4zIiByeT0iMC40Ii8+CgkJPGVsbGlwc2UgZmlsbD0iIzMzNzFCNyIgY3g9IjU0LjMiIGN5PSIyNi41IiByeD0iMC4zIiByeT0iMC40Ii8+CgkJPGVsbGlwc2UgZmlsbD0iIzMzNzFCNyIgY3g9IjUwLjkiIGN5PSIyNSIgcng9IjAuMyIgcnk9IjAuNCIvPgoJPC9nPgoJPGc+CgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzM3MUI3IiBkPSJNMjQuMiwzMXYtNy42YzAuMSwwLjEsMC44LDAuOSwyLjgsMy4xYzIuNS0xLjYsNS42LTAuNyw2LjksMGwyLjQtMy4xdjcuMQoJCQljMCwxLjItMC4xLDIuNS0wLjksMy40Yy0xLDEuMi0yLjcsMi41LTUuMywyLjVjLTIuOSwwLTQuNS0xLjUtNS4zLTIuOUMyNC4yLDMyLjksMjQuMiwzMiwyNC4yLDMxeiIvPgoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzNzFCNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNMjEuMiwzMGw1LjQsMS4yIi8+CgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzM3MUI3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0yMS4yLDM0LjFsNS40LTEuMiIvPgoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzNzFCNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNMzguOCwzMGwtNS40LDEuMiIvPgoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzNzFCNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNMzguOCwzNC4xbC01LjQtMS4yIi8+CgkJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMzMzcxQjciIGQ9Ik0yOS41LDMyLjRMMjksMzEuN2MtMC4yLTAuMywwLTAuNiwwLjMtMC42aDEuNAoJCQljMC4zLDAsMC41LDAuNCwwLjMsMC42bC0wLjcsMWwwLDBjLTAuNywxLjItMi42LDEuMS0zLjEtMC4zbC0wLjEtMC4yYy0wLjEtMC4yLDAtMC40LDAuMi0wLjVzMC40LDAsMC41LDAuMmwwLjEsMC4yCgkJCUMyOC4zLDMyLjgsMjkuMSwzMi45LDI5LjUsMzIuNHoiLz4KCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMzMzcxQjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTMyLjQsMzIuMWwtMC4xLDAuMmMtMC40LDEtMS44LDEuMS0yLjMsMC4yIi8+CgkJPGVsbGlwc2UgZmlsbD0iIzMzNzFCNyIgY3g9IjI3LjYiIGN5PSIyOS43IiByeD0iMC43IiByeT0iMC43Ii8+CgkJPGVsbGlwc2UgZmlsbD0iIzMzNzFCNyIgY3g9IjMyLjQiIGN5PSIyOS43IiByeD0iMC43IiByeT0iMC43Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjQzBDMEJGIiBzdHJva2U9IiNDMEMwQkYiIHN0cm9rZS13aWR0aD0iMC4xIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0xMi44LDQ5LjVjMC42LDAsMS4xLTAuNSwxLjEtMS4xCgkJCWMwLTAuNi0wLjUtMS4yLTEuMS0xLjJjLTAuNiwwLTEuMiwwLjUtMS4yLDEuMkMxMS42LDQ5LDEyLjIsNDkuNSwxMi44LDQ5LjV6IE0xMi44LDQ4YzAuMiwwLDAuNCwwLjIsMC40LDAuNAoJCQljMCwwLjItMC4yLDAuNC0wLjQsMC40Yy0wLjIsMC0wLjQtMC4yLTAuNC0wLjRDMTIuNCw0OC4xLDEyLjYsNDgsMTIuOCw0OHoiLz4KCQk8cGF0aCBmaWxsPSIjQzBDMEJGIiBzdHJva2U9IiNDMEMwQkYiIHN0cm9rZS13aWR0aD0iMC4xIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0xNC42LDUxLjJjLTAuMS0wLjEtMC4yLTAuMi0wLjMtMC4ySDUuNwoJCQljLTAuMSwwLTAuMiwwLjEtMC4zLDAuMmMtMC4xLDAuMS0wLjEsMC4yLDAsMC40YzAuNywyLDIuNSwzLjMsNC42LDMuM3MzLjktMS4zLDQuNi0zLjNDMTQuNyw1MS41LDE0LjcsNTEuMywxNC42LDUxLjJ6IE0xMCw1NC4xCgkJCWMtMS42LDAtMy0wLjktMy43LTIuMmg3LjNDMTMsNTMuMiwxMS42LDU0LjEsMTAsNTQuMXoiLz4KCQk8cGF0aCBmaWxsPSIjQzBDMEJGIiBzdHJva2U9IiNDMEMwQkYiIHN0cm9rZS13aWR0aD0iMC4xIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik03LjIsNDkuNWMwLjYsMCwxLjItMC41LDEuMi0xLjEKCQkJYzAtMC42LTAuNS0xLjItMS4yLTEuMmMtMC42LDAtMS4xLDAuNS0xLjEsMS4yQzYuMSw0OSw2LjYsNDkuNSw3LjIsNDkuNXogTTcuMiw0OGMwLjIsMCwwLjQsMC4yLDAuNCwwLjRjMCwwLjItMC4yLDAuNC0wLjQsMC40CgkJCWMtMC4yLDAtMC40LTAuMi0wLjQtMC40QzYuOCw0OC4xLDcsNDgsNy4yLDQ4eiIvPgoJCTxwYXRoIGZpbGw9IiNDMEMwQkYiIHN0cm9rZT0iI0MwQzBCRiIgc3Ryb2tlLXdpZHRoPSIwLjEiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTEwLDQzYy0zLjgsMC03LDMuMS03LDdjMCwzLjgsMy4xLDcsNyw3CgkJCXM3LTMuMSw3LTdDMTcsNDYuMiwxMy44LDQzLDEwLDQzeiBNMTAsNTYuMmMtMy40LDAtNi4yLTIuOC02LjItNi4yYzAtMy40LDIuOC02LjIsNi4yLTYuMnM2LjIsMi44LDYuMiw2LjIKCQkJQzE2LjIsNTMuNCwxMy40LDU2LjIsMTAsNTYuMnoiLz4KCTwvZz4KCTxnPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNDMEMwQkYiIGQ9Ik02NC4xLDUzLjRsMi4zLDBjMC4yLDAsMC40LDAuMiwwLjQsMC40djIuMWMwLDAuMi0wLjIsMC40LTAuNCwwLjRoLTIuMwoJCQkJYy0wLjIsMC0wLjQtMC4yLTAuNC0wLjR2LTIuMUM2My43LDUzLjYsNjMuOCw1My40LDY0LjEsNTMuNHoiLz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzBDMEJGIiBkPSJNNzMuNSw1My41aDIuNGMwLjIsMCwwLjQsMC4yLDAuNCwwLjR2MmMwLDAuMi0wLjIsMC40LTAuNCwwLjRoLTIuNAoJCQkJYy0wLjIsMC0wLjQtMC4yLTAuNC0wLjRsMC0yQzczLjEsNTMuNiw3My4zLDUzLjUsNzMuNSw1My41eiIvPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNDMEMwQkYiIGQ9Ik02My43LDQ4LjRoMTIuNnY1SDYzLjdWNDguNHoiLz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzBDMEJGIiBkPSJNNjUuNSw0My42aDguOWMxLDAsMS45LDAuOCwxLjksMS45djMuMUg2My43di0zLjFDNjMuNyw0NC41LDY0LjUsNDMuNiw2NS41LDQzLjZ6Ii8+CgkJCTxlbGxpcHNlIGZpbGw9IiNDMEMwQkYiIGN4PSI2Ni4yIiBjeT0iNTAuOSIgcng9IjAuOSIgcnk9IjEiLz4KCQkJPGVsbGlwc2UgZmlsbD0iI0MwQzBCRiIgY3g9IjczLjgiIGN5PSI1MC45IiByeD0iMC45IiByeT0iMSIvPgoJCTwvZz4KCTwvZz4KCTxnPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNDMEMwQkYiIGQ9Ik05Ni40LDUwYzAsMy42LTIuOSw2LjUtNi40LDYuNXMtNi40LTIuOS02LjQtNi41czIuOS02LjUsNi40LTYuNVM5Ni40LDQ2LjQsOTYuNCw1MHoiLz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzBDMEJGIiBkPSJNOTYuMyw0OC42YzAsMCwwLDAuMSwwLDAuMWMtMC45LDAuMS0yLjksMC4xLTQuNi0xLjJjLTEuMS0wLjgtMi0xLjctMi42LTIuNQoJCQkJYy0wLjMtMC40LTAuNi0wLjgtMC43LTFjLTAuMS0wLjEtMC4xLTAuMi0wLjEtMC4yYzAuNS0wLjEsMS4yLTAuMiwyLTAuMmMxLjIsMCwyLjUsMC4zLDMuNSwxLjFjMSwwLjgsMS43LDEuOCwyLjEsMi44CgkJCQlDOTYuMSw0Ny45LDk2LjIsNDguMyw5Ni4zLDQ4LjZ6Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0MwQzBCRiIgZD0iTTg0LDUyLjJjMCwwLDAtMC4xLDAtMC4xYzAuOS0wLjIsMi45LTAuNCw0LjcsMC42YzEuMSwwLjcsMS45LDEuNSwyLjQsMi4zCgkJCQljMC40LDAuNSwwLjYsMSwwLjcsMS4zYy0wLjQsMC4xLTEsMC4yLTEuNywwLjNjLTEsMC0yLjEtMC4xLTMuMi0wLjhzLTEuOS0xLjYtMi40LTIuNUM4NC4yLDUyLjgsODQuMSw1Mi41LDg0LDUyLjJ6Ii8+CgkJPC9nPgoJPC9nPgoJPGc+CgkJPGc+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0MwQzBCRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNMTE2LjMsNDYuOGwtMS40LDJsLTAuOC0wLjhsLTAuNi0wLjdsMCwwLjlsLTAuMSw4LjJoLTYuOAoJCQkJbC0wLjEtOC4ybDAtMC45bC0wLjYsMC43bC0wLjgsMC44bC0xLjQtMmwyLjYtMi45YzAuMS0wLjEsMC4yLTAuMSwwLjMtMC4xaDEuM2wwLjQsMC43YzAuNywxLjMsMi42LDEuMywzLjMtMC4xbDAuMy0wLjZoMS4yCgkJCQljMC4xLDAsMC4yLDAsMC4zLDAuMWwwLjMtMC4zbC0wLjMsMC4zTDExNi4zLDQ2Ljh6Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0MwQzBCRiIgZD0iTTExMC4xLDQ3LjdoMnYwLjljMCwwLjQtMC40LDAuNy0xLDAuN2MtMC42LDAtMS0wLjMtMS0wLjdMMTEwLjEsNDcuN0wxMTAuMSw0Ny43eiIvPgoJCTwvZz4KCTwvZz4KCTxnPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNDMEMwQkYiIGQ9Ik0xMjYuOCw1NC4zYzAsMS4yLTEsMi4yLTIuMiwyLjJzLTIuMi0xLTIuMi0yLjJzMS0yLjIsMi4yLTIuMlMxMjYuOCw1My4xLDEyNi44LDU0LjN6Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0MwQzBCRiIgZD0iTTEzNy42LDU0LjNjMCwxLjItMSwyLjItMi4yLDIuMmMtMS4yLDAtMi4yLTEtMi4yLTIuMnMxLTIuMiwyLjItMi4yCgkJCQlDMTM2LjYsNTIuMSwxMzcuNiw1My4xLDEzNy42LDU0LjN6Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0MwQzBCRiIgZD0iTTEyNi44LDQ0LjR2OS45Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0MwQzBCRiIgZD0iTTEzNy43LDQ0LjR2OS45Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0MwQzBCRiIgZD0iTTEyNi44LDQzLjVoMTAuOHYyLjdoLTEwLjhDMTI2LjgsNDYuMiwxMjYuOCw0My41LDEyNi44LDQzLjV6Ii8+CgkJPC9nPgoJPC9nPgoJPGc+CgkJPGc+CgkJCTxwYXRoIGZpbGw9IiNDMEMwQkYiIGQ9Ik0xNzAuOCw0My4xTDE3MC44LDQzLjFjLTAuMywwLTAuNSwwLTAuOCwwYy0yLjEsMC00LDEtNS4zLDIuNWwtMC4xLDBsLTAuMS0wLjFsLTEtMS4ybC0wLjMsMy40bDMuNCwwLjMKCQkJCWwtMS4xLTEuM2wtMC4xLTAuMWwwLjEtMC4xYzEuMS0xLjUsMy0yLjMsNS0yLjFsMCwwYzMuMiwwLjMsNS41LDMuMSw1LjIsNi4zYy0wLjMsMy0zLjEsNS4zLTYuMSw1LjFjLTMuMS0wLjItNS40LTIuOS01LjMtNgoJCQkJbC0xLjMtMC4xYy0wLjIsMy44LDIuNiw3LjEsNi4zLDcuNGMzLjksMC4zLDcuMy0yLjYsNy42LTYuNUMxNzcuMiw0Ni44LDE3NC40LDQzLjUsMTcwLjgsNDMuMXoiLz4KCQkJPHBhdGggZmlsbD0iI0MwQzBCRiIgZD0iTTE3MC4zLDQ3LjRjMC0wLjMtMC4zLTAuNi0wLjYtMC42cy0wLjYsMC4zLTAuNiwwLjZ2My4yYzAsMC4yLDAuMSwwLjMsMC4yLDAuNGMwLjEsMC4xLDAuMywwLjIsMC40LDAuMgoJCQkJaDIuNGMwLjQsMCwwLjYtMC4zLDAuNi0wLjZjMC0wLjMtMC4zLTAuNi0wLjYtMC42aC0xLjZoLTAuMnYtMC4yTDE3MC4zLDQ3LjRMMTcwLjMsNDcuNHoiLz4KCQk8L2c+Cgk8L2c+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzBDMEJGIiBkPSJNMTg2LjIsNDMuNGg3LjdjMS41LDAsMi43LDEuMiwyLjcsMi43djcuN2MwLDEuNS0xLjIsMi43LTIuNywyLjdoLTcuNwoJCQkJYy0xLjUsMC0yLjctMS4yLTIuNy0yLjd2LTcuN0MxODMuNCw0NC43LDE4NC43LDQzLjQsMTg2LjIsNDMuNHoiLz4KCQkJPGVsbGlwc2UgZmlsbD0iI0MwQzBCRiIgY3g9IjE4NiIgY3k9IjQ4LjkiIHJ4PSIwLjciIHJ5PSIwLjciLz4KCQkJPGVsbGlwc2UgZmlsbD0iI0MwQzBCRiIgY3g9IjE5NCIgY3k9IjQ2LjciIHJ4PSIwLjciIHJ5PSIwLjciLz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzBDMEJGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0xODYsNTMuM2wwLjQtMC4zYzAuNC0wLjMsMS0wLjMsMS41LTAuMWwxLDAuNAoJCQkJYzAuNSwwLjIsMSwwLjIsMS41LTAuMWwwLjgtMC41YzAuNC0wLjMsMS0wLjMsMS41LTAuMWwxLjgsMC44Ii8+CgkJPC9nPgoJPC9nPgoJPHBhdGggZmlsbD0iI0MwQzBCRiIgc3Ryb2tlPSIjQzBDMEJGIiBzdHJva2Utd2lkdGg9IjAuMjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTE1Niw0NC4zYy0wLjItMC4xLTAuNC0wLjEtMC41LDAKCQljMCwwLTAuMiwwLjEtMC45LDAuMmMtMC43LDAtMi40LTAuMS0zLjgtMC42Yy0wLjgtMC4zLTEuNy0wLjUtMi41LTAuNWMtMC4yLDAtMC40LDAtMC41LDBjLTEuMywwLTIuNSwwLjMtMy42LDEKCQljLTAuMiwwLjEtMC4yLDAuMi0wLjIsMC40djExLjZjMCwwLjMsMC4xLDAuNSwwLjMsMC41YzAuNiwwLDAuNS0wLjQsMC41LTAuNnYtNS43YzAuNy0wLjMsMy4yLTEuMSw1LjgtMC4xCgkJYzEuNiwwLjYsMy41LDAuNyw0LjMsMC43YzAuOCwwLDEuMy0wLjMsMS4zLTAuM2MwLjItMC4xLDAuMy0wLjIsMC4zLTAuNHYtNS43QzE1Ni4yLDQ0LjYsMTU2LjEsNDQuNCwxNTYsNDQuM3ogTTE1NS42LDUwLjIKCQljLTAuMSwwLTAuNywwLjEtMSwwLjFjLTAuNywwLTIuNC0wLjEtMy44LTAuNmMtMi41LTEtNS0wLjUtNi4yLTAuMXYtNC45YzAuOS0wLjUsMi4yLTAuNywzLjItMC43YzAuMSwwLDAuMywwLDAuNCwwCgkJYzAuNywwLDEuNSwwLjIsMi4yLDAuNGMxLjYsMC42LDMuNSwwLjcsNC4zLDAuN2MwLjIsMCwwLjgsMCwxLTAuMVY1MC4yeiIvPgoJPGc+CgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzBDMEJGIiBkPSJNNDguMSw0My41aDMuN2MyLjUsMCw0LjUsMiw0LjUsNC41YzAsMC41LTAuNCwwLjktMC45LDAuOUg0NC41Yy0wLjUsMC0wLjktMC40LTAuOS0wLjkKCQkJQzQzLjYsNDUuNSw0NS42LDQzLjUsNDguMSw0My41eiIvPgoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0MwQzBCRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNNDMuNSw0OC44Yy0wLjIsMC4xLTAuNSwxLjIsMCwxLjVjMS40LDEsOC41LDAuOCwxMS4zLDAuNgoJCQljMC44LTAuMSwxLjYtMC40LDEuNy0xLjJjMC0wLjMtMC4xLTAuNi0wLjYtMC45Ii8+CgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzBDMEJGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik00My41LDUwLjZMNDMuMyw1MWMtMC4yLDAuNSwwLjIsMSwwLjcsMC45YzAuMy0wLjEsMC41LDAsMC43LDAuMwoJCQlsMC4xLDAuMmMwLjMsMC41LDEsMC42LDEuNSwwLjJsMCwwYzAuMy0wLjIsMC43LTAuMywxLTAuMmwwLjgsMC4zYzAuNCwwLjIsMC44LDAuMSwxLjIsMGwwLjUtMC4yYzAuNC0wLjIsMC45LTAuMiwxLjMsMGwwLjUsMC4yCgkJCWMwLjQsMC4yLDAuOCwwLjIsMS4yLDBsMC4yLTAuMWMwLjMtMC4yLDAuOC0wLjIsMS4xLDAuMWwwLjIsMC4yYzAuMywwLjMsMC44LDAuMiwxLTAuMmwwLjEtMC4yYzAuMS0wLjIsMC0wLjMsMC4yLTAuMwoJCQljMC41LDAsMS4yLTAuMywxLjEtMC43bC0wLjQtMS4xIi8+CgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzBDMEJGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik00My41LDUyLjJjLTAuMSwwLjItMC4zLDAuOCwwLDEuMWMwLjMsMC40LDMsMS4xLDYuNCwxLjEKCQkJYzIuMiwwLDQuNi0wLjMsNi0wLjZjMC41LTAuMSwwLjktMC41LDAuOC0wLjljMC0wLjItMC4yLTAuNS0wLjQtMC43Ii8+CgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzBDMEJGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik00My41LDUzLjNjMCwwLjUsMC42LDIuMywxLjMsMi43YzEuOCwwLjgsNS43LDAuNyw4LjEsMC41CgkJCWMxLjMtMC4xLDIuNS0wLjcsMy4yLTEuOGMwLjMtMC41LDAuNS0xLDAuNS0xLjQiLz4KCQk8ZWxsaXBzZSBmaWxsPSIjQzBDMEJGIiBjeD0iNTEuNiIgY3k9IjQ2LjUiIHJ4PSIwLjMiIHJ5PSIwLjQiLz4KCQk8ZWxsaXBzZSBmaWxsPSIjQzBDMEJGIiBjeD0iNTMiIGN5PSI0NSIgcng9IjAuMyIgcnk9IjAuNCIvPgoJCTxlbGxpcHNlIGZpbGw9IiNDMEMwQkYiIGN4PSI1MyIgY3k9IjQ3LjIiIHJ4PSIwLjMiIHJ5PSIwLjQiLz4KCQk8ZWxsaXBzZSBmaWxsPSIjQzBDMEJGIiBjeD0iNTQuMyIgY3k9IjQ2LjUiIHJ4PSIwLjMiIHJ5PSIwLjQiLz4KCQk8ZWxsaXBzZSBmaWxsPSIjQzBDMEJGIiBjeD0iNTAuOSIgY3k9IjQ1IiByeD0iMC4zIiByeT0iMC40Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNDMEMwQkYiIGQ9Ik0yNC4yLDUxdi03LjZjMC4xLDAuMSwwLjgsMC45LDIuOCwzLjFjMi41LTEuNyw1LjYtMC43LDYuOSwwbDIuNC0zLjF2Ny4xCgkJCWMwLDEuMi0wLjEsMi41LTAuOSwzLjRjLTEsMS4yLTIuNywyLjUtNS4zLDIuNWMtMi45LDAtNC41LTEuNS01LjMtMi45QzI0LjIsNTIuOSwyNC4yLDUyLDI0LjIsNTF6Ii8+CgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzBDMEJGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0yMS4yLDUwbDUuNCwxLjIiLz4KCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNDMEMwQkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTIxLjIsNTQuMWw1LjQtMS4yIi8+CgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzBDMEJGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0zOC44LDUwbC01LjQsMS4yIi8+CgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzBDMEJGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0zOC44LDU0LjFsLTUuNC0xLjIiLz4KCQk8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0MwQzBCRiIgZD0iTTI5LjUsNTIuNEwyOSw1MS43Yy0wLjItMC4zLDAtMC42LDAuMy0wLjZoMS40CgkJCWMwLjMsMCwwLjUsMC40LDAuMywwLjZsLTAuNywxbDAsMGMtMC43LDEuMi0yLjYsMS4xLTMuMS0wLjNsLTAuMS0wLjJjLTAuMS0wLjIsMC0wLjQsMC4yLTAuNXMwLjQsMCwwLjUsMC4ybDAuMSwwLjIKCQkJQzI4LjMsNTIuOCwyOS4xLDUyLjksMjkuNSw1Mi40eiIvPgoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0MwQzBCRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNMzIuNCw1Mi4xbC0wLjEsMC4yYy0wLjQsMS0xLjgsMS4xLTIuMywwLjIiLz4KCQk8ZWxsaXBzZSBmaWxsPSIjQzBDMEJGIiBjeD0iMjcuNiIgY3k9IjQ5LjciIHJ4PSIwLjciIHJ5PSIwLjciLz4KCQk8ZWxsaXBzZSBmaWxsPSIjQzBDMEJGIiBjeD0iMzIuNCIgY3k9IjQ5LjciIHJ4PSIwLjciIHJ5PSIwLjciLz4KCTwvZz4KCTxnPgoJCTxwYXRoIGZpbGw9IiM2QUE5REQiIHN0cm9rZT0iIzZBQTlERCIgc3Ryb2tlLXdpZHRoPSIwLjEiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTE0LjYsNzEuMmMtMC4xLTAuMS0wLjItMC4yLTAuMy0wLjJINS43CgkJCWMtMC4xLDAtMC4yLDAuMS0wLjMsMC4yYy0wLjEsMC4xLTAuMSwwLjIsMCwwLjRjMC43LDIsMi41LDMuMyw0LjYsMy4zczMuOS0xLjMsNC42LTMuM0MxNC43LDcxLjUsMTQuNyw3MS4zLDE0LjYsNzEuMnogTTEwLDc0LjEKCQkJYy0xLjYsMC0zLTAuOS0zLjctMi4yaDcuM0MxMyw3My4yLDExLjYsNzQuMSwxMCw3NC4xeiIvPgoJCTxwYXRoIGZpbGw9IiM2QUE5REQiIHN0cm9rZT0iIzZBQTlERCIgc3Ryb2tlLXdpZHRoPSIwLjEiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTEyLjgsNjkuNWMwLjYsMCwxLjEtMC41LDEuMS0xLjEKCQkJYzAtMC42LTAuNS0xLjItMS4xLTEuMmMtMC42LDAtMS4yLDAuNS0xLjIsMS4yQzExLjYsNjksMTIuMiw2OS41LDEyLjgsNjkuNXogTTEyLjgsNjhjMC4yLDAsMC40LDAuMiwwLjQsMC40CgkJCWMwLDAuMi0wLjIsMC40LTAuNCwwLjRjLTAuMiwwLTAuNC0wLjItMC40LTAuNEMxMi40LDY4LjEsMTIuNiw2OCwxMi44LDY4eiIvPgoJCTxwYXRoIGZpbGw9IiM2QUE5REQiIHN0cm9rZT0iIzZBQTlERCIgc3Ryb2tlLXdpZHRoPSIwLjEiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTcuMiw2OS41YzAuNiwwLDEuMi0wLjUsMS4yLTEuMQoJCQljMC0wLjYtMC41LTEuMi0xLjItMS4yYy0wLjYsMC0xLjEsMC41LTEuMSwxLjJDNi4xLDY5LDYuNiw2OS41LDcuMiw2OS41eiBNNy4yLDY4YzAuMiwwLDAuNCwwLjIsMC40LDAuNGMwLDAuMi0wLjIsMC40LTAuNCwwLjQKCQkJYy0wLjIsMC0wLjQtMC4yLTAuNC0wLjRDNi44LDY4LjEsNyw2OCw3LjIsNjh6Ii8+CgkJPHBhdGggZmlsbD0iIzZBQTlERCIgc3Ryb2tlPSIjNkFBOUREIiBzdHJva2Utd2lkdGg9IjAuMSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTAsNjNjLTMuOCwwLTcsMy4xLTcsN2MwLDMuOCwzLjEsNyw3LDcKCQkJczctMy4xLDctN0MxNyw2Ni4yLDEzLjgsNjMsMTAsNjN6IE0xMCw3Ni4yYy0zLjQsMC02LjItMi44LTYuMi02LjJjMC0zLjQsMi44LTYuMiw2LjItNi4yczYuMiwyLjgsNi4yLDYuMgoJCQlDMTYuMiw3My40LDEzLjQsNzYuMiwxMCw3Ni4yeiIvPgoJPC9nPgoJPGc+CgkJPGc+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzZBQTlERCIgZD0iTTY0LjEsNzMuNGwyLjMsMGMwLjIsMCwwLjQsMC4yLDAuNCwwLjR2Mi4xYzAsMC4yLTAuMiwwLjQtMC40LDAuNGgtMi4zCgkJCQljLTAuMiwwLTAuNC0wLjItMC40LTAuNHYtMi4xQzYzLjcsNzMuNiw2My44LDczLjQsNjQuMSw3My40eiIvPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM2QUE5REQiIGQ9Ik03My41LDczLjVoMi40YzAuMiwwLDAuNCwwLjIsMC40LDAuNHYyLjFjMCwwLjItMC4yLDAuNC0wLjQsMC40aC0yLjQKCQkJCWMtMC4yLDAtMC40LTAuMi0wLjQtMC40bDAtMi4xQzczLjEsNzMuNiw3My4zLDczLjUsNzMuNSw3My41eiIvPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM2QUE5REQiIGQ9Ik02My43LDY4LjRoMTIuNnY1SDYzLjdWNjguNHoiLz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNkFBOUREIiBkPSJNNjUuNSw2My42aDguOWMxLDAsMS45LDAuOCwxLjksMS45djMuMUg2My43di0zLjFDNjMuNyw2NC41LDY0LjUsNjMuNiw2NS41LDYzLjZ6Ii8+CgkJCTxlbGxpcHNlIGZpbGw9IiM2QUE5REQiIGN4PSI2Ni4yIiBjeT0iNzAuOSIgcng9IjAuOSIgcnk9IjAuOSIvPgoJCQk8ZWxsaXBzZSBmaWxsPSIjNkFBOUREIiBjeD0iNzMuOCIgY3k9IjcwLjkiIHJ4PSIwLjkiIHJ5PSIwLjkiLz4KCQk8L2c+Cgk8L2c+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNkFBOUREIiBkPSJNOTYuNCw3MGMwLDMuNi0yLjksNi41LTYuNCw2LjVzLTYuNC0yLjktNi40LTYuNXMyLjktNi41LDYuNC02LjVTOTYuNCw2Ni40LDk2LjQsNzB6Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzZBQTlERCIgZD0iTTk2LjMsNjguNmMwLDAsMCwwLjEsMCwwLjFjLTAuOSwwLjEtMi45LDAuMS00LjYtMS4yYy0xLjEtMC44LTItMS43LTIuNi0yLjUKCQkJCWMtMC4zLTAuNC0wLjYtMC44LTAuNy0xLjFjLTAuMS0wLjEtMC4xLTAuMi0wLjEtMC4yYzAuNS0wLjEsMS4yLTAuMiwyLTAuMmMxLjIsMCwyLjUsMC4zLDMuNSwxLjFjMSwwLjgsMS43LDEuOCwyLjEsMi44CgkJCQlDOTYuMSw2Ny45LDk2LjIsNjguMyw5Ni4zLDY4LjZ6Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzZBQTlERCIgZD0iTTg0LDcyLjJjMCwwLDAtMC4xLDAtMC4xYzAuOS0wLjIsMi45LTAuNCw0LjcsMC42YzEuMSwwLjcsMS45LDEuNSwyLjQsMi4zCgkJCQljMC40LDAuNSwwLjYsMSwwLjcsMS4zYy0wLjQsMC4xLTEsMC4yLTEuNywwLjNjLTEsMC0yLjEtMC4xLTMuMi0wLjhzLTEuOS0xLjYtMi40LTIuNUM4NC4yLDcyLjgsODQuMSw3Mi40LDg0LDcyLjJ6Ii8+CgkJPC9nPgoJPC9nPgoJPGc+CgkJPGc+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzZBQTlERCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNMTE2LjMsNjYuOGwtMS40LDJsLTAuOC0wLjhsLTAuNi0wLjdsMCwwLjlsLTAuMSw4LjJoLTYuOAoJCQkJbC0wLjEtOC4ybDAtMC45bC0wLjYsMC43bC0wLjgsMC44bC0xLjQtMmwyLjYtMi45YzAuMS0wLjEsMC4yLTAuMSwwLjMtMC4xaDEuM2wwLjQsMC43YzAuNywxLjMsMi42LDEuMywzLjMtMC4xbDAuMy0wLjZoMS4yCgkJCQljMC4xLDAsMC4yLDAsMC4zLDAuMWwwLjMtMC4zbC0wLjMsMC4zTDExNi4zLDY2Ljh6Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzZBQTlERCIgZD0iTTExMC4xLDY3LjdoMnYwLjljMCwwLjQtMC40LDAuNy0xLDAuN2MtMC42LDAtMS0wLjMtMS0wLjdMMTEwLjEsNjcuN0wxMTAuMSw2Ny43eiIvPgoJCTwvZz4KCTwvZz4KCTxnPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM2QUE5REQiIGQ9Ik0xMjYuOCw3NC4zYzAsMS4yLTEsMi4yLTIuMiwyLjJzLTIuMi0xLTIuMi0yLjJzMS0yLjIsMi4yLTIuMlMxMjYuOCw3My4xLDEyNi44LDc0LjN6Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzZBQTlERCIgZD0iTTEzNy42LDc0LjNjMCwxLjItMSwyLjItMi4yLDIuMmMtMS4yLDAtMi4yLTEtMi4yLTIuMnMxLTIuMiwyLjItMi4yCgkJCQlDMTM2LjYsNzIuMSwxMzcuNiw3My4xLDEzNy42LDc0LjN6Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzZBQTlERCIgZD0iTTEyNi44LDY0LjR2OS45Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzZBQTlERCIgZD0iTTEzNy43LDY0LjR2OS45Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzZBQTlERCIgZD0iTTEyNi44LDYzLjVoMTAuOHYyLjdoLTEwLjhDMTI2LjgsNjYuMiwxMjYuOCw2My41LDEyNi44LDYzLjV6Ii8+CgkJPC9nPgoJPC9nPgoJPGc+CgkJPGc+CgkJCTxwYXRoIGZpbGw9IiM2QUE5REQiIGQ9Ik0xNzAuOCw2My4xTDE3MC44LDYzLjFjLTAuMywwLTAuNSwwLTAuOCwwYy0yLjEsMC00LDEtNS4zLDIuNWwtMC4xLDBsLTAuMS0wLjFsLTEtMS4ybC0wLjMsMy40bDMuNCwwLjMKCQkJCWwtMS4xLTEuM2wtMC4xLTAuMWwwLjEtMC4xYzEuMS0xLjQsMy0yLjMsNS0yLjFsMCwwYzMuMiwwLjMsNS41LDMuMSw1LjIsNi4zYy0wLjMsMy0zLjEsNS4zLTYuMSw1LjFjLTMuMS0wLjItNS40LTIuOS01LjMtNgoJCQkJbC0xLjMtMC4xYy0wLjIsMy44LDIuNiw3LjEsNi4zLDcuNGMzLjksMC4zLDcuMy0yLjYsNy42LTYuNUMxNzcuMiw2Ni44LDE3NC40LDYzLjUsMTcwLjgsNjMuMXoiLz4KCQkJPHBhdGggZmlsbD0iIzZBQTlERCIgZD0iTTE3MC4zLDY3LjRjMC0wLjMtMC4zLTAuNi0wLjYtMC42cy0wLjYsMC4zLTAuNiwwLjZ2My4yYzAsMC4yLDAuMSwwLjMsMC4yLDAuNGMwLjEsMC4xLDAuMywwLjIsMC40LDAuMgoJCQkJaDIuNGMwLjQsMCwwLjYtMC4zLDAuNi0wLjZTMTcyLjQsNzAsMTcyLDcwaC0xLjZoLTAuMnYtMC4yTDE3MC4zLDY3LjRMMTcwLjMsNjcuNHoiLz4KCQk8L2c+Cgk8L2c+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNkFBOUREIiBkPSJNMTg2LjIsNjMuNGg3LjdjMS41LDAsMi43LDEuMiwyLjcsMi43djcuN2MwLDEuNS0xLjIsMi43LTIuNywyLjdoLTcuNwoJCQkJYy0xLjUsMC0yLjctMS4yLTIuNy0yLjd2LTcuN0MxODMuNCw2NC43LDE4NC43LDYzLjQsMTg2LjIsNjMuNHoiLz4KCQkJPGVsbGlwc2UgZmlsbD0iIzZBQTlERCIgY3g9IjE4NiIgY3k9IjY4LjkiIHJ4PSIwLjciIHJ5PSIwLjciLz4KCQkJPGVsbGlwc2UgZmlsbD0iIzZBQTlERCIgY3g9IjE5NCIgY3k9IjY2LjciIHJ4PSIwLjciIHJ5PSIwLjciLz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNkFBOUREIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0xODYsNzMuM2wwLjQtMC4zYzAuNC0wLjMsMS0wLjMsMS41LTAuMWwxLDAuNAoJCQkJYzAuNSwwLjIsMSwwLjIsMS41LTAuMWwwLjgtMC41YzAuNC0wLjMsMS0wLjMsMS41LTAuMWwxLjgsMC44Ii8+CgkJPC9nPgoJPC9nPgoJPHBhdGggZmlsbD0iIzZBQTlERCIgc3Ryb2tlPSIjNkFBOUREIiBzdHJva2Utd2lkdGg9IjAuMjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTE1Niw2NC4zYy0wLjItMC4xLTAuNC0wLjEtMC41LDAKCQljMCwwLTAuMiwwLjEtMC45LDAuMmMtMC43LDAtMi40LTAuMS0zLjgtMC42Yy0wLjgtMC4zLTEuNy0wLjUtMi41LTAuNWMtMC4yLDAtMC40LDAtMC41LDBjLTEuMywwLTIuNSwwLjMtMy42LDEKCQljLTAuMiwwLjEtMC4yLDAuMi0wLjIsMC40djExLjZjMCwwLjMsMC4xLDAuNSwwLjMsMC41YzAuNiwwLDAuNS0wLjQsMC41LTAuNnYtNS43YzAuNy0wLjMsMy4yLTEuMSw1LjgtMC4xCgkJYzEuNiwwLjYsMy41LDAuNyw0LjMsMC43YzAuOCwwLDEuMy0wLjMsMS4zLTAuM2MwLjItMC4xLDAuMy0wLjIsMC4zLTAuNHYtNS43QzE1Ni4yLDY0LjYsMTU2LjEsNjQuNCwxNTYsNjQuM3ogTTE1NS42LDcwLjIKCQljLTAuMSwwLTAuNywwLjEtMSwwLjFjLTAuNywwLTIuNC0wLjEtMy44LTAuNmMtMi41LTEtNS0wLjUtNi4yLTAuMXYtNC45YzAuOS0wLjUsMi4yLTAuNywzLjItMC43YzAuMSwwLDAuMywwLDAuNCwwCgkJYzAuNywwLDEuNSwwLjIsMi4yLDAuNGMxLjYsMC42LDMuNSwwLjcsNC4zLDAuN2MwLjIsMCwwLjgsMCwxLTAuMVY3MC4yeiIvPgoJPGc+CgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNkFBOUREIiBkPSJNNDguMSw2My41aDMuN2MyLjUsMCw0LjUsMiw0LjUsNC41YzAsMC41LTAuNCwwLjktMC45LDAuOUg0NC41Yy0wLjUsMC0wLjktMC40LTAuOS0wLjkKCQkJQzQzLjYsNjUuNSw0NS42LDYzLjUsNDguMSw2My41eiIvPgoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzZBQTlERCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNNDMuNSw2OC44Yy0wLjIsMC4xLTAuNSwxLjIsMCwxLjVjMS40LDAuOSw4LjUsMC44LDExLjMsMC42CgkJCWMwLjgtMC4xLDEuNi0wLjQsMS43LTEuMmMwLTAuMy0wLjEtMC42LTAuNi0wLjkiLz4KCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM2QUE5REQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTQzLjUsNzAuNkw0My4zLDcxYy0wLjIsMC41LDAuMiwxLDAuNywwLjljMC4zLTAuMSwwLjUsMC4xLDAuNywwLjMKCQkJbDAuMSwwLjJjMC4zLDAuNSwxLDAuNiwxLjUsMC4ybDAsMGMwLjMtMC4yLDAuNy0wLjMsMS0wLjJsMC44LDAuM2MwLjQsMC4yLDAuOCwwLjEsMS4yLDBsMC41LTAuMmMwLjQtMC4yLDAuOS0wLjIsMS4zLDBsMC41LDAuMgoJCQljMC40LDAuMiwwLjgsMC4yLDEuMi0wLjFsMC4yLTAuMWMwLjMtMC4yLDAuOC0wLjIsMS4xLDAuMWwwLjIsMC4yYzAuMywwLjMsMC44LDAuMiwxLTAuMmwwLjEtMC4yYzAuMS0wLjIsMC0wLjMsMC4yLTAuMwoJCQljMC41LDAsMS4yLTAuMywxLjEtMC43bC0wLjQtMS4xIi8+CgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNkFBOUREIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik00My41LDcyLjJjLTAuMSwwLjItMC4zLDAuOCwwLDEuMWMwLjMsMC40LDMsMS4xLDYuNCwxLjEKCQkJYzIuMiwwLDQuNi0wLjMsNi0wLjZjMC41LTAuMSwwLjktMC40LDAuOC0wLjljMC0wLjItMC4yLTAuNS0wLjQtMC43Ii8+CgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNkFBOUREIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik00My41LDczLjNjMCwwLjUsMC42LDIuMywxLjMsMi43YzEuOCwwLjgsNS43LDAuNyw4LjEsMC41CgkJCWMxLjMtMC4xLDIuNS0wLjcsMy4yLTEuOGMwLjMtMC41LDAuNS0xLDAuNS0xLjQiLz4KCQk8ZWxsaXBzZSBmaWxsPSIjNkFBOUREIiBjeD0iNTEuNiIgY3k9IjY2LjUiIHJ4PSIwLjMiIHJ5PSIwLjQiLz4KCQk8ZWxsaXBzZSBmaWxsPSIjNkFBOUREIiBjeD0iNTMiIGN5PSI2NSIgcng9IjAuMyIgcnk9IjAuNCIvPgoJCTxlbGxpcHNlIGZpbGw9IiM2QUE5REQiIGN4PSI1MyIgY3k9IjY3LjIiIHJ4PSIwLjMiIHJ5PSIwLjQiLz4KCQk8ZWxsaXBzZSBmaWxsPSIjNkFBOUREIiBjeD0iNTQuMyIgY3k9IjY2LjUiIHJ4PSIwLjMiIHJ5PSIwLjQiLz4KCQk8ZWxsaXBzZSBmaWxsPSIjNkFBOUREIiBjeD0iNTAuOSIgY3k9IjY1IiByeD0iMC4zIiByeT0iMC40Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM2QUE5REQiIGQ9Ik0yNC4yLDcxdi03LjZjMC4xLDAuMSwwLjgsMC45LDIuOCwzLjFjMi41LTEuNyw1LjYtMC43LDYuOSwwbDIuNC0zLjF2Ny4xCgkJCWMwLDEuMi0wLjEsMi41LTAuOSwzLjRjLTEsMS4yLTIuNywyLjUtNS4zLDIuNWMtMi45LDAtNC41LTEuNS01LjMtMi45QzI0LjIsNzIuOSwyNC4yLDcyLDI0LjIsNzF6Ii8+CgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNkFBOUREIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0yMS4yLDcwLjFsNS40LDEuMiIvPgoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzZBQTlERCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNMjEuMiw3NC4xbDUuNC0xLjIiLz4KCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM2QUE5REQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTM4LjgsNzAuMWwtNS40LDEuMiIvPgoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzZBQTlERCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNMzguOCw3NC4xbC01LjQtMS4yIi8+CgkJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM2QUE5REQiIGQ9Ik0yOS41LDcyLjRMMjksNzEuN2MtMC4yLTAuMywwLTAuNiwwLjMtMC42aDEuNAoJCQljMC4zLDAsMC41LDAuNCwwLjMsMC42bC0wLjcsMWwwLDBjLTAuNywxLjItMi42LDEuMS0zLjEtMC4zbC0wLjEtMC4yYy0wLjEtMC4yLDAtMC40LDAuMi0wLjVjMC4yLTAuMSwwLjQsMCwwLjUsMC4ybDAuMSwwLjIKCQkJQzI4LjMsNzIuOCwyOS4xLDcyLjksMjkuNSw3Mi40eiIvPgoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzZBQTlERCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNMzIuNCw3Mi4xbC0wLjEsMC4yYy0wLjQsMS0xLjgsMS4xLTIuMywwLjIiLz4KCQk8ZWxsaXBzZSBmaWxsPSIjNkFBOUREIiBjeD0iMjcuNiIgY3k9IjY5LjciIHJ4PSIwLjciIHJ5PSIwLjciLz4KCQk8ZWxsaXBzZSBmaWxsPSIjNkFBOUREIiBjeD0iMzIuNCIgY3k9IjY5LjciIHJ4PSIwLjciIHJ5PSIwLjciLz4KCTwvZz4KPC9nPgo8Zz4KCTxwYXRoIGZpbGw9IiM4Njg2ODYiIHN0cm9rZT0iIzg2ODY4NiIgc3Ryb2tlLXdpZHRoPSIwLjEiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTEyLjgsOS41YzAuNiwwLDEuMS0wLjUsMS4xLTEuMgoJCWMwLTAuNi0wLjUtMS4xLTEuMS0xLjFjLTAuNiwwLTEuMiwwLjUtMS4yLDEuMVMxMi4yLDkuNSwxMi44LDkuNXogTTEyLjgsNy45YzAuMiwwLDAuNCwwLjIsMC40LDAuNGMwLDAuMi0wLjIsMC40LTAuNCwwLjQKCQljLTAuMiwwLTAuNC0wLjItMC40LTAuNEMxMi40LDguMSwxMi42LDcuOSwxMi44LDcuOXoiLz4KCTxwYXRoIGZpbGw9IiM4Njg2ODYiIHN0cm9rZT0iIzg2ODY4NiIgc3Ryb2tlLXdpZHRoPSIwLjEiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTcuMiw5LjVjMC42LDAsMS4yLTAuNSwxLjItMS4yCgkJYzAtMC42LTAuNS0xLjEtMS4yLTEuMWMtMC42LDAtMS4xLDAuNS0xLjEsMS4xUzYuNiw5LjUsNy4yLDkuNXogTTcuMiw3LjljMC4yLDAsMC40LDAuMiwwLjQsMC40YzAsMC4yLTAuMiwwLjQtMC40LDAuNAoJCUM3LDguNyw2LjgsOC41LDYuOCw4LjNDNi44LDguMSw3LDcuOSw3LjIsNy45eiIvPgoJPHBhdGggZmlsbD0iIzg2ODY4NiIgc3Ryb2tlPSIjODY4Njg2IiBzdHJva2Utd2lkdGg9IjAuMSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTQuNiwxMS4yYy0wLjEtMC4xLTAuMi0wLjItMC4zLTAuMkg1LjcKCQljLTAuMSwwLTAuMiwwLjEtMC4zLDAuMmMtMC4xLDAuMS0wLjEsMC4yLDAsMC40YzAuNywyLDIuNSwzLjMsNC42LDMuM3MzLjktMS4zLDQuNi0zLjNDMTQuNywxMS40LDE0LjcsMTEuMywxNC42LDExLjJ6IE0xMCwxNC4xCgkJYy0xLjYsMC0zLTAuOS0zLjctMi4yaDcuM0MxMywxMy4yLDExLjYsMTQuMSwxMCwxNC4xeiIvPgoJPHBhdGggZmlsbD0iIzg2ODY4NiIgc3Ryb2tlPSIjODY4Njg2IiBzdHJva2Utd2lkdGg9IjAuMSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTAsM2MtMy44LDAtNywzLjEtNyw3czMuMSw3LDcsN3M3LTMuMSw3LTcKCQlTMTMuOCwzLDEwLDN6IE0xMCwxNi4yYy0zLjQsMC02LjItMi44LTYuMi02LjJTNi42LDMuOCwxMCwzLjhzNi4yLDIuOCw2LjIsNi4yUzEzLjQsMTYuMiwxMCwxNi4yeiIvPgo8L2c+CjxnIGlkPSJDYXJfMDAwMDAwMTg5MzUzOTUwODU0MTM0MTM3NTAwMDAwMDA4MjUyNzM4Nzc4NDI3NzU3MTVfIj4KCTxnPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM4Njg2ODYiIGQ9Ik02NC4xLDEzLjRsMi4zLDBjMC4yLDAsMC40LDAuMiwwLjQsMC40djIuMWMwLDAuMi0wLjIsMC40LTAuNCwwLjRoLTIuMwoJCQkJYy0wLjIsMC0wLjQtMC4yLTAuNC0wLjR2LTIuMUM2My43LDEzLjYsNjMuOCwxMy40LDY0LjEsMTMuNHoiLz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjODY4Njg2IiBkPSJNNzMuNSwxMy40aDIuNGMwLjIsMCwwLjQsMC4yLDAuNCwwLjR2Mi4xYzAsMC4yLTAuMiwwLjQtMC40LDAuNGgtMi40CgkJCQljLTAuMiwwLTAuNC0wLjItMC40LTAuNGwwLTIuMUM3My4xLDEzLjYsNzMuMywxMy40LDczLjUsMTMuNHoiLz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjODY4Njg2IiBkPSJNNjMuNyw4LjRoMTIuNnY1SDYzLjdWOC40eiIvPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM4Njg2ODYiIGQ9Ik02NS41LDMuNmg4LjljMSwwLDEuOSwwLjgsMS45LDEuOXYzLjFINjMuN1Y1LjVDNjMuNyw0LjQsNjQuNSwzLjYsNjUuNSwzLjZ6Ii8+CgkJCTxlbGxpcHNlIGZpbGw9IiM4Njg2ODYiIGN4PSI2Ni4yIiBjeT0iMTAuOSIgcng9IjAuOSIgcnk9IjAuOSIvPgoJCQk8ZWxsaXBzZSBmaWxsPSIjODY4Njg2IiBjeD0iNzMuOCIgY3k9IjEwLjkiIHJ4PSIwLjkiIHJ5PSIwLjkiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGcgaWQ9IkFjdGl2aXRpZXMiPgoJPGc+CgkJPGc+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg2ODY4NiIgZD0iTTk2LjQsMTBjMCwzLjYtMi45LDYuNS02LjQsNi41cy02LjQtMi45LTYuNC02LjVzMi45LTYuNSw2LjQtNi41Uzk2LjQsNi40LDk2LjQsMTB6Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg2ODY4NiIgZD0iTTk2LjMsOC42YzAsMCwwLDAuMSwwLDAuMWMtMC45LDAuMS0yLjksMC4xLTQuNi0xLjJjLTEuMS0wLjgtMi0xLjctMi42LTIuNQoJCQkJYy0wLjMtMC40LTAuNi0wLjgtMC43LTEuMWMtMC4xLTAuMS0wLjEtMC4yLTAuMS0wLjJjMC41LTAuMSwxLjItMC4yLDItMC4yYzEuMiwwLDIuNSwwLjMsMy41LDEuMWMxLDAuOCwxLjcsMS44LDIuMSwyLjgKCQkJCUM5Ni4xLDcuOSw5Ni4yLDguMyw5Ni4zLDguNnoiLz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjODY4Njg2IiBkPSJNODQsMTIuMWMwLDAsMC0wLjEsMC0wLjFjMC45LTAuMiwyLjktMC40LDQuNywwLjZjMS4xLDAuNiwxLjksMS41LDIuNCwyLjMKCQkJCWMwLjQsMC41LDAuNiwxLDAuNywxLjNjLTAuNCwwLjEtMSwwLjItMS43LDAuM2MtMSwwLTIuMS0wLjEtMy4yLTAuOGMtMS4xLTAuNi0xLjktMS42LTIuNC0yLjVDODQuMiwxMi44LDg0LjEsMTIuNCw4NCwxMi4xeiIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8ZyBpZD0iT2JqZWN0c18wMDAwMDA2NDMxMjM3MTczOTEzMDMxNTI1MDAwMDAxMDIyNTg4OTAzMjIyODYzMjk3NV8iPgoJPGc+CgkJPGc+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg2ODY4NiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNMTE2LjMsNi44bC0xLjQsMkwxMTQuMSw4bC0wLjYtMC43bDAsMC45bC0wLjEsOC4yaC02LjhsLTAuMS04LjIKCQkJCWwwLTAuOUwxMDUuOSw4bC0wLjgsMC44bC0xLjQtMmwyLjYtMi45YzAuMS0wLjEsMC4yLTAuMSwwLjMtMC4xaDEuM2wwLjQsMC43YzAuNywxLjMsMi42LDEuMywzLjMtMC4xbDAuMy0wLjZoMS4yCgkJCQljMC4xLDAsMC4yLDAsMC4zLDAuMWwwLjMtMC4zbC0wLjMsMC4zTDExNi4zLDYuOHoiLz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjODY4Njg2IiBkPSJNMTEwLjEsNy43aDJ2MC45YzAsMC40LTAuNCwwLjctMSwwLjdjLTAuNiwwLTEtMC4zLTEtMC43TDExMC4xLDcuN0wxMTAuMSw3Ljd6Ii8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnIGlkPSJTeW1ib2xzXzAwMDAwMDk2NzQ2OTA3ODY5OTI5OTIxMTgwMDAwMDA2NDg0ODEyODMwMjgyNTgyNDE2XyI+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjODY4Njg2IiBkPSJNMTI2LjgsMTQuM2MwLDEuMi0xLDIuMi0yLjIsMi4ycy0yLjItMS0yLjItMi4yczEtMi4yLDIuMi0yLjJTMTI2LjgsMTMuMSwxMjYuOCwxNC4zeiIvPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM4Njg2ODYiIGQ9Ik0xMzcuNiwxNC4zYzAsMS4yLTEsMi4yLTIuMiwyLjJjLTEuMiwwLTIuMi0xLTIuMi0yLjJzMS0yLjIsMi4yLTIuMgoJCQkJQzEzNi42LDEyLjEsMTM3LjYsMTMuMSwxMzcuNiwxNC4zeiIvPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM4Njg2ODYiIGQ9Ik0xMjYuOCw0LjR2OS45Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg2ODY4NiIgZD0iTTEzNy43LDQuNHY5LjkiLz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjODY4Njg2IiBkPSJNMTI2LjgsMy41aDEwLjh2Mi43aC0xMC44QzEyNi44LDYuMiwxMjYuOCwzLjUsMTI2LjgsMy41eiIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8ZyBpZD0iUmVjZW50cyI+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggZmlsbD0iIzg2ODY4NiIgZD0iTTE3MC44LDMuMUwxNzAuOCwzLjFjLTAuMywwLTAuNSwwLTAuOCwwYy0yLjEsMC00LDEtNS4zLDIuNWwtMC4xLDBsLTAuMS0wLjFsLTEtMS4ybC0wLjMsMy40bDMuNCwwLjMKCQkJCWwtMS4xLTEuM2wtMC4xLTAuMWwwLjEtMC4xYzEuMS0xLjQsMy0yLjMsNS0yLjFsMCwwYzMuMiwwLjMsNS41LDMuMSw1LjIsNi4zYy0wLjMsMy0zLjEsNS4zLTYuMSw1LjFjLTMuMS0wLjItNS40LTIuOS01LjMtNgoJCQkJTDE2Myw5LjVjLTAuMiwzLjgsMi42LDcuMSw2LjMsNy40YzMuOSwwLjQsNy4zLTIuNiw3LjYtNi41QzE3Ny4yLDYuOCwxNzQuNCwzLjUsMTcwLjgsMy4xeiIvPgoJCQk8cGF0aCBmaWxsPSIjODY4Njg2IiBkPSJNMTcwLjMsNy40YzAtMC4zLTAuMy0wLjYtMC42LTAuNlMxNjksNy4xLDE2OSw3LjR2My4yYzAsMC4yLDAuMSwwLjMsMC4yLDAuNGMwLjEsMC4xLDAuMywwLjIsMC40LDAuMgoJCQkJaDIuNGMwLjQsMCwwLjYtMC4zLDAuNi0wLjZzLTAuMy0wLjYtMC42LTAuNmgtMS42aC0wLjJWOS44TDE3MC4zLDcuNEwxNzAuMyw3LjR6Ii8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnIGlkPSJDdXN0b21fMDAwMDAxODEwODcyMjk0MzQzMDIzMzY3ODAwMDAwMDUxNTIyNzc5NDU5NDA2NzQ0ODhfIj4KCTxnPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM4Njg2ODYiIGQ9Ik0xODYuMiwzLjRoNy43YzEuNSwwLDIuNywxLjIsMi43LDIuN3Y3LjdjMCwxLjUtMS4yLDIuNy0yLjcsMi43aC03LjcKCQkJCWMtMS41LDAtMi43LTEuMi0yLjctMi43VjYuMUMxODMuNCw0LjYsMTg0LjcsMy40LDE4Ni4yLDMuNHoiLz4KCQkJPGVsbGlwc2UgZmlsbD0iIzg2ODY4NiIgY3g9IjE4NiIgY3k9IjguOSIgcng9IjAuNyIgcnk9IjAuNyIvPgoJCQk8ZWxsaXBzZSBmaWxsPSIjODY4Njg2IiBjeD0iMTk0IiBjeT0iNi43IiByeD0iMC43IiByeT0iMC43Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg2ODY4NiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNMTg2LDEzLjNsMC40LTAuM2MwLjQtMC4zLDEtMC4zLDEuNS0wLjFsMSwwLjQKCQkJCWMwLjUsMC4yLDEsMC4yLDEuNS0wLjFsMC44LTAuNWMwLjQtMC4zLDEtMC4zLDEuNS0wLjFsMS44LDAuOCIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8cGF0aCBmaWxsPSIjODY4Njg2IiBzdHJva2U9IiM4Njg2ODYiIHN0cm9rZS13aWR0aD0iMC4yNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTU2LDQuM2MtMC4yLTAuMS0wLjQtMC4xLTAuNSwwCgljMCwwLTAuMiwwLjEtMC45LDAuMWMtMC43LDAtMi40LTAuMS0zLjgtMC42Yy0wLjgtMC4zLTEuNy0wLjUtMi41LTAuNWMtMC4yLDAtMC40LDAtMC41LDBjLTEuMywwLTIuNSwwLjMtMy42LDEKCWMtMC4yLDAuMS0wLjIsMC4yLTAuMiwwLjR2MTEuNmMwLDAuMywwLjEsMC41LDAuMywwLjVjMC42LDAsMC41LTAuNCwwLjUtMC42di01LjdjMC43LTAuMywzLjItMS4xLDUuOC0wLjFjMS42LDAuNiwzLjUsMC43LDQuMywwLjcKCWMwLjgsMCwxLjMtMC4zLDEuMy0wLjNjMC4yLTAuMSwwLjMtMC4yLDAuMy0wLjRWNC43QzE1Ni4yLDQuNSwxNTYuMSw0LjQsMTU2LDQuM3ogTTE1NS42LDEwLjJjLTAuMSwwLTAuNywwLjEtMSwwLjEKCWMtMC43LDAtMi40LTAuMS0zLjgtMC42Yy0yLjUtMS01LTAuNS02LjItMC4xVjQuN2MwLjktMC41LDIuMi0wLjcsMy4yLTAuN2MwLjEsMCwwLjMsMCwwLjQsMGMwLjcsMCwxLjUsMC4yLDIuMiwwLjQKCWMxLjYsMC42LDMuNSwwLjcsNC4zLDAuN2MwLjIsMCwwLjgsMCwxLTAuMVYxMC4yeiIvPgo8ZyBpZD0iRm9vZCI+Cgk8ZyBpZD0iTGF5ZXJfMTIiPgoJCTxnPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM4Njg2ODYiIGQ9Ik00OC4xLDMuNWgzLjdjMi41LDAsNC41LDIsNC41LDQuNWMwLDAuNS0wLjQsMC45LTAuOSwwLjlINDQuNWMtMC41LDAtMC45LTAuNC0wLjktMC45CgkJCQlDNDMuNiw1LjUsNDUuNiwzLjUsNDguMSwzLjV6Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg2ODY4NiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNNDMuNSw4LjdjLTAuMiwwLjEtMC41LDEuMiwwLDEuNWMxLjQsMC45LDguNSwwLjgsMTEuMywwLjYKCQkJCWMwLjgtMC4xLDEuNi0wLjQsMS43LTEuMmMwLTAuMy0wLjEtMC42LTAuNi0wLjkiLz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjODY4Njg2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik00My41LDEwLjZMNDMuMywxMWMtMC4yLDAuNSwwLjIsMSwwLjcsMC45CgkJCQljMC4zLTAuMSwwLjUsMC4xLDAuNywwLjNsMC4xLDAuMmMwLjMsMC41LDEsMC42LDEuNSwwLjJsMCwwYzAuMy0wLjIsMC43LTAuMywxLTAuMmwwLjgsMC4zYzAuNCwwLjEsMC44LDAuMSwxLjIsMGwwLjUtMC4yCgkJCQljMC40LTAuMiwwLjktMC4yLDEuMywwbDAuNSwwLjJjMC40LDAuMiwwLjgsMC4xLDEuMi0wLjFsMC4yLTAuMWMwLjMtMC4yLDAuOC0wLjEsMS4xLDAuMWwwLjIsMC4yYzAuMywwLjMsMC44LDAuMiwxLTAuMmwwLjEtMC4yCgkJCQljMC4xLTAuMiwwLTAuMywwLjItMC40YzAuNSwwLDEuMi0wLjMsMS4xLTAuN2wtMC40LTEuMSIvPgoJCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM4Njg2ODYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTQzLjUsMTIuMWMtMC4xLDAuMi0wLjMsMC44LDAsMS4xYzAuMywwLjQsMywxLjEsNi40LDEuMQoJCQkJYzIuMiwwLDQuNi0wLjMsNi0wLjZjMC41LTAuMSwwLjktMC40LDAuOC0wLjljMC0wLjItMC4yLTAuNS0wLjQtMC43Ii8+CgkJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg2ODY4NiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNNDMuNSwxMy4zYzAsMC41LDAuNiwyLjQsMS4zLDIuNmMxLjgsMC44LDUuNywwLjcsOC4xLDAuNQoJCQkJYzEuMy0wLjEsMi41LTAuNywzLjItMS44YzAuMy0wLjUsMC41LTEsMC41LTEuNCIvPgoJCQk8ZWxsaXBzZSBmaWxsPSIjODY4Njg2IiBjeD0iNTEuNiIgY3k9IjYuNSIgcng9IjAuMyIgcnk9IjAuNCIvPgoJCQk8ZWxsaXBzZSBmaWxsPSIjODY4Njg2IiBjeD0iNTMiIGN5PSI0LjkiIHJ4PSIwLjMiIHJ5PSIwLjQiLz4KCQkJPGVsbGlwc2UgZmlsbD0iIzg2ODY4NiIgY3g9IjUzIiBjeT0iNy4yIiByeD0iMC4zIiByeT0iMC40Ii8+CgkJCTxlbGxpcHNlIGZpbGw9IiM4Njg2ODYiIGN4PSI1NC4zIiBjeT0iNi41IiByeD0iMC4zIiByeT0iMC40Ii8+CgkJCTxlbGxpcHNlIGZpbGw9IiM4Njg2ODYiIGN4PSI1MC45IiBjeT0iNC45IiByeD0iMC4zIiByeT0iMC40Ii8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnIGlkPSJBbmltYWxzIj4KCTxnPgoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg2ODY4NiIgZD0iTTI0LjIsMTFWMy41YzAuMSwwLjEsMC44LDAuOSwyLjgsMy4xYzIuNS0xLjcsNS42LTAuNyw2LjksMGwyLjQtMy4xdjcuMQoJCQljMCwxLjItMC4xLDIuNS0wLjksMy40Yy0xLDEuMi0yLjcsMi41LTUuMywyLjVjLTIuOSwwLTQuNS0xLjUtNS4zLTIuOUMyNC4yLDEyLjksMjQuMiwxMS45LDI0LjIsMTF6Ii8+CgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjODY4Njg2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0yMS4yLDEwbDUuNCwxLjIiLz4KCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM4Njg2ODYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTIxLjIsMTQuMWw1LjQtMS4yIi8+CgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjODY4Njg2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0zOC44LDEwbC01LjQsMS4yIi8+CgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjODY4Njg2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0zOC44LDE0LjFsLTUuNC0xLjIiLz4KCQk8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzg2ODY4NiIgZD0iTTI5LjUsMTIuNEwyOSwxMS43Yy0wLjItMC4zLDAtMC42LDAuMy0wLjZoMS40CgkJCWMwLjMsMCwwLjUsMC40LDAuMywwLjZsLTAuNywxbDAsMGMtMC43LDEuMi0yLjYsMS4xLTMuMS0wLjNsLTAuMS0wLjJjLTAuMS0wLjIsMC0wLjQsMC4yLTAuNXMwLjQsMCwwLjUsMC4ybDAuMSwwLjIKCQkJQzI4LjMsMTIuNywyOS4xLDEyLjksMjkuNSwxMi40eiIvPgoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg2ODY4NiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNMzIuNCwxMi4xbC0wLjEsMC4yYy0wLjQsMS0xLjgsMS4xLTIuMywwLjIiLz4KCQk8ZWxsaXBzZSBmaWxsPSIjODY4Njg2IiBjeD0iMjcuNiIgY3k9IjkuNyIgcng9IjAuNyIgcnk9IjAuNyIvPgoJCTxlbGxpcHNlIGZpbGw9IiM4Njg2ODYiIGN4PSIzMi40IiBjeT0iOS43IiByeD0iMC43IiByeT0iMC43Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+';
19189
19375
 
19190
- function CategoryNavigation() {
19191
- var _useState = useState(null),
19192
- activeCategory = _useState[0],
19193
- setActiveCategory = _useState[1];
19194
- var scrollCategoryIntoView = useScrollCategoryIntoView();
19195
- useActiveCategoryScrollDetection(setActiveCategory);
19196
- var isSearchMode = useIsSearchMode();
19197
- var categoriesConfig = useCategoriesConfig();
19198
- var CategoryNavigationRef = useCategoryNavigationRef();
19199
- var hideCustomCategory = useShouldHideCustomEmojis();
19200
- return createElement("div", {
19201
- className: cx(styles$b.nav),
19202
- role: "tablist",
19203
- "aria-label": "Category navigation",
19204
- id: "epr-category-nav-id",
19205
- ref: CategoryNavigationRef
19206
- }, categoriesConfig.map(function (categoryConfig) {
19207
- var _cx;
19208
- var category = categoryFromCategoryConfig(categoryConfig);
19209
- var isActiveCategory = category === activeCategory;
19210
- if (isCustomCategory(categoryConfig) && hideCustomCategory) {
19211
- return null;
19212
- }
19213
- return createElement(Button, {
19214
- tabIndex: isSearchMode || isActiveCategory ? -1 : 0,
19215
- className: cx(styles$b.catBtn, commonInteractionStyles.categoryBtn, "epr-icn-" + category, (_cx = {}, _cx[ClassNames.active] = isActiveCategory, _cx)),
19216
- key: category,
19217
- onClick: function onClick() {
19218
- setActiveCategory(category);
19219
- scrollCategoryIntoView(category);
19220
- },
19221
- "aria-label": categoryNameFromCategoryConfig(categoryConfig),
19222
- "aria-selected": isActiveCategory,
19223
- role: "tab",
19224
- "aria-controls": "epr-category-nav-id"
19225
- });
19226
- }));
19376
+ function CategoryButton(_ref) {
19377
+ var _cx;
19378
+ var isActiveCategory = _ref.isActiveCategory,
19379
+ category = _ref.category,
19380
+ allowNavigation = _ref.allowNavigation,
19381
+ categoryConfig = _ref.categoryConfig,
19382
+ onClick = _ref.onClick;
19383
+ return createElement(Button, {
19384
+ tabIndex: allowNavigation ? 0 : -1,
19385
+ className: cx(styles$e.catBtn, commonInteractionStyles.categoryBtn, "epr-icn-" + category, (_cx = {}, _cx[ClassNames.active] = isActiveCategory, _cx)),
19386
+ onClick: onClick,
19387
+ "aria-label": categoryNameFromCategoryConfig(categoryConfig),
19388
+ "aria-selected": isActiveCategory,
19389
+ role: "tab",
19390
+ "aria-controls": "epr-category-nav-id"
19391
+ });
19227
19392
  }
19228
- var styles$b = /*#__PURE__*/stylesheet.create({
19229
- nav: {
19230
- '.': 'epr-category-nav',
19231
- display: 'flex',
19232
- flexDirection: 'row',
19233
- justifyContent: 'space-around',
19234
- padding: 'var(--epr-header-padding)'
19235
- },
19236
- '.epr-search-active': {
19237
- nav: {
19238
- opacity: '0.3',
19239
- cursor: 'default',
19240
- pointerEvents: 'none'
19241
- }
19242
- },
19243
- '.epr-main:has(input:not(:placeholder-shown))': {
19244
- nav: {
19245
- opacity: '0.3',
19246
- cursor: 'default',
19247
- pointerEvents: 'none'
19393
+ var DarkActivePositionY = {
19394
+ backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 3)'
19395
+ };
19396
+ var DarkPositionY = {
19397
+ backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 2)'
19398
+ };
19399
+ var DarkInactivePosition = {
19400
+ ':not(.epr-search-active)': {
19401
+ catBtn: {
19402
+ ':hover': DarkActivePositionY,
19403
+ '&.epr-active': DarkActivePositionY
19248
19404
  }
19249
- },
19405
+ }
19406
+ };
19407
+ var styles$e = /*#__PURE__*/stylesheet.create({
19250
19408
  catBtn: {
19251
19409
  '.': 'epr-cat-btn',
19252
19410
  display: 'inline-block',
@@ -19300,40 +19458,146 @@ var styles$b = /*#__PURE__*/stylesheet.create({
19300
19458
  backgroundPositionX: 'calc(var(--epr-category-navigation-button-size) * -3)'
19301
19459
  }
19302
19460
  },
19303
- '.epr-dark-theme': {
19461
+ '.epr-dark-theme': /*#__PURE__*/_extends({
19462
+ catBtn: DarkPositionY
19463
+ }, DarkInactivePosition),
19464
+ '.epr-auto-theme': /*#__PURE__*/_extends({
19304
19465
  catBtn: {
19305
- backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 2)'
19306
- },
19307
- ':not(.epr-search-active)': {
19308
- // @ts-expect-error - need to fix this
19309
- catBtn: {
19310
- ':hover': {
19311
- backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 3)'
19312
- },
19313
- '&.epr-active': {
19314
- backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 3)'
19315
- }
19466
+ '@media (prefers-color-scheme: dark)': DarkPositionY
19467
+ }
19468
+ }, DarkInactivePosition)
19469
+ });
19470
+
19471
+ function CategoryNavigation() {
19472
+ var _useState = useState(null),
19473
+ activeCategory = _useState[0],
19474
+ setActiveCategory = _useState[1];
19475
+ var scrollCategoryIntoView = useScrollCategoryIntoView();
19476
+ useActiveCategoryScrollDetection(setActiveCategory);
19477
+ var isSearchMode = useIsSearchMode();
19478
+ var categoriesConfig = useCategoriesConfig();
19479
+ var CategoryNavigationRef = useCategoryNavigationRef();
19480
+ var hideCustomCategory = useShouldHideCustomEmojis();
19481
+ return createElement("div", {
19482
+ className: cx(styles$f.nav),
19483
+ role: "tablist",
19484
+ "aria-label": "Category navigation",
19485
+ id: "epr-category-nav-id",
19486
+ ref: CategoryNavigationRef
19487
+ }, categoriesConfig.map(function (categoryConfig) {
19488
+ var category = categoryFromCategoryConfig(categoryConfig);
19489
+ var isActiveCategory = category === activeCategory;
19490
+ if (isCustomCategory(categoryConfig) && hideCustomCategory) {
19491
+ return null;
19492
+ }
19493
+ var allowNavigation = !isSearchMode && !isActiveCategory;
19494
+ return createElement(CategoryButton, {
19495
+ key: category,
19496
+ category: category,
19497
+ isActiveCategory: isActiveCategory,
19498
+ allowNavigation: allowNavigation,
19499
+ categoryConfig: categoryConfig,
19500
+ onClick: function onClick() {
19501
+ setActiveCategory(category);
19502
+ scrollCategoryIntoView(category);
19316
19503
  }
19504
+ });
19505
+ }));
19506
+ }
19507
+ var styles$f = /*#__PURE__*/stylesheet.create({
19508
+ nav: {
19509
+ '.': 'epr-category-nav',
19510
+ display: 'flex',
19511
+ flexDirection: 'row',
19512
+ justifyContent: 'space-around',
19513
+ padding: 'var(--epr-header-padding)'
19514
+ },
19515
+ '.epr-search-active': {
19516
+ nav: {
19517
+ opacity: '0.3',
19518
+ cursor: 'default',
19519
+ pointerEvents: 'none'
19520
+ }
19521
+ },
19522
+ '.epr-main:has(input:not(:placeholder-shown))': {
19523
+ nav: {
19524
+ opacity: '0.3',
19525
+ cursor: 'default',
19526
+ pointerEvents: 'none'
19527
+ }
19528
+ }
19529
+ });
19530
+
19531
+ var SVGTimes = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjgwcHgiIHZpZXdCb3g9IjAgMCAyMCA4MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjODY4Njg2IiBkPSJNNi45OCwxMy41OWMwLjEsMC4xLDAuMjQsMC4xNSwwLjM3LDAuMTVzMC4yNy0wLjA1LDAuMzctMC4xNWwyLjQyLTIuNDJsMi40MywyLjQzCgljMC4xLDAuMSwwLjI0LDAuMTUsMC4zNywwLjE1YzAuMTQsMCwwLjI3LTAuMDUsMC4zNy0wLjE1YzAuMjEtMC4yMSwwLjIxLTAuNTQsMC0wLjc1bC0yLjQzLTIuNDNMMTMuMzIsOAoJYzAuMjEtMC4yMSwwLjIxLTAuNTQsMC0wLjc1Yy0wLjIxLTAuMjEtMC41NC0wLjIxLTAuNzUsMGwtMi40MiwyLjQyTDcuNzQsNy4yN2MtMC4yMS0wLjIxLTAuNTQtMC4yMS0wLjc1LDAKCWMtMC4yMSwwLjIxLTAuMjEsMC41NCwwLDAuNzVsMi40MSwyLjQxbC0yLjQyLDIuNDJDNi43NywxMy4wNSw2Ljc3LDEzLjM5LDYuOTgsMTMuNTlMNi45OCwxMy41OXoiLz4KPHBhdGggZmlsbD0iIzg2ODY4NiIgZD0iTTEwLjE1LDE4LjQzYzQuNDEsMCw4LTMuNTksOC04YzAtNC40MS0zLjU5LTgtOC04Yy00LjQxLDAtOCwzLjU5LTgsOEMyLjE1LDE0Ljg0LDUuNzQsMTguNDMsMTAuMTUsMTguNDN6CgkgTTEwLjE1LDMuNDljMy44MywwLDYuOTQsMy4xMSw2Ljk0LDYuOTRjMCwzLjgzLTMuMTEsNi45NC02Ljk0LDYuOTRjLTMuODMsMC02Ljk0LTMuMTEtNi45NC02Ljk0QzMuMjEsNi42LDYuMzMsMy40OSwxMC4xNSwzLjQ5CglMMTAuMTUsMy40OXoiLz4KPHBhdGggZmlsbD0iIzMzNzFCNyIgZD0iTTYuOTgsMzMuNTljMC4xLDAuMSwwLjI0LDAuMTUsMC4zNywwLjE1czAuMjctMC4wNSwwLjM3LTAuMTVsMi40Mi0yLjQybDIuNDMsMi40MwoJYzAuMSwwLjEsMC4yNCwwLjE1LDAuMzcsMC4xNWMwLjE0LDAsMC4yNy0wLjA1LDAuMzctMC4xNWMwLjIxLTAuMjEsMC4yMS0wLjU0LDAtMC43NWwtMi40My0yLjQzTDEzLjMyLDI4CgljMC4yMS0wLjIxLDAuMjEtMC41NCwwLTAuNzVjLTAuMjEtMC4yMS0wLjU0LTAuMjEtMC43NSwwbC0yLjQyLDIuNDJsLTIuNDEtMi40MWMtMC4yMS0wLjIxLTAuNTQtMC4yMS0wLjc1LDAKCWMtMC4yMSwwLjIxLTAuMjEsMC41NCwwLDAuNzVsMi40MSwyLjQxbC0yLjQyLDIuNDJDNi43NywzMy4wNSw2Ljc3LDMzLjM5LDYuOTgsMzMuNTlMNi45OCwzMy41OXoiLz4KPHBhdGggZmlsbD0iIzMzNzFCNyIgZD0iTTEwLjE1LDM4LjQzYzQuNDEsMCw4LTMuNTksOC04YzAtNC40MS0zLjU5LTgtOC04Yy00LjQxLDAtOCwzLjU5LTgsOEMyLjE1LDM0Ljg0LDUuNzQsMzguNDMsMTAuMTUsMzguNDN6CgkgTTEwLjE1LDIzLjQ5YzMuODMsMCw2Ljk0LDMuMTEsNi45NCw2Ljk0YzAsMy44My0zLjExLDYuOTQtNi45NCw2Ljk0Yy0zLjgzLDAtNi45NC0zLjExLTYuOTQtNi45NAoJQzMuMjEsMjYuNiw2LjMzLDIzLjQ5LDEwLjE1LDIzLjQ5TDEwLjE1LDIzLjQ5eiIvPgo8cGF0aCBmaWxsPSIjQzBDMEJGIiBkPSJNNi45OCw1My41OWMwLjEsMC4xLDAuMjQsMC4xNSwwLjM3LDAuMTVzMC4yNy0wLjA1LDAuMzctMC4xNWwyLjQyLTIuNDJsMi40MywyLjQzCgljMC4xLDAuMSwwLjI0LDAuMTUsMC4zNywwLjE1YzAuMTQsMCwwLjI3LTAuMDUsMC4zNy0wLjE1YzAuMjEtMC4yMSwwLjIxLTAuNTQsMC0wLjc1bC0yLjQzLTIuNDNMMTMuMzIsNDgKCWMwLjIxLTAuMjEsMC4yMS0wLjU0LDAtMC43NWMtMC4yMS0wLjIxLTAuNTQtMC4yMS0wLjc1LDBsLTIuNDIsMi40MmwtMi40MS0yLjQxYy0wLjIxLTAuMjEtMC41NC0wLjIxLTAuNzUsMAoJYy0wLjIxLDAuMjEtMC4yMSwwLjU0LDAsMC43NWwyLjQxLDIuNDFsLTIuNDIsMi40MkM2Ljc3LDUzLjA1LDYuNzcsNTMuMzksNi45OCw1My41OUw2Ljk4LDUzLjU5eiIvPgo8cGF0aCBmaWxsPSIjQzBDMEJGIiBkPSJNMTAuMTUsNTguNDNjNC40MSwwLDgtMy41OSw4LThjMC00LjQxLTMuNTktOC04LThjLTQuNDEsMC04LDMuNTktOCw4QzIuMTUsNTQuODQsNS43NCw1OC40MywxMC4xNSw1OC40M3oKCSBNMTAuMTUsNDMuNDljMy44MywwLDYuOTQsMy4xMSw2Ljk0LDYuOTRjMCwzLjgzLTMuMTEsNi45NC02Ljk0LDYuOTRjLTMuODMsMC02Ljk0LTMuMTEtNi45NC02Ljk0CglDMy4yMSw0Ni42LDYuMzMsNDMuNDksMTAuMTUsNDMuNDlMMTAuMTUsNDMuNDl6Ii8+CjxwYXRoIGZpbGw9IiM2QUE5REQiIGQ9Ik02Ljk4LDczLjU5YzAuMSwwLjEsMC4yNCwwLjE1LDAuMzcsMC4xNXMwLjI3LTAuMDUsMC4zNy0wLjE1bDIuNDItMi40MmwyLjQzLDIuNDMKCWMwLjEsMC4xLDAuMjQsMC4xNSwwLjM3LDAuMTVjMC4xNCwwLDAuMjctMC4wNSwwLjM3LTAuMTVjMC4yMS0wLjIxLDAuMjEtMC41NCwwLTAuNzVsLTIuNDMtMi40M0wxMy4zMiw2OAoJYzAuMjEtMC4yMSwwLjIxLTAuNTQsMC0wLjc1Yy0wLjIxLTAuMjEtMC41NC0wLjIxLTAuNzUsMGwtMi40MiwyLjQybC0yLjQxLTIuNDFjLTAuMjEtMC4yMS0wLjU0LTAuMjEtMC43NSwwCgljLTAuMjEsMC4yMS0wLjIxLDAuNTQsMCwwLjc1bDIuNDEsMi40MWwtMi40MiwyLjQyQzYuNzcsNzMuMDUsNi43Nyw3My4zOSw2Ljk4LDczLjU5TDYuOTgsNzMuNTl6Ii8+CjxwYXRoIGZpbGw9IiM2QUE5REQiIGQ9Ik0xMC4xNSw3OC40M2M0LjQxLDAsOC0zLjU5LDgtOGMwLTQuNDEtMy41OS04LTgtOGMtNC40MSwwLTgsMy41OS04LDhDMi4xNSw3NC44NCw1Ljc0LDc4LjQzLDEwLjE1LDc4LjQzegoJIE0xMC4xNSw2My40OWMzLjgzLDAsNi45NCwzLjExLDYuOTQsNi45NGMwLDMuODMtMy4xMSw2Ljk0LTYuOTQsNi45NGMtMy44MywwLTYuOTQtMy4xMS02Ljk0LTYuOTQKCUMzLjIxLDY2LjYsNi4zMyw2My40OSwxMC4xNSw2My40OUwxMC4xNSw2My40OXoiLz4KPC9zdmc+';
19532
+
19533
+ function BtnClearSearch() {
19534
+ var clearSearch = useClearSearch();
19535
+ return createElement(Button, {
19536
+ className: cx(styles$g.btnClearSearch, commonInteractionStyles.visibleOnSearchOnly),
19537
+ onClick: clearSearch,
19538
+ "aria-label": "Clear",
19539
+ title: "Clear"
19540
+ }, createElement("div", {
19541
+ className: cx(styles$g.icnClearnSearch)
19542
+ }));
19543
+ }
19544
+ var HoverDark = {
19545
+ ':hover': {
19546
+ '> .epr-icn-clear-search': {
19547
+ backgroundPositionY: '-60px'
19548
+ }
19549
+ }
19550
+ };
19551
+ var styles$g = /*#__PURE__*/stylesheet.create({
19552
+ btnClearSearch: {
19553
+ '.': 'epr-btn-clear-search',
19554
+ position: 'absolute',
19555
+ right: 'var(--epr-search-bar-inner-padding)',
19556
+ height: '30px',
19557
+ width: '30px',
19558
+ display: 'flex',
19559
+ alignItems: 'center',
19560
+ justifyContent: 'center',
19561
+ top: '50%',
19562
+ transform: 'translateY(-50%)',
19563
+ padding: '0',
19564
+ borderRadius: '50%',
19565
+ ':hover': {
19566
+ background: 'var(--epr-hover-bg-color)'
19567
+ },
19568
+ ':focus': {
19569
+ background: 'var(--epr-hover-bg-color)'
19570
+ }
19571
+ },
19572
+ icnClearnSearch: {
19573
+ '.': 'epr-icn-clear-search',
19574
+ backgroundColor: 'transparent',
19575
+ backgroundRepeat: 'no-repeat',
19576
+ backgroundSize: '20px',
19577
+ height: '20px',
19578
+ width: '20px',
19579
+ backgroundImage: "url(" + SVGTimes + ")",
19580
+ ':hover': {
19581
+ backgroundPositionY: '-20px'
19582
+ },
19583
+ ':focus': {
19584
+ backgroundPositionY: '-20px'
19317
19585
  }
19318
19586
  },
19587
+ '.epr-dark-theme': {
19588
+ icnClearnSearch: {
19589
+ backgroundPositionY: '-40px'
19590
+ },
19591
+ btnClearSearch: HoverDark
19592
+ },
19319
19593
  '.epr-auto-theme': {
19320
- catBtn: {
19594
+ icnClearnSearch: {
19321
19595
  '@media (prefers-color-scheme: dark)': {
19322
- backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 2)'
19596
+ backgroundPositionY: '-40px'
19323
19597
  }
19324
19598
  },
19325
- ':not(.epr-search-active)': {
19326
- catBtn: {
19327
- '@media (prefers-color-scheme: dark)': {
19328
- ':hover': {
19329
- backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 3)'
19330
- },
19331
- // @ts-ignore
19332
- '&.epr-active': {
19333
- backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 3)'
19334
- }
19335
- }
19336
- }
19599
+ btnClearSearch: {
19600
+ '@media (prefers-color-scheme: dark)': HoverDark
19337
19601
  }
19338
19602
  }
19339
19603
  });
@@ -19355,7 +19619,39 @@ function genQuery(value) {
19355
19619
 
19356
19620
  var SVGMagnifier = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCAyMCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzg2ODY4NiIgZD0iTTEyLDguODFjMCwyLjA4LTEuNjgsMy43Ni0zLjc2LDMuNzZjLTIuMDgsMC0zLjc2LTEuNjgtMy43Ni0zLjc2CgljMC0yLjA4LDEuNjgtMy43NiwzLjc2LTMuNzZDMTAuMzIsNS4wNSwxMiw2LjczLDEyLDguODF6IE0xMS4yMywxMi43MmMtMC44MywwLjY0LTEuODcsMS4wMS0yLjk5LDEuMDFjLTIuNzIsMC00LjkyLTIuMi00LjkyLTQuOTIKCWMwLTIuNzIsMi4yLTQuOTIsNC45Mi00LjkyYzIuNzIsMCw0LjkyLDIuMiw0LjkyLDQuOTJjMCwxLjEzLTAuMzgsMi4xNi0xLjAxLDIuOTlsMy45NCwzLjkzYzAuMjUsMC4yNSwwLjI1LDAuNjYsMCwwLjkyCgljLTAuMjUsMC4yNS0wLjY2LDAuMjUtMC45MiwwTDExLjIzLDEyLjcyeiIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0MwQzBCRiIgZD0iTTEyLDI4LjgxYzAsMi4wOC0xLjY4LDMuNzYtMy43NiwzLjc2Yy0yLjA4LDAtMy43Ni0xLjY4LTMuNzYtMy43NgoJYzAtMi4wOCwxLjY4LTMuNzYsMy43Ni0zLjc2QzEwLjMyLDI1LjA1LDEyLDI2LjczLDEyLDI4LjgxeiBNMTEuMjMsMzIuNzJjLTAuODMsMC42NC0xLjg3LDEuMDEtMi45OSwxLjAxCgljLTIuNzIsMC00LjkyLTIuMi00LjkyLTQuOTJjMC0yLjcyLDIuMi00LjkyLDQuOTItNC45MmMyLjcyLDAsNC45MiwyLjIsNC45Miw0LjkyYzAsMS4xMy0wLjM4LDIuMTYtMS4wMSwyLjk5bDMuOTQsMy45MwoJYzAuMjUsMC4yNSwwLjI1LDAuNjYsMCwwLjkyYy0wLjI1LDAuMjUtMC42NiwwLjI1LTAuOTIsMEwxMS4yMywzMi43MnoiLz4KPC9zdmc+';
19357
19621
 
19358
- var SVGTimes = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjgwcHgiIHZpZXdCb3g9IjAgMCAyMCA4MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjODY4Njg2IiBkPSJNNi45OCwxMy41OWMwLjEsMC4xLDAuMjQsMC4xNSwwLjM3LDAuMTVzMC4yNy0wLjA1LDAuMzctMC4xNWwyLjQyLTIuNDJsMi40MywyLjQzCgljMC4xLDAuMSwwLjI0LDAuMTUsMC4zNywwLjE1YzAuMTQsMCwwLjI3LTAuMDUsMC4zNy0wLjE1YzAuMjEtMC4yMSwwLjIxLTAuNTQsMC0wLjc1bC0yLjQzLTIuNDNMMTMuMzIsOAoJYzAuMjEtMC4yMSwwLjIxLTAuNTQsMC0wLjc1Yy0wLjIxLTAuMjEtMC41NC0wLjIxLTAuNzUsMGwtMi40MiwyLjQyTDcuNzQsNy4yN2MtMC4yMS0wLjIxLTAuNTQtMC4yMS0wLjc1LDAKCWMtMC4yMSwwLjIxLTAuMjEsMC41NCwwLDAuNzVsMi40MSwyLjQxbC0yLjQyLDIuNDJDNi43NywxMy4wNSw2Ljc3LDEzLjM5LDYuOTgsMTMuNTlMNi45OCwxMy41OXoiLz4KPHBhdGggZmlsbD0iIzg2ODY4NiIgZD0iTTEwLjE1LDE4LjQzYzQuNDEsMCw4LTMuNTksOC04YzAtNC40MS0zLjU5LTgtOC04Yy00LjQxLDAtOCwzLjU5LTgsOEMyLjE1LDE0Ljg0LDUuNzQsMTguNDMsMTAuMTUsMTguNDN6CgkgTTEwLjE1LDMuNDljMy44MywwLDYuOTQsMy4xMSw2Ljk0LDYuOTRjMCwzLjgzLTMuMTEsNi45NC02Ljk0LDYuOTRjLTMuODMsMC02Ljk0LTMuMTEtNi45NC02Ljk0QzMuMjEsNi42LDYuMzMsMy40OSwxMC4xNSwzLjQ5CglMMTAuMTUsMy40OXoiLz4KPHBhdGggZmlsbD0iIzMzNzFCNyIgZD0iTTYuOTgsMzMuNTljMC4xLDAuMSwwLjI0LDAuMTUsMC4zNywwLjE1czAuMjctMC4wNSwwLjM3LTAuMTVsMi40Mi0yLjQybDIuNDMsMi40MwoJYzAuMSwwLjEsMC4yNCwwLjE1LDAuMzcsMC4xNWMwLjE0LDAsMC4yNy0wLjA1LDAuMzctMC4xNWMwLjIxLTAuMjEsMC4yMS0wLjU0LDAtMC43NWwtMi40My0yLjQzTDEzLjMyLDI4CgljMC4yMS0wLjIxLDAuMjEtMC41NCwwLTAuNzVjLTAuMjEtMC4yMS0wLjU0LTAuMjEtMC43NSwwbC0yLjQyLDIuNDJsLTIuNDEtMi40MWMtMC4yMS0wLjIxLTAuNTQtMC4yMS0wLjc1LDAKCWMtMC4yMSwwLjIxLTAuMjEsMC41NCwwLDAuNzVsMi40MSwyLjQxbC0yLjQyLDIuNDJDNi43NywzMy4wNSw2Ljc3LDMzLjM5LDYuOTgsMzMuNTlMNi45OCwzMy41OXoiLz4KPHBhdGggZmlsbD0iIzMzNzFCNyIgZD0iTTEwLjE1LDM4LjQzYzQuNDEsMCw4LTMuNTksOC04YzAtNC40MS0zLjU5LTgtOC04Yy00LjQxLDAtOCwzLjU5LTgsOEMyLjE1LDM0Ljg0LDUuNzQsMzguNDMsMTAuMTUsMzguNDN6CgkgTTEwLjE1LDIzLjQ5YzMuODMsMCw2Ljk0LDMuMTEsNi45NCw2Ljk0YzAsMy44My0zLjExLDYuOTQtNi45NCw2Ljk0Yy0zLjgzLDAtNi45NC0zLjExLTYuOTQtNi45NAoJQzMuMjEsMjYuNiw2LjMzLDIzLjQ5LDEwLjE1LDIzLjQ5TDEwLjE1LDIzLjQ5eiIvPgo8cGF0aCBmaWxsPSIjQzBDMEJGIiBkPSJNNi45OCw1My41OWMwLjEsMC4xLDAuMjQsMC4xNSwwLjM3LDAuMTVzMC4yNy0wLjA1LDAuMzctMC4xNWwyLjQyLTIuNDJsMi40MywyLjQzCgljMC4xLDAuMSwwLjI0LDAuMTUsMC4zNywwLjE1YzAuMTQsMCwwLjI3LTAuMDUsMC4zNy0wLjE1YzAuMjEtMC4yMSwwLjIxLTAuNTQsMC0wLjc1bC0yLjQzLTIuNDNMMTMuMzIsNDgKCWMwLjIxLTAuMjEsMC4yMS0wLjU0LDAtMC43NWMtMC4yMS0wLjIxLTAuNTQtMC4yMS0wLjc1LDBsLTIuNDIsMi40MmwtMi40MS0yLjQxYy0wLjIxLTAuMjEtMC41NC0wLjIxLTAuNzUsMAoJYy0wLjIxLDAuMjEtMC4yMSwwLjU0LDAsMC43NWwyLjQxLDIuNDFsLTIuNDIsMi40MkM2Ljc3LDUzLjA1LDYuNzcsNTMuMzksNi45OCw1My41OUw2Ljk4LDUzLjU5eiIvPgo8cGF0aCBmaWxsPSIjQzBDMEJGIiBkPSJNMTAuMTUsNTguNDNjNC40MSwwLDgtMy41OSw4LThjMC00LjQxLTMuNTktOC04LThjLTQuNDEsMC04LDMuNTktOCw4QzIuMTUsNTQuODQsNS43NCw1OC40MywxMC4xNSw1OC40M3oKCSBNMTAuMTUsNDMuNDljMy44MywwLDYuOTQsMy4xMSw2Ljk0LDYuOTRjMCwzLjgzLTMuMTEsNi45NC02Ljk0LDYuOTRjLTMuODMsMC02Ljk0LTMuMTEtNi45NC02Ljk0CglDMy4yMSw0Ni42LDYuMzMsNDMuNDksMTAuMTUsNDMuNDlMMTAuMTUsNDMuNDl6Ii8+CjxwYXRoIGZpbGw9IiM2QUE5REQiIGQ9Ik02Ljk4LDczLjU5YzAuMSwwLjEsMC4yNCwwLjE1LDAuMzcsMC4xNXMwLjI3LTAuMDUsMC4zNy0wLjE1bDIuNDItMi40MmwyLjQzLDIuNDMKCWMwLjEsMC4xLDAuMjQsMC4xNSwwLjM3LDAuMTVjMC4xNCwwLDAuMjctMC4wNSwwLjM3LTAuMTVjMC4yMS0wLjIxLDAuMjEtMC41NCwwLTAuNzVsLTIuNDMtMi40M0wxMy4zMiw2OAoJYzAuMjEtMC4yMSwwLjIxLTAuNTQsMC0wLjc1Yy0wLjIxLTAuMjEtMC41NC0wLjIxLTAuNzUsMGwtMi40MiwyLjQybC0yLjQxLTIuNDFjLTAuMjEtMC4yMS0wLjU0LTAuMjEtMC43NSwwCgljLTAuMjEsMC4yMS0wLjIxLDAuNTQsMCwwLjc1bDIuNDEsMi40MWwtMi40MiwyLjQyQzYuNzcsNzMuMDUsNi43Nyw3My4zOSw2Ljk4LDczLjU5TDYuOTgsNzMuNTl6Ii8+CjxwYXRoIGZpbGw9IiM2QUE5REQiIGQ9Ik0xMC4xNSw3OC40M2M0LjQxLDAsOC0zLjU5LDgtOGMwLTQuNDEtMy41OS04LTgtOGMtNC40MSwwLTgsMy41OS04LDhDMi4xNSw3NC44NCw1Ljc0LDc4LjQzLDEwLjE1LDc4LjQzegoJIE0xMC4xNSw2My40OWMzLjgzLDAsNi45NCwzLjExLDYuOTQsNi45NGMwLDMuODMtMy4xMSw2Ljk0LTYuOTQsNi45NGMtMy44MywwLTYuOTQtMy4xMS02Ljk0LTYuOTQKCUMzLjIxLDY2LjYsNi4zMyw2My40OSwxMC4xNSw2My40OUwxMC4xNSw2My40OXoiLz4KPC9zdmc+';
19622
+ function IcnSearch() {
19623
+ return createElement("div", {
19624
+ className: cx(styles$h.icnSearch)
19625
+ });
19626
+ }
19627
+ var styles$h = /*#__PURE__*/stylesheet.create({
19628
+ icnSearch: {
19629
+ '.': 'epr-icn-search',
19630
+ content: '',
19631
+ position: 'absolute',
19632
+ top: '50%',
19633
+ left: 'var(--epr-search-bar-inner-padding)',
19634
+ transform: 'translateY(-50%)',
19635
+ width: '20px',
19636
+ height: '20px',
19637
+ backgroundRepeat: 'no-repeat',
19638
+ backgroundPosition: '0 0',
19639
+ backgroundSize: '20px',
19640
+ backgroundImage: "url(" + SVGMagnifier + ")"
19641
+ },
19642
+ '.epr-dark-theme': {
19643
+ icnSearch: {
19644
+ backgroundPositionY: '-20px'
19645
+ }
19646
+ },
19647
+ '.epr-auto-theme': {
19648
+ icnSearch: {
19649
+ '@media (prefers-color-scheme: dark)': {
19650
+ backgroundPositionY: '-20px'
19651
+ }
19652
+ }
19653
+ }
19654
+ });
19359
19655
 
19360
19656
  function SearchContainer() {
19361
19657
  var searchDisabled = useSearchDisabledConfig();
@@ -19364,7 +19660,7 @@ function SearchContainer() {
19364
19660
  return null;
19365
19661
  }
19366
19662
  return createElement(Flex, {
19367
- className: cx(styles$c.overlay)
19663
+ className: cx(styles$i.overlay)
19368
19664
  }, createElement(Search, null), isSkinToneInSearch ? createElement(SkinTonePicker, null) : null);
19369
19665
  }
19370
19666
  function Search() {
@@ -19373,7 +19669,6 @@ function Search() {
19373
19669
  setInc = _useState[1];
19374
19670
  var closeAllOpenToggles = useCloseAllOpenToggles();
19375
19671
  var SearchInputRef = useSearchInputRef();
19376
- var clearSearch = useClearSearch();
19377
19672
  var placeholder = useSearchPlaceHolderConfig();
19378
19673
  var autoFocus = useAutoFocusSearchConfig();
19379
19674
  var _useFilter = useFilter(),
@@ -19383,7 +19678,7 @@ function Search() {
19383
19678
  var input = SearchInputRef == null ? void 0 : SearchInputRef.current;
19384
19679
  var value = input == null ? void 0 : input.value;
19385
19680
  return createElement(Relative, {
19386
- className: cx(styles$c.searchContainer)
19681
+ className: cx(styles$i.searchContainer)
19387
19682
  }, createElement(CssSearch, {
19388
19683
  value: value
19389
19684
  }), createElement("input", {
@@ -19391,7 +19686,7 @@ function Search() {
19391
19686
  autoFocus: autoFocus,
19392
19687
  "aria-label": 'Type to search for an emoji',
19393
19688
  onFocus: closeAllOpenToggles,
19394
- className: cx(styles$c.search),
19689
+ className: cx(styles$i.search),
19395
19690
  type: "text",
19396
19691
  "aria-controls": "epr-search-id",
19397
19692
  placeholder: placeholder,
@@ -19405,22 +19700,13 @@ function Search() {
19405
19700
  ref: SearchInputRef
19406
19701
  }), searchTerm ? createElement("div", {
19407
19702
  role: "status",
19408
- className: cx('epr-status-search-results', styles$c.visuallyHidden),
19703
+ className: cx('epr-status-search-results', styles$i.visuallyHidden),
19409
19704
  "aria-live": "polite",
19410
19705
  id: "epr-search-id",
19411
19706
  "aria-atomic": "true"
19412
- }, statusSearchResults) : null, createElement("div", {
19413
- className: cx(styles$c.icnSearch)
19414
- }), createElement(Button, {
19415
- className: cx(styles$c.btnClearSearch, commonInteractionStyles.visibleOnSearchOnly),
19416
- onClick: clearSearch,
19417
- "aria-label": "Clear",
19418
- title: "Clear"
19419
- }, createElement("div", {
19420
- className: cx(styles$c.icnClearnSearch)
19421
- })));
19707
+ }, statusSearchResults) : null, createElement(IcnSearch, null), createElement(BtnClearSearch, null));
19422
19708
  }
19423
- var styles$c = /*#__PURE__*/stylesheet.create({
19709
+ var styles$i = /*#__PURE__*/stylesheet.create({
19424
19710
  overlay: {
19425
19711
  padding: 'var(--epr-header-padding)',
19426
19712
  zIndex: 'var(--epr-header-overlay-z-index)'
@@ -19458,20 +19744,6 @@ var styles$c = /*#__PURE__*/stylesheet.create({
19458
19744
  color: 'var(--epr-search-input-placeholder-color)'
19459
19745
  }
19460
19746
  },
19461
- icnSearch: {
19462
- '.': 'epr-icn-search',
19463
- content: '',
19464
- position: 'absolute',
19465
- top: '50%',
19466
- left: 'var(--epr-search-bar-inner-padding)',
19467
- transform: 'translateY(-50%)',
19468
- width: '20px',
19469
- height: '20px',
19470
- backgroundRepeat: 'no-repeat',
19471
- backgroundPosition: '0 0',
19472
- backgroundSize: '20px',
19473
- backgroundImage: "url(" + SVGMagnifier + ")"
19474
- },
19475
19747
  btnClearSearch: {
19476
19748
  '.': 'epr-btn-clear-search',
19477
19749
  position: 'absolute',
@@ -19508,9 +19780,6 @@ var styles$c = /*#__PURE__*/stylesheet.create({
19508
19780
  }
19509
19781
  },
19510
19782
  '.epr-dark-theme': {
19511
- icnSearch: {
19512
- backgroundPositionY: '-20px'
19513
- },
19514
19783
  icnClearnSearch: {
19515
19784
  backgroundPositionY: '-40px'
19516
19785
  },
@@ -19521,11 +19790,6 @@ var styles$c = /*#__PURE__*/stylesheet.create({
19521
19790
  }
19522
19791
  },
19523
19792
  '.epr-auto-theme': {
19524
- icnSearch: {
19525
- '@media (prefers-color-scheme: dark)': {
19526
- backgroundPositionY: '-20px'
19527
- }
19528
- },
19529
19793
  icnClearnSearch: {
19530
19794
  '@media (prefers-color-scheme: dark)': {
19531
19795
  backgroundPositionY: '-40px'
@@ -19544,7 +19808,7 @@ var styles$c = /*#__PURE__*/stylesheet.create({
19544
19808
 
19545
19809
  function Header() {
19546
19810
  return createElement(Relative, {
19547
- className: "epr-header"
19811
+ className: cx('epr-header', commonInteractionStyles.hiddenOnReactions)
19548
19812
  }, createElement(SearchContainer, null), createElement(CategoryNavigation, null));
19549
19813
  }
19550
19814
 
@@ -19949,6 +20213,7 @@ function useOnFocus() {
19949
20213
  }, [BodyRef, emojiStyle, getEmojiUrl]);
19950
20214
  }
19951
20215
 
20216
+ var _excluded$1 = ["width", "height"];
19952
20217
  function PickerMain(_ref) {
19953
20218
  var children = _ref.children;
19954
20219
  return createElement(PickerContextProvider, null, createElement(PickerStyleTag, null), createElement(PickerRootElement, null, children));
@@ -19956,6 +20221,8 @@ function PickerMain(_ref) {
19956
20221
  function PickerRootElement(_ref2) {
19957
20222
  var _cx;
19958
20223
  var children = _ref2.children;
20224
+ var _useReactionsModeStat = useReactionsModeState(),
20225
+ reactionsMode = _useReactionsModeStat[0];
19959
20226
  var theme = useThemeConfig();
19960
20227
  var searchModeActive = useIsSearchMode();
19961
20228
  var PickerMainRef = usePickerMainRef();
@@ -19963,10 +20230,17 @@ function PickerRootElement(_ref2) {
19963
20230
  var style = useStyleConfig();
19964
20231
  useKeyboardNavigation();
19965
20232
  useOnFocus();
20233
+ var _ref3 = style || {},
20234
+ width = _ref3.width,
20235
+ height = _ref3.height,
20236
+ styleProps = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
19966
20237
  return createElement("aside", {
19967
- className: cx(styles$d.main, styles$d.baseVariables, theme === Theme.DARK && styles$d.darkTheme, theme === Theme.AUTO && styles$d.autoThemeDark, (_cx = {}, _cx[ClassNames.searchActive] = searchModeActive, _cx), className),
20238
+ className: cx(styles$j.main, styles$j.baseVariables, theme === Theme.DARK && styles$j.darkTheme, theme === Theme.AUTO && styles$j.autoThemeDark, (_cx = {}, _cx[ClassNames.searchActive] = searchModeActive, _cx), reactionsMode && styles$j.reactionsMenu, className),
19968
20239
  ref: PickerMainRef,
19969
- style: style
20240
+ style: _extends({}, styleProps, !reactionsMode && {
20241
+ height: height,
20242
+ width: width
20243
+ })
19970
20244
  }, children);
19971
20245
  }
19972
20246
  var DarkTheme = {
@@ -19979,12 +20253,13 @@ var DarkTheme = {
19979
20253
  '--epr-category-label-bg-color': 'var(--epr-dark-category-label-bg-color)',
19980
20254
  '--epr-picker-border-color': 'var(--epr-dark-picker-border-color)',
19981
20255
  '--epr-bg-color': 'var(--epr-dark-bg-color)',
20256
+ '--epr-reactions-bg-color': 'var(--epr-dark-reactions-bg-color)',
19982
20257
  '--epr-search-input-bg-color-active': 'var(--epr-dark-search-input-bg-color-active)',
19983
20258
  '--epr-emoji-variation-indicator-color': 'var(--epr-dark-emoji-variation-indicator-color)',
19984
20259
  '--epr-category-icon-active-color': 'var(--epr-dark-category-icon-active-color)',
19985
20260
  '--epr-skin-tone-picker-menu-color': 'var(--epr-dark-skin-tone-picker-menu-color)'
19986
20261
  };
19987
- var styles$d = /*#__PURE__*/stylesheet.create({
20262
+ var styles$j = /*#__PURE__*/stylesheet.create({
19988
20263
  main: {
19989
20264
  '.': ['epr-main', ClassNames.emojiPicker],
19990
20265
  position: 'relative',
@@ -19996,6 +20271,7 @@ var styles$d = /*#__PURE__*/stylesheet.create({
19996
20271
  borderColor: 'var(--epr-picker-border-color)',
19997
20272
  backgroundColor: 'var(--epr-bg-color)',
19998
20273
  overflow: 'hidden',
20274
+ transition: 'all 0.3s ease-in-out, background-color 0.1s ease-in-out',
19999
20275
  // @ts-expect-error - need to work on this
20000
20276
  '*': {
20001
20277
  boxSizing: 'border-box',
@@ -20011,6 +20287,7 @@ var styles$d = /*#__PURE__*/stylesheet.create({
20011
20287
  '--epr-search-input-bg-color': '#f6f6f6',
20012
20288
  '--epr-picker-border-color': '#e7e7e7',
20013
20289
  '--epr-bg-color': '#fff',
20290
+ '--epr-reactions-bg-color': '#ffffff90',
20014
20291
  '--epr-category-icon-active-color': '#6aa8de',
20015
20292
  '--epr-skin-tone-picker-menu-color': '#ffffff95',
20016
20293
  '--epr-horizontal-padding': '10px',
@@ -20071,6 +20348,7 @@ var styles$d = /*#__PURE__*/stylesheet.create({
20071
20348
  '--epr-dark-category-label-bg-color': '#222222e6',
20072
20349
  '--epr-dark-picker-border-color': '#151617',
20073
20350
  '--epr-dark-bg-color': '#222222',
20351
+ '--epr-dark-reactions-bg-color': '#22222290',
20074
20352
  '--epr-dark-search-input-bg-color-active': 'var(--epr-dark)',
20075
20353
  '--epr-dark-emoji-variation-indicator-color': '#444',
20076
20354
  '--epr-dark-category-icon-active-color': '#3271b7',
@@ -20086,18 +20364,42 @@ var styles$d = /*#__PURE__*/stylesheet.create({
20086
20364
  darkTheme: {
20087
20365
  '.': ClassNames.darkTheme,
20088
20366
  '--': DarkTheme
20367
+ },
20368
+ reactionsMenu: {
20369
+ '.': 'epr-reactions',
20370
+ height: '50px',
20371
+ display: 'inline-flex',
20372
+ backgroundColor: 'var(--epr-reactions-bg-color)',
20373
+ // @ts-expect-error - need to work on this
20374
+ backdropFilter: 'blur(8px)',
20375
+ '--': {
20376
+ '--epr-picker-border-radius': '50px'
20377
+ }
20089
20378
  }
20090
20379
  });
20091
20380
 
20092
20381
  function EmojiPicker(props) {
20093
- return createElement(ElementRefContextProvider, null, createElement(PickerConfigProvider, Object.assign({}, props), createElement(PickerMain, null, createElement(Header, null), createElement(Body, null), createElement(Preview, null))));
20382
+ return createElement(ElementRefContextProvider, null, createElement(PickerConfigProvider, Object.assign({}, props), createElement(PickerMain, null, createElement(ContentControl, null))));
20383
+ }
20384
+ function ContentControl() {
20385
+ var _useReactionsModeStat = useReactionsModeState(),
20386
+ reactionsDefaultOpen = _useReactionsModeStat[0];
20387
+ var _React$useState = useState(!reactionsDefaultOpen),
20388
+ renderAll = _React$useState[0],
20389
+ setRenderAll = _React$useState[1];
20390
+ useEffect(function () {
20391
+ if (!renderAll) {
20392
+ setRenderAll(true);
20393
+ }
20394
+ }, []);
20395
+ return createElement(Fragment, null, createElement(Reactions, null), renderAll ? createElement(Fragment, null, createElement(Header, null), createElement(Body, null), createElement(Preview, null)) : null);
20094
20396
  }
20095
20397
  // eslint-disable-next-line complexity
20096
20398
  var EmojiPickerReact = /*#__PURE__*/memo(EmojiPicker, function (prev, next) {
20097
20399
  var _prev$customEmojis, _next$customEmojis;
20098
20400
  var prevCustomEmojis = (_prev$customEmojis = prev.customEmojis) != null ? _prev$customEmojis : [];
20099
20401
  var nextCustomEmojis = (_next$customEmojis = next.customEmojis) != null ? _next$customEmojis : [];
20100
- return prev.emojiVersion === next.emojiVersion && prev.searchPlaceHolder === next.searchPlaceHolder && prev.searchPlaceholder === next.searchPlaceholder && prev.defaultSkinTone === next.defaultSkinTone && prev.skinTonesDisabled === next.skinTonesDisabled && prev.autoFocusSearch === next.autoFocusSearch && prev.emojiStyle === next.emojiStyle && prev.theme === next.theme && prev.suggestedEmojisMode === next.suggestedEmojisMode && prev.lazyLoadEmojis === next.lazyLoadEmojis && prev.className === next.className && prev.height === next.height && prev.width === next.width && prev.style === next.style && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation && prevCustomEmojis.length === nextCustomEmojis.length;
20402
+ return prev.emojiVersion === next.emojiVersion && prev.reactionsDefaultOpen === next.reactionsDefaultOpen && prev.searchPlaceHolder === next.searchPlaceHolder && prev.searchPlaceholder === next.searchPlaceholder && prev.defaultSkinTone === next.defaultSkinTone && prev.skinTonesDisabled === next.skinTonesDisabled && prev.autoFocusSearch === next.autoFocusSearch && prev.emojiStyle === next.emojiStyle && prev.theme === next.theme && prev.suggestedEmojisMode === next.suggestedEmojisMode && prev.lazyLoadEmojis === next.lazyLoadEmojis && prev.className === next.className && prev.height === next.height && prev.width === next.width && prev.style === next.style && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation && prevCustomEmojis.length === nextCustomEmojis.length;
20101
20403
  });
20102
20404
 
20103
20405
  var ErrorBoundary = /*#__PURE__*/function (_React$Component) {