@telefonica/mistica 17.3.0 → 17.4.0

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

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import type { DataAttributes } from './utils/types';
+import type { SidenavAsset } from './sidenav-bar-types';
+/**
+ * Where a row stands. The rail (a first-level row) and the accordion (a second-level row under its parent)
+ * move with the bar when it collapses. A panel (the dialog panel, or the second column) never moves with
+ * it, so a row of a panel always sees a bar at rest expanded.
+ */
+type SidenavRowPlacement = 'rail' | 'accordion' | 'panel';
+/** Props that make the row navigate. The item builds them with `useSidenavNavigation`. */
+type SidenavRowNavigationProps = {
+    onPress: () => Promise<void>;
+} | {
+    href: string;
+    newTab?: boolean;
+    onNavigate: () => Promise<void>;
+} | {
+    to: string;
+    newTab?: boolean;
+    onNavigate: () => Promise<void>;
+};
+/** Props that make the row open and close its children instead of navigating. */
+type SidenavRowToggleProps = {
+    onPress: () => void;
+    expanded: boolean;
+    /** Id of the dialog panel that the row opens, when it opens one. */
+    controls?: string;
+};
+type SidenavRowProps = {
+    /** Id of the item, written to the DOM so the keyboard code and the tests find the row. */
+    id?: string;
+    label: string;
+    asset?: SidenavAsset;
+    /** Hide the asset without removing it from the data. The collapsed rail always shows it. */
+    showAsset?: boolean;
+    rightSlot?: React.ReactNode;
+    /** Paint the selected background. A parent takes it for a hidden selected descendant. */
+    showBackground?: boolean;
+    /** Paint the accent bar. Only the selected item itself takes it, never a parent of it. */
+    showAccent?: boolean;
+    /** Id written on the label, so the accordion list can take its name from it. */
+    labelId?: string;
+    /** Render the chevron of a parent item, rotated when its children are open. */
+    chevron?: {
+        rotated: boolean;
+        direction: 'down' | 'right';
+    };
+    /**
+     * Where the row stands, which tells it whether the collapse motion of the bar reaches it. The context
+     * gives the phase of that motion, and it cannot tell the place.
+     */
+    placement: SidenavRowPlacement;
+    /** Show the label as a tooltip on the right, for the collapsed rail. */
+    tooltip?: boolean;
+    /** Present when the row navigates. Mutually exclusive with `toggle`. */
+    navigation?: SidenavRowNavigationProps;
+    /** Present when the row opens and closes its children. Mutually exclusive with `navigation`. */
+    toggle?: SidenavRowToggleProps;
+    /** True when the row is the current page, or holds it among its children. */
+    current?: boolean;
+    dataAttributes?: DataAttributes;
+};
+/**
+ * The visible row of an item, at both levels: the accent, the asset, the label, the right slot, the
+ * chevron, and the tooltip of the collapsed rail. It holds no state: `SidenavFirstLevelItem` and
+ * `SidenavSecondLevelItem` decide what the row shows, and this component paints it.
+ */
+declare const SidenavRow: ({ id, label, asset, showAsset, rightSlot, showBackground, showAccent, labelId, chevron, placement, tooltip, navigation, toggle, current, dataAttributes, }: SidenavRowProps) => JSX.Element;
+/**
+ * Builds the props that make a row navigate. Every navigation of the sidenav reports the new selection
+ * and closes the open panel in one call, so the selection does not reopen the column that the press
+ * closed.
+ */
+declare const useSidenavNavigation: (itemId: string, props: {
+    onPress?: () => void;
+    href?: string;
+    to?: string;
+    newTab?: boolean;
+    onNavigate?: () => void | Promise<void>;
+}) => SidenavRowNavigationProps | undefined;
+export { SidenavRow, useSidenavNavigation };
+export type { SidenavRowPlacement };

package/dist/sidenav-bar-row.js

@@ -0,0 +1,230 @@
+'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 SidenavRow () {
+        return we;
+    },
+    get useSidenavNavigation () {
+        return xe;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _sidenavbarcssmistica = require("./sidenav-bar.css-mistica.js");
+const _sidenavbarcontext = require("./sidenav-bar-context.js");
+const _sidenavbarmotion = require("./sidenav-bar-motion.js");
+const _dom = require("./utils/dom.js");
+const _themevariantcontext = require("./theme-variant-context.js");
+const _touchable = /*#__PURE__*/ _interop_require_default(require("./touchable.js"));
+const _tooltip = /*#__PURE__*/ _interop_require_default(require("./tooltip.js"));
+const _text = require("./text.js");
+const _iconchevron = /*#__PURE__*/ _interop_require_default(require("./icons/icon-chevron.js"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+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 we = (param)=>{
+    let { id: s, label: e, asset: a, showAsset: r = !0, rightSlot: l, showBackground: S = !1, showAccent: R = !1, labelId: g, chevron: h, placement: P, tooltip: W = !1, navigation: b, toggle: c, current: L = !1, dataAttributes: V } = param;
+    const n = (0, _themevariantcontext.useThemeVariant)(), { collapseState: y } = (0, _sidenavbarcontext.useSidenavBarContext)(), u = P === "panel" ? "expanded" : y, o = u === "collapsed" || u === "collapsing", p = u !== "expanded";
+    let d = null;
+    typeof a == "function" ? d = /* @__PURE__ */ (0, _jsxruntime.jsx)(a, {
+        size: 20,
+        color: "currentColor"
+    }) : a && (d = a);
+    const z = r && d ? /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
+        className: (0, _classnames.default)(_sidenavbarcssmistica.itemAsset, _sidenavbarcssmistica.itemAssetVariant[n]),
+        children: d
+    }) : null, { ref: F, frozenWidth: m } = (0, _sidenavbarmotion.useRestWidth)(p), I = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        ref: F,
+        id: g,
+        className: (0, _classnames.default)(_sidenavbarcssmistica.itemLabel, {
+            [_sidenavbarcssmistica.itemLabelCollapsed]: o,
+            [_sidenavbarcssmistica.itemLabelFrozenWidth]: m !== void 0,
+            [_sidenavbarcssmistica.itemLabelKeepsWidth]: p && m === void 0
+        }),
+        style: m !== void 0 ? {
+            width: m
+        } : void 0,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            className: _sidenavbarcssmistica.itemLabelContent,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                regular: !0,
+                color: "inherit",
+                children: e
+            })
+        })
+    }), f = (0, _classnames.default)(_sidenavbarcssmistica.itemTouchable, _sidenavbarcssmistica.itemTouchableVariant[n], {
+        [_sidenavbarcssmistica.itemTouchableSelected[n]]: S,
+        [_sidenavbarcssmistica.itemTouchableCollapsed]: o
+    }), v = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            z,
+            I,
+            l && /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
+                className: (0, _classnames.default)(_sidenavbarcssmistica.itemRightSlot, {
+                    [_sidenavbarcssmistica.itemRightSlotCollapsed]: o
+                }),
+                children: l
+            }),
+            h && /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
+                className: (0, _classnames.default)(_sidenavbarcssmistica.itemChevron, _sidenavbarcssmistica.itemChevronVariant[n], {
+                    [_sidenavbarcssmistica.itemChevronRotated]: h.rotated,
+                    [_sidenavbarcssmistica.itemChevronCollapsed]: o
+                }),
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevron.default, {
+                    size: 16,
+                    color: "currentColor",
+                    direction: h.direction
+                })
+            })
+        ]
+    }), C = L ? "page" : void 0, N = c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
+        className: f,
+        onPress: c.onPress,
+        "aria-expanded": c.expanded,
+        "aria-controls": c.controls,
+        "aria-label": e,
+        dataAttributes: {
+            "parent-item": "true"
+        },
+        children: v
+    }) : b ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, _object_spread_props(_object_spread({}, b), {
+        className: f,
+        "aria-current": C,
+        "aria-label": o ? e : void 0,
+        children: v
+    })) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        className: f,
+        "aria-current": C,
+        children: v
+    }), w = _object_spread({
+        testid: "SidenavItem"
+    }, V);
+    return s && (w["sidenav-item-id"] = s), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+        className: _sidenavbarcssmistica.itemRow
+    }, (0, _dom.getPrefixedDataAttributes)(w)), {
+        children: [
+            R && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: (0, _classnames.default)(_sidenavbarcssmistica.itemAccent, _sidenavbarcssmistica.itemAccentVariant[n])
+            }),
+            W ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tooltip.default, {
+                position: "right",
+                description: e,
+                target: N,
+                targetStyle: {
+                    flex: 1,
+                    minWidth: 0
+                }
+            }) : N
+        ]
+    }));
+}, xe = (s, e)=>{
+    const { selectItemAndClosePanel: a } = (0, _sidenavbarcontext.useSidenavBarContext)(), r = (l)=>()=>_async_to_generator(function*() {
+                a(s !== null && s !== void 0 ? s : null), yield l === null || l === void 0 ? void 0 : l();
+            })();
+    if (e.onPress) return {
+        onPress: r(e.onPress)
+    };
+    if (e.href !== void 0) return {
+        href: e.href,
+        newTab: e.newTab,
+        onNavigate: r(e.onNavigate)
+    };
+    if (e.to !== void 0) return {
+        to: e.to,
+        newTab: e.newTab,
+        onNavigate: r(e.onNavigate)
+    };
+};

package/dist/sidenav-bar-second-level-item.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import type { SidenavRowPlacement } from './sidenav-bar-row';
+import type { DataAttributes } from './utils/types';
+import type { SidenavAsset, SidenavSecondLevelItem as SidenavSecondLevelItemData } from './sidenav-bar-types';
+/** A second-level row never stands on the rail: it stands in the accordion of its parent, or in a panel. */
+type SidenavSecondLevelPlacement = Exclude<SidenavRowPlacement, 'rail'>;
+type SidenavSecondLevelItemProps = {
+    /** Unique identifier for selection tracking. */
+    id: string;
+    /** Display text. A text longer than the row wraps over several lines, and it never truncates. */
+    label: string;
+    /** Icon component or element. The collapsed rail never shows a second-level row, so it is optional. */
+    asset?: SidenavAsset;
+    /** Custom content on the right side (e.g., Badge). */
+    rightSlot?: React.ReactNode;
+    /**
+     * Where the row stands. The accordion of its parent opens in place and moves with the bar; a panel
+     * (the dialog panel, or the second column) never moves with it. The context alone cannot tell the two
+     * apart, so the parent names the place.
+     */
+    placement: SidenavSecondLevelPlacement;
+    onPress?: () => void;
+    href?: string;
+    to?: string;
+    /** Open link in new tab. @default false */
+    newTab?: boolean;
+    /** Called after navigation. */
+    onNavigate?: () => void | Promise<void>;
+    dataAttributes?: DataAttributes;
+};
+/**
+ * A second-level item. It always navigates, and it never has children of its own, so it holds no state:
+ * it reads the current selection and renders one row.
+ */
+declare const SidenavSecondLevelItem: ({ id, label, asset, rightSlot, placement, dataAttributes, ...navigationProps }: SidenavSecondLevelItemProps) => JSX.Element;
+/**
+ * Renders a second-level item from its data. The accordion of a parent item, the dialog panel and the second
+ * column list the same items, so this is the one place that maps the data to the props of the row.
+ */
+declare const renderSidenavSecondLevelItem: (item: SidenavSecondLevelItemData, { placement }: {
+    placement: SidenavSecondLevelPlacement;
+}) => React.ReactElement;
+export { SidenavSecondLevelItem, renderSidenavSecondLevelItem };

package/dist/sidenav-bar-second-level-item.js

@@ -0,0 +1,89 @@
+'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 SidenavSecondLevelItem () {
+        return h;
+    },
+    get renderSidenavSecondLevelItem () {
+        return b;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _sidenavbarcontext = require("./sidenav-bar-context.js");
+const _sidenavbarrow = require("./sidenav-bar-row.js");
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+const h = (_param)=>{
+    var { id: e, label: o, asset: r, rightSlot: a, placement: s, dataAttributes: d } = _param, c = _object_without_properties(_param, [
+        "id",
+        "label",
+        "asset",
+        "rightSlot",
+        "placement",
+        "dataAttributes"
+    ]);
+    const { selectedItemId: l } = (0, _sidenavbarcontext.useSidenavBarContext)(), i = (0, _sidenavbarrow.useSidenavNavigation)(e, c), n = l === e;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        role: "listitem",
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_sidenavbarrow.SidenavRow, {
+            id: e,
+            label: o,
+            asset: r,
+            rightSlot: a,
+            showBackground: n,
+            showAccent: n,
+            current: n,
+            placement: s,
+            navigation: i,
+            dataAttributes: d
+        })
+    });
+}, b = (e, param)=>{
+    let { placement: o } = param;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(h, {
+        id: e.id,
+        label: e.label,
+        asset: e.asset,
+        rightSlot: e.rightSlot,
+        placement: o,
+        href: e.href,
+        to: e.to,
+        onPress: e.onPress,
+        newTab: e.newTab,
+        onNavigate: e.onNavigate
+    }, e.id);
+};

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { SidenavSectionTitle } from './sidenav-bar-types';
+import type { DataAttributes } from './utils/types';
+type SidenavSectionProps = {
+    /**
+     * Section heading, and accessible name of the list of the section. It is mandatory: a screen reader
+     * needs it to tell one section from another. When the sidenav is collapsed the heading closes and the
+     * items move up, but it still names the list. Give `{text, hidden: true}` to keep the name and paint
+     * no heading.
+     */
+    title: SidenavSectionTitle;
+    /** Renders a divider above the section. @default false */
+    dividerTop?: boolean;
+    /** Renders a divider below the section. @default false */
+    dividerBottom?: boolean;
+    /** Navigation items (`SidenavItem` elements).
+     * @see SidenavItem
+     */
+    children: React.ReactNode;
+    dataAttributes?: DataAttributes;
+};
+declare const SidenavSection: ({ title, dividerTop, dividerBottom, children, dataAttributes, }: SidenavSectionProps) => JSX.Element;
+export { SidenavSection };

package/dist/sidenav-bar-section.js

@@ -0,0 +1,167 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SidenavSection", {
+    enumerable: true,
+    get: function() {
+        return M;
+    }
+});
+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 _themevariantcontext = require("./theme-variant-context.js");
+const _dom = require("./utils/dom.js");
+const _divider = /*#__PURE__*/ _interop_require_default(require("./divider.js"));
+const _text = require("./text.js");
+const _sidenavbarcontext = require("./sidenav-bar-context.js");
+const _sidenavbarmotion = require("./sidenav-bar-motion.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 _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 M = (param)=>{
+    let { title: n, dividerTop: d, dividerBottom: a, children: l, dataAttributes: c } = param;
+    const { collapsed: m, collapseState: p } = (0, _sidenavbarcontext.useSidenavBarContext)(), v = (0, _themevariantcontext.useThemeVariant)(), { text: f, isHeadingVisible: t } = (0, _sidenavbardata.getSidenavSectionTitle)(n), o = _react.useId(), s = t && p !== "expanded", { ref: h, frozenWidth: i } = (0, _sidenavbarmotion.useRestWidth)(s);
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+        className: _sidenavbarcssmistica.section
+    }, (0, _dom.getPrefixedDataAttributes)(_object_spread({
+        testid: "SidenavSection"
+    }, c))), {
+        children: [
+            d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _sidenavbarcssmistica.sectionDividerTop,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                ref: h,
+                id: o,
+                "aria-hidden": "true",
+                className: (0, _classnames.default)(_sidenavbarcssmistica.sectionTitle, _sidenavbarcssmistica.sectionTitleVariant[v], {
+                    [_sidenavbarcssmistica.sectionTitleHidden]: !t,
+                    [_sidenavbarcssmistica.sectionTitleCollapsed]: t && m,
+                    [_sidenavbarcssmistica.sectionTitleKeepsWidth]: s && i === void 0
+                }),
+                style: i !== void 0 ? {
+                    width: i
+                } : void 0,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: _sidenavbarcssmistica.sectionTitleContent,
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                        medium: !0,
+                        color: "inherit",
+                        children: f
+                    })
+                })
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _sidenavbarcssmistica.sectionContent,
+                role: "list",
+                "aria-labelledby": o,
+                children: l
+            }),
+            a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _sidenavbarcssmistica.sectionDividerBottom,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
+            })
+        ]
+    }));
+};