@shipengine/elements 2.18.0 → 2.20.0

package/esm/features/select-label-layout/select-label-layout.styles.js

@@ -0,0 +1,113 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  button: theme => ({
+    backgroundColor: "transparent",
+    padding: 0
+  }),
+  buttonContainer: theme => ({
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "left"
+  }),
+  icon: theme => ({
+    color: scopeTheme(theme).palette.secondary.main,
+    position: "absolute",
+    right: scopeTheme(theme).spacing(1),
+    top: scopeTheme(theme).spacing(1)
+  }),
+  letter: theme => ({
+    ":hover": {
+      border: `1px solid ${scopeTheme(theme).palette.secondary.main}`
+    },
+    alignItems: "center",
+    border: `1px solid ${scopeTheme(theme).palette.gray.light}`,
+    borderRadius: "10px",
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "column",
+    height: scopeTheme(theme).spacing(31),
+    marginRight: scopeTheme(theme).spacing(3.5),
+    position: "relative",
+    width: scopeTheme(theme).spacing(22)
+  }),
+  letterInner: theme => ({
+    backgroundColor: "white",
+    border: `1px solid ${scopeTheme(theme).palette.gray.light}`,
+    height: scopeTheme(theme).spacing(14),
+    marginBottom: scopeTheme(theme).spacing(2),
+    marginTop: scopeTheme(theme).spacing(6),
+    width: scopeTheme(theme).spacing(10)
+  }),
+  letterLabel: theme => ({
+    backgroundColor: scopeTheme(theme).palette.info.light,
+    height: scopeTheme(theme).spacing(5),
+    margin: scopeTheme(theme).spacing(1.5)
+  }),
+  selectedLetter: theme => ({
+    alignItems: "center",
+    backgroundColor: scopeTheme(theme).palette.white,
+    border: `1px solid ${scopeTheme(theme).palette.secondary.main}`,
+    borderRadius: "10px",
+    boxShadow: `0 0 0 3px ${scopeTheme(theme).palette.secondary.main}`,
+    boxSizing: "border-box",
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "column",
+    height: scopeTheme(theme).spacing(31),
+    marginRight: scopeTheme(theme).spacing(3.5),
+    position: "relative",
+    width: scopeTheme(theme).spacing(22)
+  }),
+  selectedThermal: theme => ({
+    alignItems: "center",
+    backgroundColor: scopeTheme(theme).palette.white,
+    border: `1px solid ${scopeTheme(theme).palette.secondary.main}`,
+    borderRadius: "10px",
+    boxShadow: `0 0 0 3px ${scopeTheme(theme).palette.secondary.main}`,
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "column",
+    height: scopeTheme(theme).spacing(31),
+    position: "relative",
+    width: scopeTheme(theme).spacing(22)
+  }),
+  text: theme => ({
+    color: scopeTheme(theme).palette.gray.main
+  }),
+  thermal: theme => ({
+    ":hover": {
+      border: `1px solid ${scopeTheme(theme).palette.secondary.main}`
+    },
+    alignItems: "center",
+    border: `1px solid ${scopeTheme(theme).palette.gray.light}`,
+    borderRadius: "10px",
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "column",
+    height: scopeTheme(theme).spacing(31),
+    position: "relative",
+    width: scopeTheme(theme).spacing(22)
+  }),
+  thermalIcon: theme => ({
+    backgroundColor: scopeTheme(theme).palette.info.light,
+    height: scopeTheme(theme).spacing(8),
+    width: scopeTheme(theme).spacing(5)
+  }),
+  thermalInner: theme => ({
+    alignItems: "center",
+    display: "flex",
+    height: scopeTheme(theme).spacing(14),
+    justifyContent: "center",
+    marginBottom: scopeTheme(theme).spacing(2),
+    marginTop: scopeTheme(theme).spacing(6),
+    width: scopeTheme(theme).spacing(10)
+  }),
+  thermalLabel: theme => ({
+    backgroundColor: scopeTheme(theme).palette.info.light,
+    height: scopeTheme(theme).spacing(8),
+    width: scopeTheme(theme).spacing(5)
+  })
+});
+
+export { styles };

package/esm/features/select-label-layout/use-label-layout.js

@@ -0,0 +1,30 @@
+import { __awaiter } from 'tslib';
+import { useUpdateAccountSettings, useGetAccountSettings } from '@shipengine/react-api';
+
+const useLabelLayout = () => {
+  const {
+    error: updateLabelLayoutErrors,
+    isLoading: isUpdatingLabelLayout,
+    mutateAsync: updateAccountSettings
+  } = useUpdateAccountSettings();
+  const {
+    refetch: refreshAccountSettings,
+    data: accountSettings
+  } = useGetAccountSettings();
+  const handleSubmitUpdateAccountSettings = newAccountSetting => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+      yield updateAccountSettings(newAccountSetting);
+    } catch (error) {
+      console.error(error);
+    }
+    yield refreshAccountSettings();
+  });
+  return {
+    accountSettings,
+    isUpdatingLabelLayout,
+    updateAccountSettings: handleSubmitUpdateAccountSettings,
+    updateLabelLayoutErrors
+  };
+};
+
+export { useLabelLayout };

package/esm/features/transaction-history/components/date-range-combo/date-range-combo.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { getlocaleDateStringFormat } from '../../../../utilities/date.js';
+import { useTranslation } from 'react-i18next';
+import { DatePicker } from '@shipengine/giger';
+import { DateRangeSelect } from '../date-range-select/date-range-select.js';
+import { useElements } from '../../../../elements-provider/elements-context-provider.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+
+/**
+ * @internal
+ *
+ * # Date Range Combo Component
+ *
+ * @see {@link DateRangeComboProps | This is the type of the props used in the `<DateRangeCombo />` component}
+ */
+const DateRangeCombo = ({
+  children: renderChildren,
+  onChange,
+  options,
+  values: {
+    customRange,
+    selectedOption
+  }
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    locale: defaultLocale
+  } = useElements();
+  const handleChangeSelected = nextOption => {
+    if (nextOption.value === "custom") {
+      // if custom, pass undefined custom range to reset until user confirms a custom range
+      void (onChange === null || onChange === void 0 ? void 0 : onChange(nextOption, undefined));
+    }
+    void (onChange === null || onChange === void 0 ? void 0 : onChange(nextOption, customRange));
+  };
+  const handleConfirmCustomRange = nextCustomRange => {
+    void (onChange === null || onChange === void 0 ? void 0 : onChange(selectedOption, nextCustomRange));
+  };
+  const dateRangeSelect = jsx(DateRangeSelect, {
+    onChange: handleChangeSelected,
+    options: options,
+    value: selectedOption
+  });
+  return jsxs(Fragment, {
+    children: [renderChildren ? renderChildren(dateRangeSelect) : dateRangeSelect, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === "custom" && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 2
+      }), jsx(DatePicker, {
+        dateFormat: getlocaleDateStringFormat(defaultLocale),
+        isClearable: true,
+        //TODO: Giger DatePicker needs to have an onClear prop to update state null when clear button is clicked
+        label: t("wallet-history:actions.chooseDate"),
+        locale: defaultLocale,
+        maxDate: new Date(),
+        onClickConfirm: dates => {
+          if (Array.isArray(dates) && dates.length === 2 && dates[1] !== null) handleConfirmCustomRange({
+            endDate: dates[1],
+            startDate: dates[0]
+          });
+        },
+        selectsRange: true
+      })]
+    })]
+  });
+};
+
+export { DateRangeCombo };

package/esm/features/transaction-history/components/date-range-combo/index.js

@@ -0,0 +1 @@
+export { DateRangeCombo } from './date-range-combo.js';

package/esm/features/transaction-history/components/date-range-select/date-range-select.js

@@ -0,0 +1,40 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { Select, Icon, Option } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+
+/**
+ * @internal
+ */
+const DateRangeSelect = ({
+  onChange,
+  options,
+  value
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const handleChange = (_name, nextOption) => {
+    if (!nextOption) throw new Error("DateRangeSelect requires non-null options");
+    void onChange(nextOption);
+  };
+  return jsx(Select, Object.assign({
+    "data-testid": "date-range-select",
+    label: t("wallet-history:dateRange"),
+    leftContent: jsx(Icon, {
+      name: IconNames.FILTER
+    }),
+    name: "date-range-select",
+    onChange: handleChange,
+    value: value
+  }, {
+    children: options.map(option => jsx(Option, Object.assign({
+      selected: (value === null || value === void 0 ? void 0 : value.value) === option.value,
+      value: option
+    }, {
+      children: option.label
+    }), option.value))
+  }));
+};
+
+export { DateRangeSelect };

package/esm/features/transaction-history/components/date-range-select/index.js

@@ -0,0 +1 @@
+export { DateRangeSelect } from './date-range-select.js';

package/esm/features/transaction-history/index.js

@@ -0,0 +1 @@
+export { TransactionHistory } from './transaction-history.js';

package/esm/features/transaction-history/transaction-history.js

@@ -0,0 +1,327 @@
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { ZeroState } from '../../components/zero-state/zero-state.js';
+import { capitalizeFirstLetterOfEachWord } from '../../utilities/formatString.js';
+import { encode } from 'js-base64';
+import { useState, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Grid, GridChild, Select, Icon, Option, Pagination, InlineNotification, NotificationType, Typography, Skeleton, SkeletonAnimation, SkeletonBackgroundColor, SkeletonVariant } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { useListCarriers, useListLabels, useListFundingSources, useGetFundingSourceTransactions } from '@shipengine/react-api';
+import { styles } from './transaction-history.styles.js';
+import { useDateRangeOptions } from './use-date-range-options.js';
+import { DateRangeCombo } from './components/date-range-combo/date-range-combo.js';
+import { HistoryCard } from '../../components/history/history-card/history-card.js';
+import { Spacer } from '../../components/spacer/spacer.js';
+
+/**
+ * @namespace TransactionHistory
+ *
+ * # Wallet History
+ */
+const TransactionHistory = () => {
+  var _a;
+  const {
+    t
+  } = useTranslation();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [dateRangeOptions, {
+    last30days
+  }] = useDateRangeOptions();
+  const [selectedOption, setSelectedOption] = useState(last30days);
+  const [customRange, setCustomRange] = useState();
+  const [queryRange, setQueryRange] = useState(last30days.range);
+  const [selectedTransactionType, setSelectedTransactionType] = useState();
+  const handleDateRangeChange = useCallback((nextOption, nextCustomRange) => {
+    var _a;
+    setSelectedOption(nextOption);
+    if ((nextOption === null || nextOption === void 0 ? void 0 : nextOption.value) === "custom") {
+      if (nextCustomRange) {
+        setCustomRange(nextCustomRange);
+        setQueryRange(nextCustomRange);
+      }
+      // If no custom range yet, don't update queryRange to avoid unnecessary refetches
+    } else {
+      setCustomRange(undefined);
+      setQueryRange((_a = nextOption === null || nextOption === void 0 ? void 0 : nextOption.range) !== null && _a !== void 0 ? _a : last30days.range);
+    }
+  }, [last30days.range]);
+  const {
+    data: carriers,
+    isLoading: carriersLoading
+  } = useListCarriers();
+  const {
+    data: labels,
+    isLoading: labelsLoading
+  } = useListLabels();
+  const {
+    data: fundingSourcesResult,
+    isInitialLoading: fundingSourcesLoading,
+    error: fundingSourcesError
+  } = useListFundingSources();
+  const fundingSources = useMemo(() => {
+    if (fundingSourcesError) return [];
+    if (fundingSourcesResult && !fundingSourcesLoading) {
+      return fundingSourcesResult;
+    }
+    return [];
+  }, [fundingSourcesError, fundingSourcesLoading, fundingSourcesResult]);
+  const {
+    data: walletHistoryData,
+    isInitialLoading: isWalletHistoryDataLoading,
+    isFetching: isWalletHistoryFetching,
+    error: errors
+  } = useGetFundingSourceTransactions(fundingSources.length ? fundingSources[0].fundingSourceId : "", Object.assign(Object.assign(Object.assign({}, selectedTransactionType ? {
+    category: selectedTransactionType === null || selectedTransactionType === void 0 ? void 0 : selectedTransactionType.value
+  } : {}), {
+    page: currentPage,
+    pageSize: 25
+  }), queryRange ? {
+    createdAtEnd: queryRange.endDate.toISOString(),
+    createdAtStart: queryRange.startDate.toISOString()
+  } : {}));
+  const transactionCategoryOptions = useMemo(() => {
+    const transactionTypes = ["adjustment", "credit", "debit", "funds_added", "insurance", "label", "refund", "service_charge", "unknown"];
+    return transactionTypes.map(type => ({
+      label: capitalizeFirstLetterOfEachWord(type.replace(/_/g, " ")),
+      value: type
+    }));
+  }, []);
+  const filteredTransactions = useMemo(() => {
+    var _a;
+    // We pass the transaction type into the query, but the API isn't properly filtering yet so we filter here
+    return (_a = walletHistoryData === null || walletHistoryData === void 0 ? void 0 : walletHistoryData.transactions.filter(transaction => {
+      if (!selectedTransactionType) {
+        return true;
+      }
+      return transaction.transactionCategory === selectedTransactionType.value;
+    })) !== null && _a !== void 0 ? _a : [];
+  }, [walletHistoryData === null || walletHistoryData === void 0 ? void 0 : walletHistoryData.transactions, selectedTransactionType]);
+  const walletLoading = isWalletHistoryDataLoading || isWalletHistoryFetching;
+  const isLoading = walletLoading || labelsLoading || carriersLoading;
+  if ((fundingSources === null || fundingSources === void 0 ? void 0 : fundingSources.length) === 0) return jsx(ZeroState, {
+    description: t("account-settings:messages.transactionHistory.noTransactions")
+  });
+  if (errors === null || errors === void 0 ? void 0 : errors.length) return jsx(ErrorState, {
+    errors: errors
+  });
+  return jsxs(Fragment, {
+    children: [jsx(DateRangeCombo, Object.assign({
+      onChange: handleDateRangeChange,
+      options: dateRangeOptions,
+      values: {
+        customRange,
+        selectedOption
+      }
+    }, {
+      children: renderedSelect => jsxs(Grid, Object.assign({
+        css: styles.gridContainer,
+        noPadding: true
+      }, {
+        children: [jsx(GridChild, Object.assign({
+          colSpan: 6
+        }, {
+          children: renderedSelect
+        })), jsx(GridChild, Object.assign({
+          colSpan: 6
+        }, {
+          children: jsx(Select, Object.assign({
+            label: "Transaction Type",
+            leftContent: jsx(Icon, {
+              name: IconNames.FILTER
+            }),
+            name: "transaction type select",
+            onChange: (_name, value) => setSelectedTransactionType(value),
+            onClear: () => setSelectedTransactionType(null),
+            value: selectedTransactionType
+          }, {
+            children: transactionCategoryOptions.map(item => jsx(Option, Object.assign({
+              selected: (selectedTransactionType === null || selectedTransactionType === void 0 ? void 0 : selectedTransactionType.value) === item.value,
+              value: item.value
+            }, {
+              children: item.label
+            }), item.value))
+          }))
+        }))]
+      }))
+    })), jsx(Spacer, {
+      multiplier: 3
+    }), isLoading ? jsx(LoadingState, {}) : walletHistoryData && jsxs(Fragment, {
+      children: [jsx(SuccessState, {
+        carriers: carriers !== null && carriers !== void 0 ? carriers : [],
+        labels: (_a = labels === null || labels === void 0 ? void 0 : labels.labels) !== null && _a !== void 0 ? _a : [],
+        transactions: filteredTransactions
+      }), !!filteredTransactions.length && jsxs(Fragment, {
+        children: [jsx(Spacer, {
+          multiplier: 3
+        }), jsx("div", Object.assign({
+          css: styles.pagination
+        }, {
+          children: jsx(Pagination, {
+            boundaryPagesToShow: 7,
+            currentPage: currentPage,
+            onPageChange: selectedPage => setCurrentPage(selectedPage),
+            siblingCount: 2,
+            totalPages: (walletHistoryData === null || walletHistoryData === void 0 ? void 0 : walletHistoryData.pages) || 1
+          })
+        }))]
+      })]
+    })]
+  });
+};
+const LoadingState = () => jsxs(Fragment, {
+  children: [jsx(SkeletonCardList, {}), jsx(Spacer, {
+    multiplier: 3
+  }), jsx(SkeletonPagination, {})]
+});
+const ErrorState = ({
+  errors
+}) => {
+  const {
+    t
+  } = useTranslation();
+  return jsx(InlineNotification, Object.assign({
+    title: t("wallet-history:errors.failureToFetch"),
+    type: NotificationType.ERROR
+  }, {
+    children: errors.map(e => t(encode(e.message), {
+      defaultValue: e.message
+    })).join(" ")
+  }));
+};
+const SuccessState = ({
+  transactions,
+  labels,
+  carriers
+}) => {
+  const sortedTransactions = transactions.sort((a, b) => new Date(b.transactionDate).valueOf() - new Date(a.transactionDate).valueOf());
+  const transactionsWithCarrierInfo = sortedTransactions.map(transaction => {
+    var _a, _b;
+    const label = labels === null || labels === void 0 ? void 0 : labels.find(l => l.labelId === transaction.labelIds[0]);
+    const carrier = carriers === null || carriers === void 0 ? void 0 : carriers.find(c => c.carrierId === (label === null || label === void 0 ? void 0 : label.carrierId));
+    return Object.assign(Object.assign({}, transaction), {
+      carrierInfo: {
+        carrierCode: (_a = carrier === null || carrier === void 0 ? void 0 : carrier.carrierCode) !== null && _a !== void 0 ? _a : "",
+        carrierName: (_b = carrier === null || carrier === void 0 ? void 0 : carrier.friendlyName) !== null && _b !== void 0 ? _b : ""
+      }
+    });
+  });
+  if (!transactions.length) return jsx(EmptyState, {});
+  return jsx(Fragment, {
+    children: transactionsWithCarrierInfo.length && jsx("ul", Object.assign({
+      css: styles.displayStateContainer
+    }, {
+      children: transactionsWithCarrierInfo.map(transaction => jsx("li", {
+        children: jsx(HistoryCard, {
+          carrierInfo: transaction.carrierInfo,
+          transaction: transaction
+        })
+      }, transaction.fundingSourceTransactionId))
+    }))
+  });
+};
+const EmptyState = () => {
+  return jsx("div", Object.assign({
+    css: styles.emptyStateContainer
+  }, {
+    children: jsx(Typography, {
+      children: "No data to display"
+    })
+  }));
+};
+const SkeletonCardList = () => {
+  return jsx("ul", Object.assign({
+    css: styles.skeletonCardList
+  }, {
+    children: Array.from({
+      length: 12
+    }).map((_, index) => jsx(SkeletonCard, {}, index))
+  }));
+};
+const SkeletonCard = () => {
+  return jsxs("li", Object.assign({
+    css: styles.skeletonCard
+  }, {
+    children: [jsxs("div", Object.assign({
+      css: styles.skeletonCardColumnLeft
+    }, {
+      children: [jsxs("div", Object.assign({
+        css: styles.skeletonCardLogo
+      }, {
+        children: [jsx(Skeleton, {
+          animation: SkeletonAnimation.WAVE,
+          backgroundColor: SkeletonBackgroundColor.LIGHT,
+          height: 24,
+          variant: SkeletonVariant.RECT,
+          width: 24
+        }), jsx(Skeleton, {
+          animation: SkeletonAnimation.WAVE,
+          backgroundColor: SkeletonBackgroundColor.LIGHT,
+          height: 16,
+          variant: SkeletonVariant.TEXT,
+          width: 64
+        })]
+      })), jsxs("div", Object.assign({
+        css: styles.skeletonCardTransactionRow
+      }, {
+        children: [jsx(Skeleton, {
+          animation: SkeletonAnimation.WAVE,
+          backgroundColor: SkeletonBackgroundColor.LIGHT,
+          height: 16,
+          variant: SkeletonVariant.TEXT,
+          width: 64
+        }), jsx(Skeleton, {
+          animation: SkeletonAnimation.WAVE,
+          backgroundColor: SkeletonBackgroundColor.LIGHT,
+          height: 16,
+          variant: SkeletonVariant.TEXT,
+          width: 64
+        })]
+      }))]
+    })), jsxs("div", Object.assign({
+      css: styles.skeletonCardColumnRight
+    }, {
+      children: [jsx(Skeleton, {
+        animation: SkeletonAnimation.WAVE,
+        backgroundColor: SkeletonBackgroundColor.LIGHT,
+        height: 16,
+        variant: SkeletonVariant.TEXT,
+        width: 56
+      }), jsx(Skeleton, {
+        animation: SkeletonAnimation.WAVE,
+        backgroundColor: SkeletonBackgroundColor.LIGHT,
+        height: 16,
+        variant: SkeletonVariant.TEXT,
+        width: 56
+      })]
+    }))]
+  }));
+};
+const SkeletonPagination = () => {
+  return jsxs("div", Object.assign({
+    css: styles.skeletonPagination
+  }, {
+    children: [jsx(Skeleton, {
+      animation: SkeletonAnimation.WAVE,
+      backgroundColor: SkeletonBackgroundColor.LIGHT,
+      height: 24,
+      variant: SkeletonVariant.RECT,
+      width: 24
+    }), Array.from({
+      length: 6
+    }).map((_, index) => jsx(Skeleton, {
+      animation: SkeletonAnimation.WAVE,
+      backgroundColor: SkeletonBackgroundColor.LIGHT,
+      height: 16,
+      variant: SkeletonVariant.CIRCLE,
+      width: 16
+    }, index)), jsx(Skeleton, {
+      animation: SkeletonAnimation.WAVE,
+      backgroundColor: SkeletonBackgroundColor.LIGHT,
+      height: 24,
+      variant: SkeletonVariant.RECT,
+      width: 24
+    })]
+  }));
+};
+
+export { TransactionHistory };

package/esm/features/transaction-history/transaction-history.styles.js

@@ -0,0 +1,90 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  action: theme => ({
+    minWidth: scopeTheme(theme).spacing(30),
+    placeContent: "center",
+    width: scopeTheme(theme).spacing(30)
+  }),
+  displayStateContainer: theme => ({
+    "& > *:not(:last-child)::after": {
+      borderBottom: `1px solid ${scopeTheme(theme).palette.gray.light}`,
+      content: '""',
+      display: "block",
+      width: "100%"
+    },
+    border: `1px solid ${scopeTheme(theme).palette.gray.light}`,
+    display: "flex",
+    flexDirection: "column",
+    listStyle: "none"
+  }),
+  emptyStateContainer: theme => ({
+    backgroundColor: scopeTheme(theme).palette.gray.ultraLight,
+    padding: scopeTheme(theme).spacing(2),
+    textAlign: "center"
+  }),
+  gridContainer: {
+    "@media (max-width: 550px)": {
+      display: "flex",
+      flexDirection: "column-reverse"
+    }
+  },
+  linkAction: {
+    margin: "0.5rem auto",
+    textAlign: "end"
+  },
+  pagination: theme => ({
+    "&& button": {
+      background: "none"
+    },
+    "&& button[aria-current='step']": {
+      background: scopeTheme(theme).palette.white
+    },
+    textAlign: "center"
+  }),
+  skeletonCard: theme => ({
+    display: "flex",
+    justifyContent: "space-between",
+    padding: scopeTheme(theme).spacing(2.25)
+  }),
+  skeletonCardColumnLeft: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between"
+  },
+  skeletonCardColumnRight: theme => ({
+    alignItems: "flex-end",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    rowGap: scopeTheme(theme).spacing(2)
+  }),
+  skeletonCardList: theme => ({
+    "& > li:not(:last-child)": {
+      borderBottom: `1px solid ${scopeTheme(theme).palette.gray.light}`
+    },
+    border: `1px solid ${scopeTheme(theme).palette.gray.light}`,
+    display: "flex",
+    flexDirection: "column",
+    listStyle: "none"
+  }),
+  skeletonCardLogo: theme => ({
+    alignItems: "center",
+    columnGap: scopeTheme(theme).spacing(2),
+    display: "flex"
+  }),
+  skeletonCardTransactionRow: theme => ({
+    columnGap: "8px",
+    display: "flex"
+  }),
+  skeletonPagination: theme => ({
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "space-between",
+    marginLeft: "auto",
+    marginRight: "auto",
+    maxWidth: "16rem"
+  })
+});
+
+export { styles };