@vygruppen/spor-react 13.0.3 → 13.1.1

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.success",
+        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"
         }
       }
     },
@@ -780,10 +794,19 @@ var badgeRecipie = react.defineRecipe({
       colorPalette: "blue",
       inverted: true,
       css: {
-        backgroundColor: "badge.blue.surface.inverted",
-        color: "badge.blue.text.inverted",
+        backgroundColor: {
+          _light: "darkBlue",
+          _dark: "lightBlue"
+        },
+        color: {
+          _light: "icyBlue",
+          _dark: "royal"
+        },
         "& svg": {
-          color: "badge.blue.icon.inverted"
+          color: {
+            _light: "royal",
+            _dark: "icyBlue"
+          }
         }
       }
     },
@@ -791,10 +814,19 @@ var badgeRecipie = react.defineRecipe({
       colorPalette: "green",
       inverted: true,
       css: {
-        backgroundColor: "badge.green.surface.inverted",
-        color: "badge.green.text.inverted",
+        backgroundColor: {
+          _light: "darkTeal",
+          _dark: "seaMist"
+        },
+        color: {
+          _light: "mint",
+          _dark: "jungle"
+        },
         "& svg": {
-          color: "badge.green.icon.inverted"
+          color: {
+            _light: "mint",
+            _dark: "jungle"
+          }
         }
       }
     },
@@ -802,10 +834,19 @@ var badgeRecipie = react.defineRecipe({
       colorPalette: "grey",
       inverted: true,
       css: {
-        backgroundColor: "badge.grey.surface.inverted",
-        color: "badge.grey.text.inverted",
+        backgroundColor: {
+          _light: "carbon",
+          _dark: "platinum"
+        },
+        color: {
+          _light: "white",
+          _dark: "darkGrey"
+        },
         "& svg": {
-          color: "badge.grey.icon.inverted"
+          color: {
+            _light: "white",
+            _dark: "darkGrey"
+          }
         }
       }
     },
@@ -814,10 +855,19 @@ var badgeRecipie = react.defineRecipe({
       colorPalette: "cream",
       inverted: true,
       css: {
-        backgroundColor: "badge.cream.surface.inverted",
-        color: "badge.cream.text.inverted",
+        backgroundColor: {
+          _light: "coffee",
+          _dark: "blonde"
+        },
+        color: {
+          _light: "cornsilk",
+          _dark: "coffee"
+        },
         "& svg": {
-          color: "badge.cream.icon.inverted"
+          color: {
+            _light: "cornsilk",
+            _dark: "coffee"
+          }
         }
       }
     },
@@ -825,10 +875,19 @@ var badgeRecipie = react.defineRecipe({
       colorPalette: "yellow",
       inverted: true,
       css: {
-        backgroundColor: "badge.yellow.surface.inverted",
-        color: "badge.yellow.text.inverted",
+        backgroundColor: {
+          _light: "bronze",
+          _dark: "banana"
+        },
+        color: {
+          _light: "cornsilk",
+          _dark: "coffee"
+        },
         "& svg": {
-          color: "badge.yellow.icon.inverted"
+          color: {
+            _light: "cornsilk",
+            _dark: "coffee"
+          }
         }
       }
     },
@@ -836,10 +895,19 @@ var badgeRecipie = react.defineRecipe({
       colorPalette: "orange",
       inverted: true,
       css: {
-        backgroundColor: "badge.orange.surface.inverted",
-        color: "badge.orange.text.inverted",
+        backgroundColor: {
+          _light: "wood",
+          _dark: "champagne"
+        },
+        color: {
+          _light: "bisque",
+          _dark: "wood"
+        },
         "& svg": {
-          color: "badge.orange.icon.inverted"
+          color: {
+            _light: "bisque",
+            _dark: "wood"
+          }
         }
       }
     },
@@ -847,10 +915,19 @@ var badgeRecipie = react.defineRecipe({
       colorPalette: "red",
       inverted: true,
       css: {
-        backgroundColor: "badge.red.surface.inverted",
-        color: "badge.red.text.inverted",
+        backgroundColor: {
+          _light: "burgundy",
+          _dark: "lightRed"
+        },
+        color: {
+          _light: "pink",
+          _dark: "maroon"
+        },
         "& svg": {
-          color: "badge.red.icon.inverted"
+          color: {
+            _light: "pink",
+            _dark: "maroon"
+          }
         }
       }
     },
@@ -859,10 +936,19 @@ var badgeRecipie = react.defineRecipe({
       colorPalette: "neutral",
       inverted: true,
       css: {
-        backgroundColor: "badge.surface.inverted",
-        color: "badge.text.inverted",
+        backgroundColor: {
+          _light: "ink",
+          _dark: "white"
+        },
+        color: {
+          _light: "white",
+          _dark: "darkGrey"
+        },
         "& svg": {
-          color: "badge.icon.inverted"
+          color: {
+            _light: "white",
+            _dark: "darkGrey"
+          }
         }
       }
     }
@@ -1108,10 +1194,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 +1385,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 +1414,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 +1779,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 +2193,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 +2430,7 @@ var CalendarNavigator = ({
         fontWeight: "bold",
         flex: "1",
         textAlign: "center",
-        color: "core.text",
+        color: "text.core",
         children: capitalize(title)
       }
     ),
@@ -3142,7 +3229,7 @@ var CloseDrawerLine = ({
       top: 0,
       marginY: 2,
       marginX: "auto",
-      backgroundColor: "floating.outline.active",
+      backgroundColor: "outline.neutral",
       borderRadius: "xs",
       ...props,
       ref
@@ -3613,7 +3700,7 @@ var CardSelectContent = ({
       p: "2",
       bg: "bg",
       border: "sm",
-      borderColor: "floating.outline",
+      borderColor: "outline.floating",
       borderRadius: "sm",
       ...props,
       children
@@ -3621,9 +3708,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 +3795,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 +3817,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 +3952,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(
@@ -4111,6 +4196,7 @@ var MenuTrigger = ({
   size,
   children,
   ref,
+  withChevron = true,
   ...props
 }) => {
   const { variant } = useMenuContext();
@@ -4130,7 +4216,7 @@ var MenuTrigger = ({
       variant: getButtonVariant(),
       size,
       ...props,
-      rightIcon: /* @__PURE__ */ jsxRuntime.jsx(
+      rightIcon: withChevron && /* @__PURE__ */ jsxRuntime.jsx(
         ChevronIcon,
         {
           transform: open ? "rotate(180deg)" : void 0,
@@ -5183,7 +5269,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),
@@ -6623,8 +6709,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(
@@ -6928,40 +7014,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: {
@@ -6969,28 +7055,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"
           }
         }
       }
@@ -7045,12 +7131,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"
       }
     }
   },
@@ -7125,7 +7211,7 @@ var inputRecipe = react.defineRecipe({
       },
       _hover: {
         outline: "2px solid",
-        outlineColor: "core.outline"
+        outlineColor: "outline.core"
       }
     }
   },
@@ -7134,14 +7220,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: {
@@ -7151,17 +7237,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",
@@ -7204,7 +7290,7 @@ var linkRecipe = react.defineRecipe({
   variants: {
     variant: {
       primary: {
-        color: "core.text",
+        color: "text.core",
         _hover: {
           color: "text",
           _active: {
@@ -7267,29 +7353,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
           }
         }
@@ -7297,12 +7383,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"
           }
         }
@@ -7421,7 +7507,7 @@ var skeletonRecipe = react.defineRecipe({
       },
       none: {
         animation: "none",
-        background: "surface.color.grey"
+        background: "surface.neutral"
       }
     }
   }
@@ -7433,29 +7519,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"
       }
     }
   },
@@ -7513,7 +7599,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 },
@@ -7851,7 +7937,7 @@ var accordionSlotRecipe = react.defineSlotRecipe({
       borderRadius: "sm",
       display: "flex",
       justifyContent: "space-between",
-      color: "core.text",
+      color: "text.core",
       textAlign: "left",
       width: "full",
       alignItems: "center",
@@ -7907,10 +7993,10 @@ var accordionSlotRecipe = react.defineSlotRecipe({
         },
         itemTrigger: {
           "&:hover": {
-            background: "ghost.surface.hover"
+            background: "surface.ghost.hover"
           },
           "&:active": {
-            backgroundColor: "ghost.surface.active"
+            backgroundColor: "surface.ghost.active"
           }
         }
       },
@@ -7918,7 +8004,7 @@ var accordionSlotRecipe = react.defineSlotRecipe({
         item: {
           outline: "solid",
           outlineWidth: tokens22__namespace.default.size.stroke.sm,
-          outlineColor: "core.outline"
+          outlineColor: "outline.core"
         },
         itemTrigger: {
           _expanded: {
@@ -7926,12 +8012,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"
           }
@@ -7944,7 +8030,7 @@ var accordionSlotRecipe = react.defineSlotRecipe({
         item: {
           borderRadius: "none",
           borderBottom: "1px solid",
-          borderBottomColor: "floating.outline.active"
+          borderBottomColor: "outline.neutral"
         }
       },
       floating: {
@@ -7952,7 +8038,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: {
@@ -7961,11 +8047,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"
           }
@@ -7976,21 +8062,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`
       }
     }
   }
@@ -8025,13 +8111,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")
     }
   },
@@ -8061,117 +8147,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"
         }
       }
     }
@@ -8187,10 +8273,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: {
@@ -8202,15 +8288,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: {
@@ -8220,7 +8306,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"],
@@ -8230,14 +8316,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
@@ -8320,7 +8406,7 @@ var comboboxSlotRecipe = react.defineSlotRecipe({
       borderRadius: "sm",
       flex: "1",
       _highlighted: {
-        bg: "ghost.surface.active"
+        bg: "surface.ghost.active"
       },
       _disabled: {
         pointerEvents: "none",
@@ -8328,13 +8414,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: {
@@ -8353,7 +8439,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"
@@ -8389,11 +8475,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"
             }
           }
@@ -8402,9 +8488,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"
             }
           }
         }
@@ -8426,10 +8512,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"
         }
       }
     },
@@ -8451,19 +8537,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",
@@ -8471,8 +8552,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"
@@ -8482,7 +8564,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
       }
     },
@@ -8506,16 +8588,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"
           }
         }
       },
@@ -8612,47 +8694,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"
             }
           }
         }
@@ -8730,7 +8812,7 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
     },
     dateTimeSegment: {
       _focus: {
-        backgroundColor: "ghost.surface.active",
+        backgroundColor: "surface.ghost.active",
         color: "text"
       }
     },
@@ -8746,10 +8828,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",
@@ -8760,11 +8842,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: {
@@ -8772,11 +8854,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: {
@@ -8790,12 +8872,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",
@@ -8804,10 +8886,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",
@@ -8815,16 +8897,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",
@@ -8839,14 +8921,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",
@@ -8864,17 +8946,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",
@@ -8894,11 +8976,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",
@@ -9358,13 +9440,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,
@@ -9382,7 +9464,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"
       }
@@ -9443,12 +9525,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"
             }
           }
         }
@@ -9457,29 +9539,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"
             }
           }
         }
@@ -9799,42 +9881,42 @@ var inputChipSlotRecipe = react.defineSlotRecipe({
           borderColor: "outline",
           "&:hover": {
             outline: "2px solid",
-            outlineColor: "core.outline.hover"
+            outlineColor: "outline.core.hover"
           },
           "&:active": {
             outline: "none",
-            backgroundColor: "core.surface.active"
+            backgroundColor: "surface.core.active"
           }
         }
       },
       accent: {
         root: {
-          backgroundColor: "accent.surface",
+          backgroundColor: "surface.accent",
           color: "text.highlight",
           "& svg": {
             color: "icon.highlight"
           },
           "&:hover": {
-            backgroundColor: "accent.surface.hover"
+            backgroundColor: "surface.accent.hover"
           },
           "&:active": {
-            backgroundColor: "accent.surface.active",
+            backgroundColor: "surface.accent.active",
             outline: "none"
           }
         }
       },
       brand: {
         root: {
-          backgroundColor: "brand.surface",
-          color: "text.inverted",
+          backgroundColor: "surface.brand",
+          color: "text.brand",
           "& svg": {
-            color: "icon.inverted"
+            color: "icon.brand"
           },
           "&:hover": {
-            backgroundColor: "brand.surface.hover"
+            backgroundColor: "surface.brand.hover"
           },
           "&:active": {
-            backgroundColor: "brand.surface.active",
+            backgroundColor: "surface.brand.active",
             outline: "none"
           }
         }
@@ -10061,18 +10143,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",
@@ -10082,9 +10164,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"
       }
     }
   },
@@ -10093,13 +10175,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"
         }
       }
     }
@@ -10124,7 +10206,7 @@ var mediaControllerSlotRecipe = react.defineSlotRecipe({
       display: "flex",
       padding: 1,
       alignSelf: "center",
-      color: "brand.surface",
+      color: "surface.brand",
       outlineOffset: "2px"
     },
     icon: {
@@ -10137,14 +10219,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: {
@@ -10157,9 +10239,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: {
@@ -10269,16 +10351,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: {
@@ -10315,19 +10397,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"
         }
       }
@@ -10415,7 +10497,7 @@ var numericStepperRecipe = react.defineSlotRecipe({
       textAlign: "center",
       transitionProperty: "common",
       transitionDuration: "fast",
-      color: "core.text",
+      color: "text.core",
       backgroundColor: "transparent",
       _focus: {
         backgroundColor: "surface",
@@ -10423,7 +10505,7 @@ var numericStepperRecipe = react.defineSlotRecipe({
         outlineColor: "outline.focus"
       },
       _active: {
-        backgroundColor: "accent.surface.active"
+        backgroundColor: "surface.accent.active"
       },
       _disabled: {
         pointerEvents: "none",
@@ -10431,7 +10513,7 @@ var numericStepperRecipe = react.defineSlotRecipe({
       },
       _hover: {
         outline: "1px solid",
-        outlineColor: "core.outline"
+        outlineColor: "outline.core"
       }
     },
     text: {
@@ -10441,7 +10523,7 @@ var numericStepperRecipe = react.defineSlotRecipe({
       paddingX: 1,
       textAlign: "center",
       width: "4ch",
-      color: "core.text"
+      color: "text.core"
     },
     button: {
       outlineOffset: "-2px",
@@ -10475,18 +10557,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: {
@@ -10506,11 +10588,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",
@@ -10527,14 +10609,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"
     }
   },
@@ -10578,7 +10660,7 @@ var progressBarRecipe = react.defineSlotRecipe({
     },
     background: {
       display: "flex",
-      backgroundColor: "accent.surface.hover",
+      backgroundColor: "surface.accent.hover",
       borderRadius: "sm",
       boxPack: "start",
       justifyContent: "flex-start",
@@ -10589,7 +10671,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"
@@ -10619,7 +10701,7 @@ var progressIndicatorRecipe = react.defineSlotRecipe({
       width: 1,
       fill: "icon.disabled",
       "&[aria-current='step']": {
-        fill: "brand.surface"
+        fill: "surface.brand"
       }
     }
   }
@@ -10659,17 +10741,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: {
@@ -10690,7 +10772,7 @@ var radioGroupSlotRecipe = react.defineSlotRecipe({
         height: "full",
         width: "full",
         borderRadius: "xl",
-        backgroundColor: "brand.surface",
+        backgroundColor: "surface.brand",
         scale: "0.5"
       }
     }
@@ -10742,15 +10824,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
             }
           },
@@ -10758,7 +10840,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})`
@@ -10772,15 +10854,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"
             }
           },
@@ -10788,7 +10870,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})`
@@ -10868,7 +10950,7 @@ var selectSlotRecipe = react.defineSlotRecipe({
       color: {
         base: "text",
         _disabled: "text.disabled",
-        _invalid: "text.secondary"
+        _invalid: "text.highlight"
       },
       _icon: {
         width: 3,
@@ -10905,14 +10987,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: "accent.surface.hover"
+        backgroundColor: "surface.accent.hover"
       },
       "&[data-highlighted]": {
         outlineOffset: "2px",
@@ -10920,7 +11002,7 @@ var selectSlotRecipe = react.defineSlotRecipe({
         outlineColor: "outline.focus"
       },
       _active: {
-        backgroundColor: "accent.surface.active"
+        backgroundColor: "surface.accent.active"
       },
       _highlighted: {
         _active: {
@@ -10928,12 +11010,12 @@ var selectSlotRecipe = react.defineSlotRecipe({
         }
       },
       _hover: {
-        backgroundColor: "accent.surface.hover",
+        backgroundColor: "surface.accent.hover",
         outline: "2px solid core.outline",
         outlineOffset: "2px"
       },
       _selected: {
-        backgroundColor: "accent.surface"
+        backgroundColor: "surface.accent"
       },
       _icon: {
         width: 3,
@@ -10968,9 +11050,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"
       }
     }
   },
@@ -10979,13 +11061,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",
@@ -10997,13 +11079,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",
@@ -11017,7 +11099,7 @@ var selectSlotRecipe = react.defineSlotRecipe({
       rightSideSquare: {
         control: {
           outline: "1px solid",
-          outlineColor: "core.outline"
+          outlineColor: "outline.core"
         },
         trigger: {
           _focus: {
@@ -11028,7 +11110,7 @@ var selectSlotRecipe = react.defineSlotRecipe({
       leftSideSquare: {
         control: {
           outline: "1px solid",
-          outlineColor: "core.outline"
+          outlineColor: "outline.core"
         },
         trigger: {
           _focus: {
@@ -11096,7 +11178,7 @@ var stepperSlotRecipe = react.defineSlotRecipe({
       },
       accent: {
         root: {
-          backgroundColor: "accent.bg"
+          backgroundColor: "bg.accent"
         },
         stepButton: {
           color: {
@@ -11104,13 +11186,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"
             }
@@ -11118,7 +11200,7 @@ var stepperSlotRecipe = react.defineSlotRecipe({
         },
         backButton: {
           _hover: {
-            backgroundColor: "brand.surface.hover"
+            backgroundColor: "surface.brand.hover"
           }
         }
       }
@@ -11152,7 +11234,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: {
@@ -11161,7 +11243,7 @@ var switchSlotRecipe = react.defineSlotRecipe({
       },
       _checked: {
         translate: "var(--switch-x) 0",
-        backgroundColor: "brand.icon"
+        backgroundColor: "icon.brand"
       }
     },
     label: {
@@ -11190,13 +11272,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: {
@@ -11205,7 +11287,7 @@ var switchSlotRecipe = react.defineSlotRecipe({
         outlineStyle: "double"
       },
       _checked: {
-        backgroundColor: "brand.surface",
+        backgroundColor: "surface.brand",
         outline: "none",
         _focusVisible: {
           outlineOffset: "1px",
@@ -11304,10 +11386,10 @@ var tableSlotRecipe = react.defineSlotRecipe({
           backgroundColor: "bg"
         },
         header: {
-          backgroundColor: "bg.tertiary"
+          backgroundColor: "bg.brand"
         },
         columnHeader: {
-          color: "text.secondary"
+          color: "text.highlight"
         }
       },
       grey: {
@@ -11516,26 +11598,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"
             }
@@ -11548,28 +11630,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"
             }
           }
@@ -11617,7 +11699,7 @@ var tabsSlotRecipe = react.defineSlotRecipe({
           paddingX: 3,
           _focus: {
             border: "md",
-            borderColor: "accent.surface"
+            borderColor: "surface.accent"
           }
         }
       }
@@ -11648,13 +11730,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: {