@paubox/ui 1.14.0 → 1.15.0

package/index.esm.js

@@ -1447,7 +1447,7 @@ var paragraph300LetterSpacing = 0;
 var button100FontSize = 16;
 var button100LineHeight = 16;
 var button100LetterSpacing = button100FontSize * 0.02;
-var button200FontSize = 12;
+var button200FontSize = 14;
 var button200LineHeight = 12;
 var button200LetterSpacing = button200FontSize * 0.02;
 // BUTTON
@@ -1500,8 +1500,8 @@ var baseTypography = /*#__PURE__*/Object.freeze({
   paragraph300LineHeight: paragraph300LineHeight
 });
 
-var textPrimary$1 = '#1D2433';
-var textSecondary$1 = '#1D2433CC';
+var textPrimary$1 = '#000000';
+var textSecondary$1 = '#000000';
 var textPrimaryWhite$1 = '#FFFFFF';
 var textPrimaryDisabled$1 = '#545D78';
 var textPrimaryIconDisabled$1 = '#0000004D';
@@ -2130,7 +2130,7 @@ function _templateObject15() {
         "\n  font-size: ",
         "rem;\n  line-height: ",
         "rem;\n  letter-spacing: ",
-        "px;\n  font-weight: 500;\n"
+        "px;\n  font-weight: 400;\n"
     ]);
     _templateObject15 = function _templateObject() {
         return data;
@@ -2143,7 +2143,7 @@ function _templateObject16() {
         "\n  font-size: ",
         "rem;\n  line-height: ",
         "rem;\n  letter-spacing: ",
-        "px;\n  font-weight: 500;\n"
+        "px;\n  font-weight: 400;\n"
     ]);
     _templateObject16 = function _templateObject() {
         return data;
@@ -22777,7 +22777,7 @@ function _templateObject$l() {
         "\n  display: flex;\n  justify-content: space-between;\n  padding: ",
         "px;\n  border: 1px solid ",
         ";\n  border-radius: ",
-        "px;\n  font-weight: 700;\n  opacity: 0.8;\n  background-color: white;\n\n  html.dark & {\n    background-color: ",
+        "px;\n  font-weight: 500;\n  opacity: 0.8;\n  background-color: white;\n\n  html.dark & {\n    background-color: ",
         " !important;\n    border-color: ",
         ";\n    color: ",
         ";\n\n    &:hover {\n      background-color: ",
@@ -22984,7 +22984,8 @@ function _unsupported_iterable_to_array$i(o, minLen) {
 function _templateObject$k() {
     var data = _tagged_template_literal$k([
         "\n  margin-left: ",
-        "px;\n  transition: all 150ms ease-in-out;\n  transform: ",
+        "px;\n  font-size: ",
+        "rem;\n  transition: all 150ms ease-in-out;\n  transform: ",
         ";\n"
     ]);
     _templateObject$k = function _templateObject() {
@@ -22993,6 +22994,9 @@ function _templateObject$k() {
     return data;
 }
 var ArrowIcon = styled(ChevronDown)(_templateObject$k(), spacing(1), function(param) {
+    var sz = param.sz;
+    return sz === 'large' ? 1 : 0.75;
+}, function(param) {
     var open = param.open;
     return open ? 'rotate(180deg)' : 'rotate(0deg)';
 });
@@ -23028,7 +23032,8 @@ var DropdownMenu = function(param) {
                 children: [
                     label,
                     /*#__PURE__*/ jsx(ArrowIcon, {
-                        open: isControlled ? openProp : open
+                        open: isControlled ? openProp : open,
+                        sz: size
                     })
                 ]
             })),
@@ -34283,13 +34288,14 @@ var TableHeader = function(param) {
                     ];
                     var columnDef = header === null || header === void 0 ? void 0 : (_header_column = header.column) === null || _header_column === void 0 ? void 0 : _header_column.columnDef;
                     var autoWidth = !!columnDef.autoWidth;
+                    var isFixed = actionHeaders.includes(header.id);
                     return /*#__PURE__*/ jsxs(Th, {
                         variant: "paragraph200Semibold",
                         as: "th",
                         style: {
                             width: autoWidth ? 'auto' : "".concat(header.getSize(), "px"),
-                            minWidth: autoWidth ? 'auto' : undefined,
-                            maxWidth: autoWidth ? 'auto' : undefined,
+                            minWidth: isFixed ? "".concat(header.getSize(), "px") : autoWidth ? 'auto' : undefined,
+                            maxWidth: isFixed ? "".concat(header.getSize(), "px") : 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: [
@@ -34485,6 +34491,7 @@ var TableBody = function(param) {
                     var overflow = columnDef.overflow;
                     var maxLines = columnDef.maxLines;
                     var autoWidth = columnDef.autoWidth;
+                    var isFixed = cell.column.id === 'row-select' || cell.column.id === 'context';
                     var cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
                     return /*#__PURE__*/ jsx(Td, {
                         variant: "paragraph200Regular",
@@ -34493,6 +34500,8 @@ var TableBody = function(param) {
                         cellOverflow: overflow,
                         style: {
                             width: autoWidth ? 'auto' : "".concat(cell.column.getSize(), "px"),
+                            minWidth: isFixed ? "".concat(cell.column.getSize(), "px") : undefined,
+                            maxWidth: isFixed ? "".concat(cell.column.getSize(), "px") : undefined,
                             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: overflow === 'clamp' && maxLines ? /*#__PURE__*/ jsx(ClampWrapper, {
@@ -34690,7 +34699,7 @@ function _templateObject$2() {
 }
 function _templateObject1$2() {
     var data = _tagged_template_literal$2([
-        "\n  position: relative;\n  border-collapse: collapse;\n  table-layout: fixed;\n  min-height: 0;\n  width: 100%;\n  overflow-x: auto;\n"
+        "\n  position: relative;\n  border-collapse: collapse;\n  table-layout: fixed;\n  min-height: 0;\n  min-width: 100%;\n  overflow-x: auto;\n"
     ]);
     _templateObject1$2 = function _templateObject() {
         return data;
@@ -34699,7 +34708,7 @@ function _templateObject1$2() {
 }
 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 ",
+        "\n  display: flex;\n  flex-wrap: wrap;\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"
     ]);
@@ -34710,7 +34719,7 @@ function _templateObject2$2() {
 }
 function _templateObject3$1() {
     var data = _tagged_template_literal$2([
-        "\n  display: flex;\n  gap: ",
+        "\n  display: flex;\n  flex-wrap: wrap;\n  gap: ",
         "px;\n  align-items: center;\n"
     ]);
     _templateObject3$1 = function _templateObject() {
@@ -34936,35 +34945,40 @@ var Table = function(param) {
                             })
                         }) : 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);
+                    hasPaginationHandlers && pageInfo && /*#__PURE__*/ jsx("div", {
+                        style: {
+                            marginLeft: 'auto'
                         },
-                        testId: "".concat(testId, "-pagination")
-                    }))
+                        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")
+                        })
+                    })
                 ]
             }),
             /*#__PURE__*/ jsxs("div", {
@@ -34992,10 +35006,18 @@ var Table = function(param) {
                                 children: !error ? 'No results found.' : error
                             }),
                             /*#__PURE__*/ jsxs(TableWrapper, {
+                                style: {
+                                    width: table.getCenterTotalSize()
+                                },
                                 children: [
                                     /*#__PURE__*/ jsx("colgroup", {
                                         children: table.getAllColumns().map(function(column) {
-                                            return /*#__PURE__*/ jsx("col", {}, column.id);
+                                            var isFixed = column.id === 'row-select' || column.id === 'context';
+                                            return /*#__PURE__*/ jsx("col", {
+                                                style: isFixed ? {
+                                                    width: "".concat(column.getSize(), "px")
+                                                } : undefined
+                                            }, column.id);
                                         })
                                     }),
                                     /*#__PURE__*/ jsx(TableHeader, {

package/package.json

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

package/src/theme/baseTypography.d.ts

@@ -20,7 +20,7 @@ export declare const paragraph300LetterSpacing = 0;
 export declare const button100FontSize = 16;
 export declare const button100LineHeight = 16;
 export declare const button100LetterSpacing: number;
-export declare const button200FontSize = 12;
+export declare const button200FontSize = 14;
 export declare const button200LineHeight = 12;
 export declare const button200LetterSpacing: number;
 export declare const label100FontSize = 16;

package/src/theme/colors.d.ts

@@ -1,5 +1,5 @@
-export declare const textPrimary = "#1D2433";
-export declare const textSecondary = "#1D2433CC";
+export declare const textPrimary = "#000000";
+export declare const textSecondary = "#000000";
 export declare const textPrimaryWhite = "#FFFFFF";
 export declare const textPrimaryDisabled = "#545D78";
 export declare const textPrimaryIconDisabled = "#0000004D";