@vygruppen/spor-react 13.2.0 → 13.3.0

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import { Accordion as Accordion$1, defineRecipe, chakra, Code as Code$1, Clipboard as Clipboard$1, RadioCard as RadioCard$1, defineStyle, Field, Dialog, createContext as createContext$1, Drawer as Drawer$1, Combobox, Fieldset as Fieldset$1, createListCollection, Select as Select$1, List as List$1, Popover as Popover$1, createToaster, Tabs as Tabs$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, Tooltip as Tooltip$1, IconButton as IconButton$1, defineConfig, Center, Box, ClientOnly, VisuallyHidden, useSlotRecipe, Stack, HStack, Progress, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, Separator as Separator$1, useFieldContext, PopoverAnchor, Portal, useDialogContext, InputElement, Input as Input$1, useFilter, useListCollection, useCombobox, useComboboxContext, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, Tag, ListItem, Menu as Menu$1, useMenuContext as useMenuContext$1, NativeSelect as NativeSelect$1, useControllableState, RadioGroup as RadioGroup$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, Link, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, ChakraProvider, Table as Table$1, Toaster as Toaster$1, Toast } from '@chakra-ui/react';
+import { Accordion as Accordion$1, defineRecipe, chakra, Code as Code$1, Clipboard as Clipboard$1, RadioCard as RadioCard$1, defineStyle, Field, Dialog, createContext as createContext$1, Drawer as Drawer$1, List as List$1, Combobox, Fieldset as Fieldset$1, createListCollection, Select as Select$1, Popover as Popover$1, createToaster, Tabs as Tabs$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, Tooltip as Tooltip$1, IconButton as IconButton$1, defineConfig, Center, Box, ClientOnly, VisuallyHidden, useSlotRecipe, Stack, HStack, Progress, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, Separator as Separator$1, useFieldContext, PopoverAnchor, Portal, useDialogContext, Link, InputElement, Input as Input$1, useFilter, useListCollection, useCombobox, useComboboxContext, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, Tag, ListItem as ListItem$1, Menu as Menu$1, useMenuContext as useMenuContext$1, NativeSelect as NativeSelect$1, useControllableState, RadioGroup as RadioGroup$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, ChakraProvider, Table as Table$1, Toaster as Toaster$1, Toast } from '@chakra-ui/react';
 export { AspectRatio, Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, ClientOnly, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Icon, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableCaption, TableCell, TableColumn, TableColumnGroup, TableFooter, TableHeader, TableRoot, TableRow, 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 spor_icon_react_star from '@vygruppen/spor-icon-react';
-import { DropdownDownFill24Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, DropdownDownFill18Icon, ServiceFill24Icon, WarningFill24Icon, DropdownRightFill18Icon, CalendarOutline24Icon, DropdownLeftFill18Icon, ArrowLeftFill24Icon, ChangeDirectionOutline24Icon, CheckmarkFill18Icon, CloseOutline24Icon, SearchOutline24Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, ArrowUpFill18Icon, ArrowDownFill18Icon, ChangeDirectionFill18Icon, CopyOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill24Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, InformationFill24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, QuestionFill24Icon, ErrorOutline24Icon, SuccessFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon } from '@vygruppen/spor-icon-react';
+import { DropdownDownFill24Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, DropdownDownFill18Icon, ServiceFill24Icon, WarningFill24Icon, DropdownRightFill18Icon, CalendarOutline24Icon, DropdownLeftFill18Icon, ArrowLeftFill24Icon, ErrorFill24Icon, ChangeDirectionOutline24Icon, CheckmarkFill18Icon, CloseOutline24Icon, SearchOutline24Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, ArrowUpFill18Icon, ArrowDownFill18Icon, ChangeDirectionFill18Icon, CopyOutline18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill24Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, InformationFill24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, QuestionFill24Icon, ErrorOutline24Icon, SuccessFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon } from '@vygruppen/spor-icon-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React13 from 'react';
-import React13__default, { createContext, useContext, useId, cloneElement, isValidElement, useRef, useEffect, useImperativeHandle, useState, useLayoutEffect, useMemo } from 'react';
+import * as React14 from 'react';
+import React14__default, { createContext, useContext, useId, cloneElement, isValidElement, useRef, useEffect, useImperativeHandle, useState, useLayoutEffect, useMemo } from 'react';
 import { spinnerColorData, inlineLoaderColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerLightData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData } from '@vygruppen/spor-loader';
 import { useLottie } from 'lottie-react';
 import { useInterval } from 'usehooks-ts';
@@ -208,8 +208,8 @@ function useTranslation() {
   };
   return { t, language };
 }
-function createTexts(texts27) {
-  return texts27;
+function createTexts(texts28) {
+  return texts28;
 }
 function Lottie({ animationData }) {
   const { View } = useLottie({ animationData });
@@ -732,25 +732,41 @@ var badgeRecipie = defineRecipe({
         "& svg": {
           color: "icon.critical"
         }
+      },
+      brightRed: {
+        backgroundColor: {
+          _light: "brightRed",
+          _dark: "brightRed"
+        },
+        color: {
+          _light: "pink",
+          _dark: "pink"
+        },
+        "& svg": {
+          color: {
+            _light: "pink",
+            _dark: "pink"
+          }
+        }
       }
     },
     size: {
       sm: {
-        fontSize: "desktop.xs",
+        fontSize: "desktop.2xs",
         paddingX: "0.5",
         paddingY: "0",
         fontWeight: "normal",
         borderRadius: "xxs"
       },
       md: {
-        fontSize: "desktop.xs",
+        fontSize: "desktop.2xs",
         paddingX: "1",
         paddingY: "0.5",
         fontWeight: "bold",
         borderRadius: "xs"
       },
       lg: {
-        fontSize: "desktop.sm",
+        fontSize: "desktop.xs",
         paddingX: "1.5",
         paddingY: "0.5",
         fontWeight: "bold",
@@ -1143,11 +1159,11 @@ var FloatingActionButton = ({
   );
 };
 var useScrollDirection = () => {
-  const [scrollDirection, setScrollDirection] = React13__default.useState(null);
-  const lastScrollPosition = React13__default.useRef(
+  const [scrollDirection, setScrollDirection] = React14__default.useState(null);
+  const lastScrollPosition = React14__default.useRef(
     globalThis.window === void 0 ? 0 : window.scrollY
   );
-  React13__default.useEffect(() => {
+  React14__default.useEffect(() => {
     const onScroll = () => {
       const delta = window.scrollY - lastScrollPosition.current;
       if (delta === 0) {
@@ -1224,15 +1240,27 @@ var Alert = ({
     children
   } = props;
   const { open, onClose } = useDisclosure({ defaultOpen: true });
+  const { t } = useTranslation();
   const handleAlertClose = () => {
     onClose();
     onAlertClose == null ? void 0 : onAlertClose();
   };
   const recipe = useSlotRecipe({ key: "alert" });
   const styles = recipe({ variant: props.variant });
+  const getAriaLabelText = () => {
+    const variant = props.variant;
+    if (variant === "important" || variant === "alt")
+      return texts5.ariaLabelAlertWarning;
+    if (variant === "error" || variant === "error-secondary")
+      return texts5.ariaLabelAlertError;
+    if (variant === "success")
+      return texts5.ariaLabelAlertSuccess;
+    return texts5.ariaLabelAlertInformative;
+  };
+  const ariaLabel = t(getAriaLabelText());
   if (!open)
     return null;
-  return /* @__PURE__ */ jsxs(Alert$1.Root, { ref, ...props, children: [
+  return /* @__PURE__ */ jsxs(Alert$1.Root, { ref, role: "alert", "aria-label": ariaLabel, ...props, children: [
     /* @__PURE__ */ jsxs(
       Alert$1.Content,
       {
@@ -1277,6 +1305,32 @@ var Alert = ({
     )
   ] });
 };
+var texts5 = createTexts({
+  ariaLabelAlertInformative: {
+    en: "Announcement",
+    nb: "Kunngj\xF8ring",
+    nn: "Kunngjering",
+    sv: "Meddelande"
+  },
+  ariaLabelAlertWarning: {
+    en: "Warning",
+    nb: "Advarsel",
+    nn: "Varsel",
+    sv: "Varning"
+  },
+  ariaLabelAlertError: {
+    en: "Error",
+    nb: "Feil",
+    nn: "Feil",
+    sv: "Fel"
+  },
+  ariaLabelAlertSuccess: {
+    en: "Success",
+    nb: "Suksess",
+    nn: "Suksess",
+    sv: "Framg\xE5ng"
+  }
+});
 var ExpandableAlert = ({
   ref,
   ...props
@@ -1377,7 +1431,7 @@ var ServiceAlert = ({
             maxWidth: contentWidth,
             children: [
               /* @__PURE__ */ jsxs(HStack, { as: headingLevel, alignItems: "center", gap: "1", children: [
-                variant === "service" ? /* @__PURE__ */ jsx(ServiceFill24Icon, { "aria-label": t(texts5.service) }) : /* @__PURE__ */ jsx(WarningFill24Icon, { "aria-label": t(texts5["global-deviation"]) }),
+                variant === "service" ? /* @__PURE__ */ jsx(ServiceFill24Icon, { "aria-label": t(texts6.service) }) : /* @__PURE__ */ jsx(WarningFill24Icon, { "aria-label": t(texts6["global-deviation"]) }),
                 /* @__PURE__ */ jsx(
                   Span,
                   {
@@ -1394,7 +1448,7 @@ var ServiceAlert = ({
                 )
               ] }),
               /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: [0.5, null, null, 1], children: [
-                notification && /* @__PURE__ */ jsx(Text, { css: styles.notificationText, children: t(texts5.notification(notification)) }),
+                notification && /* @__PURE__ */ jsx(Text, { css: styles.notificationText, children: t(texts6.notification(notification)) }),
                 /* @__PURE__ */ jsx(Accordion$1.ItemIndicator, { children: /* @__PURE__ */ jsx(DropdownDownFill24Icon, { color: "icon.brand" }) })
               ] })
             ]
@@ -1405,7 +1459,7 @@ var ServiceAlert = ({
     }
   );
 };
-var texts5 = createTexts({
+var texts6 = createTexts({
   notification: (notification) => {
     const numberNotification = Number(notification);
     return {
@@ -1434,12 +1488,12 @@ var Breadcrumb = ({
   css,
   ...props
 }) => {
-  const validChildren = React13__default.Children.toArray(children).filter(
-    (element) => React13__default.isValidElement(element)
+  const validChildren = React14__default.Children.toArray(children).filter(
+    (element) => React14__default.isValidElement(element)
   );
   return /* @__PURE__ */ jsx(Breadcrumb$1.Root, { ref, css, ...props, children: /* @__PURE__ */ jsx(Breadcrumb$1.List, { "data-part": "list", children: validChildren.map((child, index) => {
     const isLast = index === validChildren.length - 1;
-    return /* @__PURE__ */ jsxs(React13__default.Fragment, { children: [
+    return /* @__PURE__ */ jsxs(React14__default.Fragment, { children: [
       /* @__PURE__ */ jsx(Breadcrumb$1.Item, { "data-part": "item", children: child }),
       !isLast && /* @__PURE__ */ jsx(
         Breadcrumb$1.Separator,
@@ -1865,7 +1919,7 @@ function CalendarHeader({ dualView }) {
             variant: "ghost",
             marginLeft: 1,
             disabled: prevButtonProps.isDisabled,
-            "aria-label": t(texts6.previousMonth),
+            "aria-label": t(texts7.previousMonth),
             icon: /* @__PURE__ */ jsx(icons_exports.DropdownLeftFill24Icon, {})
           }
         ),
@@ -1907,7 +1961,7 @@ function CalendarHeader({ dualView }) {
             marginRight: 1,
             variant: "ghost",
             disabled: nextButtonProps.isDisabled,
-            "aria-label": t(texts6.nextMonth),
+            "aria-label": t(texts7.nextMonth),
             icon: /* @__PURE__ */ jsx(icons_exports.DropdownRightFill24Icon, {})
           }
         )
@@ -1915,7 +1969,7 @@ function CalendarHeader({ dualView }) {
     }
   );
 }
-var texts6 = createTexts({
+var texts7 = createTexts({
   previousMonth: {
     nb: "Forrige m\xE5ned",
     nn: "F\xF8rre m\xE5nad",
@@ -2110,13 +2164,13 @@ var labelStyles = defineStyle({
   }
 });
 function renderLabelWithIndicator(label, labelAsChild) {
-  if (!labelAsChild || !React13.isValidElement(label)) {
+  if (!labelAsChild || !React14.isValidElement(label)) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       label,
       /* @__PURE__ */ jsx(Field.RequiredIndicator, {})
     ] });
   }
-  return React13.cloneElement(
+  return React14.cloneElement(
     label,
     {},
     /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -2143,11 +2197,12 @@ var Field3 = ({
     id,
     shouldFloat,
     labelAsChild,
+    gap,
     ...rest
   } = props;
   const recipe = useSlotRecipe({ key: "field" });
   const styles = recipe();
-  return /* @__PURE__ */ jsxs(Stack, { gap: "2", ref, width: "100%", ...rest, children: [
+  return /* @__PURE__ */ jsxs(Stack, { ref, width: "100%", ...rest, children: [
     /* @__PURE__ */ jsxs(
       Field.Root,
       {
@@ -2158,6 +2213,7 @@ var Field3 = ({
         css: styles.root,
         direction,
         id,
+        gap,
         children: [
           label && !floatingLabel && /* @__PURE__ */ jsx(Label, { asChild: labelAsChild, "aria-hidden": true, children: renderLabelWithIndicator(label, labelAsChild) }),
           children,
@@ -2400,7 +2456,7 @@ var CalendarNavigator = ({
         onPress: onPrevious,
         isDisabled: isPreviousDisabled,
         icon: /* @__PURE__ */ jsx(ArrowLeftOutline24Icon, {}),
-        "aria-label": `${t(texts7.previous)} ${t(texts7[unit])}`
+        "aria-label": `${t(texts8.previous)} ${t(texts8[unit])}`
       }
     ),
     /* @__PURE__ */ jsx(
@@ -2421,12 +2477,12 @@ var CalendarNavigator = ({
         onPress: onNext,
         isDisabled: isNextDisabled,
         icon: /* @__PURE__ */ jsx(ArrowRightOutline24Icon, {}),
-        "aria-label": `${t(texts7.next)} ${t(texts7[unit])}`
+        "aria-label": `${t(texts8.next)} ${t(texts8[unit])}`
       }
     )
   ] });
 };
-var texts7 = createTexts({
+var texts8 = createTexts({
   previous: {
     nb: "Forrige",
     nn: "Forrige",
@@ -2471,7 +2527,7 @@ function Calendar2({
   const styles = recipe({ variant });
   const { calendarProps } = useCalendar$1(props, state);
   const calendarAriaLabel = calendarProps["aria-label"];
-  const ariaLabel = t(texts8.calendar) + (calendarAriaLabel ? ` ${calendarAriaLabel}` : "");
+  const ariaLabel = t(texts9.calendar) + (calendarAriaLabel ? ` ${calendarAriaLabel}` : "");
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -2485,7 +2541,7 @@ function Calendar2({
     }
   );
 }
-var texts8 = createTexts({
+var texts9 = createTexts({
   calendar: {
     nb: "Kalender",
     nn: "Kalender",
@@ -2511,14 +2567,14 @@ var CalendarTriggerButton = ({
     IconButton,
     {
       icon: /* @__PURE__ */ jsx(CalendarOutline24Icon, {}),
-      "aria-label": t(texts9.openCalendar),
+      "aria-label": t(texts10.openCalendar),
       css: styles.calendarTriggerButton,
       variant: "ghost",
       disabled
     }
   ) });
 };
-var texts9 = createTexts({
+var texts10 = createTexts({
   openCalendar: {
     nb: "\xC5pne kalender",
     nn: "\xC5pne kalendar",
@@ -2627,7 +2683,7 @@ var DateField = ({
     )
   ] });
 };
-var texts10 = createTexts({
+var texts11 = createTexts({
   day: {
     nb: "Velg dag",
     nn: "Vel dag",
@@ -2650,16 +2706,16 @@ var texts10 = createTexts({
 var getAriaLabel = (segmentType) => {
   switch (segmentType) {
     case "day": {
-      return texts10.day;
+      return texts11.day;
     }
     case "month": {
-      return texts10.month;
+      return texts11.month;
     }
     case "year": {
-      return texts10.year;
+      return texts11.year;
     }
     default: {
-      return texts10.day;
+      return texts11.day;
     }
   }
 };
@@ -2994,7 +3050,7 @@ var TimePicker = ({
   const isDisabled = isDisabledExternally ?? fieldDisabled ?? false;
   const { t } = useTranslation();
   const locale = useCurrentLocale();
-  const label = externalLabel ?? t(texts11.time);
+  const label = externalLabel ?? t(texts12.time);
   const state = useTimeFieldState({
     value,
     defaultValue,
@@ -3027,15 +3083,15 @@ var TimePicker = ({
       })
     );
   };
-  const backwardsLabel = `${t(texts11.backwards)} ${minuteInterval} ${t(
-    texts11.minutes
+  const backwardsLabel = `${t(texts12.backwards)} ${minuteInterval} ${t(
+    texts12.minutes
   )}`;
-  const forwardsLabel = `${t(texts11.forwards)} ${minuteInterval} ${t(
-    texts11.minutes
+  const forwardsLabel = `${t(texts12.forwards)} ${minuteInterval} ${t(
+    texts12.minutes
   )}`;
-  const inputLabel = label ?? t(texts11.time);
+  const inputLabel = label ?? t(texts12.time);
   const ariaLabel = `${inputLabel} \u2013 ${t(
-    texts11.selectedTimeIs(`${(dateTime == null ? void 0 : dateTime.hour) ?? 0} ${(dateTime == null ? void 0 : dateTime.minute) ?? 0}`)
+    texts12.selectedTimeIs(`${(dateTime == null ? void 0 : dateTime.hour) ?? 0} ${(dateTime == null ? void 0 : dateTime.minute) ?? 0}`)
   )}`;
   return /* @__PURE__ */ jsx(Field3, { as: "time", ...boxProps, children: /* @__PURE__ */ jsxs(
     StyledField,
@@ -3088,7 +3144,7 @@ var TimePicker = ({
     }
   ) });
 };
-var texts11 = createTexts({
+var texts12 = createTexts({
   selectedTimeIs: (time) => ({
     nb: `Valgt tidspunkt er ${time}`,
     nn: `Valt tidspunkt er ${time}`,
@@ -3229,7 +3285,7 @@ var DrawerCloseTrigger = function DrawerCloseTrigger2({
     {
       variant: "ghost",
       icon: /* @__PURE__ */ jsx(CloseFill24Icon, {}),
-      label: t(texts12.close)
+      label: t(texts13.close)
     }
   ) : /* @__PURE__ */ jsx(CloseButton, { size: "md" }) });
 };
@@ -3243,7 +3299,7 @@ var DrawerBackTrigger = ({
     {
       variant: "ghost",
       icon: /* @__PURE__ */ jsx(ArrowLeftFill24Icon, {}),
-      label: t(texts12.back)
+      label: t(texts13.back)
     }
   ) });
 };
@@ -3275,7 +3331,7 @@ var DrawerBackdrop = Drawer$1.Backdrop;
 var DrawerTitle = Drawer$1.Title;
 var DrawerActionTrigger = Drawer$1.ActionTrigger;
 var DrawerHeader = Drawer$1.Header;
-var texts12 = createTexts({
+var texts13 = createTexts({
   back: {
     en: "Back",
     nb: "Tilbake",
@@ -3289,6 +3345,124 @@ var texts12 = createTexts({
     sv: "St\xE4ng"
   }
 });
+var ExternalIcon = ({
+  label,
+  size
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  size === "lg" || size === "md" ? /* @__PURE__ */ jsx(LinkOutOutline24Icon, { "aria-hidden": true, display: "inline" }) : /* @__PURE__ */ jsx(LinkOutOutline18Icon, { "aria-hidden": true, display: "inline" }),
+  /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
+] });
+var TextLink = ({
+  ref,
+  children,
+  external,
+  href,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const isExternal = external ?? Boolean((href == null ? void 0 : href.startsWith("http://")) || (href == null ? void 0 : href.startsWith("https://")));
+  const externalLabel = t ? t(texts14.externalLink) : texts14.externalLink.en;
+  if (props.asChild && isValidElement(children)) {
+    return /* @__PURE__ */ jsx(
+      Link,
+      {
+        href,
+        ...props,
+        ref,
+        ...isExternal && {
+          target: "_blank",
+          rel: "noopener noreferrer"
+        },
+        children: cloneElement(children, {
+          ...children.props,
+          children: /* @__PURE__ */ jsxs(Fragment, { children: [
+            children.props.children,
+            isExternal && /* @__PURE__ */ jsx(ExternalIcon, { label: externalLabel, size: props.size })
+          ] })
+        })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href,
+      ...props,
+      ref,
+      ...isExternal && {
+        target: "_blank",
+        rel: "noopener noreferrer"
+      },
+      children: [
+        children,
+        isExternal && /* @__PURE__ */ jsx(ExternalIcon, { label: externalLabel, size: props.size })
+      ]
+    }
+  );
+};
+var texts14 = createTexts({
+  externalLink: {
+    nb: "Ekstern lenke",
+    nn: "Ekstern lenke",
+    sv: "Extern l\xE4nk",
+    en: "External link"
+  }
+});
+var List = List$1.Root;
+var ListItem = List$1.Item;
+var ListIndicator = List$1.Indicator;
+var ErrorSummary = ({
+  ref: externalRef,
+  children,
+  headingLevel = "h2",
+  heading,
+  ...rest
+}) => {
+  const recipe = useSlotRecipe({ key: "errorSummary" });
+  const styles = recipe();
+  const wrapperRef = useRef(null);
+  const headingRef = useRef(null);
+  const ref = externalRef ?? wrapperRef;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      css: styles.container,
+      ref,
+      ...rest,
+      "aria-labelledby": slugify(heading),
+      tabIndex: -1,
+      children: [
+        heading && /* @__PURE__ */ jsxs(Flex, { css: styles.heading, children: [
+          /* @__PURE__ */ jsx(
+            ErrorFill24Icon,
+            {
+              css: {
+                flexShrink: 0,
+                "& path:first-of-type": {
+                  fill: `icon.critical`
+                },
+                "& path:not(:first-of-type)": {
+                  fill: `surface.critical`
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(Heading, { as: headingLevel, variant: "md", autoId: true, ref: headingRef, children: heading })
+        ] }),
+        /* @__PURE__ */ jsx(List, { css: styles.list, gap: 2, children })
+      ]
+    }
+  );
+};
+var ErrorSummaryItem = ({
+  children,
+  href,
+  ...rest
+}) => {
+  const recipe = useSlotRecipe({ key: "errorSummary" });
+  const styles = recipe();
+  return /* @__PURE__ */ jsx(ListItem, { css: styles.item, ...rest, children: /* @__PURE__ */ jsx(TextLink, { href, children }) });
+};
 var AttachedInputs = ({
   ref,
   ...props
@@ -3370,7 +3544,7 @@ function useFloatingInputState({
   );
   const inputValue = isControlled ? String(value ?? "") : uncontrolledValue;
   const shouldFloat = inputValue.length > 0 || focused;
-  const syncFromRef = React13__default.useCallback(() => {
+  const syncFromRef = React14__default.useCallback(() => {
     if (!isControlled && (inputRef == null ? void 0 : inputRef.current)) {
       const v = inputRef.current.value;
       if (v !== uncontrolledValue) {
@@ -3534,7 +3708,7 @@ function Autocomplete({
 }) {
   const { contains } = useFilter({ sensitivity: "base" });
   const { t } = useTranslation();
-  const extractedItems = React13__default.useMemo(
+  const extractedItems = React14__default.useMemo(
     () => extractItemsFromChildren(children),
     [children]
   );
@@ -3542,11 +3716,11 @@ function Autocomplete({
     initialItems: extractedItems,
     filter: filteredExternally ? void 0 : contains
   });
-  React13__default.useEffect(() => {
+  React14__default.useEffect(() => {
     if (filteredExternally)
       reset();
   }, [extractedItems, reset, filteredExternally]);
-  const filteredChildren = React13__default.useMemo(
+  const filteredChildren = React14__default.useMemo(
     () => filterChildren(children, collection.items),
     [children, collection.items]
   );
@@ -3591,10 +3765,10 @@ function Autocomplete({
           }
         }
       ) }),
-      /* @__PURE__ */ jsx(Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsx(Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts13.clearValue), children: /* @__PURE__ */ jsx(CloseButton, { size: "xs", tabIndex: 0 }) }) })
+      /* @__PURE__ */ jsx(Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsx(Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts15.clearValue), children: /* @__PURE__ */ jsx(CloseButton, { size: "xs", tabIndex: 0 }) }) })
     ] }),
     /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Content, { children: [
-      !loading && /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyLabel ?? t(texts13.noItemsFound) }),
+      !loading && /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyLabel ?? t(texts15.noItemsFound) }),
       loading ? /* @__PURE__ */ jsx(ColorSpinner, { width: "1.5rem", p: "2" }) : filteredChildren
     ] }) })
   ] });
@@ -3610,9 +3784,9 @@ var AutocompleteItem = ({ children, ...props }) => {
 };
 var filterChildren = (children, collectionItems) => {
   const collectionValues = new Set(collectionItems.map((item) => item.value));
-  return React13__default.Children.toArray(children).map((child) => {
+  return React14__default.Children.toArray(children).map((child) => {
     var _a6;
-    if (!React13__default.isValidElement(child))
+    if (!React14__default.isValidElement(child))
       return null;
     if (child.type === AutocompleteItemGroup) {
       const groupProps = child.props;
@@ -3621,11 +3795,11 @@ var filterChildren = (children, collectionItems) => {
         collectionItems
       );
       const hasItems = filteredGroupChildren.some(
-        (groupChild) => React13__default.isValidElement(groupChild) && groupChild.type !== AutocompleteItemGroupLabel
+        (groupChild) => React14__default.isValidElement(groupChild) && groupChild.type !== AutocompleteItemGroupLabel
       );
       if (!hasItems)
         return null;
-      return React13__default.cloneElement(child, groupProps, ...filteredGroupChildren);
+      return React14__default.cloneElement(child, groupProps, ...filteredGroupChildren);
     }
     const itemProps = (_a6 = child.props) == null ? void 0 : _a6.item;
     if (itemProps) {
@@ -3636,8 +3810,8 @@ var filterChildren = (children, collectionItems) => {
 };
 var extractItemsFromChildren = (children) => {
   const items = [];
-  React13__default.Children.forEach(children, (child) => {
-    if (!React13__default.isValidElement(child))
+  React14__default.Children.forEach(children, (child) => {
+    if (!React14__default.isValidElement(child))
       return;
     if (child.type === AutocompleteItemGroup) {
       items.push(
@@ -3653,7 +3827,7 @@ var extractItemsFromChildren = (children) => {
   });
   return items;
 };
-var texts13 = createTexts({
+var texts15 = createTexts({
   noItemsFound: {
     nb: "Ingen resultater",
     nn: "Ingen resultat",
@@ -4174,7 +4348,7 @@ function Option({ item, state }) {
     );
   }, []);
   return /* @__PURE__ */ jsx(OptionContext.Provider, { value: { labelProps, descriptionProps }, children: /* @__PURE__ */ jsx(
-    ListItem,
+    ListItem$1,
     {
       ...optionProps,
       ...dataFields,
@@ -4186,7 +4360,7 @@ function Option({ item, state }) {
     }
   ) });
 }
-var OptionContext = React13__default.createContext({
+var OptionContext = React14__default.createContext({
   labelProps: {},
   descriptionProps: {}
 });
@@ -4201,7 +4375,7 @@ function ListBoxSection({ section, state }) {
   });
   const isFirstSection = section.key === state.collection.getFirstKey();
   const titleColor = useColorModeValue("darkGrey", "white");
-  return /* @__PURE__ */ jsx(List, { children: /* @__PURE__ */ jsxs(ListItem, { ...itemProps, listStyleType: "none", marginLeft: "0", paddingX: "1", children: [
+  return /* @__PURE__ */ jsx(List, { children: /* @__PURE__ */ jsxs(ListItem$1, { ...itemProps, listStyleType: "none", marginLeft: "0", paddingX: "1", children: [
     section.rendered && /* @__PURE__ */ jsx(
       Box,
       {
@@ -4433,6 +4607,7 @@ var NumericStepper = ({
     label,
     helperText,
     errorText,
+    gap,
     ...rest
   } = props;
   const addButtonRef = useRef(null);
@@ -4461,13 +4636,14 @@ var NumericStepper = ({
       invalid,
       readOnly,
       required,
+      gap,
       children: [
         /* @__PURE__ */ jsx(
           VerySmallButton,
           {
             icon: /* @__PURE__ */ jsx(SubtractIcon, { stepLabel: clampedStepSize }),
             "aria-label": t(
-              texts14.decrementButtonAriaLabel(
+              texts16.decrementButtonAriaLabel(
                 clampedStepSize,
                 stepSize === 1 ? ariaLabelContext.singular : ariaLabelContext.plural
               )
@@ -4494,7 +4670,7 @@ var NumericStepper = ({
             css: styles.input,
             width: `${Math.max(value.toString().length + 1, 3)}ch`,
             "aria-live": "assertive",
-            "aria-label": ariaLabelContext.plural === "" ? "" : t(texts14.currentNumberAriaLabel(ariaLabelContext.plural)),
+            "aria-label": ariaLabelContext.plural === "" ? "" : t(texts16.currentNumberAriaLabel(ariaLabelContext.plural)),
             onChange: (event) => {
               const numericInput = Number(event.target.value);
               if (Number.isNaN(numericInput)) {
@@ -4511,8 +4687,11 @@ var NumericStepper = ({
           Text3,
           {
             "aria-live": "assertive",
-            paddingX: "0.95rem",
-            "aria-label": ariaLabelContext.plural === "" ? "" : t(texts14.currentNumberAriaLabel(ariaLabelContext.plural)),
+            width: `${Math.max(value.toString().length + 1, 3)}ch`,
+            paddingX: 0.5,
+            padding: 0,
+            textAlign: "center",
+            "aria-label": ariaLabelContext.plural === "" ? "" : t(texts16.currentNumberAriaLabel(ariaLabelContext.plural)),
             children: value
           }
         ),
@@ -4522,7 +4701,7 @@ var NumericStepper = ({
             ref: addButtonRef,
             icon: /* @__PURE__ */ jsx(AddIcon, { stepLabel: clampedStepSize }),
             "aria-label": t(
-              texts14.incrementButtonAriaLabel(
+              texts16.incrementButtonAriaLabel(
                 clampedStepSize,
                 stepSize === 1 ? ariaLabelContext.singular : ariaLabelContext.plural
               )
@@ -4596,7 +4775,7 @@ var AddIcon = ({ stepLabel }) => /* @__PURE__ */ jsxs(Fragment, { children: [
   ] }),
   stepLabel > 1 && /* @__PURE__ */ jsx(chakra.span, { paddingRight: "1", children: stepLabel.toString() })
 ] });
-var texts14 = createTexts({
+var texts16 = createTexts({
   currentNumberAriaLabel(ariaContext) {
     return {
       nb: `Valgt antall ${ariaContext}`,
@@ -4660,7 +4839,7 @@ var PasswordInput = ({
             event.preventDefault();
             setVisible(!visible);
           },
-          children: visible ? t(texts15.hidePassword) : t(texts15.showPassword)
+          children: visible ? t(texts17.hidePassword) : t(texts17.showPassword)
         }
       ),
       ...rest
@@ -4685,7 +4864,7 @@ var VisibilityTrigger = ({
     }
   );
 };
-var texts15 = createTexts({
+var texts17 = createTexts({
   showPassword: {
     nb: "Vis",
     nn: "Vis",
@@ -4737,14 +4916,14 @@ var CountryCodeSelect = ({
       positioning: { placement: "bottom", flip: false },
       collection: filteredCallingCodes,
       lazyMount: true,
-      "aria-label": t(texts16.countryCode),
+      "aria-label": t(texts18.countryCode),
       sideRadiusVariant: "rightSideSquare",
       role: "combobox",
       children: filteredCallingCodes.items.map((code) => /* @__PURE__ */ jsx(SelectItem, { item: code, children: code.label }, code.label))
     }
   );
 };
-var texts16 = createTexts({
+var texts18 = createTexts({
   countryCode: {
     nb: "Landkode",
     nn: "Landskode",
@@ -4767,7 +4946,7 @@ var PhoneNumberInput = ({
     errorText
   } = props;
   const { t } = useTranslation();
-  const label = externalLabel ?? (optional ? t(texts17.phoneNumberOptional) : t(texts17.phoneNumber));
+  const label = externalLabel ?? (optional ? t(texts19.phoneNumberOptional) : t(texts19.phoneNumber));
   const [value, onChange] = useControllableState({
     value: externalValue,
     onChange: externalOnChange,
@@ -4822,7 +5001,7 @@ var PhoneNumberInput = ({
     )
   ] });
 };
-var texts17 = createTexts({
+var texts19 = createTexts({
   phoneNumber: {
     nb: "Telefonnummer",
     nn: "Telefonnummer",
@@ -4874,16 +5053,16 @@ var SearchInput = ({
           variant: "ghost",
           type: "button",
           size: "sm",
-          "aria-label": t(texts18.reset),
+          "aria-label": t(texts20.reset),
           icon: /* @__PURE__ */ jsx(CloseOutline24Icon, {}),
           onClick: onReset
         }
       ),
-      label: label ?? t(texts18.label)
+      label: label ?? t(texts20.label)
     }
   );
 };
-var texts18 = createTexts({
+var texts20 = createTexts({
   label: {
     nb: "S\xF8k",
     nn: "S\xF8k",
@@ -5419,72 +5598,6 @@ var TravelTag = function TravelTag2({
     }
   );
 };
-var ExternalIcon = ({
-  label,
-  size
-}) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  size === "lg" || size === "md" ? /* @__PURE__ */ jsx(LinkOutOutline24Icon, { "aria-hidden": true, display: "inline" }) : /* @__PURE__ */ jsx(LinkOutOutline18Icon, { "aria-hidden": true, display: "inline" }),
-  /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
-] });
-var TextLink = ({
-  ref,
-  children,
-  external,
-  href,
-  ...props
-}) => {
-  const { t } = useTranslation();
-  const isExternal = external ?? Boolean((href == null ? void 0 : href.startsWith("http://")) || (href == null ? void 0 : href.startsWith("https://")));
-  const externalLabel = t ? t(texts19.externalLink) : texts19.externalLink.en;
-  if (props.asChild && isValidElement(children)) {
-    return /* @__PURE__ */ jsx(
-      Link,
-      {
-        href,
-        ...props,
-        ref,
-        ...isExternal && {
-          target: "_blank",
-          rel: "noopener noreferrer"
-        },
-        children: cloneElement(children, {
-          ...children.props,
-          children: /* @__PURE__ */ jsxs(Fragment, { children: [
-            children.props.children,
-            isExternal && /* @__PURE__ */ jsx(ExternalIcon, { label: externalLabel, size: props.size })
-          ] })
-        })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    Link,
-    {
-      href,
-      ...props,
-      ref,
-      ...isExternal && {
-        target: "_blank",
-        rel: "noopener noreferrer"
-      },
-      children: [
-        children,
-        isExternal && /* @__PURE__ */ jsx(ExternalIcon, { label: externalLabel, size: props.size })
-      ]
-    }
-  );
-};
-var texts19 = createTexts({
-  externalLink: {
-    nb: "Ekstern lenke",
-    nn: "Ekstern lenke",
-    sv: "Extern l\xE4nk",
-    en: "External link"
-  }
-});
-var List = List$1.Root;
-var ListItem2 = List$1.Item;
-var ListIndicator = List$1.Indicator;
 var CargonetLogo = ({
   ref,
   ...props
@@ -6011,14 +6124,14 @@ var JumpButton = ({
       as: "button",
       ref,
       css: styles.root,
-      "aria-label": direction === "forward" ? t(texts20.forward) : t(texts20.backward),
+      "aria-label": direction === "forward" ? t(texts21.forward) : t(texts21.backward),
       disabled,
       ...props,
       children: direction === "forward" ? /* @__PURE__ */ jsx(Forward15MediaControllerFill30Icon, { css: styles.icon }) : /* @__PURE__ */ jsx(Backward15MediaControllerFill30Icon, { css: styles.icon })
     }
   );
 };
-var texts20 = createTexts({
+var texts21 = createTexts({
   forward: {
     nb: "15 sekunder frem",
     nn: "15 sekunder fram",
@@ -6046,14 +6159,14 @@ var PlayPauseButton = ({
       ref,
       as: "button",
       css: styles.root,
-      "aria-label": playing ? t(texts21.pause) : t(texts21.play),
+      "aria-label": playing ? t(texts22.pause) : t(texts22.play),
       disabled,
       ...props,
       children: playing ? /* @__PURE__ */ jsx(PauseMediaControllerFill24Icon, { css: styles.icon }) : /* @__PURE__ */ jsx(PlayMediaControllerFill24Icon, { css: styles.icon })
     }
   );
 };
-var texts21 = createTexts({
+var texts22 = createTexts({
   pause: {
     nb: "Pause",
     nn: "Pause",
@@ -6081,14 +6194,14 @@ var SkipButton = ({
       ref,
       as: "button",
       css: styles.root,
-      "aria-label": direction === "forward" ? t(texts22.next) : t(texts22.previous),
+      "aria-label": direction === "forward" ? t(texts23.next) : t(texts23.previous),
       disabled,
       ...props,
       children: direction === "forward" ? /* @__PURE__ */ jsx(NextMediaControllerFill30Icon, { css: styles.icon }) : /* @__PURE__ */ jsx(PreviousMediaControllerFill30Icon, { css: styles.icon })
     }
   );
 };
-var texts22 = createTexts({
+var texts23 = createTexts({
   next: {
     nb: "Neste",
     nn: "Neste",
@@ -6145,16 +6258,16 @@ var NudgeContent = ({
   ...props
 }) => {
   const [currentStep, setCurrentStep] = useState(1);
-  const childrenArray = React13__default.Children.toArray(children);
+  const childrenArray = React14__default.Children.toArray(children);
   const { open } = usePopoverContext();
   useEffect(() => {
     setCurrentStep(1);
   }, [children, open]);
   const wizardPages = childrenArray.filter(
-    (child) => React13__default.isValidElement(child) && child.type === NudgeWizardStep
+    (child) => React14__default.isValidElement(child) && child.type === NudgeWizardStep
   );
   const restChildren = childrenArray.filter(
-    (child) => !React13__default.isValidElement(child) || child.type !== NudgeWizardStep
+    (child) => !React14__default.isValidElement(child) || child.type !== NudgeWizardStep
   );
   const totalSteps = wizardPages.length;
   const isLastStep = totalSteps === currentStep;
@@ -6203,7 +6316,7 @@ var NudgeActions = ({ ...props }) => {
 var NextButton = ({ isLastStep, onNext }) => {
   const { t } = useTranslation();
   if (isLastStep)
-    return /* @__PURE__ */ jsx(PopoverCloseTrigger, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", children: t(texts23.close) }) });
+    return /* @__PURE__ */ jsx(PopoverCloseTrigger, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", children: t(texts24.close) }) });
   return /* @__PURE__ */ jsx(
     Button,
     {
@@ -6211,11 +6324,11 @@ var NextButton = ({ isLastStep, onNext }) => {
       size: "xs",
       rightIcon: /* @__PURE__ */ jsx(ArrowRightFill18Icon, {}),
       onClick: onNext,
-      children: t(texts23.nextStep)
+      children: t(texts24.nextStep)
     }
   );
 };
-var texts23 = createTexts({
+var texts24 = createTexts({
   nextStep: {
     nb: "Neste",
     nn: "Neste",
@@ -6272,7 +6385,7 @@ var PaginationEllipsis = ({
   ref,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(ListItem2, { children: /* @__PURE__ */ jsx(Pagination$1.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsx(Box, { cursor: "default", children: "..." }) }) });
+  return /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(Pagination$1.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsx(Box, { cursor: "default", children: "..." }) }) });
 };
 var PaginationItem = ({
   ref,
@@ -6282,7 +6395,7 @@ var PaginationItem = ({
   const { t } = useTranslation();
   const { page, totalPages } = usePaginationContext();
   if (rootProps.getHref) {
-    return /* @__PURE__ */ jsx(ListItem2, { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(
       Pagination$1.Item,
       {
         as: props.as ?? "a",
@@ -6291,18 +6404,18 @@ var PaginationItem = ({
           to: rootProps.getHref(props.value)
         },
         ref,
-        "aria-label": t(texts24.pageOf(props.value, totalPages)),
+        "aria-label": t(texts25.pageOf(props.value, totalPages)),
         ...props,
         children: props.value
       }
     ) });
   }
-  return /* @__PURE__ */ jsx(ListItem2, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(
     Pagination$1.Item,
     {
       as: props.as ?? "button",
       ref,
-      "aria-label": t(texts24.pageOf(props.value, totalPages)),
+      "aria-label": t(texts25.pageOf(props.value, totalPages)),
       "aria-current": page === props.value,
       ...props,
       children: props.value
@@ -6321,7 +6434,7 @@ var PaginationPrevTrigger = ({
   if (page <= 1)
     return null;
   if (rootProps.getHref) {
-    return /* @__PURE__ */ jsx(ListItem2, { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(
       Pagination$1.PrevTrigger,
       {
         as: props.as ?? "a",
@@ -6332,18 +6445,18 @@ var PaginationPrevTrigger = ({
         },
         ref,
         css: styles.item,
-        "aria-label": t(texts24.previousPage),
+        "aria-label": t(texts25.previousPage),
         ...props,
         children: /* @__PURE__ */ jsx(DropdownLeftOutline18Icon, {})
       }
     ) });
   }
-  return /* @__PURE__ */ jsx(ListItem2, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(
     Pagination$1.PrevTrigger,
     {
       ref,
       asChild: true,
-      "aria-label": t(texts24.previousPage),
+      "aria-label": t(texts25.previousPage),
       as: props.as || "button",
       css: styles.item,
       ...props,
@@ -6363,7 +6476,7 @@ var PaginationNextTrigger = ({
   if (page >= totalPages)
     return null;
   if (rootProps.getHref) {
-    return /* @__PURE__ */ jsx(ListItem2, { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(
       Pagination$1.NextTrigger,
       {
         ref,
@@ -6372,18 +6485,18 @@ var PaginationNextTrigger = ({
           to: rootProps.getHref(props.value)
         },
         css: styles.item,
-        "aria-label": t(texts24.nextPage),
+        "aria-label": t(texts25.nextPage),
         ...props,
         children: /* @__PURE__ */ jsx(DropdownRightOutline18Icon, {})
       }
     ) });
   }
-  return /* @__PURE__ */ jsx(ListItem2, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(
     Pagination$1.NextTrigger,
     {
       ref,
       css: styles.item,
-      "aria-label": t(texts24.nextPage),
+      "aria-label": t(texts25.nextPage),
       as: props.as || "button",
       ...props,
       children: /* @__PURE__ */ jsx(DropdownRightOutline18Icon, {})
@@ -6410,7 +6523,7 @@ var PaginationItems = (props) => {
     );
   }) });
 };
-var texts24 = createTexts({
+var texts25 = createTexts({
   previousPage: {
     nb: "Forrige side",
     nn: "F\xF8rre side",
@@ -6457,7 +6570,7 @@ var PopoverContent = ({
   ...props
 }) => {
   const { colorMode } = useColorMode();
-  const closeButtonRef = React13__default.useRef(null);
+  const closeButtonRef = React14__default.useRef(null);
   const { open } = usePopoverContext();
   useEffect(() => {
     if (showCloseButton && open && closeButtonRef.current) {
@@ -6510,7 +6623,7 @@ var ProgressIndicator = ({
       "aria-valuemin": 1,
       "aria-valuemax": numberOfSteps,
       "aria-valuenow": activeStep,
-      "aria-valuetext": t(texts25.stepsOf(activeStep, numberOfSteps)),
+      "aria-valuetext": t(texts26.stepsOf(activeStep, numberOfSteps)),
       ref,
       children: /* @__PURE__ */ jsx(Box, { css: { ...styles.container, ...css }, children: Array.from({ length: numberOfSteps }, (_, index) => /* @__PURE__ */ jsx(
         Box,
@@ -6529,7 +6642,7 @@ var ProgressIndicator = ({
     }
   );
 };
-var texts25 = createTexts({
+var texts26 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep} av ${numberOfSteps}`,
     nn: `Steg ${activeStep} av ${numberOfSteps}`,
@@ -6659,7 +6772,7 @@ var SporProvider = ({
     children
   ] }) }) });
 };
-var StepperContext = React13__default.createContext(null);
+var StepperContext = React14__default.createContext(null);
 var StepperProvider = ({
   activeStep,
   children,
@@ -6676,7 +6789,7 @@ var StepperProvider = ({
   );
 };
 var useStepper = () => {
-  const context = React13__default.useContext(StepperContext);
+  const context = React14__default.useContext(StepperContext);
   if (!context) {
     throw new Error(
       "useStepper must be used within a StepperProvider. Most likely, you forgot to wrap your StepperStep in a Stepper component"
@@ -6725,7 +6838,7 @@ var Stepper = function Stepper2({
               /* @__PURE__ */ jsx(
                 IconButton,
                 {
-                  "aria-label": t(texts26.back),
+                  "aria-label": t(texts27.back),
                   icon: /* @__PURE__ */ jsx(ArrowLeftFill24Icon, {}),
                   variant: "ghost",
                   size: "sm",
@@ -6749,7 +6862,7 @@ var Stepper = function Stepper2({
                   children: heading
                 }
               ),
-              /* @__PURE__ */ jsx(Box, { css: style.stepCounter, "data-part": "step-counter", children: t(texts26.stepsOf(activeStep, numberOfSteps)) })
+              /* @__PURE__ */ jsx(Box, { css: style.stepCounter, "data-part": "step-counter", children: t(texts27.stepsOf(activeStep, numberOfSteps)) })
             ]
           }
         ) }),
@@ -6768,7 +6881,7 @@ var Stepper = function Stepper2({
     }
   ) });
 };
-var texts26 = createTexts({
+var texts27 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep}/${numberOfSteps}`,
     nn: `Steg ${activeStep}/${numberOfSteps}`,
@@ -7466,12 +7579,12 @@ var pressableCardRecipe = defineRecipe({
       accent: {
         boxShadow: "0px 1px 3px 0px var(--shadow-color)",
         shadowColor: "surface.disabled",
-        background: "surface.success",
+        background: "surface.accent",
         _hover: {
-          background: "surface.success.hover",
+          background: "surface.accent.hover",
           boxShadow: "0px 2px 6px 0px var(--shadow-color)",
           _active: {
-            background: "surface.success.active",
+            background: "surface.accent.active",
             boxShadow: "none"
           }
         }
@@ -8004,6 +8117,12 @@ var menuAnatomy = createAnatomy("menu").parts(
   "triggerItem",
   "checkboxItem"
 );
+var errorSummaryAnatomy = createAnatomy("error-summary").parts(
+  "container",
+  "heading",
+  "list",
+  "item"
+);
 
 // src/theme/slot-recipes/accordion.ts
 var accordionSlotRecipe = defineSlotRecipe({
@@ -9540,6 +9659,34 @@ var drawerSlotRecipe = defineSlotRecipe({
     }
   }
 });
+var errorSummarySlotRecipe = defineSlotRecipe({
+  slots: errorSummaryAnatomy.keys(),
+  className: "spor-error-summary",
+  base: {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      padding: [3, 5],
+      backgroundColor: "surface.critical",
+      borderRadius: "md"
+    },
+    heading: {
+      fontSize: "md",
+      fontWeight: "bold",
+      color: "text.critical",
+      gap: [1, 1.5],
+      alignItems: "center"
+    },
+    list: {
+      alignItems: "flex-start",
+      paddingLeft: [4, 5]
+    },
+    item: {
+      color: "text.critical.subtle",
+      marginTop: [2, 1.5]
+    }
+  }
+});
 var fieldSlotRecipe = defineSlotRecipe({
   className: "spor-field",
   slots: fieldAnatomy.keys(),
@@ -10786,17 +10933,18 @@ var numericStepperRecipe = defineSlotRecipe({
       "& > div": {
         display: "flex",
         flexDirection: "row",
-        alignItems: "center"
+        alignItems: "center",
+        gap: 1
       }
     },
     input: {
       fontSize: "sm",
       fontWeight: "bold",
-      marginX: 0.5,
       padding: 0,
       paddingX: 0.5,
       borderRadius: "xs",
-      outline: "none",
+      outline: "1px solid",
+      outlineColor: "outline.core",
       height: "auto",
       textAlign: "center",
       transitionProperty: "common",
@@ -12088,7 +12236,8 @@ var slotRecipes = {
   tooltip: popoverSlotRecipe,
   tag: inputChipSlotRecipe,
   menu: menuSlotRecipe,
-  choiceChip: choiceChipSlotRecipe
+  choiceChip: choiceChipSlotRecipe,
+  errorSummary: errorSummarySlotRecipe
 };
 var animations = defineTokens.animations({
   spin: {
@@ -12936,6 +13085,6 @@ var TooltipContent = ({
   ] }) }) });
 };
 
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, AttachedInputs, Autocomplete, AutocompleteItem, AutocompleteItemGroup, AutocompleteItemGroupLabel, Badge, Brand, Breadcrumb, Button, ButtonGroup, Calendar, CalendarCell, CalendarGrid, CalendarHeader, CalendarProvider, CardSelect, CardSelectContent, CardSelectTrigger, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, ChoiceChipGroup, ChoiceChipLabel, Clipboard, ClipboardButton, CloseButton, CloseDrawerLine, Code, ColorInlineLoader, ColorModeButton, ColorModeIcon, ColorModeProvider, ColorSpinner, Combobox2 as Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, 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, Field3 as Field, FieldErrorText, FieldLabel, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FilterChip, FloatingActionButton, Heading, IconButton, InfoTag, Input, InputChip, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, List, ListBox, ListIndicator, ListItem2 as ListItem, Menu, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuRadioItem, MenuRadioItemGroup, MenuSeparator, MenuTrigger, MenuTriggerItem, NativeSelect, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, NudgeTrigger, NudgeWizardStep, NumericStepper, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover2 as Popover, PopoverContent, PopoverTrigger, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, RangeCalendar, ScrollCalendar, SearchInput, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, StaticCard, Stepper, StepperStep, SvgBox, Switch, Table, TableBody, TableColumnHeader, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Text3 as Text, TextLink, Textarea, TimePicker, Tooltip, TooltipContent, TooltipTrigger, TravelTag, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useCalendar, useColorMode, useColorModeValue, useMenuContext, useTableSort, useTranslation };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, AttachedInputs, Autocomplete, AutocompleteItem, AutocompleteItemGroup, AutocompleteItemGroupLabel, Badge, Brand, Breadcrumb, Button, ButtonGroup, Calendar, CalendarCell, CalendarGrid, CalendarHeader, CalendarProvider, CardSelect, CardSelectContent, CardSelectTrigger, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, ChoiceChipGroup, ChoiceChipLabel, Clipboard, ClipboardButton, CloseButton, CloseDrawerLine, Code, ColorInlineLoader, ColorModeButton, ColorModeIcon, ColorModeProvider, ColorSpinner, Combobox2 as Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, ErrorSummary, ErrorSummaryItem, Expandable, ExpandableAlert, ExpandableItem, Field3 as Field, FieldErrorText, FieldLabel, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FilterChip, FloatingActionButton, Heading, IconButton, InfoTag, Input, InputChip, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, List, ListBox, ListIndicator, ListItem, Menu, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuRadioItem, MenuRadioItemGroup, MenuSeparator, MenuTrigger, MenuTriggerItem, NativeSelect, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, NudgeTrigger, NudgeWizardStep, NumericStepper, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover2 as Popover, PopoverContent, PopoverTrigger, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, RangeCalendar, ScrollCalendar, SearchInput, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, StaticCard, Stepper, StepperStep, SvgBox, Switch, Table, TableBody, TableColumnHeader, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Text3 as Text, TextLink, Textarea, TimePicker, Tooltip, TooltipContent, TooltipTrigger, TravelTag, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useCalendar, useColorMode, useColorModeValue, useMenuContext, useTableSort, useTranslation };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map