@refrakt-md/lumina 0.4.0 → 0.5.1

package/sveltekit/components/Diagram.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import type { Snippet } from 'svelte';
-	import type { SerializedTag } from '@refrakt-md/svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	const language = tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'language')?.attributes?.content || 'mermaid';
-	const title = tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'title')?.attributes?.content || '';
-	const source = tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.['data-name'] === 'source')?.attributes?.content || '';
-
-	let container: HTMLDivElement;
-	let rendered = $state(false);
-
-	onMount(async () => {
-		if (language === 'mermaid' && source) {
-			try {
-				const cdn = 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
-				const mermaid = (await import(/* @vite-ignore */ cdn)).default;
-				mermaid.initialize({ startOnLoad: false, theme: 'default' });
-				const { svg } = await mermaid.render('mermaid-' + Math.random().toString(36).slice(2), source);
-				container.innerHTML = svg;
-				rendered = true;
-			} catch (e) {
-				container.textContent = source;
-			}
-		} else if (language === 'ascii' && source) {
-			container.textContent = source;
-			container.style.fontFamily = 'var(--rf-font-mono)';
-			container.style.whiteSpace = 'pre';
-			rendered = true;
-		}
-	});
-</script>
-
-<figure class="rf-diagram" typeof="Diagram">
-	{#if title}
-		<figcaption class="rf-diagram__title">{title}</figcaption>
-	{/if}
-	<div class="rf-diagram__container" bind:this={container}>
-		{#if !rendered}
-			<pre class="rf-diagram__source"><code>{source}</code></pre>
-		{/if}
-	</div>
-</figure>

package/sveltekit/components/Embed.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-	import type { SerializedTag } from '@refrakt-md/svelte';
-	import type { Snippet } from 'svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	const getMeta = (prop: string) => tag.children
-		.find((c: any) => c?.name === 'meta' && c?.attributes?.property === prop)
-		?.attributes?.content;
-
-	const embedUrl = getMeta('embedUrl') || getMeta('url') || '';
-	const title = getMeta('title') || 'Embedded content';
-	const aspect = getMeta('aspect') || '16:9';
-	const provider = getMeta('provider') || '';
-
-	const [w, h] = aspect.split(':').map(Number);
-	const paddingPercent = h && w ? (h / w) * 100 : 56.25;
-</script>
-
-<figure class="rf-embed" data-provider={provider || undefined}>
-	{#if embedUrl}
-		<div class="rf-embed__wrapper" style="padding-bottom: {paddingPercent}%">
-			<iframe
-				src={embedUrl}
-				{title}
-				frameborder="0"
-				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-				allowfullscreen
-				loading="lazy"
-			></iframe>
-		</div>
-	{/if}
-	<div class="rf-embed__fallback">
-		{@render children()}
-	</div>
-</figure>

package/sveltekit/components/Form.svelte

@@ -1,194 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { SerializedTag } from '@refrakt-md/svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	const isForm = tag.attributes.typeof === 'Form';
-
-	// Form-level properties
-	const action = isForm
-		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'action')?.attributes?.content || ''
-		: '';
-	const method = isForm
-		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'method')?.attributes?.content || 'POST'
-		: 'POST';
-	const success = isForm
-		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'success')?.attributes?.content || ''
-		: '';
-	const errorMsg = isForm
-		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'error')?.attributes?.content || ''
-		: '';
-	const formStyle = isForm
-		? tag.attributes['data-style'] || 'stacked'
-		: 'stacked';
-	const honeypot = isForm
-		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'honeypot')?.attributes?.content !== 'false'
-		: true;
-
-	// FormField properties
-	const fieldName = !isForm
-		? tag.children.find((c: any) => c?.name === 'span' && c?.attributes?.property === 'name')?.children?.[0] || ''
-		: '';
-	const fieldType = !isForm
-		? tag.attributes['data-field-type'] || 'text'
-		: '';
-	const required = !isForm
-		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'required')?.attributes?.content === 'true'
-		: false;
-	const placeholder = !isForm
-		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'placeholder')?.attributes?.content || ''
-		: '';
-	const options = !isForm
-		? (tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'options')?.attributes?.content || '')
-			.split(',')
-			.map((o: string) => o.trim())
-			.filter(Boolean)
-		: [];
-
-	const fieldId = !isForm ? `field-${fieldName.toLowerCase().replace(/\s+/g, '-')}` : '';
-
-	// Form submission state
-	let status = $state<'idle' | 'submitting' | 'success' | 'error'>('idle');
-	let statusMessage = $state('');
-
-	async function handleSubmit(e: SubmitEvent) {
-		e.preventDefault();
-		if (!action) return;
-
-		status = 'submitting';
-		const formData = new FormData(e.target as HTMLFormElement);
-
-		try {
-			const response = await fetch(action, {
-				method: method,
-				body: formData,
-				headers: { 'Accept': 'application/json' },
-			});
-
-			if (response.ok) {
-				status = 'success';
-				statusMessage = success || 'Form submitted successfully.';
-				(e.target as HTMLFormElement).reset();
-			} else {
-				status = 'error';
-				statusMessage = errorMsg || 'Something went wrong. Please try again.';
-			}
-		} catch {
-			status = 'error';
-			statusMessage = errorMsg || 'Something went wrong. Please try again.';
-		}
-	}
-</script>
-
-{#if isForm}
-	<form
-		class="rf-form {formStyle !== 'stacked' ? `rf-form--${formStyle}` : ''}"
-		action={action}
-		method={method}
-		onsubmit={handleSubmit}
-	>
-		{#if honeypot}
-			<div class="rf-form__hp" aria-hidden="true">
-				<input type="text" name="_gotcha" autocomplete="off" tabindex={-1} />
-			</div>
-		{/if}
-		{@render children()}
-		{#if status === 'submitting'}
-			<div class="rf-form__status rf-form__status--submitting" role="status">Submitting...</div>
-		{:else if status === 'success'}
-			<div class="rf-form__status rf-form__status--success" role="alert">{statusMessage}</div>
-		{:else if status === 'error'}
-			<div class="rf-form__status rf-form__status--error" role="alert">{statusMessage}</div>
-		{/if}
-	</form>
-{:else if fieldType === 'group'}
-	<fieldset class="rf-form-fieldset">
-		<legend>{fieldName}</legend>
-		{@render children()}
-	</fieldset>
-{:else if fieldType === 'submit'}
-	<button type="submit" class="rf-form__submit">{fieldName}</button>
-{:else if fieldType === 'separator'}
-	<hr class="rf-form__separator" />
-{:else if fieldType === 'help'}
-	<p class="rf-form__help">{fieldName}</p>
-{:else if fieldType === 'description'}
-	<p class="rf-form__text">{fieldName}</p>
-{:else if fieldType === 'textarea'}
-	<div class="rf-form-field">
-		<label for={fieldId}>
-			{fieldName}
-			{#if required}<span class="rf-form-field__required" aria-hidden="true">*</span>{/if}
-		</label>
-		<textarea
-			id={fieldId}
-			name={fieldId}
-			placeholder={placeholder}
-			required={required}
-			rows={4}
-		></textarea>
-	</div>
-{:else if fieldType === 'select'}
-	<div class="rf-form-field">
-		<label for={fieldId}>
-			{fieldName}
-			{#if required}<span class="rf-form-field__required" aria-hidden="true">*</span>{/if}
-		</label>
-		<select id={fieldId} name={fieldId} required={required}>
-			<option value="" disabled selected>Select an option</option>
-			{#each options as option}
-				<option value={option}>{option}</option>
-			{/each}
-		</select>
-	</div>
-{:else if fieldType === 'radio'}
-	<fieldset class="rf-form-field rf-form-choice-group">
-		<legend>
-			{fieldName}
-			{#if required}<span class="rf-form-field__required" aria-hidden="true">*</span>{/if}
-		</legend>
-		{#each options as option, i}
-			<label class="rf-form-choice">
-				<input
-					type="radio"
-					name={fieldId}
-					value={option}
-					required={required && i === 0}
-				/>
-				<span>{option}</span>
-			</label>
-		{/each}
-	</fieldset>
-{:else if fieldType === 'checkbox'}
-	<fieldset class="rf-form-field rf-form-choice-group">
-		<legend>
-			{fieldName}
-			{#if required}<span class="rf-form-field__required" aria-hidden="true">*</span>{/if}
-		</legend>
-		{#each options as option}
-			<label class="rf-form-choice">
-				<input
-					type="checkbox"
-					name={fieldId}
-					value={option}
-				/>
-				<span>{option}</span>
-			</label>
-		{/each}
-	</fieldset>
-{:else}
-	<div class="rf-form-field">
-		<label for={fieldId}>
-			{fieldName}
-			{#if required}<span class="rf-form-field__required" aria-hidden="true">*</span>{/if}
-		</label>
-		<input
-			type={fieldType}
-			id={fieldId}
-			name={fieldId}
-			placeholder={placeholder}
-			required={required}
-		/>
-	</div>
-{/if}

package/sveltekit/components/Grid.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-	import type { SerializedTag, RendererNode } from '@refrakt-md/svelte';
-	import { Renderer } from '@refrakt-md/svelte';
-	import type { Snippet } from 'svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	function isTag(n: RendererNode): n is SerializedTag {
-		return n !== null && typeof n === 'object' && !Array.isArray(n) && (n as any).$$mdtype === 'Tag';
-	}
-
-	const layoutDiv = $derived(tag.children.find(
-		(c): c is SerializedTag => isTag(c) && c.attributes?.['data-layout'] === 'grid'
-	));
-	const columns = $derived(layoutDiv?.attributes?.['data-columns']);
-	const flow = $derived(layoutDiv?.attributes?.['data-flow']);
-	const gridItems = $derived(layoutDiv?.children?.filter((c): c is SerializedTag => isTag(c)) ?? []);
-</script>
-
-{#if gridItems.length > 0}
-	<div
-		class="rf-grid"
-		style:grid-template-columns={columns ? `repeat(${columns}, 1fr)` : undefined}
-		style:grid-auto-flow={flow || undefined}
-	>
-		{#each gridItems as item}
-			{@const colspan = Number(item.attributes?.['data-colspan']) || 1}
-			{@const rowspan = Number(item.attributes?.['data-rowspan']) || 1}
-			<div
-				class="rf-grid__item"
-				style:grid-column={colspan > 1 ? `span ${colspan}` : undefined}
-				style:grid-row={rowspan > 1 ? `span ${rowspan}` : undefined}
-			>
-				<Renderer node={item.children} />
-			</div>
-		{/each}
-	</div>
-{:else}
-	<div class="rf-grid">
-		{@render children()}
-	</div>
-{/if}

package/sveltekit/components/Nav.svelte

@@ -1,62 +0,0 @@
-<script lang="ts">
-	import type { SerializedTag, RendererNode } from '@refrakt-md/svelte';
-	import type { Snippet } from 'svelte';
-	import { getContext } from 'svelte';
-	import { page } from '$app/state';
-
-	interface PageEntry {
-		url: string;
-		title: string;
-		draft: boolean;
-	}
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-	const typeName = $derived(tag.attributes.typeof);
-	const pages = getContext<PageEntry[]>('pages');
-
-	function getSlug(tag: SerializedTag): string | null {
-		for (const child of tag.children) {
-			if (isTag(child) && child.name === 'span' && child.attributes.property === 'slug') {
-				return getTextContent(child);
-			}
-		}
-		return null;
-	}
-
-	function isTag(node: RendererNode): node is SerializedTag {
-		return node !== null && typeof node === 'object' && !Array.isArray(node) && (node as any).$$mdtype === 'Tag';
-	}
-
-	function getTextContent(node: RendererNode): string {
-		if (typeof node === 'string') return node;
-		if (typeof node === 'number') return String(node);
-		if (isTag(node)) return node.children.map(getTextContent).join('');
-		if (Array.isArray(node)) return node.map(getTextContent).join('');
-		return '';
-	}
-
-	function resolvePage(slug: string): PageEntry | undefined {
-		return pages?.find(p => p.url.endsWith('/' + slug) || p.url === '/' + slug);
-	}
-
-	const slug = $derived(typeName === 'NavItem' ? getSlug(tag) : null);
-	const linkedPage = $derived(slug ? resolvePage(slug) : null);
-</script>
-
-{#if typeName === 'Nav'}
-	<nav class="rf-nav">
-		{@render children()}
-	</nav>
-{:else if typeName === 'NavGroup'}
-	<div class="rf-nav-group">
-		{@render children()}
-	</div>
-{:else if typeName === 'NavItem' && linkedPage}
-	<a href={linkedPage.url} class="rf-nav-item__link" class:rf-nav-item__link--active={page.url.pathname === linkedPage.url}>
-		{linkedPage.title}
-	</a>
-{:else}
-	<div class="rf-nav-item">
-		{@render children()}
-	</div>
-{/if}

package/sveltekit/components/Pricing.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import type { SerializedTag } from '@refrakt-md/svelte';
-	import type { Snippet } from 'svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	const typeName = tag.attributes.typeof;
-	const isTier = typeName === 'Tier' || typeName === 'FeaturedTier';
-	const isFeatured = typeName === 'FeaturedTier';
-</script>
-
-{#if typeName === 'Pricing'}
-	<section class="rf-pricing">
-		{@render children()}
-	</section>
-{:else if isTier}
-	<li class="rf-tier {isFeatured ? 'rf-tier--featured' : ''}">
-		{@render children()}
-	</li>
-{/if}

package/sveltekit/components/Reveal.svelte

@@ -1,62 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { SerializedTag } from '@refrakt-md/svelte';
-	import { Renderer } from '@refrakt-md/svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	const isGroup = tag.attributes.typeof === 'Reveal';
-
-	const stepName = !isGroup
-		? tag.children.find((c: any) => c?.name === 'span' && c?.attributes?.property === 'name')?.children?.[0] || ''
-		: '';
-
-	const mode = isGroup
-		? tag.children.find((c: any) => c?.name === 'meta')?.attributes?.content || 'click'
-		: 'click';
-
-	const stepsDiv = isGroup
-		? tag.children.find((c: any) => c?.name === 'div' && c?.attributes?.['data-name'] === 'steps')
-		: null;
-
-	const totalSteps = isGroup && stepsDiv
-		? (stepsDiv as any).children?.filter((c: any) => c?.attributes?.typeof === 'RevealStep')?.length ?? 0
-		: 0;
-
-	let visibleCount = $state(1);
-</script>
-
-{#if isGroup}
-	<section class="rf-reveal">
-		{#if stepsDiv}
-			<div class="rf-reveal__steps">
-				{#each (stepsDiv as any).children?.filter((c: any) => c?.attributes?.typeof === 'RevealStep') ?? [] as step, i}
-					<div class="rf-reveal-step {i < visibleCount ? 'rf-reveal-step--visible' : 'rf-reveal-step--hidden'}">
-						<Renderer node={step} />
-					</div>
-				{/each}
-			</div>
-		{:else}
-			{@render children()}
-		{/if}
-		{#if mode === 'click' && visibleCount < totalSteps}
-			<button class="rf-reveal__next" onclick={() => visibleCount++}>
-				Continue
-			</button>
-		{/if}
-		{#if mode === 'click' && visibleCount >= totalSteps && totalSteps > 1}
-			<button class="rf-reveal__reset" onclick={() => visibleCount = 1}>
-				Start over
-			</button>
-		{/if}
-	</section>
-{:else}
-	<div class="rf-reveal-step__content">
-		{#if stepName}
-			<h3 class="rf-reveal-step__title">{stepName}</h3>
-		{/if}
-		<div class="rf-reveal-step__body">
-			{@render children()}
-		</div>
-	</div>
-{/if}

package/sveltekit/components/Storyboard.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { SerializedTag, RendererNode } from '@refrakt-md/svelte';
-	import { Renderer } from '@refrakt-md/svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	function isTag(n: RendererNode): n is SerializedTag {
-		return n !== null && typeof n === 'object' && !Array.isArray(n) && (n as any).$$mdtype === 'Tag';
-	}
-
-	const isGroup = $derived(tag.attributes.typeof === 'Storyboard');
-
-	// Style modifier is consumed by engine; read from data attribute
-	const styleName = $derived(isGroup
-		? tag.attributes['data-style'] || 'clean'
-		: 'clean');
-	const columns = $derived(isGroup
-		? parseInt(tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'columns')?.attributes?.content || '3', 10)
-		: 3);
-
-	const panelsEl = $derived(isGroup
-		? tag.children.find((c): c is SerializedTag => isTag(c) && c.attributes?.['data-name'] === 'panels')
-		: undefined);
-</script>
-
-{#if isGroup}
-	<div class="rf-storyboard rf-storyboard--{styleName}" style="--sb-columns: {columns};">
-		<div class="rf-storyboard__panels">
-			{#if panelsEl}
-				<Renderer node={panelsEl.children} />
-			{/if}
-		</div>
-	</div>
-{:else}
-	<div class="rf-storyboard-panel">
-		<div class="rf-storyboard-panel__body">
-			{@render children()}
-		</div>
-	</div>
-{/if}

package/sveltekit/components/Tabs.svelte

@@ -1,75 +0,0 @@
-<script lang="ts">
-	import type { SerializedTag, RendererNode } from '@refrakt-md/svelte';
-	import { Renderer } from '@refrakt-md/svelte';
-	import type { Snippet } from 'svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	const typeName = $derived(tag.attributes.typeof);
-
-	function isTag(n: RendererNode): n is SerializedTag {
-		return n !== null && typeof n === 'object' && !Array.isArray(n) && (n as any).$$mdtype === 'Tag';
-	}
-
-	function getTextContent(node: RendererNode): string {
-		if (typeof node === 'string') return node;
-		if (typeof node === 'number') return String(node);
-		if (isTag(node)) return node.children.map(getTextContent).join('');
-		if (Array.isArray(node)) return node.map(getTextContent).join('');
-		return '';
-	}
-
-	// For TabGroup: parse the ul/li structure from the transform
-	const { tabs, panels } = $derived.by(() => {
-		const tabs: { name: string }[] = [];
-		const panels: { children: RendererNode[] }[] = [];
-		if (typeName === 'TabGroup') {
-			for (const child of tag.children) {
-				if (!isTag(child) || child.name !== 'ul') continue;
-				for (const item of child.children) {
-					if (!isTag(item)) continue;
-					if (item.attributes?.typeof === 'Tab') {
-						const nameNode = item.children.find(
-							(c): c is SerializedTag => isTag(c) && c.attributes?.property === 'name'
-						);
-						const name = nameNode ? getTextContent(nameNode) : getTextContent(item);
-						tabs.push({ name: name.trim() });
-					} else if (item.attributes?.typeof === 'TabPanel') {
-						panels.push({ children: item.children });
-					}
-				}
-			}
-		}
-		return { tabs, panels };
-	});
-
-	let activeIndex = $state(0);
-</script>
-
-{#if typeName === 'TabGroup' && tabs.length > 0}
-	<div class="rf-tabs">
-		<div class="rf-tabs__bar" role="tablist">
-			{#each tabs as tab, i}
-				<button
-					class="rf-tabs__button {i === activeIndex ? 'rf-tabs__button--active' : ''}"
-					role="tab"
-					aria-selected={i === activeIndex}
-					onclick={() => activeIndex = i}
-				>
-					{tab.name}
-				</button>
-			{/each}
-		</div>
-		<div class="rf-tabs__panels">
-			{#each panels as panel, i}
-				{#if i === activeIndex}
-					<div class="rf-tabs__panel" role="tabpanel">
-						<Renderer node={panel.children} />
-					</div>
-				{/if}
-			{/each}
-		</div>
-	</div>
-{:else}
-	{@render children()}
-{/if}

package/sveltekit/components/Testimonial.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-	import type { SerializedTag } from '@refrakt-md/svelte';
-	import type { Snippet } from 'svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	const rating = $derived(tag.children
-		.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'rating')
-		?.attributes?.content);
-
-	const hasRating = $derived(rating !== undefined && rating !== null);
-	const stars = $derived(hasRating ? Math.min(5, Math.max(0, Number(rating))) : 0);
-</script>
-
-<article class="rf-testimonial">
-	{#if hasRating}
-		<div class="rf-testimonial__rating" aria-label="{stars} out of 5 stars">
-			{#each Array(5) as _, i}
-				<span class="rf-testimonial__star {i < stars ? 'rf-testimonial__star--filled' : ''}">&#9733;</span>
-			{/each}
-		</div>
-	{/if}
-	<div class="rf-testimonial__content">
-		{@render children()}
-	</div>
-</article>

package/sveltekit/elements/Blockquote.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-	import type { SerializedTag } from '@refrakt-md/svelte';
-	import type { Snippet } from 'svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-</script>
-
-<blockquote class="themed-blockquote">
-	<svg class="quote-mark" width="24" height="24" viewBox="0 0 24 24" fill="none">
-		<path d="M10 8C10 5.79 8.21 4 6 4C3.79 4 2 5.79 2 8C2 10.21 3.79 12 6 12C6.67 12 7.31 11.83 7.88 11.54C7.63 14.08 5.55 16.09 3 16.34V18.36C6.68 18.09 9.64 15.13 9.93 11.45C9.98 10.99 10 10.5 10 10V8ZM22 8C22 5.79 20.21 4 18 4C15.79 4 14 5.79 14 8C14 10.21 15.79 12 18 12C18.67 12 19.31 11.83 19.88 11.54C19.63 14.08 17.55 16.09 15 16.34V18.36C18.68 18.09 21.64 15.13 21.93 11.45C21.98 10.99 22 10.5 22 10V8Z" fill="currentColor"/>
-	</svg>
-	{@render children()}
-</blockquote>
-
-<style>
-	.themed-blockquote {
-		position: relative;
-		border-left: 3px solid var(--color-primary);
-		margin: 1.5rem 0;
-		padding: 1rem 1.25rem 1rem 2.75rem;
-		color: var(--color-muted);
-		background: var(--color-surface);
-		border-radius: 0 var(--radius-md) var(--radius-md) 0;
-	}
-	.quote-mark {
-		position: absolute;
-		left: 0.75rem;
-		top: 1rem;
-		width: 18px;
-		height: 18px;
-		color: var(--color-primary);
-		opacity: 0.4;
-	}
-	.themed-blockquote :global(p:last-child) {
-		margin-bottom: 0;
-	}
-</style>