#986. Bump unicorn-ui to v0.0.21. Update Props in references to UI co…

…mponents specifically change from className and wrapperClass to instead use class. Update imports and removed unused import.

package.json

@@ -21,7 +21,7 @@
 		]
 	},
 	"devDependencies": {
-		"@defense-unicorns/unicorn-ui": "0.0.18",
+		"@defense-unicorns/unicorn-ui": "^0.0.21",
 		"@fontsource/roboto": "4.5.8",
 		"@material/card": "14.0.0",
 		"@material/data-table": "14.0.0",

src/ui/lib/components/package-component-accordion.svelte

@@ -6,7 +6,7 @@
 
 	import type { ZarfComponent } from '$lib/api-types';
 	import { pkgComponentDeployStore } from '$lib/store';
-	import { Accordion, IconButton, Typography } from '@defense-unicorns/unicorn-ui';
+	import { Accordion, IconButton, Typography } from '@ui';
 
 	export let idx: number;
 	export let readOnly: boolean = true;
@@ -27,7 +27,7 @@
 	$: componentTitle = `${component.name} ${requiredText}`;
 </script>
 
-<Accordion id={`component-accordion-${idx}`} wrapperClass="package-component-accordion">
+<Accordion id={`component-accordion-${idx}`} class="package-component-accordion">
 	<div slot="headerContent" class="component-accordion-header">
 		<div style="flex: 1">
 			<Typography variant="subtitle2" element="div" class="component-title" title={componentTitle}>
@@ -51,7 +51,7 @@
 			<div style="gap: 5px;">
 				<IconButton
 					toggleable
-					className="deploy-component-toggle"
+					class="deploy-component-toggle"
 					iconColor="inherit"
 					iconContent="toggle_off"
 					toggledIconColor="primary"

src/ui/lib/components/package-details-card.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Divider from './divider.svelte';
 	import type { ZarfPackage } from '$lib/api-types';
-	import { Typography } from '@defense-unicorns/unicorn-ui';
+	import { Typography } from '@ui';
 	export let pkg: ZarfPackage;
 </script>
 

src/ui/routes/packages/+page.svelte

@@ -3,7 +3,7 @@
 	import Hero from '$lib/components/hero.svelte';
 	import PackageDetails from '$lib/components/package-details-card.svelte';
 	import Spinner from '$lib/components/spinner.svelte';
-	import { Button, ButtonIcon, Typography } from '@ui';
+	import { Button, Typography } from '@ui';
 	import Icon from '$lib/components/icon.svelte';
 </script>