@dbcdk/react-components 0.0.5 → 0.0.7

package/dist/components/pagination/Pagination.cjs

@@ -1,133 +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,
-  showFirstLast = true,
-  showGoToPage = true
-}) {
-  const totalPages = react.useMemo(
-    () => Math.max(1, Math.ceil(itemsCount / Math.max(1, take))),
-    [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, nextTake = take) => {
-      const nextTotalPages = Math.max(1, Math.ceil(itemsCount / Math.max(1, nextTake)));
-      const clampedPage = Math.min(Math.max(1, page), nextTotalPages);
-      const nextSkip = (clampedPage - 1) * nextTake;
-      onPageChange == null ? void 0 : onPageChange({
-        page: clampedPage,
-        take: nextTake,
-        skip: nextSkip,
-        totalPages: nextTotalPages
-      });
-    },
-    [onPageChange, take, itemsCount]
-  );
-  const firstPage = react.useCallback(() => emit(1), [emit]);
-  const lastPage = react.useCallback(() => emit(totalPages), [emit, 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 canPrev = currentPage > 1;
-  const canNext = currentPage < totalPages;
-  const rangeLabel = react.useMemo(() => {
-    if (itemsCount <= 0) return "0 af 0";
-    const first = skip + 1;
-    const last = Math.min(skip + take, itemsCount);
-    return `${first.toLocaleString("da-DK")}\u2013${last.toLocaleString("da-DK")} af ${itemsCount.toLocaleString("da-DK")}`;
-  }, [itemsCount, skip, take]);
-  const pages = react.useMemo(() => Array.from({ length: totalPages }, (_, i) => i + 1), [totalPages]);
-  const handlePageSizeChange = react.useCallback((size) => emit(1, size), [emit]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
-    showFirstLast && /* @__PURE__ */ jsxRuntime.jsx(
-      Button.Button,
-      {
-        size: "sm",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, {}),
-        disabled: !canPrev,
-        onClick: firstPage,
-        "aria-label": "First page"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Button.Button,
-      {
-        size: "sm",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, {}),
-        disabled: !canPrev,
-        onClick: prevPage,
-        "aria-label": "Previous page"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.range, "aria-live": "polite", children: rangeLabel }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Button.Button,
-      {
-        size: "sm",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, {}),
-        disabled: !canNext,
-        onClick: nextPage,
-        "aria-label": "Next page"
-      }
-    ),
-    showFirstLast && /* @__PURE__ */ jsxRuntime.jsx(
-      Button.Button,
-      {
-        size: "sm",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRight, {}),
-        disabled: !canNext,
-        onClick: lastPage,
-        "aria-label": "Last page"
-      }
-    ),
-    showGoToPage && /* @__PURE__ */ jsxRuntime.jsx(
-      Popover.Popover,
-      {
-        trigger: (open) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { size: "sm", variant: "outlined", onClick: open, children: [
-          "Side ",
-          currentPage,
-          "/",
-          totalPages,
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 })
-        ] }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: pages.map((page) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: page === currentPage, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => goToPage(page), children: page }) }, page)) })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Popover.Popover,
-      {
-        trigger: (open) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { size: "sm", variant: "outlined", onClick: open, children: [
-          "Vis ",
-          take,
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 })
-        ] }),
-        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,149 +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",
-  matchTriggerWidth = true,
-  viewportPadding = 8,
-  edgeBuffer = 100
-}, ref) {
-  const [pos, setPos] = react.useState({ top: 0, left: 0, width: 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 triggerRect = container.getBoundingClientRect();
-      const prevVis = content.style.visibility;
-      const prevDisp = content.style.display;
-      const prevMinWidth = content.style.minWidth;
-      const prevWidth = content.style.width;
-      content.style.visibility = "hidden";
-      content.style.display = "block";
-      content.style.minWidth = minWidth;
-      content.style.width = "auto";
-      const minWidthPx = content.offsetWidth;
-      const desiredWidthPx = Math.max(matchTriggerWidth ? triggerRect.width : 0, minWidthPx);
-      content.style.minWidth = `${desiredWidthPx}px`;
-      content.style.width = `${desiredWidthPx}px`;
-      const contentWidth = content.offsetWidth;
-      const contentHeight = content.offsetHeight;
-      content.style.visibility = prevVis;
-      content.style.display = prevDisp;
-      content.style.minWidth = prevMinWidth;
-      content.style.width = prevWidth;
-      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, width: desiredWidthPx, visible: show });
-    },
-    [edgeBuffer, viewportPadding, minWidth, matchTriggerWidth]
-  );
-  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: {
-          top: pos.top,
-          left: pos.left,
-          visibility: pos.visible ? "visible" : "hidden",
-          minWidth: pos.width ? `${pos.width}px` : minWidth,
-          width: pos.width ? `${pos.width}px` : void 0,
-          maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
-          maxHeight: `calc(100vh - ${viewportPadding * 2}px)`,
-          overflow: "auto"
-        },
-        role: "dialog",
-        "aria-hidden": !pos.visible,
-        children: typeof children === "function" ? children(closePopover) : children
-      }
-    )
-  ] });
-});
-Popover.displayName = "Popover";
-
-exports.Popover = Popover;

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

@@ -1,175 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var lucideReact = require('lucide-react');
-var Input = require('@/components/input/Input');
-var Menu = require('@/components/menu/Menu');
-var Popover = require('@/components/popover/Popover');
-var Button = require('@/components/button/Button');
-var SkeletonLoaderItem = require('@/components/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 SearchBoxInner({
-  inputWidth,
-  inputSize,
-  variant,
-  result,
-  debounce = true,
-  debounceMs = 800,
-  onSearch,
-  onSelect,
-  displayPopover,
-  resultKeys,
-  resultTemplate,
-  initialTemplate,
-  popoverMinWidth = "500px",
-  noResultText = "Ingen resultater",
-  loading,
-  enableHotkey = true,
-  onButtonClick,
-  value,
-  onChange,
-  ...rest
-}, ref) {
-  const isControlled = value !== void 0;
-  const [draft, setDraft] = react.useState(() => isControlled ? String(value != null ? value : "") : "");
-  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 (!isControlled) return;
-    const next = String(value != null ? value : "");
-    if (next !== draft) setDraft(next);
-  }, [value]);
-  react.useEffect(() => {
-    if (!onSearch) return;
-    if (!debounce) {
-      setSearchQuery(draft);
-      onSearch(draft);
-      return;
-    }
-    const handler = setTimeout(() => {
-      setSearchQuery(draft);
-      onSearch(draft);
-    }, debounceMs);
-    return () => clearTimeout(handler);
-  }, [draft, onSearch, debounce, debounceMs]);
-  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) => {
-    setDraft(e.target.value);
-    onChange == null ? void 0 : onChange(e);
-  };
-  function handleSelect(item) {
-    onSelect == null ? void 0 : onSelect(item);
-    reset();
-  }
-  function reset() {
-    var _a;
-    setDraft("");
-    setSearchQuery("");
-    (_a = popoverRef.current) == null ? void 0 : _a.close();
-  }
-  const inputProps = {
-    ...rest,
-    value: draft,
-    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,
-                onFocusCapture: event,
-                onClick: event,
-                minWidth: inputWidth != null ? inputWidth : "300px",
-                width: inputWidth != null ? inputWidth : "300px",
-                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}),
-                inputSize,
-                variant,
-                ...inputProps,
-                placeholder: (_a2 = rest.placeholder) != null ? _a2 : "Indtast s\xF8geord"
-              }
-            );
-          },
-          children: resultTemplate ? resultTemplate : (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 raw = item[key];
-            const cell = raw != null ? String(raw) : "";
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "td",
-              {
-                style: { whiteSpace: cell.length < 10 ? "nowrap" : void 0 },
-                children: cell
-              },
-              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%" }) }, key)) }, index)) }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.resultContainer, children: noResultText })
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Input.Input,
-      {
-        ref: internalInputRef,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}),
-        minWidth: inputWidth != null ? inputWidth : "300px",
-        inputSize,
-        variant,
-        ...inputProps,
-        placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
-      }
-    );
-  }, [
-    displayPopover,
-    popoverMinWidth,
-    result,
-    resultKeys,
-    resultTemplate,
-    initialTemplate,
-    searchQuery,
-    loading,
-    inputWidth,
-    inputSize,
-    variant,
-    inputProps,
-    rest.placeholder
-  ]);
-  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;

package/dist/components/segmented-progress-bar/SegmentedProgressBar.cjs

@@ -1,103 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var severity = require('../../constants/severity');
-var Tooltip = require('../tooltip/Tooltip');
-var styles = require('./SegmentedProgressBar.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const SegmentedProgressBar = ({
-  segments,
-  total,
-  showRemainder = true,
-  remainderSeverity = "neutral",
-  centerLabel,
-  height,
-  rounded = true,
-  trackColor = "var(--color-neutral)",
-  tooltipPlacement = "top",
-  className,
-  ...aria
-}) => {
-  const sum = segments.reduce((acc, s) => acc + (s.value || 0), 0);
-  const effectiveTotal = total != null ? total : sum;
-  const safeTotal = Math.max(effectiveTotal, 1e-4);
-  const remainder = Math.max(effectiveTotal - sum, 0);
-  const pctFilled = Math.min(100, Math.max(0, Math.min(sum, effectiveTotal) / safeTotal * 100));
-  const computedSegments = [
-    ...segments,
-    ...showRemainder && remainder > 0 ? [{ value: remainder, severity: remainderSeverity }] : []
-  ];
-  const autoNumbers = (() => {
-    const base = segments.map((s) => s.value || 0);
-    if (showRemainder) base.push(remainder);
-    return base.join("/");
-  })();
-  const rootClass = [styles__default.default.container, className].filter(Boolean).join(" ");
-  const filteredSergments = computedSegments == null ? void 0 : computedSegments.filter((x) => x.value > 0);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: rootClass,
-      role: "progressbar",
-      "aria-valuemin": 0,
-      "aria-valuemax": effectiveTotal,
-      "aria-valuenow": Math.min(sum, effectiveTotal),
-      ...aria,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: styles__default.default.progressBar,
-          style: {
-            height: height ? `${height}px` : `var(--component-size-xs)`,
-            borderRadius: rounded ? `var(--border-radius-rounded)` : `var(--border-radius-none)`,
-            background: trackColor
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.segmentsContainer, children: filteredSergments == null ? void 0 : filteredSergments.map((seg, i) => {
-              var _a, _b, _c, _d, _e;
-              const bg = (_b = seg.color) != null ? _b : severity.SeverityBgColor[(_a = seg.severity) != null ? _a : "neutral"];
-              const fg = severity.SeverityTextColor[(_c = seg.severity) != null ? _c : "neutral"];
-              const tooltipText = typeof seg.label !== "undefined" ? seg.label : String((_d = seg.value) != null ? _d : 0);
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                Tooltip.Tooltip,
-                {
-                  content: tooltipText,
-                  placement: tooltipPlacement,
-                  className: styles__default.default.segmentWrapper,
-                  style: {
-                    flex: `${Math.max(seg.value || 0, 0)} 0 0`,
-                    height: "100%",
-                    minWidth: "2px"
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: styles__default.default.progressSegment,
-                      "data-index": i,
-                      "data-severity": (_e = seg.severity) != null ? _e : "neutral",
-                      style: { background: bg, color: fg }
-                    }
-                  )
-                },
-                `${i}`
-              );
-            }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: `${styles__default.default.progressCenter} ${(filteredSergments == null ? void 0 : filteredSergments.length) === 0 ? styles__default.default.emptySegments : ""}`,
-                children: centerLabel ? typeof centerLabel === "function" ? centerLabel(pctFilled) : centerLabel : autoNumbers
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-
-exports.SegmentedProgressBar = SegmentedProgressBar;