@oxy.so/bloom 2.9.0 → 2.11.0

package/lib/commonjs/creator-studio/ArtworkUploader.js

@@ -0,0 +1,244 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ArtworkUploader = exports.ARTWORK_UPLOADER_LABELS = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _button = require("../button");
+var _FileUpload = require("../file-upload/FileUpload.js");
+var _RiDeleteBinLine = require("../icons/remix/RiDeleteBinLine.js");
+var _RiErrorWarningLine = require("../icons/remix/RiErrorWarningLine.js");
+var _RiImageLine = require("../icons/remix/RiImageLine.js");
+var _RiRefreshLine = require("../icons/remix/RiRefreshLine.js");
+var _context = require("../image-resolver/context.js");
+var _isImageUrl = require("../image-resolver/is-image-url.js");
+var _useTheme = require("../theme/use-theme.js");
+var _index = require("../typography/index.js");
+var _shared = require("./shared.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+/**
+ * `ArtworkUploader`: a release's square cover.
+ *
+ *   heading   `body-medium` title
+ *   square    up to 320 wide (or `size`), aspect 1, radius 16
+ *   empty     Bloom's `FileUpload` filling the square — drag and drop or pick
+ *             on web, `onPickFiles` on native — limited to JPG / PNG
+ *   preview   the image covering the square; "Replace" (secondary, refresh
+ *             glyph) and a delete icon button on a row pinned 12px inside the
+ *             bottom edge. Replace swaps the preview for the drop zone with a
+ *             "Cancel" under it until a file is picked
+ *   error     a 2px error ring over the square and the message (warning glyph,
+ *             `body-2-regular`, error colour) announced politely under it
+ *   caption   the requirements (`caption-1-regular` text-tertiary)
+ *
+ * The component never decodes an image: the app measures what was picked and
+ * passes `error` — `artworkDimensionsError(width, height)` builds the "too
+ * small" message.
+ */
+
+const ARTWORK_UPLOADER_LABELS = exports.ARTWORK_UPLOADER_LABELS = {
+  title: 'Artwork',
+  requirements: '3000×3000 px, JPG or PNG',
+  replace: 'Replace',
+  remove: 'Remove artwork',
+  cancel: 'Cancel',
+  preview: 'Release artwork',
+  upload: 'Upload artwork'
+};
+const DEFAULT_MAX = 320;
+const DEFAULT_EXTENSIONS = ['jpg', 'jpeg', 'png'];
+function ArtworkUploaderComponent({
+  artwork,
+  onFileSelected,
+  onRemove,
+  onPickFiles,
+  error,
+  progress,
+  file,
+  allowedExtensions = DEFAULT_EXTENSIONS,
+  maxBytes = 20 * 1024 * 1024,
+  size,
+  disabled = false,
+  labels: labelOverrides,
+  style,
+  testID
+}) {
+  const theme = (0, _useTheme.useTheme)();
+  const paint = (0, _react.useMemo)(() => (0, _shared.resolveCreatorStudioPaint)(theme), [theme]);
+  const labels = {
+    ...ARTWORK_UPLOADER_LABELS,
+    ...labelOverrides
+  };
+  const resolver = (0, _context.useImageResolver)();
+  const [replacing, setReplacing] = (0, _react.useState)(false);
+  const uri = artwork ? (0, _isImageUrl.isImageUrl)(artwork) ? artwork : resolver?.(artwork, 'cover') : undefined;
+  const showPreview = Boolean(uri) && !replacing;
+  const id = suffix => testID ? `${testID}-${suffix}` : undefined;
+  const pick = picked => {
+    setReplacing(false);
+    onFileSelected?.(picked);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: testID,
+    style: [styles.root, {
+      maxWidth: size ?? DEFAULT_MAX
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+      variant: "body-medium",
+      style: {
+        color: paint.text
+      },
+      children: labels.title
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.square, size ? {
+        width: size,
+        height: size
+      } : null],
+      children: [showPreview ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.preview, {
+          backgroundColor: paint.placeholder
+        }],
+        testID: id('preview'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+          source: {
+            uri: uri
+          },
+          style: styles.fill,
+          role: "img",
+          accessibilityLabel: labels.preview,
+          accessibilityIgnoresInvertColors: true
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.previewActions,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+            variant: "secondary",
+            size: "small",
+            leadingIcon: _RiRefreshLine.RiRefreshLine,
+            onPress: () => setReplacing(true),
+            disabled: disabled,
+            testID: id('replace'),
+            children: labels.replace
+          }), onRemove ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+            variant: "secondary",
+            size: "small",
+            iconOnly: true,
+            leadingIcon: _RiDeleteBinLine.RiDeleteBinLine,
+            accessibilityLabel: labels.remove,
+            onPress: onRemove,
+            disabled: disabled,
+            testID: id('remove')
+          }) : null]
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileUpload.FileUpload, {
+        onFileSelected: pick,
+        onPickFiles: onPickFiles,
+        allowedExtensions: allowedExtensions,
+        maxBytes: maxBytes,
+        progress: progress,
+        file: file,
+        disabled: disabled,
+        accessibilityLabel: labels.upload,
+        renderFileIcon: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_RiImageLine.RiImageLine, {
+          width: 24,
+          height: 24,
+          fill: paint.textSecondary
+        }),
+        style: styles.fill,
+        testID: id('dropzone')
+      }), error ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: "none",
+        testID: id('error-ring'),
+        style: [styles.errorRing, {
+          borderColor: paint.error
+        }]
+      }) : null]
+    }), replacing && uri ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+      variant: "secondary",
+      size: "small",
+      onPress: () => setReplacing(false),
+      style: styles.cancel,
+      testID: id('cancel'),
+      children: labels.cancel
+    }) : null, error ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: id('error'),
+      "aria-live": "polite",
+      style: styles.errorRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RiErrorWarningLine.RiErrorWarningLine, {
+        width: 16,
+        height: 16,
+        fill: paint.error
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+        variant: "body-2-regular",
+        style: [styles.errorText, {
+          color: paint.error
+        }],
+        children: error
+      })]
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+      variant: "caption-1-regular",
+      style: {
+        color: paint.textTertiary
+      },
+      children: labels.requirements
+    })]
+  });
+}
+const ArtworkUploader = exports.ArtworkUploader = /*#__PURE__*/(0, _react.memo)(ArtworkUploaderComponent);
+ArtworkUploader.displayName = 'ArtworkUploader';
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    width: '100%',
+    gap: 8,
+    minWidth: 0
+  },
+  square: {
+    width: '100%',
+    aspectRatio: 1,
+    borderRadius: _shared.CARD_RADIUS
+  },
+  fill: {
+    width: '100%',
+    height: '100%'
+  },
+  // The preview clips to the radius; the drop zone must not be clipped (its
+  // progress pill rides over the top edge).
+  preview: {
+    width: '100%',
+    height: '100%',
+    borderRadius: _shared.CARD_RADIUS,
+    overflow: 'hidden'
+  },
+  previewActions: {
+    position: 'absolute',
+    left: 12,
+    right: 12,
+    bottom: 12,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: 8
+  },
+  errorRing: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    borderRadius: _shared.CARD_RADIUS,
+    borderWidth: 2
+  },
+  cancel: {
+    alignSelf: 'flex-start'
+  },
+  errorRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 6
+  },
+  errorText: {
+    flex: 1,
+    minWidth: 0
+  }
+});
+//# sourceMappingURL=ArtworkUploader.js.map

package/lib/commonjs/creator-studio/ArtworkUploader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_button","_FileUpload","_RiDeleteBinLine","_RiErrorWarningLine","_RiImageLine","_RiRefreshLine","_context","_isImageUrl","_useTheme","_index","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ARTWORK_UPLOADER_LABELS","exports","title","requirements","replace","remove","cancel","preview","upload","DEFAULT_MAX","DEFAULT_EXTENSIONS","ArtworkUploaderComponent","artwork","onFileSelected","onRemove","onPickFiles","error","progress","file","allowedExtensions","maxBytes","size","disabled","labels","labelOverrides","style","testID","theme","useTheme","paint","useMemo","resolveCreatorStudioPaint","resolver","useImageResolver","replacing","setReplacing","useState","uri","isImageUrl","undefined","showPreview","Boolean","id","suffix","pick","picked","jsxs","View","styles","root","maxWidth","children","jsx","Text","variant","color","text","square","width","height","backgroundColor","placeholder","Image","source","fill","role","accessibilityLabel","accessibilityIgnoresInvertColors","previewActions","Button","leadingIcon","RiRefreshLine","onPress","iconOnly","RiDeleteBinLine","FileUpload","renderFileIcon","RiImageLine","textSecondary","pointerEvents","errorRing","borderColor","errorRow","RiErrorWarningLine","errorText","textTertiary","ArtworkUploader","memo","displayName","StyleSheet","create","gap","minWidth","aspectRatio","borderRadius","CARD_RADIUS","overflow","position","left","right","bottom","flexDirection","justifyContent","top","borderWidth","alignSelf","alignItems","flex"],"sourceRoot":"../../../src","sources":["creator-studio/ArtworkUploader.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/creator-studio/AudienceBreakdown.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AudienceBreakdown = exports.AUDIENCE_BREAKDOWN_LABELS = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _BarListCard = require("../chart-cards/BarListCard.js");
+var _RadialChartCard = require("../chart-cards/RadialChartCard.js");
+var _format = require("../chart-cards/primitives/format.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+/**
+ * `AudienceBreakdown`: who is listening and where they came from, as four
+ * chart cards laid out on the container's own width.
+ *
+ *   locations  `BarListCard` — Cities / Countries tabs, share of listeners
+ *   age        `BarListCard` — one row per age group, share of listeners
+ *   gender     `RadialChartCard` `stacked` — the half-gauge donut
+ *   sources    `RadialChartCard` `stacked` — the half-gauge donut with a legend
+ *
+ * Two columns (16 apart) from 720px of its own width, one below. Every card
+ * keeps its own hover, motion and accessible summary.
+ */
+
+const AUDIENCE_BREAKDOWN_LABELS = exports.AUDIENCE_BREAKDOWN_LABELS = {
+  locations: 'Top locations',
+  cities: 'Cities',
+  countries: 'Countries',
+  age: 'Age',
+  gender: 'Gender',
+  sources: 'Listening sources',
+  metric: 'Listeners'
+};
+const TWO_COLUMNS_FROM = 720;
+const GAP = 16;
+function AudienceBreakdownComponent({
+  cities,
+  countries,
+  ages,
+  genders,
+  sources,
+  range,
+  format = _format.groupThousands,
+  labels: labelOverrides,
+  style,
+  testID
+}) {
+  const labels = {
+    ...AUDIENCE_BREAKDOWN_LABELS,
+    ...labelOverrides
+  };
+  const [width, setWidth] = (0, _react.useState)(0);
+  const onLayout = (0, _react.useCallback)(event => {
+    const next = Math.round(event.nativeEvent.layout.width);
+    setWidth(prev => prev === next ? prev : next);
+  }, []);
+  const twoColumns = width >= TWO_COLUMNS_FROM;
+  // Equal shares in a row only: a zero basis in a column collapses an auto-height card.
+  const cell = twoColumns ? styles.cell : undefined;
+  const tabs = (0, _react.useMemo)(() => [{
+    id: 'cities',
+    label: labels.cities,
+    items: cities
+  }, {
+    id: 'countries',
+    label: labels.countries,
+    items: countries
+  }], [labels.cities, labels.countries, cities, countries]);
+  const locations = /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarListCard.BarListCard, {
+    tabs: tabs,
+    metricLabel: labels.metric,
+    format: format,
+    style: cell,
+    testID: testID ? `${testID}-locations` : undefined
+  });
+  const age = /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarListCard.BarListCard, {
+    title: labels.age,
+    items: ages,
+    metricLabel: labels.metric,
+    format: format,
+    limit: Math.max(5, ages.length),
+    style: cell,
+    testID: testID ? `${testID}-age` : undefined
+  });
+  const gender = /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadialChartCard.RadialChartCard, {
+    variant: "stacked",
+    title: labels.gender,
+    data: genders,
+    range: range,
+    format: format,
+    style: cell,
+    testID: testID ? `${testID}-gender` : undefined
+  });
+  const source = /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadialChartCard.RadialChartCard, {
+    variant: "stacked",
+    title: labels.sources,
+    data: sources,
+    range: range,
+    format: format,
+    style: cell,
+    testID: testID ? `${testID}-sources` : undefined
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    testID: testID,
+    onLayout: onLayout,
+    style: [styles.root, style],
+    children: twoColumns ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.row,
+        children: [locations, source]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.row,
+        children: [age, gender]
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [locations, source, age, gender]
+    })
+  });
+}
+const AudienceBreakdown = exports.AudienceBreakdown = /*#__PURE__*/(0, _react.memo)(AudienceBreakdownComponent);
+AudienceBreakdown.displayName = 'AudienceBreakdown';
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    width: '100%',
+    gap: GAP
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    gap: GAP
+  },
+  cell: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
+    minWidth: 0
+  }
+});
+//# sourceMappingURL=AudienceBreakdown.js.map

package/lib/commonjs/creator-studio/AudienceBreakdown.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_BarListCard","_RadialChartCard","_format","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AUDIENCE_BREAKDOWN_LABELS","exports","locations","cities","countries","age","gender","sources","metric","TWO_COLUMNS_FROM","GAP","AudienceBreakdownComponent","ages","genders","range","format","groupThousands","labels","labelOverrides","style","testID","width","setWidth","useState","onLayout","useCallback","event","next","Math","round","nativeEvent","layout","prev","twoColumns","cell","styles","undefined","tabs","useMemo","id","label","items","jsx","BarListCard","metricLabel","title","limit","max","length","RadialChartCard","variant","data","source","View","root","children","jsxs","Fragment","row","AudienceBreakdown","memo","displayName","StyleSheet","create","gap","flexDirection","alignItems","flexGrow","flexShrink","flexBasis","minWidth"],"sourceRoot":"../../../src","sources":["creator-studio/AudienceBreakdown.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/creator-studio/AudienceOverview.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TREND_DELTA_COLORS = exports.AudienceOverview = exports.AUDIENCE_PERIODS = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _Sparkline = require("../chart-cards/primitives/Sparkline.js");
+var _RiBookmarkLine = require("../icons/remix/RiBookmarkLine.js");
+var _RiHeadphoneLine = require("../icons/remix/RiHeadphoneLine.js");
+var _RiPlayLine = require("../icons/remix/RiPlayLine.js");
+var _RiUserFollowLine = require("../icons/remix/RiUserFollowLine.js");
+var _index = require("../segmented-control/index.js");
+var _StatCards = require("../stat-cards/StatCards.js");
+var _useTheme = require("../theme/use-theme.js");
+var _index2 = require("../typography/index.js");
+var _shared = require("./shared.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+/**
+ * `AudienceOverview`: the dashboard's opening row — a heading with a period
+ * `SegmentedControl`, over `StatCards` (plain) whose tiles carry a
+ * `Sparkline` accessory.
+ *
+ *   header   heading `headline-semibold` + optional caption `body-2-regular`
+ *            text-secondary; the switcher on the right, top-aligned. Below
+ *            560px of its OWN width the switcher drops under the heading
+ *   gap      16 between the header and the tiles
+ *   tiles    `StatCards` — 2 columns, 4 from a 1024px window
+ *   spark    72 × 28, the trend's status colour (up → positive, down →
+ *            negative, flat → text-tertiary), hidden from assistive tech: the
+ *            value and delta chip already say it
+ */
+
+const AUDIENCE_PERIODS = exports.AUDIENCE_PERIODS = [{
+  value: '7d',
+  label: '7 days'
+}, {
+  value: '28d',
+  label: '28 days'
+}, {
+  value: '12m',
+  label: '12 months'
+}, {
+  value: 'all',
+  label: 'All time'
+}];
+const KIND_ICONS = {
+  listeners: _RiHeadphoneLine.RiHeadphoneLine,
+  streams: _RiPlayLine.RiPlayLine,
+  followers: _RiUserFollowLine.RiUserFollowLine,
+  saves: _RiBookmarkLine.RiBookmarkLine
+};
+
+/** A trend onto the stat card's delta colour. */
+const TREND_DELTA_COLORS = exports.TREND_DELTA_COLORS = {
+  up: 'lime',
+  down: 'rose',
+  flat: 'neutral'
+};
+const TREND_SPARK_TONES = {
+  up: 'positive',
+  down: 'negative',
+  flat: 'neutral'
+};
+
+/** Below this own width the switcher stacks under the heading. */
+const STACK_BELOW = 560;
+function AudienceOverviewComponent({
+  metrics,
+  period,
+  onPeriodChange,
+  periods = AUDIENCE_PERIODS,
+  title = 'Audience',
+  caption,
+  periodLabel = 'Period',
+  style,
+  testID
+}) {
+  const theme = (0, _useTheme.useTheme)();
+  const paint = (0, _react.useMemo)(() => (0, _shared.resolveCreatorStudioPaint)(theme), [theme]);
+  const [width, setWidth] = (0, _react.useState)(0);
+  const onLayout = (0, _react.useCallback)(event => {
+    const next = Math.round(event.nativeEvent.layout.width);
+    setWidth(prev => prev === next ? prev : next);
+  }, []);
+  const stacked = width > 0 && width < STACK_BELOW;
+  const stats = (0, _react.useMemo)(() => metrics.map(metric => ({
+    icon: metric.icon ?? KIND_ICONS[metric.kind],
+    label: metric.label,
+    value: metric.value,
+    delta: metric.delta,
+    deltaColor: TREND_DELTA_COLORS[metric.trend],
+    accessory: metric.series && metric.series.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sparkline.Sparkline, {
+      data: metric.series,
+      tone: TREND_SPARK_TONES[metric.trend]
+    }) : undefined
+  })), [metrics]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: testID,
+    onLayout: onLayout,
+    style: [styles.root, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: stacked ? styles.headerStacked : styles.header,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.heading,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+          variant: "headline-semibold",
+          role: "heading",
+          numberOfLines: 1,
+          style: {
+            color: paint.text
+          },
+          children: title
+        }), caption ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+          variant: "body-2-regular",
+          style: {
+            color: paint.textSecondary
+          },
+          children: caption
+        }) : null]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        testID: testID ? `${testID}-period` : undefined,
+        style: stacked ? styles.periodStacked : null,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SegmentedControl, {
+          label: periodLabel,
+          type: "radio",
+          size: "small",
+          value: period,
+          onChange: onPeriodChange,
+          children: periods.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SegmentedControlItem, {
+            value: option.value,
+            testID: testID ? `${testID}-period-${option.value}` : undefined,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SegmentedControlItemText, {
+              children: option.label
+            })
+          }, option.value))
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatCards.StatCards, {
+      stats: stats,
+      testID: testID ? `${testID}-stats` : undefined
+    })]
+  });
+}
+const AudienceOverview = exports.AudienceOverview = /*#__PURE__*/(0, _react.memo)(AudienceOverviewComponent);
+AudienceOverview.displayName = 'AudienceOverview';
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    width: '100%',
+    gap: 16
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: 16
+  },
+  headerStacked: {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap: 12
+  },
+  heading: {
+    flexShrink: 1,
+    minWidth: 0,
+    gap: 2
+  },
+  periodStacked: {
+    alignSelf: 'flex-start',
+    maxWidth: '100%'
+  }
+});
+//# sourceMappingURL=AudienceOverview.js.map

package/lib/commonjs/creator-studio/AudienceOverview.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_Sparkline","_RiBookmarkLine","_RiHeadphoneLine","_RiPlayLine","_RiUserFollowLine","_index","_StatCards","_useTheme","_index2","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AUDIENCE_PERIODS","exports","value","label","KIND_ICONS","listeners","RiHeadphoneLine","streams","RiPlayLine","followers","RiUserFollowLine","saves","RiBookmarkLine","TREND_DELTA_COLORS","up","down","flat","TREND_SPARK_TONES","STACK_BELOW","AudienceOverviewComponent","metrics","period","onPeriodChange","periods","title","caption","periodLabel","style","testID","theme","useTheme","paint","useMemo","resolveCreatorStudioPaint","width","setWidth","useState","onLayout","useCallback","event","next","Math","round","nativeEvent","layout","prev","stacked","stats","map","metric","icon","kind","delta","deltaColor","trend","accessory","series","length","jsx","Sparkline","data","tone","undefined","jsxs","View","styles","root","children","headerStacked","header","heading","Text","variant","role","numberOfLines","color","text","textSecondary","periodStacked","SegmentedControl","type","size","onChange","option","SegmentedControlItem","SegmentedControlItemText","StatCards","AudienceOverview","memo","displayName","StyleSheet","create","gap","flexDirection","alignItems","justifyContent","flexShrink","minWidth","alignSelf","maxWidth"],"sourceRoot":"../../../src","sources":["creator-studio/AudienceOverview.tsx"],"mappings":"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","ignoreList":[]}