@shipengine/elements 2.25.0 → 2.26.0

package/dist/cjs/features/manage-carriers/hooks/use-list-funding-source-carriers.cjs

@@ -45,22 +45,21 @@ const useListFundingSourceCarriers = () => {
       }, insurance.getInsuranceProviderWithFriendlyName(t.termType));
     });
   }, [optionalTerms, insuranceProviderAcceptedTerms]);
-  const normalizeConnectedCarrierCodes = new Set(connectedCarriers === null || connectedCarriers === void 0 ? void 0 : connectedCarriers.map(c => {
-    var _a;
-    return c.carrierCode === "usps" || ((_a = c.nickname) === null || _a === void 0 ? void 0 : _a.includes("free")) ? "stamps_com" : c.carrierCode;
-  }));
-  const fundingSourceCarrierMetadata = carrierProfiles === null || carrierProfiles === void 0 ? void 0 : carrierProfiles.map(cp => {
+  const normalizeCarrierCode = (carrierCode, nickname) => carrierCode === "usps" || (nickname === null || nickname === void 0 ? void 0 : nickname.includes("free")) ? "stamps_com" : carrierCode;
+  const normalizeConnectedCarrierCodes = new Set(connectedCarriers === null || connectedCarriers === void 0 ? void 0 : connectedCarriers.map(c => normalizeCarrierCode(c.carrierCode, c.nickname)));
+  const fundingSourceCarriersData = carrierProfiles === null || carrierProfiles === void 0 ? void 0 : carrierProfiles.map(cp => {
     var _a, _b;
-    return {
+    const carrier = {
       carrierProfile: cp,
       friendlyName: (_b = (_a = carrierMetadata[cp.carrierCode]) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : cp.carrierCode
     };
+    return {
+      carrier,
+      isConnected: normalizeConnectedCarrierCodes.has(cp.carrierCode)
+    };
   });
   return {
-    data: fundingSourceCarrierMetadata === null || fundingSourceCarrierMetadata === void 0 ? void 0 : fundingSourceCarrierMetadata.map(m => ({
-      carrier: m,
-      isConnected: normalizeConnectedCarrierCodes.has(m.carrierProfile.carrierCode)
-    })),
+    data: fundingSourceCarriersData,
     error: error,
     insuranceProviderProfiles,
     isLoading: isInitialLoading || isFundingSourceMetadataLoading || isInsuranceProviderAcceptedTermsLoading,

package/dist/cjs/features/manage-carriers/manage-carriers-row/manage-carriers-row.cjs

@@ -7,6 +7,7 @@ var reactApi = require('@shipengine/react-api');
 var React = require('react');
 var reactI18next = require('react-i18next');
 var manageCarriersRow_styles = require('./manage-carriers-row.styles.cjs');
+var upsTermsDisclosure = require('../../../components/ups-terms-disclosure/ups-terms-disclosure.cjs');
 var addressPreferenceContext = require('../../../components/address-preference-context/address-preference-context.cjs');
 var registerFundingSourceCarrierForm = require('../register-funding-source-carrier-form/register-funding-source-carrier-form.cjs');
 var carrierIcon = require('../../../components/carrier-icon/carrier-icon.cjs');
@@ -34,6 +35,10 @@ const ManageCarriersRow = ({
   const requirementTypes = carrierProfile.registrationRequirements.map(r => r.requirementType);
   const requiresAddress = requirementTypes.includes(reactApi.SE.MetadataRequirement.PickupAddress);
   const requiresTermsAcceptance = carrierProfile.requiredTerms.length > 0;
+  const requiredCarrierTerms = {
+    links: carrierProfile.requiredTerms.flatMap(term => term.links),
+    disclosure: carrierProfile.carrierCode === "ups_walleted" ? jsxRuntime.jsx(upsTermsDisclosure.UPSTermsDisclosure, {}) : undefined
+  };
   const handleRegister = values => _tslib.__awaiter(void 0, void 0, void 0, function* () {
     setIsSubmitting(true);
     showDropDown && setShowDropDown(false);
@@ -96,7 +101,7 @@ const ManageCarriersRow = ({
           onCancel: () => setShowDropDown(false),
           onSubmit: handleRegister,
           requirementTypes: requirementTypes,
-          terms: carrierProfile.requiredTerms
+          terms: requiredCarrierTerms
         })
       })
     })]

package/dist/cjs/features/manage-carriers/register-funding-source-carrier-form/register-funding-source-carrier-form.cjs

@@ -151,9 +151,9 @@ const RegisterFundingSourceCarrierForm = ({
             children: [jsxRuntime.jsx(giger.Typography, {
               variant: "heading4",
               children: t("terms.carriersTitle")
-            }), terms.map((term, index) => jsxRuntime.jsx(displayTerm.DisplayTerm, {
-              term: term
-            }, index))]
+            }), jsxRuntime.jsx(displayTerm.DisplayTerm, {
+              terms: terms
+            })]
           }), jsxRuntime.jsx(buttonGroup.ButtonGroup, {
             justify: "end",
             children: jsxRuntime.jsx(giger.Button, {

package/dist/cjs/locales/en/grid-controller.json.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var gridController = {
+	"grid-controller": {
+	showExportCSV: {
+		button: "Export CSV",
+		"generic-error-message": "We couldn’t export your CSV. Please try again.",
+		"limit-error": "We're sorry, but exporting more than {{LIMIT_GRID_ITEMS_EXPORT}} items is not supported at this time."
+	}
+}
+};
+
+module.exports = gridController;

package/dist/cjs/locales/en/index.cjs

@@ -3,6 +3,7 @@
 var accountSettings = require('./account-settings.json.cjs');
 var common = require('./common.json.cjs');
 var connectCarrier = require('./connect-carrier.json.cjs');
+var gridController = require('./grid-controller.json.cjs');
 var listLabels = require('./list-labels.json.cjs');
 var listShipments = require('./list-shipments.json.cjs');
 var manageCarriers = require('./manage-carriers.json.cjs');
@@ -20,6 +21,6 @@ var viewShipment = require('./view-shipment.json.cjs');
 var voidLabel = require('./void-label.json.cjs');
 var walletHistory = require('./wallet-history.json.cjs');
 
-var en = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, accountSettings), common.default), connectCarrier), listLabels), listShipments), manageDefaults), manageDefaults), manageFunding), manageWarehouses), onboarding.default), paymentMethod), purchaseLabel), rateDetails), registerCarrier), registerWallet), manageCarriers), vatSettings), viewShipment), voidLabel), walletHistory);
+var en = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, accountSettings), common.default), connectCarrier), listLabels), listShipments), manageDefaults), manageDefaults), manageFunding), manageWarehouses), onboarding.default), paymentMethod), purchaseLabel), rateDetails), registerCarrier), registerWallet), manageCarriers), vatSettings), viewShipment), voidLabel), walletHistory), gridController);
 
 module.exports = en;

package/dist/cjs/locales/en/onboarding.json.cjs

@@ -26,6 +26,11 @@ var onboarding = {
 		title: "Activate ShipEngine Services",
 		subtitle: "Your account includes access to services from these partners."
 	},
+	upsDisclosure: {
+		title: "UPS Promotional Rates and Technology Agreements",
+		line1: "I have read and agree to the Terms and Conditions and the Privacy Policy, and I confirm that information I have provided is accurate and truthful.",
+		line2: "To start shipping with UPS, you must first agree to the following: UPS®, the UPS brandmark, UPS Ready® and the color brown are trademarks of the United Parcel Service of America, Inc. All Rights Reserved."
+	},
 	warehouse: {
 		title: "Ship From Address",
 		subtitle: "Enter your default Ship From Address",

package/dist/cjs/package.json.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-var version = "2.25.0";
+var version = "2.26.0";
 
 exports.version = version;

package/dist/cjs/utilities/files.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+/**
+ * Creates a local file from an AxiosResponse containing a blob.
+ */
+const createLocalFileFromBlobResponse = (type, {
+  data: blob
+}) => {
+  const url = URL.createObjectURL(new Blob([blob], {
+    type: blob.type
+  }));
+  const fileName = type === "label" ? "labels-download" : "shipments-download";
+  triggerDownload(url, fileName);
+};
+/**
+ * Triggers the download of the sent URL.
+ * @param {string} url - The URL for the download.
+ * @param {string} filename - The filename for the download.
+ */
+const triggerDownload = (url, filename) => {
+  const downloadLink = createInvisibleAnchor(url, filename);
+  document.body.appendChild(downloadLink);
+  downloadLink.click();
+  document.body.removeChild(downloadLink);
+};
+const createInvisibleAnchor = (url, filename) => {
+  const downloadLink = document.createElement("a");
+  downloadLink.setAttribute("href", url);
+  downloadLink.setAttribute("download", filename);
+  downloadLink.style.display = "none";
+  return downloadLink;
+};
+
+exports.createLocalFileFromBlobResponse = createLocalFileFromBlobResponse;
+exports.triggerDownload = triggerDownload;

package/dist/cjs/utilities/formatString.cjs

@@ -19,9 +19,18 @@ const replaceSpacesWithDashes = str => str === null || str === void 0 ? void 0 :
 const addSpaceBetweenWords = str => str.replace(/([a-z])([A-Z])/g, "$1 $2") // add space if there is a lowercase letter followed by an uppercase letter
 .replace(/(?<=[a-zA-Z])(\d)/g, " $1") // add space if there is a letter followed by a number
 .trim();
+/**
+ * Converts a string from camelCase or PascalCase to snake_case
+ *
+ * @example
+ * toSnakeCase("helloWorld") // returns "hello_world"
+ * toSnakeCase("HelloWorld") // returns "hello_world"
+ */
+const toSnakeCase = str => str.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
 
 exports.addSpaceBetweenWords = addSpaceBetweenWords;
 exports.capitalizeFirstLetter = capitalizeFirstLetter;
 exports.capitalizeFirstLetterOfEachWord = capitalizeFirstLetterOfEachWord;
 exports.pascalize = pascalize;
 exports.replaceSpacesWithDashes = replaceSpacesWithDashes;
+exports.toSnakeCase = toSnakeCase;

package/dist/cjs/utilities/index.cjs

@@ -2,6 +2,7 @@
 
 var styles = require('./styles.cjs');
 var checks = require('./checks.cjs');
+var files = require('./files.cjs');
 var address = require('./address.cjs');
 var featureFlags = require('./feature-flags/feature-flags.cjs');
 
@@ -12,6 +13,7 @@ exports.scopeTheme = styles.scopeTheme;
 exports.getSellerIdFromToken = checks.getSellerIdFromToken;
 exports.isOnboarded = checks.isOnboarded;
 exports.validateShipFromAddress = checks.validateShipFromAddress;
+exports.createLocalFileFromBlobResponse = files.createLocalFileFromBlobResponse;
 exports.getCountries = address.getCountries;
 exports.getUsStates = address.getUsStates;
 exports.getDefaultFeatures = featureFlags.getDefaultFeatures;

package/dist/cjs/workflows/onboarding/components/terms-agreement-form/terms-agreement-form.cjs

@@ -88,34 +88,38 @@ const TermsAgreementForm = ({
           variant: "body1",
           children: t("terms.shipEngineTitle")
         }), jsxRuntime.jsx(displayTerm.DisplayTerm, {
-          term: {
+          terms: {
             links: [{
               link: "https://www.shipengine.com/terms-of-service/",
-              locale: "en-US",
-              title: t("onboarding:termsAndAgreementLinkText.shipEngineToS")
+              title: "ShipEngine Terms of Service",
+              locale: "en-US"
             }, {
-              link: "https://auctane.com/legal/privacy-policy/",
-              locale: "en-US",
-              title: t("onboarding:termsAndAgreementLinkText.auctanePrivacyPolicy")
+              link: "https://www.auctane.com/terms-of-service/",
+              title: "Auctane Terms of Service",
+              locale: "en-US"
+            }, {
+              link: "https://www.stamps.com/wallet-terms-of-service/",
+              title: "Stamps Wallet Terms of Service",
+              locale: "en-US"
             }]
           }
         }), requiredTerms.map(term => jsxRuntime.jsx(displayTerm.DisplayTerm, {
-          term: term
+          terms: term
         }, term.termType)), !!carrierTerms.length && jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsx(giger.Typography, {
             bold: true,
             variant: "body1",
             children: t("terms.carriersTitle")
-          }), carrierTerms.map(term => jsxRuntime.jsx(displayTerm.DisplayTerm, {
-            term: term
-          }, term.termType))]
+          }), carrierTerms.map((term, idx) => jsxRuntime.jsx(displayTerm.DisplayTerm, {
+            terms: term
+          }, idx))]
         }), enableParcelGuard && !!insuranceProviderTerms.length && jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsx(giger.Typography, {
             bold: true,
             variant: "body1",
             children: t("terms.insuranceProvidersTitle")
           }), insuranceProviderTerms.map(term => jsxRuntime.jsx(displayTerm.DisplayTerm, {
-            term: term
+            terms: term
           }, term.termType))]
         })]
       }), jsxRuntime.jsx(buttonGroup.ButtonGroup, {

package/dist/cjs/workflows/onboarding/components/terms-agreement-form/terms-agreement-form.styles.cjs

@@ -15,9 +15,6 @@ const styles = styles$1.createStyles({
     display: "inline-flex",
     fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.normal
   }),
-  fullWidth: {
-    width: "100%"
-  },
   termsWell: theme => ({
     backgroundColor: styles$1.scopeTheme(theme).palette.gray.ultraLight,
     marginBottom: styles$1.scopeTheme(theme).spacing(6),

package/dist/cjs/workflows/onboarding/components/terms-agreement-step/terms-agreement-step.cjs

@@ -8,8 +8,10 @@ var termsAgreementStep_styles = require('./terms-agreement-step.styles.cjs');
 var termsAgreementForm = require('../terms-agreement-form/terms-agreement-form.cjs');
 var useCarrierMetadata = require('../../../../features/manage-carriers/hooks/use-carrier-metadata.cjs');
 var elementsContextProvider = require('../../../../elements-provider/elements-context-provider.cjs');
+var upsTermsDisclosure = require('../../../../components/ups-terms-disclosure/ups-terms-disclosure.cjs');
 var spacer = require('../../../../components/spacer/spacer.cjs');
 var stepHeader = require('../step-header/step-header.cjs');
+var carrierIcon = require('../../../../components/carrier-icon/carrier-icon.cjs');
 var carrierLogo = require('../../../../components/carrier-logo/carrier-logo.cjs');
 
 const TermsAgreementStep = ({
@@ -31,11 +33,17 @@ const TermsAgreementStep = ({
   } = elementsContextProvider.useElements();
   const carrierFriendlyNames = useCarrierMetadata.useCarrierMetadata();
   const hideTerms = carrierProfilesToRegister.length === 0 && (insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.length) === 0;
-  const carrierTerms = carrierProfilesToRegister.flatMap(c => c.requiredTerms);
+  const carrierTerms = carrierProfilesToRegister.map(c => {
+    const disclosure = c.carrierCode === "ups_walleted" ? jsxRuntime.jsx(upsTermsDisclosure.UPSTermsDisclosure, {}) : undefined;
+    return {
+      links: c.requiredTerms.flatMap(term => term.links),
+      disclosure
+    };
+  });
   const insuranceProviderTerms = (_a = insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.flatMap(p => p.terms)) !== null && _a !== void 0 ? _a : [];
   const showParcelGuard = enableParcelGuard && ((_b = insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.length) !== null && _b !== void 0 ? _b : 0) > 0;
   const hasInsuranceToRegister = showParcelGuard && ((_c = insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.length) !== null && _c !== void 0 ? _c : 0) > 0;
-  const hasEnabledCarriersConfigurationError = !enabledCarrierProfiles || (enabledCarrierProfiles === null || enabledCarrierProfiles === void 0 ? void 0 : enabledCarrierProfiles.length) === 0;
+  const hasEnabledCarriersConfigurationError = !showStampsLogo && (!enabledCarrierProfiles || (enabledCarrierProfiles === null || enabledCarrierProfiles === void 0 ? void 0 : enabledCarrierProfiles.length) === 0);
   const hasAlreadyConnectedCarriers = ((_d = enabledCarrierProfiles === null || enabledCarrierProfiles === void 0 ? void 0 : enabledCarrierProfiles.length) !== null && _d !== void 0 ? _d : 0) > 0 && carrierProfilesToRegister.length === 0 && (insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.length) === 0;
   const hasCarriersToRegister = ((_e = enabledCarrierProfiles === null || enabledCarrierProfiles === void 0 ? void 0 : enabledCarrierProfiles.length) !== null && _e !== void 0 ? _e : 0) > 0 && carrierProfilesToRegister.length > 0;
   // Handle case where partner has not correctly enabled carriers and there is no insurance to register
@@ -50,28 +58,33 @@ const TermsAgreementStep = ({
       children: t("errors.noCarriers.subtitle")
     });
   }
-  const renderCarrierLogos = () => {
+  const renderCarrierIcons = () => {
     var _a;
-    if (!carrierProfilesToRegister.length) return null;
     const stampsCarrierProfile = {
       carrierCode: "stamps_com",
       carrierName: (_a = carrierFriendlyNames["stamps_com"]) === null || _a === void 0 ? void 0 : _a.name
     };
+    let carriersToDisplay;
     // kind of a goofy way to just display stamps/usps logo without sending it in the payload to register
     // we don't want to register stamps as a carrier if it's not being used as the primary payment method
-    const carriersToDisplay = showStampsLogo ? [stampsCarrierProfile, ...carrierProfilesToRegister] : carrierProfilesToRegister;
+    if (showStampsLogo) {
+      carriersToDisplay = [stampsCarrierProfile, ...carrierProfilesToRegister];
+    } else {
+      carriersToDisplay = carrierProfilesToRegister;
+    }
     return carriersToDisplay.map(p => {
       var _a;
-      return jsxRuntime.jsx(carrierLogo.CarrierLogo, {
+      return jsxRuntime.jsx(carrierIcon.CarrierIcon, {
         carrierCode: p.carrierCode,
         carrierName: ((_a = carrierFriendlyNames[p.carrierCode]) === null || _a === void 0 ? void 0 : _a.name) || p.carrierCode,
-        size: "lg"
+        size: giger.IconSize.SIZE_EXTRA_LARGE
       }, p.carrierCode);
     });
   };
   const renderInsuranceLogos = () => {
     if (!hasInsuranceToRegister) return null;
-    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    return jsxRuntime.jsxs("div", {
+      css: termsAgreementStep_styles.styles.insuranceLogosContainer,
       children: [hasCarriersToRegister && jsxRuntime.jsx(giger.Icon, {
         css: termsAgreementStep_styles.styles.plus,
         name: gigerTheme.IconNames.PLUS,
@@ -97,13 +110,13 @@ const TermsAgreementStep = ({
       }), jsxRuntime.jsx(spacer.Spacer, {
         multiplier: 4
       })]
-    }), (hasCarriersToRegister || hasInsuranceToRegister) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    }), (hasCarriersToRegister || hasInsuranceToRegister || showStampsLogo) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(stepHeader.StepHeader, {
         subtitle: t("termsAgreement.subtitle"),
         title: t("termsAgreement.title")
       }), jsxRuntime.jsxs("div", {
         css: termsAgreementStep_styles.styles.carrierLogos,
-        children: [renderCarrierLogos(), renderInsuranceLogos()]
+        children: [renderCarrierIcons(), renderInsuranceLogos()]
       })]
     }), jsxRuntime.jsx("div", {
       css: termsAgreementStep_styles.styles.fullWidth,

package/dist/cjs/workflows/onboarding/components/terms-agreement-step/terms-agreement-step.styles.cjs

@@ -9,7 +9,8 @@ const styles = styles$1.createStyles({
     flexWrap: "wrap",
     gap: styles$1.scopeTheme(theme).spacing(1),
     justifyContent: "center",
-    padding: `${styles$1.scopeTheme(theme).spacing(3)}px 0`
+    alignItems: "center",
+    padding: `${styles$1.scopeTheme(theme).spacing(2)}px 0`
   }),
   container: theme => ({
     alignItems: "center",
@@ -22,9 +23,14 @@ const styles = styles$1.createStyles({
   fullWidth: {
     width: "100%"
   },
-  plus: () => ({
-    alignItems: "center",
-    display: "flex"
+  plus: theme => ({
+    alignSelf: "center",
+    paddingBottom: styles$1.scopeTheme(theme).spacing(1)
+  }),
+  insuranceLogosContainer: theme => ({
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(1),
+    paddingTop: styles$1.scopeTheme(theme).spacing(1)
   })
 });
 

package/dist/esm/components/display-term/display-term.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import { Link, Icon, IconSize } from '@shipengine/giger';
 import { IconNames } from '@shipengine/giger-theme';
 import { encode } from 'js-base64';
@@ -6,14 +6,23 @@ import { useTranslation } from 'react-i18next';
 import { styles } from './display-term.styles.js';
 
 const DisplayTerm = ({
-  term
+  terms
 }) => {
   const {
     t
   } = useTranslation();
-  return jsx("ul", {
+  const {
+    links,
+    disclosure
+  } = terms;
+  return jsxs("ul", {
     css: styles.container,
-    children: term.links.map(({
+    children: [disclosure && jsx("li", {
+      css: {
+        listStyle: "none"
+      },
+      children: disclosure
+    }), links.map(({
       link,
       title
     }) => jsx("li", {
@@ -31,7 +40,7 @@ const DisplayTerm = ({
           size: IconSize.SIZE_SMALL
         })]
       })
-    }, title))
+    }, title))]
   });
 };
 

package/dist/esm/components/grid-controller/error-banner/error-banner.js

@@ -0,0 +1,72 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Icon, Typography } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { useState, useRef, useEffect } from 'react';
+import SvgReload from '../../../assets/reload.svg.js';
+import { styles } from './error-banner.styles.js';
+import { Label } from '../../history/history-card/label/label.js';
+import { LinkAction } from '../../link-action/link-action.js';
+
+// This component is a temporary solution to handle error display, design is working to improve more error patterns to display
+const ErrorBanner = ({
+  labelText,
+  linkTitle,
+  onClick,
+  showReloadIcon,
+  duration,
+  onDurationEnd
+}) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const timerRef = useRef(null);
+  // Set up the timer when the component mounts or duration changes
+  useEffect(() => {
+    if (duration && duration > 0) {
+      // Clear any existing timer
+      if (timerRef.current) clearTimeout(timerRef.current);
+      // Set up a new timer to hide the component after the specified duration
+      timerRef.current = setTimeout(() => {
+        setIsVisible(false);
+        // Call the onDurationEnd callback if provided
+        if (onDurationEnd) {
+          onDurationEnd();
+        }
+      }, duration);
+    }
+    // Clean up the timer when the component unmounts or duration changes
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [duration, onDurationEnd]);
+  if (!isVisible) return null;
+  return jsxs("div", {
+    css: styles.errorContainer,
+    children: [showReloadIcon && jsx(SvgReload, {
+      height: 24,
+      width: 24
+    }), linkTitle && !labelText && !onClick && jsxs("div", {
+      css: styles.errorContent,
+      children: [jsx(Icon, {
+        name: IconNames.ALERT
+      }), jsx(Typography, {
+        component: "p",
+        variant: "body2",
+        children: linkTitle
+      })]
+    }), linkTitle && labelText && onClick && jsx(Label, {
+      spacing: 0,
+      text: labelText !== null && labelText !== void 0 ? labelText : "",
+      textProps: {
+        css: styles.errorHeading
+      },
+      variant: "subtitle",
+      children: jsx(LinkAction, {
+        css: styles.errorCTA,
+        isBold: false,
+        onClick: onClick,
+        title: linkTitle
+      })
+    })]
+  });
+};
+
+export { ErrorBanner };

package/dist/esm/components/{error-display/error-display.styles.js → grid-controller/error-banner/error-banner.styles.js}

@@ -1,13 +1,11 @@
-import { createStyles, scopeTheme } from '../../utilities/styles.js';
+import { createStyles, scopeTheme } from '../../../utilities/styles.js';
 
 const styles = createStyles({
   errorContainer: theme => ({
     alignItems: "center",
-    backgroundColor: scopeTheme(theme).palette.gray.ultraLight,
+    backgroundColor: scopeTheme(theme).palette.error.light,
     display: "flex",
     flexDirection: "column",
-    paddingBottom: scopeTheme(theme).spacing(2),
-    paddingTop: scopeTheme(theme).spacing(2),
     rowGap: scopeTheme(theme).spacing(1)
   }),
   errorCTA: theme => ({
@@ -17,6 +15,12 @@ const styles = createStyles({
   }),
   errorHeading: theme => ({
     fontSize: scopeTheme(theme).typography.fontSize.S
+  }),
+  errorContent: theme => ({
+    display: "flex",
+    alignItems: "center",
+    gap: scopeTheme(theme).spacing(),
+    color: scopeTheme(theme).palette.error.main
   })
 });
 

package/dist/esm/components/grid-controller/error-banner/index.js

@@ -0,0 +1 @@
+export { ErrorBanner } from './error-banner.js';

package/dist/esm/components/grid-controller/grid-controller.js

@@ -1,8 +1,13 @@
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { TableRow, TableBodyCell, Skeleton, SkeletonVariant, SkeletonAnimation, Table, TableBody, Checkbox, TableHeader, TableHeaderRow, TableHeaderCell, TableFooter } from '@shipengine/giger';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { TableRow, TableBodyCell, Skeleton, SkeletonVariant, SkeletonAnimation, Button, ButtonVariant, IconTooltip, IconSize, Icon, Table, TableBody, Checkbox, TableHeader, TableHeaderRow, TableHeaderCell, TableFooter } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
 import { useState, useMemo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { styles } from './grid-controller.styles.js';
+import { ErrorBanner } from './error-banner/error-banner.js';
 
+const LIMIT_GRID_ITEMS_EXPORT = 10000;
+const ERROR_DISPLAY_DURATION = 7000;
 /**
  * @internal
  *
@@ -20,10 +25,23 @@ const GridController = ({
   isLoading = false,
   useCheckboxes = false,
   filters,
-  emptyContent
+  emptyContent,
+  showExportCSV = false,
+  onClickExportCSV,
+  totalAmountGridItems,
+  hasTrackingStatusFilter,
+  hasExportCSVError = false,
+  isExportCSVLoading = false,
+  onExportErrorDurationEnd
 }) => {
   var _a, _b, _c;
   const [isChecked, setIsChecked] = useState((_a = data === null || data === void 0 ? void 0 : data.map(() => false)) !== null && _a !== void 0 ? _a : []);
+  const {
+    t
+  } = useTranslation(["common", "grid-controller"]);
+  const dataAvailable = !!data.length;
+  const isItemsOverExportLimit = !!((totalAmountGridItems !== null && totalAmountGridItems !== void 0 ? totalAmountGridItems : 0) > LIMIT_GRID_ITEMS_EXPORT);
+  const isDisableExportButton = isItemsOverExportLimit || !dataAvailable;
   const columnHeaderContents = useMemo(() => columns.map(column => column.headerContent), [columns]);
   const loadingRows = useMemo(() => {
     const items = [];
@@ -63,8 +81,36 @@ const GridController = ({
     css: styles.wrapper,
     children: [filters && jsx("div", {
       css: styles.filters,
-      children: filters
-    }), data.length === 0 && emptyContent ? emptyContent : jsx(Table, {
+      children: jsxs(Fragment, {
+        children: [filters, showExportCSV && !hasTrackingStatusFilter && jsxs(Button, {
+          bold: false,
+          css: styles.button,
+          disabled: isItemsOverExportLimit || !dataAvailable || hasExportCSVError,
+          isLoading: isExportCSVLoading && !isDisableExportButton,
+          onClick: onClickExportCSV,
+          type: "button",
+          variant: ButtonVariant.FILLED,
+          children: [isItemsOverExportLimit ? jsx(IconTooltip, {
+            css: styles.iconTooltip,
+            icon: IconNames.DOWNLOAD,
+            size: IconSize.SIZE_MEDIUM,
+            children: jsx("div", {
+              children: t("grid-controller:showExportCSV.limit-error", {
+                LIMIT_GRID_ITEMS_EXPORT: new Intl.NumberFormat().format(LIMIT_GRID_ITEMS_EXPORT)
+              })
+            })
+          }) : jsx(Icon, {
+            css: styles.iconTooltip,
+            name: IconNames.UPLOAD,
+            size: IconSize.SIZE_MEDIUM
+          }), t("grid-controller:showExportCSV.button")]
+        })]
+      })
+    }), hasExportCSVError && !isDisableExportButton && jsx(ErrorBanner, {
+      duration: ERROR_DISPLAY_DURATION,
+      linkTitle: t("grid-controller:showExportCSV.generic-error-message"),
+      onDurationEnd: onExportErrorDurationEnd
+    }), !dataAvailable && emptyContent ? emptyContent : jsx(Table, {
       "data-testid": "grid",
       footer: footerContent && !isLoading && jsx(TableFooter, {
         css: styles.tableFooter,

package/dist/esm/components/grid-controller/grid-controller.styles.js

@@ -5,10 +5,17 @@ const styles = createStyles({
     width: scopeTheme(theme).spacing(6)
   }),
   filters: theme => ({
+    display: "flex",
     backgroundColor: scopeTheme(theme).palette.white,
     borderBottom: `1px solid ${scopeTheme(theme).palette.gray[200]}`,
     padding: scopeTheme(theme).spacing()
   }),
+  button: () => ({
+    marginLeft: "auto"
+  }),
+  iconTooltip: theme => ({
+    marginRight: scopeTheme(theme).spacing()
+  }),
   skeletonTableRow: () => ({
     height: "68px"
   }),
@@ -28,7 +35,10 @@ const styles = createStyles({
   wrapper: theme => Object.assign({
     height: "auto",
     overflow: "hidden"
-  }, scopeTheme(theme).getComponentOverride("Table"))
+  }, scopeTheme(theme).getComponentOverride("Table")),
+  filtersWrapper: () => ({
+    display: "flex"
+  })
 });
 
 export { styles };

package/dist/esm/components/history/history-card/history-card.js

@@ -6,8 +6,8 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import SvgFunding from '../../../assets/funding.svg.js';
 import { styles } from './history-card.styles.js';
-import { Label } from './label/label.js';
 import { useElements } from '../../../elements-provider/elements-context-provider.js';
+import { Label } from './label/label.js';
 
 const HistoryCard = ({
   transaction,