@shipengine/elements 2.20.0 → 2.22.0

package/cjs/features/select-label-layout/select-label-layout.styles.cjs

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

package/cjs/features/select-label-layout/use-label-layout.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var reactApi = require('@shipengine/react-api');
+
+const useLabelLayout = () => {
+  const {
+    error: updateLabelLayoutErrors,
+    isLoading: isUpdatingLabelLayout,
+    mutateAsync: updateAccountSettings
+  } = reactApi.useUpdateAccountSettings();
+  const {
+    refetch: refreshAccountSettings,
+    data: accountSettings
+  } = reactApi.useGetAccountSettings();
+  const handleSubmitUpdateAccountSettings = newAccountSetting => tslib.__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
+  };
+};
+
+exports.useLabelLayout = useLabelLayout;

package/cjs/features/transaction-history/components/date-range-combo/date-range-combo.cjs

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var date = require('../../../../utilities/date.cjs');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var dateRangeSelect = require('../date-range-select/date-range-select.cjs');
+var elementsContextProvider = require('../../../../elements-provider/elements-context-provider.cjs');
+var spacer = require('../../../../components/spacer/spacer.cjs');
+
+/**
+ * @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
+  } = reactI18next.useTranslation();
+  const {
+    locale: defaultLocale
+  } = elementsContextProvider.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$1 = jsxRuntime.jsx(dateRangeSelect.DateRangeSelect, {
+    onChange: handleChangeSelected,
+    options: options,
+    value: selectedOption
+  });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [renderChildren ? renderChildren(dateRangeSelect$1) : dateRangeSelect$1, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === "custom" && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(spacer.Spacer, {
+        multiplier: 2
+      }), jsxRuntime.jsx(giger.DatePicker, {
+        dateFormat: date.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
+      })]
+    })]
+  });
+};
+
+exports.DateRangeCombo = DateRangeCombo;

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

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

package/cjs/features/transaction-history/components/date-range-select/date-range-select.cjs

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

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

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

package/cjs/features/transaction-history/index.cjs

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

package/cjs/features/transaction-history/transaction-history.cjs

@@ -0,0 +1,331 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var zeroState = require('../../components/zero-state/zero-state.cjs');
+var formatString = require('../../utilities/formatString.cjs');
+var jsBase64 = require('js-base64');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var reactApi = require('@shipengine/react-api');
+var transactionHistory_styles = require('./transaction-history.styles.cjs');
+var useDateRangeOptions = require('./use-date-range-options.cjs');
+var dateRangeCombo = require('./components/date-range-combo/date-range-combo.cjs');
+var historyCard = require('../../components/history/history-card/history-card.cjs');
+var spacer = require('../../components/spacer/spacer.cjs');
+
+/**
+ * @namespace TransactionHistory
+ *
+ * # Wallet History
+ */
+const TransactionHistory = () => {
+  var _a;
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [dateRangeOptions, {
+    last30days
+  }] = useDateRangeOptions.useDateRangeOptions();
+  const [selectedOption, setSelectedOption] = React.useState(last30days);
+  const [customRange, setCustomRange] = React.useState();
+  const [queryRange, setQueryRange] = React.useState(last30days.range);
+  const [selectedTransactionType, setSelectedTransactionType] = React.useState();
+  const handleDateRangeChange = React.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
+  } = reactApi.useListCarriers();
+  const {
+    data: labels,
+    isLoading: labelsLoading
+  } = reactApi.useListLabels();
+  const {
+    data: fundingSourcesResult,
+    isInitialLoading: fundingSourcesLoading,
+    error: fundingSourcesError
+  } = reactApi.useListFundingSources();
+  const fundingSources = React.useMemo(() => {
+    if (fundingSourcesError) return [];
+    if (fundingSourcesResult && !fundingSourcesLoading) {
+      return fundingSourcesResult;
+    }
+    return [];
+  }, [fundingSourcesError, fundingSourcesLoading, fundingSourcesResult]);
+  const {
+    data: walletHistoryData,
+    isInitialLoading: isWalletHistoryDataLoading,
+    isFetching: isWalletHistoryFetching,
+    error: errors
+  } = reactApi.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 = React.useMemo(() => {
+    const transactionTypes = ["adjustment", "credit", "debit", "funds_added", "insurance", "label", "refund", "service_charge", "unknown"];
+    return transactionTypes.map(type => ({
+      label: formatString.capitalizeFirstLetterOfEachWord(type.replace(/_/g, " ")),
+      value: type
+    }));
+  }, []);
+  const filteredTransactions = React.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 jsxRuntime.jsx(zeroState.ZeroState, {
+    description: t("account-settings:messages.transactionHistory.noTransactions")
+  });
+  if (errors === null || errors === void 0 ? void 0 : errors.length) return jsxRuntime.jsx(ErrorState, {
+    errors: errors
+  });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(dateRangeCombo.DateRangeCombo, Object.assign({
+      onChange: handleDateRangeChange,
+      options: dateRangeOptions,
+      values: {
+        customRange,
+        selectedOption
+      }
+    }, {
+      children: renderedSelect => jsxRuntime.jsxs(giger.Grid, Object.assign({
+        css: transactionHistory_styles.styles.gridContainer,
+        noPadding: true
+      }, {
+        children: [jsxRuntime.jsx(giger.GridChild, Object.assign({
+          colSpan: 6
+        }, {
+          children: renderedSelect
+        })), jsxRuntime.jsx(giger.GridChild, Object.assign({
+          colSpan: 6
+        }, {
+          children: jsxRuntime.jsx(giger.Select, Object.assign({
+            label: "Transaction Type",
+            leftContent: jsxRuntime.jsx(giger.Icon, {
+              name: gigerTheme.IconNames.FILTER
+            }),
+            name: "transaction type select",
+            onChange: (_name, value) => setSelectedTransactionType(value),
+            onClear: () => setSelectedTransactionType(null),
+            value: selectedTransactionType
+          }, {
+            children: transactionCategoryOptions.map(item => jsxRuntime.jsx(giger.Option, Object.assign({
+              selected: (selectedTransactionType === null || selectedTransactionType === void 0 ? void 0 : selectedTransactionType.value) === item.value,
+              value: item.value
+            }, {
+              children: item.label
+            }), item.value))
+          }))
+        }))]
+      }))
+    })), jsxRuntime.jsx(spacer.Spacer, {
+      multiplier: 3
+    }), isLoading ? jsxRuntime.jsx(LoadingState, {}) : walletHistoryData && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.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 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(spacer.Spacer, {
+          multiplier: 3
+        }), jsxRuntime.jsx("div", Object.assign({
+          css: transactionHistory_styles.styles.pagination
+        }, {
+          children: jsxRuntime.jsx(giger.Pagination, {
+            boundaryPagesToShow: 7,
+            currentPage: currentPage,
+            onPageChange: selectedPage => setCurrentPage(selectedPage),
+            siblingCount: 2,
+            totalPages: (walletHistoryData === null || walletHistoryData === void 0 ? void 0 : walletHistoryData.pages) || 1
+          })
+        }))]
+      })]
+    })]
+  });
+};
+const LoadingState = () => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  children: [jsxRuntime.jsx(SkeletonCardList, {}), jsxRuntime.jsx(spacer.Spacer, {
+    multiplier: 3
+  }), jsxRuntime.jsx(SkeletonPagination, {})]
+});
+const ErrorState = ({
+  errors
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  return jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+    title: t("wallet-history:errors.failureToFetch"),
+    type: giger.NotificationType.ERROR
+  }, {
+    children: errors.map(e => t(jsBase64.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 jsxRuntime.jsx(EmptyState, {});
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: transactionsWithCarrierInfo.length && jsxRuntime.jsx("ul", Object.assign({
+      css: transactionHistory_styles.styles.displayStateContainer
+    }, {
+      children: transactionsWithCarrierInfo.map(transaction => jsxRuntime.jsx("li", {
+        children: jsxRuntime.jsx(historyCard.HistoryCard, {
+          carrierInfo: transaction.carrierInfo,
+          transaction: transaction
+        })
+      }, transaction.fundingSourceTransactionId))
+    }))
+  });
+};
+const EmptyState = () => {
+  return jsxRuntime.jsx("div", Object.assign({
+    css: transactionHistory_styles.styles.emptyStateContainer
+  }, {
+    children: jsxRuntime.jsx(giger.Typography, {
+      children: "No data to display"
+    })
+  }));
+};
+const SkeletonCardList = () => {
+  return jsxRuntime.jsx("ul", Object.assign({
+    css: transactionHistory_styles.styles.skeletonCardList
+  }, {
+    children: Array.from({
+      length: 12
+    }).map((_, index) => jsxRuntime.jsx(SkeletonCard, {}, index))
+  }));
+};
+const SkeletonCard = () => {
+  return jsxRuntime.jsxs("li", Object.assign({
+    css: transactionHistory_styles.styles.skeletonCard
+  }, {
+    children: [jsxRuntime.jsxs("div", Object.assign({
+      css: transactionHistory_styles.styles.skeletonCardColumnLeft
+    }, {
+      children: [jsxRuntime.jsxs("div", Object.assign({
+        css: transactionHistory_styles.styles.skeletonCardLogo
+      }, {
+        children: [jsxRuntime.jsx(giger.Skeleton, {
+          animation: giger.SkeletonAnimation.WAVE,
+          backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+          height: 24,
+          variant: giger.SkeletonVariant.RECT,
+          width: 24
+        }), jsxRuntime.jsx(giger.Skeleton, {
+          animation: giger.SkeletonAnimation.WAVE,
+          backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+          height: 16,
+          variant: giger.SkeletonVariant.TEXT,
+          width: 64
+        })]
+      })), jsxRuntime.jsxs("div", Object.assign({
+        css: transactionHistory_styles.styles.skeletonCardTransactionRow
+      }, {
+        children: [jsxRuntime.jsx(giger.Skeleton, {
+          animation: giger.SkeletonAnimation.WAVE,
+          backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+          height: 16,
+          variant: giger.SkeletonVariant.TEXT,
+          width: 64
+        }), jsxRuntime.jsx(giger.Skeleton, {
+          animation: giger.SkeletonAnimation.WAVE,
+          backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+          height: 16,
+          variant: giger.SkeletonVariant.TEXT,
+          width: 64
+        })]
+      }))]
+    })), jsxRuntime.jsxs("div", Object.assign({
+      css: transactionHistory_styles.styles.skeletonCardColumnRight
+    }, {
+      children: [jsxRuntime.jsx(giger.Skeleton, {
+        animation: giger.SkeletonAnimation.WAVE,
+        backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+        height: 16,
+        variant: giger.SkeletonVariant.TEXT,
+        width: 56
+      }), jsxRuntime.jsx(giger.Skeleton, {
+        animation: giger.SkeletonAnimation.WAVE,
+        backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+        height: 16,
+        variant: giger.SkeletonVariant.TEXT,
+        width: 56
+      })]
+    }))]
+  }));
+};
+const SkeletonPagination = () => {
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: transactionHistory_styles.styles.skeletonPagination
+  }, {
+    children: [jsxRuntime.jsx(giger.Skeleton, {
+      animation: giger.SkeletonAnimation.WAVE,
+      backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+      height: 24,
+      variant: giger.SkeletonVariant.RECT,
+      width: 24
+    }), Array.from({
+      length: 6
+    }).map((_, index) => jsxRuntime.jsx(giger.Skeleton, {
+      animation: giger.SkeletonAnimation.WAVE,
+      backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+      height: 16,
+      variant: giger.SkeletonVariant.CIRCLE,
+      width: 16
+    }, index)), jsxRuntime.jsx(giger.Skeleton, {
+      animation: giger.SkeletonAnimation.WAVE,
+      backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+      height: 24,
+      variant: giger.SkeletonVariant.RECT,
+      width: 24
+    })]
+  }));
+};
+
+exports.TransactionHistory = TransactionHistory;