@shipengine/elements 2.20.0 → 2.22.0

package/esm/assets/cc-logos/mastercard.js

@@ -1,4 +1,4 @@
 var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='150' height='96' fill='none'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='%2316366F' d='M0 0h150v95.745H0z'/%3e%3cpath fill='%23D9222A' d='M86.348 47.872c0 18.985-15.456 34.373-34.521 34.373s-34.52-15.389-34.52-34.373S32.763 13.5 51.828 13.5s34.521 15.39 34.521 34.372'/%3e%3cpath fill='%23EE9F2D' d='M98.171 13.5c-8.92 0-17.047 3.369-23.173 8.897a35 35 0 0 0-3.486 3.638h6.975a35 35 0 0 1 2.632 3.64H68.88a34 34 0 0 0-1.989 3.64h16.214a34 34 0 0 1 1.462 3.64H65.43a34 34 0 0 0-1.004 3.64H85.57a34.4 34.4 0 0 1 .777 7.277c0 3.818-.626 7.49-1.78 10.92H65.43q.625 1.861 1.461 3.64h16.215a34 34 0 0 1-1.99 3.64H68.88a35 35 0 0 0 2.632 3.638h6.973a34.4 34.4 0 0 1-3.487 3.64 34.48 34.48 0 0 0 23.173 8.896c19.065 0 34.521-15.389 34.521-34.373 0-18.982-15.455-34.372-34.52-34.372'/%3e%3cpath fill='black' d='M128.092 67.033c0-.613.499-1.111 1.115-1.111s1.114.498 1.114 1.11-.498 1.111-1.114 1.111a1.113 1.113 0 0 1-1.115-1.11m1.115.844a.847.847 0 0 0 .848-.844.846.846 0 0 0-.847-.844h-.001a.844.844 0 0 0-.847.841v.003a.844.844 0 0 0 .846.844zm-.151-.356h-.228v-.976h.413c.087 0 .175 0 .251.049a.3.3 0 0 1 .124.245c0 .109-.065.21-.17.25l.181.432h-.253l-.15-.386h-.168zm0-.554h.127c.047 0 .097.004.139-.019a.13.13 0 0 0 .057-.112.12.12 0 0 0-.055-.099c-.04-.025-.103-.019-.146-.019h-.122zM43.768 51.636a6 6 0 0 0-.837-.058c-2.124 0-3.2.726-3.2 2.158 0 .883.526 1.445 1.344 1.445 1.527 0 2.627-1.448 2.693-3.545m2.725 6.318h-3.105l.071-1.47c-.947 1.162-2.21 1.714-3.928 1.714-2.03 0-3.423-1.58-3.423-3.873 0-3.452 2.422-5.465 6.58-5.465.424 0 .97.038 1.527.108.116-.467.147-.667.147-.919 0-.94-.653-1.29-2.404-1.29-1.833-.02-3.346.435-3.966.639l.519-3.19c1.867-.545 3.1-.75 4.485-.75 3.218 0 4.923 1.438 4.92 4.157.006.729-.115 1.628-.304 2.81-.326 2.055-1.023 6.456-1.119 7.53m-11.953 0h-3.748l2.147-13.403-4.794 13.403h-2.553l-.316-13.327-2.256 13.327h-3.508l2.93-17.435h5.388l.327 9.759 3.287-9.76h5.994zm68.265-6.318a6 6 0 0 0-.835-.058c-2.123 0-3.199.726-3.199 2.158 0 .883.524 1.445 1.343 1.445 1.527 0 2.628-1.448 2.691-3.545m2.727 6.318h-3.104l.07-1.47c-.947 1.162-2.212 1.714-3.927 1.714-2.032 0-3.423-1.58-3.423-3.873 0-3.452 2.42-5.465 6.579-5.465.425 0 .969.038 1.526.108.116-.467.147-.667.147-.919 0-.94-.653-1.29-2.404-1.29-1.833-.02-3.343.435-3.967.639.04-.236.521-3.19.521-3.19 1.868-.545 3.099-.75 4.483-.75 3.22 0 4.924 1.438 4.921 4.157.006.729-.115 1.628-.304 2.81-.323 2.055-1.023 6.456-1.118 7.53M63.15 57.74c-1.026.322-1.826.46-2.693.46-1.916 0-2.961-1.097-2.961-3.116-.027-.626.276-2.274.513-3.78.217-1.324 1.625-9.675 1.625-9.675h3.726l-.435 2.146h2.25l-.509 3.408h-2.258c-.433 2.697-1.049 6.056-1.056 6.501 0 .731.392 1.05 1.283 1.05.427 0 .758-.043 1.01-.134zm11.421-.115c-1.28.39-2.514.578-3.823.575-4.17-.005-6.343-2.173-6.343-6.326 0-4.847 2.765-8.415 6.519-8.415 3.07 0 5.032 1.998 5.032 5.131 0 1.04-.134 2.055-.459 3.487H68.08c-.25 2.057 1.071 2.914 3.238 2.914 1.334 0 2.536-.274 3.874-.893zm-2.094-8.406c.021-.296.395-2.531-1.733-2.531-1.187 0-2.035.9-2.38 2.53zm-23.734-.961c0 1.794.873 3.03 2.854 3.96 1.518.71 1.752.92 1.752 1.564 0 .884-.669 1.283-2.152 1.283-1.118 0-2.158-.174-3.357-.56l-.516 3.275c.852.185 1.612.356 3.9.42 3.955 0 5.78-1.5 5.78-4.74 0-1.948-.764-3.092-2.641-3.95-1.571-.719-1.752-.88-1.752-1.542 0-.766.623-1.157 1.835-1.157.735 0 1.74.078 2.692.213l.534-3.289c-.97-.153-2.442-.276-3.299-.276-4.192 0-5.643 2.18-5.63 4.799m44.056-4.426c1.04 0 2.01.271 3.348.942l.613-3.785c-.549-.214-2.481-1.474-4.118-1.474-2.508 0-4.628 1.239-6.12 3.284-2.175-.717-3.069.732-4.165 2.177l-.973.225c.073-.475.14-.948.118-1.425H78.06c-.47 4.388-1.303 8.833-1.956 13.227l-.17.953h3.75c.625-4.05.968-6.642 1.177-8.396l1.411-.782c.211-.781.871-1.045 2.196-1.013a16 16 0 0 0-.266 2.907c0 4.64 2.514 7.528 6.548 7.528 1.04 0 1.931-.137 3.312-.51l.66-3.975c-1.243.61-2.262.896-3.185.896-2.179 0-3.497-1.601-3.497-4.248 0-3.84 1.96-6.532 4.759-6.532'/%3e%3cpath fill='white' d='M35.617 56.918H31.87l2.148-13.402-4.793 13.402h-2.555l-.315-13.325-2.257 13.325H20.59l2.93-17.433h5.389l.151 10.792 3.636-10.792h5.82z'/%3e%3cpath fill='black' d='m124.523 40.519-.831 5.038c-1.025-1.343-2.125-2.315-3.579-2.315-1.891 0-3.612 1.428-4.739 3.528-1.569-.324-3.191-.873-3.191-.873l-.001.013c.126-1.175.177-1.891.166-2.135h-3.443c-.468 4.389-1.302 8.834-1.953 13.227l-.172.953h3.749c.506-3.274.894-5.992 1.179-8.148 1.281-1.152 1.922-2.157 3.216-2.09a12.1 12.1 0 0 0-.909 4.599c0 3.545 1.801 5.883 4.526 5.883 1.373 0 2.427-.471 3.455-1.564l-.176 1.318h3.545l2.855-17.434zm-4.687 14.16c-1.275 0-1.919-.94-1.919-2.796 0-2.787 1.206-4.763 2.906-4.763 1.287 0 1.984.977 1.984 2.778.001 2.811-1.224 4.78-2.971 4.78'/%3e%3cpath fill='white' d='M44.844 50.603a6 6 0 0 0-.836-.058c-2.124 0-3.198.726-3.198 2.158 0 .882.525 1.445 1.342 1.445 1.528 0 2.628-1.447 2.692-3.545m2.727 6.316h-3.105l.07-1.467c-.946 1.159-2.211 1.713-3.927 1.713-2.032 0-3.424-1.58-3.424-3.873 0-3.453 2.422-5.466 6.58-5.466.425 0 .97.039 1.527.11.116-.468.147-.668.147-.921 0-.94-.653-1.289-2.404-1.289-1.833-.02-3.345.435-3.967.636.04-.234.52-3.186.52-3.186 1.867-.547 3.1-.752 4.484-.752 3.22 0 4.924 1.44 4.921 4.156.006.732-.116 1.63-.304 2.81-.325 2.054-1.023 6.458-1.118 7.529m50.265-16.964-.614 3.785c-1.336-.67-2.307-.943-3.347-.943-2.798 0-4.76 2.692-4.76 6.532 0 2.646 1.319 4.247 3.497 4.247.923 0 1.942-.286 3.184-.896l-.658 3.974c-1.382.375-2.273.511-3.313.511-4.034 0-6.548-2.888-6.548-7.527 0-6.233 3.473-10.59 8.44-10.59 1.636.001 3.57.692 4.12.907m6.047 10.648a6 6 0 0 0-.836-.058c-2.123 0-3.199.726-3.199 2.158 0 .882.525 1.445 1.343 1.445 1.527 0 2.628-1.447 2.692-3.545m2.727 6.316h-3.106l.071-1.467c-.947 1.159-2.212 1.713-3.927 1.713-2.031 0-3.424-1.58-3.424-3.873 0-3.453 2.422-5.466 6.579-5.466.426 0 .97.039 1.528.11.115-.468.146-.668.146-.921 0-.94-.652-1.289-2.403-1.289-1.833-.02-3.345.435-3.967.636.04-.234.52-3.186.52-3.186 1.867-.547 3.099-.752 4.484-.752 3.22 0 4.924 1.44 4.92 4.156.006.732-.115 1.63-.304 2.81-.323 2.054-1.024 6.458-1.117 7.529m-42.383-.215c-1.027.322-1.826.461-2.692.461-1.916 0-2.962-1.096-2.962-3.114-.026-.629.276-2.275.514-3.78.216-1.326 1.625-9.677 1.625-9.677h3.724l-.434 2.148h1.912l-.51 3.406h-1.917c-.433 2.698-1.051 6.054-1.057 6.5 0 .734.392 1.05 1.282 1.05.427 0 .758-.041 1.01-.132zm11.421-.113a12.8 12.8 0 0 1-3.823.574c-4.17-.004-6.343-2.172-6.343-6.325 0-4.849 2.765-8.416 6.519-8.416 3.071 0 5.033 1.997 5.033 5.132 0 1.04-.135 2.055-.459 3.487h-7.418c-.25 2.057 1.071 2.915 3.238 2.915 1.333 0 2.536-.275 3.873-.895zm-2.094-8.409c.022-.294.396-2.53-1.734-2.53-1.185 0-2.034.903-2.38 2.53zm-23.735-.958c0 1.793.874 3.029 2.854 3.96 1.518.71 1.753.92 1.753 1.564 0 .884-.67 1.283-2.152 1.283-1.118 0-2.158-.174-3.359-.56l-.513 3.275c.85.185 1.61.354 3.899.42 3.955 0 5.78-1.5 5.78-4.74 0-1.949-.763-3.092-2.642-3.95-1.57-.72-1.752-.879-1.752-1.542 0-.766.624-1.16 1.835-1.16.735 0 1.74.08 2.693.216l.533-3.29c-.97-.153-2.44-.276-3.297-.276-4.193 0-5.644 2.179-5.632 4.8m76.625 9.695h-3.545l.176-1.32c-1.028 1.095-2.082 1.566-3.455 1.566-2.725 0-4.525-2.338-4.525-5.883 0-4.716 2.792-8.692 6.098-8.692 1.453 0 2.554.591 3.577 1.933l.832-5.038h3.696zm-5.528-3.276c1.746 0 2.971-1.97 2.971-4.778 0-1.801-.698-2.779-1.985-2.779-1.7 0-2.907 1.976-2.907 4.764 0 1.854.646 2.793 1.921 2.793m-10.931-10.901c-.469 4.388-1.303 8.833-1.954 13.224l-.172.953h3.749c1.34-8.67 1.665-10.363 3.767-10.15.335-1.775.958-3.33 1.422-4.114-1.569-.325-2.446.558-3.593 2.236.09-.725.256-1.43.223-2.15zm-30.85 0c-.47 4.388-1.304 8.833-1.955 13.224l-.17.953h3.75c1.338-8.67 1.662-10.363 3.762-10.15.337-1.775.96-3.33 1.423-4.114-1.567-.325-2.445.558-3.591 2.236.09-.725.254-1.43.223-2.15zm48.956 13.067c0-.615.499-1.11 1.114-1.11.615-.001 1.114.495 1.115 1.107v.003c0 .613-.499 1.11-1.115 1.11a1.11 1.11 0 0 1-1.114-1.11m1.114.843a.844.844 0 1 0 .001-1.687h-.001a.847.847 0 0 0-.848.844c.001.466.38.843.848.843m-.15-.358h-.229v-.973h.414c.086 0 .175.001.25.049.08.054.125.146.125.243 0 .11-.065.214-.17.253l.181.428h-.254l-.15-.385h-.167zm0-.551h.125c.047 0 .099.003.141-.02a.13.13 0 0 0 .056-.112.13.13 0 0 0-.055-.1c-.039-.022-.104-.016-.147-.016h-.121z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h150v95.745H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
-var MasterCard = img;
+var mastercard = img;
 
-export { MasterCard as default };
+export { mastercard as default };

package/esm/assets/cc-logos/visa.js

@@ -1,4 +1,4 @@
 var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='150' height='96' fill='none'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='%230E4595' d='M7.692 0h134.616C146.556 0 150 3.43 150 7.66v80.425c0 4.23-3.444 7.66-7.692 7.66H7.692c-4.248 0-7.692-3.43-7.692-7.66V7.66C0 3.43 3.444 0 7.692 0'/%3e%3cpath fill='white' d='M56.385 66.778 62.8 29.292h10.262l-6.42 37.486zM103.713 30.1c-2.032-.76-5.218-1.574-9.196-1.574-10.14 0-17.282 5.084-17.342 12.37-.058 5.387 5.098 8.392 8.99 10.185 3.995 1.838 5.337 3.01 5.318 4.65-.025 2.513-3.19 3.66-6.139 3.66-4.107 0-6.288-.567-9.658-1.967l-1.323-.596-1.44 8.392c2.397 1.046 6.829 1.953 11.43 2 10.787 0 17.789-5.026 17.869-12.807.038-4.265-2.696-7.51-8.616-10.185-3.586-1.734-5.783-2.892-5.76-4.647 0-1.559 1.86-3.225 5.877-3.225 3.355-.052 5.786.677 7.68 1.436l.92.433zm26.406-.808h-7.929c-2.456 0-4.295.667-5.373 3.108l-15.24 34.354h10.776s1.761-4.62 2.16-5.634c1.177 0 11.645.016 13.141.016a721 721 0 0 1 1.249 5.618h9.521l-8.305-37.463m-12.58 24.206c.848-2.16 4.088-10.48 4.088-10.48-.061.1.842-2.17 1.361-3.577l.693 3.232 2.376 10.825zM47.673 29.292 37.627 54.855l-1.07-5.195c-1.87-5.988-7.698-12.476-14.211-15.724l9.185 32.783 10.857-.013 16.155-37.415z'/%3e%3cpath fill='%23F2AE14' d='M28.254 29.29H11.708l-.131.78c12.872 3.103 21.39 10.602 24.927 19.61l-3.598-17.226c-.622-2.373-2.423-3.082-4.652-3.164'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h150v95.745H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
-var Visa = img;
+var visa = img;
 
-export { Visa as default };
+export { visa as default };

package/esm/components/address-display/address-display.js

@@ -2,7 +2,8 @@ import { __awaiter } from 'tslib';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import { scopeTheme } from '../../utilities/styles.js';
 import { useTranslation } from 'react-i18next';
-import { Grid, GridChild, Typography, Link } from '@shipengine/giger';
+import { Grid, GridChild, Typography } from '@shipengine/giger';
+import { LinkAction } from '../link-action/link-action.js';
 
 const AddressDisplay = ({
   address,
@@ -77,22 +78,13 @@ const AddressDisplay = ({
         textAlign: "right"
       }
     }, {
-      children: jsx(Link, Object.assign({
-        css: theme => ({
-          border: 0,
-          fontWeight: scopeTheme(theme).typography.fontWeight.normal
-        }),
+      children: jsx(LinkAction, {
+        css: {
+          alignSelf: "end"
+        },
         onClick: handleEditAddress,
-        onKeyDown: e => __awaiter(void 0, void 0, void 0, function* () {
-          if (e.key === "Enter") {
-            yield handleEditAddress();
-          }
-        }),
-        role: "button",
-        tabIndex: 0
-      }, {
-        children: t("actions.edit")
-      }))
+        title: t("actions.edit")
+      })
     }))]
   }));
 };

package/esm/components/cc-provider-logo/cc-provider-logo.js

@@ -0,0 +1,33 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Icon, IconSize } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import americanExpress from '../../assets/cc-logos/amex.js';
+import discover from '../../assets/cc-logos/discover.js';
+import mastercard from '../../assets/cc-logos/mastercard.js';
+import visa from '../../assets/cc-logos/visa.js';
+
+const CcProviderLogo = ({
+  provider,
+  width: _width = 56
+}) => {
+  const providerLogos = {
+    americanExpress,
+    discover,
+    mastercard,
+    visa
+  };
+  if (!provider) {
+    return jsx(Icon, {
+      name: IconNames.CREDIT_CARD,
+      size: IconSize.SIZE_LARGE
+    });
+  }
+  const logoSrc = providerLogos[provider];
+  return jsx("img", {
+    alt: provider,
+    src: logoSrc,
+    width: _width
+  });
+};
+
+export { CcProviderLogo };

package/esm/components/cc-provider-logo/index.js

@@ -0,0 +1 @@
+export { CcProviderLogo } from './cc-provider-logo.js';

package/esm/components/collapsible-panel/collapsible-panel.js

@@ -54,7 +54,6 @@ const CollapsiblePanel = ({
             isSaving: isSaving,
             statusSettings: statusSettings
           }), jsx(Icon, {
-            css: styles.icon,
             "data-testid": "collapsible-panel-dropdown",
             name: isExpanded ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM,
             size: IconSize.SIZE_LARGE

package/esm/components/collapsible-panel/collapsible-panel.styles.js

@@ -18,9 +18,6 @@ const styles = createStyles({
     backgroundColor: nested ? "none" : scopeTheme(theme).palette.gray.ultraLight,
     display: "flex",
     padding: nested ? `${scopeTheme(theme).spacing(0.75)}px 0` : `${scopeTheme(theme).spacing(0.75)}px ${scopeTheme(theme).spacing(4)}px`
-  }),
-  icon: theme => ({
-    color: scopeTheme(theme).palette.secondary.main
   })
 });
 

package/esm/components/disclosure/disclosure.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
 import { useState, useEffect } from 'react';
-import { Icon } from '@shipengine/giger';
+import { Icon, IconSize } from '@shipengine/giger';
 import { IconNames } from '@shipengine/giger-theme';
 import { styles } from './disclosure.styles.js';
 
@@ -33,8 +33,8 @@ const Disclosure = ({
         type: "button"
       }, {
         children: jsx(Icon, {
-          css: styles.icon,
-          name: isOpen ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM
+          name: isOpen ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM,
+          size: IconSize.SIZE_SMALL
         })
       }))]
     })), isOpen && jsx("div", Object.assign({

package/esm/components/disclosure/disclosure.styles.js

@@ -3,7 +3,8 @@ import { createStyles, scopeTheme } from '../../utilities/styles.js';
 const styles = createStyles({
   container: theme => ({
     display: "flex",
-    gap: scopeTheme(theme).spacing()
+    gap: scopeTheme(theme).spacing(0.5),
+    paddingBottom: scopeTheme(theme).spacing(1)
   }),
   content: theme => ({
     backgroundColor: scopeTheme(theme).palette.gray.ultraLight,
@@ -13,13 +14,11 @@ const styles = createStyles({
       maxWidth: "max-content"
     }
   }),
-  icon: theme => ({
-    color: scopeTheme(theme).getComponent("Link").defaultColor
-  }),
   toggle: {
     backgroundColor: "transparent",
     border: 0,
     cursor: "pointer",
+    lineHeight: 0,
     padding: 0
   }
 });

package/esm/components/field/rate-select/rate-select.js

@@ -45,7 +45,7 @@ const RateSelect = _a => {
           return createElement(RateCard, Object.assign({
             mapViewEnabled: mapViewEnabled
           }, optionWithEnabledData(option), {
-            carrierNickname: nicknameFeature ? option.carrierNickname : undefined,
+            carrierNickname: nicknameFeature ? option.carrierNickname || `ID: ${option.carrierId}` : undefined,
             css: styles.rateCardOptionStyles,
             isAcknowledged: field.value.isAcknowledged,
             isLoading: isLoading,

package/esm/components/field/select-auto-complete/select-auto-complete.js

@@ -20,7 +20,11 @@ const SelectAutoComplete = _a => {
         fieldProps = __rest(_a, ["options", "value", "onChange"]);
       const buildValue = val => {
         if (typeof val !== "string") return;
-        const option = options.find(o => o.value === val);
+        // currently options CAN be empty if the address is not from the US - in which case we want to display the value in the address as is
+        const option = options.length > 0 ? options.find(o => o.value === val) : {
+          label: val,
+          value: val
+        };
         return option;
       };
       return jsx("div", Object.assign({

package/esm/components/forms/address-form/address-form.js

@@ -6,11 +6,12 @@ import { validationResolver } from '../../../utilities/validation.js';
 import { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { Typography, Link, Button, ButtonVariant } from '@shipengine/giger';
+import { Typography, Button, ButtonVariant } from '@shipengine/giger';
 import { AddressFields } from './address-fields.js';
 import { shipToAddressSchema, addressFormSchema } from './address-form-schema.js';
 import { styles } from './address-form.styles.js';
 import { AddressParser } from '../../address-parser/address-parser.js';
+import { LinkAction } from '../../link-action/link-action.js';
 import { ButtonGroup } from '../../button-group/button-group.js';
 import { SubmitButton } from '../../field/submit-button/submit-button.js';
 import { Portal } from '../../portal/portal.js';
@@ -69,19 +70,11 @@ const AddressForm = ({
       })), addressParser, !isAddressParserOpen && onSubmitParse && jsx("div", Object.assign({
         css: styles.pasteWrapper
       }, {
-        children: jsx(Link, Object.assign({
+        children: jsx(LinkAction, {
           css: styles.pasteList,
           onClick: toggleIsAddressParserOpen,
-          onKeyDown: e => {
-            if (e.key === "Enter") {
-              toggleIsAddressParserOpen();
-            }
-          },
-          role: "button",
-          tabIndex: 0
-        }, {
-          children: t("address.paste")
-        }))
+          title: t("address.paste")
+        })
       }))]
     })), jsx(AddressFields, {
       form: form,

package/esm/components/forms/address-form/address-form.styles.js

@@ -17,9 +17,8 @@ const styles = createStyles({
     paddingBottom: scopeTheme(theme).spacing(4),
     width: "100%"
   }),
-  pasteList: theme => ({
-    flexShrink: 0,
-    fontWeight: scopeTheme(theme).typography.fontWeight.normal
+  pasteList: () => ({
+    flexShrink: 0
   }),
   pasteWrapper: () => ({
     flexShrink: 0

package/esm/components/forms/auto-funding-form/auto-funding-form.styles.js

@@ -6,7 +6,7 @@ const styles = createStyles({
     padding: `0 ${scopeTheme(theme).spacing(2)}`
   }),
   getForm: showForm => theme => ({
-    backgroundColor: scopeTheme(theme).palette.gray.megaLight,
+    backgroundColor: scopeTheme(theme).palette.gray.ultraLight,
     display: showForm ? "flex" : "none",
     flexDirection: "column",
     padding: scopeTheme(theme).spacing(2)

package/esm/components/forms/edit-wallet-address-form/edit-wallet-address-form.js

@@ -32,7 +32,7 @@ const EditWalletAddressForm = ({
   }));
   const formInterface = jsxs("div", Object.assign({
     css: theme => ({
-      backgroundColor: scopeTheme(theme).palette.gray.megaLight,
+      backgroundColor: scopeTheme(theme).palette.gray.ultraLight,
       marginBottom: scopeTheme(theme).spacing(4),
       marginLeft: -scopeTheme(theme).spacing(2),
       marginRight: -scopeTheme(theme).spacing(2),

package/esm/components/forms/ship-from-address-form/ship-from-address-form.js

@@ -7,12 +7,13 @@ import isEqual from 'lodash/isEqual.js';
 import { useCallback, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { Typography, Link, Button, ButtonVariant } from '@shipengine/giger';
+import { Typography, Button, ButtonVariant } from '@shipengine/giger';
 import { shipFromAddressFormSchema } from './ship-from-address-form-schema.js';
 import { styles } from './ship-from-address-form.styles.js';
 import { AddressFields } from '../address-form/address-fields.js';
 import { useAddressPreference } from '../../address-preference-context/address-preference-context.js';
 import { AddressParser } from '../../address-parser/address-parser.js';
+import { LinkAction } from '../../link-action/link-action.js';
 import { CheckboxInput } from '../../field/checkbox-input/checkbox-input.js';
 import { ButtonGroup } from '../../button-group/button-group.js';
 import { SubmitButton } from '../../field/submit-button/submit-button.js';
@@ -106,19 +107,11 @@ const ShipFromAddressForm = ({
       })), addressParser, !isAddressParserOpen && onSubmitParse && jsx("div", Object.assign({
         css: styles.pasteWrapper
       }, {
-        children: jsx(Link, Object.assign({
+        children: jsx(LinkAction, {
           css: styles.pasteList,
           onClick: toggleIsAddressParserOpen,
-          onKeyDown: e => {
-            if (e.key === "Enter") {
-              toggleIsAddressParserOpen();
-            }
-          },
-          role: "button",
-          tabIndex: 0
-        }, {
-          children: t("address.paste")
-        }))
+          title: t("address.paste")
+        })
       }))]
     })), jsx(AddressFields, {
       form: form,

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

@@ -1,6 +1,6 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import { useState, useMemo, useCallback } from 'react';
-import { Table, TableFooter, TableHeader, TableHeaderRow, TableHeaderCell, Checkbox, TableBody, TableRow, TableBodyCell } from '@shipengine/giger';
+import { TableRow, TableBodyCell, Skeleton, SkeletonAnimation, SkeletonVariant, Table, TableFooter, TableHeader, TableHeaderRow, TableHeaderCell, Checkbox, TableBody } from '@shipengine/giger';
 import { styles } from './grid-controller.styles.js';
 
 /**
@@ -17,15 +17,33 @@ const GridController = ({
   data,
   footerContent,
   onRowClick,
+  isLoading: _isLoading = false,
   useCheckboxes: _useCheckboxes = false,
   filters,
   emptyContent
 }) => {
   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 getColumnHeaderContents = () => {
-    return columns.map(column => column.headerContent);
-  };
+  const columnHeaderContents = useMemo(() => columns.map(column => column.headerContent), [columns]);
+  const loadingRows = useMemo(() => {
+    const items = [];
+    for (let index = 0; index < 5; index++) {
+      items.push(jsx(TableRow, Object.assign({
+        css: styles.skeletonTableRow,
+        withHover: false
+      }, {
+        children: columnHeaderContents.map((item, index) => jsx(TableBodyCell, {
+          children: item && jsx(Skeleton, {
+            animation: SkeletonAnimation.WAVE,
+            height: 16,
+            variant: SkeletonVariant.RECT,
+            width: 72
+          })
+        }, index))
+      }), `loading-row-${index}`));
+    }
+    return items;
+  }, [columnHeaderContents]);
   const isAllChecked = useMemo(() => isChecked.length > 0 && isChecked.every(check => check), [isChecked]);
   const isIndeterminate = useMemo(() => isChecked.some(check => check), [isChecked]);
   const toggleCheckbox = useCallback(index => {
@@ -66,7 +84,7 @@ const GridController = ({
               indeterminate: (_c = !isAllChecked && isIndeterminate) !== null && _c !== void 0 ? _c : false,
               onChange: event => toggleAllCheckboxes(event.target.checked)
             })
-          })), getColumnHeaderContents().map((header, index) => jsx(TableHeaderCell, Object.assign({
+          })), columnHeaderContents.map((header, index) => jsx(TableHeaderCell, Object.assign({
             css: styles.tableHeader
           }, {
             children: header
@@ -76,8 +94,8 @@ const GridController = ({
       outerWrapperStyles: styles.tableWrapper,
       tableStyles: styles.table
     }, {
-      children: jsx(TableBody, {
-        children: data.map((row, index) => {
+      children: jsxs(TableBody, {
+        children: [_isLoading && loadingRows, data.map((row, index) => {
           var _a;
           const allowOnClick = !!onRowClick && !(row === null || row === void 0 ? void 0 : row.disableOnRowClick);
           return jsxs(TableRow, Object.assign({
@@ -98,7 +116,7 @@ const GridController = ({
               children: column.renderCellContent(row)
             }), index))]
           }), index);
-        })
+        })]
       })
     }))]
   }));

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

@@ -5,8 +5,12 @@ const styles = createStyles({
     width: scopeTheme(theme).spacing(6)
   }),
   filters: theme => ({
+    backgroundColor: scopeTheme(theme).palette.white,
     borderBottom: `1px solid ${scopeTheme(theme).palette.gray[200]}`,
-    padding: `${scopeTheme(theme).spacing()}px ${scopeTheme(theme).spacing(2)}px`
+    padding: scopeTheme(theme).spacing()
+  }),
+  skeletonTableRow: () => ({
+    height: "68px"
   }),
   table: {
     tableLayout: "initial"
@@ -16,13 +20,14 @@ const styles = createStyles({
     justifyContent: "space-between"
   },
   tableHeader: theme => ({
-    background: scopeTheme(theme).palette.secondary.ultraLight
+    background: scopeTheme(theme).palette.gray[50]
   }),
   tableWrapper: {
     border: "none"
   },
   wrapper: theme => Object.assign({
-    height: "auto"
+    height: "auto",
+    overflow: "hidden"
   }, scopeTheme(theme).getComponentOverride("Table"))
 });
 

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

@@ -1,6 +1,8 @@
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import { Trans } from 'react-i18next';
-import { Typography, Pagination } from '@shipengine/giger';
+import { Typography, SpinnerSize, Pagination } from '@shipengine/giger';
+import { styles } from './grid-footer.styles.js';
+import { Loader } from '../loader/loader.js';
 
 /**
  * @internal
@@ -17,30 +19,43 @@ const GridFooter = ({
   pageSize,
   total,
   showPagination,
-  onPageChange
+  onPageChange,
+  isLoadingMore,
+  hasMoreUnfetchedResults
 }) => {
   const firstElementInPage = (page - 1) * pageSize + 1;
   const lastElementInPage = Math.min(page * pageSize, total);
-  return jsxs(Fragment, {
-    children: [jsx(Typography, Object.assign({
-      component: "span",
-      variant: "body2"
+  return jsxs("div", Object.assign({
+    css: styles.wrapper
+  }, {
+    children: [jsxs("div", Object.assign({
+      css: styles.countWrapper
     }, {
-      children: jsx(Trans, {
-        components: [jsx("b", {})],
-        count: total,
-        i18nKey: "common:grid.row-count",
-        values: {
-          firstIndex: firstElementInPage,
-          lastIndex: lastElementInPage
-        }
-      })
+      children: [firstElementInPage > 0 && jsx(Typography, Object.assign({
+        component: "span",
+        variant: "body2"
+      }, {
+        children: jsx(Trans, {
+          components: [jsx("b", {})],
+          count: total,
+          i18nKey: hasMoreUnfetchedResults && total > 1 ? "common:grid.row-count-plus_other" : "common:grid.row-count",
+          values: {
+            firstIndex: firstElementInPage,
+            lastIndex: lastElementInPage
+          }
+        })
+      })), isLoadingMore && jsx("div", {
+        children: jsx(Loader, {
+          css: styles.loader,
+          size: SpinnerSize.SIZE_SMALL
+        })
+      })]
     })), showPagination && jsx(Pagination, {
       currentPage: page,
       onPageChange: onPageChange,
       totalPages: pages
     })]
-  });
+  }));
 };
 
 export { GridFooter };

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

@@ -0,0 +1,20 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  countWrapper: theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: scopeTheme(theme).spacing(1)
+  }),
+  loader: theme => ({
+    color: scopeTheme(theme).palette.gray.main
+  }),
+  wrapper: {
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "space-between",
+    width: "100%"
+  }
+});
+
+export { styles };

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

@@ -1,4 +1,4 @@
 export { GridController } from './grid-controller.js';
 export { CellFormattedDate } from './cell-formatted-date.js';
 export { GridFooter } from './grid-footer.js';
-export { SortableHeader } from './sortable-header.js';
+export { SortableHeader } from './sortable-header/sortable-header.js';

package/esm/components/grid-controller/sortable-header/index.js

@@ -0,0 +1 @@
+export { SortableHeader } from './sortable-header.js';

package/esm/components/grid-controller/{sortable-header.js → sortable-header/sortable-header.js}

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import { Icon, IconSize } from '@shipengine/giger';
 import { IconNames } from '@shipengine/giger-theme';
+import { styles } from './sortable-header.styles.js';
 
 /**
  * A reusable component for creating sortable table headers
@@ -19,17 +20,14 @@ const SortableHeader = ({
   };
   return jsxs("span", Object.assign({
     "aria-label": headerText,
-    css: {
-      alignItems: "center",
-      cursor: "pointer",
-      display: "flex"
-    },
+    css: styles.span,
     onClick: onToggleSort,
     onKeyDown: handleKeyDown,
     role: "button",
     tabIndex: 0
   }, {
     children: [headerText, jsx(Icon, {
+      css: styles.icon,
       name: sortDirection === "desc" ? IconNames.SORT_BOTTOM : IconNames.SORT_TOP,
       size: IconSize.SIZE_SMALL
     })]

package/esm/components/grid-controller/sortable-header/sortable-header.styles.js

@@ -0,0 +1,14 @@
+import { createStyles, scopeTheme } from '../../../utilities/styles.js';
+
+const styles = createStyles({
+  icon: theme => ({
+    paddingLeft: scopeTheme(theme).spacing()
+  }),
+  span: () => ({
+    alignItems: "center",
+    cursor: "pointer",
+    display: "flex"
+  })
+});
+
+export { styles };

package/esm/components/grid-filters/components/created-date-filter/created-date-filter.js

@@ -20,6 +20,7 @@ import { useElements } from '../../../../elements-provider/elements-context-prov
  * @see {@link CreatedDateFilterProps | The props for the `<CreatedDateFilter />` component}
  */
 const CreatedDateFilter = ({
+  disabled: _disabled = false,
   filters,
   onFiltersUpdated
 }) => {
@@ -101,6 +102,7 @@ const CreatedDateFilter = ({
   }, [filters.createdDate]);
   return ((_a = filters.createdDate) === null || _a === void 0 ? void 0 : _a.value) ? jsxs(Button, Object.assign({
     css: styles.mainButton,
+    disabled: _disabled,
     onClick: onFilterClear,
     variant: ButtonVariant.TEXT
   }, {
@@ -119,6 +121,7 @@ const CreatedDateFilter = ({
   })) : jsxs(Fragment, {
     children: [jsxs(Button, Object.assign({
       css: styles.mainButton,
+      disabled: _disabled,
       onClick: onToggleCreatedDateFilter,
       ref: buttonRef,
       variant: ButtonVariant.TEXT

package/esm/components/grid-filters/components/label-id-filter/label-id-filter.js

@@ -23,6 +23,7 @@ import { SubmitButton } from '../../../field/submit-button/submit-button.js';
  * @see {@link LabelIdFilterProps | The props for the `<LabelIdFilter />` component}
  */
 const LabelIdFilter = ({
+  disabled: _disabled = false,
   filters,
   onFiltersUpdated
 }) => {
@@ -58,6 +59,7 @@ const LabelIdFilter = ({
     jsx(Fragment, {
       children: jsxs(Fragment, {
         children: [jsx(Button, Object.assign({
+          disabled: _disabled,
           onClick: toggleLabelIdFilter,
           ref: buttonRef,
           variant: ButtonVariant.TEXT

package/esm/components/grid-filters/components/shipment-id-filter/shipment-id-filter.js

@@ -23,6 +23,7 @@ import { SubmitButton } from '../../../field/submit-button/submit-button.js';
  * @see {@link ShipmentIdFilterProps | The props for the `<ShipmentIdFilter />` component}
  */
 const ShipmentIdFilter = ({
+  disabled: _disabled = false,
   filters,
   onFiltersUpdated
 }) => {
@@ -57,6 +58,7 @@ const ShipmentIdFilter = ({
       children: jsxs(Fragment, {
         children: [jsx(Button, Object.assign({
           css: styles.mainButton,
+          disabled: _disabled,
           onClick: toggleShipmentIdFilter,
           ref: buttonRef,
           variant: ButtonVariant.TEXT

package/esm/components/grid-filters/components/tracking-status-filter/tracking-status-filter.js

@@ -21,6 +21,7 @@ import { Spacer } from '../../../spacer/spacer.js';
  * @see {@link TrackingStatusFilterProps | The props for the `<TrackingStatusFilter />` component}
  */
 const TrackingStatusFilter = ({
+  disabled: _disabled = false,
   filters,
   onFiltersUpdated
 }) => {
@@ -105,6 +106,7 @@ const TrackingStatusFilter = ({
   }, [watchedValues]);
   return jsxs(Fragment, {
     children: [jsxs(Button, Object.assign({
+      disabled: _disabled,
       onClick: toggleTrackingStatusFilter,
       ref: buttonRef,
       variant: ButtonVariant.TEXT