@fairmint/ui 0.2.31 → 0.2.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -45016,6 +45016,526 @@ function EquityGrantCard({
45016
45016
  }
45017
45017
  );
45018
45018
  }
45019
+ const DEFAULT_RIBBON_CONFIG = {
45020
+ baseline: 0.82,
45021
+ xEndStagger: 9e-3,
45022
+ xEndDraw: [0.84, 0.849, 0.858, 0.867, 0.876],
45023
+ xEndCurve: 0.914,
45024
+ xStart: [0.05, 0.19, 0.34, 0.5, 0.66],
45025
+ kArr: [1.7, 2.4, 3.1, 3.9, 4.9],
45026
+ V: [0.082, 0.102, 0.132, 0.172, 0.21],
45027
+ vMin: [0.038, 0.04, 0.042, 0.044, 0.046],
45028
+ xStem: [0.05, 0.04, 0.035, 0.03, 0.025],
45029
+ labelX: [0.08, 0.24, 0.4, 0.56, 0.8],
45030
+ labelAboveGap: [0.034, 0.03, 0.028, 0.024],
45031
+ labelLeftGap: 0.055,
45032
+ labelLiquidityGap: 0.016,
45033
+ labelNudge: [
45034
+ [0, 0],
45035
+ [0, 0],
45036
+ [0, 0],
45037
+ [0, 0],
45038
+ [0, -0.012]
45039
+ ],
45040
+ samples: 72
45041
+ };
45042
+ const MARK_RIBBON_RIGHT_EDGE = 0.936;
45043
+ const MARK_FIT_HORIZONTAL_COMPRESS = 0.78;
45044
+ const MARK_RIBBON_CONFIG = {
45045
+ ...DEFAULT_RIBBON_CONFIG,
45046
+ baseline: 0.97,
45047
+ xEndDraw: [
45048
+ MARK_RIBBON_RIGHT_EDGE,
45049
+ MARK_RIBBON_RIGHT_EDGE,
45050
+ MARK_RIBBON_RIGHT_EDGE,
45051
+ MARK_RIBBON_RIGHT_EDGE,
45052
+ MARK_RIBBON_RIGHT_EDGE
45053
+ ],
45054
+ xEndCurve: 0.94,
45055
+ xStart: [0.08, 0.2, 0.32, 0.44, 0.56],
45056
+ xStem: [0.028, 0.022, 0.018, 0.015, 0.012]
45057
+ };
45058
+ function labelGapAbove(i, config2) {
45059
+ const lastBand = config2.xStart.length - 1;
45060
+ if (i === lastBand) return config2.labelLiquidityGap;
45061
+ return config2.labelAboveGap[i] ?? config2.labelLiquidityGap;
45062
+ }
45063
+ function mergeBounds(a, b) {
45064
+ return {
45065
+ minX: Math.min(a.minX, b.minX),
45066
+ minY: Math.min(a.minY, b.minY),
45067
+ maxX: Math.max(a.maxX, b.maxX),
45068
+ maxY: Math.max(a.maxY, b.maxY)
45069
+ };
45070
+ }
45071
+ function transformPathD(d, scaleX, scaleY, tx, ty) {
45072
+ return d.replace(/(-?[\d.]+),(-?[\d.]+)/g, (_, x, y) => {
45073
+ const px2 = Number(x) * scaleX + tx;
45074
+ const py = Number(y) * scaleY + ty;
45075
+ return `${px2.toFixed(1)},${py.toFixed(1)}`;
45076
+ });
45077
+ }
45078
+ function computeMarkFitTransform(bounds, width, height, paddingRatio) {
45079
+ const pad = paddingRatio * Math.min(width, height);
45080
+ const bw = bounds.maxX - bounds.minX;
45081
+ const bh = bounds.maxY - bounds.minY;
45082
+ if (bw <= 0 || bh <= 0) {
45083
+ return { scaleX: 1, scaleY: 1, tx: 0, ty: 0 };
45084
+ }
45085
+ const scaleY = (height - pad * 2) / bh;
45086
+ let scaleX = scaleY * MARK_FIT_HORIZONTAL_COMPRESS;
45087
+ if (bw * scaleX > width - pad * 2) {
45088
+ scaleX = (width - pad * 2) / bw;
45089
+ }
45090
+ const tx = (width - bw * scaleX) / 2 - bounds.minX * scaleX;
45091
+ const ty = (height - bh * scaleY) / 2 - bounds.minY * scaleY;
45092
+ return { scaleX, scaleY, tx, ty };
45093
+ }
45094
+ function valAt(i, xf, config2) {
45095
+ const { xStart, xEndCurve, kArr, V, vMin, xStem } = config2;
45096
+ const xLo = xStart[i] - xStem[i];
45097
+ if (xf < xLo || xf > xEndCurve) return 0;
45098
+ if (xf < xStart[i]) return vMin[i];
45099
+ const u = (xf - xStart[i]) / (xEndCurve - xStart[i]);
45100
+ const grow = (Math.exp(kArr[i] * u) - 1) / (Math.exp(kArr[i]) - 1);
45101
+ return vMin[i] + (V[i] - vMin[i]) * grow;
45102
+ }
45103
+ function cumBelow(i, xf, config2) {
45104
+ let sum = 0;
45105
+ for (let j = 0; j < i; j++) sum += valAt(j, xf, config2);
45106
+ return sum;
45107
+ }
45108
+ function buildBandPath(i, width, height, config2) {
45109
+ const { xStart, xEndCurve, xStem, baseline } = config2;
45110
+ const samples = Math.max(1, Math.floor(config2.samples));
45111
+ const xLo = xStart[i] - xStem[i];
45112
+ const top = [];
45113
+ const bot = [];
45114
+ for (let s = 0; s <= samples; s++) {
45115
+ const xf = xLo + (xEndCurve - xLo) * (s / samples);
45116
+ const below = cumBelow(i, xf, config2);
45117
+ const v = valAt(i, xf, config2);
45118
+ const x = xf * width;
45119
+ top.push([x, (baseline - below - v) * height]);
45120
+ bot.push([x, (baseline - below) * height]);
45121
+ }
45122
+ let minX = Number.POSITIVE_INFINITY;
45123
+ let minY = Number.POSITIVE_INFINITY;
45124
+ let maxX = Number.NEGATIVE_INFINITY;
45125
+ let maxY = Number.NEGATIVE_INFINITY;
45126
+ for (const [x, y] of [...top, ...bot]) {
45127
+ minX = Math.min(minX, x);
45128
+ minY = Math.min(minY, y);
45129
+ maxX = Math.max(maxX, x);
45130
+ maxY = Math.max(maxY, y);
45131
+ }
45132
+ let d = `M${top[0][0].toFixed(1)},${top[0][1].toFixed(1)}`;
45133
+ for (let s = 1; s <= samples; s++) {
45134
+ d += ` L${top[s][0].toFixed(1)},${top[s][1].toFixed(1)}`;
45135
+ }
45136
+ d += ` L${bot[samples][0].toFixed(1)},${bot[samples][1].toFixed(1)}`;
45137
+ for (let s = samples - 1; s >= 0; s--) {
45138
+ d += ` L${bot[s][0].toFixed(1)},${bot[s][1].toFixed(1)}`;
45139
+ }
45140
+ return { d: `${d} Z`, bounds: { minX, minY, maxX, maxY } };
45141
+ }
45142
+ function buildLabel(i, text, _width, _height, config2, offsetXNorm) {
45143
+ const { baseline, xStart, xStem, labelNudge } = config2;
45144
+ const xf = xStart[i] - xStem[i] + offsetXNorm;
45145
+ const below = cumBelow(i, xf, config2);
45146
+ const v = valAt(i, xf, config2);
45147
+ const yTop = baseline - below - v;
45148
+ const [nudgeX, nudgeY] = labelNudge[i];
45149
+ return {
45150
+ index: i,
45151
+ text,
45152
+ leftPct: (xf + nudgeX) * 100,
45153
+ topPct: (yTop - labelGapAbove(i, config2) + nudgeY) * 100,
45154
+ placement: "start"
45155
+ };
45156
+ }
45157
+ function clampBandCount(count2, max2 = 5) {
45158
+ if (!Number.isFinite(count2)) return max2;
45159
+ return Math.min(max2, Math.max(1, Math.round(count2)));
45160
+ }
45161
+ function buildRibbonGeometry(width, height, labels, config2 = DEFAULT_RIBBON_CONFIG, bandCount = config2.xStart.length, layout = "hero") {
45162
+ const totalBands = config2.xStart.length;
45163
+ const visibleBands = clampBandCount(bandCount, totalBands);
45164
+ if (width <= 0 || height <= 0) {
45165
+ return null;
45166
+ }
45167
+ const paths = [];
45168
+ const clipWidthPx = [];
45169
+ let bounds = null;
45170
+ for (let i = 0; i < visibleBands; i++) {
45171
+ const band = buildBandPath(i, width, height, config2);
45172
+ paths.push(band.d);
45173
+ clipWidthPx.push(config2.xEndDraw[i] * width);
45174
+ bounds = bounds ? mergeBounds(bounds, band.bounds) : band.bounds;
45175
+ }
45176
+ let fitPaths = paths;
45177
+ let fitClips = clipWidthPx;
45178
+ let offsetXNorm = 0;
45179
+ if (bounds) {
45180
+ if (layout === "mark") {
45181
+ const { scaleX, scaleY, tx, ty } = computeMarkFitTransform(bounds, width, height, 0.05);
45182
+ fitPaths = paths.map((p) => transformPathD(p, scaleX, scaleY, tx, ty));
45183
+ const alignedClipRight = MARK_RIBBON_RIGHT_EDGE * width * scaleX + tx;
45184
+ fitClips = clipWidthPx.map(() => alignedClipRight);
45185
+ offsetXNorm = tx / width;
45186
+ } else if (layout === "hero") {
45187
+ const bw = bounds.maxX - bounds.minX;
45188
+ const tx = (width - bw) / 2 - bounds.minX;
45189
+ fitPaths = paths.map((p) => transformPathD(p, 1, 1, tx, 0));
45190
+ fitClips = clipWidthPx.map((w) => w + tx);
45191
+ offsetXNorm = tx / width;
45192
+ }
45193
+ }
45194
+ const paddedLabels = Array.from({ length: visibleBands }, (_, i) => labels[i] ?? "");
45195
+ const builtLabels = paddedLabels.map(
45196
+ (text, i) => buildLabel(i, text, width, height, config2, offsetXNorm)
45197
+ );
45198
+ return {
45199
+ paths: fitPaths,
45200
+ clipWidthPx: fitClips,
45201
+ labels: builtLabels,
45202
+ width,
45203
+ height,
45204
+ bandCount: visibleBands
45205
+ };
45206
+ }
45207
+ function easePower1InOut(t) {
45208
+ const p = Math.max(0, Math.min(1, t));
45209
+ return p < 0.5 ? 2 * p * p : 1 - (-2 * p + 2) ** 2 / 2;
45210
+ }
45211
+ function easePower2Out(t) {
45212
+ const p = Math.max(0, Math.min(1, t));
45213
+ return 1 - (1 - p) ** 2;
45214
+ }
45215
+ function ribbonLabelRevealTime(labelIndex, duration2, config2 = DEFAULT_RIBBON_CONFIG) {
45216
+ return Math.min(duration2, config2.labelX[labelIndex] * duration2 + 0.25);
45217
+ }
45218
+ const ribbonChartLabelDefault = "#FFFFFF";
45219
+ const ribbonChartSurface = {
45220
+ white: "#FFFFFF",
45221
+ black: "#0D1023"
45222
+ };
45223
+ const ribbonBandGradientStops = [
45224
+ { idSuffix: "0", start: "#33198C", end: "#5B2BF0" },
45225
+ { idSuffix: "1", start: "#4A22C8", end: "#7A3DF5" },
45226
+ { idSuffix: "2", start: "#6A32E8", end: "#9A6BFF" },
45227
+ { idSuffix: "3", start: "#8A52F5", end: "#BD84FF" },
45228
+ { idSuffix: "4", start: "#A86BFF", end: "#E6ABFF" }
45229
+ ];
45230
+ const RIBBON_BACKGROUND_CLASS = {
45231
+ white: "fairmint-equity-ribbon--bg-white",
45232
+ black: "fairmint-equity-ribbon--bg-black",
45233
+ transparent: "fairmint-equity-ribbon--bg-transparent"
45234
+ };
45235
+ const DEFAULT_RIBBON_LABELS = [
45236
+ "Cap Table",
45237
+ "Fundraising",
45238
+ "Grants",
45239
+ "Secondaries",
45240
+ "Liquidity"
45241
+ ];
45242
+ const RIBBON_BAND_GRADIENTS = ribbonBandGradientStops;
45243
+ const RIBBON_SURFACE_CSS_VARS = {
45244
+ "--fairmint-ribbon-surface-white": ribbonChartSurface.white,
45245
+ "--fairmint-ribbon-surface-black": ribbonChartSurface.black
45246
+ };
45247
+ const REVEAL_DURATION_MS = 2300;
45248
+ const REVEAL_DELAY_MS = 420;
45249
+ function labelAnchorTransform(_placement, yOffsetPx) {
45250
+ return `translate(0, calc(-100% + ${yOffsetPx}px))`;
45251
+ }
45252
+ function labelClassName(_placement) {
45253
+ return "fairmint-equity-ribbon__label fairmint-equity-ribbon__label--start";
45254
+ }
45255
+ function resolveGradients(gradients, bandCount) {
45256
+ const source = gradients ?? RIBBON_BAND_GRADIENTS;
45257
+ return Array.from({ length: bandCount }, (_, i) => {
45258
+ const fallback = RIBBON_BAND_GRADIENTS[i] ?? RIBBON_BAND_GRADIENTS[RIBBON_BAND_GRADIENTS.length - 1];
45259
+ const g = source[i] ?? fallback;
45260
+ return {
45261
+ idSuffix: String(i),
45262
+ start: g.start,
45263
+ end: g.end
45264
+ };
45265
+ });
45266
+ }
45267
+ function EquityRibbonChart({
45268
+ labels = DEFAULT_RIBBON_LABELS,
45269
+ bandCount: bandCountProp = 5,
45270
+ gradients,
45271
+ animated = true,
45272
+ hideLabels = false,
45273
+ background = "transparent",
45274
+ layout = "hero",
45275
+ labelColor = ribbonChartLabelDefault,
45276
+ className,
45277
+ height,
45278
+ style
45279
+ }) {
45280
+ const bandCount = clampBandCount(bandCountProp);
45281
+ const labelsKey = labels.join("");
45282
+ const labelsRef = React.useRef(labels);
45283
+ labelsRef.current = labels;
45284
+ const bandGradients = resolveGradients(gradients, bandCount);
45285
+ const uid = React.useId().replace(/:/g, "");
45286
+ const rootRef = React.useRef(null);
45287
+ const playedRef = React.useRef(false);
45288
+ const rafRef = React.useRef(null);
45289
+ const revealGenerationRef = React.useRef(0);
45290
+ const revealScheduleRef = React.useRef(0);
45291
+ const cancelRevealAnimation = React.useCallback(() => {
45292
+ revealGenerationRef.current += 1;
45293
+ if (rafRef.current !== null) {
45294
+ cancelAnimationFrame(rafRef.current);
45295
+ rafRef.current = null;
45296
+ }
45297
+ }, []);
45298
+ const [geometry, setGeometry] = React.useState(null);
45299
+ const [revealWidth, setRevealWidth] = React.useState(0);
45300
+ const [labelStyles, setLabelStyles] = React.useState(
45301
+ () => labels.slice(0, bandCount).map(() => ({ opacity: 0, transform: "translateY(6px)" }))
45302
+ );
45303
+ const rebuild = React.useCallback(() => {
45304
+ cancelRevealAnimation();
45305
+ const el = rootRef.current;
45306
+ if (!el) return;
45307
+ const width = el.clientWidth;
45308
+ const heightPx = el.clientHeight;
45309
+ const config2 = layout === "mark" ? MARK_RIBBON_CONFIG : void 0;
45310
+ const built = buildRibbonGeometry(
45311
+ width,
45312
+ heightPx,
45313
+ labelsRef.current,
45314
+ config2,
45315
+ bandCount,
45316
+ layout
45317
+ );
45318
+ setGeometry(built);
45319
+ if (built && (playedRef.current || !animated)) {
45320
+ setRevealWidth(built.width);
45321
+ setLabelStyles(
45322
+ built.labels.map((lbl) => ({
45323
+ opacity: 1,
45324
+ transform: labelAnchorTransform(lbl.placement, 0)
45325
+ }))
45326
+ );
45327
+ }
45328
+ }, [animated, bandCount, cancelRevealAnimation, labelsKey, layout]);
45329
+ React.useLayoutEffect(() => {
45330
+ playedRef.current = false;
45331
+ revealScheduleRef.current = 0;
45332
+ cancelRevealAnimation();
45333
+ if (animated) {
45334
+ setRevealWidth(0);
45335
+ setLabelStyles(
45336
+ labelsRef.current.slice(0, bandCount).map(() => ({
45337
+ opacity: 0,
45338
+ transform: "translateY(6px)"
45339
+ }))
45340
+ );
45341
+ }
45342
+ rebuild();
45343
+ }, [animated, bandCount, cancelRevealAnimation, rebuild]);
45344
+ React.useEffect(() => () => cancelRevealAnimation(), [cancelRevealAnimation]);
45345
+ React.useEffect(() => {
45346
+ const el = rootRef.current;
45347
+ if (!el) return;
45348
+ if (typeof ResizeObserver === "undefined") {
45349
+ rebuild();
45350
+ return;
45351
+ }
45352
+ const ro = new ResizeObserver(() => {
45353
+ rebuild();
45354
+ });
45355
+ ro.observe(el);
45356
+ return () => ro.disconnect();
45357
+ }, [rebuild]);
45358
+ const runReveal = React.useCallback(() => {
45359
+ if (!geometry || playedRef.current) return;
45360
+ if (!animated) {
45361
+ playedRef.current = true;
45362
+ setRevealWidth(geometry.width);
45363
+ setLabelStyles(
45364
+ geometry.labels.map((lbl) => ({
45365
+ opacity: 1,
45366
+ transform: labelAnchorTransform(lbl.placement, 0)
45367
+ }))
45368
+ );
45369
+ return;
45370
+ }
45371
+ const reduceMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
45372
+ if (reduceMotion) {
45373
+ playedRef.current = true;
45374
+ setRevealWidth(geometry.width);
45375
+ setLabelStyles(
45376
+ geometry.labels.map((lbl) => ({
45377
+ opacity: 1,
45378
+ transform: labelAnchorTransform(lbl.placement, 0)
45379
+ }))
45380
+ );
45381
+ return;
45382
+ }
45383
+ playedRef.current = true;
45384
+ setRevealWidth(0);
45385
+ setLabelStyles(
45386
+ geometry.labels.map((lbl) => ({
45387
+ opacity: 0,
45388
+ transform: labelAnchorTransform(lbl.placement, 6)
45389
+ }))
45390
+ );
45391
+ const generation = revealGenerationRef.current;
45392
+ const start = performance.now();
45393
+ const tick = (now) => {
45394
+ if (generation !== revealGenerationRef.current) return;
45395
+ const elapsed = now - start;
45396
+ const t = Math.min(1, elapsed / REVEAL_DURATION_MS);
45397
+ const eased = easePower1InOut(t);
45398
+ setRevealWidth(geometry.width * eased);
45399
+ setLabelStyles(
45400
+ geometry.labels.map((lbl, i) => {
45401
+ const labelStart = ribbonLabelRevealTime(i, REVEAL_DURATION_MS / 1e3) * 1e3;
45402
+ const labelDur = 550;
45403
+ const lt2 = Math.min(1, Math.max(0, (elapsed - labelStart) / labelDur));
45404
+ const lo = easePower2Out(lt2);
45405
+ const y = 6 * (1 - lo);
45406
+ return { opacity: lo, transform: labelAnchorTransform(lbl.placement, y) };
45407
+ })
45408
+ );
45409
+ if (t < 1) {
45410
+ rafRef.current = requestAnimationFrame(tick);
45411
+ } else {
45412
+ setRevealWidth(geometry.width);
45413
+ setLabelStyles(
45414
+ geometry.labels.map((lbl) => ({
45415
+ opacity: 1,
45416
+ transform: labelAnchorTransform(lbl.placement, 0)
45417
+ }))
45418
+ );
45419
+ }
45420
+ };
45421
+ rafRef.current = requestAnimationFrame(tick);
45422
+ }, [animated, geometry]);
45423
+ React.useEffect(() => {
45424
+ if (!geometry || playedRef.current) return;
45425
+ const scheduleId = ++revealScheduleRef.current;
45426
+ const delay = scheduleId === 1 ? REVEAL_DELAY_MS : 0;
45427
+ const timer = window.setTimeout(() => {
45428
+ if (scheduleId !== revealScheduleRef.current) return;
45429
+ runReveal();
45430
+ }, delay);
45431
+ return () => window.clearTimeout(timer);
45432
+ }, [geometry, runReveal]);
45433
+ const suppressLabels = hideLabels || layout === "mark";
45434
+ const activeGeometry = geometry && geometry.bandCount === bandCount ? geometry : null;
45435
+ const rootClass = [
45436
+ "fairmint-equity-ribbon",
45437
+ RIBBON_BACKGROUND_CLASS[background],
45438
+ layout === "mark" ? "fairmint-equity-ribbon--layout-mark" : "",
45439
+ suppressLabels ? "fairmint-equity-ribbon--hidden-labels" : "",
45440
+ className ?? ""
45441
+ ].filter(Boolean).join(" ");
45442
+ const rootStyle = {
45443
+ ...RIBBON_SURFACE_CSS_VARS,
45444
+ ...style,
45445
+ ...height ? { height } : {}
45446
+ };
45447
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: rootClass, style: rootStyle, children: [
45448
+ /* @__PURE__ */ jsxRuntime.jsxs(
45449
+ "svg",
45450
+ {
45451
+ className: "fairmint-equity-ribbon__svg",
45452
+ preserveAspectRatio: "none",
45453
+ "aria-hidden": "true",
45454
+ viewBox: activeGeometry ? `0 0 ${activeGeometry.width} ${activeGeometry.height}` : "0 0 1 1",
45455
+ children: [
45456
+ /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
45457
+ bandGradients.map((g) => /* @__PURE__ */ jsxRuntime.jsxs(
45458
+ "linearGradient",
45459
+ {
45460
+ id: `${uid}-bg${g.idSuffix}`,
45461
+ x1: "0",
45462
+ y1: "1",
45463
+ x2: "1",
45464
+ y2: "0",
45465
+ children: [
45466
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0", stopColor: g.start }),
45467
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: g.end })
45468
+ ]
45469
+ },
45470
+ g.idSuffix
45471
+ )),
45472
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: `${uid}-revealclip`, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: -1, width: revealWidth, height: (activeGeometry?.height ?? 1) + 2 }) }),
45473
+ activeGeometry ? activeGeometry.paths.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: `${uid}-bandclip${i}`, children: /* @__PURE__ */ jsxRuntime.jsx(
45474
+ "rect",
45475
+ {
45476
+ x: 0,
45477
+ y: -1,
45478
+ width: activeGeometry.clipWidthPx[i],
45479
+ height: activeGeometry.height + 2
45480
+ }
45481
+ ) }, `bandclip-${bandGradients[i].idSuffix}`)) : null
45482
+ ] }),
45483
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${uid}-revealclip)`, children: activeGeometry?.paths.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx(
45484
+ "path",
45485
+ {
45486
+ className: "fairmint-equity-ribbon__band",
45487
+ fill: `url(#${uid}-bg${bandGradients[i].idSuffix})`,
45488
+ clipPath: `url(#${uid}-bandclip${i})`,
45489
+ d
45490
+ },
45491
+ bandGradients[i].idSuffix
45492
+ )) })
45493
+ ]
45494
+ }
45495
+ ),
45496
+ !suppressLabels && activeGeometry?.labels.map((lbl, i) => /* @__PURE__ */ jsxRuntime.jsx(
45497
+ "div",
45498
+ {
45499
+ className: labelClassName(lbl.placement),
45500
+ style: {
45501
+ left: `${lbl.leftPct}%`,
45502
+ top: `${lbl.topPct}%`,
45503
+ color: labelColor,
45504
+ opacity: labelStyles[i]?.opacity ?? 0,
45505
+ transform: labelStyles[i]?.transform
45506
+ },
45507
+ children: lbl.text
45508
+ },
45509
+ `${lbl.text}-${lbl.index}`
45510
+ ))
45511
+ ] });
45512
+ }
45513
+ function FairmintRibbonMark({
45514
+ size: size2 = 64,
45515
+ bandCount = 5,
45516
+ gradients,
45517
+ background = "black",
45518
+ labelColor,
45519
+ className,
45520
+ style
45521
+ }) {
45522
+ const dimension = `${size2}px`;
45523
+ return /* @__PURE__ */ jsxRuntime.jsx(
45524
+ EquityRibbonChart,
45525
+ {
45526
+ bandCount,
45527
+ gradients,
45528
+ background,
45529
+ labelColor,
45530
+ layout: "mark",
45531
+ animated: false,
45532
+ hideLabels: true,
45533
+ className: ["fairmint-ribbon-mark", className].filter(Boolean).join(" "),
45534
+ height: dimension,
45535
+ style: { width: dimension, height: dimension, ...style }
45536
+ }
45537
+ );
45538
+ }
45019
45539
  function InvestmentCard({
45020
45540
  companyName,
45021
45541
  logoUrl,
@@ -45785,6 +46305,8 @@ exports.ConfidentialityBanner = ConfidentialityBanner;
45785
46305
  exports.ConfirmDialog = ConfirmDialog;
45786
46306
  exports.Container = Container;
45787
46307
  exports.Currency = Currency;
46308
+ exports.DEFAULT_RIBBON_CONFIG = DEFAULT_RIBBON_CONFIG;
46309
+ exports.DEFAULT_RIBBON_LABELS = DEFAULT_RIBBON_LABELS;
45788
46310
  exports.DataRow = DataRow;
45789
46311
  exports.DataTable = DataTable;
45790
46312
  exports.DateDisplay = DateDisplay;
@@ -45797,12 +46319,14 @@ exports.EditableSection = EditableSection;
45797
46319
  exports.EmailField = EmailField;
45798
46320
  exports.EmptyState = EmptyState;
45799
46321
  exports.EquityGrantCard = EquityGrantCard;
46322
+ exports.EquityRibbonChart = EquityRibbonChart;
45800
46323
  exports.ErrorFallback = ErrorFallback;
45801
46324
  exports.ErrorPage = ErrorPage;
45802
46325
  exports.EthereumAddressField = EthereumAddressField;
45803
46326
  exports.Eyebrow = Eyebrow;
45804
46327
  exports.FairmintLogo = FairmintLogo;
45805
46328
  exports.FairmintProvider = FairmintProvider;
46329
+ exports.FairmintRibbonMark = FairmintRibbonMark;
45806
46330
  exports.Flex = Flex;
45807
46331
  exports.Form = Form;
45808
46332
  exports.FormField = FormField;
@@ -45813,6 +46337,8 @@ exports.InvestorProfileCard = InvestorProfileCard;
45813
46337
  exports.ListRow = ListRow;
45814
46338
  exports.Loader = Loader;
45815
46339
  exports.LoadingSpinner = LoadingSpinner;
46340
+ exports.MARK_RIBBON_CONFIG = MARK_RIBBON_CONFIG;
46341
+ exports.MARK_RIBBON_RIGHT_EDGE = MARK_RIBBON_RIGHT_EDGE;
45816
46342
  exports.MOBILE_BREAKPOINT = MOBILE_BREAKPOINT;
45817
46343
  exports.Menu = Menu;
45818
46344
  exports.Modal = Modal;
@@ -45832,6 +46358,8 @@ exports.PhoneField = PhoneField;
45832
46358
  exports.PhotoCropModal = PhotoCropModal;
45833
46359
  exports.PinInput = PinInput;
45834
46360
  exports.Progress = Progress;
46361
+ exports.RIBBON_BACKGROUND_CLASS = RIBBON_BACKGROUND_CLASS;
46362
+ exports.RIBBON_BAND_GRADIENTS = RIBBON_BAND_GRADIENTS;
45835
46363
  exports.RadioCard = RadioCard;
45836
46364
  exports.RedactedValue = RedactedValue;
45837
46365
  exports.ScrollArea = ScrollArea;
@@ -45865,6 +46393,7 @@ exports.WalletList = WalletList;
45865
46393
  exports.ZERO_ETHEREUM_ADDRESS = ZERO_ETHEREUM_ADDRESS;
45866
46394
  exports.ZipField = ZipField;
45867
46395
  exports.brandColors = brandColors;
46396
+ exports.clampBandCount = clampBandCount;
45868
46397
  exports.colors = colors;
45869
46398
  exports.createFairmintMantineProviderProps = createFairmintMantineProviderProps;
45870
46399
  exports.createZipSchema = createZipSchema;