@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/components/multi-select/MultiSelect.js

@@ -1,46 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Check, Square } from 'lucide-react';
-import { Button } from '../button/Button';
-import { Menu } from '../menu/Menu';
-import { Popover } from '../popover/Popover';
-import { Chip } from '../chip/Chip';
-import { ClearButton } from '../clear-button/ClearButton';
-
-function MultiSelect({
-  options,
-  selectedValues = [],
-  onChange,
-  children,
-  variant = "outlined",
-  size = "md",
-  onClear
-}) {
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      trigger: (onClick, icon) => /* @__PURE__ */ jsxs(Button, { variant, onClick, size, children: [
-        /* @__PURE__ */ jsxs("span", { children: [
-          children || "V\xE6lg",
-          " ",
-          selectedValues.length > 0 ? /* @__PURE__ */ jsx(Chip, { size: "sm", severity: "info", children: `${selectedValues.length}` }) : null
-        ] }),
-        onClear && selectedValues.length > 0 && /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }),
-        icon
-      ] }),
-      children: /* @__PURE__ */ jsx(Menu, { children: options.map((option) => /* @__PURE__ */ jsx(Menu.Item, { active: selectedValues == null ? void 0 : selectedValues.includes(option.value), children: /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: () => {
-            onChange(option.value);
-          },
-          children: [
-            /* @__PURE__ */ jsx("span", { style: { pointerEvents: "none", display: "flex", alignItems: "center" }, children: (selectedValues == null ? void 0 : selectedValues.includes(option.value)) ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Square, {}) }),
-            option.label
-          ]
-        }
-      ) }, option.value)) })
-    }
-  );
-}
-
-export { MultiSelect };

package/dist/components/nav-bar/NavBar.cjs

@@ -1,55 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./NavBar.module.css');
-var logo = require('../../assets/logo');
-var Headline = require('../headline/Headline');
-var AppHeader = require('../app-header/AppHeader');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function NavBar({ logo: logo$1, items, productName, addition }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(AppHeader.AppHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "nav",
-    {
-      className: styles__default.default.container,
-      "aria-label": productName ? `${productName} navigation` : "Main navigation",
-      children: [
-        logo$1,
-        productName && /* @__PURE__ */ jsxRuntime.jsxs(
-          "span",
-          {
-            className: styles__default.default.productName,
-            style: { display: "flex", alignItems: "center", gap: 16 },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 1, children: productName })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles__default.default.navItems, role: "list", children: items == null ? void 0 : items.filter((i) => i.enabled !== false).map((item, id) => {
-          const { component: Component, label, icon, href, active, external } = item;
-          const linkClass = [styles__default.default.link, active ? styles__default.default.active : ""].filter(Boolean).join(" ");
-          const commonProps = {
-            className: linkClass,
-            href,
-            ...active ? { "aria-current": "page" } : {},
-            ...external ? { target: "_blank", rel: "noopener noreferrer" } : {}
-          };
-          return /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles__default.default.navItem, role: "listitem", children: Component ? /* @__PURE__ */ jsxRuntime.jsxs(Component, { ...commonProps, children: [
-            icon,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs("a", { ...commonProps, children: [
-            icon,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
-          ] }) }, id);
-        }) }),
-        addition
-      ]
-    }
-  ) });
-}
-
-exports.NavBar = NavBar;

package/dist/components/page/Page.cjs

@@ -1,30 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Headline = require('../headline/Headline');
-var styles = require('./Page.module.css');
-var Breadcrumbs = require('../breadcrumbs/Breadcrumbs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Page({
-  header,
-  severity,
-  headerIcon,
-  headerAddition,
-  breadcrumbs,
-  disableContentBox,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grow-container", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headerContainer, children: [
-      breadcrumbs ? /* @__PURE__ */ jsxRuntime.jsx(Breadcrumbs.Breadcrumbs, { items: breadcrumbs }) : /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 2, severity, icon: headerIcon, children: header }),
-      headerAddition
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.content} ${disableContentBox ? styles__default.default.disableContentBox : ""}`, children })
-  ] });
-}
-
-exports.Page = Page;

package/dist/components/page-layout/PageLayout.cjs

@@ -1,101 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./PageLayout.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const PageLayoutBase = ({
-  children,
-  sidebar,
-  header,
-  containScrolling = false,
-  orientation = "vertical"
-}) => {
-  if (orientation === "vertical") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `${styles__default.default.container} ${styles__default.default.vertical} ${containScrolling ? styles__default.default.containScrolling : ""}`,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, display: "flex", height: "100%", maxWidth: "100%" }, children: [
-          sidebar,
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              style: {
-                flex: 1,
-                display: "flex",
-                flexDirection: "column",
-                height: "100%",
-                maxHeight: "100vh",
-                overflow: "auto"
-              },
-              children: [
-                header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: header }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    style: {
-                      flex: 1,
-                      display: "flex",
-                      flexDirection: "column",
-                      padding: "1rem",
-                      gap: 20,
-                      overflow: "auto"
-                    },
-                    children
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.container} ${containScrolling ? styles__default.default.containScrolling : ""}`, children });
-};
-const PageLayoutHeader = ({
-  maxWidth = true,
-  children
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerContainer, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.headerContent} ${maxWidth ? styles__default.default.maxWidth : ""}`, children }) });
-};
-const PageLayoutHero = ({
-  children,
-  link,
-  metaHeadline,
-  headline,
-  image,
-  maxWidth = true
-}) => {
-  const content = /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.heroContainer} ${maxWidth ? styles__default.default.maxWidth : ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.heroImageWrapper, children: [
-    image,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.heroText, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      metaHeadline && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.metaHeadline, children: metaHeadline }),
-      headline && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headline, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: headline }) }),
-      children
-    ] }) })
-  ] }) });
-  const rendered = link ? link(content) : content;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: rendered });
-};
-const PageLayoutContent = ({
-  maxWidth = true,
-  children
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("main", { className: `${styles__default.default.content} ${maxWidth ? styles__default.default.maxWidth : ""}`, children });
-};
-const PageLayoutFooter = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: styles__default.default.footer, children });
-};
-const PageLayout = Object.assign(PageLayoutBase, {
-  Header: PageLayoutHeader,
-  Hero: PageLayoutHero,
-  Content: PageLayoutContent,
-  Footer: PageLayoutFooter
-});
-
-exports.PageLayout = PageLayout;

package/dist/components/pagination/Pagination.cjs

@@ -1,117 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var styles = require('./Pagination.module.css');
-var Button = require('../button/Button');
-var lucideReact = require('lucide-react');
-var Popover = require('../popover/Popover');
-var Menu = require('../menu/Menu');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
-function Pagination({
-  itemsCount = 0,
-  skip = 0,
-  take = DEFAULT_PAGE_SIZE_OPTIONS[1],
-  onPageChange,
-  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS
-}) {
-  const totalPages = react.useMemo(() => {
-    const pages = Math.max(1, Math.ceil(itemsCount / Math.max(1, take)));
-    return pages;
-  }, [itemsCount, take]);
-  const currentPage = react.useMemo(() => {
-    const p = Math.floor(skip / Math.max(1, take)) + 1;
-    return Math.min(Math.max(1, p), totalPages);
-  }, [skip, take, totalPages]);
-  const emit = react.useCallback(
-    (page) => {
-      const clampedPage = Math.min(Math.max(1, page), totalPages);
-      const nextSkip = (clampedPage - 1) * take;
-      onPageChange == null ? void 0 : onPageChange({
-        page: clampedPage,
-        take,
-        skip: nextSkip,
-        totalPages
-      });
-    },
-    [onPageChange, take, totalPages]
-  );
-  const prevPage = react.useCallback(() => emit(currentPage - 1), [emit, currentPage]);
-  const nextPage = react.useCallback(() => emit(currentPage + 1), [emit, currentPage]);
-  const goToPage = react.useCallback((page) => emit(page), [emit]);
-  const pageList = react.useMemo(() => {
-    const visiblePages = 3;
-    const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
-    let startIndex = Math.max(currentPage - Math.floor(visiblePages / 2) - 1, 0);
-    let endIndex = startIndex + visiblePages;
-    if (endIndex > totalPages) {
-      endIndex = totalPages;
-      startIndex = Math.max(endIndex - visiblePages, 0);
-    }
-    return {
-      first: startIndex > 0 ? 1 : void 0,
-      items: pages.slice(startIndex, endIndex),
-      last: endIndex < totalPages ? totalPages : void 0
-    };
-  }, [totalPages, currentPage]);
-  const handlePageSizeChange = react.useCallback(
-    (size) => {
-      onPageChange == null ? void 0 : onPageChange({
-        page: 1,
-        take: size,
-        skip: 0,
-        totalPages: Math.max(1, Math.ceil(itemsCount / Math.max(1, size)))
-      });
-    },
-    [onPageChange, itemsCount]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { disabled: currentPage === 1, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, {}), onClick: prevPage }),
-    pageList.first && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.ellipsisButton, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outlined", onClick: () => goToPage(1), children: pageList.first }),
-      "\u2026"
-    ] }),
-    pageList.items.map((page) => /* @__PURE__ */ jsxRuntime.jsx(
-      Button.Button,
-      {
-        "aria-current": page === currentPage ? "page" : void 0,
-        variant: "outlined",
-        onClick: () => goToPage(page),
-        active: page === currentPage,
-        children: page
-      },
-      page
-    )),
-    pageList.last !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.ellipsisButton, children: [
-      "\u2026",
-      /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outlined", onClick: () => goToPage(pageList.last), children: pageList.last })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { disabled: currentPage === totalPages, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, {}), onClick: nextPage }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Popover.Popover,
-      {
-        trigger: (event, icon) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { variant: "outlined", onClick: event, children: [
-          "Vis ",
-          take,
-          icon
-        ] }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: size === take, children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => {
-              handlePageSizeChange(size);
-            },
-            children: size
-          }
-        ) }, size)) })
-      }
-    )
-  ] });
-}
-
-exports.Pagination = Pagination;

package/dist/components/panel/Panel.cjs

@@ -1,18 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Headline = require('../headline/Headline');
-var styles = require('./Panel.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Panel({ header, headerIcon, children, severity, size }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: `${styles__default.default.container} ${size ? styles__default.default[size] : ""}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 3, icon: headerIcon, severity, children: header }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.content, children })
-  ] });
-}
-
-exports.Panel = Panel;

package/dist/components/popover/Popover.cjs

@@ -1,132 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var styles = require('./Popover.module.css');
-var lucideReact = require('lucide-react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const Popover = react.forwardRef(function Popover2({ trigger: Trigger, children, minWidth = "200px", viewportPadding = 8, edgeBuffer = 100 }, ref) {
-  const [pos, setPos] = react.useState({ top: 0, left: 0, visible: false });
-  const containerRef = react.useRef(null);
-  const contentRef = react.useRef(null);
-  const computeAndSetPosition = react.useCallback(
-    (show) => {
-      const container = containerRef.current;
-      const content = contentRef.current;
-      if (!container || !content) return;
-      const prevVis = content.style.visibility;
-      const prevDisp = content.style.display;
-      content.style.visibility = "hidden";
-      content.style.display = "block";
-      const triggerRect = container.getBoundingClientRect();
-      const contentWidth = content.offsetWidth;
-      const contentHeight = content.offsetHeight;
-      content.style.visibility = prevVis;
-      content.style.display = prevDisp;
-      const vw = window.innerWidth;
-      const vh = window.innerHeight;
-      const spaceAbove = Math.max(0, triggerRect.top);
-      const spaceBelow = Math.max(0, vh - triggerRect.bottom);
-      const spaceLeft = Math.max(0, triggerRect.left);
-      const spaceRight = Math.max(0, vw - triggerRect.right);
-      const preferBelow = spaceBelow >= contentHeight + edgeBuffer || spaceBelow >= spaceAbove;
-      const spacing = viewportPadding;
-      const rawTop = preferBelow ? triggerRect.bottom + spacing : triggerRect.top - contentHeight - spacing;
-      const placeRightOfLeftEdge = spaceRight >= contentWidth + edgeBuffer;
-      const placeLeftOfRightEdge = spaceLeft >= contentWidth + edgeBuffer;
-      let rawLeft;
-      if (placeRightOfLeftEdge) {
-        rawLeft = triggerRect.left;
-      } else if (placeLeftOfRightEdge) {
-        rawLeft = triggerRect.right - contentWidth;
-      } else {
-        rawLeft = triggerRect.left + (triggerRect.width - contentWidth) / 2;
-      }
-      const clampedLeft = Math.max(
-        viewportPadding,
-        Math.min(rawLeft, vw - contentWidth - viewportPadding)
-      );
-      const clampedTop = Math.max(
-        viewportPadding,
-        Math.min(rawTop, vh - contentHeight - viewportPadding)
-      );
-      setPos({ top: clampedTop, left: clampedLeft, visible: show });
-    },
-    [edgeBuffer, viewportPadding]
-  );
-  const openPopover = react.useCallback(
-    (e) => {
-      if (pos.visible) {
-        setPos((p) => ({ ...p, visible: false }));
-        return;
-      }
-      computeAndSetPosition(true);
-      e == null ? void 0 : e.stopPropagation();
-    },
-    [pos.visible, computeAndSetPosition]
-  );
-  const closePopover = react.useCallback(() => {
-    setPos((p) => ({ ...p, visible: false }));
-  }, []);
-  react.useImperativeHandle(
-    ref,
-    () => ({
-      close: closePopover,
-      open: () => computeAndSetPosition(true),
-      isOpen: () => !!pos.visible
-    }),
-    [closePopover, computeAndSetPosition, pos.visible]
-  );
-  react.useEffect(() => {
-    if (!pos.visible) return;
-    const handleClickOutside = (e) => {
-      if (containerRef.current && contentRef.current && !containerRef.current.contains(e.target) && !contentRef.current.contains(e.target)) {
-        closePopover();
-      }
-    };
-    const handleEscape = (e) => {
-      if (e.key === "Escape") closePopover();
-    };
-    const handleReposition = () => computeAndSetPosition(true);
-    document.addEventListener("click", handleClickOutside);
-    document.addEventListener("keydown", handleEscape, true);
-    window.addEventListener("resize", handleReposition);
-    window.addEventListener("scroll", handleReposition, true);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape, true);
-      window.removeEventListener("resize", handleReposition);
-      window.removeEventListener("scroll", handleReposition, true);
-    };
-  }, [pos.visible, closePopover, computeAndSetPosition]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, ref: containerRef, children: [
-    Trigger(openPopover, pos.visible ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 20 })),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: contentRef,
-        className: styles__default.default.content,
-        style: {
-          position: "fixed",
-          top: pos.top,
-          left: pos.left,
-          visibility: pos.visible ? "visible" : "hidden",
-          minWidth,
-          maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
-          maxHeight: `calc(100vh - ${viewportPadding * 2}px)`,
-          overflow: "auto"
-        },
-        role: "dialog",
-        "aria-hidden": !pos.visible,
-        children
-      }
-    )
-  ] });
-});
-Popover.displayName = "Popover";
-
-exports.Popover = Popover;

package/dist/components/search-box/SearchBox.cjs

@@ -1,162 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var lucideReact = require('lucide-react');
-var Input = require('../input/Input');
-var Menu = require('../menu/Menu');
-var Popover = require('../popover/Popover');
-var Button = require('../button/Button');
-var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
-var styles = require('./SearchBox.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const SearchBox = react.forwardRef(function SearchBox2({
-  width,
-  inputSize,
-  variant,
-  result,
-  debounce = true,
-  debounceMs = 800,
-  onSearch,
-  onSelect,
-  displayPopover,
-  resultKeys,
-  resultTemplate,
-  initialTemplate,
-  popoverMinWidth = "500px",
-  noResultText = "Ingen resultater",
-  loading,
-  enableHotkey = true,
-  onButtonClick,
-  ...rest
-}, ref) {
-  const [query, setQuery] = react.useState("");
-  const [searchQuery, setSearchQuery] = react.useState("");
-  const popoverRef = react.useRef(null);
-  const internalInputRef = react.useRef(null);
-  react.useEffect(() => {
-    if (typeof ref === "function") {
-      ref(internalInputRef.current);
-    } else if (ref) {
-      ref.current = internalInputRef.current;
-    }
-  }, [ref]);
-  react.useEffect(() => {
-    if (!onSearch) return;
-    if (debounce) {
-      const handler = setTimeout(() => {
-        setSearchQuery(query);
-        onSearch(query);
-      }, debounceMs);
-      return () => clearTimeout(handler);
-    } else {
-      onSearch(query);
-    }
-  }, [query, onSearch, debounce]);
-  react.useEffect(() => {
-    function handleKeyDown(event) {
-      var _a;
-      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault();
-        (_a = internalInputRef.current) == null ? void 0 : _a.focus();
-      }
-    }
-    if (enableHotkey) {
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
-    }
-  }, [enableHotkey]);
-  const handleChange = (e) => {
-    setQuery(e.target.value);
-  };
-  function handleSelect(item) {
-    onSelect == null ? void 0 : onSelect(item);
-    reset();
-  }
-  function reset() {
-    var _a;
-    setQuery("");
-    setSearchQuery("");
-    (_a = popoverRef.current) == null ? void 0 : _a.close();
-  }
-  rest.value = query;
-  rest.onChange = handleChange;
-  const inputField = react.useMemo(() => {
-    var _a;
-    if (displayPopover) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Popover.Popover,
-        {
-          ref: popoverRef,
-          minWidth: popoverMinWidth,
-          trigger: (event) => {
-            var _a2;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              Input.Input,
-              {
-                ref: internalInputRef,
-                onInput: handleChange,
-                onFocusCapture: event,
-                onClick: event,
-                minWidth: width != null ? width : "300px",
-                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}),
-                inputSize,
-                ...rest,
-                placeholder: (_a2 = rest.placeholder) != null ? _a2 : "Indtast s\xF8geord"
-              }
-            );
-          },
-          children: (result == null ? void 0 : result.length) ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: /* @__PURE__ */ jsxRuntime.jsx("table", { children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: result.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("tr", { onClick: () => handleSelect(item), role: "button", tabIndex: 0, children: resultKeys == null ? void 0 : resultKeys.map((key) => {
-            const value = item[key] ? String(item[key]) : "";
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "td",
-              {
-                style: {
-                  whiteSpace: String(value.length < 10 ? "nowrap" : "")
-                },
-                children: String(item[key])
-              },
-              String(key)
-            );
-          }) }, index)) }) }) }) : !searchQuery && !loading ? initialTemplate || /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.resultContainer, children: "Indtast s\xF8geord" }) : loading ? /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: resultKeys == null ? void 0 : resultKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: "100%" }) }, String(key))) }, index)) }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.resultContainer, children: noResultText })
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Input.Input,
-      {
-        ref: internalInputRef,
-        onInput: handleChange,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}),
-        minWidth: width != null ? width : "300px",
-        inputSize,
-        variant,
-        ...rest,
-        placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
-      }
-    );
-  }, [
-    displayPopover,
-    popoverMinWidth,
-    result,
-    resultKeys,
-    resultTemplate,
-    initialTemplate,
-    searchQuery,
-    loading,
-    width,
-    inputSize,
-    variant,
-    rest
-  ]);
-  return onButtonClick ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.withButton, children: [
-    inputField,
-    /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outlined", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}), onClick: onButtonClick })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: inputField });
-});
-
-exports.SearchBox = SearchBox;