@vygruppen/spor-react 12.10.0 → 12.10.2

package/dist/index.mjs

@@ -228,7 +228,8 @@ var DarkFullScreenLoader = ({
     Center,
     {
       height: "100%",
-      background: "darkTeal",
+      background: "bg",
+      className: "dark",
       role: "status",
       "aria-live": "polite",
       ...props,
@@ -268,40 +269,20 @@ var LightFullScreenLoader = ({
   maxWidth,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(
-    Center,
-    {
-      height: "100%",
-      background: "white",
-      role: "status",
-      "aria-live": "polite",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: fullScreenLoaderBlackData }) }) }),
-        /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Center, { height: "100%", role: "status", "aria-live": "polite", ...props, children: [
+    /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: fullScreenLoaderBlackData }) }) }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
+  ] });
 };
 var LightInlineLoader = ({
   width,
   maxWidth,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(
-    Center,
-    {
-      height: "100%",
-      background: "white",
-      role: "status",
-      "aria-live": "polite",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: inlineLoaderLightData }) }) }),
-        /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Center, { height: "100%", role: "status", "aria-live": "polite", ...props, children: [
+    /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: inlineLoaderLightData }) }) }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
+  ] });
 };
 var LightSpinner = ({
   children,
@@ -679,7 +660,7 @@ var badgeRecipie = defineRecipe({
         backgroundColor: "surface.color.orange",
         color: "alert.error.text.secondary",
         "& svg": {
-          color: "alert.error.icon.secondary"
+          color: "alert.error-secondary.icon"
         }
       },
       red: {
@@ -1226,11 +1207,11 @@ var ServiceAlert = forwardRef(
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx(Accordion$1.ItemContent, { asChild: true, children: /* @__PURE__ */ jsx(Stack, { flexDirection: "row", justifyContent: "center", width: "100%", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Accordion$1.ItemContent, { asChild: true, children: /* @__PURE__ */ jsx(Stack, { flexDirection: "row", width: "100%", children: /* @__PURE__ */ jsx(
             Accordion$1.ItemBody,
             {
               as: Stack,
-              maxWidth: contentWidth,
+              width: contentWidth,
               css: styles.itemBody,
               children
             }
@@ -1825,7 +1806,11 @@ var DateField = forwardRef(
           css: styles.inputLabel,
           position: "absolute",
           paddingTop: "2px",
-          children: /* @__PURE__ */ jsx("label", { ...props.labelProps, children: props.label })
+          children: /* @__PURE__ */ jsxs(Label, { padding: "0", fontSize: "2xs", ...props.labelProps, children: [
+            props.label,
+            " ",
+            /* @__PURE__ */ jsx(Field.RequiredIndicator, {})
+          ] })
         }
       ),
       /* @__PURE__ */ jsx(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(
@@ -2168,14 +2153,7 @@ var TimeField = ({ state, ...props }) => {
         children: props.label
       }
     ),
-    /* @__PURE__ */ jsx(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment) => /* @__PURE__ */ jsx(
-      DateTimeSegment,
-      {
-        segment,
-        state
-      },
-      JSON.stringify(segment)
-    )) }),
+    /* @__PURE__ */ jsx(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, index) => /* @__PURE__ */ jsx(DateTimeSegment, { segment, state }, index)) }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -2385,7 +2363,7 @@ var CloseDrawerLine = forwardRef((props, ref) => {
       top: 0,
       marginY: 2,
       marginX: "auto",
-      backgroundColor: "silver",
+      backgroundColor: "floating.outline.active",
       borderRadius: "xs",
       ...props,
       ref
@@ -2862,6 +2840,7 @@ var ListBox = (props) => {
       css: styles.root,
       "aria-busy": loading,
       maxWidth,
+      padding: "1",
       children: [
         state.collection.size === 0 && props.emptyContent,
         [...state.collection].map(
@@ -2919,7 +2898,18 @@ function Option({ item, state }) {
       { passive: false, once: true }
     );
   }, []);
-  return /* @__PURE__ */ jsx(OptionContext.Provider, { value: { labelProps, descriptionProps }, children: /* @__PURE__ */ jsx(ListItem, { ...optionProps, ...dataFields, ref, css: styles.item, children: item.rendered }) });
+  return /* @__PURE__ */ jsx(OptionContext.Provider, { value: { labelProps, descriptionProps }, children: /* @__PURE__ */ jsx(
+    ListItem,
+    {
+      ...optionProps,
+      ...dataFields,
+      ref,
+      css: styles.item,
+      padding: "1",
+      marginX: "0",
+      children: item.rendered
+    }
+  ) });
 }
 var OptionContext = React27__default.createContext({
   labelProps: {},
@@ -2936,25 +2926,34 @@ function ListBoxSection({ section, state }) {
   });
   const isFirstSection = section.key === state.collection.getFirstKey();
   const titleColor = useColorModeValue("darkGrey", "white");
-  return /* @__PURE__ */ jsx(List, { children: /* @__PURE__ */ jsxs(ListItem, { ...itemProps, listStyleType: "none", children: [
-    section.rendered && /* @__PURE__ */ jsx(
-      Box,
-      {
-        fontSize: "mobile.xs",
-        color: titleColor,
-        paddingX: 3,
-        paddingTop: 1,
-        marginTop: isFirstSection ? 0 : 2,
-        textTransform: "uppercase",
-        fontWeight: "bold",
-        ...headingProps,
-        children: section.rendered
-      }
-    ),
-    /* @__PURE__ */ jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: [...((_b4 = (_a5 = state.collection).getChildren) == null ? void 0 : _b4.call(_a5, section.key)) ?? []].map(
-      (item) => /* @__PURE__ */ jsx(Option, { item, state }, item.key)
-    ) })
-  ] }) });
+  return /* @__PURE__ */ jsx(List, { children: /* @__PURE__ */ jsxs(
+    ListItem,
+    {
+      ...itemProps,
+      listStyleType: "none",
+      marginLeft: "0",
+      paddingX: "1",
+      children: [
+        section.rendered && /* @__PURE__ */ jsx(
+          Box,
+          {
+            fontSize: "mobile.xs",
+            color: titleColor,
+            paddingTop: 1,
+            marginTop: isFirstSection ? 0 : 2,
+            marginLeft: "1",
+            textTransform: "uppercase",
+            fontWeight: "bold",
+            ...headingProps,
+            children: section.rendered
+          }
+        ),
+        /* @__PURE__ */ jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: [...((_b4 = (_a5 = state.collection).getChildren) == null ? void 0 : _b4.call(_a5, section.key)) ?? []].map(
+          (item) => /* @__PURE__ */ jsx(Option, { item, state }, item.key)
+        ) })
+      ]
+    }
+  ) });
 }
 var NativeSelect = React27.forwardRef(function NativeSelect2(props, ref) {
   const {
@@ -3346,54 +3345,43 @@ var PhoneNumberInput = forwardRef((props, ref) => {
       nationalNumber: value.nationalNumber
     });
   };
-  return /* @__PURE__ */ jsx(
-    AttachedInputs,
-    {
-      border: invalid ? "1px solid" : "none",
-      borderColor: invalid ? "outline.error" : "none",
-      outline: invalid ? "1px solid" : "none",
-      outlineColor: invalid ? "outline.error" : "none",
-      borderRadius: invalid ? "sm" : "none",
-      display: "grid",
-      gridTemplateColumns: "1fr 10fr",
-      children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          CountryCodeSelect,
-          {
-            value: [value.countryCode],
-            onValueChange: handleCountryCodeChange,
-            height: "100%",
-            width: "6.25rem",
-            variant,
-            allowedCountryCodes,
-            "data-state": "on"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            ref,
-            type: "tel",
-            ...props,
-            value: value.nationalNumber,
-            invalid,
-            errorText,
-            onChange: (e) => {
-              const target = e.target;
-              const strippedValue = target.value.replaceAll(/[^\d\s-]/g, "");
-              onChange({
-                countryCode: value.countryCode,
-                nationalNumber: strippedValue
-              });
-            },
-            variant,
-            "data-state": "on",
-            label
-          }
-        )
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsxs(AttachedInputs, { display: "grid", gridTemplateColumns: "1fr 10fr", children: [
+    /* @__PURE__ */ jsx(
+      CountryCodeSelect,
+      {
+        value: [value.countryCode],
+        onValueChange: handleCountryCodeChange,
+        height: "100%",
+        width: "6.25rem",
+        variant,
+        allowedCountryCodes,
+        "data-state": "on",
+        invalid
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: "tel",
+        ...props,
+        value: value.nationalNumber,
+        invalid,
+        errorText,
+        onChange: (e) => {
+          const target = e.target;
+          const strippedValue = target.value.replaceAll(/[^\d\s-]/g, "");
+          onChange({
+            countryCode: value.countryCode,
+            nationalNumber: strippedValue
+          });
+        },
+        variant,
+        "data-state": "on",
+        label
+      }
+    )
+  ] });
 });
 PhoneNumberInput.displayName = "PhoneNumberInput";
 var texts16 = createTexts({
@@ -3631,9 +3619,9 @@ var Switch = forwardRef(
             checked: props.checked,
             css: styles.root,
             children: [
-              /* @__PURE__ */ jsx(Switch$1.Label, { children: label }),
               /* @__PURE__ */ jsx(Switch$1.HiddenInput, { ref }),
-              /* @__PURE__ */ jsx(Switch$1.Control, { css: styles.control, children: /* @__PURE__ */ jsx(Switch$1.Thumb, {}) })
+              /* @__PURE__ */ jsx(Switch$1.Control, { css: styles.control, children: /* @__PURE__ */ jsx(Switch$1.Thumb, {}) }),
+              /* @__PURE__ */ jsx(Switch$1.Label, { children: label })
             ]
           }
         )
@@ -3765,6 +3753,28 @@ var StaticCard = forwardRef(
   }
 );
 StaticCard.displayName = "StaticCard";
+
+// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e)
+    n += e;
+  else if ("object" == typeof e)
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0; t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
 var icons = {
   "local-train": {
     sm: TrainFill18Icon,
@@ -3831,9 +3841,9 @@ var LineIcon = forwardRef(
       return variant === "walk" && target === "travelTag" ? 0 : 0.5;
     };
     const Icon3 = getCorrectIcon({
-      variant: variant === "custom" && "customIconVariant" in rest ? rest.customIconVariant : (
-        // eslint-disable-next-line unicorn/no-nested-ternary
-        variant === "custom" ? "local-train" : variant
+      variant: (
+        // eslint-disable-next-line no-nested-ternary
+        variant === "custom" && "customIconVariant" in rest ? rest.customIconVariant : variant === "custom" ? "local-train" : variant
       ),
       size
     });
@@ -3852,6 +3862,7 @@ var LineIcon = forwardRef(
         borderColor: variant === "walk" ? "core.outline" : "transparent",
         "aria-label": label,
         ref,
+        className: clsx_default("light", rest.className),
         children: /* @__PURE__ */ jsx(Icon3, { css: styles.icon })
       }
     );
@@ -3912,8 +3923,8 @@ var TravelTag = forwardRef(
         css: styles.container,
         "aria-disabled": disabled,
         ref,
+        className: clsx_default("light", rest.className),
         ...rest,
-        backgroundColor: disabled ? "surface.disabled" : backgroundColor,
         children: [
           /* @__PURE__ */ jsx(
             LineIcon,
@@ -5065,7 +5076,7 @@ var createToast = ({
   text,
   variant,
   id,
-  duration = 6e3
+  duration = 6e5
 }) => toaster.create({
   description: text,
   type: variant,
@@ -5495,12 +5506,12 @@ var closeButtonRecipe = defineRecipe({
     transitionDuration: "normal",
     borderRadius: "md",
     backgroundColor: "transparent",
-    color: "darkGrey",
+    color: "text",
     fontWeight: "normal",
     _hover: {
       background: "ghost.surface.hover",
       _disabled: {
-        color: "dimGrey"
+        color: "icon.disabled"
       },
       _active: {
         background: "ghost.surface.active"
@@ -5658,17 +5669,17 @@ var linkRecipe = defineRecipe({
       primary: {
         color: "core.text",
         _hover: {
-          color: "text.default",
+          color: "text",
           _active: {
             color: "text.disabled"
           }
         }
       },
       secondary: {
-        color: "text.hightlight",
+        color: "text.highlight",
         padding: "2px",
         _hover: {
-          color: "text.hightlight",
+          color: "text.highlight",
           _active: {
             color: "text.disabled"
           }
@@ -5752,7 +5763,6 @@ var pressableCardRecipe = defineRecipe({
         outlineColor: "core.outline",
         outlineWidth: tokens23__default.size.stroke.sm,
         outlineStyle: "solid",
-        backgroundColor: "core.surface",
         _hover: {
           outlineColor: "core.outline.hover",
           outlineWidth: tokens23__default.size.stroke.md,
@@ -5910,7 +5920,7 @@ var skeletonRecipe = defineRecipe({
       },
       none: {
         animation: "none",
-        background: "steel"
+        background: "surface.color.grey"
       }
     }
   }
@@ -6663,7 +6673,7 @@ var alertServiceSlotRecipe = defineSlotRecipe({
         backgroundColor: "alert.service.surface.active"
       },
       _icon: {
-        color: "darkGrey"
+        color: "text"
       }
     },
     itemTriggerTitle: {
@@ -6675,13 +6685,13 @@ var alertServiceSlotRecipe = defineSlotRecipe({
       textWrap: "nowrap"
     },
     itemBody: {
-      paddingInline: 2,
+      marginX: "auto",
+      padding: "0 !important",
       paddingBottom: ["0.5", null, null, "1"],
       color: "text.inverted",
       "& > p": {
         gap: 2,
         width: "full",
-        justifyContent: "center",
         borderBottom: "1px dashed",
         borderColor: "outline.inverted",
         paddingBottom: "3",
@@ -6769,7 +6779,6 @@ var checkboxSlotRecipe = defineSlotRecipe({
     indicator: {
       width: "100%",
       height: "100%",
-      borderColor: "white",
       marginTop: -1,
       transform: "scale(1)",
       opacity: 0,
@@ -6800,8 +6809,8 @@ var checkboxSlotRecipe = defineSlotRecipe({
           borderColor: "currentColor"
         },
         _invalid: {
-          backgroundColor: "brightRed",
-          borderColor: "brightRed"
+          backgroundColor: "outline.error",
+          borderColor: "outline.error"
         }
       },
       _disabled: {
@@ -6841,7 +6850,7 @@ var choiceChipSlotRecipe = defineSlotRecipe({
       paddingInlineStart: "2",
       paddingInlineEnd: "2",
       outline: "1px solid",
-      outlineColor: "base.outline",
+      outlineColor: "core.outline",
       _checked: {
         backgroundColor: "brand.surface",
         borderRadius: "sm",
@@ -6866,19 +6875,19 @@ var choiceChipSlotRecipe = defineSlotRecipe({
         color: "text.disabled",
         outline: "none",
         _hover: {
-          backgroundColor: "core.surface.disabled",
+          backgroundColor: "surface.disabled",
           boxShadow: "none",
-          color: "core.text.disabled"
+          color: "text.disabled"
         },
         _checked: {
           cursor: "not-allowed",
           boxShadow: "none",
-          color: "core.text.disabled",
-          backgroundColor: "core.surface.disabled",
+          color: "text.disabled",
+          backgroundColor: "surface.disabled",
           _hover: {
-            backgroundColor: "core.surface.disabled",
+            backgroundColor: "surface.disabled",
             boxShadow: "none",
-            color: "core.text.disabled"
+            color: "text.disabled"
           }
         }
       }
@@ -7042,7 +7051,7 @@ var datePickerSlotRecipe = defineSlotRecipe({
     dateTimeSegment: {
       _focus: {
         backgroundColor: "ghost.surface.active",
-        color: "text.default"
+        color: "text"
       }
     },
     box: {
@@ -7150,7 +7159,6 @@ var datePickerSlotRecipe = defineSlotRecipe({
         wrapper: {
           outline: "1px solid",
           outlineColor: "core.outline",
-          backgroundColor: "core.surface",
           _hover: {
             outline: "2px solid",
             outlineColor: "core.outline.hover",
@@ -7218,6 +7226,7 @@ var dialogSlotRecipe = defineSlotRecipe({
   className: "spor-dialog",
   base: {
     backdrop: {
+      // eslint-disable-next-line spor/use-semantic-tokens
       background: "blackAlpha.500",
       position: "fixed",
       left: 0,
@@ -7438,6 +7447,7 @@ var drawerSlotRecipe = defineSlotRecipe({
   className: "spor-drawer",
   base: {
     backdrop: {
+      // eslint-disable-next-line spor/use-semantic-tokens
       bg: "blackAlpha.500",
       position: "fixed",
       insetInlineStart: 0,
@@ -7643,6 +7653,7 @@ var fieldSlotRecipe = defineSlotRecipe({
     },
     requiredIndicator: {
       marginStart: 1,
+      // eslint-disable-next-line spor/use-semantic-tokens
       color: "brightRed"
     },
     label: {
@@ -7656,8 +7667,8 @@ var fieldSlotRecipe = defineSlotRecipe({
     },
     errorText: {
       borderRadius: "xs",
-      backgroundColor: "lightRed",
-      color: "darkGrey",
+      backgroundColor: "alert.error.surface",
+      color: "text",
       paddingX: 1.5,
       paddingY: 1,
       textStyle: "xs",
@@ -7674,7 +7685,7 @@ var fieldSlotRecipe = defineSlotRecipe({
         left: "1em",
         width: "0.5rem",
         height: "0.5rem",
-        backgroundColor: "lightRed",
+        backgroundColor: "alert.error.surface",
         transform: "translateY(-50%) rotate(45deg)",
         pointerEvents: "none"
       }
@@ -7754,7 +7765,7 @@ var floatingActionButtonSlotRecipe = defineSlotRecipe({
           _hover: {
             backgroundColor: "transparent",
             outline: "2px solid",
-            outlineColor: "core.outline.light",
+            outlineColor: "core.outline",
             _active: {
               outline: "1px solid",
               outlineColor: "core.outline",
@@ -7817,6 +7828,9 @@ var travelTagSlotRecipe = defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       padding: 0.5,
+      _disabled: {
+        background: "surface.disabled"
+      },
       width: "fit-content",
       transitionDuration: "fast",
       transitionProperty: "common",
@@ -7832,13 +7846,13 @@ var travelTagSlotRecipe = defineSlotRecipe({
       }
     },
     textContainer: {
-      color: "darkGrey",
+      color: "text",
       paddingRight: 0.5,
       whiteSpace: "nowrap"
     },
     title: {
       fontWeight: "bold",
-      color: "brand.text.inverted",
+      color: "text",
       "[aria-disabled=true] &": {
         color: "text.disabled"
       }
@@ -7862,24 +7876,21 @@ var travelTagSlotRecipe = defineSlotRecipe({
       critical: {
         container: {
           border: "1px solid",
-          borderColor: "error.text"
+          borderColor: "outline.error"
         },
         deviationIcon: {
-          color: "brightRed"
+          color: "outline.error"
         }
       },
       major: {
         container: {
           border: "1px solid",
+          // eslint-disable-next-line spor/use-semantic-tokens
           borderColor: "golden"
         }
       },
       minor: {},
-      info: {
-        deviationIcon: {
-          color: "ocean"
-        }
-      },
+      info: {},
       none: {}
     },
     variant: {
@@ -8070,22 +8081,13 @@ var lineIconSlotRecipe = defineSlotRecipe({
     iconContainer: {
       display: "flex",
       justifyContent: "center",
-      alignItems: "center",
-      "[aria-disabled=true] &": {
-        backgroundColor: "surface.disabled"
-      }
+      alignItems: "center"
     },
     icon: {
-      color: "white",
-      "[aria-disabled=true] &": {
-        color: "icon.disabled"
-      }
+      color: "bg"
     },
     title: {
-      color: "darkGrey",
-      "[aria-disabled=true] &": {
-        color: "text.disabled"
-      }
+      color: "text"
     }
   },
   variants: {
@@ -8143,39 +8145,15 @@ var lineIconSlotRecipe = defineSlotRecipe({
       "alt-transport": {
         iconContainer: {
           backgroundColor: "linjetag.altTransport"
-        },
-        icon: {
-          color: "darkGrey",
-          "[aria-disabled=true] &": {
-            color: "white"
-          }
         }
       },
       walk: {
         title: {
           color: "text"
-        },
-        icon: {
-          color: "linjetag.walkLight",
-          "[aria-disabled=true] &": {
-            color: "icon.disabled"
-          }
-        },
-        _disabled: {
-          icon: {
-            color: "text.disabled"
-          },
-          title: {
-            color: "text.disabled"
-          }
         }
       },
       custom: {
-        iconContainer: {
-          _disabled: {
-            backgroundColor: "surface.disabled"
-          }
-        }
+        iconContainer: {}
       }
     },
     size: {
@@ -8824,7 +8802,6 @@ var radioCardSlotRecipe = defineSlotRecipe({
           outlineColor: "core.outline",
           outlineWidth: tokens23__default.size.stroke.sm,
           outlineStyle: "solid",
-          backgroundColor: "core.surface",
           _hover: {
             outlineColor: "core.outline.hover",
             outlineWidth: tokens23__default.size.stroke.md,
@@ -9000,8 +8977,7 @@ var selectSlotRecipe = defineSlotRecipe({
         outlineColor: "outline.focus"
       },
       _active: {
-        backgroundColor: "ghost.surface.active",
-        color: "green"
+        backgroundColor: "ghost.surface.active"
       },
       _highlighted: {
         _active: {
@@ -9077,29 +9053,20 @@ var selectSlotRecipe = defineSlotRecipe({
       },
       floating: {
         control: {
-          backgroundColor: {
-            _light: "bg",
-            _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`
-          },
           outline: "1px solid",
           outlineColor: "floating.outline",
           _hover: {
-            outline: "1px solid",
-            outlineColor: "floating.outline.hover",
-            backgroundColor: {
-              _light: "floating.surface.hover",
-              _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`
-            }
+            outline: "2px solid",
+            outlineColor: "floating.outline"
           },
           _active: {
-            outline: "1px solid",
-            outlineColor: "floating.outline.active",
-            backgroundColor: "floating.surface.active"
+            backgroundColor: "brand.surface.active"
+          },
+          _disabled: {
+            pointerEvents: "none",
+            color: "text.disabled",
+            backgroundColor: "surface.disabled"
           }
-        },
-        selectContent: {
-          outline: "1px solid",
-          outlineColor: "floating.outline"
         }
       }
     },
@@ -9221,7 +9188,7 @@ var switchSlotRecipe = defineSlotRecipe({
   base: {
     root: {
       display: "inline-flex",
-      gap: "2.5",
+      gap: "2",
       alignItems: "center",
       position: "relative",
       verticalAlign: "middle",
@@ -9278,9 +9245,8 @@ var switchSlotRecipe = defineSlotRecipe({
       height: "var(--switch-height)",
       transitionProperty: "common",
       transitionDuration: "fast",
-      outline: "1px solid",
-      outlineColor: "core.outline.default",
-      backgroundColor: "core.background",
+      outline: "2px solid",
+      outlineColor: "core.outline",
       _hover: {
         outline: "2px solid",
         outlineColor: "core.outline.hover",
@@ -9304,7 +9270,6 @@ var switchSlotRecipe = defineSlotRecipe({
       },
       _disabled: {
         pointerEvents: "none",
-        backgroundColor: "core.disabled",
         outlineColor: "outline.disabled",
         _checked: {
           backgroundColor: "icon.disabled",
@@ -9407,7 +9372,6 @@ var tableSlotRecipe = defineSlotRecipe({
           backgroundColor: "bg"
         },
         columnHeader: {
-          color: "brand.text.inverted",
           backgroundColor: "surface.disabled",
           _hover: {
             backgroundColor: "surface.disabled"
@@ -9609,7 +9573,6 @@ var tabsSlotRecipe = defineSlotRecipe({
     variant: {
       core: {
         list: {
-          backgroundColor: "core.surface",
           color: "core.text",
           border: "sm"
         },
@@ -9619,7 +9582,7 @@ var tabsSlotRecipe = defineSlotRecipe({
           borderColor: "transparent",
           _hover: {
             outline: "2px solid",
-            outlineColor: "core.surface.hover",
+            outlineColor: "core.outline.hover",
             outlineOffset: "-2px"
           },
           _active: {
@@ -9636,7 +9599,7 @@ var tabsSlotRecipe = defineSlotRecipe({
           },
           _disabled: {
             backgroundColor: "surface.disabled",
-            color: "brand.text.disabled"
+            color: "surface.disabled"
           }
         }
       },
@@ -9649,7 +9612,7 @@ var tabsSlotRecipe = defineSlotRecipe({
           color: "accent.text",
           _disabled: {
             backgroundColor: "surface.disabled",
-            color: "accent.text.disabled"
+            color: "icon.disabled"
           },
           _hover: {
             backgroundColor: "accent.surface.hover",
@@ -9742,22 +9705,13 @@ var toastSlotRecipe = defineSlotRecipe({
       boxShadow: "xl",
       color: "text",
       "&[data-type=success]": {
-        backgroundColor: "alert.success.surface",
-        "& svg": {
-          color: "primaryGreen"
-        }
+        backgroundColor: "alert.success.surface"
       },
       "&[data-type=error]": {
-        backgroundColor: "alert.error.surface",
-        "& svg": {
-          color: "brightRed"
-        }
+        backgroundColor: "alert.error.surface"
       },
       "&[data-type=info]": {
-        backgroundColor: "alert.info.surface",
-        "& svg": {
-          color: "darkBlue"
-        }
+        backgroundColor: "alert.info.surface"
       }
     },
     title: {