@rarui/styles 2.2.5 → 2.3.0-rc.2

package/dist/packages/feedback/toast/rarui-toast.css.d.ts

@@ -0,0 +1,141 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const styles: {
+    toast: RuntimeFn<{
+        /**
+         * Determines the visual style of the toast, influencing its color scheme and appearance.
+         */
+        appearance: {
+            info: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            success: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            warning: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            error: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            neutral: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            invert: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Specifies the size of the toast, controlling its dimensions.
+         */
+        size: {
+            small: {
+                padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string}, ${number})` | `var(--${string}, ${number}) var(--${string})` | `var(--${string}, ${number}) var(--${string}, ${string})` | `var(--${string}, ${number}) var(--${string}, ${number})`;
+                gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            medium: {
+                padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string}, ${number})` | `var(--${string}, ${number}) var(--${string})` | `var(--${string}, ${number}) var(--${string}, ${string})` | `var(--${string}, ${number}) var(--${string}, ${number})`;
+            };
+            large: {
+                padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string}, ${number})` | `var(--${string}, ${number}) var(--${string})` | `var(--${string}, ${number}) var(--${string}, ${string})` | `var(--${string}, ${number}) var(--${string}, ${number})`;
+                gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Specifies the variant of the toast
+         */
+        variant: {
+            solid: {};
+            tonal: {
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            ghost: {
+                borderLeft: "solid";
+                borderWidth: "4px";
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+    }>;
+    container: RuntimeFn<{
+        placement: {
+            bottomCenter: {
+                left: "50%";
+                transform: "translate(-50%)";
+                bottom: "2rem";
+            };
+            bottomLeft: {
+                left: number;
+                bottom: "2rem";
+            };
+            bottomRight: {
+                right: number;
+                bottom: "2rem";
+            };
+            topCenter: {
+                left: "50%";
+                transform: "translate(-50%)";
+                top: "2rem";
+            };
+            topLeft: {
+                left: number;
+                top: "2rem";
+            };
+            topRight: {
+                right: number;
+                top: "2rem";
+            };
+        };
+    }>;
+    content: string;
+    toastContainer: RuntimeFn<{
+        position: {
+            bottomRight: {
+                right: number;
+                bottom: number;
+            };
+            topRight: {
+                top: number;
+                right: number;
+            };
+            bottomLeft: {
+                bottom: number;
+                left: number;
+            };
+            topLeft: {
+                top: number;
+                left: number;
+            };
+        };
+    }>;
+    wrapper: RuntimeFn<{
+        placement: {
+            bottomCenter: {
+                animation: `${string} 800ms cubic-bezier(0,0.46,0,1.04) both`;
+            };
+            bottomLeft: {
+                animation: `${string} 800ms cubic-bezier(0,0.46,0,1.04) both`;
+            };
+            bottomRight: {
+                animation: `${string} 800ms cubic-bezier(0,0.46,0,1.04) both`;
+            };
+            topCenter: {
+                animation: `${string} 800ms cubic-bezier(0,0.46,0,1.04) both`;
+            };
+            topLeft: {
+                animation: `${string} 800ms cubic-bezier(0,0.46,0,1.04) both`;
+            };
+            topRight: {
+                animation: `${string} 800ms cubic-bezier(0,0.46,0,1.04) both`;
+            };
+        };
+    }>;
+};
+
+export { styles };

package/dist/packages/feedback/toast/rarui-toast.css.js

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-toast.css";import{c as t}from"../../../node_modules/rainbow-sprinkles/dist/createRuntimeFn-891c4670.esm.js";import{c as a}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";a({defaultClassName:"rarui-toast_container__1cy6jj816",variantClassNames:{placement:{bottomCenter:"rarui-toast_container_placement_bottomCenter__1cy6jj817",bottomLeft:"rarui-toast_container_placement_bottomLeft__1cy6jj818",bottomRight:"rarui-toast_container_placement_bottomRight__1cy6jj819",topCenter:"rarui-toast_container_placement_topCenter__1cy6jj81a",topLeft:"rarui-toast_container_placement_topLeft__1cy6jj81b",topRight:"rarui-toast_container_placement_topRight__1cy6jj81c"}},defaultVariants:{},compoundVariants:[]});var r=t({config:{width:{dynamic:{default:"rarui-toast_width-md__1cy6jj81i",conditions:{xs:"rarui-toast_width-xs__1cy6jj81h",md:"rarui-toast_width-md__1cy6jj81i",lg:"rarui-toast_width-lg__1cy6jj81j",xl:"rarui-toast_width-xl__1cy6jj81k"}},name:"width",vars:{conditions:{xs:"var(--width-xs__1cy6jj81d)",md:"var(--width-md__1cy6jj81e)",lg:"var(--width-lg__1cy6jj81f)",xl:"var(--width-xl__1cy6jj81g)"},default:"var(--width-md__1cy6jj81e)"},dynamicScale:!0}}}),_={toast:a({defaultClassName:"rarui-toast__1cy6jj80",variantClassNames:{appearance:{info:"rarui-toast_appearance_info__1cy6jj81",success:"rarui-toast_appearance_success__1cy6jj82",warning:"rarui-toast_appearance_warning__1cy6jj83",error:"rarui-toast_appearance_error__1cy6jj84",neutral:"rarui-toast_appearance_neutral__1cy6jj85",invert:"rarui-toast_appearance_invert__1cy6jj86"},size:{small:"rarui-toast_size_small__1cy6jj87",medium:"rarui-toast_size_medium__1cy6jj88",large:"rarui-toast_size_large__1cy6jj89"},variant:{solid:"rarui-toast_variant_solid__1cy6jj8a",tonal:"rarui-toast_variant_tonal__1cy6jj8b",ghost:"rarui-toast_variant_ghost__1cy6jj8c"}},defaultVariants:{},compoundVariants:[[{appearance:"info",variant:"tonal"},"rarui-toast__compound_0__1cy6jj8d"],[{appearance:"warning",variant:"tonal"},"rarui-toast__compound_1__1cy6jj8e"],[{appearance:"success",variant:"tonal"},"rarui-toast__compound_2__1cy6jj8f"],[{appearance:"error",variant:"tonal"},"rarui-toast__compound_3__1cy6jj8g"],[{appearance:"neutral",variant:"tonal"},"rarui-toast__compound_4__1cy6jj8h"],[{appearance:"invert",variant:"tonal"},"rarui-toast__compound_5__1cy6jj8i"],[{appearance:"info",variant:"ghost"},"rarui-toast__compound_6__1cy6jj8j"],[{appearance:"warning",variant:"ghost"},"rarui-toast__compound_7__1cy6jj8k"],[{appearance:"success",variant:"ghost"},"rarui-toast__compound_8__1cy6jj8l"],[{appearance:"error",variant:"ghost"},"rarui-toast__compound_9__1cy6jj8m"],[{appearance:"neutral",variant:"ghost"},"rarui-toast__compound_10__1cy6jj8n"],[{appearance:"invert",variant:"ghost"},"rarui-toast__compound_11__1cy6jj8o"]]}),container:a({defaultClassName:"rarui-toast_container__1cy6jj816",variantClassNames:{placement:{bottomCenter:"rarui-toast_container_placement_bottomCenter__1cy6jj817",bottomLeft:"rarui-toast_container_placement_bottomLeft__1cy6jj818",bottomRight:"rarui-toast_container_placement_bottomRight__1cy6jj819",topCenter:"rarui-toast_container_placement_topCenter__1cy6jj81a",topLeft:"rarui-toast_container_placement_topLeft__1cy6jj81b",topRight:"rarui-toast_container_placement_topRight__1cy6jj81c"}},defaultVariants:{},compoundVariants:[]}),content:"rarui-toast_content__1cy6jj8p",toastContainer:a({defaultClassName:"rarui-toast_toast-container__1cy6jj8q",variantClassNames:{position:{bottomRight:"rarui-toast_toast-container_position_bottomRight__1cy6jj8r",topRight:"rarui-toast_toast-container_position_topRight__1cy6jj8s",bottomLeft:"rarui-toast_toast-container_position_bottomLeft__1cy6jj8t",topLeft:"rarui-toast_toast-container_position_topLeft__1cy6jj8u"}},defaultVariants:{},compoundVariants:[]}),wrapper:a({defaultClassName:"rarui-toast_wrapper__1cy6jj8z",variantClassNames:{placement:{bottomCenter:"rarui-toast_wrapper_placement_bottomCenter__1cy6jj810",bottomLeft:"rarui-toast_wrapper_placement_bottomLeft__1cy6jj811",bottomRight:"rarui-toast_wrapper_placement_bottomRight__1cy6jj812",topCenter:"rarui-toast_wrapper_placement_topCenter__1cy6jj813",topLeft:"rarui-toast_wrapper_placement_topLeft__1cy6jj814",topRight:"rarui-toast_wrapper_placement_topRight__1cy6jj815"}},defaultVariants:{},compoundVariants:[]})};export{r as sprinkle,_ as styles};

package/dist/packages/feedback/toast/rarui-toast.types.d.ts

@@ -0,0 +1,8 @@
+import { RecipeVariants } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+import { StandardLonghandProperties } from '../../../types/css.types.js';
+import { styles } from './rarui-toast.css.js';
+
+type ToastVariants = NonNullable<RecipeVariants<typeof styles.toast>>;
+type ToastSprinkle = Pick<StandardLonghandProperties, "width">;
+
+export type { ToastSprinkle, ToastVariants };

package/dist/packages/input/button/index.d.ts

@@ -0,0 +1,91 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const button: {
+    classnames: {
+        button: RuntimeFn<{
+            full: {
+                true: {
+                    width: "100%";
+                };
+            };
+            appearance: {
+                brand: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                danger: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                success: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                warning: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                neutral: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                inverted: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            size: {
+                large: {
+                    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                    height: "3rem";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                medium: {
+                    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                    height: "2.5rem";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                small: {
+                    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                    height: "2rem";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            variant: {
+                solid: {
+                    selectors: {
+                        "&:hover:after": {
+                            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        };
+                        "&:active:after": {
+                            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        };
+                    };
+                };
+                outlined: {
+                    backgroundColor: "transparent";
+                };
+                text: {
+                    backgroundColor: "transparent";
+                    textDecoration: "underline";
+                    borderColor: "transparent";
+                };
+                tonal: {
+                    borderColor: "transparent";
+                };
+            };
+        }>;
+    };
+};
+
+export { button };

package/dist/packages/input/button/index.js

@@ -0,0 +1 @@
+import{buttonStyles as r}from"./rarui-button.css.js";var s={classnames:r};export{s as button};

package/dist/packages/input/button/rarui-button.css

@@ -0,0 +1,357 @@
+.rarui-button__15gxywr0 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  text-decoration: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  position: relative;
+  font-weight: var(--rarui-fontWeight-semiBold);
+  line-height: var(--rarui-lineHeight-button-l);
+  font-size: var(--rarui-fontSize-button-l);
+  font-family: var(--rarui-fontFamily-button);
+  border-radius: var(--rarui-shape-border-radius-button);
+  border-width: var(--rarui-shape-border-width-1);
+  border-style: solid;
+  border-color: var(--rarui-colors-surface-brand);
+}
+.rarui-button__15gxywr0:disabled {
+  background: var(--rarui-colors-surface-disabled);
+  border-color: var(--rarui-colors-surface-disabled);
+  color: var(--rarui-colors-content-disabled);
+  cursor: not-allowed;
+}
+.rarui-button__15gxywr0:focus-within {
+  outline: none;
+  box-shadow: var(--rarui-elevation-focus-ring);
+}
+.rarui-button__15gxywr0:after {
+  content: "";
+  transition: opacity 150ms ease;
+  position: absolute;
+  opacity: 0;
+  inset: -1px;
+  border-radius: var(--rarui-shape-border-radius-button);
+}
+.rarui-button__15gxywr0:hover:after {
+  opacity: 1;
+}
+.rarui-button__15gxywr0:active:after {
+  opacity: 1;
+}
+.rarui-button_full_true__15gxywr1 {
+  width: 100%;
+}
+.rarui-button_appearance_brand__15gxywr2 {
+  background-color: var(--rarui-colors-surface-brand);
+  border-color: var(--rarui-colors-surface-brand);
+  color: var(--rarui-colors-content-on-brand);
+}
+.rarui-button_appearance_danger__15gxywr3 {
+  background-color: var(--rarui-colors-surface-error);
+  border-color: var(--rarui-colors-surface-error);
+  color: var(--rarui-colors-content-on-error);
+}
+.rarui-button_appearance_success__15gxywr4 {
+  background-color: var(--rarui-colors-surface-success);
+  border-color: var(--rarui-colors-surface-success);
+  color: var(--rarui-colors-content-on-success);
+}
+.rarui-button_appearance_warning__15gxywr5 {
+  background-color: var(--rarui-colors-surface-warning);
+  border-color: var(--rarui-colors-surface-warning);
+  color: var(--rarui-colors-content-on-warning);
+}
+.rarui-button_appearance_neutral__15gxywr6 {
+  background-color: var(--rarui-colors-surface-invert);
+  border-color: var(--rarui-colors-surface-invert);
+  color: var(--rarui-colors-content-invert);
+}
+.rarui-button_appearance_inverted__15gxywr7 {
+  background-color: var(--rarui-colors-surface-primary);
+  border-color: var(--rarui-colors-surface-primary);
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-button_size_large__15gxywr8 {
+  gap: var(--rarui-spacing-3xs);
+  padding: 0 var(--rarui-spacing-s);
+  height: 3rem;
+  font-size: var(--rarui-fontSize-button-l);
+}
+.rarui-button_size_medium__15gxywr9 {
+  gap: var(--rarui-spacing-3xs);
+  padding: 0 var(--rarui-spacing-xs);
+  height: 2.5rem;
+  font-size: var(--rarui-fontSize-button-m);
+}
+.rarui-button_size_small__15gxywra {
+  gap: var(--rarui-spacing-4xs);
+  padding: 0 var(--rarui-spacing-2xs);
+  height: 2rem;
+  font-size: var(--rarui-fontSize-button-s);
+}
+.rarui-button_variant_solid__15gxywrb:hover:after {
+  background-color: var(--rarui-colors-surface-invert-hover);
+}
+.rarui-button_variant_solid__15gxywrb:active:after {
+  border-color: var(--rarui-colors-surface-invert-press);
+  background-color: var(--rarui-colors-surface-invert-press);
+}
+.rarui-button_variant_outlined__15gxywrc {
+  background-color: transparent;
+}
+.rarui-button_variant_text__15gxywrd {
+  background-color: transparent;
+  text-decoration: underline;
+  border-color: transparent;
+}
+.rarui-button_variant_tonal__15gxywre {
+  border-color: transparent;
+}
+.rarui-button__compound_0__15gxywrf {
+  color: var(--rarui-colors-content-brand);
+  border-color: var(--rarui-colors-border-brand);
+}
+.rarui-button__compound_0__15gxywrf:hover {
+  background-color: var(--rarui-colors-surface-brand-hover);
+}
+.rarui-button__compound_0__15gxywrf:active {
+  background-color: var(--rarui-colors-surface-brand-press);
+}
+.rarui-button__compound_1__15gxywrg {
+  color: var(--rarui-colors-content-error);
+  border-color: var(--rarui-colors-border-error);
+}
+.rarui-button__compound_1__15gxywrg:hover {
+  background-color: var(--rarui-colors-surface-error-hover);
+}
+.rarui-button__compound_1__15gxywrg:active {
+  background-color: var(--rarui-colors-surface-error-press);
+}
+.rarui-button__compound_2__15gxywrh {
+  color: var(--rarui-colors-content-success);
+  border-color: var(--rarui-colors-border-success);
+}
+.rarui-button__compound_2__15gxywrh:hover {
+  background-color: var(--rarui-colors-surface-success-hover);
+}
+.rarui-button__compound_2__15gxywrh:active {
+  background-color: var(--rarui-colors-surface-success-press);
+}
+.rarui-button__compound_3__15gxywri {
+  color: var(--rarui-colors-content-warning);
+  border-color: var(--rarui-colors-border-warning);
+}
+.rarui-button__compound_3__15gxywri:hover {
+  background-color: var(--rarui-colors-surface-warning-hover);
+}
+.rarui-button__compound_3__15gxywri:active {
+  background-color: var(--rarui-colors-surface-warning-press);
+}
+.rarui-button__compound_4__15gxywrj {
+  color: var(--rarui-colors-content-primary);
+  border-color: var(--rarui-colors-border-secondary);
+}
+.rarui-button__compound_4__15gxywrj:hover {
+  background-color: var(--rarui-colors-surface-hover);
+}
+.rarui-button__compound_4__15gxywrj:active {
+  background-color: var(--rarui-colors-surface-press);
+}
+.rarui-button__compound_5__15gxywrk {
+  color: var(--rarui-colors-content-invert);
+  border-color: var(--rarui-colors-border-invert);
+}
+.rarui-button__compound_5__15gxywrk:hover {
+  background-color: var(--rarui-colors-surface-invert-hover);
+}
+.rarui-button__compound_5__15gxywrk:active {
+  background-color: var(--rarui-colors-surface-invert-press);
+}
+.rarui-button__compound_6__15gxywrl {
+  color: var(--rarui-colors-content-brand);
+}
+.rarui-button__compound_6__15gxywrl:hover {
+  background-color: var(--rarui-colors-surface-brand-hover);
+}
+.rarui-button__compound_6__15gxywrl:active {
+  background-color: var(--rarui-colors-surface-brand-press);
+}
+.rarui-button__compound_7__15gxywrm {
+  color: var(--rarui-colors-content-error);
+}
+.rarui-button__compound_7__15gxywrm:hover {
+  background-color: var(--rarui-colors-surface-error-hover);
+}
+.rarui-button__compound_7__15gxywrm:active {
+  background-color: var(--rarui-colors-surface-error-press);
+}
+.rarui-button__compound_8__15gxywrn {
+  color: var(--rarui-colors-content-success);
+}
+.rarui-button__compound_8__15gxywrn:hover {
+  background-color: var(--rarui-colors-surface-success-hover);
+}
+.rarui-button__compound_8__15gxywrn:active {
+  background-color: var(--rarui-colors-surface-success-press);
+}
+.rarui-button__compound_9__15gxywro {
+  color: var(--rarui-colors-content-warning);
+}
+.rarui-button__compound_9__15gxywro:hover {
+  background-color: var(--rarui-colors-surface-warning-hover);
+}
+.rarui-button__compound_9__15gxywro:active {
+  background-color: var(--rarui-colors-surface-warning-press);
+}
+.rarui-button__compound_10__15gxywrp {
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-button__compound_10__15gxywrp:hover {
+  background-color: var(--rarui-colors-surface-hover);
+}
+.rarui-button__compound_10__15gxywrp:active {
+  background-color: var(--rarui-colors-surface-press);
+}
+.rarui-button__compound_11__15gxywrq {
+  color: var(--rarui-colors-content-invert);
+}
+.rarui-button__compound_11__15gxywrq:hover {
+  background-color: var(--rarui-colors-surface-invert-hover);
+}
+.rarui-button__compound_11__15gxywrq:active {
+  background-color: var(--rarui-colors-surface-invert-press);
+}
+.rarui-button__compound_12__15gxywrr {
+  color: var(--rarui-colors-content-brand);
+  background-color: var(--rarui-colors-surface-brand-subdued);
+}
+.rarui-button__compound_12__15gxywrr:hover {
+  background-color: var(--rarui-colors-surface-brand-hover);
+}
+.rarui-button__compound_12__15gxywrr:active {
+  background-color: var(--rarui-colors-surface-brand-press);
+}
+.rarui-button__compound_12__15gxywrr:hover {
+  background-color: var(--rarui-colors-surface-brand-subdued);
+}
+.rarui-button__compound_12__15gxywrr:active {
+  background-color: var(--rarui-colors-surface-brand-subdued);
+}
+.rarui-button__compound_12__15gxywrr:hover:after {
+  background-color: var(--rarui-colors-surface-brand-hover);
+}
+.rarui-button__compound_12__15gxywrr:active:after {
+  background-color: var(--rarui-colors-surface-brand-press);
+}
+.rarui-button__compound_13__15gxywrs {
+  color: var(--rarui-colors-content-error);
+  background-color: var(--rarui-colors-surface-error-subdued);
+}
+.rarui-button__compound_13__15gxywrs:hover {
+  background-color: var(--rarui-colors-surface-error-hover);
+}
+.rarui-button__compound_13__15gxywrs:active {
+  background-color: var(--rarui-colors-surface-error-press);
+}
+.rarui-button__compound_13__15gxywrs:hover {
+  background-color: var(--rarui-colors-surface-error-subdued);
+}
+.rarui-button__compound_13__15gxywrs:active {
+  background-color: var(--rarui-colors-surface-error-subdued);
+}
+.rarui-button__compound_13__15gxywrs:hover:after {
+  background-color: var(--rarui-colors-surface-error-hover);
+}
+.rarui-button__compound_13__15gxywrs:active:after {
+  background-color: var(--rarui-colors-surface-error-press);
+}
+.rarui-button__compound_14__15gxywrt {
+  color: var(--rarui-colors-content-success);
+  background-color: var(--rarui-colors-surface-success-subdued);
+}
+.rarui-button__compound_14__15gxywrt:hover {
+  background-color: var(--rarui-colors-surface-success-hover);
+}
+.rarui-button__compound_14__15gxywrt:active {
+  background-color: var(--rarui-colors-surface-success-press);
+}
+.rarui-button__compound_14__15gxywrt:hover {
+  background-color: var(--rarui-colors-surface-success-subdued);
+}
+.rarui-button__compound_14__15gxywrt:active {
+  background-color: var(--rarui-colors-surface-success-subdued);
+}
+.rarui-button__compound_14__15gxywrt:hover:after {
+  background-color: var(--rarui-colors-surface-success-hover);
+}
+.rarui-button__compound_14__15gxywrt:active:after {
+  background-color: var(--rarui-colors-surface-success-press);
+}
+.rarui-button__compound_15__15gxywru {
+  color: var(--rarui-colors-content-warning);
+  background-color: var(--rarui-colors-surface-warning-subdued);
+}
+.rarui-button__compound_15__15gxywru:hover {
+  background-color: var(--rarui-colors-surface-warning-hover);
+}
+.rarui-button__compound_15__15gxywru:active {
+  background-color: var(--rarui-colors-surface-warning-press);
+}
+.rarui-button__compound_15__15gxywru:hover {
+  background-color: var(--rarui-colors-surface-warning-subdued);
+}
+.rarui-button__compound_15__15gxywru:active {
+  background-color: var(--rarui-colors-surface-warning-subdued);
+}
+.rarui-button__compound_15__15gxywru:hover:after {
+  background-color: var(--rarui-colors-surface-warning-hover);
+}
+.rarui-button__compound_15__15gxywru:active:after {
+  background-color: var(--rarui-colors-surface-warning-press);
+}
+.rarui-button__compound_16__15gxywrv {
+  color: var(--rarui-colors-content-primary);
+  background-color: var(--rarui-colors-surface-secondary);
+}
+.rarui-button__compound_16__15gxywrv:hover {
+  background-color: var(--rarui-colors-surface-hover);
+}
+.rarui-button__compound_16__15gxywrv:active {
+  background-color: var(--rarui-colors-surface-press);
+}
+.rarui-button__compound_16__15gxywrv:hover {
+  background-color: var(--rarui-colors-surface-secondary);
+}
+.rarui-button__compound_16__15gxywrv:active {
+  background-color: var(--rarui-colors-surface-secondary);
+}
+.rarui-button__compound_16__15gxywrv:hover:after {
+  background-color: var(--rarui-colors-surface-hover);
+}
+.rarui-button__compound_16__15gxywrv:active:after {
+  background-color: var(--rarui-colors-surface-press);
+}
+.rarui-button__compound_17__15gxywrw {
+  color: var(--rarui-colors-content-invert);
+  background-color: var(--rarui-colors-surface-invert-secondary);
+}
+.rarui-button__compound_17__15gxywrw:hover {
+  background-color: var(--rarui-colors-surface-invert-hover);
+}
+.rarui-button__compound_17__15gxywrw:active {
+  background-color: var(--rarui-colors-surface-invert-press);
+}
+.rarui-button__compound_17__15gxywrw:hover {
+  background-color: var(--rarui-colors-surface-invert-secondary);
+}
+.rarui-button__compound_17__15gxywrw:active {
+  background-color: var(--rarui-colors-surface-invert-secondary);
+}
+.rarui-button__compound_17__15gxywrw:hover:after {
+  background-color: var(--rarui-colors-surface-invert-hover);
+}
+.rarui-button__compound_17__15gxywrw:active:after {
+  background-color: var(--rarui-colors-surface-invert-press);
+}