@alxgrn/telefrag-ui 0.0.21 → 0.0.23

package/dist/assets/Content.css

@@ -1 +1 @@
-.Content{display:flex;align-items:stretch;gap:var(--alxgrn-unit-half);max-width:var(--alxgrn-layout-width);margin:0 auto;margin-top:calc(var(--alxgrn-unit-half) + var(--alxgrn-layout-header-height))}.Content .ContentMain{flex:1 1 auto}.Content .ContentMenu{flex:0 0 auto;width:var(--alxgrn-layout-menu-width);color:var(--alxgrn-color-text);background-color:var(--alxgrn-bg-main);max-height:calc(100vh - var(--alxgrn-unit) - var(--alxgrn-layout-header-height));overflow-y:auto;position:sticky;top:calc(var(--alxgrn-unit-half) + var(--alxgrn-layout-header-height))}.Content .ContentMenu::-webkit-scrollbar{width:var(--alxgrn-unit-small);height:var(--alxgrn-unit-small)}.Content .ContentMenu::-webkit-scrollbar-corner{background-color:transparent}.Content .ContentMenu::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Content .ContentMenu::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Content .ContentMenu:hover::-webkit-scrollbar-thumb{background-color:var(--alxgrn-color-scroll);border-radius:var(--alxgrn-unit-small)}@media (max-width: 1024px){.Content .ContentMenu{display:none}}@media (max-width: 768px){.Content{padding-left:0;padding-right:0}}
+.Content{display:flex;align-items:stretch;gap:var(--alxgrn-unit-half);max-width:var(--alxgrn-layout-width);margin:0 auto;margin-top:var(--alxgrn-layout-header-height)}.Content .ContentMain{flex:1 1 auto}.Content .ContentMenu{flex:0 0 auto;width:var(--alxgrn-layout-menu-width);color:var(--alxgrn-color-text);background-color:var(--alxgrn-bg-main);max-height:calc(100vh - var(--alxgrn-unit) - var(--alxgrn-layout-header-height));overflow-y:auto;position:sticky;top:calc(var(--alxgrn-unit-half) + var(--alxgrn-layout-header-height))}.Content .ContentMenu::-webkit-scrollbar{width:var(--alxgrn-unit-small);height:var(--alxgrn-unit-small)}.Content .ContentMenu::-webkit-scrollbar-corner{background-color:transparent}.Content .ContentMenu::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Content .ContentMenu::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Content .ContentMenu:hover::-webkit-scrollbar-thumb{background-color:var(--alxgrn-color-scroll);border-radius:var(--alxgrn-unit-small)}@media (max-width: 1024px){.Content .ContentMenu{display:none}}@media (max-width: 768px){.Content{padding-left:0;padding-right:0}}

package/dist/assets/Page.css

@@ -1 +1 @@
-*{box-sizing:border-box;overflow-wrap:anywhere}:root{--alxgrn-unit: 16px;--alxgrn-unit-half: 8px;--alxgrn-unit-small: 4px;--alxgrn-unit-double: 32px;--alxgrn-unit-smallest: 2px;--alxgrn-animation-length: .15s;--alxgrn-font-size: 16px;--alxgrn-font-size-big: 20px;--alxgrn-font-size-huge: 40px;--alxgrn-font-size-large: 18px;--alxgrn-font-size-largest: 22px;--alxgrn-font-size-small: 14px;--alxgrn-font-size-smallest: 10px;--alxgrn-line-height: 1.3;--alxgrn-font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;--alxgrn-color-h1: #777;--alxgrn-color-h2: #777;--alxgrn-color-h3: #777;--alxgrn-font-size-h1: var(--alxgrn-font-size-huge);--alxgrn-font-size-h2: var(--alxgrn-font-size-big);--alxgrn-font-size-h3: var(--alxgrn-font-size-large);--alxgrn-line-height-h1: var(--alxgrn-line-height);--alxgrn-line-height-h2: var(--alxgrn-line-height);--alxgrn-line-height-h3: var(--alxgrn-line-height);--alxgrn-logo-color-blue: #7091a7;--alxgrn-logo-color-navi: #004571;--alxgrn-logo-color-beige: #c9c1ae;--alxgrn-color-text: #555;--alxgrn-color-dark: var(--alxgrn-color-text);--alxgrn-color-light: lightslategrey;--alxgrn-color-error: firebrick;--alxgrn-color-accent: steelblue;--alxgrn-color-active: var(--alxgrn-color-text);--alxgrn-color-success: forestgreen;--alxgrn-color-scroll: #ccc;--alxgrn-bg-main: #eee;--alxgrn-bg-panel: #fff;--alxgrn-bg-modal: var(--alxgrn-bg-panel);--alxgrn-bg-popup: var(--alxgrn-bg-panel);--alxgrn-bg-dark: #888;--alxgrn-bg-light: rgba(119, 136, 153, .1);--alxgrn-bg-error: rgba(178, 34, 34, .1);--alxgrn-bg-accent: #ecf2f7;--alxgrn-bg-active: moccasin;--alxgrn-bg-success: rgba(34, 139, 34, .1);--alxgrn-border: #ddd;--alxgrn-border-dark: rgba(136, 136, 136, 1);--alxgrn-border-light: rgba(119, 136, 153, 1);--alxgrn-border-error: rgba(178, 34, 34, 1);--alxgrn-border-accent: rgba(70, 130, 180, 1);--alxgrn-border-active: moccasin;--alxgrn-border-success: rgba(34, 139, 34, 1)}[data-theme=dark]{--alxgrn-color-text: #999;--alxgrn-color-light: #666;--alxgrn-color-scroll: var(--alxgrn-bg-active);--alxgrn-bg-main: #111;--alxgrn-bg-panel: #222;--alxgrn-bg-modal: #222;--alxgrn-bg-popup: #333;--alxgrn-bg-accent: #333b3f;--alxgrn-bg-active: #444;--alxgrn-border: #555;--alxgrn-border-dark: rgba(136, 136, 136, .5);--alxgrn-border-light: rgba(119, 136, 153, .5);--alxgrn-border-error: rgba(178, 34, 34, .5);--alxgrn-border-accent: rgba(70, 130, 180, .5);--alxgrn-border-active: rgba(255, 228, 181, .5);--alxgrn-border-success: rgba(34, 139, 34, .5)}.Scrollbar::-webkit-scrollbar{width:var(--alxgrn-unit-small);height:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-thumb{background-color:var(--alxgrn-color-scroll);border-radius:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-corner{background-color:transparent}@media (max-width: 512px){*{--alxgrn-font-size-h1: var(--alxgrn-font-size-big);--alxgrn-font-size-h2: var(--alxgrn-font-size-largest);--alxgrn-font-size-h3: var(--alxgrn-font-size-large)}}:root{--alxgrn-form-width: 512px;--alxgrn-form-width-wide: 1024px}.Form{max-width:var(--alxgrn-form-width)}.Form.FormWide{max-width:var(--alxgrn-form-width-wide)}.Form *{font-size:inherit;line-height:inherit;font-family:inherit;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.Form .FormItem{display:block;margin:var(--alxgrn-unit) 0}.FormSubmitButtons{margin-top:var(--alxgrn-unit-double);margin-bottom:0;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:var(--alxgrn-unit)}:root{--alxgrn-layout-width: 1024px;--alxgrn-layout-menu-width: 200px;--alxgrn-layout-header-height: calc(3 * var(--alxgrn-unit))}.LayoutSidebarShow{display:none}@media (max-width: 768px){.LayoutSidebarShow{display:initial}}.Page{display:flex;flex-direction:column;gap:var(--alxgrn-unit)}.Page .PageBody{display:flex;gap:var(--alxgrn-unit);align-items:stretch}.Page .PageBody .PageContent{flex:1 1 auto}.Page .PageBody .PageSidebar{flex:0 0 auto;width:33%;display:flex;align-items:flex-end}.Page .PageBody .PageSidebar .PageSidebarInner{width:100%;position:sticky;bottom:var(--alxgrn-unit);min-height:calc(100vh - var(--alxgrn-layout-header-height) - var(--alxgrn-unit))}@media (max-width: 768px){.Page .PageBody .PageSidebar{display:none}}
+*{box-sizing:border-box;overflow-wrap:anywhere}:root{--alxgrn-unit: 16px;--alxgrn-unit-half: 8px;--alxgrn-unit-small: 4px;--alxgrn-unit-double: 32px;--alxgrn-unit-smallest: 2px;--alxgrn-animation-length: .15s;--alxgrn-font-size: 16px;--alxgrn-font-size-big: 20px;--alxgrn-font-size-huge: 40px;--alxgrn-font-size-large: 18px;--alxgrn-font-size-largest: 22px;--alxgrn-font-size-small: 14px;--alxgrn-font-size-smallest: 10px;--alxgrn-line-height: 1.3;--alxgrn-font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;--alxgrn-color-h1: #777;--alxgrn-color-h2: #777;--alxgrn-color-h3: #777;--alxgrn-font-size-h1: var(--alxgrn-font-size-huge);--alxgrn-font-size-h2: var(--alxgrn-font-size-big);--alxgrn-font-size-h3: var(--alxgrn-font-size-large);--alxgrn-line-height-h1: var(--alxgrn-line-height);--alxgrn-line-height-h2: var(--alxgrn-line-height);--alxgrn-line-height-h3: var(--alxgrn-line-height);--alxgrn-logo-color-blue: #7091a7;--alxgrn-logo-color-navi: #004571;--alxgrn-logo-color-beige: #c9c1ae;--alxgrn-color-text: #555;--alxgrn-color-dark: var(--alxgrn-color-text);--alxgrn-color-light: lightslategrey;--alxgrn-color-error: firebrick;--alxgrn-color-accent: steelblue;--alxgrn-color-active: var(--alxgrn-color-text);--alxgrn-color-success: forestgreen;--alxgrn-color-scroll: #ccc;--alxgrn-bg-main: #eee;--alxgrn-bg-panel: #fff;--alxgrn-bg-modal: var(--alxgrn-bg-panel);--alxgrn-bg-popup: var(--alxgrn-bg-panel);--alxgrn-bg-dark: #888;--alxgrn-bg-light: rgba(119, 136, 153, .1);--alxgrn-bg-error: rgba(178, 34, 34, .1);--alxgrn-bg-accent: #ecf2f7;--alxgrn-bg-active: moccasin;--alxgrn-bg-success: rgba(34, 139, 34, .1);--alxgrn-border: #ddd;--alxgrn-border-dark: rgba(136, 136, 136, 1);--alxgrn-border-light: rgba(119, 136, 153, 1);--alxgrn-border-error: rgba(178, 34, 34, 1);--alxgrn-border-accent: rgba(70, 130, 180, 1);--alxgrn-border-active: moccasin;--alxgrn-border-success: rgba(34, 139, 34, 1)}[data-theme=dark]{--alxgrn-color-text: #999;--alxgrn-color-light: #666;--alxgrn-color-scroll: var(--alxgrn-bg-active);--alxgrn-bg-main: #111;--alxgrn-bg-panel: #222;--alxgrn-bg-modal: #222;--alxgrn-bg-popup: #333;--alxgrn-bg-accent: #333b3f;--alxgrn-bg-active: #444;--alxgrn-border: #555;--alxgrn-border-dark: rgba(136, 136, 136, .5);--alxgrn-border-light: rgba(119, 136, 153, .5);--alxgrn-border-error: rgba(178, 34, 34, .5);--alxgrn-border-accent: rgba(70, 130, 180, .5);--alxgrn-border-active: rgba(255, 228, 181, .5);--alxgrn-border-success: rgba(34, 139, 34, .5)}.Scrollbar::-webkit-scrollbar{width:var(--alxgrn-unit-small);height:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-thumb{background-color:var(--alxgrn-color-scroll);border-radius:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-corner{background-color:transparent}.one-line{overflow-wrap:break-word;display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}@media (max-width: 512px){*{--alxgrn-font-size-h1: var(--alxgrn-font-size-big);--alxgrn-font-size-h2: var(--alxgrn-font-size-largest);--alxgrn-font-size-h3: var(--alxgrn-font-size-large)}}:root{--alxgrn-form-width: 512px;--alxgrn-form-width-wide: 1024px}.Form{max-width:var(--alxgrn-form-width)}.Form.FormWide{max-width:var(--alxgrn-form-width-wide)}.Form *{font-size:inherit;line-height:inherit;font-family:inherit;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.Form .FormItem{display:block;margin:var(--alxgrn-unit) 0}.FormSubmitButtons{margin-top:var(--alxgrn-unit-double);margin-bottom:0;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:var(--alxgrn-unit)}:root{--alxgrn-layout-width: 1024px;--alxgrn-layout-menu-width: 200px;--alxgrn-layout-header-height: calc(3 * var(--alxgrn-unit))}.LayoutSidebarIsShown{display:none}@media (max-width: 768px){.LayoutSidebarIsShown{display:initial}}.Page{display:flex;flex-direction:column}.Page .PageBody{display:flex;gap:var(--alxgrn-unit);align-items:stretch;margin-top:var(--alxgrn-unit)}.Page .PageBody .PageContent{flex:1 1 auto}.Page .PageBody .PageSidebar{flex:0 0 auto;width:33%;display:flex;align-items:flex-end}.Page .PageBody .PageSidebar .PageSidebarInner{width:100%;position:sticky;bottom:0;min-height:calc(100vh - var(--alxgrn-layout-header-height) - var(--alxgrn-unit))}@media (max-width: 768px){.Page .PageBody .PageSidebar{display:none}}

package/dist/assets/PageHeader.css

@@ -0,0 +1 @@
+.PageHeader{border-radius:var(--alxgrn-unit-half);display:flex;flex-direction:column;overflow:hidden;margin-top:var(--alxgrn-unit)}.PageHeader .PageHeaderBack{width:100%;position:relative;padding-bottom:25%;background-size:cover;background-color:var(--alxgrn-logo-color-beige)}.PageHeader .PageHeaderBack .PageHeaderBackCreate,.PageHeader .PageHeaderBack .PageHeaderBackRemove,.PageHeader .PageHeaderBack .PageHeaderShowSidebar{display:flex;position:absolute;font-size:var(--alxgrn-font-size-large);padding:var(--alxgrn-unit-half);margin:var(--alxgrn-unit-half);background-color:var(--alxgrn-bg-panel);border-radius:var(--alxgrn-unit-small);top:0;left:0;color:var(--alxgrn-color-light);cursor:pointer;opacity:0;transition:.5s}.PageHeader .PageHeaderBack:hover .PageHeaderBackCreate,.PageHeader .PageHeaderBack:hover .PageHeaderBackRemove{opacity:1;transition:.5s}.PageHeader .PageHeaderBack .PageHeaderBackCreate{left:unset;right:0}.PageHeader .PageHeaderBack .PageHeaderBackCreate:hover,.PageHeader .PageHeaderBack .PageHeaderBackRemove:hover{color:var(--alxgrn-color-accent)}.PageHeader .PageHeaderBack .PageHeaderShowSidebar{top:unset;left:unset;right:0;bottom:0;opacity:1;transition:none;color:#fff;background-color:var(--alxgrn-color-accent);display:none;opacity:.9}.PageHeader .PageHeaderBack .PageHeaderShowSidebar:hover{opacity:1}.PageHeader .PageHeaderAbout{display:flex;align-items:center;width:100%;height:calc(5 * var(--alxgrn-unit));background-color:var(--alxgrn-bg-panel);z-index:1}.PageHeader .PageHeaderAbout .PageHeaderLogo{flex:0 0 auto;border-radius:var(--alxgrn-unit-half);border:var(--alxgrn-unit-small) solid var(--alxgrn-bg-panel);background-size:contain;background-color:var(--alxgrn-logo-color-blue);width:calc(10 * var(--alxgrn-unit));height:calc(10 * var(--alxgrn-unit));margin:var(--alxgrn-unit);position:relative;align-self:flex-end}.PageHeader .PageHeaderAbout .PageHeaderLogo .PageHeaderLogoCreate,.PageHeader .PageHeaderAbout .PageHeaderLogo .PageHeaderLogoRemove{display:flex;position:absolute;font-size:var(--alxgrn-font-size-large);padding:var(--alxgrn-unit-half);margin:var(--alxgrn-unit-half);background-color:var(--alxgrn-bg-panel);border-radius:50%;bottom:0;left:0;cursor:pointer;color:var(--alxgrn-color-light);opacity:0;transition:.5s}.PageHeader .PageHeaderAbout .PageHeaderLogo:hover .PageHeaderLogoCreate,.PageHeader .PageHeaderAbout .PageHeaderLogo:hover .PageHeaderLogoRemove{opacity:1;transition:.5s}.PageHeader .PageHeaderAbout .PageHeaderLogo .PageHeaderLogoCreate{left:unset;right:0}.PageHeader .PageHeaderAbout .PageHeaderLogo .PageHeaderLogoCreate:hover,.PageHeader .PageHeaderAbout .PageHeaderLogo .PageHeaderLogoRemove:hover{color:var(--alxgrn-color-accent)}.PageHeader .PageHeaderAbout .PageHeaderInfo{flex:1 1 auto;overflow:hidden}.PageHeader .PageHeaderAbout .PageHeaderInfo .PageHeaderTitle{font-size:var(--alxgrn-font-size-largest);font-weight:600}.PageHeader .PageHeaderAbout .PageHeaderInfo .PageHeaderSubtitle{color:var(--alxgrn-color-light)}.PageHeader .PageHeaderAbout .PageHeaderMenu{flex:0 0 auto;display:flex;margin-right:var(--alxgrn-unit)}@media (max-width: 1024px){.PageHeader{border-top-left-radius:0;border-top-right-radius:0;margin-top:0}}@media (max-width: 768px){.PageHeader .PageHeaderBack .PageHeaderShowSidebar{display:flex}.PageHeader .PageHeaderAbout{height:calc(3 * var(--alxgrn-unit))}.PageHeader .PageHeaderAbout .PageHeaderLogo{border-width:var(--alxgrn-unit-smallest);width:calc(5 * var(--alxgrn-unit));height:calc(5 * var(--alxgrn-unit));margin:var(--alxgrn-unit-half)}.PageHeader .PageHeaderAbout .PageHeaderLogo .PageHeaderLogoRemove,.PageHeader .PageHeaderAbout .PageHeaderLogo .PageHeaderLogoCreate{margin:0}.PageHeader .PageHeaderAbout .PageHeaderInfo .PageHeaderTitle{font-size:var(--alxgrn-font-size-big)}.PageHeader .PageHeaderAbout .PageHeaderInfo .PageHeaderSubtitle{display:none}.PageHeader .PageHeaderAbout .PageHeaderMenu{margin-right:var(--alxgrn-unit-half)}}

package/dist/components/form/form/Form.js

@@ -1,9 +1,9 @@
-import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { jsxs as h, jsx as m } from "react/jsx-runtime";
 import { useState as g, useEffect as q } from "react";
 import { deepForEach as y } from "react-children-utilities";
 import x, { isValidDate as H } from "../date/Date.js";
 import { Button as F } from "../button/Button.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/Menu.css';import '../../../assets/Popup.css';import '../../../assets/Fieldset.css';import '../../../assets/Label.css';import '../../../assets/RequiredMark.css';import '../../../assets/DatePicker.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Page.css';/* empty css                     */
+import '../../../assets/PageHeader.css';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/Menu.css';import '../../../assets/Popup.css';import '../../../assets/Fieldset.css';import '../../../assets/Label.css';import '../../../assets/RequiredMark.css';import '../../../assets/DatePicker.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Page.css';/* empty css                     */
 /* empty css                        */
 /* empty css                        */
 /* empty css                           */
@@ -33,7 +33,8 @@ import l from "../../ui/block/Block.js";
 /* empty css                       */
 /* empty css                         */
 /* empty css                        */
-const xe = ({
+/* empty css                           */
+const Fe = ({
   info: u,
   error: d,
   success: k,
@@ -44,11 +45,11 @@ const xe = ({
   wide: A,
   onSubmit: b,
   onCancel: L,
-  children: m
+  children: n
 }) => {
   const [N, i] = g(!1);
   return q(() => {
-    a && (i(!1), y(m, (o) => {
+    a && (i(!1), y(n, (o) => {
       if (!o) return;
       const r = o;
       if (typeof r.type != "function") return;
@@ -84,13 +85,13 @@ const xe = ({
             break;
         }
     }));
-  }, [m, a]), /* @__PURE__ */ h("div", { className: A ? "Form FormWide" : "Form", children: [
-    k && /* @__PURE__ */ n(l, { type: "Success", children: k }),
-    d && /* @__PURE__ */ n(l, { type: "Error", children: d }),
-    u && /* @__PURE__ */ n(l, { children: u }),
-    m,
+  }, [n, a]), /* @__PURE__ */ h("div", { className: A ? "Form FormWide" : "Form", children: [
+    k && /* @__PURE__ */ m(l, { type: "Success", children: k }),
+    d && /* @__PURE__ */ m(l, { type: "Error", children: d }),
+    u && /* @__PURE__ */ m(l, { children: u }),
+    n,
     (a || f) && /* @__PURE__ */ h("div", { className: "FormSubmitButtons", children: [
-      a && /* @__PURE__ */ n(
+      a && /* @__PURE__ */ m(
         F,
         {
           type: j,
@@ -105,7 +106,7 @@ const xe = ({
               }
               o[e] instanceof Array ? o[e].push(s) : o[e] = [o[e], s];
             };
-            y(m, (e) => {
+            y(n, (e) => {
               if (!e) return;
               const s = e;
               if (typeof s.type != "function") return;
@@ -142,7 +143,7 @@ const xe = ({
           }
         }
       ),
-      f && /* @__PURE__ */ n(
+      f && /* @__PURE__ */ m(
         F,
         {
           type: w,
@@ -154,6 +155,6 @@ const xe = ({
   ] });
 };
 export {
-  xe as Form,
-  xe as default
+  Fe as Form,
+  Fe as default
 };

package/dist/components/icons/Image.d.ts

@@ -0,0 +1,2 @@
+declare const Image: () => import("react/jsx-runtime").JSX.Element;
+export default Image;

package/dist/components/icons/Image.js

@@ -0,0 +1,23 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+const o = () => /* @__PURE__ */ r(
+  "svg",
+  {
+    stroke: "currentColor",
+    fill: "none",
+    strokeWidth: "2",
+    viewBox: "0 0 24 24",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    height: "1em",
+    width: "1em",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ e("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+      /* @__PURE__ */ e("circle", { cx: "9", cy: "9", r: "2" }),
+      /* @__PURE__ */ e("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+    ]
+  }
+);
+export {
+  o as default
+};

package/dist/components/icons/ShowSidebar.d.ts

@@ -0,0 +1,2 @@
+declare const ShowSidebar: () => import("react/jsx-runtime").JSX.Element;
+export default ShowSidebar;

package/dist/components/icons/ShowSidebar.js

@@ -0,0 +1,23 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+const r = () => /* @__PURE__ */ t(
+  "svg",
+  {
+    stroke: "currentColor",
+    fill: "none",
+    strokeWidth: "2",
+    viewBox: "0 0 24 24",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    height: "1em",
+    width: "1em",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ o("path", { d: "m9 6-6 6 6 6" }),
+      /* @__PURE__ */ o("path", { d: "M3 12h14" }),
+      /* @__PURE__ */ o("path", { d: "M21 19V5" })
+    ]
+  }
+);
+export {
+  r as default
+};

package/dist/components/icons/Trash.d.ts

@@ -0,0 +1,2 @@
+declare const Trash: () => import("react/jsx-runtime").JSX.Element;
+export default Trash;

package/dist/components/icons/Trash.js

@@ -0,0 +1,23 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+const r = () => /* @__PURE__ */ o(
+  "svg",
+  {
+    stroke: "currentColor",
+    fill: "none",
+    strokeWidth: "2",
+    viewBox: "0 0 24 24",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    height: "1em",
+    width: "1em",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ t("path", { d: "M3 6h18" }),
+      /* @__PURE__ */ t("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+      /* @__PURE__ */ t("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
+    ]
+  }
+);
+export {
+  r as default
+};

package/dist/components/icons/index.d.ts

@@ -7,9 +7,12 @@ import { default as Feather } from './Feather';
 import { default as Files } from './Files';
 import { default as Forum } from './Forum';
 import { default as Gamepad } from './Gamepad';
+import { default as Image } from './Image';
 import { default as Menu } from './Menu';
 import { default as Plus } from './Plus';
 import { default as Rocket } from './Rocket';
+import { default as ShowSidebar } from './ShowSidebar';
 import { default as TelefragLogo } from './TelefragLogo';
+import { default as Trash } from './Trash';
 import { default as Users } from './Users';
-export { Asterisk, Book, Calendar, ChevronLeft, ChevronRight, Feather, Files, Forum, Gamepad, Menu, Plus, Rocket, TelefragLogo, Users, };
+export { Asterisk, Book, Calendar, ChevronLeft, ChevronRight, Feather, Files, Forum, Gamepad, Image, Menu, Plus, Rocket, ShowSidebar, TelefragLogo, Trash, Users, };

package/dist/components/icons/index.js

@@ -1,30 +1,36 @@
-import { default as r } from "./Asterisk.js";
+import { default as a } from "./Asterisk.js";
 import { default as t } from "./Book.js";
 import { default as s } from "./Calendar.js";
-import { default as u } from "./ChevronLeft.js";
-import { default as m } from "./ChevronRight.js";
+import { default as d } from "./ChevronLeft.js";
+import { default as u } from "./ChevronRight.js";
 import { default as x } from "./Feather.js";
-import { default as n } from "./Files.js";
-import { default as i } from "./Forum.js";
+import { default as g } from "./Files.js";
+import { default as n } from "./Forum.js";
 import { default as C } from "./Gamepad.js";
-import { default as v } from "./Menu.js";
-import { default as R } from "./Plus.js";
-import { default as A } from "./Rocket.js";
+import { default as v } from "./Image.js";
+import { default as R } from "./Menu.js";
+import { default as T } from "./Plus.js";
+import { default as c } from "./Rocket.js";
+import { default as A } from "./ShowSidebar.js";
 import { default as G } from "./TelefragLogo.js";
-import { default as P } from "./Users.js";
+import { default as M } from "./Trash.js";
+import { default as U } from "./Users.js";
 export {
-  r as Asterisk,
+  a as Asterisk,
   t as Book,
   s as Calendar,
-  u as ChevronLeft,
-  m as ChevronRight,
+  d as ChevronLeft,
+  u as ChevronRight,
   x as Feather,
-  n as Files,
-  i as Forum,
+  g as Files,
+  n as Forum,
   C as Gamepad,
-  v as Menu,
-  R as Plus,
-  A as Rocket,
+  v as Image,
+  R as Menu,
+  T as Plus,
+  c as Rocket,
+  A as ShowSidebar,
   G as TelefragLogo,
-  P as Users
+  M as Trash,
+  U as Users
 };

package/dist/components/layout/Layout.js

@@ -3,7 +3,7 @@ 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/Select.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Time.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/Page.css';/* empty css                  */
+import '../../assets/PageHeader.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/Select.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Time.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/Page.css';/* empty css                  */
 import "react-children-utilities";
 import "react-transition-group";
 import "react-dom";
@@ -28,8 +28,9 @@ import "react-dom";
 /* empty css                     */
 import { Sidebar as c } from "../ui/sidebar/Sidebar.js";
 /* empty css                      */
+/* empty css                        */
 import b from "./MainMenu.js";
-const W = ({ children: p, mainMenu: m, userMenu: e, onLogoClick: s, onMenuClick: r }) => {
+const X = ({ children: p, mainMenu: m, userMenu: e, onLogoClick: s, onMenuClick: r }) => {
   const [a, t] = n(!1);
   return /* @__PURE__ */ f("div", { className: "Layout", children: [
     /* @__PURE__ */ o(
@@ -61,5 +62,5 @@ const W = ({ children: p, mainMenu: m, userMenu: e, onLogoClick: s, onMenuClick:
   ] });
 };
 export {
-  W as default
+  X as default
 };

package/dist/components/layout/Page.js

@@ -1,5 +1,5 @@
-import { jsxs as t, jsx as i } 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/Select.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Time.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/Page.css';/* empty css                  */
+import { jsxs as o, jsx as i, Fragment as a } from "react/jsx-runtime";
+import '../../assets/PageHeader.css';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/Select.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Time.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/Page.css';/* empty css                  */
 import "react";
 import "react-children-utilities";
 import "react-transition-group";
@@ -23,24 +23,25 @@ import "react-dom";
 /* empty css                     */
 /* empty css                   */
 /* empty css                     */
-import { Sidebar as a } from "../ui/sidebar/Sidebar.js";
+import { Sidebar as n } from "../ui/sidebar/Sidebar.js";
 /* empty css                      */
 /* empty css                    */
 /* empty css                    */
 /* empty css                      */
 /* empty css                     */
-const J = ({ header: m, children: p, sidebar: r, isSidebarVisible: e = !1, onSidebarClose: o }) => /* @__PURE__ */ t("div", { className: "Page", children: [
-  m && /* @__PURE__ */ i("div", { className: "PageHeader", children: m }),
-  /* @__PURE__ */ t("div", { className: "PageBody", children: [
+/* empty css                        */
+const L = ({ header: t, children: p, sidebar: r, isSidebarVisible: e = !1, onSidebarClose: m }) => /* @__PURE__ */ o("div", { className: "Page", children: [
+  t && /* @__PURE__ */ i(a, { children: t }),
+  /* @__PURE__ */ o("div", { className: "PageBody", children: [
     /* @__PURE__ */ i("div", { className: "PageContent", children: p }),
     r && /* @__PURE__ */ i("div", { className: "PageSidebar", children: /* @__PURE__ */ i("div", { className: "PageSidebarInner", children: r }) })
   ] }),
   r && /* @__PURE__ */ i(
-    a,
+    n,
     {
       isOpen: e,
       onClose: () => {
-        o && o();
+        m && m();
       },
       position: "Right",
       children: r
@@ -48,5 +49,5 @@ const J = ({ header: m, children: p, sidebar: r, isSidebarVisible: e = !1, onSid
   )
 ] });
 export {
-  J as default
+  L as default
 };

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

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from 'react';
+type Props = {
+    menu?: ReactNode;
+    title?: string;
+    subtitle?: string;
+    logo?: string;
+    back?: string;
+    square?: boolean;
+    onLogoClick?: () => void;
+    onBackClick?: () => void;
+    onLogoCreate?: () => void;
+    onBackCreate?: () => void;
+    onLogoRemove?: () => void;
+    onBackRemove?: () => void;
+    onShowSidebar?: () => void;
+};
+declare const PageHeader: FC<Props>;
+export default PageHeader;

package/dist/components/layout/PageHeader.js

@@ -0,0 +1,69 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import H from "../icons/Image.js";
+import k from "../icons/ShowSidebar.js";
+import "react";
+import N from "../icons/Trash.js";
+import '../../assets/PageHeader.css';/* empty css                        */
+const j = ({
+  menu: d,
+  title: p,
+  subtitle: u,
+  logo: l,
+  back: s,
+  square: c,
+  onLogoClick: o,
+  onLogoCreate: n,
+  onLogoRemove: m,
+  onBackClick: g,
+  onBackCreate: t,
+  onBackRemove: v,
+  onShowSidebar: P
+}) => {
+  const r = (e, h) => {
+    e.stopPropagation(), h && h();
+  };
+  return /* @__PURE__ */ i("div", { className: "PageHeader", children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        className: "PageHeaderBack",
+        onClick: (e) => r(e, g),
+        style: {
+          cursor: g ? "pointer" : void 0,
+          backgroundImage: s ? `url(${s})` : void 0
+        },
+        children: [
+          t && /* @__PURE__ */ a("div", { className: "PageHeaderBackCreate", onClick: (e) => r(e, t), children: /* @__PURE__ */ a(H, {}) }),
+          v && /* @__PURE__ */ a("div", { className: "PageHeaderBackRemove", onClick: (e) => r(e, v), children: /* @__PURE__ */ a(N, {}) }),
+          P && /* @__PURE__ */ a("div", { className: "PageHeaderShowSidebar", onClick: (e) => r(e, P), children: /* @__PURE__ */ a(k, {}) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ i("div", { className: "PageHeaderAbout", children: [
+      /* @__PURE__ */ i(
+        "div",
+        {
+          className: c ? "PageHeaderLogo Square" : "PageHeaderLogo",
+          onClick: (e) => r(e, o),
+          style: {
+            cursor: o ? "pointer" : void 0,
+            backgroundImage: l ? `url(${l})` : void 0,
+            borderRadius: c ? void 0 : "50%"
+          },
+          children: [
+            n && /* @__PURE__ */ a("div", { className: "PageHeaderLogoCreate", onClick: (e) => r(e, n), children: /* @__PURE__ */ a(H, {}) }),
+            m && /* @__PURE__ */ a("div", { className: "PageHeaderLogoRemove", onClick: (e) => r(e, m), children: /* @__PURE__ */ a(N, {}) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ i("div", { className: "PageHeaderInfo", children: [
+        /* @__PURE__ */ a("div", { className: "PageHeaderTitle one-line", children: p }),
+        /* @__PURE__ */ a("div", { className: "PageHeaderSubtitle one-line", children: u })
+      ] }),
+      d && /* @__PURE__ */ a("div", { className: "PageHeaderMenu", children: d })
+    ] })
+  ] });
+};
+export {
+  j as default
+};

package/dist/{index-NZ5qZPvT.js → index-BFCi4-Mt.js}

@@ -7,12 +7,15 @@ import i from "./components/icons/Feather.js";
 import f from "./components/icons/Files.js";
 import p from "./components/icons/Forum.js";
 import a from "./components/icons/Gamepad.js";
-import l from "./components/icons/Menu.js";
-import n from "./components/icons/Plus.js";
-import s from "./components/icons/Rocket.js";
-import u from "./components/icons/TelefragLogo.js";
-import d from "./components/icons/Users.js";
-const O = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+import l from "./components/icons/Image.js";
+import n from "./components/icons/Menu.js";
+import s from "./components/icons/Plus.js";
+import d from "./components/icons/Rocket.js";
+import g from "./components/icons/ShowSidebar.js";
+import h from "./components/icons/TelefragLogo.js";
+import u from "./components/icons/Trash.js";
+import b from "./components/icons/Users.js";
+const z = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Asterisk: o,
   Book: r,
@@ -23,12 +26,15 @@ const O = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   Files: f,
   Forum: p,
   Gamepad: a,
-  Menu: l,
-  Plus: n,
-  Rocket: s,
-  TelefragLogo: u,
-  Users: d
+  Image: l,
+  Menu: n,
+  Plus: s,
+  Rocket: d,
+  ShowSidebar: g,
+  TelefragLogo: h,
+  Trash: u,
+  Users: b
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  O as i
+  z as i
 };

package/dist/main.d.ts

@@ -30,6 +30,7 @@ import { default as Editable } from './components/ui/editable/Editable';
 import { default as Layout } from './components/layout/Layout';
 import { MainMenuItem } from './components/layout/MainMenu';
 import { default as Page } from './components/layout/Page';
+import { default as PageHeader } from './components/layout/PageHeader';
 import * as Icons from './components/icons';
-export { Form, Date, Time, Files, Input, Label, RadioList, Button, Select, Hidden, Checkbox, CheckboxList, Fieldset, FormRow, FormCol, DatePicker, Menu, Block, Panel, Modal, Overlay, Popup, Portal, Message, Alert, Confirm, Prompt, Sidebar, Editable, Layout, Page, Icons, };
+export { Form, Date, Time, Files, Input, Label, RadioList, Button, Select, Hidden, Checkbox, CheckboxList, Fieldset, FormRow, FormCol, DatePicker, Menu, Block, Panel, Modal, Overlay, Popup, Portal, Message, Alert, Confirm, Prompt, Sidebar, Editable, Layout, Page, PageHeader, Icons, };
 export type { FormData, MainMenuItem, MenuItem, ModalProps, ButtonType, CheckboxListOption, RadioListOption, RadioListValue, SelectOption, };

package/dist/main.js

@@ -3,19 +3,19 @@ import { Form as t } from "./components/form/form/Form.js";
 import { default as f } from "./components/form/form/FormRow.js";
 import { default as p } from "./components/form/form/FormCol.js";
 import { default as l } from "./components/form/date/Date.js";
-import { default as d } from "./components/form/date/DatePicker.js";
+import { default as s } from "./components/form/date/DatePicker.js";
 import { default as i } from "./components/form/time/Time.js";
-import { Files as c } from "./components/form/files/Files.js";
+import { Files as P } from "./components/form/files/Files.js";
 import { default as b } from "./components/form/input/Input.js";
 import { default as k } from "./components/form/label/Label.js";
 import { RadioList as L } from "./components/form/radio/RadioList.js";
-import { Button as g } from "./components/form/button/Button.js";
+import { Button as M } from "./components/form/button/Button.js";
 import { Select as y } from "./components/form/select/Select.js";
 import { default as D } from "./components/form/hidden/Hidden.js";
-import { default as R } from "./components/form/checkbox/Checkbox.js";
-import { CheckboxList as v } from "./components/form/checkbox/CheckboxList.js";
-import { default as A } from "./components/form/fieldset/Fieldset.js";
-import { Menu as H } from "./components/ui/menu/Menu.js";
+import { default as I } from "./components/form/checkbox/Checkbox.js";
+import { CheckboxList as S } from "./components/form/checkbox/CheckboxList.js";
+import { default as w } from "./components/form/fieldset/Fieldset.js";
+import { Menu as E } from "./components/ui/menu/Menu.js";
 import { default as T } from "./components/ui/block/Block.js";
 import { default as q } from "./components/ui/panel/Panel.js";
 import { Modal as G } from "./components/ui/modal/Modal.js";
@@ -25,41 +25,43 @@ import { default as V } from "./components/ui/portal/Portal.js";
 import { default as X } from "./components/ui/message/Message.js";
 import { default as Z } from "./components/ui/alert/Alert.js";
 import { default as $ } from "./components/ui/confirm/Confirm.js";
-import { default as ro } from "./components/ui/prompt/Prompt.js";
+import { default as eo } from "./components/ui/prompt/Prompt.js";
 import { Sidebar as to } from "./components/ui/sidebar/Sidebar.js";
 import { default as fo } from "./components/ui/editable/Editable.js";
 import { default as po } from "./components/layout/Layout.js";
 import { default as lo } from "./components/layout/Page.js";
-import { i as uo } from "./index-NZ5qZPvT.js";
+import { default as uo } from "./components/layout/PageHeader.js";
+import { i as no } from "./index-BFCi4-Mt.js";
 export {
   Z as Alert,
   T as Block,
-  g as Button,
-  R as Checkbox,
-  v as CheckboxList,
+  M as Button,
+  I as Checkbox,
+  S as CheckboxList,
   $ as Confirm,
   l as Date,
-  d as DatePicker,
+  s as DatePicker,
   fo as Editable,
-  A as Fieldset,
-  c as Files,
+  w as Fieldset,
+  P as Files,
   t as Form,
   p as FormCol,
   f as FormRow,
   D as Hidden,
-  uo as Icons,
+  no as Icons,
   b as Input,
   k as Label,
   po as Layout,
-  H as Menu,
+  E as Menu,
   X as Message,
   G as Modal,
   K as Overlay,
   lo as Page,
+  uo as PageHeader,
   q as Panel,
   Q as Popup,
   V as Portal,
-  ro as Prompt,
+  eo as Prompt,
   L as RadioList,
   y as Select,
   to as Sidebar,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alxgrn/telefrag-ui",
   "description": "UI library for The Daily Telefrag project",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "private": false,
   "author": "Alexander Fedorov <alex@molner.ru>",
   "license": "Apache-2.0",