@shipengine/elements 2.22.0 → 2.24.1

package/dist/esm/workflows/onboarding/components/ship-from-address-step/ship-from-address-step.js

@@ -0,0 +1,54 @@
+import { __rest } from '../../../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { WarehouseForm } from '../../../../components/forms/warehouse-form/warehouse-form.js';
+import { AddressPreferenceProvider } from '../../../../components/address-preference-context/address-preference-context.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+import { StepHeader } from '../step-header/step-header.js';
+
+const ShipFromAddressStep = ({
+  defaultShipFromAddress,
+  warehousePayload,
+  onSubmit
+}) => {
+  var _a, _b;
+  const {
+    t
+  } = useTranslation("onboarding");
+  const pendingWarehouse = warehousePayload ? Object.assign(Object.assign({}, warehousePayload), {
+    returnAddress: (_a = warehousePayload.returnAddress) !== null && _a !== void 0 ? _a : warehousePayload.originAddress
+  }) : undefined;
+  const pendingShipFrom = defaultShipFromAddress ? Object.assign(Object.assign({}, defaultShipFromAddress), {
+    returnAddress: (_b = defaultShipFromAddress.returnAddress) !== null && _b !== void 0 ? _b : defaultShipFromAddress.originAddress
+  }) : undefined;
+  return jsxs(AddressPreferenceProvider, {
+    formHeader: jsx("div", {
+      css: {
+        textAlign: "center"
+      },
+      children: jsx(StepHeader, {
+        title: t("warehouse.title"),
+        tooltipMessage: t("tooltip.warehouse")
+      })
+    }),
+    onSubmit: _a => {
+      var {
+          passengerData
+        } = _a,
+        rest = __rest(_a, ["passengerData"]);
+      return onSubmit(Object.assign(Object.assign({}, rest), passengerData));
+    },
+    children: [jsx(Spacer, {
+      multiplier: 1
+    }), jsx(WarehouseForm, {
+      onSubmit: onSubmit,
+      requireEmail: true,
+      shouldForceDefault: (pendingWarehouse === null || pendingWarehouse === void 0 ? void 0 : pendingWarehouse.isDefault) || (pendingShipFrom === null || pendingShipFrom === void 0 ? void 0 : pendingShipFrom.isDefault),
+      submitButtonTitle: t("actions.continue"),
+      useStrictSchema: true,
+      warehouse: pendingWarehouse !== null && pendingWarehouse !== void 0 ? pendingWarehouse : pendingShipFrom
+    })]
+  });
+};
+
+export { ShipFromAddressStep };

package/dist/esm/workflows/onboarding/components/step-header/step-header.js

@@ -0,0 +1,49 @@
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { Typography, IconTooltip, IconSize } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { styles } from './step-header.styles.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+
+const StepHeader = ({
+  title,
+  subtitle,
+  tooltipMessage
+}) => {
+  return jsxs(Fragment, {
+    children: [jsxs("header", {
+      css: styles.header,
+      children: [jsx("h4", {
+        css: {
+          margin: 0
+        },
+        children: jsx(Typography, {
+          variant: "heading4",
+          children: title
+        })
+      }), tooltipMessage && jsx(IconTooltip, {
+        css: styles.iconTooltip,
+        icon: IconNames.INFO_FILLED,
+        placement: "auto",
+        size: IconSize.SIZE_MEDIUM,
+        children: jsx("div", {
+          css: styles.tooltipContainer,
+          children: jsx(Typography, {
+            variant: "small",
+            children: tooltipMessage
+          })
+        })
+      })]
+    }), subtitle && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 2
+      }), jsx(Typography, {
+        variant: "body2",
+        children: subtitle
+      })]
+    }), jsx(Spacer, {
+      multiplier: 1
+    })]
+  });
+};
+
+export { StepHeader };

package/dist/esm/workflows/onboarding/components/terms-agreement-form/terms-agreement-form.js

@@ -0,0 +1,138 @@
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { Link, Icon, IconSize, Typography, Button, ButtonVariant } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { formLogger } from '../../../../utilities/form-logger.js';
+import { validationResolver } from '../../../../utilities/validation.js';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation, Trans } from 'react-i18next';
+import { termsAgreementFormSchema } from './terms-agreement-form-schema.js';
+import { styles } from './terms-agreement-form.styles.js';
+import { useElements } from '../../../../elements-provider/elements-context-provider.js';
+import { CheckboxInput } from '../../../../components/field/checkbox-input/checkbox-input.js';
+import { DisplayTerm } from '../../../../components/display-term/display-term.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+import { ButtonGroup } from '../../../../components/button-group/button-group.js';
+import { SubmitButton } from '../../../../components/field/submit-button/submit-button.js';
+
+const TermsAgreementForm = ({
+  carrierTerms,
+  hideTerms,
+  insuranceProviderTerms,
+  isSubmitDisabled,
+  onSubmit
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    globalFeatures: {
+      enableParcelGuard
+    }
+  } = useElements();
+  const [showTerms, setShowTerms] = useState(false);
+  const form = useForm({
+    defaultValues: {
+      agreement: hideTerms
+    },
+    resolver: validationResolver(termsAgreementFormSchema)
+  });
+  const handleSubmit = form.handleSubmit(values => {
+    const payload = values;
+    onSubmit(payload.agreement);
+  });
+  return jsxs("form", {
+    css: styles.container,
+    onSubmit: formLogger.capture(handleSubmit),
+    children: [!hideTerms && jsx("div", {
+      children: jsx(CheckboxInput, {
+        ariaLabel: "I agree to the Terms of Service",
+        checkboxLabel: jsx(Trans, {
+          components: {
+            icon: jsx(Icon, {
+              name: showTerms ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM,
+              size: IconSize.SIZE_SMALL
+            }),
+            terms: jsx(Link, {
+              css: styles.expanderLink,
+              "data-testid": "terms-link",
+              onClick: e => {
+                e.preventDefault();
+                setShowTerms(prev => !prev);
+              },
+              onKeyDown: e => {
+                if (e.key === "Enter") {
+                  setShowTerms(prev => !prev);
+                }
+              },
+              role: "button",
+              tabIndex: 0
+            })
+          },
+          defaults: "I agree to the <terms>Terms of Service</terms>",
+          i18nKey: "terms.agreeToTerms"
+        }),
+        control: form.control,
+        "data-testid": "fields.agreement",
+        label: t("terms.fields.agreement"),
+        name: "agreement"
+      })
+    }), showTerms && jsxs("div", {
+      css: styles.termsWell,
+      children: [jsxs("div", {
+        children: [jsx(Typography, {
+          bold: true,
+          variant: "body1",
+          children: t("terms.shipEngineTitle")
+        }), jsx(DisplayTerm, {
+          term: {
+            links: [{
+              link: "https://www.shipengine.com/terms-of-service/",
+              locale: "en-US",
+              title: t("onboarding:termsAndAgreementLinkText.shipEngineToS")
+            }, {
+              link: "https://auctane.com/legal/privacy-policy/",
+              locale: "en-US",
+              title: t("onboarding:termsAndAgreementLinkText.auctanePrivacyPolicy")
+            }]
+          }
+        }), !!carrierTerms.length && jsxs(Fragment, {
+          children: [jsx(Spacer, {}), jsx(Typography, {
+            bold: true,
+            variant: "body1",
+            children: t("terms.carriersTitle")
+          }), carrierTerms.map(term => jsx(DisplayTerm, {
+            term: term
+          }, term.termType))]
+        }), enableParcelGuard && !!insuranceProviderTerms.length && jsxs(Fragment, {
+          children: [jsx(Spacer, {}), jsx(Typography, {
+            bold: true,
+            variant: "body1",
+            children: t("terms.insuranceProvidersTitle")
+          }), insuranceProviderTerms.map(term => jsx(DisplayTerm, {
+            term: term
+          }, term.termType))]
+        })]
+      }), jsx(ButtonGroup, {
+        justify: "end",
+        children: jsx(Button, {
+          onClick: () => setShowTerms(false),
+          variant: ButtonVariant.OUTLINED,
+          children: t("actions.close")
+        })
+      })]
+    }), jsx(ButtonGroup, {
+      justify: "center",
+      children: jsx(SubmitButton, {
+        alwaysRequireValidity: true,
+        control: form.control,
+        "data-testid": "actions.continue",
+        disabled: isSubmitDisabled,
+        variant: ButtonVariant.FILLED,
+        children: t("actions.continue")
+      })
+    })]
+  });
+};
+
+export { TermsAgreementForm };

package/dist/esm/workflows/onboarding/components/terms-agreement-step/terms-agreement-step.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { InlineNotification, NotificationType, Icon, IconSize } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { useTranslation } from 'react-i18next';
+import { styles } from './terms-agreement-step.styles.js';
+import { TermsAgreementForm } from '../terms-agreement-form/terms-agreement-form.js';
+import { useCarrierMetadata } from '../../../../features/manage-carriers/hooks/use-carrier-metadata.js';
+import { useElements } from '../../../../elements-provider/elements-context-provider.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+import { StepHeader } from '../step-header/step-header.js';
+import { CarrierLogo } from '../../../../components/carrier-logo/carrier-logo.js';
+
+const TermsAgreementStep = ({
+  carrierProfilesToRegister,
+  insuranceProviderProfiles,
+  onSubmit,
+  enabledCarrierProfiles
+}) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    t
+  } = useTranslation("onboarding");
+  const {
+    globalFeatures: {
+      enableParcelGuard
+    }
+  } = useElements();
+  const carrierFriendlyNames = useCarrierMetadata();
+  const hideTerms = carrierProfilesToRegister.length === 0 && (insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.length) === 0;
+  const carrierTerms = carrierProfilesToRegister.flatMap(c => c.requiredTerms);
+  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 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
+  // Insurance does not get set in the same enabled carriers list and should bypass this check
+  if (hasEnabledCarriersConfigurationError && !hasInsuranceToRegister) {
+    return jsx(InlineNotification, {
+      css: {
+        textAlign: "left"
+      },
+      title: t("errors.noCarriers.title"),
+      type: NotificationType.ERROR,
+      children: t("errors.noCarriers.subtitle")
+    });
+  }
+  const renderCarrierLogos = () => {
+    if (!carrierProfilesToRegister.length) return null;
+    return carrierProfilesToRegister.map(p => {
+      var _a;
+      return jsx(CarrierLogo, {
+        carrierCode: p.carrierCode,
+        carrierName: ((_a = carrierFriendlyNames[p.carrierCode]) === null || _a === void 0 ? void 0 : _a.name) || p.carrierCode,
+        size: "lg"
+      }, p.carrierCode);
+    });
+  };
+  const renderInsuranceLogos = () => {
+    if (!hasInsuranceToRegister) return null;
+    return jsxs(Fragment, {
+      children: [hasCarriersToRegister && jsx(Icon, {
+        css: styles.plus,
+        name: IconNames.PLUS,
+        size: IconSize.SIZE_SMALL
+      }), insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.map(p => jsx(CarrierLogo, {
+        carrierCode: p.provider,
+        carrierName: p.friendlyName,
+        size: "lg"
+      }, p.provider))]
+    });
+  };
+  return jsxs("div", {
+    css: styles.container,
+    "data-testid": "terms-agreement-step",
+    children: [hasAlreadyConnectedCarriers && jsxs(Fragment, {
+      children: [jsx(InlineNotification, {
+        css: {
+          textAlign: "left"
+        },
+        title: t("previouslyOnboarded.title"),
+        type: NotificationType.INFO,
+        children: t("previouslyOnboarded.subtitle")
+      }), jsx(Spacer, {
+        multiplier: 4
+      })]
+    }), (hasCarriersToRegister || hasInsuranceToRegister) && jsxs(Fragment, {
+      children: [jsx(StepHeader, {
+        subtitle: t("termsAgreement.subtitle"),
+        title: t("termsAgreement.title")
+      }), jsxs("div", {
+        css: styles.carrierLogos,
+        children: [renderCarrierLogos(), renderInsuranceLogos()]
+      })]
+    }), jsx("div", {
+      css: styles.fullWidth,
+      children: jsx(TermsAgreementForm, {
+        carrierTerms: carrierTerms,
+        hideTerms: hideTerms,
+        insuranceProviderTerms: insuranceProviderTerms,
+        onSubmit: onSubmit
+      })
+    })]
+  });
+};
+
+export { TermsAgreementStep };

package/dist/esm/workflows/onboarding/components/terms-agreement-step/use-terms-agreement-step.js

@@ -0,0 +1,112 @@
+import { useListFundingSources, useListCarriers, useGetFundingSourceMetadata, useGetInsuranceFundingSourceAcceptedTerms } from '@shipengine/react-api';
+import { filterFundingSourceCarriers } from '../../../../utilities/shipengine/carrier.js';
+import { getInsuranceProviderWithFriendlyName } from '../../../../utilities/shipengine/insurance.js';
+import { useMemo, useCallback } from 'react';
+
+const useTermsAgreementStep = ({
+  enabledCarriers,
+  onStepComplete
+}) => {
+  const {
+    data: fundingSources,
+    isLoading: isLoadingFundingSources,
+    error: listFundingSourcesError,
+    refetch: refetchFundingSources
+  } = useListFundingSources();
+  const {
+    data: carriers,
+    isLoading: isLoadingCarriers,
+    error: listCarriersError,
+    refetch: refetchCarriers
+  } = useListCarriers();
+  const {
+    data: fundingSourceMetadata,
+    isLoading: isLoadingFundingSourceMetadata,
+    error: listFundingSourceMetadataError
+  } = useGetFundingSourceMetadata();
+  const {
+    data: insuranceAcceptedTerms,
+    isLoading: isLoadingInsuranceAcceptedTerms
+  } = useGetInsuranceFundingSourceAcceptedTerms();
+  const fundingSourceRequiredTerms = fundingSourceMetadata === null || fundingSourceMetadata === void 0 ? void 0 : fundingSourceMetadata.defaultFundingSourceProfile.requiredTerms;
+  const fundingSourceRegion = fundingSourceMetadata === null || fundingSourceMetadata === void 0 ? void 0 : fundingSourceMetadata.defaultRegionProfile.countryCode;
+  const fundingSourceCarrierProfiles = fundingSourceMetadata === null || fundingSourceMetadata === void 0 ? void 0 : fundingSourceMetadata.defaultRegionProfile.carrierProfiles;
+  const carrierProfilesFilteredByRegion = filterFundingSourceCarriers(fundingSourceCarrierProfiles, fundingSourceRegion);
+  // filter carrier profiles based on enabled carriers
+  const enabledCarrierProfiles = carrierProfilesFilteredByRegion === null || carrierProfilesFilteredByRegion === void 0 ? void 0 : carrierProfilesFilteredByRegion.filter(c => enabledCarriers.includes(c.carrierCode));
+  const carrierProfilesToRegister = useMemo(() => {
+    if (!enabledCarrierProfiles) return [];
+    // add Stamps/USPS carrier ToS from funding source terms
+    const carrierProfiles = enabledCarrierProfiles.map(c => {
+      if (c.carrierCode === "stamps_com" && fundingSourceRequiredTerms) {
+        return Object.assign(Object.assign({}, c), {
+          requiredTerms: [...fundingSourceRequiredTerms, ...c.requiredTerms]
+        });
+      }
+      return c;
+    });
+    // handle existing funding source
+    const {
+      fundingSourceId
+    } = (fundingSources === null || fundingSources === void 0 ? void 0 : fundingSources[0]) || {};
+    if (!fundingSourceId || !carriers) return carrierProfiles;
+    const connectedCarriers = carriers.filter(c => c.fundingSourceId === fundingSourceId);
+    return carrierProfiles.filter(profile => {
+      // filter out carriers that are already connected
+      const isConnected = connectedCarriers.some(c => c.carrierCode === profile.carrierCode && c.fundingSourceId === fundingSourceId);
+      // if stamps_com is enabled, and usps is connected to the funding source,
+      // remove stamps_com from the list of carriers to register
+      const hasWalletedUspsConnected = connectedCarriers.some(c => c.carrierCode === "usps" && c.fundingSourceId === fundingSourceId);
+      const hasEnabledStamps = enabledCarrierProfiles === null || enabledCarrierProfiles === void 0 ? void 0 : enabledCarrierProfiles.some(c => c.carrierCode === "stamps_com");
+      if (isConnected) {
+        return false;
+      }
+      if (hasEnabledStamps && hasWalletedUspsConnected && profile.carrierCode === "stamps_com") {
+        return false;
+      }
+      return true;
+    });
+  }, [fundingSourceRequiredTerms, fundingSources, carriers, enabledCarrierProfiles]);
+  const insuranceProviderProfiles = useMemo(() => {
+    const insuranceProfiles = fundingSourceMetadata === null || fundingSourceMetadata === void 0 ? void 0 : fundingSourceMetadata.defaultFundingSourceProfile.optionalTerms.map(terms => {
+      return Object.assign(Object.assign({}, getInsuranceProviderWithFriendlyName(terms.termType)), {
+        terms
+      });
+    });
+    if (!insuranceProfiles) return [];
+    // filter out insurance profiles that are already connected from insurance accepted terms
+    const connectedInsuranceProfiles = insuranceAcceptedTerms === null || insuranceAcceptedTerms === void 0 ? void 0 : insuranceAcceptedTerms.acceptedTerms.map(terms => {
+      return Object.assign(Object.assign({}, getInsuranceProviderWithFriendlyName(terms.termType)), {
+        terms
+      });
+    });
+    return insuranceProfiles.filter(profile => {
+      const isConnected = connectedInsuranceProfiles === null || connectedInsuranceProfiles === void 0 ? void 0 : connectedInsuranceProfiles.some(c => c.terms.termType === profile.terms.termType);
+      if (isConnected) {
+        return false;
+      }
+      return true;
+    });
+  }, [fundingSourceMetadata, insuranceAcceptedTerms]);
+  const handleSubmitTermsAgreement = useCallback(() => {
+    onStepComplete();
+  }, [onStepComplete]);
+  const termsAgreementErrors = useMemo(() => {
+    return [...(listFundingSourcesError || []), ...(listCarriersError || []), ...(listFundingSourceMetadataError || [])];
+  }, [listFundingSourcesError, listCarriersError, listFundingSourceMetadataError]);
+  return {
+    carrierProfilesToRegister,
+    enabledCarrierProfiles,
+    fundingSourceMetadata,
+    fundingSourceRequiredTerms,
+    fundingSources,
+    handleSubmitTermsAgreement,
+    refetchCarriers,
+    refetchFundingSources,
+    insuranceProviderProfiles,
+    isLoadingTermsAgreementStep: isLoadingFundingSources || isLoadingCarriers || isLoadingFundingSourceMetadata || isLoadingInsuranceAcceptedTerms,
+    termsAgreementErrors
+  };
+};
+
+export { useTermsAgreementStep };

package/dist/esm/workflows/onboarding/components/welcome-page/welcome-page.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Typography, Button, ButtonVariant, ButtonColor } from '@shipengine/giger';
+import { useTranslation } from 'react-i18next';
+import SvgOnboardingGlobe from '../../../../assets/onboarding-globe.svg.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+
+const WelcomePage = ({
+  onContinue
+}) => {
+  const {
+    t
+  } = useTranslation(["onboarding"]);
+  return jsxs("div", {
+    css: {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column",
+      textAlign: "center"
+    },
+    "data-testid": "welcome-page",
+    children: [jsx(SvgOnboardingGlobe, {}), jsx(Spacer, {
+      multiplier: 4
+    }), jsx(Typography, {
+      variant: "heading4",
+      children: t("onboarding:welcomePage.title")
+    }), jsx(Spacer, {
+      multiplier: 2
+    }), jsx(Typography, {
+      css: {
+        textAlign: "center"
+      },
+      variant: "body2",
+      children: t("onboarding:welcomePage.message")
+    }), jsx(Spacer, {
+      multiplier: 4
+    }), jsx(Button, {
+      bold: false,
+      color: ButtonColor.PRIMARY,
+      "data-testid": "onboarding:welcomePage.action",
+      onClick: onContinue,
+      type: "button",
+      variant: ButtonVariant.FILLED,
+      children: t("onboarding:welcomePage.action")
+    })]
+  });
+};
+
+export { WelcomePage };

package/dist/esm/workflows/onboarding/onboarding.js

@@ -0,0 +1,89 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { OnboardingWizard } from './components/onboarding-wizard/onboarding-wizard.js';
+import en from '../../locales/en/index.js';
+import { createElement } from '../../create-element/create-element.js';
+import { ErrorFallback } from '../../components/error-fallback/error-fallback.js';
+
+/**
+ * # Onboarding Component
+ *
+ * - The `<Onboarding />` component is used to onboard a new user to the ShipEngine platform. This
+ * component will allow the user to create a warehouse, register a carrier, and create a funding
+ * source for their account. This is everything a user needs to begin fulfilling their shipments
+ * using the ShipEngine Platform.
+ *
+ * @param ComponentProps The base props that will be passed into the `<Onboarding />` component.
+ *
+ * @returns Element An EmotionJSX.Element that will render the `<Onboarding />` component
+ * with all the appropriate wrappers.
+ *
+ * @example
+ * You can see how the `<Component />` is used in the `createElement` function call below.
+ * ```tsx
+ * export const Element = createElement(Component, ErrorFallback, {
+ *   css: {
+ *     height: "100%",
+ *     maxWidth: "800px",
+ *     minWidth: "375px",
+ *     overflow: "auto",
+ *     scrollbarGutter: "stable both-edges",
+ *     width: "100%",
+ *   },
+ *   resources: { en },
+ * });
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link Onboarding.Element | The **Element** created to render `<Onboarding />`}
+ */
+const Component = ({
+  defaultShipFromAddress,
+  onComplete,
+  onSellerOnboarded,
+  skipWelcomePage
+}) => {
+  return jsx(OnboardingWizard, {
+    defaultShipFromAddress: defaultShipFromAddress,
+    onComplete: onComplete,
+    onSellerOnboarded: onSellerOnboarded,
+    skipWelcomePage: skipWelcomePage
+  });
+};
+/**
+ * # Registered Onboarding Element
+ *
+ * - This is the registered `<Onboarding />` element that will be used to render the
+ * `<Onboarding.Element />` component.
+ *
+ * @param ElementProps The props, callbacks, and resources necessary to render
+ * the `<Onboarding.Element />` component.
+ *
+ * @example
+ * The `<Component />` is the source JSX that is rendered when you make use of the `Onboarding`
+ * Element directly. Here is a brief example of how you would use it within your application.
+ * ```tsx
+ * <Onboarding.Element
+ *   onComplete={() => console.log('Onboarding Complete!')}
+ * />
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link Onboarding.ComponentProps | The **props** that can be passed into the `<Onboarding.Element />` component}
+ */
+const Element = createElement(Component, ErrorFallback, {
+  css: {
+    height: "100%",
+    maxWidth: "800px",
+    minWidth: "375px",
+    overflow: "auto",
+    scrollbarGutter: "stable both-edges",
+    width: "100%"
+  },
+  resources: {
+    en
+  }
+});
+
+export { Component, Element };

package/dist/types/components/actions-menu/actions-menu.d.ts

@@ -0,0 +1,22 @@
+export declare enum Actions {
+    PRINT_LABEL = 0,
+    VOID_LABEL = 1,
+    PRINT_FORMS = 2,
+    EDIT = 3,
+    REMOVE = 4,
+    VIEW_DETAILS = 5,
+    CANCEL_SHIPMENT = 6
+}
+type ActionsMenuProps = {
+    /** An array of allowed Actions to be rendered */
+    allowedActions?: Actions[];
+    /** Flag to set the button as disabled */
+    disabled?: boolean;
+    /** Flag to set the button loading */
+    isLoading?: boolean;
+    /** Callback when the user clicks one of the actions */
+    onActionClick: (action: Actions) => void;
+};
+export declare const ActionsMenu: ({ disabled, allowedActions, isLoading, onActionClick, }: ActionsMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=actions-menu.d.ts.map

package/dist/types/components/actions-menu/actions-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/actions-menu/actions-menu.tsx"],"names":[],"mappings":"AAOA,oBAAY,OAAO;IACjB,WAAW,IAAA;IACX,UAAU,IAAA;IACV,WAAW,IAAA;IACX,IAAI,IAAA;IACJ,MAAM,IAAA;IACN,YAAY,IAAA;IACZ,eAAe,IAAA;CAChB;AAED,KAAK,gBAAgB,GAAG;IACtB,iDAAiD;IACjD,cAAc,CAAC,EAAE,OAAO,EAAE,CAAC;IAC3B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uDAAuD;IACvD,aAAa,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,yDAKzB,gBAAgB,qDAoElB,CAAC"}

package/dist/types/components/actions-menu/index.d.ts

@@ -0,0 +1,2 @@
+export { ActionsMenu, Actions } from "./actions-menu";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/actions-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/types/components/address-display/address-display.d.ts

@@ -0,0 +1,12 @@
+import type { SE } from "@shipengine/react-api";
+type AddressDisplayProps = {
+    address: SE.Address;
+    decoratorText?: string;
+    nickname?: string;
+    onEdit?: () => Promise<void> | void;
+    showEmail?: boolean;
+    typographyVariant?: "body1" | "body2";
+};
+export declare const AddressDisplay: ({ address, decoratorText, nickname, onEdit, showEmail, typographyVariant, }: AddressDisplayProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=address-display.d.ts.map

package/dist/types/components/address-display/address-display.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"address-display.d.ts","sourceRoot":"","sources":["../../../../src/components/address-display/address-display.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAC;AAIhD,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,6EAO5B,mBAAmB,qDA6DrB,CAAC"}

package/dist/types/components/address-display/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./address-display";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/address-display/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/address-display/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/types/components/address-parser/address-parser-schema.d.ts

@@ -0,0 +1,11 @@
+import { z } from "zod";
+export declare const addressParserSchema: z.ZodObject<{
+    fullAddress: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    fullAddress: string;
+}, {
+    fullAddress: string;
+}>;
+export type AddressParserFields = z.input<typeof addressParserSchema>;
+export type AddressParserPayload = z.output<typeof addressParserSchema>;
+//# sourceMappingURL=address-parser-schema.d.ts.map