@rarui/styles 2.2.5 → 2.3.0-rc.2

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

@@ -0,0 +1,134 @@
+.rarui-select__1ooq5720 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-style: solid;
+  transition: all 150ms ease;
+  box-sizing: border-box;
+  cursor: pointer;
+  background-color: var(--rarui-colors-surface-primary);
+  padding: 0 var(--rarui-spacing-2xs);
+  border-radius: var(--rarui-shape-border-radius-2xs);
+  border-width: var(--rarui-shape-border-width-1);
+  border-color: var(--rarui-colors-border-secondary);
+  color: var(--rarui-colors-content-secondary);
+}
+.rarui-select__1ooq5720:hover {
+  border-color: var(--rarui-colors-border-primary);
+}
+.rarui-select__1ooq5720:active {
+  background-color: var(--rarui-colors-surface-press);
+}
+.rarui-select__1ooq5720:focus {
+  border-color: var(--rarui-colors-border-primary);
+}
+.rarui-select__1ooq5720:focus-within {
+  outline: none;
+  box-shadow: var(--rarui-elevation-focus-ring);
+}
+.rarui-select__1ooq5720:has(input:disabled) {
+  border-color: var(--rarui-colors-surface-disabled);
+}
+.rarui-select__1ooq5720[aria-disabled='true'] {
+  cursor: not-allowed;
+  background-color: var(--rarui-colors-surface-disabled);
+  border-color: var(--rarui-colors-surface-disabled);
+}
+.rarui-select_appearance_success__1ooq5721 {
+  border-color: var(--rarui-colors-border-success);
+}
+.rarui-select_appearance_success__1ooq5721:hover {
+  border-color: var(--rarui-colors-border-success);
+}
+.rarui-select_appearance_success__1ooq5721:focus {
+  border-color: var(--rarui-colors-border-success);
+}
+.rarui-select_appearance_success__1ooq5721:active {
+  background-color: var(--rarui-colors-surface-success-press);
+}
+.rarui-select_appearance_error__1ooq5722 {
+  border-color: var(--rarui-colors-border-error);
+}
+.rarui-select_appearance_error__1ooq5722:hover {
+  border-color: var(--rarui-colors-border-error);
+}
+.rarui-select_appearance_error__1ooq5722:focus {
+  border-color: var(--rarui-colors-border-error);
+}
+.rarui-select_appearance_error__1ooq5722:active {
+  background-color: var(--rarui-colors-surface-error-press);
+}
+.rarui-select_size_large__1ooq5723 {
+  height: 3rem;
+}
+.rarui-select_size_medium__1ooq5724 {
+  height: 2.5rem;
+}
+.rarui-select_size_small__1ooq5725 {
+  height: 2rem;
+  padding: 0 var(--rarui-spacing-3xs);
+}
+.rarui-select_list__1ooq5726 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow-y: scroll;
+  padding: 0.125rem;
+  gap: var(--rarui-spacing-3xs);
+}
+.rarui-select_list__1ooq5726::-webkit-scrollbar {
+  width: .375rem;
+  background: transparent;
+}
+.rarui-select_list__1ooq5726::-webkit-scrollbar-thumb {
+  border-radius: var(--rarui-shape-border-radius-2xs);
+  background-color: var(--rarui-colors-content-disabled);
+}
+.rarui-select_close__1ooq5727 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: transparent;
+  color: currentcolor;
+  transition: all 150ms ease;
+  height: 1rem;
+  width: 1rem;
+  border: 0;
+  padding: 0;
+  border-radius: var(--rarui-shape-border-radius-2xs);
+}
+.rarui-select_close__1ooq5727:focus-within {
+  outline: none;
+  box-shadow: var(--rarui-elevation-focus-ring);
+}
+.rarui-select_close__1ooq5727:hover {
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-select_close__1ooq5727:disabled {
+  cursor: not-allowed;
+  color: var(--rarui-colors-content-disabled);
+}
+@media screen and (min-width: 0px) {
+  .rarui-select_maxHeight-xs__1ooq572c {
+    max-height: var(--maxHeight-xs__1ooq5728);
+  }
+}
+@media screen and (min-width: 768px) {
+  .rarui-select_maxHeight-md__1ooq572d {
+    max-height: var(--maxHeight-md__1ooq5729);
+  }
+}
+@media screen and (min-width: 1200px) {
+  .rarui-select_maxHeight-lg__1ooq572e {
+    max-height: var(--maxHeight-lg__1ooq572a);
+  }
+}
+@media screen and (min-width: 1400px) {
+  .rarui-select_maxHeight-xl__1ooq572f {
+    max-height: var(--maxHeight-xl__1ooq572b);
+  }
+}

package/dist/packages/input/select/rarui-select.css.d.ts

@@ -0,0 +1,54 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const selectStyles: {
+    select: RuntimeFn<{
+        /**
+         * Determines the visual style of the input, affecting its border
+         */
+        appearance: {
+            success: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":hover": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                ":focus": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                ":active": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            error: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":hover": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                ":focus": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                ":active": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        /**
+         * Specifies the size of the badge, controlling its dimensions.
+         */
+        size: {
+            large: {
+                height: "3rem";
+            };
+            medium: {
+                height: "2.5rem";
+            };
+            small: {
+                height: "2rem";
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+            };
+        };
+    }>;
+    list: string;
+    close: string;
+};
+
+export { selectStyles };

package/dist/packages/input/select/rarui-select.css.js

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-select.css";import{c as e}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";var s=e({config:{maxHeight:{dynamic:{default:"rarui-select_maxHeight-xs__1ooq572c",conditions:{xs:"rarui-select_maxHeight-xs__1ooq572c",md:"rarui-select_maxHeight-md__1ooq572d",lg:"rarui-select_maxHeight-lg__1ooq572e",xl:"rarui-select_maxHeight-xl__1ooq572f"}},name:"maxHeight",vars:{conditions:{xs:"var(--maxHeight-xs__1ooq5728)",md:"var(--maxHeight-md__1ooq5729)",lg:"var(--maxHeight-lg__1ooq572a)",xl:"var(--maxHeight-xl__1ooq572b)"},default:"var(--maxHeight-xs__1ooq5728)"},dynamicScale:!0}}}),r={select:a({defaultClassName:"rarui-select__1ooq5720",variantClassNames:{appearance:{success:"rarui-select_appearance_success__1ooq5721",error:"rarui-select_appearance_error__1ooq5722"},size:{large:"rarui-select_size_large__1ooq5723",medium:"rarui-select_size_medium__1ooq5724",small:"rarui-select_size_small__1ooq5725"}},defaultVariants:{},compoundVariants:[]}),list:"rarui-select_list__1ooq5726",close:"rarui-select_close__1ooq5727"};export{s as selectSprinkle,r as selectStyles};

package/dist/packages/input/select/rarui-select.types.d.ts

@@ -0,0 +1,9 @@
+import { RecipeVariants } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+import { selectStyles } from './rarui-select.css.js';
+import { DropdownSprinkle } from '../dropdown/rarui-dropdown.types.js';
+import { StandardLonghandProperties } from '../../../types/css.types.js';
+
+type SelectVariants = NonNullable<RecipeVariants<typeof selectStyles.select>>;
+type SelectSprinkle = Pick<StandardLonghandProperties, "maxHeight"> & Pick<DropdownSprinkle, "zIndex">;
+
+export type { SelectSprinkle, SelectVariants };

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

@@ -0,0 +1,36 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const textarea: {
+    classnames: {
+        textarea: RuntimeFn<{
+            appearance: {
+                success: {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    ":hover": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    ":focus": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    ":disabled": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+                error: {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    ":hover": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    ":focus": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    ":disabled": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+        }>;
+    };
+};
+
+export { textarea };

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

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

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

@@ -0,0 +1,54 @@
+.rarui-textarea__l6tpie0 {
+  width: 100%;
+  border-style: solid;
+  transition: all 150ms ease;
+  box-sizing: border-box;
+  padding: var(--rarui-spacing-2xs);
+  font-family: var(--rarui-fontFamily-body);
+  background-color: var(--rarui-colors-surface-primary);
+  color: var(--rarui-colors-content-primary);
+  border-radius: var(--rarui-shape-border-radius-2xs);
+  border-color: var(--rarui-colors-border-secondary);
+}
+.rarui-textarea__l6tpie0:hover {
+  border-color: var(--rarui-colors-border-primary);
+}
+.rarui-textarea__l6tpie0:focus {
+  border-color: var(--rarui-colors-border-primary);
+}
+.rarui-textarea__l6tpie0:focus-within {
+  outline: none;
+  box-shadow: var(--rarui-elevation-focus-ring);
+}
+.rarui-textarea__l6tpie0:disabled {
+  background-color: var(--rarui-colors-surface-disabled);
+  border-color: var(--rarui-colors-surface-disabled);
+  color: var(--rarui-colors-content-disabled);
+}
+.rarui-textarea__l6tpie0::placeholder {
+  color: var(--rarui-colors-content-disabled);
+}
+.rarui-textarea_appearance_success__l6tpie1 {
+  border-color: var(--rarui-colors-border-success);
+}
+.rarui-textarea_appearance_success__l6tpie1:hover {
+  border-color: var(--rarui-colors-border-success);
+}
+.rarui-textarea_appearance_success__l6tpie1:focus {
+  border-color: var(--rarui-colors-border-success);
+}
+.rarui-textarea_appearance_success__l6tpie1:disabled {
+  border-color: var(--rarui-colors-surface-disabled);
+}
+.rarui-textarea_appearance_error__l6tpie2 {
+  border-color: var(--rarui-colors-border-error);
+}
+.rarui-textarea_appearance_error__l6tpie2:hover {
+  border-color: var(--rarui-colors-border-error);
+}
+.rarui-textarea_appearance_error__l6tpie2:focus {
+  border-color: var(--rarui-colors-border-error);
+}
+.rarui-textarea_appearance_error__l6tpie2:disabled {
+  border-color: var(--rarui-colors-surface-disabled);
+}

package/dist/packages/input/textarea/rarui-textarea.css.d.ts

@@ -0,0 +1,37 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const textareaStyles: {
+    textarea: RuntimeFn<{
+        /**
+         * Determines the visual style of the textarea, affecting its border
+         */
+        appearance: {
+            success: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":hover": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                ":focus": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                ":disabled": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            error: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":hover": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                ":focus": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                ":disabled": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+    }>;
+};
+
+export { textareaStyles };

package/dist/packages/input/textarea/rarui-textarea.css.js

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-textarea.css";import{c as a}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var e={textarea:a({defaultClassName:"rarui-textarea__l6tpie0",variantClassNames:{appearance:{success:"rarui-textarea_appearance_success__l6tpie1",error:"rarui-textarea_appearance_error__l6tpie2"}},defaultVariants:{},compoundVariants:[]})};export{e as textareaStyles};

package/dist/packages/input/textarea/rarui-textarea.types.d.ts

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

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

@@ -0,0 +1,106 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const toggle: {
+    classnames: {
+        toggle: RuntimeFn<{
+            size: {
+                large: {
+                    ":before": {
+                        width: "1.5rem";
+                        height: "1.5rem";
+                    };
+                    ":after": {
+                        top: "-.3125rem";
+                        left: "-.3125rem";
+                        height: "2.75rem";
+                        width: "2.75rem";
+                    };
+                };
+                small: {
+                    ":before": {
+                        width: "1rem";
+                        height: "1rem";
+                    };
+                    ":after": {
+                        top: "-.4375rem";
+                        left: "-.5rem";
+                        height: "2.5rem";
+                        width: "2.5rem";
+                    };
+                };
+            };
+            error: {
+                true: {
+                    ":before": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    selectors: {
+                        "&:has(input:checked):before": {
+                            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        };
+                    };
+                };
+            };
+        }>;
+        input: string;
+        slider: RuntimeFn<{
+            size: {
+                large: {
+                    width: "3.25rem";
+                    height: "2rem";
+                    ":after": {
+                        content: "";
+                    };
+                };
+                small: {
+                    width: "2.75rem";
+                    height: "1.5rem";
+                };
+            };
+            error: {
+                true: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "&[aria-disabled='true']": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+        }>;
+        unchecked: RuntimeFn<{
+            size: {
+                large: {
+                    left: "1rem";
+                    height: "1.5rem";
+                    width: "1.5rem";
+                    borderRadius: "0.75rem";
+                };
+                small: {
+                    left: "0.75rem";
+                    width: "1rem";
+                    height: "1rem";
+                    borderRadius: "0.5rem";
+                };
+            };
+        }>;
+        checked: RuntimeFn<{
+            size: {
+                large: {
+                    left: "2.25rem";
+                    height: "1.5rem";
+                    width: "1.5rem";
+                    borderRadius: "0.75rem";
+                };
+                small: {
+                    left: "2rem";
+                    width: "1rem";
+                    height: "1rem";
+                    borderRadius: "0.5rem";
+                };
+            };
+        }>;
+    };
+};
+
+export { toggle };

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

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

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

@@ -0,0 +1,208 @@
+.rarui-toggle__1acg1b30 {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  gap: var(--rarui-spacing-3xs);
+  position: relative;
+  cursor: pointer;
+  border-radius: var(--rarui-shape-border-radius-pill);
+}
+.rarui-toggle__1acg1b30:before {
+  content: "";
+  position: absolute;
+  left: .3125rem;
+  background-color: var(--rarui-colors-surface-invert-secondary);
+  border-radius: var(--rarui-shape-border-radius-pill);
+  z-index: 1;
+  transition: all 150ms ease;
+}
+.rarui-toggle__1acg1b30:after {
+  content: "";
+  inset: 0;
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+  border-radius: 100%;
+  transition: all 150ms ease;
+  background-color: transparent;
+}
+.rarui-toggle__1acg1b30:hover:after {
+  opacity: 1;
+  background-color: var(--rarui-colors-surface-hover);
+}
+.rarui-toggle__1acg1b30:has(input:checked):before {
+  left: 1.5625rem;
+  background-color: var(--rarui-colors-surface-primary);
+}
+.rarui-toggle__1acg1b30:has(input:checked):after {
+  left: .9375rem;
+}
+.rarui-toggle__1acg1b30[aria-disabled='true']:hover:after {
+  opacity: 0;
+}
+.rarui-toggle__1acg1b30[aria-disabled='true']:before {
+  background-color: var(--rarui-colors-surface-primary);
+}
+.rarui-toggle__1acg1b30:has(input:checked)[aria-disabled='true']:before {
+  background-color: var(--rarui-colors-surface-primary);
+}
+.rarui-toggle_size_large__1acg1b31:before {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.rarui-toggle_size_large__1acg1b31:after {
+  top: -.3125rem;
+  left: -.3125rem;
+  height: 2.75rem;
+  width: 2.75rem;
+}
+.rarui-toggle_size_small__1acg1b32:before {
+  width: 1rem;
+  height: 1rem;
+}
+.rarui-toggle_size_small__1acg1b32:after {
+  top: -.4375rem;
+  left: -.5rem;
+  height: 2.5rem;
+  width: 2.5rem;
+}
+.rarui-toggle_error_true__1acg1b33:before {
+  background-color: var(--rarui-colors-surface-error);
+}
+.rarui-toggle_error_true__1acg1b33:has(input:checked):before {
+  background-color: var(--rarui-colors-content-on-error);
+}
+.rarui-toggle_input__1acg1b34 {
+  position: absolute;
+  overflow: hidden;
+  opacity: 0;
+  height: 0;
+  width: 0;
+}
+.rarui-toggle_slider__1acg1b35 {
+  background-color: var(--rarui-colors-surface-disabled);
+  border-color: var(--rarui-colors-border-secondary);
+  border-radius: var(--rarui-shape-border-radius-pill);
+  border-width: var(--rarui-shape-border-width-1);
+  border-style: solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: all 150ms ease;
+  overflow: hidden;
+}
+.rarui-toggle_slider__1acg1b35:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.rarui-toggle_slider__1acg1b35[aria-disabled='true'] {
+  border-color: var(--rarui-colors-surface-disabled);
+}
+.rarui-toggle_slider__1acg1b35:not([aria-disabled='true']):hover:before {
+  background-color: var(--rarui-colors-surface-hover);
+}
+.rarui-toggle_slider_size_large__1acg1b36 {
+  width: 3.25rem;
+  height: 2rem;
+}
+.rarui-toggle_slider_size_large__1acg1b36:after {
+  content: "";
+}
+.rarui-toggle_slider_size_small__1acg1b37 {
+  width: 2.75rem;
+  height: 1.5rem;
+}
+.rarui-toggle_slider_error_true__1acg1b38 {
+  background-color: var(--rarui-colors-surface-error-subdued);
+  border-color: var(--rarui-colors-border-error);
+  &[aria-disabled='true'] {
+    background-color: var(--rarui-colors-surface-disabled);
+    border-color: var(--rarui-colors-surface-disabled);
+  }
+}
+.rarui-toggle_unchecked__1acg1b39 {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  z-index: 2;
+  opacity: 1;
+  left: 0;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: all 150ms ease;
+}
+.rarui-toggle__1acg1b30:has(.rarui-toggle_input__1acg1b34:checked) .rarui-toggle_unchecked__1acg1b39 {
+  opacity: 0;
+}
+.rarui-toggle_unchecked__1acg1b39[aria-disabled='true']:after, .rarui-toggle_unchecked__1acg1b39[aria-disabled='true']:before {
+  background-color: var(--rarui-colors-surface-disabled);
+}
+.rarui-toggle_unchecked_size_large__1acg1b3a {
+  left: 1rem;
+  height: 1.5rem;
+  width: 1.5rem;
+  border-radius: 0.75rem;
+}
+.rarui-toggle_unchecked_size_small__1acg1b3b {
+  left: 0.75rem;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.5rem;
+}
+.rarui-toggle_checked__1acg1b3c {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  z-index: 2;
+  left: 0;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: all 150ms ease;
+}
+.rarui-toggle__1acg1b30:has(.rarui-toggle_input__1acg1b34:checked) .rarui-toggle_checked__1acg1b3c {
+  opacity: 1;
+}
+.rarui-toggle_checked__1acg1b3c[aria-disabled='true']:after, .rarui-toggle_checked__1acg1b3c[aria-disabled='true']:before {
+  background-color: var(--rarui-colors-surface-disabled);
+}
+.rarui-toggle_checked_size_large__1acg1b3d {
+  left: 2.25rem;
+  height: 1.5rem;
+  width: 1.5rem;
+  border-radius: 0.75rem;
+}
+.rarui-toggle_checked_size_small__1acg1b3e {
+  left: 2rem;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.5rem;
+}
+.rarui-toggle__1acg1b30:has(.rarui-toggle_input__1acg1b34:checked) .rarui-toggle_slider__1acg1b35 {
+  background-color: var(--rarui-colors-surface-brand);
+  border-color: var(--rarui-colors-surface-brand);
+}
+.rarui-toggle__1acg1b30:has(.rarui-toggle_input__1acg1b34:checked) .rarui-toggle_slider__1acg1b35[aria-disabled='true'] {
+  background-color: var(--rarui-colors-surface-disabled);
+  border-color: var(--rarui-colors-surface-disabled);
+}
+.rarui-toggle__1acg1b30:has(.rarui-toggle_input__1acg1b34:checked) .rarui-toggle_slider__1acg1b35:not([aria-disabled='true']):hover:before {
+  background-color: var(--rarui-colors-surface-hover);
+}
+.rarui-toggle__1acg1b30:has(.rarui-toggle_input__1acg1b34:checked) .rarui-toggle_slider__1acg1b35:after {
+  opacity: 1;
+}
+.rarui-toggle__1acg1b30:has(.rarui-toggle_input__1acg1b34:checked) .rarui-toggle_slider_error_true__1acg1b38 {
+  background-color: var(--rarui-colors-surface-error);
+  border-color: var(--rarui-colors-surface-error);
+}
+.rarui-toggle__1acg1b30:has(.rarui-toggle_input__1acg1b34:checked) .rarui-toggle_slider_error_true__1acg1b38:after {
+  opacity: 0;
+}