@vygruppen/spor-react 13.4.2 → 13.4.4

package/dist/index.cjs

@@ -227,8 +227,8 @@ function useTranslation() {
   };
   return { t, language };
 }
-function createTexts(texts28) {
-  return texts28;
+function createTexts(texts29) {
+  return texts29;
 }
 function Lottie({ animationData }) {
   const { View } = lottieReact.useLottie({ animationData });
@@ -1094,41 +1094,33 @@ var AlertIcon = ({
 var BaseAlertIcon = ({
   variant
 }) => {
-  const css = {
-    "& path:first-of-type": {
-      fill: `icon.${variant}`
-    },
-    "& path:not(:first-of-type)": {
-      fill: `surface.${variant}`
-    }
-  };
   switch (variant) {
     case "info": {
-      return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.InformationFill24Icon, { css });
+      return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.InformationFill24Icon, {});
     }
     case "success": {
-      return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.SuccessFill24Icon, { css });
+      return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.SuccessFill24Icon, {});
     }
     case "important": {
       return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.WarningFill24Icon, {});
     }
     case "alt": {
-      return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.AltTransportFill24Icon, { css });
+      return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.AltTransportFill24Icon, {});
     }
     case "error": {
-      return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ErrorFill24Icon, { css });
+      return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ErrorFill24Icon, {});
     }
     case "error-secondary": {
-      return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ErrorOutline24Icon, { css });
+      return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ErrorOutline24Icon, {});
     }
     case "neutral": {
-      return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.QuestionFill24Icon, { css });
+      return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.QuestionFill24Icon, {});
     }
     case "service": {
       return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ServiceFill24Icon, {});
     }
     default: {
-      return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.InformationFill24Icon, { css });
+      return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.InformationFill24Icon, {});
     }
   }
 };
@@ -2485,7 +2477,7 @@ var DateTimeSegment = ({
   segment,
   state,
   ariaLabel,
-  ariaDescription,
+  ariaLabelledby,
   variant
 }) => {
   const internalRef = React14.useRef(null);
@@ -2515,8 +2507,8 @@ var DateTimeSegment = ({
       borderRadius: "xs",
       fontSize: ["mobile.sm", "desktop.sm"],
       css: styles.dateTimeSegment,
-      "aria-label": ariaDescription,
-      "aria-labelledby": ariaLabel,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
       children: isPaddable(segment.type) ? segment.text.padStart(2, "0") : segment.text
     }
   );
@@ -2565,7 +2557,7 @@ var DateField = ({
       DateTimeSegment,
       {
         segment,
-        ariaDescription: t(getAriaLabel(segment.type)),
+        ariaLabel: t(getAriaLabel(segment.type)),
         state
       },
       index
@@ -2692,7 +2684,7 @@ var DatePicker = ({
     }
     (_a6 = props.onClick) == null ? void 0 : _a6.call(props);
   };
-  const popoverContent = /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Content, { css: styles.calendarPopover, children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Body, { minWidth: "20rem", children: /* @__PURE__ */ jsxRuntime.jsx(
+  const popoverContent = /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Content, { css: styles.calendarPopover, children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Body, { minWidth: "18rem", children: /* @__PURE__ */ jsxRuntime.jsx(
     Calendar2,
     {
       ...calendarProps,
@@ -2901,8 +2893,9 @@ function DateRangePicker({
 var TimeField = ({ state, ...props }) => {
   const ref = React14.useRef(null);
   const { labelProps, fieldProps } = reactAria.useTimeField(props, state, ref);
+  const { t } = useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       react.chakra.label,
       {
         ...labelProps,
@@ -2919,10 +2912,21 @@ var TimeField = ({ state, ...props }) => {
         overflow: "hidden",
         textOverflow: "ellipsis",
         maxWidth: "80%",
-        children: props.label
+        children: [
+          props.label,
+          /* @__PURE__ */ jsxRuntime.jsx(react.Field.RequiredIndicator, {})
+        ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, index) => /* @__PURE__ */ jsxRuntime.jsx(DateTimeSegment, { segment, state }, index)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      DateTimeSegment,
+      {
+        segment,
+        state,
+        ariaLabel: t(getAriaLabel2(segment.type))
+      },
+      index
+    )) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -2933,6 +2937,48 @@ var TimeField = ({ state, ...props }) => {
     )
   ] });
 };
+var getAriaLabel2 = (segmentType) => {
+  switch (segmentType) {
+    case "hour": {
+      return texts12.hour;
+    }
+    case "minute": {
+      return texts12.minute;
+    }
+    case "second": {
+      return texts12.second;
+    }
+    default: {
+      return texts12.default;
+    }
+  }
+};
+var texts12 = createTexts({
+  hour: {
+    nb: "Velg time",
+    nn: "Vel time",
+    sv: "V\xE4lj timme",
+    en: "Choose hour"
+  },
+  minute: {
+    nb: "Velg minutt",
+    nn: "Vel minutt",
+    sv: "V\xE4lj minut",
+    en: "Choose minute"
+  },
+  second: {
+    nb: "Velg sekund",
+    nn: "Vel sekund",
+    sv: "V\xE4lj sekund",
+    en: "Choose second"
+  },
+  default: {
+    nb: "Velg tid",
+    nn: "Vel tid",
+    sv: "V\xE4lj tid",
+    en: "Choose time"
+  }
+});
 var TimePicker = ({
   label: externalLabel,
   value,
@@ -2948,7 +2994,7 @@ var TimePicker = ({
   const isDisabled = isDisabledExternally ?? fieldDisabled ?? false;
   const { t } = useTranslation();
   const locale = useCurrentLocale();
-  const label = externalLabel ?? t(texts12.time);
+  const label = externalLabel ?? t(texts13.time);
   const state = reactStately.useTimeFieldState({
     value,
     defaultValue,
@@ -2981,15 +3027,15 @@ var TimePicker = ({
       })
     );
   };
-  const backwardsLabel = `${t(texts12.backwards)} ${minuteInterval} ${t(
-    texts12.minutes
+  const backwardsLabel = `${t(texts13.backwards)} ${minuteInterval} ${t(
+    texts13.minutes
   )}`;
-  const forwardsLabel = `${t(texts12.forwards)} ${minuteInterval} ${t(
-    texts12.minutes
+  const forwardsLabel = `${t(texts13.forwards)} ${minuteInterval} ${t(
+    texts13.minutes
   )}`;
-  const inputLabel = label ?? t(texts12.time);
+  const inputLabel = label ?? t(texts13.time);
   const ariaLabel = `${inputLabel} \u2013 ${t(
-    texts12.selectedTimeIs(`${(dateTime == null ? void 0 : dateTime.hour) ?? 0} ${(dateTime == null ? void 0 : dateTime.minute) ?? 0}`)
+    texts13.selectedTimeIs(`${(dateTime == null ? void 0 : dateTime.hour) ?? 0} ${(dateTime == null ? void 0 : dateTime.minute) ?? 0}`)
   )}`;
   return /* @__PURE__ */ jsxRuntime.jsx(Field3, { as: "time", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
     StyledField,
@@ -3002,7 +3048,6 @@ var TimePicker = ({
       opacity: isDisabled ? 0.5 : 1,
       pointerEvents: isDisabled ? "none" : "auto",
       "aria-disabled": isDisabled,
-      "aria-live": "assertive",
       "aria-label": ariaLabel,
       position: "relative",
       ...boxProps,
@@ -3042,7 +3087,7 @@ var TimePicker = ({
     }
   ) });
 };
-var texts12 = createTexts({
+var texts13 = createTexts({
   selectedTimeIs: (time) => ({
     nb: `Valgt tidspunkt er ${time}`,
     nn: `Valt tidspunkt er ${time}`,
@@ -3184,7 +3229,7 @@ var DrawerCloseTrigger = function DrawerCloseTrigger2({
     {
       variant: "ghost",
       icon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CloseFill24Icon, {}),
-      label: t(texts13.close)
+      label: t(texts14.close)
     }
   ) : /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "md" }) });
 };
@@ -3198,7 +3243,7 @@ var DrawerBackTrigger = ({
     {
       variant: "ghost",
       icon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowLeftFill24Icon, {}),
-      label: t(texts13.back)
+      label: t(texts14.back)
     }
   ) });
 };
@@ -3230,7 +3275,7 @@ var DrawerBackdrop = react.Drawer.Backdrop;
 var DrawerTitle = react.Drawer.Title;
 var DrawerActionTrigger = react.Drawer.ActionTrigger;
 var DrawerHeader = react.Drawer.Header;
-var texts13 = createTexts({
+var texts14 = createTexts({
   back: {
     en: "Back",
     nb: "Tilbake",
@@ -3260,7 +3305,7 @@ var TextLink = ({
 }) => {
   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;
+  const externalLabel = t ? t(texts15.externalLink) : texts15.externalLink.en;
   if (props.asChild && React14.isValidElement(children)) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       react.Link,
@@ -3299,7 +3344,7 @@ var TextLink = ({
     }
   );
 };
-var texts14 = createTexts({
+var texts15 = createTexts({
   externalLink: {
     nb: "Ekstern lenke",
     nn: "Ekstern lenke",
@@ -3332,20 +3377,7 @@ var ErrorSummary = ({
       tabIndex: -1,
       children: [
         heading && /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { css: styles.heading, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            spor_icon_react_star.ErrorFill24Icon,
-            {
-              css: {
-                flexShrink: 0,
-                "& path:first-of-type": {
-                  fill: `icon.critical`
-                },
-                "& path:not(:first-of-type)": {
-                  fill: `surface.critical`
-                }
-              }
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ErrorFill24Icon, {}),
           /* @__PURE__ */ jsxRuntime.jsx(Heading, { as: headingLevel, variant: "md", autoId: true, ref: headingRef, children: heading })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(List, { css: styles.list, gap: 2, children })
@@ -3685,10 +3717,10 @@ function Autocomplete({
           }
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts15.clearValue), children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "xs", tabIndex: 0 }) }) })
+      /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts16.clearValue), children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "xs", tabIndex: 0 }) }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.Content, { children: [
-      !loading && /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Empty, { children: emptyLabel ?? t(texts15.noItemsFound) }),
+      !loading && /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Empty, { children: emptyLabel ?? t(texts16.noItemsFound) }),
       loading ? /* @__PURE__ */ jsxRuntime.jsx(ColorSpinner, { width: "1.5rem", p: "2" }) : filteredChildren
     ] }) })
   ] });
@@ -3747,7 +3779,7 @@ var extractItemsFromChildren = (children) => {
   });
   return items;
 };
-var texts15 = createTexts({
+var texts16 = createTexts({
   noItemsFound: {
     nb: "Ingen resultater",
     nn: "Ingen resultat",
@@ -4564,7 +4596,7 @@ var NumericStepper = ({
           {
             icon: /* @__PURE__ */ jsxRuntime.jsx(SubtractIcon, { stepLabel: clampedStepSize }),
             "aria-label": t(
-              texts16.decrementButtonAriaLabel(
+              texts17.decrementButtonAriaLabel(
                 clampedStepSize,
                 stepSize === 1 ? ariaLabelContext.singular : ariaLabelContext.plural
               )
@@ -4591,7 +4623,7 @@ var NumericStepper = ({
             css: styles.input,
             width: `${Math.max(value.toString().length + 1, 3)}ch`,
             "aria-live": "assertive",
-            "aria-label": ariaLabelContext.plural === "" ? "" : t(texts16.currentNumberAriaLabel(ariaLabelContext.plural)),
+            "aria-label": ariaLabelContext.plural === "" ? "" : t(texts17.currentNumberAriaLabel(ariaLabelContext.plural)),
             onChange: (event) => {
               const numericInput = Number(event.target.value);
               if (Number.isNaN(numericInput)) {
@@ -4612,7 +4644,7 @@ var NumericStepper = ({
             paddingX: 0.5,
             padding: 0,
             textAlign: "center",
-            "aria-label": ariaLabelContext.plural === "" ? "" : t(texts16.currentNumberAriaLabel(ariaLabelContext.plural)),
+            "aria-label": ariaLabelContext.plural === "" ? "" : t(texts17.currentNumberAriaLabel(ariaLabelContext.plural)),
             children: value
           }
         ),
@@ -4622,7 +4654,7 @@ var NumericStepper = ({
             ref: addButtonRef,
             icon: /* @__PURE__ */ jsxRuntime.jsx(AddIcon, { stepLabel: clampedStepSize }),
             "aria-label": t(
-              texts16.incrementButtonAriaLabel(
+              texts17.incrementButtonAriaLabel(
                 clampedStepSize,
                 stepSize === 1 ? ariaLabelContext.singular : ariaLabelContext.plural
               )
@@ -4696,7 +4728,7 @@ var AddIcon = ({ stepLabel }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Frag
   ] }),
   stepLabel > 1 && /* @__PURE__ */ jsxRuntime.jsx(react.chakra.span, { paddingRight: "1", children: stepLabel.toString() })
 ] });
-var texts16 = createTexts({
+var texts17 = createTexts({
   currentNumberAriaLabel(ariaContext) {
     return {
       nb: `Valgt antall ${ariaContext}`,
@@ -4762,7 +4794,7 @@ var PasswordInput = ({
             setVisible(!visible);
           },
           size,
-          children: visible ? t(texts17.hidePassword) : t(texts17.showPassword)
+          children: visible ? t(texts18.hidePassword) : t(texts18.showPassword)
         }
       ),
       size,
@@ -4787,7 +4819,7 @@ var VisibilityTrigger = ({
     }
   );
 };
-var texts17 = createTexts({
+var texts18 = createTexts({
   showPassword: {
     nb: "Vis",
     nn: "Vis",
@@ -4839,7 +4871,7 @@ var CountryCodeSelect = ({
       positioning: { placement: "bottom", flip: false },
       collection: filteredCallingCodes,
       lazyMount: true,
-      "aria-label": t(texts18.countryCode),
+      "aria-label": t(texts19.countryCode),
       sideRadiusVariant: "rightSideSquare",
       size: props.size,
       role: "combobox",
@@ -4847,7 +4879,7 @@ var CountryCodeSelect = ({
     }
   );
 };
-var texts18 = createTexts({
+var texts19 = createTexts({
   countryCode: {
     nb: "Landkode",
     nn: "Landskode",
@@ -4871,7 +4903,7 @@ var PhoneNumberInput = ({
     size = "md"
   } = props;
   const { t } = useTranslation();
-  const label = externalLabel ?? (optional ? t(texts19.phoneNumberOptional) : t(texts19.phoneNumber));
+  const label = externalLabel ?? (optional ? t(texts20.phoneNumberOptional) : t(texts20.phoneNumber));
   const [value, onChange] = react.useControllableState({
     value: externalValue,
     onChange: externalOnChange,
@@ -4927,7 +4959,7 @@ var PhoneNumberInput = ({
     )
   ] });
 };
-var texts19 = createTexts({
+var texts20 = createTexts({
   phoneNumber: {
     nb: "Telefonnummer",
     nn: "Telefonnummer",
@@ -4980,16 +5012,16 @@ var SearchInput = ({
           variant: "ghost",
           type: "button",
           size: "sm",
-          "aria-label": t(texts20.reset),
+          "aria-label": t(texts21.reset),
           icon: size == "md" ? /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CloseOutline24Icon, {}) : /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CloseOutline18Icon, {}),
           onClick: onReset
         }
       ),
-      label: label ?? t(texts20.label)
+      label: label ?? t(texts21.label)
     }
   );
 };
-var texts20 = createTexts({
+var texts21 = createTexts({
   label: {
     nb: "S\xF8k",
     nn: "S\xF8k",
@@ -6043,14 +6075,14 @@ var JumpButton = ({
       as: "button",
       ref,
       css: styles.root,
-      "aria-label": direction === "forward" ? t(texts21.forward) : t(texts21.backward),
+      "aria-label": direction === "forward" ? t(texts22.forward) : t(texts22.backward),
       disabled,
       ...props,
       children: direction === "forward" ? /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.Forward15MediaControllerFill30Icon, { css: styles.icon }) : /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.Backward15MediaControllerFill30Icon, { css: styles.icon })
     }
   );
 };
-var texts21 = createTexts({
+var texts22 = createTexts({
   forward: {
     nb: "15 sekunder frem",
     nn: "15 sekunder fram",
@@ -6078,14 +6110,14 @@ var PlayPauseButton = ({
       ref,
       as: "button",
       css: styles.root,
-      "aria-label": playing ? t(texts22.pause) : t(texts22.play),
+      "aria-label": playing ? t(texts23.pause) : t(texts23.play),
       disabled,
       ...props,
       children: playing ? /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.PauseMediaControllerFill24Icon, { css: styles.icon }) : /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.PlayMediaControllerFill24Icon, { css: styles.icon })
     }
   );
 };
-var texts22 = createTexts({
+var texts23 = createTexts({
   pause: {
     nb: "Pause",
     nn: "Pause",
@@ -6113,14 +6145,14 @@ var SkipButton = ({
       ref,
       as: "button",
       css: styles.root,
-      "aria-label": direction === "forward" ? t(texts23.next) : t(texts23.previous),
+      "aria-label": direction === "forward" ? t(texts24.next) : t(texts24.previous),
       disabled,
       ...props,
       children: direction === "forward" ? /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.NextMediaControllerFill30Icon, { css: styles.icon }) : /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.PreviousMediaControllerFill30Icon, { css: styles.icon })
     }
   );
 };
-var texts23 = createTexts({
+var texts24 = createTexts({
   next: {
     nb: "Neste",
     nn: "Neste",
@@ -6235,7 +6267,7 @@ var NudgeActions = ({ ...props }) => {
 var NextButton = ({ isLastStep, onNext }) => {
   const { t } = useTranslation();
   if (isLastStep)
-    return /* @__PURE__ */ jsxRuntime.jsx(react.PopoverCloseTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "tertiary", size: "xs", children: t(texts24.close) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(react.PopoverCloseTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "tertiary", size: "xs", children: t(texts25.close) }) });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     {
@@ -6243,11 +6275,11 @@ var NextButton = ({ isLastStep, onNext }) => {
       size: "xs",
       rightIcon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowRightFill18Icon, {}),
       onClick: onNext,
-      children: t(texts24.nextStep)
+      children: t(texts25.nextStep)
     }
   );
 };
-var texts24 = createTexts({
+var texts25 = createTexts({
   nextStep: {
     nb: "Neste",
     nn: "Neste",
@@ -6323,7 +6355,7 @@ var PaginationItem = ({
           to: rootProps.getHref(props.value)
         },
         ref,
-        "aria-label": t(texts25.pageOf(props.value, totalPages)),
+        "aria-label": t(texts26.pageOf(props.value, totalPages)),
         ...props,
         children: props.value
       }
@@ -6334,7 +6366,7 @@ var PaginationItem = ({
     {
       as: props.as ?? "button",
       ref,
-      "aria-label": t(texts25.pageOf(props.value, totalPages)),
+      "aria-label": t(texts26.pageOf(props.value, totalPages)),
       "aria-current": page === props.value,
       ...props,
       children: props.value
@@ -6364,7 +6396,7 @@ var PaginationPrevTrigger = ({
         },
         ref,
         css: styles.item,
-        "aria-label": t(texts25.previousPage),
+        "aria-label": t(texts26.previousPage),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownLeftOutline18Icon, {})
       }
@@ -6375,7 +6407,7 @@ var PaginationPrevTrigger = ({
     {
       ref,
       asChild: true,
-      "aria-label": t(texts25.previousPage),
+      "aria-label": t(texts26.previousPage),
       as: props.as || "button",
       css: styles.item,
       ...props,
@@ -6404,7 +6436,7 @@ var PaginationNextTrigger = ({
           to: rootProps.getHref(props.value)
         },
         css: styles.item,
-        "aria-label": t(texts25.nextPage),
+        "aria-label": t(texts26.nextPage),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownRightOutline18Icon, {})
       }
@@ -6415,7 +6447,7 @@ var PaginationNextTrigger = ({
     {
       ref,
       css: styles.item,
-      "aria-label": t(texts25.nextPage),
+      "aria-label": t(texts26.nextPage),
       as: props.as || "button",
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownRightOutline18Icon, {})
@@ -6442,7 +6474,7 @@ var PaginationItems = (props) => {
     );
   }) });
 };
-var texts25 = createTexts({
+var texts26 = createTexts({
   previousPage: {
     nb: "Forrige side",
     nn: "F\xF8rre side",
@@ -6542,7 +6574,7 @@ var ProgressIndicator = ({
       "aria-valuemin": 1,
       "aria-valuemax": numberOfSteps,
       "aria-valuenow": activeStep,
-      "aria-valuetext": t(texts26.stepsOf(activeStep, numberOfSteps)),
+      "aria-valuetext": t(texts27.stepsOf(activeStep, numberOfSteps)),
       ref,
       children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: { ...styles.container, ...css }, children: Array.from({ length: numberOfSteps }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
         react.Box,
@@ -6561,7 +6593,7 @@ var ProgressIndicator = ({
     }
   );
 };
-var texts26 = createTexts({
+var texts27 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep} av ${numberOfSteps}`,
     nn: `Steg ${activeStep} av ${numberOfSteps}`,
@@ -6757,7 +6789,7 @@ var Stepper = function Stepper2({
               /* @__PURE__ */ jsxRuntime.jsx(
                 IconButton,
                 {
-                  "aria-label": t(texts27.back),
+                  "aria-label": t(texts28.back),
                   icon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowLeftFill24Icon, {}),
                   variant: "ghost",
                   size: "sm",
@@ -6781,7 +6813,7 @@ var Stepper = function Stepper2({
                   children: heading
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: style.stepCounter, "data-part": "step-counter", children: t(texts27.stepsOf(activeStep, numberOfSteps)) })
+              /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: style.stepCounter, "data-part": "step-counter", children: t(texts28.stepsOf(activeStep, numberOfSteps)) })
             ]
           }
         ) }),
@@ -6800,7 +6832,7 @@ var Stepper = function Stepper2({
     }
   ) });
 };
-var texts27 = createTexts({
+var texts28 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep}/${numberOfSteps}`,
     nn: `Steg ${activeStep}/${numberOfSteps}`,
@@ -7687,7 +7719,9 @@ var textareaRecipe = react.defineRecipe({
     borderTop: "0.8rem solid transparent",
     "&:focus-visible, &:not(:placeholder-shown)": {
       borderTop: "var(--label-height) solid transparent"
-    }
+    },
+    fontSize: "mobile.md",
+    paddingLeft: 3
   },
   variants: {
     variant: {
@@ -9010,7 +9044,8 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
       outlineColor: "outline.floating",
       boxShadow: "md",
       backgroundColor: "surface.floating",
-      minHeight: "min-content"
+      minHeight: "min-content",
+      maxWidth: "100vw"
     },
     rangeCalendarPopover: {
       width: "43rem",