@dsh-plugin/dsh-loader 1.1.0-dev.32287576957 → 1.2.0

package/lib/client.js

@@ -4,8 +4,35 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		//#region \0rolldown/runtime.js
+		var __create = Object.create;
+		var __defProp = Object.defineProperty;
+		var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+		var __getOwnPropNames = Object.getOwnPropertyNames;
+		var __getProtoOf = Object.getPrototypeOf;
+		var __hasOwnProp = Object.prototype.hasOwnProperty;
+		var __copyProps = (to, from, except, desc) => {
+			if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+				key = keys[i];
+				if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+			return to;
+		};
+		var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
+			value: mod,
+			enumerable: true
+		}) : target, mod));
+		//#endregion
+		let react = require("react");
+		let react$1 = __toESM(react, 1);
+		react = __toESM(react);
+		let react_dom_client = require("react-dom/client");
+		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 		//#region src/version.ts
-		const LOADER_VERSION = "1.0.0";
+		const LOADER_VERSION = "1.2.0";
 		const LOG_PREFIX = "[dshloader]";
 		//#endregion
 		//#region src/adapters/dsh-1-x.ts
@@ -30,6 +57,14 @@ window.__ModuleLoader__.load({
 		}];
 		//#endregion
 		//#region src/client.ts
+		/**
+		* The ambient browser `window`, when this module runs in a browser-like realm.
+		* Read off `globalThis` so no DOM lib and no global declaration is required.
+		*/
+		function ambientWindow$1() {
+			const found = globalThis.window;
+			return typeof found === "object" && found !== null ? found : void 0;
+		}
 		var ModuleNotFoundError = class extends Error {
 			specifier;
 			constructor(specifier) {
@@ -114,7 +149,7 @@ window.__ModuleLoader__.load({
 		* Install dshloader into a browser-like environment.
 		*/
 		function installClient(opts = {}) {
-			const win = opts.window ?? (typeof window !== "undefined" ? window : void 0);
+			const win = opts.window ?? ambientWindow$1();
 			if (win === void 0) return void 0;
 			const dshVersion = opts.dshVersion ?? win.__DSHLOADER_VERSION__;
 			const adapter = pickClientAdapter(dshVersion);
@@ -260,22 +295,2758 @@ window.__ModuleLoader__.load({
 				win.fetch = originalFetch;
 			};
 		}
+		//#endregion
+		//#region src/ui/anchors.ts
+		/** Query helper that tolerates an invalid selector (returns nothing). */
+		function all(selector) {
+			return () => {
+				if (typeof document === "undefined") return [];
+				try {
+					return document.querySelectorAll(selector);
+				} catch {
+					return [];
+				}
+			};
+		}
+		/** Anchor names dshloader ships for the dsh 1.x shell. */
+		const ANCHOR_NAMES = [
+			"conversation.status",
+			"conversation.column",
+			"shell.overlay",
+			"desktop.detailsSurface",
+			"layout.frame",
+			"settings.nav"
+		];
+		/**
+		* The built-in anchors for dsh 1.x (verified against dsh 0.1.0-rc.6).
+		*
+		* Provenance of each selector:
+		*
+		* - `conversation.status` — dsh-thought-buddy, `src/client/index.ts:632-637`:
+		*   `[data-conversation-scroll] [role="status"]` with a whole-document
+		*   `[role="status"]` fallback. Callers add their own `accept` (thought-buddy
+		*   matches the status text) via {@link AnchorSpec.accept} on a redefinition,
+		*   or filter in `MountSpec.when`.
+		* - `conversation.column` — dsh-better-sidebar, `src/client/Sidebar.tsx:396`:
+		*   `#root [data-slot="conversation"]`.
+		* - `shell.overlay` — dsh-code-review, `src/client.ts:1930` / `:2528`:
+		*   `[data-shell-overlay]`.
+		* - `desktop.detailsSurface` — dsh-code-review, `src/client.ts:1957`:
+		*   `.dshDesktopDetailsSurface`. A CSS-module-adjacent CLASS name and therefore
+		*   the most fragile anchor in the table; kept because the behaviour needs it.
+		* - `layout.frame` — dsh-code-review, `src/client.ts:1176` / `:1209` / `:1244`:
+		*   the frame whose `style.gridTemplateColumns` carries the sidebar width and
+		*   whose `data-sidebar-collapsed` attribute carries the collapsed state. This
+		*   anchor is READ (via `ui.hosts('layout.frame')`), never mounted into.
+		* - `settings.nav` — dsh-better-sidebar, `src/client/settings-nav-icon.ts`:
+		*   the settings navigation list that gets an icon synced into it.
+		*/
+		const BUILTIN_ANCHORS = {
+			"conversation.status": {
+				describe: "Conversation turn-status strip ([data-conversation-scroll] [role=\"status\"])",
+				find: all("[data-conversation-scroll] [role=\"status\"]"),
+				fallback: all("[role=\"status\"]"),
+				insert: "prepend"
+			},
+			"conversation.column": {
+				describe: "Conversation centre column (#root [data-slot=\"conversation\"])",
+				find: all("#root [data-slot=\"conversation\"]"),
+				insert: "append"
+			},
+			"shell.overlay": {
+				describe: "Shell overlay host ([data-shell-overlay])",
+				find: all("[data-shell-overlay]"),
+				insert: "append"
+			},
+			"desktop.detailsSurface": {
+				describe: "Desktop details surface (.dshDesktopDetailsSurface) — class-based, fragile",
+				find: all(".dshDesktopDetailsSurface"),
+				insert: "append"
+			},
+			"layout.frame": {
+				describe: "Layout frame carrying sidebar width / collapsed state (read-only anchor)",
+				find: all("[data-sidebar-collapsed], [data-shell-frame]"),
+				insert: "append"
+			},
+			"settings.nav": {
+				describe: "Settings navigation list",
+				find: all("[data-settings-nav]"),
+				fallback: all("[role=\"tablist\"]"),
+				insert: "append"
+			}
+		};
+		/**
+		* Project one `layout.frame` host into {@link LayoutFrameState}.
+		*
+		* Encapsulates the `style.gridTemplateColumns` parsing dsh-code-review does at
+		* `src/client.ts:1176`, so the regex lives with the anchor it belongs to.
+		*/
+		function readLayoutFrame(host) {
+			const collapsed = host.hasAttribute("data-sidebar-collapsed");
+			let firstColumnPx;
+			const style = host.style;
+			const template = typeof style?.gridTemplateColumns === "string" ? style.gridTemplateColumns : "";
+			const match = /^\s*([\d.]+)px/.exec(template);
+			if (match !== null) {
+				const value = Number.parseFloat(match[1]);
+				if (Number.isFinite(value)) firstColumnPx = value;
+			}
+			return {
+				collapsed,
+				firstColumnPx
+			};
+		}
+		//#endregion
+		//#region src/ui/slots.tsx
+		/**
+		* The dshloader UI SLOT engine (`ctx.dshLoader.ui` / `__dshLoader__.ui`).
+		*
+		* dsh's Web shell offers official slots for a few places (`settings.section`,
+		* `conversation.chat.node`, …) but not for everything plugins need to decorate.
+		* Today four plugins in this family each hand-roll the same DOM-injection
+		* boilerplate against hardcoded shell selectors:
+		*
+		*   - dsh-thought-buddy   → `[data-conversation-scroll] [role="status"]`
+		*   - dsh-auxiliary       → the Models page's editable model rows
+		*   - dsh-code-review     → `[data-shell-overlay]`, `.dshDesktopDetailsSurface`
+		*   - dsh-better-sidebar  → `#root [data-slot="conversation"]`, theme root, …
+		*
+		* Every one of them re-implements: a MutationObserver, requestAnimationFrame
+		* coalescing, an idempotence guard, self-healing after a React re-render, and
+		* teardown. This module implements that ONCE and moves the shell selectors into
+		* a named ANCHOR TABLE the version adapter owns — so when dsh moves its DOM,
+		* one anchor entry changes instead of four plugins.
+		*
+		* What it cannot do: invent an anchor that no longer exists. A vanished anchor
+		* turns N silent breakages into ONE diagnosable one (`ui.diagnose()`), which is
+		* the honest goal — DOM injection is centralised here, not made robust. The
+		* durable fix stays "get the anchor promoted to an official slot".
+		*
+		* @module @dsh-plugin/dsh-loader/ui/slots
+		*/
+		/** Attribute marking a generated mount node (and making re-mount idempotent). */
+		const SLOT_ATTR = "data-dshl-slot";
+		/**
+		* Build the `ui` facade with its own observer. One engine serves every anchor
+		* and every mount, so the shell is observed exactly once regardless of how many
+		* plugins inject.
+		*/
+		function createUiAPI(options = {}) {
+			const warn = options.warn ?? ((message) => console.warn(message));
+			const anchors = /* @__PURE__ */ new Map();
+			/** anchor name → mount id → spec */
+			const mounts = /* @__PURE__ */ new Map();
+			/** anchor name → mount id → host → instance */
+			const live = /* @__PURE__ */ new Map();
+			/** Anchors whose primary locator came up empty on the last sweep. */
+			const fellBack = /* @__PURE__ */ new Set();
+			/** `onDomSettled` subscribers, notified once per coalesced batch. */
+			const settledListeners = /* @__PURE__ */ new Set();
+			let observer;
+			let scheduled = false;
+			let destroyed = false;
+			const hasDom = () => typeof document !== "undefined" && typeof MutationObserver !== "undefined";
+			/** Resolve an anchor to its host elements, recording fallback use. */
+			const resolve = (name, spec) => {
+				const collect = (source) => {
+					if (source === void 0) return [];
+					try {
+						return [...source()];
+					} catch {
+						return [];
+					}
+				};
+				let hosts = collect(spec.find);
+				if (hosts.length === 0) {
+					const alt = collect(spec.fallback);
+					if (alt.length > 0) {
+						fellBack.add(name);
+						hosts = alt;
+					} else fellBack.delete(name);
+				} else fellBack.delete(name);
+				if (spec.accept !== void 0) hosts = hosts.filter((host) => {
+					try {
+						return spec.accept(host);
+					} catch {
+						return false;
+					}
+				});
+				return [...new Set(hosts)];
+			};
+			/** Insert a freshly created mount node relative to its host. */
+			const place = (host, node, mode) => {
+				switch (mode) {
+					case "prepend":
+						host.insertBefore(node, host.firstChild);
+						return;
+					case "before":
+						host.parentNode?.insertBefore(node, host);
+						return;
+					case "after":
+						host.parentNode?.insertBefore(node, host.nextSibling);
+						return;
+					default: host.appendChild(node);
+				}
+			};
+			/** Tear down one instance, containing any cleanup failure. */
+			const teardown = (instance) => {
+				try {
+					instance.cleanup?.();
+				} catch (error) {
+					warn(`[dshloader.ui] mount cleanup threw: ${error instanceof Error ? error.message : String(error)}`);
+				}
+				if (instance.mount.parentNode !== null) instance.mount.parentNode.removeChild(instance.mount);
+			};
+			const instancesFor = (anchor, mountId) => {
+				let byMount = live.get(anchor);
+				if (byMount === void 0) {
+					byMount = /* @__PURE__ */ new Map();
+					live.set(anchor, byMount);
+				}
+				let byHost = byMount.get(mountId);
+				if (byHost === void 0) {
+					byHost = /* @__PURE__ */ new Map();
+					byMount.set(mountId, byHost);
+				}
+				return byHost;
+			};
+			/** One reconciliation pass over every anchor × mount. */
+			const sweep = () => {
+				if (destroyed || !hasDom()) return;
+				for (const [name, spec] of anchors) {
+					const specs = mounts.get(name);
+					if (specs === void 0 || specs.size === 0) continue;
+					const hosts = resolve(name, spec);
+					const insert = spec.insert ?? "append";
+					const tagName = spec.tagName ?? "span";
+					for (const [mountId, mountSpec] of specs) {
+						const instances = instancesFor(name, mountId);
+						for (const [host, instance] of [...instances]) if (!host.isConnected || !instance.mount.isConnected) {
+							teardown(instance);
+							instances.delete(host);
+						}
+						for (const host of hosts) {
+							if (instances.has(host)) continue;
+							if (mountSpec.when !== void 0) try {
+								if (!mountSpec.when(host)) continue;
+							} catch {
+								continue;
+							}
+							if (host.querySelector(`[${SLOT_ATTR}="${mountId}"]`) !== null) continue;
+							const node = document.createElement(tagName);
+							node.setAttribute(SLOT_ATTR, mountId);
+							try {
+								place(host, node, insert);
+							} catch (error) {
+								warn(`[dshloader.ui] could not place "${mountId}" on anchor "${name}": ${error instanceof Error ? error.message : String(error)}`);
+								continue;
+							}
+							let cleanup;
+							try {
+								cleanup = mountSpec.render(node, host) ?? void 0;
+							} catch (error) {
+								warn(`[dshloader.ui] mount "${mountId}" render threw: ${error instanceof Error ? error.message : String(error)}`);
+								if (node.parentNode !== null) node.parentNode.removeChild(node);
+								continue;
+							}
+							instances.set(host, {
+								mount: node,
+								cleanup
+							});
+						}
+					}
+				}
+			};
+			/** Coalesce mutation bursts into one sweep per frame. */
+			const schedule = () => {
+				if (scheduled || destroyed) return;
+				scheduled = true;
+				const run = () => {
+					scheduled = false;
+					sweep();
+					for (const listener of [...settledListeners]) try {
+						listener();
+					} catch (error) {
+						warn(`[dshloader.ui] onDomSettled listener threw: ${error instanceof Error ? error.message : String(error)}`);
+					}
+				};
+				if (typeof requestAnimationFrame === "function") requestAnimationFrame(run);
+				else setTimeout(run, 16);
+			};
+			/** Start observing on first use; a single observer serves every anchor. */
+			const ensureObserver = () => {
+				if (observer !== void 0 || destroyed || !hasDom()) return;
+				const root = options.observeRoot ?? document.documentElement;
+				observer = new MutationObserver(schedule);
+				observer.observe(root, {
+					childList: true,
+					subtree: true
+				});
+			};
+			const removeAllFor = (anchor, mountId) => {
+				const byMount = live.get(anchor);
+				if (byMount === void 0) return;
+				const ids = mountId === void 0 ? [...byMount.keys()] : [mountId];
+				for (const id of ids) {
+					const byHost = byMount.get(id);
+					if (byHost === void 0) continue;
+					for (const instance of byHost.values()) teardown(instance);
+					byHost.clear();
+					byMount.delete(id);
+				}
+			};
+			return {
+				defineAnchor(name, spec) {
+					anchors.set(name, spec);
+					ensureObserver();
+					schedule();
+					return () => {
+						removeAllFor(name);
+						anchors.delete(name);
+						mounts.delete(name);
+						live.delete(name);
+						fellBack.delete(name);
+					};
+				},
+				anchors() {
+					return [...anchors.keys()];
+				},
+				hosts(anchor) {
+					const spec = anchors.get(anchor);
+					return spec === void 0 ? [] : resolve(anchor, spec);
+				},
+				onDomSettled(listener) {
+					if (typeof listener !== "function") throw new TypeError("dshloader.ui.onDomSettled: listener must be a function");
+					settledListeners.add(listener);
+					ensureObserver();
+					schedule();
+					return () => {
+						settledListeners.delete(listener);
+					};
+				},
+				mount(anchor, spec) {
+					if (typeof spec.id !== "string" || spec.id.length === 0) throw new TypeError("dshloader.ui.mount: spec.id is required");
+					if (!anchors.has(anchor)) warn(`[dshloader.ui] mount "${spec.id}" targets unknown anchor "${anchor}" — known anchors: ${[...anchors.keys()].join(", ") || "(none)"}. The mount stays registered and activates if the anchor is defined later.`);
+					let specs = mounts.get(anchor);
+					if (specs === void 0) {
+						specs = /* @__PURE__ */ new Map();
+						mounts.set(anchor, specs);
+					}
+					if (specs.has(spec.id)) removeAllFor(anchor, spec.id);
+					specs.set(spec.id, spec);
+					ensureObserver();
+					schedule();
+					return () => {
+						removeAllFor(anchor, spec.id);
+						mounts.get(anchor)?.delete(spec.id);
+					};
+				},
+				mountReact(anchor, spec) {
+					const Component = spec.component;
+					return this.mount(anchor, {
+						id: spec.id,
+						when: spec.when,
+						render: (node, host) => {
+							let root;
+							try {
+								root = (0, react_dom_client.createRoot)(node);
+								root.render(react$1.createElement(Component, { host }));
+							} catch (error) {
+								warn(`[dshloader.ui] React mount "${spec.id}" failed: ${error instanceof Error ? error.message : String(error)}`);
+								return;
+							}
+							return () => {
+								try {
+									root?.unmount();
+								} catch {}
+							};
+						}
+					});
+				},
+				diagnose() {
+					const out = [];
+					for (const [name, spec] of anchors) {
+						const hosts = resolve(name, spec);
+						const specs = mounts.get(name);
+						let liveCount = 0;
+						const byMount = live.get(name);
+						if (byMount !== void 0) for (const byHost of byMount.values()) liveCount += byHost.size;
+						out.push({
+							anchor: name,
+							describe: spec.describe,
+							hosts: hosts.length,
+							usedFallback: fellBack.has(name),
+							mounts: specs === void 0 ? [] : [...specs.keys()],
+							live: liveCount
+						});
+					}
+					return out;
+				},
+				destroy() {
+					destroyed = true;
+					observer?.disconnect();
+					observer = void 0;
+					settledListeners.clear();
+					for (const anchor of [...live.keys()]) removeAllFor(anchor);
+					live.clear();
+					mounts.clear();
+					anchors.clear();
+					fellBack.clear();
+				}
+			};
+		}
+		//#endregion
+		//#region src/ui/style.ts
+		/**
+		* Design tokens and the idempotent stylesheet injector shared by every
+		* dshloader UI component.
+		*
+		* Tokens are the DSH shell's own CSS custom properties, each paired with a
+		* fallback so a component still renders sanely when the shell changes or the
+		* plugin is previewed outside it. The names were harvested from the shell
+		* styling the plugins in this family already rely on; when dsh renames one,
+		* this file is the single place to fix.
+		*
+		* @module @dsh-plugin/dsh-loader/ui/style
+		*/
+		/** `var(--name, fallback)` — a token reference that degrades instead of breaking. */
+		function token(name, fallback) {
+			return `var(${name}, ${fallback})`;
+		}
+		/** The DSH shell tokens dshloader components consume. */
+		const T = {
+			/** Primary body text. */
+			labelPrimary: token("--dsw-alias-label-primary", "#1a1a1a"),
+			/** Secondary / supporting text. */
+			labelSecondary: token("--dsw-alias-label-secondary", "#4a4a4a"),
+			/** Tertiary text (hints, units). */
+			labelTertiary: token("--dsw-alias-label-tertiary", "#8a8a8a"),
+			/** Caption / disabled text. */
+			labelCaption: token("--dsw-alias-label-caption", "#a8a8a8"),
+			/** Page / card background. */
+			bgBase: token("--dsw-alias-bg-base", "#ffffff"),
+			/** Raised surface inside a page (shell layer 1). */
+			bgLayer1: token("--dsw-alias-bg-layer-1", "rgba(127,127,127,0.06)"),
+			/** Subtle raised surface. */
+			bgSubtle: token("--dsw-alias-bg-subtle", "rgba(127,127,127,0.06)"),
+			/** Hover wash for interactive rows. */
+			bgHover: token("--dsw-alias-bg-hover", "rgba(127,127,127,0.10)"),
+			/** Default control border. */
+			border: token("--dsw-alias-border-l2", "#d9d9d9"),
+			/** Lighter divider. */
+			borderSubtle: token("--dsw-alias-border-l1", "#ececec"),
+			/** Primary button fill — the shell's own button colour, NOT the brand accent. */
+			buttonPrimaryFill: token("--dsw-alias-button-primary-fill", "#4f7cff"),
+			/** Text placed on top of {@link buttonPrimaryFill}. */
+			buttonPrimaryForeground: token("--dsw-alias-label-primary-foreground", "#ffffff"),
+			/** Brand accent (checked states, focus rings). */
+			accent: token("--dsw-alias-brand-primary", "#4f7cff"),
+			/** Accent text placed on top of the accent fill. */
+			accentOn: token("--dsw-alias-brand-on-primary", "#ffffff"),
+			/** Destructive accent. */
+			danger: token("--dsw-alias-status-danger", "#e5484d"),
+			/** Success state (saved confirmations). */
+			success: token("--dsw-alias-state-success-primary", "#2e7d32"),
+			/** Monospace stack for code / paths. */
+			fontCode: token("--ds-font-family-code", "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace")
+		};
+		/**
+		* Shared control geometry so every dshloader control lines up.
+		*
+		* The values mirror the shell's native settings-page metrics (as established by
+		* dsh-auxiliary's section): pill-shaped primary buttons at height 32, inputs at
+		* height 28 with radius 6, cards with radius 10 and padding 16.
+		*/
+		const G = {
+			/** Control height for inputs / selects. */
+			controlHeight: 28,
+			/** Compact control height. */
+			controlHeightSm: 24,
+			/** Primary button height (the shell's buttons run taller than inputs). */
+			buttonHeight: 32,
+			/** Standard corner radius (inputs). */
+			radius: 6,
+			/** Card corner radius. */
+			cardRadius: 10,
+			/** Pill radius (primary buttons, switches, chips). */
+			radiusPill: 999,
+			/** Horizontal padding inside an input. */
+			padX: 8,
+			/** Horizontal padding inside a primary button. */
+			padXButton: 14,
+			/** Standard row gap. */
+			gap: 8,
+			/** Base font size. */
+			fontSize: 13,
+			/** Small font size (descriptions). */
+			fontSizeSm: 12
+		};
+		/**
+		* Inject a stylesheet once, tagged with the DSH client-module ownership
+		* attributes (`data-plugin` / `data-plugin-css`) so the HMR driver can reclaim
+		* it. Calling this repeatedly with the same `cssId` is a no-op.
+		*
+		* @param pluginId - owning plugin id (package name), for `data-plugin`.
+		* @param cssId - stylesheet id within the plugin, e.g. `'ui/components.css'`.
+		* @param css - the stylesheet text.
+		* @returns a disposer removing the tag, for callers that want one.
+		*/
+		function injectStyle(pluginId, cssId, css) {
+			if (typeof document === "undefined") return () => {};
+			const tagId = `${pluginId}/${cssId}`;
+			const selector = `style[data-plugin-css="${tagId}"]`;
+			if (document.querySelector(selector) !== null) return () => {};
+			const style = document.createElement("style");
+			style.dataset.plugin = pluginId;
+			style.dataset.pluginCss = tagId;
+			style.textContent = css;
+			document.head.appendChild(style);
+			return () => {
+				if (style.parentNode !== null) style.parentNode.removeChild(style);
+			};
+		}
+		/** The class-name prefix every dshloader UI class carries. */
+		const CX = "dshl";
+		/** Join truthy class names. */
+		function cx(...parts) {
+			return parts.filter(Boolean).join(" ");
+		}
+		//#endregion
+		//#region node_modules/@icon-park/react/es/runtime/index.js
+		var _excluded = [
+			"size",
+			"strokeWidth",
+			"strokeLinecap",
+			"strokeLinejoin",
+			"theme",
+			"fill",
+			"className",
+			"spin"
+		];
+		function ownKeys(object, enumerableOnly) {
+			var keys = Object.keys(object);
+			if (Object.getOwnPropertySymbols) {
+				var symbols = Object.getOwnPropertySymbols(object);
+				enumerableOnly && (symbols = symbols.filter(function(sym) {
+					return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+				})), keys.push.apply(keys, symbols);
+			}
+			return keys;
+		}
+		function _objectSpread(target) {
+			for (var i = 1; i < arguments.length; i++) {
+				var source = null != arguments[i] ? arguments[i] : {};
+				i % 2 ? ownKeys(Object(source), !0).forEach(function(key) {
+					_defineProperty(target, key, source[key]);
+				}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+					Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+				});
+			}
+			return target;
+		}
+		function _defineProperty(obj, key, value) {
+			if (key in obj) Object.defineProperty(obj, key, {
+				value,
+				enumerable: true,
+				configurable: true,
+				writable: true
+			});
+			else obj[key] = value;
+			return obj;
+		}
+		function _objectWithoutProperties(source, excluded) {
+			if (source == null) return {};
+			var target = _objectWithoutPropertiesLoose(source, excluded);
+			var key, i;
+			if (Object.getOwnPropertySymbols) {
+				var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+				for (i = 0; i < sourceSymbolKeys.length; i++) {
+					key = sourceSymbolKeys[i];
+					if (excluded.indexOf(key) >= 0) continue;
+					if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+					target[key] = source[key];
+				}
+			}
+			return target;
+		}
+		function _objectWithoutPropertiesLoose(source, excluded) {
+			if (source == null) return {};
+			var target = {};
+			var sourceKeys = Object.keys(source);
+			var key, i;
+			for (i = 0; i < sourceKeys.length; i++) {
+				key = sourceKeys[i];
+				if (excluded.indexOf(key) >= 0) continue;
+				target[key] = source[key];
+			}
+			return target;
+		}
+		var DEFAULT_ICON_CONFIGS = {
+			size: "1em",
+			strokeWidth: 4,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			rtl: false,
+			theme: "outline",
+			colors: {
+				outline: {
+					fill: "#333",
+					background: "transparent"
+				},
+				filled: {
+					fill: "#333",
+					background: "#FFF"
+				},
+				twoTone: {
+					fill: "#333",
+					twoTone: "#2F88FF"
+				},
+				multiColor: {
+					outStrokeColor: "#333",
+					outFillColor: "#2F88FF",
+					innerStrokeColor: "#FFF",
+					innerFillColor: "#43CCF8"
+				}
+			},
+			prefix: "i"
+		};
+		function guid() {
+			return "icon-" + ((1 + Math.random()) * 4294967296 | 0).toString(16).substring(1);
+		}
+		function IconConverter(id, icon, config) {
+			var fill = typeof icon.fill === "string" ? [icon.fill] : icon.fill || [];
+			var colors = [];
+			switch (icon.theme || config.theme) {
+				case "outline":
+					colors.push(typeof fill[0] === "string" ? fill[0] : "currentColor");
+					colors.push("none");
+					colors.push(typeof fill[0] === "string" ? fill[0] : "currentColor");
+					colors.push("none");
+					break;
+				case "filled":
+					colors.push(typeof fill[0] === "string" ? fill[0] : "currentColor");
+					colors.push(typeof fill[0] === "string" ? fill[0] : "currentColor");
+					colors.push("#FFF");
+					colors.push("#FFF");
+					break;
+				case "two-tone":
+					colors.push(typeof fill[0] === "string" ? fill[0] : "currentColor");
+					colors.push(typeof fill[1] === "string" ? fill[1] : config.colors.twoTone.twoTone);
+					colors.push(typeof fill[0] === "string" ? fill[0] : "currentColor");
+					colors.push(typeof fill[1] === "string" ? fill[1] : config.colors.twoTone.twoTone);
+					break;
+				case "multi-color":
+					colors.push(typeof fill[0] === "string" ? fill[0] : "currentColor");
+					colors.push(typeof fill[1] === "string" ? fill[1] : config.colors.multiColor.outFillColor);
+					colors.push(typeof fill[2] === "string" ? fill[2] : config.colors.multiColor.innerStrokeColor);
+					colors.push(typeof fill[3] === "string" ? fill[3] : config.colors.multiColor.innerFillColor);
+			}
+			return {
+				size: icon.size || config.size,
+				strokeWidth: icon.strokeWidth || config.strokeWidth,
+				strokeLinecap: icon.strokeLinecap || config.strokeLinecap,
+				strokeLinejoin: icon.strokeLinejoin || config.strokeLinejoin,
+				colors,
+				id
+			};
+		}
+		var IconContext = /*#__PURE__*/ (0, react.createContext)(DEFAULT_ICON_CONFIGS);
+		var IconProvider = IconContext.Provider;
+		function IconWrapper(name, rtl, render) {
+			return function(props) {
+				var size = props.size, strokeWidth = props.strokeWidth, strokeLinecap = props.strokeLinecap, strokeLinejoin = props.strokeLinejoin, theme = props.theme, fill = props.fill, className = props.className, spin = props.spin, extra = _objectWithoutProperties(props, _excluded);
+				var ICON_CONFIGS = (0, react.useContext)(IconContext);
+				var svgProps = IconConverter((0, react.useMemo)(guid, []), {
+					size,
+					strokeWidth,
+					strokeLinecap,
+					strokeLinejoin,
+					theme,
+					fill
+				}, ICON_CONFIGS);
+				var cls = [ICON_CONFIGS.prefix + "-icon"];
+				cls.push(ICON_CONFIGS.prefix + "-icon-" + name);
+				if (rtl && ICON_CONFIGS.rtl) cls.push(ICON_CONFIGS.prefix + "-icon-rtl");
+				if (spin) cls.push(ICON_CONFIGS.prefix + "-icon-spin");
+				if (className) cls.push(className);
+				return /*#__PURE__*/ react.default.createElement("span", _objectSpread(_objectSpread({}, extra), {}, { className: cls.join(" ") }), render(svgProps));
+			};
+		}
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Add.js
+		var Add_default = IconWrapper("add", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("rect", {
+				x: "6",
+				y: "6",
+				width: "36",
+				height: "36",
+				rx: "3",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 16V32",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M16 24L32 24",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Alarm.js
+		var Alarm_default = IconWrapper("alarm", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M14 25C14 19.4772 18.4772 15 24 15C29.5228 15 34 19.4772 34 25V41H14V25Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 5V8",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M35.8918 9.32823L33.9634 11.6264",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M42.2187 20.2873L39.2642 20.8083",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M5.78116 20.2874L8.73558 20.8083",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M12.1086 9.32802L14.037 11.6262",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M6 41H43",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/AllApplication.js
+		var AllApplication_default = IconWrapper("all-application", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M18 6H8C6.89543 6 6 6.89543 6 8V18C6 19.1046 6.89543 20 8 20H18C19.1046 20 20 19.1046 20 18V8C20 6.89543 19.1046 6 18 6Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M18 28H8C6.89543 28 6 28.8954 6 30V40C6 41.1046 6.89543 42 8 42H18C19.1046 42 20 41.1046 20 40V30C20 28.8954 19.1046 28 18 28Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M40 6H30C28.8954 6 28 6.89543 28 8V18C28 19.1046 28.8954 20 30 20H40C41.1046 20 42 19.1046 42 18V8C42 6.89543 41.1046 6 40 6Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M40 28H30C28.8954 28 28 28.8954 28 30V40C28 41.1046 28.8954 42 30 42H40C41.1046 42 42 41.1046 42 40V30C42 28.8954 41.1046 28 40 28Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Attention.js
+		var Attention_default = IconWrapper("attention", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 44C29.5228 44 34.5228 41.7614 38.1421 38.1421C41.7614 34.5228 44 29.5228 44 24C44 18.4772 41.7614 13.4772 38.1421 9.85786C34.5228 6.23858 29.5228 4 24 4C18.4772 4 13.4772 6.23858 9.85786 9.85786C6.23858 13.4772 4 18.4772 4 24C4 29.5228 6.23858 34.5228 9.85786 38.1421C13.4772 41.7614 18.4772 44 24 44Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M24 37C25.3807 37 26.5 35.8807 26.5 34.5C26.5 33.1193 25.3807 32 24 32C22.6193 32 21.5 33.1193 21.5 34.5C21.5 35.8807 22.6193 37 24 37Z",
+				fill: props.colors[2]
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 12V28",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Back.js
+		var Back_default = IconWrapper("back", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M44 40.8361C39.1069 34.8632 34.7617 31.4739 30.9644 30.6682C27.1671 29.8625 23.5517 29.7408 20.1182 30.303V41L4 23.5453L20.1182 7V17.167C26.4667 17.2172 31.8638 19.4948 36.3095 24C40.7553 28.5052 43.3187 34.1172 44 40.8361Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Branch.js
+		var Branch_default = IconWrapper("branch", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M40 28C42.2091 28 44 26.2091 44 24C44 21.7909 42.2091 20 40 20C37.7909 20 36 21.7909 36 24C36 26.2091 37.7909 28 40 28Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M9 12C11.2091 12 13 10.2091 13 8C13 5.79086 11.2091 4 9 4C6.79086 4 5 5.79086 5 8C5 10.2091 6.79086 12 9 12Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M9 44C11.2091 44 13 42.2091 13 40C13 37.7909 11.2091 36 9 36C6.79086 36 5 37.7909 5 40C5 42.2091 6.79086 44 9 44Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M9 12V36V24.0083H36",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Browser.js
+		var Browser_default = IconWrapper("browser", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M42 18V40C42 41.1046 41.1046 42 40 42H8C6.89543 42 6 41.1046 6 40V18",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M6 8C6 6.89543 6.89543 6 8 6H40C41.1046 6 42 6.89543 42 8V18H6V8Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z",
+				fill: props.colors[2]
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M18 14C19.1046 14 20 13.1046 20 12C20 10.8954 19.1046 10 18 10C16.8954 10 16 10.8954 16 12C16 13.1046 16.8954 14 18 14Z",
+				fill: props.colors[2]
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M24 14C25.1046 14 26 13.1046 26 12C26 10.8954 25.1046 10 24 10C22.8954 10 22 10.8954 22 12C22 13.1046 22.8954 14 24 14Z",
+				fill: props.colors[2]
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Check.js
+		var Check_default = IconWrapper("check", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M43 11L16.875 37L5 25.1818",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/CheckSmall.js
+		var CheckSmall_default = IconWrapper("check-small", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M10 24L20 34L40 14",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Close.js
+		var Close_default = IconWrapper("close", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M8 8L40 40",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M8 40L40 8",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/CloseSmall.js
+		var CloseSmall_default = IconWrapper("close-small", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M14 14L34 34",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M14 34L34 14",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Code.js
+		var Code_default = IconWrapper("code", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M16 13L4 25.4322L16 37",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M32 13L44 25.4322L32 37",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M28 4L21 44",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Config.js
+		var Config_default = IconWrapper("config", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 4L18 10H10V18L4 24L10 30V38H18L24 44L30 38H38V30L44 24L38 18V10H30L24 4Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 30C27.3137 30 30 27.3137 30 24C30 20.6863 27.3137 18 24 18C20.6863 18 18 20.6863 18 24C18 27.3137 20.6863 30 24 30Z",
+				fill: props.colors[3],
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Copy.js
+		var Copy_default = IconWrapper("copy", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M13 12.4316V7.8125C13 6.2592 14.2592 5 15.8125 5H40.1875C41.7408 5 43 6.2592 43 7.8125V32.1875C43 33.7408 41.7408 35 40.1875 35H35.5163",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M32.1875 13H7.8125C6.2592 13 5 14.2592 5 15.8125V40.1875C5 41.7408 6.2592 43 7.8125 43H32.1875C33.7408 43 35 41.7408 35 40.1875V15.8125C35 14.2592 33.7408 13 32.1875 13Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Delete.js
+		var Delete_default = IconWrapper("delete", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M9 10V44H39V10H9Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M20 20V33",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M28 20V33",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M4 10H44",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M16 10L19.289 4H28.7771L32 10H16Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Diamond.js
+		var Diamond_default = IconWrapper("diamond", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M10.6364 5H37.3636L45 18.3L24 43L3 18.3L10.6364 5Z",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M10.6362 5L23.9999 43L37.3635 5",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M3 18.3H45",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M15.4092 18.3L24.0001 5L32.591 18.3",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Down.js
+		var Down_default = IconWrapper("down", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M36 18L24 30L12 18",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Download.js
+		var Download_default = IconWrapper("download", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M6 24.0083V42H42V24",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M33 23L24 32L15 23",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M23.9917 6V32",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Edit.js
+		var Edit_default = IconWrapper("edit", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M7 42H43",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M11 26.7199V34H18.3172L39 13.3081L31.6951 6L11 26.7199Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Error.js
+		var Error_default = IconWrapper("error", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M6 11L11 6L24 19L37 6L42 11L29 24L42 37L37 42L24 29L11 42L6 37L19 24L6 11Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/FileCode.js
+		var FileCode_default = IconWrapper("file-code", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M10 44H38C39.1046 44 40 43.1046 40 42V14H30V4H10C8.89543 4 8 4.89543 8 6V42C8 43.1046 8.89543 44 10 44Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M30 4L40 14",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M27 24L32 29L27 34",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M21 24L16 29L21 34",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/FileText.js
+		var FileText_default = IconWrapper("file-text", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M10 44H38C39.1046 44 40 43.1046 40 42V14H30V4H10C8.89543 4 8 4.89543 8 6V42C8 43.1046 8.89543 44 10 44Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M30 4L40 14",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 22V36",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M18 22H24L30 22",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Folder.js
+		var Folder_default = IconWrapper("folder", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M7 6C7 4.89543 7.89543 4 9 4H39C40.1046 4 41 4.89543 41 6V42C41 43.1046 40.1046 44 39 44H9C7.89543 44 7 43.1046 7 42V6Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M16 29H20",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M16 35H26",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M8 5C8 5 11.7647 18 24 18C36.2353 18 40 5 40 5",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("circle", {
+				cx: "24",
+				cy: "18",
+				r: "4",
+				fill: props.colors[3],
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M15 4H9C7.89543 4 7 4.89543 7 6V12",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M33 4H39C40.1046 4 41 4.89543 41 6V12",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/FolderOpen.js
+		var FolderOpen_default = IconWrapper("folder-open", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M4 9V41L9 21H39.5V15C39.5 13.8954 38.6046 13 37.5 13H24L19 7H6C4.89543 7 4 7.89543 4 9Z",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M40 41L44 21H8.8125L4 41H40Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/FullScreen.js
+		var FullScreen_default = IconWrapper("full-screen", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M33 6H42V15",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M42 33V42H33",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M15 42H6V33",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M6 15V6H15",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Globe.js
+		var Globe_default = IconWrapper("globe", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M37.8261 4C41.6276 7.58886 44 12.6753 44 18.3158C44 29.1871 35.1871 38 24.3158 38C18.6753 38 13.5889 35.6276 10 31.8261",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M24 32C31.732 32 38 25.732 38 18C38 10.268 31.732 4 24 4C16.268 4 10 10.268 10 18C10 25.732 16.268 32 24 32Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 38V44",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M18 44H30",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Help.js
+		var Help_default = IconWrapper("help", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 44C29.5228 44 34.5228 41.7614 38.1421 38.1421C41.7614 34.5228 44 29.5228 44 24C44 18.4772 41.7614 13.4772 38.1421 9.85786C34.5228 6.23858 29.5228 4 24 4C18.4772 4 13.4772 6.23858 9.85786 9.85786C6.23858 13.4772 4 18.4772 4 24C4 29.5228 6.23858 34.5228 9.85786 38.1421C13.4772 41.7614 18.4772 44 24 44Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 28.6248V24.6248C27.3137 24.6248 30 21.9385 30 18.6248C30 15.3111 27.3137 12.6248 24 12.6248C20.6863 12.6248 18 15.3111 18 18.6248",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M24 37.6248C25.3807 37.6248 26.5 36.5055 26.5 35.1248C26.5 33.7441 25.3807 32.6248 24 32.6248C22.6193 32.6248 21.5 33.7441 21.5 35.1248C21.5 36.5055 22.6193 37.6248 24 37.6248Z",
+				fill: props.colors[2]
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Info.js
+		var Info_default = IconWrapper("info", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 44C29.5228 44 34.5228 41.7614 38.1421 38.1421C41.7614 34.5228 44 29.5228 44 24C44 18.4772 41.7614 13.4772 38.1421 9.85786C34.5228 6.23858 29.5228 4 24 4C18.4772 4 13.4772 6.23858 9.85786 9.85786C6.23858 13.4772 4 18.4772 4 24C4 29.5228 6.23858 34.5228 9.85786 38.1421C13.4772 41.7614 18.4772 44 24 44Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M24 11C25.3807 11 26.5 12.1193 26.5 13.5C26.5 14.8807 25.3807 16 24 16C22.6193 16 21.5 14.8807 21.5 13.5C21.5 12.1193 22.6193 11 24 11Z",
+				fill: props.colors[2]
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24.5 34V20H23.5H22.5",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M21 34H28",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Left.js
+		var Left_default = IconWrapper("left", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M31 36L19 24L31 12",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Link.js
+		var Link_default = IconWrapper("link", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24.7073 9.56521L9.85801 24.4145C6.34329 27.9292 6.34329 33.6277 9.85801 37.1424V37.1424C13.3727 40.6571 19.0712 40.6571 22.5859 37.1424L40.2636 19.4647C42.6067 17.1216 42.6067 13.3226 40.2636 10.9794V10.9794C37.9205 8.63628 34.1215 8.63628 31.7783 10.9794L14.1007 28.6571C12.9291 29.8287 12.9291 31.7282 14.1007 32.8997V32.8997C15.2722 34.0713 17.1717 34.0713 18.3433 32.8997L33.1925 18.0505",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Loading.js
+		var Loading_default = IconWrapper("loading", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M4 24C4 35.0457 12.9543 44 24 44V44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M36 24C36 17.3726 30.6274 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36V36",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Lock.js
+		var Lock_default = IconWrapper("lock", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("rect", {
+				x: "6",
+				y: "22",
+				width: "36",
+				height: "22",
+				rx: "2",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M14 22V14C14 8.47715 18.4772 4 24 4C29.5228 4 34 8.47715 34 14V22",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 30V36",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/More.js
+		var More_default = IconWrapper("more", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("circle", {
+				cx: "12",
+				cy: "24",
+				r: "3",
+				fill: props.colors[0]
+			}), /*#__PURE__*/ react.default.createElement("circle", {
+				cx: "24",
+				cy: "24",
+				r: "3",
+				fill: props.colors[0]
+			}), /*#__PURE__*/ react.default.createElement("circle", {
+				cx: "36",
+				cy: "24",
+				r: "3",
+				fill: props.colors[0]
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Pause.js
+		var Pause_default = IconWrapper("pause", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M16 12V36",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M32 12V36",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Play.js
+		var Play_default = IconWrapper("play", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M20 24V17.0718L26 20.5359L32 24L26 27.4641L20 30.9282V24Z",
+				fill: props.colors[3],
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/PreviewClose.js
+		var PreviewClose_default = IconWrapper("preview-close", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M6 16C6.63472 17.2193 7.59646 18.3504 8.82276 19.3554C12.261 22.1733 17.779 24 24 24C30.221 24 35.739 22.1733 39.1772 19.3554C40.4035 18.3504 41.3653 17.2193 42 16",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M28.9775 24L31.048 31.7274",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M37.3535 21.3536L43.0103 27.0104",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M5.00004 27.0103L10.6569 21.3534",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M16.9278 31.7276L18.9983 24.0001",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/PreviewOpen.js
+		var PreviewOpen_default = IconWrapper("preview-open", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 36C35.0457 36 44 24 44 24C44 24 35.0457 12 24 12C12.9543 12 4 24 4 24C4 24 12.9543 36 24 36Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 29C26.7614 29 29 26.7614 29 24C29 21.2386 26.7614 19 24 19C21.2386 19 19 21.2386 19 24C19 26.7614 21.2386 29 24 29Z",
+				fill: props.colors[3],
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Redo.js
+		var Redo_default = IconWrapper("redo", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M36.7279 36.7279C33.4706 39.9853 28.9706 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C28.9706 6 33.4706 8.01472 36.7279 11.2721C38.3859 12.9301 42 17 42 17",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M42 8V17H33",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Refresh.js
+		var Refresh_default = IconWrapper("refresh", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M42 8V24",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M6 24L6 40",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M42 24C42 14.0589 33.9411 6 24 6C18.9145 6 14.3216 8.10896 11.0481 11.5M6 24C6 33.9411 14.0589 42 24 42C28.8556 42 33.2622 40.0774 36.5 36.9519",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Right.js
+		var Right_default = IconWrapper("right", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M19 12L31 24L19 36",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Save.js
+		var Save_default = IconWrapper("save", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M6 9C6 7.34315 7.34315 6 9 6H34.2814L42 13.2065V39C42 40.6569 40.6569 42 39 42H9C7.34315 42 6 40.6569 6 39V9Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M24.0083 6L24 13.3846C24 13.7245 23.5523 14 23 14H15C14.4477 14 14 13.7245 14 13.3846L14 6",
+				fill: props.colors[3]
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24.0083 6L24 13.3846C24 13.7245 23.5523 14 23 14H15C14.4477 14 14 13.7245 14 13.3846L14 6H24.0083Z",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M9 6H34.2814",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M14 26H34",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M14 34H24.0083",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Search.js
+		var Search_default = IconWrapper("search", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M21 38C30.3888 38 38 30.3888 38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M26.657 14.3431C25.2093 12.8954 23.2093 12 21.0001 12C18.791 12 16.791 12.8954 15.3433 14.3431",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M33.2216 33.2217L41.7069 41.707",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Setting.js
+		var Setting_default = IconWrapper("setting", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M36.686 15.171C37.9364 16.9643 38.8163 19.0352 39.2147 21.2727H44V26.7273H39.2147C38.8163 28.9648 37.9364 31.0357 36.686 32.829L40.0706 36.2137L36.2137 40.0706L32.829 36.686C31.0357 37.9364 28.9648 38.8163 26.7273 39.2147V44H21.2727V39.2147C19.0352 38.8163 16.9643 37.9364 15.171 36.686L11.7863 40.0706L7.92939 36.2137L11.314 32.829C10.0636 31.0357 9.18372 28.9648 8.78533 26.7273H4V21.2727H8.78533C9.18372 19.0352 10.0636 16.9643 11.314 15.171L7.92939 11.7863L11.7863 7.92939L15.171 11.314C16.9643 10.0636 19.0352 9.18372 21.2727 8.78533V4H26.7273V8.78533C28.9648 9.18372 31.0357 10.0636 32.829 11.314L36.2137 7.92939L40.0706 11.7863L36.686 15.171Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 29C26.7614 29 29 26.7614 29 24C29 21.2386 26.7614 19 24 19C21.2386 19 19 21.2386 19 24C19 26.7614 21.2386 29 24 29Z",
+				fill: props.colors[3],
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/SettingTwo.js
+		var SettingTwo_default = IconWrapper("setting-two", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M18.2838 43.1713C14.9327 42.1736 11.9498 40.3213 9.58787 37.867C10.469 36.8227 11 35.4734 11 34.0001C11 30.6864 8.31371 28.0001 5 28.0001C4.79955 28.0001 4.60139 28.01 4.40599 28.0292C4.13979 26.7277 4 25.3803 4 24.0001C4 21.9095 4.32077 19.8938 4.91579 17.9995C4.94381 17.9999 4.97188 18.0001 5 18.0001C8.31371 18.0001 11 15.3138 11 12.0001C11 11.0488 10.7786 10.1493 10.3846 9.35011C12.6975 7.1995 15.5205 5.59002 18.6521 4.72314C19.6444 6.66819 21.6667 8.00013 24 8.00013C26.3333 8.00013 28.3556 6.66819 29.3479 4.72314C32.4795 5.59002 35.3025 7.1995 37.6154 9.35011C37.2214 10.1493 37 11.0488 37 12.0001C37 15.3138 39.6863 18.0001 43 18.0001C43.0281 18.0001 43.0562 17.9999 43.0842 17.9995C43.6792 19.8938 44 21.9095 44 24.0001C44 25.3803 43.8602 26.7277 43.594 28.0292C43.3986 28.01 43.2005 28.0001 43 28.0001C39.6863 28.0001 37 30.6864 37 34.0001C37 35.4734 37.531 36.8227 38.4121 37.867C36.0502 40.3213 33.0673 42.1736 29.7162 43.1713C28.9428 40.752 26.676 39.0001 24 39.0001C21.324 39.0001 19.0572 40.752 18.2838 43.1713Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 31C27.866 31 31 27.866 31 24C31 20.134 27.866 17 24 17C20.134 17 17 20.134 17 24C17 27.866 20.134 31 24 31Z",
+				fill: props.colors[3],
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Sort.js
+		var Sort_default = IconWrapper("sort", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 42L15 29H33L24 42Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 6L15 19H33L24 6Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Success.js
+		var Success_default = IconWrapper("success", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 4L29.2533 7.83204L35.7557 7.81966L37.7533 14.0077L43.0211 17.8197L41 24L43.0211 30.1803L37.7533 33.9923L35.7557 40.1803L29.2533 40.168L24 44L18.7467 40.168L12.2443 40.1803L10.2467 33.9923L4.97887 30.1803L7 24L4.97887 17.8197L10.2467 14.0077L12.2443 7.81966L18.7467 7.83204L24 4Z",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M17 24L22 29L32 19",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Terminal.js
+		var Terminal_default = IconWrapper("terminal", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("rect", {
+				x: "4",
+				y: "8",
+				width: "40",
+				height: "32",
+				rx: "2",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M12 18L19 24L12 30",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M23 32H36",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Undo.js
+		var Undo_default = IconWrapper("undo", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M11.2721 36.7279C14.5294 39.9853 19.0294 42 24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6C19.0294 6 14.5294 8.01472 11.2721 11.2721C9.61407 12.9301 6 17 6 17",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M6 9V17H14",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Unlock.js
+		var Unlock_default = IconWrapper("unlock", true, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("rect", {
+				x: "7",
+				y: "22.0476",
+				width: "34",
+				height: "22",
+				rx: "2",
+				fill: props.colors[1],
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M14 22V14.0047C13.9948 8.87022 17.9227 4.56718 23.0859 4.05117C28.249 3.53516 32.9673 6.97408 34 12.0059",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M24 30V36",
+				stroke: props.colors[2],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Up.js
+		var Up_default = IconWrapper("up", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M13 30L25 18L37 30",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}));
+		});
+		//#endregion
+		//#region node_modules/@icon-park/react/es/icons/Upload.js
+		var Upload_default = IconWrapper("upload", false, function(props) {
+			return /*#__PURE__*/ react.default.createElement("svg", {
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 48 48",
+				fill: "none"
+			}, /*#__PURE__*/ react.default.createElement("mask", {
+				id: props.id + "7070702c",
+				maskUnits: "userSpaceOnUse",
+				x: "0",
+				y: "0",
+				width: "48",
+				height: "48",
+				style: { maskType: "alpha" }
+			}, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M48 0H0V48H48V0Z",
+				fill: props.colors[2]
+			})), /*#__PURE__*/ react.default.createElement("g", { mask: "url(#" + props.id + "7070702c)" }, /*#__PURE__*/ react.default.createElement("path", {
+				d: "M6 24.0083V42H42V24",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M33 15L24 6L15 15",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			}), /*#__PURE__*/ react.default.createElement("path", {
+				d: "M23.9917 32V6",
+				stroke: props.colors[0],
+				strokeWidth: props.strokeWidth,
+				strokeLinecap: props.strokeLinecap,
+				strokeLinejoin: props.strokeLinejoin
+			})));
+		});
+		//#endregion
+		//#region src/ui/icons.tsx
+		/**
+		* The curated dshloader ICON SET.
+		*
+		* Sourced from `@icon-park/react` so no plugin hand-maintains SVG path data
+		* again (dsh-better-sidebar's `src/client/icons.tsx` keeps 10 icons by hand
+		* today; every entry here replaces one of those or a
+		* `@deepseek-ai/dsh-client-ui-primitives` icon import).
+		*
+		* WHY A SUBSET, NOT `export *`: IconPark ships ~2000 icons. dshloader's client
+		* bundle is materialised through the DSH client module table, and a runtime
+		* module boundary cannot be tree-shaken — re-exporting everything would put all
+		* ~2000 icons into one bundle every plugin pays for. Naming a subset keeps the
+		* cost proportional (only the icons listed here are bundled), and a plugin that
+		* needs an exotic glyph can still depend on `@icon-park/react` directly.
+		*
+		* Adding an icon: import it below and add it to the export block. That is the
+		* only change needed — no SVG, no viewBox, no stroke bookkeeping.
+		*
+		* @module @dsh-plugin/dsh-loader/ui/icons
+		*/
+		/**
+		* The curated set, grouped by purpose. Names are intent-based (`Settings`,
+		* `Warning`) rather than IconPark's raw names so a glyph can be swapped without
+		* touching consumers.
+		*/
+		const Icons = {
+			ChevronUp: Up_default,
+			ChevronDown: Down_default,
+			ChevronLeft: Left_default,
+			ChevronRight: Right_default,
+			Back: Back_default,
+			Expand: FullScreen_default,
+			More: More_default,
+			Sort: Sort_default,
+			Add: Add_default,
+			Edit: Edit_default,
+			Write: IconWrapper("write", true, function(props) {
+				return /*#__PURE__*/ react.default.createElement("svg", {
+					width: props.size,
+					height: props.size,
+					viewBox: "0 0 48 48",
+					fill: "none"
+				}, /*#__PURE__*/ react.default.createElement("path", {
+					d: "M5.32497 43.4996L13.81 43.4998L44.9227 12.3871L36.4374 3.90186L5.32471 35.0146L5.32497 43.4996Z",
+					fill: props.colors[1],
+					stroke: props.colors[0],
+					strokeWidth: props.strokeWidth,
+					strokeLinejoin: props.strokeLinejoin
+				}), /*#__PURE__*/ react.default.createElement("path", {
+					d: "M27.9521 12.3872L36.4374 20.8725",
+					stroke: props.colors[0],
+					strokeWidth: props.strokeWidth,
+					strokeLinecap: props.strokeLinecap,
+					strokeLinejoin: props.strokeLinejoin
+				}));
+			}),
+			Delete: Delete_default,
+			Copy: Copy_default,
+			Save: Save_default,
+			Search: Search_default,
+			Refresh: Refresh_default,
+			Download: Download_default,
+			Upload: Upload_default,
+			Undo: Undo_default,
+			Redo: Redo_default,
+			Play: Play_default,
+			Stop: Pause_default,
+			Close: Close_default,
+			CloseSmall: CloseSmall_default,
+			Check: Check_default,
+			CheckSmall: CheckSmall_default,
+			Info: Info_default,
+			Warning: Attention_default,
+			Error: Error_default,
+			Success: Success_default,
+			Loading: Loading_default,
+			Help: Help_default,
+			Settings: Setting_default,
+			SettingsAlt: SettingTwo_default,
+			Config: Config_default,
+			Terminal: Terminal_default,
+			Code: Code_default,
+			FileCode: FileCode_default,
+			Doc: FileText_default,
+			Folder: Folder_default,
+			FolderOpen: FolderOpen_default,
+			GitBranch: Branch_default,
+			Link: Link_default,
+			Web: Globe_default,
+			Browser: Browser_default,
+			Lock: Lock_default,
+			Unlock: Unlock_default,
+			EyeOpen: PreviewOpen_default,
+			EyeClosed: PreviewClose_default,
+			Alarm: Alarm_default,
+			Diamond: Diamond_default,
+			Apps: AllApplication_default
+		};
+		/** Every curated icon name, for pickers and tests. */
+		const ICON_NAMES = Object.keys(Icons);
+		/**
+		* Look one icon up by name. Unknown names resolve to `Help` rather than
+		* throwing, so a stale name degrades to a visible placeholder.
+		*/
+		function icon(name) {
+			return Icons[name] ?? Icons.Help;
+		}
+		/**
+		* `<Icon name="Settings" />` — the ergonomic form for data-driven icon choices
+		* (menu descriptors, settings rows) where a component reference is awkward.
+		*/
+		function Icon({ name, ...rest }) {
+			const Component = icon(name);
+			return react$1.createElement(Component, rest);
+		}
+		/** The icon defaults dshloader components render with. */
+		const DSH_ICON_CONFIG = {
+			...DEFAULT_ICON_CONFIGS,
+			size: G.fontSize + 3,
+			strokeWidth: 3,
+			theme: "outline",
+			colors: {
+				...DEFAULT_ICON_CONFIGS.colors,
+				outline: {
+					fill: "currentColor",
+					background: "transparent"
+				}
+			}
+		};
+		/**
+		* Wrap a subtree so every dshloader icon inside inherits the DSH defaults
+		* (outline theme, `currentColor` fill, matching size). Plugins that render
+		* dshloader components inside their own React tree should mount this once near
+		* the root; the components in `./components.js` do not require it, but they look
+		* consistent with the rest of DSH when it is present.
+		*/
+		function DshIconProvider({ children }) {
+			return react$1.createElement(IconProvider, { value: DSH_ICON_CONFIG }, children);
+		}
+		//#endregion
+		//#region src/ui/menu.tsx
+		/** Whether the platform primitive is already known to be missing. */
+		let platformMissing = false;
+		/**
+		* The stable menu surface for dshloader consumers.
+		*
+		* Forwards every prop verbatim to the platform primitive — this wrapper's job
+		* is ISOLATION (one import site, hand-owned types), not behaviour change. When
+		* the platform evolves, adaptation code goes here and consumers stay put.
+		*/
+		function DshMenu(props) {
+			if (platformMissing) return null;
+			try {
+				return (0, _deepseek_ai_dsh_client_ui_primitives.Menu)(props);
+			} catch (error) {
+				platformMissing = true;
+				console.warn(`[dshloader] DshMenu: the platform menu primitive failed (${error instanceof Error ? error.message : String(error)}); rendering nothing. Update src/ui/menu.tsx to adapt to the new platform contract.`);
+				return null;
+			}
+		}
+		//#endregion
+		//#region src/ui/components.tsx
+		/**
+		* The dshloader BASE CONTROLS.
+		*
+		* A small, deliberately unopinionated control set so every plugin in this family
+		* renders the same design language instead of each hand-rolling inline styles
+		* (dsh-network-settings alone carries ~40 inline style objects today, and
+		* dsh-auxiliary / dsh-code-review each maintain their own button and input
+		* looks).
+		*
+		* Design rules:
+		*  - Styling is ONE injected stylesheet with `dshl-` prefixed classes, tagged
+		*    with the DSH `data-plugin` / `data-plugin-css` ownership attributes so HMR
+		*    can reclaim it. No CSS Modules, so consumers need no build-time CSS setup.
+		*  - Every colour is a DSH token with a fallback (see `./style.js`), so controls
+		*    follow the shell's theme, including dark mode, with no JS theme plumbing.
+		*  - Icons come from the curated set and inherit `currentColor`.
+		*  - Every control forwards native props and `className`, so a plugin can always
+		*    escape the defaults without forking the component.
+		*
+		* @module @dsh-plugin/dsh-loader/ui/components
+		*/
+		/** Owner id used on the injected `<style>` tag. */
+		const OWNER = "@dsh-plugin/dsh-loader";
+		/** The single stylesheet backing every control. */
+		const CSS = `
+.${CX}-row{display:flex;align-items:center;gap:${G.gap}px}
+.${CX}-col{display:flex;flex-direction:column;gap:${G.gap}px}
+.${CX}-btn{
+  display:inline-flex;align-items:center;justify-content:center;gap:6px;
+  height:${G.buttonHeight}px;padding:0 ${G.padXButton}px;
+  font-size:14px;font-family:inherit;line-height:22px;
+  border-radius:${G.radiusPill}px;border:none;
+  background:${T.bgBase};color:${T.labelPrimary};
+  cursor:pointer;box-sizing:border-box;white-space:nowrap;
+  transition:background .12s ease,border-color .12s ease,opacity .12s ease;
+}
+.${CX}-btn:hover:not(:disabled){background:${T.bgHover}}
+.${CX}-btn:disabled{opacity:.5;cursor:not-allowed}
+.${CX}-btn--primary{
+  background:${T.buttonPrimaryFill};
+  color:${T.buttonPrimaryForeground};
+}
+.${CX}-btn--primary:hover:not(:disabled){filter:brightness(1.07);background:${T.buttonPrimaryFill}}
+.${CX}-btn--ghost{background:transparent;border-color:transparent;color:${T.labelSecondary}}
+.${CX}-btn--ghost:hover:not(:disabled){background:${T.bgHover};color:${T.labelPrimary}}
+.${CX}-btn--danger{background:transparent;border:1px solid ${T.danger};color:${T.danger};border-radius:${G.radius}px}
+.${CX}-btn--sm{height:${G.controlHeightSm}px;padding:0 ${G.padX + 2}px;font-size:${G.fontSizeSm}px;border-radius:${G.radius}px}
+.${CX}-iconbtn{
+  display:inline-flex;align-items:center;justify-content:center;
+  width:${G.controlHeight}px;height:${G.controlHeight}px;padding:0;
+  border-radius:${G.radius}px;border:1px solid transparent;
+  background:transparent;color:${T.labelSecondary};cursor:pointer;
+}
+.${CX}-iconbtn:hover:not(:disabled){background:${T.bgHover};color:${T.labelPrimary}}
+.${CX}-iconbtn:disabled{opacity:.5;cursor:not-allowed}
+.${CX}-input,.${CX}-textarea,.${CX}-select{
+  width:100%;box-sizing:border-box;font-family:inherit;font-size:${G.fontSize}px;
+  color:${T.labelPrimary};background:${T.bgLayer1};
+  border:1px solid ${T.border};border-radius:${G.radius}px;
+  padding:0 ${G.padX}px;height:${G.controlHeight}px;
+  transition:border-color .12s ease;
+}
+.${CX}-textarea{height:auto;min-height:72px;padding:7px ${G.padX}px;line-height:1.5;resize:vertical}
+.${CX}-input:focus,.${CX}-textarea:focus,.${CX}-select:focus{outline:none;border-color:${T.accent}}
+.${CX}-input:disabled,.${CX}-textarea:disabled,.${CX}-select:disabled{opacity:.55;cursor:not-allowed}
+.${CX}-input--mono,.${CX}-textarea--mono{font-family:${T.fontCode}}
+.${CX}-input--invalid,.${CX}-textarea--invalid{border-color:${T.danger}}
+.${CX}-select{appearance:none;padding-right:26px;cursor:pointer;background-color:${T.bgBase}}
+.${CX}-selectwrap{position:relative;display:block;width:100%}
+.${CX}-selectwrap>.${CX}-caret{
+  position:absolute;right:8px;top:50%;transform:translateY(-50%);
+  pointer-events:none;color:${T.labelTertiary};display:inline-flex;
+}
+.${CX}-mselect{position:relative;width:100%}
+.${CX}-mselect__trigger{
+  display:flex;align-items:center;justify-content:space-between;gap:8px;
+  width:100%;box-sizing:border-box;min-height:36px;padding:7px 10px;
+  font-family:inherit;font-size:14px;line-height:20px;text-align:left;
+  color:${T.labelPrimary};background:${T.bgLayer1};
+  border:1px solid ${T.border};border-radius:8px;cursor:pointer;appearance:none;
+}
+.${CX}-mselect__trigger:disabled{opacity:.45;cursor:not-allowed}
+.${CX}-mselect__text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.${CX}-mselect__text--ph{color:${T.labelTertiary}}
+.${CX}-mselect__caret{display:inline-flex;align-items:center;flex:none;color:${T.labelTertiary}}
+.${CX}-check{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:13px;color:${T.labelPrimary};line-height:20px}
+.${CX}-check input{
+  position:relative;margin:0;width:16px;height:16px;flex:none;
+  appearance:auto;-webkit-appearance:checkbox;cursor:pointer;
+  accent-color:${T.accent};
+}
+.${CX}-check input[disabled]{cursor:not-allowed}
+.${CX}-check--disabled{opacity:.55;cursor:not-allowed}
+.${CX}-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:${G.fontSize}px;color:${T.labelPrimary}}
+.${CX}-switch input{position:absolute;opacity:0;width:0;height:0}
+.${CX}-switch__track{
+  position:relative;flex:none;width:34px;height:20px;border-radius:${G.radiusPill}px;
+  background:${T.border};transition:background .16s ease;
+}
+.${CX}-switch__knob{
+  position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
+  background:${T.bgBase};box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .16s ease;
+}
+.${CX}-switch input:checked+.${CX}-switch__track{background:${T.accent}}
+.${CX}-switch input:checked+.${CX}-switch__track>.${CX}-switch__knob{transform:translateX(14px)}
+.${CX}-switch input:focus-visible+.${CX}-switch__track{box-shadow:0 0 0 2px ${T.accent}55}
+.${CX}-switch--disabled{opacity:.55;cursor:not-allowed}
+.${CX}-field{display:flex;flex-direction:column;gap:6px}
+.${CX}-field__label{font-size:12px;font-weight:500;color:${T.labelSecondary};line-height:18px}
+.${CX}-field__desc{font-size:${G.fontSizeSm}px;color:${T.labelTertiary};line-height:18px}
+.${CX}-field__error{font-size:${G.fontSizeSm}px;color:${T.danger}}
+.${CX}-card{
+  display:flex;flex-direction:column;gap:10px;
+  padding:16px;border:1px solid ${T.border};border-radius:${G.cardRadius}px;
+  background:transparent;box-sizing:border-box;
+}
+.${CX}-card__title{margin:0;font-size:15px;font-weight:500;line-height:22px;color:${T.labelPrimary}}
+.${CX}-spin{display:inline-flex;animation:${CX}-spin 1s linear infinite}
+@keyframes ${CX}-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
+@media (prefers-reduced-motion:reduce){
+  .${CX}-spin{animation:none}
+  .${CX}-btn,.${CX}-input,.${CX}-switch__track,.${CX}-switch__knob,.${CX}-check__box{transition:none}
+}
+`;
+		/** Inject the control stylesheet once (idempotent, safe to call from any component). */
+		function ensureStyles() {
+			injectStyle(OWNER, "ui/controls.css", CSS);
+		}
+		/** Call `ensureStyles` on first render of any control. */
+		function useStyles() {
+			ensureStyles();
+		}
+		/** A button in the DSH design language. */
+		const Button = react$1.forwardRef(function Button({ variant = "default", small, icon, loading, className, children, disabled, ...rest }, ref) {
+			useStyles();
+			return react$1.createElement("button", {
+				ref,
+				type: rest.type ?? "button",
+				className: cx(`${CX}-btn`, variant !== "default" && `dshl-btn--${variant}`, small && `dshl-btn--sm`, className),
+				disabled: disabled === true || loading === true,
+				...rest
+			}, loading === true ? react$1.createElement("span", {
+				className: `${CX}-spin`,
+				key: "spin"
+			}, react$1.createElement(Icon, { name: "Loading" })) : icon !== void 0 ? react$1.createElement(Icon, {
+				name: icon,
+				key: "icon"
+			}) : null, children);
+		});
+		/** A square icon-only button. `label` becomes its accessible name. */
+		const IconButton = react$1.forwardRef(function IconButton({ icon, label, className, ...rest }, ref) {
+			useStyles();
+			return react$1.createElement("button", {
+				ref,
+				type: rest.type ?? "button",
+				className: cx(`${CX}-iconbtn`, className),
+				"aria-label": label,
+				title: rest.title ?? label,
+				...rest
+			}, react$1.createElement(Icon, { name: icon }));
+		});
+		/** A single-line text input. */
+		const TextInput = react$1.forwardRef(function TextInput({ mono, invalid, className, ...rest }, ref) {
+			useStyles();
+			return react$1.createElement("input", {
+				ref,
+				type: rest.type ?? "text",
+				className: cx(`${CX}-input`, mono && `dshl-input--mono`, invalid && `dshl-input--invalid`, className),
+				"aria-invalid": invalid === true ? true : void 0,
+				...rest
+			});
+		});
+		/** A multi-line text area. */
+		const Textarea = react$1.forwardRef(function Textarea({ mono, invalid, className, ...rest }, ref) {
+			useStyles();
+			return react$1.createElement("textarea", {
+				ref,
+				className: cx(`${CX}-textarea`, mono && `dshl-textarea--mono`, invalid && `dshl-textarea--invalid`, className),
+				"aria-invalid": invalid === true ? true : void 0,
+				...rest
+			});
+		});
+		/**
+		* A dropdown built on the native `<select>`.
+		*
+		* Native on purpose: it inherits the platform's keyboard handling, mobile
+		* pickers, and accessibility for free. Plugins needing DSH's rich popup should
+		* use `Menu` from `@dsh-plugin/dsh-loader/ui-primitives` instead.
+		*/
+		const Select = react$1.forwardRef(function Select({ options, placeholder, className, value, ...rest }, ref) {
+			useStyles();
+			return react$1.createElement("span", { className: `${CX}-selectwrap` }, react$1.createElement("select", {
+				ref,
+				className: cx(`${CX}-select`, className),
+				value,
+				...rest
+			}, placeholder !== void 0 ? react$1.createElement("option", {
+				key: "__ph",
+				value: "",
+				disabled: true
+			}, placeholder) : null, options.map((option) => react$1.createElement("option", {
+				key: option.value,
+				value: option.value,
+				disabled: option.disabled
+			}, option.label))), react$1.createElement("span", { className: `${CX}-caret` }, react$1.createElement(Icon, { name: "ChevronDown" })));
+		});
+		/** Height budget used when deciding whether the popup opens above the trigger. */
+		const MENU_SELECT_MAX_HEIGHT = 264;
+		/**
+		* A dropdown whose trigger and popup match the shell's own pickers (the
+		* dsh-auxiliary model picker look): a bordered layer-1 trigger button plus the
+		* platform menu popup via {@link DshMenu}.
+		*
+		* Prefer this over {@link Select} on settings pages: the native `<select>`
+		* popup is OS-styled and cannot follow the shell theme, which is exactly the
+		* visual drift this component removes. `Select` remains for dense/inline forms
+		* where the native control's compactness matters.
+		*/
+		function MenuSelect({ options, value, placeholder, disabled, onChange, id, label, className }) {
+			useStyles();
+			const [open, setOpen] = react$1.useState(false);
+			const [side, setSide] = react$1.useState("bottom");
+			const triggerRef = react$1.useRef(null);
+			const updateSide = react$1.useCallback(() => {
+				const trigger = triggerRef.current;
+				if (trigger === null) return;
+				const rect = trigger.getBoundingClientRect();
+				const below = window.innerHeight - rect.bottom - 12;
+				const above = rect.top - 12;
+				setSide(below >= Math.min(MENU_SELECT_MAX_HEIGHT, above) ? "bottom" : "top");
+			}, []);
+			react$1.useEffect(() => {
+				if (!open) return void 0;
+				updateSide();
+				window.addEventListener("scroll", updateSide, true);
+				window.addEventListener("resize", updateSide);
+				return () => {
+					window.removeEventListener("scroll", updateSide, true);
+					window.removeEventListener("resize", updateSide);
+				};
+			}, [open, updateSide]);
+			const selected = options.find((option) => option.value === value);
+			const text = selected !== void 0 ? selected.label : placeholder ?? "";
+			const items = react$1.useMemo(() => options.map((option) => ({
+				id: option.value,
+				label: option.label,
+				disabled: option.disabled
+			})), [options]);
+			return react$1.createElement("div", { className: cx(`${CX}-mselect`, className) }, react$1.createElement(DshMenu, {
+				open,
+				anchor: react$1.createElement("button", {
+					ref: triggerRef,
+					type: "button",
+					id,
+					disabled: disabled === true,
+					className: `${CX}-mselect__trigger`,
+					"aria-label": label !== void 0 ? `${label}: ${text}` : text,
+					"aria-haspopup": "menu",
+					"aria-expanded": open,
+					title: text,
+					onClick: () => setOpen((previous) => !previous)
+				}, react$1.createElement("span", { className: cx(`${CX}-mselect__text`, selected === void 0 && `dshl-mselect__text--ph`) }, text), react$1.createElement("span", {
+					className: `${CX}-mselect__caret`,
+					"aria-hidden": true
+				}, react$1.createElement(Icon, {
+					name: "ChevronDown",
+					size: 14
+				}))),
+				items,
+				selectedId: value,
+				onSelect: (chosen) => {
+					onChange?.(chosen);
+					setOpen(false);
+				},
+				onClose: () => setOpen(false),
+				align: "start",
+				side,
+				dense: true
+			}));
+		}
+		/** A checkbox with an optional label. Native input styled via `accent-color`,
+		*  matching the shell's own settings pages. */
+		const Checkbox = react$1.forwardRef(function Checkbox({ label, className, disabled, ...rest }, ref) {
+			useStyles();
+			return react$1.createElement("label", { className: cx(`${CX}-check`, disabled === true && `dshl-check--disabled`, className) }, react$1.createElement("input", {
+				ref,
+				type: "checkbox",
+				disabled,
+				...rest
+			}), label === void 0 ? null : react$1.createElement("span", null, label));
+		});
+		/** A toggle switch — use for "applies immediately" settings. */
+		const Switch = react$1.forwardRef(function Switch({ label, className, disabled, ...rest }, ref) {
+			useStyles();
+			return react$1.createElement("label", { className: cx(`${CX}-switch`, disabled === true && `dshl-switch--disabled`, className) }, react$1.createElement("input", {
+				ref,
+				type: "checkbox",
+				role: "switch",
+				disabled,
+				...rest
+			}), react$1.createElement("span", {
+				className: `${CX}-switch__track`,
+				"aria-hidden": true
+			}, react$1.createElement("span", { className: `${CX}-switch__knob` })), label === void 0 ? null : react$1.createElement("span", null, label));
+		});
+		/** Label + control + description/error, the standard settings row. */
+		function Field({ label, description, error, htmlFor, children, className }) {
+			useStyles();
+			return react$1.createElement("div", { className: cx(`${CX}-field`, className) }, label === void 0 ? null : react$1.createElement("label", {
+				className: `${CX}-field__label`,
+				htmlFor
+			}, label), children, description === void 0 ? null : react$1.createElement("span", { className: `${CX}-field__desc` }, description), error === void 0 || error === null || error === false ? null : react$1.createElement("span", {
+				className: `${CX}-field__error`,
+				role: "alert"
+			}, error));
+		}
+		/** A bordered section container — the settings-page card look. */
+		function Card({ title, children, className }) {
+			useStyles();
+			return react$1.createElement("section", { className: cx(`${CX}-card`, className) }, title === void 0 ? null : react$1.createElement("h3", { className: `${CX}-card__title` }, title), children);
+		}
+		/** A horizontal flex row with the standard gap. */
+		function Row({ children, className }) {
+			useStyles();
+			return react$1.createElement("div", { className: cx(`${CX}-row`, className) }, children);
+		}
+		/** A vertical flex column with the standard gap. */
+		function Col({ children, className }) {
+			useStyles();
+			return react$1.createElement("div", { className: cx(`${CX}-col`, className) }, children);
+		}
+		/** An inline spinner. */
+		function Spinner({ size }) {
+			useStyles();
+			return react$1.createElement("span", {
+				className: `${CX}-spin`,
+				role: "status",
+				"aria-label": "loading"
+			}, react$1.createElement(Icon, {
+				name: "Loading",
+				size
+			}));
+		}
+		//#endregion
+		//#region src/ui/index.ts
+		/**
+		* The dshloader UI surface: virtual slots, the curated icon set, and the base
+		* controls, wrapped as one `ui` facade.
+		*
+		* Consumers reach this at runtime through `@dsh-plugin/dsh-loader/client`, which
+		* the DSH client module table resolves by stripping the `/client` suffix to
+		* dshloader's registered bundle id — so no alias and no load-order coordination
+		* is needed (see docs/ui.md).
+		*
+		* @module @dsh-plugin/dsh-loader/ui
+		*/
+		/**
+		* Build the UI facade and seed it with the dsh 1.x anchor table.
+		*
+		* @param options - forwarded to {@link createUiAPI} (observe root, warn sink).
+		*/
+		function createUi(options = {}) {
+			const api = createUiAPI(options);
+			for (const [name, spec] of Object.entries(BUILTIN_ANCHORS)) api.defineAnchor(name, spec);
+			return {
+				...api,
+				mount: api.mount.bind(api),
+				mountReact: api.mountReact.bind(api),
+				defineAnchor: api.defineAnchor.bind(api),
+				anchors: api.anchors.bind(api),
+				hosts: api.hosts.bind(api),
+				onDomSettled: api.onDomSettled.bind(api),
+				diagnose: api.diagnose.bind(api),
+				destroy: api.destroy.bind(api),
+				layoutFrame() {
+					const [host] = api.hosts("layout.frame");
+					return host === void 0 ? void 0 : readLayoutFrame(host);
+				}
+			};
+		}
+		//#endregion
+		//#region src/client-ui.tsx
+		/**
+		* dshloader BROWSER BUNDLE ENTRY.
+		*
+		* Composes the two browser halves of dshloader:
+		*
+		*   1. the compatibility infrastructure in `./client.ts` — `window.__dshLoader__`,
+		*      the `__ModuleLoader__.load` wrapper that applies package aliases, the
+		*      module-alias factories, and the optional settings fetch interceptor;
+		*   2. the UI surface in `./ui/` — the virtual slot engine, the curated icon set,
+		*      and the base controls.
+		*
+		* WHY A SEPARATE ENTRY FROM `client.ts`: `client.ts` must keep compiling in the
+		* NODE program (`tsconfig.build.json` → `dist/client.js`), because the client
+		* unit tests import it from there. The UI modules need `lib.dom` and JSX, which
+		* that program does not have. Keeping the entry separate lets each half compile
+		* under the program that suits it while both land in one bundle.
+		*
+		* Consumers import from `@dsh-plugin/dsh-loader/client`, marked external in
+		* their bundler: the DSH client module table strips the `/client` suffix to
+		* dshloader's registered bundle id and materialises this module recursively, so
+		* no package alias and no load-order coordination is required.
+		*
+		* @module @dsh-plugin/dsh-loader/client
+		*/
+		/** cordis plugin name (matches the npm package name and the bundle id). */
 		const name = "@dsh-plugin/dsh-loader";
+		/** dshloader consumes no cordis service; it only provides. */
 		const inject = [];
+		/** The live UI facade, once `apply` has run. */
+		let ui;
+		/**
+		* The UI facade for callers that reach dshloader through the module table rather
+		* than `window.__dshLoader__`.
+		*
+		* @returns the facade, or `undefined` before the client plugin has applied.
+		*/
+		function getUi() {
+			return ui;
+		}
+		/** The browser `window`, read off `globalThis` so no DOM lib is assumed here. */
+		function ambientWindow() {
+			const found = globalThis.window;
+			return typeof found === "object" && found !== null ? found : void 0;
+		}
+		/**
+		* The cordis client service name dshloader publishes its UI facade under.
+		*
+		* Consumers should declare `inject: ['dshLoaderUi']` and read `ctx.dshLoaderUi`:
+		* cordis then activates them only after dshloader's client half has applied,
+		* which is the only ordering guarantee available on the browser side.
+		* `dsh.client.immediately` guarantees the bundle's factory is REGISTERED early,
+		* not that its `apply` has run — so a plugin that reads
+		* `window.__dshLoader__.ui` without injecting can observe `undefined`.
+		*/
+		const UI_SERVICE = "dshLoaderUi";
+		/**
+		* cordis client-plugin entry.
+		*
+		* Mounts the infrastructure first (so the `__ModuleLoader__` wrapper is in place
+		* before any sibling bundle materialises), then the UI facade, then publishes it
+		* both as the `dshLoaderUi` cordis service (ordered access) and on
+		* `window.__dshLoader__.ui` (ad-hoc access from non-cordis code).
+		*/
 		function apply(ctx) {
-			if (typeof window !== "undefined") installClient({
-				window,
+			const win = ambientWindow();
+			if (win === void 0) return;
+			const api = installClient({
+				window: win,
 				clientCtx: ctx
 			});
+			ui = createUi();
+			if (api !== void 0) api.ui = ui;
+			else if (win.__dshLoader__ !== void 0) win.__dshLoader__.ui = ui;
+			ctx.provide?.(UI_SERVICE, ui);
+			ctx.effect?.(() => () => {
+				ui?.destroy();
+				ui = void 0;
+			});
 		}
 		//#endregion
+		exports.ANCHOR_NAMES = ANCHOR_NAMES;
+		exports.BUILTIN_ANCHORS = BUILTIN_ANCHORS;
+		exports.Button = Button;
+		exports.CX = CX;
+		exports.Card = Card;
+		exports.Checkbox = Checkbox;
+		exports.Col = Col;
+		exports.DSH_ICON_CONFIG = DSH_ICON_CONFIG;
+		exports.DshIconProvider = DshIconProvider;
+		exports.DshMenu = DshMenu;
+		exports.Field = Field;
+		exports.G = G;
+		exports.ICON_NAMES = ICON_NAMES;
+		exports.Icon = Icon;
+		exports.IconButton = IconButton;
+		exports.IconProvider = IconProvider;
+		exports.Icons = Icons;
+		exports.MenuSelect = MenuSelect;
 		exports.ModuleNotFoundError = ModuleNotFoundError;
+		exports.Row = Row;
+		exports.Select = Select;
+		exports.Spinner = Spinner;
+		exports.Switch = Switch;
+		exports.T = T;
+		exports.TextInput = TextInput;
+		exports.Textarea = Textarea;
+		exports.UI_SERVICE = UI_SERVICE;
 		exports.apply = apply;
 		exports.createClientAPI = createClientAPI;
+		exports.createUi = createUi;
+		exports.createUiAPI = createUiAPI;
+		exports.cx = cx;
+		exports.ensureStyles = ensureStyles;
+		exports.getUi = getUi;
+		exports.icon = icon;
 		exports.inject = inject;
+		exports.injectStyle = injectStyle;
 		exports.installClient = installClient;
 		exports.installSettingsFetchInterceptor = installSettingsFetchInterceptor;
 		exports.name = name;
+		exports.readLayoutFrame = readLayoutFrame;
+		exports.token = token;
 		return module.exports;
 	}
 });