@boyernick/standard-ui-react 0.1.1-canary.9 → 0.2.0

package/src/video-player.tsx

@@ -6,11 +6,27 @@ import {
   useId,
   useRef,
   useState,
+  useSyncExternalStore,
   type ComponentProps,
 } from "react"
-import { Button } from "./button"
+import { IconExclamationTriangle } from "@central-icons-react/round-filled-radius-2-stroke-2/IconExclamationTriangle"
+import { IconFullScreen } from "@central-icons-react/round-filled-radius-2-stroke-2/IconFullScreen"
+import { IconPause } from "@central-icons-react/round-filled-radius-2-stroke-2/IconPause"
+import { IconPictureInPicture } from "@central-icons-react/round-filled-radius-2-stroke-2/IconPictureInPicture"
+import { IconPlay } from "@central-icons-react/round-filled-radius-2-stroke-2/IconPlay"
+import { IconVolumeFull } from "@central-icons-react/round-filled-radius-2-stroke-2/IconVolumeFull"
+import { IconVolumeOff } from "@central-icons-react/round-filled-radius-2-stroke-2/IconVolumeOff"
 import { cn } from "./lib/cn"
 
+/**
+ * Picture-in-Picture support is a static browser capability, not React state.
+ * Reading it through an external store keeps the server snapshot `false` so
+ * hydration matches, without a post-mount setState that re-renders the player.
+ */
+const subscribePipSupport = () => () => {}
+const getPipSupported = () => document.pictureInPictureEnabled
+const getPipSupportedOnServer = () => false
+
 const formatTime = (seconds: number) => {
   if (!Number.isFinite(seconds) || seconds < 0) return "0:00"
   const mins = Math.floor(seconds / 60)
@@ -18,6 +34,13 @@ const formatTime = (seconds: number) => {
   return `${mins}:${secs.toString().padStart(2, "0")}`
 }
 
+// The media surface is black in both themes, so everything sitting on it is
+// light regardless of the theme — semantic foreground tokens would invert and
+// disappear against the video. Buttons follow Linear’s glass chrome: circular,
+// muted until hover, no filled chip behind the icon at rest.
+const overlayControl =
+  "inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full text-white/65 outline-none transition-[background-color,color,transform] duration-[var(--duration-sm)] ease-enter hover:bg-white/12 hover:text-white active:scale-95 focus-visible:bg-white/12 focus-visible:text-white focus-visible:ring-2 focus-visible:ring-white/50 motion-reduce:transition-none motion-reduce:active:scale-100"
+
 export type VideoPlayerProps = ComponentProps<"div"> & {
   src: string
   poster?: string
@@ -34,17 +57,33 @@ export const VideoPlayer = ({
   "aria-label": ariaLabel,
   ...props
 }: VideoPlayerProps) => {
+  const playerRef = useRef<HTMLDivElement>(null)
   const videoRef = useRef<HTMLVideoElement>(null)
+  const seekPreviewRef = useRef<HTMLSpanElement>(null)
   const seekId = useId()
   const [playing, setPlaying] = useState(false)
   const [muted, setMuted] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [buffering, setBuffering] = useState(false)
+  const [ended, setEnded] = useState(false)
+  const [failed, setFailed] = useState(false)
+  const [fullscreen, setFullscreen] = useState(false)
+  const pipSupported = useSyncExternalStore(
+    subscribePipSupport,
+    getPipSupported,
+    getPipSupportedOnServer,
+  )
+  const [pipActive, setPipActive] = useState(false)
   const [current, setCurrent] = useState(0)
   const [duration, setDuration] = useState(0)
+  const [buffered, setBuffered] = useState(0)
 
   const handleTogglePlay = useCallback(() => {
     const video = videoRef.current
     if (!video) return
     if (video.paused) {
+      if (video.ended) video.currentTime = 0
+      setEnded(false)
       void video.play()
     } else {
       video.pause()
@@ -63,179 +102,409 @@ export const VideoPlayer = ({
     if (!video) return
     video.currentTime = value
     setCurrent(value)
+    setEnded(false)
+  }, [])
+
+  const showSeekPreview = useCallback(
+    (value: number) => {
+      const preview = seekPreviewRef.current
+      if (!preview || duration <= 0) return
+      const boundedValue = Math.min(Math.max(value, 0), duration)
+      preview.textContent = formatTime(boundedValue)
+      preview.style.left = `${(boundedValue / duration) * 100}%`
+      preview.dataset.visible = ""
+    },
+    [duration],
+  )
+
+  const hideSeekPreview = useCallback(() => {
+    seekPreviewRef.current?.removeAttribute("data-visible")
   }, [])
 
   const handleFullscreen = useCallback(() => {
-    const video = videoRef.current
-    if (!video) return
+    const player = playerRef.current
+    if (!player) return
     if (document.fullscreenElement) {
       void document.exitFullscreen()
       return
     }
-    void video.requestFullscreen?.()
+    void player.requestFullscreen?.()
+  }, [])
+
+  const handlePictureInPicture = useCallback(() => {
+    const video = videoRef.current
+    if (!video || !document.pictureInPictureEnabled) return
+    if (document.pictureInPictureElement) {
+      void document.exitPictureInPicture()
+      return
+    }
+    void video.requestPictureInPicture()
   }, [])
 
   useEffect(() => {
     const video = videoRef.current
     if (!video) return
 
-    const handlePlay = () => setPlaying(true)
+    const readBuffered = () => {
+      if (video.buffered.length === 0) return
+      setBuffered(video.buffered.end(video.buffered.length - 1))
+    }
+    const handleLoadStart = () => {
+      setLoading(true)
+      setBuffering(false)
+      setFailed(false)
+    }
+    const handleReady = () => {
+      setLoading(false)
+      setBuffering(false)
+      setFailed(false)
+    }
+    const handlePlay = () => {
+      setPlaying(true)
+      setEnded(false)
+      setLoading(false)
+      setBuffering(false)
+    }
     const handlePause = () => setPlaying(false)
-    const handleTime = () => setCurrent(video.currentTime)
+    const handleWaiting = () => {
+      if (!video.paused) setBuffering(true)
+    }
+    const handleTime = () => {
+      setCurrent(video.currentTime)
+      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+        setBuffering(false)
+      }
+    }
     const handleMeta = () => setDuration(video.duration || 0)
+    const handleVolume = () => setMuted(video.muted)
+    const handleEnded = () => {
+      setPlaying(false)
+      setBuffering(false)
+      setEnded(true)
+    }
+    const handleError = () => {
+      setPlaying(false)
+      setLoading(false)
+      setBuffering(false)
+      setFailed(true)
+    }
+
+    // A cached video can be ready before this effect runs, in which case
+    // `loadedmetadata` has already fired and the readout would sit at 0:00
+    // forever. Seed from the element, then keep up with the events.
+    handleMeta()
+    handleTime()
+    handleVolume()
+    readBuffered()
+    setPlaying(!video.paused)
+    setLoading(video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA)
+    setFailed(Boolean(video.error))
 
+    video.addEventListener("loadstart", handleLoadStart)
+    video.addEventListener("loadeddata", handleReady)
+    video.addEventListener("canplay", handleReady)
     video.addEventListener("play", handlePlay)
+    video.addEventListener("playing", handlePlay)
     video.addEventListener("pause", handlePause)
+    video.addEventListener("waiting", handleWaiting)
+    video.addEventListener("stalled", handleWaiting)
     video.addEventListener("timeupdate", handleTime)
     video.addEventListener("loadedmetadata", handleMeta)
+    video.addEventListener("durationchange", handleMeta)
+    video.addEventListener("volumechange", handleVolume)
+    video.addEventListener("progress", readBuffered)
+    video.addEventListener("ended", handleEnded)
+    video.addEventListener("error", handleError)
 
     return () => {
+      video.removeEventListener("loadstart", handleLoadStart)
+      video.removeEventListener("loadeddata", handleReady)
+      video.removeEventListener("canplay", handleReady)
       video.removeEventListener("play", handlePlay)
+      video.removeEventListener("playing", handlePlay)
       video.removeEventListener("pause", handlePause)
+      video.removeEventListener("waiting", handleWaiting)
+      video.removeEventListener("stalled", handleWaiting)
       video.removeEventListener("timeupdate", handleTime)
       video.removeEventListener("loadedmetadata", handleMeta)
+      video.removeEventListener("durationchange", handleMeta)
+      video.removeEventListener("volumechange", handleVolume)
+      video.removeEventListener("progress", readBuffered)
+      video.removeEventListener("ended", handleEnded)
+      video.removeEventListener("error", handleError)
+    }
+  }, [])
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setFullscreen(document.fullscreenElement === playerRef.current)
+    }
+
+    handleFullscreenChange()
+    document.addEventListener("fullscreenchange", handleFullscreenChange)
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange)
+    }
+  }, [])
+
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video) return
+
+    const handleEnterPip = () => setPipActive(true)
+    const handleLeavePip = () => setPipActive(false)
+    video.addEventListener("enterpictureinpicture", handleEnterPip)
+    video.addEventListener("leavepictureinpicture", handleLeavePip)
+    return () => {
+      video.removeEventListener("enterpictureinpicture", handleEnterPip)
+      video.removeEventListener("leavepictureinpicture", handleLeavePip)
     }
   }, [])
 
-  const progress = duration > 0 ? (current / duration) * 100 : 0
+  const played = duration > 0 ? (current / duration) * 100 : 0
+  const loaded = duration > 0 ? (buffered / duration) * 100 : 0
+  const remaining = Math.max(duration - current, 0)
 
   return (
     <div
+      ref={playerRef}
       data-slot="video-player"
+      data-playing={playing || undefined}
+      data-loading={loading || undefined}
+      data-buffering={buffering || undefined}
+      data-ended={ended || undefined}
+      data-error={failed || undefined}
+      data-fullscreen={fullscreen || undefined}
+      // `group` drives the chrome: it hides while playing and comes back on
+      // hover or when anything inside takes focus.
       className={cn(
-        "overflow-hidden rounded-xl border border-border-primary bg-surface",
+        "group relative isolate overflow-hidden rounded-xl bg-black shadow-lg ring-1 ring-border-primary data-[fullscreen]:h-screen data-[fullscreen]:w-screen data-[fullscreen]:rounded-none data-[fullscreen]:ring-0 fullscreen:h-screen fullscreen:w-screen fullscreen:rounded-none fullscreen:ring-0",
         className,
       )}
+      aria-busy={loading || buffering || undefined}
       {...props}
     >
-      <div className="relative bg-gray-1000">
-        <video
-          ref={videoRef}
-          src={src}
-          poster={poster}
-          playsInline
-          className="aspect-video w-full cursor-pointer object-cover"
-          aria-label={ariaLabel ?? title ?? "Video"}
-          onClick={handleTogglePlay}
-        />
-        {!playing ? (
-          <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/20">
-            <span className="flex size-12 items-center justify-center rounded-full bg-surface/90 text-fg-primary shadow-md">
-              <PlayIcon />
+      <video
+        ref={videoRef}
+        src={src}
+        poster={poster}
+        preload="auto"
+        playsInline
+        className="aspect-video w-full cursor-pointer object-cover group-data-[fullscreen]:h-full group-data-[fullscreen]:w-full group-data-[fullscreen]:aspect-auto group-data-[fullscreen]:object-cover"
+        aria-label={ariaLabel ?? title ?? "Video"}
+        onClick={handleTogglePlay}
+      />
+
+      {/* These centred states stay inert so the video remains the click target. */}
+      <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+        {failed ? (
+          <div
+            role="alert"
+            className="mx-6 flex max-w-sm flex-col items-center gap-2 rounded-xl border border-white/15 bg-black/65 px-5 py-4 text-center text-white shadow-lg backdrop-blur-md"
+          >
+            <IconExclamationTriangle
+              size={22}
+              mode="raw"
+              className="size-5.5"
+              aria-hidden
+            />
+            <span className="text-sm-strong">Video unavailable</span>
+            <span className="text-xs text-white/70">
+              Check the source and try again.
+            </span>
+          </div>
+        ) : loading || buffering ? (
+          <div
+            role="status"
+            className="flex size-14 items-center justify-center rounded-full border border-white/15 bg-black/45 text-white shadow-lg backdrop-blur-md"
+          >
+            <span className="size-6 animate-spin rounded-full border-2 border-white/30 border-t-white motion-reduce:animate-none" />
+            <span className="sr-only">
+              {buffering ? "Buffering video" : "Loading video"}
             </span>
           </div>
+        ) : !playing ? (
+          <div
+            className={cn(
+              "flex items-center justify-center rounded-full border border-white/20 bg-black/45 text-white shadow-lg backdrop-blur-md",
+              ended ? "h-8 gap-1 px-2.5" : "size-11",
+            )}
+          >
+            <IconPlay
+              size={ended ? 12 : 18}
+              mode="raw"
+              className={cn(ended ? "size-3" : "ml-0.5 size-4.5")}
+              aria-hidden
+            />
+            {ended ? <span className="text-xs-strong">Replay</span> : null}
+          </div>
         ) : null}
       </div>
 
-      <div className="flex flex-col gap-3 border-t border-border-primary bg-surface p-3">
-        {title ? (
-          <p className="text-sm-strong truncate text-fg-primary">{title}</p>
-        ) : null}
+      {!failed && !loading ? (
+        <div
+          className={cn(
+            "absolute inset-x-0 bottom-0 flex translate-y-0 flex-col bg-gradient-to-t from-black/80 via-black/40 to-transparent px-2.5 pt-14 pb-2.5 transition-[opacity,transform] duration-[var(--duration-md)] ease-enter group-data-[fullscreen]:px-5 group-data-[fullscreen]:pb-5 motion-reduce:transition-none",
+            "group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100",
+            // Nothing hovers on a touch screen, so the chrome would never come
+            // back once playback started. Keep it visible there instead.
+            "[@media(hover:none)]:translate-y-0 [@media(hover:none)]:opacity-100",
+            playing ? "translate-y-2 opacity-0" : "opacity-100",
+          )}
+        >
+          {title ? (
+            <p className="text-sm-strong mb-2 truncate px-1 text-white">{title}</p>
+          ) : null}
 
-        <div className="flex items-center gap-3">
-          <label className="sr-only" htmlFor={seekId}>
-            Seek
-          </label>
-          <input
-            id={seekId}
-            type="range"
-            min={0}
-            max={duration || 0}
-            step={0.1}
-            value={current}
-            onChange={(event) => handleSeek(Number(event.target.value))}
-            className="h-1.5 w-full cursor-pointer appearance-none rounded-full bg-background-quaternary accent-[var(--brand-primary)] [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-brand-primary"
-            style={{
-              background: `linear-gradient(to right, var(--brand-primary) ${progress}%, var(--background-quaternary) ${progress}%)`,
-            }}
-            aria-valuetext={`${formatTime(current)} of ${formatTime(duration)}`}
-          />
-        </div>
+          <div className="flex items-center gap-1.5">
+            <div className="flex shrink-0 items-center">
+              <button
+                type="button"
+                className={overlayControl}
+                aria-label={ended ? "Replay" : playing ? "Pause" : "Play"}
+                onClick={handleTogglePlay}
+              >
+                {playing ? (
+                  <IconPause size={14} mode="raw" className="size-3.5" aria-hidden />
+                ) : (
+                  <IconPlay size={14} mode="raw" className="size-3.5" aria-hidden />
+                )}
+              </button>
+              <button
+                type="button"
+                className={overlayControl}
+                aria-label={muted ? "Unmute" : "Mute"}
+                onClick={handleToggleMute}
+              >
+                {muted ? (
+                  <IconVolumeOff
+                    size={14}
+                    mode="raw"
+                    className="size-3.5"
+                    aria-hidden
+                  />
+                ) : (
+                  <IconVolumeFull
+                    size={14}
+                    mode="raw"
+                    className="size-3.5"
+                    aria-hidden
+                  />
+                )}
+              </button>
+            </div>
 
-        <div className="flex items-center gap-2">
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            iconOnly
-            rounded
-            aria-label={playing ? "Pause" : "Play"}
-            onClick={handleTogglePlay}
-          >
-            {playing ? <PauseIcon /> : <PlayIcon />}
-          </Button>
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            iconOnly
-            rounded
-            aria-label={muted ? "Unmute" : "Mute"}
-            onClick={handleToggleMute}
-          >
-            {muted ? <MuteIcon /> : <VolumeIcon />}
-          </Button>
-          <span className="text-xs font-mono text-fg-tertiary">
-            {formatTime(current)} / {formatTime(duration)}
-          </span>
-          <div className="ml-auto">
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              iconOnly
-              rounded
-              aria-label="Fullscreen"
-              onClick={handleFullscreen}
-            >
-              <FullscreenIcon />
-            </Button>
+            <span className="text-xs min-w-9 shrink-0 tabular-nums text-white/85">
+              {formatTime(current)}
+            </span>
+
+            <label className="sr-only" htmlFor={seekId}>
+              Seek
+            </label>
+            <div className="group/seek relative flex h-5 min-w-0 flex-1 items-center">
+              <span
+                ref={seekPreviewRef}
+                className="text-xs pointer-events-none absolute -top-8 z-10 -translate-x-1/2 rounded-md bg-black/80 px-1.5 py-1 text-white opacity-0 shadow-sm transition-opacity duration-[var(--duration-sm)] data-[visible]:opacity-100 motion-reduce:transition-none"
+              />
+              {/* Track, buffered fill and played fill sit under the input, which
+                  stays transparent so its thumb is the only thing it paints. */}
+              <span
+                aria-hidden
+                className="pointer-events-none absolute inset-x-0 h-0.75 rounded-full bg-white/25 transition-[height] duration-[var(--duration-sm)] group-hover/seek:h-1.5 group-focus-within/seek:h-1.5 motion-reduce:transition-none"
+              />
+              <span
+                aria-hidden
+                className="pointer-events-none absolute left-0 h-0.75 rounded-full bg-white/35 transition-[height] duration-[var(--duration-sm)] group-hover/seek:h-1.5 group-focus-within/seek:h-1.5 motion-reduce:transition-none"
+                style={{ width: `${loaded}%` }}
+              />
+              <span
+                aria-hidden
+                className="pointer-events-none absolute left-0 h-0.75 rounded-full bg-white transition-[height] duration-[var(--duration-sm)] group-hover/seek:h-1.5 group-focus-within/seek:h-1.5 motion-reduce:transition-none"
+                style={{ width: `${played}%` }}
+              />
+              <input
+                id={seekId}
+                type="range"
+                min={0}
+                max={duration || 0}
+                step={0.01}
+                value={current}
+                onChange={(event) => {
+                  const value = Number(event.target.value)
+                  handleSeek(value)
+                  showSeekPreview(value)
+                }}
+                onPointerMove={(event) => {
+                  if (duration <= 0) return
+                  const rect = event.currentTarget.getBoundingClientRect()
+                  const ratio = Math.min(
+                    Math.max((event.clientX - rect.left) / rect.width, 0),
+                    1,
+                  )
+                  showSeekPreview(ratio * duration)
+                }}
+                onPointerLeave={(event) => {
+                  if (document.activeElement !== event.currentTarget) {
+                    hideSeekPreview()
+                  }
+                }}
+                onFocus={() => showSeekPreview(current)}
+                onBlur={hideSeekPreview}
+                aria-valuetext={`${formatTime(current)} of ${formatTime(duration)}`}
+                className={cn(
+                  "relative m-0 h-5 w-full cursor-pointer appearance-none bg-transparent outline-none",
+                  // Both vendor thumbs, or Firefox falls back to a default one.
+                  "[&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:scale-75 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:opacity-0 [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:transition-[opacity,transform] [&:hover::-webkit-slider-thumb]:scale-100 [&:hover::-webkit-slider-thumb]:opacity-100",
+                  "[&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:scale-75 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:opacity-0 [&::-moz-range-thumb]:transition-[opacity,transform] [&:hover::-moz-range-thumb]:scale-100 [&:hover::-moz-range-thumb]:opacity-100",
+                  "focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-white/70",
+                  "focus-visible:[&::-webkit-slider-thumb]:scale-100 focus-visible:[&::-webkit-slider-thumb]:opacity-100 focus-visible:[&::-moz-range-thumb]:scale-100 focus-visible:[&::-moz-range-thumb]:opacity-100",
+                )}
+              />
+            </div>
+
+            <span className="text-xs min-w-10 shrink-0 text-right tabular-nums text-white/85">
+              -{formatTime(remaining)}
+            </span>
+
+            <div className="flex shrink-0 items-center">
+              {pipSupported ? (
+                <button
+                  type="button"
+                  className={overlayControl}
+                  aria-label={
+                    pipActive
+                      ? "Exit picture in picture"
+                      : "Picture in picture"
+                  }
+                  aria-pressed={pipActive}
+                  onClick={handlePictureInPicture}
+                >
+                  <IconPictureInPicture
+                    size={14}
+                    mode="raw"
+                    className="size-3.5"
+                    aria-hidden
+                  />
+                </button>
+              ) : null}
+              <button
+                type="button"
+                className={overlayControl}
+                aria-label={fullscreen ? "Exit fullscreen" : "Fullscreen"}
+                aria-pressed={fullscreen}
+                onClick={handleFullscreen}
+              >
+                <IconFullScreen
+                  size={14}
+                  mode="raw"
+                  className="size-3.5"
+                  aria-hidden
+                />
+              </button>
+            </div>
           </div>
         </div>
-      </div>
+      ) : null}
     </div>
   )
 }
-
-const PlayIcon = () => (
-  <svg viewBox="0 0 24 24" fill="none" className="size-4" aria-hidden>
-    <path d="M9 7.5v9l8-4.5-8-4.5Z" fill="currentColor" />
-  </svg>
-)
-
-const PauseIcon = () => (
-  <svg viewBox="0 0 24 24" fill="none" className="size-4" aria-hidden>
-    <path d="M8 7h3v10H8V7Zm5 0h3v10h-3V7Z" fill="currentColor" />
-  </svg>
-)
-
-const VolumeIcon = () => (
-  <svg viewBox="0 0 24 24" fill="none" className="size-4" aria-hidden>
-    <path
-      d="M4 10v4h3l4 3V7L7 10H4Zm11.5 2a2.5 2.5 0 0 0-1.5-2.3v4.6A2.5 2.5 0 0 0 15.5 12Zm0-5.5v1.6a4 4 0 0 1 0 7.8v1.6a5.5 5.5 0 0 0 0-11Z"
-      fill="currentColor"
-    />
-  </svg>
-)
-
-const MuteIcon = () => (
-  <svg viewBox="0 0 24 24" fill="none" className="size-4" aria-hidden>
-    <path
-      d="M4 10v4h3l4 3V7L7 10H4Zm11.2-.8 1.4-1.4 1.4 1.4 1.4-1.4 1.4 1.4-1.4 1.4 1.4 1.4-1.4 1.4-1.4-1.4-1.4 1.4-1.4-1.4 1.4-1.4-1.4-1.4Z"
-      fill="currentColor"
-    />
-  </svg>
-)
-
-const FullscreenIcon = () => (
-  <svg viewBox="0 0 24 24" fill="none" className="size-4" aria-hidden>
-    <path
-      d="M7 9V7h3v2H7Zm7 0V7h3v2h-3ZM7 17v-2h3v2H7Zm7 0v-2h3v2h-3Z"
-      fill="currentColor"
-    />
-    <path
-      d="M5 5h5v2H7v3H5V5Zm9 0h5v5h-2V7h-3V5ZM5 14h2v3h3v2H5v-5Zm12 3h-3v2h5v-5h-2v3Z"
-      fill="currentColor"
-    />
-  </svg>
-)