@vygruppen/spor-react 11.0.4 → 11.1.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@11.0.4 build
+> @vygruppen/spor-react@11.1.0 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.17 KB
-CJS ⚡️ Build success in 2253ms
-ESM dist/CountryCodeSelect-RDPS7H5L.mjs 1.22 KB
 ESM dist/index.mjs                      2.16 KB
-ESM dist/chunk-GJ4NLUDN.mjs             428.37 KB
-ESM ⚡️ Build success in 2254ms
-DTS ⚡️ Build success in 15965ms
-DTS dist/index.d.ts  343.20 KB
-DTS dist/index.d.mts 343.20 KB
+ESM dist/CountryCodeSelect-YB3M3566.mjs 1.22 KB
+ESM dist/chunk-FBD6IXFW.mjs             428.46 KB
+ESM ⚡️ Build success in 2283ms
+CJS dist/index.js 542.28 KB
+CJS ⚡️ Build success in 2283ms
+DTS ⚡️ Build success in 15944ms
+DTS dist/index.d.ts  343.31 KB
+DTS dist/index.d.mts 343.31 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vygruppen/spor-react
 
+## 11.1.0
+
+### Minor Changes
+
+- c0a8332: Button: Update props to support margins
+
+## 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

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

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

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

@@ -1844,7 +1844,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-RDPS7H5L.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: {

package/dist/index.d.mts

@@ -2,7 +2,7 @@ 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, useMediaQuery as useMediaQuery$1 } 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, 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';
@@ -428,7 +428,7 @@ declare const Breadcrumb: (props: BreadcrumbProps) => React.JSX.Element;
 declare const BreadcrumbItem: _chakra_ui_system_dist_system_types.ComponentWithAs<"li", _chakra_ui_breadcrumb_dist_breadcrumb_item.BreadcrumbItemProps>;
 declare const BreadcrumbLink: _chakra_ui_system_dist_system_types.ComponentWithAs<"a", _chakra_ui_breadcrumb_dist_breadcrumb_link.BreadcrumbLinkProps>;
 
-type ButtonProps = Omit<Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size" | "variant">, keyof SpaceProps> & {
+type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "size" | "variant"> & {
     /**
      * The size of the button.
      *
@@ -2727,6 +2727,10 @@ declare const theme: {
                 "global-deviation": {
                     container: {
                         _hover: {
+                            backgroundColor: string;
+                            outlineColor: string;
+                        };
+                        _focus: {
                             outlineColor: string;
                         };
                         _active: {

package/dist/index.d.ts

@@ -2,7 +2,7 @@ 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, useMediaQuery as useMediaQuery$1 } 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, 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';
@@ -428,7 +428,7 @@ declare const Breadcrumb: (props: BreadcrumbProps) => React.JSX.Element;
 declare const BreadcrumbItem: _chakra_ui_system_dist_system_types.ComponentWithAs<"li", _chakra_ui_breadcrumb_dist_breadcrumb_item.BreadcrumbItemProps>;
 declare const BreadcrumbLink: _chakra_ui_system_dist_system_types.ComponentWithAs<"a", _chakra_ui_breadcrumb_dist_breadcrumb_link.BreadcrumbLinkProps>;
 
-type ButtonProps = Omit<Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size" | "variant">, keyof SpaceProps> & {
+type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "size" | "variant"> & {
     /**
      * The size of the button.
      *
@@ -2727,6 +2727,10 @@ declare const theme: {
                 "global-deviation": {
                     container: {
                         _hover: {
+                            backgroundColor: string;
+                            outlineColor: string;
+                        };
+                        _focus: {
                             outlineColor: string;
                         };
                         _active: {

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: {

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-GJ4NLUDN.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.4",
+  "version": "11.1.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/button/Button.tsx

@@ -12,12 +12,9 @@ import React from "react";
 import { createTexts, useTranslation } from "../i18n";
 import { ColorInlineLoader } from "../loader";
 
-export type ButtonProps = Omit<
-  Exclude<
-    ChakraButtonProps,
-    "colorScheme" | "loadingText" | "size" | "variant"
-  >,
-  keyof SpaceProps
+export type ButtonProps = Exclude<
+  ChakraButtonProps,
+  "colorScheme" | "size" | "variant"
 > & {
   /**
    * The size of the button.

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: {