@alxgrn/telefrag-ui 0.0.47 → 0.0.50

package/dist/assets/Menu.css

@@ -1 +1 @@
-:root{--alxgrn-menu-bg-hover: var(--alxgrn-bg-active);--alxgrn-menu-color-separator: var(--alxgrn-border);--alxgrn-menu-color-disabled: var(--alxgrn-border)}.Popup .Menu{position:relative;overflow:auto;margin:var(--alxgrn-unit-small);margin-right:var(--alxgrn-unit-smallest);width:100%}.Popup .Menu ul{margin:0;padding:0 var(--alxgrn-unit-smallest) 0 0;list-style-type:none}.Popup .Menu ul li{display:flex;cursor:pointer;align-items:center;color:var(--alxgrn-color-text);padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-small);white-space:nowrap;gap:var(--alxgrn-unit-half)}.Popup .Menu ul li .Icon{flex:0 0 auto;font-size:var(--alxgrn-font-size-large);display:flex}.Popup .Menu ul li .Text{flex:1 1 auto;font-size:var(--alxgrn-font-size-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Popup .Menu ul li:hover{background-color:var(--alxgrn-menu-bg-hover)}.Popup .Menu ul li:hover .Icon{color:var(--alxgrn-color-accent)}.Popup .Menu ul li.Separator{cursor:auto;padding:0;margin:var(--alxgrn-unit-half) var(--alxgrn-unit-small);border-top:1px solid var(--alxgrn-menu-color-separator);border-radius:0;height:0;overflow:hidden}.Popup .Menu ul li.Separator:hover{background-color:transparent}.Popup .Menu ul li.Disabled,.Popup .Menu ul li.Disabled:hover .Icon{color:var(--alxgrn-menu-color-disabled);cursor:default}.Popup .Menu ul li.Disabled:hover{background-color:transparent}
+:root{--alxgrn-menu-bg-hover: var(--alxgrn-bg-active);--alxgrn-menu-color-separator: var(--alxgrn-border);--alxgrn-menu-color-disabled: var(--alxgrn-border)}.Popup .Menu{position:relative;overflow:auto;margin:var(--alxgrn-unit-small);margin-right:var(--alxgrn-unit-smallest);width:100%}.Popup .Menu ul{margin:0;padding:0 var(--alxgrn-unit-smallest) 0 0;list-style-type:none}.Popup .Menu ul li{display:flex;cursor:pointer;align-items:center;color:var(--alxgrn-color-text);padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-small);white-space:nowrap;gap:var(--alxgrn-unit-half)}.Popup .Menu ul li .Icon{flex:0 0 auto;font-size:var(--alxgrn-font-size-large);display:flex}.Popup .Menu ul li .Text{flex:1 1 auto;font-size:var(--alxgrn-font-size-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Popup .Menu ul li:hover{background-color:var(--alxgrn-menu-bg-hover)}.Popup .Menu ul li:hover .Icon{color:var(--alxgrn-color-accent)}.Popup .Menu ul li.Separator{cursor:auto;padding:0;margin:var(--alxgrn-unit-half) var(--alxgrn-unit-small);border-top:1px solid var(--alxgrn-menu-color-separator);border-radius:0;height:0;overflow:hidden}.Popup .Menu ul li.Separator:hover{background-color:transparent}.Popup .Menu ul li.Disabled,.Popup .Menu ul li.Disabled:hover .Icon{color:var(--alxgrn-menu-color-disabled);cursor:default}.Popup .Menu ul li.Disabled:hover{background-color:transparent}.Popup .Menu .empty{flex:0 0 auto;display:block;width:var(--alxgrn-font-size-large);height:var(--alxgrn-font-size-large)}

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}.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)}.Form .ImageLabel input[type=file]{display:none}.Form .ImageLabel{flex:0 0 auto;display:flex;align-items:center;justify-content:center;text-align:center;width:100%;aspect-ratio:16 / 9;border-radius:var(--alxgrn-unit-small);border:1px dashed var(--alxgrn-border-accent);color:var(--alxgrn-color-accent);background-color:var(--alxgrn-bg-accent);background-position:center;background-repeat:no-repeat;background-size:cover;overflow:hidden;position:relative;cursor:pointer}.Form .ImageLabel.Disabled{color:var(--alxgrn-color-light);border-color:var(--alxgrn-border-light);background-color:var(--alxgrn-bg-light);cursor:default}.Form .ImageLabel.Error{color:var(--alxgrn-color-error);border-color:var(--alxgrn-border-error);background-color:var(--alxgrn-bg-error)}.Form .ImageLabel .ImageRemove{display:flex;position:absolute;top:var(--alxgrn-unit-half);right:var(--alxgrn-unit-half);padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-smallest);background-color:var(--alxgrn-bg-accent);z-index:100}.Form .ImageLabel.Disabled .ImageRemove{display:none}.Form .ImageLabel label{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.Form .ImageLabel.Disabled label{cursor:default}: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:0 0 auto;width:calc(67% - var(--alxgrn-unit))}.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 .PageContent{width:100%}.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)}}.FormItem .SelectWrap{position:relative}.FormItem .SelectWrap input{padding-right:var(--alxgrn-unit-double);cursor:pointer}.FormItem .SelectWrap .Icon{position:absolute;font-size:var(--alxgrn-font-size-large);top:var(--alxgrn-unit-half);right:var(--alxgrn-unit-half);cursor:pointer;pointer-events:none;display:flex}: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)}.FormItem .Time{display:flex;gap:var(--alxgrn-unit-half);align-items:center}.Form .ImageLabel input[type=file]{display:none}.Form .ImageLabel{flex:0 0 auto;display:flex;align-items:center;justify-content:center;text-align:center;width:100%;aspect-ratio:16 / 9;border-radius:var(--alxgrn-unit-small);border:1px dashed var(--alxgrn-border-accent);color:var(--alxgrn-color-accent);background-color:var(--alxgrn-bg-accent);background-position:center;background-repeat:no-repeat;background-size:cover;overflow:hidden;position:relative;cursor:pointer}.Form .ImageLabel.Disabled{color:var(--alxgrn-color-light);border-color:var(--alxgrn-border-light);background-color:var(--alxgrn-bg-light);cursor:default}.Form .ImageLabel.Error{color:var(--alxgrn-color-error);border-color:var(--alxgrn-border-error);background-color:var(--alxgrn-bg-error)}.Form .ImageLabel .ImageRemove{display:flex;position:absolute;top:var(--alxgrn-unit-half);right:var(--alxgrn-unit-half);padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-smallest);background-color:var(--alxgrn-bg-accent);z-index:100}.Form .ImageLabel.Disabled .ImageRemove{display:none}.Form .ImageLabel label{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.Form .ImageLabel.Disabled label{cursor:default}: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:0 0 auto;width:calc(67% - var(--alxgrn-unit))}.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 .PageContent{width:100%}.Page .PageBody .PageSidebar{display:none}}

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

@@ -2,19 +2,19 @@ import { jsxs as h, jsx as n } from "react/jsx-runtime";
 import { useState as q, useEffect as H } from "react";
 import { deepForEach as y } from "react-children-utilities";
 import x, { isValidDate as R } from "../date/Date.js";
-import { Button as F } from "../button/Button.js";
+import { Select as F } from "../select/Select.js";
+import { Button as C } from "../button/Button.js";
 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                           */
 import T from "../time/Time.js";
-import { Files as C } from "../files/Files.js";
-import { Image as E } from "../image/Image.js";
-import I from "../input/Input.js";
+import { Files as E } from "../files/Files.js";
+import { Image as I } from "../image/Image.js";
+import g from "../input/Input.js";
 /* empty css                             */
 /* empty css                      */
-import { RadioList as g } from "../radio/RadioList.js";
-import { Select as D } from "../select/Select.js";
+import { RadioList as D } from "../radio/RadioList.js";
 import V from "../hidden/Hidden.js";
 import B from "../checkbox/Checkbox.js";
 import { CheckboxList as S } from "../checkbox/CheckboxList.js";
@@ -35,8 +35,7 @@ import l from "../../ui/block/Block.js";
 /* empty css                         */
 /* empty css                        */
 /* empty css                           */
-import "../../../index.es-CZnvHQxj.js";
-const Ie = ({
+const Ee = ({
   info: d,
   error: k,
   success: b,
@@ -58,28 +57,28 @@ const Ie = ({
       const e = o.props;
       if (e.required)
         switch (o.type) {
-          case I:
+          case g:
             e.value.trim() || i(!0);
             break;
           case B:
             e.checked || i(!0);
             break;
-          case D:
+          case F:
             {
               const a = e.value;
               e.options.findIndex((p) => p.value === a) < 0 && i(!0);
             }
             break;
-          case g:
+          case D:
             {
               const a = e.value;
               e.options.findIndex((p) => p.value === a) < 0 && i(!0);
             }
             break;
-          case C:
+          case E:
             e.files.length < 1 && i(!0);
             break;
-          case E:
+          case I:
             e.value || i(!0);
             break;
           case x:
@@ -97,7 +96,7 @@ const Ie = ({
     c,
     (m || u) && /* @__PURE__ */ h("div", { className: "FormSubmitButtons", children: [
       m && /* @__PURE__ */ n(
-        F,
+        C,
         {
           type: j,
           label: m,
@@ -119,20 +118,20 @@ const Ie = ({
               switch (s.type) {
                 case x:
                 case T:
-                case I:
+                case g:
                   o(t.id, t.value.trim());
                   break;
                 case B:
                   o(t.id, t.checked ? t.value : void 0);
                   break;
+                case F:
                 case D:
-                case g:
                   o(t.id, t.value);
                   break;
-                case C:
+                case E:
                   o(t.id, t.files);
                   break;
-                case E:
+                case I:
                   o(t.id, t.value);
                   break;
                 case V:
@@ -152,7 +151,7 @@ const Ie = ({
         }
       ),
       u && /* @__PURE__ */ n(
-        F,
+        C,
         {
           type: w,
           label: u,
@@ -163,6 +162,6 @@ const Ie = ({
   ] });
 };
 export {
-  Ie as Form,
-  Ie as default
+  Ee as Form,
+  Ee as default
 };

package/dist/components/form/image/Image.js

@@ -1,7 +1,7 @@
 import { jsx as r, jsxs as F, Fragment as C } from "react/jsx-runtime";
 import { useState as n, useEffect as d } from "react";
 import E from "../label/Label.js";
-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/Block.css';import '../../../assets/Select.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/RequiredMark.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/Popup.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/Block.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/RequiredMark.css';import '../../../assets/Menu.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Button.css';import '../../../assets/DatePicker.css';import '../../../assets/Popup.css';import '../../../assets/Page.css';/* empty css                     */
 import "react-children-utilities";
 import "react-transition-group";
 import "react-dom";
@@ -14,13 +14,11 @@ import j from "../../icons/Trash.js";
 /* empty css                        */
 /* empty css                        */
 /* empty css                     */
-/* empty css                     */
 /* empty css                             */
 /* empty css                         */
 /* empty css                      */
 /* empty css                      */
 /* empty css                           */
-/* empty css                       */
 /* empty css                      */
 /* empty css                      */
 /* empty css                        */
@@ -33,8 +31,7 @@ import j from "../../icons/Trash.js";
 /* empty css                         */
 /* empty css                        */
 /* empty css                           */
-import "../../../index.es-CZnvHQxj.js";
-const gr = ({
+const lr = ({
   id: u,
   value: o,
   text: l,
@@ -44,21 +41,21 @@ const gr = ({
   bottom: b,
   label: R,
   placeholder: i,
-  required: m = !1,
-  disabled: e = !1
+  required: e = !1,
+  disabled: m = !1
 }) => {
-  const [c, g] = n(!1), [s, p] = n(void 0), [$, a] = n(!1);
+  const [c, g] = n(!1), [s, a] = n(void 0), [$, p] = n(!1);
   d(() => {
-    g(!!(m && !o));
-  }, [o, m]), d(() => {
-    if (p(void 0), a(!1), o) {
+    g(!!(e && !o));
+  }, [o, e]), d(() => {
+    if (a(void 0), p(!1), o) {
       const t = new FileReader();
-      a(!0), t.onload = function() {
-        p({ backgroundImage: `url(${this.result}` }), a(!1);
+      p(!0), t.onload = function() {
+        a({ backgroundImage: `url(${this.result}` }), p(!1);
       }, t.readAsDataURL(o);
       return;
     }
-    i && p({ backgroundImage: `url(${i}` });
+    i && a({ backgroundImage: `url(${i}` });
   }, [i, o]);
   const k = (t) => {
     const v = t.target, y = Array.from(v.files);
@@ -70,14 +67,14 @@ const gr = ({
       top: I,
       bottom: b,
       label: R,
-      required: m,
-      disabled: e,
+      required: e,
+      disabled: m,
       error: c,
       passive: !0,
       children: /* @__PURE__ */ r(
         "div",
         {
-          className: `ImageLabel ${e ? "Disabled" : ""} ${c ? "Error" : ""}`,
+          className: `ImageLabel ${m ? "Disabled" : ""} ${c ? "Error" : ""}`,
           style: s,
           children: $ ? /* @__PURE__ */ r(L, {}) : /* @__PURE__ */ F(C, { children: [
             l ? !s && l : !s && /* @__PURE__ */ r(N, {}),
@@ -91,7 +88,7 @@ const gr = ({
                 type: "file",
                 accept: h ?? "image/*",
                 onChange: (t) => k(t),
-                disabled: !!e
+                disabled: !!m
               }
             ) })
           ] })
@@ -101,6 +98,6 @@ const gr = ({
   ) });
 };
 export {
-  gr as Image,
-  gr as default
+  lr as Image,
+  lr as default
 };

package/dist/components/form/select/Select.js

@@ -1,62 +1,111 @@
-import { jsx as e, jsxs as x } from "react/jsx-runtime";
-import b from "../label/Label.js";
-import '../../../assets/Select.css';/* empty css                       */
-const S = ({
-  id: d,
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import { useRef as S, useState as a, useEffect as O } from "react";
+import V from "../label/Label.js";
+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/Block.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/RequiredMark.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Button.css';import '../../../assets/DatePicker.css';import '../../../assets/Popup.css';import '../../../assets/Page.css';/* empty css                     */
+import "react-children-utilities";
+import "react-transition-group";
+import "react-dom";
+/* empty css                      */
+import j from "../../icons/Check.js";
+import w from "../../icons/ChevronDown.js";
+/* empty css                           */
+/* empty css                       */
+/* empty css                        */
+/* empty css                        */
+import { Menu as E } from "../../ui/menu/Menu.js";
+/* empty css                             */
+/* empty css                         */
+/* empty css                      */
+/* empty css                      */
+/* empty css                           */
+/* empty css                      */
+/* empty css                      */
+/* empty css                        */
+/* empty css                      */
+/* empty css                        */
+/* empty css                        */
+/* empty css                         */
+/* empty css                       */
+/* empty css                       */
+/* empty css                         */
+/* empty css                        */
+/* empty css                           */
+const ar = ({
+  id: f,
   value: o,
-  onChange: c,
-  label: f,
-  placeholder: a,
-  top: u,
-  required: i = !1,
-  disabled: t = !1,
-  bottom: p,
-  options: s
+  onChange: d,
+  label: x,
+  placeholder: v,
+  top: h,
+  required: s = !1,
+  disabled: i = !1,
+  bottom: g,
+  options: n
 }) => {
-  const l = () => !!(i && s.findIndex((n) => n.value === o) < 0), g = () => {
-    if (l()) return {
+  const m = S(null), [C, I] = a([]), [y, p] = a(!1), [b, k] = a("");
+  O(() => {
+    let t = "";
+    const l = n.map((e) => (e.value === o && (t = e.option), {
+      id: e.value,
+      text: e.option,
+      icon: e.value === o ? /* @__PURE__ */ r(j, {}) : /* @__PURE__ */ r("div", { className: "empty" })
+    }));
+    I(l), k(t);
+  }, [o, n]);
+  const c = () => !!(s && n.findIndex((l) => l.value === o) < 0), N = () => {
+    if (c()) return {
       borderColor: "var(--alxgrn-input-border-error)",
       backgroundColor: "var(--alxgrn-input-bg-error)"
     };
-  }, m = () => {
-    let r = "SelectWrap";
-    return t && (r += " Disabled"), l() && (r += " Error"), r;
   };
-  return /* @__PURE__ */ e("div", { className: "FormItem", children: /* @__PURE__ */ e(
-    b,
-    {
-      top: u,
-      bottom: p,
-      label: f,
-      required: i,
-      disabled: t,
-      error: l(),
-      children: /* @__PURE__ */ e("div", { className: m(), children: /* @__PURE__ */ x(
-        "select",
-        {
-          id: d,
-          value: o,
-          onChange: (r) => c(r.target.value),
-          style: g(),
-          disabled: !!t,
-          children: [
-            a && /* @__PURE__ */ e("option", { children: a }),
-            s.map((r, n) => /* @__PURE__ */ e(
-              "option",
-              {
-                value: r.value,
-                disabled: r.disabled,
-                children: r.option
-              },
-              n
-            ))
-          ]
+  return /* @__PURE__ */ u("div", { className: "FormItem", children: [
+    /* @__PURE__ */ r(
+      V,
+      {
+        top: h,
+        bottom: g,
+        label: x,
+        required: s,
+        disabled: i,
+        error: c(),
+        children: /* @__PURE__ */ u("div", { className: "SelectWrap", children: [
+          /* @__PURE__ */ r(
+            "input",
+            {
+              id: f,
+              ref: m,
+              type: "text",
+              value: b,
+              style: N(),
+              disabled: !!i,
+              onClick: () => p(!0),
+              readOnly: !0,
+              placeholder: v ?? void 0
+            }
+          ),
+          /* @__PURE__ */ r("div", { className: "Icon", children: /* @__PURE__ */ r(w, {}) })
+        ] })
+      }
+    ),
+    !i && m.current && /* @__PURE__ */ r(
+      E,
+      {
+        parent: m.current,
+        isOpen: y,
+        onClose: () => p(!1),
+        horizontal: "inner-left",
+        margin: "var(--alxgrn-unit-small)",
+        items: C,
+        maxHeight: "auto",
+        width: "parent",
+        onClick: (t) => {
+          p(!1), d(`${t.id}`);
         }
-      ) })
-    }
-  ) });
+      }
+    )
+  ] });
 };
 export {
-  S as Select,
-  S as default
+  ar as Select,
+  ar as default
 };

package/dist/components/form/time/Time.js

@@ -1,107 +1,133 @@
-import { jsxs as H, jsx as i } from "react/jsx-runtime";
-import { useRef as O, useState as n, useEffect as k } from "react";
-import L from "../label/Label.js";
-import { Menu as y } from "../../ui/menu/Menu.js";
-import '../../../assets/Time.css';/* empty css                     */
-const J = ({
-  id: p,
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
+import { useRef as k, useState as s, useEffect as H } from "react";
+import R from "../label/Label.js";
+import { Menu as N } from "../../ui/menu/Menu.js";
+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/Block.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/RequiredMark.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Button.css';import '../../../assets/DatePicker.css';import '../../../assets/Popup.css';import '../../../assets/Page.css';/* empty css                     */
+import "react-children-utilities";
+import "react-transition-group";
+import "react-dom";
+/* empty css                      */
+import O from "../../icons/Check.js";
+/* empty css                           */
+/* empty css                       */
+/* empty css                        */
+/* empty css                        */
+/* empty css                             */
+/* empty css                         */
+/* empty css                      */
+/* empty css                      */
+/* empty css                           */
+/* empty css                      */
+/* empty css                      */
+/* empty css                        */
+/* empty css                      */
+/* empty css                        */
+/* empty css                        */
+/* empty css                         */
+/* empty css                       */
+/* empty css                       */
+/* empty css                         */
+/* empty css                        */
+/* empty css                           */
+const xr = ({
+  id: u,
   value: d,
   step: x = 1,
-  onChange: t,
+  onChange: i,
   label: M,
   top: b,
   bottom: g,
   required: $ = !1,
-  disabled: o = !1
+  disabled: m = !1
 }) => {
-  const l = O(null), a = O(null), [c, N] = n(""), [f, C] = n(""), [I, j] = n([]), [w, z] = n([]), [E, u] = n(!1), [S, m] = n(!1);
-  k(() => {
-    let [r, e] = d.split(":");
-    r = parseInt(r), e = parseInt(e), (isNaN(r) || r < 0 || r > 23) && (r = 0), (isNaN(e) || e < 0 || e > 59) && (e = 0), r = `0${r}`.slice(-2), e = `0${e}`.slice(-2), N(r), C(e), t && t(`${r}:${e}`);
-  }, [d, t]), k(() => {
-    const r = [], e = [];
-    for (let s = 0; s < 24; s++)
-      r.push(`0${s}`.slice(-2));
-    for (let s = 0; s < 60; s += x)
-      e.push(`0${s}`.slice(-2));
-    j(r), z(e);
+  const p = k(null), a = k(null), [n, C] = s(""), [l, I] = s(""), [j, w] = s([]), [z, E] = s([]), [S, c] = s(!1), [T, f] = s(!1);
+  H(() => {
+    let [r, t] = d.split(":");
+    r = parseInt(r), t = parseInt(t), (isNaN(r) || r < 0 || r > 23) && (r = 0), (isNaN(t) || t < 0 || t > 59) && (t = 0), r = `0${r}`.slice(-2), t = `0${t}`.slice(-2), C(r), I(t), i && i(`${r}:${t}`);
+  }, [d, i]), H(() => {
+    const r = [], t = [];
+    for (let o = 0; o < 24; o++)
+      r.push(`0${o}`.slice(-2));
+    for (let o = 0; o < 60; o += x)
+      t.push(`0${o}`.slice(-2));
+    w(r), E(t);
   }, [x]);
-  const h = () => !!($ && (!c || !f)), v = () => {
-    if (h()) return {
+  const v = () => !!($ && (!n || !l)), h = () => {
+    if (v()) return {
       caretColor: "var(--alxgrn-input-border-error)",
       borderColor: "var(--alxgrn-input-border-error)",
       backgroundColor: "var(--alxgrn-input-bg-error)"
     };
-  }, T = (r) => {
-    u(!1), t && t(`${r.text ?? ""}:${f}`);
   }, F = (r) => {
-    m(!1), t && t(`${c}:${r.text ?? ""}`);
+    c(!1), i && i(`${r.text ?? ""}:${l}`);
+  }, L = (r) => {
+    f(!1), i && i(`${n}:${r.text ?? ""}`);
   };
-  return /* @__PURE__ */ H("div", { className: "FormItem", children: [
-    /* @__PURE__ */ i(
-      L,
+  return /* @__PURE__ */ y("div", { className: "FormItem", children: [
+    /* @__PURE__ */ e(
+      R,
       {
         top: b,
         bottom: g,
         label: M,
         required: $,
-        disabled: o,
-        error: h(),
-        children: /* @__PURE__ */ H("div", { className: "Time", children: [
-          /* @__PURE__ */ i(
+        disabled: m,
+        error: v(),
+        children: /* @__PURE__ */ y("div", { className: "Time", children: [
+          /* @__PURE__ */ e(
             "input",
             {
-              id: `${p}-hor`,
-              ref: l,
+              id: `${u}-hor`,
+              ref: p,
               type: "text",
-              value: c,
-              style: v(),
-              disabled: !!o,
-              onClick: () => u(!0),
+              value: n,
+              style: h(),
+              disabled: !!m,
+              onClick: () => c(!0),
               readOnly: !0
             }
           ),
-          /* @__PURE__ */ i("div", { children: ":" }),
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ e("div", { children: ":" }),
+          /* @__PURE__ */ e(
             "input",
             {
-              id: `${p}-min`,
+              id: `${u}-min`,
               ref: a,
               type: "text",
-              value: f,
-              style: v(),
-              disabled: !!o,
-              onClick: () => m(!0),
+              value: l,
+              style: h(),
+              disabled: !!m,
+              onClick: () => f(!0),
               readOnly: !0
             }
           )
         ] })
       }
     ),
-    l.current && /* @__PURE__ */ i(
-      y,
+    p.current && /* @__PURE__ */ e(
+      N,
       {
-        parent: l.current,
-        isOpen: E,
-        onClose: () => u(!1),
+        parent: p.current,
+        isOpen: S,
+        onClose: () => c(!1),
         horizontal: "inner-left",
         margin: "var(--alxgrn-unit-small)",
-        items: I.map((r) => ({ id: r, text: r })),
-        onClick: T,
+        items: j.map((r) => ({ id: r, text: r, icon: r === n ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ e("div", { className: "empty" }) })),
+        onClick: F,
         maxHeight: "auto",
         width: "parent"
       }
     ),
-    a.current && /* @__PURE__ */ i(
-      y,
+    a.current && /* @__PURE__ */ e(
+      N,
       {
         parent: a.current,
-        isOpen: S,
-        onClose: () => m(!1),
+        isOpen: T,
+        onClose: () => f(!1),
         horizontal: "inner-left",
         margin: "var(--alxgrn-unit-small)",
-        items: w.map((r) => ({ id: r, text: r })),
-        onClick: F,
+        items: z.map((r) => ({ id: r, text: r, icon: r === l ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ e("div", { className: "empty" }) })),
+        onClick: L,
         maxHeight: "auto",
         width: "parent"
       }
@@ -109,5 +135,5 @@ const J = ({
   ] });
 };
 export {
-  J as default
+  xr as default
 };

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

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