@ropav/styles 0.6.0 → 0.7.0

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/search-field/search-field.styles.ts
 const searchFieldVariants = tv({
 	defaultVariants: {
@@ -7,28 +7,28 @@ const searchFieldVariants = tv({
 		variant: "primary"
 	},
 	slots: {
-		base: "search-field",
-		clearButton: "search-field__clear-button",
-		group: "search-field__group",
-		input: "search-field__input",
-		searchIcon: "search-field__search-icon"
+		base: "rp-search-field",
+		clearButton: "rp-search-field__clear-button",
+		group: "rp-search-field__group",
+		input: "rp-search-field__input",
+		searchIcon: "rp-search-field__search-icon"
 	},
 	variants: {
 		fullWidth: {
 			false: {},
 			true: {
-				base: "search-field--full-width",
-				group: "search-field__group--full-width"
+				base: "rp-search-field--full-width",
+				group: "rp-search-field__group--full-width"
 			}
 		},
 		size: {
-			lg: { base: "search-field--lg" },
+			lg: { base: "rp-search-field--lg" },
 			md: {},
-			sm: { base: "search-field--sm" }
+			sm: { base: "rp-search-field--sm" }
 		},
 		variant: {
-			primary: { base: "search-field--primary" },
-			secondary: { base: "search-field--secondary" }
+			primary: { base: "rp-search-field--primary" },
+			secondary: { base: "rp-search-field--secondary" }
 		}
 	}
 });

package/dist/components/search-field.css

@@ -1,5 +1,5 @@
 /* Search field styles */
-.search-field {
+.rp-search-field {
   @apply flex flex-col gap-1;
 
   &[data-invalid="true"],
@@ -20,7 +20,7 @@
   }
 }
 
-.search-field__group {
+.rp-search-field__group {
   @apply relative inline-flex h-9 items-center overflow-hidden rounded-field border text-sm text-field-foreground shadow-field outline-none;
 
   /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
@@ -90,7 +90,7 @@
   }
 }
 
-.search-field__input {
+.rp-search-field__input {
   @apply flex-1 rounded-none border-0 bg-transparent px-3 field-line-md shadow-none outline-none;
 
   /* Hide browser default search clear button */
@@ -101,12 +101,12 @@
   }
 
   /* Remove border radius on left side when search icon is present */
-  .search-field__group:has([data-slot="search-field-search-icon"]) & {
+  .rp-search-field__group:has([data-slot="search-field-search-icon"]) & {
     @apply rounded-s-none ps-2;
   }
 
   /* Remove border radius on right side when clear button is present */
-  .search-field__group:has([slot="clear"]) & {
+  .rp-search-field__group:has([slot="clear"]) & {
     @apply rounded-e-none pe-2;
   }
 
@@ -119,7 +119,7 @@
   /**
    * Neutralize the browser's per-input autofill paint so the inner <input>
    * doesn't draw a sharp-cornered yellow rectangle. The unified highlight
-   * is applied to `.search-field__group` above. Preserve the autofilled
+   * is applied to `.rp-search-field__group` above. Preserve the autofilled
    * text and caret colors, and pin the background-color transition so the
    * inset box-shadow trick doesn't flicker on state changes.
    */
@@ -136,12 +136,12 @@
   }
 }
 
-.search-field__search-icon {
+.rp-search-field__search-icon {
   @apply pointer-events-none shrink-0 text-field-placeholder;
   @apply ms-3 me-0 size-4;
 }
 
-.search-field__clear-button {
+.rp-search-field__clear-button {
   @apply me-2 size-5 shrink-0;
 
   /* Overrides close button default icon size from 16px to 12px */
@@ -151,11 +151,11 @@
 }
 
 /* Variant property definitions */
-.search-field--primary {
+.rp-search-field--primary {
   /* Default styles */
 }
 
-.search-field--secondary .search-field__group {
+.rp-search-field--secondary .rp-search-field__group {
   @apply shadow-none;
 
   --search-field-group-bg: var(--default);
@@ -168,11 +168,11 @@
 }
 
 /* Full width modifier */
-.search-field--full-width {
+.rp-search-field--full-width {
   @apply w-full;
 }
 
-.search-field__group--full-width {
+.rp-search-field__group--full-width {
   @apply w-full;
 }
 
@@ -180,22 +180,22 @@
    Size variants
    ========================================================================== */
 
-.search-field--sm {
-  .search-field__group {
+.rp-search-field--sm {
+  .rp-search-field__group {
     @apply h-8;
   }
 
-  .search-field__input {
+  .rp-search-field__input {
     @apply field-line-sm;
   }
 }
 
-.search-field--lg {
-  .search-field__group {
+.rp-search-field--lg {
+  .rp-search-field__group {
     @apply h-10;
   }
 
-  .search-field__input {
+  .rp-search-field__input {
     @apply field-line-lg;
   }
 }

package/dist/components/segmented-control/segmented-control.styles.d.ts

@@ -1,73 +1,34 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const segmentedControlVariants: import("tailwind-variants").TVReturnType<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    indicator: string;
-    item: string;
-    separator: string;
-}, undefined, {
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    indicator: string;
-    item: string;
-    separator: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    indicator: string;
-    item: string;
-    separator: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const segmentedControlVariants: (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;
+    indicator: (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;
+    item: (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;
+    separator: (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 SegmentedControlVariants = VariantProps<typeof segmentedControlVariants>;
 //# sourceMappingURL=segmented-control.styles.d.ts.map

package/dist/components/segmented-control/segmented-control.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.styles.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,wBAAwB;;QAa/B,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC"}
+{"version":3,"file":"segmented-control.styles.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BnC,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC"}

package/dist/components/segmented-control/segmented-control.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/segmented-control/segmented-control.styles.ts
 const segmentedControlVariants = tv({
 	defaultVariants: {
@@ -6,20 +6,20 @@ const segmentedControlVariants = tv({
 		size: "md"
 	},
 	slots: {
-		base: "segmented-control",
-		indicator: "segmented-control__indicator",
-		item: "segmented-control__item",
-		separator: "segmented-control__separator"
+		base: "rp-segmented-control",
+		indicator: "rp-segmented-control__indicator",
+		item: "rp-segmented-control__item",
+		separator: "rp-segmented-control__separator"
 	},
 	variants: {
 		fullWidth: {
 			false: {},
-			true: { base: "segmented-control--full-width" }
+			true: { base: "rp-segmented-control--full-width" }
 		},
 		size: {
-			lg: { base: "segmented-control--lg" },
-			md: { base: "segmented-control--md" },
-			sm: { base: "segmented-control--sm" }
+			lg: { base: "rp-segmented-control--lg" },
+			md: { base: "rp-segmented-control--md" },
+			sm: { base: "rp-segmented-control--sm" }
 		}
 	}
 });

package/dist/components/segmented-control.css

@@ -2,12 +2,12 @@
    SegmentedControl - one choice out of a few, drawn as a pill that slides
 
    Structure (explicit composition):
-     .segmented-control                → role="radiogroup", the track the pill slides in
-       .segmented-control__item        → button[role="radio"]
-         .segmented-control__indicator
+     .rp-segmented-control                → role="radiogroup", the track the pill slides in
+       .rp-segmented-control__item        → button[role="radio"]
+         .rp-segmented-control__indicator
    ========================================================================== */
 
-.segmented-control {
+.rp-segmented-control {
   @apply relative inline-flex w-max items-center bg-default p-1;
 
   /* The same corner a button of this size wears, not a larger one stepped out by the padding.
@@ -37,7 +37,7 @@
    Segment
    ========================================================================== */
 
-.segmented-control__item {
+.rp-segmented-control__item {
   @apply relative inline-flex h-7 min-w-0 shrink-0 appearance-none items-center justify-center gap-2 rounded-component border-0 bg-transparent px-3 text-center text-sm font-medium whitespace-nowrap outline-none select-none no-highlight;
 
   --segmented-control-item-fg: var(--muted);
@@ -106,24 +106,24 @@
    one before it rather than being a node between the two.
    ========================================================================== */
 
-.segmented-control__separator {
+.rp-segmented-control__separator {
   @apply pointer-events-none absolute start-0 top-1/4 h-1/2 w-px rounded-sm bg-muted/25;
 
   transition: opacity 150ms var(--ease-smooth);
   @apply motion-reduce:transition-none;
 
   /* Nothing to divide in front of the first segment. */
-  .segmented-control__item:first-child & {
+  .rp-segmented-control__item:first-child & {
     @apply opacity-0;
   }
 }
 
 /* The pill covers its own leading divider, and the divider on the segment that follows would
    otherwise sit hard against the pill's trailing edge. Both step aside as it arrives. */
-.segmented-control__item[data-selected="true"] .segmented-control__separator,
-.segmented-control__item[data-selected="true"]
-  + .segmented-control__item
-  .segmented-control__separator {
+.rp-segmented-control__item[data-selected="true"] .rp-segmented-control__separator,
+.rp-segmented-control__item[data-selected="true"]
+  + .rp-segmented-control__item
+  .rp-segmented-control__separator {
   @apply opacity-0;
 }
 
@@ -133,7 +133,7 @@
    sliding along is one element handing its place to the next.
    ========================================================================== */
 
-.segmented-control__indicator {
+.rp-segmented-control__indicator {
   @apply absolute start-0 top-0 size-full rounded-component bg-segment shadow-surface;
 
   z-index: -1;
@@ -163,15 +163,15 @@
    track's own `p-1` is the 8px difference.
    ========================================================================== */
 
-.segmented-control--sm .segmented-control__item {
+.rp-segmented-control--sm .rp-segmented-control__item {
   @apply h-6 px-2.5 text-xs;
 }
 
-.segmented-control--md {
+.rp-segmented-control--md {
   /* No styles as this is the default size */
 }
 
-.segmented-control--lg .segmented-control__item {
+.rp-segmented-control--lg .rp-segmented-control__item {
   @apply h-8 px-4;
 }
 
@@ -179,10 +179,10 @@
    Full width modifier
    ========================================================================== */
 
-.segmented-control--full-width {
+.rp-segmented-control--full-width {
   @apply flex w-full;
 
-  .segmented-control__item {
+  .rp-segmented-control__item {
     @apply flex-1;
   }
 }

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

@@ -1,103 +1,46 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const selectVariants: import("tailwind-variants").TVReturnType<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            trigger: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-            popover: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-            popover: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    indicator: string;
-    popover: string;
-    trigger: string;
-    value: string;
-}, undefined, {
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            trigger: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-            popover: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-            popover: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    indicator: string;
-    popover: string;
-    trigger: string;
-    value: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            trigger: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-            popover: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-            popover: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    indicator: string;
-    popover: string;
-    trigger: string;
-    value: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const selectVariants: (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;
+    variant?: "primary" | "secondary" | 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;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    indicator: (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;
+        variant?: "primary" | "secondary" | 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;
+        variant?: "primary" | "secondary" | 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;
+        variant?: "primary" | "secondary" | 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;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+};
 export type SelectVariants = VariantProps<typeof selectVariants>;
 //# sourceMappingURL=select.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,cAAc;;QAerB,KAAK;QACL,IAAI;YACF,IAAI;YACJ,OAAO;;;;QAIT,EAAE;YACA,IAAI;YACJ,OAAO;;QAET,EAAE;QACF,EAAE;YACA,IAAI;YACJ,OAAO;;;;QAIT,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}
+{"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCzB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dist/components/select/select.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/select/select.styles.ts
 const selectVariants = tv({
 	defaultVariants: {
@@ -7,34 +7,34 @@ const selectVariants = tv({
 		variant: "primary"
 	},
 	slots: {
-		base: "select",
-		indicator: "select__indicator",
-		popover: "select__popover",
-		trigger: "select__trigger",
-		value: "select__value"
+		base: "rp-select",
+		indicator: "rp-select__indicator",
+		popover: "rp-select__popover",
+		trigger: "rp-select__trigger",
+		value: "rp-select__value"
 	},
 	variants: {
 		fullWidth: {
 			false: {},
 			true: {
-				base: "select--full-width",
-				trigger: "select__trigger--full-width"
+				base: "rp-select--full-width",
+				trigger: "rp-select__trigger--full-width"
 			}
 		},
 		size: {
 			lg: {
-				base: "select--lg",
-				popover: "select__popover--lg"
+				base: "rp-select--lg",
+				popover: "rp-select__popover--lg"
 			},
 			md: {},
 			sm: {
-				base: "select--sm",
-				popover: "select__popover--sm"
+				base: "rp-select--sm",
+				popover: "rp-select__popover--sm"
 			}
 		},
 		variant: {
-			primary: { base: "select--primary" },
-			secondary: { base: "select--secondary" }
+			primary: { base: "rp-select--primary" },
+			secondary: { base: "rp-select--secondary" }
 		}
 	}
 });