@kolkrabbi/kol-component 0.6.0 → 0.8.0

package/src/molecules/foundry/SpecimenSectionHeader.jsx

@@ -1,89 +0,0 @@
-import { Icon } from '@kolkrabbi/kol-icons'
-import Dropdown from '../Dropdown.jsx'
-import Divider from '../../atoms/Divider.jsx'
-
-/* taxonomy-ok: nests DS Dropdown + Divider (relative imports) plus kol-icons's
- * Icon (a package import the relative-import check can't see). */
-
-/**
- * SpecimenSectionHeader — the shared header every type-specimen section mounts
- * under. A title (with an optional inline icon) on the left, up to two
- * controlled dropdowns (weight + style/axis) on the right, and a horizontal
- * divider beneath. It is the connective tissue that makes the foundry sections
- * read as one system, so it is built before the sections that consume it.
- *
- * Fully controlled and data-free: it holds no font data, only label/badge text,
- * an icon name, and the two dropdowns' value/onChange pairs supplied by the
- * parent section. Promoted from the monorepo's route-local `FoundrySection`;
- * the `Foundry*` name was a route artifact, this name describes the role.
- *
- * Title source forks: `label` wins, else `badgeText`. `size` swaps the title
- * type stop (`sm` → kol-mono-12, else kol-mono-16). Each dropdown is
- * independently gated; the weight dropdown also requires a non-empty
- * `weightOptions`.
- *
- * Text casing: title and option labels render verbatim as authored — no
- * text-transform. Author "Roman" / "Italic" / "Character Set" in intended case.
- *
- * @param {Object} props
- * @param {string} props.label - Title text (takes precedence over badgeText).
- * @param {string} props.badgeText - Fallback title when label is unset.
- * @param {string} props.icon - KOL Icon name shown after the title; omit to hide.
- * @param {'sm'|'lg'} props.size - Title type stop (default 'lg').
- * @param {string} props.selectedStyle - Controlled value of the style/axis dropdown.
- * @param {Function} props.onStyleChange - Style dropdown change handler.
- * @param {boolean} props.showDropdown - Render the style/axis dropdown (default true).
- * @param {Array<{label,value}>} props.styleOptions - Style dropdown options (default Roman/Italic).
- * @param {string} props.selectedWeight - Controlled value of the weight dropdown.
- * @param {Function} props.onWeightChange - Weight dropdown change handler.
- * @param {boolean} props.showWeightDropdown - Gate the weight dropdown (default true; also needs options).
- * @param {Array<{label,value}>} props.weightOptions - Weight dropdown options (default []).
- */
-const SpecimenSectionHeader = ({
-  label,
-  badgeText,
-  icon,
-  size = 'lg',
-  selectedStyle,
-  onStyleChange,
-  showDropdown = true,
-  styleOptions = [
-    { label: 'Roman', value: 'roman' },
-    { label: 'Italic', value: 'italic' },
-  ],
-  selectedWeight,
-  onWeightChange,
-  showWeightDropdown = true,
-  weightOptions = [],
-}) => {
-  const title = label || badgeText
-  // kol-mono-text-lg / kol-mono-sm-regular don't exist in the DS theme; the
-  // nearest mono stops are kol-mono-16 (lg) and kol-mono-12 (sm).
-  const titleClass = size === 'sm' ? 'kol-mono-12' : 'kol-mono-16'
-
-  return (
-    <div className="flex flex-col gap-[13px]">
-      <div className="w-full flex flex-row justify-between items-end gap-4">
-        {/* Left: title + optional icon */}
-        <div className="flex items-center gap-3 md:gap-4">
-          <span className={titleClass}>{title}</span>
-          {icon && <Icon name={icon} size={20} />}
-        </div>
-
-        {/* Right: controlled dropdowns */}
-        <div className="flex items-center gap-4">
-          {showWeightDropdown && weightOptions.length > 0 && (
-            <Dropdown options={weightOptions} value={selectedWeight} onChange={onWeightChange} />
-          )}
-          {showDropdown && (
-            <Dropdown options={styleOptions} value={selectedStyle} onChange={onStyleChange} />
-          )}
-        </div>
-      </div>
-
-      <Divider variant="horizontal" />
-    </div>
-  )
-}
-
-export default SpecimenSectionHeader

package/src/organisms/ArticleHeader.jsx

@@ -1,95 +0,0 @@
-import Pill from '../atoms/Pill.jsx'
-import Avatar from '../atoms/Avatar.jsx'
-import Image from '../molecules/Image.jsx'
-
-/**
- * ArticleHeader — long-form article masthead: a row of tag Pills, a display
- * title, an author cluster (DS Avatar + name + role), a `date • readingTime`
- * meta line, an optional excerpt, and an optional hero image. Pure
- * presentational composition of a flat prop bag.
- *
- * De-Sanitized: the four embedded Sanity image-URL builders and the
- * `resolveImageUrl` unpacker are gone — `heroImage` is a plain resolved src
- * string handed straight to DS Image (which owns its own missing-asset
- * fallback). The author avatar is the DS Avatar atom (initials), not a
- * hand-rolled `<img>` — so `authorInitial` replaces the Sanity `authorImage`.
- * The app `reveal` entrance utility is dropped.
- *
- * Name and meta render uppercase via a presentational class only — strings are
- * authored as-is at the call site, no JS casing.
- *
- * @param {string[]} tags         Pill labels; row hidden when empty
- * @param {string}   title        display title
- * @param {string}   authorName   author name (rendered uppercase via class)
- * @param {string}   authorTitle  author role/title line
- * @param {string}   authorInitial avatar glyph; defaults to authorName's first char
- * @param {string}   date         publication date text
- * @param {string}   readingTime  reading-time text (prefixed `• ` in the meta line)
- * @param {string}   excerpt      lede paragraph; block hidden when falsy
- * @param {string}   heroImage    resolved hero image src (omit → no hero block)
- * @param {string}   className    extra classes on the <header>
- */
-export default function ArticleHeader({
-  tags = [],
-  title,
-  authorName,
-  authorTitle,
-  authorInitial,
-  date,
-  readingTime,
-  excerpt,
-  heroImage,
-  className = '',
-}) {
-  const initial = authorInitial ?? (authorName ? authorName.trim().charAt(0) : '')
-
-  return (
-    <header className={`pb-12 ${className}`.trim()}>
-      <div className="max-w-[1400px] mx-auto flex flex-col">
-        {tags.length > 0 && (
-          <div className="flex flex-wrap items-center gap-2 pb-6">
-            {tags.map((tag, i) => (
-              <Pill key={i} variant="inverse" size="md">{tag}</Pill>
-            ))}
-          </div>
-        )}
-
-        <div className="flex flex-col gap-6">
-          <h1 className="kol-prose-title text-balance">{title}</h1>
-
-          <div className="flex flex-wrap items-center gap-6 text-fg-64 pb-3">
-            <div className="flex items-center gap-4">
-              <Avatar initial={initial} size="lg" />
-              <div className="flex flex-col">
-                <span className="kol-helper-12 uppercase text-fg-48">{authorName}</span>
-                <span className="kol-mono-12 text-fg-64">{authorTitle}</span>
-              </div>
-            </div>
-            <div className="flex items-center gap-3 kol-helper-12 uppercase text-fg-48">
-              <span>{date}</span>
-              {readingTime && <span>• {readingTime}</span>}
-            </div>
-          </div>
-
-          {excerpt && (
-            <div className="pb-4 w-full lg:w-[80%]">
-              <p className="kol-mono-14 text-fg-64">{excerpt}</p>
-            </div>
-          )}
-
-          {heroImage && (
-            <div className="rounded overflow-hidden border border-fg-08">
-              <Image
-                src={heroImage}
-                alt=""
-                loading="eager"
-                className="object-cover"
-                style={{ width: '100%', aspectRatio: '4/2', objectFit: 'cover' }}
-              />
-            </div>
-          )}
-        </div>
-      </div>
-    </header>
-  )
-}

package/src/organisms/ColorLoader.jsx

@@ -1,155 +0,0 @@
-import { motion as Motion, useAnimationControls } from 'framer-motion'
-import { useEffect, useRef, useState } from 'react'
-import TextPressure from '../atoms/TextPressure.jsx'
-import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
-
-/**
- * ColorLoader — a full-height branded intro/loading curtain. Fills its parent
- * on a solid backdrop, times in a variable-font wordmark (a live TextPressure
- * effect) after `wordmarkDelay`, then reveals a bouncing down-chevron cue after
- * `scrollDelay`. With `dismissOnClick`, clicking the curtain slides the whole
- * thing up out of view and fires `onComplete`; otherwise the parent owns
- * dismissal (unmount when its work is done). Generalized from the app's
- * KOLKRABBI loader: the cursor trail, `cursor: none`, and window-scroll/keyboard
- * gesture hijack are all dropped — exit is a plain click or parent-driven.
- *
- * Reduced motion → no timers, no tweens: one static frame (wordmark + cue shown
- * at rest) and `onComplete` fires immediately on mount, so the curtain never
- * makes a reduced-motion user wait.
- *
- * The wordmark needs a variable font — see TextPressure's font contract. Pass
- * `fontFamily` / `fontUrl` to point at the KOL variable font (a consumer asset).
- *
- * @param {string}    text           wordmark string fed to TextPressure
- * @param {string}    fontFamily     wordmark font family (→ TextPressure)
- * @param {string}    [fontUrl]      variable-font URL → TextPressure @font-face
- * @param {() => void} onComplete    fired after the exit slide-up (or at once, reduced)
- * @param {boolean}   dismissOnClick click the curtain to slide up + complete
- * @param {string}    bgColor        backdrop color (KOL token / CSS color)
- * @param {string}    markColor      wordmark + chevron color (KOL token / CSS color)
- * @param {number}    wordmarkDelay  ms before the wordmark fades in
- * @param {number}    scrollDelay    ms before the chevron cue reveals
- * @param {number}    exitDuration   seconds for the slide-up exit tween
- */
-export default function ColorLoader({
-  text = 'KOLKRABBI',
-  fontFamily = 'var(--kol-font-family-sans)',
-  fontUrl,
-  onComplete,
-  dismissOnClick = false,
-  bgColor = 'var(--kol-surface-primary)',
-  markColor = 'var(--kol-fg-emphasis)',
-  wordmarkDelay = 1000,
-  scrollDelay = 2000,
-  exitDuration = 1.8,
-}) {
-  const reducedMotion = usePrefersReducedMotion()
-  const [showMark, setShowMark] = useState(reducedMotion)
-  const [showCue, setShowCue] = useState(reducedMotion)
-  const [exiting, setExiting] = useState(false)
-  const controls = useAnimationControls()
-  const firedRef = useRef(false)
-
-  const fireComplete = () => {
-    if (firedRef.current) return
-    firedRef.current = true
-    onComplete?.()
-  }
-
-  useEffect(() => {
-    if (reducedMotion) {
-      // Skip the whole sequence: static frame, signal done at once.
-      setShowMark(true)
-      setShowCue(true)
-      fireComplete()
-      return undefined
-    }
-    const markTimer = setTimeout(() => setShowMark(true), wordmarkDelay)
-    const cueTimer = setTimeout(() => setShowCue(true), scrollDelay)
-    return () => {
-      clearTimeout(markTimer)
-      clearTimeout(cueTimer)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [reducedMotion, wordmarkDelay, scrollDelay])
-
-  const dismiss = () => {
-    if (exiting) return
-    setExiting(true)
-    if (reducedMotion) {
-      fireComplete()
-      return
-    }
-    controls
-      .start({ y: '-100%', transition: { duration: exitDuration, ease: 'easeInOut' } })
-      .then(fireComplete)
-  }
-
-  return (
-    <Motion.div
-      className={`flex h-full w-full flex-col ${dismissOnClick ? 'cursor-pointer' : ''}`}
-      style={{ backgroundColor: bgColor }}
-      animate={controls}
-      initial={{ y: 0 }}
-      onClick={dismissOnClick ? dismiss : undefined}
-    >
-      {/* Top third — spacer */}
-      <div className="flex flex-1 items-end justify-center self-stretch" />
-
-      {/* Middle third — wordmark + cue */}
-      <div className="flex flex-1 flex-col items-center justify-center gap-12 self-stretch">
-        <Motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: showMark ? 1 : 0 }}
-          transition={{ duration: reducedMotion ? 0 : 0.5 }}
-          className="w-full px-6"
-        >
-          <div className="mx-auto h-20 w-full max-w-[280px] sm:h-24 sm:max-w-[400px] md:h-32 md:max-w-[600px]">
-            <TextPressure
-              text={text}
-              fontFamily={fontFamily}
-              fontUrl={fontUrl}
-              textColor={markColor}
-              flex
-              width
-              weight
-              italic={false}
-              minFontSize={40}
-            />
-          </div>
-        </Motion.div>
-
-        <Motion.div
-          initial={{ opacity: 0, y: 0 }}
-          animate={{
-            opacity: showCue ? 0.6 : 0,
-            y: showCue && !reducedMotion ? [0, 12, 0] : 0,
-          }}
-          transition={{
-            opacity: { duration: reducedMotion ? 0 : 0.5 },
-            y: reducedMotion ? { duration: 0 } : { duration: 1.5, repeat: Infinity, ease: 'easeInOut' },
-          }}
-          className="mt-12"
-          style={{ color: markColor }}
-        >
-          <svg
-            width="32"
-            height="32"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden="true"
-          >
-            <polyline points="6 9 12 15 18 9" />
-          </svg>
-        </Motion.div>
-      </div>
-
-      {/* Bottom third — spacer */}
-      <div className="flex flex-1 items-end justify-center self-stretch" />
-    </Motion.div>
-  )
-}

package/src/organisms/DiagonalMarqueeRiver.jsx

@@ -1,138 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react'
-import { gsap } from 'gsap'
-import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
-
-/**
- * DiagonalMarqueeRiver — an auto-scrolling multi-column marquee "river":
- * `items` are dealt round-robin into `colCount` vertical columns, each column
- * runs an infinite constant-velocity GSAP y-tween at its own speed, and the
- * whole block is rotated + scaled so the columns stream diagonally across a
- * tall stage. An IntersectionObserver pauses every tween while the stage is
- * off-screen. Data-agnostic — the card is a `renderItem` slot; the engine only
- * measures scrollHeight and tweens y.
- *
- * Each column's list is rendered twice so the tween can travel exactly one set
- * then repeat with an invisible wrap. On `prefers-reduced-motion` no GSAP runs
- * and the columns render static. The tween set is rebuilt on container resize
- * (a ResizeObserver remeasures scrollHeight — the source keyed only on the item
- * list and drifted when the viewport changed).
- *
- * @param {any[]}    items         pool dealt round-robin into columns
- * @param {(item:any,i:number)=>ReactNode} renderItem card slot per item
- * @param {number}   colCount      number of columns (default 4)
- * @param {number[]} columnSpeeds  px/s per column (default [28,38,22,34], fallback 30)
- * @param {number}   gap           vertical gap between cards and gap-between-columns, px (default 24)
- * @param {string}   height        stage height (default '300vh')
- * @param {number}   rotate        tilt of the block, deg (default -15)
- * @param {number}   scale         oversize of the block (default 1.3)
- * @param {boolean}  shuffle       one-time shuffle of `items` before dealing (default false)
- */
-export default function DiagonalMarqueeRiver({
-  items = [],
-  renderItem,
-  colCount = 4,
-  columnSpeeds = [28, 38, 22, 34],
-  gap = 24,
-  height = '300vh',
-  rotate = -15,
-  scale = 1.3,
-  shuffle = false,
-}) {
-  const containerRef = useRef(null)
-  const columnRefs = useRef([])
-  const tweensRef = useRef([])
-  const reducedMotion = usePrefersReducedMotion()
-
-  // Deal items round-robin into columns (optionally shuffled once).
-  const columns = useMemo(() => {
-    const pool = shuffle ? [...items].sort(() => Math.random() - 0.5) : items
-    const cols = Array.from({ length: colCount }, () => [])
-    pool.forEach((item, i) => cols[i % colCount].push(item))
-    return cols
-  }, [items, colCount, shuffle])
-
-  useEffect(() => {
-    if (reducedMotion) return undefined
-
-    const build = () => {
-      const colEls = columnRefs.current.filter(Boolean)
-      tweensRef.current.forEach((tw) => tw.kill())
-      tweensRef.current = []
-      if (!colEls.length) return
-
-      colEls.forEach((colEl, i) => {
-        colEl.style.willChange = 'transform'
-        const singleSetHeight = colEl.scrollHeight / 2 // one copy of the doubled list
-        const speed = columnSpeeds[i] || 30
-        const initialOffset = -(singleSetHeight * ((i * 0.15) % 1)) // staggered per-column start
-        gsap.set(colEl, { y: initialOffset })
-        const tween = gsap.to(colEl, {
-          y: initialOffset - singleSetHeight, // travel exactly one set → seamless
-          duration: singleSetHeight / speed, // constant px/s regardless of column length
-          ease: 'none',
-          repeat: -1,
-        })
-        tweensRef.current.push(tween)
-      })
-    }
-
-    build()
-
-    // Pause tweens while the stage is off-screen.
-    const io = new IntersectionObserver(
-      ([entry]) => {
-        tweensRef.current.forEach((tw) => (entry.isIntersecting ? tw.resume() : tw.pause()))
-      },
-      { threshold: 0 },
-    )
-    if (containerRef.current) io.observe(containerRef.current)
-
-    // [source-bug] resize-remeasure: source keyed only on the item list, so a
-    // viewport change left the tweens measuring a stale scrollHeight. Rebuild
-    // on container resize (debounced).
-    let raf = 0
-    const ro = new ResizeObserver(() => {
-      cancelAnimationFrame(raf)
-      raf = requestAnimationFrame(build)
-    })
-    if (containerRef.current) ro.observe(containerRef.current)
-
-    return () => {
-      io.disconnect()
-      ro.disconnect()
-      cancelAnimationFrame(raf)
-      tweensRef.current.forEach((tw) => tw.kill())
-      tweensRef.current = []
-    }
-  }, [columns, columnSpeeds, reducedMotion])
-
-  return (
-    <div ref={containerRef} className="w-full overflow-hidden" style={{ height }}>
-      <div
-        className="flex gap-6"
-        style={{
-          transform: `rotate(${rotate}deg) scale(${scale})`,
-          transformOrigin: 'center center',
-          height: '140%',
-          marginTop: '-20%',
-        }}
-      >
-        {columns.map((col, colIndex) => (
-          <div key={colIndex} className="flex-1 overflow-hidden">
-            <div
-              ref={(el) => {
-                columnRefs.current[colIndex] = el
-              }}
-              className="flex flex-col"
-              style={{ gap: `${gap}px` }}
-            >
-              {[...col, ...col].map((item, i) => (
-                <div key={i}>{renderItem?.(item, i)}</div>
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}

package/src/organisms/ParallaxShelf.jsx

@@ -1,141 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import useEmblaCarousel from 'embla-carousel-react'
-import WorkCard from './WorkCard.jsx'
-import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
-
-/* Scroll-driven parallax strength — fraction of scroll delta applied to the
- * shelf. Eases in quadratically with page-scroll progress (min → max). */
-const SCROLL_PARALLAX_MIN = 0.1
-const SCROLL_PARALLAX_MAX = 0.4
-const DRAG_THRESHOLD_SQ = 25
-/* Aligned edge gets the big gutter so the first/last card lands under a
- * 1400px content column. */
-const EDGE_GUTTER = 'max(4rem, calc((100vw - 1400px) / 2 + 16rem))'
-
-/**
- * ParallaxShelf — one horizontal shelf row: a drag-free Embla carousel of
- * project cards with scroll-driven parallax. As the page scrolls the track is
- * nudged horizontally by `delta × parallax × direction`, the strength easing in
- * the further down the page you are; alternating rows (`fromLeft`) scroll in
- * opposite directions for a woven wall of shelves. Includes a drag-vs-click
- * guard (a drag never fires a card link) and an edge-aligned category label.
- *
- * Calls `useEmblaCarousel` directly (FeaturedCarousel's precedent) because the
- * parallax nudge needs `internalEngine()`, which DS Carousel encapsulates and
- * must not be modified. The source's `WheelGesturesPlugin` is dropped (not a
- * DS dependency). Parallax is disabled under prefers-reduced-motion and on
- * small screens — both fall back to a plain wheel/drag carousel.
- *
- * Card-agnostic via `renderCard`; defaults to DS **WorkCard** with an
- * `index`-staggered ragged height. Pass a plain `items` array of flat project
- * objects (no Sanity keying).
- *
- * Text casing: the label renders verbatim (author `type.label` as e.g.
- * "Client Work") — no text-transform.
- *
- * @param {{label:string}} type       category; `label` renders in the edge caption
- * @param {Array}          items      flat project objects passed to the card renderer
- * @param {boolean}        fromLeft   direction of alignment / start index / parallax sign / label side (default false)
- * @param {Function}       renderCard (item, index) => ReactNode — card renderer (default WorkCard)
- * @param {Function}       onNavigate (href, event) => void — forwarded to the default WorkCard
- * @param {string}         className  extra classes on the section
- */
-export default function ParallaxShelf({
-  type,
-  items = [],
-  fromLeft = false,
-  renderCard,
-  onNavigate,
-  className = '',
-}) {
-  const reduced = usePrefersReducedMotion()
-  const [isMobile] = useState(
-    () => typeof window !== 'undefined' && window.matchMedia('(max-width: 767px)').matches,
-  )
-
-  const [emblaRef, emblaApi] = useEmblaCarousel({
-    dragFree: true,
-    align: fromLeft ? 'end' : 'start',
-    containScroll: 'trimSnaps',
-    ...(fromLeft && { startIndex: items.length - 1 }),
-  })
-
-  const sectionRef = useRef(null)
-  const lastScrollY = useRef(0)
-
-  // Scroll-driven parallax: page scroll nudges the carousel while in view.
-  useEffect(() => {
-    if (!emblaApi || reduced || isMobile) return
-    lastScrollY.current = window.scrollY
-
-    const onScroll = () => {
-      const section = sectionRef.current
-      if (!section) return
-      const rect = section.getBoundingClientRect()
-      const inView = rect.bottom > 0 && rect.top < window.innerHeight
-      if (!inView) {
-        lastScrollY.current = window.scrollY
-        return
-      }
-      const delta = window.scrollY - lastScrollY.current
-      lastScrollY.current = window.scrollY
-      const scrollProgress = Math.min(window.scrollY / (document.body.scrollHeight - window.innerHeight), 1)
-      const parallax = SCROLL_PARALLAX_MIN + (SCROLL_PARALLAX_MAX - SCROLL_PARALLAX_MIN) * (scrollProgress * scrollProgress)
-      const engine = emblaApi.internalEngine()
-      const offset = delta * parallax * (fromLeft ? 1 : -1)
-      engine.scrollBody.useDuration(0)
-      engine.scrollTo.distance(offset, false)
-    }
-
-    window.addEventListener('scroll', onScroll, { passive: true })
-    return () => window.removeEventListener('scroll', onScroll)
-  }, [emblaApi, fromLeft, reduced, isMobile])
-
-  // Drag-vs-click guard (5px): a drag suppresses the ensuing card-link click.
-  const dragged = useRef(false)
-  const pointerStart = useRef({ x: 0, y: 0 })
-  const onPointerDown = useCallback((e) => {
-    dragged.current = false
-    pointerStart.current = { x: e.clientX, y: e.clientY }
-  }, [])
-  const onPointerMove = useCallback((e) => {
-    if (dragged.current) return
-    const dx = e.clientX - pointerStart.current.x
-    const dy = e.clientY - pointerStart.current.y
-    if (dx * dx + dy * dy > DRAG_THRESHOLD_SQ) dragged.current = true
-  }, [])
-  const onClickCapture = useCallback((e) => {
-    if (dragged.current) e.preventDefault()
-  }, [])
-
-  const card = (item, i) =>
-    renderCard ? renderCard(item, i) : <WorkCard key={i} {...item} index={i} onNavigate={onNavigate} />
-
-  return (
-    <section ref={sectionRef} className={`py-6 md:py-16 ${className}`.trim()}>
-      <div
-        className="overflow-visible select-none"
-        ref={emblaRef}
-        style={{
-          paddingLeft: fromLeft ? undefined : EDGE_GUTTER,
-          paddingRight: fromLeft ? EDGE_GUTTER : undefined,
-        }}
-      >
-        <div
-          className="flex gap-8 items-end"
-          onPointerDown={onPointerDown}
-          onPointerMove={onPointerMove}
-          onClickCapture={onClickCapture}
-        >
-          {items.map((item, i) => card(item, i))}
-        </div>
-      </div>
-
-      {type?.label && (
-        <div className={`max-w-[1400px] mx-auto mt-4 md:mt-6 ${fromLeft ? 'pr-4 md:pr-64 text-right' : 'pl-4 md:pl-64'}`}>
-          <p className="kol-helper-12 text-auto">{type.label}</p>
-        </div>
-      )}
-    </section>
-  )
-}