@vygruppen/spor-react 13.0.2 → 13.1.0

package/dist/index.cjs

@@ -5,7 +5,7 @@ var spor_icon_react_star = require('@vygruppen/spor-icon-react');
 var jsxRuntime = require('react/jsx-runtime');
 var React13 = require('react');
 var sporLoader = require('@vygruppen/spor-loader');
-var ReactLottie = require('lottie-react');
+var lottieReact = require('lottie-react');
 var usehooksTs = require('usehooks-ts');
 var reactAria = require('react-aria');
 var date = require('@internationalized/date');
@@ -44,7 +44,6 @@ function _interopNamespace(e) {
 
 var spor_icon_react_star__namespace = /*#__PURE__*/_interopNamespace(spor_icon_react_star);
 var React13__namespace = /*#__PURE__*/_interopNamespace(React13);
-var ReactLottie__default = /*#__PURE__*/_interopDefault(ReactLottie);
 var tokens22__namespace = /*#__PURE__*/_interopNamespace(tokens22);
 var tokens4__default = /*#__PURE__*/_interopDefault(tokens4);
 
@@ -232,8 +231,23 @@ function createTexts(texts27) {
   return texts27;
 }
 function Lottie({ animationData }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(ReactLottie__default.default, { animationData });
+  const { View } = lottieReact.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,
@@ -241,7 +255,7 @@ var ColorInlineLoader = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.inlineLoaderColorData }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
+    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: useGetLoadingText() })
   ] });
 };
 var ColorSpinner = ({
@@ -252,14 +266,14 @@ var ColorSpinner = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.spinnerColorData }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: useGetLoadingText() }),
     children && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
 };
 var ContentLoader = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Box, { maxWidth: "140px", marginX: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.contentLoaderData }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: useGetLoadingText() }),
     children && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { textAlign: "center", fontWeight: "bold", children })
   ] });
 };
@@ -279,7 +293,7 @@ var DarkFullScreenLoader = ({
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.fullScreenLoaderWhiteData }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
+        /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: useGetLoadingText() })
       ]
     }
   );
@@ -291,7 +305,7 @@ var DarkInlineLoader = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.inlineLoaderDarkData }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
+    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: useGetLoadingText() })
   ] });
 };
 var DarkSpinner = ({
@@ -304,7 +318,7 @@ var DarkSpinner = ({
   const spinnerData = colorMode === "dark" ? sporLoader.spinnerLightData : sporLoader.spinnerDarkData;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: spinnerData }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: useGetLoadingText() }),
     children && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
 };
@@ -315,7 +329,7 @@ var LightFullScreenLoader = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { height: "100%", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.fullScreenLoaderBlackData }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
+    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: useGetLoadingText() })
   ] });
 };
 var LightInlineLoader = ({
@@ -325,7 +339,7 @@ var LightInlineLoader = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { height: "100%", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.inlineLoaderLightData }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
+    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: useGetLoadingText() })
   ] });
 };
 var LightSpinner = ({
@@ -336,7 +350,7 @@ var LightSpinner = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.spinnerLightData }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: useGetLoadingText() }),
     children && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
 };
@@ -591,12 +605,12 @@ var ButtonContent = ({
 ] });
 var LoadingContent = ({
   children,
-  loadingText
+  loadingText: loadingText2
 }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { gap: "1", visibility: "hidden", children }),
   /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { position: "absolute", inset: "1px 0", children: [
     /* @__PURE__ */ jsxRuntime.jsx(ColorInlineLoader, { maxWidth: "8", marginX: 2, marginY: 2 }),
-    loadingText && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: loadingText })
+    loadingText2 && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: loadingText2 })
   ] })
 ] });
 var getChildContent = (child) => {
@@ -609,7 +623,7 @@ var Button = ({
   ref,
   loading,
   disabled,
-  loadingText,
+  loadingText: loadingText2,
   variant = "primary",
   size = "md",
   leftIcon,
@@ -619,11 +633,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__ */ jsxRuntime.jsx(LoadingContent, { size, loadingText, children: /* @__PURE__ */ jsxRuntime.jsx(ButtonContent, { leftIcon, rightIcon, children: content }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(LoadingContent, { size, loadingText: loadingText2, children: /* @__PURE__ */ jsxRuntime.jsx(ButtonContent, { leftIcon, rightIcon, children: content }) });
     return /* @__PURE__ */ jsxRuntime.jsx(ButtonContent, { leftIcon, rightIcon, children: content });
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -683,59 +697,59 @@ var badgeRecipie = react.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"
         }
       }
     },
@@ -1108,10 +1122,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) {
@@ -1299,6 +1313,7 @@ var ServiceAlert = ({
       css: { ...styles.root, ...css },
       ref,
       ...rest,
+      className: "light",
       children: /* @__PURE__ */ jsxRuntime.jsxs(react.Accordion.Item, { value: defaultValue, children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemTrigger, { css: styles.itemTrigger, children: /* @__PURE__ */ jsxRuntime.jsxs(
           react.HStack,
@@ -1327,7 +1342,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(texts5.notification(notification)) }),
-                /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownDownFill24Icon, { color: "icon.inverted" }) })
+                /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownDownFill24Icon, { color: "icon.brand" }) })
               ] })
             ]
           }
@@ -1692,18 +1707,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"
     }
   }
@@ -2106,7 +2121,7 @@ var Field3 = ({
         ]
       }
     ),
-    helperText && /* @__PURE__ */ jsxRuntime.jsx(Text3, { variant: "sm", color: "text.tertiary", children: helperText })
+    helperText && /* @__PURE__ */ jsxRuntime.jsx(Text3, { variant: "sm", color: "text.subtle", children: helperText })
   ] });
 };
 var FieldErrorText = ({
@@ -2343,7 +2358,7 @@ var CalendarNavigator = ({
         fontWeight: "bold",
         flex: "1",
         textAlign: "center",
-        color: "core.text",
+        color: "text.core",
         children: capitalize(title)
       }
     ),
@@ -3142,7 +3157,7 @@ var CloseDrawerLine = ({
       top: 0,
       marginY: 2,
       marginX: "auto",
-      backgroundColor: "floating.outline.active",
+      backgroundColor: "outline.neutral",
       borderRadius: "xs",
       ...props,
       ref
@@ -3613,7 +3628,7 @@ var CardSelectContent = ({
       p: "2",
       bg: "bg",
       border: "sm",
-      borderColor: "floating.outline",
+      borderColor: "outline.floating",
       borderRadius: "sm",
       ...props,
       children
@@ -3621,9 +3636,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,
@@ -3708,9 +3723,15 @@ var Popover = ({
   hasBackdrop = true,
   containerPadding = 12
 }) => {
-  var _a6;
   const internalRef = React13.useRef(null);
   const popoverRef = ref ?? internalRef;
+  React13.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 } = reactAria.usePopover(
     {
       triggerRef,
@@ -3724,19 +3745,11 @@ var Popover = ({
     },
     state
   );
-  const popoverBox = /* @__PURE__ */ jsxRuntime.jsxs(
-    react.Box,
-    {
-      ...popoverProps,
-      ref: popoverRef,
-      minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: state.close }),
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: state.close })
-      ]
-    }
-  );
+  const popoverBox = /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { ...popoverProps, ref: popoverRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: state.close }),
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: state.close })
+  ] });
   if (isNonModal) {
     return popoverBox;
   }
@@ -3867,7 +3880,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__ */ jsxRuntime.jsx(
@@ -3953,6 +3966,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);
@@ -4790,7 +4816,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 })
           ]
@@ -4805,7 +4831,7 @@ var SelectLabel = (props) => {
     react.Select.Label,
     {
       ...props,
-      "data-selected": value.length > 0 ? true : void 0
+      "data-selected": value.length > 0 || void 0
     }
   );
 };
@@ -4816,14 +4842,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
@@ -4882,6 +4913,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,
     {
@@ -4895,9 +4928,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`;
+        }
       } })
     }
   );
@@ -5152,7 +5196,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),
@@ -6592,8 +6636,8 @@ var StepperStep = ({
   const state = getState(stepNumber, activeStep);
   const recipe = react.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__ */ jsxRuntime.jsxs(react.Box, { css: style.stepContainer, "data-part": "step-container", children: [
     stepNumber > 1 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -6897,40 +6941,40 @@ var buttonRecipe = react.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__namespace.default.size.stroke.sm,
-        outlineColor: "core.outline",
+        outlineColor: "outline.core",
         _hover: {
           outlineWidth: tokens22__namespace.default.size.stroke.md,
-          outlineColor: "core.outline.hover",
+          outlineColor: "outline.core.hover",
           _active: {
-            background: "core.surface.active",
+            background: "surface.core.active",
             outlineWidth: tokens22__namespace.default.size.stroke.sm,
-            outlineColor: "core.outline"
+            outlineColor: "outline.core"
           }
         },
         _focus: {
@@ -6938,28 +6982,28 @@ var buttonRecipe = react.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"
           }
         }
       }
@@ -7014,12 +7058,12 @@ var closeButtonRecipe = react.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"
       }
     }
   },
@@ -7094,7 +7138,7 @@ var inputRecipe = react.defineRecipe({
       },
       _hover: {
         outline: "2px solid",
-        outlineColor: "core.outline"
+        outlineColor: "outline.core"
       }
     }
   },
@@ -7103,14 +7147,14 @@ var inputRecipe = react.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: {
@@ -7120,17 +7164,17 @@ var inputRecipe = react.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",
@@ -7173,7 +7217,7 @@ var linkRecipe = react.defineRecipe({
   variants: {
     variant: {
       primary: {
-        color: "core.text",
+        color: "text.core",
         _hover: {
           color: "text",
           _active: {
@@ -7236,29 +7280,29 @@ var pressableCardRecipe = react.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__namespace.default.size.stroke.sm,
         outlineStyle: "solid",
         _hover: {
-          outlineColor: "core.outline.hover",
+          outlineColor: "outline.core.hover",
           outlineWidth: tokens22__namespace.default.size.stroke.md,
           outlineStyle: "solid",
           _active: {
-            backgroundColor: "core.surface.active",
+            backgroundColor: "surface.core.active",
             outlineWidth: tokens22__namespace.default.size.stroke.sm
           }
         }
@@ -7266,12 +7310,12 @@ var pressableCardRecipe = react.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"
           }
         }
@@ -7390,7 +7434,7 @@ var skeletonRecipe = react.defineRecipe({
       },
       none: {
         animation: "none",
-        background: "surface.color.grey"
+        background: "surface.neutral"
       }
     }
   }
@@ -7402,29 +7446,29 @@ var staticCardRecipe = react.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"
       }
     }
   },
@@ -7482,7 +7526,7 @@ var vyUtviklingColors = react.defineSemanticTokens.colors({
   ...tokens4__default.default.color["vy-utvikling"].color.vyUtvikling
 });
 var cargonetColors = react.defineSemanticTokens.colors({
-  ...tokens4__default.default.color.cargonet.color.cargonet
+  ...tokens4__default.default.color["cargonet"].color.cargonet
 });
 var radii = react.defineSemanticTokens.radii({
   none: { value: tokens22__namespace.default.size["border-radius"].none },
@@ -7789,6 +7833,7 @@ var comboboxAnatomy = react$1.comboboxAnatomy.extendWith(
   "indicatorGroup",
   "empty"
 );
+var tagAnatomy = anatomy.createAnatomy("tag").parts("root");
 var menuAnatomy = anatomy.createAnatomy("menu").parts(
   "trigger",
   "content",
@@ -7819,7 +7864,7 @@ var accordionSlotRecipe = react.defineSlotRecipe({
       borderRadius: "sm",
       display: "flex",
       justifyContent: "space-between",
-      color: "core.text",
+      color: "text.core",
       textAlign: "left",
       width: "full",
       alignItems: "center",
@@ -7875,10 +7920,10 @@ var accordionSlotRecipe = react.defineSlotRecipe({
         },
         itemTrigger: {
           "&:hover": {
-            background: "ghost.surface.hover"
+            background: "surface.ghost.hover"
           },
           "&:active": {
-            backgroundColor: "ghost.surface.active"
+            backgroundColor: "surface.ghost.active"
           }
         }
       },
@@ -7886,7 +7931,7 @@ var accordionSlotRecipe = react.defineSlotRecipe({
         item: {
           outline: "solid",
           outlineWidth: tokens22__namespace.default.size.stroke.sm,
-          outlineColor: "core.outline"
+          outlineColor: "outline.core"
         },
         itemTrigger: {
           _expanded: {
@@ -7894,12 +7939,12 @@ var accordionSlotRecipe = react.defineSlotRecipe({
           },
           "&:hover": {
             outlineWidth: tokens22__namespace.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__namespace.default.size.stroke.sm,
             outline: "none"
           }
@@ -7912,7 +7957,7 @@ var accordionSlotRecipe = react.defineSlotRecipe({
         item: {
           borderRadius: "none",
           borderBottom: "1px solid",
-          borderBottomColor: "floating.outline.active"
+          borderBottomColor: "outline.neutral"
         }
       },
       floating: {
@@ -7920,7 +7965,7 @@ var accordionSlotRecipe = react.defineSlotRecipe({
           outline: "1px solid",
           outlineWidth: tokens22__namespace.default.size.stroke.sm,
           boxShadow: "sm",
-          outlineColor: "floating.outline"
+          outlineColor: "outline.floating"
         },
         itemTrigger: {
           _expanded: {
@@ -7929,11 +7974,11 @@ var accordionSlotRecipe = react.defineSlotRecipe({
           "&:hover": {
             outlineWidth: tokens22__namespace.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__namespace.default.size.stroke.sm,
             outline: "none"
           }
@@ -7944,21 +7989,21 @@ var accordionSlotRecipe = react.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`
       }
     }
   }
@@ -7993,13 +8038,13 @@ var alertSlotRecipe = react.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")
     }
   },
@@ -8029,117 +8074,117 @@ var alertExpandableSlotRecipe = react.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"
         }
       }
     }
@@ -8155,10 +8200,10 @@ var alertServiceSlotRecipe = react.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: {
@@ -8170,15 +8215,15 @@ var alertServiceSlotRecipe = react.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: {
@@ -8188,7 +8233,7 @@ var alertServiceSlotRecipe = react.defineSlotRecipe({
       fontWeight: "400",
       fontSize: ["mobile.xs", "desktop.xs"],
       textWrap: "nowrap",
-      color: "alert.service.text.secondary"
+      color: "text.service.subtle"
     },
     itemContent: {
       paddingX: ["2", "3"],
@@ -8198,14 +8243,14 @@ var alertServiceSlotRecipe = react.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
@@ -8288,7 +8333,7 @@ var comboboxSlotRecipe = react.defineSlotRecipe({
       borderRadius: "sm",
       flex: "1",
       _highlighted: {
-        bg: "ghost.surface.active"
+        bg: "surface.ghost.active"
       },
       _disabled: {
         pointerEvents: "none",
@@ -8296,13 +8341,13 @@ var comboboxSlotRecipe = react.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: {
@@ -8321,7 +8366,7 @@ var comboboxSlotRecipe = react.defineSlotRecipe({
     itemGroupLabel: {
       px: "3",
       py: "0.5",
-      color: "floating.text",
+      color: "text.floating",
       fontFeatureSettings: "liga off",
       fontSize: ["mobile.sm, desktop.sm"],
       fontWeight: "bold"
@@ -8357,11 +8402,11 @@ var breadcrumbSlotRecipe = react.defineSlotRecipe({
       core: {
         link: {
           _hover: {
-            outlineColor: "core.outline.hover",
+            outlineColor: "outline.core.hover",
             outlineWidth: tokens22__namespace.default.size.stroke.md,
             outlineStyle: "solid",
             _active: {
-              backgroundColor: "core.surface.active",
+              backgroundColor: "surface.core.active",
               outline: "none"
             }
           }
@@ -8370,9 +8415,9 @@ var breadcrumbSlotRecipe = react.defineSlotRecipe({
       ghost: {
         link: {
           _hover: {
-            backgroundColor: "ghost.surface.hover",
+            backgroundColor: "surface.ghost.hover",
             _active: {
-              backgroundColor: "ghost.surface.active"
+              backgroundColor: "surface.ghost.active"
             }
           }
         }
@@ -8394,10 +8439,10 @@ var checkboxSlotRecipe = react.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"
         }
       }
     },
@@ -8419,19 +8464,14 @@ var checkboxSlotRecipe = react.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",
@@ -8439,8 +8479,9 @@ var checkboxSlotRecipe = react.defineSlotRecipe({
         }
       },
       _disabled: {
-        // borderColor: coreText("disabled").color,
-        borderColor: "text.disabled"
+        background: "surface.disabled",
+        borderColor: "outline.disabled",
+        color: "text.disabled"
       },
       _invalid: {
         borderColor: "outline.error"
@@ -8450,7 +8491,7 @@ var checkboxSlotRecipe = react.defineSlotRecipe({
         outlineColor: "outline.focus",
         outlineOffset: tokens22__namespace.default.size.stroke.md,
         outlineWidth: tokens22__namespace.default.size.stroke.md,
-        borderColor: "core.outline",
+        borderColor: "outline.core",
         borderWidth: tokens22__namespace.default.size.stroke.md
       }
     },
@@ -8474,16 +8515,16 @@ var choiceChipSlotRecipe = react.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"
           }
         }
       },
@@ -8580,47 +8621,47 @@ var choiceChipSlotRecipe = react.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"
             }
           }
         }
@@ -8698,7 +8739,7 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
     },
     dateTimeSegment: {
       _focus: {
-        backgroundColor: "ghost.surface.active",
+        backgroundColor: "surface.ghost.active",
         color: "text"
       }
     },
@@ -8714,10 +8755,10 @@ var datePickerSlotRecipe = react.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",
@@ -8728,11 +8769,11 @@ var datePickerSlotRecipe = react.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: {
@@ -8740,11 +8781,11 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
       maxWidth: "100vw"
     },
     weekdays: {
-      color: "core.text",
+      color: "text.core",
       fontWeight: "bold"
     },
     weekend: {
-      color: "accent.text",
+      color: "text.accent",
       fontWeight: "bold"
     },
     cell: {
@@ -8758,12 +8799,12 @@ var datePickerSlotRecipe = react.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",
@@ -8772,10 +8813,10 @@ var datePickerSlotRecipe = react.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",
@@ -8783,16 +8824,16 @@ var datePickerSlotRecipe = react.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",
@@ -8807,14 +8848,14 @@ var datePickerSlotRecipe = react.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",
@@ -8832,17 +8873,17 @@ var datePickerSlotRecipe = react.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",
@@ -8862,11 +8903,11 @@ var datePickerSlotRecipe = react.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",
@@ -9326,13 +9367,13 @@ var fieldSlotRecipe = react.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,
@@ -9350,7 +9391,7 @@ var fieldSlotRecipe = react.defineSlotRecipe({
         left: "1em",
         width: "0.5rem",
         height: "0.5rem",
-        backgroundColor: "alert.error.surface",
+        backgroundColor: "surface.critical",
         transform: "translateY(-50%) rotate(45deg)",
         pointerEvents: "none"
       }
@@ -9411,12 +9452,12 @@ var floatingActionButtonSlotRecipe = react.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"
             }
           }
         }
@@ -9425,29 +9466,29 @@ var floatingActionButtonSlotRecipe = react.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"
             }
           }
         }
@@ -9739,6 +9780,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: "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 = react.defineSlotRecipe({
   slots: linjetagAnatomy.keys(),
   className: "spor-line-icon",
@@ -9915,18 +10070,18 @@ var listBoxSlotRecipe = react.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",
@@ -9936,9 +10091,9 @@ var listBoxSlotRecipe = react.defineSlotRecipe({
     label: {},
     description: {
       fontSize: ["mobile.xs", "desktop.xs"],
-      color: "ghost.text",
+      color: "text.ghost",
       "[aria-selected='true'] &": {
-        color: "ghost.text"
+        color: "text.ghost"
       }
     }
   },
@@ -9947,13 +10102,13 @@ var listBoxSlotRecipe = react.defineSlotRecipe({
       core: {
         root: {
           outline: "1px solid",
-          outlineColor: "core.outline"
+          outlineColor: "outline.core"
         }
       },
       floating: {
         root: {
           outline: "1px solid",
-          outlineColor: "floating.outline"
+          outlineColor: "outline.floating"
         }
       }
     }
@@ -9978,7 +10133,7 @@ var mediaControllerSlotRecipe = react.defineSlotRecipe({
       display: "flex",
       padding: 1,
       alignSelf: "center",
-      color: "brand.surface",
+      color: "surface.brand",
       outlineOffset: "2px"
     },
     icon: {
@@ -9991,14 +10146,14 @@ var mediaControllerSlotRecipe = react.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: {
@@ -10011,9 +10166,9 @@ var mediaControllerSlotRecipe = react.defineSlotRecipe({
       jumpSkip: {
         root: {
           _hover: {
-            backgroundColor: "ghost.surface.hover",
+            backgroundColor: "surface.ghost.hover",
             _active: {
-              backgroundColor: "ghost.surface.active"
+              backgroundColor: "surface.ghost.active"
             }
           },
           _disabled: {
@@ -10123,16 +10278,16 @@ var menuSlotRecipe = react.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: {
@@ -10169,19 +10324,19 @@ var menuSlotRecipe = react.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"
         }
       }
@@ -10269,7 +10424,7 @@ var numericStepperRecipe = react.defineSlotRecipe({
       textAlign: "center",
       transitionProperty: "common",
       transitionDuration: "fast",
-      color: "core.text",
+      color: "text.core",
       backgroundColor: "transparent",
       _focus: {
         backgroundColor: "surface",
@@ -10277,7 +10432,7 @@ var numericStepperRecipe = react.defineSlotRecipe({
         outlineColor: "outline.focus"
       },
       _active: {
-        backgroundColor: "accent.surface.active"
+        backgroundColor: "surface.accent.active"
       },
       _disabled: {
         pointerEvents: "none",
@@ -10285,7 +10440,7 @@ var numericStepperRecipe = react.defineSlotRecipe({
       },
       _hover: {
         outline: "1px solid",
-        outlineColor: "core.outline"
+        outlineColor: "outline.core"
       }
     },
     text: {
@@ -10295,7 +10450,7 @@ var numericStepperRecipe = react.defineSlotRecipe({
       paddingX: 1,
       textAlign: "center",
       width: "4ch",
-      color: "core.text"
+      color: "text.core"
     },
     button: {
       outlineOffset: "-2px",
@@ -10329,18 +10484,18 @@ var paginationSlotRecipe = react.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: {
@@ -10360,11 +10515,11 @@ var popoverSlotRecipe = react.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",
@@ -10381,14 +10536,14 @@ var popoverSlotRecipe = react.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"
     }
   },
@@ -10432,7 +10587,7 @@ var progressBarRecipe = react.defineSlotRecipe({
     },
     background: {
       display: "flex",
-      backgroundColor: "accent.surface.hover",
+      backgroundColor: "surface.accent.hover",
       borderRadius: "sm",
       boxPack: "start",
       justifyContent: "flex-start",
@@ -10443,7 +10598,7 @@ var progressBarRecipe = react.defineSlotRecipe({
       borderRadius: "sm"
     },
     progress: {
-      backgroundColor: "brand.surface.active",
+      backgroundColor: "surface.brand.active",
       borderRadius: "sm",
       maxWidth: "100%",
       transition: "width .2s ease-out"
@@ -10473,7 +10628,7 @@ var progressIndicatorRecipe = react.defineSlotRecipe({
       width: 1,
       fill: "icon.disabled",
       "&[aria-current='step']": {
-        fill: "brand.surface"
+        fill: "surface.brand"
       }
     }
   }
@@ -10513,17 +10668,17 @@ var radioGroupSlotRecipe = react.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: {
@@ -10544,7 +10699,7 @@ var radioGroupSlotRecipe = react.defineSlotRecipe({
         height: "full",
         width: "full",
         borderRadius: "xl",
-        backgroundColor: "brand.surface",
+        backgroundColor: "surface.brand",
         scale: "0.5"
       }
     }
@@ -10596,15 +10751,15 @@ var radioCardSlotRecipe = react.defineSlotRecipe({
     variant: {
       core: {
         item: {
-          outlineColor: "core.outline",
+          outlineColor: "outline.core",
           outlineWidth: tokens22__namespace.default.size.stroke.sm,
           outlineStyle: "solid",
           _hover: {
-            outlineColor: "core.outline.hover",
+            outlineColor: "outline.core.hover",
             outlineWidth: tokens22__namespace.default.size.stroke.md,
             outlineStyle: "solid",
             _active: {
-              backgroundColor: "core.surface.active",
+              backgroundColor: "surface.core.active",
               outlineWidth: tokens22__namespace.default.size.stroke.sm
             }
           },
@@ -10612,7 +10767,7 @@ var radioCardSlotRecipe = react.defineSlotRecipe({
             outlineColor: "outline.focus",
             outlineWidth: tokens22__namespace.default.size.stroke.md,
             outlineStyle: "solid",
-            backgroundColor: "core.surface.active",
+            backgroundColor: "surface.core.active",
             _focusVisible: {
               outlineStyle: "double",
               outlineWidth: `calc(3 * ${tokens22__namespace.default.size.stroke.md})`
@@ -10626,15 +10781,15 @@ var radioCardSlotRecipe = react.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"
             }
           },
@@ -10642,7 +10797,7 @@ var radioCardSlotRecipe = react.defineSlotRecipe({
             outlineColor: "outline.focus",
             outlineWidth: tokens22__namespace.default.size.stroke.md,
             outlineStyle: "solid",
-            backgroundColor: "core.surface.active",
+            backgroundColor: "surface.core.active",
             _focusVisible: {
               outlineStyle: "double",
               outlineWidth: `calc(3 * ${tokens22__namespace.default.size.stroke.md})`
@@ -10722,7 +10877,7 @@ var selectSlotRecipe = react.defineSlotRecipe({
       color: {
         base: "text",
         _disabled: "text.disabled",
-        _invalid: "text.secondary"
+        _invalid: "text.highlight"
       },
       _icon: {
         width: 3,
@@ -10759,14 +10914,14 @@ var selectSlotRecipe = react.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",
@@ -10774,7 +10929,7 @@ var selectSlotRecipe = react.defineSlotRecipe({
         outlineColor: "outline.focus"
       },
       _active: {
-        backgroundColor: "ghost.surface.active"
+        backgroundColor: "surface.accent.active"
       },
       _highlighted: {
         _active: {
@@ -10782,12 +10937,12 @@ var selectSlotRecipe = react.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,
@@ -10822,9 +10977,9 @@ var selectSlotRecipe = react.defineSlotRecipe({
     valueText: {},
     itemDescription: {
       fontSize: ["mobile.xs", "desktop.xs"],
-      color: "ghost.text",
+      color: "text.ghost",
       "[aria-selected='true'] &": {
-        color: "ghost.text"
+        color: "text.ghost"
       }
     }
   },
@@ -10833,13 +10988,13 @@ var selectSlotRecipe = react.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",
@@ -10851,13 +11006,13 @@ var selectSlotRecipe = react.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",
@@ -10871,7 +11026,7 @@ var selectSlotRecipe = react.defineSlotRecipe({
       rightSideSquare: {
         control: {
           outline: "1px solid",
-          outlineColor: "core.outline"
+          outlineColor: "outline.core"
         },
         trigger: {
           _focus: {
@@ -10882,7 +11037,7 @@ var selectSlotRecipe = react.defineSlotRecipe({
       leftSideSquare: {
         control: {
           outline: "1px solid",
-          outlineColor: "core.outline"
+          outlineColor: "outline.core"
         },
         trigger: {
           _focus: {
@@ -10950,7 +11105,7 @@ var stepperSlotRecipe = react.defineSlotRecipe({
       },
       accent: {
         root: {
-          backgroundColor: "accent.bg"
+          backgroundColor: "bg.accent"
         },
         stepButton: {
           color: {
@@ -10958,13 +11113,13 @@ var stepperSlotRecipe = react.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"
             }
@@ -10972,7 +11127,7 @@ var stepperSlotRecipe = react.defineSlotRecipe({
         },
         backButton: {
           _hover: {
-            backgroundColor: "brand.surface.hover"
+            backgroundColor: "surface.brand.hover"
           }
         }
       }
@@ -11006,7 +11161,7 @@ var switchSlotRecipe = react.defineSlotRecipe({
       justifyContent: "center",
       width: "var(--switch-height)",
       height: "var(--switch-height)",
-      backgroundColor: "core.icon",
+      backgroundColor: "icon.core",
       _disabled: {
         backgroundColor: "icon.disabled",
         _checked: {
@@ -11015,7 +11170,7 @@ var switchSlotRecipe = react.defineSlotRecipe({
       },
       _checked: {
         translate: "var(--switch-x) 0",
-        backgroundColor: "brand.icon"
+        backgroundColor: "icon.brand"
       }
     },
     label: {
@@ -11044,13 +11199,13 @@ var switchSlotRecipe = react.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: {
@@ -11059,7 +11214,7 @@ var switchSlotRecipe = react.defineSlotRecipe({
         outlineStyle: "double"
       },
       _checked: {
-        backgroundColor: "brand.surface",
+        backgroundColor: "surface.brand",
         outline: "none",
         _focusVisible: {
           outlineOffset: "1px",
@@ -11158,10 +11313,10 @@ var tableSlotRecipe = react.defineSlotRecipe({
           backgroundColor: "bg"
         },
         header: {
-          backgroundColor: "bg.tertiary"
+          backgroundColor: "bg.brand"
         },
         columnHeader: {
-          color: "text.secondary"
+          color: "text.highlight"
         }
       },
       grey: {
@@ -11370,26 +11525,26 @@ var tabsSlotRecipe = react.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"
             }
@@ -11402,28 +11557,28 @@ var tabsSlotRecipe = react.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"
             }
           }
@@ -11471,7 +11626,7 @@ var tabsSlotRecipe = react.defineSlotRecipe({
           paddingX: 3,
           _focus: {
             border: "md",
-            borderColor: "accent.surface"
+            borderColor: "surface.accent"
           }
         }
       }
@@ -11502,13 +11657,13 @@ var toastSlotRecipe = react.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: {
@@ -11555,6 +11710,7 @@ var slotRecipes = {
   checkboxCard: choiceChipSlotRecipe,
   collapsible: collapsibleSlotRecipe,
   tooltip: popoverSlotRecipe,
+  tag: inputChipSlotRecipe,
   menu: menuSlotRecipe
 };
 var animations = react.defineTokens.animations({
@@ -12734,6 +12890,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;