feat(ui): add transparent option for Alert component

pkgs/clan-app/ui/src/components/Alert/Alert.css

@@ -36,4 +36,8 @@ div.alert {
   &.success {
     @apply bg-semantic-success-1 border border-semantic-success-3 fg-semantic-success-3;
   }
+
+  &.transparent {
+    @apply bg-transparent border-none p-0;
+  }
 }

pkgs/clan-app/ui/src/components/Alert/Alert.stories.tsx

@@ -4,13 +4,19 @@ import { expect, fn } from "storybook/test";
 import { StoryContext } from "@kachurun/storybook-solid-vite";
 
 const AlertExamples = (props: AlertProps) => (
-  <div class="flex flex-row gap-4">
+  <div class="grid w-fit grid-cols-2 gap-8">
     <div class="w-72">
       <Alert {...props} />
     </div>
     <div class="w-72">
       <Alert {...props} size="s" />
     </div>
+    <div class="w-72">
+      <Alert {...props} transparent />
+    </div>
+    <div class="w-72">
+      <Alert {...props} size="s" transparent />
+    </div>
   </div>
 );
 

pkgs/clan-app/ui/src/components/Alert/Alert.tsx

@@ -7,17 +7,16 @@ import { Alert as KAlert } from "@kobalte/core/alert";
 import { Show } from "solid-js";
 
 export interface AlertProps {
+  icon?: IconVariant;
   type: "success" | "error" | "warning" | "info";
   size?: "default" | "s";
   title: string;
-  description?: string;
-  icon?: IconVariant;
   onDismiss?: () => void;
+  transparent?: boolean;
+  description?: string;
 }
 
 export const Alert = (props: AlertProps) => {
-  console.log("on dismiss", !!props.onDismiss);
-
   const size = () => props.size || "default";
   const titleSize = () => (size() == "default" ? "default" : "xs");
   const bodySize = () => (size() == "default" ? "xs" : "xxs");
@@ -28,6 +27,7 @@ export const Alert = (props: AlertProps) => {
       class={cx("alert", props.type, {
         "has-icon": props.icon,
         "has-dismiss": props.onDismiss,
+        transparent: props.transparent,
       })}
     >
       {props.icon && (