@stokr/components-library 2.3.63-beta.2 → 2.3.64

package/dist/components/Timeline/Timeline.stories.js

@@ -0,0 +1,393 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutTooltips = exports.SimpleTimeline = exports.PendingState = exports.PayoutDeclined = exports.PayoutConfirmed = exports.LongCaptions = exports.InitiatedState = exports.DeclinedState = exports.CustomWidth = exports.CustomStyling = exports.CancelledState = exports.AllStates = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Timeline = require("./Timeline");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+var _moment = require("../../utils/moment");
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Components Library/Timeline',
+  component: _Timeline.Timeline,
+  argTypes: {
+    steps: {
+      control: 'object',
+      description: 'Array of step objects with state, date, title, tooltip, and caption'
+    },
+    maxWidth: {
+      control: 'text',
+      description: 'Maximum width of the timeline container'
+    },
+    showInfoIcons: {
+      control: 'boolean',
+      description: 'Show/hide info icons for tooltips',
+      defaultValue: true
+    },
+    infoIconPosition: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+      description: 'Position of tooltip relative to info icon'
+    },
+    containerStyle: {
+      control: 'object',
+      description: 'Style object for the timeline container'
+    }
+  },
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(Story, null)))]
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_Timeline.Timeline, args);
+
+// Pending state (first step active)
+const PendingState = exports.PendingState = Template.bind({});
+PendingState.args = {
+  steps: [{
+    id: 'pending',
+    date: '2025-08-10T11:57:00',
+    title: 'Pending',
+    tooltip: 'Payout is pending your confirmation',
+    caption: 'Payout is pending your confirmation.'
+  }, {
+    id: 'initiated',
+    state: 'inactive',
+    title: 'Initiated',
+    tooltip: 'Payout initiation information'
+  }, {
+    id: 'payout-confirmed',
+    state: 'inactive',
+    title: 'Payout Confirmed',
+    tooltip: 'Payout confirmation information'
+  }, {
+    id: 'paid-out',
+    state: 'inactive',
+    title: 'Paid out',
+    tooltip: 'Payout completion information'
+  }]
+};
+
+// Initiated state (first two steps completed/active)
+const InitiatedState = exports.InitiatedState = Template.bind({});
+InitiatedState.args = {
+  steps: [{
+    id: 'pending',
+    state: 'completed',
+    date: '2025-08-10T11:57:00',
+    title: 'Pending',
+    tooltip: 'Payout was pending'
+  }, {
+    id: 'initiated',
+    date: '2025-08-12T11:57:00',
+    title: 'Initiated',
+    tooltip: 'Awaiting your confirmation',
+    caption: 'Awaiting your confirmation.'
+  }, {
+    id: 'transferee-notified',
+    state: 'inactive',
+    title: 'Transferee notified',
+    tooltip: 'Transferee notification information'
+  }, {
+    id: 'payout-confirmed',
+    state: 'inactive',
+    title: 'Payout Confirmed',
+    tooltip: 'Payout confirmation information'
+  }, {
+    id: 'paid-out',
+    state: 'inactive',
+    title: 'Paid out',
+    tooltip: 'Payout completion information'
+  }]
+};
+
+// Payout Declined (failed state)
+const PayoutDeclined = exports.PayoutDeclined = Template.bind({});
+PayoutDeclined.args = {
+  steps: [{
+    id: 'pending',
+    state: 'completed',
+    date: '2025-08-10T11:57:00',
+    title: 'Pending',
+    tooltip: 'Payout was pending'
+  }, {
+    id: 'initiated',
+    state: 'completed',
+    date: '2025-08-12T11:57:00',
+    title: 'Initiated',
+    tooltip: 'Payout was initiated'
+  }, {
+    id: 'transferee-notified',
+    state: 'completed',
+    date: '2025-08-14T07:12:00',
+    title: 'Transferee notified',
+    tooltip: 'Transferee was notified',
+    caption: 'Change text'
+  }, {
+    id: 'payout-declined',
+    state: 'failed',
+    date: '2025-08-16T21:39:00',
+    title: 'Payout Declined',
+    tooltip: 'Payout was declined',
+    caption: 'Transferee declined the payout.'
+  }, {
+    id: 'paid-out',
+    state: 'inactive',
+    title: 'Paid out',
+    tooltip: 'Payout completion information'
+  }]
+};
+
+// Payout Confirmed (successful flow)
+const PayoutConfirmed = exports.PayoutConfirmed = Template.bind({});
+PayoutConfirmed.args = {
+  steps: [{
+    id: 'pending',
+    state: 'completed',
+    date: '2025-08-10T11:57:00',
+    title: 'Pending',
+    tooltip: 'Payout was pending'
+  }, {
+    id: 'initiated',
+    state: 'completed',
+    date: '2025-08-12T11:57:00',
+    title: 'Initiated',
+    tooltip: 'Payout was initiated'
+  }, {
+    id: 'transferee-notified',
+    state: 'completed',
+    date: '2025-08-14T07:12:00',
+    title: 'Transferee notified',
+    tooltip: 'Transferee was notified',
+    caption: 'Change text'
+  }, {
+    id: 'payout-confirmed',
+    state: 'completed',
+    date: '2025-08-16T21:39:00',
+    title: 'Payout Confirmed',
+    tooltip: 'Payout was confirmed',
+    caption: 'Transferee has confirmed the payout.'
+  }, {
+    id: 'paid-out',
+    state: 'inactive',
+    title: 'Paid out',
+    tooltip: 'Payout completion information'
+  }]
+};
+
+// All states example
+const AllStates = exports.AllStates = Template.bind({});
+AllStates.args = {
+  steps: [{
+    id: 'completed',
+    state: 'completed',
+    date: '2025-08-10T11:57:00',
+    title: 'Completed Step',
+    tooltip: 'This step is completed',
+    caption: 'This step has been successfully completed.'
+  }, {
+    id: 'active',
+    date: '2025-08-12T11:57:00',
+    title: 'Active Step',
+    tooltip: 'This step is currently active',
+    caption: 'This step is currently in progress.'
+  }, {
+    id: 'pending',
+    state: 'pending',
+    date: '2025-08-14T07:12:00',
+    title: 'Pending Step',
+    tooltip: 'This step is pending',
+    caption: 'This step is waiting to be processed.'
+  }, {
+    id: 'failed',
+    state: 'failed',
+    date: '2025-08-16T21:39:00',
+    title: 'Failed Step',
+    tooltip: 'This step has failed',
+    caption: 'This step encountered an error.'
+  }, {
+    id: 'inactive',
+    state: 'inactive',
+    title: 'Inactive Step',
+    tooltip: 'This step is not yet started'
+  }]
+};
+
+// Simple timeline without dates
+const SimpleTimeline = exports.SimpleTimeline = Template.bind({});
+SimpleTimeline.args = {
+  steps: [{
+    id: 'step1',
+    state: 'completed',
+    title: 'Step 1',
+    tooltip: 'First step completed'
+  }, {
+    id: 'step2',
+    title: 'Step 2',
+    tooltip: 'Second step in progress',
+    caption: 'Currently working on this step.'
+  }, {
+    id: 'step3',
+    state: 'inactive',
+    title: 'Step 3',
+    tooltip: 'Third step not started'
+  }]
+};
+
+// Without tooltips
+const WithoutTooltips = exports.WithoutTooltips = Template.bind({});
+WithoutTooltips.args = {
+  steps: [{
+    id: 'step1',
+    state: 'completed',
+    date: '2025-08-10T11:57:00',
+    title: 'Completed',
+    caption: 'This step is done.'
+  }, {
+    id: 'step2',
+    date: '2025-08-12T11:57:00',
+    title: 'Active',
+    caption: 'This step is in progress.'
+  }, {
+    id: 'step3',
+    state: 'inactive',
+    title: 'Upcoming'
+  }],
+  showInfoIcons: false
+};
+
+// Custom width
+const CustomWidth = exports.CustomWidth = Template.bind({});
+CustomWidth.args = {
+  steps: [{
+    id: 'step1',
+    state: 'completed',
+    date: '2025-08-10T11:57:00',
+    title: 'Step 1',
+    tooltip: 'First step'
+  }, {
+    id: 'step2',
+    date: '2025-08-12T11:57:00',
+    title: 'Step 2',
+    tooltip: 'Second step'
+  }, {
+    id: 'step3',
+    state: 'inactive',
+    title: 'Step 3',
+    tooltip: 'Third step'
+  }],
+  maxWidth: '600px'
+};
+
+// Long captions
+const LongCaptions = exports.LongCaptions = Template.bind({});
+LongCaptions.args = {
+  steps: [{
+    id: 'step1',
+    state: 'completed',
+    date: '2025-08-10T11:57:00',
+    title: 'Document Upload',
+    tooltip: 'Document upload information',
+    caption: 'All required documents have been successfully uploaded and verified by our team. The verification process took approximately 2 business days.'
+  }, {
+    id: 'step2',
+    date: '2025-08-12T11:57:00',
+    title: 'Review Process',
+    tooltip: 'Review process information',
+    caption: 'Your application is currently under review. Our compliance team is examining all submitted documents to ensure they meet our requirements. This typically takes 3-5 business days.'
+  }, {
+    id: 'step3',
+    state: 'inactive',
+    title: 'Approval',
+    tooltip: 'Approval information',
+    caption: 'Once the review is complete, you will receive a notification about the approval status of your application.'
+  }]
+};
+
+// Custom styling
+const CustomStyling = exports.CustomStyling = Template.bind({});
+CustomStyling.args = {
+  steps: [{
+    id: 'step1',
+    state: 'completed',
+    date: '2025-08-10T11:57:00',
+    title: 'Step 1',
+    tooltip: 'First step'
+  }, {
+    id: 'step2',
+    date: '2025-08-12T11:57:00',
+    title: 'Step 2',
+    tooltip: 'Second step'
+  }, {
+    id: 'step3',
+    state: 'inactive',
+    title: 'Step 3',
+    tooltip: 'Third step'
+  }],
+  containerStyle: {
+    padding: '20px',
+    backgroundColor: _colors.default.grey3,
+    borderRadius: '8px'
+  }
+};
+
+// Cancelled state
+const CancelledState = exports.CancelledState = Template.bind({});
+CancelledState.args = {
+  steps: [{
+    id: 'step1',
+    state: 'completed',
+    date: '2025-08-10T11:57:00',
+    title: 'Started',
+    tooltip: 'Process started'
+  }, {
+    id: 'step2',
+    state: 'completed',
+    date: '2025-08-12T11:57:00',
+    title: 'In Progress',
+    tooltip: 'Process in progress'
+  }, {
+    id: 'step3',
+    state: 'cancelled',
+    date: '2025-08-14T07:12:00',
+    title: 'Cancelled',
+    tooltip: 'Process was cancelled',
+    caption: 'The process was cancelled by the user.'
+  }, {
+    id: 'step4',
+    state: 'inactive',
+    title: 'Completed',
+    tooltip: 'Completion information'
+  }]
+};
+
+// Declined state
+const DeclinedState = exports.DeclinedState = Template.bind({});
+DeclinedState.args = {
+  steps: [{
+    id: 'step1',
+    state: 'completed',
+    date: '2025-08-10T11:57:00',
+    title: 'Submitted',
+    tooltip: 'Application submitted'
+  }, {
+    id: 'step2',
+    state: 'completed',
+    date: '2025-08-12T11:57:00',
+    title: 'Under Review',
+    tooltip: 'Application under review'
+  }, {
+    id: 'step3',
+    state: 'declined',
+    date: '2025-08-14T07:12:00',
+    title: 'Declined',
+    tooltip: 'Application declined',
+    caption: 'Your application was declined due to incomplete information.'
+  }, {
+    id: 'step4',
+    state: 'inactive',
+    title: 'Approved',
+    tooltip: 'Approval information'
+  }]
+};

package/dist/components/Timeline/Timeline.styles.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimelineStepWrapper = exports.TimelineContainer = exports.StepTitle = exports.StepIcon = exports.StepHeader = exports.StepDate = exports.StepContent = exports.StepCaption = exports.IconContainer = exports.ConnectingLine = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const iconSize = 20;
+const TimelineContainer = exports.TimelineContainer = _styledComponents.default.div.withConfig({
+  displayName: "Timelinestyles__TimelineContainer",
+  componentId: "sc-1anwsc5-0"
+})(["position:relative;width:100%;max-width:", ";"], props => props.maxWidth || '100%');
+const TimelineStepWrapper = exports.TimelineStepWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Timelinestyles__TimelineStepWrapper",
+  componentId: "sc-1anwsc5-1"
+})(["position:relative;display:flex;align-items:flex-start;margin-bottom:", ";"], props => props.isLast ? '0' : '10px');
+const IconContainer = exports.IconContainer = _styledComponents.default.div.withConfig({
+  displayName: "Timelinestyles__IconContainer",
+  componentId: "sc-1anwsc5-2"
+})(["display:flex;flex-direction:column;align-items:center;min-width:24px;width:24px;margin-right:16px;align-self:stretch;gap:4px;"]);
+const StepIcon = exports.StepIcon = _styledComponents.default.div.withConfig({
+  displayName: "Timelinestyles__StepIcon",
+  componentId: "sc-1anwsc5-3"
+})(["width:", "px;height:", "px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;", " svg path{stroke:", ";}"], iconSize, iconSize, props => {
+  switch (props.state) {
+    case 'completed':
+      return (0, _styledComponents.css)(["background-color:", ";color:", ";"], _colors.default.freshGreen, _colors.default.white);
+    case 'pending':
+      return (0, _styledComponents.css)(["background-color:", ";color:", ";"], _colors.default.warningOrange, _colors.default.white);
+    case 'failed':
+    case 'cancelled':
+      return (0, _styledComponents.css)(["background-color:", ";color:", ";"], _colors.default.darkRed, _colors.default.white);
+    case 'inactive':
+    default:
+      return (0, _styledComponents.css)(["background-color:transparent;border:1.5px solid ", ";color:", ";"], _colors.default.lightGrey, _colors.default.grey2);
+  }
+}, _colors.default.white);
+const ConnectingLine = exports.ConnectingLine = _styledComponents.default.div.withConfig({
+  displayName: "Timelinestyles__ConnectingLine",
+  componentId: "sc-1anwsc5-4"
+})(["width:2px;flex:1;min-height:10px;align-self:center;", ""], props => {
+  const lineColor = props.state === 'completed' ? _colors.default.freshGreen : props.state === 'pending' ? _colors.default.warningOrange : props.state === 'failed' || props.state === 'cancelled' ? _colors.default.darkRed : _colors.default.lightGrey;
+  return (0, _styledComponents.css)(["background-color:", ";"], lineColor);
+});
+const StepContent = exports.StepContent = _styledComponents.default.div.withConfig({
+  displayName: "Timelinestyles__StepContent",
+  componentId: "sc-1anwsc5-5"
+})(["flex:1;padding-bottom:", ";display:flex;flex-direction:column;gap:4px;"], props => props.hasCaption ? '8px' : '0');
+const StepHeader = exports.StepHeader = _styledComponents.default.div.withConfig({
+  displayName: "Timelinestyles__StepHeader",
+  componentId: "sc-1anwsc5-6"
+})(["display:flex;align-items:center;gap:8px;"]);
+const StepDate = exports.StepDate = _styledComponents.default.span.withConfig({
+  displayName: "Timelinestyles__StepDate",
+  componentId: "sc-1anwsc5-7"
+})(["color:", ";font-size:11px;font-weight:400;text-transform:uppercase;line-height:15px;letter-spacing:2px;word-wrap:break-word;"], _colors.default.black);
+const StepTitle = exports.StepTitle = _styledComponents.default.span.withConfig({
+  displayName: "Timelinestyles__StepTitle",
+  componentId: "sc-1anwsc5-8"
+})(["color:", ";font-size:16px;font-weight:600;line-height:24px;letter-spacing:0.6px;word-wrap:break-word;"], props => {
+  switch (props.state) {
+    case 'inactive':
+      return _colors.default.grey2;
+    default:
+      return _colors.default.black;
+  }
+});
+const StepCaption = exports.StepCaption = _styledComponents.default.div.withConfig({
+  displayName: "Timelinestyles__StepCaption",
+  componentId: "sc-1anwsc5-9"
+})(["color:", ";margin-top:4px;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0.6px;word-wrap:break-word;"], _colors.default.grey2);

package/dist/components/Timeline/TimelineStep.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TimelineStep = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Icon = require("../Icon/Icon.style");
+var _InfoIcon = require("../InfoIcon/InfoIcon");
+var _Timeline = require("./Timeline.styles");
+var _crossIcon = require("static/images/cross-icon.svg");
+var _checkIcon = require("static/images/check-icon.svg");
+var _moment = _interopRequireDefault(require("moment"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TimelineStep = _ref => {
+  let {
+    state = 'inactive',
+    date,
+    title,
+    tooltip,
+    caption,
+    isLast = false,
+    nextState,
+    customIcon,
+    showInfoIcon = true,
+    infoIconPosition = 'right',
+    // Style props
+    stepStyle,
+    iconStyle,
+    contentStyle,
+    className
+  } = _ref;
+  const getIcon = () => {
+    if (customIcon) return customIcon;
+    switch (state) {
+      case 'completed':
+        return /*#__PURE__*/_react.default.createElement(_checkIcon.ReactComponent, {
+          width: 12,
+          height: 12
+        });
+      case 'pending':
+        return /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+          icon: _Icon.iconsMap.inProgress,
+          size: 12,
+          style: {
+            marginLeft: 1
+          }
+        });
+      case 'failed':
+      case 'cancelled':
+        return /*#__PURE__*/_react.default.createElement(_crossIcon.ReactComponent, {
+          width: 8,
+          height: 8
+        });
+      case 'inactive':
+      default:
+        return null;
+      // Empty circle (handled by border)
+    }
+  };
+  const formattedDate = date ? (0, _moment.default)(date).format('DD. MMM YYYY HH:mm') : null;
+  return /*#__PURE__*/_react.default.createElement(_Timeline.TimelineStepWrapper, {
+    isLast: isLast,
+    style: stepStyle,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(_Timeline.IconContainer, null, /*#__PURE__*/_react.default.createElement(_Timeline.StepIcon, {
+    state: state,
+    style: iconStyle
+  }, getIcon()), !isLast && /*#__PURE__*/_react.default.createElement(_Timeline.ConnectingLine, {
+    state: state,
+    nextState: nextState
+  })), /*#__PURE__*/_react.default.createElement(_Timeline.StepContent, {
+    hasCaption: !!caption,
+    style: contentStyle
+  }, formattedDate && /*#__PURE__*/_react.default.createElement(_Timeline.StepDate, null, formattedDate), /*#__PURE__*/_react.default.createElement(_Timeline.StepHeader, null, /*#__PURE__*/_react.default.createElement(_Timeline.StepTitle, {
+    state: state,
+    isActive: state === 'active' || state === 'pending'
+  }, title), showInfoIcon && tooltip && /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+    title: tooltip,
+    position: infoIconPosition,
+    noMargin: true,
+    containerStyle: {
+      marginTop: 1
+    }
+  })), caption && /*#__PURE__*/_react.default.createElement(_Timeline.StepCaption, null, caption)));
+};
+exports.TimelineStep = TimelineStep;
+var _default = exports.default = TimelineStep;

package/dist/components/Timeline/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Timeline", {
+  enumerable: true,
+  get: function () {
+    return _Timeline.Timeline;
+  }
+});
+Object.defineProperty(exports, "TimelineStep", {
+  enumerable: true,
+  get: function () {
+    return _TimelineStep.TimelineStep;
+  }
+});
+var _Timeline = require("./Timeline");
+var _TimelineStep = require("./TimelineStep");

package/dist/components/TransactionDetails/TransactionDetailsTable.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TransactionDetailsTable = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TableContainer = _styledComponents.default.div.withConfig({
+  displayName: "TransactionDetailsTable__TableContainer",
+  componentId: "sc-yy5fem-0"
+})(["border:", ";overflow:auto;max-width:", ";margin:auto;width:100%;"], props => props.showBorders ? "1px solid ".concat(_colors.default.lightGrey) : 'none', props => props.maxWidth || '550px');
+const Table = _styledComponents.default.table.withConfig({
+  displayName: "TransactionDetailsTable__Table",
+  componentId: "sc-yy5fem-1"
+})(["width:100%;border-collapse:collapse;"]);
+const Row = _styledComponents.default.tr.withConfig({
+  displayName: "TransactionDetailsTable__Row",
+  componentId: "sc-yy5fem-2"
+})(["border-bottom:", ";&:last-child{border-bottom:none;}"], props => props.showBorders ? "1px solid ".concat(_colors.default.lightGrey) : 'none');
+const LabelCell = _styledComponents.default.td.withConfig({
+  displayName: "TransactionDetailsTable__LabelCell",
+  componentId: "sc-yy5fem-3"
+})(["padding:16px 20px;color:", ";width:50%;vertical-align:top;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0.1px;word-wrap:break-word;text-align:start;"], _colors.default.darkGrey);
+const ValueCell = _styledComponents.default.td.withConfig({
+  displayName: "TransactionDetailsTable__ValueCell",
+  componentId: "sc-yy5fem-4"
+})(["padding:16px 20px;color:", ";width:50%;vertical-align:top;text-align:right;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0.1px;word-wrap:break-word;"], _colors.default.black);
+const TransactionDetailsTable = _ref => {
+  let {
+    data,
+    showBorders = true,
+    labelCellStyle,
+    valueCellStyle,
+    rowStyle,
+    containerStyle,
+    maxWidth,
+    className,
+    labelCellClassName,
+    valueCellClassName,
+    rowClassName
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(TableContainer, {
+    style: containerStyle,
+    showBorders: showBorders,
+    maxWidth: maxWidth,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(Table, null, /*#__PURE__*/_react.default.createElement("tbody", null, data.map((item, index) => /*#__PURE__*/_react.default.createElement(Row, {
+    key: item.label || index,
+    style: rowStyle ? rowStyle(index, item) : {},
+    showBorders: showBorders,
+    className: rowClassName ? rowClassName(index, item) : undefined
+  }, /*#__PURE__*/_react.default.createElement(LabelCell, {
+    style: labelCellStyle ? labelCellStyle(index, item) : {},
+    className: labelCellClassName ? labelCellClassName(index, item) : undefined
+  }, item.label, item.labelIcon && item.labelIcon), /*#__PURE__*/_react.default.createElement(ValueCell, {
+    style: valueCellStyle ? valueCellStyle(index, item) : {},
+    className: valueCellClassName ? valueCellClassName(index, item) : undefined
+  }, item.valueIcon && item.valueIcon, item.value))))));
+};
+exports.TransactionDetailsTable = TransactionDetailsTable;
+var _default = exports.default = TransactionDetailsTable;