@chayns-components/core 5.0.0-beta.504 → 5.0.0-beta.511

package/lib/components/mention-finder/MentionFinder.js

@@ -24,8 +24,9 @@ const MentionFinder = _ref => {
     return id.toLowerCase().includes(searchString) || info.replace('chayns', '').toLowerCase().includes(searchString) || name.toLowerCase().includes(searchString);
   }) : members, [members, searchString]);
   const handleKeyDown = useCallback(event => {
-    let shouldPreventDefault = false;
     if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      event.stopPropagation();
       const currentIndex = filteredMembers.findIndex(_ref3 => {
         let {
           id
@@ -35,8 +36,9 @@ const MentionFinder = _ref => {
       const prevIndex = Math.max(currentIndex - 1, 0);
       const member = filteredMembers[prevIndex];
       setActiveMember(member);
-      shouldPreventDefault = true;
     } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      event.stopPropagation();
       const currentIndex = filteredMembers.findIndex(_ref4 => {
         let {
           id
@@ -46,23 +48,15 @@ const MentionFinder = _ref => {
       const nextIndex = Math.min(currentIndex + 1, filteredMembers.length - 1);
       const member = filteredMembers[nextIndex];
       setActiveMember(member);
-      shouldPreventDefault = true;
     } else if (event.key === 'Enter') {
-      console.debug('"Enter" detected in MentionFinder', {
-        fullMatch,
-        activeMember
-      });
+      event.preventDefault();
+      event.stopPropagation();
       if (fullMatch && activeMember) {
         onSelect({
           fullMatch,
           member: activeMember
         });
       }
-      shouldPreventDefault = true;
-    }
-    if (shouldPreventDefault) {
-      event.preventDefault();
-      event.stopPropagation();
     }
   }, [activeMember, filteredMembers, fullMatch, onSelect]);
   const handleMemberClick = useCallback(member => {

package/lib/components/mention-finder/MentionFinder.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionFinder.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useState","MentionFinderItem","StyledMentionFinder","StyledMotionMentionFinderPopup","MentionFinder","_ref","inputValue","members","onSelect","popupAlignment","activeMember","setActiveMember","fullMatch","searchString","regExpMatchArray","match","toLowerCase","filteredMembers","filter","_ref2","id","info","name","includes","replace","handleKeyDown","event","shouldPreventDefault","key","currentIndex","findIndex","_ref3","prevIndex","Math","max","member","_ref4","nextIndex","min","length","console","debug","preventDefault","stopPropagation","handleMemberClick","handleMemberHover","isActiveMemberShown","some","_ref5","items","map","createElement","isActive","onClick","onHover","shouldShowPopup","window","addEventListener","removeEventListener","className","initial","animate","height","opacity","exit","$popupAlignment","transition","duration","displayName"],"sources":["../../../src/components/mention-finder/MentionFinder.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport MentionFinderItem from './mention-finder-item/MentionFinderItem';\nimport { StyledMentionFinder, StyledMotionMentionFinderPopup } from './MentionFinder.styles';\n\nexport type MentionMember = {\n    id: string;\n    info: string;\n    imageUrl: string;\n    name: string;\n};\n\nexport type MentionFinderProps = {\n    /**\n     * The text from the input field\n     */\n    inputValue: string;\n    /**\n     * Members that can be selected\n     */\n    members: MentionMember[];\n    /**\n     * Function to be executed when a member is selected\n     */\n    onSelect: ({ fullMatch, member }: { fullMatch: string; member: MentionMember }) => void;\n    /**\n     * Alignment of the popup\n     */\n    popupAlignment: MentionFinderPopupAlignment;\n};\n\nconst MentionFinder: FC<MentionFinderProps> = ({\n    inputValue,\n    members,\n    onSelect,\n    popupAlignment,\n}) => {\n    const [activeMember, setActiveMember] = useState(members[0]);\n\n    const [fullMatch, searchString] = useMemo(() => {\n        // eslint-disable-next-line no-irregular-whitespace\n        const regExpMatchArray = inputValue.match(/@([^\\s​]*)/);\n\n        return [regExpMatchArray?.[0], regExpMatchArray?.[1]?.toLowerCase() ?? ''];\n    }, [inputValue]);\n\n    const filteredMembers = useMemo(\n        () =>\n            searchString !== ''\n                ? members.filter(\n                      ({ id, info, name }) =>\n                          id.toLowerCase().includes(searchString) ||\n                          info.replace('chayns', '').toLowerCase().includes(searchString) ||\n                          name.toLowerCase().includes(searchString),\n                  )\n                : members,\n        [members, searchString],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            let shouldPreventDefault = false;\n\n            if (event.key === 'ArrowUp') {\n                const currentIndex = filteredMembers.findIndex(({ id }) => id === activeMember?.id);\n\n                const prevIndex = Math.max(currentIndex - 1, 0);\n\n                const member = filteredMembers[prevIndex];\n\n                setActiveMember(member);\n\n                shouldPreventDefault = true;\n            } else if (event.key === 'ArrowDown') {\n                const currentIndex = filteredMembers.findIndex(({ id }) => id === activeMember?.id);\n\n                const nextIndex = Math.min(currentIndex + 1, filteredMembers.length - 1);\n\n                const member = filteredMembers[nextIndex];\n\n                setActiveMember(member);\n\n                shouldPreventDefault = true;\n            } else if (event.key === 'Enter') {\n                console.debug('\"Enter\" detected in MentionFinder', { fullMatch, activeMember });\n\n                if (fullMatch && activeMember) {\n                    onSelect({ fullMatch, member: activeMember });\n                }\n\n                shouldPreventDefault = true;\n            }\n\n            if (shouldPreventDefault) {\n                event.preventDefault();\n                event.stopPropagation();\n            }\n        },\n        [activeMember, filteredMembers, fullMatch, onSelect],\n    );\n\n    const handleMemberClick = useCallback(\n        (member: MentionMember) => {\n            if (fullMatch) {\n                onSelect({ fullMatch, member });\n            }\n        },\n        [fullMatch, onSelect],\n    );\n\n    const handleMemberHover = useCallback((member: MentionMember) => {\n        setActiveMember(member);\n    }, []);\n\n    useEffect(() => {\n        if (filteredMembers.length > 0) {\n            const isActiveMemberShown = filteredMembers.some(({ id }) => id === activeMember?.id);\n\n            if (!isActiveMemberShown) {\n                setActiveMember(filteredMembers[0]);\n            }\n        }\n    }, [activeMember?.id, filteredMembers]);\n\n    const items = useMemo(\n        () =>\n            filteredMembers.map((member) => (\n                <MentionFinderItem\n                    isActive={member.id === activeMember?.id}\n                    key={member.id}\n                    member={member}\n                    onClick={handleMemberClick}\n                    onHover={handleMemberHover}\n                />\n            )),\n        [activeMember, filteredMembers, handleMemberClick, handleMemberHover],\n    );\n\n    const shouldShowPopup = useMemo(() => fullMatch && items.length > 0, [fullMatch, items.length]);\n\n    useEffect(() => {\n        if (shouldShowPopup) {\n            window.addEventListener('keydown', handleKeyDown, true);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleKeyDown, true);\n        };\n    }, [handleKeyDown, shouldShowPopup]);\n\n    return (\n        <StyledMentionFinder className=\"beta-chayns-mention-finder\">\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <StyledMotionMentionFinderPopup\n                        animate={{ height: 'auto', opacity: 1 }}\n                        className=\"prevent-lose-focus\"\n                        exit={{ height: 0, opacity: 0 }}\n                        initial={{ height: 0, opacity: 0 }}\n                        $popupAlignment={popupAlignment}\n                        transition={{ duration: 0.15 }}\n                    >\n                        {items}\n                    </StyledMotionMentionFinderPopup>\n                )}\n            </AnimatePresence>\n        </StyledMentionFinder>\n    );\n};\n\nMentionFinder.displayName = 'MentionFinder';\n\nexport default MentionFinder;\n"],"mappings":"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"}
+{"version":3,"file":"MentionFinder.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useState","MentionFinderItem","StyledMentionFinder","StyledMotionMentionFinderPopup","MentionFinder","_ref","inputValue","members","onSelect","popupAlignment","activeMember","setActiveMember","fullMatch","searchString","regExpMatchArray","match","toLowerCase","filteredMembers","filter","_ref2","id","info","name","includes","replace","handleKeyDown","event","key","preventDefault","stopPropagation","currentIndex","findIndex","_ref3","prevIndex","Math","max","member","_ref4","nextIndex","min","length","handleMemberClick","handleMemberHover","isActiveMemberShown","some","_ref5","items","map","createElement","isActive","onClick","onHover","shouldShowPopup","window","addEventListener","removeEventListener","className","initial","animate","height","opacity","exit","$popupAlignment","transition","duration","displayName"],"sources":["../../../src/components/mention-finder/MentionFinder.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport MentionFinderItem from './mention-finder-item/MentionFinderItem';\nimport { StyledMentionFinder, StyledMotionMentionFinderPopup } from './MentionFinder.styles';\n\nexport type MentionMember = {\n    id: string;\n    info: string;\n    imageUrl: string;\n    name: string;\n};\n\nexport type MentionFinderProps = {\n    /**\n     * The text from the input field\n     */\n    inputValue: string;\n    /**\n     * Members that can be selected\n     */\n    members: MentionMember[];\n    /**\n     * Function to be executed when a member is selected\n     */\n    onSelect: ({ fullMatch, member }: { fullMatch: string; member: MentionMember }) => void;\n    /**\n     * Alignment of the popup\n     */\n    popupAlignment: MentionFinderPopupAlignment;\n};\n\nconst MentionFinder: FC<MentionFinderProps> = ({\n    inputValue,\n    members,\n    onSelect,\n    popupAlignment,\n}) => {\n    const [activeMember, setActiveMember] = useState(members[0]);\n\n    const [fullMatch, searchString] = useMemo(() => {\n        // eslint-disable-next-line no-irregular-whitespace\n        const regExpMatchArray = inputValue.match(/@([^\\s​]*)/);\n\n        return [regExpMatchArray?.[0], regExpMatchArray?.[1]?.toLowerCase() ?? ''];\n    }, [inputValue]);\n\n    const filteredMembers = useMemo(\n        () =>\n            searchString !== ''\n                ? members.filter(\n                      ({ id, info, name }) =>\n                          id.toLowerCase().includes(searchString) ||\n                          info.replace('chayns', '').toLowerCase().includes(searchString) ||\n                          name.toLowerCase().includes(searchString),\n                  )\n                : members,\n        [members, searchString],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (event.key === 'ArrowUp') {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const currentIndex = filteredMembers.findIndex(({ id }) => id === activeMember?.id);\n\n                const prevIndex = Math.max(currentIndex - 1, 0);\n\n                const member = filteredMembers[prevIndex];\n\n                setActiveMember(member);\n            } else if (event.key === 'ArrowDown') {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const currentIndex = filteredMembers.findIndex(({ id }) => id === activeMember?.id);\n\n                const nextIndex = Math.min(currentIndex + 1, filteredMembers.length - 1);\n\n                const member = filteredMembers[nextIndex];\n\n                setActiveMember(member);\n            } else if (event.key === 'Enter') {\n                event.preventDefault();\n                event.stopPropagation();\n\n                if (fullMatch && activeMember) {\n                    onSelect({ fullMatch, member: activeMember });\n                }\n            }\n        },\n        [activeMember, filteredMembers, fullMatch, onSelect],\n    );\n\n    const handleMemberClick = useCallback(\n        (member: MentionMember) => {\n            if (fullMatch) {\n                onSelect({ fullMatch, member });\n            }\n        },\n        [fullMatch, onSelect],\n    );\n\n    const handleMemberHover = useCallback((member: MentionMember) => {\n        setActiveMember(member);\n    }, []);\n\n    useEffect(() => {\n        if (filteredMembers.length > 0) {\n            const isActiveMemberShown = filteredMembers.some(({ id }) => id === activeMember?.id);\n\n            if (!isActiveMemberShown) {\n                setActiveMember(filteredMembers[0]);\n            }\n        }\n    }, [activeMember?.id, filteredMembers]);\n\n    const items = useMemo(\n        () =>\n            filteredMembers.map((member) => (\n                <MentionFinderItem\n                    isActive={member.id === activeMember?.id}\n                    key={member.id}\n                    member={member}\n                    onClick={handleMemberClick}\n                    onHover={handleMemberHover}\n                />\n            )),\n        [activeMember, filteredMembers, handleMemberClick, handleMemberHover],\n    );\n\n    const shouldShowPopup = useMemo(() => fullMatch && items.length > 0, [fullMatch, items.length]);\n\n    useEffect(() => {\n        if (shouldShowPopup) {\n            window.addEventListener('keydown', handleKeyDown, true);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleKeyDown, true);\n        };\n    }, [handleKeyDown, shouldShowPopup]);\n\n    return (\n        <StyledMentionFinder className=\"beta-chayns-mention-finder\">\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <StyledMotionMentionFinderPopup\n                        animate={{ height: 'auto', opacity: 1 }}\n                        className=\"prevent-lose-focus\"\n                        exit={{ height: 0, opacity: 0 }}\n                        initial={{ height: 0, opacity: 0 }}\n                        $popupAlignment={popupAlignment}\n                        transition={{ duration: 0.15 }}\n                    >\n                        {items}\n                    </StyledMotionMentionFinderPopup>\n                )}\n            </AnimatePresence>\n        </StyledMentionFinder>\n    );\n};\n\nMentionFinder.displayName = 'MentionFinder';\n\nexport default MentionFinder;\n"],"mappings":"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"}

package/lib/components/slider/Slider.styles.js

@@ -52,6 +52,7 @@ export const StyledSliderInput = styled.input`
         width: 20px;
         height: 20px;
         cursor: pointer;
+        opacity: 0;
         pointer-events: all;
         position: relative;
     }
@@ -61,6 +62,7 @@ export const StyledSliderInput = styled.input`
         width: 20px;
         height: 20px;
         cursor: pointer;
+        opacity: 0;
         pointer-events: all;
         position: relative;
     }

package/lib/components/slider/Slider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.styles.js","names":["styled","css","StyledSlider","div","StyledSliderInput","input","_ref","$isInterval","_ref2","theme","$min","$max","$value","StyledSliderThumb","_ref3","_ref4","$position","StyledSliderThumbLable","span"],"sources":["../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n}>;\n\nexport const StyledSliderInput = styled.input<StyledSliderInputProps>`\n    position: absolute;\n    width: 100%;\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n    pointer-events: ${({ $isInterval }) => ($isInterval ? 'none' : 'all')};\n\n    ${({ $isInterval, theme, $min, $max, $value }: StyledSliderInputProps) =>\n        !$isInterval &&\n        css`\n            background: ${`linear-gradient(\n            to right,\n            ${theme['409'] ?? ''} 0%,\n            ${theme['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${theme['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${theme['403'] ?? ''}\n        )`};\n        `}\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{ $position: number }>;\n\nexport const StyledSliderThumb = styled.div<StyledSliderThumbProps>`\n    min-width: 20px;\n    height: 20px;\n    background-color: ${({ theme }: StyledSliderThumbProps) => theme['100']};\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    left: ${({ $position }) => $position}px;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n\nexport const StyledSliderThumbLable = styled.span`\n    pointer-events: none;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,YAAY,GAAGF,MAAM,CAACG,GAAI;AACvC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AASD,OAAO,MAAMC,iBAAiB,GAAGJ,MAAM,CAACK,KAA8B;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,MAAM,GAAG,KAAK;AAAA,CAAE;AAC1E;AACA,MAAMC,KAAA;EAAA,IAAC;IAAED,WAAW;IAAEE,KAAK;IAAEC,IAAI;IAAEC,IAAI;IAAEC;EAA+B,CAAC,GAAAJ,KAAA;EAAA,OACjE,CAACD,WAAW,IACZN,GAAI;AACZ,0BAA2B;AAC3B;AACA,cAAcQ,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,cAAcA,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,cAAe,CAACG,MAAM,GAAGF,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAI;AACtD,cAAcD,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,cAAe,CAACG,MAAM,GAAGF,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAI;AACtD,cAAcD,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,UAAW;AACX,SAAS;AAAA,CAAC;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMI,iBAAiB,GAAGb,MAAM,CAACG,GAA4B;AACpE;AACA;AACA,wBAAwBW,KAAA;EAAA,IAAC;IAAEL;EAA8B,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA,YAAYM,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAKC,SAAS;AAAA,CAAC;AACzC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,sBAAsB,GAAGjB,MAAM,CAACkB,IAAK;AAClD;AACA,CAAC"}
+{"version":3,"file":"Slider.styles.js","names":["styled","css","StyledSlider","div","StyledSliderInput","input","_ref","$isInterval","_ref2","theme","$min","$max","$value","StyledSliderThumb","_ref3","_ref4","$position","StyledSliderThumbLable","span"],"sources":["../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n}>;\n\nexport const StyledSliderInput = styled.input<StyledSliderInputProps>`\n    position: absolute;\n    width: 100%;\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n    pointer-events: ${({ $isInterval }) => ($isInterval ? 'none' : 'all')};\n\n    ${({ $isInterval, theme, $min, $max, $value }: StyledSliderInputProps) =>\n        !$isInterval &&\n        css`\n            background: ${`linear-gradient(\n            to right,\n            ${theme['409'] ?? ''} 0%,\n            ${theme['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${theme['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${theme['403'] ?? ''}\n        )`};\n        `}\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{ $position: number }>;\n\nexport const StyledSliderThumb = styled.div<StyledSliderThumbProps>`\n    min-width: 20px;\n    height: 20px;\n    background-color: ${({ theme }: StyledSliderThumbProps) => theme['100']};\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    left: ${({ $position }) => $position}px;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n\nexport const StyledSliderThumbLable = styled.span`\n    pointer-events: none;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,YAAY,GAAGF,MAAM,CAACG,GAAI;AACvC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AASD,OAAO,MAAMC,iBAAiB,GAAGJ,MAAM,CAACK,KAA8B;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,MAAM,GAAG,KAAK;AAAA,CAAE;AAC1E;AACA,MAAMC,KAAA;EAAA,IAAC;IAAED,WAAW;IAAEE,KAAK;IAAEC,IAAI;IAAEC,IAAI;IAAEC;EAA+B,CAAC,GAAAJ,KAAA;EAAA,OACjE,CAACD,WAAW,IACZN,GAAI;AACZ,0BAA2B;AAC3B;AACA,cAAcQ,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,cAAcA,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,cAAe,CAACG,MAAM,GAAGF,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAI;AACtD,cAAcD,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,cAAe,CAACG,MAAM,GAAGF,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAI;AACtD,cAAcD,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,UAAW;AACX,SAAS;AAAA,CAAC;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMI,iBAAiB,GAAGb,MAAM,CAACG,GAA4B;AACpE;AACA;AACA,wBAAwBW,KAAA;EAAA,IAAC;IAAEL;EAA8B,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA,YAAYM,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAKC,SAAS;AAAA,CAAC;AACzC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,sBAAsB,GAAGjB,MAAM,CAACkB,IAAK;AAClD;AACA,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.504",
+    "version": "5.0.0-beta.511",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "8ceb1f31f717a8a4a623281afa6c8bbdc4dffaf1"
+    "gitHead": "4aaa572de9c5eac10dd290d118a64601b424579f"
 }