@shipengine/elements 1.1.0 → 1.1.2

package/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
-import { InlineNotification, NotificationType, Spinner, SpinnerSize, Typography, Icon, Link, IconSize, FormField, FieldMessageType, Checkbox, Input, Divider, SelectAutocomplete, Select as Select$1, OptionGroup, Option, Button, Switch as Switch$1, Textarea, ChipList, Chip, ButtonVariant, ButtonSize, DatePicker as DatePicker$1, Table, TableBody, TableBaseRow, TableBodyCell, TableHeader, TableHeaderCell, Grid, GridChild, RadioGroup, Radio, ButtonColor, Tag, TagColor, DropdownOptionList, TableFooter, Pagination, TableHeaderRow, TableRow, Skeleton, SkeletonAnimation, SkeletonVariant, SkeletonBackgroundColor, Popover, BottomSheet, IconTooltip, Stepper, Step } from '@shipengine/giger';
+import { InlineNotification, NotificationType, Spinner, SpinnerSize, Typography, Icon, Link, IconSize, FormField, FieldMessageType, Checkbox, Input, Divider, SelectAutocomplete, Select as Select$1, OptionGroup, Option, Button, Switch as Switch$1, Textarea, ChipList, Chip, ButtonVariant, ButtonSize, DatePicker as DatePicker$1, Table, TableBody, TableBaseRow, TableBodyCell, TableHeader, TableHeaderCell, DropdownOptionList, Pagination, Grid, GridChild, RadioGroup, Radio, ButtonColor, Tag, TagColor, TableFooter, TableHeaderRow, TableRow, Skeleton, SkeletonAnimation, SkeletonVariant, SkeletonBackgroundColor, Popover, BottomSheet, IconTooltip, Stepper, Step } from '@shipengine/giger';
 import { IconNames } from '@shipengine/giger-theme';
 import { camelize } from 'humps';
 import * as React from 'react';
@@ -5583,7 +5583,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",
@@ -5602,7 +5602,7 @@ const styles$w = createStyles({
  */
 const Loader = props => {
   return jsx("div", Object.assign({
-    css: styles$w.container
+    css: styles$x.container
   }, {
     children: jsx(Spinner, Object.assign({}, props, {
       size: props.size || SpinnerSize.SIZE_LARGE
@@ -5634,7 +5634,7 @@ const fill = 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%",
@@ -5689,7 +5689,7 @@ const SaveStatus = ({
   }
   if (isSaving) {
     return jsxs("div", Object.assign({
-      css: styles$v.savingContainer
+      css: styles$w.savingContainer
     }, {
       children: [jsx(Loader, {
         css: theme => ({
@@ -5697,32 +5697,32 @@ const SaveStatus = ({
         }),
         size: SpinnerSize.SIZE_SMALL
       }), jsx(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) ? jsxs("div", Object.assign({
-    css: styles$v.container
+    css: styles$w.container
   }, {
     children: [jsx("svg", Object.assign({
-      css: styles$v.checkmark,
+      css: styles$w.checkmark,
       viewBox: "0 0 52 52"
     }, {
       children: 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"
       })
     })), jsx(Typography, Object.assign({
-      css: styles$v.saved
+      css: styles$w.saved
     }, {
       children: t("manage-defaults:status.saved")
     }))]
   })) : jsxs("div", Object.assign({
-    css: [styles$v.container, {
+    css: [styles$w.container, {
       padding: "0"
     }]
   }, {
@@ -5732,7 +5732,7 @@ const SaveStatus = ({
       }),
       name: IconNames.CANCEL_FILLED
     }), jsx(Typography, Object.assign({
-      css: styles$v.savingFailed
+      css: styles$w.savingFailed
     }, {
       children: t("manage-defaults:status.savingFailed")
     }))]
@@ -5785,7 +5785,7 @@ const Spacer = props => jsx("div", {
   css: getSpacerStyles(props)
 });
 
-const styles$u = createStyles({
+const styles$v = createStyles({
   content: theme => ({
     padding: `${theme.spacing(3)}px ${theme.spacing(4)}px`
   }),
@@ -5833,10 +5833,10 @@ const CollapsiblePanel = ({
   const [isExpanded, toggleIsExpanded] = useToggle(initialExpanded);
   return jsxs(Fragment, {
     children: [jsx("div", Object.assign({
-      css: styles$u.header
+      css: styles$v.header
     }, {
       children: jsxs(Link, Object.assign({
-        css: styles$u.link,
+        css: styles$v.link,
         onClick: event => {
           event.preventDefault();
           toggleIsExpanded();
@@ -5856,7 +5856,7 @@ const CollapsiblePanel = ({
             errors: errors,
             isSaving: isSaving
           }), jsx(Icon, {
-            css: styles$u.icon,
+            css: styles$v.icon,
             "data-testid": "collapsible-panel-dropdown",
             name: isExpanded ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM,
             size: IconSize.SIZE_LARGE
@@ -5864,7 +5864,7 @@ const CollapsiblePanel = ({
         }))]
       }))
     })), isExpanded ? jsx("section", Object.assign({
-      css: styles$u.content
+      css: styles$v.content
     }, {
       children: children
     })) : jsx(Spacer, {
@@ -7530,7 +7530,7 @@ const FormPortal = ({
   });
 };
 
-const styles$t = createStyles({
+const styles$u = createStyles({
   chipList: theme => ({
     gap: theme.spacing(1)
   }),
@@ -7690,7 +7690,7 @@ const AddFundsForm = ({
       })), jsx(Spacer, {
         multiplier: 2
       }), jsx(ChipList, Object.assign({
-        css: styles$t.chipList,
+        css: styles$u.chipList,
         onChange: idx => {
           const chip = chips[idx];
           setSelectedChip(chip);
@@ -7705,7 +7705,7 @@ const AddFundsForm = ({
         }
       }, {
         children: chips.map(chip => jsx(Chip, Object.assign({
-          css: styles$t.getChip({
+          css: styles$u.getChip({
             isDisabled: chip.value < _minimumAmount,
             isSelected: chip.value === selectedChip.value
           }),
@@ -7722,7 +7722,7 @@ const AddFundsForm = ({
           multiplier: 1
         }), jsx(MoneyInput, {
           control: form.control,
-          css: styles$t.fundsInput,
+          css: styles$u.fundsInput,
           defaultValue: {
             amount: undefined,
             currency: SE.Currency.USD
@@ -7847,7 +7847,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)}`
@@ -7976,12 +7976,12 @@ const AutoFundingForm = ({
       }, {
         children: t("manage-funding:autoFunding.readSettings", Object.assign({}, autoFundingConfig))
       })), jsx(LinkAction, {
-        css: styles$s.edit,
+        css: styles$t.edit,
         onClick: () => handleToggle(true),
         title: t("manage-funding:autoFunding:edit")
       })]
     }), 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
@@ -7992,11 +7992,11 @@ const AutoFundingForm = ({
       }, {
         children: t("manage-funding:autoFunding:editSettings")
       })), jsx("div", Object.assign({
-        css: styles$s.marginLeft
+        css: styles$t.marginLeft
       }, {
         children: 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,
@@ -8009,11 +8009,11 @@ const AutoFundingForm = ({
           showCurrencySymbol: true
         })
       })), jsx("div", Object.assign({
-        css: styles$s.marginLeft
+        css: styles$t.marginLeft
       }, {
         children: 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,
@@ -8026,11 +8026,11 @@ const AutoFundingForm = ({
           showCurrencySymbol: true
         })
       })), jsx("div", Object.assign({
-        css: styles$s.marginLeft
+        css: styles$t.marginLeft
       }, {
         children: 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,
@@ -8070,7 +8070,7 @@ const AutoFundingForm = ({
   });
 };
 
-const styles$r = isLabelRight => createStyles({
+const styles$s = isLabelRight => createStyles({
   inlineContainer: theme => ({
     alignItems: "center",
     display: "flex",
@@ -8090,14 +8090,14 @@ const InlineLabel = ({
   isLabelRight,
   labelProps: _labelProps = {}
 }) => jsxs("div", Object.assign({
-  css: styles$r(isLabelRight).inlineContainer
+  css: styles$s(isLabelRight).inlineContainer
 }, {
   children: [jsx(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
   })
@@ -8131,7 +8131,7 @@ const CarrierBalance = ({
   }, {
     children: isFetchingCarrier ? jsx(Spinner, {}) : jsx(Typography, Object.assign({
       bold: true,
-      css: styles$q.getBalanceText(carrierBalance)
+      css: styles$r.getBalanceText(carrierBalance)
     }, {
       children: carrierBalance === undefined ? "----" : formatMoney({
         amount: carrierBalance,
@@ -8159,6 +8159,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"
@@ -8173,8 +8177,8 @@ const CarrierIcon = ({
   size: _size = "regular"
 }) => {
   const logoData = logoDataByCarrierCode$1[carrierCode];
-  if (!logoData) return jsx("div", {
-    children: carrierCode.toString()
+  if (!logoData) return jsx(Chip, {
+    children: carrierCode.toString().toUpperCase()
   });
   const {
     logo,
@@ -8182,7 +8186,7 @@ const CarrierIcon = ({
   } = logoData;
   // TODO: use theme ICONSIZE
   return jsx("img", {
-    alt: `${name}-logo`,
+    alt: name,
     height: iconSize[_size],
     src: logo,
     width: iconSize[_size]
@@ -8339,7 +8343,7 @@ const Cube = _a => {
   }));
 };
 
-const styles$p = createStyles({
+const styles$q = createStyles({
   getDateRangeSelect: fullWidth => theme => ({
     minWidth: theme.spacing(30),
     position: "relative",
@@ -8364,7 +8368,7 @@ const DateRangeSelect = ({
     void onChange(nextOption);
   };
   return jsx(Select$1, Object.assign({
-    css: styles$p.getDateRangeSelect(fullWidth),
+    css: styles$q.getDateRangeSelect(fullWidth),
     "data-testid": "date-range-select",
     label: t("wallet-history:dateRange"),
     leftContent: jsx(Icon, {
@@ -8433,7 +8437,7 @@ const DateRangeCombo = ({
   });
 };
 
-const styles$o = createStyles({
+const styles$p = createStyles({
   container: theme => ({
     display: "flex",
     flexDirection: "column",
@@ -8464,13 +8468,13 @@ const DisplayTerm = ({
     t
   } = useTranslation();
   return jsx("ul", Object.assign({
-    css: styles$o.container
+    css: styles$p.container
   }, {
     children: term.links.map(({
       link,
       title
     }) => jsxs("li", Object.assign({
-      css: styles$o.termLink
+      css: styles$p.termLink
     }, {
       children: [jsx(Typography, Object.assign({
         variant: "subtitle1"
@@ -8479,7 +8483,7 @@ const DisplayTerm = ({
           defaultValue: title
         })
       })), jsx(Link, Object.assign({
-        css: styles$o.link,
+        css: styles$p.link,
         href: link,
         isExternal: true,
         target: "_blank"
@@ -8537,7 +8541,7 @@ const ErrorFallback = ({
   }));
 };
 
-const styles$n = createStyles({
+const styles$o = createStyles({
   icon: theme => ({
     color: theme.palette.primary.main,
     marginRight: theme.spacing(2)
@@ -8587,10 +8591,10 @@ const Section = _a => {
     rest = __rest(_a, ["bold", "title", "children", "rightContent"]);
   return jsxs(Fragment, {
     children: [title && jsx("summary", Object.assign({
-      css: styles$n.summary
+      css: styles$o.summary
     }, {
       children: jsxs("div", Object.assign({
-        css: styles$n.summaryWrapper
+        css: styles$o.summaryWrapper
       }, {
         children: [title && typeof title === "string" ? jsx(Typography, Object.assign({
           bold: bold,
@@ -8598,20 +8602,20 @@ const Section = _a => {
         }, {
           children: title
         })) : title, rightContent && jsx("div", Object.assign({
-          css: styles$n.rightContentWrapper
+          css: styles$o.rightContentWrapper
         }, {
           children: rightContent
         }))]
       }))
     })), 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
   }),
@@ -8706,7 +8710,7 @@ const FundAndPurchase = ({
     }, {
       children: [jsx(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,
@@ -8726,7 +8730,7 @@ const FundAndPurchase = ({
   // render when no rate has been selected yet
   if (!carrierId) return jsxs("div", Object.assign({
     className: className,
-    css: styles$m.container
+    css: styles$n.container
   }, {
     children: [jsxs(Spread, {
       children: [jsx(CarrierBalance, {
@@ -8750,7 +8754,7 @@ const FundAndPurchase = ({
   if (isPreferredRate) {
     return jsxs("div", Object.assign({
       className: className,
-      css: styles$m.container
+      css: styles$n.container
     }, {
       children: [jsx(CarrierBalance, {
         balance: uspsBalance
@@ -8768,7 +8772,7 @@ const FundAndPurchase = ({
     //         show balance, but not the funding form.
     if (!isFundingEnabled) return jsxs("div", Object.assign({
       className: className,
-      css: styles$m.container
+      css: styles$n.container
     }, {
       children: [jsx(CarrierBalance, {
         carrierId: carrierId
@@ -8810,13 +8814,13 @@ const FundAndPurchase = ({
           var _a, _b;
           return jsxs(Fragment, {
             children: [jsxs("section", Object.assign({
-              css: styles$m.getFormExtension(addFundsForm.isCustomAmount)
+              css: styles$n.getFormExtension(addFundsForm.isCustomAmount)
             }, {
               children: [jsx(InlineLabel, Object.assign({
                 label: t("manage-funding:fundAndPurchase.newBalance")
               }, {
                 children: jsx(Typography, Object.assign({
-                  css: styles$m.balanceText
+                  css: styles$n.balanceText
                 }, {
                   children: formatMoney({
                     amount: balance + ((_a = addFundsForm.selectedAmount) !== null && _a !== void 0 ? _a : 0),
@@ -8827,7 +8831,7 @@ const FundAndPurchase = ({
                 label: t("manage-funding:fundAndPurchase.finalBalance")
               }, {
                 children: jsx(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,
@@ -8864,7 +8868,7 @@ const FundAndPurchase = ({
   }
 };
 
-const styles$l = createStyles({
+const styles$m = createStyles({
   itemDescription: theme => ({
     display: "flex",
     flexDirection: "column",
@@ -8906,15 +8910,15 @@ const ItemsBreakdownTableHeader = ({
 }) => jsx(TableHeader, {
   children: jsxs(TableBaseRow, {
     children: [jsx(TableHeaderCell, {}), jsx(TableHeaderCell, Object.assign({
-      css: styles$l.numericCell
+      css: styles$m.numericCell
     }, {
       children: "Qty"
     })), hasValue && jsx(TableHeaderCell, Object.assign({
-      css: styles$l.numericCell
+      css: styles$m.numericCell
     }, {
       children: "$/ea"
     })), hasTotal && jsx(TableHeaderCell, Object.assign({
-      css: styles$l.numericCell
+      css: styles$m.numericCell
     }, {
       children: "$ Total"
     }))]
@@ -8931,7 +8935,7 @@ const ItemsBreakdown = ({
   const hasValue = items.some(item => item.value !== undefined);
   const hasTotal = items.some(item => item.totalValue !== undefined);
   return jsx("div", Object.assign({
-    css: styles$l.tableWrapper
+    css: styles$m.tableWrapper
   }, {
     children: jsx(Table, Object.assign({
       header: jsx(ItemsBreakdownTableHeader, {
@@ -8949,25 +8953,25 @@ const ItemsBreakdown = ({
         }, index) => jsx(Fragment$1, {
           children: jsxs(TableBaseRow, {
             children: [jsxs(TableBodyCell, Object.assign({
-              css: styles$l.itemDescription
+              css: styles$m.itemDescription
             }, {
               children: [jsx(Typography, Object.assign({
-                css: styles$l.itemName
+                css: styles$m.itemName
               }, {
                 children: name
               })), jsx(Typography, {
                 children: detail
               })]
             })), jsx(TableBodyCell, Object.assign({
-              css: [styles$l.numericCell, styles$l.itemDetail]
+              css: [styles$m.numericCell, styles$m.itemDetail]
             }, {
               children: quantity
             })), hasValue && jsx(TableBodyCell, Object.assign({
-              css: [styles$l.numericCell, styles$l.itemDetail]
+              css: [styles$m.numericCell, styles$m.itemDetail]
             }, {
               children: value && formatMoney(value)
             })), hasTotal && jsx(TableBodyCell, Object.assign({
-              css: [styles$l.numericCell, styles$l.itemDetail]
+              css: [styles$m.numericCell, styles$m.itemDetail]
             }, {
               children: totalValue && formatMoney(totalValue)
             }))]
@@ -9044,6 +9048,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] = useState(false);
+  const buttonIconRef = useRef(null);
+  const {
+    t
+  } = useTranslation();
+  const toggleRowCountDropdown = 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 jsxs("div", Object.assign({
+    css: styles$l.footer
+  }, {
+    children: [jsxs("div", Object.assign({
+      css: styles$l.leftFooter
+    }, {
+      children: [jsx("div", Object.assign({
+        css: styles$l.rowCount
+      }, {
+        children: jsx(Trans, {
+          components: [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)
+          }
+        })
+      })), jsxs("div", Object.assign({
+        css: styles$l.rowsActions
+      }, {
+        children: [t("common:grid.rows"), jsx(Button, Object.assign({
+          id: "selected-row",
+          onClick: () => toggleRowCountDropdown(),
+          ref: buttonIconRef,
+          variant: ButtonVariant.TEXT
+        }, {
+          children: currentPageSize
+        })), isRowCountDropDownOpen ? jsx(Icon, {
+          name: IconNames.CHEVRON_TOP,
+          onClick: () => toggleRowCountDropdown(),
+          size: IconSize.SIZE_MEDIUM
+        }) : jsx(Icon, {
+          name: IconNames.CHEVRON_BOTTOM,
+          onClick: () => toggleRowCountDropdown(),
+          size: IconSize.SIZE_MEDIUM
+        }), jsx(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 => jsx(Option, Object.assign({
+            onClick: () => onPageSizeSelect(selection),
+            value: String(selection)
+          }, {
+            children: selection
+          }), selection))
+        }))]
+      }))]
+    })), jsx("div", {
+      children: jsx(Pagination, {
+        boundaryPagesToShow: 5,
+        currentPage: pagingData.page,
+        onPageChange: onPageSelect,
+        totalPages: pagingData.pages
+      })
+    })]
+  }));
+};
+
+const usePager = (initialPageSize = 10) => {
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = 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 = z.object({
   fullAddress: z.string().min(1)
 });
@@ -10679,111 +10838,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
-  } = useTranslation();
-  const [isRowCountDropDownOpen, setIsRowCountDropDownOpen] = useState(false);
   const [isChecked, setIsChecked] = useState((_a = data === null || data === void 0 ? void 0 : data.map(() => false)) !== null && _a !== void 0 ? _a : []);
-  const buttonIconRef = useRef(null);
-  const toggleRowCountDropdown = useCallback(() => setIsRowCountDropDownOpen(prev => !prev), []);
-  const sortedColumns = 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 = useMemo(() => isChecked.length > 0 && isChecked.every(check => check), [isChecked]);
   const isIndeterminate = useMemo(() => isChecked.some(check => check), [isChecked]);
@@ -10804,86 +10880,23 @@ const GridController = ({
   return jsx(Table, Object.assign({
     css: styles$e.table,
     "data-testid": "grid",
-    footer: jsxs("div", Object.assign({
-      css: styles$e.footer
-    }, {
-      children: [jsxs("div", Object.assign({
-        css: styles$e.leftFooter
-      }, {
-        children: [jsx("div", Object.assign({
-          css: styles$e.rowCount
-        }, {
-          children: jsx(Trans, {
-            components: [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)
-            }
-          })
-        })), jsxs("div", Object.assign({
-          css: styles$e.rowsActions
-        }, {
-          children: [t("common:grid.rows"), jsx(Button, Object.assign({
-            id: "selected-row",
-            onClick: () => toggleRowCountDropdown(),
-            ref: buttonIconRef,
-            variant: ButtonVariant.TEXT
-          }, {
-            children: currentPageSize
-          })), isRowCountDropDownOpen ? jsx(Icon, {
-            name: IconNames.CHEVRON_TOP,
-            onClick: () => toggleRowCountDropdown(),
-            size: IconSize.SIZE_MEDIUM
-          }) : jsx(Icon, {
-            name: IconNames.CHEVRON_BOTTOM,
-            onClick: () => toggleRowCountDropdown(),
-            size: IconSize.SIZE_MEDIUM
-          }), jsx(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 => jsx(Option, Object.assign({
-              onClick: () => onPageSizeSelect(selection),
-              value: String(selection)
-            }, {
-              children: selection
-            }), selection))
-          }))]
-        }))]
-      })), jsx(TableFooter, {
-        children: jsx(Pagination, {
-          boundaryPagesToShow: 5,
-          currentPage: pagingData.page,
-          onPageChange: onPageSelect,
-          totalPages: pagingData.pages
-        })
-      })]
-    })),
+    footer: footerContent && jsx(TableFooter, {
+      children: footerContent
+    }),
     header: jsx(TableHeader, {
-      children: jsxs(TableHeaderRow, Object.assign({
-        css: styles$e.tableHeader
-      }, {
-        children: [jsx(TableHeaderCell, {
+      children: jsxs(TableHeaderRow, {
+        children: [_useCheckboxes ? jsx(TableHeaderCell, Object.assign({
+          css: styles$e.checkboxHeader
+        }, {
           children: jsx(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) => jsx(TableHeaderCell, {
+        })) : null, getColumnHeaderContents().map((header, index) => jsx(TableHeaderCell, {
           children: header
         }, index))]
-      }))
+      })
     })
   }, {
     children: jsx(TableBody, {
@@ -10892,20 +10905,17 @@ const GridController = ({
         return jsxs(TableRow, Object.assign({
           onClick: onRowClick ? () => onRowClick(row) : undefined
         }, {
-          children: [jsx(TableBodyCell, {
+          children: [_useCheckboxes ? jsx(TableBodyCell, {
             children: jsx(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 jsx(TableBodyCell, {
-                children: render(row)
+                children: column.renderCellContent(row)
               }, index);
             }
           })]
@@ -10922,7 +10932,7 @@ const CellFormattedDate = ({
   const [formatWithShort, setFormatWithShort] = useState(!!short);
   return jsx("div", {
     children: jsx("div", {
-      children: formatWithShort ? formatDate(date) : formatDateDDMMYY(date)
+      children: formatWithShort ? formatDateDDMMYY(date) : formatDate(date)
     })
   });
 };
@@ -19138,4 +19148,4 @@ var onboarding = /*#__PURE__*/Object.freeze({
 	Element: Element
 });
 
-export { accountSettings as AccountSettings, AddFundsForm, AutoFundingForm, ButtonGroup, CarrierBalance, CarrierIcon, CarrierLogo, CellFormattedDate, CollapsiblePanel, CopyButton, Country, Cube, DateRangeCombo, DateRangeSelect, DisplayTerm, ErrorFallback, fields as Field, FieldLabel, FormPortal, FundAndPurchase, GridController, InlineLabel, ItemsBreakdown, labelWorkflow as LabelWorkflow, LinkAction, listCarriers$1 as ListCarriers, Loader, ManageFunding, manageWarehouses$1 as ManageWarehouses, onboarding as Onboarding, PageLayoutProvider, PaymentMethodSettings, Portal, PoweredByShipEngine, purchaseLabel as PurchaseLabel, RootPortalProvider, Section, Spacer, Spread, StoryNotes, UsState, UsaCity, viewShipment as ViewShipment, voidLabel as VoidLabel, assert, autoFundingSchema, calculateTotal, capitalizeFirstLetter, convertDecimalWeightToFractionalWeight, convertDimensions, convertFractionalWeightToDecimalWeight, convertPoundsAndOuncesToOunces, convertWeight, countries, countryCodes, createCodedErrors, createDictionary, createStyles, currencySymbol, daysAfter, errorMap, euCountryCodes, extendZod, featureFlagComponentNameLookup, featureFlags, formLogger, formatCreditCardNumber, formatDate, formatDateDDMMYY, formatDimensions, formatExpiration, formatFractionalWeight, formatMoney, getAddFundsSchema, getCancelledShipment, getCarrierIdByCarrierCode, getCustomsFromSalesOrder, getExpirationYears, getFeatures, getIsCustomsRequiredForSalesOrder, getIsCustomsRequiredForShipment, getIsInternationalShipment, getPendingShipment, getRateRequiresAcknowledgement, getRelativeDates, getRequestedServices, getSalesOrderItemsFromSalesOrderOrShipment, getShipmentByStatus, getTotalRateAmount, isDecimalWeight, isDomesticAddress, isEmptyAddress, isFlatRatePackageCode, isMetricWeightUnit, isMilitaryAddress, isNowOrInTheFuture, isPoBox, isPoBoxAddress, isString, isUnitedStatesTerritory, isUnsupportedByUps, isUpsCarrier, isUspsCarrier, moneySchema, mostRecent, nextDayCutoff, omitTime, overrideCarrierCodes$1 as overrideCarrierCodes, phoneSchema, phoneSchemaUnvalidated, postalCodeRegex$3 as postalCodeRegex, raise, sortByCreationDate, throwAny, throwJoinedMessages, usCities, usStateCodes, usStates, useAddressValidation, useBlackboxDetection, useCarrierMetadata, useConfirmationOptions, useCountryCodeOptions, useCustomsContentsOptions, useCustomsNonDeliveryOptions, useDateRangeOptions, useExpirationMonthOptions, useFeatures, useInsuranceProviderOptions, useNestedForm, usePackageOptions, usePageLayout, useRateOptions, useRootPortal, useRunOnceOnTrue, useScrubErrors, useServiceCodeOptions, useShipmentMetadata, useShippingPresetsOptions, useStateCodeOptions, useToggle, useWarehouseOptions, validationResolver };
+export { accountSettings as AccountSettings, AddFundsForm, AutoFundingForm, ButtonGroup, CarrierBalance, CarrierIcon, CarrierLogo, CellFormattedDate, CollapsiblePanel, CopyButton, Country, Cube, DateRangeCombo, DateRangeSelect, DisplayTerm, ErrorFallback, fields as Field, FieldLabel, FormPortal, FundAndPurchase, GridController, InlineLabel, ItemsBreakdown, labelWorkflow as LabelWorkflow, LinkAction, listCarriers$1 as ListCarriers, Loader, ManageFunding, manageWarehouses$1 as ManageWarehouses, onboarding as Onboarding, PageLayoutProvider, Pager, PaymentMethodSettings, Portal, PoweredByShipEngine, purchaseLabel as PurchaseLabel, RootPortalProvider, Section, Spacer, Spread, StoryNotes, UsState, UsaCity, viewShipment as ViewShipment, voidLabel as VoidLabel, assert, autoFundingSchema, calculateTotal, capitalizeFirstLetter, convertDecimalWeightToFractionalWeight, convertDimensions, convertFractionalWeightToDecimalWeight, convertPoundsAndOuncesToOunces, convertWeight, countries, countryCodes, createCodedErrors, createDictionary, createStyles, currencySymbol, daysAfter, errorMap, euCountryCodes, extendZod, featureFlagComponentNameLookup, featureFlags, formLogger, formatCreditCardNumber, formatDate, formatDateDDMMYY, formatDimensions, formatExpiration, formatFractionalWeight, formatMoney, getAddFundsSchema, getCancelledShipment, getCarrierIdByCarrierCode, getCustomsFromSalesOrder, getExpirationYears, getFeatures, getIsCustomsRequiredForSalesOrder, getIsCustomsRequiredForShipment, getIsInternationalShipment, getPendingShipment, getRateRequiresAcknowledgement, getRelativeDates, getRequestedServices, getSalesOrderItemsFromSalesOrderOrShipment, getShipmentByStatus, getTotalRateAmount, isDecimalWeight, isDomesticAddress, isEmptyAddress, isFlatRatePackageCode, isMetricWeightUnit, isMilitaryAddress, isNowOrInTheFuture, isPoBox, isPoBoxAddress, isString, isUnitedStatesTerritory, isUnsupportedByUps, isUpsCarrier, isUspsCarrier, moneySchema, mostRecent, nextDayCutoff, omitTime, overrideCarrierCodes$1 as overrideCarrierCodes, phoneSchema, phoneSchemaUnvalidated, postalCodeRegex$3 as postalCodeRegex, raise, sortByCreationDate, throwAny, throwJoinedMessages, usCities, usStateCodes, usStates, useAddressValidation, useBlackboxDetection, useCarrierMetadata, useConfirmationOptions, useCountryCodeOptions, useCustomsContentsOptions, useCustomsNonDeliveryOptions, useDateRangeOptions, useExpirationMonthOptions, useFeatures, useInsuranceProviderOptions, useNestedForm, usePackageOptions, usePageLayout, usePager, useRateOptions, useRootPortal, useRunOnceOnTrue, useScrubErrors, useServiceCodeOptions, useShipmentMetadata, useShippingPresetsOptions, useStateCodeOptions, useToggle, useWarehouseOptions, validationResolver };