npm - @chayns-components/emoji-input - Versions diffs - 5.0.0-beta.1004 → 5.0.0-beta.1007 - Mend

@chayns-components/emoji-input 5.0.0-beta.1004 → 5.0.0-beta.1007

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 (24) hide show

package/lib/esm/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Emoji.js","names":["AnimatePresence","React","useCallback","useEffect","useRef","useState","AnchorAlignment","StyledEmoji","SkinTonePopup","skinTonePopupContentSize","Emoji","_ref","emoji","isSelected","name","isSkinToneSupported","onPopupVisibilityChange","onSelect","shouldShowSkinTonePopup","onRightClick","index","shouldShowPopup","setShouldShowPopup","skinTonePopupAnchorAlignment","setSkinTonePopupAnchorAlignment","Top","skinTonePopupAnchorOffset","setSkinTonePopupAnchorOffset","skinTonePopupOverlayPosition","setSkinTonePopupOverlayPosition","top","skinTonePopupPosition","setSkinTonePopupPosition","left","emojiRef","handleClick","calculatePopupPosition","current","element","parentElement","height","elementHeight","elementLeft","elementTop","width","elementWidth","getBoundingClientRect","parentHeight","parentLeft","parentTop","parentWidth","scrollTop","anchorAlignment","anchorOffset","maxLeft","minLeft","Bottom","handleContextMenu","event","preventDefault","stopPropagation","handleHidePopup","createElement","ref","$isSelected","className","onClick","onContextMenu","initial","key","onHidePopup","overlayPosition","position","displayName"],"sources":["../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { AnchorAlignment } from '../../../../constants/alignment';\nimport { StyledEmoji } from './Emoji.styles';\nimport SkinTonePopup, { SkinTonePopupProps } from './skin-tone-popup/SkinTonePopup';\nimport { skinTonePopupContentSize } from './skin-tone-popup/SkinTonePopup.styles';\n\nexport type EmojiProps = {\n emoji: string;\n isSelected: boolean;\n name: string;\n index: number;\n isSkinToneSupported: boolean;\n onPopupVisibilityChange: (isVisible: boolean) => void;\n onSelect: (emoji: string) => void;\n onRightClick: (newIndex: number) => void;\n shouldShowSkinTonePopup: boolean;\n};\n\nconst Emoji: FC<EmojiProps> = ({\n emoji,\n isSelected,\n name,\n isSkinToneSupported,\n onPopupVisibilityChange,\n onSelect,\n shouldShowSkinTonePopup,\n onRightClick,\n index,\n}) => {\n const [shouldShowPopup, setShouldShowPopup] = useState(false);\n const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = useState(\n AnchorAlignment.Top,\n );\n const [skinTonePopupAnchorOffset, setSkinTonePopupAnchorOffset] = useState(0);\n const [skinTonePopupOverlayPosition, setSkinTonePopupOverlayPosition] = useState<\n SkinTonePopupProps['overlayPosition']\n >({ top: 0 });\n const [skinTonePopupPosition, setSkinTonePopupPosition] = useState<\n SkinTonePopupProps['position']\n >({ left: 0, top: 0 });\n\n const emojiRef = useRef<HTMLDivElement>(null);\n\n const handleClick = useCallback(() => {\n onSelect(emoji);\n }, [emoji, onSelect]);\n\n const calculatePopupPosition = useCallback(() => {\n if (!emojiRef.current) {\n return;\n }\n\n const element = emojiRef.current;\n const { parentElement } = emojiRef.current;\n\n if (parentElement) {\n const {\n height: elementHeight,\n left: elementLeft,\n top: elementTop,\n width: elementWidth,\n } = element.getBoundingClientRect();\n\n const {\n height: parentHeight,\n left: parentLeft,\n top: parentTop,\n width: parentWidth,\n } = parentElement.getBoundingClientRect();\n\n const { scrollTop } = parentElement;\n\n let anchorAlignment = AnchorAlignment.Top;\n let anchorOffset = 0;\n\n let left =\n elementLeft - parentLeft - skinTonePopupContentSize.width / 2 + elementWidth / 2;\n\n let top = elementTop - parentTop + elementHeight + scrollTop;\n\n const maxLeft = parentWidth - skinTonePopupContentSize.width - 12;\n const minLeft = 12;\n\n if (left < minLeft) {\n anchorOffset = left - minLeft;\n left = minLeft;\n } else if (left > maxLeft) {\n anchorOffset = left - maxLeft;\n left = maxLeft;\n }\n\n if (top + skinTonePopupContentSize.height > parentHeight + scrollTop) {\n anchorAlignment = AnchorAlignment.Bottom;\n top -= elementHeight + skinTonePopupContentSize.height;\n }\n\n if (isSkinToneSupported) {\n setSkinTonePopupAnchorAlignment(anchorAlignment);\n setSkinTonePopupAnchorOffset(anchorOffset);\n setSkinTonePopupPosition({ left, top });\n setSkinTonePopupOverlayPosition({ top: scrollTop });\n setShouldShowPopup(true);\n }\n }\n }, [isSkinToneSupported]);\n\n const handleContextMenu = useCallback(\n (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (isSkinToneSupported) {\n onRightClick(index);\n calculatePopupPosition();\n }\n },\n [calculatePopupPosition, index, isSkinToneSupported, onRightClick],\n );\n\n useEffect(() => {\n if (\n emojiRef.current &&\n shouldShowSkinTonePopup &&\n skinTonePopupPosition.top === 0 &&\n skinTonePopupPosition.left === 0\n ) {\n calculatePopupPosition();\n }\n }, [\n calculatePopupPosition,\n index,\n isSkinToneSupported,\n shouldShowSkinTonePopup,\n skinTonePopupPosition,\n ]);\n\n useEffect(() => {\n if (shouldShowSkinTonePopup) {\n setShouldShowPopup(shouldShowSkinTonePopup);\n }\n }, [shouldShowSkinTonePopup]);\n\n const handleHidePopup = useCallback(() => {\n setShouldShowPopup(false);\n }, []);\n\n useEffect(() => {\n onPopupVisibilityChange(shouldShowPopup);\n }, [onPopupVisibilityChange, shouldShowPopup]);\n\n return (\n <StyledEmoji\n ref={emojiRef}\n $isSelected={isSelected}\n data-emoji={emoji}\n data-name={name}\n data-skin-tone-support={isSkinToneSupported}\n className=\"prevent-lose-focus\"\n onClick={handleClick}\n onContextMenu={handleContextMenu}\n >\n {emoji}\n <AnimatePresence initial={false}>\n {shouldShowPopup && (\n <SkinTonePopup\n anchorAlignment={skinTonePopupAnchorAlignment}\n anchorOffset={skinTonePopupAnchorOffset}\n emoji={emoji}\n key={emoji}\n onHidePopup={handleHidePopup}\n onSelect={onSelect}\n overlayPosition={skinTonePopupOverlayPosition}\n position={skinTonePopupPosition}\n />\n )}\n </AnimatePresence>\n </StyledEmoji>\n );\n};\n\nEmoji.displayName = 'Emoji';\n\nexport default Emoji;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Emoji.js","names":["AnimatePresence","React","useCallback","useEffect","useRef","useState","AnchorAlignment","StyledEmoji","SkinTonePopup","skinTonePopupContentSize","Emoji","_ref","emoji","isSelected","name","isSkinToneSupported","onPopupVisibilityChange","onSelect","shouldShowSkinTonePopup","onRightClick","index","shouldShowPopup","setShouldShowPopup","skinTonePopupAnchorAlignment","setSkinTonePopupAnchorAlignment","Top","skinTonePopupAnchorOffset","setSkinTonePopupAnchorOffset","skinTonePopupOverlayPosition","setSkinTonePopupOverlayPosition","top","skinTonePopupPosition","setSkinTonePopupPosition","left","emojiRef","handleClick","calculatePopupPosition","current","element","parentElement","height","elementHeight","elementLeft","elementTop","width","elementWidth","getBoundingClientRect","parentHeight","parentLeft","parentTop","parentWidth","scrollTop","anchorAlignment","anchorOffset","maxLeft","minLeft","Bottom","handleContextMenu","event","preventDefault","stopPropagation","handleHidePopup","createElement","ref","$isSelected","className","onClick","onContextMenu","initial","key","onHidePopup","overlayPosition","position","displayName"],"sources":["../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { AnchorAlignment } from '../../../../constants/alignment';\nimport { StyledEmoji } from './Emoji.styles';\nimport SkinTonePopup, { SkinTonePopupProps } from './skin-tone-popup/SkinTonePopup';\nimport { skinTonePopupContentSize } from './skin-tone-popup/SkinTonePopup.styles';\n\nexport type EmojiProps = {\n emoji: string;\n isSelected: boolean;\n name: string;\n index: number;\n isSkinToneSupported: boolean;\n onPopupVisibilityChange: (isVisible: boolean) => void;\n onSelect: (emoji: string) => void;\n onRightClick: (newIndex: number) => void;\n shouldShowSkinTonePopup: boolean;\n};\n\nconst Emoji: FC<EmojiProps> = ({\n emoji,\n isSelected,\n name,\n isSkinToneSupported,\n onPopupVisibilityChange,\n onSelect,\n shouldShowSkinTonePopup,\n onRightClick,\n index,\n}) => {\n const [shouldShowPopup, setShouldShowPopup] = useState(false);\n const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = useState(\n AnchorAlignment.Top,\n );\n const [skinTonePopupAnchorOffset, setSkinTonePopupAnchorOffset] = useState(0);\n const [skinTonePopupOverlayPosition, setSkinTonePopupOverlayPosition] = useState<\n SkinTonePopupProps['overlayPosition']\n >({ top: 0 });\n const [skinTonePopupPosition, setSkinTonePopupPosition] = useState<\n SkinTonePopupProps['position']\n >({ left: 0, top: 0 });\n\n const emojiRef = useRef<HTMLDivElement>(null);\n\n const handleClick = useCallback(() => {\n onSelect(emoji);\n }, [emoji, onSelect]);\n\n const calculatePopupPosition = useCallback(() => {\n if (!emojiRef.current) {\n return;\n }\n\n const element = emojiRef.current;\n const { parentElement } = emojiRef.current;\n\n if (parentElement) {\n const {\n height: elementHeight,\n left: elementLeft,\n top: elementTop,\n width: elementWidth,\n } = element.getBoundingClientRect();\n\n const {\n height: parentHeight,\n left: parentLeft,\n top: parentTop,\n width: parentWidth,\n } = parentElement.getBoundingClientRect();\n\n const { scrollTop } = parentElement;\n\n let anchorAlignment = AnchorAlignment.Top;\n let anchorOffset = 0;\n\n let left =\n elementLeft - parentLeft - skinTonePopupContentSize.width / 2 + elementWidth / 2;\n\n let top = elementTop - parentTop + elementHeight + scrollTop;\n\n const maxLeft = parentWidth - skinTonePopupContentSize.width - 12;\n const minLeft = 12;\n\n if (left < minLeft) {\n anchorOffset = left - minLeft;\n left = minLeft;\n } else if (left > maxLeft) {\n anchorOffset = left - maxLeft;\n left = maxLeft;\n }\n\n if (top + skinTonePopupContentSize.height > parentHeight + scrollTop) {\n anchorAlignment = AnchorAlignment.Bottom;\n top -= elementHeight + skinTonePopupContentSize.height;\n }\n\n if (isSkinToneSupported) {\n setSkinTonePopupAnchorAlignment(anchorAlignment);\n setSkinTonePopupAnchorOffset(anchorOffset);\n setSkinTonePopupPosition({ left, top });\n setSkinTonePopupOverlayPosition({ top: scrollTop });\n setShouldShowPopup(true);\n }\n }\n }, [isSkinToneSupported]);\n\n const handleContextMenu = useCallback(\n (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (isSkinToneSupported) {\n onRightClick(index);\n calculatePopupPosition();\n }\n },\n [calculatePopupPosition, index, isSkinToneSupported, onRightClick],\n );\n\n useEffect(() => {\n if (\n emojiRef.current &&\n shouldShowSkinTonePopup &&\n skinTonePopupPosition.top === 0 &&\n skinTonePopupPosition.left === 0\n ) {\n calculatePopupPosition();\n }\n }, [\n calculatePopupPosition,\n index,\n isSkinToneSupported,\n shouldShowSkinTonePopup,\n skinTonePopupPosition,\n ]);\n\n useEffect(() => {\n if (shouldShowSkinTonePopup) {\n setShouldShowPopup(shouldShowSkinTonePopup);\n }\n }, [shouldShowSkinTonePopup]);\n\n const handleHidePopup = useCallback(() => {\n setShouldShowPopup(false);\n }, []);\n\n useEffect(() => {\n onPopupVisibilityChange(shouldShowPopup);\n }, [onPopupVisibilityChange, shouldShowPopup]);\n\n return (\n <StyledEmoji\n ref={emojiRef}\n $isSelected={isSelected}\n data-emoji={emoji}\n data-name={name}\n data-skin-tone-support={isSkinToneSupported}\n className=\"prevent-lose-focus\"\n onClick={handleClick}\n onContextMenu={handleContextMenu}\n >\n {emoji}\n <AnimatePresence initial={false}>\n {shouldShowPopup && (\n <SkinTonePopup\n anchorAlignment={skinTonePopupAnchorAlignment}\n anchorOffset={skinTonePopupAnchorOffset}\n emoji={emoji}\n key={emoji}\n onHidePopup={handleHidePopup}\n onSelect={onSelect}\n overlayPosition={skinTonePopupOverlayPosition}\n position={skinTonePopupPosition}\n />\n )}\n </AnimatePresence>\n </StyledEmoji>\n );\n};\n\nEmoji.displayName = 'Emoji';\n\nexport default Emoji;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
 import { AnchorAlignment } from '../../../../../constants/alignment';
 export const StyledMotionSkinTonePopup = styled(motion.div)`

package/lib/esm/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SkinTonePopup.styles.js","names":["motion","styled","css","AnchorAlignment","StyledMotionSkinTonePopup","div","skinTonePopupContentSize","height","width","StyledSkinTonePopupContent","_ref","theme","_ref2","$anchorAlignment","$anchorOffset","Bottom","Top","undefined","StyledSkinTonePopupContentEmoji","_ref3","$isSelected","StyledSkinTonePopupOverlay"],"sources":["../../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from '~~framer-~~motion';\nimport styled, { css } from 'styled-components';\nimport { AnchorAlignment } from '../../../../../constants/alignment';\n\nexport const StyledMotionSkinTonePopup = styled(motion.div)<FramerMotionBugFix>`\n z-index: 1;\n`;\n\nexport const skinTonePopupContentSize = {\n height: 48,\n width: 200,\n};\n\ntype StyledSkinTonePopupContentProps = WithTheme<{\n $anchorAlignment: AnchorAlignment;\n $anchorOffset: number;\n}>;\n\nexport const StyledSkinTonePopupContent = styled.div<StyledSkinTonePopupContentProps>`\n align-items: stretch;\n background-color: ${({ theme }: StyledSkinTonePopupContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n display: flex;\n height: ${skinTonePopupContentSize.height}px;\n justify-content: stretch;\n position: absolute;\n width: ${skinTonePopupContentSize.width}px;\n z-index: 2;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-bottom-right-radius: 3px;\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $anchorAlignment, $anchorOffset }) => {\n switch ($anchorAlignment) {\n case AnchorAlignment.Bottom:\n return css`\n bottom: -7px;\n left: calc(50% - 7px + ${$anchorOffset}px);\n transform: rotate(45deg);\n `;\n case AnchorAlignment.Top:\n return css`\n top: -7px;\n left: calc(50% - 7px + ${$anchorOffset}px);\n transform: rotate(225deg);\n `;\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledSkinTonePopupContentEmojiProps = WithTheme<{\n $isSelected: boolean;\n}>;\n\nexport const StyledSkinTonePopupContentEmoji = styled.div<StyledSkinTonePopupContentEmojiProps>`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n font-size: 24px;\n justify-content: center;\n background-color: ${({ theme, $isSelected }: StyledSkinTonePopupContentEmojiProps) =>\n $isSelected ? theme['secondary-102'] : 'none'};\n`;\n\nexport const StyledSkinTonePopupOverlay = styled.div`\n cursor: default;\n height: 100%;\n left: 0;\n position: absolute;\n width: 100%;\n z-index: 1;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,~~eAAe~~;~~AACtC~~,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,eAAe,QAAQ,oCAAoC;AAEpE,OAAO,MAAMC,yBAAyB,GAAGH,MAAM,CAACD,MAAM,CAACK,GAAG,CAAqB;AAC/E;AACA,CAAC;AAED,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,MAAM,EAAE,EAAE;EACVC,KAAK,EAAE;AACX,CAAC;AAOD,OAAO,MAAMC,0BAA0B,GAAGR,MAAM,CAACI,GAAoC;AACrF;AACA,wBAAwBK,IAAA;EAAA,IAAC;IAAEC;EAAuC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACpF;AACA;AACA;AACA;AACA,cAAcL,wBAAwB,CAACC,MAAM;AAC7C;AACA;AACA,aAAaD,wBAAwB,CAACE,KAAK;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUI,KAAA,IAAyC;EAAA,IAAxC;IAAEC,gBAAgB;IAAEC;EAAc,CAAC,GAAAF,KAAA;EAClC,QAAQC,gBAAgB;IACpB,KAAKV,eAAe,CAACY,MAAM;MACvB,OAAOb,GAAG;AAC9B;AACA,iDAAiDY,aAAa;AAC9D;AACA,qBAAqB;IACL,KAAKX,eAAe,CAACa,GAAG;MACpB,OAAOd,GAAG;AAC9B;AACA,iDAAiDY,aAAa;AAC9D;AACA,qBAAqB;IACL;MACI,OAAOG,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,+BAA+B,GAAGjB,MAAM,CAACI,GAAyC;AAC/F;AACA;AACA;AACA;AACA;AACA,wBAAwBc,KAAA;EAAA,IAAC;IAAER,KAAK;IAAES;EAAkD,CAAC,GAAAD,KAAA;EAAA,OAC7EC,WAAW,GAAGT,KAAK,CAAC,eAAe,CAAC,GAAG,MAAM;AAAA;AACrD,CAAC;AAED,OAAO,MAAMU,0BAA0B,GAAGpB,MAAM,CAACI,GAAG;AACpD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"SkinTonePopup.styles.js","names":["motion","styled","css","AnchorAlignment","StyledMotionSkinTonePopup","div","skinTonePopupContentSize","height","width","StyledSkinTonePopupContent","_ref","theme","_ref2","$anchorAlignment","$anchorOffset","Bottom","Top","undefined","StyledSkinTonePopupContentEmoji","_ref3","$isSelected","StyledSkinTonePopupOverlay"],"sources":["../../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { AnchorAlignment } from '../../../../../constants/alignment';\n\nexport const StyledMotionSkinTonePopup = styled(motion.div)<FramerMotionBugFix>`\n z-index: 1;\n`;\n\nexport const skinTonePopupContentSize = {\n height: 48,\n width: 200,\n};\n\ntype StyledSkinTonePopupContentProps = WithTheme<{\n $anchorAlignment: AnchorAlignment;\n $anchorOffset: number;\n}>;\n\nexport const StyledSkinTonePopupContent = styled.div<StyledSkinTonePopupContentProps>`\n align-items: stretch;\n background-color: ${({ theme }: StyledSkinTonePopupContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n display: flex;\n height: ${skinTonePopupContentSize.height}px;\n justify-content: stretch;\n position: absolute;\n width: ${skinTonePopupContentSize.width}px;\n z-index: 2;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-bottom-right-radius: 3px;\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $anchorAlignment, $anchorOffset }) => {\n switch ($anchorAlignment) {\n case AnchorAlignment.Bottom:\n return css`\n bottom: -7px;\n left: calc(50% - 7px + ${$anchorOffset}px);\n transform: rotate(45deg);\n `;\n case AnchorAlignment.Top:\n return css`\n top: -7px;\n left: calc(50% - 7px + ${$anchorOffset}px);\n transform: rotate(225deg);\n `;\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledSkinTonePopupContentEmojiProps = WithTheme<{\n $isSelected: boolean;\n}>;\n\nexport const StyledSkinTonePopupContentEmoji = styled.div<StyledSkinTonePopupContentEmojiProps>`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n font-size: 24px;\n justify-content: center;\n background-color: ${({ theme, $isSelected }: StyledSkinTonePopupContentEmojiProps) =>\n $isSelected ? theme['secondary-102'] : 'none'};\n`;\n\nexport const StyledSkinTonePopupOverlay = styled.div`\n cursor: default;\n height: 100%;\n left: 0;\n position: absolute;\n width: 100%;\n z-index: 1;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,eAAe,QAAQ,oCAAoC;AAEpE,OAAO,MAAMC,yBAAyB,GAAGH,MAAM,CAACD,MAAM,CAACK,GAAG,CAAqB;AAC/E;AACA,CAAC;AAED,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,MAAM,EAAE,EAAE;EACVC,KAAK,EAAE;AACX,CAAC;AAOD,OAAO,MAAMC,0BAA0B,GAAGR,MAAM,CAACI,GAAoC;AACrF;AACA,wBAAwBK,IAAA;EAAA,IAAC;IAAEC;EAAuC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACpF;AACA;AACA;AACA;AACA,cAAcL,wBAAwB,CAACC,MAAM;AAC7C;AACA;AACA,aAAaD,wBAAwB,CAACE,KAAK;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUI,KAAA,IAAyC;EAAA,IAAxC;IAAEC,gBAAgB;IAAEC;EAAc,CAAC,GAAAF,KAAA;EAClC,QAAQC,gBAAgB;IACpB,KAAKV,eAAe,CAACY,MAAM;MACvB,OAAOb,GAAG;AAC9B;AACA,iDAAiDY,aAAa;AAC9D;AACA,qBAAqB;IACL,KAAKX,eAAe,CAACa,GAAG;MACpB,OAAOd,GAAG;AAC9B;AACA,iDAAiDY,aAAa;AAC9D;AACA,qBAAqB;IACL;MACI,OAAOG,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,+BAA+B,GAAGjB,MAAM,CAACI,GAAyC;AAC/F;AACA;AACA;AACA;AACA;AACA,wBAAwBc,KAAA;EAAA,IAAC;IAAER,KAAK;IAAES;EAAkD,CAAC,GAAAD,KAAA;EAAA,OAC7EC,WAAW,GAAGT,KAAK,CAAC,eAAe,CAAC,GAAG,MAAM;AAAA;AACrD,CAAC;AAED,OAAO,MAAMU,0BAA0B,GAAGpB,MAAM,CAACI,GAAG;AACpD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}