@shipengine/elements 2.22.0 → 2.24.1

package/dist/cjs/components/collapsible-panel/collapsible-panel.cjs

@@ -0,0 +1,70 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useToggle = require('../../hooks/use-toggle.cjs');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var formatString = require('../../utilities/formatString.cjs');
+var collapsiblePanel_styles = require('./collapsible-panel.styles.cjs');
+var saveStatus = require('../save-status/save-status.cjs');
+var spacer = require('../spacer/spacer.cjs');
+
+/**
+ * @internal
+ *
+ * # Collapsible Panel Component
+ *
+ * - The `<CollapsiblePanel />` composition component is used to group content together that can
+ * be expanded or collapsed.
+ *
+ * @see {@link CollapsiblePanelProps | The props that are passed into the `<CollapsiblePanel />` component}
+ */
+const CollapsiblePanel = ({
+  errors,
+  initialExpanded,
+  isSaving,
+  nested,
+  children,
+  title,
+  statusSettings
+}) => {
+  const [isExpanded, toggleIsExpanded] = useToggle.useToggle(initialExpanded);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx("section", {
+      "aria-label": formatString.replaceSpacesWithDashes(title),
+      css: collapsiblePanel_styles.styles.getHeaderStyles(nested),
+      children: jsxRuntime.jsxs("button", {
+        "aria-expanded": isExpanded,
+        css: collapsiblePanel_styles.styles.button,
+        onClick: event => {
+          event.preventDefault();
+          toggleIsExpanded();
+        },
+        children: [jsxRuntime.jsx(giger.Typography, {
+          variant: nested ? "heading5" : "heading4",
+          children: title
+        }), jsxRuntime.jsxs("div", {
+          css: {
+            display: "flex"
+          },
+          children: [jsxRuntime.jsx(saveStatus.SaveStatus, {
+            errors: errors,
+            isSaving: isSaving,
+            statusSettings: statusSettings
+          }), jsxRuntime.jsx(giger.Icon, {
+            "data-testid": "collapsible-panel-dropdown",
+            name: isExpanded ? gigerTheme.IconNames.CHEVRON_TOP : gigerTheme.IconNames.CHEVRON_BOTTOM,
+            size: giger.IconSize.SIZE_LARGE
+          })]
+        })]
+      })
+    }), isExpanded && jsxRuntime.jsx("section", {
+      css: collapsiblePanel_styles.styles.getContentStyles(nested),
+      children: children
+    }), !nested && jsxRuntime.jsx(spacer.Spacer, {
+      multiplier: 1
+    })]
+  });
+};
+
+exports.CollapsiblePanel = CollapsiblePanel;

package/dist/cjs/components/collapsible-panel/collapsible-panel.styles.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  button: theme => ({
+    alignItems: "center",
+    backgroundColor: "transparent",
+    color: styles$1.scopeTheme(theme).palette.gray.main,
+    display: "flex",
+    fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.normal,
+    justifyContent: "space-between",
+    padding: 0,
+    width: "100%"
+  }),
+  getContentStyles: nested => theme => ({
+    padding: styles$1.scopeTheme(theme).spacing(nested ? 1 : 3)
+  }),
+  getHeaderStyles: nested => theme => ({
+    backgroundColor: nested ? "none" : styles$1.scopeTheme(theme).palette.gray.ultraLight,
+    display: "flex",
+    padding: nested ? `${styles$1.scopeTheme(theme).spacing(0.75)}px 0` : `${styles$1.scopeTheme(theme).spacing(0.75)}px ${styles$1.scopeTheme(theme).spacing(4)}px`
+  })
+});
+
+exports.styles = styles;

package/dist/cjs/components/collapsible-panel/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var collapsiblePanel = require('./collapsible-panel.cjs');
+
+
+
+exports.CollapsiblePanel = collapsiblePanel.CollapsiblePanel;

package/dist/cjs/components/copy/copy-button.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+var _tslib = require('../../_virtual/_tslib.cjs');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var linkAction = require('../link-action/link-action.cjs');
+
+/**
+ * @internal
+ *
+ * # Copy Button
+ *
+ * A copy button that copies the content to the users' clipboard and displays a
+ * checkmark on click.
+ */
+const CopyButton = ({
+  content
+}) => {
+  const [clicked, setClicked] = React.useState(false);
+  const copy = React.useCallback(content => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    try {
+      yield navigator.clipboard.writeText(content);
+    } catch (error) {
+      console.error("Failed to copy content: ", error);
+    }
+  }), []);
+  return jsxRuntime.jsx("div", {
+    "aria-label": "Copy to Clipboard",
+    "data-testid": "copy-button",
+    children: jsxRuntime.jsx(linkAction.LinkAction, {
+      icon: clicked ? "checkFilled" : "copy",
+      onClick: () => {
+        setClicked(true);
+        copy(content).catch(e => console.error(e));
+      },
+      title: ""
+    })
+  });
+};
+
+exports.CopyButton = CopyButton;

package/dist/cjs/components/copy/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var copyButton = require('./copy-button.cjs');
+
+
+
+exports.CopyButton = copyButton.CopyButton;

package/dist/cjs/components/cube/cube.cjs

@@ -0,0 +1,62 @@
+'use strict';
+
+var _tslib = require('../../_virtual/_tslib.cjs');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var styles = require('../../utilities/styles.cjs');
+
+/**
+ * @internal
+ *
+ * # Cube Component
+ *
+ * - This is a spinning cube that is used to display a loading state.
+ *
+ * @see {@link CubePropTypes | The props that are passed into the `<Cube />` component}
+ */
+const Cube = _a => {
+  var {
+      animate = false
+    } = _a,
+    props = _tslib.__rest(_a, ["animate"]);
+  const theme = react.useTheme(); // TODO fix type escape hatch
+  const spin = react.keyframes`
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  `;
+  const styles$1 = {
+    content: /*#__PURE__*/react.css(Object.assign({
+      clipRule: "evenodd",
+      fillRule: "evenodd",
+      height: "5rem",
+      strokeLineJoin: "round",
+      strokeMiterLimit: "2",
+      width: "5rem"
+    }, animate && {
+      animation: `${spin} 1s linear infinite;`
+    }), process.env.NODE_ENV === "production" ? "" : ";label:content;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImN1YmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCaUIiLCJmaWxlIjoiY3ViZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX3Jlc3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCB7IGpzeCBhcyBfanN4IH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0L2pzeC1ydW50aW1lXCI7XG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcywgdXNlVGhlbWUgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7IHNjb3BlVGhlbWUgfSBmcm9tIFwiQHV0aWxpdGllcy9zdHlsZXNcIjtcbi8qKlxuICogQGludGVybmFsXG4gKlxuICogIyBDdWJlIENvbXBvbmVudFxuICpcbiAqIC0gVGhpcyBpcyBhIHNwaW5uaW5nIGN1YmUgdGhhdCBpcyB1c2VkIHRvIGRpc3BsYXkgYSBsb2FkaW5nIHN0YXRlLlxuICpcbiAqIEBzZWUge0BsaW5rIEN1YmVQcm9wVHlwZXMgfCBUaGUgcHJvcHMgdGhhdCBhcmUgcGFzc2VkIGludG8gdGhlIGA8Q3ViZSAvPmAgY29tcG9uZW50fVxuICovXG5leHBvcnQgY29uc3QgQ3ViZSA9IChfYSkgPT4ge1xuICAgIHZhciB7IGFuaW1hdGUgPSBmYWxzZSB9ID0gX2EsIHByb3BzID0gX19yZXN0KF9hLCBbXCJhbmltYXRlXCJdKTtcbiAgICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7IC8vIFRPRE8gZml4IHR5cGUgZXNjYXBlIGhhdGNoXG4gICAgY29uc3Qgc3BpbiA9IGtleWZyYW1lcyBgXG4gICAgZnJvbSB7XG4gICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgICB9XG4gICAgdG8ge1xuICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcbiAgICB9XG4gIGA7XG4gICAgY29uc3Qgc3R5bGVzID0ge1xuICAgICAgICBjb250ZW50OiBjc3MoT2JqZWN0LmFzc2lnbih7IGNsaXBSdWxlOiBcImV2ZW5vZGRcIiwgZmlsbFJ1bGU6IFwiZXZlbm9kZFwiLCBoZWlnaHQ6IFwiNXJlbVwiLCBzdHJva2VMaW5lSm9pbjogXCJyb3VuZFwiLCBzdHJva2VNaXRlckxpbWl0OiBcIjJcIiwgd2lkdGg6IFwiNXJlbVwiIH0sIChhbmltYXRlICYmIHsgYW5pbWF0aW9uOiBgJHtzcGlufSAxcyBsaW5lYXIgaW5maW5pdGU7YCB9KSkpLFxuICAgIH07XG4gICAgcmV0dXJuIChfanN4KFwiZGl2XCIsIE9iamVjdC5hc3NpZ24oe30sIHByb3BzLCB7IHJvbGU6IFwic3RhdHVzXCIsIGNoaWxkcmVuOiBfanN4KFwic3ZnXCIsIHsgY3NzOiBzdHlsZXMuY29udGVudCwgaGVpZ2h0OiBcIjEwMCVcIiwgdmlld0JveDogXCIwIDAgNDg5IDQ4OVwiLCB3aWR0aDogXCIxMDAlXCIsIGNoaWxkcmVuOiBfanN4KFwiZ1wiLCB7IGNoaWxkcmVuOiBfanN4KFwiZ1wiLCB7IGNoaWxkcmVuOiBfanN4KFwicGF0aFwiLCB7IGQ6IFwiTTQ4My42NzQsMTAxLjgzNkM0ODMuNjEsMTAxLjYwNCA0ODMuNTA2LDEwMS4zOTYgNDgzLjQxOCwxMDEuMThDNDgzLjI0MiwxMDAuNzI0IDQ4My4wNSwxMDAuMjg0IDQ4Mi43OTQsOTkuODY4QzQ4Mi42NSw5OS42MzYgNDgyLjQ5OCw5OS40MjggNDgyLjMzLDk5LjIxMkM0ODIuMDU4LDk4Ljg0NCA0ODEuNzU0LDk4LjUwOCA0ODEuNDEsOTguMTk2QzQ4MS4yMSw5OC4wMDQgNDgxLjAxLDk3LjgyOCA0ODAuNzg2LDk3LjY2QzQ4MC42NTgsOTcuNTY0IDQ4MC41NjIsOTcuNDQ0IDQ4MC40MzQsOTcuMzU2QzQ4MC4xMzgsOTcuMTU2IDQ3OS44MSw5Ny4wNDQgNDc5LjQ5OCw5Ni44ODRDNDc5LjMzOCw5Ni44MDQgNDc5LjIxOCw5Ni42ODQgNDc5LjA1LDk2LjYxMkwyNDcuMDUsMC42MTJDMjQ1LjA4MiwtMC4yMDQgMjQyLjg5LC0wLjIwNCAyNDAuOTIyLDAuNjEyTDguOTIyLDk2LjYxMkM4Ljc1NCw5Ni42ODQgOC42MjYsOTYuODA0IDguNDY2LDk2Ljg4NEM4LjE1NCw5Ny4wMzYgNy44MzQsOTcuMTU2IDcuNTQ2LDk3LjM0OEM3LjQxOCw5Ny40MzYgNy4zMjIsOTcuNTU2IDcuMTk0LDk3LjY1MkM2Ljk3LDk3LjgyIDYuNzc4LDk4LjAwNCA2LjU3OCw5OC4xODhDNi4yNDIsOTguNSA1LjkzOCw5OC44MzYgNS42NTgsOTkuMjA0QzUuNDksOTkuNDIgNS4zMzgsOTkuNjI4IDUuMTk0LDk5Ljg2QzQuOTM4LDEwMC4yNzYgNC43NDYsMTAwLjcxNiA0LjU3LDEwMS4xNzJDNC40ODIsMTAxLjM5NiA0LjM3OCwxMDEuNTk2IDQuMzE0LDEwMS44MjhDNC4xMywxMDIuNTMyIDQuMDAyLDEwMy4yNiA0LjAwMiwxMDQuMDA0TDQuMDAyLDM4NC4wMDRDNC4wMDIsMzg3LjI0NCA1Ljk1NCwzOTAuMTY0IDguOTM4LDM5MS4zOTZMMjQwLjkzOCw0ODcuMzk2QzI0MS4wNDIsNDg3LjQzNiAyNDEuMTU0LDQ4Ny40MiAyNDEuMjU4LDQ4Ny40NkMyNDIuMTQ2LDQ4Ny43ODggMjQzLjA1OCw0ODguMDA0IDI0NC4wMDIsNDg4LjAwNEMyNDQuOTQ2LDQ4OC4wMDQgMjQ1Ljg1OCw0ODcuNzg4IDI0Ni43NDYsNDg3LjQ2QzI0Ni44NSw0ODcuNDIgMjQ2Ljk2Miw0ODcuNDM2IDI0Ny4wNjYsNDg3LjM5Nkw0NzkuMDY2LDM5MS4zOTZDNDgyLjA1LDM5MC4xNjQgNDg0LjAwMiwzODcuMjQ0IDQ4NC4wMDIsMzg0LjAwNEw0ODQuMDAyLDEwNC4wMDRDNDg0LjAwMiwxMDMuMjYgNDgzLjg3NCwxMDIuNTMyIDQ4My42NzQsMTAxLjgzNlpNMjM2LjAwMiw0NjguMDI4TDIwLjAwMiwzNzguNjZMMjAuMDAyLDExNS45NzJMMjM2LjAwMiwyMDUuMzQ4TDIzNi4wMDIsNDY4LjAyOFpNMjQ0LjAwMiwxOTEuMzQ4TDMyLjkyMiwxMDQuMDA0TDI0NC4wMDIsMTYuNjZMNDU1LjA4MiwxMDQuMDA0TDI0NC4wMDIsMTkxLjM0OFpNNDY4LjAwMiwzNzguNjZMMjUyLjAwMiw0NjguMDM2TDI1Mi4wMDIsMjA1LjM0OEw0NjguMDAyLDExNS45NzJMNDY4LjAwMiwzNzguNjZaXCIsIGZpbGw6IHNjb3BlVGhlbWUodGhlbWUpLnBhbGV0dGUucHJpbWFyeS5tYWluIH0pIH0pIH0pIH0pIH0pKSk7XG59O1xuLy8jIHNvdXJjZU1hcHBpbmdVUkw9Y3ViZS5qcy5tYXAiXX0= */")
+  };
+  return jsxRuntime.jsx("div", Object.assign({}, props, {
+    role: "status",
+    children: jsxRuntime.jsx("svg", {
+      css: styles$1.content,
+      height: "100%",
+      viewBox: "0 0 489 489",
+      width: "100%",
+      children: jsxRuntime.jsx("g", {
+        children: jsxRuntime.jsx("g", {
+          children: jsxRuntime.jsx("path", {
+            d: "M483.674,101.836C483.61,101.604 483.506,101.396 483.418,101.18C483.242,100.724 483.05,100.284 482.794,99.868C482.65,99.636 482.498,99.428 482.33,99.212C482.058,98.844 481.754,98.508 481.41,98.196C481.21,98.004 481.01,97.828 480.786,97.66C480.658,97.564 480.562,97.444 480.434,97.356C480.138,97.156 479.81,97.044 479.498,96.884C479.338,96.804 479.218,96.684 479.05,96.612L247.05,0.612C245.082,-0.204 242.89,-0.204 240.922,0.612L8.922,96.612C8.754,96.684 8.626,96.804 8.466,96.884C8.154,97.036 7.834,97.156 7.546,97.348C7.418,97.436 7.322,97.556 7.194,97.652C6.97,97.82 6.778,98.004 6.578,98.188C6.242,98.5 5.938,98.836 5.658,99.204C5.49,99.42 5.338,99.628 5.194,99.86C4.938,100.276 4.746,100.716 4.57,101.172C4.482,101.396 4.378,101.596 4.314,101.828C4.13,102.532 4.002,103.26 4.002,104.004L4.002,384.004C4.002,387.244 5.954,390.164 8.938,391.396L240.938,487.396C241.042,487.436 241.154,487.42 241.258,487.46C242.146,487.788 243.058,488.004 244.002,488.004C244.946,488.004 245.858,487.788 246.746,487.46C246.85,487.42 246.962,487.436 247.066,487.396L479.066,391.396C482.05,390.164 484.002,387.244 484.002,384.004L484.002,104.004C484.002,103.26 483.874,102.532 483.674,101.836ZM236.002,468.028L20.002,378.66L20.002,115.972L236.002,205.348L236.002,468.028ZM244.002,191.348L32.922,104.004L244.002,16.66L455.082,104.004L244.002,191.348ZM468.002,378.66L252.002,468.036L252.002,205.348L468.002,115.972L468.002,378.66Z",
+            fill: styles.scopeTheme(theme).palette.primary.main
+          })
+        })
+      })
+    })
+  }));
+};
+
+exports.Cube = Cube;

package/dist/cjs/components/cube/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var cube = require('./cube.cjs');
+
+
+
+exports.Cube = cube.Cube;

package/dist/cjs/components/disclosure/disclosure.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var React = require('react');
+var disclosure_styles = require('./disclosure.styles.cjs');
+
+const Disclosure = ({
+  children,
+  label,
+  onToggle,
+  open,
+  showToggle = true
+}) => {
+  const [isOpen, setIsOpen] = React.useState(open);
+  // Flip internal state if externally managed state changes
+  React.useEffect(() => {
+    setIsOpen(open);
+  }, [open]);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs("div", {
+      css: disclosure_styles.styles.container,
+      children: [jsxRuntime.jsx("div", {
+        children: label
+      }), showToggle && jsxRuntime.jsx("button", {
+        "aria-expanded": isOpen,
+        "aria-label": isOpen ? "Collapse" : "Expand",
+        css: disclosure_styles.styles.toggle,
+        onClick: () => {
+          setIsOpen(!isOpen);
+          onToggle(!isOpen);
+        },
+        type: "button",
+        children: jsxRuntime.jsx(giger.Icon, {
+          name: isOpen ? gigerTheme.IconNames.CHEVRON_TOP : gigerTheme.IconNames.CHEVRON_BOTTOM,
+          size: giger.IconSize.SIZE_SMALL
+        })
+      })]
+    }), isOpen && jsxRuntime.jsx("div", {
+      css: disclosure_styles.styles.content,
+      children: typeof children === "function" ? children(() => setIsOpen(!isOpen)) : children
+    })]
+  });
+};
+
+exports.Disclosure = Disclosure;

package/dist/cjs/components/disclosure/disclosure.styles.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  container: theme => ({
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(0.5),
+    paddingBottom: styles$1.scopeTheme(theme).spacing(1)
+  }),
+  content: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.gray.ultraLight,
+    maxWidth: "100%",
+    padding: styles$1.scopeTheme(theme).spacing(2),
+    [styles$1.scopeTheme(theme).mediaQuery("tablet")]: {
+      maxWidth: "max-content"
+    }
+  }),
+  toggle: {
+    backgroundColor: "transparent",
+    border: 0,
+    cursor: "pointer",
+    lineHeight: 0,
+    padding: 0
+  }
+});
+
+exports.styles = styles;

package/dist/cjs/components/disclosure/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var disclosure = require('./disclosure.cjs');
+
+
+
+exports.Disclosure = disclosure.Disclosure;

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

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var jsBase64 = require('js-base64');
+var reactI18next = require('react-i18next');
+var displayTerm_styles = require('./display-term.styles.cjs');
+
+const DisplayTerm = ({
+  term
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  return jsxRuntime.jsx("ul", {
+    css: displayTerm_styles.styles.container,
+    children: term.links.map(({
+      link,
+      title
+    }) => jsxRuntime.jsx("li", {
+      css: displayTerm_styles.styles.termLink,
+      children: jsxRuntime.jsxs(giger.Link, {
+        css: displayTerm_styles.styles.link,
+        "data-testid": "terms-link",
+        href: link,
+        target: "_blank",
+        title: "Opens in a new window",
+        children: [t(`onboarding:termsAndAgreementTitles.${jsBase64.encode(title)}`, {
+          defaultValue: title
+        }), " ", jsxRuntime.jsx(giger.Icon, {
+          name: gigerTheme.IconNames.NEW_WINDOW,
+          size: giger.IconSize.SIZE_SMALL
+        })]
+      })
+    }, title))
+  });
+};
+
+exports.DisplayTerm = DisplayTerm;

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

@@ -0,0 +1,31 @@
+'use strict';
+
+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/dist/cjs/components/display-term/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var displayTerm = require('./display-term.cjs');
+
+
+
+exports.DisplayTerm = displayTerm.DisplayTerm;

package/dist/cjs/components/drawer/drawer.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var React = require('react');
+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", {
+    "aria-label": "Drawer",
+    css: drawer_styles.styles.getDrawerStyles(isOpen),
+    ref: drawerRef,
+    children: [jsxRuntime.jsxs("header", {
+      "aria-expanded": isOpen,
+      css: drawer_styles.styles.headerStyles,
+      children: [jsxRuntime.jsx("div", {
+        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", {
+      "aria-labelledby": "drawer",
+      css: drawer_styles.styles.getChildrenStyles(isOpen),
+      role: "region",
+      children: children
+    })]
+  });
+};
+
+exports.Drawer = Drawer;

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

@@ -0,0 +1,33 @@
+'use strict';
+
+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/dist/cjs/components/drawer/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var drawer = require('./drawer.cjs');
+
+
+
+exports.Drawer = drawer.Drawer;

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

@@ -0,0 +1,91 @@
+'use strict';
+
+var _tslib = require('../../_virtual/_tslib.cjs');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var React = require('react');
+var reactI18next = require('react-i18next');
+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", {
+      css: enableInsuranceBanner_styles.styles.successContainer,
+      children: [jsxRuntime.jsxs("div", {
+        css: enableInsuranceBanner_styles.styles.successMessage,
+        children: [jsxRuntime.jsx(giger.Typography, {
+          variant: "subtitle2",
+          children: t("insurance.parcelguard.registerSuccess.title")
+        }), jsxRuntime.jsx("div", {
+          css: enableInsuranceBanner_styles.styles.description,
+          children: jsxRuntime.jsxs(reactI18next.Trans, {
+            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, {
+              "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", {
+      css: enableInsuranceBanner_styles.styles.container,
+      children: [jsxRuntime.jsxs("section", {
+        css: enableInsuranceBanner_styles.styles.title,
+        children: [jsxRuntime.jsx(carrierIcon.CarrierIcon, {
+          carrierCode: insuranceProviderProfile.provider,
+          size: giger.IconSize.SIZE_MEDIUM
+        }), jsxRuntime.jsx(giger.Typography, {
+          variant: "subtitle2",
+          children: t("insurance.parcelguard.cta.title")
+        })]
+      }), jsxRuntime.jsx(giger.Typography, {
+        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, {
+          onClick: () => setShowTerms(true),
+          variant: giger.ButtonVariant.OUTLINED,
+          children: t("common:actions.connect")
+        })
+      })]
+    });
+  }
+  return null;
+};
+
+exports.EnableInsuranceBanner = EnableInsuranceBanner;

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

@@ -0,0 +1,43 @@
+'use strict';
+
+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/dist/cjs/components/enable-insurance-banner/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var enableInsuranceBanner = require('./enable-insurance-banner.cjs');
+
+
+
+exports.EnableInsuranceBanner = enableInsuranceBanner.EnableInsuranceBanner;