@vygruppen/spor-react 12.24.16 → 13.0.0

package/dist/index.d.ts

@@ -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, MenuRootProps, Menu as Menu$1, MenuItemGroupProps as MenuItemGroupProps$1, MenuItemProps as MenuItemProps$1, MenuTriggerItemProps as MenuTriggerItemProps$1, 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 PressableCard: React$1.ForwardRefExoticComponent<{
-    variant?: _chakra_ui_react.ConditionalValue<"core" | "floating" | "accent" | undefined>;
-} & ButtonProps$1 & React$1.RefAttributes<HTMLButtonElement>>;
+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 RadioCard: React__default.ForwardRefExoticComponent<RadioCard$1.ItemProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"core" | "floating" | undefined>;
-} & {
+/**
+ * `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})`;
+                    };
+                };
+            };
+        };
+    };
+}>;
+
+/**
+ * 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.
  *
@@ -1617,47 +2014,48 @@ declare const useMenuContext: () => Variant$2;
  *
  */
 declare const Menu: ({ children, ...props }: MenuRootProps) => react_jsx_runtime.JSX.Element;
-declare const MenuContent: React$1.ForwardRefExoticComponent<Menu$1.ContentProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const MenuContent: ({ children, ref, ...props }: MenuContentProps & {
+    ref?: Ref<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
 type MenuTriggerProps = {
-    /** An optional trigger button icon, rendered to the left of the label */
     icon?: ReactNode;
-} & Omit<ButtonProps, "variant" | "rightIcon" | "leftIcon">;
-declare const MenuTrigger: React$1.ForwardRefExoticComponent<{
-    /** An optional trigger button icon, rendered to the left of the label */
-    icon?: ReactNode;
-} & Omit<ButtonProps, "variant" | "leftIcon" | "rightIcon"> & React$1.RefAttributes<HTMLButtonElement>>;
+} & Omit<ButtonProps, "variant" | "rightIcon" | "leftIcon"> & {
+    ref?: Ref<HTMLButtonElement>;
+};
+declare const MenuTrigger: ({ icon, size, children, ref, ...props }: MenuTriggerProps) => react_jsx_runtime.JSX.Element;
 type MenuItemProps = {
-    /** Display a command in the menu */
     itemCommand?: string;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
-} & MenuItemProps$1;
-declare const MenuItem: React$1.ForwardRefExoticComponent<{
-    /** Display a command in the menu */
-    itemCommand?: string;
-    leftIcon?: React.ReactNode;
-    rightIcon?: React.ReactNode;
-} & Menu$1.ItemProps & React$1.RefAttributes<HTMLDivElement>>;
+} & 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;
-declare const MenuTriggerItem: React$1.ForwardRefExoticComponent<{
-    leftIcon?: React.ReactNode;
-    rightIcon?: React.ReactNode;
-} & Menu$1.TriggerItemProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const MenuRadioItemGroup: React$1.ForwardRefExoticComponent<Menu$1.RadioItemGroupProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const MenuRadioItem: React$1.ForwardRefExoticComponent<Menu$1.RadioItemProps & React$1.RefAttributes<HTMLDivElement>>;
+} & 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 = {
-    /** Display group label */
-    label?: string;
-} & MenuItemGroupProps$1;
-declare const MenuItemGroup: React$1.ForwardRefExoticComponent<{
-    /** Display group label */
     label?: string;
-} & Menu$1.ItemGroupProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const MenuCheckboxItem: React$1.ForwardRefExoticComponent<Menu$1.CheckboxItemProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const MenuSeparator: React$1.ForwardRefExoticComponent<React$1.RefAttributes<Menu$1.SeparatorProps>>;
+} & 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: {
@@ -1725,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: {
@@ -1794,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 */
@@ -1855,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;
@@ -1891,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: {
@@ -1922,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 */
@@ -1940,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;
@@ -1973,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;
 
@@ -2069,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: {
@@ -2135,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: {
@@ -2393,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: {
@@ -2543,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 */
@@ -2551,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.
@@ -2726,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>;
 
@@ -2811,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: {
@@ -2891,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
@@ -2922,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>;
@@ -2930,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: {
@@ -2992,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.
  *
@@ -3003,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.
  *
@@ -3027,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.
  *
@@ -3051,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">>;
 
@@ -3120,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"> & {
     /**
@@ -3222,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).
@@ -3267,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;
@@ -3463,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>>;
@@ -3669,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;
@@ -3728,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... **/
@@ -3774,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.
@@ -3797,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.