@shipengine/elements 2.18.0 → 2.20.0

package/esm/components/collapsible-panel/collapsible-panel.js

@@ -0,0 +1,74 @@
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { useToggle } from '../../hooks/use-toggle.js';
+import { replaceSpacesWithDashes } from '../../utilities/formatString.js';
+import { Typography, Icon, IconSize } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { styles } from './collapsible-panel.styles.js';
+import { SaveStatus } from '../save-status/save-status.js';
+import { Spacer } from '../spacer/spacer.js';
+
+/**
+ * @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(initialExpanded);
+  return jsxs(Fragment, {
+    children: [jsx("section", Object.assign({
+      "aria-label": replaceSpacesWithDashes(title),
+      css: styles.getHeaderStyles(nested)
+    }, {
+      children: jsxs("button", Object.assign({
+        "aria-expanded": isExpanded,
+        css: styles.button,
+        onClick: event => {
+          event.preventDefault();
+          toggleIsExpanded();
+        }
+      }, {
+        children: [jsx(Typography, Object.assign({
+          variant: nested ? "heading5" : "heading4"
+        }, {
+          children: title
+        })), jsxs("div", Object.assign({
+          css: {
+            display: "flex"
+          }
+        }, {
+          children: [jsx(SaveStatus, {
+            errors: errors,
+            isSaving: isSaving,
+            statusSettings: statusSettings
+          }), jsx(Icon, {
+            css: styles.icon,
+            "data-testid": "collapsible-panel-dropdown",
+            name: isExpanded ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM,
+            size: IconSize.SIZE_LARGE
+          })]
+        }))]
+      }))
+    })), isExpanded && jsx("section", Object.assign({
+      css: styles.getContentStyles(nested)
+    }, {
+      children: children
+    })), !nested && jsx(Spacer, {
+      multiplier: 1
+    })]
+  });
+};
+
+export { CollapsiblePanel };

package/esm/components/collapsible-panel/collapsible-panel.styles.js

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

package/esm/components/collapsible-panel/index.js

@@ -0,0 +1 @@
+export { CollapsiblePanel } from './collapsible-panel.js';

package/esm/components/copy/copy-button.js

@@ -0,0 +1,34 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import copy from 'copy-to-clipboard';
+import { useState } from 'react';
+import { LinkAction } from '../link-action/link-action.js';
+
+/**
+ * @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] = useState(false);
+  return jsx("div", Object.assign({
+    "aria-label": "Copy to Clipboard",
+    "data-testid": "copy-button"
+  }, {
+    children: jsx(LinkAction, {
+      icon: clicked ? "checkFilled" : "copy",
+      onClick: () => {
+        copy(content);
+        setClicked(true);
+        setTimeout(() => setClicked(false), 2000);
+      },
+      title: ""
+    })
+  }));
+};
+
+export { CopyButton };

package/esm/components/copy/index.js

@@ -0,0 +1 @@
+export { CopyButton } from './copy-button.js';

package/esm/components/cube/cube.js

@@ -0,0 +1,64 @@
+import { __rest } from 'tslib';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useTheme, keyframes, css } from '@emotion/react';
+import { scopeTheme } from '../../utilities/styles.js';
+
+let _ = t => t,
+  _t;
+/**
+ * @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 = __rest(_a, ["animate"]);
+  const theme = useTheme();
+  const spin = keyframes(_t || (_t = _`
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  `));
+  const styles = {
+    content: /*#__PURE__*/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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImN1YmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCaUIiLCJmaWxlIjoiY3ViZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX3Jlc3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsganN4IGFzIF9qc3ggfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3QvanN4LXJ1bnRpbWVcIjtcclxuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMsIHVzZVRoZW1lIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XHJcbmltcG9ydCB7IHNjb3BlVGhlbWUgfSBmcm9tIFwiQHV0aWxpdGllcy9zdHlsZXNcIjtcclxuLyoqXHJcbiAqIEBpbnRlcm5hbFxyXG4gKlxyXG4gKiAjIEN1YmUgQ29tcG9uZW50XHJcbiAqXHJcbiAqIC0gVGhpcyBpcyBhIHNwaW5uaW5nIGN1YmUgdGhhdCBpcyB1c2VkIHRvIGRpc3BsYXkgYSBsb2FkaW5nIHN0YXRlLlxyXG4gKlxyXG4gKiBAc2VlIHtAbGluayBDdWJlUHJvcFR5cGVzIHwgVGhlIHByb3BzIHRoYXQgYXJlIHBhc3NlZCBpbnRvIHRoZSBgPEN1YmUgLz5gIGNvbXBvbmVudH1cclxuICovXHJcbmV4cG9ydCBjb25zdCBDdWJlID0gKF9hKSA9PiB7XHJcbiAgICB2YXIgeyBhbmltYXRlID0gZmFsc2UgfSA9IF9hLCBwcm9wcyA9IF9fcmVzdChfYSwgW1wiYW5pbWF0ZVwiXSk7XHJcbiAgICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XHJcbiAgICBjb25zdCBzcGluID0ga2V5ZnJhbWVzIGBcbiAgICBmcm9tIHtcbiAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICAgIH1cbiAgICB0byB7XG4gICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICAgIH1cbiAgYDtcclxuICAgIGNvbnN0IHN0eWxlcyA9IHtcclxuICAgICAgICBjb250ZW50OiBjc3MoT2JqZWN0LmFzc2lnbih7IGNsaXBSdWxlOiBcImV2ZW5vZGRcIiwgZmlsbFJ1bGU6IFwiZXZlbm9kZFwiLCBoZWlnaHQ6IFwiNXJlbVwiLCBzdHJva2VMaW5lSm9pbjogXCJyb3VuZFwiLCBzdHJva2VNaXRlckxpbWl0OiBcIjJcIiwgd2lkdGg6IFwiNXJlbVwiIH0sIChhbmltYXRlICYmIHsgYW5pbWF0aW9uOiBgJHtzcGlufSAxcyBsaW5lYXIgaW5maW5pdGU7YCB9KSkpLFxyXG4gICAgfTtcclxuICAgIHJldHVybiAoX2pzeChcImRpdlwiLCBPYmplY3QuYXNzaWduKHt9LCBwcm9wcywgeyByb2xlOiBcInN0YXR1c1wiIH0sIHsgY2hpbGRyZW46IF9qc3goXCJzdmdcIiwgT2JqZWN0LmFzc2lnbih7IGNzczogc3R5bGVzLmNvbnRlbnQsIGhlaWdodDogXCIxMDAlXCIsIHZpZXdCb3g6IFwiMCAwIDQ4OSA0ODlcIiwgd2lkdGg6IFwiMTAwJVwiIH0sIHsgY2hpbGRyZW46IF9qc3goXCJnXCIsIHsgY2hpbGRyZW46IF9qc3goXCJnXCIsIHsgY2hpbGRyZW46IF9qc3goXCJwYXRoXCIsIHsgZDogXCJNNDgzLjY3NCwxMDEuODM2QzQ4My42MSwxMDEuNjA0IDQ4My41MDYsMTAxLjM5NiA0ODMuNDE4LDEwMS4xOEM0ODMuMjQyLDEwMC43MjQgNDgzLjA1LDEwMC4yODQgNDgyLjc5NCw5OS44NjhDNDgyLjY1LDk5LjYzNiA0ODIuNDk4LDk5LjQyOCA0ODIuMzMsOTkuMjEyQzQ4Mi4wNTgsOTguODQ0IDQ4MS43NTQsOTguNTA4IDQ4MS40MSw5OC4xOTZDNDgxLjIxLDk4LjAwNCA0ODEuMDEsOTcuODI4IDQ4MC43ODYsOTcuNjZDNDgwLjY1OCw5Ny41NjQgNDgwLjU2Miw5Ny40NDQgNDgwLjQzNCw5Ny4zNTZDNDgwLjEzOCw5Ny4xNTYgNDc5LjgxLDk3LjA0NCA0NzkuNDk4LDk2Ljg4NEM0NzkuMzM4LDk2LjgwNCA0NzkuMjE4LDk2LjY4NCA0NzkuMDUsOTYuNjEyTDI0Ny4wNSwwLjYxMkMyNDUuMDgyLC0wLjIwNCAyNDIuODksLTAuMjA0IDI0MC45MjIsMC42MTJMOC45MjIsOTYuNjEyQzguNzU0LDk2LjY4NCA4LjYyNiw5Ni44MDQgOC40NjYsOTYuODg0QzguMTU0LDk3LjAzNiA3LjgzNCw5Ny4xNTYgNy41NDYsOTcuMzQ4QzcuNDE4LDk3LjQzNiA3LjMyMiw5Ny41NTYgNy4xOTQsOTcuNjUyQzYuOTcsOTcuODIgNi43NzgsOTguMDA0IDYuNTc4LDk4LjE4OEM2LjI0Miw5OC41IDUuOTM4LDk4LjgzNiA1LjY1OCw5OS4yMDRDNS40OSw5OS40MiA1LjMzOCw5OS42MjggNS4xOTQsOTkuODZDNC45MzgsMTAwLjI3NiA0Ljc0NiwxMDAuNzE2IDQuNTcsMTAxLjE3MkM0LjQ4MiwxMDEuMzk2IDQuMzc4LDEwMS41OTYgNC4zMTQsMTAxLjgyOEM0LjEzLDEwMi41MzIgNC4wMDIsMTAzLjI2IDQuMDAyLDEwNC4wMDRMNC4wMDIsMzg0LjAwNEM0LjAwMiwzODcuMjQ0IDUuOTU0LDM5MC4xNjQgOC45MzgsMzkxLjM5NkwyNDAuOTM4LDQ4Ny4zOTZDMjQxLjA0Miw0ODcuNDM2IDI0MS4xNTQsNDg3LjQyIDI0MS4yNTgsNDg3LjQ2QzI0Mi4xNDYsNDg3Ljc4OCAyNDMuMDU4LDQ4OC4wMDQgMjQ0LjAwMiw0ODguMDA0QzI0NC45NDYsNDg4LjAwNCAyNDUuODU4LDQ4Ny43ODggMjQ2Ljc0Niw0ODcuNDZDMjQ2Ljg1LDQ4Ny40MiAyNDYuOTYyLDQ4Ny40MzYgMjQ3LjA2Niw0ODcuMzk2TDQ3OS4wNjYsMzkxLjM5NkM0ODIuMDUsMzkwLjE2NCA0ODQuMDAyLDM4Ny4yNDQgNDg0LjAwMiwzODQuMDA0TDQ4NC4wMDIsMTA0LjAwNEM0ODQuMDAyLDEwMy4yNiA0ODMuODc0LDEwMi41MzIgNDgzLjY3NCwxMDEuODM2Wk0yMzYuMDAyLDQ2OC4wMjhMMjAuMDAyLDM3OC42NkwyMC4wMDIsMTE1Ljk3MkwyMzYuMDAyLDIwNS4zNDhMMjM2LjAwMiw0NjguMDI4Wk0yNDQuMDAyLDE5MS4zNDhMMzIuOTIyLDEwNC4wMDRMMjQ0LjAwMiwxNi42Nkw0NTUuMDgyLDEwNC4wMDRMMjQ0LjAwMiwxOTEuMzQ4Wk00NjguMDAyLDM3OC42NkwyNTIuMDAyLDQ2OC4wMzZMMjUyLjAwMiwyMDUuMzQ4TDQ2OC4wMDIsMTE1Ljk3Mkw0NjguMDAyLDM3OC42NlpcIiwgZmlsbDogc2NvcGVUaGVtZSh0aGVtZSkucGFsZXR0ZS5wcmltYXJ5Lm1haW4gfSkgfSkgfSkgfSkpIH0pKSk7XHJcbn07XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPWN1YmUuanMubWFwIl19 */")
+  };
+  return jsx("div", Object.assign({}, props, {
+    role: "status"
+  }, {
+    children: jsx("svg", Object.assign({
+      css: styles.content,
+      height: "100%",
+      viewBox: "0 0 489 489",
+      width: "100%"
+    }, {
+      children: jsx("g", {
+        children: jsx("g", {
+          children: 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: scopeTheme(theme).palette.primary.main
+          })
+        })
+      })
+    }))
+  }));
+};
+
+export { Cube };

package/esm/components/cube/index.js

@@ -0,0 +1 @@
+export { Cube } from './cube.js';

package/esm/components/disclosure/disclosure.js

@@ -0,0 +1,48 @@
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { Icon } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { styles } from './disclosure.styles.js';
+
+const Disclosure = ({
+  children,
+  label,
+  onToggle,
+  open,
+  showToggle: _showToggle = true
+}) => {
+  const [isOpen, setIsOpen] = useState(open);
+  // Flip internal state if externally managed state changes
+  useEffect(() => {
+    setIsOpen(open);
+  }, [open]);
+  return jsxs(Fragment, {
+    children: [jsxs("div", Object.assign({
+      css: styles.container
+    }, {
+      children: [jsx("div", {
+        children: label
+      }), _showToggle && jsx("button", Object.assign({
+        "aria-expanded": isOpen,
+        "aria-label": isOpen ? "Collapse" : "Expand",
+        css: styles.toggle,
+        onClick: () => {
+          setIsOpen(!isOpen);
+          onToggle(!isOpen);
+        },
+        type: "button"
+      }, {
+        children: jsx(Icon, {
+          css: styles.icon,
+          name: isOpen ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM
+        })
+      }))]
+    })), isOpen && jsx("div", Object.assign({
+      css: styles.content
+    }, {
+      children: typeof children === "function" ? children(() => setIsOpen(!isOpen)) : children
+    }))]
+  });
+};
+
+export { Disclosure };

package/esm/components/disclosure/disclosure.styles.js

@@ -0,0 +1,27 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  container: theme => ({
+    display: "flex",
+    gap: scopeTheme(theme).spacing()
+  }),
+  content: theme => ({
+    backgroundColor: scopeTheme(theme).palette.gray.ultraLight,
+    maxWidth: "100%",
+    padding: scopeTheme(theme).spacing(2),
+    [scopeTheme(theme).mediaQuery("tablet")]: {
+      maxWidth: "max-content"
+    }
+  }),
+  icon: theme => ({
+    color: scopeTheme(theme).getComponent("Link").defaultColor
+  }),
+  toggle: {
+    backgroundColor: "transparent",
+    border: 0,
+    cursor: "pointer",
+    padding: 0
+  }
+});
+
+export { styles };

package/esm/components/disclosure/index.js

@@ -0,0 +1 @@
+export { Disclosure } from './disclosure.js';

package/esm/components/display-term/display-term.js

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

package/esm/components/display-term/display-term.styles.js

@@ -0,0 +1,29 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  container: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: scopeTheme(theme).spacing(2),
+    padding: `${scopeTheme(theme).spacing(1)}px 0`
+  }),
+  link: theme => ({
+    "&:visited": {
+      color: scopeTheme(theme).palette.secondary.main
+    },
+    fontWeight: scopeTheme(theme).typography.fontWeight.normal
+  }),
+  termLink: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: scopeTheme(theme).spacing(1),
+    listStyle: "none"
+  }),
+  terms: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: scopeTheme(theme).spacing(1)
+  })
+});
+
+export { styles };

package/esm/components/display-term/index.js

@@ -0,0 +1 @@
+export { DisplayTerm } from './display-term.js';

package/esm/components/drawer/drawer.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useRef, useLayoutEffect } from 'react';
+import { Icon } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { styles } from './drawer.styles.js';
+
+const Drawer = ({
+  children,
+  headerContent,
+  isOpen,
+  toggleDrawer
+}) => {
+  const drawerRef = useRef(null);
+  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 jsxs("div", Object.assign({
+    "aria-label": "Drawer",
+    css: styles.getDrawerStyles(isOpen),
+    ref: drawerRef
+  }, {
+    children: [jsxs("header", Object.assign({
+      "aria-expanded": isOpen,
+      css: styles.headerStyles
+    }, {
+      children: [jsx("div", Object.assign({
+        onClick: toggleDrawer,
+        onKeyDown: event => {
+          if (event.key === "Enter") {
+            toggleDrawer();
+          }
+        },
+        role: "button",
+        tabIndex: 0
+      }, {
+        children: jsx(Icon, {
+          css: {
+            transform: `rotate(${isOpen ? "-90" : "90"}deg)`
+          },
+          name: IconNames.PAGINATION_LEFT
+        })
+      })), headerContent]
+    })), jsx("div", Object.assign({
+      "aria-labelledby": "drawer",
+      css: styles.getChildrenStyles(isOpen),
+      role: "region"
+    }, {
+      children: children
+    }))]
+  }));
+};
+
+export { Drawer };

package/esm/components/drawer/drawer.styles.js

@@ -0,0 +1,31 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  container: {
+    backgroundColor: "#11003A"
+  },
+  getChildrenStyles: isOpen => theme => ({
+    height: isOpen ? "90%" : "0",
+    overflow: "scroll",
+    paddingBottom: scopeTheme(theme).spacing(2)
+  }),
+  getDrawerStyles: isOpen => theme => ({
+    backgroundColor: "#11003A",
+    bottom: 0,
+    height: isOpen ? "50%" : `${scopeTheme(theme).spacing(6)}px`,
+    minWidth: "375px",
+    position: "fixed",
+    transformOrigin: "bottom",
+    transition: "height 0.5s;"
+  }),
+  headerStyles: theme => ({
+    alignItems: "center",
+    color: "#fff",
+    display: "flex",
+    height: scopeTheme(theme).spacing(6),
+    justifyContent: "space-between",
+    padding: scopeTheme(theme).spacing(1)
+  })
+});
+
+export { styles };

package/esm/components/drawer/index.js

@@ -0,0 +1 @@
+export { Drawer } from './drawer.js';

package/esm/components/enable-insurance-banner/enable-insurance-banner.js

@@ -0,0 +1,100 @@
+import { __awaiter } from 'tslib';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useTranslation, Trans } from 'react-i18next';
+import { Typography, Link, IconSize, Button, ButtonVariant } from '@shipengine/giger';
+import { styles } from './enable-insurance-banner.styles.js';
+import { CarrierLogo } from '../carrier-logo/carrier-logo.js';
+import { RegisterFundingSourceInsuranceForm } from '../forms/register-funding-source-insurance-form/register-funding-source-insurance-form.js';
+import { CarrierIcon } from '../carrier-icon/carrier-icon.js';
+import { Spacer } from '../spacer/spacer.js';
+import { ButtonGroup } from '../button-group/button-group.js';
+
+const EnableInsuranceBanner = ({
+  insuranceProviderProfile,
+  onSubmit
+}) => {
+  const {
+    t
+  } = useTranslation("view-shipment");
+  const [showTerms, setShowTerms] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+  const handleCancel = useCallback(() => {
+    setShowTerms(false);
+  }, []);
+  const handleSubmit = useCallback(() => __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 ? jsxs("div", Object.assign({
+      css: styles.successContainer
+    }, {
+      children: [jsxs("div", Object.assign({
+        css: styles.successMessage
+      }, {
+        children: [jsx(Typography, Object.assign({
+          variant: "subtitle2"
+        }, {
+          children: t("insurance.parcelguard.registerSuccess.title")
+        })), jsx("div", Object.assign({
+          css: styles.description
+        }, {
+          children: jsxs(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", jsx(Link, Object.assign({
+              "aria-label": "Learn More about ParcelGuard",
+              css: styles.link
+            }, {
+              children: "Learn more."
+            }))]
+          }))
+        }))]
+      })), jsx(CarrierLogo, {
+        carrierCode: insuranceProviderProfile === null || insuranceProviderProfile === void 0 ? void 0 : insuranceProviderProfile.provider,
+        carrierName: insuranceProviderProfile === null || insuranceProviderProfile === void 0 ? void 0 : insuranceProviderProfile.friendlyName,
+        size: "lg"
+      })]
+    })) : jsxs("div", Object.assign({
+      css: styles.container
+    }, {
+      children: [jsxs("section", Object.assign({
+        css: styles.title
+      }, {
+        children: [jsx(CarrierIcon, {
+          carrierCode: insuranceProviderProfile.provider,
+          size: IconSize.SIZE_MEDIUM
+        }), jsx(Typography, Object.assign({
+          variant: "subtitle2"
+        }, {
+          children: t("insurance.parcelguard.cta.title")
+        }))]
+      })), jsx(Typography, Object.assign({
+        variant: "body2"
+      }, {
+        children: t("insurance.parcelguard.cta.description")
+      })), showTerms ? jsxs("section", {
+        children: [jsx(Spacer, {
+          multiplier: 1
+        }), jsx(RegisterFundingSourceInsuranceForm, {
+          insuranceProviderProfile: insuranceProviderProfile,
+          onCancel: handleCancel,
+          onSubmit: handleSubmit
+        })]
+      }) : jsx(ButtonGroup, {
+        children: jsx(Button, Object.assign({
+          onClick: () => setShowTerms(true),
+          variant: ButtonVariant.OUTLINED
+        }, {
+          children: t("common:actions.connect")
+        }))
+      })]
+    }));
+  }
+  return null;
+};
+
+export { EnableInsuranceBanner };

package/esm/components/enable-insurance-banner/enable-insurance-banner.styles.js

@@ -0,0 +1,41 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  container: theme => ({
+    border: `1px solid ${scopeTheme(theme).palette.gray.light}`,
+    borderRadius: scopeTheme(theme).spacing(),
+    display: "flex",
+    flexDirection: "column",
+    gap: scopeTheme(theme).spacing(),
+    lineHeight: scopeTheme(theme).typography.lineHeight.S,
+    padding: scopeTheme(theme).spacing()
+  }),
+  description: theme => ({
+    fontSize: scopeTheme(theme).typography.fontSize.S
+  }),
+  link: {
+    cursor: "pointer",
+    fontWeight: "normal",
+    textDecoration: "underline"
+  },
+  successContainer: theme => ({
+    border: `1px solid ${scopeTheme(theme).palette.gray.light}`,
+    borderRadius: scopeTheme(theme).spacing(),
+    display: "flex",
+    gap: scopeTheme(theme).spacing(),
+    lineHeight: scopeTheme(theme).typography.lineHeight.S,
+    padding: scopeTheme(theme).spacing()
+  }),
+  successMessage: theme => ({
+    display: "flex",
+    flex: 1,
+    flexDirection: "column",
+    gap: scopeTheme(theme).spacing()
+  }),
+  title: theme => ({
+    display: "flex",
+    gap: scopeTheme(theme).spacing()
+  })
+});
+
+export { styles };

package/esm/components/enable-insurance-banner/index.js

@@ -0,0 +1 @@
+export { EnableInsuranceBanner } from './enable-insurance-banner.js';

package/esm/components/error-display/error-display.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import ReloadIcon from '../../assets/reload.js';
+import { styles } from './error-display.styles.js';
+import { Label } from '../history/history-card/label/label.js';
+import { LinkAction } from '../link-action/link-action.js';
+
+const ErrorDisplay = () => jsxs("div", Object.assign({
+  css: styles.errorContainer
+}, {
+  children: [jsx("img", {
+    alt: "reload icon",
+    height: 24,
+    src: ReloadIcon,
+    width: 24
+  }), jsx(Label, Object.assign({
+    spacing: 0,
+    text: "Unable To Load",
+    textProps: {
+      css: styles.errorHeading
+    },
+    variant: "subtitle"
+  }, {
+    children: jsx(LinkAction, {
+      css: styles.errorCTA,
+      isBold: false,
+      title: "Click here to retry"
+    })
+  }))]
+}));
+
+export { ErrorDisplay };

package/esm/components/error-display/error-display.styles.js

@@ -0,0 +1,23 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  errorContainer: theme => ({
+    alignItems: "center",
+    backgroundColor: scopeTheme(theme).palette.gray.ultraLight,
+    display: "flex",
+    flexDirection: "column",
+    paddingBottom: scopeTheme(theme).spacing(2),
+    paddingTop: scopeTheme(theme).spacing(2),
+    rowGap: scopeTheme(theme).spacing(1)
+  }),
+  errorCTA: theme => ({
+    color: scopeTheme(theme).palette.secondary.main,
+    fontSize: scopeTheme(theme).typography.fontSize.XS,
+    lineHeight: scopeTheme(theme).typography.lineHeight.S
+  }),
+  errorHeading: theme => ({
+    fontSize: scopeTheme(theme).typography.fontSize.S
+  })
+});
+
+export { styles };

package/esm/components/error-display/index.js

@@ -0,0 +1 @@
+export { ErrorDisplay } from './error-display.js';