@xhub-short/ui 0.1.0-beta.0

package/README.md

@@ -0,0 +1,194 @@
+# @xhub-short/ui
+
+> Headless UI Components for Short Video SDK
+
+## Overview
+
+This package provides **headless React components** for the XHub-short SDK. Components are designed to be:
+
+- 🎯 **Headless**: All data via props, no SDK coupling
+- 📦 **Tree-shakeable**: Import only what you need
+- 🎨 **Themeable**: CSS variables for customization
+- 🚀 **Performant**: <5KB per component (gzipped)
+- 🌙 **Dark mode ready**: Automatic theme support
+
+## Installation
+
+```bash
+pnpm add @xhub-short/ui
+```
+
+## Usage
+
+### Option A: Import from SDK (Recommended)
+
+For most users, import pre-wired components from `@xhub-short/sdk`:
+
+```tsx
+import { VideoFeed, VideoSlot, ActionBar } from '@xhub-short/sdk';
+
+function App() {
+  return (
+    <ShortVideoProvider config={...}>
+      <VideoFeed>
+        {(video) => (
+          <VideoSlot video={video}>
+            <ActionBar />
+          </VideoSlot>
+        )}
+      </VideoFeed>
+    </ShortVideoProvider>
+  );
+}
+```
+
+### Option B: Granular Imports (Smaller Bundle)
+
+For optimal tree-shaking, use granular imports:
+
+```tsx
+// Only bundles VideoFeed (~3-5KB) instead of all components
+import { VideoFeed } from '@xhub-short/ui/VideoFeed';
+import { VideoSlot } from '@xhub-short/ui/VideoSlot';
+```
+
+### Option C: Headless Components (Custom State Management)
+
+For full control with your own state management:
+
+```tsx
+import { VideoFeedHeadless } from '@xhub-short/ui';
+
+function CustomFeed() {
+  // Your own state management
+  const [videos, setVideos] = useState([]);
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  return (
+    <VideoFeedHeadless
+      feedState={{ videos, isLoading: false }}
+      swipeState={{ activeIndex, isSwiping: false }}
+      onIndexChange={setActiveIndex}
+    />
+  );
+}
+```
+
+## Bundle Optimization
+
+This package is optimized for minimal bundle size:
+
+| Import Pattern | Bundle Size |
+|----------------|-------------|
+| `from '@xhub-short/ui'` (all) | ~30-50KB |
+| `from '@xhub-short/ui/VideoFeed'` | ~3-5KB |
+| `from '@xhub-short/ui/ActionBar'` | ~2-3KB |
+
+### Verify Bundle Size
+
+```bash
+pnpm build
+./scripts/check-bundle-size.sh
+```
+
+## Creating New Components
+
+Use the template in `src/components/_template/`:
+
+```bash
+# Copy template
+cp -r src/components/_template src/components/MyComponent
+
+# Rename files
+mv src/components/MyComponent/TemplateComponent.tsx src/components/MyComponent/MyComponent.tsx
+mv src/components/MyComponent/TemplateComponent.css.ts src/components/MyComponent/MyComponent.css.ts
+mv src/components/MyComponent/TemplateComponent.test.tsx src/components/MyComponent/MyComponent.test.tsx
+
+# Update index.ts exports
+# Update component names and CSS
+```
+
+### Component Structure
+
+```
+src/components/MyComponent/
+├── index.ts              # Entry point (exports)
+├── MyComponent.tsx       # Main component
+├── MyComponent.css.ts    # Per-component CSS string
+└── MyComponent.test.tsx  # Tests
+```
+
+### Key Patterns
+
+1. **CSS Injection**: Use `useInsertionEffect` with `injectComponentCSS`
+2. **Props Only**: No SDK imports, all data via props
+3. **CSS Variables**: Use `var(--sv-*)` for theming
+4. **BEM Naming**: `sv-component`, `sv-component__element`, `sv-component--modifier`
+
+## CSS Theming
+
+Components use CSS variables for theming:
+
+```css
+/* Override in your app */
+:root {
+  --sv-bg-primary: #000;
+  --sv-text-primary: #fff;
+  --sv-color-accent: #ff0050;
+  --sv-font-family: 'Urbanist', sans-serif;
+}
+```
+
+See `src/styles/README.md` for full theming documentation.
+
+## Architecture
+
+```
+@xhub-short/ui (this package)
+├── Headless Components (VideoFeedHeadless, etc.)
+├── Per-component CSS injection
+└── NO SDK dependency
+
+    ↓ imported by
+
+@xhub-short/sdk
+├── Wired Components (VideoFeed, etc.)
+├── HOC Factory (injects SDK hooks)
+└── Re-exports for host apps
+```
+
+## Development
+
+```bash
+# Build
+pnpm build
+
+# Watch mode
+pnpm dev
+
+# Type check
+pnpm typecheck
+
+# Test
+pnpm test
+
+# Check bundle size
+pnpm build:check
+```
+
+## Available Components
+
+| Component | Status | Size (gzip) |
+|-----------|--------|-------------|
+| VideoFeed | 🚧 Phase 4 | ~4KB |
+| VideoSlot | 🚧 Phase 4 | ~3KB |
+| VideoPlayer | 🚧 Phase 4 | ~3KB |
+| ActionBar | 🚧 Phase 4 | ~2KB |
+| ProgressBar | 🚧 Phase 4 | ~1KB |
+| AuthorInfo | 🚧 Phase 4 | ~2KB |
+| Skeleton | 🚧 Phase 4 | ~1KB |
+| ErrorBoundary | 🚧 Phase 4 | ~1KB |
+
+## License
+
+MIT

package/dist/chunk-4MN72OZH.js

@@ -0,0 +1,148 @@
+import { cn } from './chunk-WKX2WBVO.js';
+import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
+import { useInsertionEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Skeleton/Skeleton.css.ts
+var SKELETON_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
+ * Skeleton Styles
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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-skeleton {
+  display: block;
+  background: var(--sv-skeleton-bg, rgba(255, 255, 255, 0.1));
+  border-radius: var(--sv-border-radius-sm, 4px);
+}
+
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+ * Pulse Animation
+ * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.sv-skeleton--pulse {
+  animation: sv-skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes sv-skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+ * Wave Animation
+ * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.sv-skeleton--wave {
+  position: relative;
+  overflow: hidden;
+}
+
+.sv-skeleton--wave::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.1),
+    transparent
+  );
+  animation: sv-skeleton-wave 1.5s ease-in-out infinite;
+}
+
+@keyframes sv-skeleton-wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+ * Preset: Video
+ * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.sv-skeleton-video {
+  width: 100%;
+  height: 100%;
+  background: var(--sv-bg-primary, #000);
+}
+
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+ * Dark Mode Support
+ * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+:root[data-theme="light"] .sv-skeleton,
+.light .sv-skeleton {
+  background: var(--sv-skeleton-bg-light, rgba(0, 0, 0, 0.1));
+}
+
+:root[data-theme="light"] .sv-skeleton--wave::after,
+.light .sv-skeleton--wave::after {
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(0, 0, 0, 0.05),
+    transparent
+  );
+}
+`;
+function Skeleton({
+  width,
+  height,
+  borderRadius,
+  animation = "pulse",
+  circle = false,
+  className
+}) {
+  useInsertionEffect(() => {
+    return injectComponentCSS("skeleton", SKELETON_CSS);
+  }, []);
+  const style = {};
+  if (width !== void 0) {
+    style.width = typeof width === "number" ? `${width}px` : width;
+  }
+  if (height !== void 0) {
+    style.height = typeof height === "number" ? `${height}px` : height;
+  }
+  if (borderRadius !== void 0) {
+    style.borderRadius = typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+  } else if (circle) {
+    style.borderRadius = "50%";
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("sv-skeleton", animation !== "none" && `sv-skeleton--${animation}`, className),
+      style,
+      "aria-hidden": "true"
+    }
+  );
+}
+function SkeletonVideo({
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("sv-skeleton-video", className), children: /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "100%", animation: "wave" }) });
+}
+function SkeletonAvatar({
+  size = 40,
+  className
+}) {
+  return /* @__PURE__ */ jsx(Skeleton, { width: size, height: size, circle: true, className });
+}
+function SkeletonText({
+  width = "100%",
+  className
+}) {
+  return /* @__PURE__ */ jsx(Skeleton, { width, height: 14, borderRadius: 4, className });
+}
+
+export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo };

package/dist/chunk-MMTAPG2C.js

@@ -0,0 +1,201 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/icons/DefaultIcons.tsx
+function getIconProps({ size = 28, className, ...props }) {
+  return {
+    width: size,
+    height: size,
+    viewBox: "0 0 28 28",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    ...props
+  };
+}
+function HeartIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...getIconProps(props), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M1.74995 11.0538C1.74995 6.75595 4.69829 2.91699 9.20884 2.91699C11.4348 2.91699 12.9987 3.95929 14 4.96978C15.0012 3.95929 16.5651 2.91699 18.7911 2.91699C23.3016 2.91699 26.25 6.75595 26.25 11.0538C26.25 15.3962 23.6265 18.9036 20.8781 21.3587C18.1289 23.8145 15.1443 25.3171 14.1844 25.6371L14 25.6985L13.8155 25.6371C12.8556 25.3171 9.871 23.8145 7.12176 21.3587C4.37337 18.9036 1.74995 15.3962 1.74995 11.0538ZM17.745 6.41699C17.2617 6.41699 16.87 6.80874 16.87 7.29199C16.87 7.77524 17.2617 8.16699 17.745 8.16699C19.6222 8.16699 20.9953 9.75855 20.9953 11.8241C20.9953 12.3073 21.3871 12.6991 21.8703 12.6991C22.3536 12.6991 22.7453 12.3073 22.7453 11.8241C22.7453 9.02543 20.8066 6.41699 17.745 6.41699Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function HeartFilledIcon(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ...getIconProps({ ...props, fill: "currentColor", stroke: "none" }),
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M1.75 11.0538C1.75 6.75595 4.69834 2.91699 9.20889 2.91699C11.4348 2.91699 12.9988 3.95929 14 4.96978C15.0012 3.95929 16.5652 2.91699 18.7911 2.91699C23.3017 2.91699 26.25 6.75595 26.25 11.0538C26.25 15.3962 23.6266 18.9036 20.8782 21.3587C18.129 23.8145 15.1444 25.3171 14.1845 25.6371L14 25.6985L13.8155 25.6371C12.8556 25.3171 9.87105 23.8145 7.12181 21.3587C4.37341 18.9036 1.75 15.3962 1.75 11.0538ZM17.745 6.41699C17.2618 6.41699 16.87 6.80874 16.87 7.29199C16.87 7.77524 17.2618 8.16699 17.745 8.16699C19.6223 8.16699 20.9954 9.75855 20.9954 11.8241C20.9954 12.3073 21.3871 12.6991 21.8704 12.6991C22.3536 12.6991 22.7454 12.3073 22.7454 11.8241C22.7454 9.02543 20.8067 6.41699 17.745 6.41699Z",
+          fill: "#FF434E"
+        }
+      )
+    }
+  );
+}
+function CommentIcon(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ...getIconProps({ ...props }),
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      fill: "none",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M14 1.45801C7.07347 1.45801 1.45837 7.0731 1.45837 13.9997C1.45837 16.3815 2.1232 18.6107 3.27778 20.5088L2.36541 23.0178C1.77294 24.6471 3.35258 26.2268 4.98188 25.6343L7.49089 24.7219C9.389 25.8765 11.6182 26.5413 14 26.5413C20.9266 26.5413 26.5417 20.9262 26.5417 13.9997C26.5417 7.0731 20.9266 1.45801 14 1.45801Z",
+          fill: "white"
+        }
+      )
+    }
+  );
+}
+function ShareIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...getIconProps(props),
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 28 28",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M20.6583 8.99195C21.1139 8.53634 21.1139 7.79765 20.6583 7.34203L14.8249 1.5087C14.6061 1.28991 14.3094 1.16699 14 1.16699C13.6905 1.16699 13.3938 1.28991 13.175 1.5087L7.34167 7.34204C6.88606 7.79765 6.88606 8.53634 7.34167 8.99195C7.79728 9.44756 8.53597 9.44756 8.99158 8.99195L12.8333 5.15024L12.8333 17.5003C12.8333 18.1447 13.3556 18.667 14 18.667C14.6443 18.667 15.1666 18.1447 15.1666 17.5003L15.1666 5.15024L19.0083 8.99195C19.4639 9.44756 20.2026 9.44756 20.6583 8.99195Z",
+            fill: "white"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M24.4562 22.2708C24.4991 21.7457 24.5 21.0663 24.5 20.067V16.3337C24.5 15.6893 25.0223 15.167 25.6666 15.167C26.311 15.167 26.8333 15.6893 26.8333 16.3337L26.8333 20.1152C26.8333 21.0543 26.8333 21.8294 26.7817 22.4608C26.7282 23.1166 26.6132 23.7194 26.3247 24.2856C25.8772 25.1637 25.1633 25.8776 24.2852 26.325C23.719 26.6135 23.1162 26.7285 22.4604 26.7821C21.829 26.8337 21.054 26.8337 20.1149 26.8337H7.88508C6.94599 26.8337 6.17087 26.8337 5.5395 26.7821C4.88372 26.7285 4.28089 26.6135 3.71467 26.325C2.83658 25.8776 2.12267 25.1637 1.67526 24.2856C1.38676 23.7194 1.27176 23.1166 1.21819 22.4608C1.1666 21.8294 1.16661 21.0543 1.16663 20.1152V16.3337C1.16663 15.6893 1.68896 15.167 2.33329 15.167C2.97762 15.167 3.49996 15.6893 3.49996 16.3337L3.49996 20.067C3.49996 21.0663 3.50087 21.7457 3.54377 22.2708C3.58556 22.7823 3.66131 23.0438 3.75428 23.2263C3.97798 23.6653 4.33494 24.0223 4.77398 24.246C4.95645 24.339 5.21802 24.4147 5.7295 24.4565C6.25461 24.4994 6.93395 24.5003 7.93329 24.5003H20.0666C21.066 24.5003 21.7453 24.4994 22.2704 24.4565C22.7819 24.4147 23.0435 24.339 23.2259 24.246C23.665 24.0223 24.0219 23.6653 24.2456 23.2263C24.3386 23.0438 24.4144 22.7823 24.4562 22.2708Z",
+            fill: "white"
+          }
+        )
+      ]
+    }
+  );
+}
+function BookmarkIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...getIconProps(props), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M16.6904 1.45801H11.2789C10.2487 1.458 9.4224 1.45799 8.75434 1.51253C8.06795 1.56857 7.47186 1.68652 6.92253 1.96632C6.90122 1.97718 6.88036 1.98891 6.86 2.00147C5.64436 2.75199 4.94533 3.52276 4.62739 4.64643C4.48015 5.1668 4.42512 5.72644 4.40084 6.3243C4.38332 6.75558 4.3811 7.24294 4.37866 7.77623C4.37775 7.97537 4.37678 8.18091 4.375 8.39232V24.8275C4.375 25.7739 5.14242 26.5413 6.08883 26.5413C6.51994 26.5413 6.93517 26.3792 7.25226 26.0859L13.3276 20.4783C13.3386 20.4682 13.3493 20.4578 13.3597 20.4471C13.5821 20.2197 13.743 20.0895 13.8601 20.0183C13.9156 19.9846 13.9524 19.9697 13.9731 19.9631C13.9833 19.9599 13.9898 19.9585 13.9933 19.958L13.9975 19.9575L13.9992 19.9574C13.9992 19.9574 14.0065 19.9571 14.0257 19.9632C14.0466 19.9698 14.0837 19.9849 14.1394 20.0187C14.2569 20.0901 14.4182 20.2206 14.641 20.4479C14.6512 20.4583 14.6616 20.4684 14.6724 20.4783L20.7477 26.0859C21.0648 26.3792 21.4801 26.5413 21.9112 26.5413C22.8576 26.5413 23.625 25.7739 23.625 24.8275V8.3619C23.625 7.33168 23.625 6.5054 23.5705 5.83735C23.5144 5.15096 23.3965 4.55487 23.1167 4.00554C23.1058 3.98416 23.094 3.96324 23.0814 3.94284C22.3309 2.72781 21.5599 2.0287 20.4364 1.71046C19.9159 1.56305 19.3562 1.50785 18.7583 1.48352C18.3245 1.46588 17.8344 1.46376 17.2978 1.46144C17.1014 1.46059 16.8988 1.45968 16.6904 1.45801Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function BookmarkFilledIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...getIconProps({ ...props, fill: "currentColor" }), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M16.6904 1.45801H11.2789C10.2487 1.458 9.4224 1.45799 8.75434 1.51253C8.06795 1.56857 7.47186 1.68652 6.92253 1.96632C6.90122 1.97718 6.88036 1.98891 6.86 2.00147C5.64436 2.75199 4.94533 3.52276 4.62739 4.64643C4.48015 5.1668 4.42512 5.72644 4.40084 6.3243C4.38332 6.75558 4.3811 7.24294 4.37866 7.77623C4.37775 7.97537 4.37678 8.18091 4.375 8.39232V24.8275C4.375 25.7739 5.14242 26.5413 6.08883 26.5413C6.51994 26.5413 6.93517 26.3792 7.25226 26.0859L13.3276 20.4783C13.3386 20.4682 13.3493 20.4578 13.3597 20.4471C13.5821 20.2197 13.743 20.0895 13.8601 20.0183C13.9156 19.9846 13.9524 19.9697 13.9731 19.9631C13.9833 19.9599 13.9898 19.9585 13.9933 19.958L13.9975 19.9575L13.9992 19.9574C13.9992 19.9574 14.0065 19.9571 14.0257 19.9632C14.0466 19.9698 14.0837 19.9849 14.1394 20.0187C14.2569 20.0901 14.4182 20.2206 14.641 20.4479C14.6512 20.4583 14.6616 20.4684 14.6724 20.4783L20.7477 26.0859C21.0648 26.3792 21.4801 26.5413 21.9112 26.5413C22.8576 26.5413 23.625 25.7739 23.625 24.8275V8.3619C23.625 7.33168 23.625 6.5054 23.5705 5.83735C23.5144 5.15096 23.3965 4.55487 23.1167 4.00554C23.1058 3.98416 23.094 3.96324 23.0814 3.94284C22.3309 2.72781 21.5599 2.0287 20.4364 1.71046C19.9159 1.56305 19.3562 1.50785 18.7583 1.48352C18.3245 1.46588 17.8344 1.46376 17.2978 1.46144C17.1014 1.46059 16.8988 1.45968 16.6904 1.45801Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function PlayIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...getIconProps(props), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M17.0089 3.45151C12.3423 0.748041 6.5 4.11533 6.5 9.50852V38.4835C6.5 43.8767 12.3423 47.244 17.0089 44.5405L42.0169 30.053C46.6717 27.3565 46.6717 20.6356 42.0169 17.939L17.0089 3.45151Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function PauseIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...getIconProps(props), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M20.751 3.6V20.4C20.751 21.036 20.751 21.42 20.561 21.794C20.392 22.126 20.127 22.391 19.796 22.559C19.422 22.749 19.038 22.749 18.401 22.749H16.601C15.965 22.749 15.58 22.749 15.206 22.559C14.875 22.391 14.61 22.126 14.441 21.794C14.25 21.419 14.25 21.035 14.25 20.399V3.6C14.25 2.964 14.25 2.58 14.44 2.206C14.609 1.874 14.874 1.609 15.205 1.441C15.579 1.25 15.963 1.25 16.6 1.25H18.4C19.037 1.25 19.421 1.25 19.796 1.441C20.126 1.609 20.391 1.874 20.56 2.205C20.751 2.58 20.751 2.964 20.751 3.6ZM8.796 1.441C8.421 1.25 8.037 1.25 7.4 1.25H5.6C4.963 1.25 4.579 1.25 4.205 1.441C3.873 1.61 3.608 1.875 3.44 2.206C3.25 2.58 3.25 2.964 3.25 3.6V20.4C3.25 21.036 3.25 21.42 3.44 21.793C3.609 22.125 3.874 22.39 4.206 22.559C4.58 22.749 4.964 22.749 5.601 22.749H7.401C8.037 22.749 8.422 22.749 8.796 22.559C9.127 22.391 9.392 22.126 9.561 21.794C9.751 21.42 9.751 21.036 9.751 20.4V3.6C9.751 2.964 9.751 2.58 9.56 2.205C9.391 1.873 9.126 1.609 8.796 1.441Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function VolumeIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...getIconProps(props), "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+    /* @__PURE__ */ jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" }),
+    /* @__PURE__ */ jsx("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" })
+  ] });
+}
+function VolumeMutedIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...getIconProps(props), "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+    /* @__PURE__ */ jsx("line", { x1: "23", y1: "9", x2: "17", y2: "15" }),
+    /* @__PURE__ */ jsx("line", { x1: "17", y1: "9", x2: "23", y2: "15" })
+  ] });
+}
+function UserPlusIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...getIconProps(props), "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "7", r: "4" }),
+    /* @__PURE__ */ jsx("line", { x1: "20", y1: "8", x2: "20", y2: "14" }),
+    /* @__PURE__ */ jsx("line", { x1: "23", y1: "11", x2: "17", y2: "11" })
+  ] });
+}
+function UserCheckIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...getIconProps(props), "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "7", r: "4" }),
+    /* @__PURE__ */ jsx("polyline", { points: "17 11 19 13 23 9" })
+  ] });
+}
+function MoreIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...getIconProps(props), "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1", fill: "currentColor" })
+  ] });
+}
+function CloseIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...getIconProps(props), "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M4.55833 4.5583C4.67552 4.44126 4.83437 4.37552 5 4.37552C5.16562 4.37552 5.32448 4.44126 5.44167 4.5583L10 9.11663L14.5583 4.5583C14.6156 4.49689 14.6846 4.44764 14.7612 4.41348C14.8379 4.37932 14.9206 4.36095 15.0046 4.35947C15.0885 4.35799 15.1718 4.37343 15.2497 4.40486C15.3275 4.4363 15.3982 4.48308 15.4575 4.54243C15.5169 4.60178 15.5637 4.67248 15.5951 4.7503C15.6265 4.82812 15.642 4.91148 15.6405 4.9954C15.639 5.07932 15.6206 5.16208 15.5865 5.23875C15.5523 5.31541 15.5031 5.38441 15.4417 5.44163L10.8833 9.99997L15.4417 14.5583C15.5031 14.6155 15.5523 14.6845 15.5865 14.7612C15.6206 14.8378 15.639 14.9206 15.6405 15.0045C15.642 15.0884 15.6265 15.1718 15.5951 15.2496C15.5637 15.3275 15.5169 15.3981 15.4575 15.4575C15.3982 15.5168 15.3275 15.5636 15.2497 15.5951C15.1718 15.6265 15.0885 15.6419 15.0046 15.6405C14.9206 15.639 14.8379 15.6206 14.7612 15.5864C14.6846 15.5523 14.6156 15.503 14.5583 15.4416L10 10.8833L5.44167 15.4416C5.32319 15.552 5.16648 15.6121 5.00456 15.6093C4.84265 15.6064 4.68816 15.5408 4.57365 15.4263C4.45914 15.3118 4.39354 15.1573 4.39069 14.9954C4.38783 14.8335 4.44793 14.6768 4.55833 14.5583L9.11667 9.99997L4.55833 5.44163C4.44129 5.32444 4.37555 5.16559 4.37555 4.99997C4.37555 4.83434 4.44129 4.67549 4.55833 4.5583Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function MusicIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...getIconProps(props), "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 18V5l12-2v13" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "18", r: "3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "18", cy: "16", r: "3" })
+  ] });
+}
+function VerifiedIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...getIconProps({ ...props, fill: "currentColor", stroke: "none" }), "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 2L14.39 8.26L21 9.27L16.5 14.14L17.77 21L12 17.77L6.23 21L7.5 14.14L3 9.27L9.61 8.26L12 2Z" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M9 12L11 14L15 10",
+        stroke: "white",
+        strokeWidth: "2",
+        fill: "none",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+
+export { BookmarkFilledIcon, BookmarkIcon, CloseIcon, CommentIcon, HeartFilledIcon, HeartIcon, MoreIcon, MusicIcon, PauseIcon, PlayIcon, ShareIcon, UserCheckIcon, UserPlusIcon, VerifiedIcon, VolumeIcon, VolumeMutedIcon };