@stisocial/ui 0.2.0 → 0.3.0

package/dist/maps/LocationPicker/LocationPicker.js

@@ -1,13 +1,13 @@
 "use client";
 import { useFormatter, useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
+import { Button } from "../../components/Button/Button.js";
 import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
 import { fieldStyles } from "../../components/Field/Field.js";
 import { TextField } from "../../components/TextField/TextField.js";
-import { Button } from "../../components/Button/Button.js";
 import { CompassIcon } from "../../icons/generated/CompassIcon.js";
-import { parseCoordinate, roundCoordinate } from "../_internal/geo.js";
 import { useControllable } from "../_internal/useControllable.js";
+import { parseCoordinate, roundCoordinate } from "../_internal/geo.js";
 import { MapMarker } from "../MapMarker/MapMarker.js";
 import { MapView } from "../MapView/MapView.js";
 import LocationPicker_module_default from "./LocationPicker.module.js";

package/dist/maps/MapView/MapView.css

@@ -1,6 +1,6 @@
 @layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
 @layer sti.components {
-  .sti-MapView-root-2c464 {
+  .sti-MapView-root-ce75d {
     --sti-map-h: calc(var(--sti-space-32) * 3);
     --sti-map-radius: var(--sti-radius-xl);
     --sti-map-bg: var(--sti-bg-subtle);
@@ -18,15 +18,15 @@
     overflow: hidden;
   }
 
-  .sti-MapView-root-2c464[data-size="sm"] {
+  .sti-MapView-root-ce75d[data-size="sm"] {
     --sti-map-h: calc(var(--sti-space-32) * 2);
   }
 
-  .sti-MapView-root-2c464[data-size="lg"] {
+  .sti-MapView-root-ce75d[data-size="lg"] {
     --sti-map-h: calc(var(--sti-space-32) * 4);
   }
 
-  .sti-MapView-viewport-32f46 {
+  .sti-MapView-viewport-9d1ce {
     box-sizing: border-box;
     block-size: var(--sti-map-h);
     background: var(--sti-map-bg);
@@ -42,16 +42,16 @@
     container-type: inline-size;
   }
 
-  .sti-MapView-root-2c464[data-dragging] .sti-MapView-viewport-32f46 {
+  .sti-MapView-root-ce75d[data-dragging] .sti-MapView-viewport-9d1ce {
     cursor: grabbing;
   }
 
-  .sti-MapView-viewport-32f46:focus-visible {
+  .sti-MapView-viewport-9d1ce:focus-visible {
     outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
     outline-offset: calc(var(--sti-focus-ring-width) * -1);
   }
 
-  .sti-MapView-tiles-41d91 {
+  .sti-MapView-tiles-788a1 {
     grid-template-columns: repeat(var(--sti-map-cols, 1), var(--sti-map-tile, 0));
     inline-size: max-content;
     translate: var(--sti-map-tiles-x, 0) var(--sti-map-tiles-y, 0);
@@ -62,22 +62,22 @@
     inset-inline-start: 0;
   }
 
-  .sti-MapView-tile-09977 {
-    inline-size: var(--sti-map-tile, 0);
-    block-size: var(--sti-map-tile, 0);
+  .sti-MapView-tile-ecf60 {
+    inline-size: calc(var(--sti-map-tile, 0px) + 1px);
+    block-size: calc(var(--sti-map-tile, 0px) + 1px);
     background: var(--sti-bg-surface-hover);
     -webkit-user-drag: none;
     max-inline-size: none;
     display: block;
   }
 
-  .sti-MapView-markers-dba92 {
+  .sti-MapView-markers-45293 {
     pointer-events: none;
     position: absolute;
     inset: 0;
   }
 
-  .sti-MapView-crosshair-5acc9 {
+  .sti-MapView-crosshair-f782a {
     inline-size: var(--sti-space-6);
     block-size: var(--sti-space-6);
     border: var(--sti-border-width-strong) solid var(--sti-fg);
@@ -93,11 +93,11 @@
     translate: -50% -50%;
   }
 
-  .sti-MapView-viewport-32f46[data-crosshair="always"] .sti-MapView-crosshair-5acc9, .sti-MapView-viewport-32f46[data-crosshair="focus"]:focus-visible .sti-MapView-crosshair-5acc9 {
+  .sti-MapView-viewport-9d1ce[data-crosshair="always"] .sti-MapView-crosshair-f782a, .sti-MapView-viewport-9d1ce[data-crosshair="focus"]:focus-visible .sti-MapView-crosshair-f782a {
     opacity: 1;
   }
 
-  .sti-MapView-controls-f0b39 {
+  .sti-MapView-controls-aaf0f {
     z-index: var(--sti-z-raised);
     border: var(--sti-border-width) solid var(--sti-border);
     border-radius: var(--sti-radius-lg);
@@ -110,7 +110,7 @@
     overflow: hidden;
   }
 
-  .sti-MapView-attribution-87cce {
+  .sti-MapView-attribution-8c348 {
     z-index: var(--sti-z-raised);
     max-inline-size: calc(100% - var(--sti-space-4));
     padding: var(--sti-space-0-5) var(--sti-space-2);
@@ -124,7 +124,7 @@
     inset-inline-end: var(--sti-space-2);
   }
 
-  .sti-MapView-failed-982bd {
+  .sti-MapView-failed-f392f {
     inset-block-start: 50%;
     inset-inline: var(--sti-space-4);
     z-index: var(--sti-z-raised);
@@ -141,14 +141,14 @@
     translate: 0 -50%;
   }
 
-  .sti-MapView-failedText-a25f1 {
+  .sti-MapView-failedText-7e949 {
     color: var(--sti-fg);
     font-size: var(--sti-font-size-sm);
     line-height: var(--sti-line-height-sm);
     margin: 0;
   }
 
-  .sti-MapView-live-ccdfb {
+  .sti-MapView-live-9816a {
     clip-path: inset(50%);
     white-space: nowrap;
     border: 0;
@@ -160,7 +160,7 @@
     overflow: hidden;
   }
 
-  .sti-MapView-consent-892ea {
+  .sti-MapView-consent-5de94 {
     box-sizing: border-box;
     min-block-size: var(--sti-map-h);
     padding: var(--sti-space-4);
@@ -173,7 +173,7 @@
     display: grid;
   }
 
-  .sti-MapView-consentCard-8e1c2 {
+  .sti-MapView-consentCard-ec89e {
     justify-items: center;
     gap: var(--sti-space-3);
     box-sizing: border-box;
@@ -188,7 +188,7 @@
     display: grid;
   }
 
-  .sti-MapView-consentIcon-44a5c {
+  .sti-MapView-consentIcon-b6c3f {
     inline-size: var(--sti-space-12);
     block-size: var(--sti-space-12);
     border-radius: var(--sti-radius-pill);
@@ -200,7 +200,7 @@
     display: inline-flex;
   }
 
-  .sti-MapView-consentTitle-1514e {
+  .sti-MapView-consentTitle-dcb63 {
     color: var(--sti-fg);
     font-size: var(--sti-font-size-lg);
     font-weight: var(--sti-font-weight-semibold);
@@ -209,7 +209,7 @@
     margin: 0;
   }
 
-  .sti-MapView-consentText-1b1db {
+  .sti-MapView-consentText-cbe63 {
     color: var(--sti-fg-muted);
     font-size: var(--sti-font-size-sm);
     line-height: var(--sti-line-height-sm);
@@ -217,7 +217,7 @@
     margin: 0;
   }
 
-  .sti-MapView-consentActions-e6536 {
+  .sti-MapView-consentActions-7088e {
     justify-content: center;
     align-items: center;
     gap: var(--sti-space-2) var(--sti-space-4);
@@ -225,7 +225,7 @@
     display: flex;
   }
 
-  .sti-MapView-list-86b6c {
+  .sti-MapView-list-69da6 {
     gap: var(--sti-space-3);
     inline-size: 100%;
     margin: var(--sti-space-2) 0 0;
@@ -236,32 +236,32 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .sti-MapView-crosshair-5acc9 {
+    .sti-MapView-crosshair-f782a {
       transition: none;
     }
   }
 
   @media (forced-colors: active) {
-    .sti-MapView-root-2c464 {
+    .sti-MapView-root-ce75d {
       border-color: canvastext;
     }
 
-    .sti-MapView-controls-f0b39, .sti-MapView-attribution-87cce, .sti-MapView-failed-982bd, .sti-MapView-consentCard-8e1c2 {
+    .sti-MapView-controls-aaf0f, .sti-MapView-attribution-8c348, .sti-MapView-failed-f392f, .sti-MapView-consentCard-ec89e {
       color: canvastext;
       background: canvas;
       border-color: canvastext;
     }
 
-    .sti-MapView-crosshair-5acc9 {
+    .sti-MapView-crosshair-f782a {
       box-shadow: none;
       border-color: canvastext;
     }
 
-    .sti-MapView-consent-892ea {
+    .sti-MapView-consent-5de94 {
       background-image: none;
     }
 
-    .sti-MapView-viewport-32f46:focus-visible {
+    .sti-MapView-viewport-9d1ce:focus-visible {
       outline-color: highlight;
     }
   }

package/dist/maps/MapView/MapView.js

@@ -1,16 +1,16 @@
 "use client";
 import { useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
-import { IconButton } from "../../components/IconButton/IconButton.js";
 import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
 import { Button } from "../../components/Button/Button.js";
+import { IconButton } from "../../components/IconButton/IconButton.js";
 import { Link } from "../../components/Link/Link.js";
 import { ArrowLink } from "../../components/ArrowLink/ArrowLink.js";
 import { MinusIcon } from "../../icons/generated/MinusIcon.js";
 import { PlusIcon } from "../../icons/generated/PlusIcon.js";
 import { MapPinIcon } from "../../icons/generated/MapPinIcon.js";
-import { clamp, fitView, panBy, project, tileRange, unproject, worldSize, wrapTileX } from "../_internal/geo.js";
 import { useControllable } from "../_internal/useControllable.js";
+import { clamp, fitView, panBy, project, tileRange, unproject, worldSize, wrapTileX } from "../_internal/geo.js";
 import { MapContext } from "../_internal/mapContext.js";
 import MapView_module_default from "./MapView.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/maps/MapView/MapView.module.js

@@ -1,23 +1,23 @@
 import './MapView.css';
 // src/maps/MapView/MapView.module.css
 var MapView_module_default = {
-	"root": "sti-MapView-root-2c464",
-	"viewport": "sti-MapView-viewport-32f46",
-	"tiles": "sti-MapView-tiles-41d91",
-	"tile": "sti-MapView-tile-09977",
-	"markers": "sti-MapView-markers-dba92",
-	"crosshair": "sti-MapView-crosshair-5acc9",
-	"controls": "sti-MapView-controls-f0b39",
-	"attribution": "sti-MapView-attribution-87cce",
-	"failed": "sti-MapView-failed-982bd",
-	"failedText": "sti-MapView-failedText-a25f1",
-	"live": "sti-MapView-live-ccdfb",
-	"consent": "sti-MapView-consent-892ea",
-	"consentCard": "sti-MapView-consentCard-8e1c2",
-	"consentIcon": "sti-MapView-consentIcon-44a5c",
-	"consentTitle": "sti-MapView-consentTitle-1514e",
-	"consentText": "sti-MapView-consentText-1b1db",
-	"consentActions": "sti-MapView-consentActions-e6536",
-	"list": "sti-MapView-list-86b6c"
+	"root": "sti-MapView-root-ce75d",
+	"viewport": "sti-MapView-viewport-9d1ce",
+	"tiles": "sti-MapView-tiles-788a1",
+	"tile": "sti-MapView-tile-ecf60",
+	"markers": "sti-MapView-markers-45293",
+	"crosshair": "sti-MapView-crosshair-f782a",
+	"controls": "sti-MapView-controls-aaf0f",
+	"attribution": "sti-MapView-attribution-8c348",
+	"failed": "sti-MapView-failed-f392f",
+	"failedText": "sti-MapView-failedText-7e949",
+	"live": "sti-MapView-live-9816a",
+	"consent": "sti-MapView-consent-5de94",
+	"consentCard": "sti-MapView-consentCard-ec89e",
+	"consentIcon": "sti-MapView-consentIcon-b6c3f",
+	"consentTitle": "sti-MapView-consentTitle-dcb63",
+	"consentText": "sti-MapView-consentText-cbe63",
+	"consentActions": "sti-MapView-consentActions-7088e",
+	"list": "sti-MapView-list-69da6"
 };
 export { MapView_module_default as default };

package/dist/maps/StoreLocator/StoreLocator.js

@@ -9,9 +9,9 @@ import { EmptyState } from "../../components/EmptyState/EmptyState.js";
 import { CompassIcon } from "../../icons/generated/CompassIcon.js";
 import { MapPinIcon } from "../../icons/generated/MapPinIcon.js";
 import { PhoneLink } from "../../components/PhoneLink/PhoneLink.js";
+import { useControllable } from "../_internal/useControllable.js";
 import { distanceKm, isLatLng } from "../_internal/geo.js";
 import { DirectionsLink } from "../DirectionsLink/DirectionsLink.js";
-import { useControllable } from "../_internal/useControllable.js";
 import { MapMarker } from "../MapMarker/MapMarker.js";
 import { MapView } from "../MapView/MapView.js";
 import StoreLocator_module_default from "./StoreLocator.module.js";

package/dist/maps/TurkeyMap/TurkeyMap.js

@@ -1,8 +1,8 @@
 "use client";
 import { useFormatter, useMessages } from "../../provider/UIProvider.js";
 import { searchKey, template } from "../../text/text.js";
-import { TR_PROVINCES } from "../../components/ProvinceSelect/provinces.js";
 import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { TR_PROVINCES } from "../../components/ProvinceSelect/provinces.js";
 import { useControllable } from "../_internal/useControllable.js";
 import TurkeyMap_module_default from "./TurkeyMap.module.js";
 import { TILE_GRID } from "./tileGrid.js";

package/dist/maps/index.js

@@ -1,7 +1,7 @@
+import { TurkeyMap, neighbor, valueStep } from "./TurkeyMap/TurkeyMap.js";
 import { DirectionsLink, directionsUrl } from "./DirectionsLink/DirectionsLink.js";
 import { MapMarker } from "./MapMarker/MapMarker.js";
 import { MapView, OSM_TILE_URL, openStreetMapUrl, safeTileUrl, tileSrc } from "./MapView/MapView.js";
 import { LocationPicker } from "./LocationPicker/LocationPicker.js";
 import { StoreLocator } from "./StoreLocator/StoreLocator.js";
-import { TurkeyMap, neighbor, valueStep } from "./TurkeyMap/TurkeyMap.js";
 export { DirectionsLink, LocationPicker, MapMarker, MapView, OSM_TILE_URL, StoreLocator, TurkeyMap, directionsUrl, neighbor, openStreetMapUrl, safeTileUrl, tileSrc, valueStep };

package/dist/media/AudioPlayer/AudioPlayer.css

@@ -1,6 +1,6 @@
 @layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
 @layer sti.components {
-  .sti-AudioPlayer-root-db6cc {
+  .sti-AudioPlayer-root-42a6d {
     --sti-audio-radius: var(--sti-radius-lg);
     --sti-audio-cover: 3.5rem;
     gap: var(--sti-space-1);
@@ -17,11 +17,11 @@
     display: flex;
   }
 
-  .sti-AudioPlayer-root-db6cc[data-size="sm"] {
+  .sti-AudioPlayer-root-42a6d[data-size="sm"] {
     --sti-audio-cover: 2.5rem;
   }
 
-  .sti-AudioPlayer-head-d678c {
+  .sti-AudioPlayer-head-a9ae6 {
     align-items: center;
     gap: var(--sti-space-4);
     min-inline-size: 0;
@@ -29,7 +29,7 @@
     display: flex;
   }
 
-  .sti-AudioPlayer-cover-7ba09 {
+  .sti-AudioPlayer-cover-17242 {
     box-sizing: border-box;
     inline-size: var(--sti-audio-cover);
     block-size: var(--sti-audio-cover);
@@ -44,62 +44,67 @@
     overflow: hidden;
   }
 
-  .sti-AudioPlayer-image-7cc8f {
+  .sti-AudioPlayer-image-fb033 {
     object-fit: cover;
     block-size: 100%;
     inline-size: 100%;
     display: block;
   }
 
-  .sti-AudioPlayer-text-7488b {
+  .sti-AudioPlayer-text-75c74 {
     flex: auto;
     min-inline-size: 0;
   }
 
-  .sti-AudioPlayer-title-07145, .sti-AudioPlayer-subtitle-90148 {
+  .sti-AudioPlayer-title-97bff, .sti-AudioPlayer-subtitle-48777 {
     text-overflow: ellipsis;
     white-space: nowrap;
     margin: 0;
     overflow: hidden;
   }
 
-  .sti-AudioPlayer-title-07145 {
+  .sti-AudioPlayer-title-97bff {
     font-size: var(--sti-font-size-body);
     font-weight: var(--sti-font-weight-semibold);
     line-height: var(--sti-line-height-body);
   }
 
-  .sti-AudioPlayer-subtitle-90148 {
+  .sti-AudioPlayer-subtitle-48777 {
     color: var(--sti-fg-muted);
     font-size: var(--sti-font-size-sm);
     line-height: var(--sti-line-height-sm);
   }
 
-  .sti-AudioPlayer-actions-706a3 {
+  .sti-AudioPlayer-actions-387e7 {
     align-items: center;
     gap: var(--sti-space-1);
     flex: none;
     display: flex;
   }
 
-  .sti-AudioPlayer-audio-fa315 {
+  .sti-AudioPlayer-audio-0900c {
     display: none;
   }
 
-  .sti-AudioPlayer-error-ff218 {
-    padding: var(--sti-space-1) var(--sti-space-3) var(--sti-space-2);
+  .sti-AudioPlayer-error-83441 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    margin: var(--sti-space-1) var(--sti-space-3) var(--sti-space-3);
+    padding: var(--sti-space-2) var(--sti-space-3);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-danger-subtle);
     color: var(--sti-fg-danger-strong);
     font-size: var(--sti-font-size-sm);
     line-height: var(--sti-line-height-sm);
-    margin: 0;
+    display: flex;
   }
 
-  .sti-AudioPlayer-consent-ac10b {
+  .sti-AudioPlayer-consent-add7c {
     padding-block: var(--sti-space-4);
   }
 
   @media (forced-colors: active) {
-    .sti-AudioPlayer-root-db6cc, .sti-AudioPlayer-cover-7ba09 {
+    .sti-AudioPlayer-root-42a6d, .sti-AudioPlayer-cover-17242 {
       border-color: canvastext;
     }
   }

package/dist/media/AudioPlayer/AudioPlayer.js

@@ -2,6 +2,7 @@
 import { useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
 import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
 import { ConsentNotice } from "../_internal/consent/ConsentNotice.js";
 import { MusicIcon } from "../_internal/icons.js";
 import { MediaTransport, SORTED_RATES } from "../_internal/transport/MediaTransport.js";
@@ -108,17 +109,16 @@ function AudioPlayer({ src, title, subtitle, cover, skip = 10, actions, size = "
 					type: s.type
 				}, s.src)) : null
 			}),
-			/* @__PURE__ */ jsx(MediaTransport, {
+			state.failed ? /* @__PURE__ */ jsxs("p", {
+				className: AudioPlayer_module_default.error,
+				role: "alert",
+				children: [/* @__PURE__ */ jsx(AlertCircleIcon, { "aria-hidden": "true" }), t.errorMediaLoad]
+			}) : /* @__PURE__ */ jsx(MediaTransport, {
 				state,
 				actions: media,
 				size,
 				skip
 			}),
-			state.failed ? /* @__PURE__ */ jsx("p", {
-				className: AudioPlayer_module_default.error,
-				role: "alert",
-				children: t.errorMediaLoad
-			}) : null,
 			/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", {
 				role: "status",
 				children: state.waiting ? t.mediaBuffering : ""

package/dist/media/AudioPlayer/AudioPlayer.module.js

@@ -1,16 +1,16 @@
 import './AudioPlayer.css';
 // src/media/AudioPlayer/AudioPlayer.module.css
 var AudioPlayer_module_default = {
-	"root": "sti-AudioPlayer-root-db6cc",
-	"head": "sti-AudioPlayer-head-d678c",
-	"cover": "sti-AudioPlayer-cover-7ba09",
-	"image": "sti-AudioPlayer-image-7cc8f",
-	"text": "sti-AudioPlayer-text-7488b",
-	"title": "sti-AudioPlayer-title-07145",
-	"subtitle": "sti-AudioPlayer-subtitle-90148",
-	"actions": "sti-AudioPlayer-actions-706a3",
-	"audio": "sti-AudioPlayer-audio-fa315",
-	"error": "sti-AudioPlayer-error-ff218",
-	"consent": "sti-AudioPlayer-consent-ac10b"
+	"root": "sti-AudioPlayer-root-42a6d",
+	"head": "sti-AudioPlayer-head-a9ae6",
+	"cover": "sti-AudioPlayer-cover-17242",
+	"image": "sti-AudioPlayer-image-fb033",
+	"text": "sti-AudioPlayer-text-75c74",
+	"title": "sti-AudioPlayer-title-97bff",
+	"subtitle": "sti-AudioPlayer-subtitle-48777",
+	"actions": "sti-AudioPlayer-actions-387e7",
+	"audio": "sti-AudioPlayer-audio-0900c",
+	"error": "sti-AudioPlayer-error-83441",
+	"consent": "sti-AudioPlayer-consent-add7c"
 };
 export { AudioPlayer_module_default as default };

package/dist/media/Embed/Embed.css

@@ -0,0 +1,93 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Embed-root-d541d {
+    --sti-embed-ratio: 16 / 9;
+    box-sizing: border-box;
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    overflow: hidden;
+  }
+
+  .sti-Embed-root-d541d[data-ratio="4/3"] {
+    --sti-embed-ratio: 4 / 3;
+  }
+
+  .sti-Embed-root-d541d[data-ratio="1/1"] {
+    --sti-embed-ratio: 1 / 1;
+  }
+
+  .sti-Embed-root-d541d[data-ratio="9/16"] {
+    --sti-embed-ratio: 9 / 16;
+    max-inline-size: 24rem;
+  }
+
+  .sti-Embed-root-d541d[data-ratio="21/9"] {
+    --sti-embed-ratio: 21 / 9;
+  }
+
+  .sti-Embed-stage-caa81 {
+    aspect-ratio: var(--sti-embed-ratio);
+    min-block-size: 14rem;
+    inline-size: 100%;
+    display: grid;
+    position: relative;
+  }
+
+  .sti-Embed-frame-d2694 {
+    border: 0;
+    block-size: 100%;
+    inline-size: 100%;
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-Embed-poster-cf986 {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-Embed-notice-3b600 {
+    min-inline-size: 0;
+    display: grid;
+    position: relative;
+  }
+
+  .sti-Embed-notice-3b600[data-poster] {
+    background: color-mix(in srgb, var(--sti-bg-surface) 90%, transparent);
+  }
+
+  .sti-Embed-unsupported-e5ce0 {
+    align-content: center;
+    justify-items: center;
+    gap: var(--sti-space-2);
+    padding: var(--sti-space-6) var(--sti-space-4);
+    text-align: center;
+    display: grid;
+  }
+
+  .sti-Embed-unsupportedTitle-6b789 {
+    max-inline-size: 30rem;
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  @media (forced-colors: active) {
+    .sti-Embed-root-d541d {
+      border-color: canvastext;
+    }
+
+    .sti-Embed-notice-3b600[data-poster] {
+      background: canvas;
+    }
+  }
+}

package/dist/media/Embed/Embed.d.ts

@@ -0,0 +1,29 @@
+export type EmbedAspectRatio = "16/9" | "4/3" | "1/1" | "9/16" | "21/9";
+export interface EmbedProps {
+  /** YouTube ya da Vimeo adresi (izleme, kısa, gömme ya da paylaşım adresi). */
+  url: string;
+  /** İçeriğin adı (zorunlu): çerçevenin erişilebilir adı ve izin alanının başlığı. */
+  title: string;
+  /**
+   * İzin alanının arka planı. Yalnız kendi sunucunuzdaki görsel verilmelidir: üçüncü taraf adresi
+   * izinden önce yüklenmez (sağlayıcının küçük resmi de üçüncü taraf isteğidir).
+   */
+  poster?: string;
+  aspectRatio?: EmbedAspectRatio;
+  /**
+   * `auto` (varsayılan): kişi "İçeriği yükle"ye basana dek sağlayıcıya hiçbir istek yapılmaz.
+   * `granted`: uygulama izni daha önce almıştır (çerez tercihleri).
+   */
+  consent?: "auto" | "granted";
+  /** İzin verildiğinde (uygulama tercihi kaydedebilir). */
+  onConsent?: () => void;
+  className?: string;
+  id?: string;
+}
+/**
+ * Gizlilik modunda video gömme (YouTube, Vimeo): kişi izin verene dek sağlayıcıya istek yapılmaz;
+ * izin alanında hangi adrese bağlanılacağı yazılır ve sağlayıcının sayfasına bağlantı verilir.
+ * İzinden sonra çerez bırakmayan adresle (youtube-nocookie.com, Vimeo `dnt=1`) ve kısıtlı çerçeveyle
+ * yüklenir. Tanınmayan adres gömülmez; yerine açıklama ve (güvenliyse) bağlantı gösterilir.
+ */
+export declare function Embed({ url, title, poster, aspectRatio, consent, onConsent, className, id }: EmbedProps): import("react").JSX.Element;