@vygruppen/spor-react 13.0.1 → 13.0.3

package/dist/index.cjs

@@ -228,8 +228,8 @@ function useTranslation() {
   };
   return { t, language };
 }
-function createTexts(texts28) {
-  return texts28;
+function createTexts(texts27) {
+  return texts27;
 }
 function Lottie({ animationData }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ReactLottie__default.default, { animationData });
@@ -1101,11 +1101,7 @@ var AlertIcon = ({
   variant,
   customIcon: CustomAlertIcon
 }) => {
-  const { t } = useTranslation();
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { ref, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactAria.VisuallyHidden, { children: t(texts5[variant]) }),
-    CustomAlertIcon ? /* @__PURE__ */ jsxRuntime.jsx(CustomAlertIcon, { color: `alert.${variant}.icon` }) : /* @__PURE__ */ jsxRuntime.jsx(BaseAlertIcon, { variant })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { ref, children: CustomAlertIcon ? /* @__PURE__ */ jsxRuntime.jsx(CustomAlertIcon, { color: `alert.${variant}.icon` }) : /* @__PURE__ */ jsxRuntime.jsx(BaseAlertIcon, { variant }) });
 };
 var BaseAlertIcon = ({
   variant
@@ -1148,56 +1144,6 @@ var BaseAlertIcon = ({
     }
   }
 };
-var texts5 = createTexts({
-  info: {
-    nb: "Informasjon",
-    nn: "Informasjon",
-    sv: "Information",
-    en: "Information"
-  },
-  success: {
-    nb: "Suksess",
-    nn: "Suksess",
-    sv: "Succ\xE9",
-    en: "Success"
-  },
-  important: {
-    nb: "Viktig",
-    nn: "Viktig",
-    sv: "Viktig",
-    en: "Important"
-  },
-  alt: {
-    nb: "Alternativ",
-    nn: "Alternativ",
-    sv: "Alternativ",
-    en: "Alternative"
-  },
-  error: {
-    nb: "Feil",
-    nn: "Feil",
-    sv: "Fel",
-    en: "Error"
-  },
-  "error-secondary": {
-    nb: "Feil",
-    nn: "Feil",
-    sv: "Fel",
-    en: "Error"
-  },
-  neutral: {
-    nb: "N\xF8ytral",
-    nn: "N\xF8ytral",
-    sv: "Neutral",
-    en: "Neutral"
-  },
-  service: {
-    nb: "Service",
-    nn: "Service",
-    sv: "Service",
-    en: "Service"
-  }
-});
 var Alert = ({
   ref,
   ...props
@@ -1363,7 +1309,7 @@ var ServiceAlert = ({
             maxWidth: contentWidth,
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { as: headingLevel, alignItems: "center", gap: "1", children: [
-                variant === "service" ? /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ServiceFill24Icon, { "aria-label": t(texts6.service) }) : /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.WarningFill24Icon, { "aria-label": t(texts6["global-deviation"]) }),
+                variant === "service" ? /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ServiceFill24Icon, { "aria-label": t(texts5.service) }) : /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.WarningFill24Icon, { "aria-label": t(texts5["global-deviation"]) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   react.Span,
                   {
@@ -1380,7 +1326,7 @@ var ServiceAlert = ({
                 )
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: [0.5, null, null, 1], children: [
-                notification && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { css: styles.notificationText, children: t(texts6.notification(notification)) }),
+                notification && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { css: styles.notificationText, children: t(texts5.notification(notification)) }),
                 /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownDownFill24Icon, { color: "icon.inverted" }) })
               ] })
             ]
@@ -1391,7 +1337,7 @@ var ServiceAlert = ({
     }
   );
 };
-var texts6 = createTexts({
+var texts5 = createTexts({
   notification: (notification) => {
     const numberNotification = Number(notification);
     return {
@@ -1658,7 +1604,7 @@ var Separator = ({
   ref,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Separator, { ...props, ref, "data-": true });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Separator, { "aria-hidden": "true", ...props, ref, "data-": true });
 };
 var StaticCard = ({
   ref,
@@ -1851,7 +1797,7 @@ function CalendarHeader({ dualView }) {
             variant: "ghost",
             marginLeft: 1,
             disabled: prevButtonProps.isDisabled,
-            "aria-label": t(texts7.previousMonth),
+            "aria-label": t(texts6.previousMonth),
             icon: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.DropdownLeftFill24Icon, {})
           }
         ),
@@ -1893,7 +1839,7 @@ function CalendarHeader({ dualView }) {
             marginRight: 1,
             variant: "ghost",
             disabled: nextButtonProps.isDisabled,
-            "aria-label": t(texts7.nextMonth),
+            "aria-label": t(texts6.nextMonth),
             icon: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.DropdownRightFill24Icon, {})
           }
         )
@@ -1901,7 +1847,7 @@ function CalendarHeader({ dualView }) {
     }
   );
 }
-var texts7 = createTexts({
+var texts6 = createTexts({
   previousMonth: {
     nb: "Forrige m\xE5ned",
     nn: "F\xF8rre m\xE5nad",
@@ -2386,7 +2332,7 @@ var CalendarNavigator = ({
         onPress: onPrevious,
         isDisabled: isPreviousDisabled,
         icon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowLeftOutline24Icon, {}),
-        "aria-label": `${t(texts8.previous)} ${t(texts8[unit])}`
+        "aria-label": `${t(texts7.previous)} ${t(texts7[unit])}`
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2407,12 +2353,12 @@ var CalendarNavigator = ({
         onPress: onNext,
         isDisabled: isNextDisabled,
         icon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowRightOutline24Icon, {}),
-        "aria-label": `${t(texts8.next)} ${t(texts8[unit])}`
+        "aria-label": `${t(texts7.next)} ${t(texts7[unit])}`
       }
     )
   ] });
 };
-var texts8 = createTexts({
+var texts7 = createTexts({
   previous: {
     nb: "Forrige",
     nn: "Forrige",
@@ -2457,7 +2403,7 @@ function Calendar2({
   const styles = recipe({ variant });
   const { calendarProps } = reactAria.useCalendar(props, state);
   const calendarAriaLabel = calendarProps["aria-label"];
-  const ariaLabel = t(texts9.calendar) + (calendarAriaLabel ? ` ${calendarAriaLabel}` : "");
+  const ariaLabel = t(texts8.calendar) + (calendarAriaLabel ? ` ${calendarAriaLabel}` : "");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     react.Box,
     {
@@ -2471,7 +2417,7 @@ function Calendar2({
     }
   );
 }
-var texts9 = createTexts({
+var texts8 = createTexts({
   calendar: {
     nb: "Kalender",
     nn: "Kalender",
@@ -2497,14 +2443,14 @@ var CalendarTriggerButton = ({
     IconButton,
     {
       icon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CalendarOutline24Icon, {}),
-      "aria-label": t(texts10.openCalendar),
+      "aria-label": t(texts9.openCalendar),
       css: styles.calendarTriggerButton,
       variant: "ghost",
       disabled
     }
   ) });
 };
-var texts10 = createTexts({
+var texts9 = createTexts({
   openCalendar: {
     nb: "\xC5pne kalender",
     nn: "\xC5pne kalendar",
@@ -2613,7 +2559,7 @@ var DateField = ({
     )
   ] });
 };
-var texts11 = createTexts({
+var texts10 = createTexts({
   day: {
     nb: "Velg dag",
     nn: "Vel dag",
@@ -2636,16 +2582,16 @@ var texts11 = createTexts({
 var getAriaLabel = (segmentType) => {
   switch (segmentType) {
     case "day": {
-      return texts11.day;
+      return texts10.day;
     }
     case "month": {
-      return texts11.month;
+      return texts10.month;
     }
     case "year": {
-      return texts11.year;
+      return texts10.year;
     }
     default: {
-      return texts11.day;
+      return texts10.day;
     }
   }
 };
@@ -2980,7 +2926,7 @@ var TimePicker = ({
   const isDisabled = isDisabledExternally ?? fieldDisabled ?? false;
   const { t } = useTranslation();
   const locale = useCurrentLocale();
-  const label = externalLabel ?? t(texts12.time);
+  const label = externalLabel ?? t(texts11.time);
   const state = reactStately.useTimeFieldState({
     value,
     defaultValue,
@@ -3013,15 +2959,15 @@ var TimePicker = ({
       })
     );
   };
-  const backwardsLabel = `${t(texts12.backwards)} ${minuteInterval} ${t(
-    texts12.minutes
+  const backwardsLabel = `${t(texts11.backwards)} ${minuteInterval} ${t(
+    texts11.minutes
   )}`;
-  const forwardsLabel = `${t(texts12.forwards)} ${minuteInterval} ${t(
-    texts12.minutes
+  const forwardsLabel = `${t(texts11.forwards)} ${minuteInterval} ${t(
+    texts11.minutes
   )}`;
-  const inputLabel = label ?? t(texts12.time);
+  const inputLabel = label ?? t(texts11.time);
   const ariaLabel = `${inputLabel} \u2013 ${t(
-    texts12.selectedTimeIs(`${(dateTime == null ? void 0 : dateTime.hour) ?? 0} ${(dateTime == null ? void 0 : dateTime.minute) ?? 0}`)
+    texts11.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,
@@ -3074,7 +3020,7 @@ var TimePicker = ({
     }
   ) });
 };
-var texts12 = createTexts({
+var texts11 = createTexts({
   selectedTimeIs: (time) => ({
     nb: `Valgt tidspunkt er ${time}`,
     nn: `Valt tidspunkt er ${time}`,
@@ -3215,7 +3161,7 @@ var DrawerCloseTrigger = function DrawerCloseTrigger2({
     {
       variant: "ghost",
       icon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CloseFill24Icon, {}),
-      label: t(texts13.close)
+      label: t(texts12.close)
     }
   ) : /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "md" }) });
 };
@@ -3229,7 +3175,7 @@ var DrawerBackTrigger = ({
     {
       variant: "ghost",
       icon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowLeftFill24Icon, {}),
-      label: t(texts13.back)
+      label: t(texts12.back)
     }
   ) });
 };
@@ -3261,7 +3207,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 texts12 = createTexts({
   back: {
     en: "Back",
     nb: "Tilbake",
@@ -3577,10 +3523,10 @@ function Autocomplete({
           }
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts14.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(texts13.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(texts14.noItemsFound) }),
+      !loading && /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Empty, { children: emptyLabel ?? t(texts13.noItemsFound) }),
       loading ? /* @__PURE__ */ jsxRuntime.jsx(ColorSpinner, { width: "1.5rem", p: "2" }) : filteredChildren
     ] }) })
   ] });
@@ -3639,7 +3585,7 @@ var extractItemsFromChildren = (children) => {
   });
   return items;
 };
-var texts14 = createTexts({
+var texts13 = createTexts({
   noItemsFound: {
     nb: "Ingen resultater",
     nn: "Ingen resultat",
@@ -4007,6 +3953,19 @@ var FieldsetLegend = react.Fieldset.Legend;
 var FieldsetContent = react.Fieldset.Content;
 var FieldsetHelperText = react.Fieldset.HelperText;
 var FieldsetErrorText = react.Fieldset.ErrorText;
+var InputChip = ({
+  startIcon,
+  endIcon,
+  children,
+  ref,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Tag.Root, { ref, ...rest, as: "button", children: [
+    startIcon && /* @__PURE__ */ jsxRuntime.jsx(react.Tag.StartElement, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: startIcon }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Tag.Label, { children }),
+    endIcon && /* @__PURE__ */ jsxRuntime.jsx(react.Tag.EndElement, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: endIcon }) })
+  ] });
+};
 var ListBox = (props) => {
   const { loading, listBoxRef, state, maxWidth, variant, children } = props;
   const { listBoxProps } = reactAria.useListBox(props, state, listBoxRef);
@@ -4378,7 +4337,7 @@ var NumericStepper = ({
           {
             icon: /* @__PURE__ */ jsxRuntime.jsx(SubtractIcon, { stepLabel: clampedStepSize }),
             "aria-label": t(
-              texts15.decrementButtonAriaLabel(
+              texts14.decrementButtonAriaLabel(
                 clampedStepSize,
                 stepSize === 1 ? ariaLabelContext.singular : ariaLabelContext.plural
               )
@@ -4405,7 +4364,7 @@ var NumericStepper = ({
             css: styles.input,
             width: `${Math.max(value.toString().length + 1, 3)}ch`,
             "aria-live": "assertive",
-            "aria-label": ariaLabelContext.plural === "" ? "" : t(texts15.currentNumberAriaLabel(ariaLabelContext.plural)),
+            "aria-label": ariaLabelContext.plural === "" ? "" : t(texts14.currentNumberAriaLabel(ariaLabelContext.plural)),
             onChange: (event) => {
               const numericInput = Number(event.target.value);
               if (Number.isNaN(numericInput)) {
@@ -4423,7 +4382,7 @@ var NumericStepper = ({
           {
             "aria-live": "assertive",
             paddingX: "0.95rem",
-            "aria-label": ariaLabelContext.plural === "" ? "" : t(texts15.currentNumberAriaLabel(ariaLabelContext.plural)),
+            "aria-label": ariaLabelContext.plural === "" ? "" : t(texts14.currentNumberAriaLabel(ariaLabelContext.plural)),
             children: value
           }
         ),
@@ -4433,7 +4392,7 @@ var NumericStepper = ({
             ref: addButtonRef,
             icon: /* @__PURE__ */ jsxRuntime.jsx(AddIcon, { stepLabel: clampedStepSize }),
             "aria-label": t(
-              texts15.incrementButtonAriaLabel(
+              texts14.incrementButtonAriaLabel(
                 clampedStepSize,
                 stepSize === 1 ? ariaLabelContext.singular : ariaLabelContext.plural
               )
@@ -4507,7 +4466,7 @@ var AddIcon = ({ stepLabel }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Frag
   ] }),
   stepLabel > 1 && /* @__PURE__ */ jsxRuntime.jsx(react.chakra.span, { paddingRight: "1", children: stepLabel.toString() })
 ] });
-var texts15 = createTexts({
+var texts14 = createTexts({
   currentNumberAriaLabel(ariaContext) {
     return {
       nb: `Valgt antall ${ariaContext}`,
@@ -4571,7 +4530,7 @@ var PasswordInput = ({
             event.preventDefault();
             setVisible(!visible);
           },
-          children: visible ? t(texts16.hidePassword) : t(texts16.showPassword)
+          children: visible ? t(texts15.hidePassword) : t(texts15.showPassword)
         }
       ),
       ...rest
@@ -4596,7 +4555,7 @@ var VisibilityTrigger = ({
     }
   );
 };
-var texts16 = createTexts({
+var texts15 = createTexts({
   showPassword: {
     nb: "Vis",
     nn: "Vis",
@@ -4648,14 +4607,14 @@ var CountryCodeSelect = ({
       positioning: { placement: "bottom", flip: false },
       collection: filteredCallingCodes,
       lazyMount: true,
-      "aria-label": t(texts17.countryCode),
+      "aria-label": t(texts16.countryCode),
       sideRadiusVariant: "rightSideSquare",
       role: "combobox",
       children: filteredCallingCodes.items.map((code) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { item: code, children: code.label }, code.label))
     }
   );
 };
-var texts17 = createTexts({
+var texts16 = createTexts({
   countryCode: {
     nb: "Landkode",
     nn: "Landskode",
@@ -4678,7 +4637,7 @@ var PhoneNumberInput = ({
     errorText
   } = props;
   const { t } = useTranslation();
-  const label = externalLabel ?? (optional ? t(texts18.phoneNumberOptional) : t(texts18.phoneNumber));
+  const label = externalLabel ?? (optional ? t(texts17.phoneNumberOptional) : t(texts17.phoneNumber));
   const [value, onChange] = react.useControllableState({
     value: externalValue,
     onChange: externalOnChange,
@@ -4733,7 +4692,7 @@ var PhoneNumberInput = ({
     )
   ] });
 };
-var texts18 = createTexts({
+var texts17 = createTexts({
   phoneNumber: {
     nb: "Telefonnummer",
     nn: "Telefonnummer",
@@ -4785,16 +4744,16 @@ var SearchInput = ({
           variant: "ghost",
           type: "button",
           size: "sm",
-          "aria-label": t(texts19.reset),
+          "aria-label": t(texts18.reset),
           icon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CloseOutline24Icon, {}),
           onClick: onReset
         }
       ),
-      label: label ?? t(texts19.label)
+      label: label ?? t(texts18.label)
     }
   );
 };
-var texts19 = createTexts({
+var texts18 = createTexts({
   label: {
     nb: "S\xF8k",
     nn: "S\xF8k",
@@ -4844,7 +4803,7 @@ var Select = ({
           css: styles.root,
           position: "relative",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "data-attachable": true, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValueText, { withPlaceholder: label ? true : false }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "data-attachable": true, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValueText, { withPlaceholder: !!label }) }),
             label && /* @__PURE__ */ jsxRuntime.jsx(SelectLabel, { css: styles.label, children: label }),
             /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { css: styles.selectContent, baseStyle: css, children })
           ]
@@ -4859,7 +4818,7 @@ var SelectLabel = (props) => {
     react.Select.Label,
     {
       ...props,
-      "data-selected": value.length > 0 ? true : void 0
+      "data-selected": value.length > 0 || void 0
     }
   );
 };
@@ -4870,14 +4829,19 @@ var SelectItem = ({
   const { item, children, description, ...rest } = props;
   const recipe = react.useSlotRecipe({ key: "select" });
   const styles = recipe();
+  const selectContext = react.useSelectContext();
+  const multiple = selectContext.multiple;
+  const isSelected = selectContext.value.includes(item.value);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Select.Item, { item, ...rest, ref, css: styles.item, children: [
+    multiple && /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Root, { checked: isSelected, pointerEvents: "none", children: /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Indicator, {}) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { width: "100%", children: [
       /* @__PURE__ */ jsxRuntime.jsx(react.Select.ItemText, { display: "flex", children }),
       description && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { "data-part": "item-description", css: styles.itemDescription, children: description })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Select.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CheckmarkFill18Icon, {}) })
+    !multiple && /* @__PURE__ */ jsxRuntime.jsx(react.Select.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CheckmarkFill18Icon, {}) })
   ] });
 };
+SelectItem.displayName = "SelectItem";
 var SelectItemGroup = function SelectItemGroup2({
   ref,
   ...props
@@ -4936,6 +4900,8 @@ var SelectValueText = function SelectValueText2({
   ...props
 }) {
   const { children, withPlaceholder, placeholder, ...rest } = props;
+  const selectContext = react.useSelectContext();
+  const multiple = selectContext.multiple;
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Select.ValueText,
     {
@@ -4949,9 +4915,20 @@ var SelectValueText = function SelectValueText2({
           return placeholder;
         if (children)
           return children(items);
-        if (items.length === 1)
+        if (multiple) {
+          return /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { gap: 0.5, marginBottom: 1, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            Badge,
+            {
+              size: "sm",
+              colorPalette: "green",
+              children: select.collection.stringifyItem(item)
+            },
+            select.collection.stringifyItem(item)
+          )) });
+        }
+        if (items.length === 1) {
           return select.collection.stringifyItem(items[0]);
-        return `${items.length} selected`;
+        }
       } })
     }
   );
@@ -4970,6 +4947,9 @@ var Switch = ({
     errorText,
     helperText,
     css,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
     ...rest
   } = props;
   const recipe = react.useSlotRecipe({ key: "switch" });
@@ -4992,7 +4972,15 @@ var Switch = ({
           checked: props.checked,
           css: styles.root,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(react.Switch.HiddenInput, { ref }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.Switch.HiddenInput,
+              {
+                ref,
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledby,
+                "aria-describedby": ariaDescribedby
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Control, { css: styles.control, children: /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Thumb, {}) }),
             label && /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Label, { children: label })
           ]
@@ -5317,7 +5305,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(texts20.externalLink) : texts20.externalLink.en;
+  const externalLabel = t ? t(texts19.externalLink) : texts19.externalLink.en;
   if (props.asChild && React13.isValidElement(children)) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       react.Link,
@@ -5356,7 +5344,7 @@ var TextLink = ({
     }
   );
 };
-var texts20 = createTexts({
+var texts19 = createTexts({
   externalLink: {
     nb: "Ekstern lenke",
     nn: "Ekstern lenke",
@@ -5873,14 +5861,14 @@ var JumpButton = ({
       as: "button",
       ref,
       css: styles.root,
-      "aria-label": direction === "forward" ? t(texts21.forward) : t(texts21.backward),
+      "aria-label": direction === "forward" ? t(texts20.forward) : t(texts20.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 texts20 = createTexts({
   forward: {
     nb: "15 sekunder frem",
     nn: "15 sekunder fram",
@@ -5908,14 +5896,14 @@ var PlayPauseButton = ({
       ref,
       as: "button",
       css: styles.root,
-      "aria-label": playing ? t(texts22.pause) : t(texts22.play),
+      "aria-label": playing ? t(texts21.pause) : t(texts21.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 texts21 = createTexts({
   pause: {
     nb: "Pause",
     nn: "Pause",
@@ -5943,14 +5931,14 @@ var SkipButton = ({
       ref,
       as: "button",
       css: styles.root,
-      "aria-label": direction === "forward" ? t(texts23.next) : t(texts23.previous),
+      "aria-label": direction === "forward" ? t(texts22.next) : t(texts22.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 texts22 = createTexts({
   next: {
     nb: "Neste",
     nn: "Neste",
@@ -6065,7 +6053,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(texts23.close) }) });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     {
@@ -6073,11 +6061,11 @@ var NextButton = ({ isLastStep, onNext }) => {
       size: "xs",
       rightIcon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowRightFill18Icon, {}),
       onClick: onNext,
-      children: t(texts24.nextStep)
+      children: t(texts23.nextStep)
     }
   );
 };
-var texts24 = createTexts({
+var texts23 = createTexts({
   nextStep: {
     nb: "Neste",
     nn: "Neste",
@@ -6153,7 +6141,7 @@ var PaginationItem = ({
           to: rootProps.getHref(props.value)
         },
         ref,
-        "aria-label": t(texts25.pageOf(props.value, totalPages)),
+        "aria-label": t(texts24.pageOf(props.value, totalPages)),
         ...props,
         children: props.value
       }
@@ -6164,7 +6152,7 @@ var PaginationItem = ({
     {
       as: props.as ?? "button",
       ref,
-      "aria-label": t(texts25.pageOf(props.value, totalPages)),
+      "aria-label": t(texts24.pageOf(props.value, totalPages)),
       "aria-current": page === props.value,
       ...props,
       children: props.value
@@ -6194,7 +6182,7 @@ var PaginationPrevTrigger = ({
         },
         ref,
         css: styles.item,
-        "aria-label": t(texts25.previousPage),
+        "aria-label": t(texts24.previousPage),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownLeftOutline18Icon, {})
       }
@@ -6205,7 +6193,7 @@ var PaginationPrevTrigger = ({
     {
       ref,
       asChild: true,
-      "aria-label": t(texts25.previousPage),
+      "aria-label": t(texts24.previousPage),
       as: props.as || "button",
       css: styles.item,
       ...props,
@@ -6234,7 +6222,7 @@ var PaginationNextTrigger = ({
           to: rootProps.getHref(props.value)
         },
         css: styles.item,
-        "aria-label": t(texts25.nextPage),
+        "aria-label": t(texts24.nextPage),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownRightOutline18Icon, {})
       }
@@ -6245,7 +6233,7 @@ var PaginationNextTrigger = ({
     {
       ref,
       css: styles.item,
-      "aria-label": t(texts25.nextPage),
+      "aria-label": t(texts24.nextPage),
       as: props.as || "button",
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownRightOutline18Icon, {})
@@ -6272,7 +6260,7 @@ var PaginationItems = (props) => {
     );
   }) });
 };
-var texts25 = createTexts({
+var texts24 = createTexts({
   previousPage: {
     nb: "Forrige side",
     nn: "F\xF8rre side",
@@ -6363,7 +6351,7 @@ var ProgressIndicator = ({
       "aria-valuemin": 1,
       "aria-valuemax": numberOfSteps,
       "aria-valuenow": activeStep,
-      "aria-valuetext": t(texts26.stepsOf(activeStep, numberOfSteps)),
+      "aria-valuetext": t(texts25.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,
@@ -6382,7 +6370,7 @@ var ProgressIndicator = ({
     }
   );
 };
-var texts26 = createTexts({
+var texts25 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep} av ${numberOfSteps}`,
     nn: `Steg ${activeStep} av ${numberOfSteps}`,
@@ -6472,18 +6460,23 @@ var createToast = ({
   text,
   variant,
   id,
-  duration = 6e3
+  duration = 6e3,
+  width = "sm"
 }) => toaster.create({
   description: text,
   type: variant,
   id: id ?? crypto.randomUUID(),
-  duration
+  duration,
+  meta: { width }
 });
 var Toaster = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Toaster, { toaster, insetInline: { mdDown: "4" }, children: (toast) => /* @__PURE__ */ jsxRuntime.jsxs(react.Toast.Root, { width: { md: "sm" }, role: "alert", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, { variant: toast.type }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(react.Toast.Description, { children: toast.description }) })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Toaster, { toaster, insetInline: { mdDown: "4" }, children: (toast) => {
+    var _a6;
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Toast.Root, { width: { md: (_a6 = toast.meta) == null ? void 0 : _a6.width }, role: "alert", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, { variant: toast.type }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(react.Toast.Description, { children: toast.description }) })
+    ] });
+  } }) });
 };
 var SporProvider = ({
   language = "nb" /* NorwegianBokmal */,
@@ -6563,7 +6556,7 @@ var Stepper = function Stepper2({
               /* @__PURE__ */ jsxRuntime.jsx(
                 IconButton,
                 {
-                  "aria-label": t(texts27.back),
+                  "aria-label": t(texts26.back),
                   icon: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowLeftFill24Icon, {}),
                   variant: "ghost",
                   size: "sm",
@@ -6587,7 +6580,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(texts26.stepsOf(activeStep, numberOfSteps)) })
             ]
           }
         ) }),
@@ -6606,7 +6599,7 @@ var Stepper = function Stepper2({
     }
   ) });
 };
-var texts27 = createTexts({
+var texts26 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep}/${numberOfSteps}`,
     nn: `Steg ${activeStep}/${numberOfSteps}`,
@@ -7195,6 +7188,7 @@ var linkRecipe = react.defineRecipe({
     paddingX: "0.5",
     whiteSpace: "normal",
     wordBreak: "break-word",
+    paddingInline: 0,
     _hover: {
       textDecoration: "none"
     },
@@ -7826,6 +7820,7 @@ var comboboxAnatomy = react$1.comboboxAnatomy.extendWith(
   "indicatorGroup",
   "empty"
 );
+var tagAnatomy = anatomy.createAnatomy("tag").parts("root");
 var menuAnatomy = anatomy.createAnatomy("menu").parts(
   "trigger",
   "content",
@@ -9776,6 +9771,120 @@ var infoTagSlotRecipe = react.defineSlotRecipe({
     size: "md"
   }
 });
+var inputChipSlotRecipe = react.defineSlotRecipe({
+  slots: tagAnatomy.keys(),
+  className: "chakra-tag",
+  base: {
+    root: {
+      display: "flex",
+      direction: "row",
+      width: "fit-content",
+      height: "fit-content",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1",
+      outline: "none",
+      "&:focus": {
+        outline: "2px solid",
+        outlineColor: "outline.focus"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      core: {
+        root: {
+          backgroundColor: "surface",
+          border: "1px solid",
+          borderColor: "outline",
+          "&:hover": {
+            outline: "2px solid",
+            outlineColor: "core.outline.hover"
+          },
+          "&:active": {
+            outline: "none",
+            backgroundColor: "core.surface.active"
+          }
+        }
+      },
+      accent: {
+        root: {
+          backgroundColor: "accent.surface",
+          color: "text.highlight",
+          "& svg": {
+            color: "icon.highlight"
+          },
+          "&:hover": {
+            backgroundColor: "accent.surface.hover"
+          },
+          "&:active": {
+            backgroundColor: "accent.surface.active",
+            outline: "none"
+          }
+        }
+      },
+      brand: {
+        root: {
+          backgroundColor: "brand.surface",
+          color: "text.inverted",
+          "& svg": {
+            color: "icon.inverted"
+          },
+          "&:hover": {
+            backgroundColor: "brand.surface.hover"
+          },
+          "&:active": {
+            backgroundColor: "brand.surface.active",
+            outline: "none"
+          }
+        }
+      }
+    },
+    size: {
+      xs: {
+        root: {
+          fontSize: "desktop.xs",
+          paddingX: "1.5",
+          paddingY: "0",
+          fontWeight: "normal",
+          borderRadius: "xs"
+        }
+      },
+      sm: {
+        root: {
+          fontSize: "desktop.sm",
+          paddingX: "2",
+          paddingY: "0.5",
+          fontWeight: "bold",
+          borderRadius: "9px"
+        }
+      },
+      md: {
+        root: {
+          padding: 5,
+          fontSize: "desktop.md",
+          paddingX: "2",
+          paddingY: "1",
+          fontWeight: "bold",
+          borderRadius: "sm"
+        }
+      },
+      lg: {
+        root: {
+          fontSize: "desktop.md",
+          paddingX: "2",
+          paddingY: "3",
+          fontWeight: "bold",
+          borderRadius: "md"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "core",
+    size: "sm"
+  }
+});
 var lineIconSlotRecipe = react.defineSlotRecipe({
   slots: linjetagAnatomy.keys(),
   className: "spor-line-icon",
@@ -10803,7 +10912,7 @@ var selectSlotRecipe = react.defineSlotRecipe({
         outlineOffset: "2px",
         outline: "2px solid",
         outlineColor: "outline.focus",
-        backgroundColor: "ghost.surface.hover"
+        backgroundColor: "accent.surface.hover"
       },
       "&[data-highlighted]": {
         outlineOffset: "2px",
@@ -10811,7 +10920,7 @@ var selectSlotRecipe = react.defineSlotRecipe({
         outlineColor: "outline.focus"
       },
       _active: {
-        backgroundColor: "ghost.surface.active"
+        backgroundColor: "accent.surface.active"
       },
       _highlighted: {
         _active: {
@@ -10819,12 +10928,12 @@ var selectSlotRecipe = react.defineSlotRecipe({
         }
       },
       _hover: {
-        backgroundColor: "ghost.surface.hover",
+        backgroundColor: "accent.surface.hover",
         outline: "2px solid core.outline",
         outlineOffset: "2px"
       },
       _selected: {
-        backgroundColor: "ghost.surface.active"
+        backgroundColor: "accent.surface"
       },
       _icon: {
         width: 3,
@@ -11592,6 +11701,7 @@ var slotRecipes = {
   checkboxCard: choiceChipSlotRecipe,
   collapsible: collapsibleSlotRecipe,
   tooltip: popoverSlotRecipe,
+  tag: inputChipSlotRecipe,
   menu: menuSlotRecipe
 };
 var animations = react.defineTokens.animations({
@@ -12771,6 +12881,7 @@ exports.Heading = Heading;
 exports.IconButton = IconButton;
 exports.InfoTag = InfoTag;
 exports.Input = Input;
+exports.InputChip = InputChip;
 exports.ItemDescription = ItemDescription;
 exports.ItemLabel = ItemLabel;
 exports.JumpButton = JumpButton;