@calmlens/sdk 0.16.3 → 0.17.1

package/esm/ui-Ca_SpJXf.js

@@ -0,0 +1,458 @@
+import { g as transformSelector, p as serializeTransform, u as getAssetUrl } from "./ModerationContextLimits-D1x_WAtP.js";
+import { t as EU_COUNTRIES } from "./Jurisdiction-FusEXb4U-1ov6m5yE.js";
+import { a as placeholderHashToDataURL } from "./UploadController-txp5NuzH.js";
+import { a as getFileIcon, c as renderFileIconSvg } from "./FileIcons-M6dzjFxd.js";
+// src/ui/Icons.ts
+/** Path data for the components' 24×24 stroke icons, so every framework draws the same ones. */
+const ICONS = {
+	upload: "M12 16V4m0 0L7 9m5-5 5 5M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2",
+	remove: "M18 6 6 18M6 6l12 12",
+	retry: "M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7",
+	unavailable: "M3 3l18 18M10.6 10.6a2 2 0 0 0 2.8 2.8M9.9 5.1A9.8 9.8 0 0 1 12 5c5 0 9 5 10 7a17 17 0 0 1-3.3 4.2M6.6 6.6C4.4 8 2.8 10.4 2 12c1 2 5 7 10 7a9.6 9.6 0 0 0 5.4-1.6"
+};
+/** Attributes shared by every icon's `<svg>`. */
+const ICON_ATTRIBUTES = {
+	width: "18",
+	height: "18",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	"aria-hidden": "true"
+};
+// src/ui/Media.ts
+/**
+* The image URL to load for a box `displayWidth` pixels wide: the smallest width that covers it,
+* or the largest when none does. Without `widths`, or before the box is measured, the image's own
+* `src`. React Native, which has no `srcset`, calls this with its measured size.
+*/
+const pickMediaSource = (state, displayWidth) => {
+	const { sources } = state;
+	if (!sources?.length || !displayWidth) return state.src;
+	return (sources.find((source) => source.width >= displayWidth) ?? sources.at(-1))?.src ?? state.src;
+};
+const decodedPlaceholders = /* @__PURE__ */ new Map();
+/** Renders a ThumbHash as a PNG data URL, once per hash; `undefined` for an invalid hash. */
+const decodePlaceholderHash = (hash) => {
+	if (!hash) return void 0;
+	if (!decodedPlaceholders.has(hash)) {
+		let decoded;
+		try {
+			decoded = placeholderHashToDataURL(hash);
+		} catch {}
+		if (decodedPlaceholders.size > 500) decodedPlaceholders.clear();
+		decodedPlaceholders.set(hash, decoded);
+	}
+	return decodedPlaceholders.get(hash);
+};
+const joinTransforms = (base, extra) => [transformSelector(base), extra && serializeTransform(extra)].filter(Boolean).join(",") || void 0;
+/**
+* Fills the props left unset from `asset`, if there is one: the project and ID, its moderation
+* status, `video` or `audio` for those asset types, and its stored preview's ThumbHash, average
+* colour and size. Every framework's media component calls this before rendering.
+*/
+const resolveMediaProps = (props) => {
+	const { asset } = props;
+	if (!asset) return props;
+	const preview = asset.content?.image;
+	const regionEntries = asset.classification?.moderation?.regions ?? [];
+	const ranks = {
+		pending: 0,
+		allowed: 0,
+		limited: 1,
+		"age-restricted": 2,
+		blocked: 3,
+		purged: 4
+	};
+	const statuses = {
+		limit: "limited",
+		"age-restrict": "age-restricted",
+		block: "blocked",
+		purge: "purged"
+	};
+	let status = props.status ?? asset.classification?.moderation?.status ?? "allowed";
+	for (const entry of regionEntries) {
+		const region = props.viewerClaims?.region;
+		if (region && (entry.region === region || entry.region === "EU" && EU_COUNTRIES.has(region))) {
+			const regionalStatus = statuses[entry.action];
+			if (regionalStatus && ranks[regionalStatus] > ranks[status]) status = regionalStatus;
+		}
+	}
+	const kind = asset.type === "video" || asset.type === "audio" ? asset.type : void 0;
+	return {
+		...props,
+		projectId: props.projectId ?? asset.projectId,
+		assetId: props.assetId ?? asset.id,
+		status,
+		contentRemoved: props.contentRemoved ?? asset.content?.status === "removed",
+		type: props.type ?? kind,
+		placeholderHash: props.placeholderHash ?? preview?.thumbhash ?? void 0,
+		averageColor: props.averageColor ?? preview?.averageColor ?? void 0,
+		width: props.width ?? preview?.width ?? void 0,
+		height: props.height ?? preview?.height ?? void 0
+	};
+};
+const getMediaState = (options) => buildMediaState(resolveMediaProps(options));
+const buildMediaState = ({ projectId, assetId, status = "allowed", contentRemoved = false, type = "image", resource = "rendered", lens, transform, widths, url, placeholder = true, placeholderHash, placeholderUrl: customPlaceholderUrl, cdnBaseUrl, viewerClaims }) => {
+	if (status === "blocked" || status === "purged" || contentRemoved) return { kind: "unavailable" };
+	const region = viewerClaims?.region;
+	const ageConfirmed = viewerClaims?.ageConfirmed === true;
+	const asset = {
+		projectId,
+		assetIdentifier: assetId,
+		cdnBaseUrl,
+		viewerClaims: region || ageConfirmed ? {
+			...region ? { region } : {},
+			...ageConfirmed ? { ageConfirmed } : {}
+		} : void 0
+	};
+	const placeholderUrl = placeholder ? decodePlaceholderHash(placeholderHash) ?? customPlaceholderUrl ?? (type !== "image" ? void 0 : getAssetUrl({
+		projectId,
+		assetIdentifier: assetId,
+		cdnBaseUrl,
+		resource: "placeholder",
+		viewerClaims: region ? { region } : void 0
+	})) : void 0;
+	if (status === "age-restricted" && !ageConfirmed) return {
+		kind: "gated",
+		placeholderUrl
+	};
+	const build = (options = {}) => {
+		const chosen = options.resource ?? resource;
+		const rendered = chosen === "rendered";
+		return getAssetUrl({
+			...asset,
+			resource: chosen,
+			lens: rendered ? lens : void 0,
+			transform: rendered ? joinTransforms(transform, options.extra) : void 0
+		});
+	};
+	if (type === "audio") return {
+		kind: "audio",
+		src: url ?? build({ resource: "original" })
+	};
+	if (type === "video") return {
+		kind: "video",
+		src: url ?? build({ resource: "original" }),
+		placeholderUrl
+	};
+	if (url) return {
+		kind: "image",
+		src: url,
+		placeholderUrl
+	};
+	const sources = [...new Set(widths ?? [])].filter((width) => Number.isSafeInteger(width) && width > 0).sort((a, b) => a - b).map((width) => ({
+		src: build({ extra: {
+			type: "imageTransform",
+			options: { width }
+		} }),
+		width
+	}));
+	return {
+		kind: "image",
+		src: sources.at(-1)?.src ?? build(),
+		srcSet: sources.length ? sources.map(({ src, width }) => `${src} ${width}w`).join(", ") : void 0,
+		sources: sources.length ? sources : void 0,
+		placeholderUrl
+	};
+};
+// src/ui/Messages.ts
+/** The size of a row's file-type icon, the same as an image preview. */
+const FILE_ICON_SIZE = 40;
+const DEFAULT_MESSAGES = {
+	dropzoneTitle: "Click to upload or drag and drop",
+	dropzoneTitleDragging: "Drop to upload",
+	chooseFile: "Select file",
+	chooseFiles: "Select files",
+	chooseAnother: "Choose another",
+	maxFileSizeHint: "Up to {size}",
+	selected: "",
+	queued: "Waiting…",
+	uploading: "Uploading…",
+	checking: "Checking…",
+	submitted: "Uploaded.",
+	pending: "Uploaded. It will be shown once it has been checked.",
+	allowed: "Uploaded.",
+	limited: "Uploaded.",
+	"age-restricted": "Uploaded. It will only be shown to people who can see sensitive content.",
+	blocked: "This file can't be used because it may break our community guidelines.",
+	purged: "This file can't be used because it breaks our community guidelines.",
+	failed: "We couldn't upload this file. Please try again.",
+	"file/not-accepted": "This type of file isn't accepted.",
+	"file/too-large": "This file is too large.",
+	"upload-preset/too-large": "This file is too large.",
+	"upload-preset/content-type-not-allowed": "This type of file isn't accepted.",
+	"upload-preset/daily-limit-reached": "You've reached today's upload limit. Try again tomorrow.",
+	"upload-token/expired": "Your upload expired. Please try again.",
+	"sdk/cancelled": "Cancelled.",
+	retry: "Retry",
+	remove: "Remove {name}",
+	cancel: "Cancel {name}",
+	sensitiveTitle: "Sensitive content",
+	sensitiveBody: "This may not be suitable for everyone.",
+	reveal: "View",
+	unavailable: "Unavailable",
+	regionalUnavailable: "Unavailable in your region"
+};
+const resolveMessages = (overrides) => overrides ? {
+	...DEFAULT_MESSAGES,
+	...overrides
+} : DEFAULT_MESSAGES;
+/** The unavailable notice every media binding shows for the same resolved state. */
+const getMediaUnavailableMessage = (state, messages) => state.kind === "unavailable" && state.reason === "regional" ? messages.regionalUnavailable : messages.unavailable;
+/** Fills `{name}`-style placeholders. */
+const formatMessage = (message, values) => message.replace(/\{(\w+)\}/g, (match, name) => values[name] ?? match);
+/** The message for a file's current state. */
+const getUploadItemMessage = (item, messages) => {
+	if (item.stage === "failed") return item.errorCode && messages[item.errorCode] || messages.failed;
+	if (item.stage === "complete") return messages[item.status ?? "submitted"] ?? messages.submitted;
+	return messages[item.stage];
+};
+/** How a finished file turned out, for styling: `accepted`, `restricted` or `rejected`. */
+const getUploadItemOutcome = (item) => {
+	if (item.stage === "failed") return "rejected";
+	if (item.stage !== "complete") return void 0;
+	if (item.status === "blocked" || item.status === "purged") return "rejected";
+	return item.status === "age-restricted" ? "restricted" : "accepted";
+};
+/** A byte count for people, such as `1.2 MB`. */
+const formatBytes = (bytes) => {
+	if (bytes < 1024) return `${bytes} B`;
+	const units = [
+		"KB",
+		"MB",
+		"GB"
+	];
+	let value = bytes / 1024;
+	let unit = 0;
+	while (value >= 1024 && unit < units.length - 1) {
+		value /= 1024;
+		unit++;
+	}
+	return `${value >= 10 ? Math.round(value) : value.toFixed(1)} ${units[unit]}`;
+};
+const describeUploadItem = (item, messages) => {
+	const busy = item.stage === "queued" || item.stage === "uploading" || item.stage === "checking";
+	return {
+		message: getUploadItemMessage(item, messages),
+		outcome: getUploadItemOutcome(item),
+		busy,
+		progressPercent: item.stage === "uploading" && item.progress !== null ? Math.round(item.progress * 100) : void 0,
+		canRetry: item.stage === "failed" && !item.errorCode?.startsWith("file/"),
+		removeLabel: formatMessage(busy ? messages.cancel : messages.remove, { name: item.file.name }),
+		fileIcon: item.previewUrl ? "" : renderFileIconSvg(getFileIcon(item.file), FILE_ICON_SIZE),
+		size: formatBytes(item.file.size)
+	};
+};
+/** The hint under the drop zone's title, or `undefined` without a size limit. */
+const getDropzoneHint = (messages, maxFileSize) => maxFileSize === void 0 ? void 0 : formatMessage(messages.maxFileSizeHint, { size: formatBytes(maxFileSize) });
+const describeUploader = (snapshot, options, messages) => ({
+	showDropzone: Boolean(options.multiple) || snapshot.items.length === 0,
+	chooseLabel: options.multiple ? messages.chooseFiles : messages.chooseFile,
+	hint: getDropzoneHint(messages, options.maxFileSize)
+});
+// src/ui/Props.ts
+/** The aspect ratio a media component's box keeps, if it knows one. */
+const getMediaAspectRatio = ({ aspectRatio, width, height }) => aspectRatio ?? (width && height ? width / height : void 0);
+/** A key that changes whenever a media component must load something new. */
+const getMediaLoadKey = (state) => state.kind === "image" ? `${state.src} ${state.srcSet ?? ""}` : state.kind === "video" || state.kind === "audio" ? state.src : state.kind === "unavailable" && state.reason === "regional" ? "unavailable-regional" : state.kind;
+// src/ui/Theme.ts
+const CALMLENS_THEME = {
+	accent: "#635bff",
+	accentText: "#fff",
+	radius: 12,
+	text: "#1f2328",
+	background: "transparent",
+	success: "#12a26f",
+	warning: "#e8a317",
+	danger: "#e5484d"
+};
+/** `color` at `alpha` as `rgba()`, for a hex colour; other colours are returned as they are. */
+const withAlpha = (color, alpha) => {
+	const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color)?.[1];
+	if (!hex) return color;
+	const full = hex.length === 3 ? [...hex].map((digit) => digit + digit).join("") : hex;
+	const [red, green, blue] = [
+		0,
+		2,
+		4
+	].map((start) => Number.parseInt(full.slice(start, start + 2), 16));
+	return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+};
+/**
+* The full theme from your overrides, mixing the muted, border and surface colours from `text`
+* as the stylesheet mixes them from the page's text colour.
+*/
+const resolveTheme = (overrides = {}) => {
+	const text = overrides.text ?? CALMLENS_THEME.text;
+	return {
+		...CALMLENS_THEME,
+		muted: withAlpha(text, .72),
+		border: withAlpha(text, .18),
+		surface: withAlpha(text, .04),
+		...overrides,
+		text
+	};
+};
+// src/ui/Styles.ts
+/**
+* The components' stylesheet, also shipped as `@calmlens/sdk/styles.css`. The React components
+* render it themselves (React hoists it into the head, on the server too); with Vue, Svelte or
+* the web components, import or link `@calmlens/sdk/styles.css` once. Nothing is added to the page
+* at runtime. Theme it with the `--calmlens-*` custom properties, or leave it out and style the
+* `calmlens-*` classes yourself.
+*/
+const CALMLENS_STYLES = `
+/* Zero specificity, so a page's own --calmlens-* values win even on the same element. */
+:where(.calmlens-uploader, .calmlens-media) {
+  --calmlens-accent: ${CALMLENS_THEME.accent};
+  --calmlens-accent-text: ${CALMLENS_THEME.accentText};
+  --calmlens-radius: ${CALMLENS_THEME.radius}px;
+  --calmlens-border: color-mix(in srgb, currentColor 18%, transparent);
+  --calmlens-surface: color-mix(in srgb, currentColor 4%, transparent);
+  --calmlens-background: ${CALMLENS_THEME.background};
+  --calmlens-muted: color-mix(in srgb, currentColor 72%, transparent);
+  --calmlens-success: ${CALMLENS_THEME.success};
+  --calmlens-warning: ${CALMLENS_THEME.warning};
+  --calmlens-danger: ${CALMLENS_THEME.danger};
+  --calmlens-focus-ring: var(--calmlens-accent);
+  --calmlens-focus-width: 2px;
+  --calmlens-focus-offset: 2px;
+  box-sizing: border-box;
+  font: inherit;
+}
+.calmlens-uploader *, .calmlens-media * { box-sizing: border-box; }
+.calmlens-uploader { display: grid; gap: 12px; }
+.calmlens-uploader > [hidden] { display: none; }
+.calmlens-dropzone {
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
+  padding: 40px 24px; text-align: center;
+  border: 1.5px dashed var(--calmlens-border); border-radius: var(--calmlens-radius);
+  background: var(--calmlens-surface); cursor: pointer;
+  transition: border-color 200ms ease-in-out, background-color 200ms ease-in-out;
+}
+.calmlens-dropzone:hover, .calmlens-dropzone:focus-within {
+  border-color: color-mix(in srgb, var(--calmlens-accent) 30%, transparent);
+  background: color-mix(in srgb, var(--calmlens-accent) 4%, transparent);
+}
+.calmlens-dropzone[data-dragging] {
+  border-color: var(--calmlens-accent);
+  background: color-mix(in srgb, var(--calmlens-accent) 9%, transparent);
+}
+.calmlens-dropzone[data-disabled] {
+  cursor: not-allowed; border-color: var(--calmlens-border); background: none; color: var(--calmlens-muted);
+}
+.calmlens-dropzone__icon {
+  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
+  color: var(--calmlens-accent); background: color-mix(in srgb, var(--calmlens-accent) 10%, transparent);
+  transition: transform 200ms;
+}
+.calmlens-dropzone[data-disabled] .calmlens-dropzone__icon { color: inherit; background: var(--calmlens-surface); }
+.calmlens-dropzone[data-dragging] .calmlens-dropzone__icon { transform: scale(1.1); }
+.calmlens-dropzone__text { display: grid; gap: 4px; }
+.calmlens-dropzone__title { font-weight: 500; margin: 0; }
+.calmlens-dropzone__hint { font-size: 0.875em; margin: 0; color: var(--calmlens-muted); }
+.calmlens-button, .calmlens-icon-button { margin: 0; width: auto; text-transform: none; letter-spacing: normal; }
+.calmlens-button {
+  font: inherit; font-weight: 500; font-size: 0.875em; padding: 7px 14px; border-radius: 8px; cursor: pointer;
+  border: 1px solid var(--calmlens-accent); background: var(--calmlens-accent); color: var(--calmlens-accent-text);
+  white-space: nowrap; transition: background-color 150ms, border-color 150ms;
+}
+.calmlens-button:focus-visible, .calmlens-icon-button:focus-visible {
+  outline: var(--calmlens-focus-width) solid var(--calmlens-focus-ring); outline-offset: var(--calmlens-focus-offset);
+}
+.calmlens-button:hover:not(:disabled) { background: var(--calmlens-accent); filter: brightness(1.08); }
+.calmlens-button[data-variant="outline"] { background: none; color: inherit; border-color: var(--calmlens-border); }
+.calmlens-button[data-variant="outline"]:hover:not(:disabled) {
+  filter: none; background: color-mix(in srgb, var(--calmlens-accent) 8%, transparent); border-color: var(--calmlens-accent);
+}
+.calmlens-button[data-size="small"] { padding: 4px 10px; }
+.calmlens-button:disabled {
+  cursor: not-allowed; border-style: dashed; background: none; color: var(--calmlens-muted); border-color: var(--calmlens-border);
+}
+.calmlens-uploads { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
+.calmlens-upload {
+  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px;
+  border: 1px solid var(--calmlens-border); border-radius: var(--calmlens-radius); background: var(--calmlens-background);
+}
+/* A finished file's outcome is a dot in its status colour before the message. */
+.calmlens-upload[data-outcome] .calmlens-upload__message::before {
+  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
+  vertical-align: 0.05em;
+}
+.calmlens-upload[data-outcome="accepted"] .calmlens-upload__message::before { background: var(--calmlens-success); }
+.calmlens-upload[data-outcome="restricted"] .calmlens-upload__message::before { background: var(--calmlens-warning); }
+.calmlens-upload[data-outcome="rejected"] .calmlens-upload__message::before { background: var(--calmlens-danger); }
+.calmlens-upload__thumb {
+  width: 40px; height: 40px; border-radius: 8px; object-fit: cover; display: grid; place-items: center;
+  background: var(--calmlens-surface); border: 1px solid var(--calmlens-border);
+  font-size: 0.6875em; font-weight: 700; text-transform: uppercase; overflow: hidden;
+}
+.calmlens-upload__thumb[data-kind="file"] { background: none; border: none; }
+.calmlens-upload[data-outcome="rejected"] img.calmlens-upload__thumb { filter: blur(6px); }
+.calmlens-upload__body { min-width: 0; display: grid; gap: 4px; }
+.calmlens-upload__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.calmlens-upload__size { font-size: 0.875em; color: var(--calmlens-muted); }
+.calmlens-upload__message { font-size: 0.875em; margin: 0; }
+.calmlens-progress {
+  height: 4px; border-radius: 2px; overflow: hidden; background: var(--calmlens-border); position: relative;
+}
+.calmlens-progress__bar {
+  position: absolute; inset: 0 auto 0 0; background: var(--calmlens-accent); border-radius: inherit;
+  transition: width 150ms;
+}
+.calmlens-progress:not([aria-valuenow]) .calmlens-progress__bar {
+  width: 35%; animation: calmlens-indeterminate 1.1s ease-in-out infinite;
+}
+@keyframes calmlens-indeterminate { from { left: -35%; } to { left: 100%; } }
+.calmlens-upload__actions { display: flex; gap: 8px; align-items: center; }
+.calmlens-icon-button {
+  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 8px; cursor: pointer;
+  border: 1px solid transparent; background: none; color: inherit;
+}
+.calmlens-icon-button:hover { background: color-mix(in srgb, var(--calmlens-accent) 8%, transparent); border-color: var(--calmlens-border); }
+@media (prefers-reduced-motion: reduce) {
+  .calmlens-progress__bar, .calmlens-dropzone, .calmlens-dropzone__icon, .calmlens-media__content { transition: none; }
+  .calmlens-progress:not([aria-valuenow]) .calmlens-progress__bar { animation: none; left: 0; width: 100%; }
+}
+
+.calmlens-media {
+  position: relative; display: block; overflow: hidden; margin: 0; border-radius: var(--calmlens-media-radius, 0);
+  background: var(--calmlens-surface);
+}
+.calmlens-media__placeholder, .calmlens-media__content {
+  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--calmlens-fit, cover);
+  object-position: var(--calmlens-position, center);
+}
+.calmlens-media:not([data-sized]) .calmlens-media__content { position: relative; height: auto; }
+.calmlens-media:not([data-sized])[data-kind="gated"], .calmlens-media:not([data-sized])[data-kind="unavailable"],
+.calmlens-media:not([data-sized])[data-state="error"] { min-height: 160px; }
+.calmlens-media__placeholder { transform: scale(1.1); filter: blur(12px); }
+.calmlens-media__content { opacity: 0; transition: opacity 250ms; }
+.calmlens-media[data-state="loaded"] .calmlens-media__content { opacity: 1; }
+.calmlens-media[data-kind="video"] .calmlens-media__content, .calmlens-media[data-kind="audio"] .calmlens-media__content { opacity: 1; }
+.calmlens-media[data-kind="audio"] { background: none; }
+.calmlens-media[data-kind="audio"] .calmlens-media__content { position: static; height: auto; }
+.calmlens-media__notice {
+  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px;
+  padding: 12px; text-align: center; color: #fff; background: rgba(0, 0, 0, 0.45);
+}
+.calmlens-media__notice p { margin: 0; display: flex; gap: 6px; align-items: center; }
+/* Thumbnails keep the notice's icon and leave its text to screen readers. */
+.calmlens-media[data-sized] { container-type: inline-size; }
+@container (max-width: 119px) {
+  .calmlens-media__label, .calmlens-media__notice > strong, .calmlens-media__notice > p:not(:has(svg)) {
+    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
+  }
+}
+.calmlens-media__notice strong { font-weight: 600; }
+.calmlens-media__notice .calmlens-button { margin-top: 4px; border-color: #fff; background: #fff; color: #111; }
+.calmlens-media[data-state="error"] .calmlens-media__notice, .calmlens-media[data-kind="unavailable"] .calmlens-media__notice {
+  color: inherit; background: var(--calmlens-surface);
+}
+`;
+/** Identifies the stylesheet, so React adds it once however many components render. */
+const CALMLENS_STYLES_ID = "calmlens-styles";
+export { getMediaState as _, getMediaAspectRatio as a, ICONS as b, describeUploadItem as c, formatMessage as d, getDropzoneHint as f, resolveMessages as g, getUploadItemOutcome as h, resolveTheme as i, describeUploader as l, getUploadItemMessage as m, CALMLENS_STYLES_ID as n, getMediaLoadKey as o, getMediaUnavailableMessage as p, CALMLENS_THEME as r, DEFAULT_MESSAGES as s, CALMLENS_STYLES as t, formatBytes as u, pickMediaSource as v, ICON_ATTRIBUTES as x, resolveMediaProps as y };