@vygruppen/spor-react 10.8.2 → 10.9.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@10.8.2 build
+> @vygruppen/spor-react@10.9.1 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,11 +10,11 @@
 ESM Build start
 DTS Build start
 ESM dist/index.mjs                      2.16 KB
-ESM dist/CountryCodeSelect-AKXDN47A.mjs 1.22 KB
-ESM dist/chunk-LA5DSNRV.mjs             425.97 KB
-ESM ⚡️ Build success in 2247ms
-CJS dist/index.js 539.47 KB
-CJS ⚡️ Build success in 2248ms
-DTS ⚡️ Build success in 15253ms
-DTS dist/index.d.ts  340.79 KB
-DTS dist/index.d.mts 340.79 KB
+ESM dist/CountryCodeSelect-KKDPTYI3.mjs 1.22 KB
+ESM dist/chunk-RK3GOXNY.mjs             427.00 KB
+ESM ⚡️ Build success in 2129ms
+CJS dist/index.js 540.68 KB
+CJS ⚡️ Build success in 2130ms
+DTS ⚡️ Build success in 15384ms
+DTS dist/index.d.ts  342.08 KB
+DTS dist/index.d.mts 342.08 KB

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @vygruppen/spor-react
 
+## 10.9.1
+
+### Patch Changes
+
+- 0299f59: Fix import bug in file for ServiceAlert
+
+## 10.9.0
+
+### Minor Changes
+
+- 6c3e196: new variant for ServiceAlert
+
+### Patch Changes
+
+- Updated dependencies [6c3e196]
+  - @vygruppen/spor-icon-react@3.12.0
+
 ## 10.8.2
 
 ### Patch Changes

package/dist/{CountryCodeSelect-AKXDN47A.mjs → CountryCodeSelect-KKDPTYI3.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-LA5DSNRV.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-RK3GOXNY.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-LA5DSNRV.mjs → chunk-RK3GOXNY.mjs}

@@ -5,7 +5,7 @@ import { forwardRef, Divider as Divider$1, Stack as Stack$1, Box, useMultiStyleC
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import * as React85 from 'react';
 import React85__default, { forwardRef as forwardRef$1, useRef, useState, useEffect, useId, Suspense, useContext, createContext, useCallback, useMemo, useLayoutEffect } from 'react';
-import { CloseOutline24Icon, SearchOutline24Icon, CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowLeftFill24Icon, ArrowLeftFill30Icon, ArrowRightFill18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
+import { CloseOutline24Icon, SearchOutline24Icon, CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowLeftFill24Icon, ArrowLeftFill30Icon, ArrowRightFill18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ServiceFill24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
 import { usePopover, DismissButton, Overlay, useOverlayTrigger, useButton, useDateSegment, useDateField, useDatePicker, I18nProvider, useDialog, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useSelect, HiddenSelect, useProgressBar, useCalendar, useDateRangePicker, useCalendarGrid, useRangeCalendar, useTimeField, useCalendarCell } from 'react-aria';
 import { useOverlayTriggerState, Item, useDateFieldState, useDatePickerState, useComboBoxState, useSelectState, useCalendarState, useDateRangePickerState, useTimeFieldState, useRangeCalendarState } from 'react-stately';
 export { Item, Section } from 'react-stately';
@@ -1841,7 +1841,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-AKXDN47A.mjs'));
+var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-KKDPTYI3.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React85__default.createElement(Radio$1, { ...props, ref });
 });
@@ -2715,8 +2715,10 @@ var getIcon2 = (variant) => {
       return AltTransportOutline24Icon;
     case "error":
       return ErrorOutline24Icon;
-    case "service":
+    case "global-deviation":
       return WarningFill24Icon;
+    case "service":
+      return ServiceFill24Icon;
   }
 };
 var texts10 = createTexts({
@@ -2755,6 +2757,12 @@ var texts10 = createTexts({
     nn: "Driftsmelding",
     sv: "Servicemeddelande",
     en: "Service message"
+  },
+  "global-deviation": {
+    nb: "Trafikkmelding",
+    nn: "Trafikkmelding",
+    sv: "Trafikmeddelande",
+    en: "Traffic announcement"
   }
 });
 var BaseAlert = ({
@@ -2862,7 +2870,7 @@ var StaticAlert = ({
   return /* @__PURE__ */ React85__default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React85__default.createElement(AlertIcon, { variant: props.variant }), /* @__PURE__ */ React85__default.createElement(Flex, { direction: "column", gap: title ? 2 : void 0, textAlign: "left" }, title && /* @__PURE__ */ React85__default.createElement(Box, { fontWeight: "bold" }, title), /* @__PURE__ */ React85__default.createElement(Box, null, children)));
 };
 var ServiceAlert = ({
-  variant,
+  variant = "service",
   children,
   title,
   notification,
@@ -2873,9 +2881,8 @@ var ServiceAlert = ({
   },
   ...boxProps
 }) => {
-  variant = "service";
   const { t: t2 } = useTranslation();
-  const styles3 = useMultiStyleConfig("AlertService");
+  const styles3 = useMultiStyleConfig("AlertService", { variant });
   return /* @__PURE__ */ React85__default.createElement(
     BaseAlert,
     {
@@ -2921,12 +2928,11 @@ var ServiceAlert = ({
                 overflow: "hidden",
                 WebkitLineClamp: "1",
                 WebkitBoxOrient: "vertical"
-              },
-              color: "white"
+              }
             },
             title
           )),
-          /* @__PURE__ */ React85__default.createElement(Flex, { alignItems: "center" }, notification && /* @__PURE__ */ React85__default.createElement(Text, { sx: styles3.notificationText }, t2(texts12.notification(notification))), /* @__PURE__ */ React85__default.createElement(AccordionIcon, { color: "white" }))
+          /* @__PURE__ */ React85__default.createElement(Flex, { alignItems: "center" }, notification && /* @__PURE__ */ React85__default.createElement(Text, { sx: styles3.notificationText }, t2(texts12.notification(notification))), /* @__PURE__ */ React85__default.createElement(AccordionIcon, null))
         )
       )), /* @__PURE__ */ React85__default.createElement(AccordionPanel, { sx: styles3.serviceMessageContent }, /* @__PURE__ */ React85__default.createElement(Stack$1, { flexDirection: "row", justifyContent: "center", width: "100%" }, /* @__PURE__ */ React85__default.createElement(
         Stack$1,
@@ -2940,7 +2946,8 @@ var ServiceAlert = ({
           sx: {
             p: {
               padding: "0.8rem 0",
-              borderBottom: "0.08rem solid rgba(255, 255, 255, 0.4)"
+              borderBottom: "0.08rem solid",
+              borderColor: variant === "global-deviation" ? "blackAlpha.400" : "whiteAlpha.400"
             },
             "p:last-child": {
               borderBottom: "none"
@@ -10761,6 +10768,11 @@ var config3 = helpers2.defineMultiStyleConfig({
         backgroundColor: "banana"
       }
     },
+    "global-deviation": {
+      container: {
+        backgroundColor: "blonde"
+      }
+    },
     service: {
       container: {
         backgroundColor: "darkTeal",
@@ -10895,24 +10907,16 @@ var config5 = helpers4.defineMultiStyleConfig({
       borderTopRadius: "none",
       borderBottomRadius: "md",
       _hover: {
-        outline: "2px solid",
-        outlineColor: "blueGreen"
-      },
-      _active: {
-        backgroundColor: "pine",
-        outlineColor: "pine"
+        outline: "2px solid"
       }
     },
     outerBox: {
       outline: "1px solid",
-      outlineColor: "blueGreen",
-      backgroundColor: "darkTeal",
       borderBottomRadius: "md",
       borderTopRadius: "none",
       width: "100%"
     },
     notificationText: {
-      color: "white",
       fontWeight: "400",
       fontSize: "1rem",
       pr: "0.375rem"
@@ -10920,8 +10924,53 @@ var config5 = helpers4.defineMultiStyleConfig({
     serviceMessageContent: {
       paddingX: "0.75rem",
       paddingTop: "0.375rem",
-      paddingBottom: "0.9375rem",
-      color: "white"
+      paddingBottom: "0.9375rem"
+    }
+  },
+  variants: {
+    "global-deviation": {
+      container: {
+        _hover: {
+          outlineColor: "primrose"
+        },
+        _active: {
+          backgroundColor: "blonde",
+          outlineColor: "primrose"
+        },
+        color: "darkGrey"
+      },
+      outerBox: {
+        outlineColor: "primrose",
+        backgroundColor: "blonde"
+      },
+      notificationText: {
+        color: "darkGrey"
+      },
+      serviceMessageContent: {
+        color: "darkGrey"
+      }
+    },
+    service: {
+      container: {
+        _hover: {
+          outlineColor: "blueGreen"
+        },
+        _active: {
+          backgroundColor: "pine",
+          outlineColor: "pine"
+        },
+        color: "white"
+      },
+      outerBox: {
+        outlineColor: "blueGreen",
+        backgroundColor: "darkTeal"
+      },
+      notificationText: {
+        color: "white"
+      },
+      serviceMessageContent: {
+        color: "white"
+      }
     }
   }
 });

package/dist/index.d.mts

@@ -296,7 +296,7 @@ declare const ExpandableItem: ({ children, title, headingLevel, leftIcon, ...res
 
 type BaseAlertProps = BoxProps & {
     /** The color scheme and icon of the alert */
-    variant: "info" | "success" | "warning" | "alt-transport" | "error" | "service";
+    variant: "info" | "success" | "warning" | "alt-transport" | "error" | "service" | "global-deviation";
     /** The body content of the alert */
     children: React.ReactNode;
     /** The title of the alert */
@@ -389,6 +389,8 @@ type ServiceAlertProps = BaseAlertProps & {
      *
      * Defaults to h3 */
     headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
+    /** The variant of Service Alert. Default: service */
+    variant?: "service" | "global-deviation";
 };
 /**
  * A service alert component.
@@ -2528,6 +2530,11 @@ declare const theme: {
                         backgroundColor: string;
                     };
                 };
+                "global-deviation": {
+                    container: {
+                        backgroundColor: string;
+                    };
+                };
                 service: {
                     container: {
                         backgroundColor: string;
@@ -2537,7 +2544,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | "service" | undefined;
+                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | "service" | "global-deviation" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("container" | "icon" | "closeButton")[];
@@ -2659,23 +2666,15 @@ declare const theme: {
                     borderBottomRadius: string;
                     _hover: {
                         outline: string;
-                        outlineColor: string;
-                    };
-                    _active: {
-                        backgroundColor: string;
-                        outlineColor: string;
                     };
                 };
                 outerBox: {
                     outline: string;
-                    outlineColor: string;
-                    backgroundColor: string;
                     borderBottomRadius: string;
                     borderTopRadius: string;
                     width: string;
                 };
                 notificationText: {
-                    color: string;
                     fontWeight: string;
                     fontSize: string;
                     pr: string;
@@ -2684,7 +2683,6 @@ declare const theme: {
                     paddingX: string;
                     paddingTop: string;
                     paddingBottom: string;
-                    color: string;
                 };
             } | undefined;
             sizes?: {
@@ -2693,13 +2691,54 @@ declare const theme: {
                 }>;
             } | undefined;
             variants?: {
-                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
-                }>;
+                "global-deviation": {
+                    container: {
+                        _hover: {
+                            outlineColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                            outlineColor: string;
+                        };
+                        color: string;
+                    };
+                    outerBox: {
+                        outlineColor: string;
+                        backgroundColor: string;
+                    };
+                    notificationText: {
+                        color: string;
+                    };
+                    serviceMessageContent: {
+                        color: string;
+                    };
+                };
+                service: {
+                    container: {
+                        _hover: {
+                            outlineColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                            outlineColor: string;
+                        };
+                        color: string;
+                    };
+                    outerBox: {
+                        outlineColor: string;
+                        backgroundColor: string;
+                    };
+                    notificationText: {
+                        color: string;
+                    };
+                    serviceMessageContent: {
+                        color: string;
+                    };
+                };
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: string | number | undefined;
+                variant?: "service" | "global-deviation" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];

package/dist/index.d.ts

@@ -296,7 +296,7 @@ declare const ExpandableItem: ({ children, title, headingLevel, leftIcon, ...res
 
 type BaseAlertProps = BoxProps & {
     /** The color scheme and icon of the alert */
-    variant: "info" | "success" | "warning" | "alt-transport" | "error" | "service";
+    variant: "info" | "success" | "warning" | "alt-transport" | "error" | "service" | "global-deviation";
     /** The body content of the alert */
     children: React.ReactNode;
     /** The title of the alert */
@@ -389,6 +389,8 @@ type ServiceAlertProps = BaseAlertProps & {
      *
      * Defaults to h3 */
     headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
+    /** The variant of Service Alert. Default: service */
+    variant?: "service" | "global-deviation";
 };
 /**
  * A service alert component.
@@ -2528,6 +2530,11 @@ declare const theme: {
                         backgroundColor: string;
                     };
                 };
+                "global-deviation": {
+                    container: {
+                        backgroundColor: string;
+                    };
+                };
                 service: {
                     container: {
                         backgroundColor: string;
@@ -2537,7 +2544,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | "service" | undefined;
+                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | "service" | "global-deviation" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("container" | "icon" | "closeButton")[];
@@ -2659,23 +2666,15 @@ declare const theme: {
                     borderBottomRadius: string;
                     _hover: {
                         outline: string;
-                        outlineColor: string;
-                    };
-                    _active: {
-                        backgroundColor: string;
-                        outlineColor: string;
                     };
                 };
                 outerBox: {
                     outline: string;
-                    outlineColor: string;
-                    backgroundColor: string;
                     borderBottomRadius: string;
                     borderTopRadius: string;
                     width: string;
                 };
                 notificationText: {
-                    color: string;
                     fontWeight: string;
                     fontSize: string;
                     pr: string;
@@ -2684,7 +2683,6 @@ declare const theme: {
                     paddingX: string;
                     paddingTop: string;
                     paddingBottom: string;
-                    color: string;
                 };
             } | undefined;
             sizes?: {
@@ -2693,13 +2691,54 @@ declare const theme: {
                 }>;
             } | undefined;
             variants?: {
-                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
-                }>;
+                "global-deviation": {
+                    container: {
+                        _hover: {
+                            outlineColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                            outlineColor: string;
+                        };
+                        color: string;
+                    };
+                    outerBox: {
+                        outlineColor: string;
+                        backgroundColor: string;
+                    };
+                    notificationText: {
+                        color: string;
+                    };
+                    serviceMessageContent: {
+                        color: string;
+                    };
+                };
+                service: {
+                    container: {
+                        _hover: {
+                            outlineColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                            outlineColor: string;
+                        };
+                        color: string;
+                    };
+                    outerBox: {
+                        outlineColor: string;
+                        backgroundColor: string;
+                    };
+                    notificationText: {
+                        color: string;
+                    };
+                    serviceMessageContent: {
+                        color: string;
+                    };
+                };
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: string | number | undefined;
+                variant?: "service" | "global-deviation" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];

package/dist/index.js

@@ -3203,8 +3203,10 @@ var init_AlertIcon = __esm({
           return sporIconReact.AltTransportOutline24Icon;
         case "error":
           return sporIconReact.ErrorOutline24Icon;
-        case "service":
+        case "global-deviation":
           return sporIconReact.WarningFill24Icon;
+        case "service":
+          return sporIconReact.ServiceFill24Icon;
       }
     };
     texts11 = createTexts({
@@ -3243,6 +3245,12 @@ var init_AlertIcon = __esm({
         nn: "Driftsmelding",
         sv: "Servicemeddelande",
         en: "Service message"
+      },
+      "global-deviation": {
+        nb: "Trafikkmelding",
+        nn: "Trafikkmelding",
+        sv: "Trafikmeddelande",
+        en: "Traffic announcement"
       }
     });
   }
@@ -3384,7 +3392,7 @@ var init_ServiceAlert = __esm({
     init_BaseAlert();
     init_i18n();
     exports.ServiceAlert = ({
-      variant,
+      variant = "service",
       children,
       title,
       notification,
@@ -3395,9 +3403,8 @@ var init_ServiceAlert = __esm({
       },
       ...boxProps
     }) => {
-      variant = "service";
       const { t: t2 } = useTranslation();
-      const styles3 = react.useMultiStyleConfig("AlertService");
+      const styles3 = react.useMultiStyleConfig("AlertService", { variant });
       return /* @__PURE__ */ React86__namespace.default.createElement(
         BaseAlert,
         {
@@ -3443,12 +3450,11 @@ var init_ServiceAlert = __esm({
                     overflow: "hidden",
                     WebkitLineClamp: "1",
                     WebkitBoxOrient: "vertical"
-                  },
-                  color: "white"
+                  }
                 },
                 title
               )),
-              /* @__PURE__ */ React86__namespace.default.createElement(react.Flex, { alignItems: "center" }, notification && /* @__PURE__ */ React86__namespace.default.createElement(react.Text, { sx: styles3.notificationText }, t2(texts13.notification(notification))), /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionIcon, { color: "white" }))
+              /* @__PURE__ */ React86__namespace.default.createElement(react.Flex, { alignItems: "center" }, notification && /* @__PURE__ */ React86__namespace.default.createElement(react.Text, { sx: styles3.notificationText }, t2(texts13.notification(notification))), /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionIcon, null))
             )
           )), /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionPanel, { sx: styles3.serviceMessageContent }, /* @__PURE__ */ React86__namespace.default.createElement(react.Stack, { flexDirection: "row", justifyContent: "center", width: "100%" }, /* @__PURE__ */ React86__namespace.default.createElement(
             react.Stack,
@@ -3462,7 +3468,8 @@ var init_ServiceAlert = __esm({
               sx: {
                 p: {
                   padding: "0.8rem 0",
-                  borderBottom: "0.08rem solid rgba(255, 255, 255, 0.4)"
+                  borderBottom: "0.08rem solid",
+                  borderColor: variant === "global-deviation" ? "blackAlpha.400" : "whiteAlpha.400"
                 },
                 "p:last-child": {
                   borderBottom: "none"
@@ -12136,6 +12143,11 @@ var init_alert2 = __esm({
             backgroundColor: "banana"
           }
         },
+        "global-deviation": {
+          container: {
+            backgroundColor: "blonde"
+          }
+        },
         service: {
           container: {
             backgroundColor: "darkTeal",
@@ -12284,24 +12296,16 @@ var init_alert_service = __esm({
           borderTopRadius: "none",
           borderBottomRadius: "md",
           _hover: {
-            outline: "2px solid",
-            outlineColor: "blueGreen"
-          },
-          _active: {
-            backgroundColor: "pine",
-            outlineColor: "pine"
+            outline: "2px solid"
           }
         },
         outerBox: {
           outline: "1px solid",
-          outlineColor: "blueGreen",
-          backgroundColor: "darkTeal",
           borderBottomRadius: "md",
           borderTopRadius: "none",
           width: "100%"
         },
         notificationText: {
-          color: "white",
           fontWeight: "400",
           fontSize: "1rem",
           pr: "0.375rem"
@@ -12309,8 +12313,53 @@ var init_alert_service = __esm({
         serviceMessageContent: {
           paddingX: "0.75rem",
           paddingTop: "0.375rem",
-          paddingBottom: "0.9375rem",
-          color: "white"
+          paddingBottom: "0.9375rem"
+        }
+      },
+      variants: {
+        "global-deviation": {
+          container: {
+            _hover: {
+              outlineColor: "primrose"
+            },
+            _active: {
+              backgroundColor: "blonde",
+              outlineColor: "primrose"
+            },
+            color: "darkGrey"
+          },
+          outerBox: {
+            outlineColor: "primrose",
+            backgroundColor: "blonde"
+          },
+          notificationText: {
+            color: "darkGrey"
+          },
+          serviceMessageContent: {
+            color: "darkGrey"
+          }
+        },
+        service: {
+          container: {
+            _hover: {
+              outlineColor: "blueGreen"
+            },
+            _active: {
+              backgroundColor: "pine",
+              outlineColor: "pine"
+            },
+            color: "white"
+          },
+          outerBox: {
+            outlineColor: "blueGreen",
+            backgroundColor: "darkTeal"
+          },
+          notificationText: {
+            color: "white"
+          },
+          serviceMessageContent: {
+            color: "white"
+          }
         }
       }
     });

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-LA5DSNRV.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-RK3GOXNY.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "10.8.2",
+  "version": "10.9.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -23,7 +23,7 @@
     "@emotion/styled": "^11.11.5",
     "@internationalized/date": "^3.5.4",
     "@vygruppen/spor-design-tokens": "^3.7.0",
-    "@vygruppen/spor-icon-react": "^3.9.0",
+    "@vygruppen/spor-icon-react": "^3.12.0",
     "@vygruppen/spor-loader": "^0.4.0",
     "awesome-phonenumber": "^5.11.0",
     "deepmerge": "^4.3.1",

package/src/alert/AlertIcon.tsx

@@ -5,6 +5,7 @@ import {
   SuccessOutline24Icon,
   WarningOutline24Icon,
   WarningFill24Icon,
+  ServiceFill24Icon,
 } from "@vygruppen/spor-icon-react";
 import React from "react";
 import { createTexts, useTranslation } from "../i18n";
@@ -39,8 +40,10 @@ const getIcon = (variant: BaseAlertProps["variant"]) => {
       return AltTransportOutline24Icon;
     case "error":
       return ErrorOutline24Icon;
-    case "service":
+    case "global-deviation":
       return WarningFill24Icon;
+    case "service":
+      return ServiceFill24Icon;
   }
 };
 
@@ -81,4 +84,10 @@ const texts = createTexts({
     sv: "Servicemeddelande",
     en: "Service message",
   },
+  "global-deviation": {
+    nb: "Trafikkmelding",
+    nn: "Trafikkmelding",
+    sv: "Trafikmeddelande",
+    en: "Traffic announcement",
+  },
 });

package/src/alert/BaseAlert.tsx

@@ -9,7 +9,8 @@ export type BaseAlertProps = BoxProps & {
     | "warning"
     | "alt-transport"
     | "error"
-    | "service";
+    | "service"
+    | "global-deviation";
   /** The body content of the alert */
   children: React.ReactNode;
   /** The title of the alert */

package/src/alert/ServiceAlert.tsx

@@ -33,6 +33,8 @@ type ServiceAlertProps = BaseAlertProps & {
    *
    * Defaults to h3 */
   headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
+  /** The variant of Service Alert. Default: service */
+  variant?: "service" | "global-deviation";
 };
 /**
  * A service alert component.
@@ -46,7 +48,7 @@ type ServiceAlertProps = BaseAlertProps & {
  * ```
  */
 export const ServiceAlert = ({
-  variant,
+  variant = "service",
   children,
   title,
   notification,
@@ -56,9 +58,8 @@ export const ServiceAlert = ({
   onToggle = () => {},
   ...boxProps
 }: ServiceAlertProps) => {
-  variant = "service";
   const { t } = useTranslation();
-  const styles = useMultiStyleConfig("AlertService");
+  const styles = useMultiStyleConfig("AlertService", { variant });
   return (
     <BaseAlert
       variant={variant}
@@ -101,7 +102,6 @@ export const ServiceAlert = ({
                       WebkitLineClamp: "1",
                       WebkitBoxOrient: "vertical",
                     }}
-                    color="white"
                   >
                     {title}
                   </Box>
@@ -114,7 +114,7 @@ export const ServiceAlert = ({
                     </Text>
                   )}
 
-                  <AccordionIcon color="white" />
+                  <AccordionIcon />
                 </Flex>
               </Flex>
             </Stack>
@@ -132,7 +132,11 @@ export const ServiceAlert = ({
                 sx={{
                   p: {
                     padding: "0.8rem 0",
-                    borderBottom: "0.08rem solid rgba(255, 255, 255, 0.4)",
+                    borderBottom: "0.08rem solid",
+                    borderColor:
+                      variant === "global-deviation"
+                        ? "blackAlpha.400"
+                        : "whiteAlpha.400",
                   },
                   "p:last-child": {
                     borderBottom: "none",

package/src/theme/components/alert-service.ts

@@ -8,7 +8,6 @@ const parts = anatomy("alertService").parts(
   "serviceMessageContent",
 );
 const helpers = createMultiStyleConfigHelpers(parts.keys);
-
 const config = helpers.defineMultiStyleConfig({
   baseStyle: {
     container: {
@@ -21,23 +20,15 @@ const config = helpers.defineMultiStyleConfig({
       borderBottomRadius: "md",
       _hover: {
         outline: "2px solid",
-        outlineColor: "blueGreen",
-      },
-      _active: {
-        backgroundColor: "pine",
-        outlineColor: "pine",
       },
     },
     outerBox: {
       outline: "1px solid",
-      outlineColor: "blueGreen",
-      backgroundColor: "darkTeal",
       borderBottomRadius: "md",
       borderTopRadius: "none",
       width: "100%",
     },
     notificationText: {
-      color: "white",
       fontWeight: "400",
       fontSize: "1rem",
       pr: "0.375rem",
@@ -46,7 +37,52 @@ const config = helpers.defineMultiStyleConfig({
       paddingX: "0.75rem",
       paddingTop: "0.375rem",
       paddingBottom: "0.9375rem",
-      color: "white",
+    },
+  },
+  variants: {
+    "global-deviation": {
+      container: {
+        _hover: {
+          outlineColor: "primrose",
+        },
+        _active: {
+          backgroundColor: "blonde",
+          outlineColor: "primrose",
+        },
+        color: "darkGrey",
+      },
+      outerBox: {
+        outlineColor: "primrose",
+        backgroundColor: "blonde",
+      },
+      notificationText: {
+        color: "darkGrey",
+      },
+      serviceMessageContent: {
+        color: "darkGrey",
+      },
+    },
+    service: {
+      container: {
+        _hover: {
+          outlineColor: "blueGreen",
+        },
+        _active: {
+          backgroundColor: "pine",
+          outlineColor: "pine",
+        },
+        color: "white",
+      },
+      outerBox: {
+        outlineColor: "blueGreen",
+        backgroundColor: "darkTeal",
+      },
+      notificationText: {
+        color: "white",
+      },
+      serviceMessageContent: {
+        color: "white",
+      },
     },
   },
 });

package/src/theme/components/alert.ts

@@ -51,6 +51,11 @@ const config = helpers.defineMultiStyleConfig({
         backgroundColor: "banana",
       },
     },
+    "global-deviation": {
+      container: {
+        backgroundColor: "blonde",
+      },
+    },
     service: {
       container: {
         backgroundColor: "darkTeal",