@xhub-short/ui 0.1.0-beta.9 → 1.0.0-beta.18

package/dist/chunk-KWHMZ6H5.js

@@ -1,562 +0,0 @@
-import { injectComponentCSS } from './chunk-RMLTPW5S.js';
-import { clsx } from 'clsx';
-import { createContext, useInsertionEffect, useMemo, useState, useContext } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-var VideoInfoContext = createContext(void 0);
-function useVideoInfoContext() {
-  const context = useContext(VideoInfoContext);
-  if (context === void 0) {
-    throw new Error("useVideoInfoContext must be used within a VideoInfoHeadless component");
-  }
-  return context;
-}
-function useOptionalVideoInfoContext() {
-  return useContext(VideoInfoContext);
-}
-function DefaultVerifiedIcon() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "10", height: "10", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" }) });
-}
-function VideoAuthorName({
-  name,
-  showAtPrefix = true,
-  showVerified = true,
-  isVerified,
-  verifiedIcon,
-  onClick,
-  className,
-  children
-}) {
-  const context = useOptionalVideoInfoContext();
-  const authorName = name ?? context?.state.authorName;
-  const verified = isVerified ?? context?.state.isVerified ?? false;
-  const handleClick = onClick ?? context?.actions.openProfile;
-  if (!authorName) {
-    return null;
-  }
-  const handleKeyDown = (e) => {
-    if ((e.key === "Enter" || e.key === " ") && handleClick) {
-      e.preventDefault();
-      e.stopPropagation();
-      handleClick();
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx("sv-video-info__author", className),
-      onClick: (e) => {
-        e.stopPropagation();
-        handleClick?.();
-      },
-      onKeyDown: handleKeyDown,
-      role: handleClick ? "button" : void 0,
-      tabIndex: handleClick ? 0 : void 0,
-      "aria-label": handleClick ? `View ${authorName}'s profile` : void 0,
-      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("span", { className: "sv-video-info__author-name", children: [
-          showAtPrefix && /* @__PURE__ */ jsx("span", { className: "sv-video-info__author-prefix", children: "@" }),
-          authorName
-        ] }),
-        showVerified && verified && /* @__PURE__ */ jsx("span", { className: "sv-video-info__verified-badge", "aria-label": "Verified", children: verifiedIcon ?? /* @__PURE__ */ jsx(DefaultVerifiedIcon, {}) })
-      ] })
-    }
-  );
-}
-function VideoCaption({
-  caption,
-  maxLines = 2,
-  expandable = false,
-  moreText = "more",
-  lessText = "less",
-  className,
-  children
-}) {
-  const context = useOptionalVideoInfoContext();
-  const [isExpanded, setIsExpanded] = useState(false);
-  const captionText = caption ?? context?.state.caption;
-  if (!captionText) {
-    return null;
-  }
-  const lineClampClass = isExpanded ? "sv-video-info__caption--expanded" : `sv-video-info__caption--lines-${maxLines}`;
-  const handleToggleExpand = (e) => {
-    e.stopPropagation();
-    setIsExpanded(!isExpanded);
-  };
-  return /* @__PURE__ */ jsx("div", { className: clsx("sv-video-info__caption", lineClampClass, className), children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    captionText,
-    expandable && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "sv-video-info__caption-more",
-        onClick: handleToggleExpand,
-        children: isExpanded ? lessText : moreText
-      }
-    )
-  ] }) });
-}
-function VideoHashtags({
-  hashtags,
-  clickable = true,
-  onHashtagClick,
-  display = "block",
-  className,
-  children
-}) {
-  const context = useOptionalVideoInfoContext();
-  const hashtagsArray = hashtags ?? context?.state.hashtags ?? [];
-  const handleClick = onHashtagClick ?? context?.actions.onHashtagClick;
-  if (hashtagsArray.length === 0) {
-    return null;
-  }
-  const handleHashtagClick = (tag) => (e) => {
-    e.stopPropagation();
-    if (clickable && handleClick) {
-      handleClick(tag);
-    }
-  };
-  const handleKeyDown = (tag) => (e) => {
-    if ((e.key === "Enter" || e.key === " ") && clickable && handleClick) {
-      e.preventDefault();
-      handleClick(tag);
-    }
-  };
-  const formatTag = (tag) => tag.startsWith("#") ? tag : `#${tag}`;
-  if (children) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(
-        "sv-video-info__hashtags",
-        display === "inline" && "sv-video-info__hashtags--inline",
-        className
-      ),
-      children: hashtagsArray.map((tag) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: clsx(
-            "sv-video-info__hashtag",
-            !clickable && "sv-video-info__hashtag--not-clickable"
-          ),
-          onClick: handleHashtagClick(tag),
-          onKeyDown: handleKeyDown(tag),
-          tabIndex: clickable ? 0 : -1,
-          "aria-label": clickable ? `View hashtag ${tag}` : void 0,
-          children: formatTag(tag)
-        },
-        tag
-      ))
-    }
-  );
-}
-
-// src/components/VideoInfo/VideoInfo.css.ts
-var VIDEO_INFO_CSS = `
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * VideoInfo Container
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-video-info {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sv-video-info-gap, 6px);
-  color: var(--sv-video-info-color, #fff);
-  font-family: var(--sv-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
-  text-shadow: var(--sv-video-info-text-shadow, 0 1px 2px rgba(0, 0, 0, 0.5));
-  max-width: 100%;
-  overflow: hidden;
-}
-
-/* Overlay variant (on top of video) */
-.sv-video-info--overlay {
-  pointer-events: none;
-}
-
-.sv-video-info--overlay > * {
-  pointer-events: auto;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * Author Name
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-video-info__author {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-video-info-author-gap, 6px);
-  cursor: pointer;
-  transition: opacity 0.15s ease;
-}
-
-.sv-video-info__author:hover {
-  opacity: 0.85;
-}
-
-.sv-video-info__author:active {
-  opacity: 0.7;
-}
-
-.sv-video-info__author-name {
-  font-size: var(--sv-video-info-author-font-size, 16px);
-  font-weight: var(--sv-video-info-author-font-weight, 700);
-  line-height: 1.3;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 200px;
-}
-
-.sv-video-info__author-prefix {
-  opacity: 0.95;
-}
-
-.sv-video-info__verified-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--sv-video-info-verified-size, 14px);
-  height: var(--sv-video-info-verified-size, 14px);
-  background: var(--sv-video-info-verified-bg, #20d5ec);
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.sv-video-info__verified-badge svg,
-.sv-video-info__verified-badge span {
-  font-size: 10px;
-  color: #fff;
-  font-weight: 700;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * Caption
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-video-info__caption {
-  font-size: var(--sv-video-info-caption-font-size, 14px);
-  line-height: var(--sv-video-info-caption-line-height, 1.4);
-  color: var(--sv-video-info-caption-color, #fff);
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  word-break: break-word;
-}
-
-.sv-video-info__caption--lines-1 {
-  -webkit-line-clamp: 1;
-}
-
-.sv-video-info__caption--lines-2 {
-  -webkit-line-clamp: 2;
-}
-
-.sv-video-info__caption--lines-3 {
-  -webkit-line-clamp: 3;
-}
-
-.sv-video-info__caption--expanded {
-  -webkit-line-clamp: unset;
-}
-
-/* "more" button for expandable caption */
-.sv-video-info__caption-more {
-  background: none;
-  border: none;
-  color: var(--sv-video-info-caption-more-color, rgba(255, 255, 255, 0.7));
-  font-size: var(--sv-video-info-caption-font-size, 14px);
-  padding: 0;
-  margin-left: 4px;
-  cursor: pointer;
-}
-
-.sv-video-info__caption-more:hover {
-  color: var(--sv-video-info-caption-color, #fff);
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * Hashtags
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-video-info__hashtags {
-  display: inline-flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--sv-video-info-hashtag-gap, 6px);
-  font-size: var(--sv-video-info-hashtag-font-size, 14px);
-}
-
-/* Inline variant - more compact */
-.sv-video-info__hashtags--inline {
-  gap: var(--sv-video-info-hashtag-gap-inline, 4px);
-}
-
-.sv-video-info__hashtag {
-  display: inline-flex;
-  color: var(--sv-video-info-hashtag-color, #fff);
-  font-weight: var(--sv-video-info-hashtag-font-weight, 500);
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  transition: opacity 0.15s ease;
-  white-space: nowrap;
-}
-
-.sv-video-info__hashtag:hover {
-  opacity: 0.8;
-  text-decoration: underline;
-}
-
-.sv-video-info__hashtag--not-clickable {
-  cursor: default;
-}
-
-.sv-video-info__hashtag--not-clickable:hover {
-  opacity: 1;
-  text-decoration: none;
-}
-
-/* Inline hashtags (inside caption) */
-.sv-video-info__caption .sv-video-info__hashtag {
-  display: inline;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * Location
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-video-info__location {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-video-info-location-gap, 4px);
-  font-size: var(--sv-video-info-location-font-size, 13px);
-  color: var(--sv-video-info-location-color, rgba(255, 255, 255, 0.9));
-  cursor: pointer;
-  transition: opacity 0.15s ease;
-}
-
-.sv-video-info__location:hover {
-  opacity: 0.8;
-}
-
-.sv-video-info__location-icon {
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
-.sv-video-info__location-text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * Music
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-video-info__music {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-video-info-music-gap, 8px);
-  font-size: var(--sv-video-info-music-font-size, 13px);
-  color: var(--sv-video-info-music-color, #fff);
-  cursor: pointer;
-  transition: opacity 0.15s ease;
-  overflow: hidden;
-}
-
-.sv-video-info__music:hover {
-  opacity: 0.8;
-}
-
-.sv-video-info__music-icon {
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
-.sv-video-info__music-text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  /* Marquee animation for long text */
-}
-
-/* Marquee animation for music text */
-.sv-video-info__music-text--marquee {
-  animation: sv-video-info-marquee 8s linear infinite;
-}
-
-@keyframes sv-video-info-marquee {
-  0% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(-50%);
-  }
-}
-`;
-function DefaultLocationIcon() {
-  return /* @__PURE__ */ jsx("span", { className: "sv-video-info__location-icon", children: "\u{1F4CD}" });
-}
-function VideoLocation({
-  location,
-  icon,
-  onClick,
-  className,
-  children
-}) {
-  const context = useOptionalVideoInfoContext();
-  const locationText = location ?? context?.state.location;
-  const handleClick = onClick ?? context?.actions.onLocationClick;
-  if (!locationText) {
-    return null;
-  }
-  const handleKeyDown = (e) => {
-    if ((e.key === "Enter" || e.key === " ") && handleClick) {
-      e.preventDefault();
-      e.stopPropagation();
-      handleClick();
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx("sv-video-info__location", className),
-      onClick: (e) => {
-        e.stopPropagation();
-        handleClick?.();
-      },
-      onKeyDown: handleKeyDown,
-      role: handleClick ? "button" : void 0,
-      tabIndex: handleClick ? 0 : void 0,
-      "aria-label": handleClick ? `View location: ${locationText}` : void 0,
-      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon ?? /* @__PURE__ */ jsx(DefaultLocationIcon, {}),
-        /* @__PURE__ */ jsx("span", { className: "sv-video-info__location-text", children: locationText })
-      ] })
-    }
-  );
-}
-function DefaultMusicIcon() {
-  return /* @__PURE__ */ jsx("span", { className: "sv-video-info__music-icon", children: "\u{1F3B5}" });
-}
-function VideoMusic({
-  title,
-  artist,
-  icon,
-  marquee = false,
-  onClick,
-  className,
-  children
-}) {
-  const context = useOptionalVideoInfoContext();
-  const musicTitle = title ?? context?.state.music?.title;
-  const musicArtist = artist ?? context?.state.music?.artist;
-  const handleClick = onClick ?? context?.actions.onMusicClick;
-  if (!musicTitle && !musicArtist) {
-    return null;
-  }
-  const displayText = musicArtist ? `${musicTitle} - ${musicArtist}` : musicTitle;
-  const handleKeyDown = (e) => {
-    if ((e.key === "Enter" || e.key === " ") && handleClick) {
-      e.preventDefault();
-      e.stopPropagation();
-      handleClick();
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx("sv-video-info__music", className),
-      onClick: (e) => {
-        e.stopPropagation();
-        handleClick?.();
-      },
-      onKeyDown: handleKeyDown,
-      role: handleClick ? "button" : void 0,
-      tabIndex: handleClick ? 0 : void 0,
-      "aria-label": handleClick ? `View sound: ${displayText}` : void 0,
-      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon ?? /* @__PURE__ */ jsx(DefaultMusicIcon, {}),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(
-              "sv-video-info__music-text",
-              marquee && "sv-video-info__music-text--marquee"
-            ),
-            children: displayText
-          }
-        )
-      ] })
-    }
-  );
-}
-function VideoInfoHeadlessRoot({
-  videoInfoState,
-  videoInfoActions,
-  overlay = false,
-  className,
-  children,
-  testId
-}) {
-  useInsertionEffect(() => {
-    return injectComponentCSS("video-info", VIDEO_INFO_CSS);
-  }, []);
-  const contextValue = useMemo(
-    () => ({
-      state: videoInfoState,
-      actions: videoInfoActions
-    }),
-    [videoInfoState, videoInfoActions]
-  );
-  const stopPropagation = (e) => {
-    e.stopPropagation();
-  };
-  return /* @__PURE__ */ jsx(VideoInfoContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx("sv-video-info", overlay && "sv-video-info--overlay", className),
-      onClick: stopPropagation,
-      onKeyDown: stopPropagation,
-      onPointerDown: stopPropagation,
-      onPointerUp: stopPropagation,
-      onTouchStart: stopPropagation,
-      onTouchEnd: stopPropagation,
-      "data-testid": testId,
-      children: children ?? // Default layout
-      /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(VideoAuthorName, { showAtPrefix: true, showVerified: true }),
-        /* @__PURE__ */ jsx(VideoCaption, { maxLines: 2 }),
-        /* @__PURE__ */ jsx(VideoHashtags, { clickable: true })
-      ] })
-    }
-  ) });
-}
-function VideoInfoContent({
-  children,
-  className
-}) {
-  return /* @__PURE__ */ jsx("div", { className: clsx("sv-video-info__content", className), children });
-}
-var VideoInfoHeadless = Object.assign(VideoInfoHeadlessRoot, {
-  /** Author name with @ prefix and verified badge */
-  AuthorName: VideoAuthorName,
-  /** Video caption/title with line clamping */
-  Caption: VideoCaption,
-  /** Hashtags (inline or block) */
-  Hashtags: VideoHashtags,
-  /** Location info */
-  Location: VideoLocation,
-  /** Music/sound info */
-  Music: VideoMusic,
-  /** Content wrapper */
-  Content: VideoInfoContent
-});
-
-export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext };