@oxy.so/bloom 2.9.0 → 2.11.0

package/lib/module/creator-studio/CreditsEditor.js

@@ -0,0 +1,209 @@
+"use strict";
+
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Button } from '../button';
+import { RiAddLine } from "../icons/remix/RiAddLine.js";
+import { RiDeleteBinLine } from "../icons/remix/RiDeleteBinLine.js";
+import { Select, SelectContent, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger, SelectValue } from '../select';
+import { TextFieldInput } from "../text-field/index.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { DEFAULT_CREDIT_ROLES, resolveCreatorStudioPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `CreditsEditor`: who wrote, produced and performed a track.
+ *
+ *   heading  `body-medium` title + an empty-state line (`body-2-regular`
+ *            text-secondary) while there are no credits
+ *   rows     8 apart: role `Select` (200 wide) · name `TextFieldInput` (fills) ·
+ *            a secondary delete icon button named "Remove credit <n>". Below 480px
+ *            of its own width the role takes its own line over name + delete
+ *   add      a secondary "Add credit" button with a plus glyph; the new row
+ *            takes the first role and an empty name
+ *
+ * Controlled: every change calls `onCreditsChange` with the whole list.
+ */
+
+export const CREDITS_EDITOR_LABELS = {
+  title: 'Credits',
+  role: 'Role',
+  name: 'Name',
+  add: 'Add credit',
+  remove: (index, name) => name ? `Remove credit ${index + 1}, ${name}` : `Remove credit ${index + 1}`,
+  empty: 'Credit the songwriters, producers and performers on this track.'
+};
+const STACK_BELOW = 480;
+let creditCounter = 0;
+function CreditsEditorComponent({
+  credits,
+  onCreditsChange,
+  roles = DEFAULT_CREDIT_ROLES,
+  createId,
+  disabled = false,
+  labels: labelOverrides,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveCreatorStudioPaint(theme), [theme]);
+  const labels = {
+    ...CREDITS_EDITOR_LABELS,
+    ...labelOverrides
+  };
+  const [width, setWidth] = useState(0);
+  const onLayout = useCallback(event => {
+    const next = Math.round(event.nativeEvent.layout.width);
+    setWidth(prev => prev === next ? prev : next);
+  }, []);
+  const stacked = width > 0 && width < STACK_BELOW;
+  const createIdRef = useRef(createId);
+  createIdRef.current = createId;
+  const update = (id, patch) => onCreditsChange(credits.map(c => c.id === id ? {
+    ...c,
+    ...patch
+  } : c));
+  const remove = id => onCreditsChange(credits.filter(c => c.id !== id));
+  const add = () => {
+    const id = createIdRef.current ? createIdRef.current() : `credit-${Date.now()}-${creditCounter++}`;
+    onCreditsChange([...credits, {
+      id,
+      role: roles[0]?.value ?? '',
+      name: ''
+    }]);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    onLayout: onLayout,
+    style: [styles.root, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.heading,
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-medium",
+        role: "heading",
+        style: {
+          color: paint.text
+        },
+        children: labels.title
+      }), credits.length === 0 ? /*#__PURE__*/_jsx(Text, {
+        variant: "body-2-regular",
+        style: {
+          color: paint.textSecondary
+        },
+        children: labels.empty
+      }) : null]
+    }), credits.map((credit, index) => {
+      const roleSelect = /*#__PURE__*/_jsx(View, {
+        style: stacked ? styles.roleStacked : styles.role,
+        children: /*#__PURE__*/_jsxs(Select, {
+          value: credit.role,
+          onValueChange: role => update(credit.id, {
+            role
+          }),
+          disabled: disabled,
+          children: [/*#__PURE__*/_jsxs(SelectTrigger, {
+            label: `${labels.role}, credit ${index + 1}`,
+            testID: testID ? `${testID}-role-${index}` : undefined,
+            children: [/*#__PURE__*/_jsx(SelectValue, {
+              placeholder: labels.role
+            }), /*#__PURE__*/_jsx(SelectIcon, {})]
+          }), /*#__PURE__*/_jsx(SelectContent, {
+            label: labels.role,
+            items: roles,
+            renderItem: item => /*#__PURE__*/_jsxs(SelectItem, {
+              value: item.value,
+              label: item.label,
+              children: [/*#__PURE__*/_jsx(SelectItemIndicator, {}), /*#__PURE__*/_jsx(SelectItemText, {
+                children: item.label
+              })]
+            })
+          })]
+        })
+      });
+      const nameAndRemove = /*#__PURE__*/_jsxs(View, {
+        style: styles.nameRow,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.name,
+          children: /*#__PURE__*/_jsx(TextFieldInput, {
+            label: `${labels.name}, credit ${index + 1}`,
+            placeholder: labels.name,
+            value: credit.name,
+            onChangeText: name => update(credit.id, {
+              name
+            }),
+            disabled: disabled,
+            testID: testID ? `${testID}-name-${index}` : undefined
+          })
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          size: "medium",
+          iconOnly: true,
+          leadingIcon: RiDeleteBinLine,
+          disabled: disabled,
+          accessibilityLabel: labels.remove(index, credit.name),
+          onPress: () => remove(credit.id),
+          testID: testID ? `${testID}-remove-${index}` : undefined
+        })]
+      });
+      return /*#__PURE__*/_jsxs(View, {
+        testID: testID ? `${testID}-row-${index}` : undefined,
+        style: stacked ? styles.rowStacked : styles.row,
+        children: [roleSelect, nameAndRemove]
+      }, credit.id);
+    }), /*#__PURE__*/_jsx(Button, {
+      variant: "secondary",
+      size: "medium",
+      leadingIcon: RiAddLine,
+      onPress: add,
+      disabled: disabled,
+      style: styles.add,
+      testID: testID ? `${testID}-add` : undefined,
+      children: labels.add
+    })]
+  });
+}
+export const CreditsEditor = /*#__PURE__*/memo(CreditsEditorComponent);
+CreditsEditor.displayName = 'CreditsEditor';
+const styles = StyleSheet.create({
+  root: {
+    width: '100%',
+    gap: 8,
+    minWidth: 0
+  },
+  heading: {
+    gap: 2,
+    marginBottom: 4
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8
+  },
+  rowStacked: {
+    gap: 6
+  },
+  role: {
+    width: 200,
+    flexShrink: 0
+  },
+  roleStacked: {
+    width: '100%'
+  },
+  nameRow: {
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4
+  },
+  name: {
+    flex: 1,
+    minWidth: 0
+  },
+  add: {
+    alignSelf: 'flex-start',
+    marginTop: 4
+  }
+});
+//# sourceMappingURL=CreditsEditor.js.map

package/lib/module/creator-studio/CreditsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useCallback","useMemo","useRef","useState","StyleSheet","View","Button","RiAddLine","RiDeleteBinLine","Select","SelectContent","SelectIcon","SelectItem","SelectItemIndicator","SelectItemText","SelectTrigger","SelectValue","TextFieldInput","useTheme","Text","DEFAULT_CREDIT_ROLES","resolveCreatorStudioPaint","jsx","_jsx","jsxs","_jsxs","CREDITS_EDITOR_LABELS","title","role","name","add","remove","index","empty","STACK_BELOW","creditCounter","CreditsEditorComponent","credits","onCreditsChange","roles","createId","disabled","labels","labelOverrides","style","testID","theme","paint","width","setWidth","onLayout","event","next","Math","round","nativeEvent","layout","prev","stacked","createIdRef","current","update","id","patch","map","c","filter","Date","now","value","styles","root","children","heading","variant","color","text","length","textSecondary","credit","roleSelect","roleStacked","onValueChange","label","undefined","placeholder","items","renderItem","item","nameAndRemove","nameRow","onChangeText","size","iconOnly","leadingIcon","accessibilityLabel","onPress","rowStacked","row","CreditsEditor","displayName","create","gap","minWidth","marginBottom","flexDirection","alignItems","flexShrink","flexGrow","flex","alignSelf","marginTop"],"sourceRoot":"../../../src","sources":["creator-studio/CreditsEditor.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/creator-studio/MetadataFields.js

@@ -0,0 +1,189 @@
+"use strict";
+
+import React, { memo, useMemo, useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { Button } from '../button';
+import { Chip } from "../chip/index.js";
+import { RiAddLine } from "../icons/remix/RiAddLine.js";
+import { RiCloseLine } from "../icons/remix/RiCloseLine.js";
+import { TextField, TextFieldHint, TextFieldInput, TextFieldLabel } from "../text-field/index.js";
+import { useTheme } from "../theme/use-theme.js";
+import { addUnique, formatIsrc, isValidIsrc, normalizeIsrc, pressDataSet, resolveCreatorStudioPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `ArtistChipsInput`: a list of names as removable chips over an input.
+ *
+ *   label     `TextFieldLabel` (with the required asterisk)
+ *   chips     `Chip` medium, wrapping, 6 apart; each carries a 16px remove
+ *             glyph named "Remove <name>"
+ *   input     `TextField` + `TextFieldInput`; Enter (or the "Add" button)
+ *             adds the trimmed name once — case-insensitively unique — and
+ *             clears the input. At `max` the input and button disable
+ *   hint      `TextFieldHint` under it
+ */
+function ArtistChipsInputComponent({
+  label,
+  values,
+  onValuesChange,
+  placeholder,
+  hint,
+  max,
+  removeLabel = name => `Remove ${name}`,
+  addLabel = 'Add',
+  disabled = false,
+  required = false,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveCreatorStudioPaint(theme), [theme]);
+  const [draft, setDraft] = useState('');
+  const full = max !== undefined && values.length >= max;
+  const blocked = disabled || full;
+  const commit = () => {
+    const next = addUnique(values, draft, max);
+    if (next.length !== values.length) onValuesChange(next);
+    setDraft('');
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: [styles.field, style],
+    children: [/*#__PURE__*/_jsx(TextFieldLabel, {
+      required: required,
+      children: label
+    }), values.length > 0 ? /*#__PURE__*/_jsx(View, {
+      style: styles.chips,
+      testID: testID ? `${testID}-chips` : undefined,
+      children: values.map(name => /*#__PURE__*/_jsx(Chip, {
+        size: "medium",
+        variant: "subtle",
+        disabled: disabled,
+        endIcon: /*#__PURE__*/_jsx(Pressable, {
+          ...pressDataSet(),
+          accessibilityRole: "button",
+          accessibilityLabel: removeLabel(name),
+          disabled: disabled,
+          hitSlop: {
+            top: 6,
+            bottom: 6,
+            left: 6,
+            right: 6
+          },
+          onPress: () => onValuesChange(values.filter(v => v !== name)),
+          testID: testID ? `${testID}-remove-${name}` : undefined,
+          style: styles.remove,
+          children: /*#__PURE__*/_jsx(RiCloseLine, {
+            width: 14,
+            height: 14,
+            fill: paint.textSecondary
+          })
+        }),
+        children: name
+      }, name))
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: styles.inputRow,
+      children: [/*#__PURE__*/_jsx(TextField, {
+        style: styles.input,
+        disabled: blocked,
+        children: /*#__PURE__*/_jsx(TextFieldInput, {
+          label: label,
+          value: draft,
+          onChangeText: setDraft,
+          placeholder: placeholder,
+          disabled: blocked,
+          returnKeyType: "done",
+          submitBehavior: "submit",
+          onSubmitEditing: commit,
+          testID: testID ? `${testID}-input` : undefined
+        })
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "secondary",
+        size: "medium",
+        leadingIcon: RiAddLine,
+        disabled: blocked || draft.trim() === '',
+        onPress: commit,
+        accessibilityLabel: `${addLabel} ${label.toLowerCase()}`,
+        testID: testID ? `${testID}-add` : undefined,
+        children: addLabel
+      })]
+    }), hint ? /*#__PURE__*/_jsx(TextFieldHint, {
+      children: hint
+    }) : null]
+  });
+}
+export const ArtistChipsInput = /*#__PURE__*/memo(ArtistChipsInputComponent);
+ArtistChipsInput.displayName = 'ArtistChipsInput';
+
+/**
+ * `IsrcField`: the recording code, grouped `CC-XXX-YY-NNNNN` as it is typed
+ * (uppercased, anything but letters and digits dropped, 12 characters max).
+ * The hint shows the format; once 12 characters are in and they do not form a
+ * valid code, the field paints invalid and the hint turns into the message.
+ * `onChangeText` receives the grouped value.
+ */
+function IsrcFieldComponent({
+  value,
+  onChangeText,
+  label = 'ISRC',
+  hint = 'Format: CC-XXX-YY-NNNNN',
+  invalidMessage = 'That is not a valid ISRC',
+  disabled = false,
+  style,
+  testID
+}) {
+  const complete = normalizeIsrc(value).length === 12;
+  const invalid = complete && !isValidIsrc(value);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: [styles.field, style],
+    children: [/*#__PURE__*/_jsx(TextFieldLabel, {
+      children: label
+    }), /*#__PURE__*/_jsx(TextField, {
+      isInvalid: invalid,
+      disabled: disabled,
+      children: /*#__PURE__*/_jsx(TextFieldInput, {
+        label: label,
+        value: value,
+        onChangeText: text => onChangeText(formatIsrc(text)),
+        placeholder: "GB-XXX-26-00001",
+        autoCapitalize: "characters",
+        autoCorrect: false,
+        disabled: disabled,
+        isInvalid: invalid,
+        testID: testID ? `${testID}-input` : undefined
+      })
+    }), /*#__PURE__*/_jsx(TextFieldHint, {
+      isInvalid: invalid,
+      children: invalid ? invalidMessage : hint
+    })]
+  });
+}
+export const IsrcField = /*#__PURE__*/memo(IsrcFieldComponent);
+IsrcField.displayName = 'IsrcField';
+const styles = StyleSheet.create({
+  field: {
+    width: '100%',
+    minWidth: 0
+  },
+  chips: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6,
+    marginBottom: 8
+  },
+  remove: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 9999
+  },
+  inputRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8
+  },
+  input: {
+    flex: 1,
+    minWidth: 0
+  }
+});
+//# sourceMappingURL=MetadataFields.js.map

package/lib/module/creator-studio/MetadataFields.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","useState","Pressable","StyleSheet","View","Button","Chip","RiAddLine","RiCloseLine","TextField","TextFieldHint","TextFieldInput","TextFieldLabel","useTheme","addUnique","formatIsrc","isValidIsrc","normalizeIsrc","pressDataSet","resolveCreatorStudioPaint","jsx","_jsx","jsxs","_jsxs","ArtistChipsInputComponent","label","values","onValuesChange","placeholder","hint","max","removeLabel","name","addLabel","disabled","required","style","testID","theme","paint","draft","setDraft","full","undefined","length","blocked","commit","next","styles","field","children","chips","map","size","variant","endIcon","accessibilityRole","accessibilityLabel","hitSlop","top","bottom","left","right","onPress","filter","v","remove","width","height","fill","textSecondary","inputRow","input","value","onChangeText","returnKeyType","submitBehavior","onSubmitEditing","leadingIcon","trim","toLowerCase","ArtistChipsInput","displayName","IsrcFieldComponent","invalidMessage","complete","invalid","isInvalid","text","autoCapitalize","autoCorrect","IsrcField","create","minWidth","flexDirection","flexWrap","gap","marginBottom","alignItems","justifyContent","borderRadius","flex"],"sourceRoot":"../../../src","sources":["creator-studio/MetadataFields.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/creator-studio/PayoutSummaryCard.js

@@ -0,0 +1,243 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { Button } from '../button';
+import { chartHueTone } from "../chart-cards/palette.js";
+import { bandSize } from "../chart-cards/geometry.js";
+import { CartesianPlot } from "../chart-cards/primitives/CartesianPlot.js";
+import { ChartCardSurface } from "../chart-cards/primitives/ChartCardSurface.js";
+import { TABULAR } from "../chart-cards/primitives/ChartHeader.js";
+import { describeDeltaRatio, groupThousands } from "../chart-cards/primitives/format.js";
+import { useActiveIndex } from "../chart-cards/primitives/use-active-index.js";
+import { useChartCardPalette } from "../chart-cards/primitives/use-chart-palette.js";
+import { roundedBarPath, singleBarSlot } from "../chart-cards/rounded-bar-geometry.js";
+import { lerp, useChartProgress } from "../chart-cards/use-chart-progress.js";
+import { Chip } from "../chip/index.js";
+import { Divider } from "../divider/index.js";
+import { RiArrowRightSLine } from "../icons/remix/RiArrowRightSLine.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `PayoutSummaryCard`: what the artist has earned and when it arrives.
+ *
+ *   card      `ChartCardSurface`, content-sized, gap 16
+ *   headline  label `body-medium` text-secondary; the estimate `title-1-medium`
+ *             tabular + the delta `Chip` (status lime / rose / neutral)
+ *   bars      a 112px `CartesianPlot` (band scale, no Y axis, month labels):
+ *             rounded bars (radius 6, 30% category gap, max 28 wide) in
+ *             `chart-track`, the current (last) month in `chart-6`; the hovered
+ *             bar takes `chart-6-active` and its month and value replace the
+ *             caption over the bars
+ *   facts     two rows — Last payout (amount + date) and Next payout (date) —
+ *             label `body-2-regular` text-secondary, value `body-2-medium`
+ *             tabular, a hairline between the plot and the rows
+ *   link      "View statements" link button with a chevron
+ */
+
+export const PAYOUT_SUMMARY_LABELS = {
+  estimated: 'Estimated earnings this month',
+  lastPayout: 'Last payout',
+  nextPayout: 'Next payout',
+  statements: 'View statements',
+  chart: 'Monthly earnings'
+};
+const PLOT_HEIGHT = 112;
+const BAR_RADIUS = 6;
+const defaultFormat = value => `$${groupThousands(Math.round(value))}`;
+function PayoutSummaryCardComponent({
+  estimated,
+  delta,
+  lastPayout,
+  nextPayoutDate,
+  months,
+  format = defaultFormat,
+  onViewStatements,
+  statementsHref,
+  labels: labelOverrides,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const palette = useChartCardPalette();
+  const labels = {
+    ...PAYOUT_SUMMARY_LABELS,
+    ...labelOverrides
+  };
+  const tone = useMemo(() => chartHueTone(theme, 6), [theme]);
+  const [activeIndex, setActiveIndex] = useActiveIndex(months.length, undefined, undefined);
+  const values = useMemo(() => months.map(m => m.value), [months]);
+  const categories = useMemo(() => months.map(m => m.label), [months]);
+  const max = Math.max(1, ...values);
+  const anim = useChartProgress(values);
+  const chip = delta !== undefined ? describeDeltaRatio(delta) : undefined;
+  const chipPaint = chip ? chip.tone === 'positive' ? palette.positive : chip.tone === 'negative' ? palette.negative : palette.neutral : null;
+  const hovered = activeIndex !== null ? months[activeIndex] : undefined;
+  const summary = `${labels.chart}: ${months.map(m => `${m.label} ${format(m.value)}`).join(', ')}`;
+  return /*#__PURE__*/_jsxs(ChartCardSurface, {
+    height: "auto",
+    style: style,
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.headline,
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-medium",
+        numberOfLines: 1,
+        style: {
+          color: palette.textSecondary
+        },
+        children: labels.estimated
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.valueRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "title-1-medium",
+          numberOfLines: 1,
+          testID: testID ? `${testID}-estimate` : undefined,
+          style: [{
+            color: palette.text
+          }, TABULAR],
+          children: estimated
+        }), chip && chipPaint ? /*#__PURE__*/_jsx(Chip, {
+          size: "medium",
+          testID: testID ? `${testID}-delta` : undefined,
+          style: {
+            backgroundColor: chipPaint.background
+          },
+          textStyle: {
+            color: chipPaint.foreground
+          },
+          children: chip.label
+        }) : null]
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "caption-1-medium",
+        numberOfLines: 1,
+        testID: testID ? `${testID}-caption` : undefined,
+        style: [{
+          color: hovered ? palette.text : palette.textTertiary
+        }, TABULAR],
+        children: hovered ? `${hovered.label} · ${format(hovered.value)}` : labels.chart
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          height: PLOT_HEIGHT,
+          width: '100%'
+        },
+        children: /*#__PURE__*/_jsx(CartesianPlot, {
+          categories: categories,
+          xScale: "band",
+          yAxisWidth: 0,
+          yDomain: [0, max],
+          yTicks: [],
+          formatYTick: () => '',
+          outside: "clear",
+          onActiveIndexChange: setActiveIndex,
+          palette: palette,
+          accessibilityLabel: summary,
+          testID: testID ? `${testID}-plot` : undefined,
+          children: ({
+            size,
+            box,
+            y
+          }) => {
+            const band = bandSize(months.length, box);
+            const slot = singleBarSlot(band, 0.3, 28);
+            return /*#__PURE__*/_jsx(Svg, {
+              width: size.width,
+              height: size.height,
+              pointerEvents: "none",
+              children: values.map((v, i) => {
+                const shown = anim.from && anim.from.length === values.length ? lerp(anim.from[i], v, anim.progress) : v * anim.progress;
+                const top = y(shown);
+                const current = i === months.length - 1;
+                const fill = activeIndex === i ? tone.activeColor : current ? tone.color : palette.track;
+                return /*#__PURE__*/_jsx(Path, {
+                  testID: testID ? `${testID}-bar-${i}` : undefined,
+                  d: roundedBarPath(box.left + i * band + slot.offset, top, slot.size, Math.max(0, box.bottom - top), BAR_RADIUS),
+                  fill: fill
+                }, `bar-${i}`);
+              })
+            });
+          }
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(View, {
+      style: styles.facts,
+      children: [lastPayout ? /*#__PURE__*/_jsxs(View, {
+        style: styles.fact,
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "body-2-regular",
+          style: {
+            color: palette.textSecondary
+          },
+          children: labels.lastPayout
+        }), /*#__PURE__*/_jsx(Text, {
+          variant: "body-2-medium",
+          numberOfLines: 1,
+          style: [styles.factValue, {
+            color: palette.text
+          }, TABULAR],
+          children: `${lastPayout.amount} · ${lastPayout.date}`
+        })]
+      }) : null, nextPayoutDate ? /*#__PURE__*/_jsxs(View, {
+        style: styles.fact,
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "body-2-regular",
+          style: {
+            color: palette.textSecondary
+          },
+          children: labels.nextPayout
+        }), /*#__PURE__*/_jsx(Text, {
+          variant: "body-2-medium",
+          numberOfLines: 1,
+          style: [styles.factValue, {
+            color: palette.text
+          }, TABULAR],
+          children: nextPayoutDate
+        })]
+      }) : null]
+    }), onViewStatements || statementsHref ? /*#__PURE__*/_jsx(Button, {
+      variant: "link",
+      size: "small",
+      trailingIcon: RiArrowRightSLine,
+      onPress: onViewStatements,
+      href: statementsHref,
+      style: styles.link,
+      testID: testID ? `${testID}-statements` : undefined,
+      children: labels.statements
+    }) : null]
+  });
+}
+export const PayoutSummaryCard = /*#__PURE__*/memo(PayoutSummaryCardComponent);
+PayoutSummaryCard.displayName = 'PayoutSummaryCard';
+const styles = StyleSheet.create({
+  headline: {
+    gap: 2,
+    minWidth: 0
+  },
+  valueRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    flexWrap: 'wrap'
+  },
+  facts: {
+    gap: 8
+  },
+  fact: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12
+  },
+  factValue: {
+    flexShrink: 1,
+    textAlign: 'right'
+  },
+  link: {
+    alignSelf: 'flex-start'
+  }
+});
+//# sourceMappingURL=PayoutSummaryCard.js.map