@shipengine/elements 2.20.0 → 2.21.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.styles.js

@@ -16,7 +16,7 @@ const styles = createStyles({
     justifyContent: "space-between"
   },
   tableHeader: theme => ({
-    background: scopeTheme(theme).palette.secondary.ultraLight
+    background: scopeTheme(theme).palette.gray[50]
   }),
   tableWrapper: {
     border: "none"

package/esm/components/link-action/link-action.js

@@ -1,14 +1,19 @@
 import { __rest } from 'tslib';
-import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import { scopeTheme } from '../../utilities/styles.js';
-import { Link, ButtonSize, Spinner, Icon, IconSize } from '@shipengine/giger';
+import React__default from 'react';
+import { Link, ButtonSize, Spinner, Icon, IconSize, Typography } from '@shipengine/giger';
 import { IconNames } from '@shipengine/giger-theme';
 
 const icons = {
   add: IconNames.ADD,
   checkFilled: IconNames.CHECK_FILLED,
+  chevronBottom: IconNames.CHEVRON_BOTTOM,
+  chevronTop: IconNames.CHEVRON_TOP,
   copy: IconNames.COPY,
+  dots: IconNames.DOTS,
   download: IconNames.DOWNLOAD,
+  edit: IconNames.EDIT,
   retry: IconNames.CIRCULAR_ARROW
 };
 /**
@@ -16,16 +21,17 @@ const icons = {
  *
  * # Link Action Component
  */
-const LinkAction = _a => {
+const LinkAction = /*#__PURE__*/React__default.forwardRef((_a, ref) => {
   var {
       css,
       icon,
       isDisabled,
       isLoading,
       title,
+      iconPlacement = "left",
       isBold = true
     } = _a,
-    props = __rest(_a, ["css", "icon", "isDisabled", "isLoading", "title", "isBold"]);
+    props = __rest(_a, ["css", "icon", "isDisabled", "isLoading", "title", "iconPlacement", "isBold"]);
   return jsx(Link, Object.assign({}, props, {
     bold: isBold,
     css: theme => [Object.assign(Object.assign({
@@ -53,18 +59,30 @@ const LinkAction = _a => {
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
       }
     },
+    ref: ref,
     role: "button",
     size: ButtonSize.MEDIUM,
     tabIndex: 0
   }, {
-    children: isLoading ? jsx(Spinner, {}) : jsxs(Fragment, {
-      children: [title, icon && jsx(Icon, {
+    children: isLoading ? jsx(Spinner, {}) : jsxs("div", Object.assign({
+      css: theme => ({
+        alignItems: "center",
+        display: "flex",
+        flexDirection: iconPlacement === "left" ? "row" : "row-reverse",
+        gap: scopeTheme(theme).spacing(0.5)
+      })
+    }, {
+      children: [icon && jsx(Icon, {
         name: icons[icon],
-        size: IconSize.SIZE_MEDIUM,
+        size: IconSize.SIZE_SMALL,
         title: title
-      })]
-    })
+      }), title && jsx(Typography, Object.assign({
+        bold: isBold
+      }, {
+        children: title
+      }))]
+    }))
   }));
-};
+});
 
 export { LinkAction };

package/esm/components/segmented-control/index.js

@@ -0,0 +1 @@
+export { SegmentedControl } from './segemented-control.js';

package/esm/components/segmented-control/segemented-control.js

@@ -0,0 +1,30 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { styles } from './segmented-control.styles.js';
+
+const SegmentedControl = ({
+  fullWidth,
+  onSelect,
+  selectedSegment,
+  segments
+}) => {
+  return jsx("div", Object.assign({
+    css: styles.getContainerStyles(fullWidth),
+    role: "tablist"
+  }, {
+    children: segments.map(s => jsx("button", Object.assign({
+      "aria-label": s.value,
+      "aria-selected": selectedSegment === s.value ? "true" : "false",
+      css: styles.getSegmentStyles(selectedSegment === s.value, fullWidth),
+      onClick: e => {
+        e.preventDefault();
+        onSelect(s.value);
+      },
+      role: "tab",
+      tabIndex: 0
+    }, {
+      children: s.label
+    }), s.value))
+  }));
+};
+
+export { SegmentedControl };

package/esm/components/{tabs/tabs.styles.js → segmented-control/segmented-control.styles.js}

@@ -2,20 +2,20 @@ import { createStyles, scopeTheme } from '../../utilities/styles.js';
 
 const styles = createStyles({
   getContainerStyles: fullWidth => theme => ({
-    border: `1px solid ${scopeTheme(theme).palette.gray.light}`,
-    borderRadius: "4px",
+    backgroundColor: scopeTheme(theme).palette.white,
+    border: `1px solid ${scopeTheme(theme).palette.gray.ultraLight}`,
+    borderRadius: scopeTheme(theme).borderRadius.S,
     display: "flex",
     gap: scopeTheme(theme).spacing(1),
-    padding: scopeTheme(theme).spacing(0.5),
     width: fullWidth ? "auto" : "max-content"
   }),
-  getTabStyles: (selected, fullWidth) => theme => ({
-    backgroundColor: selected ? scopeTheme(theme).palette.gray.light : "transparent",
-    border: "none",
-    borderRadius: "4px",
+  getSegmentStyles: (selected, fullWidth) => theme => ({
+    backgroundColor: selected ? scopeTheme(theme).palette.gray.ultraLight : "transparent",
+    borderRadius: scopeTheme(theme).borderRadius.S,
     color: selected ? scopeTheme(theme).palette.black : scopeTheme(theme).palette.gray.main,
     cursor: "pointer",
-    fontWeight: selected ? "bold" : "normal",
+    fontWeight: selected ? scopeTheme(theme).typography.fontWeight.bold : scopeTheme(theme).typography.fontWeight.normal,
+    margin: `${scopeTheme(theme).spacing(0.5)}px`,
     padding: `${scopeTheme(theme).spacing(1)}px ${scopeTheme(theme).spacing(1.5)}px`,
     textWrap: "nowrap",
     width: fullWidth ? "100%" : "auto"

package/esm/components/wallet-card/wallet-card.js

@@ -1,13 +1,9 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
-import { Icon, IconSize, Typography } 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';
+import { Typography } from '@shipengine/giger';
 import { styles } from './wallet-card.styles.js';
 import { SettingsCard } from '../settings-card/settings-card.js';
+import { CcProviderLogo } from '../cc-provider-logo/cc-provider-logo.js';
 
 const WalletCard = ({
   fundingSource,
@@ -19,13 +15,6 @@ const WalletCard = ({
   } = useTranslation("common");
   const provider = (_a = fundingSource === null || fundingSource === void 0 ? void 0 : fundingSource.paymentMethod.creditCardInfo) === null || _a === void 0 ? void 0 : _a.provider;
   const last4 = (_b = fundingSource === null || fundingSource === void 0 ? void 0 : fundingSource.paymentMethod.creditCardInfo) === null || _b === void 0 ? void 0 : _b.cardNumberLastFour;
-  const logos = {
-    americanExpress: AmericanExpress,
-    discover: Discover,
-    mastercard: MasterCard,
-    visa: Visa
-  };
-  const Logo = provider ? logos[provider] : undefined;
   return jsx("div", Object.assign({
     css: styles.container
   }, {
@@ -35,14 +24,8 @@ const WalletCard = ({
         name: t("actions.edit")
       },
       title: jsxs(Fragment, {
-        children: [Logo ? jsx("img", {
-          alt: "credit card logo",
-          src: Logo,
-          width: 56
-        }) : jsx(Icon, {
-          css: styles.icon,
-          name: IconNames.CREDIT_CARD,
-          size: IconSize.SIZE_LARGE
+        children: [jsx(CcProviderLogo, {
+          provider: provider
         }), jsx(Typography, Object.assign({
           variant: "body1"
         }, {

package/esm/components/wallet-card/wallet-card.styles.js

@@ -1,4 +1,4 @@
-import { createStyles, scopeTheme } from '../../utilities/styles.js';
+import { createStyles } from '../../utilities/styles.js';
 
 const styles = createStyles({
   container: {
@@ -6,10 +6,7 @@ const styles = createStyles({
     height: "72px",
     justifyContent: "center",
     width: "100%"
-  },
-  icon: theme => ({
-    color: scopeTheme(theme).palette.gray.main
-  })
+  }
 });
 
 export { styles };

package/esm/constants/shipengine/address.js

@@ -182,7 +182,7 @@ const postalCodeRegex = /(^\d{5}$)|(^\d{5}-\d{4}$)/;
  *
  * # Address Utils - Address Name Regex
  */
-const addressNameRegex = /^[a-zA-Z']{2,} [a-zA-Z']{2,}/;
+const addressNameRegex = /^[a-zA-Z.']{2,}(?: [a-zA-Z.]?\.?)? [a-zA-Z.']{2,}/;
 /**
  * @internal
  *

package/esm/elements/labels-grid/hooks/use-labels-grid.js

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import { useGetServiceName } from '../../../hooks/use-get-service-name.js';
 import { useState, useEffect, useMemo } from 'react';
-import { useListLabels, useGetLabel } from '@shipengine/react-api';
+import { useListLabels, useListSalesOrderShipments, useGetLabel } from '@shipengine/react-api';
 import { usePager } from '../../../components/pager/usePager.js';
 
 const PAGE_SIZE = 20;
@@ -10,7 +10,8 @@ const useLabelsGrid = ({
   labelStatus,
   showShipmentIdFilter,
   showLabelIdFilter,
-  showTrackingStatusFilter
+  showTrackingStatusFilter,
+  fetchShipments
 }) => {
   var _a, _b, _c;
   const initialFilters = {
@@ -45,9 +46,24 @@ const useLabelsGrid = ({
     pagerProps.onPageSelect(1);
     setFilters(newFilters);
   };
+  const hasActiveFilterValue = value => {
+    if (value === null || value === undefined) {
+      return false;
+    }
+    if (Array.isArray(value)) {
+      return value.length > 0;
+    }
+    if (value !== null && typeof value === "object") {
+      return Object.keys(value).length > 0;
+    }
+    if (typeof value === "string") {
+      return value.trim() !== "";
+    }
+    return Boolean(value);
+  };
   const isAnyFilterActive = Object.keys(filters).some(key => {
     const filter = filters[key];
-    return (filter === null || filter === void 0 ? void 0 : filter.enabled) && filter.value;
+    return (filter === null || filter === void 0 ? void 0 : filter.enabled) && hasActiveFilterValue(filter === null || filter === void 0 ? void 0 : filter.value);
   });
   const isAnyFilterEnabled = Object.keys(filters).some(key => {
     const filter = filters[key];
@@ -102,6 +118,14 @@ const useLabelsGrid = ({
       serviceName: getServiceName(label)
     }));
   }, [listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.labels, (_a = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.value, theme.palette.gray, getServiceName]);
+  const {
+    data: listShipmentsData,
+    isFetching: isListShipmentsLoading,
+    isError: isListShipmentsError
+  } = useListSalesOrderShipments({
+    // An empty array here should disable the query
+    shipmentIds: fetchShipments ? labels === null || labels === void 0 ? void 0 : labels.map(label => label.shipmentId) : []
+  });
   const shouldShowFilters = isAnyFilterEnabled && (isAnyFilterActive || Boolean(labels === null || labels === void 0 ? void 0 : labels.length));
   const {
     data: labelFilterData,
@@ -148,6 +172,13 @@ const useLabelsGrid = ({
       })];
     } else if (labelFilteredByIdHasErrors) {
       return [];
+    } else if (labels && fetchShipments && listShipmentsData) {
+      return labels.map(label => {
+        const shipment = listShipmentsData === null || listShipmentsData === void 0 ? void 0 : listShipmentsData.find(shipment => shipment.shipmentId === label.shipmentId);
+        return Object.assign(Object.assign({}, label), {
+          shipmentNumber: shipment === null || shipment === void 0 ? void 0 : shipment.shipmentNumber
+        });
+      });
     } else if (labels) {
       return labels;
     }
@@ -158,8 +189,8 @@ const useLabelsGrid = ({
     filters,
     getGridData,
     isAnyFilterActive,
-    isError: isListLabelsError,
-    isLoading: isListLabelsLoading || isLabelFilterLoading,
+    isError: isListLabelsError || isListShipmentsError && fetchShipments,
+    isLoading: isListLabelsLoading || isLabelFilterLoading || isListShipmentsLoading && fetchShipments,
     labels,
     pageConfig: {
       currentPage: labelFilteredById ? 1 : (listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.page) || 0,