@kolkrabbi/kol-component 0.33.0 → 0.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -24,7 +24,7 @@
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-icons": "^0.13.0"
+    "@kolkrabbi/kol-icons": "^0.14.0"
   },
   "peerDependencies": {
     "framer-motion": "^12.0.0",

package/src/atoms/Badge.jsx

@@ -7,14 +7,18 @@
 
 import { Icon } from '@kolkrabbi/kol-icons'
 
+/* Tone names mirror StatusChip's --ui-* ladder (error/warning/info/success —
+ * siblings, one language). `destructive` and `critical` are legacy aliases
+ * of `error`; canonical name in new call sites is `error`. */
 const VARIANT_MAP = {
   default: 'kol-badge-default',
   secondary: 'kol-badge-secondary',
-  destructive: 'kol-badge-destructive',
+  error: 'kol-badge-error',
+  destructive: 'kol-badge-error',
+  critical: 'kol-badge-error',
   outline: 'kol-badge-outline',
   success: 'kol-badge-success',
   warning: 'kol-badge-warning',
-  critical: 'kol-badge-critical',
   info: 'kol-badge-info'
 }
 

package/src/atoms/ColorSwatch.jsx

@@ -34,7 +34,7 @@
  *   onClick         — if provided, renders as <button>; else <span>.
  *   title           — passes through.
  */
-import TransparentX from './TransparentX'
+import TransparentX from '../utilities/TransparentX'
 
 const SIZE_CLASSES = {
   fill:    'w-full aspect-square',

package/src/atoms/Image.jsx

@@ -6,7 +6,7 @@
  * visible at its intended size (aspect-ratio preserved).
  */
 import { useState } from 'react'
-import AssetPlaceholder from './AssetPlaceholder'
+import AssetPlaceholder from '../utilities/AssetPlaceholder'
 
 export default function Image({
   src,

package/src/graphics/Graphic.jsx

@@ -12,7 +12,7 @@
  * than silently empty.
  */
 import { useEffect, useState } from 'react'
-import AssetPlaceholder from '../atoms/AssetPlaceholder.jsx'
+import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
 
 let RAW = null              // category → name → raw svg, once the chunk resolves
 let loadPromise = null

package/src/index.js

@@ -17,8 +17,8 @@
 
 // atoms
 export { default as AnimatedTitle } from './atoms/AnimatedTitle.jsx'
-export { default as AssetGrid } from './atoms/AssetGrid.jsx'
-export { default as AssetPlaceholder } from './atoms/AssetPlaceholder.jsx'
+export { default as AssetGrid } from './utilities/AssetGrid.jsx'
+export { default as AssetPlaceholder } from './utilities/AssetPlaceholder.jsx'
 export { default as Avatar } from './atoms/Avatar.jsx'
 export { default as Badge } from './atoms/Badge.jsx'
 export { default as Button } from './atoms/Button.jsx'
@@ -27,19 +27,19 @@ export { default as CurveOverlay } from './atoms/CurveOverlay.jsx'
 export { default as Divider } from './atoms/Divider.jsx'
 export { default as DocsToc } from './molecules/DocsToc.jsx'
 export { default as DropdownTagFilter } from './molecules/DropdownTagFilter.jsx'
-export { default as EmptyState } from './atoms/EmptyState.jsx'
+export { default as EmptyState } from './molecules/EmptyState.jsx'
 export { default as IconFrame } from './atoms/IconFrame.jsx'
-export { default as ExitPreview } from './atoms/ExitPreview.jsx'
+export { default as ExitPreview } from './utilities/ExitPreview.jsx'
 export { default as Figure } from './atoms/Figure.jsx'
-export { default as FullscreenOverlay } from './molecules/FullscreenOverlay.jsx'
+export { default as FullscreenOverlay } from './utilities/FullscreenOverlay.jsx'
 export { default as HlsVideo } from './atoms/HlsVideo.jsx'
 export { default as Input } from './atoms/Input.jsx'
 export { default as Label } from './atoms/Label.jsx'
 export { default as LabeledControl } from './molecules/LabeledControl.jsx'
-export { default as OverlayGlassPanel } from './atoms/OverlayGlassPanel.jsx'
+export { default as OverlayGlassPanel } from './utilities/OverlayGlassPanel.jsx'
 export { default as Pill } from './atoms/Pill.jsx'
-export { usePopover, PopoverPanel, Tooltip } from './atoms/Popover.jsx'
-export { default as ProsePreview } from './atoms/ProsePreview.jsx'
+export { usePopover, PopoverPanel, Tooltip } from './utilities/Popover.jsx'
+export { default as ProsePreview } from './utilities/ProsePreview.jsx'
 export { default as QuantityInput } from './molecules/QuantityInput.jsx'
 export { default as RotaryDial } from './atoms/RotaryDial.jsx'
 export { default as SearchInput } from './molecules/SearchInput.jsx'
@@ -52,17 +52,16 @@ export { default as Textarea } from './atoms/Textarea.jsx'
 export { default as ToggleBracket } from './atoms/ToggleBracket.jsx'
 export { default as ToggleCheckbox } from './atoms/ToggleCheckbox.jsx'
 export { default as ToggleSwitch } from './atoms/ToggleSwitch.jsx'
-export { default as TiltCard } from './atoms/TiltCard.jsx'
-export { default as TransparentX } from './atoms/TransparentX.jsx'
+export { default as TiltCard } from './utilities/TiltCard.jsx'
+export { default as TransparentX } from './utilities/TransparentX.jsx'
 export { default as ViewToggle } from './atoms/ViewToggle.jsx'
 
 // molecules
 export { Accordion, AccordionPanel } from './molecules/Accordion.jsx'
-export { default as ButtonGroup } from './molecules/ButtonGroup.jsx'
+export { default as ButtonGroup } from './utilities/ButtonGroup.jsx'
 /* monorepo sets (P6–P10) — molecule members */
 export { default as AlignmentGrid } from './molecules/AlignmentGrid.jsx'
 export { default as ImageBlock } from './molecules/ImageBlock.jsx'
-export { default as InteractiveImage } from './atoms/InteractiveImage.jsx'
 export { default as SelectionOverlay } from './atoms/SelectionOverlay.jsx'
 export { default as VideoBlock, getEmbedUrl } from './molecules/VideoBlock.jsx'
 export { default as CardFeatureItem } from './molecules/CardFeatureItem.jsx'
@@ -79,7 +78,7 @@ export { default as MediaRow } from './molecules/MediaRow.jsx'
 export { MenuItem, MenuDropdownItem, MenuDropdownDivider, MenuDropdownNest } from './molecules/MenuItem.jsx'
 export { MenuPopover } from './molecules/MenuPopover.jsx'
 export { ModalProvider, useModal } from './molecules/Modal.jsx'
-export { default as PaletteHarmonyWheel } from './atoms/PaletteHarmonyWheel.jsx'
+export { default as PaletteHarmonyWheel } from './molecules/PaletteHarmonyWheel.jsx'
 export { default as PropertyInput } from './molecules/PropertyInput.jsx'
 export { default as ShapeDropdown } from './molecules/ShapeDropdown.jsx'
 export { default as ShellDrawer } from './molecules/ShellDrawer.jsx'
@@ -96,20 +95,20 @@ export { default as TabsRow } from './molecules/TabsRow.jsx'
    standalone @kolkrabbi/kol-foundry package (with the type-specimen kit +
    live-font effects moved there 2026-07-09) — never re-exported here. */
 export { default as Canvas, CanvasFrame, PanViewport, CANVAS_VIRTUAL_W, DEFAULT_ASPECTS, CANVAS_DEFAULTS } from './organisms/Canvas.jsx'
-export { default as EditorShell } from './organisms/EditorShell.jsx'
+export { default as EditorShell } from './utilities/EditorShell.jsx'
 export { default as GalleryCarousel } from './organisms/GalleryCarousel.jsx'
-export { default as AsciiCursor } from './atoms/AsciiCursor.jsx'
+export { default as AsciiCursor } from './utilities/AsciiCursor.jsx'
 export { default as BentoCard } from './molecules/BentoCard.jsx'
 export { default as Carousel } from './molecules/Carousel.jsx'
 export { default as ContentFilters } from './organisms/ContentFilters.jsx'
 export { default as CtaGlobal } from './organisms/CtaGlobal.jsx'
-export { default as ErrorBoundary } from './molecules/ErrorBoundary.jsx'
+export { default as ErrorBoundary } from './utilities/ErrorBoundary.jsx'
 export { default as FeatureSplit } from './organisms/FeatureSplit.jsx'
 export { default as FeaturedCarousel } from './organisms/FeaturedCarousel.jsx'
 export { default as FeaturesCardSection } from './organisms/FeaturesCardSection.jsx'
 export { default as FoundryCTA } from './organisms/FoundryCTA.jsx'
 export { default as FullBleedHero } from './organisms/FullBleedHero.jsx'
-export { default as LoaderOverlay } from './molecules/LoaderOverlay.jsx'
+export { default as LoaderOverlay } from './utilities/LoaderOverlay.jsx'
 export { default as MediaLibrary, MediaLibraryProvider, useMediaLibrary, MediaPicker, MediaBrowser } from './organisms/MediaLibrary.jsx'
 export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'
 export { default as MediaViewer } from './organisms/MediaViewer.jsx'

package/src/molecules/BentoCard.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { motion } from 'framer-motion'
 import HlsVideo from '../atoms/HlsVideo.jsx'
-import AssetPlaceholder from '../atoms/AssetPlaceholder.jsx'
+import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
 import Button from '../atoms/Button.jsx'
 import Image from '../atoms/Image.jsx'
 import useTilt from '../hooks/useTilt.js'

package/src/molecules/ColorInputRow.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import ColorSwatch from '../atoms/ColorSwatch'
 import Input from '../atoms/Input'
-import { usePopover, PopoverPanel } from '../atoms/Popover'
+import { usePopover, PopoverPanel } from '../utilities/Popover'
 
 /**
  * ColorInputRow — swatch chip + `#` hex input row. The single merged form of

package/src/molecules/Dropdown.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { MenuDropdownItem } from './MenuItem.jsx'
-import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
+import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
 import { indicatorSize } from '../hooks/glyphLadders.js'
 
 /**

package/src/{atoms → molecules}/EmptyState.jsx

@@ -13,10 +13,14 @@
 export default function EmptyState({ eyebrow, title, body, footer }) {
   return (
     <div>
+      {/* helper (line-height 1) is single-line chrome ONLY — title and footer
+        * can wrap, so they ride the line-height-bearing kol-mono-* scale
+        * (the type-conform fault line; user, 2026-08-09). Eyebrow stays
+        * helper: a one-line kicker. */}
       {eyebrow && <p className="kol-helper-10 text-meta mb-1">{eyebrow}</p>}
-      {title && <p className="kol-helper-16 text-emphasis mb-3">{title}</p>}
+      {title && <p className="kol-mono-16 text-emphasis mb-3">{title}</p>}
       {body && <p className="kol-sans-body-03 text-body mb-4">{body}</p>}
-      {footer && <p className="kol-helper-12 text-meta pt-3 border-t border-fg-08">{footer}</p>}
+      {footer && <p className="kol-mono-12 text-meta pt-3 border-t border-fg-08">{footer}</p>}
     </div>
   )
 }

package/src/molecules/FieldRow.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import Input from '../atoms/Input'
-import { usePopover, PopoverPanel } from '../atoms/Popover'
+import { usePopover, PopoverPanel } from '../utilities/Popover'
 import Dropdown from './Dropdown'
 
 /**

package/src/molecules/MenuItem.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
+import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
 
 /**
  * MenuItem — top-level menu entry. Trigger button + popover panel.
@@ -54,11 +54,13 @@ export function MenuItem({
           style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 200ms' }}
         />
       </button>
+      {/* w-max: floats size to CONTENT, never to the containing block —
+        * same family law as ShapeDropdown's panel (2026-08-09 review). */}
       <PopoverPanel
         popover={popover}
         panel={false}
         focus={false}
-        className={`bg-surface-secondary rounded ${panelClassName}`}
+        className={`w-max bg-surface-secondary rounded ${panelClassName}`}
         style={panelStyle}
       >
         <div

package/src/molecules/ShapeDropdown.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button.jsx'
-import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
+import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
 import { MenuDropdownItem } from './MenuItem.jsx'
 
 /**
@@ -68,11 +68,15 @@ const ShapeDropdown = ({ options = [], value, onChange, onAction, className = ''
       >
         <Button variant="ghost" size="sm" quiet iconOnly="chevron-down" iconSize={10} aria-label="Variants" />
       </span>
+      {/* w-max: a float sizes to its CONTENT (floating-ui contract) — without
+        * it the absolutely-positioned panel can stretch against its containing
+        * block and ignore both its rows and its trigger (2026-08-09 review,
+        * the shape menu spanning the whole card). */}
       <PopoverPanel
         popover={popover}
         panel={false}
         focus={false}
-        className="bg-surface-secondary border border-fg-08 rounded shadow-lg"
+        className="w-max bg-surface-secondary border border-fg-08 rounded shadow-lg"
       >
         {options.map((option) => (
           <MenuDropdownItem

package/src/molecules/SplitToolButton.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
+import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
 
 /**
  * SplitToolButton — single-trigger split tool button + variant menu (the
@@ -100,11 +100,12 @@ const SplitToolButton = ({
         {triggerVariant && <Icon name={triggerVariant.icon} size={14} />}
         <FoldIndicator />
       </button>
+      {/* w-max — floats size to content, the menu-family law (2026-08-09). */}
       <PopoverPanel
         popover={popover}
         panel={false}
         focus={false}
-        className="bg-surface-secondary border border-fg-08 rounded shadow-lg"
+        className="w-max bg-surface-secondary border border-fg-08 rounded shadow-lg"
       >
         {variants.map((variant) => {
           const isActive = active && variant.id === value

package/src/organisms/FeaturedCarousel.jsx

@@ -2,7 +2,7 @@ import { isValidElement, useCallback, useEffect, useState } from 'react'
 import useEmblaCarousel from 'embla-carousel-react'
 import Image from '../atoms/Image.jsx'
 import HlsVideo from '../atoms/HlsVideo.jsx'
-import OverlayGlassPanel from '../atoms/OverlayGlassPanel.jsx'
+import OverlayGlassPanel from '../utilities/OverlayGlassPanel.jsx'
 
 /**
  * Per-slide media layer: a `{ src, kind }` descriptor becomes a cover-fit

package/src/organisms/MediaLibrary.jsx

@@ -2,7 +2,7 @@ import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button.jsx'
 import SegmentedToggle from '../atoms/SegmentedToggle.jsx'
-import FullscreenOverlay from '../molecules/FullscreenOverlay.jsx'
+import FullscreenOverlay from '../utilities/FullscreenOverlay.jsx'
 import MediaCard from '../molecules/MediaCard.jsx'
 import MediaRow from '../molecules/MediaRow.jsx'
 import ContentFilters from './ContentFilters.jsx'

package/src/organisms/MediaViewer.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import useEmblaCarousel from 'embla-carousel-react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import FullscreenOverlay from '../molecules/FullscreenOverlay.jsx'
+import FullscreenOverlay from '../utilities/FullscreenOverlay.jsx'
 
 /**
  * MediaViewer — THE fullscreen paged media viewer. One viewer for every

package/src/organisms/RecordManager.jsx

@@ -7,7 +7,7 @@ import ToggleCheckbox from '../atoms/ToggleCheckbox'
 import IconFrame from '../atoms/IconFrame'
 import ShellDrawer from '../molecules/ShellDrawer'
 import FieldRow, { StatusChip } from '../molecules/FieldRow'
-import { Tooltip } from '../atoms/Popover'
+import { Tooltip } from '../utilities/Popover'
 import Table from './Table'
 import MediaLibrary from './MediaLibrary'
 
@@ -164,7 +164,10 @@ export default function RecordManager({
               {/* the ICON CONTAINER is IconFrame (2026-08-01 ruling), box-model
                 * proper (user 2026-08-09, "padding should control the size"):
                 * the box stays pinned, the glyph FILLS the content box, and
-                * padding is the only inset knob — p-0.5 = the 2px. */}
+                * padding is the only inset knob — p-[3px] on user instruction
+                * (2026-08-09, "use 3px … use [3px]"); arbitrary utilities have
+                * missed consumer generation before — if this renders unpadded
+                * in a consumer, this class is why. */}
               <IconFrame
                 name="toggle-overlay"
                 variant="outline"
@@ -172,8 +175,7 @@ export default function RecordManager({
                 iconSize="100%"
                 aria-label="Toggle overlay"
                 onClick={() => openRecord(row)}
-                style={{ padding: 3 }}
-                className="opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
+                className="p-[3px] opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
               />
             </span>
           ),

package/src/atoms/InteractiveImage.jsx

@@ -1,152 +0,0 @@
-import { useId, useLayoutEffect, useRef, useState } from 'react'
-import { motion } from 'framer-motion'
-import useTilt from '../hooks/useTilt.js'
-import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
-import useCoarsePointer from '../hooks/useCoarsePointer.js'
-
-/* The default mask: one closed blob authored in unit-square coordinates, so
- * it scales to any element size. Swap it via the `shape` prop — any path in
- * a 0..1 box works. */
-const BLOB =
-  'M.96.217L.855.834a.09.09 0 01-.07.072L.166.994A.09.09 0 01.06.9L.04.166A.09.09 0 01.15.073L.89.13a.09.09 0 01.07.087z'
-
-/**
- * InteractiveImage — an image seen through an organic blob mask that
- * re-centres on the cursor, floating over a blurred, scaled copy of
- * itself. The whole stage tilts in 3D toward the pointer.
- *
- * Composed, not forked: the tilt is the shared `useTilt` hook (springs,
- * not tweens — the DS has one tilt and this is it), so the motion here
- * matches TiltCard and BentoCard rather than introducing a second feel.
- * The source's gsap tweens are gone with it; nothing else needed gsap.
- *
- * Motion is gated twice — on coarse-pointer devices and under
- * prefers-reduced-motion the mask sits centred, the tilt never mounts,
- * and no listeners are attached.
- *
- * The two SVG ids are per-instance (`useId`). The monorepo source hard-coded
- * them at module scope, so a second instance on the same page silently
- * clobbered the first one's clip path and pattern — the reason this was
- * lobbied as a fresh effect rather than a migration.
- *
- * Purely image-driven: no tokens, no colors, nothing to theme. Size comes
- * from the consumer via `className` — the stage fills its box.
- *
- * @param {string} src         image source, used by both the mask and the backdrop. Required
- * @param {string} alt         accessible name for the masked image
- * @param {string} className   classes on the root — supplies the size
- * @param {string} shape       SVG path `d` in unit-square coords; the mask outline
- * @param {number} magnitude   max tilt in degrees (±)
- * @param {number} perspective CSS transform perspective, in px
- * @param {number} blur        backdrop blur radius, in px
- * @param {number} backdropScale backdrop zoom, as a multiplier — hides the blur's soft edge
- */
-export default function InteractiveImage({
-  src,
-  alt = '',
-  className = '',
-  shape = BLOB,
-  magnitude = 10,
-  perspective = 500,
-  blur = 10,
-  backdropScale = 1.1,
-}) {
-  const uid = useId()
-  const clipId = `kol-ii-clip-${uid}`
-  const patternId = `kol-ii-pattern-${uid}`
-
-  const reducedMotion = usePrefersReducedMotion()
-  const coarse = useCoarsePointer()
-  const still = reducedMotion || coarse
-
-  const tilt = useTilt({ magnitude, perspective })
-  const boxRef = useRef(null)
-  const [size, setSize] = useState({ width: 0, height: 0 })
-  /* Mask centre in element coordinates; null until the pointer arrives, which
-   * is also the resting state — `centre` below reads it as dead centre. */
-  const [point, setPoint] = useState(null)
-
-  useLayoutEffect(() => {
-    const el = boxRef.current
-    if (!el) return undefined
-    const ro = new ResizeObserver(([entry]) => {
-      const { width, height } = entry.contentRect
-      setSize({ width, height })
-    })
-    ro.observe(el)
-    return () => ro.disconnect()
-  }, [])
-
-  const centre = point ?? { x: size.width / 2, y: size.height / 2 }
-
-  /* The unit blob is scaled up to the element box, then offset so its centre
-   * lands under the pointer rather than at the origin. */
-  const maskTransform = `translate(${centre.x - size.width / 2} ${centre.y - size.height / 2}) scale(${size.width} ${size.height})`
-
-  const handleMove = (e) => {
-    if (still) return
-    tilt.onMouseMove(e)
-    const rect = boxRef.current?.getBoundingClientRect()
-    if (!rect) return
-    setPoint({ x: e.clientX - rect.left, y: e.clientY - rect.top })
-  }
-
-  const handleLeave = () => {
-    if (still) return
-    tilt.onMouseLeave()
-    setPoint(null)
-  }
-
-  return (
-    <div
-      ref={boxRef}
-      className={`relative ${className}`}
-      onMouseMove={still ? undefined : handleMove}
-      onMouseLeave={still ? undefined : handleLeave}
-    >
-      <div
-        className="absolute inset-0 bg-cover bg-center"
-        style={{
-          backgroundImage: `url(${src})`,
-          filter: `blur(${blur}px)`,
-          transform: `scale(${backdropScale})`,
-        }}
-      />
-
-      <motion.svg
-        ref={tilt.ref}
-        role="img"
-        aria-label={alt || undefined}
-        aria-hidden={alt ? undefined : true}
-        className="relative w-full h-full"
-        viewBox={`0 0 ${size.width} ${size.height}`}
-        style={still ? undefined : tilt.style}
-      >
-        <defs>
-          <clipPath id={clipId}>
-            <path d={shape} transform={maskTransform} />
-          </clipPath>
-          <pattern
-            id={patternId}
-            patternUnits="userSpaceOnUse"
-            width={size.width}
-            height={size.height}
-          >
-            <image
-              href={src}
-              width="100%"
-              height="100%"
-              preserveAspectRatio="xMidYMid slice"
-            />
-          </pattern>
-        </defs>
-        <rect
-          width="100%"
-          height="100%"
-          fill={`url(#${patternId})`}
-          clipPath={`url(#${clipId})`}
-        />
-      </motion.svg>
-    </div>
-  )
-}