@shipengine/elements 2.20.0 → 2.22.0

package/cjs/components/display-term/display-term.styles.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  container: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: styles$1.scopeTheme(theme).spacing(2),
+    padding: `${styles$1.scopeTheme(theme).spacing(1)}px 0`
+  }),
+  link: theme => ({
+    "&:visited": {
+      color: styles$1.scopeTheme(theme).palette.secondary.main
+    },
+    fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.normal
+  }),
+  termLink: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: styles$1.scopeTheme(theme).spacing(1),
+    listStyle: "none"
+  }),
+  terms: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: styles$1.scopeTheme(theme).spacing(1)
+  })
+});
+
+exports.styles = styles;

package/cjs/components/display-term/index.cjs

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

package/cjs/components/drawer/drawer.cjs

@@ -0,0 +1,67 @@
+'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 gigerTheme = require('@shipengine/giger-theme');
+var drawer_styles = require('./drawer.styles.cjs');
+
+const Drawer = ({
+  children,
+  headerContent,
+  isOpen,
+  toggleDrawer
+}) => {
+  const drawerRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    const handleResize = () => {
+      const drawer = drawerRef.current;
+      if (drawer && drawer.parentElement) {
+        drawer.style.width = `${drawer.parentElement.clientWidth}px`;
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return jsxRuntime.jsxs("div", Object.assign({
+    "aria-label": "Drawer",
+    css: drawer_styles.styles.getDrawerStyles(isOpen),
+    ref: drawerRef
+  }, {
+    children: [jsxRuntime.jsxs("header", Object.assign({
+      "aria-expanded": isOpen,
+      css: drawer_styles.styles.headerStyles
+    }, {
+      children: [jsxRuntime.jsx("div", Object.assign({
+        onClick: toggleDrawer,
+        onKeyDown: event => {
+          if (event.key === "Enter") {
+            toggleDrawer();
+          }
+        },
+        role: "button",
+        tabIndex: 0
+      }, {
+        children: jsxRuntime.jsx(giger.Icon, {
+          css: {
+            transform: `rotate(${isOpen ? "-90" : "90"}deg)`
+          },
+          name: gigerTheme.IconNames.PAGINATION_LEFT
+        })
+      })), headerContent]
+    })), jsxRuntime.jsx("div", Object.assign({
+      "aria-labelledby": "drawer",
+      css: drawer_styles.styles.getChildrenStyles(isOpen),
+      role: "region"
+    }, {
+      children: children
+    }))]
+  }));
+};
+
+exports.Drawer = Drawer;

package/cjs/components/drawer/drawer.styles.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  container: {
+    backgroundColor: "#11003A"
+  },
+  getChildrenStyles: isOpen => theme => ({
+    height: isOpen ? "90%" : "0",
+    overflow: "scroll",
+    paddingBottom: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  getDrawerStyles: isOpen => theme => ({
+    backgroundColor: "#11003A",
+    bottom: 0,
+    height: isOpen ? "50%" : `${styles$1.scopeTheme(theme).spacing(6)}px`,
+    minWidth: "375px",
+    position: "fixed",
+    transformOrigin: "bottom",
+    transition: "height 0.5s;"
+  }),
+  headerStyles: theme => ({
+    alignItems: "center",
+    color: "#fff",
+    display: "flex",
+    height: styles$1.scopeTheme(theme).spacing(6),
+    justifyContent: "space-between",
+    padding: styles$1.scopeTheme(theme).spacing(1)
+  })
+});
+
+exports.styles = styles;

package/cjs/components/drawer/index.cjs

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

package/cjs/components/enable-insurance-banner/enable-insurance-banner.cjs

@@ -0,0 +1,104 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var enableInsuranceBanner_styles = require('./enable-insurance-banner.styles.cjs');
+var carrierLogo = require('../carrier-logo/carrier-logo.cjs');
+var registerFundingSourceInsuranceForm = require('../forms/register-funding-source-insurance-form/register-funding-source-insurance-form.cjs');
+var carrierIcon = require('../carrier-icon/carrier-icon.cjs');
+var spacer = require('../spacer/spacer.cjs');
+var buttonGroup = require('../button-group/button-group.cjs');
+
+const EnableInsuranceBanner = ({
+  insuranceProviderProfile,
+  onSubmit
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation("view-shipment");
+  const [showTerms, setShowTerms] = React.useState(false);
+  const [showSuccess, setShowSuccess] = React.useState(false);
+  const handleCancel = React.useCallback(() => {
+    setShowTerms(false);
+  }, []);
+  const handleSubmit = React.useCallback(() => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const result = yield onSubmit();
+    if (result.isSuccessful) {
+      setShowSuccess(true);
+    }
+  }), [onSubmit]);
+  if ((insuranceProviderProfile === null || insuranceProviderProfile === void 0 ? void 0 : insuranceProviderProfile.provider) === "parcelguard") {
+    return showSuccess ? jsxRuntime.jsxs("div", Object.assign({
+      css: enableInsuranceBanner_styles.styles.successContainer
+    }, {
+      children: [jsxRuntime.jsxs("div", Object.assign({
+        css: enableInsuranceBanner_styles.styles.successMessage
+      }, {
+        children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+          variant: "subtitle2"
+        }, {
+          children: t("insurance.parcelguard.registerSuccess.title")
+        })), jsxRuntime.jsx("div", Object.assign({
+          css: enableInsuranceBanner_styles.styles.description
+        }, {
+          children: jsxRuntime.jsxs(reactI18next.Trans, Object.assign({
+            i18nKey: t(`insurance.parcelguard.registerSuccess.description`)
+          }, {
+            children: ["Just add ParcelGuard as the insurance provider to your shipments for greater peace of mind.", "\u00A0", jsxRuntime.jsx(giger.Link, Object.assign({
+              "aria-label": "Learn More about ParcelGuard",
+              css: enableInsuranceBanner_styles.styles.link
+            }, {
+              children: "Learn more."
+            }))]
+          }))
+        }))]
+      })), jsxRuntime.jsx(carrierLogo.CarrierLogo, {
+        carrierCode: insuranceProviderProfile === null || insuranceProviderProfile === void 0 ? void 0 : insuranceProviderProfile.provider,
+        carrierName: insuranceProviderProfile === null || insuranceProviderProfile === void 0 ? void 0 : insuranceProviderProfile.friendlyName,
+        size: "lg"
+      })]
+    })) : jsxRuntime.jsxs("div", Object.assign({
+      css: enableInsuranceBanner_styles.styles.container
+    }, {
+      children: [jsxRuntime.jsxs("section", Object.assign({
+        css: enableInsuranceBanner_styles.styles.title
+      }, {
+        children: [jsxRuntime.jsx(carrierIcon.CarrierIcon, {
+          carrierCode: insuranceProviderProfile.provider,
+          size: giger.IconSize.SIZE_MEDIUM
+        }), jsxRuntime.jsx(giger.Typography, Object.assign({
+          variant: "subtitle2"
+        }, {
+          children: t("insurance.parcelguard.cta.title")
+        }))]
+      })), jsxRuntime.jsx(giger.Typography, Object.assign({
+        variant: "body2"
+      }, {
+        children: t("insurance.parcelguard.cta.description")
+      })), showTerms ? jsxRuntime.jsxs("section", {
+        children: [jsxRuntime.jsx(spacer.Spacer, {
+          multiplier: 1
+        }), jsxRuntime.jsx(registerFundingSourceInsuranceForm.RegisterFundingSourceInsuranceForm, {
+          insuranceProviderProfile: insuranceProviderProfile,
+          onCancel: handleCancel,
+          onSubmit: handleSubmit
+        })]
+      }) : jsxRuntime.jsx(buttonGroup.ButtonGroup, {
+        children: jsxRuntime.jsx(giger.Button, Object.assign({
+          onClick: () => setShowTerms(true),
+          variant: giger.ButtonVariant.OUTLINED
+        }, {
+          children: t("common:actions.connect")
+        }))
+      })]
+    }));
+  }
+  return null;
+};
+
+exports.EnableInsuranceBanner = EnableInsuranceBanner;

package/cjs/components/enable-insurance-banner/enable-insurance-banner.styles.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  container: theme => ({
+    border: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`,
+    borderRadius: styles$1.scopeTheme(theme).spacing(),
+    display: "flex",
+    flexDirection: "column",
+    gap: styles$1.scopeTheme(theme).spacing(),
+    lineHeight: styles$1.scopeTheme(theme).typography.lineHeight.S,
+    padding: styles$1.scopeTheme(theme).spacing()
+  }),
+  description: theme => ({
+    fontSize: styles$1.scopeTheme(theme).typography.fontSize.S
+  }),
+  link: {
+    cursor: "pointer",
+    fontWeight: "normal",
+    textDecoration: "underline"
+  },
+  successContainer: theme => ({
+    border: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`,
+    borderRadius: styles$1.scopeTheme(theme).spacing(),
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(),
+    lineHeight: styles$1.scopeTheme(theme).typography.lineHeight.S,
+    padding: styles$1.scopeTheme(theme).spacing()
+  }),
+  successMessage: theme => ({
+    display: "flex",
+    flex: 1,
+    flexDirection: "column",
+    gap: styles$1.scopeTheme(theme).spacing()
+  }),
+  title: theme => ({
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing()
+  })
+});
+
+exports.styles = styles;

package/cjs/components/enable-insurance-banner/index.cjs

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

package/cjs/components/error-display/error-display.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reload = require('../../assets/reload.cjs');
+var errorDisplay_styles = require('./error-display.styles.cjs');
+var label = require('../history/history-card/label/label.cjs');
+var linkAction = require('../link-action/link-action.cjs');
+
+const ErrorDisplay = () => jsxRuntime.jsxs("div", Object.assign({
+  css: errorDisplay_styles.styles.errorContainer
+}, {
+  children: [jsxRuntime.jsx("img", {
+    alt: "reload icon",
+    height: 24,
+    src: reload,
+    width: 24
+  }), jsxRuntime.jsx(label.Label, Object.assign({
+    spacing: 0,
+    text: "Unable To Load",
+    textProps: {
+      css: errorDisplay_styles.styles.errorHeading
+    },
+    variant: "subtitle"
+  }, {
+    children: jsxRuntime.jsx(linkAction.LinkAction, {
+      css: errorDisplay_styles.styles.errorCTA,
+      isBold: false,
+      title: "Click here to retry"
+    })
+  }))]
+}));
+
+exports.ErrorDisplay = ErrorDisplay;

package/cjs/components/error-display/error-display.styles.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  errorContainer: theme => ({
+    alignItems: "center",
+    backgroundColor: styles$1.scopeTheme(theme).palette.gray.ultraLight,
+    display: "flex",
+    flexDirection: "column",
+    paddingBottom: styles$1.scopeTheme(theme).spacing(2),
+    paddingTop: styles$1.scopeTheme(theme).spacing(2),
+    rowGap: styles$1.scopeTheme(theme).spacing(1)
+  }),
+  errorCTA: theme => ({
+    color: styles$1.scopeTheme(theme).palette.secondary.main,
+    fontSize: styles$1.scopeTheme(theme).typography.fontSize.XS,
+    lineHeight: styles$1.scopeTheme(theme).typography.lineHeight.S
+  }),
+  errorHeading: theme => ({
+    fontSize: styles$1.scopeTheme(theme).typography.fontSize.S
+  })
+});
+
+exports.styles = styles;

package/cjs/components/error-display/index.cjs

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

package/cjs/components/error-fallback/error-fallback.cjs

@@ -0,0 +1,52 @@
+'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');
+
+/**
+ * @internal
+ *
+ * # Error Fallback Component
+ *
+ * Fallback component for the Elements ErrorBoundary
+ *
+ * @see {@link ErrorFallbackProps | The props that are passed into the `<ErrorFallback />` component}
+ */
+const ErrorFallback = ({
+  error
+}) => {
+  var _a;
+  const {
+    t
+  } = reactI18next.useTranslation("common");
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      justifyContent: "center",
+      textAlign: "center",
+      width: "100%"
+    }
+  }, {
+    children: [jsxRuntime.jsx("div", Object.assign({
+      css: theme => ({
+        color: styles.scopeTheme(theme).palette.error.main,
+        marginBottom: styles.scopeTheme(theme).spacing(2)
+      })
+    }, {
+      children: jsxRuntime.jsx(giger.Icon, {
+        name: gigerTheme.IconNames.CANCEL,
+        size: giger.IconSize.SIZE_LARGE
+      })
+    })), t([typeof error === "string" ? error : (_a = error.message) !== null && _a !== void 0 ? _a : "errorMessages.unknown"])]
+  }));
+};
+
+exports.ErrorFallback = ErrorFallback;

package/cjs/components/error-fallback/index.cjs

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

package/cjs/components/error-state/error-state.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var errorState_styles = require('./error-state.styles.cjs');
+
+const ErrorState = _a => {
+  var {
+      title,
+      subtitle
+    } = _a,
+    rest = tslib.__rest(_a, ["title", "subtitle"]);
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: errorState_styles.styles.container
+  }, rest, {
+    children: [jsxRuntime.jsx(giger.Icon, {
+      css: errorState_styles.styles.icon,
+      name: gigerTheme.IconNames.ALERT,
+      size: giger.IconSize.SIZE_LARGE
+    }), jsxRuntime.jsx(giger.Typography, Object.assign({
+      variant: "heading3"
+    }, {
+      children: title
+    })), jsxRuntime.jsx("div", Object.assign({
+      css: errorState_styles.styles.subtitleContainer
+    }, {
+      children: Array.isArray(subtitle) ? subtitle.map(text => jsxRuntime.jsx(giger.Typography, Object.assign({
+        variant: "body1"
+      }, {
+        children: text
+      }))) : jsxRuntime.jsx(giger.Typography, Object.assign({
+        variant: "body1"
+      }, {
+        children: subtitle
+      }))
+    }))]
+  }));
+};
+
+exports.ErrorState = ErrorState;

package/cjs/components/error-state/error-state.styles.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  container: theme => ({
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    margin: "0 auto",
+    padding: styles$1.scopeTheme(theme).spacing(5),
+    rowGap: styles$1.scopeTheme(theme).spacing(),
+    textAlign: "center"
+  }),
+  icon: theme => ({
+    color: styles$1.scopeTheme(theme).palette.error.main
+  }),
+  subtitleContainer: {
+    display: "flex",
+    flexDirection: "column"
+  }
+});
+
+exports.styles = styles;

package/cjs/components/error-state/index.cjs

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

package/cjs/components/field/checkbox-input/checkbox-input.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var createFieldController = require('../create-field-controller.cjs');
+
+const CheckboxInputController = createFieldController.createFieldController();
+const CheckboxInput = _a => {
+  var {
+      checkboxLabel,
+      ariaLabel
+    } = _a,
+    fieldProps = tslib.__rest(_a, ["checkboxLabel", "ariaLabel"]);
+  return jsxRuntime.jsx(CheckboxInputController, Object.assign({
+    displayLabel: false
+  }, fieldProps, {
+    children: _a => {
+      var {
+          value
+        } = _a,
+        checkboxInputProps = tslib.__rest(_a, ["value"]);
+      return jsxRuntime.jsx(giger.Checkbox, Object.assign({
+        checked: value
+      }, checkboxInputProps, {
+        "aria-label": ariaLabel,
+        label: checkboxLabel
+      }));
+    }
+  }));
+};
+
+exports.CheckboxInput = CheckboxInput;

package/cjs/components/field/checkbox-input/index.cjs

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