@shipengine/elements 2.20.0 → 2.22.0

package/cjs/elements/theme-creator/components/typography-editor/typography-editor.cjs

@@ -0,0 +1,106 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var giger = require('@shipengine/giger');
+var typographyEditor_styles = require('./typography-editor.styles.cjs');
+
+const TypographyEditor = ({
+  onUpdateTypographyConfig,
+  typographyConfig,
+  formatKey
+}) => {
+  const handleInputChange = React.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 = React.useCallback((obj, key) => {
+    if (!obj) return undefined;
+    return obj[key];
+  }, []);
+  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 jsxRuntime.jsx(giger.Select, Object.assign({
+      css: typographyEditor_styles.styles.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 => jsxRuntime.jsx(giger.Option, Object.assign({
+        value: option.value
+      }, {
+        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 jsxRuntime.jsx(giger.Input, {
+      "aria-labelledby": `${variant}.${key}`,
+      css: typographyEditor_styles.styles.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 jsxRuntime.jsx(jsxRuntime.Fragment, {
+          children: renderFontWeightSelect(variant, key)
+        });
+      case "fontSize":
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {
+          children: renderFontSizeInput(variant, key)
+        });
+      default:
+        return null;
+    }
+  };
+  return jsxRuntime.jsx("div", {
+    children: typographyConfig && Object.keys(typographyConfig).sort().map(variant => jsxRuntime.jsxs("div", Object.assign({
+      css: typographyEditor_styles.styles.sectionContainer
+    }, {
+      children: [jsxRuntime.jsx("p", Object.assign({
+        css: typographyEditor_styles.styles.keys,
+        id: variant
+      }, {
+        children: formatKey(variant)
+      })), jsxRuntime.jsx("section", Object.assign({
+        css: typographyEditor_styles.styles.section
+      }, {
+        children: Object.keys(typographyConfig[variant])
+        // ensure fontWeight is rendered before fontSize
+        .sort((a, b) => a === "fontWeight" ? -1 : 1).map(key => jsxRuntime.jsx("div", Object.assign({
+          id: `${variant}.${key}`
+        }, {
+          children: renderChildren(variant, key)
+        }), key))
+      }))]
+    }), variant))
+  });
+};
+
+exports.TypographyEditor = TypographyEditor;

package/cjs/elements/theme-creator/components/typography-editor/typography-editor.styles.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  input: theme => ({
+    border: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`,
+    borderRadius: "4px",
+    color: styles$1.scopeTheme(theme).palette.gray.main,
+    fontSize: "14px",
+    maxWidth: styles$1.scopeTheme(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: styles$1.scopeTheme(theme).spacing(1),
+    justifyContent: "space-between"
+  }),
+  sectionContainer: theme => ({
+    marginBottom: styles$1.scopeTheme(theme).spacing(4)
+  }),
+  select: theme => ({
+    border: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`,
+    borderRadius: "4px",
+    color: styles$1.scopeTheme(theme).palette.gray.main,
+    fontSize: "14px"
+  })
+});
+
+exports.styles = styles;

package/cjs/elements/theme-creator/index.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var themeCreatorProvider = require('./theme-creator-provider.cjs');
+var themeCreator = require('./theme-creator.cjs');
+
+
+
+exports.ThemeCreatorProvider = themeCreatorProvider.ThemeCreatorProvider;
+exports.useThemeCreator = themeCreatorProvider.useThemeCreator;
+exports.ThemeCreator = themeCreator;

package/cjs/elements/theme-creator/theme-creator-provider.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+
+const ThemeCreatorContext = /*#__PURE__*/React.createContext(undefined);
+const ThemeCreatorProvider = ({
+  children,
+  editableTheme
+}) => {
+  const [themeConfig, setThemeConfig] = React.useState(editableTheme);
+  return jsxRuntime.jsx(ThemeCreatorContext.Provider, Object.assign({
+    value: {
+      setThemeConfig,
+      themeConfig
+    }
+  }, {
+    children: children
+  }));
+};
+const useThemeCreator = () => {
+  const themeCreatorContext = React.useContext(ThemeCreatorContext);
+  if (!themeCreatorContext) throw new Error("useThemeConfigurator must be used within a ThemeConfiguratorProvider");
+  return themeCreatorContext;
+};
+
+exports.ThemeCreatorProvider = ThemeCreatorProvider;
+exports.useThemeCreator = useThemeCreator;

package/cjs/elements/theme-creator/theme-creator.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var configureTheme = require('./components/configure-theme/configure-theme.cjs');
+var index = require('../../locales/en/index.cjs');
+var createElement = require('../../create-element/create-element.cjs');
+var errorFallback = require('../../components/error-fallback/error-fallback.cjs');
+
+const Component = _a => {
+  var props = tslib.__rest(_a, []);
+  return jsxRuntime.jsx(configureTheme.ConfigureTheme, Object.assign({}, props));
+};
+const Element = createElement.createElement(Component, errorFallback.ErrorFallback, {
+  resources: {
+    en: index
+  }
+});
+
+exports.Component = Component;
+exports.Element = Element;

package/cjs/elements/transaction-history/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var transactionHistoryElement = require('./transaction-history-element.cjs');
+
+
+
+exports.TransactionHistory = transactionHistoryElement;

package/cjs/elements/transaction-history/transaction-history-element.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var transactionHistory = require('../../features/transaction-history/transaction-history.cjs');
+var index = require('../../locales/en/index.cjs');
+var createElement = require('../../create-element/create-element.cjs');
+var errorFallback = require('../../components/error-fallback/error-fallback.cjs');
+
+const Component = () => {
+  return jsxRuntime.jsx(transactionHistory.TransactionHistory, {});
+};
+const Element = createElement.createElement(Component, errorFallback.ErrorFallback, {
+  resources: {
+    en: index
+  }
+});
+
+exports.Component = Component;
+exports.Element = Element;

package/cjs/elements/unit-settings/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var unitSettingsElement = require('./unit-settings-element.cjs');
+
+
+
+exports.UnitSettings = unitSettingsElement;

package/cjs/elements/unit-settings/unit-settings-element.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useUnitSettings = require('../../features/unit-settings/use-unit-settings.cjs');
+var unitSettings = require('../../features/unit-settings/unit-settings.cjs');
+var index = require('../../locales/en/index.cjs');
+var createElement = require('../../create-element/create-element.cjs');
+var errorFallback = require('../../components/error-fallback/error-fallback.cjs');
+
+const Component = () => {
+  const props = tslib.__rest(useUnitSettings.useUnitSettings(), []);
+  return jsxRuntime.jsx(unitSettings.UnitSettings, Object.assign({}, props));
+};
+const Element = createElement.createElement(Component, errorFallback.ErrorFallback, {
+  resources: {
+    en: index
+  }
+});
+
+exports.Component = Component;
+exports.Element = Element;

package/cjs/elements/vat-settings/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vatSettingsElement = require('./vat-settings-element.cjs');
+
+
+
+exports.VatSettings = vatSettingsElement;

package/cjs/elements/vat-settings/vat-settings-element.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var vatSettings = require('../../features/vat-settings/vat-settings.cjs');
+var index = require('../../locales/en/index.cjs');
+var createElement = require('../../create-element/create-element.cjs');
+var errorFallback = require('../../components/error-fallback/error-fallback.cjs');
+
+const Component = () => {
+  return jsxRuntime.jsx(vatSettings.VatSettings, {});
+};
+const Element = createElement.createElement(Component, errorFallback.ErrorFallback, {
+  resources: {
+    en: index
+  }
+});
+
+exports.Component = Component;
+exports.Element = Element;

package/cjs/elements/void-label/components/actions/actions.cjs

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var styles = require('../../../../utilities/styles.cjs');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var buttonGroup = require('../../../../components/button-group/button-group.cjs');
+
+const Actions = ({
+  onComplete,
+  onSubmit,
+  onViewShipment,
+  shipment,
+  voidRequest,
+  onFail
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "void-label"]);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const handleSubmit = React.useCallback(() => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    setIsSubmitting(true);
+    try {
+      yield onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
+    } catch (_a) {
+      void (onFail === null || onFail === void 0 ? void 0 : onFail());
+    } finally {
+      // even if an exception is thrown, reset this state
+      setIsSubmitting(false);
+    }
+  }), [onSubmit, onFail]);
+  return jsxRuntime.jsx(giger.BottomSheet, Object.assign({
+    alwaysVisible: true,
+    css: theme => ({
+      borderTop: `1px solid ${styles.scopeTheme(theme).palette.gray.ultraLight}`,
+      boxShadow: "none",
+      position: "static"
+    })
+  }, {
+    children: (voidRequest === null || voidRequest === void 0 ? void 0 : voidRequest.approved) ?
+    // The void request has been approved
+    jsxRuntime.jsxs(buttonGroup.ButtonGroup, Object.assign({
+      breakpoint: "mobileLarge",
+      justify: "center"
+    }, {
+      children: [onComplete && jsxRuntime.jsx(giger.Button, Object.assign({
+        bold: false,
+        onClick: () => onComplete(voidRequest, shipment),
+        variant: giger.ButtonVariant.OUTLINED
+      }, {
+        children: t("void-label:actions.complete")
+      })), onViewShipment && jsxRuntime.jsx(giger.Button, Object.assign({
+        bold: false,
+        onClick: () => onViewShipment(shipment)
+      }, {
+        children: t("void-label:actions.viewShipment")
+      }))]
+    })) :
+    // The void request has yet to be made or was rejected
+    onSubmit && jsxRuntime.jsx(buttonGroup.ButtonGroup, Object.assign({
+      breakpoint: "mobileLarge",
+      justify: "center"
+    }, {
+      children: jsxRuntime.jsx(giger.Button, Object.assign({
+        bold: false,
+        isLoading: isSubmitting,
+        onClick: handleSubmit
+      }, {
+        children: t("void-label:actions.confirmVoid")
+      }))
+    }))
+  }));
+};
+
+exports.Actions = Actions;

package/cjs/elements/void-label/components/actions/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var actions = require('./actions.cjs');
+
+
+
+exports.Actions = actions.Actions;

package/cjs/elements/void-label/components/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var actions = require('./actions/actions.cjs');
+var message = require('./message/message.cjs');
+
+
+
+exports.Actions = actions.Actions;
+exports.Message = message.Message;

package/cjs/elements/void-label/components/message/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var message = require('./message.cjs');
+
+
+
+exports.Message = message.Message;

package/cjs/elements/void-label/components/message/message.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var styles = require('../../../../utilities/styles.cjs');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var section = require('../../../../components/section/section.cjs');
+
+const Message = ({
+  voidRequest,
+  carrier
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "void-label"]);
+  return jsxRuntime.jsx(section.Section, {
+    children: voidRequest ? jsxRuntime.jsxs("section", Object.assign({
+      css: {
+        textAlign: "center",
+        width: "100%"
+      }
+    }, {
+      children: [jsxRuntime.jsx(giger.Icon, {
+        css: theme => ({
+          color: (voidRequest === null || voidRequest === void 0 ? void 0 : voidRequest.approved) ? styles.scopeTheme(theme).palette.success.main : styles.scopeTheme(theme).palette.error.main
+        }),
+        name: (voidRequest === null || voidRequest === void 0 ? void 0 : voidRequest.approved) ? gigerTheme.IconNames.CHECK_FILLED : gigerTheme.IconNames.ALERT,
+        size: giger.IconSize.SIZE_LARGE
+      }), (voidRequest === null || voidRequest === void 0 ? void 0 : voidRequest.approved) ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+          component: "h2"
+        }, {
+          children: t("void-label:resultTitles.approved")
+        })), jsxRuntime.jsx(giger.Typography, {
+          children: t("void-label:resultMessages.approved")
+        })]
+      }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+          component: "h2"
+        }, {
+          children: t("void-label:resultTitles.rejected")
+        })), jsxRuntime.jsx(giger.Typography, {
+          children: carrier ? jsxRuntime.jsxs(reactI18next.Trans, Object.assign({
+            i18nKey: `void-label:resultMessages.${carrier}`
+          }, {
+            children: ["To void this shipping label, ", jsxRuntime.jsx(giger.Link, Object.assign({
+              href: "https://survey.alchemer.com/s3/7830390/ShipEngine-UK-Carrier-Services-Refund-Request ",
+              target: "_blank"
+            }, {
+              children: "submit a request"
+            }))]
+          })) : jsxRuntime.jsxs(reactI18next.Trans, Object.assign({
+            i18nKey: "void-label:resultMessages.rejected"
+          }, {
+            children: ["Your label may have already been scanned by the carrier or the label type is ineligible for voiding.", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("br", {}), "Contact your carrier for assistance with shipments currently in transit."]
+          }))
+        })]
+      })]
+    })) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(giger.Typography, {
+        children: t("void-label:refund_process")
+      }), jsxRuntime.jsx(giger.Typography, Object.assign({
+        component: "p"
+      }, {
+        children: t("void-label:refund_rules")
+      }))]
+    })
+  });
+};
+
+exports.Message = Message;

package/cjs/elements/void-label/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var voidLabel = require('./void-label.cjs');
+
+
+
+exports.VoidLabel = voidLabel;

package/cjs/elements/void-label/void-label.cjs

@@ -0,0 +1,143 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useToggle = require('../../hooks/use-toggle.cjs');
+var error = require('../../utilities/error.cjs');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var reactApi = require('@shipengine/react-api');
+var message = require('./components/message/message.cjs');
+var actions = require('./components/actions/actions.cjs');
+var index = require('../../locales/en/index.cjs');
+var elementsContextProvider = require('../../elements-provider/elements-context-provider.cjs');
+var loader = require('../../components/loader/loader.cjs');
+var spacer = require('../../components/spacer/spacer.cjs');
+var poweredByShipengine = require('../../components/powered-by-shipengine/powered-by-shipengine.cjs');
+var createElement = require('../../create-element/create-element.cjs');
+var errorFallback = require('../../components/error-fallback/error-fallback.cjs');
+
+/**
+ * # 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 `Shipment Summary` 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 = createElement(Component, ErrorFallback, {
+ *
+ *   resources: { en },
+ * });
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link VoidLabel.Element | The **Element** created to render `<VoidLabel />`}
+ */
+const Component = ({
+  labelId,
+  onComplete,
+  onSuccess,
+  onViewShipment
+}) => {
+  var _a, _b, _c;
+  const {
+    globalFeatures
+  } = elementsContextProvider.useElements();
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const [displayError, toggleDisplayError] = useToggle.useToggle(false);
+  // TODO [LMNT-910] - labelId should be a required prop
+  if (!labelId) throw new Error("void-label:errorMessages.labelIdRequired");
+  const label = reactApi.useGetLabel(labelId);
+  const shipment = reactApi.useGetSalesOrderShipment((_a = label.data) === null || _a === void 0 ? void 0 : _a.shipmentId);
+  const voidLabel = reactApi.useVoidLabel();
+  const carrier = reactApi.useGetCarrierById((_b = label.data) === null || _b === void 0 ? void 0 : _b.carrierId);
+  if (label.isInitialLoading || carrier.isInitialLoading) return jsxRuntime.jsx(loader.Loader, {
+    message: t("loading.label")
+  });
+  if (shipment.isInitialLoading) return jsxRuntime.jsx(loader.Loader, {
+    message: t("loading.shipment")
+  });
+  error.throwAny(label.error);
+  error.throwAny(shipment.error);
+  error.throwAny(carrier.error);
+  if (!label.data) throw new Error("errorMessages.unableToLoad.label");
+  if (!shipment.data) throw new Error("errorMessages.unableToLoad.shipment");
+  const handleVoidLabelSubmit = () => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    toggleDisplayError(false);
+    const result = yield voidLabel.mutateAsync(labelId);
+    if (result.approved) {
+      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(label.data, shipment.data);
+    }
+  });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [displayError && jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+      type: giger.NotificationType.ERROR
+    }, {
+      children: t("void-label:errorMessages.request_failed_to_complete")
+    })), jsxRuntime.jsx(message.Message, {
+      carrier: ((_c = carrier === null || carrier === void 0 ? void 0 : carrier.data) === null || _c === void 0 ? void 0 : _c.requiresFundedAmount) ? carrier.data.carrierCode : undefined,
+      voidRequest: voidLabel.data
+    }), jsxRuntime.jsx(actions.Actions, {
+      onComplete: onComplete,
+      onFail: () => toggleDisplayError(true),
+      onSubmit: handleVoidLabelSubmit,
+      onViewShipment: onViewShipment,
+      shipment: shipment.data,
+      voidRequest: voidLabel.data
+    }), globalFeatures.poweredByShipEngine && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsx(poweredByShipengine.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 = createElement.createElement(Component, errorFallback.ErrorFallback, {
+  resources: {
+    en: index
+  }
+});
+
+exports.Component = Component;
+exports.Element = Element;