@paubox/ui 0.8.3 → 0.8.4

package/index.esm.js

@@ -1663,7 +1663,7 @@ function _templateObject5$3() {
     };
     return data;
 }
-function _templateObject6$3() {
+function _templateObject6$2() {
     var data = _tagged_template_literal$o([
         "\n  ",
         "\n  font-size: ",
@@ -1671,7 +1671,7 @@ function _templateObject6$3() {
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 600;\n"
     ]);
-    _templateObject6$3 = function _templateObject() {
+    _templateObject6$2 = function _templateObject() {
         return data;
     };
     return data;
@@ -1930,7 +1930,7 @@ var $headline100Semibold = css(_templateObject2$a(), commonStyles, headline100Fo
 var $headline200Regular = css(_templateObject3$7(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
 var $headline200Semibold = css(_templateObject4$5(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
 var $headline300Regular = css(_templateObject5$3(), 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);
+var $headline300Semibold = css(_templateObject6$2(), 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 $paragraph100Semibold = css(_templateObject8$1(), commonStyles, paragraph100FontSize / BASE_FONT_SIZE, paragraph100LineHeight / BASE_FONT_SIZE, paragraph100LetterSpacing);
@@ -2100,12 +2100,12 @@ function _templateObject5$2() {
     };
     return data;
 }
-function _templateObject6$2() {
+function _templateObject6$1() {
     var data = _tagged_template_literal$n([
         "\n      background-color: ",
         ";\n    "
     ]);
-    _templateObject6$2 = function _templateObject() {
+    _templateObject6$1 = function _templateObject() {
         return data;
     };
     return data;
@@ -2154,7 +2154,7 @@ var AlertBar = function(props) {
         info: css(_templateObject3$6(), primary100),
         warning: css(_templateObject4$4(), warning100),
         error: css(_templateObject5$2(), danger100),
-        success: css(_templateObject6$2(), success100)
+        success: css(_templateObject6$1(), success100)
     };
     var iconStyles = css(_templateObject7(), type === 'info' ? "".concat(primary700) : type === 'error' ? "".concat(danger700) : type === 'success' ? "".concat(success700) : "".concat(warning700));
     var textWrapperStyles = css(_templateObject8());
@@ -22539,15 +22539,16 @@ var IconButton = /*#__PURE__*/ forwardRef(function(_param, ref) {
     ]);
     return /*#__PURE__*/ jsx(BaseButton, _object_spread_props$f(_object_spread$j({
         style: _object_spread$j({
-            width: size === 'large' ? 40 : 32,
-            height: size === 'large' ? 40 : 32,
+            width: size === 'large' ? 40 : size === 'small' ? 32 : 26,
+            height: size === 'large' ? 40 : size === 'small' ? 32 : 26,
             padding: 0,
-            fontSize: fontSize || 16,
             borderRadius: circular ? '50%' : undefined
         }, style),
         ref: ref
     }, props), {
-        children: /*#__PURE__*/ jsx(Icon, {})
+        children: /*#__PURE__*/ jsx(Icon, {
+            fontSize: fontSize ? "".concat(fontSize, "px") : '16px'
+        })
     }));
 });
 
@@ -22703,9 +22704,10 @@ var IconWrapper$2 = styled.span(_templateObject2$6(), function(param) {
     return position === 'right' ? '0.5rem' : 'auto';
 });
 var Input = function(_param) {
-    var LeftIcon = _param.leftIcon, RightIcon = _param.rightIcon, _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, style = _param.style, props = _object_without_properties$b(_param, [
+    var LeftIcon = _param.leftIcon, RightIcon = _param.rightIcon, _param_clearable = _param.clearable, clearable = _param_clearable === void 0 ? false : _param_clearable, _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, style = _param.style, props = _object_without_properties$b(_param, [
         "leftIcon",
         "rightIcon",
+        "clearable",
         "sz",
         "error",
         "style"
@@ -22724,6 +22726,25 @@ var Input = function(_param) {
                     paddingRight: RightIcon ? '2.063rem' : '0.563rem'
                 }, style)
             })),
+            clearable && props.value && /*#__PURE__*/ jsx(IconButton, {
+                onClick: function() {
+                    var _props_onChange;
+                    return props === null || props === void 0 ? void 0 : (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, {
+                        target: {
+                            value: ''
+                        }
+                    });
+                },
+                icon: Close,
+                circular: true,
+                size: sz === 'lg' ? 'small' : 'xsmall',
+                fontSize: sz === 'lg' ? 16 : 12,
+                style: {
+                    position: 'absolute',
+                    right: RightIcon ? '2rem' : '0.5rem'
+                },
+                color: "secondary"
+            }),
             RightIcon && /*#__PURE__*/ jsx(IconWrapper$2, {
                 position: "right",
                 children: /*#__PURE__*/ jsx(RightIcon, {})
@@ -22940,13 +22961,13 @@ function _templateObject5$1() {
     };
     return data;
 }
-function _templateObject6$1() {
+function _templateObject6() {
     var data = _tagged_template_literal$d([
         "\n  ",
         "\n  color: ",
         "/80;\n"
     ]);
-    _templateObject6$1 = function _templateObject() {
+    _templateObject6 = function _templateObject() {
         return data;
     };
     return data;
@@ -22998,7 +23019,7 @@ var MultiSelectChip = function(option) {
 };
 // Style for the Icons
 var IconWrapper$1 = styled.span(_templateObject5$1());
-var PlaceholderOption = styled.option(_templateObject6$1(), $paragraph100Semibold, textSecondary);
+var PlaceholderOption = styled.option(_templateObject6(), $paragraph100Semibold, textSecondary);
 var MultiSelect = function(_param) {
     var _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz; _param.error; var _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options; _param.checkbox; var placeholder = _param.placeholder, initialValue = _param.initialValue, _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, props = _object_without_properties$a(_param, [
         "sz",
@@ -23214,22 +23235,23 @@ var Loader = function() {
     });
 };
 var Search = function(_param) {
-    var loading = _param.loading, setLoading = _param.setLoading, setSearchValue = _param.setSearchValue, _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz, props = _object_without_properties$9(_param, [
+    var loading = _param.loading, setLoading = _param.setLoading, setSearchValue = _param.setSearchValue, _param_clearable = _param.clearable, clearable = _param_clearable === void 0 ? false : _param_clearable, _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz, props = _object_without_properties$9(_param, [
         "loading",
         "setLoading",
         "setSearchValue",
+        "clearable",
         "sz"
     ]);
     var _useState = _sliced_to_array$6(useState(''), 2), value = _useState[0], setValue = _useState[1];
     var debounceDelay = 1200;
     var handleChange = function(e) {
-        setLoading(true);
+        setLoading === null || setLoading === void 0 ? void 0 : setLoading(true);
         setValue(e.target.value);
     };
     useEffect(function() {
         // Set a timeout for the debounce
         var handler = setTimeout(function() {
-            setLoading(false);
+            setLoading === null || setLoading === void 0 ? void 0 : setLoading(false);
             setSearchValue(value);
         }, debounceDelay);
         return function() {
@@ -23242,6 +23264,7 @@ var Search = function(_param) {
     ]);
     return /*#__PURE__*/ jsx(Input, _object_spread$g({
         value: value,
+        clearable: clearable,
         leftIcon: SearchIcon,
         rightIcon: loading ? Loader : undefined,
         onChange: handleChange,
@@ -31573,7 +31596,7 @@ function _tagged_template_literal$4(strings, raw) {
 }
 function _templateObject$4() {
     var data = _tagged_template_literal$4([
-        "\n  width: 100%;\n  table-layout: fixed;\n  border-collapse: separate;\n  border-spacing: 0;\n"
+        "\n  position: sticky;\n  top: 0;\n  z-index: 1;\n"
     ]);
     _templateObject$4 = function _templateObject() {
         return data;
@@ -31581,135 +31604,110 @@ function _templateObject$4() {
     return data;
 }
 function _templateObject1$4() {
-    var data = _tagged_template_literal$4([
-        "\n  position: sticky;\n  top: 0;\n  z-index: 1;\n"
-    ]);
-    _templateObject1$4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2$2() {
     var data = _tagged_template_literal$4([
         "\n  padding: ",
         "px;\n  text-align: left;\n  position: relative;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background: ",
         ";\n  border-bottom: 1px solid ",
         ";\n\n  &:hover .pbui-table-resize-handle {\n    height: 100%;\n  }\n"
     ]);
-    _templateObject2$2 = function _templateObject() {
+    _templateObject1$4 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject3$1() {
+function _templateObject2$2() {
     var data = _tagged_template_literal$4([
         "\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"
     ]);
-    _templateObject3$1 = function _templateObject() {
+    _templateObject2$2 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject4() {
+function _templateObject3$1() {
     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"
     ]);
-    _templateObject4 = function _templateObject() {
+    _templateObject3$1 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject5() {
+function _templateObject4() {
     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"
     ]);
-    _templateObject5 = function _templateObject() {
+    _templateObject4 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject6() {
+function _templateObject5() {
     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"
     ]);
-    _templateObject6 = function _templateObject() {
+    _templateObject5 = function _templateObject() {
         return data;
     };
     return data;
 }
-var StyledTable$1 = styled.table(_templateObject$4());
-var StyledHeader = styled.div(_templateObject1$4());
-var Th = styled(Typography)(_templateObject2$2(), spacing(1), neutral100, neutral300);
-var HeaderContent = styled.div(_templateObject3$1());
-var ResizeHandleContainer = styled.div(_templateObject4());
-var ResizeHandle = styled.div(_templateObject5(), neutral300);
-var SortIcon = styled.span(_templateObject6(), spacing(1));
+var StyledHeader = styled.thead(_templateObject$4());
+var Th = styled(Typography)(_templateObject1$4(), spacing(1), neutral100, neutral300);
+var HeaderContent = styled.div(_templateObject2$2());
+var ResizeHandleContainer = styled.div(_templateObject3$1());
+var ResizeHandle = styled.div(_templateObject4(), neutral300);
+var SortIcon = styled.span(_templateObject5(), spacing(1));
 var TableHeader = function(param) {
-    var table = param.table, columnWidths = param.columnWidths, disableControls = param.disableControls, dense = param.dense;
+    var table = param.table, disableControls = param.disableControls, dense = param.dense;
     return /*#__PURE__*/ jsx(StyledHeader, {
-        children: /*#__PURE__*/ jsxs(StyledTable$1, {
-            children: [
-                /*#__PURE__*/ jsx("colgroup", {
-                    children: columnWidths.map(function(param) {
-                        var id = param.id, width = param.width;
-                        return /*#__PURE__*/ jsx("col", {
-                            style: {
-                                width: "".concat(width, "px")
-                            }
-                        }, id);
-                    })
-                }),
-                /*#__PURE__*/ jsx("thead", {
-                    children: table.getHeaderGroups().map(function(headerGroup) {
-                        return /*#__PURE__*/ jsx("tr", {
-                            children: headerGroup.headers.map(function(header) {
-                                return /*#__PURE__*/ jsxs(Th, {
-                                    variant: "paragraph200Semibold",
-                                    as: "th",
-                                    style: {
-                                        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: [
-                                        header.isPlaceholder ? null : /*#__PURE__*/ jsxs(HeaderContent, {
-                                            role: header.column.getCanSort() ? 'button' : undefined,
-                                            onClick: !disableControls ? header.column.getToggleSortingHandler() : undefined,
-                                            style: {
-                                                cursor: header.column.getCanSort() ? 'pointer' : 'default'
-                                            },
-                                            children: [
-                                                flexRender(header.column.columnDef.header, header.getContext()),
-                                                header.column.getCanSort() && /*#__PURE__*/ jsxs(SortIcon, {
-                                                    children: [
-                                                        /*#__PURE__*/ jsx(ChevronUp, {
-                                                            color: header.column.getIsSorted() === 'desc' ? neutral400 : undefined
-                                                        }),
-                                                        /*#__PURE__*/ jsx(ChevronDown, {
-                                                            color: header.column.getIsSorted() === 'asc' ? neutral400 : undefined
-                                                        })
-                                                    ]
-                                                })
-                                            ]
-                                        }),
-                                        header.column.getCanResize() && /*#__PURE__*/ jsx(ResizeHandleContainer, {
-                                            children: /*#__PURE__*/ jsx(ResizeHandle, {
-                                                onMouseDown: header.getResizeHandler(),
-                                                onTouchStart: header.getResizeHandler(),
-                                                className: "pbui-table-resize-handle",
-                                                onClick: function(e) {
-                                                    e.stopPropagation();
-                                                    e.preventDefault();
-                                                }
+        children: table.getHeaderGroups().map(function(headerGroup) {
+            return /*#__PURE__*/ jsx("tr", {
+                children: headerGroup.headers.map(function(header) {
+                    return /*#__PURE__*/ jsxs(Th, {
+                        variant: "paragraph200Semibold",
+                        as: "th",
+                        style: {
+                            width: "".concat(header.column.getSize(), "px"),
+                            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: [
+                            header.isPlaceholder ? null : /*#__PURE__*/ jsxs(HeaderContent, {
+                                role: header.column.getCanSort() ? 'button' : undefined,
+                                onClick: !disableControls ? header.column.getToggleSortingHandler() : undefined,
+                                style: {
+                                    cursor: header.column.getCanSort() ? 'pointer' : 'default'
+                                },
+                                children: [
+                                    flexRender(header.column.columnDef.header, header.getContext()),
+                                    header.column.getCanSort() && /*#__PURE__*/ jsxs(SortIcon, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(ChevronUp, {
+                                                color: header.column.getIsSorted() === 'desc' ? neutral400 : undefined
+                                            }),
+                                            /*#__PURE__*/ jsx(ChevronDown, {
+                                                color: header.column.getIsSorted() === 'asc' ? neutral400 : undefined
                                             })
-                                        })
-                                    ]
-                                }, header.id);
+                                        ]
+                                    })
+                                ]
+                            }),
+                            header.column.getCanResize() && /*#__PURE__*/ jsx(ResizeHandleContainer, {
+                                children: /*#__PURE__*/ jsx(ResizeHandle, {
+                                    onMouseDown: header.getResizeHandler(),
+                                    onTouchStart: header.getResizeHandler(),
+                                    className: "pbui-table-resize-handle",
+                                    onClick: function(e) {
+                                        e.stopPropagation();
+                                        e.preventDefault();
+                                    }
+                                })
                             })
-                        }, headerGroup.id);
-                    })
+                        ]
+                    }, header.id);
                 })
-            ]
+            }, headerGroup.id);
         })
     });
 };
@@ -31726,7 +31724,7 @@ function _tagged_template_literal$3(strings, raw) {
 }
 function _templateObject$3() {
     var data = _tagged_template_literal$3([
-        "\n  width: 100%;\n  table-layout: fixed;\n  border-collapse: separate;\n  border-spacing: 0;\n"
+        "\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n"
     ]);
     _templateObject$3 = function _templateObject() {
         return data;
@@ -31763,50 +31761,45 @@ function _templateObject3() {
     };
     return data;
 }
-var StyledTable = styled.table(_templateObject$3());
+var StyledTableBody = styled.tbody(_templateObject$3());
 var Tr = styled.tr(_templateObject2$1(), function(props) {
     return props.enableHover && css(_templateObject1$3(), primary100);
 });
 var Td = styled(Typography)(_templateObject3(), neutral300);
 var TableBody = function(param) {
     var table = param.table, columnWidths = param.columnWidths, enableRowSelection = param.enableRowSelection, onRowClick = param.onRowClick, dense = param.dense;
-    return /*#__PURE__*/ jsxs(StyledTable, {
+    return /*#__PURE__*/ jsxs(StyledTableBody, {
         children: [
             /*#__PURE__*/ jsx("colgroup", {
                 children: columnWidths.map(function(param) {
-                    var id = param.id, width = param.width;
-                    return /*#__PURE__*/ jsx("col", {
-                        style: {
-                            width: "".concat(width, "px")
-                        }
-                    }, id);
+                    var id = param.id; param.width;
+                    return /*#__PURE__*/ jsx("col", {}, id);
                 })
             }),
-            /*#__PURE__*/ jsx("tbody", {
-                children: table.getRowModel().rows.map(function(row) {
-                    var rowClickEnabled = enableRowSelection || !!onRowClick;
-                    return /*#__PURE__*/ jsx(Tr, {
-                        role: rowClickEnabled ? 'button' : undefined,
-                        onClick: onRowClick ? function() {
-                            return onRowClick(row.original);
-                        } : row.getToggleSelectedHandler(),
-                        style: {
-                            cursor: rowClickEnabled ? 'pointer' : undefined,
-                            background: row.getIsSelected() ? primary100 : undefined
-                        },
-                        enableHover: rowClickEnabled,
-                        children: row.getVisibleCells().map(function(cell) {
-                            return /*#__PURE__*/ jsx(Td, {
-                                variant: "paragraph200Regular",
-                                as: "td",
-                                style: {
-                                    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())
-                            }, cell.id);
-                        })
-                    }, row.id);
-                })
+            table.getRowModel().rows.map(function(row) {
+                var rowClickEnabled = enableRowSelection || !!onRowClick;
+                return /*#__PURE__*/ jsx(Tr, {
+                    role: rowClickEnabled ? 'button' : undefined,
+                    onClick: onRowClick ? function() {
+                        return onRowClick(row.original);
+                    } : row.getToggleSelectedHandler(),
+                    style: {
+                        cursor: rowClickEnabled ? 'pointer' : undefined,
+                        background: row.getIsSelected() ? primary100 : undefined
+                    },
+                    enableHover: rowClickEnabled,
+                    children: row.getVisibleCells().map(function(cell) {
+                        return /*#__PURE__*/ jsx(Td, {
+                            variant: "paragraph200Regular",
+                            as: "td",
+                            style: {
+                                width: "".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())
+                        }, cell.id);
+                    })
+                }, row.id);
             })
         ]
     });
@@ -31994,7 +31987,7 @@ function _templateObject$1() {
     var data = _tagged_template_literal$1([
         "\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-height: 400px;\n  z-index: 1;\n  border: 1px solid ",
         ";\n  border-radius: ",
-        "px;\n  overflow: hidden;\n"
+        "px;\n  overflow: scroll;\n"
     ]);
     _templateObject$1 = function _templateObject() {
         return data;
@@ -32003,7 +31996,7 @@ function _templateObject$1() {
 }
 function _templateObject1$1() {
     var data = _tagged_template_literal$1([
-        "\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow-x: auto;\n"
+        "\n  position: relative;\n  border-collapse: collapse;\n  flex: 1;\n  table-layout: fixed;\n  min-height: 0;\n  width: 100%;\n  overflow-x: auto;\n"
     ]);
     _templateObject1$1 = function _templateObject() {
         return data;
@@ -32011,7 +32004,7 @@ function _templateObject1$1() {
     return data;
 }
 var TableContainer = styled.div(_templateObject$1(), neutral300, spacing(1));
-var TableWrapper = styled.div(_templateObject1$1());
+var TableWrapper = styled.table(_templateObject1$1());
 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_pageInfo = param.pageInfo, pageInfo = _param_pageInfo === void 0 ? {
         pageCount: 1,
@@ -32039,9 +32032,11 @@ var Table = function(param) {
         if (enableRowSelection) {
             cols.unshift({
                 id: 'row-select',
+                size: 30,
                 header: function(param) {
                     var table = param.table;
                     return /*#__PURE__*/ jsx(Checkbox, {
+                        width: 'min-content',
                         checked: table.getIsAllRowsSelected(),
                         indeterminate: table.getIsSomeRowsSelected(),
                         onChange: table.getToggleAllPageRowsSelectedHandler(),
@@ -32050,23 +32045,16 @@ var Table = function(param) {
                 },
                 cell: function(param) {
                     var row = param.row;
-                    return /*#__PURE__*/ jsx("div", {
-                        style: {
-                            display: 'flex'
+                    return /*#__PURE__*/ jsx(Checkbox, {
+                        width: 'min-content',
+                        checked: row.getIsSelected(),
+                        disabled: disableControls || !row.getCanSelect(),
+                        onClick: function(e) {
+                            return e.stopPropagation();
                         },
-                        children: /*#__PURE__*/ jsx(Checkbox, {
-                            checked: row.getIsSelected(),
-                            disabled: disableControls || !row.getCanSelect(),
-                            onClick: function(e) {
-                                return e.stopPropagation();
-                            },
-                            onChange: row.getToggleSelectedHandler()
-                        })
+                        onChange: row.getToggleSelectedHandler()
                     });
                 },
-                size: 40,
-                minSize: 40,
-                maxSize: 40,
                 enableResizing: false
             });
         }
@@ -32083,9 +32071,7 @@ var Table = function(param) {
                         contextMenuActions: contextMenuActions
                     });
                 },
-                size: 50,
-                minSize: 50,
-                maxSize: 50,
+                size: 20,
                 enableResizing: false
             });
         }
@@ -32118,9 +32104,9 @@ var Table = function(param) {
         columns: allColumns,
         getRowId: getRowId,
         defaultColumn: {
-            minSize: 80,
+            minSize: 20,
             maxSize: 1000,
-            size: 150
+            size: 20
         },
         state: {
             pagination: {

package/package.json

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

package/src/lib/Button/BaseButton.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties, MouseEventHandler } from 'react';
 export interface BaseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     color?: 'primary' | 'secondary' | 'danger';
     disabled?: boolean;
-    size?: 'large' | 'small';
+    size?: 'large' | 'small' | 'xsmall';
     round?: boolean;
     children: React.ReactNode;
     onClick?: MouseEventHandler<HTMLButtonElement>;

package/src/lib/Inputs/Input.d.ts

@@ -2,6 +2,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     sz?: 'sm' | 'lg';
     error?: boolean;
     leftIcon?: React.ElementType;
+    clearable?: boolean;
     rightIcon?: React.ElementType;
 }
 export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
@@ -18,4 +19,4 @@ export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
 } & {
     position: "left" | "right";
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const Input: ({ leftIcon: LeftIcon, rightIcon: RightIcon, sz, error, style, ...props }: InputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Input: ({ leftIcon: LeftIcon, rightIcon: RightIcon, clearable, sz, error, style, ...props }: InputProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/Inputs/Search.d.ts

@@ -1,8 +1,9 @@
 export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement> {
     sz?: 'sm' | 'lg';
+    clearable?: boolean;
     loading: boolean;
-    setLoading: (value: boolean) => void;
+    setLoading?: (value: boolean) => void;
     setSearchValue: (value: string) => void;
 }
 export declare const loadingWheelStyle: import("@emotion/react").SerializedStyles;
-export declare const Search: ({ loading, setLoading, setSearchValue, sz, ...props }: SearchProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Search: ({ loading, setLoading, setSearchValue, clearable, sz, ...props }: SearchProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -7,7 +7,7 @@ export declare const TableContainer: import("@emotion/styled").StyledComponent<{
 export declare const TableWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
 export interface ColumnWidth {
     id: string;
     width: number;

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

@@ -6,5 +6,5 @@ interface TableHeaderProps<T> {
     disableControls: boolean;
     dense: boolean;
 }
-export declare const TableHeader: <T extends object>({ table, columnWidths, disableControls, dense, }: TableHeaderProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableHeader: <T extends object>({ table, disableControls, dense, }: TableHeaderProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};