@lightsparkdev/ui 1.0.14 → 1.0.16

package/dist/{chunk-M5VGKEOK.js → chunk-IE3QUJRS.js}

@@ -1,47 +1,50 @@
 import {
   ToggleContainer
-} from "./chunk-RW5RZAVN.js";
+} from "./chunk-TEEHZW6B.js";
 import {
   InputSubtext,
   defaultTextInputTypography,
   inputSpacingPx,
   textInputPlaceholderColor,
   textInputStyle
-} from "./chunk-GEE2G7BL.js";
+} from "./chunk-LYQQBGMY.js";
 import {
-  UnstyledButton
-} from "./chunk-I5WDNJY3.js";
+  CheckboxContainer
+} from "./chunk-QZYBEB5B.js";
+import {
+  Loading
+} from "./chunk-BLWXB3VF.js";
 import {
   Tooltip
-} from "./chunk-XADWD755.js";
+} from "./chunk-R4QDF6BC.js";
+import {
+  UnstyledButton
+} from "./chunk-WS4ZV4J2.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
-import {
-  CheckboxContainer
-} from "./chunk-SPIRL6S7.js";
 import {
   Icon,
   IconContainer
-} from "./chunk-RMZQSXO2.js";
+} from "./chunk-HOGSXW62.js";
 import {
   standardBorderRadius
-} from "./chunk-RNCUEVKR.js";
+} from "./chunk-WXQAFT6L.js";
 import {
   applyTypography
-} from "./chunk-XBZNPA3L.js";
+} from "./chunk-JQLRGNLP.js";
 import {
   getFontColor
-} from "./chunk-QNPCRFUV.js";
+} from "./chunk-WFSTDMMY.js";
 import {
   __spreadProps,
   __spreadValues
-} from "./chunk-CWMXXUWU.js";
+} from "./chunk-W7FAWX6T.js";
 
 // src/components/TextInput.tsx
 import styled from "@emotion/styled";
 import React, { useState } from "react";
-import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 var selectLeftOffset = 10;
 var iconSides = ["left", "right"];
 var iconOffsets = ["small", "large"];
@@ -69,34 +72,38 @@ function TextInput(textInputProps) {
     }
   };
   const hasError = Boolean(props.error);
-  const isIconRight = Boolean(props.icon && props.icon.side !== "left");
+  const iconSide = props.icon ? props.icon.side || "right" : void 0;
+  const hasIconLeft = Boolean(props.icon && iconSide === "left");
+  const hasIconRight = Boolean(props.icon && iconSide === "right") || props.loading;
   const iconWidth = ((_a = props.icon) == null ? void 0 : _a.width) || 12;
   const iconCenterOffset = ((_b = props.icon) == null ? void 0 : _b.offset) === "large" ? 26 : 18;
-  const iconOffset = iconCenterOffset - iconWidth / 2;
   const iconTextOffset = iconCenterOffset === 18 ? 4 : 14;
-  const textInputWidth = props.width === "short" ? "250px" : "100%";
+  const leftIconOffset = iconCenterOffset - iconWidth / 2;
   let paddingLeftPx;
   if (typeof props.paddingX === "number") {
-    if (isIconRight) {
-      paddingLeftPx = props.paddingX;
-    } else {
+    if (hasIconLeft) {
       paddingLeftPx = props.paddingX + iconWidth + iconTextOffset;
+    } else {
+      paddingLeftPx = props.paddingX;
     }
-  } else if (props.icon && !isIconRight) {
-    paddingLeftPx = iconOffset + iconWidth + iconTextOffset;
+  } else if (hasIconLeft) {
+    paddingLeftPx = leftIconOffset + iconWidth + iconTextOffset;
   } else if (props.select) {
     paddingLeftPx = selectLeftOffset + props.select.width + 5;
   }
+  const rightIconWidth = props.loading ? 20 : iconWidth;
+  const rightIconOffset = iconCenterOffset - rightIconWidth / 2;
   let paddingRightPx;
   if (typeof props.paddingX === "number") {
-    if (isIconRight) {
-      paddingRightPx = iconTextOffset + iconWidth + props.paddingX;
+    if (hasIconRight) {
+      paddingRightPx = iconTextOffset + rightIconWidth + props.paddingX;
     } else {
       paddingRightPx = props.paddingX;
     }
-  } else if (isIconRight) {
-    paddingRightPx = 28;
+  } else if (hasIconRight) {
+    paddingRightPx = rightIconOffset + rightIconWidth + iconTextOffset;
   }
+  const textInputWidth = props.width === "short" ? "250px" : "100%";
   let input = /* @__PURE__ */ jsxs(InputContainer, { children: [
     /* @__PURE__ */ jsx(
       Input,
@@ -105,20 +112,20 @@ function TextInput(textInputProps) {
         maxLength: props.maxLength,
         inputMode: props.inputMode,
         pattern: props.pattern,
-        onBlur: () => {
+        onBlur: (blurEvent) => {
           setFocused(false);
           if (props.onBlur) {
-            props.onBlur();
+            props.onBlur(blurEvent);
           }
         },
         onChange: (e) => {
           e.target.setCustomValidity("");
           props.onChange(e.target.value, e);
         },
-        onFocus: () => {
+        onFocus: (focusEvent) => {
           setFocused(true);
           if (props.onFocus) {
-            props.onFocus();
+            props.onFocus(focusEvent);
           }
         },
         onKeyDown: (e) => {
@@ -127,6 +134,7 @@ function TextInput(textInputProps) {
           }
           handleKeyDown(e);
         },
+        onKeyUp: props.onKeyUp,
         id: props.id,
         onPaste: props.onPaste,
         placeholder: props.placeholder,
@@ -150,33 +158,47 @@ function TextInput(textInputProps) {
             props.onBeforeInput(event);
           }
         },
-        borderRadius: props.borderRadius
+        borderRadius: props.borderRadius,
+        enterKeyHint: props.enterKeyHint,
+        autoFocus: props.autoFocus
       }
     ),
-    props.rightButtonText && /* @__PURE__ */ jsx(RightButtonAligner, { iconOffset, children: /* @__PURE__ */ jsx(RightButton, { onClick: props.onRightButtonClick, children: props.rightButtonText }) })
+    props.rightButtonText && /* @__PURE__ */ jsx(RightButtonAligner, { paddingX: rightIconOffset, children: /* @__PURE__ */ jsx(RightButton, { onClick: props.onRightButtonClick, children: props.rightButtonText }) })
   ] });
-  if (props.icon) {
+  if (hasIconLeft || hasIconRight) {
     input = /* @__PURE__ */ jsxs(WithIcon, { hasError, withFocus: focused, children: [
-      isIconRight ? /* @__PURE__ */ jsx(Fragment, { children: input }) : null,
-      /* @__PURE__ */ jsx(
+      props.icon && iconSide === "left" && /* @__PURE__ */ jsx(
         TextInputIconContainer,
         {
           onClick: props.onClickIcon ? props.onClickIcon : () => {
           },
-          isIconRight,
-          iconOffset: typeof props.paddingX === "number" ? props.paddingX : iconOffset,
+          isIconRight: false,
           focused,
           hasValue: Boolean(props.value),
           colorProp: props.typography.color,
+          iconOffset: typeof props.paddingX === "number" ? props.paddingX : leftIconOffset,
           children: /* @__PURE__ */ jsx(Icon, { name: props.icon.name, width: iconWidth })
         }
       ),
-      isIconRight ? null : /* @__PURE__ */ jsx(Fragment, { children: input })
+      input,
+      hasIconRight && /* @__PURE__ */ jsx(
+        TextInputIconContainer,
+        {
+          onClick: props.onClickIcon ? props.onClickIcon : () => {
+          },
+          isIconRight: true,
+          focused,
+          hasValue: Boolean(props.value),
+          colorProp: props.typography.color,
+          iconOffset: typeof props.paddingX === "number" ? props.paddingX : rightIconOffset,
+          children: props.loading ? /* @__PURE__ */ jsx(Loading, { center: false, size: rightIconWidth }) : props.icon && iconSide === "right" ? /* @__PURE__ */ jsx(Icon, { name: props.icon.name, width: rightIconWidth }) : null
+        }
+      )
     ] });
   }
   const hintTooltipId = props.hintTooltip ? `${props.id || "input"}-hint-tooltip` : void 0;
   const { select } = props;
-  return /* @__PURE__ */ jsxs(StyledTextInput, { width: textInputWidth, children: [
+  return /* @__PURE__ */ jsxs(StyledTextInput, { widthProp: textInputWidth, children: [
     props.label ? /* @__PURE__ */ jsx(TextInputLabel, { hasError, children: props.label }) : null,
     select && /* @__PURE__ */ jsx(
       TextInputSelect,
@@ -253,7 +275,7 @@ var Input = styled.input`
 var RightButtonAligner = styled.div`
   position: absolute;
   top: 0;
-  right: ${({ iconOffset }) => iconOffset}px;
+  right: ${({ paddingX }) => paddingX}px;
   z-index: ${z.textInput + 1};
   bottom: 0;
   display: flex;
@@ -290,7 +312,7 @@ var TextInputHalfRow = styled.div`
   }
 `;
 var StyledTextInput = styled.div`
-  width: ${({ width }) => width};
+  width: ${({ widthProp }) => widthProp};
   position: relative;
 
   /* eg forms, should be left consistent: */

package/dist/chunk-INQDLTDH.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/ArrowLeftCircleCutout.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function ArrowLeftCircleCutout() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 31 30",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M0.500978 14.9998C0.500978 23.284 7.21678 29.9998 15.501 29.9998C23.7853 29.9998 30.501 23.284 30.501 14.9998C30.501 6.71556 23.7853 -0.000242233 15.501 -0.000242233C7.21678 -0.000242233 0.500978 6.71556 0.500978 14.9998ZM9.50098 19.8748C9.50098 20.4961 10.0047 20.9998 10.626 20.9998H18.876C19.4973 20.9998 20.001 20.4961 20.001 19.8748C20.001 19.2534 19.4973 18.7498 18.876 18.7498H13.342L21.1715 10.9202C21.6108 10.4809 21.6108 9.76866 21.1715 9.32931C20.7321 8.88996 20.0198 8.88996 19.5805 9.32931L11.751 17.1587V11.6248C11.751 11.0035 11.2473 10.4998 10.626 10.4998C10.0047 10.4998 9.50098 11.0035 9.50098 11.6248V19.8748Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.ArrowLeftCircleCutout = ArrowLeftCircleCutout;

package/dist/chunk-IO33D4VH.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/hooks/useNumberInput/utils/isNumber.ts
+var isNumber = (input) => RegExp(/\d/, "gi").test(input);
+
+
+
+exports.isNumber = isNumber;

package/dist/{chunk-MCYBXKDJ.js → chunk-IQUCHLUU.js}

@@ -1,65 +1,70 @@
 import {
   Table
-} from "./chunk-HKAAMXTA.js";
+} from "./chunk-M6OUTCTI.js";
+import {
+  EnumFilter,
+  getDefaultEnumFilterState,
+  isEnumFilterState
+} from "./chunk-MPNURDMH.js";
+import {
+  IdFilter,
+  getDefaultIdFilterState,
+  isIdFilterState
+} from "./chunk-F6DMF6LQ.js";
+import {
+  Popover
+} from "./chunk-YPR6F7JT.js";
 import {
   StringFilter,
   getDefaultStringFilterState,
   isStringFilterState
-} from "./chunk-QVX254S6.js";
+} from "./chunk-SGYY2X64.js";
 import {
   BooleanFilter,
   getDefaultBooleanFilterState
-} from "./chunk-WFPQQOTV.js";
+} from "./chunk-3BF6DG2M.js";
+import {
+  CurrencyFilter,
+  getDefaultCurrencyFilterState
+} from "./chunk-MSEQOE4B.js";
 import {
   DateFilter,
   getDefaultDateFilterState
-} from "./chunk-JBPJ6G5P.js";
-import {
-  EnumFilter,
-  getDefaultEnumFilterState,
-  isEnumFilterState
-} from "./chunk-JO4B7Q7Y.js";
-import {
-  IdFilter,
-  getDefaultIdFilterState,
-  isIdFilterState
-} from "./chunk-EKQXUHI7.js";
+} from "./chunk-343EWVLK.js";
 import {
   LabelModerate
-} from "./chunk-BOJGILTQ.js";
-import {
-  Popover
-} from "./chunk-24OTDVHF.js";
+} from "./chunk-3DA7JJ2P.js";
 import {
   Label
-} from "./chunk-RRXS447G.js";
+} from "./chunk-6HXRUUSC.js";
 import {
   Dropdown
-} from "./chunk-VOCZMBTP.js";
+} from "./chunk-LOVSCPI2.js";
+import {
+  CardPageFullWidth
+} from "./chunk-AIV5AY7X.js";
 import {
   Spacing
 } from "./chunk-E5DUKMCU.js";
 import {
   TextIconAligner
-} from "./chunk-DIXTNCMZ.js";
-import {
-  CardPageFullWidth
-} from "./chunk-D3DMCJUI.js";
+} from "./chunk-MYVY5ZAP.js";
 import {
   Button,
   StyledButton
-} from "./chunk-4EXNT44R.js";
+} from "./chunk-ZR5RJNK6.js";
 import {
   standardContentInset
-} from "./chunk-RNCUEVKR.js";
+} from "./chunk-WXQAFT6L.js";
 import {
-  bp
+  bp,
+  useBreakpoints
 } from "./chunk-JSGRNWSB.js";
 import {
   __async,
   __spreadProps,
   __spreadValues
-} from "./chunk-CWMXXUWU.js";
+} from "./chunk-W7FAWX6T.js";
 
 // src/components/DataManagerTable/DataManagerTable.tsx
 import styled from "@emotion/styled";
@@ -77,6 +82,8 @@ function getDefaultFilterState(filter) {
       return getDefaultIdFilterState(filter.allowedEntities);
     case "boolean" /* BOOLEAN */:
       return getDefaultBooleanFilterState();
+    case "currency" /* CURRENCY */:
+      return getDefaultCurrencyFilterState();
     default:
       throw new Error("Invalid filter type");
   }
@@ -85,13 +92,14 @@ function initialFilterState(filters) {
   let state = {};
   filters.forEach((filter) => {
     state = __spreadProps(__spreadValues({}, state), {
-      [filter.accessor]: getDefaultFilterState(filter)
+      [filter.accessorKey]: getDefaultFilterState(filter)
     });
   });
   return state;
 }
 function DataManagerTable(props) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
+  const breakPoint = useBreakpoints();
   const [pageSize, setPageSize] = useState(((_a = props.pageSizes) == null ? void 0 : _a[0]) || 20);
   const [pageCursorState, setPageCursorState] = useState({
     startResult: void 0,
@@ -107,6 +115,7 @@ function DataManagerTable(props) {
   const [fetchVariables, setFetchVariables] = useState(
     ((_b = props.filterOptions) == null ? void 0 : _b.initialQueryVariables) || {}
   );
+  const isSm = breakPoint.isSm();
   useEffect(() => {
     setIsLoading(Boolean(props.loading));
   }, [props.loading]);
@@ -141,12 +150,12 @@ function DataManagerTable(props) {
   function updateFilterState(filter) {
     return (state) => {
       setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
-        [filter.accessor]: state
+        [filter.accessorKey]: state
       }));
     };
   }
   const handleApplyFilters = (filterStates2, filterOptions, pageSize2) => __async(this, null, function* () {
-    var _a2, _b2, _c2, _d;
+    var _a2, _b2, _c2, _d2;
     const { filters: filters2, refetch, getFilterQueryVariables } = filterOptions;
     const appliedFilterStates = __spreadValues({}, filterStates2);
     const filterStatesArray = Object.values(appliedFilterStates);
@@ -160,11 +169,11 @@ function DataManagerTable(props) {
           filter.isMulti
         );
         if (validResult) {
-          appliedFilterStates[filter.accessor] = 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.accessor]), {
+            updateFilterState(filter)(__spreadProps(__spreadValues({}, filterStates2[filter.accessorKey]), {
               value: "",
               appliedValues: appliedValues ? [...appliedValues] : [],
               isApplied
@@ -195,12 +204,12 @@ function DataManagerTable(props) {
             )) || [];
           }
           updatedAppliedValues.push(value);
-          const newFilterState = __spreadProps(__spreadValues({}, filterStates2[filter.accessor]), {
+          const newFilterState = __spreadProps(__spreadValues({}, filterStates2[filter.accessorKey]), {
             value: "",
             appliedValues: updatedAppliedValues,
             isApplied: !!updatedAppliedValues.length
           });
-          appliedFilterStates[filter.accessor] = newFilterState;
+          appliedFilterStates[filter.accessorKey] = newFilterState;
           updateFilterState(filter)(newFilterState);
         } else if (((_b2 = filterState.appliedValues) == null ? void 0 : _b2.length) === 0) {
           updateFilterState(filter)(getDefaultStringFilterState());
@@ -208,15 +217,15 @@ function DataManagerTable(props) {
         }
       } else if (isEnumFilterState(filterState)) {
         if (filterState.value) {
-          const newFilterState = __spreadProps(__spreadValues({}, filterStates2[filter.accessor]), {
+          const newFilterState = __spreadProps(__spreadValues({}, filterStates2[filter.accessorKey]), {
             value: "",
             appliedValues: filterState.appliedValues,
             isApplied: !!((_c2 = filterState.appliedValues) == null ? void 0 : _c2.length)
           });
-          appliedFilterStates[filter.accessor] = newFilterState;
+          appliedFilterStates[filter.accessorKey] = newFilterState;
           updateFilterState(filter)(newFilterState);
-        } else if (((_d = filterState.appliedValues) == null ? void 0 : _d.length) === 0) {
-          updateFilterState(filter)(getDefaultStringFilterState());
+        } else if (((_d2 = filterState.appliedValues) == null ? void 0 : _d2.length) === 0) {
+          updateFilterState(filter)(getDefaultEnumFilterState());
           filterState.isApplied = false;
         }
       }
@@ -323,10 +332,10 @@ function DataManagerTable(props) {
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
-                [filter.accessor]: state
+                [filter.accessorKey]: state
               }));
             },
-            state: filterStates[filter.accessor]
+            state: filterStates[filter.accessorKey]
           }
         ) }, filter.label);
       case "enum" /* ENUM */:
@@ -335,13 +344,13 @@ function DataManagerTable(props) {
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
-                [filter.accessor]: state
+                [filter.accessorKey]: state
               }));
             },
             options: filter.enumValues,
             label: filter.label,
             placeholder: filter.placeholder,
-            state: filterStates[filter.accessor],
+            state: filterStates[filter.accessorKey],
             isMulti: filter.isMulti
           }
         ) }, filter.label);
@@ -351,12 +360,12 @@ function DataManagerTable(props) {
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
-                [filter.accessor]: state
+                [filter.accessorKey]: state
               }));
             },
             label: filter.label,
             placeholder: filter.placeholder,
-            state: filterStates[filter.accessor]
+            state: filterStates[filter.accessorKey]
           }
         ) }, filter.label);
       case "id" /* ID */:
@@ -365,12 +374,12 @@ function DataManagerTable(props) {
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
-                [filter.accessor]: state
+                [filter.accessorKey]: state
               }));
             },
             label: filter.label,
             placeholder: filter.placeholder,
-            state: filterStates[filter.accessor]
+            state: filterStates[filter.accessorKey]
           }
         ) }, filter.label);
       case "boolean" /* BOOLEAN */:
@@ -379,11 +388,24 @@ function DataManagerTable(props) {
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
-                [filter.accessor]: state
+                [filter.accessorKey]: state
               }));
             },
             label: filter.label,
-            state: filterStates[filter.accessor]
+            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:
@@ -391,14 +413,18 @@ function DataManagerTable(props) {
     }
   }) : [];
   let filters;
+  const isFilterButtonSmall = isSm && props.header;
   if (props.filterOptions) {
     filters = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DataManagerTableFilterContainer, { children: [
       /* @__PURE__ */ jsx(
         Button,
         {
-          text: `Filter${numFiltersApplied > 0 ? ` | ${numFiltersApplied}` : ""}`,
-          paddingY: "short",
-          icon: { name: "Sort" },
+          kind: isFilterButtonSmall ? "roundIcon" : "secondary",
+          text: !isFilterButtonSmall ? `Filter${numFiltersApplied > 0 ? ` | ${numFiltersApplied}` : ""}` : void 0,
+          size: "ExtraSmall",
+          icon: {
+            name: "Sort"
+          },
           typography: { color: "c6Neutral" },
           onClick: () => setShowFilterPopover(!showFilterPopover)
         }
@@ -478,11 +504,13 @@ function DataManagerTable(props) {
   } 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: `${props.resultCount}` }),
+      /* @__PURE__ */ jsx(LabelModerate, { children: `${countString}` }),
       /* @__PURE__ */ jsx(Label, { children: " results" })
     ] });
     const hasNext = props.resultCount ? startResult + pageSize - 1 < props.resultCount : false;
@@ -519,7 +547,10 @@ function DataManagerTable(props) {
     ] });
   }
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    props.showHeader && /* @__PURE__ */ jsx(DataManagerTableHeader, { children: filters }),
+    props.showHeader && /* @__PURE__ */ jsxs(DataManagerTableHeader, { children: [
+      props.header,
+      filters
+    ] }),
     /* @__PURE__ */ jsx(Table, __spreadProps(__spreadValues({}, props), { loading: isLoading })),
     footer
   ] });
@@ -545,10 +576,7 @@ var DataManagerTableHeader = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: flex-end;
-  gap: ${Spacing.px.sm};
   padding: ${Spacing.px.xs} 0;
-  ${commonPadding};
 `;
 var DataManagerTableFooter = styled.div`
   border-top: 1px solid ${({ theme }) => theme.c1Neutral};
@@ -576,7 +604,16 @@ var PaginationButtonsContainer = styled.div`
   gap: ${Spacing.px.xs};
 `;
 var DataManagerTableFilterContainer = styled.div`
-  position: relative;
+  position: absolute;
+  z-index: 3;
+  background: white;
+  right: 0;
+  background: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 1) 15%
+  );
+  ${commonPadding}
 `;
 
 export {

package/dist/{chunk-FDMD4SG4.js → chunk-IS2NM4HG.js}

@@ -1,18 +1,18 @@
 import {
   setDefaultReactNodesTypography
-} from "./chunk-6GJZZ2PX.js";
+} from "./chunk-JZ4RXNUO.js";
 import {
   toReactNodes
-} from "./chunk-3NZOR3KT.js";
+} from "./chunk-C3PR3QMX.js";
 import {
   Icon
-} from "./chunk-RMZQSXO2.js";
+} from "./chunk-HOGSXW62.js";
 import {
   standardBorderRadius
-} from "./chunk-RNCUEVKR.js";
+} from "./chunk-WXQAFT6L.js";
 import {
   getColor
-} from "./chunk-QNPCRFUV.js";
+} from "./chunk-WFSTDMMY.js";
 
 // src/components/Badge.tsx
 import styled from "@emotion/styled";
@@ -30,7 +30,7 @@ function Badge({
   const defaultTypography = {
     type: (typographyProp == null ? void 0 : typographyProp.type) || "Label Moderate",
     size: (typographyProp == null ? void 0 : typographyProp.size) || "Small",
-    color: (typographyProp == null ? void 0 : typographyProp.color) || (kind === "danger" ? "danger" : "text")
+    color: (typographyProp == null ? void 0 : typographyProp.color) || (kind === "danger" ? "danger" : kind === "success" ? "white" : "text")
   };
   const nodesWithTypography = setDefaultReactNodesTypography(contentProp, {
     default: defaultTypography
@@ -42,7 +42,7 @@ function Badge({
       {
         name: icon.name,
         width: 20,
-        color: icon.color ? icon.color : kind === "danger" ? "danger" : void 0
+        color: icon.color ? icon.color : kind === "danger" ? "danger" : kind === "success" ? "success" : void 0
       }
     ) : null,
     /* @__PURE__ */ jsx(BadgeContent, { children: content })
@@ -62,6 +62,8 @@ var StyledBadge = styled.div`
   background-color: ${({ theme, kind }) => {
   if (kind === "danger") {
     return getColor(theme, "red42a10");
+  } else if (kind === "success") {
+    return getColor(theme, "success");
   } else {
     return getColor(theme, theme.badge.bg);
   }