@lightsparkdev/ui 1.0.17 → 1.1.1

package/dist/chunk-LFYFZKHG.js

@@ -0,0 +1,701 @@
+import {
+  Table
+} from "./chunk-YYV45HP4.js";
+import {
+  IdFilter,
+  getDefaultIdFilterState,
+  isIdFilterState
+} from "./chunk-B6C5BAVY.js";
+import {
+  StringFilter,
+  getDefaultStringFilterState,
+  isStringFilterState
+} from "./chunk-DMKPWI5V.js";
+import {
+  BooleanFilter,
+  getDefaultBooleanFilterState
+} from "./chunk-M2CSUSFK.js";
+import {
+  CurrencyFilter,
+  getDefaultCurrencyFilterState
+} from "./chunk-GYJS6Q35.js";
+import {
+  DateFilter,
+  getDefaultDateFilterState
+} from "./chunk-IUVT7TDD.js";
+import {
+  EnumFilter,
+  getDefaultEnumFilterState,
+  isEnumFilterState
+} from "./chunk-AEJVUUYW.js";
+import {
+  LabelModerate
+} from "./chunk-QX2R5WFV.js";
+import {
+  Label
+} from "./chunk-6O44WIUE.js";
+import {
+  Modal
+} from "./chunk-VDD5W2ZW.js";
+import {
+  Dropdown
+} from "./chunk-VUXLRZHO.js";
+import {
+  CardPageFullWidth
+} from "./chunk-GSU6TJQP.js";
+import {
+  StyledButtonRow
+} from "./chunk-3N2BVLZJ.js";
+import {
+  Button,
+  StyledButton
+} from "./chunk-2OE2VPDJ.js";
+import {
+  z
+} from "./chunk-55OQPFLF.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
+import {
+  TextIconAligner
+} from "./chunk-N6KLO6D6.js";
+import {
+  standardBorderRadius,
+  standardContentInset
+} from "./chunk-ANZUTQRP.js";
+import {
+  getColor,
+  themeOr,
+  themeOrWithKey
+} from "./chunk-33OPRYWV.js";
+import {
+  bp,
+  useBreakpoints
+} from "./chunk-JSGRNWSB.js";
+import {
+  __async,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-W7FAWX6T.js";
+
+// src/components/DataManagerTable/DataManagerTable.tsx
+import styled from "@emotion/styled";
+import { Fragment, useEffect, useState } from "react";
+import { Fragment as Fragment2, jsx, jsxs } from "@emotion/react/jsx-runtime";
+function getDefaultFilterState(filter) {
+  switch (filter.type) {
+    case "date" /* DATE */:
+      return getDefaultDateFilterState();
+    case "enum" /* ENUM */:
+      return getDefaultEnumFilterState();
+    case "string" /* STRING */:
+      return getDefaultStringFilterState();
+    case "id" /* ID */:
+      return getDefaultIdFilterState(filter.allowedEntities);
+    case "boolean" /* BOOLEAN */:
+      return getDefaultBooleanFilterState();
+    case "currency" /* CURRENCY */:
+      return getDefaultCurrencyFilterState();
+    default:
+      throw new Error("Invalid filter type");
+  }
+}
+function initialFilterState(filters) {
+  let state = {};
+  filters.forEach((filter) => {
+    state = __spreadProps(__spreadValues({}, state), {
+      [filter.accessorKey]: getDefaultFilterState(filter)
+    });
+  });
+  return state;
+}
+function DataManagerTable(props) {
+  var _a, _b, _c, _d;
+  const isCardPageFullWidth = typeof props.cardPageFullWidth === "boolean" ? props.cardPageFullWidth : true;
+  const cardPageMt = typeof props.cardPageMt === "undefined" ? 24 : props.cardPageMt;
+  const breakPoint = useBreakpoints();
+  const [pageSize, setPageSize] = useState(((_a = props.pageSizes) == null ? void 0 : _a[0]) || 20);
+  const [pageCursorState, setPageCursorState] = useState({
+    startResult: void 0,
+    nextPageCursor: props.nextPageCursor,
+    cursorCache: {}
+  });
+  const [isLoading, setIsLoading] = useState(props.loading || false);
+  const [numFiltersApplied, setNumFiltersApplied] = useState(0);
+  const [showFilters, setShowFilters] = useState(false);
+  const [filterStates, setFilterStates] = useState(
+    props.filterOptions ? initialFilterState(props.filterOptions.filters) : {}
+  );
+  const [fetchVariables, setFetchVariables] = useState(
+    ((_b = props.filterOptions) == null ? void 0 : _b.initialQueryVariables) || {}
+  );
+  const isSm = breakPoint.isSm();
+  useEffect(() => {
+    setIsLoading(Boolean(props.loading));
+  }, [props.loading]);
+  useEffect(() => {
+    if (!props.nextPageCursor) {
+      return;
+    }
+    const cursorCacheResult = Object.entries(
+      pageCursorState.cursorCache[pageSize] || {}
+    ).find(([_, cursor]) => cursor === props.nextPageCursor);
+    if (cursorCacheResult) {
+      setPageCursorState((prevState) => __spreadProps(__spreadValues({}, prevState), {
+        startResult: parseInt(cursorCacheResult[0]),
+        nextPageCursor: cursorCacheResult[1]
+      }));
+    } else {
+      setPageCursorState((prevState) => {
+        if (prevState.nextPageCursor === props.nextPageCursor) return prevState;
+        const startResult = prevState.startResult === void 0 ? 1 : prevState.startResult + pageSize;
+        return __spreadProps(__spreadValues({}, prevState), {
+          startResult,
+          nextPageCursor: props.nextPageCursor,
+          cursorCache: __spreadProps(__spreadValues({}, prevState.cursorCache), {
+            [pageSize]: __spreadProps(__spreadValues({}, prevState.cursorCache[pageSize]), {
+              [startResult]: props.nextPageCursor
+            })
+          })
+        });
+      });
+    }
+  }, [props.nextPageCursor, pageSize, pageCursorState.cursorCache]);
+  function updateFilterState(filter) {
+    return (state) => {
+      setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
+        [filter.accessorKey]: state
+      }));
+    };
+  }
+  const handleApplyFilters = (filterStates2, filterOptions, pageSize2) => __async(this, null, function* () {
+    var _a2, _b2, _c2, _d2;
+    const { filters: filters2, refetch, getFilterQueryVariables } = filterOptions;
+    const appliedFilterStates = __spreadValues({}, filterStates2);
+    const filterStatesArray = Object.values(appliedFilterStates);
+    let isValid = true;
+    for (let i = 0; i < filterStatesArray.length; i++) {
+      const filterState = filterStatesArray[i];
+      if (filterState.isApplied && filterState.onValidate) {
+        const filter = filters2[i];
+        const validResult = filterState.onValidate(
+          filterState,
+          filter.isMulti
+        );
+        if (validResult) {
+          appliedFilterStates[filter.accessorKey] = validResult;
+          if (isIdFilterState(filterState)) {
+            const appliedValues = validResult.appliedValues;
+            const isApplied = !!(appliedValues == null ? void 0 : appliedValues.length);
+            updateFilterState(filter)(__spreadProps(__spreadValues({}, filterStates2[filter.accessorKey]), {
+              value: "",
+              appliedValues: appliedValues ? [...appliedValues] : [],
+              isApplied
+            }));
+            filterState.isApplied = isApplied;
+          }
+        } else {
+          filterState.errorMessage = filter.errorMessage || "Error validating input";
+          isValid = false;
+        }
+      }
+    }
+    if (!isValid) {
+      setFilterStates((prevState) => __spreadValues({}, prevState));
+      return;
+    }
+    for (let i = 0; i < filterStatesArray.length; i++) {
+      const filterState = filterStatesArray[i];
+      if (!filterState.isApplied) continue;
+      const filter = filters2[i];
+      if (isStringFilterState(filterState)) {
+        if (filterState.value) {
+          const value = filterState.value;
+          let updatedAppliedValues = [];
+          if (filter.isMulti) {
+            updatedAppliedValues = ((_a2 = filterState.appliedValues) == null ? void 0 : _a2.filter(
+              (appliedValue) => appliedValue !== value
+            )) || [];
+          }
+          updatedAppliedValues.push(value);
+          const newFilterState = __spreadProps(__spreadValues({}, filterStates2[filter.accessorKey]), {
+            value: "",
+            appliedValues: updatedAppliedValues,
+            isApplied: !!updatedAppliedValues.length
+          });
+          appliedFilterStates[filter.accessorKey] = newFilterState;
+          updateFilterState(filter)(newFilterState);
+        } else if (((_b2 = filterState.appliedValues) == null ? void 0 : _b2.length) === 0) {
+          updateFilterState(filter)(getDefaultStringFilterState());
+          filterState.isApplied = false;
+        }
+      } else if (isEnumFilterState(filterState)) {
+        if (filterState.value) {
+          const newFilterState = __spreadProps(__spreadValues({}, filterStates2[filter.accessorKey]), {
+            value: "",
+            appliedValues: filterState.appliedValues,
+            isApplied: !!((_c2 = filterState.appliedValues) == null ? void 0 : _c2.length)
+          });
+          appliedFilterStates[filter.accessorKey] = newFilterState;
+          updateFilterState(filter)(newFilterState);
+        } else if (((_d2 = filterState.appliedValues) == null ? void 0 : _d2.length) === 0) {
+          updateFilterState(filter)(getDefaultEnumFilterState());
+          filterState.isApplied = false;
+        }
+      }
+    }
+    const numFiltersApplied2 = filterStatesArray.reduce((acc, state) => {
+      return state.isApplied ? acc + 1 : acc;
+    }, 0);
+    setNumFiltersApplied(numFiltersApplied2);
+    setShowFilters(false);
+    setIsLoading(true);
+    const newFetchVariables = getFilterQueryVariables(
+      filters2,
+      appliedFilterStates,
+      pageSize2
+    );
+    setFetchVariables(newFetchVariables);
+    setPageCursorState((prevState) => __spreadProps(__spreadValues({}, prevState), {
+      startResult: void 0
+    }));
+    try {
+      yield refetch(newFetchVariables);
+    } catch (e) {
+      setIsLoading(false);
+      throw e;
+    }
+    setIsLoading(false);
+  });
+  const handleClearFilters = () => {
+    if (props.filterOptions) {
+      const { filters: filters2 } = props.filterOptions;
+      const newFilterStates = initialFilterState(filters2);
+      setFilterStates(newFilterStates);
+      void handleApplyFilters(newFilterStates, props.filterOptions, pageSize);
+    }
+  };
+  const handleNext = () => __async(this, null, function* () {
+    if (!props.filterOptions) {
+      return;
+    }
+    const { refetch } = props.filterOptions;
+    setIsLoading(true);
+    const newFetchVariables = __spreadProps(__spreadValues({}, fetchVariables), {
+      after: pageCursorState === void 0 ? void 0 : pageCursorState.nextPageCursor
+    });
+    setFetchVariables(newFetchVariables);
+    try {
+      yield refetch(newFetchVariables);
+    } catch (e) {
+      setIsLoading(false);
+      throw e;
+    }
+    setIsLoading(false);
+  });
+  const handlePrev = () => __async(this, null, function* () {
+    if (!props.filterOptions) {
+      return;
+    }
+    const { refetch } = props.filterOptions;
+    setIsLoading(true);
+    const newFetchVariables = __spreadProps(__spreadValues({}, fetchVariables), {
+      after: pageCursorState.startResult ? pageCursorState.cursorCache[pageSize][pageCursorState.startResult - pageSize - pageSize] : void 0
+    });
+    setFetchVariables(newFetchVariables);
+    try {
+      yield refetch(newFetchVariables);
+    } catch (e) {
+      setIsLoading(false);
+      throw e;
+    }
+    setIsLoading(false);
+  });
+  const handleChangePageSize = (size) => __async(this, null, function* () {
+    setPageSize(size);
+    if (props.showMoreOptions) {
+      const { refetch, initialQueryVariables } = props.showMoreOptions;
+      setIsLoading(true);
+      let pageSizeQueryVariables;
+      if (props.showMoreOptions.pageSizeVariables) {
+        pageSizeQueryVariables = {};
+        for (const variable of props.showMoreOptions.pageSizeVariables) {
+          pageSizeQueryVariables[variable] = size;
+        }
+      } else {
+        pageSizeQueryVariables = { first: size };
+      }
+      const newFetchVariables = __spreadValues(__spreadValues({}, initialQueryVariables), pageSizeQueryVariables);
+      setFetchVariables(newFetchVariables);
+      try {
+        yield refetch(newFetchVariables);
+      } catch (e) {
+        setIsLoading(false);
+        throw e;
+      }
+      setIsLoading(false);
+    } else if (props.filterOptions) {
+      void handleApplyFilters(filterStates, props.filterOptions, size);
+    }
+  });
+  const filterSections = props.filterOptions ? props.filterOptions.filters.map((filter) => {
+    switch (filter.type) {
+      case "date" /* DATE */:
+        return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          DateFilter,
+          {
+            updateFilterState: (state) => {
+              setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
+                [filter.accessorKey]: state
+              }));
+            },
+            state: filterStates[filter.accessorKey]
+          }
+        ) }, filter.label);
+      case "enum" /* ENUM */:
+        return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          EnumFilter,
+          {
+            updateFilterState: (state) => {
+              setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
+                [filter.accessorKey]: state
+              }));
+            },
+            options: filter.enumValues,
+            label: filter.label,
+            placeholder: filter.placeholder,
+            state: filterStates[filter.accessorKey],
+            isMulti: filter.isMulti
+          }
+        ) }, filter.label);
+      case "string" /* STRING */:
+        return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          StringFilter,
+          {
+            updateFilterState: (state) => {
+              setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
+                [filter.accessorKey]: state
+              }));
+            },
+            label: filter.label,
+            placeholder: filter.placeholder,
+            state: filterStates[filter.accessorKey]
+          }
+        ) }, filter.label);
+      case "id" /* ID */:
+        return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          IdFilter,
+          {
+            updateFilterState: (state) => {
+              setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
+                [filter.accessorKey]: state
+              }));
+            },
+            label: filter.label,
+            placeholder: filter.placeholder,
+            state: filterStates[filter.accessorKey]
+          }
+        ) }, filter.label);
+      case "boolean" /* BOOLEAN */:
+        return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          BooleanFilter,
+          {
+            updateFilterState: (state) => {
+              setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
+                [filter.accessorKey]: state
+              }));
+            },
+            label: filter.label,
+            state: filterStates[filter.accessorKey]
+          }
+        ) }, filter.label);
+      case "currency" /* CURRENCY */:
+        return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          CurrencyFilter,
+          {
+            updateFilterState: (state) => {
+              setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
+                [filter.accessorKey]: state
+              }));
+            },
+            label: filter.label,
+            state: filterStates[filter.accessorKey]
+          }
+        ) }, filter.label);
+      default:
+        return null;
+    }
+  }) : [];
+  let filters;
+  const isFilterButtonSmall = isSm && props.header;
+  function onApply() {
+    void handleApplyFilters(filterStates, props.filterOptions, pageSize);
+  }
+  const filterContent = /* @__PURE__ */ jsxs(
+    FilterContentInner,
+    {
+      onKeyDownCapture: (e) => {
+        if (e.key === "Enter") {
+          onApply();
+        }
+      },
+      isSm,
+      children: [
+        filterSections,
+        /* @__PURE__ */ jsxs(FilterContentFooter, { children: [
+          /* @__PURE__ */ jsx(Button, { text: "Clear", onClick: handleClearFilters }),
+          /* @__PURE__ */ jsxs(FilterContentFooterRight, { children: [
+            /* @__PURE__ */ jsx(Button, { text: "Cancel", onClick: () => setShowFilters(false) }),
+            /* @__PURE__ */ jsx(Button, { text: "Apply", kind: "primary", onClick: onApply })
+          ] })
+        ] })
+      ]
+    }
+  );
+  const commonButtonProps = {
+    kind: isFilterButtonSmall ? "roundIcon" : "secondary",
+    size: "ExtraSmall",
+    typography: { color: "c6Neutral" },
+    icon: {
+      name: "Sort"
+    },
+    text: !isFilterButtonSmall ? `Filter${numFiltersApplied > 0 ? ` | ${numFiltersApplied}` : ""}` : void 0
+  };
+  if (props.filterOptions) {
+    filters = /* @__PURE__ */ jsx(Fragment2, { children: /* @__PURE__ */ jsx(DataManagerTableFilterContainer, { children: isSm ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        __spreadProps(__spreadValues({}, commonButtonProps), {
+          onClick: () => setShowFilters(!showFilters)
+        })
+      ),
+      /* @__PURE__ */ jsx(
+        Modal,
+        {
+          visible: showFilters,
+          onClose: () => setShowFilters(false),
+          smKind: "fullscreen",
+          children: filterContent
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(
+      Dropdown,
+      {
+        borderRadius: 12,
+        maxDropdownItemsWidth: 400,
+        dropdownContent: /* @__PURE__ */ jsx(FilterDropdownContent, { children: filterContent }),
+        isOpen: showFilters,
+        onOpen: () => {
+          setShowFilters(true);
+        },
+        onClose: () => {
+          setShowFilters(false);
+        },
+        button: commonButtonProps,
+        align: "right"
+      }
+    ) }) });
+  }
+  let showMoreDropdown;
+  if (((_c = props.pageSizes) == null ? void 0 : _c.length) > 1) {
+    showMoreDropdown = /* @__PURE__ */ jsx(
+      Dropdown,
+      {
+        getCSS: ({ isOpen }) => ({
+          height: "fit-content",
+          alignSelf: "center"
+        }),
+        button: {
+          getCSS: ({ isOpen }) => ({
+            display: "flex",
+            alignItems: "center",
+            height: "100%",
+            width: "100%"
+          }),
+          getContent: ({ isOpen }) => /* @__PURE__ */ jsx(
+            TextIconAligner,
+            {
+              content: `Show ${pageSize} items`,
+              typography: { size: "ExtraSmall" },
+              rightIcon: {
+                name: "Chevron",
+                ml: 4,
+                width: 14,
+                color: isOpen ? "onPrimaryText" : "mcNeutral"
+              }
+            }
+          )
+        },
+        dropdownItems: props.pageSizes.map((size) => ({
+          label: `${size}`,
+          onClick: () => {
+            void handleChangePageSize(size);
+          }
+        }))
+      }
+    );
+  }
+  let footer;
+  if (props.showMoreOptions) {
+    footer = /* @__PURE__ */ jsxs(DataManagerTableFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          text: "Show more",
+          paddingY: "short",
+          onClick: () => {
+            var _a2;
+            return void handleChangePageSize(pageSize + (((_a2 = props.pageSizes) == null ? void 0 : _a2[0]) || 20));
+          }
+        }
+      ),
+      showMoreDropdown
+    ] });
+  } else if (props.resultCount) {
+    const startResult = pageCursorState.startResult || 1;
+    const endResult = Math.min(props.resultCount, startResult + pageSize - 1);
+    const isFullCount = (_d = props.isFullCount) != null ? _d : true;
+    const countString = isFullCount ? props.resultCount : props.resultCount + "+";
+    const resultsString = /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Label, { children: "Viewing " }),
+      /* @__PURE__ */ jsx(LabelModerate, { children: `${startResult}-${endResult}` }),
+      /* @__PURE__ */ jsx(Label, { children: " of " }),
+      /* @__PURE__ */ jsx(LabelModerate, { children: `${countString}` }),
+      /* @__PURE__ */ jsx(Label, { children: " results" })
+    ] });
+    const hasNext = props.resultCount ? startResult + pageSize - 1 < props.resultCount : false;
+    const hasPrev = startResult > 1;
+    footer = /* @__PURE__ */ jsxs(DataManagerTableFooter, { children: [
+      resultsString,
+      /* @__PURE__ */ jsxs(PaginationContainer, { children: [
+        showMoreDropdown,
+        /* @__PURE__ */ jsxs(PaginationButtonsContainer, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              text: "Previous",
+              paddingY: "short",
+              onClick: () => {
+                void handlePrev();
+              },
+              disabled: !hasPrev
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              text: "Next",
+              paddingY: "short",
+              onClick: () => {
+                void handleNext();
+              },
+              disabled: !hasNext
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+  const content = /* @__PURE__ */ jsxs(Fragment2, { children: [
+    props.showHeader && /* @__PURE__ */ jsxs(DataManagerTableHeader, { children: [
+      props.header,
+      filters
+    ] }),
+    /* @__PURE__ */ jsx(Table, __spreadProps(__spreadValues({}, props), { loading: isLoading })),
+    footer
+  ] });
+  return /* @__PURE__ */ jsx(StyledDataManagerTable, { children: isCardPageFullWidth ? /* @__PURE__ */ jsx(CardPageFullWidth, { css: { marginTop: `${cardPageMt}px` }, children: content }) : content });
+}
+var StyledDataManagerTable = styled.div``;
+var commonPadding = `
+  ${bp.lg(`
+  padding-left: ${standardContentInset.lgPx}px;
+  padding-right: ${standardContentInset.lgPx}px;
+  `)}
+  ${bp.sm(`
+  padding-left: ${standardContentInset.smPx}px;
+  padding-right: ${standardContentInset.smPx}px;
+  `)}
+  ${bp.minSmMaxLg(`
+  padding-left: ${standardContentInset.minSmMaxLgPx}px;
+  padding-right: ${standardContentInset.minSmMaxLgPx}px;
+  `)}
+`;
+var DataManagerTableHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: ${Spacing.px.xs} 0;
+  position: relative;
+`;
+var DataManagerTableFooter = styled.div`
+  border-top: 1px solid ${({ theme }) => theme.c1Neutral};
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  ${commonPadding}
+  padding-top: ${Spacing.px.md};
+  padding-bottom: ${Spacing.px.md};
+
+  ${StyledButton} {
+    align-self: end;
+  }
+`;
+var PaginationContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+var PaginationButtonsContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-left: ${Spacing.px.md};
+  gap: ${Spacing.px.xs};
+`;
+var DataManagerTableFilterContainer = styled.div`
+  position: absolute;
+  z-index: 3;
+  right: 0;
+  ${StyledButtonRow} + & {
+    background: linear-gradient(
+      to right,
+      ${({ theme }) => themeOr("rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0)")({ theme })}
+        0%,
+      ${({ theme }) => getColor(theme, "bg")} 15%
+    );
+  }
+  ${commonPadding}
+`;
+var FilterDropdownContent = styled.div`
+  width: 400px;
+  background: ${({ theme }) => theme.bg};
+  border: 0.5px solid
+    ${({ theme }) => themeOrWithKey("c1Neutral", "c4Neutral")({ theme })};
+  ${standardBorderRadius(12)}
+  box-shadow:
+    0px 1px 4px 0px rgba(0, 0, 0, 0.1),
+    0px 4px 8px 0px rgba(0, 0, 0, 0.08);
+`;
+var FilterContentInner = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${Spacing.px.xl};
+  padding: ${({ isSm }) => isSm ? "0px" : Spacing.px.lg};
+  z-index: ${z.dropdown + 1};
+  position: relative;
+`;
+var FilterContentFooter = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+var FilterContentFooterRight = styled.div`
+  display: flex;
+  gap: ${Spacing.px.xs};
+`;
+
+export {
+  DataManagerTable
+};