@rarui/styles 2.2.5 → 2.3.0-rc.2

package/dist/packages/feedback/status/rarui-status.css

@@ -0,0 +1,108 @@
+.rarui-status__wfzj070 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  gap: var(--rarui-spacing-3xs);
+  font-weight: var(--rarui-fontWeight-medium);
+  line-height: var(--rarui-lineHeight-label-m);
+  font-size: var(--rarui-fontSize-label-m);
+  font-family: var(--rarui-fontFamily-body);
+  border-radius: var(--rarui-shape-border-radius-2xs);
+  padding: 0 var(--rarui-spacing-3xs);
+}
+.rarui-status_full_true__wfzj071 {
+  width: 100%;
+}
+.rarui-status_appearance_success__wfzj072 {
+  background-color: var(--rarui-colors-surface-success);
+  color: var(--rarui-colors-content-on-success);
+}
+.rarui-status_appearance_warning__wfzj073 {
+  background-color: var(--rarui-colors-surface-warning);
+  color: var(--rarui-colors-content-on-warning);
+}
+.rarui-status_appearance_danger__wfzj074 {
+  background-color: var(--rarui-colors-surface-error);
+  color: var(--rarui-colors-content-on-error);
+}
+.rarui-status_appearance_inverted__wfzj075 {
+  background-color: var(--rarui-colors-surface-primary);
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-status_appearance_neutral__wfzj076 {
+  background-color: var(--rarui-colors-surface-invert);
+  color: var(--rarui-colors-content-invert);
+}
+.rarui-status_appearance_info__wfzj077 {
+  background-color: var(--rarui-colors-surface-info);
+  color: var(--rarui-colors-content-on-info);
+}
+.rarui-status_size_normal__wfzj078 {
+  height: 1.75rem;
+  font-size: var(--rarui-fontSize-label-m);
+}
+.rarui-status_size_small__wfzj079 {
+  height: 1.5rem;
+  font-size: var(--rarui-fontSize-label-s);
+}
+.rarui-status_variant_text__wfzj07b {
+  background-color: transparent;
+}
+.rarui-status__compound_0__wfzj07d {
+  color: var(--rarui-colors-content-success);
+}
+.rarui-status__compound_1__wfzj07e {
+  color: var(--rarui-colors-content-warning);
+}
+.rarui-status__compound_2__wfzj07f {
+  color: var(--rarui-colors-content-error);
+}
+.rarui-status__compound_3__wfzj07g {
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-status__compound_4__wfzj07h {
+  color: var(--rarui-colors-content-info);
+}
+.rarui-status__compound_5__wfzj07i {
+  color: var(--rarui-colors-content-invert);
+}
+.rarui-status__compound_6__wfzj07j {
+  background-color: var(--rarui-colors-surface-success-subdued);
+  color: var(--rarui-colors-content-success);
+}
+.rarui-status__compound_7__wfzj07k {
+  background-color: var(--rarui-colors-surface-warning-subdued);
+  color: var(--rarui-colors-content-warning);
+}
+.rarui-status__compound_8__wfzj07l {
+  background-color: var(--rarui-colors-surface-error-subdued);
+  color: var(--rarui-colors-content-error);
+}
+.rarui-status__compound_9__wfzj07m {
+  background-color: var(--rarui-colors-surface-secondary);
+  color: var(--rarui-colors-content-secondary);
+}
+.rarui-status__compound_10__wfzj07n {
+  background-color: var(--rarui-colors-surface-invert-disabled);
+  color: var(--rarui-colors-content-invert-secondary);
+}
+.rarui-status__compound_11__wfzj07o {
+  background-color: var(--rarui-colors-surface-info-subdued);
+  color: var(--rarui-colors-content-info);
+}
+.rarui-status_dot__wfzj07p {
+  background-color: currentcolor;
+  border-radius: var(--rarui-shape-border-radius-pill);
+}
+.rarui-status_dot_size_normal__wfzj07q {
+  height: .5rem;
+  width: .5rem;
+}
+.rarui-status_dot_size_small__wfzj07r {
+  height: .25rem;
+  width: .25rem;
+}

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

@@ -0,0 +1,85 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const statusStyles: {
+    status: RuntimeFn<{
+        /**
+         * Specifies whether the status should take up the full width of its container.
+         * This variant is useful when you want to make a status span the entire width of its parent container.
+         *
+         */
+        full: {
+            true: {
+                width: "100%";
+            };
+        };
+        /**
+         * Determines the visual style of the status, influencing its color scheme.
+         */
+        appearance: {
+            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})`;
+            };
+            danger: {
+                backgroundColor: `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})`;
+                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})`;
+            };
+            info: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Specifies the size of the badge, controlling its dimensions.
+         */
+        size: {
+            normal: {
+                height: "1.75rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            small: {
+                height: "1.5rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Specifies whether the status is in subdued mode
+         */
+        /**
+         * Specifies the variant of the status
+         */
+        variant: {
+            solid: {};
+            text: {
+                backgroundColor: "transparent";
+            };
+            subdued: {};
+        };
+    }>;
+    dot: RuntimeFn<{
+        size: {
+            normal: {
+                height: ".5rem";
+                width: ".5rem";
+            };
+            small: {
+                height: ".25rem";
+                width: ".25rem";
+            };
+        };
+    }>;
+};
+
+export { statusStyles };

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

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-status.css";import{c as a}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var r={status:a({defaultClassName:"rarui-status__wfzj070",variantClassNames:{full:{true:"rarui-status_full_true__wfzj071"},appearance:{success:"rarui-status_appearance_success__wfzj072",warning:"rarui-status_appearance_warning__wfzj073",danger:"rarui-status_appearance_danger__wfzj074",inverted:"rarui-status_appearance_inverted__wfzj075",neutral:"rarui-status_appearance_neutral__wfzj076",info:"rarui-status_appearance_info__wfzj077"},size:{normal:"rarui-status_size_normal__wfzj078",small:"rarui-status_size_small__wfzj079"},variant:{solid:"rarui-status_variant_solid__wfzj07a",text:"rarui-status_variant_text__wfzj07b",subdued:"rarui-status_variant_subdued__wfzj07c"}},defaultVariants:{},compoundVariants:[[{appearance:"success",variant:"text"},"rarui-status__compound_0__wfzj07d"],[{appearance:"warning",variant:"text"},"rarui-status__compound_1__wfzj07e"],[{appearance:"danger",variant:"text"},"rarui-status__compound_2__wfzj07f"],[{appearance:"inverted",variant:"text"},"rarui-status__compound_3__wfzj07g"],[{appearance:"info",variant:"text"},"rarui-status__compound_4__wfzj07h"],[{appearance:"neutral",variant:"text"},"rarui-status__compound_5__wfzj07i"],[{appearance:"success",variant:"subdued"},"rarui-status__compound_6__wfzj07j"],[{appearance:"warning",variant:"subdued"},"rarui-status__compound_7__wfzj07k"],[{appearance:"danger",variant:"subdued"},"rarui-status__compound_8__wfzj07l"],[{appearance:"inverted",variant:"subdued"},"rarui-status__compound_9__wfzj07m"],[{appearance:"neutral",variant:"subdued"},"rarui-status__compound_10__wfzj07n"],[{appearance:"info",variant:"subdued"},"rarui-status__compound_11__wfzj07o"]]}),dot:a({defaultClassName:"rarui-status_dot__wfzj07p",variantClassNames:{size:{normal:"rarui-status_dot_size_normal__wfzj07q",small:"rarui-status_dot_size_small__wfzj07r"}},defaultVariants:{},compoundVariants:[]})};export{r as statusStyles};

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

@@ -0,0 +1,6 @@
+import { RecipeVariants } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+import { statusStyles } from './rarui-status.css.js';
+
+type StatusVariants = NonNullable<RecipeVariants<typeof statusStyles.status>>;
+
+export type { StatusVariants };

package/dist/packages/feedback/toast/index.d.ts

@@ -0,0 +1,151 @@
+import { SprinklesFn } from '../../../node_modules/rainbow-sprinkles/dist/declarations/src/createRuntimeFn.d.js';
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const toast: {
+    classnames: {
+        toast: RuntimeFn<{
+            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})`;
+                };
+            };
+            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})`;
+                };
+            };
+            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`;
+                };
+            };
+        }>;
+    };
+    sprinkle: SprinklesFn<[{
+        config: {
+            width: {
+                dynamic: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+                dynamicScale: true;
+                name: "width";
+                vars: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+            };
+        };
+    }]>;
+};
+
+export { toast };

package/dist/packages/feedback/toast/index.js

@@ -0,0 +1 @@
+import{__assign as r}from"tslib";import{styles as s,sprinkle as o}from"./rarui-toast.css.js";var t={classnames:r({},s),sprinkle:o};export{t as toast};

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

@@ -0,0 +1,229 @@
+@keyframes rarui-toast_animartionToastBottonCenter__1cy6jj8v {
+  from {
+    transform: translateY(calc(100%));
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes rarui-toast_animartionToastTopCenter__1cy6jj8w {
+  from {
+    transform: translateY(calc(-100%));
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes rarui-toast_animartionToastLeft__1cy6jj8x {
+  from {
+    transform: translateX(calc(-100%));
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes rarui-toast_animartionToastRight__1cy6jj8y {
+  from {
+    transform: translateX(calc(100%));
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+.rarui-toast__1cy6jj80 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  gap: var(--rarui-spacing-2xs);
+  max-width: 100%;
+  width: 420px;
+}
+.rarui-toast_appearance_info__1cy6jj81 {
+  background-color: var(--rarui-colors-surface-info);
+  color: var(--rarui-colors-content-on-info);
+}
+.rarui-toast_appearance_success__1cy6jj82 {
+  background-color: var(--rarui-colors-surface-success);
+  color: var(--rarui-colors-content-on-success);
+}
+.rarui-toast_appearance_warning__1cy6jj83 {
+  background-color: var(--rarui-colors-surface-warning);
+  color: var(--rarui-colors-content-on-warning);
+}
+.rarui-toast_appearance_error__1cy6jj84 {
+  background-color: var(--rarui-colors-surface-error);
+  color: var(--rarui-colors-content-on-error);
+}
+.rarui-toast_appearance_neutral__1cy6jj85 {
+  background-color: var(--rarui-colors-surface-invert-secondary);
+  color: var(--rarui-colors-content-invert-secondary);
+}
+.rarui-toast_appearance_invert__1cy6jj86 {
+  background-color: var(--rarui-colors-surface-secondary);
+  color: var(--rarui-colors-content-secondary);
+}
+.rarui-toast_size_small__1cy6jj87 {
+  padding: var(--rarui-spacing-3xs) var(--rarui-spacing-2xs);
+  gap: var(--rarui-spacing-3xs);
+}
+.rarui-toast_size_medium__1cy6jj88 {
+  padding: var(--rarui-spacing-2xs) var(--rarui-spacing-xs);
+}
+.rarui-toast_size_large__1cy6jj89 {
+  padding: var(--rarui-spacing-xs) var(--rarui-spacing-s);
+  gap: var(--rarui-spacing-xs);
+}
+.rarui-toast_variant_tonal__1cy6jj8b {
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-toast_variant_ghost__1cy6jj8c {
+  border-left: solid;
+  border-width: 4px;
+  background-color: var(--rarui-colors-surface-primary);
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-toast__compound_0__1cy6jj8d {
+  background-color: var(--rarui-colors-surface-info-subdued);
+}
+.rarui-toast__compound_1__1cy6jj8e {
+  background-color: var(--rarui-colors-surface-warning-subdued);
+}
+.rarui-toast__compound_2__1cy6jj8f {
+  background-color: var(--rarui-colors-surface-success-subdued);
+}
+.rarui-toast__compound_3__1cy6jj8g {
+  background-color: var(--rarui-colors-surface-error-subdued);
+}
+.rarui-toast__compound_4__1cy6jj8h {
+  color: var(--rarui-colors-content-invert-secondary);
+}
+.rarui-toast__compound_5__1cy6jj8i {
+  color: var(--rarui-colors-content-secondary);
+}
+.rarui-toast__compound_6__1cy6jj8j {
+  border-color: var(--rarui-colors-border-info);
+}
+.rarui-toast__compound_7__1cy6jj8k {
+  border-color: var(--rarui-colors-border-warning);
+}
+.rarui-toast__compound_8__1cy6jj8l {
+  border-color: var(--rarui-colors-border-success);
+}
+.rarui-toast__compound_9__1cy6jj8m {
+  border-color: var(--rarui-colors-border-error);
+}
+.rarui-toast__compound_10__1cy6jj8n {
+  border: revert;
+  background-color: var(--rarui-colors-surface-invert-secondary);
+  color: var(--rarui-colors-content-invert-secondary);
+}
+.rarui-toast__compound_11__1cy6jj8o {
+  border: revert;
+  background-color: var(--rarui-colors-surface-secondary);
+  color: var(--rarui-colors-content-secondary);
+}
+.rarui-toast_content__1cy6jj8p {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.rarui-toast_toast-container__1cy6jj8q {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: var(--rarui-spacing-xs);
+  padding: var(--rarui-spacing-xs);
+  list-style: none;
+}
+.rarui-toast_toast-container_position_bottomRight__1cy6jj8r {
+  right: 0;
+  bottom: 0;
+}
+.rarui-toast_toast-container_position_topRight__1cy6jj8s {
+  top: 0;
+  right: 0;
+}
+.rarui-toast_toast-container_position_bottomLeft__1cy6jj8t {
+  bottom: 0;
+  left: 0;
+}
+.rarui-toast_toast-container_position_topLeft__1cy6jj8u {
+  top: 0;
+  left: 0;
+}
+.rarui-toast_wrapper__1cy6jj8z {
+  will-change: transform;
+}
+.rarui-toast_wrapper_placement_bottomCenter__1cy6jj810 {
+  animation: rarui-toast_animartionToastBottonCenter__1cy6jj8v 800ms cubic-bezier(0,0.46,0,1.04) both;
+}
+.rarui-toast_wrapper_placement_bottomLeft__1cy6jj811 {
+  animation: rarui-toast_animartionToastLeft__1cy6jj8x 800ms cubic-bezier(0,0.46,0,1.04) both;
+}
+.rarui-toast_wrapper_placement_bottomRight__1cy6jj812 {
+  animation: rarui-toast_animartionToastRight__1cy6jj8y 800ms cubic-bezier(0,0.46,0,1.04) both;
+}
+.rarui-toast_wrapper_placement_topCenter__1cy6jj813 {
+  animation: rarui-toast_animartionToastTopCenter__1cy6jj8w 800ms cubic-bezier(0,0.46,0,1.04) both;
+}
+.rarui-toast_wrapper_placement_topLeft__1cy6jj814 {
+  animation: rarui-toast_animartionToastLeft__1cy6jj8x 800ms cubic-bezier(0,0.46,0,1.04) both;
+}
+.rarui-toast_wrapper_placement_topRight__1cy6jj815 {
+  animation: rarui-toast_animartionToastRight__1cy6jj8y 800ms cubic-bezier(0,0.46,0,1.04) both;
+}
+.rarui-toast_container__1cy6jj816 {
+  display: flex;
+  position: fixed;
+  flex-direction: column-reverse;
+  width: fit-content;
+  gap: var(--rarui-spacing-xs);
+  z-index: var(--rarui-zIndex-900);
+}
+.rarui-toast_container_placement_bottomCenter__1cy6jj817 {
+  left: 50%;
+  transform: translate(-50%);
+  bottom: 2rem;
+}
+.rarui-toast_container_placement_bottomLeft__1cy6jj818 {
+  left: 0;
+  bottom: 2rem;
+}
+.rarui-toast_container_placement_bottomRight__1cy6jj819 {
+  right: 0;
+  bottom: 2rem;
+}
+.rarui-toast_container_placement_topCenter__1cy6jj81a {
+  left: 50%;
+  transform: translate(-50%);
+  top: 2rem;
+}
+.rarui-toast_container_placement_topLeft__1cy6jj81b {
+  left: 0;
+  top: 2rem;
+}
+.rarui-toast_container_placement_topRight__1cy6jj81c {
+  right: 0;
+  top: 2rem;
+}
+@media screen and (min-width: 0px) {
+  .rarui-toast_width-xs__1cy6jj81h {
+    width: var(--width-xs__1cy6jj81d);
+  }
+}
+@media screen and (min-width: 768px) {
+  .rarui-toast_width-md__1cy6jj81i {
+    width: var(--width-md__1cy6jj81e);
+  }
+}
+@media screen and (min-width: 1200px) {
+  .rarui-toast_width-lg__1cy6jj81j {
+    width: var(--width-lg__1cy6jj81f);
+  }
+}
+@media screen and (min-width: 1400px) {
+  .rarui-toast_width-xl__1cy6jj81k {
+    width: var(--width-xl__1cy6jj81g);
+  }
+}