xmlui 0.7.13 → 0.7.15

package/dist/scripts/src/components/IconProvider.js

@@ -0,0 +1,264 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconProvider = IconProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const IconRegistryContext_1 = require("@components/IconRegistryContext");
+const fi_1 = require("react-icons/fi");
+const ai_1 = require("react-icons/ai");
+const bs_1 = require("react-icons/bs");
+const gr_1 = require("react-icons/gr");
+const io5_1 = require("react-icons/io5");
+const md_1 = require("react-icons/md");
+const ri_1 = require("react-icons/ri");
+const vsc_1 = require("react-icons/vsc");
+const rx_1 = require("react-icons/rx");
+const hi2_1 = require("react-icons/hi2");
+const tfi_1 = require("react-icons/tfi");
+const hi_1 = require("react-icons/hi");
+const ApiIcon_1 = require("@components/Icon/ApiIcon");
+const Attach_1 = require("@components/Icon/Attach");
+const Binding_1 = require("@components/Icon/Binding");
+const BoardIcon_1 = require("@components/Icon/BoardIcon");
+const BoxIcon_1 = require("@components/Icon/BoxIcon");
+const CheckIcon_1 = require("@components/Icon/CheckIcon");
+const ChevronLeft_1 = require("@components/Icon/ChevronLeft");
+const ChevronRight_1 = require("@components/Icon/ChevronRight");
+const CodeFileIcon_1 = require("@components/Icon/CodeFileIcon");
+const CodeSandbox_1 = require("@components/Icon/CodeSandbox");
+const CompactListIcon_1 = require("@components/Icon/CompactListIcon");
+const ContentCopyIcon_1 = require("@components/Icon/ContentCopyIcon");
+const DatabaseIcon_1 = require("@components/Icon/DatabaseIcon");
+const DocFileIcon_1 = require("@components/Icon/DocFileIcon");
+const DocIcon_1 = require("@components/Icon/DocIcon");
+const DotMenuHorizontalIcon_1 = require("@components/Icon/DotMenuHorizontalIcon");
+const DotMenuIcon_1 = require("@components/Icon/DotMenuIcon");
+const EmailIcon_1 = require("@components/Icon/EmailIcon");
+const EmptyFolderIcon_1 = require("@components/Icon/EmptyFolderIcon");
+const ExpressionIcon_1 = require("@components/Icon/ExpressionIcon");
+const FillPlusCricleIcon_1 = require("@components/Icon/FillPlusCricleIcon");
+const FilterIcon_1 = require("@components/Icon/FilterIcon");
+const FolderIcon_1 = require("@components/Icon/FolderIcon");
+const GlobeIcon_1 = require("@components/Icon/GlobeIcon");
+const HomeIcon_1 = require("@components/Icon/HomeIcon");
+const HyperLinkIcon_1 = require("@components/Icon/HyperLinkIcon");
+const ImageFileIcon_1 = require("@components/Icon/ImageFileIcon");
+const LinkIcon_1 = require("@components/Icon/LinkIcon");
+const ListIcon_1 = require("@components/Icon/ListIcon");
+const LooseListIcon_1 = require("@components/Icon/LooseListIcon");
+const MoonIcon_1 = require("@components/Icon/MoonIcon");
+const MoreOptionsIcon_1 = require("@components/Icon/MoreOptionsIcon");
+const PDFIcon_1 = require("@components/Icon/PDFIcon");
+const PenIcon_1 = require("@components/Icon/PenIcon");
+const PhoneIcon_1 = require("@components/Icon/PhoneIcon");
+const PhotoIcon_1 = require("@components/Icon/PhotoIcon");
+const PlusIcon_1 = require("@components/Icon/PlusIcon");
+const SearchIcon_1 = require("@components/Icon/SearchIcon");
+const ShareIcon_1 = require("@components/Icon/ShareIcon");
+const SunIcon_1 = require("@components/Icon/SunIcon");
+const TrashIcon_1 = require("@components/Icon/TrashIcon");
+const TxtIcon_1 = require("@components/Icon/TxtIcon");
+const UnknownFileIcon_1 = require("@components/Icon/UnknownFileIcon");
+const UnlinkIcon_1 = require("@components/Icon/UnlinkIcon");
+const UserIcon_1 = require("@components/Icon/UserIcon");
+const WarningIcon_1 = require("@components/Icon/WarningIcon");
+const XlsIcon_1 = require("@components/Icon/XlsIcon");
+const ErrorIcon_1 = require("@components/Icon/ErrorIcon");
+const TrendingUpIcon_1 = require("./Icon/TrendingUpIcon");
+const TrendingDownIcon_1 = require("./Icon/TrendingDownIcon");
+const SortAscendingIcon_1 = require("./Icon/SortAscendingIcon");
+const SortDescendingIcon_1 = require("./Icon/SortDescendingIcon");
+const NoSortIcon_1 = require("./Icon/NoSortIcon");
+const TrendingLevelIcon_1 = require("./Icon/TrendingLevelIcon");
+const pool = new Map();
+function registerIconRenderer(name, renderer) {
+    if (typeof name === "object") {
+        name.forEach((n) => {
+            pool.set(n, { renderer });
+        });
+    }
+    else {
+        pool.set(name, { renderer });
+    }
+}
+registerIconRenderer("assign", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiUser, Object.assign({}, props)));
+registerIconRenderer("arrowup", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsArrowUpShort, Object.assign({}, props)));
+registerIconRenderer("arrowleft", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsArrowLeftShort, Object.assign({}, props)));
+registerIconRenderer("arrowright", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsArrowRightShort, Object.assign({}, props)));
+registerIconRenderer("pause", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsPause, Object.assign({}, props)));
+registerIconRenderer("play", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsPlay, Object.assign({}, props)));
+registerIconRenderer("hamburger", (props) => (0, jsx_runtime_1.jsx)(ai_1.AiOutlineMenu, Object.assign({}, props)));
+registerIconRenderer("send", (props) => (0, jsx_runtime_1.jsx)(ai_1.AiOutlineSend, Object.assign({}, props)));
+registerIconRenderer("users", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiUsers, Object.assign({}, props)));
+registerIconRenderer("refresh", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiRefreshCcw, Object.assign({}, props)));
+registerIconRenderer("chevrondown", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiChevronDown, Object.assign({}, props)));
+registerIconRenderer("chevronup", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiChevronUp, Object.assign({}, props)));
+registerIconRenderer("dotmenu", (props) => (0, jsx_runtime_1.jsx)(DotMenuIcon_1.DotMenuIcon, Object.assign({}, props)));
+registerIconRenderer("dotmenuhorizontal", (props) => ((0, jsx_runtime_1.jsx)(DotMenuHorizontalIcon_1.DotMenuHorizontalIcon, Object.assign({}, props))));
+registerIconRenderer("noresult", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiSlash, Object.assign({}, props)));
+registerIconRenderer("crm", (props) => (0, jsx_runtime_1.jsx)(io5_1.IoChatboxOutline, Object.assign({}, props)));
+registerIconRenderer("chat", (props) => (0, jsx_runtime_1.jsx)(io5_1.IoChatboxOutline, Object.assign({}, props)));
+registerIconRenderer("pencil", (props) => (0, jsx_runtime_1.jsx)(io5_1.IoPencil, Object.assign({}, props)));
+registerIconRenderer("cube", (props) => (0, jsx_runtime_1.jsx)(io5_1.IoCubeOutline, Object.assign({}, props)));
+registerIconRenderer("apps", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiGrid, Object.assign({}, props)));
+registerIconRenderer("permissions", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiKey, Object.assign({}, props)));
+registerIconRenderer("close", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiX, Object.assign({}, props)));
+registerIconRenderer("star", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiStar, Object.assign({}, props)));
+registerIconRenderer("help", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiHelpCircle, Object.assign({}, props)));
+registerIconRenderer("compactlist", (props) => (0, jsx_runtime_1.jsx)(CompactListIcon_1.CompactListIcon, Object.assign({}, props)));
+registerIconRenderer("copy", (props) => (0, jsx_runtime_1.jsx)(ContentCopyIcon_1.ContentCopyIcon, Object.assign({}, props)));
+registerIconRenderer("move", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiClipboard, Object.assign({}, props)));
+registerIconRenderer("rename", (props) => ((0, jsx_runtime_1.jsx)(md_1.MdOutlineDriveFileRenameOutline, Object.assign({}, props))));
+registerIconRenderer("hyperlink", (props) => (0, jsx_runtime_1.jsx)(HyperLinkIcon_1.HyperLinkIcon, Object.assign({}, props)));
+registerIconRenderer("globe", (props) => (0, jsx_runtime_1.jsx)(GlobeIcon_1.GlobeIcon, Object.assign({}, props)));
+registerIconRenderer("link", (props) => (0, jsx_runtime_1.jsx)(LinkIcon_1.LinkIcon, Object.assign({}, props)));
+registerIconRenderer("looseList", (props) => (0, jsx_runtime_1.jsx)(LooseListIcon_1.LooseListIcon, Object.assign({}, props)));
+registerIconRenderer("options", (props) => (0, jsx_runtime_1.jsx)(MoreOptionsIcon_1.MoreOptionsIcon, Object.assign({}, props)));
+registerIconRenderer("search", (props) => (0, jsx_runtime_1.jsx)(SearchIcon_1.SearchIcon, Object.assign({}, props)));
+registerIconRenderer("filter", (props) => (0, jsx_runtime_1.jsx)(FilterIcon_1.FilterIcon, Object.assign({}, props)));
+registerIconRenderer("trash", (props) => (0, jsx_runtime_1.jsx)(TrashIcon_1.TrashIcon, Object.assign({}, props)));
+registerIconRenderer("pen", (props) => (0, jsx_runtime_1.jsx)(PenIcon_1.PenIcon, Object.assign({}, props)));
+registerIconRenderer("email", (props) => (0, jsx_runtime_1.jsx)(EmailIcon_1.EmailIcon, Object.assign({}, props)));
+registerIconRenderer("phone", (props) => (0, jsx_runtime_1.jsx)(PhoneIcon_1.PhoneIcon, Object.assign({}, props)));
+registerIconRenderer("home", (props) => (0, jsx_runtime_1.jsx)(HomeIcon_1.HomeIcon, Object.assign({}, props)));
+registerIconRenderer("user", (props) => (0, jsx_runtime_1.jsx)(UserIcon_1.UserIcon, Object.assign({}, props)));
+registerIconRenderer("exit", (props) => (0, jsx_runtime_1.jsx)(rx_1.RxExit, Object.assign({}, props)));
+registerIconRenderer("adduser", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiUserPlus, Object.assign({}, props)));
+registerIconRenderer("userminus", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiUserMinus, Object.assign({}, props)));
+registerIconRenderer("plus", (props) => (0, jsx_runtime_1.jsx)(PlusIcon_1.PlusIcon, Object.assign({}, props)));
+registerIconRenderer("plus-circle", (props) => (0, jsx_runtime_1.jsx)(ai_1.AiOutlinePlusCircle, Object.assign({}, props)));
+registerIconRenderer("filledplus", (props) => (0, jsx_runtime_1.jsx)(FillPlusCricleIcon_1.FillPlusCircleIcon, Object.assign({}, props)));
+registerIconRenderer("chevronright", (props) => (0, jsx_runtime_1.jsx)(ChevronRight_1.ChevronRightIcon, Object.assign({}, props)));
+registerIconRenderer("chevronleft", (props) => (0, jsx_runtime_1.jsx)(ChevronLeft_1.ChevronLeftIcon, Object.assign({}, props)));
+registerIconRenderer("checkmark", (props) => (0, jsx_runtime_1.jsx)(CheckIcon_1.CheckIcon, Object.assign({}, props)));
+registerIconRenderer("valid", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiCheckCircle, Object.assign({}, props)));
+registerIconRenderer("info", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiAlertOctagon, Object.assign({}, props)));
+registerIconRenderer("error", (props) => (0, jsx_runtime_1.jsx)(ErrorIcon_1.ErrorIcon, Object.assign({}, props)));
+registerIconRenderer("warning", (props) => (0, jsx_runtime_1.jsx)(WarningIcon_1.WarningIcon, Object.assign({}, props)));
+registerIconRenderer("board", (props) => (0, jsx_runtime_1.jsx)(BoardIcon_1.BoardIcon, Object.assign({}, props)));
+registerIconRenderer("list", (props) => (0, jsx_runtime_1.jsx)(ListIcon_1.ListIcon, Object.assign({}, props)));
+registerIconRenderer("folder", (props) => (0, jsx_runtime_1.jsx)(FolderIcon_1.FolderIcon, Object.assign({}, props)));
+registerIconRenderer("folder-outline", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiFolder, Object.assign({}, props)));
+registerIconRenderer("emptyfolder", (props) => (0, jsx_runtime_1.jsx)(EmptyFolderIcon_1.EmptyFolderIcon, Object.assign({}, props)));
+registerIconRenderer("pdf", (props) => (0, jsx_runtime_1.jsx)(PDFIcon_1.PDFIcon, Object.assign({}, props)));
+registerIconRenderer("txt", (props) => (0, jsx_runtime_1.jsx)(TxtIcon_1.TxtIcon, Object.assign({}, props)));
+registerIconRenderer("doc", (props) => (0, jsx_runtime_1.jsx)(DocIcon_1.DocIcon, Object.assign({}, props)));
+registerIconRenderer("docx", (props) => (0, jsx_runtime_1.jsx)(DocIcon_1.DocIcon, Object.assign({}, props)));
+registerIconRenderer("doc-outline", (props) => (0, jsx_runtime_1.jsx)(DocFileIcon_1.DocFileIcon, Object.assign({}, props)));
+registerIconRenderer("conf", (props) => (0, jsx_runtime_1.jsx)(gr_1.GrDocumentConfig, Object.assign({}, props)));
+registerIconRenderer("code", (props) => (0, jsx_runtime_1.jsx)(CodeFileIcon_1.CodeFileIcon, Object.assign({}, props)));
+registerIconRenderer("codesandbox", (props) => (0, jsx_runtime_1.jsx)(CodeSandbox_1.CodeSandboxIcon, Object.assign({}, props)));
+registerIconRenderer("box", (props) => (0, jsx_runtime_1.jsx)(BoxIcon_1.BoxIcon, Object.assign({}, props)));
+registerIconRenderer(["xls", "xlsx"], (props) => (0, jsx_runtime_1.jsx)(XlsIcon_1.XlsIcon, Object.assign({}, props)));
+registerIconRenderer(["jpg", "jpeg", "png", "webp", "svg", "gif", "tif", "ppt", "pptx"], (props) => (0, jsx_runtime_1.jsx)(ImageFileIcon_1.ImageFileIcon, Object.assign({}, props)));
+registerIconRenderer("unknownfile", (props) => (0, jsx_runtime_1.jsx)(UnknownFileIcon_1.UnknownFileIcon, Object.assign({}, props)));
+registerIconRenderer("photo", (props) => (0, jsx_runtime_1.jsx)(PhotoIcon_1.PhotoIcon, Object.assign({}, props)));
+registerIconRenderer("previous", (props) => (0, jsx_runtime_1.jsx)(gr_1.GrPrevious, Object.assign({}, props)));
+registerIconRenderer("next", (props) => (0, jsx_runtime_1.jsx)(gr_1.GrNext, Object.assign({}, props)));
+registerIconRenderer("like", (props) => (0, jsx_runtime_1.jsx)(ai_1.AiOutlineLike, Object.assign({}, props)));
+registerIconRenderer("reply", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsReply, Object.assign({}, props)));
+registerIconRenderer("attach", (props) => (0, jsx_runtime_1.jsx)(Attach_1.AttachmentIcon, Object.assign({}, props)));
+registerIconRenderer("attach2", (props) => (0, jsx_runtime_1.jsx)(ri_1.RiAttachment2, Object.assign({}, props)));
+registerIconRenderer("emoji", (props) => (0, jsx_runtime_1.jsx)(gr_1.GrEmoji, Object.assign({}, props)));
+registerIconRenderer("message", (props) => (0, jsx_runtime_1.jsx)(ri_1.RiMessage2Line, Object.assign({}, props)));
+registerIconRenderer("upload", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiUpload, Object.assign({}, props)));
+registerIconRenderer("split-vertical", (props) => (0, jsx_runtime_1.jsx)(vsc_1.VscSplitVertical, Object.assign({}, props)));
+registerIconRenderer("split-horizontal", (props) => ((0, jsx_runtime_1.jsx)(vsc_1.VscSplitHorizontal, Object.assign({}, props))));
+registerIconRenderer("swap", (props) => (0, jsx_runtime_1.jsx)(io5_1.IoSwapVertical, Object.assign({}, props)));
+registerIconRenderer("download", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiDownload, Object.assign({}, props)));
+registerIconRenderer("note", (props) => (0, jsx_runtime_1.jsx)(ri_1.RiStickyNoteLine, Object.assign({}, props)));
+registerIconRenderer("binding", (props) => (0, jsx_runtime_1.jsx)(Binding_1.BindingIcon, Object.assign({}, props)));
+registerIconRenderer("database", (props) => (0, jsx_runtime_1.jsx)(DatabaseIcon_1.DatabaseIcon, Object.assign({}, props)));
+registerIconRenderer("unlink", (props) => (0, jsx_runtime_1.jsx)(UnlinkIcon_1.UnlinkIcon, Object.assign({}, props)));
+registerIconRenderer("api", (props) => (0, jsx_runtime_1.jsx)(ApiIcon_1.ApiIcon, Object.assign({}, props)));
+registerIconRenderer("expression", (props) => (0, jsx_runtime_1.jsx)(ExpressionIcon_1.ExpressionIcon, Object.assign({}, props)));
+registerIconRenderer("chat", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsChatDots, Object.assign({}, props)));
+registerIconRenderer("hash", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsHash, Object.assign({}, props)));
+registerIconRenderer("drive", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiHardDrive, Object.assign({}, props)));
+registerIconRenderer("lock", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiLock, Object.assign({}, props)));
+registerIconRenderer("start", (props) => (0, jsx_runtime_1.jsx)(vsc_1.VscDebugStart, Object.assign({}, props)));
+registerIconRenderer("stop", (props) => (0, jsx_runtime_1.jsx)(vsc_1.VscDebugStop, Object.assign({}, props)));
+registerIconRenderer("restart", (props) => (0, jsx_runtime_1.jsx)(tfi_1.TfiReload, Object.assign({}, props)));
+registerIconRenderer("duplicate", (props) => (0, jsx_runtime_1.jsx)(hi_1.HiOutlineDuplicate, Object.assign({}, props)));
+registerIconRenderer("connect", (props) => (0, jsx_runtime_1.jsx)(rx_1.RxLightningBolt, Object.assign({}, props)));
+registerIconRenderer("cog", (props) => (0, jsx_runtime_1.jsx)(hi_1.HiOutlineCog, Object.assign({}, props)));
+registerIconRenderer("sun", (props) => (0, jsx_runtime_1.jsx)(SunIcon_1.SunIcon, Object.assign({}, props)));
+registerIconRenderer("moon", (props) => (0, jsx_runtime_1.jsx)(MoonIcon_1.MoonIcon, Object.assign({}, props)));
+registerIconRenderer("share", (props) => (0, jsx_runtime_1.jsx)(ShareIcon_1.ShareIcon, Object.assign({}, props)));
+registerIconRenderer("new-window", (props) => (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, Object.assign({}, props)));
+registerIconRenderer("paint", (props) => (0, jsx_runtime_1.jsx)(hi2_1.HiOutlinePaintBrush, Object.assign({}, props)));
+registerIconRenderer("palette", (props) => (0, jsx_runtime_1.jsx)(md_1.MdOutlinePalette, Object.assign({}, props)));
+registerIconRenderer("trending-up", (props) => (0, jsx_runtime_1.jsx)(TrendingUpIcon_1.TrendingUpIcon, Object.assign({}, props)));
+registerIconRenderer("trending-down", (props) => (0, jsx_runtime_1.jsx)(TrendingDownIcon_1.TrendingDownIcon, Object.assign({}, props)));
+registerIconRenderer("trending-level", (props) => (0, jsx_runtime_1.jsx)(TrendingLevelIcon_1.TrendingLevelIcon, Object.assign({}, props)));
+registerIconRenderer("sortasc", (props) => (0, jsx_runtime_1.jsx)(SortAscendingIcon_1.SortAscendingIcon, Object.assign({}, props)));
+registerIconRenderer("sortdesc", (props) => (0, jsx_runtime_1.jsx)(SortDescendingIcon_1.SortDescendingIcon, Object.assign({}, props)));
+registerIconRenderer("nosort", (props) => (0, jsx_runtime_1.jsx)(NoSortIcon_1.NoSortIcon, Object.assign({}, props)));
+// --- IDE extras (temporary)
+registerIconRenderer("arrowdown", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsArrowDownShort, Object.assign({}, props)));
+registerIconRenderer("square", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsSquare, Object.assign({}, props)));
+registerIconRenderer("squarehalf", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsSquareHalf, Object.assign({}, props)));
+registerIconRenderer("squarefill", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsSquareFill, Object.assign({}, props)));
+function IconProvider({ children }) {
+    const getRegisteredIconNames = (0, react_1.useCallback)(() => {
+        return Array.from(pool.keys());
+    }, []);
+    const lookupIconRenderer = (0, react_1.useCallback)((name) => {
+        return pool.get(name);
+    }, []);
+    const [customSvgs, setCustomSvgs] = (0, react_1.useState)({});
+    const attachedResources = (0, react_1.useRef)({});
+    const spriteRootRef = (0, react_1.useRef)(null);
+    const ensureCustomSvgIcon = (0, react_1.useCallback)((resourceUrl) => __awaiter(this, void 0, void 0, function* () {
+        if (attachedResources.current[resourceUrl]) {
+            return;
+        }
+        const icon = yield (yield fetch(resourceUrl)).text();
+        const div = document.createElement("div");
+        div.style.display = "none";
+        div.innerHTML = icon;
+        const attrs = {};
+        for (let i = 0; i < div.children[0].attributes.length; i++) {
+            const attr = div.children[0].attributes[i];
+            if (attr.nodeName !== "class") {
+                attrs[attr.nodeName] = attr.nodeValue;
+            }
+        }
+        Object.keys(attrs).forEach((key) => {
+            div.children[0].removeAttribute(key);
+        });
+        const d = document.createElementNS("http://www.w3.org/2000/svg", "symbol");
+        d.innerHTML = div.children[0].innerHTML;
+        d.id = resourceUrl;
+        d.setAttributeNS(null, "viewBox", attrs["viewBox"]);
+        if (!attachedResources.current[resourceUrl]) {
+            spriteRootRef.current.appendChild(d);
+            attachedResources.current[resourceUrl] = true;
+        }
+        const customIcon = {
+            name: resourceUrl,
+            attributes: attrs,
+        };
+        setCustomSvgs((prev) => {
+            return Object.assign(Object.assign({}, prev), { [resourceUrl]: customIcon });
+        });
+    }), []);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return {
+            getRegisteredIconNames,
+            lookupIconRenderer,
+            ensureCustomSvgIcon,
+            customSvgs,
+        };
+    }, [customSvgs, ensureCustomSvgIcon, getRegisteredIconNames, lookupIconRenderer]);
+    return ((0, jsx_runtime_1.jsxs)(IconRegistryContext_1.IconRegistryContext.Provider, { value: contextValue, children: [children, (0, jsx_runtime_1.jsx)("svg", { style: { display: "none" }, ref: spriteRootRef })] }));
+}

package/dist/scripts/src/components/IconRegistryContext.js

@@ -0,0 +1,317 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconRegistryContext = void 0;
+exports.useIconRegistry = useIconRegistry;
+exports.useCustomSvgIconRenderer = useCustomSvgIconRenderer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+exports.IconRegistryContext = react_1.default.createContext(null);
+function useIconRegistry() {
+    return (0, react_1.useContext)(exports.IconRegistryContext);
+}
+//https://github.com/hatashiro/react-attr-converter/tree/master
+const svgAttributeMap = {
+    // SVG attributes
+    accentheight: 'accentHeight',
+    accumulate: 'accumulate',
+    additive: 'additive',
+    alignmentbaseline: 'alignmentBaseline',
+    allowreorder: 'allowReorder',
+    alphabetic: 'alphabetic',
+    amplitude: 'amplitude',
+    arabicform: 'arabicForm',
+    ascent: 'ascent',
+    attributename: 'attributeName',
+    attributetype: 'attributeType',
+    autoreverse: 'autoReverse',
+    azimuth: 'azimuth',
+    basefrequency: 'baseFrequency',
+    baseprofile: 'baseProfile',
+    baselineshift: 'baselineShift',
+    bbox: 'bbox',
+    begin: 'begin',
+    bias: 'bias',
+    by: 'by',
+    calcmode: 'calcMode',
+    capheight: 'capHeight',
+    clip: 'clip',
+    clippath: 'clipPath',
+    clippathunits: 'clipPathUnits',
+    cliprule: 'clipRule',
+    colorinterpolation: 'colorInterpolation',
+    colorinterpolationfilters: 'colorInterpolationFilters',
+    colorprofile: 'colorProfile',
+    colorrendering: 'colorRendering',
+    contentscripttype: 'contentScriptType',
+    contentstyletype: 'contentStyleType',
+    cursor: 'cursor',
+    cx: 'cx',
+    cy: 'cy',
+    d: 'd',
+    decelerate: 'decelerate',
+    descent: 'descent',
+    diffuseconstant: 'diffuseConstant',
+    direction: 'direction',
+    display: 'display',
+    divisor: 'divisor',
+    dominantbaseline: 'dominantBaseline',
+    dur: 'dur',
+    dx: 'dx',
+    dy: 'dy',
+    edgemode: 'edgeMode',
+    elevation: 'elevation',
+    enablebackground: 'enableBackground',
+    end: 'end',
+    exponent: 'exponent',
+    externalresourcesrequired: 'externalResourcesRequired',
+    fill: 'fill',
+    fillopacity: 'fillOpacity',
+    fillrule: 'fillRule',
+    filter: 'filter',
+    filterres: 'filterRes',
+    filterunits: 'filterUnits',
+    floodcolor: 'floodColor',
+    floodopacity: 'floodOpacity',
+    focusable: 'focusable',
+    fontfamily: 'fontFamily',
+    fontsize: 'fontSize',
+    fontsizeadjust: 'fontSizeAdjust',
+    fontstretch: 'fontStretch',
+    fontstyle: 'fontStyle',
+    fontvariant: 'fontVariant',
+    fontweight: 'fontWeight',
+    format: 'format',
+    from: 'from',
+    fx: 'fx',
+    fy: 'fy',
+    g1: 'g1',
+    g2: 'g2',
+    glyphname: 'glyphName',
+    glyphorientationhorizontal: 'glyphOrientationHorizontal',
+    glyphorientationvertical: 'glyphOrientationVertical',
+    glyphref: 'glyphRef',
+    gradienttransform: 'gradientTransform',
+    gradientunits: 'gradientUnits',
+    hanging: 'hanging',
+    horizadvx: 'horizAdvX',
+    horizoriginx: 'horizOriginX',
+    ideographic: 'ideographic',
+    imagerendering: 'imageRendering',
+    in: 'in',
+    in2: 'in2',
+    intercept: 'intercept',
+    k: 'k',
+    k1: 'k1',
+    k2: 'k2',
+    k3: 'k3',
+    k4: 'k4',
+    kernelmatrix: 'kernelMatrix',
+    kernelunitlength: 'kernelUnitLength',
+    kerning: 'kerning',
+    keypoints: 'keyPoints',
+    keysplines: 'keySplines',
+    keytimes: 'keyTimes',
+    lengthadjust: 'lengthAdjust',
+    letterspacing: 'letterSpacing',
+    lightingcolor: 'lightingColor',
+    limitingconeangle: 'limitingConeAngle',
+    local: 'local',
+    markerend: 'markerEnd',
+    markerheight: 'markerHeight',
+    markermid: 'markerMid',
+    markerstart: 'markerStart',
+    markerunits: 'markerUnits',
+    markerwidth: 'markerWidth',
+    mask: 'mask',
+    maskcontentunits: 'maskContentUnits',
+    maskunits: 'maskUnits',
+    mathematical: 'mathematical',
+    mode: 'mode',
+    numoctaves: 'numOctaves',
+    offset: 'offset',
+    opacity: 'opacity',
+    operator: 'operator',
+    order: 'order',
+    orient: 'orient',
+    orientation: 'orientation',
+    origin: 'origin',
+    overflow: 'overflow',
+    overlineposition: 'overlinePosition',
+    overlinethickness: 'overlineThickness',
+    paintorder: 'paintOrder',
+    panose1: 'panose1',
+    pathlength: 'pathLength',
+    patterncontentunits: 'patternContentUnits',
+    patterntransform: 'patternTransform',
+    patternunits: 'patternUnits',
+    pointerevents: 'pointerEvents',
+    points: 'points',
+    pointsatx: 'pointsAtX',
+    pointsaty: 'pointsAtY',
+    pointsatz: 'pointsAtZ',
+    preservealpha: 'preserveAlpha',
+    preserveaspectratio: 'preserveAspectRatio',
+    primitiveunits: 'primitiveUnits',
+    r: 'r',
+    radius: 'radius',
+    refx: 'refX',
+    refy: 'refY',
+    renderingintent: 'renderingIntent',
+    repeatcount: 'repeatCount',
+    repeatdur: 'repeatDur',
+    requiredextensions: 'requiredExtensions',
+    requiredfeatures: 'requiredFeatures',
+    restart: 'restart',
+    result: 'result',
+    rotate: 'rotate',
+    rx: 'rx',
+    ry: 'ry',
+    scale: 'scale',
+    seed: 'seed',
+    shaperendering: 'shapeRendering',
+    slope: 'slope',
+    spacing: 'spacing',
+    specularconstant: 'specularConstant',
+    specularexponent: 'specularExponent',
+    speed: 'speed',
+    spreadmethod: 'spreadMethod',
+    startoffset: 'startOffset',
+    stddeviation: 'stdDeviation',
+    stemh: 'stemh',
+    stemv: 'stemv',
+    stitchtiles: 'stitchTiles',
+    stopcolor: 'stopColor',
+    stopopacity: 'stopOpacity',
+    strikethroughposition: 'strikethroughPosition',
+    strikethroughthickness: 'strikethroughThickness',
+    string: 'string',
+    stroke: 'stroke',
+    strokedasharray: 'strokeDasharray',
+    strokedashoffset: 'strokeDashoffset',
+    strokelinecap: 'strokeLinecap',
+    strokelinejoin: 'strokeLinejoin',
+    strokemiterlimit: 'strokeMiterlimit',
+    strokeopacity: 'strokeOpacity',
+    strokewidth: 'strokeWidth',
+    surfacescale: 'surfaceScale',
+    systemlanguage: 'systemLanguage',
+    tablevalues: 'tableValues',
+    targetx: 'targetX',
+    targety: 'targetY',
+    textanchor: 'textAnchor',
+    textdecoration: 'textDecoration',
+    textlength: 'textLength',
+    textrendering: 'textRendering',
+    to: 'to',
+    transform: 'transform',
+    u1: 'u1',
+    u2: 'u2',
+    underlineposition: 'underlinePosition',
+    underlinethickness: 'underlineThickness',
+    unicode: 'unicode',
+    unicodebidi: 'unicodeBidi',
+    unicoderange: 'unicodeRange',
+    unitsperem: 'unitsPerEm',
+    valphabetic: 'vAlphabetic',
+    vhanging: 'vHanging',
+    videographic: 'vIdeographic',
+    vmathematical: 'vMathematical',
+    values: 'values',
+    vectoreffect: 'vectorEffect',
+    version: 'version',
+    vertadvy: 'vertAdvY',
+    vertoriginx: 'vertOriginX',
+    vertoriginy: 'vertOriginY',
+    viewbox: 'viewBox',
+    viewtarget: 'viewTarget',
+    visibility: 'visibility',
+    widths: 'widths',
+    wordspacing: 'wordSpacing',
+    writingmode: 'writingMode',
+    x: 'x',
+    x1: 'x1',
+    x2: 'x2',
+    xchannelselector: 'xChannelSelector',
+    xheight: 'xHeight',
+    xlinkactuate: 'xlinkActuate',
+    xlinkarcrole: 'xlinkArcrole',
+    xlinkhref: 'xlinkHref',
+    xlinkrole: 'xlinkRole',
+    xlinkshow: 'xlinkShow',
+    xlinktitle: 'xlinkTitle',
+    xlinktype: 'xlinkType',
+    xmlns: 'xmlns',
+    xmlnsxlink: 'xmlnsXlink',
+    xmlbase: 'xmlBase',
+    xmllang: 'xmlLang',
+    xmlspace: 'xmlSpace',
+    y: 'y',
+    y1: 'y1',
+    y2: 'y2',
+    ychannelselector: 'yChannelSelector',
+    z: 'z',
+    zoomandpan: 'zoomAndPan',
+};
+const extraCharRegex = /[-:]/g;
+function useCustomSvgIconRenderer(resourceUrl) {
+    const { ensureCustomSvgIcon, customSvgs } = useIconRegistry();
+    (0, react_1.useLayoutEffect)(() => {
+        if (!resourceUrl) {
+            return;
+        }
+        ensureCustomSvgIcon(resourceUrl);
+    }, [ensureCustomSvgIcon, resourceUrl]);
+    const customSvg = resourceUrl ? customSvgs[resourceUrl] : null;
+    const iconRenderer = (0, react_1.useCallback)(({ style, className }) => {
+        if (!customSvg) {
+            return null;
+        }
+        const { attributes, name } = customSvg;
+        const safeAttributes = {};
+        Object.entries(attributes).forEach(([key, value]) => {
+            let safeKey = key;
+            if (/^(data-|aria-)/.test(key)) {
+                safeKey = key;
+            }
+            else {
+                safeKey = key.replace(extraCharRegex, '').toLowerCase();
+            }
+            safeAttributes[svgAttributeMap[safeKey] || key] = value;
+        });
+        return (0, jsx_runtime_1.jsx)("svg", Object.assign({}, safeAttributes, { style: style, className: className, children: (0, jsx_runtime_1.jsx)("use", { href: `#${name}` }) }));
+    }, [customSvg]);
+    return !resourceUrl ? null : iconRenderer;
+}

package/dist/scripts/src/components/Image/Image.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.imageComponentRenderer = exports.ImageMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const Image_module_scss_1 = __importDefault(require("./Image.module.scss"));
+const themeVars_1 = require("@components-core/theming/themeVars");
+const ImageNative_1 = require("./ImageNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "Image";
+exports.ImageMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`${COMP}\` component represents or depicts an object, scene, idea, or other concept ` +
+        `with a picture.`,
+    props: {
+        src: (0, ComponentDefs_1.d)(`This property is used to indicate the source (path) of the image to display.`),
+        alt: (0, ComponentDefs_1.d)(`This property specifies an alternate text for the image.`),
+        fit: (0, ComponentDefs_1.d)(`This property sets how the image content should be resized to fit its container.`),
+        lazyLoad: (0, ComponentDefs_1.d)(`Lazy loading instructs the browser to load the image only when it is imminently needed ` +
+            `(e.g. user scrolls to it). The default value is eager (\`false\`).`),
+        aspectRatio: (0, ComponentDefs_1.d)(`This property sets a preferred aspect ratio for the image, which will be used in the ` +
+            `calculation of auto sizes and some other layout functions.`),
+        animation: (0, ComponentDefs_1.d)(`The animation object to be applied to the component`),
+    },
+    events: {
+        click: (0, metadata_helpers_1.dClick)(COMP),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Image_module_scss_1.default.themeVars),
+});
+exports.imageComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ImageMd, ({ node, extractValue, layoutCss, extractResourceUrl }) => {
+    return ((0, jsx_runtime_1.jsx)(ImageNative_1.Image, { src: extractResourceUrl(node.props.src), alt: extractValue(node.props.alt), fit: extractValue(node.props.fit), lazyLoad: extractValue.asOptionalBoolean(node.props.lazyLoad), aspectRatio: extractValue(node.props.aspectRatio), style: layoutCss, animation: extractValue(node.props.animation) }));
+});

package/dist/scripts/src/components/Image/ImageNative.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Image_module_scss_1 = __importDefault(require("./Image.module.scss"));
+const react_1 = require("react");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+exports.Image = (0, react_1.forwardRef)(function Img({ src, alt, fit = "contain", style, onClick, aspectRatio, lazyLoad }, ref) {
+    return ((0, jsx_runtime_1.jsx)("img", { src: src, ref: ref, alt: alt, loading: lazyLoad ? "lazy" : "eager", className: (0, classnames_1.default)(Image_module_scss_1.default.img, {
+            [Image_module_scss_1.default.clickable]: !!onClick,
+        }), style: Object.assign(Object.assign({ objectFit: fit, boxShadow: "none" }, style), { aspectRatio: aspectRatio }), onClick: onClick }));
+});

package/dist/scripts/src/components/Input/InputAdornment.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Adornment = Adornment;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const IconNative_1 = require("@components/Icon/IconNative");
+const TextNative_1 = require("../Text/TextNative");
+const InputAdornment_module_scss_1 = __importDefault(require("./InputAdornment.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+function Adornment({ iconName, text, className }) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iconName || text ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(InputAdornment_module_scss_1.default.wrapper, className), children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, layout: { color: "inherit" } }), text && ((0, jsx_runtime_1.jsx)("div", { style: { display: "flex", userSelect: "none" }, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { layout: { fontSize: "inherit" }, children: text }) }))] })) : null }));
+}