@shipengine/elements 1.5.0 → 1.5.1

package/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useEffect, useRef, createElement as createElement$2, forwardRef, useCallback, useReducer, useMemo, useState, createContext, useContext, memo, useLayoutEffect, Fragment as Fragment$1 } from 'react';
 import { useController, get as get$2, set as set$2, useWatch, useFormState, useForm } from 'react-hook-form';
 import { useTranslation, Trans } from 'react-i18next';
-import alchemy, { logger, SE, useAlchemy, useListServicePoints, useValidateAddresses, useAddFunds, useGetCarrierById, useUpdateAutoFunding, useGetAutoFundingConfiguration, useUpdateFundingSource, useListFundingSources, useConnectCarrierAccount, useGetCarrierConnectionForm, useListCarrierConnections, useListCarriers, useConnectCarrier, useListWarehouses, useUpdateWarehouse, useCreateWarehouse, useDeleteWarehouse, useGetFundingSourceTransactions, useListSalesOrderShipments, useGetAccountSettings, useUpdateAccountSettings, useUpdateSalesOrderShipment, useParseAddress, useListCustomPackageTypes, useCalculateRates, useGetShipmentRates, useListLabels, useCreateLabel, useCreateSalesOrderShipment, CodedError, useListSalesOrders, useGetSalesOrder, useListOrderSources, useRefreshOrderSource, useGetInsuranceAccount, useCreateShipment, useGetShipment, useGetSalesOrderShipment, useGetLabel, useVoidLabel, useCreateFundingSource, useRegisterCarrier, useGetFundingSourceMetadata } from '@shipengine/alchemy';
+import alchemy, { logger, SE, useAlchemy, useListServicePoints, useValidateAddresses, useAddFunds, useGetCarrierById, useUpdateAutoFunding, useGetAutoFundingConfiguration, useUpdateFundingSource, useListFundingSources, useConnectCarrierAccount, useGetCarrierConnectionForm, useListCarrierConnections, useListCarriers, useConnectCarrier, useListWarehouses, useUpdateWarehouse, useCreateWarehouse, useDeleteWarehouse, useGetFundingSourceTransactions, useListSalesOrderShipments, useGetAccountSettings, useUpdateAccountSettings, useUpdateSalesOrderShipment, useParseAddress, useListCustomPackageTypes, useCalculateRates, useGetShipmentRates, useListLabels, useCreateLabel, useCreateSalesOrderShipment, CodedError, useListSalesOrders, useGetSalesOrder, useListOrderSources, useRefreshOrderSource, useGetInsuranceAccount, useCreateShipment, useGetShipment, useGetSalesOrderShipment, useGetLabel, useVoidLabel, useListShipments, useCreateFundingSource, useRegisterCarrier, useGetFundingSourceMetadata } from '@shipengine/alchemy';
 import { Typography, IconTooltip, IconSize, FormField, FieldMessageType, Checkbox, Input, Icon, InlineNotification, NotificationType, Tag, TagColor, TagVariant, Divider, Button, ButtonVariant, Skeleton, SkeletonAnimation, SkeletonBackgroundColor, SkeletonVariant, Link, SelectAutocomplete, Select as Select$1, OptionGroup, Option, Switch as Switch$1, Textarea, Spinner, SpinnerSize, ChipList, Chip, ButtonSize, DatePicker as DatePicker$1, Table, TableFooter, TableHeader, TableHeaderRow, TableHeaderCell, TableBody, TableRow, TableBodyCell, TableBaseRow, DropdownOptionList, Pagination, Grid, GridChild, RadioGroup, Radio, ButtonColor, Dialog, DialogHeader, ButtonIcon, DialogContent, Popover, BottomSheet, Stepper, Step } from '@shipengine/giger';
 import { format, parse } from 'date-fns';
 import * as Locales from 'date-fns/locale';
@@ -15148,7 +15148,7 @@ var en = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(O
  *
  * @see {@link ConnectCarrier.ComponentProps | The props that are passed into the `<ConnectCarrier />` component}
  */
-const Component$9 = ({
+const Component$b = ({
   carrierName,
   features,
   onCancel,
@@ -15217,7 +15217,7 @@ const Component$9 = ({
     }
   });
 };
-alchemy.createElement(Component$9, ErrorFallback, {
+alchemy.createElement(Component$b, ErrorFallback, {
   css: {
     height: "100%",
     maxWidth: "800px",
@@ -15253,7 +15253,7 @@ alchemy.createElement(Component$9, ErrorFallback, {
  * @see {@link ExternalCarriers.ComponentProps | The props that are passed into the `<ExternalCarriers />` component}
  * @see {@link AccountSettings.Element | The `<AccountSettings />` component renders the `<ExternalCarriers />` component}
  */
-const Component$8 = ({
+const Component$a = ({
   features
 }) => {
   const {
@@ -15311,7 +15311,7 @@ const Component$8 = ({
           textAlign: "left"
         }
       }, {
-        children: jsx(Component$9, {
+        children: jsx(Component$b, {
           features: features,
           onCarrierConnected: () => {
             setAddModalOpen(false);
@@ -15326,7 +15326,7 @@ const Component$8 = ({
 
 var externalCarriers = /*#__PURE__*/Object.freeze({
 	__proto__: null,
-	Component: Component$8
+	Component: Component$a
 });
 
 const styles$l = createStyles({
@@ -15756,7 +15756,7 @@ const useListConnectedCarriers = () => {
  * @see {@link ListCarriers.ComponentProps | The props that are passed into the `<List-Carriers />` component}
  * @see {@link AccountSettings.Element | The `<AccountSettings />` component renders the `<List-Carriers />` component}
  */
-const Component$7 = ({
+const Component$9 = ({
   features
 }) => {
   const {
@@ -15797,7 +15797,7 @@ const Component$7 = ({
 
 var listCarriers = /*#__PURE__*/Object.freeze({
 	__proto__: null,
-	Component: Component$7
+	Component: Component$9
 });
 
 const WarehouseDisplay = ({
@@ -16436,7 +16436,7 @@ const ManageWarehouses = ({
  * @see {@link ManageWarehouses.ComponentProps | The props that are passed into the `<ManageWarehouses />` component}
  * @see {@link AccountSettings.Element | The `<AccountSettings />` component renders the `<ManageWarehouses />` component}
  */
-const Component$6 = ({
+const Component$8 = ({
   onWarehouseAddressValidation: _ARE_WE_ACTUALLY_GOING_TO_USE_THIS
 }) => {
   const {
@@ -16519,7 +16519,7 @@ const Component$6 = ({
 
 var manageWarehouses = /*#__PURE__*/Object.freeze({
 	__proto__: null,
-	Component: Component$6
+	Component: Component$8
 });
 
 var img = "data:image/svg+xml,%3csvg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M22.9425 6.62223L18.63 5.81973C18.4275 5.78223 18.2325 5.91723 18.195 6.11973L17.3925 10.4322C17.355 10.6347 17.49 10.8297 17.6925 10.8672C17.715 10.8672 17.7375 10.8672 17.76 10.8672C17.94 10.8672 18.0975 10.7397 18.1275 10.5597L18.765 7.13973C21.15 10.3872 20.8125 14.9472 17.9475 17.8047C15.3225 20.4297 11.25 20.9697 8.04001 19.1247C7.86001 19.0197 7.63501 19.0797 7.53001 19.2597C7.42501 19.4397 7.49251 19.6647 7.66501 19.7697C9.05251 20.5722 10.5975 20.9622 12.1275 20.9622C14.4525 20.9622 16.755 20.0622 18.48 18.3372C21.5925 15.2247 21.9675 10.2597 19.3875 6.71973L22.8 7.34973C22.995 7.38723 23.1975 7.25223 23.235 7.04973C23.2725 6.84723 23.1375 6.65223 22.935 6.61473L22.9425 6.62223Z' fill='black' /%3e %3cpath d='M6.30022 12.7798C6.09772 12.7423 5.90272 12.8773 5.86522 13.0798L5.24272 16.4548C3.15022 13.2223 3.60022 8.91728 6.33022 6.18728C8.85022 3.66728 12.6752 3.05228 15.8477 4.65728C16.0277 4.74728 16.2602 4.67978 16.3502 4.49228C16.4402 4.30478 16.3727 4.07978 16.1852 3.98978C12.7202 2.23478 8.54272 2.90978 5.79772 5.65478C2.79022 8.66228 2.31772 13.3948 4.65022 16.9273L1.19272 16.2898C0.990221 16.2523 0.795221 16.3873 0.757721 16.5898C0.720221 16.7923 0.855221 16.9873 1.05772 17.0248L5.37022 17.8273C5.37022 17.8273 5.41522 17.8273 5.43772 17.8273C5.61772 17.8273 5.77522 17.6998 5.80522 17.5198L6.60772 13.2073C6.64522 13.0048 6.51022 12.8098 6.30772 12.7723L6.30022 12.7798Z' fill='black' /%3e %3cpath d='M15.0824 13.2223C14.9249 12.9373 14.7224 12.6973 14.4674 12.4948C14.2124 12.2998 13.9349 12.1348 13.6274 11.9998C13.3199 11.8648 13.0124 11.7598 12.7124 11.6773L12.3149 11.5648V7.87482C12.8324 7.91232 13.2749 8.06232 13.6349 8.33232C14.0549 8.64732 14.2874 9.07482 14.3399 9.60732H15.1874C15.1724 9.11982 15.0224 8.68482 14.7524 8.30232C14.4824 7.91982 14.1149 7.61982 13.6574 7.40232C13.2599 7.21482 12.8099 7.12482 12.3149 7.09482V6.31482C12.3149 6.14232 12.1799 6.00732 12.0074 6.00732C11.8349 6.00732 11.6999 6.14232 11.6999 6.31482V7.10982C11.2649 7.14732 10.8449 7.22982 10.4774 7.40232C10.0049 7.61982 9.62988 7.92732 9.35238 8.31732C9.07488 8.70732 8.93988 9.16482 8.93988 9.67482C8.93988 10.2898 9.14988 10.7998 9.56238 11.1898C9.97488 11.5798 10.5599 11.8948 11.3174 12.1198L11.6999 12.2323V16.1323C11.3849 16.1098 11.0849 16.0573 10.8224 15.9523C10.4699 15.8173 10.1849 15.6148 9.96738 15.3523C9.74988 15.0898 9.62238 14.7673 9.59238 14.3923V14.3323C9.59238 14.0848 9.38988 13.8823 9.14238 13.8823C8.89488 13.8823 8.69238 14.0848 8.69238 14.3323V14.3923C8.72988 14.8948 8.87988 15.3448 9.15738 15.7273C9.43488 16.1098 9.80988 16.4098 10.2899 16.6273C10.6949 16.8073 11.1749 16.8973 11.6999 16.9273V17.6848C11.6999 17.8573 11.8349 17.9923 12.0074 17.9923C12.1799 17.9923 12.3149 17.8573 12.3149 17.6848V16.9348C12.8699 16.9048 13.3574 16.7923 13.7774 16.5898C14.2724 16.3498 14.6549 16.0273 14.9174 15.6148C15.1799 15.2023 15.3149 14.7448 15.3149 14.2348C15.3149 13.8373 15.2399 13.4923 15.0824 13.2073V13.2223ZM11.0099 11.1448C10.7849 11.0473 10.5749 10.9348 10.3949 10.7923C10.2074 10.6573 10.0574 10.4923 9.95238 10.3048C9.84738 10.1173 9.78738 9.89232 9.78738 9.63732C9.78738 9.29232 9.88488 8.98482 10.0724 8.71482C10.2674 8.44482 10.5299 8.23482 10.8674 8.07732C11.1149 7.96482 11.3924 7.91232 11.6924 7.88232V11.3848C11.4599 11.3173 11.2349 11.2348 11.0024 11.1373L11.0099 11.1448ZM14.1449 15.2473C13.9274 15.5398 13.6349 15.7648 13.2674 15.9223C12.9824 16.0423 12.6599 16.1023 12.3149 16.1323V12.4198L12.4649 12.4648C12.8624 12.5773 13.2074 12.7123 13.5149 12.8623C13.8149 13.0123 14.0549 13.1998 14.2199 13.4173C14.3849 13.6348 14.4749 13.9123 14.4749 14.2348C14.4749 14.6173 14.3699 14.9548 14.1524 15.2473H14.1449Z' fill='black' /%3e %3cpath d='M14.7525 10.0796C14.985 10.0796 15.1725 9.89211 15.1725 9.65961V9.59961H14.3325V9.65961C14.3325 9.89211 14.52 10.0796 14.7525 10.0796Z' fill='black' /%3e%3c/svg%3e";
@@ -17701,9 +17701,9 @@ const AccountSettings = _a => {
     }), jsx(ManageFunding, {
       carrierId: carriers ? carriers[0].carrierId : "",
       currency: currency
-    }), jsx(PaymentMethodSettings, {}), jsx(WalletHistory, {}), jsx(Component$6, {}), jsx(Component$7, {
+    }), jsx(PaymentMethodSettings, {}), jsx(WalletHistory, {}), jsx(Component$8, {}), jsx(Component$9, {
       features: features
-    }), jsx(Component$8, {
+    }), jsx(Component$a, {
       features: features
     }), jsx(LabelLayout, {
       display: "settings"
@@ -17739,7 +17739,7 @@ const AccountSettings = _a => {
  *
  * @see {@link AccountSettings.Element | The **Element** created to render `<AccountSettings />`}
  */
-const Component$5 = ({
+const Component$7 = ({
   features,
   onSaveSettings
 }) => {
@@ -17783,7 +17783,7 @@ const Component$5 = ({
  * @see {@link PaymentMethodSettings | The `<PaymentMethodSettings />` component used to manage payment methods}
  * @see {@link ManageFunding | The `<ManageFunding />` component used to manage funding rules and add funds to a carrier account}
  */
-const Element$6 = alchemy.createElement(Component$5, ErrorFallback, {
+const Element$8 = alchemy.createElement(Component$7, ErrorFallback, {
   css: {
     height: "100%",
     maxWidth: "800px",
@@ -17797,8 +17797,8 @@ const Element$6 = alchemy.createElement(Component$5, ErrorFallback, {
 
 var accountSettings = /*#__PURE__*/Object.freeze({
 	__proto__: null,
-	Component: Component$5,
-	Element: Element$6
+	Component: Component$7,
+	Element: Element$8
 });
 
 const SuspendSalesOrder = ({
@@ -22049,7 +22049,7 @@ const PurchaseLabelByShipment = _a => {
  *
  * @see {@link PurchaseLabel.Element | The **Element** created to render `<PurchaseLabel />`}
  */
-const Component$4 = _a => {
+const Component$6 = _a => {
   var _b, _c;
   var {
       features
@@ -22141,7 +22141,7 @@ const Component$4 = _a => {
  *
  * @see {@link ViewShipment.Element | The next step in the label purchase workflow `<ViewShipment.Element />`}
  */
-const Element$5 = alchemy.createElement(Component$4, ErrorFallback, {
+const Element$7 = alchemy.createElement(Component$6, ErrorFallback, {
   css: {
     height: "100%",
     maxWidth: "800px",
@@ -22155,8 +22155,8 @@ const Element$5 = alchemy.createElement(Component$4, ErrorFallback, {
 
 var purchaseLabel = /*#__PURE__*/Object.freeze({
 	__proto__: null,
-	Component: Component$4,
-	Element: Element$5
+	Component: Component$6,
+	Element: Element$7
 });
 
 const styles$8 = createStyles({
@@ -22518,338 +22518,642 @@ const Shipment = ({
   });
 };
 
-/**
- * # View Shipment Component
- *
- * - The `<ViewShipment />` component is used to for viewing the shipment's tracking number, printing the label that
- * was created, and the option to void the label. When a label is voided, you can see a list of the
- * previously voided labels for a given shipment using this component.
- *
- * @param ComponentProps The base props that will be passed into the `<ViewShipment />` component.
- *
- * @returns Element An EmotionJSX.Element that will render the `<ViewShipment />` 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 = alchemy.createElement(Component, ErrorFallback, {
- *   css: { height: "100%", maxWidth: "800px", minWidth: "440px", width: "100%" },
- *   resources: { en },
- * });
- * ```
- *
- * <br />
- *
- * @see {@link ViewShipment.Element | The **Element** created to render `<ViewShipment />`}
- */
-const Component$3 = ({
-  features,
-  onClickPrintLabel,
-  onClickPurchaseLabel,
-  onClickVoidLabel,
-  shipmentId
-}) => {
-  var _a, _b, _c;
-  const {
-    t
-  } = useTranslation(["common", "view-shipment"]);
-  const shipment = useGetSalesOrderShipment(shipmentId);
-  const {
-    data: {
-      labels = []
-    } = {}
-  } = useListLabels({
-    shipmentId
-  });
-  const salesOrder = useGetSalesOrder((_b = (_a = shipment.data) === null || _a === void 0 ? void 0 : _a.salesOrderIds) === null || _b === void 0 ? void 0 : _b[0]);
-  const warehouses = useListWarehouses();
-  const carriers = useListCarriers();
-  if (shipment.isInitialLoading) return jsx(Loader, {
-    message: t("loading.shipment")
-  });
-  if (shipment.error) throw new Error(shipment.error.map(e => e.message).join(", "));
-  if (!shipment.data) throw new Error("errorMessages.unableToLoad.shipment");
-  const warehouse = (_c = warehouses.data) === null || _c === void 0 ? void 0 : _c.find(w => {
-    var _a;
-    return w.warehouseId === ((_a = shipment.data) === null || _a === void 0 ? void 0 : _a.warehouseId);
-  });
-  return jsx(Shipment, {
-    carriers: carriers.data,
-    features: features,
-    labels: labels,
-    onClickPrintLabel: onClickPrintLabel,
-    onClickPurchaseLabel: onClickPurchaseLabel,
-    onClickVoidLabel: onClickVoidLabel,
-    salesOrder: salesOrder.data,
-    shipment: shipment.data,
-    warehouse: warehouse
-  });
-};
-/**
- * # Registered View Shipment Element
- *
- * - This is the registered `<ViewShipment />` element that will be used to render the
- * `<ViewShipment.Element />` component.
- *
- * @param ElementProps The props, callbacks, and resources necessary to render
- * the `<ViewShipment.Element />` component.
- *
- * @example
- * The `<Component />` is the source JSX that is rendered when you make use of the `ViewShipment`
- * Element directly. Here is a brief example of how you would use it within your application.
- * ```tsx
- * <ViewShipment.Element
- *   onClickPurchaseLabel={({ salesOrderId }) => {
- *     console.log('sales order ID', salesOrderId);
- *   }}
- *   onClickVoidLabel={({ labelId }) => {
- *     console.log('voided label', labelId);
- *   }}
- *   shipmentId="se-1234567"
- * />
- * ```
- *
- * <br />
- *
- * @see {@link ViewShipment.ComponentProps | The **props** that can be passed into the `<ViewShipment.Element />` component}
- *
- * @see {@link VoidLabel.Element | The next step in the label purchase workflow `<VoidLabel.Element />`}
- **/
-const Element$4 = alchemy.createElement(Component$3, ErrorFallback, {
-  css: {
-    height: "100%",
-    maxWidth: "800px",
-    minWidth: "440px",
-    width: "100%"
+const styles$7 = createStyles({
+  category: {
+    alignItems: "center",
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between"
   },
-  resources: {
-    en
-  }
-});
-
-var viewShipment = /*#__PURE__*/Object.freeze({
-	__proto__: null,
-	Component: Component$3,
-	Element: Element$4
+  colorPicker: theme => ({
+    "&::-webkit-color-swatch": {
+      border: `1px solid ${theme.palette.gray.light}`,
+      borderRadius: "4px",
+      padding: 0
+    },
+    "&::-webkit-color-swatch-wrapper": {
+      padding: 0
+    },
+    alignSelf: "center",
+    appearance: "none",
+    background: "none",
+    border: 0,
+    cursor: "pointer",
+    height: theme.spacing(4.25),
+    outline: "none",
+    width: theme.spacing(4.25)
+  }),
+  container: theme => ({
+    marginBottom: theme.spacing(2)
+  }),
+  input: theme => ({
+    border: `1px solid ${theme.palette.gray.light}`,
+    borderRadius: "4px",
+    color: theme.palette.gray.main,
+    fontSize: "14px",
+    padding: theme.spacing(1)
+  }),
+  inputContainer: theme => ({
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    padding: `${theme.spacing(2)}px 0`
+  }),
+  wrapper: theme => ({
+    display: "flex",
+    gap: theme.spacing(1)
+  })
 });
 
-const Actions = ({
-  onComplete,
-  onSubmit,
-  onViewShipment,
-  shipment,
-  voidRequest
+const ColorPaletteEditor = ({
+  paletteConfig,
+  onUpdatePaletteConfig,
+  formatKey
 }) => {
-  const {
-    t
-  } = useTranslation(["common", "void-label"]);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const handleSubmit = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-    setIsSubmitting(true);
-    yield onSubmit();
-    setIsSubmitting(false);
-  }), [onSubmit]);
-  return jsx(BottomSheet, Object.assign({
-    alwaysVisible: true,
-    css: theme => ({
-      borderTop: `1px solid ${theme.palette.gray.ultraLight}`,
-      boxShadow: "none",
-      position: "static"
-    })
+  const [expandedCategories, setExpandedCategories] = useState(new Set());
+  const toggleExpandedCategories = category => {
+    setExpandedCategories(prev => {
+      const openCategories = new Set(prev);
+      if (openCategories.has(category)) {
+        return new Set([...openCategories].filter(item => item !== category));
+      } else {
+        return new Set([...openCategories, category]);
+      }
+    });
+  };
+  const handleInputChange = useCallback((category, key, value) => {
+    const updatedConfig = Object.assign(Object.assign({}, paletteConfig || {}), {
+      [category]: Object.assign(Object.assign({}, (paletteConfig === null || paletteConfig === void 0 ? void 0 : paletteConfig[category]) || {}), {
+        [key]: value
+      })
+    });
+    onUpdatePaletteConfig(updatedConfig);
+  }, [onUpdatePaletteConfig, paletteConfig]);
+  return jsx("div", Object.assign({
+    "data-test-id": "color-palette-editor"
   }, {
-    children: (voidRequest === null || voidRequest === void 0 ? void 0 : voidRequest.approved) ?
-    // The void request has been approved
-    jsxs(ButtonGroup, {
-      children: [jsx(Button, Object.assign({
-        bold: false,
-        onClick: () => onComplete(voidRequest, shipment),
-        variant: ButtonVariant.OUTLINED
+    children: paletteConfig && Object.keys(paletteConfig).map(category => jsxs("div", Object.assign({
+      css: styles$7.container,
+      id: category
+    }, {
+      children: [jsxs("div", Object.assign({
+        "aria-expanded": expandedCategories.has(category),
+        css: styles$7.category,
+        onClick: event => {
+          event.preventDefault();
+          toggleExpandedCategories(category);
+        },
+        role: "button"
       }, {
-        children: t("void-label:actions.complete")
-      })), jsx(Button, Object.assign({
-        bold: false,
-        isFullWidth: true,
-        onClick: () => onViewShipment(shipment)
+        children: [jsx("p", {
+          children: capitalizeFirstLetter(category)
+        }), jsx(Icon, {
+          name: expandedCategories.has(category) ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM,
+          size: IconSize.SIZE_REGULAR
+        })]
+      })), expandedCategories.has(category) && Object.keys(paletteConfig[category]).map(key => jsxs("div", Object.assign({
+        css: styles$7.inputContainer,
+        id: "input-container"
       }, {
-        children: t("void-label:actions.viewShipment")
-      }))]
-    }) :
-    // The void request has yet to be made or was rejected
-    jsx(Button, Object.assign({
-      bold: false,
-      isFullWidth: true,
-      isLoading: isSubmitting,
-      onClick: handleSubmit
-    }, {
-      children: t("void-label:actions.confirmVoid")
-    }))
+        children: [jsx("label", Object.assign({
+          css: {
+            fontWeight: "bold"
+          },
+          htmlFor: `${category}.${key}`
+        }, {
+          children: formatKey(key)
+        })), jsxs("form", Object.assign({
+          css: styles$7.wrapper
+        }, {
+          children: [jsx("input", {
+            css: styles$7.input,
+            onChange: e => {
+              if (e.target.value.match(/^#[0-9A-Fa-f]{0,6}$/)) handleInputChange(category, key, e.target.value);
+            },
+            onKeyDown: e => {
+              if (e.key === "Enter") e.preventDefault();
+            },
+            type: "text",
+            value: paletteConfig[category][key]
+          }), jsx("input", {
+            css: styles$7.colorPicker,
+            onChange: e => handleInputChange(category, key, e.target.value),
+            type: "color",
+            value: paletteConfig[category][key]
+          })]
+        }))]
+      }), key))]
+    }), category))
   }));
 };
 
-const Message = ({
-  voidRequest
+const styles$6 = createStyles({
+  input: theme => ({
+    border: `1px solid ${theme.palette.gray.light}`,
+    borderRadius: "4px",
+    color: theme.palette.gray.main,
+    fontSize: "14px",
+    maxWidth: theme.spacing(16),
+    padding: 0
+  }),
+  keys: {
+    fontSize: "16px",
+    fontWeight: "bold",
+    marginTop: "8px"
+  },
+  section: theme => ({
+    "& > div:first-child": {
+      flexGrow: 3
+    },
+    "& > div:last-child": {
+      flexShrink: 1
+    },
+    display: "flex",
+    gap: theme.spacing(1),
+    justifyContent: "space-between"
+  }),
+  sectionContainer: theme => ({
+    marginBottom: theme.spacing(4)
+  }),
+  select: theme => ({
+    border: `1px solid ${theme.palette.gray.light}`,
+    borderRadius: "4px",
+    color: theme.palette.gray.main,
+    fontSize: "14px"
+  })
+});
+
+const TypographyEditor = ({
+  onUpdateTypographyConfig,
+  typographyConfig,
+  formatKey
 }) => {
-  const {
-    t
-  } = useTranslation(["common", "void-label"]);
-  return jsx(Section, {
-    children: voidRequest ? jsxs("section", Object.assign({
-      css: {
-        textAlign: "center",
-        width: "100%"
-      }
+  const handleInputChange = useCallback((variant, key, value) => {
+    const updatedConfig = Object.assign(Object.assign({}, typographyConfig || {}), {
+      [variant]: Object.assign(Object.assign({}, (typographyConfig === null || typographyConfig === void 0 ? void 0 : typographyConfig[variant]) || {}), {
+        [key]: value
+      })
+    });
+    onUpdateTypographyConfig(updatedConfig);
+  }, [onUpdateTypographyConfig, typographyConfig]);
+  const getNestedValue = useCallback((obj, key) => {
+    if (!obj) return undefined;
+    return obj[key];
+  }, []);
+  const renderFontWeightSelect = (variant, key) => {
+    var _a;
+    const options = [{
+      label: "Normal",
+      value: "400"
     }, {
-      children: [jsx(Icon, {
-        css: theme => ({
-          color: (voidRequest === null || voidRequest === void 0 ? void 0 : voidRequest.approved) ? theme.palette.success.main : theme.palette.error.main
-        }),
-        name: (voidRequest === null || voidRequest === void 0 ? void 0 : voidRequest.approved) ? IconNames.CHECK_FILLED : IconNames.ALERT,
-        size: IconSize.SIZE_LARGE
-      }), (voidRequest === null || voidRequest === void 0 ? void 0 : voidRequest.approved) ? jsxs(Fragment, {
-        children: [jsx(Typography, Object.assign({
-          component: "h2"
-        }, {
-          children: t("void-label:resultTitles.approved")
-        })), jsx(Typography, {
-          children: t("void-label:resultMessages.approved")
-        })]
-      }) : jsxs(Fragment, {
-        children: [jsx(Typography, Object.assign({
-          component: "h2"
-        }, {
-          children: t("void-label:resultTitles.rejected")
-        })), jsx(Typography, {
-          children: jsx("p", {
-            dangerouslySetInnerHTML: {
-              __html: t("void-label:resultMessages.rejected")
-            }
-          })
-        })]
-      })]
-    })) : jsxs(Fragment, {
-      children: [jsx(Typography, {
-        children: t("void-label:refund_process")
-      }), jsx(Typography, Object.assign({
-        component: "p"
+      label: "Semi Bold",
+      value: "600"
+    }, {
+      label: "Bold",
+      value: "700"
+    }];
+    const fontWeightValue = (_a = getNestedValue(typographyConfig, variant)) === null || _a === void 0 ? void 0 : _a.fontWeight.toString();
+    const selectOption = fontWeightValue !== undefined ? options.find(option => option.value === fontWeightValue) : undefined;
+    return jsx(Select$1, Object.assign({
+      css: styles$6.select,
+      label: "Font Weight",
+      name: "font-weight",
+      onChange: (_name, value) => handleInputChange(variant, key, value === null || value === void 0 ? void 0 : value.value),
+      value: selectOption
+    }, {
+      children: options.map(option => jsx(Option, Object.assign({
+        value: option.value
       }, {
-        children: t("void-label:refund_rules")
+        children: option.label
+      }), option.value))
+    }));
+  };
+  const renderFontSizeInput = (variant, key) => {
+    var _a;
+    const formattedFontSizeValue = (_a = getNestedValue(typographyConfig, variant)) === null || _a === void 0 ? void 0 : _a.fontSize.replace("px", "");
+    return jsx(Input, {
+      "aria-labelledby": `${variant}.${key}`,
+      css: styles$6.input,
+      label: "Font Size(px)",
+      onChange: e => {
+        if (e.target.value.match(/^\d{0,2}$/)) handleInputChange(variant, key, `${e.target.value}px`);
+      },
+      value: formattedFontSizeValue
+    });
+  };
+  const renderChildren = (variant, key) => {
+    switch (key) {
+      case "fontWeight":
+        return jsx(Fragment, {
+          children: renderFontWeightSelect(variant, key)
+        });
+      case "fontSize":
+        return jsx(Fragment, {
+          children: renderFontSizeInput(variant, key)
+        });
+      default:
+        return null;
+    }
+  };
+  return jsx("div", {
+    children: typographyConfig && Object.keys(typographyConfig).map(variant => jsxs("div", Object.assign({
+      css: styles$6.sectionContainer
+    }, {
+      children: [jsx("p", Object.assign({
+        css: styles$6.keys,
+        id: variant
+      }, {
+        children: formatKey(variant)
+      })), jsx("section", Object.assign({
+        css: styles$6.section
+      }, {
+        children: Object.keys(typographyConfig[variant]).map(key => jsx("div", Object.assign({
+          id: `${variant}.${key}`
+        }, {
+          children: renderChildren(variant, key)
+        }), key))
       }))]
-    })
+    }), variant))
   });
 };
 
-/**
- * # Void Label Component
- *
- * - The `<VoidLabel />` component is used to void a given shipping label. When a label is voided,
- * you then get the option to view the associated shipment via the `View Shipment` Element, or
- * you can purchase another label for the shipment via the `Purchase Label` Element.
- *
- * @param ComponentProps The base props that will be passed into the `<VoidLabel />` component.
- *
- * @returns Element An EmotionJSX.Element that will render the `<VoidLabel />` 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 = alchemy.createElement(Component, ErrorFallback, {
- *   css: { height: "100%", maxWidth: "800px", minWidth: "440px", width: "100%" },
- *   resources: { en },
- * });
- * ```
- *
- * <br />
- *
- * @see {@link VoidLabel.Element | The **Element** created to render `<VoidLabel />`}
- */
-const Component$2 = ({
-  features,
-  labelId,
-  onComplete,
-  onSuccess,
-  onViewShipment
-}) => {
-  var _a, _b;
-  features = Object.assign({
-    presentation: {
-      poweredByShipEngine: false
-    }
-  }, features !== null && features !== void 0 ? features : {});
-  // TODO [LMNT-910] - labelId should be a required prop
-  if (!labelId) throw new Error("void-label:errorMessages.labelIdRequired");
-  const {
-    t
-  } = useTranslation();
-  const label = useGetLabel(labelId);
-  const shipment = useGetSalesOrderShipment((_a = label.data) === null || _a === void 0 ? void 0 : _a.shipmentId);
-  const voidLabel = useVoidLabel();
-  if (label.isInitialLoading) return jsx(Loader, {
-    message: t("loading.label")
-  });
-  if (shipment.isInitialLoading) return jsx(Loader, {
-    message: t("loading.shipment")
+const styles$5 = createStyles({
+  container: theme => ({
+    color: theme.palette.gray.dark,
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    overflow: "hidden",
+    position: "relative"
+  }),
+  content: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(3),
+    padding: theme.spacing(3)
+  }),
+  copy: theme => ({
+    backgroundColor: theme.palette.white,
+    borderRadius: "4px",
+    padding: theme.spacing(0.5)
+  }),
+  drawerHeader: theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: theme.spacing(2),
+    justifyContent: "end",
+    width: "50%"
+  }),
+  drawerWrapper: {
+    display: "flex",
+    justifyContent: "space-between",
+    position: "relative"
+  },
+  header: {
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "space-between"
+  },
+  popoverWrapper: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(1)
+  }),
+  pre: theme => ({
+    backgroundColor: "#FFFFFF66",
+    borderRadius: "8px",
+    fontSize: "14px",
+    padding: theme.spacing(0.3)
+  }),
+  presetOption: theme => ({
+    "&:hover": {
+      backgroundColor: "theme.palette.gray.ultraLight"
+    },
+    backgroundColor: "transparent",
+    borderRadius: "4px",
+    fontSize: "14px",
+    padding: theme.spacing(1)
+  }),
+  presetsButton: theme => ({
+    "&:hover": {
+      backgroundColor: "#d1d4d7"
+    },
+    backgroundColor: "#E4E5E7",
+    borderRadius: "4px",
+    cursor: "pointer",
+    display: "flex",
+    fontSize: "14px",
+    gap: theme.spacing(0.5),
+    padding: `${theme.spacing(0.5)}px ${theme.spacing(1)}px`
+  })
+});
+
+const ThemeCreator = ({
+  themeConfig,
+  onUpdateThemeConfig,
+  presets,
+  showDrawer
+}) => {
+  const defaultThemeConfigRef = useRef(themeConfig);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const globalKeys = Object.keys(themeConfig);
+  // If the themeConfig has a "components" key, show only the child component keys, not "components" itself
+  const tabs = globalKeys.flatMap(key => {
+    if (key === "components" && themeConfig[key] && typeof themeConfig[key] === "object") {
+      const childComponentKeys = Object.keys(themeConfig[key]);
+      return childComponentKeys;
+    } else {
+      return [key];
+    }
   });
-  throwAny(label.error);
-  throwAny(shipment.error);
-  if (!label.data) throw new Error("errorMessages.unableToLoad.label");
-  if (!shipment.data) throw new Error("errorMessages.unableToLoad.shipment");
-  const handleVoidLabelSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
-    const result = yield voidLabel.mutateAsync(labelId);
-    if (result.approved) {
-      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(label.data, shipment.data);
+  const formattedThemeTabs = tabs.map(tab => {
+    if (tab === "palette") {
+      return "Color Palette";
     }
+    return capitalizeFirstLetter(tab);
   });
-  return jsxs(Fragment, {
-    children: [jsx(Message, {
-      voidRequest: voidLabel.data
-    }), jsx(Actions, {
-      onComplete: onComplete,
-      onSubmit: handleVoidLabelSubmit,
-      onViewShipment: onViewShipment,
-      shipment: shipment.data,
-      voidRequest: voidLabel.data
-    }), ((_b = features === null || features === void 0 ? void 0 : features.presentation) === null || _b === void 0 ? void 0 : _b.poweredByShipEngine) && jsxs(Fragment, {
-      children: [jsx(Spacer, {}), jsx(PoweredByShipEngine, {})]
-    })]
+  const [selectedTab, setSelectedTab] = useState(formattedThemeTabs.sort()[0]);
+  const handleSelectedTab = tab => {
+    setSelectedTab(tab);
+  };
+  const formatKey = key => addSpaceBetweenWords(pascalize(key));
+  const renderContentBySelectedTab = (themeConfig, selectedTab) => {
+    var _a;
+    switch (selectedTab) {
+      case "Color Palette":
+        return jsx(ColorPaletteEditor, {
+          formatKey: formatKey,
+          onUpdatePaletteConfig: updatedPalette => {
+            onUpdateThemeConfig(Object.assign(Object.assign({}, themeConfig), {
+              palette: updatedPalette
+            }));
+          },
+          paletteConfig: themeConfig.palette
+        });
+      case "Typography":
+        return jsx(TypographyEditor, {
+          formatKey: formatKey,
+          onUpdateTypographyConfig: updatedTypography => {
+            onUpdateThemeConfig(Object.assign(Object.assign({}, themeConfig), {
+              components: Object.assign(Object.assign({}, themeConfig.components), {
+                Typography: updatedTypography
+              })
+            }));
+          },
+          typographyConfig: (_a = themeConfig.components) === null || _a === void 0 ? void 0 : _a.Typography
+        });
+      default:
+        return null;
+    }
+  };
+  // const formattedThemeObj = `const theme = ${JSON.stringify(themeConfig, null, 2)}`;
+  const presetsRef = useRef(null);
+  const [showPresets, toggleShowPresets] = useToggle(false);
+  const applyPreset = theme => {
+    onUpdateThemeConfig(theme);
+  };
+  return jsxs("div", Object.assign({
+    "aria-label": "Theme Creator",
+    css: styles$5.container,
+    "data-testid": "theme-creator",
+    role: "region"
+  }, {
+    children: [jsxs("div", Object.assign({
+      css: styles$5.content
+    }, {
+      children: [jsxs("div", Object.assign({
+        css: styles$5.header
+      }, {
+        children: [jsx(Tabs, {
+          onSelectTab: handleSelectedTab,
+          selectedTab: selectedTab,
+          tabs: formattedThemeTabs
+        }), presets ? jsxs("div", {
+          children: [jsxs("button", Object.assign({
+            "aria-controls": "presets-popover",
+            "aria-expanded": showPresets,
+            css: styles$5.presetsButton,
+            onClick: e => {
+              e.preventDefault();
+              toggleShowPresets();
+            },
+            ref: presetsRef
+          }, {
+            children: ["Presets", jsx(Icon, {
+              name: IconNames.CARET_BOTTOM,
+              size: IconSize.SIZE_SMALL
+            })]
+          })), jsx(Popover, Object.assign({
+            container: document.querySelector("#theme-creator"),
+            isOpen: showPresets,
+            onClickAway: () => toggleShowPresets(),
+            placement: "bottom-end",
+            reference: presetsRef.current
+          }, {
+            children: jsxs("div", Object.assign({
+              css: styles$5.popoverWrapper
+            }, {
+              children: [jsx("button", Object.assign({
+                "aria-label": "Set Default Theme",
+                css: styles$5.presetOption,
+                onClick: e => {
+                  e.preventDefault();
+                  toggleShowPresets();
+                  applyPreset(defaultThemeConfigRef.current);
+                },
+                role: "menuitem"
+              }, {
+                children: "Default"
+              })), presets.map(preset => jsx("button", Object.assign({
+                "aria-label": `Set ${preset.presetName} Theme`,
+                css: styles$5.presetOption,
+                onClick: e => {
+                  e.preventDefault();
+                  toggleShowPresets();
+                  applyPreset(preset.themeConfig);
+                },
+                role: "menuitem"
+              }, {
+                children: preset.presetName
+              }), preset.presetName))]
+            }))
+          }))]
+        }) :
+        //reset to default button
+        jsx("button", Object.assign({
+          "aria-label": "Set Default Theme",
+          css: styles$5.presetsButton,
+          onClick: () => {
+            applyPreset(defaultThemeConfigRef.current);
+          },
+          role: "menuitem"
+        }, {
+          children: "Reset to Default"
+        }))]
+      })), jsx(Typography, Object.assign({
+        role: "heading",
+        variant: "heading4"
+      }, {
+        children: `${selectedTab} Editor`
+      })), renderContentBySelectedTab(themeConfig, selectedTab)]
+    })), showDrawer && jsx(Drawer, Object.assign({
+      "aria-label": "Show themeConfig.js Code Drawer",
+      headerContent: jsxs("div", Object.assign({
+        css: styles$5.drawerHeader
+      }, {
+        children: [jsx("pre", Object.assign({
+          css: styles$5.pre
+        }, {
+          children: "themeConfig.js"
+        })), showDrawer.copyToClipboardText && jsx("div", Object.assign({
+          css: styles$5.copy
+        }, {
+          children: jsx(CopyButton, {
+            content: showDrawer.copyToClipboardText
+          })
+        }))]
+      })),
+      isOpen: isDrawerOpen,
+      toggleDrawer: () => setIsDrawerOpen(!isDrawerOpen)
+    }, {
+      children: showDrawer.content
+    }))]
+  }));
+};
+
+const Component$5 = ({
+  onRowClick
+}) => {
+  const {
+    t
+  } = useTranslation(["common", "list-labels"]);
+  const {
+    page,
+    pageSize,
+    pagerProps
+  } = usePager();
+  const {
+    data: carriersData,
+    isLoading: carriersLoading
+  } = useListCarriers();
+  const {
+    data: labelsData,
+    isLoading,
+    isError,
+    error
+  } = useListLabels({
+    page,
+    pageSize
+  });
+  const shipmentIds = (labelsData === null || labelsData === void 0 ? void 0 : labelsData.labels) ? labelsData.labels.filter(l => l.shipmentId).map(l => l.shipmentId) : [];
+  const {
+    data: shipmentsData,
+    isLoading: shipmentsLoading
+  } = useListSalesOrderShipments({
+    shipmentIds
+  });
+  if (isLoading) return jsx(Loader, {
+    message: t("loading.labels")
+  });
+  if (isError) throw new Error(error.map(e => e.message).join(", "));
+  if (!labelsData) throw new Error(t("errorMessages.unableToLoad.labels"));
+  const columns = [{
+    headerContent: t("list-labels:headers.labelId"),
+    renderCellContent: data => {
+      return jsx("div", {
+        children: data.labelId
+      });
+    }
+  }, {
+    headerContent: t("list-labels:headers.created"),
+    renderCellContent: data => {
+      return (data === null || data === void 0 ? void 0 : data.shipDate) && jsx(CellFormattedDate, {
+        date: data.shipDate
+      });
+    }
+  }, {
+    headerContent: t("list-labels:headers.shipTo"),
+    renderCellContent: data => {
+      const labelShipment = shipmentsData === null || shipmentsData === void 0 ? void 0 : shipmentsData.find(s => s.shipmentId === data.shipmentId);
+      const displayAddress = labelShipment && labelShipment.shipTo.addressLine1 ? jsx(AddressDisplay, {
+        address: labelShipment.shipTo
+      }) : "--";
+      return jsx(SuspendText, Object.assign({
+        loading: shipmentsLoading
+      }, {
+        children: displayAddress
+      }));
+    }
+  }, {
+    headerContent: t("list-labels:headers.service"),
+    renderCellContent: data => {
+      if (!carriersLoading && carriersData) {
+        const carrier = carriersData.find(c => c.carrierCode === data.carrierCode);
+        if (carrier) {
+          const service = carrier.services.find(s => s.serviceCode === data.serviceCode);
+          if (service) {
+            return jsxs("div", {
+              children: [jsx(CarrierIcon, {
+                carrierCode: data.carrierCode
+              }, data.carrierCode), "\u00A0 ", service.name]
+            });
+          }
+        }
+      }
+      return jsxs(SuspendText, Object.assign({
+        loading: carriersLoading
+      }, {
+        children: ["`$", data.carrierCode, " - $", data.serviceCode, "`"]
+      }));
+    }
+  }, {
+    // Download
+    headerContent: jsx("div", {
+      "aria-label": t("list-labels:headers.download")
+    }),
+    renderCellContent: data => {
+      if (data.status === "completed") return jsx("div", Object.assign({
+        css: {
+          textAlign: "right"
+        }
+      }, {
+        children: jsx(ButtonIcon, {
+          ariaDescribedby: "",
+          children: t("list-labels:actions.download.pdf"),
+          icon: IconNames.DOWNLOAD,
+          onClick: e => {
+            e.stopPropagation();
+            window.open(data.labelDownload.pdf);
+          }
+        })
+      }));
+      return jsx("div", Object.assign({
+        css: {
+          textAlign: "right"
+        }
+      }, {
+        children: jsx(Tag, Object.assign({
+          color: TagColor.INFO
+        }, {
+          children: data.status.toLocaleUpperCase()
+        }))
+      }));
+    }
+  }];
+  return jsx(GridController, {
+    columns: columns,
+    data: labelsData.labels,
+    footerContent: jsx(Pager, Object.assign({}, pagerProps, {
+      pagingData: labelsData
+    })),
+    onRowClick: onRowClick
   });
 };
-/**
- * # Registered Void Label Element
- *
- * - This is the registered `<VoidLabel />` element that will be used to render the
- * `<VoidLabel.Element />` component.
- *
- * @param ElementProps The props, callbacks, and resources necessary to render
- * the `<VoidLabel.Element />` component.
- *
- * @example
- * The `<Component />` is the source JSX that is rendered when you make use of the `VoidLabel`
- * Element directly. Here is a brief example of how you would use it within your application.
- * ```tsx
- * <VoidLabel.Element
- *   labelId="se-1234567"
- *   onComplete={() => console.log('onComplete')}
- *   onSuccess={(_, { salesOrderIds: [salesOrderId] }) =>
- *     console.log('sales order ID', salesOrderId)
- *   }
- *   onViewShipment={({ shipmentId }) => {
- *     console.log('onViewShipment', shipmentId);
- *   }}
- * />
- * ```
- *
- * <br />
- *
- * @see {@link VoidLabel.ComponentProps | The **props** that can be passed into the `<VoidLabel.Element />` component}
- *
- * @see {@link PurchaseLabel.Element | Go back to the frst step in the label purchase workflow `<PurchaseLabel.Element />`}
- */
-const Element$3 = alchemy.createElement(Component$2, ErrorFallback, {
+const Element$6 = alchemy.createElement(Component$5, ErrorFallback, {
   css: {
     height: "100%",
-    maxWidth: "800px",
     minWidth: "440px",
     width: "100%"
   },
@@ -22858,686 +23162,600 @@ const Element$3 = alchemy.createElement(Component$2, ErrorFallback, {
   }
 });
 
-var voidLabel = /*#__PURE__*/Object.freeze({
+var labelsGrid = /*#__PURE__*/Object.freeze({
 	__proto__: null,
-	Component: Component$2,
-	Element: Element$3
+	Element: Element$6
 });
 
 /**
- * @internal
+ * # View Shipment Component
  *
- * # Label Workflow Component
+ * - The `<ViewShipment />` component is used to for viewing the shipment's tracking number, printing the label that
+ * was created, and the option to void the label. When a label is voided, you can see a list of the
+ * previously voided labels for a given shipment using this component.
+ *
+ * @param ComponentProps The base props that will be passed into the `<ViewShipment />` component.
+ *
+ * @returns Element An EmotionJSX.Element that will render the `<ViewShipment />` component
+ * with all the appropriate wrappers.
  *
  * @example
+ * You can see how the `<Component />` is used in the `createElement` function call below.
  * ```tsx
- *   const {
- *     labelId,
- *     multiplexedId,
- *     isVoidingLabel,
- *     shipmentId,
- *     setLabelId,
- *     setShipmentId,
- *     setIsVoidingLabel,
- *   } = useLabelWorkflow({
- *     _labelId,
- *     _multiplexedId,
- *   });
+ * export const Element = alchemy.createElement(Component, ErrorFallback, {
+ *   css: { height: "100%", maxWidth: "800px", minWidth: "440px", width: "100%" },
+ *   resources: { en },
+ * });
  * ```
  *
  * <br />
  *
- * @see {@link LabelWorkflow.Element | The `<LabelWorkflow.Element />` component using this hook}
+ * @see {@link ViewShipment.Element | The **Element** created to render `<ViewShipment />`}
  */
-const useLabelWorkflow = ({
-  _multiplexedId,
-  _labelId
+const Component$4 = ({
+  features,
+  onClickPrintLabel,
+  onClickPurchaseLabel,
+  onClickVoidLabel,
+  shipmentId
 }) => {
-  // Fix first ids as the user of the library shouldn't be changing them
-  const [multiplexedId, setMultiplexedId] = useState(_multiplexedId);
-  const [shipmentId, setShipmentId] = useState("shipmentId" in _multiplexedId ? _multiplexedId.shipmentId : undefined);
-  const [labelId, _setLabelId] = useState(_labelId);
-  const [isVoidingLabel, setIsVoidingLabel] = useState(false);
-  const setLabelId = useCallback(nextLabelId => {
-    setIsVoidingLabel(false);
-    _setLabelId(nextLabelId);
-  }, []);
-  return {
-    isVoidingLabel,
-    labelId,
-    multiplexedId,
-    setIsVoidingLabel,
-    setLabelId,
-    setMultiplexedId,
-    setShipmentId,
+  var _a, _b, _c;
+  const {
+    t
+  } = useTranslation(["common", "view-shipment"]);
+  const shipment = useGetSalesOrderShipment(shipmentId);
+  const {
+    data: {
+      labels = []
+    } = {}
+  } = useListLabels({
     shipmentId
-  };
+  });
+  const salesOrder = useGetSalesOrder((_b = (_a = shipment.data) === null || _a === void 0 ? void 0 : _a.salesOrderIds) === null || _b === void 0 ? void 0 : _b[0]);
+  const warehouses = useListWarehouses();
+  const carriers = useListCarriers();
+  if (shipment.isInitialLoading) return jsx(Loader, {
+    message: t("loading.shipment")
+  });
+  if (shipment.error) throw new Error(shipment.error.map(e => e.message).join(", "));
+  if (!shipment.data) throw new Error("errorMessages.unableToLoad.shipment");
+  const warehouse = (_c = warehouses.data) === null || _c === void 0 ? void 0 : _c.find(w => {
+    var _a;
+    return w.warehouseId === ((_a = shipment.data) === null || _a === void 0 ? void 0 : _a.warehouseId);
+  });
+  return jsx(Shipment, {
+    carriers: carriers.data,
+    features: features,
+    labels: labels,
+    onClickPrintLabel: onClickPrintLabel,
+    onClickPurchaseLabel: onClickPurchaseLabel,
+    onClickVoidLabel: onClickVoidLabel,
+    salesOrder: salesOrder.data,
+    shipment: shipment.data,
+    warehouse: warehouse
+  });
 };
 /**
- * @internal
- *
- * # Label Workflow Element
- *
- * - The `<LabelWorkflow.Element />` component is a composition of the PurchaseLabel, ViewShipment,
- * and VoidLabel elements that allows users to purchase a label, view the shipment details, and optionally void their shipping label.
+ * # Registered View Shipment Element
  *
- * @param LabelWorkflowProps The props necessary to render the `<LabelWorkflow.Element />` for shipment
- * based or sales order based label purchasing.
+ * - This is the registered `<ViewShipment />` element that will be used to render the
+ * `<ViewShipment.Element />` component.
  *
- * @returns Element A React Element that will render the `<LabelWorkflow />` component.
+ * @param ElementProps The props, callbacks, and resources necessary to render
+ * the `<ViewShipment.Element />` component.
  *
  * @example
+ * The `<Component />` is the source JSX that is rendered when you make use of the `ViewShipment`
+ * Element directly. Here is a brief example of how you would use it within your application.
  * ```tsx
- * <LabelWorkflow
- *       {...elementProps}
- *       callbacks={{ onLabelCreateSuccess }}
- *       multiplexedId={elementIdProps}
+ * <ViewShipment.Element
+ *   onClickPurchaseLabel={({ salesOrderId }) => {
+ *     console.log('sales order ID', salesOrderId);
+ *   }}
+ *   onClickVoidLabel={({ labelId }) => {
+ *     console.log('voided label', labelId);
+ *   }}
+ *   shipmentId="se-1234567"
  * />
  * ```
  *
  * <br />
  *
- * @see {@link LabelWorkflowProps | The props that are passed into the `<LabelWorkflow />` component}
- * @see {@link LabelWorkflow.useLabelWorkflow | The `hook` that is used to manage the state of the `<LabelWorkflow />` component}
- */
-const Element$2 = (
-/*
-The passed props are underscore prefixed as they will be stashed, then from them stateful versions will be made
-*/
-{
-  multiplexedId: _multiplexedId,
-  labelId: _labelId,
-  features: propFeatures,
-  callbacks
-}) => {
-  const {
-    labelId,
-    multiplexedId,
-    isVoidingLabel,
-    shipmentId,
-    setLabelId,
-    setShipmentId,
-    setIsVoidingLabel
-  } = useLabelWorkflow({
-    _labelId,
-    _multiplexedId
-  });
-  const _features = useFeatures("Globals");
-  const features = useMemo(() => {
-    var _a;
-    return Object.assign(Object.assign(Object.assign({}, propFeatures), _features), {
-      global: Object.assign(Object.assign({}, _features.global), {
-        presentation: Object.assign(Object.assign({}, (_a = _features.global) === null || _a === void 0 ? void 0 : _a.presentation), {
-          poweredByShipEngine: true
-        })
-      })
-    });
-  }, []);
-  return !labelId ? jsx(Element$5, Object.assign({}, multiplexedId, {
-    features: features,
-    onLabelCreateSuccess: (label, shipment) => {
-      var _a;
-      setLabelId(label.labelId);
-      setShipmentId(shipment.shipmentId);
-      (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onLabelCreateSuccess) === null || _a === void 0 ? void 0 : _a.call(callbacks, label, shipment);
-    },
-    onLoad: (salesOrder, shipments, pendingShipment) => {
-      if (shipments.length > 0) {
-        setShipmentId(prior => prior !== undefined ? prior : shipments[0].shipmentId);
-      }
-    }
-  })) : !isVoidingLabel ? jsx(Element$4, {
-    features: features,
-    onClickPurchaseLabel: () => {
-      setLabelId(undefined);
-    },
-    onClickVoidLabel: () => {
-      setIsVoidingLabel(true);
-    },
-    shipmentId: shipmentId
-  }) : jsx(Element$3, {
-    features: features,
-    labelId: labelId,
-    onComplete: () => {
-      setIsVoidingLabel(false);
-    },
-    onViewShipment: () => {
-      setIsVoidingLabel(false);
-    }
-  });
-};
-
-var labelWorkflow = /*#__PURE__*/Object.freeze({
-	__proto__: null,
-	useLabelWorkflow: useLabelWorkflow,
-	Element: Element$2
+ * @see {@link ViewShipment.ComponentProps | The **props** that can be passed into the `<ViewShipment.Element />` component}
+ *
+ * @see {@link VoidLabel.Element | The next step in the label purchase workflow `<VoidLabel.Element />`}
+ **/
+const Element$5 = alchemy.createElement(Component$4, ErrorFallback, {
+  css: {
+    height: "100%",
+    maxWidth: "800px",
+    minWidth: "440px",
+    width: "100%"
+  },
+  resources: {
+    en
+  }
 });
 
-const ThemeCreatorContext = /*#__PURE__*/createContext(undefined);
-const ThemeCreatorProvider = ({
-  children,
-  editableTheme
-}) => {
-  const [themeConfig, setThemeConfig] = useState(editableTheme);
-  return jsx(ThemeCreatorContext.Provider, Object.assign({
-    value: {
-      setThemeConfig,
-      themeConfig
-    }
-  }, {
-    children: children
-  }));
-};
-const useThemeCreator = () => {
-  const themeCreatorContext = useContext(ThemeCreatorContext);
-  if (!themeCreatorContext) throw new Error("useThemeConfigurator must be used within a ThemeConfiguratorProvider");
-  return themeCreatorContext;
-};
-
-const styles$7 = createStyles({
-  category: {
-    alignItems: "center",
-    cursor: "pointer",
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between"
-  },
-  colorPicker: theme => ({
-    "&::-webkit-color-swatch": {
-      border: `1px solid ${theme.palette.gray.light}`,
-      borderRadius: "4px",
-      padding: 0
-    },
-    "&::-webkit-color-swatch-wrapper": {
-      padding: 0
-    },
-    alignSelf: "center",
-    appearance: "none",
-    background: "none",
-    border: 0,
-    cursor: "pointer",
-    height: theme.spacing(4.25),
-    outline: "none",
-    width: theme.spacing(4.25)
-  }),
-  container: theme => ({
-    marginBottom: theme.spacing(2)
-  }),
-  input: theme => ({
-    border: `1px solid ${theme.palette.gray.light}`,
-    borderRadius: "4px",
-    color: theme.palette.gray.main,
-    fontSize: "14px",
-    padding: theme.spacing(1)
-  }),
-  inputContainer: theme => ({
-    alignItems: "center",
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    padding: `${theme.spacing(2)}px 0`
-  }),
-  wrapper: theme => ({
-    display: "flex",
-    gap: theme.spacing(1)
-  })
+var viewShipment = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	Component: Component$4,
+	Element: Element$5
 });
 
-const ColorPaletteEditor = ({
-  paletteConfig,
-  onUpdatePaletteConfig,
-  formatKey
+const Actions = ({
+  onComplete,
+  onSubmit,
+  onViewShipment,
+  shipment,
+  voidRequest
 }) => {
-  const [expandedCategories, setExpandedCategories] = useState(new Set());
-  const toggleExpandedCategories = category => {
-    setExpandedCategories(prev => {
-      const openCategories = new Set(prev);
-      if (openCategories.has(category)) {
-        return new Set([...openCategories].filter(item => item !== category));
-      } else {
-        return new Set([...openCategories, category]);
-      }
-    });
-  };
-  const handleInputChange = useCallback((category, key, value) => {
-    const updatedConfig = Object.assign(Object.assign({}, paletteConfig || {}), {
-      [category]: Object.assign(Object.assign({}, (paletteConfig === null || paletteConfig === void 0 ? void 0 : paletteConfig[category]) || {}), {
-        [key]: value
-      })
-    });
-    onUpdatePaletteConfig(updatedConfig);
-  }, [onUpdatePaletteConfig, paletteConfig]);
-  return jsx("div", Object.assign({
-    "data-test-id": "color-palette-editor"
+  const {
+    t
+  } = useTranslation(["common", "void-label"]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const handleSubmit = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    setIsSubmitting(true);
+    yield onSubmit();
+    setIsSubmitting(false);
+  }), [onSubmit]);
+  return jsx(BottomSheet, Object.assign({
+    alwaysVisible: true,
+    css: theme => ({
+      borderTop: `1px solid ${theme.palette.gray.ultraLight}`,
+      boxShadow: "none",
+      position: "static"
+    })
   }, {
-    children: paletteConfig && Object.keys(paletteConfig).map(category => jsxs("div", Object.assign({
-      css: styles$7.container,
-      id: category
-    }, {
-      children: [jsxs("div", Object.assign({
-        "aria-expanded": expandedCategories.has(category),
-        css: styles$7.category,
-        onClick: event => {
-          event.preventDefault();
-          toggleExpandedCategories(category);
-        },
-        role: "button"
+    children: (voidRequest === null || voidRequest === void 0 ? void 0 : voidRequest.approved) ?
+    // The void request has been approved
+    jsxs(ButtonGroup, {
+      children: [jsx(Button, Object.assign({
+        bold: false,
+        onClick: () => onComplete(voidRequest, shipment),
+        variant: ButtonVariant.OUTLINED
       }, {
-        children: [jsx("p", {
-          children: capitalizeFirstLetter(category)
-        }), jsx(Icon, {
-          name: expandedCategories.has(category) ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM,
-          size: IconSize.SIZE_REGULAR
-        })]
-      })), expandedCategories.has(category) && Object.keys(paletteConfig[category]).map(key => jsxs("div", Object.assign({
-        css: styles$7.inputContainer,
-        id: "input-container"
+        children: t("void-label:actions.complete")
+      })), jsx(Button, Object.assign({
+        bold: false,
+        isFullWidth: true,
+        onClick: () => onViewShipment(shipment)
       }, {
-        children: [jsx("label", Object.assign({
-          css: {
-            fontWeight: "bold"
-          },
-          htmlFor: `${category}.${key}`
+        children: t("void-label:actions.viewShipment")
+      }))]
+    }) :
+    // The void request has yet to be made or was rejected
+    jsx(Button, Object.assign({
+      bold: false,
+      isFullWidth: true,
+      isLoading: isSubmitting,
+      onClick: handleSubmit
+    }, {
+      children: t("void-label:actions.confirmVoid")
+    }))
+  }));
+};
+
+const Message = ({
+  voidRequest
+}) => {
+  const {
+    t
+  } = useTranslation(["common", "void-label"]);
+  return jsx(Section, {
+    children: voidRequest ? jsxs("section", Object.assign({
+      css: {
+        textAlign: "center",
+        width: "100%"
+      }
+    }, {
+      children: [jsx(Icon, {
+        css: theme => ({
+          color: (voidRequest === null || voidRequest === void 0 ? void 0 : voidRequest.approved) ? theme.palette.success.main : theme.palette.error.main
+        }),
+        name: (voidRequest === null || voidRequest === void 0 ? void 0 : voidRequest.approved) ? IconNames.CHECK_FILLED : IconNames.ALERT,
+        size: IconSize.SIZE_LARGE
+      }), (voidRequest === null || voidRequest === void 0 ? void 0 : voidRequest.approved) ? jsxs(Fragment, {
+        children: [jsx(Typography, Object.assign({
+          component: "h2"
         }, {
-          children: formatKey(key)
-        })), jsxs("form", Object.assign({
-          css: styles$7.wrapper
+          children: t("void-label:resultTitles.approved")
+        })), jsx(Typography, {
+          children: t("void-label:resultMessages.approved")
+        })]
+      }) : jsxs(Fragment, {
+        children: [jsx(Typography, Object.assign({
+          component: "h2"
         }, {
-          children: [jsx("input", {
-            css: styles$7.input,
-            onChange: e => {
-              if (e.target.value.match(/^#[0-9A-Fa-f]{0,6}$/)) handleInputChange(category, key, e.target.value);
-            },
-            onKeyDown: e => {
-              if (e.key === "Enter") e.preventDefault();
-            },
-            type: "text",
-            value: paletteConfig[category][key]
-          }), jsx("input", {
-            css: styles$7.colorPicker,
-            onChange: e => handleInputChange(category, key, e.target.value),
-            type: "color",
-            value: paletteConfig[category][key]
-          })]
-        }))]
-      }), key))]
-    }), category))
-  }));
+          children: t("void-label:resultTitles.rejected")
+        })), jsx(Typography, {
+          children: jsx("p", {
+            dangerouslySetInnerHTML: {
+              __html: t("void-label:resultMessages.rejected")
+            }
+          })
+        })]
+      })]
+    })) : jsxs(Fragment, {
+      children: [jsx(Typography, {
+        children: t("void-label:refund_process")
+      }), jsx(Typography, Object.assign({
+        component: "p"
+      }, {
+        children: t("void-label:refund_rules")
+      }))]
+    })
+  });
 };
 
-const styles$6 = createStyles({
-  input: theme => ({
-    border: `1px solid ${theme.palette.gray.light}`,
-    borderRadius: "4px",
-    color: theme.palette.gray.main,
-    fontSize: "14px",
-    maxWidth: theme.spacing(16),
-    padding: 0
-  }),
-  keys: {
-    fontSize: "16px",
-    fontWeight: "bold",
-    marginTop: "8px"
+/**
+ * # Void Label Component
+ *
+ * - The `<VoidLabel />` component is used to void a given shipping label. When a label is voided,
+ * you then get the option to view the associated shipment via the `View Shipment` Element, or
+ * you can purchase another label for the shipment via the `Purchase Label` Element.
+ *
+ * @param ComponentProps The base props that will be passed into the `<VoidLabel />` component.
+ *
+ * @returns Element An EmotionJSX.Element that will render the `<VoidLabel />` 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 = alchemy.createElement(Component, ErrorFallback, {
+ *   css: { height: "100%", maxWidth: "800px", minWidth: "440px", width: "100%" },
+ *   resources: { en },
+ * });
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link VoidLabel.Element | The **Element** created to render `<VoidLabel />`}
+ */
+const Component$3 = ({
+  features,
+  labelId,
+  onComplete,
+  onSuccess,
+  onViewShipment
+}) => {
+  var _a, _b;
+  features = Object.assign({
+    presentation: {
+      poweredByShipEngine: false
+    }
+  }, features !== null && features !== void 0 ? features : {});
+  // TODO [LMNT-910] - labelId should be a required prop
+  if (!labelId) throw new Error("void-label:errorMessages.labelIdRequired");
+  const {
+    t
+  } = useTranslation();
+  const label = useGetLabel(labelId);
+  const shipment = useGetSalesOrderShipment((_a = label.data) === null || _a === void 0 ? void 0 : _a.shipmentId);
+  const voidLabel = useVoidLabel();
+  if (label.isInitialLoading) return jsx(Loader, {
+    message: t("loading.label")
+  });
+  if (shipment.isInitialLoading) return jsx(Loader, {
+    message: t("loading.shipment")
+  });
+  throwAny(label.error);
+  throwAny(shipment.error);
+  if (!label.data) throw new Error("errorMessages.unableToLoad.label");
+  if (!shipment.data) throw new Error("errorMessages.unableToLoad.shipment");
+  const handleVoidLabelSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
+    const result = yield voidLabel.mutateAsync(labelId);
+    if (result.approved) {
+      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(label.data, shipment.data);
+    }
+  });
+  return jsxs(Fragment, {
+    children: [jsx(Message, {
+      voidRequest: voidLabel.data
+    }), jsx(Actions, {
+      onComplete: onComplete,
+      onSubmit: handleVoidLabelSubmit,
+      onViewShipment: onViewShipment,
+      shipment: shipment.data,
+      voidRequest: voidLabel.data
+    }), ((_b = features === null || features === void 0 ? void 0 : features.presentation) === null || _b === void 0 ? void 0 : _b.poweredByShipEngine) && jsxs(Fragment, {
+      children: [jsx(Spacer, {}), jsx(PoweredByShipEngine, {})]
+    })]
+  });
+};
+/**
+ * # Registered Void Label Element
+ *
+ * - This is the registered `<VoidLabel />` element that will be used to render the
+ * `<VoidLabel.Element />` component.
+ *
+ * @param ElementProps The props, callbacks, and resources necessary to render
+ * the `<VoidLabel.Element />` component.
+ *
+ * @example
+ * The `<Component />` is the source JSX that is rendered when you make use of the `VoidLabel`
+ * Element directly. Here is a brief example of how you would use it within your application.
+ * ```tsx
+ * <VoidLabel.Element
+ *   labelId="se-1234567"
+ *   onComplete={() => console.log('onComplete')}
+ *   onSuccess={(_, { salesOrderIds: [salesOrderId] }) =>
+ *     console.log('sales order ID', salesOrderId)
+ *   }
+ *   onViewShipment={({ shipmentId }) => {
+ *     console.log('onViewShipment', shipmentId);
+ *   }}
+ * />
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link VoidLabel.ComponentProps | The **props** that can be passed into the `<VoidLabel.Element />` component}
+ *
+ * @see {@link PurchaseLabel.Element | Go back to the frst step in the label purchase workflow `<PurchaseLabel.Element />`}
+ */
+const Element$4 = alchemy.createElement(Component$3, ErrorFallback, {
+  css: {
+    height: "100%",
+    maxWidth: "800px",
+    minWidth: "440px",
+    width: "100%"
   },
-  section: theme => ({
-    "& > div:first-child": {
-      flexGrow: 3
-    },
-    "& > div:last-child": {
-      flexShrink: 1
-    },
-    display: "flex",
-    gap: theme.spacing(1),
-    justifyContent: "space-between"
-  }),
-  sectionContainer: theme => ({
-    marginBottom: theme.spacing(4)
-  }),
-  select: theme => ({
-    border: `1px solid ${theme.palette.gray.light}`,
-    borderRadius: "4px",
-    color: theme.palette.gray.main,
-    fontSize: "14px"
-  })
+  resources: {
+    en
+  }
 });
 
-const TypographyEditor = ({
-  onUpdateTypographyConfig,
-  typographyConfig,
-  formatKey
+var voidLabel = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	Component: Component$3,
+	Element: Element$4
+});
+
+/**
+ * @internal
+ *
+ * # Label Workflow Component
+ *
+ * @example
+ * ```tsx
+ *   const {
+ *     labelId,
+ *     multiplexedId,
+ *     isVoidingLabel,
+ *     shipmentId,
+ *     setLabelId,
+ *     setShipmentId,
+ *     setIsVoidingLabel,
+ *   } = useLabelWorkflow({
+ *     _labelId,
+ *     _multiplexedId,
+ *   });
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link LabelWorkflow.Element | The `<LabelWorkflow.Element />` component using this hook}
+ */
+const useLabelWorkflow = ({
+  _multiplexedId,
+  _labelId
 }) => {
-  const handleInputChange = useCallback((variant, key, value) => {
-    const updatedConfig = Object.assign(Object.assign({}, typographyConfig || {}), {
-      [variant]: Object.assign(Object.assign({}, (typographyConfig === null || typographyConfig === void 0 ? void 0 : typographyConfig[variant]) || {}), {
-        [key]: value
-      })
-    });
-    onUpdateTypographyConfig(updatedConfig);
-  }, [onUpdateTypographyConfig, typographyConfig]);
-  const getNestedValue = useCallback((obj, key) => {
-    if (!obj) return undefined;
-    return obj[key];
+  // Fix first ids as the user of the library shouldn't be changing them
+  const [multiplexedId, setMultiplexedId] = useState(_multiplexedId);
+  const [shipmentId, setShipmentId] = useState("shipmentId" in _multiplexedId ? _multiplexedId.shipmentId : undefined);
+  const [labelId, _setLabelId] = useState(_labelId);
+  const [isVoidingLabel, setIsVoidingLabel] = useState(false);
+  const setLabelId = useCallback(nextLabelId => {
+    setIsVoidingLabel(false);
+    _setLabelId(nextLabelId);
   }, []);
-  const renderFontWeightSelect = (variant, key) => {
-    var _a;
-    const options = [{
-      label: "Normal",
-      value: "400"
-    }, {
-      label: "Semi Bold",
-      value: "600"
-    }, {
-      label: "Bold",
-      value: "700"
-    }];
-    const fontWeightValue = (_a = getNestedValue(typographyConfig, variant)) === null || _a === void 0 ? void 0 : _a.fontWeight.toString();
-    const selectOption = fontWeightValue !== undefined ? options.find(option => option.value === fontWeightValue) : undefined;
-    return jsx(Select$1, Object.assign({
-      css: styles$6.select,
-      label: "Font Weight",
-      name: "font-weight",
-      onChange: (_name, value) => handleInputChange(variant, key, value === null || value === void 0 ? void 0 : value.value),
-      value: selectOption
-    }, {
-      children: options.map(option => jsx(Option, Object.assign({
-        value: option.value
-      }, {
-        children: option.label
-      }), option.value))
-    }));
+  return {
+    isVoidingLabel,
+    labelId,
+    multiplexedId,
+    setIsVoidingLabel,
+    setLabelId,
+    setMultiplexedId,
+    setShipmentId,
+    shipmentId
   };
-  const renderFontSizeInput = (variant, key) => {
+};
+/**
+ * @internal
+ *
+ * # Label Workflow Element
+ *
+ * - The `<LabelWorkflow.Element />` component is a composition of the PurchaseLabel, ViewShipment,
+ * and VoidLabel elements that allows users to purchase a label, view the shipment details, and optionally void their shipping label.
+ *
+ * @param LabelWorkflowProps The props necessary to render the `<LabelWorkflow.Element />` for shipment
+ * based or sales order based label purchasing.
+ *
+ * @returns Element A React Element that will render the `<LabelWorkflow />` component.
+ *
+ * @example
+ * ```tsx
+ * <LabelWorkflow
+ *       {...elementProps}
+ *       callbacks={{ onLabelCreateSuccess }}
+ *       multiplexedId={elementIdProps}
+ * />
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link LabelWorkflowProps | The props that are passed into the `<LabelWorkflow />` component}
+ * @see {@link LabelWorkflow.useLabelWorkflow | The `hook` that is used to manage the state of the `<LabelWorkflow />` component}
+ */
+const Element$3 = (
+/*
+The passed props are underscore prefixed as they will be stashed, then from them stateful versions will be made
+*/
+{
+  multiplexedId: _multiplexedId,
+  labelId: _labelId,
+  features: propFeatures,
+  callbacks
+}) => {
+  const {
+    labelId,
+    multiplexedId,
+    isVoidingLabel,
+    shipmentId,
+    setLabelId,
+    setShipmentId,
+    setIsVoidingLabel
+  } = useLabelWorkflow({
+    _labelId,
+    _multiplexedId
+  });
+  const _features = useFeatures("Globals");
+  const features = useMemo(() => {
     var _a;
-    const formattedFontSizeValue = (_a = getNestedValue(typographyConfig, variant)) === null || _a === void 0 ? void 0 : _a.fontSize.replace("px", "");
-    return jsx(Input, {
-      "aria-labelledby": `${variant}.${key}`,
-      css: styles$6.input,
-      label: "Font Size(px)",
-      onChange: e => {
-        if (e.target.value.match(/^\d{0,2}$/)) handleInputChange(variant, key, `${e.target.value}px`);
-      },
-      value: formattedFontSizeValue
+    return Object.assign(Object.assign(Object.assign({}, propFeatures), _features), {
+      global: Object.assign(Object.assign({}, _features.global), {
+        presentation: Object.assign(Object.assign({}, (_a = _features.global) === null || _a === void 0 ? void 0 : _a.presentation), {
+          poweredByShipEngine: true
+        })
+      })
     });
-  };
-  const renderChildren = (variant, key) => {
-    switch (key) {
-      case "fontWeight":
-        return jsx(Fragment, {
-          children: renderFontWeightSelect(variant, key)
-        });
-      case "fontSize":
-        return jsx(Fragment, {
-          children: renderFontSizeInput(variant, key)
-        });
-      default:
-        return null;
-    }
-  };
-  return jsx("div", {
-    children: typographyConfig && Object.keys(typographyConfig).map(variant => jsxs("div", Object.assign({
-      css: styles$6.sectionContainer
-    }, {
-      children: [jsx("p", Object.assign({
-        css: styles$6.keys,
-        id: variant
-      }, {
-        children: formatKey(variant)
-      })), jsx("section", Object.assign({
-        css: styles$6.section
-      }, {
-        children: Object.keys(typographyConfig[variant]).map(key => jsx("div", Object.assign({
-          id: `${variant}.${key}`
-        }, {
-          children: renderChildren(variant, key)
-        }), key))
-      }))]
-    }), variant))
-  });
-};
-
-const styles$5 = createStyles({
-  container: theme => ({
-    color: theme.palette.gray.dark,
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-    overflow: "hidden",
-    position: "relative"
-  }),
-  content: theme => ({
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.spacing(3),
-    padding: theme.spacing(3)
-  }),
-  copy: theme => ({
-    backgroundColor: theme.palette.white,
-    borderRadius: "4px",
-    padding: theme.spacing(0.5)
-  }),
-  drawerHeader: theme => ({
-    alignItems: "center",
-    display: "flex",
-    gap: theme.spacing(2),
-    justifyContent: "end",
-    width: "50%"
-  }),
-  drawerWrapper: {
-    display: "flex",
-    justifyContent: "space-between",
-    position: "relative"
-  },
-  header: {
-    alignItems: "center",
-    display: "flex",
-    justifyContent: "space-between"
-  },
-  popoverWrapper: theme => ({
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.spacing(1)
-  }),
-  pre: theme => ({
-    backgroundColor: "#FFFFFF66",
-    borderRadius: "8px",
-    fontSize: "14px",
-    padding: theme.spacing(0.3)
-  }),
-  presetOption: theme => ({
-    "&:hover": {
-      backgroundColor: "theme.palette.gray.ultraLight"
+  }, []);
+  return !labelId ? jsx(Element$7, Object.assign({}, multiplexedId, {
+    features: features,
+    onLabelCreateSuccess: (label, shipment) => {
+      var _a;
+      setLabelId(label.labelId);
+      setShipmentId(shipment.shipmentId);
+      (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onLabelCreateSuccess) === null || _a === void 0 ? void 0 : _a.call(callbacks, label, shipment);
     },
-    backgroundColor: "transparent",
-    borderRadius: "4px",
-    fontSize: "14px",
-    padding: theme.spacing(1)
-  }),
-  presetsButton: theme => ({
-    "&:hover": {
-      backgroundColor: "#d1d4d7"
+    onLoad: (salesOrder, shipments, pendingShipment) => {
+      if (shipments.length > 0) {
+        setShipmentId(prior => prior !== undefined ? prior : shipments[0].shipmentId);
+      }
+    }
+  })) : !isVoidingLabel ? jsx(Element$5, {
+    features: features,
+    onClickPurchaseLabel: () => {
+      setLabelId(undefined);
     },
-    backgroundColor: "#E4E5E7",
-    borderRadius: "4px",
-    cursor: "pointer",
-    display: "flex",
-    fontSize: "14px",
-    gap: theme.spacing(0.5),
-    padding: `${theme.spacing(0.5)}px ${theme.spacing(1)}px`
-  })
+    onClickVoidLabel: () => {
+      setIsVoidingLabel(true);
+    },
+    shipmentId: shipmentId
+  }) : jsx(Element$4, {
+    features: features,
+    labelId: labelId,
+    onComplete: () => {
+      setIsVoidingLabel(false);
+    },
+    onViewShipment: () => {
+      setIsVoidingLabel(false);
+    }
+  });
+};
+
+var labelWorkflow = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	useLabelWorkflow: useLabelWorkflow,
+	Element: Element$3
 });
 
-const ThemeCreator = ({
-  themeConfig,
-  onUpdateThemeConfig,
-  presets,
-  showDrawer
+const Component$2 = ({
+  onRowClick,
+  shipmentStatus: _shipmentStatus = "pending"
 }) => {
-  const defaultThemeConfigRef = useRef(themeConfig);
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const globalKeys = Object.keys(themeConfig);
-  // If the themeConfig has a "components" key, show only the child component keys, not "components" itself
-  const tabs = globalKeys.flatMap(key => {
-    if (key === "components" && themeConfig[key] && typeof themeConfig[key] === "object") {
-      const childComponentKeys = Object.keys(themeConfig[key]);
-      return childComponentKeys;
-    } else {
-      return [key];
-    }
+  const {
+    t
+  } = useTranslation(["common", "list-shipments"]);
+  const {
+    page,
+    pageSize,
+    pagerProps
+  } = usePager();
+  const {
+    data,
+    isLoading,
+    isError,
+    error
+  } = useListShipments({
+    page,
+    pageSize,
+    shipmentStatus: _shipmentStatus
   });
-  const formattedThemeTabs = tabs.map(tab => {
-    if (tab === "palette") {
-      return "Color Palette";
+  if (isLoading) return jsx(Loader, {
+    message: t("loading.shipments")
+  });
+  if (isError) throw new Error(error.map(e => e.message).join(", "));
+  if (!data) throw new Error(t("errorMessages.unableToLoad.shipments"));
+  const columns = [{
+    headerContent: t("list-shipments:headers.shipmentId"),
+    renderCellContent: shipment => {
+      return jsx("div", {
+        children: shipment.shipmentId
+      });
     }
-    return capitalizeFirstLetter(tab);
+  }, {
+    headerContent: t("list-shipments:headers.shipTo"),
+    renderCellContent: shipment => {
+      return shipment.shipTo.addressLine1 ? jsx(AddressDisplay, {
+        address: shipment.shipTo
+      }) : "--";
+    }
+  }, {
+    headerContent: t("list-shipments:headers.shipDate"),
+    renderCellContent: shipment => {
+      return shipment.shipDate ? jsx(CellFormattedDate, {
+        date: shipment.shipDate
+      }) : "--";
+    }
+  }];
+  return jsx(GridController, {
+    columns: columns,
+    data: data.shipments,
+    footerContent: jsx(Pager, Object.assign({}, pagerProps, {
+      pagingData: data
+    })),
+    onRowClick: onRowClick
   });
-  const [selectedTab, setSelectedTab] = useState(formattedThemeTabs.sort()[0]);
-  const handleSelectedTab = tab => {
-    setSelectedTab(tab);
-  };
-  const formatKey = key => addSpaceBetweenWords(pascalize(key));
-  const renderContentBySelectedTab = (themeConfig, selectedTab) => {
-    var _a;
-    switch (selectedTab) {
-      case "Color Palette":
-        return jsx(ColorPaletteEditor, {
-          formatKey: formatKey,
-          onUpdatePaletteConfig: updatedPalette => {
-            onUpdateThemeConfig(Object.assign(Object.assign({}, themeConfig), {
-              palette: updatedPalette
-            }));
-          },
-          paletteConfig: themeConfig.palette
-        });
-      case "Typography":
-        return jsx(TypographyEditor, {
-          formatKey: formatKey,
-          onUpdateTypographyConfig: updatedTypography => {
-            onUpdateThemeConfig(Object.assign(Object.assign({}, themeConfig), {
-              components: Object.assign(Object.assign({}, themeConfig.components), {
-                Typography: updatedTypography
-              })
-            }));
-          },
-          typographyConfig: (_a = themeConfig.components) === null || _a === void 0 ? void 0 : _a.Typography
-        });
-      default:
-        return null;
+};
+const Element$2 = alchemy.createElement(Component$2, ErrorFallback, {
+  css: {
+    height: "100%",
+    minWidth: "440px",
+    width: "100%"
+  },
+  resources: {
+    en
+  }
+});
+
+var shipmentsGrid = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	Element: Element$2
+});
+
+const ThemeCreatorContext = /*#__PURE__*/createContext(undefined);
+const ThemeCreatorProvider = ({
+  children,
+  editableTheme
+}) => {
+  const [themeConfig, setThemeConfig] = useState(editableTheme);
+  return jsx(ThemeCreatorContext.Provider, Object.assign({
+    value: {
+      setThemeConfig,
+      themeConfig
     }
-  };
-  // const formattedThemeObj = `const theme = ${JSON.stringify(themeConfig, null, 2)}`;
-  const presetsRef = useRef(null);
-  const [showPresets, toggleShowPresets] = useToggle(false);
-  const applyPreset = theme => {
-    onUpdateThemeConfig(theme);
-  };
-  return jsxs("div", Object.assign({
-    "aria-label": "Theme Creator",
-    css: styles$5.container,
-    "data-testid": "theme-creator",
-    role: "region"
   }, {
-    children: [jsxs("div", Object.assign({
-      css: styles$5.content
-    }, {
-      children: [jsxs("div", Object.assign({
-        css: styles$5.header
-      }, {
-        children: [jsx(Tabs, {
-          onSelectTab: handleSelectedTab,
-          selectedTab: selectedTab,
-          tabs: formattedThemeTabs
-        }), presets ? jsxs("div", {
-          children: [jsxs("button", Object.assign({
-            "aria-controls": "presets-popover",
-            "aria-expanded": showPresets,
-            css: styles$5.presetsButton,
-            onClick: e => {
-              e.preventDefault();
-              toggleShowPresets();
-            },
-            ref: presetsRef
-          }, {
-            children: ["Presets", jsx(Icon, {
-              name: IconNames.CARET_BOTTOM,
-              size: IconSize.SIZE_SMALL
-            })]
-          })), jsx(Popover, Object.assign({
-            container: document.querySelector("#theme-creator"),
-            isOpen: showPresets,
-            onClickAway: () => toggleShowPresets(),
-            placement: "bottom-end",
-            reference: presetsRef.current
-          }, {
-            children: jsxs("div", Object.assign({
-              css: styles$5.popoverWrapper
-            }, {
-              children: [jsx("button", Object.assign({
-                "aria-label": "Set Default Theme",
-                css: styles$5.presetOption,
-                onClick: e => {
-                  e.preventDefault();
-                  toggleShowPresets();
-                  applyPreset(defaultThemeConfigRef.current);
-                },
-                role: "menuitem"
-              }, {
-                children: "Default"
-              })), presets.map(preset => jsx("button", Object.assign({
-                "aria-label": `Set ${preset.presetName} Theme`,
-                css: styles$5.presetOption,
-                onClick: e => {
-                  e.preventDefault();
-                  toggleShowPresets();
-                  applyPreset(preset.themeConfig);
-                },
-                role: "menuitem"
-              }, {
-                children: preset.presetName
-              }), preset.presetName))]
-            }))
-          }))]
-        }) :
-        //reset to default button
-        jsx("button", Object.assign({
-          "aria-label": "Set Default Theme",
-          css: styles$5.presetsButton,
-          onClick: () => {
-            applyPreset(defaultThemeConfigRef.current);
-          },
-          role: "menuitem"
-        }, {
-          children: "Reset to Default"
-        }))]
-      })), jsx(Typography, Object.assign({
-        role: "heading",
-        variant: "heading4"
-      }, {
-        children: `${selectedTab} Editor`
-      })), renderContentBySelectedTab(themeConfig, selectedTab)]
-    })), showDrawer && jsx(Drawer, Object.assign({
-      "aria-label": "Show themeConfig.js Code Drawer",
-      headerContent: jsxs("div", Object.assign({
-        css: styles$5.drawerHeader
-      }, {
-        children: [jsx("pre", Object.assign({
-          css: styles$5.pre
-        }, {
-          children: "themeConfig.js"
-        })), showDrawer.copyToClipboardText && jsx("div", Object.assign({
-          css: styles$5.copy
-        }, {
-          children: jsx(CopyButton, {
-            content: showDrawer.copyToClipboardText
-          })
-        }))]
-      })),
-      isOpen: isDrawerOpen,
-      toggleDrawer: () => setIsDrawerOpen(!isDrawerOpen)
-    }, {
-      children: showDrawer.content
-    }))]
+    children: children
   }));
 };
+const useThemeCreator = () => {
+  const themeCreatorContext = useContext(ThemeCreatorContext);
+  if (!themeCreatorContext) throw new Error("useThemeConfigurator must be used within a ThemeConfiguratorProvider");
+  return themeCreatorContext;
+};
 
 const Component$1 = _a => {
   var props = __rest(_a, []);
@@ -24530,4 +24748,4 @@ var onboarding = /*#__PURE__*/Object.freeze({
 	Element: Element
 });
 
-export { accountSettings as AccountSettings, AddFundsForm, AutoFundingForm, ButtonGroup, CarrierBalance, CarrierConnectionCard, CarrierIcon, CarrierLogo, CellFormattedDate, CollapsiblePanel, CopyButton, Country, Cube, DateRangeCombo, DateRangeSelect, DisplayTerm, Drawer, ErrorFallback, externalCarriers as ExternalCarriers, fields as Field, FieldLabel, FormPortal, FundAndPurchase, GridController, InlineLabel, ItemsBreakdown, labelWorkflow as LabelWorkflow, LinkAction, listCarriers as ListCarriers, Loader, ManageFunding, manageWarehouses as ManageWarehouses, onboarding as Onboarding, PageLayoutProvider, Pager, PaymentMethodSettings, Portal, PoweredByShipEngine, PudoType, purchaseLabel as PurchaseLabel, RootPortalProvider, Section, SkeletonCarrierRow, Spacer, Spread, StoryNotes, SuspendText, Tabs, themeCreator as ThemeCreator, ThemeCreatorProvider, UsState, UsaCity, viewShipment as ViewShipment, voidLabel as VoidLabel, addEmailToValidation, addSpaceBetweenWords, assert, autoFundingSchema, calculateTotal, capitalizeFirstLetter, convertDecimalWeightToFractionalWeight, convertDimensions, convertFractionalWeightToDecimalWeight, convertPoundsAndOuncesToOunces, convertWeight, countries, countryCodes, createCodedErrors, createDictionary, createStyles, currencySymbol, daysAfter, errorMap, euCountryCodes, extendZod, featureFlagComponentNameLookup, featureFlags, findDateLocale, formLogger, formatByDateAndLocale, formatCreditCardNumber, formatDate, formatDateDDMMYY, formatDateDDMMYYYY, formatDimensions, formatExpiration, formatFractionalWeight, formatMoney, getAddFundsSchema, getCancelledShipment, getCarrierIdByCarrierCode, getCurrencyFromString, getCurrencySymbolFromString, getCustomsFromSalesOrder, getExpirationYears, getFeatures, getIsCustomsRequiredForSalesOrder, getIsCustomsRequiredForShipment, getIsInternationalShipment, getPendingShipment, getRateRequiresAcknowledgement, getRelativeDates, getRequestedServices, getSalesOrderItemsFromSalesOrderOrShipment, getShipmentByStatus, getTotalRateAmount, getlocaleDateStringFormat, isCollectionService, isDecimalWeight, isDomesticAddress, isEmptyAddress, isFlatRatePackageCode, isMetricWeightUnit, isMilitaryAddress, isNowOrInTheFuture, isPoBox, isPoBoxAddress, isPudoEligibleRate, isString, isUnitedStatesTerritory, isUnsupportedByUps, isUpsCarrier, isUspsCarrier, moneySchema, mostRecent, nextDayCutoff, omitTime, overrideCarrierCodes$1 as overrideCarrierCodes, parseLocaleDate, pascalize, phoneSchema, phoneSchemaUnvalidated, postalCodeRegex$3 as postalCodeRegex, raise, sortByCreationDate, throwAny, throwJoinedMessages, usCities, usStateCodes, usStates, useAddressValidation, useBlackboxDetection, useCarrierMetadata, useConfirmationOptions, useCountryCodeOptions, useCustomsContentsOptions, useCustomsNonDeliveryOptions, useDateRangeOptions, useExpirationMonthOptions, useFeatures, useInsuranceProviderOptions, useNestedForm, usePackageOptions, usePageLayout, usePager, useRateOptions, useRootPortal, useRunOnceOnTrue, useScrubErrors, useServiceCodeOptions, useServicePoints, useShipmentMetadata, useShippingPresetsOptions, useStateCodeOptions, useThemeCreator, useToggle, useWarehouseOptions, validationResolver };
+export { accountSettings as AccountSettings, AddFundsForm, AutoFundingForm, ButtonGroup, CarrierBalance, CarrierConnectionCard, CarrierIcon, CarrierLogo, CellFormattedDate, CollapsiblePanel, CopyButton, Country, Cube, DateRangeCombo, DateRangeSelect, DisplayTerm, Drawer, ErrorFallback, externalCarriers as ExternalCarriers, fields as Field, FieldLabel, FormPortal, FundAndPurchase, GridController, InlineLabel, ItemsBreakdown, labelWorkflow as LabelWorkflow, labelsGrid as LabelsGrid, LinkAction, listCarriers as ListCarriers, Loader, ManageFunding, manageWarehouses as ManageWarehouses, onboarding as Onboarding, PageLayoutProvider, Pager, PaymentMethodSettings, Portal, PoweredByShipEngine, PudoType, purchaseLabel as PurchaseLabel, RootPortalProvider, Section, shipmentsGrid as ShipmentsGrid, SkeletonCarrierRow, Spacer, Spread, StoryNotes, SuspendText, Tabs, themeCreator as ThemeCreator, ThemeCreatorProvider, UsState, UsaCity, viewShipment as ViewShipment, voidLabel as VoidLabel, addEmailToValidation, addSpaceBetweenWords, assert, autoFundingSchema, calculateTotal, capitalizeFirstLetter, convertDecimalWeightToFractionalWeight, convertDimensions, convertFractionalWeightToDecimalWeight, convertPoundsAndOuncesToOunces, convertWeight, countries, countryCodes, createCodedErrors, createDictionary, createStyles, currencySymbol, daysAfter, errorMap, euCountryCodes, extendZod, featureFlagComponentNameLookup, featureFlags, findDateLocale, formLogger, formatByDateAndLocale, formatCreditCardNumber, formatDate, formatDateDDMMYY, formatDateDDMMYYYY, formatDimensions, formatExpiration, formatFractionalWeight, formatMoney, getAddFundsSchema, getCancelledShipment, getCarrierIdByCarrierCode, getCurrencyFromString, getCurrencySymbolFromString, getCustomsFromSalesOrder, getExpirationYears, getFeatures, getIsCustomsRequiredForSalesOrder, getIsCustomsRequiredForShipment, getIsInternationalShipment, getPendingShipment, getRateRequiresAcknowledgement, getRelativeDates, getRequestedServices, getSalesOrderItemsFromSalesOrderOrShipment, getShipmentByStatus, getTotalRateAmount, getlocaleDateStringFormat, isCollectionService, isDecimalWeight, isDomesticAddress, isEmptyAddress, isFlatRatePackageCode, isMetricWeightUnit, isMilitaryAddress, isNowOrInTheFuture, isPoBox, isPoBoxAddress, isPudoEligibleRate, isString, isUnitedStatesTerritory, isUnsupportedByUps, isUpsCarrier, isUspsCarrier, moneySchema, mostRecent, nextDayCutoff, omitTime, overrideCarrierCodes$1 as overrideCarrierCodes, parseLocaleDate, pascalize, phoneSchema, phoneSchemaUnvalidated, postalCodeRegex$3 as postalCodeRegex, raise, sortByCreationDate, throwAny, throwJoinedMessages, usCities, usStateCodes, usStates, useAddressValidation, useBlackboxDetection, useCarrierMetadata, useConfirmationOptions, useCountryCodeOptions, useCustomsContentsOptions, useCustomsNonDeliveryOptions, useDateRangeOptions, useExpirationMonthOptions, useFeatures, useInsuranceProviderOptions, useNestedForm, usePackageOptions, usePageLayout, usePager, useRateOptions, useRootPortal, useRunOnceOnTrue, useScrubErrors, useServiceCodeOptions, useServicePoints, useShipmentMetadata, useShippingPresetsOptions, useStateCodeOptions, useThemeCreator, useToggle, useWarehouseOptions, validationResolver };