@paubox/ui 3.3.0 → 3.5.0

package/index.esm.js

@@ -1981,7 +1981,7 @@ function _templateObject3$h() {
     };
     return data;
 }
-function _templateObject4$e() {
+function _templateObject4$f() {
     var data = _tagged_template_literal$v([
         "\n  ",
         "\n  font-size: ",
@@ -1989,12 +1989,12 @@ function _templateObject4$e() {
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 600;\n"
     ]);
-    _templateObject4$e = function _templateObject() {
+    _templateObject4$f = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject5$8() {
+function _templateObject5$9() {
     var data = _tagged_template_literal$v([
         "\n  ",
         "\n  font-size: ",
@@ -2002,7 +2002,7 @@ function _templateObject5$8() {
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 400;\n"
     ]);
-    _templateObject5$8 = function _templateObject() {
+    _templateObject5$9 = function _templateObject() {
         return data;
     };
     return data;
@@ -2272,8 +2272,8 @@ var commonStyles = css(_templateObject$v());
 var $headline100Regular = css(_templateObject1$l(), commonStyles, headline100FontSize / BASE_FONT_SIZE, headline100LineHeight / BASE_FONT_SIZE, headline100LetterSpacing);
 var $headline100Semibold = css(_templateObject2$l(), commonStyles, headline100FontSize / BASE_FONT_SIZE, headline100LineHeight / BASE_FONT_SIZE, headline100LetterSpacing);
 var $headline200Regular = css(_templateObject3$h(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
-var $headline200Semibold = css(_templateObject4$e(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
-var $headline300Regular = css(_templateObject5$8(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
+var $headline200Semibold = css(_templateObject4$f(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
+var $headline300Regular = css(_templateObject5$9(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
 var $headline300Semibold = css(_templateObject6$4(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
 // PARAGRAPH
 var $paragraph100Regular = css(_templateObject7$3(), commonStyles, paragraph100FontSize / BASE_FONT_SIZE, paragraph100LineHeight / BASE_FONT_SIZE, paragraph100LetterSpacing);
@@ -2452,22 +2452,22 @@ function _templateObject3$g() {
     };
     return data;
 }
-function _templateObject4$d() {
+function _templateObject4$e() {
     var data = _tagged_template_literal$u([
         "\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n"
     ]);
-    _templateObject4$d = function _templateObject() {
+    _templateObject4$e = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject5$7() {
+function _templateObject5$8() {
     var data = _tagged_template_literal$u([
         "\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$7 = function _templateObject() {
+    _templateObject5$8 = function _templateObject() {
         return data;
     };
     return data;
@@ -2488,8 +2488,8 @@ var StyledIcon = styled.div(_templateObject3$g(), function(param) {
     var type = param.type;
     return type === 'info' ? primary700$1 : type === 'error' ? danger700$1 : type === 'success' ? success700$1 : warning700$1;
 });
-var TextWrapper = styled.div(_templateObject4$d());
-var TruncaterButton = styled.button(_templateObject5$7(), primary700$1, function(param) {
+var TextWrapper = styled.div(_templateObject4$e());
+var TruncaterButton = styled.button(_templateObject5$8(), primary700$1, function(param) {
     var isExpanded = param.isExpanded;
     return !isExpanded ? '0' : '0.25rem';
 });
@@ -22851,6 +22851,10 @@ var DatePicker = function(_param) {
                 style: {
                     width: rangeSelect ? 200 : 107
                 },
+                // Analytics autocapture hooks (@paubox/tracking). The trigger is a native
+                // button; tag it so the captured click is identifiable as a date picker.
+                "data-pb-component": "DatePicker",
+                "data-pb-name": rangeSelect ? 'date_range' : 'date',
                 children: [
                     dateString,
                     /*#__PURE__*/ jsx("div", {
@@ -23427,21 +23431,21 @@ function _templateObject3$e() {
     };
     return data;
 }
-function _templateObject4$c() {
+function _templateObject4$d() {
     var data = _tagged_template_literal$k([
         "\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$c = function _templateObject() {
+    _templateObject4$d = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject5$6() {
+function _templateObject5$7() {
     var data = _tagged_template_literal$k([
         "\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\n"
     ]);
-    _templateObject5$6 = function _templateObject() {
+    _templateObject5$7 = function _templateObject() {
         return data;
     };
     return data;
@@ -23465,8 +23469,8 @@ var FilterGroup = styled.div(_templateObject1$h(), function(param) {
 });
 var CloseButton$1 = styled.button(_templateObject2$h());
 var FilterRowsContainer = styled.div(_templateObject3$e());
-var OrButton = styled.button(_templateObject4$c(), neutral100$1);
-var ButtonGroup = styled.div(_templateObject5$6());
+var OrButton = styled.button(_templateObject4$d(), neutral100$1);
+var ButtonGroup = styled.div(_templateObject5$7());
 var AndButtonContainer = styled.div(_templateObject6$3());
 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;
@@ -23835,14 +23839,14 @@ function _templateObject3$d() {
     };
     return data;
 }
-function _templateObject4$b() {
+function _templateObject4$c() {
     var data = _tagged_template_literal$j([
         "\n  ",
         "\n  background: ",
         ";\n\n  html.dark & {\n    background: ",
         ";\n  }\n"
     ]);
-    _templateObject4$b = function _templateObject() {
+    _templateObject4$c = function _templateObject() {
         return data;
     };
     return data;
@@ -23857,7 +23861,7 @@ var StyledItem = styled.button(_templateObject3$d(), buttonStyles, function(para
     var selected = param.selected;
     return selected ? primary200 : 'transparent';
 });
-var StyledLink = styled.a(_templateObject4$b(), buttonStyles, function(param) {
+var StyledLink = styled.a(_templateObject4$c(), buttonStyles, function(param) {
     var selected = param.selected;
     return selected ? primary200$1 : 'transparent';
 }, function(param) {
@@ -24108,23 +24112,23 @@ function _templateObject3$c() {
     };
     return data;
 }
-function _templateObject4$a() {
+function _templateObject4$b() {
     var data = _tagged_template_literal$i([
         "\n  padding: 0.5rem 0.75rem;\n  color: ",
         ";\n  ",
         "\n\n  html.dark & {\n    color: ",
         ";\n  }\n"
     ]);
-    _templateObject4$a = function _templateObject() {
+    _templateObject4$b = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject5$5() {
+function _templateObject5$6() {
     var data = _tagged_template_literal$i([
         '\n  /* role="option" wrapper — visual state is delegated to inner MenuItem */\n'
     ]);
-    _templateObject5$5 = function _templateObject() {
+    _templateObject5$6 = function _templateObject() {
         return data;
     };
     return data;
@@ -24154,8 +24158,8 @@ var BaseInput$2 = styled.input(_templateObject1$f(), textPrimary$1, neutral500$1
 });
 var Chip$2 = styled.button(_templateObject2$f(), neutral100$1, $label200Medium, primary600$1, surfaceRaised, textPrimaryWhite, primary500);
 var RightIconWrapper = styled.div(_templateObject3$c(), neutral600$1, surfaceMuted);
-var EmptyState = styled.div(_templateObject4$a(), neutral500$1, $paragraph200Regular, surfaceMuted);
-var OptionWrapper = styled.div(_templateObject5$5());
+var EmptyState = styled.div(_templateObject4$b(), neutral500$1, $paragraph200Regular, surfaceMuted);
+var OptionWrapper = styled.div(_templateObject5$6());
 /**
  * AutoComplete: single-line input that filters a closed list of options as
  * the user types. Selected items render as removable chips. Multi-select.
@@ -24376,6 +24380,10 @@ var OptionWrapper = styled.div(_templateObject5$5());
                 "aria-activedescendant": open ? activeOptionId : undefined,
                 "aria-haspopup": "listbox",
                 "aria-label": ariaLabel,
+                // Analytics autocapture hooks (@paubox/tracking). The input is native, so
+                // field_interaction works out of the box; tag the component for clarity.
+                "data-pb-component": "AutoComplete",
+                "data-pb-name": ariaLabel || inputProps.name || undefined,
                 onChange: handleInputChange,
                 onFocus: function() {
                     return setIsFocused(true);
@@ -24870,24 +24878,24 @@ function _templateObject3$b() {
     };
     return data;
 }
-function _templateObject4$9() {
+function _templateObject4$a() {
     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$9 = function _templateObject() {
+    _templateObject4$a = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject5$4() {
+function _templateObject5$5() {
     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$4 = function _templateObject() {
+    _templateObject5$5 = function _templateObject() {
         return data;
     };
     return data;
@@ -24953,7 +24961,7 @@ var Chip$1 = styled.button(_templateObject3$b(), function(param) {
     var sz = param.sz;
     return sz === 'lg' ? $label100Medium : $label200Medium;
 });
-var ChipWrapper$1 = styled.div(_templateObject4$9(), neutral100$1, neutral300$1, function(param) {
+var ChipWrapper$1 = styled.div(_templateObject4$a(), neutral100$1, neutral300$1, function(param) {
     var sz = param.sz;
     return sz === 'lg' ? '0.5rem 0.563rem' : '0.375rem 0.563rem';
 });
@@ -24973,7 +24981,7 @@ var MultiSelectChip = function(option) {
     });
 };
 // Style for the Icons
-var IconWrapper$2 = styled.div(_templateObject5$4(), function(param) {
+var IconWrapper$2 = styled.div(_templateObject5$5(), function(param) {
     var open = param.open;
     return open ? 'rotate(180deg)' : 'rotate(0deg)';
 });
@@ -25017,6 +25025,10 @@ var MultiSelect = function(_param) {
                 return !prev;
             });
         },
+        // Analytics autocapture hooks (@paubox/tracking). The interactive node is
+        // this wrapper div (the inner <select> is inert), so identify it here.
+        "data-pb-component": "MultiSelect",
+        "data-pb-name": props['aria-label'] || props.name || label || undefined,
         children: [
             /*#__PURE__*/ jsxs(InputWrapper$2, {
                 children: [
@@ -25281,12 +25293,12 @@ function _templateObject3$a() {
     };
     return data;
 }
-function _templateObject4$8() {
+function _templateObject4$9() {
     var data = _tagged_template_literal$f([
         "\n  position: absolute;\n  right: 0.5rem;\n  opacity: 0.8;\n\n  ",
         "\n"
     ]);
-    _templateObject4$8 = function _templateObject() {
+    _templateObject4$9 = function _templateObject() {
         return data;
     };
     return data;
@@ -25308,7 +25320,7 @@ var Chip = styled.button(_templateObject2$c(), function(param) {
     return secondary ? neutral300$1 : neutral100$1;
 }, $label200Medium);
 var ChipWrapper = styled.div(_templateObject3$a());
-var ChipCounter = styled.p(_templateObject4$8(), function(param) {
+var ChipCounter = styled.p(_templateObject4$9(), function(param) {
     var sz = param.sz, type = param.type;
     return type === 'primary' ? sz === 'lg' ? $paragraph100Regular : $paragraph200Regular : sz === 'lg' ? $paragraph100Semibold : $paragraph200Semibold;
 });
@@ -25617,14 +25629,14 @@ function _templateObject3$9() {
     };
     return data;
 }
-function _templateObject4$7() {
+function _templateObject4$8() {
     var data = _tagged_template_literal$e([
         "\n  ",
         "\n  color: ",
         ";\n\n  html.dark & {\n    color: ",
         ";\n  }\n"
     ]);
-    _templateObject4$7 = function _templateObject() {
+    _templateObject4$8 = function _templateObject() {
         return data;
     };
     return data;
@@ -25677,7 +25689,7 @@ var IconWrapper$1 = styled.div(_templateObject3$9(), function(param) {
     var open = param.open;
     return open ? 'rotate(180deg)' : 'rotate(0deg)';
 }, neutral200$1);
-var SelectOption = styled.option(_templateObject4$7(), $paragraph100Semibold, textPrimary$1, neutral200$1);
+var SelectOption = styled.option(_templateObject4$8(), $paragraph100Semibold, textPrimary$1, neutral200$1);
 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, fullWidth = _param.fullWidth, props = _object_without_properties$b(_param, [
         "sz",
@@ -25722,6 +25734,10 @@ var Select = function(_param) {
                 return !prev;
             });
         },
+        // Analytics autocapture hooks (@paubox/tracking). The interactive node is
+        // this wrapper div (the inner <select> is inert), so identify it here.
+        "data-pb-component": "Select",
+        "data-pb-name": props['aria-label'] || props.name || undefined,
         children: [
             /*#__PURE__*/ jsxs(InputWrapper, {
                 children: [
@@ -29835,12 +29851,12 @@ function _templateObject3$8() {
     };
     return data;
 }
-function _templateObject4$6() {
+function _templateObject4$7() {
     var data = _tagged_template_literal$a([
         "\n  display: flex;\n  justify-content: end;\n  gap: ",
         "px;\n"
     ]);
-    _templateObject4$6 = function _templateObject() {
+    _templateObject4$7 = function _templateObject() {
         return data;
     };
     return data;
@@ -29849,7 +29865,7 @@ var StyledModal = styled(Modal$1)(_templateObject$a());
 var ModalContent = styled.div(_templateObject1$9(), spacing(2), spacing(1), spacing(3), elevation400, surfacePrimary);
 var ModalHeader = styled.div(_templateObject2$9());
 var ModalBody = styled.div(_templateObject3$8());
-var ModalFooter = styled.div(_templateObject4$6(), spacing(1));
+var ModalFooter = styled.div(_templateObject4$7(), 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, {
@@ -30000,20 +30016,42 @@ function _templateObject2$8() {
 }
 function _templateObject3$7() {
     var data = _tagged_template_literal$9([
-        "\n  width: 45px;\n  text-align: center;\n  padding-top: 0.3rem;\n  padding-bottom: 0.3rem;\n  line-height: 1rem;\n"
+        "\n  display: flex;\n  align-items: center;\n  gap: ",
+        "px;\n"
     ]);
     _templateObject3$7 = function _templateObject() {
         return data;
     };
     return data;
 }
+function _templateObject4$6() {
+    var data = _tagged_template_literal$9([
+        "\n  width: 45px;\n  text-align: center;\n  padding-top: 0.3rem;\n  padding-bottom: 0.3rem;\n  line-height: 1rem;\n"
+    ]);
+    _templateObject4$6 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+var DEFAULT_PAGE_SIZE_OPTIONS = [
+    50,
+    100,
+    150
+];
 var PaginationContainer = styled.div(_templateObject$9(), spacing(2));
 var PageControls = styled.div(_templateObject1$8(), spacing(1));
 var PageInputWrapper = styled.div(_templateObject2$8(), spacing(0.5));
-var PageInput = styled(Input)(_templateObject3$7());
+var PageSizeWrapper = styled.div(_templateObject3$7(), spacing(1));
+var PageInput = styled(Input)(_templateObject4$6());
 var Pagination = function(param) {
-    var mode = param.mode, pageInfo = param.pageInfo, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading; param.onPageSizeChange; var subText = param.subText, onPageChange = param.onPageChange, _param_testId = param.testId, testId = _param_testId === void 0 ? 'pagination' : _param_testId;
+    var mode = param.mode, pageInfo = param.pageInfo, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, onPageSizeChange = param.onPageSizeChange, _param_pageSizeOptions = param.pageSizeOptions, pageSizeOptions = _param_pageSizeOptions === void 0 ? DEFAULT_PAGE_SIZE_OPTIONS : _param_pageSizeOptions, subText = param.subText, onPageChange = param.onPageChange, _param_testId = param.testId, testId = _param_testId === void 0 ? 'pagination' : _param_testId;
     var _useState = _sliced_to_array$5(useState(''), 2), pageInputValue = _useState[0], setPageInputValue = _useState[1];
+    var sizeOptions = pageSizeOptions.map(function(size) {
+        return {
+            value: String(size),
+            label: String(size)
+        };
+    });
     var formatNumber = function(num) {
         return num.toLocaleString('en-US');
     };
@@ -30060,6 +30098,26 @@ var Pagination = function(param) {
             }),
             /*#__PURE__*/ jsxs(PageControls, {
                 children: [
+                    /*#__PURE__*/ jsxs(PageSizeWrapper, {
+                        children: [
+                            /*#__PURE__*/ jsx(Typography, {
+                                variant: "paragraph300Regular",
+                                as: "span",
+                                children: "Rows per page"
+                            }),
+                            /*#__PURE__*/ jsx(Select, {
+                                "aria-label": "Rows per page",
+                                sz: "sm",
+                                value: String(pageInfo.pageSize),
+                                setValue: function(value) {
+                                    return value && onPageSizeChange(Number(value));
+                                },
+                                options: sizeOptions,
+                                disabled: isLoading,
+                                "data-testid": "".concat(testId, "-page-size-select")
+                            })
+                        ]
+                    }),
                     mode === 'page' && /*#__PURE__*/ jsxs(Fragment, {
                         children: [
                             /*#__PURE__*/ jsx(Typography, {
@@ -30879,11 +30937,11 @@ function _templateObject4$5() {
     };
     return data;
 }
-function _templateObject5$3() {
+function _templateObject5$4() {
     var data = _tagged_template_literal$6([
         "\n  width: 100%;\n  max-height: 420px;\n  overflow-y: auto;\n"
     ]);
-    _templateObject5$3 = function _templateObject() {
+    _templateObject5$4 = function _templateObject() {
         return data;
     };
     return data;
@@ -30982,7 +31040,7 @@ var ClearButton = styled(IconButton)(_templateObject3$5(), spacing(1));
  * Inner content of the dropdown. Popper provides the outer container
  * (positioning, portal, elevation, dark-mode background). We just lay out
  * the rows full-width inside it, with our own max-height + scroll behavior.
- */ var DropdownContent = styled.div(_templateObject5$3());
+ */ var DropdownContent = styled.div(_templateObject5$4());
 var DropdownRow = styled.button(_templateObject6$1(), spacing(1), spacing(1), spacing(2), function(param) {
     var highlighted = param.highlighted;
     return highlighted ? neutral100$1 : 'transparent';
@@ -32003,13 +32061,13 @@ function _templateObject4$4() {
     };
     return data;
 }
-function _templateObject5$2() {
+function _templateObject5$3() {
     var data = _tagged_template_literal$5([
         "\n  color: ",
         ";\n  font-size: 12px;\n  line-height: 1.2;\n  font-family: 'Roboto', sans-serif;\n\n  html.dark & {\n    color: ",
         ";\n  }\n"
     ]);
-    _templateObject5$2 = function _templateObject() {
+    _templateObject5$3 = function _templateObject() {
         return data;
     };
     return data;
@@ -32039,7 +32097,7 @@ var IconBadge = styled.div(_templateObject1$5(), function(param) {
 var TextBlock = styled.div(_templateObject2$5());
 var Label = styled.div(_templateObject3$4(), neutral500$1, neutral400$1);
 var Value = styled.div(_templateObject4$4(), neutral900$1, neutral100$1);
-var Caption = styled.div(_templateObject5$2(), neutral400$1, neutral500$1);
+var Caption = styled.div(_templateObject5$3(), neutral400$1, neutral500$1);
 var StatCard = function(param) {
     var label = param.label, value = param.value, icon = param.icon, _param_variant = param.variant, variant = _param_variant === void 0 ? 'blue' : _param_variant, className = param.className, caption = param.caption;
     var _variantMap_variant = variantMap[variant], bg = _variantMap_variant.bg, color = _variantMap_variant.color;
@@ -36135,12 +36193,12 @@ function _templateObject4$3() {
     };
     return data;
 }
-function _templateObject5$1() {
+function _templateObject5$2() {
     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$1 = function _templateObject() {
+    _templateObject5$2 = function _templateObject() {
         return data;
     };
     return data;
@@ -36150,7 +36208,7 @@ var Th = styled(Typography)(_templateObject1$4(), spacing(1), neutral100$1, neut
 var HeaderContent = styled.div(_templateObject2$4());
 var ResizeHandleContainer = styled.div(_templateObject3$3());
 var ResizeHandle = styled.div(_templateObject4$3(), neutral300$1);
-var SortIcon = styled.span(_templateObject5$1(), spacing(1));
+var SortIcon = styled.span(_templateObject5$2(), 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, {
@@ -36281,11 +36339,11 @@ function _templateObject4$2() {
     };
     return data;
 }
-function _templateObject5() {
+function _templateObject5$1() {
     var data = _tagged_template_literal$3([
         "\n        white-space: normal;\n      "
     ]);
-    _templateObject5 = function _templateObject() {
+    _templateObject5$1 = function _templateObject() {
         return data;
     };
     return data;
@@ -36339,7 +36397,7 @@ var Td = styled(Typography)(_templateObject7(), neutral300$1, function(props) {
     }
     if (overflow === 'clamp') {
         // For clamp, don't apply display styles to td - content wrapper will handle it
-        return css(_templateObject5());
+        return css(_templateObject5$1());
     }
     // Default: truncate
     return css(_templateObject6());
@@ -36601,8 +36659,8 @@ function _templateObject2$2() {
 }
 function _templateObject3$1() {
     var data = _tagged_template_literal$2([
-        "\n  display: flex;\n  flex-wrap: wrap;\n  gap: ",
-        "px;\n  align-items: center;\n"
+        "\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  padding: ",
+        "px 0 0 0;\n\n  @media (max-width: 768px) {\n    justify-content: stretch;\n  }\n"
     ]);
     _templateObject3$1 = function _templateObject() {
         return data;
@@ -36610,11 +36668,21 @@ function _templateObject3$1() {
     return data;
 }
 function _templateObject4$1() {
+    var data = _tagged_template_literal$2([
+        "\n  display: flex;\n  flex-wrap: wrap;\n  gap: ",
+        "px;\n  align-items: center;\n"
+    ]);
+    _templateObject4$1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
     var data = _tagged_template_literal$2([
         "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* The kebab icon is 1em (20px here) — already equal to a cell's text\n     line-height (paragraph200Regular = 20px). The BaseButton's border (2px) and\n     vertical padding (8px) were the only things making rows with a context menu\n     ~10px taller than rows without one. Drop both so the trigger occupies exactly\n     one text line and row height matches a table with no context column. Keep the\n     horizontal padding for a comfortable hit area. */\n  padding: 0 ",
         "px;\n  border: none;\n  background: none;\n  font-size: 20px;\n"
     ]);
-    _templateObject4$1 = function _templateObject() {
+    _templateObject5 = function _templateObject() {
         return data;
     };
     return data;
@@ -36626,10 +36694,11 @@ var TableContainer = styled(/*#__PURE__*/ forwardRef(function(props, ref) {
 }))(_templateObject$2(), neutral300$1, spacing(1), surfaceRaised);
 var TableWrapper = styled.table(_templateObject1$2());
 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 BottomBar = styled.div(_templateObject3$1(), spacing(2));
+var TopBarElement = styled.div(_templateObject4$1(), spacing(1));
+var ContextMenuButton = styled(Button)(_templateObject5(), 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, toolbar = param.toolbar;
+    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, pageSizeOptions = param.pageSizeOptions, 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];
@@ -36813,6 +36882,36 @@ var Table = function(param) {
         onColumnSizingChange: setColumnSizing,
         columnResizeMode: 'onChange'
     });
+    var renderPagination = function() {
+        if (!hasPaginationHandlers || !pageInfo) return null;
+        var sharedProps = {
+            subText: subText,
+            isLoading: isLoading,
+            pageSizeOptions: pageSizeOptions,
+            onPageSizeChange: function(size) {
+                resetContainerScroll();
+                onPageSizeChange(size);
+            },
+            testId: "".concat(testId, "-pagination")
+        };
+        return paginationMode === 'page' && 'currentPage' in pageInfo ? /*#__PURE__*/ jsx(Pagination, _object_spread_props$2(_object_spread$2({
+            mode: "page",
+            pageInfo: pageInfo
+        }, sharedProps), {
+            onPageChange: function(page) {
+                resetContainerScroll();
+                onPageChange(page);
+            }
+        })) : /*#__PURE__*/ jsx(Pagination, _object_spread_props$2(_object_spread$2({
+            mode: "cursor",
+            pageInfo: pageInfo
+        }, sharedProps), {
+            onPageChange: function(page) {
+                resetContainerScroll();
+                onPageChange(page);
+            }
+        }));
+    };
     var showTopBar = hasPaginationHandlers || toolbar;
     return /*#__PURE__*/ jsxs("div", {
         children: [
@@ -36831,35 +36930,7 @@ var Table = function(param) {
                         style: {
                             marginLeft: 'auto'
                         },
-                        children: 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")
-                        })
+                        children: renderPagination()
                     })
                 ]
             }),
@@ -36923,6 +36994,9 @@ var Table = function(param) {
                     isLoading && /*#__PURE__*/ jsx(LoadingOverlay, {})
                 ]
             }),
+            hasPaginationHandlers && pageInfo && /*#__PURE__*/ jsx(BottomBar, {
+                children: renderPagination()
+            }),
             /*#__PURE__*/ jsx(RowContextMenu, {
                 anchorRef: ctxMenuAnchorRef,
                 actions: contextMenuActions,
@@ -37318,4 +37392,4 @@ var Tooltip = function(_param) {
     });
 };
 
-export { Add, AlertBar, AutoComplete, BaseInput$1 as BaseInput, BaseTextArea, Button, Calendar, CalendarIcon$1 as CalendarIcon, Cancel, Checkbox, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Close, DEFAULT_SPACING, DatePicker, Delete, DropdownMenu, Edit, Error$1 as Error, FilterForm, FilterList, IconButton, IconWrapper$3 as IconWrapper, Info, Input, InputWrapper$3 as InputWrapper, LoadingWheel, LockClosed, LockOpen, MenuItem, Modal, MoreVertical, MultiInput, MultiSelect, OpenInNew, Pagination, PauboxUIThemeProvider, Popper, RadioButton, RadioGroup, Return, SearchBar, SearchIcon, SearchOmnibox, Select, StatCard, Success, Table, TableContainer, TableWrapper, TextArea, Toggle, Tooltip, Typography, Warning, Wrapper, baseTypography, colors, darkColors, elevation, spacing, typography, useTheme };
+export { Add, AlertBar, AutoComplete, BaseInput$1 as BaseInput, BaseTextArea, Button, Calendar, CalendarIcon$1 as CalendarIcon, Cancel, Checkbox, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Close, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_SPACING, DatePicker, Delete, DropdownMenu, Edit, Error$1 as Error, FilterForm, FilterList, IconButton, IconWrapper$3 as IconWrapper, Info, Input, InputWrapper$3 as InputWrapper, LoadingWheel, LockClosed, LockOpen, MenuItem, Modal, MoreVertical, MultiInput, MultiSelect, OpenInNew, Pagination, PauboxUIThemeProvider, Popper, RadioButton, RadioGroup, Return, SearchBar, SearchIcon, SearchOmnibox, Select, StatCard, Success, Table, TableContainer, TableWrapper, TextArea, Toggle, Tooltip, Typography, Warning, Wrapper, baseTypography, colors, darkColors, elevation, spacing, typography, useTheme };

package/package.json

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

package/src/lib/Pagination/Pagination.d.ts

@@ -1,3 +1,4 @@
+export declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
 export interface PageInfoPageBased {
     currentPage: number;
     pageSize: number;
@@ -16,6 +17,7 @@ interface BasePaginationProps {
     isLoading: boolean;
     subText?: string;
     onPageSizeChange: (size: number) => void;
+    pageSizeOptions?: number[];
     testId?: string;
 }
 interface PagePaginationProps extends BasePaginationProps {
@@ -29,5 +31,5 @@ interface CursorPaginationProps extends BasePaginationProps {
     onPageChange: (page: 'next' | 'prev') => void;
 }
 export type PaginationProps = PagePaginationProps | CursorPaginationProps;
-export declare const Pagination: ({ mode, pageInfo, isLoading, onPageSizeChange, subText, onPageChange, testId, }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Pagination: ({ mode, pageInfo, isLoading, onPageSizeChange, pageSizeOptions, subText, onPageChange, testId, }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

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

@@ -48,6 +48,7 @@ interface PaginationProps {
     pageInfo?: PageInfoPageBased | PageInfoCursorBased;
     subText?: string;
     onPageSizeChange?: (size: number) => void;
+    pageSizeOptions?: number[];
     onPageChange?: (page: number | 'next' | 'prev') => void;
 }
 interface TableDataProps<T> {
@@ -64,5 +65,5 @@ interface TableDataProps<T> {
 }
 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, toolbar, }: TableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Table: <T extends object>({ columns, data, getRowId, isLoading, paginationMode, pageInfo, subText, onPageSizeChange, pageSizeOptions, 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 {};