@workflow/web-shared 5.0.0-beta.26 → 5.0.0-beta.28

package/src/components/ui/collapsible.tsx

@@ -0,0 +1,219 @@
+'use client';
+
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import {
+  createContext,
+  type ReactNode,
+  type SyntheticEvent,
+  useContext,
+  useState,
+} from 'react';
+import { cn } from '../../lib/cn';
+
+type CollapsibleVariant = 'section' | 'card';
+
+type CollapsibleContextValue = {
+  variant: CollapsibleVariant;
+  disabled: boolean;
+};
+
+const CollapsibleContext = createContext<CollapsibleContextValue | null>(null);
+
+function useCollapsibleContext(part: string): CollapsibleContextValue {
+  const context = useContext(CollapsibleContext);
+  if (!context) {
+    throw new Error(
+      `<Collapsible${part}> must be rendered inside <CollapsibleRoot>`
+    );
+  }
+  return context;
+}
+
+type CollapsibleRootProps = {
+  children: ReactNode;
+  variant?: CollapsibleVariant;
+  disabled?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+};
+
+/**
+ * Low-level collapsible container. Use this together with `CollapsibleTrigger`
+ * and `CollapsibleContent` when you need to override the styling of individual
+ * parts. For the common case, prefer the all-in-one `Collapsible`.
+ */
+export function CollapsibleRoot({
+  children,
+  variant = 'section',
+  disabled = false,
+  defaultOpen = false,
+  onOpenChange,
+  className,
+}: CollapsibleRootProps) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  const handleToggle = (event: SyntheticEvent<HTMLDetailsElement>) => {
+    // React bubbles the `toggle` event even though the native one doesn't, so
+    // a nested <details> (e.g. an event card inside the Events section)
+    // collapsing would otherwise flip this card. Only react to direct toggles.
+    if (event.target !== event.currentTarget) return;
+    const next = event.currentTarget.open;
+    setOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const details = (
+    <details
+      data-slot="collapsible"
+      data-state={open ? 'open' : 'closed'}
+      open={open}
+      onToggle={disabled ? undefined : handleToggle}
+      className={cn(
+        variant === 'card'
+          ? 'group/card border-gray-alpha-400 last:border-b'
+          : 'group',
+        className
+      )}
+    >
+      <CollapsibleContext.Provider value={{ variant, disabled }}>
+        {children}
+      </CollapsibleContext.Provider>
+    </details>
+  );
+
+  if (variant === 'card') {
+    return details;
+  }
+
+  return (
+    <section className="-mx-4 border-t border-gray-alpha-400 px-4 py-2">
+      {details}
+    </section>
+  );
+}
+
+type CollapsibleTriggerProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+/** The clickable header of a `CollapsibleRoot`. */
+export function CollapsibleTrigger({
+  children,
+  className,
+}: CollapsibleTriggerProps) {
+  const { variant, disabled } = useCollapsibleContext('Trigger');
+
+  if (variant === 'card') {
+    return (
+      <summary
+        data-slot="collapsible-trigger"
+        className={cn(
+          'flex cursor-pointer list-none items-center gap-1.5 border-t border-gray-alpha-400 bg-background-200 px-3 py-4 hover:bg-gray-100 [&::-webkit-details-marker]:hidden',
+          className
+        )}
+      >
+        <ChevronRight
+          size={14}
+          className="shrink-0 text-gray-700 group-hover/card:text-gray-1000 group-open/card:rotate-90"
+        />
+        {children}
+      </summary>
+    );
+  }
+
+  // Shared row metrics keep every header the same height regardless of variant.
+  const row =
+    'flex h-9 items-center gap-2 -mx-2 px-2 text-heading-14 font-medium list-none [&::-webkit-details-marker]:hidden';
+
+  if (disabled) {
+    return (
+      <summary
+        data-slot="collapsible-trigger"
+        className={cn(row, 'pointer-events-none text-gray-700', className)}
+      >
+        <span className="min-w-0 flex-1">{children}</span>
+      </summary>
+    );
+  }
+
+  return (
+    <summary
+      data-slot="collapsible-trigger"
+      className={cn(
+        row,
+        'group/trigger cursor-pointer rounded hover:bg-gray-alpha-100',
+        className
+      )}
+    >
+      <span className="relative isolate h-3.5 w-3.5 shrink-0 text-gray-700 group-hover/trigger:text-gray-1000">
+        <ChevronRight
+          size={14}
+          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-100 group-open:opacity-0"
+        />
+        <ChevronDown
+          size={14}
+          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 group-open:opacity-100"
+        />
+      </span>
+      <span className="min-w-0 flex-1">{children}</span>
+    </summary>
+  );
+}
+
+type CollapsibleContentProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+/** The collapsible body of a `CollapsibleRoot`. */
+export function CollapsibleContent({
+  children,
+  className,
+}: CollapsibleContentProps) {
+  const { variant } = useCollapsibleContext('Content');
+  return (
+    <div
+      data-slot="collapsible-content"
+      className={cn(variant === 'section' && 'mt-2 mb-3', className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+type CollapsibleProps = {
+  /** Header content shown in the trigger row. */
+  label: ReactNode;
+  /** Body content. Omit for a header-only (e.g. disabled or skeleton) row. */
+  children?: ReactNode;
+  disabled?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+/**
+ * All-in-one collapsible section: a labeled header plus body content. This is
+ * the component to reach for in most cases. When you need to override the
+ * styling of a specific part, compose `CollapsibleRoot`, `CollapsibleTrigger`,
+ * and `CollapsibleContent` directly instead.
+ */
+export function Collapsible({
+  label,
+  children,
+  disabled,
+  defaultOpen,
+  onOpenChange,
+}: CollapsibleProps) {
+  return (
+    <CollapsibleRoot
+      disabled={disabled}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      <CollapsibleTrigger>{label}</CollapsibleTrigger>
+      {children != null && <CollapsibleContent>{children}</CollapsibleContent>}
+    </CollapsibleRoot>
+  );
+}

package/src/index.ts

@@ -14,13 +14,6 @@ export {
   waitEventsToWaitEntity,
 } from './components/workflow-traces/trace-span-construction';
 export type { EventAnalysis } from './lib/event-analysis';
-export {
-  parseExactWorkflowSearchId,
-  looksLikeWorkflowIdSearchInput,
-  type ExactWorkflowSearchId,
-  type ExactWorkflowSearchIdKind,
-  type ExactIdSearchResult,
-} from './lib/exact-event-search-id';
 export {
   analyzeEvents,
   hasPendingHooksFromEvents,
@@ -40,6 +33,13 @@ export {
   materializeSteps,
   materializeWaits,
 } from './lib/event-materialization';
+export {
+  type ExactIdSearchResult,
+  type ExactWorkflowSearchId,
+  type ExactWorkflowSearchIdKind,
+  looksLikeWorkflowIdSearchInput,
+  parseExactWorkflowSearchId,
+} from './lib/exact-event-search-id';
 export type { Revivers, StreamRef } from './lib/hydration';
 export {
   CLASS_INSTANCE_REF_TYPE,
@@ -49,6 +49,7 @@ export {
   getWebRevivers,
   hasEncryptedFields,
   hydrateResourceIO,
+  hydrateResourceIOAsync,
   hydrateResourceIOWithKey,
   isClassInstanceRef,
   isEncryptedMarker,

package/src/lib/hydration.ts

@@ -18,6 +18,20 @@ import {
 } from '@workflow/core/serialization-format';
 import { EVENT_DATA_REF_FIELDS } from '@workflow/world';
 
+const V4_EXTRA_EVENT_DATA_REF_FIELDS: Record<string, string[]> = {
+  run_started: ['input'],
+  step_started: ['input'],
+};
+
+export function getEventDataRefFields(eventType: string): string[] {
+  return [
+    ...new Set([
+      ...(EVENT_DATA_REF_FIELDS[eventType] ?? []),
+      ...(V4_EXTRA_EVENT_DATA_REF_FIELDS[eventType] ?? []),
+    ]),
+  ];
+}
+
 // Re-export types and utilities that consumers need
 export {
   CLASS_INSTANCE_REF_TYPE,
@@ -446,7 +460,7 @@ function replaceEncryptedAndExpiredWithMarkers<T>(resource: T): T {
   if (result.eventData && typeof result.eventData === 'object') {
     const eventType =
       typeof result.eventType === 'string' ? result.eventType : '';
-    const refKeys = EVENT_DATA_REF_FIELDS[eventType] ?? [];
+    const refKeys = getEventDataRefFields(eventType);
     const ed = { ...(result.eventData as Record<string, unknown>) };
     for (const key of refKeys) {
       if (key in ed) {
@@ -465,17 +479,31 @@ function replaceEncryptedAndExpiredWithMarkers<T>(resource: T): T {
  * When a key is provided, encrypted fields are decrypted before hydration.
  * This is the async version used when the user clicks "Decrypt" in the web UI.
  *
- * Handles both top-level fields (input, output, metadata) and nested
- * eventData subfields per `EVENT_DATA_REF_FIELDS` from `@workflow/world` for that event type.
+ * Handles both top-level fields (input, output, metadata) and nested eventData
+ * payload fields for that event type.
  */
 export async function hydrateResourceIOWithKey<T>(
   resource: T,
   key: Uint8Array
+): Promise<T> {
+  return hydrateResourceIOAsync(resource, key);
+}
+
+/**
+ * Async hydration for web display.
+ *
+ * This follows the same resource-field mapping as {@link hydrateResourceIO},
+ * but can also inflate compressed browser payloads through the registered
+ * zstd WASM decoder. When a key is provided, encrypted fields are decrypted
+ * first and then inflated/hydrated.
+ */
+export async function hydrateResourceIOAsync<T>(
+  resource: T,
+  key?: Uint8Array
 ): Promise<T> {
   const { hydrateDataWithKey } = await import(
     '@workflow/core/serialization-format'
   );
-  const { importKey } = await import('@workflow/core/encryption');
   // Payloads may be zstd-compressed (the Web DecompressionStream has no zstd);
   // register the WASM-backed browser decoder before hydrating. Idempotent and
   // lazy — the WASM is only compiled when a zstd payload is actually decoded.
@@ -483,25 +511,24 @@ export async function hydrateResourceIOWithKey<T>(
     './zstd-browser-decoder.js'
   );
   ensureZstdDecoderRegistered();
-  const cryptoKey = await importKey(key);
+  const cryptoKey = key
+    ? await import('@workflow/core/encryption').then(({ importKey }) =>
+        importKey(key)
+      )
+    : undefined;
   const revivers = getRevivers();
 
-  /** Extract original encrypted bytes from a marker or raw Uint8Array, then decrypt + hydrate */
-  async function decryptField(
-    value: unknown,
-    rev: Revivers,
-    k: Awaited<ReturnType<typeof importKey>>
-  ): Promise<unknown> {
+  async function hydrateField(value: unknown): Promise<unknown> {
     // Already-hydrated: encrypted marker with stored bytes
     if (isEncryptedMarker(value)) {
       const raw = (value as any).__encryptedData as Uint8Array;
-      return hydrateDataWithKey(raw, rev, k);
+      return cryptoKey ? hydrateDataWithKey(raw, revivers, cryptoKey) : value;
     }
-    // Raw encrypted Uint8Array (not yet hydrated)
+    // Raw Uint8Array: may be encrypted, compressed, or plain devalue.
     if (value instanceof Uint8Array) {
-      return hydrateDataWithKey(value, rev, k);
+      return hydrateDataWithKey(value, revivers, cryptoKey);
     }
-    // Not encrypted — return as-is
+    // Not serialized — return as-is.
     return value;
   }
 
@@ -511,29 +538,25 @@ export async function hydrateResourceIOWithKey<T>(
   // Decrypt + hydrate top-level serialized fields (runs, steps, hooks)
   for (const field of ['input', 'output', 'metadata', 'error']) {
     if (field in result) {
-      result[field] = await decryptField(result[field], revivers, cryptoKey);
+      result[field] = await hydrateField(result[field]);
     }
   }
 
-  // Decrypt + hydrate eventData subfields (events)
+  // Hydrate eventData subfields (events)
   if (result.eventData && typeof result.eventData === 'object') {
     const eventType =
       typeof result.eventType === 'string' ? result.eventType : '';
-    const refKeys = EVENT_DATA_REF_FIELDS[eventType] ?? [];
+    const refKeys = getEventDataRefFields(eventType);
     const eventData = { ...(result.eventData as Record<string, unknown>) };
     for (const field of refKeys) {
       if (field in eventData) {
-        eventData[field] = await decryptField(
-          eventData[field],
-          revivers,
-          cryptoKey
-        );
+        eventData[field] = await hydrateField(eventData[field]);
       }
     }
     result.eventData = eventData;
   }
 
-  return result as T;
+  return replaceEncryptedAndExpiredWithMarkers(result as T);
 }
 
 /**
@@ -552,7 +575,7 @@ export function hasEncryptedFields(resource: unknown): boolean {
 
   if (r.eventData && typeof r.eventData === 'object') {
     const eventType = typeof r.eventType === 'string' ? r.eventType : '';
-    const refKeys = EVENT_DATA_REF_FIELDS[eventType] ?? [];
+    const refKeys = getEventDataRefFields(eventType);
     const ed = r.eventData as Record<string, unknown>;
     for (const key of refKeys) {
       if (key in ed && isEncryptedMarker(ed[key])) return true;

package/src/lib/utils.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest';
+import { formatDurationPrecise } from './utils';
+
+describe('formatDurationPrecise', () => {
+  it('shows whole milliseconds below 1s', () => {
+    expect(formatDurationPrecise(0)).toBe('0s');
+    expect(formatDurationPrecise(626)).toBe('626ms');
+  });
+
+  it('keeps sub-second precision instead of rounding up to a whole second', () => {
+    // The bug this guards: 1626ms must not read as "2s".
+    expect(formatDurationPrecise(1626)).toBe('1.63s');
+  });
+
+  it('trims trailing zeros so whole/half seconds read cleanly', () => {
+    expect(formatDurationPrecise(2000)).toBe('2s');
+    expect(formatDurationPrecise(1500)).toBe('1.5s');
+    expect(formatDurationPrecise(1600)).toBe('1.6s');
+    expect(formatDurationPrecise(45_000)).toBe('45s');
+  });
+
+  it('honors a custom fraction-digit count (used by the timeline ruler)', () => {
+    // Fewer digits also coarsen the rounding: 1 digit rounds to 100ms.
+    expect(formatDurationPrecise(1500, 1)).toBe('1.5s');
+    expect(formatDurationPrecise(1620, 1)).toBe('1.6s');
+    expect(formatDurationPrecise(2000, 1)).toBe('2s');
+  });
+
+  it('decomposes durations of a minute or more', () => {
+    expect(formatDurationPrecise(65_000)).toBe('1m 5s');
+    expect(formatDurationPrecise(63_450)).toBe('1m 3.45s');
+  });
+});

package/src/lib/utils.ts

@@ -74,25 +74,20 @@ export function formatDuration(ms: number, compact = false): string {
   return parts.join(' ');
 }
 
-// Locale-aware formatter that always renders exactly two fraction digits.
-// Used for the seconds component of precise durations so values are never
-// snapped to a whole second (and thousands separators stay correct).
-const preciseSecondsFormatter = new Intl.NumberFormat(undefined, {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-});
-
 /**
  * Formats a duration in milliseconds without snapping to whole seconds.
  *
- * Unlike {@link formatDuration}, this never rounds a sub-minute value up to
- * the next whole second (e.g. 1626ms renders as "1.63s", not "2s").
+ * Unlike {@link formatDuration}, this keeps sub-second detail, so 1626ms
+ * renders as "1.63s" rather than "2s". `fractionDigits` sets both the number of
+ * decimals on the seconds component (trailing zeros trimmed, so 2000ms is "2s"
+ * and 1500ms is "1.5s") and the rounding granularity — the default of 2 rounds
+ * to 10ms; the timeline ruler passes fewer digits to match its tick step.
  *
  * - < 1s: shows whole milliseconds (e.g. "626ms")
- * - 1s – 1m: shows seconds with two decimals (e.g. "1.63s", "45.20s")
- * - >= 1m: decomposes into d/h/m with two-decimal seconds (e.g. "1m 13.45s")
+ * - 1s – 1m: shows seconds with trimmed decimals (e.g. "1.63s", "1.5s", "45s")
+ * - >= 1m: decomposes into d/h/m with trimmed-decimal seconds (e.g. "1m 13.45s")
  */
-export function formatDurationPrecise(ms: number): string {
+export function formatDurationPrecise(ms: number, fractionDigits = 2): string {
   if (ms === 0) {
     return '0s';
   }
@@ -104,10 +99,11 @@ export function formatDurationPrecise(ms: number): string {
     }
   }
 
-  const normalizedMs = Math.round(ms / 10) * 10;
+  const granularityMs = MS_IN_SECOND / 10 ** fractionDigits;
+  const normalizedMs = Math.round(ms / granularityMs) * granularityMs;
 
   if (normalizedMs < MS_IN_MINUTE) {
-    return `${preciseSecondsFormatter.format(normalizedMs / MS_IN_SECOND)}s`;
+    return `${Number((normalizedMs / MS_IN_SECOND).toFixed(fractionDigits))}s`;
   }
 
   const days = Math.floor(normalizedMs / MS_IN_DAY);
@@ -126,7 +122,7 @@ export function formatDurationPrecise(ms: number): string {
   if (minutes > 0) {
     parts.push(`${minutes}m`);
   }
-  parts.push(`${preciseSecondsFormatter.format(seconds)}s`);
+  parts.push(`${Number(seconds.toFixed(fractionDigits))}s`);
 
   return parts.join(' ');
 }

package/dist/components/sidebar/detail-card.d.ts

@@ -1,13 +0,0 @@
-import { type ReactNode } from 'react';
-export declare function DetailCard({ summary, children, onToggle, disabled, defaultOpen, variant, trailing, summaryClassName, contentClassName, }: {
-    summary: ReactNode;
-    children?: ReactNode;
-    onToggle?: (open: boolean) => void;
-    disabled?: boolean;
-    defaultOpen?: boolean;
-    variant?: 'section' | 'card';
-    trailing?: ReactNode;
-    summaryClassName?: string;
-    contentClassName?: string;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=detail-card.d.ts.map

package/dist/components/sidebar/detail-card.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"detail-card.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/detail-card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGjD,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,WAAmB,EACnB,OAAmB,EACnB,QAAQ,EACR,gBAAgB,EAChB,gBAAgB,GACjB,EAAE;IACD,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,2CAsHA"}

package/dist/components/sidebar/detail-card.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown, ChevronRight } from 'lucide-react';
-import { useState } from 'react';
-import { cn } from '../../lib/cn';
-export function DetailCard({ summary, children, onToggle, disabled = false, defaultOpen = false, variant = 'section', trailing, summaryClassName, contentClassName, }) {
-    const [open, setOpen] = useState(defaultOpen);
-    const handleToggle = (e) => {
-        // React surfaces `toggle` as a bubbling synthetic event even though the
-        // native event doesn't bubble. Without this guard, a nested <details>
-        // (e.g. an event card inside the Events section) collapsing would flip
-        // the outer DetailCard's state. Only react to direct toggles.
-        if (e.target !== e.currentTarget)
-            return;
-        const next = e.currentTarget.open;
-        setOpen(next);
-        onToggle?.(next);
-    };
-    if (variant === 'card') {
-        if (disabled) {
-            return (_jsx("div", { className: cn('list-none px-3 py-4 bg-background-200 [&::-webkit-details-marker]:hidden', summaryClassName), style: { cursor: 'not-allowed', opacity: 0.8 }, children: summary }));
-        }
-        return (_jsxs("details", { className: "group/card last:border-b border-gray-alpha-400", open: open, onToggle: handleToggle, children: [_jsx("summary", { className: cn('list-none cursor-pointer px-3 py-4 border-t border-gray-alpha-400 bg-background-200 hover:bg-gray-100 [&::-webkit-details-marker]:hidden', summaryClassName), children: _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(ChevronRight, { size: 14, className: cn('shrink-0 text-gray-700 group-hover/card:text-gray-1000', open && 'rotate-90') }), summary] }) }), _jsx("div", { className: contentClassName, children: children })] }));
-    }
-    // Shared height with the expandable summary row. Keeps the trailing /
-    // disabled / chevron variants visually identical in height regardless of
-    // what's in the trailing slot.
-    const rowClasses = 'flex h-9 items-center gap-2 px-2 -mx-2 text-heading-14 font-medium my-2';
-    if (trailing) {
-        return (_jsx("section", { className: "-mx-4 border-t px-4 border-gray-alpha-400", children: _jsxs("div", { className: cn(rowClasses, summaryClassName), children: [_jsx("div", { className: "isolate relative shrink-0 w-3.5 h-3.5 text-gray-700", children: _jsx(ChevronRight, { size: 14, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" }) }), _jsx("span", { className: "min-w-0 flex-1", children: summary }), _jsx("div", { className: "shrink-0 pr-1", children: trailing })] }) }));
-    }
-    if (disabled) {
-        return (_jsx("section", { className: "-mx-4 border-t px-4 border-gray-alpha-400", children: _jsx("div", { className: cn(rowClasses, summaryClassName), style: { color: 'var(--ds-gray-700)', cursor: 'not-allowed' }, children: _jsx("span", { className: "min-w-0 flex-1", children: summary }) }) }));
-    }
-    return (_jsx("section", { className: "-mx-4 border-t px-4 border-gray-alpha-400", children: _jsxs("details", { className: "group", open: open, onToggle: handleToggle, children: [_jsxs("summary", { className: cn('group/trigger list-none cursor-pointer rounded hover:bg-gray-alpha-100 [&::-webkit-details-marker]:hidden', rowClasses, summaryClassName), children: [_jsxs("div", { className: "isolate relative shrink-0 text-gray-700 group-hover/trigger:text-gray-1000 w-3.5 h-3.5", children: [_jsx(ChevronRight, { size: 14, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-100 group-open:opacity-0" }), _jsx(ChevronDown, { size: 14, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 group-open:opacity-100" })] }), _jsx("span", { className: "min-w-0 flex-1", children: summary })] }), _jsx("div", { className: cn('mb-3', contentClassName), children: children })] }) }));
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGV0YWlsLWNhcmQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9zaWRlYmFyL2RldGFpbC1jYXJkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxZQUFZLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDekQsT0FBTyxFQUFrQixRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUM7QUFDakQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUVsQyxNQUFNLFVBQVUsVUFBVSxDQUFDLEVBQ3pCLE9BQU8sRUFDUCxRQUFRLEVBQ1IsUUFBUSxFQUNSLFFBQVEsR0FBRyxLQUFLLEVBQ2hCLFdBQVcsR0FBRyxLQUFLLEVBQ25CLE9BQU8sR0FBRyxTQUFTLEVBQ25CLFFBQVEsRUFDUixnQkFBZ0IsRUFDaEIsZ0JBQWdCLEdBV2pCO0lBQ0MsTUFBTSxDQUFDLElBQUksRUFBRSxPQUFPLENBQUMsR0FBRyxRQUFRLENBQUMsV0FBVyxDQUFDLENBQUM7SUFFOUMsTUFBTSxZQUFZLEdBQUcsQ0FBQyxDQUEyQyxFQUFFLEVBQUU7UUFDbkUsd0VBQXdFO1FBQ3hFLHNFQUFzRTtRQUN0RSx1RUFBdUU7UUFDdkUsOERBQThEO1FBQzlELElBQUksQ0FBQyxDQUFDLE1BQU0sS0FBSyxDQUFDLENBQUMsYUFBYTtZQUFFLE9BQU87UUFDekMsTUFBTSxJQUFJLEdBQUcsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUM7UUFDbEMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ2QsUUFBUSxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDbkIsQ0FBQyxDQUFDO0lBRUYsSUFBSSxPQUFPLEtBQUssTUFBTSxFQUFFLENBQUM7UUFDdkIsSUFBSSxRQUFRLEVBQUUsQ0FBQztZQUNiLE9BQU8sQ0FDTCxjQUNFLFNBQVMsRUFBRSxFQUFFLENBQ1gsMEVBQTBFLEVBQzFFLGdCQUFnQixDQUNqQixFQUNELEtBQUssRUFBRSxFQUFFLE1BQU0sRUFBRSxhQUFhLEVBQUUsT0FBTyxFQUFFLEdBQUcsRUFBRSxZQUU3QyxPQUFPLEdBQ0osQ0FDUCxDQUFDO1FBQ0osQ0FBQztRQUNELE9BQU8sQ0FDTCxtQkFDRSxTQUFTLEVBQUMsZ0RBQWdELEVBQzFELElBQUksRUFBRSxJQUFJLEVBQ1YsUUFBUSxFQUFFLFlBQVksYUFFdEIsa0JBQ0UsU0FBUyxFQUFFLEVBQUUsQ0FDWCwwSUFBMEksRUFDMUksZ0JBQWdCLENBQ2pCLFlBRUQsZ0JBQU0sU0FBUyxFQUFDLDJCQUEyQixhQUN6QyxLQUFDLFlBQVksSUFDWCxJQUFJLEVBQUUsRUFBRSxFQUNSLFNBQVMsRUFBRSxFQUFFLENBQ1gsd0RBQXdELEVBQ3hELElBQUksSUFBSSxXQUFXLENBQ3BCLEdBQ0QsRUFDRCxPQUFPLElBQ0gsR0FDQyxFQUNWLGNBQUssU0FBUyxFQUFFLGdCQUFnQixZQUFHLFFBQVEsR0FBTyxJQUMxQyxDQUNYLENBQUM7SUFDSixDQUFDO0lBRUQsc0VBQXNFO0lBQ3RFLHlFQUF5RTtJQUN6RSwrQkFBK0I7SUFDL0IsTUFBTSxVQUFVLEdBQ2QseUVBQXlFLENBQUM7SUFFNUUsSUFBSSxRQUFRLEVBQUUsQ0FBQztRQUNiLE9BQU8sQ0FDTCxrQkFBUyxTQUFTLEVBQUMsMkNBQTJDLFlBQzVELGVBQUssU0FBUyxFQUFFLEVBQUUsQ0FBQyxVQUFVLEVBQUUsZ0JBQWdCLENBQUMsYUFDOUMsY0FBSyxTQUFTLEVBQUMscURBQXFELFlBQ2xFLEtBQUMsWUFBWSxJQUNYLElBQUksRUFBRSxFQUFFLEVBQ1IsU0FBUyxFQUFDLDZEQUE2RCxHQUN2RSxHQUNFLEVBQ04sZUFBTSxTQUFTLEVBQUMsZ0JBQWdCLFlBQUUsT0FBTyxHQUFRLEVBQ2pELGNBQUssU0FBUyxFQUFDLGVBQWUsWUFBRSxRQUFRLEdBQU8sSUFDM0MsR0FDRSxDQUNYLENBQUM7SUFDSixDQUFDO0lBRUQsSUFBSSxRQUFRLEVBQUUsQ0FBQztRQUNiLE9BQU8sQ0FDTCxrQkFBUyxTQUFTLEVBQUMsMkNBQTJDLFlBQzVELGNBQ0UsU0FBUyxFQUFFLEVBQUUsQ0FBQyxVQUFVLEVBQUUsZ0JBQWdCLENBQUMsRUFDM0MsS0FBSyxFQUFFLEVBQUUsS0FBSyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sRUFBRSxhQUFhLEVBQUUsWUFFN0QsZUFBTSxTQUFTLEVBQUMsZ0JBQWdCLFlBQUUsT0FBTyxHQUFRLEdBQzdDLEdBQ0UsQ0FDWCxDQUFDO0lBQ0osQ0FBQztJQUVELE9BQU8sQ0FDTCxrQkFBUyxTQUFTLEVBQUMsMkNBQTJDLFlBQzVELG1CQUFTLFNBQVMsRUFBQyxPQUFPLEVBQUMsSUFBSSxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsWUFBWSxhQUMzRCxtQkFDRSxTQUFTLEVBQUUsRUFBRSxDQUNYLDJHQUEyRyxFQUMzRyxVQUFVLEVBQ1YsZ0JBQWdCLENBQ2pCLGFBRUQsZUFBSyxTQUFTLEVBQUMsd0ZBQXdGLGFBQ3JHLEtBQUMsWUFBWSxJQUNYLElBQUksRUFBRSxFQUFFLEVBQ1IsU0FBUyxFQUFDLDhGQUE4RixHQUN4RyxFQUNGLEtBQUMsV0FBVyxJQUNWLElBQUksRUFBRSxFQUFFLEVBQ1IsU0FBUyxFQUFDLDhGQUE4RixHQUN4RyxJQUNFLEVBQ04sZUFBTSxTQUFTLEVBQUMsZ0JBQWdCLFlBQUUsT0FBTyxHQUFRLElBQ3pDLEVBQ1YsY0FBSyxTQUFTLEVBQUUsRUFBRSxDQUFDLE1BQU0sRUFBRSxnQkFBZ0IsQ0FBQyxZQUFHLFFBQVEsR0FBTyxJQUN0RCxHQUNGLENBQ1gsQ0FBQztBQUNKLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGV2cm9uRG93biwgQ2hldnJvblJpZ2h0IH0gZnJvbSAnbHVjaWRlLXJlYWN0JztcbmltcG9ydCB7IHR5cGUgUmVhY3ROb2RlLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNuIH0gZnJvbSAnLi4vLi4vbGliL2NuJztcblxuZXhwb3J0IGZ1bmN0aW9uIERldGFpbENhcmQoe1xuICBzdW1tYXJ5LFxuICBjaGlsZHJlbixcbiAgb25Ub2dnbGUsXG4gIGRpc2FibGVkID0gZmFsc2UsXG4gIGRlZmF1bHRPcGVuID0gZmFsc2UsXG4gIHZhcmlhbnQgPSAnc2VjdGlvbicsXG4gIHRyYWlsaW5nLFxuICBzdW1tYXJ5Q2xhc3NOYW1lLFxuICBjb250ZW50Q2xhc3NOYW1lLFxufToge1xuICBzdW1tYXJ5OiBSZWFjdE5vZGU7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xuICBvblRvZ2dsZT86IChvcGVuOiBib29sZWFuKSA9PiB2b2lkO1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIGRlZmF1bHRPcGVuPzogYm9vbGVhbjtcbiAgdmFyaWFudD86ICdzZWN0aW9uJyB8ICdjYXJkJztcbiAgdHJhaWxpbmc/OiBSZWFjdE5vZGU7XG4gIHN1bW1hcnlDbGFzc05hbWU/OiBzdHJpbmc7XG4gIGNvbnRlbnRDbGFzc05hbWU/OiBzdHJpbmc7XG59KSB7XG4gIGNvbnN0IFtvcGVuLCBzZXRPcGVuXSA9IHVzZVN0YXRlKGRlZmF1bHRPcGVuKTtcblxuICBjb25zdCBoYW5kbGVUb2dnbGUgPSAoZTogUmVhY3QuU3ludGhldGljRXZlbnQ8SFRNTERldGFpbHNFbGVtZW50PikgPT4ge1xuICAgIC8vIFJlYWN0IHN1cmZhY2VzIGB0b2dnbGVgIGFzIGEgYnViYmxpbmcgc3ludGhldGljIGV2ZW50IGV2ZW4gdGhvdWdoIHRoZVxuICAgIC8vIG5hdGl2ZSBldmVudCBkb2Vzbid0IGJ1YmJsZS4gV2l0aG91dCB0aGlzIGd1YXJkLCBhIG5lc3RlZCA8ZGV0YWlscz5cbiAgICAvLyAoZS5nLiBhbiBldmVudCBjYXJkIGluc2lkZSB0aGUgRXZlbnRzIHNlY3Rpb24pIGNvbGxhcHNpbmcgd291bGQgZmxpcFxuICAgIC8vIHRoZSBvdXRlciBEZXRhaWxDYXJkJ3Mgc3RhdGUuIE9ubHkgcmVhY3QgdG8gZGlyZWN0IHRvZ2dsZXMuXG4gICAgaWYgKGUudGFyZ2V0ICE9PSBlLmN1cnJlbnRUYXJnZXQpIHJldHVybjtcbiAgICBjb25zdCBuZXh0ID0gZS5jdXJyZW50VGFyZ2V0Lm9wZW47XG4gICAgc2V0T3BlbihuZXh0KTtcbiAgICBvblRvZ2dsZT8uKG5leHQpO1xuICB9O1xuXG4gIGlmICh2YXJpYW50ID09PSAnY2FyZCcpIHtcbiAgICBpZiAoZGlzYWJsZWQpIHtcbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzc05hbWU9e2NuKFxuICAgICAgICAgICAgJ2xpc3Qtbm9uZSBweC0zIHB5LTQgYmctYmFja2dyb3VuZC0yMDAgWyY6Oi13ZWJraXQtZGV0YWlscy1tYXJrZXJdOmhpZGRlbicsXG4gICAgICAgICAgICBzdW1tYXJ5Q2xhc3NOYW1lXG4gICAgICAgICAgKX1cbiAgICAgICAgICBzdHlsZT17eyBjdXJzb3I6ICdub3QtYWxsb3dlZCcsIG9wYWNpdHk6IDAuOCB9fVxuICAgICAgICA+XG4gICAgICAgICAge3N1bW1hcnl9XG4gICAgICAgIDwvZGl2PlxuICAgICAgKTtcbiAgICB9XG4gICAgcmV0dXJuIChcbiAgICAgIDxkZXRhaWxzXG4gICAgICAgIGNsYXNzTmFtZT1cImdyb3VwL2NhcmQgbGFzdDpib3JkZXItYiBib3JkZXItZ3JheS1hbHBoYS00MDBcIlxuICAgICAgICBvcGVuPXtvcGVufVxuICAgICAgICBvblRvZ2dsZT17aGFuZGxlVG9nZ2xlfVxuICAgICAgPlxuICAgICAgICA8c3VtbWFyeVxuICAgICAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICAgICAnbGlzdC1ub25lIGN1cnNvci1wb2ludGVyIHB4LTMgcHktNCBib3JkZXItdCBib3JkZXItZ3JheS1hbHBoYS00MDAgYmctYmFja2dyb3VuZC0yMDAgaG92ZXI6YmctZ3JheS0xMDAgWyY6Oi13ZWJraXQtZGV0YWlscy1tYXJrZXJdOmhpZGRlbicsXG4gICAgICAgICAgICBzdW1tYXJ5Q2xhc3NOYW1lXG4gICAgICAgICAgKX1cbiAgICAgICAgPlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cImZsZXggaXRlbXMtY2VudGVyIGdhcC0xLjVcIj5cbiAgICAgICAgICAgIDxDaGV2cm9uUmlnaHRcbiAgICAgICAgICAgICAgc2l6ZT17MTR9XG4gICAgICAgICAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICAgICAgICAgJ3Nocmluay0wIHRleHQtZ3JheS03MDAgZ3JvdXAtaG92ZXIvY2FyZDp0ZXh0LWdyYXktMTAwMCcsXG4gICAgICAgICAgICAgICAgb3BlbiAmJiAncm90YXRlLTkwJ1xuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIHtzdW1tYXJ5fVxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPC9zdW1tYXJ5PlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT17Y29udGVudENsYXNzTmFtZX0+e2NoaWxkcmVufTwvZGl2PlxuICAgICAgPC9kZXRhaWxzPlxuICAgICk7XG4gIH1cblxuICAvLyBTaGFyZWQgaGVpZ2h0IHdpdGggdGhlIGV4cGFuZGFibGUgc3VtbWFyeSByb3cuIEtlZXBzIHRoZSB0cmFpbGluZyAvXG4gIC8vIGRpc2FibGVkIC8gY2hldnJvbiB2YXJpYW50cyB2aXN1YWxseSBpZGVudGljYWwgaW4gaGVpZ2h0IHJlZ2FyZGxlc3Mgb2ZcbiAgLy8gd2hhdCdzIGluIHRoZSB0cmFpbGluZyBzbG90LlxuICBjb25zdCByb3dDbGFzc2VzID1cbiAgICAnZmxleCBoLTkgaXRlbXMtY2VudGVyIGdhcC0yIHB4LTIgLW14LTIgdGV4dC1oZWFkaW5nLTE0IGZvbnQtbWVkaXVtIG15LTInO1xuXG4gIGlmICh0cmFpbGluZykge1xuICAgIHJldHVybiAoXG4gICAgICA8c2VjdGlvbiBjbGFzc05hbWU9XCItbXgtNCBib3JkZXItdCBweC00IGJvcmRlci1ncmF5LWFscGhhLTQwMFwiPlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT17Y24ocm93Q2xhc3Nlcywgc3VtbWFyeUNsYXNzTmFtZSl9PlxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiaXNvbGF0ZSByZWxhdGl2ZSBzaHJpbmstMCB3LTMuNSBoLTMuNSB0ZXh0LWdyYXktNzAwXCI+XG4gICAgICAgICAgICA8Q2hldnJvblJpZ2h0XG4gICAgICAgICAgICAgIHNpemU9ezE0fVxuICAgICAgICAgICAgICBjbGFzc05hbWU9XCJhYnNvbHV0ZSB0b3AtMS8yIGxlZnQtMS8yIC10cmFuc2xhdGUteC0xLzIgLXRyYW5zbGF0ZS15LTEvMlwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cIm1pbi13LTAgZmxleC0xXCI+e3N1bW1hcnl9PC9zcGFuPlxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwic2hyaW5rLTAgcHItMVwiPnt0cmFpbGluZ308L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L3NlY3Rpb24+XG4gICAgKTtcbiAgfVxuXG4gIGlmIChkaXNhYmxlZCkge1xuICAgIHJldHVybiAoXG4gICAgICA8c2VjdGlvbiBjbGFzc05hbWU9XCItbXgtNCBib3JkZXItdCBweC00IGJvcmRlci1ncmF5LWFscGhhLTQwMFwiPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3NOYW1lPXtjbihyb3dDbGFzc2VzLCBzdW1tYXJ5Q2xhc3NOYW1lKX1cbiAgICAgICAgICBzdHlsZT17eyBjb2xvcjogJ3ZhcigtLWRzLWdyYXktNzAwKScsIGN1cnNvcjogJ25vdC1hbGxvd2VkJyB9fVxuICAgICAgICA+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPVwibWluLXctMCBmbGV4LTFcIj57c3VtbWFyeX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9zZWN0aW9uPlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxzZWN0aW9uIGNsYXNzTmFtZT1cIi1teC00IGJvcmRlci10IHB4LTQgYm9yZGVyLWdyYXktYWxwaGEtNDAwXCI+XG4gICAgICA8ZGV0YWlscyBjbGFzc05hbWU9XCJncm91cFwiIG9wZW49e29wZW59IG9uVG9nZ2xlPXtoYW5kbGVUb2dnbGV9PlxuICAgICAgICA8c3VtbWFyeVxuICAgICAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICAgICAnZ3JvdXAvdHJpZ2dlciBsaXN0LW5vbmUgY3Vyc29yLXBvaW50ZXIgcm91bmRlZCBob3ZlcjpiZy1ncmF5LWFscGhhLTEwMCBbJjo6LXdlYmtpdC1kZXRhaWxzLW1hcmtlcl06aGlkZGVuJyxcbiAgICAgICAgICAgIHJvd0NsYXNzZXMsXG4gICAgICAgICAgICBzdW1tYXJ5Q2xhc3NOYW1lXG4gICAgICAgICAgKX1cbiAgICAgICAgPlxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiaXNvbGF0ZSByZWxhdGl2ZSBzaHJpbmstMCB0ZXh0LWdyYXktNzAwIGdyb3VwLWhvdmVyL3RyaWdnZXI6dGV4dC1ncmF5LTEwMDAgdy0zLjUgaC0zLjVcIj5cbiAgICAgICAgICAgIDxDaGV2cm9uUmlnaHRcbiAgICAgICAgICAgICAgc2l6ZT17MTR9XG4gICAgICAgICAgICAgIGNsYXNzTmFtZT1cImFic29sdXRlIHRvcC0xLzIgbGVmdC0xLzIgLXRyYW5zbGF0ZS14LTEvMiAtdHJhbnNsYXRlLXktMS8yIG9wYWNpdHktMTAwIGdyb3VwLW9wZW46b3BhY2l0eS0wXCJcbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgICA8Q2hldnJvbkRvd25cbiAgICAgICAgICAgICAgc2l6ZT17MTR9XG4gICAgICAgICAgICAgIGNsYXNzTmFtZT1cImFic29sdXRlIHRvcC0xLzIgbGVmdC0xLzIgLXRyYW5zbGF0ZS14LTEvMiAtdHJhbnNsYXRlLXktMS8yIG9wYWNpdHktMCBncm91cC1vcGVuOm9wYWNpdHktMTAwXCJcbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPVwibWluLXctMCBmbGV4LTFcIj57c3VtbWFyeX08L3NwYW4+XG4gICAgICAgIDwvc3VtbWFyeT5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e2NuKCdtYi0zJywgY29udGVudENsYXNzTmFtZSl9PntjaGlsZHJlbn08L2Rpdj5cbiAgICAgIDwvZGV0YWlscz5cbiAgICA8L3NlY3Rpb24+XG4gICk7XG59XG4iXX0=