@ropav/styles 0.5.0 → 0.7.0

package/dist/components/color-swatch-picker/color-swatch-picker.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/color-swatch-picker/color-swatch-picker.styles.ts
 const colorSwatchPickerVariants = tv({
 	defaultVariants: {
@@ -7,26 +7,26 @@ const colorSwatchPickerVariants = tv({
 		variant: "circle"
 	},
 	slots: {
-		base: "color-swatch-picker",
-		indicator: "color-swatch-picker__indicator",
-		item: "color-swatch-picker__item",
-		swatch: "color-swatch-picker__swatch"
+		base: "rp-color-swatch-picker",
+		indicator: "rp-color-swatch-picker__indicator",
+		item: "rp-color-swatch-picker__item",
+		swatch: "rp-color-swatch-picker__swatch"
 	},
 	variants: {
 		layout: {
-			grid: { base: "color-swatch-picker--grid" },
-			stack: { base: "color-swatch-picker--stack" }
+			grid: { base: "rp-color-swatch-picker--grid" },
+			stack: { base: "rp-color-swatch-picker--stack" }
 		},
 		size: {
-			lg: { base: "color-swatch-picker--lg" },
-			md: { base: "color-swatch-picker--md" },
-			sm: { base: "color-swatch-picker--sm" },
-			xl: { base: "color-swatch-picker--xl" },
-			xs: { base: "color-swatch-picker--xs" }
+			lg: { base: "rp-color-swatch-picker--lg" },
+			md: { base: "rp-color-swatch-picker--md" },
+			sm: { base: "rp-color-swatch-picker--sm" },
+			xl: { base: "rp-color-swatch-picker--xl" },
+			xs: { base: "rp-color-swatch-picker--xs" }
 		},
 		variant: {
-			circle: { base: "color-swatch-picker--circle" },
-			square: { base: "color-swatch-picker--square" }
+			circle: { base: "rp-color-swatch-picker--circle" },
+			square: { base: "rp-color-swatch-picker--square" }
 		}
 	}
 });

package/dist/components/color-swatch-picker.css

@@ -3,7 +3,7 @@
    ========================================================================== */
 
 /* Base styles */
-.color-swatch-picker {
+.rp-color-swatch-picker {
   @apply flex flex-wrap items-center gap-2;
 }
 
@@ -11,7 +11,7 @@
    Item - Individual swatch picker item
    ========================================================================== */
 
-.color-swatch-picker__item {
+.rp-color-swatch-picker__item {
   @apply relative flex size-8 items-center justify-center rounded-2xl border-2 border-transparent outline-none no-highlight;
 
   /* The unselected border is transparent purely to hold the ring's width, and forced colors turns
@@ -24,10 +24,6 @@
   /* Cursor */
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     border-color 100ms var(--ease-out),
     box-shadow 100ms var(--ease-out);
@@ -53,7 +49,7 @@
       border-color: Highlight;
     }
     /* Shrink the swatch to reveal the white gap */
-    .color-swatch-picker__swatch {
+    .rp-color-swatch-picker__swatch {
       transform: scale(0.77);
     }
   }
@@ -63,15 +59,11 @@
    Swatch - The color swatch visual
    ========================================================================== */
 
-.color-swatch-picker__swatch {
+.rp-color-swatch-picker__swatch {
   @apply block size-full;
 
   /* Inherit border-radius from item */
   border-radius: inherit;
-  /**
-  * Transitions
-  * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-  */
   transition: transform 100ms var(--ease-out);
   @apply transform-gpu motion-reduce:transition-none;
 
@@ -86,7 +78,7 @@
    Indicator - Checkmark indicator for selected state
    ========================================================================== */
 
-.color-swatch-picker__indicator {
+.rp-color-swatch-picker__indicator {
   @apply pointer-events-none absolute inset-0 z-10 flex items-center justify-center;
 
   /* Checkmark SVG styles - default to white for dark backgrounds */
@@ -109,7 +101,7 @@
   }
 
   /* Scale up when parent item is selected */
-  .color-swatch-picker__item[data-selected="true"] & > * {
+  .rp-color-swatch-picker__item[data-selected="true"] & > * {
     transform: scale(1) translateZ(0);
   }
 }
@@ -118,11 +110,11 @@
    Layout variants
    ========================================================================== */
 
-.color-swatch-picker--grid {
+.rp-color-swatch-picker--grid {
   /* Default is already grid (flex-wrap) - no additional styles needed */
 }
 
-.color-swatch-picker--stack {
+.rp-color-swatch-picker--stack {
   @apply flex-col;
 }
 
@@ -130,32 +122,32 @@
    Size variants
    ========================================================================== */
 
-.color-swatch-picker--xs {
-  .color-swatch-picker__item {
+.rp-color-swatch-picker--xs {
+  .rp-color-swatch-picker__item {
     @apply size-4 rounded-lg border;
   }
 }
 
-.color-swatch-picker--sm {
-  .color-swatch-picker__item {
+.rp-color-swatch-picker--sm {
+  .rp-color-swatch-picker__item {
     @apply size-6 rounded-xl border-2;
   }
 }
 
-.color-swatch-picker--md {
-  .color-swatch-picker__item {
+.rp-color-swatch-picker--md {
+  .rp-color-swatch-picker__item {
     /* No styles as this is the default size */
   }
 }
 
-.color-swatch-picker--lg {
-  .color-swatch-picker__item {
+.rp-color-swatch-picker--lg {
+  .rp-color-swatch-picker__item {
     @apply size-9 rounded-3xl border-3;
   }
 }
 
-.color-swatch-picker--xl {
-  .color-swatch-picker__item {
+.rp-color-swatch-picker--xl {
+  .rp-color-swatch-picker__item {
     @apply size-10 rounded-3xl border-3;
   }
 }
@@ -165,86 +157,11 @@
    ========================================================================== */
 
 /* Circle variant (default) - no additional styles needed */
-.color-swatch-picker--circle .color-swatch-picker__item {
+.rp-color-swatch-picker--circle .rp-color-swatch-picker__item {
   /* Default is already circle - radius set per size */
 }
 
 /* Square variant */
-.color-swatch-picker--square {
-  .color-swatch-picker__item {
-    @apply rounded-xl;
-    .color-swatch-picker__swatch {
-      @apply rounded-lg;
-    }
-    &[data-selected="true"] {
-      .color-swatch-picker__swatch {
-        @apply rounded-lg;
-      }
-    }
-  }
-}
-
-/* Square variant - item radius for xs */
-.color-swatch-picker--square.color-swatch-picker--xs {
-  .color-swatch-picker__item {
-    @apply rounded-md;
-    .color-swatch-picker__swatch {
-      @apply rounded-md;
-    }
-    &[data-selected="true"] {
-      .color-swatch-picker__swatch {
-        @apply rounded-md;
-      }
-    }
-  }
-}
-
-/* Square variant - item radius for sm */
-.color-swatch-picker--square.color-swatch-picker--sm {
-  .color-swatch-picker__item {
-    @apply rounded-lg;
-    .color-swatch-picker__swatch {
-      @apply rounded-lg;
-    }
-    &[data-selected="true"] {
-      .color-swatch-picker__swatch {
-        @apply rounded-md;
-      }
-    }
-  }
-}
-
-/* Square variant - item radius for md (default) */
-.color-swatch-picker--square.color-swatch-picker--md {
-  /* No styles as this is the default size */
-}
-
-/* Square variant - item radius for lg */
-.color-swatch-picker--square.color-swatch-picker--lg {
-  .color-swatch-picker__item {
-    @apply rounded-xl;
-    .color-swatch-picker__swatch {
-      @apply rounded-lg;
-    }
-    &[data-selected="true"] {
-      .color-swatch-picker__swatch {
-        @apply rounded-lg;
-      }
-    }
-  }
-}
-
-/* Square variant - item radius for xl */
-.color-swatch-picker--square.color-swatch-picker--xl {
-  .color-swatch-picker__item {
-    @apply rounded-xl;
-    .color-swatch-picker__swatch {
-      @apply rounded-lg;
-    }
-    &[data-selected="true"] {
-      .color-swatch-picker__swatch {
-        @apply rounded-lg;
-      }
-    }
-  }
+.rp-color-swatch-picker--square .rp-color-swatch-picker__item {
+  border-radius: min(32px, var(--component-radius));
 }

package/dist/components/color-swatch.css

@@ -1,5 +1,5 @@
 /* Base color-swatch styles */
-.color-swatch {
+.rp-color-swatch {
   @apply relative box-border size-8 shrink-0;
 
   /* Checkered background pattern for transparency */
@@ -12,47 +12,47 @@
 }
 
 /* Shape variants */
-.color-swatch--circle {
+.rp-color-swatch--circle {
   @apply rounded-2xl;
 }
 
-.color-swatch--square {
-  @apply rounded-md;
+.rp-color-swatch--square {
+  border-radius: min(32px, var(--component-radius));
 }
 
 /* Size variants */
-.color-swatch--xs {
+.rp-color-swatch--xs {
   @apply size-4;
 
-  &.color-swatch--circle {
+  &.rp-color-swatch--circle {
     @apply rounded-lg;
   }
 }
 
-.color-swatch--sm {
+.rp-color-swatch--sm {
   @apply size-6;
 
-  &.color-swatch--circle {
+  &.rp-color-swatch--circle {
     @apply rounded-xl;
   }
 }
 
-.color-swatch--md {
+.rp-color-swatch--md {
   /* No additional styles — default size (32px) uses circle's base rounded-2xl */
 }
 
-.color-swatch--lg {
+.rp-color-swatch--lg {
   @apply size-9;
 
-  &.color-swatch--circle {
+  &.rp-color-swatch--circle {
     @apply rounded-3xl;
   }
 }
 
-.color-swatch--xl {
+.rp-color-swatch--xl {
   @apply size-10;
 
-  &.color-swatch--circle {
+  &.rp-color-swatch--circle {
     @apply rounded-3xl;
   }
 }

package/dist/components/combo-box/combo-box.styles.d.ts

@@ -1,73 +1,40 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const comboBoxVariants: import("tailwind-variants").TVReturnType<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            inputGroup: string;
-        };
-    };
-    size: {
-        lg: {
-            popover: string;
-        };
-        md: {};
-        sm: {
-            popover: string;
-        };
-    };
-}, {
-    base: string;
-    inputGroup: string;
-    popover: string;
-    trigger: string;
-    value: string;
-}, undefined, {
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            inputGroup: string;
-        };
-    };
-    size: {
-        lg: {
-            popover: string;
-        };
-        md: {};
-        sm: {
-            popover: string;
-        };
-    };
-}, {
-    base: string;
-    inputGroup: string;
-    popover: string;
-    trigger: string;
-    value: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            inputGroup: string;
-        };
-    };
-    size: {
-        lg: {
-            popover: string;
-        };
-        md: {};
-        sm: {
-            popover: string;
-        };
-    };
-}, {
-    base: string;
-    inputGroup: string;
-    popover: string;
-    trigger: string;
-    value: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const comboBoxVariants: (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;
+} & {
+    fullWidth?: boolean | undefined;
+    size?: "lg" | "md" | "sm" | 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;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    inputGroup: (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;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    popover: (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;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | 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;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    value: (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;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+};
 export type ComboBoxVariants = VariantProps<typeof comboBoxVariants>;
 //# sourceMappingURL=combo-box.styles.d.ts.map

package/dist/components/combo-box/combo-box.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combo-box.styles.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/combo-box.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,gBAAgB;;QAcvB,KAAK;QACL,IAAI;YACF,IAAI;YACJ,UAAU;;;;QAMZ,EAAE;YACA,OAAO;;QAET,EAAE;QACF,EAAE;YACA,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIb,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"combo-box.styles.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/combo-box.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgC3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/combo-box/combo-box.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/combo-box/combo-box.styles.ts
 const comboBoxVariants = tv({
 	defaultVariants: {
@@ -6,24 +6,24 @@ const comboBoxVariants = tv({
 		size: "md"
 	},
 	slots: {
-		base: "combo-box",
-		inputGroup: "combo-box__input-group",
-		popover: "combo-box__popover",
-		trigger: "combo-box__trigger",
-		value: "combo-box__value"
+		base: "rp-combo-box",
+		inputGroup: "rp-combo-box__input-group",
+		popover: "rp-combo-box__popover",
+		trigger: "rp-combo-box__trigger",
+		value: "rp-combo-box__value"
 	},
 	variants: {
 		fullWidth: {
 			false: {},
 			true: {
-				base: "combo-box--full-width",
-				inputGroup: "combo-box__input-group--full-width"
+				base: "rp-combo-box--full-width",
+				inputGroup: "rp-combo-box__input-group--full-width"
 			}
 		},
 		size: {
-			lg: { popover: "combo-box__popover--lg" },
+			lg: { popover: "rp-combo-box__popover--lg" },
 			md: {},
-			sm: { popover: "combo-box__popover--sm" }
+			sm: { popover: "rp-combo-box__popover--sm" }
 		}
 	}
 });

package/dist/components/combo-box.css

@@ -1,5 +1,5 @@
 /* ComboBox styles */
-.combo-box {
+.rp-combo-box {
   @apply flex flex-col gap-1;
 
   &[data-invalid="true"],
@@ -17,7 +17,7 @@
     @apply min-w-0 flex-1;
 
     /* Add inline-end padding when trigger is present */
-    &:has(+ .combo-box__trigger) {
+    &:has(+ .rp-combo-box__trigger) {
       @apply pe-7;
     }
 
@@ -38,15 +38,20 @@
   }
 }
 
-.combo-box__input-group {
+.rp-combo-box__input-group {
   @apply relative isolate inline-flex items-center;
 }
 
-.combo-box__value {
-  @apply text-sm wrap-break-word text-field-foreground empty:hidden;
+.rp-combo-box__value {
+  @apply text-sm wrap-break-word empty:hidden;
+
+  --combo-box-value-fg: var(--field-foreground, var(--foreground));
+  --combo-box-value-fg-placeholder: var(--field-placeholder, var(--muted));
+
+  color: var(--combo-box-value-fg);
 
   &[data-placeholder="true"] {
-    @apply text-field-placeholder;
+    color: var(--combo-box-value-fg-placeholder);
   }
 
   /* Removes the list-box-item indicator element from the combo-box value */
@@ -55,17 +60,22 @@
   }
 }
 
-.combo-box__trigger {
+.rp-combo-box__trigger {
   @apply absolute end-0 top-1/2 flex h-full shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center pe-2 text-field-placeholder transition duration-150 no-highlight;
 
   /* Remove default button styles */
   @apply border-none bg-transparent outline-none;
 
+  --combo-box-trigger-fg: var(--field-placeholder, var(--muted));
+  --combo-box-trigger-fg-hover: var(--field-foreground, var(--foreground));
+
+  color: var(--combo-box-trigger-fg);
+
   /* Hover state */
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply text-field-foreground;
+      color: var(--combo-box-trigger-fg-hover);
     }
   }
 
@@ -98,7 +108,7 @@
 }
 
 /* Similar to popover content styles */
-.combo-box__popover {
+.rp-combo-box__popover {
   @apply min-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 scrollbar overflow-y-auto overscroll-contain bg-overlay p-0 text-sm;
   border-radius: min(32px, var(--component-radius));
   box-shadow: var(--shadow-overlay);
@@ -180,13 +190,13 @@
 
 /* The input inside sizes itself from the context the root provides, so only the option rows are
  * left - reached from the popover's own class, since it is teleported out of this tree. */
-.combo-box__popover--sm {
+.rp-combo-box__popover--sm {
   [data-slot="list-box-item"] {
     @apply min-h-8 py-1;
   }
 }
 
-.combo-box__popover--lg {
+.rp-combo-box__popover--lg {
   @apply text-base;
 
   [data-slot="list-box-item"] {
@@ -195,10 +205,10 @@
 }
 
 /* Full width modifier */
-.combo-box--full-width {
+.rp-combo-box--full-width {
   @apply w-full;
 }
 
-.combo-box__input-group--full-width {
+.rp-combo-box__input-group--full-width {
   @apply w-full;
 }

package/dist/components/date-field/date-field.styles.d.ts

@@ -1,19 +1,8 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const dateFieldVariants: import("tailwind-variants").TVReturnType<{
-    fullWidth: {
-        false: "";
-        true: "date-field--full-width";
-    };
-}, undefined, "date-field", {
-    fullWidth: {
-        false: "";
-        true: "date-field--full-width";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    fullWidth: {
-        false: "";
-        true: "date-field--full-width";
-    };
-}, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const dateFieldVariants: (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;
+} & {
+    fullWidth?: boolean | undefined;
+}) | undefined) => string;
 export type DateFieldVariants = VariantProps<typeof dateFieldVariants>;
 //# sourceMappingURL=date-field.styles.d.ts.map

package/dist/components/date-field/date-field.styles.d.ts.map

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

package/dist/components/date-field/date-field.styles.js

@@ -1,11 +1,11 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/date-field/date-field.styles.ts
 const dateFieldVariants = tv({
-	base: "date-field",
+	base: "rp-date-field",
 	defaultVariants: { fullWidth: false },
 	variants: { fullWidth: {
 		false: "",
-		true: "date-field--full-width"
+		true: "rp-date-field--full-width"
 	} }
 });
 //#endregion

package/dist/components/date-field.css

@@ -1,5 +1,5 @@
 /* Date field styles */
-.date-field {
+.rp-date-field {
   @apply flex flex-col gap-1;
 
   &[data-invalid="true"],
@@ -15,6 +15,6 @@
 }
 
 /* Full width modifier */
-.date-field--full-width {
+.rp-date-field--full-width {
   @apply w-full;
 }