prometeo-design-system 4.3.0 → 4.3.1

package/dist/Toast.es.js

@@ -1,67 +1,59 @@
-import { j as t } from "./jsx-runtime-GkKLlHH4.js";
-import { c as l } from "./cn-B6yFEsav.js";
-import P, { useRef as b, useEffect as I } from "react";
-import { toast as h } from "sonner";
-import { Info as w } from "./Icons/Info.es.js";
-import { Error as v } from "./Icons/Error.es.js";
-import { Cancel as y } from "./Icons/Cancel.es.js";
-import { CheckCircle as j } from "./Icons/CheckCircle.es.js";
-import C from "./Button.es.js";
-import { Close as E } from "./Icons/Close.es.js";
-const p = {
+import { j as e } from "./jsx-runtime-GkKLlHH4.js";
+import w from "react";
+import { toast as p } from "sonner";
+import { c as s } from "./cn-B6yFEsav.js";
+import { Info as m } from "./Icons/Info.es.js";
+import { Error as u } from "./Icons/Error.es.js";
+import { Cancel as f } from "./Icons/Cancel.es.js";
+import { CheckCircle as b } from "./Icons/CheckCircle.es.js";
+import h from "./Button.es.js";
+import { Close as C } from "./Icons/Close.es.js";
+const x = {
   dark: {
     success: {
       container: "border-b-[2px] border-success-default-default",
       iconClass: "text-success-medium-default",
-      icon: j,
-      loading: "bg-success-default-default"
+      icon: b
     },
     error: {
       container: "border-b-[2px] border-error-default-default",
       iconClass: "text-error-medium-default",
-      icon: y,
-      loading: "bg-error-default-default"
+      icon: f
     },
     warning: {
       container: "border-b-[2px] border-warning-default-default",
       iconClass: "text-warning-medium-default",
-      icon: v,
-      loading: "bg-warning-default-default"
+      icon: u
     },
     info: {
       container: " border-b-[2px] border-primary-default-default",
       iconClass: "text-primary-default-default",
-      icon: w,
-      loading: "bg-primary-default-default"
+      icon: m
     }
   },
   light: {
     success: {
       container: "",
       iconClass: "text-success-default-pressed",
-      icon: j,
-      loading: "bg-success-default-pressed"
+      icon: b
     },
     error: {
       container: "",
       iconClass: "text-error-medium-pressed",
-      icon: y,
-      loading: "bg-error-medium-pressed"
+      icon: f
     },
     warning: {
       container: "",
       iconClass: "text-warning-medium-pressed",
-      icon: v,
-      loading: "bg-warning-medium-pressed"
+      icon: u
     },
     info: {
       container: "",
       iconClass: "text-primary-default-pressed",
-      icon: w,
-      loading: "bg-primary-default-pressed"
+      icon: m
     }
   }
-}, x = {
+}, l = {
   dark: {
     container: "bg-neutral-default-default",
     title: "text-neutral-strong-default",
@@ -74,121 +66,85 @@ const p = {
     description: "text-neutral-medium-focused",
     shadow: "0px 0px 2px 0px rgba(0, 0, 0, 0.35),8px 8px 20px 0px rgba(0, 0, 0, 0.3),0px 0px 15px 0px rgba(0, 0, 0, 0.2),0px 0px 20px 0px rgba(21, 21, 21, 0.3) inset,6px 0px 100px 0px rgba(0, 0, 0, 0.05) inset"
   }
-}, T = (d) => {
-  const { title: r, description: n, button: a, id: i, icon: s, variant: o = "info", colorMode: e = "dark", showClose: m = !1, loading: c = !1, loadingTimeout: g = 2500, finishLoader: u = !1 } = d;
-  return /* @__PURE__ */ t.jsxs(
+}, v = (c) => {
+  const { title: r, description: i, button: a, id: n, icon: d, variant: o = "info", colorMode: t = "dark", showClose: g = !1 } = c;
+  return /* @__PURE__ */ e.jsxs(
     "div",
     {
       style: {
-        boxShadow: x[e].shadow
+        boxShadow: l[t].shadow
       },
-      className: l(
+      className: s(
         "flex p-3 pb-4 md:w-[485px] md:max-w-[485px] md:min-w-[485px] md:h-[68px] md:max-h-[68px] rounded-lg gap-2",
-        "w-[345px] max-w-[345px] min-w-[345px] h-[68px] max-h-[68px] relative",
-        x[e].container,
-        p[e][o].container,
-        c && "border-b-0"
+        "w-[345px] max-w-[345px] min-w-[345px] h-[68px] max-h-[68px]",
+        l[t].container,
+        x[t][o].container
       ),
       children: [
-        /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ e.jsxs(
           "div",
           {
             className: "flex items-center justify-start gap-2 max-h-[38px] h-[38px] overflow-hidden flex-1 ",
             children: [
-              /* @__PURE__ */ t.jsx("div", { className: "f", style: { color: "inherit" }, children: P.createElement(s || p[e][o].icon, { size: 24, className: p[e][o].iconClass }) }),
-              /* @__PURE__ */ t.jsxs("div", { className: "flex-1 flex flex-col gap-1", children: [
-                /* @__PURE__ */ t.jsx("p", { className: l("select-none prometeo-fonts-label-medium md:prometeo-fonts-label-xlarge", x[e].title), children: r }),
-                n && /* @__PURE__ */ t.jsx("p", { className: l("select-none prometeo-fonts-body-xsmall md:prometeo-fonts-body-small text-nowrap overflow-ellipsis ", x[e].description), children: n })
+              /* @__PURE__ */ e.jsx("div", { className: "f", style: { color: "inherit" }, children: w.createElement(d || x[t][o].icon, { size: 24, className: x[t][o].iconClass }) }),
+              /* @__PURE__ */ e.jsxs("div", { className: "flex-1 flex flex-col gap-1", children: [
+                /* @__PURE__ */ e.jsx("p", { className: s("select-none prometeo-fonts-label-medium md:prometeo-fonts-label-xlarge", l[t].title), children: r }),
+                i && /* @__PURE__ */ e.jsx("p", { className: s("select-none prometeo-fonts-body-xsmall md:prometeo-fonts-body-small text-nowrap overflow-ellipsis ", l[t].description), children: i })
               ] })
             ]
           }
         ),
-        c && /* @__PURE__ */ t.jsx(z, { color: o, timeOut: g, finished: u, colorMode: e }),
-        a?.label && /* @__PURE__ */ t.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ t.jsx(
-          C,
+        a?.label && /* @__PURE__ */ e.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ e.jsx(
+          h,
           {
             label: a?.label,
             onClick: () => {
-              a?.onClick(), h.dismiss(i);
+              a?.onClick(), p.dismiss(n);
             },
             size: "small",
             color: "secondary"
           }
         ) }),
-        m && /* @__PURE__ */ t.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ t.jsx(
-          C,
+        g && /* @__PURE__ */ e.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ e.jsx(
+          h,
           {
             onClick: () => {
-              h.dismiss(i);
+              p.dismiss(n);
             },
             label: "",
             size: "small",
             color: "secondary",
-            icon: /* @__PURE__ */ t.jsx(E, { className: l(e === "light" ? "text-neutral-medium-focused " : "") }),
+            icon: /* @__PURE__ */ e.jsx(C, { className: s(t === "light" ? "text-neutral-medium-focused " : "") }),
             variant: "text",
             animate: !1,
-            className: l(e === "light" ? "hover:bg-neutral-default-hover-light focus:bg-inherit active:bg-neutral-weak-hover " : "")
+            className: s(t === "light" ? "hover:bg-neutral-default-hover-light focus:bg-inherit active:bg-neutral-weak-hover " : "")
           }
         ) })
       ]
     }
   );
-}, z = ({ className: d, color: r, timeOut: n, finished: a, colorMode: i }) => {
-  const s = b(0), o = b(Date.now()), e = b(null);
-  I(() => {
-    if (a) {
-      s.current = 1, e.current && (e.current.style.width = "100%");
-      return;
-    }
-    o.current = Date.now(), s.current = 0;
-    const c = setInterval(() => {
-      const g = Date.now() - o.current, u = Math.min(g / n, 1), N = u * 0.95, k = Math.sin(u * Math.PI * 2) * 0.15 + 0.05, M = Math.random() < k;
-      let f;
-      if (M)
-        f = s.current;
-      else {
-        const R = (Math.random() - 0.5) * 0.25;
-        f = Math.max(s.current, Math.min(0.95, N + R));
-      }
-      s.current = f, e.current && (e.current.style.width = `${f * 100}%`), (u >= 1 || a) && clearInterval(c);
-    }, 50);
-    return () => clearInterval(c);
-  }, [n, a]);
-  const m = p[i][r].loading;
-  return /* @__PURE__ */ t.jsx("div", { className: l(
-    "absolute bottom-0 translate-y-0 left-0 w-full h-2 overflow-hidden rounded-b-xl",
-    'after:content-[""] after:w-[calc(100%-0px)] after:absolute after:bottom-0 after:left-1/2 after:bg-neutral-default-default after:h-2 after:-translate-x-1/2 after:-translate-y-[2px] after:rounded-b-full after:overflow-hidden',
-    d
-  ), children: /* @__PURE__ */ t.jsx(
-    "div",
-    {
-      ref: e,
-      className: l("h-full transition-all duration-300 ease-out", m),
-      style: { width: "0%" }
-    }
-  ) });
 };
-function G(d, r) {
-  const { duration: n = 2500, showClose: a = !1, colorMode: i = "dark", position: s } = r || {};
-  return h.custom((o) => /* @__PURE__ */ t.jsx(
-    T,
+function _(c, r) {
+  const { duration: i = 2500, showClose: a = !1, colorMode: n = "dark", position: d } = r || {};
+  return p.custom((o) => /* @__PURE__ */ e.jsx(
+    v,
     {
       id: o,
       variant: r?.variant || "success",
-      title: d,
+      title: c,
       description: r?.description,
       icon: r?.icon,
       button: r?.button,
       showClose: a,
-      colorMode: i
+      colorMode: n
     }
   ), {
-    duration: n,
-    position: s,
+    duration: i,
+    position: d,
     unstyled: !0
   });
 }
 export {
-  T as default,
-  G as toastpyrion
+  v as default,
+  _ as toastpyrion
 };

package/dist/badge-CbqYNrl4.js

@@ -0,0 +1,87 @@
+import { j as n } from "./jsx-runtime-GkKLlHH4.js";
+import { c as i } from "./cn-B6yFEsav.js";
+import { forwardRef as b, useState as p, useRef as h, useEffect as v } from "react";
+const N = b((t, s) => {
+  const [c, d] = p(t?.currentTabName || t.tabs[0].name), r = h(null), { tabs: l = [], className: u, activeColor: a = "var(--neutral-900)", currentSystemId: m } = t;
+  v(() => {
+    r.current?.style.setProperty("--tab-bg", a);
+  }, [a]);
+  const o = l.find((e) => e.id === m || e.name === (t?.currentTabName || c));
+  return /* @__PURE__ */ n.jsx(
+    "div",
+    {
+      ref: s,
+      className: i(
+        "select-none",
+        "flex flex-col gap-2",
+        "bg-neutral-strong-default",
+        "h-full w-14 max-w-14 pl-[6px] py-6",
+        "border-r border-neutral-default-default",
+        u
+      ),
+      children: l.map(
+        (e) => {
+          const f = e.name === o?.name, x = typeof e.thumbnail == "string" ? /* @__PURE__ */ n.jsx("img", { src: e.thumbnail, alt: e.description, className: "aspect-square object-contain rounded", draggable: !1 }) : e.thumbnail, g = () => {
+            e.disabled || (d(e.name), e.onClick && e.onClick(e.name));
+          };
+          return /* @__PURE__ */ n.jsx(
+            "div",
+            {
+              className: i(
+                "bg-[(--tab-bg)]",
+                "h-12 w-[50px] z-20",
+                "flex items-center pl-[6px] ",
+                "rounded-l-[8px]",
+                "tabswitch-element relative",
+                f && "active"
+              ),
+              onClick: g,
+              ref: r,
+              children: /* @__PURE__ */ n.jsx("div", { className: i(
+                "size-8 rounded-[4px]",
+                "grid place-items-center",
+                "tab-thumbnail-icon",
+                "bg-transparent text-neutral-default-default",
+                e?.className
+              ), children: x })
+            },
+            e.name
+          );
+        }
+      )
+    }
+  );
+}), C = ({
+  count: t,
+  maxCount: s = 9,
+  className: c = "",
+  size: d = "medium",
+  variant: r = "primary",
+  showZero: l = !1,
+  disabled: u = !1
+}) => {
+  const a = t, m = a > s ? `+${s}` : a;
+  if (a === 0 && !l) return null;
+  const o = {
+    small: "w-4.5 h-4.5 text-xs ",
+    medium: "w-5 h-5 text-xs",
+    large: "w-6 h-6 text-sm"
+  }, e = {
+    primary: "bg-primary-default-default text-neutral-strong-default",
+    secondary: "bg-neutral-medium-default text-neutral-strong-default",
+    success: "bg-green-500 text-white",
+    warning: "bg-yellow-500 text-black",
+    danger: "bg-red-500 text-white"
+  };
+  return /* @__PURE__ */ n.jsx("div", { className: i(
+    "rounded-full flex items-center justify-center font-medium select-none",
+    o[d],
+    e[r],
+    c,
+    u && "text-neutral-strong-disabled bg-primary-medium-disabled"
+  ), children: /* @__PURE__ */ n.jsx("span", { children: m }) });
+};
+export {
+  C as B,
+  N as T
+};

package/dist/components/Avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
 export type SizeVariant = "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
-export interface IAvatar {
+interface IAvatar {
     imageUrl?: string;
     sizeImage?: SizeVariant;
     sizeFallback?: SizeVariant;
@@ -7,5 +7,7 @@ export interface IAvatar {
     subImageUrl?: string;
     borderColor?: string;
     fallbackType?: "initials" | "defaultAvatar";
+    sizeFallbackIcon?: number;
 }
-export default function Avatar({ imageUrl, sizeImage, sizeFallback, fallbackText, subImageUrl, fallbackType, }: IAvatar): import("react/jsx-runtime").JSX.Element;
+export default function Avatar({ imageUrl, sizeImage, sizeFallback, sizeFallbackIcon, fallbackText, subImageUrl, fallbackType, }: IAvatar): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/CardProfile/CardProfile.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { IAvatar as AvatarProps } from '../Avatar/Avatar';
 interface ICardProfile {
     children: ReactNode;
     dropMenu?: ReactNode;
@@ -30,10 +29,9 @@ interface IDropMenu {
     handleTokenLogin: () => void;
 }
 interface ICardProfileImage {
-    isExpanded?: boolean;
+    isExpanded: boolean;
     imageUrl?: string;
     fallbackText?: string;
-    avatarProps?: AvatarProps;
 }
 interface ICardProfileContent {
     isExpanded: boolean;
@@ -41,8 +39,7 @@ interface ICardProfileContent {
     nameCompany: string;
     nameArea: string;
     cardProfile: ReactNode;
-    onClick?: () => void;
-    unassigned?: boolean;
+    onClick: () => void;
 }
 interface ICardProfileOptions {
     onClick: () => void;
@@ -50,8 +47,8 @@ interface ICardProfileOptions {
 }
 export declare const CardProfile: (({ children }: ICardProfile) => import("react/jsx-runtime").JSX.Element) & {
     Menu: ({ isExpanded, sessions, onClickLogout, handleTokenLogin, }: IDropMenu) => import("react/jsx-runtime").JSX.Element;
-    Image: ({ imageUrl, fallbackText, avatarProps }: ICardProfileImage) => import("react/jsx-runtime").JSX.Element;
-    Content: ({ isExpanded, nameUser, nameCompany, nameArea, cardProfile, onClick, unassigned }: ICardProfileContent) => import("react/jsx-runtime").JSX.Element;
+    Image: ({ imageUrl, fallbackText }: ICardProfileImage) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ isExpanded, nameUser, nameCompany, nameArea, cardProfile, onClick, }: ICardProfileContent) => import("react/jsx-runtime").JSX.Element;
     Separator: () => import("react/jsx-runtime").JSX.Element;
     Options: ({ isExpanded, onClick }: ICardProfileOptions) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/DropZone/useFileDropzone.d.ts

@@ -1,15 +1,8 @@
 import { default as React } from 'react';
 import { DropzoneOptions } from 'react-dropzone';
-type MIMETypeString = 'image/*' | 'image/png' | 'image/jpeg' | 'image/gif' | 'image/svg+xml' | 'image/webp' | 'image/vnd.dwg' | 'image/vnd.dxf' | 'text/plain' | 'text/markdown' | 'text/csv' | 'application/pdf' | 'application/postscript' | 'application/illustrator' | 'application/msword' | 'application/vnd.ms-excel' | 'application/vnd.ms-powerpoint' | 'application/vnd.visio' | 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' | 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' | 'application/vnd.openxmlformats-officedocument.presentationml.presentation' | 'application/zip' | 'application/vnd.rar' | 'application/x-7z-compressed' | 'application/gzip' | 'application/x-tar' | 'video/*' | 'video/mp4' | 'video/x-msvideo' | 'video/quicktime' | 'video/webm' | 'video/x-matroska' | 'audio/*' | 'audio/mpeg' | 'audio/wav' | 'audio/mp4' | 'audio/ogg' | 'application/acad' | 'application/step' | 'application/iges' | 'model/stl' | 'message/rfc822' | 'application/vnd.ms-outlook' | 'application/mbox' | 'application/hl7-v2' | 'application/dicom' | 'application/octet-stream';
-export interface UseFileDropzoneOptions extends Omit<DropzoneOptions, "onDrop" | "accept"> {
+export interface UseFileDropzoneOptions extends Omit<DropzoneOptions, "onDrop"> {
     onFilesAccepted?: (files: File[]) => void;
     onFilesRejected?: (rejectedFiles: unknown[]) => void;
-    accept?: Partial<Record<MIMETypeString, string[]>>;
-}
-export interface UseFileDropzoneOptions extends Omit<DropzoneOptions, "onDrop" | "accept"> {
-    onFilesAccepted?: (files: File[]) => void;
-    onFilesRejected?: (rejectedFiles: unknown[]) => void;
-    accept?: Partial<Record<MIMETypeString, string[]>>;
 }
 export declare function useFileDropzone({ onFilesAccepted, onFilesRejected, ...options }: UseFileDropzoneOptions): {
     hasErrors: boolean;
@@ -26,4 +19,3 @@ export declare function useFileDropzone({ onFilesAccepted, onFilesRejected, ...o
     getRootProps: <T extends import('react-dropzone').DropzoneRootProps>(props?: T) => T;
     getInputProps: <T extends import('react-dropzone').DropzoneInputProps>(props?: T) => T;
 };
-export {};

package/dist/components/Layout/LayoutGeneric.d.ts

@@ -0,0 +1,6 @@
+export interface LayoutGenericProps {
+    children: React.ReactNode;
+    sidebar?: React.ReactNode;
+}
+declare const _default: import('react').MemoExoticComponent<({ children, sidebar }: LayoutGenericProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/NotificationCard/NotificationCard.d.ts

@@ -17,11 +17,10 @@ export interface NotificationCardProps<NotificationMetadata = any> {
     body: string | React.ReactNode | ((metadata?: NotificationMetadata) => React.ReactNode);
     date: string | Date;
     actions?: [NotificationAction<NotificationMetadata>, NotificationAction<NotificationMetadata>] | [NotificationAction<NotificationMetadata>];
-    read?: boolean;
+    isNew?: boolean;
     className?: string;
     metadata?: NotificationMetadata;
-    onClick?: (metadata?: NotificationMetadata) => void;
 }
-declare const NotificationCard: <NotificationMetadata = unknown>({ user, body, date, actions, read, className, metadata, onClick }: NotificationCardProps<NotificationMetadata>) => import("react/jsx-runtime").JSX.Element;
+declare const NotificationCard: <NotificationMetadata = unknown>({ user, body, date, actions, isNew, className, metadata }: NotificationCardProps<NotificationMetadata>) => import("react/jsx-runtime").JSX.Element;
 export default NotificationCard;
 export type NotificationCardComponent = typeof NotificationCard;

package/dist/components/PyrionNavigationDrawer/PLNotificationsList.d.ts

@@ -1,18 +1,15 @@
 import { NotificationCardProps } from '../NotificationCard/NotificationCard';
-import { ScrollableControlsHandler } from '../Scrollable/Scrollable';
 interface PLNotificationsDrawerProps<NotificationMetadata> {
     onCloseClick?: VoidFunction;
     onMarkAllAsRead?: () => void;
     notificationsListControls?: React.RefObject<NotificationsListControlsHandler<NotificationMetadata> | null>;
-    scrollableControls?: React.RefObject<ScrollableControlsHandler | null>;
 }
 export interface NotificationsListControlsHandler<NotificationMetadata> {
-    addNewNotification: (notification: NotificationCardProps<NotificationMetadata> | NotificationCardProps<NotificationMetadata>[], position?: 'top' | 'bottom') => void;
+    addNewNotification: (notification: NotificationCardProps<NotificationMetadata> | NotificationCardProps<NotificationMetadata>[]) => void;
     subscribeToUpdates: (callback: (notifications: NotificationCardProps<NotificationMetadata>[], count: number) => void) => () => void;
     removeNotification: (id: string | string[]) => void;
     removeAllNotifications: () => void;
     setNotifications: (notifications: NotificationCardProps<NotificationMetadata>[]) => void;
-    setLoading: (loading: boolean) => void;
 }
-declare const PLNotificationsList: <NotificationMetadata = unknown>({ onCloseClick, onMarkAllAsRead, notificationsListControls, scrollableControls }: PLNotificationsDrawerProps<NotificationMetadata>) => import("react/jsx-runtime").JSX.Element;
+declare const PLNotificationsList: <NotificationMetadata = unknown>({ onCloseClick, onMarkAllAsRead, notificationsListControls }: PLNotificationsDrawerProps<NotificationMetadata>) => import("react/jsx-runtime").JSX.Element;
 export default PLNotificationsList;

package/dist/components/PyrionNavigationDrawer/PLSidebar.d.ts

@@ -1,14 +1,12 @@
 import { ReactNode } from 'react';
 import { PLSidebarContentHandle } from './PLSidebarContent';
 import { NotificationsListControlsHandler } from './PLNotificationsList';
-import { ScrollableControlsHandler } from '../Scrollable/Scrollable';
-declare const _DrawerSidebarWrapper: <TNotificationMetadata = unknown>({ options, helpSection, sidebarContentRef, initialSectionRef, notificationsListControls, scrollableControls, }: {
+declare const _DrawerSidebarWrapper: <TNotificationMetadata = unknown>({ options, helpSection, sidebarContentRef, initialSectionRef, notificationsListControls, }: {
     options?: any;
     helpSection?: ReactNode | (() => ReactNode);
     sidebarContentRef: React.RefObject<PLSidebarContentHandle | null>;
     initialSectionRef: React.RefObject<"notifications" | "help">;
     notificationsListControls?: React.RefObject<NotificationsListControlsHandler<TNotificationMetadata> | null>;
-    scrollableControls?: React.RefObject<ScrollableControlsHandler | null>;
 }) => import("react/jsx-runtime").JSX.Element;
 declare const DrawerSidebarWrapper: typeof _DrawerSidebarWrapper;
 export default DrawerSidebarWrapper;

package/dist/components/PyrionNavigationDrawer/PLSidebarContent.d.ts

@@ -1,7 +1,6 @@
 import { ReactElement, ReactNode, ForwardedRef } from 'react';
 import { PyrionLayoutOptions } from './PyrionLayout';
 import { NotificationsListControlsHandler } from './PLNotificationsList';
-import { ScrollableControlsHandler } from '../Scrollable/Scrollable';
 export type PLSidebarContentHandle = {
     setActiveSection: (section: 'notifications' | 'help') => void;
 };
@@ -11,7 +10,6 @@ export type PLSidebarContentProps<TNotificationMetadata = unknown> = {
     helpSection?: ReactNode | (() => ReactNode);
     initialSection?: 'notifications' | 'help';
     notificationsListControls?: React.RefObject<NotificationsListControlsHandler<TNotificationMetadata> | null>;
-    scrollableControls?: React.RefObject<ScrollableControlsHandler | null>;
 };
 declare const PLSidebarContent: <TNotificationMetadata = unknown>(props: PLSidebarContentProps<TNotificationMetadata> & {
     ref?: ForwardedRef<PLSidebarContentHandle>;

package/dist/components/PyrionNavigationDrawer/PLayoutBase.d.ts

@@ -6,7 +6,6 @@ import { TicketCardHandlerProps } from '../TicketCard';
 import { NotificationsListControlsHandler } from './PLNotificationsList';
 import { PLSidebarContentHandle } from './PLSidebarContent';
 import { AuthSession, PyrionNavigationControls, PyrionLayoutOptions, PyrionLayoutProps } from './PyrionLayout';
-import { ScrollableControlsHandler } from '../Scrollable/Scrollable';
 export type TLayoutBaseProps<TAppMetadata = unknown, TNotificationMetadata = unknown> = {
     links?: PyrionLayoutLinkItemProps[];
     handleNavigation: (path: string) => void;
@@ -30,7 +29,6 @@ export type TLayoutBaseProps<TAppMetadata = unknown, TNotificationMetadata = unk
     initialSectionRef: React.RefObject<'notifications' | 'help'>;
     navigationControlsRef: React.RefObject<PyrionNavigationControls<TNotificationMetadata>>;
     notificationsListControls?: React.RefObject<NotificationsListControlsHandler<TNotificationMetadata> | null>;
-    scrollableControls?: React.RefObject<ScrollableControlsHandler | null>;
     outletRef: React.RefObject<HTMLDivElement | null>;
     onProfileClick?: (collapsed: boolean) => void;
 };

package/dist/components/PyrionNavigationDrawer/PyrionLayout.d.ts

@@ -3,7 +3,6 @@ import { PyrionLayoutActionItemProps } from '../NavigationDrawer/NavigationDrawe
 import { PyrionLayoutLinkItemProps } from '../NavigationDrawer/NavigationDrawerLinkItem';
 import { NavigationDrawerSidebarProps } from '../NavigationDrawer/NavigationDrawerSidebar';
 import { NotificationCardProps } from '../NotificationCard/NotificationCard';
-import { ScrollTargetData, ScrollTargetConfig } from '../Scrollable/Scrollable';
 import { AllOptionAccessor } from '../Shared/types';
 import { TabSwitchElement } from '../TabSwitch/TabSwitch';
 import { subImageUrlAccessor } from './PLSystemSessions';
@@ -136,13 +135,11 @@ export type PyrionNavigationControls<TNotificationMetadata = unknown> = {
     openNotifications?: () => void;
     showErrorModal?: (node: (ReactNode | (() => ReactNode)), disableDrawer: boolean, hideCloseButton?: boolean) => void;
     closeErrorModal?: () => void;
-    addNewNotification?: (notification: NotificationCardProps<TNotificationMetadata> | NotificationCardProps<TNotificationMetadata>[], position?: 'top' | 'bottom') => void;
+    addNewNotification?: (notification: NotificationCardProps<TNotificationMetadata> | NotificationCardProps<TNotificationMetadata>[]) => void;
     subscribeToNotificationsUpdates?: (callback: (notifications: NotificationCardProps<TNotificationMetadata>[], count: number) => void) => () => void;
     setNotifications?: (notifications: NotificationCardProps<TNotificationMetadata>[]) => void;
     removeAllNotifications?: () => void;
     removeNotification?: (id: string | string[]) => void;
-    setNotificationsLoading?: (loading: boolean) => void;
-    subscribeToNotificationsScroll?: (callback: (data: ScrollTargetData) => void, config?: ScrollTargetConfig) => () => void;
 };
 export declare const usePyrionLayout: <TNotificationMetadata = unknown>() => PyrionNavigationControls<TNotificationMetadata>;
 declare const PyrionLayout: <TAppMetadata = unknown, TNotificationMetadata = unknown>({ children, helpSection, state, links: navlinks, onLinkClick, onNavigate, onLogoutClick, actions, activeActionId, onActionClick, tabsProps, currentSystemId, onSessionClick, onSystemLogoClick, onProfileClick, ...props }: PyrionLayoutProps<TAppMetadata, TNotificationMetadata>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Scrollable/Scrollable.d.ts

@@ -17,33 +17,6 @@ type ScrollbarProps = {
     hide?: boolean;
     size?: "small" | 'medium';
 };
-export interface ScrollTargetData {
-    percentage: number;
-    direction: 'up' | 'down' | 'left' | 'right';
-    scrollTop: number;
-    scrollLeft: number;
-    scrollHeight: number;
-    scrollWidth: number;
-    clientHeight: number;
-    clientWidth: number;
-}
-export interface ScrollTargetConfig {
-    target: number;
-    direction?: 'x' | 'y' | 'both';
-    trip?: 'forth' | 'back' | 'round-trip';
-}
-export interface ScrollableControlsHandler {
-    subscribeToScrollTarget: (callback: (data: ScrollTargetData) => void, config?: ScrollTargetConfig) => () => void;
-}
-type ScrollTopButtonTarget = string;
-type ScrollTopButtonProps = {
-    target?: ScrollTopButtonTarget;
-    icon?: React.ComponentType<{
-        size?: number;
-        className?: string;
-    }>;
-    className?: string;
-};
 export interface ScrollableProps {
     debugMode?: boolean;
     className?: string;
@@ -54,8 +27,6 @@ export interface ScrollableProps {
     disableMouseScroll?: boolean;
     defaultBehavior?: 'scroll-on-click' | 'scroll-on-hover' | 'none';
     persistScroll?: boolean | string;
-    controls?: React.RefObject<ScrollableControlsHandler | null>;
-    scrollTopButton?: ScrollTopButtonProps;
 }
 declare const Scrollable: (props: ScrollableProps) => import("react/jsx-runtime").JSX.Element;
 export default Scrollable;

package/dist/components/Sidebar/SecondaryBar/SecondaryBar.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+export interface SecondaryBarRootProps {
+    children: ReactNode;
+    isOpen?: boolean;
+    className?: string;
+    width?: string;
+    action?: string;
+    primarySidebarCollapsed?: boolean;
+    onClose?: () => void;
+}
+export interface HeaderProps {
+    children: ReactNode;
+    className?: string;
+}
+export interface ContentProps {
+    children: ReactNode;
+    className?: string;
+}
+export interface FooterProps {
+    children: ReactNode;
+    className?: string;
+}
+export interface SpacerProps {
+    className?: string;
+}
+export declare const SecondaryBar: (({ children, isOpen, className, width, action, primarySidebarCollapsed, onClose, }: SecondaryBarRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, isOpen, className, width, action, primarySidebarCollapsed, onClose, }: SecondaryBarRootProps) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ children, className }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className }: ContentProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children, className }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+    Spacer: ({ className }: SpacerProps) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/Sidebar/SecondaryBar/hooks/useSecondaryBarAnimation.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useSecondaryBarAnimation: (secondaryBarRef: RefObject<HTMLDivElement | null>, isOpen: boolean) => void;

package/dist/components/Sidebar/SecondaryBar/index.d.ts

@@ -0,0 +1 @@
+export { SecondaryBar } from './SecondaryBar';