@epam/ai-dial-navigation-panel 1.3.0-dev.260 → 1.3.0-dev.266

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/components/NavigationSidebar/NavigationSidebar.d.ts.map +1 -1
  2. package/index.js +216 -196
  3. package/package.json +4 -4
  4. package/utils/focus.d.ts +3 -0
  5. package/utils/focus.d.ts.map +1 -0
package/components/NavigationSidebar/NavigationSidebar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NavigationSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationSidebar/NavigationSidebar.tsx"],"names":[],"mappings":"AASA,OAAO,EAOL,KAAK,EAAE,EAGR,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAsCpF,2GAA2G;AAC3G,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA2TxD,CAAC"}
1
+ {"version":3,"file":"NavigationSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationSidebar/NavigationSidebar.tsx"],"names":[],"mappings":"AASA,OAAO,EAOL,KAAK,EAAE,EAGR,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAuCpF,2GAA2G;AAC3G,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAoVxD,CAAC"}
package/index.js CHANGED
@@ -1,27 +1,27 @@
1
1
  import { buildCssVars as e, mergeClasses as t } from "@epam/ai-dial-chat-shared";
2
2
  import { Avatar as n, BASE_ICON_SIZE as r, Button as i, DIAL_ICON_SIZE as a, DIAL_KIT_ICON_STROKE as o, Dropdown as s, DropdownItemType as c, ElementSize as l, EllipsisTooltip as u, GhostIconButton as d, IconButton as f, MenuItem as p, MenuItemMark as m, Tooltip as h } from "@epam/ai-dial-ui-kit";
3
- import { Fragment as g, createContext as _, memo as v, useCallback as y, useContext as b, useEffect as x, useId as S, useMemo as C, useRef as w, useState as ee } from "react";
4
- import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
5
- import { IconCheck as O, IconChevronDown as k, IconChevronRight as A, IconChevronUp as te, IconLayoutSidebar as j, IconLogout as ne, IconSettings as M, IconUser as N, IconX as re } from "@tabler/icons-react";
6
- import { BottomSheetShell as P } from "@epam/ai-dial-conversation-input";
3
+ import { Fragment as g, createContext as _, memo as v, useCallback as y, useContext as b, useEffect as x, useId as S, useMemo as C, useRef as w, useState as T } from "react";
4
+ import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
5
+ import { IconCheck as k, IconChevronDown as A, IconChevronRight as j, IconChevronUp as ee, IconLayoutSidebar as M, IconLogout as te, IconSettings as N, IconUser as P, IconX as ne } from "@tabler/icons-react";
6
+ import { BottomSheetShell as F } from "@epam/ai-dial-conversation-input";
7
7
  //#region src/constants/public-class-names.ts
8
- var F = {
8
+ var I = {
9
9
  rail: "dial-navigation-panel-rail",
10
10
  item: "dial-navigation-panel-item",
11
11
  sidebar: "dial-navigation-panel-sidebar",
12
12
  sidebarItem: "dial-navigation-panel-sidebar-item",
13
13
  sidebarFooter: "dial-navigation-panel-sidebar-footer"
14
- }, I = {
14
+ }, L = {
15
15
  rail: "_rail_1hxk4_1",
16
16
  item: "_item_1hxk4_6",
17
17
  itemActive: "_itemActive_1hxk4_33",
18
18
  itemFilled: "_itemFilled_1hxk4_38",
19
19
  itemFilledOutline: "_itemFilledOutline_1hxk4_79"
20
- }, L = (e, t) => /* @__PURE__ */ E("a", {
20
+ }, R = (e, t) => /* @__PURE__ */ D("a", {
21
21
  href: e.href,
22
22
  className: "contents",
23
23
  children: t
24
- }), R = v(({ items: n, labels: r, logo: i, footer: s, renderLink: c = L, styles: l }) => {
24
+ }), z = v(({ items: n, labels: r, logo: i, footer: s, renderLink: c = R, styles: l }) => {
25
25
  let { colors: u, typography: d, className: p, cssVars: m } = l ?? {}, h = S().replace(/[^\w-]/g, ""), _ = `np-hover-gradient-${h}`, v = `np-active-gradient-${h}`, y = C(() => e({
26
26
  "--np-bg": u?.background,
27
27
  "--np-item-text": u?.itemText,
@@ -38,64 +38,64 @@ var F = {
38
38
  _,
39
39
  v
40
40
  ]);
41
- return /* @__PURE__ */ D("nav", {
41
+ return /* @__PURE__ */ O("nav", {
42
42
  "aria-label": r.ariaLabel,
43
43
  style: {
44
44
  ...m,
45
45
  ...y
46
46
  },
47
- className: t(I.rail, "relative z-10 flex h-full w-[60px] flex-col justify-between shadow-sm", d?.fontClassName, p, F.rail),
47
+ className: t(L.rail, "relative z-10 flex h-full w-[60px] flex-col justify-between shadow-sm", d?.fontClassName, p, I.rail),
48
48
  children: [
49
- /* @__PURE__ */ E("svg", {
49
+ /* @__PURE__ */ D("svg", {
50
50
  "aria-hidden": !0,
51
51
  className: "absolute size-0",
52
52
  focusable: "false",
53
- children: /* @__PURE__ */ D("defs", { children: [/* @__PURE__ */ D("linearGradient", {
53
+ children: /* @__PURE__ */ O("defs", { children: [/* @__PURE__ */ O("linearGradient", {
54
54
  id: _,
55
55
  gradientUnits: "userSpaceOnUse",
56
56
  x1: "30.2",
57
57
  y1: "-2.5",
58
58
  x2: "-4.6",
59
59
  y2: "25.2",
60
- children: [/* @__PURE__ */ E("stop", {
60
+ children: [/* @__PURE__ */ D("stop", {
61
61
  offset: "0",
62
62
  stopColor: "#1d4ed8"
63
- }), /* @__PURE__ */ E("stop", {
63
+ }), /* @__PURE__ */ D("stop", {
64
64
  offset: "1",
65
65
  stopColor: "#885df2"
66
66
  })]
67
- }), /* @__PURE__ */ D("linearGradient", {
67
+ }), /* @__PURE__ */ O("linearGradient", {
68
68
  id: v,
69
69
  gradientUnits: "userSpaceOnUse",
70
70
  x1: "31.3",
71
71
  y1: "-1.7",
72
72
  x2: "0.2",
73
73
  y2: "20.4",
74
- children: [/* @__PURE__ */ E("stop", {
74
+ children: [/* @__PURE__ */ D("stop", {
75
75
  offset: "0",
76
76
  stopColor: "#1d4ed8"
77
- }), /* @__PURE__ */ E("stop", {
77
+ }), /* @__PURE__ */ D("stop", {
78
78
  offset: "1",
79
79
  stopColor: "#885df2"
80
80
  })]
81
81
  })] })
82
82
  }),
83
- /* @__PURE__ */ D("div", {
83
+ /* @__PURE__ */ O("div", {
84
84
  className: "flex flex-col items-center",
85
- children: [i && /* @__PURE__ */ E("a", {
85
+ children: [i && /* @__PURE__ */ D("a", {
86
86
  href: i.href ?? "/",
87
87
  "aria-label": i.ariaLabel,
88
88
  className: "flex h-16 w-full shrink-0 items-center justify-center",
89
- children: /* @__PURE__ */ E("span", {
89
+ children: /* @__PURE__ */ D("span", {
90
90
  style: { backgroundImage: `url("${i.iconUrl}")` },
91
91
  className: "h-6 w-6 bg-contain bg-center bg-no-repeat"
92
92
  })
93
- }), /* @__PURE__ */ E("div", {
93
+ }), /* @__PURE__ */ D("div", {
94
94
  className: "flex flex-col items-center gap-2 p-2",
95
95
  children: n.map((e) => {
96
96
  let n = !!e.isActive && !!e.activeIcon, r = n && e.activeIcon || e.icon;
97
- return /* @__PURE__ */ E(g, { children: c(e, /* @__PURE__ */ E(f, {
98
- icon: /* @__PURE__ */ E(r, {
97
+ return /* @__PURE__ */ D(g, { children: c(e, /* @__PURE__ */ D(f, {
98
+ icon: /* @__PURE__ */ D(r, {
99
99
  size: a.LG,
100
100
  stroke: o
101
101
  }),
@@ -103,7 +103,7 @@ var F = {
103
103
  "aria-current": e.isActive ? "page" : void 0,
104
104
  tooltipProps: { tooltip: e.label },
105
105
  tabIndex: -1,
106
- className: t(I.item, "rounded-xl", e.isActive && I.itemActive, n && I.itemFilled, e.isActive && !n && I.itemFilledOutline, F.item)
106
+ className: t(L.item, "rounded-xl", e.isActive && L.itemActive, n && L.itemFilled, e.isActive && !n && L.itemFilledOutline, I.item)
107
107
  })) }, e.id);
108
108
  })
109
109
  })]
@@ -111,31 +111,39 @@ var F = {
111
111
  s
112
112
  ]
113
113
  });
114
- }), ie = /* @__PURE__ */ function(e) {
114
+ }), B = /* @__PURE__ */ function(e) {
115
115
  return e.Sidebar = "sidebar", e.Drawer = "drawer", e;
116
- }({}), z = {
116
+ }({}), V = [
117
+ "a[href]",
118
+ "button:not([disabled])",
119
+ "input:not([disabled]):not([type=\"hidden\"])",
120
+ "select:not([disabled])",
121
+ "textarea:not([disabled])",
122
+ "[tabindex]",
123
+ "[contenteditable=\"true\"]"
124
+ ].join(","), re = (e) => Array.from(e.querySelectorAll(V)).filter((e) => e.tabIndex >= 0 && !e.closest("[inert], [hidden], [aria-hidden=\"true\"]")), H = {
117
125
  stopStart: "_stopStart_8i550_1",
118
126
  stopEnd: "_stopEnd_8i550_5"
119
- }, ae = ({ activeGradientId: e }) => /* @__PURE__ */ E("svg", {
127
+ }, ie = ({ activeGradientId: e }) => /* @__PURE__ */ D("svg", {
120
128
  "aria-hidden": !0,
121
129
  className: "absolute size-0",
122
130
  focusable: "false",
123
- children: /* @__PURE__ */ E("defs", { children: /* @__PURE__ */ D("linearGradient", {
131
+ children: /* @__PURE__ */ D("defs", { children: /* @__PURE__ */ O("linearGradient", {
124
132
  id: e,
125
133
  gradientUnits: "userSpaceOnUse",
126
134
  x1: "31.3",
127
135
  y1: "-1.7",
128
136
  x2: "0.2",
129
137
  y2: "20.4",
130
- children: [/* @__PURE__ */ E("stop", {
138
+ children: [/* @__PURE__ */ D("stop", {
131
139
  offset: "0",
132
- className: z.stopStart
133
- }), /* @__PURE__ */ E("stop", {
140
+ className: H.stopStart
141
+ }), /* @__PURE__ */ D("stop", {
134
142
  offset: "1",
135
- className: z.stopEnd
143
+ className: H.stopEnd
136
144
  })]
137
145
  }) })
138
- }), B = {
146
+ }), U = {
139
147
  sidebar: "_sidebar_1w4pz_1",
140
148
  sidebarColumn: "_sidebarColumn_1w4pz_7",
141
149
  item: "_item_1w4pz_16",
@@ -144,163 +152,175 @@ var F = {
144
152
  itemFilledOutline: "_itemFilledOutline_1w4pz_45",
145
153
  itemIcon: "_itemIcon_1w4pz_49",
146
154
  footer: "_footer_1w4pz_55"
147
- }, oe = (e, t, n) => /* @__PURE__ */ E("a", {
155
+ }, ae = (e, t, n) => /* @__PURE__ */ D("a", {
148
156
  href: e.href,
149
157
  ...n,
150
158
  children: t
151
- }), se = (e, t) => e ? "w-[320px] max-w-full" : t ? "w-[72px]" : "w-[336px]", ce = (e, n) => e ? t("fixed inset-y-0 inset-s-0 z-50 flex flex-col overflow-hidden shadow-sm outline-none", "transition-[transform,visibility] duration-200 ease-in-out motion-reduce:transition-none", n ? "visible translate-x-0" : "invisible ltr:-translate-x-full rtl:translate-x-full") : t(B.sidebarColumn, "relative z-10 flex h-full shrink-0 flex-col overflow-hidden shadow-sm"), V = v(({ items: n, labels: r, variant: i = ie.Sidebar, isCollapsed: s = !1, onToggleCollapse: c, isOpen: u = !1, onClose: f, id: p, logo: m, renderLink: _ = oe, children: v, userMenu: y, footerActions: b, styles: ee }) => {
152
- let { colors: O, typography: k, className: A, cssVars: te } = ee ?? {}, ne = k?.fontClassName ?? "dial-small-text", M = i === ie.Drawer, N = !M && s, P = S(), I = p ?? P, L = `np-sidebar-gradient-${P.replace(/[^\w-]/g, "")}`, R = w(null), z = w(null), V = w(u);
159
+ }), oe = (e, t) => e ? "w-[320px] max-w-full" : t ? "w-[72px]" : "w-[336px]", se = (e, n) => e ? t("fixed inset-y-0 inset-s-0 z-50 flex flex-col overflow-hidden shadow-sm outline-none", "transition-[transform,visibility] duration-200 ease-in-out motion-reduce:transition-none", n ? "visible translate-x-0" : "invisible ltr:-translate-x-full rtl:translate-x-full") : t(U.sidebarColumn, "relative z-10 flex h-full shrink-0 flex-col overflow-hidden shadow-sm"), ce = v(({ items: n, labels: r, variant: i = B.Sidebar, isCollapsed: s = !1, onToggleCollapse: c, isOpen: u = !1, onClose: f, id: p, logo: m, renderLink: _ = ae, children: v, userMenu: y, footerActions: b, styles: T }) => {
160
+ let { colors: k, typography: A, className: j, cssVars: ee } = T ?? {}, te = A?.fontClassName ?? "dial-small-text", N = i === B.Drawer, P = !N && s, F = S(), L = p ?? F, R = `np-sidebar-gradient-${F.replace(/[^\w-]/g, "")}`, z = w(null), V = w(null), H = w(u);
153
161
  x(() => {
154
- let e = V.current;
155
- V.current = u, M && (u && !e ? (z.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, R.current?.focus()) : !u && e && (z.current?.focus(), z.current = null));
156
- }, [M, u]);
157
- let H = (e) => {
158
- e.currentTarget.contains(e.target) && e.key === "Escape" && f?.();
159
- }, U = C(() => e({
160
- "--np-sidebar-bg": O?.background,
161
- "--np-sidebar-item-text": O?.itemText,
162
- "--np-sidebar-item-hover-bg": O?.itemHoverBackground,
163
- "--np-sidebar-item-selected-bg": O?.itemSelectedBackground,
164
- "--np-sidebar-focus-outline": O?.focusOutline,
165
- "--np-sidebar-gradient-start": O?.itemActiveGradientStart,
166
- "--np-sidebar-gradient-end": O?.itemActiveGradientEnd,
167
- "--np-sidebar-item-active-icon": O?.itemActiveIcon ?? `url(#${L})`,
168
- "--np-sidebar-font-family": k?.fontFamily
162
+ let e = H.current;
163
+ H.current = u, N && (u && !e ? (V.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, z.current?.focus()) : !u && e && (V.current?.focus(), V.current = null));
164
+ }, [N, u]);
165
+ let ce = (e) => {
166
+ if (!e.currentTarget.contains(e.target)) return;
167
+ if (e.key === "Escape") {
168
+ f?.();
169
+ return;
170
+ }
171
+ if (e.key !== "Tab") return;
172
+ let t = re(e.currentTarget);
173
+ if (t.length === 0) {
174
+ e.preventDefault();
175
+ return;
176
+ }
177
+ let n = t[0], r = t[t.length - 1], i = document.activeElement;
178
+ e.shiftKey && (i === n || i === e.currentTarget) ? (e.preventDefault(), r.focus()) : !e.shiftKey && i === r && (e.preventDefault(), n.focus());
179
+ }, W = C(() => e({
180
+ "--np-sidebar-bg": k?.background,
181
+ "--np-sidebar-item-text": k?.itemText,
182
+ "--np-sidebar-item-hover-bg": k?.itemHoverBackground,
183
+ "--np-sidebar-item-selected-bg": k?.itemSelectedBackground,
184
+ "--np-sidebar-focus-outline": k?.focusOutline,
185
+ "--np-sidebar-gradient-start": k?.itemActiveGradientStart,
186
+ "--np-sidebar-gradient-end": k?.itemActiveGradientEnd,
187
+ "--np-sidebar-item-active-icon": k?.itemActiveIcon ?? `url(#${R})`,
188
+ "--np-sidebar-font-family": A?.fontFamily
169
189
  }), [
170
- O,
171
- k?.fontFamily,
172
- L
173
- ]), W = N ? r.expand ?? "Expand sidebar" : r.collapse ?? "Collapse sidebar", G = r.toggle ?? "Sidebar", K = r.close ?? "Close", q = (e, n) => /* @__PURE__ */ E("span", {
190
+ k,
191
+ A?.fontFamily,
192
+ R
193
+ ]), G = P ? r.expand ?? "Expand sidebar" : r.collapse ?? "Collapse sidebar", K = r.toggle ?? "Sidebar", q = r.close ?? "Close", J = (e, n) => /* @__PURE__ */ D("span", {
174
194
  style: { backgroundImage: `url("${e}")` },
175
195
  className: t("bg-contain bg-center bg-no-repeat", n)
176
- }), J = () => /* @__PURE__ */ E(d, {
177
- icon: /* @__PURE__ */ D("span", {
196
+ }), le = () => /* @__PURE__ */ D(d, {
197
+ icon: /* @__PURE__ */ O("span", {
178
198
  className: "relative block size-6 shrink-0",
179
- children: [N && m && q(m.iconUrl, "absolute inset-0 transition-opacity group-focus-visible/toggle:opacity-0 group-hover/toggle:opacity-0"), /* @__PURE__ */ E(j, {
199
+ children: [P && m && J(m.iconUrl, "absolute inset-0 transition-opacity group-focus-visible/toggle:opacity-0 group-hover/toggle:opacity-0"), /* @__PURE__ */ D(M, {
180
200
  size: a.LG,
181
201
  stroke: o,
182
- className: t("absolute inset-0 rtl:scale-x-[-1]", N && m && "opacity-0 group-hover/toggle:opacity-100 group-focus-visible/toggle:opacity-100"),
202
+ className: t("absolute inset-0 rtl:scale-x-[-1]", P && m && "opacity-0 group-hover/toggle:opacity-100 group-focus-visible/toggle:opacity-100"),
183
203
  "aria-hidden": !0
184
204
  })]
185
205
  }),
186
206
  size: l.Large,
187
- "aria-label": G,
188
- "aria-expanded": !N,
189
- "aria-controls": I,
190
- tooltipProps: { tooltip: W },
207
+ "aria-label": K,
208
+ "aria-expanded": !P,
209
+ "aria-controls": L,
210
+ tooltipProps: { tooltip: G },
191
211
  onClick: c,
192
212
  className: "group/toggle size-10! min-h-0! min-w-0! shrink-0 rounded-full! p-2!"
193
- }), Y = () => /* @__PURE__ */ E(d, {
194
- icon: /* @__PURE__ */ E(re, {
213
+ }), Y = () => /* @__PURE__ */ D(d, {
214
+ icon: /* @__PURE__ */ D(ne, {
195
215
  size: a.LG,
196
216
  stroke: o,
197
217
  "aria-hidden": !0
198
218
  }),
199
219
  size: l.Large,
200
- "aria-label": K,
201
- tooltipProps: { tooltip: K },
220
+ "aria-label": q,
221
+ tooltipProps: { tooltip: q },
202
222
  onClick: f,
203
223
  className: "size-10! min-h-0! min-w-0! shrink-0 rounded-full! p-2!"
204
- }), X = () => m && /* @__PURE__ */ E("a", {
224
+ }), X = () => m && /* @__PURE__ */ D("a", {
205
225
  href: m.href ?? "/",
206
226
  "aria-label": m.ariaLabel,
207
- className: t("flex h-10 items-center", !M && "ps-2"),
208
- children: q(N ? m.iconUrl : m.logoUrl ?? m.iconUrl, N ? "size-6" : "h-6 min-w-[116px]")
209
- }), Z = () => /* @__PURE__ */ D("div", {
227
+ className: t("flex h-10 items-center", !N && "ps-2"),
228
+ children: J(P ? m.iconUrl : m.logoUrl ?? m.iconUrl, P ? "size-6" : "h-6 min-w-[116px]")
229
+ }), Z = () => /* @__PURE__ */ O("div", {
210
230
  className: "flex shrink-0 items-center justify-between ps-4 pe-2 pt-3 pb-2",
211
231
  children: [X(), f && Y()]
212
- }), Q = () => /* @__PURE__ */ D(T, { children: [!(N && c) && X(), c && J()] }), $ = (e) => {
213
- let n = !!e.isActive && !!e.activeIcon, r = n && e.activeIcon || e.icon, i = /* @__PURE__ */ E("span", {
214
- className: t("flex size-6 shrink-0 items-center justify-center", B.itemIcon),
215
- children: /* @__PURE__ */ E(r, {
232
+ }), Q = () => /* @__PURE__ */ O(E, { children: [!(P && c) && X(), c && le()] }), $ = (e) => {
233
+ let n = !!e.isActive && !!e.activeIcon, r = n && e.activeIcon || e.icon, i = /* @__PURE__ */ D("span", {
234
+ className: t("flex size-6 shrink-0 items-center justify-center", U.itemIcon),
235
+ children: /* @__PURE__ */ D(r, {
216
236
  size: a.LG,
217
237
  stroke: o
218
238
  })
219
- }), s = _(e, /* @__PURE__ */ D(T, { children: [i, /* @__PURE__ */ E("span", {
220
- className: N ? "sr-only" : ne,
239
+ }), s = _(e, /* @__PURE__ */ O(E, { children: [i, /* @__PURE__ */ D("span", {
240
+ className: P ? "sr-only" : te,
221
241
  children: e.label
222
242
  })] }), {
223
- className: t("flex items-center rounded-full p-2 no-underline", N ? "size-10 justify-center" : "h-10 w-full gap-2", B.item, e.isActive && B.itemActive, n && B.itemFilled, e.isActive && !n && B.itemFilledOutline, F.sidebarItem),
243
+ className: t("flex items-center rounded-full p-2 no-underline", P ? "size-10 justify-center" : "h-10 w-full gap-2", U.item, e.isActive && U.itemActive, n && U.itemFilled, e.isActive && !n && U.itemFilledOutline, I.sidebarItem),
224
244
  "aria-current": e.isActive ? "page" : void 0
225
245
  });
226
- return /* @__PURE__ */ E("li", { children: N ? /* @__PURE__ */ E(h, {
246
+ return /* @__PURE__ */ D("li", { children: P ? /* @__PURE__ */ D(h, {
227
247
  tooltip: e.label,
228
248
  asChild: !0,
229
249
  children: s
230
250
  }) : s }, e.id);
231
- }, le = N ? /* @__PURE__ */ D(g, { children: [b, y] }) : /* @__PURE__ */ D(g, { children: [y, b] });
232
- return /* @__PURE__ */ D("nav", {
233
- ref: R,
234
- id: I,
251
+ }, ue = P ? /* @__PURE__ */ O(g, { children: [b, y] }) : /* @__PURE__ */ O(g, { children: [y, b] });
252
+ return /* @__PURE__ */ O("nav", {
253
+ ref: z,
254
+ id: L,
235
255
  "aria-label": r.ariaLabel,
236
- tabIndex: M ? -1 : void 0,
237
- inert: M && !u,
238
- onKeyDown: M ? H : void 0,
256
+ tabIndex: N ? -1 : void 0,
257
+ inert: N && !u,
258
+ onKeyDown: N ? ce : void 0,
239
259
  style: {
240
- ...te,
241
- ...U
260
+ ...ee,
261
+ ...W
242
262
  },
243
- className: t(B.sidebar, ce(M, u), se(M, N), A, F.sidebar),
263
+ className: t(U.sidebar, se(N, u), oe(N, P), j, I.sidebar),
244
264
  children: [
245
- !O?.itemActiveIcon && /* @__PURE__ */ E(ae, { activeGradientId: L }),
246
- M ? /* @__PURE__ */ D("div", {
265
+ !k?.itemActiveIcon && /* @__PURE__ */ D(ie, { activeGradientId: R }),
266
+ N ? /* @__PURE__ */ O("div", {
247
267
  className: "flex shrink-0 flex-col",
248
- children: [Z(), /* @__PURE__ */ E("ul", {
268
+ children: [Z(), /* @__PURE__ */ D("ul", {
249
269
  className: "m-0 flex list-none flex-col gap-1 p-2",
250
270
  children: n.map($)
251
271
  })]
252
- }) : /* @__PURE__ */ D("div", {
272
+ }) : /* @__PURE__ */ O("div", {
253
273
  className: "flex shrink-0 flex-col gap-4 p-4",
254
- children: [/* @__PURE__ */ E("div", {
274
+ children: [/* @__PURE__ */ D("div", {
255
275
  className: "flex h-10 items-center justify-between",
256
276
  children: Q()
257
- }), /* @__PURE__ */ E("ul", {
277
+ }), /* @__PURE__ */ D("ul", {
258
278
  className: "m-0 flex list-none flex-col gap-1 p-0",
259
279
  children: n.map($)
260
280
  })]
261
281
  }),
262
- /* @__PURE__ */ E("div", {
263
- inert: N,
264
- className: t("min-h-0 flex-1 overflow-hidden", N && "invisible"),
265
- children: /* @__PURE__ */ E("div", {
266
- className: t("flex h-full flex-col", M ? "w-full" : "w-[336px]"),
282
+ /* @__PURE__ */ D("div", {
283
+ inert: P,
284
+ className: t("min-h-0 flex-1 overflow-hidden", P && "invisible"),
285
+ children: /* @__PURE__ */ D("div", {
286
+ className: t("flex h-full flex-col", N ? "w-full" : "w-[336px]"),
267
287
  children: v
268
288
  })
269
289
  }),
270
- /* @__PURE__ */ E("div", {
271
- className: t("flex shrink-0 px-4 py-3 shadow-lg", B.footer, N ? "flex-col items-start gap-2" : "items-center justify-between gap-2", F.sidebarFooter),
272
- children: le
290
+ /* @__PURE__ */ D("div", {
291
+ className: t("flex shrink-0 px-4 py-3 shadow-lg", U.footer, P ? "flex-col items-start gap-2" : "items-center justify-between gap-2", I.sidebarFooter),
292
+ children: ue
273
293
  })
274
294
  ]
275
295
  });
276
- }), H = /* @__PURE__ */ function(e) {
296
+ }), W = /* @__PURE__ */ function(e) {
277
297
  return e.Avatar = "avatar", e.Profile = "profile", e.Compact = "compact", e;
278
- }({}), U = { avatar: "_avatar_4hc9t_4" }, W = v(({ shortName: e, className: r, textClassName: i = "dial-tiny-text" }) => /* @__PURE__ */ E(n, {
298
+ }({}), G = { avatar: "_avatar_4hc9t_4" }, K = v(({ shortName: e, className: r, textClassName: i = "dial-tiny-text" }) => /* @__PURE__ */ D(n, {
279
299
  name: e ?? "",
280
300
  initials: e ?? "",
281
301
  size: 28,
282
302
  textClassName: i,
283
- className: t(U.avatar, r)
284
- })), G = v(({ profile: e, alt: t, size: r = 28, initialsClassName: i = "dial-tiny-text" }) => {
303
+ className: t(G.avatar, r)
304
+ })), q = v(({ profile: e, alt: t, size: r = 28, initialsClassName: i = "dial-tiny-text" }) => {
285
305
  let a = e.isFallbackShown || !e.imageUrl;
286
- return /* @__PURE__ */ E(n, {
306
+ return /* @__PURE__ */ D(n, {
287
307
  name: e.displayName,
288
308
  initials: e.shortName ?? "",
289
309
  src: a ? void 0 : e.imageUrl,
290
310
  alt: a ? "" : t,
291
311
  size: r,
292
312
  textClassName: i,
293
- className: U.avatar,
313
+ className: G.avatar,
294
314
  onImageError: e.onImageError
295
315
  });
296
- }), K = {
316
+ }), J = {
297
317
  wrapper: "_wrapper_11e9t_1",
298
318
  trigger: "_trigger_11e9t_5",
299
319
  triggerOpen: "_triggerOpen_11e9t_18",
300
320
  identityText: "_identityText_11e9t_22",
301
321
  menuLabel: "_menuLabel_11e9t_26"
302
- }, q = v(({ profile: n, labels: r, groups: l, onLogout: d, onSettings: f, triggerVariant: p = H.Avatar, isTooltipHidden: h, isIdentityHidden: g = !1, styles: _ }) => {
303
- let { colors: v, typography: y, className: b, cssVars: x } = _ ?? {}, [S, w] = ee(!1), O = p === H.Profile, A = p === H.Compact, j = O || A, N = y?.fontClassName ?? "dial-small-text", re = C(() => e({
322
+ }, le = v(({ profile: n, labels: r, groups: l, onLogout: d, onSettings: f, triggerVariant: p = W.Avatar, isTooltipHidden: h, isIdentityHidden: g = !1, styles: _ }) => {
323
+ let { colors: v, typography: y, className: b, cssVars: x } = _ ?? {}, [S, w] = T(!1), k = p === W.Profile, j = p === W.Compact, M = k || j, P = y?.fontClassName ?? "dial-small-text", ne = C(() => e({
304
324
  "--np-avatar-bg": v?.avatarBackground,
305
325
  "--np-avatar-text": v?.avatarText,
306
326
  "--np-menu-text": v?.text,
@@ -308,18 +328,18 @@ var F = {
308
328
  "--np-trigger-open-bg": v?.triggerOpenBackground,
309
329
  "--np-focus-outline": v?.focusOutline,
310
330
  "--np-font-family": y?.fontFamily
311
- }), [v, y?.fontFamily]), P = C(() => t(K.menuLabel, N), [N]), F = C(() => {
331
+ }), [v, y?.fontFamily]), F = C(() => t(J.menuLabel, P), [P]), I = C(() => {
312
332
  let e = (l ?? []).filter(({ options: e }) => e.length > 0).map(({ id: e, label: t, icon: n, options: r }) => ({
313
333
  key: e,
314
- label: /* @__PURE__ */ E("span", {
315
- className: P,
334
+ label: /* @__PURE__ */ D("span", {
335
+ className: F,
316
336
  children: t
317
337
  }),
318
338
  icon: n,
319
339
  children: r.map((e) => ({
320
340
  key: e.id,
321
- label: /* @__PURE__ */ E("span", {
322
- className: P,
341
+ label: /* @__PURE__ */ D("span", {
342
+ className: F,
323
343
  children: e.label
324
344
  }),
325
345
  icon: e.icon,
@@ -330,11 +350,11 @@ var F = {
330
350
  })), i = [...g ? [] : [{
331
351
  key: "identity",
332
352
  type: c.PlainText,
333
- label: /* @__PURE__ */ D("div", {
353
+ label: /* @__PURE__ */ O("div", {
334
354
  className: "flex h-[40px] min-w-0 items-center gap-3",
335
- children: [/* @__PURE__ */ E(W, { shortName: n.shortName }), /* @__PURE__ */ E(u, {
355
+ children: [/* @__PURE__ */ D(K, { shortName: n.shortName }), /* @__PURE__ */ D(u, {
336
356
  text: n.displayName,
337
- className: t(K.identityText, N, "min-w-0 flex-1 truncate")
357
+ className: t(J.identityText, P, "min-w-0 flex-1 truncate")
338
358
  })]
339
359
  })
340
360
  }], ...e];
@@ -346,11 +366,11 @@ var F = {
346
366
  }] : [],
347
367
  ...f ? [{
348
368
  key: "settings",
349
- label: /* @__PURE__ */ E("span", {
350
- className: P,
369
+ label: /* @__PURE__ */ D("span", {
370
+ className: F,
351
371
  children: r.settings
352
372
  }),
353
- icon: /* @__PURE__ */ E(M, {
373
+ icon: /* @__PURE__ */ D(N, {
354
374
  size: a.SM,
355
375
  "aria-hidden": !0,
356
376
  stroke: o
@@ -359,11 +379,11 @@ var F = {
359
379
  }] : [],
360
380
  {
361
381
  key: "logout",
362
- label: /* @__PURE__ */ E("span", {
363
- className: P,
382
+ label: /* @__PURE__ */ D("span", {
383
+ className: F,
364
384
  children: r.logOut
365
385
  }),
366
- icon: /* @__PURE__ */ E(ne, {
386
+ icon: /* @__PURE__ */ D(te, {
367
387
  size: a.SM,
368
388
  "aria-hidden": !0,
369
389
  stroke: o
@@ -374,74 +394,74 @@ var F = {
374
394
  }, [
375
395
  l,
376
396
  g,
377
- N,
378
397
  P,
398
+ F,
379
399
  r.logOut,
380
400
  r.settings,
381
401
  d,
382
402
  f,
383
403
  n.displayName,
384
404
  n.shortName
385
- ]), I = () => {
386
- if (!O) return /* @__PURE__ */ E(i, {
405
+ ]), L = () => {
406
+ if (!k) return /* @__PURE__ */ D(i, {
387
407
  "aria-label": r.trigger,
388
408
  tooltipProps: {
389
409
  tooltip: n.email,
390
410
  hideTooltip: h
391
411
  },
392
- iconBefore: /* @__PURE__ */ E(G, {
412
+ iconBefore: /* @__PURE__ */ D(q, {
393
413
  profile: n,
394
414
  alt: r.avatarAlt,
395
- size: A ? 24 : void 0,
415
+ size: j ? 24 : void 0,
396
416
  initialsClassName: y?.avatarInitialsClassName
397
417
  }),
398
- className: t(A ? "size-10! min-h-0! min-w-0! gap-0 rounded-full! border-0! p-2!" : "size-[44px] gap-0 rounded-full! p-0", K.trigger, A && S && K.triggerOpen)
418
+ className: t(j ? "size-10! min-h-0! min-w-0! gap-0 rounded-full! border-0! p-2!" : "size-[44px] gap-0 rounded-full! p-0", J.trigger, j && S && J.triggerOpen)
399
419
  });
400
- let e = S ? te : k;
401
- return /* @__PURE__ */ E(i, {
420
+ let e = S ? ee : A;
421
+ return /* @__PURE__ */ D(i, {
402
422
  tooltipProps: {
403
423
  tooltip: n.email,
404
424
  hideTooltip: h
405
425
  },
406
- iconBefore: /* @__PURE__ */ E(G, {
426
+ iconBefore: /* @__PURE__ */ D(q, {
407
427
  profile: n,
408
428
  alt: "",
409
429
  size: 24,
410
430
  initialsClassName: y?.avatarInitialsClassName
411
431
  }),
412
- label: /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(u, {
432
+ label: /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(u, {
413
433
  text: n.displayName,
414
- className: t(K.identityText, N, "min-w-0 truncate")
415
- }), /* @__PURE__ */ E("span", {
434
+ className: t(J.identityText, P, "min-w-0 truncate")
435
+ }), /* @__PURE__ */ D("span", {
416
436
  className: "sr-only",
417
437
  children: r.trigger
418
438
  })] }),
419
- iconAfter: /* @__PURE__ */ E(e, {
439
+ iconAfter: /* @__PURE__ */ D(e, {
420
440
  size: a.SM,
421
441
  stroke: o,
422
442
  "aria-hidden": !0
423
443
  }),
424
444
  textClassName: "min-w-0",
425
- className: t("h-10! min-h-0! max-w-full min-w-0! gap-2 rounded-full! border-0! p-2!", K.trigger, S && K.triggerOpen)
445
+ className: t("h-10! min-h-0! max-w-full min-w-0! gap-2 rounded-full! border-0! p-2!", J.trigger, S && J.triggerOpen)
426
446
  });
427
447
  };
428
- return /* @__PURE__ */ E("div", {
448
+ return /* @__PURE__ */ D("div", {
429
449
  style: {
430
450
  ...x,
431
- ...re
451
+ ...ne
432
452
  },
433
- className: t(K.wrapper, j ? "flex min-w-0 items-center" : "flex size-[60px] items-center justify-center", O && "flex-1", b),
434
- children: /* @__PURE__ */ E(s, {
435
- className: j ? "max-w-full min-w-0" : void 0,
436
- placement: j ? "top-start" : "top-end",
453
+ className: t(J.wrapper, M ? "flex min-w-0 items-center" : "flex size-[60px] items-center justify-center", k && "flex-1", b),
454
+ children: /* @__PURE__ */ D(s, {
455
+ className: M ? "max-w-full min-w-0" : void 0,
456
+ placement: M ? "top-start" : "top-end",
437
457
  matchReferenceWidth: !1,
438
- items: F,
458
+ items: I,
439
459
  onOpenChange: w,
440
- children: I()
460
+ children: L()
441
461
  })
442
462
  });
443
- }), J = _(void 0), Y = v(({ isOpen: e, onClose: t, children: n, title: r, closeLabel: i, backLabel: a, className: o, style: s }) => {
444
- let [c, l] = ee([]);
463
+ }), Y = _(void 0), X = v(({ isOpen: e, onClose: t, children: n, title: r, closeLabel: i, backLabel: a, className: o, style: s }) => {
464
+ let [c, l] = T([]);
445
465
  x(() => {
446
466
  e || l([]);
447
467
  }, [e]);
@@ -460,9 +480,9 @@ var F = {
460
480
  d,
461
481
  f
462
482
  ]), m = c[c.length - 1];
463
- return /* @__PURE__ */ E(J.Provider, {
483
+ return /* @__PURE__ */ D(Y.Provider, {
464
484
  value: p,
465
- children: /* @__PURE__ */ E(P, {
485
+ children: /* @__PURE__ */ D(F, {
466
486
  isOpen: e,
467
487
  onClose: f,
468
488
  title: m?.title ?? r,
@@ -474,11 +494,11 @@ var F = {
474
494
  children: m ? m.content : n
475
495
  })
476
496
  });
477
- }), X = () => {
478
- let e = b(J);
497
+ }), Z = () => {
498
+ let e = b(Y);
479
499
  if (!e) throw Error("useSheetNavigation must be used within a NavigableBottomSheet");
480
500
  return e;
481
- }, Z = {
501
+ }, Q = {
482
502
  sheet: "_sheet_1k0ml_1",
483
503
  row: "_row_1k0ml_12",
484
504
  rowActive: "_rowActive_1k0ml_24",
@@ -486,80 +506,80 @@ var F = {
486
506
  divider: "_divider_1k0ml_46",
487
507
  mutedText: "_mutedText_1k0ml_50",
488
508
  activeIcon: "_activeIcon_1k0ml_54"
489
- }, Q = v(({ label: e, onClick: n, icon: r, trailing: i, isCurrent: a = !1, isHighlighted: o = !1, textClassName: s = "dial-small-text" }) => /* @__PURE__ */ E("li", { children: /* @__PURE__ */ E(p, {
509
+ }, $ = v(({ label: e, onClick: n, icon: r, trailing: i, isCurrent: a = !1, isHighlighted: o = !1, textClassName: s = "dial-small-text" }) => /* @__PURE__ */ D("li", { children: /* @__PURE__ */ D(p, {
490
510
  label: e,
491
511
  labelClassName: s,
492
- icon: r && /* @__PURE__ */ E("span", {
493
- className: Z.rowIcon,
512
+ icon: r && /* @__PURE__ */ D("span", {
513
+ className: Q.rowIcon,
494
514
  children: r
495
515
  }),
496
516
  trailing: i,
497
517
  mark: m.Highlight,
498
518
  selected: o,
499
519
  "aria-current": a ? "true" : void 0,
500
- className: t("h-auto gap-3 rounded-none px-4 py-[10px]", Z.row, o && Z.rowActive),
520
+ className: t("h-auto gap-3 rounded-none px-4 py-[10px]", Q.row, o && Q.rowActive),
501
521
  onClick: n
502
- }) })), $ = v(({ options: e, textClassName: t }) => {
503
- let { pop: n } = X();
504
- return /* @__PURE__ */ E("ul", {
522
+ }) })), ue = v(({ options: e, textClassName: t }) => {
523
+ let { pop: n } = Z();
524
+ return /* @__PURE__ */ D("ul", {
505
525
  className: "flex flex-col pb-4",
506
- children: e.map((e) => /* @__PURE__ */ E(Q, {
526
+ children: e.map((e) => /* @__PURE__ */ D($, {
507
527
  label: e.label,
508
528
  icon: e.icon,
509
529
  textClassName: t,
510
530
  isCurrent: e.isActive,
511
- trailing: e.isActive ? /* @__PURE__ */ E(O, {
531
+ trailing: e.isActive ? /* @__PURE__ */ D(k, {
512
532
  size: a.SM,
513
533
  stroke: o,
514
534
  "aria-hidden": !0,
515
- className: Z.activeIcon
535
+ className: Q.activeIcon
516
536
  }) : void 0,
517
537
  onClick: () => {
518
538
  e.onSelect(), n();
519
539
  }
520
540
  }, e.id))
521
541
  });
522
- }), le = v(({ profile: e, logOutLabel: n, onLogout: i, settingsLabel: a, onSettings: s, groups: c, textClassName: l = "dial-small-text", avatarInitialsClassName: d }) => {
523
- let { push: f, close: p } = X(), m = (c ?? []).filter(({ options: e }) => e.length > 0);
524
- return /* @__PURE__ */ D(T, { children: [
525
- /* @__PURE__ */ D("div", {
542
+ }), de = v(({ profile: e, logOutLabel: n, onLogout: i, settingsLabel: a, onSettings: s, groups: c, textClassName: l = "dial-small-text", avatarInitialsClassName: d }) => {
543
+ let { push: f, close: p } = Z(), m = (c ?? []).filter(({ options: e }) => e.length > 0);
544
+ return /* @__PURE__ */ O(E, { children: [
545
+ /* @__PURE__ */ O("div", {
526
546
  className: "flex h-[56px] items-center gap-3 px-4 py-2",
527
- children: [/* @__PURE__ */ E(G, {
547
+ children: [/* @__PURE__ */ D(q, {
528
548
  profile: e,
529
549
  alt: "",
530
550
  initialsClassName: d
531
- }), /* @__PURE__ */ E(u, {
551
+ }), /* @__PURE__ */ D(u, {
532
552
  text: e.displayName,
533
- className: t(Z.mutedText, l, "min-w-0 flex-1 truncate")
553
+ className: t(Q.mutedText, l, "min-w-0 flex-1 truncate")
534
554
  })]
535
555
  }),
536
- m.length > 0 && /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E("ul", {
556
+ m.length > 0 && /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D("ul", {
537
557
  className: "flex flex-col",
538
- children: m.map((e) => /* @__PURE__ */ E(Q, {
558
+ children: m.map((e) => /* @__PURE__ */ D($, {
539
559
  label: e.label,
540
560
  icon: e.icon,
541
561
  textClassName: l,
542
- trailing: /* @__PURE__ */ E(A, {
562
+ trailing: /* @__PURE__ */ D(j, {
543
563
  size: r,
544
564
  stroke: o,
545
565
  "aria-hidden": !0,
546
- className: t(Z.rowIcon, "rtl:scale-x-[-1]")
566
+ className: t(Q.rowIcon, "rtl:scale-x-[-1]")
547
567
  }),
548
568
  onClick: () => f({
549
569
  title: e.label,
550
- content: /* @__PURE__ */ E($, {
570
+ content: /* @__PURE__ */ D(ue, {
551
571
  options: e.options,
552
572
  textClassName: l
553
573
  })
554
574
  })
555
575
  }, e.id))
556
- }), /* @__PURE__ */ E("hr", { className: Z.divider })] }),
557
- /* @__PURE__ */ D("ul", {
576
+ }), /* @__PURE__ */ D("hr", { className: Q.divider })] }),
577
+ /* @__PURE__ */ O("ul", {
558
578
  className: "flex flex-col pb-4",
559
- children: [s && a && /* @__PURE__ */ E(Q, {
579
+ children: [s && a && /* @__PURE__ */ D($, {
560
580
  label: a,
561
581
  textClassName: l,
562
- icon: /* @__PURE__ */ E(M, {
582
+ icon: /* @__PURE__ */ D(N, {
563
583
  size: r,
564
584
  stroke: o,
565
585
  "aria-hidden": !0
@@ -567,10 +587,10 @@ var F = {
567
587
  onClick: () => {
568
588
  p(), s?.();
569
589
  }
570
- }), /* @__PURE__ */ E(Q, {
590
+ }), /* @__PURE__ */ D($, {
571
591
  label: n,
572
592
  textClassName: l,
573
- icon: /* @__PURE__ */ E(ne, {
593
+ icon: /* @__PURE__ */ D(te, {
574
594
  size: r,
575
595
  stroke: o,
576
596
  "aria-hidden": !0
@@ -581,29 +601,29 @@ var F = {
581
601
  })]
582
602
  })
583
603
  ] });
584
- }), ue = v(({ items: e, onSelectItem: t, profileLabel: n, logOutLabel: i, onLogout: a, settingsLabel: s, onSettings: c, profile: l, groups: u, footer: d, textClassName: f, avatarInitialsClassName: p }) => {
585
- let { push: m, close: h } = X(), g = (e) => {
604
+ }), fe = v(({ items: e, onSelectItem: t, profileLabel: n, logOutLabel: i, onLogout: a, settingsLabel: s, onSettings: c, profile: l, groups: u, footer: d, textClassName: f, avatarInitialsClassName: p }) => {
605
+ let { push: m, close: h } = Z(), g = (e) => {
586
606
  h(), t(e);
587
607
  };
588
- return /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ D("ul", {
608
+ return /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ O("ul", {
589
609
  className: "flex flex-col pb-4",
590
610
  children: [e.map((e) => {
591
611
  let t = e.isActive && e.activeIcon || e.icon;
592
- return /* @__PURE__ */ E(Q, {
612
+ return /* @__PURE__ */ D($, {
593
613
  label: e.label,
594
614
  textClassName: f,
595
615
  isCurrent: e.isActive,
596
616
  isHighlighted: e.isActive,
597
- icon: /* @__PURE__ */ E(t, {
617
+ icon: /* @__PURE__ */ D(t, {
598
618
  size: r,
599
619
  stroke: o
600
620
  }),
601
621
  onClick: () => g(e)
602
622
  }, e.id);
603
- }), l && /* @__PURE__ */ E(Q, {
623
+ }), l && /* @__PURE__ */ D($, {
604
624
  label: n,
605
625
  textClassName: f,
606
- icon: /* @__PURE__ */ E(N, {
626
+ icon: /* @__PURE__ */ D(P, {
607
627
  size: r,
608
628
  stroke: o,
609
629
  "aria-hidden": !0
@@ -611,7 +631,7 @@ var F = {
611
631
  onClick: () => {
612
632
  l && m({
613
633
  title: n,
614
- content: /* @__PURE__ */ E(le, {
634
+ content: /* @__PURE__ */ D(de, {
615
635
  profile: l,
616
636
  groups: u,
617
637
  logOutLabel: i,
@@ -625,7 +645,7 @@ var F = {
625
645
  }
626
646
  })]
627
647
  }), d] });
628
- }), de = v(({ isOpen: n, onClose: r, items: i, onSelectItem: a, labels: o, profile: s, groups: c, onLogout: l, onSettings: u, footer: d, styles: f }) => {
648
+ }), pe = v(({ isOpen: n, onClose: r, items: i, onSelectItem: a, labels: o, profile: s, groups: c, onLogout: l, onSettings: u, footer: d, styles: f }) => {
629
649
  let { colors: p, typography: m, className: h, cssVars: g } = f ?? {}, _ = C(() => e({
630
650
  "--np-sheet-text": p?.text,
631
651
  "--np-sheet-item-hover": p?.itemHoverBackground,
@@ -641,18 +661,18 @@ var F = {
641
661
  "--np-sheet-muted-text": p?.mutedText,
642
662
  "--np-font-family": m?.fontFamily
643
663
  }), [p, m?.fontFamily]);
644
- return /* @__PURE__ */ E(Y, {
664
+ return /* @__PURE__ */ D(X, {
645
665
  isOpen: n,
646
666
  onClose: r,
647
667
  title: o.title,
648
668
  closeLabel: o.close,
649
669
  backLabel: o.back,
650
- className: t(Z.sheet, h),
670
+ className: t(Q.sheet, h),
651
671
  style: {
652
672
  ...g,
653
673
  ..._
654
674
  },
655
- children: /* @__PURE__ */ E(ue, {
675
+ children: /* @__PURE__ */ D(fe, {
656
676
  items: i,
657
677
  onSelectItem: a,
658
678
  profileLabel: o.profile,
@@ -669,4 +689,4 @@ var F = {
669
689
  });
670
690
  });
671
691
  //#endregion
672
- export { W as AvatarInitials, F as NAVIGATION_PANEL_CLASS, Y as NavigableBottomSheet, ue as NavigationMenuPage, R as NavigationPanel, de as NavigationSheet, V as NavigationSidebar, ie as NavigationSidebarVariant, $ as OptionListPage, le as ProfilePage, Q as SheetRow, G as UserAvatar, q as UserMenu, H as UserMenuTriggerVariant, X as useSheetNavigation };
692
+ export { K as AvatarInitials, I as NAVIGATION_PANEL_CLASS, X as NavigableBottomSheet, fe as NavigationMenuPage, z as NavigationPanel, pe as NavigationSheet, ce as NavigationSidebar, B as NavigationSidebarVariant, ue as OptionListPage, de as ProfilePage, $ as SheetRow, q as UserAvatar, le as UserMenu, W as UserMenuTriggerVariant, Z as useSheetNavigation };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-navigation-panel",
3
3
  "description": "Primary application navigation — desktop nav rail, user menu, and mobile navigation bottom sheet",
4
- "version": "1.3.0-dev.260",
4
+ "version": "1.3.0-dev.266",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",
@@ -18,12 +18,12 @@
18
18
  },
19
19
  "dependencies": {
20
20
  "@tabler/icons-react": "^3.44.0",
21
- "@epam/ai-dial-conversation-input": "1.3.0-dev.260"
21
+ "@epam/ai-dial-conversation-input": "1.3.0-dev.266"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "react": "^19.2.8",
25
- "@epam/ai-dial-chat-shared": "1.3.0-dev.260",
26
- "@epam/ai-dial-ui-kit": "^0.16.0-dev.56"
25
+ "@epam/ai-dial-chat-shared": "1.3.0-dev.266",
26
+ "@epam/ai-dial-ui-kit": "^0.16.0-dev.59"
27
27
  },
28
28
  "repository": {
29
29
  "type": "git",
package/utils/focus.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ /** Returns the elements inside `root` that Tab reaches, in document order. */
2
+ export declare const getTabbableElements: (root: HTMLElement) => HTMLElement[];
3
+ //# sourceMappingURL=focus.d.ts.map
package/utils/focus.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../src/utils/focus.ts"],"names":[],"mappings":"AAUA,8EAA8E;AAC9E,eAAO,MAAM,mBAAmB,GAAI,MAAM,WAAW,KAAG,WAAW,EAKhE,CAAC"}