@vygruppen/spor-react 11.0.3 → 11.0.5

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@11.0.3 build
+> @vygruppen/spor-react@11.0.5 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js 542.21 KB
-CJS ⚡️ Build success in 2273ms
+CJS dist/index.js 542.28 KB
+CJS ⚡️ Build success in 2175ms
+ESM dist/CountryCodeSelect-YB3M3566.mjs 1.22 KB
 ESM dist/index.mjs                      2.16 KB
-ESM dist/CountryCodeSelect-YX5EDQZV.mjs 1.22 KB
-ESM dist/chunk-ILLONWJI.mjs             428.29 KB
-ESM ⚡️ Build success in 2274ms
-DTS ⚡️ Build success in 15604ms
-DTS dist/index.d.ts  342.87 KB
-DTS dist/index.d.mts 342.87 KB
+ESM dist/chunk-FBD6IXFW.mjs             428.46 KB
+ESM ⚡️ Build success in 2175ms
+DTS ⚡️ Build success in 15733ms
+DTS dist/index.d.ts  343.36 KB
+DTS dist/index.d.mts 343.36 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vygruppen/spor-react
 
+## 11.0.5
+
+### Patch Changes
+
+- 793e13f: Changed color of the ServiceAlert varient global-deviation to be the same as a regular service alert
+
+## 11.0.4
+
+### Patch Changes
+
+- a10004c: Added deprecated warning on useMediaQuery
+
 ## 11.0.3
 
 ### Patch Changes

package/dist/{CountryCodeSelect-YX5EDQZV.mjs → CountryCodeSelect-YB3M3566.mjs}

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

package/dist/{chunk-ILLONWJI.mjs → chunk-FBD6IXFW.mjs}

@@ -2,7 +2,7 @@ import tokens12__default from '@vygruppen/spor-design-tokens';
 import * as tokens12 from '@vygruppen/spor-design-tokens';
 export { tokens12 as tokens };
 import { forwardRef, Divider as Divider$1, Stack as Stack$1, Box, useMultiStyleConfig, chakra, Flex, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, FormLabel as FormLabel$1, useFormControlContext, InputGroup, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, IconButton as IconButton$1, Switch as Switch$1, Textarea as Textarea$1, useStyleConfig, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Center, ButtonGroup as ButtonGroup$1, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover as Popover$1, PopoverTrigger, Portal, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, Heading, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
-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';
+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, 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, 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';
@@ -1844,7 +1844,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-YX5EDQZV.mjs'));
+var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-YB3M3566.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React85__default.createElement(Radio$1, { ...props, ref });
 });
@@ -10976,23 +10976,27 @@ var config5 = helpers4.defineMultiStyleConfig({
     "global-deviation": {
       container: {
         _hover: {
-          outlineColor: "primrose"
+          backgroundColor: "teal.600",
+          outlineColor: "teal.600"
+        },
+        _focus: {
+          outlineColor: "green.500"
         },
         _active: {
-          backgroundColor: "blonde",
-          outlineColor: "primrose"
+          backgroundColor: "teal.400",
+          outlineColor: "pine"
         },
-        color: "darkGrey"
+        color: "white"
       },
       outerBox: {
-        outlineColor: "primrose",
-        backgroundColor: "blonde"
+        outlineColor: "blueGreen",
+        backgroundColor: "darkTeal"
       },
       notificationText: {
-        color: "darkGrey"
+        color: "white"
       },
       serviceMessageContent: {
-        color: "darkGrey"
+        color: "white"
       }
     },
     service: {
@@ -14917,6 +14921,9 @@ function useSize(subject) {
   return size2;
 }
 
+// src/util/externals.tsx
+var useMediaQuery2 = useMediaQuery;
+
 // src/util/slugify.tsx
 function slugify(text, maxLength = 50) {
   if (!text) {
@@ -14931,4 +14938,4 @@ function slugify(text, maxLength = 50) {
   return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[\u00C6\u00E6]/g, "ae").replace(/[\u00D8\u00F8]/g, "oe").replace(/[\u00C5\u00E5]/g, "aa").toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]+/g, "").replace(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").substring(0, maxLength);
 }
 
-export { Accordion, AttachedInputs, Badge, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button2 as Button, ButtonGroup, CardSelect, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel, FullScreenDrawer, Heading2 as Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, Nudge, NumericStepper, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, SearchInput, ServiceAlert, SimpleDrawer, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Table, Tabs, Text5 as Text, TextLink, Textarea, TimePicker, Tooltip, TravelTag, VyLogo, VyLogoPride, WizardNudge, brandTheme, createTexts, fontFaces, slugify, theme, useSize, useToast, useTranslation };
+export { Accordion, AttachedInputs, Badge, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button2 as Button, ButtonGroup, CardSelect, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel, FullScreenDrawer, Heading2 as Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, Nudge, NumericStepper, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, SearchInput, ServiceAlert, SimpleDrawer, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Table, Tabs, Text5 as Text, TextLink, Textarea, TimePicker, Tooltip, TravelTag, VyLogo, VyLogoPride, WizardNudge, brandTheme, createTexts, fontFaces, slugify, theme, useMediaQuery2 as useMediaQuery, useSize, useToast, useTranslation };

package/dist/index.d.mts

@@ -2,8 +2,8 @@ import tokens__default from '@vygruppen/spor-design-tokens';
 import * as tokens from '@vygruppen/spor-design-tokens';
 export { tokens };
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
-import { DividerProps as DividerProps$1, As, BoxProps, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, BreadcrumbProps as BreadcrumbProps$1, ButtonProps as ButtonProps$1, SpaceProps, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ComponentWithAs, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
-export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, CSSWithMultiValues, Center, CenterProps, Collapse, CollapseProps, ComponentStyleConfig, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, ListItem, ListItemProps, ListProps, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, OrderedList, Portal, PortalProps, ScaleFade, ScaleFadeProps, SimpleGrid, SimpleGridProps, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
+import { DividerProps as DividerProps$1, As, BoxProps, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, BreadcrumbProps as BreadcrumbProps$1, ButtonProps as ButtonProps$1, SpaceProps, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ComponentWithAs, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1, useMediaQuery as useMediaQuery$1 } from '@chakra-ui/react';
+export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, CSSWithMultiValues, Center, CenterProps, Collapse, CollapseProps, ComponentStyleConfig, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, ListItem, ListItemProps, ListProps, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, OrderedList, Portal, PortalProps, ScaleFade, ScaleFadeProps, SimpleGrid, SimpleGridProps, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import React, { ChangeEvent } from 'react';
 import * as _chakra_ui_breadcrumb_dist_breadcrumb_link from '@chakra-ui/breadcrumb/dist/breadcrumb-link';
 import * as _chakra_ui_breadcrumb_dist_breadcrumb_item from '@chakra-ui/breadcrumb/dist/breadcrumb-item';
@@ -2727,6 +2727,10 @@ declare const theme: {
                 "global-deviation": {
                     container: {
                         _hover: {
+                            backgroundColor: string;
+                            outlineColor: string;
+                        };
+                        _focus: {
                             outlineColor: string;
                         };
                         _active: {
@@ -9449,6 +9453,13 @@ type TextProps = Omit<TextProps$1, "textStyle"> & {
  */
 declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", TextProps>;
 
+/** This file works as a proxy for all Chakra UI exports */
+
+/**
+ * @deprecated useMediaQuery is deprecated. Use CSS only to determine the media query. - SSR is not supported and usage of useMediaQuery for rendering will cause hydration errors.
+ */
+declare const useMediaQuery: typeof useMediaQuery$1;
+
 /**
  * Makes a slug-version of any string.
  *
@@ -9460,4 +9471,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
  **/
 declare function slugify(text: string | string[], maxLength?: number): string;
 
-export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, CardSelect, CargonetLogo, CargonetLogoProps, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, ServiceAlert, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, TranslationObject, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };
+export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, CardSelect, CargonetLogo, CargonetLogoProps, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, ServiceAlert, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, TranslationObject, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useMediaQuery, useToast, useTranslation };

package/dist/index.d.ts

@@ -2,8 +2,8 @@ import tokens__default from '@vygruppen/spor-design-tokens';
 import * as tokens from '@vygruppen/spor-design-tokens';
 export { tokens };
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
-import { DividerProps as DividerProps$1, As, BoxProps, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, BreadcrumbProps as BreadcrumbProps$1, ButtonProps as ButtonProps$1, SpaceProps, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ComponentWithAs, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
-export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, CSSWithMultiValues, Center, CenterProps, Collapse, CollapseProps, ComponentStyleConfig, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, ListItem, ListItemProps, ListProps, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, OrderedList, Portal, PortalProps, ScaleFade, ScaleFadeProps, SimpleGrid, SimpleGridProps, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
+import { DividerProps as DividerProps$1, As, BoxProps, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, BreadcrumbProps as BreadcrumbProps$1, ButtonProps as ButtonProps$1, SpaceProps, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ComponentWithAs, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1, useMediaQuery as useMediaQuery$1 } from '@chakra-ui/react';
+export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, CSSWithMultiValues, Center, CenterProps, Collapse, CollapseProps, ComponentStyleConfig, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, ListItem, ListItemProps, ListProps, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, OrderedList, Portal, PortalProps, ScaleFade, ScaleFadeProps, SimpleGrid, SimpleGridProps, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import React, { ChangeEvent } from 'react';
 import * as _chakra_ui_breadcrumb_dist_breadcrumb_link from '@chakra-ui/breadcrumb/dist/breadcrumb-link';
 import * as _chakra_ui_breadcrumb_dist_breadcrumb_item from '@chakra-ui/breadcrumb/dist/breadcrumb-item';
@@ -2727,6 +2727,10 @@ declare const theme: {
                 "global-deviation": {
                     container: {
                         _hover: {
+                            backgroundColor: string;
+                            outlineColor: string;
+                        };
+                        _focus: {
                             outlineColor: string;
                         };
                         _active: {
@@ -9449,6 +9453,13 @@ type TextProps = Omit<TextProps$1, "textStyle"> & {
  */
 declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", TextProps>;
 
+/** This file works as a proxy for all Chakra UI exports */
+
+/**
+ * @deprecated useMediaQuery is deprecated. Use CSS only to determine the media query. - SSR is not supported and usage of useMediaQuery for rendering will cause hydration errors.
+ */
+declare const useMediaQuery: typeof useMediaQuery$1;
+
 /**
  * Makes a slug-version of any string.
  *
@@ -9460,4 +9471,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
  **/
 declare function slugify(text: string | string[], maxLength?: number): string;
 
-export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, CardSelect, CargonetLogo, CargonetLogoProps, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, ServiceAlert, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, TranslationObject, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };
+export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, CardSelect, CargonetLogo, CargonetLogoProps, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, ServiceAlert, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, TranslationObject, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useMediaQuery, useToast, useTranslation };

package/dist/index.js

@@ -12366,23 +12366,27 @@ var init_alert_service = __esm({
         "global-deviation": {
           container: {
             _hover: {
-              outlineColor: "primrose"
+              backgroundColor: "teal.600",
+              outlineColor: "teal.600"
+            },
+            _focus: {
+              outlineColor: "green.500"
             },
             _active: {
-              backgroundColor: "blonde",
-              outlineColor: "primrose"
+              backgroundColor: "teal.400",
+              outlineColor: "pine"
             },
-            color: "darkGrey"
+            color: "white"
           },
           outerBox: {
-            outlineColor: "primrose",
-            backgroundColor: "blonde"
+            outlineColor: "blueGreen",
+            backgroundColor: "darkTeal"
           },
           notificationText: {
-            color: "darkGrey"
+            color: "white"
           },
           serviceMessageContent: {
-            color: "darkGrey"
+            color: "white"
           }
         },
         service: {
@@ -16930,9 +16934,11 @@ var init_dist9 = __esm({
     useSafeLayoutEffect = Boolean(globalThis == null ? void 0 : globalThis.document) ? React86.useLayoutEffect : React86.useEffect;
   }
 });
+exports.useMediaQuery = void 0;
 var init_externals = __esm({
   "src/util/externals.tsx"() {
     init_dist9();
+    exports.useMediaQuery = react.useMediaQuery;
   }
 });
 
@@ -17240,10 +17246,6 @@ Object.defineProperty(exports, 'useDisclosure', {
   enumerable: true,
   get: function () { return react.useDisclosure; }
 });
-Object.defineProperty(exports, 'useMediaQuery', {
-  enumerable: true,
-  get: function () { return react.useMediaQuery; }
-});
 Object.defineProperty(exports, 'useMergeRefs', {
   enumerable: true,
   get: function () { return react.useMergeRefs; }

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-ILLONWJI.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-FBD6IXFW.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "11.0.3",
+  "version": "11.0.5",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

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

@@ -43,23 +43,27 @@ const config = helpers.defineMultiStyleConfig({
     "global-deviation": {
       container: {
         _hover: {
-          outlineColor: "primrose",
+          backgroundColor: "teal.600",
+          outlineColor: "teal.600",
+        },
+        _focus: {
+          outlineColor: "green.500",
         },
         _active: {
-          backgroundColor: "blonde",
-          outlineColor: "primrose",
+          backgroundColor: "teal.400",
+          outlineColor: "pine",
         },
-        color: "darkGrey",
+        color: "white",
       },
       outerBox: {
-        outlineColor: "primrose",
-        backgroundColor: "blonde",
+        outlineColor: "blueGreen",
+        backgroundColor: "darkTeal",
       },
       notificationText: {
-        color: "darkGrey",
+        color: "white",
       },
       serviceMessageContent: {
-        color: "darkGrey",
+        color: "white",
       },
     },
     service: {

package/src/util/externals.tsx

@@ -12,7 +12,6 @@ export {
   useColorModeValue,
   useControllableProp,
   useDisclosure,
-  useMediaQuery,
   useMergeRefs,
   useOutsideClick,
   usePrefersReducedMotion,
@@ -27,4 +26,11 @@ export type {
   UseDisclosureProps,
   UseOutsideClickProps,
 } from "@chakra-ui/react";
+import { useMediaQuery as useMediaQueryChakra } from "@chakra-ui/react";
+
+/**
+ * @deprecated useMediaQuery is deprecated. Use CSS only to determine the media query. - SSR is not supported and usage of useMediaQuery for rendering will cause hydration errors.
+ */
+export const useMediaQuery = useMediaQueryChakra;
+
 export { useSize } from "@chakra-ui/react-use-size";