@chayns-components/emoji-input 5.0.0-beta.96 → 5.0.0-beta.964

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

@@ -0,0 +1,151 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+import { getFontFamily } from '../../utils/font';
+export const StyledEmojiInput = styled.div`
+    align-items: center;
+    background-color: ${_ref => {
+  let {
+    theme,
+    $shouldChangeColor
+  } = _ref;
+  return theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'];
+}};
+    border-radius: 3px;
+    display: flex;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    min-height: 42px;
+    opacity: ${_ref2 => {
+  let {
+    $isDisabled
+  } = _ref2;
+  return $isDisabled ? 0.5 : 1;
+}};
+    pointer-events: ${_ref3 => {
+  let {
+    $isDisabled
+  } = _ref3;
+  return $isDisabled ? 'none' : 'initial';
+}};
+    position: relative;
+    transition: opacity 0.3s ease;
+`;
+export const StyledMotionEmojiInputProgress = styled(motion.div)`
+    background-color: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme['402'];
+}};
+    height: 100%;
+    position: absolute;
+    z-index: 2;
+    border-radius: 3px;
+`;
+export const StyledEmojiInputContent = styled.div`
+    align-items: end;
+    border-radius: 3px;
+    display: flex;
+    flex: 1 1 auto;
+    gap: 10px;
+    padding: 8px 10px;
+    z-index: 3;
+`;
+export const StyledMotionEmojiInputEditor = styled(motion.div)`
+    color: ${_ref5 => {
+  let {
+    theme,
+    $shouldShowContent
+  } = _ref5;
+  return $shouldShowContent ? theme.text : theme['100'];
+}};
+    flex: 1 1 auto;
+    font-family: ${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
+    ${_ref6 => {
+  let {
+    $browser,
+    theme
+  } = _ref6;
+  return $browser === 'firefox' ? css`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : 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;
+                  }
+              `;
+}}
+`;
+export const StyledEmojiInputRightWrapper = styled.div`
+    align-self: stretch;
+    border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+    flex: 0 0 auto;
+    overflow: hidden;
+`;
+export const StyledEmojiInputLabel = styled.label`
+    color: rgba(${_ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme['text-rgb'];
+}}, 0.45);
+    left: ${_ref8 => {
+  let {
+    $offsetWidth
+  } = _ref8;
+  return $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: ${_ref9 => {
+  let {
+    $maxWidth,
+    $offsetWidth
+  } = _ref9;
+  return `${$maxWidth - ($offsetWidth ?? 0)}px`;
+}};
+    overflow: hidden;
+`;
+//# sourceMappingURL=EmojiInput.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiInput.styles.js","names":["motion","styled","css","getFontFamily","StyledEmojiInput","div","_ref","theme","$shouldChangeColor","colorMode","_ref2","$isDisabled","_ref3","StyledMotionEmojiInputProgress","_ref4","StyledEmojiInputContent","StyledMotionEmojiInputEditor","_ref5","$shouldShowContent","text","_ref6","$browser","StyledEmojiInputRightWrapper","StyledEmojiInputLabel","label","_ref7","_ref8","$offsetWidth","_ref9","$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    border: 1px solid rgba(160, 160, 160, 0.3);\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\nexport const StyledEmojiInputContent = styled.div`\n    align-items: end;\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\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/esm/components/emoji-input/prefix-element/PrefixElement.js

@@ -0,0 +1,38 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { convertTextToHTML } from '../../../utils/text';
+import { StyledPrefixElement, StyledPrefixElementLetter, StyledPrefixElementLetterWrapper, StyledPrefixElementPseudo } from './PrefixElement.styles';
+const PrefixElement = _ref => {
+  let {
+    prefixElementRef,
+    element,
+    setIsPrefixAnimationFinished
+  } = _ref;
+  const [shouldShow, setShouldShow] = useState(true);
+  const [prefixText, setPrefixText] = useState('');
+  useEffect(() => {
+    if (prefixElementRef.current) {
+      setPrefixText(prefixElementRef.current.textContent ?? '');
+    }
+  }, [prefixElementRef]);
+  const handleAnimationEnd = useCallback(index => {
+    if (index === prefixText.length - 1) {
+      setShouldShow(false);
+      setIsPrefixAnimationFinished(true);
+    }
+  }, [prefixText.length, setIsPrefixAnimationFinished]);
+  const content = useMemo(() => prefixText.split('').map((letter, index) => /*#__PURE__*/React.createElement(StyledPrefixElementLetter, {
+    onAnimationEnd: () => handleAnimationEnd(index),
+    $index: index
+  }, letter)), [handleAnimationEnd, prefixText]);
+  return /*#__PURE__*/React.createElement(StyledPrefixElement, {
+    $shouldShow: shouldShow
+  }, /*#__PURE__*/React.createElement(StyledPrefixElementPseudo, {
+    ref: prefixElementRef,
+    dangerouslySetInnerHTML: {
+      __html: convertTextToHTML(element)
+    }
+  }), shouldShow && /*#__PURE__*/React.createElement(StyledPrefixElementLetterWrapper, null, content));
+};
+PrefixElement.displayName = 'PrefixElement';
+export default PrefixElement;
+//# sourceMappingURL=PrefixElement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrefixElement.js","names":["React","useCallback","useEffect","useMemo","useState","convertTextToHTML","StyledPrefixElement","StyledPrefixElementLetter","StyledPrefixElementLetterWrapper","StyledPrefixElementPseudo","PrefixElement","_ref","prefixElementRef","element","setIsPrefixAnimationFinished","shouldShow","setShouldShow","prefixText","setPrefixText","current","textContent","handleAnimationEnd","index","length","content","split","map","letter","createElement","onAnimationEnd","$index","$shouldShow","ref","dangerouslySetInnerHTML","__html","displayName"],"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":"AAAA,OAAOA,KAAK,IACRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,QAAQ,QAKL,OAAO;AACd,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SACIC,mBAAmB,EACnBC,yBAAyB,EACzBC,gCAAgC,EAChCC,yBAAyB,QACtB,wBAAwB;AAQ/B,MAAMC,aAAqC,GAAGC,IAAA,IAIxC;EAAA,IAJyC;IAC3CC,gBAAgB;IAChBC,OAAO;IACPC;EACJ,CAAC,GAAAH,IAAA;EACG,MAAM,CAACI,UAAU,EAAEC,aAAa,CAAC,GAAGZ,QAAQ,CAAC,IAAI,CAAC;EAClD,MAAM,CAACa,UAAU,EAAEC,aAAa,CAAC,GAAGd,QAAQ,CAAC,EAAE,CAAC;EAEhDF,SAAS,CAAC,MAAM;IACZ,IAAIU,gBAAgB,CAACO,OAAO,EAAE;MAC1BD,aAAa,CAACN,gBAAgB,CAACO,OAAO,CAACC,WAAW,IAAI,EAAE,CAAC;IAC7D;EACJ,CAAC,EAAE,CAACR,gBAAgB,CAAC,CAAC;EAEtB,MAAMS,kBAAkB,GAAGpB,WAAW,CACjCqB,KAAa,IAAK;IACf,IAAIA,KAAK,KAAKL,UAAU,CAACM,MAAM,GAAG,CAAC,EAAE;MACjCP,aAAa,CAAC,KAAK,CAAC;MACpBF,4BAA4B,CAAC,IAAI,CAAC;IACtC;EACJ,CAAC,EACD,CAACG,UAAU,CAACM,MAAM,EAAET,4BAA4B,CACpD,CAAC;EAED,MAAMU,OAAO,GAAGrB,OAAO,CACnB,MACIc,UAAU,CAACQ,KAAK,CAAC,EAAE,CAAC,CAACC,GAAG,CAAC,CAACC,MAAM,EAAEL,KAAK,kBACnCtB,KAAA,CAAA4B,aAAA,CAACrB,yBAAyB;IACtBsB,cAAc,EAAEA,CAAA,KAAMR,kBAAkB,CAACC,KAAK,CAAE;IAChDQ,MAAM,EAAER;EAAM,GAEbK,MACsB,CAC9B,CAAC,EACN,CAACN,kBAAkB,EAAEJ,UAAU,CACnC,CAAC;EAED,oBACIjB,KAAA,CAAA4B,aAAA,CAACtB,mBAAmB;IAACyB,WAAW,EAAEhB;EAAW,gBACzCf,KAAA,CAAA4B,aAAA,CAACnB,yBAAyB;IACtBuB,GAAG,EAAEpB,gBAAiB;IACtBqB,uBAAuB,EAAE;MAAEC,MAAM,EAAE7B,iBAAiB,CAACQ,OAAO;IAAE;EAAE,CACnE,CAAC,EACDE,UAAU,iBACPf,KAAA,CAAA4B,aAAA,CAACpB,gCAAgC,QAAEgB,OAA0C,CAEhE,CAAC;AAE9B,CAAC;AAEDd,aAAa,CAACyB,WAAW,GAAG,eAAe;AAE3C,eAAezB,aAAa","ignoreList":[]}

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

@@ -0,0 +1,69 @@
+import styled, { keyframes } from 'styled-components';
+export const StyledPrefixElement = styled.div`
+    position: absolute;
+`;
+export const StyledPrefixElementPseudo = styled.div`
+    visibility: hidden;
+`;
+export const StyledPrefixElementLetterWrapper = styled.div`
+    transform: translateY(-2px);
+`;
+const waviy = 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: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.text;
+}};
+        transform: translateY(0) scale(1);
+        opacity: 1;
+    }
+`;
+const backgroundPan = keyframes`
+    0% {
+        background-position: 0 center;
+    }
+    100% {
+        background-position: -200% center;
+    }
+`;
+export const StyledPrefixElementLetter = styled.span`
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.text;
+}};
+    opacity: 0;
+
+    animation:
+        ${waviy} 0.4s forwards,
+        ${backgroundPan} 0.1s linear infinite;
+    animation-delay: calc(0.03s * ${_ref3 => {
+  let {
+    $index
+  } = _ref3;
+  return $index;
+}});
+
+    font-weight: ${_ref4 => {
+  let {
+    $index
+  } = _ref4;
+  return $index > 0 ? 'bold' : 'normal';
+}};
+`;
+//# sourceMappingURL=PrefixElement.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrefixElement.styles.js","names":["styled","keyframes","StyledPrefixElement","div","StyledPrefixElementPseudo","StyledPrefixElementLetterWrapper","waviy","_ref","theme","text","backgroundPan","StyledPrefixElementLetter","span","_ref2","_ref3","$index","_ref4"],"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,OAAOA,MAAM,IAAIC,SAAS,QAAQ,mBAAmB;AAMrD,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA6B;AACvE;AACA,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGJ,MAAM,CAACG,GAAG;AACnD;AACA,CAAC;AAED,OAAO,MAAME,gCAAgC,GAAGL,MAAM,CAACG,GAAG;AAC1D;AACA,CAAC;AAMD,MAAMG,KAAK,GAAGL,SAAS;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mCAAmCM,IAAA;EAAA,IAAC;IAAEC;EAA0B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA;AAChF;AACA;AACA;AACA,CAAC;AAED,MAAMC,aAAa,GAAGT,SAAS;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMU,yBAAyB,GAAGX,MAAM,CAACY,IAAoC;AACpF;AACA;AACA,wBAAwBC,KAAA;EAAA,IAAC;IAAEL;EAAsC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAACC,IAAI;AAAA;AACjF;AACA;AACA;AACA,UAAUH,KAAK;AACf,UAAUI,aAAa;AACvB,oCAAoCI,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AAC1D;AACA,mBAAmBC,KAAA;EAAA,IAAC;IAAED;EAAO,CAAC,GAAAC,KAAA;EAAA,OAAMD,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC;AACnE,CAAC","ignoreList":[]}

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

@@ -0,0 +1,40 @@
+import { Input } from '@chayns-components/core';
+import React, { useCallback, useState } from 'react';
+import emojiCategories from 'unicode-emoji-json/data-by-group.json';
+import EmojiPickerCategories from './emoji-picker-categories/EmojiPickerCategories';
+import EmojiPickerEmojis from './emoji-picker-emojis/EmojiPickerEmojis';
+import { StyledEmojiPicker } from './EmojiPicker.styles';
+const EmojiPicker = _ref => {
+  let {
+    accessToken,
+    onSelect,
+    personId
+  } = _ref;
+  const [searchString, setSearchString] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState(emojiCategories[0]?.slug);
+  const handleCategorySelect = useCallback(category => {
+    setSearchString('');
+    setSelectedCategory(category);
+  }, []);
+  const handleSearchChange = useCallback(event => {
+    setSearchString(event.target.value);
+  }, []);
+  return /*#__PURE__*/React.createElement(StyledEmojiPicker, null, /*#__PURE__*/React.createElement(Input, {
+    onChange: handleSearchChange,
+    placeholder: "Suchen",
+    value: searchString
+  }), /*#__PURE__*/React.createElement(EmojiPickerEmojis, {
+    accessToken: accessToken,
+    onSelect: onSelect,
+    personId: personId,
+    searchString: searchString,
+    selectedCategory: selectedCategory
+  }), /*#__PURE__*/React.createElement(EmojiPickerCategories, {
+    onSelect: handleCategorySelect,
+    searchString: searchString,
+    selectedCategory: selectedCategory
+  }));
+};
+EmojiPicker.displayName = 'EmojiPicker';
+export default EmojiPicker;
+//# sourceMappingURL=EmojiPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.js","names":["Input","React","useCallback","useState","emojiCategories","EmojiPickerCategories","EmojiPickerEmojis","StyledEmojiPicker","EmojiPicker","_ref","accessToken","onSelect","personId","searchString","setSearchString","selectedCategory","setSelectedCategory","slug","handleCategorySelect","category","handleSearchChange","event","target","value","createElement","onChange","placeholder","displayName"],"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":"AAAA,SAASA,KAAK,QAAQ,yBAAyB;AAC/C,OAAOC,KAAK,IAAqBC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACrE,OAAOC,eAAe,MAAM,uCAAuC;AAEnE,OAAOC,qBAAqB,MAAM,iDAAiD;AACnF,OAAOC,iBAAiB,MAAM,yCAAyC;AACvE,SAASC,iBAAiB,QAAQ,sBAAsB;AAiBxD,MAAMC,WAAiC,GAAGC,IAAA,IAAyC;EAAA,IAAxC;IAAEC,WAAW;IAAEC,QAAQ;IAAEC;EAAS,CAAC,GAAAH,IAAA;EAC1E,MAAM,CAACI,YAAY,EAAEC,eAAe,CAAC,GAAGX,QAAQ,CAAC,EAAE,CAAC;EACpD,MAAM,CAACY,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGb,QAAQ,CAACC,eAAe,CAAC,CAAC,CAAC,EAAEa,IAAgB,CAAC;EAE9F,MAAMC,oBAAoB,GAAGhB,WAAW,CAAEiB,QAAkB,IAAK;IAC7DL,eAAe,CAAC,EAAE,CAAC;IACnBE,mBAAmB,CAACG,QAAQ,CAAC;EACjC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,kBAAkB,GAAGlB,WAAW,CAAEmB,KAAoC,IAAK;IAC7EP,eAAe,CAACO,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC;EACvC,CAAC,EAAE,EAAE,CAAC;EAEN,oBACItB,KAAA,CAAAuB,aAAA,CAACjB,iBAAiB,qBACdN,KAAA,CAAAuB,aAAA,CAACxB,KAAK;IAACyB,QAAQ,EAAEL,kBAAmB;IAACM,WAAW,EAAC,QAAQ;IAACH,KAAK,EAAEV;EAAa,CAAE,CAAC,eACjFZ,KAAA,CAAAuB,aAAA,CAAClB,iBAAiB;IACdI,WAAW,EAAEA,WAAY;IACzBC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBC,YAAY,EAAEA,YAAa;IAC3BE,gBAAgB,EAAEA;EAAiB,CACtC,CAAC,eACFd,KAAA,CAAAuB,aAAA,CAACnB,qBAAqB;IAClBM,QAAQ,EAAEO,oBAAqB;IAC/BL,YAAY,EAAEA,YAAa;IAC3BE,gBAAgB,EAAEA;EAAiB,CACtC,CACc,CAAC;AAE5B,CAAC;AAEDP,WAAW,CAACmB,WAAW,GAAG,aAAa;AAEvC,eAAenB,WAAW","ignoreList":[]}

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

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+export const emojiPickerSize = {
+  height: 285,
+  width: 350
+};
+export const StyledEmojiPicker = styled.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/esm/components/emoji-picker/EmojiPicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.styles.js","names":["styled","emojiPickerSize","height","width","StyledEmojiPicker","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,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,eAAe,GAAG;EAC3BC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE;AACX,CAAC;AAED,OAAO,MAAMC,iBAAiB,GAAGJ,MAAM,CAACK,GAAG;AAC3C;AACA;AACA;AACA,cAAcJ,eAAe,CAACC,MAAM;AACpC;AACA;AACA,aAAaD,eAAe,CAACE,KAAK;AAClC;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,96 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import unicodeEmoji from 'unicode-emoji-json/data-by-group.json';
+import { CATEGORY_EMOJIS } from '../../../constants/categories';
+import { StyledEmojiPickerCategories, StyledMotionEmojiPickerCategory } from './EmojiPickerCategories.styles';
+const EmojiPickerCategories = _ref => {
+  let {
+    onSelect,
+    searchString,
+    selectedCategory
+  } = _ref;
+  const [focusedIndex, setFocusedIndex] = useState(1);
+  const categoryRef = useRef(null);
+  const isSearchStringGiven = searchString.trim() !== '';
+  const handleSelect = useCallback(slug => {
+    onSelect(slug);
+  }, [onSelect]);
+  useEffect(() => {
+    const handleKeyDown = event => {
+      if (event.key === 'Tab' || event.key === 'Tab' && event.shiftKey) {
+        event.preventDefault();
+        const children = 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 = useCallback(slug => {
+    handleSelect(slug);
+  }, [handleSelect]);
+  const categories = useMemo(() => {
+    const categorySlugs = unicodeEmoji.map(_ref2 => {
+      let {
+        slug
+      } = _ref2;
+      return slug;
+    });
+    categorySlugs.unshift('history');
+    return categorySlugs.map(slug => {
+      const isSelected = selectedCategory === slug && !isSearchStringGiven;
+      return /*#__PURE__*/React.createElement(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
+        }
+      }, CATEGORY_EMOJIS[slug]);
+    });
+  }, [handleClick, isSearchStringGiven, selectedCategory]);
+  return /*#__PURE__*/React.createElement(StyledEmojiPickerCategories, {
+    ref: categoryRef
+  }, categories);
+};
+EmojiPickerCategories.displayName = 'EmojiPickerCategories';
+export default EmojiPickerCategories;
+//# sourceMappingURL=EmojiPickerCategories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerCategories.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","unicodeEmoji","CATEGORY_EMOJIS","StyledEmojiPickerCategories","StyledMotionEmojiPickerCategory","EmojiPickerCategories","_ref","onSelect","searchString","selectedCategory","focusedIndex","setFocusedIndex","categoryRef","isSearchStringGiven","trim","handleSelect","slug","handleKeyDown","event","key","shiftKey","preventDefault","children","current","length","newIndex","prevElement","tabIndex","newElement","focus","id","document","addEventListener","removeEventListener","handleClick","categories","categorySlugs","map","_ref2","unshift","isSelected","createElement","animate","filter","opacity","className","initial","onClick","transition","duration","ref","displayName"],"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":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACpF,OAAOC,YAAY,MAAM,uCAAuC;AAChE,SAASC,eAAe,QAAQ,+BAA+B;AAE/D,SACIC,2BAA2B,EAC3BC,+BAA+B,QAC5B,gCAAgC;AAQvC,MAAMC,qBAAqD,GAAGC,IAAA,IAIxD;EAAA,IAJyD;IAC3DC,QAAQ;IACRC,YAAY;IACZC;EACJ,CAAC,GAAAH,IAAA;EACG,MAAM,CAACI,YAAY,EAAEC,eAAe,CAAC,GAAGX,QAAQ,CAAC,CAAC,CAAC;EAEnD,MAAMY,WAAW,GAAGb,MAAM,CAAiB,IAAI,CAAC;EAEhD,MAAMc,mBAAmB,GAAGL,YAAY,CAACM,IAAI,CAAC,CAAC,KAAK,EAAE;EAEtD,MAAMC,YAAY,GAAGnB,WAAW,CAC3BoB,IAAc,IAAK;IAChBT,QAAQ,CAACS,IAAI,CAAC;EAClB,CAAC,EACD,CAACT,QAAQ,CACb,CAAC;EAEDV,SAAS,CAAC,MAAM;IACZ,MAAMoB,aAAa,GAAIC,KAAoB,IAAK;MAC5C,IAAIA,KAAK,CAACC,GAAG,KAAK,KAAK,IAAKD,KAAK,CAACC,GAAG,KAAK,KAAK,IAAID,KAAK,CAACE,QAAS,EAAE;QAChEF,KAAK,CAACG,cAAc,CAAC,CAAC;QAEtB,MAAMC,QAAQ,GAAGV,WAAW,CAACW,OAAO,EAAED,QAAQ;QAC9C,IAAIA,QAAQ,IAAIA,QAAQ,CAACE,MAAM,GAAG,CAAC,EAAE;UACjC,IAAIC,QAAQ,GAAGf,YAAY,KAAK,IAAI,GAAGA,YAAY,GAAG,CAAC;UAEvD,IAAIQ,KAAK,CAACC,GAAG,KAAK,KAAK,IAAID,KAAK,CAACE,QAAQ,EAAE;YACvCK,QAAQ,GAAG,CAACA,QAAQ,GAAG,CAAC,IAAIH,QAAQ,CAACE,MAAM;UAC/C,CAAC,MAAM,IAAIN,KAAK,CAACC,GAAG,KAAK,KAAK,EAAE;YAC5BM,QAAQ,GAAG,CAACA,QAAQ,GAAG,CAAC,IAAIH,QAAQ,CAACE,MAAM;UAC/C;;UAEA;UACA,IAAId,YAAY,KAAK,IAAI,EAAE;YACvB,MAAMgB,WAAW,GAAGJ,QAAQ,CAACZ,YAAY,CAAmB;YAC5DgB,WAAW,CAACC,QAAQ,GAAG,CAAC,CAAC;UAC7B;UAEA,IAAIF,QAAQ,GAAG,CAAC,EAAE;YACdA,QAAQ,GAAGH,QAAQ,CAACE,MAAM,GAAG,CAAC;UAClC,CAAC,MAAM,IAAIC,QAAQ,GAAGH,QAAQ,CAACE,MAAM,GAAG,CAAC,EAAE;YACvCC,QAAQ,GAAG,CAAC;UAChB;UAEAd,eAAe,CAACc,QAAQ,CAAC;;UAEzB;UACA,MAAMG,UAAU,GAAGN,QAAQ,CAACG,QAAQ,CAAmB;UACvDG,UAAU,CAACD,QAAQ,GAAG,CAAC;UACvBC,UAAU,CAACC,KAAK,CAAC,CAAC;UAElB,IAAI,CAACD,UAAU,EAAE;YACb;UACJ;UAEA,MAAM;YAAEE;UAAG,CAAC,GAAGF,UAAU;UAEzBb,YAAY,CAACe,EAAc,CAAC;QAChC;MACJ;IACJ,CAAC;IAEDC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEf,aAAa,CAAC;IAEnD,OAAO,MAAM;MACTc,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEhB,aAAa,CAAC;IAC1D,CAAC;EACL,CAAC,EAAE,CAACP,YAAY,EAAEK,YAAY,CAAC,CAAC;EAEhC,MAAMmB,WAAW,GAAGtC,WAAW,CAC1BoB,IAAc,IAAK;IAChBD,YAAY,CAACC,IAAI,CAAC;EACtB,CAAC,EACD,CAACD,YAAY,CACjB,CAAC;EAED,MAAMoB,UAAU,GAAGrC,OAAO,CAAC,MAAM;IAC7B,MAAMsC,aAAa,GAAGnC,YAAY,CAACoC,GAAG,CAACC,KAAA;MAAA,IAAC;QAAEtB;MAAK,CAAC,GAAAsB,KAAA;MAAA,OAAKtB,IAAI;IAAA,EAAC;IAE1DoB,aAAa,CAACG,OAAO,CAAC,SAAS,CAAC;IAEhC,OAAOH,aAAa,CAACC,GAAG,CAAErB,IAAI,IAAK;MAC/B,MAAMwB,UAAU,GAAG/B,gBAAgB,KAAKO,IAAI,IAAI,CAACH,mBAAmB;MAEpE,oBACIlB,KAAA,CAAA8C,aAAA,CAACrC,+BAA+B;QAC5BsC,OAAO,EAAE;UACLC,MAAM,EAAE,aAAaH,UAAU,GAAG,CAAC,GAAG,IAAI,GAAG;UAC7CI,OAAO,EAAEJ,UAAU,GAAG,CAAC,GAAG;QAC9B,CAAE;QACFK,SAAS,EAAC,oBAAoB;QAC9BC,OAAO,EAAE,KAAM;QACf3B,GAAG,EAAEH,IAAK;QACVc,EAAE,EAAEd,IAAK;QACT+B,OAAO,EAAEA,CAAA,KAAMb,WAAW,CAAClB,IAAgB,CAAE;QAC7CgC,UAAU,EAAE;UAAEC,QAAQ,EAAE;QAAI;MAAE,GAE7B/C,eAAe,CAACc,IAAI,CACQ,CAAC;IAE1C,CAAC,CAAC;EACN,CAAC,EAAE,CAACkB,WAAW,EAAErB,mBAAmB,EAAEJ,gBAAgB,CAAC,CAAC;EAExD,oBACId,KAAA,CAAA8C,aAAA,CAACtC,2BAA2B;IAAC+C,GAAG,EAAEtC;EAAY,GAAEuB,UAAwC,CAAC;AAEjG,CAAC;AAED9B,qBAAqB,CAAC8C,WAAW,GAAG,uBAAuB;AAE3D,eAAe9C,qBAAqB","ignoreList":[]}

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

@@ -0,0 +1,18 @@
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+import { getFontFamily } from '../../../utils/font';
+export const StyledEmojiPickerCategories = styled.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%;
+`;
+export const StyledMotionEmojiPickerCategory = styled(motion.div)`
+    cursor: pointer;
+    font-family: ${getFontFamily};
+    font-size: 20px;
+`;
+//# sourceMappingURL=EmojiPickerCategories.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerCategories.styles.js","names":["motion","styled","getFontFamily","StyledEmojiPickerCategories","div","StyledMotionEmojiPickerCategory"],"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,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,aAAa,QAAQ,qBAAqB;AAEnD,OAAO,MAAMC,2BAA2B,GAAGF,MAAM,CAACG,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAGJ,MAAM,CAACD,MAAM,CAACI,GAAG,CAAqB;AACrF;AACA,mBAAmBF,aAAa;AAChC;AACA,CAAC","ignoreList":[]}