@alixpartners/ui-components 2.4.3 → 2.5.0

package/dist/components/Illustration/Illustration.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Illustration/Illustration.test.js

@@ -0,0 +1,40 @@
+import { jsx as o } from "react/jsx-runtime";
+import { d as s, i as r, r as l, s as t, g as e } from "../../vi.bdSIJ99Y-017e_Pkz.js";
+import a from "./Illustration.js";
+s("Illustration", () => {
+  s("Levels 1 and 2", () => {
+    s("Rendering", () => {
+      r("should render an image for a valid level 2 illustration", () => {
+        l(/* @__PURE__ */ o(a, { level: 2, category: "empty", name: "folder" }));
+        const n = t.getByTestId("illustration-image");
+        e(n).toBeInTheDocument(), e(n).toHaveAttribute("src"), e(n.getAttribute("src")).toBeTruthy();
+      }), r("should apply clamped square dimensions from size prop", () => {
+        l(/* @__PURE__ */ o(a, { level: 2, category: "empty", name: "folder", size: 100 }));
+        const n = t.getByTestId("illustration-image");
+        e(n).toHaveAttribute("width", "100"), e(n).toHaveAttribute("height", "100");
+      }), r("should use custom alt when provided", () => {
+        l(/* @__PURE__ */ o(a, { level: 1, category: "empty", name: "folder", alt: "Custom alt" })), e(t.getByTestId("illustration-image")).toHaveAttribute("alt", "Custom alt");
+      }), r("should not render when name is not in the catalog", () => {
+        l(/* @__PURE__ */ o(a, { level: 2, category: "empty", name: "not-a-real-illustration" })), e(t.queryByTestId("illustration-image")).not.toBeInTheDocument();
+      });
+    });
+  }), s("Level 3", () => {
+    s("Rendering", () => {
+      r("should render message and error tag for a mapped error code", () => {
+        l(/* @__PURE__ */ o(a, { level: 3, errorCode: 404 })), e(t.getByTestId("illustration")).toBeInTheDocument(), e(t.getByTestId("illustration-image")).toBeInTheDocument(), e(t.getByTestId("illustration-text")).toHaveTextContent("Page not found"), e(t.getByTestId("tag-label")).toHaveTextContent("Error 404");
+      }), r("should fall back to 500 content for unknown codes but keep the real code in the tag", () => {
+        l(/* @__PURE__ */ o(a, { level: 3, errorCode: 999 })), e(t.getByTestId("illustration-text")).toHaveTextContent("Something went wrong"), e(t.getByTestId("tag-label")).toHaveTextContent("Error 999");
+      }), r("should use mapped alt from message when alt is omitted", () => {
+        l(/* @__PURE__ */ o(a, { level: 3, errorCode: 500 })), e(t.getByTestId("illustration-image")).toHaveAttribute("alt", "Something went wrong");
+      }), r("should apply a custom text container offset for planets illustration", () => {
+        l(/* @__PURE__ */ o(a, { level: 3, errorCode: 404 })), e(t.getByTestId("illustration-text").parentElement).toHaveStyle({
+          bottom: "40px"
+        });
+      }), r("should apply a custom text container offset for overload illustration", () => {
+        l(/* @__PURE__ */ o(a, { level: 3, errorCode: 500 })), e(t.getByTestId("illustration-text").parentElement).toHaveStyle({
+          bottom: "24px"
+        });
+      });
+    });
+  });
+});

package/dist/components/Illustration/constants.d.ts

@@ -0,0 +1,34 @@
+export declare const LEVEL_3_CATEGORY: "error";
+export declare const LEVEL_3_ERROR_MAP: Record<number, {
+    name: 'error-barrier' | 'error-overload' | 'error-planets' | 'error-plug' | 'error-time';
+    message: string;
+}>;
+export declare const LEVEL_3_FALLBACK: {
+    name: "error-barrier" | "error-overload" | "error-planets" | "error-plug" | "error-time";
+    message: string;
+};
+export declare const LEVEL_3_TEXT_BOTTOM_BY_NAME: Record<(typeof LEVEL_3_ERROR_MAP)[number]['name'], number>;
+export declare const LEVEL_DIMENSIONS: {
+    readonly 1: {
+        readonly minSize: 54;
+        readonly maxSize: 72;
+    };
+    readonly 2: {
+        readonly minSize: 73;
+        readonly maxSize: 260;
+    };
+    readonly 3: {
+        readonly width: 600;
+        readonly height: 360;
+    };
+};
+export declare const RANGE_DIMENSIONS: {
+    readonly 1: {
+        readonly minSize: 54;
+        readonly maxSize: 72;
+    };
+    readonly 2: {
+        readonly minSize: 73;
+        readonly maxSize: 260;
+    };
+};

package/dist/components/Illustration/types.d.ts

@@ -0,0 +1,22 @@
+import { ImgHTMLAttributes } from 'react';
+import { ILLUSTRATIONS_BY_LEVEL } from '../../assets/illustrations-map';
+import { DataAttributes } from '../../types/data-attributes';
+export type IllustrationLevel = keyof typeof ILLUSTRATIONS_BY_LEVEL;
+export type IllustrationCategory<L extends IllustrationLevel> = Extract<keyof (typeof ILLUSTRATIONS_BY_LEVEL)[L], string>;
+export type IllustrationName<L extends IllustrationLevel, C extends IllustrationCategory<L>> = (typeof ILLUSTRATIONS_BY_LEVEL)[L][C] extends readonly (infer N)[] ? Extract<N, string> : never;
+type ImgRest = Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'height'> & DataAttributes;
+export type IllustrationProps = ({
+    level: 1;
+    category: IllustrationCategory<1>;
+    name: IllustrationName<1, IllustrationCategory<1>>;
+    size?: number;
+} & ImgRest) | ({
+    level: 2;
+    category: IllustrationCategory<2>;
+    name: IllustrationName<2, IllustrationCategory<2>>;
+    size?: number;
+} & ImgRest) | ({
+    level: 3;
+    errorCode: number;
+} & ImgRest);
+export {};

package/dist/components/Illustration/utils.d.ts

@@ -0,0 +1,11 @@
+import { IllustrationLevel } from './types';
+export declare function resolveLevel3Content(errorCode: number): {
+    name: "error-barrier" | "error-overload" | "error-planets" | "error-plug" | "error-time";
+    message: string;
+};
+export declare function hasIllustration(level: IllustrationLevel, category: string, name: string): boolean;
+export declare function toNumericDimension(value: number | string | undefined): number | undefined;
+export declare function resolveDimensions(level: IllustrationLevel, requestedSize: number | undefined): {
+    width: number;
+    height: number;
+};

package/dist/components/NavBar/NavBar.js

@@ -1,63 +1,63 @@
 import { jsx as e, jsxs as C } from "react/jsx-runtime";
 import ae from "../Tag/Tag.js";
-import D from "../Icon/Icon.js";
-import { c as G } from "../../clsx-OuTLNxxd.js";
-import re from "../Logo/Logo.js";
+import G from "../Icon/Icon.js";
+import { c as x } from "../../clsx-OuTLNxxd.js";
+import ne from "../Logo/Logo.js";
 import * as s from "react";
-import { useState as S } from "react";
-import { u as ne, R as oe, I as te, c as H, a as ie } from "../../index-DEphED6n.js";
-import { u as ue, P as z, d as se, c as R, b as ce } from "../../index-DM51yNMI.js";
+import { useState as y } from "react";
+import { u as re, R as oe, I as te, c as H, a as ie } from "../../index-DEphED6n.js";
+import { u as ue, P as z, d as se, c as R, b as le } from "../../index-DM51yNMI.js";
 import { u as K } from "../../index-7CBv-Jx6.js";
-import { R as le, A as de, P as me, C as be, I as ve, c as pe, G as _e, L as fe, a as ge, b as he, d as Me, e as Ne, S as Ce, f as Re, g as Pe, h as we } from "../../index-D_3jWVyV.js";
-import '../../assets/NavBar.css';var x = "Menubar", [L, xe, Se] = ie(x), [Y] = ce(x, [
+import { R as ce, A as de, P as me, C as be, I as ve, c as pe, G as _e, L as fe, a as ge, b as he, d as Me, e as Ne, S as Ce, f as Re, g as Pe, h as we } from "../../index-D_3jWVyV.js";
+import '../../assets/NavBar.css';var S = "Menubar", [L, xe, Se] = ie(S), [Y] = le(S, [
   Se,
   H
-]), p = pe(), Q = H(), [Ae, V] = Y(x), X = s.forwardRef(
+]), p = pe(), Q = H(), [ye, V] = Y(S), X = s.forwardRef(
   (a, o) => {
     const {
-      __scopeMenubar: r,
-      value: n,
-      onValueChange: i,
+      __scopeMenubar: n,
+      value: r,
+      onValueChange: u,
       defaultValue: M,
       loop: v = !0,
       dir: t,
       ...d
-    } = a, _ = ne(t), l = Q(r), [g, m] = ue({
-      prop: n,
-      onChange: i,
+    } = a, _ = re(t), c = Q(n), [g, m] = ue({
+      prop: r,
+      onChange: u,
       defaultProp: M ?? "",
-      caller: x
-    }), [h, c] = s.useState(null);
+      caller: S
+    }), [h, l] = s.useState(null);
     return /* @__PURE__ */ e(
-      Ae,
+      ye,
       {
-        scope: r,
+        scope: n,
         value: g,
         onMenuOpen: s.useCallback(
           (f) => {
-            m(f), c(f);
+            m(f), l(f);
           },
           [m]
         ),
         onMenuClose: s.useCallback(() => m(""), [m]),
         onMenuToggle: s.useCallback(
           (f) => {
-            m((w) => w ? "" : f), c(f);
+            m((w) => w ? "" : f), l(f);
           },
           [m]
         ),
         dir: _,
         loop: v,
-        children: /* @__PURE__ */ e(L.Provider, { scope: r, children: /* @__PURE__ */ e(L.Slot, { scope: r, children: /* @__PURE__ */ e(
+        children: /* @__PURE__ */ e(L.Provider, { scope: n, children: /* @__PURE__ */ e(L.Slot, { scope: n, children: /* @__PURE__ */ e(
           oe,
           {
             asChild: !0,
-            ...l,
+            ...c,
             orientation: "horizontal",
             loop: v,
             dir: _,
             currentTabStopId: h,
-            onCurrentTabStopIdChange: c,
+            onCurrentTabStopIdChange: l,
             children: /* @__PURE__ */ e(z.div, { role: "menubar", ...d, ref: o })
           }
         ) }) })
@@ -65,13 +65,13 @@ import '../../assets/NavBar.css';var x = "Menubar", [L, xe, Se] = ie(x), [Y] = c
     );
   }
 );
-X.displayName = x;
-var j = "MenubarMenu", [ye, J] = Y(j), W = (a) => {
-  const { __scopeMenubar: o, value: r, ...n } = a, i = K(), M = r || i || "LEGACY_REACT_AUTO_VALUE", v = V(j, o), t = p(o), d = s.useRef(null), _ = s.useRef(!1), l = v.value === M;
+X.displayName = S;
+var j = "MenubarMenu", [Ae, J] = Y(j), W = (a) => {
+  const { __scopeMenubar: o, value: n, ...r } = a, u = K(), M = n || u || "LEGACY_REACT_AUTO_VALUE", v = V(j, o), t = p(o), d = s.useRef(null), _ = s.useRef(!1), c = v.value === M;
   return s.useEffect(() => {
-    l || (_.current = !1);
-  }, [l]), /* @__PURE__ */ e(
-    ye,
+    c || (_.current = !1);
+  }, [c]), /* @__PURE__ */ e(
+    Ae,
     {
       scope: o,
       value: M,
@@ -80,16 +80,16 @@ var j = "MenubarMenu", [ye, J] = Y(j), W = (a) => {
       contentId: K(),
       wasKeyboardTriggerOpenRef: _,
       children: /* @__PURE__ */ e(
-        le,
+        ce,
         {
           ...t,
-          open: l,
+          open: c,
           onOpenChange: (g) => {
             g || v.onMenuClose();
           },
           modal: !1,
           dir: v.dir,
-          ...n
+          ...r
         }
       )
     }
@@ -98,13 +98,13 @@ var j = "MenubarMenu", [ye, J] = Y(j), W = (a) => {
 W.displayName = j;
 var F = "MenubarTrigger", Z = s.forwardRef(
   (a, o) => {
-    const { __scopeMenubar: r, disabled: n = !1, ...i } = a, M = Q(r), v = p(r), t = V(F, r), d = J(F, r), _ = s.useRef(null), l = se(o, _, d.triggerRef), [g, m] = s.useState(!1), h = t.value === d.value;
-    return /* @__PURE__ */ e(L.ItemSlot, { scope: r, value: d.value, disabled: n, children: /* @__PURE__ */ e(
+    const { __scopeMenubar: n, disabled: r = !1, ...u } = a, M = Q(n), v = p(n), t = V(F, n), d = J(F, n), _ = s.useRef(null), c = se(o, _, d.triggerRef), [g, m] = s.useState(!1), h = t.value === d.value;
+    return /* @__PURE__ */ e(L.ItemSlot, { scope: n, value: d.value, disabled: r, children: /* @__PURE__ */ e(
       te,
       {
         asChild: !0,
         ...M,
-        focusable: !n,
+        focusable: !r,
         tabStopId: d.value,
         children: /* @__PURE__ */ e(de, { asChild: !0, ...v, children: /* @__PURE__ */ e(
           z.button,
@@ -117,19 +117,19 @@ var F = "MenubarTrigger", Z = s.forwardRef(
             "aria-controls": h ? d.contentId : void 0,
             "data-highlighted": g ? "" : void 0,
             "data-state": h ? "open" : "closed",
-            "data-disabled": n ? "" : void 0,
-            disabled: n,
-            ...i,
-            ref: l,
-            onPointerDown: R(a.onPointerDown, (c) => {
-              !n && c.button === 0 && c.ctrlKey === !1 && (t.onMenuOpen(d.value), h || c.preventDefault());
+            "data-disabled": r ? "" : void 0,
+            disabled: r,
+            ...u,
+            ref: c,
+            onPointerDown: R(a.onPointerDown, (l) => {
+              !r && l.button === 0 && l.ctrlKey === !1 && (t.onMenuOpen(d.value), h || l.preventDefault());
             }),
             onPointerEnter: R(a.onPointerEnter, () => {
               var f;
               !!t.value && !h && (t.onMenuOpen(d.value), (f = _.current) == null || f.focus());
             }),
-            onKeyDown: R(a.onKeyDown, (c) => {
-              n || (["Enter", " "].includes(c.key) && t.onMenuToggle(d.value), c.key === "ArrowDown" && t.onMenuOpen(d.value), ["Enter", " ", "ArrowDown"].includes(c.key) && (d.wasKeyboardTriggerOpenRef.current = !0, c.preventDefault()));
+            onKeyDown: R(a.onKeyDown, (l) => {
+              r || (["Enter", " "].includes(l.key) && t.onMenuToggle(d.value), l.key === "ArrowDown" && t.onMenuOpen(d.value), ["Enter", " ", "ArrowDown"].includes(l.key) && (d.wasKeyboardTriggerOpenRef.current = !0, l.preventDefault()));
             }),
             onFocus: R(a.onFocus, () => m(!0)),
             onBlur: R(a.onBlur, () => m(!1))
@@ -141,13 +141,13 @@ var F = "MenubarTrigger", Z = s.forwardRef(
 );
 Z.displayName = F;
 var Oe = "MenubarPortal", $ = (a) => {
-  const { __scopeMenubar: o, ...r } = a, n = p(o);
-  return /* @__PURE__ */ e(me, { ...n, ...r });
+  const { __scopeMenubar: o, ...n } = a, r = p(o);
+  return /* @__PURE__ */ e(me, { ...r, ...n });
 };
 $.displayName = Oe;
 var U = "MenubarContent", q = s.forwardRef(
   (a, o) => {
-    const { __scopeMenubar: r, align: n = "start", ...i } = a, M = p(r), v = V(U, r), t = J(U, r), d = xe(r), _ = s.useRef(!1);
+    const { __scopeMenubar: n, align: r = "start", ...u } = a, M = p(n), v = V(U, n), t = J(U, n), d = xe(n), _ = s.useRef(!1);
     return /* @__PURE__ */ e(
       be,
       {
@@ -155,33 +155,33 @@ var U = "MenubarContent", q = s.forwardRef(
         "aria-labelledby": t.triggerId,
         "data-radix-menubar-content": "",
         ...M,
-        ...i,
+        ...u,
         ref: o,
-        align: n,
-        onCloseAutoFocus: R(a.onCloseAutoFocus, (l) => {
+        align: r,
+        onCloseAutoFocus: R(a.onCloseAutoFocus, (c) => {
           var m;
-          !!!v.value && !_.current && ((m = t.triggerRef.current) == null || m.focus()), _.current = !1, l.preventDefault();
+          !!!v.value && !_.current && ((m = t.triggerRef.current) == null || m.focus()), _.current = !1, c.preventDefault();
         }),
-        onFocusOutside: R(a.onFocusOutside, (l) => {
-          const g = l.target;
+        onFocusOutside: R(a.onFocusOutside, (c) => {
+          const g = c.target;
           d().some((h) => {
-            var c;
-            return (c = h.ref.current) == null ? void 0 : c.contains(g);
-          }) && l.preventDefault();
+            var l;
+            return (l = h.ref.current) == null ? void 0 : l.contains(g);
+          }) && c.preventDefault();
         }),
         onInteractOutside: R(a.onInteractOutside, () => {
           _.current = !0;
         }),
-        onEntryFocus: (l) => {
-          t.wasKeyboardTriggerOpenRef.current || l.preventDefault();
+        onEntryFocus: (c) => {
+          t.wasKeyboardTriggerOpenRef.current || c.preventDefault();
         },
         onKeyDown: R(
           a.onKeyDown,
-          (l) => {
-            if (["ArrowRight", "ArrowLeft"].includes(l.key)) {
-              const g = l.target, m = g.hasAttribute("data-radix-menubar-subtrigger"), h = g.closest("[data-radix-menubar-content]") !== l.currentTarget, f = (v.dir === "rtl" ? "ArrowRight" : "ArrowLeft") === l.key;
+          (c) => {
+            if (["ArrowRight", "ArrowLeft"].includes(c.key)) {
+              const g = c.target, m = g.hasAttribute("data-radix-menubar-subtrigger"), h = g.closest("[data-radix-menubar-content]") !== c.currentTarget, f = (v.dir === "rtl" ? "ArrowRight" : "ArrowLeft") === c.key;
               if (!f && m || h && f) return;
-              let N = d().filter((k) => !k.disabled).map((k) => k.value);
+              let N = d().filter((D) => !D.disabled).map((D) => D.value);
               f && N.reverse();
               const b = N.indexOf(t.value);
               N = v.loop ? $e(N, b + 1) : N.slice(b + 1);
@@ -206,74 +206,74 @@ var U = "MenubarContent", q = s.forwardRef(
 q.displayName = U;
 var Ee = "MenubarGroup", Be = s.forwardRef(
   (a, o) => {
-    const { __scopeMenubar: r, ...n } = a, i = p(r);
-    return /* @__PURE__ */ e(_e, { ...i, ...n, ref: o });
+    const { __scopeMenubar: n, ...r } = a, u = p(n);
+    return /* @__PURE__ */ e(_e, { ...u, ...r, ref: o });
   }
 );
 Be.displayName = Ee;
 var Te = "MenubarLabel", Ie = s.forwardRef(
   (a, o) => {
-    const { __scopeMenubar: r, ...n } = a, i = p(r);
-    return /* @__PURE__ */ e(fe, { ...i, ...n, ref: o });
+    const { __scopeMenubar: n, ...r } = a, u = p(n);
+    return /* @__PURE__ */ e(fe, { ...u, ...r, ref: o });
   }
 );
 Ie.displayName = Te;
 var ke = "MenubarItem", ee = s.forwardRef(
   (a, o) => {
-    const { __scopeMenubar: r, ...n } = a, i = p(r);
-    return /* @__PURE__ */ e(ve, { ...i, ...n, ref: o });
+    const { __scopeMenubar: n, ...r } = a, u = p(n);
+    return /* @__PURE__ */ e(ve, { ...u, ...r, ref: o });
   }
 );
 ee.displayName = ke;
 var De = "MenubarCheckboxItem", Ge = s.forwardRef(
   (a, o) => {
-    const { __scopeMenubar: r, ...n } = a, i = p(r);
-    return /* @__PURE__ */ e(ge, { ...i, ...n, ref: o });
+    const { __scopeMenubar: n, ...r } = a, u = p(n);
+    return /* @__PURE__ */ e(ge, { ...u, ...r, ref: o });
   }
 );
 Ge.displayName = De;
 var Ke = "MenubarRadioGroup", Le = s.forwardRef(
   (a, o) => {
-    const { __scopeMenubar: r, ...n } = a, i = p(r);
-    return /* @__PURE__ */ e(he, { ...i, ...n, ref: o });
+    const { __scopeMenubar: n, ...r } = a, u = p(n);
+    return /* @__PURE__ */ e(he, { ...u, ...r, ref: o });
   }
 );
 Le.displayName = Ke;
 var Fe = "MenubarRadioItem", Ue = s.forwardRef(
   (a, o) => {
-    const { __scopeMenubar: r, ...n } = a, i = p(r);
-    return /* @__PURE__ */ e(Me, { ...i, ...n, ref: o });
+    const { __scopeMenubar: n, ...r } = a, u = p(n);
+    return /* @__PURE__ */ e(Me, { ...u, ...r, ref: o });
   }
 );
 Ue.displayName = Fe;
 var Ve = "MenubarItemIndicator", je = s.forwardRef((a, o) => {
-  const { __scopeMenubar: r, ...n } = a, i = p(r);
-  return /* @__PURE__ */ e(Ne, { ...i, ...n, ref: o });
+  const { __scopeMenubar: n, ...r } = a, u = p(n);
+  return /* @__PURE__ */ e(Ne, { ...u, ...r, ref: o });
 });
 je.displayName = Ve;
 var He = "MenubarSeparator", ze = s.forwardRef(
   (a, o) => {
-    const { __scopeMenubar: r, ...n } = a, i = p(r);
-    return /* @__PURE__ */ e(Ce, { ...i, ...n, ref: o });
+    const { __scopeMenubar: n, ...r } = a, u = p(n);
+    return /* @__PURE__ */ e(Ce, { ...u, ...r, ref: o });
   }
 );
 ze.displayName = He;
 var Ye = "MenubarArrow", Qe = s.forwardRef(
   (a, o) => {
-    const { __scopeMenubar: r, ...n } = a, i = p(r);
-    return /* @__PURE__ */ e(Re, { ...i, ...n, ref: o });
+    const { __scopeMenubar: n, ...r } = a, u = p(n);
+    return /* @__PURE__ */ e(Re, { ...u, ...r, ref: o });
   }
 );
 Qe.displayName = Ye;
 var Xe = "MenubarSubTrigger", Je = s.forwardRef(
   (a, o) => {
-    const { __scopeMenubar: r, ...n } = a, i = p(r);
+    const { __scopeMenubar: n, ...r } = a, u = p(n);
     return /* @__PURE__ */ e(
       Pe,
       {
         "data-radix-menubar-subtrigger": "",
-        ...i,
-        ...n,
+        ...u,
+        ...r,
         ref: o
       }
     );
@@ -282,13 +282,13 @@ var Xe = "MenubarSubTrigger", Je = s.forwardRef(
 Je.displayName = Xe;
 var We = "MenubarSubContent", Ze = s.forwardRef(
   (a, o) => {
-    const { __scopeMenubar: r, ...n } = a, i = p(r);
+    const { __scopeMenubar: n, ...r } = a, u = p(n);
     return /* @__PURE__ */ e(
       we,
       {
-        ...i,
+        ...u,
         "data-radix-menubar-content": "",
-        ...n,
+        ...r,
         ref: o,
         style: {
           ...a.style,
@@ -304,10 +304,10 @@ var We = "MenubarSubContent", Ze = s.forwardRef(
 );
 Ze.displayName = We;
 function $e(a, o) {
-  return a.map((r, n) => a[(o + n) % a.length]);
+  return a.map((n, r) => a[(o + r) % a.length]);
 }
-var A = X, y = W, O = Z, E = $, B = q, T = ee;
-const u = {
+var A = X, O = W, E = Z, B = $, T = q, I = ee;
+const i = {
   "navbar-wrapper": "NavBar-module__navbar-wrapper___e-f8y",
   "navbar-container": "NavBar-module__navbar-container___KnbUz",
   "navbar-logo-container": "NavBar-module__navbar-logo-container___VXWAo",
@@ -328,62 +328,64 @@ const u = {
   "navbar-menu-additional": "NavBar-module__navbar-menu-additional___B8kH-",
   "navbar-menu-additional-trigger": "NavBar-module__navbar-menu-additional-trigger___IpMHL",
   "navbar-menu-additional-icon": "NavBar-module__navbar-menu-additional-icon___jhULk",
+  "navbar-menu-additional-icon-notification": "NavBar-module__navbar-menu-additional-icon-notification___RH-yL",
+  "navbar-menu-additional-icon-help": "NavBar-module__navbar-menu-additional-icon-help___5sqmP",
   "navbar-menu-additional-user-profile": "NavBar-module__navbar-menu-additional-user-profile___ujsEv",
   "navbar-notification-container": "NavBar-module__navbar-notification-container___K2YeD",
   "navbar-notification-badge": "NavBar-module__navbar-notification-badge___vp5bK"
 };
-function ca({
+function la({
   activeMenuItemHref: a,
   projectName: o,
-  projectLogoIcon: r,
-  projectLogoOnClick: n,
-  projectTag: i,
+  projectLogoIcon: n,
+  projectLogoOnClick: r,
+  projectTag: u,
   menuItems: M,
   menuButton: v,
   additionalItems: t,
   className: d,
   maxWidth: _
 }) {
-  const l = (b) => b ? a === b : !1, [g, m] = S(!1), [h, c] = S(!1), [f, w] = S(!1), [I, N] = S(null);
-  return /* @__PURE__ */ e("div", { className: G(u["navbar-wrapper"], d), children: /* @__PURE__ */ C("div", { className: u["navbar-container"], style: {
+  const c = (b) => b ? a === b : !1, [g, m] = y(!1), [h, l] = y(!1), [f, w] = y(!1), [k, N] = y(null);
+  return /* @__PURE__ */ e("div", { className: x(i["navbar-wrapper"], d), children: /* @__PURE__ */ C("div", { className: i["navbar-container"], style: {
     maxWidth: _
   }, children: [
-    /* @__PURE__ */ C("div", { className: u["navbar-logo-container"], children: [
-      /* @__PURE__ */ e("a", { onClick: n, className: u["navbar-logo-link"], children: /* @__PURE__ */ e(re, { logo: r, color: "white" }) }),
-      /* @__PURE__ */ e("span", { className: u["navbar-project-name-separator"] }),
-      /* @__PURE__ */ e("span", { className: u["navbar-project-name"], children: o }),
-      i && /* @__PURE__ */ e(ae, { type: "basic", color: "green", size: "md", structure: "border", label: i })
+    /* @__PURE__ */ C("div", { className: i["navbar-logo-container"], children: [
+      /* @__PURE__ */ e("a", { onClick: r, className: i["navbar-logo-link"], children: /* @__PURE__ */ e(ne, { logo: n, color: "white" }) }),
+      /* @__PURE__ */ e("span", { className: i["navbar-project-name-separator"] }),
+      /* @__PURE__ */ e("span", { className: i["navbar-project-name"], children: o }),
+      u && /* @__PURE__ */ e(ae, { type: "basic", color: "green", size: "md", structure: "border", label: u })
     ] }),
-    /* @__PURE__ */ C("div", { className: u["navbar-menu"], children: [
-      /* @__PURE__ */ e("div", { className: u["navbar-menu-button"], children: v }),
-      /* @__PURE__ */ e(A, { className: u["navbar-menu-list"], children: M == null ? void 0 : M.map((b) => /* @__PURE__ */ e("div", { onPointerLeave: () => N(null), children: /* @__PURE__ */ C(y, { open: I === b.label, onOpenChange: (P) => N(P ? b.label : null), children: [
-        /* @__PURE__ */ e(O, { "data-state": I === b.label ? "open" : "closed", onClick: () => N(b.label), onPointerMove: () => N(b.label), className: u["navbar-menu-list-item"], children: b.menuItems ? /* @__PURE__ */ C("span", { className: u["navbar-menu-list-item-trigger-container"], children: [
+    /* @__PURE__ */ C("div", { className: i["navbar-menu"], children: [
+      /* @__PURE__ */ e("div", { className: i["navbar-menu-button"], children: v }),
+      /* @__PURE__ */ e(A, { className: i["navbar-menu-list"], children: M == null ? void 0 : M.map((b) => /* @__PURE__ */ e("div", { onPointerLeave: () => N(null), children: /* @__PURE__ */ C(O, { open: k === b.label, onOpenChange: (P) => N(P ? b.label : null), children: [
+        /* @__PURE__ */ e(E, { "data-state": k === b.label ? "open" : "closed", onClick: () => N(b.label), onPointerMove: () => N(b.label), className: i["navbar-menu-list-item"], children: b.menuItems ? /* @__PURE__ */ C("span", { className: i["navbar-menu-list-item-trigger-container"], children: [
           /* @__PURE__ */ e("span", { children: b.label }),
-          /* @__PURE__ */ e(D, { icon: "ap-icon-expand-more", className: G(u["navbar-menu-list-item-arrow"]) })
-        ] }) : /* @__PURE__ */ e("a", { className: G(u["navbar-menu-list-item-action"], l(b.href) && u["navbar-menu-list-item-action-active"]), onClick: b.onClick, children: b.label }) }),
-        b.menuItems && /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(B, { className: u["navbar-menu-list-item-submenu"], children: b.menuItems.map((P) => /* @__PURE__ */ e(T, { className: u["navbar-menu-list-item-submenu-item"], children: /* @__PURE__ */ e("a", { onClick: P.onClick, children: P.label }) }, P.label)) }) })
+          /* @__PURE__ */ e(G, { icon: "ap-icon-expand-more", className: x(i["navbar-menu-list-item-arrow"]) })
+        ] }) : /* @__PURE__ */ e("a", { className: x(i["navbar-menu-list-item-action"], c(b.href) && i["navbar-menu-list-item-action-active"]), onClick: b.onClick, children: b.label }) }),
+        b.menuItems && /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(T, { className: i["navbar-menu-list-item-submenu"], children: b.menuItems.map((P) => /* @__PURE__ */ e(I, { className: i["navbar-menu-list-item-submenu-item"], children: /* @__PURE__ */ e("a", { onClick: P.onClick, children: P.label }) }, P.label)) }) })
       ] }) }, b.label)) }),
-      t && /* @__PURE__ */ e("span", { className: u["navbar-menu-additional-separator"] }),
-      /* @__PURE__ */ C("div", { className: u["navbar-menu-additional"], children: [
-        (t == null ? void 0 : t.notifications) && /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e("div", { onPointerLeave: () => m(!1), children: /* @__PURE__ */ C(y, { open: g, onOpenChange: m, children: [
-          /* @__PURE__ */ e(O, { onClick: () => m(!0), onPointerMove: () => m(!0), className: u["navbar-menu-additional-trigger"], children: /* @__PURE__ */ C("div", { className: u["navbar-notification-container"], children: [
-            /* @__PURE__ */ e(D, { icon: "ap-icon-notification-filled", className: u["navbar-menu-additional-icon"] }),
-            t.notifications.count > 0 && /* @__PURE__ */ e("span", { className: u["navbar-notification-badge"], children: t.notifications.count > 99 ? "99+" : t.notifications.count })
+      t && /* @__PURE__ */ e("span", { className: i["navbar-menu-additional-separator"] }),
+      /* @__PURE__ */ C("div", { className: i["navbar-menu-additional"], children: [
+        (t == null ? void 0 : t.notifications) && /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e("div", { onPointerLeave: () => m(!1), children: /* @__PURE__ */ C(O, { open: g, onOpenChange: m, children: [
+          /* @__PURE__ */ e(E, { onClick: () => m(!0), onPointerMove: () => m(!0), className: i["navbar-menu-additional-trigger"], children: /* @__PURE__ */ C("div", { className: i["navbar-notification-container"], children: [
+            /* @__PURE__ */ e(G, { icon: "ap-icon-notification-filled", className: x(i["navbar-menu-additional-icon"], i["navbar-menu-additional-icon-notification"]) }),
+            t.notifications.count > 0 && /* @__PURE__ */ e("span", { className: i["navbar-notification-badge"], children: t.notifications.count > 99 ? "99+" : t.notifications.count })
           ] }) }),
-          /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(B, { align: "end", className: u["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(T, { className: u["navbar-menu-list-item-submenu-item"], children: t.notifications.content }) }) })
+          /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(T, { align: "end", className: i["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(I, { className: i["navbar-menu-list-item-submenu-item"], children: t.notifications.content }) }) })
         ] }) }) }),
-        (t == null ? void 0 : t.help) && /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e("div", { onPointerLeave: () => c(!1), children: /* @__PURE__ */ C(y, { open: h, onOpenChange: c, children: [
-          /* @__PURE__ */ e(O, { onClick: () => c(!0), onPointerMove: () => c(!0), className: u["navbar-menu-additional-trigger"], children: /* @__PURE__ */ e(D, { icon: "ap-icon-help-filled", className: u["navbar-menu-additional-icon"] }) }),
-          /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(B, { align: "end", className: u["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(T, { className: u["navbar-menu-list-item-submenu-item"], children: t.help }) }) })
+        (t == null ? void 0 : t.help) && /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e("div", { onPointerLeave: () => l(!1), children: /* @__PURE__ */ C(O, { open: h, onOpenChange: l, children: [
+          /* @__PURE__ */ e(E, { onClick: () => l(!0), onPointerMove: () => l(!0), className: i["navbar-menu-additional-trigger"], children: /* @__PURE__ */ e(G, { icon: "ap-icon-help-filled", className: x(i["navbar-menu-additional-icon"], i["navbar-menu-additional-icon-help"]) }) }),
+          /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(T, { align: "end", className: i["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(I, { className: i["navbar-menu-list-item-submenu-item"], children: t.help }) }) })
         ] }) }) }),
-        (t == null ? void 0 : t.userProfile) && /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e("div", { onPointerLeave: () => w(!1), children: /* @__PURE__ */ C(y, { open: f, onOpenChange: w, children: [
-          /* @__PURE__ */ e(O, { onClick: () => w(!0), onPointerMove: () => w(!0), className: u["navbar-menu-additional-trigger"], children: /* @__PURE__ */ e("span", { className: u["navbar-menu-additional-user-profile"], children: t.userProfile.initials }) }),
-          /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(B, { align: "end", className: u["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(T, { className: u["navbar-menu-list-item-submenu-item"], children: t.userProfile.content }) }) })
+        (t == null ? void 0 : t.userProfile) && /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e("div", { onPointerLeave: () => w(!1), children: /* @__PURE__ */ C(O, { open: f, onOpenChange: w, children: [
+          /* @__PURE__ */ e(E, { onClick: () => w(!0), onPointerMove: () => w(!0), className: i["navbar-menu-additional-trigger"], children: /* @__PURE__ */ e("span", { className: i["navbar-menu-additional-user-profile"], children: t.userProfile.initials }) }),
+          /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(T, { align: "end", className: i["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(I, { className: i["navbar-menu-list-item-submenu-item"], children: t.userProfile.content }) }) })
         ] }) }) })
       ] })
     ] })
   ] }) });
 }
 export {
-  ca as default
+  la as default
 };

package/dist/components/TabNavigation/TabNavigation.d.ts

@@ -4,6 +4,7 @@ type TabNavigationProps = {
     className?: string;
     children?: ReactNode;
     align?: 'left' | 'center' | 'right';
+    noUnderline?: boolean;
 } & DataAttributes;
-export default function TabNavigation({ children, align, className, ...props }: TabNavigationProps): import("react/jsx-runtime").JSX.Element;
+export default function TabNavigation({ children, align, className, noUnderline, ...props }: TabNavigationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TabNavigation/TabNavigation.js

@@ -10,10 +10,11 @@ import '../../assets/TabNavigation.css';const a = {
 function b({
   children: _,
   align: i = "center",
-  className: o,
-  ...e
+  className: e,
+  noUnderline: o = !1,
+  ...g
 }) {
-  return /* @__PURE__ */ t("div", { className: n(a["tab-navigation"]), ...e, children: /* @__PURE__ */ t("div", { className: n(a["tab-navigation-items"], i && a[`align-${i}`], o), children: _ }) });
+  return /* @__PURE__ */ t("div", { className: o ? "" : n(a["tab-navigation"]), ...g, children: /* @__PURE__ */ t("div", { className: n(a["tab-navigation-items"], i && a[`align-${i}`], e), children: _ }) });
 }
 export {
   b as default

package/dist/main.d.ts

@@ -27,5 +27,6 @@ export { default as NavBar, type MenuItem, type Notifications, type UserProfile,
 export { default as Tag, type TagColors } from './components/Tag/Tag.tsx';
 export { default as Tooltip, type TooltipProps } from './components/Tooltip/Tooltip.tsx';
 export { default as Spinner } from './components/Spinner/Spinner.tsx';
+export { default as Illustration, type IllustrationCategory, type IllustrationLevel, type IllustrationName, type IllustrationProps, } from './components/Illustration/Illustration.tsx';
 export { apLogos } from './assets/ap-logos';
 export type { ApIcon } from './assets/ap-icons-types';