@vygruppen/spor-react 7.2.1 → 8.0.0

package/dist/index.d.ts

@@ -3,9 +3,8 @@ import * as tokens from '@vygruppen/spor-design-tokens';
 export { tokens };
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
 import { DividerProps as DividerProps$1, As, BoxProps, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, BreadcrumbProps as BreadcrumbProps$1, ButtonProps as ButtonProps$1, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ComponentWithAs, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
-export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, CSSWithMultiValues, Center, CenterProps, Collapse, CollapseProps, ComponentStyleConfig, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, ListItem, ListItemProps, ListProps, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverArrowProps, PopoverBody, PopoverBodyProps, PopoverCloseButton, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTrigger, Portal, PortalProps, ScaleFade, ScaleFadeProps, SimpleGrid, SimpleGridProps, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
-import * as React from 'react';
-import React__default, { ChangeEvent } from 'react';
+export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, CSSWithMultiValues, Center, CenterProps, Collapse, CollapseProps, ComponentStyleConfig, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, ListItem, ListItemProps, ListProps, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, OrderedList, Portal, PortalProps, ScaleFade, ScaleFadeProps, SimpleGrid, SimpleGridProps, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
+import React, { ChangeEvent } from 'react';
 import * as _chakra_ui_breadcrumb_dist_breadcrumb_link from '@chakra-ui/breadcrumb/dist/breadcrumb-link';
 import * as _chakra_ui_breadcrumb_dist_breadcrumb_item from '@chakra-ui/breadcrumb/dist/breadcrumb-item';
 import { DateValue } from '@internationalized/date';
@@ -70,39 +69,23 @@ type AccordionProps = Omit<AccordionProps$1, "variant" | "size"> & {
     /**
      * The display variant of the accordion items.
      *
-     * - `list` renders a pretty unstyled expandable list without any borders
-     * - `outline` renders an outlined version
-     * - `card` renders a version with a drop shadow
+     * - `ghost` renders a pretty unstyled expandable list without any borders
+     * - `base` renders an outlined version
+     * - `floating` renders a version with a drop shadow
      */
-    variant?: "list" | "outline" | "card";
+    variant?: "ghost" | "base" | "floating";
     size?: "sm" | "md" | "lg";
     /** The margin between accordion items */
     spacing?: StackProps["spacing"];
 };
-/**
- * Wraps a set of ExpandableItem or AccordionItem components.
- *
- * ```tsx
- * <Accordion variant="list" size="md">
- *   <ExpandableItem title="Is Spor easy?" headingLevel="h3">
- *     Yes
- *   </ExpandableItem>
- *   <ExpandableItem title="Is Spor lovable?" headingLevel="h3">
- *     🥰
- *   </ExpandableItem>
- * </Accordion>
- * ```
- *
- * If you only have one expandable item, you can use the `<Expandable />` component instead.
- */
 declare const Accordion: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", AccordionProps>;
 
 type HeadingLevel = "h2" | "h3" | "h4" | "h5" | "h6";
 type ExpandableProps = Omit<AccordionProps, "title"> & {
     /** The hidden content */
-    children: React__default.ReactNode;
+    children: React.ReactNode;
     /** The title that's shown inside the toggle button */
-    title: React__default.ReactNode;
+    title: React.ReactNode;
     /** The semantic heading level of the toggle button */
     headingLevel?: HeadingLevel;
     /**
@@ -113,7 +96,7 @@ type ExpandableProps = Omit<AccordionProps, "title"> & {
      * If the size is set to `sm` or `md` the icon should be 24px.
      * If the size is set to `lg`, the icon should be 30px.
      */
-    leftIcon?: React__default.ReactNode;
+    leftIcon?: React.ReactNode;
 };
 /**
  * A standalone expandable component.
@@ -122,17 +105,17 @@ type ExpandableProps = Omit<AccordionProps, "title"> & {
  * If you want several expandables in a row, use the `Accordion` and `ExpandableItem` components instead.
  *
  * ```tsx
- * <Expandable title="Click for more" variant="card" size="lg">
+ * <Expandable title="Click for more" variant="base" size="lg">
  *   <Text>MORE! 🎉</Text>
  * </Expandable>
  * ```
  */
-declare const Expandable: ({ children, headingLevel, title, leftIcon, size, ...rest }: ExpandableProps) => React__default.JSX.Element;
+declare const Expandable: ({ children, headingLevel, title, leftIcon, size, ...rest }: ExpandableProps) => React.JSX.Element;
 type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
     /** The hidden content */
-    children: React__default.ReactNode;
+    children: React.ReactNode;
     /** The title that's shown inside the toggle button */
-    title: React__default.ReactNode;
+    title: React.ReactNode;
     /** The semantic heading level of the toggle button */
     headingLevel?: HeadingLevel;
     /**
@@ -140,13 +123,13 @@ type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
      *
      * Make sure it's the 30px outlined version of the icon
      */
-    leftIcon?: React__default.ReactNode;
+    leftIcon?: React.ReactNode;
 };
 /**
  * An item in a set of Expandables. Must be wrapped in an `<Accordion>` component.
  *
  * ```tsx
- * <Accordion variant="list" size="md">
+ * <Accordion variant="ghost" size="md">
  *  <ExpandableItem title="Is Spor easy?" headingLevel="h3">
  *    Yes
  *  </ExpandableItem>
@@ -158,13 +141,13 @@ type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
  *
  * If you need even more control, you can put together your own expandable with the `Accordion`, `AccordionItem`, `AccordionButton`, `AccordionIcon` and `AccordionPanel` components.
  */
-declare const ExpandableItem: ({ children, title, headingLevel, leftIcon, ...rest }: ExpandableItemProps) => React__default.JSX.Element;
+declare const ExpandableItem: ({ children, title, headingLevel, leftIcon, ...rest }: ExpandableItemProps) => React.JSX.Element;
 
 type BaseAlertProps = BoxProps & {
     /** The color scheme and icon of the alert */
     variant: "info" | "success" | "warning" | "alt-transport" | "error";
     /** The body content of the alert */
-    children: React__default.ReactNode;
+    children: React.ReactNode;
 };
 
 type ClosableAlertProps = BaseAlertProps & {
@@ -193,7 +176,7 @@ type ClosableAlertProps = BaseAlertProps & {
  *   <Text>Some info here</Text>
  * </ClosableAlert>
  */
-declare const ClosableAlert: ({ variant, children, onClose: externalOnClose, }: ClosableAlertProps) => React__default.JSX.Element | null;
+declare const ClosableAlert: ({ variant, children, onClose: externalOnClose, }: ClosableAlertProps) => React.JSX.Element | null;
 
 type ExpandableAlertProps = BaseAlertProps & {
     /** The title string  */
@@ -219,7 +202,7 @@ type ExpandableAlertProps = BaseAlertProps & {
  * </ExpandableAlert>
  * ```
  */
-declare const ExpandableAlert: ({ variant, children, title, headingLevel, defaultOpen, onToggle, ...boxProps }: ExpandableAlertProps) => React__default.JSX.Element;
+declare const ExpandableAlert: ({ variant, children, title, headingLevel, defaultOpen, onToggle, ...boxProps }: ExpandableAlertProps) => React.JSX.Element;
 
 type StaticAlertProps = BaseAlertProps;
 /**
@@ -233,7 +216,7 @@ type StaticAlertProps = BaseAlertProps;
  * </StaticAlert>
  * ```
  */
-declare const StaticAlert: ({ children, ...props }: StaticAlertProps) => React__default.JSX.Element;
+declare const StaticAlert: ({ children, ...props }: StaticAlertProps) => React.JSX.Element;
 
 type BreadcrumbProps = BreadcrumbProps$1;
 /**
@@ -252,7 +235,7 @@ type BreadcrumbProps = BreadcrumbProps$1;
  * </Breadcrumb>
  * ```
  */
-declare const Breadcrumb: (props: BreadcrumbProps) => React__default.JSX.Element;
+declare const Breadcrumb: (props: BreadcrumbProps) => React.JSX.Element;
 declare const BreadcrumbItem: _chakra_ui_system_dist_system_types.ComponentWithAs<"li", _chakra_ui_breadcrumb_dist_breadcrumb_item.BreadcrumbItemProps>;
 declare const BreadcrumbLink: _chakra_ui_system_dist_system_types.ComponentWithAs<"a", _chakra_ui_breadcrumb_dist_breadcrumb_link.BreadcrumbLinkProps>;
 
@@ -397,8 +380,8 @@ declare const CloseButton: _chakra_ui_system_dist_system_types.ComponentWithAs<"
 type FloatingActionButtonProps = BoxProps & {
     variant?: "accent" | "base" | "brand";
     placement?: "bottom right" | "bottom left" | "top right" | "top left";
-    icon: React__default.ReactNode;
-    children: React__default.ReactNode;
+    icon: React.ReactNode;
+    children: React.ReactNode;
     isTextVisible?: boolean;
 };
 /**
@@ -417,7 +400,7 @@ declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "butto
 
 type CardProps = Exclude<BoxProps, "size"> & {
     size?: "sm" | "lg";
-    children: React__default.ReactNode;
+    children: React.ReactNode;
     colorScheme: "white" | "grey" | "blue" | "green" | "teal" | "yellow" | "orange" | "red";
 };
 /**
@@ -461,13 +444,13 @@ declare const Card: _chakra_ui_system_dist_system_types.ComponentWithAs<As, Card
  * <DatePicker label="Dato" variant="base" />
  * ```
  */
-declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<AriaDatePickerProps<DateValue>, "onChange"> & Pick<BoxProps, "width" | "minHeight"> & {
+declare const DatePicker: React.ForwardRefExoticComponent<Omit<AriaDatePickerProps<DateValue>, "onChange"> & Pick<BoxProps, "width" | "minHeight"> & {
     variant: ResponsiveValue<"base" | "floating" | "ghost">;
     name?: string | undefined;
     showYearNavigation?: boolean | undefined;
     withPortal?: boolean | undefined;
     onChange?: ((value: DateValue | null) => void) | undefined;
-} & React__default.RefAttributes<HTMLDivElement>>;
+} & React.RefAttributes<HTMLDivElement>>;
 
 type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue>, "onChange"> & Pick<BoxProps, "minHeight"> & {
     startLabel?: string;
@@ -490,7 +473,7 @@ type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue>, "onChange"
  * <DateRangePicker startLabel="From" startName="from" endLabel="To" endName="to" variant="base" />
  * ```
  */
-declare function DateRangePicker({ variant, minHeight, startName, endName, withPortal, ...props }: DateRangePickerProps): React__default.JSX.Element;
+declare function DateRangePicker({ variant, minHeight, startName, endName, withPortal, ...props }: DateRangePickerProps): React.JSX.Element;
 
 type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
     /** The label. Defaults to a localized version of "Time" */
@@ -540,7 +523,7 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
  *
  * @see https://spor.vy.no/komponents/timepicker
  */
-declare const TimePicker: ({ label: externalLabel, value, defaultValue, onChange, minuteInterval, isDisabled: isDisabledExternally, name, ...boxProps }: TimePickerProps) => React__default.JSX.Element;
+declare const TimePicker: ({ label: externalLabel, value, defaultValue, onChange, minuteInterval, isDisabled: isDisabledExternally, name, ...boxProps }: TimePickerProps) => React.JSX.Element;
 
 declare enum Language {
     NorwegianBokmal = "nb",
@@ -549,7 +532,7 @@ declare enum Language {
     English = "en"
 }
 type TranslationObject = {
-    [key in Language]: string | React__default.ReactElement;
+    [key in Language]: string | React.ReactElement;
 };
 type TranslationFunction = (...args: Array<string | number>) => TranslationObject;
 type Translation = TranslationObject | TranslationFunction;
@@ -558,7 +541,7 @@ type Translations = {
 };
 type LanguageProviderProps = {
     language: Language;
-    children: React__default.ReactElement;
+    children: React.ReactElement;
 };
 /**
  * A language provider component.
@@ -580,7 +563,7 @@ type LanguageProviderProps = {
  * ```
  *
  */
-declare function LanguageProvider({ language, children, }: LanguageProviderProps): React__default.JSX.Element;
+declare function LanguageProvider({ language, children, }: LanguageProviderProps): React.JSX.Element;
 /**
  * A hook that returns translation utilities. Typically used to translate text.
  *
@@ -648,7 +631,7 @@ type AttachedInputsProps = FlexProps;
  * </AttachedInputs>
  * ```
  */
-declare const AttachedInputs: ({ flexDirection, ...rest }: AttachedInputsProps) => React__default.JSX.Element;
+declare const AttachedInputs: ({ flexDirection, ...rest }: AttachedInputsProps) => React.JSX.Element;
 
 type CardSelectProps = BoxProps & {
     /** The design of the trigger button.
@@ -669,9 +652,9 @@ type CardSelectProps = BoxProps & {
     /** The text of the trigger button */
     label: string;
     /** An optional trigger button icon, rendered to the left of the label */
-    icon?: React__default.ReactNode;
+    icon?: React.ReactNode;
     /** The content of the card select */
-    children: React__default.ReactNode;
+    children: React.ReactNode;
     /** The horizontalOffset of the popover card */
     crossOffset?: number;
     /** The position of the popover card */
@@ -734,20 +717,22 @@ type CheckboxGroupProps = Exclude<CheckboxGroupProps$1, "colorScheme" | "size" |
  *   <Checkbox>First Class</Checkbox>
  * </CheckboxGroup>
  */
-declare const CheckboxGroup: ({ direction, children, ...props }: CheckboxGroupProps) => React__default.JSX.Element;
+declare const CheckboxGroup: ({ direction, children, ...props }: CheckboxGroupProps) => React.JSX.Element;
 
 type ChoiceChipProps = {
     onChange?: (value: ChangeEvent<HTMLInputElement>) => void;
     isChecked?: boolean;
+    isDisabled?: boolean;
     defaultChecked?: boolean;
     /** The button text */
-    children: React__default.ReactNode;
+    children: React.ReactNode;
     icon?: {
-        default: React__default.ReactNode;
-        checked: React__default.ReactNode;
+        default: React.ReactNode;
+        checked: React.ReactNode;
     };
     size?: "sm" | "md" | "lg" | "xl";
-    variant?: "icon" | "choice" | "filter";
+    chipType?: "icon" | "choice" | "filter";
+    variant?: "base" | "accent" | "floating";
 };
 /**
  * Choice chips are checkboxes that look like selectable buttons.
@@ -761,21 +746,22 @@ type ChoiceChipProps = {
  * </Stack>
  * ```
  *
- * There are also three different variants - `icon`, `choice` and `filter`.
+ * There are also three different chipType - `icon`, `choice` and `filter`.
  *
  * ```tsx
  * <Stack flexDirection="row">
- *  <ChoiceChip variant="icon" icon={<Bus24Icon />}>Bus</ChoiceChip>
- *  <ChoiceChip variant="choice" icon={<Bus24Icon />}>Bus</ChoiceChip>
- *  <ChoiceChip variant="filter" icon={<Bus24Icon />}>Bus</ChoiceChip>
+ *  <ChoiceChip chipType="icon" icon={<Bus24Icon />}>Bus</ChoiceChip>
+ *  <ChoiceChip chipType="choice" icon={<Bus24Icon />}>Bus</ChoiceChip>
+ *  <ChoiceChip chipType="filter" icon={<Bus24Icon />}>Bus</ChoiceChip>
  * </Stack>
  *
- * You can add an icon as well, if you want to!
+ * There are also three different variants - `base`, `accent` and `floating`.
  *
  * ```tsx
  * <Stack flexDirection="row">
- *   <ChoiceChip size="md" icon={<BusIcon />}>Bus</ChoiceChip>
- *   <ChoiceChip size="lg" icon={<TrainIcon />}>Train</ChoiceChip>
+ *   <ChoiceChip variant="base">Bus</ChoiceChip>
+ *   <ChoiceChip variant="accent">Boat</ChoiceChip>
+ *   <ChoiceChip variant="floating">Train</ChoiceChip>
  * </Stack>
  * ```
  */
@@ -787,7 +773,7 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
     /** Whether or not the combobox is waiting for new suggestions */
     isLoading?: boolean;
     /** Optional UI to show when there are no matching items */
-    emptyContent?: React__default.ReactNode;
+    emptyContent?: React.ReactNode;
 } & Pick<InputProps, "marginTop" | "marginBottom" | "marginRight" | "marginLeft" | "marginY" | "marginX" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingY" | "paddingX" | "leftIcon" | "rightIcon" | "borderTopRightRadius" | "borderTopLeftRadius" | "borderBottomRightRadius" | "borderBottomLeftRadius" | "onFocus">;
 /**
  * A combobox is a combination of an input and a list of suggestions.
@@ -812,7 +798,7 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
  * </Combobox>
  * ```
  */
-declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, ...rest }: ComboboxProps<T>): React__default.JSX.Element;
+declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, ...rest }: ComboboxProps<T>): React.JSX.Element;
 
 type FormControlProps = FormControlProps$1;
 declare const FormControl: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", FormControlProps$1>;
@@ -821,7 +807,7 @@ type FormErrorMessageProps = BoxProps & {
     /**
      * The error message itself.
      */
-    children: React__default.ReactNode;
+    children: React.ReactNode;
 };
 /** An error message
  *
@@ -848,7 +834,7 @@ type FormErrorMessageProps = BoxProps & {
  *
  * @see https://spor.vy.no/components/form-control
  */
-declare const FormErrorMessage: ({ children, ...boxProps }: FormErrorMessageProps) => React__default.JSX.Element | null;
+declare const FormErrorMessage: ({ children, ...boxProps }: FormErrorMessageProps) => React.JSX.Element | null;
 
 type FormLabelProps = FormLabelProps$1;
 declare const FormLabel: _chakra_ui_system_dist_system_types.ComponentWithAs<"label", FormLabelProps$1>;
@@ -881,7 +867,7 @@ type InfoSelectProps<T extends object> = {
      * </Select>
      * ```
      **/
-    children: React__default.ReactElement | ((item: T) => React__default.ReactElement);
+    children: React.ReactElement | ((item: T) => React.ReactElement);
     /**
      * The items to render
      *
@@ -987,15 +973,15 @@ type InfoSelectProps<T extends object> = {
  *
  * @see https://spor.vy.no/components/info-select
  */
-declare function InfoSelect<T extends object>({ placeholder, width, height, onChange, value, isLabelSrOnly, defaultValue, variant, ...props }: InfoSelectProps<T>): React__default.JSX.Element;
+declare function InfoSelect<T extends object>({ placeholder, width, height, onChange, value, isLabelSrOnly, defaultValue, variant, ...props }: InfoSelectProps<T>): React.JSX.Element;
 
 type InputProps = Omit<InputProps$1, "variant" | "size"> & {
     /** The input's label */
     label: string;
     /** Icon that shows up to the left */
-    leftIcon?: React__default.ReactNode;
+    leftIcon?: React.ReactNode;
     /** Icon that shows up to the right */
-    rightIcon?: React__default.ReactNode;
+    rightIcon?: React.ReactNode;
 };
 /**
  * Inputs let you enter text or other data.
@@ -1048,13 +1034,13 @@ declare const InputRightElement: _chakra_ui_system_dist_system_types.ComponentWi
 
 type ListBoxProps<T> = AriaListBoxProps<T> & Omit<BoxProps, "filter" | "autoFocus" | "children"> & {
     /** External reference to the ListBox itself */
-    listBoxRef: React__default.RefObject<HTMLUListElement>;
+    listBoxRef: React.RefObject<HTMLUListElement>;
     /** Whether or not the listbox is waiting on new data, i.e. through a autosuggest search */
     isLoading?: boolean;
     /** The state of the listbox, provided externally somehow. */
     state: ListState<T> | SelectState<T>;
     /** UI to render if the collection is empty */
-    emptyContent?: React__default.ReactNode;
+    emptyContent?: React.ReactNode;
     maxWidth?: BoxProps["maxWidth"];
 };
 /**
@@ -1091,23 +1077,23 @@ type ListBoxProps<T> = AriaListBoxProps<T> & Omit<BoxProps, "filter" | "autoFocu
  * );
  * ```
  */
-declare function ListBox<T extends object>({ isLoading, listBoxRef, state, maxWidth, ...props }: ListBoxProps<T>): React__default.JSX.Element;
+declare function ListBox<T extends object>({ isLoading, listBoxRef, state, maxWidth, ...props }: ListBoxProps<T>): React.JSX.Element;
 /**
  * Renders a label for a listbox item.
  *
  * Useful if you want to render a custom Item - especially if it has a description.
  */
 declare function ItemLabel({ children }: {
-    children: React__default.ReactNode;
-}): React__default.JSX.Element;
+    children: React.ReactNode;
+}): React.JSX.Element;
 /**
  * Renders a description for an Item.
  *
  * Useful if you want to render a custom Item with more than just a label.
  */
 declare function ItemDescription({ children }: {
-    children: React__default.ReactNode;
-}): React__default.JSX.Element;
+    children: React.ReactNode;
+}): React.JSX.Element;
 
 type NativeSelectProps = Exclude<SelectProps, "colorScheme" | "variant" | "size"> & {
     label?: string;
@@ -1174,7 +1160,7 @@ type NumericStepperProps = {
  * </FormControl>
  * ```
  */
-declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, stepSize, showZero, ...boxProps }: NumericStepperProps): React__default.JSX.Element;
+declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, stepSize, showZero, ...boxProps }: NumericStepperProps): React.JSX.Element;
 
 type PasswordInputProps = InputProps;
 declare const PasswordInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"input", InputProps>;
@@ -1389,7 +1375,7 @@ type InfoTagProps = TagProps;
  *
  * @see https://spor.vy.no/components/line-tags
  */
-declare const InfoTag: ({ variant, size, title, description, ...customProps }: InfoTagProps) => React__default.JSX.Element;
+declare const InfoTag: ({ variant, size, title, description, ...customProps }: InfoTagProps) => React.JSX.Element;
 
 type DefaultVariants = Exclude<TagProps["variant"], "custom">;
 type DefaultVariantProps = {
@@ -1434,7 +1420,7 @@ type LineIconProps = Exclude<BoxProps, "variant"> & VariantProps & {
  *
  * @see https://spor.vy.no/components/line-tags
  */
-declare const LineIcon: ({ variant, size, sx, ...rest }: LineIconProps) => React__default.JSX.Element | null;
+declare const LineIcon: ({ variant, size, sx, ...rest }: LineIconProps) => React.JSX.Element | null;
 
 type TravelTagProps = TagProps & BoxProps & {
     deviationLevel?: "critical" | "major" | "minor" | "info" | "none";
@@ -1507,7 +1493,7 @@ type ColorInlineLoaderProps = Exclude<BoxProps, "children">;
  *
  * This component should only be used on light backgrounds with low saturation (e.g. white, light grey etc.). For colored backgrounds, please use the LightInlineLoader component.
  */
-declare const ColorInlineLoader: ({ width, maxWidth, ...props }: ColorInlineLoaderProps) => React__default.JSX.Element;
+declare const ColorInlineLoader: ({ width, maxWidth, ...props }: ColorInlineLoaderProps) => React.JSX.Element;
 
 type SpinnerProps = BoxProps;
 type ColorSpinnerProps = SpinnerProps;
@@ -1526,23 +1512,23 @@ type ColorSpinnerProps = SpinnerProps;
  *   Hold your horses
  * </ColorSpinner>
  */
-declare const ColorSpinner: ({ children, width, maxWidth, ...props }: SpinnerProps) => React__default.JSX.Element;
+declare const ColorSpinner: ({ children, width, maxWidth, ...props }: SpinnerProps) => React.JSX.Element;
 
 type ContentLoaderProps = BoxProps;
 /**
  * ContentLoader is a component that renders a loading animation.
  * It should mostly be used for
  */
-declare const ContentLoader: ({ children, ...props }: ContentLoaderProps) => React__default.JSX.Element;
+declare const ContentLoader: ({ children, ...props }: ContentLoaderProps) => React.JSX.Element;
 
 type DarkFullScreenLoaderProps = BoxProps;
-declare const DarkFullScreenLoader: ({ width, maxWidth, ...props }: DarkFullScreenLoaderProps) => React__default.JSX.Element;
+declare const DarkFullScreenLoader: ({ width, maxWidth, ...props }: DarkFullScreenLoaderProps) => React.JSX.Element;
 
 type DarkInlineLoaderProps = Exclude<BoxProps, "children">;
 /**
  * Loading component that works well in bounded contexts, like inside a button.
  */
-declare const DarkInlineLoader: ({ width, maxWidth, ...props }: DarkInlineLoaderProps) => React__default.JSX.Element;
+declare const DarkInlineLoader: ({ width, maxWidth, ...props }: DarkInlineLoaderProps) => React.JSX.Element;
 
 type DarkSpinnerProps = BoxProps;
 /** A circular spinner
@@ -1560,16 +1546,16 @@ type DarkSpinnerProps = BoxProps;
  *   Hold your horses
  * </DarkSpinner>
  */
-declare const DarkSpinner: ({ children, width, maxWidth, ...props }: DarkSpinnerProps) => React__default.JSX.Element;
+declare const DarkSpinner: ({ children, width, maxWidth, ...props }: DarkSpinnerProps) => React.JSX.Element;
 
 type LightFullScreenLoaderProps = BoxProps;
-declare const LightFullScreenLoader: ({ width, maxWidth, ...props }: LightFullScreenLoaderProps) => React__default.JSX.Element;
+declare const LightFullScreenLoader: ({ width, maxWidth, ...props }: LightFullScreenLoaderProps) => React.JSX.Element;
 
 type LightInlineLoaderProps = Exclude<BoxProps, "children">;
 /**
  * Loading component that works well in bounded contexts, like inside a button.
  */
-declare const LightInlineLoader: ({ width, maxWidth, ...props }: LightInlineLoaderProps) => React__default.JSX.Element;
+declare const LightInlineLoader: ({ width, maxWidth, ...props }: LightInlineLoaderProps) => React.JSX.Element;
 
 type LightSpinnerProps = BoxProps;
 /** A circular spinner
@@ -1587,7 +1573,7 @@ type LightSpinnerProps = BoxProps;
  *   Hold your horses
  * </LightSpinner>
  */
-declare const LightSpinner: ({ children, width, maxWidth, ...props }: LightSpinnerProps) => React__default.JSX.Element;
+declare const LightSpinner: ({ children, width, maxWidth, ...props }: LightSpinnerProps) => React.JSX.Element;
 
 type ProgressBarProps = BoxProps & {
     /** The percentage of progress made.
@@ -1643,7 +1629,7 @@ type ProgressBarProps = BoxProps & {
  * <ProgressBar value={50} aria-label="Loading..." />
  * ```
  */
-declare const ProgressBar: ({ value, label, labelRotationDelay, height, width, "aria-label": ariaLabel, ...rest }: ProgressBarProps) => React__default.JSX.Element;
+declare const ProgressBar: ({ value, label, labelRotationDelay, height, width, "aria-label": ariaLabel, ...rest }: ProgressBarProps) => React.JSX.Element;
 
 type ProgressLoaderProps = BoxProps & {
     /** The percentage of progress made.
@@ -1695,7 +1681,7 @@ type ProgressLoaderProps = BoxProps & {
  * <ProgressLoader value={50} aria-label="Fetching your trips..." />
  * ```
  */
-declare const ProgressLoader: ({ value, label, labelRotationDelay, "aria-label": ariaLabel, width, ...rest }: ProgressLoaderProps) => React__default.JSX.Element;
+declare const ProgressLoader: ({ value, label, labelRotationDelay, "aria-label": ariaLabel, width, ...rest }: ProgressLoaderProps) => React.JSX.Element;
 
 type SkeletonProps = BoxProps & {
     isLoaded?: boolean;
@@ -1709,13 +1695,13 @@ type SkeletonCircleProps = BoxProps;
 /**
  * SkeletonCircle renders a loading animation for a given circle. It works great as a placeholder to avoid layout shifts.
  */
-declare const SkeletonCircle: (props: SkeletonCircleProps) => React__default.JSX.Element;
+declare const SkeletonCircle: (props: SkeletonCircleProps) => React.JSX.Element;
 
 type SkeletonTextProps = SkeletonTextProps$1;
 /**
  * SkeletonText renders a loading animation for a given text. It works great as a placeholder to avoid layout shifts.
  */
-declare const SkeletonText: (props: SkeletonTextProps) => React__default.JSX.Element;
+declare const SkeletonText: (props: SkeletonTextProps) => React.JSX.Element;
 
 type VyLogoProps = {
     /** The color of the logo
@@ -1725,7 +1711,7 @@ type VyLogoProps = {
      */
     colorScheme: "light" | "dark";
 } & BoxProps;
-declare const VyLogo: ({ colorScheme, ...boxProps }: VyLogoProps) => React__default.JSX.Element;
+declare const VyLogo: ({ colorScheme, ...boxProps }: VyLogoProps) => React.JSX.Element;
 
 type JumpButtonProps = BoxProps & {
     onClick: () => void;
@@ -1745,7 +1731,7 @@ type JumpButtonProps = BoxProps & {
  * <JumpButton direction="forward" onClick={onGoForward} />
  * ```
  */
-declare const JumpButton: ({ direction, isDisabled, size, ...props }: JumpButtonProps) => React__default.JSX.Element;
+declare const JumpButton: ({ direction, isDisabled, size, ...props }: JumpButtonProps) => React.JSX.Element;
 
 type PlayPauseButtonProps = BoxProps & {
     onClick: () => void;
@@ -1765,7 +1751,7 @@ type PlayPauseButtonProps = BoxProps & {
  * <PlayPauseButton isPlaying={isPlaying} onClick={onPlaybackClick} />
  * ```
  */
-declare const PlayPauseButton: ({ size, isPlaying, isDisabled, ...props }: PlayPauseButtonProps) => React__default.JSX.Element;
+declare const PlayPauseButton: ({ size, isPlaying, isDisabled, ...props }: PlayPauseButtonProps) => React.JSX.Element;
 
 type SkipButtonProps = BoxProps & {
     onClick: () => void;
@@ -1785,7 +1771,7 @@ type SkipButtonProps = BoxProps & {
  * <SkipButton direction="forward" onClick={onNextChapter} />
  * ```
  */
-declare const SkipButton: ({ direction, isDisabled, size, ...props }: SkipButtonProps) => React__default.JSX.Element;
+declare const SkipButton: ({ direction, isDisabled, size, ...props }: SkipButtonProps) => React.JSX.Element;
 
 type ModalHeaderProps = ModalHeaderProps$1 & {
     size?: "sm" | "lg";
@@ -1798,12 +1784,12 @@ type ModalHeaderProps = ModalHeaderProps$1 & {
 declare const ModalHeader: _chakra_ui_system_dist_system_types.ComponentWithAs<"header", ModalHeaderProps>;
 
 type DrawerProps = DrawerProps$1;
-declare const Drawer: (props: DrawerProps) => React__default.JSX.Element;
+declare const Drawer: (props: DrawerProps) => React.JSX.Element;
 declare const DrawerContent: _chakra_ui_system_dist_system_types.ComponentWithAs<any, DrawerContentProps>;
 
 type SimpleDrawerProps = {
-    children: React__default.ReactNode;
-    title?: React__default.ReactNode;
+    children: React.ReactNode;
+    title?: React.ReactNode;
     placement: "top" | "right" | "bottom" | "left";
     isOpen: boolean;
     onClose: () => void;
@@ -1818,78 +1804,120 @@ type SimpleDrawerProps = {
  *
  * For more advanced use cases, see the [Drawer](./Drawer.tsx) component.
  */
-declare const SimpleDrawer: ({ placement, children, title, ...props }: SimpleDrawerProps) => React__default.JSX.Element;
+declare const SimpleDrawer: ({ placement, children, title, ...props }: SimpleDrawerProps) => React.JSX.Element;
 
-type PopoverWizardProps = {
-    /** Each child will be their own step */
-    children: React.ReactNode;
-};
-/** A popover wizard is great for showing new features one by one */
-declare const PopoverWizardBody: ({ children }: PopoverWizardProps) => React.JSX.Element;
-
-type SimplePopoverProps = PopoverProps & {
+type TooltipProps = PopoverProps & {
     /**
-     * Whatever is supposed to trigger the popover.
+     * Whatever is supposed to trigger the tooltip.
      * Must be focusable - like a link or button */
-    triggerElement?: React__default.ReactNode;
-    /** Callback for when the popover is requested to close */
+    children: React.ReactNode;
+    /** Callback for when the tooltip is requested to close */
     onClose?: () => void;
-    /** Should the popover have a close button? */
+    /** Should the tooltip have a close button? */
     withCloseButton?: boolean;
-    /** The content of the popover */
-    children: React__default.ReactNode;
+    /** The content of the tooltip */
+    content: React.ReactNode;
     /** Use this prop if you want to control the open state */
     isOpen?: boolean;
-    /** Whether or not the popover is open by default */
+    /** Whether or not the tooltip is open by default */
     defaultIsOpen?: boolean;
     /**
-     * Where the popover should be placed by default.
+     * Where the tooltip should be placed by default.
      *
      * Note - this is a suggestion, and may be overridden by space concerns.
      */
     placement?: "top" | "bottom" | "left" | "right";
     /**
      * The amount of spacing.
-     * Popovers with lots of content should be `lg`. Defaults to `sm`.
+     * Tooltips with lots of content should be `lg`. Defaults to `sm`.
      **/
     size?: "sm" | "lg";
-    borderRadius?: string;
 };
-/** A basic popover component for basic content */
-declare const SimplePopover: ({ children, triggerElement, onClose, isOpen, defaultIsOpen, placement, size, withCloseButton, borderRadius, ...props }: SimplePopoverProps) => React__default.JSX.Element;
+/** A tooltip component. */
+declare const Tooltip: ({ children, content, onClose, isOpen, defaultIsOpen, placement, size, withCloseButton, ...props }: TooltipProps) => React.JSX.Element;
 
-type WizardPopoverProps = PopoverProps & {
-    /** Steps in the wizard. Each item is its own step */
+type NudgeProps = {
+    /**
+     * The ISO-formatted date of when the Nudge was introduced.
+     *
+     * After this date has been surpassed by 30 days, the nudge will no longer be shown,
+     * and an error will be logged in development mode.
+     *
+     * ```tsx
+     * <Nudge introducedDate="2024-02-19" {...otherProps} />
+     * ```
+     **/
+    introducedDate: string;
+    /**
+     * The name of the nudge.
+     * This will be used to check whether or not the nudge has been viewed.
+     **/
+    name: string;
+    /**
+     * The anchor of the nudge.
+     *
+     * The element that should be nudged toward.
+     *
+     * ```tsx
+     * <Nudge content="This is a great new feature! Try it out.">
+     *  <MyFeature />
+     * </Nudge>
+     * ```
+     * */
     children: React.ReactNode;
-    /** The element that triggers the wizard */
-    triggerElement: React.ReactNode;
     /**
-     * Where the popover should be placed by default.
+     * The content of the nudge.
+     */
+    content: React.ReactNode;
+    /**
+     * Any actions you want to provide. Defaults to a close button and a "Show me" button.
+     */
+    actions?: React.ReactNode;
+} & Omit<TooltipProps, "name" | "triggerElement" | "children" | "withCloseButton" | "defaultIsOpen" | "size" | "borderRadius">;
+/** A nudge.
+ *
+ * A nudge is a way to hint of a new feature.
+ *
+ * You're required to set an `introducedDate` to the nudge, which is the timestamp of when the nudge was introduced. After 30 days, the nudge will no longer be shown, and an error will be logged in development mode.
+ *
+ * ```tsx
+ * <Nudge
+ *  introducedDate="2024-02-19"
+ *  name="my-nudge"
+ *  content="Check out this enormous new feature!"
+ * >
+ *   <Card variant="base" padding={2} width="fit-content">My new feature</Card>
+ * </Nudge>
+ * ```
+ */
+declare const Nudge: ({ introducedDate, name, children, content, actions, ...props }: NudgeProps) => React.JSX.Element | null;
+
+type WizardNudgeProps = Omit<NudgeProps, "actions" | "content"> & {
+    /** Steps in the wizard. Each item is its own step. Should only be Step components */
+    content: React.ReactNode[];
+    /**
+     * Where the nudge should be placed by default.
      *
      * Note - this is a suggestion, and may be overridden by space concerns.
      */
     placement?: "top" | "bottom" | "left" | "right";
-    /** Should the popover have a close button? */
-    withCloseButton?: boolean;
 };
 /**
- * A popover that displays its children one at a time, with a step indicator
- *
- * Each child is its own step. If you want several components inside a
- * single slide, you want to wrap them in an external component (like a Stack).
+ * A nudge that displays its children one at a time, with a step indicator.
  *
  * ```tsx
- * <WizardPopover triggerElement={<Button>Click me</Button>}>
- *  <Text>First step</Text>
- *  <Text>Second step</Text>
- *  <Stack>
- *    <Text>Third step is special.</Text>
- *    <Text>It even has several paragraphs 🤯</Text>
- *  </Stack>
- * </WizardPopover>
+ * <WizardNudge
+ *  content={["First step", "Second step"]}
+ *  name="my-wizard-nudge"
+ *  introducedDate="2024-02-19"
+ * >
+ *   <Card width="fit-content" padding={2}>
+ *    My new feature
+ *  </Card>
+ * </WizardNudge>
  * ```
  */
-declare const WizardPopover: ({ children, triggerElement, withCloseButton, }: WizardPopoverProps) => React.JSX.Element;
+declare const WizardNudge: ({ children, name, onClose, content, ...props }: WizardNudgeProps) => React.JSX.Element;
 
 type ProgressIndicatorProps = {
     numberOfSteps: number;
@@ -1908,7 +1936,7 @@ type ProgressIndicatorProps = {
  * />
  * ```
  */
-declare const ProgressIndicator: ({ numberOfSteps, activeStep, }: ProgressIndicatorProps) => React__default.JSX.Element;
+declare const ProgressIndicator: ({ numberOfSteps, activeStep, }: ProgressIndicatorProps) => React.JSX.Element;
 
 type SporProviderProps = ChakraProviderProps & {
     language?: Language;
@@ -1950,7 +1978,7 @@ type SporProviderProps = ChakraProviderProps & {
  * );
  * ```
  */
-declare const SporProvider: ({ theme, language, brand, children, ...props }: SporProviderProps) => React__default.JSX.Element;
+declare const SporProvider: ({ theme, language, brand, children, ...props }: SporProviderProps) => React.JSX.Element;
 
 type StepperProps = {
     /** Callback for when a step is clicked */
@@ -1998,15 +2026,15 @@ type StepperProps = {
  * />
  * ```
  **/
-declare const Stepper: ({ onClick, onBackButtonClick, steps, activeStep: activeStepAsStringOrNumber, title, heading, headingLevel, variant, isDisabled, }: StepperProps) => React__default.JSX.Element;
+declare const Stepper: ({ onClick, onBackButtonClick, steps, activeStep: activeStepAsStringOrNumber, title, heading, headingLevel, variant, isDisabled, }: StepperProps) => React.JSX.Element;
 
 type StepperStepProps = {
-    children: React__default.ReactNode;
+    children: React.ReactNode;
     stepNumber: number;
     variant: "base" | "accent";
     isDisabled?: boolean;
 };
-declare const StepperStep: ({ children, stepNumber, variant, isDisabled: isDisabledOverride, }: StepperStepProps) => React__default.JSX.Element;
+declare const StepperStep: ({ children, stepNumber, variant, isDisabled: isDisabledOverride, }: StepperStepProps) => React.JSX.Element;
 
 type TabsProps = Exclude<TabsProps$1, "colorScheme" | "variant" | "orientation" | "size"> & {
     colorScheme: "base" | "accent";
@@ -2109,6 +2137,10 @@ declare const theme: {
                         outlineStyle: string;
                         outlineOffset: string;
                     };
+                    textAlign: string;
+                    fontFamily: string;
+                    fontWeight: string;
+                    color: string;
                     transitionProperty: string;
                     transitionDuration: string;
                     border: string;
@@ -2116,10 +2148,6 @@ declare const theme: {
                     borderColor: string;
                     display: string;
                     justifyContent: string;
-                    color: string;
-                    textAlign: string;
-                    fontFamily: string;
-                    fontWeight: string;
                 };
                 panel: {
                     paddingY: number;
@@ -2168,7 +2196,7 @@ declare const theme: {
                 };
             } | undefined;
             variants?: {
-                list: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     button: {
                         boxShadow: string;
                         _hover: {
@@ -2179,7 +2207,7 @@ declare const theme: {
                         };
                     };
                 };
-                outline: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
                         boxShadow: string;
                     };
@@ -2191,34 +2219,34 @@ declare const theme: {
                             boxShadow: string;
                         };
                         _active: {
-                            backgroundColor: string;
                             boxShadow: string;
+                            backgroundColor: string;
                         };
                     };
                 };
-                card: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
-                        backgroundColor: string;
                         boxShadow: string;
+                        backgroundColor: string;
                     };
                     button: {
                         _expanded: {
                             borderBottomRadius: string;
                         };
                         _hover: {
-                            backgroundColor: string;
                             boxShadow: string;
+                            backgroundColor: string;
                         };
                         _active: {
-                            backgroundColor: string;
                             boxShadow: string;
+                            backgroundColor: string;
                         };
                     };
                 };
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | undefined;
-                variant?: "outline" | "list" | "card" | undefined;
+                variant?: "base" | "ghost" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("button" | "container" | "icon" | "root" | "panel")[];
@@ -2421,7 +2449,6 @@ declare const theme: {
                     minHeight: number;
                     minWidth: number;
                     fontSize: string;
-                    paddingX: number;
                     fontWeight: string;
                 };
             } | undefined;
@@ -2489,7 +2516,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | "xs" | undefined;
-                variant?: "primary" | "secondary" | "tertiary" | "ghost" | "floating" | undefined;
+                variant?: "ghost" | "floating" | "primary" | "secondary" | "tertiary" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };
@@ -2753,7 +2780,7 @@ declare const theme: {
                 variant?: "base" | "ghost" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("card" | "trigger")[];
+            parts: ("trigger" | "card")[];
         };
         Checkbox: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -2849,36 +2876,54 @@ declare const theme: {
         ChoiceChip: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 container: {
-                    backgroundColor: string;
-                    boxShadow: string;
-                    color: string;
                     display: string;
                     alignItems: string;
                     fontSize: string;
                     px: number;
+                    cursor: string;
                     _checked: {
-                        color: string;
-                        background: string;
+                        _hover: {
+                            boxShadow: string;
+                            color: string;
+                            backgroundColor: string;
+                        };
+                        _active: {
+                            boxShadow: string;
+                            backgroundColor: string;
+                            color: string;
+                        };
                         boxShadow: string;
+                        backgroundColor: string;
+                        color: string;
                     };
-                    "input:focus-visible + &": {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    };
-                    "@media (hover:hover)": {
+                    _disabled: {
                         _hover: {
                             color: string;
                             boxShadow: string;
-                            background: string;
+                            backgroundColor: string;
+                        };
+                        _checked: {
+                            _hover: {
+                                color: string;
+                                boxShadow: string;
+                                backgroundColor: string;
+                            };
+                            backgroundColor: string;
+                            color: string;
                             cursor: string;
+                            boxShadow: string;
                         };
-                    };
-                    _active: {
                         backgroundColor: string;
+                        color: string;
+                        cursor: string;
                         boxShadow: string;
                     };
+                    "input:focus-visible + &": {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    };
                 };
                 icon: {
                     mr: number;
@@ -2888,6 +2933,9 @@ declare const theme: {
                 sm: {
                     container: {
                         borderRadius: string;
+                        _checked: {
+                            borderRadius: string;
+                        };
                         height: string;
                         px: number;
                     };
@@ -2895,6 +2943,9 @@ declare const theme: {
                 md: {
                     container: {
                         borderRadius: string;
+                        _checked: {
+                            borderRadius: string;
+                        };
                         height: string;
                         px: number;
                     };
@@ -2902,6 +2953,9 @@ declare const theme: {
                 lg: {
                     container: {
                         borderRadius: string;
+                        _checked: {
+                            borderRadius: string;
+                        };
                         height: string;
                         px: number;
                     };
@@ -2909,19 +2963,78 @@ declare const theme: {
                 xl: {
                     container: {
                         borderRadius: string;
+                        _checked: {
+                            borderRadius: string;
+                        };
                         height: string;
                         px: number;
                     };
                 };
             } | undefined;
             variants?: {
-                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("label" | "container" | "icon")[];
-                }>;
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    container: {
+                        "@media (hover:hover)": {
+                            _hover: {
+                                backgroundColor: string;
+                                boxShadow: string;
+                                color: string;
+                            };
+                        };
+                        _active: {
+                            boxShadow: string;
+                            backgroundColor: string;
+                        };
+                        color: string;
+                        boxShadow: string;
+                        backgroundColor: string;
+                    };
+                };
+                accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    container: {
+                        "@media (hover:hover)": {
+                            _hover: {
+                                color: string;
+                                boxShadow: 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: {
+                        _hover: {
+                            color: string;
+                            boxShadow: string;
+                            backgroundColor: string;
+                        };
+                        _active: {
+                            color: string;
+                            boxShadow: string;
+                            backgroundColor: string;
+                        };
+                        boxShadow: string;
+                        color: string;
+                        backgroundColor: string;
+                    };
+                };
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | "xl" | undefined;
-                variant?: string | number | undefined;
+                variant?: "base" | "floating" | "accent" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("label" | "container" | "icon")[];
@@ -3044,7 +3157,6 @@ declare const theme: {
                         outlineOffset: string;
                     };
                     backgroundColor: string;
-                    boxShadow: string;
                     width: number;
                     display: string;
                     alignItems: string;
@@ -4456,7 +4568,7 @@ declare const theme: {
                     };
                     borderRadius: string;
                     top: number;
-                    insetEnd: number;
+                    right: number;
                     width: number;
                     height: number;
                     padding: number;
@@ -4468,7 +4580,6 @@ declare const theme: {
                     };
                     position: string;
                     color: string;
-                    hover: string;
                 };
             }) | undefined;
             sizes?: {
@@ -7385,7 +7496,7 @@ declare const brandTheme: {
 };
 
 type BaseToastProps = {
-    children: React__default.ReactNode;
+    children: React.ReactNode;
     variant: "success" | "info" | "error";
     id?: string;
 };
@@ -7445,7 +7556,7 @@ type BadgeProps = Omit<BadgeProps$1, "variant" | "colorScheme" | "size"> & {
      *
      * Make sure you pass in the 18px version of the icon.
      */
-    icon?: React__default.ReactElement;
+    icon?: React.ReactElement;
 };
 /**
  * Shows some additional information about the component it's used within.
@@ -7512,7 +7623,7 @@ type HeadingProps = Omit<HeadingProps$1, "textStyle" | "as"> & {
  * <Heading as="h1" autoId>Page heading</Heading> // Will set id="page-heading"
  * ```
  */
-declare const Heading: ({ as, variant, autoId, id: externalId, ...props }: HeadingProps) => React__default.JSX.Element;
+declare const Heading: ({ as, variant, autoId, id: externalId, ...props }: HeadingProps) => React.JSX.Element;
 
 type TextProps = Omit<TextProps$1, "textStyle"> & {
     /** The size and style of the text.
@@ -7540,4 +7651,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
  **/
 declare function slugify(text: string | string[], maxLength?: number): string;
 
-export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, NumericStepper, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, PopoverWizardProps, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, SimplePopover, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardPopover, WizardPopoverProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };
+export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };