@chayns-components/core 5.1.0 → 5.2.0

package/lib/esm/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","StyledSearchInputPseudoElement","useTheme","useElementSize","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","Medium","value","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","trim","inputRef","pseudoRef","parentWidth","theme","handleBackIconClick","handleSearchIconClick","current","focus","blur","createElement","Fragment","className","$size","$shouldUseAbsolutePositioning","onClick","initial","animate","opacity","exit","key","transition","duration","type","shouldShowClearIcon","position","id","tabIndex","e","preventDefault","color","icons","leftElement","text","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n    StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether the SearchInput should be positioned absolute.\n     */\n    shouldUseAbsolutePositioning?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * The width of the parent.\n     */\n    width?: number;\n};\n\nconst SearchInput = forwardRef<InputRef, SearchInputProps>(\n    (\n        {\n            iconColor,\n            isActive,\n            onActiveChange,\n            onChange,\n            onKeyDown,\n            placeholder,\n            shouldUseAbsolutePositioning = false,\n            size = InputSize.Medium,\n            value,\n            width: widthValue,\n        },\n        ref,\n    ) => {\n        const [isSearchInputActive, setIsSearchInputActive] = useState(\n            isActive ?? (typeof value === 'string' && value.trim() !== ''),\n        );\n\n        const inputRef = useRef<InputRef>(null);\n        const pseudoRef = useRef<HTMLDivElement>(null);\n\n        const parentWidth = useElementSize(pseudoRef);\n\n        const theme = useTheme() as Theme;\n\n        const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n        const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n        useEffect(() => {\n            if (typeof onActiveChange === 'function') {\n                onActiveChange(isSearchInputActive);\n            }\n\n            if (isSearchInputActive) {\n                inputRef.current?.focus();\n            }\n        }, [isSearchInputActive, onActiveChange]);\n\n        useEffect(() => {\n            if (typeof isActive === 'boolean') {\n                setIsSearchInputActive(isActive);\n            }\n        }, [isActive]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n                blur: () => inputRef.current?.blur(),\n            }),\n            [],\n        );\n\n        const width = useMemo(\n            () => widthValue ?? parentWidth?.width,\n            [parentWidth?.width, widthValue],\n        );\n\n        return (\n            <>\n                <StyledSearchInput\n                    className=\"beta-chayns-search-input\"\n                    $size={size}\n                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                    onClick={() => {\n                        if (shouldUseAbsolutePositioning) {\n                            if (isSearchInputActive) {\n                                handleBackIconClick();\n                            } else {\n                                handleSearchIconClick();\n                            }\n                        }\n                    }}\n                >\n                    {shouldUseAbsolutePositioning ? (\n                        <AnimatePresence initial={false}>\n                            {isSearchInputActive && (\n                                <StyledMotionSearchInputContentWrapper\n                                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                    animate={{ opacity: 1, width }}\n                                    exit={{ opacity: 0, width: 0 }}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"searchInputContentWrapper\"\n                                    transition={{ duration: 0.25, type: 'tween' }}\n                                >\n                                    <Input\n                                        onChange={onChange}\n                                        onKeyDown={onKeyDown}\n                                        placeholder={placeholder}\n                                        ref={inputRef}\n                                        shouldShowClearIcon\n                                        size={size}\n                                        value={value}\n                                    />\n                                </StyledMotionSearchInputContentWrapper>\n                            )}\n                            <StyledMotionSearchInputIconWrapperContent\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0, position: 'absolute' }}\n                                initial={{ opacity: 0 }}\n                                key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                transition={{ duration: 0.3 }}\n                                id={\n                                    isSearchInputActive\n                                        ? 'search-input-backIcon'\n                                        : 'search-input-searchIcon'\n                                }\n                                tabIndex={0}\n                                onKeyDown={(e) => {\n                                    if (e.key === 'Enter') {\n                                        e.preventDefault();\n                                        if (isSearchInputActive) {\n                                            handleBackIconClick();\n                                        } else {\n                                            handleSearchIconClick();\n                                        }\n                                    }\n                                }}\n                            >\n                                <Icon\n                                    key=\"icon\"\n                                    color={iconColor}\n                                    tabIndex={-1}\n                                    icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                                    onClick={\n                                        isSearchInputActive\n                                            ? handleBackIconClick\n                                            : handleSearchIconClick\n                                    }\n                                />\n                            </StyledMotionSearchInputIconWrapperContent>\n                        </AnimatePresence>\n                    ) : (\n                        <>\n                            <StyledMotionSearchInputIconWrapper>\n                                <AnimatePresence initial={false}>\n                                    <StyledMotionSearchInputIconWrapperContent\n                                        animate={{ opacity: 1 }}\n                                        exit={{ opacity: 0, position: 'absolute' }}\n                                        initial={{ opacity: 0 }}\n                                        key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                        transition={{ duration: 0.3 }}\n                                        id={\n                                            isSearchInputActive\n                                                ? 'search-input-backIcon'\n                                                : 'search-input-searchIcon'\n                                        }\n                                        tabIndex={0}\n                                        onKeyDown={(e) => {\n                                            if (e.key === 'Enter') {\n                                                e.preventDefault();\n                                                if (isSearchInputActive) {\n                                                    handleBackIconClick();\n                                                } else {\n                                                    handleSearchIconClick();\n                                                }\n                                            }\n                                        }}\n                                    >\n                                        <Icon\n                                            key=\"icon\"\n                                            color={iconColor}\n                                            tabIndex={-1}\n                                            icons={\n                                                isSearchInputActive\n                                                    ? ['fa fa-arrow-left']\n                                                    : ['fa fa-search']\n                                            }\n                                            onClick={\n                                                isSearchInputActive\n                                                    ? handleBackIconClick\n                                                    : handleSearchIconClick\n                                            }\n                                        />\n                                    </StyledMotionSearchInputIconWrapperContent>\n                                </AnimatePresence>\n                            </StyledMotionSearchInputIconWrapper>\n                            <AnimatePresence initial={false}>\n                                {isSearchInputActive && (\n                                    <StyledMotionSearchInputContentWrapper\n                                        $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                        animate={{ opacity: 1, width: '100%' }}\n                                        exit={{ opacity: 0, width: 0 }}\n                                        initial={{ opacity: 0, width: 0 }}\n                                        key=\"searchInputContentWrapper\"\n                                        transition={{ duration: 0.3 }}\n                                    >\n                                        <Input\n                                            key=\"input\"\n                                            leftElement={\n                                                <Icon\n                                                    color={theme.text}\n                                                    icons={['far fa-search']}\n                                                />\n                                            }\n                                            onChange={onChange}\n                                            onKeyDown={onKeyDown}\n                                            placeholder={placeholder}\n                                            ref={inputRef}\n                                            shouldShowClearIcon\n                                            size={size}\n                                            value={value}\n                                        />\n                                    </StyledMotionSearchInputContentWrapper>\n                                )}\n                            </AnimatePresence>\n                        </>\n                    )}\n                </StyledSearchInput>\n                <StyledSearchInputPseudoElement ref={pseudoRef} />\n            </>\n        );\n    },\n);\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","StyledSearchInputPseudoElement","useTheme","useElementSize","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","Medium","value","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","trim","inputRef","pseudoRef","parentWidth","theme","handleBackIconClick","handleSearchIconClick","current","focus","blur","createElement","Fragment","className","$size","$shouldUseAbsolutePositioning","onClick","initial","animate","opacity","exit","key","transition","duration","type","shouldShowClearIcon","position","id","tabIndex","e","preventDefault","color","icons","leftElement","text","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n    StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether the SearchInput should be positioned absolute.\n     */\n    shouldUseAbsolutePositioning?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * The width of the parent.\n     */\n    width?: number;\n};\n\nconst SearchInput = forwardRef<InputRef, SearchInputProps>(\n    (\n        {\n            iconColor,\n            isActive,\n            onActiveChange,\n            onChange,\n            onKeyDown,\n            placeholder,\n            shouldUseAbsolutePositioning = false,\n            size = InputSize.Medium,\n            value,\n            width: widthValue,\n        },\n        ref,\n    ) => {\n        const [isSearchInputActive, setIsSearchInputActive] = useState(\n            isActive ?? (typeof value === 'string' && value.trim() !== ''),\n        );\n\n        const inputRef = useRef<InputRef>(null);\n        const pseudoRef = useRef<HTMLDivElement>(null);\n\n        const parentWidth = useElementSize(pseudoRef);\n\n        const theme = useTheme() as Theme;\n\n        const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n        const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n        useEffect(() => {\n            if (typeof onActiveChange === 'function') {\n                onActiveChange(isSearchInputActive);\n            }\n        }, [isSearchInputActive, onActiveChange]);\n\n        useEffect(() => {\n            if (isSearchInputActive) {\n                inputRef.current?.focus();\n            }\n        }, [isSearchInputActive]);\n\n        useEffect(() => {\n            if (typeof isActive === 'boolean') {\n                setIsSearchInputActive(isActive);\n            }\n        }, [isActive]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n                blur: () => inputRef.current?.blur(),\n            }),\n            [],\n        );\n\n        const width = useMemo(\n            () => widthValue ?? parentWidth?.width,\n            [parentWidth?.width, widthValue],\n        );\n\n        return (\n            <>\n                <StyledSearchInput\n                    className=\"beta-chayns-search-input\"\n                    $size={size}\n                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                    onClick={() => {\n                        if (shouldUseAbsolutePositioning) {\n                            if (isSearchInputActive) {\n                                handleBackIconClick();\n                            } else {\n                                handleSearchIconClick();\n                            }\n                        }\n                    }}\n                >\n                    {shouldUseAbsolutePositioning ? (\n                        <AnimatePresence initial={false}>\n                            {isSearchInputActive && (\n                                <StyledMotionSearchInputContentWrapper\n                                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                    animate={{ opacity: 1, width }}\n                                    exit={{ opacity: 0, width: 0 }}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"searchInputContentWrapper\"\n                                    transition={{ duration: 0.25, type: 'tween' }}\n                                >\n                                    <Input\n                                        onChange={onChange}\n                                        onKeyDown={onKeyDown}\n                                        placeholder={placeholder}\n                                        ref={inputRef}\n                                        shouldShowClearIcon\n                                        size={size}\n                                        value={value}\n                                    />\n                                </StyledMotionSearchInputContentWrapper>\n                            )}\n                            <StyledMotionSearchInputIconWrapperContent\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0, position: 'absolute' }}\n                                initial={{ opacity: 0 }}\n                                key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                transition={{ duration: 0.3 }}\n                                id={\n                                    isSearchInputActive\n                                        ? 'search-input-backIcon'\n                                        : 'search-input-searchIcon'\n                                }\n                                tabIndex={0}\n                                onKeyDown={(e) => {\n                                    if (e.key === 'Enter') {\n                                        e.preventDefault();\n                                        if (isSearchInputActive) {\n                                            handleBackIconClick();\n                                        } else {\n                                            handleSearchIconClick();\n                                        }\n                                    }\n                                }}\n                            >\n                                <Icon\n                                    key=\"icon\"\n                                    color={iconColor}\n                                    tabIndex={-1}\n                                    icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                                    onClick={\n                                        isSearchInputActive\n                                            ? handleBackIconClick\n                                            : handleSearchIconClick\n                                    }\n                                />\n                            </StyledMotionSearchInputIconWrapperContent>\n                        </AnimatePresence>\n                    ) : (\n                        <>\n                            <StyledMotionSearchInputIconWrapper>\n                                <AnimatePresence initial={false}>\n                                    <StyledMotionSearchInputIconWrapperContent\n                                        animate={{ opacity: 1 }}\n                                        exit={{ opacity: 0, position: 'absolute' }}\n                                        initial={{ opacity: 0 }}\n                                        key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                        transition={{ duration: 0.3 }}\n                                        id={\n                                            isSearchInputActive\n                                                ? 'search-input-backIcon'\n                                                : 'search-input-searchIcon'\n                                        }\n                                        tabIndex={0}\n                                        onKeyDown={(e) => {\n                                            if (e.key === 'Enter') {\n                                                e.preventDefault();\n                                                if (isSearchInputActive) {\n                                                    handleBackIconClick();\n                                                } else {\n                                                    handleSearchIconClick();\n                                                }\n                                            }\n                                        }}\n                                    >\n                                        <Icon\n                                            key=\"icon\"\n                                            color={iconColor}\n                                            tabIndex={-1}\n                                            icons={\n                                                isSearchInputActive\n                                                    ? ['fa fa-arrow-left']\n                                                    : ['fa fa-search']\n                                            }\n                                            onClick={\n                                                isSearchInputActive\n                                                    ? handleBackIconClick\n                                                    : handleSearchIconClick\n                                            }\n                                        />\n                                    </StyledMotionSearchInputIconWrapperContent>\n                                </AnimatePresence>\n                            </StyledMotionSearchInputIconWrapper>\n                            <AnimatePresence initial={false}>\n                                {isSearchInputActive && (\n                                    <StyledMotionSearchInputContentWrapper\n                                        $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                        animate={{ opacity: 1, width: '100%' }}\n                                        exit={{ opacity: 0, width: 0 }}\n                                        initial={{ opacity: 0, width: 0 }}\n                                        key=\"searchInputContentWrapper\"\n                                        transition={{ duration: 0.3 }}\n                                    >\n                                        <Input\n                                            key=\"input\"\n                                            leftElement={\n                                                <Icon\n                                                    color={theme.text}\n                                                    icons={['far fa-search']}\n                                                />\n                                            }\n                                            onChange={onChange}\n                                            onKeyDown={onKeyDown}\n                                            placeholder={placeholder}\n                                            ref={inputRef}\n                                            shouldShowClearIcon\n                                            size={size}\n                                            value={value}\n                                        />\n                                    </StyledMotionSearchInputContentWrapper>\n                                )}\n                            </AnimatePresence>\n                        </>\n                    )}\n                </StyledSearchInput>\n                <StyledSearchInputPseudoElement ref={pseudoRef} />\n            </>\n        );\n    },\n);\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/skeleton/base-skeleton/BaseSkeleton.js

@@ -0,0 +1,40 @@
+import React, { forwardRef } from 'react';
+import { StyledBaseSkeleton, StyledMotionBaseSkeletonPulse, StyledMotionBaseSkeletonShimmer } from './BaseSkeleton.styles';
+import { SkeletonAnimationType } from '../types';
+import { useSkeletonAnimation, useSkeletonContext } from '../skeleton-provider/SkeletonProvider';
+export const BaseSkeleton = /*#__PURE__*/forwardRef(({
+  baseColor,
+  highlightColor,
+  animationType,
+  height,
+  style,
+  width,
+  className,
+  borderRadius,
+  as,
+  children
+}, ref) => {
+  const values = useSkeletonContext();
+  const animationStyle = useSkeletonAnimation();
+  const resolvedAnimationType = animationType ?? values.animationType;
+  return /*#__PURE__*/React.createElement(StyledBaseSkeleton, {
+    as: as,
+    ref: ref,
+    className: className,
+    style: style,
+    $backgroundColor: baseColor ?? values.baseColor,
+    $borderRadius: borderRadius ?? values.borderRadius,
+    $height: height,
+    $width: width,
+    $shouldUseNativeTag: !!as
+  }, resolvedAnimationType === SkeletonAnimationType.SHIMMER && /*#__PURE__*/React.createElement(StyledMotionBaseSkeletonShimmer, {
+    $color: highlightColor ?? values.highlightColor,
+    style: animationStyle
+  }), resolvedAnimationType === SkeletonAnimationType.PULSE && /*#__PURE__*/React.createElement(StyledMotionBaseSkeletonPulse, {
+    $color: highlightColor ?? values.highlightColor,
+    style: animationStyle
+  }), children);
+});
+BaseSkeleton.displayName = 'BaseSkeleton';
+export default BaseSkeleton;
+//# sourceMappingURL=BaseSkeleton.js.map

package/lib/esm/components/skeleton/base-skeleton/BaseSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSkeleton.js","names":["React","forwardRef","StyledBaseSkeleton","StyledMotionBaseSkeletonPulse","StyledMotionBaseSkeletonShimmer","SkeletonAnimationType","useSkeletonAnimation","useSkeletonContext","BaseSkeleton","baseColor","highlightColor","animationType","height","style","width","className","borderRadius","as","children","ref","values","animationStyle","resolvedAnimationType","createElement","$backgroundColor","$borderRadius","$height","$width","$shouldUseNativeTag","SHIMMER","$color","PULSE","displayName"],"sources":["../../../../../src/components/skeleton/base-skeleton/BaseSkeleton.tsx"],"sourcesContent":["import React, { forwardRef, ReactHTML, ReactNode } from 'react';\nimport {\n    StyledBaseSkeleton,\n    StyledMotionBaseSkeletonPulse,\n    StyledMotionBaseSkeletonShimmer,\n} from './BaseSkeleton.styles';\nimport { BaseSkeletonConfig, SkeletonAnimationType } from '../types';\nimport { useSkeletonAnimation, useSkeletonContext } from '../skeleton-provider/SkeletonProvider';\n\nexport interface BaseSkeletonProps extends BaseSkeletonConfig {\n    width: number | string;\n    height: number | string;\n    as?: keyof ReactHTML;\n    children?: ReactNode;\n}\n\nexport const BaseSkeleton = forwardRef<HTMLDivElement, BaseSkeletonProps>(\n    (\n        {\n            baseColor,\n            highlightColor,\n            animationType,\n            height,\n            style,\n            width,\n            className,\n            borderRadius,\n            as,\n            children,\n        },\n        ref,\n    ) => {\n        const values = useSkeletonContext();\n        const animationStyle = useSkeletonAnimation();\n\n        const resolvedAnimationType = animationType ?? values.animationType;\n\n        return (\n            <StyledBaseSkeleton\n                as={as}\n                ref={ref}\n                className={className}\n                style={style}\n                $backgroundColor={baseColor ?? values.baseColor}\n                $borderRadius={borderRadius ?? values.borderRadius}\n                $height={height}\n                $width={width}\n                $shouldUseNativeTag={!!as}\n            >\n                {resolvedAnimationType === SkeletonAnimationType.SHIMMER && (\n                    <StyledMotionBaseSkeletonShimmer\n                        $color={highlightColor ?? values.highlightColor}\n                        style={animationStyle}\n                    />\n                )}\n                {resolvedAnimationType === SkeletonAnimationType.PULSE && (\n                    <StyledMotionBaseSkeletonPulse\n                        $color={highlightColor ?? values.highlightColor}\n                        style={animationStyle}\n                    />\n                )}\n                {children}\n            </StyledBaseSkeleton>\n        );\n    },\n);\n\nBaseSkeleton.displayName = 'BaseSkeleton';\n\nexport default BaseSkeleton;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAA8B,OAAO;AAC/D,SACIC,kBAAkB,EAClBC,6BAA6B,EAC7BC,+BAA+B,QAC5B,uBAAuB;AAC9B,SAA6BC,qBAAqB,QAAQ,UAAU;AACpE,SAASC,oBAAoB,EAAEC,kBAAkB,QAAQ,uCAAuC;AAShG,OAAO,MAAMC,YAAY,gBAAGP,UAAU,CAClC,CACI;EACIQ,SAAS;EACTC,cAAc;EACdC,aAAa;EACbC,MAAM;EACNC,KAAK;EACLC,KAAK;EACLC,SAAS;EACTC,YAAY;EACZC,EAAE;EACFC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAMC,MAAM,GAAGb,kBAAkB,CAAC,CAAC;EACnC,MAAMc,cAAc,GAAGf,oBAAoB,CAAC,CAAC;EAE7C,MAAMgB,qBAAqB,GAAGX,aAAa,IAAIS,MAAM,CAACT,aAAa;EAEnE,oBACIX,KAAA,CAAAuB,aAAA,CAACrB,kBAAkB;IACfe,EAAE,EAAEA,EAAG;IACPE,GAAG,EAAEA,GAAI;IACTJ,SAAS,EAAEA,SAAU;IACrBF,KAAK,EAAEA,KAAM;IACbW,gBAAgB,EAAEf,SAAS,IAAIW,MAAM,CAACX,SAAU;IAChDgB,aAAa,EAAET,YAAY,IAAII,MAAM,CAACJ,YAAa;IACnDU,OAAO,EAAEd,MAAO;IAChBe,MAAM,EAAEb,KAAM;IACdc,mBAAmB,EAAE,CAAC,CAACX;EAAG,GAEzBK,qBAAqB,KAAKjB,qBAAqB,CAACwB,OAAO,iBACpD7B,KAAA,CAAAuB,aAAA,CAACnB,+BAA+B;IAC5B0B,MAAM,EAAEpB,cAAc,IAAIU,MAAM,CAACV,cAAe;IAChDG,KAAK,EAAEQ;EAAe,CACzB,CACJ,EACAC,qBAAqB,KAAKjB,qBAAqB,CAAC0B,KAAK,iBAClD/B,KAAA,CAAAuB,aAAA,CAACpB,6BAA6B;IAC1B2B,MAAM,EAAEpB,cAAc,IAAIU,MAAM,CAACV,cAAe;IAChDG,KAAK,EAAEQ;EAAe,CACzB,CACJ,EACAH,QACe,CAAC;AAE7B,CACJ,CAAC;AAEDV,YAAY,CAACwB,WAAW,GAAG,cAAc;AAEzC,eAAexB,YAAY","ignoreList":[]}

package/lib/esm/components/skeleton/base-skeleton/BaseSkeleton.styles.js

@@ -0,0 +1,66 @@
+import styled, { css } from 'styled-components';
+import { motion } from 'motion/react';
+export const StyledBaseSkeleton = styled.div`
+    position: relative;
+    overflow: hidden;
+    border-radius: ${({
+  $borderRadius
+}) => `${$borderRadius}${typeof $borderRadius === 'number' ? 'px' : ''}`};
+
+    background-color: ${({
+  $backgroundColor
+}) => $backgroundColor};
+
+    width: ${({
+  $width
+}) => `${$width}${typeof $width === 'number' ? 'px' : ''}`};
+
+    user-select: none;
+
+    ${({
+  $shouldUseNativeTag,
+  $height
+}) => $shouldUseNativeTag ? css`
+                  color: transparent;
+              ` : css`
+                  height: ${$height}${typeof $height === 'number' ? 'px' : ''};
+              `}
+`;
+export const StyledMotionBaseSkeletonShimmer = styled(motion.div)`
+    background: ${({
+  $color
+}) => `linear-gradient(
+            90deg,
+            transparent 0%,
+            ${$color} 50%,
+            transparent 100%
+        )`};
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    pointer-events: none;
+    border-radius: 0;
+
+    will-change: transform;
+
+    opacity: 0.06;
+`;
+export const StyledMotionBaseSkeletonPulse = styled(motion.div)`
+    width: 100%;
+    height: 100%;
+
+    position: absolute;
+
+    opacity: 0.06;
+
+    background-color: ${({
+  $color
+}) => $color};
+`;
+//# sourceMappingURL=BaseSkeleton.styles.js.map

package/lib/esm/components/skeleton/base-skeleton/BaseSkeleton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSkeleton.styles.js","names":["styled","css","motion","StyledBaseSkeleton","div","$borderRadius","$backgroundColor","$width","$shouldUseNativeTag","$height","StyledMotionBaseSkeletonShimmer","$color","StyledMotionBaseSkeletonPulse"],"sources":["../../../../../src/components/skeleton/base-skeleton/BaseSkeleton.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { motion } from 'motion/react';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledBaseSkeletonProps = WithTheme<{\n    $borderRadius: number | string;\n    $backgroundColor: string;\n    $width: number | string;\n    $height: number | string;\n    $shouldUseNativeTag: boolean;\n}>;\n\nexport const StyledBaseSkeleton = styled.div<StyledBaseSkeletonProps>`\n    position: relative;\n    overflow: hidden;\n    border-radius: ${({ $borderRadius }) =>\n        `${$borderRadius}${typeof $borderRadius === 'number' ? 'px' : ''}`};\n\n    background-color: ${({ $backgroundColor }) => $backgroundColor};\n\n    width: ${({ $width }) => `${$width}${typeof $width === 'number' ? 'px' : ''}`};\n\n    user-select: none;\n\n    ${({ $shouldUseNativeTag, $height }) =>\n        $shouldUseNativeTag\n            ? css`\n                  color: transparent;\n              `\n            : css`\n                  height: ${$height}${typeof $height === 'number' ? 'px' : ''};\n              `}\n`;\n\ntype StyledMotionBaseSkeletonShimmerProps = WithTheme<{\n    $color: string;\n}>;\n\nexport const StyledMotionBaseSkeletonShimmer = styled(\n    motion.div,\n)<StyledMotionBaseSkeletonShimmerProps>`\n    background: ${({ $color }) =>\n        `linear-gradient(\n            90deg,\n            transparent 0%,\n            ${$color} 50%,\n            transparent 100%\n        )`};\n\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n\n    width: 100%;\n    height: 100%;\n\n    pointer-events: none;\n    border-radius: 0;\n\n    will-change: transform;\n\n    opacity: 0.06;\n`;\n\ntype StyledMotionBaseSkeletonPulseProps = WithTheme<{\n    $color: string;\n}>;\n\nexport const StyledMotionBaseSkeletonPulse = styled(motion.div)<StyledMotionBaseSkeletonPulseProps>`\n    width: 100%;\n    height: 100%;\n\n    position: absolute;\n\n    opacity: 0.06;\n\n    background-color: ${({ $color }) => $color};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,MAAM,QAAQ,cAAc;AAWrC,OAAO,MAAMC,kBAAkB,GAAGH,MAAM,CAACI,GAA4B;AACrE;AACA;AACA,qBAAqB,CAAC;EAAEC;AAAc,CAAC,KAC/B,GAAGA,aAAa,GAAG,OAAOA,aAAa,KAAK,QAAQ,GAAG,IAAI,GAAG,EAAE,EAAE;AAC1E;AACA,wBAAwB,CAAC;EAAEC;AAAiB,CAAC,KAAKA,gBAAgB;AAClE;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAK,GAAGA,MAAM,GAAG,OAAOA,MAAM,KAAK,QAAQ,GAAG,IAAI,GAAG,EAAE,EAAE;AACjF;AACA;AACA;AACA,MAAM,CAAC;EAAEC,mBAAmB;EAAEC;AAAQ,CAAC,KAC/BD,mBAAmB,GACbP,GAAG;AACjB;AACA,eAAe,GACDA,GAAG;AACjB,4BAA4BQ,OAAO,GAAG,OAAOA,OAAO,KAAK,QAAQ,GAAG,IAAI,GAAG,EAAE;AAC7E,eAAe;AACf,CAAC;AAMD,OAAO,MAAMC,+BAA+B,GAAGV,MAAM,CACjDE,MAAM,CAACE,GACX,CAAuC;AACvC,kBAAkB,CAAC;EAAEO;AAAO,CAAC,KACrB;AACR;AACA;AACA,cAAcA,MAAM;AACpB;AACA,UAAU;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,6BAA6B,GAAGZ,MAAM,CAACE,MAAM,CAACE,GAAG,CAAqC;AACnG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEO;AAAO,CAAC,KAAKA,MAAM;AAC9C,CAAC","ignoreList":[]}

package/lib/esm/components/skeleton/index.js

@@ -0,0 +1,27 @@
+import SkeletonProvider from './skeleton-provider/SkeletonProvider';
+import BoxSkeleton from './variants/box-skeleton/BoxSkeleton';
+import CircleSkeleton from './variants/circle-skeleton/CircleSkeleton';
+import { H1Skeleton, H2Skeleton, H3Skeleton, H4Skeleton, H5Skeleton, H6Skeleton } from './variants/headline-skeleton/HeadlineSkeleton';
+import TextSkeleton from './variants/text-skeleton/TextSkeleton';
+import ButtonSkeleton from './variants/button-skeleton/ButtonSkeleton';
+import BadgeSkeleton from './variants/badge-skeleton/BadgeSkeleton';
+import ListItemSkeleton from './variants/list-item-skeleton/ListItemSkeleton';
+import AccordionSkeleton from './variants/accordion-skeleton/AccordionSkeleton';
+const Skeleton = {
+  Config: SkeletonProvider,
+  Box: BoxSkeleton,
+  Circle: CircleSkeleton,
+  H1: H1Skeleton,
+  H2: H2Skeleton,
+  H3: H3Skeleton,
+  H4: H4Skeleton,
+  H5: H5Skeleton,
+  H6: H6Skeleton,
+  Text: TextSkeleton,
+  Button: ButtonSkeleton,
+  Badge: BadgeSkeleton,
+  ListItem: ListItemSkeleton,
+  Accordion: AccordionSkeleton
+};
+export default Skeleton;
+//# sourceMappingURL=index.js.map

package/lib/esm/components/skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["SkeletonProvider","BoxSkeleton","CircleSkeleton","H1Skeleton","H2Skeleton","H3Skeleton","H4Skeleton","H5Skeleton","H6Skeleton","TextSkeleton","ButtonSkeleton","BadgeSkeleton","ListItemSkeleton","AccordionSkeleton","Skeleton","Config","Box","Circle","H1","H2","H3","H4","H5","H6","Text","Button","Badge","ListItem","Accordion"],"sources":["../../../../src/components/skeleton/index.ts"],"sourcesContent":["import SkeletonProvider from './skeleton-provider/SkeletonProvider';\nimport BoxSkeleton from './variants/box-skeleton/BoxSkeleton';\nimport CircleSkeleton from './variants/circle-skeleton/CircleSkeleton';\nimport {\n    H1Skeleton,\n    H2Skeleton,\n    H3Skeleton,\n    H4Skeleton,\n    H5Skeleton,\n    H6Skeleton,\n} from './variants/headline-skeleton/HeadlineSkeleton';\nimport TextSkeleton from './variants/text-skeleton/TextSkeleton';\nimport ButtonSkeleton from './variants/button-skeleton/ButtonSkeleton';\nimport BadgeSkeleton from './variants/badge-skeleton/BadgeSkeleton';\nimport ListItemSkeleton from './variants/list-item-skeleton/ListItemSkeleton';\nimport AccordionSkeleton from './variants/accordion-skeleton/AccordionSkeleton';\n\ninterface SkeletonNamespace {\n    Config: typeof SkeletonProvider;\n    Box: typeof BoxSkeleton;\n    Circle: typeof CircleSkeleton;\n    H1: typeof H1Skeleton;\n    H2: typeof H2Skeleton;\n    H3: typeof H3Skeleton;\n    H4: typeof H4Skeleton;\n    H5: typeof H5Skeleton;\n    H6: typeof H6Skeleton;\n    Text: typeof TextSkeleton;\n    Button: typeof ButtonSkeleton;\n    Badge: typeof BadgeSkeleton;\n    ListItem: typeof ListItemSkeleton;\n    Accordion: typeof AccordionSkeleton;\n}\n\nconst Skeleton: SkeletonNamespace = {\n    Config: SkeletonProvider,\n    Box: BoxSkeleton,\n    Circle: CircleSkeleton,\n    H1: H1Skeleton,\n    H2: H2Skeleton,\n    H3: H3Skeleton,\n    H4: H4Skeleton,\n    H5: H5Skeleton,\n    H6: H6Skeleton,\n    Text: TextSkeleton,\n    Button: ButtonSkeleton,\n    Badge: BadgeSkeleton,\n    ListItem: ListItemSkeleton,\n    Accordion: AccordionSkeleton,\n};\n\nexport default Skeleton;\n"],"mappings":"AAAA,OAAOA,gBAAgB,MAAM,sCAAsC;AACnE,OAAOC,WAAW,MAAM,qCAAqC;AAC7D,OAAOC,cAAc,MAAM,2CAA2C;AACtE,SACIC,UAAU,EACVC,UAAU,EACVC,UAAU,EACVC,UAAU,EACVC,UAAU,EACVC,UAAU,QACP,+CAA+C;AACtD,OAAOC,YAAY,MAAM,uCAAuC;AAChE,OAAOC,cAAc,MAAM,2CAA2C;AACtE,OAAOC,aAAa,MAAM,yCAAyC;AACnE,OAAOC,gBAAgB,MAAM,gDAAgD;AAC7E,OAAOC,iBAAiB,MAAM,iDAAiD;AAmB/E,MAAMC,QAA2B,GAAG;EAChCC,MAAM,EAAEf,gBAAgB;EACxBgB,GAAG,EAAEf,WAAW;EAChBgB,MAAM,EAAEf,cAAc;EACtBgB,EAAE,EAAEf,UAAU;EACdgB,EAAE,EAAEf,UAAU;EACdgB,EAAE,EAAEf,UAAU;EACdgB,EAAE,EAAEf,UAAU;EACdgB,EAAE,EAAEf,UAAU;EACdgB,EAAE,EAAEf,UAAU;EACdgB,IAAI,EAAEf,YAAY;EAClBgB,MAAM,EAAEf,cAAc;EACtBgB,KAAK,EAAEf,aAAa;EACpBgB,QAAQ,EAAEf,gBAAgB;EAC1BgB,SAAS,EAAEf;AACf,CAAC;AAED,eAAeC,QAAQ","ignoreList":[]}

package/lib/esm/components/skeleton/skeleton-provider/SkeletonProvider.js

@@ -0,0 +1,79 @@
+import React, { createContext, useContext, useEffect } from 'react';
+import { ColorMode, useSite } from 'chayns-api';
+import { SkeletonAnimationType } from '../types';
+import { animate, useMotionValue, useTransform } from 'motion/react';
+export const SkeletonContext = /*#__PURE__*/createContext(undefined);
+SkeletonContext.displayName = 'SkeletonContext';
+export const useSkeletonConfig = ({
+  highlightColor,
+  baseColor,
+  animationType = SkeletonAnimationType.PULSE,
+  borderRadius = 4
+}) => {
+  const {
+    colorMode
+  } = useSite();
+  const progress = useMotionValue(0);
+  useEffect(() => {
+    const controls = animate(progress, 1, {
+      duration: 2.4,
+      repeat: Infinity,
+      repeatType: 'loop',
+      ease: 'linear'
+    });
+    return controls.stop;
+  }, [progress]);
+  const defaultHighlightColor = colorMode === ColorMode.Dark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)';
+  const defaultBaseColor = colorMode === ColorMode.Dark ? '#262626' : '#e5e5e5';
+  return {
+    animationType,
+    borderRadius,
+    baseColor: baseColor ?? defaultBaseColor,
+    highlightColor: highlightColor ?? defaultHighlightColor,
+    progress
+  };
+};
+export const useSkeletonAnimation = () => {
+  const {
+    animationType,
+    progress
+  } = useSkeletonContext();
+  const opacity = useTransform(progress, [0, 0.5, 1], [0.06, 0.18, 0.06]);
+  const x = useTransform(progress, [0, 1], ['-100%', '100%']);
+  if (animationType === SkeletonAnimationType.PULSE) {
+    return {
+      opacity
+    };
+  }
+  return {
+    x
+  };
+};
+export const useSkeletonContext = () => {
+  const defaultValues = useSkeletonConfig({});
+  const context = useContext(SkeletonContext);
+  if (!context) {
+    return defaultValues;
+  }
+  return context;
+};
+const SkeletonProvider = ({
+  animationType = SkeletonAnimationType.PULSE,
+  baseColor,
+  highlightColor,
+  borderRadius = 4,
+  children
+}) => {
+  const value = useSkeletonConfig({
+    baseColor,
+    borderRadius,
+    highlightColor,
+    animationType
+  });
+  return /*#__PURE__*/React.createElement(SkeletonContext.Provider, {
+    value: value
+  }, children);
+};
+SkeletonProvider.displayName = 'Skeleton.Config';
+export default SkeletonProvider;
+//# sourceMappingURL=SkeletonProvider.js.map

package/lib/esm/components/skeleton/skeleton-provider/SkeletonProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonProvider.js","names":["React","createContext","useContext","useEffect","ColorMode","useSite","SkeletonAnimationType","animate","useMotionValue","useTransform","SkeletonContext","undefined","displayName","useSkeletonConfig","highlightColor","baseColor","animationType","PULSE","borderRadius","colorMode","progress","controls","duration","repeat","Infinity","repeatType","ease","stop","defaultHighlightColor","Dark","defaultBaseColor","useSkeletonAnimation","useSkeletonContext","opacity","x","defaultValues","context","SkeletonProvider","children","value","createElement","Provider"],"sources":["../../../../../src/components/skeleton/skeleton-provider/SkeletonProvider.tsx"],"sourcesContent":["import React, { createContext, FC, ReactNode, useContext, useEffect } from 'react';\nimport { ColorMode, useSite } from 'chayns-api';\nimport { SkeletonAnimationType } from '../types';\nimport { animate, useMotionValue, MotionValue, useTransform } from 'motion/react';\n\nexport interface ISkeletonContext {\n    animationType?: SkeletonAnimationType;\n    borderRadius?: number | string;\n    baseColor?: string;\n    highlightColor?: string;\n    progress?: MotionValue<number>;\n}\n\nexport const SkeletonContext = createContext<ISkeletonContext | undefined>(undefined);\n\nSkeletonContext.displayName = 'SkeletonContext';\n\nexport const useSkeletonConfig = ({\n    highlightColor,\n    baseColor,\n    animationType = SkeletonAnimationType.PULSE,\n    borderRadius = 4,\n}: ISkeletonContext) => {\n    const { colorMode } = useSite();\n\n    const progress = useMotionValue(0);\n\n    useEffect(() => {\n        const controls = animate(progress, 1, {\n            duration: 2.4,\n            repeat: Infinity,\n            repeatType: 'loop',\n            ease: 'linear',\n        });\n\n        return controls.stop;\n    }, [progress]);\n\n    const defaultHighlightColor =\n        colorMode === ColorMode.Dark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)';\n\n    const defaultBaseColor = colorMode === ColorMode.Dark ? '#262626' : '#e5e5e5';\n\n    return {\n        animationType,\n        borderRadius,\n        baseColor: baseColor ?? defaultBaseColor,\n        highlightColor: highlightColor ?? defaultHighlightColor,\n        progress,\n    };\n};\n\nexport const useSkeletonAnimation = () => {\n    const { animationType, progress } = useSkeletonContext();\n\n    const opacity = useTransform(progress, [0, 0.5, 1], [0.06, 0.18, 0.06]);\n\n    const x = useTransform(progress, [0, 1], ['-100%', '100%']);\n\n    if (animationType === SkeletonAnimationType.PULSE) {\n        return { opacity };\n    }\n\n    return { x };\n};\n\nexport const useSkeletonContext = () => {\n    const defaultValues = useSkeletonConfig({});\n\n    const context = useContext(SkeletonContext);\n\n    if (!context) {\n        return defaultValues;\n    }\n\n    return context as Required<ISkeletonContext>;\n};\n\nexport interface SkeletonProviderProps extends ISkeletonContext {\n    children: ReactNode;\n}\n\nconst SkeletonProvider: FC<SkeletonProviderProps> = ({\n    animationType = SkeletonAnimationType.PULSE,\n    baseColor,\n    highlightColor,\n    borderRadius = 4,\n    children,\n}) => {\n    const value = useSkeletonConfig({ baseColor, borderRadius, highlightColor, animationType });\n\n    return <SkeletonContext.Provider value={value}>{children}</SkeletonContext.Provider>;\n};\n\nSkeletonProvider.displayName = 'Skeleton.Config';\n\nexport default SkeletonProvider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAiBC,UAAU,EAAEC,SAAS,QAAQ,OAAO;AAClF,SAASC,SAAS,EAAEC,OAAO,QAAQ,YAAY;AAC/C,SAASC,qBAAqB,QAAQ,UAAU;AAChD,SAASC,OAAO,EAAEC,cAAc,EAAeC,YAAY,QAAQ,cAAc;AAUjF,OAAO,MAAMC,eAAe,gBAAGT,aAAa,CAA+BU,SAAS,CAAC;AAErFD,eAAe,CAACE,WAAW,GAAG,iBAAiB;AAE/C,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAC9BC,cAAc;EACdC,SAAS;EACTC,aAAa,GAAGV,qBAAqB,CAACW,KAAK;EAC3CC,YAAY,GAAG;AACD,CAAC,KAAK;EACpB,MAAM;IAAEC;EAAU,CAAC,GAAGd,OAAO,CAAC,CAAC;EAE/B,MAAMe,QAAQ,GAAGZ,cAAc,CAAC,CAAC,CAAC;EAElCL,SAAS,CAAC,MAAM;IACZ,MAAMkB,QAAQ,GAAGd,OAAO,CAACa,QAAQ,EAAE,CAAC,EAAE;MAClCE,QAAQ,EAAE,GAAG;MACbC,MAAM,EAAEC,QAAQ;MAChBC,UAAU,EAAE,MAAM;MAClBC,IAAI,EAAE;IACV,CAAC,CAAC;IAEF,OAAOL,QAAQ,CAACM,IAAI;EACxB,CAAC,EAAE,CAACP,QAAQ,CAAC,CAAC;EAEd,MAAMQ,qBAAqB,GACvBT,SAAS,KAAKf,SAAS,CAACyB,IAAI,GAAG,wBAAwB,GAAG,kBAAkB;EAEhF,MAAMC,gBAAgB,GAAGX,SAAS,KAAKf,SAAS,CAACyB,IAAI,GAAG,SAAS,GAAG,SAAS;EAE7E,OAAO;IACHb,aAAa;IACbE,YAAY;IACZH,SAAS,EAAEA,SAAS,IAAIe,gBAAgB;IACxChB,cAAc,EAAEA,cAAc,IAAIc,qBAAqB;IACvDR;EACJ,CAAC;AACL,CAAC;AAED,OAAO,MAAMW,oBAAoB,GAAGA,CAAA,KAAM;EACtC,MAAM;IAAEf,aAAa;IAAEI;EAAS,CAAC,GAAGY,kBAAkB,CAAC,CAAC;EAExD,MAAMC,OAAO,GAAGxB,YAAY,CAACW,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;EAEvE,MAAMc,CAAC,GAAGzB,YAAY,CAACW,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;EAE3D,IAAIJ,aAAa,KAAKV,qBAAqB,CAACW,KAAK,EAAE;IAC/C,OAAO;MAAEgB;IAAQ,CAAC;EACtB;EAEA,OAAO;IAAEC;EAAE,CAAC;AAChB,CAAC;AAED,OAAO,MAAMF,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAMG,aAAa,GAAGtB,iBAAiB,CAAC,CAAC,CAAC,CAAC;EAE3C,MAAMuB,OAAO,GAAGlC,UAAU,CAACQ,eAAe,CAAC;EAE3C,IAAI,CAAC0B,OAAO,EAAE;IACV,OAAOD,aAAa;EACxB;EAEA,OAAOC,OAAO;AAClB,CAAC;AAMD,MAAMC,gBAA2C,GAAGA,CAAC;EACjDrB,aAAa,GAAGV,qBAAqB,CAACW,KAAK;EAC3CF,SAAS;EACTD,cAAc;EACdI,YAAY,GAAG,CAAC;EAChBoB;AACJ,CAAC,KAAK;EACF,MAAMC,KAAK,GAAG1B,iBAAiB,CAAC;IAAEE,SAAS;IAAEG,YAAY;IAAEJ,cAAc;IAAEE;EAAc,CAAC,CAAC;EAE3F,oBAAOhB,KAAA,CAAAwC,aAAA,CAAC9B,eAAe,CAAC+B,QAAQ;IAACF,KAAK,EAAEA;EAAM,GAAED,QAAmC,CAAC;AACxF,CAAC;AAEDD,gBAAgB,CAACzB,WAAW,GAAG,iBAAiB;AAEhD,eAAeyB,gBAAgB","ignoreList":[]}

package/lib/esm/components/skeleton/types.js

@@ -0,0 +1,7 @@
+export let SkeletonAnimationType = /*#__PURE__*/function (SkeletonAnimationType) {
+  SkeletonAnimationType["SHIMMER"] = "SHIMMER";
+  SkeletonAnimationType["PULSE"] = "PULSE";
+  SkeletonAnimationType["NONE"] = "NONE";
+  return SkeletonAnimationType;
+}({});
+//# sourceMappingURL=types.js.map

package/lib/esm/components/skeleton/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["SkeletonAnimationType"],"sources":["../../../../src/components/skeleton/types.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport enum SkeletonAnimationType {\n    SHIMMER = 'SHIMMER',\n    PULSE = 'PULSE',\n    NONE = 'NONE',\n}\n\nexport interface BaseSkeletonConfig {\n    animationType?: SkeletonAnimationType;\n    borderRadius?: number | string;\n    baseColor?: string;\n    highlightColor?: string;\n    className?: string;\n    style?: CSSProperties;\n}\n"],"mappings":"AAEA,WAAYA,qBAAqB,0BAArBA,qBAAqB;EAArBA,qBAAqB;EAArBA,qBAAqB;EAArBA,qBAAqB;EAAA,OAArBA,qBAAqB;AAAA","ignoreList":[]}

package/lib/esm/components/skeleton/variants/accordion-skeleton/AccordionSkeleton.js

@@ -0,0 +1,33 @@
+import React, { forwardRef } from 'react';
+import { StyledAccordionSkeleton } from './AccordionSkeleton.styles';
+import BoxSkeleton from '../box-skeleton/BoxSkeleton';
+import SkeletonProvider, { useSkeletonContext } from '../../skeleton-provider/SkeletonProvider';
+const AccordionSkeleton = /*#__PURE__*/forwardRef(({
+  className,
+  baseColor,
+  highlightColor,
+  style,
+  animationType,
+  borderRadius
+}, ref) => {
+  const context = useSkeletonContext();
+  return /*#__PURE__*/React.createElement(StyledAccordionSkeleton, {
+    className: className,
+    style: style,
+    ref: ref
+  }, /*#__PURE__*/React.createElement(SkeletonProvider, {
+    highlightColor: highlightColor ?? context.highlightColor,
+    baseColor: baseColor ?? context.baseColor,
+    animationType: animationType ?? context.animationType,
+    borderRadius: borderRadius ?? context.borderRadius
+  }, /*#__PURE__*/React.createElement(BoxSkeleton, {
+    height: 16,
+    width: 16
+  }), /*#__PURE__*/React.createElement(BoxSkeleton, {
+    height: 22,
+    width: "60%"
+  })));
+});
+AccordionSkeleton.displayName = 'Skeleton.Accordion';
+export default AccordionSkeleton;
+//# sourceMappingURL=AccordionSkeleton.js.map

package/lib/esm/components/skeleton/variants/accordion-skeleton/AccordionSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionSkeleton.js","names":["React","forwardRef","StyledAccordionSkeleton","BoxSkeleton","SkeletonProvider","useSkeletonContext","AccordionSkeleton","className","baseColor","highlightColor","style","animationType","borderRadius","ref","context","createElement","height","width","displayName"],"sources":["../../../../../../src/components/skeleton/variants/accordion-skeleton/AccordionSkeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { BaseSkeletonConfig } from '../../types';\nimport { StyledAccordionSkeleton } from './AccordionSkeleton.styles';\nimport BoxSkeleton from '../box-skeleton/BoxSkeleton';\nimport SkeletonProvider, { useSkeletonContext } from '../../skeleton-provider/SkeletonProvider';\n\nconst AccordionSkeleton = forwardRef<HTMLDivElement, BaseSkeletonConfig>(\n    ({ className, baseColor, highlightColor, style, animationType, borderRadius }, ref) => {\n        const context = useSkeletonContext();\n\n        return (\n            <StyledAccordionSkeleton className={className} style={style} ref={ref}>\n                <SkeletonProvider\n                    highlightColor={highlightColor ?? context.highlightColor}\n                    baseColor={baseColor ?? context.baseColor}\n                    animationType={animationType ?? context.animationType}\n                    borderRadius={borderRadius ?? context.borderRadius}\n                >\n                    <BoxSkeleton height={16} width={16} />\n                    <BoxSkeleton height={22} width=\"60%\" />\n                </SkeletonProvider>\n            </StyledAccordionSkeleton>\n        );\n    },\n);\n\nAccordionSkeleton.displayName = 'Skeleton.Accordion';\n\nexport default AccordionSkeleton;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,SAASC,uBAAuB,QAAQ,4BAA4B;AACpE,OAAOC,WAAW,MAAM,6BAA6B;AACrD,OAAOC,gBAAgB,IAAIC,kBAAkB,QAAQ,0CAA0C;AAE/F,MAAMC,iBAAiB,gBAAGL,UAAU,CAChC,CAAC;EAAEM,SAAS;EAAEC,SAAS;EAAEC,cAAc;EAAEC,KAAK;EAAEC,aAAa;EAAEC;AAAa,CAAC,EAAEC,GAAG,KAAK;EACnF,MAAMC,OAAO,GAAGT,kBAAkB,CAAC,CAAC;EAEpC,oBACIL,KAAA,CAAAe,aAAA,CAACb,uBAAuB;IAACK,SAAS,EAAEA,SAAU;IAACG,KAAK,EAAEA,KAAM;IAACG,GAAG,EAAEA;EAAI,gBAClEb,KAAA,CAAAe,aAAA,CAACX,gBAAgB;IACbK,cAAc,EAAEA,cAAc,IAAIK,OAAO,CAACL,cAAe;IACzDD,SAAS,EAAEA,SAAS,IAAIM,OAAO,CAACN,SAAU;IAC1CG,aAAa,EAAEA,aAAa,IAAIG,OAAO,CAACH,aAAc;IACtDC,YAAY,EAAEA,YAAY,IAAIE,OAAO,CAACF;EAAa,gBAEnDZ,KAAA,CAAAe,aAAA,CAACZ,WAAW;IAACa,MAAM,EAAE,EAAG;IAACC,KAAK,EAAE;EAAG,CAAE,CAAC,eACtCjB,KAAA,CAAAe,aAAA,CAACZ,WAAW;IAACa,MAAM,EAAE,EAAG;IAACC,KAAK,EAAC;EAAK,CAAE,CACxB,CACG,CAAC;AAElC,CACJ,CAAC;AAEDX,iBAAiB,CAACY,WAAW,GAAG,oBAAoB;AAEpD,eAAeZ,iBAAiB","ignoreList":[]}

package/lib/esm/components/skeleton/variants/accordion-skeleton/AccordionSkeleton.styles.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+export const StyledAccordionSkeleton = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: 35px;
+    margin-top: 6px;
+`;
+//# sourceMappingURL=AccordionSkeleton.styles.js.map

package/lib/esm/components/skeleton/variants/accordion-skeleton/AccordionSkeleton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionSkeleton.styles.js","names":["styled","StyledAccordionSkeleton","div"],"sources":["../../../../../../src/components/skeleton/variants/accordion-skeleton/AccordionSkeleton.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledAccordionSkeleton = styled.div`\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    height: 35px;\n    margin-top: 6px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACE,GAAG;AACjD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/skeleton/variants/badge-skeleton/BadgeSkeleton.js

@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react';
+import { BaseSkeleton } from '../../base-skeleton/BaseSkeleton';
+const BadgeSkeleton = /*#__PURE__*/forwardRef(({
+  className,
+  baseColor,
+  highlightColor,
+  style,
+  animationType,
+  width = 24
+}, ref) => /*#__PURE__*/React.createElement(BaseSkeleton, {
+  width: width,
+  height: 24,
+  borderRadius: "50%",
+  animationType: animationType,
+  baseColor: baseColor,
+  className: className,
+  style: style,
+  highlightColor: highlightColor,
+  ref: ref
+}));
+BadgeSkeleton.displayName = 'Skeleton.Badge';
+export default BadgeSkeleton;
+//# sourceMappingURL=BadgeSkeleton.js.map

package/lib/esm/components/skeleton/variants/badge-skeleton/BadgeSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeSkeleton.js","names":["React","forwardRef","BaseSkeleton","BadgeSkeleton","className","baseColor","highlightColor","style","animationType","width","ref","createElement","height","borderRadius","displayName"],"sources":["../../../../../../src/components/skeleton/variants/badge-skeleton/BadgeSkeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { BaseSkeleton } from '../../base-skeleton/BaseSkeleton';\nimport { BaseSkeletonConfig } from '../../types';\n\ninterface BadgeSkeletonProps extends BaseSkeletonConfig {\n    width: number | string;\n}\n\nconst BadgeSkeleton = forwardRef<HTMLDivElement, Omit<BadgeSkeletonProps, 'borderRadius'>>(\n    ({ className, baseColor, highlightColor, style, animationType, width = 24 }, ref) => (\n        <BaseSkeleton\n            width={width}\n            height={24}\n            borderRadius=\"50%\"\n            animationType={animationType}\n            baseColor={baseColor}\n            className={className}\n            style={style}\n            highlightColor={highlightColor}\n            ref={ref}\n        />\n    ),\n);\n\nBadgeSkeleton.displayName = 'Skeleton.Badge';\n\nexport default BadgeSkeleton;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,YAAY,QAAQ,kCAAkC;AAO/D,MAAMC,aAAa,gBAAGF,UAAU,CAC5B,CAAC;EAAEG,SAAS;EAAEC,SAAS;EAAEC,cAAc;EAAEC,KAAK;EAAEC,aAAa;EAAEC,KAAK,GAAG;AAAG,CAAC,EAAEC,GAAG,kBAC5EV,KAAA,CAAAW,aAAA,CAACT,YAAY;EACTO,KAAK,EAAEA,KAAM;EACbG,MAAM,EAAE,EAAG;EACXC,YAAY,EAAC,KAAK;EAClBL,aAAa,EAAEA,aAAc;EAC7BH,SAAS,EAAEA,SAAU;EACrBD,SAAS,EAAEA,SAAU;EACrBG,KAAK,EAAEA,KAAM;EACbD,cAAc,EAAEA,cAAe;EAC/BI,GAAG,EAAEA;AAAI,CACZ,CAET,CAAC;AAEDP,aAAa,CAACW,WAAW,GAAG,gBAAgB;AAE5C,eAAeX,aAAa","ignoreList":[]}

package/lib/esm/components/skeleton/variants/box-skeleton/BoxSkeleton.js

@@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react';
+import { BaseSkeleton } from '../../base-skeleton/BaseSkeleton';
+const BoxSkeleton = /*#__PURE__*/forwardRef(({
+  className,
+  baseColor,
+  highlightColor,
+  style,
+  borderRadius,
+  animationType,
+  height,
+  width
+}, ref) => /*#__PURE__*/React.createElement(BaseSkeleton, {
+  width: width,
+  height: height,
+  borderRadius: borderRadius,
+  animationType: animationType,
+  baseColor: baseColor,
+  className: className,
+  style: style,
+  highlightColor: highlightColor,
+  ref: ref
+}));
+BoxSkeleton.displayName = 'Skeleton.Box';
+export default BoxSkeleton;
+//# sourceMappingURL=BoxSkeleton.js.map

package/lib/esm/components/skeleton/variants/box-skeleton/BoxSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxSkeleton.js","names":["React","forwardRef","BaseSkeleton","BoxSkeleton","className","baseColor","highlightColor","style","borderRadius","animationType","height","width","ref","createElement","displayName"],"sources":["../../../../../../src/components/skeleton/variants/box-skeleton/BoxSkeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { BaseSkeleton } from '../../base-skeleton/BaseSkeleton';\nimport { BaseSkeletonConfig } from '../../types';\n\ninterface BoxSkeletonProps extends BaseSkeletonConfig {\n    height: number | string;\n    width: number | string;\n}\n\nconst BoxSkeleton = forwardRef<HTMLDivElement, BoxSkeletonProps>(\n    (\n        { className, baseColor, highlightColor, style, borderRadius, animationType, height, width },\n        ref,\n    ) => (\n        <BaseSkeleton\n            width={width}\n            height={height}\n            borderRadius={borderRadius}\n            animationType={animationType}\n            baseColor={baseColor}\n            className={className}\n            style={style}\n            highlightColor={highlightColor}\n            ref={ref}\n        />\n    ),\n);\n\nBoxSkeleton.displayName = 'Skeleton.Box';\n\nexport default BoxSkeleton;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,YAAY,QAAQ,kCAAkC;AAQ/D,MAAMC,WAAW,gBAAGF,UAAU,CAC1B,CACI;EAAEG,SAAS;EAAEC,SAAS;EAAEC,cAAc;EAAEC,KAAK;EAAEC,YAAY;EAAEC,aAAa;EAAEC,MAAM;EAAEC;AAAM,CAAC,EAC3FC,GAAG,kBAEHZ,KAAA,CAAAa,aAAA,CAACX,YAAY;EACTS,KAAK,EAAEA,KAAM;EACbD,MAAM,EAAEA,MAAO;EACfF,YAAY,EAAEA,YAAa;EAC3BC,aAAa,EAAEA,aAAc;EAC7BJ,SAAS,EAAEA,SAAU;EACrBD,SAAS,EAAEA,SAAU;EACrBG,KAAK,EAAEA,KAAM;EACbD,cAAc,EAAEA,cAAe;EAC/BM,GAAG,EAAEA;AAAI,CACZ,CAET,CAAC;AAEDT,WAAW,CAACW,WAAW,GAAG,cAAc;AAExC,eAAeX,WAAW","ignoreList":[]}

package/lib/esm/components/skeleton/variants/button-skeleton/ButtonSkeleton.js

@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react';
+import { BaseSkeleton } from '../../base-skeleton/BaseSkeleton';
+const ButtonSkeleton = /*#__PURE__*/forwardRef(({
+  className,
+  baseColor,
+  highlightColor,
+  style,
+  animationType,
+  shouldRoundCorners = false
+}, ref) => /*#__PURE__*/React.createElement(BaseSkeleton, {
+  width: 100,
+  height: 34,
+  borderRadius: shouldRoundCorners ? '50%' : 3,
+  animationType: animationType,
+  baseColor: baseColor,
+  className: className,
+  style: style,
+  highlightColor: highlightColor,
+  ref: ref
+}));
+ButtonSkeleton.displayName = 'Skeleton.Button';
+export default ButtonSkeleton;
+//# sourceMappingURL=ButtonSkeleton.js.map

package/lib/esm/components/skeleton/variants/button-skeleton/ButtonSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSkeleton.js","names":["React","forwardRef","BaseSkeleton","ButtonSkeleton","className","baseColor","highlightColor","style","animationType","shouldRoundCorners","ref","createElement","width","height","borderRadius","displayName"],"sources":["../../../../../../src/components/skeleton/variants/button-skeleton/ButtonSkeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { BaseSkeleton } from '../../base-skeleton/BaseSkeleton';\nimport { BaseSkeletonConfig } from '../../types';\n\ninterface ButtonSkeletonProps extends BaseSkeletonConfig {\n    shouldRoundCorners?: boolean;\n}\n\nconst ButtonSkeleton = forwardRef<HTMLDivElement, Omit<ButtonSkeletonProps, 'borderRadius'>>(\n    (\n        { className, baseColor, highlightColor, style, animationType, shouldRoundCorners = false },\n        ref,\n    ) => (\n        <BaseSkeleton\n            width={100}\n            height={34}\n            borderRadius={shouldRoundCorners ? '50%' : 3}\n            animationType={animationType}\n            baseColor={baseColor}\n            className={className}\n            style={style}\n            highlightColor={highlightColor}\n            ref={ref}\n        />\n    ),\n);\n\nButtonSkeleton.displayName = 'Skeleton.Button';\n\nexport default ButtonSkeleton;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,YAAY,QAAQ,kCAAkC;AAO/D,MAAMC,cAAc,gBAAGF,UAAU,CAC7B,CACI;EAAEG,SAAS;EAAEC,SAAS;EAAEC,cAAc;EAAEC,KAAK;EAAEC,aAAa;EAAEC,kBAAkB,GAAG;AAAM,CAAC,EAC1FC,GAAG,kBAEHV,KAAA,CAAAW,aAAA,CAACT,YAAY;EACTU,KAAK,EAAE,GAAI;EACXC,MAAM,EAAE,EAAG;EACXC,YAAY,EAAEL,kBAAkB,GAAG,KAAK,GAAG,CAAE;EAC7CD,aAAa,EAAEA,aAAc;EAC7BH,SAAS,EAAEA,SAAU;EACrBD,SAAS,EAAEA,SAAU;EACrBG,KAAK,EAAEA,KAAM;EACbD,cAAc,EAAEA,cAAe;EAC/BI,GAAG,EAAEA;AAAI,CACZ,CAET,CAAC;AAEDP,cAAc,CAACY,WAAW,GAAG,iBAAiB;AAE9C,eAAeZ,cAAc","ignoreList":[]}

package/lib/esm/components/skeleton/variants/circle-skeleton/CircleSkeleton.js

@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react';
+import { BaseSkeleton } from '../../base-skeleton/BaseSkeleton';
+const CircleSkeleton = /*#__PURE__*/forwardRef(({
+  className,
+  baseColor,
+  highlightColor,
+  style,
+  animationType,
+  size
+}, ref) => /*#__PURE__*/React.createElement(BaseSkeleton, {
+  width: size,
+  height: size,
+  borderRadius: "100%",
+  animationType: animationType,
+  baseColor: baseColor,
+  className: className,
+  style: style,
+  highlightColor: highlightColor,
+  ref: ref
+}));
+CircleSkeleton.displayName = 'Skeleton.Box';
+export default CircleSkeleton;
+//# sourceMappingURL=CircleSkeleton.js.map

package/lib/esm/components/skeleton/variants/circle-skeleton/CircleSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircleSkeleton.js","names":["React","forwardRef","BaseSkeleton","CircleSkeleton","className","baseColor","highlightColor","style","animationType","size","ref","createElement","width","height","borderRadius","displayName"],"sources":["../../../../../../src/components/skeleton/variants/circle-skeleton/CircleSkeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { BaseSkeleton } from '../../base-skeleton/BaseSkeleton';\nimport { BaseSkeletonConfig } from '../../types';\n\ninterface CircleSkeletonProps extends BaseSkeletonConfig {\n    size: number;\n}\n\nconst CircleSkeleton = forwardRef<HTMLDivElement, Omit<CircleSkeletonProps, 'borderRadius'>>(\n    ({ className, baseColor, highlightColor, style, animationType, size }, ref) => (\n        <BaseSkeleton\n            width={size}\n            height={size}\n            borderRadius=\"100%\"\n            animationType={animationType}\n            baseColor={baseColor}\n            className={className}\n            style={style}\n            highlightColor={highlightColor}\n            ref={ref}\n        />\n    ),\n);\n\nCircleSkeleton.displayName = 'Skeleton.Box';\n\nexport default CircleSkeleton;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,YAAY,QAAQ,kCAAkC;AAO/D,MAAMC,cAAc,gBAAGF,UAAU,CAC7B,CAAC;EAAEG,SAAS;EAAEC,SAAS;EAAEC,cAAc;EAAEC,KAAK;EAAEC,aAAa;EAAEC;AAAK,CAAC,EAAEC,GAAG,kBACtEV,KAAA,CAAAW,aAAA,CAACT,YAAY;EACTU,KAAK,EAAEH,IAAK;EACZI,MAAM,EAAEJ,IAAK;EACbK,YAAY,EAAC,MAAM;EACnBN,aAAa,EAAEA,aAAc;EAC7BH,SAAS,EAAEA,SAAU;EACrBD,SAAS,EAAEA,SAAU;EACrBG,KAAK,EAAEA,KAAM;EACbD,cAAc,EAAEA,cAAe;EAC/BI,GAAG,EAAEA;AAAI,CACZ,CAET,CAAC;AAEDP,cAAc,CAACY,WAAW,GAAG,cAAc;AAE3C,eAAeZ,cAAc","ignoreList":[]}

package/lib/esm/components/skeleton/variants/headline-skeleton/HeadlineSkeleton.js

@@ -0,0 +1,43 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { forwardRef } from 'react';
+import { BaseSkeleton } from '../../base-skeleton/BaseSkeleton';
+const BaseHeadlineSkeleton = /*#__PURE__*/forwardRef(({
+  className,
+  baseColor,
+  highlightColor,
+  style,
+  borderRadius,
+  animationType,
+  width = '60%',
+  type
+}, ref) => /*#__PURE__*/React.createElement(BaseSkeleton, {
+  as: type,
+  ref: ref,
+  width: width,
+  height: 0,
+  borderRadius: borderRadius,
+  animationType: animationType,
+  baseColor: baseColor,
+  className: className,
+  style: style,
+  highlightColor: highlightColor
+}, "Pseudo Headline"));
+BaseHeadlineSkeleton.displayName = 'BaseHeadlineSkeleton';
+const createHeadlineSkeleton = (type, displayName) => {
+  const Component = /*#__PURE__*/forwardRef((props, ref) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  React.createElement(BaseHeadlineSkeleton, _extends({
+    ref: ref,
+    type: type
+  }, props)));
+  Component.displayName = displayName;
+  return Component;
+};
+export const H1Skeleton = createHeadlineSkeleton('h1', 'Skeleton.H1');
+export const H2Skeleton = createHeadlineSkeleton('h2', 'Skeleton.H2');
+export const H3Skeleton = createHeadlineSkeleton('h3', 'Skeleton.H3');
+export const H4Skeleton = createHeadlineSkeleton('h4', 'Skeleton.H4');
+export const H5Skeleton = createHeadlineSkeleton('h5', 'Skeleton.H5');
+export const H6Skeleton = createHeadlineSkeleton('h6', 'Skeleton.H6');
+//# sourceMappingURL=HeadlineSkeleton.js.map

package/lib/esm/components/skeleton/variants/headline-skeleton/HeadlineSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeadlineSkeleton.js","names":["React","forwardRef","BaseSkeleton","BaseHeadlineSkeleton","className","baseColor","highlightColor","style","borderRadius","animationType","width","type","ref","createElement","as","height","displayName","createHeadlineSkeleton","Component","props","_extends","H1Skeleton","H2Skeleton","H3Skeleton","H4Skeleton","H5Skeleton","H6Skeleton"],"sources":["../../../../../../src/components/skeleton/variants/headline-skeleton/HeadlineSkeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { BaseSkeleton } from '../../base-skeleton/BaseSkeleton';\nimport { BaseSkeletonConfig } from '../../types';\n\ntype HeadlineType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\ninterface BaseHeadlineSkeletonProps extends BaseSkeletonConfig {\n    width?: number | string;\n    type: HeadlineType;\n}\n\ninterface HeadlineSkeletonProps extends BaseSkeletonConfig {\n    width?: number | string;\n}\n\nconst BaseHeadlineSkeleton = forwardRef<HTMLDivElement, BaseHeadlineSkeletonProps>(\n    (\n        {\n            className,\n            baseColor,\n            highlightColor,\n            style,\n            borderRadius,\n            animationType,\n            width = '60%',\n            type,\n        },\n        ref,\n    ) => (\n        <BaseSkeleton\n            as={type}\n            ref={ref}\n            width={width}\n            height={0}\n            borderRadius={borderRadius}\n            animationType={animationType}\n            baseColor={baseColor}\n            className={className}\n            style={style}\n            highlightColor={highlightColor}\n        >\n            Pseudo Headline\n        </BaseSkeleton>\n    ),\n);\n\nBaseHeadlineSkeleton.displayName = 'BaseHeadlineSkeleton';\n\nconst createHeadlineSkeleton = (type: HeadlineType, displayName: string) => {\n    const Component = forwardRef<HTMLDivElement, HeadlineSkeletonProps>((props, ref) => (\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        <BaseHeadlineSkeleton ref={ref} type={type} {...props} />\n    ));\n\n    Component.displayName = displayName;\n\n    return Component;\n};\n\nexport const H1Skeleton = createHeadlineSkeleton('h1', 'Skeleton.H1');\nexport const H2Skeleton = createHeadlineSkeleton('h2', 'Skeleton.H2');\nexport const H3Skeleton = createHeadlineSkeleton('h3', 'Skeleton.H3');\nexport const H4Skeleton = createHeadlineSkeleton('h4', 'Skeleton.H4');\nexport const H5Skeleton = createHeadlineSkeleton('h5', 'Skeleton.H5');\nexport const H6Skeleton = createHeadlineSkeleton('h6', 'Skeleton.H6');\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,YAAY,QAAQ,kCAAkC;AAc/D,MAAMC,oBAAoB,gBAAGF,UAAU,CACnC,CACI;EACIG,SAAS;EACTC,SAAS;EACTC,cAAc;EACdC,KAAK;EACLC,YAAY;EACZC,aAAa;EACbC,KAAK,GAAG,KAAK;EACbC;AACJ,CAAC,EACDC,GAAG,kBAEHZ,KAAA,CAAAa,aAAA,CAACX,YAAY;EACTY,EAAE,EAAEH,IAAK;EACTC,GAAG,EAAEA,GAAI;EACTF,KAAK,EAAEA,KAAM;EACbK,MAAM,EAAE,CAAE;EACVP,YAAY,EAAEA,YAAa;EAC3BC,aAAa,EAAEA,aAAc;EAC7BJ,SAAS,EAAEA,SAAU;EACrBD,SAAS,EAAEA,SAAU;EACrBG,KAAK,EAAEA,KAAM;EACbD,cAAc,EAAEA;AAAe,GAClC,iBAEa,CAEtB,CAAC;AAEDH,oBAAoB,CAACa,WAAW,GAAG,sBAAsB;AAEzD,MAAMC,sBAAsB,GAAGA,CAACN,IAAkB,EAAEK,WAAmB,KAAK;EACxE,MAAME,SAAS,gBAAGjB,UAAU,CAAwC,CAACkB,KAAK,EAAEP,GAAG;EAAA;EAC3E;EACAZ,KAAA,CAAAa,aAAA,CAACV,oBAAoB,EAAAiB,QAAA;IAACR,GAAG,EAAEA,GAAI;IAACD,IAAI,EAAEA;EAAK,GAAKQ,KAAK,CAAG,CAC3D,CAAC;EAEFD,SAAS,CAACF,WAAW,GAAGA,WAAW;EAEnC,OAAOE,SAAS;AACpB,CAAC;AAED,OAAO,MAAMG,UAAU,GAAGJ,sBAAsB,CAAC,IAAI,EAAE,aAAa,CAAC;AACrE,OAAO,MAAMK,UAAU,GAAGL,sBAAsB,CAAC,IAAI,EAAE,aAAa,CAAC;AACrE,OAAO,MAAMM,UAAU,GAAGN,sBAAsB,CAAC,IAAI,EAAE,aAAa,CAAC;AACrE,OAAO,MAAMO,UAAU,GAAGP,sBAAsB,CAAC,IAAI,EAAE,aAAa,CAAC;AACrE,OAAO,MAAMQ,UAAU,GAAGR,sBAAsB,CAAC,IAAI,EAAE,aAAa,CAAC;AACrE,OAAO,MAAMS,UAAU,GAAGT,sBAAsB,CAAC,IAAI,EAAE,aAAa,CAAC","ignoreList":[]}