@ropav/styles 0.6.0 → 0.7.0

package/dist/components/slider.css

@@ -1,6 +1,6 @@
 /* Slider styles */
 
-.slider {
+.rp-slider {
   @apply grid w-full gap-1;
 
   grid-template-areas:
@@ -14,13 +14,13 @@
     grid-area: label;
   }
 
-  .slider__output {
+  .rp-slider__output {
     @apply text-sm font-medium tabular-nums;
 
     grid-area: output;
   }
 
-  .slider__track {
+  .rp-slider__track {
     @apply relative bg-default;
 
     border-radius: min(32px, var(--component-radius));
@@ -37,7 +37,7 @@
     }
   }
 
-  .slider__fill {
+  .rp-slider__fill {
     @apply pointer-events-none absolute bg-accent;
 
     /* The only thing showing how far along the value is */
@@ -46,7 +46,7 @@
     }
   }
 
-  .slider__thumb {
+  .rp-slider__thumb {
     /* Flex container for centering pseudo-elements */
     @apply absolute flex cursor-grab items-center justify-center bg-accent no-highlight;
 
@@ -119,7 +119,7 @@
   &[data-orientation="horizontal"] {
     flex-direction: column;
 
-    .slider__track {
+    .rp-slider__track {
       @apply h-5 w-full;
       /* Add transparent borders to provide space for thumb at edges */
       /* Thumb width is 1.5rem (24px), so half is 0.75rem (12px) */
@@ -151,12 +151,12 @@
       }
     }
 
-    .slider__fill,
-    .slider__thumb {
+    .rp-slider__fill,
+    .rp-slider__thumb {
       @apply h-full;
     }
 
-    .slider__thumb {
+    .rp-slider__thumb {
       @apply top-1/2;
 
       /* Thumb width + border width */
@@ -181,7 +181,7 @@
     grid-template-rows: auto 1fr auto;
     grid-template-columns: 1fr;
 
-    .slider__output {
+    .rp-slider__output {
       text-align: center;
     }
 
@@ -189,7 +189,7 @@
       text-align: center;
     }
 
-    .slider__track {
+    .rp-slider__track {
       @apply h-full w-5;
       /* Add transparent borders to provide space for thumb at edges */
       /* Thumb height is 1.5rem (24px), so half is 0.75rem (12px) */
@@ -219,12 +219,12 @@
       }
     }
 
-    .slider__fill,
-    .slider__thumb {
+    .rp-slider__fill,
+    .rp-slider__thumb {
       @apply w-full;
     }
 
-    .slider__thumb {
+    .rp-slider__thumb {
       /* Cross-axis centering; React Aria applies a physical translateX(-50%), so keep left-1/2 for RTL correctness */
       @apply left-1/2;
 

package/dist/components/spinner/spinner.styles.d.ts

@@ -1,46 +1,9 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const spinnerVariants: import("tailwind-variants").TVReturnType<{
-    color: {
-        accent: "spinner--accent";
-        current: "spinner--current";
-        danger: "spinner--danger";
-        success: "spinner--success";
-        warning: "spinner--warning";
-    };
-    size: {
-        lg: "spinner--lg";
-        md: "spinner--md";
-        sm: "spinner--sm";
-        xl: "spinner--xl";
-    };
-}, undefined, "spinner", {
-    color: {
-        accent: "spinner--accent";
-        current: "spinner--current";
-        danger: "spinner--danger";
-        success: "spinner--success";
-        warning: "spinner--warning";
-    };
-    size: {
-        lg: "spinner--lg";
-        md: "spinner--md";
-        sm: "spinner--sm";
-        xl: "spinner--xl";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    color: {
-        accent: "spinner--accent";
-        current: "spinner--current";
-        danger: "spinner--danger";
-        success: "spinner--success";
-        warning: "spinner--warning";
-    };
-    size: {
-        lg: "spinner--lg";
-        md: "spinner--md";
-        sm: "spinner--sm";
-        xl: "spinner--xl";
-    };
-}, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const spinnerVariants: (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;
+} & {
+    color?: "accent" | "current" | "danger" | "success" | "warning" | undefined;
+    size?: "lg" | "md" | "sm" | "xl" | undefined;
+}) | undefined) => string;
 export type SpinnerVariants = VariantProps<typeof spinnerVariants>;
 //# sourceMappingURL=spinner.styles.d.ts.map

package/dist/components/spinner/spinner.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.styles.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAqB1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"spinner.styles.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,eAAe;;;;;yBAqB1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/components/spinner/spinner.styles.js

@@ -1,24 +1,24 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/spinner/spinner.styles.ts
 const spinnerVariants = tv({
-	base: "spinner",
+	base: "rp-spinner",
 	defaultVariants: {
 		color: "accent",
 		size: "md"
 	},
 	variants: {
 		color: {
-			accent: "spinner--accent",
-			current: "spinner--current",
-			danger: "spinner--danger",
-			success: "spinner--success",
-			warning: "spinner--warning"
+			accent: "rp-spinner--accent",
+			current: "rp-spinner--current",
+			danger: "rp-spinner--danger",
+			success: "rp-spinner--success",
+			warning: "rp-spinner--warning"
 		},
 		size: {
-			lg: "spinner--lg",
-			md: "spinner--md",
-			sm: "spinner--sm",
-			xl: "spinner--xl"
+			lg: "rp-spinner--lg",
+			md: "rp-spinner--md",
+			sm: "rp-spinner--sm",
+			xl: "rp-spinner--xl"
 		}
 	}
 });

package/dist/components/spinner.css

@@ -1,42 +1,42 @@
 /* Base spinner styles */
-.spinner {
+.rp-spinner {
   @apply pointer-events-none inline-flex size-6 shrink-0 animate-spin-fast motion-reduce:animate-none;
 }
 
 /* Size variants */
-.spinner--sm {
+.rp-spinner--sm {
   @apply size-4;
 }
 
-.spinner--md {
+.rp-spinner--md {
   /* No styles as this is the default size */
 }
 
-.spinner--lg {
+.rp-spinner--lg {
   @apply size-8;
 }
 
-.spinner--xl {
+.rp-spinner--xl {
   @apply size-10;
 }
 
 /* Color variants */
-.spinner--current {
+.rp-spinner--current {
   color: inherit;
 }
 
-.spinner--accent {
+.rp-spinner--accent {
   color: var(--accent);
 }
 
-.spinner--danger {
+.rp-spinner--danger {
   color: var(--danger);
 }
 
-.spinner--success {
+.rp-spinner--success {
   color: var(--success);
 }
 
-.spinner--warning {
+.rp-spinner--warning {
   color: var(--warning);
 }

package/dist/components/splitter/splitter.styles.d.ts

@@ -1,61 +1,34 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const splitterVariants: import("tailwind-variants").TVReturnType<{
-    orientation: {
-        horizontal: {
-            base: string;
-            handle: string;
-            handleGrip: string;
-        };
-        vertical: {
-            base: string;
-            handle: string;
-            handleGrip: string;
-        };
-    };
-}, {
-    base: string;
-    handle: string;
-    handleGrip: string;
-    handleTarget: string;
-    panel: string;
-}, undefined, {
-    orientation: {
-        horizontal: {
-            base: string;
-            handle: string;
-            handleGrip: string;
-        };
-        vertical: {
-            base: string;
-            handle: string;
-            handleGrip: string;
-        };
-    };
-}, {
-    base: string;
-    handle: string;
-    handleGrip: string;
-    handleTarget: string;
-    panel: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    orientation: {
-        horizontal: {
-            base: string;
-            handle: string;
-            handleGrip: string;
-        };
-        vertical: {
-            base: string;
-            handle: string;
-            handleGrip: string;
-        };
-    };
-}, {
-    base: string;
-    handle: string;
-    handleGrip: string;
-    handleTarget: string;
-    panel: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const splitterVariants: (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;
+} & {
+    orientation?: "horizontal" | "vertical" | undefined;
+}) | undefined) => {
+    base: (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;
+    } & {
+        orientation?: "horizontal" | "vertical" | undefined;
+    }) | undefined) => string;
+    handle: (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;
+    } & {
+        orientation?: "horizontal" | "vertical" | undefined;
+    }) | undefined) => string;
+    handleGrip: (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;
+    } & {
+        orientation?: "horizontal" | "vertical" | undefined;
+    }) | undefined) => string;
+    handleTarget: (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;
+    } & {
+        orientation?: "horizontal" | "vertical" | undefined;
+    }) | undefined) => string;
+    panel: (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;
+    } & {
+        orientation?: "horizontal" | "vertical" | undefined;
+    }) | undefined) => string;
+};
 export type SplitterVariants = VariantProps<typeof splitterVariants>;
 //# sourceMappingURL=splitter.styles.d.ts.map

package/dist/components/splitter/splitter.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"splitter.styles.d.ts","sourceRoot":"","sources":["../../../src/components/splitter/splitter.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAgBtD,eAAO,MAAM,gBAAgB;;QAavB,UAAU;YACR,IAAI;YACJ,MAAM;YACN,UAAU;;QAEZ,QAAQ;YACN,IAAI;YACJ,MAAM;YACN,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIhB,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"splitter.styles.d.ts","sourceRoot":"","sources":["../../../src/components/splitter/splitter.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAgB7C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyB3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/splitter/splitter.styles.js

@@ -1,24 +1,24 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/splitter/splitter.styles.ts
 const splitterVariants = tv({
 	defaultVariants: { orientation: "horizontal" },
 	slots: {
-		base: "splitter",
-		handle: "splitter__handle",
-		handleGrip: "splitter__handle-grip",
-		handleTarget: "splitter__handle-target",
-		panel: "splitter__panel"
+		base: "rp-splitter",
+		handle: "rp-splitter__handle",
+		handleGrip: "rp-splitter__handle-grip",
+		handleTarget: "rp-splitter__handle-target",
+		panel: "rp-splitter__panel"
 	},
 	variants: { orientation: {
 		horizontal: {
-			base: "splitter--horizontal",
-			handle: "splitter__handle--horizontal",
-			handleGrip: "splitter__handle-grip--horizontal"
+			base: "rp-splitter--horizontal",
+			handle: "rp-splitter__handle--horizontal",
+			handleGrip: "rp-splitter__handle-grip--horizontal"
 		},
 		vertical: {
-			base: "splitter--vertical",
-			handle: "splitter__handle--vertical",
-			handleGrip: "splitter__handle-grip--vertical"
+			base: "rp-splitter--vertical",
+			handle: "rp-splitter__handle--vertical",
+			handleGrip: "rp-splitter__handle-grip--vertical"
 		}
 	} }
 });

package/dist/components/splitter.css

@@ -3,8 +3,8 @@
 /*
  * Orientation is a modifier class rather than a `[data-orientation]` descendant selector, and
  * that is not a style preference. A splitter nests — a vertical group inside a panel of a
- * horizontal one is the ordinary case — so `.splitter[data-orientation="horizontal"]
- * .splitter__handle` would reach the inner group's handle as well as its own and lay it out on
+ * horizontal one is the ordinary case — so `.rp-splitter[data-orientation="horizontal"]
+ * .rp-splitter__handle` would reach the inner group's handle as well as its own and lay it out on
  * the wrong axis. Every rule below therefore sits on the part it styles.
  *
  * The modifier also buys the Storybook forced-colors sweep, which collects `[class*='--']` and a
@@ -12,15 +12,15 @@
  * anything — the handle and its grip — would never be audited.
  */
 
-.splitter {
+.rp-splitter {
   @apply isolate flex h-full w-full;
 }
 
-.splitter--horizontal {
+.rp-splitter--horizontal {
   @apply flex-row;
 }
 
-.splitter--vertical {
+.rp-splitter--vertical {
   @apply flex-col;
 }
 
@@ -31,14 +31,14 @@
  * `flex-1` is the unmanaged fallback only. The component writes the whole `flex` shorthand inline;
  * an inline `flex-basis` alone would leave this `flex-grow: 1` in place and the panel would grow
  * straight back past the size it was given. */
-.splitter__panel {
+.rp-splitter__panel {
   @apply relative min-h-0 min-w-0 flex-1 overflow-hidden;
 }
 
 /* The flex item is the gutter and paints nothing itself. The line you see is `::after`, absolutely
  * positioned, which is what lets it thicken on hover without the gutter changing width and
- * reflowing both panels by a pixel. `.slider__thumb::after` carries its knob the same way. */
-.splitter__handle {
+ * reflowing both panels by a pixel. `.rp-slider__thumb::after` carries its knob the same way. */
+.rp-splitter__handle {
   /* The gutter is the line, with nothing either side of it. Dead space inside the gutter shows up
    * as a gap wherever a nested group's divider meets this one — the panel between them clips its own
    * contents, so the inner line cannot reach across to close it. `1px` rather than a spacing step,
@@ -111,8 +111,8 @@
 
   /* The grip answers to the same states as the line, and is reached as a direct child so a nested
    * group's own grip is left alone. */
-  &:hover > .splitter__handle-grip,
-  &[data-hovered="true"] > .splitter__handle-grip {
+  &:hover > .rp-splitter__handle-grip,
+  &[data-hovered="true"] > .rp-splitter__handle-grip {
     background-color: var(--splitter-grip-bg-hover);
     transition-delay: var(--splitter-highlight-delay);
   }
@@ -124,7 +124,7 @@
     transition-delay: 0ms;
   }
 
-  &[data-dragging="true"] > .splitter__handle-grip {
+  &[data-dragging="true"] > .rp-splitter__handle-grip {
     background-color: var(--splitter-grip-bg-dragging);
     transition-delay: 0ms;
   }
@@ -135,9 +135,9 @@
     &:hover::after,
     &[data-hovered="true"]::after,
     &[data-dragging="true"]::after,
-    &:hover > .splitter__handle-grip,
-    &[data-hovered="true"] > .splitter__handle-grip,
-    &[data-dragging="true"] > .splitter__handle-grip {
+    &:hover > .rp-splitter__handle-grip,
+    &[data-hovered="true"] > .rp-splitter__handle-grip,
+    &[data-dragging="true"] > .rp-splitter__handle-grip {
       background-color: Highlight;
     }
   }
@@ -153,7 +153,7 @@
     /* `status-disabled` reaches `color` and `border-color`, and neither the line nor the grip is
      * either of those. */
     &::after,
-    & > .splitter__handle-grip {
+    & > .rp-splitter__handle-grip {
       @media (forced-colors: active) {
         background-color: GrayText;
       }
@@ -166,7 +166,7 @@
  * border: forced colors turns a transparent *border-color* opaque — the trap `slider.css` documents
  * at both ends of its track — and a bordered target would render as two solid blocks flanking every
  * divider. `inset` has no such behaviour, so this needs no forced-colors rule of its own. */
-.splitter__handle-target {
+.rp-splitter__handle-target {
   @apply absolute inset-0 bg-transparent;
 }
 
@@ -177,7 +177,7 @@
  *
  * Sized from custom properties rather than utilities so a theme can retune the pill without
  * restating both axes in both orientations. */
-.splitter__handle-grip {
+.rp-splitter__handle-grip {
   @apply pointer-events-none absolute rounded-full;
 
   background-color: var(--splitter-grip-bg);
@@ -192,18 +192,18 @@
   @apply motion-reduce:transition-none;
 }
 
-.splitter__handle-grip--horizontal {
+.rp-splitter__handle-grip--horizontal {
   inline-size: var(--splitter-grip-thickness);
   block-size: var(--splitter-grip-length);
 }
 
-.splitter__handle-grip--vertical {
+.rp-splitter__handle-grip--vertical {
   inline-size: var(--splitter-grip-length);
   block-size: var(--splitter-grip-thickness);
 }
 
 /* A horizontal group puts its panels side by side, so the divider is a vertical line. */
-.splitter__handle--horizontal {
+.rp-splitter__handle--horizontal {
   @apply cursor-col-resize;
 
   inline-size: var(--splitter-gutter);
@@ -220,13 +220,13 @@
     inline-size: calc(var(--splitter-gutter) * 2);
   }
 
-  & > .splitter__handle-target {
+  & > .rp-splitter__handle-target {
     inset-inline: calc((var(--splitter-target) - var(--splitter-gutter)) / -2);
   }
 }
 
 /* A vertical group stacks its panels, so the divider is a horizontal line. */
-.splitter__handle--vertical {
+.rp-splitter__handle--vertical {
   @apply cursor-row-resize;
 
   block-size: var(--splitter-gutter);
@@ -243,7 +243,7 @@
     block-size: calc(var(--splitter-gutter) * 2);
   }
 
-  & > .splitter__handle-target {
+  & > .rp-splitter__handle-target {
     inset-block: calc((var(--splitter-target) - var(--splitter-gutter)) / -2);
   }
 }

package/dist/components/surface/surface.styles.d.ts

@@ -1,25 +1,8 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const surfaceVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: "surface--default";
-        secondary: "surface--secondary";
-        tertiary: "surface--tertiary";
-        transparent: "surface--transparent";
-    };
-}, undefined, "surface", {
-    variant: {
-        default: "surface--default";
-        secondary: "surface--secondary";
-        tertiary: "surface--tertiary";
-        transparent: "surface--transparent";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        default: "surface--default";
-        secondary: "surface--secondary";
-        tertiary: "surface--tertiary";
-        transparent: "surface--transparent";
-    };
-}, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const surfaceVariants: (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;
+} & {
+    variant?: "default" | "secondary" | "tertiary" | "transparent" | undefined;
+}) | undefined) => string;
 export type SurfaceVariants = VariantProps<typeof surfaceVariants>;
 //# sourceMappingURL=surface.styles.d.ts.map

package/dist/components/surface/surface.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"surface.styles.d.ts","sourceRoot":"","sources":["../../../src/components/surface/surface.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;cAa1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"surface.styles.d.ts","sourceRoot":"","sources":["../../../src/components/surface/surface.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,eAAe;;;;yBAa1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/components/surface/surface.styles.js

@@ -1,13 +1,13 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/surface/surface.styles.ts
 const surfaceVariants = tv({
-	base: "surface",
+	base: "rp-surface",
 	defaultVariants: { variant: "default" },
 	variants: { variant: {
-		default: "surface--default",
-		secondary: "surface--secondary",
-		tertiary: "surface--tertiary",
-		transparent: "surface--transparent"
+		default: "rp-surface--default",
+		secondary: "rp-surface--secondary",
+		tertiary: "rp-surface--tertiary",
+		transparent: "rp-surface--transparent"
 	} }
 });
 //#endregion

package/dist/components/surface.css

@@ -1,16 +1,16 @@
 /* Surface component styles */
 
 /* Block */
-.surface {
+.rp-surface {
   @apply relative text-foreground;
 }
 
 /* Modifier - variant */
-.surface--transparent {
+.rp-surface--transparent {
   @apply bg-transparent;
 }
 
-.surface--default {
+.rp-surface--default {
   @apply bg-surface text-surface-foreground;
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
@@ -22,7 +22,7 @@
   }
 }
 
-.surface--secondary {
+.rp-surface--secondary {
   @apply bg-surface-secondary text-surface-secondary-foreground;
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
@@ -34,7 +34,7 @@
   }
 }
 
-.surface--tertiary {
+.rp-surface--tertiary {
   @apply bg-surface-tertiary text-surface-tertiary-foreground;
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container