@rio-cloud/rio-uikit 2.0.1 → 2.2.0

package/components/dialog/DialogHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogHeader.js","sources":["../../../src/components/dialog/DialogHeader.tsx"],"sourcesContent":["import React, { type ComponentProps } from 'react';\nimport { noop } from 'es-toolkit/function';\nimport classNames from 'classnames';\n\nimport { useDialogContext } from './dialogContext';\n\nexport type DialogHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {\n    /**\n     * The dialog title (can also be a FormattedMessage component).\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The dialog header subtitle content.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Allows to add additional buttons to the dialog header.\n     */\n    headerButtons?: React.ReactNode;\n\n    onCloseButtonClick?: () => void;\n};\n\nconst DialogHeader = (props: DialogHeaderProps) => {\n    const { title, subtitle, headerButtons, onCloseButtonClick = noop, ...remainingProps } = props;\n\n    const { onClose, isSmallestDialog, showXsDialogBorders, showCloseButton } = useDialogContext();\n\n    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;\n\n    const doShowCloseButton = isSmallestDialog ? false : showCloseButton;\n\n    const headerClasses = classNames('modal-header', !doShowXsDialogBorders && 'border-bottom-none');\n    const headerTextClasses = classNames(\n        'modal-header-text',\n        !doShowXsDialogBorders && 'padding-bottom-0 width-100pct'\n    );\n\n    const handleClose = (event: React.MouseEvent<HTMLButtonElement>) => {\n        onCloseButtonClick();\n        onClose(event);\n    };\n\n    return (\n        <div {...remainingProps} className={headerClasses} aria-label='dialog header'>\n            <div className={headerTextClasses}>\n                {subtitle && <div className='modal-header-subtitle'>{subtitle}</div>}\n                <div className='modal-header-title'>{title}</div>\n            </div>\n            <div className='modal-header-buttons'>\n                {headerButtons && !isSmallestDialog && (\n                    <React.Fragment>\n                        {headerButtons}\n                        <div className='modal-header-buttons-spacer' />\n                    </React.Fragment>\n                )}\n                {doShowCloseButton && (\n                    <button\n                        type='button'\n                        className='btn btn-icon-only btn-muted modal-header-close close'\n                        onClick={handleClose}\n                        data-testid='close'\n                        aria-label='dialog close button'\n                    >\n                        <span className='rioglyph rioglyph-remove' aria-hidden='true' />\n                    </button>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default DialogHeader;\n"],"names":["DialogHeader","props","title","subtitle","headerButtons","onCloseButtonClick","noop","remainingProps","onClose","isSmallestDialog","showXsDialogBorders","showCloseButton","useDialogContext","doShowXsDialogBorders","doShowCloseButton","headerClasses","classNames","headerTextClasses","handleClose","event","jsxs","jsx","React"],"mappings":";;;;;AAyBA,MAAMA,IAAe,CAACC,MAA6B;AAC/C,QAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,eAAAC,GAAe,oBAAAC,IAAqBC,GAAM,GAAGC,MAAmBN,GAEnF,EAAE,SAAAO,GAAS,kBAAAC,GAAkB,qBAAAC,GAAqB,iBAAAC,EAAA,IAAoBC,EAAA,GAEtEC,IAAwBJ,IAAmBC,IAAsB,IAEjEI,IAAoBL,IAAmB,KAAQE,GAE/CI,IAAgBC,EAAW,gBAAgB,CAACH,KAAyB,oBAAoB,GACzFI,IAAoBD;AAAA,IACtB;AAAA,IACA,CAACH,KAAyB;AAAA,EAAA,GAGxBK,IAAc,CAACC,MAA+C;AAChE,IAAAd,EAAA,GACAG,EAAQW,CAAK;AAAA,EACjB;AAEA,2BACK,OAAA,EAAK,GAAGZ,GAAgB,WAAWQ,GAAe,cAAW,iBAC1D,UAAA;AAAA,IAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GACX,UAAA;AAAA,MAAAd,KAAY,gBAAAkB,EAAC,OAAA,EAAI,WAAU,yBAAyB,UAAAlB,GAAS;AAAA,MAC9D,gBAAAkB,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAnB,EAAA,CAAM;AAAA,IAAA,GAC/C;AAAA,IACA,gBAAAkB,EAAC,OAAA,EAAI,WAAU,wBACV,UAAA;AAAA,MAAAhB,KAAiB,CAACK,KACf,gBAAAW,EAACE,EAAM,UAAN,EACI,UAAA;AAAA,QAAAlB;AAAA,QACD,gBAAAiB,EAAC,OAAA,EAAI,WAAU,8BAAA,CAA8B;AAAA,MAAA,GACjD;AAAA,MAEHP,KACG,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAASH;AAAA,UACT,eAAY;AAAA,UACZ,cAAW;AAAA,UAEX,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,4BAA2B,eAAY,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAClE,EAAA,CAER;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"DialogHeader.js","sources":["../../../src/components/dialog/DialogHeader.tsx"],"sourcesContent":["import React, { type ComponentProps } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { useDialogContext } from './dialogContext';\n\nexport type DialogHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {\n    /**\n     * The dialog title (can also be a FormattedMessage component).\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The dialog header subtitle content.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Allows to add additional buttons to the dialog header.\n     */\n    headerButtons?: React.ReactNode;\n\n    onCloseButtonClick?: () => void;\n};\n\nconst DialogHeader = (props: DialogHeaderProps) => {\n    const { title, subtitle, headerButtons, onCloseButtonClick = noop, ...remainingProps } = props;\n\n    const { onClose, isSmallestDialog, showXsDialogBorders, showCloseButton } = useDialogContext();\n\n    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;\n\n    const doShowCloseButton = isSmallestDialog ? false : showCloseButton;\n\n    const headerClasses = classNames('modal-header', !doShowXsDialogBorders && 'border-bottom-none');\n    const headerTextClasses = classNames(\n        'modal-header-text',\n        !doShowXsDialogBorders && 'padding-bottom-0 width-100pct'\n    );\n\n    const handleClose = (event: React.MouseEvent<HTMLButtonElement>) => {\n        onCloseButtonClick();\n        onClose(event);\n    };\n\n    return (\n        <div {...remainingProps} className={headerClasses} aria-label='dialog header'>\n            <div className={headerTextClasses}>\n                {subtitle && <div className='modal-header-subtitle'>{subtitle}</div>}\n                <div className='modal-header-title'>{title}</div>\n            </div>\n            <div className='modal-header-buttons'>\n                {headerButtons && !isSmallestDialog && (\n                    <React.Fragment>\n                        {headerButtons}\n                        <div className='modal-header-buttons-spacer' />\n                    </React.Fragment>\n                )}\n                {doShowCloseButton && (\n                    <button\n                        type='button'\n                        className='btn btn-icon-only btn-muted modal-header-close close'\n                        onClick={handleClose}\n                        data-testid='close'\n                        aria-label='dialog close button'\n                    >\n                        <span className='rioglyph rioglyph-remove' aria-hidden='true' />\n                    </button>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default DialogHeader;\n"],"names":["DialogHeader","props","title","subtitle","headerButtons","onCloseButtonClick","noop","remainingProps","onClose","isSmallestDialog","showXsDialogBorders","showCloseButton","useDialogContext","doShowXsDialogBorders","doShowCloseButton","headerClasses","classNames","headerTextClasses","handleClose","event","jsxs","jsx","React"],"mappings":";;;;;AAyBA,MAAMA,IAAe,CAACC,MAA6B;AAC/C,QAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,eAAAC,GAAe,oBAAAC,IAAqBC,GAAM,GAAGC,MAAmBN,GAEnF,EAAE,SAAAO,GAAS,kBAAAC,GAAkB,qBAAAC,GAAqB,iBAAAC,EAAA,IAAoBC,EAAA,GAEtEC,IAAwBJ,IAAmBC,IAAsB,IAEjEI,IAAoBL,IAAmB,KAAQE,GAE/CI,IAAgBC,EAAW,gBAAgB,CAACH,KAAyB,oBAAoB,GACzFI,IAAoBD;AAAA,IACtB;AAAA,IACA,CAACH,KAAyB;AAAA,EAAA,GAGxBK,IAAc,CAACC,MAA+C;AAChE,IAAAd,EAAA,GACAG,EAAQW,CAAK;AAAA,EACjB;AAEA,2BACK,OAAA,EAAK,GAAGZ,GAAgB,WAAWQ,GAAe,cAAW,iBAC1D,UAAA;AAAA,IAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GACX,UAAA;AAAA,MAAAd,KAAY,gBAAAkB,EAAC,OAAA,EAAI,WAAU,yBAAyB,UAAAlB,GAAS;AAAA,MAC9D,gBAAAkB,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAnB,EAAA,CAAM;AAAA,IAAA,GAC/C;AAAA,IACA,gBAAAkB,EAAC,OAAA,EAAI,WAAU,wBACV,UAAA;AAAA,MAAAhB,KAAiB,CAACK,KACf,gBAAAW,EAACE,EAAM,UAAN,EACI,UAAA;AAAA,QAAAlB;AAAA,QACD,gBAAAiB,EAAC,OAAA,EAAI,WAAU,8BAAA,CAA8B;AAAA,MAAA,GACjD;AAAA,MAEHP,KACG,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAASH;AAAA,UACT,eAAY;AAAA,UACZ,cAAW;AAAA,UAEX,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,4BAA2B,eAAY,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAClE,EAAA,CAER;AAAA,EAAA,GACJ;AAER;"}

package/components/dialog/MediaDialog.js

@@ -1,6 +1,6 @@
 import { jsx as s, jsxs as i, Fragment as z } from "react/jsx-runtime";
 import { useState as F } from "react";
-import r from "classnames";
+import r from "../../utils/classNames.js";
 import { noop as a } from "es-toolkit/function";
 import R from "./Dialog.js";
 import Y from "../video/ResponsiveVideo.js";

package/components/dialog/MediaDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaDialog.js","sources":["../../../src/components/dialog/MediaDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport Dialog, { type BaseDialogProps } from './Dialog';\nimport ResponsiveVideo from '../video/ResponsiveVideo';\nimport ImagePreloader from '../preloader/ImagePreloader';\nimport Spinner from '../spinner/Spinner';\n\n// TODO: add keyboard support left/right\n\nexport type MediaDialogMedia = {\n    /**\n     * Defines the media type that is going to be displayed.\n     *\n     * Possible values are: `image` and `video`.\n     */\n    type: 'image' | 'video';\n\n    /**\n     * The source location for the media data.\n     */\n    src: string;\n\n    /**\n     * The name or title of the media used for the dialogs title.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Additional media information used for the dialogs subtitle.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Only relevant for videos where the aspect of the video is defined.\n     *\n     * Possible values are: `4by3` and `16by9`.\n     * @default '16by9'\n     */\n    aspectRatio?: '4by3' | '16by9';\n\n    /**\n     * Additional classes for the image element.\n     */\n    className?: string;\n};\n\nexport type MediaDialogProps = BaseDialogProps & {\n    /**\n     * List of media objects.\n     */\n    media: MediaDialogMedia[];\n\n    /**\n     * The button text for switching to the previous media if there are multiple.\n     */\n    previousButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the previous button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    previousButtonCallback?: (newIndex: number) => void;\n\n    /**\n     * The button text for switching to the next media if there are multiple.\n     */\n    nextButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the next button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    nextButtonCallback?: (newIndex: number) => void;\n};\n\nconst MediaDialog = (props: MediaDialogProps) => {\n    const {\n        show = false,\n        onClose = noop,\n        disableEsc = false,\n        useOverflow = false,\n        bsSize = 'lg',\n        media = [],\n        previousButtonText = 'Prev',\n        previousButtonCallback = noop,\n        nextButtonText = 'Next',\n        nextButtonCallback = noop,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [currentMediaIndex, setCurrentMediaIndex] = useState(0);\n\n    const handlePrevious = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === 0 ? props.media.length - 1 : oldIndex - 1;\n        setCurrentMediaIndex(newIndex);\n        previousButtonCallback(newIndex);\n    };\n\n    const handleNext = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === props.media.length - 1 ? 0 : oldIndex + 1;\n        setCurrentMediaIndex(newIndex);\n        nextButtonCallback(newIndex);\n    };\n\n    const renderFallback = () => {\n        return (\n            <div className='text-center text-size-h3'>\n                <span className='rioglyph rioglyph-missing text-size-200pct text-color-gray' />\n            </div>\n        );\n    };\n\n    const renderImage = (mediaData: MediaDialogMedia) => {\n        const imageClassNames = classNames('img-responsive', mediaData.className && mediaData.className);\n\n        return (\n            // @ts-ignore\n            <ImagePreloader src={mediaData.src} className={imageClassNames}>\n                {({ status, image }: { status: 'PENDING' | 'LOADED' | 'FAILED'; image: { src: string } }) => {\n                    if (status === ImagePreloader.STATUS_LOADED) {\n                        // When image has been loaded, render the image tag\n                        return <img className='ani-fade-in' key={image.src} src={image.src} />;\n                    }\n\n                    if (status === ImagePreloader.STATUS_FAILED) {\n                        return renderFallback();\n                    }\n\n                    return <Spinner isInverse={false} />;\n                }}\n            </ImagePreloader>\n        );\n    };\n\n    const renderVideo = (mediaData: MediaDialogMedia) => {\n        const videoClassNames = classNames(mediaData.className && mediaData.className);\n        return (\n            <div className='flex-1-0'>\n                <ResponsiveVideo\n                    src={mediaData.src}\n                    aspectRatio={mediaData.aspectRatio ?? '16by9'}\n                    className={videoClassNames}\n                />\n            </div>\n        );\n    };\n\n    const renderMediaContent = (mediaData = {} as MediaDialogMedia) => {\n        if (mediaData.type === MediaDialog.MEDIA_TYPE_VIDEO) {\n            return renderVideo(mediaData);\n        }\n\n        // image media is default\n        return mediaData.src && renderImage(mediaData);\n    };\n\n    const dialogClassName = classNames('media-dialog', className && className);\n    const bodyClassNames = classNames('padding-0');\n    const mediaContentClassNames = classNames('media-content', 'content-center');\n\n    const mediaTitle = media[currentMediaIndex].title;\n    const mediaSubtitle = media[currentMediaIndex].subtitle || null;\n\n    return (\n        <Dialog\n            {...remainingProps}\n            show={show}\n            title={mediaTitle}\n            subtitle={mediaSubtitle}\n            body={<div className={mediaContentClassNames}>{renderMediaContent(media[currentMediaIndex])}</div>}\n            footer={\n                media?.length > 1 && (\n                    <>\n                        <button type='button' className='btn btn-primary btn-link pull-left' onClick={handlePrevious}>\n                            <span className='rioglyph rioglyph-chevron-left' />\n                            {previousButtonText}\n                        </button>\n                        <div>{`${currentMediaIndex + 1} / ${props.media.length}`}</div>\n                        <button type='button' className='btn btn-primary btn-link btn-icon-right' onClick={handleNext}>\n                            <span className='rioglyph rioglyph-chevron-right' />\n                            {nextButtonText}\n                        </button>\n                    </>\n                )\n            }\n            onClose={onClose}\n            className={dialogClassName}\n            bodyClassName={bodyClassNames}\n            disableEsc={disableEsc}\n            useOverflow={useOverflow}\n            bsSize={bsSize}\n        />\n    );\n};\n\nMediaDialog.MEDIA_TYPE_IMAGE = 'image' as const;\nMediaDialog.MEDIA_TYPE_VIDEO = 'video' as const;\n\nexport default MediaDialog;\n"],"names":["MediaDialog","props","show","onClose","noop","disableEsc","useOverflow","bsSize","media","previousButtonText","previousButtonCallback","nextButtonText","nextButtonCallback","className","remainingProps","currentMediaIndex","setCurrentMediaIndex","useState","handlePrevious","oldIndex","newIndex","handleNext","renderFallback","jsx","renderImage","mediaData","imageClassNames","classNames","ImagePreloader","status","image","Spinner","renderVideo","videoClassNames","ResponsiveVideo","renderMediaContent","dialogClassName","bodyClassNames","mediaContentClassNames","mediaTitle","mediaSubtitle","Dialog","jsxs","Fragment"],"mappings":"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"}
+{"version":3,"file":"MediaDialog.js","sources":["../../../src/components/dialog/MediaDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport classNames from '../../utils/classNames';\nimport { noop } from 'es-toolkit/function';\n\nimport Dialog, { type BaseDialogProps } from './Dialog';\nimport ResponsiveVideo from '../video/ResponsiveVideo';\nimport ImagePreloader from '../preloader/ImagePreloader';\nimport Spinner from '../spinner/Spinner';\n\n// TODO: add keyboard support left/right\n\nexport type MediaDialogMedia = {\n    /**\n     * Defines the media type that is going to be displayed.\n     *\n     * Possible values are: `image` and `video`.\n     */\n    type: 'image' | 'video';\n\n    /**\n     * The source location for the media data.\n     */\n    src: string;\n\n    /**\n     * The name or title of the media used for the dialogs title.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Additional media information used for the dialogs subtitle.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Only relevant for videos where the aspect of the video is defined.\n     *\n     * Possible values are: `4by3` and `16by9`.\n     * @default '16by9'\n     */\n    aspectRatio?: '4by3' | '16by9';\n\n    /**\n     * Additional classes for the image element.\n     */\n    className?: string;\n};\n\nexport type MediaDialogProps = BaseDialogProps & {\n    /**\n     * List of media objects.\n     */\n    media: MediaDialogMedia[];\n\n    /**\n     * The button text for switching to the previous media if there are multiple.\n     */\n    previousButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the previous button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    previousButtonCallback?: (newIndex: number) => void;\n\n    /**\n     * The button text for switching to the next media if there are multiple.\n     */\n    nextButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the next button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    nextButtonCallback?: (newIndex: number) => void;\n};\n\nconst MediaDialog = (props: MediaDialogProps) => {\n    const {\n        show = false,\n        onClose = noop,\n        disableEsc = false,\n        useOverflow = false,\n        bsSize = 'lg',\n        media = [],\n        previousButtonText = 'Prev',\n        previousButtonCallback = noop,\n        nextButtonText = 'Next',\n        nextButtonCallback = noop,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [currentMediaIndex, setCurrentMediaIndex] = useState(0);\n\n    const handlePrevious = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === 0 ? props.media.length - 1 : oldIndex - 1;\n        setCurrentMediaIndex(newIndex);\n        previousButtonCallback(newIndex);\n    };\n\n    const handleNext = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === props.media.length - 1 ? 0 : oldIndex + 1;\n        setCurrentMediaIndex(newIndex);\n        nextButtonCallback(newIndex);\n    };\n\n    const renderFallback = () => {\n        return (\n            <div className='text-center text-size-h3'>\n                <span className='rioglyph rioglyph-missing text-size-200pct text-color-gray' />\n            </div>\n        );\n    };\n\n    const renderImage = (mediaData: MediaDialogMedia) => {\n        const imageClassNames = classNames('img-responsive', mediaData.className && mediaData.className);\n\n        return (\n            // @ts-ignore\n            <ImagePreloader src={mediaData.src} className={imageClassNames}>\n                {({ status, image }: { status: 'PENDING' | 'LOADED' | 'FAILED'; image: { src: string } }) => {\n                    if (status === ImagePreloader.STATUS_LOADED) {\n                        // When image has been loaded, render the image tag\n                        return <img className='ani-fade-in' key={image.src} src={image.src} />;\n                    }\n\n                    if (status === ImagePreloader.STATUS_FAILED) {\n                        return renderFallback();\n                    }\n\n                    return <Spinner isInverse={false} />;\n                }}\n            </ImagePreloader>\n        );\n    };\n\n    const renderVideo = (mediaData: MediaDialogMedia) => {\n        const videoClassNames = classNames(mediaData.className && mediaData.className);\n        return (\n            <div className='flex-1-0'>\n                <ResponsiveVideo\n                    src={mediaData.src}\n                    aspectRatio={mediaData.aspectRatio ?? '16by9'}\n                    className={videoClassNames}\n                />\n            </div>\n        );\n    };\n\n    const renderMediaContent = (mediaData = {} as MediaDialogMedia) => {\n        if (mediaData.type === MediaDialog.MEDIA_TYPE_VIDEO) {\n            return renderVideo(mediaData);\n        }\n\n        // image media is default\n        return mediaData.src && renderImage(mediaData);\n    };\n\n    const dialogClassName = classNames('media-dialog', className && className);\n    const bodyClassNames = classNames('padding-0');\n    const mediaContentClassNames = classNames('media-content', 'content-center');\n\n    const mediaTitle = media[currentMediaIndex].title;\n    const mediaSubtitle = media[currentMediaIndex].subtitle || null;\n\n    return (\n        <Dialog\n            {...remainingProps}\n            show={show}\n            title={mediaTitle}\n            subtitle={mediaSubtitle}\n            body={<div className={mediaContentClassNames}>{renderMediaContent(media[currentMediaIndex])}</div>}\n            footer={\n                media?.length > 1 && (\n                    <>\n                        <button type='button' className='btn btn-primary btn-link pull-left' onClick={handlePrevious}>\n                            <span className='rioglyph rioglyph-chevron-left' />\n                            {previousButtonText}\n                        </button>\n                        <div>{`${currentMediaIndex + 1} / ${props.media.length}`}</div>\n                        <button type='button' className='btn btn-primary btn-link btn-icon-right' onClick={handleNext}>\n                            <span className='rioglyph rioglyph-chevron-right' />\n                            {nextButtonText}\n                        </button>\n                    </>\n                )\n            }\n            onClose={onClose}\n            className={dialogClassName}\n            bodyClassName={bodyClassNames}\n            disableEsc={disableEsc}\n            useOverflow={useOverflow}\n            bsSize={bsSize}\n        />\n    );\n};\n\nMediaDialog.MEDIA_TYPE_IMAGE = 'image' as const;\nMediaDialog.MEDIA_TYPE_VIDEO = 'video' as const;\n\nexport default MediaDialog;\n"],"names":["MediaDialog","props","show","onClose","noop","disableEsc","useOverflow","bsSize","media","previousButtonText","previousButtonCallback","nextButtonText","nextButtonCallback","className","remainingProps","currentMediaIndex","setCurrentMediaIndex","useState","handlePrevious","oldIndex","newIndex","handleNext","renderFallback","jsx","renderImage","mediaData","imageClassNames","classNames","ImagePreloader","status","image","Spinner","renderVideo","videoClassNames","ResponsiveVideo","renderMediaContent","dialogClassName","bodyClassNames","mediaContentClassNames","mediaTitle","mediaSubtitle","Dialog","jsxs","Fragment"],"mappings":";;;;;;;;AAgFA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM;AAAA,IACF,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAUC;AAAA,IACV,YAAAC,IAAa;AAAA,IACb,aAAAC,IAAc;AAAA,IACd,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ,CAAA;AAAA,IACR,oBAAAC,IAAqB;AAAA,IACrB,wBAAAC,IAAyBN;AAAA,IACzB,gBAAAO,IAAiB;AAAA,IACjB,oBAAAC,IAAqBR;AAAA,IACrB,WAAAS;AAAA,IACA,GAAGC;AAAA,EAAA,IACHb,GAEE,CAACc,GAAmBC,CAAoB,IAAIC,EAAS,CAAC,GAEtDC,IAAiB,MAAM;AACzB,UAAMC,IAAWJ,GACXK,IAAWD,MAAa,IAAIlB,EAAM,MAAM,SAAS,IAAIkB,IAAW;AACtE,IAAAH,EAAqBI,CAAQ,GAC7BV,EAAuBU,CAAQ;AAAA,EACnC,GAEMC,IAAa,MAAM;AACrB,UAAMF,IAAWJ,GACXK,IAAWD,MAAalB,EAAM,MAAM,SAAS,IAAI,IAAIkB,IAAW;AACtE,IAAAH,EAAqBI,CAAQ,GAC7BR,EAAmBQ,CAAQ;AAAA,EAC/B,GAEME,IAAiB,MAEf,gBAAAC,EAAC,SAAI,WAAU,4BACX,4BAAC,QAAA,EAAK,WAAU,8DAA6D,EAAA,CACjF,GAIFC,IAAc,CAACC,MAAgC;AACjD,UAAMC,IAAkBC,EAAW,kBAAkBF,EAAU,aAAaA,EAAU,SAAS;AAE/F;AAAA;AAAA,MAEI,gBAAAF,EAACK,GAAA,EAAe,KAAKH,EAAU,KAAK,WAAWC,GAC1C,UAAA,CAAC,EAAE,QAAAG,GAAQ,OAAAC,EAAA,MACJD,MAAWD,EAAe,gBAEnB,gBAAAL,EAAC,SAAI,WAAU,eAA8B,KAAKO,EAAM,IAAA,GAAtBA,EAAM,GAAqB,IAGpED,MAAWD,EAAe,gBACnBN,EAAA,IAGJ,gBAAAC,EAACQ,GAAA,EAAQ,WAAW,GAAA,CAAO,EACtC,CACJ;AAAA;AAAA,EAER,GAEMC,IAAc,CAACP,MAAgC;AACjD,UAAMQ,IAAkBN,EAAWF,EAAU,aAAaA,EAAU,SAAS;AAC7E,WACI,gBAAAF,EAAC,OAAA,EAAI,WAAU,YACX,UAAA,gBAAAA;AAAA,MAACW;AAAA,MAAA;AAAA,QACG,KAAKT,EAAU;AAAA,QACf,aAAaA,EAAU,eAAe;AAAA,QACtC,WAAWQ;AAAA,MAAA;AAAA,IAAA,GAEnB;AAAA,EAER,GAEME,IAAqB,CAACV,IAAY,OAChCA,EAAU,SAASzB,EAAY,mBACxBgC,EAAYP,CAAS,IAIzBA,EAAU,OAAOD,EAAYC,CAAS,GAG3CW,IAAkBT,EAAW,gBAAgBd,KAAaA,CAAS,GACnEwB,IAAiBV,EAAW,WAAW,GACvCW,IAAyBX,EAAW,iBAAiB,gBAAgB,GAErEY,IAAa/B,EAAMO,CAAiB,EAAE,OACtCyB,IAAgBhC,EAAMO,CAAiB,EAAE,YAAY;AAE3D,SACI,gBAAAQ;AAAA,IAACkB;AAAA,IAAA;AAAA,MACI,GAAG3B;AAAA,MACJ,MAAAZ;AAAA,MACA,OAAOqC;AAAA,MACP,UAAUC;AAAA,MACV,wBAAO,OAAA,EAAI,WAAWF,GAAyB,UAAAH,EAAmB3B,EAAMO,CAAiB,CAAC,EAAA,CAAE;AAAA,MAC5F,QACIP,GAAO,SAAS,KACZ,gBAAAkC,EAAAC,GAAA,EACI,UAAA;AAAA,QAAA,gBAAAD,EAAC,YAAO,MAAK,UAAS,WAAU,sCAAqC,SAASxB,GAC1E,UAAA;AAAA,UAAA,gBAAAK,EAAC,QAAA,EAAK,WAAU,iCAAA,CAAiC;AAAA,UAChDd;AAAA,QAAA,GACL;AAAA,QACA,gBAAAc,EAAC,SAAK,UAAA,GAAGR,IAAoB,CAAC,MAAMd,EAAM,MAAM,MAAM,GAAA,CAAG;AAAA,0BACxD,UAAA,EAAO,MAAK,UAAS,WAAU,2CAA0C,SAASoB,GAC/E,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,kCAAA,CAAkC;AAAA,UACjDZ;AAAA,QAAA,EAAA,CACL;AAAA,MAAA,GACJ;AAAA,MAGR,SAAAR;AAAA,MACA,WAAWiC;AAAA,MACX,eAAeC;AAAA,MACf,YAAAhC;AAAA,MACA,aAAAC;AAAA,MACA,QAAAC;AAAA,IAAA;AAAA,EAAA;AAGZ;AAEAP,EAAY,mBAAmB;AAC/BA,EAAY,mBAAmB;"}

package/components/dialog/ReleaseNotesDialog.d.ts

@@ -6,6 +6,7 @@ export type ReleaseNotesDialogProps = {
     showReleaseNotes: boolean;
     /**
      * Callback set showReleaseNotes state
+     *
      * @param show
      * @returns
      */
@@ -26,8 +27,6 @@ export type ReleaseNotesDialogProps = {
      * Translated release notes.
      *
      * @example
-     *
-     * ```tsx
      * {
      *     "0.1.2": {
      *         date: '20.10.2023',
@@ -40,7 +39,6 @@ export type ReleaseNotesDialogProps = {
      *         ),
      *     }
      * }
-     * ```
      */
     translatedReleaseNotes: ReleaseNotesData;
     /**
@@ -54,6 +52,8 @@ export type ReleaseNotesDialogProps = {
     /**
      * Enables the content of the dialog to scroll when it overflows.
      * This means the dialog body scrolls instead of the entire dialog.
+     *
+     * @default true
      */
     useOverflow?: boolean;
 };

package/components/dialog/ReleaseNotesDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReleaseNotesDialog.js","sources":["../../../src/components/dialog/ReleaseNotesDialog.tsx"],"sourcesContent":["import ReleaseNotes, { type ReleaseNotesData } from '../releaseNotes/ReleaseNotes';\n\nimport Button from '../button/Button';\nimport Dialog from './Dialog';\n\nconst setReleaseNotesItem = (props: ReleaseNotesDialogProps) => {\n    window.localStorage.setItem(props.RELEASE_NOTES_ITEM, props.currentVersion);\n    props.setShowReleaseNotes(false);\n};\n\nconst getModuleName = (moduleName: string | undefined, whatsNew: string | undefined) => (\n    <span>{moduleName ? moduleName : whatsNew}</span>\n);\n\nexport type ReleaseNotesDialogProps = {\n    /**\n     * Decides if the dialog is opened.\n     */\n    showReleaseNotes: boolean;\n\n    /**\n     * Callback set showReleaseNotes state\n     * @param show\n     * @returns\n     */\n    setShowReleaseNotes: (show: boolean) => void;\n\n    /**\n     * Translated text for \"What`s new?\"\n     */\n    whatsNewTitle?: string;\n\n    /**\n     * The translated modulename.\n     */\n    moduleName?: string;\n\n    /**\n     * Translated text for the close button.\n     */\n    closeButtonText?: string;\n\n    /**\n     * Translated release notes.\n     *\n     * @example\n     *\n     * ```tsx\n     * {\n     *     \"0.1.2\": {\n     *         date: '20.10.2023',\n     *         content: (\n     *             <div className='padding-left-15'>\n     *                 Summary\n     *                 • Feature 1\n     *                 • Feature 2\n     *             </div>\n     *         ),\n     *     }\n     * }\n     * ```\n     */\n    translatedReleaseNotes: ReleaseNotesData;\n\n    /**\n     * Specifies the current module version.\n     */\n    currentVersion: string;\n\n    /**\n     * Specifies the item in the localStorage that is used to save the last read module version.\n     */\n    RELEASE_NOTES_ITEM: string;\n\n    /**\n     * Enables the content of the dialog to scroll when it overflows.\n     * This means the dialog body scrolls instead of the entire dialog.\n     */\n    useOverflow?: boolean;\n};\n\nconst ReleaseNotesDialog = (props: ReleaseNotesDialogProps) => {\n    const { moduleName, whatsNewTitle, closeButtonText, translatedReleaseNotes, useOverflow = true } = props;\n\n    return (\n        <Dialog\n            show={props.showReleaseNotes}\n            useOverflow={useOverflow}\n            title={getModuleName(moduleName, whatsNewTitle)}\n            subtitle={moduleName && whatsNewTitle}\n            body={<ReleaseNotes releaseNotes={translatedReleaseNotes} />}\n            footer={<Button onClick={() => setReleaseNotesItem(props)}>{closeButtonText || 'Close'}</Button>}\n            onClose={() => setReleaseNotesItem(props)}\n        />\n    );\n};\n\nexport default ReleaseNotesDialog;\n"],"names":["setReleaseNotesItem","props","getModuleName","moduleName","whatsNew","ReleaseNotesDialog","whatsNewTitle","closeButtonText","translatedReleaseNotes","useOverflow","jsx","Dialog","ReleaseNotes","Button"],"mappings":";;;;AAKA,MAAMA,IAAsB,CAACC,MAAmC;AAC5D,SAAO,aAAa,QAAQA,EAAM,oBAAoBA,EAAM,cAAc,GAC1EA,EAAM,oBAAoB,EAAK;AACnC,GAEMC,IAAgB,CAACC,GAAgCC,wBAClD,QAAA,EAAM,UAAAD,KAA0BC,GAAS,GAsExCC,IAAqB,CAACJ,MAAmC;AAC3D,QAAM,EAAE,YAAAE,GAAY,eAAAG,GAAe,iBAAAC,GAAiB,wBAAAC,GAAwB,aAAAC,IAAc,OAASR;AAEnG,SACI,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,MAAMV,EAAM;AAAA,MACZ,aAAAQ;AAAA,MACA,OAAOP,EAAcC,GAAYG,CAAa;AAAA,MAC9C,UAAUH,KAAcG;AAAA,MACxB,MAAM,gBAAAI,EAACE,GAAA,EAAa,cAAcJ,EAAA,CAAwB;AAAA,MAC1D,0BAASK,GAAA,EAAO,SAAS,MAAMb,EAAoBC,CAAK,GAAI,UAAAM,KAAmB,QAAA,CAAQ;AAAA,MACvF,SAAS,MAAMP,EAAoBC,CAAK;AAAA,IAAA;AAAA,EAAA;AAGpD;"}
+{"version":3,"file":"ReleaseNotesDialog.js","sources":["../../../src/components/dialog/ReleaseNotesDialog.tsx"],"sourcesContent":["import ReleaseNotes, { type ReleaseNotesData } from '../releaseNotes/ReleaseNotes';\n\nimport Button from '../button/Button';\nimport Dialog from './Dialog';\n\nconst setReleaseNotesItem = (props: ReleaseNotesDialogProps) => {\n    window.localStorage.setItem(props.RELEASE_NOTES_ITEM, props.currentVersion);\n    props.setShowReleaseNotes(false);\n};\n\nconst getModuleName = (moduleName: string | undefined, whatsNew: string | undefined) => (\n    <span>{moduleName ? moduleName : whatsNew}</span>\n);\n\nexport type ReleaseNotesDialogProps = {\n    /**\n     * Decides if the dialog is opened.\n     */\n    showReleaseNotes: boolean;\n\n    /**\n     * Callback set showReleaseNotes state\n     *\n     * @param show\n     * @returns\n     */\n    setShowReleaseNotes: (show: boolean) => void;\n\n    /**\n     * Translated text for \"What`s new?\"\n     */\n    whatsNewTitle?: string;\n\n    /**\n     * The translated modulename.\n     */\n    moduleName?: string;\n\n    /**\n     * Translated text for the close button.\n     */\n    closeButtonText?: string;\n\n    /**\n     * Translated release notes.\n     *\n     * @example\n     * {\n     *     \"0.1.2\": {\n     *         date: '20.10.2023',\n     *         content: (\n     *             <div className='padding-left-15'>\n     *                 Summary\n     *                 • Feature 1\n     *                 • Feature 2\n     *             </div>\n     *         ),\n     *     }\n     * }\n     */\n    translatedReleaseNotes: ReleaseNotesData;\n\n    /**\n     * Specifies the current module version.\n     */\n    currentVersion: string;\n\n    /**\n     * Specifies the item in the localStorage that is used to save the last read module version.\n     */\n    RELEASE_NOTES_ITEM: string;\n\n    /**\n     * Enables the content of the dialog to scroll when it overflows.\n     * This means the dialog body scrolls instead of the entire dialog.\n     *\n     * @default true\n     */\n    useOverflow?: boolean;\n};\n\nconst ReleaseNotesDialog = (props: ReleaseNotesDialogProps) => {\n    const { moduleName, whatsNewTitle, closeButtonText, translatedReleaseNotes, useOverflow = true } = props;\n\n    return (\n        <Dialog\n            show={props.showReleaseNotes}\n            useOverflow={useOverflow}\n            title={getModuleName(moduleName, whatsNewTitle)}\n            subtitle={moduleName && whatsNewTitle}\n            body={<ReleaseNotes releaseNotes={translatedReleaseNotes} />}\n            footer={<Button onClick={() => setReleaseNotesItem(props)}>{closeButtonText || 'Close'}</Button>}\n            onClose={() => setReleaseNotesItem(props)}\n        />\n    );\n};\n\nexport default ReleaseNotesDialog;\n"],"names":["setReleaseNotesItem","props","getModuleName","moduleName","whatsNew","ReleaseNotesDialog","whatsNewTitle","closeButtonText","translatedReleaseNotes","useOverflow","jsx","Dialog","ReleaseNotes","Button"],"mappings":";;;;AAKA,MAAMA,IAAsB,CAACC,MAAmC;AAC5D,SAAO,aAAa,QAAQA,EAAM,oBAAoBA,EAAM,cAAc,GAC1EA,EAAM,oBAAoB,EAAK;AACnC,GAEMC,IAAgB,CAACC,GAAgCC,wBAClD,QAAA,EAAM,UAAAD,KAA0BC,GAAS,GAsExCC,IAAqB,CAACJ,MAAmC;AAC3D,QAAM,EAAE,YAAAE,GAAY,eAAAG,GAAe,iBAAAC,GAAiB,wBAAAC,GAAwB,aAAAC,IAAc,OAASR;AAEnG,SACI,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,MAAMV,EAAM;AAAA,MACZ,aAAAQ;AAAA,MACA,OAAOP,EAAcC,GAAYG,CAAa;AAAA,MAC9C,UAAUH,KAAcG;AAAA,MACxB,MAAM,gBAAAI,EAACE,GAAA,EAAa,cAAcJ,EAAA,CAAwB;AAAA,MAC1D,0BAASK,GAAA,EAAO,SAAS,MAAMb,EAAoBC,CAAK,GAAI,UAAAM,KAAmB,QAAA,CAAQ;AAAA,MACvF,SAAS,MAAMP,EAAoBC,CAAK;AAAA,IAAA;AAAA,EAAA;AAGpD;"}

package/components/dialog/SplitDialog.js

@@ -1,5 +1,5 @@
 import { jsx as s, jsxs as e } from "react/jsx-runtime";
-import N from "classnames";
+import N from "../../utils/classNames.js";
 import f from "./Dialog.js";
 const u = (t) => {
   const {

package/components/dialog/SplitDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitDialog.js","sources":["../../../src/components/dialog/SplitDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\n\nimport Dialog, { type BaseDialogProps } from './Dialog';\n\nexport type SplitDialogProps = Omit<BaseDialogProps, 'useOverflow'> & {\n    /**\n     * The content to be shown on the left side.\n     */\n    leftContent?: string | React.ReactNode;\n\n    /**\n     * Additional classes for the left content element.\n     */\n    leftContentClassName?: string;\n\n    /**\n     * The content to be shown on the right side.\n     */\n    rightContent?: string | React.ReactNode;\n\n    /**\n     * Additional classes for the right content element.\n     */\n    rightContentClassName?: string;\n\n    /**\n     * The dialog body content.\n     */\n    footer?: React.ReactNode;\n\n    /**\n     * Additional classes for the modal-footer element.\n     */\n    footerClassName?: string;\n\n    /**\n     * A callback function to be executed before closing the dialog.\n     *\n     * If the function returns `false`, the dialog will not be closed\n     */\n    onCloseValidation?: () => boolean;\n\n    /**\n     * Enables the modal body to overflow and use inline scrolling if needed.\n     *\n     * @default true\n     */\n    useOverflow?: boolean;\n\n    /**\n     * Allows to disable the divider.\n     *\n     * @default true\n     */\n    showDivider?: boolean;\n};\n\nconst SplitDialog = (props: SplitDialogProps) => {\n    const {\n        leftContent,\n        rightContent,\n        leftContentClassName = '',\n        rightContentClassName = '',\n        className = '',\n        useOverflow = true,\n        showDivider = true,\n        ...remainingProps\n    } = props;\n\n    const dialogClassName = `split-dialog ${className}`;\n\n    const dividerClasses = classNames('split-divider', 'bg-lighter');\n\n    const body = (\n        <div className='split-wrapper'>\n            <div className={`split-left ${leftContentClassName}`}>\n                {leftContent}\n                {showDivider && <div className={dividerClasses} />}\n            </div>\n            <div className={`split-right ${rightContentClassName}`}>{rightContent}</div>\n        </div>\n    );\n\n    return <Dialog {...remainingProps} body={body} className={dialogClassName} useOverflow={useOverflow} />;\n};\n\nexport default SplitDialog;\n"],"names":["SplitDialog","props","leftContent","rightContent","leftContentClassName","rightContentClassName","className","useOverflow","showDivider","remainingProps","dialogClassName","dividerClasses","classNames","body","jsxs","jsx","Dialog"],"mappings":";;;AA0DA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM;AAAA,IACF,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,sBAAAC,IAAuB;AAAA,IACvB,uBAAAC,IAAwB;AAAA,IACxB,WAAAC,IAAY;AAAA,IACZ,aAAAC,IAAc;AAAA,IACd,aAAAC,IAAc;AAAA,IACd,GAAGC;AAAA,EAAA,IACHR,GAEES,IAAkB,gBAAgBJ,CAAS,IAE3CK,IAAiBC,EAAW,iBAAiB,YAAY,GAEzDC,IACF,gBAAAC,EAAC,OAAA,EAAI,WAAU,iBACX,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAW,cAAcV,CAAoB,IAC7C,UAAA;AAAA,MAAAF;AAAA,MACAM,KAAe,gBAAAO,EAAC,OAAA,EAAI,WAAWJ,EAAA,CAAgB;AAAA,IAAA,GACpD;AAAA,sBACC,OAAA,EAAI,WAAW,eAAeN,CAAqB,IAAK,UAAAF,EAAA,CAAa;AAAA,EAAA,GAC1E;AAGJ,2BAAQa,GAAA,EAAQ,GAAGP,GAAgB,MAAAI,GAAY,WAAWH,GAAiB,aAAAH,GAA0B;AACzG;"}
+{"version":3,"file":"SplitDialog.js","sources":["../../../src/components/dialog/SplitDialog.tsx"],"sourcesContent":["import type React from 'react';\n\nimport classNames from '../../utils/classNames';\n\nimport Dialog, { type BaseDialogProps } from './Dialog';\n\nexport type SplitDialogProps = Omit<BaseDialogProps, 'useOverflow'> & {\n    /**\n     * The content to be shown on the left side.\n     */\n    leftContent?: string | React.ReactNode;\n\n    /**\n     * Additional classes for the left content element.\n     */\n    leftContentClassName?: string;\n\n    /**\n     * The content to be shown on the right side.\n     */\n    rightContent?: string | React.ReactNode;\n\n    /**\n     * Additional classes for the right content element.\n     */\n    rightContentClassName?: string;\n\n    /**\n     * The dialog body content.\n     */\n    footer?: React.ReactNode;\n\n    /**\n     * Additional classes for the modal-footer element.\n     */\n    footerClassName?: string;\n\n    /**\n     * A callback function to be executed before closing the dialog.\n     *\n     * If the function returns `false`, the dialog will not be closed\n     */\n    onCloseValidation?: () => boolean;\n\n    /**\n     * Enables the modal body to overflow and use inline scrolling if needed.\n     *\n     * @default true\n     */\n    useOverflow?: boolean;\n\n    /**\n     * Allows to disable the divider.\n     *\n     * @default true\n     */\n    showDivider?: boolean;\n};\n\nconst SplitDialog = (props: SplitDialogProps) => {\n    const {\n        leftContent,\n        rightContent,\n        leftContentClassName = '',\n        rightContentClassName = '',\n        className = '',\n        useOverflow = true,\n        showDivider = true,\n        ...remainingProps\n    } = props;\n\n    const dialogClassName = `split-dialog ${className}`;\n\n    const dividerClasses = classNames('split-divider', 'bg-lighter');\n\n    const body = (\n        <div className='split-wrapper'>\n            <div className={`split-left ${leftContentClassName}`}>\n                {leftContent}\n                {showDivider && <div className={dividerClasses} />}\n            </div>\n            <div className={`split-right ${rightContentClassName}`}>{rightContent}</div>\n        </div>\n    );\n\n    return <Dialog {...remainingProps} body={body} className={dialogClassName} useOverflow={useOverflow} />;\n};\n\nexport default SplitDialog;\n"],"names":["SplitDialog","props","leftContent","rightContent","leftContentClassName","rightContentClassName","className","useOverflow","showDivider","remainingProps","dialogClassName","dividerClasses","classNames","body","jsxs","jsx","Dialog"],"mappings":";;;AA2DA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM;AAAA,IACF,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,sBAAAC,IAAuB;AAAA,IACvB,uBAAAC,IAAwB;AAAA,IACxB,WAAAC,IAAY;AAAA,IACZ,aAAAC,IAAc;AAAA,IACd,aAAAC,IAAc;AAAA,IACd,GAAGC;AAAA,EAAA,IACHR,GAEES,IAAkB,gBAAgBJ,CAAS,IAE3CK,IAAiBC,EAAW,iBAAiB,YAAY,GAEzDC,IACF,gBAAAC,EAAC,OAAA,EAAI,WAAU,iBACX,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAW,cAAcV,CAAoB,IAC7C,UAAA;AAAA,MAAAF;AAAA,MACAM,KAAe,gBAAAO,EAAC,OAAA,EAAI,WAAWJ,EAAA,CAAgB;AAAA,IAAA,GACpD;AAAA,sBACC,OAAA,EAAI,WAAW,eAAeN,CAAqB,IAAK,UAAAF,EAAA,CAAa;AAAA,EAAA,GAC1E;AAGJ,2BAAQa,GAAA,EAAQ,GAAGP,GAAgB,MAAAI,GAAY,WAAWH,GAAiB,aAAAH,GAA0B;AACzG;"}

package/components/divider/Divider.js

@@ -1,5 +1,5 @@
 import { jsxs as t, jsx as r, Fragment as c } from "react/jsx-runtime";
-import o from "classnames";
+import o from "../../utils/classNames.js";
 const L = (h) => {
   const {
     spacing: m = 15,

package/components/divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../../../src/components/divider/Divider.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nexport type DividerProps = {\n    /**\n     * The amount of space to either side\n     *\n     * @default 15\n     */\n    spacing?: number;\n\n    /**\n     * Defines the width of the divider line\n     *\n     * @default 1\n     */\n    dividerWidth?: 1 | 2 | 3;\n\n    /**\n     * Defines the color of the divider line\n     *\n     * @default 'light'\n     */\n    dividerColor?: 'darkest' | 'darker' | 'dark' | 'gray' | 'light' | 'lighter' | 'lightest';\n\n    /**\n     * Use the component as a spacer element without the divider line\n     *\n     * @default false\n     */\n    asSpacer?: boolean;\n\n    /**\n     * Set the orientation for the divider line to vertical.\n     * This may be useful for button toolbars or elements on a single row.\n     *\n     * @default false\n     */\n    vertical?: boolean;\n\n    /**\n     * Defines where the children are aligned on the divider line\n     *\n     * @default 'center'\n     */\n    titleAlignment?: 'left' | 'center' | 'right';\n\n    /**\n     * Additional classes added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst Divider = (props: PropsWithChildren<DividerProps>) => {\n    const {\n        spacing = 15,\n        dividerWidth = 1,\n        dividerColor = 'light',\n        asSpacer = false,\n        vertical = false,\n        titleAlignment = 'center',\n        className = '',\n        children,\n    } = props;\n\n    const classes = classNames('Divider', 'position-relative', !vertical && 'width-100pct', className);\n\n    const spacingValue = `${spacing}px`;\n    const wrapperStyle: React.CSSProperties = {};\n\n    if (vertical) {\n        wrapperStyle.paddingLeft = spacingValue;\n        wrapperStyle.paddingRight = spacingValue;\n    }\n\n    if (!vertical) {\n        wrapperStyle.paddingTop = spacingValue;\n        wrapperStyle.paddingBottom = spacingValue;\n    }\n\n    const dividerLineClasses = classNames('divider-line', `bg-${dividerColor}`);\n\n    const isStringTitle = typeof children === 'string';\n\n    const line = (\n        <div\n            className={dividerLineClasses}\n            style={{\n                width: vertical ? `${dividerWidth}px` : '100%',\n                height: vertical ? '100%' : `${dividerWidth}px`,\n            }}\n        />\n    );\n\n    const titleLine = <div className='flex-1-0'>{line}</div>;\n    const title = <div className={isStringTitle ? 'padding-x-10' : ''}>{children}</div>;\n\n    const dividerTitleClasses = classNames('divider-title', 'display-flex', 'align-items-center');\n\n    return (\n        <div className={classes} style={wrapperStyle}>\n            {!asSpacer && !children && line}\n            {children && (\n                <div className={dividerTitleClasses}>\n                    {titleAlignment === 'left' && (\n                        <>\n                            {title}\n                            {titleLine}\n                        </>\n                    )}\n                    {titleAlignment === 'center' && (\n                        <>\n                            {titleLine}\n                            {title}\n                            {titleLine}\n                        </>\n                    )}\n                    {titleAlignment === 'right' && (\n                        <>\n                            {titleLine}\n                            {title}\n                        </>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default Divider;\n"],"names":["Divider","props","spacing","dividerWidth","dividerColor","asSpacer","vertical","titleAlignment","className","children","classes","classNames","spacingValue","wrapperStyle","dividerLineClasses","isStringTitle","line","jsx","titleLine","title","dividerTitleClasses","jsxs","Fragment"],"mappings":";;AAsDA,MAAMA,IAAU,CAACC,MAA2C;AACxD,QAAM;AAAA,IACF,SAAAC,IAAU;AAAA,IACV,cAAAC,IAAe;AAAA,IACf,cAAAC,IAAe;AAAA,IACf,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,gBAAAC,IAAiB;AAAA,IACjB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,EAAA,IACAR,GAEES,IAAUC,EAAW,WAAW,qBAAqB,CAACL,KAAY,gBAAgBE,CAAS,GAE3FI,IAAe,GAAGV,CAAO,MACzBW,IAAoC,CAAA;AAE1C,EAAIP,MACAO,EAAa,cAAcD,GAC3BC,EAAa,eAAeD,IAG3BN,MACDO,EAAa,aAAaD,GAC1BC,EAAa,gBAAgBD;AAGjC,QAAME,IAAqBH,EAAW,gBAAgB,MAAMP,CAAY,EAAE,GAEpEW,IAAgB,OAAON,KAAa,UAEpCO,IACF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWH;AAAA,MACX,OAAO;AAAA,QACH,OAAOR,IAAW,GAAGH,CAAY,OAAO;AAAA,QACxC,QAAQG,IAAW,SAAS,GAAGH,CAAY;AAAA,MAAA;AAAA,IAC/C;AAAA,EAAA,GAIFe,IAAY,gBAAAD,EAAC,OAAA,EAAI,WAAU,YAAY,UAAAD,GAAK,GAC5CG,IAAQ,gBAAAF,EAAC,OAAA,EAAI,WAAWF,IAAgB,iBAAiB,IAAK,UAAAN,GAAS,GAEvEW,IAAsBT,EAAW,iBAAiB,gBAAgB,oBAAoB;AAE5F,SACI,gBAAAU,EAAC,OAAA,EAAI,WAAWX,GAAS,OAAOG,GAC3B,UAAA;AAAA,IAAA,CAACR,KAAY,CAACI,KAAYO;AAAA,IAC1BP,KACG,gBAAAY,EAAC,OAAA,EAAI,WAAWD,GACX,UAAA;AAAA,MAAAb,MAAmB,UAChB,gBAAAc,EAAAC,GAAA,EACK,UAAA;AAAA,QAAAH;AAAA,QACAD;AAAA,MAAA,GACL;AAAA,MAEHX,MAAmB,YAChB,gBAAAc,EAAAC,GAAA,EACK,UAAA;AAAA,QAAAJ;AAAA,QACAC;AAAA,QACAD;AAAA,MAAA,GACL;AAAA,MAEHX,MAAmB,WAChB,gBAAAc,EAAAC,GAAA,EACK,UAAA;AAAA,QAAAJ;AAAA,QACAC;AAAA,MAAA,EAAA,CACL;AAAA,IAAA,EAAA,CAER;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"Divider.js","sources":["../../../src/components/divider/Divider.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type DividerProps = {\n    /**\n     * The amount of space to either side\n     *\n     * @default 15\n     */\n    spacing?: number;\n\n    /**\n     * Defines the width of the divider line\n     *\n     * @default 1\n     */\n    dividerWidth?: 1 | 2 | 3;\n\n    /**\n     * Defines the color of the divider line\n     *\n     * @default 'light'\n     */\n    dividerColor?: 'darkest' | 'darker' | 'dark' | 'gray' | 'light' | 'lighter' | 'lightest';\n\n    /**\n     * Use the component as a spacer element without the divider line\n     *\n     * @default false\n     */\n    asSpacer?: boolean;\n\n    /**\n     * Set the orientation for the divider line to vertical.\n     * This may be useful for button toolbars or elements on a single row.\n     *\n     * @default false\n     */\n    vertical?: boolean;\n\n    /**\n     * Defines where the children are aligned on the divider line\n     *\n     * @default 'center'\n     */\n    titleAlignment?: 'left' | 'center' | 'right';\n\n    /**\n     * Additional classes added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst Divider = (props: PropsWithChildren<DividerProps>) => {\n    const {\n        spacing = 15,\n        dividerWidth = 1,\n        dividerColor = 'light',\n        asSpacer = false,\n        vertical = false,\n        titleAlignment = 'center',\n        className = '',\n        children,\n    } = props;\n\n    const classes = classNames('Divider', 'position-relative', !vertical && 'width-100pct', className);\n\n    const spacingValue = `${spacing}px`;\n    const wrapperStyle: React.CSSProperties = {};\n\n    if (vertical) {\n        wrapperStyle.paddingLeft = spacingValue;\n        wrapperStyle.paddingRight = spacingValue;\n    }\n\n    if (!vertical) {\n        wrapperStyle.paddingTop = spacingValue;\n        wrapperStyle.paddingBottom = spacingValue;\n    }\n\n    const dividerLineClasses = classNames('divider-line', `bg-${dividerColor}`);\n\n    const isStringTitle = typeof children === 'string';\n\n    const line = (\n        <div\n            className={dividerLineClasses}\n            style={{\n                width: vertical ? `${dividerWidth}px` : '100%',\n                height: vertical ? '100%' : `${dividerWidth}px`,\n            }}\n        />\n    );\n\n    const titleLine = <div className='flex-1-0'>{line}</div>;\n    const title = <div className={isStringTitle ? 'padding-x-10' : ''}>{children}</div>;\n\n    const dividerTitleClasses = classNames('divider-title', 'display-flex', 'align-items-center');\n\n    return (\n        <div className={classes} style={wrapperStyle}>\n            {!asSpacer && !children && line}\n            {children && (\n                <div className={dividerTitleClasses}>\n                    {titleAlignment === 'left' && (\n                        <>\n                            {title}\n                            {titleLine}\n                        </>\n                    )}\n                    {titleAlignment === 'center' && (\n                        <>\n                            {titleLine}\n                            {title}\n                            {titleLine}\n                        </>\n                    )}\n                    {titleAlignment === 'right' && (\n                        <>\n                            {titleLine}\n                            {title}\n                        </>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default Divider;\n"],"names":["Divider","props","spacing","dividerWidth","dividerColor","asSpacer","vertical","titleAlignment","className","children","classes","classNames","spacingValue","wrapperStyle","dividerLineClasses","isStringTitle","line","jsx","titleLine","title","dividerTitleClasses","jsxs","Fragment"],"mappings":";;AAuDA,MAAMA,IAAU,CAACC,MAA2C;AACxD,QAAM;AAAA,IACF,SAAAC,IAAU;AAAA,IACV,cAAAC,IAAe;AAAA,IACf,cAAAC,IAAe;AAAA,IACf,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,gBAAAC,IAAiB;AAAA,IACjB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,EAAA,IACAR,GAEES,IAAUC,EAAW,WAAW,qBAAqB,CAACL,KAAY,gBAAgBE,CAAS,GAE3FI,IAAe,GAAGV,CAAO,MACzBW,IAAoC,CAAA;AAE1C,EAAIP,MACAO,EAAa,cAAcD,GAC3BC,EAAa,eAAeD,IAG3BN,MACDO,EAAa,aAAaD,GAC1BC,EAAa,gBAAgBD;AAGjC,QAAME,IAAqBH,EAAW,gBAAgB,MAAMP,CAAY,EAAE,GAEpEW,IAAgB,OAAON,KAAa,UAEpCO,IACF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWH;AAAA,MACX,OAAO;AAAA,QACH,OAAOR,IAAW,GAAGH,CAAY,OAAO;AAAA,QACxC,QAAQG,IAAW,SAAS,GAAGH,CAAY;AAAA,MAAA;AAAA,IAC/C;AAAA,EAAA,GAIFe,IAAY,gBAAAD,EAAC,OAAA,EAAI,WAAU,YAAY,UAAAD,GAAK,GAC5CG,IAAQ,gBAAAF,EAAC,OAAA,EAAI,WAAWF,IAAgB,iBAAiB,IAAK,UAAAN,GAAS,GAEvEW,IAAsBT,EAAW,iBAAiB,gBAAgB,oBAAoB;AAE5F,SACI,gBAAAU,EAAC,OAAA,EAAI,WAAWX,GAAS,OAAOG,GAC3B,UAAA;AAAA,IAAA,CAACR,KAAY,CAACI,KAAYO;AAAA,IAC1BP,KACG,gBAAAY,EAAC,OAAA,EAAI,WAAWD,GACX,UAAA;AAAA,MAAAb,MAAmB,UAChB,gBAAAc,EAAAC,GAAA,EACK,UAAA;AAAA,QAAAH;AAAA,QACAD;AAAA,MAAA,GACL;AAAA,MAEHX,MAAmB,YAChB,gBAAAc,EAAAC,GAAA,EACK,UAAA;AAAA,QAAAJ;AAAA,QACAC;AAAA,QACAD;AAAA,MAAA,GACL;AAAA,MAEHX,MAAmB,WAChB,gBAAAc,EAAAC,GAAA,EACK,UAAA;AAAA,QAAAJ;AAAA,QACAC;AAAA,MAAA,EAAA,CACL;AAAA,IAAA,EAAA,CAER;AAAA,EAAA,GAER;AAER;"}

package/components/dropdown/ButtonDropdown.d.ts

@@ -33,12 +33,16 @@ export type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> =
      * Defines how large the button will be rendered.
      *
      * Possible values are: `xs`, `sm`, `md`, `lg`
+     *
+     * @default 'md'
      */
     bsSize?: BUTTON_SIZE;
     /**
      * Defines the button color.
      *
      * Possible values are: `default`, `primary`, `secondary`, `info`, `warning`, `danger`, `success`, `muted`
+     *
+     * @default 'default'
      */
     bsStyle?: BUTTON_STYLE;
     /**

package/components/dropdown/ButtonDropdown.js

@@ -1,18 +1,18 @@
-import { jsx as l, jsxs as N, Fragment as ro } from "react/jsx-runtime";
-import { forwardRef as so, useState as c, useEffect as lo } from "react";
-import po from "react-dom";
-import { usePopper as ao } from "react-popper";
-import P from "classnames";
+import { jsx as i, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as ro, useState as f, useEffect as so } from "react";
+import lo from "react-dom";
+import { usePopper as po } from "react-popper";
 import { noop as u } from "es-toolkit/function";
-import { isNil as io } from "es-toolkit/predicate";
-import { getOrCreatePortalRoot as co } from "../../utils/portalRoot.js";
-import fo, { DEFAULT_EVENT_TYPES as mo } from "../../hooks/useClickOutside.js";
-import uo from "../menuItems/MenuItems.js";
-import go from "../menuItems/MenuItemList.js";
-import wo from "./DropdownToggleButton.js";
-import Co from "./SplitCaretButton.js";
-import Bo from "./Caret.js";
-const Do = (r, s) => r && s ? "top-end" : !r && s ? "top-start" : r && !s ? "bottom-end" : "bottom-start", Oo = () => so((r, s) => {
+import { isNil as ao } from "es-toolkit/predicate";
+import P from "../../utils/classNames.js";
+import { getOrCreatePortalRoot as io } from "../../utils/portalRoot.js";
+import fo, { DEFAULT_EVENT_TYPES as co } from "../../hooks/useClickOutside.js";
+import mo from "../menuItems/MenuItems.js";
+import uo from "../menuItems/MenuItemList.js";
+import go from "./DropdownToggleButton.js";
+import wo from "./SplitCaretButton.js";
+import Co from "./Caret.js";
+const Bo = (r, s) => r && s ? "top-end" : !r && s ? "top-start" : r && !s ? "bottom-end" : "bottom-start", Do = () => ro((r, s) => {
   const {
     id: g = Math.random().toString(36).slice(2, 16),
     items: R = [],
@@ -26,61 +26,61 @@ const Do = (r, s) => r && s ? "top-end" : !r && s ? "top-start" : r && !s ? "bot
     customDropdown: O,
     open: e,
     dropup: y = !1,
-    pullRight: f = !1,
+    pullRight: c = !1,
     noCaret: E = !1,
     onOpen: L = u,
     onClose: x = u,
     onLabelButtonClick: I = u,
-    usePortal: p = !1,
+    usePortal: l = !1,
     popperConfig: j,
-    toggleButtonType: F = "button",
+    toggleButtonType: U = "button",
     toggleClassName: S = "",
-    dropdownClassName: U,
-    className: _ = "",
-    ...v
-  } = r, [b, m] = c(e), [z, A] = c(null), [h, V] = c(null), [Y, q] = c(null), G = {
-    placement: Do(f, y),
+    dropdownClassName: _,
+    className: v = "",
+    ...z
+  } = r, [b, m] = f(e), [A, F] = f(null), [M, V] = f(null), [Y, q] = f(null), G = {
+    placement: Bo(c, y),
     modifiers: []
-  }, H = t && f ? Y : z, { styles: J, attributes: K } = ao(H, h, j || G), n = io(e), a = n ? b : e, Q = fo(
+  }, H = t && c ? Y : A, { styles: J, attributes: K } = po(H, M, j || G), n = ao(e), p = n ? b : e, Q = fo(
     (o) => {
-      p && h?.contains(o.target) || i();
+      l && M?.contains(o.target) || a();
     },
-    mo,
-    !!a
+    co,
+    !!p
     // only listen to clicks outside when the dropdown is open
-  ), W = co(), X = !E && !t && !D;
-  lo(() => {
+  ), W = io(), X = !E && !t && !D;
+  so(() => {
     n || m(e);
   }, [n, e]);
   const d = (o) => {
-    (n ? b : e) ? i() : Z(o);
+    (n ? b : e) ? a() : Z(o);
   }, Z = (o) => {
     n && m(!0), o && L(o);
-  }, i = () => {
+  }, a = () => {
     n && m(!1), x();
   }, $ = () => {
-    i(), I();
+    a(), I();
   }, oo = (o) => {
     d(o);
   }, to = (o) => {
     t ? $() : d(o);
-  }, eo = P("dropdown", "btn-group", a && "open", _), no = P(
-    p && "dropdown-portal",
-    t && f && "pull-right",
-    U
-  ), M = /* @__PURE__ */ l(
-    go,
+  }, eo = P("dropdown", "btn-group", p && "open", v), no = P(
+    l && "dropdown-portal",
+    t && c && "pull-right",
+    _
+  ), N = /* @__PURE__ */ i(
+    uo,
     {
       className: no,
       ref: V,
       style: J.popper,
       ...K.popper,
-      children: O || /* @__PURE__ */ l(uo, { items: R, closeMenu: d })
+      children: O || /* @__PURE__ */ i(mo, { items: R, closeMenu: d })
     }
   );
-  return /* @__PURE__ */ N("div", { ...v, className: eo, ref: Q, children: [
-    /* @__PURE__ */ l(
-      wo,
+  return /* @__PURE__ */ h("div", { ...z, className: eo, ref: Q, children: [
+    /* @__PURE__ */ h(
+      go,
       {
         id: g,
         splitButton: t,
@@ -89,19 +89,19 @@ const Do = (r, s) => r && s ? "top-end" : !r && s ? "top-start" : r && !s ? "bot
         variant: T,
         iconOnly: D,
         disabled: B,
-        ref: A,
+        ref: F,
         onClick: to,
         outerRef: s,
-        toggleButtonType: F,
+        toggleButtonType: U,
         className: S,
-        children: /* @__PURE__ */ N(ro, { children: [
+        children: [
           k,
-          X && /* @__PURE__ */ l(Bo, {})
-        ] })
+          X && /* @__PURE__ */ i(Co, {})
+        ]
       }
     ),
-    t && /* @__PURE__ */ l(
-      Co,
+    t && /* @__PURE__ */ i(
+      wo,
       {
         id: g,
         bsStyle: C,
@@ -112,11 +112,11 @@ const Do = (r, s) => r && s ? "top-end" : !r && s ? "top-start" : r && !s ? "bot
         ref: q
       }
     ),
-    a && p && po.createPortal(M, W),
-    a && !p && M
+    p && l && lo.createPortal(N, W),
+    p && !l && N
   ] });
-}), Fo = Oo();
+}), jo = Do();
 export {
-  Fo as default
+  jo as default
 };
 //# sourceMappingURL=ButtonDropdown.js.map

package/components/dropdown/ButtonDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonDropdown.js","sources":["../../../src/components/dropdown/ButtonDropdown.tsx"],"sourcesContent":["// biome-ignore lint/style/useImportType: <explanation>\nimport React, { useState, useEffect, forwardRef, type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\nimport useClickOutside, { DEFAULT_EVENT_TYPES } from '../../hooks/useClickOutside';\nimport MenuItems from '../menuItems/MenuItems';\nimport MenuItemList from '../menuItems/MenuItemList';\nimport DropdownToggleButton, { type DropdownToggleEvent, type DropdownToggleButtonType } from './DropdownToggleButton';\nimport SplitCaretButton from './SplitCaretButton';\nimport Caret from './Caret';\nimport type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';\nimport type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';\n\nconst getPlacement = (pullRight: boolean, dropup: boolean) => {\n    if (pullRight && dropup) {\n        return 'top-end';\n    }\n    if (!pullRight && dropup) {\n        return 'top-start';\n    }\n    if (pullRight && !dropup) {\n        return 'bottom-end';\n    }\n    return 'bottom-start';\n};\n\nexport type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> = {\n    /**\n     * Unique button id. If not present a random id is generated.\n     */\n    id?: string;\n\n    /**\n     * The button title. This may be also a node, like a <span> or a <FormattedMessage>.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Defined weather or not the menu is rendered.\n     * Use this to control the component from the outside.\n     *\n     * @default undefined\n     */\n    open?: boolean;\n\n    /**\n     * Defines whether the dropdown opens above or below.\n     * Set it to \"true\" additionally disables the automatic position feature.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned to the dropdown or not.\n     */\n    pullRight?: boolean;\n\n    /**\n     * Defines how large the button will be rendered.\n     *\n     * Possible values are: `xs`, `sm`, `md`, `lg`\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Defines the button color.\n     *\n     * Possible values are: `default`, `primary`, `secondary`, `info`, `warning`, `danger`, `success`, `muted`\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Defines the variation of the button design.\n     *\n     * Possible values are: `link`, `link-inline`, `outline`, `action`\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Specify the toggle element type.\n     * It supports the following types: \"button\" | \"tag\" | \"label\"\n     *\n     * @default 'button'\n     */\n    toggleButtonType?: DropdownToggleButtonType;\n\n    /**\n     * Optional prop to defines whether the dropdown title is icon only which\n     * applies different padding so the button is a square.\n     *\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Defines whether the caret is shown or not.\n     *\n     * @default false\n     */\n    noCaret?: boolean;\n\n    /**\n     * Defines whether the dropdown-toggle (with caret) should be in a separate button.\n     *\n     * @default false\n     */\n    splitButton?: boolean;\n\n    /**\n     * Renders the dropdown into a dedicated react portal\n     *\n     * @default false\n     */\n    usePortal?: boolean;\n\n    /**\n     * Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop.\n     */\n    items?: MenuItem[];\n\n    /**\n     * Disables the dropdown button.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback for splitButton label button click.\n     */\n    onLabelButtonClick?: () => void;\n\n    /**\n     * Callback for when the toggle button was clicked to open it.\n     * @param event\n     * @returns\n     */\n    onOpen?: (event: DropdownToggleEvent<T>) => void;\n\n    /**\n     * Callback for when the toggle button was clicked to close it.\n     * @returns\n     */\n    onClose?: () => void;\n\n    /**\n     * Allows to pass in custom dropdown menu content.\n     */\n    customDropdown?: React.ReactNode;\n\n    /**\n     * Define custom popper.js configuration for dropdown placement and modifiers.\n     */\n    popperConfig?: object;\n\n    /**\n     * Additional classes to be set on the dropdown-toggle button.\n     */\n    toggleClassName?: string;\n\n    /**\n     * Additional classes to be set on the dropdown.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional classes to be set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst createButtonDropdown = <T extends DropdownToggleButtonType = 'button'>() => {\n    return forwardRef<\n        T extends 'button' ? HTMLButtonElement : HTMLDivElement,\n        PropsWithChildren<ButtonDropdownProps<T>>\n    >((props, ref) => {\n        const {\n            id = Math.random().toString(36).slice(2, 16),\n            items = [],\n            bsSize = 'md',\n            bsStyle = 'default',\n            variant,\n            disabled = false,\n            iconOnly = false,\n            title,\n            splitButton = false,\n            customDropdown,\n            open,\n            dropup = false,\n            pullRight = false,\n            noCaret = false,\n            onOpen = noop,\n            onClose = noop,\n            onLabelButtonClick = noop,\n            usePortal = false,\n            popperConfig,\n            toggleButtonType = 'button',\n            toggleClassName = '',\n            dropdownClassName,\n            className = '',\n            ...remainingProps\n        } = props;\n\n        const [internalOpen, setInternalOpen] = useState(open);\n\n        const [refDropdownToggle, setRefDropdownToggle] = useState<HTMLButtonElement | HTMLDivElement | null>(null);\n        const [refDropdownMenu, setRefDropdownMenu] = useState<HTMLUListElement | null>(null);\n        const [refSplitButtonToggle, setRefSplitButtonToggle] = useState<HTMLButtonElement | null>(null);\n\n        const defaultPopperConfig = {\n            placement: getPlacement(pullRight, dropup),\n            modifiers: [],\n        };\n\n        const popperParentRef = splitButton && pullRight ? refSplitButtonToggle : refDropdownToggle;\n\n        const { styles, attributes } = usePopper(popperParentRef, refDropdownMenu, popperConfig || defaultPopperConfig);\n\n        const isUncontrolled = isNil(open);\n        const isOpen = isUncontrolled ? internalOpen : open;\n\n        const wrapperRef = useClickOutside(\n            event => {\n                if (usePortal) {\n                    // In case the dropdown is rendered via portal the clickOutside the toggle button element is\n                    // triggered since the dropdown is not a child of the wrapper element.\n                    // In this case we need to check if the event target is inside the dropdown-menu and prevent closing\n                    // the dropdown\n                    if (!refDropdownMenu?.contains(event.target as Node)) {\n                        closeMenu();\n                    }\n                } else {\n                    closeMenu();\n                }\n            },\n            DEFAULT_EVENT_TYPES,\n            Boolean(isOpen) // only listen to clicks outside when the dropdown is open\n        );\n\n        const dropdownRoot = getOrCreatePortalRoot();\n\n        const shouldShowCaret = !noCaret && !splitButton && !iconOnly;\n\n        useEffect(() => {\n            if (!isUncontrolled) {\n                setInternalOpen(open);\n            }\n        }, [isUncontrolled, open]);\n\n        const toggleOpen = (event?: DropdownToggleEvent<T>) => {\n            const isDropdownOpen = isUncontrolled ? internalOpen : open;\n\n            if (isDropdownOpen) {\n                closeMenu();\n            } else {\n                openMenu(event);\n            }\n        };\n\n        const openMenu = (event?: DropdownToggleEvent<T>) => {\n            if (isUncontrolled) {\n                setInternalOpen(true);\n            }\n            if (event) {\n                onOpen(event);\n            }\n        };\n\n        const closeMenu = () => {\n            if (isUncontrolled) {\n                setInternalOpen(false);\n            }\n            onClose();\n        };\n\n        const handleSplitLabelButtonClick = () => {\n            closeMenu();\n            onLabelButtonClick();\n        };\n\n        const handleSplitCaretButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n            toggleOpen(event as any);\n        };\n\n        const handleDropdownButtonClick = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            if (splitButton) {\n                handleSplitLabelButtonClick();\n            } else {\n                toggleOpen(event as DropdownToggleEvent<T>);\n            }\n        };\n\n        const wrapperClasses = classNames('dropdown', 'btn-group', isOpen && 'open', className);\n\n        const dropdownClasses = classNames(\n            usePortal && 'dropdown-portal',\n            splitButton && pullRight && 'pull-right',\n            dropdownClassName\n        );\n\n        const dropdownMenu = (\n            <MenuItemList\n                className={dropdownClasses}\n                ref={setRefDropdownMenu}\n                style={styles.popper}\n                {...attributes.popper}\n            >\n                {customDropdown ? customDropdown : <MenuItems items={items} closeMenu={toggleOpen} />}\n            </MenuItemList>\n        );\n\n        return (\n            <div {...remainingProps} className={wrapperClasses} ref={wrapperRef}>\n                <DropdownToggleButton\n                    id={id}\n                    splitButton={splitButton}\n                    bsStyle={bsStyle}\n                    bsSize={bsSize}\n                    variant={variant}\n                    iconOnly={iconOnly}\n                    disabled={disabled}\n                    ref={setRefDropdownToggle}\n                    onClick={handleDropdownButtonClick}\n                    outerRef={ref}\n                    toggleButtonType={toggleButtonType}\n                    className={toggleClassName}\n                >\n                    <>\n                        {title}\n                        {shouldShowCaret && <Caret />}\n                    </>\n                </DropdownToggleButton>\n                {splitButton && (\n                    <SplitCaretButton\n                        id={id}\n                        bsStyle={bsStyle}\n                        bsSize={bsSize}\n                        disabled={disabled}\n                        className={toggleClassName}\n                        onClick={handleSplitCaretButtonClick}\n                        ref={setRefSplitButtonToggle}\n                    />\n                )}\n                {isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot)}\n                {isOpen && !usePortal && dropdownMenu}\n            </div>\n        );\n    });\n};\n\nconst ButtonDropdown = createButtonDropdown();\n\nexport default ButtonDropdown;\n"],"names":["getPlacement","pullRight","dropup","createButtonDropdown","forwardRef","props","ref","id","items","bsSize","bsStyle","variant","disabled","iconOnly","title","splitButton","customDropdown","open","noCaret","onOpen","noop","onClose","onLabelButtonClick","usePortal","popperConfig","toggleButtonType","toggleClassName","dropdownClassName","className","remainingProps","internalOpen","setInternalOpen","useState","refDropdownToggle","setRefDropdownToggle","refDropdownMenu","setRefDropdownMenu","refSplitButtonToggle","setRefSplitButtonToggle","defaultPopperConfig","popperParentRef","styles","attributes","usePopper","isUncontrolled","isNil","isOpen","wrapperRef","useClickOutside","event","closeMenu","DEFAULT_EVENT_TYPES","dropdownRoot","getOrCreatePortalRoot","shouldShowCaret","useEffect","toggleOpen","openMenu","handleSplitLabelButtonClick","handleSplitCaretButtonClick","handleDropdownButtonClick","wrapperClasses","classNames","dropdownClasses","dropdownMenu","jsx","MenuItemList","MenuItems","DropdownToggleButton","jsxs","Fragment","Caret","SplitCaretButton","ReactDOM","ButtonDropdown"],"mappings":"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"}
+{"version":3,"file":"ButtonDropdown.js","sources":["../../../src/components/dropdown/ButtonDropdown.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef, type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { noop } from 'es-toolkit/function';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\nimport useClickOutside, { DEFAULT_EVENT_TYPES } from '../../hooks/useClickOutside';\nimport MenuItems from '../menuItems/MenuItems';\nimport MenuItemList from '../menuItems/MenuItemList';\nimport DropdownToggleButton, { type DropdownToggleEvent, type DropdownToggleButtonType } from './DropdownToggleButton';\nimport SplitCaretButton from './SplitCaretButton';\nimport Caret from './Caret';\nimport type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';\nimport type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';\n\nconst getPlacement = (pullRight: boolean, dropup: boolean) => {\n    if (pullRight && dropup) {\n        return 'top-end';\n    }\n    if (!pullRight && dropup) {\n        return 'top-start';\n    }\n    if (pullRight && !dropup) {\n        return 'bottom-end';\n    }\n    return 'bottom-start';\n};\n\nexport type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> = {\n    /**\n     * Unique button id. If not present a random id is generated.\n     */\n    id?: string;\n\n    /**\n     * The button title. This may be also a node, like a <span> or a <FormattedMessage>.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Defined weather or not the menu is rendered.\n     * Use this to control the component from the outside.\n     *\n     * @default undefined\n     */\n    open?: boolean;\n\n    /**\n     * Defines whether the dropdown opens above or below.\n     * Set it to \"true\" additionally disables the automatic position feature.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned to the dropdown or not.\n     */\n    pullRight?: boolean;\n\n    /**\n     * Defines how large the button will be rendered.\n     *\n     * Possible values are: `xs`, `sm`, `md`, `lg`\n     *\n     * @default 'md'\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Defines the button color.\n     *\n     * Possible values are: `default`, `primary`, `secondary`, `info`, `warning`, `danger`, `success`, `muted`\n     *\n     * @default 'default'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Defines the variation of the button design.\n     *\n     * Possible values are: `link`, `link-inline`, `outline`, `action`\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Specify the toggle element type.\n     * It supports the following types: \"button\" | \"tag\" | \"label\"\n     *\n     * @default 'button'\n     */\n    toggleButtonType?: DropdownToggleButtonType;\n\n    /**\n     * Optional prop to defines whether the dropdown title is icon only which\n     * applies different padding so the button is a square.\n     *\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Defines whether the caret is shown or not.\n     *\n     * @default false\n     */\n    noCaret?: boolean;\n\n    /**\n     * Defines whether the dropdown-toggle (with caret) should be in a separate button.\n     *\n     * @default false\n     */\n    splitButton?: boolean;\n\n    /**\n     * Renders the dropdown into a dedicated react portal\n     *\n     * @default false\n     */\n    usePortal?: boolean;\n\n    /**\n     * Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop.\n     */\n    items?: MenuItem[];\n\n    /**\n     * Disables the dropdown button.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback for splitButton label button click.\n     */\n    onLabelButtonClick?: () => void;\n\n    /**\n     * Callback for when the toggle button was clicked to open it.\n     * @param event\n     * @returns\n     */\n    onOpen?: (event: DropdownToggleEvent<T>) => void;\n\n    /**\n     * Callback for when the toggle button was clicked to close it.\n     * @returns\n     */\n    onClose?: () => void;\n\n    /**\n     * Allows to pass in custom dropdown menu content.\n     */\n    customDropdown?: React.ReactNode;\n\n    /**\n     * Define custom popper.js configuration for dropdown placement and modifiers.\n     */\n    popperConfig?: object;\n\n    /**\n     * Additional classes to be set on the dropdown-toggle button.\n     */\n    toggleClassName?: string;\n\n    /**\n     * Additional classes to be set on the dropdown.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional classes to be set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst createButtonDropdown = <T extends DropdownToggleButtonType = 'button'>() => {\n    return forwardRef<\n        T extends 'button' ? HTMLButtonElement : HTMLDivElement,\n        PropsWithChildren<ButtonDropdownProps<T>>\n    >((props, ref) => {\n        const {\n            id = Math.random().toString(36).slice(2, 16),\n            items = [],\n            bsSize = 'md',\n            bsStyle = 'default',\n            variant,\n            disabled = false,\n            iconOnly = false,\n            title,\n            splitButton = false,\n            customDropdown,\n            open,\n            dropup = false,\n            pullRight = false,\n            noCaret = false,\n            onOpen = noop,\n            onClose = noop,\n            onLabelButtonClick = noop,\n            usePortal = false,\n            popperConfig,\n            toggleButtonType = 'button',\n            toggleClassName = '',\n            dropdownClassName,\n            className = '',\n            ...remainingProps\n        } = props;\n\n        const [internalOpen, setInternalOpen] = useState(open);\n\n        const [refDropdownToggle, setRefDropdownToggle] = useState<HTMLButtonElement | HTMLDivElement | null>(null);\n        const [refDropdownMenu, setRefDropdownMenu] = useState<HTMLUListElement | null>(null);\n        const [refSplitButtonToggle, setRefSplitButtonToggle] = useState<HTMLButtonElement | null>(null);\n\n        const defaultPopperConfig = {\n            placement: getPlacement(pullRight, dropup),\n            modifiers: [],\n        };\n\n        const popperParentRef = splitButton && pullRight ? refSplitButtonToggle : refDropdownToggle;\n\n        const { styles, attributes } = usePopper(popperParentRef, refDropdownMenu, popperConfig || defaultPopperConfig);\n\n        const isUncontrolled = isNil(open);\n        const isOpen = isUncontrolled ? internalOpen : open;\n\n        const wrapperRef = useClickOutside(\n            event => {\n                if (usePortal) {\n                    // In case the dropdown is rendered via portal the clickOutside the toggle button element is\n                    // triggered since the dropdown is not a child of the wrapper element.\n                    // In this case we need to check if the event target is inside the dropdown-menu and prevent closing\n                    // the dropdown\n                    if (!refDropdownMenu?.contains(event.target as Node)) {\n                        closeMenu();\n                    }\n                } else {\n                    closeMenu();\n                }\n            },\n            DEFAULT_EVENT_TYPES,\n            Boolean(isOpen) // only listen to clicks outside when the dropdown is open\n        );\n\n        const dropdownRoot = getOrCreatePortalRoot();\n\n        const shouldShowCaret = !noCaret && !splitButton && !iconOnly;\n\n        useEffect(() => {\n            if (!isUncontrolled) {\n                setInternalOpen(open);\n            }\n        }, [isUncontrolled, open]);\n\n        const toggleOpen = (event?: DropdownToggleEvent<T>) => {\n            const isDropdownOpen = isUncontrolled ? internalOpen : open;\n\n            if (isDropdownOpen) {\n                closeMenu();\n            } else {\n                openMenu(event);\n            }\n        };\n\n        const openMenu = (event?: DropdownToggleEvent<T>) => {\n            if (isUncontrolled) {\n                setInternalOpen(true);\n            }\n            if (event) {\n                onOpen(event);\n            }\n        };\n\n        const closeMenu = () => {\n            if (isUncontrolled) {\n                setInternalOpen(false);\n            }\n            onClose();\n        };\n\n        const handleSplitLabelButtonClick = () => {\n            closeMenu();\n            onLabelButtonClick();\n        };\n\n        const handleSplitCaretButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n            toggleOpen(event as any);\n        };\n\n        const handleDropdownButtonClick = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            if (splitButton) {\n                handleSplitLabelButtonClick();\n            } else {\n                toggleOpen(event as DropdownToggleEvent<T>);\n            }\n        };\n\n        const wrapperClasses = classNames('dropdown', 'btn-group', isOpen && 'open', className);\n\n        const dropdownClasses = classNames(\n            usePortal && 'dropdown-portal',\n            splitButton && pullRight && 'pull-right',\n            dropdownClassName\n        );\n\n        const dropdownMenu = (\n            <MenuItemList\n                className={dropdownClasses}\n                ref={setRefDropdownMenu}\n                style={styles.popper}\n                {...attributes.popper}\n            >\n                {customDropdown ? customDropdown : <MenuItems items={items} closeMenu={toggleOpen} />}\n            </MenuItemList>\n        );\n\n        return (\n            <div {...remainingProps} className={wrapperClasses} ref={wrapperRef}>\n                <DropdownToggleButton\n                    id={id}\n                    splitButton={splitButton}\n                    bsStyle={bsStyle}\n                    bsSize={bsSize}\n                    variant={variant}\n                    iconOnly={iconOnly}\n                    disabled={disabled}\n                    ref={setRefDropdownToggle}\n                    onClick={handleDropdownButtonClick}\n                    outerRef={ref}\n                    toggleButtonType={toggleButtonType}\n                    className={toggleClassName}\n                >\n                    {title}\n                    {shouldShowCaret && <Caret />}\n                </DropdownToggleButton>\n                {splitButton && (\n                    <SplitCaretButton\n                        id={id}\n                        bsStyle={bsStyle}\n                        bsSize={bsSize}\n                        disabled={disabled}\n                        className={toggleClassName}\n                        onClick={handleSplitCaretButtonClick}\n                        ref={setRefSplitButtonToggle}\n                    />\n                )}\n                {isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot)}\n                {isOpen && !usePortal && dropdownMenu}\n            </div>\n        );\n    });\n};\n\nconst ButtonDropdown = createButtonDropdown();\n\nexport default ButtonDropdown;\n"],"names":["getPlacement","pullRight","dropup","createButtonDropdown","forwardRef","props","ref","id","items","bsSize","bsStyle","variant","disabled","iconOnly","title","splitButton","customDropdown","open","noCaret","onOpen","noop","onClose","onLabelButtonClick","usePortal","popperConfig","toggleButtonType","toggleClassName","dropdownClassName","className","remainingProps","internalOpen","setInternalOpen","useState","refDropdownToggle","setRefDropdownToggle","refDropdownMenu","setRefDropdownMenu","refSplitButtonToggle","setRefSplitButtonToggle","defaultPopperConfig","popperParentRef","styles","attributes","usePopper","isUncontrolled","isNil","isOpen","wrapperRef","useClickOutside","event","closeMenu","DEFAULT_EVENT_TYPES","dropdownRoot","getOrCreatePortalRoot","shouldShowCaret","useEffect","toggleOpen","openMenu","handleSplitLabelButtonClick","handleSplitCaretButtonClick","handleDropdownButtonClick","wrapperClasses","classNames","dropdownClasses","dropdownMenu","jsx","MenuItemList","MenuItems","jsxs","DropdownToggleButton","Caret","SplitCaretButton","ReactDOM","ButtonDropdown"],"mappings":"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"}

package/components/dropdown/DropdownSubmenu.d.ts

@@ -3,6 +3,8 @@ import { MenuItemProps as MenuItem } from '../menuItems/MenuItem';
 export type DropdownSubmenuProps = {
     /**
      * Displayed button title.
+     *
+     * @default ''
      */
     title?: string | React.ReactNode;
     /**
@@ -11,6 +13,8 @@ export type DropdownSubmenuProps = {
     items?: MenuItem[];
     /**
      * Disables every entry on the title list item.
+     *
+     * @default false
      */
     disabled?: boolean;
     /**

package/components/dropdown/DropdownSubmenu.js

@@ -1,11 +1,11 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { useState as s } from "react";
-import g from "classnames";
-import { usePopper as v } from "react-popper";
+import { usePopper as g } from "react-popper";
+import v from "../../utils/classNames.js";
 import w from "../menuItems/MenuItems.js";
 import x from "../menuItems/MenuItemList.js";
 const E = (n) => {
-  const { title: a = "", items: l = [], disabled: t = !1, className: m, ...i } = n, p = g("dropdown-submenu", t && "disabled", m), [u, c] = s(null), [f, d] = s(null), [h, o] = s(!1), b = () => o(!0), M = () => o(!1), { styles: N, attributes: P } = v(u, f, {
+  const { title: a = "", items: l = [], disabled: t = !1, className: m, ...i } = n, p = v("dropdown-submenu", t && "disabled", m), [u, c] = s(null), [f, d] = s(null), [h, o] = s(!1), b = () => o(!0), M = () => o(!1), { styles: N, attributes: P } = g(u, f, {
     placement: "right-start",
     modifiers: [
       {

package/components/dropdown/DropdownSubmenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownSubmenu.js","sources":["../../../src/components/dropdown/DropdownSubmenu.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport classNames from 'classnames';\nimport { usePopper } from 'react-popper';\n\nimport MenuItems from '../menuItems/MenuItems';\nimport MenuItemList from '../menuItems/MenuItemList';\nimport type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';\n\nexport type DropdownSubmenuProps = {\n    /**\n     * Displayed button title.\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * Items to display in the dropdown sub menu.\n     */\n    items?: MenuItem[];\n\n    /**\n     * Disables every entry on the title list item.\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the dropdown-submenu element.\n     */\n    className?: string;\n};\n\nconst DropdownSubmenu = (props: DropdownSubmenuProps) => {\n    const { title = '', items = [], disabled = false, className, ...remainingProps } = props;\n\n    const classes = classNames('dropdown-submenu', disabled && 'disabled', className);\n\n    const [refParentPopper, setRefParentPopper] = useState<HTMLLIElement | null>(null);\n    const [refDropdownSubmenu, setRefDropdownSubmenu] = useState<HTMLUListElement | null>(null);\n\n    // We have to use the workaround of checking the hover state as popper may render\n    // the sub menu on an odd place and fixes it's position on the next render cycle\n    const [isHover, setIsHover] = useState(false);\n    const handleMouseEnter = () => setIsHover(true);\n    const handleMouseLeave = () => setIsHover(false);\n\n    const { styles, attributes } = usePopper(refParentPopper, refDropdownSubmenu, {\n        placement: 'right-start',\n        modifiers: [\n            {\n                name: 'offset',\n                options: {\n                    offset: [-4, 0],\n                },\n            },\n        ],\n    });\n\n    // return a list item that is also automatically the new toggle for the submenu\n    return (\n        <li\n            ref={setRefParentPopper}\n            {...remainingProps}\n            className={classes}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n        >\n            {/* biome-ignore lint/a11y/useValidAnchor: <explanation> */}\n            <a className='submenu-title' role='menuitem'>\n                <span className='submenu-title-text'>{title}</span>\n                <span className='rioglyph rioglyph-chevron-right' />\n            </a>\n            {/* The actual submenu items */}\n            {isHover && !disabled && (\n                <MenuItemList ref={setRefDropdownSubmenu} style={styles.popper} {...attributes.popper}>\n                    <MenuItems items={items} />\n                </MenuItemList>\n            )}\n        </li>\n    );\n};\n\nexport default DropdownSubmenu;\n"],"names":["DropdownSubmenu","props","title","items","disabled","className","remainingProps","classes","classNames","refParentPopper","setRefParentPopper","useState","refDropdownSubmenu","setRefDropdownSubmenu","isHover","setIsHover","handleMouseEnter","handleMouseLeave","styles","attributes","usePopper","jsxs","jsx","MenuItemList","MenuItems"],"mappings":";;;;;;AA+BA,MAAMA,IAAkB,CAACC,MAAgC;AACrD,QAAM,EAAE,OAAAC,IAAQ,IAAI,OAAAC,IAAQ,CAAA,GAAI,UAAAC,IAAW,IAAO,WAAAC,GAAW,GAAGC,EAAA,IAAmBL,GAE7EM,IAAUC,EAAW,oBAAoBJ,KAAY,YAAYC,CAAS,GAE1E,CAACI,GAAiBC,CAAkB,IAAIC,EAA+B,IAAI,GAC3E,CAACC,GAAoBC,CAAqB,IAAIF,EAAkC,IAAI,GAIpF,CAACG,GAASC,CAAU,IAAIJ,EAAS,EAAK,GACtCK,IAAmB,MAAMD,EAAW,EAAI,GACxCE,IAAmB,MAAMF,EAAW,EAAK,GAEzC,EAAE,QAAAG,GAAQ,YAAAC,EAAA,IAAeC,EAAUX,GAAiBG,GAAoB;AAAA,IAC1E,WAAW;AAAA,IACX,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAQ,CAAC,IAAI,CAAC;AAAA,QAAA;AAAA,MAClB;AAAA,IACJ;AAAA,EACJ,CACH;AAGD,SACI,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKX;AAAA,MACJ,GAAGJ;AAAA,MACJ,WAAWC;AAAA,MACX,cAAcS;AAAA,MACd,cAAcC;AAAA,MAGd,UAAA;AAAA,QAAA,gBAAAI,EAAC,KAAA,EAAE,WAAU,iBAAgB,MAAK,YAC9B,UAAA;AAAA,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,sBAAsB,UAAApB,GAAM;AAAA,UAC5C,gBAAAoB,EAAC,QAAA,EAAK,WAAU,kCAAA,CAAkC;AAAA,QAAA,GACtD;AAAA,QAECR,KAAW,CAACV,KACT,gBAAAkB,EAACC,GAAA,EAAa,KAAKV,GAAuB,OAAOK,EAAO,QAAS,GAAGC,EAAW,QAC3E,UAAA,gBAAAG,EAACE,GAAA,EAAU,OAAArB,GAAc,EAAA,CAC7B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIhB;"}
+{"version":3,"file":"DropdownSubmenu.js","sources":["../../../src/components/dropdown/DropdownSubmenu.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport { usePopper } from 'react-popper';\n\nimport classNames from '../../utils/classNames';\nimport MenuItems from '../menuItems/MenuItems';\nimport MenuItemList from '../menuItems/MenuItemList';\nimport type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';\n\nexport type DropdownSubmenuProps = {\n    /**\n     * Displayed button title.\n     *\n     * @default ''\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * Items to display in the dropdown sub menu.\n     */\n    items?: MenuItem[];\n\n    /**\n     * Disables every entry on the title list item.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the dropdown-submenu element.\n     */\n    className?: string;\n};\n\nconst DropdownSubmenu = (props: DropdownSubmenuProps) => {\n    const { title = '', items = [], disabled = false, className, ...remainingProps } = props;\n\n    const classes = classNames('dropdown-submenu', disabled && 'disabled', className);\n\n    const [refParentPopper, setRefParentPopper] = useState<HTMLLIElement | null>(null);\n    const [refDropdownSubmenu, setRefDropdownSubmenu] = useState<HTMLUListElement | null>(null);\n\n    // We have to use the workaround of checking the hover state as popper may render\n    // the sub menu on an odd place and fixes it's position on the next render cycle\n    const [isHover, setIsHover] = useState(false);\n    const handleMouseEnter = () => setIsHover(true);\n    const handleMouseLeave = () => setIsHover(false);\n\n    const { styles, attributes } = usePopper(refParentPopper, refDropdownSubmenu, {\n        placement: 'right-start',\n        modifiers: [\n            {\n                name: 'offset',\n                options: {\n                    offset: [-4, 0],\n                },\n            },\n        ],\n    });\n\n    // return a list item that is also automatically the new toggle for the submenu\n    return (\n        <li\n            ref={setRefParentPopper}\n            {...remainingProps}\n            className={classes}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n        >\n            {/* biome-ignore lint/a11y/useValidAnchor: <explanation> */}\n            <a className='submenu-title' role='menuitem'>\n                <span className='submenu-title-text'>{title}</span>\n                <span className='rioglyph rioglyph-chevron-right' />\n            </a>\n            {/* The actual submenu items */}\n            {isHover && !disabled && (\n                <MenuItemList ref={setRefDropdownSubmenu} style={styles.popper} {...attributes.popper}>\n                    <MenuItems items={items} />\n                </MenuItemList>\n            )}\n        </li>\n    );\n};\n\nexport default DropdownSubmenu;\n"],"names":["DropdownSubmenu","props","title","items","disabled","className","remainingProps","classes","classNames","refParentPopper","setRefParentPopper","useState","refDropdownSubmenu","setRefDropdownSubmenu","isHover","setIsHover","handleMouseEnter","handleMouseLeave","styles","attributes","usePopper","jsxs","jsx","MenuItemList","MenuItems"],"mappings":";;;;;;AAmCA,MAAMA,IAAkB,CAACC,MAAgC;AACrD,QAAM,EAAE,OAAAC,IAAQ,IAAI,OAAAC,IAAQ,CAAA,GAAI,UAAAC,IAAW,IAAO,WAAAC,GAAW,GAAGC,EAAA,IAAmBL,GAE7EM,IAAUC,EAAW,oBAAoBJ,KAAY,YAAYC,CAAS,GAE1E,CAACI,GAAiBC,CAAkB,IAAIC,EAA+B,IAAI,GAC3E,CAACC,GAAoBC,CAAqB,IAAIF,EAAkC,IAAI,GAIpF,CAACG,GAASC,CAAU,IAAIJ,EAAS,EAAK,GACtCK,IAAmB,MAAMD,EAAW,EAAI,GACxCE,IAAmB,MAAMF,EAAW,EAAK,GAEzC,EAAE,QAAAG,GAAQ,YAAAC,EAAA,IAAeC,EAAUX,GAAiBG,GAAoB;AAAA,IAC1E,WAAW;AAAA,IACX,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAQ,CAAC,IAAI,CAAC;AAAA,QAAA;AAAA,MAClB;AAAA,IACJ;AAAA,EACJ,CACH;AAGD,SACI,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKX;AAAA,MACJ,GAAGJ;AAAA,MACJ,WAAWC;AAAA,MACX,cAAcS;AAAA,MACd,cAAcC;AAAA,MAGd,UAAA;AAAA,QAAA,gBAAAI,EAAC,KAAA,EAAE,WAAU,iBAAgB,MAAK,YAC9B,UAAA;AAAA,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,sBAAsB,UAAApB,GAAM;AAAA,UAC5C,gBAAAoB,EAAC,QAAA,EAAK,WAAU,kCAAA,CAAkC;AAAA,QAAA,GACtD;AAAA,QAECR,KAAW,CAACV,KACT,gBAAAkB,EAACC,GAAA,EAAa,KAAKV,GAAuB,OAAOK,EAAO,QAAS,GAAGC,EAAW,QAC3E,UAAA,gBAAAG,EAACE,GAAA,EAAU,OAAArB,GAAc,EAAA,CAC7B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIhB;"}

package/components/dropdown/DropdownToggleButton.d.ts

@@ -15,5 +15,5 @@ export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
     outerRef?: React.Ref<HTMLButtonElement | HTMLDivElement>;
     className?: string;
 };
-declare const DropdownToggleButton: import('react').ForwardRefExoticComponent<Omit<PropsWithChildren<DropdownToggleButtonProps>, "ref"> & import('react').RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+declare const DropdownToggleButton: import('react').ForwardRefExoticComponent<Omit<PropsWithChildren<DropdownToggleButtonProps>, "ref"> & import('react').RefAttributes<HTMLDivElement | HTMLButtonElement>>;
 export default DropdownToggleButton;

package/components/dropdown/DropdownToggleButton.js

@@ -1,9 +1,9 @@
 import { jsx as i } from "react/jsx-runtime";
 import { forwardRef as x } from "react";
-import c from "classnames";
 import B from "../button/Button.js";
 import C from "../../hooks/useMergeRefs.js";
-const $ = x((f, u) => {
+import c from "../../utils/classNames.js";
+const j = x((f, u) => {
   const {
     id: e,
     disabled: t,
@@ -14,6 +14,7 @@ const $ = x((f, u) => {
     onClick: s,
     toggleButtonType: p = "button",
     className: n = "",
+    as: R,
     children: r,
     outerRef: b,
     iconOnly: y,
@@ -75,6 +76,6 @@ const $ = x((f, u) => {
   );
 });
 export {
-  $ as default
+  j as default
 };
 //# sourceMappingURL=DropdownToggleButton.js.map

package/components/dropdown/DropdownToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownToggleButton.js","sources":["../../../src/components/dropdown/DropdownToggleButton.tsx"],"sourcesContent":["import { forwardRef, type HTMLProps, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport Button, { type BUTTON_VARIANT, type BUTTON_SIZE, type BUTTON_STYLE } from '../button/Button';\nimport useMergeRefs from '../../hooks/useMergeRefs';\n\nexport type DropdownToggleButtonType = 'button' | 'tag' | 'label';\n\nexport type DropdownToggleEvent<T extends DropdownToggleButtonType = 'button'> = T extends 'button'\n    ? React.MouseEvent<HTMLButtonElement>\n    : React.MouseEvent<HTMLDivElement>;\n\nexport type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {\n    id?: string;\n    disabled?: boolean;\n    splitButton?: boolean;\n    iconOnly?: boolean;\n    onClick: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;\n    bsSize: BUTTON_SIZE;\n    bsStyle: BUTTON_STYLE;\n    variant?: BUTTON_VARIANT;\n    toggleButtonType?: DropdownToggleButtonType;\n    outerRef?: React.Ref<HTMLButtonElement | HTMLDivElement>;\n    className?: string;\n};\n\nconst DropdownToggleButton = forwardRef<\n    HTMLButtonElement | HTMLDivElement,\n    PropsWithChildren<DropdownToggleButtonProps>\n>((props, ref) => {\n    const {\n        id,\n        disabled,\n        bsSize,\n        bsStyle,\n        variant,\n        splitButton = false,\n        onClick,\n        toggleButtonType = 'button',\n        className = '',\n        children,\n        outerRef,\n        iconOnly,\n        ...remainingProps\n    } = props;\n\n    const toggleRef = useMergeRefs(outerRef, ref);\n\n    const buttonClasses = classNames(!splitButton && 'dropdown-toggle', !splitButton && className);\n\n    const labelClasses = classNames(\n        'dropdown-toggle',\n        'label',\n        `label-${bsStyle}`,\n        'display-flex align-items-center',\n        'user-select-none cursor-pointer',\n        disabled && 'pointer-events-none',\n        className\n    );\n    const tagClasses = classNames(\n        'dropdown-toggle',\n        'tag',\n        'clickable height-auto',\n        bsSize === 'sm' && 'tag-small',\n        'display-flex align-items-center',\n        'user-select-none cursor-pointer',\n        disabled && 'pointer-events-none',\n        className\n    );\n\n    if (toggleButtonType === 'tag') {\n        return (\n            <div\n                {...(remainingProps as typeof HTMLDivElement)}\n                id={id}\n                ref={toggleRef}\n                onClick={onClick}\n                className={tagClasses}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    if (toggleButtonType === 'label') {\n        return (\n            <div\n                {...(remainingProps as typeof HTMLDivElement)}\n                id={id}\n                ref={toggleRef}\n                onClick={onClick}\n                className={labelClasses}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    return (\n        <Button\n            {...remainingProps}\n            id={splitButton ? `button-${id}` : id}\n            type='button'\n            ref={toggleRef}\n            disabled={disabled}\n            bsStyle={bsStyle}\n            bsSize={bsSize}\n            variant={variant}\n            onClick={onClick}\n            iconOnly={iconOnly}\n            className={buttonClasses}\n        >\n            {children}\n        </Button>\n    );\n});\n\nexport default DropdownToggleButton;\n"],"names":["DropdownToggleButton","forwardRef","props","ref","id","disabled","bsSize","bsStyle","variant","splitButton","onClick","toggleButtonType","className","children","outerRef","iconOnly","remainingProps","toggleRef","useMergeRefs","buttonClasses","classNames","labelClasses","tagClasses","jsx","Button"],"mappings":";;;;;AA0BA,MAAMA,IAAuBC,EAG3B,CAACC,GAAOC,MAAQ;AACd,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,SAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHd,GAEEe,IAAYC,EAAaJ,GAAUX,CAAG,GAEtCgB,IAAgBC,EAAW,CAACX,KAAe,mBAAmB,CAACA,KAAeG,CAAS,GAEvFS,IAAeD;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAASb,CAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACAF,KAAY;AAAA,IACZO;AAAA,EAAA,GAEEU,IAAaF;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACAd,MAAW,QAAQ;AAAA,IACnB;AAAA,IACA;AAAA,IACAD,KAAY;AAAA,IACZO;AAAA,EAAA;AAGJ,SAAID,MAAqB,QAEjB,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAIP;AAAA,MACL,IAAAZ;AAAA,MACA,KAAKa;AAAA,MACL,SAAAP;AAAA,MACA,WAAWY;AAAA,MAEV,UAAAT;AAAA,IAAA;AAAA,EAAA,IAKTF,MAAqB,UAEjB,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAIP;AAAA,MACL,IAAAZ;AAAA,MACA,KAAKa;AAAA,MACL,SAAAP;AAAA,MACA,WAAWW;AAAA,MAEV,UAAAR;AAAA,IAAA;AAAA,EAAA,IAMT,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,IAAIP,IAAc,UAAUL,CAAE,KAAKA;AAAA,MACnC,MAAK;AAAA,MACL,KAAKa;AAAA,MACL,UAAAZ;AAAA,MACA,SAAAE;AAAA,MACA,QAAAD;AAAA,MACA,SAAAE;AAAA,MACA,SAAAE;AAAA,MACA,UAAAK;AAAA,MACA,WAAWI;AAAA,MAEV,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;"}
+{"version":3,"file":"DropdownToggleButton.js","sources":["../../../src/components/dropdown/DropdownToggleButton.tsx"],"sourcesContent":["import { forwardRef, type HTMLProps, type PropsWithChildren } from 'react';\n\nimport Button, { type BUTTON_VARIANT, type BUTTON_SIZE, type BUTTON_STYLE } from '../button/Button';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport classNames from '../../utils/classNames';\n\nexport type DropdownToggleButtonType = 'button' | 'tag' | 'label';\n\nexport type DropdownToggleEvent<T extends DropdownToggleButtonType = 'button'> = T extends 'button'\n    ? React.MouseEvent<HTMLButtonElement>\n    : React.MouseEvent<HTMLDivElement>;\n\nexport type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {\n    id?: string;\n    disabled?: boolean;\n    splitButton?: boolean;\n    iconOnly?: boolean;\n    onClick: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;\n    bsSize: BUTTON_SIZE;\n    bsStyle: BUTTON_STYLE;\n    variant?: BUTTON_VARIANT;\n    toggleButtonType?: DropdownToggleButtonType;\n    outerRef?: React.Ref<HTMLButtonElement | HTMLDivElement>;\n    className?: string;\n};\n\nconst DropdownToggleButton = forwardRef<\n    HTMLButtonElement | HTMLDivElement,\n    PropsWithChildren<DropdownToggleButtonProps>\n>((props, ref) => {\n    const {\n        id,\n        disabled,\n        bsSize,\n        bsStyle,\n        variant,\n        splitButton = false,\n        onClick,\n        toggleButtonType = 'button',\n        className = '',\n        as: _as,\n        children,\n        outerRef,\n        iconOnly,\n        ...remainingProps\n    } = props;\n\n    const toggleRef = useMergeRefs(outerRef, ref);\n\n    const buttonClasses = classNames(!splitButton && 'dropdown-toggle', !splitButton && className);\n\n    const labelClasses = classNames(\n        'dropdown-toggle',\n        'label',\n        `label-${bsStyle}`,\n        'display-flex align-items-center',\n        'user-select-none cursor-pointer',\n        disabled && 'pointer-events-none',\n        className\n    );\n    const tagClasses = classNames(\n        'dropdown-toggle',\n        'tag',\n        'clickable height-auto',\n        bsSize === 'sm' && 'tag-small',\n        'display-flex align-items-center',\n        'user-select-none cursor-pointer',\n        disabled && 'pointer-events-none',\n        className\n    );\n\n    if (toggleButtonType === 'tag') {\n        return (\n            <div\n                {...(remainingProps as typeof HTMLDivElement)}\n                id={id}\n                ref={toggleRef}\n                onClick={onClick}\n                className={tagClasses}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    if (toggleButtonType === 'label') {\n        return (\n            <div\n                {...(remainingProps as typeof HTMLDivElement)}\n                id={id}\n                ref={toggleRef}\n                onClick={onClick}\n                className={labelClasses}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    return (\n        <Button\n            {...remainingProps}\n            id={splitButton ? `button-${id}` : id}\n            type='button'\n            ref={toggleRef}\n            disabled={disabled}\n            bsStyle={bsStyle}\n            bsSize={bsSize}\n            variant={variant}\n            onClick={onClick}\n            iconOnly={iconOnly}\n            className={buttonClasses}\n        >\n            {children}\n        </Button>\n    );\n});\n\nexport default DropdownToggleButton;\n"],"names":["DropdownToggleButton","forwardRef","props","ref","id","disabled","bsSize","bsStyle","variant","splitButton","onClick","toggleButtonType","className","_as","children","outerRef","iconOnly","remainingProps","toggleRef","useMergeRefs","buttonClasses","classNames","labelClasses","tagClasses","jsx","Button"],"mappings":";;;;;AA0BA,MAAMA,IAAuBC,EAG3B,CAACC,GAAOC,MAAQ;AACd,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,SAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,WAAAC,IAAY;AAAA,IACZ,IAAIC;AAAA,IACJ,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHf,GAEEgB,IAAYC,EAAaJ,GAAUZ,CAAG,GAEtCiB,IAAgBC,EAAW,CAACZ,KAAe,mBAAmB,CAACA,KAAeG,CAAS,GAEvFU,IAAeD;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAASd,CAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACAF,KAAY;AAAA,IACZO;AAAA,EAAA,GAEEW,IAAaF;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACAf,MAAW,QAAQ;AAAA,IACnB;AAAA,IACA;AAAA,IACAD,KAAY;AAAA,IACZO;AAAA,EAAA;AAGJ,SAAID,MAAqB,QAEjB,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAIP;AAAA,MACL,IAAAb;AAAA,MACA,KAAKc;AAAA,MACL,SAAAR;AAAA,MACA,WAAWa;AAAA,MAEV,UAAAT;AAAA,IAAA;AAAA,EAAA,IAKTH,MAAqB,UAEjB,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAIP;AAAA,MACL,IAAAb;AAAA,MACA,KAAKc;AAAA,MACL,SAAAR;AAAA,MACA,WAAWY;AAAA,MAEV,UAAAR;AAAA,IAAA;AAAA,EAAA,IAMT,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,IAAIR,IAAc,UAAUL,CAAE,KAAKA;AAAA,MACnC,MAAK;AAAA,MACL,KAAKc;AAAA,MACL,UAAAb;AAAA,MACA,SAAAE;AAAA,MACA,QAAAD;AAAA,MACA,SAAAE;AAAA,MACA,SAAAE;AAAA,MACA,UAAAM;AAAA,MACA,WAAWI;AAAA,MAEV,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;"}