@shipengine/elements 2.23.0 → 2.25.0

package/dist/esm/components/grid-filters/components/tracking-status-filter/tracking-status-filter.js

@@ -0,0 +1,222 @@
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { Button, ButtonVariant, Icon, IconSize, Popover } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { validationResolver } from '../../../../utilities/validation.js';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import * as reactUse from 'react-use';
+import { trackingStatusFormSchema } from './tracking-status-filter-schema.js';
+import { styles } from './tracking-status-filter.styles.js';
+import { CheckboxInput } from '../../../field/checkbox-input/checkbox-input.js';
+import { Spacer } from '../../../spacer/spacer.js';
+
+/**
+ * @internal
+ *
+ * # TrackingStatusFilter
+ *
+ * - The `<TrackingStatusFilter />` component handles the tracking status filter used in Labels Grid.
+ *
+ * @see {@link TrackingStatusFilterProps | The props for the `<TrackingStatusFilter />` component}
+ */
+const TrackingStatusFilter = ({
+  disabled = false,
+  filters,
+  onFiltersUpdated
+}) => {
+  var _a, _b, _c, _d;
+  const {
+    t
+  } = useTranslation();
+  const [showTrackingStatusFilter, toggleTrackingStatusFilter] = reactUse.useToggle(false);
+  const [buttonText, setButtonText] = useState(t("list-labels:headers.trackingStatus"));
+  const buttonRef = useRef(null);
+  const form = useForm({
+    defaultValues: {
+      delivered: false,
+      error: false,
+      in_transit: false,
+      unknown: false,
+      voided: false
+    },
+    resolver: validationResolver(trackingStatusFormSchema)
+  });
+  const determineButtonText = useCallback(statuses => {
+    var _a, _b, _c;
+    if (statuses.length === 0) {
+      return ((_a = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.nickname) || t("list-labels:headers.trackingStatus");
+    } else if (statuses.length === 1) {
+      return t("common:grid.filteredTrackingStatus", {
+        filter: t(`list-labels:trackingStatus.${statuses[0]}`),
+        name: ((_b = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _b === void 0 ? void 0 : _b.nickname) || t("list-labels:headers.trackingStatus")
+      });
+    } else {
+      return t("common:grid.filteredTrackingStatus", {
+        filter: t(`list-labels:trackingStatus.${statuses[0]}`),
+        name: ((_c = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _c === void 0 ? void 0 : _c.nickname) || t("list-labels:headers.trackingStatus")
+      }) + t("common:grid.more", {
+        count: statuses.length - 1
+      });
+    }
+  }, [t, (_a = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.nickname]);
+  const getUpdatedKeys = useCallback(updatedFields => {
+    return Object.keys(updatedFields).filter(key => updatedFields[key]);
+  }, []);
+  useEffect(() => {
+    var _a;
+    // keep form in sync with filters
+    if ((_a = filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.value) {
+      const updatedFields = {
+        // The order of these keys are set by the order they are displayed in the UI.
+        // We use this order to determine the order of the filters in the button text.
+        in_transit: filters.trackingStatus.value.includes("in_transit"),
+        delivered: filters.trackingStatus.value.includes("delivered"),
+        voided: filters.trackingStatus.value.includes("voided"),
+        error: filters.trackingStatus.value.includes("error"),
+        unknown: filters.trackingStatus.value.includes("unknown")
+      };
+      form.reset(updatedFields);
+      // Only set buttonText when filters are applied
+      const updatedKeys = getUpdatedKeys(updatedFields);
+      if (updatedKeys.length > 0) {
+        setButtonText(determineButtonText(updatedKeys));
+      }
+    }
+  }, [determineButtonText, (_b = filters.trackingStatus) === null || _b === void 0 ? void 0 : _b.value, form, getUpdatedKeys]);
+  const onClearFilters = useCallback(() => {
+    onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+      trackingStatus: Object.assign(Object.assign({}, filters.trackingStatus), {
+        enabled: true,
+        value: []
+      })
+    }));
+    showTrackingStatusFilter && toggleTrackingStatusFilter();
+  }, [filters, onFiltersUpdated, showTrackingStatusFilter, toggleTrackingStatusFilter]);
+  const handleCheckboxChange = (name, checked) => {
+    form.setValue(name, checked);
+    const updatedFields = form.getValues();
+    // get the keys of the fields that are checked
+    const updatedKeys = getUpdatedKeys(updatedFields);
+    onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+      trackingStatus: Object.assign(Object.assign({}, filters.trackingStatus), {
+        enabled: true,
+        value: updatedKeys
+      })
+    }));
+  };
+  const watchedValues = form.watch();
+  const isAnyCheckboxChecked = useMemo(() => {
+    return Object.keys(watchedValues).some(key => watchedValues[key]);
+  }, [watchedValues]);
+  return jsxs(Fragment, {
+    children: [jsxs(Button, {
+      disabled: disabled,
+      onClick: toggleTrackingStatusFilter,
+      ref: buttonRef,
+      variant: ButtonVariant.TEXT,
+      children: [isAnyCheckboxChecked ? jsx("span", {
+        children: buttonText
+      }) : jsx("span", {
+        children: (_d = (_c = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _c === void 0 ? void 0 : _c.nickname) !== null && _d !== void 0 ? _d : t("list-labels:headers.trackingStatus")
+      }), isAnyCheckboxChecked ?
+      // Show Close Icon
+      jsx(Icon, {
+        "aria-label": t("common:grid.clear"),
+        name: IconNames.CLOSE,
+        onClick: e => {
+          e.stopPropagation();
+          onClearFilters();
+        },
+        onKeyDown: e => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.stopPropagation();
+            onClearFilters();
+          }
+        },
+        role: "button",
+        size: IconSize.SIZE_SMALL,
+        tabIndex: 0
+      }) : showTrackingStatusFilter ? jsx(Icon, {
+        name: IconNames.CARET_TOP,
+        size: IconSize.SIZE_SMALL
+      }) : jsx(Icon, {
+        name: IconNames.CARET_BOTTOM,
+        size: IconSize.SIZE_SMALL
+      })]
+    }), jsx(Popover, {
+      isOpen: showTrackingStatusFilter,
+      onClickAway: toggleTrackingStatusFilter,
+      reference: buttonRef.current,
+      children: jsxs("form", {
+        children: [jsxs("div", {
+          css: styles.checkboxInputParent,
+          children: [jsx(CheckboxInput, {
+            ariaLabel: "In Transit tracking Status Filter",
+            checkboxLabel: t("list-labels:trackingStatus.in_transit"),
+            control: form.control,
+            label: "in_transit",
+            name: "in_transit",
+            onClick: e => {
+              handleCheckboxChange("in_transit", e.currentTarget.checked);
+            }
+          }), jsx(Spacer, {
+            multiplier: 2
+          }), jsx(CheckboxInput, {
+            ariaLabel: "Delivered tracking Status Filter",
+            checkboxLabel: t("list-labels:trackingStatus.delivered"),
+            control: form.control,
+            label: "delivered",
+            name: "delivered",
+            onClick: e => {
+              handleCheckboxChange("delivered", e.currentTarget.checked);
+            }
+          }), jsx(Spacer, {
+            multiplier: 2
+          }), jsx(CheckboxInput, {
+            ariaLabel: "Voided tracking Status Filter",
+            checkboxLabel: t("list-labels:trackingStatus.voided"),
+            control: form.control,
+            label: "voided",
+            name: "voided",
+            onClick: e => {
+              handleCheckboxChange("voided", e.currentTarget.checked);
+            }
+          }), jsx(Spacer, {
+            multiplier: 2
+          }), jsx(CheckboxInput, {
+            ariaLabel: "Error tracking Status Filter",
+            checkboxLabel: t("list-labels:trackingStatus.error"),
+            control: form.control,
+            label: "error",
+            name: "error",
+            onClick: e => {
+              handleCheckboxChange("error", e.currentTarget.checked);
+            }
+          }), jsx(Spacer, {
+            multiplier: 2
+          }), jsx(CheckboxInput, {
+            ariaLabel: "Unknown tracking Status Filter",
+            checkboxLabel: t("list-labels:trackingStatus.unknown"),
+            control: form.control,
+            label: "unknown",
+            name: "unknown",
+            onClick: e => {
+              handleCheckboxChange("unknown", e.currentTarget.checked);
+            }
+          })]
+        }), isAnyCheckboxChecked && jsx("div", {
+          css: styles.buttons,
+          children: jsx(Button, {
+            disabled: !isAnyCheckboxChecked,
+            onClick: onClearFilters,
+            variant: ButtonVariant.OUTLINED,
+            children: t("common:grid.clear")
+          })
+        })]
+      })
+    })]
+  });
+};
+
+export { TrackingStatusFilter };

package/dist/esm/components/grid-filters/components/tracking-status-filter/tracking-status-filter.styles.js

@@ -0,0 +1,17 @@
+import { createStyles, scopeTheme } from '../../../../utilities/styles.js';
+
+const styles = createStyles({
+  buttons: theme => ({
+    display: "flex",
+    gap: scopeTheme(theme).spacing(),
+    justifyContent: "end",
+    paddingTop: scopeTheme(theme).spacing(2)
+  }),
+  checkboxInputParent: () => ({
+    "div > div > div:has(input[type='checkbox'])": {
+      paddingBottom: 0
+    }
+  })
+});
+
+export { styles };

package/dist/esm/components/grid-filters/grid-filters.js

@@ -0,0 +1,72 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Button, ButtonVariant } from '@shipengine/giger';
+import { useTranslation } from 'react-i18next';
+import { ShipmentIdFilter } from './components/shipment-id-filter/shipment-id-filter.js';
+import { LabelIdFilter } from './components/label-id-filter/label-id-filter.js';
+import { CreatedDateFilter } from './components/created-date-filter/created-date-filter.js';
+import { TrackingStatusFilter } from './components/tracking-status-filter/tracking-status-filter.js';
+import { LabelStatusFilter } from './components/label-status-filter/label-status-filter.js';
+
+/**
+ * @internal
+ *
+ * # GridFilters
+ *
+ * - The `<GridFilters />` component includes Filters used in ShipmentsGrid and LabelsGrid component.
+ *
+ * @see {@link GridFiltersProps | The props for the `<GridFilters />` component}
+ */
+const GridFilters = ({
+  filters,
+  onFiltersUpdated,
+  filtersDisabled = false,
+  onClearAllFilters
+}) => {
+  var _a, _b, _c, _d;
+  const {
+    t
+  } = useTranslation(["common"]);
+  const shouldShowClearAll = Object.keys(filters).some(key => {
+    const filter = filters[key];
+    if (!(filter === null || filter === void 0 ? void 0 : filter.value)) {
+      return false;
+    }
+    // if the value is an array, check if it has any values
+    if (Array.isArray(filter.value)) {
+      return filter.value.length > 0;
+    }
+    return true;
+  });
+  return jsxs("section", {
+    children: [filters.shipmentId.enabled && jsx(ShipmentIdFilter, {
+      disabled: filtersDisabled,
+      filters: filters,
+      onFiltersUpdated: onFiltersUpdated
+    }), ((_a = filters.labelId) === null || _a === void 0 ? void 0 : _a.enabled) && jsx(LabelIdFilter, {
+      disabled: filtersDisabled,
+      filters: filters,
+      onFiltersUpdated: onFiltersUpdated
+    }), ((_b = filters.createdDate) === null || _b === void 0 ? void 0 : _b.enabled) && jsx(CreatedDateFilter, {
+      disabled: filtersDisabled,
+      filters: filters,
+      onFiltersUpdated: onFiltersUpdated
+    }), ((_c = filters.trackingStatus) === null || _c === void 0 ? void 0 : _c.enabled) && jsx(TrackingStatusFilter, {
+      disabled: filtersDisabled,
+      filters: filters,
+      onFiltersUpdated: onFiltersUpdated
+    }), ((_d = filters.status) === null || _d === void 0 ? void 0 : _d.enabled) && jsx(LabelStatusFilter, {
+      disabled: filtersDisabled,
+      filters: filters,
+      onFiltersUpdated: onFiltersUpdated
+    }), shouldShowClearAll && jsx(Button, {
+      disabled: filtersDisabled,
+      onClick: () => {
+        onClearAllFilters();
+      },
+      variant: ButtonVariant.TEXT,
+      children: t("grid.clearAll")
+    })]
+  });
+};
+
+export { GridFilters };

package/dist/esm/components/history/history-card/history-card.js

@@ -0,0 +1,155 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { Typography } from '@shipengine/giger';
+import { formatByDateAndLocale } from '../../../utilities/date.js';
+import { overrideCarrierCodes } from '../../../utilities/rates.js';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import SvgFunding from '../../../assets/funding.svg.js';
+import { styles } from './history-card.styles.js';
+import { Label } from './label/label.js';
+import { useElements } from '../../../elements-provider/elements-context-provider.js';
+
+const HistoryCard = ({
+  transaction,
+  carrierInfo
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    locale: defaultLocale
+  } = useElements();
+  const {
+    transactionCategory,
+    transactionDate,
+    transactionAmount,
+    endingBalance
+    // description: transactionDescription,
+  } = transaction;
+  const deriveCurrencySymbol = currency => {
+    if (["USD", "usd"].includes(currency)) return "$";
+    if (["EUR", "eur"].includes(currency)) return "€";
+    if (["GBP", "gbp"].includes(currency)) return "£";
+    return "¤";
+  };
+  /**
+   *  This function derives the transaction with currency symbol as a string. All this logic below
+   *  is needed because the transaction history endpoint returns a minus symbol along with the
+   *  value that was deducted from the users balance. However, this is not the case for a value that
+   *  was added to the balance (e.g. the shipper paid too much for their shipment), where we would
+   *  expect that a plus sign was sent along with the value adjusted on the account.
+   *
+   *  The following logic ensures that the correct mathematical symbol is displayed for each transaction
+   *  per the figma designs for this view. _If only we could get a plus symbol from the API when
+   *  an additive operation is performed on the users balance_.
+   *
+   *  Example usage:
+   *
+   * ```typescript
+   * const moneyAsString = deriveTransactionSymbolWithAmount("adjustment", { amount: 15, currency: "USD" });
+   *
+   * => "+$15.00"
+   *
+   * OR
+   *
+   * const moneyAsString = deriveTransactionSymbolWithAmount("funds_added", { amount: -55, currency: "GBP" });
+   *
+   * => "-£55.00"
+   *
+   * ```
+   */
+  const deriveTransactionSymbolWithAmount = (category, transactionAmount) => {
+    const transactionFirstChar = transactionAmount.amount.toFixed(2).charAt(0);
+    const transactionSymbol = transactionFirstChar === "-" || transactionFirstChar === "+" ? transactionFirstChar : "";
+    const amountTrimmedOfSymbol = transactionAmount.amount.toFixed(2).replace("-", "");
+    const localizedCurrency = deriveCurrencySymbol(transactionAmount.currency);
+    const withDynamicMathematicalSymbol = `${transactionSymbol}${localizedCurrency}${amountTrimmedOfSymbol}`;
+    const withStaticMathematicalSymbol = `${localizedCurrency}${amountTrimmedOfSymbol}`;
+    if (["adjustment", "unknown"].includes(category)) {
+      return !["-", "+"].includes(transactionSymbol) ? `+${withDynamicMathematicalSymbol}` : withDynamicMathematicalSymbol;
+    }
+    if (["credit", "funds_added", "refund"].includes(category)) return `+${withStaticMathematicalSymbol}`;
+    if (["debit", "insurance", "label", "service_charge"].includes(category)) return `-${withStaticMathematicalSymbol}`;
+    return null;
+  };
+  const carrierLogoUrl = useMemo(() => {
+    return carrierInfo.carrierCode ? `https://logos.shipstation.com/ipaas/carriers/${overrideCarrierCodes(carrierInfo.carrierCode, {
+      DHL: "dhl_express",
+      FedEx: "fedex",
+      UPS: "ups",
+      USPS: "stamps_com_wl"
+    })}/icon.svg` : undefined;
+  }, [carrierInfo.carrierCode]);
+  const cardTitle = useMemo(() => {
+    switch (transactionCategory) {
+      case "funds_added":
+        return t("wallet-history:category.fundsAdded");
+      default:
+        return carrierInfo.carrierName || "Carrier";
+    }
+  }, [carrierInfo.carrierName, transactionCategory, t]);
+  const formatTransactionCategory = category => {
+    return category.replace(/_/g, " ");
+  };
+  return (
+    // Note: div wrapper with padding to be removed with the implementation of Card UI Component
+    jsx("div", {
+      css: {
+        padding: "16px"
+      },
+      children: jsxs("div", {
+        css: styles.cardContainer,
+        children: [jsxs("div", {
+          css: styles.cardColumn,
+          children: [jsx(Label, {
+            text: cardTitle,
+            textProps: {
+              css: styles.carrierTypography
+            },
+            variant: "inline-right",
+            children: transactionCategory === "funds_added" ? jsx(SvgFunding, {
+              height: 24,
+              role: "img",
+              width: 24
+            }) : carrierLogoUrl && jsx("img", {
+              alt: "carrier logo",
+              height: 24,
+              src: carrierLogoUrl,
+              width: 24
+            })
+          }), jsxs("div", {
+            css: styles.transactionDetails,
+            children: [jsx(Typography, {
+              css: styles.dateTypography,
+              variant: "small",
+              children: formatByDateAndLocale(new Date(transactionDate), defaultLocale)
+            }), jsx("span", {
+              children: "-"
+            }), jsx(Typography, {
+              css: styles.getTransactionTypeTypography(transactionCategory),
+              variant: "small",
+              children: formatTransactionCategory(transactionCategory)
+            })]
+          })]
+        }), jsx("div", {
+          css: styles.cardColumn,
+          children: jsx(Label, {
+            spacing: "spread",
+            text: deriveTransactionSymbolWithAmount(transactionCategory, transactionAmount),
+            textProps: {
+              css: styles.getAmountTypography(transactionCategory === "funds_added")
+            },
+            variant: "subtitle",
+            children: jsx(Typography, {
+              css: styles.balanceTypography,
+              variant: "small",
+              children: `${deriveCurrencySymbol(endingBalance.currency)}${endingBalance.amount.toFixed(2)}`
+            })
+          })
+        })]
+      })
+    })
+  );
+};
+
+export { HistoryCard };

package/dist/esm/components/history/history-card/label/label.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Typography } from '@shipengine/giger';
+import { styles } from './label.styles.js';
+
+const Label = ({
+  spacing,
+  children,
+  text,
+  textProps,
+  variant
+}) => {
+  return jsxs("div", {
+    css: styles({
+      spacing,
+      variant
+    }).labelContainer,
+    children: [jsx(Typography, Object.assign({}, textProps, {
+      children: text
+    })), children]
+  });
+};
+
+export { Label };

package/dist/esm/components/history/history-card-extension/history-card-extension.js

@@ -0,0 +1,147 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Divider, Typography, Icon } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { styles } from './history-card-extension.styles.js';
+import { Spacer } from '../../spacer/spacer.js';
+
+// TODO: Uncomment the following code once we have a way to get the original shipment info for adjustments
+// const LoadingState = () => (
+//   <div css={styles.loadingStateContainer}>
+//     {[200, 160, 200].map((leftSkeletonWidth, index) => (
+//       <Spread key={`spread-${index}`}>
+//         <Skeleton
+//           animation={SkeletonAnimation.WAVE}
+//           height={24}
+//           variant={SkeletonVariant.RECT}
+//           width={leftSkeletonWidth}
+//         />
+//
+//         <Skeleton
+//           animation={SkeletonAnimation.WAVE}
+//           height={24}
+//           variant={SkeletonVariant.RECT}
+//           width={80}
+//         />
+//       </Spread>
+//     ))}
+//   </div>
+// );
+//
+// const ErrorState = () => <ErrorDisplay />;
+//
+// // replace type call with its se version - lmnt-936
+// const SuccessState = ({ adjustment }: { adjustment: WalletAdjustment }) => {
+//   const commonStylingProps: {
+//     spacing: LabelProps["spacing"];
+//     textProps: LabelProps["textProps"];
+//     variant: LabelProps["variant"];
+//   } = {
+//     spacing: "spread",
+//     textProps: { css: styles.detailsTypography, variant: "body2" },
+//     variant: "inline",
+//   };
+//
+//   const { adjustmentId, originalShipment, actualShipment, trackingNumber } = adjustment;
+//
+//   return (
+//     <div>
+//       <div>
+//         <Label text="Original Weight" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             {`${originalShipment.weight.value} ${originalShipment.weight.unit}.`}
+//           </Typography>
+//         </Label>
+//
+//         <Label text="Actual Weight" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             {`${actualShipment.weight.value} ${actualShipment.weight.unit}.`}
+//           </Typography>
+//         </Label>
+//
+//         <Spacer multiplier={2} />
+//
+//         <Label text="Adjustment ID" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             {adjustmentId}
+//           </Typography>
+//         </Label>
+//
+//         <Label text="Tracking Number" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             {trackingNumber}
+//           </Typography>
+//         </Label>
+//       </div>
+//
+//       <Spacer multiplier={2} />
+//
+//       <div css={styles.detailsBottomContainer}>
+//         <Label text="Quoted Amount" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             $10.00
+//           </Typography>
+//         </Label>
+//
+//         <Label text="Amount Paid" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             $9.00
+//           </Typography>
+//         </Label>
+//
+//         <Label text="Adjustment" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             +$1.00
+//           </Typography>
+//         </Label>
+//       </div>
+//     </div>
+//   );
+// };
+const HistoryCardExtension = ({
+  transactionDetails
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  return jsxs("div", {
+    children: [jsx(Spacer, {
+      multiplier: 2
+    }), jsx(Divider, {}), jsx(Spacer, {
+      multiplier: 1
+    }), jsxs("div", {
+      children: [jsxs("div", {
+        css: styles.headingContainer,
+        children: [jsx(Typography, {
+          css: styles.detailsTypography,
+          children: t("wallet-history:details.inaccurateWeight")
+        }), jsx("div", {
+          onClick: () => setIsOpen(!isOpen),
+          onKeyDown: event => {
+            if (event.key === "Enter") {
+              setIsOpen(!isOpen);
+            }
+          },
+          role: "button",
+          tabIndex: 0,
+          children: isOpen ? jsx(Icon, {
+            css: styles.chevronTypography,
+            name: IconNames.CHEVRON_TOP
+          }) : jsx(Icon, {
+            css: styles.chevronTypography,
+            name: IconNames.CHEVRON_BOTTOM
+          })
+        })]
+      }), isOpen && jsx(Spacer, {
+        multiplier: 1
+      }), isOpen && jsx(Typography, {
+        css: styles.detailsTypography,
+        children: transactionDetails
+      })]
+    })]
+  });
+};
+
+export { HistoryCardExtension };

package/dist/esm/components/inline-label/inline-label.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Typography } from '@shipengine/giger';
+import { styles } from './inline-label.styles.js';
+
+/**
+ * @internal
+ *
+ * # Inline Label Component
+ */
+const InlineLabel = ({
+  children,
+  label,
+  isLabelRight,
+  labelProps = {}
+}) => jsxs("div", {
+  css: styles(isLabelRight).inlineContainer,
+  children: [jsx(Typography, Object.assign({}, labelProps, {
+    children: label
+  })), children]
+});
+
+export { InlineLabel };