@crediblemark/build 0.22.2 → 0.22.7

package/dist/chunk-2JUMF5G3.mjs

@@ -0,0 +1,1145 @@
+import {
+  EditorInner
+} from "./chunk-4PJ4QMWI.mjs";
+import {
+  IconButton,
+  LoadedRichTextMenuInner,
+  Loader
+} from "./chunk-T6RT6PV4.mjs";
+import {
+  ChevronDown,
+  CircleCheckBig,
+  Hash,
+  Link,
+  Lock,
+  LockOpen,
+  Search,
+  SlidersHorizontal,
+  Type,
+  useAppStore
+} from "./chunk-ZY24NW7X.mjs";
+import {
+  get_class_name_factory_default
+} from "./chunk-BFHV72KK.mjs";
+import {
+  generateId
+} from "./chunk-7LXZOPYT.mjs";
+
+// components/AutoField/store.ts
+import { useContext as useContext2 } from "react";
+import { useShallow as useShallow2 } from "zustand/react/shallow";
+
+// lib/use-context-store.tsx
+import { createContext, useContext, useState } from "react";
+import { createStore, useStore } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
+import { useShallow } from "zustand/react/shallow";
+import { jsx } from "react/jsx-runtime";
+function useContextStore(context, selector) {
+  const store = useContext(context);
+  if (!store) {
+    throw new Error("useContextStore must be used inside context");
+  }
+  return useStore(store, useShallow(selector));
+}
+function createStoreProvider(ContextComponent) {
+  const StoreProvider = ({
+    children,
+    value
+  }) => {
+    const [store] = useState(() => createStore(() => value));
+    return /* @__PURE__ */ jsx(ContextComponent.Provider, { value: store, children });
+  };
+  return StoreProvider;
+}
+function createContextStore(defaultValue) {
+  const ctx = createContext(
+    createStore(subscribeWithSelector(() => defaultValue))
+  );
+  return {
+    ctx,
+    Provider: createStoreProvider(ctx)
+  };
+}
+
+// components/AutoField/store.ts
+import { useStore as useStore2 } from "zustand";
+var fieldContextStore = createContextStore({});
+var useFieldStoreApi = () => useContext2(fieldContextStore.ctx);
+function useFieldStore(selector) {
+  const store = useContext2(fieldContextStore.ctx);
+  if (!store) {
+    throw new Error("useContextStore must be used inside context");
+  }
+  return useStore2(store, useShallow2(selector));
+}
+
+// css-module:/home/crediblemark/Project/Credibuild/components/AutoField/styles.module.css#css-module
+var styles_module_default = { "InputWrapper": "_InputWrapper_1q7gk_1", "Input-label": "_Input-label_1q7gk_5", "Input-labelIcon": "_Input-labelIcon_1q7gk_14", "Input-disabledIcon": "_Input-disabledIcon_1q7gk_21", "Input-input": "_Input-input_1q7gk_26", "Input": "_Input_1q7gk_1", "Input--readOnly": "_Input--readOnly_1q7gk_82", "Input-radioGroupItems": "_Input-radioGroupItems_1q7gk_93", "Input-radio": "_Input-radio_1q7gk_93", "Input-radioInner": "_Input-radioInner_1q7gk_110", "Input-radioInput": "_Input-radioInput_1q7gk_155" };
+
+// components/AutoField/FieldLabel.tsx
+import { useMemo } from "react";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var getClassName = get_class_name_factory_default("Input", styles_module_default);
+var FieldLabel = ({
+  children,
+  icon,
+  label,
+  el = "label",
+  readOnly,
+  className
+}) => {
+  const El = el;
+  return /* @__PURE__ */ jsxs(El, { className, children: [
+    /* @__PURE__ */ jsxs("div", { className: getClassName("label"), children: [
+      icon ? /* @__PURE__ */ jsx2("div", { className: getClassName("labelIcon"), children: icon }) : /* @__PURE__ */ jsx2(Fragment, {}),
+      label,
+      readOnly && /* @__PURE__ */ jsx2("div", { className: getClassName("disabledIcon"), title: "Read-only", children: /* @__PURE__ */ jsx2(Lock, { size: "12" }) })
+    ] }),
+    children
+  ] });
+};
+var FieldLabelInternal = ({
+  children,
+  icon,
+  label,
+  el = "label",
+  readOnly
+}) => {
+  const overrides = useAppStore((s) => s.overrides);
+  const Wrapper = useMemo(
+    () => overrides.fieldLabel || FieldLabel,
+    [overrides]
+  );
+  if (!label) {
+    return /* @__PURE__ */ jsx2(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx2(
+    Wrapper,
+    {
+      label,
+      icon,
+      className: getClassName({ readOnly }),
+      readOnly,
+      el,
+      children
+    }
+  );
+};
+
+// lib/data/get-deep.ts
+var getDeep = (node, path) => {
+  const pathParts = path.split(".");
+  return pathParts.reduce((acc, item) => {
+    if (!acc) return;
+    const [prop, indexStr] = item.replace("]", "").split("[");
+    const val = acc[prop];
+    if (indexStr && val) {
+      return val[parseInt(indexStr)];
+    }
+    return val;
+  }, node);
+};
+
+// components/AutoField/context.tsx
+import { createContext as createContext2, useContext as useContext3, useMemo as useMemo2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var NestedFieldContext = createContext2({});
+var useNestedFieldContext = () => {
+  const context = useContext3(NestedFieldContext);
+  return {
+    ...context,
+    readOnlyFields: context.readOnlyFields || {}
+  };
+};
+var NestedFieldProvider = ({
+  children,
+  name,
+  subName,
+  wildcardName = name,
+  readOnlyFields
+}) => {
+  const subPath = `${name}.${subName}`;
+  const wildcardSubPath = `${wildcardName}.${subName}`;
+  const subReadOnlyFields = useMemo2(
+    () => Object.keys(readOnlyFields).reduce((acc, readOnlyKey) => {
+      const isLocal = readOnlyKey.indexOf(subPath) > -1 || readOnlyKey.indexOf(wildcardSubPath) > -1;
+      if (isLocal) {
+        const subPathPattern = new RegExp(
+          `^(${name}|${wildcardName}).`.replace(/\[/g, "\\[").replace(/\]/g, "\\]").replace(/\./g, "\\.").replace(/\*/g, "\\*")
+        );
+        const localName = readOnlyKey.replace(subPathPattern, "");
+        return {
+          ...acc,
+          [localName]: readOnlyFields[readOnlyKey]
+        };
+      }
+      return acc;
+    }, {}),
+    [name, wildcardName, readOnlyFields, subPath, wildcardSubPath]
+  );
+  return /* @__PURE__ */ jsx3(
+    NestedFieldContext.Provider,
+    {
+      value: { readOnlyFields: subReadOnlyFields, localName: subName },
+      children
+    }
+  );
+};
+
+// components/Button/Button.tsx
+import { useEffect, useState as useState2 } from "react";
+
+// css-module:/home/crediblemark/Project/Credibuild/components/Button/Button.module.css#css-module
+var Button_module_default = { "Button": "_Button_164uz_1", "Button--medium": "_Button--medium_164uz_29", "Button--large": "_Button--large_164uz_34", "Button-icon": "_Button-icon_164uz_38", "Button--primary": "_Button--primary_164uz_42", "Button--secondary": "_Button--secondary_164uz_63", "Button--flush": "_Button--flush_164uz_80", "Button--disabled": "_Button--disabled_164uz_84", "Button--fullWidth": "_Button--fullWidth_164uz_92", "Button-spinner": "_Button-spinner_164uz_97" };
+
+// lib/filter-data-attrs.ts
+var dataAttrRe = /^(data-.*)$/;
+var filterDataAttrs = (props) => {
+  let filteredProps = {};
+  for (const prop in props) {
+    if (Object.prototype.hasOwnProperty.call(props, prop) && dataAttrRe.test(prop)) {
+      filteredProps[prop] = props[prop];
+    }
+  }
+  return filteredProps;
+};
+
+// components/Button/Button.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var getClassName2 = get_class_name_factory_default("Button", Button_module_default);
+var Button = ({
+  children,
+  href,
+  onClick,
+  variant = "primary",
+  type,
+  disabled,
+  tabIndex,
+  newTab,
+  fullWidth,
+  icon,
+  size = "medium",
+  loading: loadingProp = false,
+  ...props
+}) => {
+  const [loading, setLoading] = useState2(loadingProp);
+  useEffect(() => setLoading(loadingProp), [loadingProp]);
+  const ElementType = href ? "a" : type ? "button" : "span";
+  const dataAttrs = filterDataAttrs(props);
+  const el = /* @__PURE__ */ jsxs2(
+    ElementType,
+    {
+      className: getClassName2({
+        primary: variant === "primary",
+        secondary: variant === "secondary",
+        disabled,
+        fullWidth,
+        [size]: true
+      }),
+      onClick: (e) => {
+        if (!onClick) return;
+        setLoading(true);
+        Promise.resolve(onClick(e)).then(() => {
+          setLoading(false);
+        });
+      },
+      type,
+      disabled: disabled || loading,
+      tabIndex,
+      target: newTab ? "_blank" : void 0,
+      rel: newTab ? "noreferrer" : void 0,
+      href,
+      ...dataAttrs,
+      children: [
+        icon && /* @__PURE__ */ jsx4("div", { className: getClassName2("icon"), children: icon }),
+        children,
+        loading && /* @__PURE__ */ jsx4("div", { className: getClassName2("spinner"), children: /* @__PURE__ */ jsx4(Loader, { size: 14 }) })
+      ]
+    }
+  );
+  return el;
+};
+
+// components/AutoField/index.tsx
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect6,
+  useMemo as useMemo5
+} from "react";
+
+// lib/use-safe-id.ts
+import React2, { useState as useState3 } from "react";
+var useSafeId = () => {
+  if (typeof React2.useId !== "undefined") {
+    return React2.useId();
+  }
+  const [id] = useState3(generateId());
+  return id;
+};
+
+// components/AutoField/AutoFieldInternal.tsx
+import {
+  Suspense as Suspense2,
+  useCallback as useCallback3,
+  useContext as useContext4,
+  useMemo as useMemo4
+} from "react";
+import { useShallow as useShallow3 } from "zustand/react/shallow";
+import { lazy as lazy2 } from "react";
+
+// components/AutoField/lib/use-deep-field.ts
+var useDeepField = (path) => {
+  return useFieldStore((s) => getDeep(s, path));
+};
+
+// components/AutoField/fields/RadioField/index.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var getClassName3 = get_class_name_factory_default("Input", styles_module_default);
+var RadioField = ({
+  field,
+  onChange,
+  readOnly,
+  id,
+  name = id,
+  label,
+  labelIcon,
+  Label
+}) => {
+  const value = useDeepField(name);
+  if (field.type !== "radio" || !field.options) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx5(
+    Label,
+    {
+      icon: labelIcon || /* @__PURE__ */ jsx5(CircleCheckBig, { size: 16 }),
+      label: label || name,
+      readOnly,
+      el: "div",
+      children: /* @__PURE__ */ jsx5("div", { className: getClassName3("radioGroupItems"), id, children: field.options.map((option) => /* @__PURE__ */ jsxs3(
+        "label",
+        {
+          className: getClassName3("radio"),
+          children: [
+            /* @__PURE__ */ jsx5(
+              "input",
+              {
+                type: "radio",
+                className: getClassName3("radioInput"),
+                value: JSON.stringify({ value: option.value }),
+                name,
+                onChange: (e) => {
+                  onChange(JSON.parse(e.target.value).value);
+                },
+                disabled: readOnly,
+                checked: value === option.value
+              }
+            ),
+            /* @__PURE__ */ jsx5("div", { className: getClassName3("radioInner"), children: option.label || option.value?.toString() })
+          ]
+        },
+        option.label + option.value
+      )) })
+    }
+  );
+};
+
+// components/AutoField/fields/SelectField/index.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var getClassName4 = get_class_name_factory_default("Input", styles_module_default);
+var SelectField = ({
+  field,
+  onChange,
+  label,
+  labelIcon,
+  Label,
+  id,
+  name = id,
+  readOnly
+}) => {
+  const value = useDeepField(name);
+  if (field.type !== "select" || !field.options) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx6(
+    Label,
+    {
+      label: label || name,
+      icon: labelIcon || /* @__PURE__ */ jsx6(ChevronDown, { size: 16 }),
+      readOnly,
+      children: /* @__PURE__ */ jsx6(
+        "select",
+        {
+          id,
+          title: label || name,
+          className: getClassName4("input"),
+          disabled: readOnly,
+          onChange: (e) => {
+            onChange(JSON.parse(e.target.value).value);
+          },
+          value: JSON.stringify({ value }),
+          children: field.options.map((option) => /* @__PURE__ */ jsx6(
+            "option",
+            {
+              label: option.label,
+              value: JSON.stringify({ value: option.value })
+            },
+            option.label + JSON.stringify(option.value)
+          ))
+        }
+      )
+    }
+  );
+};
+
+// components/AutoField/fields/ExternalField/index.tsx
+import { useEffect as useEffect4 } from "react";
+
+// components/ExternalInput/index.tsx
+import {
+  useMemo as useMemo3,
+  useEffect as useEffect3,
+  useState as useState5,
+  useCallback,
+  isValidElement
+} from "react";
+
+// css-module:/home/crediblemark/Project/Credibuild/components/ExternalInput/styles.module.css#css-module
+var styles_module_default2 = { "ExternalInput-actions": "_ExternalInput-actions_1gpb4_1", "ExternalInput-button": "_ExternalInput-button_1gpb4_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_1gpb4_24", "ExternalInput--readOnly": "_ExternalInput--readOnly_1gpb4_31", "ExternalInput-detachButton": "_ExternalInput-detachButton_1gpb4_35", "ExternalInput": "_ExternalInput_1gpb4_1", "ExternalInputModal": "_ExternalInputModal_1gpb4_79", "ExternalInputModal-grid": "_ExternalInputModal-grid_1gpb4_89", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_1gpb4_100", "ExternalInputModal-filters": "_ExternalInputModal-filters_1gpb4_105", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_1gpb4_124", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_1gpb4_133", "ExternalInputModal-table": "_ExternalInputModal-table_1gpb4_133", "ExternalInputModal-thead": "_ExternalInputModal-thead_1gpb4_149", "ExternalInputModal-th": "_ExternalInputModal-th_1gpb4_149", "ExternalInputModal-td": "_ExternalInputModal-td_1gpb4_164", "ExternalInputModal-tr": "_ExternalInputModal-tr_1gpb4_169", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_1gpb4_176", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_1gpb4_202", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_1gpb4_206", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_1gpb4_223", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_1gpb4_227", "ExternalInputModal-search": "_ExternalInputModal-search_1gpb4_227", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_1gpb4_264", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_1gpb4_289", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_1gpb4_299", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_1gpb4_313", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_1gpb4_326", "ExternalInputModal-footerContainer": "_ExternalInputModal-footerContainer_1gpb4_330", "ExternalInputModal-footer": "_ExternalInputModal-footer_1gpb4_330", "ExternalInputModal-field": "_ExternalInputModal-field_1gpb4_343" };
+
+// components/Modal/index.tsx
+import { useEffect as useEffect2, useState as useState4 } from "react";
+
+// css-module:/home/crediblemark/Project/Credibuild/components/Modal/styles.module.css#css-module
+var styles_module_default3 = { "Modal": "_Modal_b422s_1", "Modal--isOpen": "_Modal--isOpen_b422s_15", "Modal-inner": "_Modal-inner_b422s_19" };
+
+// components/Modal/index.tsx
+import { createPortal } from "react-dom";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var getClassName5 = get_class_name_factory_default("Modal", styles_module_default3);
+var Modal = ({
+  children,
+  onClose,
+  isOpen
+}) => {
+  const [rootEl, setRootEl] = useState4(null);
+  useEffect2(() => {
+    setRootEl(document.getElementById("credbuild-portal-root"));
+  }, []);
+  if (!rootEl) {
+    return /* @__PURE__ */ jsx7("div", {});
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx7("div", { className: getClassName5({ isOpen }), onClick: onClose, children: /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: getClassName5("inner"),
+        onClick: (e) => e.stopPropagation(),
+        children
+      }
+    ) }),
+    rootEl
+  );
+};
+
+// css-module:/home/crediblemark/Project/Credibuild/components/Heading/styles.module.css#css-module
+var styles_module_default4 = { "Heading": "_Heading_1tpsl_1", "Heading--xxxxl": "_Heading--xxxxl_1tpsl_12", "Heading--xxxl": "_Heading--xxxl_1tpsl_18", "Heading--xxl": "_Heading--xxl_1tpsl_22", "Heading--xl": "_Heading--xl_1tpsl_26", "Heading--l": "_Heading--l_1tpsl_30", "Heading--m": "_Heading--m_1tpsl_34", "Heading--s": "_Heading--s_1tpsl_38", "Heading--xs": "_Heading--xs_1tpsl_42" };
+
+// components/Heading/index.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var getClassName6 = get_class_name_factory_default("Heading", styles_module_default4);
+var Heading = ({ children, rank, size = "m" }) => {
+  const Tag = rank ? `h${rank}` : "span";
+  return /* @__PURE__ */ jsx8(
+    Tag,
+    {
+      className: getClassName6({
+        [size]: true
+      }),
+      children
+    }
+  );
+};
+
+// components/ExternalInput/index.tsx
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var getClassName7 = get_class_name_factory_default("ExternalInput", styles_module_default2);
+var getClassNameModal = get_class_name_factory_default("ExternalInputModal", styles_module_default2);
+var dataCache = {};
+var ExternalInput = ({
+  field,
+  onChange,
+  value = null,
+  name,
+  id,
+  readOnly
+}) => {
+  const {
+    mapProp = (val) => val,
+    mapRow = (val) => val,
+    filterFields
+  } = field || {};
+  const { enabled: shouldCacheData } = field.cache ?? { enabled: true };
+  const [data, setData] = useState5([]);
+  const [isOpen, setOpen] = useState5(false);
+  const [isLoading, setIsLoading] = useState5(true);
+  const hasFilterFields = !!filterFields;
+  const [filters, setFilters] = useState5(field.initialFilters || {});
+  const [filtersToggled, setFiltersToggled] = useState5(hasFilterFields);
+  const mappedData = useMemo3(() => {
+    return data.map(mapRow);
+  }, [data, mapRow]);
+  const keys = useMemo3(() => {
+    const validKeys = /* @__PURE__ */ new Set();
+    for (const item of mappedData) {
+      for (const key of Object.keys(item)) {
+        if (typeof item[key] === "string" || typeof item[key] === "number" || isValidElement(item[key])) {
+          validKeys.add(key);
+        }
+      }
+    }
+    return Array.from(validKeys);
+  }, [mappedData]);
+  const [searchQuery, setSearchQuery] = useState5(field.initialQuery || "");
+  const search = useCallback(
+    async (query, filters2) => {
+      setIsLoading(true);
+      const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
+      let listData;
+      if (shouldCacheData && dataCache[cacheKey]) {
+        listData = dataCache[cacheKey];
+      } else {
+        listData = await field.fetchList({ query, filters: filters2 });
+      }
+      if (listData) {
+        setData(listData);
+        setIsLoading(false);
+        if (shouldCacheData) {
+          dataCache[cacheKey] = listData;
+        }
+      }
+    },
+    [id, field, shouldCacheData]
+  );
+  const Footer = useCallback(
+    (props) => field.renderFooter ? field.renderFooter(props) : /* @__PURE__ */ jsxs4("span", { className: getClassNameModal("footer"), children: [
+      props.items.length,
+      " result",
+      props.items.length === 1 ? "" : "s"
+    ] }),
+    [field]
+  );
+  useEffect3(() => {
+    search(searchQuery, filters);
+  }, [search, searchQuery, filters]);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: getClassName7({
+        dataSelected: !!value,
+        modalVisible: isOpen,
+        readOnly
+      }),
+      id,
+      children: [
+        /* @__PURE__ */ jsxs4("div", { className: getClassName7("actions"), children: [
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              onClick: () => setOpen(true),
+              className: getClassName7("button"),
+              disabled: readOnly,
+              children: value ? field.getItemSummary ? field.getItemSummary(value) : "External item" : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                /* @__PURE__ */ jsx9(Link, { size: "16" }),
+                /* @__PURE__ */ jsx9("span", { children: field.placeholder })
+              ] })
+            }
+          ),
+          value && /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              className: getClassName7("detachButton"),
+              onClick: () => {
+                onChange(null);
+              },
+              disabled: readOnly,
+              children: /* @__PURE__ */ jsx9(LockOpen, { size: 16 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx9(Modal, { onClose: () => setOpen(false), isOpen, children: /* @__PURE__ */ jsxs4(
+          "form",
+          {
+            className: getClassNameModal({
+              isLoading,
+              loaded: !isLoading,
+              hasData: mappedData.length > 0,
+              filtersToggled
+            }),
+            onSubmit: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              search(searchQuery, filters);
+            },
+            children: [
+              /* @__PURE__ */ jsx9("div", { className: getClassNameModal("masthead"), children: field.showSearch ? /* @__PURE__ */ jsxs4("div", { className: getClassNameModal("searchForm"), children: [
+                /* @__PURE__ */ jsxs4("label", { className: getClassNameModal("search"), children: [
+                  /* @__PURE__ */ jsx9("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
+                  /* @__PURE__ */ jsx9("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ jsx9(Search, { size: "18" }) }),
+                  /* @__PURE__ */ jsx9(
+                    "input",
+                    {
+                      className: getClassNameModal("searchInput"),
+                      name: "q",
+                      type: "search",
+                      placeholder: field.placeholder,
+                      onChange: (e) => {
+                        setSearchQuery(e.currentTarget.value);
+                      },
+                      autoComplete: "off",
+                      value: searchQuery
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs4("div", { className: getClassNameModal("searchActions"), children: [
+                  /* @__PURE__ */ jsx9(Button, { type: "submit", loading: isLoading, fullWidth: true, children: "Search" }),
+                  hasFilterFields && /* @__PURE__ */ jsx9("div", { className: getClassNameModal("searchActionIcon"), children: /* @__PURE__ */ jsx9(
+                    IconButton,
+                    {
+                      type: "button",
+                      title: "Toggle filters",
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setFiltersToggled(!filtersToggled);
+                      },
+                      children: /* @__PURE__ */ jsx9(SlidersHorizontal, { size: 20 })
+                    }
+                  ) })
+                ] })
+              ] }) : /* @__PURE__ */ jsx9(Heading, { rank: "2", size: "xs", children: field.placeholder || "Select data" }) }),
+              /* @__PURE__ */ jsxs4("div", { className: getClassNameModal("grid"), children: [
+                hasFilterFields && /* @__PURE__ */ jsx9("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
+                  const filterField = filterFields[fieldName];
+                  return /* @__PURE__ */ jsx9(
+                    "div",
+                    {
+                      className: getClassNameModal("field"),
+                      children: /* @__PURE__ */ jsx9(FieldLabel, { label: filterField.label || fieldName, children: /* @__PURE__ */ jsx9(
+                        AutoField,
+                        {
+                          field: filterField,
+                          id: `external_field_${fieldName}_filter`,
+                          value: filters[fieldName],
+                          onChange: (value2) => {
+                            setFilters((filters2) => {
+                              const newFilters = {
+                                ...filters2,
+                                [fieldName]: value2
+                              };
+                              search(searchQuery, newFilters);
+                              return newFilters;
+                            });
+                          }
+                        }
+                      ) })
+                    },
+                    fieldName
+                  );
+                }) }),
+                /* @__PURE__ */ jsxs4("div", { className: getClassNameModal("tableWrapper"), children: [
+                  /* @__PURE__ */ jsxs4("table", { className: getClassNameModal("table"), children: [
+                    /* @__PURE__ */ jsx9("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ jsx9("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ jsx9(
+                      "th",
+                      {
+                        className: getClassNameModal("th"),
+                        style: { textAlign: "left" },
+                        children: key
+                      },
+                      key
+                    )) }) }),
+                    /* @__PURE__ */ jsx9("tbody", { className: getClassNameModal("tbody"), children: mappedData.map((item, i) => {
+                      return /* @__PURE__ */ jsx9(
+                        "tr",
+                        {
+                          style: { whiteSpace: "nowrap" },
+                          className: getClassNameModal("tr"),
+                          onClick: () => {
+                            onChange(mapProp(data[i]));
+                            setOpen(false);
+                          },
+                          children: keys.map((key) => /* @__PURE__ */ jsx9("td", { className: getClassNameModal("td"), children: item[key] }, key))
+                        },
+                        i
+                      );
+                    }) })
+                  ] }),
+                  /* @__PURE__ */ jsx9("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ jsx9(Loader, { size: 24 }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx9("div", { className: getClassNameModal("footerContainer"), children: /* @__PURE__ */ jsx9(Footer, { items: mappedData }) })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+// components/AutoField/fields/ExternalField/index.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var ExternalField = ({
+  field,
+  onChange,
+  id,
+  name = id,
+  label,
+  labelIcon,
+  Label,
+  readOnly
+}) => {
+  const value = useDeepField(name);
+  const validField = field;
+  const deprecatedField = field;
+  useEffect4(() => {
+    if (deprecatedField.adaptor) {
+      console.error(
+        "Warning: The `adaptor` API is deprecated. Please use updated APIs on the `external` field instead. This will be a breaking change in a future release."
+      );
+    }
+  }, [deprecatedField.adaptor]);
+  if (field.type !== "external") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx10(
+    Label,
+    {
+      label: label || name,
+      icon: labelIcon || /* @__PURE__ */ jsx10(Link, { size: 16 }),
+      el: "div",
+      children: /* @__PURE__ */ jsx10(
+        ExternalInput,
+        {
+          name,
+          field: {
+            ...validField,
+            // DEPRECATED
+            placeholder: deprecatedField.adaptor?.name ? `Select from ${deprecatedField.adaptor.name}` : validField.placeholder || "Select data",
+            mapProp: deprecatedField.adaptor?.mapProp || validField.mapProp,
+            mapRow: validField.mapRow,
+            fetchList: deprecatedField.adaptor?.fetchList ? async () => await deprecatedField.adaptor.fetchList(
+              deprecatedField.adaptorParams
+            ) : validField.fetchList
+          },
+          onChange,
+          value,
+          id,
+          readOnly
+        }
+      )
+    }
+  );
+};
+
+// components/AutoField/lib/use-local-value.ts
+import { useCallback as useCallback2, useEffect as useEffect5, useState as useState6 } from "react";
+
+// components/AutoField/lib/use-is-focused.ts
+var useIsFocused = (path) => {
+  return useAppStore((s) => s.state.ui.field.focus === path);
+};
+
+// components/AutoField/lib/use-local-value.ts
+var useLocalValue = (path, onChange) => {
+  const value = useDeepField(path);
+  const isFocused = useIsFocused(path);
+  const [localValue, setLocalValue] = useState6(value?.toString());
+  const onChangeLocal = useCallback2(
+    (val) => {
+      setLocalValue(val);
+      onChange(val);
+    },
+    [onChange]
+  );
+  useEffect5(() => {
+    if (!isFocused) {
+      setLocalValue(value);
+    }
+  }, [isFocused, value]);
+  return [localValue ?? "", onChangeLocal];
+};
+
+// components/AutoField/fields/DefaultField/index.tsx
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var getClassName8 = get_class_name_factory_default("Input", styles_module_default);
+var DefaultField = ({
+  field,
+  onChange,
+  readOnly,
+  id,
+  name = id,
+  label,
+  labelIcon,
+  Label
+}) => {
+  const [localValue, onChangeLocal] = useLocalValue(name, onChange);
+  return /* @__PURE__ */ jsx11(
+    Label,
+    {
+      label: label || name,
+      icon: labelIcon || /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        field.type === "text" && /* @__PURE__ */ jsx11(Type, { size: 16 }),
+        field.type === "number" && /* @__PURE__ */ jsx11(Hash, { size: 16 })
+      ] }),
+      readOnly,
+      children: /* @__PURE__ */ jsx11(
+        "input",
+        {
+          className: getClassName8("input"),
+          autoComplete: "off",
+          type: field.type,
+          title: label || name,
+          name,
+          value: localValue,
+          onChange: (e) => {
+            if (field.type === "number") {
+              const numberValue = Number(e.currentTarget.value);
+              if (typeof field.min !== "undefined" && numberValue < field.min) {
+                return;
+              }
+              if (typeof field.max !== "undefined" && numberValue > field.max) {
+                return;
+              }
+              onChangeLocal(numberValue);
+            } else {
+              onChangeLocal(e.currentTarget.value);
+            }
+          },
+          readOnly,
+          tabIndex: readOnly ? -1 : void 0,
+          id,
+          min: field.type === "number" ? field.min : void 0,
+          max: field.type === "number" ? field.max : void 0,
+          placeholder: field.type === "text" || field.type === "number" ? field.placeholder : void 0,
+          step: field.type === "number" ? field.step : void 0
+        }
+      )
+    }
+  );
+};
+
+// components/AutoField/fields/TextareaField/index.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var getClassName9 = get_class_name_factory_default("Input", styles_module_default);
+var TextareaField = ({
+  field,
+  onChange,
+  readOnly,
+  id,
+  name = id,
+  label,
+  labelIcon,
+  Label
+}) => {
+  const [localValue, onChangeLocal] = useLocalValue(name, onChange);
+  return /* @__PURE__ */ jsx12(
+    Label,
+    {
+      label: label || name,
+      icon: labelIcon || /* @__PURE__ */ jsx12(Type, { size: 16 }),
+      readOnly,
+      children: /* @__PURE__ */ jsx12(
+        "textarea",
+        {
+          id,
+          className: getClassName9("input"),
+          autoComplete: "off",
+          name,
+          value: typeof localValue === "undefined" ? "" : localValue,
+          onChange: (e) => onChangeLocal(e.currentTarget.value),
+          readOnly,
+          tabIndex: readOnly ? -1 : void 0,
+          rows: 5,
+          placeholder: field.type === "textarea" ? field.placeholder : void 0
+        }
+      )
+    }
+  );
+};
+
+// components/AutoField/fields/RichtextField/index.tsx
+import { lazy, Suspense } from "react";
+
+// components/RichTextEditor/components/EditorFallback.tsx
+import { memo } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var EditorFallback = memo((props) => {
+  return /* @__PURE__ */ jsx13(
+    EditorInner,
+    {
+      ...props,
+      editor: null,
+      menu: /* @__PURE__ */ jsx13(
+        LoadedRichTextMenuInner,
+        {
+          field: props.field,
+          editor: null,
+          editorState: null,
+          readOnly: props.readOnly ?? false
+        }
+      ),
+      children: /* @__PURE__ */ jsx13(
+        "div",
+        {
+          className: "rich-text",
+          dangerouslySetInnerHTML: { __html: props.content },
+          contentEditable: true
+        }
+      )
+    }
+  );
+});
+EditorFallback.displayName = "EditorFallback";
+
+// components/AutoField/fields/RichtextField/index.tsx
+import { Fragment as Fragment4, jsx as jsx14 } from "react/jsx-runtime";
+var Editor = lazy(
+  () => import("./Editor-L674TD7T.mjs").then((m) => ({
+    default: m.Editor
+  }))
+);
+var RichtextField = ({
+  onChange,
+  readOnly = false,
+  id,
+  name = id,
+  label,
+  labelIcon,
+  Label,
+  field
+}) => {
+  const content = useDeepField(name);
+  const editorProps = {
+    onChange,
+    content,
+    readOnly,
+    field,
+    id,
+    name
+  };
+  return /* @__PURE__ */ jsx14(Fragment4, { children: /* @__PURE__ */ jsx14(
+    Label,
+    {
+      label: label || name,
+      icon: labelIcon || /* @__PURE__ */ jsx14(Type, { size: 16 }),
+      readOnly,
+      el: "div",
+      children: /* @__PURE__ */ jsx14(Suspense, { fallback: /* @__PURE__ */ jsx14(EditorFallback, { ...editorProps }), children: /* @__PURE__ */ jsx14(Editor, { ...editorProps }) })
+    }
+  ) });
+};
+
+// components/AutoField/AutoFieldInternal.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var ArrayField = lazy2(() => import("./ArrayField-EPM4TV3J.mjs").then((m) => ({ default: m.ArrayField })));
+var ObjectField = lazy2(() => import("./ObjectField-MW3SSNKI.mjs").then((m) => ({ default: m.ObjectField })));
+var getClassNameWrapper = get_class_name_factory_default("InputWrapper", styles_module_default);
+var defaultFields = {
+  array: ArrayField,
+  external: ExternalField,
+  object: ObjectField,
+  select: SelectField,
+  textarea: TextareaField,
+  radio: RadioField,
+  text: DefaultField,
+  number: DefaultField,
+  richtext: RichtextField
+};
+function AutoFieldInternal(props) {
+  const dispatch = useAppStore((s) => s.dispatch);
+  const overrides = useAppStore((s) => s.overrides);
+  const readOnly = useAppStore(useShallow3((s) => s.selectedItem?.readOnly));
+  const nestedFieldContext = useContext4(NestedFieldContext);
+  const { id, Label = FieldLabelInternal } = props;
+  const field = props.field;
+  const label = field.label;
+  const labelIcon = field.labelIcon;
+  const defaultId = useSafeId();
+  const resolvedId = id || defaultId;
+  const render = useMemo4(
+    () => ({
+      ...overrides.fieldTypes,
+      custom: overrides.fieldTypes?.custom,
+      array: overrides.fieldTypes?.array || defaultFields.array,
+      external: overrides.fieldTypes?.external || defaultFields.external,
+      object: overrides.fieldTypes?.object || defaultFields.object,
+      select: overrides.fieldTypes?.select || defaultFields.select,
+      textarea: overrides.fieldTypes?.textarea || defaultFields.textarea,
+      radio: overrides.fieldTypes?.radio || defaultFields.radio,
+      text: overrides.fieldTypes?.text || defaultFields.text,
+      number: overrides.fieldTypes?.number || defaultFields.number,
+      richtext: overrides.fieldTypes?.richtext || defaultFields.richtext
+    }),
+    [overrides]
+  );
+  const fieldValue = useFieldStore((s) => {
+    if (field.type === "custom" || overrides.fieldTypes?.[field.type]) {
+      return getDeep(s, props.name ?? resolvedId);
+    }
+  });
+  const mergedProps = useMemo4(
+    () => ({
+      ...props,
+      field,
+      label,
+      labelIcon,
+      Label,
+      id: resolvedId,
+      value: fieldValue
+    }),
+    [props, field, label, labelIcon, Label, resolvedId, fieldValue]
+  );
+  const onFocus = useCallback3(
+    (e) => {
+      if (mergedProps.name && (e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA")) {
+        e.stopPropagation();
+        dispatch({
+          type: "setUi",
+          ui: {
+            field: { focus: mergedProps.name }
+          }
+        });
+      }
+    },
+    [dispatch, mergedProps.name]
+  );
+  const onBlur = useCallback3((e) => {
+    if ("name" in e.target) {
+      dispatch({
+        type: "setUi",
+        ui: {
+          field: { focus: null }
+        }
+      });
+    }
+  }, [dispatch]);
+  let Children = useMemo4(() => {
+    if (field.type !== "custom" && field.type !== "slot") {
+      return defaultFields[field.type];
+    }
+    return (_props) => null;
+  }, [field.type]);
+  const fieldKey = field.type === "custom" ? field.key : void 0;
+  const fieldRender = field.render;
+  let FieldComponent = useMemo4(() => {
+    if (field.type === "custom" && !render[field.type]) {
+      if (!fieldRender) {
+        return null;
+      }
+      return fieldRender;
+    } else if (field.type !== "slot") {
+      return render[field.type];
+    }
+  }, [field.type, render, fieldRender]);
+  const { visible = true } = props.field;
+  if (!visible) {
+    return null;
+  }
+  if (field.type === "slot") {
+    return null;
+  }
+  if (!FieldComponent) {
+    throw new Error(`Field type for ${field.type} did not exist.`);
+  }
+  return /* @__PURE__ */ jsx15(
+    NestedFieldContext.Provider,
+    {
+      value: {
+        readOnlyFields: nestedFieldContext.readOnlyFields || readOnly || {},
+        localName: nestedFieldContext.localName ?? mergedProps.name
+      },
+      children: /* @__PURE__ */ jsx15(
+        "div",
+        {
+          className: getClassNameWrapper(),
+          onFocus,
+          onBlur,
+          onClick: (e) => {
+            e.stopPropagation();
+          },
+          children: /* @__PURE__ */ jsx15(Suspense2, { fallback: null, children: /* @__PURE__ */ jsx15(FieldComponent, { ...mergedProps, children: /* @__PURE__ */ jsx15(Children, { ...mergedProps }) }) })
+        }
+      )
+    }
+  );
+}
+function AutoFieldPrivate2(props) {
+  return /* @__PURE__ */ jsx15(AutoFieldInternal, { ...props });
+}
+
+// components/AutoField/index.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var getClassName10 = get_class_name_factory_default("Input", styles_module_default);
+var getClassNameWrapper2 = get_class_name_factory_default("InputWrapper", styles_module_default);
+function AutoFieldPublicInternal({ value, ...props }) {
+  const DefaultLabel = useMemo5(() => {
+    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ jsx16(
+      "div",
+      {
+        ...labelProps,
+        className: getClassName10({ readOnly: props.readOnly })
+      }
+    );
+    return DefaultLabel2;
+  }, [props.readOnly]);
+  const fieldStore = useFieldStoreApi();
+  const { id: propsId, onChange: propsOnChange } = props;
+  const onChange = useCallback4(
+    (value2) => {
+      if (!propsId) return;
+      fieldStore.setState({ [propsId]: value2 });
+      propsOnChange(value2);
+    },
+    [fieldStore, propsOnChange, propsId]
+  );
+  useEffect6(() => {
+    if (!props.id) return;
+    fieldStore.setState({ [props.id]: value });
+  }, [props.id, value, fieldStore]);
+  return /* @__PURE__ */ jsx16(
+    AutoFieldInternal,
+    {
+      ...props,
+      onChange,
+      Label: DefaultLabel
+    }
+  );
+}
+function AutoField(props) {
+  const id = useSafeId();
+  if (props.field.type === "slot") {
+    return null;
+  }
+  const providerValue = useMemo5(() => ({ [id]: props.value }), [id, props.value]);
+  return /* @__PURE__ */ jsx16(fieldContextStore.Provider, { value: providerValue, children: /* @__PURE__ */ jsx16(AutoFieldPublicInternal, { ...props, id }) });
+}
+
+export {
+  useSafeId,
+  useContextStore,
+  fieldContextStore,
+  useFieldStoreApi,
+  useFieldStore,
+  FieldLabel,
+  getDeep,
+  useNestedFieldContext,
+  NestedFieldProvider,
+  Heading,
+  Button,
+  EditorFallback,
+  AutoFieldPrivate2 as AutoFieldPrivate,
+  AutoField
+};