@paubox/ui 1.7.0 → 1.9.0

package/index.esm.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import * as React from 'react';
-import React__default, { useState, useRef, forwardRef, useLayoutEffect, useEffect, createElement, cloneElement, Component, createRef, useCallback, useId as useId$1, useMemo } from 'react';
+import React__default, { useState, useRef, forwardRef, useLayoutEffect, useEffect, createElement, cloneElement, Component, createRef, useCallback, useId as useId$1, useMemo, Fragment as Fragment$1 } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { createPortal } from 'react-dom';
 
@@ -1720,11 +1720,11 @@ function _templateObject2$i() {
     };
     return data;
 }
-function _templateObject3$d() {
+function _templateObject3$e() {
     var data = _tagged_template_literal$u([
         "\n  box-shadow: 0px 8px 32px 0px #00000029;\n"
     ]);
-    _templateObject3$d = function _templateObject() {
+    _templateObject3$e = function _templateObject() {
         return data;
     };
     return data;
@@ -1732,7 +1732,7 @@ function _templateObject3$d() {
 var elevation100 = css(_templateObject$u());
 var elevation200 = css(_templateObject1$j());
 var elevation300 = css(_templateObject2$i());
-var elevation400 = css(_templateObject3$d());
+var elevation400 = css(_templateObject3$e());
 
 var elevation = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -1792,7 +1792,7 @@ function _templateObject2$h() {
     };
     return data;
 }
-function _templateObject3$c() {
+function _templateObject3$d() {
     var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
@@ -1800,12 +1800,12 @@ function _templateObject3$c() {
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 400;\n"
     ]);
-    _templateObject3$c = function _templateObject() {
+    _templateObject3$d = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject4$9() {
+function _templateObject4$b() {
     var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
@@ -1813,12 +1813,12 @@ function _templateObject4$9() {
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 600;\n"
     ]);
-    _templateObject4$9 = function _templateObject() {
+    _templateObject4$b = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject5$4() {
+function _templateObject5$5() {
     var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
@@ -1826,12 +1826,12 @@ function _templateObject5$4() {
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 400;\n"
     ]);
-    _templateObject5$4 = function _templateObject() {
+    _templateObject5$5 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject6$2() {
+function _templateObject6$3() {
     var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
@@ -1839,12 +1839,12 @@ function _templateObject6$2() {
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 600;\n"
     ]);
-    _templateObject6$2 = function _templateObject() {
+    _templateObject6$3 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject7$1() {
+function _templateObject7$2() {
     var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
@@ -1852,7 +1852,7 @@ function _templateObject7$1() {
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 400;\n"
     ]);
-    _templateObject7$1 = function _templateObject() {
+    _templateObject7$2 = function _templateObject() {
         return data;
     };
     return data;
@@ -2095,12 +2095,12 @@ var commonStyles = css(_templateObject$t());
 // HEADLINES
 var $headline100Regular = css(_templateObject1$i(), commonStyles, headline100FontSize / BASE_FONT_SIZE, headline100LineHeight / BASE_FONT_SIZE, headline100LetterSpacing);
 var $headline100Semibold = css(_templateObject2$h(), commonStyles, headline100FontSize / BASE_FONT_SIZE, headline100LineHeight / BASE_FONT_SIZE, headline100LetterSpacing);
-var $headline200Regular = css(_templateObject3$c(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
-var $headline200Semibold = css(_templateObject4$9(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
-var $headline300Regular = css(_templateObject5$4(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
-var $headline300Semibold = css(_templateObject6$2(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
+var $headline200Regular = css(_templateObject3$d(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
+var $headline200Semibold = css(_templateObject4$b(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
+var $headline300Regular = css(_templateObject5$5(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
+var $headline300Semibold = css(_templateObject6$3(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
 // PARAGRAPH
-var $paragraph100Regular = css(_templateObject7$1(), commonStyles, paragraph100FontSize / BASE_FONT_SIZE, paragraph100LineHeight / BASE_FONT_SIZE, paragraph100LetterSpacing);
+var $paragraph100Regular = css(_templateObject7$2(), commonStyles, paragraph100FontSize / BASE_FONT_SIZE, paragraph100LineHeight / BASE_FONT_SIZE, paragraph100LetterSpacing);
 var $paragraph100Semibold = css(_templateObject8(), commonStyles, paragraph100FontSize / BASE_FONT_SIZE, paragraph100LineHeight / BASE_FONT_SIZE, paragraph100LetterSpacing);
 var $paragraph200Regular = css(_templateObject9(), commonStyles, paragraph200FontSize / BASE_FONT_SIZE, paragraph200LineHeight / BASE_FONT_SIZE, paragraph200LetterSpacing);
 var $paragraph200Semibold = css(_templateObject10(), commonStyles, paragraph200FontSize / BASE_FONT_SIZE, paragraph200LineHeight / BASE_FONT_SIZE, paragraph200LetterSpacing);
@@ -2239,32 +2239,32 @@ function _templateObject2$g() {
     };
     return data;
 }
-function _templateObject3$b() {
+function _templateObject3$c() {
     var data = _tagged_template_literal$s([
         "\n  font-size: 1.5rem;\n  color: ",
         ";\n  margin-bottom: auto;\n  flex-shrink: 0;\n"
     ]);
-    _templateObject3$b = function _templateObject() {
+    _templateObject3$c = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject4$8() {
+function _templateObject4$a() {
     var data = _tagged_template_literal$s([
         "\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n"
     ]);
-    _templateObject4$8 = function _templateObject() {
+    _templateObject4$a = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject5$3() {
+function _templateObject5$4() {
     var data = _tagged_template_literal$s([
         "\n  background-color: transparent;\n  border: none;\n  color: ",
         ";\n  cursor: pointer;\n  padding: 0.25rem;\n  font-size: 0.75rem;\n  margin-left: ",
         ";\n"
     ]);
-    _templateObject5$3 = function _templateObject() {
+    _templateObject5$4 = function _templateObject() {
         return data;
     };
     return data;
@@ -2281,12 +2281,12 @@ var Title = styled.h1(_templateObject1$h(), function(param) {
     return size === 'large' ? $paragraph100Semibold : $paragraph200Regular;
 });
 var Text = styled.p(_templateObject2$g(), $paragraph200Regular);
-var StyledIcon = styled.div(_templateObject3$b(), function(param) {
+var StyledIcon = styled.div(_templateObject3$c(), function(param) {
     var type = param.type;
     return type === 'info' ? primary700 : type === 'error' ? danger700 : type === 'success' ? success700 : warning700;
 });
-var TextWrapper = styled.div(_templateObject4$8());
-var TruncaterButton = styled.button(_templateObject5$3(), primary700, function(param) {
+var TextWrapper = styled.div(_templateObject4$a());
+var TruncaterButton = styled.button(_templateObject5$4(), primary700, function(param) {
     var isExpanded = param.isExpanded;
     return !isExpanded ? '0' : '0.25rem';
 });
@@ -22898,11 +22898,11 @@ function _templateObject2$e() {
     };
     return data;
 }
-function _templateObject3$a() {
+function _templateObject3$b() {
     var data = _tagged_template_literal$j([
         "\n  width: 100%;\n  min-width: 0;\n"
     ]);
-    _templateObject3$a = function _templateObject() {
+    _templateObject3$b = function _templateObject() {
         return data;
     };
     return data;
@@ -22913,7 +22913,7 @@ var RowContainer = styled.div(_templateObject$j(), function(param) {
 });
 var ContentContainer = styled.div(_templateObject1$f());
 var SelectContainer = styled.div(_templateObject2$e());
-var MultiInputContainer = styled.div(_templateObject3$a());
+var MultiInputContainer = styled.div(_templateObject3$b());
 var FilterRow = function(param) {
     var filterKey = param.filterKey, rowIndex = param.rowIndex, values = param.values, errors = param.errors, touched = param.touched, onChange = param.onChange, onRemove = param.onRemove, fieldOptions = param.fieldOptions, operatorOptions = param.operatorOptions, showRemove = param.showRemove;
     var _touched_filters_filterKey_rowIndex, _touched_filters_filterKey, _touched_filters, _errors_filters_filterKey_rowIndex, _errors_filters_filterKey, _errors_filters, _touched_filters_filterKey_rowIndex1, _touched_filters_filterKey1, _touched_filters1, _errors_filters_filterKey_rowIndex1, _errors_filters_filterKey1, _errors_filters1, _touched_filters_filterKey_rowIndex2, _touched_filters_filterKey2, _touched_filters2, _errors_filters_filterKey_rowIndex2, _errors_filters_filterKey2, _errors_filters2;
@@ -23136,39 +23136,39 @@ function _templateObject2$d() {
     };
     return data;
 }
-function _templateObject3$9() {
+function _templateObject3$a() {
     var data = _tagged_template_literal$i([
         "\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  flex-wrap: wrap;\n  gap: 1rem;\n  border-color: #e5e7eb;\n"
     ]);
-    _templateObject3$9 = function _templateObject() {
+    _templateObject3$a = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject4$7() {
+function _templateObject4$9() {
     var data = _tagged_template_literal$i([
         "\n  width: 100%;\n  border-radius: 0.5rem;\n  border: 4px dashed #e5e7eb;\n  background-color: #f9fafb;\n  padding: 2rem;\n\n  &:hover {\n    cursor: pointer;\n    &:not(:disabled) {\n      background-color: ",
         ";\n    }\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n"
     ]);
-    _templateObject4$7 = function _templateObject() {
+    _templateObject4$9 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject5$2() {
+function _templateObject5$3() {
     var data = _tagged_template_literal$i([
         "\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\n"
     ]);
-    _templateObject5$2 = function _templateObject() {
+    _templateObject5$3 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject6$1() {
+function _templateObject6$2() {
     var data = _tagged_template_literal$i([
         "\n  width: 100%;\n  padding: 1rem;\n  padding-top: 0;\n  box-sizing: border-box;\n"
     ]);
-    _templateObject6$1 = function _templateObject() {
+    _templateObject6$2 = function _templateObject() {
         return data;
     };
     return data;
@@ -23182,10 +23182,10 @@ var FilterGroup = styled.div(_templateObject1$e(), function(param) {
     return isHovered ? danger200 : '#e5e7eb';
 });
 var CloseButton$1 = styled.button(_templateObject2$d());
-var FilterRowsContainer = styled.div(_templateObject3$9());
-var OrButton = styled.button(_templateObject4$7(), neutral100);
-var ButtonGroup = styled.div(_templateObject5$2());
-var AndButtonContainer = styled.div(_templateObject6$1());
+var FilterRowsContainer = styled.div(_templateObject3$a());
+var OrButton = styled.button(_templateObject4$9(), neutral100);
+var ButtonGroup = styled.div(_templateObject5$3());
+var AndButtonContainer = styled.div(_templateObject6$2());
 var FilterForm = function(param) {
     var values = param.values, fieldOptions = param.fieldOptions, operatorOptions = param.operatorOptions, onSubmit = param.onSubmit, onClear = param.onClear, onChange = param.onChange, errors = param.errors, touched = param.touched;
     var _useState = _sliced_to_array$c(useState(undefined), 2), isHovered = _useState[0], setIsHovered = _useState[1];
@@ -23778,7 +23778,8 @@ function _templateObject$g() {
 }
 function _templateObject1$c() {
     var data = _tagged_template_literal$g([
-        "\n  display: flex;\n  align-items: center;\n\n  width: 100%;\n  position: relative;\n  cursor: pointer;\n  &:hover {\n    background-color: ",
+        "\n  display: flex;\n  align-items: center;\n\n  width: 100%;\n  position: relative;\n  cursor: ",
+        ";\n  &:hover {\n    background-color: ",
         ";\n  }\n  transition: all 150ms ease-in-out;\n\n  &:focus-within {\n    border-color: ",
         ";\n  }\n\n  &:focus {\n    background-color: ",
         ";\n  }\n\n  border: 1px solid\n    ",
@@ -23792,7 +23793,7 @@ function _templateObject1$c() {
 }
 function _templateObject2$b() {
     var data = _tagged_template_literal$g([
-        "\n  flex: 1;\n  z-index: 2;\n  cursor: pointer;\n  border: none;\n  background-color: transparent;\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  &::-ms-expand {\n    display: none;\n  }\n  &::placeholder {\n    color: ",
+        "\n  flex: 1;\n  z-index: 2;\n  pointer-events: none;\n  border: none;\n  background-color: transparent;\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  &::-ms-expand {\n    display: none;\n  }\n  &::placeholder {\n    color: ",
         ";\n  }\n  color: ",
         ";\n  padding: ",
         ";\n  padding-right: 2rem;\n  outline: none;\n  &::placeholder {\n    color: ",
@@ -23804,57 +23805,57 @@ function _templateObject2$b() {
     };
     return data;
 }
-function _templateObject3$8() {
+function _templateObject3$9() {
     var data = _tagged_template_literal$g([
         "\n  background-color: ",
         ";\n  border-radius: 1rem;\n  border: none;\n  cursor: pointer;\n  padding: 0.25rem 0.313rem;\n  white-space: nowrap;\n  display: flex;\n  gap: 0.25rem;\n  ",
         "\n  align-items: center;\n  justify-content: center;\n"
     ]);
-    _templateObject3$8 = function _templateObject() {
+    _templateObject3$9 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject4$6() {
+function _templateObject4$8() {
     var data = _tagged_template_literal$g([
         "\n  position: absolute;\n  display: flex;\n  gap: 0.25rem;\n  width: min-content;\n  max-width: 85%;\n  height: auto;\n  overflow-x: auto;\n\n  /* Always show scrollbar when overflowing */\n  &::-webkit-scrollbar {\n    height: 4px;\n    display: block;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: ",
         ";\n    border-radius: 2px;\n    display: block;\n    width: 95%;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ",
         ";\n    border-radius: 2px;\n    display: block;\n  }\n\n  padding: ",
         ";\n"
     ]);
-    _templateObject4$6 = function _templateObject() {
+    _templateObject4$8 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject5$1() {
+function _templateObject5$2() {
     var data = _tagged_template_literal$g([
         "\n  position: absolute;\n  right: 0rem;\n  width: 2rem;\n  background-color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 0;\n  border: none;\n  cursor: pointer;\n  z-index: 0;\n  transition: all 150ms ease-in-out;\n  transform: ",
         ";\n"
     ]);
-    _templateObject5$1 = function _templateObject() {
+    _templateObject5$2 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject6() {
+function _templateObject6$1() {
     var data = _tagged_template_literal$g([
         "\n  ",
         "\n  color: ",
         "/80;\n"
     ]);
-    _templateObject6 = function _templateObject() {
+    _templateObject6$1 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject7() {
+function _templateObject7$1() {
     var data = _tagged_template_literal$g([
         "\n  ",
         "\n  color: ",
         ";\n"
     ]);
-    _templateObject7 = function _templateObject() {
+    _templateObject7$1 = function _templateObject() {
         return data;
     };
     return data;
@@ -23862,6 +23863,9 @@ function _templateObject7() {
 // Wrapper for the Input and Icons
 var InputWrapper$2 = styled.div(_templateObject$g());
 var MultiSelectWrapper = styled.div(_templateObject1$c(), function(param) {
+    var disabled = param.disabled;
+    return disabled ? 'not-allowed' : 'pointer';
+}, function(param) {
     var disabled = param.disabled, type = param.type;
     return disabled || type === 'secondary' ? neutral100 : 'white';
 }, function(param) {
@@ -23888,21 +23892,24 @@ var BaseSelect$1 = styled.select(_templateObject2$b(), neutral500, function(para
     var sz = param.sz, type = param.type;
     return type === 'primary' ? sz === 'lg' ? $paragraph100Regular : $paragraph200Regular : sz === 'lg' ? $paragraph100Semibold : $paragraph200Semibold;
 });
-var Chip$1 = styled.button(_templateObject3$8(), function(param) {
+var Chip$1 = styled.button(_templateObject3$9(), function(param) {
     var secondary = param.secondary;
     return secondary ? neutral300 : neutral100;
 }, function(param) {
     var sz = param.sz;
     return sz === 'lg' ? $label100Medium : $label200Medium;
 });
-var ChipWrapper$1 = styled.div(_templateObject4$6(), neutral100, neutral300, function(param) {
+var ChipWrapper$1 = styled.div(_templateObject4$8(), neutral100, neutral300, function(param) {
     var sz = param.sz;
     return sz === 'lg' ? '0.5rem 0.563rem' : '0.375rem 0.563rem';
 });
 var MultiSelectChip = function(option) {
     var label = option.label, onClick = option.onClick, _option_type = option.type, type = _option_type === void 0 ? 'primary' : _option_type, _option_sz = option.sz, sz = _option_sz === void 0 ? 'sm' : _option_sz;
     return /*#__PURE__*/ jsxs(Chip$1, {
-        onClick: onClick,
+        onClick: function(e) {
+            e.stopPropagation();
+            onClick();
+        },
         secondary: type === 'secondary',
         sz: sz,
         children: [
@@ -23912,12 +23919,12 @@ var MultiSelectChip = function(option) {
     });
 };
 // Style for the Icons
-var IconWrapper$2 = styled.div(_templateObject5$1(), function(param) {
+var IconWrapper$2 = styled.div(_templateObject5$2(), function(param) {
     var open = param.open;
     return open ? 'rotate(180deg)' : 'rotate(0deg)';
 });
-var PlaceholderOption = styled.option(_templateObject6(), $paragraph100Semibold, textSecondary);
-var SelectedOption = styled.option(_templateObject7(), $paragraph200Regular, textPrimary);
+var PlaceholderOption = styled.option(_templateObject6$1(), $paragraph100Semibold, textSecondary);
+var SelectedOption = styled.option(_templateObject7$1(), $paragraph200Regular, textPrimary);
 var MultiSelect = function(_param) {
     var _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options; _param.checkbox; var placeholder = _param.placeholder, label = _param.label, _param_chips = _param.chips, chips = _param_chips === void 0 ? false : _param_chips, className = _param.className, values = _param.values, setValues = _param.setValues, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, props = _object_without_properties$e(_param, [
         "sz",
@@ -23934,7 +23941,7 @@ var MultiSelect = function(_param) {
         "type"
     ]);
     var _useState = _sliced_to_array$b(useState(false), 2), open = _useState[0], setOpen = _useState[1];
-    var selectRef = useRef(null);
+    var wrapperRef = useRef(null);
     var toggleSelect = function(option) {
         setValues(values.some(function(val) {
             return val === option.value;
@@ -23945,22 +23952,21 @@ var MultiSelect = function(_param) {
         ]), option);
     };
     return /*#__PURE__*/ jsxs(MultiSelectWrapper, {
+        ref: wrapperRef,
         disabled: disabled,
         type: type,
         error: error,
         open: open,
         className: className,
+        onClick: function() {
+            return !disabled && setOpen(function(prev) {
+                return !prev;
+            });
+        },
         children: [
             /*#__PURE__*/ jsxs(InputWrapper$2, {
                 children: [
-                    /*#__PURE__*/ jsx(BaseSelect$1, _object_spread_props$j(_object_spread$n({
-                        ref: selectRef,
-                        onClick: function() {
-                            setOpen(function(prev) {
-                                return !prev;
-                            });
-                        }
-                    }, props), {
+                    /*#__PURE__*/ jsx(BaseSelect$1, _object_spread_props$j(_object_spread$n({}, props), {
                         type: type,
                         sz: sz,
                         value: values,
@@ -24009,7 +24015,7 @@ var MultiSelect = function(_param) {
                 onClose: function() {
                     return setOpen(false);
                 },
-                anchorRef: selectRef,
+                anchorRef: wrapperRef,
                 align: "start",
                 offset: 4,
                 maxHeight: 400,
@@ -24025,8 +24031,9 @@ var MultiSelect = function(_param) {
                             return val === option.value;
                         })
                     }, option), {
-                        onClick: function() {
-                            return toggleSelect(option);
+                        onClick: function(e) {
+                            e.stopPropagation();
+                            toggleSelect(option);
                         }
                     }), option.value);
                 })
@@ -24377,21 +24384,21 @@ function _templateObject2$a() {
     };
     return data;
 }
-function _templateObject3$7() {
+function _templateObject3$8() {
     var data = _tagged_template_literal$e([
         "\n  display: flex;\n  gap: 0.25rem;\n  flex-wrap: wrap;\n  height: auto;\n"
     ]);
-    _templateObject3$7 = function _templateObject() {
+    _templateObject3$8 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject4$5() {
+function _templateObject4$7() {
     var data = _tagged_template_literal$e([
         "\n  position: absolute;\n  right: 0.5rem;\n  opacity: 0.8;\n\n  ",
         "\n"
     ]);
-    _templateObject4$5 = function _templateObject() {
+    _templateObject4$7 = function _templateObject() {
         return data;
     };
     return data;
@@ -24412,8 +24419,8 @@ var Chip = styled.button(_templateObject2$a(), function(param) {
     var secondary = param.secondary;
     return secondary ? neutral300 : neutral100;
 }, $label200Medium);
-var ChipWrapper = styled.div(_templateObject3$7());
-var ChipCounter = styled.p(_templateObject4$5(), function(param) {
+var ChipWrapper = styled.div(_templateObject3$8());
+var ChipCounter = styled.p(_templateObject4$7(), function(param) {
     var sz = param.sz, type = param.type;
     return type === 'primary' ? sz === 'lg' ? $paragraph100Regular : $paragraph200Regular : sz === 'lg' ? $paragraph100Semibold : $paragraph200Semibold;
 });
@@ -24679,7 +24686,8 @@ function _templateObject$d() {
 }
 function _templateObject1$a() {
     var data = _tagged_template_literal$d([
-        "\n  display: flex;\n  align-items: center;\n  width: max-content;\n  position: relative;\n  cursor: pointer;\n  &:hover {\n    background-color: ",
+        "\n  display: flex;\n  align-items: center;\n  width: max-content;\n  position: relative;\n  cursor: ",
+        ";\n  &:hover {\n    background-color: ",
         ";\n  }\n  transition: all 150ms ease-in-out;\n\n  &:focus-within {\n    border-color: ",
         ";\n  }\n\n  &:focus {\n    background-color: ",
         ";\n  }\n\n  border: 1px solid\n    ",
@@ -24694,7 +24702,7 @@ function _templateObject1$a() {
 }
 function _templateObject2$9() {
     var data = _tagged_template_literal$d([
-        "\n  flex: 1;\n  cursor: pointer;\n  border: none;\n  width: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  background-color: transparent;\n  z-index: 1;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  &::-ms-expand {\n    display: none;\n  }\n  color: ",
+        "\n  flex: 1;\n  pointer-events: none;\n  border: none;\n  width: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  background-color: transparent;\n  z-index: 1;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  &::-ms-expand {\n    display: none;\n  }\n  color: ",
         ";\n  padding: ",
         ";\n  padding-right: 2rem;\n  outline: none;\n\n  ",
         "\n"
@@ -24704,24 +24712,24 @@ function _templateObject2$9() {
     };
     return data;
 }
-function _templateObject3$6() {
+function _templateObject3$7() {
     var data = _tagged_template_literal$d([
         "\n  position: absolute;\n  right: 0rem;\n  width: 2rem;\n  font-size: ",
         "rem;\n  background-color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 0;\n  border: none;\n  cursor: pointer;\n  transition: all 150ms ease-in-out;\n  transform: ",
         ";\n"
     ]);
-    _templateObject3$6 = function _templateObject() {
+    _templateObject3$7 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject4$4() {
+function _templateObject4$6() {
     var data = _tagged_template_literal$d([
         "\n  ",
         "\n  color: ",
         ";\n"
     ]);
-    _templateObject4$4 = function _templateObject() {
+    _templateObject4$6 = function _templateObject() {
         return data;
     };
     return data;
@@ -24729,6 +24737,9 @@ function _templateObject4$4() {
 // Wrapper for the Input and Icons
 var InputWrapper = styled.div(_templateObject$d());
 var SelectWrapper = styled.div(_templateObject1$a(), function(param) {
+    var disabled = param.disabled;
+    return disabled ? 'not-allowed' : 'pointer';
+}, function(param) {
     var disabled = param.disabled, type = param.type;
     return disabled || type === 'secondary' ? neutral100 : 'white';
 }, function(param) {
@@ -24752,14 +24763,14 @@ var BaseSelect = styled.select(_templateObject2$9(), textPrimary, function(param
     var sz = param.sz, type = param.type;
     return type === 'primary' ? sz === 'lg' ? $paragraph100Regular : $paragraph200Regular : sz === 'lg' ? $paragraph100Semibold : $paragraph200Semibold;
 });
-var IconWrapper$1 = styled.div(_templateObject3$6(), function(param) {
+var IconWrapper$1 = styled.div(_templateObject3$7(), function(param) {
     var sz = param.sz;
     return sz === 'lg' ? 1 : 0.75;
 }, function(param) {
     var open = param.open;
     return open ? 'rotate(180deg)' : 'rotate(0deg)';
 });
-var SelectOption = styled.option(_templateObject4$4(), $paragraph100Semibold, textPrimary);
+var SelectOption = styled.option(_templateObject4$6(), $paragraph100Semibold, textPrimary);
 var Select = function(_param) {
     var _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options; _param.checkbox; var _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? 'Please select...' : _param_placeholder, value = _param.value, setValue = _param.setValue; _param.initialValue; var _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, style = _param.style, _param_maxHeight = _param.maxHeight, maxHeight = _param_maxHeight === void 0 ? '14rem' : _param_maxHeight, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_addClearOption = _param.addClearOption, addClearOption = _param_addClearOption === void 0 ? false : _param_addClearOption, _param_clearOptionLabel = _param.clearOptionLabel, clearOptionLabel = _param_clearOptionLabel === void 0 ? 'Clear' : _param_clearOptionLabel, props = _object_without_properties$b(_param, [
         "sz",
@@ -24797,16 +24808,15 @@ var Select = function(_param) {
         error: error,
         open: open,
         style: style,
+        onClick: function() {
+            return !disabled && setOpen(function(prev) {
+                return !prev;
+            });
+        },
         children: [
             /*#__PURE__*/ jsxs(InputWrapper, {
                 children: [
-                    /*#__PURE__*/ jsx(BaseSelect, _object_spread_props$h(_object_spread$k({
-                        onClick: function() {
-                            return setOpen(function(prev) {
-                                return !prev;
-                            });
-                        }
-                    }, props), {
+                    /*#__PURE__*/ jsx(BaseSelect, _object_spread_props$h(_object_spread$k({}, props), {
                         type: type,
                         disabled: disabled,
                         sz: sz,
@@ -24852,8 +24862,9 @@ var Select = function(_param) {
                     return /*#__PURE__*/ jsx(MenuItem, _object_spread_props$h(_object_spread$k({
                         selected: value === option.value
                     }, option), {
-                        onClick: function() {
-                            return handleSelect(option);
+                        onClick: function(e) {
+                            e.stopPropagation();
+                            handleSelect(option);
                         }
                     }), option.value);
                 })
@@ -25168,22 +25179,22 @@ function _templateObject2$7() {
     };
     return data;
 }
-function _templateObject3$5() {
+function _templateObject3$6() {
     var data = _tagged_template_literal$b([
         "\n  ",
         "\n"
     ]);
-    _templateObject3$5 = function _templateObject() {
+    _templateObject3$6 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject4$3() {
+function _templateObject4$5() {
     var data = _tagged_template_literal$b([
         "\n  ",
         "\n"
     ]);
-    _templateObject4$3 = function _templateObject() {
+    _templateObject4$5 = function _templateObject() {
         return data;
     };
     return data;
@@ -25191,8 +25202,8 @@ function _templateObject4$3() {
 var MenuItemContainer = styled.div(_templateObject$b(), primary100);
 var IconContainer = styled.div(_templateObject1$8());
 var buttonStyles = css(_templateObject2$7(), spacing(1), spacing(2), $paragraph200Regular);
-var StyledItem = styled.button(_templateObject3$5(), buttonStyles);
-var StyledLink = styled.a(_templateObject4$3(), buttonStyles);
+var StyledItem = styled.button(_templateObject3$6(), buttonStyles);
+var StyledLink = styled.a(_templateObject4$5(), buttonStyles);
 var MenuItem = function(_param) {
     var label = _param.label, href = _param.href, selected = _param.selected, checkbox = _param.checkbox, onClick = _param.onClick, icon = _param.icon, disabled = _param.disabled, _param_size = _param.size, size = _param_size === void 0 ? 'small' : _param_size, props = _object_without_properties$9(_param, [
         "label",
@@ -29091,21 +29102,21 @@ function _templateObject2$6() {
     };
     return data;
 }
-function _templateObject3$4() {
+function _templateObject3$5() {
     var data = _tagged_template_literal$8([
         "\n  overflow-y: auto;\n"
     ]);
-    _templateObject3$4 = function _templateObject() {
+    _templateObject3$5 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject4$2() {
+function _templateObject4$4() {
     var data = _tagged_template_literal$8([
         "\n  display: flex;\n  justify-content: end;\n  gap: ",
         "px;\n"
     ]);
-    _templateObject4$2 = function _templateObject() {
+    _templateObject4$4 = function _templateObject() {
         return data;
     };
     return data;
@@ -29113,8 +29124,8 @@ function _templateObject4$2() {
 var StyledModal = styled(Modal$1)(_templateObject$8());
 var ModalContent = styled.div(_templateObject1$7(), spacing(2), spacing(1), spacing(3), elevation400);
 var ModalHeader = styled.div(_templateObject2$6());
-var ModalBody = styled.div(_templateObject3$4());
-var ModalFooter = styled.div(_templateObject4$2(), spacing(1));
+var ModalBody = styled.div(_templateObject3$5());
+var ModalFooter = styled.div(_templateObject4$4(), spacing(1));
 var Modal = function(param) {
     var open = param.open, onClose = param.onClose, loading = param.loading, title = param.title, header = param.header, children = param.children, actions = param.actions, style = param.style, _param_testId = param.testId, testId = _param_testId === void 0 ? 'modal' : _param_testId;
     return /*#__PURE__*/ jsx(StyledModal, {
@@ -29188,9 +29199,7 @@ function _tagged_template_literal$7(strings, raw) {
 }
 function _templateObject$7() {
     var data = _tagged_template_literal$7([
-        "\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ",
-        "px ",
-        "px ",
+        "\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ",
         "px;\n"
     ]);
     _templateObject$7 = function _templateObject() {
@@ -29207,7 +29216,7 @@ function _templateObject1$6() {
     };
     return data;
 }
-var PaginationContainer = styled.div(_templateObject$7(), spacing(2), spacing(1), spacing(1));
+var PaginationContainer = styled.div(_templateObject$7(), spacing(2));
 var PageControls = styled.div(_templateObject1$6());
 var Pagination = function(param) {
     var mode = param.mode, pageInfo = param.pageInfo, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, onPageSizeChange = param.onPageSizeChange, subText = param.subText, onPageChange = param.onPageChange, _param_testId = param.testId, testId = _param_testId === void 0 ? 'pagination' : _param_testId;
@@ -29663,13 +29672,13 @@ function _templateObject2$5() {
     };
     return data;
 }
-function _templateObject3$3() {
+function _templateObject3$4() {
     var data = _tagged_template_literal$5([
         "\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  border-radius: 0px ",
         "px ",
         "px 0px;\n  padding: 0 1.5rem;\n"
     ]);
-    _templateObject3$3 = function _templateObject() {
+    _templateObject3$4 = function _templateObject() {
         return data;
     };
     return data;
@@ -29677,7 +29686,7 @@ function _templateObject3$3() {
 var Container$1 = styled.div(_templateObject$5(), spacing(1));
 var IconWrapper = styled(IconWrapper$3)(_templateObject1$5(), neutral200, neutral600);
 var StyledInput = styled(BaseInput$1)(_templateObject2$5());
-var GoButton = styled(Button)(_templateObject3$3(), spacing(1), spacing(1));
+var GoButton = styled(Button)(_templateObject3$4(), spacing(1), spacing(1));
 var SearchBar = function(_param) {
     var placeholder = _param.placeholder, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, onClear = _param.onClear, onSubmit = _param.onSubmit, _param_showButton = _param.showButton, showButton = _param_showButton === void 0 ? true : _param_showButton, _param_showFilters = _param.showFilters, showFilters = _param_showFilters === void 0 ? false : _param_showFilters, _param_testId = _param.testId, testId = _param_testId === void 0 ? 'search' : _param_testId, props = _object_without_properties$2(_param, [
         "placeholder",
@@ -33794,31 +33803,31 @@ function _templateObject2$4() {
     };
     return data;
 }
-function _templateObject3$2() {
+function _templateObject3$3() {
     var data = _tagged_template_literal$4([
         "\n  position: absolute;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  width: 6px;\n  padding-right: 10px;\n"
     ]);
-    _templateObject3$2 = function _templateObject() {
+    _templateObject3$3 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject4$1() {
+function _templateObject4$3() {
     var data = _tagged_template_literal$4([
         "\n  position: absolute;\n  height: 0%;\n  width: 6px;\n  background-color: ",
         ";\n  cursor: col-resize;\n  user-select: none;\n  touch-action: none;\n  transition: height ease 0.25s;\n"
     ]);
-    _templateObject4$1 = function _templateObject() {
+    _templateObject4$3 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject5() {
+function _templateObject5$1() {
     var data = _tagged_template_literal$4([
         "\n  font-size: 9px;\n  display: inline-flex;\n  flex-direction: column;\n  margin-left: ",
         "px;\n  align-items: center;\n\n  & svg:first-of-type {\n    margin-bottom: -1.5px;\n  }\n  & svg:last-of-type {\n    margin-top: -1.5px;\n  }\n"
     ]);
-    _templateObject5 = function _templateObject() {
+    _templateObject5$1 = function _templateObject() {
         return data;
     };
     return data;
@@ -33826,9 +33835,9 @@ function _templateObject5() {
 var StyledHeader = styled.thead(_templateObject$4());
 var Th = styled(Typography)(_templateObject1$4(), spacing(1), neutral100, neutral300);
 var HeaderContent = styled.div(_templateObject2$4());
-var ResizeHandleContainer = styled.div(_templateObject3$2());
-var ResizeHandle = styled.div(_templateObject4$1(), neutral300);
-var SortIcon = styled.span(_templateObject5(), spacing(1));
+var ResizeHandleContainer = styled.div(_templateObject3$3());
+var ResizeHandle = styled.div(_templateObject4$3(), neutral300);
+var SortIcon = styled.span(_templateObject5$1(), spacing(1));
 var TableHeader = function(param) {
     var table = param.table, disableControls = param.disableControls, dense = param.dense, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
     return /*#__PURE__*/ jsx(StyledHeader, {
@@ -33846,9 +33855,9 @@ var TableHeader = function(param) {
                         variant: "paragraph200Semibold",
                         as: "th",
                         style: {
-                            width: columnDef.width && !autoWidth ? "".concat(columnDef.width, "px") : "".concat(!autoWidth ? "".concat(header.getSize(), "px") : 'auto'),
-                            minWidth: columnDef.minSize && !autoWidth ? "".concat(columnDef.minSize, "px") : "auto",
-                            maxWidth: columnDef.maxSize && !autoWidth ? "".concat(columnDef.maxSize, "px") : 'auto',
+                            width: autoWidth ? 'auto' : "".concat(header.getSize(), "px"),
+                            minWidth: autoWidth ? 'auto' : undefined,
+                            maxWidth: autoWidth ? 'auto' : undefined,
                             padding: dense ? "".concat(spacing(1), "px ").concat(spacing(header.id === 'row-select' ? 1 : 1.5), "px") : "".concat(spacing(1.5), "px ").concat(spacing(header.id === 'row-select' ? 1 : 1.5), "px")
                         },
                         children: [
@@ -33932,12 +33941,50 @@ function _templateObject2$3() {
     };
     return data;
 }
-function _templateObject3$1() {
+function _templateObject3$2() {
+    var data = _tagged_template_literal$3([
+        "\n        white-space: normal;\n        word-break: break-word;\n        overflow-wrap: break-word;\n      "
+    ]);
+    _templateObject3$2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4$2() {
+    var data = _tagged_template_literal$3([
+        "\n        white-space: normal;\n      "
+    ]);
+    _templateObject4$2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
+    var data = _tagged_template_literal$3([
+        "\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    "
+    ]);
+    _templateObject5 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject6() {
     var data = _tagged_template_literal$3([
         "\n  border-bottom: 1px solid ",
-        ";\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"
+        ";\n\n  ",
+        "\n"
     ]);
-    _templateObject3$1 = function _templateObject() {
+    _templateObject6 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject7() {
+    var data = _tagged_template_literal$3([
+        "\n  display: -webkit-box;\n  -webkit-line-clamp: ",
+        ";\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-word;\n"
+    ]);
+    _templateObject7 = function _templateObject() {
         return data;
     };
     return data;
@@ -33946,15 +33993,28 @@ var StyledTableBody = styled.tbody(_templateObject$3());
 var Tr = styled.tr(_templateObject2$3(), function(props) {
     return props.enableHover && css(_templateObject1$3(), props.disabled ? neutral100 : primary100);
 });
-var Td = styled(Typography)(_templateObject3$1(), neutral300);
+var Td = styled(Typography)(_templateObject6(), neutral300, function(props) {
+    var overflow = props.cellOverflow || 'truncate';
+    if (overflow === 'wrap') {
+        return css(_templateObject3$2());
+    }
+    if (overflow === 'clamp') {
+        // For clamp, don't apply display styles to td - content wrapper will handle it
+        return css(_templateObject4$2());
+    }
+    // Default: truncate
+    return css(_templateObject5());
+});
+var ClampWrapper = styled.div(_templateObject7(), function(props) {
+    return props.maxLines;
+});
 var TableBody = function(param) {
-    var table = param.table, columnWidths = param.columnWidths, enableRowSelection = param.enableRowSelection, onRowClick = param.onRowClick, getRowDisabled = param.getRowDisabled, dense = param.dense, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
+    var table = param.table, enableRowSelection = param.enableRowSelection, onRowClick = param.onRowClick, getRowDisabled = param.getRowDisabled, dense = param.dense, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
     return /*#__PURE__*/ jsxs(StyledTableBody, {
         children: [
             /*#__PURE__*/ jsx("colgroup", {
-                children: columnWidths.map(function(param) {
-                    var id = param.id;
-                    return /*#__PURE__*/ jsx("col", {}, id);
+                children: table.getAllColumns().map(function(column) {
+                    return /*#__PURE__*/ jsx("col", {}, column.id);
                 })
             }),
             table.getRowModel().rows.map(function(row) {
@@ -33974,15 +34034,24 @@ var TableBody = function(param) {
                     "data-testid": "".concat(testId, "-row-").concat(row.id),
                     children: row.getVisibleCells().map(function(cell) {
                         var cellValue = cell.getValue();
+                        var columnDef = cell.column.columnDef;
+                        var overflow = columnDef.overflow;
+                        var maxLines = columnDef.maxLines;
+                        var autoWidth = columnDef.autoWidth;
+                        var cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
                         return /*#__PURE__*/ jsx(Td, {
                             variant: "paragraph200Regular",
                             as: "td",
                             title: typeof cellValue === 'string' ? cellValue : undefined,
+                            cellOverflow: overflow,
                             style: {
-                                width: "".concat(cell.column.getSize(), "px"),
+                                width: autoWidth ? 'auto' : "".concat(cell.column.getSize(), "px"),
                                 padding: dense ? "".concat(spacing(1), "px ").concat(spacing(cell.column.id === 'row-select' ? 1 : 1.5), "px") : "".concat(spacing(1.5), "px ").concat(spacing(cell.column.id === 'row-select' ? 1 : 1.5), "px")
                             },
-                            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                            children: overflow === 'clamp' && maxLines ? /*#__PURE__*/ jsx(ClampWrapper, {
+                                maxLines: maxLines,
+                                children: cellContent
+                            }) : cellContent
                         }, cell.id);
                     })
                 }, row.id);
@@ -34155,11 +34224,32 @@ function _templateObject1$2() {
     return data;
 }
 function _templateObject2$2() {
+    var data = _tagged_template_literal$2([
+        "\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 0 ",
+        "px 0;\n  gap: ",
+        "px;\n\n  @media (max-width: 768px) {\n    flex-direction: column;\n    align-items: stretch;\n  }\n"
+    ]);
+    _templateObject2$2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3$1() {
+    var data = _tagged_template_literal$2([
+        "\n  display: flex;\n  gap: ",
+        "px;\n  align-items: center;\n"
+    ]);
+    _templateObject3$1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4$1() {
     var data = _tagged_template_literal$2([
         "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ",
         "px;\n  background: none;\n  font-size: 20px;\n"
     ]);
-    _templateObject2$2 = function _templateObject() {
+    _templateObject4$1 = function _templateObject() {
         return data;
     };
     return data;
@@ -34170,27 +34260,29 @@ var TableContainer = styled(/*#__PURE__*/ forwardRef(function(props, ref) {
     }));
 }))(_templateObject$2(), neutral300, spacing(1));
 var TableWrapper = styled.table(_templateObject1$2());
-var ContextMenuButton = styled(Button)(_templateObject2$2(), spacing(0.5));
+var TopBar = styled.div(_templateObject2$2(), spacing(2), spacing(2));
+var TopBarElement = styled.div(_templateObject3$1(), spacing(1));
+var ContextMenuButton = styled(Button)(_templateObject4$1(), spacing(0.5));
 var Table = function(param) {
-    var columns = param.columns, _param_data = param.data, data = _param_data === void 0 ? [] : _param_data, getRowId = param.getRowId, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_paginationMode = param.paginationMode, paginationMode = _param_paginationMode === void 0 ? 'page' : _param_paginationMode, pageInfo = param.pageInfo, subText = param.subText, onPageSizeChange = param.onPageSizeChange, onPageChange = param.onPageChange, sortBy = param.sortBy, sortOrder = param.sortOrder, onSortChange = param.onSortChange, _param_enableRowSelection = param.enableRowSelection, enableRowSelection = _param_enableRowSelection === void 0 ? false : _param_enableRowSelection, _param_selectedRows = param.selectedRows, selectedRows = _param_selectedRows === void 0 ? {} : _param_selectedRows, onRowSelectionChange = param.onRowSelectionChange, getRowDisabled = param.getRowDisabled, onRowClick = param.onRowClick, contextMenuActions = param.contextMenuActions, _param_dense = param.dense, dense = _param_dense === void 0 ? false : _param_dense, height = param.height, containerStyle = param.containerStyle, error = param.error, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
+    var columns = param.columns, _param_data = param.data, data = _param_data === void 0 ? [] : _param_data, getRowId = param.getRowId, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_paginationMode = param.paginationMode, paginationMode = _param_paginationMode === void 0 ? 'page' : _param_paginationMode, pageInfo = param.pageInfo, subText = param.subText, onPageSizeChange = param.onPageSizeChange, onPageChange = param.onPageChange, sortBy = param.sortBy, sortOrder = param.sortOrder, onSortChange = param.onSortChange, _param_enableRowSelection = param.enableRowSelection, enableRowSelection = _param_enableRowSelection === void 0 ? false : _param_enableRowSelection, _param_selectedRows = param.selectedRows, selectedRows = _param_selectedRows === void 0 ? {} : _param_selectedRows, onRowSelectionChange = param.onRowSelectionChange, getRowDisabled = param.getRowDisabled, onRowClick = param.onRowClick, contextMenuActions = param.contextMenuActions, _param_dense = param.dense, dense = _param_dense === void 0 ? false : _param_dense, height = param.height, containerStyle = param.containerStyle, error = param.error, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId, toolbar = param.toolbar;
     var containerRef = useRef(null);
     var ctxMenuAnchorRef = useRef(null);
     var _useState = _sliced_to_array$1(useState({}), 2), columnSizing = _useState[0], setColumnSizing = _useState[1];
     var _useState1 = _sliced_to_array$1(useState(null), 2), ctxMenuRow = _useState1[0], setCtxMenuRow = _useState1[1];
     var disableControls = isLoading || !(data === null || data === void 0 ? void 0 : data.length) || !!error;
     var hasSomePageProps = !!(pageInfo || onPageSizeChange || onPageChange);
-    var hasAllPageProps = !!(pageInfo && onPageSizeChange && onPageChange);
-    if (hasSomePageProps && !hasAllPageProps) {
-        console.warn('Table: Pagination requires all pagination props to be provided: pageInfo, onPageSizeChange, and onPageChange');
+    var hasPaginationHandlers = !!(onPageSizeChange && onPageChange);
+    if (hasSomePageProps && !hasPaginationHandlers) {
+        console.warn('Table: Pagination requires both onPageSizeChange and onPageChange handlers to be provided');
     }
     var tableColumns = useMemo(function() {
         return columns.map(function(col) {
             return _object_spread$2({
                 id: col.key,
                 accessorKey: col.key,
-                size: col.width,
                 accessorFn: col.getter,
-                enableSorting: col.sortable
+                enableSorting: col.sortable,
+                enableResizing: !col.autoWidth
             }, col);
         });
     }, [
@@ -34311,8 +34403,6 @@ var Table = function(param) {
         columns: allColumns,
         getRowId: getRowId,
         defaultColumn: {
-            minSize: 100,
-            maxSize: 500,
             size: 200,
             sortDescFirst: false
         },
@@ -34339,14 +34429,51 @@ var Table = function(param) {
         onColumnSizingChange: setColumnSizing,
         columnResizeMode: 'onChange'
     });
-    var columnWidths = table.getAllColumns().map(function(column) {
-        return {
-            id: column.id,
-            width: column.getSize()
-        };
-    });
+    var showTopBar = hasPaginationHandlers || toolbar;
     return /*#__PURE__*/ jsxs("div", {
         children: [
+            showTopBar && /*#__PURE__*/ jsxs(TopBar, {
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        children: Array.isArray(toolbar) ? /*#__PURE__*/ jsx(TopBarElement, {
+                            children: toolbar.map(function(item, i) {
+                                return /*#__PURE__*/ jsx(Fragment$1, {
+                                    children: item
+                                }, i);
+                            })
+                        }) : toolbar
+                    }),
+                    hasPaginationHandlers && pageInfo && (paginationMode === 'page' && pageInfo && 'currentPage' in pageInfo ? /*#__PURE__*/ jsx(Pagination, {
+                        mode: "page",
+                        pageInfo: pageInfo,
+                        subText: subText,
+                        isLoading: isLoading,
+                        onPageSizeChange: function(size) {
+                            resetContainerScroll();
+                            onPageSizeChange(size);
+                        },
+                        onPageChange: function(page) {
+                            resetContainerScroll();
+                            onPageChange(page);
+                        },
+                        testId: "".concat(testId, "-pagination")
+                    }) : /*#__PURE__*/ jsx(Pagination, {
+                        mode: "cursor",
+                        pageInfo: pageInfo,
+                        subText: subText,
+                        isLoading: isLoading,
+                        onPageSizeChange: function(size) {
+                            resetContainerScroll();
+                            onPageSizeChange(size);
+                        },
+                        onPageChange: function(page) {
+                            resetContainerScroll();
+                            onPageChange(page);
+                        },
+                        testId: "".concat(testId, "-pagination")
+                    }))
+                ]
+            }),
             /*#__PURE__*/ jsxs("div", {
                 style: {
                     position: 'relative',
@@ -34375,14 +34502,12 @@ var Table = function(param) {
                                 children: [
                                     /*#__PURE__*/ jsx(TableHeader, {
                                         table: table,
-                                        columnWidths: columnWidths,
                                         disableControls: disableControls,
                                         dense: dense,
                                         testId: testId
                                     }),
                                     /*#__PURE__*/ jsx(TableBody, {
                                         table: table,
-                                        columnWidths: columnWidths,
                                         enableRowSelection: enableRowSelection,
                                         onRowClick: onRowClick,
                                         getRowDisabled: getRowDisabled,
@@ -34396,35 +34521,6 @@ var Table = function(param) {
                     isLoading && /*#__PURE__*/ jsx(LoadingOverlay, {})
                 ]
             }),
-            onPageSizeChange && onPageChange && pageInfo && (paginationMode === 'page' && 'currentPage' in pageInfo ? /*#__PURE__*/ jsx(Pagination, {
-                mode: "page",
-                pageInfo: pageInfo,
-                subText: subText,
-                isLoading: isLoading,
-                onPageSizeChange: function(size) {
-                    resetContainerScroll();
-                    onPageSizeChange(size);
-                },
-                onPageChange: function(page) {
-                    resetContainerScroll();
-                    onPageChange(page);
-                },
-                testId: "".concat(testId, "-pagination")
-            }) : /*#__PURE__*/ jsx(Pagination, {
-                mode: "cursor",
-                pageInfo: pageInfo,
-                subText: subText,
-                isLoading: isLoading,
-                onPageSizeChange: function(size) {
-                    resetContainerScroll();
-                    onPageSizeChange(size);
-                },
-                onPageChange: function(page) {
-                    resetContainerScroll();
-                    onPageChange(page);
-                },
-                testId: "".concat(testId, "-pagination")
-            })),
             /*#__PURE__*/ jsx(RowContextMenu, {
                 anchorRef: ctxMenuAnchorRef,
                 actions: contextMenuActions,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paubox/ui",
   "author": "Paubox, Inc.",
   "description": "Paubox Component Library",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "type": "module",
   "private": false,
   "publishConfig": {

package/src/lib/Table/Table.d.ts

@@ -1,6 +1,7 @@
-import { CSSProperties, HTMLProps } from 'react';
+import { CSSProperties, HTMLProps, ReactNode } from 'react';
 import { ColumnDef, OnChangeFn, Row } from '@tanstack/react-table';
 import { PageInfoPageBased, PageInfoCursorBased } from '../Pagination/Pagination';
+export type CellOverflow = 'truncate' | 'wrap' | 'clamp';
 export declare const TableContainer: import("@emotion/styled").StyledComponent<Omit<HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
@@ -8,17 +9,14 @@ export declare const TableWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
-export interface ColumnWidth {
-    id: string;
-    width: number;
-}
 export type TableColumn<T> = ColumnDef<T> & {
     key: string;
     header: string;
-    width?: number;
     sortable?: boolean;
     getter?: () => unknown;
     autoWidth?: boolean;
+    overflow?: CellOverflow;
+    maxLines?: number;
 };
 export interface RowSelectState {
     [x: string]: boolean;
@@ -59,8 +57,9 @@ interface TableDataProps<T> {
     sortOrder?: string;
     onSortChange?: (sortBy: string, sortOrder: string) => void;
     error?: string;
+    toolbar?: ReactNode | ReactNode[];
 }
 export interface TableProps<T extends object> extends TableStyleProps, TableRowProps<T>, TableDataProps<T>, PaginationProps {
 }
-export declare const Table: <T extends object>({ columns, data, getRowId, isLoading, paginationMode, pageInfo, subText, onPageSizeChange, onPageChange, sortBy, sortOrder, onSortChange, enableRowSelection, selectedRows, onRowSelectionChange, getRowDisabled, onRowClick, contextMenuActions, dense, height, containerStyle, error, testId, }: TableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Table: <T extends object>({ columns, data, getRowId, isLoading, paginationMode, pageInfo, subText, onPageSizeChange, onPageChange, sortBy, sortOrder, onSortChange, enableRowSelection, selectedRows, onRowSelectionChange, getRowDisabled, onRowClick, contextMenuActions, dense, height, containerStyle, error, testId, toolbar, }: TableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/Table/TableBody.d.ts

@@ -1,8 +1,6 @@
 import { Table } from '@tanstack/react-table';
-import { ColumnWidth } from './Table';
 interface TableBodyProps<T extends object> {
     table: Table<T>;
-    columnWidths: ColumnWidth[];
     enableRowSelection?: boolean;
     onRowClick?: (row: T) => void;
     title?: string;
@@ -10,5 +8,5 @@ interface TableBodyProps<T extends object> {
     getRowDisabled?: (row: T) => boolean;
     testId?: string;
 }
-export declare const TableBody: <T extends object>({ table, columnWidths, enableRowSelection, onRowClick, getRowDisabled, dense, testId, }: TableBodyProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableBody: <T extends object>({ table, enableRowSelection, onRowClick, getRowDisabled, dense, testId, }: TableBodyProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/Table/TableHeader.d.ts

@@ -1,8 +1,6 @@
 import { Table } from '@tanstack/react-table';
-import { ColumnWidth } from './Table';
 interface TableHeaderProps<T> {
     table: Table<T>;
-    columnWidths: ColumnWidth[];
     disableControls: boolean;
     dense: boolean;
     testId?: string;