@rio-cloud/rio-uikit 2.2.1 → 2.3.0-beta.2

package/components/sidebars/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../src/components/sidebars/Sidebar.tsx"],"sourcesContent":["import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { motion } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\nimport { toNumber } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport SidebarFooter from './SidebarFooter';\nimport SidebarBackdrop from './SidebarBackdrop';\nimport SidebarFullscreenToggle from './SidebarFullscreenToggle';\nimport SidebarCloseButton from './SidebarCloseButton';\nimport Resizer from '../resizer/Resizer';\nimport useWindowResize from '../../hooks/useWindowResize';\nimport useEsc from '../../hooks/useEsc';\nimport getWidthInBoundaries from '../../utils/getWidthInBoundaries';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst DEFAULT_WIDTH = 350;\nconst DEFAULT_MIN_WIDTH = 100;\nconst DEFAULT_MAX_WIDTH = 800;\nconst DEFAULT_SWITCH_MODE_BREAKPOINT = 0;\n\n// Values define the min and max width for the module-content\n// where the fluid sidebar automatically changes to \"fly\" and back.\nconst MIN_MODULE_CONTENT_WIDTH = 400;\nconst MAX_MODULE_CONTENT_WIDTH = 800;\n\nconst ANIMATION_DURATION = 0.14;\nconst RESIZE_THROTTLE = 500;\n\nconst SidebarPosition = {\n    LEFT: 'left',\n    RIGHT: 'right',\n} as const;\n\nconst SidebarMode = {\n    MODE_FLY: 'fly',\n    MODE_FLUID: 'fluid',\n};\n\ntype AnimationVariantProps = {\n    fromRight: boolean;\n    closed?: boolean;\n};\n\nconst animationVariants = {\n    sidebarEnter: ({ fromRight }: AnimationVariantProps) => {\n        return {\n            x: fromRight ? '100%' : '-100%',\n            opacity: 0,\n        };\n    },\n    sidebarVisible: ({ fromRight, closed }: AnimationVariantProps) => {\n        return {\n            x: !closed ? 0 : fromRight ? '100%' : '-100%',\n            opacity: closed ? 0 : 1,\n            display: closed ? 'none' : 'block',\n        };\n    },\n    sidebarExit: ({ fromRight }: AnimationVariantProps) => {\n        return {\n            x: fromRight ? '100%' : '-100%',\n            opacity: 0,\n        };\n    },\n};\n\nexport type SidebarProps = {\n    /**\n     * Defines if the component will overlap the body content.\n     *\n     * @default false\n     */\n    fly?: boolean;\n\n    /**\n     * Defines whether the component is hidden or not.\n     *\n     * @default false\n     */\n    closed?: boolean;\n\n    /**\n     * Hides the close button. This may be used when the sidebar is always visible and may not be closed.\n     *\n     * @default false\n     */\n    disableClose?: boolean;\n\n    /**\n     * Callback function triggered when clicking the close icon.\n     */\n    onClose?: VoidFunction;\n\n    /**\n     * The Footer content. For example a save button.\n     */\n    footer?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar footer.\n     */\n    footerClassName?: string;\n\n    /**\n     * Additional buttons to be rendered in the header.\n     */\n    headerButtons?: React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar header.\n     */\n    headerClassName?: string;\n\n    /**\n     * Shows a sidebar header border\n     */\n    showHeaderBorder?: boolean;\n\n    /**\n     * Defines the width of the component. The value is set as pixel value as inline style.\n     * Note: In the past, the type allowed to pass in a sting value like \"400px\" but that is not\n     * possible anymore due to internal width calculations. To be backwards compatible for non\n     * Typescript projects, the width is converted to a number.\n     *\n     * @default 350\n     */\n    width?: number;\n\n    /**\n     * Defines the minimum width in px of the component that will take effect when resizing.\n     *\n     * @default 100\n     */\n    minWidth?: number;\n\n    /**\n     * Defines the maximum width in px of the component that will take effect when resizing.\n     *\n     * @default 800\n     */\n    maxWidth?: number;\n\n    /**\n     * Opens Sidebar in fullscreen, means 100vw.\n     *\n     * @default false\n     */\n    openInFullscreen?: boolean;\n\n    /**\n     * Callback for when the fullscreen is toggled.\n     */\n    onFullScreenChange?: (newFullscreenState: boolean) => void;\n\n    /**\n     * Enables the fullscreen functionality and shows the fullscreen toggle.\n     *\n     * @default false\n     */\n    enableFullscreenToggle?: boolean;\n\n    /**\n     * Translated tooltip text for the fullscreen toggle button.\n     */\n    fullscreenToggleTooltip?: string;\n\n    /**\n     * Tells the sidebar where it is positioned. This will affect the resizing behavior\n     * respectively. Note: the position need to be set properly whe using the resize\n     * functionality to know on which side of the sidebar to attach the resizer handle.\n     *\n     * It is also relevant when the sidebar mode is set to `fly` to properly animate\n     * the sidebar into the view.\n     *\n     * Possible values are:\n     *\n     * - `'left'`\n     * - `'right'`\n     * - `Sidebar.LEFT`\n     * - `Sidebar.RIGHT`\n     *\n     * @default 'left'\n     */\n    position?: ObjectValues<typeof SidebarPosition>;\n\n    /**\n     * Defines whether or not the sidebar is resizable.\n     * @default false\n     */\n    resizable?: boolean;\n\n    /**\n     * Callback for when the resize is done.\n     */\n    onResizeEnd?: VoidFunction;\n\n    /**\n     * Defines the breakpoint in pixel when the sidebar mode shall be changed. If the window width is lower\n     * than the given breakpoint the mode is set to `fly`. If the window width is higher the mode is set\n     * to `fluid`. This functionality is disabled by default and will be enabled when defining a breakpoint\n     * higher than 0.\n     */\n    switchModeBreakpoint?: number;\n\n    /**\n     * By default the fullscreen mode can be left with \"esc\". If this is unwanted it can be disabled.\n     *\n     * @default false\n     */\n    disableEsc?: boolean;\n\n    /**\n     * Defined whether or not a backdrop will be rendered behind the Sidebar to avoid clicks outside.\n     *\n     * @default false\n     */\n    hasBackdrop?: boolean;\n\n    /**\n     * Defined whether or not the UIKIT SmoothScrollbar is active.\n     *\n     * @default false\n     */\n    hasSmoothScrollbar?: boolean;\n\n    /**\n     * Defined whether or not the backdrop is visible similar to the backdrop for modal dialogs.\n     *\n     * @default false\n     */\n    makeBackdropVisible?: boolean;\n\n    /**\n     * Callback for when the backdrop is clicked. This comes in handy when handling transient data from\n     * the sidebar which need to be saved first and handle clicks outside.\n     */\n    onBackdropClick?: VoidFunction;\n\n    /**\n     * Additional ref added to the Sidebar body.\n     */\n    bodyRef?: React.MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Content that will be displayed in the components header.\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar title.\n     */\n    titleClassName?: string;\n\n    /**\n     * Additional classes added to the Sidebar backdrop.\n     */\n    backdropClassName?: string;\n\n    /**\n     * Additional classes added to the Sidebar body.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes added on the wrapper element.\n     */\n    className?: string;\n};\n\nconst Sidebar = (props: PropsWithChildren<SidebarProps>) => {\n    const {\n        fly = false,\n        closed = false,\n        title = '',\n        footer,\n        resizable = false,\n        position,\n        width = DEFAULT_WIDTH,\n        minWidth = DEFAULT_MIN_WIDTH,\n        maxWidth = DEFAULT_MAX_WIDTH,\n        hasBackdrop = false,\n        hasSmoothScrollbar = false,\n        makeBackdropVisible = false,\n        enableFullscreenToggle = false,\n        fullscreenToggleTooltip,\n        openInFullscreen = false,\n        showHeaderBorder = false,\n        disableClose = false,\n        bodyRef,\n        headerButtons,\n        switchModeBreakpoint = DEFAULT_SWITCH_MODE_BREAKPOINT,\n        onClose = noop,\n        onResizeEnd = noop,\n        onFullScreenChange = noop,\n        onBackdropClick = noop,\n        disableEsc = false,\n        titleClassName = '',\n        bodyClassName = '',\n        headerClassName = '',\n        footerClassName = '',\n        backdropClassName = '',\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const [internalWidth, setInternalWidth] = useState(toNumber(width));\n    const [sidebarMode, setSidebarMode] = useState(fly ? Sidebar.MODE_FLY : Sidebar.MODE_FLUID);\n    const [isFullscreen, setIsFullscreen] = useState(openInFullscreen);\n    const [isResize, setIsResize] = useState(false);\n    const [isSplit, setIsSplit] = useState(false);\n    const [isRight, setIsRight] = useState(position === SidebarPosition.RIGHT);\n\n    const sidebarRef = useRef<HTMLDivElement>(null);\n\n    // Used to keep the external reference to the module-content to avoid querying the DOM\n    // periodically on window resize\n    const moduleContentRef: React.MutableRefObject<HTMLDivElement | null> = useRef(null);\n\n    // Position fallback in case the position property is not defined but the sidebar mode is fly\n    // and we want to animate it, we nee to know the direction from where th sidebar is coming from.\n    // That's why we check the ApplicationLayoutSidebar class if the sidebar inside is right aligned\n    // or not and us this value instead.\n    // Note: the position need to be set properly whe using the resize functionality to know on which\n    // side of the sidebar to attach the resizer handle.\n    useEffect(() => {\n        if (sidebarRef.current && sidebarMode === Sidebar.MODE_FLY) {\n            const sidebarLayout = sidebarRef.current.parentNode as HTMLDivElement;\n            if (sidebarLayout?.className.includes('right')) {\n                setIsRight(true);\n            }\n        }\n    }, [sidebarRef.current, sidebarMode]);\n\n    // Keep the previous closed state in order to prevent animation when switching sidebar mode\n    const [previousClosed, setPreviousClosed] = useState(closed);\n    if (previousClosed !== closed) {\n        setPreviousClosed(closed);\n    }\n\n    // Update internal width from outside\n    const [previousWidth, setPreviousWidth] = useState(width);\n    if (previousWidth !== width) {\n        console.log('update internal width');\n        setInternalWidth(toNumber(width));\n        setPreviousWidth(width);\n    }\n\n    // Switch between mode \"fly\" and \"fluid\"\n    useWindowResize(() => adaptSidebarMode(), RESIZE_THROTTLE);\n\n    // Initially check breakpoint after mounting the component\n    useEffect(() => adaptSidebarMode(), []);\n\n    // When Sidebar opens, check for available module-content width and\n    // switch sidebar mode to fly in case\n    useEffect(() => {\n        if (!closed) {\n            setTimeout(() => adaptSidebarMode());\n        }\n    }, [closed]);\n\n    useEffect(() => {\n        const moduleContent = document.querySelector('.module-content');\n        if (moduleContent) {\n            moduleContentRef.current = moduleContent as HTMLDivElement;\n        }\n    }, []);\n\n    // Close the fullscreen with \"esc\"\n    useEsc(() => {\n        if (!disableEsc && enableFullscreenToggle && isFullscreen) {\n            setIsFullscreen(false);\n            onFullScreenChange(false);\n        }\n    });\n\n    const adaptSidebarMode = () => {\n        const moduleContentWidth = moduleContentRef.current?.clientWidth;\n\n        if (fly || switchModeBreakpoint === DEFAULT_SWITCH_MODE_BREAKPOINT) {\n            return;\n        }\n\n        const isModuleContentTooSmall = moduleContentWidth && moduleContentWidth <= MIN_MODULE_CONTENT_WIDTH;\n        const isModuleContentBigEnough = moduleContentWidth && moduleContentWidth > MAX_MODULE_CONTENT_WIDTH;\n\n        const isWindowSmallerThanBreakpoint = window.innerWidth <= switchModeBreakpoint;\n\n        // switch to fly when module-content is less than x pixel and back if it is bigger\n        if (isModuleContentTooSmall || isWindowSmallerThanBreakpoint) {\n            setSidebarMode(Sidebar.MODE_FLY);\n            return;\n        }\n\n        // if module-content is bigger and is initially fluid set back to initial fluid state\n        if (isModuleContentBigEnough && !isWindowSmallerThanBreakpoint) {\n            setSidebarMode(Sidebar.MODE_FLUID);\n            return;\n        }\n    };\n\n    const handleResize = (diff: number) => {\n        const wasSplit = isSplit;\n        const halfWindowWidth = window.innerWidth * 0.5;\n        const usedMaxWidth = maxWidth || halfWindowWidth;\n\n        // Check for sidebar width if it is half the window size. If it was before but the sidebar was resized so it is\n        // no longer half window size, set the sidebar with to half window size to avoid jumping sidebar to old width\n        setInternalWidth(oldWidth => {\n            const updatedWidth = position === Sidebar.RIGHT ? oldWidth + diff : oldWidth - diff;\n            const newWidth = getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);\n\n            const newIsSplit = newWidth === halfWindowWidth;\n            setIsSplit(newIsSplit);\n\n            return wasSplit && !isSplit ? halfWindowWidth : newWidth;\n        });\n\n        adaptSidebarMode();\n    };\n\n    const handleResizeStart = () => {\n        const body = document.body;\n        body?.classList.add('pointer-events-none');\n        setIsResize(true);\n    };\n\n    const handleResizeEnd = () => {\n        const body = document.body;\n        body?.classList.remove('pointer-events-none');\n        setIsResize(false);\n        onResizeEnd();\n    };\n\n    const handleFullscreenChange = () => {\n        const newFullscreenState = !isFullscreen;\n        setIsFullscreen(newFullscreenState);\n        onFullScreenChange(newFullscreenState);\n    };\n\n    const wrapperClasses = classNames(\n        'Sidebar',\n        className,\n        closed && 'closed',\n        isFullscreen && 'width-100vw sidebar-fullscreen',\n        isSplit && !isFullscreen && 'max-width-50vw width-50vw',\n        sidebarMode === SidebarMode.MODE_FLY ? 'fly' : isFullscreen ? 'fly' : 'fluid'\n    );\n\n    const headerClassNames = classNames('SidebarHeader', headerClassName, showHeaderBorder && 'show-border');\n    const titleClassNames = classNames('SidebarTitle', titleClassName);\n    const bodyClassNames = classNames('SidebarBody', bodyClassName);\n\n    const resizeLimitClasses = classNames('SidebarResizeLimit', isResize && 'display-block');\n\n    const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;\n    const resizeLimitStyle = isRight ? { right: resizeIndicatorPosition } : { left: resizeIndicatorPosition };\n\n    const sidebarContent = (\n        <>\n            <div className={resizeLimitClasses} style={resizeLimitStyle} />\n            <div className='SidebarContent'>\n                <div className={headerClassNames}>\n                    <div className={titleClassNames}>{title}</div>\n                    <div className='SidebarButtons non-printable close'>\n                        {headerButtons}\n                        {enableFullscreenToggle && (\n                            <SidebarFullscreenToggle\n                                isFullscreen={isFullscreen}\n                                onClick={handleFullscreenChange}\n                                tooltip={fullscreenToggleTooltip}\n                            />\n                        )}\n                        {!disableClose && (headerButtons || enableFullscreenToggle) && (\n                            <div className='SidebarButtons-spacer' />\n                        )}\n                        {!disableClose && <SidebarCloseButton onClick={onClose} />}\n                    </div>\n                </div>\n                {hasSmoothScrollbar ? (\n                    <SmoothScrollbars slideIn className={bodyClassNames} ref={bodyRef}>\n                        {children}\n                    </SmoothScrollbars>\n                ) : (\n                    <div className={bodyClassNames} ref={bodyRef}>\n                        {children}\n                    </div>\n                )}\n\n                <SidebarFooter footer={footer} className={footerClassName} />\n            </div>\n            {resizable && (\n                <Resizer\n                    onResizeStart={handleResizeStart}\n                    onResize={handleResize}\n                    onResizeEnd={handleResizeEnd}\n                    direction={Resizer.HORIZONTAL}\n                    position={isRight ? Resizer.LEFT : Resizer.RIGHT}\n                />\n            )}\n        </>\n    );\n\n    return (\n        <>\n            <motion.div\n                {...remainingProps}\n                initial={previousClosed && 'sidebarEnter'}\n                animate='sidebarVisible'\n                // Cannot exit animation as sidebar is moved to offscreen by CSS class, means is still mounted\n                exit='sidebarExit'\n                variants={animationVariants}\n                custom={{ fromRight: isRight, closed }}\n                transition={{ duration: ANIMATION_DURATION }}\n                className={wrapperClasses}\n                style={{ width: internalWidth }}\n                ref={sidebarRef}\n            >\n                {sidebarContent}\n            </motion.div>\n            {hasBackdrop && !closed && (\n                <SidebarBackdrop\n                    className={backdropClassName}\n                    makeBackdropVisible={makeBackdropVisible}\n                    onClick={onBackdropClick}\n                />\n            )}\n        </>\n    );\n};\n\nSidebar.LEFT = SidebarPosition.LEFT;\nSidebar.RIGHT = SidebarPosition.RIGHT;\n\nSidebar.MODE_FLY = SidebarMode.MODE_FLY;\nSidebar.MODE_FLUID = SidebarMode.MODE_FLUID;\n\nexport default Sidebar;\n"],"names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","DEFAULT_MAX_WIDTH","DEFAULT_SWITCH_MODE_BREAKPOINT","MIN_MODULE_CONTENT_WIDTH","MAX_MODULE_CONTENT_WIDTH","ANIMATION_DURATION","RESIZE_THROTTLE","SidebarPosition","SidebarMode","animationVariants","fromRight","closed","Sidebar","props","fly","title","footer","resizable","position","width","minWidth","maxWidth","hasBackdrop","hasSmoothScrollbar","makeBackdropVisible","enableFullscreenToggle","fullscreenToggleTooltip","openInFullscreen","showHeaderBorder","disableClose","bodyRef","headerButtons","switchModeBreakpoint","onClose","noop","onResizeEnd","onFullScreenChange","onBackdropClick","disableEsc","titleClassName","bodyClassName","headerClassName","footerClassName","backdropClassName","className","children","remainingProps","internalWidth","setInternalWidth","useState","toNumber","sidebarMode","setSidebarMode","isFullscreen","setIsFullscreen","isResize","setIsResize","isSplit","setIsSplit","isRight","setIsRight","sidebarRef","useRef","moduleContentRef","useEffect","previousClosed","setPreviousClosed","previousWidth","setPreviousWidth","useWindowResize","adaptSidebarMode","moduleContent","useEsc","moduleContentWidth","isModuleContentTooSmall","isModuleContentBigEnough","isWindowSmallerThanBreakpoint","handleResize","diff","wasSplit","halfWindowWidth","usedMaxWidth","oldWidth","updatedWidth","newWidth","getWidthInBoundaries","handleResizeStart","handleResizeEnd","handleFullscreenChange","newFullscreenState","wrapperClasses","classNames","headerClassNames","titleClassNames","bodyClassNames","resizeLimitClasses","resizeIndicatorPosition","sidebarContent","jsxs","Fragment","jsx","SidebarFullscreenToggle","SidebarCloseButton","SmoothScrollbars","SidebarFooter","Resizer","motion","SidebarBackdrop"],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/sidebars/Sidebar.tsx"],"sourcesContent":["import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { motion } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\nimport { toNumber } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport SidebarFooter from './SidebarFooter';\nimport SidebarBackdrop from './SidebarBackdrop';\nimport SidebarFullscreenToggle from './SidebarFullscreenToggle';\nimport SidebarCloseButton from './SidebarCloseButton';\nimport Resizer from '../resizer/Resizer';\nimport useWindowResize from '../../hooks/useWindowResize';\nimport useEsc from '../../hooks/useEsc';\nimport getWidthInBoundaries from '../../utils/getWidthInBoundaries';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst DEFAULT_WIDTH = 350;\nconst DEFAULT_MIN_WIDTH = 100;\nconst DEFAULT_MAX_WIDTH = 800;\nconst DEFAULT_SWITCH_MODE_BREAKPOINT = 0;\n\n// Values define the min and max width for the module-content\n// where the fluid sidebar automatically changes to \"fly\" and back.\nconst MIN_MODULE_CONTENT_WIDTH = 400;\nconst MAX_MODULE_CONTENT_WIDTH = 800;\n\nconst ANIMATION_DURATION = 0.14;\nconst RESIZE_THROTTLE = 500;\n\nconst SidebarPosition = {\n    LEFT: 'left',\n    RIGHT: 'right',\n} as const;\n\nconst SidebarMode = {\n    MODE_FLY: 'fly',\n    MODE_FLUID: 'fluid',\n};\n\ntype AnimationVariantProps = {\n    fromRight: boolean;\n    closed?: boolean;\n};\n\nconst animationVariants = {\n    sidebarEnter: ({ fromRight }: AnimationVariantProps) => ({\n        x: fromRight ? '100%' : '-100%',\n        opacity: 0,\n    }),\n    sidebarVisible: ({ fromRight, closed }: AnimationVariantProps) => ({\n        x: !closed ? 0 : fromRight ? '100%' : '-100%',\n        opacity: closed ? 0 : 1,\n        display: closed ? 'none' : 'block',\n    }),\n    sidebarExit: ({ fromRight }: AnimationVariantProps) => ({\n        x: fromRight ? '100%' : '-100%',\n        opacity: 0,\n    }),\n};\n\nexport type SidebarProps = {\n    /**\n     * Defines if the component will overlap the body content.\n     *\n     * @default false\n     */\n    fly?: boolean;\n\n    /**\n     * Defines whether the component is hidden or not.\n     *\n     * @default false\n     */\n    closed?: boolean;\n\n    /**\n     * Hides the close button. This may be used when the sidebar is always visible and may not be closed.\n     *\n     * @default false\n     */\n    disableClose?: boolean;\n\n    /**\n     * Callback function triggered when clicking the close icon.\n     */\n    onClose?: VoidFunction;\n\n    /**\n     * The Footer content. For example a save button.\n     */\n    footer?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar footer.\n     */\n    footerClassName?: string;\n\n    /**\n     * Additional buttons to be rendered in the header.\n     */\n    headerButtons?: React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar header.\n     */\n    headerClassName?: string;\n\n    /**\n     * Shows a sidebar header border\n     */\n    showHeaderBorder?: boolean;\n\n    /**\n     * Defines the width of the component. The value is set as pixel value as inline style.\n     * Note: In the past, the type allowed to pass in a sting value like \"400px\" but that is not\n     * possible anymore due to internal width calculations. To be backwards compatible for non\n     * Typescript projects, the width is converted to a number.\n     *\n     * @default 350\n     */\n    width?: number;\n\n    /**\n     * Defines the minimum width in px of the component that will take effect when resizing.\n     *\n     * @default 100\n     */\n    minWidth?: number;\n\n    /**\n     * Defines the maximum width in px of the component that will take effect when resizing.\n     *\n     * @default 800\n     */\n    maxWidth?: number;\n\n    /**\n     * Opens Sidebar in fullscreen, means 100vw.\n     *\n     * @default false\n     */\n    openInFullscreen?: boolean;\n\n    /**\n     * Callback for when the fullscreen is toggled.\n     */\n    onFullScreenChange?: (newFullscreenState: boolean) => void;\n\n    /**\n     * Enables the fullscreen functionality and shows the fullscreen toggle.\n     *\n     * @default false\n     */\n    enableFullscreenToggle?: boolean;\n\n    /**\n     * Translated tooltip text for the fullscreen toggle button.\n     */\n    fullscreenToggleTooltip?: string;\n\n    /**\n     * Tells the sidebar where it is positioned. This will affect the resizing behavior\n     * respectively. Note: the position need to be set properly whe using the resize\n     * functionality to know on which side of the sidebar to attach the resizer handle.\n     *\n     * It is also relevant when the sidebar mode is set to `fly` to properly animate\n     * the sidebar into the view.\n     *\n     * Possible values are:\n     *\n     * - `'left'`\n     * - `'right'`\n     * - `Sidebar.LEFT`\n     * - `Sidebar.RIGHT`\n     *\n     * @default 'left'\n     */\n    position?: ObjectValues<typeof SidebarPosition>;\n\n    /**\n     * Defines whether or not the sidebar is resizable.\n     * @default false\n     */\n    resizable?: boolean;\n\n    /**\n     * Callback for when the resize is done.\n     */\n    onResizeEnd?: VoidFunction;\n\n    /**\n     * Defines the breakpoint in pixel when the sidebar mode shall be changed. If the window width is lower\n     * than the given breakpoint the mode is set to `fly`. If the window width is higher the mode is set\n     * to `fluid`. This functionality is disabled by default and will be enabled when defining a breakpoint\n     * higher than 0.\n     */\n    switchModeBreakpoint?: number;\n\n    /**\n     * By default the fullscreen mode can be left with \"esc\". If this is unwanted it can be disabled.\n     *\n     * @default false\n     */\n    disableEsc?: boolean;\n\n    /**\n     * Defined whether or not a backdrop will be rendered behind the Sidebar to avoid clicks outside.\n     *\n     * @default false\n     */\n    hasBackdrop?: boolean;\n\n    /**\n     * Defined whether or not the UIKIT SmoothScrollbar is active.\n     *\n     * @default false\n     */\n    hasSmoothScrollbar?: boolean;\n\n    /**\n     * Defined whether or not the backdrop is visible similar to the backdrop for modal dialogs.\n     *\n     * @default false\n     */\n    makeBackdropVisible?: boolean;\n\n    /**\n     * Callback for when the backdrop is clicked. This comes in handy when handling transient data from\n     * the sidebar which need to be saved first and handle clicks outside.\n     */\n    onBackdropClick?: VoidFunction;\n\n    /**\n     * Additional ref added to the Sidebar body.\n     */\n    bodyRef?: React.MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Content that will be displayed in the components header.\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar title.\n     */\n    titleClassName?: string;\n\n    /**\n     * Additional classes added to the Sidebar backdrop.\n     */\n    backdropClassName?: string;\n\n    /**\n     * Additional classes added to the Sidebar body.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes added on the wrapper element.\n     */\n    className?: string;\n};\n\nconst Sidebar = (props: PropsWithChildren<SidebarProps>) => {\n    const {\n        fly = false,\n        closed = false,\n        title = '',\n        footer,\n        resizable = false,\n        position,\n        width = DEFAULT_WIDTH,\n        minWidth = DEFAULT_MIN_WIDTH,\n        maxWidth = DEFAULT_MAX_WIDTH,\n        hasBackdrop = false,\n        hasSmoothScrollbar = false,\n        makeBackdropVisible = false,\n        enableFullscreenToggle = false,\n        fullscreenToggleTooltip,\n        openInFullscreen = false,\n        showHeaderBorder = false,\n        disableClose = false,\n        bodyRef,\n        headerButtons,\n        switchModeBreakpoint = DEFAULT_SWITCH_MODE_BREAKPOINT,\n        onClose = noop,\n        onResizeEnd = noop,\n        onFullScreenChange = noop,\n        onBackdropClick = noop,\n        disableEsc = false,\n        titleClassName = '',\n        bodyClassName = '',\n        headerClassName = '',\n        footerClassName = '',\n        backdropClassName = '',\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const [internalWidth, setInternalWidth] = useState(toNumber(width));\n    const [sidebarMode, setSidebarMode] = useState(fly ? Sidebar.MODE_FLY : Sidebar.MODE_FLUID);\n    const [isFullscreen, setIsFullscreen] = useState(openInFullscreen);\n    const [isResize, setIsResize] = useState(false);\n    const [isSplit, setIsSplit] = useState(false);\n    const [isRight, setIsRight] = useState(position === SidebarPosition.RIGHT);\n\n    const sidebarRef = useRef<HTMLDivElement>(null);\n\n    // Used to keep the external reference to the module-content to avoid querying the DOM\n    // periodically on window resize\n    const moduleContentRef: React.MutableRefObject<HTMLDivElement | null> = useRef(null);\n\n    // Position fallback in case the position property is not defined but the sidebar mode is fly\n    // and we want to animate it, we nee to know the direction from where th sidebar is coming from.\n    // That's why we check the ApplicationLayoutSidebar class if the sidebar inside is right aligned\n    // or not and us this value instead.\n    // Note: the position need to be set properly whe using the resize functionality to know on which\n    // side of the sidebar to attach the resizer handle.\n    useEffect(() => {\n        if (sidebarRef.current && sidebarMode === Sidebar.MODE_FLY) {\n            const sidebarLayout = sidebarRef.current.parentNode as HTMLDivElement;\n            if (sidebarLayout?.className.includes('right')) {\n                setIsRight(true);\n            }\n        }\n    }, [sidebarRef.current, sidebarMode]);\n\n    // Keep the previous closed state in order to prevent animation when switching sidebar mode\n    const [previousClosed, setPreviousClosed] = useState(closed);\n    if (previousClosed !== closed) {\n        setPreviousClosed(closed);\n    }\n\n    // Update internal width from outside\n    const [previousWidth, setPreviousWidth] = useState(width);\n    if (previousWidth !== width) {\n        console.log('update internal width');\n        setInternalWidth(toNumber(width));\n        setPreviousWidth(width);\n    }\n\n    // Switch between mode \"fly\" and \"fluid\"\n    useWindowResize(() => adaptSidebarMode(), RESIZE_THROTTLE);\n\n    // Initially check breakpoint after mounting the component\n    useEffect(() => adaptSidebarMode(), []);\n\n    // When Sidebar opens, check for available module-content width and\n    // switch sidebar mode to fly in case\n    useEffect(() => {\n        if (!closed) {\n            setTimeout(() => adaptSidebarMode());\n        }\n    }, [closed]);\n\n    useEffect(() => {\n        const moduleContent = document.querySelector('.module-content');\n        if (moduleContent) {\n            moduleContentRef.current = moduleContent as HTMLDivElement;\n        }\n    }, []);\n\n    // Close the fullscreen with \"esc\"\n    useEsc(() => {\n        if (!disableEsc && enableFullscreenToggle && isFullscreen) {\n            setIsFullscreen(false);\n            onFullScreenChange(false);\n        }\n    });\n\n    const adaptSidebarMode = () => {\n        const moduleContentWidth = moduleContentRef.current?.clientWidth;\n\n        if (fly || switchModeBreakpoint === DEFAULT_SWITCH_MODE_BREAKPOINT) {\n            return;\n        }\n\n        const isModuleContentTooSmall = moduleContentWidth && moduleContentWidth <= MIN_MODULE_CONTENT_WIDTH;\n        const isModuleContentBigEnough = moduleContentWidth && moduleContentWidth > MAX_MODULE_CONTENT_WIDTH;\n\n        const isWindowSmallerThanBreakpoint = window.innerWidth <= switchModeBreakpoint;\n\n        // switch to fly when module-content is less than x pixel and back if it is bigger\n        if (isModuleContentTooSmall || isWindowSmallerThanBreakpoint) {\n            setSidebarMode(Sidebar.MODE_FLY);\n            return;\n        }\n\n        // if module-content is bigger and is initially fluid set back to initial fluid state\n        if (isModuleContentBigEnough && !isWindowSmallerThanBreakpoint) {\n            setSidebarMode(Sidebar.MODE_FLUID);\n            return;\n        }\n    };\n\n    const handleResize = (diff: number) => {\n        const wasSplit = isSplit;\n        const halfWindowWidth = window.innerWidth * 0.5;\n        const usedMaxWidth = maxWidth || halfWindowWidth;\n\n        // Check for sidebar width if it is half the window size. If it was before but the sidebar was resized so it is\n        // no longer half window size, set the sidebar with to half window size to avoid jumping sidebar to old width\n        setInternalWidth(oldWidth => {\n            const updatedWidth = position === Sidebar.RIGHT ? oldWidth + diff : oldWidth - diff;\n            const newWidth = getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);\n\n            const newIsSplit = newWidth === halfWindowWidth;\n            setIsSplit(newIsSplit);\n\n            return wasSplit && !isSplit ? halfWindowWidth : newWidth;\n        });\n\n        adaptSidebarMode();\n    };\n\n    const handleResizeStart = () => {\n        const body = document.body;\n        body?.classList.add('pointer-events-none');\n        setIsResize(true);\n    };\n\n    const handleResizeEnd = () => {\n        const body = document.body;\n        body?.classList.remove('pointer-events-none');\n        setIsResize(false);\n        onResizeEnd();\n    };\n\n    const handleFullscreenChange = () => {\n        const newFullscreenState = !isFullscreen;\n        setIsFullscreen(newFullscreenState);\n        onFullScreenChange(newFullscreenState);\n    };\n\n    const wrapperClasses = classNames(\n        'Sidebar',\n        className,\n        closed && 'closed',\n        isFullscreen && 'width-100vw sidebar-fullscreen',\n        isSplit && !isFullscreen && 'max-width-50vw width-50vw',\n        sidebarMode === SidebarMode.MODE_FLY ? 'fly' : isFullscreen ? 'fly' : 'fluid'\n    );\n\n    const headerClassNames = classNames('SidebarHeader', headerClassName, showHeaderBorder && 'show-border');\n    const titleClassNames = classNames('SidebarTitle', titleClassName);\n    const bodyClassNames = classNames('SidebarBody', bodyClassName);\n\n    const resizeLimitClasses = classNames('SidebarResizeLimit', isResize && 'display-block');\n\n    const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;\n    const resizeLimitStyle = isRight ? { right: resizeIndicatorPosition } : { left: resizeIndicatorPosition };\n\n    const sidebarContent = (\n        <>\n            <div className={resizeLimitClasses} style={resizeLimitStyle} />\n            <div className='SidebarContent'>\n                <div className={headerClassNames}>\n                    <div className={titleClassNames}>{title}</div>\n                    <div className='SidebarButtons non-printable close'>\n                        {headerButtons}\n                        {enableFullscreenToggle && (\n                            <SidebarFullscreenToggle\n                                isFullscreen={isFullscreen}\n                                onClick={handleFullscreenChange}\n                                tooltip={fullscreenToggleTooltip}\n                            />\n                        )}\n                        {!disableClose && (headerButtons || enableFullscreenToggle) && (\n                            <div className='SidebarButtons-spacer' />\n                        )}\n                        {!disableClose && <SidebarCloseButton onClick={onClose} />}\n                    </div>\n                </div>\n                {hasSmoothScrollbar ? (\n                    <SmoothScrollbars slideIn className={bodyClassNames} ref={bodyRef}>\n                        {children}\n                    </SmoothScrollbars>\n                ) : (\n                    <div className={bodyClassNames} ref={bodyRef}>\n                        {children}\n                    </div>\n                )}\n\n                <SidebarFooter footer={footer} className={footerClassName} />\n            </div>\n            {resizable && (\n                <Resizer\n                    onResizeStart={handleResizeStart}\n                    onResize={handleResize}\n                    onResizeEnd={handleResizeEnd}\n                    direction={Resizer.HORIZONTAL}\n                    position={isRight ? Resizer.LEFT : Resizer.RIGHT}\n                />\n            )}\n        </>\n    );\n\n    return (\n        <>\n            <motion.div\n                {...remainingProps}\n                initial={previousClosed && 'sidebarEnter'}\n                animate='sidebarVisible'\n                // Cannot exit animation as sidebar is moved to offscreen by CSS class, means is still mounted\n                exit='sidebarExit'\n                variants={animationVariants}\n                custom={{ fromRight: isRight, closed }}\n                transition={{ duration: ANIMATION_DURATION }}\n                className={wrapperClasses}\n                style={{ width: internalWidth }}\n                ref={sidebarRef}\n            >\n                {sidebarContent}\n            </motion.div>\n            {hasBackdrop && !closed && (\n                <SidebarBackdrop\n                    className={backdropClassName}\n                    makeBackdropVisible={makeBackdropVisible}\n                    onClick={onBackdropClick}\n                />\n            )}\n        </>\n    );\n};\n\nSidebar.LEFT = SidebarPosition.LEFT;\nSidebar.RIGHT = SidebarPosition.RIGHT;\n\nSidebar.MODE_FLY = SidebarMode.MODE_FLY;\nSidebar.MODE_FLUID = SidebarMode.MODE_FLUID;\n\nexport default Sidebar;\n"],"names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","DEFAULT_MAX_WIDTH","DEFAULT_SWITCH_MODE_BREAKPOINT","MIN_MODULE_CONTENT_WIDTH","MAX_MODULE_CONTENT_WIDTH","ANIMATION_DURATION","RESIZE_THROTTLE","SidebarPosition","SidebarMode","animationVariants","fromRight","closed","Sidebar","props","fly","title","footer","resizable","position","width","minWidth","maxWidth","hasBackdrop","hasSmoothScrollbar","makeBackdropVisible","enableFullscreenToggle","fullscreenToggleTooltip","openInFullscreen","showHeaderBorder","disableClose","bodyRef","headerButtons","switchModeBreakpoint","onClose","noop","onResizeEnd","onFullScreenChange","onBackdropClick","disableEsc","titleClassName","bodyClassName","headerClassName","footerClassName","backdropClassName","className","children","remainingProps","internalWidth","setInternalWidth","useState","toNumber","sidebarMode","setSidebarMode","isFullscreen","setIsFullscreen","isResize","setIsResize","isSplit","setIsSplit","isRight","setIsRight","sidebarRef","useRef","moduleContentRef","useEffect","previousClosed","setPreviousClosed","previousWidth","setPreviousWidth","useWindowResize","adaptSidebarMode","moduleContent","useEsc","moduleContentWidth","isModuleContentTooSmall","isModuleContentBigEnough","isWindowSmallerThanBreakpoint","handleResize","diff","wasSplit","halfWindowWidth","usedMaxWidth","oldWidth","updatedWidth","newWidth","getWidthInBoundaries","handleResizeStart","handleResizeEnd","handleFullscreenChange","newFullscreenState","wrapperClasses","classNames","headerClassNames","titleClassNames","bodyClassNames","resizeLimitClasses","resizeIndicatorPosition","sidebarContent","jsxs","Fragment","jsx","SidebarFullscreenToggle","SidebarCloseButton","SmoothScrollbars","SidebarFooter","Resizer","motion","SidebarBackdrop"],"mappings":"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"}

package/components/sidebars/SidebarCloseButton.js

@@ -1,8 +1,8 @@
 import { jsx as o } from "react/jsx-runtime";
 import { noop as e } from "es-toolkit/function";
 import t from "../button/Button.js";
-const a = ({ onClick: r = e }) => /* @__PURE__ */ o(t, { bsStyle: t.MUTED, iconOnly: !0, onClick: r, "data-testid": "sidebarCloseButton", children: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-remove" }) });
+const l = ({ onClick: r = e }) => /* @__PURE__ */ o(t, { bsStyle: t.MUTED, iconOnly: !0, onClick: r, "data-testid": "sidebarCloseButton", children: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-remove" }) });
 export {
-  a as default
+  l as default
 };
 //# sourceMappingURL=SidebarCloseButton.js.map

package/components/sidebars/SidebarCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarCloseButton.js","sources":["../../../src/components/sidebars/SidebarCloseButton.tsx"],"sourcesContent":["import { noop } from 'es-toolkit/function';\n\nimport Button from '../button/Button';\n\nexport type SidebarCloseButtonProps = {\n    onClick?: VoidFunction;\n};\n\nconst SidebarCloseButton = ({ onClick = noop }: SidebarCloseButtonProps) => {\n    return (\n        <Button bsStyle={Button.MUTED} iconOnly onClick={onClick} data-testid='sidebarCloseButton'>\n            <span className='rioglyph rioglyph-remove' />\n        </Button>\n    );\n};\n\nexport default SidebarCloseButton;\n"],"names":["SidebarCloseButton","onClick","noop","jsx","Button"],"mappings":";;;AAQA,MAAMA,IAAqB,CAAC,EAAE,SAAAC,IAAUC,QAEhC,gBAAAC,EAACC,GAAA,EAAO,SAASA,EAAO,OAAO,UAAQ,IAAC,SAAAH,GAAkB,eAAY,sBAClE,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,4BAA2B,GAC/C;"}
+{"version":3,"file":"SidebarCloseButton.js","sources":["../../../src/components/sidebars/SidebarCloseButton.tsx"],"sourcesContent":["import { noop } from 'es-toolkit/function';\n\nimport Button from '../button/Button';\n\nexport type SidebarCloseButtonProps = {\n    onClick?: VoidFunction;\n};\n\nconst SidebarCloseButton = ({ onClick = noop }: SidebarCloseButtonProps) => (\n    <Button bsStyle={Button.MUTED} iconOnly onClick={onClick} data-testid='sidebarCloseButton'>\n        <span className='rioglyph rioglyph-remove' />\n    </Button>\n);\n\nexport default SidebarCloseButton;\n"],"names":["SidebarCloseButton","onClick","noop","jsx","Button"],"mappings":";;;AAQA,MAAMA,IAAqB,CAAC,EAAE,SAAAC,IAAUC,QACpC,gBAAAC,EAACC,KAAO,SAASA,EAAO,OAAO,UAAQ,IAAC,SAAAH,GAAkB,eAAY,sBAClE,4BAAC,QAAA,EAAK,WAAU,4BAA2B,EAAA,CAC/C;"}

package/components/smoothScrollbars/SmoothScrollbars.d.ts

@@ -1,5 +1,6 @@
-import { default as React } from 'react';
+import { default as React, AriaRole } from 'react';
 export type SmoothScrollbarsProps = {
+    role?: AriaRole;
     /**
      * Defines whether the scrollbars should slide in on hover.
      *
@@ -39,13 +40,13 @@ export type SmoothScrollbarsProps = {
      *
      * @default 0
      */
-    autoHeightMin?: number;
+    autoHeightMin?: number | string;
     /**
      * Maximum height when auto-height is enabled.
      *
      * @default 200
      */
-    autoHeightMax?: number;
+    autoHeightMax?: number | string;
     /**
      * Scroll callback, forwarded to the underlying scrollbars instance.
      */

package/components/smoothScrollbars/SmoothScrollbars.js

@@ -6,10 +6,10 @@ import s from "../../utils/classNames.js";
 const E = 100, P = R(
   (i, m) => {
     const {
-      slideIn: u = !1,
+      slideIn: b = !1,
       largeTrack: l = !1,
-      trackOffset: c = !1,
-      className: b = "",
+      trackOffset: t = !1,
+      className: u = "",
       onScroll: d = O,
       tagName: f = "div",
       autoHeight: h = !1,
@@ -18,28 +18,28 @@ const E = 100, P = R(
       children: v,
       style: y,
       ...k
-    } = i, a = n(null), t = n(null);
-    S(m, () => a.current), V(() => {
-      if (!t.current || !a.current)
+    } = i, a = n(null), c = n(null);
+    S(m, () => a.current, []), V(() => {
+      if (!c.current || !a.current)
         return;
       const r = x(() => {
         a.current && a.current.update();
       }, E), o = new ResizeObserver(r);
-      return o.observe(t.current), () => {
+      return o.observe(c.current), () => {
         o.disconnect(), r.cancel();
       };
     }, []);
-    const T = s(b, u && "scrollbar-fly-in", "smooth-scrollbar-wrapper"), z = s(
+    const T = s(u, b && "scrollbar-fly-in", "smooth-scrollbar-wrapper"), z = s(
       "scrollbar-track-vertical",
       l && "scrollbar-track-size-large",
-      c && "scrollbar-track-offset"
+      t && "scrollbar-track-offset"
     ), g = s(
       "scrollbar-thumb-vertical",
       l && "scrollbar-thumb-size-large"
     ), H = s(
       "scrollbar-track-horizontal",
       l && "scrollbar-track-size-large",
-      c && "scrollbar-track-offset"
+      t && "scrollbar-track-offset"
     ), w = s(
       "scrollbar-thumb-horizontal",
       l && "scrollbar-thumb-size-large"
@@ -61,7 +61,7 @@ const E = 100, P = R(
         renderThumbVertical: (r) => /* @__PURE__ */ e("div", { ...r, className: g }),
         renderTrackHorizontal: (r) => /* @__PURE__ */ e("div", { ...r, className: H }),
         renderThumbHorizontal: (r) => /* @__PURE__ */ e("div", { ...r, className: w }),
-        children: /* @__PURE__ */ e("div", { className: "scrollbar-content-wrapper", ref: t, children: v })
+        children: /* @__PURE__ */ e("div", { className: "scrollbar-content-wrapper", ref: c, children: v })
       }
     );
   }

package/components/smoothScrollbars/SmoothScrollbars.js.map

@@ -1 +1 @@
-{"version":3,"file":"SmoothScrollbars.js","sources":["../../../src/components/smoothScrollbars/SmoothScrollbars.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    type ForwardedRef,\n    type PropsWithChildren,\n} from 'react';\nimport { Scrollbars } from 'react-custom-scrollbars-4';\nimport { debounce, noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\n\nexport type SmoothScrollbarsProps = {\n    /**\n     * Defines whether the scrollbars should slide in on hover.\n     *\n     * @default false\n     */\n    slideIn?: boolean;\n\n    /**\n     * Defines whether the scrollbars should be slightly larger.\n     *\n     * @default false\n     */\n    largeTrack?: boolean;\n\n    /**\n     * Defines whether the scrollbars should have an offset.\n     *\n     * @default false\n     */\n    trackOffset?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Tag name used for the scroll container.\n     *\n     * @default 'div'\n     */\n    tagName?: string;\n\n    /**\n     * Enable auto-height behavior.\n     *\n     * @default false\n     */\n    autoHeight?: boolean;\n\n    /**\n     * Minimum height when auto-height is enabled.\n     *\n     * @default 0\n     */\n    autoHeightMin?: number;\n\n    /**\n     * Maximum height when auto-height is enabled.\n     *\n     * @default 200\n     */\n    autoHeightMax?: number;\n\n    /**\n     * Scroll callback, forwarded to the underlying scrollbars instance.\n     */\n    onScroll?: (event: React.UIEvent<any> | undefined) => void;\n\n    /**\n     * Inline styles for the scroll container.\n     */\n    style?: React.CSSProperties;\n};\n\ntype ScrollbarsWithUpdate = Scrollbars & {\n    update: () => void;\n};\n\nconst RESIZE_THROTTLING = 100;\n\nconst SmoothScrollbars = forwardRef(\n    (componentProps: PropsWithChildren<SmoothScrollbarsProps>, ref: ForwardedRef<any>) => {\n        const {\n            slideIn = false,\n            largeTrack = false,\n            trackOffset = false,\n            className = '',\n            onScroll = noop,\n            tagName = 'div',\n            autoHeight = false,\n            autoHeightMin = 0,\n            autoHeightMax = 200,\n            children,\n            style,\n            ...remainingProps\n        } = componentProps;\n\n        const scrollbarsRef = useRef<Scrollbars>(null);\n        const contentRef = useRef<HTMLDivElement>(null);\n\n        useImperativeHandle(ref, () => scrollbarsRef.current as Scrollbars);\n\n        useEffect(() => {\n            if (!contentRef.current || !scrollbarsRef.current) {\n                return;\n            }\n\n            const updateScrollbars = debounce(() => {\n                if (scrollbarsRef.current) {\n                    // Trigger a update for the scrollbars.\n                    // This is needed since the lib does not automatically update on content height changes\n                    // See: https://github.com/RobPethick/react-custom-scrollbars-2/issues/12\n\n                    // Use type assertion to tell TypeScript that 'update' exists\n                    (scrollbarsRef.current as ScrollbarsWithUpdate).update();\n                }\n            }, RESIZE_THROTTLING);\n\n            const resizeObserver = new ResizeObserver(updateScrollbars);\n            resizeObserver.observe(contentRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n                updateScrollbars.cancel();\n            };\n        }, []);\n\n        const wrapperClassNames = classNames(className, slideIn && 'scrollbar-fly-in', 'smooth-scrollbar-wrapper');\n\n        const renderTrackVerticalNames = classNames(\n            'scrollbar-track-vertical',\n            largeTrack && 'scrollbar-track-size-large',\n            trackOffset && 'scrollbar-track-offset'\n        );\n\n        const renderThumbVerticalNames = classNames(\n            'scrollbar-thumb-vertical',\n            largeTrack && 'scrollbar-thumb-size-large'\n        );\n\n        const renderTrackHorizontalNames = classNames(\n            'scrollbar-track-horizontal',\n            largeTrack && 'scrollbar-track-size-large',\n            trackOffset && 'scrollbar-track-offset'\n        );\n\n        const renderThumbHorizontalNames = classNames(\n            'scrollbar-thumb-horizontal',\n            largeTrack && 'scrollbar-thumb-size-large'\n        );\n\n        return (\n            <Scrollbars\n                {...remainingProps}\n                ref={scrollbarsRef}\n                tagName={tagName}\n                onScroll={onScroll}\n                className={wrapperClassNames}\n                hideTracksWhenNotNeeded\n                autoHeight={autoHeight}\n                autoHeightMin={autoHeightMin}\n                autoHeightMax={autoHeightMax}\n                renderView={props => {\n                    return <div {...props} className='scrollbar-view' />;\n                }}\n                renderTrackVertical={props => {\n                    return <div {...props} className={renderTrackVerticalNames} />;\n                }}\n                renderThumbVertical={props => {\n                    return <div {...props} className={renderThumbVerticalNames} />;\n                }}\n                renderTrackHorizontal={props => {\n                    return <div {...props} className={renderTrackHorizontalNames} />;\n                }}\n                renderThumbHorizontal={props => {\n                    return <div {...props} className={renderThumbHorizontalNames} />;\n                }}\n            >\n                <div className='scrollbar-content-wrapper' ref={contentRef}>\n                    {children}\n                </div>\n            </Scrollbars>\n        );\n    }\n);\n\nexport default SmoothScrollbars;\n"],"names":["RESIZE_THROTTLING","SmoothScrollbars","forwardRef","componentProps","ref","slideIn","largeTrack","trackOffset","className","onScroll","noop","tagName","autoHeight","autoHeightMin","autoHeightMax","children","style","remainingProps","scrollbarsRef","useRef","contentRef","useImperativeHandle","useEffect","updateScrollbars","debounce","resizeObserver","wrapperClassNames","classNames","renderTrackVerticalNames","renderThumbVerticalNames","renderTrackHorizontalNames","renderThumbHorizontalNames","jsx","Scrollbars","props"],"mappings":";;;;;AAmFA,MAAMA,IAAoB,KAEpBC,IAAmBC;AAAA,EACrB,CAACC,GAA0DC,MAA2B;AAClF,UAAM;AAAA,MACF,SAAAC,IAAU;AAAA,MACV,YAAAC,IAAa;AAAA,MACb,aAAAC,IAAc;AAAA,MACd,WAAAC,IAAY;AAAA,MACZ,UAAAC,IAAWC;AAAA,MACX,SAAAC,IAAU;AAAA,MACV,YAAAC,IAAa;AAAA,MACb,eAAAC,IAAgB;AAAA,MAChB,eAAAC,IAAgB;AAAA,MAChB,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACHd,GAEEe,IAAgBC,EAAmB,IAAI,GACvCC,IAAaD,EAAuB,IAAI;AAE9C,IAAAE,EAAoBjB,GAAK,MAAMc,EAAc,OAAqB,GAElEI,EAAU,MAAM;AACZ,UAAI,CAACF,EAAW,WAAW,CAACF,EAAc;AACtC;AAGJ,YAAMK,IAAmBC,EAAS,MAAM;AACpC,QAAIN,EAAc,WAMbA,EAAc,QAAiC,OAAA;AAAA,MAExD,GAAGlB,CAAiB,GAEdyB,IAAiB,IAAI,eAAeF,CAAgB;AAC1D,aAAAE,EAAe,QAAQL,EAAW,OAAO,GAElC,MAAM;AACT,QAAAK,EAAe,WAAA,GACfF,EAAiB,OAAA;AAAA,MACrB;AAAA,IACJ,GAAG,CAAA,CAAE;AAEL,UAAMG,IAAoBC,EAAWnB,GAAWH,KAAW,oBAAoB,0BAA0B,GAEnGuB,IAA2BD;AAAA,MAC7B;AAAA,MACArB,KAAc;AAAA,MACdC,KAAe;AAAA,IAAA,GAGbsB,IAA2BF;AAAA,MAC7B;AAAA,MACArB,KAAc;AAAA,IAAA,GAGZwB,IAA6BH;AAAA,MAC/B;AAAA,MACArB,KAAc;AAAA,MACdC,KAAe;AAAA,IAAA,GAGbwB,IAA6BJ;AAAA,MAC/B;AAAA,MACArB,KAAc;AAAA,IAAA;AAGlB,WACI,gBAAA0B;AAAA,MAACC;AAAA,MAAA;AAAA,QACI,GAAGhB;AAAA,QACJ,KAAKC;AAAA,QACL,SAAAP;AAAA,QACA,UAAAF;AAAA,QACA,WAAWiB;AAAA,QACX,yBAAuB;AAAA,QACvB,YAAAd;AAAA,QACA,eAAAC;AAAA,QACA,eAAAC;AAAA,QACA,YAAY,CAAAoB,MACD,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAU,kBAAiB;AAAA,QAEtD,qBAAqB,CAAAA,MACV,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWN,GAA0B;AAAA,QAEhE,qBAAqB,CAAAM,MACV,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWL,GAA0B;AAAA,QAEhE,uBAAuB,CAAAK,MACZ,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWJ,GAA4B;AAAA,QAElE,uBAAuB,CAAAI,MACZ,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWH,GAA4B;AAAA,QAGlE,4BAAC,OAAA,EAAI,WAAU,6BAA4B,KAAKX,GAC3C,UAAAL,EAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;"}
+{"version":3,"file":"SmoothScrollbars.js","sources":["../../../src/components/smoothScrollbars/SmoothScrollbars.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    type ForwardedRef,\n    type PropsWithChildren,\n    type AriaRole,\n} from 'react';\nimport { Scrollbars } from 'react-custom-scrollbars-4';\nimport { debounce, noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\n\nexport type SmoothScrollbarsProps = {\n    role?: AriaRole;\n\n    /**\n     * Defines whether the scrollbars should slide in on hover.\n     *\n     * @default false\n     */\n    slideIn?: boolean;\n\n    /**\n     * Defines whether the scrollbars should be slightly larger.\n     *\n     * @default false\n     */\n    largeTrack?: boolean;\n\n    /**\n     * Defines whether the scrollbars should have an offset.\n     *\n     * @default false\n     */\n    trackOffset?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Tag name used for the scroll container.\n     *\n     * @default 'div'\n     */\n    tagName?: string;\n\n    /**\n     * Enable auto-height behavior.\n     *\n     * @default false\n     */\n    autoHeight?: boolean;\n\n    /**\n     * Minimum height when auto-height is enabled.\n     *\n     * @default 0\n     */\n    autoHeightMin?: number | string;\n\n    /**\n     * Maximum height when auto-height is enabled.\n     *\n     * @default 200\n     */\n    autoHeightMax?: number | string;\n\n    /**\n     * Scroll callback, forwarded to the underlying scrollbars instance.\n     */\n    onScroll?: (event: React.UIEvent<any> | undefined) => void;\n\n    /**\n     * Inline styles for the scroll container.\n     */\n    style?: React.CSSProperties;\n};\n\ntype ScrollbarsWithUpdate = Scrollbars & {\n    update: () => void;\n};\n\nconst RESIZE_THROTTLING = 100;\n\nconst SmoothScrollbars = forwardRef(\n    (componentProps: PropsWithChildren<SmoothScrollbarsProps>, ref: ForwardedRef<any>) => {\n        const {\n            slideIn = false,\n            largeTrack = false,\n            trackOffset = false,\n            className = '',\n            onScroll = noop,\n            tagName = 'div',\n            autoHeight = false,\n            autoHeightMin = 0,\n            autoHeightMax = 200,\n            children,\n            style,\n            ...remainingProps\n        } = componentProps;\n\n        const scrollbarsRef = useRef<Scrollbars>(null);\n        const contentRef = useRef<HTMLDivElement>(null);\n\n        useImperativeHandle(ref, () => scrollbarsRef.current as Scrollbars, []);\n\n        useEffect(() => {\n            if (!contentRef.current || !scrollbarsRef.current) {\n                return;\n            }\n\n            const updateScrollbars = debounce(() => {\n                if (scrollbarsRef.current) {\n                    // Trigger a update for the scrollbars.\n                    // This is needed since the lib does not automatically update on content height changes\n                    // See: https://github.com/RobPethick/react-custom-scrollbars-2/issues/12\n\n                    // Use type assertion to tell TypeScript that 'update' exists\n                    (scrollbarsRef.current as ScrollbarsWithUpdate).update();\n                }\n            }, RESIZE_THROTTLING);\n\n            const resizeObserver = new ResizeObserver(updateScrollbars);\n            resizeObserver.observe(contentRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n                updateScrollbars.cancel();\n            };\n        }, []);\n\n        const wrapperClassNames = classNames(className, slideIn && 'scrollbar-fly-in', 'smooth-scrollbar-wrapper');\n\n        const renderTrackVerticalNames = classNames(\n            'scrollbar-track-vertical',\n            largeTrack && 'scrollbar-track-size-large',\n            trackOffset && 'scrollbar-track-offset'\n        );\n\n        const renderThumbVerticalNames = classNames(\n            'scrollbar-thumb-vertical',\n            largeTrack && 'scrollbar-thumb-size-large'\n        );\n\n        const renderTrackHorizontalNames = classNames(\n            'scrollbar-track-horizontal',\n            largeTrack && 'scrollbar-track-size-large',\n            trackOffset && 'scrollbar-track-offset'\n        );\n\n        const renderThumbHorizontalNames = classNames(\n            'scrollbar-thumb-horizontal',\n            largeTrack && 'scrollbar-thumb-size-large'\n        );\n\n        return (\n            <Scrollbars\n                {...remainingProps}\n                ref={scrollbarsRef}\n                tagName={tagName}\n                onScroll={onScroll}\n                className={wrapperClassNames}\n                hideTracksWhenNotNeeded\n                autoHeight={autoHeight}\n                autoHeightMin={autoHeightMin}\n                autoHeightMax={autoHeightMax}\n                renderView={props => <div {...props} className='scrollbar-view' />}\n                renderTrackVertical={props => <div {...props} className={renderTrackVerticalNames} />}\n                renderThumbVertical={props => <div {...props} className={renderThumbVerticalNames} />}\n                renderTrackHorizontal={props => <div {...props} className={renderTrackHorizontalNames} />}\n                renderThumbHorizontal={props => <div {...props} className={renderThumbHorizontalNames} />}\n            >\n                <div className='scrollbar-content-wrapper' ref={contentRef}>\n                    {children}\n                </div>\n            </Scrollbars>\n        );\n    }\n);\n\nexport default SmoothScrollbars;\n"],"names":["RESIZE_THROTTLING","SmoothScrollbars","forwardRef","componentProps","ref","slideIn","largeTrack","trackOffset","className","onScroll","noop","tagName","autoHeight","autoHeightMin","autoHeightMax","children","style","remainingProps","scrollbarsRef","useRef","contentRef","useImperativeHandle","useEffect","updateScrollbars","debounce","resizeObserver","wrapperClassNames","classNames","renderTrackVerticalNames","renderThumbVerticalNames","renderTrackHorizontalNames","renderThumbHorizontalNames","jsx","Scrollbars","props"],"mappings":";;;;;AAsFA,MAAMA,IAAoB,KAEpBC,IAAmBC;AAAA,EACrB,CAACC,GAA0DC,MAA2B;AAClF,UAAM;AAAA,MACF,SAAAC,IAAU;AAAA,MACV,YAAAC,IAAa;AAAA,MACb,aAAAC,IAAc;AAAA,MACd,WAAAC,IAAY;AAAA,MACZ,UAAAC,IAAWC;AAAA,MACX,SAAAC,IAAU;AAAA,MACV,YAAAC,IAAa;AAAA,MACb,eAAAC,IAAgB;AAAA,MAChB,eAAAC,IAAgB;AAAA,MAChB,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACHd,GAEEe,IAAgBC,EAAmB,IAAI,GACvCC,IAAaD,EAAuB,IAAI;AAE9C,IAAAE,EAAoBjB,GAAK,MAAMc,EAAc,SAAuB,CAAA,CAAE,GAEtEI,EAAU,MAAM;AACZ,UAAI,CAACF,EAAW,WAAW,CAACF,EAAc;AACtC;AAGJ,YAAMK,IAAmBC,EAAS,MAAM;AACpC,QAAIN,EAAc,WAMbA,EAAc,QAAiC,OAAA;AAAA,MAExD,GAAGlB,CAAiB,GAEdyB,IAAiB,IAAI,eAAeF,CAAgB;AAC1D,aAAAE,EAAe,QAAQL,EAAW,OAAO,GAElC,MAAM;AACT,QAAAK,EAAe,WAAA,GACfF,EAAiB,OAAA;AAAA,MACrB;AAAA,IACJ,GAAG,CAAA,CAAE;AAEL,UAAMG,IAAoBC,EAAWnB,GAAWH,KAAW,oBAAoB,0BAA0B,GAEnGuB,IAA2BD;AAAA,MAC7B;AAAA,MACArB,KAAc;AAAA,MACdC,KAAe;AAAA,IAAA,GAGbsB,IAA2BF;AAAA,MAC7B;AAAA,MACArB,KAAc;AAAA,IAAA,GAGZwB,IAA6BH;AAAA,MAC/B;AAAA,MACArB,KAAc;AAAA,MACdC,KAAe;AAAA,IAAA,GAGbwB,IAA6BJ;AAAA,MAC/B;AAAA,MACArB,KAAc;AAAA,IAAA;AAGlB,WACI,gBAAA0B;AAAA,MAACC;AAAA,MAAA;AAAA,QACI,GAAGhB;AAAA,QACJ,KAAKC;AAAA,QACL,SAAAP;AAAA,QACA,UAAAF;AAAA,QACA,WAAWiB;AAAA,QACX,yBAAuB;AAAA,QACvB,YAAAd;AAAA,QACA,eAAAC;AAAA,QACA,eAAAC;AAAA,QACA,YAAY,CAAAoB,MAAS,gBAAAF,EAAC,SAAK,GAAGE,GAAO,WAAU,kBAAiB;AAAA,QAChE,qBAAqB,CAAAA,MAAS,gBAAAF,EAAC,SAAK,GAAGE,GAAO,WAAWN,GAA0B;AAAA,QACnF,qBAAqB,CAAAM,MAAS,gBAAAF,EAAC,SAAK,GAAGE,GAAO,WAAWL,GAA0B;AAAA,QACnF,uBAAuB,CAAAK,MAAS,gBAAAF,EAAC,SAAK,GAAGE,GAAO,WAAWJ,GAA4B;AAAA,QACvF,uBAAuB,CAAAI,MAAS,gBAAAF,EAAC,SAAK,GAAGE,GAAO,WAAWH,GAA4B;AAAA,QAEvF,4BAAC,OAAA,EAAI,WAAU,6BAA4B,KAAKX,GAC3C,UAAAL,EAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;"}

package/components/states/CustomState.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomState.js","sources":["../../../src/components/states/CustomState.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport StateButton, { type StateButtonProps } from './StateButton';\nimport StateIcon from './StateIcon';\nimport type { TextAlignment } from '../../values/TextAlignment';\nimport type { StateIconProps } from './StateIcon';\nimport { hasPaddingClass } from '../../utils/hasUtilityClass';\n\nexport type BaseStateProps = {\n    /**\n     * The icon to be shown.\n     *\n     * Default icons are defined for all states.\n     */\n    icon?: string;\n\n    /**\n     * List of icons to show instead a single icon.\n     *\n     * @default []\n     */\n    icons?: StateIconProps[];\n\n    /**\n     * Custom Image if needed.\n     */\n    image?: React.ReactNode;\n\n    /**\n     * The headline to be shown.\n     */\n    headline?: string | React.ReactNode;\n\n    /**\n     * The text to display.\n     */\n    message?: string | React.ReactNode;\n\n    /**\n     * Definitions for the buttons to show.\n     *\n     * @default []\n     */\n    buttons?: StateButtonProps[];\n\n    /**\n     * Defines whether to use 100% width or default width.\n     *\n     * __Note:__ Only to be used for special cases on the CustomState component.\n     *\n     * @default false\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Smaller icon and headline size.\n     *\n     * @default false\n     */\n    condensed?: boolean;\n\n    /**\n     * Defines where the panel is aligned.\n     *\n     * Possible values are:\n     *\n     * - `'left'`\n     * - `'center'`\n     * - `'right'`\n     *\n     * @default 'center'\n     */\n    alignment?: TextAlignment;\n\n    /**\n     * Optional class names for the wrapper.\n     */\n    outerClassName?: string;\n\n    /**\n     * Optional class names for the content.\n     */\n    innerClassName?: string;\n};\n\nconst justify: Record<TextAlignment, string> = {\n    left: 'justify-content-start',\n    center: 'justify-content-center',\n    right: 'justify-content-end',\n};\n\nconst renderButtons = (buttons: StateButtonProps[]) => {\n    if (isEmpty(buttons)) {\n        return;\n    }\n\n    if (buttons.length === 1) {\n        return (\n            <div className='btn-toolbar margin-top-20'>\n                <StateButton {...buttons[0]} />\n            </div>\n        );\n    }\n\n    if (buttons.length === 2) {\n        return (\n            <div className='btn-toolbar margin-top-20 justify-content-center-xs'>\n                {buttons.map((buttonProps, index) => (\n                    <StateButton key={index} {...buttonProps} />\n                ))}\n            </div>\n        );\n    }\n\n    return (\n        <>\n            <div className='btn-toolbar margin-top-20 justify-content-center-xs'>\n                <StateButton key='1' {...buttons[0]} />\n                <StateButton key='2' {...buttons[1]} />\n            </div>\n            <div className='btn-toolbar'>\n                {buttons.map((buttonProps, index) => {\n                    return index > 1 && <StateButton key={index} {...buttonProps} />;\n                })}\n            </div>\n        </>\n    );\n};\n\nexport type CustomStateProps = BaseStateProps;\n\nconst CustomState = (props: PropsWithChildren<CustomStateProps>) => {\n    const {\n        icon,\n        icons = [],\n        image,\n        headline,\n        message,\n        buttons = [],\n        alignment = 'center',\n        fullWidth = false,\n        condensed = false,\n        outerClassName = '',\n        innerClassName = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const wrapperClasses = classNames(\n        'margin-0',\n        'width-100pct',\n        !fullWidth && 'max-width-600',\n        'panel-default',\n        'panel',\n        !hasPaddingClass(outerClassName) ? (condensed ? 'padding-10' : 'padding-15') : '',\n        outerClassName\n    );\n\n    const innerClassNames = classNames(\n        'display-flex',\n        'flex-column',\n        'align-items-center',\n        'text-center',\n        !hasPaddingClass(innerClassName) ? (condensed ? 'padding-15' : 'padding-25') : '',\n        innerClassName\n    );\n\n    const iconClasses = classNames(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20');\n\n    const iconsClasses = classNames(\n        condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20',\n        'display-flex',\n        'align-items-center',\n        'max-width-100pct'\n    );\n\n    const headlineClassNames = classNames(\n        condensed ? 'text-size-h4' : 'text-size-h3 text-size-h2-xl',\n        'line-height-125rel',\n        'text-color-dark',\n        'text-medium',\n        'width-500',\n        'max-width-100pct',\n        'text-wrap-balance'\n    );\n\n    const renderIcon = (\n        <>\n            {icon && (\n                <div className={iconClasses}>\n                    <StateIcon name={icon} />\n                </div>\n            )}\n        </>\n    );\n\n    const renderIcons = (\n        <div className={iconsClasses}>\n            {icons.map((iconProps, index) => (\n                <StateIcon key={index} {...iconProps} />\n            ))}\n        </div>\n    );\n\n    const renderChildren = <div className='width-500 max-width-100pct margin-top-25'>{children}</div>;\n\n    const renderHeadline = <div className={headlineClassNames}>{headline}</div>;\n\n    const renderMessage = (\n        <div className='text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance'>{message}</div>\n    );\n\n    const singleOrMultiIcon = isEmpty(icons) ? renderIcon : renderIcons;\n\n    const imageOrIcon = image ? image : singleOrMultiIcon;\n\n    return (\n        <div className={`display-flex ${justify[alignment]} max-width-100pct`} {...remainingProps}>\n            <div className={wrapperClasses}>\n                <div className={innerClassNames}>\n                    {imageOrIcon}\n                    {headline && renderHeadline}\n                    {message && renderMessage}\n                    {renderButtons(buttons)}\n                    {children && renderChildren}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default CustomState;\n"],"names":["justify","renderButtons","buttons","isEmpty","jsx","StateButton","buttonProps","index","jsxs","Fragment","CustomState","props","icon","icons","image","headline","message","alignment","fullWidth","condensed","outerClassName","innerClassName","children","remainingProps","wrapperClasses","classNames","hasPaddingClass","innerClassNames","iconClasses","iconsClasses","headlineClassNames","renderIcon","StateIcon","renderIcons","iconProps","renderChildren","renderHeadline","renderMessage","singleOrMultiIcon","imageOrIcon"],"mappings":"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"}
+{"version":3,"file":"CustomState.js","sources":["../../../src/components/states/CustomState.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport StateButton, { type StateButtonProps } from './StateButton';\nimport StateIcon from './StateIcon';\nimport type { TextAlignment } from '../../values/TextAlignment';\nimport type { StateIconProps } from './StateIcon';\nimport { hasPaddingClass } from '../../utils/hasUtilityClass';\n\nexport type BaseStateProps = {\n    /**\n     * The icon to be shown.\n     *\n     * Default icons are defined for all states.\n     */\n    icon?: string;\n\n    /**\n     * List of icons to show instead a single icon.\n     *\n     * @default []\n     */\n    icons?: StateIconProps[];\n\n    /**\n     * Custom Image if needed.\n     */\n    image?: React.ReactNode;\n\n    /**\n     * The headline to be shown.\n     */\n    headline?: string | React.ReactNode;\n\n    /**\n     * The text to display.\n     */\n    message?: string | React.ReactNode;\n\n    /**\n     * Definitions for the buttons to show.\n     *\n     * @default []\n     */\n    buttons?: StateButtonProps[];\n\n    /**\n     * Defines whether to use 100% width or default width.\n     *\n     * __Note:__ Only to be used for special cases on the CustomState component.\n     *\n     * @default false\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Smaller icon and headline size.\n     *\n     * @default false\n     */\n    condensed?: boolean;\n\n    /**\n     * Defines where the panel is aligned.\n     *\n     * Possible values are:\n     *\n     * - `'left'`\n     * - `'center'`\n     * - `'right'`\n     *\n     * @default 'center'\n     */\n    alignment?: TextAlignment;\n\n    /**\n     * Optional class names for the wrapper.\n     */\n    outerClassName?: string;\n\n    /**\n     * Optional class names for the content.\n     */\n    innerClassName?: string;\n};\n\nconst justify: Record<TextAlignment, string> = {\n    left: 'justify-content-start',\n    center: 'justify-content-center',\n    right: 'justify-content-end',\n};\n\nconst renderButtons = (buttons: StateButtonProps[]) => {\n    if (isEmpty(buttons)) {\n        return;\n    }\n\n    if (buttons.length === 1) {\n        return (\n            <div className='btn-toolbar margin-top-20'>\n                <StateButton {...buttons[0]} />\n            </div>\n        );\n    }\n\n    if (buttons.length === 2) {\n        return (\n            <div className='btn-toolbar margin-top-20 justify-content-center-xs'>\n                {buttons.map((buttonProps, index) => (\n                    <StateButton key={index} {...buttonProps} />\n                ))}\n            </div>\n        );\n    }\n\n    return (\n        <>\n            <div className='btn-toolbar margin-top-20 justify-content-center-xs'>\n                <StateButton key='1' {...buttons[0]} />\n                <StateButton key='2' {...buttons[1]} />\n            </div>\n            <div className='btn-toolbar'>\n                {buttons.map((buttonProps, index) => index > 1 && <StateButton key={index} {...buttonProps} />)}\n            </div>\n        </>\n    );\n};\n\nexport type CustomStateProps = BaseStateProps;\n\nconst CustomState = (props: PropsWithChildren<CustomStateProps>) => {\n    const {\n        icon,\n        icons = [],\n        image,\n        headline,\n        message,\n        buttons = [],\n        alignment = 'center',\n        fullWidth = false,\n        condensed = false,\n        outerClassName = '',\n        innerClassName = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const wrapperClasses = classNames(\n        'margin-0',\n        'width-100pct',\n        !fullWidth && 'max-width-600',\n        'panel-default',\n        'panel',\n        !hasPaddingClass(outerClassName) ? (condensed ? 'padding-10' : 'padding-15') : '',\n        outerClassName\n    );\n\n    const innerClassNames = classNames(\n        'display-flex',\n        'flex-column',\n        'align-items-center',\n        'text-center',\n        !hasPaddingClass(innerClassName) ? (condensed ? 'padding-15' : 'padding-25') : '',\n        innerClassName\n    );\n\n    const iconClasses = classNames(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20');\n\n    const iconsClasses = classNames(\n        condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20',\n        'display-flex',\n        'align-items-center',\n        'max-width-100pct'\n    );\n\n    const headlineClassNames = classNames(\n        condensed ? 'text-size-h4' : 'text-size-h3 text-size-h2-xl',\n        'line-height-125rel',\n        'text-color-dark',\n        'text-medium',\n        'width-500',\n        'max-width-100pct',\n        'text-wrap-balance'\n    );\n\n    const renderIcon = (\n        <>\n            {icon && (\n                <div className={iconClasses}>\n                    <StateIcon name={icon} />\n                </div>\n            )}\n        </>\n    );\n\n    const renderIcons = (\n        <div className={iconsClasses}>\n            {icons.map((iconProps, index) => (\n                <StateIcon key={index} {...iconProps} />\n            ))}\n        </div>\n    );\n\n    const renderChildren = <div className='width-500 max-width-100pct margin-top-25'>{children}</div>;\n\n    const renderHeadline = <div className={headlineClassNames}>{headline}</div>;\n\n    const renderMessage = (\n        <div className='text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance'>{message}</div>\n    );\n\n    const singleOrMultiIcon = isEmpty(icons) ? renderIcon : renderIcons;\n\n    const imageOrIcon = image ? image : singleOrMultiIcon;\n\n    return (\n        <div className={`display-flex ${justify[alignment]} max-width-100pct`} {...remainingProps}>\n            <div className={wrapperClasses}>\n                <div className={innerClassNames}>\n                    {imageOrIcon}\n                    {headline && renderHeadline}\n                    {message && renderMessage}\n                    {renderButtons(buttons)}\n                    {children && renderChildren}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default CustomState;\n"],"names":["justify","renderButtons","buttons","isEmpty","jsx","StateButton","buttonProps","index","jsxs","Fragment","CustomState","props","icon","icons","image","headline","message","alignment","fullWidth","condensed","outerClassName","innerClassName","children","remainingProps","wrapperClasses","classNames","hasPaddingClass","innerClassNames","iconClasses","iconsClasses","headlineClassNames","renderIcon","StateIcon","renderIcons","iconProps","renderChildren","renderHeadline","renderMessage","singleOrMultiIcon","imageOrIcon"],"mappings":"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"}

package/components/svgImage/svgConverter.js.map

@@ -1 +1 @@
-{"version":3,"file":"svgConverter.js","sources":["../../../src/components/svgImage/svgConverter.tsx"],"sourcesContent":["// Define the color replacements - handle hex colors and fallbacks\n// const svgColorReplacement: Record<string, string> = {\n//     'rgb(255, 255, 255)': 'var(--color-white)',\n//     '#fff': 'var(--color-white)',\n//     '#ffffff': 'var(--color-white)',\n\n//     // Main stroke color\n//     'rgb(75, 128, 166)': 'var(--brand-info)',\n//     '#4b80a6': 'var(--brand-info)',\n\n//     // Main fill color\n//     'rgb(207, 240, 243)': 'var(--color-highlight-lighter)',\n//     '#cff0f3': 'var(--color-highlight-lighter)',\n\n//     // Gray elements color\n//     'rgb(188, 192, 196)': 'var(--gray-dark)',\n//     '#bcc0c4': 'var(--gray-dark)',\n\n//     // Light background fill color\n//     'rgb(233, 235, 236)': 'var(--gray-lighter)',\n//     '#e9ebec': 'var(--gray-lighter)',\n// };\n\nexport type CSSColorVar =\n    | 'color-white'\n    | 'color-black'\n    | 'always-color-white'\n    | 'always-color-black'\n    | 'gray-darkest'\n    | 'gray-darker'\n    | 'gray-dark'\n    | 'gray'\n    | 'gray-light'\n    | 'gray-lighter'\n    | 'gray-lightest'\n    | 'gray-decent'\n    | 'brand-primary'\n    | 'brand-secondary'\n    | 'brand-primary-decent'\n    | 'brand-secondary-decent'\n    | 'brand-info'\n    | 'brand-success'\n    | 'brand-warning'\n    | 'brand-danger'\n    | 'brand-info-decent'\n    | 'brand-success-decent'\n    | 'brand-warning-decent'\n    | 'brand-danger-decent'\n    | 'color-code'\n    | 'color-status-available'\n    | 'color-status-driving'\n    | 'color-status-resting'\n    | 'color-status-working'\n    | 'color-map-marker-asset'\n    | 'color-map-marker-poi'\n    | 'color-map-marker-geofence'\n    | 'color-map-marker-route'\n    | 'color-map-marker-info'\n    | 'color-map-marker-success'\n    | 'color-map-marker-warning'\n    | 'color-map-marker-danger'\n    | 'color-map-marker-restrictions'\n    | 'color-map-marker-text'\n    | 'color-map-marker-active'\n    | 'color-highlight-darkest'\n    | 'color-highlight-darker'\n    | 'color-highlight-dark'\n    | 'color-highlight'\n    | 'color-highlight-light'\n    | 'color-highlight-lighter'\n    | 'color-highlight-lightest'\n    | 'color-highlight-decent'\n    | 'color-rating-1'\n    | 'color-rating-2'\n    | 'color-rating-3'\n    | 'color-rating-4'\n    | 'color-rating-5'\n    | 'color-coldplay-wine'\n    | 'color-coldplay-aubergine'\n    | 'color-coldplay-kashmir'\n    | 'color-coldplay-fountain'\n    | 'color-coldplay-turquoise'\n    | 'color-coldplay-bermuda'\n    | 'color-coldplay-moos'\n    | 'color-coldplay-primrose'\n    | 'color-coldplay-khaki'\n    | 'color-warmup-crimson'\n    | 'color-warmup-victoria'\n    | 'color-warmup-cadillac'\n    | 'color-warmup-raspberry'\n    | 'color-warmup-cerise'\n    | 'color-warmup-charm'\n    | 'color-warmup-salmon'\n    | 'color-warmup-cherokee'\n    | 'color-warmup-corn'\n    | 'color-spectrum-indigo'\n    | 'color-spectrum-violet'\n    | 'color-spectrum-purple'\n    | 'color-spectrum-fuchsia'\n    | 'color-spectrum-pink'\n    | 'color-spectrum-rose';\n\nexport type ColorOverridesMap = {\n    mainStrokeColor?: CSSColorVar;\n    mainFillColor?: CSSColorVar;\n    secondaryStrokeColor?: CSSColorVar;\n    backgroundFillColor?: CSSColorVar;\n};\n\nexport const defaultColorMap: ColorOverridesMap = {\n    mainStrokeColor: 'brand-info',\n    mainFillColor: 'color-highlight-lighter',\n    secondaryStrokeColor: 'gray',\n    backgroundFillColor: 'gray-lighter',\n};\n\n// Utility function to normalize RGB values (removes spaces, converts case)\nconst normalizeColor = (color: string) => color.replace(/\\s+/g, '').toLowerCase();\n\ntype StyleObject = Record<string, string>;\n\nexport const parseStyleString = (style: string): StyleObject => {\n    return style.split(';').reduce((acc, rule) => {\n        const [key, value] = rule.split(':').map(s => s.trim());\n        if (key && value) {\n            acc[camelCase(key)] = value;\n        }\n        return acc;\n    }, {} as StyleObject);\n};\n\nexport const camelCase = (str: string): string => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());\n\nconst REACT_ATTRIBUTE_MAP: Record<string, string> = {\n    'xml:space': 'xmlSpace',\n    'xmlns:xlink': 'xmlnsXlink',\n    'stroke-width': 'strokeWidth',\n    'fill-opacity': 'fillOpacity',\n    'stroke-opacity': 'strokeOpacity',\n    'clip-path': 'clipPath',\n};\n\ntype ConvertedAttributes = {\n    style?: React.CSSProperties;\n    [key: string]: string | React.CSSProperties | undefined;\n};\n\nexport const convertAttributes = (node: Element, colorOverrides: ColorOverridesMap) => {\n    const attributes: ConvertedAttributes = {};\n\n    const attrs = node.attributes;\n\n    // Create a dynamic color map based on the overrides\n    const colorMap = {\n        // Main fill color\n        'rgb(207, 240, 243)': `var(--${colorOverrides.mainFillColor || defaultColorMap.mainFillColor})`,\n        '#cff0f3': `var(--${colorOverrides.mainFillColor || defaultColorMap.mainFillColor})`,\n\n        // Main stroke color\n        'rgb(75, 128, 166)': `var(--${colorOverrides.mainStrokeColor || defaultColorMap.mainStrokeColor})`,\n        '#4b80a6': `var(--${colorOverrides.mainStrokeColor || defaultColorMap.mainStrokeColor})`,\n\n        // Secondary stroke color (gray elements)\n        'rgb(188, 192, 196)': `var(--${colorOverrides.secondaryStrokeColor || defaultColorMap.secondaryStrokeColor})`,\n        '#bcc0c4': `var(--${colorOverrides.secondaryStrokeColor || defaultColorMap.secondaryStrokeColor})`,\n\n        // Background fill color\n        'rgb(233, 235, 236)': `var(--${colorOverrides.backgroundFillColor || defaultColorMap.backgroundFillColor})`,\n        '#e9ebec': `var(--${colorOverrides.backgroundFillColor || defaultColorMap.backgroundFillColor})`,\n\n        // Static colors that don't change\n        'rgb(255, 255, 255)': 'var(--color-white)',\n        '#fff': 'var(--color-white)',\n        '#ffffff': 'var(--color-white)',\n    };\n\n    for (const attr of attrs) {\n        const attrName = REACT_ATTRIBUTE_MAP[attr.name] || attr.name;\n        let value = attr.value;\n\n        if (attrName === 'style') {\n            const parsedStyle = parseStyleString(value);\n\n            if (parsedStyle.fill) {\n                const normalizedFill = normalizeColor(parsedStyle.fill);\n                parsedStyle.fill = colorMap[normalizedFill as keyof typeof colorMap] || parsedStyle.fill;\n            }\n\n            if (parsedStyle.stroke) {\n                const normalizedStroke = normalizeColor(parsedStyle.stroke);\n                parsedStyle.stroke = colorMap[normalizedStroke as keyof typeof colorMap] || parsedStyle.stroke;\n            }\n\n            attributes.style = parsedStyle;\n        } else {\n            if (attrName === 'fill' || attrName === 'stroke') {\n                const normalizedColor = normalizeColor(value);\n                value = colorMap[normalizedColor as keyof typeof colorMap] || value;\n            }\n\n            attributes[attrName] = value;\n        }\n    }\n\n    return attributes;\n};\n"],"names":["defaultColorMap","normalizeColor","color","parseStyleString","style","acc","rule","key","value","s","camelCase","str","_","letter","REACT_ATTRIBUTE_MAP","convertAttributes","node","colorOverrides","attributes","attrs","colorMap","attr","attrName","parsedStyle","normalizedFill","normalizedStroke","normalizedColor"],"mappings":"AA6GO,MAAMA,IAAqC;AAAA,EAC9C,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,qBAAqB;AACzB,GAGMC,IAAiB,CAACC,MAAkBA,EAAM,QAAQ,QAAQ,EAAE,EAAE,YAAA,GAIvDC,IAAmB,CAACC,MACtBA,EAAM,MAAM,GAAG,EAAE,OAAO,CAACC,GAAKC,MAAS;AAC1C,QAAM,CAACC,GAAKC,CAAK,IAAIF,EAAK,MAAM,GAAG,EAAE,IAAI,CAAAG,MAAKA,EAAE,KAAA,CAAM;AACtD,SAAIF,KAAOC,MACPH,EAAIK,EAAUH,CAAG,CAAC,IAAIC,IAEnBH;AACX,GAAG,CAAA,CAAiB,GAGXK,IAAY,CAACC,MAAwBA,EAAI,QAAQ,aAAa,CAACC,GAAGC,MAAWA,EAAO,YAAA,CAAa,GAExGC,IAA8C;AAAA,EAChD,aAAa;AAAA,EACb,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,aAAa;AACjB,GAOaC,IAAoB,CAACC,GAAeC,MAAsC;AACnF,QAAMC,IAAkC,CAAA,GAElCC,IAAQH,EAAK,YAGbI,IAAW;AAAA;AAAA,IAEb,sBAAsB,SAASH,EAAe,iBAAiBjB,EAAgB,aAAa;AAAA,IAC5F,WAAW,SAASiB,EAAe,iBAAiBjB,EAAgB,aAAa;AAAA;AAAA,IAGjF,qBAAqB,SAASiB,EAAe,mBAAmBjB,EAAgB,eAAe;AAAA,IAC/F,WAAW,SAASiB,EAAe,mBAAmBjB,EAAgB,eAAe;AAAA;AAAA,IAGrF,sBAAsB,SAASiB,EAAe,wBAAwBjB,EAAgB,oBAAoB;AAAA,IAC1G,WAAW,SAASiB,EAAe,wBAAwBjB,EAAgB,oBAAoB;AAAA;AAAA,IAG/F,sBAAsB,SAASiB,EAAe,uBAAuBjB,EAAgB,mBAAmB;AAAA,IACxG,WAAW,SAASiB,EAAe,uBAAuBjB,EAAgB,mBAAmB;AAAA;AAAA,IAG7F,sBAAsB;AAAA,IACtB,QAAQ;AAAA,IACR,WAAW;AAAA,EAAA;AAGf,aAAWqB,KAAQF,GAAO;AACtB,UAAMG,IAAWR,EAAoBO,EAAK,IAAI,KAAKA,EAAK;AACxD,QAAIb,IAAQa,EAAK;AAEjB,QAAIC,MAAa,SAAS;AACtB,YAAMC,IAAcpB,EAAiBK,CAAK;AAE1C,UAAIe,EAAY,MAAM;AAClB,cAAMC,IAAiBvB,EAAesB,EAAY,IAAI;AACtD,QAAAA,EAAY,OAAOH,EAASI,CAAuC,KAAKD,EAAY;AAAA,MACxF;AAEA,UAAIA,EAAY,QAAQ;AACpB,cAAME,IAAmBxB,EAAesB,EAAY,MAAM;AAC1D,QAAAA,EAAY,SAASH,EAASK,CAAyC,KAAKF,EAAY;AAAA,MAC5F;AAEA,MAAAL,EAAW,QAAQK;AAAA,IACvB,OAAO;AACH,UAAID,MAAa,UAAUA,MAAa,UAAU;AAC9C,cAAMI,IAAkBzB,EAAeO,CAAK;AAC5C,QAAAA,IAAQY,EAASM,CAAwC,KAAKlB;AAAA,MAClE;AAEA,MAAAU,EAAWI,CAAQ,IAAId;AAAA,IAC3B;AAAA,EACJ;AAEA,SAAOU;AACX;"}
+{"version":3,"file":"svgConverter.js","sources":["../../../src/components/svgImage/svgConverter.tsx"],"sourcesContent":["// Define the color replacements - handle hex colors and fallbacks\n// const svgColorReplacement: Record<string, string> = {\n//     'rgb(255, 255, 255)': 'var(--color-white)',\n//     '#fff': 'var(--color-white)',\n//     '#ffffff': 'var(--color-white)',\n\n//     // Main stroke color\n//     'rgb(75, 128, 166)': 'var(--brand-info)',\n//     '#4b80a6': 'var(--brand-info)',\n\n//     // Main fill color\n//     'rgb(207, 240, 243)': 'var(--color-highlight-lighter)',\n//     '#cff0f3': 'var(--color-highlight-lighter)',\n\n//     // Gray elements color\n//     'rgb(188, 192, 196)': 'var(--gray-dark)',\n//     '#bcc0c4': 'var(--gray-dark)',\n\n//     // Light background fill color\n//     'rgb(233, 235, 236)': 'var(--gray-lighter)',\n//     '#e9ebec': 'var(--gray-lighter)',\n// };\n\nexport type CSSColorVar =\n    | 'color-white'\n    | 'color-black'\n    | 'always-color-white'\n    | 'always-color-black'\n    | 'gray-darkest'\n    | 'gray-darker'\n    | 'gray-dark'\n    | 'gray'\n    | 'gray-light'\n    | 'gray-lighter'\n    | 'gray-lightest'\n    | 'gray-decent'\n    | 'brand-primary'\n    | 'brand-secondary'\n    | 'brand-primary-decent'\n    | 'brand-secondary-decent'\n    | 'brand-info'\n    | 'brand-success'\n    | 'brand-warning'\n    | 'brand-danger'\n    | 'brand-info-decent'\n    | 'brand-success-decent'\n    | 'brand-warning-decent'\n    | 'brand-danger-decent'\n    | 'color-code'\n    | 'color-status-available'\n    | 'color-status-driving'\n    | 'color-status-resting'\n    | 'color-status-working'\n    | 'color-map-marker-asset'\n    | 'color-map-marker-poi'\n    | 'color-map-marker-geofence'\n    | 'color-map-marker-route'\n    | 'color-map-marker-info'\n    | 'color-map-marker-success'\n    | 'color-map-marker-warning'\n    | 'color-map-marker-danger'\n    | 'color-map-marker-restrictions'\n    | 'color-map-marker-text'\n    | 'color-map-marker-active'\n    | 'color-highlight-darkest'\n    | 'color-highlight-darker'\n    | 'color-highlight-dark'\n    | 'color-highlight'\n    | 'color-highlight-light'\n    | 'color-highlight-lighter'\n    | 'color-highlight-lightest'\n    | 'color-highlight-decent'\n    | 'color-rating-1'\n    | 'color-rating-2'\n    | 'color-rating-3'\n    | 'color-rating-4'\n    | 'color-rating-5'\n    | 'color-coldplay-wine'\n    | 'color-coldplay-aubergine'\n    | 'color-coldplay-kashmir'\n    | 'color-coldplay-fountain'\n    | 'color-coldplay-turquoise'\n    | 'color-coldplay-bermuda'\n    | 'color-coldplay-moos'\n    | 'color-coldplay-primrose'\n    | 'color-coldplay-khaki'\n    | 'color-warmup-crimson'\n    | 'color-warmup-victoria'\n    | 'color-warmup-cadillac'\n    | 'color-warmup-raspberry'\n    | 'color-warmup-cerise'\n    | 'color-warmup-charm'\n    | 'color-warmup-salmon'\n    | 'color-warmup-cherokee'\n    | 'color-warmup-corn'\n    | 'color-spectrum-indigo'\n    | 'color-spectrum-violet'\n    | 'color-spectrum-purple'\n    | 'color-spectrum-fuchsia'\n    | 'color-spectrum-pink'\n    | 'color-spectrum-rose';\n\nexport type ColorOverridesMap = {\n    mainStrokeColor?: CSSColorVar;\n    mainFillColor?: CSSColorVar;\n    secondaryStrokeColor?: CSSColorVar;\n    backgroundFillColor?: CSSColorVar;\n};\n\nexport const defaultColorMap: ColorOverridesMap = {\n    mainStrokeColor: 'brand-info',\n    mainFillColor: 'color-highlight-lighter',\n    secondaryStrokeColor: 'gray',\n    backgroundFillColor: 'gray-lighter',\n};\n\n// Utility function to normalize RGB values (removes spaces, converts case)\nconst normalizeColor = (color: string) => color.replace(/\\s+/g, '').toLowerCase();\n\ntype StyleObject = Record<string, string>;\n\nexport const parseStyleString = (style: string): StyleObject =>\n    style.split(';').reduce((acc, rule) => {\n        const [key, value] = rule.split(':').map(s => s.trim());\n        if (key && value) {\n            acc[camelCase(key)] = value;\n        }\n        return acc;\n    }, {} as StyleObject);\n\nexport const camelCase = (str: string): string => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());\n\nconst REACT_ATTRIBUTE_MAP: Record<string, string> = {\n    'xml:space': 'xmlSpace',\n    'xmlns:xlink': 'xmlnsXlink',\n    'stroke-width': 'strokeWidth',\n    'fill-opacity': 'fillOpacity',\n    'stroke-opacity': 'strokeOpacity',\n    'clip-path': 'clipPath',\n};\n\ntype ConvertedAttributes = {\n    style?: React.CSSProperties;\n    [key: string]: string | React.CSSProperties | undefined;\n};\n\nexport const convertAttributes = (node: Element, colorOverrides: ColorOverridesMap) => {\n    const attributes: ConvertedAttributes = {};\n\n    const attrs = node.attributes;\n\n    // Create a dynamic color map based on the overrides\n    const colorMap = {\n        // Main fill color\n        'rgb(207, 240, 243)': `var(--${colorOverrides.mainFillColor || defaultColorMap.mainFillColor})`,\n        '#cff0f3': `var(--${colorOverrides.mainFillColor || defaultColorMap.mainFillColor})`,\n\n        // Main stroke color\n        'rgb(75, 128, 166)': `var(--${colorOverrides.mainStrokeColor || defaultColorMap.mainStrokeColor})`,\n        '#4b80a6': `var(--${colorOverrides.mainStrokeColor || defaultColorMap.mainStrokeColor})`,\n\n        // Secondary stroke color (gray elements)\n        'rgb(188, 192, 196)': `var(--${colorOverrides.secondaryStrokeColor || defaultColorMap.secondaryStrokeColor})`,\n        '#bcc0c4': `var(--${colorOverrides.secondaryStrokeColor || defaultColorMap.secondaryStrokeColor})`,\n\n        // Background fill color\n        'rgb(233, 235, 236)': `var(--${colorOverrides.backgroundFillColor || defaultColorMap.backgroundFillColor})`,\n        '#e9ebec': `var(--${colorOverrides.backgroundFillColor || defaultColorMap.backgroundFillColor})`,\n\n        // Static colors that don't change\n        'rgb(255, 255, 255)': 'var(--color-white)',\n        '#fff': 'var(--color-white)',\n        '#ffffff': 'var(--color-white)',\n    };\n\n    for (const attr of attrs) {\n        const attrName = REACT_ATTRIBUTE_MAP[attr.name] || attr.name;\n        let value = attr.value;\n\n        if (attrName === 'style') {\n            const parsedStyle = parseStyleString(value);\n\n            if (parsedStyle.fill) {\n                const normalizedFill = normalizeColor(parsedStyle.fill);\n                parsedStyle.fill = colorMap[normalizedFill as keyof typeof colorMap] || parsedStyle.fill;\n            }\n\n            if (parsedStyle.stroke) {\n                const normalizedStroke = normalizeColor(parsedStyle.stroke);\n                parsedStyle.stroke = colorMap[normalizedStroke as keyof typeof colorMap] || parsedStyle.stroke;\n            }\n\n            attributes.style = parsedStyle;\n        } else {\n            if (attrName === 'fill' || attrName === 'stroke') {\n                const normalizedColor = normalizeColor(value);\n                value = colorMap[normalizedColor as keyof typeof colorMap] || value;\n            }\n\n            attributes[attrName] = value;\n        }\n    }\n\n    return attributes;\n};\n"],"names":["defaultColorMap","normalizeColor","color","parseStyleString","style","acc","rule","key","value","s","camelCase","str","_","letter","REACT_ATTRIBUTE_MAP","convertAttributes","node","colorOverrides","attributes","attrs","colorMap","attr","attrName","parsedStyle","normalizedFill","normalizedStroke","normalizedColor"],"mappings":"AA6GO,MAAMA,IAAqC;AAAA,EAC9C,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,qBAAqB;AACzB,GAGMC,IAAiB,CAACC,MAAkBA,EAAM,QAAQ,QAAQ,EAAE,EAAE,YAAA,GAIvDC,IAAmB,CAACC,MAC7BA,EAAM,MAAM,GAAG,EAAE,OAAO,CAACC,GAAKC,MAAS;AACnC,QAAM,CAACC,GAAKC,CAAK,IAAIF,EAAK,MAAM,GAAG,EAAE,IAAI,CAAAG,MAAKA,EAAE,KAAA,CAAM;AACtD,SAAIF,KAAOC,MACPH,EAAIK,EAAUH,CAAG,CAAC,IAAIC,IAEnBH;AACX,GAAG,CAAA,CAAiB,GAEXK,IAAY,CAACC,MAAwBA,EAAI,QAAQ,aAAa,CAACC,GAAGC,MAAWA,EAAO,YAAA,CAAa,GAExGC,IAA8C;AAAA,EAChD,aAAa;AAAA,EACb,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,aAAa;AACjB,GAOaC,IAAoB,CAACC,GAAeC,MAAsC;AACnF,QAAMC,IAAkC,CAAA,GAElCC,IAAQH,EAAK,YAGbI,IAAW;AAAA;AAAA,IAEb,sBAAsB,SAASH,EAAe,iBAAiBjB,EAAgB,aAAa;AAAA,IAC5F,WAAW,SAASiB,EAAe,iBAAiBjB,EAAgB,aAAa;AAAA;AAAA,IAGjF,qBAAqB,SAASiB,EAAe,mBAAmBjB,EAAgB,eAAe;AAAA,IAC/F,WAAW,SAASiB,EAAe,mBAAmBjB,EAAgB,eAAe;AAAA;AAAA,IAGrF,sBAAsB,SAASiB,EAAe,wBAAwBjB,EAAgB,oBAAoB;AAAA,IAC1G,WAAW,SAASiB,EAAe,wBAAwBjB,EAAgB,oBAAoB;AAAA;AAAA,IAG/F,sBAAsB,SAASiB,EAAe,uBAAuBjB,EAAgB,mBAAmB;AAAA,IACxG,WAAW,SAASiB,EAAe,uBAAuBjB,EAAgB,mBAAmB;AAAA;AAAA,IAG7F,sBAAsB;AAAA,IACtB,QAAQ;AAAA,IACR,WAAW;AAAA,EAAA;AAGf,aAAWqB,KAAQF,GAAO;AACtB,UAAMG,IAAWR,EAAoBO,EAAK,IAAI,KAAKA,EAAK;AACxD,QAAIb,IAAQa,EAAK;AAEjB,QAAIC,MAAa,SAAS;AACtB,YAAMC,IAAcpB,EAAiBK,CAAK;AAE1C,UAAIe,EAAY,MAAM;AAClB,cAAMC,IAAiBvB,EAAesB,EAAY,IAAI;AACtD,QAAAA,EAAY,OAAOH,EAASI,CAAuC,KAAKD,EAAY;AAAA,MACxF;AAEA,UAAIA,EAAY,QAAQ;AACpB,cAAME,IAAmBxB,EAAesB,EAAY,MAAM;AAC1D,QAAAA,EAAY,SAASH,EAASK,CAAyC,KAAKF,EAAY;AAAA,MAC5F;AAEA,MAAAL,EAAW,QAAQK;AAAA,IACvB,OAAO;AACH,UAAID,MAAa,UAAUA,MAAa,UAAU;AAC9C,cAAMI,IAAkBzB,EAAeO,CAAK;AAC5C,QAAAA,IAAQY,EAASM,CAAwC,KAAKlB;AAAA,MAClE;AAEA,MAAAU,EAAWI,CAAQ,IAAId;AAAA,IAC3B;AAAA,EACJ;AAEA,SAAOU;AACX;"}

package/components/table/Table.d.ts

@@ -0,0 +1,46 @@
+import { ReactElement, ReactNode, RefAttributes } from 'react';
+import { TableFooterProps } from './TableFooter';
+import { TableHeaderProps } from './TableHeader';
+import { TableProps, TableRowData } from './Table.types';
+export type { TableCellOverflow, TableCellClassName, TableCardsStyleSettings, TableColumnDefinition, TableExpandedRowAnimation, TableHorizontalAlign, TableProps, TableRowAnimationProps, TableRowId, TableRowClassName, TableStickyColumns, TableSortDirection, TableVerticalAlign, TableViewType, } from './Table.types';
+export { default as useTableSelection } from './selection/useTableSelection';
+export type { UseTableSelectionOptions, UseTableSelectionReturn } from './selection/useTableSelection';
+export declare const TableBody: import('react').ForwardRefExoticComponent<import('./Table.types').TableHtmlAttributes & {
+    children?: ReactNode;
+    maxHeight?: number | string;
+    onScrollBottom?: () => void;
+    scrollBottomOffset?: number;
+} & RefAttributes<import('./TableBody').TableBodyHandle>>;
+export type { TableBodyHandle, TableBodyProps } from './TableBody';
+export declare const TableHeader: <RowType extends TableRowData = TableRowData>(props: TableHeaderProps<RowType>) => import("react/jsx-runtime").JSX.Element | null;
+export type { TableHeaderProps } from './TableHeader';
+export declare const TableHeaderRow: ({ children }: import('./TableHeaderRow').TableHeaderRowProps) => import("react/jsx-runtime").JSX.Element | null;
+export type { TableHeaderRowProps } from './TableHeaderRow';
+export declare const TableHeaderColumn: <RowType extends TableRowData = TableRowData>(props: import('./TableHeaderColumn').TableHeaderColumnProps<RowType>) => import("react/jsx-runtime").JSX.Element | null;
+export type { TableHeaderColumnProps } from './TableHeaderColumn';
+export declare const TableFooter: (props: TableFooterProps) => import("react/jsx-runtime").JSX.Element | null;
+export type { TableFooterProps } from './TableFooter';
+export declare const TableColumn: (props: import('./TableColumn').TableColumnProps) => import("react/jsx-runtime").JSX.Element | null;
+export type { TableColumnProps } from './TableColumn';
+export declare const TableExpanderButton: (props: import('./TableExpanderButton').TableExpanderButtonProps) => import("react/jsx-runtime").JSX.Element;
+export type { TableExpanderButtonProps } from './TableExpanderButton';
+export declare const TableRow: <RowType extends TableRowData = TableRowData>(props: import('./TableRow').TableRowProps<RowType>) => import("react/jsx-runtime").JSX.Element | null;
+export type { TableRowProps } from './TableRow';
+export declare const TableSpacerRow: (props: import('./TableSpacerRow').TableSpacerRowProps) => import("react/jsx-runtime").JSX.Element | null;
+export type { TableSpacerRowProps } from './TableSpacerRow';
+export declare const TableExpandedRow: <RowType extends TableRowData = TableRowData>(props: import('./TableExpandedRow').TableExpandedRowProps<RowType>) => import("react/jsx-runtime").JSX.Element | null;
+export type { TableExpandedRowProps } from './TableExpandedRow';
+export declare const TableExpandedContentRow: (props: import('./TableExpandedContentRow').TableExpandedContentRowProps) => import("react/jsx-runtime").JSX.Element | null;
+export type { TableExpandedContentRowProps } from './TableExpandedContentRow';
+export declare const TableGroupRow: (props: import('./TableGroupRow').TableGroupRowProps) => import("react/jsx-runtime").JSX.Element | null;
+export type { TableGroupRowProps } from './TableGroupRow';
+export declare const TableGroupFooterRow: (props: import('./TableGroupFooterRow').TableGroupFooterRowProps) => import("react/jsx-runtime").JSX.Element | null;
+export type { TableGroupFooterRowProps } from './TableGroupFooterRow';
+export declare const TableBatchDropdown: ({ items, dropdownClassName, ...remainingProps }: import('./Table').TableBatchDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableColumnFilter: (props: import('./Table').TableColumnFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableColumnsDropdown: (props: import('./Table').TableColumnsDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export type { TableBatchDropdownProps } from './render/header/TableBatchDropdown';
+export type { TableColumnFilterProps } from './render/header/TableColumnFilter';
+export type { TableColumnsDropdownItem, TableColumnsDropdownProps } from './settings/TableColumnsDropdown';
+declare const Table: <RowType extends TableRowData>(props: TableProps<RowType> & RefAttributes<HTMLDivElement>) => ReactElement;
+export default Table;