@rio-cloud/rio-uikit 2.5.0 → 3.0.0-beta.1

package/components/applicationLayout/ApplicationLayoutBody.js

@@ -1,65 +1,57 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import I, { forwardRef as O, useState as x, useRef as h, useImperativeHandle as _, useEffect as T } from "react";
-import { debounce as k } from "es-toolkit/compat";
-import a from "../../utils/classNames.js";
-import F from "../smoothScrollbars/SmoothScrollbars.js";
-const P = 200, j = 54, Z = O((y, g) => {
-  const {
-    className: N,
-    innerClassName: i,
-    forceScrollbar: b = !0,
-    enableScrollToTop: B = !0,
-    banner: p,
-    navigation: m,
-    bottomBar: e,
-    bottomBarHeight: u = j,
-    scrollResetTrigger: S,
-    children: H,
-    ...L
-  } = y, [R, s] = x(0), o = h(null), r = h(null);
-  _(g, () => r?.current, []), T(() => {
-    o.current && (o.current.scrollTop(0), s(0));
-  }, [S]), T(() => {
-    r.current?.parentNode instanceof HTMLElement && (e ? r.current.parentNode.style.setProperty(
-      "--ApplicationLayoutBodyBottomBarHeight",
-      `${u}px`
-    ) : r.current.parentNode.style.removeProperty("--ApplicationLayoutBodyBottomBarHeight"));
-  }, [e, u]);
-  const E = k(() => {
-    o.current && s(o.current.getScrollTop());
-  }, P), d = () => {
-    if (!o.current)
-      return;
-    const l = o.current.container, f = l.firstElementChild, n = f?.scrollTop ?? 0;
-    n > 10 ? (window.requestAnimationFrame(d), f?.scrollTo(0, n - n / 5), l.classList.add("is-scrolling-to-top"), s(n)) : l.classList.remove("is-scrolling-to-top");
-  }, v = a("ApplicationLayoutBody", e ? "has-footer" : "", N), w = a(
-    "module-content",
-    i && i
-  ), A = window.innerHeight * 0.1, C = a("scroll-to-top", R > A && "in");
-  return /* @__PURE__ */ c(I.Fragment, { children: [
-    /* @__PURE__ */ c("div", { ...L, ref: r, className: v, children: [
-      /* @__PURE__ */ c("div", { className: "module-content-wrapper", children: [
-        m && m,
-        p && p,
-        /* @__PURE__ */ t(
-          F,
-          {
-            ref: o,
-            slideIn: !b,
-            largeTrack: !0,
-            trackOffset: !0,
-            className: w,
-            onScroll: E,
-            children: /* @__PURE__ */ t("div", { className: "scrollbar-content", children: H })
-          }
-        )
-      ] }),
-      B && /* @__PURE__ */ t("span", { className: C, children: /* @__PURE__ */ t("button", { type: "button", className: "btn btn-primary btn-icon-only", onClick: d, children: /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-arrow-up" }) }) })
-    ] }),
-    e && e
-  ] });
+import e from "../../utils/classNames.js";
+import t from "../smoothScrollbars/SmoothScrollbars.js";
+import n, { forwardRef as r, useEffect as i, useImperativeHandle as a, useRef as o, useState as s } from "react";
+import { debounce as c } from "es-toolkit/compat";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/applicationLayout/ApplicationLayoutBody.tsx
+var d = 200, f = 54, p = r((r, p) => {
+	let { className: m, innerClassName: h, forceScrollbar: g = !0, enableScrollToTop: _ = !0, banner: v, navigation: y, bottomBar: b, bottomBarHeight: x = f, scrollResetTrigger: S, children: C, ...w } = r, [T, E] = s(0), D = o(null), O = o(null);
+	a(p, () => O?.current, []), i(() => {
+		D.current && (D.current.scrollTop(0), E(0));
+	}, [S]), i(() => {
+		O.current?.parentNode instanceof HTMLElement && (b ? O.current.parentNode.style.setProperty("--ApplicationLayoutBodyBottomBarHeight", `${x}px`) : O.current.parentNode.style.removeProperty("--ApplicationLayoutBodyBottomBarHeight"));
+	}, [b, x]);
+	let k = c(() => {
+		D.current && E(D.current.getScrollTop());
+	}, d), A = () => {
+		if (!D.current) return;
+		let e = D.current.container, t = e.firstElementChild, n = t?.scrollTop ?? 0;
+		n > 10 ? (window.requestAnimationFrame(A), t?.scrollTo(0, n - n / 5), e.classList.add("is-scrolling-to-top"), E(n)) : e.classList.remove("is-scrolling-to-top");
+	}, j = e("ApplicationLayoutBody", b ? "has-footer" : "", m), M = e("module-content", h && h), N = e("scroll-to-top", T > window.innerHeight * .1 && "in");
+	return /* @__PURE__ */ u(n.Fragment, { children: [/* @__PURE__ */ u("div", {
+		...w,
+		ref: O,
+		className: j,
+		children: [/* @__PURE__ */ u("div", {
+			className: "module-content-wrapper",
+			children: [
+				y && y,
+				v && v,
+				/* @__PURE__ */ l(t, {
+					ref: D,
+					slideIn: !g,
+					largeTrack: !0,
+					trackOffset: !0,
+					className: M,
+					onScroll: k,
+					children: /* @__PURE__ */ l("div", {
+						className: "scrollbar-content",
+						children: C
+					})
+				})
+			]
+		}), _ && /* @__PURE__ */ l("span", {
+			className: N,
+			children: /* @__PURE__ */ l("button", {
+				type: "button",
+				className: "btn btn-primary btn-icon-only",
+				onClick: A,
+				children: /* @__PURE__ */ l("span", { className: "uikit-icon icon-arrow-up" })
+			})
+		})]
+	}), b && b] });
 });
-export {
-  Z as default
-};
-//# sourceMappingURL=ApplicationLayoutBody.js.map
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=ApplicationLayoutBody.js.map

package/components/applicationLayout/ApplicationLayoutBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationLayoutBody.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutBody.tsx"],"sourcesContent":["import React, {\n    useState,\n    useRef,\n    useEffect,\n    forwardRef,\n    useImperativeHandle,\n    type PropsWithChildren,\n    type ForwardedRef,\n} from 'react';\nimport { debounce } from 'es-toolkit/compat';\n\nimport type Scrollbars from 'react-custom-scrollbars-4';\n\nimport classNames from '../../utils/classNames';\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst RESIZE_THROTTLING = 200;\nconst DEFAULT_BOTTOM_BAR_HEIGHT = 54;\n\nexport type ApplicationLayoutBodyProps = {\n    /**\n     * Show scroll to top button after scrolling the content.\n     *\n     * @default true\n     */\n    enableScrollToTop?: boolean;\n\n    /**\n     * Always show vertical scrollbar to prevent the content from jumping.\n     *\n     * @default true\n     */\n    forceScrollbar?: boolean;\n\n    /**\n     * Prop to trigger scroll reset from outside. This comes in handy when changing the body content\n     * and to reset the scrolling like when the pathname changes from an body internal menu.\n     */\n    scrollResetTrigger?: any;\n\n    /**\n     * The ApplicationLayoutBodyBanner component.\n     */\n    banner?: React.ReactNode;\n\n    /**\n     * The `ApplicationLayoutBodyNavigation` component.\n     */\n    navigation?: React.ReactNode;\n\n    /**\n     * Optional bottom bar component or a simple string.\n     */\n    bottomBar?: React.ReactNode;\n\n    /**\n     * Height of the bottomBar in pixel.\n     *\n     * @default 54 when bottomBar is set\n     */\n    bottomBarHeight?: number;\n\n    /**\n     * Additional class names that are added to the inner module-content component.\n     */\n    innerClassName?: string;\n\n    /**\n     * Additional class names that are added to the respective component.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyProps>;\n\nconst ApplicationLayoutBody = forwardRef((props: Props, ref: Ref) => {\n    const {\n        className,\n        innerClassName,\n        forceScrollbar = true,\n        enableScrollToTop = true,\n        banner,\n        navigation,\n        bottomBar,\n        bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT,\n        scrollResetTrigger,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [offset, setOffset] = useState(0);\n    const moduleContentRef = useRef<Scrollbars>(null);\n    const layoutBodyRef = useRef<HTMLDivElement | null>(null);\n\n    // Use imperative handle to expose the internal layout ref. Usually this is used to\n    // expose internal function without exposing the underlying DOM element.\n    // In this case however, we want access to the element to trigger functions like scrollIntoView()\n    useImperativeHandle<HTMLDivElement, any>(ref, () => layoutBodyRef?.current, []);\n\n    // Reset scroll position when children are different. This fixes the issue of\n    // changing body content (like in another route) and still having the same scroll position\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n    useEffect(() => {\n        if (moduleContentRef.current) {\n            moduleContentRef.current.scrollTop(0);\n            setOffset(0);\n        }\n    }, [scrollResetTrigger]);\n\n    useEffect(() => {\n        if (layoutBodyRef.current?.parentNode instanceof HTMLElement) {\n            if (bottomBar) {\n                layoutBodyRef.current.parentNode.style.setProperty(\n                    '--ApplicationLayoutBodyBottomBarHeight',\n                    `${bottomBarHeight}px`\n                );\n            } else {\n                layoutBodyRef.current.parentNode.style.removeProperty('--ApplicationLayoutBodyBottomBarHeight');\n            }\n        }\n    }, [bottomBar, bottomBarHeight]);\n\n    const handleScroll = debounce(() => {\n        if (moduleContentRef.current) {\n            setOffset(moduleContentRef.current.getScrollTop());\n        }\n    }, RESIZE_THROTTLING);\n\n    const handleToTop = () => {\n        if (!moduleContentRef.current) {\n            return;\n        }\n\n        const scrollWrapper = moduleContentRef.current.container;\n        const scrollingElement = scrollWrapper.firstElementChild;\n        const currentScroll = scrollingElement?.scrollTop ?? 0;\n        const scrollThreshold = 10;\n\n        if (currentScroll > scrollThreshold) {\n            window.requestAnimationFrame(handleToTop);\n            scrollingElement?.scrollTo(0, currentScroll - currentScroll / 5);\n            scrollWrapper.classList.add('is-scrolling-to-top');\n            setOffset(currentScroll);\n        } else {\n            scrollWrapper.classList.remove('is-scrolling-to-top');\n        }\n    };\n\n    const classes = classNames('ApplicationLayoutBody', bottomBar ? 'has-footer' : '', className);\n\n    const innerClasses = classNames(\n        'module-content',\n\n        innerClassName && innerClassName\n    );\n\n    const offsetThreshold = window.innerHeight * 0.1;\n\n    const scrollToTopClasses = classNames('scroll-to-top', offset > offsetThreshold && 'in');\n\n    return (\n        <React.Fragment>\n            <div {...remainingProps} ref={layoutBodyRef} className={classes}>\n                <div className='module-content-wrapper'>\n                    {navigation && navigation}\n                    {banner && banner}\n\n                    <SmoothScrollbars\n                        ref={moduleContentRef}\n                        slideIn={!forceScrollbar}\n                        largeTrack\n                        trackOffset\n                        className={innerClasses}\n                        onScroll={handleScroll}\n                    >\n                        <div className='scrollbar-content'>{children}</div>\n                    </SmoothScrollbars>\n                </div>\n\n                {enableScrollToTop && (\n                    <span className={scrollToTopClasses}>\n                        <button type='button' className='btn btn-primary btn-icon-only' onClick={handleToTop}>\n                            <span className='rioglyph rioglyph-arrow-up' />\n                        </button>\n                    </span>\n                )}\n            </div>\n\n            {bottomBar && bottomBar}\n        </React.Fragment>\n    );\n});\n\nexport default ApplicationLayoutBody;\n"],"names":["RESIZE_THROTTLING","DEFAULT_BOTTOM_BAR_HEIGHT","ApplicationLayoutBody","forwardRef","props","ref","className","innerClassName","forceScrollbar","enableScrollToTop","banner","navigation","bottomBar","bottomBarHeight","scrollResetTrigger","children","remainingProps","offset","setOffset","useState","moduleContentRef","useRef","layoutBodyRef","useImperativeHandle","useEffect","handleScroll","debounce","handleToTop","scrollWrapper","scrollingElement","currentScroll","classes","classNames","innerClasses","offsetThreshold","scrollToTopClasses","jsxs","React","jsx","SmoothScrollbars"],"mappings":";;;;;AAgBA,MAAMA,IAAoB,KACpBC,IAA4B,IA2D5BC,IAAwBC,EAAW,CAACC,GAAcC,MAAa;AACjE,QAAM;AAAA,IACF,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,mBAAAC,IAAoB;AAAA,IACpB,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,iBAAAC,IAAkBZ;AAAA,IAClB,oBAAAa;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHZ,GAEE,CAACa,GAAQC,CAAS,IAAIC,EAAS,CAAC,GAChCC,IAAmBC,EAAmB,IAAI,GAC1CC,IAAgBD,EAA8B,IAAI;AAKxD,EAAAE,EAAyClB,GAAK,MAAMiB,GAAe,SAAS,CAAA,CAAE,GAK9EE,EAAU,MAAM;AACZ,IAAIJ,EAAiB,YACjBA,EAAiB,QAAQ,UAAU,CAAC,GACpCF,EAAU,CAAC;AAAA,EAEnB,GAAG,CAACJ,CAAkB,CAAC,GAEvBU,EAAU,MAAM;AACZ,IAAIF,EAAc,SAAS,sBAAsB,gBACzCV,IACAU,EAAc,QAAQ,WAAW,MAAM;AAAA,MACnC;AAAA,MACA,GAAGT,CAAe;AAAA,IAAA,IAGtBS,EAAc,QAAQ,WAAW,MAAM,eAAe,wCAAwC;AAAA,EAG1G,GAAG,CAACV,GAAWC,CAAe,CAAC;AAE/B,QAAMY,IAAeC,EAAS,MAAM;AAChC,IAAIN,EAAiB,WACjBF,EAAUE,EAAiB,QAAQ,cAAc;AAAA,EAEzD,GAAGpB,CAAiB,GAEd2B,IAAc,MAAM;AACtB,QAAI,CAACP,EAAiB;AAClB;AAGJ,UAAMQ,IAAgBR,EAAiB,QAAQ,WACzCS,IAAmBD,EAAc,mBACjCE,IAAgBD,GAAkB,aAAa;AAGrD,IAAIC,IAFoB,MAGpB,OAAO,sBAAsBH,CAAW,GACxCE,GAAkB,SAAS,GAAGC,IAAgBA,IAAgB,CAAC,GAC/DF,EAAc,UAAU,IAAI,qBAAqB,GACjDV,EAAUY,CAAa,KAEvBF,EAAc,UAAU,OAAO,qBAAqB;AAAA,EAE5D,GAEMG,IAAUC,EAAW,yBAAyBpB,IAAY,eAAe,IAAIN,CAAS,GAEtF2B,IAAeD;AAAA,IACjB;AAAA,IAEAzB,KAAkBA;AAAA,EAAA,GAGhB2B,IAAkB,OAAO,cAAc,KAEvCC,IAAqBH,EAAW,iBAAiBf,IAASiB,KAAmB,IAAI;AAEvF,SACI,gBAAAE,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,IAAA,gBAAAD,EAAC,SAAK,GAAGpB,GAAgB,KAAKM,GAAe,WAAWS,GACpD,UAAA;AAAA,MAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,0BACV,UAAA;AAAA,QAAAzB,KAAcA;AAAA,QACdD,KAAUA;AAAA,QAEX,gBAAA4B;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,KAAKnB;AAAA,YACL,SAAS,CAACZ;AAAA,YACV,YAAU;AAAA,YACV,aAAW;AAAA,YACX,WAAWyB;AAAA,YACX,UAAUR;AAAA,YAEV,UAAA,gBAAAa,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAAvB,EAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACjD,GACJ;AAAA,MAECN,KACG,gBAAA6B,EAAC,QAAA,EAAK,WAAWH,GACb,UAAA,gBAAAG,EAAC,YAAO,MAAK,UAAS,WAAU,iCAAgC,SAASX,GACrE,UAAA,gBAAAW,EAAC,UAAK,WAAU,8BAA6B,GACjD,EAAA,CACJ;AAAA,IAAA,GAER;AAAA,IAEC1B,KAAaA;AAAA,EAAA,GAClB;AAER,CAAC;"}
+{"version":3,"file":"ApplicationLayoutBody.js","names":[],"sources":["../../../src/components/applicationLayout/ApplicationLayoutBody.tsx"],"sourcesContent":["import React, {\n    useState,\n    useRef,\n    useEffect,\n    forwardRef,\n    useImperativeHandle,\n    type PropsWithChildren,\n    type ForwardedRef,\n} from 'react';\nimport { debounce } from 'es-toolkit/compat';\n\nimport type Scrollbars from 'react-custom-scrollbars-4';\n\nimport classNames from '../../utils/classNames';\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst RESIZE_THROTTLING = 200;\nconst DEFAULT_BOTTOM_BAR_HEIGHT = 54;\n\nexport type ApplicationLayoutBodyProps = {\n    /**\n     * Show scroll to top button after scrolling the content.\n     *\n     * @default true\n     */\n    enableScrollToTop?: boolean;\n\n    /**\n     * Always show vertical scrollbar to prevent the content from jumping.\n     *\n     * @default true\n     */\n    forceScrollbar?: boolean;\n\n    /**\n     * Prop to trigger scroll reset from outside. This comes in handy when changing the body content\n     * and to reset the scrolling like when the pathname changes from an body internal menu.\n     */\n    scrollResetTrigger?: any;\n\n    /**\n     * The ApplicationLayoutBodyBanner component.\n     */\n    banner?: React.ReactNode;\n\n    /**\n     * The `ApplicationLayoutBodyNavigation` component.\n     */\n    navigation?: React.ReactNode;\n\n    /**\n     * Optional bottom bar component or a simple string.\n     */\n    bottomBar?: React.ReactNode;\n\n    /**\n     * Height of the bottomBar in pixel.\n     *\n     * @default 54 when bottomBar is set\n     */\n    bottomBarHeight?: number;\n\n    /**\n     * Additional class names that are added to the inner module-content component.\n     */\n    innerClassName?: string;\n\n    /**\n     * Additional class names that are added to the respective component.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyProps>;\n\nconst ApplicationLayoutBody = forwardRef((props: Props, ref: Ref) => {\n    const {\n        className,\n        innerClassName,\n        forceScrollbar = true,\n        enableScrollToTop = true,\n        banner,\n        navigation,\n        bottomBar,\n        bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT,\n        scrollResetTrigger,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [offset, setOffset] = useState(0);\n    const moduleContentRef = useRef<Scrollbars>(null);\n    const layoutBodyRef = useRef<HTMLDivElement | null>(null);\n\n    // Use imperative handle to expose the internal layout ref. Usually this is used to\n    // expose internal function without exposing the underlying DOM element.\n    // In this case however, we want access to the element to trigger functions like scrollIntoView()\n    useImperativeHandle<HTMLDivElement, any>(ref, () => layoutBodyRef?.current, []);\n\n    // Reset scroll position when children are different. This fixes the issue of\n    // changing body content (like in another route) and still having the same scroll position\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n    useEffect(() => {\n        if (moduleContentRef.current) {\n            moduleContentRef.current.scrollTop(0);\n            setOffset(0);\n        }\n    }, [scrollResetTrigger]);\n\n    useEffect(() => {\n        if (layoutBodyRef.current?.parentNode instanceof HTMLElement) {\n            if (bottomBar) {\n                layoutBodyRef.current.parentNode.style.setProperty(\n                    '--ApplicationLayoutBodyBottomBarHeight',\n                    `${bottomBarHeight}px`\n                );\n            } else {\n                layoutBodyRef.current.parentNode.style.removeProperty('--ApplicationLayoutBodyBottomBarHeight');\n            }\n        }\n    }, [bottomBar, bottomBarHeight]);\n\n    const handleScroll = debounce(() => {\n        if (moduleContentRef.current) {\n            setOffset(moduleContentRef.current.getScrollTop());\n        }\n    }, RESIZE_THROTTLING);\n\n    const handleToTop = () => {\n        if (!moduleContentRef.current) {\n            return;\n        }\n\n        const scrollWrapper = moduleContentRef.current.container;\n        const scrollingElement = scrollWrapper.firstElementChild;\n        const currentScroll = scrollingElement?.scrollTop ?? 0;\n        const scrollThreshold = 10;\n\n        if (currentScroll > scrollThreshold) {\n            window.requestAnimationFrame(handleToTop);\n            scrollingElement?.scrollTo(0, currentScroll - currentScroll / 5);\n            scrollWrapper.classList.add('is-scrolling-to-top');\n            setOffset(currentScroll);\n        } else {\n            scrollWrapper.classList.remove('is-scrolling-to-top');\n        }\n    };\n\n    const classes = classNames('ApplicationLayoutBody', bottomBar ? 'has-footer' : '', className);\n\n    const innerClasses = classNames(\n        'module-content',\n\n        innerClassName && innerClassName\n    );\n\n    const offsetThreshold = window.innerHeight * 0.1;\n\n    const scrollToTopClasses = classNames('scroll-to-top', offset > offsetThreshold && 'in');\n\n    return (\n        <React.Fragment>\n            <div {...remainingProps} ref={layoutBodyRef} className={classes}>\n                <div className='module-content-wrapper'>\n                    {navigation && navigation}\n                    {banner && banner}\n\n                    <SmoothScrollbars\n                        ref={moduleContentRef}\n                        slideIn={!forceScrollbar}\n                        largeTrack\n                        trackOffset\n                        className={innerClasses}\n                        onScroll={handleScroll}\n                    >\n                        <div className='scrollbar-content'>{children}</div>\n                    </SmoothScrollbars>\n                </div>\n\n                {enableScrollToTop && (\n                    <span className={scrollToTopClasses}>\n                        <button type='button' className='btn btn-primary btn-icon-only' onClick={handleToTop}>\n                            <span className='uikit-icon icon-arrow-up' />\n                        </button>\n                    </span>\n                )}\n            </div>\n\n            {bottomBar && bottomBar}\n        </React.Fragment>\n    );\n});\n\nexport default ApplicationLayoutBody;\n"],"mappings":";;;;;;AAgBA,IAAM,IAAoB,KACpB,IAA4B,IA2D5B,IAAwB,GAAY,GAAc,MAAa;CACjE,IAAM,EACF,cACA,mBACA,oBAAiB,IACjB,uBAAoB,IACpB,WACA,eACA,cACA,qBAAkB,GAClB,uBACA,aACA,GAAG,MACH,GAEE,CAAC,GAAQ,KAAa,EAAS,CAAC,GAChC,IAAmB,EAAmB,IAAI,GAC1C,IAAgB,EAA8B,IAAI;CAiBxD,AAZA,EAAyC,SAAW,GAAe,SAAS,CAAC,CAAC,GAK9E,QAAgB;EACZ,AAAI,EAAiB,YACjB,EAAiB,QAAQ,UAAU,CAAC,GACpC,EAAU,CAAC;CAEnB,GAAG,CAAC,CAAkB,CAAC,GAEvB,QAAgB;EACZ,AAAI,EAAc,SAAS,sBAAsB,gBACzC,IACA,EAAc,QAAQ,WAAW,MAAM,YACnC,0CACA,GAAG,EAAgB,GACvB,IAEA,EAAc,QAAQ,WAAW,MAAM,eAAe,wCAAwC;CAG1G,GAAG,CAAC,GAAW,CAAe,CAAC;CAE/B,IAAM,IAAe,QAAe;EAChC,AAAI,EAAiB,WACjB,EAAU,EAAiB,QAAQ,aAAa,CAAC;CAEzD,GAAG,CAAiB,GAEd,UAAoB;EACtB,IAAI,CAAC,EAAiB,SAClB;EAGJ,IAAM,IAAgB,EAAiB,QAAQ,WACzC,IAAmB,EAAc,mBACjC,IAAgB,GAAkB,aAAa;EAGrD,AAAI,IAAgB,MAChB,OAAO,sBAAsB,CAAW,GACxC,GAAkB,SAAS,GAAG,IAAgB,IAAgB,CAAC,GAC/D,EAAc,UAAU,IAAI,qBAAqB,GACjD,EAAU,CAAa,KAEvB,EAAc,UAAU,OAAO,qBAAqB;CAE5D,GAEM,IAAU,EAAW,yBAAyB,IAAY,eAAe,IAAI,CAAS,GAEtF,IAAe,EACjB,kBAEA,KAAkB,CACtB,GAIM,IAAqB,EAAW,iBAAiB,IAF/B,OAAO,cAAc,MAEsC,IAAI;CAEvF,OACI,kBAAC,EAAM,UAAP,EAAA,UAAA,CACI,kBAAC,OAAD;EAAK,GAAI;EAAgB,KAAK;EAAe,WAAW;YAAxD,CACI,kBAAC,OAAD;GAAK,WAAU;aAAf;IACK,KAAc;IACd,KAAU;IAEX,kBAAC,GAAD;KACI,KAAK;KACL,SAAS,CAAC;KACV,YAAA;KACA,aAAA;KACA,WAAW;KACX,UAAU;eAEV,kBAAC,OAAD;MAAK,WAAU;MAAqB;KAAc,CAAA;IACpC,CAAA;GACjB;MAEJ,KACG,kBAAC,QAAD;GAAM,WAAW;aACb,kBAAC,UAAD;IAAQ,MAAK;IAAS,WAAU;IAAgC,SAAS;cACrE,kBAAC,QAAD,EAAM,WAAU,2BAA4B,CAAA;GACxC,CAAA;EACN,CAAA,CAET;KAEJ,KAAa,CACF,EAAA,CAAA;AAExB,CAAC"}

package/components/applicationLayout/ApplicationLayoutBodyBanner.js

@@ -1,24 +1,17 @@
-import { jsx as p } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import m from "../../utils/classNames.js";
-const d = "text-color-white", y = "bg-primary", L = l((o, t) => {
-  const {
-    textColor: r = d,
-    backgroundColor: s = y,
-    isSticky: a = !0,
-    className: n,
-    children: i,
-    ...e
-  } = o, c = m(
-    "ApplicationLayoutBodyBanner",
-    r,
-    s,
-    a && "position-sticky top-0 z-index-3",
-    n
-  );
-  return /* @__PURE__ */ p("div", { ...e, ref: t, className: c, children: i });
+import e from "../../utils/classNames.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/applicationLayout/ApplicationLayoutBodyBanner.tsx
+var r = "text-color-white", i = "bg-primary", a = t((t, a) => {
+	let { textColor: o = r, backgroundColor: s = i, isSticky: c = !0, className: l, children: u, ...d } = t, f = e("ApplicationLayoutBodyBanner", o, s, c && "position-sticky top-0 z-index-3", l);
+	return /* @__PURE__ */ n("div", {
+		...d,
+		ref: a,
+		className: f,
+		children: u
+	});
 });
-export {
-  L as default
-};
-//# sourceMappingURL=ApplicationLayoutBodyBanner.js.map
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=ApplicationLayoutBodyBanner.js.map

package/components/applicationLayout/ApplicationLayoutBodyBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationLayoutBodyBanner.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutBodyBanner.tsx"],"sourcesContent":["import { type PropsWithChildren, type ForwardedRef, forwardRef } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nconst DEFAULT_TEXT_COLOR = 'text-color-white';\nconst DEFAULT_BACKGROUND_COLOR = 'bg-primary';\n\nexport type ApplicationLayoutBodyBannerProps = {\n    /**\n     * One of the `text-color` utility classes.\n     * @default `text-color-white`\n     */\n    textColor?: string;\n    /**\n     * One of the `bg-color` utility classes.\n     * @default `bg-primary`\n     */\n    backgroundColor?: string;\n    /**\n     * Allows sticky banner while scrolling.\n     * @default false\n     */\n    isSticky?: boolean;\n    /**\n     * Additional class names that are added to the respective component.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyBannerProps>;\n\nconst ApplicationLayoutBodyBanner = forwardRef((props: Props, ref: Ref) => {\n    const {\n        textColor = DEFAULT_TEXT_COLOR,\n        backgroundColor = DEFAULT_BACKGROUND_COLOR,\n        isSticky = true,\n        className,\n        children,\n        ...remainingProps\n    } = props;\n\n    const bannerClasses = classNames(\n        'ApplicationLayoutBodyBanner',\n        textColor,\n        backgroundColor,\n        isSticky && 'position-sticky top-0 z-index-3',\n        className\n    );\n\n    return (\n        <div {...remainingProps} ref={ref} className={bannerClasses}>\n            {children}\n        </div>\n    );\n});\n\nexport default ApplicationLayoutBodyBanner;\n"],"names":["DEFAULT_TEXT_COLOR","DEFAULT_BACKGROUND_COLOR","ApplicationLayoutBodyBanner","forwardRef","props","ref","textColor","backgroundColor","isSticky","className","children","remainingProps","bannerClasses","classNames"],"mappings":";;;AAIA,MAAMA,IAAqB,oBACrBC,IAA2B,cA2B3BC,IAA8BC,EAAW,CAACC,GAAcC,MAAa;AACvE,QAAM;AAAA,IACF,WAAAC,IAAYN;AAAA,IACZ,iBAAAO,IAAkBN;AAAA,IAClB,UAAAO,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHP,GAEEQ,IAAgBC;AAAA,IAClB;AAAA,IACAP;AAAA,IACAC;AAAA,IACAC,KAAY;AAAA,IACZC;AAAA,EAAA;AAGJ,2BACK,OAAA,EAAK,GAAGE,GAAgB,KAAAN,GAAU,WAAWO,GACzC,UAAAF,GACL;AAER,CAAC;"}
+{"version":3,"file":"ApplicationLayoutBodyBanner.js","names":[],"sources":["../../../src/components/applicationLayout/ApplicationLayoutBodyBanner.tsx"],"sourcesContent":["import { type PropsWithChildren, type ForwardedRef, forwardRef } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nconst DEFAULT_TEXT_COLOR = 'text-color-white';\nconst DEFAULT_BACKGROUND_COLOR = 'bg-primary';\n\nexport type ApplicationLayoutBodyBannerProps = {\n    /**\n     * One of the `text-color` utility classes.\n     * @default `text-color-white`\n     */\n    textColor?: string;\n    /**\n     * One of the `bg-color` utility classes.\n     * @default `bg-primary`\n     */\n    backgroundColor?: string;\n    /**\n     * Allows sticky banner while scrolling.\n     * @default false\n     */\n    isSticky?: boolean;\n    /**\n     * Additional class names that are added to the respective component.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyBannerProps>;\n\nconst ApplicationLayoutBodyBanner = forwardRef((props: Props, ref: Ref) => {\n    const {\n        textColor = DEFAULT_TEXT_COLOR,\n        backgroundColor = DEFAULT_BACKGROUND_COLOR,\n        isSticky = true,\n        className,\n        children,\n        ...remainingProps\n    } = props;\n\n    const bannerClasses = classNames(\n        'ApplicationLayoutBodyBanner',\n        textColor,\n        backgroundColor,\n        isSticky && 'position-sticky top-0 z-index-3',\n        className\n    );\n\n    return (\n        <div {...remainingProps} ref={ref} className={bannerClasses}>\n            {children}\n        </div>\n    );\n});\n\nexport default ApplicationLayoutBodyBanner;\n"],"mappings":";;;;AAIA,IAAM,IAAqB,oBACrB,IAA2B,cA2B3B,IAA8B,GAAY,GAAc,MAAa;CACvE,IAAM,EACF,eAAY,GACZ,qBAAkB,GAClB,cAAW,IACX,cACA,aACA,GAAG,MACH,GAEE,IAAgB,EAClB,+BACA,GACA,GACA,KAAY,mCACZ,CACJ;CAEA,OACI,kBAAC,OAAD;EAAK,GAAI;EAAqB;EAAK,WAAW;EACzC;CACA,CAAA;AAEb,CAAC"}

package/components/applicationLayout/ApplicationLayoutBodyBottomBar.js

@@ -1,20 +1,18 @@
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import l from "../../utils/classNames.js";
-const e = f((s, n) => {
-  const { className: o, buttonAlignment: t, useBodyPaddings: a = !1, children: i, ...r } = s, c = l(
-    "ApplicationLayoutBodyBottomBar",
-    t === "left" && "justify-content-start",
-    t === "right" && "justify-content-end",
-    t !== "left" && t !== "right" && "justify-content-between",
-    a && "use-body-padding",
-    o && o
-  );
-  return /* @__PURE__ */ d("div", { ref: n, ...r, className: c, children: i });
+import e from "../../utils/classNames.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/applicationLayout/ApplicationLayoutBodyBottomBar.tsx
+var r = t((t, r) => {
+	let { className: i, buttonAlignment: a, useBodyPaddings: o = !1, children: s, ...c } = t, l = e("ApplicationLayoutBodyBottomBar", a === "left" && "justify-content-start", a === "right" && "justify-content-end", a !== "left" && a !== "right" && "justify-content-between", o && "use-body-padding", i && i);
+	return /* @__PURE__ */ n("div", {
+		ref: r,
+		...c,
+		className: l,
+		children: s
+	});
 });
-e.LEFT = "left";
-e.RIGHT = "right";
-export {
-  e as default
-};
-//# sourceMappingURL=ApplicationLayoutBodyBottomBar.js.map
+r.LEFT = "left", r.RIGHT = "right";
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=ApplicationLayoutBodyBottomBar.js.map

package/components/applicationLayout/ApplicationLayoutBodyBottomBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationLayoutBodyBottomBar.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutBodyBottomBar.tsx"],"sourcesContent":["import {\n    forwardRef,\n    type PropsWithChildren,\n    type ForwardedRef,\n    type ForwardRefExoticComponent,\n    type RefAttributes,\n} from 'react';\n\nimport classNames from '../../utils/classNames';\n\ntype ButtonAlignmentLeft = 'left';\ntype ButtonAlignmentRight = 'right';\n\nexport type ApplicationLayoutBodyBottomBarProps = {\n    /**\n     * Additional class names that are added to the respective component\n     */\n    className?: string;\n    /**\n     * Use same paddings (left and right) as the ApplicationLayoutBody.\n     * @default false\n     */\n    useBodyPaddings?: boolean;\n    /**\n     * Tells the buttons if they are left or right aligned.\n     * Default behavior is: 1st button left and 2nd button right.\n     *\n     * Possible values are:\n     * `ApplicationLayoutBodyBottomBar.LEFT`, `ApplicationLayoutBodyBottomBar.RIGHT` or\n     * `left`, `right`\n     */\n    buttonAlignment?: ButtonAlignmentLeft | ButtonAlignmentRight;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyBottomBarProps>;\n\ntype ApplicationLayoutBodyBottomBarType = ForwardRefExoticComponent<Props & RefAttributes<HTMLDivElement>> & {\n    LEFT: ButtonAlignmentLeft;\n    RIGHT: ButtonAlignmentRight;\n};\n\nconst ApplicationLayoutBodyBottomBar = forwardRef((props: Props, ref: Ref) => {\n    const { className, buttonAlignment, useBodyPaddings = false, children, ...remainingProps } = props;\n\n    const classes = classNames(\n        'ApplicationLayoutBodyBottomBar',\n        buttonAlignment === 'left' && 'justify-content-start',\n        buttonAlignment === 'right' && 'justify-content-end',\n        buttonAlignment !== 'left' && buttonAlignment !== 'right' && 'justify-content-between',\n        useBodyPaddings && 'use-body-padding',\n        className && className\n    );\n\n    return (\n        <div ref={ref} {...remainingProps} className={classes}>\n            {children}\n        </div>\n    );\n}) as ApplicationLayoutBodyBottomBarType;\n\nApplicationLayoutBodyBottomBar.LEFT = 'left';\nApplicationLayoutBodyBottomBar.RIGHT = 'right';\n\nexport default ApplicationLayoutBodyBottomBar;\n"],"names":["ApplicationLayoutBodyBottomBar","forwardRef","props","ref","className","buttonAlignment","useBodyPaddings","children","remainingProps","classes","classNames"],"mappings":";;;AA0CA,MAAMA,IAAiCC,EAAW,CAACC,GAAcC,MAAa;AAC1E,QAAM,EAAE,WAAAC,GAAW,iBAAAC,GAAiB,iBAAAC,IAAkB,IAAO,UAAAC,GAAU,GAAGC,MAAmBN,GAEvFO,IAAUC;AAAA,IACZ;AAAA,IACAL,MAAoB,UAAU;AAAA,IAC9BA,MAAoB,WAAW;AAAA,IAC/BA,MAAoB,UAAUA,MAAoB,WAAW;AAAA,IAC7DC,KAAmB;AAAA,IACnBF,KAAaA;AAAA,EAAA;AAGjB,2BACK,OAAA,EAAI,KAAAD,GAAW,GAAGK,GAAgB,WAAWC,GACzC,UAAAF,GACL;AAER,CAAC;AAEDP,EAA+B,OAAO;AACtCA,EAA+B,QAAQ;"}
+{"version":3,"file":"ApplicationLayoutBodyBottomBar.js","names":[],"sources":["../../../src/components/applicationLayout/ApplicationLayoutBodyBottomBar.tsx"],"sourcesContent":["import {\n    forwardRef,\n    type PropsWithChildren,\n    type ForwardedRef,\n    type ForwardRefExoticComponent,\n    type RefAttributes,\n} from 'react';\n\nimport classNames from '../../utils/classNames';\n\ntype ButtonAlignmentLeft = 'left';\ntype ButtonAlignmentRight = 'right';\n\nexport type ApplicationLayoutBodyBottomBarProps = {\n    /**\n     * Additional class names that are added to the respective component\n     */\n    className?: string;\n    /**\n     * Use same paddings (left and right) as the ApplicationLayoutBody.\n     * @default false\n     */\n    useBodyPaddings?: boolean;\n    /**\n     * Tells the buttons if they are left or right aligned.\n     * Default behavior is: 1st button left and 2nd button right.\n     *\n     * Possible values are:\n     * `ApplicationLayoutBodyBottomBar.LEFT`, `ApplicationLayoutBodyBottomBar.RIGHT` or\n     * `left`, `right`\n     */\n    buttonAlignment?: ButtonAlignmentLeft | ButtonAlignmentRight;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyBottomBarProps>;\n\ntype ApplicationLayoutBodyBottomBarType = ForwardRefExoticComponent<Props & RefAttributes<HTMLDivElement>> & {\n    LEFT: ButtonAlignmentLeft;\n    RIGHT: ButtonAlignmentRight;\n};\n\nconst ApplicationLayoutBodyBottomBar = forwardRef((props: Props, ref: Ref) => {\n    const { className, buttonAlignment, useBodyPaddings = false, children, ...remainingProps } = props;\n\n    const classes = classNames(\n        'ApplicationLayoutBodyBottomBar',\n        buttonAlignment === 'left' && 'justify-content-start',\n        buttonAlignment === 'right' && 'justify-content-end',\n        buttonAlignment !== 'left' && buttonAlignment !== 'right' && 'justify-content-between',\n        useBodyPaddings && 'use-body-padding',\n        className && className\n    );\n\n    return (\n        <div ref={ref} {...remainingProps} className={classes}>\n            {children}\n        </div>\n    );\n}) as ApplicationLayoutBodyBottomBarType;\n\nApplicationLayoutBodyBottomBar.LEFT = 'left';\nApplicationLayoutBodyBottomBar.RIGHT = 'right';\n\nexport default ApplicationLayoutBodyBottomBar;\n"],"mappings":";;;;AA0CA,IAAM,IAAiC,GAAY,GAAc,MAAa;CAC1E,IAAM,EAAE,cAAW,oBAAiB,qBAAkB,IAAO,aAAU,GAAG,MAAmB,GAEvF,IAAU,EACZ,kCACA,MAAoB,UAAU,yBAC9B,MAAoB,WAAW,uBAC/B,MAAoB,UAAU,MAAoB,WAAW,2BAC7D,KAAmB,oBACnB,KAAa,CACjB;CAEA,OACI,kBAAC,OAAD;EAAU;EAAK,GAAI;EAAgB,WAAW;EACzC;CACA,CAAA;AAEb,CAAC;AAED,EAA+B,OAAO,QACtC,EAA+B,QAAQ"}

package/components/applicationLayout/ApplicationLayoutBodyNavigation.js

@@ -1,11 +1,17 @@
+import e from "../../utils/classNames.js";
+import { forwardRef as t } from "react";
 import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as e } from "react";
-import m from "../../utils/classNames.js";
-const d = e((a, o) => {
-  const { className: i, children: s, ...t } = a, r = m("ApplicationLayoutBodyNavigation", i);
-  return /* @__PURE__ */ n("div", { ref: o, ...t, className: r, children: s });
+//#region src/components/applicationLayout/ApplicationLayoutBodyNavigation.tsx
+var r = t((t, r) => {
+	let { className: i, children: a, ...o } = t, s = e("ApplicationLayoutBodyNavigation", i);
+	return /* @__PURE__ */ n("div", {
+		ref: r,
+		...o,
+		className: s,
+		children: a
+	});
 });
-export {
-  d as default
-};
-//# sourceMappingURL=ApplicationLayoutBodyNavigation.js.map
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=ApplicationLayoutBodyNavigation.js.map

package/components/applicationLayout/ApplicationLayoutBodyNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationLayoutBodyNavigation.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutBodyNavigation.tsx"],"sourcesContent":["import { type ForwardedRef, type PropsWithChildren, forwardRef } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type ApplicationLayoutBodyNavigationProps = {\n    /**\n     * Additional class names that are added to the respective component. Example: `has-offset`.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyNavigationProps>;\n\nconst ApplicationLayoutBodyNavigation = forwardRef((props: Props, ref: Ref) => {\n    const { className, children, ...remainingProps } = props;\n\n    const navigationClasses = classNames('ApplicationLayoutBodyNavigation', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={navigationClasses}>\n            {children}\n        </div>\n    );\n});\n\nexport default ApplicationLayoutBodyNavigation;\n"],"names":["ApplicationLayoutBodyNavigation","forwardRef","props","ref","className","children","remainingProps","navigationClasses","classNames"],"mappings":";;;AAcA,MAAMA,IAAkCC,EAAW,CAACC,GAAcC,MAAa;AAC3E,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBJ,GAE7CK,IAAoBC,EAAW,mCAAmCJ,CAAS;AAEjF,2BACK,OAAA,EAAI,KAAAD,GAAW,GAAGG,GAAgB,WAAWC,GACzC,UAAAF,GACL;AAER,CAAC;"}
+{"version":3,"file":"ApplicationLayoutBodyNavigation.js","names":[],"sources":["../../../src/components/applicationLayout/ApplicationLayoutBodyNavigation.tsx"],"sourcesContent":["import { type ForwardedRef, type PropsWithChildren, forwardRef } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type ApplicationLayoutBodyNavigationProps = {\n    /**\n     * Additional class names that are added to the respective component. Example: `has-offset`.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyNavigationProps>;\n\nconst ApplicationLayoutBodyNavigation = forwardRef((props: Props, ref: Ref) => {\n    const { className, children, ...remainingProps } = props;\n\n    const navigationClasses = classNames('ApplicationLayoutBodyNavigation', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={navigationClasses}>\n            {children}\n        </div>\n    );\n});\n\nexport default ApplicationLayoutBodyNavigation;\n"],"mappings":";;;;AAcA,IAAM,IAAkC,GAAY,GAAc,MAAa;CAC3E,IAAM,EAAE,cAAW,aAAU,GAAG,MAAmB,GAE7C,IAAoB,EAAW,mCAAmC,CAAS;CAEjF,OACI,kBAAC,OAAD;EAAU;EAAK,GAAI;EAAgB,WAAW;EACzC;CACA,CAAA;AAEb,CAAC"}

package/components/applicationLayout/ApplicationLayoutHeader.js

@@ -1,26 +1,39 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as H, useRef as c, useImperativeHandle as y, useLayoutEffect as L } from "react";
-import g from "../../utils/classNames.js";
-const N = H((d, l) => {
-  const { className: m, children: r, ...u } = d, e = c(null), a = c(null);
-  y(l, () => e.current, [e]), L(() => {
-    const t = e.current?.parentNode;
-    if (!(t instanceof HTMLElement))
-      return;
-    t.style.removeProperty("--ApplicationLayoutHeaderHeight");
-    const f = window.requestAnimationFrame(() => {
-      const o = a.current, h = o?.firstElementChild instanceof HTMLElement && Number.parseFloat(window.getComputedStyle(o.firstElementChild).borderBottomWidth) || 0, n = o?.offsetHeight ?? e.current?.offsetHeight, i = n ? Math.max(0, n - h) : 0;
-      i && t.style.setProperty(
-        "--ApplicationLayoutHeaderHeight",
-        `${i}px`
-      );
-    });
-    return () => window.cancelAnimationFrame(f);
-  }, [r]);
-  const p = g("ApplicationLayoutHeader", m);
-  return /* @__PURE__ */ s("div", { ref: e, ...u, className: p, id: "ApplicationLayoutHeader", children: /* @__PURE__ */ s("div", { ref: a, className: "ApplicationLayoutHeaderContent", children: r }) });
+import e from "../../hooks/useResizeObserver.js";
+import t from "../../utils/classNames.js";
+import { forwardRef as n, useImperativeHandle as r, useLayoutEffect as i, useRef as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/applicationLayout/ApplicationLayoutHeader.tsx
+var s = n((n, s) => {
+	let { className: c, children: l, ...u } = n, d = a(null), [f, , { blockSize: p }] = e();
+	r(s, () => d.current, [d]), i(() => {
+		let e = d.current?.parentNode;
+		if (!(e instanceof HTMLElement)) return;
+		let t = f.current, n = t?.firstElementChild instanceof HTMLElement && Number.parseFloat(window.getComputedStyle(t.firstElementChild).borderBottomWidth) || 0, r = p ? Math.max(0, p - n) : 0;
+		r && e.style.setProperty("--ApplicationLayoutHeaderHeight", `${r}px`);
+	}, [
+		p,
+		l,
+		f
+	]), i(() => {
+		let e = d.current?.parentNode;
+		return () => {
+			e instanceof HTMLElement && e.style.removeProperty("--ApplicationLayoutHeaderHeight");
+		};
+	}, []);
+	let m = t("ApplicationLayoutHeader", c);
+	return /* @__PURE__ */ o("div", {
+		ref: d,
+		...u,
+		className: m,
+		id: "ApplicationLayoutHeader",
+		children: /* @__PURE__ */ o("div", {
+			ref: f,
+			className: "ApplicationLayoutHeaderContent",
+			children: l
+		})
+	});
 });
-export {
-  N as default
-};
-//# sourceMappingURL=ApplicationLayoutHeader.js.map
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=ApplicationLayoutHeader.js.map

package/components/applicationLayout/ApplicationLayoutHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationLayoutHeader.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutHeader.tsx"],"sourcesContent":["import {\n    type ForwardedRef,\n    type PropsWithChildren,\n    forwardRef,\n    useImperativeHandle,\n    useLayoutEffect,\n    useRef,\n} from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type ApplicationLayoutHeaderProps = {\n    /**\n     * Additional class names that are added to the respective component.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutHeaderProps>;\n\nconst ApplicationLayoutHeader = forwardRef((props: Props, ref: Ref) => {\n    const { className, children, ...remainingProps } = props;\n\n    const layoutHeaderRef = useRef<HTMLDivElement | null>(null);\n    const layoutHeaderContentRef = useRef<HTMLDivElement | null>(null);\n\n    useImperativeHandle(ref, () => layoutHeaderRef.current as HTMLDivElement, [layoutHeaderRef]);\n\n    useLayoutEffect(() => {\n        const applicationLayout = layoutHeaderRef.current?.parentNode;\n\n        if (!(applicationLayout instanceof HTMLElement)) {\n            return;\n        }\n\n        applicationLayout.style.removeProperty('--ApplicationLayoutHeaderHeight');\n\n        const animationFrameId = window.requestAnimationFrame(() => {\n            const headerContent = layoutHeaderContentRef.current;\n            const headerBorderWidth =\n                headerContent?.firstElementChild instanceof HTMLElement\n                    ? Number.parseFloat(window.getComputedStyle(headerContent.firstElementChild).borderBottomWidth) || 0\n                    : 0;\n            const headerHeight = headerContent?.offsetHeight ?? layoutHeaderRef.current?.offsetHeight;\n            const headerHeightWithoutBorder = headerHeight ? Math.max(0, headerHeight - headerBorderWidth) : 0;\n\n            if (headerHeightWithoutBorder) {\n                applicationLayout.style.setProperty(\n                    '--ApplicationLayoutHeaderHeight',\n                    `${headerHeightWithoutBorder}px`\n                );\n            }\n        });\n\n        return () => window.cancelAnimationFrame(animationFrameId);\n    }, [children]);\n\n    const classes = classNames('ApplicationLayoutHeader', className);\n\n    return (\n        <div ref={layoutHeaderRef} {...remainingProps} className={classes} id='ApplicationLayoutHeader'>\n            <div ref={layoutHeaderContentRef} className='ApplicationLayoutHeaderContent'>\n                {children}\n            </div>\n        </div>\n    );\n});\n\nexport default ApplicationLayoutHeader;\n"],"names":["ApplicationLayoutHeader","forwardRef","props","ref","className","children","remainingProps","layoutHeaderRef","useRef","layoutHeaderContentRef","useImperativeHandle","useLayoutEffect","applicationLayout","animationFrameId","headerContent","headerBorderWidth","headerHeight","headerHeightWithoutBorder","classes","classNames"],"mappings":";;;AAqBA,MAAMA,IAA0BC,EAAW,CAACC,GAAcC,MAAa;AACnE,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBJ,GAE7CK,IAAkBC,EAA8B,IAAI,GACpDC,IAAyBD,EAA8B,IAAI;AAEjE,EAAAE,EAAoBP,GAAK,MAAMI,EAAgB,SAA2B,CAACA,CAAe,CAAC,GAE3FI,EAAgB,MAAM;AAClB,UAAMC,IAAoBL,EAAgB,SAAS;AAEnD,QAAI,EAAEK,aAA6B;AAC/B;AAGJ,IAAAA,EAAkB,MAAM,eAAe,iCAAiC;AAExE,UAAMC,IAAmB,OAAO,sBAAsB,MAAM;AACxD,YAAMC,IAAgBL,EAAuB,SACvCM,IACFD,GAAe,6BAA6B,eACtC,OAAO,WAAW,OAAO,iBAAiBA,EAAc,iBAAiB,EAAE,iBAAiB,KAAK,GAErGE,IAAeF,GAAe,gBAAgBP,EAAgB,SAAS,cACvEU,IAA4BD,IAAe,KAAK,IAAI,GAAGA,IAAeD,CAAiB,IAAI;AAEjG,MAAIE,KACAL,EAAkB,MAAM;AAAA,QACpB;AAAA,QACA,GAAGK,CAAyB;AAAA,MAAA;AAAA,IAGxC,CAAC;AAED,WAAO,MAAM,OAAO,qBAAqBJ,CAAgB;AAAA,EAC7D,GAAG,CAACR,CAAQ,CAAC;AAEb,QAAMa,IAAUC,EAAW,2BAA2Bf,CAAS;AAE/D,2BACK,OAAA,EAAI,KAAKG,GAAkB,GAAGD,GAAgB,WAAWY,GAAS,IAAG,2BAClE,4BAAC,OAAA,EAAI,KAAKT,GAAwB,WAAU,kCACvC,UAAAJ,GACL,GACJ;AAER,CAAC;"}
+{"version":3,"file":"ApplicationLayoutHeader.js","names":[],"sources":["../../../src/components/applicationLayout/ApplicationLayoutHeader.tsx"],"sourcesContent":["import {\n    type ForwardedRef,\n    type PropsWithChildren,\n    forwardRef,\n    useImperativeHandle,\n    useLayoutEffect,\n    useRef,\n} from 'react';\n\nimport useResizeObserver from '../../hooks/useResizeObserver';\nimport classNames from '../../utils/classNames';\n\nexport type ApplicationLayoutHeaderProps = {\n    /**\n     * Additional class names that are added to the respective component.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutHeaderProps>;\n\nconst ApplicationLayoutHeader = forwardRef((props: Props, ref: Ref) => {\n    const { className, children, ...remainingProps } = props;\n\n    const layoutHeaderRef = useRef<HTMLDivElement | null>(null);\n    const [layoutHeaderContentRef, , { blockSize }] = useResizeObserver<HTMLDivElement>();\n\n    useImperativeHandle(ref, () => layoutHeaderRef.current as HTMLDivElement, [layoutHeaderRef]);\n\n    useLayoutEffect(() => {\n        const applicationLayout = layoutHeaderRef.current?.parentNode;\n\n        if (!(applicationLayout instanceof HTMLElement)) {\n            return;\n        }\n\n        const headerContent = layoutHeaderContentRef.current;\n        const headerBorderWidth =\n            headerContent?.firstElementChild instanceof HTMLElement\n                ? Number.parseFloat(window.getComputedStyle(headerContent.firstElementChild).borderBottomWidth) || 0\n                : 0;\n        const headerHeightWithoutBorder = blockSize ? Math.max(0, blockSize - headerBorderWidth) : 0;\n\n        if (headerHeightWithoutBorder) {\n            // ApplicationHeader uses its independent --ApplicationHeaderHeight to avoid a measurement feedback loop.\n            applicationLayout.style.setProperty('--ApplicationLayoutHeaderHeight', `${headerHeightWithoutBorder}px`);\n        }\n    }, [blockSize, children, layoutHeaderContentRef]);\n\n    useLayoutEffect(() => {\n        const applicationLayout = layoutHeaderRef.current?.parentNode;\n\n        return () => {\n            if (applicationLayout instanceof HTMLElement) {\n                applicationLayout.style.removeProperty('--ApplicationLayoutHeaderHeight');\n            }\n        };\n    }, []);\n\n    const classes = classNames('ApplicationLayoutHeader', className);\n\n    return (\n        <div ref={layoutHeaderRef} {...remainingProps} className={classes} id='ApplicationLayoutHeader'>\n            <div ref={layoutHeaderContentRef} className='ApplicationLayoutHeaderContent'>\n                {children}\n            </div>\n        </div>\n    );\n});\n\nexport default ApplicationLayoutHeader;\n"],"mappings":";;;;;AAsBA,IAAM,IAA0B,GAAY,GAAc,MAAa;CACnE,IAAM,EAAE,cAAW,aAAU,GAAG,MAAmB,GAE7C,IAAkB,EAA8B,IAAI,GACpD,CAAC,KAA0B,EAAE,kBAAe,EAAkC;CAwBpF,AAtBA,EAAoB,SAAW,EAAgB,SAA2B,CAAC,CAAe,CAAC,GAE3F,QAAsB;EAClB,IAAM,IAAoB,EAAgB,SAAS;EAEnD,IAAI,EAAE,aAA6B,cAC/B;EAGJ,IAAM,IAAgB,EAAuB,SACvC,IACF,GAAe,6BAA6B,eACtC,OAAO,WAAW,OAAO,iBAAiB,EAAc,iBAAiB,CAAC,CAAC,iBAAiB,KAC5F,GACJ,IAA4B,IAAY,KAAK,IAAI,GAAG,IAAY,CAAiB,IAAI;EAE3F,AAAI,KAEA,EAAkB,MAAM,YAAY,mCAAmC,GAAG,EAA0B,GAAG;CAE/G,GAAG;EAAC;EAAW;EAAU;CAAsB,CAAC,GAEhD,QAAsB;EAClB,IAAM,IAAoB,EAAgB,SAAS;EAEnD,aAAa;GACT,AAAI,aAA6B,eAC7B,EAAkB,MAAM,eAAe,iCAAiC;EAEhF;CACJ,GAAG,CAAC,CAAC;CAEL,IAAM,IAAU,EAAW,2BAA2B,CAAS;CAE/D,OACI,kBAAC,OAAD;EAAK,KAAK;EAAiB,GAAI;EAAgB,WAAW;EAAS,IAAG;YAClE,kBAAC,OAAD;GAAK,KAAK;GAAwB,WAAU;GACvC;EACA,CAAA;CACJ,CAAA;AAEb,CAAC"}

package/components/applicationLayout/ApplicationLayoutSidebar.js

@@ -1,11 +1,17 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import m from "../../utils/classNames.js";
-const d = c((a, o) => {
-  const { className: r, children: s, ...i } = a, t = m("ApplicationLayoutSidebar", r);
-  return /* @__PURE__ */ e("div", { ref: o, ...i, className: t, children: s });
+import e from "../../utils/classNames.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/applicationLayout/ApplicationLayoutSidebar.tsx
+var r = t((t, r) => {
+	let { className: i, children: a, ...o } = t, s = e("ApplicationLayoutSidebar", i);
+	return /* @__PURE__ */ n("div", {
+		ref: r,
+		...o,
+		className: s,
+		children: a
+	});
 });
-export {
-  d as default
-};
-//# sourceMappingURL=ApplicationLayoutSidebar.js.map
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=ApplicationLayoutSidebar.js.map

package/components/applicationLayout/ApplicationLayoutSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationLayoutSidebar.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutSidebar.tsx"],"sourcesContent":["import { type ForwardedRef, type PropsWithChildren, forwardRef } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type ApplicationLayoutSidebarProps = {\n    /**\n     * Additional class names that are added to the respective component\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutSidebarProps>;\n\nconst ApplicationLayoutSidebar = forwardRef((props: Props, ref: Ref) => {\n    const { className, children, ...remainingProps } = props;\n    const classes = classNames('ApplicationLayoutSidebar', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={classes}>\n            {children}\n        </div>\n    );\n});\n\nexport default ApplicationLayoutSidebar;\n"],"names":["ApplicationLayoutSidebar","forwardRef","props","ref","className","children","remainingProps","classes","classNames"],"mappings":";;;AAcA,MAAMA,IAA2BC,EAAW,CAACC,GAAcC,MAAa;AACpE,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBJ,GAC7CK,IAAUC,EAAW,4BAA4BJ,CAAS;AAEhE,2BACK,OAAA,EAAI,KAAAD,GAAW,GAAGG,GAAgB,WAAWC,GACzC,UAAAF,GACL;AAER,CAAC;"}
+{"version":3,"file":"ApplicationLayoutSidebar.js","names":[],"sources":["../../../src/components/applicationLayout/ApplicationLayoutSidebar.tsx"],"sourcesContent":["import { type ForwardedRef, type PropsWithChildren, forwardRef } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type ApplicationLayoutSidebarProps = {\n    /**\n     * Additional class names that are added to the respective component\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutSidebarProps>;\n\nconst ApplicationLayoutSidebar = forwardRef((props: Props, ref: Ref) => {\n    const { className, children, ...remainingProps } = props;\n    const classes = classNames('ApplicationLayoutSidebar', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={classes}>\n            {children}\n        </div>\n    );\n});\n\nexport default ApplicationLayoutSidebar;\n"],"mappings":";;;;AAcA,IAAM,IAA2B,GAAY,GAAc,MAAa;CACpE,IAAM,EAAE,cAAW,aAAU,GAAG,MAAmB,GAC7C,IAAU,EAAW,4BAA4B,CAAS;CAEhE,OACI,kBAAC,OAAD;EAAU;EAAK,GAAI;EAAgB,WAAW;EACzC;CACA,CAAA;AAEb,CAAC"}

package/components/applicationLayout/SubNavigation.js

@@ -1,11 +1,24 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import n from "../../utils/classNames.js";
-const N = m((s, e) => {
-  const { className: i, navItems: r = [], ...t } = s, l = n("SubNavigation", "width-100pct overflow-auto", i);
-  return /* @__PURE__ */ o("div", { ref: e, ...t, className: l, children: /* @__PURE__ */ o("ul", { className: "SubmoduleNavigation nav", children: r.map((a) => /* @__PURE__ */ o("li", { className: "submodule", "data-nav-item-key": a.key, children: a.route }, a.key)) }) });
+import e from "../../utils/classNames.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/applicationLayout/SubNavigation.tsx
+var r = t((t, r) => {
+	let { className: i, navItems: a = [], ...o } = t, s = e("SubNavigation", "width-100pct overflow-auto", i);
+	return /* @__PURE__ */ n("div", {
+		ref: r,
+		...o,
+		className: s,
+		children: /* @__PURE__ */ n("ul", {
+			className: "SubmoduleNavigation nav",
+			children: a.map((e) => /* @__PURE__ */ n("li", {
+				className: "submodule",
+				"data-nav-item-key": e.key,
+				children: e.route
+			}, e.key))
+		})
+	});
 });
-export {
-  N as default
-};
-//# sourceMappingURL=SubNavigation.js.map
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=SubNavigation.js.map

package/components/applicationLayout/SubNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubNavigation.js","sources":["../../../src/components/applicationLayout/SubNavigation.tsx"],"sourcesContent":["import { forwardRef, type ForwardedRef } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nimport type { ModulePropType } from '../applicationHeader/ApplicationHeader';\n\nexport type SubNavigationProps = {\n    /**\n     * List of navigation items with key and route prop.\n     * The route prop is a react-router NavLink component with an `active` style.\n     */\n    navItems?: ModulePropType[];\n\n    /**\n     * Additional classes for the wrapper element.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\n\nconst SubNavigation = forwardRef((props: SubNavigationProps, ref: Ref) => {\n    const { className, navItems = [], ...remainingProps } = props;\n\n    const navigationClasses = classNames('SubNavigation', 'width-100pct overflow-auto', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={navigationClasses}>\n            <ul className='SubmoduleNavigation nav'>\n                {navItems.map(navItem => (\n                    <li className='submodule' key={navItem.key} data-nav-item-key={navItem.key}>\n                        {navItem.route}\n                    </li>\n                ))}\n            </ul>\n        </div>\n    );\n});\n\nexport default SubNavigation;\n"],"names":["SubNavigation","forwardRef","props","ref","className","navItems","remainingProps","navigationClasses","classNames","jsx","navItem"],"mappings":";;;AAqBA,MAAMA,IAAgBC,EAAW,CAACC,GAA2BC,MAAa;AACtE,QAAM,EAAE,WAAAC,GAAW,UAAAC,IAAW,CAAA,GAAI,GAAGC,MAAmBJ,GAElDK,IAAoBC,EAAW,iBAAiB,8BAA8BJ,CAAS;AAE7F,SACI,gBAAAK,EAAC,OAAA,EAAI,KAAAN,GAAW,GAAGG,GAAgB,WAAWC,GAC1C,UAAA,gBAAAE,EAAC,MAAA,EAAG,WAAU,2BACT,UAAAJ,EAAS,IAAI,CAAAK,MACV,gBAAAD,EAAC,MAAA,EAAG,WAAU,aAA8B,qBAAmBC,EAAQ,KAClE,UAAAA,EAAQ,SADkBA,EAAQ,GAEvC,CACH,EAAA,CACL,GACJ;AAER,CAAC;"}
+{"version":3,"file":"SubNavigation.js","names":[],"sources":["../../../src/components/applicationLayout/SubNavigation.tsx"],"sourcesContent":["import { forwardRef, type ForwardedRef } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nimport type { ModulePropType } from '../applicationHeader/ApplicationHeader';\n\nexport type SubNavigationProps = {\n    /**\n     * List of navigation items with key and route prop.\n     * The route prop is a react-router NavLink component with an `active` style.\n     */\n    navItems?: ModulePropType[];\n\n    /**\n     * Additional classes for the wrapper element.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\n\nconst SubNavigation = forwardRef((props: SubNavigationProps, ref: Ref) => {\n    const { className, navItems = [], ...remainingProps } = props;\n\n    const navigationClasses = classNames('SubNavigation', 'width-100pct overflow-auto', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={navigationClasses}>\n            <ul className='SubmoduleNavigation nav'>\n                {navItems.map(navItem => (\n                    <li className='submodule' key={navItem.key} data-nav-item-key={navItem.key}>\n                        {navItem.route}\n                    </li>\n                ))}\n            </ul>\n        </div>\n    );\n});\n\nexport default SubNavigation;\n"],"mappings":";;;;AAqBA,IAAM,IAAgB,GAAY,GAA2B,MAAa;CACtE,IAAM,EAAE,cAAW,cAAW,CAAC,GAAG,GAAG,MAAmB,GAElD,IAAoB,EAAW,iBAAiB,8BAA8B,CAAS;CAE7F,OACI,kBAAC,OAAD;EAAU;EAAK,GAAI;EAAgB,WAAW;YAC1C,kBAAC,MAAD;GAAI,WAAU;aACT,EAAS,KAAI,MACV,kBAAC,MAAD;IAAI,WAAU;IAA8B,qBAAmB,EAAQ;cAClE,EAAQ;GACT,GAF2B,EAAQ,GAEnC,CACP;EACD,CAAA;CACH,CAAA;AAEb,CAAC"}

package/components/aspectRatioPlaceholder/AspectRatioPlaceholder.js

@@ -1,9 +1,14 @@
-import { jsx as o } from "react/jsx-runtime";
-const l = (t) => {
-  const { width: e = 16, height: s = 9, className: a = "", children: i } = t;
-  return /* @__PURE__ */ o("div", { className: `position-relative ${a}`, style: { aspectRatio: `${e} / ${s}` }, children: i });
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/aspectRatioPlaceholder/AspectRatioPlaceholder.tsx
+var t = (t) => {
+	let { width: n = 16, height: r = 9, className: i = "", children: a } = t;
+	return /* @__PURE__ */ e("div", {
+		className: `position-relative ${i}`,
+		style: { aspectRatio: `${n} / ${r}` },
+		children: a
+	});
 };
-export {
-  l as default
-};
-//# sourceMappingURL=AspectRatioPlaceholder.js.map
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=AspectRatioPlaceholder.js.map

package/components/aspectRatioPlaceholder/AspectRatioPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"AspectRatioPlaceholder.js","sources":["../../../src/components/aspectRatioPlaceholder/AspectRatioPlaceholder.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nexport type AspectRatioPlaceholderProps = {\n    /** Defines the aspect ratio width. @default 16 */\n    height?: number;\n    /** Defines the aspect ratio height. @default 9 */\n    width?: number;\n    /** Additional class names that are added to the wrapping element. */\n    className?: string;\n};\n\nconst AspectRatioPlaceholder = (props: AspectRatioPlaceholderProps & PropsWithChildren) => {\n    const { width = 16, height = 9, className = '', children } = props;\n\n    return (\n        <div className={`position-relative ${className}`} style={{ aspectRatio: `${width} / ${height}` }}>\n            {children}\n        </div>\n    );\n};\n\nexport default AspectRatioPlaceholder;\n"],"names":["AspectRatioPlaceholder","props","width","height","className","children","jsx"],"mappings":";AAWA,MAAMA,IAAyB,CAACC,MAA2D;AACvF,QAAM,EAAE,OAAAC,IAAQ,IAAI,QAAAC,IAAS,GAAG,WAAAC,IAAY,IAAI,UAAAC,MAAaJ;AAE7D,SACI,gBAAAK,EAAC,OAAA,EAAI,WAAW,qBAAqBF,CAAS,IAAI,OAAO,EAAE,aAAa,GAAGF,CAAK,MAAMC,CAAM,GAAA,GACvF,UAAAE,GACL;AAER;"}
+{"version":3,"file":"AspectRatioPlaceholder.js","names":[],"sources":["../../../src/components/aspectRatioPlaceholder/AspectRatioPlaceholder.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nexport type AspectRatioPlaceholderProps = {\n    /** Defines the aspect ratio width. @default 16 */\n    height?: number;\n    /** Defines the aspect ratio height. @default 9 */\n    width?: number;\n    /** Additional class names that are added to the wrapping element. */\n    className?: string;\n};\n\nconst AspectRatioPlaceholder = (props: AspectRatioPlaceholderProps & PropsWithChildren) => {\n    const { width = 16, height = 9, className = '', children } = props;\n\n    return (\n        <div className={`position-relative ${className}`} style={{ aspectRatio: `${width} / ${height}` }}>\n            {children}\n        </div>\n    );\n};\n\nexport default AspectRatioPlaceholder;\n"],"mappings":";;AAWA,IAAM,KAA0B,MAA2D;CACvF,IAAM,EAAE,WAAQ,IAAI,YAAS,GAAG,eAAY,IAAI,gBAAa;CAE7D,OACI,kBAAC,OAAD;EAAK,WAAW,qBAAqB;EAAa,OAAO,EAAE,aAAa,GAAG,EAAM,KAAK,IAAS;EAC1F;CACA,CAAA;AAEb"}