@j2-health/design-system 0.1.0

package/dist/index.js

@@ -0,0 +1,3606 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { useMemo, useState, useEffect, useCallback, useReducer, forwardRef, useRef } from "react";
+import { ConfigProvider, theme, Alert as Alert$1, Breadcrumb as Breadcrumb$1, Button as Button$1, Card as Card$1, Checkbox as Checkbox$1, Collapse as Collapse$1, Drawer as Drawer$1, Space, Dropdown as Dropdown$1, Typography, Select as Select$1, Input as Input$1, InputNumber as InputNumber$1, Popover as Popover$1, Tooltip as Tooltip$1, Menu as Menu$1, message, Modal as Modal$1, notification, Pagination as Pagination$1, Progress as Progress$1, Radio as Radio$1, Rate as Rate$1, Spin, Tag as Tag$1, Skeleton as Skeleton$1, Steps as Steps$1, Switch as Switch$1, Table as Table$1, Tabs as Tabs$1 } from "antd";
+import * as react from "@phosphor-icons/react";
+import { IconContext, XIcon, CircleNotchIcon, WarningCircleIcon, InfoIcon, XCircleIcon, CheckCircleIcon, CaretDownIcon, TrashIcon, PlusCircleIcon, CaretUpIcon, CopyIcon, CaretLeftIcon, CaretRightIcon, CaretDoubleLeftIcon, DotsThreeIcon, CaretDoubleRightIcon, StarIcon, MagnifyingGlassIcon, GearIcon, ArrowsClockwiseIcon, CheckIcon, CaretUpDownIcon } from "@phosphor-icons/react";
+import Icon, { LoadingOutlined } from "@ant-design/icons";
+import { Chart } from "@highcharts/react";
+import { Chart as Chart2 } from "@highcharts/react";
+import "@highcharts/react/options/Accessibility.js";
+import "@highcharts/react/options/Exporting.js";
+import { renderToString } from "react-dom/server";
+import cx from "classnames";
+import { cloneDeep } from "lodash";
+import { Form as Form$1, FormItem, Input as Input$2, InputNumber as InputNumber$2, Select as Select$2 } from "formik-antd";
+import { useField } from "formik";
+import "@highcharts/react/series/Venn.js";
+import { tailwindPreset } from "./tailwind.js";
+function _mergeNamespaces(n, m) {
+  for (var i = 0; i < m.length; i++) {
+    const e = m[i];
+    if (typeof e !== "string" && !Array.isArray(e)) {
+      for (const k in e) {
+        if (k !== "default" && !(k in n)) {
+          const d = Object.getOwnPropertyDescriptor(e, k);
+          if (d) {
+            Object.defineProperty(n, k, d.get ? d : {
+              enumerable: true,
+              get: () => e[k]
+            });
+          }
+        }
+      }
+    }
+  }
+  return Object.freeze(Object.defineProperty(n, Symbol.toStringTag, { value: "Module" }));
+}
+const appTheme = {
+  token: {
+    // Colors
+    colorText: "var(--j2-color-text)",
+    colorTextSecondary: "var(--j2-color-text-secondary)",
+    colorTextTertiary: "var(--j2-color-text-tertiary)",
+    colorTextQuaternary: "var(--j2-color-text-quaternary)",
+    colorTextHeading: "var(--j2-color-text-heading)",
+    colorTextLabel: "var(--j2-color-text-label)",
+    colorTextDescription: "var(--j2-color-text-description)",
+    colorTextDisabled: "var(--j2-color-text-disabled)",
+    colorTextPlaceholder: "var(--j2-color-text-placeholder)",
+    colorIcon: "var(--j2-color-icon)",
+    colorIconHover: "var(--j2-color-icon-hover)",
+    colorBgLayout: "var(--j2-color-bg-layout)",
+    colorBorder: "var(--j2-color-border)",
+    colorBorderSecondary: "var(--j2-color-border-secondary)",
+    colorPrimary: "#253761",
+    // var(--j2-blue-9)
+    colorSuccess: "#57a45e",
+    // var(--j2-green-9)
+    colorWarning: "#9e6e00",
+    // var(--j2-gold-11)
+    colorInfo: "#253761",
+    // var(--j2-blue-9)
+    colorLink: "#253761",
+    // var(--j2-blue-9)
+    colorError: "#bf6c6f",
+    // var(--j2-red-9)
+    colorErrorBg: "var(--j2-color-error-bg)",
+    colorErrorBgHover: "var(--j2-color-error-bg-hover)",
+    colorErrorBorder: "var(--j2-color-error-border)",
+    colorErrorBorderHover: "var(--j2-color-error-border-hover)",
+    colorErrorHover: "var(--j2-color-error-hover)",
+    colorErrorActive: "var(--j2-color-error-active)",
+    colorErrorTextHover: "var(--j2-color-error-text-hover)",
+    colorErrorText: "var(--j2-color-error-text)",
+    colorErrorTextActive: "var(--j2-color-error-text-active)",
+    colorLinkHover: "var(--j2-color-link-hover)",
+    colorInfoBg: "var(--j2-color-info-bg)",
+    colorInfoBgHover: "var(--j2-color-info-bg-hover)",
+    colorInfoBorder: "var(--j2-color-info-border)",
+    colorInfoBorderHover: "var(--j2-color-info-border-hover)",
+    colorInfoHover: "var(--j2-color-info-hover)",
+    colorInfoActive: "var(--j2-color-info-active)",
+    colorInfoTextHover: "var(--j2-color-info-text-hover)",
+    colorInfoText: "var(--j2-color-info-text)",
+    colorInfoTextActive: "var(--j2-color-info-text-active)",
+    colorLinkActive: "var(--j2-color-link-active)",
+    colorPrimaryBg: "var(--j2-color-primary-bg)",
+    colorPrimaryBgHover: "var(--j2-color-primary-bg-hover)",
+    colorPrimaryBorder: "var(--j2-color-primary-border)",
+    colorPrimaryBorderHover: "var(--j2-color-primary-border-hover)",
+    colorPrimaryHover: "var(--j2-color-primary-hover)",
+    colorPrimaryActive: "var(--j2-color-primary-active)",
+    colorPrimaryTextHover: "var(--j2-color-primary-text-hover)",
+    colorPrimaryText: "var(--j2-color-primary-text)",
+    colorPrimaryTextActive: "var(--j2-color-primary-text-active)",
+    colorSuccessBg: "var(--j2-color-success-bg)",
+    colorSuccessBgHover: "var(--j2-color-success-bg-hover)",
+    colorSuccessBorder: "var(--j2-color-success-border)",
+    colorSuccessBorderHover: "var(--j2-color-success-border-hover)",
+    colorSuccessHover: "var(--j2-color-success-hover)",
+    colorSuccessActive: "var(--j2-color-success-active)",
+    colorSuccessTextHover: "var(--j2-color-success-text-hover)",
+    colorSuccessText: "var(--j2-color-success-text)",
+    colorSuccessTextActive: "var(--j2-color-success-text-active)",
+    colorWarningBg: "var(--j2-color-warning-bg)",
+    colorWarningBgHover: "var(--j2-color-warning-bg-hover)",
+    colorWarningBorder: "var(--j2-color-warning-border)",
+    colorWarningBorderHover: "var(--j2-color-warning-border-hover)",
+    colorWarningHover: "var(--j2-color-warning-hover)",
+    colorWarningActive: "var(--j2-color-warning-active)",
+    colorWarningTextHover: "var(--j2-color-warning-text-hover)",
+    colorWarningText: "var(--j2-color-warning-text)",
+    colorWarningTextActive: "var(--j2-color-warning-text-active)",
+    controlItemBgActive: "var(--j2-control-item-bg-active)",
+    controlItemBgActiveHover: "var(--j2-control-item-bg-active-hover)",
+    colorFill: "var(--j2-color-fill)",
+    colorFillSecondary: "var(--j2-color-fill-secondary)",
+    colorFillTertiary: "var(--j2-color-fill-tertiary)",
+    colorFillQuaternary: "var(--j2-color-fill-quaternary)",
+    colorFillContent: "var(--j2-color-fill-content)",
+    colorFillContentHover: "var(--j2-color-fill-content-hover)",
+    colorBgMask: "var(--j2-color-bg-mask)",
+    colorBgSpotlight: "var(--j2-color-bg-spotlight)",
+    colorBgContainerDisabled: "var(--j2-color-bg-container-disabled)",
+    colorBgTextActive: "var(--j2-color-bg-text-active)",
+    colorBgTextHover: "var(--j2-color-bg-text-hover)",
+    colorFillAlter: "var(--j2-color-fill-alter)",
+    colorSplit: "var(--j2-color-split)",
+    colorErrorOutline: "var(--j2-color-error-outline)",
+    colorWarningOutline: "var(--j2-color-warning-outline)",
+    controlItemBgActiveDisabled: "var(--j2-control-item-bg-active-disabled)",
+    controlItemBgHover: "var(--j2-control-item-bg-hover)",
+    controlOutline: "var(--j2-control-outline)",
+    controlTmpOutline: "var(--j2-control-tmp-outline)",
+    // Typography
+    fontFamily: "Rubik, sans-serif",
+    fontFamilyCode: "Rubik, sans-serif",
+    fontSize: 14,
+    fontSizeLG: 16,
+    fontSizeSM: 12,
+    fontSizeXL: 20,
+    fontSizeHeading1: 38,
+    fontSizeHeading2: 30,
+    fontSizeHeading3: 24,
+    fontSizeHeading4: 20,
+    fontSizeHeading5: 16,
+    lineHeight: 1.5714285714285714,
+    lineHeightHeading1: 1.2105263157894737,
+    lineHeightHeading2: 1.2666666666666666,
+    lineHeightHeading3: 1.3333333333333333,
+    lineHeightHeading4: 1.4,
+    lineHeightHeading5: 1.5,
+    lineHeightLG: 1.5,
+    lineHeightSM: 1.6666666666666667,
+    fontSizeIcon: 12,
+    fontWeightStrong: 600,
+    // Border
+    borderRadius: 8,
+    borderRadiusLG: 10,
+    borderRadiusSM: 6,
+    borderRadiusXS: 2,
+    // Spacing and sizing
+    sizeStep: 4,
+    sizeUnit: 4,
+    controlInteractiveSize: 16,
+    size: 16,
+    sizeLG: 24,
+    sizeMD: 20,
+    sizeMS: 16,
+    sizeSM: 12,
+    sizeXL: 32,
+    sizeXS: 8,
+    sizeXXL: 48,
+    controlHeight: 32,
+    sizeXXS: 4,
+    controlHeightLG: 40,
+    controlHeightSM: 24,
+    controlHeightXS: 16,
+    lineWidth: 1,
+    lineWidthBold: 2,
+    lineWidthFocus: 4,
+    controlOutlineWidth: 2,
+    screenLG: 992,
+    screenLGMax: 1199,
+    screenLGMin: 992,
+    screenMD: 768,
+    screenMDMax: 991,
+    screenMDMin: 768,
+    screenSM: 576,
+    screenSMMax: 767,
+    screenSMMin: 576,
+    screenXL: 1200,
+    screenXLMax: 1599,
+    screenXLMin: 1200,
+    screenXS: 480,
+    screenXSMax: 575,
+    screenXSMin: 480,
+    screenXXL: 1600,
+    screenXXLMin: 1600,
+    sizePopupArrow: 16,
+    margin: 16,
+    marginLG: 24,
+    marginMD: 20,
+    marginSM: 12,
+    marginXL: 32,
+    marginXS: 8,
+    marginXXL: 48,
+    marginXXS: 4,
+    padding: 16,
+    paddingLG: 24,
+    paddingMD: 20,
+    paddingSM: 12,
+    paddingXL: 32,
+    paddingXS: 8,
+    paddingXXS: 4,
+    paddingContentHorizontal: 16,
+    paddingContentHorizontalLG: 24,
+    paddingContentHorizontalSM: 16,
+    paddingContentVertical: 12,
+    paddingContentVerticalLG: 16,
+    paddingContentVerticalSM: 8,
+    controlPaddingHorizontal: 12,
+    controlPaddingHorizontalSM: 8
+  },
+  components: {
+    Alert: {
+      paddingContentHorizontalLG: 16
+      // Use standard padding instead of paddingLG when description is present
+    },
+    Breadcrumb: {
+      itemColor: "var(--j2-color-text-label)",
+      lastItemColor: "var(--j2-color-primary)",
+      linkColor: "inherit",
+      linkHoverColor: "var(--j2-color-link-hover)",
+      colorBgTextHover: "var(--j2-color-primary-bg-hover)"
+    },
+    Button: {
+      defaultColor: "var(--j2-color-primary-text)",
+      defaultBorderColor: "var(--j2-color-border)",
+      defaultHoverBorderColor: "var(--j2-color-primary-active)",
+      defaultActiveBorderColor: "var(--j2-color-primary-active)",
+      ghostBg: "#fff",
+      defaultGhostBorderColor: "var(--j2-color-primary)",
+      defaultGhostColor: "var(--j2-color-primary-text)",
+      textTextColor: "var(--j2-color-primary-text)",
+      textHoverBg: "var(--j2-gray-2)",
+      textTextHoverColor: "var(--j2-color-primary-text-hover)",
+      textTextActiveColor: "var(--j2-color-primary-text-active)"
+    },
+    Form: {
+      itemMarginBottom: 0,
+      labelHeight: "100%"
+    },
+    Input: {
+      activeBorderColor: "var(--j2-color-primary-active)"
+    },
+    InputNumber: {
+      handleVisible: true,
+      handleHoverColor: "var(--j2-color-primary-text)",
+      handleBorderColor: "var(--j2-color-border)",
+      handleBg: "var(--j2-color-bg-container-disabled)"
+    },
+    Menu: {
+      itemColor: "var(--j2-color-primary-text)",
+      itemSelectedBg: "var(--j2-color-primary)",
+      itemSelectedColor: "#fff",
+      itemMarginInline: 12
+    },
+    Progress: {
+      defaultColor: "var(--j2-color-primary)"
+    },
+    Rate: {
+      marginXS: 0
+    },
+    Radio: {
+      // Unselected outlined radio-button labels default to colorText (near-black);
+      // align them with the selected label's primary blue so the control reads as
+      // a single cohesive outlined-blue selector.
+      buttonColor: "var(--j2-color-primary)"
+    },
+    Select: {
+      multipleItemBg: "var(--j2-gray-2)",
+      multipleItemBorderColor: "var(--j2-gray-4)",
+      colorText: "var(--j2-color-primary-text)"
+    },
+    Tooltip: {
+      colorBgSpotlight: "var(--j2-color-primary-active)"
+    },
+    Table: {
+      headerBg: "var(--j2-color-bg-layout)",
+      rowHoverBg: "var(--j2-color-bg-layout)",
+      bodySortBg: "var(--j2-gray-2)",
+      headerSortHoverBg: "var(--j2-gray-3)",
+      headerSortActiveBg: "var(--j2-gray-3)",
+      fixedHeaderSortActiveBg: "var(--j2-gray-3)"
+    },
+    Tag: {
+      defaultBg: "var(--j2-color-fill-secondary)"
+    }
+  }
+};
+const AppConfigProvider = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx(ConfigProvider, { theme: appTheme, children: /* @__PURE__ */ jsx(IconContext.Provider, { value: { weight: "duotone", size: 16 }, children }) });
+};
+const alert = "_alert_1yhxg_2";
+const styles$b = {
+  alert
+};
+const Alert = ({
+  description,
+  type,
+  closable = false,
+  showIcon = true,
+  banner = false,
+  ...props
+}) => {
+  const { token } = theme.useToken();
+  const icon = React.useMemo(() => {
+    const size = description ? token.sizeLG : token.size;
+    const iconStyle = !description ? { display: "flex", alignItems: "center" } : void 0;
+    const iconElement = (() => {
+      switch (type) {
+        case "success":
+          return /* @__PURE__ */ jsx(CheckCircleIcon, { fill: "var(--j2-color-success-text)", size });
+        case "error":
+          return /* @__PURE__ */ jsx(XCircleIcon, { fill: "var(--j2-color-error-text)", size });
+        case "info":
+          return /* @__PURE__ */ jsx(InfoIcon, { fill: "var(--j2-color-info-text)", size });
+        case "warning":
+          return /* @__PURE__ */ jsx(
+            WarningCircleIcon,
+            {
+              fill: "var(--j2-color-warning-text)",
+              size
+            }
+          );
+        case "loading":
+          return /* @__PURE__ */ jsx(
+            CircleNotchIcon,
+            {
+              fill: "var(--j2-color-info-text)",
+              size,
+              weight: "regular",
+              style: {
+                animation: "spin 1s linear infinite"
+              }
+            }
+          );
+        default:
+          return null;
+      }
+    })();
+    return iconStyle ? /* @__PURE__ */ jsx("span", { style: iconStyle, children: iconElement }) : iconElement;
+  }, [type, description, token.size, token.sizeLG]);
+  const antDType = React.useMemo(() => {
+    switch (type) {
+      case "loading":
+        return "info";
+      default:
+        return type;
+    }
+  }, [type]);
+  return /* @__PURE__ */ jsx(
+    Alert$1,
+    {
+      className: styles$b.alert,
+      icon,
+      closable,
+      showIcon,
+      type: antDType,
+      banner,
+      description,
+      closeIcon: /* @__PURE__ */ jsx(XIcon, { size: token.size, weight: "regular" }),
+      ...props
+    }
+  );
+};
+const tooltip = "_tooltip_1g39l_1";
+const styles$a = {
+  tooltip
+};
+const BarChart = ({
+  categories,
+  series,
+  min,
+  max,
+  tickInterval,
+  tickFormat,
+  xAxisTitle,
+  yAxisTitle,
+  gridLineColor,
+  gridLineDashStyle,
+  xAxisLabelMaxLines,
+  tooltip: tooltip2,
+  exporting,
+  chartRef,
+  height,
+  width,
+  maxBars = 50,
+  barsWidth = void 0
+}) => {
+  var _a, _b, _c, _d, _e;
+  const limitedCategories = categories.slice(0, maxBars);
+  const limitedSeries = series.map((s2) => ({
+    ...s2,
+    data: s2.data.slice(0, maxBars)
+  }));
+  const { token } = theme.useToken();
+  const baseFont = {
+    fontSize: `${token.fontSize}px`,
+    fontFamily: token.fontFamily,
+    color: token.colorText
+  };
+  const options = {
+    credits: {
+      enabled: false
+    },
+    chart: {
+      type: "column",
+      ...height ? { height } : {},
+      ...width ? { width } : {}
+    },
+    plotOptions: {
+      column: {
+        borderRadius: series[0].data.length > 5 ? "20%" : "15%",
+        ...barsWidth !== void 0 ? { pointWidth: barsWidth } : {}
+      }
+    },
+    exporting: {
+      ...exporting,
+      enabled: false,
+      chartOptions: {
+        ...exporting == null ? void 0 : exporting.chartOptions,
+        title: {
+          align: "left",
+          text: (_b = (_a = exporting == null ? void 0 : exporting.chartOptions) == null ? void 0 : _a.title) == null ? void 0 : _b.text,
+          style: {
+            fontSize: `${token.fontSize}px`,
+            fontFamily: "sans-serif",
+            color: token.colorText,
+            ...(_d = (_c = exporting == null ? void 0 : exporting.chartOptions) == null ? void 0 : _c.title) == null ? void 0 : _d.style
+          }
+        },
+        series: limitedSeries.map((s2) => ({
+          type: "column",
+          color: s2.color ? s2.color : "#253761"
+          // --j2-blue-9
+        })),
+        legend: ((_e = exporting == null ? void 0 : exporting.chartOptions) == null ? void 0 : _e.legend) || { enabled: false }
+      }
+    },
+    title: {
+      text: ""
+    },
+    xAxis: {
+      categories: limitedCategories,
+      title: xAxisTitle ? {
+        text: xAxisTitle,
+        style: { ...baseFont, color: token.colorTextDescription }
+      } : void 0,
+      labels: {
+        y: 30,
+        style: baseFont,
+        ...xAxisLabelMaxLines ? {
+          useHTML: true,
+          formatter: function() {
+            return `<div style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: ${xAxisLabelMaxLines}; -webkit-box-orient: vertical; text-align: center;">${this.value}</div>`;
+          }
+        } : {}
+      }
+    },
+    yAxis: {
+      min,
+      max,
+      endOnTick: true,
+      gridLineDashStyle: gridLineDashStyle || "Dot",
+      gridLineColor: gridLineColor || "white",
+      title: yAxisTitle ? {
+        text: yAxisTitle,
+        style: { ...baseFont, color: token.colorTextDescription },
+        x: -10
+      } : void 0,
+      tickInterval,
+      labels: {
+        formatter: tickFormat ? ({ value }) => tickFormat(value) : void 0,
+        style: baseFont
+      }
+    },
+    legend: {
+      enabled: false
+    },
+    series: limitedSeries.map((s2) => ({
+      data: s2.data,
+      name: s2.name,
+      type: "column",
+      color: s2.color || "var(--j2-blue-11)",
+      states: {
+        hover: {
+          color: s2.hoverColor || token.colorPrimaryTextHover
+        }
+      }
+    })),
+    tooltip: {
+      useHTML: true,
+      outside: true,
+      backgroundColor: "transparent",
+      shadow: false,
+      padding: 0,
+      style: { zIndex: 9999 },
+      formatter: function() {
+        return renderToString(
+          /* @__PURE__ */ jsx("div", { className: styles$a.tooltip, children: tooltip2(this.key, this.y, this.series.name) })
+        );
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(Chart, { ref: chartRef, options });
+};
+const Breadcrumb = ({ items, ...props }) => {
+  const antDItems = React.useMemo(
+    () => items.map((item) => ({
+      href: item.href,
+      onClick: item.onClick,
+      title: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+        item.icon && /* @__PURE__ */ jsx(item.icon, { size: 14 }),
+        item.title
+      ] })
+    })),
+    [items]
+  );
+  return /* @__PURE__ */ jsx(Breadcrumb$1, { ...props, items: antDItems });
+};
+const Button = ({ type, size, ghost, danger, shape, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      ...props,
+      type,
+      size,
+      ghost,
+      danger,
+      shape,
+      children: props.children
+    }
+  );
+};
+const BulkActionBar = ({
+  count,
+  action,
+  secondaryActions,
+  onCancel,
+  cancelLabel = "Cancel"
+}) => {
+  const visible = count > 0;
+  const label = `${count} selected`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "region",
+      "aria-label": "Bulk actions",
+      "aria-hidden": !visible,
+      className: cx(
+        "pointer-events-none fixed bottom-6 left-1/2 z-50",
+        "-translate-x-1/2 transition duration-200 ease-out",
+        visible ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-4 opacity-0"
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cx(
+            "pointer-events-auto flex items-center gap-3 rounded-full",
+            "bg-j2-primary-active py-2 pl-4 pr-2 text-white shadow-lg"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: label }),
+            /* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-white/20" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "text",
+                shape: "round",
+                size: "small",
+                icon: action.icon,
+                loading: action.loading,
+                onClick: action.onClick,
+                className: "!text-white hover:!bg-white/10 hover:!text-white",
+                children: action.label
+              }
+            ),
+            secondaryActions == null ? void 0 : secondaryActions.map((sec) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "text",
+                shape: "round",
+                size: "small",
+                icon: sec.icon,
+                loading: sec.loading,
+                onClick: sec.onClick,
+                className: "!text-white hover:!bg-white/10 hover:!text-white",
+                children: sec.label
+              },
+              sec.label
+            )),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "text",
+                shape: "round",
+                size: "small",
+                onClick: onCancel,
+                className: "!text-white hover:!bg-white/10 hover:!text-white",
+                children: cancelLabel
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const Card = ({
+  title,
+  children,
+  loading,
+  size = "default",
+  innerVariant = "default",
+  className,
+  ...props
+}) => {
+  const isInner = props.type === "inner";
+  const isInnerBasic = isInner && innerVariant === "basic";
+  return /* @__PURE__ */ jsx(
+    Card$1,
+    {
+      className: cx(
+        "j2-card",
+        `j2-card-${size}`,
+        isInnerBasic && "inner-basic",
+        className
+      ),
+      ...props,
+      size: size === "large" || size === "compact" ? "default" : size,
+      title,
+      loading,
+      children
+    }
+  );
+};
+const Checkbox = (props) => {
+  return /* @__PURE__ */ jsx(Checkbox$1, { ...props });
+};
+Checkbox.Group = Checkbox$1.Group;
+const getLeafKeys = (node) => {
+  const keys = [];
+  const traverse = (currentNode) => {
+    if (!currentNode.children || currentNode.children.length === 0) {
+      keys.push(currentNode.key);
+    } else {
+      currentNode.children.forEach((child) => traverse(child));
+    }
+  };
+  traverse(node);
+  return keys;
+};
+const getAllLeafKeys = (nodes) => {
+  const keys = [];
+  nodes.forEach((node) => {
+    keys.push(...getLeafKeys(node));
+  });
+  return keys;
+};
+const getNodeCheckState = (node, leafNodeStates) => {
+  let hasChecked = false;
+  let hasUnchecked = false;
+  const visit = (current) => {
+    if (!current.children || current.children.length === 0) {
+      if (leafNodeStates[current.key] === true) {
+        hasChecked = true;
+      } else {
+        hasUnchecked = true;
+      }
+      return hasChecked && hasUnchecked;
+    }
+    return current.children.some(visit);
+  };
+  visit(node);
+  return {
+    checked: hasChecked && !hasUnchecked,
+    indeterminate: hasChecked && hasUnchecked
+  };
+};
+const getAllParentKeys = (nodes) => {
+  const keys = [];
+  const traverse = (currentNodes) => {
+    currentNodes.forEach((node) => {
+      if (node.children && node.children.length > 0) {
+        keys.push(node.key);
+        traverse(node.children);
+      }
+    });
+  };
+  traverse(nodes);
+  return keys;
+};
+const TreeNode = ({
+  node,
+  level,
+  leafNodeValues,
+  onCheck,
+  disabled,
+  expandedKeys,
+  onToggleExpand,
+  lazyChildren
+}) => {
+  const { checked: isChecked, indeterminate } = getNodeCheckState(
+    node,
+    leafNodeValues
+  );
+  const isIndeterminate = lazyChildren && indeterminate;
+  const isDisabled = disabled || node.disabled;
+  const hasChildren = node.children && node.children.length > 0;
+  const isExpanded = expandedKeys.has(node.key);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center min-h-6 mb-1",
+        style: { paddingLeft: level * 20 },
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: isChecked,
+              indeterminate: isIndeterminate,
+              disabled: isDisabled,
+              onChange: (e) => onCheck(node.key, e.target.checked, node),
+              children: node.title
+            }
+          ),
+          hasChildren && !isDisabled && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onToggleExpand(node.key),
+              className: "flex items-center justify-center ml-auto cursor-pointer bg-transparent border-none p-0",
+              "aria-expanded": isExpanded,
+              "aria-label": `${isExpanded ? "Collapse" : "Expand"}${typeof node.title === "string" ? ` ${node.title}` : ""}`,
+              children: /* @__PURE__ */ jsx(
+                CaretDownIcon,
+                {
+                  size: 14,
+                  style: {
+                    transform: `rotate(${isExpanded ? 0 : -90}deg)`,
+                    transition: "transform 150ms ease"
+                  }
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    hasChildren && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateRows: isExpanded ? "1fr" : "0fr",
+          transition: "grid-template-rows 150ms ease"
+        },
+        children: /* @__PURE__ */ jsx("div", { style: { overflow: "hidden" }, children: (!lazyChildren || isExpanded) && node.children.map((childNode) => /* @__PURE__ */ jsx(
+          TreeNode,
+          {
+            node: childNode,
+            level: level + 1,
+            leafNodeValues,
+            onCheck,
+            disabled,
+            expandedKeys,
+            onToggleExpand,
+            lazyChildren
+          },
+          childNode.key
+        )) })
+      }
+    )
+  ] });
+};
+const CheckboxTree = ({
+  treeData,
+  defaultCheckedKeys = [],
+  checkedKeys: controlledCheckedKeys,
+  onCheck,
+  disabled = false,
+  defaultExpandAll = true,
+  defaultExpandedKeys,
+  expandedKeys: controlledExpandedKeys,
+  onExpand,
+  className,
+  style,
+  lazyChildren = false
+}) => {
+  const allLeafKeys = useMemo(() => getAllLeafKeys(treeData), [treeData]);
+  const leafKeySet = useMemo(() => new Set(allLeafKeys), [allLeafKeys]);
+  const [internalLeafNodeValues, setInternalLeafNodeValues] = useState(() => {
+    const defaultLeafKeySet = new Set(
+      defaultCheckedKeys.filter((key) => leafKeySet.has(key))
+    );
+    const values = {};
+    for (const key of allLeafKeys) {
+      values[key] = defaultLeafKeySet.has(key);
+    }
+    return values;
+  });
+  const [internalExpandedKeys, setInternalExpandedKeys] = useState(() => {
+    if (defaultExpandedKeys) return defaultExpandedKeys;
+    if (defaultExpandAll) return getAllParentKeys(treeData);
+    return [];
+  });
+  useEffect(() => {
+    if (controlledExpandedKeys || !defaultExpandAll || defaultExpandedKeys)
+      return;
+    const allParentKeys = getAllParentKeys(treeData);
+    setInternalExpandedKeys((prev) => {
+      const prevSet = new Set(prev);
+      const newKeys = allParentKeys.filter((key) => !prevSet.has(key));
+      if (newKeys.length === 0) return prev;
+      return [...prev, ...newKeys];
+    });
+  }, [treeData, defaultExpandAll, controlledExpandedKeys, defaultExpandedKeys]);
+  const expandedKeysSet = useMemo(() => {
+    const keys = controlledExpandedKeys ?? internalExpandedKeys;
+    return new Set(keys);
+  }, [controlledExpandedKeys, internalExpandedKeys]);
+  const handleToggleExpand = useCallback(
+    (key) => {
+      const currentKeys = controlledExpandedKeys ?? internalExpandedKeys;
+      const newKeys = currentKeys.includes(key) ? currentKeys.filter((k) => k !== key) : [...currentKeys, key];
+      if (!controlledExpandedKeys) {
+        setInternalExpandedKeys(newKeys);
+      }
+      onExpand == null ? void 0 : onExpand(newKeys);
+    },
+    [controlledExpandedKeys, internalExpandedKeys, onExpand]
+  );
+  const leafNodeValues = useMemo(() => {
+    if (!controlledCheckedKeys) {
+      return internalLeafNodeValues;
+    }
+    const controlledLeafKeySet = new Set(
+      controlledCheckedKeys.filter((key) => leafKeySet.has(key))
+    );
+    const values = {};
+    for (const key of allLeafKeys) {
+      values[key] = controlledLeafKeySet.has(key);
+    }
+    return values;
+  }, [allLeafKeys, leafKeySet, controlledCheckedKeys, internalLeafNodeValues]);
+  const handleCheck = useCallback(
+    (_key, checked, node) => {
+      const newLeafNodeValues = { ...leafNodeValues };
+      if (checked) {
+        const leafKeys = getLeafKeys(node);
+        leafKeys.forEach((leafKey) => newLeafNodeValues[leafKey] = true);
+      } else {
+        const leafKeys = getLeafKeys(node);
+        leafKeys.forEach((leafKey) => newLeafNodeValues[leafKey] = false);
+      }
+      if (!controlledCheckedKeys) {
+        setInternalLeafNodeValues(newLeafNodeValues);
+      }
+      if (onCheck) {
+        const checkedLeafNodes = {};
+        const allCheckedNodes = [];
+        const collectChecked = (current) => {
+          let isChecked;
+          if (!current.children || current.children.length === 0) {
+            isChecked = newLeafNodeValues[current.key] === true;
+            if (isChecked) {
+              checkedLeafNodes[current.key] = current;
+            }
+          } else {
+            isChecked = true;
+            for (const child of current.children) {
+              if (!collectChecked(child)) {
+                isChecked = false;
+              }
+            }
+          }
+          if (isChecked) {
+            allCheckedNodes.push(current);
+          }
+          return isChecked;
+        };
+        treeData.forEach(collectChecked);
+        onCheck(newLeafNodeValues, {
+          checked,
+          checkedLeafNodes,
+          allCheckedNodes,
+          node
+        });
+      }
+    },
+    [controlledCheckedKeys, onCheck, treeData, leafNodeValues]
+  );
+  return /* @__PURE__ */ jsx("div", { className, style, children: treeData.map((node) => /* @__PURE__ */ jsx(
+    TreeNode,
+    {
+      node,
+      level: 0,
+      leafNodeValues,
+      onCheck: handleCheck,
+      disabled,
+      expandedKeys: expandedKeysSet,
+      onToggleExpand: handleToggleExpand,
+      lazyChildren
+    },
+    node.key
+  )) });
+};
+const warning = "_warning_yukjt_2";
+const error = "_error_yukjt_3";
+const styles$9 = {
+  "default": "_default_yukjt_1",
+  warning,
+  error
+};
+const stateConfig = {
+  default: {
+    className: styles$9.default,
+    Icon: InfoIcon,
+    color: "var(--j2-color-text)"
+  },
+  warning: {
+    className: styles$9.warning,
+    Icon: WarningCircleIcon,
+    color: "var(--j2-color-warning-text)"
+  },
+  error: {
+    className: styles$9.error,
+    Icon: XCircleIcon,
+    color: "var(--j2-color-error-text)"
+  }
+};
+const Collapse = ({
+  state = "default",
+  showIcon = false,
+  className,
+  items,
+  ...props
+}) => {
+  const { className: stateClass, Icon: Icon2, color } = stateConfig[state];
+  const icon = React.useMemo(() => {
+    if (!showIcon) return null;
+    return /* @__PURE__ */ jsx(Icon2, { size: 14, fill: color, style: { flexShrink: 0 } });
+  }, [state, showIcon]);
+  const itemsWithIcon = React.useMemo(() => {
+    if (!icon || !items) return items;
+    return items.map((item) => ({
+      ...item,
+      label: /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        item.label
+      ] })
+    }));
+  }, [items, icon]);
+  return /* @__PURE__ */ jsx(
+    Collapse$1,
+    {
+      ...props,
+      items: itemsWithIcon,
+      className: [stateClass, className].filter(Boolean).join(" "),
+      expandIcon: ({ isActive: isActive2 }) => /* @__PURE__ */ jsx(
+        CaretDownIcon,
+        {
+          size: 14,
+          style: { transform: `rotate(${isActive2 ? 0 : -90}deg)` }
+        }
+      )
+    }
+  );
+};
+const Drawer = ({
+  fillPage = false,
+  footer,
+  extraContent,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Drawer$1,
+    {
+      ...props,
+      closable: false,
+      ...fillPage && { height: "100vh", width: "100vw" },
+      ...footer && { footer },
+      extra: /* @__PURE__ */ jsxs(Space, { children: [
+        extraContent,
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "p-0",
+            type: "link",
+            onClick: props.onClose,
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx(XIcon, { size: 22, weight: "regular" })
+          }
+        )
+      ] }),
+      className: "j2-drawer"
+    }
+  );
+};
+const { Link } = Typography;
+const LabelWithCaret = ({ label }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+  label,
+  /* @__PURE__ */ jsx(CaretDownIcon, { weight: "regular" })
+] });
+const Target = ({ label, type, disabled, icon, className }) => {
+  if (type === "basic-inline") {
+    return /* @__PURE__ */ jsx(Link, { disabled, className: cx("flex gap-1", className), children: icon ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon,
+      label
+    ] }) : /* @__PURE__ */ jsx(LabelWithCaret, { label }) });
+  }
+  return /* @__PURE__ */ jsx(Button, { disabled, icon, className, children: icon ? label : /* @__PURE__ */ jsx(LabelWithCaret, { label }) });
+};
+const Dropdown = ({
+  label,
+  type,
+  icon,
+  menu,
+  menuType = "default",
+  targetClassName,
+  ...props
+}) => {
+  let menuProp = menu;
+  if (menuType === "slim" && typeof menu === "object") {
+    menuProp = {
+      ...menu,
+      className: cx(menu.className, "j2-dropdown-slim-menu")
+    };
+  }
+  if (type === "twofold") {
+    return /* @__PURE__ */ jsx(Dropdown$1.Button, { ...props, menu: menuProp, children: icon ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon,
+      " ",
+      label
+    ] }) : label });
+  }
+  return /* @__PURE__ */ jsx(Dropdown$1, { ...props, menu: menuProp, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    Target,
+    {
+      label,
+      type,
+      disabled: props.disabled,
+      icon,
+      className: targetClassName
+    }
+  ) }) });
+};
+const j2FilterForm = "_j2FilterForm_rdja9_1";
+const filterFormTitle = "_filterFormTitle_rdja9_2";
+const filterFormConjunction = "_filterFormConjunction_rdja9_6";
+const filterFormFieldsContainer = "_filterFormFieldsContainer_rdja9_10";
+const filterFormGroupContainer = "_filterFormGroupContainer_rdja9_15";
+const s$4 = {
+  j2FilterForm,
+  filterFormTitle,
+  filterFormConjunction,
+  filterFormFieldsContainer,
+  filterFormGroupContainer
+};
+const isEmptyFilter = (filter) => {
+  if (filter.operator === "blank" || filter.operator === "notBlank") {
+    return false;
+  }
+  if (filter.values && filter.values.length > 0 && filter.values.every(
+    (value) => value !== "" && value !== void 0 && value !== null
+  )) {
+    return false;
+  }
+  return true;
+};
+const isEmptyFormFilter = (filter) => {
+  if (filter.operator === "blank" || filter.operator === "notBlank") {
+    return false;
+  }
+  if (filter.values && filter.values.length > 0 && filter.values.every(
+    (value) => value !== "" && value !== void 0 && value !== null
+  )) {
+    return false;
+  }
+  return true;
+};
+const validateFormFilter = (filter) => {
+  const errors = [];
+  if (!filter.operator) {
+    errors.push("Operator is required");
+    return errors;
+  }
+  if (isEmptyFormFilter(filter)) {
+    errors.push("Value is required");
+  }
+  if (filter.type === "number" && filter.operator === "inRange") {
+    if (filter.values && filter.values.length !== 2) {
+      errors.push("Value is required");
+    }
+  }
+  return errors;
+};
+const isFilter = (filter) => {
+  return filter.operator !== void 0 && filter.field !== void 0 && filter.type !== void 0;
+};
+const TypeToOperatorOptions = {
+  select: [
+    { label: "is any of", value: "equals" },
+    { label: "is not any of", value: "notEqual" },
+    { label: "has no value", value: "blank" },
+    { label: "has any value", value: "notBlank" }
+  ],
+  number: [
+    { label: "is", value: "equals" },
+    { label: "is not", value: "notEqual" },
+    { label: "is greater than", value: "greaterThan" },
+    { label: "is greater than or equal to", value: "greaterThanOrEqual" },
+    { label: "is less than", value: "lessThan" },
+    { label: "is less than or equal to", value: "lessThanOrEqual" },
+    { label: "has no value", value: "blank" },
+    { label: "has any value", value: "notBlank" },
+    { label: "is between", value: "inRange" }
+  ],
+  text: [
+    { label: "contains", value: "contains" },
+    { label: "does not contain", value: "notContains" },
+    { label: "starts with", value: "startsWith" },
+    { label: "ends with", value: "endsWith" },
+    { label: "has no value", value: "blank" },
+    { label: "has any value", value: "notBlank" }
+  ]
+};
+const buildValueInputConfig = (config, operator) => {
+  if (config.type === "select") {
+    if (operator === "blank" || operator === "notBlank") return;
+    return {
+      type: "select",
+      valueOptions: config.options || []
+    };
+  }
+  if (config.type === "number") {
+    if (operator === "blank" || operator === "notBlank") return;
+    return {
+      type: "number",
+      inputCount: operator === "inRange" ? 2 : 1,
+      numberOptions: config.options
+    };
+  }
+  if (config.type === "text") {
+    if (operator === "blank" || operator === "notBlank") return;
+    return {
+      type: "text"
+    };
+  }
+};
+const filterFieldReducer = (state, action) => {
+  var _a, _b, _c;
+  switch (action.type) {
+    case "setField": {
+      const config = state.filterConfigs.find(
+        (config2) => config2.field === action.payload
+      );
+      if (!config) return state;
+      const operatorOptions = config ? TypeToOperatorOptions[config.type] : [];
+      const newFilter = {
+        ...state.filter,
+        type: config.type,
+        field: action.payload,
+        operator: operatorOptions[0].value,
+        values: []
+      };
+      const pendingFilter = {
+        ...newFilter,
+        errors: validateFormFilter(newFilter)
+      };
+      return {
+        ...state,
+        filter: pendingFilter,
+        config,
+        operatorOptions,
+        valueInputConfig: operatorOptions.length > 0 ? buildValueInputConfig(config, operatorOptions[0].value) : void 0
+      };
+    }
+    case "setOperator": {
+      if (!state.config) return state;
+      if (!action.payload) return state;
+      const pendingFilter = {
+        ...state.filter,
+        operator: action.payload,
+        values: []
+      };
+      return {
+        ...state,
+        filter: {
+          ...pendingFilter,
+          errors: validateFormFilter(pendingFilter)
+        },
+        valueInputConfig: buildValueInputConfig(state.config, action.payload)
+      };
+    }
+    case "setValues": {
+      if (!state.filter) return state;
+      const values = state.filter.type === "number" ? action.payload.map((value) => Number(value)) : action.payload.filter(
+        (value) => value !== null && value !== void 0
+      );
+      const pendingFilter = {
+        ...state.filter,
+        values
+      };
+      pendingFilter.errors = validateFormFilter(pendingFilter);
+      return {
+        ...state,
+        filter: pendingFilter
+      };
+    }
+    case "initialize": {
+      const field = ((_a = state.filter) == null ? void 0 : _a.field) || ((_b = state.filterConfigs.find((config2) => !config2.disabled)) == null ? void 0 : _b.field);
+      const config = state.filterConfigs.find(
+        (config2) => config2.field === field
+      );
+      if (!config) return state;
+      const operatorOptions = config ? TypeToOperatorOptions[config.type] : [];
+      const operator = ((_c = state.filter) == null ? void 0 : _c.operator) || operatorOptions[0].value;
+      const filter = state.filter ?? {
+        field,
+        type: config.type,
+        operator,
+        values: []
+      };
+      const errors = validateFormFilter(filter);
+      filter.errors = errors;
+      return {
+        ...state,
+        config,
+        filter,
+        operatorOptions,
+        valueInputConfig: operatorOptions.length > 0 ? buildValueInputConfig(config, operator) : void 0
+      };
+    }
+    default:
+      return state;
+  }
+};
+const useFilterField = ({
+  filterConfigs,
+  filter: initialFilter
+}) => {
+  const [{ filter, config, operatorOptions, valueInputConfig }, dispatch] = React.useReducer(
+    filterFieldReducer,
+    {
+      filter: initialFilter,
+      filterConfigs,
+      config: void 0,
+      operatorOptions: [],
+      valueInputConfig: void 0
+    },
+    (state) => {
+      return filterFieldReducer(state, {
+        type: "initialize",
+        payload: void 0
+      });
+    }
+  );
+  const handleFieldChange = (value) => {
+    dispatch({
+      type: "setField",
+      payload: value
+    });
+  };
+  const handleOperatorChange = (value) => {
+    dispatch({
+      type: "setOperator",
+      payload: value
+    });
+  };
+  const handleValuesChange = (value) => {
+    dispatch({
+      type: "setValues",
+      payload: value
+    });
+  };
+  return {
+    filter,
+    config,
+    operatorOptions,
+    valueInputConfig,
+    handleFieldChange,
+    handleOperatorChange,
+    handleValuesChange
+  };
+};
+const FilterInput = ({
+  value,
+  filterConfigs,
+  onChange,
+  onBlur,
+  className,
+  size = "middle"
+}) => {
+  const {
+    filter,
+    operatorOptions,
+    valueInputConfig,
+    handleFieldChange,
+    handleOperatorChange,
+    handleValuesChange
+  } = useFilterField({
+    filterConfigs,
+    filter: value
+  });
+  const fieldOptions = filterConfigs.map((config) => ({
+    label: config.label,
+    value: config.field,
+    disabled: config.disabled
+  }));
+  const handleBlur = () => {
+    if (filter) {
+      onBlur == null ? void 0 : onBlur(filter);
+    }
+  };
+  const isInitialMount = React.useRef(true);
+  const prevFilterRef = React.useRef(filter);
+  React.useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      prevFilterRef.current = filter;
+      return;
+    }
+    if (filter && filter !== prevFilterRef.current) {
+      prevFilterRef.current = filter;
+      onChange == null ? void 0 : onChange(filter);
+    }
+  }, [filter, onChange]);
+  return /* @__PURE__ */ jsxs("div", { className: cx("grid grid-cols-3 gap-2", className), children: [
+    /* @__PURE__ */ jsx(
+      Select$1,
+      {
+        options: fieldOptions,
+        value: filter == null ? void 0 : filter.field,
+        showSearch: true,
+        optionFilterProp: "label",
+        onChange: handleFieldChange,
+        size
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "col-span-2 flex gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Select$1,
+        {
+          options: operatorOptions,
+          value: filter == null ? void 0 : filter.operator,
+          onChange: handleOperatorChange,
+          onBlur: handleBlur,
+          size,
+          popupMatchSelectWidth: false
+        }
+      ),
+      valueInputConfig && /* @__PURE__ */ jsx(
+        ValueInput,
+        {
+          valueInputConfig,
+          values: filter == null ? void 0 : filter.values,
+          onChange: handleValuesChange,
+          onBlur: handleBlur,
+          size
+        }
+      )
+    ] })
+  ] });
+};
+const ValueInput = ({
+  valueInputConfig,
+  values,
+  onChange,
+  onBlur,
+  size
+}) => {
+  const handleChange = (value) => {
+    if (value === null) {
+      onChange([]);
+    } else {
+      onChange([value]);
+    }
+  };
+  const handleNumberChange = (value, index2) => {
+    const newValues = [
+      ...values ?? []
+    ];
+    newValues[index2] = value;
+    onChange(newValues);
+  };
+  switch (valueInputConfig.type) {
+    case "select":
+      return /* @__PURE__ */ jsx(
+        Select$1,
+        {
+          options: valueInputConfig.valueOptions,
+          onChange,
+          showSearch: true,
+          allowClear: true,
+          mode: "multiple",
+          onBlur,
+          value: values,
+          className: "w-full truncate",
+          size,
+          optionFilterProp: "label"
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ jsx("div", { className: "flex gap-2 grow", children: Array.from({ length: valueInputConfig.inputCount }).map(
+        (_, index2) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          index2 !== 0 && /* @__PURE__ */ jsx("span", { className: "my-auto", children: "and" }),
+          /* @__PURE__ */ jsx(
+            InputNumber$1,
+            {
+              onChange: (value) => handleNumberChange(value, index2),
+              onBlur,
+              value: values == null ? void 0 : values[index2],
+              className: "basis-1/2",
+              size,
+              ...valueInputConfig.numberOptions ?? {}
+            }
+          )
+        ] }, `number-input-${index2}`)
+      ) });
+    case "text":
+      return /* @__PURE__ */ jsx(
+        Input$1,
+        {
+          onBlur,
+          value: (values == null ? void 0 : values[0]) ?? void 0,
+          onChange: (e) => handleChange(e.target.value),
+          className: "w-full",
+          size
+        }
+      );
+    default:
+      return null;
+  }
+};
+const copyFilterGroups = (filterGroups) => {
+  return cloneDeep(filterGroups);
+};
+const addFilter = (filter, filterGroups) => {
+  const copy = copyFilterGroups(filterGroups);
+  const filterGroupIndex = copy.findIndex(
+    (filterGroup) => filterGroup.field === filter.field
+  );
+  if (filterGroupIndex === -1) {
+    copy.push({ field: filter.field, filters: [filter] });
+  } else {
+    copy[filterGroupIndex].filters.push(filter);
+  }
+  return copy;
+};
+const removeFilter = (groupIndex, filterIndex, filterGroups) => {
+  const copy = copyFilterGroups(filterGroups);
+  copy[groupIndex].filters.splice(filterIndex, 1);
+  return copy.filter((group) => group.filters.length > 0);
+};
+const filterFormReducer = (state, action) => {
+  var _a;
+  switch (action.type) {
+    case "initialize": {
+      const filterGroups = (_a = action.payload) == null ? void 0 : _a.filters.reduce(
+        (acc, filter) => {
+          return addFilter(filter, acc);
+        },
+        [...state.filterGroups]
+      );
+      return {
+        ...state,
+        filterGroups: filterGroups ?? [],
+        isNewFilterInputOpen: !(filterGroups == null ? void 0 : filterGroups.length)
+      };
+    }
+    case "openNewFilterInput": {
+      return {
+        ...state,
+        isNewFilterInputOpen: true
+      };
+    }
+    case "addNewFilter": {
+      if (action.payload.errors && action.payload.errors.length > 0) {
+        return state;
+      }
+      const filterGroups = addFilter(action.payload, state.filterGroups);
+      return {
+        ...state,
+        filterGroups,
+        newFilter: void 0,
+        isNewFilterInputOpen: false
+      };
+    }
+    case "changeNewFilter": {
+      return {
+        ...state,
+        newFilter: action.payload
+      };
+    }
+    case "removeNewFilter": {
+      const allFiltersRemoved = state.filterGroups.every(
+        (group) => group.filters.length === 0
+      );
+      return {
+        ...state,
+        newFilter: void 0,
+        isNewFilterInputOpen: allFiltersRemoved
+      };
+    }
+    case "updateFilter": {
+      const { groupIndex, filterIndex, filter } = action.payload;
+      let filterGroups = copyFilterGroups(state.filterGroups);
+      const groupField = filterGroups[groupIndex].field;
+      if (groupField === filter.field) {
+        filterGroups[groupIndex].filters[filterIndex] = filter;
+      } else {
+        filterGroups = removeFilter(groupIndex, filterIndex, filterGroups);
+        filterGroups = addFilter(filter, filterGroups);
+      }
+      return {
+        ...state,
+        filterGroups
+      };
+    }
+    case "changeFilter": {
+      const { groupIndex, filterIndex, filter } = action.payload;
+      const filterGroups = copyFilterGroups(state.filterGroups);
+      const group = filterGroups[groupIndex];
+      if (group) {
+        group.filters[filterIndex] = filter;
+      }
+      return {
+        ...state,
+        filterGroups
+      };
+    }
+    case "removeFilter": {
+      const { groupIndex, filterIndex } = action.payload;
+      const filterGroups = removeFilter(
+        groupIndex,
+        filterIndex,
+        state.filterGroups
+      );
+      return {
+        ...state,
+        filterGroups,
+        isNewFilterInputOpen: state.isNewFilterInputOpen || filterGroups.length === 0
+      };
+    }
+    case "clearAllFilters": {
+      return {
+        ...state,
+        filterGroups: [],
+        isNewFilterInputOpen: true
+      };
+    }
+    default:
+      return state;
+  }
+};
+const useFiltersForm = ({
+  initialValues
+}) => {
+  const [{ filterGroups, newFilter, isNewFilterInputOpen }, dispatch] = useReducer(
+    filterFormReducer,
+    {
+      filterGroups: [],
+      newFilter: void 0,
+      isNewFilterInputOpen: true
+    },
+    (state) => {
+      return filterFormReducer(state, {
+        type: "initialize",
+        payload: initialValues
+      });
+    }
+  );
+  const isValid = (filterGroups.length === 0 || filterGroups.every(
+    (group) => group.filters.every(
+      (filter) => filter.errors && filter.errors.length === 0
+    )
+  )) && ((newFilter == null ? void 0 : newFilter.errors) ? newFilter.errors.length === 0 : true);
+  const isEmpty = filterGroups.length === 0 && (newFilter ? isEmptyFormFilter(newFilter) : true);
+  return {
+    dispatch,
+    filterGroups,
+    newFilter,
+    isNewFilterInputOpen,
+    isValid,
+    isEmpty
+  };
+};
+const FilterGroup = ({
+  filterGroup,
+  groupIndex,
+  filterConfigs,
+  className,
+  onRemove,
+  onChange,
+  onDone
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        "flex flex-col gap-4",
+        {
+          [s$4.filterFormGroupContainer]: filterGroup.filters.length > 1,
+          "p-3": filterGroup.filters.length > 1,
+          "pr-3": filterGroup.filters.length === 1
+        },
+        className
+      ),
+      children: filterGroup.filters.map((filter, filterIndex) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between",
+          children: [
+            filterIndex >= 1 && /* @__PURE__ */ jsx("span", { className: cx(s$4.filterFormConjunction, "mr-3"), children: "and" }),
+            /* @__PURE__ */ jsx(
+              FilterInput,
+              {
+                value: filter,
+                filterConfigs,
+                className: "flex-1",
+                onChange: (filter2) => onChange(filter2, filterIndex),
+                onBlur: (filter2) => onDone(filter2, filterIndex)
+              },
+              `${groupIndex}:${filterIndex}`
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "text",
+                icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+                onClick: () => onRemove(filterIndex)
+              }
+            )
+          ]
+        },
+        `${groupIndex}:${filterIndex}-input-container`
+      ))
+    },
+    filterGroup.field
+  );
+};
+const FiltersForm = ({
+  title,
+  filterConfigs,
+  onSubmit,
+  initialValues,
+  maxFiltersPerField = 5
+}) => {
+  const { dispatch, filterGroups, isNewFilterInputOpen, isValid, isEmpty } = useFiltersForm({
+    initialValues
+  });
+  const handleSubmit = () => {
+    onSubmit({
+      filters: filterGroups.flatMap((group) => group.filters).filter((filter) => isFilter(filter)).filter((filter) => !isEmptyFilter(filter))
+    });
+  };
+  const availableFilterConfigs = useMemo(() => {
+    const filterFieldCounts = filterGroups.reduce(
+      (acc, filterGroup) => {
+        acc[filterGroup.field] = filterGroup.filters.length;
+        return acc;
+      },
+      {}
+    );
+    return filterConfigs.map((config) => ({
+      ...config,
+      disabled: (filterFieldCounts[config.field] || 0) >= maxFiltersPerField
+    }));
+  }, [
+    filterConfigs,
+    filterGroups.map((g) => `${g.field}-${g.filters.length}`).join(","),
+    maxFiltersPerField
+  ]);
+  return /* @__PURE__ */ jsxs("div", { className: cx(s$4.j2FilterForm), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(
+          s$4.filterFormFieldsContainer,
+          "flex flex-col gap-4",
+          "p-4 mb-6"
+        ),
+        children: [
+          title && /* @__PURE__ */ jsx("span", { className: s$4.filterFormTitle, children: title }),
+          filterGroups.map((filterGroup, groupIndex) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cx("flex gap-3", {
+                "items-center": filterGroup.filters.length === 1
+              }),
+              children: [
+                groupIndex > 0 ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cx(s$4.filterFormConjunction, {
+                      "pt-4": filterGroup.filters.length > 1
+                    }),
+                    children: "and"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  FilterGroup,
+                  {
+                    filterGroup,
+                    groupIndex,
+                    filterConfigs: availableFilterConfigs,
+                    className: "grow",
+                    onChange: (filter, filterIndex) => {
+                      dispatch({
+                        type: "changeFilter",
+                        payload: { groupIndex, filterIndex, filter }
+                      });
+                    },
+                    onDone: (filter, filterIndex) => {
+                      dispatch({
+                        type: "updateFilter",
+                        payload: { groupIndex, filterIndex, filter }
+                      });
+                    },
+                    onRemove: (filterIndex) => {
+                      dispatch({
+                        type: "removeFilter",
+                        payload: { groupIndex, filterIndex }
+                      });
+                    }
+                  }
+                )
+              ]
+            },
+            `filter-group-${filterGroup.field}-${filterGroup.filters.length}`
+          )),
+          isNewFilterInputOpen && /* @__PURE__ */ jsxs("div", { className: cx("flex gap-3 items-center"), children: [
+            filterGroups.length > 0 ? /* @__PURE__ */ jsx("span", { className: cx(s$4.filterFormConjunction), children: "and" }) : null,
+            /* @__PURE__ */ jsxs("div", { className: cx("flex items-center justify-between", "grow"), children: [
+              /* @__PURE__ */ jsx(
+                FilterInput,
+                {
+                  filterConfigs: availableFilterConfigs,
+                  className: "flex-1",
+                  onChange: (filter) => {
+                    dispatch({ type: "changeNewFilter", payload: filter });
+                  },
+                  onBlur: (filter) => {
+                    dispatch({ type: "addNewFilter", payload: filter });
+                  }
+                },
+                JSON.stringify(filterGroups)
+              ),
+              /* @__PURE__ */ jsx("div", { className: "mr-3", children: filterGroups.length > 0 ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "text",
+                  icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+                  onClick: () => dispatch({ type: "removeNewFilter" })
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "w-8" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                icon: /* @__PURE__ */ jsx(PlusCircleIcon, {}),
+                onClick: () => dispatch({ type: "openNewFilterInput" }),
+                disabled: !isValid,
+                children: "Add Rule"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "text",
+                onClick: () => {
+                  dispatch({
+                    type: "clearAllFilters"
+                  });
+                },
+                children: "Clear All Rules"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: handleSubmit,
+        type: "primary",
+        disabled: isEmpty ? false : !isValid,
+        children: "Apply Filters"
+      }
+    ) })
+  ] });
+};
+const Form = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Form$1, { ...props, children });
+};
+Form.Item = FormItem;
+const Input = ({ size = "large", ...props }) => {
+  return /* @__PURE__ */ jsx(Input$2, { size, ...props });
+};
+const AntdInput = forwardRef(
+  ({ size = "large", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Input$1, { ref, size, ...props });
+  }
+);
+AntdInput.displayName = "AntdInput";
+const AntdSearchInput = forwardRef(
+  ({ size = "large", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Input$1.Search, { ref, size, ...props });
+  }
+);
+AntdSearchInput.displayName = "AntdSearchInput";
+const j2InputNumber = "_j2InputNumber_1jmfn_1";
+const styles$8 = {
+  j2InputNumber
+};
+const InputNumber = ({
+  size = "large",
+  step = 1,
+  name,
+  max,
+  min,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    InputNumber$2,
+    {
+      name,
+      max,
+      min,
+      step,
+      className: cx(styles$8.j2InputNumber, props.className),
+      upHandler: /* @__PURE__ */ jsx(CaretUpIcon, { weight: "bold", size: 12 }),
+      downHandler: /* @__PURE__ */ jsx(CaretDownIcon, { weight: "bold", size: 12 }),
+      size,
+      ...props
+    }
+  );
+};
+const j2Popover = "_j2Popover_1egkj_1";
+const smallPadding = "_smallPadding_1egkj_6";
+const smPadding = "_smPadding_1egkj_7";
+const xxsPadding = "_xxsPadding_1egkj_11";
+const xsPadding = "_xsPadding_1egkj_15";
+const mdPadding = "_mdPadding_1egkj_19";
+const xlPadding = "_xlPadding_1egkj_23";
+const popoverHeader = "_popoverHeader_1egkj_34";
+const scrollable = "_scrollable_1egkj_40";
+const styles$7 = {
+  j2Popover,
+  smallPadding,
+  smPadding,
+  xxsPadding,
+  xsPadding,
+  mdPadding,
+  xlPadding,
+  popoverHeader,
+  scrollable
+};
+const Popover = ({
+  children,
+  placement = "top",
+  scrollable: scrollable2 = false,
+  contentPadding = true,
+  content,
+  smallPadding: smallPadding2 = false,
+  paddingSize,
+  arrow = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Popover$1,
+    {
+      overlayClassName: cx(
+        styles$7.j2Popover,
+        scrollable2 && styles$7.scrollable,
+        smallPadding2 && styles$7.smallPadding,
+        paddingSize && styles$7[`${paddingSize}Padding`]
+      ),
+      ...props,
+      placement,
+      arrow,
+      content: () => {
+        if (!contentPadding) {
+          return /* @__PURE__ */ jsx("div", { children: typeof content == "function" ? content() : content });
+        }
+        return typeof content == "function" ? content() : content;
+      },
+      children: /* @__PURE__ */ jsx("div", { children })
+    }
+  );
+};
+const Tooltip = ({
+  children,
+  placement = "top",
+  arrow = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Tooltip$1, { ...props, placement, arrow, children: /* @__PURE__ */ jsx("div", { children }) });
+};
+const categoryName = "_categoryName_jejns_1";
+const s$3 = {
+  categoryName
+};
+const CopyButton = ({
+  openMessage,
+  textToCopy
+}) => /* @__PURE__ */ jsx(Tooltip, { title: "Copy to Clipboard", className: "ml-2", arrow: false, children: /* @__PURE__ */ jsx(
+  Button,
+  {
+    type: "text",
+    icon: /* @__PURE__ */ jsx(
+      CopyIcon,
+      {
+        onClick: () => {
+          navigator.clipboard.writeText(textToCopy);
+          openMessage("success", "Copied to Clipboard");
+        }
+      }
+    )
+  }
+) });
+const StringListItem = ({
+  item,
+  openMessage,
+  renderItem
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: cx("flex items-center"), children: [
+    /* @__PURE__ */ jsx("div", { className: cx("overflow-hidden text-nowrap text-ellipsis"), children: renderItem ? renderItem(item) : item }),
+    /* @__PURE__ */ jsx(CopyButton, { openMessage, textToCopy: item })
+  ] }, item);
+};
+const ObjectListItem = ({
+  item,
+  openMessage,
+  index: index2,
+  renderItem
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: cx({ "mt-2": index2 != 0 }), children: [
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cx(
+          "overflow-hidden text-nowrap text-ellipsis",
+          s$3.categoryName
+        ),
+        title: item.categoryName,
+        children: item.categoryName
+      }
+    ),
+    item.items.map((subItem, index22) => /* @__PURE__ */ jsxs("div", { className: cx("flex items-center"), children: [
+      /* @__PURE__ */ jsx("div", { className: cx("overflow-hidden text-nowrap text-ellipsis"), children: renderItem ? renderItem(subItem) : subItem }),
+      /* @__PURE__ */ jsx(CopyButton, { openMessage, textToCopy: subItem })
+    ] }, `${subItem}:${index22}`))
+  ] });
+};
+const PopoverContent = ({
+  items,
+  openMessage,
+  renderItem
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: cx("max-w-[400px] max-h-[198px]"), children: items.map(
+    (item, i) => typeof item === "string" ? /* @__PURE__ */ jsx(
+      StringListItem,
+      {
+        item,
+        openMessage,
+        renderItem
+      },
+      item
+    ) : /* @__PURE__ */ jsx(
+      ObjectListItem,
+      {
+        index: i,
+        item,
+        openMessage,
+        renderItem
+      },
+      item.categoryName
+    )
+  ) });
+};
+const ListPopover = ({
+  children,
+  items,
+  column,
+  openMessage,
+  renderItem
+}) => {
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      title: `${column} (${items.length})`,
+      content: /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          items,
+          openMessage,
+          renderItem
+        }
+      ),
+      trigger: "click",
+      scrollable: true,
+      arrow: false,
+      contentPadding: false,
+      children: /* @__PURE__ */ jsx("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: cx(
+            "p-0 h-auto w-full overflow-hidden text-left justify-start"
+          ),
+          type: items.length > 0 ? "link" : "text",
+          children
+        }
+      ) })
+    }
+  );
+};
+const j2Menu = "_j2Menu_11mko_1";
+const compact = "_compact_11mko_15";
+const styles$6 = {
+  j2Menu,
+  compact
+};
+const Menu = ({ compact: compact2 = false, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Menu$1,
+    {
+      className: cx(styles$6.j2Menu, compact2 && styles$6.compact),
+      ...props,
+      inlineCollapsed: compact2
+    }
+  );
+};
+const messageIcon = "_messageIcon_1k9xp_1";
+const styles$5 = {
+  messageIcon
+};
+const getIcon$1 = (type) => {
+  switch (type) {
+    case "success":
+      return /* @__PURE__ */ jsx(
+        CheckCircleIcon,
+        {
+          weight: "fill",
+          color: "var(--j2-color-success)",
+          size: 16,
+          className: cx(styles$5.messageIcon)
+        }
+      );
+    case "warning":
+      return /* @__PURE__ */ jsx(
+        WarningCircleIcon,
+        {
+          weight: "fill",
+          color: "var(--j2-color-warning)",
+          size: 16,
+          className: cx(styles$5.messageIcon)
+        }
+      );
+    case "error":
+      return /* @__PURE__ */ jsx(
+        XCircleIcon,
+        {
+          weight: "fill",
+          color: "var(--j2-color-error)",
+          size: 16,
+          className: cx(styles$5.messageIcon)
+        }
+      );
+  }
+};
+const useMessage = () => {
+  const [messageApi, contextHolder] = message.useMessage();
+  const openMessage = (type, messageContent) => {
+    messageApi.open({
+      type,
+      icon: getIcon$1(type),
+      content: messageContent,
+      className: cx({ styles: styles$5 })
+    });
+  };
+  return { openMessage, contextHolder };
+};
+const Modal = ({
+  open,
+  title,
+  children,
+  onCancel,
+  withContentPadding: withPadding = true,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Modal$1,
+    {
+      title,
+      className: cx("j2-modal"),
+      maskClosable: true,
+      centered: true,
+      closeIcon: /* @__PURE__ */ jsx(XIcon, { size: 22, weight: "regular" }),
+      onCancel,
+      open,
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: cx(withPadding ? "px-6 py-3" : "px-0 py-0"), children })
+    }
+  );
+};
+const SvgJ2LogoMenuCollapse = (props) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M30.3968 25.6H27.392C26.9664 25.6 26.56 25.7696 26.2592 26.0672L26.064 26.2624C25.7632 26.5632 25.5968 26.9696 25.5968 27.3952V30.4C25.5968 31.2832 24.88 32 23.9968 32H20.7968C19.9136 32 19.1968 31.2832 19.1968 30.4V27.3952C19.1968 26.9696 19.0272 26.5632 18.7296 26.2624L18.5344 26.0672C18.2336 25.7664 17.8272 25.6 17.4016 25.6H14.3968C13.5136 25.6 12.7968 24.8832 12.7968 24V20.8C12.7968 19.9168 13.5136 19.2 14.3968 19.2H17.5968C18.48 19.2 19.1968 19.9168 19.1968 20.8V23.8048C19.1968 24.2304 19.3664 24.6368 19.664 24.9376L19.8592 25.1328C20.16 25.4336 20.5664 25.6 20.992 25.6H23.8048C24.2304 25.6 24.6368 25.4304 24.9376 25.1328L25.1328 24.9376C25.4336 24.6368 25.6 24.2304 25.6 23.8048V8.00002C25.6 7.11682 26.3168 6.40002 27.2 6.40002H30.4C31.2832 6.40002 32 7.11682 32 8.00002V24C32 24.8832 31.2832 25.6 30.4 25.6H30.3968Z", fill: "#253761" }), /* @__PURE__ */ React.createElement("path", { d: "M8.192 6.39999H11.0048C11.4304 6.39999 11.8368 6.56959 12.1376 6.86719L12.3328 7.06239C12.6336 7.36319 12.8 7.76959 12.8 8.19519V11.2C12.8 12.0832 13.5168 12.8 14.4 12.8H17.6C18.4832 12.8 19.2 12.0832 19.2 11.2V7.99999C19.2 7.11679 18.4832 6.39999 17.6 6.39999H14.5952C14.1696 6.39999 13.7632 6.23039 13.4624 5.93279L13.2672 5.73759C12.9664 5.43679 12.8 5.03039 12.8 4.60479V1.6C12.8 0.716799 12.0832 0 11.2 0H8C7.1168 0 6.4 0.716799 6.4 1.6V4.60479C6.4 5.03039 6.2304 5.43679 5.9328 5.73759L5.7376 5.93279C5.4368 6.23359 5.0304 6.39999 4.6048 6.39999H1.6C0.7168 6.39999 0 7.11679 0 7.99999V24C0 24.8832 0.7168 25.6 1.6 25.6H4.8C5.6832 25.6 6.4 24.8832 6.4 24V8.19519C6.4 7.76959 6.5696 7.36319 6.8672 7.06239L7.0624 6.86719C7.3632 6.56639 7.7696 6.39999 8.1952 6.39999H8.192Z", fill: "#253761" }));
+const SvgJ2LogoMenu = (props) => /* @__PURE__ */ React.createElement("svg", { width: 152, height: 32, viewBox: "0 0 152 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M44.9576 22.7691C46.6563 22.7691 47.6449 21.8637 47.6449 19.5891V6.39841H50.8536V20.4113C50.8536 23.8121 48.7966 25.8149 45.8629 25.8149C45.4502 25.8149 44.8488 25.8149 44.3561 25.7061V22.7723H44.9608L44.9576 22.7691Z", fill: "#383842" }), /* @__PURE__ */ React.createElement("path", { d: "M53.3582 23.2619L60.0476 16.6522C62.0215 14.7038 62.9812 13.5809 62.9812 12.074C62.9812 10.4296 61.6376 9.24902 59.8557 9.24902C57.6898 9.24902 56.3462 10.7303 56.4294 13.0882H53.195C53.0575 8.8939 55.9367 6.12332 59.9132 6.12332C63.5891 6.12332 66.2763 8.56438 66.2763 11.9908C66.2763 14.3775 64.7152 16.4346 62.3286 18.6805L58.544 22.4653H66.4139V25.591H53.3614V23.2587L53.3582 23.2619Z", fill: "#383842" }), /* @__PURE__ */ React.createElement("path", { d: "M89.7255 6.39844V25.5941H86.5168V17.1768H77.2201V25.5941H74.0114V6.39844H77.2201V14.1055H86.5168V6.39844H89.7255Z", fill: "#383842" }), /* @__PURE__ */ React.createElement("path", { d: "M91.5684 18.847C91.5684 14.9247 94.614 11.9078 98.4786 11.9078C102.097 11.9078 105.005 14.7327 105.005 18.4631C105.005 18.7382 104.976 19.3141 104.95 19.6149H94.4476C94.7228 21.8096 96.284 23.262 98.5074 23.262C100.235 23.262 101.55 22.4398 101.825 21.1793H104.842C104.375 24.0299 101.796 25.8695 98.5362 25.8695C94.614 25.8695 91.5716 22.8237 91.5716 18.8502L91.5684 18.847ZM101.77 17.3945C101.607 15.7213 100.181 14.4864 98.3442 14.4864C96.5079 14.4864 95.1099 15.5294 94.614 17.3945H101.77Z", fill: "#383842" }), /* @__PURE__ */ React.createElement("path", { d: "M120.773 25.5944H117.702V23.1821C116.743 24.8809 115.098 25.8695 112.932 25.8695C109.34 25.8695 106.515 22.7438 106.515 18.8759C106.515 15.0079 109.34 11.911 112.932 11.911C115.098 11.911 116.743 12.8996 117.702 14.5984V12.1862H120.773V25.5944ZM113.591 22.9614C115.924 22.9614 117.677 21.2082 117.677 18.8759C117.677 16.5436 115.92 14.816 113.591 14.816C111.262 14.816 109.532 16.6268 109.532 18.8759C109.532 21.125 111.314 22.9614 113.591 22.9614Z", fill: "#383842" }), /* @__PURE__ */ React.createElement("path", { d: "M126.708 25.5942H123.666V6.39847H126.708V25.5942Z", fill: "#383842" }), /* @__PURE__ */ React.createElement("path", { d: "M130.688 20.549V15.091H128.138V12.1828H130.688V8.59003H133.759V12.1828H137.268V15.091H133.759V20.4946C133.759 22.1934 134.802 22.8812 136.283 22.8812C136.612 22.8812 136.968 22.8524 137.271 22.7725V25.5974C136.804 25.7062 136.12 25.7606 135.627 25.7606C132.665 25.7606 130.691 23.9498 130.691 20.549H130.688Z", fill: "#383842" }), /* @__PURE__ */ React.createElement("path", { d: "M142.403 6.39847V14.2975C143.254 12.7906 144.652 11.9108 146.434 11.9108C149.889 11.9108 152 14.2143 152 17.9447V25.5942H148.954V18.3286C148.954 16.2171 147.665 14.8446 145.691 14.8446C143.717 14.8446 142.399 16.2171 142.399 18.3286V25.5942H139.357V6.39847H142.399H142.403Z", fill: "#383842" }), /* @__PURE__ */ React.createElement("path", { d: "M30.3971 25.6H27.3926C26.967 25.6 26.5607 25.7696 26.2599 26.0672L26.0647 26.2624C25.7639 26.5632 25.5976 26.9696 25.5976 27.3952V30.4C25.5976 31.2832 24.8808 32 23.9977 32H20.798C19.9149 32 19.1982 31.2832 19.1982 30.4V27.3952C19.1982 26.9696 19.0286 26.5632 18.731 26.2624L18.5359 26.0672C18.2351 25.7664 17.8287 25.6 17.4032 25.6H14.3987C13.5156 25.6 12.7988 24.8832 12.7988 24V20.8C12.7988 19.9168 13.5156 19.2 14.3987 19.2H17.5984C18.4815 19.2 19.1982 19.9168 19.1982 20.8V23.8048C19.1982 24.2304 19.3678 24.6368 19.6654 24.9376L19.8605 25.1328C20.1613 25.4336 20.5677 25.6 20.9932 25.6H23.8057C24.2313 25.6 24.6377 25.4304 24.9384 25.1328L25.1336 24.9376C25.4344 24.6368 25.6008 24.2304 25.6008 23.8048V8C25.6008 7.1168 26.3175 6.4 27.2006 6.4H30.4003C31.2834 6.4 32.0001 7.1168 32.0001 8V24C32.0001 24.8832 31.2834 25.6 30.4003 25.6H30.3971ZM8.1945 6.4H11.007C11.4326 6.4 11.8389 6.5696 12.1397 6.8672L12.3349 7.0624C12.6357 7.3632 12.802 7.7696 12.802 8.1952V11.2C12.802 12.0832 13.5188 12.8 14.4019 12.8H17.6016C18.4847 12.8 19.2014 12.0832 19.2014 11.2V8C19.2014 7.1168 18.4847 6.4 17.6016 6.4H14.5971C14.1715 6.4 13.7651 6.2304 13.4644 5.9328L13.2692 5.7376C12.9684 5.4368 12.802 5.0304 12.802 4.6048V1.6C12.802 0.7168 12.0853 0 11.2022 0H8.00252C7.11941 0 6.40268 0.7168 6.40268 1.6V4.6048C6.40268 5.0304 6.2331 5.4368 5.93553 5.7376L5.74035 5.9328C5.43958 6.2336 5.03322 6.4 4.60766 6.4H1.59996C0.71685 6.4 0.00012207 7.1168 0.00012207 8V24C0.00012207 24.8832 0.71685 25.6 1.59996 25.6H4.79964C5.68275 25.6 6.39948 24.8832 6.39948 24V8.1952C6.39948 7.7696 6.56906 7.3632 6.86663 7.0624L7.06182 6.8672C7.36259 6.5664 7.76894 6.4 8.1945 6.4Z", fill: "#253761" }));
+const SvgMenuSidebarExpand = (props) => /* @__PURE__ */ React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M3.75049 19.5C3.55158 19.5 3.36081 19.421 3.22016 19.2803C3.07951 19.1397 3.00049 18.9489 3.00049 18.75V5.25C3.00049 5.05109 3.07951 4.86032 3.22016 4.71967C3.36081 4.57902 3.55158 4.5 3.75049 4.5H8.25049V19.5H3.75049Z", fill: "#364975" }), /* @__PURE__ */ React.createElement("path", { d: "M8.25049 4.5V19.5", stroke: "#364975", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M20.2505 4.5H3.75049C3.33627 4.5 3.00049 4.83579 3.00049 5.25V18.75C3.00049 19.1642 3.33627 19.5 3.75049 19.5H20.2505C20.6647 19.5 21.0005 19.1642 21.0005 18.75V5.25C21.0005 4.83579 20.6647 4.5 20.2505 4.5Z", stroke: "#364975", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M3.00049 7.5H5.25049", stroke: "#364975", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M3.00049 10.5H5.25049", stroke: "#364975", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M3.00049 13.5H5.25049", stroke: "#364975", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M15.0002 14.7002L17.7002 12.0002L15.0002 9.3002V14.7002Z", fill: "#364975" }), /* @__PURE__ */ React.createElement("path", { d: "M11.1 12.0002H15", stroke: "#364975", strokeWidth: 0.6, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M15.0002 14.7002L17.7002 12.0002L15.0002 9.3002V14.7002Z", stroke: "#364975", strokeWidth: 0.6, strokeLinecap: "round", strokeLinejoin: "round" }));
+const SvgMenuSidebarCollapse = (props) => /* @__PURE__ */ React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M3.75049 19.5C3.55158 19.5 3.36081 19.421 3.22016 19.2803C3.07951 19.1397 3.00049 18.9489 3.00049 18.75V5.25C3.00049 5.05109 3.07951 4.86032 3.22016 4.71967C3.36081 4.57902 3.55158 4.5 3.75049 4.5H8.25049V19.5H3.75049Z", fill: "#253761" }), /* @__PURE__ */ React.createElement("path", { d: "M8.25049 4.5V19.5", stroke: "#253761", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M20.2505 4.5H3.75049C3.33627 4.5 3.00049 4.83579 3.00049 5.25V18.75C3.00049 19.1642 3.33627 19.5 3.75049 19.5H20.2505C20.6647 19.5 21.0005 19.1642 21.0005 18.75V5.25C21.0005 4.83579 20.6647 4.5 20.2505 4.5Z", stroke: "#253761", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M3.00049 7.5H5.25049", stroke: "#253761", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M3.00049 10.5H5.25049", stroke: "#253761", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M3.00049 13.5H5.25049", stroke: "#253761", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M13.8001 9.30029L11.1001 12.0003L13.8001 14.7003V9.30029Z", fill: "#253761" }), /* @__PURE__ */ React.createElement("path", { d: "M17.7005 12.0002H13.8005", stroke: "#253761", strokeWidth: 0.6, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M13.8001 9.30029L11.1001 12.0003L13.8001 14.7003V9.30029Z", stroke: "#253761", strokeWidth: 0.6, strokeLinecap: "round", strokeLinejoin: "round" }));
+const navMenuContainer = "_navMenuContainer_1ul3o_1";
+const collapsed = "_collapsed_1ul3o_5";
+const headerContainer = "_headerContainer_1ul3o_8";
+const logo$1 = "_logo_1ul3o_9";
+const styles$4 = {
+  navMenuContainer,
+  collapsed,
+  headerContainer,
+  logo: logo$1
+};
+const NavMenu = ({
+  href = "/",
+  items,
+  headerSlot,
+  defaultOpenKeys,
+  defaultSelectedKeys,
+  footerItems,
+  className,
+  onCollapse
+}) => {
+  const [isCollapsed, setIsCollapsed] = React.useState(false);
+  const [isToggleTooltipOpen, setToggleTooltipOpen] = React.useState(false);
+  const toggleCollapse = React.useCallback(() => {
+    setIsCollapsed(!isCollapsed);
+    setToggleTooltipOpen(false);
+    onCollapse == null ? void 0 : onCollapse(!isCollapsed);
+  }, [isCollapsed]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        styles$4.navMenuContainer,
+        isCollapsed && styles$4.collapsed,
+        "bg-white",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: cx("flex", "flex-col", "h-full"), children: [
+        /* @__PURE__ */ jsxs("div", { className: "py-5 px-3", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cx(
+                "flex",
+                "items-center",
+                isCollapsed ? "justify-center" : "justify-between",
+                styles$4.headerContainer,
+                "min-h-9"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href,
+                    className: cx("flex", "items-center", "gap-2", styles$4.logo),
+                    children: isCollapsed ? /* @__PURE__ */ jsx(SvgJ2LogoMenuCollapse, {}) : /* @__PURE__ */ jsx(SvgJ2LogoMenu, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    title: isCollapsed ? "Expand Menu" : "Collapse Menu",
+                    placement: "right",
+                    arrow: false,
+                    onOpenChange: (shouldBeOpen) => {
+                      setToggleTooltipOpen(shouldBeOpen);
+                    },
+                    open: isToggleTooltipOpen,
+                    children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "text",
+                        icon: isCollapsed ? /* @__PURE__ */ jsx(SvgMenuSidebarExpand, {}) : /* @__PURE__ */ jsx(SvgMenuSidebarCollapse, {}),
+                        onClick: toggleCollapse,
+                        className: cx("toggle-button")
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          headerSlot && /* @__PURE__ */ jsx("div", { className: cx("mt-5"), children: headerSlot })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: cx("flex", "flex-col", "justify-between", "flex-1"), children: [
+          /* @__PURE__ */ jsx(
+            Menu,
+            {
+              mode: "inline",
+              compact: isCollapsed,
+              items,
+              defaultOpenKeys: isCollapsed ? void 0 : defaultOpenKeys,
+              defaultSelectedKeys
+            },
+            `nav-menu-main-${isCollapsed}`
+          ),
+          /* @__PURE__ */ jsx(
+            Menu,
+            {
+              mode: "inline",
+              compact: isCollapsed,
+              selectable: false,
+              items: footerItems
+            },
+            `nav-menu-footer-${isCollapsed}`
+          )
+        ] })
+      ] })
+    }
+  );
+};
+const messageOnly = "_messageOnly_1pxqk_14";
+const s$2 = {
+  messageOnly
+};
+const getIcon = (type) => {
+  switch (type) {
+    case "error":
+      return /* @__PURE__ */ jsx(XCircleIcon, { color: "var(--j2-color-error)", weight: "duotone", size: 24 });
+    case "success":
+      return /* @__PURE__ */ jsx(
+        CheckCircleIcon,
+        {
+          color: "var(--j2-color-success)",
+          weight: "duotone",
+          size: 24
+        }
+      );
+    case "info":
+      return /* @__PURE__ */ jsx(InfoIcon, { color: "var(--j2-color-info)", weight: "duotone", size: 24 });
+    case "warning":
+      return /* @__PURE__ */ jsx(
+        WarningCircleIcon,
+        {
+          color: "var(--j2-color-warning)",
+          weight: "duotone",
+          size: 24
+        }
+      );
+  }
+};
+const useNotification = () => {
+  const [api, contextHolder] = notification.useNotification();
+  const openNotification = (type, config) => {
+    api[type]({
+      icon: getIcon(type),
+      ...config,
+      closeIcon: /* @__PURE__ */ jsx(XIcon, { color: "var(--j2-color-icon)", size: 22, weight: "regular" }),
+      className: cx({
+        [s$2.messageOnly]: config.message && !config.description
+      })
+    });
+  };
+  const closeNotification = (key) => {
+    api.destroy(key);
+  };
+  return { openNotification, closeNotification, contextHolder };
+};
+const modalTitleWithIcon = "_modalTitleWithIcon_5g0kf_1";
+const modalIcon = "_modalIcon_5g0kf_7";
+const modalTitleContent = "_modalTitleContent_5g0kf_16";
+const modalTitleText = "_modalTitleText_5g0kf_21";
+const modalContentWithIcon = "_modalContentWithIcon_5g0kf_30";
+const styles$3 = {
+  modalTitleWithIcon,
+  modalIcon,
+  modalTitleContent,
+  modalTitleText,
+  modalContentWithIcon
+};
+const getNotificationIcon = (type) => {
+  switch (type) {
+    case "error":
+      return /* @__PURE__ */ jsx(XCircleIcon, { color: "var(--j2-color-error)", weight: "fill", size: 24 });
+    case "success":
+      return /* @__PURE__ */ jsx(
+        CheckCircleIcon,
+        {
+          color: "var(--j2-color-success)",
+          weight: "fill",
+          size: 24
+        }
+      );
+    case "info":
+      return /* @__PURE__ */ jsx(InfoIcon, { color: "var(--j2-color-info)", weight: "fill", size: 24 });
+    case "warning":
+      return /* @__PURE__ */ jsx(
+        WarningCircleIcon,
+        {
+          color: "var(--j2-color-warning)",
+          weight: "fill",
+          size: 24
+        }
+      );
+  }
+};
+const NotificationModal = ({
+  type,
+  title,
+  children,
+  withContentPadding = true,
+  ...props
+}) => {
+  const icon = useMemo(() => getNotificationIcon(type), [type]);
+  const titleWithIcon = /* @__PURE__ */ jsxs("div", { className: styles$3.modalTitleWithIcon, children: [
+    /* @__PURE__ */ jsx("div", { className: styles$3.modalIcon, children: icon }),
+    /* @__PURE__ */ jsx("div", { className: styles$3.modalTitleContent, children: /* @__PURE__ */ jsx("div", { className: styles$3.modalTitleText, children: title }) })
+  ] });
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      title: titleWithIcon,
+      withContentPadding,
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: styles$3.modalContentWithIcon, children })
+    }
+  );
+};
+const s$1 = {
+  "jump-button": "_jump-button_bwjnt_41"
+};
+const renderIconButton = (icon, isSmall, customClassName) => /* @__PURE__ */ jsx(
+  Button$1,
+  {
+    type: "link",
+    size: isSmall ? "small" : "middle",
+    className: cx(customClassName, isSmall ? "!w-6" : "!w-8"),
+    children: icon
+  }
+);
+const renderJumpItem = (icon, doubleIcon, isSmall) => /* @__PURE__ */ jsx("a", { className: "ant-pagination-item-link", children: /* @__PURE__ */ jsxs("div", { className: "ant-pagination-item-container", children: [
+  /* @__PURE__ */ jsx("span", { className: "ant-pagination-item-ellipsis", children: renderIconButton(icon, isSmall, s$1["jump-button"]) }),
+  /* @__PURE__ */ jsx("span", { className: "ant-pagination-item-link-icon", children: renderIconButton(doubleIcon, isSmall, s$1["jump-button"]) })
+] }) });
+const buildItemRender = ({ paginationTextLabels, isSmall }) => (_page, type, element) => {
+  if (type === "prev") {
+    return /* @__PURE__ */ jsx("a", { children: paginationTextLabels ? "Previous" : renderIconButton(/* @__PURE__ */ jsx(CaretLeftIcon, {}), isSmall) });
+  }
+  if (type === "next") {
+    return /* @__PURE__ */ jsx("a", { children: paginationTextLabels ? "Next" : renderIconButton(/* @__PURE__ */ jsx(CaretRightIcon, {}), isSmall) });
+  }
+  if (type === "jump-prev") {
+    return renderJumpItem(/* @__PURE__ */ jsx(DotsThreeIcon, {}), /* @__PURE__ */ jsx(CaretDoubleLeftIcon, {}), isSmall);
+  }
+  if (type === "jump-next") {
+    return renderJumpItem(
+      /* @__PURE__ */ jsx(DotsThreeIcon, {}),
+      /* @__PURE__ */ jsx(CaretDoubleRightIcon, {}),
+      isSmall
+    );
+  }
+  return element;
+};
+const paginationSelectComponentClass = (selectProps) => /* @__PURE__ */ jsx(Select$1, { ...selectProps, suffixIcon: /* @__PURE__ */ jsx(CaretDownIcon, {}) });
+const getPaginationLocale = (isSmall) => ({
+  jump_to: `Go to ${isSmall ? ":   " : ""}`,
+  page: isSmall ? "" : "page"
+});
+const withDesignSystemPaginationOverrides = (pagination, { paginationTextLabels = false, isSmall } = {}) => {
+  const small = isSmall ?? pagination.size === "small";
+  return {
+    ...pagination,
+    locale: { ...getPaginationLocale(small), ...pagination.locale },
+    selectComponentClass: paginationSelectComponentClass,
+    itemRender: buildItemRender({
+      paginationTextLabels,
+      isSmall: small
+    })
+  };
+};
+const Pagination = ({ paginationTextLabels = false, ...props }) => {
+  const enriched = withDesignSystemPaginationOverrides(props, {
+    paginationTextLabels
+  });
+  return /* @__PURE__ */ jsx(Pagination$1, { ...enriched });
+};
+const Progress = ({ ...props }) => {
+  return /* @__PURE__ */ jsx(Progress$1, { ...props });
+};
+const Radio = (props) => {
+  return /* @__PURE__ */ jsx(Radio$1, { ...props });
+};
+const RadioGroup = ({
+  buttonStyle = "solid",
+  optionType = "button",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Radio$1.Group,
+    {
+      ...props,
+      buttonStyle,
+      optionType
+    }
+  );
+};
+const Rate = ({ count = 5, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Rate$1,
+    {
+      ...props,
+      className: "j2-rate",
+      count,
+      disabled: true,
+      allowHalf: true,
+      allowClear: true,
+      character: /* @__PURE__ */ jsx(StarIcon, { weight: "fill" })
+    }
+  );
+};
+const isGroupOption$1 = (opt) => "options" in opt && Array.isArray(opt.options);
+const flattenOptions = (opts) => {
+  if (!opts) return [];
+  return opts.flatMap(
+    (o) => isGroupOption$1(o) ? flattenOptions(o.options) : [o]
+  );
+};
+const Select = (props) => {
+  var _a;
+  const [isFocused, setIsFocused] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const [field, , helpers] = useField(props.name);
+  const isMultiple = props.mode === "multiple";
+  const hasOptions = (((_a = props.options) == null ? void 0 : _a.length) ?? 0) > 0;
+  const currentValue = Array.isArray(field.value) ? field.value : [];
+  const showSelectAllFooter = isMultiple && !props.loading && !props.disabled && hasOptions && !isSearching;
+  const handleSearch = (value) => {
+    setIsSearching(value.length > 0);
+    if (props.onSearch) {
+      props.onSearch(value);
+    }
+  };
+  const handleToggleAll = () => {
+    var _a2, _b;
+    if (props.disabled) return;
+    if (currentValue.length === 0) {
+      const flat = flattenOptions(
+        props.options
+      );
+      const allOptions = flat.filter(
+        (opt) => opt.value !== void 0 && opt.value !== null && !opt.disabled
+      );
+      const payload = props.labelInValue ? allOptions.map((opt) => ({ value: opt.value, label: opt.label })) : allOptions.map((opt) => opt.value);
+      void helpers.setValue(payload);
+      (_a2 = props.onChange) == null ? void 0 : _a2.call(props, payload, allOptions);
+    } else {
+      void helpers.setValue([]);
+      (_b = props.onChange) == null ? void 0 : _b.call(props, [], []);
+    }
+  };
+  const dropdownRender = (menu) => {
+    if (props.loading) {
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-1", children: [
+        /* @__PURE__ */ jsx("span", { children: "Loading..." }),
+        /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }), size: "small" })
+      ] });
+    }
+    if (!props.options || props.options && props.options.length === 0) {
+      return /* @__PURE__ */ jsx("div", { className: "px-3 py-1", children: "No options" });
+    }
+    if (!showSelectAllFooter) return menu;
+    const label = currentValue.length === 0 ? "Select all" : "Clear all";
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      menu,
+      /* @__PURE__ */ jsx("div", { className: "mt-1 pt-1 border-t border-j2-border-secondary", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": label,
+          title: label,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: handleToggleAll,
+          className: "w-full text-center font-semibold text-sm py-1.5 rounded cursor-pointer text-j2-primary hover:bg-j2-primary-bg-hover bg-transparent border-0",
+          children: label
+        }
+      ) })
+    ] });
+  };
+  return /* @__PURE__ */ jsx(
+    Select$2,
+    {
+      suffixIcon: props.loading ? /* @__PURE__ */ jsx(
+        Spin,
+        {
+          indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }),
+          size: "small",
+          "data-testid": "loading-spinner"
+        }
+      ) : props.showSearch && isFocused ? /* @__PURE__ */ jsx(MagnifyingGlassIcon, { size: 14, "data-testid": "magnifying-glass" }) : /* @__PURE__ */ jsx(CaretDownIcon, { size: 14, "data-testid": "caret-down" }),
+      ...props,
+      popupRender: dropdownRender,
+      removeIcon: /* @__PURE__ */ jsx(XCircleIcon, { size: 12 }),
+      allowClear: props.allowClear ? { clearIcon: /* @__PURE__ */ jsx(XCircleIcon, { size: 14 }) } : false,
+      showSearch: props.showSearch,
+      onSearch: handleSearch,
+      onFocus: () => {
+        setIsFocused(true);
+      },
+      onBlur: () => {
+        setIsFocused(false);
+        setIsSearching(false);
+      },
+      size: props.size || "large"
+    }
+  );
+};
+const AntdSelect = (props) => {
+  var _a;
+  const [isFocused, setIsFocused] = useState(false);
+  const handleSearch = (value) => {
+    if (props.onSearch) {
+      props.onSearch(value);
+    }
+  };
+  const dropdownRender = React.useCallback(
+    (menu) => {
+      if (props.loading) {
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-1", children: [
+          /* @__PURE__ */ jsx("span", { children: "Loading..." }),
+          /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }), size: "small" })
+        ] });
+      }
+      if (!props.options || props.options && props.options.length === 0) {
+        return /* @__PURE__ */ jsx("div", { className: "px-3 py-1", children: "No options" });
+      }
+      return menu;
+    },
+    [props.loading, (_a = props.options) == null ? void 0 : _a.length]
+  );
+  return /* @__PURE__ */ jsx(
+    Select$1,
+    {
+      suffixIcon: props.loading ? /* @__PURE__ */ jsx(
+        Spin,
+        {
+          indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }),
+          size: "small",
+          "data-testid": "loading-spinner"
+        }
+      ) : props.showSearch && isFocused ? /* @__PURE__ */ jsx(MagnifyingGlassIcon, { size: 14, "data-testid": "magnifying-glass" }) : /* @__PURE__ */ jsx(CaretDownIcon, { size: 14, "data-testid": "caret-down" }),
+      ...props,
+      popupRender: dropdownRender,
+      removeIcon: /* @__PURE__ */ jsx(XCircleIcon, { size: 12 }),
+      allowClear: props.allowClear ? { clearIcon: /* @__PURE__ */ jsx(XCircleIcon, { size: 14 }) } : false,
+      showSearch: props.showSearch,
+      onSearch: props.onSearch ? handleSearch : void 0,
+      onFocus: () => {
+        setIsFocused(true);
+      },
+      onBlur: () => {
+        setIsFocused(false);
+      },
+      size: props.size || "large"
+    }
+  );
+};
+const index = /* @__PURE__ */ _mergeNamespaces({
+  __proto__: null
+}, [react]);
+const colorToIcon = {
+  error: XCircleIcon,
+  success: CheckCircleIcon,
+  warning: WarningCircleIcon,
+  processing: ArrowsClockwiseIcon,
+  default: GearIcon
+};
+const statusToColor = {
+  error: "var(--j2-color-error-text)",
+  success: "var(--j2-color-success)",
+  warning: "var(--j2-color-warning-text)",
+  processing: "var(--j2-color-primary)",
+  default: "var(--j2-color-text)"
+};
+const Tag = ({
+  status,
+  showIcon = false,
+  icon,
+  size = "default",
+  ...props
+}) => {
+  const iconComponent = React.useMemo(() => {
+    if (!showIcon || size === "small") return null;
+    const baseProps = {
+      size: 12
+    };
+    const iconName = icon ?? colorToIcon[status];
+    const color = statusToColor[status];
+    return /* @__PURE__ */ jsx("span", { role: "img", className: "anticon", "aria-label": `${status} icon`, children: React.createElement(iconName, { color, ...baseProps }) });
+  }, [status, showIcon, icon]);
+  const statusToClassName = {
+    default: "bg-[var(--j2-color-fill-quaternary)]"
+  };
+  return /* @__PURE__ */ jsx(
+    Tag$1,
+    {
+      ...props,
+      color: status,
+      icon: iconComponent,
+      className: cx(
+        props.className,
+        statusToClassName[status],
+        size === "small" && "!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm"
+      )
+    }
+  );
+};
+const hemisphericSelect = "_hemisphericSelect_2ivoh_1";
+const summarizedSelect = "_summarizedSelect_2ivoh_11";
+const isActive = "_isActive_2ivoh_22";
+const menuContainer = "_menuContainer_2ivoh_36";
+const menuContainerMultiple = "_menuContainerMultiple_2ivoh_46";
+const headlinedSelect = "_headlinedSelect_2ivoh_61";
+const headlinedMenuContainer = "_headlinedMenuContainer_2ivoh_105";
+const clearAllButton = "_clearAllButton_2ivoh_116";
+const styles$2 = {
+  hemisphericSelect,
+  summarizedSelect,
+  isActive,
+  menuContainer,
+  menuContainerMultiple,
+  headlinedSelect,
+  headlinedMenuContainer,
+  clearAllButton
+};
+const isGroupOption = (option) => {
+  return "options" in option;
+};
+const getAllOptions = (options) => {
+  if (!options) return [];
+  return options.flatMap(
+    (option) => isGroupOption(option) ? option.options : [option]
+  );
+};
+const filterOptions = (options, searchValue) => {
+  if (!options) return [];
+  if (!searchValue) return options;
+  return options.map((option) => {
+    var _a;
+    if (isGroupOption(option)) {
+      const filteredSubOptions = option.options.filter(
+        (subOption) => {
+          var _a2;
+          return (_a2 = subOption.label) == null ? void 0 : _a2.toString().toLowerCase().includes(searchValue.toLowerCase());
+        }
+      );
+      return filteredSubOptions.length > 0 ? { ...option, options: filteredSubOptions } : null;
+    } else {
+      return ((_a = option.label) == null ? void 0 : _a.toString().toLowerCase().includes(searchValue.toLowerCase())) ? option : null;
+    }
+  }).filter((option) => option !== null);
+};
+function SummarizedSelect({
+  searchPlaceholder,
+  formControlPlaceholder,
+  loading,
+  multiple,
+  value,
+  onChange,
+  options,
+  renderLabel,
+  rootClassName,
+  popupClassName,
+  variant,
+  trigger = "select",
+  defaultOpen = false,
+  ...props
+}) {
+  const isHeadline = variant === "headlined";
+  const antVariant = isHeadline ? "borderless" : variant;
+  const [searchValue, setSearchValue] = useState("");
+  const [focusTrigger, setFocusTrigger] = useState(defaultOpen ? 1 : 0);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const inputRef = useRef(null);
+  const measureSpanRef = useRef(null);
+  const [measuredWidth, setMeasuredWidth] = useState();
+  const displayText = useMemo(() => {
+    if (multiple && value.length > 0) {
+      return renderLabel(value.length);
+    }
+    if (!multiple && value) {
+      const option = getAllOptions(options).find((opt) => opt.value === value);
+      return option ? String(option.label) : String(value);
+    }
+    return formControlPlaceholder ?? "";
+  }, [multiple, value, options, renderLabel, formControlPlaceholder]);
+  useEffect(() => {
+    if (!measureSpanRef.current) return;
+    setMeasuredWidth(Math.ceil(measureSpanRef.current.offsetWidth) + 46);
+  }, [displayText]);
+  useEffect(() => {
+    if (focusTrigger > 0) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setTimeout(() => {
+            var _a;
+            (_a = inputRef.current) == null ? void 0 : _a.focus({ cursor: "end" });
+          }, 100);
+        });
+      });
+    }
+  }, [focusTrigger]);
+  const filteredOptions = useMemo(() => {
+    return filterOptions(options, searchValue);
+  }, [searchValue, options]);
+  const flatFilteredOptions = useMemo(() => {
+    return getAllOptions(filteredOptions);
+  }, [filteredOptions]);
+  const allFlatOptions = useMemo(() => {
+    return getAllOptions(options);
+  }, [options]);
+  const handleTagClose = (removedValue) => {
+    if (!multiple) return;
+    onChange(value.filter((x) => x !== removedValue));
+  };
+  const handleToggleAll = () => {
+    if (!multiple) return;
+    const allFilteredValues = getAllOptions(filteredOptions).map(
+      (opt) => opt.value
+    );
+    const someSelected = allFilteredValues.some((val) => value.includes(val));
+    if (someSelected) {
+      onChange(value.filter((val) => !allFilteredValues.includes(val)));
+    }
+  };
+  const handleSelectFirstOption = () => {
+    if (flatFilteredOptions.length === 0) return;
+    const firstOption = flatFilteredOptions[0];
+    if (!firstOption) return;
+    const optionValue = firstOption.value;
+    if (multiple) {
+      if (value.includes(optionValue)) {
+        onChange(value.filter((v) => v !== optionValue));
+      } else {
+        onChange([...value, optionValue]);
+      }
+    } else {
+      onChange(optionValue);
+      setIsOpen(false);
+    }
+  };
+  const handleOptionClick = (optionValue) => {
+    if (multiple) {
+      if (value.includes(optionValue)) {
+        onChange(value.filter((v) => v !== optionValue));
+      } else {
+        onChange([...value, optionValue]);
+      }
+    } else {
+      onChange(optionValue);
+      setIsOpen(false);
+    }
+  };
+  const handleKeyDown = (e) => {
+    const navigationKeys = ["ArrowUp", "ArrowDown"];
+    if (e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      handleSelectFirstOption();
+      return;
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsOpen(false);
+      return;
+    }
+    if (navigationKeys.includes(e.key)) {
+      e.preventDefault();
+      return;
+    }
+    e.stopPropagation();
+  };
+  const optionRender = (option) => {
+    if ("logo" in option.data && option.data.logo) {
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-4 shrink-0", children: option.data.logo }),
+        /* @__PURE__ */ jsx("span", { className: "overflow-ellipsis overflow-hidden", children: option.label })
+      ] });
+    }
+    return /* @__PURE__ */ jsx("div", { children: option.label });
+  };
+  const popupRender = (menu) => {
+    const valueToLabel = (val) => {
+      const option = allFlatOptions.find((opt) => opt.value === val);
+      return option ? option.label : val;
+    };
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-2 px-2 pb-2 border-b -mx-1 mt-1", children: /* @__PURE__ */ jsx(
+        Input$1,
+        {
+          ref: inputRef,
+          autoFocus: true,
+          placeholder: searchPlaceholder || "Search...",
+          value: searchValue,
+          onChange: (e) => {
+            setSearchValue(e.target.value);
+            e.stopPropagation();
+            e.preventDefault();
+          },
+          onKeyDown: handleKeyDown,
+          onClick: (e) => e.stopPropagation(),
+          prefix: /* @__PURE__ */ jsx(
+            MagnifyingGlassIcon,
+            {
+              size: 16,
+              className: "text-j2-text-placeholder"
+            }
+          ),
+          allowClear: true
+        },
+        focusTrigger
+      ) }),
+      multiple && value.length > 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 pb-2", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-y-1", children: value.map((value2) => /* @__PURE__ */ jsx(
+        Tag,
+        {
+          className: "opacity-100 z-10 flex max-w-full",
+          status: "default",
+          closable: true,
+          onClose: () => handleTagClose(value2),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "overflow-ellipsis overflow-hidden",
+              title: valueToLabel(value2),
+              children: valueToLabel(value2)
+            }
+          )
+        },
+        value2
+      )) }) }) : null,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx(styles$2.menuContainer, "rounded-lg", {
+            [styles$2.headlinedMenuContainer]: isHeadline,
+            [styles$2.menuContainerMultiple]: multiple
+          }),
+          children: menu
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-between items-center", children: multiple && /* @__PURE__ */ jsx("div", { className: "w-full mt-1 pt-1 border-t border-j2-border-secondary", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-selected": "false",
+          className: cx(
+            "ant-select-item ant-select-item-option w-full",
+            styles$2.clearAllButton
+          ),
+          title: "Clear all",
+          onClick: handleToggleAll,
+          children: /* @__PURE__ */ jsx("div", { className: "ant-select-item-option-content text-center font-semibold", children: "Clear all" })
+        }
+      ) }) })
+    ] });
+  };
+  const handleOpenChange = (open) => {
+    setIsOpen(open);
+    if (open) {
+      setFocusTrigger((prev) => prev + 1);
+    } else {
+      setSearchValue("");
+    }
+  };
+  const renderDropdownOptionRow = (option) => {
+    const optionValue = option.value;
+    const isSelected = multiple ? value.includes(optionValue) : value === optionValue;
+    const hasLogo = "logo" in option && option.logo;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "option",
+        "aria-selected": isSelected,
+        onClick: () => handleOptionClick(optionValue),
+        className: cx(
+          "px-3 py-1.5 rounded cursor-pointer text-sm",
+          isSelected ? "bg-[var(--j2-color-primary)] text-white hover:bg-[var(--j2-color-primary)]" : "hover:bg-[var(--j2-color-bg-hover)]"
+        ),
+        children: hasLogo ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-4 shrink-0", children: option.logo }),
+          /* @__PURE__ */ jsx("span", { className: "overflow-hidden overflow-ellipsis", children: option.label })
+        ] }) : option.label
+      },
+      optionValue
+    );
+  };
+  const dropdownPopupRender = () => {
+    const valueToLabel = (val) => {
+      const option = allFlatOptions.find((opt) => opt.value === val);
+      return option ? option.label : val;
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-md p-2 min-w-[240px]", children: [
+      /* @__PURE__ */ jsx("div", { className: "pb-2 border-b border-j2-border-secondary", children: /* @__PURE__ */ jsx(
+        Input$1,
+        {
+          ref: inputRef,
+          autoFocus: true,
+          placeholder: searchPlaceholder || "Search...",
+          value: searchValue,
+          onChange: (e) => {
+            setSearchValue(e.target.value);
+            e.stopPropagation();
+          },
+          onKeyDown: handleKeyDown,
+          onClick: (e) => e.stopPropagation(),
+          prefix: /* @__PURE__ */ jsx(
+            MagnifyingGlassIcon,
+            {
+              size: 16,
+              className: "text-j2-text-placeholder"
+            }
+          ),
+          allowClear: true
+        },
+        focusTrigger
+      ) }),
+      multiple && value.length > 0 && /* @__PURE__ */ jsx("div", { className: "px-1 pt-2", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-y-1", children: value.map((v) => /* @__PURE__ */ jsx(
+        Tag,
+        {
+          className: "opacity-100 z-10 flex max-w-full",
+          status: "default",
+          closable: true,
+          onClose: () => handleTagClose(v),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "overflow-ellipsis overflow-hidden",
+              title: valueToLabel(v),
+              children: valueToLabel(v)
+            }
+          )
+        },
+        v
+      )) }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "max-h-72 overflow-y-auto py-1",
+          role: "listbox",
+          "aria-multiselectable": multiple || void 0,
+          children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-[var(--j2-color-text-secondary)]", children: "No options found" }) : filteredOptions.map((opt) => {
+            if (isGroupOption(opt)) {
+              return /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { className: "px-3 pt-2 pb-1 text-xs font-semibold uppercase tracking-wide text-[var(--j2-color-text-tertiary)]", children: opt.label }),
+                opt.options.map(renderDropdownOptionRow)
+              ] }, `group-${opt.label}`);
+            }
+            return renderDropdownOptionRow(opt);
+          })
+        }
+      ),
+      multiple && value.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 pt-1 border-t border-j2-border-secondary", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "button",
+          "aria-label": "Clear all",
+          title: "Clear all",
+          onClick: handleToggleAll,
+          className: cx(
+            "text-center font-semibold text-sm py-1.5 rounded cursor-pointer",
+            styles$2.clearAllButton
+          ),
+          children: "Clear all"
+        }
+      ) })
+    ] });
+  };
+  if (trigger === "dropdown") {
+    const hasSelection = multiple ? value.length > 0 : Boolean(value);
+    const triggerContent = /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+      hasSelection ? displayText : formControlPlaceholder ?? "Select",
+      loading ? /* @__PURE__ */ jsx(
+        Spin,
+        {
+          indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }),
+          size: "small",
+          "data-testid": "loading-spinner"
+        }
+      ) : /* @__PURE__ */ jsx(CaretDownIcon, { weight: "regular", "data-testid": "caret-down" })
+    ] });
+    return /* @__PURE__ */ jsx(
+      Dropdown$1,
+      {
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+        trigger: ["click"],
+        disabled: props.disabled,
+        popupRender: dropdownPopupRender,
+        children: /* @__PURE__ */ jsx(
+          Typography.Link,
+          {
+            disabled: props.disabled,
+            className: cx("inline-flex", rootClassName),
+            children: triggerContent
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: measureSpanRef,
+        "aria-hidden": true,
+        style: {
+          position: "absolute",
+          visibility: "hidden",
+          whiteSpace: "nowrap",
+          fontSize: "inherit"
+        },
+        children: displayText
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Select$1,
+      {
+        open: isOpen,
+        showSearch: false,
+        style: { width: measuredWidth },
+        suffixIcon: loading ? /* @__PURE__ */ jsx(
+          Spin,
+          {
+            indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }),
+            size: "small",
+            "data-testid": "loading-spinner"
+          }
+        ) : /* @__PURE__ */ jsx(CaretDownIcon, { size: 14, "data-testid": "caret-down" }),
+        placeholder: formControlPlaceholder,
+        mode: multiple ? "multiple" : void 0,
+        value,
+        maxTagCount: 0,
+        maxTagPlaceholder: multiple ? () => renderLabel(value.length) : value,
+        options: filteredOptions,
+        onChange: (val) => {
+          if (multiple) {
+            if (Array.isArray(val)) {
+              onChange(val);
+            } else {
+              throw new Error("Value should be an array in multiple mode");
+            }
+          } else {
+            if (typeof val === "string") {
+              onChange(val);
+            } else {
+              throw new Error(
+                "Value should be a string in single selection mode"
+              );
+            }
+          }
+        },
+        popupRender,
+        optionRender,
+        onOpenChange: handleOpenChange,
+        classNames: {
+          root: cx(rootClassName, styles$2.summarizedSelect, {
+            [styles$2.hemisphericSelect]: variant !== "underlined" && variant !== "headlined",
+            [styles$2.isActive]: multiple && value.length > 0 && variant !== "underlined" && variant !== "headlined",
+            [styles$2.headlinedSelect]: isHeadline
+          }),
+          popup: { root: popupClassName }
+        },
+        variant: antVariant,
+        ...props
+      }
+    )
+  ] });
+}
+const Skeleton = (props) => {
+  return /* @__PURE__ */ jsx(Skeleton$1, { ...props });
+};
+Skeleton.Node = Skeleton$1.Node;
+Skeleton.Avatar = Skeleton$1.Avatar;
+Skeleton.Input = Skeleton$1.Input;
+Skeleton.Image = Skeleton$1.Image;
+Skeleton.Button = Skeleton$1.Button;
+const SvgProgressCircle = (props) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_552_202130)" }, /* @__PURE__ */ React.createElement("circle", { cx: 40, cy: 40, r: 38, stroke: "black", strokeOpacity: 0.06, strokeWidth: 4 }), /* @__PURE__ */ React.createElement("path", { d: "M40 2C48.0248 2 55.8436 4.54049 62.3358 9.25736", stroke: "#253761", strokeWidth: 4, strokeLinecap: "round" })), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_552_202130" }, /* @__PURE__ */ React.createElement("rect", { width: 80, height: 80, fill: "white" }))));
+const SpinIcon = ({ height, width }) => {
+  return /* @__PURE__ */ jsx(Icon, { spin: true, component: () => /* @__PURE__ */ jsx(SvgProgressCircle, {}), style: { height, width } });
+};
+const Spinner = ({ size = 80, className }) => {
+  return /* @__PURE__ */ jsx(
+    Spin,
+    {
+      className,
+      indicator: /* @__PURE__ */ jsx(SpinIcon, { height: size, width: size })
+    }
+  );
+};
+const useSteps = ({
+  current,
+  setCurrent,
+  totalSteps,
+  initialStep = 0
+}) => {
+  const [internalCurrent, setInternalCurrent] = useState(initialStep);
+  const isControlled = current !== void 0 && setCurrent !== void 0;
+  const currentStep = isControlled ? current : internalCurrent;
+  const handleSetCurrent = useCallback(
+    (newCurrent) => {
+      if (isControlled) {
+        setCurrent(newCurrent);
+      } else {
+        setInternalCurrent(newCurrent);
+      }
+    },
+    [isControlled, setCurrent]
+  );
+  const next = useCallback(() => {
+    if (currentStep < totalSteps - 1) {
+      handleSetCurrent(currentStep + 1);
+    }
+  }, [currentStep, totalSteps, handleSetCurrent]);
+  const previous = useCallback(() => {
+    if (currentStep > 0) {
+      handleSetCurrent(currentStep - 1);
+    }
+  }, [currentStep, handleSetCurrent]);
+  const goToStep = useCallback(
+    (step) => {
+      if (step >= 0 && step < totalSteps) {
+        handleSetCurrent(step);
+      }
+    },
+    [totalSteps, handleSetCurrent]
+  );
+  const cancel = useCallback(() => {
+    handleSetCurrent(initialStep);
+  }, [handleSetCurrent, initialStep]);
+  return {
+    next,
+    previous,
+    goToStep,
+    cancel,
+    current: currentStep,
+    setCurrent: handleSetCurrent,
+    canGoNext: currentStep < totalSteps - 1,
+    canGoPrevious: currentStep > 0
+  };
+};
+const Steps = ({
+  items,
+  current,
+  setCurrent,
+  dot = false,
+  ...props
+}) => {
+  const isVertical = props.direction === "vertical";
+  const totalSteps = (items == null ? void 0 : items.length) || 0;
+  const { current: currentStep, setCurrent: setCurrentStep } = useSteps({
+    current,
+    setCurrent,
+    totalSteps
+  });
+  return /* @__PURE__ */ jsx(
+    Steps$1,
+    {
+      className: "j2Steps",
+      ...props,
+      current: currentStep,
+      onChange: (curr) => setCurrentStep(curr),
+      ...dot && { progressDot: true },
+      items: items == null ? void 0 : items.map((item, index2) => {
+        return {
+          ...item,
+          icon: !dot && currentStep > index2 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cx(
+                `check-${props.size}`,
+                isVertical ? `vertical-check-icon` : `check-icon`
+              ),
+              children: /* @__PURE__ */ jsx(CheckIcon, { size: 16 })
+            }
+          ) : item.icon
+        };
+      })
+    }
+  );
+};
+const Switch = ({
+  small,
+  loading = false,
+  disabled = false,
+  checked,
+  onChange,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Switch$1,
+    {
+      ...props,
+      size: small ? "small" : "default",
+      loading,
+      disabled,
+      checked,
+      onChange,
+      className: "j2-switch"
+    }
+  );
+};
+const bordered = "_bordered_1vc5s_1";
+const alternatingRows = "_alternatingRows_1vc5s_49";
+const s = {
+  bordered,
+  alternatingRows
+};
+const defaultSortIcon = ({
+  sortOrder
+}) => {
+  if (sortOrder == "ascend") return /* @__PURE__ */ jsx(CaretUpIcon, {});
+  if (sortOrder == "descend") return /* @__PURE__ */ jsx(CaretDownIcon, {});
+  return /* @__PURE__ */ jsx(CaretUpDownIcon, {});
+};
+const Table = ({
+  verticalBorders,
+  alternatingRows: alternatingRows2,
+  paginationTextLabels = false,
+  ...props
+}) => {
+  var _a, _b;
+  const defaultLoadingProps = {
+    indicator: /* @__PURE__ */ jsx(Spinner, { className: "!w-fit !h-fit !mx-0 translate-x-[-50%]" }),
+    tip: /* @__PURE__ */ jsxs("div", { className: "mt-20", children: [
+      /* @__PURE__ */ jsx("h4", { children: "Loading this chart" }),
+      /* @__PURE__ */ jsx("span", { className: "text-lg", children: "Please wait a moment" })
+    ] })
+  };
+  const loading = typeof props.loading == "object" ? { ...props.loading, ...defaultLoadingProps } : props.loading && defaultLoadingProps;
+  const isSimpleValue = (value) => {
+    return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+  };
+  const extractTextContent = (node) => {
+    if (isSimpleValue(node)) {
+      return String(node);
+    }
+    if (node && typeof node === "object" && "props" in node && node.props && typeof node.props === "object" && "children" in node.props) {
+      const children = node.props.children;
+      if (isSimpleValue(children)) {
+        return String(children);
+      }
+    }
+    return null;
+  };
+  const columns = (_a = props.columns) == null ? void 0 : _a.map((column) => {
+    const hasEllipsis = column.ellipsis === true || typeof column.ellipsis === "object" && column.ellipsis;
+    const originalRender = column.render;
+    return {
+      ...column,
+      sortIcon: column.sortIcon ?? defaultSortIcon,
+      ellipsis: hasEllipsis ? {
+        showTitle: false
+        // Disable default browser tooltip
+      } : column.ellipsis,
+      render: (value, record, index2) => {
+        const renderedContent = originalRender ? originalRender(value, record, index2) : value;
+        if (renderedContent == null) {
+          return /* @__PURE__ */ jsx("span", { className: "text-j2-text-secondary", children: "--" });
+        }
+        const tooltipText = extractTextContent(renderedContent);
+        if (tooltipText) {
+          if (isSimpleValue(renderedContent)) {
+            return /* @__PURE__ */ jsx(Tooltip$1, { title: tooltipText, arrow: false, children: /* @__PURE__ */ jsx("span", { className: hasEllipsis ? "block truncate" : void 0, children: renderedContent }) });
+          }
+          return /* @__PURE__ */ jsx(Tooltip$1, { title: tooltipText, arrow: false, children: /* @__PURE__ */ jsx("div", { children: renderedContent }) });
+        }
+        return renderedContent;
+      }
+    };
+  });
+  const paginationConfig = props.pagination ? withDesignSystemPaginationOverrides(
+    typeof props.pagination === "object" ? props.pagination : {},
+    {
+      paginationTextLabels,
+      isSmall: typeof props.pagination === "object" && props.pagination.size === "small" || props.size === "small"
+    }
+  ) : false;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(props.className, {
+        [s.bordered]: props.bordered && !verticalBorders,
+        [s.alternatingRows]: alternatingRows2
+      }),
+      children: /* @__PURE__ */ jsx(
+        Table$1,
+        {
+          showSorterTooltip: { target: "sorter-icon" },
+          ...props,
+          loading,
+          columns,
+          pagination: paginationConfig,
+          rowKey: (record) => JSON.stringify(record),
+          locale: {
+            emptyText: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: { height: ((_b = props.scroll) == null ? void 0 : _b.y) || 400, width: "content-fit" }
+              }
+            )
+          }
+        }
+      )
+    }
+  );
+};
+const TableColumn = (props) => {
+  return /* @__PURE__ */ jsx(Table$1.Column, { ...props, sortIcon: defaultSortIcon });
+};
+TableColumn.displayName = "Table.Column";
+Table.Column = TableColumn;
+Table.Summary = Table$1.Summary;
+const Tabs = (props) => {
+  const destroyOnHidden = props.destroyOnHidden ?? true;
+  return /* @__PURE__ */ jsx(Tabs$1, { ...props, destroyOnHidden });
+};
+const VennDiagram = ({ data, title, tooltip: tooltip2, onClick }) => {
+  const { token } = theme.useToken();
+  const baseFont = {
+    fontSize: `${token.fontSize}px`,
+    fontFamily: token.fontFamily,
+    color: token.colorText,
+    textOutline: "none",
+    opacity: 1
+  };
+  const options = {
+    title: {
+      text: title
+    },
+    ...tooltip2 ? { tooltip: tooltip2 } : {},
+    chart: {
+      spacing: [36, 36, 36, 36]
+    },
+    series: [
+      {
+        type: "venn",
+        data,
+        events: {
+          click: onClick
+        },
+        cursor: onClick ? "pointer" : void 0,
+        dataLabels: {
+          style: baseFont
+        },
+        states: {
+          inactive: {
+            opacity: 0.3
+          }
+        }
+      }
+    ]
+  };
+  return /* @__PURE__ */ jsx(Chart, { options });
+};
+const navContainer = "_navContainer_1eoor_2";
+const logoSection = "_logoSection_1eoor_14";
+const logoContainer = "_logoContainer_1eoor_18";
+const logoLink = "_logoLink_1eoor_25";
+const logo = "_logo_1eoor_14";
+const navContent = "_navContent_1eoor_46";
+const navSection = "_navSection_1eoor_54";
+const sectionHeader = "_sectionHeader_1eoor_59";
+const sectionTitle = "_sectionTitle_1eoor_63";
+const sectionItems = "_sectionItems_1eoor_73";
+const navItem = "_navItem_1eoor_79";
+const active = "_active_1eoor_96";
+const navItemIcon = "_navItemIcon_1eoor_100";
+const navItemLabel = "_navItemLabel_1eoor_115";
+const styles$1 = {
+  navContainer,
+  logoSection,
+  logoContainer,
+  logoLink,
+  logo,
+  navContent,
+  navSection,
+  sectionHeader,
+  sectionTitle,
+  sectionItems,
+  navItem,
+  active,
+  navItemIcon,
+  navItemLabel
+};
+const userSection = "_userSection_r06sp_2";
+const userProfile = "_userProfile_r06sp_7";
+const userAvatar = "_userAvatar_r06sp_24";
+const avatarImage = "_avatarImage_r06sp_38";
+const userName = "_userName_r06sp_44";
+const popover = "_popover_r06sp_55";
+const popoverUserInfo = "_popoverUserInfo_r06sp_78";
+const popoverAvatar = "_popoverAvatar_r06sp_86";
+const popoverUserName = "_popoverUserName_r06sp_105";
+const popoverActions = "_popoverActions_r06sp_113";
+const logOutButton = "_logOutButton_r06sp_138";
+const changeClientButton = "_changeClientButton_r06sp_143";
+const styles = {
+  userSection,
+  userProfile,
+  userAvatar,
+  avatarImage,
+  userName,
+  popover,
+  popoverUserInfo,
+  popoverAvatar,
+  popoverUserName,
+  popoverActions,
+  logOutButton,
+  changeClientButton
+};
+const UserProfile = ({
+  firstName,
+  lastName,
+  avatarUrl,
+  onLogOut,
+  onChangeClient
+}) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const popoverRef = useRef(null);
+  const buttonRef = useRef(null);
+  const displayName = lastName ? `${firstName} ${lastName}` : firstName;
+  const avatarDisplay = avatarUrl ? /* @__PURE__ */ jsx("img", { src: avatarUrl, alt: displayName, className: styles.avatarImage }) : firstName.charAt(0).toUpperCase();
+  const togglePopover = () => {
+    setIsPopoverOpen(!isPopoverOpen);
+  };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (popoverRef.current && !popoverRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
+        setIsPopoverOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: styles.userSection, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: buttonRef,
+        className: styles.userProfile,
+        onClick: togglePopover,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: styles.userAvatar, children: avatarDisplay }),
+          /* @__PURE__ */ jsx("span", { className: styles.userName, children: displayName })
+        ]
+      }
+    ),
+    isPopoverOpen && /* @__PURE__ */ jsxs("div", { ref: popoverRef, className: styles.popover, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.popoverUserInfo, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.popoverAvatar, children: avatarDisplay }),
+        /* @__PURE__ */ jsx("span", { className: styles.popoverUserName, children: displayName })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.popoverActions, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: styles.logOutButton,
+            onClick: () => {
+              onLogOut == null ? void 0 : onLogOut();
+              setIsPopoverOpen(false);
+            },
+            children: "LOG OUT"
+          }
+        ),
+        onChangeClient && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: styles.changeClientButton,
+            onClick: () => {
+              onChangeClient == null ? void 0 : onChangeClient();
+              setIsPopoverOpen(false);
+            },
+            children: "CHANGE CLIENT"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+const LegacyNavMenu = ({
+  sections,
+  user,
+  onItemClick,
+  logoUrl = "/",
+  onLogOut,
+  onChangeClient,
+  headerSlot,
+  footerSlot
+}) => {
+  const handleItemClick = (itemId) => {
+    onItemClick == null ? void 0 : onItemClick(itemId);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles$1.navContainer, children: [
+    /* @__PURE__ */ jsx("div", { className: styles$1.logoSection, children: /* @__PURE__ */ jsx("div", { className: styles$1.logoContainer, children: /* @__PURE__ */ jsx("a", { href: logoUrl, className: styles$1.logoLink, children: /* @__PURE__ */ jsx(SvgJ2LogoMenuCollapse, { className: styles$1.logo }) }) }) }),
+    headerSlot && /* @__PURE__ */ jsx("div", { className: "px-4", children: headerSlot }),
+    /* @__PURE__ */ jsx("div", { className: styles$1.navContent, children: sections.map((section) => /* @__PURE__ */ jsxs("div", { className: styles$1.navSection, children: [
+      /* @__PURE__ */ jsx("div", { className: styles$1.sectionHeader, children: /* @__PURE__ */ jsx("span", { className: styles$1.sectionTitle, children: section.title }) }),
+      /* @__PURE__ */ jsx("div", { className: styles$1.sectionItems, children: section.items.map((item) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: `${styles$1.navItem} ${item.isActive ? styles$1.active : ""}`,
+          onClick: () => handleItemClick(item.id),
+          children: [
+            item.icon && /* @__PURE__ */ jsx("div", { className: styles$1.navItemIcon, children: item.icon }),
+            /* @__PURE__ */ jsx("span", { className: styles$1.navItemLabel, children: item.label })
+          ]
+        },
+        item.id
+      )) })
+    ] }, section.title)) }),
+    footerSlot && /* @__PURE__ */ jsx("div", { className: "px-4", children: footerSlot }),
+    /* @__PURE__ */ jsx(
+      UserProfile,
+      {
+        firstName: user.firstName,
+        lastName: user.lastName,
+        avatarUrl: user.avatarUrl,
+        onLogOut,
+        onChangeClient
+      }
+    )
+  ] });
+};
+export {
+  Alert,
+  AntdInput,
+  AntdSearchInput,
+  AntdSelect,
+  AppConfigProvider,
+  BarChart,
+  Breadcrumb,
+  BulkActionBar,
+  Button,
+  Card,
+  Checkbox,
+  CheckboxTree,
+  Collapse,
+  Drawer,
+  Dropdown,
+  FiltersForm,
+  Form,
+  Chart2 as HighchartsReact,
+  Input,
+  InputNumber,
+  LegacyNavMenu,
+  ListPopover,
+  Menu,
+  Modal,
+  NavMenu,
+  NotificationModal,
+  Pagination,
+  Popover,
+  Progress,
+  Radio,
+  RadioGroup,
+  Rate,
+  Select,
+  Skeleton,
+  Spinner,
+  Steps,
+  SummarizedSelect,
+  Switch,
+  Table,
+  Tabs,
+  Tag,
+  Tooltip,
+  UserProfile,
+  VennDiagram,
+  appTheme,
+  index as icons,
+  tailwindPreset,
+  useMessage,
+  useNotification,
+  useSteps,
+  withDesignSystemPaginationOverrides
+};
+//# sourceMappingURL=index.js.map