@abydahana/iconpicker 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Aby Dahana
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,303 @@
+# IconPicker
+
+Floating popover icon picker with multi-pack support and real-time search.
+
+---
+
+## Features
+
+- Floating popover with auto-positioning and collision flip.
+- Built-in framework themes: Aksara UI, Bootstrap 5, Tailwind CSS, and Default.
+- Multi-pack support: MDI, FontAwesome 6 Free, Bootstrap Icons, Tabler Icons, Remix Icon, Boxicons, and Lucide.
+- Lazy chunk rendering for smooth scrolling across 7,000+ icons.
+- Instant search and filtering.
+- On-demand webfont loading.
+- Zero runtime dependencies.
+
+---
+
+## Installation
+
+```bash
+npm install @abydahana/iconpicker
+```
+
+Or using yarn / pnpm:
+
+```bash
+yarn add @abydahana/iconpicker
+pnpm add @abydahana/iconpicker
+```
+
+---
+
+## Framework Integration
+
+### 1. Aksara UI
+
+```ts
+import "@abydahana/aksara-ui/css";
+import "@abydahana/iconpicker/css";
+import { IconPicker } from "@abydahana/iconpicker";
+```
+
+```html
+<div class="input-group input-group-sm">
+  <span class="input-group-text" role="button" title="Choose icon">
+    <i class="menu-item-input-icon-preview mdi mdi-view-dashboard-outline"></i>
+  </span>
+  <input
+    type="text"
+    id="menu-icon-input"
+    class="form-control form-control-sm"
+    value="mdi mdi-view-dashboard-outline"
+    placeholder="e.g. mdi mdi-home"
+  />
+</div>
+```
+
+```ts
+const input = document.getElementById("menu-icon-input") as HTMLInputElement;
+
+new IconPicker(input, {
+  theme: "aksara",
+  iconSets: ["mdi"],
+  defaultSet: "mdi",
+  placement: "bottom-start",
+  onSelect(icon) {
+    const preview = input.parentElement?.querySelector(".menu-item-input-icon-preview");
+    if (preview) {
+      preview.className = `menu-item-input-icon-preview ${icon.className}`;
+    }
+  }
+});
+```
+
+---
+
+### 2. Bootstrap 5
+
+```ts
+import "bootstrap/dist/css/bootstrap.min.css";
+import "@abydahana/iconpicker/css";
+import { IconPicker } from "@abydahana/iconpicker";
+```
+
+```html
+<div class="input-group">
+  <span class="input-group-text">
+    <i class="bi bi-star"></i>
+  </span>
+  <input type="text" id="bs-icon-input" class="form-control" placeholder="Select icon" value="bi bi-star" />
+</div>
+```
+
+```ts
+new IconPicker("#bs-icon-input", {
+  theme: "bootstrap",
+  iconSets: ["bi", "fa"],
+  defaultSet: "bi",
+  placement: "bottom-start",
+  onSelect(icon) {
+    console.log("Selected icon:", icon.className);
+  }
+});
+```
+
+---
+
+### 3. Tailwind CSS
+
+```css
+@import "tailwindcss";
+@import "@abydahana/iconpicker/css";
+```
+
+```html
+<div
+  class="relative flex items-center rounded-lg shadow-sm border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 overflow-hidden max-w-sm"
+>
+  <div class="flex items-center justify-center pl-3 text-slate-500">
+    <i class="lucide lucide-heart text-base"></i>
+  </div>
+  <input
+    type="text"
+    id="tailwind-icon-input"
+    class="w-full py-2 pl-3 pr-4 text-sm text-slate-900 dark:text-slate-100 bg-transparent border-0 focus:outline-none"
+    placeholder="Pick icon..."
+    value="lucide lucide-heart"
+  />
+</div>
+```
+
+```ts
+import { IconPicker } from "@abydahana/iconpicker";
+
+new IconPicker("#tailwind-icon-input", {
+  theme: "tailwind",
+  iconSets: ["lucide", "tabler", "remix"],
+  defaultSet: "lucide",
+  placement: "bottom-start"
+});
+```
+
+---
+
+### 4. Vanilla JavaScript / HTML
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Icon Picker Demo</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@abydahana/iconpicker/dist/iconpicker.css" />
+  </head>
+  <body>
+    <div style="margin: 40px;">
+      <input type="text" id="plain-icon" placeholder="Click to choose icon..." />
+    </div>
+
+    <script type="module">
+      import { IconPicker } from "https://cdn.jsdelivr.net/npm/@abydahana/iconpicker/dist/index.js";
+
+      new IconPicker("#plain-icon", {
+        theme: "default",
+        iconSets: ["mdi", "bi", "boxicons"],
+        defaultSet: "mdi"
+      });
+    </script>
+  </body>
+</html>
+```
+
+---
+
+## Supported Icon Sets
+
+| Identifier | Name                  | Total Icons | Class Prefix / Output Format                 |
+| ---------- | --------------------- | ----------- | -------------------------------------------- |
+| `mdi`      | Material Design Icons | 7,448       | `mdi mdi-{name}`                             |
+| `fa`       | FontAwesome 6 Free    | 1,895       | `fa-solid fa-{name}` / `fa-brands fa-{name}` |
+| `bi`       | Bootstrap Icons       | 2,050       | `bi bi-{name}`                               |
+| `tabler`   | Tabler Icons          | 4,879       | `ti ti-{name}`                               |
+| `remix`    | Remix Icon            | 2,892       | `ri-{name}`                                  |
+| `boxicons` | Boxicons              | 814         | `bx bx-{name}`                               |
+| `lucide`   | Lucide Icons          | 1,807       | `lucide lucide-{name}`                       |
+
+When passing a single set (e.g. `iconSets: ["mdi"]`), the tab bar automatically hides.
+
+---
+
+## Options
+
+```ts
+interface IconPickerOptions {
+  theme?: "aksara" | "bootstrap" | "tailwind" | "default";
+  placement?: "bottom-start" | "bottom-end" | "bottom" | "top-start" | "top-end" | "top" | "auto";
+  iconSets?: (string | IconSetDefinition)[];
+  defaultSet?: string;
+  searchPlaceholder?: string;
+  value?: string;
+  container?: HTMLElement | string;
+  showTabs?: boolean;
+  showFooter?: boolean;
+  closeOnSelect?: boolean;
+  emptyText?: string;
+  itemsPerPage?: number;
+  loadFonts?: boolean;
+  fontUrls?: Record<string, string>;
+  onSelect?: (icon: IconItem) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+}
+```
+
+| Parameter           | Type                    | Default               | Description                                                          |
+| ------------------- | ----------------------- | --------------------- | -------------------------------------------------------------------- |
+| `theme`             | `string`                | `'default'`           | Theme preset (`'aksara'`, `'bootstrap'`, `'tailwind'`, `'default'`). |
+| `placement`         | `string`                | `'bottom-start'`      | Popover position relative to target element.                         |
+| `iconSets`          | `array`                 | `['mdi', 'fa', ...]`  | Array of icon set IDs or custom definitions.                         |
+| `defaultSet`        | `string`                | `'mdi'`               | Initial active tab.                                                  |
+| `searchPlaceholder` | `string`                | `'Search icons...'`   | Search input placeholder.                                            |
+| `value`             | `string`                | `''`                  | Initial selected class name.                                         |
+| `container`         | `HTMLElement \| string` | `document.body`       | Element where popover is appended.                                   |
+| `showTabs`          | `boolean`               | `true`                | Show/hide icon set tabs (auto-hidden when <= 1 set).                 |
+| `showFooter`        | `boolean`               | `true`                | Show/hide selected icon preview footer.                              |
+| `closeOnSelect`     | `boolean`               | `true`                | Close popover when an icon is picked.                                |
+| `emptyText`         | `string`                | `'No icons found...'` | Message when no search results match.                                |
+| `itemsPerPage`      | `number`                | `120`                 | Virtualized chunk size when scrolling.                               |
+| `loadFonts`         | `boolean`               | `true`                | Auto-inject CDN stylesheets when switching tabs.                     |
+| `fontUrls`          | `object`                | `{}`                  | Custom CDN font URLs per set.                                        |
+| `onSelect`          | `function`              | `undefined`           | Callback: `(icon: IconItem) => void`.                                |
+| `onOpen`            | `function`              | `undefined`           | Callback when popover opens.                                         |
+| `onClose`           | `function`              | `undefined`           | Callback when popover closes.                                        |
+
+---
+
+## Methods
+
+```ts
+const picker = new IconPicker("#icon-input", options);
+
+picker.open();
+picker.close();
+picker.toggle();
+picker.getValue();
+picker.setValue("mdi mdi-check");
+picker.destroy();
+```
+
+---
+
+## Custom Icon Sets
+
+```ts
+import { IconPicker } from "@abydahana/iconpicker";
+
+const customSet = {
+  id: "custom",
+  title: "My Custom Icons",
+  prefix: "app-icon-",
+  formatter: (name: string) => `app-icon app-icon-${name}`,
+  icons: ["home", "profile", "settings", "download"]
+};
+
+new IconPicker("#my-input", {
+  iconSets: [customSet, "mdi"],
+  defaultSet: "custom"
+});
+```
+
+---
+
+## Development
+
+```bash
+# Format, lint, and build all at once
+npm run all
+
+# Build TypeScript and CSS bundles
+npm run build
+
+# Type check
+npm run check
+
+# Lint source files
+npm run lint
+
+# Automatically fix linting issues
+npm run lint:fix
+
+# Format code with Prettier and ESLint
+npm run format
+
+# Verify formatting and linting
+npm run format:check
+```
+
+---
+
+## License
+
+MIT © Aby Dahana

package/dist/core/font-loader.d.ts

@@ -0,0 +1,2 @@
+export declare function loadIconFont(setId: string, customUrls?: Record<string, string>): void;
+//# sourceMappingURL=font-loader.d.ts.map

package/dist/core/font-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-loader.d.ts","sourceRoot":"","sources":["../../src/core/font-loader.ts"],"names":[],"mappings":"AAgBA,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAqBrF"}

package/dist/core/font-loader.js

@@ -0,0 +1,35 @@
+const DEFAULT_FONT_URLS = {
+    mdi: "https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css",
+    fa: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css",
+    fontawesome: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css",
+    bi: "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css",
+    bootstrap: "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css",
+    tabler: "https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.19.0/dist/tabler-icons.min.css",
+    ti: "https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.19.0/dist/tabler-icons.min.css",
+    remix: "https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css",
+    ri: "https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css",
+    boxicons: "https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css",
+    bx: "https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
+};
+const loadedFonts = new Set();
+export function loadIconFont(setId, customUrls) {
+    if (typeof document === "undefined")
+        return;
+    const normalized = setId.toLowerCase();
+    const url = customUrls?.[normalized] || DEFAULT_FONT_URLS[normalized];
+    if (!url || loadedFonts.has(normalized))
+        return;
+    // Check if link already exists in head
+    const selector = `link[data-iconpicker-font="${normalized}"]`;
+    if (document.querySelector(selector)) {
+        loadedFonts.add(normalized);
+        return;
+    }
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = url;
+    link.setAttribute("data-iconpicker-font", normalized);
+    document.head.appendChild(link);
+    loadedFonts.add(normalized);
+}
+//# sourceMappingURL=font-loader.js.map

package/dist/core/font-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-loader.js","sourceRoot":"","sources":["../../src/core/font-loader.ts"],"names":[],"mappings":"AAAA,MAAM,iBAAiB,GAA2B;IAChD,GAAG,EAAE,+EAA+E;IACpF,EAAE,EAAE,2EAA2E;IAC/E,WAAW,EAAE,2EAA2E;IACxF,EAAE,EAAE,kFAAkF;IACtF,SAAS,EAAE,kFAAkF;IAC7F,MAAM,EAAE,qFAAqF;IAC7F,EAAE,EAAE,qFAAqF;IACzF,KAAK,EAAE,kEAAkE;IACzE,EAAE,EAAE,kEAAkE;IACtE,QAAQ,EAAE,uDAAuD;IACjE,EAAE,EAAE,uDAAuD;CAC5D,CAAC;AAEF,MAAM,WAAW,GAAG,IAAI,GAAG,EAAU,CAAC;AAEtC,MAAM,UAAU,YAAY,CAAC,KAAa,EAAE,UAAmC;IAC7E,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO;IAE5C,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;IACvC,MAAM,GAAG,GAAG,UAAU,EAAE,CAAC,UAAU,CAAC,IAAI,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACtE,IAAI,CAAC,GAAG,IAAI,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC;QAAE,OAAO;IAEhD,uCAAuC;IACvC,MAAM,QAAQ,GAAG,8BAA8B,UAAU,IAAI,CAAC;IAC9D,IAAI,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;QACrC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QAC5B,OAAO;IACT,CAAC;IAED,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,GAAG,GAAG,YAAY,CAAC;IACxB,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;IAChB,IAAI,CAAC,YAAY,CAAC,sBAAsB,EAAE,UAAU,CAAC,CAAC;IAEtD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAChC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;AAC9B,CAAC"}

package/dist/core/grid.d.ts

@@ -0,0 +1,26 @@
+import type { IconItem, IconSetDefinition } from "../types";
+export interface GridOptions {
+    container: HTMLElement;
+    bodyElement: HTMLElement;
+    emptyElement: HTMLElement;
+    chunkSize?: number;
+    onSelect: (icon: IconItem) => void;
+}
+export declare class IconGrid {
+    private container;
+    private bodyElement;
+    private emptyElement;
+    private chunkSize;
+    private onSelect;
+    private currentIcons;
+    private currentSet;
+    private renderedCount;
+    private selectedValue;
+    private scrollListener;
+    constructor(options: GridOptions);
+    setIcons(icons: string[], set: IconSetDefinition, selectedValue?: string): void;
+    setSelectedValue(val: string): void;
+    private renderNextChunk;
+    destroy(): void;
+}
+//# sourceMappingURL=grid.d.ts.map

package/dist/core/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../src/core/grid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE5D,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,WAAW,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,WAAW,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACpC;AAED,qBAAa,QAAQ;IACnB,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,QAAQ,CAA2B;IAE3C,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,UAAU,CAAkC;IACpD,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,cAAc,CAAa;gBAEvB,OAAO,EAAE,WAAW;IAiBzB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,iBAAiB,EAAE,aAAa,SAAK,GAAG,IAAI;IAmB3E,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAe1C,OAAO,CAAC,eAAe;IAmDhB,OAAO,IAAI,IAAI;CAGvB"}

package/dist/core/grid.js

@@ -0,0 +1,101 @@
+export class IconGrid {
+    container;
+    bodyElement;
+    emptyElement;
+    chunkSize;
+    onSelect;
+    currentIcons = [];
+    currentSet = null;
+    renderedCount = 0;
+    selectedValue = "";
+    scrollListener;
+    constructor(options) {
+        this.container = options.container;
+        this.bodyElement = options.bodyElement;
+        this.emptyElement = options.emptyElement;
+        this.chunkSize = options.chunkSize || 120;
+        this.onSelect = options.onSelect;
+        this.scrollListener = () => {
+            const { scrollTop, clientHeight, scrollHeight } = this.bodyElement;
+            if (scrollTop + clientHeight >= scrollHeight - 150) {
+                this.renderNextChunk();
+            }
+        };
+        this.bodyElement.addEventListener("scroll", this.scrollListener, { passive: true });
+    }
+    setIcons(icons, set, selectedValue = "") {
+        this.currentIcons = icons;
+        this.currentSet = set;
+        this.selectedValue = selectedValue;
+        this.renderedCount = 0;
+        this.container.innerHTML = "";
+        this.bodyElement.scrollTop = 0;
+        if (icons.length === 0) {
+            this.emptyElement.style.display = "block";
+            this.container.style.display = "none";
+            return;
+        }
+        this.emptyElement.style.display = "none";
+        this.container.style.display = "grid";
+        this.renderNextChunk();
+    }
+    setSelectedValue(val) {
+        this.selectedValue = val;
+        const buttons = this.container.querySelectorAll(".iconpicker-item");
+        for (const btn of buttons) {
+            const iconClass = btn.getAttribute("data-icon-class");
+            if (iconClass === val) {
+                btn.classList.add("is-selected");
+                btn.setAttribute("aria-selected", "true");
+            }
+            else {
+                btn.classList.remove("is-selected");
+                btn.removeAttribute("aria-selected");
+            }
+        }
+    }
+    renderNextChunk() {
+        if (!this.currentSet || this.renderedCount >= this.currentIcons.length) {
+            return;
+        }
+        const nextBatch = this.currentIcons.slice(this.renderedCount, this.renderedCount + this.chunkSize);
+        const fragment = document.createDocumentFragment();
+        for (const iconName of nextBatch) {
+            const className = this.currentSet.formatter
+                ? this.currentSet.formatter(iconName)
+                : `${this.currentSet.prefix}${iconName}`;
+            const isSelected = className === this.selectedValue;
+            const btn = document.createElement("button");
+            btn.type = "button";
+            btn.className = `iconpicker-item ${isSelected ? "is-selected" : ""}`;
+            btn.title = iconName;
+            btn.setAttribute("aria-label", iconName);
+            btn.setAttribute("role", "option");
+            btn.setAttribute("data-icon-name", iconName);
+            btn.setAttribute("data-icon-class", className);
+            if (isSelected) {
+                btn.setAttribute("aria-selected", "true");
+            }
+            const iconEl = document.createElement("i");
+            iconEl.className = className;
+            iconEl.setAttribute("aria-hidden", "true");
+            btn.appendChild(iconEl);
+            btn.addEventListener("click", (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.onSelect({
+                    name: iconName,
+                    className,
+                    set: this.currentSet.id
+                });
+            });
+            fragment.appendChild(btn);
+        }
+        this.container.appendChild(fragment);
+        this.renderedCount += nextBatch.length;
+    }
+    destroy() {
+        this.bodyElement.removeEventListener("scroll", this.scrollListener);
+    }
+}
+//# sourceMappingURL=grid.js.map

package/dist/core/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../src/core/grid.ts"],"names":[],"mappings":"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"}

package/dist/core/icon-picker.d.ts

@@ -0,0 +1,29 @@
+import type { IconPickerOptions } from "../types";
+export declare class IconPicker {
+    private target;
+    private inputElement;
+    private options;
+    private sets;
+    private activeSetId;
+    private currentSearch;
+    private currentValue;
+    private isOpen;
+    private dom;
+    private positioner;
+    private grid;
+    private outsideClickListener;
+    private keydownListener;
+    private targetClickListener;
+    constructor(target: HTMLElement | string, options?: IconPickerOptions);
+    private bindEvents;
+    private filterIcons;
+    private handleIconSelect;
+    setValue(val: string): void;
+    getValue(): string;
+    private updatePreview;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    destroy(): void;
+}
+//# sourceMappingURL=icon-picker.d.ts.map

package/dist/core/icon-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker.d.ts","sourceRoot":"","sources":["../../src/core/icon-picker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,iBAAiB,EAAqB,MAAM,UAAU,CAAC;AAO/E,qBAAa,UAAU;IACrB,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,YAAY,CAAiC;IACrD,OAAO,CAAC,OAAO,CAKb;IAEF,OAAO,CAAC,IAAI,CAA2B;IACvC,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,MAAM,CAAS;IAEvB,OAAO,CAAC,GAAG,CAAmB;IAC9B,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,IAAI,CAAW;IAEvB,OAAO,CAAC,oBAAoB,CAA0B;IACtD,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAO,CAAC,mBAAmB,CAA0B;gBAEzC,MAAM,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,GAAE,iBAAsB;IAqIzE,OAAO,CAAC,UAAU;IA6DlB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,gBAAgB;IAUjB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAW3B,QAAQ,IAAI,MAAM;IAIzB,OAAO,CAAC,aAAa;IAuBd,IAAI,IAAI,IAAI;IAwCZ,KAAK,IAAI,IAAI;IAab,MAAM,IAAI,IAAI;IAQd,OAAO,IAAI,IAAI;CAMvB"}