@vygruppen/spor-react 13.4.2 → 13.4.3

package/dist/index.mjs

@@ -208,8 +208,8 @@ function useTranslation() {
   };
   return { t, language };
 }
-function createTexts(texts28) {
-  return texts28;
+function createTexts(texts29) {
+  return texts29;
 }
 function Lottie({ animationData }) {
   const { View } = useLottie({ animationData });
@@ -2466,7 +2466,7 @@ var DateTimeSegment = ({
   segment,
   state,
   ariaLabel,
-  ariaDescription,
+  ariaLabelledby,
   variant
 }) => {
   const internalRef = useRef(null);
@@ -2496,8 +2496,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
     }
   );
@@ -2546,7 +2546,7 @@ var DateField = ({
       DateTimeSegment,
       {
         segment,
-        ariaDescription: t(getAriaLabel(segment.type)),
+        ariaLabel: t(getAriaLabel(segment.type)),
         state
       },
       index
@@ -2673,7 +2673,7 @@ var DatePicker = ({
     }
     (_a6 = props.onClick) == null ? void 0 : _a6.call(props);
   };
-  const popoverContent = /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsx(Popover$1.Content, { css: styles.calendarPopover, children: /* @__PURE__ */ jsx(Popover$1.Body, { minWidth: "20rem", children: /* @__PURE__ */ jsx(
+  const popoverContent = /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsx(Popover$1.Content, { css: styles.calendarPopover, children: /* @__PURE__ */ jsx(Popover$1.Body, { minWidth: "18rem", children: /* @__PURE__ */ jsx(
     Calendar2,
     {
       ...calendarProps,
@@ -2882,8 +2882,9 @@ function DateRangePicker({
 var TimeField = ({ state, ...props }) => {
   const ref = useRef(null);
   const { labelProps, fieldProps } = useTimeField(props, state, ref);
+  const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       chakra.label,
       {
         ...labelProps,
@@ -2900,10 +2901,21 @@ var TimeField = ({ state, ...props }) => {
         overflow: "hidden",
         textOverflow: "ellipsis",
         maxWidth: "80%",
-        children: props.label
+        children: [
+          props.label,
+          /* @__PURE__ */ jsx(Field.RequiredIndicator, {})
+        ]
       }
     ),
-    /* @__PURE__ */ jsx(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, index) => /* @__PURE__ */ jsx(DateTimeSegment, { segment, state }, index)) }),
+    /* @__PURE__ */ jsx(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, index) => /* @__PURE__ */ jsx(
+      DateTimeSegment,
+      {
+        segment,
+        state,
+        ariaLabel: t(getAriaLabel2(segment.type))
+      },
+      index
+    )) }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -2914,6 +2926,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,
@@ -2929,7 +2983,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 = useTimeFieldState({
     value,
     defaultValue,
@@ -2962,15 +3016,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__ */ jsx(Field3, { as: "time", ...boxProps, children: /* @__PURE__ */ jsxs(
     StyledField,
@@ -2983,7 +3037,6 @@ var TimePicker = ({
       opacity: isDisabled ? 0.5 : 1,
       pointerEvents: isDisabled ? "none" : "auto",
       "aria-disabled": isDisabled,
-      "aria-live": "assertive",
       "aria-label": ariaLabel,
       position: "relative",
       ...boxProps,
@@ -3023,7 +3076,7 @@ var TimePicker = ({
     }
   ) });
 };
-var texts12 = createTexts({
+var texts13 = createTexts({
   selectedTimeIs: (time) => ({
     nb: `Valgt tidspunkt er ${time}`,
     nn: `Valt tidspunkt er ${time}`,
@@ -3165,7 +3218,7 @@ var DrawerCloseTrigger = function DrawerCloseTrigger2({
     {
       variant: "ghost",
       icon: /* @__PURE__ */ jsx(CloseFill24Icon, {}),
-      label: t(texts13.close)
+      label: t(texts14.close)
     }
   ) : /* @__PURE__ */ jsx(CloseButton, { size: "md" }) });
 };
@@ -3179,7 +3232,7 @@ var DrawerBackTrigger = ({
     {
       variant: "ghost",
       icon: /* @__PURE__ */ jsx(ArrowLeftFill24Icon, {}),
-      label: t(texts13.back)
+      label: t(texts14.back)
     }
   ) });
 };
@@ -3211,7 +3264,7 @@ var DrawerBackdrop = Drawer$1.Backdrop;
 var DrawerTitle = Drawer$1.Title;
 var DrawerActionTrigger = Drawer$1.ActionTrigger;
 var DrawerHeader = Drawer$1.Header;
-var texts13 = createTexts({
+var texts14 = createTexts({
   back: {
     en: "Back",
     nb: "Tilbake",
@@ -3241,7 +3294,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 && isValidElement(children)) {
     return /* @__PURE__ */ jsx(
       Link,
@@ -3280,7 +3333,7 @@ var TextLink = ({
     }
   );
 };
-var texts14 = createTexts({
+var texts15 = createTexts({
   externalLink: {
     nb: "Ekstern lenke",
     nn: "Ekstern lenke",
@@ -3666,10 +3719,10 @@ function Autocomplete({
           }
         }
       ) }),
-      /* @__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.IndicatorGroup, { children: /* @__PURE__ */ jsx(Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts16.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(texts15.noItemsFound) }),
+      !loading && /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyLabel ?? t(texts16.noItemsFound) }),
       loading ? /* @__PURE__ */ jsx(ColorSpinner, { width: "1.5rem", p: "2" }) : filteredChildren
     ] }) })
   ] });
@@ -3728,7 +3781,7 @@ var extractItemsFromChildren = (children) => {
   });
   return items;
 };
-var texts15 = createTexts({
+var texts16 = createTexts({
   noItemsFound: {
     nb: "Ingen resultater",
     nn: "Ingen resultat",
@@ -4545,7 +4598,7 @@ var NumericStepper = ({
           {
             icon: /* @__PURE__ */ jsx(SubtractIcon, { stepLabel: clampedStepSize }),
             "aria-label": t(
-              texts16.decrementButtonAriaLabel(
+              texts17.decrementButtonAriaLabel(
                 clampedStepSize,
                 stepSize === 1 ? ariaLabelContext.singular : ariaLabelContext.plural
               )
@@ -4572,7 +4625,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)) {
@@ -4593,7 +4646,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
           }
         ),
@@ -4603,7 +4656,7 @@ var NumericStepper = ({
             ref: addButtonRef,
             icon: /* @__PURE__ */ jsx(AddIcon, { stepLabel: clampedStepSize }),
             "aria-label": t(
-              texts16.incrementButtonAriaLabel(
+              texts17.incrementButtonAriaLabel(
                 clampedStepSize,
                 stepSize === 1 ? ariaLabelContext.singular : ariaLabelContext.plural
               )
@@ -4677,7 +4730,7 @@ var AddIcon = ({ stepLabel }) => /* @__PURE__ */ jsxs(Fragment, { children: [
   ] }),
   stepLabel > 1 && /* @__PURE__ */ jsx(chakra.span, { paddingRight: "1", children: stepLabel.toString() })
 ] });
-var texts16 = createTexts({
+var texts17 = createTexts({
   currentNumberAriaLabel(ariaContext) {
     return {
       nb: `Valgt antall ${ariaContext}`,
@@ -4743,7 +4796,7 @@ var PasswordInput = ({
             setVisible(!visible);
           },
           size,
-          children: visible ? t(texts17.hidePassword) : t(texts17.showPassword)
+          children: visible ? t(texts18.hidePassword) : t(texts18.showPassword)
         }
       ),
       size,
@@ -4768,7 +4821,7 @@ var VisibilityTrigger = ({
     }
   );
 };
-var texts17 = createTexts({
+var texts18 = createTexts({
   showPassword: {
     nb: "Vis",
     nn: "Vis",
@@ -4820,7 +4873,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",
@@ -4828,7 +4881,7 @@ var CountryCodeSelect = ({
     }
   );
 };
-var texts18 = createTexts({
+var texts19 = createTexts({
   countryCode: {
     nb: "Landkode",
     nn: "Landskode",
@@ -4852,7 +4905,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] = useControllableState({
     value: externalValue,
     onChange: externalOnChange,
@@ -4908,7 +4961,7 @@ var PhoneNumberInput = ({
     )
   ] });
 };
-var texts19 = createTexts({
+var texts20 = createTexts({
   phoneNumber: {
     nb: "Telefonnummer",
     nn: "Telefonnummer",
@@ -4961,16 +5014,16 @@ var SearchInput = ({
           variant: "ghost",
           type: "button",
           size: "sm",
-          "aria-label": t(texts20.reset),
+          "aria-label": t(texts21.reset),
           icon: size == "md" ? /* @__PURE__ */ jsx(CloseOutline24Icon, {}) : /* @__PURE__ */ jsx(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",
@@ -6024,14 +6077,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__ */ jsx(Forward15MediaControllerFill30Icon, { css: styles.icon }) : /* @__PURE__ */ jsx(Backward15MediaControllerFill30Icon, { css: styles.icon })
     }
   );
 };
-var texts21 = createTexts({
+var texts22 = createTexts({
   forward: {
     nb: "15 sekunder frem",
     nn: "15 sekunder fram",
@@ -6059,14 +6112,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__ */ jsx(PauseMediaControllerFill24Icon, { css: styles.icon }) : /* @__PURE__ */ jsx(PlayMediaControllerFill24Icon, { css: styles.icon })
     }
   );
 };
-var texts22 = createTexts({
+var texts23 = createTexts({
   pause: {
     nb: "Pause",
     nn: "Pause",
@@ -6094,14 +6147,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__ */ jsx(NextMediaControllerFill30Icon, { css: styles.icon }) : /* @__PURE__ */ jsx(PreviousMediaControllerFill30Icon, { css: styles.icon })
     }
   );
 };
-var texts23 = createTexts({
+var texts24 = createTexts({
   next: {
     nb: "Neste",
     nn: "Neste",
@@ -6216,7 +6269,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(texts24.close) }) });
+    return /* @__PURE__ */ jsx(PopoverCloseTrigger, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", children: t(texts25.close) }) });
   return /* @__PURE__ */ jsx(
     Button,
     {
@@ -6224,11 +6277,11 @@ var NextButton = ({ isLastStep, onNext }) => {
       size: "xs",
       rightIcon: /* @__PURE__ */ jsx(ArrowRightFill18Icon, {}),
       onClick: onNext,
-      children: t(texts24.nextStep)
+      children: t(texts25.nextStep)
     }
   );
 };
-var texts24 = createTexts({
+var texts25 = createTexts({
   nextStep: {
     nb: "Neste",
     nn: "Neste",
@@ -6304,7 +6357,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
       }
@@ -6315,7 +6368,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
@@ -6345,7 +6398,7 @@ var PaginationPrevTrigger = ({
         },
         ref,
         css: styles.item,
-        "aria-label": t(texts25.previousPage),
+        "aria-label": t(texts26.previousPage),
         ...props,
         children: /* @__PURE__ */ jsx(DropdownLeftOutline18Icon, {})
       }
@@ -6356,7 +6409,7 @@ var PaginationPrevTrigger = ({
     {
       ref,
       asChild: true,
-      "aria-label": t(texts25.previousPage),
+      "aria-label": t(texts26.previousPage),
       as: props.as || "button",
       css: styles.item,
       ...props,
@@ -6385,7 +6438,7 @@ var PaginationNextTrigger = ({
           to: rootProps.getHref(props.value)
         },
         css: styles.item,
-        "aria-label": t(texts25.nextPage),
+        "aria-label": t(texts26.nextPage),
         ...props,
         children: /* @__PURE__ */ jsx(DropdownRightOutline18Icon, {})
       }
@@ -6396,7 +6449,7 @@ var PaginationNextTrigger = ({
     {
       ref,
       css: styles.item,
-      "aria-label": t(texts25.nextPage),
+      "aria-label": t(texts26.nextPage),
       as: props.as || "button",
       ...props,
       children: /* @__PURE__ */ jsx(DropdownRightOutline18Icon, {})
@@ -6423,7 +6476,7 @@ var PaginationItems = (props) => {
     );
   }) });
 };
-var texts25 = createTexts({
+var texts26 = createTexts({
   previousPage: {
     nb: "Forrige side",
     nn: "F\xF8rre side",
@@ -6523,7 +6576,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__ */ jsx(Box, { css: { ...styles.container, ...css }, children: Array.from({ length: numberOfSteps }, (_, index) => /* @__PURE__ */ jsx(
         Box,
@@ -6542,7 +6595,7 @@ var ProgressIndicator = ({
     }
   );
 };
-var texts26 = createTexts({
+var texts27 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep} av ${numberOfSteps}`,
     nn: `Steg ${activeStep} av ${numberOfSteps}`,
@@ -6738,7 +6791,7 @@ var Stepper = function Stepper2({
               /* @__PURE__ */ jsx(
                 IconButton,
                 {
-                  "aria-label": t(texts27.back),
+                  "aria-label": t(texts28.back),
                   icon: /* @__PURE__ */ jsx(ArrowLeftFill24Icon, {}),
                   variant: "ghost",
                   size: "sm",
@@ -6762,7 +6815,7 @@ var Stepper = function Stepper2({
                   children: heading
                 }
               ),
-              /* @__PURE__ */ jsx(Box, { css: style.stepCounter, "data-part": "step-counter", children: t(texts27.stepsOf(activeStep, numberOfSteps)) })
+              /* @__PURE__ */ jsx(Box, { css: style.stepCounter, "data-part": "step-counter", children: t(texts28.stepsOf(activeStep, numberOfSteps)) })
             ]
           }
         ) }),
@@ -6781,7 +6834,7 @@ var Stepper = function Stepper2({
     }
   ) });
 };
-var texts27 = createTexts({
+var texts28 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep}/${numberOfSteps}`,
     nn: `Steg ${activeStep}/${numberOfSteps}`,
@@ -7668,7 +7721,9 @@ var textareaRecipe = defineRecipe({
     borderTop: "0.8rem solid transparent",
     "&:focus-visible, &:not(:placeholder-shown)": {
       borderTop: "var(--label-height) solid transparent"
-    }
+    },
+    fontSize: "mobile.md",
+    paddingLeft: 3
   },
   variants: {
     variant: {
@@ -8991,7 +9046,8 @@ var datePickerSlotRecipe = defineSlotRecipe({
       outlineColor: "outline.floating",
       boxShadow: "md",
       backgroundColor: "surface.floating",
-      minHeight: "min-content"
+      minHeight: "min-content",
+      maxWidth: "100vw"
     },
     rangeCalendarPopover: {
       width: "43rem",