revdev-components 0.106.0 → 0.107.0

package/build/icon/regular/names.d.ts

@@ -1,2 +1,2 @@
-export declare const RegularIconNameList: ("search" | "add" | "add-box" | "add-circle" | "add-circle-outline" | "arrow-back" | "arrow-back-ios" | "arrow-drop-down" | "arrow-drop-up" | "arrow-forward" | "arrow-forward-ios" | "arrow-left" | "arrow-right" | "autorenew" | "backspace" | "book" | "bookmark" | "bookmark-outline" | "brightness" | "brightness-outline" | "calendar" | "cards" | "check-circle" | "check-circle-outline" | "circle-notifications" | "cloud-download" | "collections-bookmark" | "contact-support" | "cross" | "cube-letter" | "cube-outline" | "date-range" | "delete" | "delete-forever" | "delete-outline" | "edit" | "enter" | "equalizer" | "expand-less" | "expand-more" | "external-link" | "favorite" | "favorite-outline" | "file-download" | "file-upload" | "flag" | "flag-outline" | "flip" | "folder" | "globe" | "group" | "group-add" | "help" | "help-live" | "help-outline" | "highlight-remove" | "key" | "keyboard" | "keyboard-arrow-down" | "keyboard-arrow-left" | "keyboard-arrow-right" | "keyboard-arrow-up" | "keyboard-voice" | "known" | "known-outline" | "language" | "letter-match" | "library-books" | "lightbulb" | "lightbulb-outline" | "list" | "lock" | "lock-open-outline" | "lock-outline" | "logout" | "loop" | "mail" | "mail-outline" | "match-up" | "menu" | "menu-book" | "more-horizontal" | "more-vertical" | "multiple-choice" | "person" | "person-add" | "person-outline" | "pie-chart" | "pie-chart-outline" | "pin" | "pin-outline" | "play-arrow" | "play-circle-filled" | "play-circle-outline" | "playlist-add" | "playlist-add-check" | "power-off" | "price-tag" | "rate-down" | "rate-down-outline" | "rate-up" | "rate-up-outline" | "refresh" | "remove" | "remove-circle" | "remove-circle-outline" | "replay-circle-filled" | "sentiment-dissatisfied" | "sentiment-satisfied" | "settings" | "share" | "snowflake" | "sort" | "space" | "spelling" | "star-half" | "star-outline" | "star" | "sun" | "sync" | "table" | "thumb-down" | "thumb-down-outline" | "thumb-up" | "thumb-up-outline" | "time" | "tran" | "visibility" | "volume-off" | "volume-up" | "word" | "image" | "magic-wand" | "microphone-off" | "microphone" | "moon" | "music" | "learn" | "audio" | "tag" | "unknown" | "unknown-outline" | "discover")[];
+export declare const RegularIconNameList: ("add" | "add-box" | "add-circle" | "add-circle-outline" | "arrow-back" | "arrow-back-ios" | "arrow-drop-down" | "arrow-drop-up" | "arrow-forward" | "arrow-forward-ios" | "arrow-left" | "arrow-right" | "autorenew" | "backspace" | "book" | "bookmark" | "bookmark-outline" | "brightness" | "brightness-outline" | "calendar" | "cards" | "check-circle" | "check-circle-outline" | "circle-notifications" | "cloud-download" | "collections-bookmark" | "contact-support" | "cross" | "cube-letter" | "cube-outline" | "date-range" | "delete" | "delete-forever" | "delete-outline" | "edit" | "enter" | "equalizer" | "expand-less" | "expand-more" | "external-link" | "favorite" | "favorite-outline" | "file-download" | "file-upload" | "flag" | "flag-outline" | "flip" | "folder" | "globe" | "group" | "group-add" | "help" | "help-live" | "help-outline" | "highlight-remove" | "key" | "keyboard" | "keyboard-arrow-down" | "keyboard-arrow-left" | "keyboard-arrow-right" | "keyboard-arrow-up" | "keyboard-voice" | "known" | "known-outline" | "language" | "letter-match" | "library-books" | "lightbulb" | "lightbulb-outline" | "list" | "lock" | "lock-open-outline" | "lock-outline" | "logout" | "loop" | "mail" | "mail-outline" | "match-up" | "menu" | "menu-book" | "more-horizontal" | "more-vertical" | "multiple-choice" | "person" | "person-add" | "person-outline" | "pie-chart" | "pie-chart-outline" | "pin" | "pin-outline" | "play-arrow" | "play-circle-filled" | "play-circle-outline" | "playlist-add" | "playlist-add-check" | "power-off" | "price-tag" | "rate-down" | "rate-down-outline" | "rate-up" | "rate-up-outline" | "refresh" | "remove" | "remove-circle" | "remove-circle-outline" | "replay-circle-filled" | "search" | "sentiment-dissatisfied" | "sentiment-satisfied" | "settings" | "share" | "snowflake" | "sort" | "space" | "spelling" | "star-half" | "star-outline" | "star" | "sun" | "sync" | "table" | "thumb-down" | "thumb-down-outline" | "thumb-up" | "thumb-up-outline" | "time" | "tran" | "visibility" | "volume-off" | "volume-up" | "word" | "image" | "magic-wand" | "microphone-off" | "microphone" | "moon" | "music" | "learn" | "audio" | "tag" | "unknown" | "unknown-outline" | "discover")[];
 export type RegularIconName = (typeof RegularIconNameList)[number];

package/build/iconOver/content/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { IconOverActionProps } from "src/interfaces";
+interface ItemProps extends IconOverActionProps {
+    onActionClick: () => void;
+}
+export declare const IconDropItem: React.FC<ItemProps>;
+interface ContentProps {
+    actions: IconOverActionProps[];
+    onActionClick: () => void;
+    fontSize?: number;
+}
+export declare const IconDropContent: React.FC<ContentProps>;
+export {};

package/build/iconOver/index.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { RegularIconName } from "src/icon";
+import { IconOverActionProps } from "src/interfaces";
+interface BaseProps {
+    actions: IconOverActionProps[];
+    className?: string;
+    fontSize?: number;
+    offsetRatioY?: number;
+}
+interface IconProps extends BaseProps {
+    icon: RegularIconName;
+}
+interface ContentProps extends BaseProps {
+    children?: React.ReactNode;
+}
+export type IconOverProps = IconProps | ContentProps;
+export declare const IconOver: React.FC<IconOverProps>;
+export {};

package/build/index.d.ts

@@ -28,3 +28,7 @@ export * from "./attributor";
 export * from "./optionsAutocomplete";
 export * from "./button";
 export * from "./splitLine";
+export * from "./iconOver";
+export * from "./knowingOver";
+export * from "./wordInline";
+export * from "./wordPanel";

package/build/index.js

@@ -5,6 +5,9 @@ var classNames = require('classnames');
 var antd = require('antd');
 var router = require('next/router');
 var Link = require('next/link');
+var revdev = require('revdev');
+var Randex = require('randex');
+var numeral = require('numeral');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -25,46 +28,46 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-var s$z = {"root":"index-module_root__oU85z"};
+var s$E = {"root":"index-module_root__oU85z"};
 
 var ContentHeader1 = function (_a) {
     var children = _a.children, className = _a.className;
-    return React.createElement("h1", { className: classNames(s$z.root, className) }, children);
+    return React.createElement("h1", { className: classNames(s$E.root, className) }, children);
 };
 
-var s$y = {"root":"index-module_root__51YHj"};
+var s$D = {"root":"index-module_root__51YHj"};
 
 var ContentHeader2 = function (_a) {
     var children = _a.children, className = _a.className;
-    return React.createElement("h2", { className: classNames(s$y.root, className) }, children);
+    return React.createElement("h2", { className: classNames(s$D.root, className) }, children);
 };
 
-var s$x = {"root":"index-module_root__Fq-q1"};
+var s$C = {"root":"index-module_root__Fq-q1"};
 
 var Paragraph = function (_a) {
     var children = _a.children, className = _a.className;
-    return React.createElement("p", { className: classNames(s$x.root, className) }, children);
+    return React.createElement("p", { className: classNames(s$C.root, className) }, children);
 };
 
-var s$w = {"root":"index-module_root__VIFF-"};
+var s$B = {"root":"index-module_root__VIFF-"};
 
 var PageTitle = function (_a) {
     var children = _a.children, className = _a.className;
-    return React.createElement("h1", { className: classNames(s$w.root, className) }, children);
+    return React.createElement("h1", { className: classNames(s$B.root, className) }, children);
 };
 
-var s$v = {"root":"index-module_root__p0I0n"};
+var s$A = {"root":"index-module_root__p0I0n"};
 
 var CentralDivision = function (_a) {
     var children = _a.children, className = _a.className;
-    return React.createElement("div", { className: classNames(s$v.root, className) }, children);
+    return React.createElement("div", { className: classNames(s$A.root, className) }, children);
 };
 
-var s$u = {"root":"index-module_root__yiKO0"};
+var s$z = {"root":"index-module_root__yiKO0"};
 
 var RowDivision = function (_a) {
     var children = _a.children, className = _a.className;
-    return React.createElement("div", { className: classNames(s$u.root, className) }, children);
+    return React.createElement("div", { className: classNames(s$z.root, className) }, children);
 };
 
 var _path$2q;
@@ -1618,13 +1621,13 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var s$t = {"root":"index-module_root__-LDR1"};
+var s$y = {"root":"index-module_root__-LDR1"};
 
 // https://www.svgrepo.com/
 function useBasicIcon(_a, icons) {
     var className = _a.className, name = _a.name, props = __rest(_a, ["className", "name"]);
     var svgAttrs = React.useMemo(function () {
-        return __assign({ className: classNames(s$t.root, className), fill: "currentColor" }, props);
+        return __assign({ className: classNames(s$y.root, className), fill: "currentColor" }, props);
     }, [className, props]);
     var Icon = icons[name];
     return Icon ? React.createElement(Icon, __assign({}, svgAttrs)) : undefined;
@@ -4721,7 +4724,7 @@ var SocialIcon = function (props) {
     return useBasicIcon(props, icons);
 };
 
-var s$s = {"root":"index-module_root__gtTIa","action":"index-module_action__pOSde"};
+var s$x = {"root":"index-module_root__gtTIa","action":"index-module_action__pOSde"};
 
 var CONSOLE_COLOR = "background:rgb(28, 46, 82); color:rgb(231, 231, 231)";
 
@@ -4838,10 +4841,10 @@ function AppForm(_a) {
         setValues(changedValues, values);
         onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(changedValues, values);
     }, [setValues, onValuesChange]);
-    return (React.createElement(antd.Form, { form: form, onFinish: onFinish, className: classNames(s$s.root, className), layout: "vertical", onValuesChange: handleValuesChange, onFieldsChange: onFieldsChange, initialValues: initialValues }, typeof children === "function" ? children({ valid: valid }) : children));
+    return (React.createElement(antd.Form, { form: form, onFinish: onFinish, className: classNames(s$x.root, className), layout: "vertical", onValuesChange: handleValuesChange, onFieldsChange: onFieldsChange, initialValues: initialValues }, typeof children === "function" ? children({ valid: valid }) : children));
 }
 
-var s$r = {"root":"index-module_root__2S1Jp"};
+var s$w = {"root":"index-module_root__2S1Jp"};
 
 function useLineProps(_a) {
     var lineClassName = _a.lineClassName, name = _a.name, label = _a.label, rules = _a.rules, valuePropName = _a.valuePropName, noStyle = _a.noStyle, hasFeedback = _a.hasFeedback, dependencies = _a.dependencies, rest = __rest(_a, ["lineClassName", "name", "label", "rules", "valuePropName", "noStyle", "hasFeedback", "dependencies"]);
@@ -4855,7 +4858,7 @@ var FormLine = function (_a) {
         }
         return [];
     }, [validateRules]);
-    return React.createElement(antd.Form.Item, __assign({ className: classNames(s$r.root, className), rules: rules }, props));
+    return React.createElement(antd.Form.Item, __assign({ className: classNames(s$w.root, className), rules: rules }, props));
 };
 
 var DatePickerField = function (props) {
@@ -4876,12 +4879,12 @@ var InputField = function (props) {
         React.createElement(antd.Input, __assign({}, controlProps))));
 };
 
-var s$q = {"input":"index-module_input__71iJw"};
+var s$v = {"input":"index-module_input__71iJw"};
 
 var InputNumberField = function (props) {
     var _a = useLineProps(props), lineProps = _a[0], _b = _a[1], className = _b.className, controlProps = __rest(_b, ["className"]);
     return (React.createElement(FormLine, __assign({}, lineProps),
-        React.createElement(antd.InputNumber, __assign({ className: classNames(s$q.input, className) }, controlProps))));
+        React.createElement(antd.InputNumber, __assign({ className: classNames(s$v.input, className) }, controlProps))));
 };
 
 var RadioButtonField = function (props) {
@@ -4890,13 +4893,13 @@ var RadioButtonField = function (props) {
         React.createElement(antd.Radio.Group, __assign({ buttonStyle: buttonStyle, optionType: optionType }, controlProps))));
 };
 
-var s$p = {"popup":"index-module_popup__Im5Y-"};
+var s$u = {"popup":"index-module_popup__Im5Y-"};
 
 var RangePicker = antd.DatePicker.RangePicker;
 var RangePickerField = function (props) {
     var _a = useLineProps(props), lineProps = _a[0], _b = _a[1], oneMonth = _b.oneMonth, controlProps = __rest(_b, ["oneMonth"]);
     return (React.createElement(FormLine, __assign({}, lineProps),
-        React.createElement(RangePicker, __assign({}, controlProps, { popupClassName: oneMonth ? s$p.popup : undefined }))));
+        React.createElement(RangePicker, __assign({}, controlProps, { popupClassName: oneMonth ? s$u.popup : undefined }))));
 };
 
 var SelectField = function (props) {
@@ -4918,13 +4921,13 @@ var CheckboxField = function (props) {
         React.createElement(antd.Checkbox, __assign({}, controlProps))));
 };
 
-var s$o = {"root":"index-module_root__GGl-p"};
+var s$t = {"root":"index-module_root__GGl-p"};
 
 var SwitchFieldControl = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (React.createElement("div", { className: s$o.root },
+    return (React.createElement("div", { className: s$t.root },
         React.createElement(antd.Switch, __assign({}, props)),
-        children && React.createElement("div", { className: s$o.content }, children)));
+        children && React.createElement("div", { className: s$t.content }, children)));
 };
 
 var SwitchField = function (props) {
@@ -4933,22 +4936,22 @@ var SwitchField = function (props) {
         React.createElement(SwitchFieldControl, __assign({}, controlProps))));
 };
 
-var s$n = {"root":"index-module_root__9GQDU"};
+var s$s = {"root":"index-module_root__9GQDU"};
 
 var FormButton = function (_a) {
     var className = _a.className, _b = _a.children, children = _b === void 0 ? "Save" : _b, loading = _a.loading;
-    return (React.createElement("div", { className: classNames(s$n.root, className) },
+    return (React.createElement("div", { className: classNames(s$s.root, className) },
         React.createElement(antd.Button, { htmlType: "submit", type: "primary", loading: loading }, children)));
 };
 
-var s$m = {"root":"index-module_root__C05Ty"};
+var s$r = {"root":"index-module_root__C05Ty"};
 
 var FormError = function (_a) {
     var children = _a.children, className = _a.className;
-    return children ? React.createElement("div", { className: classNames(s$m.root, className) }, children) : null;
+    return children ? React.createElement("div", { className: classNames(s$r.root, className) }, children) : null;
 };
 
-var s$l = {"root":"index-module_root__C7wx2","content":"index-module_content__RsiJT","close":"index-module_close__lBc6p"};
+var s$q = {"root":"index-module_root__C7wx2","content":"index-module_content__RsiJT","close":"index-module_close__lBc6p"};
 
 var InfoDialog = function (_a) {
     var children = _a.children, className = _a.className, width = _a.width, hideClose = _a.hideClose, onClose = _a.onClose, _b = _a.open, open = _b === void 0 ? true : _b, contentClassName = _a.contentClassName, _c = _a.maskClosable, maskClosable = _c === void 0 ? false : _c;
@@ -4960,23 +4963,23 @@ var InfoDialog = function (_a) {
         }
         return result;
     }, [width]);
-    return (React.createElement(antd.Modal, { open: open, onCancel: onClose, style: style, className: classNames(s$l.root, className), maskClosable: maskClosable, footer: null },
-        React.createElement("div", { className: classNames(s$l.content, contentClassName) },
+    return (React.createElement(antd.Modal, { open: open, onCancel: onClose, style: style, className: classNames(s$q.root, className), maskClosable: maskClosable, footer: null },
+        React.createElement("div", { className: classNames(s$q.content, contentClassName) },
             children,
-            hideClose ? null : React.createElement(RegularIcon, { name: "cross", className: s$l.close, onClick: onClose }))));
+            hideClose ? null : React.createElement(RegularIcon, { name: "cross", className: s$q.close, onClick: onClose }))));
 };
 
-var s$k = {"root":"index-module_root__BQI-i","header":"index-module_header__OUCQj","title":"index-module_title__HPbDC","close":"index-module_close__-FN6K","content":"index-module_content__BpXha","footer":"index-module_footer__xqKte"};
+var s$p = {"root":"index-module_root__BQI-i","header":"index-module_header__OUCQj","title":"index-module_title__HPbDC","close":"index-module_close__-FN6K","content":"index-module_content__BpXha","footer":"index-module_footer__xqKte"};
 
 var RegularDialog = function (_a) {
     var titleIcon = _a.titleIcon, titlePrefix = _a.titlePrefix, title = _a.title, children = _a.children, _b = _a.hideFooter, hideFooter = _b === void 0 ? false : _b, className = _a.className, width = _a.width, okText = _a.okText, cancelText = _a.cancelText, footerClassName = _a.footerClassName, contentClassName = _a.contentClassName, okHide = _a.okHide, okDisabled = _a.okDisabled, onOk = _a.onOk, onClose = _a.onClose, _c = _a.open, open = _c === void 0 ? true : _c;
     var close = React.useMemo(function () {
-        return React.createElement(RegularIcon, { name: "cross", className: s$k.close, onClick: onClose });
+        return React.createElement(RegularIcon, { name: "cross", className: s$p.close, onClick: onClose });
     }, [onClose]);
     var titleContent = React.useMemo(function () {
         if (typeof title === "string") {
-            return (React.createElement("div", { className: s$k.header },
-                React.createElement("div", { className: s$k.title },
+            return (React.createElement("div", { className: s$p.header },
+                React.createElement("div", { className: s$p.title },
                     titleIcon && React.createElement(RegularIcon, { name: titleIcon }),
                     React.createElement("span", null,
                         " ",
@@ -4987,7 +4990,7 @@ var RegularDialog = function (_a) {
             return title(close);
         }
         return null;
-    }, [s$k, title, titlePrefix, close, titleIcon]);
+    }, [s$p, title, titlePrefix, close, titleIcon]);
     var style = React.useMemo(function () {
         var result = {};
         if (width) {
@@ -4996,15 +4999,15 @@ var RegularDialog = function (_a) {
         }
         return result;
     }, [width]);
-    return (React.createElement(antd.Modal, { open: open, onCancel: onClose, style: style, className: classNames(s$k.root, className), maskClosable: false, footer: null },
+    return (React.createElement(antd.Modal, { open: open, onCancel: onClose, style: style, className: classNames(s$p.root, className), maskClosable: false, footer: null },
         titleContent,
-        React.createElement("div", { className: classNames(s$k.content, contentClassName) }, children),
-        hideFooter ? null : (React.createElement("div", { className: classNames(s$k.footer, footerClassName) },
+        React.createElement("div", { className: classNames(s$p.content, contentClassName) }, children),
+        hideFooter ? null : (React.createElement("div", { className: classNames(s$p.footer, footerClassName) },
             React.createElement(antd.Button, { onClick: onClose }, cancelText || "Cancel"),
             okHide ? null : (React.createElement(antd.Button, { type: "primary", onClick: onOk, disabled: okDisabled }, okText || "OK"))))));
 };
 
-var s$j = {"root":"index-module_root__qFuRH"};
+var s$o = {"root":"index-module_root__qFuRH"};
 
 function isRegular(icon) {
     return RegularIconNameList.includes(icon);
@@ -5014,13 +5017,13 @@ function isSocial(icon) {
 }
 var FlatButton = function (_a) {
     var children = _a.children, className = _a.className, icon = _a.icon, onClick = _a.onClick;
-    return (React.createElement("div", { className: classNames(s$j.root, className), onClick: onClick },
+    return (React.createElement("div", { className: classNames(s$o.root, className), onClick: onClick },
         isRegular(icon) ? React.createElement(RegularIcon, { name: icon }) : null,
         isSocial(icon) ? React.createElement(SocialIcon, { name: icon }) : null,
         children ? React.createElement("span", null, children) : null));
 };
 
-var s$i = {"root":"index-module_root__r-dVh"};
+var s$n = {"root":"index-module_root__r-dVh"};
 
 function AppLink(_a) {
     var _b;
@@ -5031,29 +5034,29 @@ function AppLink(_a) {
             href = route.build(params || {});
         }
     }
-    return (React.createElement(Link, __assign({ href: href, as: as, shallow: shallow, title: title, className: classNames(s$i.root, className, (_b = {},
-            _b[s$i.none__decoration] = noneDecoration,
-            _b[s$i.show__underline] = showUnderline,
+    return (React.createElement(Link, __assign({ href: href, as: as, shallow: shallow, title: title, className: classNames(s$n.root, className, (_b = {},
+            _b[s$n.none__decoration] = noneDecoration,
+            _b[s$n.show__underline] = showUnderline,
             _b)), ref: aRef }, rest), children));
 }
 
-var s$h = {"root":"index-module_root__gpEkZ"};
+var s$m = {"root":"index-module_root__gpEkZ"};
 
 var AppLinkButton = function (_a) {
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
-    return (React.createElement("div", __assign({ className: classNames(s$h.root, className) }, rest), children));
+    return (React.createElement("div", __assign({ className: classNames(s$m.root, className) }, rest), children));
 };
 
-var s$g = {"root":"index-module_root__CQ7Qm","title":"index-module_title__Aud2u","title__active":"index-module_title__active__AueKr","title__label":"index-module_title__label__B3vUU","list":"index-module_list__EAf08","list__open":"index-module_list__open__1-0cD"};
+var s$l = {"root":"index-module_root__CQ7Qm","title":"index-module_title__Aud2u","title__active":"index-module_title__active__AueKr","title__label":"index-module_title__label__B3vUU","list":"index-module_list__EAf08","list__open":"index-module_list__open__1-0cD"};
 
-var s$f = {"root":"index-module_root__AZ9HE","root__active":"index-module_root__active__UqszT"};
+var s$k = {"root":"index-module_root__AZ9HE","root__active":"index-module_root__active__UqszT"};
 
 var BackSidebarSubMenuItem = function (_a) {
     var _b;
     var _c = _a.activePath, activePath = _c === void 0 ? "" : _c, option = _a.option;
     var icon = option.icon, label = option.label, path = option.path;
     var isActive = path.isActive(activePath);
-    return (React.createElement(AppLink, { className: classNames(s$f.root, (_b = {}, _b[s$f.root__active] = isActive, _b)), href: path.build() },
+    return (React.createElement(AppLink, { className: classNames(s$k.root, (_b = {}, _b[s$k.root__active] = isActive, _b)), href: path.build() },
         icon && React.createElement(RegularIcon, { name: icon }),
         React.createElement("span", null, label)));
 };
@@ -5081,17 +5084,17 @@ var BackSidebarMenuItem = function (_a) {
     var handleClick = React.useCallback(function () {
         setOpen(!open);
     }, [open]);
-    return (React.createElement("div", { className: s$g.root },
-        React.createElement("div", { className: classNames(s$g.title, (_b = {}, _b[s$g.title__active] = isActive, _b)), onClick: handleClick },
+    return (React.createElement("div", { className: s$l.root },
+        React.createElement("div", { className: classNames(s$l.title, (_b = {}, _b[s$l.title__active] = isActive, _b)), onClick: handleClick },
             icon && React.createElement(RegularIcon, { name: icon }),
-            React.createElement("span", { className: s$g.title__label }, label),
+            React.createElement("span", { className: s$l.title__label }, label),
             React.createElement(RegularIcon, { name: open ? "keyboard-arrow-down" : "keyboard-arrow-right" })),
-        React.createElement("div", { className: classNames(s$g.list, (_c = {}, _c[s$g.list__open] = open, _c)) }, options.map(function (x, i) {
+        React.createElement("div", { className: classNames(s$l.list, (_c = {}, _c[s$l.list__open] = open, _c)) }, options.map(function (x, i) {
             return React.createElement(BackSidebarSubMenuItem, { key: i, option: x, activePath: activePath });
         }))));
 };
 
-var s$e = {"root":"index-module_root__yMCtx","list":"index-module_list__Xr6Z5","master":"index-module_master__Eexhz","master__active":"index-module_master__active__j-iWA"};
+var s$j = {"root":"index-module_root__yMCtx","list":"index-module_list__Xr6Z5","master":"index-module_master__Eexhz","master__active":"index-module_master__active__j-iWA"};
 
 var BackSidebarShortMenuItem = function (_a) {
     var _b;
@@ -5107,34 +5110,34 @@ var BackSidebarShortMenuItem = function (_a) {
     var handleClick = React.useCallback(function () {
         setOpen(!open);
     }, [open]);
-    return (React.createElement("div", { className: s$e.root },
-        React.createElement("div", { className: classNames(s$e.master, (_b = {}, _b[s$e.master__active] = isActive, _b)), onClick: handleClick }, icon && React.createElement(RegularIcon, { name: icon })),
-        React.createElement("div", { className: classNames(s$e.list) }, options.map(function (x, i) {
+    return (React.createElement("div", { className: s$j.root },
+        React.createElement("div", { className: classNames(s$j.master, (_b = {}, _b[s$j.master__active] = isActive, _b)), onClick: handleClick }, icon && React.createElement(RegularIcon, { name: icon })),
+        React.createElement("div", { className: classNames(s$j.list) }, options.map(function (x, i) {
             return React.createElement(BackSidebarSubMenuItem, { key: i, option: x });
         }))));
 };
 
-var s$d = {"root":"index-module_root__r4Egx"};
+var s$i = {"root":"index-module_root__r4Egx"};
 
 // https://www.einfosoft.com/templates/admin/spice/source/edit_booking.html#
 var BackSidebar = function (_a) {
     var className = _a.className, options = _a.options, top = _a.top, shortMode = _a.shortMode, activePath = _a.activePath, defaultPath = _a.defaultPath;
     var path = (activePath || "").replace("/", "") ? activePath : defaultPath;
-    return (React.createElement("div", { className: classNames(s$d.root, className) },
-        top ? React.createElement("div", { className: classNames(s$d.top) }, top) : null,
-        React.createElement("div", { className: s$d.menu }, options.map(function (option, i) {
+    return (React.createElement("div", { className: classNames(s$i.root, className) },
+        top ? React.createElement("div", { className: classNames(s$i.top) }, top) : null,
+        React.createElement("div", { className: s$i.menu }, options.map(function (option, i) {
             return shortMode ? (React.createElement(BackSidebarShortMenuItem, { key: i, option: option, activePath: path })) : (React.createElement(BackSidebarMenuItem, { key: i, option: option, activePath: path }));
         }))));
 };
 
-var s$c = {"root":"index-module_root__SICCv","root__short":"index-module_root__short__XnXWP","header":"index-module_header__00DV1","sidebar":"index-module_sidebar__o2Obb","content":"index-module_content__D0okO","menu":"index-module_menu__48Uz3","menu__icon":"index-module_menu__icon__BFpAs","loading":"index-module_loading__SpWat"};
+var s$h = {"root":"index-module_root__SICCv","root__short":"index-module_root__short__XnXWP","header":"index-module_header__00DV1","sidebar":"index-module_sidebar__o2Obb","content":"index-module_content__D0okO","menu":"index-module_menu__48Uz3","menu__icon":"index-module_menu__icon__BFpAs","loading":"index-module_loading__SpWat"};
 
-var s$b = {"root":"index-module_root__Q-TED","loader":"index-module_loader__qxQNC"};
+var s$g = {"root":"index-module_root__Q-TED","loader":"index-module_loader__qxQNC"};
 
 var LoadingPanel = function (_a) {
     var className = _a.className;
-    return (React.createElement("div", { className: classNames(s$b.root, className) },
-        React.createElement(antd.Spin, { size: "large", className: s$b.loader })));
+    return (React.createElement("div", { className: classNames(s$g.root, className) },
+        React.createElement(antd.Spin, { size: "large", className: s$g.loader })));
 };
 
 var BackLayout = function (_a) {
@@ -5144,21 +5147,21 @@ var BackLayout = function (_a) {
     var handleMenu = React.useCallback(function () {
         setShort(!short);
     }, [short]);
-    return loading ? (React.createElement(LoadingPanel, { className: s$c.loading })) : (React.createElement("div", { className: classNames(s$c.root, className, (_b = {}, _b[s$c.root__short] = short, _b)) },
-        React.createElement("div", { className: classNames(s$c.header, headerClassName) }, header),
-        React.createElement("div", { className: classNames(s$c.sidebar, sidebarClassName) },
-            React.createElement("div", { className: s$c.menu },
-                React.createElement(RegularIcon, { className: s$c.menu__icon, name: "menu", onClick: handleMenu }),
-                !short && React.createElement("div", { className: s$c.menu__title }, sidebarTitle)),
+    return loading ? (React.createElement(LoadingPanel, { className: s$h.loading })) : (React.createElement("div", { className: classNames(s$h.root, className, (_b = {}, _b[s$h.root__short] = short, _b)) },
+        React.createElement("div", { className: classNames(s$h.header, headerClassName) }, header),
+        React.createElement("div", { className: classNames(s$h.sidebar, sidebarClassName) },
+            React.createElement("div", { className: s$h.menu },
+                React.createElement(RegularIcon, { className: s$h.menu__icon, name: "menu", onClick: handleMenu }),
+                !short && React.createElement("div", { className: s$h.menu__title }, sidebarTitle)),
             React.createElement(BackSidebar, __assign({}, sidebarProps, { shortMode: short }))),
-        contentLoading ? React.createElement(LoadingPanel, { className: s$c.content }) : React.createElement("div", { className: classNames(s$c.content, contentClassName) }, children)));
+        contentLoading ? React.createElement(LoadingPanel, { className: s$h.content }) : React.createElement("div", { className: classNames(s$h.content, contentClassName) }, children)));
 };
 
-var s$a = {"root":"index-module_root__Q7VjD","root__shadow":"index-module_root__shadow__OhPad","logo":"index-module_logo__KCA1E","content":"index-module_content__T-JEW","link":"index-module_link__nXsvL","select":"index-module_select__22zW6"};
+var s$f = {"root":"index-module_root__Q7VjD","root__shadow":"index-module_root__shadow__OhPad","logo":"index-module_logo__KCA1E","content":"index-module_content__T-JEW","link":"index-module_link__nXsvL","select":"index-module_select__22zW6"};
 
-var s$9 = {"popover":"index-module_popover__lwzdT","item":"index-module_item__pfayG"};
+var s$e = {"popover":"index-module_popover__lwzdT","item":"index-module_item__pfayG"};
 
-var s$8 = {"root":"index-module_root__UzFV2","column":"index-module_column__XEWzG","children":"index-module_children__y7-7m","flex":"index-module_flex__83M30","button":"index-module_button__U8D6K"};
+var s$d = {"root":"index-module_root__UzFV2","column":"index-module_column__XEWzG","children":"index-module_children__y7-7m","flex":"index-module_flex__83M30","button":"index-module_button__U8D6K"};
 
 var AppTooltip = function (_a) {
     var _b = _a.placement, placement = _b === void 0 ? "top" : _b, children = _a.children, props = __rest(_a, ["placement", "children"]);
@@ -5169,14 +5172,14 @@ var AppTooltip = function (_a) {
 var IconBoxContent = function (_a) {
     var _b;
     var flexRoot = _a.flexRoot, icon = _a.icon, rightIcon = _a.rightIcon, children = _a.children, className = _a.className, contentClassName = _a.contentClassName, onClick = _a.onClick, _c = _a.direction, direction = _c === void 0 ? "row" : _c, elementRev = _a.elementRev, style = _a.style;
-    return (React.createElement("div", { ref: elementRev, style: style, className: classNames(s$8.root, (_b = {},
-            _b[s$8.flex] = flexRoot,
-            _b[s$8.button] = !!onClick,
-            _b[s$8.column] = direction === "column",
+    return (React.createElement("div", { ref: elementRev, style: style, className: classNames(s$d.root, (_b = {},
+            _b[s$d.flex] = flexRoot,
+            _b[s$d.button] = !!onClick,
+            _b[s$d.column] = direction === "column",
             _b), className), onClick: onClick },
-        icon ? React.createElement(RegularIcon, { className: s$8.icon, name: icon }) : null,
-        children ? React.createElement("div", { className: classNames(contentClassName, s$8.root__children) }, children) : null,
-        rightIcon ? React.createElement(RegularIcon, { className: s$8.icon, name: rightIcon }) : null));
+        icon ? React.createElement(RegularIcon, { className: s$d.icon, name: icon }) : null,
+        children ? React.createElement("div", { className: classNames(contentClassName, s$d.root__children) }, children) : null,
+        rightIcon ? React.createElement(RegularIcon, { className: s$d.icon, name: rightIcon }) : null));
 };
 var IconDivision = function (props) {
     var tooltip = props.tooltip, tooltipPlacement = props.tooltipPlacement, tooltipMouseEnterDelay = props.tooltipMouseEnterDelay;
@@ -5200,19 +5203,26 @@ var PopoverSelect = function (_a) {
     var selectedOption = React.useMemo(function () {
         return options.find(function (x) { return x.value === value; });
     }, [options, value]);
-    var popoverContent = React.useMemo(function () { return (React.createElement("div", { className: s$9.popover }, options
+    var popoverContent = React.useMemo(function () { return (React.createElement("div", { className: s$e.popover }, options
         .filter(function (x) { return x.value !== value; })
-        .map(function (x) { return (React.createElement(React.Fragment, { key: x.value }, renderOption ? (renderOption(x, { className: s$9.item, onClick: function () { return handleChange(x.value); } })) : (React.createElement("div", { className: s$9.item, onClick: function () { return handleChange(x.value); } }, x.label)))); }))); }, [options, value, handleChange, renderOption]);
+        .map(function (x) { return (React.createElement(React.Fragment, { key: x.value }, renderOption ? (renderOption(x, { className: s$e.item, onClick: function () { return handleChange(x.value); } })) : (React.createElement("div", { className: s$e.item, onClick: function () { return handleChange(x.value); } }, x.label)))); }))); }, [options, value, handleChange, renderOption]);
     return (React.createElement(antd.Popover, { content: popoverContent, open: open, onOpenChange: closePopover, placement: "bottomRight" },
         React.createElement(IconDivision, { icon: icon, onClick: handleOpen, rightIcon: open ? "expand-less" : "expand-more" }, showValue ? value : selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label)));
 };
 
-var s$7 = {"root":"index-module_root__EQ0II","root__rounded":"index-module_root__rounded__nqE4q","root__link":"index-module_root__link__jIljS"};
+var s$c = {"root":"index-module_root__EQ0II","rounded":"index-module_rounded__4OK03","link":"index-module_link__fptGw"};
 
 var Content = function (_a) {
     var _b;
-    var icon = _a.icon, rightIcon = _a.rightIcon, isPrimary = _a.isPrimary, className = _a.className, children = _a.children, href = _a.href, props = __rest(_a, ["icon", "rightIcon", "isPrimary", "className", "children", "href"]);
-    return (React.createElement(antd.Button, __assign({ className: classNames(s$7.root, className, (_b = {}, _b[s$7.root__rounded] = !children, _b[s$7.root__link] = href, _b)), type: isPrimary ? "primary" : "default", href: href }, props),
+    var icon = _a.icon, rightIcon = _a.rightIcon, isPrimary = _a.isPrimary, className = _a.className, children = _a.children, href = _a.href, size = _a.size, props = __rest(_a, ["icon", "rightIcon", "isPrimary", "className", "children", "href", "size"]);
+    var style = React.useMemo(function () {
+        var result = {};
+        if (size === "small") {
+            result["--rcButtonSize"] = "20px";
+        }
+        return result;
+    }, [size]);
+    return (React.createElement(antd.Button, __assign({ style: style, className: classNames(s$c.root, className, (_b = {}, _b[s$c.rounded] = !children, _b[s$c.link] = href, _b)), type: isPrimary ? "primary" : "default", href: href, size: size }, props),
         React.createElement(IconDivision, { icon: icon, rightIcon: rightIcon }, children)));
 };
 var Button = function (_a) {
@@ -5257,52 +5267,52 @@ var FrontHeader = function (_a) {
         var className = _b.className;
         return value === "logout" ? (React.createElement("div", { className: className, onClick: user === null || user === void 0 ? void 0 : user.onLogOut }, label)) : (React.createElement(AppLink, { href: value, className: className }, label));
     }, [user]);
-    return (React.createElement("div", { className: classNames(s$a.root, (_b = {},
-            _b[s$a.root__shadow] = shadow,
+    return (React.createElement("div", { className: classNames(s$f.root, (_b = {},
+            _b[s$f.root__shadow] = shadow,
             _b), className) },
         onMenuClick && React.createElement(Button, { icon: "menu", onClick: onMenuClick }),
-        React.createElement(AppLink, { className: s$a.logo, href: logoHref }, "AlfaSchool"),
-        React.createElement("div", { className: s$a.content }, children),
-        !user && (React.createElement("div", { className: s$a.link },
+        React.createElement(AppLink, { className: s$f.logo, href: logoHref }, "AlfaSchool"),
+        React.createElement("div", { className: s$f.content }, children),
+        !user && (React.createElement("div", { className: s$f.link },
             React.createElement(AppLink, { href: loginHref }, text.login || "Login"),
             React.createElement(AppLink, { href: registerHref }, text.register || "Register"))),
-        React.createElement("div", { className: s$a.select },
+        React.createElement("div", { className: s$f.select },
             user && React.createElement(PopoverSelect, { showValue: true, value: user.username, options: settingsOptions, renderOption: handleSettingRender }),
             React.createElement(PopoverSelect, __assign({ icon: "language" }, language)))));
 };
 
-var s$6 = {"root":"index-module_root__pGOaD","inner":"index-module_inner__yBaNK","email":"index-module_email__c66u4"};
+var s$b = {"root":"index-module_root__pGOaD","inner":"index-module_inner__yBaNK","email":"index-module_email__c66u4"};
 
 var FrontFooter = function (_a) {
     var children = _a.children, className = _a.className, privacyHref = _a.privacyHref, termsHref = _a.termsHref, infoMail = _a.infoMail, text = _a.text;
-    return (React.createElement("footer", { className: classNames(s$6.root, className) },
+    return (React.createElement("footer", { className: classNames(s$b.root, className) },
         children ? React.createElement("div", null, children) : null,
-        React.createElement("div", { className: s$6.inner },
-            React.createElement(AppLink, { className: s$6.email, href: "mailto:".concat(infoMail) }, infoMail),
+        React.createElement("div", { className: s$b.inner },
+            React.createElement(AppLink, { className: s$b.email, href: "mailto:".concat(infoMail) }, infoMail),
             React.createElement("div", null,
                 React.createElement(AppLink, { href: privacyHref }, text.privacy),
                 React.createElement(AppLink, { href: termsHref }, text.terms),
-                React.createElement("div", { className: s$6.text }, text.copyright)))));
+                React.createElement("div", { className: s$b.text }, text.copyright)))));
 };
 
-var s$5 = {"root":"index-module_root__Fwjge","header":"index-module_header__DhAx3","header__inner":"index-module_header__inner__gYRYO","content":"index-module_content__Afu6q","content__footer":"index-module_content__footer__-ACCs","footer":"index-module_footer__3hSOQ"};
+var s$a = {"root":"index-module_root__Fwjge","header":"index-module_header__DhAx3","header__inner":"index-module_header__inner__gYRYO","content":"index-module_content__Afu6q","content__footer":"index-module_content__footer__-ACCs","footer":"index-module_footer__3hSOQ"};
 
 var FrontLayout = function (_a) {
     var children = _a.children, header = _a.header, footer = _a.footer;
-    return (React.createElement("div", { className: s$5.root },
-        React.createElement("div", { className: s$5.header },
-            React.createElement(FrontHeader, __assign({}, header, { className: classNames(header.className, s$5.header__inner) }))),
-        React.createElement("div", { className: classNames(s$5.content) },
+    return (React.createElement("div", { className: s$a.root },
+        React.createElement("div", { className: s$a.header },
+            React.createElement(FrontHeader, __assign({}, header, { className: classNames(header.className, s$a.header__inner) }))),
+        React.createElement("div", { className: classNames(s$a.content) },
             React.createElement("div", null, children)),
-        React.createElement("div", { className: s$5.footer },
+        React.createElement("div", { className: s$a.footer },
             React.createElement(FrontFooter, __assign({}, footer)))));
 };
 
-var s$4 = {"root":"index-module_root__OWeNb","link":"index-module_link__H8HcA","button":"index-module_button__UVt6a"};
+var s$9 = {"root":"index-module_root__OWeNb","link":"index-module_link__H8HcA","button":"index-module_button__UVt6a"};
 
 var HeaderActionPanel = function (_a) {
     var className = _a.className, actions = _a.actions;
-    return (actions === null || actions === void 0 ? void 0 : actions.length) ? (React.createElement("div", { className: classNames(s$4.root, className) }, actions.map(function (action, i) {
+    return (actions === null || actions === void 0 ? void 0 : actions.length) ? (React.createElement("div", { className: classNames(s$9.root, className) }, actions.map(function (action, i) {
         var content = action;
         var button = action;
         var link = action;
@@ -5311,17 +5321,17 @@ var HeaderActionPanel = function (_a) {
         }
         else if (!!(button === null || button === void 0 ? void 0 : button.onClick)) {
             var icon = button.icon, label = button.label, tooltip = button.tooltip;
-            return (React.createElement(IconDivision, { key: i, icon: icon, onClick: button === null || button === void 0 ? void 0 : button.onClick, tooltip: tooltip, className: s$4.button }, label));
+            return (React.createElement(IconDivision, { key: i, icon: icon, onClick: button === null || button === void 0 ? void 0 : button.onClick, tooltip: tooltip, className: s$9.button }, label));
         }
         else if (!!(link === null || link === void 0 ? void 0 : link.href)) {
             var icon = button.icon, label = button.label, tooltip = button.tooltip;
-            return (React.createElement(AppLink, { key: i, href: link.href, className: s$4.link },
+            return (React.createElement(AppLink, { key: i, href: link.href, className: s$9.link },
                 React.createElement(IconDivision, { icon: icon, tooltip: tooltip }, label)));
         }
     }))) : null;
 };
 
-var s$3 = {"root":"index-module_root__t3gxi"};
+var s$8 = {"root":"index-module_root__t3gxi"};
 
 function getNavOption(mapper, part) {
     var _a = Array.isArray(part) ? part : [part, undefined], key = _a[0], param = _a[1];
@@ -5382,25 +5392,25 @@ var AlfaNavigator = function (_a) {
         result = isMobile ? result.slice(options.length - 1) : result;
         return result;
     }, [root, options, isMobile, mapper, path]);
-    return innerOptions.length ? (React.createElement("div", { className: classNames(s$3.root, className) }, innerOptions.map(function (_a, index) {
+    return innerOptions.length ? (React.createElement("div", { className: classNames(s$8.root, className) }, innerOptions.map(function (_a, index) {
         var href = _a.href, label = _a.label;
         return (React.createElement(React.Fragment, { key: index },
             index > 0 ? React.createElement("span", null, "\u203A") : null,
-            React.createElement(AppLink, { className: classNames(s$3.step, stepClassName), href: href }, label)));
+            React.createElement(AppLink, { className: classNames(s$8.step, stepClassName), href: href }, label)));
     }))) : null;
 };
 
-var s$2 = {"root":"index-module_root__UuWET","link":"index-module_link__qD-Ss"};
+var s$7 = {"root":"index-module_root__UuWET","link":"index-module_link__qD-Ss"};
 
 var AlfaAttributor = function (_a) {
     var className = _a.className, options = _a.options;
-    return options.length ? (React.createElement("div", { className: classNames(s$2.root, className) }, options.map(function (_a, i) {
+    return options.length ? (React.createElement("div", { className: classNames(s$7.root, className) }, options.map(function (_a, i) {
         var icon = _a.icon, label = _a.label, href = _a.href;
-        return (React.createElement(IconDivision, { key: i, icon: icon }, href ? (React.createElement(AppLink, { className: s$2.link, href: href }, label)) : (label)));
+        return (React.createElement(IconDivision, { key: i, icon: icon }, href ? (React.createElement(AppLink, { className: s$7.link, href: href }, label)) : (label)));
     }))) : null;
 };
 
-var s$1 = {"options":"index-module_options__7cPUT","autocomplete":"index-module_autocomplete__NRZUE"};
+var s$6 = {"options":"index-module_options__7cPUT","autocomplete":"index-module_autocomplete__NRZUE"};
 
 function OptionsAutocomplete(_a) {
     var onChange = _a.onChange, placeholder = _a.placeholder, requestAction = _a.requestAction, requestResponse = _a.requestResponse, optionMapper = _a.optionMapper;
@@ -5445,16 +5455,174 @@ function OptionsAutocomplete(_a) {
         return result;
     }, [options]);
     return (React.createElement("div", null,
-        React.createElement(antd.AutoComplete, { options: optionsModified, onSelect: onSelect, onSearch: setText, value: text, className: s$1.autocomplete },
+        React.createElement(antd.AutoComplete, { options: optionsModified, onSelect: onSelect, onSearch: setText, value: text, className: s$6.autocomplete },
             React.createElement(antd.Input.Search, { placeholder: placeholder, enterButton: true, loading: requestResponse.isLoading, allowClear: true })),
-        React.createElement("div", { className: s$1.options }, values.map(function (w) { return (React.createElement(antd.Tag, { key: w.value, closable: true, onClose: function () { return setValues(function (data) { return data.filter(function (x) { return x.value !== w.value; }); }); }, color: "blue" }, w.label)); }))));
+        React.createElement("div", { className: s$6.options }, values.map(function (w) { return (React.createElement(antd.Tag, { key: w.value, closable: true, onClose: function () { return setValues(function (data) { return data.filter(function (x) { return x.value !== w.value; }); }); }, color: "blue" }, w.label)); }))));
 }
 
-var s = {"root":"index-module_root__Ch0J0"};
+var s$5 = {"root":"index-module_root__Ch0J0"};
 
 var SplitLine = function (_a) {
     var className = _a.className;
-    return React.createElement("div", { className: classNames(s.root, className) });
+    return React.createElement("div", { className: classNames(s$5.root, className) });
+};
+
+var s$4 = {"root":"index-module_root__byEJC","popover":"index-module_popover__QIyer"};
+
+var s$3 = {"root":"index-module_root__gWlnS","item":"index-module_item__fZyoE","action":"index-module_action__8bZn6"};
+
+var IconDropItem = function (_a) {
+    var onClick = _a.onClick, onActionClick = _a.onActionClick, props = __rest(_a, ["onClick", "onActionClick"]);
+    var handleClick = React.useCallback(function () {
+        onClick();
+        onActionClick();
+    }, [onClick, onActionClick]);
+    return (React.createElement("div", { className: s$3.item },
+        React.createElement(IconDivision, __assign({}, props, { onClick: handleClick, className: s$3.action, tooltipPlacement: "left", tooltipMouseEnterDelay: 0.8 }))));
+};
+var IconDropContent = function (_a) {
+    var actions = _a.actions, onActionClick = _a.onActionClick, fontSize = _a.fontSize;
+    var style = React.useMemo(function () {
+        return { fontSize: fontSize };
+    }, [fontSize]);
+    return (React.createElement("div", { className: s$3.root, style: style }, actions.map(function (action, i) {
+        return React.createElement(IconDropItem, __assign({ key: i }, action, { onActionClick: onActionClick }));
+    })));
+};
+
+var IconOver = function (props) {
+    var actions = props.actions, className = props.className, _a = props.fontSize, fontSize = _a === void 0 ? 16 : _a, _b = props.offsetRatioY, offsetRatioY = _b === void 0 ? 0 : _b;
+    var icon = props === null || props === void 0 ? void 0 : props.icon;
+    var children = props === null || props === void 0 ? void 0 : props.children;
+    var _c = React.useState(false), open = _c[0], setOpen = _c[1];
+    var handleOpen = React.useCallback(function (newOpen) {
+        setOpen(newOpen);
+    }, []);
+    var handleActionClick = React.useCallback(function () {
+        setOpen(false);
+    }, []);
+    var align = React.useMemo(function () {
+        var offsetY = fontSize + fontSize * 0.3;
+        offsetY = offsetY + offsetY * offsetRatioY;
+        return {
+            offset: [0, -offsetY],
+        };
+    }, [fontSize, offsetRatioY]);
+    var style = React.useMemo(function () {
+        return { fontSize: fontSize };
+    }, [fontSize]);
+    return (React.createElement("div", { className: classNames(s$4.root, className), style: style },
+        React.createElement(antd.Popover, { content: React.createElement(IconDropContent, { actions: actions, onActionClick: handleActionClick, fontSize: fontSize }), open: open, 
+            // open={false}
+            overlayClassName: s$4.popover, placement: "bottom", onOpenChange: handleOpen, align: align },
+            icon ? React.createElement(RegularIcon, { name: icon }) : undefined,
+            children)));
+};
+
+var KnowingOver = function (_a) {
+    var className = _a.className, fontSize = _a.fontSize, value = _a.value, onChange = _a.onChange, offsetRatioY = _a.offsetRatioY, _b = _a.text, text = _b === void 0 ? { iKnowIt: "I Know It", save: "Save For Learning" } : _b;
+    var icon = React.useMemo(function () {
+        switch (value) {
+            case revdev.Knowing.Known:
+                return "known";
+            case revdev.Knowing.Saved:
+                return "bookmark";
+            default:
+                return "bookmark-outline";
+        }
+    }, [value]);
+    var actions = React.useMemo(function () {
+        return [
+            {
+                icon: value === revdev.Knowing.Known ? "known" : "known-outline",
+                onClick: function () { return onChange(value === revdev.Knowing.Known ? undefined : revdev.Knowing.Known); },
+                tooltip: value !== revdev.Knowing.Known ? text === null || text === void 0 ? void 0 : text.iKnowIt : undefined,
+            },
+            {
+                icon: value === revdev.Knowing.Saved ? "bookmark" : "bookmark-outline",
+                onClick: function () { return onChange(value === revdev.Knowing.Saved ? undefined : revdev.Knowing.Saved); },
+                tooltip: value !== revdev.Knowing.Saved ? text === null || text === void 0 ? void 0 : text.save : undefined,
+            },
+        ];
+    }, [value, onChange, text]);
+    return React.createElement(IconOver, { className: className, fontSize: fontSize, icon: icon, actions: actions, offsetRatioY: offsetRatioY });
+};
+
+var s$2 = {"root":"index-module_root__bD3Ws","first":"index-module_first__zVjHF","first__reaction":"index-module_first__reaction__k3WDO","prefix":"index-module_prefix__0dhs2"};
+
+var s$1 = {"root":"index-module_root__bqjGM","content":"index-module_content__-d8j7","number":"index-module_number__XWMlJ","char3":"index-module_char3__Q2fXi","char4":"index-module_char4__1ZVqw","like":"index-module_like__63dK3","dislike":"index-module_dislike__jiF2e"};
+
+var ReactionOver = function (_a) {
+    var _b = _a.rate, rate = _b === void 0 ? 0 : _b, className = _a.className, fontSize = _a.fontSize, reaction = _a.reaction, offsetRatioY = _a.offsetRatioY, onChange = _a.onChange, text = _a.text;
+    var actions = React.useMemo(function () {
+        return [
+            {
+                icon: reaction === revdev.UserReaction.Like ? "thumb-up" : "thumb-up-outline",
+                onClick: function () { return onChange(reaction === revdev.UserReaction.Like ? undefined : revdev.UserReaction.Like); },
+                tooltip: reaction !== revdev.UserReaction.Like ? text === null || text === void 0 ? void 0 : text.like : undefined,
+            },
+            {
+                icon: reaction === revdev.UserReaction.Dislike ? "thumb-down" : "thumb-down-outline",
+                onClick: function () { return onChange(reaction === revdev.UserReaction.Dislike ? undefined : revdev.UserReaction.Dislike); },
+                tooltip: reaction !== revdev.UserReaction.Dislike ? text === null || text === void 0 ? void 0 : text.dislike : undefined,
+            },
+        ];
+    }, [reaction, onChange, text]);
+    var calcRate = React.useMemo(function () {
+        var result = rate || 0;
+        if (reaction === revdev.UserReaction.Like) {
+            result += 1;
+        }
+        else if (reaction === revdev.UserReaction.Dislike) {
+            result -= 1;
+        }
+        return numeral(result).format("0a");
+    }, [rate, reaction]);
+    return (React.createElement(IconOver, { className: classNames(s$1.root, className), fontSize: fontSize, actions: actions, offsetRatioY: offsetRatioY },
+        React.createElement("div", { className: s$1.content },
+            React.createElement("div", { className: classNames(s$1.number, s$1["char".concat(calcRate.length)]) }, numeral(calcRate).format("0a")),
+            React.createElement(RegularIcon, { name: reaction === revdev.UserReaction.Like ? "thumb-up" : "thumb-up-outline", className: s$1.like }),
+            React.createElement(RegularIcon, { name: reaction === revdev.UserReaction.Dislike ? "thumb-down" : "thumb-down-outline", className: s$1.dislike }))));
+};
+
+var WordInline = function (_a) {
+    var _b;
+    var className = _a.className, tranLangCode = _a.tranLangCode, generateUrl = _a.generateUrl, fontSize = _a.fontSize, offsetRatioY = _a.offsetRatioY, mode = _a.mode, _c = _a.word, text = _c.text, langCode = _c.langCode, active = _c.active;
+    var _d = React.useState(), knowing = _d[0], setKnowing = _d[1];
+    var _e = React.useState(), reaction = _e[0], setReaction = _e[1];
+    var rate = React.useState(Randex.number(0, 10))[0];
+    var prefixContent = React.useMemo(function () {
+        if (mode) {
+            return (React.createElement("div", { className: s$2.prefix },
+                mode === "reaction" ? (React.createElement(ReactionOver, { onChange: setReaction, reaction: reaction, fontSize: fontSize, rate: rate, offsetRatioY: offsetRatioY })) : undefined,
+                React.createElement(KnowingOver, { onChange: setKnowing, value: knowing, fontSize: fontSize, offsetRatioY: offsetRatioY })));
+        }
+    }, [mode, knowing, reaction, fontSize, offsetRatioY, rate]);
+    var style = React.useMemo(function () {
+        return { fontSize: fontSize };
+    }, [fontSize]);
+    var _f = text === null || text === void 0 ? void 0 : text.split(" "), firstWord = _f[0], restWords = _f.slice(1);
+    var textComponent = mode ? (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: classNames(s$2.first, (_b = {}, _b[s$2.first__reaction] = mode === "reaction", _b)) },
+            prefixContent,
+            firstWord),
+        Array.isArray(restWords) ? " ".concat(restWords.join(" ")) : undefined)) : (text);
+    return active ? (React.createElement(AppLink, { href: generateUrl(text, langCode, tranLangCode), className: classNames(s$2.root, className), style: style }, textComponent)) : (React.createElement("span", { className: classNames(s$2.root, className), style: style }, textComponent));
+};
+
+var s = {"root":"index-module_root__6kEGn","word":"index-module_word__cDxmd"};
+
+var WordPanel = function (_a) {
+    var word = _a.word, mode = _a.mode, fontSize = _a.fontSize, generateUrl = _a.generateUrl, className = _a.className;
+    var words = React.useMemo(function () {
+        return Array.isArray(word) ? word : [word];
+    }, [word]);
+    return (React.createElement("div", { className: classNames(s.root, className) }, words.map(function (w, i) {
+        var whiteSpace = i < words.length - 1 ? " " : "";
+        return (React.createElement(React.Fragment, { key: i },
+            React.createElement(WordInline, { className: s.word, generateUrl: generateUrl, word: w, mode: mode, fontSize: fontSize }),
+            whiteSpace));
+    })));
 };
 
 exports.AlfaAttributor = AlfaAttributor;
@@ -5483,9 +5651,11 @@ exports.FrontLayout = FrontLayout;
 exports.HeaderActionPanel = HeaderActionPanel;
 exports.HiddenField = HiddenField;
 exports.IconDivision = IconDivision;
+exports.IconOver = IconOver;
 exports.InfoDialog = InfoDialog;
 exports.InputField = InputField;
 exports.InputNumberField = InputNumberField;
+exports.KnowingOver = KnowingOver;
 exports.OptionsAutocomplete = OptionsAutocomplete;
 exports.PageTitle = PageTitle;
 exports.Paragraph = Paragraph;
@@ -5502,6 +5672,8 @@ exports.SocialIconNameList = SocialIconNameList;
 exports.SplitLine = SplitLine;
 exports.SwitchField = SwitchField;
 exports.TextAreaField = TextAreaField;
+exports.WordInline = WordInline;
+exports.WordPanel = WordPanel;
 exports.useAppFormRules = useAppFormRules;
 exports.useDebounceEffect = useDebounceEffect;
 exports.useDidMount = useDidMount;

package/build/interfaces/control.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { ValueOption } from "./option";
+import { RegularIconName } from "src/icon";
 export interface HeaderProps {
     children: React.ReactNode;
     className?: string;
@@ -9,3 +10,9 @@ export interface FrontControlSelect {
     options: ValueOption[];
     onChange?: (newValue: string) => void;
 }
+export interface IconOverActionProps {
+    icon: RegularIconName;
+    tooltip?: string;
+    onClick: () => void;
+}
+export type WordInlineMode = "knowing" | "reaction";

package/build/knowingOver/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { Knowing } from "revdev";
+import { IconOverProps } from "src/iconOver";
+export interface KnowingOverProps extends Pick<IconOverProps, "fontSize" | "className" | "offsetRatioY"> {
+    value?: Knowing;
+    onChange: (newValue?: Knowing) => void;
+    text?: {
+        iKnowIt?: string;
+        save?: string;
+    };
+}
+export declare const KnowingOver: React.FC<KnowingOverProps>;

package/build/reactionOver/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { UserReaction } from "revdev";
+import { IconOverProps } from "src/iconOver";
+export interface ReactionOverProps extends Pick<IconOverProps, "fontSize" | "className" | "offsetRatioY"> {
+    rate?: number;
+    reaction?: UserReaction;
+    onChange: (newReaction?: UserReaction) => void;
+    text?: {
+        like?: string;
+        dislike?: string;
+    };
+}
+export declare const ReactionOver: React.FC<ReactionOverProps>;

package/build/styles.css

@@ -33,6 +33,7 @@
   --backLayoutBackgroundColor: white;
   --backLayoutHeaderBackgroundColor: white;
   --backLayoutSpinColor: rgb(58 63 81);
+  --iconDropBackgroundColor: white;
 }
 
 html,
@@ -449,13 +450,16 @@ body {
   cursor: pointer;
 }
 .index-module_root__EQ0II {
-  height: 32px;
+  --rcButtonSize: 32px;
 }
-.index-module_root__rounded__nqE4q {
-  width: 32px;
+
+.index-module_rounded__4OK03 {
+  height: var(--rcButtonSize);
+  width: var(--rcButtonSize);
   border-radius: 50%;
 }
-.index-module_root__link__jIljS {
+
+.index-module_link__fptGw {
   text-decoration: none;
 }
 .index-module_root__pGOaD {
@@ -601,4 +605,127 @@ body {
   border-top: 1px solid var(--splitLineColor);
   margin-top: 1em;
   margin-bottom: 1em;
+}
+.index-module_root__byEJC {
+  white-space: nowrap;
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+}
+
+.index-module_popover__QIyer .ant-popover-arrow {
+  display: none !important;
+}
+.index-module_popover__QIyer .ant-popover-inner {
+  border: none;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+.index-module_root__gWlnS {
+  border: 1px solid var(--borderColor);
+  padding: 0.3em;
+  gap: 0.3em;
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  background-color: var(--iconDropBackgroundColor);
+  border-radius: 0.3em;
+  z-index: 2;
+}
+
+.index-module_item__fZyoE {
+  height: 1em;
+  width: 1em;
+  position: relative;
+}
+
+.index-module_action__8bZn6 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0.8;
+  font-size: 1em;
+  transition: all 0.2s ease-out;
+}
+.index-module_action__8bZn6:hover {
+  font-size: 1.4em;
+  opacity: 1;
+}
+.index-module_root__bD3Ws {
+  display: inline;
+  position: relative;
+  line-height: var(--wordInlineLineHeight);
+}
+
+.index-module_first__zVjHF {
+  padding-left: 1.1em;
+  white-space: nowrap;
+  line-height: 1em;
+}
+.index-module_first__reaction__k3WDO {
+  padding-left: 2.1em;
+}
+
+.index-module_prefix__0dhs2 {
+  line-height: 1em;
+  position: absolute;
+  left: 0;
+  top: 0.1em;
+  display: flex;
+  flex-direction: row;
+  gap: 0.1em;
+}
+.index-module_root__bqjGM {
+  line-height: 30px;
+}
+.index-module_root__bqjGM > span {
+  line-height: 30px;
+}
+
+.index-module_content__-d8j7 {
+  height: 1em;
+  width: 1em;
+  position: relative;
+}
+
+.index-module_number__XWMlJ {
+  font-weight: 600;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.index-module_char3__Q2fXi {
+  font-size: 0.65em;
+}
+
+.index-module_char4__1ZVqw {
+  font-size: 0.5em;
+}
+
+.index-module_like__63dK3 {
+  font-size: 0.5em;
+  position: absolute;
+  bottom: -0.8em;
+  left: -0.1em;
+}
+
+.index-module_dislike__jiF2e {
+  font-size: 0.5em;
+  position: absolute;
+  bottom: -0.8em;
+  right: -0.1em;
+}
+.index-module_root__6kEGn {
+  display: block;
+}
+
+.index-module_word__cDxmd {
+  --wordInlineLineHeight: 42px;
+  margin-right: 0.3em;
+}
+.index-module_word__cDxmd :last-child {
+  margin-right: 0;
 }

package/build/wordInline/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { WordUserGen } from "revdev";
+import { WordInlineMode } from "src/interfaces";
+import { IconOverProps } from "src/iconOver";
+export interface WordInlineProps extends Pick<IconOverProps, "fontSize" | "offsetRatioY"> {
+    className?: string;
+    tranLangCode?: string;
+    generateUrl: (text: string, langCode: string, tranLangCode?: string) => string;
+    word: WordUserGen;
+    mode?: WordInlineMode;
+}
+export declare const WordInline: React.FC<WordInlineProps>;

package/build/wordPanel/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { WordUserGen } from "revdev";
+import { WordInlineProps } from "src/wordInline";
+export interface WordPanelProps extends Pick<WordInlineProps, "generateUrl" | "mode" | "fontSize"> {
+    word: WordUserGen | WordUserGen[];
+    className?: string;
+}
+export declare const WordPanel: React.FC<WordPanelProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "revdev-components",
-  "version": "0.106.0",
+  "version": "0.107.0",
   "main": "build/index.js",
   "module": "build/index.esm.js",
   "scripts": {
@@ -27,7 +27,8 @@
     "next": ">=13",
     "page-path": ">=0.7",
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "revdev": ">=0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
@@ -44,14 +45,18 @@
     "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^20",
+    "@types/numeral": "^2.0.5",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "antd": "^5.22.2",
     "classnames": "^2.5.1",
     "eslint-config-varp": "^1.10.0",
     "next": "14.2.16",
+    "numeral": "^2.0.6",
     "page-path": "^0.7.0",
     "postcss": "^8",
+    "randex": "^0.32.0",
+    "revdev": "^0.221.0",
     "rollup": "^4.24.4",
     "rollup-obfuscator": "^4.1.1",
     "rollup-plugin-postcss": "^4.0.2",