@rio-cloud/rio-uikit 2.1.0 → 2.2.1

package/components/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import React, { useState, useRef, type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\nimport { AnimatePresence, type AnimationDefinition, motion, type Transition, useReducedMotion } from 'motion/react';\n\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\nimport useEsc from '../../hooks/useEsc';\nimport DialogHeader from './DialogHeader';\nimport DialogBody from './DialogBody';\nimport DialogFooter from './DialogFooter';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { DialogContextProvider } from './dialogContext';\n\nconst MODAL_DIALOG_CLASS = 'modal-dialog';\nconst MODAL_OPEN_CLASS = 'modal-open';\n\nexport type DialogSize =\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | 'full'\n    | 'fullwidth'\n    | 'fullheight'\n    | 'fullheight-lg'\n    | 'fullheight-xl'\n    | 'fullscreen';\n\nexport type BaseDialogProps = {\n    /**\n     * Opens the dialog when set to `true`.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * The dialog title (can also be a FormattedMessage component).\n     */\n    title?: React.ReactNode;\n\n    /**\n     * The dialog header subtitle content.\n     */\n    subtitle?: React.ReactNode;\n\n    /**\n     * Shows a close button when set to `true`.\n     *\n     * @default true\n     */\n    showCloseButton?: boolean;\n\n    /**\n     * A callback function invoked when the dialog closes.\n     */\n    onClose?: () => void;\n\n    /**\n     * Defined how large the dialog will be rendered.\n     *\n     * By default, the dialog has a medium size, and thus it can be omitted.\n     *\n     * Possible values are:\n     *\n     * - `'xs'`\n     * - `'sm'`\n     * - `'lg'`\n     * - `'xl'`\n     * - `'fullwidth'`\n     * - `'fullheight'`\n     * - `'fullheight-lg'`\n     * - `'fullheight-xl'`\n     * - `'fullscreen'`\n     *\n     * @default 'md'\n     */\n    bsSize?: DialogSize;\n\n    /**\n     * Enables or disabled closing the dialog via esc key.\n     *\n     * @default false\n     */\n    disableEsc?: boolean;\n\n    /**\n     * Enables the modal body to overflow and use inline scrolling if needed.\n     *\n     * @default false\n     */\n    useOverflow?: boolean;\n\n    /**\n     * Show Header and Footer Borders for the \"xs\" dialog\n     *\n     * @default false\n     */\n    showXsDialogBorders?: boolean;\n\n    /**\n     * Additional classes for the modal element.\n     */\n    className?: string;\n};\n\nexport type DialogProps = BaseDialogProps & {\n    /**\n     * The dialog body content.\n     */\n    body?: React.ReactNode;\n\n    /**\n     * The dialog body content.\n     */\n    footer?: React.ReactNode;\n\n    /**\n     * Additional classes for the modal-body element.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes for the modal-footer element.\n     */\n    footerClassName?: string;\n\n    /**\n     * Allows to add additional buttons to the dialog header.\n     */\n    headerButtons?: React.ReactNode;\n\n    /**\n     * A callback fired when esc key is pressed and the dialog is about to close.\n     */\n    onEsc?: VoidFunction;\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     * @default () => true\n     */\n    onCloseValidation?: () => boolean;\n};\n\nconst Dialog = (props: PropsWithChildren<DialogProps>) => {\n    const {\n        title,\n        subtitle,\n        body,\n        footer,\n        headerButtons,\n        className = '',\n        bodyClassName,\n        footerClassName,\n        showXsDialogBorders = false,\n        showCloseButton = true,\n        useOverflow = false,\n        bsSize,\n        show = false,\n        onClose: onCloseCallback = noop,\n        disableEsc = false,\n        onEsc = noop,\n        onCloseValidation = () => true,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [open, setOpen] = useState(show);\n    const dialogWrapperRef = useRef<HTMLDivElement>(null);\n\n    const modalRoot = getOrCreatePortalRoot();\n\n    const shouldReduceMotion = useReducedMotion();\n\n    // Use a setter function for the focus trap as it would not re-render\n    // and fails to set the focus listener\n    const [focusTrapRef, setFocusTrapRef] = useState<HTMLDivElement>();\n    useFocusTrap(focusTrapRef);\n\n    const toggleBodyClass = (add: boolean) => {\n        // We need to set a body class to fix the -webkit-overflow-scrolling on safari and iOS\n\n        // Remove \"modal-open\" from body only when there is no other dialog in the DOM\n        // in order to support multiple dialogs\n        const hasOtherDialogs = modalRoot.getElementsByClassName(MODAL_DIALOG_CLASS).length > 1;\n\n        if (add) {\n            document.body.classList.add(MODAL_OPEN_CLASS);\n        } else if (!add && !hasOtherDialogs) {\n            document.body.classList.remove(MODAL_OPEN_CLASS);\n        }\n    };\n\n    const handleCloseButton = () => closeDialog(true);\n\n    const closeDialog = (usedEscapeKey: boolean) => {\n        if (onCloseValidation()) {\n            setOpen(false);\n            onCloseCallback();\n\n            usedEscapeKey && onEsc();\n        }\n    };\n\n    const [previousShow, setPreviousShow] = useState(show);\n    if (show !== previousShow) {\n        setOpen(show);\n        toggleBodyClass(show);\n        setPreviousShow(show);\n    }\n\n    useEsc(() => {\n        if (!dialogWrapperRef || !dialogWrapperRef.current) {\n            return;\n        }\n\n        const dialogElement = dialogWrapperRef.current;\n        const currentActiveElement = document.activeElement;\n\n        // Only allow to close the dialog when the focus is inside the dialog\n        if (!disableEsc && dialogElement.contains(currentActiveElement)) {\n            closeDialog(true);\n        }\n    });\n\n    const handleAnimationComplete = (definition: AnimationDefinition) => {\n        // The animation complete callback is invoked too when closing the dialog.\n        // For that we check the animation props like the \"opacity\" to skip focusing\n        // on the way out when closing the dialog.\n        // @ts-ignore\n        if (definition.opacity === 0) {\n            return;\n        }\n\n        const dialogElement = dialogWrapperRef.current;\n        const currentActiveElement = document.activeElement;\n\n        // Set the focus to the dialog if no element inside has focus already. Otherwise, focused\n        // elements like inputs would lose their focus to the dialog.\n        // Note that in order to focus the dialog itself, the tabindex has to be set on that element\n        // IMPORTANT: make sure the dialog has a tabIndex prop\n        if (!dialogElement?.contains(currentActiveElement)) {\n            dialogWrapperRef?.current?.focus();\n        }\n    };\n\n    const modalClasses = classNames('modal', 'show', className);\n\n    const isSmallestDialog = bsSize === 'xs';\n\n    const hasChildren = !!children;\n\n    const modalDialogClasses = classNames(\n        MODAL_DIALOG_CLASS,\n        useOverflow && 'modal-overflow',\n        bsSize === 'xs' && 'modal-xs',\n        bsSize === 'sm' && 'modal-sm',\n        bsSize === 'lg' && 'modal-lg',\n        bsSize === 'xl' && 'modal-xl',\n        bsSize === 'full' && 'modal-full-width',\n        bsSize === 'fullwidth' && 'modal-full-width',\n        bsSize === 'fullheight' && 'modal-full-height',\n        bsSize === 'fullheight-lg' && 'modal-full-height modal-lg',\n        bsSize === 'fullheight-xl' && 'modal-full-height modal-xl',\n        bsSize === 'fullscreen' && 'modal-fullscreen'\n    );\n\n    const spring: Transition = {\n        type: 'spring',\n        damping: 33,\n        stiffness: 500,\n    };\n\n    const springXs: Transition = {\n        type: 'spring',\n        damping: 25,\n        stiffness: 400,\n    };\n\n    return ReactDOM.createPortal(\n        <DialogContextProvider\n            value={{ onClose: handleCloseButton, isSmallestDialog, showXsDialogBorders, showCloseButton }}\n        >\n            {/* @ts-ignore-next-line */}\n            <AnimatePresence\n                // Disable any initial animations on children that\n                // are present when the component is first rendered\n                initial={false}\n                // Only render one component at a time.\n                // The exiting component will finish its exit\n                // animation before entering component is rendered\n                mode='wait'\n            >\n                {open && (\n                    <div\n                        {...remainingProps}\n                        className={modalClasses}\n                        role='dialog'\n                        ref={dialogWrapperRef}\n                        aria-label='dialog'\n                        // Make sure it has a tabIndex to focus the dialog so the close on esc works.\n                        // biome-ignore lint/a11y/noNoninteractiveTabindex: <explanation>\n                        tabIndex={0}\n                    >\n                        <motion.div\n                            initial={shouldReduceMotion ? false : { opacity: 0, y: '-50%' }}\n                            animate={\n                                shouldReduceMotion\n                                    ? { opacity: 1 }\n                                    : { opacity: 1, y: 0, transition: isSmallestDialog ? springXs : spring }\n                            }\n                            exit={shouldReduceMotion ? undefined : { opacity: 0, y: '-150%' }}\n                            transition={\n                                shouldReduceMotion\n                                    ? { duration: 0 }\n                                    : {\n                                          opacity: { duration: 0.2 },\n                                          y: { duration: 0.3 },\n                                      }\n                            }\n                            onAnimationComplete={handleAnimationComplete}\n                            // @ts-ignore\n                            ref={setFocusTrapRef}\n                            className={modalDialogClasses}\n                            role='document'\n                        >\n                            <div className='modal-content'>\n                                {hasChildren && children}\n                                {!hasChildren && (\n                                    <>\n                                        {title && (\n                                            <DialogHeader\n                                                title={title}\n                                                subtitle={subtitle}\n                                                headerButtons={headerButtons}\n                                            />\n                                        )}\n                                        {body && <DialogBody className={bodyClassName}>{body}</DialogBody>}\n                                        {footer && <DialogFooter className={footerClassName}>{footer}</DialogFooter>}\n                                    </>\n                                )}\n                            </div>\n                        </motion.div>\n                        <motion.div\n                            initial={shouldReduceMotion ? false : { opacity: 0 }}\n                            animate={{ opacity: 1 }}\n                            exit={shouldReduceMotion ? undefined : { opacity: 0 }}\n                            transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.1 }}\n                            className='modal-backdrop'\n                        />\n                    </div>\n                )}\n            </AnimatePresence>\n        </DialogContextProvider>,\n        modalRoot\n    );\n};\n\nDialog.Title = DialogHeader;\nDialog.Body = DialogBody;\nDialog.Footer = DialogFooter;\n\nDialog.SIZE_XS = 'xs' as const;\nDialog.SIZE_SM = 'sm' as const;\nDialog.SIZE_MD = 'md' as const; // default\nDialog.SIZE_LG = 'lg' as const;\nDialog.SIZE_XL = 'xl' as const;\nDialog.SIZE_FULL = 'full' as const;\nDialog.SIZE_FULL_WIDTH = 'fullwidth' as const;\nDialog.SIZE_FULL_HEIGHT = 'fullheight' as const;\nDialog.SIZE_FULL_HEIGHT_LG = 'fullheight-lg' as const;\nDialog.SIZE_FULL_HEIGHT_XL = 'fullheight-xl' as const;\nDialog.SIZE_FULL_SCREEN = 'fullscreen' as const;\n\nexport default Dialog;\n"],"names":["MODAL_DIALOG_CLASS","MODAL_OPEN_CLASS","Dialog","props","title","subtitle","body","footer","headerButtons","className","bodyClassName","footerClassName","showXsDialogBorders","showCloseButton","useOverflow","bsSize","show","onCloseCallback","noop","disableEsc","onEsc","onCloseValidation","children","remainingProps","open","setOpen","useState","dialogWrapperRef","useRef","modalRoot","getOrCreatePortalRoot","shouldReduceMotion","useReducedMotion","focusTrapRef","setFocusTrapRef","useFocusTrap","toggleBodyClass","add","hasOtherDialogs","handleCloseButton","closeDialog","usedEscapeKey","previousShow","setPreviousShow","useEsc","dialogElement","currentActiveElement","handleAnimationComplete","definition","modalClasses","classNames","isSmallestDialog","hasChildren","modalDialogClasses","spring","springXs","ReactDOM","jsx","DialogContextProvider","AnimatePresence","jsxs","motion","Fragment","DialogHeader","DialogBody","DialogFooter"],"mappings":";;;;;;;;;;;;;AAcA,MAAMA,IAAqB,gBACrBC,IAAmB,cAsInBC,IAAS,CAACC,MAA0C;AACtD,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,qBAAAC,IAAsB;AAAA,IACtB,iBAAAC,IAAkB;AAAA,IAClB,aAAAC,IAAc;AAAA,IACd,QAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,SAASC,IAAkBC;AAAA,IAC3B,YAAAC,IAAa;AAAA,IACb,OAAAC,IAAQF;AAAA,IACR,mBAAAG,IAAoB,MAAM;AAAA,IAC1B,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHpB,GAEE,CAACqB,GAAMC,CAAO,IAAIC,EAASV,CAAI,GAC/BW,IAAmBC,GAAuB,IAAI,GAE9CC,IAAYC,GAAA,GAEZC,IAAqBC,GAAA,GAIrB,CAACC,GAAcC,CAAe,IAAIR,EAAA;AACxC,EAAAS,GAAaF,CAAY;AAEzB,QAAMG,IAAkB,CAACC,MAAiB;AAKtC,UAAMC,IAAkBT,EAAU,uBAAuB7B,CAAkB,EAAE,SAAS;AAEtF,IAAIqC,IACA,SAAS,KAAK,UAAU,IAAIpC,CAAgB,IACrC,CAACoC,KAAO,CAACC,KAChB,SAAS,KAAK,UAAU,OAAOrC,CAAgB;AAAA,EAEvD,GAEMsC,IAAoB,MAAMC,EAAgB,GAE1CA,IAAc,CAACC,MAA2B;AAC5C,IAAIpB,QACAI,EAAQ,EAAK,GACbR,EAAA,GAEiBG,EAAA;AAAA,EAEzB,GAEM,CAACsB,GAAcC,CAAe,IAAIjB,EAASV,CAAI;AACrD,EAAIA,MAAS0B,MACTjB,EAAQT,CAAI,GACZoB,EAAgBpB,CAAI,GACpB2B,EAAgB3B,CAAI,IAGxB4B,GAAO,MAAM;AACT,QAAI,CAACjB,KAAoB,CAACA,EAAiB;AACvC;AAGJ,UAAMkB,IAAgBlB,EAAiB,SACjCmB,IAAuB,SAAS;AAGtC,IAAI,CAAC3B,KAAc0B,EAAc,SAASC,CAAoB,KAC1DN,EAAgB;AAAA,EAExB,CAAC;AAED,QAAMO,IAA0B,CAACC,MAAoC;AAKjE,QAAIA,EAAW,YAAY;AACvB;AAGJ,UAAMH,IAAgBlB,EAAiB,SACjCmB,IAAuB,SAAS;AAMtC,IAAKD,GAAe,SAASC,CAAoB,KAC7CnB,GAAkB,SAAS,MAAA;AAAA,EAEnC,GAEMsB,IAAeC,EAAW,SAAS,QAAQzC,CAAS,GAEpD0C,IAAmBpC,MAAW,MAE9BqC,IAAc,CAAC,CAAC9B,GAEhB+B,IAAqBH;AAAA,IACvBlD;AAAA,IACAc,KAAe;AAAA,IACfC,MAAW,QAAQ;AAAA,IACnBA,MAAW,QAAQ;AAAA,IACnBA,MAAW,QAAQ;AAAA,IACnBA,MAAW,QAAQ;AAAA,IACnBA,MAAW,UAAU;AAAA,IACrBA,MAAW,eAAe;AAAA,IAC1BA,MAAW,gBAAgB;AAAA,IAC3BA,MAAW,mBAAmB;AAAA,IAC9BA,MAAW,mBAAmB;AAAA,IAC9BA,MAAW,gBAAgB;AAAA,EAAA,GAGzBuC,IAAqB;AAAA,IACvB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,EAAA,GAGTC,IAAuB;AAAA,IACzB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,EAAA;AAGf,SAAOC,GAAS;AAAA,IACZ,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,OAAO,EAAE,SAASnB,GAAmB,kBAAAY,GAAkB,qBAAAvC,GAAqB,iBAAAC,EAAA;AAAA,QAG5E,UAAA,gBAAA4C;AAAA,UAACE;AAAA,UAAA;AAAA,YAGG,SAAS;AAAA,YAIT,MAAK;AAAA,YAEJ,UAAAnC,KACG,gBAAAoC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACI,GAAGrC;AAAA,gBACJ,WAAW0B;AAAA,gBACX,MAAK;AAAA,gBACL,KAAKtB;AAAA,gBACL,cAAW;AAAA,gBAGX,UAAU;AAAA,gBAEV,UAAA;AAAA,kBAAA,gBAAA8B;AAAA,oBAACI,EAAO;AAAA,oBAAP;AAAA,sBACG,SAAS9B,IAAqB,KAAQ,EAAE,SAAS,GAAG,GAAG,OAAA;AAAA,sBACvD,SACIA,IACM,EAAE,SAAS,MACX,EAAE,SAAS,GAAG,GAAG,GAAG,YAAYoB,IAAmBI,IAAWD,EAAA;AAAA,sBAExE,MAAMvB,IAAqB,SAAY,EAAE,SAAS,GAAG,GAAG,QAAA;AAAA,sBACxD,YACIA,IACM,EAAE,UAAU,MACZ;AAAA,wBACI,SAAS,EAAE,UAAU,IAAA;AAAA,wBACrB,GAAG,EAAE,UAAU,IAAA;AAAA,sBAAI;AAAA,sBAGjC,qBAAqBgB;AAAA,sBAErB,KAAKb;AAAA,sBACL,WAAWmB;AAAA,sBACX,MAAK;AAAA,sBAEL,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,iBACV,UAAA;AAAA,wBAAAR,KAAe9B;AAAA,wBACf,CAAC8B,KACE,gBAAAQ,EAAAE,IAAA,EACK,UAAA;AAAA,0BAAA1D,KACG,gBAAAqD;AAAA,4BAACM;AAAA,4BAAA;AAAA,8BACG,OAAA3D;AAAA,8BACA,UAAAC;AAAA,8BACA,eAAAG;AAAA,4BAAA;AAAA,0BAAA;AAAA,0BAGPF,KAAQ,gBAAAmD,EAACO,GAAA,EAAW,WAAWtD,GAAgB,UAAAJ,GAAK;AAAA,0BACpDC,KAAU,gBAAAkD,EAACQ,GAAA,EAAa,WAAWtD,GAAkB,UAAAJ,EAAA,CAAO;AAAA,wBAAA,EAAA,CACjE;AAAA,sBAAA,EAAA,CAER;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAEJ,gBAAAkD;AAAA,oBAACI,EAAO;AAAA,oBAAP;AAAA,sBACG,SAAS9B,IAAqB,KAAQ,EAAE,SAAS,EAAA;AAAA,sBACjD,SAAS,EAAE,SAAS,EAAA;AAAA,sBACpB,MAAMA,IAAqB,SAAY,EAAE,SAAS,EAAA;AAAA,sBAClD,YAAYA,IAAqB,EAAE,UAAU,MAAM,EAAE,UAAU,IAAA;AAAA,sBAC/D,WAAU;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACd;AAAA,cAAA;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA;AAAA,MAER;AAAA,IAAA;AAAA,IAEJF;AAAA,EAAA;AAER;AAEA3B,EAAO,QAAQ6D;AACf7D,EAAO,OAAO8D;AACd9D,EAAO,SAAS+D;AAEhB/D,EAAO,UAAU;AACjBA,EAAO,UAAU;AACjBA,EAAO,UAAU;AACjBA,EAAO,UAAU;AACjBA,EAAO,UAAU;AACjBA,EAAO,YAAY;AACnBA,EAAO,kBAAkB;AACzBA,EAAO,mBAAmB;AAC1BA,EAAO,sBAAsB;AAC7BA,EAAO,sBAAsB;AAC7BA,EAAO,mBAAmB;"}
+{"version":3,"file":"Dialog.js","sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import React, { useState, type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport { noop } from 'es-toolkit/function';\nimport { AnimatePresence, type AnimationDefinition, motion, type Transition, useReducedMotion } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\nimport useEsc from '../../hooks/useEsc';\nimport DialogHeader from './DialogHeader';\nimport DialogBody from './DialogBody';\nimport DialogFooter from './DialogFooter';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { DialogContextProvider } from './dialogContext';\n\nconst MODAL_DIALOG_CLASS = 'modal-dialog';\nconst MODAL_OPEN_CLASS = 'modal-open';\n\nexport type DialogSize =\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | 'full'\n    | 'fullwidth'\n    | 'fullheight'\n    | 'fullheight-lg'\n    | 'fullheight-xl'\n    | 'fullscreen';\n\nexport type BaseDialogProps = {\n    /**\n     * Opens the dialog when set to `true`.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * The dialog title (can also be a FormattedMessage component).\n     */\n    title?: React.ReactNode;\n\n    /**\n     * The dialog header subtitle content.\n     */\n    subtitle?: React.ReactNode;\n\n    /**\n     * Shows a close button when set to `true`.\n     *\n     * @default true\n     */\n    showCloseButton?: boolean;\n\n    /**\n     * A callback function invoked when the dialog closes.\n     */\n    onClose?: () => void;\n\n    /**\n     * Defined how large the dialog will be rendered.\n     *\n     * By default, the dialog has a medium size, and thus it can be omitted.\n     *\n     * Possible values are:\n     *\n     * - `'xs'`\n     * - `'sm'`\n     * - `'lg'`\n     * - `'xl'`\n     * - `'fullwidth'`\n     * - `'fullheight'`\n     * - `'fullheight-lg'`\n     * - `'fullheight-xl'`\n     * - `'fullscreen'`\n     *\n     * @default 'md'\n     */\n    bsSize?: DialogSize;\n\n    /**\n     * Enables or disabled closing the dialog via esc key.\n     *\n     * @default false\n     */\n    disableEsc?: boolean;\n\n    /**\n     * Enables the modal body to overflow and use inline scrolling if needed.\n     *\n     * @default false\n     */\n    useOverflow?: boolean;\n\n    /**\n     * Show Header and Footer Borders for the \"xs\" dialog\n     *\n     * @default false\n     */\n    showXsDialogBorders?: boolean;\n\n    /**\n     * Additional classes for the modal element.\n     */\n    className?: string;\n};\n\nexport type DialogProps = BaseDialogProps & {\n    /**\n     * The dialog body content.\n     */\n    body?: React.ReactNode;\n\n    /**\n     * The dialog body content.\n     */\n    footer?: React.ReactNode;\n\n    /**\n     * Additional classes for the modal-body element.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes for the modal-footer element.\n     */\n    footerClassName?: string;\n\n    /**\n     * Allows to add additional buttons to the dialog header.\n     */\n    headerButtons?: React.ReactNode;\n\n    /**\n     * A callback fired when esc key is pressed and the dialog is about to close.\n     */\n    onEsc?: VoidFunction;\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     * @default () => true\n     */\n    onCloseValidation?: () => boolean;\n};\n\nconst Dialog = (props: PropsWithChildren<DialogProps>) => {\n    const {\n        title,\n        subtitle,\n        body,\n        footer,\n        headerButtons,\n        className = '',\n        bodyClassName,\n        footerClassName,\n        showXsDialogBorders = false,\n        showCloseButton = true,\n        useOverflow = false,\n        bsSize,\n        show = false,\n        onClose: onCloseCallback = noop,\n        disableEsc = false,\n        onEsc = noop,\n        onCloseValidation = () => true,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [open, setOpen] = useState(show);\n\n    const modalRoot = getOrCreatePortalRoot();\n\n    const shouldReduceMotion = useReducedMotion();\n\n    // Use a setter function for the focus trap as it would not re-render\n    // and fails to set the focus listener\n    const [focusTrapRef, setFocusTrapRef] = useState<HTMLDivElement | null>(null);\n    useFocusTrap(focusTrapRef);\n\n    const toggleBodyClass = (add: boolean) => {\n        // We need to set a body class to fix the -webkit-overflow-scrolling on safari and iOS\n\n        // Remove \"modal-open\" from body only when there is no other dialog in the DOM\n        // in order to support multiple dialogs\n        const hasOtherDialogs = modalRoot.getElementsByClassName(MODAL_DIALOG_CLASS).length > 1;\n\n        if (add) {\n            document.body.classList.add(MODAL_OPEN_CLASS);\n        } else if (!add && !hasOtherDialogs) {\n            document.body.classList.remove(MODAL_OPEN_CLASS);\n        }\n    };\n\n    const handleCloseButton = () => closeDialog(true);\n\n    const closeDialog = (usedEscapeKey: boolean) => {\n        if (onCloseValidation()) {\n            setOpen(false);\n            onCloseCallback();\n\n            usedEscapeKey && onEsc();\n        }\n    };\n\n    const [previousShow, setPreviousShow] = useState(show);\n    if (show !== previousShow) {\n        setOpen(show);\n        toggleBodyClass(show);\n        setPreviousShow(show);\n    }\n\n    useEsc(() => {\n        if (!focusTrapRef) {\n            return;\n        }\n\n        const dialogElement = focusTrapRef;\n        const currentActiveElement = document.activeElement;\n\n        // Only allow to close the dialog when the focus is inside the dialog\n        if (!disableEsc && dialogElement.contains(currentActiveElement)) {\n            closeDialog(true);\n        }\n    });\n\n    const handleAnimationComplete = (definition: AnimationDefinition) => {\n        // The animation complete callback is invoked too when closing the dialog.\n        // For that we check the animation props like the \"opacity\" to skip focusing\n        // on the way out when closing the dialog.\n        // @ts-expect-error\n        if (definition.opacity === 0) {\n            return;\n        }\n\n        const dialogElement = focusTrapRef;\n        const currentActiveElement = document.activeElement;\n\n        // Set the focus to the dialog if no element inside has focus already. Otherwise, focused\n        // elements like inputs would lose their focus to the dialog.\n        // Note that in order to focus the dialog itself, the tabindex has to be set on that element\n        // IMPORTANT: make sure the dialog has a tabIndex prop\n        if (!dialogElement?.contains(currentActiveElement)) {\n            dialogElement?.focus();\n        }\n    };\n\n    const modalClasses = classNames('modal', 'show', className);\n\n    const isSmallestDialog = bsSize === 'xs';\n\n    const hasChildren = !!children;\n\n    const modalDialogClasses = classNames(\n        MODAL_DIALOG_CLASS,\n        useOverflow && 'modal-overflow',\n        bsSize === 'xs' && 'modal-xs',\n        bsSize === 'sm' && 'modal-sm',\n        bsSize === 'lg' && 'modal-lg',\n        bsSize === 'xl' && 'modal-xl',\n        bsSize === 'full' && 'modal-full-width',\n        bsSize === 'fullwidth' && 'modal-full-width',\n        bsSize === 'fullheight' && 'modal-full-height',\n        bsSize === 'fullheight-lg' && 'modal-full-height modal-lg',\n        bsSize === 'fullheight-xl' && 'modal-full-height modal-xl',\n        bsSize === 'fullscreen' && 'modal-fullscreen'\n    );\n\n    const spring: Transition = {\n        type: 'spring',\n        damping: 33,\n        stiffness: 500,\n    };\n\n    const springXs: Transition = {\n        type: 'spring',\n        damping: 25,\n        stiffness: 400,\n    };\n\n    return ReactDOM.createPortal(\n        <DialogContextProvider\n            value={{ onClose: handleCloseButton, isSmallestDialog, showXsDialogBorders, showCloseButton }}\n        >\n            <AnimatePresence\n                // Disable any initial animations on children that\n                // are present when the component is first rendered\n                initial={false}\n                // Only render one component at a time.\n                // The exiting component will finish its exit\n                // animation before entering component is rendered\n                mode='wait'\n            >\n                {open && (\n                    <div\n                        {...remainingProps}\n                        className={modalClasses}\n                        role='dialog'\n                        aria-label='dialog'\n                        // Make sure it has a tabIndex to focus the dialog so the close on esc works.\n                        // biome-ignore lint/a11y/noNoninteractiveTabindex: <explanation>\n                        tabIndex={0}\n                    >\n                        <motion.div\n                            initial={shouldReduceMotion ? false : { opacity: 0, y: '-50%' }}\n                            animate={\n                                shouldReduceMotion\n                                    ? { opacity: 1 }\n                                    : { opacity: 1, y: 0, transition: isSmallestDialog ? springXs : spring }\n                            }\n                            exit={shouldReduceMotion ? undefined : { opacity: 0, y: '-150%' }}\n                            transition={\n                                shouldReduceMotion\n                                    ? { duration: 0 }\n                                    : {\n                                          opacity: { duration: 0.2 },\n                                          y: { duration: 0.3 },\n                                      }\n                            }\n                            onAnimationComplete={handleAnimationComplete}\n                            ref={setFocusTrapRef}\n                            className={modalDialogClasses}\n                            role='document'\n                            // Focus target for keyboard handling after open.\n                            // biome-ignore lint/a11y/noNoninteractiveTabindex: focusable container\n                            tabIndex={-1}\n                        >\n                            <div className='modal-content'>\n                                {hasChildren && children}\n                                {!hasChildren && (\n                                    <>\n                                        {title && (\n                                            <DialogHeader\n                                                title={title}\n                                                subtitle={subtitle}\n                                                headerButtons={headerButtons}\n                                            />\n                                        )}\n                                        {body && <DialogBody className={bodyClassName}>{body}</DialogBody>}\n                                        {footer && <DialogFooter className={footerClassName}>{footer}</DialogFooter>}\n                                    </>\n                                )}\n                            </div>\n                        </motion.div>\n                        <motion.div\n                            initial={shouldReduceMotion ? false : { opacity: 0 }}\n                            animate={{ opacity: 1 }}\n                            exit={shouldReduceMotion ? undefined : { opacity: 0 }}\n                            transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.1 }}\n                            className='modal-backdrop'\n                        />\n                    </div>\n                )}\n            </AnimatePresence>\n        </DialogContextProvider>,\n        modalRoot\n    );\n};\n\nDialog.Title = DialogHeader;\nDialog.Body = DialogBody;\nDialog.Footer = DialogFooter;\n\nDialog.SIZE_XS = 'xs' as const;\nDialog.SIZE_SM = 'sm' as const;\nDialog.SIZE_MD = 'md' as const; // default\nDialog.SIZE_LG = 'lg' as const;\nDialog.SIZE_XL = 'xl' as const;\nDialog.SIZE_FULL = 'full' as const;\nDialog.SIZE_FULL_WIDTH = 'fullwidth' as const;\nDialog.SIZE_FULL_HEIGHT = 'fullheight' as const;\nDialog.SIZE_FULL_HEIGHT_LG = 'fullheight-lg' as const;\nDialog.SIZE_FULL_HEIGHT_XL = 'fullheight-xl' as const;\nDialog.SIZE_FULL_SCREEN = 'fullscreen' as const;\n\nexport default Dialog;\n"],"names":["MODAL_DIALOG_CLASS","MODAL_OPEN_CLASS","Dialog","props","title","subtitle","body","footer","headerButtons","className","bodyClassName","footerClassName","showXsDialogBorders","showCloseButton","useOverflow","bsSize","show","onCloseCallback","noop","disableEsc","onEsc","onCloseValidation","children","remainingProps","open","setOpen","useState","modalRoot","getOrCreatePortalRoot","shouldReduceMotion","useReducedMotion","focusTrapRef","setFocusTrapRef","useFocusTrap","toggleBodyClass","add","hasOtherDialogs","handleCloseButton","closeDialog","usedEscapeKey","previousShow","setPreviousShow","useEsc","dialogElement","currentActiveElement","handleAnimationComplete","definition","modalClasses","classNames","isSmallestDialog","hasChildren","modalDialogClasses","spring","springXs","ReactDOM","jsx","DialogContextProvider","AnimatePresence","jsxs","motion","Fragment","DialogHeader","DialogBody","DialogFooter"],"mappings":"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"}

package/components/dialog/DialogBody.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import d from "classnames";
+import d from "../../utils/classNames.js";
 const t = ({ className: a = "", children: o, ...s }) => {
   const l = d("modal-body", a);
   return /* @__PURE__ */ r("div", { ...s, className: l, "aria-label": "dialog body", children: o });

package/components/dialog/DialogBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogBody.js","sources":["../../../src/components/dialog/DialogBody.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nexport type DialogBodyProps = ComponentProps<'div'> & {\n    /**\n     * Additional classes for the modal-body element.\n     */\n    className?: string;\n};\n\nconst DialogBody = ({ className = '', children, ...remainingProps }: PropsWithChildren<DialogBodyProps>) => {\n    const classes = classNames('modal-body', className);\n    return (\n        <div {...remainingProps} className={classes} aria-label='dialog body'>\n            {children}\n        </div>\n    );\n};\n\nexport default DialogBody;\n"],"names":["DialogBody","className","children","remainingProps","classes","classNames","jsx"],"mappings":";;AAUA,MAAMA,IAAa,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,QAAyD;AACxG,QAAMC,IAAUC,EAAW,cAAcJ,CAAS;AAClD,SACI,gBAAAK,EAAC,SAAK,GAAGH,GAAgB,WAAWC,GAAS,cAAW,eACnD,UAAAF,GACL;AAER;"}
+{"version":3,"file":"DialogBody.js","sources":["../../../src/components/dialog/DialogBody.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type DialogBodyProps = ComponentProps<'div'> & {\n    /**\n     * Additional classes for the modal-body element.\n     */\n    className?: string;\n};\n\nconst DialogBody = ({ className = '', children, ...remainingProps }: PropsWithChildren<DialogBodyProps>) => {\n    const classes = classNames('modal-body', className);\n    return (\n        <div {...remainingProps} className={classes} aria-label='dialog body'>\n            {children}\n        </div>\n    );\n};\n\nexport default DialogBody;\n"],"names":["DialogBody","className","children","remainingProps","classes","classNames","jsx"],"mappings":";;AAWA,MAAMA,IAAa,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,QAAyD;AACxG,QAAMC,IAAUC,EAAW,cAAcJ,CAAS;AAClD,SACI,gBAAAK,EAAC,SAAK,GAAGH,GAAgB,WAAWC,GAAS,cAAW,eACnD,UAAAF,GACL;AAER;"}

package/components/dialog/DialogFooter.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import d from "classnames";
+import d from "../../utils/classNames.js";
 import { useDialogContext as m } from "./dialogContext.js";
 const f = (o) => {
   const { className: s = "", children: r, ...a } = o, { isSmallestDialog: e, showXsDialogBorders: t } = m(), l = d(

package/components/dialog/DialogFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogFooter.js","sources":["../../../src/components/dialog/DialogFooter.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport { useDialogContext } from './dialogContext';\n\nexport type DialogFooterProps = ComponentProps<'div'> & {\n    /**\n     * Additional classes for the modal-footer element.\n     */\n    className?: string;\n};\n\nconst DialogFooter = (props: PropsWithChildren<DialogFooterProps>) => {\n    const { className = '', children, ...remainingProps } = props;\n\n    const { isSmallestDialog, showXsDialogBorders } = useDialogContext();\n\n    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;\n\n    const footerClassNames = classNames(\n        'modal-footer',\n        !doShowXsDialogBorders && 'border-top-none padding-top-0',\n        className\n    );\n\n    return (\n        <div {...remainingProps} className={footerClassNames} aria-label='dialog footer'>\n            {children}\n        </div>\n    );\n};\n\nexport default DialogFooter;\n"],"names":["DialogFooter","props","className","children","remainingProps","isSmallestDialog","showXsDialogBorders","useDialogContext","footerClassNames","classNames","jsx"],"mappings":";;;AAYA,MAAMA,IAAe,CAACC,MAAgD;AAClE,QAAM,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,MAAmBH,GAElD,EAAE,kBAAAI,GAAkB,qBAAAC,EAAA,IAAwBC,EAAA,GAI5CC,IAAmBC;AAAA,IACrB;AAAA,IACA,EAJ0BJ,IAAmBC,IAAsB,OAIzC;AAAA,IAC1BJ;AAAA,EAAA;AAGJ,SACI,gBAAAQ,EAAC,SAAK,GAAGN,GAAgB,WAAWI,GAAkB,cAAW,iBAC5D,UAAAL,GACL;AAER;"}
+{"version":3,"file":"DialogFooter.js","sources":["../../../src/components/dialog/DialogFooter.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nimport { useDialogContext } from './dialogContext';\n\nexport type DialogFooterProps = ComponentProps<'div'> & {\n    /**\n     * Additional classes for the modal-footer element.\n     */\n    className?: string;\n};\n\nconst DialogFooter = (props: PropsWithChildren<DialogFooterProps>) => {\n    const { className = '', children, ...remainingProps } = props;\n\n    const { isSmallestDialog, showXsDialogBorders } = useDialogContext();\n\n    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;\n\n    const footerClassNames = classNames(\n        'modal-footer',\n        !doShowXsDialogBorders && 'border-top-none padding-top-0',\n        className\n    );\n\n    return (\n        <div {...remainingProps} className={footerClassNames} aria-label='dialog footer'>\n            {children}\n        </div>\n    );\n};\n\nexport default DialogFooter;\n"],"names":["DialogFooter","props","className","children","remainingProps","isSmallestDialog","showXsDialogBorders","useDialogContext","footerClassNames","classNames","jsx"],"mappings":";;;AAaA,MAAMA,IAAe,CAACC,MAAgD;AAClE,QAAM,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,MAAmBH,GAElD,EAAE,kBAAAI,GAAkB,qBAAAC,EAAA,IAAwBC,EAAA,GAI5CC,IAAmBC;AAAA,IACrB;AAAA,IACA,EAJ0BJ,IAAmBC,IAAsB,OAIzC;AAAA,IAC1BJ;AAAA,EAAA;AAGJ,SACI,gBAAAQ,EAAC,SAAK,GAAGN,GAAgB,WAAWI,GAAkB,cAAW,iBAC5D,UAAAL,GACL;AAER;"}

package/components/dialog/DialogHeader.js

@@ -1,7 +1,7 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import f from "react";
 import { noop as v } from "es-toolkit/function";
-import r from "classnames";
+import r from "../../utils/classNames.js";
 import { useDialogContext as x } from "./dialogContext.js";
 const j = (d) => {
   const { title: i, subtitle: t, headerButtons: s, onCloseButtonClick: n = v, ...c } = d, { onClose: m, isSmallestDialog: a, showXsDialogBorders: h, showCloseButton: u } = x(), l = a ? h : !0, b = a ? !1 : u, p = r("modal-header", !l && "border-bottom-none"), g = r(

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":"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"}

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.js

@@ -2,9 +2,9 @@ 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 P from "classnames";
 import { noop as u } from "es-toolkit/function";
 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";

package/components/dropdown/ButtonDropdown.js.map

@@ -1 +1 @@
-{"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 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     * @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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"}
+{"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":";;;;;;;;;;;;;;AAiBA,MAAMA,KAAe,CAACC,GAAoBC,MAClCD,KAAaC,IACN,YAEP,CAACD,KAAaC,IACP,cAEPD,KAAa,CAACC,IACP,eAEJ,gBAyJLC,KAAuB,MAClBC,GAGL,CAACC,GAAOC,MAAQ;AACd,QAAM;AAAA,IACF,IAAAC,IAAK,KAAK,SAAS,SAAS,EAAE,EAAE,MAAM,GAAG,EAAE;AAAA,IAC3C,OAAAC,IAAQ,CAAA;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,SAAAC,IAAU;AAAA,IACV,SAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,OAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,gBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,QAAAf,IAAS;AAAA,IACT,WAAAD,IAAY;AAAA,IACZ,SAAAiB,IAAU;AAAA,IACV,QAAAC,IAASC;AAAA,IACT,SAAAC,IAAUD;AAAA,IACV,oBAAAE,IAAqBF;AAAA,IACrB,WAAAG,IAAY;AAAA,IACZ,cAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,iBAAAC,IAAkB;AAAA,IAClB,mBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHxB,GAEE,CAACyB,GAAcC,CAAe,IAAIC,EAASf,CAAI,GAE/C,CAACgB,GAAmBC,CAAoB,IAAIF,EAAoD,IAAI,GACpG,CAACG,GAAiBC,CAAkB,IAAIJ,EAAkC,IAAI,GAC9E,CAACK,GAAsBC,CAAuB,IAAIN,EAAmC,IAAI,GAEzFO,IAAsB;AAAA,IACxB,WAAWvC,GAAaC,GAAWC,CAAM;AAAA,IACzC,WAAW,CAAA;AAAA,EAAC,GAGVsC,IAAkBzB,KAAed,IAAYoC,IAAuBJ,GAEpE,EAAE,QAAAQ,GAAQ,YAAAC,MAAeC,GAAUH,GAAiBL,GAAiBX,KAAgBe,CAAmB,GAExGK,IAAiBC,GAAM5B,CAAI,GAC3B6B,IAASF,IAAiBd,IAAeb,GAEzC8B,IAAaC;AAAA,IACf,CAAAC,MAAS;AACL,MAAI1B,KAKKY,GAAiB,SAASc,EAAM,MAAc,KAC/CC,EAAA;AAAA,IAKZ;AAAA,IACAC;AAAA,IACA,EAAQL;AAAA;AAAA,EAAM,GAGZM,IAAeC,GAAA,GAEfC,IAAkB,CAACpC,KAAW,CAACH,KAAe,CAACF;AAErD,EAAA0C,GAAU,MAAM;AACZ,IAAKX,KACDb,EAAgBd,CAAI;AAAA,EAE5B,GAAG,CAAC2B,GAAgB3B,CAAI,CAAC;AAEzB,QAAMuC,IAAa,CAACP,MAAmC;AAGnD,KAFuBL,IAAiBd,IAAeb,KAGnDiC,EAAA,IAEAO,EAASR,CAAK;AAAA,EAEtB,GAEMQ,IAAW,CAACR,MAAmC;AACjD,IAAIL,KACAb,EAAgB,EAAI,GAEpBkB,KACA9B,EAAO8B,CAAK;AAAA,EAEpB,GAEMC,IAAY,MAAM;AACpB,IAAIN,KACAb,EAAgB,EAAK,GAEzBV,EAAA;AAAA,EACJ,GAEMqC,IAA8B,MAAM;AACtC,IAAAR,EAAA,GACA5B,EAAA;AAAA,EACJ,GAEMqC,KAA8B,CAACV,MAA+C;AAChF,IAAAO,EAAWP,CAAY;AAAA,EAC3B,GAEMW,KAA4B,CAACX,MAAgE;AAC/F,IAAIlC,IACA2C,EAAA,IAEAF,EAAWP,CAA+B;AAAA,EAElD,GAEMY,KAAiBC,EAAW,YAAY,aAAahB,KAAU,QAAQlB,CAAS,GAEhFmC,KAAkBD;AAAA,IACpBvC,KAAa;AAAA,IACbR,KAAed,KAAa;AAAA,IAC5B0B;AAAA,EAAA,GAGEqC,IACF,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAWH;AAAA,MACX,KAAK3B;AAAA,MACL,OAAOK,EAAO;AAAA,MACb,GAAGC,EAAW;AAAA,MAEd,eAAkC,gBAAAuB,EAACE,IAAA,EAAU,OAAA3D,GAAc,WAAWgD,EAAA,CAAY;AAAA,IAAA;AAAA,EAAA;AAI3F,2BACK,OAAA,EAAK,GAAG3B,GAAgB,WAAWgC,IAAgB,KAAKd,GACrD,UAAA;AAAA,IAAA,gBAAAqB;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,IAAA9D;AAAA,QACA,aAAAQ;AAAA,QACA,SAAAL;AAAA,QACA,QAAAD;AAAA,QACA,SAAAE;AAAA,QACA,UAAAE;AAAA,QACA,UAAAD;AAAA,QACA,KAAKsB;AAAA,QACL,SAAS0B;AAAA,QACT,UAAUtD;AAAA,QACV,kBAAAmB;AAAA,QACA,WAAWC;AAAA,QAEV,UAAA;AAAA,UAAAZ;AAAA,UACAwC,uBAAoBgB,IAAA,CAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAE9BvD,KACG,gBAAAkD;AAAA,MAACM;AAAA,MAAA;AAAA,QACG,IAAAhE;AAAA,QACA,SAAAG;AAAA,QACA,QAAAD;AAAA,QACA,UAAAG;AAAA,QACA,WAAWc;AAAA,QACX,SAASiC;AAAA,QACT,KAAKrB;AAAA,MAAA;AAAA,IAAA;AAAA,IAGZQ,KAAUvB,KAAaiD,GAAS,aAAaR,GAAcZ,CAAY;AAAA,IACvEN,KAAU,CAACvB,KAAayC;AAAA,EAAA,GAC7B;AAER,CAAC,GAGCS,KAAiBtE,GAAA;"}

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     * @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;"}
+{"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;"}

package/components/dropdown/SplitCaretButton.js

@@ -1,17 +1,17 @@
 import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import f from "classnames";
+import f from "../../utils/classNames.js";
 import c from "./Caret.js";
 import d from "../button/Button.js";
-const N = p((o, r) => {
-  const { disabled: s = !1, bsStyle: e, bsSize: a, onClick: m, className: i, ...l } = o, n = f("dropdown-toggle", i);
+const S = p((o, s) => {
+  const { disabled: r = !1, bsStyle: e, bsSize: a, onClick: m, className: i, as: u, ...l } = o, n = f("dropdown-toggle", i);
   return /* @__PURE__ */ t(
     d,
     {
       ...l,
       type: "button",
-      ref: r,
-      disabled: s,
+      ref: s,
+      disabled: r,
       bsStyle: e,
       bsSize: a,
       onClick: m,
@@ -21,6 +21,6 @@ const N = p((o, r) => {
   );
 });
 export {
-  N as default
+  S as default
 };
 //# sourceMappingURL=SplitCaretButton.js.map

package/components/dropdown/SplitCaretButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitCaretButton.js","sources":["../../../src/components/dropdown/SplitCaretButton.tsx"],"sourcesContent":["import React, { forwardRef, type HTMLProps, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport Caret from './Caret';\nimport Button, { type BUTTON_STYLE, type BUTTON_SIZE } from '../button/Button';\n\nexport type SplitCaretButtonProps = HTMLProps<HTMLButtonElement> & {\n    disabled?: boolean;\n    iconOnly?: boolean;\n    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    bsSize: BUTTON_SIZE;\n    bsStyle: BUTTON_STYLE;\n    className?: string;\n};\n\nconst SplitCaretButton = forwardRef<HTMLButtonElement, PropsWithChildren<SplitCaretButtonProps>>((props, ref) => {\n    const { disabled = false, bsStyle, bsSize, onClick, className, ...remainingProps } = props;\n\n    const splitCaretButtonClasses = classNames('dropdown-toggle', className);\n\n    return (\n        <Button\n            {...remainingProps}\n            type='button'\n            ref={ref}\n            disabled={disabled}\n            bsStyle={bsStyle}\n            bsSize={bsSize}\n            onClick={onClick}\n            className={splitCaretButtonClasses}\n        >\n            <Caret />\n        </Button>\n    );\n});\n\nexport default SplitCaretButton;\n"],"names":["SplitCaretButton","forwardRef","props","ref","disabled","bsStyle","bsSize","onClick","className","remainingProps","splitCaretButtonClasses","classNames","jsx","Button","Caret"],"mappings":";;;;;AAeA,MAAMA,IAAmBC,EAAwE,CAACC,GAAOC,MAAQ;AAC7G,QAAM,EAAE,UAAAC,IAAW,IAAO,SAAAC,GAAS,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW,GAAGC,EAAA,IAAmBP,GAE/EQ,IAA0BC,EAAW,mBAAmBH,CAAS;AAEvE,SACI,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGJ;AAAA,MACJ,MAAK;AAAA,MACL,KAAAN;AAAA,MACA,UAAAC;AAAA,MACA,SAAAC;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,MACA,WAAWG;AAAA,MAEX,4BAACI,GAAA,CAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AAGnB,CAAC;"}
+{"version":3,"file":"SplitCaretButton.js","sources":["../../../src/components/dropdown/SplitCaretButton.tsx"],"sourcesContent":["import React, { forwardRef, type HTMLProps, type PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport Caret from './Caret';\nimport Button, { type BUTTON_STYLE, type BUTTON_SIZE } from '../button/Button';\n\nexport type SplitCaretButtonProps = HTMLProps<HTMLButtonElement> & {\n    disabled?: boolean;\n    iconOnly?: boolean;\n    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    bsSize: BUTTON_SIZE;\n    bsStyle: BUTTON_STYLE;\n    className?: string;\n};\n\nconst SplitCaretButton = forwardRef<HTMLButtonElement, PropsWithChildren<SplitCaretButtonProps>>((props, ref) => {\n    const { disabled = false, bsStyle, bsSize, onClick, className, as: _as, ...remainingProps } = props;\n\n    const splitCaretButtonClasses = classNames('dropdown-toggle', className);\n\n    return (\n        <Button\n            {...remainingProps}\n            type='button'\n            ref={ref}\n            disabled={disabled}\n            bsStyle={bsStyle}\n            bsSize={bsSize}\n            onClick={onClick}\n            className={splitCaretButtonClasses}\n        >\n            <Caret />\n        </Button>\n    );\n});\n\nexport default SplitCaretButton;\n"],"names":["SplitCaretButton","forwardRef","props","ref","disabled","bsStyle","bsSize","onClick","className","_as","remainingProps","splitCaretButtonClasses","classNames","jsx","Button","Caret"],"mappings":";;;;;AAeA,MAAMA,IAAmBC,EAAwE,CAACC,GAAOC,MAAQ;AAC7G,QAAM,EAAE,UAAAC,IAAW,IAAO,SAAAC,GAAS,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW,IAAIC,GAAK,GAAGC,EAAA,IAAmBR,GAExFS,IAA0BC,EAAW,mBAAmBJ,CAAS;AAEvE,SACI,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGJ;AAAA,MACJ,MAAK;AAAA,MACL,KAAAP;AAAA,MACA,UAAAC;AAAA,MACA,SAAAC;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,MACA,WAAWI;AAAA,MAEX,4BAACI,GAAA,CAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AAGnB,CAAC;"}

package/components/editableContent/EditableContent.js

@@ -1,9 +1,9 @@
 import { jsxs as c, Fragment as re, jsx as o } from "react/jsx-runtime";
 import { useState as s, useRef as ie, useEffect as le, useMemo as ce } from "react";
 import { noop as r } from "es-toolkit/function";
-import p from "classnames";
 import { usePopper as pe } from "react-popper";
 import { createPortal as de } from "react-dom";
+import p from "../../utils/classNames.js";
 import { getOrCreatePortalRoot as fe } from "../../utils/portalRoot.js";
 import ue from "../../hooks/useEsc.js";
 import me from "../../hooks/useFocusTrap.js";