@ktnpm_devops/react-component 0.13.1 → 0.15.0

package/dist/index38.js

@@ -1,114 +1,230 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { clsx } from "./index57.js";
-import { PAGINATION, SVG_STROKE_WIDTH, SVG_VIEWBOX, ICON_SIZE } from "./index59.js";
-import styles from "./index78.js";
-function range(start, end) {
-  const out = [];
-  for (let page = start; page <= end; page += 1) out.push(page);
-  return out;
-}
-function getPaginationItems(currentPage, totalPages, siblingCount, boundaryCount) {
-  const totalNumbers = boundaryCount * 2 + siblingCount * 2 + 3;
-  if (totalPages <= totalNumbers) return range(1, totalPages);
-  const startPages = range(1, boundaryCount);
-  const endPages = range(totalPages - boundaryCount + 1, totalPages);
-  const siblingsStart = Math.max(
-    Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),
-    boundaryCount + 2
-  );
-  const siblingsEnd = Math.min(
-    Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2),
-    endPages[0] - 2
-  );
-  const items = [...startPages];
-  items.push(siblingsStart > boundaryCount + 2 ? "ellipsis" : boundaryCount + 1);
-  items.push(...range(siblingsStart, siblingsEnd));
-  items.push(siblingsEnd < totalPages - boundaryCount - 1 ? "ellipsis" : totalPages - boundaryCount);
-  items.push(...endPages);
-  return items;
-}
-function Chevron({ direction }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: ICON_SIZE.MD,
-      height: ICON_SIZE.MD,
-      viewBox: SVG_VIEWBOX,
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: SVG_STROKE_WIDTH,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx("polyline", { points: direction === "left" ? "15 18 9 12 15 6" : "9 18 15 12 9 6" })
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useMemo, useCallback, useEffect } from "react";
+import { clsx } from "./index59.js";
+import { useClickOutside } from "./index4.js";
+import { SVG_STROKE_WIDTH, SVG_VIEWBOX, ICON_SIZE } from "./index65.js";
+import styles from "./index120.js";
+const arraysMatch = (a, b) => {
+  if (a.length !== b.length) return false;
+  const set = new Set(b);
+  return a.every((v) => set.has(v));
+};
+const MultiSelectDropdown = ({
+  label,
+  options,
+  selected,
+  onApply,
+  isLoading = false,
+  error = null,
+  allowCustomValues = false,
+  customTriggerLabel,
+  selectionMode,
+  emptyMeansAll = false,
+  triggerSummary = "text"
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const containerRef = useRef(null);
+  const normalizedOptions = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    options.forEach((opt) => map.set(opt.value, opt));
+    if (Array.isArray(selected)) {
+      selected.forEach((v) => {
+        if (v && !map.has(v)) map.set(v, { value: v });
+      });
+    }
+    return Array.from(map.values());
+  }, [options, selected]);
+  const filteredOptions = useMemo(() => {
+    if (!searchTerm.trim()) return normalizedOptions;
+    const term = searchTerm.trim().toLowerCase();
+    return normalizedOptions.filter((opt) => {
+      const lbl = opt.label ?? opt.value;
+      return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);
+    });
+  }, [normalizedOptions, searchTerm]);
+  const allOptionValues = useMemo(() => normalizedOptions.map((o) => o.value), [normalizedOptions]);
+  const initialSelection = useMemo(() => {
+    if (Array.isArray(selected) && selected.length) return Array.from(new Set(selected));
+    return emptyMeansAll ? allOptionValues : [];
+  }, [selected, allOptionValues, emptyMeansAll]);
+  const [pendingSelection, setPendingSelection] = useState(initialSelection);
+  const closeAndReset = useCallback(() => {
+    setIsOpen(false);
+    setPendingSelection(initialSelection);
+    setSearchTerm("");
+  }, [initialSelection]);
+  useClickOutside(containerRef, closeAndReset);
+  useEffect(() => {
+    if (isOpen) {
+      setPendingSelection(initialSelection);
+      setSearchTerm("");
+    }
+  }, [isOpen, initialSelection]);
+  useEffect(() => {
+    if (!isOpen) setPendingSelection(initialSelection);
+  }, [initialSelection, isOpen]);
+  const handleToggleOption = (value) => {
+    setPendingSelection((prev) => {
+      const unique = Array.from(new Set(prev));
+      return unique.includes(value) ? unique.filter((v) => v !== value) : [...unique, value];
+    });
+  };
+  const handleSelectAll = () => {
+    if (filteredOptions.length === 0) {
+      setPendingSelection([]);
+      return;
     }
-  );
-}
-const Pagination = forwardRef(
-  ({
-    currentPage,
-    totalItems,
-    pageSize,
-    onPageChange,
-    siblingCount = PAGINATION.SIBLING_COUNT,
-    boundaryCount = PAGINATION.BOUNDARY_COUNT,
-    showPrevNext = true,
-    className,
-    "aria-label": ariaLabel = "Pagination",
-    ...props
-  }, ref) => {
-    const totalPages = Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize)));
-    const page = Math.min(Math.max(currentPage, 1), totalPages);
-    const items = getPaginationItems(page, totalPages, siblingCount, boundaryCount);
-    const goTo = (target) => {
-      const next = Math.min(Math.max(target, 1), totalPages);
-      if (next !== page) onPageChange(next);
-    };
-    return /* @__PURE__ */ jsx("nav", { ref, "aria-label": ariaLabel, className: clsx(styles.root, className), ...props, children: /* @__PURE__ */ jsxs("ul", { className: styles.list, children: [
-      showPrevNext && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: styles.arrow,
-          onClick: () => goTo(page - 1),
-          disabled: page <= 1,
-          "aria-label": "Go to previous page",
-          children: /* @__PURE__ */ jsx(Chevron, { direction: "left" })
-        }
-      ) }),
-      items.map(
-        (item, index) => item === "ellipsis" ? (
-          // eslint-disable-next-line react/no-array-index-key
-          /* @__PURE__ */ jsx("li", { className: styles.ellipsis, "aria-hidden": "true", children: "…" }, `ellipsis-${index}`)
-        ) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-          "button",
+    setPendingSelection(filteredOptions.map((o) => o.value));
+  };
+  const handleClearAll = () => setPendingSelection([]);
+  const handleApply = () => {
+    const unique = Array.from(new Set(pendingSelection));
+    const mode = unique.length === 0 || unique.length === normalizedOptions.length ? "all" : "custom";
+    onApply(unique, { selectionMode: mode });
+    setIsOpen(false);
+  };
+  const handleCancel = () => {
+    setPendingSelection(Array.from(new Set(Array.isArray(selected) ? selected : [])));
+    setIsOpen(false);
+  };
+  const pendingSet = useMemo(() => new Set(pendingSelection), [pendingSelection]);
+  const selectedSet = useMemo(() => new Set(Array.isArray(selected) ? selected : []), [selected]);
+  const hasChanges = !arraysMatch(Array.from(pendingSet), Array.from(selectedSet));
+  const totalOptions = normalizedOptions.length;
+  const selectedSize = selectedSet.size;
+  const pendingSize = pendingSet.size;
+  const isSelectedAll = selectedSize === 0 || selectedSize === totalOptions;
+  const isPendingAll = pendingSize === 0 || pendingSize === totalOptions;
+  const selectedCountValue = isSelectedAll ? totalOptions : selectedSize;
+  const pendingCountValue = isPendingAll ? totalOptions : pendingSize;
+  const isActiveFilter = selectionMode !== void 0 ? selectionMode === "custom" : !isSelectedAll;
+  const getSelectedLabel = () => {
+    if (isSelectedAll) return "All";
+    if (selectedSize === 1) {
+      const val = Array.from(selectedSet)[0];
+      const opt = normalizedOptions.find((o) => o.value === val);
+      return (opt == null ? void 0 : opt.label) || (opt == null ? void 0 : opt.value) || String(selectedCountValue);
+    }
+    return String(selectedCountValue);
+  };
+  const shouldDisableControls = isLoading || options.length === 0;
+  const normalizedSearch = searchTerm.trim();
+  const canCreateCustom = allowCustomValues && normalizedSearch.length > 0 && !normalizedOptions.some((o) => o.value.toLowerCase() === normalizedSearch.toLowerCase());
+  const handleCreateCustom = () => {
+    if (!normalizedSearch) return;
+    setPendingSelection((prev) => Array.from(/* @__PURE__ */ new Set([...prev, normalizedSearch])));
+    setSearchTerm("");
+  };
+  const handleClearFilter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onApply([], { selectionMode: "all" });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.root, ref: containerRef, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: clsx(styles.trigger, { [styles.active]: isOpen }),
+        onClick: () => setIsOpen((prev) => !prev),
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        children: /* @__PURE__ */ jsxs("div", { className: styles.triggerContent, children: [
+          /* @__PURE__ */ jsx("svg", { className: styles.chevron, width: ICON_SIZE.MD, height: ICON_SIZE.MD, viewBox: SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" }) }),
+          /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
+          /* @__PURE__ */ jsxs("div", { className: styles.valueGroup, children: [
+            triggerSummary === "text" && /* @__PURE__ */ jsx("span", { className: styles.value, children: customTriggerLabel || getSelectedLabel() }),
+            (triggerSummary === "count" ? selectedSize > 0 : isActiveFilter) && /* @__PURE__ */ jsx("span", { className: styles.badge, children: selectedCountValue }),
+            isActiveFilter && /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                className: styles.clear,
+                onClick: handleClearFilter,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleClearFilter(e);
+                  }
+                },
+                "aria-label": `Clear ${label} filter`,
+                children: /* @__PURE__ */ jsxs("svg", { width: ICON_SIZE.SM, height: ICON_SIZE.SM, viewBox: SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ] })
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { className: styles.panel, role: "dialog", "aria-label": `${label} filter`, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+        /* @__PURE__ */ jsx(
+          "input",
           {
-            type: "button",
-            className: clsx(styles.page, item === page && styles.isActive),
-            onClick: () => goTo(item),
-            "aria-current": item === page ? "page" : void 0,
-            "aria-label": `Go to page ${item}`,
-            children: item
+            type: "search",
+            className: styles.search,
+            placeholder: `Search ${label.toLowerCase()}`,
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            disabled: shouldDisableControls
           }
-        ) }, item)
-      ),
-      showPrevNext && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: styles.arrow,
-          onClick: () => goTo(page + 1),
-          disabled: page >= totalPages,
-          "aria-label": "Go to next page",
-          children: /* @__PURE__ */ jsx(Chevron, { direction: "right" })
-        }
-      ) })
-    ] }) });
-  }
-);
-Pagination.displayName = "Pagination";
+        ),
+        /* @__PURE__ */ jsxs("div", { className: styles.headerActions, children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: styles.chip, onClick: handleSelectAll, disabled: shouldDisableControls, children: "Select all" }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: clsx(styles.chip, styles.chipGhost), onClick: handleClearAll, disabled: pendingSize === 0, children: "Deselect all" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.list, role: "listbox", children: [
+        isLoading && /* @__PURE__ */ jsx("p", { className: styles.status, children: "Loading options..." }),
+        !isLoading && error && /* @__PURE__ */ jsx("p", { className: clsx(styles.status, styles.statusError), children: error }),
+        !isLoading && !error && filteredOptions.length === 0 && /* @__PURE__ */ jsx("p", { className: styles.status, children: "No matches" }),
+        !isLoading && !error && filteredOptions.map((opt) => {
+          const checked = pendingSet.has(opt.value);
+          return /* @__PURE__ */ jsxs("label", { className: styles.option, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked,
+                onChange: () => handleToggleOption(opt.value),
+                "aria-checked": checked
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: styles.optionLabel, children: [
+              opt.label ?? opt.value,
+              opt.count !== void 0 && /* @__PURE__ */ jsx("span", { className: styles.optionCount, children: opt.count })
+            ] })
+          ] }, opt.value);
+        }),
+        !isLoading && !error && canCreateCustom && /* @__PURE__ */ jsxs("button", { type: "button", className: styles.create, onClick: handleCreateCustom, children: [
+          'Use "',
+          normalizedSearch,
+          '"'
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
+        /* @__PURE__ */ jsxs("span", { className: styles.selection, children: [
+          isPendingAll ? "All selected" : `${pendingCountValue} selected`,
+          hasChanges && /* @__PURE__ */ jsxs("span", { className: styles.selectionDelta, children: [
+            "(",
+            pendingCountValue - selectedCountValue >= 0 ? "+" : "",
+            pendingCountValue - selectedCountValue,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.footerActions, children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: clsx(styles.chip, styles.chipGhost), onClick: handleCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: styles.chip, onClick: handleApply, disabled: !hasChanges, children: "Apply" })
+        ] })
+      ] })
+    ] })
+  ] });
+};
 export {
-  Pagination
+  MultiSelectDropdown
 };
 //# sourceMappingURL=index38.js.map

package/dist/index38.js.map

@@ -1 +1 @@
-{"version":3,"file":"index38.js","sources":["../src/primitives/Pagination/Pagination.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { ICON_SIZE, PAGINATION, SVG_STROKE_WIDTH, SVG_VIEWBOX } from '../../constants';\nimport type { PaginationItem, PaginationProps } from './Pagination.types';\nimport styles from './Pagination.module.css';\n\nfunction range(start: number, end: number): number[] {\n  const out: number[] = [];\n  for (let page = start; page <= end; page += 1) out.push(page);\n  return out;\n}\n\n/**\n * Builds the sequence of page numbers and ellipsis gaps to render, keeping the\n * first/last boundaries and a window of siblings around the current page.\n */\nfunction getPaginationItems(\n  currentPage: number,\n  totalPages: number,\n  siblingCount: number,\n  boundaryCount: number,\n): PaginationItem[] {\n  const totalNumbers = boundaryCount * 2 + siblingCount * 2 + 3;\n  if (totalPages <= totalNumbers) return range(1, totalPages);\n\n  const startPages = range(1, boundaryCount);\n  const endPages = range(totalPages - boundaryCount + 1, totalPages);\n\n  const siblingsStart = Math.max(\n    Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2,\n  );\n  const siblingsEnd = Math.min(\n    Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages[0] - 2,\n  );\n\n  const items: PaginationItem[] = [...startPages];\n  items.push(siblingsStart > boundaryCount + 2 ? 'ellipsis' : boundaryCount + 1);\n  items.push(...range(siblingsStart, siblingsEnd));\n  items.push(siblingsEnd < totalPages - boundaryCount - 1 ? 'ellipsis' : totalPages - boundaryCount);\n  items.push(...endPages);\n\n  return items;\n}\n\nfunction Chevron({ direction }: { direction: 'left' | 'right' }) {\n  return (\n    <svg\n      width={ICON_SIZE.MD}\n      height={ICON_SIZE.MD}\n      viewBox={SVG_VIEWBOX}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={SVG_STROKE_WIDTH}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points={direction === 'left' ? '15 18 9 12 15 6' : '9 18 15 12 9 6'} />\n    </svg>\n  );\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      currentPage,\n      totalItems,\n      pageSize,\n      onPageChange,\n      siblingCount = PAGINATION.SIBLING_COUNT,\n      boundaryCount = PAGINATION.BOUNDARY_COUNT,\n      showPrevNext = true,\n      className,\n      'aria-label': ariaLabel = 'Pagination',\n      ...props\n    },\n    ref,\n  ) => {\n    const totalPages = Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize)));\n    const page = Math.min(Math.max(currentPage, 1), totalPages);\n    const items = getPaginationItems(page, totalPages, siblingCount, boundaryCount);\n\n    const goTo = (target: number) => {\n      const next = Math.min(Math.max(target, 1), totalPages);\n      if (next !== page) onPageChange(next);\n    };\n\n    return (\n      <nav ref={ref} aria-label={ariaLabel} className={clsx(styles.root, className)} {...props}>\n        <ul className={styles.list}>\n          {showPrevNext && (\n            <li>\n              <button\n                type=\"button\"\n                className={styles.arrow}\n                onClick={() => goTo(page - 1)}\n                disabled={page <= 1}\n                aria-label=\"Go to previous page\"\n              >\n                <Chevron direction=\"left\" />\n              </button>\n            </li>\n          )}\n\n          {items.map((item, index) =>\n            item === 'ellipsis' ? (\n              // eslint-disable-next-line react/no-array-index-key\n              <li key={`ellipsis-${index}`} className={styles.ellipsis} aria-hidden=\"true\">\n                &hellip;\n              </li>\n            ) : (\n              <li key={item}>\n                <button\n                  type=\"button\"\n                  className={clsx(styles.page, item === page && styles.isActive)}\n                  onClick={() => goTo(item)}\n                  aria-current={item === page ? 'page' : undefined}\n                  aria-label={`Go to page ${item}`}\n                >\n                  {item}\n                </button>\n              </li>\n            ),\n          )}\n\n          {showPrevNext && (\n            <li>\n              <button\n                type=\"button\"\n                className={styles.arrow}\n                onClick={() => goTo(page + 1)}\n                disabled={page >= totalPages}\n                aria-label=\"Go to next page\"\n              >\n                <Chevron direction=\"right\" />\n              </button>\n            </li>\n          )}\n        </ul>\n      </nav>\n    );\n  },\n);\n\nPagination.displayName = 'Pagination';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index38.js","sources":["../src/composites/MultiSelectDropdown/MultiSelectDropdown.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useMemo, useCallback } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { ICON_SIZE, SVG_VIEWBOX, SVG_STROKE_WIDTH } from '../../constants';\nimport styles from './MultiSelectDropdown.module.css';\n\nexport interface MultiSelectOption {\n  value: string;\n  label?: string;\n  count?: number;\n}\n\nexport interface MultiSelectDropdownProps {\n  /** Label displayed on the trigger button. */\n  label: string;\n  /** Available options. */\n  options: MultiSelectOption[];\n  /** Currently selected values (controlled). */\n  selected: string[];\n  /** Called when the user applies a new selection. */\n  onApply: (values: string[], metadata: { selectionMode: 'all' | 'custom' }) => void;\n  /** Show loading indicator and disable controls. */\n  isLoading?: boolean;\n  /** Error message to display in the option list. */\n  error?: string | null;\n  /** Allow creating options from the search term. */\n  allowCustomValues?: boolean;\n  /** Override the trigger value label. */\n  customTriggerLabel?: string;\n  /** Explicit selection mode override. */\n  selectionMode?: 'all' | 'custom';\n  /** Treat an empty `selected` array as \"all selected\" (opt-in, legacy behavior). */\n  emptyMeansAll?: boolean;\n  /** What the trigger shows as a summary: the value label ('text') or just the count badge ('count'). */\n  triggerSummary?: 'text' | 'count';\n}\n\nconst arraysMatch = (a: string[], b: string[]): boolean => {\n  if (a.length !== b.length) return false;\n  const set = new Set(b);\n  return a.every((v) => set.has(v));\n};\n\nexport const MultiSelectDropdown = ({\n  label,\n  options,\n  selected,\n  onApply,\n  isLoading = false,\n  error = null,\n  allowCustomValues = false,\n  customTriggerLabel,\n  selectionMode,\n  emptyMeansAll = false,\n  triggerSummary = 'text',\n}: MultiSelectDropdownProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [searchTerm, setSearchTerm] = useState('');\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const normalizedOptions = useMemo<MultiSelectOption[]>(() => {\n    const map = new Map<string, MultiSelectOption>();\n    options.forEach((opt) => map.set(opt.value, opt));\n    if (Array.isArray(selected)) {\n      selected.forEach((v) => {\n        if (v && !map.has(v)) map.set(v, { value: v });\n      });\n    }\n    return Array.from(map.values());\n  }, [options, selected]);\n\n  const filteredOptions = useMemo<MultiSelectOption[]>(() => {\n    if (!searchTerm.trim()) return normalizedOptions;\n    const term = searchTerm.trim().toLowerCase();\n    return normalizedOptions.filter((opt) => {\n      const lbl = opt.label ?? opt.value;\n      return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);\n    });\n  }, [normalizedOptions, searchTerm]);\n\n  const allOptionValues = useMemo(() => normalizedOptions.map((o) => o.value), [normalizedOptions]);\n\n  const initialSelection = useMemo(() => {\n    if (Array.isArray(selected) && selected.length) return Array.from(new Set(selected));\n    return emptyMeansAll ? allOptionValues : [];\n  }, [selected, allOptionValues, emptyMeansAll]);\n\n  const [pendingSelection, setPendingSelection] = useState<string[]>(initialSelection);\n\n  const closeAndReset = useCallback(() => {\n    setIsOpen(false);\n    setPendingSelection(initialSelection);\n    setSearchTerm('');\n  }, [initialSelection]);\n\n  useClickOutside(containerRef, closeAndReset);\n\n  useEffect(() => {\n    if (isOpen) {\n      setPendingSelection(initialSelection);\n      setSearchTerm('');\n    }\n  }, [isOpen, initialSelection]);\n\n  useEffect(() => {\n    if (!isOpen) setPendingSelection(initialSelection);\n  }, [initialSelection, isOpen]);\n\n  const handleToggleOption = (value: string) => {\n    setPendingSelection((prev) => {\n      const unique = Array.from(new Set(prev));\n      return unique.includes(value) ? unique.filter((v) => v !== value) : [...unique, value];\n    });\n  };\n\n  const handleSelectAll = () => {\n    if (filteredOptions.length === 0) {\n      setPendingSelection([]);\n      return;\n    }\n    setPendingSelection(filteredOptions.map((o) => o.value));\n  };\n\n  const handleClearAll = () => setPendingSelection([]);\n\n  const handleApply = () => {\n    const unique = Array.from(new Set(pendingSelection));\n    const mode: 'all' | 'custom' =\n      unique.length === 0 || unique.length === normalizedOptions.length ? 'all' : 'custom';\n    onApply(unique, { selectionMode: mode });\n    setIsOpen(false);\n  };\n\n  const handleCancel = () => {\n    setPendingSelection(Array.from(new Set(Array.isArray(selected) ? selected : [])));\n    setIsOpen(false);\n  };\n\n  const pendingSet = useMemo(() => new Set(pendingSelection), [pendingSelection]);\n  const selectedSet = useMemo(() => new Set(Array.isArray(selected) ? selected : []), [selected]);\n  const hasChanges = !arraysMatch(Array.from(pendingSet), Array.from(selectedSet));\n\n  const totalOptions = normalizedOptions.length;\n  const selectedSize = selectedSet.size;\n  const pendingSize = pendingSet.size;\n  const isSelectedAll = selectedSize === 0 || selectedSize === totalOptions;\n  const isPendingAll = pendingSize === 0 || pendingSize === totalOptions;\n  const selectedCountValue = isSelectedAll ? totalOptions : selectedSize;\n  const pendingCountValue = isPendingAll ? totalOptions : pendingSize;\n\n  const isActiveFilter = selectionMode !== undefined ? selectionMode === 'custom' : !isSelectedAll;\n\n  const getSelectedLabel = (): string => {\n    if (isSelectedAll) return 'All';\n    if (selectedSize === 1) {\n      const val = Array.from(selectedSet)[0];\n      const opt = normalizedOptions.find((o) => o.value === val);\n      return opt?.label || opt?.value || String(selectedCountValue);\n    }\n    return String(selectedCountValue);\n  };\n\n  const shouldDisableControls = isLoading || options.length === 0;\n\n  const normalizedSearch = searchTerm.trim();\n  const canCreateCustom =\n    allowCustomValues &&\n    normalizedSearch.length > 0 &&\n    !normalizedOptions.some((o) => o.value.toLowerCase() === normalizedSearch.toLowerCase());\n\n  const handleCreateCustom = () => {\n    if (!normalizedSearch) return;\n    setPendingSelection((prev) => Array.from(new Set([...prev, normalizedSearch])));\n    setSearchTerm('');\n  };\n\n  const handleClearFilter = (e: React.MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onApply([], { selectionMode: 'all' });\n  };\n\n  return (\n    <div className={styles.root} ref={containerRef}>\n      <button\n        type=\"button\"\n        className={clsx(styles.trigger, { [styles.active]: isOpen })}\n        onClick={() => setIsOpen((prev) => !prev)}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n      >\n        <div className={styles.triggerContent}>\n          <svg className={styles.chevron} width={ICON_SIZE.MD} height={ICON_SIZE.MD} viewBox={SVG_VIEWBOX} fill=\"none\" stroke=\"currentColor\" strokeWidth={SVG_STROKE_WIDTH} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n            <polyline points=\"6 9 12 15 18 9\" />\n          </svg>\n          <span className={styles.label}>{label}</span>\n          <div className={styles.valueGroup}>\n            {triggerSummary === 'text' && (\n              <span className={styles.value}>{customTriggerLabel || getSelectedLabel()}</span>\n            )}\n            {(triggerSummary === 'count' ? selectedSize > 0 : isActiveFilter) && (\n              <span className={styles.badge}>{selectedCountValue}</span>\n            )}\n            {isActiveFilter && (\n              <div\n                role=\"button\"\n                tabIndex={0}\n                className={styles.clear}\n                onClick={handleClearFilter}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    handleClearFilter(e as unknown as React.MouseEvent);\n                  }\n                }}\n                aria-label={`Clear ${label} filter`}\n              >\n                <svg width={ICON_SIZE.SM} height={ICON_SIZE.SM} viewBox={SVG_VIEWBOX} fill=\"none\" stroke=\"currentColor\" strokeWidth={SVG_STROKE_WIDTH} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n                </svg>\n              </div>\n            )}\n          </div>\n        </div>\n      </button>\n\n      {isOpen && (\n        <div className={styles.panel} role=\"dialog\" aria-label={`${label} filter`}>\n          <div className={styles.header}>\n            <input\n              type=\"search\"\n              className={styles.search}\n              placeholder={`Search ${label.toLowerCase()}`}\n              value={searchTerm}\n              onChange={(e) => setSearchTerm(e.target.value)}\n              disabled={shouldDisableControls}\n            />\n            <div className={styles.headerActions}>\n              <button type=\"button\" className={styles.chip} onClick={handleSelectAll} disabled={shouldDisableControls}>\n                Select all\n              </button>\n              <button type=\"button\" className={clsx(styles.chip, styles.chipGhost)} onClick={handleClearAll} disabled={pendingSize === 0}>\n                Deselect all\n              </button>\n            </div>\n          </div>\n\n          <div className={styles.list} role=\"listbox\">\n            {isLoading && <p className={styles.status}>Loading options...</p>}\n            {!isLoading && error && <p className={clsx(styles.status, styles.statusError)}>{error}</p>}\n            {!isLoading && !error && filteredOptions.length === 0 && (\n              <p className={styles.status}>No matches</p>\n            )}\n            {!isLoading &&\n              !error &&\n              filteredOptions.map((opt) => {\n                const checked = pendingSet.has(opt.value);\n                return (\n                  <label key={opt.value} className={styles.option}>\n                    <input\n                      type=\"checkbox\"\n                      checked={checked}\n                      onChange={() => handleToggleOption(opt.value)}\n                      aria-checked={checked}\n                    />\n                    <span className={styles.optionLabel}>\n                      {opt.label ?? opt.value}\n                      {opt.count !== undefined && (\n                        <span className={styles.optionCount}>{opt.count}</span>\n                      )}\n                    </span>\n                  </label>\n                );\n              })}\n            {!isLoading && !error && canCreateCustom && (\n              <button type=\"button\" className={styles.create} onClick={handleCreateCustom}>\n                Use &quot;{normalizedSearch}&quot;\n              </button>\n            )}\n          </div>\n\n          <div className={styles.footer}>\n            <span className={styles.selection}>\n              {isPendingAll ? 'All selected' : `${pendingCountValue} selected`}\n              {hasChanges && (\n                <span className={styles.selectionDelta}>\n                  ({pendingCountValue - selectedCountValue >= 0 ? '+' : ''}\n                  {pendingCountValue - selectedCountValue})\n                </span>\n              )}\n            </span>\n            <div className={styles.footerActions}>\n              <button type=\"button\" className={clsx(styles.chip, styles.chipGhost)} onClick={handleCancel}>\n                Cancel\n              </button>\n              <button type=\"button\" className={styles.chip} onClick={handleApply} disabled={!hasChanges}>\n                Apply\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/index39.cjs

@@ -2,71 +2,37 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const clsx = require("./index57.cjs");
-const constants = require("./index59.cjs");
-const RangeSlider_module = require("./index69.cjs");
-const buildTicks = (min, max, step) => {
-  const count = Math.round((max - min) / step);
-  return Array.from({ length: count + 1 }, (_, i) => min + i * step);
-};
-const RangeSlider = react.forwardRef(
-  ({
-    min,
-    max,
-    step = constants.RANGE_SLIDER.DEFAULT_STEP,
-    value,
-    onChange,
-    disabled = false,
-    minAriaLabel = "Minimum value",
-    maxAriaLabel = "Maximum value",
-    showTicks = false
-  }, ref) => {
-    const percentage = (val) => Math.min(100, Math.max(0, (val - min) / (max - min) * 100));
-    const handleMinChange = (raw) => onChange([Math.min(raw, value[1]), value[1]]);
-    const handleMaxChange = (raw) => onChange([value[0], Math.max(raw, value[0])]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx.clsx(RangeSlider_module.default.root, disabled && RangeSlider_module.default.disabled), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: RangeSlider_module.default.rail, title: `${min} – ${max}` }),
-      showTicks && buildTicks(min, max, step).map((tick) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: RangeSlider_module.default.tick, style: { left: `${percentage(tick)}%` } }, tick)),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: RangeSlider_module.default.fill,
-          style: { left: `${percentage(value[0])}%`, right: `${100 - percentage(value[1])}%` }
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "range",
-          className: RangeSlider_module.default.thumb,
-          min,
-          max,
-          step,
-          value: value[0],
-          disabled,
-          "aria-label": minAriaLabel,
-          onChange: (e) => handleMinChange(Number(e.target.value))
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: RangeSlider_module.default.valueTooltip, style: { left: `${percentage(value[0])}%` }, "aria-hidden": "true", children: value[0] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "range",
-          className: RangeSlider_module.default.thumb,
-          min,
-          max,
-          step,
-          value: value[1],
-          disabled,
-          "aria-label": maxAriaLabel,
-          onChange: (e) => handleMaxChange(Number(e.target.value))
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: RangeSlider_module.default.valueTooltip, style: { left: `${percentage(value[1])}%` }, "aria-hidden": "true", children: value[1] })
+const clsx = require("./index59.cjs");
+const NavItem_module = require("./index104.cjs");
+const NavItem = react.forwardRef(
+  ({ icon, label, active = false, badge, collapsed = false, disabled = false, href, onClick, className }, ref) => {
+    const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: NavItem_module.default.icon, children: icon }),
+      !collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: NavItem_module.default.label, children: label }),
+      !collapsed && badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: NavItem_module.default.badge, children: badge })
     ] });
+    const sharedProps = {
+      className: clsx.clsx(NavItem_module.default.root, { [NavItem_module.default.active]: active, [NavItem_module.default.collapsed]: collapsed, [NavItem_module.default.disabled]: disabled }, className),
+      "aria-current": active ? "page" : void 0,
+      "aria-disabled": disabled || void 0,
+      title: collapsed ? label : void 0
+    };
+    if (href && !disabled) {
+      return /* @__PURE__ */ jsxRuntime.jsx("a", { ref, href, ...sharedProps, children: content });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: disabled ? void 0 : onClick,
+        disabled,
+        ...sharedProps,
+        children: content
+      }
+    );
   }
 );
-RangeSlider.displayName = "RangeSlider";
-exports.RangeSlider = RangeSlider;
+NavItem.displayName = "NavItem";
+exports.NavItem = NavItem;
 //# sourceMappingURL=index39.cjs.map

package/dist/index39.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index39.cjs","sources":["../src/primitives/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { RangeSliderProps } from './RangeSlider.types';\nimport { RANGE_SLIDER } from '../../constants';\nimport styles from './RangeSlider.module.css';\n\nconst buildTicks = (min: number, max: number, step: number): number[] => {\n  const count = Math.round((max - min) / step);\n  return Array.from({ length: count + 1 }, (_, i) => min + i * step);\n};\n\nexport const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(\n  (\n    {\n      min,\n      max,\n      step = RANGE_SLIDER.DEFAULT_STEP,\n      value,\n      onChange,\n      disabled = false,\n      minAriaLabel = 'Minimum value',\n      maxAriaLabel = 'Maximum value',\n      showTicks = false,\n    },\n    ref,\n  ) => {\n    const percentage = (val: number) => Math.min(100, Math.max(0, ((val - min) / (max - min)) * 100));\n\n    const handleMinChange = (raw: number) => onChange([Math.min(raw, value[1]), value[1]]);\n    const handleMaxChange = (raw: number) => onChange([value[0], Math.max(raw, value[0])]);\n\n    return (\n      <div ref={ref} className={clsx(styles.root, disabled && styles.disabled)}>\n        <div className={styles.rail} title={`${min} – ${max}`} />\n        {showTicks &&\n          buildTicks(min, max, step).map((tick) => (\n            <span key={tick} className={styles.tick} style={{ left: `${percentage(tick)}%` }} />\n          ))}\n        <div\n          className={styles.fill}\n          style={{ left: `${percentage(value[0])}%`, right: `${100 - percentage(value[1])}%` }}\n        />\n        <input\n          type=\"range\"\n          className={styles.thumb}\n          min={min}\n          max={max}\n          step={step}\n          value={value[0]}\n          disabled={disabled}\n          aria-label={minAriaLabel}\n          onChange={(e) => handleMinChange(Number(e.target.value))}\n        />\n        <span className={styles.valueTooltip} style={{ left: `${percentage(value[0])}%` }} aria-hidden=\"true\">\n          {value[0]}\n        </span>\n        <input\n          type=\"range\"\n          className={styles.thumb}\n          min={min}\n          max={max}\n          step={step}\n          value={value[1]}\n          disabled={disabled}\n          aria-label={maxAriaLabel}\n          onChange={(e) => handleMaxChange(Number(e.target.value))}\n        />\n        <span className={styles.valueTooltip} style={{ left: `${percentage(value[1])}%` }} aria-hidden=\"true\">\n          {value[1]}\n        </span>\n      </div>\n    );\n  },\n);\n\nRangeSlider.displayName = 'RangeSlider';\n"],"names":["forwardRef","RANGE_SLIDER","jsxs","clsx","styles","jsx"],"mappings":";;;;;;;AAMA,MAAM,aAAa,CAAC,KAAa,KAAa,SAA2B;AACvE,QAAM,QAAQ,KAAK,OAAO,MAAM,OAAO,IAAI;AAC3C,SAAO,MAAM,KAAK,EAAE,QAAQ,QAAQ,KAAK,CAAC,GAAG,MAAM,MAAM,IAAI,IAAI;AACnE;AAEO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAOC,UAAAA,aAAa;AAAA,IACpB;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,eAAe;AAAA,IACf,eAAe;AAAA,IACf,YAAY;AAAA,EAAA,GAEd,QACG;AACH,UAAM,aAAa,CAAC,QAAgB,KAAK,IAAI,KAAK,KAAK,IAAI,IAAK,MAAM,QAAQ,MAAM,OAAQ,GAAG,CAAC;AAEhG,UAAM,kBAAkB,CAAC,QAAgB,SAAS,CAAC,KAAK,IAAI,KAAK,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;AACrF,UAAM,kBAAkB,CAAC,QAAgB,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC;AAErF,WACEC,2BAAAA,KAAC,OAAA,EAAI,KAAU,WAAWC,KAAAA,KAAKC,2BAAO,MAAM,YAAYA,mBAAAA,QAAO,QAAQ,GACrE,UAAA;AAAA,MAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,mBAAAA,QAAO,MAAM,OAAO,GAAG,GAAG,MAAM,GAAG,GAAA,CAAI;AAAA,MACtD,aACC,WAAW,KAAK,KAAK,IAAI,EAAE,IAAI,CAAC,SAC9BC,+BAAC,QAAA,EAAgB,WAAWD,2BAAO,MAAM,OAAO,EAAE,MAAM,GAAG,WAAW,IAAI,CAAC,MAAI,GAApE,IAAuE,CACnF;AAAA,MACHC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWD,mBAAAA,QAAO;AAAA,UAClB,OAAO,EAAE,MAAM,GAAG,WAAW,MAAM,CAAC,CAAC,CAAC,KAAK,OAAO,GAAG,MAAM,WAAW,MAAM,CAAC,CAAC,CAAC,IAAA;AAAA,QAAI;AAAA,MAAA;AAAA,MAErFC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,mBAAAA,QAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO,MAAM,CAAC;AAAA,UACd;AAAA,UACA,cAAY;AAAA,UACZ,UAAU,CAAC,MAAM,gBAAgB,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,MAEzDC,+BAAC,UAAK,WAAWD,mBAAAA,QAAO,cAAc,OAAO,EAAE,MAAM,GAAG,WAAW,MAAM,CAAC,CAAC,CAAC,OAAO,eAAY,QAC5F,UAAA,MAAM,CAAC,GACV;AAAA,MACAC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,mBAAAA,QAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO,MAAM,CAAC;AAAA,UACd;AAAA,UACA,cAAY;AAAA,UACZ,UAAU,CAAC,MAAM,gBAAgB,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,MAEzDC,+BAAC,UAAK,WAAWD,mBAAAA,QAAO,cAAc,OAAO,EAAE,MAAM,GAAG,WAAW,MAAM,CAAC,CAAC,CAAC,OAAO,eAAY,QAC5F,UAAA,MAAM,CAAC,EAAA,CACV;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;;"}
+{"version":3,"file":"index39.cjs","sources":["../src/primitives/NavItem/NavItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { NavItemProps } from './NavItem.types';\nimport styles from './NavItem.module.css';\n\nexport const NavItem = forwardRef<HTMLElement, NavItemProps>(\n  ({ icon, label, active = false, badge, collapsed = false, disabled = false, href, onClick, className }, ref) => {\n    const content = (\n      <>\n        {icon && <span className={styles.icon}>{icon}</span>}\n        {!collapsed && <span className={styles.label}>{label}</span>}\n        {!collapsed && badge !== undefined && (\n          <span className={styles.badge}>{badge}</span>\n        )}\n      </>\n    );\n\n    const sharedProps = {\n      className: clsx(styles.root, { [styles.active]: active, [styles.collapsed]: collapsed, [styles.disabled]: disabled }, className),\n      'aria-current': active ? ('page' as const) : undefined,\n      'aria-disabled': disabled || undefined,\n      title: collapsed ? label : undefined,\n    };\n\n    if (href && !disabled) {\n      return (\n        <a ref={ref as React.Ref<HTMLAnchorElement>} href={href} {...sharedProps}>\n          {content}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n        onClick={disabled ? undefined : onClick}\n        disabled={disabled}\n        {...sharedProps}\n      >\n        {content}\n      </button>\n    );\n  },\n);\n\nNavItem.displayName = 'NavItem';\n"],"names":["forwardRef","jsxs","Fragment","jsx","styles","clsx"],"mappings":";;;;;;AAKO,MAAM,UAAUA,MAAAA;AAAAA,EACrB,CAAC,EAAE,MAAM,OAAO,SAAS,OAAO,OAAO,YAAY,OAAO,WAAW,OAAO,MAAM,SAAS,UAAA,GAAa,QAAQ;AAC9G,UAAM,UACJC,2BAAAA,KAAAC,WAAAA,UAAA,EACG,UAAA;AAAA,MAAA,QAAQC,2BAAAA,IAAC,QAAA,EAAK,WAAWC,eAAAA,QAAO,MAAO,UAAA,MAAK;AAAA,MAC5C,CAAC,aAAaD,+BAAC,UAAK,WAAWC,eAAAA,QAAO,OAAQ,UAAA,OAAM;AAAA,MACpD,CAAC,aAAa,UAAU,yCACtB,QAAA,EAAK,WAAWA,eAAAA,QAAO,OAAQ,UAAA,MAAA,CAAM;AAAA,IAAA,GAE1C;AAGF,UAAM,cAAc;AAAA,MAClB,WAAWC,KAAAA,KAAKD,uBAAO,MAAM,EAAE,CAACA,eAAAA,QAAO,MAAM,GAAG,QAAQ,CAACA,eAAAA,QAAO,SAAS,GAAG,WAAW,CAACA,eAAAA,QAAO,QAAQ,GAAG,SAAA,GAAY,SAAS;AAAA,MAC/H,gBAAgB,SAAU,SAAmB;AAAA,MAC7C,iBAAiB,YAAY;AAAA,MAC7B,OAAO,YAAY,QAAQ;AAAA,IAAA;AAG7B,QAAI,QAAQ,CAAC,UAAU;AACrB,4CACG,KAAA,EAAE,KAA0C,MAAa,GAAG,aAC1D,UAAA,SACH;AAAA,IAEJ;AAEA,WACED,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,SAAS,WAAW,SAAY;AAAA,QAChC;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,QAAQ,cAAc;;"}