@chayns-components/emoji-input 5.0.0-beta.576 → 5.0.0-beta.578

package/lib/cjs/components/emoji-input/EmojiInput.styles.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionEmojiInputProgress = exports.StyledMotionEmojiInputEditor = exports.StyledEmojiInputRightWrapper = exports.StyledEmojiInputLabel = exports.StyledEmojiInputContent = exports.StyledEmojiInput = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _font = require("../../utils/font");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledEmojiInput = exports.StyledEmojiInput = _styledComponents.default.div`
+    align-items: center;
+    background-color: ${({
+  theme,
+  $shouldChangeColor
+}) => theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
+    border-radius: 3px;
+    display: flex;
+    min-height: 42px;
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    pointer-events: ${({
+  $isDisabled
+}) => $isDisabled ? 'none' : 'initial'};
+    position: relative;
+    transition: opacity 0.3s ease;
+`;
+const StyledMotionEmojiInputProgress = exports.StyledMotionEmojiInputProgress = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    background-color: ${({
+  theme
+}) => theme['402']};
+    height: 100%;
+    position: absolute;
+    z-index: 2;
+    border-radius: 3px;
+`;
+const StyledEmojiInputContent = exports.StyledEmojiInputContent = _styledComponents.default.div`
+    align-items: end;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    border-radius: 3px;
+    display: flex;
+    flex: 1 1 auto;
+    gap: 10px;
+    padding: 8px 10px;
+    z-index: 3;
+
+    ${({
+  $isRightElementGiven
+}) => $isRightElementGiven && (0, _styledComponents.css)`
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right-width: 0;
+            padding-right: 0;
+        `}
+`;
+const StyledMotionEmojiInputEditor = exports.StyledMotionEmojiInputEditor = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    color: ${({
+  theme,
+  $shouldShowContent
+}) => $shouldShowContent ? theme.text : theme['100']};
+    flex: 1 1 auto;
+    font-family: ${_font.getFontFamily};
+    overflow-y: scroll;
+    overflow-x: hidden;
+    word-break: break-word;
+
+    // This fixes a bug where the field is not editable in certain browsers.
+    // This is for example the case on iOS 15 or older.
+    -webkit-user-modify: read-write;
+    -webkit-user-select: text;
+
+    lc_mention,
+    nerIgnore,
+    nerReplace {
+        font-weight: bold;
+
+        span {
+            opacity: 0.5;
+        }
+    }
+
+    // Styles for custom scrollbar
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? (0, _styledComponents.css)`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : (0, _styledComponents.css)`
+                  &::-webkit-scrollbar {
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                  }
+              `}
+`;
+const StyledEmojiInputRightWrapper = exports.StyledEmojiInputRightWrapper = _styledComponents.default.div`
+    align-self: stretch;
+    border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+    flex: 0 0 auto;
+    overflow: hidden;
+`;
+const StyledEmojiInputLabel = exports.StyledEmojiInputLabel = _styledComponents.default.label`
+    color: rgba(${({
+  theme
+}) => theme['text-rgb']}, 0.45);
+    left: ${({
+  $offsetWidth
+}) => $offsetWidth ? `${$offsetWidth + 10}px` : '10px'};
+    top: 12px;
+    align-items: baseline;
+    display: flex;
+    flex: 0 0 auto;
+    gap: 4px;
+    line-height: 1.3;
+    pointer-events: none;
+    position: absolute;
+    user-select: none;
+    white-space: nowrap;
+    max-width: ${({
+  $maxWidth,
+  $offsetWidth
+}) => `${$maxWidth - ($offsetWidth ?? 0)}px`};
+    overflow: hidden;
+`;
+//# sourceMappingURL=EmojiInput.styles.js.map

package/lib/cjs/components/emoji-input/EmojiInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiInput.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_font","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledEmojiInput","exports","styled","div","theme","$shouldChangeColor","colorMode","$isDisabled","StyledMotionEmojiInputProgress","motion","StyledEmojiInputContent","$isRightElementGiven","css","StyledMotionEmojiInputEditor","$shouldShowContent","text","getFontFamily","$browser","StyledEmojiInputRightWrapper","StyledEmojiInputLabel","label","$offsetWidth","$maxWidth"],"sources":["../../../../src/components/emoji-input/EmojiInput.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { getFontFamily } from '../../utils/font';\n\ntype StyledEmojiInputProps = WithTheme<{ $isDisabled?: boolean; $shouldChangeColor: boolean }>;\n\nexport const StyledEmojiInput = styled.div<StyledEmojiInputProps>`\n    align-items: center;\n    background-color: ${({ theme, $shouldChangeColor }: StyledEmojiInputProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    border-radius: 3px;\n    display: flex;\n    min-height: 42px;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    pointer-events: ${({ $isDisabled }) => ($isDisabled ? 'none' : 'initial')};\n    position: relative;\n    transition: opacity 0.3s ease;\n`;\n\ntype StyledMotionEmojiInputProgressProps = WithTheme<unknown>;\n\nexport const StyledMotionEmojiInputProgress = styled(\n    motion.div,\n)<StyledMotionEmojiInputProgressProps>`\n    background-color: ${({ theme }: StyledMotionEmojiInputProgressProps) => theme['402']};\n    height: 100%;\n    position: absolute;\n    z-index: 2;\n    border-radius: 3px;\n`;\n\ntype StyledEmojiInputContentProps = {\n    $isRightElementGiven: boolean;\n};\n\nexport const StyledEmojiInputContent = styled.div<StyledEmojiInputContentProps>`\n    align-items: end;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-radius: 3px;\n    display: flex;\n    flex: 1 1 auto;\n    gap: 10px;\n    padding: 8px 10px;\n    z-index: 3;\n\n    ${({ $isRightElementGiven }) =>\n        $isRightElementGiven &&\n        css`\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right-width: 0;\n            padding-right: 0;\n        `}\n`;\n\ntype StyledEmojiInputEditorProps = WithTheme<{\n    $shouldShowContent: boolean;\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledMotionEmojiInputEditor = styled(motion.div)<StyledEmojiInputEditorProps>`\n    color: ${({ theme, $shouldShowContent }: StyledEmojiInputEditorProps) =>\n        $shouldShowContent ? theme.text : theme['100']};\n    flex: 1 1 auto;\n    font-family: ${getFontFamily};\n    overflow-y: scroll;\n    overflow-x: hidden;\n    word-break: break-word;\n\n    // This fixes a bug where the field is not editable in certain browsers.\n    // This is for example the case on iOS 15 or older.\n    -webkit-user-modify: read-write;\n    -webkit-user-select: text;\n\n    lc_mention,\n    nerIgnore,\n    nerReplace {\n        font-weight: bold;\n\n        span {\n            opacity: 0.5;\n        }\n    }\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledEmojiInputEditorProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n\nexport const StyledEmojiInputRightWrapper = styled.div`\n    align-self: stretch;\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    flex: 0 0 auto;\n    overflow: hidden;\n`;\n\ntype StyledEmojiInputLabelProps = WithTheme<{\n    $maxWidth: number;\n    $offsetWidth?: number;\n}>;\n\nexport const StyledEmojiInputLabel = styled.label<StyledEmojiInputLabelProps>`\n    color: rgba(${({ theme }: StyledEmojiInputLabelProps) => theme['text-rgb']}, 0.45);\n    left: ${({ $offsetWidth }) => ($offsetWidth ? `${$offsetWidth + 10}px` : '10px')};\n    top: 12px;\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    white-space: nowrap;\n    max-width: ${({ $maxWidth, $offsetWidth }) => `${$maxWidth - ($offsetWidth ?? 0)}px`};\n    overflow: hidden;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/emoji-input/prefix-element/PrefixElement.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _text = require("../../../utils/text");
+var _PrefixElement = require("./PrefixElement.styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const PrefixElement = ({
+  prefixElementRef,
+  element,
+  setIsPrefixAnimationFinished
+}) => {
+  const [shouldShow, setShouldShow] = (0, _react.useState)(true);
+  const [prefixText, setPrefixText] = (0, _react.useState)('');
+  (0, _react.useEffect)(() => {
+    if (prefixElementRef.current) {
+      setPrefixText(prefixElementRef.current.textContent ?? '');
+    }
+  }, [prefixElementRef]);
+  const handleAnimationEnd = (0, _react.useCallback)(index => {
+    if (index === prefixText.length - 1) {
+      setShouldShow(false);
+      setIsPrefixAnimationFinished(true);
+    }
+  }, [prefixText.length, setIsPrefixAnimationFinished]);
+  const content = (0, _react.useMemo)(() => prefixText.split('').map((letter, index) => /*#__PURE__*/_react.default.createElement(_PrefixElement.StyledPrefixElementLetter, {
+    onAnimationEnd: () => handleAnimationEnd(index),
+    $index: index
+  }, letter)), [handleAnimationEnd, prefixText]);
+  return /*#__PURE__*/_react.default.createElement(_PrefixElement.StyledPrefixElement, {
+    $shouldShow: shouldShow
+  }, /*#__PURE__*/_react.default.createElement(_PrefixElement.StyledPrefixElementPseudo, {
+    ref: prefixElementRef,
+    dangerouslySetInnerHTML: {
+      __html: (0, _text.convertTextToHTML)(element)
+    }
+  }), shouldShow && /*#__PURE__*/_react.default.createElement(_PrefixElement.StyledPrefixElementLetterWrapper, null, content));
+};
+PrefixElement.displayName = 'PrefixElement';
+var _default = exports.default = PrefixElement;
+//# sourceMappingURL=PrefixElement.js.map

package/lib/cjs/components/emoji-input/prefix-element/PrefixElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrefixElement.js","names":["_react","_interopRequireWildcard","require","_text","_PrefixElement","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","PrefixElement","prefixElementRef","element","setIsPrefixAnimationFinished","shouldShow","setShouldShow","useState","prefixText","setPrefixText","useEffect","current","textContent","handleAnimationEnd","useCallback","index","length","content","useMemo","split","map","letter","createElement","StyledPrefixElementLetter","onAnimationEnd","$index","StyledPrefixElement","$shouldShow","StyledPrefixElementPseudo","ref","dangerouslySetInnerHTML","__html","convertTextToHTML","StyledPrefixElementLetterWrapper","displayName","_default","exports"],"sources":["../../../../../src/components/emoji-input/prefix-element/PrefixElement.tsx"],"sourcesContent":["import React, {\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type Dispatch,\n    type FC,\n    type RefObject,\n    type SetStateAction,\n} from 'react';\nimport { convertTextToHTML } from '../../../utils/text';\nimport {\n    StyledPrefixElement,\n    StyledPrefixElementLetter,\n    StyledPrefixElementLetterWrapper,\n    StyledPrefixElementPseudo,\n} from './PrefixElement.styles';\n\nexport type PrefixElementProps = {\n    prefixElementRef: RefObject<HTMLDivElement>;\n    element: string;\n    setIsPrefixAnimationFinished: Dispatch<SetStateAction<boolean>>;\n};\n\nconst PrefixElement: FC<PrefixElementProps> = ({\n    prefixElementRef,\n    element,\n    setIsPrefixAnimationFinished,\n}) => {\n    const [shouldShow, setShouldShow] = useState(true);\n    const [prefixText, setPrefixText] = useState('');\n\n    useEffect(() => {\n        if (prefixElementRef.current) {\n            setPrefixText(prefixElementRef.current.textContent ?? '');\n        }\n    }, [prefixElementRef]);\n\n    const handleAnimationEnd = useCallback(\n        (index: number) => {\n            if (index === prefixText.length - 1) {\n                setShouldShow(false);\n                setIsPrefixAnimationFinished(true);\n            }\n        },\n        [prefixText.length, setIsPrefixAnimationFinished],\n    );\n\n    const content = useMemo(\n        () =>\n            prefixText.split('').map((letter, index) => (\n                <StyledPrefixElementLetter\n                    onAnimationEnd={() => handleAnimationEnd(index)}\n                    $index={index}\n                >\n                    {letter}\n                </StyledPrefixElementLetter>\n            )),\n        [handleAnimationEnd, prefixText],\n    );\n\n    return (\n        <StyledPrefixElement $shouldShow={shouldShow}>\n            <StyledPrefixElementPseudo\n                ref={prefixElementRef}\n                dangerouslySetInnerHTML={{ __html: convertTextToHTML(element) }}\n            />\n            {shouldShow && (\n                <StyledPrefixElementLetterWrapper>{content}</StyledPrefixElementLetterWrapper>\n            )}\n        </StyledPrefixElement>\n    );\n};\n\nPrefixElement.displayName = 'PrefixElement';\n\nexport default PrefixElement;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/emoji-input/prefix-element/PrefixElement.styles.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledPrefixElementPseudo = exports.StyledPrefixElementLetterWrapper = exports.StyledPrefixElementLetter = exports.StyledPrefixElement = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledPrefixElement = exports.StyledPrefixElement = _styledComponents.default.div`
+    position: absolute;
+`;
+const StyledPrefixElementPseudo = exports.StyledPrefixElementPseudo = _styledComponents.default.div`
+    visibility: hidden;
+`;
+const StyledPrefixElementLetterWrapper = exports.StyledPrefixElementLetterWrapper = _styledComponents.default.div`
+    transform: translateY(-2px);
+`;
+const waviy = (0, _styledComponents.keyframes)`
+    0%, 40% {
+        background: linear-gradient(to right, rgb(15, 109, 126), rgb(15, 109, 126), rgb(115, 190, 204), rgb(15, 109, 126));
+        background-clip: text;
+        transform: translateY(0) scale(1);
+        opacity: 1;
+    }
+    20% {
+        transform: translateY(-2px) scale(1.2);
+        opacity: 1;
+    }
+    100% {
+        -webkit-text-fill-color: ${({
+  theme
+}) => theme.text};
+        transform: translateY(0) scale(1);
+        opacity: 1;
+    }
+`;
+const backgroundPan = (0, _styledComponents.keyframes)`
+    0% {
+        background-position: 0 center;
+    }
+    100% {
+        background-position: -200% center;
+    }
+`;
+const StyledPrefixElementLetter = exports.StyledPrefixElementLetter = _styledComponents.default.span`
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-color: ${({
+  theme
+}) => theme.text};
+    opacity: 0;
+
+    animation:
+        ${waviy} 0.4s forwards,
+        ${backgroundPan} 0.1s linear infinite;
+    animation-delay: calc(0.03s * ${({
+  $index
+}) => $index});
+
+    font-weight: ${({
+  $index
+}) => $index > 0 ? 'bold' : 'normal'};
+`;
+//# sourceMappingURL=PrefixElement.styles.js.map

package/lib/cjs/components/emoji-input/prefix-element/PrefixElement.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrefixElement.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledPrefixElement","exports","styled","div","StyledPrefixElementPseudo","StyledPrefixElementLetterWrapper","waviy","keyframes","theme","text","backgroundPan","StyledPrefixElementLetter","span","$index"],"sources":["../../../../../src/components/emoji-input/prefix-element/PrefixElement.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { keyframes } from 'styled-components';\n\ntype StyledPrefixElementProps = WithTheme<{\n    $shouldShow: boolean;\n}>;\n\nexport const StyledPrefixElement = styled.div<StyledPrefixElementProps>`\n    position: absolute;\n`;\n\nexport const StyledPrefixElementPseudo = styled.div`\n    visibility: hidden;\n`;\n\nexport const StyledPrefixElementLetterWrapper = styled.div`\n    transform: translateY(-2px);\n`;\n\ntype StyledPrefixElementLetterProps = WithTheme<{\n    $index: number;\n}>;\n\nconst waviy = keyframes`\n    0%, 40% {\n        background: linear-gradient(to right, rgb(15, 109, 126), rgb(15, 109, 126), rgb(115, 190, 204), rgb(15, 109, 126));\n        background-clip: text;\n        transform: translateY(0) scale(1);\n        opacity: 1;\n    }\n    20% {\n        transform: translateY(-2px) scale(1.2);\n        opacity: 1;\n    }\n    100% {\n        -webkit-text-fill-color: ${({ theme }: WithTheme<unknown>) => theme.text};\n        transform: translateY(0) scale(1);\n        opacity: 1;\n    }\n`;\n\nconst backgroundPan = keyframes`\n    0% {\n        background-position: 0 center;\n    }\n    100% {\n        background-position: -200% center;\n    }\n`;\n\nexport const StyledPrefixElementLetter = styled.span<StyledPrefixElementLetterProps>`\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-color: ${({ theme }: StyledPrefixElementLetterProps) => theme.text};\n    opacity: 0;\n\n    animation:\n        ${waviy} 0.4s forwards,\n        ${backgroundPan} 0.1s linear infinite;\n    animation-delay: calc(0.03s * ${({ $index }) => $index});\n\n    font-weight: ${({ $index }) => ($index > 0 ? 'bold' : 'normal')};\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAsD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAM/C,MAAMW,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA8B;AACxE;AACA,CAAC;AAEM,MAAMC,yBAAyB,GAAAH,OAAA,CAAAG,yBAAA,GAAGF,yBAAM,CAACC,GAAI;AACpD;AACA,CAAC;AAEM,MAAME,gCAAgC,GAAAJ,OAAA,CAAAI,gCAAA,GAAGH,yBAAM,CAACC,GAAI;AAC3D;AACA,CAAC;AAMD,MAAMG,KAAK,GAAG,IAAAC,2BAAS,CAAC;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mCAAmC,CAAC;EAAEC;AAA0B,CAAC,KAAKA,KAAK,CAACC,IAAK;AACjF;AACA;AACA;AACA,CAAC;AAED,MAAMC,aAAa,GAAG,IAAAH,2BAAS,CAAC;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMI,yBAAyB,GAAAV,OAAA,CAAAU,yBAAA,GAAGT,yBAAM,CAACU,IAAqC;AACrF;AACA;AACA,wBAAwB,CAAC;EAAEJ;AAAsC,CAAC,KAAKA,KAAK,CAACC,IAAK;AAClF;AACA;AACA;AACA,UAAUH,KAAM;AAChB,UAAUI,aAAc;AACxB,oCAAoC,CAAC;EAAEG;AAAO,CAAC,KAAKA,MAAO;AAC3D;AACA,mBAAmB,CAAC;EAAEA;AAAO,CAAC,KAAMA,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,QAAU;AACpE,CAAC","ignoreList":[]}

package/lib/cjs/components/emoji-picker/EmojiPicker.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _core = require("@chayns-components/core");
+var _react = _interopRequireWildcard(require("react"));
+var _dataByGroup = _interopRequireDefault(require("unicode-emoji-json/data-by-group.json"));
+var _EmojiPickerCategories = _interopRequireDefault(require("./emoji-picker-categories/EmojiPickerCategories"));
+var _EmojiPickerEmojis = _interopRequireDefault(require("./emoji-picker-emojis/EmojiPickerEmojis"));
+var _EmojiPicker = require("./EmojiPicker.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const EmojiPicker = ({
+  accessToken,
+  onSelect,
+  personId
+}) => {
+  var _emojiCategories$;
+  const [searchString, setSearchString] = (0, _react.useState)('');
+  const [selectedCategory, setSelectedCategory] = (0, _react.useState)((_emojiCategories$ = _dataByGroup.default[0]) === null || _emojiCategories$ === void 0 ? void 0 : _emojiCategories$.slug);
+  const handleCategorySelect = (0, _react.useCallback)(category => {
+    setSearchString('');
+    setSelectedCategory(category);
+  }, []);
+  const handleSearchChange = (0, _react.useCallback)(event => {
+    setSearchString(event.target.value);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_EmojiPicker.StyledEmojiPicker, null, /*#__PURE__*/_react.default.createElement(_core.Input, {
+    onChange: handleSearchChange,
+    placeholder: "Suchen",
+    value: searchString
+  }), /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.default, {
+    accessToken: accessToken,
+    onSelect: onSelect,
+    personId: personId,
+    searchString: searchString,
+    selectedCategory: selectedCategory
+  }), /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.default, {
+    onSelect: handleCategorySelect,
+    searchString: searchString,
+    selectedCategory: selectedCategory
+  }));
+};
+EmojiPicker.displayName = 'EmojiPicker';
+var _default = exports.default = EmojiPicker;
+//# sourceMappingURL=EmojiPicker.js.map

package/lib/cjs/components/emoji-picker/EmojiPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.js","names":["_core","require","_react","_interopRequireWildcard","_dataByGroup","_interopRequireDefault","_EmojiPickerCategories","_EmojiPickerEmojis","_EmojiPicker","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","EmojiPicker","accessToken","onSelect","personId","_emojiCategories$","searchString","setSearchString","useState","selectedCategory","setSelectedCategory","emojiCategories","slug","handleCategorySelect","useCallback","category","handleSearchChange","event","target","value","createElement","StyledEmojiPicker","Input","onChange","placeholder","displayName","_default","exports"],"sources":["../../../../src/components/emoji-picker/EmojiPicker.tsx"],"sourcesContent":["import { Input } from '@chayns-components/core';\nimport React, { ChangeEvent, FC, useCallback, useState } from 'react';\nimport emojiCategories from 'unicode-emoji-json/data-by-group.json';\nimport type { Category } from '../../types/category';\nimport EmojiPickerCategories from './emoji-picker-categories/EmojiPickerCategories';\nimport EmojiPickerEmojis from './emoji-picker-emojis/EmojiPickerEmojis';\nimport { StyledEmojiPicker } from './EmojiPicker.styles';\n\nexport type EmojiPickerProps = {\n    /**\n     * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    accessToken?: string;\n    /**\n     * Function executed when an emoji is selected in the popup\n     * @param {string} emoji - Emoji that was selected\n     */\n    onSelect: (emoji: string) => void;\n    /**\n     * Person id of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    personId?: string;\n};\nconst EmojiPicker: FC<EmojiPickerProps> = ({ accessToken, onSelect, personId }) => {\n    const [searchString, setSearchString] = useState('');\n    const [selectedCategory, setSelectedCategory] = useState(emojiCategories[0]?.slug as Category);\n\n    const handleCategorySelect = useCallback((category: Category) => {\n        setSearchString('');\n        setSelectedCategory(category);\n    }, []);\n\n    const handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n        setSearchString(event.target.value);\n    }, []);\n\n    return (\n        <StyledEmojiPicker>\n            <Input onChange={handleSearchChange} placeholder=\"Suchen\" value={searchString} />\n            <EmojiPickerEmojis\n                accessToken={accessToken}\n                onSelect={onSelect}\n                personId={personId}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n            <EmojiPickerCategories\n                onSelect={handleCategorySelect}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n        </StyledEmojiPicker>\n    );\n};\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/emoji-picker/EmojiPicker.styles.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emojiPickerSize = exports.StyledEmojiPicker = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const emojiPickerSize = exports.emojiPickerSize = {
+  height: 285,
+  width: 350
+};
+const StyledEmojiPicker = exports.StyledEmojiPicker = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: ${emojiPickerSize.height}px;
+    justify-content: center;
+    padding: 10px 22px;
+    width: ${emojiPickerSize.width}px;
+    user-select: none;
+`;
+//# sourceMappingURL=EmojiPicker.styles.js.map

package/lib/cjs/components/emoji-picker/EmojiPicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","emojiPickerSize","exports","height","width","StyledEmojiPicker","styled","div"],"sources":["../../../../src/components/emoji-picker/EmojiPicker.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const emojiPickerSize = {\n    height: 285,\n    width: 350,\n};\n\nexport const StyledEmojiPicker = styled.div`\n    align-items: center;\n    display: flex;\n    flex-direction: column;\n    height: ${emojiPickerSize.height}px;\n    justify-content: center;\n    padding: 10px 22px;\n    width: ${emojiPickerSize.width}px;\n    user-select: none;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG;EAC3BE,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE;AACX,CAAC;AAEM,MAAMC,iBAAiB,GAAAH,OAAA,CAAAG,iBAAA,GAAGC,yBAAM,CAACC,GAAI;AAC5C;AACA;AACA;AACA,cAAcN,eAAe,CAACE,MAAO;AACrC;AACA;AACA,aAAaF,eAAe,CAACG,KAAM;AACnC;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _dataByGroup = _interopRequireDefault(require("unicode-emoji-json/data-by-group.json"));
+var _categories = require("../../../constants/categories");
+var _EmojiPickerCategories = require("./EmojiPickerCategories.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const EmojiPickerCategories = ({
+  onSelect,
+  searchString,
+  selectedCategory
+}) => {
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(1);
+  const categoryRef = (0, _react.useRef)(null);
+  const isSearchStringGiven = searchString.trim() !== '';
+  const handleSelect = (0, _react.useCallback)(slug => {
+    onSelect(slug);
+  }, [onSelect]);
+  (0, _react.useEffect)(() => {
+    const handleKeyDown = event => {
+      if (event.key === 'Tab' || event.key === 'Tab' && event.shiftKey) {
+        var _categoryRef$current;
+        event.preventDefault();
+        const children = (_categoryRef$current = categoryRef.current) === null || _categoryRef$current === void 0 ? void 0 : _categoryRef$current.children;
+        if (children && children.length > 0) {
+          let newIndex = focusedIndex !== null ? focusedIndex : 0;
+          if (event.key === 'Tab' && event.shiftKey) {
+            newIndex = (newIndex - 1) % children.length;
+          } else if (event.key === 'Tab') {
+            newIndex = (newIndex + 1) % children.length;
+          }
+
+          // remove focus from the old element
+          if (focusedIndex !== null) {
+            const prevElement = children[focusedIndex];
+            prevElement.tabIndex = -1;
+          }
+          if (newIndex < 0) {
+            newIndex = children.length - 1;
+          } else if (newIndex > children.length - 1) {
+            newIndex = 0;
+          }
+          setFocusedIndex(newIndex);
+
+          // Set focus to the element
+          const newElement = children[newIndex];
+          newElement.tabIndex = 0;
+          newElement.focus();
+          if (!newElement) {
+            return;
+          }
+          const {
+            id
+          } = newElement;
+          handleSelect(id);
+        }
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [focusedIndex, handleSelect]);
+  const handleClick = (0, _react.useCallback)(slug => {
+    handleSelect(slug);
+  }, [handleSelect]);
+  const categories = (0, _react.useMemo)(() => {
+    const categorySlugs = _dataByGroup.default.map(({
+      slug
+    }) => slug);
+    categorySlugs.unshift('history');
+    return categorySlugs.map(slug => {
+      const isSelected = selectedCategory === slug && !isSearchStringGiven;
+      return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.StyledMotionEmojiPickerCategory, {
+        animate: {
+          filter: `grayscale(${isSelected ? 0 : 0.75})`,
+          opacity: isSelected ? 1 : 0.5
+        },
+        className: "prevent-lose-focus",
+        initial: false,
+        key: slug,
+        id: slug,
+        onClick: () => handleClick(slug),
+        transition: {
+          duration: 0.2
+        }
+      }, _categories.CATEGORY_EMOJIS[slug]);
+    });
+  }, [handleClick, isSearchStringGiven, selectedCategory]);
+  return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.StyledEmojiPickerCategories, {
+    ref: categoryRef
+  }, categories);
+};
+EmojiPickerCategories.displayName = 'EmojiPickerCategories';
+var _default = exports.default = EmojiPickerCategories;
+//# sourceMappingURL=EmojiPickerCategories.js.map

package/lib/cjs/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerCategories.js","names":["_react","_interopRequireWildcard","require","_dataByGroup","_interopRequireDefault","_categories","_EmojiPickerCategories","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","EmojiPickerCategories","onSelect","searchString","selectedCategory","focusedIndex","setFocusedIndex","useState","categoryRef","useRef","isSearchStringGiven","trim","handleSelect","useCallback","slug","useEffect","handleKeyDown","event","key","shiftKey","_categoryRef$current","preventDefault","children","current","length","newIndex","prevElement","tabIndex","newElement","focus","id","document","addEventListener","removeEventListener","handleClick","categories","useMemo","categorySlugs","unicodeEmoji","map","unshift","isSelected","createElement","StyledMotionEmojiPickerCategory","animate","filter","opacity","className","initial","onClick","transition","duration","CATEGORY_EMOJIS","StyledEmojiPickerCategories","ref","displayName","_default","exports"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport unicodeEmoji from 'unicode-emoji-json/data-by-group.json';\nimport { CATEGORY_EMOJIS } from '../../../constants/categories';\nimport type { Category } from '../../../types/category';\nimport {\n    StyledEmojiPickerCategories,\n    StyledMotionEmojiPickerCategory,\n} from './EmojiPickerCategories.styles';\n\nexport type EmojiPickerCategoriesProps = {\n    onSelect: (category: Category) => void;\n    searchString: string;\n    selectedCategory: Category;\n};\n\nconst EmojiPickerCategories: FC<EmojiPickerCategoriesProps> = ({\n    onSelect,\n    searchString,\n    selectedCategory,\n}) => {\n    const [focusedIndex, setFocusedIndex] = useState(1);\n\n    const categoryRef = useRef<HTMLDivElement>(null);\n\n    const isSearchStringGiven = searchString.trim() !== '';\n\n    const handleSelect = useCallback(\n        (slug: Category) => {\n            onSelect(slug);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (event.key === 'Tab' || (event.key === 'Tab' && event.shiftKey)) {\n                event.preventDefault();\n\n                const children = categoryRef.current?.children;\n                if (children && children.length > 0) {\n                    let newIndex = focusedIndex !== null ? focusedIndex : 0;\n\n                    if (event.key === 'Tab' && event.shiftKey) {\n                        newIndex = (newIndex - 1) % children.length;\n                    } else if (event.key === 'Tab') {\n                        newIndex = (newIndex + 1) % children.length;\n                    }\n\n                    // remove focus from the old element\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    if (newIndex < 0) {\n                        newIndex = children.length - 1;\n                    } else if (newIndex > children.length - 1) {\n                        newIndex = 0;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    // Set focus to the element\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n\n                    if (!newElement) {\n                        return;\n                    }\n\n                    const { id } = newElement;\n\n                    handleSelect(id as Category);\n                }\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSelect]);\n\n    const handleClick = useCallback(\n        (slug: Category) => {\n            handleSelect(slug);\n        },\n        [handleSelect],\n    );\n\n    const categories = useMemo(() => {\n        const categorySlugs = unicodeEmoji.map(({ slug }) => slug);\n\n        categorySlugs.unshift('history');\n\n        return categorySlugs.map((slug) => {\n            const isSelected = selectedCategory === slug && !isSearchStringGiven;\n\n            return (\n                <StyledMotionEmojiPickerCategory\n                    animate={{\n                        filter: `grayscale(${isSelected ? 0 : 0.75})`,\n                        opacity: isSelected ? 1 : 0.5,\n                    }}\n                    className=\"prevent-lose-focus\"\n                    initial={false}\n                    key={slug}\n                    id={slug}\n                    onClick={() => handleClick(slug as Category)}\n                    transition={{ duration: 0.2 }}\n                >\n                    {CATEGORY_EMOJIS[slug as Category]}\n                </StyledMotionEmojiPickerCategory>\n            );\n        });\n    }, [handleClick, isSearchStringGiven, selectedCategory]);\n\n    return (\n        <StyledEmojiPickerCategories ref={categoryRef}>{categories}</StyledEmojiPickerCategories>\n    );\n};\n\nEmojiPickerCategories.displayName = 'EmojiPickerCategories';\n\nexport default EmojiPickerCategories;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionEmojiPickerCategory = exports.StyledEmojiPickerCategories = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _font = require("../../../utils/font");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledEmojiPickerCategories = exports.StyledEmojiPickerCategories = _styledComponents.default.div`
+    align-items: center;
+    border-top: 1px solid rgba(160, 160, 160, 0.3);
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: space-between;
+    padding-top: 10px;
+    width: 100%;
+`;
+const StyledMotionEmojiPickerCategory = exports.StyledMotionEmojiPickerCategory = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    cursor: pointer;
+    font-family: ${_font.getFontFamily};
+    font-size: 20px;
+`;
+//# sourceMappingURL=EmojiPickerCategories.styles.js.map

package/lib/cjs/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerCategories.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","_font","obj","__esModule","default","StyledEmojiPickerCategories","exports","styled","div","StyledMotionEmojiPickerCategory","motion","getFontFamily"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport { getFontFamily } from '../../../utils/font';\n\nexport const StyledEmojiPickerCategories = styled.div`\n    align-items: center;\n    border-top: 1px solid rgba(160, 160, 160, 0.3);\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: space-between;\n    padding-top: 10px;\n    width: 100%;\n`;\n\nexport const StyledMotionEmojiPickerCategory = styled(motion.div)<FramerMotionBugFix>`\n    cursor: pointer;\n    font-family: ${getFontFamily};\n    font-size: 20px;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAAoD,SAAAE,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAE7C,MAAMG,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAGE,yBAAM,CAACC,GAAI;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,+BAA+B,GAAAH,OAAA,CAAAG,+BAAA,GAAG,IAAAF,yBAAM,EAACG,oBAAM,CAACF,GAAG,CAAsB;AACtF;AACA,mBAAmBG,mBAAc;AACjC;AACA,CAAC","ignoreList":[]}