remove card and add class props

packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte

@@ -3,6 +3,11 @@
 </script>
 
 <script>
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+
 	export let url = ''; // The URL to embed
 	export let title = ''; // A description or title for the embed
 	export let width = '100%'; // Width of the embed, defaults to full width
@@ -19,9 +24,12 @@
 </script>
 
 <div
-	class={`embed-wrapper relative overflow-hidden ${
-		border ? 'border border-gray-300 rounded-md shadow-sm' : ''
-	}`}
+	class={cn(
+		`embed-wrapper relative overflow-hidden ${
+			border ? 'border border-gray-300 rounded-md shadow-sm' : ''
+		}`,
+		className
+	)}
 	style={`width: ${tailwindWidth}; height: ${tailwindHeight};`}
 >
 	<iframe

packages/ui/core-components/src/lib/unsorted/ui/Image.svelte

@@ -4,23 +4,34 @@
 
 <script>
 	import { processDimension } from '../../utils.js';
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
 
 	export let url = ''; // URL of the image
 	export let description = ''; // Description for accessibility
 	export let width = ''; // Width of the image
 	export let height = ''; // Height of the image
+	export let align = 'center'; // center, left, right
+	const alignMap = {
+		center: 'center',
+		left: 'start',
+		right: 'end'
+	};
+	$: align = alignMap[align] || alignMap['center'];
 
 	// Processed dimensions
 	$: processedWidth = processDimension(width);
 	$: processedHeight = processDimension(height);
 </script>
 
-<div class="flex flex-col items-center text-center">
+<div class="flex flex-col items-{align} text-center">
 	<img
 		src={url}
 		alt={description}
 		style={`width: ${processedWidth}; height: ${processedHeight};`}
-		class="max-w-full h-auto rounded"
+		class={cn('max-w-full h-auto rounded', className)}
 		loading="lazy"
 	/>
 </div>

packages/ui/core-components/src/lib/unsorted/ui/Link.svelte

@@ -5,11 +5,13 @@
 <script>
 	import { toBoolean } from '../../utils.js';
 
+	let className = undefined;
+	export { className as class };
+
 	export let url = '#'; // Destination URL
 	export let label = 'Click here'; // Link text
 	export let newTab = false; // Open in a new tab
 	newTab = toBoolean(newTab);
-	export let className = ''; // Additional classes
 </script>
 
 <a

packages/ui/core-components/src/lib/unsorted/ui/Footnote.stories.svelte → packages/ui/core-components/src/lib/unsorted/ui/Note.stories.svelte

@@ -1,10 +1,10 @@
 <script context="module">
-	import Footnote from './Footnote.svelte';
+	import Note from './Note.svelte';
 
 	/** @type {import("@storybook/svelte").Meta}*/
 	export const meta = {
-		title: 'UI/Footnote',
-		component: Footnote
+		title: 'UI/Note',
+		component: Note
 	};
 </script>
 
@@ -18,18 +18,18 @@
 
 <Story name="All" args={{ x: 'x', y: 'y', series: 'series' }} let:args>
 	{@const data = Query.create(`select * from numeric_series`, query)}
-	<Footnote id="1">
+	<Note>
 		The data for this report was sourced from the World Bank World Development Indicators dataset.
-	</Footnote>
-	<Footnote id="2">
+	</Note>
+	<Note>
 		The data for this report was sourced from the World Bank World Development Indicators dataset.
-	</Footnote>
-	<Footnote id="3">
+	</Note>
+	<Note>
 		The data for this report was sourced from the World Bank World Development Indicators dataset.
-	</Footnote>
+	</Note>
 	<BarChart {data} {...args} />
-	<Footnote id="1">
+	<Note>
 		The data for this report was sourced from the World Bank World Development Indicators dataset.
-	</Footnote>
+	</Note>
 	<BarChart {data} {...args} />
 </Story>

packages/ui/core-components/src/lib/unsorted/ui/Note.svelte

@@ -0,0 +1,14 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<div class={cn('block text-xs text-gray-500 leading-none mt-0 pb-3', className)}>
+	<slot />
+</div>

packages/ui/core-components/src/lib/unsorted/ui/index.js

@@ -1,13 +1,12 @@
 export { default as LinkButton } from './LinkButton.svelte';
 export { default as BigLink } from './BigLink.svelte';
-export { default as Card } from './Card.svelte';
 export { default as ChevronToggle } from './ChevronToggle.svelte';
 export { default as CodeBlock } from './CodeBlock.svelte';
 export { default as Details } from './Details.svelte';
 export { default as DownloadData } from './DownloadData.svelte';
 export { default as EmailSignup } from './EmailSignup.svelte';
 export { default as Embed } from './Embed.svelte';
-export { default as Footnote } from './Footnote.svelte';
+export { default as Note } from './Note.svelte';
 export { default as Group } from './Group.svelte';
 export { default as Image } from './Image.svelte';
 export { default as LastRefreshed } from './LastRefreshed.svelte';