@alxgrn/telefrag-ui 0.0.60 → 0.0.62

package/dist/components/icons/index.js

@@ -1,5 +1,5 @@
 import { default as o } from "./AlignBottom.js";
-import { default as a } from "./AlignCenter.js";
+import { default as t } from "./AlignCenter.js";
 import { default as l } from "./AlignJustify.js";
 import { default as s } from "./AlignLeft.js";
 import { default as u } from "./AlignMiddle.js";
@@ -9,13 +9,13 @@ import { default as h } from "./Asterisk.js";
 import { default as A } from "./Bold.js";
 import { default as c } from "./Book.js";
 import { default as I } from "./Calendar.js";
-import { default as R } from "./CellsMerge.js";
-import { default as w } from "./CellsSplit.js";
-import { default as F } from "./Check.js";
-import { default as T } from "./ChevronDown.js";
-import { default as v } from "./ChevronLeft.js";
-import { default as D } from "./ChevronRight.js";
-import { default as b } from "./Clock.js";
+import { default as L } from "./CellsMerge.js";
+import { default as T } from "./CellsSplit.js";
+import { default as B } from "./Check.js";
+import { default as M } from "./ChevronDown.js";
+import { default as U } from "./ChevronLeft.js";
+import { default as v } from "./ChevronRight.js";
+import { default as J } from "./Clock.js";
 import { default as E } from "./Code.js";
 import { default as q } from "./CodeXml.js";
 import { default as O } from "./ColumnInsertAfter.js";
@@ -26,7 +26,7 @@ import { default as Y } from "./Feather.js";
 import { default as _ } from "./Files.js";
 import { default as ee } from "./Film.js";
 import { default as oe } from "./FlipVertical.js";
-import { default as ae } from "./Forum.js";
+import { default as te } from "./Forum.js";
 import { default as le } from "./Gamepad.js";
 import { default as se } from "./Heading.js";
 import { default as ue } from "./Heading1.js";
@@ -36,13 +36,13 @@ import { default as he } from "./Heading4.js";
 import { default as Ae } from "./Heading5.js";
 import { default as ce } from "./Heading6.js";
 import { default as Ie } from "./Image.js";
-import { default as Re } from "./IndentDecrease.js";
-import { default as we } from "./Italic.js";
-import { default as Fe } from "./Jam.js";
-import { default as Te } from "./JoinUp.js";
-import { default as ve } from "./Link.js";
-import { default as De } from "./List.js";
-import { default as be } from "./ListOrdered.js";
+import { default as Le } from "./IndentDecrease.js";
+import { default as Te } from "./Italic.js";
+import { default as Be } from "./Jam.js";
+import { default as Me } from "./JoinUp.js";
+import { default as Ue } from "./Link.js";
+import { default as ve } from "./List.js";
+import { default as Je } from "./ListOrdered.js";
 import { default as Ee } from "./Maximize.js";
 import { default as qe } from "./Menu.js";
 import { default as Oe } from "./Minimize.js";
@@ -53,20 +53,21 @@ import { default as Ye } from "./Redo.js";
 import { default as _e } from "./Rocket.js";
 import { default as er } from "./RowInsertAfter.js";
 import { default as or } from "./RowInsertBefore.js";
-import { default as ar } from "./ShowSidebar.js";
+import { default as tr } from "./ShowSidebar.js";
 import { default as lr } from "./Shrink.js";
 import { default as sr } from "./SquareDashed.js";
 import { default as ur } from "./Strikethrough.js";
 import { default as xr } from "./Table.js";
-import { default as nr } from "./TelefragLogo.js";
-import { default as hr } from "./Trash.js";
-import { default as Ar } from "./Type.js";
-import { default as cr } from "./Underline.js";
-import { default as Ir } from "./Undo.js";
-import { default as Rr } from "./Users.js";
+import { default as nr } from "./TelefragSymbol.js";
+import { default as hr } from "./TelefragLogo.js";
+import { default as Ar } from "./Trash.js";
+import { default as cr } from "./Type.js";
+import { default as Ir } from "./Underline.js";
+import { default as Lr } from "./Undo.js";
+import { default as Tr } from "./Users.js";
 export {
   o as AlignBottom,
-  a as AlignCenter,
+  t as AlignCenter,
   l as AlignJustify,
   s as AlignLeft,
   u as AlignMiddle,
@@ -76,13 +77,13 @@ export {
   A as Bold,
   c as Book,
   I as Calendar,
-  R as CellsMerge,
-  w as CellsSplit,
-  F as Check,
-  T as ChevronDown,
-  v as ChevronLeft,
-  D as ChevronRight,
-  b as Clock,
+  L as CellsMerge,
+  T as CellsSplit,
+  B as Check,
+  M as ChevronDown,
+  U as ChevronLeft,
+  v as ChevronRight,
+  J as Clock,
   E as Code,
   q as CodeXml,
   O as ColumnInsertAfter,
@@ -93,7 +94,7 @@ export {
   _ as Files,
   ee as Film,
   oe as FlipVertical,
-  ae as Forum,
+  te as Forum,
   le as Gamepad,
   se as Heading,
   ue as Heading1,
@@ -103,13 +104,13 @@ export {
   Ae as Heading5,
   ce as Heading6,
   Ie as Image,
-  Re as IndentDecrease,
-  we as Italic,
-  Fe as Jam,
-  Te as JoinUp,
-  ve as Link,
-  De as List,
-  be as ListOrdered,
+  Le as IndentDecrease,
+  Te as Italic,
+  Be as Jam,
+  Me as JoinUp,
+  Ue as Link,
+  ve as List,
+  Je as ListOrdered,
   Ee as Maximize,
   qe as Menu,
   Oe as Minimize,
@@ -120,15 +121,16 @@ export {
   _e as Rocket,
   er as RowInsertAfter,
   or as RowInsertBefore,
-  ar as ShowSidebar,
+  tr as ShowSidebar,
   lr as Shrink,
   sr as SquareDashed,
   ur as Strikethrough,
   xr as Table,
-  nr as TelefragLogo,
-  hr as Trash,
-  Ar as Type,
-  cr as Underline,
-  Ir as Undo,
-  Rr as Users
+  hr as TelefragLogo,
+  nr as TelefragSymbol,
+  Ar as Trash,
+  cr as Type,
+  Ir as Underline,
+  Lr as Undo,
+  Tr as Users
 };

package/dist/components/layout/Footer.js

@@ -1,9 +1,8 @@
 import { jsx as r, jsxs as e } from "react/jsx-runtime";
-import '../../assets/Footer.css';/* empty css                    */
-const s = () => /* @__PURE__ */ r("footer", { className: "Footer", children: /* @__PURE__ */ e("div", { children: [
+import '../../assets/Footer.css';const t = () => /* @__PURE__ */ r("footer", { className: "Footer", children: /* @__PURE__ */ e("div", { children: [
   "Copyright © ",
   /* @__PURE__ */ r("a", { href: "/user/1", children: "Alexander Fedorov" })
 ] }) });
 export {
-  s as default
+  t as default
 };

package/dist/components/layout/Header.js

@@ -1,12 +1,13 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import s from "../icons/Menu.js";
-import l from "../icons/TelefragLogo.js";
+import s from "../icons/TelefragSymbol.js";
+import a from "../icons/TelefragLogo.js";
 import '../../assets/Header.css';/* empty css                    */
-const t = ({ userMenu: r, onMenuSwitch: a, onLogoClick: d }) => /* @__PURE__ */ e("header", { className: "HeaderWrapper", children: /* @__PURE__ */ i("div", { className: "Header", children: [
-  /* @__PURE__ */ e("div", { className: "HeaderLeft", onClick: a, children: /* @__PURE__ */ e(s, {}) }),
-  /* @__PURE__ */ e("div", { className: "HeaderCenter", children: /* @__PURE__ */ e(l, { onClick: d }) }),
-  /* @__PURE__ */ e("div", { className: "HeaderRight", children: r })
+const n = ({ userMenu: l, onMenuSwitch: r, onLogoClick: d }) => /* @__PURE__ */ e("header", { className: "HeaderWrapper", children: /* @__PURE__ */ i("div", { className: "Header", children: [
+  /* @__PURE__ */ e("div", { className: "HeaderMobile", onClick: r, children: /* @__PURE__ */ e(s, {}) }),
+  /* @__PURE__ */ e("div", { className: "HeaderTablet", children: /* @__PURE__ */ e(a, { onClick: r }) }),
+  /* @__PURE__ */ e("div", { className: "HeaderDesktop", children: /* @__PURE__ */ e(a, { onClick: d }) }),
+  /* @__PURE__ */ e("div", { className: "HeaderRight", children: l })
 ] }) });
 export {
-  t as default
+  n as default
 };

package/dist/components/layout/Layout.js

@@ -1,13 +1,14 @@
 import { jsxs as f, jsx as o } from "react/jsx-runtime";
 import { useState as n } from "react";
 import l from "./Header.js";
-import u from "./Footer.js";
-import d from "./Content.js";
-import '../../assets/Editable.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Menu.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/Button.css';import '../../assets/DatePicker.css';import '../../assets/Label.css';import '../../assets/RequiredMark.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';/* empty css                        */
+import u from "./Content.js";
+import '../../assets/Editable.css';import '../../assets/Toolbar.css';import '../../assets/Scroll.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Menu.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/Button.css';import '../../assets/DatePicker.css';import '../../assets/Label.css';import '../../assets/RequiredMark.css';import '../../assets/TelefragLogo.css';import '../../assets/TelefragSymbol.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';/* empty css                        */
 import "react-children-utilities";
 import "react-transition-group";
 import "react-dom";
 /* empty css                   */
+/* empty css                            */
+/* empty css                          */
 /* empty css                          */
 /* empty css                   */
 /* empty css                        */
@@ -24,33 +25,34 @@ import "react-dom";
 /* empty css                     */
 /* empty css                   */
 /* empty css                     */
-import { Sidebar as c } from "../ui/sidebar/Sidebar.js";
+/* empty css                    */
+import { Sidebar as d } from "../ui/sidebar/Sidebar.js";
+/* empty css                     */
 /* empty css                      */
-import b from "./MainMenu.js";
-const T = ({ children: p, mainMenu: m, userMenu: e, onLogoClick: s, onMenuClick: r }) => {
-  const [a, t] = n(!1);
+import c from "./MainMenu.js";
+const W = ({ children: p, mainMenu: m, userMenu: e, onLogoClick: s, onMenuClick: t }) => {
+  const [a, r] = n(!1);
   return /* @__PURE__ */ f("div", { className: "Layout", children: [
     /* @__PURE__ */ o(
       l,
       {
         userMenu: e,
-        onMenuSwitch: () => t((i) => !i),
+        onMenuSwitch: () => r((i) => !i),
         onLogoClick: s
       }
     ),
-    /* @__PURE__ */ o(d, { mainMenu: m, onMenuClick: r, children: p }),
-    /* @__PURE__ */ o(u, {}),
+    /* @__PURE__ */ o(u, { mainMenu: m, onMenuClick: t, children: p }),
     /* @__PURE__ */ o(
-      c,
+      d,
       {
         isOpen: a,
-        onClose: () => t(!1),
+        onClose: () => r(!1),
         children: /* @__PURE__ */ o(
-          b,
+          c,
           {
             items: m,
             onMenuClick: (i) => {
-              t(!1), r && r(i);
+              r(!1), t && t(i);
             }
           }
         )
@@ -59,5 +61,5 @@ const T = ({ children: p, mainMenu: m, userMenu: e, onLogoClick: s, onMenuClick:
   ] });
 };
 export {
-  T as default
+  W as default
 };

package/dist/components/layout/MainMenu.d.ts

@@ -5,6 +5,7 @@ export type MainMenuTitle = {
     icon?: never;
     title: string;
     checked?: never;
+    node?: never;
 };
 export type MainMenuAlternative = {
     id: string;
@@ -12,8 +13,17 @@ export type MainMenuAlternative = {
     icon: ReactNode;
     title?: never;
     checked?: boolean;
+    node?: never;
 };
-export type MainMenuItem = MainMenuTitle | MainMenuAlternative;
+export type MainMenuNode = {
+    id?: never;
+    text?: never;
+    icon?: never;
+    title?: string;
+    checked?: never;
+    node: ReactNode;
+};
+export type MainMenuItem = MainMenuTitle | MainMenuAlternative | MainMenuNode;
 type Props = {
     items: MainMenuItem[];
     onMenuClick?: (id: string) => void;

package/dist/components/layout/MainMenu.js

@@ -1,21 +1,21 @@
-import { jsx as e, jsxs as s, Fragment as c } from "react/jsx-runtime";
+import { jsx as e, jsxs as l, Fragment as c } from "react/jsx-runtime";
 import '../../assets/MainMenu.css';/* empty css                      */
-const o = ({ items: i, onMenuClick: a }) => /* @__PURE__ */ e("div", { className: "MainMenu", children: i.map((n, l) => /* @__PURE__ */ s(
+const o = ({ items: s, onMenuClick: a }) => /* @__PURE__ */ e("div", { className: "MainMenu", children: s.map((n, i) => /* @__PURE__ */ l(
   "div",
   {
     onClick: () => {
       a && n.id && a(n.id);
     },
-    className: n.title ? "MainMenuTitle" : void 0,
+    className: n.node ? "MainMenuNode" : n.title ? "MainMenuTitle" : "MainMenuAlternative",
     children: [
-      n.title ? /* @__PURE__ */ e("span", { className: "one-line", children: n.title }) : /* @__PURE__ */ s(c, { children: [
+      n.node ? n.node : n.title ? /* @__PURE__ */ e("span", { className: "one-line", children: n.title }) : /* @__PURE__ */ l(c, { children: [
         n.icon,
         /* @__PURE__ */ e("span", { className: "one-line", children: n.text })
       ] }),
       n.checked && /* @__PURE__ */ e("span", { className: "MainMenuCheck" })
     ]
   },
-  l
+  i
 )) });
 export {
   o as default

package/dist/components/layout/Page.js

@@ -1,10 +1,12 @@
 import { jsxs as m, jsx as r, Fragment as a } from "react/jsx-runtime";
-import '../../assets/Content.css';import '../../assets/MainMenu.css';import '../../assets/Footer.css';import '../../assets/Header.css';import '../../assets/Editable.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Menu.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/Button.css';import '../../assets/DatePicker.css';import '../../assets/Label.css';import '../../assets/RequiredMark.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';/* empty css                        */
+import '../../assets/Content.css';import '../../assets/MainMenu.css';import '../../assets/Header.css';import '../../assets/Editable.css';import '../../assets/Toolbar.css';import '../../assets/Scroll.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Menu.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/Button.css';import '../../assets/DatePicker.css';import '../../assets/Label.css';import '../../assets/RequiredMark.css';import '../../assets/TelefragLogo.css';import '../../assets/TelefragSymbol.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';/* empty css                        */
 import "react";
 import "react-children-utilities";
 import "react-transition-group";
 import "react-dom";
 /* empty css                   */
+/* empty css                            */
+/* empty css                          */
 /* empty css                          */
 /* empty css                   */
 /* empty css                        */
@@ -21,13 +23,14 @@ import "react-dom";
 /* empty css                     */
 /* empty css                   */
 /* empty css                     */
+/* empty css                    */
 import { Sidebar as n } from "../ui/sidebar/Sidebar.js";
+/* empty css                     */
 /* empty css                      */
 /* empty css                    */
-/* empty css                    */
 /* empty css                      */
 /* empty css                     */
-const G = ({ header: o, children: p, sidebar: i, isSidebarVisible: e = !1, onSidebarClose: t }) => /* @__PURE__ */ m("div", { className: "Page", children: [
+const K = ({ header: o, children: p, sidebar: i, isSidebarVisible: e = !1, onSidebarClose: t }) => /* @__PURE__ */ m("div", { className: "Page", children: [
   o && /* @__PURE__ */ r(a, { children: o }),
   /* @__PURE__ */ m("div", { className: i ? "PageBody" : "PageBody Wide", children: [
     /* @__PURE__ */ r("div", { className: "PageContent", children: p }),
@@ -46,5 +49,5 @@ const G = ({ header: o, children: p, sidebar: i, isSidebarVisible: e = !1, onSid
   )
 ] });
 export {
-  G as default
+  K as default
 };

package/dist/components/layout/PageHeader.d.ts

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react';
+import { ToolbarItem } from '../ui/toolbar/Toolbar';
 type Props = {
     menu?: ReactNode;
     title?: string;
@@ -14,6 +15,9 @@ type Props = {
     onLogoRemove?: () => void;
     onBackRemove?: () => void;
     onShowSidebar?: () => void;
+    tbItems?: ToolbarItem[];
+    tbActive?: string | number;
+    tbOnActive?: (id: string | number) => void;
 };
 declare const PageHeader: FC<Props>;
 export default PageHeader;

package/dist/components/layout/PageHeader.js

@@ -1,8 +1,10 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import h from "../icons/Image.js";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import f from "../icons/Image.js";
+import '../../assets/Content.css';import '../../assets/MainMenu.css';import '../../assets/Header.css';import '../../assets/Editable.css';import '../../assets/Sidebar.css';import '../../assets/Scroll.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Menu.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/DatePicker.css';import '../../assets/Label.css';import '../../assets/RequiredMark.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';import '../../assets/TelefragLogo.css';import '../../assets/TelefragSymbol.css';/* empty css                            */
+/* empty css                          */
+import k from "../icons/Trash.js";
+/* empty css                        */
 import "react";
-import N from "../icons/Trash.js";
-import '../../assets/Content.css';import '../../assets/MainMenu.css';import '../../assets/Footer.css';import '../../assets/Header.css';import '../../assets/Editable.css';import '../../assets/Sidebar.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Menu.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/DatePicker.css';import '../../assets/Label.css';import '../../assets/RequiredMark.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';/* empty css                        */
 import "react-children-utilities";
 import "react-transition-group";
 import "react-dom";
@@ -10,7 +12,7 @@ import "react-dom";
 /* empty css                          */
 /* empty css                   */
 /* empty css                        */
-import { Button as f } from "../form/button/Button.js";
+import { Button as b } from "../form/button/Button.js";
 /* empty css                     */
 /* empty css                     */
 /* empty css                  */
@@ -23,79 +25,86 @@ import { Button as f } from "../form/button/Button.js";
 /* empty css                     */
 /* empty css                   */
 /* empty css                     */
+/* empty css                    */
 /* empty css                     */
+import x from "../ui/toolbar/Toolbar.js";
 /* empty css                      */
 /* empty css                    */
-/* empty css                    */
 /* empty css                      */
 /* empty css                     */
-const _ = ({
+const de = ({
   menu: d,
-  title: u,
-  subtitle: k,
+  title: C,
+  subtitle: T,
   logo: t,
-  back: m,
+  back: l,
   admin: o,
-  square: l,
+  square: p,
   onLogoClick: s,
   onLogoCreate: c,
-  onLogoRemove: p,
-  onBackClick: n,
-  onBackCreate: g,
-  onBackRemove: v,
-  onShowSidebar: P
+  onLogoRemove: n,
+  onBackClick: g,
+  onBackCreate: v,
+  onBackRemove: P,
+  onShowSidebar: H,
+  tbItems: m,
+  tbActive: h,
+  tbOnActive: N
 }) => {
-  const i = (e, H) => {
-    e.stopPropagation(), H && H();
+  const i = (r, u) => {
+    r.stopPropagation(), u && u();
   };
   return /* @__PURE__ */ a("div", { className: "PageHeader", children: [
     /* @__PURE__ */ a(
       "div",
       {
         className: "PageHeaderBack",
-        onClick: (e) => i(e, n),
+        onClick: (r) => i(r, g),
         style: {
-          cursor: n ? "pointer" : void 0,
-          backgroundImage: m ? `url(${m})` : void 0
+          cursor: g ? "pointer" : void 0,
+          backgroundImage: l ? `url(${l})` : void 0
         },
         children: [
-          o && g && /* @__PURE__ */ r("div", { className: "PageHeaderBackCreate", onClick: (e) => i(e, g), children: /* @__PURE__ */ r(h, {}) }),
-          o && v && /* @__PURE__ */ r("div", { className: "PageHeaderBackRemove", onClick: (e) => i(e, v), children: /* @__PURE__ */ r(N, {}) })
+          o && v && /* @__PURE__ */ e("div", { className: "PageHeaderBackCreate", onClick: (r) => i(r, v), children: /* @__PURE__ */ e(f, {}) }),
+          o && P && /* @__PURE__ */ e("div", { className: "PageHeaderBackRemove", onClick: (r) => i(r, P), children: /* @__PURE__ */ e(k, {}) })
         ]
       }
     ),
     /* @__PURE__ */ a("div", { className: "PageHeaderAbout", children: [
       /* @__PURE__ */ a("div", { className: "PageHeaderInfo", children: [
-        /* @__PURE__ */ r("div", { className: "PageHeaderTitle one-line", children: u }),
-        /* @__PURE__ */ r("div", { className: "PageHeaderSubtitle one-line", children: k })
+        /* @__PURE__ */ e("div", { className: "PageHeaderTitle one-line", children: C }),
+        /* @__PURE__ */ e("div", { className: "PageHeaderSubtitle one-line", children: T })
       ] }),
-      d && /* @__PURE__ */ r("div", { className: "PageHeaderMenu", children: d }),
-      P && /* @__PURE__ */ r("div", { className: "PageHeaderShowSidebar", children: /* @__PURE__ */ r(
-        f,
-        {
-          label: "Ещё...",
-          onClick: P
-        }
-      ) })
+      d && /* @__PURE__ */ e("div", { className: "PageHeaderMenu", children: d }),
+      H && /* @__PURE__ */ e("div", { className: "PageHeaderShowSidebar", children: /* @__PURE__ */ e(b, { label: "Ещё...", onClick: H }) })
     ] }),
     /* @__PURE__ */ a(
       "div",
       {
-        className: l ? "PageHeaderLogo Square" : "PageHeaderLogo",
-        onClick: (e) => i(e, s),
+        className: p ? "PageHeaderLogo Square" : "PageHeaderLogo",
+        onClick: (r) => i(r, s),
         style: {
           cursor: s ? "pointer" : void 0,
           backgroundImage: t ? `url(${t})` : void 0,
-          borderRadius: l ? void 0 : "50%"
+          borderRadius: p ? void 0 : "50%"
         },
         children: [
-          o && c && /* @__PURE__ */ r("div", { className: "PageHeaderLogoCreate", onClick: (e) => i(e, c), children: /* @__PURE__ */ r(h, {}) }),
-          o && p && /* @__PURE__ */ r("div", { className: "PageHeaderLogoRemove", onClick: (e) => i(e, p), children: /* @__PURE__ */ r(N, {}) })
+          o && c && /* @__PURE__ */ e("div", { className: "PageHeaderLogoCreate", onClick: (r) => i(r, c), children: /* @__PURE__ */ e(f, {}) }),
+          o && n && /* @__PURE__ */ e("div", { className: "PageHeaderLogoRemove", onClick: (r) => i(r, n), children: /* @__PURE__ */ e(k, {}) })
         ]
       }
+    ),
+    m && m.length > 0 && h !== void 0 && N && /* @__PURE__ */ e(
+      x,
+      {
+        items: m,
+        active: h,
+        onActive: N,
+        className: "PageHeaderToolbar"
+      }
     )
   ] });
 };
 export {
-  _ as default
+  de as default
 };

package/dist/components/ui/modal/Modal.js

@@ -1,29 +1,31 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
 import { useEffect as n } from "react";
 import { Overlay as l } from "../overlay/Overlay.js";
-import s from "../../icons/Plus.js";
-import '../../../assets/Modal.css';/* empty css                      */
-const y = ({ children: a, isOpen: e, onClose: r, close: c = !0 }) => (n(() => {
-  const o = (d) => {
-    d.key === "Escape" && r();
+import m from "../../icons/Plus.js";
+import '../../../assets/Modal.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';/* empty css                               */
+/* empty css                             */
+/* empty css                      */
+const M = ({ children: a, isOpen: r, onClose: e, close: i = !0 }) => (n(() => {
+  const o = (c) => {
+    c.key === "Escape" && e();
   };
-  return e && document.body.addEventListener("keydown", o), () => {
-    e && document.body.removeEventListener("keydown", o);
+  return r && document.body.addEventListener("keydown", o), () => {
+    r && document.body.removeEventListener("keydown", o);
   };
-}, [e, r]), /* @__PURE__ */ t(
+}, [r, e]), /* @__PURE__ */ t(
   l,
   {
-    isOpen: e,
-    onClick: r,
-    children: /* @__PURE__ */ i("div", { className: "Modal", onClick: (o) => o.stopPropagation(), children: [
-      c && /* @__PURE__ */ t("div", { className: "ModalClose", onClick: (o) => {
-        o.stopPropagation(), r();
-      }, children: /* @__PURE__ */ t(s, {}) }),
+    isOpen: r,
+    onClick: e,
+    children: /* @__PURE__ */ d("div", { className: "Modal", onClick: (o) => o.stopPropagation(), children: [
+      i && /* @__PURE__ */ t("div", { className: "ModalClose", onClick: (o) => {
+        o.stopPropagation(), e();
+      }, children: /* @__PURE__ */ t(m, {}) }),
       /* @__PURE__ */ t("div", { className: "ModalInner Scrollbar", children: a })
     ] })
   }
 ));
 export {
-  y as Modal,
-  y as default
+  M as Modal,
+  M as default
 };

package/dist/components/ui/scroll/Scroll.d.ts

@@ -0,0 +1,18 @@
+import { default as React, ReactElement } from 'react';
+/**
+ * Блок, в котором по горизонтали размещаются элементы.
+ * Элементы могут не помещаться в блок, в этом случае появляются
+ * кнопки скролла.
+ * В отличие от Carousel элементы в блоке не занимают все доступное
+ * пространство по ширине, напротив - предполагается что сразу
+ * несколько из них видны в блоке.
+ * NB: Скроллер сам визуально никак не выделяет активный элемент,
+ *     но добавляет к блоку ScrollItem класс active
+ */
+type Props = {
+    items: ReactElement[];
+    active?: number;
+    onActive?: (index: number) => void;
+};
+declare const Scroll: React.FC<Props>;
+export default Scroll;