@shipengine/elements 2.20.0 → 2.21.0

package/cjs/components/address-parser/address-parser.cjs

@@ -0,0 +1,88 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var formLogger = require('../../utilities/form-logger.cjs');
+var validation = require('../../utilities/validation.cjs');
+var reactHookForm = require('react-hook-form');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var addressParserSchema = require('./address-parser-schema.cjs');
+var buttonGroup = require('../button-group/button-group.cjs');
+var portal = require('../portal/portal.cjs');
+var textArea = require('../field/text-area/text-area.cjs');
+var submitButton = require('../field/submit-button/submit-button.cjs');
+
+const AddressParser = ({
+  errors: parseErrors,
+  formId,
+  onCancel,
+  onSubmit,
+  portalRef,
+  reset
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const form = reactHookForm.useForm({
+    resolver: validation.validationResolver(addressParserSchema.addressParserSchema)
+  });
+  const handleSubmit = form.handleSubmit(values => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const payload = values;
+    onSubmit(payload);
+  }));
+  form.watch((data, {
+    name
+  }) => {
+    var _a;
+    if (name === "fullAddress" && ((_a = data.fullAddress) === null || _a === void 0 ? void 0 : _a.length) == null) reset === null || reset === void 0 ? void 0 : reset();
+  });
+  const errors = (parseErrors === null || parseErrors === void 0 ? void 0 : parseErrors.length) ? [t("errorMessages.parsingFailure")] : undefined;
+  const formInterface = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(textArea.TextArea, {
+      control: form.control,
+      errors: errors,
+      form: formId,
+      label: t("address.parserFields.fullAddress"),
+      labelWeight: "normal",
+      name: "fullAddress",
+      nativeLabel: true,
+      rows: 4
+    }), jsxRuntime.jsxs(buttonGroup.ButtonGroup, Object.assign({
+      justify: "end"
+    }, {
+      children: [onCancel && jsxRuntime.jsx(giger.Button, Object.assign({
+        bold: false,
+        onClick: () => {
+          onCancel();
+          reset && reset();
+        },
+        type: "button",
+        variant: giger.ButtonVariant.TEXT
+      }, {
+        children: t("actions.cancel")
+      })), jsxRuntime.jsx(submitButton.SubmitButton, Object.assign({
+        control: form.control,
+        form: formId,
+        requireDirty: true,
+        variant: giger.ButtonVariant.OUTLINED
+      }, {
+        children: t("actions.parse")
+      }))]
+    }))]
+  });
+  return jsxRuntime.jsx("form", Object.assign({
+    id: formId,
+    onSubmit: formLogger.formLogger.capture(handleSubmit)
+  }, {
+    children: portalRef !== undefined ? jsxRuntime.jsx(portal.Portal, Object.assign({
+      target: portalRef
+    }, {
+      children: formInterface
+    })) : formInterface
+  }));
+};
+
+exports.AddressParser = AddressParser;

package/cjs/components/address-parser/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var addressParser = require('./address-parser.cjs');
+var addressParserSchema = require('./address-parser-schema.cjs');
+
+
+
+exports.AddressParser = addressParser.AddressParser;
+exports.addressParserSchema = addressParserSchema.addressParserSchema;

package/cjs/components/address-preference-context/address-preference-context.cjs

@@ -0,0 +1,105 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useAddressValidation = require('../../hooks/use-address-validation.cjs');
+var isEqual = require('lodash/isEqual.js');
+var omit = require('lodash/omit.js');
+var React = require('react');
+var addressPreferenceSelect = require('../address-preference-select/address-preference-select.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
+
+const AddressPreferenceContext = /*#__PURE__*/React.createContext(undefined);
+const AddressPreferenceProvider = props => {
+  const {
+    children,
+    className,
+    formHeader,
+    onSubmit
+  } = props;
+  const [passengerData, setPassengerData] = React.useState();
+  const [userInput, setUserInput] = React.useState();
+  const {
+    validate: validateAddress,
+    validationPreference,
+    setValidationPreference
+  } = useAddressValidation.useAddressValidation();
+  const internalValidateAddress = payload => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const {
+      addresses,
+      onValid,
+      data
+    } = payload;
+    setUserInput(addresses);
+    const validationPreference = yield validateAddress(addresses);
+    const {
+      originAddress,
+      returnAddress
+    } = validationPreference;
+    setPassengerData(data);
+    if (isEqual__default["default"](addresses.originAddress, omit__default["default"](validationPreference.originAddress, ["addressLine3", "addressResidentialIndicator"]))) {
+      yield onValid({
+        originAddress: addresses.originAddress,
+        returnAddress: addresses === null || addresses === void 0 ? void 0 : addresses.returnAddress
+      });
+      setValidationPreference(undefined);
+      return;
+    }
+    if ((originAddress.validationType === "EXACT" || originAddress.validationType === "SOFT") && returnAddress && (returnAddress.validationType === "EXACT" || returnAddress.validationType === "SOFT")) {
+      yield onValid({
+        originAddress: originAddress.address,
+        returnAddress: returnAddress.address
+      });
+      setValidationPreference(undefined);
+      return;
+    }
+    if ((originAddress.validationType === "EXACT" || originAddress.validationType === "SOFT") && !returnAddress) {
+      yield onValid({
+        originAddress: originAddress.address
+      });
+      setValidationPreference(undefined);
+      return;
+    }
+  });
+  return jsxRuntime.jsx(AddressPreferenceContext.Provider, Object.assign({
+    value: {
+      data: passengerData,
+      userInput,
+      validateAddress: internalValidateAddress,
+      validationPreference
+    }
+  }, {
+    children: jsxRuntime.jsxs("div", Object.assign({
+      className: className
+    }, {
+      children: [formHeader, !validationPreference ? children : jsxRuntime.jsx(addressPreferenceSelect.AddressPreferenceSelect, {
+        onCancel: () => setValidationPreference(undefined),
+        onSubmit: payload => tslib.__awaiter(void 0, void 0, void 0, function* () {
+          yield onSubmit(Object.assign(Object.assign({}, payload), {
+            passengerData
+          }));
+          setValidationPreference(undefined);
+        }),
+        originAddress: validationPreference.originAddress,
+        returnAddress: validationPreference.returnAddress
+      })]
+    }))
+  }));
+};
+const useAddressPreference = () => {
+  const context = React.useContext(AddressPreferenceContext);
+  if (context === undefined) {
+    throw new Error("useAddressPreference must be used within the AddressPreferenceProvider");
+  }
+  return context;
+};
+
+exports.AddressPreferenceContext = AddressPreferenceContext;
+exports.AddressPreferenceProvider = AddressPreferenceProvider;
+exports.useAddressPreference = useAddressPreference;

package/cjs/components/address-preference-context/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var addressPreferenceContext = require('./address-preference-context.cjs');
+
+
+
+exports.AddressPreferenceContext = addressPreferenceContext.AddressPreferenceContext;
+exports.AddressPreferenceProvider = addressPreferenceContext.AddressPreferenceProvider;
+exports.useAddressPreference = addressPreferenceContext.useAddressPreference;

package/cjs/components/address-preference-display/address-preference-display.cjs

@@ -0,0 +1,113 @@
+'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 disclosure = require('../disclosure/disclosure.cjs');
+var addressDisplay = require('../address-display/address-display.cjs');
+var spacer = require('../spacer/spacer.cjs');
+var buttonGroup = require('../button-group/button-group.cjs');
+
+const AddressPreferenceDisplay = ({
+  addressPreference,
+  onChangePreference,
+  onEditAddress,
+  onToggleDisclosure
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const handleChangePreference = React.useCallback(() => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const selectedAddress = addressPreference.toggle();
+    yield onChangePreference === null || onChangePreference === void 0 ? void 0 : onChangePreference(selectedAddress);
+  }), [addressPreference, onChangePreference]);
+  const disclosureContentTitle = React.useMemo(() => addressPreference.status === "verified" ? t(`address.preference.${addressPreference.alternativeSource}`) : t("address.preference.addressNotValidated"), [addressPreference, t]);
+  const isVerified = React.useMemo(() => {
+    if (addressPreference.status === "verified" && addressPreference.selectionSource === "matchedAddress") {
+      return true;
+    }
+    return false;
+  }, [addressPreference]);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(addressDisplay.AddressDisplay, {
+      address: addressPreference.selection,
+      decoratorText:
+      // The modified decorator should only be shown on the mathced address
+      addressPreference.isModified && addressPreference.selectionSource === "matchedAddress" ? `(${t("address.preference.modified")})` : undefined,
+      onEdit: onEditAddress
+    }), jsxRuntime.jsx(disclosure.Disclosure, Object.assign({
+      "data-testid": "address-preference-disclosure",
+      label: jsxRuntime.jsx(giger.Tag, Object.assign({
+        color: isVerified ? giger.TagColor.SUCCESS : giger.TagColor.ERROR
+      }, {
+        children: isVerified ? t("address.validation.validated") : t("address.validation.notValidated")
+      })),
+      onToggle: isOpen => onToggleDisclosure === null || onToggleDisclosure === void 0 ? void 0 : onToggleDisclosure(isOpen, addressPreference),
+      // Only default to open if the address was unable to be verified
+      open: !isVerified,
+      showToggle: addressPreference.status === "error" || !!addressPreference.alternative
+    }, {
+      children: toggleDisclosure => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+          bold: true
+        }, {
+          children: disclosureContentTitle
+        })), jsxRuntime.jsx(spacer.Spacer, {
+          multiplier: 1
+        }), addressPreference.status === "verified" ? addressPreference.alternative && jsxRuntime.jsx(addressDisplay.AddressDisplay, {
+          address: addressPreference.alternative
+        }) : jsxRuntime.jsx(giger.Grid, Object.assign({
+          css: theme => ({
+            maxWidth: styles.scopeTheme(theme).spacing(40)
+          }),
+          noPadding: true
+        }, {
+          children: jsxRuntime.jsx(giger.GridChild, Object.assign({
+            colSpan: 12
+          }, {
+            children: jsxRuntime.jsx(giger.Typography, Object.assign({
+              variant: "body1"
+            }, {
+              children: t("address.preference.unableToValidate")
+            }))
+          }))
+        })), addressPreference.status !== "error" && addressPreference.alternative && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(spacer.Spacer, {
+            multiplier: 2
+          }), jsxRuntime.jsxs(buttonGroup.ButtonGroup, Object.assign({
+            justify: "start"
+          }, {
+            children: [jsxRuntime.jsx(giger.Button, Object.assign({
+              bold: false,
+              isFullWidth: true,
+              onClick: () => tslib.__awaiter(void 0, void 0, void 0, function* () {
+                yield handleChangePreference();
+                toggleDisclosure();
+              }),
+              type: "button",
+              variant: giger.ButtonVariant.OUTLINED
+            }, {
+              children: t(`address.preference.use.${addressPreference.alternativeSource}`)
+            })), jsxRuntime.jsx(giger.Button, Object.assign({
+              bold: false,
+              onClick: toggleDisclosure,
+              type: "button",
+              variant: giger.ButtonVariant.TEXT
+            }, {
+              children: t("common:actions.hide")
+            }))]
+          }))]
+        })]
+      })
+    })), jsxRuntime.jsx(spacer.Spacer, {
+      multiplier: 1
+    })]
+  });
+};
+
+exports.AddressPreferenceDisplay = AddressPreferenceDisplay;

package/cjs/components/address-preference-display/index.cjs

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

package/cjs/components/address-preference-select/address-preference-select.cjs

@@ -0,0 +1,209 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 spacer = require('../spacer/spacer.cjs');
+var addressDisplay = require('../address-display/address-display.cjs');
+var buttonGroup = require('../button-group/button-group.cjs');
+
+const AddressPreferenceSelect = ({
+  onCancel,
+  onSubmit,
+  originAddress,
+  returnAddress
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation(["manage-warehouses", "common"]);
+  const determineAddressValidationType = address => {
+    if (!address) return undefined;
+    switch (address.validationType) {
+      case "EXACT":
+      case "SOFT":
+        return address.address;
+      case "SUGGESTED":
+        return address.validation.matchedAddress;
+      case "ERROR":
+        return address.validation.originalAddress;
+      default:
+        return undefined;
+    }
+  };
+  const [originAddressSelection, setOriginAddressSelection] = React.useState({
+    address: determineAddressValidationType(originAddress),
+    addressType: "suggested"
+  });
+  const [returnAddressSelection, setReturnAddressSelection] = React.useState({
+    address: determineAddressValidationType(returnAddress),
+    addressType: "suggested"
+  });
+  const AddressPreferenceDisplay = ({
+    name,
+    onSelect,
+    warehousePreference,
+    selectedAddress
+  }) => {
+    var _a, _b;
+    switch (warehousePreference.validationType) {
+      case "EXACT":
+      case "SOFT":
+        return jsxRuntime.jsx(addressDisplay.AddressDisplay, {
+          address: warehousePreference.address
+        });
+      case "SUGGESTED":
+        return jsxRuntime.jsxs(giger.RadioGroup, Object.assign({
+          name: name,
+          onChange: e => {
+            if (warehousePreference.validation.matchedAddress && e.target.value === "suggested") {
+              onSelect({
+                address: warehousePreference.validation.matchedAddress,
+                addressType: "suggested"
+              });
+            } else {
+              onSelect({
+                address: warehousePreference.validation.originalAddress,
+                addressType: "original"
+              });
+            }
+          },
+          value: selectedAddress.addressType
+        }, {
+          children: [jsxRuntime.jsx(spacer.Spacer, {
+            multiplier: 1
+          }), jsxRuntime.jsx(giger.Radio, Object.assign({
+            value: "suggested"
+          }, {
+            children: t("common:address.preference.matchedAddress")
+          })), warehousePreference.validation.matchedAddress && jsxRuntime.jsx(giger.GridChild, Object.assign({
+            colSpan: 6,
+            colStart: 4,
+            css: theme => ({
+              paddingLeft: styles.scopeTheme(theme).spacing(3)
+            })
+          }, {
+            children: jsxRuntime.jsx(addressDisplay.AddressDisplay, {
+              address: warehousePreference.validation.matchedAddress
+            })
+          })), jsxRuntime.jsx(spacer.Spacer, {
+            multiplier: 1
+          }), jsxRuntime.jsx(giger.Radio, Object.assign({
+            value: "original"
+          }, {
+            children: t("common:address.preference.originalAddress")
+          })), jsxRuntime.jsx(spacer.Spacer, {
+            multiplier: 1
+          }), jsxRuntime.jsx(giger.GridChild, Object.assign({
+            colSpan: 6,
+            colStart: 4,
+            css: theme => ({
+              paddingLeft: styles.scopeTheme(theme).spacing(3)
+            })
+          }, {
+            children: jsxRuntime.jsx(addressDisplay.AddressDisplay, {
+              address: (_a = warehousePreference.validation) === null || _a === void 0 ? void 0 : _a.originalAddress
+            })
+          }))]
+        }));
+      case "ERROR":
+        return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(spacer.Spacer, {
+            multiplier: 2
+          }), jsxRuntime.jsx(giger.GridChild, Object.assign({
+            colSpan: 8
+          }, {
+            children: jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+              title: t("address.preference.addressNotValidated"),
+              type: giger.NotificationType.ALERT
+            }, {
+              children: t("address.preference.unableToValidate")
+            }))
+          })), jsxRuntime.jsx(spacer.Spacer, {
+            multiplier: 2
+          }), jsxRuntime.jsx(giger.GridChild, {
+            children: jsxRuntime.jsx(addressDisplay.AddressDisplay, {
+              address: (_b = warehousePreference.validation) === null || _b === void 0 ? void 0 : _b.originalAddress
+            })
+          })]
+        });
+      default:
+        // This code path should never be reached.
+        return jsxRuntime.jsx("div", {
+          children: "not found"
+        });
+    }
+  };
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs(giger.Grid, Object.assign({
+      "data-testid": "addressPreferenceSelect",
+      noPadding: true
+    }, {
+      children: [jsxRuntime.jsx(giger.GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: jsxRuntime.jsx(giger.Typography, Object.assign({
+          variant: "subtitle2"
+        }, {
+          children: t("common:address.preference.title")
+        }))
+      })), jsxRuntime.jsxs(giger.GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+          css: {
+            textTransform: "capitalize"
+          },
+          variant: "subtitle2"
+        }, {
+          children: t("manage-warehouses:shipFrom")
+        })), originAddress && jsxRuntime.jsx(AddressPreferenceDisplay, {
+          name: "originAddressPreference",
+          onSelect: selection => setOriginAddressSelection(selection),
+          selectedAddress: originAddressSelection,
+          warehousePreference: originAddress
+        })]
+      })), returnAddress && jsxRuntime.jsxs(giger.GridChild, Object.assign({
+        colSpan: 12
+      }, {
+        children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+          css: {
+            textTransform: "capitalize"
+          },
+          variant: "subtitle2"
+        }, {
+          children: t("manage-warehouses:returnTo")
+        })), jsxRuntime.jsx(AddressPreferenceDisplay, {
+          name: "returnAddressPreference",
+          onSelect: selection => setReturnAddressSelection(selection),
+          selectedAddress: returnAddressSelection,
+          warehousePreference: returnAddress
+        })]
+      }))]
+    })), jsxRuntime.jsxs(buttonGroup.ButtonGroup, Object.assign({
+      justify: "end"
+    }, {
+      children: [onCancel && jsxRuntime.jsx(giger.Button, Object.assign({
+        bold: false,
+        onClick: onCancel,
+        type: "button",
+        variant: giger.ButtonVariant.TEXT
+      }, {
+        children: t("actions.cancel")
+      })), jsxRuntime.jsx(giger.Button, Object.assign({
+        onClick: () => onSubmit({
+          originAddress: originAddressSelection.address,
+          returnAddress: returnAddressSelection.address
+        }),
+        variant: giger.ButtonVariant.OUTLINED
+      }, {
+        children: t("common:address.preference.confirm")
+      }))]
+    }))]
+  });
+};
+
+exports.AddressPreferenceSelect = AddressPreferenceSelect;

package/cjs/components/address-preference-select/index.cjs

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

package/cjs/components/button-group/button-group.cjs

@@ -0,0 +1,65 @@
+'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');
+
+/**
+ * @internal
+ *
+ * # Button Group Component
+ *
+ * - The `<ButtonGroup />` is a composition component used to group buttons together that are
+ * passed in as children.
+ *
+ * @see {@link ButtonGroupProps | The props that are passed into the `<ButtonGroup />` component}
+ */
+const ButtonGroup = _a => {
+  var {
+      children,
+      justify,
+      toolbar = false,
+      breakpoint
+    } = _a,
+    props = tslib.__rest(_a, ["children", "justify", "toolbar", "breakpoint"]);
+  const styles$1 = styles.createStyles({
+    groupStyles: theme => Object.assign(Object.assign({
+      alignItems: "center",
+      display: "flex",
+      justifyContent: justify,
+      width: "100%"
+    }, breakpoint && {
+      [`@media (max-width: ${styles.scopeTheme(theme).breakPoints[breakpoint]}px)`]: {
+        "& > button": {
+          display: "flex",
+          justifyContent: "center",
+          textWrap: "nowrap",
+          width: "100%"
+        }
+      }
+    }), toolbar ? {
+      "& > button": {
+        "&:not(:first-of-type)": {
+          borderBottomLeftRadius: 0,
+          borderTopLeftRadius: 0
+        },
+        "&:not(:last-child)": {
+          borderBottomRightRadius: 0,
+          borderTopRightRadius: 0
+        }
+      }
+    } : {
+      gap: styles.scopeTheme(theme).spacing(2)
+    })
+  });
+  return jsxRuntime.jsx("div", Object.assign({}, props, {
+    css: styles$1.groupStyles,
+    role: "group"
+  }, {
+    children: children
+  }));
+};
+
+exports.ButtonGroup = ButtonGroup;

package/cjs/components/button-group/index.cjs

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

package/cjs/components/carrier-balance/carrier-balance.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var money = require('../../utilities/money.cjs');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var carrierBalance_styles = require('./carrier-balance.styles.cjs');
+var inlineLabel = require('../inline-label/inline-label.cjs');
+
+/**
+ * @internal
+ *
+ * # Carrier Balance
+ *
+ * - The `<CarrierBalance />` component is used to display the current balance for a given
+ * carrier provider.
+ *
+ * @see {@link CarrierBalanceProps | The props for the `<CarrierBalance />` component}
+ */
+const CarrierBalance = ({
+  balance,
+  isLoading,
+  currency
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  return jsxRuntime.jsx(inlineLabel.InlineLabel, Object.assign({
+    label: t("manage-funding:currentBalance")
+  }, {
+    children: isLoading ? jsxRuntime.jsx(giger.Spinner, {}) : jsxRuntime.jsx(giger.Typography, Object.assign({
+      bold: true,
+      css: carrierBalance_styles.styles.getBalanceText(balance)
+    }, {
+      children: balance === undefined ? "----" : money.formatMoney({
+        amount: balance,
+        currency
+      })
+    }))
+  }));
+};
+
+exports.CarrierBalance = CarrierBalance;