@stisocial/ui 0.2.1 → 0.3.0

package/dist/media/Embed/Embed.js

@@ -0,0 +1,93 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Link } from "../../components/Link/Link.js";
+import { ConsentNotice } from "../_internal/consent/ConsentNotice.js";
+import { isThirdParty } from "../_internal/url.js";
+import { useConsent } from "../_internal/useConsent.js";
+import Embed_module_default from "./Embed.module.js";
+import { PROVIDER_HOST, PROVIDER_NAME, embedSrc, parseEmbedUrl, watchUrl } from "./embedUrl.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/media/Embed/Embed.tsx
+/**
+* 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.
+*/
+function Embed({ url, title, poster, aspectRatio = "16/9", consent = "auto", onConsent, className, id }) {
+	const t = useMessages();
+	const target = parseEmbedUrl(url);
+	const src = target ? embedSrc(target) : "";
+	const { origin, allowed, accept } = useConsent(target ? [src] : [], consent, onConsent);
+	const [autoplay, setAutoplay] = useState(false);
+	const showPoster = poster && !isThirdParty(poster, origin);
+	if (!target) {
+		const safe = /^https?:\/\//i.test(url.trim());
+		return /* @__PURE__ */ jsx("div", {
+			id,
+			className: [Embed_module_default.root, className].filter(Boolean).join(" "),
+			"data-ratio": aspectRatio,
+			children: /* @__PURE__ */ jsx("div", {
+				className: Embed_module_default.stage,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: Embed_module_default.unsupported,
+					children: [/* @__PURE__ */ jsx("p", {
+						className: Embed_module_default.unsupportedTitle,
+						children: t.mediaEmbedUnsupported
+					}), safe ? /* @__PURE__ */ jsx(Link, {
+						href: url,
+						target: "_blank",
+						children: t.mediaEmbedOpenLink
+					}) : null]
+				})
+			})
+		});
+	}
+	const provider = PROVIDER_NAME[target.provider];
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: [Embed_module_default.root, className].filter(Boolean).join(" "),
+		"data-ratio": aspectRatio,
+		"data-provider": target.provider,
+		children: /* @__PURE__ */ jsx("div", {
+			className: Embed_module_default.stage,
+			children: allowed ? /* @__PURE__ */ jsx("iframe", {
+				className: Embed_module_default.frame,
+				src: embedSrc(target, { autoplay }),
+				title,
+				loading: "lazy",
+				allow: "autoplay; encrypted-media; picture-in-picture; fullscreen",
+				allowFullScreen: true,
+				referrerPolicy: "strict-origin-when-cross-origin",
+				sandbox: "allow-scripts allow-same-origin allow-presentation allow-popups allow-popups-to-escape-sandbox"
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [showPoster ? /* @__PURE__ */ jsx("img", {
+				className: Embed_module_default.poster,
+				src: poster,
+				alt: ""
+			}) : null, /* @__PURE__ */ jsx("div", {
+				className: Embed_module_default.notice,
+				"data-poster": showPoster ? "" : void 0,
+				children: /* @__PURE__ */ jsx(ConsentNotice, {
+					title,
+					text: template(t.mediaEmbedConsent, {
+						provider,
+						host: PROVIDER_HOST[target.provider]
+					}),
+					actionLabel: template(t.mediaEmbedLoad, { provider }),
+					onAccept: () => {
+						setAutoplay(true);
+						accept();
+					},
+					extra: /* @__PURE__ */ jsx(Link, {
+						href: watchUrl(target),
+						target: "_blank",
+						children: template(t.mediaEmbedWatchOn, { provider })
+					})
+				})
+			})] })
+		})
+	});
+}
+export { Embed };

package/dist/media/Embed/Embed.module.js

@@ -0,0 +1,12 @@
+import './Embed.css';
+// src/media/Embed/Embed.module.css
+var Embed_module_default = {
+	"root": "sti-Embed-root-d541d",
+	"stage": "sti-Embed-stage-caa81",
+	"frame": "sti-Embed-frame-d2694",
+	"poster": "sti-Embed-poster-cf986",
+	"notice": "sti-Embed-notice-3b600",
+	"unsupported": "sti-Embed-unsupported-e5ce0",
+	"unsupportedTitle": "sti-Embed-unsupportedTitle-6b789"
+};
+export { Embed_module_default as default };

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

@@ -0,0 +1,27 @@
+/**
+ * Gömülecek videonun sağlayıcısını ve kimliğini çözer, gizlilik modunda gömme adresini kurar.
+ * Yalnız tanınan sağlayıcılar (YouTube, Vimeo) gömülür; başka her adres reddedilir.
+ */
+export type EmbedProvider = "youtube" | "vimeo";
+export interface EmbedTarget {
+  provider: EmbedProvider;
+  /** Sağlayıcıdaki video kimliği. */
+  id: string;
+  /** Başlangıç saniyesi (adresteki `t` ya da `start`). */
+  start?: number;
+  /** Vimeo gizli video anahtarı (`h`). */
+  hash?: string;
+}
+/** YouTube ya da Vimeo adresini çözer; tanınmayan ya da güvensiz adreste `null`. */
+export declare function parseEmbedUrl(input: string): EmbedTarget | null;
+/**
+ * Gizlilik modundaki gömme adresi: YouTube için `youtube-nocookie.com`, Vimeo için `dnt=1`.
+ * `autoplay`: kişi "Yükle"ye bastıysa ikinci bir tıklama istenmez.
+ */
+export declare function embedSrc(target: EmbedTarget, { autoplay }?: {
+  autoplay?: boolean | undefined;
+}): string;
+/** Sağlayıcının kendi sayfasındaki adres ("YouTube'da izleyin" bağlantısı). */
+export declare function watchUrl(target: EmbedTarget): string;
+export declare const PROVIDER_NAME: Record<EmbedProvider, string>;
+export declare const PROVIDER_HOST: Record<EmbedProvider, string>;

package/dist/media/Embed/embedUrl.js

@@ -0,0 +1,96 @@
+// src/media/Embed/embedUrl.ts
+const YT_ID = /^[\w-]{11}$/;
+const VIMEO_ID = /^\d{1,12}$/;
+/** "1m30s", "90s", "90" → 90. */
+function seconds(v) {
+	if (!v) return void 0;
+	if (/^\d+$/.test(v)) return Number(v);
+	const m = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(v);
+	if (!m || !(m[1] || m[2] || m[3])) return void 0;
+	return Number(m[1] ?? 0) * 3600 + Number(m[2] ?? 0) * 60 + Number(m[3] ?? 0);
+}
+/** YouTube ya da Vimeo adresini çözer; tanınmayan ya da güvensiz adreste `null`. */
+function parseEmbedUrl(input) {
+	let url;
+	try {
+		url = new URL(input.trim());
+	} catch {
+		return null;
+	}
+	if (url.protocol !== "https:" && url.protocol !== "http:") return null;
+	const host = url.hostname.replace(/^(www\.|m\.)/, "");
+	const parts = url.pathname.split("/").filter(Boolean);
+	const start = seconds(url.searchParams.get("t") ?? url.searchParams.get("start"));
+	if (host === "youtu.be") {
+		const id = parts[0] ?? "";
+		return YT_ID.test(id) ? {
+			provider: "youtube",
+			id,
+			start
+		} : null;
+	}
+	if (host === "youtube.com" || host === "youtube-nocookie.com" || host === "music.youtube.com") {
+		let id = "";
+		if (parts[0] === "watch") id = url.searchParams.get("v") ?? "";
+		else if ([
+			"embed",
+			"shorts",
+			"live",
+			"v"
+		].includes(parts[0] ?? "")) id = parts[1] ?? "";
+		return YT_ID.test(id) ? {
+			provider: "youtube",
+			id,
+			start
+		} : null;
+	}
+	if (host === "vimeo.com" || host === "player.vimeo.com") {
+		const rest = parts[0] === "video" ? parts.slice(1) : parts;
+		const id = rest[0] ?? "";
+		if (!VIMEO_ID.test(id)) return null;
+		return {
+			provider: "vimeo",
+			id,
+			start,
+			hash: url.searchParams.get("h") ?? (/^[\da-f]{6,20}$/i.test(rest[1] ?? "") ? rest[1] : void 0)
+		};
+	}
+	return null;
+}
+/**
+* Gizlilik modundaki gömme adresi: YouTube için `youtube-nocookie.com`, Vimeo için `dnt=1`.
+* `autoplay`: kişi "Yükle"ye bastıysa ikinci bir tıklama istenmez.
+*/
+function embedSrc(target, { autoplay = false } = {}) {
+	if (target.provider === "youtube") {
+		const u = new URL(`https://www.youtube-nocookie.com/embed/${target.id}`);
+		u.searchParams.set("rel", "0");
+		if (target.start) u.searchParams.set("start", String(target.start));
+		if (autoplay) u.searchParams.set("autoplay", "1");
+		return u.toString();
+	}
+	const u = new URL(`https://player.vimeo.com/video/${target.id}`);
+	u.searchParams.set("dnt", "1");
+	if (target.hash) u.searchParams.set("h", target.hash);
+	if (autoplay) u.searchParams.set("autoplay", "1");
+	const s = u.toString();
+	return target.start ? `${s}#t=${target.start}s` : s;
+}
+/** Sağlayıcının kendi sayfasındaki adres ("YouTube'da izleyin" bağlantısı). */
+function watchUrl(target) {
+	if (target.provider === "youtube") {
+		const t = target.start ? `&t=${target.start}s` : "";
+		return `https://www.youtube.com/watch?v=${target.id}${t}`;
+	}
+	const h = target.hash ? `/${target.hash}` : "";
+	return `https://vimeo.com/${target.id}${h}`;
+}
+const PROVIDER_NAME = {
+	youtube: "YouTube",
+	vimeo: "Vimeo"
+};
+const PROVIDER_HOST = {
+	youtube: "www.youtube-nocookie.com",
+	vimeo: "player.vimeo.com"
+};
+export { PROVIDER_HOST, PROVIDER_NAME, embedSrc, parseEmbedUrl, watchUrl };

package/dist/media/ImageCompare/ImageCompare.css

@@ -0,0 +1,199 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ImageCompare-root-47d74 {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    margin: 0;
+  }
+
+  .sti-ImageCompare-stage-bca79 {
+    --sti-compare-pos: 50%;
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sti-ImageCompare-stage-bca79:not([data-placed]) .sti-ImageCompare-divider-4518e, .sti-ImageCompare-stage-bca79:not([data-placed]) .sti-ImageCompare-clip-d8ee5 {
+    visibility: hidden;
+  }
+
+  .sti-ImageCompare-root-47d74[data-ratio] .sti-ImageCompare-stage-bca79 {
+    aspect-ratio: var(--sti-compare-ratio);
+  }
+
+  .sti-ImageCompare-root-47d74[data-ratio="16/9"] {
+    --sti-compare-ratio: 16 / 9;
+  }
+
+  .sti-ImageCompare-root-47d74[data-ratio="4/3"] {
+    --sti-compare-ratio: 4 / 3;
+  }
+
+  .sti-ImageCompare-root-47d74[data-ratio="1/1"] {
+    --sti-compare-ratio: 1 / 1;
+  }
+
+  .sti-ImageCompare-root-47d74[data-ratio="3/4"] {
+    --sti-compare-ratio: 3 / 4;
+  }
+
+  .sti-ImageCompare-root-47d74[data-ratio="9/16"] {
+    --sti-compare-ratio: 9 / 16;
+  }
+
+  .sti-ImageCompare-image-9e2cf {
+    pointer-events: none;
+    block-size: auto;
+    inline-size: 100%;
+    display: block;
+  }
+
+  .sti-ImageCompare-root-47d74[data-ratio] .sti-ImageCompare-image-9e2cf {
+    object-fit: cover;
+    block-size: 100%;
+  }
+
+  .sti-ImageCompare-root-47d74[data-ratio] .sti-ImageCompare-stage-bca79 > .sti-ImageCompare-image-9e2cf {
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-ImageCompare-clip-d8ee5 {
+    clip-path: inset(0 calc(100% - var(--sti-compare-pos)) 0 0);
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-ImageCompare-clip-d8ee5 .sti-ImageCompare-image-9e2cf {
+    object-fit: cover;
+    block-size: 100%;
+  }
+
+  .sti-ImageCompare-root-47d74[data-orientation="vertical"] .sti-ImageCompare-clip-d8ee5 {
+    clip-path: inset(0 0 calc(100% - var(--sti-compare-pos)) 0);
+  }
+
+  .sti-ImageCompare-tag-304bc {
+    padding: var(--sti-space-1) var(--sti-space-2);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-inverse);
+    color: var(--sti-fg-inverse);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-xs);
+    pointer-events: none;
+    position: absolute;
+    inset-block-start: var(--sti-space-3);
+  }
+
+  .sti-ImageCompare-tag-304bc[data-side="before"] {
+    inset-inline-start: var(--sti-space-3);
+  }
+
+  .sti-ImageCompare-tag-304bc[data-side="after"] {
+    inset-inline-end: var(--sti-space-3);
+  }
+
+  .sti-ImageCompare-root-47d74[data-orientation="vertical"] .sti-ImageCompare-tag-304bc[data-side="after"] {
+    inset-block: auto var(--sti-space-3);
+    inset-inline: var(--sti-space-3) auto;
+  }
+
+  .sti-ImageCompare-divider-4518e {
+    inline-size: var(--sti-border-width-strong);
+    background: var(--sti-bg-surface);
+    box-shadow: var(--sti-shadow-sm);
+    pointer-events: none;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: var(--sti-compare-pos);
+    translate: -50%;
+  }
+
+  .sti-ImageCompare-root-47d74[data-orientation="vertical"] .sti-ImageCompare-divider-4518e {
+    inset-block: var(--sti-compare-pos) auto;
+    inline-size: auto;
+    block-size: var(--sti-border-width-strong);
+    inset-inline: 0;
+    translate: 0 -50%;
+  }
+
+  .sti-ImageCompare-handle-7f6e5 {
+    inline-size: var(--sti-control-h-md);
+    block-size: var(--sti-control-h-md);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-surface);
+    box-shadow: var(--sti-shadow-md);
+    color: var(--sti-fg);
+    place-items: center;
+    display: grid;
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    translate: -50% -50%;
+  }
+
+  .sti-ImageCompare-root-47d74[data-orientation="vertical"] .sti-ImageCompare-handleIcon-dad1c {
+    rotate: 90deg;
+  }
+
+  .sti-ImageCompare-handleIcon-dad1c {
+    inline-size: var(--sti-icon-md);
+    block-size: var(--sti-icon-md);
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2px;
+  }
+
+  .sti-ImageCompare-stage-bca79:has(.sti-ImageCompare-range-3d315:focus-visible) .sti-ImageCompare-handle-7f6e5 {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ImageCompare-range-3d315 {
+    opacity: 0;
+    cursor: ew-resize;
+    block-size: 100%;
+    inline-size: 100%;
+    margin: 0;
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-ImageCompare-root-47d74[data-orientation="vertical"] .sti-ImageCompare-range-3d315 {
+    cursor: ns-resize;
+    writing-mode: vertical-lr;
+  }
+
+  .sti-ImageCompare-srOnly-91836 {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  @media (forced-colors: active) {
+    .sti-ImageCompare-divider-4518e, .sti-ImageCompare-handle-7f6e5 {
+      color: canvas;
+      forced-color-adjust: none;
+      background: canvastext;
+    }
+
+    .sti-ImageCompare-stage-bca79:has(.sti-ImageCompare-range-3d315:focus-visible) .sti-ImageCompare-handle-7f6e5 {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/media/ImageCompare/ImageCompare.d.ts

@@ -0,0 +1,30 @@
+export interface CompareImage {
+  src: string;
+  /** Görselin metin karşılığı (zorunlu). */
+  alt: string;
+  /** Köşedeki etiket; verilmezse "Önce" / "Sonra". */
+  label?: string;
+}
+export interface ImageCompareProps {
+  before: CompareImage;
+  after: CompareImage;
+  /** Bölücünün başlangıç konumu (yüzde, 0–100). */
+  defaultPosition?: number;
+  /** Denetimli konum. */
+  position?: number;
+  onPositionChange?: (position: number) => void;
+  /** `horizontal`: bölücü dikey çizgi, soldan sağa (varsayılan); `vertical`: yukarıdan aşağı. */
+  orientation?: "horizontal" | "vertical";
+  /** Görsellerin en-boy oranı ("16/9"); verilmezse ilk görselin kendi oranı. */
+  aspectRatio?: "16/9" | "4/3" | "1/1" | "3/4" | "9/16";
+  /** Bileşenin erişilebilir adı; verilmezse "Önce ve sonra karşılaştırması". */
+  label?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Önce/sonra karşılaştırması: iki görsel üst üste, sürüklenebilir bölücüyle. Bölücü yerel bir
+ * kaydırıcıdır (oklar, Page Up/Down, Home, End; dokunma ve fare sürüklemesi): kaydırıcı bütün yüzeyi
+ * kaplar, tıklanan noktaya atlar. Konum CSSOM ile (CSP uyumlu) yazılır; görseller metin karşılığıyla.
+ */
+export declare function ImageCompare({ before, after, defaultPosition, position, onPositionChange, orientation, aspectRatio, label, className, id }: ImageCompareProps): import("react").JSX.Element;

package/dist/media/ImageCompare/ImageCompare.js

@@ -0,0 +1,106 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import ImageCompare_module_default from "./ImageCompare.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useState } from "react";
+// src/media/ImageCompare/ImageCompare.tsx
+const clamp = (v) => Math.min(100, Math.max(0, v));
+/**
+* Önce/sonra karşılaştırması: iki görsel üst üste, sürüklenebilir bölücüyle. Bölücü yerel bir
+* kaydırıcıdır (oklar, Page Up/Down, Home, End; dokunma ve fare sürüklemesi): kaydırıcı bütün yüzeyi
+* kaplar, tıklanan noktaya atlar. Konum CSSOM ile (CSP uyumlu) yazılır; görseller metin karşılığıyla.
+*/
+function ImageCompare({ before, after, defaultPosition = 50, position, onPositionChange, orientation = "horizontal", aspectRatio, label, className, id }) {
+	const t = useMessages();
+	const auto = useId();
+	const [inner, setInner] = useState(clamp(defaultPosition));
+	const value = clamp(position ?? inner);
+	const beforeLabel = before.label ?? t.mediaCompareBefore;
+	const afterLabel = after.label ?? t.mediaCompareAfter;
+	const place = useCallback((el) => {
+		if (!el) return;
+		el.style.setProperty("--sti-compare-pos", `${value}%`);
+		el.dataset.placed = "";
+	}, [value]);
+	const set = (v) => {
+		const next = clamp(v);
+		if (position === void 0) setInner(next);
+		onPositionChange?.(next);
+	};
+	return /* @__PURE__ */ jsxs("figure", {
+		id,
+		className: [ImageCompare_module_default.root, className].filter(Boolean).join(" "),
+		"data-orientation": orientation,
+		"data-ratio": aspectRatio,
+		"aria-labelledby": `${auto}-label`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: place,
+			className: ImageCompare_module_default.stage,
+			children: [
+				/* @__PURE__ */ jsx("img", {
+					className: ImageCompare_module_default.image,
+					src: after.src,
+					alt: after.alt,
+					draggable: false
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: ImageCompare_module_default.clip,
+					children: /* @__PURE__ */ jsx("img", {
+						className: ImageCompare_module_default.image,
+						src: before.src,
+						alt: before.alt,
+						draggable: false
+					})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: ImageCompare_module_default.tag,
+					"data-side": "before",
+					"aria-hidden": "true",
+					children: beforeLabel
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: ImageCompare_module_default.tag,
+					"data-side": "after",
+					"aria-hidden": "true",
+					children: afterLabel
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: ImageCompare_module_default.divider,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("span", {
+						className: ImageCompare_module_default.handle,
+						children: /* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 24 24",
+							className: ImageCompare_module_default.handleIcon,
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx("path", { d: "M9 6 3 12l6 6M15 6l6 6-6 6" })
+						})
+					})
+				}),
+				/* @__PURE__ */ jsx("input", {
+					className: ImageCompare_module_default.range,
+					type: "range",
+					min: 0,
+					max: 100,
+					step: 1,
+					value: Math.round(value),
+					"aria-label": label ?? t.mediaCompare,
+					"aria-valuetext": template(t.mediaCompareValue, {
+						before: beforeLabel,
+						after: afterLabel,
+						percent: Math.round(value),
+						rest: 100 - Math.round(value)
+					}),
+					"aria-orientation": orientation === "vertical" ? "vertical" : void 0,
+					onChange: (e) => set(Number(e.currentTarget.value))
+				})
+			]
+		}), /* @__PURE__ */ jsx("figcaption", {
+			id: `${auto}-label`,
+			className: ImageCompare_module_default.srOnly,
+			children: label ?? t.mediaCompare
+		})]
+	});
+}
+export { ImageCompare };

package/dist/media/ImageCompare/ImageCompare.module.js

@@ -0,0 +1,15 @@
+import './ImageCompare.css';
+// src/media/ImageCompare/ImageCompare.module.css
+var ImageCompare_module_default = {
+	"root": "sti-ImageCompare-root-47d74",
+	"stage": "sti-ImageCompare-stage-bca79",
+	"divider": "sti-ImageCompare-divider-4518e",
+	"clip": "sti-ImageCompare-clip-d8ee5",
+	"image": "sti-ImageCompare-image-9e2cf",
+	"tag": "sti-ImageCompare-tag-304bc",
+	"handle": "sti-ImageCompare-handle-7f6e5",
+	"handleIcon": "sti-ImageCompare-handleIcon-dad1c",
+	"range": "sti-ImageCompare-range-3d315",
+	"srOnly": "sti-ImageCompare-srOnly-91836"
+};
+export { ImageCompare_module_default as default };