@ropav/styles 0.5.0 → 0.7.0

package/dist/components/alert-dialog/alert-dialog.styles.d.ts

@@ -1,175 +1,81 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const alertDialogVariants: import("tailwind-variants").TVReturnType<{
-    size: {
-        cover: {
-            dialog: string;
-        };
-        lg: {
-            dialog: string;
-        };
-        md: {
-            dialog: string;
-        };
-        sm: {
-            dialog: string;
-        };
-        xs: {
-            dialog: string;
-        };
-    };
-    status: {
-        accent: {
-            icon: string;
-        };
-        danger: {
-            icon: string;
-        };
-        default: {
-            icon: string;
-        };
-        success: {
-            icon: string;
-        };
-        warning: {
-            icon: string;
-        };
-    };
-    variant: {
-        blur: {
-            backdrop: string;
-        };
-        opaque: {
-            backdrop: string;
-        };
-        transparent: {
-            backdrop: string;
-        };
-    };
-}, {
-    backdrop: string;
-    body: string;
-    closeTrigger: string;
-    container: string;
-    dialog: string;
-    footer: string;
-    header: string;
-    heading: string;
-    icon: string;
-    trigger: string;
-}, undefined, {
-    size: {
-        cover: {
-            dialog: string;
-        };
-        lg: {
-            dialog: string;
-        };
-        md: {
-            dialog: string;
-        };
-        sm: {
-            dialog: string;
-        };
-        xs: {
-            dialog: string;
-        };
-    };
-    status: {
-        accent: {
-            icon: string;
-        };
-        danger: {
-            icon: string;
-        };
-        default: {
-            icon: string;
-        };
-        success: {
-            icon: string;
-        };
-        warning: {
-            icon: string;
-        };
-    };
-    variant: {
-        blur: {
-            backdrop: string;
-        };
-        opaque: {
-            backdrop: string;
-        };
-        transparent: {
-            backdrop: string;
-        };
-    };
-}, {
-    backdrop: string;
-    body: string;
-    closeTrigger: string;
-    container: string;
-    dialog: string;
-    footer: string;
-    header: string;
-    heading: string;
-    icon: string;
-    trigger: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    size: {
-        cover: {
-            dialog: string;
-        };
-        lg: {
-            dialog: string;
-        };
-        md: {
-            dialog: string;
-        };
-        sm: {
-            dialog: string;
-        };
-        xs: {
-            dialog: string;
-        };
-    };
-    status: {
-        accent: {
-            icon: string;
-        };
-        danger: {
-            icon: string;
-        };
-        default: {
-            icon: string;
-        };
-        success: {
-            icon: string;
-        };
-        warning: {
-            icon: string;
-        };
-    };
-    variant: {
-        blur: {
-            backdrop: string;
-        };
-        opaque: {
-            backdrop: string;
-        };
-        transparent: {
-            backdrop: string;
-        };
-    };
-}, {
-    backdrop: string;
-    body: string;
-    closeTrigger: string;
-    container: string;
-    dialog: string;
-    footer: string;
-    header: string;
-    heading: string;
-    icon: string;
-    trigger: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const alertDialogVariants: (props?: ({
+    class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+} & {
+    size?: "cover" | "lg" | "md" | "sm" | "xs" | undefined;
+    status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+    variant?: "blur" | "opaque" | "transparent" | undefined;
+}) | undefined) => {
+    backdrop: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        size?: "cover" | "lg" | "md" | "sm" | "xs" | undefined;
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | undefined) => string;
+    body: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        size?: "cover" | "lg" | "md" | "sm" | "xs" | undefined;
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | undefined) => string;
+    closeTrigger: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        size?: "cover" | "lg" | "md" | "sm" | "xs" | undefined;
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | undefined) => string;
+    container: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        size?: "cover" | "lg" | "md" | "sm" | "xs" | undefined;
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | undefined) => string;
+    dialog: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        size?: "cover" | "lg" | "md" | "sm" | "xs" | undefined;
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | undefined) => string;
+    footer: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        size?: "cover" | "lg" | "md" | "sm" | "xs" | undefined;
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | undefined) => string;
+    header: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        size?: "cover" | "lg" | "md" | "sm" | "xs" | undefined;
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | undefined) => string;
+    heading: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        size?: "cover" | "lg" | "md" | "sm" | "xs" | undefined;
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | undefined) => string;
+    icon: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        size?: "cover" | "lg" | "md" | "sm" | "xs" | undefined;
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | undefined) => string;
+    trigger: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        size?: "cover" | "lg" | "md" | "sm" | "xs" | undefined;
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        variant?: "blur" | "opaque" | "transparent" | undefined;
+    }) | undefined) => string;
+};
 export type AlertDialogVariants = VariantProps<typeof alertDialogVariants>;
 //# sourceMappingURL=alert-dialog.styles.d.ts.map

package/dist/components/alert-dialog/alert-dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/alert-dialog/alert-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,mBAAmB;;QAoB1B,KAAK;YACH,MAAM;;QAER,EAAE;YACA,MAAM;;QAER,EAAE;YACA,MAAM;;QAER,EAAE;YACA,MAAM;;QAER,EAAE;YACA,MAAM;;;;QAIR,MAAM;YACJ,IAAI;;QAEN,MAAM;YACJ,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;;;QAIN,IAAI;YACF,QAAQ;;QAEV,MAAM;YACJ,QAAQ;;QAEV,WAAW;YACT,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAId,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"alert-dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/alert-dialog/alert-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiE9B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/alert-dialog/alert-dialog.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/alert-dialog/alert-dialog.styles.ts
 const alertDialogVariants = tv({
 	defaultVariants: {
@@ -7,36 +7,36 @@ const alertDialogVariants = tv({
 		variant: "opaque"
 	},
 	slots: {
-		backdrop: "alert-dialog__backdrop",
-		body: "alert-dialog__body",
-		closeTrigger: "alert-dialog__close-trigger",
-		container: "alert-dialog__container",
-		dialog: "alert-dialog__dialog",
-		footer: "alert-dialog__footer",
-		header: "alert-dialog__header",
-		heading: "alert-dialog__heading",
-		icon: "alert-dialog__icon",
-		trigger: "alert-dialog__trigger"
+		backdrop: "rp-alert-dialog__backdrop",
+		body: "rp-alert-dialog__body",
+		closeTrigger: "rp-alert-dialog__close-trigger",
+		container: "rp-alert-dialog__container",
+		dialog: "rp-alert-dialog__dialog",
+		footer: "rp-alert-dialog__footer",
+		header: "rp-alert-dialog__header",
+		heading: "rp-alert-dialog__heading",
+		icon: "rp-alert-dialog__icon",
+		trigger: "rp-alert-dialog__trigger"
 	},
 	variants: {
 		size: {
-			cover: { dialog: "alert-dialog__dialog--cover" },
-			lg: { dialog: "alert-dialog__dialog--lg" },
-			md: { dialog: "alert-dialog__dialog--md" },
-			sm: { dialog: "alert-dialog__dialog--sm" },
-			xs: { dialog: "alert-dialog__dialog--xs" }
+			cover: { dialog: "rp-alert-dialog__dialog--cover" },
+			lg: { dialog: "rp-alert-dialog__dialog--lg" },
+			md: { dialog: "rp-alert-dialog__dialog--md" },
+			sm: { dialog: "rp-alert-dialog__dialog--sm" },
+			xs: { dialog: "rp-alert-dialog__dialog--xs" }
 		},
 		status: {
-			accent: { icon: "alert-dialog__icon--accent" },
-			danger: { icon: "alert-dialog__icon--danger" },
-			default: { icon: "alert-dialog__icon--default" },
-			success: { icon: "alert-dialog__icon--success" },
-			warning: { icon: "alert-dialog__icon--warning" }
+			accent: { icon: "rp-alert-dialog__icon--accent" },
+			danger: { icon: "rp-alert-dialog__icon--danger" },
+			default: { icon: "rp-alert-dialog__icon--default" },
+			success: { icon: "rp-alert-dialog__icon--success" },
+			warning: { icon: "rp-alert-dialog__icon--warning" }
 		},
 		variant: {
-			blur: { backdrop: "alert-dialog__backdrop--blur" },
-			opaque: { backdrop: "alert-dialog__backdrop--opaque" },
-			transparent: { backdrop: "alert-dialog__backdrop--transparent" }
+			blur: { backdrop: "rp-alert-dialog__backdrop--blur" },
+			opaque: { backdrop: "rp-alert-dialog__backdrop--opaque" },
+			transparent: { backdrop: "rp-alert-dialog__backdrop--transparent" }
 		}
 	}
 });

package/dist/components/alert-dialog.css

@@ -6,14 +6,10 @@
 /**
  * Element: trigger - the element that opens the modal
  */
-.alert-dialog__trigger {
+.rp-alert-dialog__trigger {
   @apply inline-block;
   @apply cursor-(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out-quart),
     background-color 150ms var(--ease-smooth),
@@ -42,7 +38,7 @@
 /**
  * Element: backdrop - the overlay behind the dialog
  */
-.alert-dialog__backdrop {
+.rp-alert-dialog__backdrop {
   @apply fixed inset-0 z-50;
   @apply flex flex-row items-center justify-center;
   @apply h-(--visual-viewport-height) w-full;
@@ -57,10 +53,6 @@
     @apply animate-out duration-100 ease-out fade-out-0;
   }
 
-  /**
-   * Reduce Animation
-   * CRITICAL: motion-reduce must be AFTER animate for correct override specificity
-   */
   &[data-exiting="true"],
   &[data-entering="true"] {
     @apply will-change-[opacity];
@@ -71,28 +63,28 @@
 /**
  * Modifier: backdrop--transparent
  */
-.alert-dialog__backdrop--transparent {
+.rp-alert-dialog__backdrop--transparent {
   @apply bg-transparent;
 }
 
 /**
  * Modifier: backdrop--opaque
  */
-.alert-dialog__backdrop--opaque {
+.rp-alert-dialog__backdrop--opaque {
   @apply bg-backdrop;
 }
 
 /**
  * Modifier: backdrop--blur
  */
-.alert-dialog__backdrop--blur {
+.rp-alert-dialog__backdrop--blur {
   @apply bg-backdrop backdrop-blur-md;
 }
 
 /**
  * Element: container - the positioning wrapper for the modal
  */
-.alert-dialog__container {
+.rp-alert-dialog__container {
   @apply flex flex-col items-center;
   @apply h-(--visual-viewport-height) w-full min-w-0 flex-1;
   @apply p-4;
@@ -126,10 +118,6 @@
     @apply animate-out duration-100 ease-out-quad fade-out-0 zoom-out-95;
   }
 
-  /**
-   * Reduce Animation
-   * CRITICAL: motion-reduce must be AFTER animate for correct override specificity
-   */
   &[data-exiting="true"],
   &[data-entering="true"] {
     @apply will-change-[opacity,transform];
@@ -140,7 +128,7 @@
 /**
  * Element: dialog - the content container for the modal
  */
-.alert-dialog__dialog {
+.rp-alert-dialog__dialog {
   @apply relative;
   @apply flex min-h-0 w-full flex-col;
   @apply max-h-full;
@@ -171,47 +159,47 @@
 /**
  * Modifier: dialog--xs
  */
-.alert-dialog__dialog--xs {
+.rp-alert-dialog__dialog--xs {
   @apply max-w-xs;
 }
 
 /**
  * Modifier: dialog--sm
  */
-.alert-dialog__dialog--sm {
+.rp-alert-dialog__dialog--sm {
   @apply max-w-sm;
 }
 
 /**
  * Modifier: dialog--md
  */
-.alert-dialog__dialog--md {
+.rp-alert-dialog__dialog--md {
   @apply max-w-md;
 }
 
 /**
  * Modifier: dialog--lg
  */
-.alert-dialog__dialog--lg {
+.rp-alert-dialog__dialog--lg {
   @apply max-w-lg;
 }
 
 /**
  * Modifier: dialog--cover
  */
-.alert-dialog__dialog--cover {
+.rp-alert-dialog__dialog--cover {
   @apply h-full min-h-full w-full;
 }
 
 /**
  * Element: header - the top section with the title
  */
-.alert-dialog__header {
+.rp-alert-dialog__header {
   @apply flex flex-col gap-3;
   @apply mb-0;
 
   /* When header contains icon, use flex-col layout with gap */
-  & > .modal__icon {
+  & > .rp-modal__icon {
     @apply mb-0;
   }
 }
@@ -219,7 +207,7 @@
 /**
  * Element: heading - the main title text
  */
-.alert-dialog__heading {
+.rp-alert-dialog__heading {
   @apply align-middle;
   @apply text-base font-medium text-foreground;
 }
@@ -227,7 +215,7 @@
 /**
  * Element: icon - the optional icon indicator
  */
-.alert-dialog__icon {
+.rp-alert-dialog__icon {
   @apply flex items-center justify-center;
   @apply size-10 shrink-0;
   @apply rounded-3xl select-none;
@@ -240,42 +228,42 @@
 /**
  * Modifier: icon--default
  */
-.alert-dialog__icon--default {
+.rp-alert-dialog__icon--default {
   @apply bg-default text-foreground;
 }
 
 /**
  * Modifier: icon--accent
  */
-.alert-dialog__icon--accent {
+.rp-alert-dialog__icon--accent {
   @apply bg-accent-soft text-accent-soft-foreground;
 }
 
 /**
  * Modifier: icon--success
  */
-.alert-dialog__icon--success {
+.rp-alert-dialog__icon--success {
   @apply bg-success-soft text-success-soft-foreground;
 }
 
 /**
  * Modifier: icon--warning
  */
-.alert-dialog__icon--warning {
+.rp-alert-dialog__icon--warning {
   @apply bg-warning-soft text-warning-soft-foreground;
 }
 
 /**
  * Modifier: icon--danger
  */
-.alert-dialog__icon--danger {
+.rp-alert-dialog__icon--danger {
   @apply bg-danger-soft text-danger-soft-foreground;
 }
 
 /**
  * Element: body - the main content area
  */
-.alert-dialog__body {
+.rp-alert-dialog__body {
   @apply min-h-0 flex-1 scrollbar;
   @apply text-sm leading-[1.43] text-muted;
   @apply -m-[3px] my-0 p-[3px];
@@ -286,7 +274,7 @@
 /**
  * Element: footer - the bottom action section
  */
-.alert-dialog__footer {
+.rp-alert-dialog__footer {
   @apply flex flex-row items-center justify-end gap-2;
   @apply mt-0;
 }
@@ -294,21 +282,21 @@
 /**
  * Element: close-trigger - the optional x icon button to close the modal
  */
-.alert-dialog__close-trigger {
+.rp-alert-dialog__close-trigger {
   @apply absolute end-4 top-4;
 }
 
 /**
  * Elements Spacing
  */
-.alert-dialog__header + .alert-dialog__body {
+.rp-alert-dialog__header + .rp-alert-dialog__body {
   @apply mt-2;
 }
 
-.alert-dialog__header + .alert-dialog__footer {
+.rp-alert-dialog__header + .rp-alert-dialog__footer {
   @apply mt-5;
 }
 
-.alert-dialog__body + .alert-dialog__footer {
+.rp-alert-dialog__body + .rp-alert-dialog__footer {
   @apply mt-5;
 }

package/dist/components/alert.css

@@ -1,7 +1,7 @@
 /* Alert component styles */
 
 /* Base alert styles */
-.alert {
+.rp-alert {
   @apply flex w-full flex-row items-start justify-start gap-4 bg-surface px-4 py-3 shadow-surface;
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
@@ -15,11 +15,11 @@
 }
 
 /* Alert elements */
-.alert__content {
+.rp-alert__content {
   @apply flex h-full grow flex-col items-start;
 }
 
-.alert__indicator {
+.rp-alert__indicator {
   @apply flex items-center justify-center p-1 select-none;
 
   [data-slot="alert-default-icon"] {
@@ -27,51 +27,51 @@
   }
 }
 
-.alert__title {
+.rp-alert__title {
   @apply text-sm leading-6 font-medium;
 }
 
-.alert__description {
+.rp-alert__description {
   @apply text-sm text-muted;
 }
 
 /* Variant modifiers */
-.alert--default .alert__indicator {
+.rp-alert--default .rp-alert__indicator {
   @apply text-foreground;
 }
 
-.alert--default .alert__title {
+.rp-alert--default .rp-alert__title {
   @apply text-foreground;
 }
 
-.alert--accent .alert__indicator {
+.rp-alert--accent .rp-alert__indicator {
   @apply text-accent-soft-foreground;
 }
 
-.alert--accent .alert__title {
+.rp-alert--accent .rp-alert__title {
   @apply text-accent-soft-foreground;
 }
 
-.alert--success .alert__indicator {
+.rp-alert--success .rp-alert__indicator {
   @apply text-success-soft-foreground;
 }
 
-.alert--success .alert__title {
+.rp-alert--success .rp-alert__title {
   @apply text-success-soft-foreground;
 }
 
-.alert--warning .alert__indicator {
+.rp-alert--warning .rp-alert__indicator {
   @apply text-warning-soft-foreground;
 }
 
-.alert--warning .alert__title {
+.rp-alert--warning .rp-alert__title {
   @apply text-warning-soft-foreground;
 }
 
-.alert--danger .alert__indicator {
+.rp-alert--danger .rp-alert__indicator {
   @apply text-danger-soft-foreground;
 }
 
-.alert--danger .alert__title {
+.rp-alert--danger .rp-alert__title {
   @apply text-danger-soft-foreground;
 }