@shipengine/elements 1.1.0 → 1.1.2

package/index.cjs

@@ -5615,7 +5615,7 @@ const networkErrorPrettyPrinter = e => {
   return e.message.replaceAll(/Invalid rate\. Invalid rate\./g, "Invalid rate.");
 };
 
-const styles$w = createStyles({
+const styles$x = createStyles({
   container: {
     alignItems: "center",
     display: "flex",
@@ -5634,7 +5634,7 @@ const styles$w = createStyles({
  */
 const Loader = props => {
   return jsxRuntime.jsx("div", Object.assign({
-    css: styles$w.container
+    css: styles$x.container
   }, {
     children: jsxRuntime.jsx(giger.Spinner, Object.assign({}, props, {
       size: props.size || giger.SpinnerSize.SIZE_LARGE
@@ -5666,7 +5666,7 @@ const fill = react.keyframes(_t3 || (_t3 = _$1`
   100% {
     box-shadow: inset 0px 0px 0px 30px #3F8200;
 `));
-const styles$v = createStyles({
+const styles$w = createStyles({
   checkmark: theme => ({
     animation: `${fill} forwards`,
     borderRadius: "50%",
@@ -5721,7 +5721,7 @@ const SaveStatus = ({
   }
   if (isSaving) {
     return jsxRuntime.jsxs("div", Object.assign({
-      css: styles$v.savingContainer
+      css: styles$w.savingContainer
     }, {
       children: [jsxRuntime.jsx(Loader, {
         css: theme => ({
@@ -5729,32 +5729,32 @@ const SaveStatus = ({
         }),
         size: giger.SpinnerSize.SIZE_SMALL
       }), jsxRuntime.jsx(giger.Typography, Object.assign({
-        css: styles$v.saving
+        css: styles$w.saving
       }, {
         children: t("manage-defaults:status.saving")
       }))]
     }));
   }
   return !isSaving && !(errors === null || errors === void 0 ? void 0 : errors.length) ? jsxRuntime.jsxs("div", Object.assign({
-    css: styles$v.container
+    css: styles$w.container
   }, {
     children: [jsxRuntime.jsx("svg", Object.assign({
-      css: styles$v.checkmark,
+      css: styles$w.checkmark,
       viewBox: "0 0 52 52"
     }, {
       children: jsxRuntime.jsx("path", {
-        css: styles$v.checkmarkCheck,
+        css: styles$w.checkmarkCheck,
         d: "M14.1 27.2l7.1 7.2 16.7-16.8",
         fill: "none",
         strokeWidth: "5px"
       })
     })), jsxRuntime.jsx(giger.Typography, Object.assign({
-      css: styles$v.saved
+      css: styles$w.saved
     }, {
       children: t("manage-defaults:status.saved")
     }))]
   })) : jsxRuntime.jsxs("div", Object.assign({
-    css: [styles$v.container, {
+    css: [styles$w.container, {
       padding: "0"
     }]
   }, {
@@ -5764,7 +5764,7 @@ const SaveStatus = ({
       }),
       name: gigerTheme.IconNames.CANCEL_FILLED
     }), jsxRuntime.jsx(giger.Typography, Object.assign({
-      css: styles$v.savingFailed
+      css: styles$w.savingFailed
     }, {
       children: t("manage-defaults:status.savingFailed")
     }))]
@@ -5817,7 +5817,7 @@ const Spacer = props => jsxRuntime.jsx("div", {
   css: getSpacerStyles(props)
 });
 
-const styles$u = createStyles({
+const styles$v = createStyles({
   content: theme => ({
     padding: `${theme.spacing(3)}px ${theme.spacing(4)}px`
   }),
@@ -5865,10 +5865,10 @@ const CollapsiblePanel = ({
   const [isExpanded, toggleIsExpanded] = useToggle(initialExpanded);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("div", Object.assign({
-      css: styles$u.header
+      css: styles$v.header
     }, {
       children: jsxRuntime.jsxs(giger.Link, Object.assign({
-        css: styles$u.link,
+        css: styles$v.link,
         onClick: event => {
           event.preventDefault();
           toggleIsExpanded();
@@ -5888,7 +5888,7 @@ const CollapsiblePanel = ({
             errors: errors,
             isSaving: isSaving
           }), jsxRuntime.jsx(giger.Icon, {
-            css: styles$u.icon,
+            css: styles$v.icon,
             "data-testid": "collapsible-panel-dropdown",
             name: isExpanded ? gigerTheme.IconNames.CHEVRON_TOP : gigerTheme.IconNames.CHEVRON_BOTTOM,
             size: giger.IconSize.SIZE_LARGE
@@ -5896,7 +5896,7 @@ const CollapsiblePanel = ({
         }))]
       }))
     })), isExpanded ? jsxRuntime.jsx("section", Object.assign({
-      css: styles$u.content
+      css: styles$v.content
     }, {
       children: children
     })) : jsxRuntime.jsx(Spacer, {
@@ -7562,7 +7562,7 @@ const FormPortal = ({
   });
 };
 
-const styles$t = createStyles({
+const styles$u = createStyles({
   chipList: theme => ({
     gap: theme.spacing(1)
   }),
@@ -7722,7 +7722,7 @@ const AddFundsForm = ({
       })), jsxRuntime.jsx(Spacer, {
         multiplier: 2
       }), jsxRuntime.jsx(giger.ChipList, Object.assign({
-        css: styles$t.chipList,
+        css: styles$u.chipList,
         onChange: idx => {
           const chip = chips[idx];
           setSelectedChip(chip);
@@ -7737,7 +7737,7 @@ const AddFundsForm = ({
         }
       }, {
         children: chips.map(chip => jsxRuntime.jsx(giger.Chip, Object.assign({
-          css: styles$t.getChip({
+          css: styles$u.getChip({
             isDisabled: chip.value < _minimumAmount,
             isSelected: chip.value === selectedChip.value
           }),
@@ -7754,7 +7754,7 @@ const AddFundsForm = ({
           multiplier: 1
         }), jsxRuntime.jsx(MoneyInput, {
           control: form.control,
-          css: styles$t.fundsInput,
+          css: styles$u.fundsInput,
           defaultValue: {
             amount: undefined,
             currency: alchemy.SE.Currency.USD
@@ -7879,7 +7879,7 @@ const Spread = ({
   children: children
 }));
 
-const styles$s = createStyles({
+const styles$t = createStyles({
   edit: theme => ({
     color: theme.palette.primary.main,
     padding: `0 ${theme.spacing(2)}`
@@ -8008,12 +8008,12 @@ const AutoFundingForm = ({
       }, {
         children: t("manage-funding:autoFunding.readSettings", Object.assign({}, autoFundingConfig))
       })), jsxRuntime.jsx(LinkAction, {
-        css: styles$s.edit,
+        css: styles$t.edit,
         onClick: () => handleToggle(true),
         title: t("manage-funding:autoFunding:edit")
       })]
     }), jsxRuntime.jsxs("form", Object.assign({
-      css: styles$s.getForm(showForm),
+      css: styles$t.getForm(showForm),
       "data-testid": "auto-funding-form",
       id: "auto-funding-form",
       onSubmit: handleSubmit
@@ -8024,11 +8024,11 @@ const AutoFundingForm = ({
       }, {
         children: t("manage-funding:autoFunding:editSettings")
       })), jsxRuntime.jsx("div", Object.assign({
-        css: styles$s.marginLeft
+        css: styles$t.marginLeft
       }, {
         children: jsxRuntime.jsx(MoneyInput, {
           control: form.control,
-          css: styles$s.input,
+          css: styles$t.input,
           "data-testid": "auto-funding-threshold-input",
           defaultValue: {
             amount: autoFundingConfig === null || autoFundingConfig === void 0 ? void 0 : autoFundingConfig.autoPurchaseThreshold,
@@ -8041,11 +8041,11 @@ const AutoFundingForm = ({
           showCurrencySymbol: true
         })
       })), jsxRuntime.jsx("div", Object.assign({
-        css: styles$s.marginLeft
+        css: styles$t.marginLeft
       }, {
         children: jsxRuntime.jsx(MoneyInput, {
           control: form.control,
-          css: styles$s.input,
+          css: styles$t.input,
           "data-testid": "auto-funding-purchase-amount-input",
           defaultValue: {
             amount: autoFundingConfig === null || autoFundingConfig === void 0 ? void 0 : autoFundingConfig.autoPurchaseAmount,
@@ -8058,11 +8058,11 @@ const AutoFundingForm = ({
           showCurrencySymbol: true
         })
       })), jsxRuntime.jsx("div", Object.assign({
-        css: styles$s.marginLeft
+        css: styles$t.marginLeft
       }, {
         children: jsxRuntime.jsx(NumberInput, {
           control: form.control,
-          css: styles$s.input,
+          css: styles$t.input,
           "data-testid": "auto-funding-max-per-day-input",
           defaultValue: autoFundingConfig === null || autoFundingConfig === void 0 ? void 0 : autoFundingConfig.autoPurchaseCutoff,
           disabled: !watchIsEnabled,
@@ -8102,7 +8102,7 @@ const AutoFundingForm = ({
   });
 };
 
-const styles$r = isLabelRight => createStyles({
+const styles$s = isLabelRight => createStyles({
   inlineContainer: theme => ({
     alignItems: "center",
     display: "flex",
@@ -8122,14 +8122,14 @@ const InlineLabel = ({
   isLabelRight,
   labelProps: _labelProps = {}
 }) => jsxRuntime.jsxs("div", Object.assign({
-  css: styles$r(isLabelRight).inlineContainer
+  css: styles$s(isLabelRight).inlineContainer
 }, {
   children: [jsxRuntime.jsx(giger.Typography, Object.assign({}, _labelProps, {
     children: label
   })), children]
 }));
 
-const styles$q = createStyles({
+const styles$r = createStyles({
   getBalanceText: balance => theme => ({
     color: balance === undefined ? theme.palette.gray.main : balance >= 0 ? theme.palette.secondary.dark : theme.palette.error.main
   })
@@ -8163,7 +8163,7 @@ const CarrierBalance = ({
   }, {
     children: isFetchingCarrier ? jsxRuntime.jsx(giger.Spinner, {}) : jsxRuntime.jsx(giger.Typography, Object.assign({
       bold: true,
-      css: styles$q.getBalanceText(carrierBalance)
+      css: styles$r.getBalanceText(carrierBalance)
     }, {
       children: carrierBalance === undefined ? "----" : formatMoney({
         amount: carrierBalance,
@@ -8191,6 +8191,10 @@ const logoDataByCarrierCode$1 = {
     logo: "https://logos.shipstation.com/ipaas/carriers/stamps_com_wl/icon.svg",
     name: "United States Postal Service"
   },
+  ups: {
+    logo: "https://logos.shipstation.com/ipaas/carriers/ups/icon.svg",
+    name: "UPS"
+  },
   ups_walleted: {
     logo: "https://logos.shipstation.com/ipaas/carriers/ups/icon.svg",
     name: "UPS"
@@ -8205,8 +8209,8 @@ const CarrierIcon = ({
   size: _size = "regular"
 }) => {
   const logoData = logoDataByCarrierCode$1[carrierCode];
-  if (!logoData) return jsxRuntime.jsx("div", {
-    children: carrierCode.toString()
+  if (!logoData) return jsxRuntime.jsx(giger.Chip, {
+    children: carrierCode.toString().toUpperCase()
   });
   const {
     logo,
@@ -8214,7 +8218,7 @@ const CarrierIcon = ({
   } = logoData;
   // TODO: use theme ICONSIZE
   return jsxRuntime.jsx("img", {
-    alt: `${name}-logo`,
+    alt: name,
     height: iconSize[_size],
     src: logo,
     width: iconSize[_size]
@@ -8371,7 +8375,7 @@ const Cube = _a => {
   }));
 };
 
-const styles$p = createStyles({
+const styles$q = createStyles({
   getDateRangeSelect: fullWidth => theme => ({
     minWidth: theme.spacing(30),
     position: "relative",
@@ -8396,7 +8400,7 @@ const DateRangeSelect = ({
     void onChange(nextOption);
   };
   return jsxRuntime.jsx(giger.Select, Object.assign({
-    css: styles$p.getDateRangeSelect(fullWidth),
+    css: styles$q.getDateRangeSelect(fullWidth),
     "data-testid": "date-range-select",
     label: t("wallet-history:dateRange"),
     leftContent: jsxRuntime.jsx(giger.Icon, {
@@ -8465,7 +8469,7 @@ const DateRangeCombo = ({
   });
 };
 
-const styles$o = createStyles({
+const styles$p = createStyles({
   container: theme => ({
     display: "flex",
     flexDirection: "column",
@@ -8496,13 +8500,13 @@ const DisplayTerm = ({
     t
   } = reactI18next.useTranslation();
   return jsxRuntime.jsx("ul", Object.assign({
-    css: styles$o.container
+    css: styles$p.container
   }, {
     children: term.links.map(({
       link,
       title
     }) => jsxRuntime.jsxs("li", Object.assign({
-      css: styles$o.termLink
+      css: styles$p.termLink
     }, {
       children: [jsxRuntime.jsx(giger.Typography, Object.assign({
         variant: "subtitle1"
@@ -8511,7 +8515,7 @@ const DisplayTerm = ({
           defaultValue: title
         })
       })), jsxRuntime.jsx(giger.Link, Object.assign({
-        css: styles$o.link,
+        css: styles$p.link,
         href: link,
         isExternal: true,
         target: "_blank"
@@ -8569,7 +8573,7 @@ const ErrorFallback = ({
   }));
 };
 
-const styles$n = createStyles({
+const styles$o = createStyles({
   icon: theme => ({
     color: theme.palette.primary.main,
     marginRight: theme.spacing(2)
@@ -8619,10 +8623,10 @@ const Section = _a => {
     rest = __rest(_a, ["bold", "title", "children", "rightContent"]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [title && jsxRuntime.jsx("summary", Object.assign({
-      css: styles$n.summary
+      css: styles$o.summary
     }, {
       children: jsxRuntime.jsxs("div", Object.assign({
-        css: styles$n.summaryWrapper
+        css: styles$o.summaryWrapper
       }, {
         children: [title && typeof title === "string" ? jsxRuntime.jsx(giger.Typography, Object.assign({
           bold: bold,
@@ -8630,20 +8634,20 @@ const Section = _a => {
         }, {
           children: title
         })) : title, rightContent && jsxRuntime.jsx("div", Object.assign({
-          css: styles$n.rightContentWrapper
+          css: styles$o.rightContentWrapper
         }, {
           children: rightContent
         }))]
       }))
     })), jsxRuntime.jsx("section", Object.assign({
-      css: styles$n.section
+      css: styles$o.section
     }, rest, {
       children: children
     }))]
   });
 };
 
-const styles$m = createStyles({
+const styles$n = createStyles({
   balanceText: theme => ({
     color: theme.palette.secondary.dark
   }),
@@ -8738,7 +8742,7 @@ const FundAndPurchase = ({
     }, {
       children: [jsxRuntime.jsx(giger.Button, Object.assign({
         bold: false,
-        css: styles$m.saveRateButton,
+        css: styles$n.saveRateButton,
         disabled: disabled || !carrierId || isPreferredRate && !isRateFormValid || addFundsForm.isSubmitting || isRateFormSubmitting,
         isLoading: isSavingRate,
         onClick: handleSaveRate,
@@ -8758,7 +8762,7 @@ const FundAndPurchase = ({
   // render when no rate has been selected yet
   if (!carrierId) return jsxRuntime.jsxs("div", Object.assign({
     className: className,
-    css: styles$m.container
+    css: styles$n.container
   }, {
     children: [jsxRuntime.jsxs(Spread, {
       children: [jsxRuntime.jsx(CarrierBalance, {
@@ -8782,7 +8786,7 @@ const FundAndPurchase = ({
   if (isPreferredRate) {
     return jsxRuntime.jsxs("div", Object.assign({
       className: className,
-      css: styles$m.container
+      css: styles$n.container
     }, {
       children: [jsxRuntime.jsx(CarrierBalance, {
         balance: uspsBalance
@@ -8800,7 +8804,7 @@ const FundAndPurchase = ({
     //         show balance, but not the funding form.
     if (!isFundingEnabled) return jsxRuntime.jsxs("div", Object.assign({
       className: className,
-      css: styles$m.container
+      css: styles$n.container
     }, {
       children: [jsxRuntime.jsx(CarrierBalance, {
         carrierId: carrierId
@@ -8842,13 +8846,13 @@ const FundAndPurchase = ({
           var _a, _b;
           return jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [jsxRuntime.jsxs("section", Object.assign({
-              css: styles$m.getFormExtension(addFundsForm.isCustomAmount)
+              css: styles$n.getFormExtension(addFundsForm.isCustomAmount)
             }, {
               children: [jsxRuntime.jsx(InlineLabel, Object.assign({
                 label: t("manage-funding:fundAndPurchase.newBalance")
               }, {
                 children: jsxRuntime.jsx(giger.Typography, Object.assign({
-                  css: styles$m.balanceText
+                  css: styles$n.balanceText
                 }, {
                   children: formatMoney({
                     amount: balance + ((_a = addFundsForm.selectedAmount) !== null && _a !== void 0 ? _a : 0),
@@ -8859,7 +8863,7 @@ const FundAndPurchase = ({
                 label: t("manage-funding:fundAndPurchase.finalBalance")
               }, {
                 children: jsxRuntime.jsx(giger.Typography, Object.assign({
-                  css: styles$m.balanceText
+                  css: styles$n.balanceText
                 }, {
                   children: formatMoney({
                     amount: balance + ((_b = addFundsForm.selectedAmount) !== null && _b !== void 0 ? _b : 0) - purchaseAmount,
@@ -8896,7 +8900,7 @@ const FundAndPurchase = ({
   }
 };
 
-const styles$l = createStyles({
+const styles$m = createStyles({
   itemDescription: theme => ({
     display: "flex",
     flexDirection: "column",
@@ -8938,15 +8942,15 @@ const ItemsBreakdownTableHeader = ({
 }) => jsxRuntime.jsx(giger.TableHeader, {
   children: jsxRuntime.jsxs(giger.TableBaseRow, {
     children: [jsxRuntime.jsx(giger.TableHeaderCell, {}), jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
-      css: styles$l.numericCell
+      css: styles$m.numericCell
     }, {
       children: "Qty"
     })), hasValue && jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
-      css: styles$l.numericCell
+      css: styles$m.numericCell
     }, {
       children: "$/ea"
     })), hasTotal && jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
-      css: styles$l.numericCell
+      css: styles$m.numericCell
     }, {
       children: "$ Total"
     }))]
@@ -8963,7 +8967,7 @@ const ItemsBreakdown = ({
   const hasValue = items.some(item => item.value !== undefined);
   const hasTotal = items.some(item => item.totalValue !== undefined);
   return jsxRuntime.jsx("div", Object.assign({
-    css: styles$l.tableWrapper
+    css: styles$m.tableWrapper
   }, {
     children: jsxRuntime.jsx(giger.Table, Object.assign({
       header: jsxRuntime.jsx(ItemsBreakdownTableHeader, {
@@ -8981,25 +8985,25 @@ const ItemsBreakdown = ({
         }, index) => jsxRuntime.jsx(React.Fragment, {
           children: jsxRuntime.jsxs(giger.TableBaseRow, {
             children: [jsxRuntime.jsxs(giger.TableBodyCell, Object.assign({
-              css: styles$l.itemDescription
+              css: styles$m.itemDescription
             }, {
               children: [jsxRuntime.jsx(giger.Typography, Object.assign({
-                css: styles$l.itemName
+                css: styles$m.itemName
               }, {
                 children: name
               })), jsxRuntime.jsx(giger.Typography, {
                 children: detail
               })]
             })), jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
-              css: [styles$l.numericCell, styles$l.itemDetail]
+              css: [styles$m.numericCell, styles$m.itemDetail]
             }, {
               children: quantity
             })), hasValue && jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
-              css: [styles$l.numericCell, styles$l.itemDetail]
+              css: [styles$m.numericCell, styles$m.itemDetail]
             }, {
               children: value && formatMoney(value)
             })), hasTotal && jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
-              css: [styles$l.numericCell, styles$l.itemDetail]
+              css: [styles$m.numericCell, styles$m.itemDetail]
             }, {
               children: totalValue && formatMoney(totalValue)
             }))]
@@ -9076,6 +9080,161 @@ const ManageFunding = ({
   }));
 };
 
+const styles$l = createStyles({
+  footer: {
+    "> *": {
+      borderTop: "0 !important"
+    },
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "space-between"
+  },
+  leftFooter: theme => ({
+    display: "flex",
+    margin: theme.spacing(2),
+    span: {
+      fontWeight: theme.typography.fontWeight.bold
+    }
+  }),
+  rowCount: theme => ({
+    alignItems: "center",
+    display: "flex",
+    marginRight: theme.spacing(4),
+    whiteSpace: "pre"
+  }),
+  rowCountDropDown: {
+    "> * > *": {
+      justifyContent: "center !important"
+    }
+  },
+  rowsActions: theme => ({
+    "#selected-row": {
+      ":hover": {
+        backgroundColor: "transparent"
+      },
+      borderRadius: theme.borderRadius.XS,
+      color: theme.palette.black,
+      padding: theme.spacing(1),
+      paddingRight: theme.spacing(0.5)
+    },
+    alignItems: "baseline",
+    display: "flex",
+    span: {
+      alignSelf: "center"
+    }
+  })
+});
+
+const DEFAULT_ROW_COUNT_SELECTION = [5, 10, 25, 50];
+const Pager = ({
+  currentPageSize,
+  pagingData,
+  rowCountSelection: _rowCountSelection = DEFAULT_ROW_COUNT_SELECTION,
+  onPageSelect,
+  onPageSizeSelect
+}) => {
+  const [isRowCountDropDownOpen, setIsRowCountDropDownOpen] = React.useState(false);
+  const buttonIconRef = React.useRef(null);
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const toggleRowCountDropdown = React.useCallback(() => setIsRowCountDropDownOpen(prev => !prev), []);
+  const handleClickAway = event => {
+    var _a;
+    if ((_a = buttonIconRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+      return;
+    }
+    toggleRowCountDropdown();
+  };
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: styles$l.footer
+  }, {
+    children: [jsxRuntime.jsxs("div", Object.assign({
+      css: styles$l.leftFooter
+    }, {
+      children: [jsxRuntime.jsx("div", Object.assign({
+        css: styles$l.rowCount
+      }, {
+        children: jsxRuntime.jsx(reactI18next.Trans, {
+          components: [jsxRuntime.jsx("b", {
+            style: {
+              fontWeight: "bold"
+            }
+          }, "1")],
+          count: pagingData.total,
+          i18nKey: "common:grid.row-count",
+          values: {
+            firstIndex: pagingData.total !== 0 ? 1 + (pagingData.page - 1) * currentPageSize : 0,
+            lastIndex: Math.min(pagingData.total, pagingData.page * currentPageSize)
+          }
+        })
+      })), jsxRuntime.jsxs("div", Object.assign({
+        css: styles$l.rowsActions
+      }, {
+        children: [t("common:grid.rows"), jsxRuntime.jsx(giger.Button, Object.assign({
+          id: "selected-row",
+          onClick: () => toggleRowCountDropdown(),
+          ref: buttonIconRef,
+          variant: giger.ButtonVariant.TEXT
+        }, {
+          children: currentPageSize
+        })), isRowCountDropDownOpen ? jsxRuntime.jsx(giger.Icon, {
+          name: gigerTheme.IconNames.CHEVRON_TOP,
+          onClick: () => toggleRowCountDropdown(),
+          size: giger.IconSize.SIZE_MEDIUM
+        }) : jsxRuntime.jsx(giger.Icon, {
+          name: gigerTheme.IconNames.CHEVRON_BOTTOM,
+          onClick: () => toggleRowCountDropdown(),
+          size: giger.IconSize.SIZE_MEDIUM
+        }), jsxRuntime.jsx(giger.DropdownOptionList, Object.assign({
+          css: styles$l.rowCountDropDown,
+          dropdownWidth: "max-content",
+          isOpen: isRowCountDropDownOpen,
+          onChange: () => toggleRowCountDropdown(),
+          onClickAway: handleClickAway,
+          placement: "bottom",
+          reference: buttonIconRef.current
+        }, {
+          children: _rowCountSelection.map(selection => jsxRuntime.jsx(giger.Option, Object.assign({
+            onClick: () => onPageSizeSelect(selection),
+            value: String(selection)
+          }, {
+            children: selection
+          }), selection))
+        }))]
+      }))]
+    })), jsxRuntime.jsx("div", {
+      children: jsxRuntime.jsx(giger.Pagination, {
+        boundaryPagesToShow: 5,
+        currentPage: pagingData.page,
+        onPageChange: onPageSelect,
+        totalPages: pagingData.pages
+      })
+    })]
+  }));
+};
+
+const usePager = (initialPageSize = 10) => {
+  const [page, setPage] = React.useState(1);
+  const [pageSize, setPageSize] = React.useState(initialPageSize);
+  const handlePageSelect = page => {
+    setPage(page);
+  };
+  const handlePageSizeSelect = pageSize => {
+    setPageSize(pageSize);
+  };
+  return {
+    page,
+    pagerProps: {
+      currentPage: page,
+      currentPageSize: pageSize,
+      onPageSelect: handlePageSelect,
+      onPageSizeSelect: handlePageSizeSelect
+    },
+    pageSize
+  };
+};
+
 const addressParserSchema = zod.z.object({
   fullAddress: zod.z.string().min(1)
 });
@@ -10711,111 +10870,28 @@ const StoryNotes = ({
 });
 
 const styles$e = createStyles({
-  footer: {
-    "> *": {
-      borderTop: "0 !important"
-    },
-    alignItems: "center",
-    display: "flex",
-    justifyContent: "space-between"
-  },
-  leftFooter: theme => ({
-    display: "flex",
-    margin: theme.spacing(2),
-    span: {
-      fontWeight: theme.typography.fontWeight.bold
-    }
-  }),
-  rowCount: theme => ({
-    alignItems: "center",
-    display: "flex",
-    marginRight: theme.spacing(4),
-    whiteSpace: "pre"
-  }),
-  rowCountDropDown: {
-    "> * > *": {
-      justifyContent: "center !important"
-    }
-  },
-  rowsActions: theme => ({
-    "#selected-row": {
-      ":hover": {
-        backgroundColor: "transparent"
-      },
-      borderRadius: theme.borderRadius.XS,
-      color: theme.palette.black,
-      padding: theme.spacing(1),
-      paddingRight: theme.spacing(0.5)
-    },
-    alignItems: "baseline",
-    display: "flex",
-    span: {
-      alignSelf: "center"
-    }
+  checkboxHeader: theme => ({
+    width: theme.spacing(6)
   }),
   table: {
     "*": {
       overflow: "hidden",
       textOverflow: "clip !important"
     }
-  },
-  tableHeader: theme => ({
-    "> :nth-of-type(1)": {
-      width: theme.spacing(6)
-    },
-    "> :nth-of-type(2)": {
-      width: theme.spacing(20)
-    },
-    "> :nth-of-type(7)": {
-      width: theme.spacing(16)
-    }
-  })
+  }
 });
 
 const GridController = ({
-  currentPageSize,
   columns,
   data,
-  pagingData,
-  rowCountSelection: _rowCountSelection = [5, 10, 25, 50],
-  onPageSelect,
-  onPageSizeSelect,
-  onRowClick
+  footerContent,
+  onRowClick,
+  useCheckboxes: _useCheckboxes = false
 }) => {
   var _a, _b, _c;
-  const {
-    t
-  } = reactI18next.useTranslation();
-  const [isRowCountDropDownOpen, setIsRowCountDropDownOpen] = React.useState(false);
   const [isChecked, setIsChecked] = React.useState((_a = data === null || data === void 0 ? void 0 : data.map(() => false)) !== null && _a !== void 0 ? _a : []);
-  const buttonIconRef = React.useRef(null);
-  const toggleRowCountDropdown = React.useCallback(() => setIsRowCountDropDownOpen(prev => !prev), []);
-  const sortedColumns = React.useMemo(() => {
-    const sortedKeys = Object.keys(columns).sort((a, b) => {
-      var _a, _b, _c, _d;
-      const orderA = (_b = (_a = columns[a]) === null || _a === void 0 ? void 0 : _a.columnOrder) !== null && _b !== void 0 ? _b : 0;
-      const orderB = (_d = (_c = columns[b]) === null || _c === void 0 ? void 0 : _c.columnOrder) !== null && _d !== void 0 ? _d : 0;
-      return orderA - orderB;
-    });
-    const sortedColumns = {};
-    for (const key of sortedKeys) {
-      sortedColumns[key] = columns[key];
-    }
-    return sortedColumns;
-  }, [columns]);
-  const handleClickAway = event => {
-    var _a;
-    if ((_a = buttonIconRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
-      return;
-    }
-    toggleRowCountDropdown();
-  };
   const getColumnHeaderContents = () => {
-    const columnKeys = Object.keys(sortedColumns);
-    return columnKeys.map(column => {
-      var _a;
-      return (_a = columns[column]) === null || _a === void 0 ? void 0 : _a.headerContent;
-    });
+    return columns.map(column => column.headerContent);
   };
   const isAllChecked = React.useMemo(() => isChecked.length > 0 && isChecked.every(check => check), [isChecked]);
   const isIndeterminate = React.useMemo(() => isChecked.some(check => check), [isChecked]);
@@ -10836,86 +10912,23 @@ const GridController = ({
   return jsxRuntime.jsx(giger.Table, Object.assign({
     css: styles$e.table,
     "data-testid": "grid",
-    footer: jsxRuntime.jsxs("div", Object.assign({
-      css: styles$e.footer
-    }, {
-      children: [jsxRuntime.jsxs("div", Object.assign({
-        css: styles$e.leftFooter
-      }, {
-        children: [jsxRuntime.jsx("div", Object.assign({
-          css: styles$e.rowCount
-        }, {
-          children: jsxRuntime.jsx(reactI18next.Trans, {
-            components: [jsxRuntime.jsx("b", {
-              style: {
-                fontWeight: "bold"
-              }
-            }, "1")],
-            count: pagingData.total,
-            i18nKey: "common:grid.row-count",
-            values: {
-              firstIndex: pagingData.total !== 0 ? 1 + (pagingData.page - 1) * currentPageSize : 0,
-              lastIndex: Math.min(pagingData.total, pagingData.page * currentPageSize)
-            }
-          })
-        })), jsxRuntime.jsxs("div", Object.assign({
-          css: styles$e.rowsActions
-        }, {
-          children: [t("common:grid.rows"), jsxRuntime.jsx(giger.Button, Object.assign({
-            id: "selected-row",
-            onClick: () => toggleRowCountDropdown(),
-            ref: buttonIconRef,
-            variant: giger.ButtonVariant.TEXT
-          }, {
-            children: currentPageSize
-          })), isRowCountDropDownOpen ? jsxRuntime.jsx(giger.Icon, {
-            name: gigerTheme.IconNames.CHEVRON_TOP,
-            onClick: () => toggleRowCountDropdown(),
-            size: giger.IconSize.SIZE_MEDIUM
-          }) : jsxRuntime.jsx(giger.Icon, {
-            name: gigerTheme.IconNames.CHEVRON_BOTTOM,
-            onClick: () => toggleRowCountDropdown(),
-            size: giger.IconSize.SIZE_MEDIUM
-          }), jsxRuntime.jsx(giger.DropdownOptionList, Object.assign({
-            css: styles$e.rowCountDropDown,
-            dropdownWidth: "max-content",
-            isOpen: isRowCountDropDownOpen,
-            onChange: () => toggleRowCountDropdown(),
-            onClickAway: handleClickAway,
-            placement: "bottom",
-            reference: buttonIconRef.current
-          }, {
-            children: _rowCountSelection.map(selection => jsxRuntime.jsx(giger.Option, Object.assign({
-              onClick: () => onPageSizeSelect(selection),
-              value: String(selection)
-            }, {
-              children: selection
-            }), selection))
-          }))]
-        }))]
-      })), jsxRuntime.jsx(giger.TableFooter, {
-        children: jsxRuntime.jsx(giger.Pagination, {
-          boundaryPagesToShow: 5,
-          currentPage: pagingData.page,
-          onPageChange: onPageSelect,
-          totalPages: pagingData.pages
-        })
-      })]
-    })),
+    footer: footerContent && jsxRuntime.jsx(giger.TableFooter, {
+      children: footerContent
+    }),
     header: jsxRuntime.jsx(giger.TableHeader, {
-      children: jsxRuntime.jsxs(giger.TableHeaderRow, Object.assign({
-        css: styles$e.tableHeader
-      }, {
-        children: [jsxRuntime.jsx(giger.TableHeaderCell, {
+      children: jsxRuntime.jsxs(giger.TableHeaderRow, {
+        children: [_useCheckboxes ? jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
+          css: styles$e.checkboxHeader
+        }, {
           children: jsxRuntime.jsx(giger.Checkbox, {
             checked: (_b = isAllChecked || isIndeterminate) !== null && _b !== void 0 ? _b : false,
             indeterminate: (_c = !isAllChecked && isIndeterminate) !== null && _c !== void 0 ? _c : false,
             onChange: event => toggleAllCheckboxes(event.target.checked)
           })
-        }), getColumnHeaderContents().map((header, index) => jsxRuntime.jsx(giger.TableHeaderCell, {
+        })) : null, getColumnHeaderContents().map((header, index) => jsxRuntime.jsx(giger.TableHeaderCell, {
           children: header
         }, index))]
-      }))
+      })
     })
   }, {
     children: jsxRuntime.jsx(giger.TableBody, {
@@ -10924,20 +10937,17 @@ const GridController = ({
         return jsxRuntime.jsxs(giger.TableRow, Object.assign({
           onClick: onRowClick ? () => onRowClick(row) : undefined
         }, {
-          children: [jsxRuntime.jsx(giger.TableBodyCell, {
+          children: [_useCheckboxes ? jsxRuntime.jsx(giger.TableBodyCell, {
             children: jsxRuntime.jsx(giger.Checkbox, {
               checked: (_a = isChecked[index]) !== null && _a !== void 0 ? _a : false,
               onChange: () => toggleCheckbox(index)
             })
-          }), Object.keys(sortedColumns).map((columnName, index) => {
-            var _a;
-            const cellData = row[columnName];
-            const render = (_a = columns[columnName]) === null || _a === void 0 ? void 0 : _a.renderCellContent;
-            if (!render || !cellData) {
+          }) : null, columns.map((column, index) => {
+            if (!column.renderCellContent) {
               return null;
             } else {
               return jsxRuntime.jsx(giger.TableBodyCell, {
-                children: render(row)
+                children: column.renderCellContent(row)
               }, index);
             }
           })]
@@ -10954,7 +10964,7 @@ const CellFormattedDate = ({
   const [formatWithShort, setFormatWithShort] = React.useState(!!short);
   return jsxRuntime.jsx("div", {
     children: jsxRuntime.jsx("div", {
-      children: formatWithShort ? formatDate(date) : formatDateDDMMYY(date)
+      children: formatWithShort ? formatDateDDMMYY(date) : formatDate(date)
     })
   });
 };
@@ -19201,6 +19211,7 @@ exports.ManageFunding = ManageFunding;
 exports.ManageWarehouses = manageWarehouses$1;
 exports.Onboarding = onboarding;
 exports.PageLayoutProvider = PageLayoutProvider;
+exports.Pager = Pager;
 exports.PaymentMethodSettings = PaymentMethodSettings;
 exports.Portal = Portal;
 exports.PoweredByShipEngine = PoweredByShipEngine;
@@ -19302,6 +19313,7 @@ exports.useInsuranceProviderOptions = useInsuranceProviderOptions;
 exports.useNestedForm = useNestedForm;
 exports.usePackageOptions = usePackageOptions;
 exports.usePageLayout = usePageLayout;
+exports.usePager = usePager;
 exports.useRateOptions = useRateOptions;
 exports.useRootPortal = useRootPortal;
 exports.useRunOnceOnTrue = useRunOnceOnTrue;