@vygruppen/spor-react 13.0.2 → 13.1.0

package/dist/index.mjs

@@ -1,12 +1,12 @@
-import { Accordion as Accordion$1, defineRecipe, chakra, Code as Code$1, Clipboard as Clipboard$1, RadioCard as RadioCard$1, defineStyle, Field, Dialog, createContext as createContext$1, Drawer as Drawer$1, Combobox, Fieldset as Fieldset$1, createListCollection, Select as Select$1, List as List$1, Popover as Popover$1, createToaster, Tabs as Tabs$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, Tooltip as Tooltip$1, IconButton as IconButton$1, defineConfig, Center, Box, ClientOnly, VisuallyHidden, useSlotRecipe, Stack, HStack, Progress, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, Separator as Separator$1, useFieldContext, PopoverAnchor, Portal, useDialogContext, InputElement, Input as Input$1, useFilter, useListCollection, useCombobox, useComboboxContext, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, ListItem, Menu as Menu$1, useMenuContext as useMenuContext$1, NativeSelect as NativeSelect$1, useControllableState, RadioGroup as RadioGroup$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, Link, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, ChakraProvider, Table as Table$1, Toaster as Toaster$1, Toast } from '@chakra-ui/react';
+import { Accordion as Accordion$1, defineRecipe, chakra, Code as Code$1, Clipboard as Clipboard$1, RadioCard as RadioCard$1, defineStyle, Field, Dialog, createContext as createContext$1, Drawer as Drawer$1, Combobox, Fieldset as Fieldset$1, createListCollection, Select as Select$1, List as List$1, Popover as Popover$1, createToaster, Tabs as Tabs$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, Tooltip as Tooltip$1, IconButton as IconButton$1, defineConfig, Center, Box, ClientOnly, VisuallyHidden, useSlotRecipe, Stack, HStack, Progress, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, Separator as Separator$1, useFieldContext, PopoverAnchor, Portal, useDialogContext, InputElement, Input as Input$1, useFilter, useListCollection, useCombobox, useComboboxContext, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, Tag, ListItem, Menu as Menu$1, useMenuContext as useMenuContext$1, NativeSelect as NativeSelect$1, useControllableState, RadioGroup as RadioGroup$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, Link, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, ChakraProvider, Table as Table$1, Toaster as Toaster$1, Toast } from '@chakra-ui/react';
 export { AspectRatio, Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, ClientOnly, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Icon, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableCaption, TableCell, TableColumn, TableColumnGroup, TableFooter, TableHeader, TableRoot, TableRow, VStack, VisuallyHidden, Wrap, createIcon, createListCollection, createSystem, defineConfig, defineRecipe, defineSlotRecipe, defineStyle, mergeConfigs, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useRecipe, useSlotRecipe, useToken } from '@chakra-ui/react';
 import * as spor_icon_react_star from '@vygruppen/spor-icon-react';
 import { DropdownDownFill24Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, DropdownDownFill18Icon, ServiceFill24Icon, WarningFill24Icon, DropdownRightFill18Icon, CalendarOutline24Icon, DropdownLeftFill18Icon, ArrowLeftFill24Icon, ChangeDirectionOutline24Icon, CheckmarkFill18Icon, CloseOutline24Icon, SearchOutline24Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, ArrowUpFill18Icon, ArrowDownFill18Icon, ChangeDirectionFill18Icon, CopyOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill24Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, InformationFill24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, QuestionFill24Icon, ErrorOutline24Icon, SuccessFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon } from '@vygruppen/spor-icon-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React13 from 'react';
-import React13__default, { createContext, useId, isValidElement, cloneElement, useContext, useRef, useEffect, useImperativeHandle, useState, useLayoutEffect, useMemo } from 'react';
+import React13__default, { createContext, useContext, useId, cloneElement, isValidElement, useRef, useEffect, useImperativeHandle, useState, useLayoutEffect, useMemo } from 'react';
 import { spinnerColorData, inlineLoaderColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerLightData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData } from '@vygruppen/spor-loader';
-import ReactLottie from 'lottie-react';
+import { useLottie } from 'lottie-react';
 import { useInterval } from 'usehooks-ts';
 export { useIsClient, useMap, useOnClickOutside } from 'usehooks-ts';
 import { useProgressBar, useCalendar as useCalendar$1, useRangeCalendar, useCalendarCell, useFocusRing, mergeProps, useCalendarGrid, useDateFormatter, VisuallyHidden as VisuallyHidden$1, useDatePicker, I18nProvider, useId as useId$1, useDateRangePicker, useFilter as useFilter$1, useComboBox, useListBox, useOption, useListBoxSection, useDateField, useTimeField, usePopover, DismissButton, Overlay, useDateSegment, useButton } from 'react-aria';
@@ -212,8 +212,23 @@ function createTexts(texts27) {
   return texts27;
 }
 function Lottie({ animationData }) {
-  return /* @__PURE__ */ jsx(ReactLottie, { animationData });
+  const { View } = useLottie({ animationData });
+  return View;
 }
+
+// src/loader/text.ts
+var useGetLoadingText = () => {
+  const { t } = useTranslation();
+  return t(loadingText.loading);
+};
+var loadingText = createTexts({
+  loading: {
+    en: "Loading",
+    nb: "Laster",
+    nn: "Lastar",
+    sv: "Laddar"
+  }
+});
 var ColorInlineLoader = ({
   width,
   maxWidth,
@@ -221,7 +236,7 @@ var ColorInlineLoader = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: inlineLoaderColorData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() })
   ] });
 };
 var ColorSpinner = ({
@@ -232,14 +247,14 @@ var ColorSpinner = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: spinnerColorData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() }),
     children && /* @__PURE__ */ jsx(Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
 };
 var ContentLoader = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxs(Box, { role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { maxWidth: "140px", marginX: "auto", children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: contentLoaderData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() }),
     children && /* @__PURE__ */ jsx(Box, { textAlign: "center", fontWeight: "bold", children })
   ] });
 };
@@ -259,7 +274,7 @@ var DarkFullScreenLoader = ({
       ...props,
       children: [
         /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: fullScreenLoaderWhiteData }) }) }),
-        /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() })
       ]
     }
   );
@@ -271,7 +286,7 @@ var DarkInlineLoader = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: inlineLoaderDarkData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() })
   ] });
 };
 var DarkSpinner = ({
@@ -284,7 +299,7 @@ var DarkSpinner = ({
   const spinnerData = colorMode === "dark" ? spinnerLightData : spinnerDarkData;
   return /* @__PURE__ */ jsxs(Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: spinnerData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() }),
     children && /* @__PURE__ */ jsx(Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
 };
@@ -295,7 +310,7 @@ var LightFullScreenLoader = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { height: "100%", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: fullScreenLoaderBlackData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() })
   ] });
 };
 var LightInlineLoader = ({
@@ -305,7 +320,7 @@ var LightInlineLoader = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { height: "100%", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: inlineLoaderLightData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() })
   ] });
 };
 var LightSpinner = ({
@@ -316,7 +331,7 @@ var LightSpinner = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: spinnerLightData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() }),
     children && /* @__PURE__ */ jsx(Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
 };
@@ -571,12 +586,12 @@ var ButtonContent = ({
 ] });
 var LoadingContent = ({
   children,
-  loadingText
+  loadingText: loadingText2
 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(Flex, { gap: "1", visibility: "hidden", children }),
   /* @__PURE__ */ jsxs(Center, { position: "absolute", inset: "1px 0", children: [
     /* @__PURE__ */ jsx(ColorInlineLoader, { maxWidth: "8", marginX: 2, marginY: 2 }),
-    loadingText && /* @__PURE__ */ jsx(Box, { children: loadingText })
+    loadingText2 && /* @__PURE__ */ jsx(Box, { children: loadingText2 })
   ] })
 ] });
 var getChildContent = (child) => {
@@ -589,7 +604,7 @@ var Button = ({
   ref,
   loading,
   disabled,
-  loadingText,
+  loadingText: loadingText2,
   variant = "primary",
   size = "md",
   leftIcon,
@@ -599,11 +614,11 @@ var Button = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const ariaLabel = loading ? String(loadingText ?? t(texts2.loadingText)) : rest["aria-label"];
+  const ariaLabel = loading ? String(loadingText2 ?? t(texts2.loadingText)) : rest["aria-label"];
   const renderContent = () => {
     const content = rest.asChild ? getChildContent(children) : children;
     if (loading)
-      return /* @__PURE__ */ jsx(LoadingContent, { size, loadingText, children: /* @__PURE__ */ jsx(ButtonContent, { leftIcon, rightIcon, children: content }) });
+      return /* @__PURE__ */ jsx(LoadingContent, { size, loadingText: loadingText2, children: /* @__PURE__ */ jsx(ButtonContent, { leftIcon, rightIcon, children: content }) });
     return /* @__PURE__ */ jsx(ButtonContent, { leftIcon, rightIcon, children: content });
   };
   return /* @__PURE__ */ jsx(
@@ -663,59 +678,59 @@ var badgeRecipie = defineRecipe({
   variants: {
     colorPalette: {
       neutral: {
-        backgroundColor: "badge.surface",
-        color: "badge.text",
+        backgroundColor: "surface",
+        color: "text",
         "& svg": {
-          color: "badge.icon"
+          color: "icon"
         }
       },
       grey: {
-        backgroundColor: "badge.grey.surface",
-        color: "badge.grey.text",
+        backgroundColor: "surface.neutral",
+        color: "text.neutral",
         "& svg": {
-          color: "badge.grey.icon"
+          color: "icon.neutral"
         }
       },
       green: {
-        backgroundColor: "badge.green.surface",
-        color: "badge.green.text",
+        backgroundColor: "surface.subtle",
+        color: "text.success",
         "& svg": {
-          color: "badge.green.icon"
+          color: "icon.success"
         }
       },
       blue: {
-        backgroundColor: "badge.blue.surface",
-        color: "badge.blue.text",
+        backgroundColor: "surface.info",
+        color: "text.info",
         "& svg": {
-          color: "badge.blue.icon"
+          color: "icon.info"
         }
       },
       cream: {
-        backgroundColor: "badge.cream.surface",
-        color: "badge.cream.text",
+        backgroundColor: "surface.warning",
+        color: "text.warning",
         "& svg": {
-          color: "badge.cream.icon"
+          color: "icon.warning"
         }
       },
       yellow: {
-        backgroundColor: "badge.yellow.surface",
-        color: "badge.yellow.text",
+        backgroundColor: "surface.notice",
+        color: "text.notice",
         "& svg": {
-          color: "badge.yellow.icon"
+          color: "icon.notice"
         }
       },
       orange: {
-        backgroundColor: "badge.orange.surface",
-        color: "badge.orange.text",
+        backgroundColor: "surface.caution",
+        color: "text.caution",
         "& svg": {
-          color: "badge.orange.icon"
+          color: "icon.caution"
         }
       },
       red: {
-        backgroundColor: "badge.red.surface",
-        color: "badge.red.text",
+        backgroundColor: "surface.critical",
+        color: "text.critical",
         "& svg": {
-          color: "badge.red.icon"
+          color: "icon.critical"
         }
       }
     },
@@ -1088,10 +1103,10 @@ var BaseAlertIcon = ({
 }) => {
   const css = {
     "& path:first-of-type": {
-      fill: `alert.${variant}.icon`
+      fill: `icon.${variant}`
     },
     "& path:not(:first-of-type)": {
-      fill: `alert.${variant}.surface`
+      fill: `surface.${variant}`
     }
   };
   switch (variant) {
@@ -1279,6 +1294,7 @@ var ServiceAlert = ({
       css: { ...styles.root, ...css },
       ref,
       ...rest,
+      className: "light",
       children: /* @__PURE__ */ jsxs(Accordion$1.Item, { value: defaultValue, children: [
         /* @__PURE__ */ jsx(Accordion$1.ItemTrigger, { css: styles.itemTrigger, children: /* @__PURE__ */ jsxs(
           HStack,
@@ -1307,7 +1323,7 @@ var ServiceAlert = ({
               ] }),
               /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: [0.5, null, null, 1], children: [
                 notification && /* @__PURE__ */ jsx(Text, { css: styles.notificationText, children: t(texts5.notification(notification)) }),
-                /* @__PURE__ */ jsx(Accordion$1.ItemIndicator, { children: /* @__PURE__ */ jsx(DropdownDownFill24Icon, { color: "icon.inverted" }) })
+                /* @__PURE__ */ jsx(Accordion$1.ItemIndicator, { children: /* @__PURE__ */ jsx(DropdownDownFill24Icon, { color: "icon.brand" }) })
               ] })
             ]
           }
@@ -1672,18 +1688,18 @@ var cellStyles = {
   },
   // Selection edge (single-mode selected OR range start/end)
   "&[data-edge]": {
-    backgroundColor: "brand.surface",
-    color: "text.inverted"
+    backgroundColor: "surface.brand",
+    color: "text.brand"
   },
   // Range middle
   "&[data-middle]": {
-    backgroundColor: "surface.secondary",
+    backgroundColor: "surface.subtle",
     color: "text"
   },
   // Hover for non-selected, non-disabled cells on devices that support hover
   "@media (hover: hover)": {
     "&:not([data-edge]):not([data-middle]):not([data-disabled]):hover": {
-      backgroundColor: "surface.secondary",
+      backgroundColor: "surface.subtle",
       color: "text"
     }
   }
@@ -2086,7 +2102,7 @@ var Field3 = ({
         ]
       }
     ),
-    helperText && /* @__PURE__ */ jsx(Text3, { variant: "sm", color: "text.tertiary", children: helperText })
+    helperText && /* @__PURE__ */ jsx(Text3, { variant: "sm", color: "text.subtle", children: helperText })
   ] });
 };
 var FieldErrorText = ({
@@ -2323,7 +2339,7 @@ var CalendarNavigator = ({
         fontWeight: "bold",
         flex: "1",
         textAlign: "center",
-        color: "core.text",
+        color: "text.core",
         children: capitalize(title)
       }
     ),
@@ -3122,7 +3138,7 @@ var CloseDrawerLine = ({
       top: 0,
       marginY: 2,
       marginX: "auto",
-      backgroundColor: "floating.outline.active",
+      backgroundColor: "outline.neutral",
       borderRadius: "xs",
       ...props,
       ref
@@ -3593,7 +3609,7 @@ var CardSelectContent = ({
       p: "2",
       bg: "bg",
       border: "sm",
-      borderColor: "floating.outline",
+      borderColor: "outline.floating",
       borderRadius: "sm",
       ...props,
       children
@@ -3601,9 +3617,9 @@ var CardSelectContent = ({
   ) }) }) }) });
 };
 var bgActiveStyleMap = {
-  core: "core.surface.active",
-  ghost: "ghost.surface.active",
-  floating: "floating.surface.active"
+  core: "surface.core.active",
+  ghost: "surface.ghost.active",
+  floating: "surface.floating.active"
 };
 var CardSelectTrigger = ({
   ref,
@@ -3688,9 +3704,15 @@ var Popover = ({
   hasBackdrop = true,
   containerPadding = 12
 }) => {
-  var _a6;
   const internalRef = useRef(null);
   const popoverRef = ref ?? internalRef;
+  useLayoutEffect(() => {
+    var _a6;
+    const element = typeof popoverRef === "object" ? popoverRef == null ? void 0 : popoverRef.current : null;
+    if (element) {
+      element.style.minWidth = `${((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? 0}px`;
+    }
+  });
   const { popoverProps, underlayProps } = usePopover(
     {
       triggerRef,
@@ -3704,19 +3726,11 @@ var Popover = ({
     },
     state
   );
-  const popoverBox = /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ...popoverProps,
-      ref: popoverRef,
-      minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto",
-      children: [
-        /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close }),
-        children,
-        /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close })
-      ]
-    }
-  );
+  const popoverBox = /* @__PURE__ */ jsxs(Box, { ...popoverProps, ref: popoverRef, children: [
+    /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close }),
+    children,
+    /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close })
+  ] });
   if (isNonModal) {
     return popoverBox;
   }
@@ -3847,7 +3861,7 @@ var Combobox2 = (props) => {
         "aria-controls": listboxId,
         borderBottomLeftRadius: state.isOpen && !loading ? 0 : borderBottomLeftRadius,
         borderBottomRightRadius: state.isOpen && !loading ? 0 : borderBottomRightRadius,
-        _active: { backgroundColor: "core.surface.active" },
+        _active: { backgroundColor: "surface.core.active" },
         ...filteredInputProps,
         startElement: leftIcon,
         endElement: loading ? /* @__PURE__ */ jsx(
@@ -3933,6 +3947,19 @@ var FieldsetLegend = Fieldset$1.Legend;
 var FieldsetContent = Fieldset$1.Content;
 var FieldsetHelperText = Fieldset$1.HelperText;
 var FieldsetErrorText = Fieldset$1.ErrorText;
+var InputChip = ({
+  startIcon,
+  endIcon,
+  children,
+  ref,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(Tag.Root, { ref, ...rest, as: "button", children: [
+    startIcon && /* @__PURE__ */ jsx(Tag.StartElement, { children: /* @__PURE__ */ jsx(Box, { as: startIcon }) }),
+    /* @__PURE__ */ jsx(Tag.Label, { children }),
+    endIcon && /* @__PURE__ */ jsx(Tag.EndElement, { children: /* @__PURE__ */ jsx(Box, { as: endIcon }) })
+  ] });
+};
 var ListBox = (props) => {
   const { loading, listBoxRef, state, maxWidth, variant, children } = props;
   const { listBoxProps } = useListBox(props, state, listBoxRef);
@@ -4770,7 +4797,7 @@ var Select = ({
           css: styles.root,
           position: "relative",
           children: [
-            /* @__PURE__ */ jsx(SelectTrigger, { "data-attachable": true, children: /* @__PURE__ */ jsx(SelectValueText, { withPlaceholder: label ? true : false }) }),
+            /* @__PURE__ */ jsx(SelectTrigger, { "data-attachable": true, children: /* @__PURE__ */ jsx(SelectValueText, { withPlaceholder: !!label }) }),
             label && /* @__PURE__ */ jsx(SelectLabel, { css: styles.label, children: label }),
             /* @__PURE__ */ jsx(SelectContent, { css: styles.selectContent, baseStyle: css, children })
           ]
@@ -4785,7 +4812,7 @@ var SelectLabel = (props) => {
     Select$1.Label,
     {
       ...props,
-      "data-selected": value.length > 0 ? true : void 0
+      "data-selected": value.length > 0 || void 0
     }
   );
 };
@@ -4796,14 +4823,19 @@ var SelectItem = ({
   const { item, children, description, ...rest } = props;
   const recipe = useSlotRecipe({ key: "select" });
   const styles = recipe();
+  const selectContext = useSelectContext();
+  const multiple = selectContext.multiple;
+  const isSelected = selectContext.value.includes(item.value);
   return /* @__PURE__ */ jsxs(Select$1.Item, { item, ...rest, ref, css: styles.item, children: [
+    multiple && /* @__PURE__ */ jsx(Checkbox$1.Root, { checked: isSelected, pointerEvents: "none", children: /* @__PURE__ */ jsx(Checkbox$1.Control, { children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {}) }) }),
     /* @__PURE__ */ jsxs(Box, { width: "100%", children: [
       /* @__PURE__ */ jsx(Select$1.ItemText, { display: "flex", children }),
       description && /* @__PURE__ */ jsx(Box, { "data-part": "item-description", css: styles.itemDescription, children: description })
     ] }),
-    /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckmarkFill18Icon, {}) })
+    !multiple && /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckmarkFill18Icon, {}) })
   ] });
 };
+SelectItem.displayName = "SelectItem";
 var SelectItemGroup = function SelectItemGroup2({
   ref,
   ...props
@@ -4862,6 +4894,8 @@ var SelectValueText = function SelectValueText2({
   ...props
 }) {
   const { children, withPlaceholder, placeholder, ...rest } = props;
+  const selectContext = useSelectContext();
+  const multiple = selectContext.multiple;
   return /* @__PURE__ */ jsx(
     Select$1.ValueText,
     {
@@ -4875,9 +4909,20 @@ var SelectValueText = function SelectValueText2({
           return placeholder;
         if (children)
           return children(items);
-        if (items.length === 1)
+        if (multiple) {
+          return /* @__PURE__ */ jsx(Flex, { gap: 0.5, marginBottom: 1, children: items.map((item) => /* @__PURE__ */ 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`;
+        }
       } })
     }
   );
@@ -5132,7 +5177,7 @@ var LineIcon = function LineIcon2({
       css: { ...styles.iconContainer, ...style },
       padding: targetPadding(),
       borderWidth: borderContainer(),
-      borderColor: variant === "walk" ? "core.outline" : "transparent",
+      borderColor: variant === "walk" ? "outline.core" : "transparent",
       "aria-label": label,
       ref,
       className: clsx_default("light", rest.className),
@@ -6572,8 +6617,8 @@ var StepperStep = ({
   const state = getState(stepNumber, activeStep);
   const recipe = useSlotRecipe({ key: "stepper" });
   const style = recipe({ variant });
-  const disabledTextColor = "text.tertiary";
-  const iconColor = "text.tertiary";
+  const disabledTextColor = "text.subtle";
+  const iconColor = "text.subtle";
   const disabled = state !== "active" && disabledOverride || state === "disabled";
   return /* @__PURE__ */ jsxs(Box, { css: style.stepContainer, "data-part": "step-container", children: [
     stepNumber > 1 && /* @__PURE__ */ jsx(
@@ -6877,40 +6922,40 @@ var buttonRecipe = defineRecipe({
   variants: {
     variant: {
       primary: {
-        background: "brand.surface",
-        color: "brand.text",
+        background: "surface.brand",
+        color: "text.brand",
         fontWeight: "bold",
         _hover: {
-          background: "brand.surface.hover",
+          background: "surface.brand.hover",
           _active: {
-            background: "brand.surface.active"
+            background: "surface.brand.active"
           }
         }
       },
       secondary: {
-        background: "accent.surface",
-        color: "accent.text",
+        background: "surface.accent",
+        color: "text.accent",
         fontWeight: "bold",
         _hover: {
-          background: "accent.surface.hover",
+          background: "surface.accent.hover",
           _active: {
-            background: "accent.surface.active"
+            background: "surface.accent.active"
           }
         }
       },
       tertiary: {
-        color: "core.text",
+        color: "text.core",
         outline: "solid",
         fontWeight: "normal",
         outlineWidth: tokens22__default.size.stroke.sm,
-        outlineColor: "core.outline",
+        outlineColor: "outline.core",
         _hover: {
           outlineWidth: tokens22__default.size.stroke.md,
-          outlineColor: "core.outline.hover",
+          outlineColor: "outline.core.hover",
           _active: {
-            background: "core.surface.active",
+            background: "surface.core.active",
             outlineWidth: tokens22__default.size.stroke.sm,
-            outlineColor: "core.outline"
+            outlineColor: "outline.core"
           }
         },
         _focus: {
@@ -6918,28 +6963,28 @@ var buttonRecipe = defineRecipe({
         }
       },
       ghost: {
-        color: "ghost.text",
+        color: "text.ghost",
         fontWeight: "bold",
         _hover: {
-          background: "ghost.surface.hover",
+          background: "surface.ghost.hover",
           _active: {
-            background: "ghost.surface.active"
+            background: "surface.ghost.active"
           }
         }
       },
       floating: {
-        color: "floating.text",
-        background: "floating.surface",
+        color: "text.floating",
+        background: "surface.floating",
         fontWeight: "bold",
         border: "sm",
-        borderColor: "floating.outline",
+        borderColor: "outline.floating",
         boxShadow: "0px 1px 3px 0px var(--spor-colors-surface-disabled, rgba(0, 0, 0, 0.10))",
         _hover: {
-          borderColor: "floating.outline.hover",
+          borderColor: "outline.floating.hover",
           _active: {
-            background: "core.surface.active",
+            background: "surface.core.active",
             boxShadow: "none",
-            borderColor: "floating.outline"
+            borderColor: "outline.floating"
           }
         }
       }
@@ -6994,12 +7039,12 @@ var closeButtonRecipe = defineRecipe({
     color: "text",
     fontWeight: "normal",
     _hover: {
-      background: "ghost.surface.hover",
+      background: "surface.ghost.hover",
       _disabled: {
         color: "icon.disabled"
       },
       _active: {
-        background: "ghost.surface.active"
+        background: "surface.ghost.active"
       }
     }
   },
@@ -7074,7 +7119,7 @@ var inputRecipe = defineRecipe({
       },
       _hover: {
         outline: "2px solid",
-        outlineColor: "core.outline"
+        outlineColor: "outline.core"
       }
     }
   },
@@ -7083,14 +7128,14 @@ var inputRecipe = defineRecipe({
       core: {
         backgroundColor: "transparent",
         outline: "1px solid",
-        outlineColor: "core.outline",
+        outlineColor: "outline.core",
         _hover: {
           outline: "2px solid",
-          outlineColor: "core.outline.hover",
+          outlineColor: "outline.core.hover",
           _active: {
             outline: "1px solid",
             outlineColor: "outline.disabled",
-            backgroundColor: "core.surface.active"
+            backgroundColor: "surface.core.active"
           }
         },
         _focus: {
@@ -7100,17 +7145,17 @@ var inputRecipe = defineRecipe({
       },
       floating: {
         boxShadow: "sm",
-        bg: "floating.surface",
+        bg: "surface.floating",
         outline: "1px solid",
-        outlineColor: "floating.outline",
+        outlineColor: "outline.floating",
         _hover: {
           outline: "1px solid",
-          outlineColor: "floating.outline.hover"
+          outlineColor: "outline.floating.hover"
         },
         _active: {
           outline: "1px solid",
-          outlineColor: "floating.outline.active",
-          backgroundColor: "floating.surface.active"
+          outlineColor: "outline.neutral",
+          backgroundColor: "surface.floating.active"
         },
         focus: {
           outline: "1px solid",
@@ -7153,7 +7198,7 @@ var linkRecipe = defineRecipe({
   variants: {
     variant: {
       primary: {
-        color: "core.text",
+        color: "text.core",
         _hover: {
           color: "text",
           _active: {
@@ -7216,29 +7261,29 @@ var pressableCardRecipe = defineRecipe({
         boxShadow: "0px 1px 3px 0px var(--shadow-color)",
         shadowColor: "surface.disabled",
         border: "sm",
-        borderColor: "floating.outline",
-        backgroundColor: "floating.surface",
+        borderColor: "outline.floating",
+        backgroundColor: "surface.floating",
         _hover: {
           boxShadow: "0px 2px 6px 0px var(--shadow-color)",
-          backgroundColor: "floating.surface.hover",
-          borderColor: "floating.outline.hover",
+          backgroundColor: "surface.floating.hover",
+          borderColor: "outline.floating.hover",
           _active: {
             boxShadow: "none",
-            backgroundColor: "floating.surface.active",
-            borderColor: "floating.outline.active"
+            backgroundColor: "surface.floating.active",
+            borderColor: "outline.neutral"
           }
         }
       },
       core: {
-        outlineColor: "core.outline",
+        outlineColor: "outline.core",
         outlineWidth: tokens22__default.size.stroke.sm,
         outlineStyle: "solid",
         _hover: {
-          outlineColor: "core.outline.hover",
+          outlineColor: "outline.core.hover",
           outlineWidth: tokens22__default.size.stroke.md,
           outlineStyle: "solid",
           _active: {
-            backgroundColor: "core.surface.active",
+            backgroundColor: "surface.core.active",
             outlineWidth: tokens22__default.size.stroke.sm
           }
         }
@@ -7246,12 +7291,12 @@ var pressableCardRecipe = defineRecipe({
       accent: {
         boxShadow: "0px 1px 3px 0px var(--shadow-color)",
         shadowColor: "surface.disabled",
-        background: "alert.success.surface",
+        background: "surface.success",
         _hover: {
-          background: "alert.success.surface.hover",
+          background: "surface.success.hover",
           boxShadow: "0px 2px 6px 0px var(--shadow-color)",
           _active: {
-            background: "alert.success.surface.active",
+            background: "surface.success.active",
             boxShadow: "none"
           }
         }
@@ -7370,7 +7415,7 @@ var skeletonRecipe = defineRecipe({
       },
       none: {
         animation: "none",
-        background: "surface.color.grey"
+        background: "surface.neutral"
       }
     }
   }
@@ -7382,29 +7427,29 @@ var staticCardRecipe = defineRecipe({
   variants: {
     colorPalette: {
       white: {
-        backgroundColor: "surface.color.neutral",
+        backgroundColor: "surface",
         color: "text"
       },
       grey: {
-        backgroundColor: "surface.color.grey"
+        backgroundColor: "surface.neutral"
       },
       yellow: {
-        backgroundColor: "surface.color.cream"
+        backgroundColor: "surface.warning"
       },
       darkYellow: {
-        backgroundColor: "surface.color.yellow"
+        backgroundColor: "surface.notice"
       },
       red: {
-        backgroundColor: "surface.color.red"
+        backgroundColor: "surface.critical"
       },
       green: {
-        backgroundColor: "surface.color.green"
+        backgroundColor: "surface.success"
       },
       blue: {
-        backgroundColor: "surface.color.blue"
+        backgroundColor: "surface.info"
       },
       orange: {
-        backgroundColor: "surface.color.orange"
+        backgroundColor: "surface.caution"
       }
     }
   },
@@ -7462,7 +7507,7 @@ var vyUtviklingColors = defineSemanticTokens.colors({
   ...tokens4.color["vy-utvikling"].color.vyUtvikling
 });
 var cargonetColors = defineSemanticTokens.colors({
-  ...tokens4.color.cargonet.color.cargonet
+  ...tokens4.color["cargonet"].color.cargonet
 });
 var radii = defineSemanticTokens.radii({
   none: { value: tokens22__default.size["border-radius"].none },
@@ -7769,6 +7814,7 @@ var comboboxAnatomy = comboboxAnatomy$1.extendWith(
   "indicatorGroup",
   "empty"
 );
+var tagAnatomy = createAnatomy("tag").parts("root");
 var menuAnatomy = createAnatomy("menu").parts(
   "trigger",
   "content",
@@ -7799,7 +7845,7 @@ var accordionSlotRecipe = defineSlotRecipe({
       borderRadius: "sm",
       display: "flex",
       justifyContent: "space-between",
-      color: "core.text",
+      color: "text.core",
       textAlign: "left",
       width: "full",
       alignItems: "center",
@@ -7855,10 +7901,10 @@ var accordionSlotRecipe = defineSlotRecipe({
         },
         itemTrigger: {
           "&:hover": {
-            background: "ghost.surface.hover"
+            background: "surface.ghost.hover"
           },
           "&:active": {
-            backgroundColor: "ghost.surface.active"
+            backgroundColor: "surface.ghost.active"
           }
         }
       },
@@ -7866,7 +7912,7 @@ var accordionSlotRecipe = defineSlotRecipe({
         item: {
           outline: "solid",
           outlineWidth: tokens22__default.size.stroke.sm,
-          outlineColor: "core.outline"
+          outlineColor: "outline.core"
         },
         itemTrigger: {
           _expanded: {
@@ -7874,12 +7920,12 @@ var accordionSlotRecipe = defineSlotRecipe({
           },
           "&:hover": {
             outlineWidth: tokens22__default.size.stroke.md,
-            outlineColor: "core.outline",
+            outlineColor: "outline.core",
             outline: "2px solid",
             outlineOffset: 0
           },
           "&:active": {
-            backgroundColor: "core.surface.active",
+            backgroundColor: "surface.core.active",
             outlineWidth: tokens22__default.size.stroke.sm,
             outline: "none"
           }
@@ -7892,7 +7938,7 @@ var accordionSlotRecipe = defineSlotRecipe({
         item: {
           borderRadius: "none",
           borderBottom: "1px solid",
-          borderBottomColor: "floating.outline.active"
+          borderBottomColor: "outline.neutral"
         }
       },
       floating: {
@@ -7900,7 +7946,7 @@ var accordionSlotRecipe = defineSlotRecipe({
           outline: "1px solid",
           outlineWidth: tokens22__default.size.stroke.sm,
           boxShadow: "sm",
-          outlineColor: "floating.outline"
+          outlineColor: "outline.floating"
         },
         itemTrigger: {
           _expanded: {
@@ -7909,11 +7955,11 @@ var accordionSlotRecipe = defineSlotRecipe({
           "&:hover": {
             outlineWidth: tokens22__default.size.stroke.md,
             outline: "1px solid",
-            outlineColor: "floating.outline.hover",
+            outlineColor: "outline.floating.hover",
             outlineOffset: 1
           },
           "&:active": {
-            backgroundColor: "floating.surface.active",
+            backgroundColor: "surface.floating.active",
             outlineWidth: tokens22__default.size.stroke.sm,
             outline: "none"
           }
@@ -7924,21 +7970,21 @@ var accordionSlotRecipe = defineSlotRecipe({
 });
 var createVariant = (variant) => ({
   root: {
-    borderColor: `alert.${variant}.outline`,
-    background: `alert.${variant}.surface`
+    borderColor: `outline.${variant}`,
+    background: `surface.${variant}`
   },
   description: {
-    color: `alert.${variant}.text.secondary`
+    color: `text.${variant}.subtle`
   },
   title: {
-    color: `alert.${variant}.text`
+    color: `text.${variant}`
   },
   closeButton: {
-    color: `alert.${variant}.text`,
+    color: `text.${variant}`,
     _hover: {
-      bg: `alert.${variant}.surface.hover`,
+      bg: `surface.${variant}.hover`,
       _active: {
-        bg: `alert.${variant}.surface.active`
+        bg: `surface.${variant}.active`
       }
     }
   }
@@ -7973,13 +8019,13 @@ var alertSlotRecipe = defineSlotRecipe({
   },
   variants: {
     variant: {
-      important: createVariant("important"),
-      alt: createVariant("alt"),
-      error: createVariant("error"),
+      important: createVariant("warning"),
+      alt: createVariant("notice"),
+      error: createVariant("critical"),
       success: createVariant("success"),
       info: createVariant("info"),
       neutral: createVariant("neutral"),
-      "error-secondary": createVariant("error-secondary"),
+      "error-secondary": createVariant("caution"),
       service: createVariant("service")
     }
   },
@@ -8009,117 +8055,117 @@ var alertExpandableSlotRecipe = defineSlotRecipe({
     variant: {
       important: {
         itemContent: {
-          color: "alert.important.text.secondary"
+          color: "text.warning.subtle"
         },
         itemTrigger: {
           "&:hover": {
-            bg: "alert.important.surface.hover",
+            bg: "surface.warning.hover",
             outline: "1px solid",
-            outlineColor: "alert.important.outline.hover",
+            outlineColor: "outline.warning.hover",
             outlineOffset: "0px"
           },
           "&:active": {
-            bg: "alert.important.surface.active"
+            bg: "surface.warning.active"
           }
         },
         root: {
-          borderColor: "alert.important.outline",
-          bg: "alert.important.surface"
+          borderColor: "outline.warning",
+          bg: "surface.warning"
         },
         title: {
-          color: "alert.important.text"
+          color: "text.warning"
         }
       },
       success: {
         itemContent: {
-          color: "alert.success.text.secondary"
+          color: "text.success.subtle"
         },
         itemTrigger: {
           "&:hover": {
-            bg: "alert.success.surface.hover",
+            bg: "surface.success.hover",
             outline: "1px solid",
             outlineOffset: "0px",
-            outlineColor: "alert.success.outline.hover",
+            outlineColor: "outline.success.hover",
             "&:active": {
-              bg: "alert.success.surface.active"
+              bg: "surface.success.active"
             }
           }
         },
         root: {
-          borderColor: "alert.success.outline",
-          bg: "alert.success.surface"
+          borderColor: "outline.success",
+          bg: "surface.success"
         },
         title: {
-          color: "alert.success.text"
+          color: "text.success"
         }
       },
       alt: {
         itemContent: {
-          color: "alert.alt.text.secondary"
+          color: "text.notice.subtle"
         },
         itemTrigger: {
           "&:hover": {
-            bg: "alert.alt.surface.hover",
+            bg: "surface.notice.hover",
             outlineOffset: "0px",
             outline: "1px solid",
-            outlineColor: "alert.alt.outline.hover",
+            outlineColor: "outline.notice.hover",
             "&:active": {
-              bg: "alert.alt.surface.active"
+              bg: "surface.notice.active"
             }
           }
         },
         root: {
-          borderColor: "alert.alt.outline",
-          bg: "alert.alt.surface"
+          borderColor: "outline.notice",
+          bg: "surface.notice"
         },
         title: {
-          color: "alert.alt.text"
+          color: "text.notice"
         }
       },
       info: {
         itemContent: {
-          color: "alert.info.text.secondary"
+          color: "text.info.subtle"
         },
         itemTrigger: {
           "&:hover": {
-            bg: "alert.info.surface.hover",
+            bg: "surface.info.hover",
             outlineOffset: "0px",
             outline: "1px solid",
-            outlineColor: "alert.info.outline.hover",
+            outlineColor: "outline.info.hover",
             "&:active": {
-              bg: "alert.info.surface.active"
+              bg: "surface.info.active"
             }
           }
         },
         root: {
-          borderColor: "alert.info.outline",
-          bg: "alert.info.surface"
+          borderColor: "outline.info",
+          bg: "surface.info"
         },
         title: {
-          color: "alert.info.text"
+          color: "text.info"
         }
       },
       error: {
         itemContent: {
-          color: "alert.error.text.secondary"
+          color: "text.critical.subtle"
         },
         itemTrigger: {
           "&:hover": {
-            bg: "alert.error.surface.hover",
+            bg: "surface.critical.hover",
             outlineOffset: "0px",
             outline: "1px solid",
-            outlineColor: "alert.error.outline.hover",
+            outlineColor: "outline.critical.hover",
             "&:active": {
-              bg: "alert.error.surface.active"
+              bg: "surface.critical.active"
             }
           }
         },
         root: {
-          borderColor: "alert.error.outline",
-          bg: "alert.error.surface"
+          borderColor: "outline.critical",
+          bg: "surface.critical"
         },
         title: {
-          color: "alert.error.text"
+          color: "text.critical"
         }
       }
     }
@@ -8135,10 +8181,10 @@ var alertServiceSlotRecipe = defineSlotRecipe({
       transitionDuration: "fast",
       borderTopRadius: "none",
       borderBottomRadius: "md",
-      backgroundColor: "alert.service.surface",
+      backgroundColor: "surface.service",
       outline: "1px solid",
-      outlineColor: "alert.service.outline",
-      color: "text.inverted",
+      outlineColor: "outline.service",
+      color: "text.brand",
       boxShadow: "sm"
     },
     itemTrigger: {
@@ -8150,15 +8196,15 @@ var alertServiceSlotRecipe = defineSlotRecipe({
       borderBottomRadius: "md",
       borderTopRadius: "none",
       width: "full",
-      color: "text.inverted",
+      color: "text.brand",
       "&:hover": {
-        backgroundColor: "alert.service.surface.hover"
+        backgroundColor: "surface.service.hover"
       },
       "&:active": {
-        backgroundColor: "alert.service.surface.active"
+        backgroundColor: "surface.service.active"
       },
       _icon: {
-        color: "text"
+        color: "icon.brand"
       }
     },
     itemTriggerTitle: {
@@ -8168,7 +8214,7 @@ var alertServiceSlotRecipe = defineSlotRecipe({
       fontWeight: "400",
       fontSize: ["mobile.xs", "desktop.xs"],
       textWrap: "nowrap",
-      color: "alert.service.text.secondary"
+      color: "text.service.subtle"
     },
     itemContent: {
       paddingX: ["2", "3"],
@@ -8178,14 +8224,14 @@ var alertServiceSlotRecipe = defineSlotRecipe({
     itemBody: {
       marginX: "auto",
       padding: "0 !important",
-      color: "alert.service.text.secondary",
+      color: "text.service.subtle",
       gap: 0,
       flexDirection: "column",
       display: "flex",
       "& > p": {
         width: "full",
         borderBottom: "1px dashed",
-        borderColor: "outline.inverted",
+        borderColor: "outline.neutral",
         paddingY: ["1", "1.5"],
         _first: {
           paddingTop: 0
@@ -8268,7 +8314,7 @@ var comboboxSlotRecipe = defineSlotRecipe({
       borderRadius: "sm",
       flex: "1",
       _highlighted: {
-        bg: "ghost.surface.active"
+        bg: "surface.ghost.active"
       },
       _disabled: {
         pointerEvents: "none",
@@ -8276,13 +8322,13 @@ var comboboxSlotRecipe = defineSlotRecipe({
         color: "text.disabled"
       },
       _hover: {
-        bg: "ghost.surface.hover"
+        bg: "surface.ghost.hover"
       },
       _pressed: {
-        bg: "ghost.surface.active"
+        bg: "surface.ghost.active"
       },
       _focus: {
-        bg: "ghost.surface.active"
+        bg: "surface.ghost.active"
       }
     },
     empty: {
@@ -8301,7 +8347,7 @@ var comboboxSlotRecipe = defineSlotRecipe({
     itemGroupLabel: {
       px: "3",
       py: "0.5",
-      color: "floating.text",
+      color: "text.floating",
       fontFeatureSettings: "liga off",
       fontSize: ["mobile.sm, desktop.sm"],
       fontWeight: "bold"
@@ -8337,11 +8383,11 @@ var breadcrumbSlotRecipe = defineSlotRecipe({
       core: {
         link: {
           _hover: {
-            outlineColor: "core.outline.hover",
+            outlineColor: "outline.core.hover",
             outlineWidth: tokens22__default.size.stroke.md,
             outlineStyle: "solid",
             _active: {
-              backgroundColor: "core.surface.active",
+              backgroundColor: "surface.core.active",
               outline: "none"
             }
           }
@@ -8350,9 +8396,9 @@ var breadcrumbSlotRecipe = defineSlotRecipe({
       ghost: {
         link: {
           _hover: {
-            backgroundColor: "ghost.surface.hover",
+            backgroundColor: "surface.ghost.hover",
             _active: {
-              backgroundColor: "ghost.surface.active"
+              backgroundColor: "surface.ghost.active"
             }
           }
         }
@@ -8374,10 +8420,10 @@ var checkboxSlotRecipe = defineSlotRecipe({
       gap: 1.5,
       _hover: {
         "& > input:enabled:not([aria-invalid]) + .spor-checkbox__control": {
-          borderColor: "core.outline.hover"
+          borderColor: "outline.core.hover"
         },
         "& > input:enabled:checked:not([aria-invalid]) + .spor-checkbox__control": {
-          background: "brand.surface.hover"
+          background: "surface.brand.hover"
         }
       }
     },
@@ -8399,19 +8445,14 @@ var checkboxSlotRecipe = defineSlotRecipe({
       transitionProperty: "background, border-color",
       transitionDuration: "moderate",
       border: "2px solid",
-      borderColor: "core.outline",
+      borderColor: "outline.core",
       borderRadius: "xs",
       _checked: {
-        color: "brand.icon",
-        borderColor: "brand.surface",
-        background: "brand.surface",
+        color: "icon.brand",
+        borderColor: "surface.brand",
+        background: "surface.brand",
         _focus: {
-          borderColor: "brand.surface.active"
-        },
-        _disabled: {
-          background: "surface.disabled",
-          color: "text.disabled",
-          borderColor: "currentColor"
+          borderColor: "surface.brand.active"
         },
         _invalid: {
           backgroundColor: "outline.error",
@@ -8419,8 +8460,9 @@ var checkboxSlotRecipe = defineSlotRecipe({
         }
       },
       _disabled: {
-        // borderColor: coreText("disabled").color,
-        borderColor: "text.disabled"
+        background: "surface.disabled",
+        borderColor: "outline.disabled",
+        color: "text.disabled"
       },
       _invalid: {
         borderColor: "outline.error"
@@ -8430,7 +8472,7 @@ var checkboxSlotRecipe = defineSlotRecipe({
         outlineColor: "outline.focus",
         outlineOffset: tokens22__default.size.stroke.md,
         outlineWidth: tokens22__default.size.stroke.md,
-        borderColor: "core.outline",
+        borderColor: "outline.core",
         borderWidth: tokens22__default.size.stroke.md
       }
     },
@@ -8454,16 +8496,16 @@ var choiceChipSlotRecipe = defineSlotRecipe({
       paddingInlineStart: "2",
       paddingInlineEnd: "2",
       outline: "1px solid",
-      outlineColor: "core.outline",
+      outlineColor: "outline.core",
       _checked: {
-        backgroundColor: "brand.surface",
+        backgroundColor: "surface.brand",
         borderRadius: "sm",
         outline: "none",
-        color: "brand.text",
+        color: "text.brand",
         _hover: {
-          backgroundColor: "brand.surface.hover",
+          backgroundColor: "surface.brand.hover",
           _active: {
-            backgroundColor: "brand.surface.active"
+            backgroundColor: "surface.brand.active"
           }
         }
       },
@@ -8560,47 +8602,47 @@ var choiceChipSlotRecipe = defineSlotRecipe({
     variant: {
       core: {
         root: {
-          color: "core.text",
-          outlineColor: "core.outline",
+          color: "text.core",
+          outlineColor: "outline.core",
           _hover: {
             outline: "2px solid",
-            outlineColor: "core.outline.hover",
+            outlineColor: "outline.core.hover",
             _active: {
               outline: "1px solid",
-              outlineColor: "core.outline",
-              backgroundColor: "core.surface.active"
+              outlineColor: "outline.core",
+              backgroundColor: "surface.core.active"
             }
           }
         }
       },
       accent: {
         root: {
-          backgroundColor: "accent.surface",
-          color: "accent.text",
+          backgroundColor: "surface.accent",
+          color: "text.accent",
           outline: "none",
           _hover: {
-            backgroundColor: "accent.surface.hover",
+            backgroundColor: "surface.accent.hover",
             _active: {
-              backgroundColor: "accent.surface.active"
+              backgroundColor: "surface.accent.active"
             }
           }
         }
       },
       floating: {
         root: {
-          backgroundColor: "floating.surface",
+          backgroundColor: "surface.floating",
           outline: "1px solid",
-          outlineColor: "floating.outline",
-          color: "floating.text",
+          outlineColor: "outline.floating",
+          color: "text.floating",
           boxShadow: "sm",
           _hover: {
-            backgroundColor: "floating.surface.hover",
+            backgroundColor: "surface.floating.hover",
             outline: "1px solid",
-            outlineColor: "floating.outline.hover",
+            outlineColor: "outline.floating.hover",
             _active: {
-              backgroundColor: "floating.surface.active",
+              backgroundColor: "surface.floating.active",
               outline: "1px solid",
-              outlineColor: "floating.outline"
+              outlineColor: "outline.floating"
             }
           }
         }
@@ -8678,7 +8720,7 @@ var datePickerSlotRecipe = defineSlotRecipe({
     },
     dateTimeSegment: {
       _focus: {
-        backgroundColor: "ghost.surface.active",
+        backgroundColor: "surface.ghost.active",
         color: "text"
       }
     },
@@ -8694,10 +8736,10 @@ var datePickerSlotRecipe = defineSlotRecipe({
       transitionProperty: "box-shadow, background-color",
       right: "0.5rem",
       _hover: {
-        backgroundColor: "ghost.surface.hover"
+        backgroundColor: "surface.ghost.hover"
       },
       _active: {
-        backgroundColor: "ghost.surface.active"
+        backgroundColor: "surface.ghost.active"
       },
       _invalid: {
         outline: "2px solid",
@@ -8708,11 +8750,11 @@ var datePickerSlotRecipe = defineSlotRecipe({
       backgroundColor: "surface"
     },
     calendarPopover: {
-      color: "core.text",
+      color: "text.core",
       outline: "1px solid",
-      outlineColor: "floating.outline",
+      outlineColor: "outline.floating",
       boxShadow: "md",
-      backgroundColor: "floating.surface",
+      backgroundColor: "surface.floating",
       minHeight: "min-content"
     },
     rangeCalendarPopover: {
@@ -8720,11 +8762,11 @@ var datePickerSlotRecipe = defineSlotRecipe({
       maxWidth: "100vw"
     },
     weekdays: {
-      color: "core.text",
+      color: "text.core",
       fontWeight: "bold"
     },
     weekend: {
-      color: "accent.text",
+      color: "text.accent",
       fontWeight: "bold"
     },
     cell: {
@@ -8738,12 +8780,12 @@ var datePickerSlotRecipe = defineSlotRecipe({
           top: 0,
           bottom: 0,
           zIndex: -1,
-          backgroundColor: "brand.surface"
+          backgroundColor: "surface.brand"
         }
       }
     },
     dateCell: {
-      color: "core.text",
+      color: "text.core",
       borderRadius: "xl",
       position: "relative",
       transition: ".1s ease-in-out",
@@ -8752,10 +8794,10 @@ var datePickerSlotRecipe = defineSlotRecipe({
       height: [6, 7],
       transitionProperty: "common",
       _hover: {
-        backgroundColor: "ghost.surface.hover"
+        backgroundColor: "surface.ghost.hover"
       },
       _active: {
-        backgroundColor: "ghost.surface.active"
+        backgroundColor: "surface.ghost.active"
       },
       _disabled: {
         backgroundColor: "surface.disabled",
@@ -8763,16 +8805,16 @@ var datePickerSlotRecipe = defineSlotRecipe({
         pointerEvents: "none"
       },
       _selected: {
-        backgroundColor: "brand.surface",
-        color: "brand.text",
+        backgroundColor: "surface.brand",
+        color: "text.brand",
         _active: {
-          backgroundColor: "brand.surface.active",
-          color: "brand.text"
+          backgroundColor: "surface.brand.active",
+          color: "text.brand"
         }
       },
       "&[data-today]": {
         outline: "1px solid",
-        outlineColor: "core.outline"
+        outlineColor: "outline.core"
       },
       "&[data-unavailable]": {
         pointerEvents: "none",
@@ -8787,14 +8829,14 @@ var datePickerSlotRecipe = defineSlotRecipe({
       core: {
         wrapper: {
           outline: "1px solid",
-          outlineColor: "core.outline",
+          outlineColor: "outline.core",
           _hover: {
             outline: "2px solid",
-            outlineColor: "core.outline.hover",
+            outlineColor: "outline.core.hover",
             _active: {
-              backgroundColor: "ghost.surface.active",
+              backgroundColor: "surface.ghost.active",
               outline: "1px solid",
-              outlineColor: "core.outline"
+              outlineColor: "outline.core"
             },
             "&[data-active]": {
               outline: "2px solid",
@@ -8812,17 +8854,17 @@ var datePickerSlotRecipe = defineSlotRecipe({
       },
       floating: {
         wrapper: {
-          bg: "floating.surface",
+          bg: "surface.floating",
           outline: "1px solid",
-          outlineColor: "floating.outline",
+          outlineColor: "outline.floating",
           boxShadow: "sm",
           _hover: {
             outline: "1px solid",
-            outlineColor: "floating.outline.hover",
+            outlineColor: "outline.floating.hover",
             _active: {
-              backgroundColor: "ghost.surface.active",
+              backgroundColor: "surface.ghost.active",
               outline: "1px solid",
-              outlineColor: "core.outline"
+              outlineColor: "outline.core"
             },
             "&[data-active]": {
               outline: "2px solid",
@@ -8842,11 +8884,11 @@ var datePickerSlotRecipe = defineSlotRecipe({
         wrapper: {
           _hover: {
             outline: "2px solid",
-            outlineColor: "core.outline.hover",
+            outlineColor: "outline.core.hover",
             _active: {
-              backgroundColor: "ghost.surface.active",
+              backgroundColor: "surface.ghost.active",
               outline: "1px solid",
-              outlineColor: "core.outline"
+              outlineColor: "outline.core"
             },
             "&[data-active]": {
               outline: "2px solid",
@@ -9306,13 +9348,13 @@ var fieldSlotRecipe = defineSlotRecipe({
     },
     helperText: {
       marginTop: 2,
-      color: "text.tertiary",
+      color: "text.subtle",
       lineHeight: "normal",
       fontSize: "sm"
     },
     errorText: {
       borderRadius: "xs",
-      backgroundColor: "alert.error.surface",
+      backgroundColor: "surface.critical",
       color: "text",
       paddingX: 1.5,
       paddingY: 1,
@@ -9330,7 +9372,7 @@ var fieldSlotRecipe = defineSlotRecipe({
         left: "1em",
         width: "0.5rem",
         height: "0.5rem",
-        backgroundColor: "alert.error.surface",
+        backgroundColor: "surface.critical",
         transform: "translateY(-50%) rotate(45deg)",
         pointerEvents: "none"
       }
@@ -9391,12 +9433,12 @@ var floatingActionButtonSlotRecipe = defineSlotRecipe({
     variant: {
       brand: {
         root: {
-          backgroundColor: "brand.surface",
-          color: "brand.text",
+          backgroundColor: "surface.brand",
+          color: "text.brand",
           _hover: {
-            backgroundColor: "brand.surface.hover",
+            backgroundColor: "surface.brand.hover",
             _active: {
-              backgroundColor: "brand.surface.active"
+              backgroundColor: "surface.brand.active"
             }
           }
         }
@@ -9405,29 +9447,29 @@ var floatingActionButtonSlotRecipe = defineSlotRecipe({
         root: {
           backgroundColor: "transparent",
           outline: "1px solid",
-          outlineColor: "core.outline",
-          color: "core.text",
+          outlineColor: "outline.core",
+          color: "text.core",
           _hover: {
             backgroundColor: "transparent",
             outline: "2px solid",
-            outlineColor: "core.outline",
+            outlineColor: "outline.core",
             _active: {
               outline: "1px solid",
-              outlineColor: "core.outline",
-              backgroundColor: "core.surface.active"
+              outlineColor: "outline.core",
+              backgroundColor: "surface.core.active"
             }
           }
         }
       },
       accent: {
         root: {
-          backgroundColor: "accent.surface",
-          color: "accent.text",
+          backgroundColor: "surface.accent",
+          color: "text.accent",
           _hover: {
-            backgroundColor: "accent.surface.hover",
-            color: "accent.text",
+            backgroundColor: "surface.accent.hover",
+            color: "text.accent",
             _active: {
-              backgroundColor: "accent.surface.active"
+              backgroundColor: "surface.accent.active"
             }
           }
         }
@@ -9719,6 +9761,120 @@ var infoTagSlotRecipe = defineSlotRecipe({
     size: "md"
   }
 });
+var inputChipSlotRecipe = 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: "outline.core.hover"
+          },
+          "&:active": {
+            outline: "none",
+            backgroundColor: "surface.core.active"
+          }
+        }
+      },
+      accent: {
+        root: {
+          backgroundColor: "surface.accent",
+          color: "text.highlight",
+          "& svg": {
+            color: "icon.highlight"
+          },
+          "&:hover": {
+            backgroundColor: "surface.accent.hover"
+          },
+          "&:active": {
+            backgroundColor: "surface.accent.active",
+            outline: "none"
+          }
+        }
+      },
+      brand: {
+        root: {
+          backgroundColor: "surface.brand",
+          color: "text.brand",
+          "& svg": {
+            color: "icon.brand"
+          },
+          "&:hover": {
+            backgroundColor: "surface.brand.hover"
+          },
+          "&:active": {
+            backgroundColor: "surface.brand.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 = defineSlotRecipe({
   slots: linjetagAnatomy.keys(),
   className: "spor-line-icon",
@@ -9895,18 +10051,18 @@ var listBoxSlotRecipe = defineSlotRecipe({
       marginY: 1,
       marginX: 1,
       borderRadius: "sm",
-      color: "ghost.text",
+      color: "text.ghost",
       cursor: "pointer",
       listStyle: "none",
       _active: {
-        backgroundColor: "ghost.surface.active"
+        backgroundColor: "surface.ghost.active"
       },
       _hover: {
-        backgroundColor: "accent.surface",
-        color: "accent.text"
+        backgroundColor: "surface.accent",
+        color: "text.accent"
       },
       _selected: {
-        backgroundColor: "ghost.surface.active"
+        backgroundColor: "surface.ghost.active"
       },
       _focus: {
         outline: "2px solid",
@@ -9916,9 +10072,9 @@ var listBoxSlotRecipe = defineSlotRecipe({
     label: {},
     description: {
       fontSize: ["mobile.xs", "desktop.xs"],
-      color: "ghost.text",
+      color: "text.ghost",
       "[aria-selected='true'] &": {
-        color: "ghost.text"
+        color: "text.ghost"
       }
     }
   },
@@ -9927,13 +10083,13 @@ var listBoxSlotRecipe = defineSlotRecipe({
       core: {
         root: {
           outline: "1px solid",
-          outlineColor: "core.outline"
+          outlineColor: "outline.core"
         }
       },
       floating: {
         root: {
           outline: "1px solid",
-          outlineColor: "floating.outline"
+          outlineColor: "outline.floating"
         }
       }
     }
@@ -9958,7 +10114,7 @@ var mediaControllerSlotRecipe = defineSlotRecipe({
       display: "flex",
       padding: 1,
       alignSelf: "center",
-      color: "brand.surface",
+      color: "surface.brand",
       outlineOffset: "2px"
     },
     icon: {
@@ -9971,14 +10127,14 @@ var mediaControllerSlotRecipe = defineSlotRecipe({
       play: {
         root: {
           padding: 0,
-          color: "brand.text",
-          backgroundColor: "brand.surface",
+          color: "text.brand",
+          backgroundColor: "surface.brand",
           _hover: {
-            color: "brand.text",
-            backgroundColor: "brand.surface.hover",
+            color: "text.brand",
+            backgroundColor: "surface.brand.hover",
             _active: {
-              color: "brand.text",
-              backgroundColor: "brand.surface.active"
+              color: "text.brand",
+              backgroundColor: "surface.brand.active"
             }
           },
           _disabled: {
@@ -9991,9 +10147,9 @@ var mediaControllerSlotRecipe = defineSlotRecipe({
       jumpSkip: {
         root: {
           _hover: {
-            backgroundColor: "ghost.surface.hover",
+            backgroundColor: "surface.ghost.hover",
             _active: {
-              backgroundColor: "ghost.surface.active"
+              backgroundColor: "surface.ghost.active"
             }
           },
           _disabled: {
@@ -10103,16 +10259,16 @@ var menuSlotRecipe = defineSlotRecipe({
       justifyContent: "space-between",
       gap: 1.5,
       _hover: {
-        backgroundColor: "accent.surface.hover"
+        backgroundColor: "surface.accent.hover"
       },
       "&:active": {
-        backgroundColor: "accent.surface.active"
+        backgroundColor: "surface.accent.active"
       },
       _checked: {
-        backgroundColor: "accent.surface"
+        backgroundColor: "surface.accent"
       },
       _highlighted: {
-        backgroundColor: "ghost.surface.hover"
+        backgroundColor: "surface.ghost.hover"
       }
     },
     itemGroupLabel: {
@@ -10149,19 +10305,19 @@ var menuSlotRecipe = defineSlotRecipe({
       core: {
         content: {
           border: "1px solid",
-          borderColor: "core.outline"
+          borderColor: "outline.core"
         }
       },
       accent: {
         content: {
           border: "1px solid",
-          borderColor: "core.outline"
+          borderColor: "outline.core"
         }
       },
       floating: {
         content: {
           border: "sm",
-          borderColor: "floating.outline",
+          borderColor: "outline.floating",
           boxShadow: "lg"
         }
       }
@@ -10249,7 +10405,7 @@ var numericStepperRecipe = defineSlotRecipe({
       textAlign: "center",
       transitionProperty: "common",
       transitionDuration: "fast",
-      color: "core.text",
+      color: "text.core",
       backgroundColor: "transparent",
       _focus: {
         backgroundColor: "surface",
@@ -10257,7 +10413,7 @@ var numericStepperRecipe = defineSlotRecipe({
         outlineColor: "outline.focus"
       },
       _active: {
-        backgroundColor: "accent.surface.active"
+        backgroundColor: "surface.accent.active"
       },
       _disabled: {
         pointerEvents: "none",
@@ -10265,7 +10421,7 @@ var numericStepperRecipe = defineSlotRecipe({
       },
       _hover: {
         outline: "1px solid",
-        outlineColor: "core.outline"
+        outlineColor: "outline.core"
       }
     },
     text: {
@@ -10275,7 +10431,7 @@ var numericStepperRecipe = defineSlotRecipe({
       paddingX: 1,
       textAlign: "center",
       width: "4ch",
-      color: "core.text"
+      color: "text.core"
     },
     button: {
       outlineOffset: "-2px",
@@ -10309,18 +10465,18 @@ var paginationSlotRecipe = defineSlotRecipe({
       width: "5",
       fontSize: "xs",
       borderRadius: "xl",
-      color: "core.text",
+      color: "text.core",
       cursor: "pointer",
       _hover: {
-        background: "ghost.surface.hover",
+        background: "surface.ghost.hover",
         _active: {
-          background: "ghost.surface.active"
+          background: "surface.ghost.active"
         }
       },
       _selected: {
         cursor: "default",
         fontWeight: "bold",
-        backgroundColor: "core.surface.active"
+        backgroundColor: "surface.core.active"
       }
     },
     list: {
@@ -10340,11 +10496,11 @@ var popoverSlotRecipe = defineSlotRecipe({
       position: "relative",
       display: "flex",
       flexDirection: "row-reverse",
-      color: "text.inverted",
+      color: "text.brand",
       gap: "0.625rem",
       padding: "0.563rem 0.75rem",
       textStyle: "sm",
-      bg: "surface.tertiary",
+      bg: "surface.brand",
       boxShadow: "lg",
       borderRadius: "sm",
       zIndex: "popover",
@@ -10361,14 +10517,14 @@ var popoverSlotRecipe = defineSlotRecipe({
       }
     },
     body: {
-      color: "text.inverted",
+      color: "text.brand",
       alignItems: "center",
       borderRadius: "sm",
       zIndex: "inherit",
       maxWidth: "20em"
     },
     arrow: {
-      "--arrow-background": "colors.surface.tertiary",
+      "--arrow-background": "colors.surface.brand",
       "--arrow-size": "6px"
     }
   },
@@ -10412,7 +10568,7 @@ var progressBarRecipe = defineSlotRecipe({
     },
     background: {
       display: "flex",
-      backgroundColor: "accent.surface.hover",
+      backgroundColor: "surface.accent.hover",
       borderRadius: "sm",
       boxPack: "start",
       justifyContent: "flex-start",
@@ -10423,7 +10579,7 @@ var progressBarRecipe = defineSlotRecipe({
       borderRadius: "sm"
     },
     progress: {
-      backgroundColor: "brand.surface.active",
+      backgroundColor: "surface.brand.active",
       borderRadius: "sm",
       maxWidth: "100%",
       transition: "width .2s ease-out"
@@ -10453,7 +10609,7 @@ var progressIndicatorRecipe = defineSlotRecipe({
       width: 1,
       fill: "icon.disabled",
       "&[aria-current='step']": {
-        fill: "brand.surface"
+        fill: "surface.brand"
       }
     }
   }
@@ -10493,17 +10649,17 @@ var radioGroupSlotRecipe = defineSlotRecipe({
       justifyContent: "center",
       verticalAlign: "top",
       borderWidth: "2px",
-      borderColor: "core.outline",
+      borderColor: "outline.core",
       borderRadius: "xl",
       width: 4,
       height: 4,
       _checked: {
-        borderColor: "brand.surface"
+        borderColor: "surface.brand"
       },
       _hover: {
-        borderColor: "brand.surface.hover",
+        borderColor: "surface.brand.hover",
         "& .dot": {
-          backgroundColor: "brand.surface.hover"
+          backgroundColor: "surface.brand.hover"
         }
       },
       _disabled: {
@@ -10524,7 +10680,7 @@ var radioGroupSlotRecipe = defineSlotRecipe({
         height: "full",
         width: "full",
         borderRadius: "xl",
-        backgroundColor: "brand.surface",
+        backgroundColor: "surface.brand",
         scale: "0.5"
       }
     }
@@ -10576,15 +10732,15 @@ var radioCardSlotRecipe = defineSlotRecipe({
     variant: {
       core: {
         item: {
-          outlineColor: "core.outline",
+          outlineColor: "outline.core",
           outlineWidth: tokens22__default.size.stroke.sm,
           outlineStyle: "solid",
           _hover: {
-            outlineColor: "core.outline.hover",
+            outlineColor: "outline.core.hover",
             outlineWidth: tokens22__default.size.stroke.md,
             outlineStyle: "solid",
             _active: {
-              backgroundColor: "core.surface.active",
+              backgroundColor: "surface.core.active",
               outlineWidth: tokens22__default.size.stroke.sm
             }
           },
@@ -10592,7 +10748,7 @@ var radioCardSlotRecipe = defineSlotRecipe({
             outlineColor: "outline.focus",
             outlineWidth: tokens22__default.size.stroke.md,
             outlineStyle: "solid",
-            backgroundColor: "core.surface.active",
+            backgroundColor: "surface.core.active",
             _focusVisible: {
               outlineStyle: "double",
               outlineWidth: `calc(3 * ${tokens22__default.size.stroke.md})`
@@ -10606,15 +10762,15 @@ var radioCardSlotRecipe = defineSlotRecipe({
           boxShadow: "0px 1px 3px 0px var(--shadow-color)",
           shadowColor: "surface.disabled",
           border: "sm",
-          borderColor: "floating.outline",
-          background: "floating.surface",
+          borderColor: "outline.floating",
+          background: "surface.floating",
           _hover: {
-            background: "floating.surface.hover",
-            borderColor: "floating.outline.hover",
+            background: "surface.floating.hover",
+            borderColor: "outline.floating.hover",
             boxShadow: "0px 2px 6px 0px var(--shadow-color)",
             _active: {
-              background: "floating.surface.active",
-              borderColor: "floating.outline.active",
+              background: "surface.floating.active",
+              borderColor: "outline.neutral",
               boxShadow: "none"
             }
           },
@@ -10622,7 +10778,7 @@ var radioCardSlotRecipe = defineSlotRecipe({
             outlineColor: "outline.focus",
             outlineWidth: tokens22__default.size.stroke.md,
             outlineStyle: "solid",
-            backgroundColor: "core.surface.active",
+            backgroundColor: "surface.core.active",
             _focusVisible: {
               outlineStyle: "double",
               outlineWidth: `calc(3 * ${tokens22__default.size.stroke.md})`
@@ -10702,7 +10858,7 @@ var selectSlotRecipe = defineSlotRecipe({
       color: {
         base: "text",
         _disabled: "text.disabled",
-        _invalid: "text.secondary"
+        _invalid: "text.highlight"
       },
       _icon: {
         width: 3,
@@ -10739,14 +10895,14 @@ var selectSlotRecipe = defineSlotRecipe({
       justifyContent: "space-between",
       gap: 1,
       borderRadius: "sm",
-      color: "ghost.text",
+      color: "text.ghost",
       cursor: "pointer",
       outline: "none",
       "&[data-highlighted]:hover": {
         outlineOffset: "2px",
         outline: "2px solid",
         outlineColor: "outline.focus",
-        backgroundColor: "ghost.surface.hover"
+        backgroundColor: "surface.accent.hover"
       },
       "&[data-highlighted]": {
         outlineOffset: "2px",
@@ -10754,7 +10910,7 @@ var selectSlotRecipe = defineSlotRecipe({
         outlineColor: "outline.focus"
       },
       _active: {
-        backgroundColor: "ghost.surface.active"
+        backgroundColor: "surface.accent.active"
       },
       _highlighted: {
         _active: {
@@ -10762,12 +10918,12 @@ var selectSlotRecipe = defineSlotRecipe({
         }
       },
       _hover: {
-        backgroundColor: "ghost.surface.hover",
+        backgroundColor: "surface.accent.hover",
         outline: "2px solid core.outline",
         outlineOffset: "2px"
       },
       _selected: {
-        backgroundColor: "ghost.surface.active"
+        backgroundColor: "surface.accent"
       },
       _icon: {
         width: 3,
@@ -10802,9 +10958,9 @@ var selectSlotRecipe = defineSlotRecipe({
     valueText: {},
     itemDescription: {
       fontSize: ["mobile.xs", "desktop.xs"],
-      color: "ghost.text",
+      color: "text.ghost",
       "[aria-selected='true'] &": {
-        color: "ghost.text"
+        color: "text.ghost"
       }
     }
   },
@@ -10813,13 +10969,13 @@ var selectSlotRecipe = defineSlotRecipe({
       core: {
         control: {
           outline: "1px solid",
-          outlineColor: "core.outline",
+          outlineColor: "outline.core",
           _hover: {
             outline: "2px solid",
-            outlineColor: "core.outline"
+            outlineColor: "outline.core"
           },
           _active: {
-            backgroundColor: "brand.surface.active"
+            backgroundColor: "surface.brand.active"
           },
           _disabled: {
             pointerEvents: "none",
@@ -10831,13 +10987,13 @@ var selectSlotRecipe = defineSlotRecipe({
       floating: {
         control: {
           outline: "1px solid",
-          outlineColor: "floating.outline",
+          outlineColor: "outline.floating",
           _hover: {
             outline: "2px solid",
-            outlineColor: "floating.outline"
+            outlineColor: "outline.floating"
           },
           _active: {
-            backgroundColor: "brand.surface.active"
+            backgroundColor: "surface.brand.active"
           },
           _disabled: {
             pointerEvents: "none",
@@ -10851,7 +11007,7 @@ var selectSlotRecipe = defineSlotRecipe({
       rightSideSquare: {
         control: {
           outline: "1px solid",
-          outlineColor: "core.outline"
+          outlineColor: "outline.core"
         },
         trigger: {
           _focus: {
@@ -10862,7 +11018,7 @@ var selectSlotRecipe = defineSlotRecipe({
       leftSideSquare: {
         control: {
           outline: "1px solid",
-          outlineColor: "core.outline"
+          outlineColor: "outline.core"
         },
         trigger: {
           _focus: {
@@ -10930,7 +11086,7 @@ var stepperSlotRecipe = defineSlotRecipe({
       },
       accent: {
         root: {
-          backgroundColor: "accent.bg"
+          backgroundColor: "bg.accent"
         },
         stepButton: {
           color: {
@@ -10938,13 +11094,13 @@ var stepperSlotRecipe = defineSlotRecipe({
             _dark: "whiteAlpha.900"
           },
           _disabled: {
-            color: "core.text"
+            color: "text.core"
           },
           _currentStep: {
-            color: "accent.text"
+            color: "text.accent"
           },
           _hover: {
-            backgroundColor: "accent.surface.hover",
+            backgroundColor: "surface.accent.hover",
             _disabled: {
               backgroundColor: "transparent"
             }
@@ -10952,7 +11108,7 @@ var stepperSlotRecipe = defineSlotRecipe({
         },
         backButton: {
           _hover: {
-            backgroundColor: "brand.surface.hover"
+            backgroundColor: "surface.brand.hover"
           }
         }
       }
@@ -10986,7 +11142,7 @@ var switchSlotRecipe = defineSlotRecipe({
       justifyContent: "center",
       width: "var(--switch-height)",
       height: "var(--switch-height)",
-      backgroundColor: "core.icon",
+      backgroundColor: "icon.core",
       _disabled: {
         backgroundColor: "icon.disabled",
         _checked: {
@@ -10995,7 +11151,7 @@ var switchSlotRecipe = defineSlotRecipe({
       },
       _checked: {
         translate: "var(--switch-x) 0",
-        backgroundColor: "brand.icon"
+        backgroundColor: "icon.brand"
       }
     },
     label: {
@@ -11024,13 +11180,13 @@ var switchSlotRecipe = defineSlotRecipe({
       transitionDuration: "fast",
       outline: "1px solid",
       outlineOffset: "-1px",
-      outlineColor: "core.outline",
+      outlineColor: "outline.core",
       _hover: {
         outline: "2px solid",
-        outlineColor: "core.outline.hover",
+        outlineColor: "outline.core.hover",
         _checked: {
           outlineColor: "transparent",
-          backgroundColor: "brand.surface.hover"
+          backgroundColor: "surface.brand.hover"
         }
       },
       _focusVisible: {
@@ -11039,7 +11195,7 @@ var switchSlotRecipe = defineSlotRecipe({
         outlineStyle: "double"
       },
       _checked: {
-        backgroundColor: "brand.surface",
+        backgroundColor: "surface.brand",
         outline: "none",
         _focusVisible: {
           outlineOffset: "1px",
@@ -11138,10 +11294,10 @@ var tableSlotRecipe = defineSlotRecipe({
           backgroundColor: "bg"
         },
         header: {
-          backgroundColor: "bg.tertiary"
+          backgroundColor: "bg.brand"
         },
         columnHeader: {
-          color: "text.secondary"
+          color: "text.highlight"
         }
       },
       grey: {
@@ -11350,26 +11506,26 @@ var tabsSlotRecipe = defineSlotRecipe({
     variant: {
       core: {
         list: {
-          color: "core.text",
+          color: "text.core",
           border: "sm"
         },
         trigger: {
-          color: "core.text",
+          color: "text.core",
           border: "md",
           borderColor: "transparent",
           _hover: {
             outline: "2px solid",
-            outlineColor: "core.outline.hover",
+            outlineColor: "outline.core.hover",
             outlineOffset: "-2px"
           },
           _active: {
-            backgroundColor: "brand.surface.active",
-            color: "brand.text",
+            backgroundColor: "surface.brand.active",
+            color: "text.brand",
             outline: "none"
           },
           _selected: {
-            backgroundColor: "brand.surface",
-            color: "brand.text",
+            backgroundColor: "surface.brand",
+            color: "text.brand",
             _hover: {
               outline: "none"
             }
@@ -11382,28 +11538,28 @@ var tabsSlotRecipe = defineSlotRecipe({
       },
       accent: {
         list: {
-          backgroundColor: "accent.bg",
-          color: "accent.text"
+          backgroundColor: "bg.accent",
+          color: "text.accent"
         },
         trigger: {
-          color: "accent.text",
+          color: "text.accent",
           _disabled: {
             backgroundColor: "surface.disabled",
             color: "icon.disabled"
           },
           _hover: {
-            backgroundColor: "accent.surface.hover",
+            backgroundColor: "surface.accent.hover",
             _active: {
-              backgroundColor: "brand.surface.active",
-              color: "brand.text"
+              backgroundColor: "surface.brand.active",
+              color: "text.brand"
             }
           },
           _selected: {
-            backgroundColor: "brand.surface",
-            color: "brand.text",
+            backgroundColor: "surface.brand",
+            color: "text.brand",
             _hover: {
-              backgroundColor: "brand.surface.hover",
-              color: "brand.text",
+              backgroundColor: "surface.brand.hover",
+              color: "text.brand",
               outline: "none"
             }
           }
@@ -11451,7 +11607,7 @@ var tabsSlotRecipe = defineSlotRecipe({
           paddingX: 3,
           _focus: {
             border: "md",
-            borderColor: "accent.surface"
+            borderColor: "surface.accent"
           }
         }
       }
@@ -11482,13 +11638,13 @@ var toastSlotRecipe = defineSlotRecipe({
       boxShadow: "xl",
       color: "text",
       "&[data-type=success]": {
-        backgroundColor: "alert.success.surface"
+        backgroundColor: "surface.success"
       },
       "&[data-type=error]": {
-        backgroundColor: "alert.error.surface"
+        backgroundColor: "surface.critical"
       },
       "&[data-type=info]": {
-        backgroundColor: "alert.info.surface"
+        backgroundColor: "surface.info"
       }
     },
     title: {
@@ -11535,6 +11691,7 @@ var slotRecipes = {
   checkboxCard: choiceChipSlotRecipe,
   collapsible: collapsibleSlotRecipe,
   tooltip: popoverSlotRecipe,
+  tag: inputChipSlotRecipe,
   menu: menuSlotRecipe
 };
 var animations = defineTokens.animations({
@@ -12382,6 +12539,6 @@ var TooltipContent = ({
   ] }) }) });
 };
 
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, AttachedInputs, Autocomplete, AutocompleteItem, AutocompleteItemGroup, AutocompleteItemGroupLabel, Badge, Brand, Breadcrumb, Button, ButtonGroup, Calendar, CalendarCell, CalendarGrid, CalendarHeader, CalendarProvider, CardSelect, CardSelectContent, CardSelectTrigger, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, Clipboard, ClipboardButton, CloseButton, CloseDrawerLine, Code, ColorInlineLoader, ColorModeButton, ColorModeIcon, ColorModeProvider, ColorSpinner, Combobox2 as Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field3 as Field, FieldErrorText, FieldLabel, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, Heading, IconButton, InfoTag, Input, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, List, ListBox, ListIndicator, ListItem2 as ListItem, Menu, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuRadioItem, MenuRadioItemGroup, MenuSeparator, MenuTrigger, MenuTriggerItem, NativeSelect, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, NudgeTrigger, NudgeWizardStep, NumericStepper, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover2 as Popover, PopoverContent, PopoverTrigger, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, RangeCalendar, ScrollCalendar, SearchInput, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, StaticCard, Stepper, StepperStep, SvgBox, Switch, Table, TableBody, TableColumnHeader, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Text3 as Text, TextLink, Textarea, TimePicker, Tooltip, TooltipContent, TooltipTrigger, TravelTag, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useCalendar, useColorMode, useColorModeValue, useMenuContext, useTableSort, useTranslation };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, AttachedInputs, Autocomplete, AutocompleteItem, AutocompleteItemGroup, AutocompleteItemGroupLabel, Badge, Brand, Breadcrumb, Button, ButtonGroup, Calendar, CalendarCell, CalendarGrid, CalendarHeader, CalendarProvider, CardSelect, CardSelectContent, CardSelectTrigger, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, Clipboard, ClipboardButton, CloseButton, CloseDrawerLine, Code, ColorInlineLoader, ColorModeButton, ColorModeIcon, ColorModeProvider, ColorSpinner, Combobox2 as Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field3 as Field, FieldErrorText, FieldLabel, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, Heading, IconButton, InfoTag, Input, InputChip, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, List, ListBox, ListIndicator, ListItem2 as ListItem, Menu, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuRadioItem, MenuRadioItemGroup, MenuSeparator, MenuTrigger, MenuTriggerItem, NativeSelect, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, NudgeTrigger, NudgeWizardStep, NumericStepper, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover2 as Popover, PopoverContent, PopoverTrigger, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, RangeCalendar, ScrollCalendar, SearchInput, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, StaticCard, Stepper, StepperStep, SvgBox, Switch, Table, TableBody, TableColumnHeader, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Text3 as Text, TextLink, Textarea, TimePicker, Tooltip, TooltipContent, TooltipTrigger, TravelTag, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useCalendar, useColorMode, useColorModeValue, useMenuContext, useTableSort, useTranslation };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map