@vygruppen/spor-react 13.4.2 → 13.4.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@13.4.2 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@13.4.3 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,17 +11,17 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-ESM dist/index.mjs           350.52 KB
-ESM dist/icons/index.mjs     110.00 B
-ESM dist/index.mjs.map       745.68 KB
-ESM dist/icons/index.mjs.map 157.00 B
-ESM ⚡️ Build success in 2121ms
-CJS dist/index.cjs           375.08 KB
+CJS dist/index.cjs           376.07 KB
 CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       745.68 KB
+CJS dist/index.cjs.map       747.62 KB
 CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2121ms
-DTS ⚡️ Build success in 17019ms
+CJS ⚡️ Build success in 2665ms
+ESM dist/index.mjs           351.48 KB
+ESM dist/icons/index.mjs     110.00 B
+ESM dist/index.mjs.map       747.62 KB
+ESM dist/icons/index.mjs.map 157.00 B
+ESM ⚡️ Build success in 2666ms
+DTS ⚡️ Build success in 22585ms
 DTS dist/icons/index.d.ts  44.00 B
 DTS dist/index.d.ts        154.14 KB
 DTS dist/icons/index.d.cts 44.00 B

package/.turbo/turbo-postinstall.log

@@ -1,11 +1,12 @@
 
-> @vygruppen/spor-react@13.4.2 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@13.4.3 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
-◇ injected env (0) from .env // tip: ⌘ suppress logs { quiet: true }
+◇ injected env (0) from .env // tip: ⌘ multiple files { path: ['.env.local', '.env'] }
 ┌  Chakra CLI ⚡️
 [?25l│
-◇  ✅ Generated conditions typings
+◒  Generating conditions types...
+◇  ✅ Generated conditions typings
 [?25h[?25l│
 ◒  Generating recipe types...
 ◇  ✅ Generated recipe typings

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vygruppen/spor-react
 
+## 13.4.3
+
+### Patch Changes
+
+- dea15ec: Solve accessibility problems: 1) adjust width of calendar-view in DatePicker to not overflow the screens view. 2) add asterisk to TimePicker when set to required. 3) Remove aria-assertive on errormessage in TimePicker.
+- 3426845: Add aria-labels to dateTime segments in TimePicker
+- dc7f5af: Add paddingleft to textarea and change the color of surface.ghost.hover in Vy-Digital theme
+- Updated dependencies [3b905c8]
+- Updated dependencies [5aabe19]
+- Updated dependencies [dc7f5af]
+  - @vygruppen/spor-design-tokens@5.0.5
+
 ## 13.4.2
 
 ### Patch Changes

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 });
@@ -2485,7 +2485,7 @@ var DateTimeSegment = ({
   segment,
   state,
   ariaLabel,
-  ariaDescription,
+  ariaLabelledby,
   variant
 }) => {
   const internalRef = React14.useRef(null);
@@ -2515,8 +2515,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 +2565,7 @@ var DateField = ({
       DateTimeSegment,
       {
         segment,
-        ariaDescription: t(getAriaLabel(segment.type)),
+        ariaLabel: t(getAriaLabel(segment.type)),
         state
       },
       index
@@ -2692,7 +2692,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 +2901,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 +2920,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 +2945,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 +3002,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 +3035,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 +3056,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 +3095,7 @@ var TimePicker = ({
     }
   ) });
 };
-var texts12 = createTexts({
+var texts13 = createTexts({
   selectedTimeIs: (time) => ({
     nb: `Valgt tidspunkt er ${time}`,
     nn: `Valt tidspunkt er ${time}`,
@@ -3184,7 +3237,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 +3251,7 @@ var DrawerBackTrigger = ({
     {
       variant: "ghost",
       icon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowLeftFill24Icon, {}),
-      label: t(texts13.back)
+      label: t(texts14.back)
     }
   ) });
 };
@@ -3230,7 +3283,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 +3313,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 +3352,7 @@ var TextLink = ({
     }
   );
 };
-var texts14 = createTexts({
+var texts15 = createTexts({
   externalLink: {
     nb: "Ekstern lenke",
     nn: "Ekstern lenke",
@@ -3685,10 +3738,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 +3800,7 @@ var extractItemsFromChildren = (children) => {
   });
   return items;
 };
-var texts15 = createTexts({
+var texts16 = createTexts({
   noItemsFound: {
     nb: "Ingen resultater",
     nn: "Ingen resultat",
@@ -4564,7 +4617,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 +4644,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 +4665,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 +4675,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 +4749,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 +4815,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 +4840,7 @@ var VisibilityTrigger = ({
     }
   );
 };
-var texts17 = createTexts({
+var texts18 = createTexts({
   showPassword: {
     nb: "Vis",
     nn: "Vis",
@@ -4839,7 +4892,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 +4900,7 @@ var CountryCodeSelect = ({
     }
   );
 };
-var texts18 = createTexts({
+var texts19 = createTexts({
   countryCode: {
     nb: "Landkode",
     nn: "Landskode",
@@ -4871,7 +4924,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 +4980,7 @@ var PhoneNumberInput = ({
     )
   ] });
 };
-var texts19 = createTexts({
+var texts20 = createTexts({
   phoneNumber: {
     nb: "Telefonnummer",
     nn: "Telefonnummer",
@@ -4980,16 +5033,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 +6096,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 +6131,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 +6166,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 +6288,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 +6296,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 +6376,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 +6387,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 +6417,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 +6428,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 +6457,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 +6468,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 +6495,7 @@ var PaginationItems = (props) => {
     );
   }) });
 };
-var texts25 = createTexts({
+var texts26 = createTexts({
   previousPage: {
     nb: "Forrige side",
     nn: "F\xF8rre side",
@@ -6542,7 +6595,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 +6614,7 @@ var ProgressIndicator = ({
     }
   );
 };
-var texts26 = createTexts({
+var texts27 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep} av ${numberOfSteps}`,
     nn: `Steg ${activeStep} av ${numberOfSteps}`,
@@ -6757,7 +6810,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 +6834,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 +6853,7 @@ var Stepper = function Stepper2({
     }
   ) });
 };
-var texts27 = createTexts({
+var texts28 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep}/${numberOfSteps}`,
     nn: `Steg ${activeStep}/${numberOfSteps}`,
@@ -7687,7 +7740,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 +9065,8 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
       outlineColor: "outline.floating",
       boxShadow: "md",
       backgroundColor: "surface.floating",
-      minHeight: "min-content"
+      minHeight: "min-content",
+      maxWidth: "100vw"
     },
     rangeCalendarPopover: {
       width: "43rem",