@reshape-biotech/design-system 1.2.6 → 1.2.7

package/dist/components/status-badge/StatusBadge.svelte

@@ -1,144 +1,144 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	interface Props {
-		// we can add dynamic classes because they are safelisted in tailwind-safelist.txt
-		type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
-		size?: 'md' | 'sm';
-		content?: Snippet;
-		progress?: Snippet;
-		icon?: Snippet;
-		iconOnly?: boolean;
-	}
+  interface Props {
+    // we can add dynamic classes because they are safelisted in tailwind-safelist.txt
+    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
+    size?: 'md' | 'sm';
+    content?: Snippet;
+    progress?: Snippet;
+    icon?: Snippet;
+    iconOnly?: boolean;
+  }
 
-	let {
-		type = 'neutral',
-		size = 'md',
-		content,
-		progress,
-		icon,
-		iconOnly: propIconOnly = false
-	}: Props = $props();
+  let {
+    type = 'neutral',
+    size = 'md',
+    content,
+    progress,
+    icon,
+    iconOnly: propIconOnly = false,
+  }: Props = $props();
 
-	let iconOnly = $derived((content === undefined && progress === undefined) || propIconOnly);
+  let iconOnly = $derived((content === undefined && progress === undefined) || propIconOnly);
 </script>
 
 <div
-	class={`badge badge-${type} badge-${size}`}
-	class:badge-icon-only={iconOnly}
-	data-testid="status-badge"
+  class={`badge badge-${type} badge-${size}`}
+  class:badge-icon-only={iconOnly}
+  data-testid="status-badge"
 >
-	{#if icon}
-		<div class={`icon`}>
-			{@render icon?.()}
-		</div>
-	{/if}
-	<div class="gap-2">
-		{@render content?.()}
-		{@render progress?.()}
-	</div>
+  {#if icon}
+    <div class={`icon`}>
+      {@render icon?.()}
+    </div>
+  {/if}
+  <div class="gap-2">
+    {@render content?.()}
+    {@render progress?.()}
+  </div>
 </div>
 
 <style>
-	.badge {
+  .badge {
     gap: 0.5rem;
     border-style: none;
     --tw-text-opacity: 1;
     color: rgb(18 25 42 / var(--tw-text-opacity, 1))
 }
-	.badge-md {
+  .badge-md {
     height: 2rem;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     padding-left: 0.5rem;
     padding-right: 0.75rem
 }
-	.badge-md .icon {
+  .badge-md .icon {
     width: 1.25rem;
     height: 1.25rem
 }
 
-	.badge-sm {
+  .badge-sm {
     height: 1.5rem;
     gap: 0.25rem;
     padding-left: 0.25rem;
     padding-right: 0.5rem
 }
 
-	.badge-sm .icon {
+  .badge-sm .icon {
     width: 1rem;
     height: 1rem
 }
-	.badge-icon-only {
+  .badge-icon-only {
     width: 2rem;
     height: 2rem;
     gap: 0px;
     padding: 0px
 }
 
-	.badge-sm.badge-icon-only {
+  .badge-sm.badge-icon-only {
     width: 1.5rem;
     height: 1.5rem;
     padding: 0px
 }
 
-	.badge-neutral {
+  .badge-neutral {
     background-color: #12192a0A
 }
 
-	.badge-neutral:hover {
+  .badge-neutral:hover {
     background-color: #12192A1A
 }
 
-	.badge-neutral .icon {
+  .badge-neutral .icon {
     --tw-text-opacity: 1;
     color: rgb(136 140 148 / var(--tw-text-opacity, 1))
 }
 
-	.badge-success {
+  .badge-success {
     background-color: #0aad6e1A
 }
 
-	.badge-success:hover {
+  .badge-success:hover {
     background-color: #0aad6e40
 }
 
-	.badge-success .icon {
+  .badge-success .icon {
     --tw-text-opacity: 1;
     color: rgb(10 173 110 / var(--tw-text-opacity, 1))
 }
-	.badge-progress {
+  .badge-progress {
     background-color: #5750ee1A
 }
-	.badge-progress:hover {
+  .badge-progress:hover {
     background-color: #5750ee40
 }
-	.badge-progress .icon {
+  .badge-progress .icon {
     --tw-text-opacity: 1;
     color: rgb(71 65 193 / var(--tw-text-opacity, 1))
 }
-	.badge-warning {
+  .badge-warning {
     background-color: #f1b1231A
 }
-	.badge-warning:hover {
+  .badge-warning:hover {
     background-color: #f1b12340
 }
-	.badge-warning .icon {
+  .badge-warning .icon {
     --tw-text-opacity: 1;
     color: rgb(241 177 35 / var(--tw-text-opacity, 1))
 }
-	.badge-error {
+  .badge-error {
     background-color: #eb46471A
 }
-	.badge-error:hover {
+  .badge-error:hover {
     background-color: #eb464740
 }
-	.badge-error .icon {
+  .badge-error .icon {
     --tw-text-opacity: 1;
     color: rgb(235 70 71 / var(--tw-text-opacity, 1))
 }
 
-	:global(.badge > div) {
+  :global(.badge > div) {
     display: flex;
     height: 100%;
     flex-direction: row;