@kolkrabbi/kol-component 0.7.0 → 0.8.0

package/src/molecules/Slider.jsx

@@ -2,28 +2,35 @@ import { useEffect, useMemo, useState } from 'react'
 import Input from '../atoms/Input.jsx'
 
 /**
- * Slider — range slider with label and an editable value readout.
+ * Slider — range slider with label and an editable value readout. The LINEAR
+ * VARIANT of RotaryDial (atoms/RotaryDial.jsx): both implement the shared
+ * value-control contract — `value` / `min` / `max` / `step` /
+ * `onChange(next: number)` / `label` / `size` / `disabled` / `formatValue`.
+ * Controlled; onChange always fires with the plain number.
  *
  * One bare inline row: label · track · editable readout. (Bordered
  * `default` and chip `subtle` variants retired 2026-07-08 — minimal is
  * the only slider.)
  *
  * The value readout is an editable <Input> (type a value, commit on
- * blur / Enter, revert on Escape). Track color is exposed as the
- * `--kol-slider-track` CSS variable on `.slider-black`; override
- * per-instance via style={{ '--kol-slider-track': '...' }}.
+ * blur / Enter, revert on Escape) — a Slider-only extra; RotaryDial's
+ * readout is display-only (atoms nest no KOL component). Track color is
+ * exposed as the `--kol-slider-track` CSS variable on `.slider-black`;
+ * override per-instance via style={{ '--kol-slider-track': '...' }}.
  *
  * @param {Object} props
  * @param {string} props.label - Slider label text
- * @param {number} props.min - Minimum value
- * @param {number} props.max - Maximum value
- * @param {number} props.value - Current value
- * @param {Function} props.onChange - Change handler
+ * @param {number} props.min - Minimum value (default: 0)
+ * @param {number} props.max - Maximum value (default: 100)
+ * @param {number} props.value - Controlled value within min–max
+ * @param {Function} props.onChange - (next: number) => void change handler
+ * @param {number} props.step - Slider step increment (default: 1)
+ * @param {number} props.size - Track length in px (mirrors RotaryDial's dial px size); unset = fluid flex-1 track
+ * @param {boolean} props.disabled - Disables track + readout and dims the control (default: false)
+ * @param {Function} props.formatValue - Optional formatter for displayed value; RotaryDial's default readout is `${value}%`
  * @param {string} props.className - Additional wrapper classes
  * @param {number} props.displayWidth - Width of the value readout, in characters (default: 6)
  * @param {string} props.fontSize - Font size for label/value (e.g., '11px')
- * @param {number} props.step - Slider step increment (default: 1)
- * @param {Function} props.formatValue - Optional formatter for displayed value
  */
 const Slider = ({
   label,
@@ -31,11 +38,13 @@ const Slider = ({
   max = 100,
   value = 0,
   onChange,
+  step = 1,
+  size,
+  disabled = false,
+  formatValue,
   className = '',
   displayWidth = 6,
   fontSize,
-  step = 1,
-  formatValue
 }) => {
   const handleChange = (e) => {
     if (onChange) {
@@ -86,7 +95,10 @@ const Slider = ({
   return (
     <div className={`control-slider gap-3 shadow-none ${className}`}>
       {label && (
-        <label className="kol-helper-12 whitespace-nowrap shrink-0 w-fit" style={fontSize ? { fontSize } : undefined}>
+        <label
+          className={`kol-helper-12 whitespace-nowrap shrink-0 w-fit ${disabled ? 'opacity-50' : ''}`}
+          style={fontSize ? { fontSize } : undefined}
+        >
           {label}
         </label>
       )}
@@ -97,7 +109,9 @@ const Slider = ({
         step={step}
         value={value}
         onChange={handleChange}
-        className="slider-black flex-1 w-full cursor-pointer"
+        disabled={disabled}
+        className={`slider-black cursor-pointer disabled:cursor-default disabled:opacity-50 ${size ? 'flex-none' : 'flex-1 w-full'}`}
+        style={size ? { width: size } : undefined}
       />
       <Input
         type="text"
@@ -106,6 +120,7 @@ const Slider = ({
         size="sm"
         chars={displayWidth}
         value={draft}
+        disabled={disabled}
         onFocus={(e) => { setEditing(true); e.target.select() }}
         onChange={(e) => setDraft(e.target.value)}
         onBlur={commit}

package/src/molecules/SplitToolButton.jsx

@@ -0,0 +1,133 @@
+import { useState } from 'react'
+import { Icon } from '@kolkrabbi/kol-icons'
+import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
+
+/**
+ * SplitToolButton — single-trigger split tool button + variant menu (the
+ * tool-palette idiom: Select · Text · [Shape ◢] · Pattern). A 28×28
+ * quiet/pressed trigger shows the current variant while the group is `active`
+ * (else the `lastPicked` variant) plus a corner fold indicator; ONE click both
+ * arms that variant (`onChange`) and opens the variant menu (floating-ui's own
+ * click handling), so the user can immediately re-pick. Menu rows show ✓ on
+ * the active variant, else the variant's shortcut.
+ *
+ * The trigger is a plain `kol-btn` element, not DS Button: Button doesn't
+ * forward refs (the popover must anchor on the real button), can't host the
+ * corner fold inside its own box, and `blurOnClick` must blur the button
+ * itself. The class output — kol-btn kol-btn-ghost + kol-btn-quiet /
+ * kol-btn-pressed — is exactly what `<Button variant="ghost" quiet pressed>`
+ * emits, so the visual contract stays Button's.
+ *
+ * For a text-trigger single-select use `Dropdown`; for the two-button
+ * action-half + chevron-half split use `ShapeDropdown`.
+ *
+ * @param {Object} props
+ * @param {{id: string, label: string, icon: string, shortcut?: string}[]} props.variants - Variants: menu rows + trigger glyph
+ * @param {string} props.value - Active variant id (controlled)
+ * @param {Function} props.onChange - Fires with a variant id — on menu pick, and on trigger click while inactive (arming)
+ * @param {string} props.lastPicked - Variant id the trigger shows while the group is inactive (default: variants[0])
+ * @param {boolean} props.active - Whether this tool group is the active tool — lit trigger, `aria-pressed`
+ * @param {number} props.size - Trigger box in px (default: 28)
+ * @param {boolean} props.blurOnClick - Blur the trigger after click so a canvas can reclaim focus and refresh its cursor (default: false)
+ * @param {string} props.aria-label - Trigger label fallback when no variant resolves
+ * @param {string} props.className - Additional classes on the trigger
+ */
+
+/* Corner fold marker. `tool-fold-indicator` doesn't exist in kol-icons yet —
+ * icon-set candidate; inline until promoted. Lives inside the button so it
+ * dims with kol-btn-quiet and inverts with kol-btn-pressed (currentColor). */
+const FoldIndicator = () => (
+  <svg
+    aria-hidden="true"
+    width={4}
+    height={4}
+    viewBox="0 0 4 4"
+    className="pointer-events-none absolute right-0.5 bottom-0.5 opacity-70"
+  >
+    <path d="M4 0v4H0z" fill="currentColor" />
+  </svg>
+)
+
+const SplitToolButton = ({
+  variants = [],
+  value,
+  onChange,
+  lastPicked,
+  active = false,
+  size = 28,
+  blurOnClick = false,
+  className = '',
+  'aria-label': ariaLabel,
+}) => {
+  const [open, setOpen] = useState(false)
+  const popover = usePopover({
+    open,
+    onOpenChange: setOpen,
+    placement: 'bottom-start',
+    offset: 4,
+    role: 'menu',
+  })
+
+  const byId = (id) => variants.find((v) => v.id === id)
+  const triggerVariant = (active && byId(value)) || byId(lastPicked) || variants[0]
+  const label = triggerVariant?.label ?? ariaLabel
+  const title = triggerVariant?.shortcut ? `${label} (${triggerVariant.shortcut})` : label
+
+  /* Arm the last-picked variant on the same click that toggles the menu —
+   * floating-ui's useClick (on the reference) handles the open/close half. */
+  const handleTriggerClick = (event) => {
+    if (!active && triggerVariant) onChange?.(triggerVariant.id)
+    if (blurOnClick) event.currentTarget.blur()
+  }
+
+  const handleSelect = (variant) => {
+    onChange?.(variant.id)
+    setOpen(false)
+  }
+
+  return (
+    <>
+      <button
+        ref={popover.refs.setReference}
+        {...popover.getReferenceProps({ onClick: handleTriggerClick })}
+        type="button"
+        className={`relative kol-btn kol-btn-ghost ${active ? 'kol-btn-pressed' : 'kol-btn-quiet'} ${className}`.trim()}
+        style={{ width: size, height: size, padding: 6 }}
+        aria-pressed={active}
+        aria-label={label}
+        title={title}
+      >
+        {triggerVariant && <Icon name={triggerVariant.icon} size={14} />}
+        <FoldIndicator />
+      </button>
+      <PopoverPanel
+        popover={popover}
+        panel={false}
+        focus={false}
+        className="bg-surface-secondary border border-fg-08 rounded shadow-lg"
+      >
+        {variants.map((variant) => {
+          const isActive = active && variant.id === value
+          return (
+            <button
+              key={variant.id}
+              type="button"
+              onClick={() => handleSelect(variant)}
+              className="w-full kol-helper-12 px-3 h-8 inline-flex items-center gap-2 text-body hover:text-emphasis text-left"
+            >
+              <span className="shrink-0 w-4 inline-flex items-center justify-center">
+                <Icon name={variant.icon} size={14} />
+              </span>
+              <span className="flex-1 truncate">{variant.label}</span>
+              <span className="kol-helper-10 text-emphasis shrink-0">
+                {isActive ? '✓' : variant.shortcut}
+              </span>
+            </button>
+          )
+        })}
+      </PopoverPanel>
+    </>
+  )
+}
+
+export default SplitToolButton

package/src/organisms/ContentFilters.jsx

@@ -210,7 +210,7 @@ const ContentFilters = ({
                   key={opt.value}
                   onClick={() => handleViewModeChange(opt.value)}
                   className={`kol-helper-14 cursor-pointer select-none ${viewMode === opt.value ? 'text-fg-96' : 'text-fg-32 hover:text-fg-48'}`}
-                  style={{ textTransform: 'uppercase', letterSpacing: 1 }}
+                  style={{ letterSpacing: 1 }}
                 >
                   {opt.label}
                 </span>
@@ -245,7 +245,7 @@ const ContentFilters = ({
               key={opt.value}
               onClick={() => setLayout(opt.value)}
               className={`kol-helper-12 cursor-pointer select-none ${layout === opt.value ? 'text-fg-96' : 'text-fg-32 hover:text-fg-48'}`}
-              style={{ textTransform: 'uppercase', letterSpacing: 1 }}
+              style={{ letterSpacing: 1 }}
             >
               {opt.label}
             </span>

package/src/organisms/GalleryCarousel.jsx

@@ -75,7 +75,8 @@ export default function GalleryCarousel({ media = [], title = '', defaultAspect
       <MediaViewer
         open={viewerIndex !== null}
         media={media}
-        initialIndex={viewerIndex ?? 0}
+        index={viewerIndex ?? 0}
+        onIndexChange={setViewerIndex}
         onClose={() => setViewerIndex(null)}
       />
     </section>

package/src/organisms/LoaderOverlay.jsx

@@ -1,30 +1,27 @@
 import FullscreenOverlay from '../atoms/FullscreenOverlay.jsx'
-import ColorLoader from './ColorLoader.jsx'
 
 /**
  * LoaderOverlay — mounts a loading curtain over everything, dead center. A thin
  * composition: it wraps DS FullscreenOverlay for the fixed, top-`z`,
  * scroll-locking backdrop (replacing the app's hand-rolled `fixed inset-0 …
- * z-[100]` div and its `CursorProvider`), then renders `children` — or a
- * default ColorLoader — as the overlay content. Being mounted IS being visible;
+ * z-[100]` div and its `CursorProvider`), then renders `children` — or the
+ * `loader` slot — as the overlay content. Being mounted IS being visible;
  * the parent removes this element to dismiss.
  *
- * The default ColorLoader is a full-viewport `dismissOnClick` curtain whose
- * completion is wired to `onEnter`. A `fixed inset-0` box escapes
+ * The loader is a SLOT, not a built-in: inject a curtain (e.g. `<ColorLoader/>`
+ * from `@kolkrabbi/kol-foundry`) via `loader` and wire its completion callback
+ * yourself. The slot is mounted in a `fixed inset-0` box that escapes
  * FullscreenOverlay's centered, `--kol-container-max`-width sheet so the loader
- * fills the screen. Pass `children` to drop that and mount anything else.
+ * fills the screen. Pass `children` instead to mount anything else, centered.
+ * With neither, the loader slot renders nothing (the overlay still works).
  *
- * @param {ReactNode}  children  overlay content; defaults to a full-screen ColorLoader
- * @param {() => void} onEnter   fired when the default ColorLoader completes/dismisses
+ * @param {ReactNode} children overlay content, centered (takes precedence)
+ * @param {ReactNode} loader   full-screen loading curtain, e.g. foundry's ColorLoader
  */
-export default function LoaderOverlay({ children, onEnter }) {
+export default function LoaderOverlay({ children, loader }) {
   return (
     <FullscreenOverlay open>
-      {children || (
-        <div className="fixed inset-0">
-          <ColorLoader onComplete={onEnter} dismissOnClick />
-        </div>
-      )}
+      {children || (loader ? <div className="fixed inset-0">{loader}</div> : null)}
     </FullscreenOverlay>
   )
 }

package/src/organisms/MediaTileGallery.jsx

@@ -0,0 +1,57 @@
+import { useState } from 'react'
+import MediaViewer from './MediaViewer.jsx'
+
+/**
+ * MediaTileGallery — a stack or grid of framed media tiles that open THE
+ * shared fullscreen MediaViewer at the clicked tile, paged across all items
+ * (the monorepo's FullscreenGallery recreated on the shared viewer instead of
+ * its nav-less single image; the AssetFigure/AssetGrid deps are dropped —
+ * tile and grid are inlined).
+ *
+ * Tiles are real <button>s, so Space + Enter activation comes free. Captions
+ * render verbatim — authored case, no auto-casing.
+ *
+ * @param {Array}  items          [{ url, alt?, kind?: 'image' | 'video', caption? }] — the viewer's media shape
+ * @param {string} layout         'stack' (flow column, default) | 'grid'
+ * @param {number} cols           grid column count (grid layout only)
+ * @param {string} tileClassName  extra classes merged onto each tile button
+ */
+export default function MediaTileGallery({ items = [], layout = 'stack', cols = 4, tileClassName = '' }) {
+  const [current, setCurrent] = useState(null)
+
+  if (!items.length) return null
+
+  const isGrid = layout === 'grid'
+
+  return (
+    <>
+      <div
+        className={isGrid ? 'grid gap-4' : 'flex flex-col gap-4'}
+        style={isGrid ? { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` } : undefined}
+      >
+        {items.map((item, i) => (
+          <figure key={i} className="min-w-0">
+            <button
+              type="button"
+              className={`block w-full cursor-zoom-in overflow-hidden rounded border border-fg-08 bg-fg-04 ${tileClassName}`.trim()}
+              onClick={() => setCurrent(i)}
+            >
+              <img src={item.url} alt={item.alt || ''} loading="lazy" className="block h-auto w-full" />
+            </button>
+            {item.caption && (
+              <figcaption className="kol-helper-12 text-meta mt-2">{item.caption}</figcaption>
+            )}
+          </figure>
+        ))}
+      </div>
+
+      <MediaViewer
+        open={current != null}
+        media={items}
+        index={current ?? 0}
+        onIndexChange={setCurrent}
+        onClose={() => setCurrent(null)}
+      />
+    </>
+  )
+}

package/src/organisms/MediaViewer.jsx

@@ -1,4 +1,5 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
+import useEmblaCarousel from 'embla-carousel-react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import FullscreenOverlay from '../atoms/FullscreenOverlay.jsx'
 
@@ -7,89 +8,113 @@ import FullscreenOverlay from '../atoms/FullscreenOverlay.jsx'
  * lightbox/gallery opener (the monorepo's ImageLightbox, FullscreenGallery
  * and WorkDetail's inline gallery all collapse onto this).
  *
- * The shell (scrim, scroll-lock, Escape, backdrop-close, close button) is
- * FullscreenOverlay — not reimplemented. This adds paging: prev/next chips,
- * arrow keys, touch swipe, wrap-around.
+ * Composed, not forked: the shell (scrim, scroll-lock, Escape, backdrop-close,
+ * close button, stacking) is FullscreenOverlay; paging (touch swipe, snap,
+ * wrap-around) is embla — the same core Carousel wraps, wired directly here
+ * because Carousel's API has no controlled index and its slide chrome is
+ * strip-width, not full-stage. ArrowLeft/ArrowRight bind to scrollPrev/Next.
  *
- * ponytail: paging is ~20 lines of state + swipe, so it's inline rather than
- * composing Carousel — embla's drag physics buy nothing for a one-item stage;
- * revisit if momentum/preview-of-next is ever wanted.
+ * Controlled: the parent owns `index`. Embla's select event reports back
+ * through `onIndexChange`; an external `index` change scrolls the stage.
  *
  * @param {boolean}  open           viewer visible
- * @param {Array}    media          [{ url, alt?, kind: 'image' | 'video' }]
- * @param {number}   initialIndex   item shown on open
- * @param {Function} onClose        close request
+ * @param {Array}    media          [{ url, alt?, kind: 'image' | 'video', caption? }]
+ * @param {number}   index          active item index (parent-owned)
  * @param {Function} onIndexChange  fires with the new index on page
+ * @param {Function} onClose        close request (Esc, backdrop, close button)
  */
-export default function MediaViewer({ open, media = [], initialIndex = 0, onClose, onIndexChange }) {
-  const [index, setIndex] = useState(initialIndex)
-  const touchStart = useRef(null)
 
-  // re-anchor to initialIndex each time the viewer opens
+/* Inverse-tier chip tokens: the overlay scrim is surface-inverse, and .kol-overlay
+ * carries no surface-context class, so the standard fg ramp doesn't flip there. */
+const CHIP =
+  'kol-embla-btn absolute top-1/2 z-10 hidden -translate-y-1/2 items-center justify-center border border-fg-inverse-16 text-inverse hover:border-fg-inverse-32 md:flex'
+
+/* Mounted only while the overlay is open, so embla initializes fresh each open
+ * with `startIndex` frozen at mount — no reInit games on later index changes. */
+function ViewerStage({ media, index, onIndexChange }) {
+  const [options] = useState(() => ({ loop: true, startIndex: index }))
+  const [emblaRef, emblaApi] = useEmblaCarousel(options)
+
+  // embla → parent: keep the parent authoritative over the active index
   useEffect(() => {
-    if (open) setIndex(initialIndex)
-  }, [open, initialIndex])
+    if (!emblaApi) return
+    const onSelect = () => onIndexChange?.(emblaApi.selectedScrollSnap())
+    emblaApi.on('select', onSelect)
+    return () => emblaApi.off('select', onSelect)
+  }, [emblaApi, onIndexChange])
 
-  const page = (delta) => {
-    if (media.length < 2) return
-    setIndex((i) => {
-      const next = (i + delta + media.length) % media.length
-      onIndexChange?.(next)
-      return next
-    })
-  }
+  // parent → embla: external index changes scroll the stage
+  useEffect(() => {
+    if (emblaApi && emblaApi.selectedScrollSnap() !== index) emblaApi.scrollTo(index)
+  }, [emblaApi, index])
 
+  // Escape lives in FullscreenOverlay; the viewer only adds arrow paging
   useEffect(() => {
-    if (!open) return
+    if (!emblaApi) return
     const onKey = (e) => {
-      if (e.key === 'ArrowLeft') page(-1)
-      if (e.key === 'ArrowRight') page(1)
+      if (e.key === 'ArrowLeft') emblaApi.scrollPrev()
+      if (e.key === 'ArrowRight') emblaApi.scrollNext()
     }
     document.addEventListener('keydown', onKey)
     return () => document.removeEventListener('keydown', onKey)
-  }, [open, media.length]) // eslint-disable-line react-hooks/exhaustive-deps
-
-  const item = media[index]
-  if (!open || !item) return null
-
-  const onTouchStart = (e) => { touchStart.current = e.touches[0].clientX }
-  const onTouchEnd = (e) => {
-    if (touchStart.current == null) return
-    const delta = e.changedTouches[0].clientX - touchStart.current
-    if (delta > 50) page(-1)
-    if (delta < -50) page(1)
-    touchStart.current = null
-  }
-
-  const chip = 'absolute top-1/2 -translate-y-1/2 z-10 hidden md:flex items-center justify-center w-10 h-10 rounded-full bg-fg-04 hover:bg-fg-08 transition-colors cursor-pointer border-0'
+  }, [emblaApi])
 
   return (
-    <FullscreenOverlay open={open} onClose={onClose}>
-      <div className="relative flex h-full w-full items-center justify-center" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
-        {media.length > 1 && (
-          <button type="button" className={`${chip} left-4`} aria-label="Previous" onClick={() => page(-1)}>
+    <div className="relative w-full">
+      <div className="overflow-hidden" ref={emblaRef}>
+        <div className="flex items-center">
+          {media.map((item, i) => (
+            <figure key={i} className="flex min-w-0 flex-[0_0_100%] flex-col items-center justify-center gap-3">
+              {item.kind === 'video' ? (
+                <video
+                  src={item.url}
+                  autoPlay
+                  muted
+                  playsInline
+                  loop
+                  className="max-h-[90vh] max-w-full object-contain"
+                />
+              ) : (
+                <img src={item.url} alt={item.alt || ''} className="max-h-[90vh] max-w-full object-contain" />
+              )}
+              {item.caption && (
+                <figcaption className="kol-helper-12 text-fg-inverse-64">{item.caption}</figcaption>
+              )}
+            </figure>
+          ))}
+        </div>
+      </div>
+
+      {media.length > 1 && (
+        <>
+          <button
+            type="button"
+            className={`${CHIP} left-4`}
+            aria-label="Previous"
+            onClick={(e) => { e.stopPropagation(); emblaApi?.scrollPrev() }}
+          >
             <Icon name="chevron-left" size={20} />
           </button>
-        )}
-        {item.kind === 'video' ? (
-          <video
-            key={item.url}
-            src={item.url}
-            autoPlay
-            muted
-            loop
-            playsInline
-            className="max-h-[85vh] max-w-full object-contain"
-          />
-        ) : (
-          <img src={item.url} alt={item.alt || ''} className="max-h-[85vh] max-w-full object-contain" />
-        )}
-        {media.length > 1 && (
-          <button type="button" className={`${chip} right-4`} aria-label="Next" onClick={() => page(1)}>
+          <button
+            type="button"
+            className={`${CHIP} right-4`}
+            aria-label="Next"
+            onClick={(e) => { e.stopPropagation(); emblaApi?.scrollNext() }}
+          >
             <Icon name="chevron-right" size={20} />
           </button>
-        )}
-      </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default function MediaViewer({ open, media = [], index = 0, onIndexChange, onClose }) {
+  if (!open || !media[index]) return null
+
+  return (
+    <FullscreenOverlay open onClose={onClose}>
+      <ViewerStage media={media} index={index} onIndexChange={onIndexChange} />
     </FullscreenOverlay>
   )
 }

package/src/atoms/PriceDisplay.jsx

@@ -1,34 +0,0 @@
-/**
- * PriceDisplay — baseline-aligned price line: a large primary amount beside a
- * small muted secondary note (a second-currency echo or a cost breakdown).
- * Formats `amount` via Intl.NumberFormat in whole units (prints are priced in
- * round numbers); `secondary` is authored at the call site, parens and all —
- * omit it to render the primary alone.
- *
- * Presentational — pure scalars in, formatted currency out. Seed atom for the
- * price/sale/edition family.
- *
- * @param {number}    amount    primary price, run through the currency formatter
- * @param {string}    currency  ISO 4217 code for `amount` (e.g. 'EUR', 'ISK')
- * @param {string}    locale    number-format locale
- * @param {ReactNode} secondary muted trailing note (omit to hide)
- */
-export default function PriceDisplay({
-  amount,
-  currency = 'EUR',
-  locale = 'de-DE',
-  secondary,
-}) {
-  const formatted = new Intl.NumberFormat(locale, {
-    style: 'currency',
-    currency,
-    maximumFractionDigits: 0,
-  }).format(amount)
-
-  return (
-    <div className="flex flex-wrap items-baseline gap-3">
-      <span className="kol-sans-heading-03">{formatted}</span>
-      {secondary != null && <span className="kol-mono-12 text-fg-48">{secondary}</span>}
-    </div>
-  )
-}