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

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,267 @@
+import { HTMLAttributes, MouseEvent as ReactMouseEvent, ReactElement, ReactNode, RefAttributes } from 'react';
+import { MotionProps } from 'motion/react';
+import { TableCardsStyleSettings } from './TableCard';
+import { TableCellClassName, TableColumnDefinition, TableRowId, TableRowClassName, TableSortDirection, TableViewType } from './Table.types';
+export type { TableCellOverflow, TableCellClassName, TableColumnDefinition, TableHorizontalAlign, TableParsedCell, TableParsedCells, TableParsedFooter, TableParsedHeaderColumn, TableParsedRow, TableRowId, TableRowClassName, TableSortDirection, TableStyle, TableVerticalAlign, TableViewType, } from './Table.types';
+export type { TableCardsStyleSettings } from './TableCard';
+export { default as useTableSelection } from './selection/useTableSelection';
+export type { UseTableSelectionOptions, UseTableSelectionReturn } from './selection/useTableSelection';
+export type { TableDataViewRow, TableExpandedContentViewRow, TableExpandedDataViewRow, TableGroupFooterViewRow, TableGroupViewRow, TableViewHeader, TableViewHeaderColumn, TableSpacerViewRow, TableViewCell, TableViewColumn, TableViewFooter, TableViewModel, TableViewRow, } from './model/tableViewModel.types';
+export type TableColumn<RowType extends Record<string, unknown>> = TableColumnDefinition<RowType>;
+export type TableRowAnimationProps<RowType extends Record<string, unknown>> = MotionProps | ((row: RowType, rowIndex: number) => MotionProps);
+export type TableProps<RowType extends Record<string, unknown>> = Omit<HTMLAttributes<HTMLDivElement>, 'draggable' | 'onClick'> & {
+    /**
+     * Row key accessor for resolving a stable unique row id.
+     *
+     * This is recommended whenever rows have their own identifier such as `id`, `vehicleId`, or `uuid`, especially
+     * when using selection, active rows, expanded rows, or virtualization.
+     *
+     * If omitted, the row index is used as a fallback.
+     *
+     * @default row index
+     */
+    rowKey?: keyof RowType | ((row: RowType, rowIndex: number) => string | number);
+    /**
+     * Controls table or card rendering modes.
+     *
+     * @default 'TABLE'
+     */
+    viewType?: TableViewType;
+    /**
+     * Card width configuration for `MULTI_CARDS` view.
+     */
+    cardsStyle?: TableCardsStyleSettings;
+    /**
+     * Compact row/cell spacing like old `table-condensed`.
+     *
+     * @default false
+     */
+    condensed?: boolean;
+    /**
+     * Zebra rows like old `table-striped`.
+     *
+     * @default false
+     */
+    striped?: boolean;
+    /**
+     * Hover effect like old `table-hover`.
+     *
+     * @default false
+     */
+    hover?: boolean;
+    /**
+     * Apply table shadow.
+     *
+     * @default false
+     */
+    shadow?: boolean;
+    /**
+     * Simple outer border on table wrapper and card variants.
+     *
+     * @default true
+     */
+    border?: boolean;
+    /**
+     * Rounded table corners and card variants.
+     * Top corners are applied to header or body (if no header),
+     * bottom corners are applied to footer or body (if no footer).
+     *
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Show vertical and header row grid lines.
+     *
+     * @default false
+     */
+    gridLines?: boolean;
+    /**
+     * Optional classes for rows.
+     */
+    rowClassName?: TableRowClassName<RowType>;
+    /**
+     * Current active row key for detail context or external side panels.
+     */
+    activeRowId?: TableRowId;
+    /**
+     * Called when a row is activated or deactivated by row click.
+     */
+    onActiveRowChange?: (rowId: TableRowId | undefined, row: RowType, rowIndex: number) => void;
+    /**
+     * Optional motion props applied to data rows for enter, exit, and layout animations.
+     *
+     * Can be defined once for all rows or resolved per row.
+     * A stable `rowKey` is recommended so animations keep working predictably across inserts, removals, and reordering.
+     * Ignored when `virtualizedRows` is enabled.
+     */
+    rowAnimationProps?: TableRowAnimationProps<RowType>;
+    /**
+     * Currently selected row keys for multi-selection use cases.
+     */
+    selectedRowIds?: TableRowId[];
+    /**
+     * Called when checkbox selection changes.
+     */
+    onSelectionChange?: (rowIds: TableRowId[]) => void;
+    /**
+     * Render a selection checkbox column as the first column.
+     */
+    showSelectionColumn?: boolean;
+    /**
+     * Enables horizontal resizing on header columns except the last column.
+     *
+     * @default false
+     */
+    resizeableColumns?: boolean;
+    /**
+     * Enables horizontal drag-reordering for simple leaf header columns.
+     *
+     * @default false
+     */
+    draggableColumns?: boolean;
+    /**
+     * Controlled column order for drag-reordering.
+     * Keys not present in the current table columns are ignored.
+     */
+    columnOrder?: string[];
+    /**
+     * Called while a column is resized via the header handle.
+     *
+     * Pass `undefined` to clear a previously configured width.
+     */
+    onColumnResize?: (columnKey: string, width?: number) => void;
+    /**
+     * Called when drag-reordering produces a new column order.
+     */
+    onColumnOrderChange?: (columnOrder: string[]) => void;
+    /**
+     * Optional custom header content for the selection column.
+     * If omitted, the header renders the default select-all checkbox.
+     */
+    selectionHeaderContent?: ReactNode;
+    /**
+     * Current sorted column key.
+     */
+    sortBy?: string | string[];
+    /**
+     * Current sort direction for `sortBy`.
+     */
+    sortDirection?: TableSortDirection;
+    /**
+     * Called when a sortable header is clicked.
+     *
+     * Sorting itself remains controlled outside the table.
+     * The click event is passed through as an optional third argument for modifier-key scenarios such as shift-click.
+     */
+    onSortChange?: (columnKey: string, direction: TableSortDirection, event: ReactMouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional classes for each cell.
+     */
+    cellClassName?: TableCellClassName<RowType>;
+    /**
+     * Row click callback. Adds keyboard support and pointer cursor.
+     */
+    onRowClick?: (row: RowType, rowIndex: number) => void;
+    /**
+     * Fallback content when there are no rows.
+     *
+     * @default 'No data available'
+     */
+    noRowsState?: ReactNode;
+    /**
+     * Enables table-specific row virtualization for vertically scrolling table bodies.
+     *
+     * Virtualization is currently only active in `TABLE` view with `bodyMaxHeight`.
+     *
+     * @default false
+     */
+    virtualizedRows?: boolean;
+    /**
+     * Extra row count rendered above and below the visible area when virtualization is enabled.
+     *
+     * @default 5
+     */
+    virtualizationOverscan?: number;
+};
+/**
+ * Declarative body wrapper for use as child of `<Table>`.
+ */
+export declare const TableBody: (_props: import('./TableBody').TableBodyProps) => null;
+export type { TableBodyProps } from './TableBody';
+/**
+ * Declarative header definition for use as child of `<Table>`.
+ */
+export declare const TableHeader: <RowType extends Record<string, unknown> = Record<string, unknown>>(_props: import('./TableHeader').TableHeaderProps<RowType>) => null;
+export type { TableHeaderProps } from './TableHeader';
+/**
+ * Declarative header row for multi-row table headers.
+ */
+export declare const TableHeaderRow: (_props: import('./TableHeaderRow').TableHeaderRowProps) => null;
+export type { TableHeaderRowProps } from './TableHeaderRow';
+/**
+ * Declarative header column for multi-row table headers.
+ */
+export declare const TableHeaderColumn: <RowType extends Record<string, unknown> = Record<string, unknown>>(_props: import('./TableHeaderColumn').TableHeaderColumnProps<RowType>) => null;
+export type { TableHeaderColumnProps } from './TableHeaderColumn';
+/**
+ * Declarative footer for use as child of `<Table>`.
+ */
+export declare const TableFooter: (_props: import('./TableFooter').TableFooterProps) => null;
+export type { TableFooterProps } from './TableFooter';
+/**
+ * Declarative cell definition for use inside `<TableRow>`.
+ */
+export declare const TableColumn: (_props: import('./TableColumn').TableColumnProps) => null;
+export type { TableColumnProps } from './TableColumn';
+/**
+ * Table-specific button for toggling expandable row state.
+ */
+export declare const TableExpanderButton: (props: import('./TableExpanderButton').TableExpanderButtonProps) => import("react/jsx-runtime").JSX.Element;
+export type { TableExpanderButtonProps } from './TableExpanderButton';
+/**
+ * Declarative row definition for use as child of `<Table>`.
+ */
+export declare const TableRow: <RowType extends Record<string, unknown> = Record<string, unknown>>(_props: import('./TableRow').TableRowProps<RowType>) => null;
+export type { TableRowProps } from './TableRow';
+/**
+ * Declarative spacer row for separating table sections.
+ */
+export declare const TableSpacerRow: (_props: import('./TableSpacerRow').TableSpacerRowProps) => null;
+export type { TableSpacerRowProps } from './TableSpacerRow';
+/**
+ * Declarative expanded data row associated with a parent row.
+ */
+export declare const TableExpandedRow: <RowType extends Record<string, unknown> = Record<string, unknown>>(_props: import('./TableExpandedRow').TableExpandedRowProps<RowType>) => null;
+export type { TableExpandedRowProps } from './TableExpandedRow';
+/**
+ * Declarative full-width expanded content row associated with a parent row.
+ */
+export declare const TableExpandedContentRow: (_props: import('./TableExpandedContentRow').TableExpandedContentRowProps) => null;
+export type { TableExpandedContentRowProps } from './TableExpandedContentRow';
+/**
+ * Declarative sticky-capable group row for grouped table sections.
+ */
+export declare const TableGroupRow: (_props: import('./TableGroupRow').TableGroupRowProps) => null;
+export type { TableGroupRowProps } from './TableGroupRow';
+/**
+ * Declarative non-sticky group footer row for grouped table sections.
+ */
+export declare const TableGroupFooterRow: (_props: import('./TableGroupFooterRow').TableGroupFooterRowProps) => null;
+export type { TableGroupFooterRowProps } from './TableGroupFooterRow';
+/**
+ * Table-specific batch action dropdown for selection headers.
+ */
+export declare const TableBatchDropdown: ({ items }: import('./Table').TableBatchDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export type { TableBatchDropdownProps } from './render/header/TableBatchDropdown';
+/**
+ * Table-specific wrapper for custom column filter dropdowns.
+ */
+export declare const TableColumnFilter: (props: import('./Table').TableColumnFilterProps) => import("react/jsx-runtime").JSX.Element;
+export type { TableColumnFilterProps } from './render/header/TableColumnFilter';
+/**
+ * Table-specific dropdown for column visibility and ordering.
+ */
+export declare const TableColumnsDropdown: (props: import('./Table').TableColumnsDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export type { TableColumnsDropdownItem, TableColumnsDropdownProps } from './settings/TableColumnsDropdown';
+declare const Table: <RowType extends Record<string, unknown>>(props: TableProps<RowType> & RefAttributes<HTMLDivElement>) => ReactElement;
+export default Table;

package/components/table/Table.js

@@ -0,0 +1,233 @@
+import { jsx as a, jsxs as R, Fragment as x } from "react/jsx-runtime";
+import { forwardRef as xe, useState as Ae, useCallback as Fe } from "react";
+import Ne from "../smoothScrollbars/SmoothScrollbars.js";
+import De from "./TableBody.js";
+import Le from "./TableColumn.js";
+import Me from "./TableExpanderButton.js";
+import ke from "./TableExpandedContentRow.js";
+import Ie from "./TableExpandedRow.js";
+import Ke from "./TableFooter.js";
+import Ge from "./TableGroupFooterRow.js";
+import Oe from "./TableGroupRow.js";
+import Pe from "./TableHeader.js";
+import Ve from "./TableHeaderColumn.js";
+import We from "./TableHeaderRow.js";
+import je from "./TableRow.js";
+import Ue from "./TableSpacerRow.js";
+import { useDraggableColumns as qe } from "./layout/useDraggableColumns.js";
+import { useTableLayout as Je } from "./layout/useTableLayout.js";
+import { buildTableViewModel as Qe } from "./model/buildTableViewModel.js";
+import { resolveTableClassConfig as Xe, resolveTableBaseClassName as Ye } from "./model/resolveTableClassConfig.js";
+import { useResizableColumns as Ze } from "./layout/useResizableColumns.js";
+import { resolveBodyMaxHeight as _e, resolveHasBody as eo } from "./parse/parseBody.js";
+import { resolveColumns as oo } from "./parse/parseColumns.js";
+import { resolveFooter as lo } from "./parse/parseFooter.js";
+import { resolveHeaderColumns as ro, resolveHeaderClassName as ao } from "./parse/parseHeaders.js";
+import { resolveRows as so } from "./parse/parseRows.js";
+import to from "./render/body/TableBodySection.js";
+import no from "./render/footer/TableFooterSection.js";
+import io from "./render/header/TableBatchDropdown.js";
+import mo from "./render/header/TableColumnFilter.js";
+import co from "./render/header/TableHeaderSection.js";
+import bo from "./settings/TableColumnsDropdown.js";
+import uo from "../../hooks/useMergeRefs.js";
+const Jo = De, Qo = Pe, Xo = We, Yo = Ve, Zo = Ke, _o = Le, el = Me, ol = je, ll = Ue, rl = Ie, al = ke, sl = Oe, tl = Ge, nl = io, il = mo, dl = bo, ml = xe(
+  (A, F) => {
+    const {
+      children: l,
+      rowKey: N,
+      viewType: r = "TABLE",
+      cardsStyle: h,
+      condensed: D = !1,
+      striped: L = !1,
+      hover: M = !1,
+      shadow: k = !1,
+      border: I = !0,
+      rounded: K = !0,
+      gridLines: G = !1,
+      rowClassName: O,
+      activeRowId: P,
+      onActiveRowChange: v,
+      rowAnimationProps: V,
+      sortBy: W,
+      sortDirection: j,
+      onSortChange: U,
+      cellClassName: q,
+      onRowClick: g,
+      onSelectionChange: S,
+      selectedRowIds: y,
+      selectionHeaderContent: J,
+      resizeableColumns: B = !1,
+      draggableColumns: Q = !1,
+      columnOrder: X,
+      onColumnResize: Y,
+      onColumnOrderChange: Z,
+      showSelectionColumn: s = !1,
+      noRowsState: _ = "No data available",
+      virtualizedRows: t = !1,
+      virtualizationOverscan: ee = 5,
+      className: H,
+      style: oe,
+      ...le
+    } = A, [re, ae] = Ae(null), se = Fe((e) => {
+      ae(
+        ($) => $?.view === e?.view ? $ : e
+      );
+    }, []), { hasHover: te, isTableView: ne, styleClassSwitches: ie, cardClasses: de } = Xe({
+      viewType: r,
+      hover: M,
+      shadow: k,
+      border: I,
+      rounded: K,
+      className: H,
+      cardsStyle: h
+    }), u = oo(l), n = ro(l), me = ao(l), ce = n.length > 0 && n.every((e) => e.row === 1 && e.rowSpan === 1 && e.colSpan === 1), i = Q && r === "TABLE" && ce, { draggableColumnKeys: be, handleColumnDragEnd: ue, orderedColumns: pe } = qe({
+      columns: u,
+      columnOrder: X,
+      enabled: i,
+      onColumnOrderChange: Z
+    }), d = r === "TABLE" && (B || n.some((e) => e.resizeable === !0)), { handleColumnResizeReset: fe, handleColumnResizeStart: Ce, lastResizableColumnKey: we, resizedColumns: Te } = Ze({
+      columns: pe,
+      enabled: d,
+      onColumnResize: Y
+    }), Re = so(l, u), he = lo(l, u), m = _e(l), ve = eo(l), {
+      columnsWithAreas: ge,
+      handleBodyScroll: z,
+      tableUseOverflow: E,
+      tableWrapperRef: Se,
+      tableFooterRowRef: ye,
+      tableHeadRowRef: Be,
+      wrapperStyle: He
+    } = Je({
+      bodyMaxHeight: m,
+      cardsStyle: h,
+      columns: Te,
+      showSelectionColumn: s,
+      style: oe
+    }), ze = uo(Se, F), o = Qe({
+      columnsWithAreas: ge,
+      resolvedHeaderColumns: n,
+      resolvedRows: Re,
+      resolvedFooter: he,
+      rowKey: N,
+      rowClassName: O,
+      cellClassName: q,
+      activeRowId: P,
+      noRowsState: _,
+      isClickable: typeof g == "function" || typeof v == "function",
+      isTableView: ne,
+      selectedRowIds: y,
+      sortBy: W,
+      sortDirection: j,
+      cardClasses: de
+    }), c = o.rows.flatMap((e) => e.kind === "data" && !e.disabled ? [e.key] : []), Ee = new Set(c), p = (y ?? []).filter((e) => Ee.has(e)), f = c.length > 0 && c.every((e) => p.includes(e)), $e = p.length > 0 && !f, b = o.columns.length + (s ? 1 : 0), C = o.flags.hasHeader && o.header ? /* @__PURE__ */ a(
+      co,
+      {
+        header: o.header,
+        headerClassName: me,
+        lastResizableColumnKey: d ? we : void 0,
+        isAllSelected: f,
+        isSomeRowsSelected: $e,
+        onColumnResizeReset: d ? fe : void 0,
+        onColumnResizeStart: d ? Ce : void 0,
+        onToggleAllSelection: () => S?.(f ? [] : c),
+        selectionHeaderContent: J,
+        showSelectionColumn: s,
+        tableHeadRowRef: Be,
+        draggableColumnKeys: i ? be : void 0,
+        draggableColumns: i,
+        onColumnDragEnd: i ? ue : void 0,
+        onSortChange: U,
+        resizeableColumns: B
+      }
+    ) : null, w = ve ? /* @__PURE__ */ a(
+      to,
+      {
+        onActiveRowChange: v,
+        onSelectionChange: S,
+        columnCount: b,
+        scrollContainer: t ? re : void 0,
+        rowAnimationProps: t ? void 0 : V,
+        selectedRowIds: p,
+        showSelectionColumn: s,
+        virtualizedRows: t && !!m && r === "TABLE",
+        virtualizationOverscan: ee,
+        viewModel: o,
+        onRowClick: g
+      }
+    ) : null, T = o.flags.isTableView && o.flags.hasFooter && o.footer ? /* @__PURE__ */ a(
+      no,
+      {
+        columnCount: b,
+        footer: o.footer,
+        showSelectionColumn: s,
+        tableFooterRowRef: ye
+      }
+    ) : null;
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ...le,
+        className: Ye({
+          viewType: r,
+          condensed: D,
+          striped: L,
+          gridLines: G,
+          className: H,
+          tableUseOverflow: E,
+          flags: o.flags,
+          hasHover: te,
+          styleClassSwitches: ie
+        }),
+        ref: ze,
+        role: "table",
+        "aria-colcount": b > 0 ? b : void 0,
+        style: He,
+        children: m && r === "TABLE" ? /* @__PURE__ */ R(x, { children: [
+          C,
+          /* @__PURE__ */ a(
+            Ne,
+            {
+              className: "table-body-scroll-wrapper",
+              autoHeight: !0,
+              autoHeightMax: m,
+              onScroll: z,
+              ref: t ? se : void 0,
+              role: "presentation",
+              children: w
+            }
+          ),
+          T
+        ] }) : E && r === "TABLE" ? /* @__PURE__ */ a("div", { className: "overflow-x-auto", onScroll: z, role: "presentation", children: /* @__PURE__ */ R("div", { className: "table-scroll-content", role: "presentation", children: [
+          C,
+          w,
+          T
+        ] }) }) : /* @__PURE__ */ R(x, { children: [
+          C,
+          w,
+          T
+        ] })
+      }
+    );
+  }
+);
+export {
+  nl as TableBatchDropdown,
+  Jo as TableBody,
+  _o as TableColumn,
+  il as TableColumnFilter,
+  dl as TableColumnsDropdown,
+  al as TableExpandedContentRow,
+  rl as TableExpandedRow,
+  el as TableExpanderButton,
+  Zo as TableFooter,
+  tl as TableGroupFooterRow,
+  sl as TableGroupRow,
+  Qo as TableHeader,
+  Yo as TableHeaderColumn,
+  Xo as TableHeaderRow,
+  ol as TableRow,
+  ll as TableSpacerRow,
+  ml as default
+};
+//# sourceMappingURL=Table.js.map