@telefonica/mistica 17.3.0 → 17.4.0

package/dist/sidenav-bar.d.ts

@@ -0,0 +1,102 @@
+import type { Variant } from './theme-variant-context';
+import type { ExclusifyUnion } from './utils/utility-types';
+import type { DataAttributes } from './utils/types';
+import type { SidenavEntry, SidenavLogo, SidenavSlot } from './sidenav-bar-types';
+type SidenavBarBaseProps = {
+    /**
+     * First-level entries of the body. Each entry is either a section with items, or a stand-alone item
+     * that needs no section.
+     * @see SidenavEntry
+     * @see SidenavSection
+     * @see SidenavFirstLevelItem
+     */
+    entries?: ReadonlyArray<SidenavEntry>;
+    /** Accessible name of the navigation landmark. Defaults to a localized "Main navigation". */
+    'aria-label'?: string;
+    /** Color variant (default, brand, alternative, negative, media). @default 'default' */
+    variant?: Variant;
+    /** Width of expanded sidenav in pixels. The second column takes the same width. @default 240 */
+    width?: number;
+    /** Opens the children of a parent item in a second column, to the right of the sidenav.
+     * @default false */
+    doublePanel?: boolean;
+    /** Logo of the header. Defaults to the isotype of the skin at 32px, in both the expanded and the
+     * collapsed state. It takes true for that same default, false to hide the logo, an element of your
+     * own, or a function that receives the collapsed state and returns one logo for each state. The
+     * collapsed rail clamps the width of the logo to 32px, and the spot is at least 32px tall: a taller
+     * logo of your own makes the spot grow. The mobile top bar matches the main navigation
+     * bar: it shows the isotype at 40px, and it reports a collapsed state of false.
+     * @see SidenavLogoRenderProps */
+    logo?: SidenavLogo;
+    /** Custom content below logo/collapse in header. It takes an element, or a function that receives the
+     * collapse state and returns the content for that state.
+     * @see SidenavSlotRenderProps */
+    headerSlot?: SidenavSlot;
+    /** Custom background color of the whole sidenav: header, body, footer and second column. Use an
+     * opaque color: the header and the footer are sticky over the scrolling body, so a translucent color
+     * lets the body content show through them. */
+    background?: string;
+    /** ID of currently selected item (controlled selection). */
+    selectedItemId?: string | null;
+    /** Called when selection changes. */
+    onSelectedItemIdChange?: (id: string | null) => void;
+    dataAttributes?: DataAttributes;
+};
+/**
+ * Constraints enforced by the type system:
+ *
+ * - A boxed sidenav has its own edge, so the vertical right divider does not apply to it:
+ *   `divider` is only accepted when `boxed` is false.
+ * - The collapsed state is either controlled through `collapsed` (requires `onCollapse`)
+ *   or uncontrolled through `defaultCollapsed` (optional `onCollapse`), never both.
+ * - `showCollapseButton: false` removes the built-in collapse button, which is the only control that
+ *   toggles the state from inside. Without it, the sidenav never changes the state by itself, so
+ *   `onCollapse` has no event to report and `defaultCollapsed` has no state to seed: both are not
+ *   allowed. That sidenav takes `collapsed` alone, and mirrors it on every render, so a control of your
+ *   own (for example in a slot) still collapses it through that prop.
+ * - `fixedFooter` is only allowed when `footerSlot` is provided.
+ */
+type SidenavBarProps = SidenavBarBaseProps & ExclusifyUnion<{
+    /** Renders as a floating box (with own edge). Divider not applicable. */
+    boxed: true;
+} | {
+    /** Renders as full-width. @default false */
+    boxed?: false;
+    /** Shows vertical right divider (only when boxed=false). @default true */
+    divider?: boolean;
+}> & ExclusifyUnion<{
+    /** Controlled collapsed state. */
+    collapsed: boolean;
+    /** Handler for collapsed state changes (required for controlled mode). */
+    onCollapse: (collapsed: boolean) => void;
+    /** Renders the built-in collapse button, which lets the user toggle the state. @default true */
+    showCollapseButton?: true;
+} | {
+    /** Initial collapsed state (uncontrolled). @default false */
+    defaultCollapsed?: boolean;
+    /** Optional handler for collapsed state changes (for logging/effects). */
+    onCollapse?: (collapsed: boolean) => void;
+    /** Renders the built-in collapse button, which lets the user toggle the state. @default true */
+    showCollapseButton?: true;
+} | {
+    /** Collapsed state. There is no built-in button to toggle it, so the sidenav mirrors this
+     * prop on every render. Unlike `defaultCollapsed`, it is not a seed: a later change of it
+     * moves the sidenav. @default false */
+    collapsed?: boolean;
+    /** Hides the built-in collapse button. Only a change of `collapsed` moves the sidenav. */
+    showCollapseButton: false;
+}> & ExclusifyUnion<{
+    /** Custom content in footer region (at bottom of sidenav). It takes an element, or a function
+     * that receives the collapse state and returns the content for that state.
+     * @see SidenavSlotRenderProps */
+    footerSlot: SidenavSlot;
+    /** Keep footer fixed when scrolling. @default false */
+    fixedFooter?: boolean;
+} | {
+    /** No footer slot. */
+    footerSlot?: undefined;
+}>;
+declare const SidenavBar: ({ entries, "aria-label": ariaLabelProp, variant, boxed, divider, showCollapseButton, collapsed: collapsedProp, defaultCollapsed, onCollapse, doublePanel, width, logo, headerSlot, footerSlot, fixedFooter, background, selectedItemId, onSelectedItemIdChange, dataAttributes, }: SidenavBarProps) => JSX.Element;
+export default SidenavBar;
+export { SidenavBar };
+export type { SidenavBarProps };

package/dist/sidenav-bar.js

@@ -0,0 +1,492 @@
+'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 SidenavBar () {
+        return Co;
+    },
+    get default () {
+        return Co;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _reacttransitiongroup = require("react-transition-group");
+const _sidenavbarcssmistica = require("./sidenav-bar.css-mistica.js");
+const _themevariantcontext = require("./theme-variant-context.js");
+const _dom = require("./utils/dom.js");
+const _css = require("./utils/css.js");
+const _hooks = require("./hooks.js");
+const _iconbutton = require("./icon-button.js");
+const _logo = require("./logo.js");
+const _iconpanelexpandregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-panel-expand-regular.js"));
+const _iconpanelcollapseregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-panel-collapse-regular.js"));
+const _sidenavbarfirstlevelitem = require("./sidenav-bar-first-level-item.js");
+const _sidenavbarsecondlevelitem = require("./sidenav-bar-second-level-item.js");
+const _sidenavbarsection = require("./sidenav-bar-section.js");
+const _sidenavbarpanel = require("./sidenav-bar-panel.js");
+const _sidenavbarmobile = require("./sidenav-bar-mobile.js");
+const _sidenavbarmotion = require("./sidenav-bar-motion.js");
+const _sidenavbarkeyboard = require("./sidenav-bar-keyboard.js");
+const _sidenavbarcontext = require("./sidenav-bar-context.js");
+const _boxed = require("./boxed.js");
+const _sidenavbardata = require("./sidenav-bar-data.js");
+const _texttokens = require("./text-tokens.js");
+const _sidenavbartypes = require("./sidenav-bar-types.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 _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 be = function(e) {
+    let { standalone: r } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_sidenavbarfirstlevelitem.SidenavFirstLevelItem, {
+        id: e.id,
+        label: e.label,
+        asset: e.asset,
+        showAssetWhenExpanded: e.showAssetWhenExpanded,
+        rightSlot: e.rightSlot,
+        standalone: r,
+        defaultOpen: e.defaultOpen,
+        secondLevelItems: e.children,
+        href: e.href,
+        to: e.to,
+        onPress: e.onPress,
+        newTab: e.newTab,
+        onNavigate: e.onNavigate
+    }, e.id);
+}, De = (e, r)=>(0, _sidenavbardata.getFirstLevelItems)(e).find((a)=>{
+        var _a_children;
+        return (_a_children = a.children) === null || _a_children === void 0 ? void 0 : _a_children.some((d)=>d.id === r);
+    }), xe = (e, r)=>(0, _sidenavbardata.getFirstLevelItems)(e).find((a)=>a.id === r), Jn = (e)=>{
+    const r = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), d = (u, p)=>{
+        var _u_children, _u_children1;
+        r.has(u.id) ? a.add(u.id) : r.add(u.id), p > 0 && ((_u_children = u.children) === null || _u_children === void 0 ? void 0 : _u_children.length) && console.error(`SidenavItem "${u.label}" at level ${p} cannot have children. SidenavItem supports maximum 2 levels of nesting. Only level 0 items can have children.`), (_u_children1 = u.children) === null || _u_children1 === void 0 ? void 0 : _u_children1.forEach((E)=>d(E, p + 1));
+    };
+    (0, _sidenavbardata.getFirstLevelItems)(e).forEach((u)=>d(u, 0)), a.size > 0 && console.error(`SidenavBar: duplicate item IDs found: ${Array.from(a).join(", ")}. All SidenavItem ids must be unique within a SidenavBar.`);
+}, Qn = (e)=>e.map((r, a)=>{
+        if ((0, _sidenavbardata.isSidenavSection)(r)) {
+            const d = e[a - 1], u = !!r.dividerTop && !!d && (0, _sidenavbardata.isSidenavSection)(d) && !!d.dividerBottom, p = a === 0, E = a === e.length - 1;
+            return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                role: "listitem",
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_sidenavbarsection.SidenavSection, {
+                    title: r.title,
+                    dividerTop: r.dividerTop && !p && !u,
+                    dividerBottom: r.dividerBottom && !E,
+                    children: r.items.map((V)=>be(V))
+                })
+            }, `${(0, _sidenavbardata.getSidenavSectionTitle)(r.title).text}-${a}`);
+        }
+        return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            className: _sidenavbarcssmistica.standaloneItem,
+            role: "listitem",
+            children: be(r, {
+                standalone: !0
+            })
+        }, r.id);
+    }), Co = (param)=>{
+    let { entries: e, "aria-label": r, variant: a = "default", boxed: d = !1, divider: u = !0, showCollapseButton: p = !0, collapsed: E, defaultCollapsed: V = !1, onCollapse: M, doublePanel: c = !1, width: Q = _sidenavbarcssmistica.DEFAULT_WIDTH, logo: O, headerSlot: X, footerSlot: b, fixedFooter: T = !1, background: F, selectedItemId: v, onSelectedItemIdChange: A, dataAttributes: Y } = param;
+    const { isTabletOrSmaller: Ce } = (0, _hooks.useScreenSize)(), { componentProperties: Be, texts: W, t: _ } = (0, _hooks.useTheme)(), ee = r !== null && r !== void 0 ? r : W.sidenavLandmark || _(_texttokens.sidenavLandmark), h = (0, _sidenavbarmotion.useIsMotionOff)(), Le = (0, _themevariantcontext.normalizeVariant)((0, _themevariantcontext.useThemeVariant)()), [D, f] = _react.useState(()=>{
+        var _De;
+        var _De_id;
+        return c && e && v ? (_De_id = (_De = De(e, v)) === null || _De === void 0 ? void 0 : _De.id) !== null && _De_id !== void 0 ? _De_id : null : null;
+    }), z = E !== void 0, [Ne, Oe] = _react.useState(V), s = z ? !!E : Ne, L = _react.useRef(null), ne = _react.useRef(null), [x, Te] = _react.useState(null), [oe, te] = _react.useState(s);
+    _react.useEffect(()=>{
+        if (h) {
+            te(s);
+            return;
+        }
+        const o = setTimeout(()=>te(s), _sidenavbarcssmistica.COLLAPSE_DURATION_MS);
+        return ()=>clearTimeout(o);
+    }, [
+        s,
+        h
+    ]);
+    const w = s ? oe ? "collapsed" : "collapsing" : oe ? "expanding" : "expanded", [re, se] = _react.useState(null), ie = _react.useCallback((o)=>{
+        c && se(o), f(null), o && (A === null || A === void 0 ? void 0 : A(o));
+    }, [
+        c,
+        A
+    ]), [we, Pe] = _react.useState(v);
+    if (v !== we && (Pe(v), re !== null && se(null), c && e && v && re !== v)) {
+        const o = De(e, v);
+        if (o) f(o.id);
+        else {
+            var _m_children;
+            const m = xe(e, v);
+            m && !((_m_children = m.children) === null || _m_children === void 0 ? void 0 : _m_children.length) && f(null);
+        }
+    }
+    const [Re, ye] = _react.useState(c);
+    c !== Re && (ye(c), c || f(null));
+    var _e_length;
+    const [Ie, ke] = _react.useState((_e_length = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length !== void 0 ? _e_length : 0);
+    var _e_length1, _e_length2;
+    ((_e_length1 = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length1 !== void 0 ? _e_length1 : 0) !== Ie && (ke((_e_length2 = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length2 !== void 0 ? _e_length2 : 0), f(null)), _react.useEffect(()=>{
+        if (!c || !D) return;
+        const o = (S)=>{
+            const ve = L.current;
+            ve && (S.composedPath().includes(ve) || f(null));
+        }, m = (S)=>{
+            S.key === "Escape" && f(null);
+        };
+        return document.addEventListener("click", o), document.addEventListener("keydown", m), ()=>{
+            document.removeEventListener("click", o), document.removeEventListener("keydown", m);
+        };
+    }, [
+        c,
+        D
+    ]);
+    const C = F ? {
+        backgroundColor: F
+    } : void 0, [H, Ve] = _react.useState(!1), [P, Me] = _react.useState(!1), [Fe, ae] = _react.useState(!1), U = _react.useRef(null), R = _react.useRef(null), y = _react.useRef(null);
+    _react.useEffect(()=>{
+        if (!y.current) return;
+        const o = new IntersectionObserver((param)=>{
+            let [S] = param;
+            Ve(!S.isIntersecting);
+        }, {
+            root: y.current,
+            threshold: 0,
+            rootMargin: "1px 0px 1px 0px"
+        }), m = new IntersectionObserver((param)=>{
+            let [S] = param;
+            Me(!S.isIntersecting);
+        }, {
+            root: y.current,
+            threshold: 0,
+            rootMargin: "1px 0px 1px 0px"
+        });
+        return U.current && o.observe(U.current), R.current && m.observe(R.current), ()=>{
+            o.disconnect(), m.disconnect();
+        };
+    }, []);
+    const j = (0, _sidenavbartypes.isSidenavMoving)(w), Ae = _react.useCallback(()=>{
+        if (j) return;
+        const o = !s;
+        if (!z) {
+            Oe(o), M === null || M === void 0 ? void 0 : M(o);
+            return;
+        }
+        M === null || M === void 0 ? void 0 : M(o);
+    }, [
+        s,
+        j,
+        z,
+        M
+    ]), We = _react.useMemo(()=>({
+            collapsed: s,
+            collapseState: w,
+            isMotionOff: h,
+            doublePanel: c,
+            panelOpenForItemId: D,
+            setPanelOpenForItemId: f,
+            selectItemAndClosePanel: ie,
+            containerRef: L,
+            selectedItemId: v !== null && v !== void 0 ? v : null
+        }), [
+        s,
+        w,
+        h,
+        c,
+        D,
+        ie,
+        L,
+        v
+    ]), _e = (0, _sidenavbarkeyboard.useSidenavRailKeyboard)(L), ze = s ? _sidenavbarcssmistica.COLLAPSED_WIDTH : Q;
+    process.env.NODE_ENV !== "production" && e && Jn(e);
+    const i = (0, _themevariantcontext.normalizeVariant)(a);
+    if (Ce) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_sidenavbarmobile.SidenavBarMobile, {
+        entries: e,
+        "aria-label": ee,
+        variant: i,
+        logo: O,
+        headerSlot: X,
+        footerSlot: b,
+        selectedItemId: v !== null && v !== void 0 ? v : null,
+        onSelectedItemIdChange: A,
+        dataAttributes: Y
+    });
+    const K = {
+        collapsed: s,
+        state: w
+    }, le = O === void 0 || O === !0, $ = (0, _sidenavbardata.renderSidenavLogo)(O, K, /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
+        size: _sidenavbarcssmistica.LOGO_SIZE,
+        type: "isotype"
+    })), de = p ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
+        Icon: s ? _iconpanelexpandregular.default : _iconpanelcollapseregular.default,
+        type: "neutral",
+        backgroundType: "transparent",
+        small: !0,
+        onPress: Ae,
+        "aria-label": s ? W.sidenavExpand || _(_texttokens.sidenavExpand) : W.sidenavCollapse || _(_texttokens.sidenavCollapse),
+        "aria-expanded": !s
+    }) : null, q = (0, _sidenavbardata.renderSidenavSlot)(X, K), ce = (0, _sidenavbardata.renderSidenavSlot)(b, K), I = !!($ || de || q), He = d && (0, _boxed.shouldShowBoxedBorder)(i, Le, Be.showBoxedBorder), N = c && D && e ? xe(e, D) : void 0, k = N === null || N === void 0 ? void 0 : N.children, ue = !!(k === null || k === void 0 ? void 0 : k.length);
+    return N && (k === null || k === void 0 ? void 0 : k.length) && ((x === null || x === void 0 ? void 0 : x.label) !== N.label || (x === null || x === void 0 ? void 0 : x.children) !== k) && Te({
+        itemId: N.id,
+        label: N.label,
+        children: k
+    }), /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
+        variant: i,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_sidenavbarcontext.SidenavBarContext.Provider, {
+            value: We,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("nav", _object_spread_props(_object_spread({
+                ref: L,
+                "aria-label": ee,
+                onKeyDown: _e,
+                className: (0, _classnames.default)(_sidenavbarcssmistica.container, {
+                    [_sidenavbarcssmistica.withRightDivider[i]]: u && !d,
+                    [_sidenavbarcssmistica.boxed]: d,
+                    [_sidenavbarcssmistica.boxedBorder]: He,
+                    [_sidenavbarcssmistica.columnsWhileMoving]: j
+                }),
+                style: (0, _css.applyCssVars)({
+                    [_sidenavbarcssmistica.sidenavWidthVar]: `${ze}px`,
+                    [_sidenavbarcssmistica.sidenavPanelWidthVar]: `${Q}px`,
+                    [_sidenavbarcssmistica.collapseDurationVar]: `${h ? 0 : _sidenavbarcssmistica.COLLAPSE_DURATION_MS}ms`,
+                    [_sidenavbarcssmistica.contentDurationVar]: `${h ? 0 : _sidenavbarcssmistica.CONTENT_DURATION_MS}ms`
+                })
+            }, (0, _dom.getPrefixedDataAttributes)(_object_spread({
+                testid: "SidenavBar"
+            }, Y))), {
+                children: [
+                    /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                        className: (0, _classnames.default)(_sidenavbarcssmistica.mainColumn, {
+                            [_sidenavbarcssmistica.columnSeparator[i]]: ue || Fe
+                        }),
+                        children: [
+                            I && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                                className: (0, _classnames.default)(_sidenavbarcssmistica.headerBase, _sidenavbarcssmistica.regionBackground[i], {
+                                    [_sidenavbarcssmistica.headerNegativeBoxedBackground]: d && i === "negative"
+                                }),
+                                style: C,
+                                children: [
+                                    /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                                        className: (0, _classnames.default)(_sidenavbarcssmistica.headerControls, {
+                                            [_sidenavbarcssmistica.headerControlsCollapsed]: s
+                                        }),
+                                        children: [
+                                            $ && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                className: (0, _classnames.default)(_sidenavbarcssmistica.logo, {
+                                                    [_sidenavbarcssmistica.logoDefault]: le,
+                                                    [_sidenavbarcssmistica.logoCollapsed]: s
+                                                }),
+                                                "aria-hidden": le || void 0,
+                                                children: $
+                                            }),
+                                            de
+                                        ]
+                                    }),
+                                    q && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        className: (0, _classnames.default)(_sidenavbarcssmistica.headerSlot, {
+                                            [_sidenavbarcssmistica.headerSlotCollapsed]: s
+                                        }),
+                                        children: q
+                                    })
+                                ]
+                            }),
+                            /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                                ref: y,
+                                className: (0, _classnames.default)(_sidenavbarcssmistica.bodyBase, _sidenavbarcssmistica.regionBackground[i], {
+                                    [_sidenavbarcssmistica.bodyWithFixedFooter]: !!b && T
+                                }),
+                                style: C,
+                                onFocus: (o)=>{
+                                    const m = o.target;
+                                    try {
+                                        m.matches(":focus-visible") && m.scrollIntoView({
+                                            block: "nearest"
+                                        });
+                                    } catch (e) {}
+                                },
+                                children: [
+                                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        ref: U
+                                    }),
+                                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        className: (0, _classnames.default)(_sidenavbarcssmistica.headerScrollSpacer, {
+                                            [_sidenavbarcssmistica.regionBackground[i]]: I && H
+                                        }),
+                                        style: I && H ? C : void 0,
+                                        children: I && H && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                            className: (0, _classnames.default)(_sidenavbarcssmistica.scrollSpacerDivider, _sidenavbarcssmistica.scrollDividerVariant[i])
+                                        })
+                                    }),
+                                    e && // The body is the list of the first level. Each entry is one of its items.
+                                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        className: _sidenavbarcssmistica.bodyContent,
+                                        role: "list",
+                                        children: Qn(e)
+                                    }),
+                                    b && !T && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                        children: [
+                                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                ref: R
+                                            }),
+                                            P && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                className: (0, _classnames.default)(_sidenavbarcssmistica.scrollDivider, _sidenavbarcssmistica.footerScrollDivider, _sidenavbarcssmistica.scrollDividerVariant[i])
+                                            }),
+                                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                className: (0, _classnames.default)(_sidenavbarcssmistica.footerBase, _sidenavbarcssmistica.regionBackground[i], {
+                                                    [_sidenavbarcssmistica.footerCollapsed]: s
+                                                }),
+                                                style: C,
+                                                children: ce
+                                            })
+                                        ]
+                                    }),
+                                    b && T && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                        children: [
+                                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                ref: R
+                                            }),
+                                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                className: (0, _classnames.default)(_sidenavbarcssmistica.footerScrollSpacer, {
+                                                    [_sidenavbarcssmistica.regionBackground[i]]: P
+                                                }),
+                                                style: P ? C : void 0,
+                                                children: P && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                    className: (0, _classnames.default)(_sidenavbarcssmistica.scrollSpacerDivider, _sidenavbarcssmistica.scrollDividerVariant[i])
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            b && T && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                className: (0, _classnames.default)(_sidenavbarcssmistica.footerBase, _sidenavbarcssmistica.footerFixed, _sidenavbarcssmistica.regionBackground[i], {
+                                    [_sidenavbarcssmistica.footerCollapsed]: s
+                                }),
+                                style: C,
+                                children: ce
+                            })
+                        ]
+                    }),
+                    x && /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
+                        in: ue,
+                        timeout: h ? 0 : _sidenavbarcssmistica.COLLAPSE_DURATION_MS,
+                        nodeRef: ne,
+                        classNames: _sidenavbarcssmistica.doublePanelTransitionClasses,
+                        appear: !0,
+                        mountOnEnter: !0,
+                        unmountOnExit: !0,
+                        onEnter: ()=>ae(!0),
+                        onExited: ()=>ae(!1),
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_sidenavbarpanel.SidenavDoublePanel, {
+                            ref: ne,
+                            itemId: x.itemId,
+                            label: x.label,
+                            variant: i,
+                            backgroundColor: F,
+                            children: x.children.map((o)=>(0, _sidenavbarsecondlevelitem.renderSidenavSecondLevelItem)(o, {
+                                    placement: "panel"
+                                }))
+                        })
+                    })
+                ]
+            }))
+        })
+    });
+};

package/dist/skeletons.css-mistica.js

@@ -19,16 +19,16 @@ _export(exports, {
         return r;
     },
     get line () {
-        return n;
+        return p;
     },
     get row () {
-        return p;
+        return n;
     }
 });
 /* empty css                                     */ /* empty css                                     */ var o = {
-    default: "v17_3_zopolw5 v17_3_zopolw0 v17_3_1y2v1nf99",
-    alternative: "v17_3_zopolw6 v17_3_zopolw1 v17_3_1y2v1nf99",
-    brand: "v17_3_zopolw7 v17_3_zopolw2 v17_3_1y2v1nf9c",
-    negative: "v17_3_zopolw8 v17_3_zopolw3 v17_3_1y2v1nf9b",
-    media: "v17_3_zopolw9 v17_3_zopolw4 v17_3_1y2v1nf9b"
-}, l = "v17_3_zopolwc v17_3_zopolwb v17_3_1y2v1nfrc", p = "v17_3_zopolwd v17_3_1y2v1nfra v17_3_1y2v1nfrp v17_3_1y2v1nfrj", r = "v17_3_zopolwe v17_3_1y2v1nfrs v17_3_1y2v1nfru", n = "v17_3_zopolwg v17_3_zopolwf v17_3_1y2v1nfrt";
+    default: "v17_4_zopolw5 v17_4_zopolw0 v17_4_1y2v1nf9d",
+    alternative: "v17_4_zopolw6 v17_4_zopolw1 v17_4_1y2v1nf9d",
+    brand: "v17_4_zopolw7 v17_4_zopolw2 v17_4_1y2v1nf9g",
+    negative: "v17_4_zopolw8 v17_4_zopolw3 v17_4_1y2v1nf9f",
+    media: "v17_4_zopolw9 v17_4_zopolw4 v17_4_1y2v1nf9f"
+}, l = "v17_4_zopolwc v17_4_zopolwb v17_4_1y2v1nfrg", n = "v17_4_zopolwd v17_4_1y2v1nfre v17_4_1y2v1nfrt v17_4_1y2v1nfrn", r = "v17_4_zopolwe v17_4_1y2v1nfrw v17_4_1y2v1nfry", p = "v17_4_zopolwg v17_4_zopolwf v17_4_1y2v1nfrx";

package/dist/skins/blau.js

@@ -86,6 +86,8 @@ const e = {
             backgroundContainerNegative: (0, _color.applyAlpha)(e.darkModeBlack, 0.4),
             backgroundContainerBrandOverBrand: e.blauBluePrimary30,
             backgroundContainerAlternative: e.blauBluePrimary20,
+            backgroundContainerAlternativeOverAlternative: e.white,
+            backgroundContainerAlternativeOverBrand: e.blauBluePrimary30,
             backgroundOverlay: (0, _color.applyAlpha)(e.blauBlueSecondary, 0.75),
             backgroundSkeleton: e.grey3,
             backgroundSkeletonInverse: e.blauBlueSecondary,
@@ -132,12 +134,12 @@ const e = {
             buttonLinkBackgroundBrandPressed: (0, _color.applyAlpha)(e.white, 0.15),
             buttonLinkBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.15),
             buttonLinkNeutralBackgroundPressed: e.grey1,
-            buttonLinkNeutralBackgroundBrand: e.white,
-            buttonLinkNeutralBackgroundBrandPressed: e.grey1,
-            buttonLinkNeutralBackgroundNegative: e.white,
-            buttonLinkNeutralBackgroundNegativePressed: e.grey1,
-            buttonLinkNeutralBackgroundMedia: e.white,
-            buttonLinkNeutralBackgroundMediaPressed: e.grey1,
+            buttonLinkNeutralBackgroundBrand: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: (0, _color.applyAlpha)(e.white, 0.15),
+            buttonLinkNeutralBackgroundNegative: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: (0, _color.applyAlpha)(e.white, 0.15),
+            buttonLinkNeutralBackgroundMedia: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.15),
             buttonPrimaryBackground: e.blauBlueSecondary,
             buttonPrimaryBackgroundInverse: e.blauBlueSecondary,
             buttonPrimaryBackgroundNegative: e.white,
@@ -203,9 +205,9 @@ const e = {
             textLinkSnackbar: e.blauPurple30,
             textLinkNeutral: e.grey6,
             textLinkNeutralBrand: e.grey6,
-            textLinkNeutralNegative: e.grey6,
+            textLinkNeutralNegative: e.white,
             textLinkNeutralAlternative: e.grey6,
-            textLinkNeutralMedia: e.grey6,
+            textLinkNeutralMedia: e.white,
             textActivated: e.blauBlueSecondary,
             textBrand: e.blauBlueSecondary,
             inputBorder: e.grey4,
@@ -393,6 +395,8 @@ const e = {
             backgroundContainerNegative: e.darkModeGrey,
             backgroundContainerBrandOverBrand: e.darkModeGrey,
             backgroundContainerAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverAlternative: e.darkModeGrey,
+            backgroundContainerAlternativeOverBrand: e.darkModeGrey,
             backgroundOverlay: (0, _color.applyAlpha)(e.darkModeGrey, 0.8),
             backgroundSkeleton: e.darkModeGrey,
             backgroundSkeletonInverse: e.darkModeGrey,