feat: box component

src/lib/components/box.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    export let radius: keyof typeof radiuses = 'small';
+    export let padding = 24;
+    let classes: string = '';
+    export { classes as class };
+
+    enum radiuses {
+        xsmall = '--border-radius-extra-large',
+        small = '--border-radius-small',
+        medium = '--border-radius-medium',
+        large = '--border-radius-large'
+    }
+</script>
+
+<div
+    class="box {classes}"
+    style:--box-border-radius={`var(${radiuses[radius]})`}
+    style:--box-padding={`${padding / 16}rem`}>
+    <slot />
+</div>

src/lib/pages/domains/wizard/retry.svelte

@@ -4,6 +4,7 @@
     import { domain } from './store';
     import CnameTable from './cnameTable.svelte';
     import { createEventDispatcher } from 'svelte';
+    import { Box } from '$lib/components';
 
     let retrying = false;
 
@@ -21,7 +22,7 @@
     }
 </script>
 
-<div class="box">
+<Box radius="small">
     <div class="u-flex u-gap-8 u-cross-center">
         <span
             class="icon-exclamation-circle"
@@ -46,4 +47,4 @@
     <div class="u-margin-block-start-24">
         <CnameTable />
     </div>
-</div>
+</Box>