@telefonica/mistica 17.3.0 → 17.4.0

package/dist/sidenav-bar-mobile.js

@@ -0,0 +1,332 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SidenavBarMobile", {
+    enumerable: true,
+    get: function() {
+        return Ye;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _navigationshared = require("./navigation-shared.js");
+const _mobilenavigationmenu = require("./mobile-navigation-menu.js");
+const _navigationsharedcssmistica = require("./navigation-shared.css-mistica.js");
+const _responsivelayout = /*#__PURE__*/ _interop_require_wildcard(require("./responsive-layout.js"));
+const _list = require("./list.js");
+const _title = require("./title.js");
+const _touchable = /*#__PURE__*/ _interop_require_default(require("./touchable.js"));
+const _focustrap = /*#__PURE__*/ _interop_require_default(require("./focus-trap.js"));
+const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
+const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
+const _logo = require("./logo.js");
+const _themevariantcontext = require("./theme-variant-context.js");
+const _hooks = require("./hooks.js");
+const _modalcontextprovider = require("./modal-context-provider.js");
+const _theme = require("./theme.js");
+const _texttokens = require("./text-tokens.js");
+const _sidenavbardata = require("./sidenav-bar-data.js");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+const Te = 40, Be = 24, Me = 16, w = 32, Oe = 8, Ie = 16, F = "sidenav-burger-menu-lock", Ye = (param)=>{
+    let { entries: b, "aria-label": x, variant: N, logo: C, headerSlot: D, footerSlot: k, selectedItemId: G, onSelectedItemIdChange: H, dataAttributes: V } = param;
+    const { texts: c, t: p } = (0, _hooks.useTheme)(), T = _react.useId(), u = (0, _modalcontextprovider.useSetModalState)(), [r, B] = _react.useState(!1), [M, y] = _react.useState(!0), [O, I] = _react.useState(null), [j, f] = _react.useState(!1);
+    (0, _hooks.useDisableBodyScroll)(r);
+    const U = ()=>{
+        B(!0), u({
+            isModalOpen: !0
+        });
+    }, L = _react.useCallback(()=>{
+        B(!1), u({
+            isModalOpen: !1
+        });
+    }, [
+        u
+    ]), m = {
+        collapsed: !1,
+        state: "expanded"
+    }, Y = (0, _sidenavbardata.renderSidenavSlot)(D, m), E = (0, _sidenavbardata.renderSidenavSlot)(k, m), _ = (0, _sidenavbardata.renderSidenavLogo)(C, m, /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
+        size: Te
+    })), h = (e)=>{
+        var _e_children;
+        const n = {
+            title: e.label,
+            right: e.rightSlot,
+            "aria-current": G === e.id ? "page" : void 0
+        };
+        if ((_e_children = e.children) === null || _e_children === void 0 ? void 0 : _e_children.length) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread_props(_object_spread({}, n), {
+            onPress: ()=>{
+                I(e.id), f(!0);
+            }
+        }), e.id);
+        const t = (v)=>_async_to_generator(function*() {
+                H === null || H === void 0 ? void 0 : H(e.id);
+                try {
+                    yield v === null || v === void 0 ? void 0 : v();
+                } finally{
+                    L();
+                }
+            })();
+        return e.href !== void 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread_props(_object_spread({}, n), {
+            href: e.href,
+            newTab: e.newTab,
+            onNavigate: ()=>t(e.onNavigate)
+        }), e.id) : e.to !== void 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread_props(_object_spread({}, n), {
+            to: e.to,
+            newTab: e.newTab,
+            onNavigate: ()=>t(e.onNavigate)
+        }), e.id) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread_props(_object_spread({}, n), {
+            onPress: ()=>t(e.onPress)
+        }), e.id);
+    }, $ = (e, n)=>{
+        if (!(0, _sidenavbardata.isSidenavSection)(e)) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.RowList, {
+                children: h(e)
+            })
+        }, e.id);
+        const { text: t, isHeadingVisible: v } = (0, _sidenavbardata.getSidenavSectionTitle)(e.title);
+        return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+            space: Oe,
+            children: [
+                v && /* @__PURE__ */ (0, _jsxruntime.jsx)(_title.Title1, {
+                    children: t
+                }),
+                /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.RowList, {
+                        "aria-label": t,
+                        children: e.items.map((K)=>h(K))
+                    })
+                })
+            ]
+        }, `${t}-${n}`);
+    }, s = O ? (0, _sidenavbardata.getFirstLevelItems)(b !== null && b !== void 0 ? b : []).find((e)=>e.id === O) : void 0, z = /* @__PURE__ */ (0, _jsxruntime.jsx)(_navigationshared.Header, {
+        topFixed: !0,
+        withBorder: !0,
+        isBurgerMenuOpen: r,
+        variant: N,
+        dataAttributes: _object_spread({
+            testid: "SidenavBar"
+        }, V),
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_navigationshared.NavigationBarSideMargins, {
+            wide: !1,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_navigationshared.NavigationBarContentContainer, {
+                right: Y,
+                children: [
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
+                        className: _navigationsharedcssmistica.burgerMenuButton,
+                        "aria-live": "polite",
+                        "aria-label": r ? c.closeNavigationMenu || p(_texttokens.closeNavigationMenu) : c.openNavigationMenu || p(_texttokens.openNavigationMenu),
+                        "aria-expanded": r,
+                        "aria-controls": T,
+                        onPress: r ? L : U,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_navigationshared.BurgerMenuIcon, {
+                            isOpen: r
+                        })
+                    }),
+                    _ && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: _navigationsharedcssmistica.logoContainer,
+                        children: _
+                    })
+                ]
+            })
+        })
+    });
+    var _s_children;
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
+                variant: N,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_focustrap.default, {
+                    disabled: M,
+                    group: F,
+                    children: z
+                })
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _navigationsharedcssmistica.spacer
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_mobilenavigationmenu.MobileNavigationMenu, {
+                open: r,
+                id: T,
+                "aria-label": x,
+                topOffset: _theme.NAVBAR_HEIGHT_MOBILE,
+                showSecondLevel: j,
+                onExited: ()=>{
+                    f(!1), I(null);
+                },
+                focusTrapGroup: F,
+                disableFocusTrap: M,
+                setDisableFocusTrap: y,
+                firstLevel: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_responsivelayout.default, {
+                    children: [
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                            paddingTop: Be,
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
+                                space: w,
+                                children: (b !== null && b !== void 0 ? b : []).map((e, n)=>$(e, n))
+                            })
+                        }),
+                        E && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                            paddingY: Me,
+                            children: E
+                        })
+                    ]
+                }),
+                secondLevel: s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                        space: w,
+                        children: [
+                            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                                space: Ie,
+                                children: [
+                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_navigationshared.NavigationBar, {
+                                        title: c.backNavigationBar || p(_texttokens.backNavigationBar),
+                                        onBack: ()=>f(!1),
+                                        topFixed: !1,
+                                        withBorder: !1
+                                    }),
+                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_title.Title3, {
+                                        children: s.label
+                                    })
+                                ]
+                            }),
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.RowList, {
+                                    "aria-label": s.label,
+                                    children: ((_s_children = s.children) !== null && _s_children !== void 0 ? _s_children : []).map((e)=>h(e))
+                                })
+                            })
+                        ]
+                    })
+                }) : null
+            })
+        ]
+    });
+};

package/dist/sidenav-bar-motion.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+/**
+ * Whether the sidenav must move with zero duration: the user asked the operating system for less motion,
+ * or an acceptance test runs, where no half-animated node may stay in the DOM after the state that
+ * removed it.
+ *
+ * Every animated rule of the sidenav already drops its transition through the same media query, so the
+ * screen answers on its own. This hook gives the answer to the parts that run in JavaScript instead: the
+ * timeouts that keep a box in the document until it finished closing, and the delay after which the
+ * sidenav reports that its rail stopped.
+ *
+ * The media query reports `false` on the server and for the first render, where it does not exist. A
+ * toggle of the sidenav always comes later than that, so the value is settled by the time anything reads it.
+ */
+declare const useIsMotionOff: () => boolean;
+/**
+ * The width that a text had at rest, so that it can keep it while the rail moves.
+ *
+ * A label or a section title that takes its width from the layout re-cuts itself as the rail narrows, and
+ * a `max-content` width turns a wrapped text into one line at the first frame, which makes its row jump.
+ * Freezing the width that the text had at rest keeps its lines while its box folds, so the height of the
+ * row animates with the rail.
+ *
+ * The hook measures the element after every render at rest, and it returns that width while `isFrozen`
+ * is true. It returns `undefined` when it has no measurement yet, for example when the sidenav mounted
+ * collapsed or on the server: the caller then falls back to `max-content`.
+ */
+declare const useRestWidth: (isFrozen: boolean) => {
+    ref: React.RefObject<HTMLDivElement | null>;
+    frozenWidth?: number;
+};
+export { useIsMotionOff, useRestWidth };

package/dist/sidenav-bar-motion.js

@@ -0,0 +1,84 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get useIsMotionOff () {
+        return h;
+    },
+    get useRestWidth () {
+        return R;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _hooks = require("./hooks.js");
+const _platform = require("./utils/platform.js");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const d = "(prefers-reduced-motion)", h = ()=>{
+    const { platformOverrides: n } = (0, _hooks.useTheme)(), [r, e] = _react.useState(!1);
+    return _react.useEffect(()=>{
+        var _window_matchMedia, _window;
+        const t = (_window_matchMedia = (_window = window).matchMedia) === null || _window_matchMedia === void 0 ? void 0 : _window_matchMedia.call(_window, d);
+        if (!t) return;
+        e(t.matches);
+        const o = (c)=>e(c.matches);
+        return t.addEventListener("change", o), ()=>t.removeEventListener("change", o);
+    }, []), (0, _platform.isRunningAcceptanceTest)(n) || r;
+}, R = (n)=>{
+    const r = _react.useRef(null), e = _react.useRef(0);
+    (0, _hooks.useIsomorphicLayoutEffect)(()=>{
+        !n && r.current && (e.current = r.current.offsetWidth);
+    });
+    const t = n && e.current > 0 ? e.current : void 0;
+    return {
+        ref: r,
+        frozenWidth: t
+    };
+};

package/dist/sidenav-bar-panel.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import type { NonDeprecatedVariant } from './theme-variant-context';
+type SidenavDialogPanelProps = {
+    id: string;
+    itemId: string;
+    label: string;
+    containerRef: React.RefObject<HTMLElement | null>;
+    children: React.ReactNode;
+};
+/**
+ * A floating panel with the children of a parent item. It is used when the sidenav is collapsed and the
+ * double panel mode is off. The panel is anchored to the top of its trigger whenever it fits.
+ */
+declare const SidenavDialogPanel: ({ id, itemId, label, containerRef, children, }: SidenavDialogPanelProps) => JSX.Element;
+type SidenavDoublePanelProps = {
+    itemId: string;
+    label: string;
+    variant: NonDeprecatedVariant;
+    backgroundColor?: string;
+    children: React.ReactNode;
+};
+/**
+ * The second column of the sidenav, with the children of the open parent item. It is used in double
+ * panel mode, both when the sidenav is expanded and when it is collapsed.
+ *
+ * It forwards its ref because `SidenavBar` slides it out and back in with a `CSSTransition`, which needs
+ * the node of the column. The column itself carries no padding: an inner box of the width of the open
+ * column holds it instead, so the column can narrow to zero without reflowing its content.
+ */
+declare const SidenavDoublePanel: React.ForwardRefExoticComponent<SidenavDoublePanelProps & React.RefAttributes<HTMLDivElement>>;
+export { SidenavDialogPanel, SidenavDoublePanel };

package/dist/sidenav-bar-panel.js

@@ -0,0 +1,208 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get SidenavDialogPanel () {
+        return X;
+    },
+    get SidenavDoublePanel () {
+        return Y;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _sidenavbarcssmistica = require("./sidenav-bar.css-mistica.js");
+const _sidenavbarcontext = require("./sidenav-bar-context.js");
+const _sidenavbarkeyboard = require("./sidenav-bar-keyboard.js");
+const _portal = require("./portal.js");
+const _text = require("./text.js");
+const _dom = require("./utils/dom.js");
+const _common = require("./utils/common.js");
+const _themevariantcontext = require("./theme-variant-context.js");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const g = 8, j = (s)=>{
+    const { setPanelOpenForItemId: e } = (0, _sidenavbarcontext.useSidenavBarContext)();
+    _react.useEffect(()=>{
+        const l = (a)=>{
+            if (!s) return;
+            const u = a.composedPath();
+            if (u.includes(s)) return;
+            u.some((c)=>c instanceof Element && c.matches('[data-parent-item="true"]')) || e(null);
+        }, n = (a)=>{
+            a.key === "Escape" && e(null);
+        };
+        return document.addEventListener("click", l), document.addEventListener("keydown", n), ()=>{
+            document.removeEventListener("click", l), document.removeEventListener("keydown", n);
+        };
+    }, [
+        s,
+        e
+    ]);
+}, X = (param)=>{
+    let { id: s, itemId: e, label: l, containerRef: n, children: a } = param;
+    const { setPanelOpenForItemId: u } = (0, _sidenavbarcontext.useSidenavBarContext)(), [t, c] = _react.useState(null), [d, f] = _react.useState(null), m = _react.useId();
+    return j(t), (0, _sidenavbarkeyboard.useDialogPanelKeyboard)({
+        panelElement: t,
+        containerRef: n,
+        itemId: e,
+        isPositioned: d !== null,
+        onClose: ()=>u(null)
+    }), _react.useEffect(()=>{
+        const r = ()=>{
+            const p = n.current;
+            if (!p) return;
+            const P = p.querySelector(`[data-sidenav-item-id="${e}"]`);
+            if (!P) return;
+            var _t_offsetHeight;
+            const I = p.getBoundingClientRect(), x = P.getBoundingClientRect(), N = (_t_offsetHeight = t === null || t === void 0 ? void 0 : t.offsetHeight) !== null && _t_offsetHeight !== void 0 ? _t_offsetHeight : 0, C = window.innerHeight - N - g;
+            f({
+                top: Math.max(g, Math.min(x.top, C)),
+                left: I.right + 8
+            });
+        };
+        r();
+        const y = t ? (0, _dom.listenResize)(t, r) : void 0;
+        return window.addEventListener("resize", r), ()=>{
+            y === null || y === void 0 ? void 0 : y(), window.removeEventListener("resize", r);
+        };
+    }, [
+        e,
+        n,
+        t
+    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            ref: c,
+            id: s,
+            className: _sidenavbarcssmistica.dialogPanel,
+            "data-sidenav-dialog-panel": e,
+            style: d ? {
+                position: "fixed",
+                top: d.top,
+                left: d.left
+            } : // trigger, so it stays hidden for the render that precedes the
+            // measurement instead of flashing at a placeholder position.
+            {
+                position: "fixed",
+                top: 0,
+                left: 0,
+                visibility: "hidden"
+            },
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
+                variant: "default",
+                children: [
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        id: m,
+                        className: (0, _classnames.default)(_sidenavbarcssmistica.dialogPanelTitle, _sidenavbarcssmistica.sectionTitleVariant.default),
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                            medium: !0,
+                            color: "inherit",
+                            children: l
+                        })
+                    }),
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: _sidenavbarcssmistica.panelRows,
+                        role: "list",
+                        "aria-labelledby": m,
+                        children: a
+                    })
+                ]
+            })
+        })
+    });
+}, Y = /*#__PURE__*/ _react.forwardRef((param, u)=>{
+    let { itemId: s, label: e, variant: l, backgroundColor: n, children: a } = param;
+    const { containerRef: t } = (0, _sidenavbarcontext.useSidenavBarContext)(), c = _react.useRef(null), d = _react.useId();
+    return _react.useEffect(()=>{
+        var _B_;
+        const f = c.current, m = t.current;
+        if (!f || !m) return;
+        const r = document.activeElement;
+        r && r !== document.body && !m.contains(r) || ((_B_ = (0, _sidenavbarkeyboard.getItemFocusables)(f)[0]) === null || _B_ === void 0 ? void 0 : _B_.focus());
+    }, [
+        s,
+        t
+    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        ref: (0, _common.combineRefs)(u, c),
+        className: (0, _classnames.default)(_sidenavbarcssmistica.doublePanelColumn, _sidenavbarcssmistica.regionBackground[l]),
+        style: n ? {
+            backgroundColor: n
+        } : void 0,
+        "data-sidenav-double-panel": s,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+            className: _sidenavbarcssmistica.doublePanelContent,
+            children: [
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    id: d,
+                    className: (0, _classnames.default)(_sidenavbarcssmistica.doublePanelTitle, _sidenavbarcssmistica.sectionTitleVariant[l]),
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                        medium: !0,
+                        color: "inherit",
+                        children: e
+                    })
+                }),
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: _sidenavbarcssmistica.panelRows,
+                    role: "list",
+                    "aria-labelledby": d,
+                    children: a
+                })
+            ]
+        })
+    });
+});