@vygruppen/spor-react 12.0.2 → 12.0.3

package/dist/index.d.mts

@@ -1,19 +1,19 @@
-import * as sporDesignTokens from '@vygruppen/spor-design-tokens';
-export { sporDesignTokens as tokens };
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { Accordion as Accordion$1, ConditionalValue, Alert as Alert$1, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, IconButtonProps as IconButtonProps$1, BoxProps, Clipboard as Clipboard$1, InputElementProps, PopoverRootProps, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, Fieldset as Fieldset$1, Field, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, Switch as Switch$1, TextareaProps as TextareaProps$1, SelectRootProps, Select as Select$1, CollectionItem, SeparatorProps, RadioCard as RadioCard$1, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Drawer as Drawer$1, Dialog, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, TabsRootProps, Tabs as Tabs$1, TableRootProps, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, Dialog, Drawer as Drawer$1, InputElementProps, PopoverRootProps, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, Fieldset as Fieldset$1, Field, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, RadioCard as RadioCard$1, SeparatorProps, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, TabsRootProps, Tabs as Tabs$1, TableRootProps, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { Box, BoxProps, Center, CenterProps, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnHeader, TableColumnHeaderProps, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, createListCollection, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
 import * as React$1 from 'react';
 import React__default, { PropsWithChildren, ReactNode, ChangeEvent } from 'react';
 import { IconComponent } from '@vygruppen/spor-icon-react';
 import { ThemeProviderProps } from 'next-themes';
+import { AriaDatePickerProps, DateValue, AriaDateRangePickerProps, AriaComboBoxProps, AriaListBoxProps } from 'react-aria';
 import { DateValue as DateValue$1 } from '@internationalized/date';
 export { Time } from '@internationalized/date';
-import { AriaDatePickerProps, DateValue, AriaDateRangePickerProps, AriaComboBoxProps, AriaListBoxProps } from 'react-aria';
 import { TimeValue } from '@react-types/datepicker';
 import { SelectState, ListState } from 'react-stately';
 export { Item, Section } from 'react-stately';
 export { useIsClient, useMap, useOnClickOutside } from 'usehooks-ts';
+import * as sporDesignTokens from '@vygruppen/spor-design-tokens';
+export { sporDesignTokens as tokens };
 
 type HeadingLevel = {
     /** Heading level of the trigger button */
@@ -87,6 +87,45 @@ declare const Expandable: React__default.ForwardRefExoticComponent<_chakra_ui_re
  */
 declare const ExpandableItem: (props: ExpandableItemProps) => React__default.JSX.Element;
 
+type AlertProps = 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;
+};
+/**
+ *
+ * Alerts are used to communicate important information to the user.
+ * They can be used to inform about success, errors, warnings, or other important information.
+ *
+ * ```tsx
+ * <Alert variant="info" title="Information">
+ *  This is an information alert
+ * </Alert>
+ * ```
+ *
+ * You may also use the closable prop to allow the user to dismiss the alert.
+ *
+ * ```tsx
+ * <Alert variant="info" title="Information" closable>
+ *    This is an closable alert
+ * </Alert>
+ *
+ * @see Docs https://spor.vy.no/alert
+ */
+declare const Alert: React__default.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__default.RefAttributes<HTMLDivElement>>;
+
 /**
  * An expandable alert component.
  *
@@ -127,45 +166,6 @@ declare const ExpandableAlert: React__default.ForwardRefExoticComponent<{
     variant?: ConditionalValue<"important" | "success" | "alt" | "info" | "error" | undefined>;
 } & React__default.RefAttributes<HTMLDivElement>>;
 
-type AlertProps = 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;
-};
-/**
- *
- * Alerts are used to communicate important information to the user.
- * They can be used to inform about success, errors, warnings, or other important information.
- *
- * ```tsx
- * <Alert variant="info" title="Information">
- *  This is an information alert
- * </Alert>
- * ```
- *
- * You may also use the closable prop to allow the user to dismiss the alert.
- *
- * ```tsx
- * <Alert variant="info" title="Information" closable>
- *    This is an closable alert
- * </Alert>
- *
- * @see Docs https://spor.vy.no/alert
- */
-declare const Alert: React__default.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__default.RefAttributes<HTMLDivElement>>;
-
 /**
  * A service alert component.
  *
@@ -385,6 +385,23 @@ declare const ButtonGroup: React__default.ForwardRefExoticComponent<GroupProps &
     children?: React__default.ReactNode | undefined;
 } & React__default.RefAttributes<HTMLDivElement>>;
 
+declare const ClipboardButton: React$1.ForwardRefExoticComponent<_chakra_ui_react.ButtonProps & {
+    variant?: _chakra_ui_react.ConditionalValue<"floating" | "secondary" | "tertiary" | "ghost" | "primary" | 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: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
+    size?: "lg" | "md" | "sm" | "xs";
+    download?: string;
+    href?: string;
+} & React$1.RefAttributes<HTMLButtonElement>>;
+declare const Clipboard: React$1.ForwardRefExoticComponent<Clipboard$1.RootProps & React$1.RefAttributes<HTMLDivElement>>;
+
 type IconButtonProps = Exclude<IconButtonProps$1, "variant" | "spinner" | "icon"> & PropsWithChildren<ButtonVariantProps> & {
     /** The button variant.
      *
@@ -490,23 +507,6 @@ declare const FloatingActionButton: React__default.ForwardRefExoticComponent<Box
     isTextVisible?: boolean;
 } & React__default.RefAttributes<HTMLButtonElement>>;
 
-declare const ClipboardButton: React$1.ForwardRefExoticComponent<_chakra_ui_react.ButtonProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "secondary" | "tertiary" | "ghost" | "primary" | 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: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
-    size?: "lg" | "md" | "sm" | "xs";
-    download?: string;
-    href?: string;
-} & React$1.RefAttributes<HTMLButtonElement>>;
-declare const Clipboard: React$1.ForwardRefExoticComponent<Clipboard$1.RootProps & React$1.RefAttributes<HTMLDivElement>>;
-
 interface ColorModeProviderProps extends ThemeProviderProps {
 }
 declare function ColorModeProvider(props: ColorModeProviderProps): React$1.JSX.Element;
@@ -686,126 +686,279 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
  */
 declare const TimePicker: ({ label: externalLabel, value, defaultValue, onChange, minuteInterval, disabled: isDisabledExternally, name, ...boxProps }: TimePickerProps) => React__default.JSX.Element;
 
-/** A string of CSS that should be injected in the global CSS space */
-declare const fontFaces: string;
-
-declare enum Brand {
-    VyDigital = "VyDigital",
-    VyUtvikling = "VyUtvikling",
-    CargoNet = "CargoNet"
-}
-
-declare const themes: {
-    VyDigital: _chakra_ui_react.SystemContext;
-    CargoNet: _chakra_ui_react.SystemContext;
-    VyUtvikling: _chakra_ui_react.SystemContext;
-};
-declare const system: _chakra_ui_react.SystemContext;
-
-declare enum Language {
-    NorwegianBokmal = "nb",
-    NorwegianNynorsk = "nn",
-    Swedish = "sv",
-    English = "en"
+interface DialogContentProps extends Dialog.ContentProps {
+    portalled?: boolean;
+    portalRef?: React$1.RefObject<HTMLElement>;
+    backdrop?: boolean;
+    children?: React$1.ReactNode;
 }
-type TranslationObject = {
-    [key in Language]: string | React__default.ReactElement;
-};
-type TranslationFunction = (...args: Array<string | number>) => TranslationObject;
-type Translation = TranslationObject | TranslationFunction;
-type Translations = {
-    [key: string]: Translation | Translations;
-};
-type LanguageProviderProps = {
-    language: Language;
-    children: React__default.ReactElement;
-};
-/**
- * A language provider component.
- *
- * This component should wrap your entire application. It will provide the language to all components that use it.
- *
- * This is done by the SporProvider component, so most likely, you won't need to use it directly, unless you want to use a specific language for a specific part of your application.
- *
- * ```tsx
- * import { LanguageProvider, Language } from "@vygruppen/spor-react";
- *
- * const App = () => {
- *   return (
- *     <LanguageProvider language={Language.NorwegianBokmal}>
- *       <Routes />
- *     </LanguageProvider>
- *   );
- * }
- * ```
- *
- */
-declare function LanguageProvider({ language, children, }: LanguageProviderProps): React__default.JSX.Element;
-/**
- * A hook that returns translation utilities. Typically used to translate text.
- *
- * ```tsx
- * const Example = () => {
- *   const { t } = useTranslation();
- *   return <p>{t(texts.greeting)}</p>;
- * }
- * const texts = {
- *   greeting: {
- *     nb: "Hei",
- *     nn: "Hei",
- *     sv: "Hej",
- *     en: "Hello",
- *   }
- * }
- * ```
- *
- * You can also use it to fetch the current language:
- *
- * ```tsx
- * const Example = () => {
- *   const { language } = useTranslation();
- *   return <p>{language}</p>;
- * };
- * ```
- */
-declare function useTranslation(): {
-    readonly t: (text: TranslationObject) => string;
-    readonly language: Language;
-};
-/** Utility function that creates type safe text objects with useTranslation
- *
- * ```tsx
- * const texts = createTexts({
- *  example: {
- *   nb: "Eksempel",
- *   nn: "Døme",
- *   sv: "Exempel",
- *   en: "Example",
- *  },
- *  another: {
- *    example: {
- *      nb: <strong>Eksempel</strong>,
- *      nn: <strong>Døme</strong>,
- *      sv: <strong>Exempel</strong>,
- *      en: <strong>Example</strong>,
- *    }
- *  }
- * })
- * ```
- */
-declare function createTexts<T extends Translations>(texts: T): T;
+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 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>>;
+declare const DialogBody: React$1.ForwardRefExoticComponent<Dialog.BodyProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogBackdrop: React$1.ForwardRefExoticComponent<Dialog.BackdropProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogTitle: React$1.ForwardRefExoticComponent<Dialog.TitleProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogDescription: React$1.ForwardRefExoticComponent<Dialog.DescriptionProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogTrigger: React$1.ForwardRefExoticComponent<Dialog.TriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogActionTrigger: React$1.ForwardRefExoticComponent<Dialog.ActionTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 
-declare const attachedInputsRecipe: _chakra_ui_react.RecipeDefinition<{
-    orientation: {
-        horizontal: {
-            flexDirection: "row";
-            "& > *:first-of-type:not(:last-of-type) [data-attachable]": {
-                borderEndRadius: number;
-            };
-            "& > *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
-                borderRadius: number;
+declare const drawerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"title" | "content" | "description" | "body" | "footer" | "header" | "backdrop" | "positioner" | "closeTrigger", {
+    size: {
+        xs: {
+            content: {
+                width: "15rem";
             };
-            "& > *:not(:first-of-type):last-of-type [data-attachable]": {
+        };
+        sm: {
+            content: {
+                width: "25rem";
+            };
+        };
+        md: {
+            content: {
+                width: "40rem";
+            };
+        };
+        lg: {
+            content: {
+                width: "56rem";
+            };
+        };
+        xl: {
+            content: {
+                width: "68rem";
+            };
+        };
+        full: {
+            content: {
+                width: "100vw";
+                height: "100vh";
+                borderRadius: "0 !important";
+                paddingBottom: "4";
+            };
+            closeTrigger: {
+                position: "relative";
+            };
+            title: {
+                textAlign: "center";
+            };
+        };
+    };
+    placement: {
+        start: {
+            positioner: {
+                justifyContent: "flex-start";
+            };
+            content: {
+                paddingTop: "4";
+                _open: {
+                    animationName: {
+                        base: "slide-from-left-full, fade-in";
+                        _rtl: "slide-from-right-full, fade-in";
+                    };
+                };
+                _closed: {
+                    animationName: {
+                        base: "slide-to-left-full, fade-out";
+                        _rtl: "slide-to-right-full, fade-out";
+                    };
+                };
+            };
+        };
+        end: {
+            positioner: {
+                justifyContent: "flex-end";
+            };
+            content: {
+                paddingTop: "4";
+                _open: {
+                    animationName: {
+                        base: "slide-from-right-full, fade-in";
+                        _rtl: "slide-from-left-full, fade-in";
+                    };
+                };
+                _closed: {
+                    animationName: {
+                        base: "slide-to-right-full, fade-out";
+                        _rtl: "slide-to-right-full, fade-out";
+                    };
+                };
+            };
+        };
+        top: {
+            positioner: {
+                alignItems: "flex-start";
+            };
+            content: {
+                maxW: "100%";
+                marginX: "auto";
+                paddingTop: "4";
+                borderBottomRadius: "lg";
+                _open: {
+                    animationName: "slide-from-top-full, fade-in";
+                };
+                _closed: {
+                    animationName: "slide-to-top-full, fade-out";
+                };
+            };
+        };
+        bottom: {
+            positioner: {
+                alignItems: "flex-end";
+            };
+            content: {
+                maxW: "100%";
+                marginX: "auto";
+                paddingBottom: "4";
+                borderTopRadius: "lg";
+                _open: {
+                    animationName: "slide-from-bottom-full, fade-in";
+                };
+                _closed: {
+                    animationName: "slide-to-bottom-full, fade-out";
+                };
+            };
+        };
+    };
+}>;
+
+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__default.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__default.ReactNode | undefined;
+} & {
+    children: React__default.ReactNode;
+    portalled?: boolean;
+    portalRef?: React__default.RefObject<HTMLElement>;
+} & React__default.RefAttributes<HTMLDivElement>>;
+declare const CloseDrawerLine: React__default.ForwardRefExoticComponent<React__default.RefAttributes<HTMLButtonElement>>;
+declare const DrawerCloseTrigger: React__default.ForwardRefExoticComponent<Drawer$1.CloseTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
+declare const DrawerBackTrigger: React__default.ForwardRefExoticComponent<Drawer$1.CloseTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
+declare const DrawerFullScreenHeader: React__default.ForwardRefExoticComponent<Drawer$1.HeaderProps & {
+    backTrigger?: boolean;
+    title?: string;
+} & React__default.RefAttributes<HTMLDivElement>>;
+declare const Drawer: (props: DrawerProps) => React__default.JSX.Element;
+declare const DrawerTrigger: React__default.ForwardRefExoticComponent<Drawer$1.TriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
+declare const DrawerFooter: React__default.ForwardRefExoticComponent<Drawer$1.FooterProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const DrawerBody: React__default.ForwardRefExoticComponent<Drawer$1.BodyProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const DrawerBackdrop: React__default.ForwardRefExoticComponent<Drawer$1.BackdropProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const DrawerTitle: React__default.ForwardRefExoticComponent<Drawer$1.TitleProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const DrawerActionTrigger: React__default.ForwardRefExoticComponent<Drawer$1.ActionTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
+declare const DrawerHeader: React__default.ForwardRefExoticComponent<Drawer$1.HeaderProps & React__default.RefAttributes<HTMLDivElement>>;
+
+declare enum Language {
+    NorwegianBokmal = "nb",
+    NorwegianNynorsk = "nn",
+    Swedish = "sv",
+    English = "en"
+}
+type TranslationObject = {
+    [key in Language]: string | React__default.ReactElement;
+};
+type TranslationFunction = (...args: Array<string | number>) => TranslationObject;
+type Translation = TranslationObject | TranslationFunction;
+type Translations = {
+    [key: string]: Translation | Translations;
+};
+type LanguageProviderProps = {
+    language: Language;
+    children: React__default.ReactElement;
+};
+/**
+ * A language provider component.
+ *
+ * This component should wrap your entire application. It will provide the language to all components that use it.
+ *
+ * This is done by the SporProvider component, so most likely, you won't need to use it directly, unless you want to use a specific language for a specific part of your application.
+ *
+ * ```tsx
+ * import { LanguageProvider, Language } from "@vygruppen/spor-react";
+ *
+ * const App = () => {
+ *   return (
+ *     <LanguageProvider language={Language.NorwegianBokmal}>
+ *       <Routes />
+ *     </LanguageProvider>
+ *   );
+ * }
+ * ```
+ *
+ */
+declare function LanguageProvider({ language, children, }: LanguageProviderProps): React__default.JSX.Element;
+/**
+ * A hook that returns translation utilities. Typically used to translate text.
+ *
+ * ```tsx
+ * const Example = () => {
+ *   const { t } = useTranslation();
+ *   return <p>{t(texts.greeting)}</p>;
+ * }
+ * const texts = {
+ *   greeting: {
+ *     nb: "Hei",
+ *     nn: "Hei",
+ *     sv: "Hej",
+ *     en: "Hello",
+ *   }
+ * }
+ * ```
+ *
+ * You can also use it to fetch the current language:
+ *
+ * ```tsx
+ * const Example = () => {
+ *   const { language } = useTranslation();
+ *   return <p>{language}</p>;
+ * };
+ * ```
+ */
+declare function useTranslation(): {
+    readonly t: (text: TranslationObject) => string;
+    readonly language: Language;
+};
+/** Utility function that creates type safe text objects with useTranslation
+ *
+ * ```tsx
+ * const texts = createTexts({
+ *  example: {
+ *   nb: "Eksempel",
+ *   nn: "Døme",
+ *   sv: "Exempel",
+ *   en: "Example",
+ *  },
+ *  another: {
+ *    example: {
+ *      nb: <strong>Eksempel</strong>,
+ *      nn: <strong>Døme</strong>,
+ *      sv: <strong>Exempel</strong>,
+ *      en: <strong>Example</strong>,
+ *    }
+ *  }
+ * })
+ * ```
+ */
+declare function createTexts<T extends Translations>(texts: T): T;
+
+declare const attachedInputsRecipe: _chakra_ui_react.RecipeDefinition<{
+    orientation: {
+        horizontal: {
+            flexDirection: "row";
+            "& > *:first-of-type:not(:last-of-type) [data-attachable]": {
+                borderEndRadius: number;
+            };
+            "& > *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
+                borderRadius: number;
+            };
+            "& > *:not(:first-of-type):last-of-type [data-attachable]": {
                 borderStartRadius: number;
             };
         };
@@ -1205,7 +1358,7 @@ declare function ItemDescription({ children }: {
     children: React__default.ReactNode;
 }): React__default.JSX.Element;
 
-declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "icon" | "field", {
+declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" | "root" | "field", {
     variant: {
         core: {
             field: {
@@ -1510,163 +1663,6 @@ declare const SearchInput: React__default.ForwardRefExoticComponent<_chakra_ui_r
     onReset?: () => void;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
-declare const switchSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "label" | "control" | "thumb", {
-    size: {
-        sm: {
-            root: {
-                "--switch-width": "3.3rem";
-                "--switch-height": "1.5rem";
-            };
-            control: {
-                borderRadius: "lg";
-                padding: "0.12rem";
-            };
-        };
-        md: {
-            root: {
-                "--switch-width": "4.1rem";
-                "--switch-height": "1.8rem";
-            };
-            control: {
-                borderRadius: "xl";
-                padding: number;
-            };
-        };
-        lg: {
-            root: {
-                "--switch-width": "4.8rem";
-                "--switch-height": "2.25rem";
-            };
-            control: {
-                borderRadius: "2xl";
-                padding: number;
-            };
-        };
-    };
-}>;
-
-type SwitchVariants = RecipeVariantProps<typeof switchSlotRecipe>;
-type SwitchProps = Exclude<Switch$1.RootProps, "size" | "colorPalette"> & PropsWithChildren<SwitchVariants> & {
-    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;
-};
-/**
- * A switch lets you toggle between on and off, yes and no. It's an alternative to a checkbox.
- *
- * You can set a label inside of the Switch component by defining the `label` prop.
- *
- * ```tsx
- * <Switch label="This is a label"/>
- * ```
- *
- * Switches are available in three different sizes - `sm`, `md` and `lg`.
- *
- * ```tsx
- *
- *   <Switch size="sm" />
- *
- * ```
- */
-declare const Switch: React__default.ForwardRefExoticComponent<Switch$1.RootProps & {
-    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 textareaRecipe: _chakra_ui_react.RecipeDefinition<{
-    variant: {
-        core: {
-            backgroundColor?: "transparent" | undefined;
-            outline?: "1px solid" | undefined;
-            outlineColor?: "core.outline" | undefined;
-            _hover?: {
-                outline: "2px solid";
-                outlineColor: "core.outline.hover";
-                _active: {
-                    outline: "1px solid";
-                    outlineColor: "outline.disabled";
-                    backgroundColor: "core.surface.active";
-                };
-            } | undefined;
-            _focus?: {
-                outline: "2px solid";
-                outlineColor: "outline.focus";
-            } | undefined;
-        };
-        floating: {
-            boxShadow?: "sm" | undefined;
-            bg?: "floating.surface" | undefined;
-            outline?: "1px solid" | undefined;
-            outlineColor?: "floating.outline" | undefined;
-            _hover?: {
-                outline: "1px solid";
-                outlineColor: "floating.outline.hover";
-            } | undefined;
-            _active?: {
-                outline: "1px solid";
-                outlineColor: "floating.outline.active";
-                backgroundColor: "floating.surface.active";
-            } | undefined;
-            focus?: {
-                outline: string;
-                outlineColor: string;
-            } | undefined;
-        };
-    };
-}>;
-
-type TextareaVariants = RecipeVariantProps<typeof textareaRecipe>;
-type TextareaProps = Exclude<TextareaProps$1, "size" | "colorPalette"> & FieldProps & PropsWithChildren<TextareaVariants> & {
-    label: ReactNode;
-};
-/**
- *
- * A simple Textarea component:
- *
- * ```tsx
- *   <Textarea label="Description" />
- * ```
- *
- * Textarea has two variants core, and floating.
- *
- */
-declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps$1 & Omit<_chakra_ui_react.FieldRootProps, "label"> & {
-    children?: ReactNode | undefined;
-} & {
-    label?: React__default.ReactNode;
-    helperText?: React__default.ReactNode;
-    errorText?: React__default.ReactNode;
-} & {
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | undefined>;
-} & {
-    label: ReactNode;
-} & React__default.RefAttributes<HTMLTextAreaElement>>;
-
 declare const selectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "indicator" | "label" | "control" | "itemText" | "itemDescription" | "trigger" | "indicatorGroup" | "selectContent" | "itemGroup" | "itemGroupLabel" | "valueText", {
     variant: {
         core: {
@@ -1826,16 +1822,166 @@ declare const SelectLabel: React$1.ForwardRefExoticComponent<Select$1.LabelProps
 declare const SelectItemText: React$1.ForwardRefExoticComponent<Select$1.ItemTextProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectRoot: Select$1.RootComponent;
 
-declare const Separator: React__default.ForwardRefExoticComponent<SeparatorProps & {
-    variant?: _chakra_ui_react.ConditionalValue<"dashed" | "solid" | undefined>;
-    size?: _chakra_ui_react.ConditionalValue<"sm" | "md" | "lg" | undefined>;
-    orientation?: _chakra_ui_react.ConditionalValue<"horizontal" | "vertical" | undefined>;
+declare const switchSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "label" | "control" | "thumb", {
+    size: {
+        sm: {
+            root: {
+                "--switch-width": "3.3rem";
+                "--switch-height": "1.5rem";
+            };
+            control: {
+                borderRadius: "lg";
+                padding: "0.12rem";
+            };
+        };
+        md: {
+            root: {
+                "--switch-width": "4.1rem";
+                "--switch-height": "1.8rem";
+            };
+            control: {
+                borderRadius: "xl";
+                padding: number;
+            };
+        };
+        lg: {
+            root: {
+                "--switch-width": "4.8rem";
+                "--switch-height": "2.25rem";
+            };
+            control: {
+                borderRadius: "2xl";
+                padding: number;
+            };
+        };
+    };
+}>;
+
+type SwitchVariants = RecipeVariantProps<typeof switchSlotRecipe>;
+type SwitchProps = Exclude<Switch$1.RootProps, "size" | "colorPalette"> & PropsWithChildren<SwitchVariants> & {
+    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;
+};
+/**
+ * A switch lets you toggle between on and off, yes and no. It's an alternative to a checkbox.
+ *
+ * You can set a label inside of the Switch component by defining the `label` prop.
+ *
+ * ```tsx
+ * <Switch label="This is a label"/>
+ * ```
+ *
+ * Switches are available in three different sizes - `sm`, `md` and `lg`.
+ *
+ * ```tsx
+ *
+ *   <Switch size="sm" />
+ *
+ * ```
+ */
+declare const Switch: React__default.ForwardRefExoticComponent<Switch$1.RootProps & {
+    size?: ConditionalValue<"sm" | "md" | "lg" | undefined>;
 } & {
     children?: React__default.ReactNode | undefined;
 } & {
-    size?: "sm" | "md" | "lg";
-    variant?: "solid" | "dashed";
-} & React__default.RefAttributes<HTMLDivElement>>;
+    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 textareaRecipe: _chakra_ui_react.RecipeDefinition<{
+    variant: {
+        core: {
+            backgroundColor?: "transparent" | undefined;
+            outline?: "1px solid" | undefined;
+            outlineColor?: "core.outline" | undefined;
+            _hover?: {
+                outline: "2px solid";
+                outlineColor: "core.outline.hover";
+                _active: {
+                    outline: "1px solid";
+                    outlineColor: "outline.disabled";
+                    backgroundColor: "core.surface.active";
+                };
+            } | undefined;
+            _focus?: {
+                outline: "2px solid";
+                outlineColor: "outline.focus";
+            } | undefined;
+        };
+        floating: {
+            boxShadow?: "sm" | undefined;
+            bg?: "floating.surface" | undefined;
+            outline?: "1px solid" | undefined;
+            outlineColor?: "floating.outline" | undefined;
+            _hover?: {
+                outline: "1px solid";
+                outlineColor: "floating.outline.hover";
+            } | undefined;
+            _active?: {
+                outline: "1px solid";
+                outlineColor: "floating.outline.active";
+                backgroundColor: "floating.surface.active";
+            } | undefined;
+            focus?: {
+                outline: string;
+                outlineColor: string;
+            } | undefined;
+        };
+    };
+}>;
+
+type TextareaVariants = RecipeVariantProps<typeof textareaRecipe>;
+type TextareaProps = Exclude<TextareaProps$1, "size" | "colorPalette"> & FieldProps & PropsWithChildren<TextareaVariants> & {
+    label: ReactNode;
+};
+/**
+ *
+ * A simple Textarea component:
+ *
+ * ```tsx
+ *   <Textarea label="Description" />
+ * ```
+ *
+ * Textarea has two variants core, and floating.
+ *
+ */
+declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps$1 & Omit<_chakra_ui_react.FieldRootProps, "label"> & {
+    children?: ReactNode | undefined;
+} & {
+    label?: React__default.ReactNode;
+    helperText?: React__default.ReactNode;
+    errorText?: React__default.ReactNode;
+} & {
+    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | undefined>;
+} & {
+    label: ReactNode;
+} & React__default.RefAttributes<HTMLTextAreaElement>>;
+
+declare const PressableCard: React__default.ForwardRefExoticComponent<{
+    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | "accent" | undefined>;
+} & ButtonProps$1 & React__default.RefAttributes<HTMLDivElement>>;
 
 declare const RadioCard: React__default.ForwardRefExoticComponent<RadioCard$1.ItemProps & {
     variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | undefined>;
@@ -1853,6 +1999,17 @@ declare const RadioCardGroup: React__default.ForwardRefExoticComponent<{
 } & React__default.RefAttributes<HTMLDivElement>>;
 declare const RadioCardLabel: React__default.ForwardRefExoticComponent<RadioCard$1.LabelProps & React__default.RefAttributes<HTMLDivElement>>;
 
+declare const Separator: React__default.ForwardRefExoticComponent<SeparatorProps & {
+    variant?: _chakra_ui_react.ConditionalValue<"dashed" | "solid" | undefined>;
+    size?: _chakra_ui_react.ConditionalValue<"sm" | "md" | "lg" | undefined>;
+    orientation?: _chakra_ui_react.ConditionalValue<"horizontal" | "vertical" | undefined>;
+} & {
+    children?: React__default.ReactNode | undefined;
+} & {
+    size?: "sm" | "md" | "lg";
+    variant?: "solid" | "dashed";
+} & React__default.RefAttributes<HTMLDivElement>>;
+
 declare const staticCardRecipe: _chakra_ui_react.RecipeDefinition<{
     colorPalette: {
         white: {
@@ -1867,55 +2024,28 @@ declare const staticCardRecipe: _chakra_ui_react.RecipeDefinition<{
         };
         darkYellow: {
             backgroundColor: "surface.color.yellow";
-        };
-        red: {
-            backgroundColor: "surface.color.red";
-        };
-        green: {
-            backgroundColor: "surface.color.green";
-        };
-        blue: {
-            backgroundColor: "surface.color.blue";
-        };
-        orange: {
-            backgroundColor: "surface.color.orange";
-        };
-    };
-}>;
-
-type StaticCardProps = RecipeVariantProps<typeof staticCardRecipe> & BoxProps;
-declare const StaticCard: React__default.ForwardRefExoticComponent<{
-    colorPalette?: _chakra_ui_react.ConditionalValue<"white" | "blue" | "green" | "grey" | "orange" | "red" | "yellow" | "darkYellow" | undefined>;
-} & BoxProps & React__default.RefAttributes<HTMLDivElement>>;
-
-declare const PressableCard: React__default.ForwardRefExoticComponent<{
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | "accent" | undefined>;
-} & ButtonProps$1 & React__default.RefAttributes<HTMLDivElement>>;
-
-type Variant$1 = "local-train" | "region-train" | "region-express-train" | "long-distance-train" | "airport-express-train" | "vy-bus" | "local-bus" | "ferry" | "subway" | "tram" | "alt-transport" | "walk";
-type Size = "sm" | "md" | "lg";
-type TagProps = VariantProps$1 & {
-    size: Size;
-    title: string;
-    description?: string;
-};
-type DefaultVariantProps$1 = {
-    variant: Variant$1;
-};
-type CustomVariantProps = {
-    variant: "custom";
-    /** When variant="custom", the foreground color of the tag */
-    foregroundColor: string;
-    /** When variant="custom", the background color of the tag */
-    backgroundColor: string;
-    /** When variant="custom", this is the icon you want to display.
-     * It should be one of the other variants
-     */
-    customIconVariant: Variant$1;
-};
-type VariantProps$1 = DefaultVariantProps$1 | CustomVariantProps;
+        };
+        red: {
+            backgroundColor: "surface.color.red";
+        };
+        green: {
+            backgroundColor: "surface.color.green";
+        };
+        blue: {
+            backgroundColor: "surface.color.blue";
+        };
+        orange: {
+            backgroundColor: "surface.color.orange";
+        };
+    };
+}>;
+
+type StaticCardProps = RecipeVariantProps<typeof staticCardRecipe> & BoxProps;
+declare const StaticCard: React__default.ForwardRefExoticComponent<{
+    colorPalette?: _chakra_ui_react.ConditionalValue<"white" | "blue" | "green" | "grey" | "orange" | "red" | "yellow" | "darkYellow" | undefined>;
+} & BoxProps & React__default.RefAttributes<HTMLDivElement>>;
 
-declare const infoTagSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"title" | "description" | "icon" | "iconContainer" | "container" | "textContainer" | "walk", {
+declare const infoTagSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" | "title" | "description" | "iconContainer" | "container" | "textContainer" | "walk", {
     variant: {
         walk: {
             iconContainer: {
@@ -1965,6 +2095,29 @@ declare const infoTagSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"title" |
     };
 }>;
 
+type Variant$1 = "local-train" | "region-train" | "region-express-train" | "long-distance-train" | "airport-express-train" | "vy-bus" | "local-bus" | "ferry" | "subway" | "tram" | "alt-transport" | "walk";
+type Size = "sm" | "md" | "lg";
+type TagProps = VariantProps$1 & {
+    size: Size;
+    title: string;
+    description?: string;
+};
+type DefaultVariantProps$1 = {
+    variant: Variant$1;
+};
+type CustomVariantProps = {
+    variant: "custom";
+    /** When variant="custom", the foreground color of the tag */
+    foregroundColor: string;
+    /** When variant="custom", the background color of the tag */
+    backgroundColor: string;
+    /** When variant="custom", this is the icon you want to display.
+     * It should be one of the other variants
+     */
+    customIconVariant: Variant$1;
+};
+type VariantProps$1 = DefaultVariantProps$1 | CustomVariantProps;
+
 type InfoTagVariantProps = RecipeVariantProps<typeof infoTagSlotRecipe>;
 type InfoTagProps = TagProps & PropsWithChildren<InfoTagVariantProps>;
 /**
@@ -2001,7 +2154,7 @@ type InfoTagProps = TagProps & PropsWithChildren<InfoTagVariantProps>;
  */
 declare const InfoTag: ({ variant, size, title, description, ...customProps }: InfoTagProps) => React__default.JSX.Element;
 
-declare const lineIconSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "title" | "icon" | "iconContainer" | "desc", {
+declare const lineIconSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" | "root" | "title" | "iconContainer" | "desc", {
     variant: {
         "local-train": {
             iconContainer: {
@@ -2155,7 +2308,7 @@ type LineIconProps = Exclude<BoxProps, "variant"> & VariantProps & PropsWithChil
  */
 declare const LineIcon: React__default.ForwardRefExoticComponent<LineIconProps & React__default.RefAttributes<HTMLDivElement>>;
 
-declare const travelTagSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"title" | "description" | "icon" | "iconContainer" | "container" | "textContainer" | "deviationIcon", {
+declare const travelTagSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" | "title" | "description" | "iconContainer" | "container" | "textContainer" | "deviationIcon", {
     deviationLevel: {
         critical: {
             container: {
@@ -2768,13 +2921,6 @@ declare const Skeleton: React$1.ForwardRefExoticComponent<SkeletonProps$1 & {
     noOfLines?: number;
 } & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const SvgBox: _chakra_ui_react.ChakraComponent<"svg", {}>;
-type VyLogoProps = BoxProps & React__default.SVGProps<SVGSVGElement>;
-declare const VyLogo: React__default.ForwardRefExoticComponent<Omit<VyLogoProps, "ref"> & React__default.RefAttributes<SVGSVGElement>>;
-
-type VyLogoPrideProps = BoxProps;
-declare const VyLogoPride: React__default.ForwardRefExoticComponent<BoxProps & React__default.RefAttributes<SVGSVGElement>>;
-
 type CargonetLogoProps = {
     /** The color of the logo
      *
@@ -2785,7 +2931,14 @@ type CargonetLogoProps = {
 };
 declare const CargonetLogo: React__default.ForwardRefExoticComponent<CargonetLogoProps & React__default.RefAttributes<SVGSVGElement>>;
 
-declare const mediaControllerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "icon", {
+declare const SvgBox: _chakra_ui_react.ChakraComponent<"svg", {}>;
+type VyLogoProps = BoxProps & React__default.SVGProps<SVGSVGElement>;
+declare const VyLogo: React__default.ForwardRefExoticComponent<Omit<VyLogoProps, "ref"> & React__default.RefAttributes<SVGSVGElement>>;
+
+type VyLogoPrideProps = BoxProps;
+declare const VyLogoPride: React__default.ForwardRefExoticComponent<BoxProps & React__default.RefAttributes<SVGSVGElement>>;
+
+declare const mediaControllerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" | "root", {
     variant: {
         play: {
             root: {
@@ -2913,175 +3066,6 @@ declare const SkipButton: React__default.ForwardRefExoticComponent<BoxProps & {
     size: "sm" | "lg";
 } & React__default.RefAttributes<HTMLButtonElement>>;
 
-declare const drawerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"title" | "content" | "description" | "body" | "footer" | "header" | "backdrop" | "positioner" | "closeTrigger", {
-    size: {
-        xs: {
-            content: {
-                width: "15rem";
-            };
-        };
-        sm: {
-            content: {
-                width: "25rem";
-            };
-        };
-        md: {
-            content: {
-                width: "40rem";
-            };
-        };
-        lg: {
-            content: {
-                width: "56rem";
-            };
-        };
-        xl: {
-            content: {
-                width: "68rem";
-            };
-        };
-        full: {
-            content: {
-                width: "100vw";
-                height: "100vh";
-                borderRadius: "0 !important";
-                paddingBottom: "4";
-            };
-            closeTrigger: {
-                position: "relative";
-            };
-            title: {
-                textAlign: "center";
-            };
-        };
-    };
-    placement: {
-        start: {
-            positioner: {
-                justifyContent: "flex-start";
-            };
-            content: {
-                paddingTop: "4";
-                _open: {
-                    animationName: {
-                        base: "slide-from-left-full, fade-in";
-                        _rtl: "slide-from-right-full, fade-in";
-                    };
-                };
-                _closed: {
-                    animationName: {
-                        base: "slide-to-left-full, fade-out";
-                        _rtl: "slide-to-right-full, fade-out";
-                    };
-                };
-            };
-        };
-        end: {
-            positioner: {
-                justifyContent: "flex-end";
-            };
-            content: {
-                paddingTop: "4";
-                _open: {
-                    animationName: {
-                        base: "slide-from-right-full, fade-in";
-                        _rtl: "slide-from-left-full, fade-in";
-                    };
-                };
-                _closed: {
-                    animationName: {
-                        base: "slide-to-right-full, fade-out";
-                        _rtl: "slide-to-right-full, fade-out";
-                    };
-                };
-            };
-        };
-        top: {
-            positioner: {
-                alignItems: "flex-start";
-            };
-            content: {
-                maxW: "100%";
-                marginX: "auto";
-                paddingTop: "4";
-                borderBottomRadius: "lg";
-                _open: {
-                    animationName: "slide-from-top-full, fade-in";
-                };
-                _closed: {
-                    animationName: "slide-to-top-full, fade-out";
-                };
-            };
-        };
-        bottom: {
-            positioner: {
-                alignItems: "flex-end";
-            };
-            content: {
-                maxW: "100%";
-                marginX: "auto";
-                paddingBottom: "4";
-                borderTopRadius: "lg";
-                _open: {
-                    animationName: "slide-from-bottom-full, fade-in";
-                };
-                _closed: {
-                    animationName: "slide-to-bottom-full, fade-out";
-                };
-            };
-        };
-    };
-}>;
-
-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__default.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__default.ReactNode | undefined;
-} & {
-    children: React__default.ReactNode;
-    portalled?: boolean;
-    portalRef?: React__default.RefObject<HTMLElement>;
-} & React__default.RefAttributes<HTMLDivElement>>;
-declare const CloseDrawerLine: React__default.ForwardRefExoticComponent<React__default.RefAttributes<HTMLButtonElement>>;
-declare const DrawerCloseTrigger: React__default.ForwardRefExoticComponent<Drawer$1.CloseTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
-declare const DrawerBackTrigger: React__default.ForwardRefExoticComponent<Drawer$1.CloseTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
-declare const DrawerFullScreenHeader: React__default.ForwardRefExoticComponent<Drawer$1.HeaderProps & {
-    backTrigger?: boolean;
-    title?: string;
-} & React__default.RefAttributes<HTMLDivElement>>;
-declare const Drawer: (props: DrawerProps) => React__default.JSX.Element;
-declare const DrawerTrigger: React__default.ForwardRefExoticComponent<Drawer$1.TriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
-declare const DrawerFooter: React__default.ForwardRefExoticComponent<Drawer$1.FooterProps & React__default.RefAttributes<HTMLDivElement>>;
-declare const DrawerBody: React__default.ForwardRefExoticComponent<Drawer$1.BodyProps & React__default.RefAttributes<HTMLDivElement>>;
-declare const DrawerBackdrop: React__default.ForwardRefExoticComponent<Drawer$1.BackdropProps & React__default.RefAttributes<HTMLDivElement>>;
-declare const DrawerTitle: React__default.ForwardRefExoticComponent<Drawer$1.TitleProps & React__default.RefAttributes<HTMLDivElement>>;
-declare const DrawerActionTrigger: React__default.ForwardRefExoticComponent<Drawer$1.ActionTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
-declare const DrawerHeader: React__default.ForwardRefExoticComponent<Drawer$1.HeaderProps & React__default.RefAttributes<HTMLDivElement>>;
-
-interface DialogContentProps extends Dialog.ContentProps {
-    portalled?: boolean;
-    portalRef?: React$1.RefObject<HTMLElement>;
-    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 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>>;
-declare const DialogBody: React$1.ForwardRefExoticComponent<Dialog.BodyProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const DialogBackdrop: React$1.ForwardRefExoticComponent<Dialog.BackdropProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const DialogTitle: React$1.ForwardRefExoticComponent<Dialog.TitleProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const DialogDescription: React$1.ForwardRefExoticComponent<Dialog.DescriptionProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const DialogTrigger: React$1.ForwardRefExoticComponent<Dialog.TriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const DialogActionTrigger: React$1.ForwardRefExoticComponent<Dialog.ActionTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-
 type NudgeProps = {
     introducedDate: string;
 } & PopoverRootProps;
@@ -3108,6 +3092,13 @@ declare const PaginationPrevTrigger: React$1.ForwardRefExoticComponent<Paginatio
 declare const PaginationNextTrigger: React$1.ForwardRefExoticComponent<Pagination$1.NextTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const PaginationItems: (props: React$1.HTMLAttributes<HTMLElement> & {}) => React$1.JSX.Element;
 
+declare const Popover: React__default.FC<Popover$1.RootProps>;
+declare const PopoverTrigger: React__default.ForwardRefExoticComponent<Popover$1.TriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
+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 progressIndicatorRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "container" | "circle" | "progressDot", _chakra_ui_react.SlotRecipeVariantRecord<"root" | "container" | "circle" | "progressDot">>;
 
 type ProgressIndicatorVariantProps = RecipeVariantProps<typeof progressIndicatorRecipe>;
@@ -3139,6 +3130,15 @@ declare const ProgressIndicator: React__default.ForwardRefExoticComponent<BoxPro
     colorPalette?: string;
 } & React__default.RefAttributes<HTMLDivElement>>;
 
+/** A string of CSS that should be injected in the global CSS space */
+declare const fontFaces: string;
+
+declare enum Brand {
+    VyDigital = "VyDigital",
+    VyUtvikling = "VyUtvikling",
+    CargoNet = "CargoNet"
+}
+
 type SporProviderProps = Omit<ChakraProviderProps, "value"> & {
     language?: Language;
     brand?: Brand;
@@ -3674,6 +3674,13 @@ declare const Table: React__default.ForwardRefExoticComponent<Table$1.RootProps
     colorPalette?: "grey" | "green" | "white";
 } & React__default.RefAttributes<HTMLTableElement>>;
 
+declare const themes: {
+    VyDigital: _chakra_ui_react.SystemContext;
+    CargoNet: _chakra_ui_react.SystemContext;
+    VyUtvikling: _chakra_ui_react.SystemContext;
+};
+declare const system: _chakra_ui_react.SystemContext;
+
 type Variant = "info" | "success" | "error";
 type ToastProps = {
     duration?: number;
@@ -3767,11 +3774,4 @@ declare const Text: React__default.ForwardRefExoticComponent<Omit<TextProps$1, "
  **/
 declare function slugify(text: string | string[], maxLength?: number): string;
 
-declare const Popover: React__default.FC<Popover$1.RootProps>;
-declare const PopoverTrigger: React__default.ForwardRefExoticComponent<Popover$1.TriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
-type PopoverProps = Popover$1.ContentProps & React__default.RefAttributes<HTMLDivElement> & {
-    showCloseButton?: boolean;
-};
-declare const PopoverContent: React__default.ForwardRefExoticComponent<Omit<PopoverProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
-
 export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, type AlertProps, AttachedInputs, type AttachedInputsProps, Badge, type BadgeProps, Brand, Breadcrumb, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonVariantProps, CardSelect, CardSelectContent, CardSelectTrigger, type CardSelectTriggerProps, CargonetLogo, type CargonetLogoProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, ChoiceChip, type ChoiceChipProps, Clipboard, ClipboardButton, CloseButton, type CloseButtonProps, CloseDrawerLine, Code, ColorInlineLoader, type ColorInlineLoaderProps, type ColorMode, ColorModeButton, ColorModeIcon, ColorModeProvider, type ColorModeProviderProps, ColorSpinner, type ColorSpinnerProps, Combobox, type ComboboxProps, ContentLoader, type ContentLoaderProps, type CountryCodeAndPhoneNumber, DarkFullScreenLoader, DarkInlineLoader, type DarkInlineLoaderProps, DarkSpinner, type DarkSpinnerProps, DatePicker, type DatePickerVariantProps, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, type GroupVariantProps, Heading, type HeadingProps, IconButton, type IconButtonProps, InfoTag, type InfoTagProps, Input, type InputProps, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, type LightInlineLoaderProps, LightSpinner, type LightSpinnerProps, LineIcon, type LineIconProps, type LinkProps, List, ListBox, ListIndicator, ListItem, type MediaControllerVariantProps, NativeSelect, type NativeSelectdProps, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, type NudgeProps, NudgeTrigger, NudgeWizardStep, NumericStepper, type NumericStepperProps, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, type PasswordInputProps, type PasswordVisibilityProps, PhoneNumberInput, PlayPauseButton, Popover, PopoverContent, type PopoverProps, PopoverTrigger, PressableCard, ProgressBar, type ProgressBarProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorVariantProps, ProgressLoader, type ProgressLoaderProps, type ProgressLoaderVariantProps, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, type RadioProps, SearchInput, type SearchInputProps, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, type SelectProps, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, SkipButton, type SpinnerProps, SporProvider, StaticCard, type StaticCardProps, Stepper, StepperStep, type StepperVariantProps, SvgBox, Switch, type SwitchProps, Table, type TableProps, Tabs, TabsContent, TabsIndicator, TabsList, type TabsProps, TabsTrigger, Text, TextLink, type TextProps, Textarea, type TextareaProps, TimePicker, type TranslationObject, type Translations, TravelTag, type TravelTagProps, type UseColorModeReturn, VyLogo, VyLogoPride, type VyLogoPrideProps, createTexts, createToast, fontFaces, slugify, system, themes, useColorMode, useColorModeValue, useTranslation };