@vygruppen/spor-react 10.3.0 → 10.4.0

package/dist/index.d.mts

@@ -903,6 +903,7 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
     inputRef?: React.RefObject<HTMLInputElement>;
     /** If you want to allow an empty collection */
     allowsEmptyCollection?: boolean;
+    variant?: "base" | "floating";
 } & OverridableInputProps;
 /**
  * A combobox is a combination of an input and a list of suggestions.
@@ -927,7 +928,7 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
  * </Combobox>
  * ```
  */
-declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, inputRef: externalInputRef, allowsEmptyCollection, ...rest }: ComboboxProps<T>): React.JSX.Element;
+declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, inputRef: externalInputRef, allowsEmptyCollection, variant, ...rest }: ComboboxProps<T>): React.JSX.Element;
 
 type FormControlProps = FormControlProps$1;
 declare const FormControl: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", FormControlProps$1>;
@@ -1177,6 +1178,7 @@ type ListBoxProps<T> = AriaListBoxProps<T> & Omit<BoxProps, "filter" | "autoFocu
     /** UI to render if the collection is empty */
     emptyContent?: React.ReactNode;
     maxWidth?: BoxProps["maxWidth"];
+    variant?: "base" | "floating";
 };
 /**
  * A component that renders a list box with selectable options.
@@ -1212,7 +1214,7 @@ type ListBoxProps<T> = AriaListBoxProps<T> & Omit<BoxProps, "filter" | "autoFocu
  * );
  * ```
  */
-declare function ListBox<T extends object>({ isLoading, listBoxRef, state, maxWidth, ...props }: ListBoxProps<T>): React.JSX.Element;
+declare function ListBox<T extends object>({ isLoading, listBoxRef, state, maxWidth, variant, ...props }: ListBoxProps<T>): React.JSX.Element;
 /**
  * Renders a label for a listbox item.
  *
@@ -1321,6 +1323,7 @@ type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
     onChange?: (change: CountryCodeAndPhoneNumber) => void;
     /** The optional value of the country code and phone number */
     value?: CountryCodeAndPhoneNumber;
+    variant?: "base" | "floating";
 };
 /**
  * A component for entering phone numbers.
@@ -1404,6 +1407,7 @@ declare const SearchInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"
 
 type SwitchProps = Omit<SwitchProps$1, "colorScheme" | "variant"> & {
     size?: "sm" | "md" | "lg";
+    as?: As;
 };
 /**
  * A switch lets you toggle between on and off, yes and no. It's an alternative to a checkbox.
@@ -1428,7 +1432,7 @@ type SwitchProps = Omit<SwitchProps$1, "colorScheme" | "variant"> & {
  */
 declare const Switch: _chakra_ui_system_dist_system_types.ComponentWithAs<"input", SwitchProps>;
 
-type TextareaProps = Exclude<TextareaProps$1, "variant" | "size"> & {
+type TextareaProps = Exclude<TextareaProps$1, "size"> & {
     label?: string;
 };
 /**
@@ -4064,6 +4068,7 @@ declare const theme: {
                     width?: string | undefined;
                     whiteSpace?: string | undefined;
                     fontSize: ("mobile.xs" | "desktop.sm")[];
+                    marginTop: number;
                 };
                 innerButton: {
                     display: string;
@@ -4355,26 +4360,6 @@ declare const theme: {
                     paddingX: number;
                     height: number;
                     fontSize: string;
-                    _hover: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    } | {
-                        outline: string;
-                        outlineColor: string;
-                    };
-                    _active: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                        backgroundColor: string;
-                    } | {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    };
                     _focusVisible: {
                         outlineOffset: number;
                         outlineWidth: string;
@@ -4422,7 +4407,7 @@ declare const theme: {
                         outlineColor: string;
                     };
                     " + label": {
-                        fontSize: ("mobile.sm" | "desktop.sm")[];
+                        fontSize: string[];
                         top: string;
                         left: any;
                         zIndex: number;
@@ -4456,19 +4441,173 @@ declare const theme: {
             variants?: {
                 base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     field: {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _active: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        _selected: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
                         outlineOffset: string;
                         backgroundColor: string;
                     } | {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _active: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        _selected: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                    } | {
+                        _hover: {
+                            backgroundColor: string;
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _selected: {
+                            backgroundColor: string;
+                            outline: string;
+                            outlineColor: string;
+                        };
                         outline: string;
                         outlineColor: string;
                         backgroundColor: string;
+                        boxShadow: string;
                     };
                 };
                 floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     field: {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _active: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        _selected: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _active: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        _selected: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                    } | {
                         _hover: {
                             backgroundColor: string;
                             outline: string;
@@ -4733,20 +4872,6 @@ declare const theme: {
         ListBox: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 container: {
-                    outlineWidth: string;
-                    outlineColor: string;
-                    outlineStyle: string;
-                    outlineOffset: string;
-                    boxShadow: string;
-                    overflowY: string;
-                    maxHeight: string;
-                    width: string;
-                    listStyle: string;
-                    borderBottomRadius: string;
-                    backgroundColor: string;
-                } | {
-                    outline: string;
-                    outlineColor: string;
                     boxShadow: string;
                     overflowY: string;
                     maxHeight: string;
@@ -4792,13 +4917,27 @@ declare const theme: {
                 }>;
             } | undefined;
             variants?: {
-                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("label" | "container" | "description" | "item")[];
-                }>;
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    container: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                    };
+                };
+                floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    container: {
+                        outline: string;
+                        outlineColor: string;
+                    };
+                };
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: string | number | undefined;
+                variant?: "base" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("label" | "container" | "description" | "item")[];
@@ -5589,7 +5728,6 @@ declare const theme: {
                 field: {
                     appearance: string;
                     paddingTop: string;
-                    "option, optgroup": {};
                     width: string;
                     outline: string;
                     border: number;
@@ -5600,26 +5738,6 @@ declare const theme: {
                     paddingX: number;
                     height: number;
                     fontSize: string;
-                    _hover: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    } | {
-                        outline: string;
-                        outlineColor: string;
-                    };
-                    _active: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                        backgroundColor: string;
-                    } | {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    };
                     _focusVisible: {
                         outlineOffset: number;
                         outlineWidth: string;
@@ -5667,7 +5785,7 @@ declare const theme: {
                         outlineColor: string;
                     };
                     " + label": {
-                        fontSize: ("mobile.sm" | "desktop.sm")[];
+                        fontSize: string[];
                         top: string;
                         left: any;
                         zIndex: number;
@@ -5703,26 +5821,213 @@ declare const theme: {
                 }>;
             } | undefined;
             variants?: {
-                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("icon" | "root" | "field")[];
-                }>;
-            } | undefined;
-            defaultProps?: {
-                size?: string | number | undefined;
-                variant?: string | number | undefined;
-                colorScheme?: string | undefined;
-            } | undefined;
-            parts: ("icon" | "root" | "field")[];
-        };
-        Skeleton: {
-            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                [x: string]: any;
-                opacity: number;
-                borderRadius: string;
-                borderColor: any;
-                background: any;
-                animation: string;
-            }) | undefined;
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    field: {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _active: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        _selected: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _active: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        _selected: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                    } | {
+                        _hover: {
+                            backgroundColor: string;
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _selected: {
+                            backgroundColor: string;
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                        boxShadow: string;
+                    };
+                };
+                floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    field: {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _active: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        _selected: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _active: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        _selected: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                    } | {
+                        _hover: {
+                            backgroundColor: string;
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _selected: {
+                            backgroundColor: string;
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                        boxShadow: string;
+                    };
+                };
+            } | undefined;
+            defaultProps?: {
+                size?: string | number | undefined;
+                variant?: "base" | "floating" | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: ("icon" | "root" | "field")[];
+        };
+        Skeleton: {
+            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                [x: string]: any;
+                opacity: number;
+                borderRadius: string;
+                borderColor: any;
+                background: any;
+                animation: string;
+            }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
             } | undefined;
@@ -6338,26 +6643,6 @@ declare const theme: {
                 paddingX: number;
                 height: number;
                 fontSize: string;
-                _hover: {
-                    outlineWidth: string;
-                    outlineColor: string;
-                    outlineStyle: string;
-                    outlineOffset: string;
-                } | {
-                    outline: string;
-                    outlineColor: string;
-                };
-                _active: {
-                    outlineWidth: string;
-                    outlineColor: string;
-                    outlineStyle: string;
-                    outlineOffset: string;
-                    backgroundColor: string;
-                } | {
-                    outline: string;
-                    outlineColor: string;
-                    backgroundColor: string;
-                };
                 _focusVisible: {
                     outlineOffset: number;
                     outlineWidth: string;
@@ -6405,7 +6690,7 @@ declare const theme: {
                     outlineColor: string;
                 };
                 " + label": {
-                    fontSize: ("mobile.sm" | "desktop.sm")[];
+                    fontSize: string[];
                     top: string;
                     left: any;
                     zIndex: number;
@@ -6420,11 +6705,196 @@ declare const theme: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
             } | undefined;
             variants?: {
-                [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    _hover: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    _active: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                    };
+                    _selected: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                    };
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    _hover: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    _active: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                    };
+                    _selected: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                    };
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                } | {
+                    _hover: {
+                        backgroundColor: string;
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    _selected: {
+                        backgroundColor: string;
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                    boxShadow: string;
+                };
+                floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    _hover: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    _active: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                    };
+                    _selected: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                    };
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    _hover: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    _active: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                    };
+                    _selected: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                    };
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                } | {
+                    _hover: {
+                        backgroundColor: string;
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    _selected: {
+                        backgroundColor: string;
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                    boxShadow: string;
+                };
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: string | number | undefined;
+                variant?: "base" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };