@stisocial/ui 0.1.0 → 0.2.0

package/dist/media/VideoPlayer/VideoPlayer.js

@@ -0,0 +1,193 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Spinner } from "../../components/Spinner/Spinner.js";
+import { IconButton } from "../../components/IconButton/IconButton.js";
+import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { PlayIcon } from "../../icons/generated/PlayIcon.js";
+import { ConsentNotice } from "../_internal/consent/ConsentNotice.js";
+import { MediaTransport, SORTED_RATES } from "../_internal/transport/MediaTransport.js";
+import { hostOf, isThirdParty } from "../_internal/url.js";
+import { useConsent } from "../_internal/useConsent.js";
+import { useFullscreen, useMedia } from "../_internal/useMedia.js";
+import VideoPlayer_module_default from "./VideoPlayer.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+// src/media/VideoPlayer/VideoPlayer.tsx
+const isEditable = (el) => el instanceof HTMLElement && (el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName));
+/**
+* Video oynatıcı: tarayıcının `video` öğesi, kendi denetim çubuğu (oynat, konum, ses, hız, altyazı,
+* tam ekran). Denetimler videonun üzerinde değil altındadır; karşıtlık videonun içeriğine bağlı değildir.
+* Klavye (sahne odaktayken): Boşluk ve K oynat/duraklat, ← → 5 sn, J L 10 sn, ↑ ↓ ses, M sessiz,
+* F tam ekran, C altyazı, 0–9 konum yüzdesi, Home/End baş ve son, `<` `>` hız. Üçüncü taraf adreste
+* kullanıcı izin verene kadar hiçbir istek yapılmaz.
+*/
+function VideoPlayer({ src, title, poster, captions = [], aspectRatio = "16/9", size = "md", loop, preload = "metadata", consent = "auto", onConsent, crossOrigin, onPlay, onPause, onEnded, className, id }) {
+	const t = useMessages();
+	const sources = typeof src === "string" ? [{ src }] : src;
+	const { origin, allowed, accept } = useConsent(sources.map((x) => x.src), consent, onConsent);
+	const { ref, el, state, actions } = useMedia();
+	const [root, setRoot] = useState(null);
+	const fullscreen = useFullscreen(root);
+	const [caption, setCaption] = useState(() => Math.max(-1, captions.findIndex((c) => c.isDefault)));
+	const nameId = useId();
+	const stageRef = useRef(null);
+	useEffect(() => {
+		if (!el) return;
+		const apply = () => {
+			for (let i = 0; i < el.textTracks.length; i++) {
+				const track = el.textTracks[i];
+				if (track) track.mode = i === caption ? "showing" : "disabled";
+			}
+		};
+		apply();
+		el.textTracks.addEventListener("addtrack", apply);
+		return () => el.textTracks.removeEventListener("addtrack", apply);
+	}, [el, caption]);
+	const wasPaused = useRef(true);
+	useEffect(() => {
+		if (state.paused === wasPaused.current) return;
+		wasPaused.current = state.paused;
+		if (state.paused) onPause?.();
+		else onPlay?.();
+	}, [
+		state.paused,
+		onPause,
+		onPlay
+	]);
+	const wasEnded = useRef(false);
+	useEffect(() => {
+		if (state.ended && !wasEnded.current) onEnded?.();
+		wasEnded.current = state.ended;
+	}, [state.ended, onEnded]);
+	const cycleCaption = () => {
+		const next = caption + 1 >= captions.length ? -1 : caption + 1;
+		setCaption(next);
+	};
+	const captionLabel = caption < 0 ? t.mediaCaptionsOff : template(t.mediaCaptionsOn, { name: captions[caption]?.label ?? "" });
+	const onKeyDown = (e) => {
+		if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || isEditable(e.target)) return;
+		const onStage = e.target === stageRef.current;
+		const key = e.key.toLowerCase();
+		const handled = (fn) => {
+			e.preventDefault();
+			fn();
+		};
+		if (onStage && (e.key === " " || key === "k")) return handled(actions.toggle);
+		if (onStage && key === "arrowleft") return handled(() => actions.seekBy(-5));
+		if (onStage && key === "arrowright") return handled(() => actions.seekBy(5));
+		if (onStage && key === "arrowup") return handled(() => actions.changeVolumeBy(.05));
+		if (onStage && key === "arrowdown") return handled(() => actions.changeVolumeBy(-.05));
+		if (key === "j") return handled(() => actions.seekBy(-10));
+		if (key === "l") return handled(() => actions.seekBy(10));
+		if (key === "k") return handled(actions.toggle);
+		if (key === "m") return handled(actions.toggleMute);
+		if (key === "f" && fullscreen.isAvailable) return handled(fullscreen.toggle);
+		if (key === "c" && captions.length > 0) return handled(cycleCaption);
+		if (key === "home") return handled(() => actions.seek(0));
+		if (key === "end" && state.duration > 0) return handled(() => actions.seek(state.duration));
+		if (/^[0-9]$/.test(e.key) && state.duration > 0) return handled(() => actions.seek(state.duration * Number(e.key) / 10));
+		if (e.key === "<" || e.key === ">") {
+			const at = SORTED_RATES.findIndex((r) => r >= state.rate);
+			const step = e.key === ">" ? 1 : -1;
+			const next = SORTED_RATES[Math.min(SORTED_RATES.length - 1, Math.max(0, at + step))];
+			return handled(() => next && actions.setRate(next));
+		}
+	};
+	const showPoster = poster && (!isThirdParty(poster, origin) || allowed);
+	const idle = state.paused && state.currentTime === 0 && !state.ended && !state.failed;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		ref: setRoot,
+		role: "group",
+		"aria-label": `${t.mediaVideoPlayer}: ${title}`,
+		className: [VideoPlayer_module_default.root, className].filter(Boolean).join(" "),
+		"data-ratio": aspectRatio,
+		"data-fullscreen": fullscreen.isOn ? "" : void 0,
+		onKeyDown,
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: stageRef,
+			className: VideoPlayer_module_default.stage,
+			tabIndex: allowed ? 0 : -1,
+			role: "group",
+			"aria-labelledby": nameId,
+			"aria-busy": state.waiting || void 0,
+			children: [
+				/* @__PURE__ */ jsx(VisuallyHidden, {
+					id: nameId,
+					children: title
+				}),
+				allowed ? /* @__PURE__ */ jsxs("video", {
+					ref,
+					className: VideoPlayer_module_default.video,
+					preload,
+					poster: showPoster ? poster : void 0,
+					loop,
+					playsInline: true,
+					crossOrigin,
+					src: sources.length === 1 ? sources[0]?.src : void 0,
+					onClick: (e) => {
+						if (e.detail <= 1) actions.toggle();
+					},
+					onDoubleClick: () => fullscreen.isAvailable && fullscreen.toggle(),
+					children: [sources.length > 1 ? sources.map((s) => /* @__PURE__ */ jsx("source", {
+						src: s.src,
+						type: s.type
+					}, s.src)) : null, captions.map((c) => /* @__PURE__ */ jsx("track", {
+						kind: "captions",
+						src: c.src,
+						srcLang: c.language,
+						label: c.label
+					}, c.src))]
+				}) : /* @__PURE__ */ jsx("div", {
+					className: VideoPlayer_module_default.gate,
+					children: /* @__PURE__ */ jsx(ConsentNotice, {
+						text: template(t.mediaThirdParty, { host: hostOf(sources[0]?.src ?? "", origin) }),
+						actionLabel: t.mediaLoad,
+						onAccept: accept
+					})
+				}),
+				allowed && idle ? /* @__PURE__ */ jsx("div", {
+					className: VideoPlayer_module_default.center,
+					children: /* @__PURE__ */ jsx(IconButton, {
+						variant: "primary",
+						size: "lg",
+						label: template(t.mediaPlayTitle, { title }),
+						icon: /* @__PURE__ */ jsx(PlayIcon, {}),
+						onPress: actions.toggle
+					})
+				}) : null,
+				allowed && state.waiting ? /* @__PURE__ */ jsx("div", {
+					className: VideoPlayer_module_default.center,
+					children: /* @__PURE__ */ jsx("span", {
+						className: VideoPlayer_module_default.busy,
+						children: /* @__PURE__ */ jsx(Spinner, { size: "lg" })
+					})
+				}) : null,
+				allowed && state.failed ? /* @__PURE__ */ jsx("div", {
+					className: VideoPlayer_module_default.error,
+					role: "alert",
+					children: t.errorMediaLoad
+				}) : null,
+				/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", {
+					role: "status",
+					children: state.waiting ? t.mediaBuffering : ""
+				}) })
+			]
+		}), allowed ? /* @__PURE__ */ jsx(MediaTransport, {
+			state,
+			actions,
+			size,
+			captions: captions.length > 0 ? {
+				label: captionLabel,
+				isOn: caption >= 0,
+				onPress: cycleCaption
+			} : void 0,
+			fullscreen: fullscreen.isAvailable ? {
+				isOn: fullscreen.isOn,
+				onPress: fullscreen.toggle
+			} : void 0
+		}) : null]
+	});
+}
+export { VideoPlayer };

package/dist/media/VideoPlayer/VideoPlayer.module.js

@@ -0,0 +1,12 @@
+import './VideoPlayer.css';
+// src/media/VideoPlayer/VideoPlayer.module.css
+var VideoPlayer_module_default = {
+	"root": "sti-VideoPlayer-root-db1d5",
+	"stage": "sti-VideoPlayer-stage-f9ce3",
+	"video": "sti-VideoPlayer-video-c6573",
+	"gate": "sti-VideoPlayer-gate-b3ac3",
+	"center": "sti-VideoPlayer-center-facf1",
+	"busy": "sti-VideoPlayer-busy-1395e",
+	"error": "sti-VideoPlayer-error-f6d04"
+};
+export { VideoPlayer_module_default as default };

package/dist/media/VideoThumbnail/VideoThumbnail.css

@@ -0,0 +1,139 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-VideoThumbnail-root-38b71 {
+    --sti-thumb-radius: var(--sti-radius-lg);
+    --sti-thumb-ratio: 16 / 9;
+    box-sizing: border-box;
+    aspect-ratio: var(--sti-thumb-ratio);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-thumb-radius);
+    background: var(--sti-bg-subtle);
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    text-decoration: none;
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sti-VideoThumbnail-root-38b71[data-radius="md"] {
+    --sti-thumb-radius: var(--sti-radius-md);
+  }
+
+  .sti-VideoThumbnail-root-38b71[data-ratio="4/3"] {
+    --sti-thumb-ratio: 4 / 3;
+  }
+
+  .sti-VideoThumbnail-root-38b71[data-ratio="1/1"] {
+    --sti-thumb-ratio: 1 / 1;
+  }
+
+  .sti-VideoThumbnail-root-38b71[data-ratio="9/16"] {
+    --sti-thumb-ratio: 9 / 16;
+  }
+
+  .sti-VideoThumbnail-root-38b71[data-ratio="21/9"] {
+    --sti-thumb-ratio: 21 / 9;
+  }
+
+  .sti-VideoThumbnail-image-2b726 {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+    transition: transform var(--sti-duration-slow) var(--sti-ease-out);
+    display: block;
+  }
+
+  .sti-VideoThumbnail-play-74090 {
+    inline-size: var(--sti-control-h-lg);
+    block-size: var(--sti-control-h-lg);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-surface);
+    box-shadow: var(--sti-shadow-md);
+    color: var(--sti-fg);
+    transition: background var(--sti-duration-fast) var(--sti-ease-snap),
+      transform var(--sti-duration-fast) var(--sti-ease-snap);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .sti-VideoThumbnail-duration-865cc {
+    padding: var(--sti-space-0-5) var(--sti-space-2);
+    border-radius: var(--sti-radius-sm);
+    background: var(--sti-bg-inverse);
+    color: var(--sti-fg-inverse);
+    font-family: var(--sti-font-numeric);
+    font-size: var(--sti-font-size-xs);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--sti-line-height-xs);
+    position: absolute;
+    inset-block-end: var(--sti-space-2);
+    inset-inline-end: var(--sti-space-2);
+  }
+
+  .sti-VideoThumbnail-spoken-1ad4b {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  a.sti-VideoThumbnail-root-38b71 {
+    cursor: pointer;
+  }
+
+  .sti-VideoThumbnail-root-38b71[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  @media (hover: hover) {
+    .sti-VideoThumbnail-root-38b71[data-hovered] .sti-VideoThumbnail-image-2b726 {
+      transform: scale(1.03);
+    }
+
+    .sti-VideoThumbnail-root-38b71[data-hovered] .sti-VideoThumbnail-play-74090 {
+      transform: translate(-50%, -50%) scale(1.08);
+    }
+  }
+
+  .sti-VideoThumbnail-root-38b71[data-pressed] .sti-VideoThumbnail-play-74090 {
+    transform: translate(-50%, -50%) scale(.96);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-VideoThumbnail-image-2b726, .sti-VideoThumbnail-play-74090 {
+      transition: none;
+    }
+
+    .sti-VideoThumbnail-root-38b71[data-hovered] .sti-VideoThumbnail-image-2b726 {
+      transform: none;
+    }
+
+    .sti-VideoThumbnail-root-38b71[data-hovered] .sti-VideoThumbnail-play-74090, .sti-VideoThumbnail-root-38b71[data-pressed] .sti-VideoThumbnail-play-74090 {
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-VideoThumbnail-root-38b71, .sti-VideoThumbnail-play-74090, .sti-VideoThumbnail-duration-865cc {
+      border: var(--sti-border-width) solid CanvasText;
+    }
+
+    .sti-VideoThumbnail-root-38b71[data-focus-visible] {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/media/VideoThumbnail/VideoThumbnail.d.ts

@@ -0,0 +1,34 @@
+export type VideoThumbnailRatio = "16/9" | "4/3" | "1/1" | "9/16" | "21/9";
+export interface VideoThumbnailProps {
+  /** Kapak görselinin adresi. */
+  src: string;
+  /**
+   * Görselin açıklaması. Başlıkla aynı bilgiyi veriyorsa boş bırakılır (süs); `href` varsa bağlantının
+   * adı `title`'dır.
+   */
+  alt?: string;
+  /** Videonun adı; `href` varsa bağlantının erişilebilir adıdır (zorunlu bağlantıda). */
+  title?: string;
+  /** Süre (saniye): sağ altta "3:25" olarak görünür. */
+  duration?: number;
+  /** Ekran okuyucunun okuyacağı süre metni ("Süre: 3 dakika 25 saniye"); verilmezse "3:25" okunur. */
+  durationLabel?: string;
+  /** Verilirse küçük resim videoya giden bağlantı olur. */
+  href?: string;
+  /** Oran; varsayılan 16/9. */
+  aspectRatio?: VideoThumbnailRatio;
+  /** Oynat simgesini gösterir; varsayılan açık. */
+  showPlay?: boolean;
+  /** Görselin yüklenme önceliği; varsayılan `lazy`. */
+  loading?: "lazy" | "eager";
+  /** Köşe: `md` 12, `lg` 16 piksel. */
+  radius?: "md" | "lg";
+  className?: string;
+  id?: string;
+}
+/**
+ * Video küçük resmi: sabit oranlı kapak, ortada oynat simgesi, köşede süre etiketi. Sunucu
+ * bileşenidir; `href` verilirse bağlantı parçası istemcide çizilir. Karşıtlık: süre etiketi kendi
+ * zeminine sahiptir (görsele bağlı değildir).
+ */
+export declare function VideoThumbnail({ src, alt, title, duration, durationLabel, href, aspectRatio, showPlay, loading, radius, className, id }: VideoThumbnailProps): import("react").JSX.Element;

package/dist/media/VideoThumbnail/VideoThumbnail.js

@@ -0,0 +1,63 @@
+import { isoDuration } from "../../components/Duration/Duration.js";
+import { PlayIcon } from "../../icons/generated/PlayIcon.js";
+import { formatClock } from "../_internal/clock.js";
+import VideoThumbnail_module_default from "./VideoThumbnail.module.js";
+import { VideoThumbnailLink } from "./VideoThumbnailLink.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/media/VideoThumbnail/VideoThumbnail.tsx
+/**
+* Video küçük resmi: sabit oranlı kapak, ortada oynat simgesi, köşede süre etiketi. Sunucu
+* bileşenidir; `href` verilirse bağlantı parçası istemcide çizilir. Karşıtlık: süre etiketi kendi
+* zeminine sahiptir (görsele bağlı değildir).
+*/
+function VideoThumbnail({ src, alt = "", title, duration, durationLabel, href, aspectRatio = "16/9", showPlay = true, loading = "lazy", radius = "lg", className, id }) {
+	const hasDuration = duration !== void 0 && Number.isFinite(duration) && duration >= 0;
+	const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("img", {
+			className: VideoThumbnail_module_default.image,
+			src,
+			alt: href ? "" : alt,
+			loading,
+			decoding: "async"
+		}),
+		href ? /* @__PURE__ */ jsx("span", {
+			className: VideoThumbnail_module_default.spoken,
+			children: title ?? alt
+		}) : null,
+		showPlay ? /* @__PURE__ */ jsx("span", {
+			className: VideoThumbnail_module_default.play,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(PlayIcon, { size: "md" })
+		}) : null,
+		hasDuration ? /* @__PURE__ */ jsx("span", {
+			className: VideoThumbnail_module_default.duration,
+			children: /* @__PURE__ */ jsx("time", {
+				dateTime: isoDuration(duration),
+				children: durationLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: VideoThumbnail_module_default.spoken,
+					children: durationLabel
+				}), /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: formatClock(duration)
+				})] }) : formatClock(duration)
+			})
+		}) : null
+	] });
+	const rootClass = [VideoThumbnail_module_default.root, className].filter(Boolean).join(" ");
+	if (href) return /* @__PURE__ */ jsx(VideoThumbnailLink, {
+		id,
+		href,
+		className: rootClass,
+		"data-ratio": aspectRatio,
+		"data-radius": radius,
+		children: body
+	});
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: rootClass,
+		"data-ratio": aspectRatio,
+		"data-radius": radius,
+		children: body
+	});
+}
+export { VideoThumbnail };

package/dist/media/VideoThumbnail/VideoThumbnail.module.js

@@ -0,0 +1,10 @@
+import './VideoThumbnail.css';
+// src/media/VideoThumbnail/VideoThumbnail.module.css
+var VideoThumbnail_module_default = {
+	"root": "sti-VideoThumbnail-root-38b71",
+	"image": "sti-VideoThumbnail-image-2b726",
+	"play": "sti-VideoThumbnail-play-74090",
+	"duration": "sti-VideoThumbnail-duration-865cc",
+	"spoken": "sti-VideoThumbnail-spoken-1ad4b"
+};
+export { VideoThumbnail_module_default as default };

package/dist/media/VideoThumbnail/VideoThumbnailLink.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Link } from "react-aria-components";
+// src/media/VideoThumbnail/VideoThumbnailLink.tsx
+/**
+* Küçük resmin bağlantı kabuğu (iç; istemci): React Aria bağlantısı istemci tarafı gezinmeyi verir.
+* Ad bağlantının içeriğindeki gizli başlık metninden gelir (görünür metin süre etiketidir).
+*/
+function VideoThumbnailLink({ href, className, id, children, ...data }) {
+	return /* @__PURE__ */ jsx(Link, {
+		id,
+		href,
+		className,
+		...data,
+		children
+	});
+}
+export { VideoThumbnailLink };

package/dist/media/_internal/clock.js

@@ -0,0 +1,17 @@
+// src/media/_internal/clock.ts
+/** Medya süresi yardımcıları (saf; sunucuda ve istemcide aynı sonucu verir). */
+const finite = (n) => Number.isFinite(n) && n > 0 ? n : 0;
+/** Saniyeyi "m:ss" ya da "h:mm:ss" yazar: 65 → "1:05", 3725 → "1:02:05". Geçersiz değer 0:00 olur. */
+function formatClock(seconds) {
+	const total = Math.floor(finite(seconds));
+	const h = Math.floor(total / 3600);
+	const m = Math.floor(total % 3600 / 60);
+	const s = total % 60;
+	const ss = String(s).padStart(2, "0");
+	return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${ss}` : `${m}:${ss}`;
+}
+/** Değeri [min, max] aralığına sıkıştırır. */
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+export { clamp, formatClock };

package/dist/media/_internal/consent/ConsentNotice.css

@@ -0,0 +1,55 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ConsentNotice-root-134dd {
+    justify-content: center;
+    align-items: center;
+    gap: var(--sti-space-3);
+    box-sizing: border-box;
+    block-size: 100%;
+    inline-size: 100%;
+    min-inline-size: 0;
+    padding: var(--sti-space-6) var(--sti-space-4);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    text-align: center;
+    flex-direction: column;
+    display: flex;
+  }
+
+  .sti-ConsentNotice-icon-bed85 {
+    inline-size: var(--sti-control-h-lg);
+    block-size: var(--sti-control-h-lg);
+    border: var(--sti-border-width) solid var(--sti-border);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-surface);
+    color: var(--sti-fg-muted);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .sti-ConsentNotice-title-7f6e5 {
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-md);
+    margin: 0;
+  }
+
+  .sti-ConsentNotice-text-95af2 {
+    max-inline-size: 34rem;
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-ConsentNotice-actions-70e22 {
+    justify-content: center;
+    align-items: center;
+    gap: var(--sti-space-2) var(--sti-space-3);
+    flex-wrap: wrap;
+    margin-block-start: var(--sti-space-1);
+    display: flex;
+  }
+}

package/dist/media/_internal/consent/ConsentNotice.js

@@ -0,0 +1,40 @@
+"use client";
+import { Button } from "../../../components/Button/Button.js";
+import { GlobeIcon } from "../../../icons/generated/GlobeIcon.js";
+import ConsentNotice_module_default from "./ConsentNotice.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/media/_internal/consent/ConsentNotice.tsx
+/**
+* Gizlilik modunun izin alanı: dış içerik yüklenmeden önce kullanıcıya hangi adrese bağlanılacağı
+* söylenir; düğmeye basılana kadar üçüncü tarafa istek yapılmaz. Video oynatıcı ve gömme ortak kullanır.
+*/
+function ConsentNotice({ title, text, actionLabel, onAccept, extra, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: [ConsentNotice_module_default.root, className].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: ConsentNotice_module_default.icon,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(GlobeIcon, { size: "md" })
+			}),
+			title ? /* @__PURE__ */ jsx("p", {
+				className: ConsentNotice_module_default.title,
+				children: title
+			}) : null,
+			/* @__PURE__ */ jsx("p", {
+				className: ConsentNotice_module_default.text,
+				children: text
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: ConsentNotice_module_default.actions,
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					size: "md",
+					onPress: onAccept,
+					children: actionLabel
+				}), extra]
+			})
+		]
+	});
+}
+export { ConsentNotice };

package/dist/media/_internal/consent/ConsentNotice.module.js

@@ -0,0 +1,10 @@
+import './ConsentNotice.css';
+// src/media/_internal/consent/ConsentNotice.module.css
+var ConsentNotice_module_default = {
+	"root": "sti-ConsentNotice-root-134dd",
+	"icon": "sti-ConsentNotice-icon-bed85",
+	"title": "sti-ConsentNotice-title-7f6e5",
+	"text": "sti-ConsentNotice-text-95af2",
+	"actions": "sti-ConsentNotice-actions-70e22"
+};
+export { ConsentNotice_module_default as default };

package/dist/media/_internal/icons.js

@@ -0,0 +1,77 @@
+import { Icon } from "../../icons/Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/media/_internal/icons.tsx
+function VolumeIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M11 5 6 9H3v6h3l5 4Z" }),
+			/* @__PURE__ */ jsx("path", { d: "M15.5 8.5a5 5 0 0 1 0 7" }),
+			/* @__PURE__ */ jsx("path", { d: "M18.5 5.5a9 9 0 0 1 0 13" })
+		]
+	});
+}
+function VolumeLowIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M11 5 6 9H3v6h3l5 4Z" }), /* @__PURE__ */ jsx("path", { d: "M15.5 8.5a5 5 0 0 1 0 7" })]
+	});
+}
+function VolumeMutedIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M11 5 6 9H3v6h3l5 4Z" }),
+			/* @__PURE__ */ jsx("path", { d: "m22 9-6 6" }),
+			/* @__PURE__ */ jsx("path", { d: "m16 9 6 6" })
+		]
+	});
+}
+function CaptionsIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: "3",
+				y: "5",
+				width: "18",
+				height: "14",
+				rx: "3"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M7.5 12h3" }),
+			/* @__PURE__ */ jsx("path", { d: "M13.5 12h3" }),
+			/* @__PURE__ */ jsx("path", { d: "M7.5 15.5h5" })
+		]
+	});
+}
+function SkipBackIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 2.6-6.4L3 8" }), /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })]
+	});
+}
+function SkipForwardIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-2.6-6.4L21 8" }), /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" })]
+	});
+}
+function MusicIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M9 18V5l11-2v13" }),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "18",
+				r: "3"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "17",
+				cy: "16",
+				r: "3"
+			})
+		]
+	});
+}
+export { CaptionsIcon, MusicIcon, SkipBackIcon, SkipForwardIcon, VolumeIcon, VolumeLowIcon, VolumeMutedIcon };