@vygruppen/spor-react 8.2.1 → 9.0.0

package/dist/index.d.ts

@@ -81,7 +81,7 @@ type AccordionProps = Omit<AccordionProps$1, "variant" | "size"> & {
 declare const Accordion: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", AccordionProps>;
 
 type HeadingLevel = "h2" | "h3" | "h4" | "h5" | "h6";
-type ExpandableProps = Omit<AccordionProps, "title"> & {
+type ExpandableProps = Omit<AccordionProps, "title" | "index" | "defaultIndex" | "onChange"> & {
     /** The hidden content */
     children: React.ReactNode;
     /** The title that's shown inside the toggle button */
@@ -97,6 +97,12 @@ type ExpandableProps = Omit<AccordionProps, "title"> & {
      * If the size is set to `lg`, the icon should be 30px.
      */
     leftIcon?: React.ReactNode;
+    /** Controlled value of whether the accordion is open or not */
+    isOpen?: boolean;
+    /** Default value of when the accordion is open or not */
+    defaultOpen?: boolean;
+    /** Callback for when the expandable opens or closes */
+    onChange?: (isOpen: boolean) => void;
 };
 /**
  * A standalone expandable component.
@@ -110,7 +116,7 @@ type ExpandableProps = Omit<AccordionProps, "title"> & {
  * </Expandable>
  * ```
  */
-declare const Expandable: ({ children, headingLevel, title, leftIcon, size, ...rest }: ExpandableProps) => React.JSX.Element;
+declare const Expandable: ({ children, headingLevel, title, leftIcon, size, defaultOpen, isOpen, onChange, ...rest }: ExpandableProps) => React.JSX.Element;
 type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
     /** The hidden content */
     children: React.ReactNode;
@@ -218,7 +224,9 @@ type StaticAlertProps = BaseAlertProps;
  */
 declare const StaticAlert: ({ children, ...props }: StaticAlertProps) => React.JSX.Element;
 
-type BreadcrumbProps = BreadcrumbProps$1;
+type BreadcrumbProps = Omit<BreadcrumbProps$1, "variant"> & {
+    variant?: "base" | "ghost";
+};
 /**
  * A breadcrumb component.
  *
@@ -730,14 +738,14 @@ type ChoiceChipProps = {
         default: React.ReactNode;
         checked: React.ReactNode;
     };
-    size?: "sm" | "md" | "lg" | "xl";
+    size?: "xs" | "sm" | "md" | "lg";
     chipType?: "icon" | "choice" | "filter";
     variant?: "base" | "accent" | "floating";
 };
 /**
  * Choice chips are checkboxes that look like selectable buttons.
  *
- * Choice chips are available in four different sizes - `sm`, `md`, `lg` and `xl`.
+ * Choice chips are available in four different sizes - `xs`, `sm`, `md` and `lg`.
  *
  * ```tsx
  * <Stack flexDirection="row">
@@ -1266,7 +1274,7 @@ type SearchInputProps = Exclude<InputProps$1, "variant" | "size" | "leftIcon" |
  */
 declare const SearchInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"input", SearchInputProps>;
 
-type SwitchProps = Exclude<SwitchProps$1, "colorScheme" | "variant"> & {
+type SwitchProps = Omit<SwitchProps$1, "colorScheme" | "variant"> & {
     size?: "sm" | "md" | "lg";
 };
 /**
@@ -1281,12 +1289,12 @@ type SwitchProps = Exclude<SwitchProps$1, "colorScheme" | "variant"> & {
  * </FormControl>
  * ```
  *
- * Switches are available in three different sizes - `sm`, `md` and `lg`. There are also two variants - `solid` and `outline`.
+ * Switches are available in three different sizes - `sm`, `md` and `lg`.
  *
  * ```tsx
  * <FormControl>
  *   <FormLabel>Enable alerts?</FormLabel>
- *   <Switch variant="outline" size="lg" />
+ *   <Switch size="sm" />
  * </FormControl>
  * ```
  */
@@ -2041,11 +2049,10 @@ type StepperStepProps = {
 declare const StepperStep: ({ children, stepNumber, variant, isDisabled: isDisabledOverride, }: StepperStepProps) => React.JSX.Element;
 
 type TabsProps = Exclude<TabsProps$1, "colorScheme" | "variant" | "orientation" | "size"> & {
-    colorScheme: "base" | "accent";
-    /** Defaults to `md` */
-    size?: "sm" | "md" | "lg" | "xl";
-    /** Defaults to `round` */
-    variant?: "square" | "round";
+    /** Defaults to `base` */
+    variant: "base" | "accent";
+    /** Defaults to `sm` */
+    size?: "xs" | "sm" | "md" | "lg";
 };
 declare const Tabs: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", TabsProps>;
 
@@ -2073,7 +2080,7 @@ type TableProps = Omit<TableProps$1, "variant" | "colorScheme"> & {
  */
 declare const Table: _chakra_ui_system_dist_system_types.ComponentWithAs<"table", TableProps>;
 
-type ColorsType = typeof tokens__default.color.alias & typeof tokens__default.color.palette & {
+type ColorsType = typeof tokens__default.color.alias & typeof tokens__default.color.palette & typeof tokens__default.color.vyDigital & {
     linjetag: typeof tokens__default.color.linjetag;
 };
 
@@ -2127,13 +2134,12 @@ declare const theme: {
         Accordion: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 container: {
-                    border: string;
                     borderRadius: string;
                 };
                 button: {
                     _disabled: {
+                        pointerEvents: string;
                         opacity: number;
-                        cursor: string;
                     };
                     _focusVisible: {
                         outlineWidth: string;
@@ -2144,12 +2150,11 @@ declare const theme: {
                     textAlign: string;
                     fontFamily: string;
                     fontWeight: string;
+                    outlineOffset: string;
                     color: string;
                     transitionProperty: string;
                     transitionDuration: string;
-                    border: string;
                     borderRadius: string;
-                    borderColor: string;
                     display: string;
                     justifyContent: string;
                 };
@@ -2202,7 +2207,6 @@ declare const theme: {
             variants?: {
                 ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     button: {
-                        boxShadow: string;
                         _hover: {
                             backgroundColor: string;
                         };
@@ -2213,17 +2217,37 @@ declare const theme: {
                 };
                 base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
-                        boxShadow: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
                     };
                     button: {
                         _expanded: {
                             borderBottomRadius: string;
                         };
                         _hover: {
-                            boxShadow: string;
+                            outlineOffset: number;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                        } | {
+                            outlineOffset: number;
+                            outline: string;
+                            outlineColor: string;
                         };
                         _active: {
-                            boxShadow: string;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
                             backgroundColor: string;
                         };
                     };
@@ -2231,6 +2255,8 @@ declare const theme: {
                 floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
                         boxShadow: string;
+                        outline: string;
+                        outlineColor: string;
                         backgroundColor: string;
                     };
                     button: {
@@ -2238,11 +2264,14 @@ declare const theme: {
                             borderBottomRadius: string;
                         };
                         _hover: {
-                            boxShadow: string;
+                            outlineOffset: number;
+                            outline: string;
+                            outlineColor: string;
                             backgroundColor: string;
                         };
                         _active: {
-                            boxShadow: string;
+                            outline: string;
+                            outlineColor: string;
                             backgroundColor: string;
                         };
                     };
@@ -2314,6 +2343,86 @@ declare const theme: {
             } | undefined;
             parts: ("container" | "icon" | "closeButton")[];
         };
+        AlertExpandable: {
+            baseStyle?: {
+                container: {
+                    paddingX: number;
+                    paddingY: number;
+                    fontSize: string;
+                    transitionProperty: string;
+                    transitionDuration: string;
+                    _expanded: {
+                        borderBottomRadius: string;
+                    };
+                    _hover: {
+                        outline: string;
+                    };
+                };
+            } | undefined;
+            sizes?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: "container"[];
+                }>;
+            } | undefined;
+            variants?: {
+                info: {
+                    container: {
+                        _hover: {
+                            outlineColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                success: {
+                    container: {
+                        _hover: {
+                            outlineColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                warning: {
+                    container: {
+                        _hover: {
+                            outlineColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                "alt-transport": {
+                    container: {
+                        _hover: {
+                            outlineColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                error: {
+                    container: {
+                        _hover: {
+                            outlineColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+            } | undefined;
+            defaultProps?: {
+                size?: string | number | undefined;
+                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: "container"[];
+        };
         Badge: {
             baseStyle?: (({ colorScheme }: _chakra_ui_styled_system.StyleFunctionProps) => {
                 backgroundColor: string;
@@ -2359,9 +2468,6 @@ declare const theme: {
                     paddingX: number;
                     borderRadius: string;
                     "&:not([aria-current=page])": {
-                        _active: {
-                            backgroundColor: string;
-                        };
                         _focusVisible: {
                             outlineWidth: string;
                             outlineColor: string;
@@ -2369,9 +2475,6 @@ declare const theme: {
                             outlineOffset: string;
                         };
                         cursor: string;
-                        _hover: {
-                            backgroundColor: string;
-                        };
                     };
                 };
                 list: {
@@ -2385,13 +2488,40 @@ declare const theme: {
                 }>;
             } | undefined;
             variants?: {
-                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("link" | "container" | "separator" | "item")[];
-                }>;
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    link: {
+                        "&:not([aria-current=page])": {
+                            _hover: {
+                                outlineWidth: string;
+                                outlineColor: string;
+                                outlineStyle: string;
+                                outlineOffset: string;
+                            } | {
+                                outline: string;
+                                outlineColor: string;
+                            };
+                            _active: {
+                                backgroundColor: string;
+                            };
+                        };
+                    };
+                };
+                ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    link: {
+                        "&:not([aria-current=page])": {
+                            _hover: {
+                                backgroundColor: string;
+                            };
+                            _active: {
+                                backgroundColor: string;
+                            };
+                        };
+                    };
+                };
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: string | number | undefined;
+                variant?: "base" | "ghost" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("link" | "container" | "separator" | "item")[];
@@ -2399,15 +2529,11 @@ declare const theme: {
         Button: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 _disabled: {
+                    color: string;
+                    backgroundColor: string;
                     cursor: string;
+                    pointerEvents: string;
                     boxShadow: string;
-                    backgroundColor: string;
-                    color: string;
-                };
-                _hover: {
-                    _disabled: {
-                        background: string;
-                    };
                 };
                 _focusVisible: {
                     outlineWidth: string;
@@ -2425,10 +2551,6 @@ declare const theme: {
                 textWrap: string;
                 paddingX: number;
                 paddingY: number;
-                _focus: {
-                    boxShadow: number;
-                    outline: number;
-                };
             }) | undefined;
             sizes?: {
                 lg: {
@@ -2452,70 +2574,113 @@ declare const theme: {
                 xs: {
                     minHeight: number;
                     minWidth: number;
+                    paddingY: number;
                     fontSize: string;
                     fontWeight: string;
                 };
             } | undefined;
             variants?: {
                 primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    backgroundColor: string;
-                    color: string;
                     _hover: {
                         backgroundColor: string;
                     };
                     _active: {
                         backgroundColor: string;
                     };
+                    color: string;
+                    backgroundColor: string;
                 };
                 secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    backgroundColor: string;
-                    color: string;
                     _hover: {
                         backgroundColor: string;
                     };
                     _active: {
                         backgroundColor: string;
-                        boxShadow: string;
-                        _hover: {
-                            boxShadow: string;
-                        };
                     };
+                    color: string;
+                    backgroundColor: string;
                 };
                 tertiary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    backgroundColor: string;
+                    _hover: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        backgroundColor: string;
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
                     color: string;
-                    boxShadow: string;
+                    backgroundColor: string;
+                } | {
                     _hover: {
-                        boxShadow: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
                     };
                     _active: {
-                        boxShadow: string;
                         backgroundColor: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        backgroundColor: string;
+                        outline: string;
+                        outlineColor: string;
                     };
+                    outline: string;
+                    outlineColor: string;
+                    color: string;
+                    backgroundColor: string;
                 };
                 ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    backgroundColor: string;
-                    color: string;
                     _hover: {
-                        backgroundColor: string;
                         _disabled: {
                             color: string;
                         };
+                        backgroundColor: string;
                     };
                     _active: {
                         backgroundColor: string;
                     };
+                    color: string;
+                    backgroundColor: string;
                 };
                 floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    backgroundColor: string;
                     boxShadow: string;
-                    _active: {
-                        backgroundColor: string;
-                    };
                     _hover: {
+                        boxShadow: string;
+                        outline: string;
+                        outlineColor: string;
                         backgroundColor: string;
+                    };
+                    _active: {
                         boxShadow: string;
+                        backgroundColor: string;
                     };
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
                 };
             } | undefined;
             defaultProps?: {
@@ -2527,41 +2692,67 @@ declare const theme: {
         Card: {
             baseStyle?: ((props: any) => {
                 "button&, a&, label&, &.is-clickable": {
+                    _hover: {
+                        backgroundColor: string;
+                        outlineColor: string;
+                    } | {
+                        outlineColor: string;
+                        backgroundColor?: undefined;
+                    };
                     _active: {
                         backgroundColor: string;
-                        boxShadow: string;
+                        outlineColor: string;
                     };
                     _disabled: {
-                        backgroundColor: string;
-                        boxShadow: string;
-                        color: string;
                         pointerEvents: string;
-                    };
-                    _focusVisible: {
+                        color: string;
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
                         outlineOffset: string;
-                    };
-                    _hover: {
                         backgroundColor: string;
-                        boxShadow: string;
                     } | {
-                        boxShadow: string;
-                        backgroundColor?: undefined;
+                        pointerEvents: string;
+                        color: string;
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
                     };
-                    boxShadow: string;
+                    _focusVisible: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    };
+                    outlineColor: string;
                     backgroundColor?: undefined;
+                    outline: string;
                 } | {
+                    _hover: {
+                        backgroundColor: string;
+                        outlineColor: string;
+                    } | {
+                        outlineColor: string;
+                        backgroundColor?: undefined;
+                    };
                     _active: {
                         backgroundColor: string;
-                        boxShadow: string;
+                        outlineColor: string;
                     };
                     _disabled: {
-                        backgroundColor: string;
-                        boxShadow: string;
+                        pointerEvents: string;
                         color: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
                         pointerEvents: string;
+                        color: string;
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
                     };
                     _focusVisible: {
                         outlineWidth: string;
@@ -2569,18 +2760,14 @@ declare const theme: {
                         outlineStyle: string;
                         outlineOffset: string;
                     };
-                    _hover: {
-                        backgroundColor: string;
-                        boxShadow: string;
-                    } | {
-                        boxShadow: string;
-                        backgroundColor?: undefined;
-                    };
                     backgroundColor: string;
-                    boxShadow: string;
+                    outlineColor: string;
+                    outline: string;
                 };
+                outline: string;
+                outlineColor: string;
                 backgroundColor: string;
-                boxShadow: string;
+                color: string;
                 appearance: string;
                 border: string;
                 overflow: string;
@@ -2591,15 +2778,31 @@ declare const theme: {
                 borderRadius: string;
             } | {
                 "button&, a&, label&, &.is-clickable": {
+                    _hover: {
+                        backgroundColor: string;
+                        outlineColor: string;
+                    } | {
+                        outlineColor: string;
+                        backgroundColor?: undefined;
+                    };
                     _active: {
                         backgroundColor: string;
-                        boxShadow: string;
+                        outlineColor: string;
                     };
                     _disabled: {
-                        backgroundColor: string;
-                        boxShadow: string;
+                        pointerEvents: string;
                         color: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
                         pointerEvents: string;
+                        color: string;
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
                     };
                     _focusVisible: {
                         outlineWidth: string;
@@ -2607,25 +2810,35 @@ declare const theme: {
                         outlineStyle: string;
                         outlineOffset: string;
                     };
+                    outlineColor: string;
+                    backgroundColor?: undefined;
+                    outline: string;
+                } | {
                     _hover: {
                         backgroundColor: string;
-                        boxShadow: string;
+                        outlineColor: string;
                     } | {
-                        boxShadow: string;
+                        outlineColor: string;
                         backgroundColor?: undefined;
                     };
-                    boxShadow: string;
-                    backgroundColor?: undefined;
-                } | {
                     _active: {
                         backgroundColor: string;
-                        boxShadow: string;
+                        outlineColor: string;
                     };
                     _disabled: {
-                        backgroundColor: string;
-                        boxShadow: string;
+                        pointerEvents: string;
                         color: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
                         pointerEvents: string;
+                        color: string;
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
                     };
                     _focusVisible: {
                         outlineWidth: string;
@@ -2633,18 +2846,14 @@ declare const theme: {
                         outlineStyle: string;
                         outlineOffset: string;
                     };
-                    _hover: {
-                        backgroundColor: string;
-                        boxShadow: string;
-                    } | {
-                        boxShadow: string;
-                        backgroundColor?: undefined;
-                    };
                     backgroundColor: string;
-                    boxShadow: string;
+                    outlineColor: string;
+                    outline: string;
                 };
                 backgroundColor: string;
-                boxShadow?: undefined;
+                outline?: undefined;
+                outlineColor?: undefined;
+                color: string;
                 appearance: string;
                 border: string;
                 overflow: string;
@@ -2655,13 +2864,34 @@ declare const theme: {
                 borderRadius: string;
             }) | undefined;
             sizes?: {
-                [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
+                sm: {
+                    "button&, a&, label&, &.is-clickable": {
+                        boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            boxShadow: string;
+                        };
+                    };
+                };
+                lg: {
+                    "button&, a&, label&, &.is-clickable": {
+                        boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            boxShadow: string;
+                        };
+                    };
+                };
             } | undefined;
             variants?: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
             } | undefined;
             defaultProps?: {
-                size?: string | number | undefined;
+                size?: "sm" | "lg" | undefined;
                 variant?: string | number | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
@@ -2678,13 +2908,15 @@ declare const theme: {
                     appearance: string;
                     display: string;
                     alignItems: string;
+                    transitionProperty: string;
+                    transitionDuration: string;
                 };
                 card: {
                     backgroundColor: string;
+                    color: string;
                     borderRadius: string;
                     boxShadow: string;
                     padding: number;
-                    color: string;
                 };
             }) | undefined;
             sizes?: {
@@ -2719,25 +2951,59 @@ declare const theme: {
             variants?: {
                 base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     trigger: {
-                        boxShadow: string;
                         _hover: {
-                            boxShadow: string;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
                         };
                         _active: {
-                            boxShadow: string;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        _expanded: {
+                            backgroundColor: string;
+                        };
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: 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;
                         };
                         _expanded: {
-                            _hover: {
-                                boxShadow: string;
-                                backgroundColor: string;
-                            };
-                            _active: {
-                                boxShadow: string;
-                                backgroundColor: string;
-                            };
                             backgroundColor: string;
                         };
+                        outline: string;
+                        outlineColor: string;
                     };
                 };
                 ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -2755,27 +3021,24 @@ declare const theme: {
                 };
                 floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     trigger: {
-                        boxShadow: string;
                         transition: string;
                         _hover: {
-                            boxShadow: string;
+                            outline: string;
+                            outlineColor: string;
                             backgroundColor: string;
                         };
                         _active: {
-                            boxShadow: string;
+                            outline: string;
+                            outlineColor: string;
                             backgroundColor: string;
                         };
                         _expanded: {
-                            _hover: {
-                                boxShadow: string;
-                            };
-                            _active: {
-                                boxShadow: string;
-                                backgroundColor: string;
-                            };
                             backgroundColor: string;
                         };
+                        outline: string;
+                        outlineColor: string;
                         backgroundColor: string;
+                        boxShadow: string;
                     };
                 };
             } | undefined;
@@ -2796,15 +3059,15 @@ declare const theme: {
                         };
                         "input:enabled[aria-invalid] + .chakra-checkbox__control": {
                             backgroundColor: string;
-                            borderColor: string;
+                            borderColor: (props: Record<string, any> | _chakra_ui_styled_system.StyleFunctionProps) => string;
                         };
                         "input:enabled:checked:not([aria-invalid]) + .chakra-checkbox__control": {
-                            backgroundColor: string;
                             borderColor: string;
+                            backgroundColor: string;
                         };
                         "input:enabled:checked[aria-invalid] + .chakra-checkbox__control": {
-                            backgroundColor: string;
-                            borderColor: string;
+                            borderColor: (props: Record<string, any> | _chakra_ui_styled_system.StyleFunctionProps) => string;
+                            backgroundColor: (props: Record<string, any> | _chakra_ui_styled_system.StyleFunctionProps) => string;
                         };
                     };
                 };
@@ -2816,6 +3079,7 @@ declare const theme: {
                 };
                 control: {
                     _checked: {
+                        borderColor: string;
                         _disabled: {
                             borderColor: string;
                             color: string;
@@ -2825,15 +3089,8 @@ declare const theme: {
                             backgroundColor: string;
                             borderColor: string;
                         };
-                        _focusVisible: {
-                            outlineWidth: string;
-                            outlineColor: string;
-                            outlineStyle: string;
-                            outlineOffset: string;
-                        };
-                        color: string;
-                        borderColor: string;
                         backgroundColor: string;
+                        color: string;
                     };
                     _disabled: {
                         borderColor: string;
@@ -2843,6 +3100,12 @@ declare const theme: {
                         borderColor: string;
                         backgroundColor: string;
                     };
+                    _focusVisible: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    };
                     backgroundColor: string;
                     width: number;
                     height: number;
@@ -2851,7 +3114,6 @@ declare const theme: {
                     border: string;
                     borderColor: string;
                     borderRadius: string;
-                    color: string;
                 };
                 label: {
                     userSelect: string;
@@ -2883,22 +3145,22 @@ declare const theme: {
                     display: string;
                     alignItems: string;
                     fontSize: string;
-                    px: number;
                     cursor: string;
+                    transitionProperty: string;
+                    transitionDuration: string;
                     _checked: {
                         _hover: {
-                            boxShadow: string;
+                            outlineColor: string;
                             color: string;
                             backgroundColor: string;
                         };
                         _active: {
-                            boxShadow: string;
                             backgroundColor: string;
                             color: string;
                         };
-                        boxShadow: string;
                         backgroundColor: string;
                         color: string;
+                        outlineColor: string;
                     };
                     _disabled: {
                         _hover: {
@@ -2919,7 +3181,7 @@ declare const theme: {
                         };
                         backgroundColor: string;
                         color: string;
-                        cursor: string;
+                        pointerEvents: string;
                         boxShadow: string;
                     };
                     "input:focus-visible + &": {
@@ -2930,41 +3192,41 @@ declare const theme: {
                     };
                 };
                 icon: {
-                    mr: number;
+                    marginRight: number;
                 };
             }) | undefined;
             sizes?: {
-                sm: {
+                xs: {
                     container: {
                         borderRadius: string;
                         _checked: {
                             borderRadius: string;
                         };
                         height: string;
-                        px: number;
+                        paddingX: number;
                     };
                 };
-                md: {
+                sm: {
                     container: {
                         borderRadius: string;
                         _checked: {
                             borderRadius: string;
                         };
                         height: string;
-                        px: number;
+                        paddingX: number;
                     };
                 };
-                lg: {
+                md: {
                     container: {
                         borderRadius: string;
                         _checked: {
                             borderRadius: string;
                         };
                         height: string;
-                        px: number;
+                        paddingX: number;
                     };
                 };
-                xl: {
+                lg: {
                     container: {
                         borderRadius: string;
                         _checked: {
@@ -2978,66 +3240,110 @@ declare const theme: {
             variants?: {
                 base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
-                        "@media (hover:hover)": {
-                            _hover: {
-                                backgroundColor: string;
-                                boxShadow: string;
-                                color: string;
-                            };
-                        };
-                        _active: {
-                            boxShadow: string;
+                        _hover: {
+                            backgroundColor: string;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            color: string;
+                        } | {
+                            backgroundColor: string;
+                            outline: string;
+                            outlineColor: string;
+                            color: string;
+                        };
+                        _active: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
                             backgroundColor: string;
                         };
                         color: string;
-                        boxShadow: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        _hover: {
+                            backgroundColor: string;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            color: string;
+                        } | {
+                            backgroundColor: string;
+                            outline: string;
+                            outlineColor: string;
+                            color: string;
+                        };
+                        _active: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        color: string;
+                        outline: string;
+                        outlineColor: string;
                         backgroundColor: string;
                     };
                 };
                 accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
-                        "@media (hover:hover)": {
-                            _hover: {
-                                color: string;
-                                boxShadow: string;
-                                backgroundColor: string;
-                            };
+                        _hover: {
+                            color: string;
+                            backgroundColor: string;
                         };
                         _active: {
                             backgroundColor: string;
-                            boxShadow: string;
                             color: string;
                         };
-                        boxShadow: string;
                         color: string;
                         backgroundColor: string;
                     };
                     _active: {
                         backgroundColor: string;
-                        boxShadow: string;
                         color: string;
                     };
                 };
                 floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
+                        boxShadow: string;
                         _hover: {
-                            color: string;
                             boxShadow: string;
+                            color: string;
+                            outline: string;
+                            outlineColor: string;
                             backgroundColor: string;
                         };
                         _active: {
                             color: string;
-                            boxShadow: string;
+                            outline: string;
+                            outlineColor: string;
                             backgroundColor: string;
                         };
-                        boxShadow: string;
+                        outline: string;
+                        outlineColor: string;
                         color: string;
                         backgroundColor: string;
                     };
                 };
             } | undefined;
             defaultProps?: {
-                size?: "sm" | "md" | "lg" | "xl" | undefined;
+                size?: "sm" | "md" | "lg" | "xs" | undefined;
                 variant?: "base" | "floating" | "accent" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
@@ -3119,8 +3425,6 @@ declare const theme: {
         Datepicker: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 wrapper: {
-                    backgroundColor: string;
-                    boxShadow: string;
                     transitionProperty: string;
                     transitionDuration: string;
                     borderRadius: string;
@@ -3132,6 +3436,7 @@ declare const theme: {
                         zIndex: number;
                     };
                     _disabled: {
+                        backgroundColor: string;
                         pointerEvents: string;
                     };
                     _focusWithin: {
@@ -3151,8 +3456,20 @@ declare const theme: {
                     color: string;
                 };
                 calendarTriggerButton: {
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
                     _invalid: {
-                        boxShadow: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
                     };
                     _focusVisible: {
                         outlineWidth: string;
@@ -3160,7 +3477,6 @@ declare const theme: {
                         outlineStyle: string;
                         outlineOffset: string;
                     };
-                    backgroundColor: string;
                     width: number;
                     display: string;
                     alignItems: string;
@@ -3173,21 +3489,24 @@ declare const theme: {
                     paddingBottom: number;
                     borderRadius: string;
                     right: string;
-                    _hover: {
-                        boxShadow: string;
-                        backgroundColor: string;
-                    };
-                    _active: {
-                        backgroundColor: string;
-                    };
                 };
                 arrow: {
                     [x: string]: string;
                 };
                 calendarPopover: {
-                    backgroundColor: string;
+                    boxShadow: string;
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
                     color: string;
+                    backgroundColor: string;
+                } | {
                     boxShadow: string;
+                    outline: string;
+                    outlineColor: string;
+                    color: string;
+                    backgroundColor: string;
                 };
                 weekdays: {
                     color: string;
@@ -3196,50 +3515,55 @@ declare const theme: {
                     color: string;
                 };
                 dateCell: {
-                    backgroundColor: string;
-                    color: string;
-                    borderRadius: string;
-                    position: string;
-                    transition: string;
-                    userSelect: string;
-                    width: number[];
-                    height: number[];
-                    transitionProperty: string;
-                    transitionSpeed: string;
-                    _hover: {
-                        backgroundColor: string;
-                    };
-                    _focusVisible: {
-                        outlineColor: string;
-                        outlineWidth: number;
-                        outlineStyle: string;
-                    };
                     _active: {
                         backgroundColor: string;
-                        boxShadow: string;
-                        color: string;
                     };
                     _disabled: {
-                        color: string;
-                        boxShadow: string;
                         pointerEvents: string;
+                        color: string;
+                        backgroundColor: string;
                     };
                     _selected: {
-                        backgroundColor: string;
-                        color: string;
                         _active: {
-                            backgroundColor: string;
-                            boxShadow: string;
                             color: string;
+                            backgroundColor: string;
                         };
+                        color: string;
+                        backgroundColor: string;
                     };
                     "&[data-today]": {
-                        boxShadow: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
                     };
                     "&[data-unavailable]": {
-                        pointerEvents: string;
                         color: string;
+                        backgroundColor: string;
+                        pointerEvents: string;
+                    };
+                    _focusVisible: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    };
+                    borderRadius: string;
+                    position: string;
+                    transition: string;
+                    userSelect: string;
+                    width: number[];
+                    height: number[];
+                    transitionProperty: string;
+                    transitionSpeed: string;
+                    _hover: {
+                        backgroundColor: string;
                     };
+                    color: string;
+                    backgroundColor: string;
                 };
             }) | undefined;
             sizes?: {
@@ -3250,92 +3574,119 @@ declare const theme: {
             variants?: {
                 base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     wrapper: {
-                        boxShadow: string;
                         _hover: {
-                            boxShadow: string;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
                         };
                         _invalid: {
-                            boxShadow: string;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
                         };
                         _disabled: {
-                            boxShadow: string;
-                            _focus: {
-                                boxShadow: string;
-                            };
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
                         };
-                    };
-                    calendar: {
                         backgroundColor: string;
-                        color: string;
-                        boxShadow: string;
-                    };
-                    dateCell: {
-                        color: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
                         _hover: {
-                            backgroundColor: string;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
                         };
-                        "&[data-today]": {
-                            boxShadow: string;
+                        _invalid: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _disabled: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
                         };
+                        backgroundColor: string;
+                        outline: string;
+                        outlineColor: string;
                     };
                 };
                 floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     wrapper: {
                         boxShadow: string;
                         _hover: {
-                            boxShadow: string;
+                            outline: string;
+                            outlineColor: string;
                         };
                         _invalid: {
-                            boxShadow: string;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
                         };
                         _disabled: {
-                            boxShadow: string;
-                            _focus: {
-                                boxShadow: string;
-                            };
-                        };
-                    };
-                    calendar: {
-                        backgroundColor: string;
-                        color: string;
-                        boxShadow: string;
-                    };
-                    dateCell: {
-                        color: string;
-                        _hover: {
-                            backgroundColor: string;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
                         };
+                        outline: string;
+                        outlineColor: string;
                     };
                 };
                 ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     wrapper: {
-                        boxShadow: string;
                         _hover: {
-                            boxShadow: string;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
                         };
                         _invalid: {
-                            boxShadow: string;
-                        };
-                        _disabled: {
-                            boxShadow: string;
-                            _focus: {
-                                boxShadow: string;
-                            };
-                        };
-                    };
-                    calendar: {
-                        backgroundColor: string;
-                        color: string;
-                        boxShadow: string;
-                    };
-                    dateCell: {
-                        color: string;
-                        _hover: {
-                            backgroundColor: string;
-                        };
-                        _selected: {
-                            backgroundColor: string;
-                            color: string;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
                         };
                     };
                 };
@@ -3394,11 +3745,11 @@ declare const theme: {
                     overflow: string;
                 };
                 dialog: {
-                    backgroundColor: string;
-                    color: string;
                     zIndex: string;
                     maxHeight: string | undefined;
                     boxShadow: string;
+                    color: string;
+                    backgroundColor: string;
                 };
                 header: {
                     paddingX: number;
@@ -3452,24 +3803,17 @@ declare const theme: {
         FloatingActionButton: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 container: {
-                    _hover: {
+                    _disabled: {
+                        pointerEvents: string;
+                        color: string;
                         backgroundColor: string;
-                        _disabled: {
-                            backgroundColor: string;
-                            color: string;
-                        };
                     };
-                    zIndex: string;
                     _focusVisible: {
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
                         outlineOffset: string;
                     };
-                    _disabled: {
-                        backgroundColor: string;
-                        color: string;
-                    };
                     display: string;
                     alignItems: string;
                     paddingY: number;
@@ -3483,25 +3827,19 @@ declare const theme: {
                     transitionDuration: string;
                     transitionProperty: string;
                     position: string;
+                    zIndex: string;
                 } | {
-                    _hover: {
+                    _disabled: {
+                        pointerEvents: string;
+                        color: string;
                         backgroundColor: string;
-                        _disabled: {
-                            backgroundColor: string;
-                            color: string;
-                        };
                     };
-                    zIndex: string;
                     _focusVisible: {
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
                         outlineOffset: string;
                     };
-                    _disabled: {
-                        backgroundColor: string;
-                        color: string;
-                    };
                     top: string;
                     left: string;
                     right?: undefined;
@@ -3519,25 +3857,19 @@ declare const theme: {
                     transitionDuration: string;
                     transitionProperty: string;
                     position: string;
+                    zIndex: string;
                 } | {
-                    _hover: {
+                    _disabled: {
+                        pointerEvents: string;
+                        color: string;
                         backgroundColor: string;
-                        _disabled: {
-                            backgroundColor: string;
-                            color: string;
-                        };
                     };
-                    zIndex: string;
                     _focusVisible: {
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
                         outlineOffset: string;
                     };
-                    _disabled: {
-                        backgroundColor: string;
-                        color: string;
-                    };
                     top: string;
                     right: string;
                     left?: undefined;
@@ -3555,25 +3887,19 @@ declare const theme: {
                     transitionDuration: string;
                     transitionProperty: string;
                     position: string;
+                    zIndex: string;
                 } | {
-                    _hover: {
+                    _disabled: {
+                        pointerEvents: string;
+                        color: string;
                         backgroundColor: string;
-                        _disabled: {
-                            backgroundColor: string;
-                            color: string;
-                        };
                     };
-                    zIndex: string;
                     _focusVisible: {
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
                         outlineOffset: string;
                     };
-                    _disabled: {
-                        backgroundColor: string;
-                        color: string;
-                    };
                     bottom: string;
                     left: string;
                     top?: undefined;
@@ -3591,25 +3917,19 @@ declare const theme: {
                     transitionDuration: string;
                     transitionProperty: string;
                     position: string;
+                    zIndex: string;
                 } | {
-                    _hover: {
+                    _disabled: {
+                        pointerEvents: string;
+                        color: string;
                         backgroundColor: string;
-                        _disabled: {
-                            backgroundColor: string;
-                            color: string;
-                        };
                     };
-                    zIndex: string;
                     _focusVisible: {
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
                         outlineOffset: string;
                     };
-                    _disabled: {
-                        backgroundColor: string;
-                        color: string;
-                    };
                     bottom: string;
                     right: string;
                     top?: undefined;
@@ -3627,6 +3947,7 @@ declare const theme: {
                     transitionDuration: string;
                     transitionProperty: string;
                     position: string;
+                    zIndex: string;
                 };
                 icon: {
                     marginRight: number;
@@ -3645,82 +3966,94 @@ declare const theme: {
                 }>;
             } | undefined;
             variants?: {
-                dark: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                brand: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
-                        backgroundColor: string;
-                        color: string;
-                        _active: {
-                            backgroundColor: string;
-                        };
                         _hover: {
                             backgroundColor: string;
                         };
-                    };
-                };
-                light: {
-                    container: {
-                        backgroundColor: string;
-                        color: string;
                         _active: {
                             backgroundColor: string;
                         };
+                        color: string;
+                        backgroundColor: string;
                     };
                 };
-                green: {
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
-                        backgroundColor: string;
-                        color: string;
-                        _active: {
-                            color: string;
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
                             backgroundColor: string;
                         };
-                    };
-                };
-                brand: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    container: {
-                        backgroundColor: string;
-                        color: string;
                         _active: {
                             backgroundColor: string;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            backgroundColor: string;
+                            outline: string;
+                            outlineColor: string;
                         };
+                        color: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
                         _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
                             backgroundColor: string;
                         };
-                    };
-                };
-                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    container: {
-                        backgroundColor: string;
-                        color: string;
                         _active: {
                             backgroundColor: string;
-                            color: string;
-                        };
-                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
                             backgroundColor: string;
-                            boxShadow: string;
-                            color: string;
+                            outline: string;
+                            outlineColor: string;
                         };
+                        color: string;
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
                     };
                 };
                 accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
-                        backgroundColor: string;
-                        color: string;
-                        _active: {
-                            backgroundColor: string;
+                        _hover: {
                             color: string;
+                            backgroundColor: string;
                         };
-                        _hover: {
+                        _active: {
                             backgroundColor: string;
-                            color: string;
                         };
+                        color: string;
+                        backgroundColor: string;
                     };
                 };
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "base" | "green" | "light" | "dark" | "accent" | "brand" | undefined;
+                variant?: "base" | "accent" | "brand" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("text" | "container" | "icon")[];
@@ -3802,23 +4135,21 @@ declare const theme: {
                 };
                 button: {
                     _disabled: {
-                        _hover: {
-                            boxShadow: string;
-                        };
-                        _focus: {
-                            boxShadow: string;
-                        };
                         backgroundColor: string;
                         color: string;
+                        pointerEvents: string;
                     };
                     _active: {
                         backgroundColor: string;
                     };
                     _invalid: {
-                        _hover: {
-                            boxShadow: string;
-                        };
-                        boxShadow: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
                     };
                     _focusVisible: {
                         outlineWidth: string;
@@ -3827,9 +4158,62 @@ declare const theme: {
                         outlineOffset: string;
                     };
                     _hover: {
-                        boxShadow: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
                     };
-                    boxShadow: string;
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    appearance: string;
+                    borderTopRadius: string;
+                    borderBottomRadius: string | number;
+                    paddingY: number;
+                    paddingX: number;
+                    display: string;
+                    justifyContent: string;
+                    alignItems: string;
+                    fontSize: string;
+                } | {
+                    _disabled: {
+                        backgroundColor: string;
+                        color: string;
+                        pointerEvents: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    _invalid: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    _focusVisible: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    };
+                    _hover: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    outline: string;
+                    outlineColor: string;
                     appearance: string;
                     borderTopRadius: string;
                     borderBottomRadius: string | number;
@@ -3853,13 +4237,16 @@ declare const theme: {
                     button: {
                         _hover: {
                             backgroundColor: string;
-                            boxShadow: string;
+                            outline: string;
+                            outlineColor: string;
                         };
                         _active: {
                             backgroundColor: string;
-                            boxShadow: string;
+                            outline: string;
+                            outlineColor: string;
                         };
-                        boxShadow: string;
+                        outline: string;
+                        outlineColor: string;
                         backgroundColor: string;
                     };
                 };
@@ -3900,6 +4287,7 @@ declare const theme: {
                             outlineStyle: string;
                             outlineOffset: string;
                         };
+                        boxShadow: string;
                         _hover: {
                             boxShadow: string;
                         };
@@ -3928,6 +4316,7 @@ declare const theme: {
                             outlineStyle: string;
                             outlineOffset: string;
                         };
+                        boxShadow: string;
                         _hover: {
                             boxShadow: string;
                         };
@@ -3953,7 +4342,7 @@ declare const theme: {
                     transform: string;
                     zIndex: string;
                     stroke: string;
-                    color: "ocean" | "golden" | "brightRed";
+                    color: "brightRed" | "golden" | "ocean";
                 };
             }) | undefined;
             sizes?: {
@@ -4012,11 +4401,93 @@ declare const theme: {
         Input: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 field: {
-                    appearance: string;
-                    width: string;
-                    outline: string;
-                    border: number;
-                    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;
+                    };
+                    _focusVisible: {
+                        outlineOffset: number;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                    };
+                    _disabled: {
+                        pointerEvents: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        pointerEvents: string;
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                    };
+                    _invalid: {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    " + label": {
+                        fontSize: ("mobile.sm" | "desktop.sm")[];
+                        top: string;
+                        left: any;
+                        zIndex: number;
+                        position: string;
+                        marginY: number;
+                        transition: string;
+                        transformOrigin: string;
+                        cursor: string;
+                    };
+                    "&:not(:placeholder-shown)": {
+                        paddingTop: string;
+                        "& + label": {
+                            transform: string;
+                        };
+                    };
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
                     borderRadius: string;
                     transitionProperty: string;
                     transitionDuration: string;
@@ -4024,13 +4495,31 @@ declare const theme: {
                     paddingX: number;
                     height: string;
                     fontSize: string;
-                    boxShadow: string;
+                    backgroundColor: string;
+                    appearance: string;
+                    width: string;
+                    outline: string;
+                    border: number;
+                } | {
+                    _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;
-                        boxShadow: string;
-                    };
-                    _hover: {
-                        boxShadow: string;
                     };
                     _focusVisible: {
                         outlineOffset: number;
@@ -4039,15 +4528,44 @@ declare const theme: {
                         outlineStyle: string;
                     };
                     _disabled: {
+                        pointerEvents: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        pointerEvents: string;
+                        outline: string;
+                        outlineColor: string;
                         backgroundColor: string;
-                        boxShadow: string;
-                        cursor: string;
                     };
                     _invalid: {
-                        boxShadow: string;
                         _hover: {
-                            boxShadow: string;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
                         };
+                        outline: string;
+                        outlineColor: string;
                     };
                     " + label": {
                         fontSize: ("mobile.sm" | "desktop.sm")[];
@@ -4066,6 +4584,19 @@ declare const theme: {
                             transform: string;
                         };
                     };
+                    outline: string;
+                    outlineColor: string;
+                    borderRadius: string;
+                    transitionProperty: string;
+                    transitionDuration: string;
+                    position: string;
+                    paddingX: number;
+                    height: string;
+                    fontSize: string;
+                    backgroundColor: string;
+                    appearance: string;
+                    width: string;
+                    border: number;
                 };
                 element: {
                     height: string;
@@ -4266,17 +4797,23 @@ declare const theme: {
                 };
                 secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _hover: {
+                        outlineWidth: number;
+                        backgroundColor: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outlineWidth: number;
                         backgroundColor: string;
+                        outline: string;
                         outlineColor: string;
                     };
                     _active: {
                         backgroundColor: string;
-                        outlineColor: string;
                     };
                     backgroundColor: string;
                     "&:focus, &:focus-visible, &:active, &:hover": {
                         outline: string;
-                        outlineWidth: string;
                     };
                     color: string;
                     backgroundImage: string;
@@ -4322,13 +4859,27 @@ 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;
                     width: string;
                     listStyle: string;
                     borderBottomRadius: string;
+                    backgroundColor: string;
                 };
                 item: {
                     paddingX: number;
@@ -4420,7 +4971,7 @@ declare const theme: {
                 };
             } | undefined;
             variants?: {
-                play: {
+                play: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
                         padding: number;
                         _hover: {
@@ -4430,17 +4981,12 @@ declare const theme: {
                             color: string;
                         };
                         _disabled: {
+                            pointerEvents: string;
                             color: string;
-                            _hover: {
-                                color: string;
-                            };
-                            _active: {
-                                color: string;
-                            };
                         };
                     };
                 };
-                jumpSkip: {
+                jumpSkip: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
                         _hover: {
                             backgroundColor: string;
@@ -4449,14 +4995,9 @@ declare const theme: {
                             backgroundColor: string;
                         };
                         _disabled: {
-                            backgroundColor: string;
                             color: string;
-                            _hover: {
-                                backgroundColor: string;
-                            };
-                            _active: {
-                                backgroundColor: string;
-                            };
+                            backgroundColor: string;
+                            pointerEvents: string;
                         };
                     };
                     icon: {
@@ -4486,13 +5027,13 @@ declare const theme: {
                     overflow: string;
                 };
                 dialog: {
-                    borderRadius: string;
-                    background: string;
-                    color: string;
-                    my: string;
+                    marginY: string;
                     zIndex: string;
                     maxHeight: string | undefined;
                     boxShadow: string;
+                    color: string;
+                    backgroundColor: string;
+                    borderRadius: string;
                 };
                 header: {
                     paddingX: number;
@@ -4543,49 +5084,114 @@ declare const theme: {
             } | undefined;
             parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
         };
-        Popover: {
+        NumericStepper: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                popper: {
-                    zIndex: string;
+                container: {
+                    display: string;
+                    flexDirection: string;
+                    alignItems: string;
                 };
-                content: {
-                    [x: string]: string | number | {
-                        outline: number;
-                        boxShadow: string;
+                input: {
+                    _focusVisible: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
                     };
-                    backgroundColor: string;
-                    color: string;
-                    borderRadius: string;
-                    padding: number;
-                    zIndex: string;
-                    maxWidth: string;
-                    _focus: {
-                        outline: number;
-                        boxShadow: string;
+                    _disabled: {
+                        pointerEvents: string;
+                        opacity: number;
                     };
-                };
-                arrow: {
-                    backgroundColor: string;
-                    boxShadow: string;
-                    clipPath: string;
-                };
-                closeButton: {
                     _hover: {
-                        backgroundColor: string;
-                    };
-                    _active: {
-                        backgroundColor: string;
-                    };
-                    borderRadius: string;
-                    top: number;
-                    right: number;
-                    _focusVisible: {
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
                         outlineOffset: string;
-                    };
-                    position: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    color: string;
+                    backgroundColor: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    marginX: number;
+                    paddingX: number;
+                    borderRadius: string;
+                    textAlign: string;
+                    transitionProperty: string;
+                    transitionDuration: string;
+                };
+                text: {
+                    color: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    marginX: number;
+                    paddingX: number;
+                    textAlign: string;
+                    width: string;
+                };
+                button: {
+                    minWidth: string;
+                    minHeight: string;
+                };
+            }) | undefined;
+            sizes?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: ("button" | "input" | "text" | "container")[];
+                }>;
+            } | undefined;
+            variants?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: ("button" | "input" | "text" | "container")[];
+                }>;
+            } | undefined;
+            defaultProps?: {
+                size?: string | number | undefined;
+                variant?: string | number | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: ("button" | "input" | "text" | "container")[];
+        };
+        Popover: {
+            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                popper: {
+                    zIndex: string;
+                };
+                content: {
+                    [x: string]: string | number;
+                    backgroundColor: string;
+                    color: string;
+                    borderRadius: string;
+                    padding: number;
+                    zIndex: string;
+                    maxWidth: string;
+                };
+                arrow: {
+                    backgroundColor: string;
+                    boxShadow: string;
+                    clipPath: string;
+                };
+                closeButton: {
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    borderRadius: string;
+                    top: number;
+                    right: number;
+                    _focusVisible: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    };
+                    position: string;
                     color: string;
                 };
             }) | undefined;
@@ -4615,6 +5221,48 @@ declare const theme: {
             } | undefined;
             parts: ("body" | "footer" | "header" | "content" | "closeButton" | "arrow" | "popper")[];
         };
+        ProgressBar: {
+            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                container: {
+                    minWidth: string;
+                };
+                background: {
+                    display: string;
+                    backgroundColor: string;
+                    borderRadius: string;
+                    justifyContent: string;
+                    marginX: string;
+                };
+                progress: {
+                    backgroundColor: string;
+                    borderRadius: string;
+                    maxWidth: string;
+                    transition: string;
+                };
+                description: {
+                    textAlign: string;
+                    marginTop: number;
+                    marginX: string;
+                    fontWeight: string;
+                };
+            }) | undefined;
+            sizes?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: ("progress" | "background" | "container" | "description")[];
+                }>;
+            } | undefined;
+            variants?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: ("progress" | "background" | "container" | "description")[];
+                }>;
+            } | undefined;
+            defaultProps?: {
+                size?: string | number | undefined;
+                variant?: string | number | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: ("progress" | "background" | "container" | "description")[];
+        };
         ProgressIndicator: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 root: {
@@ -4678,13 +5326,21 @@ declare const theme: {
                 };
                 control: {
                     _disabled: {
+                        color: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
                         backgroundColor: string;
-                        borderColor: string;
+                    } | {
                         color: string;
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
                     };
                     _checked: {
-                        borderColor: string;
                         color: string;
+                        borderColor: string;
                         _before: {
                             content: string;
                             display: string;
@@ -4695,9 +5351,19 @@ declare const theme: {
                             background: string;
                         };
                         _disabled: {
+                            color: string;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
                             backgroundColor: string;
-                            borderColor: string;
+                            pointerEvents: string;
+                        } | {
                             color: string;
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                            pointerEvents: string;
                         };
                     };
                     _focusVisible: {
@@ -4754,10 +5420,93 @@ declare const theme: {
                     "option, optgroup": {
                         background: string;
                     };
-                    width: string;
-                    outline: string;
-                    border: number;
-                    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;
+                    };
+                    _focusVisible: {
+                        outlineOffset: number;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                    };
+                    _disabled: {
+                        pointerEvents: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        pointerEvents: string;
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                    };
+                    _invalid: {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    " + label": {
+                        fontSize: ("mobile.sm" | "desktop.sm")[];
+                        top: string;
+                        left: any;
+                        zIndex: number;
+                        position: string;
+                        marginY: number;
+                        transition: string;
+                        transformOrigin: string;
+                        cursor: string;
+                    };
+                    "&:not(:placeholder-shown)": {
+                        paddingTop: string;
+                        "& + label": {
+                            transform: string;
+                        };
+                    };
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
                     borderRadius: string;
                     transitionProperty: string;
                     transitionDuration: string;
@@ -4765,13 +5514,35 @@ declare const theme: {
                     paddingX: number;
                     height: string;
                     fontSize: string;
-                    boxShadow: string;
-                    _active: {
-                        backgroundColor: string;
-                        boxShadow: string;
+                    backgroundColor: string;
+                    width: string;
+                    outline: string;
+                    border: number;
+                } | {
+                    appearance: string;
+                    paddingTop: string;
+                    "option, optgroup": {
+                        background: string;
                     };
                     _hover: {
-                        boxShadow: string;
+                        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;
@@ -4780,15 +5551,44 @@ declare const theme: {
                         outlineStyle: string;
                     };
                     _disabled: {
+                        pointerEvents: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        pointerEvents: string;
+                        outline: string;
+                        outlineColor: string;
                         backgroundColor: string;
-                        boxShadow: string;
-                        cursor: string;
                     };
                     _invalid: {
-                        boxShadow: string;
                         _hover: {
-                            boxShadow: string;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
                         };
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        outline: string;
+                        outlineColor: string;
                     };
                     " + label": {
                         fontSize: ("mobile.sm" | "desktop.sm")[];
@@ -4807,6 +5607,18 @@ declare const theme: {
                             transform: string;
                         };
                     };
+                    outline: string;
+                    outlineColor: string;
+                    borderRadius: string;
+                    transitionProperty: string;
+                    transitionDuration: string;
+                    position: string;
+                    paddingX: number;
+                    height: string;
+                    fontSize: string;
+                    backgroundColor: string;
+                    width: string;
+                    border: number;
                 };
                 icon: {
                     width: string;
@@ -4913,8 +5725,8 @@ declare const theme: {
                 };
                 accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     root: {
-                        backgroundColor: string;
                         color: string;
+                        backgroundColor: string;
                     };
                     stepButton: {
                         color: string;
@@ -4937,7 +5749,7 @@ declare const theme: {
             parts: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
         };
         Switch: {
-            baseStyle?: {
+            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 container: {
                     [x: string]: string | {
                         [x: string]: string;
@@ -4947,13 +5759,141 @@ declare const theme: {
                     };
                 };
                 track: {
+                    _hover: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                    };
+                    _checked: {
+                        outlineColor: string;
+                        _hover: {
+                            backgroundColor: string;
+                        };
+                        backgroundColor: string;
+                    };
+                    _disabled: {
+                        _checked: {
+                            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;
+                        pointerEvents: string;
+                    } | {
+                        _checked: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                        pointerEvents: string;
+                    };
+                    _focusVisible: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    };
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                    width: string[];
+                    height: string[];
+                    transitionProperty: string;
+                    transitionDuration: string;
+                } | {
+                    _hover: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                    };
+                    _checked: {
+                        outlineColor: string;
+                        _hover: {
+                            backgroundColor: string;
+                        };
+                        backgroundColor: string;
+                    };
+                    _disabled: {
+                        _checked: {
+                            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;
+                        pointerEvents: string;
+                    } | {
+                        _checked: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
+                        pointerEvents: string;
+                    };
+                    _focusVisible: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    };
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
                     width: string[];
                     height: string[];
                     transitionProperty: string;
                     transitionDuration: string;
-                    _disabled: {
-                        pointerEvents: string;
-                    };
                 };
                 thumb: {
                     transitionProperty: string;
@@ -4961,11 +5901,16 @@ declare const theme: {
                     borderRadius: string;
                     width: string[];
                     height: string[];
+                    backgroundColor: string;
+                    "[data-disabled] &": {
+                        backgroundColor: string;
+                    };
                     _checked: {
+                        backgroundColor: string;
                         transform: string;
                     };
                 };
-            } | undefined;
+            }) | undefined;
             sizes?: {
                 sm: {
                     container: {
@@ -4996,77 +5941,23 @@ declare const theme: {
                 };
             } | undefined;
             variants?: {
-                solid: ({ colorMode }: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    track: {
-                        _hover: {
-                            backgroundColor: string;
-                            boxShadow: string;
-                        };
-                        _checked: {
-                            backgroundColor: string;
-                            _hover: {
-                                backgroundColor: string;
-                                boxShadow: string;
-                            };
-                        };
-                        _disabled: {
-                            backgroundColor: string;
-                            boxShadow: string;
-                            _checked: {
-                                backgroundColor: string;
-                                boxShadow: string;
-                            };
-                        };
-                        _focusVisible: {
-                            outlineWidth: string;
-                            outlineColor: string;
-                            outlineStyle: string;
-                            outlineOffset: string;
-                        };
-                        backgroundColor: string;
-                        boxShadow: string;
-                    };
-                    thumb: {
-                        backgroundColor: string;
-                        "[data-disabled] &": {
-                            backgroundColor: string;
-                        };
-                    };
-                };
-                outline: {
-                    track: {
-                        backgroundColor: string;
-                        boxShadow: string;
-                        _hover: {
-                            backgroundColor: string;
-                        };
-                        _checked: {
-                            backgroundColor: string;
-                            _hover: {
-                                backgroundColor: string;
-                            };
-                        };
-                    };
-                    thumb: {
-                        backgroundColor: string;
-                        _checked: {
-                            backgroundColor: string;
-                        };
-                    };
-                };
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: ("label" | "track" | "container" | "thumb")[];
+                }>;
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | undefined;
-                variant?: "solid" | "outline" | undefined;
+                variant?: string | number | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("label" | "track" | "container" | "thumb")[];
         };
         Table: {
-            baseStyle?: {
+            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 table: {
-                    borderCollapse: string;
                     width: string;
+                    color: string;
+                    borderCollapse: string;
                 };
                 th: {
                     fontWeight: string;
@@ -5085,13 +5976,13 @@ declare const theme: {
                     };
                 };
                 caption: {
-                    mt: number;
+                    marginTop: number;
                     fontFamily: string;
                     textAlign: string;
                     fontWeight: string;
                     color: string;
                 };
-            } | undefined;
+            }) | undefined;
             sizes?: {
                 sm: {
                     table: {
@@ -5147,9 +6038,6 @@ declare const theme: {
             } | undefined;
             variants?: {
                 simple: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    table: {
-                        color: string;
-                    };
                     th: {
                         "&[data-is-numeric=true]": {
                             textAlign: string;
@@ -5171,8 +6059,19 @@ declare const theme: {
                             transitionDuration: string;
                             transitionProperty: string;
                             _hover: {
-                                boxShadow: string;
+                                outlineOffset: string;
+                                backgroundColor: string;
+                                outlineWidth: string;
+                                outlineColor: string;
+                                outlineStyle: string;
+                            } | {
+                                outlineOffset: string;
                                 backgroundColor: string;
+                                outline: string;
+                                outlineColor: string;
+                            };
+                            _last: {
+                                borderBottomRadius: string;
                             };
                         };
                     };
@@ -5180,7 +6079,6 @@ declare const theme: {
                         "&[data-is-numeric=true]": {
                             textAlign: string;
                         };
-                        color: string;
                         border: (props: Record<string, any> | _chakra_ui_styled_system.StyleFunctionProps) => string;
                         borderColor: string;
                         backgroundColor: string;
@@ -5219,143 +6117,29 @@ declare const theme: {
                     flexDirection: string;
                 };
                 tablist: {
-                    backgroundColor: string;
-                    color: string;
-                    boxShadow?: undefined;
-                    display: string;
-                    alignItems: string;
-                    gap: number;
-                    width: string;
-                } | {
-                    backgroundColor: string;
-                    color: string;
-                    boxShadow: string;
-                    display: string;
-                    alignItems: string;
-                    gap: number;
-                    width: string;
-                } | {
-                    backgroundColor?: undefined;
-                    color?: undefined;
-                    boxShadow?: undefined;
                     display: string;
                     alignItems: string;
                     gap: number;
                     width: string;
+                    borderRadius: string;
                 };
                 tab: {
-                    _hover: {
-                        backgroundColor: string;
-                        boxShadow?: undefined;
-                        color?: undefined;
-                    } | {
-                        boxShadow: string;
-                        color: string;
-                        backgroundColor?: undefined;
-                    } | {
-                        backgroundColor: string;
-                        color: string;
-                        boxShadow?: undefined;
-                    } | {
-                        backgroundColor?: undefined;
-                        boxShadow?: undefined;
-                        color?: undefined;
-                    };
-                    _active: {
-                        backgroundColor: string;
-                        color: string;
-                    } | {
-                        backgroundColor?: undefined;
-                        color?: undefined;
-                    };
                     _disabled: {
                         color: string;
-                    } | {
-                        color?: undefined;
-                    };
-                    _focusVisible: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
+                        backgroundColor: string;
                     };
                     _selected: {
-                        backgroundColor: string;
-                        color: string;
-                        _focus: {
-                            boxShadow: string;
-                        };
-                        "&:focus:not(:focus-visible)": {
-                            boxShadow: string;
-                        };
-                        _focusVisible: {
-                            boxShadow: string;
-                        };
                         _hover: {
-                            backgroundColor: string;
-                            color: string;
-                        };
-                        _active: {
-                            backgroundColor: string;
                             color: string;
-                        };
-                        boxShadow: string;
-                        pointerEvents: string;
-                    } | {
-                        backgroundColor: string;
-                        color: string;
-                        _hover: {
                             backgroundColor: string;
-                            color: string;
                         };
                         _active: {
-                            backgroundColor: string;
                             color: string;
+                            backgroundColor: string;
                         };
-                        _focus?: undefined;
-                        "&:focus:not(:focus-visible)"?: undefined;
-                        _focusVisible?: undefined;
-                        boxShadow: string;
-                        pointerEvents: string;
-                    };
-                    color: string;
-                    display: string;
-                    justifyContent: string;
-                    alignItems: string;
-                    transitionProperty: string;
-                    transitionDuration: string;
-                    width: string;
-                    height: string;
-                    whiteSpace: string;
-                } | {
-                    _hover: {
-                        backgroundColor: string;
-                        boxShadow?: undefined;
-                        color?: undefined;
-                    } | {
-                        boxShadow: string;
                         color: string;
-                        backgroundColor?: undefined;
-                    } | {
-                        backgroundColor: string;
-                        color: string;
-                        boxShadow?: undefined;
-                    } | {
-                        backgroundColor?: undefined;
-                        boxShadow?: undefined;
-                        color?: undefined;
-                    };
-                    _active: {
                         backgroundColor: string;
-                        color: string;
-                    } | {
-                        backgroundColor?: undefined;
-                        color?: undefined;
-                    };
-                    _disabled: {
-                        color: string;
-                    } | {
-                        color?: undefined;
+                        pointerEvents: string;
                     };
                     _focusVisible: {
                         outlineWidth: string;
@@ -5363,46 +6147,6 @@ declare const theme: {
                         outlineStyle: string;
                         outlineOffset: string;
                     };
-                    _selected: {
-                        backgroundColor: string;
-                        color: string;
-                        _focus: {
-                            boxShadow: string;
-                        };
-                        "&:focus:not(:focus-visible)": {
-                            boxShadow: string;
-                        };
-                        _focusVisible: {
-                            boxShadow: string;
-                        };
-                        _hover: {
-                            backgroundColor: string;
-                            color: string;
-                        };
-                        _active: {
-                            backgroundColor: string;
-                            color: string;
-                        };
-                        boxShadow: string;
-                        pointerEvents: string;
-                    } | {
-                        backgroundColor: string;
-                        color: string;
-                        _hover: {
-                            backgroundColor: string;
-                            color: string;
-                        };
-                        _active: {
-                            backgroundColor: string;
-                            color: string;
-                        };
-                        _focus?: undefined;
-                        "&:focus:not(:focus-visible)"?: undefined;
-                        _focusVisible?: undefined;
-                        boxShadow: string;
-                        pointerEvents: string;
-                    };
-                    color?: undefined;
                     display: string;
                     justifyContent: string;
                     alignItems: string;
@@ -5411,11 +6155,11 @@ declare const theme: {
                     width: string;
                     height: string;
                     whiteSpace: string;
+                    borderRadius: string;
                 };
-                tabpanel: {};
             }) | undefined;
             sizes?: {
-                sm: {
+                xs: {
                     tablist: {
                         height: string;
                         padding: string;
@@ -5425,7 +6169,7 @@ declare const theme: {
                         paddingY: number;
                     };
                 };
-                md: {
+                sm: {
                     tablist: {
                         height: string;
                         padding: number;
@@ -5434,7 +6178,7 @@ declare const theme: {
                         paddingX: number;
                     };
                 };
-                lg: {
+                md: {
                     tablist: {
                         height: string;
                         padding: number;
@@ -5444,7 +6188,7 @@ declare const theme: {
                         paddingX: number;
                     };
                 };
-                xl: {
+                lg: {
                     tablist: {
                         height: string;
                         padding: string;
@@ -5456,26 +6200,56 @@ declare const theme: {
                 };
             } | undefined;
             variants?: {
-                round: {
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     tablist: {
-                        borderRadius: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        color: string;
+                        backgroundColor: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                        color: string;
+                        backgroundColor: string;
                     };
                     tab: {
-                        borderRadius: string;
+                        _hover: {
+                            outlineOffset: string;
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                        } | {
+                            outlineOffset: string;
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _accent: {
+                            backgroundColor: string;
+                        };
+                        color: string;
                     };
                 };
-                square: {
+                accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     tablist: {
-                        borderRadius: string;
+                        color: string;
+                        backgroundColor: string;
                     };
                     tab: {
-                        borderRadius: string;
+                        _hover: {
+                            backgroundColor: string;
+                        };
+                        _accent: {
+                            backgroundColor: string;
+                        };
+                        color: string;
                     };
                 };
             } | undefined;
             defaultProps?: {
-                size?: "sm" | "md" | "lg" | "xl" | undefined;
-                variant?: "round" | "square" | undefined;
+                size?: "sm" | "md" | "lg" | "xs" | undefined;
+                variant?: "base" | "accent" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
@@ -5494,10 +6268,87 @@ declare const theme: {
                         transform: string;
                     };
                 };
-                width: string;
-                outline: string;
-                border: number;
-                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;
+                };
+                _focusVisible: {
+                    outlineOffset: number;
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                };
+                _disabled: {
+                    pointerEvents: string;
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    pointerEvents: string;
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                };
+                _invalid: {
+                    _hover: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                } | {
+                    _hover: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    outline: string;
+                    outlineColor: string;
+                };
+                " + label": {
+                    fontSize: ("mobile.sm" | "desktop.sm")[];
+                    top: string;
+                    left: any;
+                    zIndex: number;
+                    position: string;
+                    marginY: number;
+                    transition: string;
+                    transformOrigin: string;
+                    cursor: string;
+                };
+                outlineWidth: string;
+                outlineColor: string;
+                outlineStyle: string;
+                outlineOffset: string;
                 borderRadius: string;
                 transitionProperty: string;
                 transitionDuration: string;
@@ -5505,13 +6356,42 @@ declare const theme: {
                 paddingX: number;
                 height: string;
                 fontSize: string;
-                boxShadow: string;
-                _active: {
-                    backgroundColor: string;
-                    boxShadow: string;
+                backgroundColor: string;
+                width: string;
+                outline: string;
+                border: number;
+            } | {
+                minHeight: string;
+                verticalAlign: string;
+                appearance: string;
+                paddingTop: number;
+                "&:not(:placeholder-shown)": {
+                    "&:has(+ label)": {
+                        paddingTop: number;
+                    };
+                    "& + label": {
+                        transform: string;
+                    };
                 };
                 _hover: {
-                    boxShadow: string;
+                    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;
@@ -5520,15 +6400,44 @@ declare const theme: {
                     outlineStyle: string;
                 };
                 _disabled: {
+                    pointerEvents: string;
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    pointerEvents: string;
+                    outline: string;
+                    outlineColor: string;
                     backgroundColor: string;
-                    boxShadow: string;
-                    cursor: string;
                 };
                 _invalid: {
-                    boxShadow: string;
                     _hover: {
-                        boxShadow: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                } | {
+                    _hover: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    } | {
+                        outline: string;
+                        outlineColor: string;
                     };
+                    outline: string;
+                    outlineColor: string;
                 };
                 " + label": {
                     fontSize: ("mobile.sm" | "desktop.sm")[];
@@ -5541,6 +6450,18 @@ declare const theme: {
                     transformOrigin: string;
                     cursor: string;
                 };
+                outline: string;
+                outlineColor: string;
+                borderRadius: string;
+                transitionProperty: string;
+                transitionDuration: string;
+                position: string;
+                paddingX: number;
+                height: string;
+                fontSize: string;
+                backgroundColor: string;
+                width: string;
+                border: number;
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
@@ -5605,6 +6526,7 @@ declare const theme: {
                             outlineStyle: string;
                             outlineOffset: string;
                         };
+                        boxShadow: string;
                         _hover: {
                             boxShadow: string;
                         };
@@ -5633,6 +6555,7 @@ declare const theme: {
                             outlineStyle: string;
                             outlineOffset: string;
                         };
+                        boxShadow: string;
                         _hover: {
                             boxShadow: string;
                         };
@@ -5673,7 +6596,7 @@ declare const theme: {
                     transform: string;
                     zIndex: string;
                     stroke: string;
-                    color: "ocean" | "golden" | "brightRed";
+                    color: "brightRed" | "golden" | "ocean";
                 };
             }) | undefined;
             sizes?: {
@@ -5817,81 +6740,6 @@ declare const theme: {
             } | undefined;
             parts: ("title" | "container" | "icon" | "description" | "iconContainer" | "textContainer" | "deviationIcon")[];
         };
-        AlertExpandable: {
-            baseStyle?: {
-                container: {
-                    paddingX: number;
-                    paddingY: number;
-                    fontSize: string;
-                    _expanded: {
-                        borderBottomRadius: string;
-                    };
-                };
-            } | undefined;
-            sizes?: {
-                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: "container"[];
-                }>;
-            } | undefined;
-            variants?: {
-                info: {
-                    container: {
-                        _hover: {
-                            boxShadow: string;
-                        };
-                        _active: {
-                            backgroundColor: string;
-                        };
-                    };
-                };
-                success: {
-                    container: {
-                        _hover: {
-                            boxShadow: string;
-                        };
-                        _active: {
-                            backgroundColor: string;
-                        };
-                    };
-                };
-                warning: {
-                    container: {
-                        _hover: {
-                            boxShadow: string;
-                        };
-                        _active: {
-                            backgroundColor: string;
-                        };
-                    };
-                };
-                "alt-transport": {
-                    container: {
-                        _hover: {
-                            boxShadow: string;
-                        };
-                        _active: {
-                            backgroundColor: string;
-                        };
-                    };
-                };
-                error: {
-                    container: {
-                        _hover: {
-                            boxShadow: string;
-                        };
-                        _active: {
-                            backgroundColor: string;
-                        };
-                    };
-                };
-            } | undefined;
-            defaultProps?: {
-                size?: string | number | undefined;
-                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | undefined;
-                colorScheme?: string | undefined;
-            } | undefined;
-            parts: "container"[];
-        };
         Avatar: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 badge: {
@@ -7568,14 +8416,17 @@ declare const theme: {
     direction: "ltr";
 };
 declare const brandTheme: {
-    VyDigital: {
-        colors: {
-            accent: string;
-        };
-    };
+    VyDigital: {};
     VyUtvikling: {
         colors: {
-            accent: string;
+            accent: {
+                surface: {
+                    default: {
+                        light: string;
+                        dark: string;
+                    };
+                };
+            };
         };
     };
 };