@vygruppen/spor-react 12.24.15 → 13.0.0

package/dist/index.d.cts

@@ -1,9 +1,9 @@
 import * as React$1 from 'react';
-import React__default, { ReactNode, PropsWithChildren, ComponentProps } from 'react';
+import React__default, { PropsWithChildren, ReactNode, ComponentProps, Ref } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, ButtonProps as ButtonProps$1, RecipeVariantProps, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, SystemStyleObject, RadioCard as RadioCard$1, SeparatorProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Combobox as Combobox$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, CheckboxCardRootProps, Fieldset as Fieldset$1, Input as Input$1, ListRootProps, NativeSelect as NativeSelect$1, NativeSelectFieldProps, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, SelectLabelProps, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, Tabs as Tabs$1, TabsRootProps, Table as Table$1, TableBodyProps as TableBodyProps$1, TableColumnHeaderProps as TableColumnHeaderProps$1, TableRootProps, Tooltip as Tooltip$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { AccordionRootProps, RecipeVariantProps, Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, BreadcrumbRootProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, SystemStyleObject, RadioCard as RadioCard$1, SeparatorProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Box, ComboboxRootProps, ComboboxItemProps, Combobox as Combobox$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCardRootProps, Fieldset as Fieldset$1, Input as Input$1, ListRootProps, MenuRootProps, MenuCheckboxItemProps, MenuContentProps, MenuItemProps as MenuItemProps$1, MenuItemGroupProps as MenuItemGroupProps$1, MenuRadioItemProps, MenuRadioItemGroupProps, MenuSeparatorProps, MenuTriggerItemProps as MenuTriggerItemProps$1, NativeSelectFieldProps, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, SelectLabelProps, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, TableBodyProps as TableBodyProps$1, TableColumnHeaderProps as TableColumnHeaderProps$1, Tooltip as Tooltip$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { AspectRatio, Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, ClientOnly, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Icon, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, SystemConfig, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnGroup, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, Wrap, createIcon, createListCollection, createSystem, defineConfig, defineRecipe, defineSlotRecipe, defineStyle, mergeConfigs, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useRecipe, useSlotRecipe, useToken } from '@chakra-ui/react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconComponent } from '@vygruppen/spor-icon-react';
 import { CalendarDate, DateDuration, DateValue as DateValue$1 } from '@internationalized/date';
 export { Time } from '@internationalized/date';
@@ -17,10 +17,111 @@ export { useIsClient, useMap, useOnClickOutside } from 'usehooks-ts';
 import * as sporDesignTokens from '@vygruppen/spor-design-tokens';
 export { sporDesignTokens as tokens };
 
+declare const accordionSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "itemTrigger" | "item" | "itemBody" | "itemContent" | "itemIndicator", {
+    variant: {
+        ghost: {
+            item: {
+                outline: "none";
+            };
+            itemTrigger: {
+                "&:hover": {
+                    background: "ghost.surface.hover";
+                };
+                "&:active": {
+                    backgroundColor: "ghost.surface.active";
+                };
+            };
+        };
+        core: {
+            item: {
+                outline: "solid";
+                outlineWidth: string;
+                outlineColor: "core.outline";
+            };
+            itemTrigger: {
+                _expanded: {
+                    borderBottomRadius: "none";
+                };
+                "&:hover": {
+                    outlineWidth: string;
+                    outlineColor: "core.outline";
+                    outline: "2px solid";
+                    outlineOffset: number;
+                };
+                "&:active": {
+                    backgroundColor: "core.surface.active";
+                    outlineWidth: string;
+                    outline: "none";
+                };
+            };
+        };
+        underlined: {
+            root: {
+                borderRadius: "none";
+            };
+            item: {
+                borderRadius: "none";
+                borderBottom: "1px solid";
+                borderBottomColor: "floating.outline.active";
+            };
+        };
+        floating: {
+            item: {
+                outline: "1px solid";
+                outlineWidth: string;
+                boxShadow: "sm";
+                outlineColor: "floating.outline";
+            };
+            itemTrigger: {
+                _expanded: {
+                    borderBottomRadius: "none";
+                };
+                "&:hover": {
+                    outlineWidth: string;
+                    outline: "1px solid";
+                    outlineColor: "floating.outline.hover";
+                    outlineOffset: number;
+                };
+                "&:active": {
+                    backgroundColor: "floating.surface.active";
+                    outlineWidth: string;
+                    outline: "none";
+                };
+            };
+        };
+    };
+}>;
+
+type AccordionVariantProps = RecipeVariantProps<typeof accordionSlotRecipe>;
+type AccordionProps = Exclude<AccordionRootProps, "variant" | "size" | "orientation" | "href"> & AccordionVariantProps & PropsWithChildren & {
+    /**
+     * The display variant of the accordion items.
+     *
+     * - `core` renders a pretty unstyled expandable list without any borders
+     * - `base` renders an outlined version
+     * - `floating` renders a version with a drop shadow
+     */
+    variant?: "ghost" | "core" | "floating" | "underlined";
+    gap?: string | number;
+    href?: string;
+};
 type HeadingLevel = {
     /** Heading level of the trigger button */
     headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
 };
+type AccordionItemTriggerProps = Omit<Accordion$1.ItemTriggerProps, "indicatorElement"> & HeadingLevel & {
+    /** Icon to be displayed on the left of the trigger button. Use 24px outline. */
+    startElement?: React.ReactNode;
+    showChevron?: boolean;
+    /** URL to navigate to when the trigger is clicked (makes it a link instead of expandable) */
+    href?: string;
+};
+type AccordionItemContentProps = Accordion$1.ItemContentProps & {
+    children?: React.ReactNode;
+};
+type ExpandableProps = Omit<AccordionProps & AccordionItemTriggerProps, "title"> & HeadingLevel & {
+    title: ReactNode;
+};
 type ExpandableItemProps = HeadingLevel & {
     value: string;
     title: ReactNode;
@@ -28,23 +129,15 @@ type ExpandableItemProps = HeadingLevel & {
     startElement?: React.ReactNode;
 };
 
-declare const Accordion: React$1.ForwardRefExoticComponent<Accordion$1.RootProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"ghost" | "core" | "underlined" | "floating" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
-    variant?: "ghost" | "core" | "floating" | "underlined";
-    gap?: string | number;
-    href?: string;
-} & React$1.RefAttributes<HTMLDivElement>>;
-declare const AccordionItemTrigger: React$1.ForwardRefExoticComponent<Omit<Accordion$1.ItemTriggerProps, "indicatorElement"> & HeadingLevel & {
-    startElement?: React.ReactNode;
-    showChevron?: boolean;
-    href?: string;
-} & React$1.RefAttributes<HTMLButtonElement>>;
-declare const AccordionItemContent: React$1.ForwardRefExoticComponent<Accordion$1.ItemContentProps & {
-    children?: React.ReactNode;
-} & React$1.RefAttributes<HTMLDivElement>>;
+declare const Accordion: ({ ref, ...props }: AccordionProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const AccordionItemTrigger: ({ ref, ...props }: AccordionItemTriggerProps & {
+    ref?: React.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const AccordionItemContent: ({ ref, ...props }: AccordionItemContentProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 declare const AccordionItem: React$1.ForwardRefExoticComponent<Accordion$1.ItemProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -59,21 +152,9 @@ declare const AccordionItem: React$1.ForwardRefExoticComponent<Accordion$1.ItemP
  * </Expandable>
  * ```
  */
-declare const Expandable: React$1.ForwardRefExoticComponent<Omit<_chakra_ui_react.AccordionRootProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"ghost" | "core" | "underlined" | "floating" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
-    variant?: "ghost" | "core" | "floating" | "underlined";
-    gap?: string | number;
-    href?: string;
-} & Omit<_chakra_ui_react.AccordionItemTriggerProps, "indicatorElement"> & HeadingLevel & {
-    startElement?: React.ReactNode;
-    showChevron?: boolean;
-    href?: string;
-}, "title"> & HeadingLevel & {
-    title: React$1.ReactNode;
-} & React$1.RefAttributes<HTMLDivElement>>;
+declare const Expandable: ({ ref, ...props }: ExpandableProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 /**
  * An item in a set of Expandables. Must be wrapped in an `<Accordion>` component.
  *
@@ -124,32 +205,132 @@ type AlertProps = Omit<Alert$1.RootProps, "colorPalette"> & {
  *
  * @see Docs https://spor.vy.no/alert
  */
-declare const Alert: React$1.ForwardRefExoticComponent<Omit<Alert$1.RootProps, "colorPalette"> & {
-    /** Whether or not to show the alert icon */
-    showIndicator?: boolean;
-    /** Whether or not the alert is closable */
-    icon?: IconComponent;
-    closable?: boolean;
-    /** Callback for when the alert is closed */
-    onAlertClose?: () => void;
-} & React$1.RefAttributes<HTMLDivElement>>;
+declare const Alert: ({ ref, ...props }: AlertProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element | null;
 
-/**
- * An expandable alert component.
- *
- * A regular alert with an expandable body. The expandable body can be used to provide more information about the alert.
- *
- * ```tsx
- * <ExpandableAlert variant="alt-transport" title="Replacement bus service">
- *   The replacement bus service will be running from 10:00 to 16:00.
- * </ExpandableAlert>
- * ```
- */
-declare const ExpandableAlert: React$1.ForwardRefExoticComponent<{
-    variant?: ConditionalValue<"alt" | "error" | "important" | "success" | "info" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & Omit<Accordion$1.RootProps, "size" | "variant" | "orientation" | "value"> & {
+declare const alertExpandableSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "itemTrigger" | "itemContent" | "itemIndicator" | "indicator" | "title", {
+    variant: {
+        important: {
+            itemContent: {
+                color: "alert.important.text.secondary";
+            };
+            itemTrigger: {
+                "&:hover": {
+                    bg: "alert.important.surface.hover";
+                    outline: "1px solid";
+                    outlineColor: "alert.important.outline.hover";
+                    outlineOffset: "0px";
+                };
+                "&:active": {
+                    bg: "alert.important.surface.active";
+                };
+            };
+            root: {
+                borderColor: "alert.important.outline";
+                bg: "alert.important.surface";
+            };
+            title: {
+                color: "alert.important.text";
+            };
+        };
+        success: {
+            itemContent: {
+                color: "alert.success.text.secondary";
+            };
+            itemTrigger: {
+                "&:hover": {
+                    bg: "alert.success.surface.hover";
+                    outline: "1px solid";
+                    outlineOffset: "0px";
+                    outlineColor: "alert.success.outline.hover";
+                    "&:active": {
+                        bg: "alert.success.surface.active";
+                    };
+                };
+            };
+            root: {
+                borderColor: "alert.success.outline";
+                bg: "alert.success.surface";
+            };
+            title: {
+                color: "alert.success.text";
+            };
+        };
+        alt: {
+            itemContent: {
+                color: "alert.alt.text.secondary";
+            };
+            itemTrigger: {
+                "&:hover": {
+                    bg: "alert.alt.surface.hover";
+                    outlineOffset: "0px";
+                    outline: "1px solid";
+                    outlineColor: "alert.alt.outline.hover";
+                    "&:active": {
+                        bg: "alert.alt.surface.active";
+                    };
+                };
+            };
+            root: {
+                borderColor: "alert.alt.outline";
+                bg: "alert.alt.surface";
+            };
+            title: {
+                color: "alert.alt.text";
+            };
+        };
+        info: {
+            itemContent: {
+                color: "alert.info.text.secondary";
+            };
+            itemTrigger: {
+                "&:hover": {
+                    bg: "alert.info.surface.hover";
+                    outlineOffset: "0px";
+                    outline: "1px solid";
+                    outlineColor: "alert.info.outline.hover";
+                    "&:active": {
+                        bg: "alert.info.surface.active";
+                    };
+                };
+            };
+            root: {
+                borderColor: "alert.info.outline";
+                bg: "alert.info.surface";
+            };
+            title: {
+                color: "alert.info.text";
+            };
+        };
+        error: {
+            itemContent: {
+                color: "alert.error.text.secondary";
+            };
+            itemTrigger: {
+                "&:hover": {
+                    bg: "alert.error.surface.hover";
+                    outlineOffset: "0px";
+                    outline: "1px solid";
+                    outlineColor: "alert.error.outline.hover";
+                    "&:active": {
+                        bg: "alert.error.surface.active";
+                    };
+                };
+            };
+            root: {
+                borderColor: "alert.error.outline";
+                bg: "alert.error.surface";
+            };
+            title: {
+                color: "alert.error.text";
+            };
+        };
+    };
+}>;
+
+type ExpandableAlertVariantProps = RecipeVariantProps<typeof alertExpandableSlotRecipe>;
+type ExpandableAlertProps = PropsWithChildren<ExpandableAlertVariantProps> & Omit<Accordion$1.RootProps, "variant" | "orientation" | "size" | "value"> & {
     /** The title string  */
     title: string;
     /** Whether or not the default state of the expandable alert is open */
@@ -172,22 +353,26 @@ declare const ExpandableAlert: React$1.ForwardRefExoticComponent<{
       | "global-deviation";
    */
     variant?: ConditionalValue<"important" | "success" | "alt" | "info" | "error" | undefined>;
-} & React$1.RefAttributes<HTMLDivElement>>;
-
+};
 /**
- * A service alert component.
+ * An expandable alert component.
  *
- * A regular alert with an expandable body, used to show service messages. The expandable body can be used to provide more information about the alert(s).
+ * A regular alert with an expandable body. The expandable body can be used to provide more information about the alert.
  *
  * ```tsx
- * <ServiceAlert title="Error with Vipps" notification={1} contentWidth="container.md">
- *   <Text>Some customers are experiencing issues logging in with Vipps. Vipps is working to resolve the issue. Try logging in with email instead.</Text>
- * </ServiceAlert>
+ * <ExpandableAlert variant="alt-transport" title="Replacement bus service">
+ *   The replacement bus service will be running from 10:00 to 16:00.
+ * </ExpandableAlert>
  * ```
  */
-declare const ServiceAlert: React$1.ForwardRefExoticComponent<Omit<AlertProps, "variant"> & {
-    children?: React$1.ReactNode | undefined;
-} & Omit<Accordion$1.RootProps, "size" | "variant" | "orientation" | "value"> & {
+declare const ExpandableAlert: ({ ref, ...props }: ExpandableAlertProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const alertServiceSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "itemTrigger" | "itemBody" | "itemContent" | "itemTriggerTitle" | "notificationText", _chakra_ui_react.SlotRecipeVariantRecord<"root" | "itemTrigger" | "itemBody" | "itemContent" | "itemTriggerTitle" | "notificationText">>;
+
+type ServiceAlertVariantProps = RecipeVariantProps<typeof alertServiceSlotRecipe>;
+type ServiceAlertProps = Omit<AlertProps, "variant"> & PropsWithChildren<ServiceAlertVariantProps> & Omit<Accordion$1.RootProps, "variant" | "orientation" | "size" | "value"> & {
     /** The title string  */
     title: string;
     /** The number of notifications when there is a list of multiple alerts */
@@ -205,7 +390,21 @@ declare const ServiceAlert: React$1.ForwardRefExoticComponent<Omit<AlertProps, "
     headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
     /** The variant of Service Alert. Default: service */
     variant?: "service" | "global-deviation";
-} & React$1.RefAttributes<HTMLDivElement>>;
+};
+/**
+ * A service alert component.
+ *
+ * A regular alert with an expandable body, used to show service messages. The expandable body can be used to provide more information about the alert(s).
+ *
+ * ```tsx
+ * <ServiceAlert title="Error with Vipps" notification={1} contentWidth="container.md">
+ *   <Text>Some customers are experiencing issues logging in with Vipps. Vipps is working to resolve the issue. Try logging in with email instead.</Text>
+ * </ServiceAlert>
+ * ```
+ */
+declare const ServiceAlert: ({ ref, ...props }: ServiceAlertProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 /**
  * A breadcrumb component.
@@ -221,7 +420,9 @@ declare const ServiceAlert: React$1.ForwardRefExoticComponent<Omit<AlertProps, "
  * </Breadcrumb>
  * ```
  */
-declare const Breadcrumb: React__default.ForwardRefExoticComponent<Breadcrumb$1.RootProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const Breadcrumb: ({ ref, children, css, ...props }: BreadcrumbRootProps & {
+    ref?: React__default.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const buttonRecipe: _chakra_ui_react.RecipeDefinition<{
     variant: {
@@ -332,21 +533,9 @@ type ButtonProps = Exclude<ButtonProps$1, "size" | "variant" | "colorPalette"> &
     download?: string;
     href?: string;
 };
-declare const Button: React__default.ForwardRefExoticComponent<ButtonProps$1 & {
-    variant?: _chakra_ui_react.ConditionalValue<"ghost" | "floating" | "primary" | "secondary" | "tertiary" | undefined>;
-    size?: _chakra_ui_react.ConditionalValue<"sm" | "md" | "lg" | "xs" | undefined>;
-} & {
-    children?: React__default.ReactNode | undefined;
-} & {
-    loading?: boolean;
-    loadingText?: React__default.ReactNode;
-    leftIcon?: React__default.ReactNode;
-    rightIcon?: React__default.ReactNode;
-    variant?: ButtonProps$1["variant"];
-    size?: ButtonProps$1["size"];
-    download?: string;
-    href?: string;
-} & React__default.RefAttributes<HTMLButtonElement>>;
+declare const Button: ({ ref, loading, disabled, loadingText, variant, size, leftIcon, rightIcon, type, children, ...rest }: ButtonProps & {
+    ref?: React__default.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const groupRecipe: _chakra_ui_react.RecipeDefinition<{
     disabled: {
@@ -394,27 +583,14 @@ type ButtonGroupProps = GroupProps & PropsWithChildren<GroupVariantProps>;
  *  <Button variant="secondary">Save</Button>
  * </ButtonGroup>
  */
-declare const ButtonGroup: React$1.ForwardRefExoticComponent<GroupProps & {
-    disabled?: _chakra_ui_react.ConditionalValue<boolean | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & React$1.RefAttributes<HTMLDivElement>>;
-
-declare const ClipboardButton: React$1.ForwardRefExoticComponent<_chakra_ui_react.ButtonProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"ghost" | "floating" | "primary" | "secondary" | "tertiary" | undefined>;
-    size?: _chakra_ui_react.ConditionalValue<"sm" | "md" | "lg" | "xs" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
-    loading?: boolean;
-    loadingText?: React$1.ReactNode;
-    leftIcon?: React$1.ReactNode;
-    rightIcon?: React$1.ReactNode;
-    variant?: _chakra_ui_react.ButtonProps["variant"];
-    size?: _chakra_ui_react.ButtonProps["size"];
-    download?: string;
-    href?: string;
-} & React$1.RefAttributes<HTMLButtonElement>>;
+declare const ButtonGroup: ({ ref, ...props }: ButtonGroupProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+
+type ClipboardButtonProps = ButtonProps;
+declare const ClipboardButton: ({ ref, ...props }: ClipboardButtonProps & {
+    ref?: React$1.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
 declare const Clipboard: React$1.ForwardRefExoticComponent<Clipboard$1.RootProps & React$1.RefAttributes<HTMLDivElement>>;
 
 type IconButtonProps = Exclude<IconButtonProps$1, "variant" | "spinner" | "icon"> & PropsWithChildren<ButtonVariantProps> & {
@@ -462,22 +638,9 @@ type IconButtonProps = Exclude<IconButtonProps$1, "variant" | "spinner" | "icon"
  * />
  * ```
  */
-declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps$1 & {
-    variant?: _chakra_ui_react.ConditionalValue<"ghost" | "floating" | "primary" | "secondary" | "tertiary" | undefined>;
-    size?: _chakra_ui_react.ConditionalValue<"sm" | "md" | "lg" | "xs" | undefined>;
-} & {
-    children?: React__default.ReactNode | undefined;
-} & {
-    /** The button variant.
-     *
-     */
-    variant: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
-    spinner?: React__default.JSX.Element;
-    icon?: React__default.JSX.Element;
-    loading?: boolean;
-    download?: string;
-    href?: string;
-} & React__default.RefAttributes<HTMLButtonElement>>;
+declare const IconButton: ({ ref, ...props }: IconButtonProps & {
+    ref?: React__default.RefObject<HTMLButtonElement | null>;
+}) => react_jsx_runtime.JSX.Element;
 
 type CloseButtonProps = Omit<IconButtonProps, "variant" | "aria-label"> & {
     /** Defaults to a localized version of "close" */
@@ -492,11 +655,92 @@ type CloseButtonProps = Omit<IconButtonProps, "variant" | "aria-label"> & {
  * <CloseButton onClick={closeModal} />
  * ```
  */
-declare const CloseButton: React$1.ForwardRefExoticComponent<Omit<IconButtonProps, "variant" | "aria-label"> & {
-    /** Defaults to a localized version of "close" */
-    "aria-label"?: string;
-} & React$1.RefAttributes<HTMLButtonElement>>;
+declare const CloseButton: ({ ref, size, ...props }: CloseButtonProps & {
+    ref?: React.RefObject<HTMLButtonElement | null>;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const floatingActionButtonSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" | "root" | "text", {
+    variant: {
+        brand: {
+            root: {
+                backgroundColor: "brand.surface";
+                color: "brand.text";
+                _hover: {
+                    backgroundColor: "brand.surface.hover";
+                    _active: {
+                        backgroundColor: "brand.surface.active";
+                    };
+                };
+            };
+        };
+        core: {
+            root: {
+                backgroundColor: "transparent";
+                outline: "1px solid";
+                outlineColor: "core.outline";
+                color: "core.text";
+                _hover: {
+                    backgroundColor: "transparent";
+                    outline: "2px solid";
+                    outlineColor: "core.outline";
+                    _active: {
+                        outline: "1px solid";
+                        outlineColor: "core.outline";
+                        backgroundColor: "core.surface.active";
+                    };
+                };
+            };
+        };
+        accent: {
+            root: {
+                backgroundColor: "accent.surface";
+                color: "accent.text";
+                _hover: {
+                    backgroundColor: "accent.surface.hover";
+                    color: "accent.text";
+                    _active: {
+                        backgroundColor: "accent.surface.active";
+                    };
+                };
+            };
+        };
+    };
+    placement: {
+        "top left": {
+            root: {
+                top: "1rem";
+                left: "1rem";
+            };
+        };
+        "top right": {
+            root: {
+                top: "1rem";
+                right: "1rem";
+            };
+        };
+        "bottom left": {
+            root: {
+                bottom: "1rem";
+                left: "1rem";
+            };
+        };
+        "bottom right": {
+            root: {
+                bottom: "1rem";
+                right: "1rem";
+            };
+        };
+    };
+}>;
 
+type FloatingActionButtonVariantProps = RecipeVariantProps<typeof floatingActionButtonSlotRecipe>;
+type FloatingActionButtonProps = BoxProps & PropsWithChildren<FloatingActionButtonVariantProps> & {
+    variant?: "accent" | "core" | "brand";
+    placement?: "bottom right" | "bottom left" | "top right" | "top left";
+    icon: React__default.ReactNode;
+    children: React__default.ReactNode;
+    isTextVisible?: boolean;
+};
 /**
  * Creates a floating action button.
  *
@@ -509,20 +753,11 @@ declare const CloseButton: React$1.ForwardRefExoticComponent<Omit<IconButtonProp
  *  placement="bottom right"
  * />
  */
-declare const FloatingActionButton: React__default.ForwardRefExoticComponent<BoxProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"core" | "brand" | "accent" | undefined>;
-    placement?: _chakra_ui_react.ConditionalValue<"top left" | "top right" | "bottom left" | "bottom right" | undefined>;
-} & {
-    children?: React__default.ReactNode | undefined;
-} & {
-    variant?: "accent" | "core" | "brand";
-    placement?: "bottom right" | "bottom left" | "top right" | "top left";
-    icon: React__default.ReactNode;
-    children: React__default.ReactNode;
-    isTextVisible?: boolean;
-} & React__default.RefAttributes<HTMLButtonElement>>;
+declare const FloatingActionButton: ({ ref, children, icon, variant, isTextVisible: externalIsTextVisible, placement, ...props }: FloatingActionButtonProps & {
+    ref?: React__default.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
 
-type Props$4 = {
+type Props$5 = {
     /**
      * Show two months side by side
      */
@@ -533,13 +768,13 @@ type Props$4 = {
  * Calendar component that displays a grid of days for a specific month.
  * Standard view with pagination, with the option to show dual months side by side.
  */
-declare function Calendar({ dualView, css }: Props$4): react_jsx_runtime.JSX.Element;
+declare function Calendar({ dualView, css }: Props$5): react_jsx_runtime.JSX.Element;
 
-type Props$3 = {
+type Props$4 = {
     date: CalendarDate;
     currentMonth: CalendarDate;
 };
-declare function CalendarCell({ date, currentMonth }: Props$3): react_jsx_runtime.JSX.Element;
+declare function CalendarCell({ date, currentMonth }: Props$4): react_jsx_runtime.JSX.Element;
 
 type CalendarValue = [CalendarDate | null, CalendarDate | null];
 type CalendarMode = "single" | "range";
@@ -550,7 +785,7 @@ type BaseCalendarState = {
     prevButtonProps: AriaButtonProps<"button">;
     startValue: CalendarDate | null;
     isSelectingRange: boolean;
-    ref: React.RefObject<HTMLDivElement>;
+    ref?: React.RefObject<HTMLDivElement | null>;
 };
 type SingleCalendarState = BaseCalendarState & {
     mode: "single";
@@ -563,7 +798,7 @@ type RangeCalendarState = BaseCalendarState & {
     endValue: CalendarDate | null;
 };
 declare function useCalendar(): CalendarState;
-type Props$2 = {
+type Props$3 = {
     children?: React.ReactNode;
     /**
      * The selection mode of the calendar. Can be "single" or "range".
@@ -594,39 +829,201 @@ type Props$2 = {
 /**
  * Provides context for calendar components. Must be used as a wrapper around the Calendar.
  */
-declare function CalendarProvider(props: Props$2): react_jsx_runtime.JSX.Element;
+declare function CalendarProvider(props: Props$3): react_jsx_runtime.JSX.Element;
 
-type Props$1 = {
+type Props$2 = {
     offset?: DateDuration;
 };
-declare function CalendarGrid({ offset }: Props$1): react_jsx_runtime.JSX.Element;
+declare function CalendarGrid({ offset }: Props$2): react_jsx_runtime.JSX.Element;
 
-type Props = {
+type Props$1 = {
     dualView?: boolean;
 };
-declare function CalendarHeader({ dualView }: Props): react_jsx_runtime.JSX.Element;
+declare function CalendarHeader({ dualView }: Props$1): react_jsx_runtime.JSX.Element;
+
+declare const pressableCardRecipe: _chakra_ui_react.RecipeDefinition<{
+    variant: {
+        floating: {
+            boxShadow: "0px 1px 3px 0px var(--shadow-color)";
+            shadowColor: "surface.disabled";
+            border: "sm";
+            borderColor: "floating.outline";
+            backgroundColor: "floating.surface";
+            _hover: {
+                boxShadow: "0px 2px 6px 0px var(--shadow-color)";
+                backgroundColor: "floating.surface.hover";
+                borderColor: "floating.outline.hover";
+                _active: {
+                    boxShadow: "none";
+                    backgroundColor: "floating.surface.active";
+                    borderColor: "floating.outline.active";
+                };
+            };
+        };
+        core: {
+            outlineColor: "core.outline";
+            outlineWidth: string;
+            outlineStyle: "solid";
+            _hover: {
+                outlineColor: "core.outline.hover";
+                outlineWidth: string;
+                outlineStyle: "solid";
+                _active: {
+                    backgroundColor: "core.surface.active";
+                    outlineWidth: string;
+                };
+            };
+        };
+        accent: {
+            boxShadow: "0px 1px 3px 0px var(--shadow-color)";
+            shadowColor: "surface.disabled";
+            background: "alert.success.surface";
+            _hover: {
+                background: "alert.success.surface.hover";
+                boxShadow: "0px 2px 6px 0px var(--shadow-color)";
+                _active: {
+                    background: "alert.success.surface.active";
+                    boxShadow: "none";
+                };
+            };
+        };
+    };
+}>;
 
-declare const PressableCard: React$1.ForwardRefExoticComponent<{
-    variant?: _chakra_ui_react.ConditionalValue<"core" | "floating" | "accent" | undefined>;
-} & ButtonProps$1 & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * `PressableCard` is a component that renders a pressable card.
+ *
+ * The `PressableCard` component can be used to create a card that responds to user interactions.
+ * It can be rendered as a button, link, label, or any other HTML element by specifying the `as` prop.
+ * If no `as` prop is provided, it defaults to a button.
+ *
+ * The `variant` prop can be used to control the style variant of the card. It defaults to "core".
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * <PressableCard>
+ *   Content
+ * </PressableCard>
+ * ```
+ *
+ * To render the card as a different HTML element, specify the `as` prop:
+ *
+ * ```tsx
+ * <PressableCard as="a">
+ *   This is now a <a /> element
+ * </PressableCard>
+ * ```
+ *
+ * For a static card with other color palette, use the `StaticCard` component.
+ *
+ * @see StaticCard
+ */
+type PressableCardProps = RecipeVariantProps<typeof pressableCardRecipe> & ButtonProps$1;
+declare const PressableCard: ({ ref, ...props }: PressableCardProps & {
+    ref?: React.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const radioCardSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "itemContent" | "label" | "itemText" | "itemDescription", {
+    variant: {
+        core: {
+            item: {
+                outlineColor: "core.outline";
+                outlineWidth: string;
+                outlineStyle: "solid";
+                _hover: {
+                    outlineColor: "core.outline.hover";
+                    outlineWidth: string;
+                    outlineStyle: "solid";
+                    _active: {
+                        backgroundColor: "core.surface.active";
+                        outlineWidth: string;
+                    };
+                };
+                _checked: {
+                    outlineColor: "outline.focus";
+                    outlineWidth: string;
+                    outlineStyle: "solid";
+                    backgroundColor: "core.surface.active";
+                    _focusVisible: {
+                        outlineStyle: "double";
+                        outlineWidth: `calc(3 * ${string})`;
+                    };
+                };
+            };
+        };
+        floating: {
+            item: {
+                boxShadow: "0px 1px 3px 0px var(--shadow-color)";
+                shadowColor: "surface.disabled";
+                border: "sm";
+                borderColor: "floating.outline";
+                background: "floating.surface";
+                _hover: {
+                    background: "floating.surface.hover";
+                    borderColor: "floating.outline.hover";
+                    boxShadow: "0px 2px 6px 0px var(--shadow-color)";
+                    _active: {
+                        background: "floating.surface.active";
+                        borderColor: "floating.outline.active";
+                        boxShadow: "none";
+                    };
+                };
+                _checked: {
+                    outlineColor: "outline.focus";
+                    outlineWidth: string;
+                    outlineStyle: "solid";
+                    backgroundColor: "core.surface.active";
+                    _focusVisible: {
+                        outlineStyle: "double";
+                        outlineWidth: `calc(3 * ${string})`;
+                    };
+                };
+            };
+        };
+    };
+}>;
 
-declare const RadioCard: React__default.ForwardRefExoticComponent<RadioCard$1.ItemProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"core" | "floating" | undefined>;
-} & {
+/**
+ * Radio cards are used to present a set of options where only one option can be selected.
+ *
+ * @example
+ * ```tsx
+ * <RadioCardGroup defaultValue="economy">
+ *   <RadioCardLabel>Choose your class</RadioCardLabel>
+ *   <Stack direction="row">
+ *      <RadioCard value="economy" label="Economy" />
+ *      <RadioCard value="business" label="Business" />
+ *      <RadioCard value="first-class" label="First Class" />
+ *   </Stack>
+ * </RadioCardGroup>
+ * ```
+ *
+ *
+ * @see Docs https://spor.vy.no/components/radiocard
+ */
+type RadioCardVariantProps = RecipeVariantProps<typeof radioCardSlotRecipe>;
+type RadioCardItemProps = Exclude<RadioCard$1.ItemProps, "colorPalette" | "indicator" | "variant" | "size" | "addon"> & RadioCardVariantProps & {
     inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
     ariaLabel?: string;
-} & React__default.RefAttributes<HTMLInputElement>>;
-declare const RadioCardGroup: React__default.ForwardRefExoticComponent<{
-    variant?: _chakra_ui_react.ConditionalValue<"core" | "floating" | undefined>;
-} & RadioCard$1.RootProps & {
+};
+declare const RadioCard: ({ ref, ...props }: RadioCardItemProps & {
+    ref?: React__default.RefObject<HTMLInputElement>;
+}) => react_jsx_runtime.JSX.Element;
+type RadioCardRootProps = RadioCardVariantProps & Exclude<RadioCard$1.RootProps, "variant"> & {
     children: React__default.ReactNode;
     gap?: string | number;
     direction?: "row" | "column";
     display?: string;
-} & React__default.RefAttributes<HTMLDivElement>>;
+};
+declare const RadioCardGroup: ({ ref, ...props }: RadioCardRootProps & {
+    ref?: React__default.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 declare const RadioCardLabel: React__default.ForwardRefExoticComponent<RadioCard$1.LabelProps & React__default.RefAttributes<HTMLDivElement>>;
 
-declare const Separator: React$1.ForwardRefExoticComponent<SeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const Separator: ({ ref, ...props }: SeparatorProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const staticCardRecipe: _chakra_ui_react.RecipeDefinition<{
     colorPalette: {
@@ -695,9 +1092,9 @@ declare const staticCardRecipe: _chakra_ui_react.RecipeDefinition<{
  * @see PressableCard
  */
 type StaticCardProps = RecipeVariantProps<typeof staticCardRecipe> & BoxProps;
-declare const StaticCard: React$1.ForwardRefExoticComponent<{
-    colorPalette?: _chakra_ui_react.ConditionalValue<"white" | "blue" | "green" | "grey" | "orange" | "red" | "yellow" | "darkYellow" | undefined>;
-} & BoxProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const StaticCard: ({ ref, ...props }: StaticCardProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 /**
  * A calendar component that displays multiple months in a scrollable view.
@@ -716,7 +1113,9 @@ declare function useColorMode(): UseColorModeReturn;
 declare function useColorModeValue<T>(light: T, dark: T): T;
 declare function ColorModeIcon(): react_jsx_runtime.JSX.Element;
 type ColorModeButtonProps = Omit<IconButtonProps$1, "aria-label">;
-declare const ColorModeButton: React$1.ForwardRefExoticComponent<ColorModeButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const ColorModeButton: ({ ref, ...props }: ColorModeButtonProps & {
+    ref?: React$1.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const fieldSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "label" | "requiredIndicator" | "helperText" | "errorText", _chakra_ui_react.SlotRecipeVariantRecord<"root" | "label" | "requiredIndicator" | "helperText" | "errorText">>;
 
@@ -751,10 +1150,12 @@ type FieldProps = Omit<Field$1.RootProps, "label" | "onChange" | "onBlur"> & Rea
  *
  * This component is not exported and should be used as a wrapper for other input components.
  */
-declare const Field: React$1.ForwardRefExoticComponent<Omit<Field$1.RootProps, "label" | "onBlur" | "onChange"> & {
-    children?: React$1.ReactNode | undefined;
-} & FieldBaseProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const FieldErrorText: React$1.ForwardRefExoticComponent<Field$1.ErrorTextProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const Field: ({ ref, ...props }: FieldProps & {
+    ref?: React$1.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const FieldErrorText: ({ ref, ...props }: Field$1.ErrorTextProps & {
+    ref?: React$1.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 declare const FieldLabel: React$1.ForwardRefExoticComponent<Field$1.LabelProps & React$1.RefAttributes<HTMLLabelElement>>;
 
 declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell" | "arrow" | "wrapper" | "calendarTriggerButton" | "calendarPopover" | "calendar" | "weekdays" | "weekend" | "dateCell" | "inputLabel" | "dateTimeSegment" | "box" | "rangeCalendarPopover", {
@@ -845,20 +1246,7 @@ type CalendarVariants = {
 };
 
 type DatePickerVariantProps = RecipeVariantProps<typeof datePickerSlotRecipe>;
-/**
- * A date picker component.
- *
- * There are three different variants –`core`, `floating` and `ghost`.
- *
- * ```tsx
- * <DatePicker label="Dato" variant="core" />
- * ```
- */
-declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<AriaDatePickerProps<DateValue>, "onChange"> & Pick<BoxProps, "minHeight" | "width"> & {
-    variant?: _chakra_ui_react.ConditionalValue<"ghost" | "core" | "floating" | undefined>;
-} & {
-    children?: React__default.ReactNode | undefined;
-} & CalendarVariants & {
+type DatePickerProps = Omit<AriaDatePickerProps<DateValue>, "onChange"> & Pick<BoxProps, "minHeight" | "width"> & PropsWithChildren<DatePickerVariantProps> & CalendarVariants & {
     name?: string;
     showYearNavigation?: boolean;
     withPortal?: boolean;
@@ -870,7 +1258,19 @@ declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<AriaDate
     onClick?: () => void;
 } & FieldBaseProps & {
     css?: SystemStyleObject;
-} & React__default.RefAttributes<HTMLDivElement>>;
+};
+/**
+ * A date picker component.
+ *
+ * There are three different variants –`core`, `floating` and `ghost`.
+ *
+ * ```tsx
+ * <DatePicker label="Dato" variant="core" />
+ * ```
+ */
+declare const DatePicker: ({ ref: externalRef, variant, errorText, minHeight, showYearNavigation, withPortal, width, invalid, helperText, positioning, css, ...props }: DatePickerProps & {
+    ref?: React__default.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue>, "onChange" | "errorMessage" | "isInvalid" | "isRequired"> & Pick<BoxProps, "minHeight"> & PropsWithChildren<DatePickerVariantProps> & CalendarVariants & {
     startLabel?: string;
@@ -958,8 +1358,12 @@ interface DialogContentProps extends Dialog.ContentProps {
     backdrop?: boolean;
     children?: React$1.ReactNode;
 }
-declare const DialogContent: React$1.ForwardRefExoticComponent<DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const DialogCloseTrigger: React$1.ForwardRefExoticComponent<Dialog.CloseTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogContent: ({ ref, ...props }: DialogContentProps & {
+    ref?: React$1.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const DialogCloseTrigger: ({ ref, ...props }: Dialog.CloseTriggerProps & {
+    ref?: React$1.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
 declare const DialogRoot: React$1.FC<Dialog.RootProps>;
 declare const DialogFooter: React$1.ForwardRefExoticComponent<Dialog.FooterProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: React$1.ForwardRefExoticComponent<Dialog.HeaderProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -1091,30 +1495,36 @@ declare const drawerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"title" |
 }>;
 
 type DrawerVariantProps = RecipeVariantProps<typeof drawerSlotRecipe>;
-type DrawerProps = Omit<Drawer$1.RootProps, "colorPalette" | "contained" | "unstyled"> & Drawer$1.RootProps & PropsWithChildren<DrawerVariantProps> & {
-    children: React.ReactNode;
-};
-
-declare const DrawerContent: React$1.ForwardRefExoticComponent<Drawer$1.ContentProps & {
-    size?: _chakra_ui_react.ConditionalValue<"sm" | "md" | "lg" | "xl" | "xs" | "full" | undefined>;
-    placement?: _chakra_ui_react.ConditionalValue<"bottom" | "top" | "end" | "start" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
+type DrawerContentProps = Drawer$1.ContentProps & PropsWithChildren<DrawerVariantProps> & {
     children: React.ReactNode;
     portalled?: boolean;
     portalRef?: React.RefObject<HTMLElement>;
     hideHandle?: boolean;
-} & React$1.RefAttributes<HTMLDivElement>>;
-declare const CloseDrawerLine: React$1.ForwardRefExoticComponent<React$1.RefAttributes<HTMLButtonElement>>;
-declare const DrawerCloseTrigger: React$1.ForwardRefExoticComponent<Drawer$1.CloseTriggerProps & {
-    showText?: boolean;
-} & React$1.RefAttributes<HTMLButtonElement>>;
-declare const DrawerBackTrigger: React$1.ForwardRefExoticComponent<Drawer$1.CloseTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const DrawerFullScreenHeader: React$1.ForwardRefExoticComponent<Omit<Drawer$1.HeaderProps, "title"> & {
+};
+type DrawerProps = Omit<Drawer$1.RootProps, "colorPalette" | "contained" | "unstyled"> & Drawer$1.RootProps & PropsWithChildren<DrawerVariantProps> & {
+    children: React.ReactNode;
+};
+type DrawerFullScreenHeaderProps = Omit<Drawer$1.HeaderProps, "title"> & {
     backTrigger?: boolean;
     closeTrigger?: boolean;
-} & React$1.RefAttributes<HTMLDivElement>>;
+};
+type DrawerCloseTriggerProps = Drawer$1.CloseTriggerProps & {
+    showText?: boolean;
+};
+
+declare const DrawerContent: ({ ref, ...props }: DrawerContentProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const CloseDrawerLine: ({ ref, ...props }: React.ComponentProps<typeof Box>) => react_jsx_runtime.JSX.Element;
+declare const DrawerCloseTrigger: ({ ref, ...props }: DrawerCloseTriggerProps & {
+    ref?: React.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const DrawerBackTrigger: ({ ref, ...props }: Drawer$1.CloseTriggerProps & {
+    ref?: React.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const DrawerFullScreenHeader: ({ ref, ...props }: DrawerFullScreenHeaderProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 declare const Drawer: (props: DrawerProps) => react_jsx_runtime.JSX.Element;
 declare const DrawerTrigger: React$1.ForwardRefExoticComponent<Drawer$1.TriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const DrawerFooter: React$1.ForwardRefExoticComponent<Drawer$1.FooterProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -1275,9 +1685,11 @@ type AttachedInputsProps = RecipeVariantProps<typeof attachedInputsRecipe> & Gro
     onFlip: () => void;
     flipAriaLabel: string;
 });
-declare const AttachedInputs: React$1.ForwardRefExoticComponent<AttachedInputsProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const AttachedInputs: ({ ref, ...props }: AttachedInputsProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
-declare const Autocomplete: React__default.ForwardRefExoticComponent<{
+type Props = {
     variant?: "core" | "floating";
     label: React__default.ReactNode;
     leftIcon?: React__default.ReactNode;
@@ -1285,17 +1697,17 @@ declare const Autocomplete: React__default.ForwardRefExoticComponent<{
     loading?: boolean;
     emptyLabel?: React__default.ReactNode;
     openOnFocus?: boolean;
-} & Omit<Combobox$1.RootProps<any>, "collection"> & Omit<_chakra_ui_react.FieldRootProps, "label" | "onBlur" | "onChange"> & {
-    children?: React__default.ReactNode | undefined;
-} & FieldBaseProps & React__default.RefAttributes<HTMLInputElement>>;
+    ref?: React__default.RefObject<HTMLInputElement | null>;
+} & Omit<ComboboxRootProps, "collection"> & FieldProps;
+declare function Autocomplete({ variant, children, css, label, leftIcon, onInputValueChange, invalid, helperText, errorText, required, filteredExternally, loading, disabled, emptyLabel, onFocus, openOnClick, openOnFocus, ref, ...rest }: Props): react_jsx_runtime.JSX.Element;
 declare const AutocompleteItemGroup: React__default.ForwardRefExoticComponent<Combobox$1.ItemGroupProps & React__default.RefAttributes<HTMLDivElement>>;
 declare const AutocompleteItemGroupLabel: React__default.ForwardRefExoticComponent<_chakra_ui_react.ComboboxItemGroupLabelProps & React__default.RefAttributes<HTMLDivElement>>;
-declare const AutocompleteItem: React__default.ForwardRefExoticComponent<Combobox$1.ItemProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const AutocompleteItem: ({ children, ...props }: ComboboxItemProps) => react_jsx_runtime.JSX.Element;
 
 declare const CardSelect: ({ size, ...props }: PopoverRootProps) => react_jsx_runtime.JSX.Element;
-declare const CardSelectContent: React$1.ForwardRefExoticComponent<{
-    colorPalette?: _chakra_ui_react.ConditionalValue<"white" | "blue" | "green" | "grey" | "orange" | "red" | "yellow" | "darkYellow" | undefined>;
-} & _chakra_ui_react.BoxProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardSelectContent: ({ ref, children, ...props }: StaticCardProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 type CardSelectTriggerProps = {
     /** The design of the trigger button.
      *
@@ -1309,20 +1721,17 @@ type CardSelectTriggerProps = {
     /** Whether or not to show the chevron. Defaults to true */
     withChevron?: boolean;
 } & Omit<ButtonProps, "variant" | "rightIcon" | "leftIcon">;
-declare const CardSelectTrigger: React$1.ForwardRefExoticComponent<{
-    /** The design of the trigger button.
-     *
-     * - `ghost` is a transparent button with text
-     * - `core` is a button with a border and text
-     * - `floating` is a button with a drop shadow (like a card) and text
-     */
-    variant?: "core" | "ghost" | "floating";
-    /** An optional trigger button icon, rendered to the left of the label */
-    icon?: ReactNode;
-    /** Whether or not to show the chevron. Defaults to true */
-    withChevron?: boolean;
-} & Omit<ButtonProps, "variant" | "leftIcon" | "rightIcon"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const CardSelectTrigger: ({ ref, icon, variant, withChevron, size, children, ...props }: CardSelectTriggerProps & {
+    ref?: React.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
 
+declare const checkboxSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "indicator" | "content" | "description" | "label" | "control" | "addon", _chakra_ui_react.SlotRecipeVariantRecord<"root" | "indicator" | "content" | "description" | "label" | "control" | "addon">>;
+
+type CheckboxVariantProps = RecipeVariantProps<typeof checkboxSlotRecipe>;
+type CheckboxProps = Omit<Checkbox$1.RootProps, "onChange"> & PropsWithChildren<CheckboxVariantProps> & {
+    inputProps?: React$1.InputHTMLAttributes<HTMLInputElement>;
+    rootRef?: React$1.Ref<HTMLLabelElement>;
+};
 /**
  * Creates a checkbox.
  *
@@ -1336,12 +1745,9 @@ declare const CardSelectTrigger: React$1.ForwardRefExoticComponent<{
  *
  * You can group several of these together with a `CheckboxGroup`.
  */
-declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<Checkbox$1.RootProps, "onChange"> & {
-    children?: React$1.ReactNode | undefined;
-} & {
-    inputProps?: React$1.InputHTMLAttributes<HTMLInputElement>;
-    rootRef?: React$1.Ref<HTMLLabelElement>;
-} & React$1.RefAttributes<HTMLInputElement>>;
+declare const Checkbox: ({ ref, ...props }: CheckboxProps & {
+    ref?: React$1.RefObject<HTMLInputElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 type CheckboxGroupProps = React__default.ComponentProps<typeof CheckboxGroup$1> & {
     direction?: "row" | "column";
@@ -1367,10 +1773,7 @@ type CheckboxGroupProps = React__default.ComponentProps<typeof CheckboxGroup$1>
  * </CheckboxGroup>
  * ```
  */
-declare const CheckboxGroup: {
-    (props: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
+declare const CheckboxGroup: (props: CheckboxGroupProps) => react_jsx_runtime.JSX.Element;
 
 type CheckBoxIcon = {
     default: React__default.ReactNode;
@@ -1412,11 +1815,9 @@ type ChoiceChipProps = Omit<CheckboxCardRootProps, "onCheckedChange" | "checked"
  * </Stack>
  * ```
  */
-declare const ChoiceChip: React__default.ForwardRefExoticComponent<Omit<CheckboxCard.RootProps, "checked" | "onCheckedChange"> & {
-    icon?: CheckBoxIcon;
-    onCheckedChange?: (checked: boolean) => void;
-    checked?: boolean;
-} & React__default.RefAttributes<HTMLInputElement>>;
+declare const ChoiceChip: ({ ref, children, icon, onCheckedChange, ...rootProps }: ChoiceChipProps & {
+    ref?: React__default.RefObject<HTMLInputElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 type ComboboxProps<T> = Exclude<InputProps, "variant" | "colorPalette" | "size"> & AriaComboBoxProps<T> & {
     /** The label of the combobox */
@@ -1456,10 +1857,7 @@ type ComboboxProps<T> = Exclude<InputProps, "variant" | "colorPalette" | "size">
  * </Combobox>
  * ```
  */
-declare const Combobox: {
-    (props: ComboboxProps<object>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
+declare const Combobox: (props: ComboboxProps<object>) => react_jsx_runtime.JSX.Element;
 
 declare const Fieldset: React$1.ForwardRefExoticComponent<Fieldset$1.RootProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 declare const FieldsetLegend: React$1.ForwardRefExoticComponent<Fieldset$1.LegendProps & React$1.RefAttributes<HTMLLegendElement>>;
@@ -1507,7 +1905,9 @@ type InputProps = FieldProps & Exclude<ChakraInputProps, "size" | "label" | "col
  *
  * @see https://spor.vy.no/components/input
  */
-declare const Input: React__default.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
+declare const Input: ({ ref, startElement, endElement, label, invalid, helperText, errorText, required, hidden, fontSize, labelAsChild, ...props }: InputProps & {
+    ref?: React__default.RefObject<HTMLInputElement | null>;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const listBoxSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "description" | "label", {
     variant: {
@@ -1575,10 +1975,7 @@ type ListBoxProps<T> = AriaListBoxProps<T> & Omit<BoxProps, "filter" | "autoFocu
  * );
  * ```
  */
-declare const ListBox: {
-    (props: ListBoxProps<object>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
+declare const ListBox: (props: ListBoxProps<object>) => react_jsx_runtime.JSX.Element;
 /**
  * Renders a label for a listbox item.
  *
@@ -1596,6 +1993,70 @@ declare function ItemDescription({ children }: {
     children: React__default.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
+type Variant$2 = Pick<MenuRootProps, "variant">;
+declare const useMenuContext: () => Variant$2;
+/**
+ * Menu component.
+ *
+ * Used to create an accessible dropdown menu.
+ *
+ * @example
+ * ```tsx
+  <Menu>
+    <MenuTrigger> Menu </MenuTrigger>
+    <MenuContent>
+      <MenuItem value="1"> Item 1  </MenuItem>
+      <MenuItem value="2"> Item 2 </MenuItem>
+      <MenuItem value="3"> Item 3 </MenuItem>
+    </MenuContent>
+  </Menu>
+ * ```
+ *
+ */
+declare const Menu: ({ children, ...props }: MenuRootProps) => react_jsx_runtime.JSX.Element;
+declare const MenuContent: ({ children, ref, ...props }: MenuContentProps & {
+    ref?: Ref<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+type MenuTriggerProps = {
+    icon?: ReactNode;
+} & Omit<ButtonProps, "variant" | "rightIcon" | "leftIcon"> & {
+    ref?: Ref<HTMLButtonElement>;
+};
+declare const MenuTrigger: ({ icon, size, children, ref, ...props }: MenuTriggerProps) => react_jsx_runtime.JSX.Element;
+type MenuItemProps = {
+    itemCommand?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+} & MenuItemProps$1 & {
+    ref?: Ref<HTMLDivElement>;
+};
+declare const MenuItem: ({ itemCommand, children, value, leftIcon, rightIcon, ref, ...props }: MenuItemProps) => react_jsx_runtime.JSX.Element;
+type MenuTriggerItemProps = {
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+} & MenuTriggerItemProps$1 & {
+    ref?: Ref<HTMLDivElement>;
+};
+declare const MenuTriggerItem: ({ children, leftIcon, rightIcon, ref, ...props }: MenuTriggerItemProps) => react_jsx_runtime.JSX.Element;
+declare const MenuRadioItemGroup: ({ children, ref, ...props }: MenuRadioItemGroupProps & {
+    ref?: Ref<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const MenuRadioItem: ({ children, ref, ...props }: MenuRadioItemProps & {
+    ref?: Ref<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+type MenuItemGroupProps = {
+    label?: string;
+} & MenuItemGroupProps$1 & {
+    ref?: Ref<HTMLDivElement>;
+};
+declare const MenuItemGroup: ({ children, label, ref, ...props }: MenuItemGroupProps) => react_jsx_runtime.JSX.Element;
+declare const MenuCheckboxItem: ({ children, closeOnSelect, ref, ...props }: MenuCheckboxItemProps & {
+    ref?: Ref<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const MenuSeparator: ({ ref, ...props }: MenuSeparatorProps & {
+    ref?: Ref<HTMLHRElement>;
+}) => react_jsx_runtime.JSX.Element;
+
 declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" | "root" | "field", {
     variant: {
         core: {
@@ -1662,13 +2123,9 @@ type NativeSelectdProps = React$1.PropsWithChildren<NativeSelectVariantProps> &
  * </NativeSelect>
  *
  */
-declare const NativeSelect: React$1.ForwardRefExoticComponent<{
-    variant?: _chakra_ui_react.ConditionalValue<"core" | "floating" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & FieldBaseProps & NativeSelect$1.FieldProps & {
-    icon?: React$1.ReactNode;
-} & React$1.RefAttributes<HTMLDivElement>>;
+declare const NativeSelect: ({ ref, ...props }: NativeSelectdProps & {
+    ref?: React$1.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const numericStepperRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "container" | "input" | "text" | "button", {
     withStepLabel: {
@@ -1731,34 +2188,9 @@ type NumericStepperProps = FieldBaseProps & NumericStepperVariants & {
  * ```
  * @see https://spor.vy.no/components/numeric-stepper
  */
-declare const NumericStepper: React__default.ForwardRefExoticComponent<FieldBaseProps & {
-    withStepLabel?: _chakra_ui_react.ConditionalValue<boolean | undefined>;
-} & {
-    children?: React__default.ReactNode;
-    /** The name of the input field */
-    name?: string;
-    /** The current value */
-    value?: number;
-    /** A default value, if uncontrolled */
-    defaultValue?: number;
-    /** Callback for when the value changes */
-    onValueChange?: (value: number) => void;
-    /** Optional minimum value. Defaults to 0 */
-    minValue?: number;
-    /** Optional maximum value. Defaults to 99 */
-    maxValue?: number;
-    /** Whether the stepper is disabled or not */
-    disabled?: boolean;
-    /** Whether to show input field or not */
-    withInput?: boolean;
-    /** The amount to increase/decrease when pressing +/- */
-    stepSize?: number;
-    /** Name added to the aria-label of subtract and add buttons. */
-    ariaLabelContext?: {
-        singular: string;
-        plural: string;
-    };
-} & Omit<BoxProps, "onChange"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const NumericStepper: ({ ref, ...props }: NumericStepperProps & {
+    ref?: React__default.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 interface PasswordVisibilityProps {
     /** Default visibility state */
@@ -1792,7 +2224,9 @@ interface PasswordInputProps extends InputProps, PasswordVisibilityProps {
  *
  * @see https://spor.vy.no/components/password-input
  */
-declare const PasswordInput: React__default.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
+declare const PasswordInput: ({ ref, ...props }: PasswordInputProps & {
+    ref?: React__default.RefObject<HTMLInputElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 type CountryCodeAndPhoneNumber = {
     countryCode: string;
@@ -1828,7 +2262,9 @@ type PhoneNumberInputProps = Omit<InputProps, "value"> & {
  * />
  * ```
  */
-declare const PhoneNumberInput: React$1.ForwardRefExoticComponent<Omit<PhoneNumberInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const PhoneNumberInput: ({ ref, ...props }: PhoneNumberInputProps & {
+    ref?: React.RefObject<HTMLInputElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const radioGroupSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "label" | "itemText" | "itemControl", {
     orientation: {
@@ -1859,15 +2295,13 @@ type RadioProps = PropsWithChildren<RadioVariants> & RadioGroup$1.ItemProps & {
  *   <Radio value="first-class">First Class</Radio>
  * </RadioGroup>
  */
-declare const Radio: React__default.ForwardRefExoticComponent<{
-    orientation?: _chakra_ui_react.ConditionalValue<"vertical" | undefined>;
-} & {
-    children?: React__default.ReactNode | undefined;
-} & RadioGroup$1.ItemProps & {
-    rootRef?: React__default.Ref<HTMLDivElement>;
-    inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
-} & React__default.RefAttributes<HTMLInputElement>>;
-declare const RadioGroup: React__default.ForwardRefExoticComponent<Omit<RadioGroup$1.RootProps, "colorPalette" | "size" | "variant"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const Radio: ({ ref, ...props }: RadioProps & {
+    ref?: React__default.RefObject<HTMLInputElement>;
+}) => react_jsx_runtime.JSX.Element;
+type RadioGroupProps = Omit<RadioGroup$1.RootProps, "colorPalette" | "variant" | "size"> & {};
+declare const RadioGroup: ({ ref, ...props }: RadioGroupProps & {
+    ref?: React__default.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 type SearchInputProps = InputProps & {
     /** Callback for when the clear button is clicked */
@@ -1877,7 +2311,9 @@ type SearchInputProps = InputProps & {
  *
  * Includes a search icon, a localized label and a reset button.
  */
-declare const SearchInput: React$1.ForwardRefExoticComponent<Omit<SearchInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const SearchInput: ({ ref, ...props }: SearchInputProps & {
+    ref?: React.RefObject<HTMLInputElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 type SelectProps = SelectRootProps & FieldProps & {
     label?: string;
@@ -1910,34 +2346,47 @@ type SelectProps = SelectRootProps & FieldProps & {
  * @see https://spor.vy.no/components/select
  *
  */
-declare const Select: React$1.ForwardRefExoticComponent<SelectRootProps<any> & Omit<_chakra_ui_react.FieldRootProps, "label" | "onBlur" | "onChange"> & {
-    children?: React$1.ReactNode | undefined;
-} & FieldBaseProps & {
-    label?: string;
-} & React$1.RefAttributes<HTMLDivElement>>;
+declare const Select: ({ ref, ...props }: SelectProps & {
+    ref?: React$1.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 declare const SelectLabel: (props: SelectLabelProps) => react_jsx_runtime.JSX.Element;
-declare const SelectItem: React$1.ForwardRefExoticComponent<Select$1.ItemProps & {
+type SelectItemProps = Select$1.ItemProps & {
     children: React$1.ReactNode;
     description?: React$1.ReactNode;
-} & React$1.RefAttributes<HTMLDivElement>>;
-declare const SelectItemGroup: React$1.ForwardRefExoticComponent<Select$1.ItemGroupProps & {
+};
+declare const SelectItem: ({ ref, ...props }: SelectItemProps & {
+    ref?: React$1.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+type SelectItemGroupProps = Select$1.ItemGroupProps & {
     label: React$1.ReactNode;
     children: React$1.ReactNode;
-} & React$1.RefAttributes<HTMLDivElement>>;
-declare const SelectTrigger: React$1.ForwardRefExoticComponent<Select$1.ControlProps & {
+};
+declare const SelectItemGroup: ({ ref, ...props }: SelectItemGroupProps & {
+    ref?: React$1.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+type SelectTriggerProps = Select$1.ControlProps & {
     clearable?: boolean;
     children?: React$1.ReactNode;
-} & React$1.RefAttributes<HTMLButtonElement>>;
-declare const SelectContent: React$1.ForwardRefExoticComponent<Select$1.ContentProps & {
+};
+declare const SelectTrigger: ({ ref, ...props }: SelectTriggerProps & {
+    ref?: React$1.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
+type SelectContentProps = Select$1.ContentProps & {
     portalled?: boolean;
     portalRef?: React$1.RefObject<HTMLElement>;
     baseStyle?: SystemStyleObject;
-} & React$1.RefAttributes<HTMLDivElement>>;
-declare const SelectValueText: React$1.ForwardRefExoticComponent<Omit<Select$1.ValueTextProps, "children"> & {
+};
+declare const SelectContent: ({ ref, ...props }: SelectContentProps & {
+    ref?: React$1.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+type SelectValueTextProps = Omit<Select$1.ValueTextProps, "children"> & {
     children?(items: CollectionItem[]): React$1.ReactNode;
     placeholder?: string;
     withPlaceholder?: boolean;
-} & React$1.RefAttributes<HTMLSpanElement>>;
+};
+declare const SelectValueText: ({ ref, ...props }: SelectValueTextProps & {
+    ref?: React$1.RefObject<HTMLSpanElement>;
+}) => react_jsx_runtime.JSX.Element;
 declare const SelectItemText: React$1.ForwardRefExoticComponent<Select$1.ItemTextProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectRoot: Select$1.RootComponent;
 
@@ -2006,25 +2455,9 @@ type SwitchProps = Exclude<Switch$1.RootProps, "size" | "colorPalette"> & FieldB
  *
  * ```
  */
-declare const Switch: React__default.ForwardRefExoticComponent<Switch$1.RootProps & FieldBaseProps & {
-    size?: ConditionalValue<"sm" | "md" | "lg" | undefined>;
-} & {
-    children?: React__default.ReactNode | undefined;
-} & {
-    inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
-    rootRef?: React__default.Ref<HTMLLabelElement>;
-    trackLabel?: {
-        on: React__default.ReactNode;
-        off: React__default.ReactNode;
-    };
-    thumbLabel?: {
-        on: React__default.ReactNode;
-        off: React__default.ReactNode;
-    };
-    size?: ConditionalValue<"sm" | "md" | "lg">;
-    label?: React__default.ReactNode;
-    onCheckedChange?: (checked: boolean) => void;
-} & React__default.RefAttributes<HTMLInputElement>>;
+declare const Switch: ({ ref, ...props }: SwitchProps & {
+    ref?: React__default.RefObject<HTMLInputElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const textareaRecipe: _chakra_ui_react.RecipeDefinition<{
     variant: {
@@ -2072,13 +2505,9 @@ type TextareaVariants = RecipeVariantProps<typeof textareaRecipe>;
 type TextareaProps = Exclude<TextareaProps$1, "size" | "colorPalette"> & FieldProps & PropsWithChildren<TextareaVariants> & {
     label: ReactNode;
 };
-declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps$1 & Omit<_chakra_ui_react.FieldRootProps, "label" | "onBlur" | "onChange"> & {
-    children?: ReactNode | undefined;
-} & FieldBaseProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"core" | "floating" | undefined>;
-} & {
-    label: ReactNode;
-} & React__default.RefAttributes<HTMLTextAreaElement>>;
+declare const Textarea: ({ ref, ...props }: TextareaProps & {
+    ref?: React__default.RefObject<HTMLTextAreaElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const infoTagSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" | "title" | "description" | "iconContainer" | "container" | "textContainer" | "walk", {
     variant: {
@@ -2330,7 +2759,9 @@ type LineIconProps = Exclude<BoxProps, "variant"> & VariantProps & PropsWithChil
  *
  * @see https://spor.vy.no/components/line-tags
  */
-declare const LineIcon: React$1.ForwardRefExoticComponent<LineIconProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const LineIcon: ({ ref, variant, size, foregroundColor, disabled, style, target, label, ...rest }: LineIconProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const travelTagSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" | "title" | "description" | "iconContainer" | "container" | "textContainer" | "deviationIcon", {
     deviationLevel: {
@@ -2480,7 +2911,9 @@ type TravelTagProps = TagProps & BoxProps & PropsWithChildren<TravelTagVariantPr
      */
     customIconVariant?: string;
 };
-declare const TravelTag: React$1.ForwardRefExoticComponent<TravelTagProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const TravelTag: ({ ref, variant, size, deviationLevel, title, description, disabled, foregroundColor, backgroundColor, customIconVariant, ...rest }: TravelTagProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 type LinkProps = LinkProps$1 & {
     /** Defaults to primary */
@@ -2488,12 +2921,9 @@ type LinkProps = LinkProps$1 & {
     /** Define if the link shows an icon on the right that indicate it is an external link */
     external?: boolean;
 };
-declare const TextLink: React__default.ForwardRefExoticComponent<LinkProps$1 & {
-    /** Defaults to primary */
-    variant?: "primary" | "secondary";
-    /** Define if the link shows an icon on the right that indicate it is an external link */
-    external?: boolean;
-} & React__default.RefAttributes<HTMLAnchorElement>>;
+declare const TextLink: ({ ref, children, external, href, ...props }: LinkProps & {
+    ref?: React__default.RefObject<HTMLAnchorElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 /**
  * Use this component to display a list of items.
@@ -2663,36 +3093,9 @@ type ProgressBarProps = BoxProps & UseProgressProps & PropsWithChildren<Progress
  * <ProgressBar value={50} aria-label="Loading..." />
  * ```
  */
-declare const ProgressBar: React__default.ForwardRefExoticComponent<BoxProps & UseProgressProps & {
-    children?: React__default.ReactNode | undefined;
-} & {
-    children?: React__default.ReactNode;
-    /** The height of the progress bar.
-     * Defaults to .5rem
-     **/
-    height?: BoxProps["height"];
-    /** The width of the progress bar.
-     *
-     * Defaults to the width of its container
-     **/
-    width?: BoxProps["width"];
-    /** Pass if no label is passed to the label */
-    "aria-label"?: string;
-    /** Optional text shown below the loader.
-     *
-     * If you pass an array of strings, the text will rotate every 5 seconds. If you want to change the delay, pass the delay in milliseconds to the `labelRotationDelay` prop.
-     */
-    label?: string | string[];
-    /** The number of milliseconds a label is shown, if an array of strings is passed to the `label` prop.
-     *
-     * Defaults to 5000 (5 seconds).
-     */
-    labelRotationDelay?: number;
-    /** Pass to disable the color of the component */
-    isActive?: boolean;
-    /** Pass to show the value text */
-    showValueText?: boolean;
-} & React__default.RefAttributes<HTMLDivElement>>;
+declare const ProgressBar: ({ ref, value, label, labelRotationDelay, isActive, showValueText, height, css, ...rest }: ProgressBarProps & {
+    ref?: React__default.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const progressLoaderRecipe: _chakra_ui_react.RecipeDefinition<_chakra_ui_react.RecipeVariantRecord>;
 
@@ -2748,30 +3151,9 @@ type ProgressLoaderProps = BoxProps & {
  * <ProgressLoader value={50} aria-label="Fetching your trips..." />
  * ```
  */
-declare const ProgressLoader: React__default.ForwardRefExoticComponent<BoxProps & {
-    children: React__default.ReactNode;
-    /** The percentage of progress made.
-     *
-     * The value must be between 0 and 100 */
-    value: number;
-    /** The width of the progress bar.
-     *
-     * Defaults to the width of its container
-     **/
-    width?: BoxProps["width"];
-    /** Pass if no label is passed to the label */
-    "aria-label": string;
-    /** Optional text shown below the loader.
-     *
-     * If you pass an array of strings, the text will rotate every 5 seconds. If you want to change the delay, pass the delay in milliseconds to the `labelRotationDelay` prop.
-     */
-    label: string | string[];
-    /** The number of milliseconds a label is shown, if an array of strings is passed to the `label` prop.
-     *
-     * Defaults to 5000 (5 seconds).
-     */
-    labelRotationDelay?: number;
-} & React__default.RefAttributes<HTMLDivElement>>;
+declare const ProgressLoader: ({ ref, value, label, labelRotationDelay, "aria-label": ariaLabel, width, ...rest }: ProgressLoaderProps & {
+    ref?: React__default.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const skeletonRecipe: _chakra_ui_react.RecipeDefinition<{
     loading: {
@@ -2828,28 +3210,19 @@ type SkeletonVariantProps = RecipeVariantProps<typeof skeletonRecipe>;
 type SkeletonCircleProps = SkeletonProps$1 & SkeletonVariantProps & {
     size?: CircleProps["size"];
 };
-declare const SkeletonCircle: React$1.ForwardRefExoticComponent<SkeletonProps$1 & {
-    loading?: _chakra_ui_react.ConditionalValue<boolean | undefined>;
-    variant?: _chakra_ui_react.ConditionalValue<"none" | "pulse" | "shine" | undefined>;
-} & {
-    size?: CircleProps["size"];
-} & React$1.RefAttributes<HTMLDivElement>>;
+declare const SkeletonCircle: ({ ref, ...props }: SkeletonCircleProps & {
+    ref?: React$1.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 type SkeletonTextProps = SkeletonProps$1 & SkeletonVariantProps & {
     noOfLines?: number;
 };
-declare const SkeletonText: React$1.ForwardRefExoticComponent<SkeletonProps$1 & {
-    loading?: _chakra_ui_react.ConditionalValue<boolean | undefined>;
-    variant?: _chakra_ui_react.ConditionalValue<"none" | "pulse" | "shine" | undefined>;
-} & {
-    noOfLines?: number;
-} & React$1.RefAttributes<HTMLDivElement>>;
+declare const SkeletonText: (props: SkeletonTextProps & {
+    ref?: React$1.Ref<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 type SkeletonProps = SkeletonProps$1 & SkeletonVariantProps;
-declare const Skeleton: React$1.ForwardRefExoticComponent<SkeletonProps$1 & {
-    loading?: _chakra_ui_react.ConditionalValue<boolean | undefined>;
-    variant?: _chakra_ui_react.ConditionalValue<"none" | "pulse" | "shine" | undefined>;
-} & {
-    noOfLines?: number;
-} & React$1.RefAttributes<HTMLDivElement>>;
+declare const Skeleton: (props: SkeletonProps & {
+    ref?: React$1.Ref<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 type CargonetLogoProps = {
     /** The color of the logo
@@ -2859,7 +3232,9 @@ type CargonetLogoProps = {
      */
     colorPalette: "light" | "dark";
 };
-declare const CargonetLogo: React$1.ForwardRefExoticComponent<CargonetLogoProps & React$1.RefAttributes<SVGSVGElement>>;
+declare const CargonetLogo: ({ ref, ...props }: CargonetLogoProps & {
+    ref?: React.RefObject<SVGSVGElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const SvgBox: _chakra_ui_react.ChakraComponent<"svg", {}>;
 type VyLogoBaseProps = ComponentProps<typeof SvgBox>;
@@ -2867,11 +3242,14 @@ type VyLogoProps = VyLogoBaseProps & {
     /** mono = black in light mode, white in dark mode */
     variant?: "default" | "mono";
 };
-declare const VyLogo: React$1.ForwardRefExoticComponent<Omit<VyLogoProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
+declare const VyLogo: ({ ref, variant, ...props }: VyLogoProps & {
+    ref?: React.RefObject<SVGSVGElement>;
+}) => react_jsx_runtime.JSX.Element;
 
-declare const VyLogoPride: React$1.ForwardRefExoticComponent<Omit<Omit<_chakra_ui_react.PatchHtmlProps<Omit<React$1.SVGProps<SVGSVGElement>, "ref">>, "content" | "container" | "background" | "page" | "_hover" | "_active" | "_focus" | "_focusWithin" | "_focusVisible" | "_disabled" | "_visited" | "_target" | "_readOnly" | "_readWrite" | "_empty" | "_checked" | "_enabled" | "_expanded" | "_highlighted" | "_complete" | "_incomplete" | "_dragging" | "_before" | "_after" | "_firstLetter" | "_firstLine" | "_marker" | "_selection" | "_file" | "_backdrop" | "_first" | "_last" | "_notFirst" | "_notLast" | "_only" | "_even" | "_odd" | "_peerFocus" | "_peerHover" | "_peerActive" | "_peerFocusWithin" | "_peerFocusVisible" | "_peerDisabled" | "_peerChecked" | "_peerInvalid" | "_peerExpanded" | "_peerPlaceholderShown" | "_groupFocus" | "_groupHover" | "_groupActive" | "_groupFocusWithin" | "_groupFocusVisible" | "_groupDisabled" | "_groupChecked" | "_groupExpanded" | "_groupInvalid" | "_indeterminate" | "_required" | "_valid" | "_invalid" | "_autofill" | "_inRange" | "_outOfRange" | "_placeholder" | "_placeholderShown" | "_pressed" | "_selected" | "_grabbed" | "_underValue" | "_overValue" | "_atValue" | "_default" | "_optional" | "_open" | "_closed" | "_fullscreen" | "_loading" | "_hidden" | "_current" | "_currentPage" | "_currentStep" | "_today" | "_unavailable" | "_rangeStart" | "_rangeEnd" | "_now" | "_topmost" | "_motionReduce" | "_motionSafe" | "_print" | "_landscape" | "_portrait" | "_dark" | "_light" | "_osDark" | "_osLight" | "_highContrast" | "_lessContrast" | "_moreContrast" | "_ltr" | "_rtl" | "_scrollbar" | "_scrollbarThumb" | "_scrollbarTrack" | "_horizontal" | "_vertical" | "_icon" | "_starting" | "_off" | "_on" | "sm" | "smOnly" | "smDown" | "md" | "mdOnly" | "mdDown" | "lg" | "lgOnly" | "lgDown" | "xl" | "xlOnly" | "xlDown" | "smToMd" | "smToLg" | "smToXl" | "mdToLg" | "mdToXl" | "lgToXl" | "base" | "borderRadius" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "alignmentBaseline" | "anchorName" | "anchorScope" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "clipRule" | "color" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "cx" | "cy" | "d" | "direction" | "display" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fill" | "fillOpacity" | "fillRule" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStyle" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "positionAnchor" | "positionArea" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionName" | "visibility" | "whiteSpace" | "whiteSpaceCollapse" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zIndex" | "zoom" | "all" | "animation" | "animationRange" | "backgroundPosition" | "border" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockStart" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineStart" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "flex" | "flexFlow" | "font" | "gap" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "margin" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "offset" | "outline" | "overflow" | "overscrollBehavior" | "padding" | "paddingBlock" | "paddingInline" | "placeContent" | "placeItems" | "placeSelf" | "positionTry" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "textWrap" | "transition" | "viewTimeline" | "WebkitAppearance" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBoxReflect" | "WebkitLineClamp" | "WebkitMaskAttachment" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitOverflowScrolling" | "WebkitTapHighlightColor" | "WebkitTextFillColor" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTouchCallout" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitBorderBefore" | "WebkitMask" | "WebkitTextStroke" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontStretch" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "bg" | "colorPalette" | "borderBottomRadius" | "paddingY" | "shadow" | "paddingX" | "css" | "bgColor" | "bgSize" | "bgPos" | "bgRepeat" | "bgAttachment" | "bgClip" | "bgGradient" | "bgImg" | "bgImage" | "borderStart" | "borderEnd" | "borderX" | "borderY" | "borderStartColor" | "borderEndColor" | "borderStartStyle" | "borderEndStyle" | "rounded" | "roundedTopLeft" | "roundedStartStart" | "borderTopStartRadius" | "roundedEndStart" | "borderBottomStartRadius" | "roundedTopRight" | "roundedStartEnd" | "borderTopEndRadius" | "roundedEndEnd" | "borderBottomEndRadius" | "roundedBottomLeft" | "roundedBottomRight" | "roundedStart" | "borderStartRadius" | "roundedEnd" | "borderEndRadius" | "roundedTop" | "roundedBottom" | "roundedLeft" | "roundedRight" | "borderXWidth" | "borderStartWidth" | "borderEndWidth" | "borderYWidth" | "shadowColor" | "blendMode" | "bgBlendMode" | "gapY" | "gapX" | "flexDir" | "w" | "h" | "minW" | "minH" | "maxW" | "maxH" | "overscroll" | "overscrollX" | "overscrollY" | "scrollPaddingX" | "scrollPaddingY" | "listStylePos" | "listStyleImg" | "pos" | "insetX" | "insetY" | "insetStart" | "insetEnd" | "m" | "mt" | "mr" | "mb" | "ml" | "ms" | "marginStart" | "me" | "marginEnd" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "ps" | "paddingStart" | "pe" | "paddingEnd" | "px" | "py" | "textDecor" | "backgroundGradient" | "gradientFrom" | "gradientTo" | "gradientVia" | "borderInlineStartRadius" | "borderInlineEndRadius" | "borderTopRadius" | "borderLeftRadius" | "borderRightRadius" | "divideX" | "divideY" | "divideColor" | "divideStyle" | "boxShadowColor" | "blur" | "brightness" | "contrast" | "grayscale" | "hueRotate" | "invert" | "saturate" | "sepia" | "dropShadow" | "backdropBlur" | "backdropBrightness" | "backdropContrast" | "backdropGrayscale" | "backdropHueRotate" | "backdropInvert" | "backdropOpacity" | "backdropSaturate" | "backdropSepia" | "focusRing" | "focusVisibleRing" | "focusRingColor" | "focusRingOffset" | "focusRingWidth" | "focusRingStyle" | "boxSize" | "hideFrom" | "hideBelow" | "scrollbar" | "scrollMarginX" | "scrollMarginY" | "scrollSnapStrictness" | "ring" | "ringColor" | "ringOffset" | "ringOffsetColor" | "ringInset" | "skewX" | "skewY" | "scaleX" | "scaleY" | "spaceXReverse" | "spaceX" | "spaceYReverse" | "spaceY" | "rotateX" | "rotateY" | "translateX" | "translateY" | "truncate" | "borderSpacingX" | "borderSpacingY" | "srOnly" | "debug" | "textStyle" | "animationStyle" | keyof _chakra_ui_react.PolymorphicProps> & Omit<_chakra_ui_react.JsxStyleProps, never> & _chakra_ui_react.PolymorphicProps & {
-    ref?: any | undefined;
-}, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
+type VyLogoPrideProps = ComponentProps<typeof SvgBox>;
+declare const VyLogoPride: ({ ref, ...props }: VyLogoPrideProps & {
+    ref?: React.RefObject<SVGSVGElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const mediaControllerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" | "root", {
     variant: {
@@ -2929,6 +3307,13 @@ declare const mediaControllerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"
 }>;
 
 type MediaControllerVariantProps = RecipeVariantProps<typeof mediaControllerSlotRecipe>;
+type JumpButtonProps = BoxProps & PropsWithChildren<MediaControllerVariantProps> & {
+    onClick: () => void;
+    "aria-label"?: string;
+    disabled?: boolean;
+    direction: "backward" | "forward";
+    size: "sm" | "lg";
+};
 /**
  * A jump button.
  *
@@ -2940,19 +3325,17 @@ type MediaControllerVariantProps = RecipeVariantProps<typeof mediaControllerSlot
  * <JumpButton direction="forward" onClick={onGoForward} />
  * ```
  */
-declare const JumpButton: React$1.ForwardRefExoticComponent<BoxProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"play" | "jumpSkip" | undefined>;
-    size?: _chakra_ui_react.ConditionalValue<"sm" | "lg" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
+declare const JumpButton: ({ ref, ...props }: JumpButtonProps & {
+    ref?: React.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
+
+type PlayPauseButtonProps = BoxProps & PropsWithChildren<MediaControllerVariantProps> & {
     onClick: () => void;
     "aria-label"?: string;
     disabled?: boolean;
-    direction: "backward" | "forward";
+    playing: boolean;
     size: "sm" | "lg";
-} & React$1.RefAttributes<HTMLButtonElement>>;
-
+};
 /**
  * A playback button.
  *
@@ -2964,19 +3347,17 @@ declare const JumpButton: React$1.ForwardRefExoticComponent<BoxProps & {
  * <PlayPauseButton playing={playing} onClick={onPlaybackClick} />
  * ```
  */
-declare const PlayPauseButton: React$1.ForwardRefExoticComponent<BoxProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"play" | "jumpSkip" | undefined>;
-    size?: _chakra_ui_react.ConditionalValue<"sm" | "lg" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
+declare const PlayPauseButton: ({ ref, ...props }: PlayPauseButtonProps & {
+    ref?: React.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
+
+type SkipButtonProps = BoxProps & PropsWithChildren<MediaControllerVariantProps> & {
     onClick: () => void;
     "aria-label"?: string;
     disabled?: boolean;
-    playing: boolean;
+    direction: "backward" | "forward";
     size: "sm" | "lg";
-} & React$1.RefAttributes<HTMLButtonElement>>;
-
+};
 /**
  * A skip button.
  *
@@ -2988,51 +3369,61 @@ declare const PlayPauseButton: React$1.ForwardRefExoticComponent<BoxProps & {
  * <SkipButton direction="forward" onClick={onNextChapter} />
  * ```
  */
-declare const SkipButton: React$1.ForwardRefExoticComponent<BoxProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"play" | "jumpSkip" | undefined>;
-    size?: _chakra_ui_react.ConditionalValue<"sm" | "lg" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
-    onClick: () => void;
-    "aria-label"?: string;
-    disabled?: boolean;
-    direction: "backward" | "forward";
-    size: "sm" | "lg";
-} & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SkipButton: ({ ref, ...props }: SkipButtonProps & {
+    ref?: React.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 type NudgeProps = {
     introducedDate: string;
 } & PopoverRootProps;
 declare const Nudge: (props: NudgeProps) => react_jsx_runtime.JSX.Element | null;
-declare const NudgeTrigger: React__default.ForwardRefExoticComponent<Popover$1.TriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
-declare const NudgeContent: React__default.ForwardRefExoticComponent<Omit<PopoverProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const NudgeTrigger: ({ ref, ...props }: Popover$1.TriggerProps & {
+    ref?: React__default.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const NudgeContent: ({ ref, showCloseButton, children, ...props }: PopoverProps & {
+    ref?: React__default.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 declare const NudgeActions: ({ ...props }: BoxProps) => react_jsx_runtime.JSX.Element;
-declare const NudgeWizardStep: {
-    ({ children }: PropsWithChildren): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const NudgeCloseTrigger: React__default.ForwardRefExoticComponent<Popover$1.TriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
+declare const NudgeWizardStep: ({ children }: PropsWithChildren) => react_jsx_runtime.JSX.Element;
+declare const NudgeCloseTrigger: ({ ref, children, ...props }: Popover$1.TriggerProps & {
+    ref?: React__default.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const paginationSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"item" | "list", _chakra_ui_react.SlotRecipeVariantRecord<"item" | "list">>;
 
+type PaginationVariantProps = RecipeVariantProps<typeof paginationSlotRecipe>;
 type ButtonVariantContext = {
     getHref?: (page: number) => string;
 };
+type PaginationRootProps = Omit<Pagination$1.RootProps, "type"> & React.PropsWithChildren<PaginationVariantProps> & ButtonVariantContext & {};
 
-declare const Pagination: React$1.ForwardRefExoticComponent<Omit<Pagination$1.RootProps, "type"> & {
-    children?: React$1.ReactNode | undefined;
-} & ButtonVariantContext & React$1.RefAttributes<HTMLDivElement>>;
-declare const PaginationEllipsis: React$1.ForwardRefExoticComponent<Pagination$1.EllipsisProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const PaginationItem: React$1.ForwardRefExoticComponent<Pagination$1.ItemProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const PaginationPrevTrigger: React$1.ForwardRefExoticComponent<Pagination$1.PrevTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const PaginationNextTrigger: React$1.ForwardRefExoticComponent<Pagination$1.NextTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const Pagination: ({ ref, ...props }: PaginationRootProps & {
+    ref?: React$1.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const PaginationEllipsis: ({ ref, ...props }: Pagination$1.EllipsisProps & {
+    ref?: React$1.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const PaginationItem: ({ ref, ...props }: Pagination$1.ItemProps & {
+    ref?: React$1.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const PaginationPrevTrigger: ({ ref, ...props }: Pagination$1.PrevTriggerProps & {
+    ref?: React$1.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element | null;
+declare const PaginationNextTrigger: ({ ref, ...props }: Pagination$1.NextTriggerProps & {
+    ref?: React$1.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element | null;
 declare const PaginationItems: (props: React$1.HTMLAttributes<HTMLElement> & {}) => react_jsx_runtime.JSX.Element;
 
 declare const Popover: React__default.FC<Popover$1.RootProps>;
-declare const PopoverTrigger: React__default.ForwardRefExoticComponent<Popover$1.TriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
+declare const PopoverTrigger: ({ ref, children, ...props }: Popover$1.TriggerProps & {
+    ref?: React__default.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
 type PopoverProps = Popover$1.ContentProps & React__default.RefAttributes<HTMLDivElement> & {
     showCloseButton?: boolean;
 };
-declare const PopoverContent: React__default.ForwardRefExoticComponent<Omit<PopoverProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: ({ ref, children, showCloseButton, ...props }: PopoverProps & {
+    ref?: React__default.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const progressIndicatorRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "container" | "circle" | "progressDot", _chakra_ui_react.SlotRecipeVariantRecord<"root" | "container" | "circle" | "progressDot">>;
 
@@ -3057,15 +3448,9 @@ type ProgressIndicatorProps = BoxProps & PropsWithChildren<ProgressIndicatorVari
  * />
  * ```
  */
-declare const ProgressIndicator: React__default.ForwardRefExoticComponent<BoxProps & {
-    children?: React__default.ReactNode | undefined;
-} & {
-    children?: React__default.ReactNode;
-    numberOfSteps: number;
-    activeStep: number;
-    colorPalette?: string;
-    css?: SystemStyleObject;
-} & React__default.RefAttributes<HTMLDivElement>>;
+declare const ProgressIndicator: ({ ref, numberOfSteps, activeStep, css, }: ProgressIndicatorProps & {
+    ref?: React__default.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 type SporProviderProps = Omit<ChakraProviderProps, "value"> & {
     /**
@@ -3159,25 +3544,7 @@ declare const stepperSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" |
 }>;
 
 type StepperVariantProps = RecipeVariantProps<typeof stepperSlotRecipe>;
-/**
- * A stepper is used to show which step of a process a user is currently in.
- *
- * You specify the active step, which starts at 1 (not 0)
- *
- * ```tsx
- * <Stepper
- *   title="Example"
- *   onClick={handleStepClick}
- *   activeStep={2}
- *   steps={['Where', 'When', 'How']}
- * />
- * ```
- **/
-declare const Stepper: React$1.ForwardRefExoticComponent<{
-    variant?: _chakra_ui_react.ConditionalValue<"core" | "accent" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
+type StepperProps = PropsWithChildren<StepperVariantProps> & {
     /** Callback for when a step is clicked */
     onClick: (clickedStep: number) => void;
     /** Callback for when the back button is clicked (on smaller screens).
@@ -3204,7 +3571,24 @@ declare const Stepper: React$1.ForwardRefExoticComponent<{
     /** Disables all clicks */
     disabled?: boolean;
     css?: SystemStyleObject;
-} & React$1.RefAttributes<HTMLDivElement>>;
+};
+/**
+ * A stepper is used to show which step of a process a user is currently in.
+ *
+ * You specify the active step, which starts at 1 (not 0)
+ *
+ * ```tsx
+ * <Stepper
+ *   title="Example"
+ *   onClick={handleStepClick}
+ *   activeStep={2}
+ *   steps={['Where', 'When', 'How']}
+ * />
+ * ```
+ **/
+declare const Stepper: ({ ref, ...props }: StepperProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 type StepperStepProps = PropsWithChildren<StepperVariantProps> & {
     children: React__default.ReactNode;
@@ -3400,23 +3784,9 @@ type TabsProps = Exclude<TabsRootProps, "colorPalette" | "orientation"> & PropsW
     /** Defaults to `start` */
     justify?: "start" | "center" | "end";
 };
-declare const Tabs: React$1.ForwardRefExoticComponent<Tabs$1.RootProps & {
-    fitted?: _chakra_ui_react.ConditionalValue<boolean | undefined>;
-    justify?: _chakra_ui_react.ConditionalValue<"center" | "end" | "start" | undefined>;
-    variant?: _chakra_ui_react.ConditionalValue<"core" | "accent" | undefined>;
-    size?: _chakra_ui_react.ConditionalValue<"sm" | "md" | "lg" | "xs" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
-    /** Defaults to `core` */
-    variant?: "core" | "accent";
-    /** Defaults to `sm` */
-    size?: "xs" | "sm" | "md" | "lg";
-    /** If Tabs should take up the full width or not. Defaults to `false` */
-    fitted?: boolean;
-    /** Defaults to `start` */
-    justify?: "start" | "center" | "end";
-} & React$1.RefAttributes<HTMLDivElement>>;
+declare const Tabs: ({ ref, ...props }: TabsProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 declare const TabsList: React$1.ForwardRefExoticComponent<Tabs$1.ListProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const TabsTrigger: React$1.ForwardRefExoticComponent<Tabs$1.TriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const TabsIndicator: React$1.ForwardRefExoticComponent<Tabs$1.IndicatorProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -3606,38 +3976,17 @@ type TableProps = Exclude<TableRootProps, "variant" | "colorPalette"> & PropsWit
     variant?: "ghost" | "core";
     colorPalette?: "grey" | "green" | "white";
     sortable?: boolean;
+    ref?: React.Ref<HTMLTableElement>;
 };
-/**
- * The `Table` component has support for two different variants - `ghost` and `core`. The `ghost` variant has basic lines between rows, while the `core` variant has borders for each cell.
- *
- * You can also specify a `grey` or `green` `colorPalette` prop. Use `green` if you want to place the table on a light green background.
- *
- * Finally, there are three different `size` props you can specify - `sm`, `md` and `lg`.
- *
- * ```tsx
- * <Table variant="core" size="lg">
- *   <Thead>
- *    ...
- *   </Thead>
- *   ...
- * </Table>
- * ```
- */
-declare const Table: React$1.ForwardRefExoticComponent<Table$1.RootProps & {
-    colorPalette?: _chakra_ui_react.ConditionalValue<"white" | "green" | "grey" | undefined>;
-    variant?: _chakra_ui_react.ConditionalValue<"ghost" | "core" | undefined>;
-    size?: _chakra_ui_react.ConditionalValue<"sm" | "md" | "lg" | undefined>;
-} & {
-    children?: React$1.ReactNode | undefined;
-} & {
-    variant?: "ghost" | "core";
-    colorPalette?: "grey" | "green" | "white";
-    sortable?: boolean;
-} & React$1.RefAttributes<HTMLTableElement>>;
-type TableColumnHeaderProps = TableColumnHeaderProps$1;
-declare const TableColumnHeader: React$1.ForwardRefExoticComponent<Table$1.ColumnHeaderProps & React$1.RefAttributes<HTMLTableCellElement>>;
-type TableBodyProps = TableBodyProps$1;
-declare const TableBody: React$1.ForwardRefExoticComponent<Table$1.BodyProps & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const Table: ({ variant, size, colorPalette, children, sortable, ref, ...rest }: TableProps) => react_jsx_runtime.JSX.Element;
+type TableColumnHeaderProps = TableColumnHeaderProps$1 & {
+    ref?: React.Ref<HTMLTableCellElement>;
+};
+declare const TableColumnHeader: ({ children, ref, ...rest }: TableColumnHeaderProps) => react_jsx_runtime.JSX.Element;
+type TableBodyProps = TableBodyProps$1 & {
+    ref?: React.Ref<HTMLTableSectionElement>;
+};
+declare const TableBody: ({ children, ref, ...rest }: TableBodyProps) => react_jsx_runtime.JSX.Element;
 
 declare const themes: {
     VyDigital: _chakra_ui_react.SystemContext;
@@ -3665,20 +4014,29 @@ type ToastProps = {
 declare const createToast: ({ text, variant, id, duration, }: ToastProps) => string;
 
 declare const Tooltip: React$1.FC<Tooltip$1.RootProps>;
-declare const TooltipTrigger: React$1.ForwardRefExoticComponent<Tooltip$1.TriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const TooltipTrigger: ({ ref, children, ...props }: Tooltip$1.TriggerProps & {
+    ref?: React.RefObject<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
 type TooltipProps = Tooltip$1.ContentProps;
-declare const TooltipContent: React$1.ForwardRefExoticComponent<Tooltip$1.ContentProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const TooltipContent: ({ ref, children, ...props }: TooltipProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 type BadgeProps = BadgeProps$1 & {
     icon?: IconComponent;
 };
-declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps$1 & {
-    icon?: IconComponent;
-} & React$1.RefAttributes<HTMLSpanElement>>;
+declare const Badge: ({ ref, icon, children, ...props }: BadgeProps & {
+    ref?: React.RefObject<HTMLSpanElement>;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const codeRecipie: _chakra_ui_react.RecipeDefinition<{
+    colorPalette: {};
+}>;
 
-declare const Code: React__default.ForwardRefExoticComponent<{
-    colorPalette?: _chakra_ui_react.ConditionalValue<undefined>;
-} & CodeProps & React__default.RefAttributes<HTMLElement>>;
+type CodeVariantProps = RecipeVariantProps<typeof codeRecipie> & CodeProps;
+declare const Code: ({ ref, ...props }: CodeVariantProps & {
+    ref?: React__default.RefObject<HTMLElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 type HeadingProps = Omit<HeadingProps$1, "textStyle" | "as"> & {
     /** The heading level, e.g. h1, h2, h3... **/
@@ -3711,14 +4069,9 @@ type HeadingProps = Omit<HeadingProps$1, "textStyle" | "as"> & {
  * <Heading as="h1" autoId>Page heading</Heading> // Will set id="page-heading"
  * ```
  */
-declare const Heading: React$1.ForwardRefExoticComponent<Omit<HeadingProps$1, "textStyle" | "as"> & {
-    /** The heading level, e.g. h1, h2, h3... **/
-    as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    /** The size and style of the heading. Defaults to xl-display */
-    variant?: ConditionalValue<"sm" | "md" | "lg" | "xxl" | "xl-display" | "xl-sans" | "xs">;
-    /** If true, generate an ID based on the children */
-    autoId?: boolean;
-} & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const Heading: ({ ref, ...props }: HeadingProps & {
+    ref?: React.RefObject<HTMLHeadingElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 type TextProps = Omit<TextProps$1, "textStyle"> & {
     /** The size and style of the text.
@@ -3734,13 +4087,9 @@ type TextProps = Omit<TextProps$1, "textStyle"> & {
  * <Text>Welcome to this paragraph of text.</Text>
  * ```
  */
-declare const Text: React$1.ForwardRefExoticComponent<Omit<TextProps$1, "textStyle"> & {
-    /** The size and style of the text.
-     *
-     * Defaults to "sm"
-     * textStyle values are: "sm" | "md" | "lg" | "2xl" | "xl-display" | "xl-sans" | "xs" */
-    variant?: TextProps$1["textStyle"];
-} & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const Text: ({ ref, ...props }: TextProps & {
+    ref?: React.RefObject<HTMLParagraphElement>;
+}) => react_jsx_runtime.JSX.Element;
 
 /**
  * Makes a slug-version of any string.
@@ -3753,4 +4102,4 @@ declare const Text: React$1.ForwardRefExoticComponent<Omit<TextProps$1, "textSty
  **/
 declare function slugify(text: string | string[], maxLength?: number): string;
 
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, type AlertProps, AttachedInputs, type AttachedInputsProps, Autocomplete, AutocompleteItem, AutocompleteItemGroup, AutocompleteItemGroupLabel, Badge, type BadgeProps, Brand, Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonVariantProps, Calendar, CalendarCell, CalendarGrid, CalendarHeader, type CalendarMode, CalendarProvider, type CalendarValue, CardSelect, CardSelectContent, CardSelectTrigger, type CardSelectTriggerProps, CargonetLogo, type CargonetLogoProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, ChoiceChip, type ChoiceChipProps, Clipboard, ClipboardButton, CloseButton, type CloseButtonProps, CloseDrawerLine, Code, ColorInlineLoader, type ColorInlineLoaderProps, type ColorMode, ColorModeButton, ColorModeIcon, ColorModeProvider, type ColorModeProviderProps, ColorSpinner, type ColorSpinnerProps, Combobox, type ComboboxProps, ContentLoader, type ContentLoaderProps, type CountryCodeAndPhoneNumber, DarkFullScreenLoader, DarkInlineLoader, type DarkInlineLoaderProps, DarkSpinner, type DarkSpinnerProps, DatePicker, type DatePickerVariantProps, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field, type FieldBaseProps, FieldErrorText, FieldLabel, type FieldProps, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, type GroupVariantProps, Heading, type HeadingProps, IconButton, type IconButtonProps, InfoTag, type InfoTagProps, Input, type InputProps, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, type LightInlineLoaderProps, LightSpinner, type LightSpinnerProps, LineIcon, type LineIconProps, type LinkProps, List, ListBox, ListIndicator, ListItem, type MediaControllerVariantProps, NativeSelect, type NativeSelectdProps, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, type NudgeProps, NudgeTrigger, NudgeWizardStep, NumericStepper, type NumericStepperProps, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, type PasswordInputProps, type PasswordVisibilityProps, PhoneNumberInput, PlayPauseButton, Popover, PopoverContent, type PopoverProps, PopoverTrigger, PressableCard, ProgressBar, type ProgressBarProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorVariantProps, ProgressLoader, type ProgressLoaderProps, type ProgressLoaderVariantProps, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, type RadioProps, RangeCalendar, ScrollCalendar, SearchInput, type SearchInputProps, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, type SelectProps, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, SkipButton, type SpinnerProps, SporProvider, StaticCard, type StaticCardProps, Stepper, StepperStep, type StepperVariantProps, SvgBox, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableColumnHeader, type TableColumnHeaderProps, type TableProps, Tabs, TabsContent, TabsIndicator, TabsList, type TabsProps, TabsTrigger, Text, TextLink, type TextProps, Textarea, type TextareaProps, TimePicker, Tooltip, TooltipContent, type TooltipProps, TooltipTrigger, type TranslationObject, type Translations, TravelTag, type TravelTagProps, type UseColorModeReturn, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useCalendar, useColorMode, useColorModeValue, useTableSort, useTranslation };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, type AlertProps, AttachedInputs, type AttachedInputsProps, Autocomplete, AutocompleteItem, AutocompleteItemGroup, AutocompleteItemGroupLabel, Badge, type BadgeProps, Brand, Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonVariantProps, Calendar, CalendarCell, CalendarGrid, CalendarHeader, type CalendarMode, CalendarProvider, type CalendarValue, CardSelect, CardSelectContent, CardSelectTrigger, type CardSelectTriggerProps, CargonetLogo, type CargonetLogoProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, ChoiceChip, type ChoiceChipProps, Clipboard, ClipboardButton, CloseButton, type CloseButtonProps, CloseDrawerLine, Code, ColorInlineLoader, type ColorInlineLoaderProps, type ColorMode, ColorModeButton, ColorModeIcon, ColorModeProvider, type ColorModeProviderProps, ColorSpinner, type ColorSpinnerProps, Combobox, type ComboboxProps, ContentLoader, type ContentLoaderProps, type CountryCodeAndPhoneNumber, DarkFullScreenLoader, DarkInlineLoader, type DarkInlineLoaderProps, DarkSpinner, type DarkSpinnerProps, DatePicker, type DatePickerVariantProps, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field, type FieldBaseProps, FieldErrorText, FieldLabel, type FieldProps, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, type GroupVariantProps, Heading, type HeadingProps, IconButton, type IconButtonProps, InfoTag, type InfoTagProps, Input, type InputProps, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, type LightInlineLoaderProps, LightSpinner, type LightSpinnerProps, LineIcon, type LineIconProps, type LinkProps, List, ListBox, ListIndicator, ListItem, type MediaControllerVariantProps, Menu, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, type MenuItemGroupProps, type MenuItemProps, MenuRadioItem, MenuRadioItemGroup, MenuSeparator, MenuTrigger, MenuTriggerItem, type MenuTriggerItemProps, type MenuTriggerProps, NativeSelect, type NativeSelectdProps, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, type NudgeProps, NudgeTrigger, NudgeWizardStep, NumericStepper, type NumericStepperProps, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, type PasswordInputProps, type PasswordVisibilityProps, PhoneNumberInput, PlayPauseButton, Popover, PopoverContent, type PopoverProps, PopoverTrigger, PressableCard, ProgressBar, type ProgressBarProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorVariantProps, ProgressLoader, type ProgressLoaderProps, type ProgressLoaderVariantProps, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, type RadioProps, RangeCalendar, ScrollCalendar, SearchInput, type SearchInputProps, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, type SelectProps, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, SkipButton, type SpinnerProps, SporProvider, StaticCard, type StaticCardProps, Stepper, StepperStep, type StepperVariantProps, SvgBox, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableColumnHeader, type TableColumnHeaderProps, type TableProps, Tabs, TabsContent, TabsIndicator, TabsList, type TabsProps, TabsTrigger, Text, TextLink, type TextProps, Textarea, type TextareaProps, TimePicker, Tooltip, TooltipContent, type TooltipProps, TooltipTrigger, type TranslationObject, type Translations, TravelTag, type TravelTagProps, type UseColorModeReturn, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useCalendar, useColorMode, useColorModeValue, useMenuContext, useTableSort, useTranslation };