@vygruppen/spor-react 12.9.0 → 12.10.1

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: {
@@ -2385,7 +2366,7 @@ var CloseDrawerLine = forwardRef((props, ref) => {
       top: 0,
       marginY: 2,
       marginX: "auto",
-      backgroundColor: "silver",
+      backgroundColor: "floating.outline.active",
       borderRadius: "xs",
       ...props,
       ref
@@ -3765,6 +3746,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 +3834,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 +3855,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 +3916,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 +5069,7 @@ var createToast = ({
   text,
   variant,
   id,
-  duration = 6e3
+  duration = 6e5
 }) => toaster.create({
   description: text,
   type: variant,
@@ -5114,9 +5118,10 @@ var texts25 = createTexts({
 var SporProvider = ({
   language = "nb" /* NorwegianBokmal */,
   theme = system,
+  enableSystemColorMode = true,
   children
 }) => {
-  return /* @__PURE__ */ jsx(LanguageProvider, { language, children: /* @__PURE__ */ jsx(ChakraProvider, { value: theme, children: /* @__PURE__ */ jsxs(ColorModeProvider, { children: [
+  return /* @__PURE__ */ jsx(LanguageProvider, { language, children: /* @__PURE__ */ jsx(ChakraProvider, { value: theme, children: /* @__PURE__ */ jsxs(ColorModeProvider, { enableSystem: enableSystemColorMode, children: [
     /* @__PURE__ */ jsx(Toaster, {}),
     /* @__PURE__ */ jsx(Global, { styles: fontFaces }),
     children
@@ -5494,12 +5499,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"
@@ -5657,17 +5662,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"
           }
@@ -5751,7 +5756,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,
@@ -5909,7 +5913,7 @@ var skeletonRecipe = defineRecipe({
       },
       none: {
         animation: "none",
-        background: "steel"
+        background: "surface.color.grey"
       }
     }
   }
@@ -6662,7 +6666,7 @@ var alertServiceSlotRecipe = defineSlotRecipe({
         backgroundColor: "alert.service.surface.active"
       },
       _icon: {
-        color: "darkGrey"
+        color: "text"
       }
     },
     itemTriggerTitle: {
@@ -6768,7 +6772,6 @@ var checkboxSlotRecipe = defineSlotRecipe({
     indicator: {
       width: "100%",
       height: "100%",
-      borderColor: "white",
       marginTop: -1,
       transform: "scale(1)",
       opacity: 0,
@@ -6799,8 +6802,8 @@ var checkboxSlotRecipe = defineSlotRecipe({
           borderColor: "currentColor"
         },
         _invalid: {
-          backgroundColor: "brightRed",
-          borderColor: "brightRed"
+          backgroundColor: "outline.error",
+          borderColor: "outline.error"
         }
       },
       _disabled: {
@@ -6840,7 +6843,7 @@ var choiceChipSlotRecipe = defineSlotRecipe({
       paddingInlineStart: "2",
       paddingInlineEnd: "2",
       outline: "1px solid",
-      outlineColor: "base.outline",
+      outlineColor: "core.outline",
       _checked: {
         backgroundColor: "brand.surface",
         borderRadius: "sm",
@@ -6865,19 +6868,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"
           }
         }
       }
@@ -6885,6 +6888,7 @@ var choiceChipSlotRecipe = defineSlotRecipe({
     label: {
       display: "flex",
       alignItems: "center",
+      gap: "1",
       fontSize: "xs"
     }
   },
@@ -7040,7 +7044,7 @@ var datePickerSlotRecipe = defineSlotRecipe({
     dateTimeSegment: {
       _focus: {
         backgroundColor: "ghost.surface.active",
-        color: "text.default"
+        color: "text"
       }
     },
     box: {
@@ -7148,7 +7152,6 @@ var datePickerSlotRecipe = defineSlotRecipe({
         wrapper: {
           outline: "1px solid",
           outlineColor: "core.outline",
-          backgroundColor: "core.surface",
           _hover: {
             outline: "2px solid",
             outlineColor: "core.outline.hover",
@@ -7216,6 +7219,7 @@ var dialogSlotRecipe = defineSlotRecipe({
   className: "spor-dialog",
   base: {
     backdrop: {
+      // eslint-disable-next-line spor/use-semantic-tokens
       background: "blackAlpha.500",
       position: "fixed",
       left: 0,
@@ -7436,6 +7440,7 @@ var drawerSlotRecipe = defineSlotRecipe({
   className: "spor-drawer",
   base: {
     backdrop: {
+      // eslint-disable-next-line spor/use-semantic-tokens
       bg: "blackAlpha.500",
       position: "fixed",
       insetInlineStart: 0,
@@ -7641,6 +7646,7 @@ var fieldSlotRecipe = defineSlotRecipe({
     },
     requiredIndicator: {
       marginStart: 1,
+      // eslint-disable-next-line spor/use-semantic-tokens
       color: "brightRed"
     },
     label: {
@@ -7654,8 +7660,8 @@ var fieldSlotRecipe = defineSlotRecipe({
     },
     errorText: {
       borderRadius: "xs",
-      backgroundColor: "lightRed",
-      color: "darkGrey",
+      backgroundColor: "alert.error.surface",
+      color: "text",
       paddingX: 1.5,
       paddingY: 1,
       textStyle: "xs",
@@ -7672,7 +7678,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"
       }
@@ -7752,7 +7758,7 @@ var floatingActionButtonSlotRecipe = defineSlotRecipe({
           _hover: {
             backgroundColor: "transparent",
             outline: "2px solid",
-            outlineColor: "core.outline.light",
+            outlineColor: "core.outline",
             _active: {
               outline: "1px solid",
               outlineColor: "core.outline",
@@ -7815,6 +7821,9 @@ var travelTagSlotRecipe = defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       padding: 0.5,
+      _disabled: {
+        background: "surface.disabled"
+      },
       width: "fit-content",
       transitionDuration: "fast",
       transitionProperty: "common",
@@ -7830,13 +7839,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"
       }
@@ -7860,24 +7869,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: {
@@ -8068,22 +8074,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: {
@@ -8141,39 +8138,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: {
@@ -8822,7 +8795,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,
@@ -8998,8 +8970,7 @@ var selectSlotRecipe = defineSlotRecipe({
         outlineColor: "outline.focus"
       },
       _active: {
-        backgroundColor: "ghost.surface.active",
-        color: "green"
+        backgroundColor: "ghost.surface.active"
       },
       _highlighted: {
         _active: {
@@ -9276,9 +9247,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",
@@ -9302,7 +9272,6 @@ var switchSlotRecipe = defineSlotRecipe({
       },
       _disabled: {
         pointerEvents: "none",
-        backgroundColor: "core.disabled",
         outlineColor: "outline.disabled",
         _checked: {
           backgroundColor: "icon.disabled",
@@ -9405,7 +9374,6 @@ var tableSlotRecipe = defineSlotRecipe({
           backgroundColor: "bg"
         },
         columnHeader: {
-          color: "brand.text.inverted",
           backgroundColor: "surface.disabled",
           _hover: {
             backgroundColor: "surface.disabled"
@@ -9607,7 +9575,6 @@ var tabsSlotRecipe = defineSlotRecipe({
     variant: {
       core: {
         list: {
-          backgroundColor: "core.surface",
           color: "core.text",
           border: "sm"
         },
@@ -9617,7 +9584,7 @@ var tabsSlotRecipe = defineSlotRecipe({
           borderColor: "transparent",
           _hover: {
             outline: "2px solid",
-            outlineColor: "core.surface.hover",
+            outlineColor: "core.outline.hover",
             outlineOffset: "-2px"
           },
           _active: {
@@ -9634,7 +9601,7 @@ var tabsSlotRecipe = defineSlotRecipe({
           },
           _disabled: {
             backgroundColor: "surface.disabled",
-            color: "brand.text.disabled"
+            color: "surface.disabled"
           }
         }
       },
@@ -9647,7 +9614,7 @@ var tabsSlotRecipe = defineSlotRecipe({
           color: "accent.text",
           _disabled: {
             backgroundColor: "surface.disabled",
-            color: "accent.text.disabled"
+            color: "icon.disabled"
           },
           _hover: {
             backgroundColor: "accent.surface.hover",
@@ -9740,22 +9707,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: {