@vygruppen/spor-react 3.5.1 → 3.6.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.5.1 build
+> @vygruppen/spor-react@3.6.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,14 +9,14 @@
 CJS Build start
 ESM Build start
 DTS Build start
-"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-HZ6V7HFA.mjs".
 "toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/index.js".
+"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-ESGJSWZ3.mjs".
+CJS dist/index.js 532.57 KB
+CJS ⚡️ Build success in 4314ms
 ESM dist/index.mjs                      2.06 KB
-ESM dist/CountryCodeSelect-IS3VUSPZ.mjs 1.19 KB
-ESM dist/chunk-HZ6V7HFA.mjs             425.35 KB
-ESM ⚡️ Build success in 5965ms
-CJS dist/index.js 531.62 KB
-CJS ⚡️ Build success in 5966ms
-DTS ⚡️ Build success in 23687ms
-DTS dist/index.d.ts  253.60 KB
-DTS dist/index.d.mts 253.60 KB
+ESM dist/CountryCodeSelect-V4MXCPSH.mjs 1.19 KB
+ESM dist/chunk-ESGJSWZ3.mjs             426.03 KB
+ESM ⚡️ Build success in 4318ms
+DTS ⚡️ Build success in 22259ms
+DTS dist/index.d.ts  254.26 KB
+DTS dist/index.d.mts 254.26 KB

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @vygruppen/spor-react
 
+## 3.6.0
+
+### Minor Changes
+
+- 8d2cf4d3: Divider: Implement size and variant props
+
+### Patch Changes
+
+- 1d30e122: Icons: Re-add viewBox prop to all icons, making them scalable
+  ExpandableAlert: Ensure the text size is equal across title and content
+- Updated dependencies [1d30e122]
+  - @vygruppen/spor-icon-react@3.2.3
+
+## 3.5.2
+
+### Patch Changes
+
+- cfa3ebb1: ExpandableAlert: Fix double padding bug
+  Other:
+
+  - Set the document-level line height to a valid value
+  - Fix a bug with icon generation
+
+- Updated dependencies [cfa3ebb1]
+  - @vygruppen/spor-icon-react@3.2.2
+
 ## 3.5.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-IS3VUSPZ.mjs → CountryCodeSelect-V4MXCPSH.mjs}

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

package/dist/{chunk-HZ6V7HFA.mjs → chunk-ESGJSWZ3.mjs}

@@ -1,4 +1,4 @@
-import { forwardRef, Box, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, useMultiStyleConfig, PopoverAnchor, FormLabel, Flex, useFormControlContext, useBreakpointValue, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, 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, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, useMultiStyleConfig, PopoverAnchor, FormLabel, Flex, useFormControlContext, useBreakpointValue, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, 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, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, HStack, 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, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, VStack, Wrap, WrapItem, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
@@ -770,19 +770,7 @@ var require_lodash = __commonJS({
   }
 });
 var Divider = forwardRef((props, ref) => {
-  return /* @__PURE__ */ React50__default.createElement(
-    Box,
-    {
-      as: "hr",
-      height: "2px",
-      border: "0",
-      borderRadius: "1px",
-      backgroundColor: "blackAlpha.200",
-      width: "100%",
-      ...props,
-      ref
-    }
-  );
+  return /* @__PURE__ */ React50__default.createElement(Divider$1, { ...props, ref });
 });
 var Stack = forwardRef(
   ({ flexDirection, ...props }, ref) => {
@@ -1438,7 +1426,7 @@ var texts5 = createTexts({
 });
 var BaseAlert = ({ variant, children, ...boxProps }) => {
   const styles2 = useMultiStyleConfig("Alert", { variant });
-  return /* @__PURE__ */ React50__default.createElement(Box, { sx: styles2.container, ...boxProps }, children);
+  return /* @__PURE__ */ React50__default.createElement(Box, { __css: styles2.container, ...boxProps }, children);
 };
 
 // src/alert/ClosableAlert.tsx
@@ -1488,7 +1476,7 @@ var ExpandableAlert = ({
   },
   ...boxProps
 }) => {
-  return /* @__PURE__ */ React50__default.createElement(BaseAlert, { variant, paddingX: 0, paddingY: 0, padding: 0, ...boxProps }, /* @__PURE__ */ React50__default.createElement(
+  return /* @__PURE__ */ React50__default.createElement(BaseAlert, { variant, ...boxProps, paddingX: 0, paddingY: 0 }, /* @__PURE__ */ React50__default.createElement(
     Accordion$1,
     {
       onChange: (expandedIndex) => onToggle(expandedIndex === 0),
@@ -1496,14 +1484,14 @@ var ExpandableAlert = ({
       allowToggle: true,
       flexGrow: "1"
     },
-    /* @__PURE__ */ React50__default.createElement(AccordionItem, null, /* @__PURE__ */ React50__default.createElement(AccordionButton, { paddingX: 3, paddingY: 2 }, /* @__PURE__ */ React50__default.createElement(
+    /* @__PURE__ */ React50__default.createElement(AccordionItem, null, /* @__PURE__ */ React50__default.createElement(AccordionButton, { paddingX: 3, paddingY: 2, fontSize: "inherit" }, /* @__PURE__ */ React50__default.createElement(
       Flex,
       {
         justifyContent: "space-between",
         alignItems: "center",
         flexGrow: "1"
       },
-      /* @__PURE__ */ React50__default.createElement(Flex, { as: headingLevel }, /* @__PURE__ */ React50__default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React50__default.createElement(
+      /* @__PURE__ */ React50__default.createElement(Flex, { as: headingLevel, alignItems: "center" }, /* @__PURE__ */ React50__default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React50__default.createElement(
         Box,
         {
           as: "span",
@@ -5095,7 +5083,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React50__default.lazy(() => import('./CountryCodeSelect-IS3VUSPZ.mjs'));
+var LazyCountryCodeSelect = React50__default.lazy(() => import('./CountryCodeSelect-V4MXCPSH.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React50__default.createElement(Radio$1, { ...props, ref });
 });
@@ -10816,6 +10804,7 @@ __export(components_exports, {
   CloseButton: () => close_button_default,
   Code: () => code_default,
   Datepicker: () => datepicker_default,
+  Divider: () => divider_default,
   Drawer: () => drawer_default,
   FloatingActionButton: () => fab_default,
   Form: () => form_default,
@@ -10923,6 +10912,7 @@ var fontWeights = {
   bold: 700
 };
 var lineHeights = {
+  base: tokens10__default.font.style.lg["line-height"],
   normal: tokens10__default.font.style.lg["line-height"]
 };
 var radii2 = {
@@ -11166,34 +11156,34 @@ var config3 = helpers.defineMultiStyleConfig({
   sizes: {
     sm: {
       button: {
-        fontSize: ["mobile.xs", "desktop.xs"],
+        fontSize: ["mobile.xs", null, "desktop.xs"],
         paddingX: 2,
         paddingY: 1
       },
       panel: {
-        fontSize: ["mobile.xs", "desktop.xs"],
+        fontSize: ["mobile.xs", null, "desktop.xs"],
         paddingX: 2
       }
     },
     md: {
       button: {
-        fontSize: ["mobile.sm", "desktop.sm"],
+        fontSize: ["mobile.sm", null, "desktop.sm"],
         paddingX: 3,
         paddingY: 1
       },
       panel: {
-        fontSize: ["mobile.sm", "desktop.sm"],
+        fontSize: ["mobile.sm", null, "desktop.sm"],
         paddingX: 3
       }
     },
     lg: {
       button: {
-        fontSize: ["mobile.sm", "desktop.sm"],
+        fontSize: ["mobile.sm", null, "desktop.sm"],
         paddingX: 3,
         paddingY: 2
       },
       panel: {
-        fontSize: ["mobile.sm", "desktop.sm"],
+        fontSize: ["mobile.sm", null, "desktop.sm"],
         paddingX: 3
       }
     }
@@ -12334,6 +12324,42 @@ var config13 = helpers6.defineMultiStyleConfig({
   }
 });
 var datepicker_default = config13;
+var baseStyle44 = defineStyle((props) => ({
+  borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props)
+}));
+var variantSolid5 = defineStyle({
+  borderStyle: "solid"
+});
+var variantDashed2 = defineStyle({
+  borderStyle: "dashed"
+});
+var variants14 = {
+  solid: variantSolid5,
+  dashed: variantDashed2
+};
+var sizes25 = {
+  sm: {
+    borderWidth: "1px",
+    borderRadius: "0.5px"
+  },
+  md: {
+    borderWidth: "2px",
+    borderRadius: "1px"
+  },
+  lg: {
+    borderWidth: "3px",
+    borderRadius: "1.5px"
+  }
+};
+var divider_default = defineStyleConfig({
+  baseStyle: baseStyle44,
+  variants: variants14,
+  sizes: sizes25,
+  defaultProps: {
+    variant: "solid",
+    size: "md"
+  }
+});
 var helpers7 = createMultiStyleConfigHelpers$1(modalAnatomy.keys);
 var config14 = helpers7.defineMultiStyleConfig({
   baseStyle: (props) => ({

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { BoxProps, As, 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, 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';
+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, 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, Center, CenterProps, Collapse, CollapseProps, 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, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, Popover, PopoverAnchor, PopoverArrow, PopoverArrowProps, PopoverBody, PopoverBodyProps, PopoverCloseButton, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTrigger, 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, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens__default from '@vygruppen/spor-design-tokens';
 import * as tokens from '@vygruppen/spor-design-tokens';
@@ -17,7 +17,10 @@ export { Item, Section } from 'react-stately';
 import * as _chakra_ui_theme_tools_dist_component from '@chakra-ui/theme-tools/dist/component';
 import * as _chakra_ui_styled_system from '@chakra-ui/styled-system';
 
-type DividerProps = BoxProps;
+type DividerProps = DividerProps$1 & {
+    size?: "sm" | "md" | "lg";
+    variant?: "solid" | "dashed";
+};
 /** A dividing line, used to divide content.
  *
  * You can specify margins if you need to give the content some space, or use a `Stack` component to do it for you
@@ -25,6 +28,9 @@ type DividerProps = BoxProps;
  * ```tsx
  * <Divider marginTop={4} marginBottom={6} />
  * ```
+ *
+ * There are three different sizes available: `sm`, `md` and `lg`. The default is `md`.
+ * There are two different variants available: `solid` and `dashed`. The default is `solid`.
  */
 declare const Divider: _chakra_ui_system_dist_system_types.ComponentWithAs<As, BoxProps>;
 
@@ -1990,34 +1996,34 @@ declare const theme: {
             sizes?: {
                 sm: {
                     button: {
-                        fontSize: ("mobile.xs" | "desktop.xs")[];
+                        fontSize: ("mobile.xs" | "desktop.xs" | null)[];
                         paddingX: number;
                         paddingY: number;
                     };
                     panel: {
-                        fontSize: ("mobile.xs" | "desktop.xs")[];
+                        fontSize: ("mobile.xs" | "desktop.xs" | null)[];
                         paddingX: number;
                     };
                 };
                 md: {
                     button: {
-                        fontSize: ("mobile.sm" | "desktop.sm")[];
+                        fontSize: ("mobile.sm" | "desktop.sm" | null)[];
                         paddingX: number;
                         paddingY: number;
                     };
                     panel: {
-                        fontSize: ("mobile.sm" | "desktop.sm")[];
+                        fontSize: ("mobile.sm" | "desktop.sm" | null)[];
                         paddingX: number;
                     };
                 };
                 lg: {
                     button: {
-                        fontSize: ("mobile.sm" | "desktop.sm")[];
+                        fontSize: ("mobile.sm" | "desktop.sm" | null)[];
                         paddingX: number;
                         paddingY: number;
                     };
                     panel: {
-                        fontSize: ("mobile.sm" | "desktop.sm")[];
+                        fontSize: ("mobile.sm" | "desktop.sm" | null)[];
                         paddingX: number;
                     };
                 };
@@ -2163,7 +2169,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "outline" | "solid" | undefined;
+                variant?: "solid" | "outline" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };
@@ -2784,7 +2790,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "outline" | "solid" | undefined;
+                variant?: "solid" | "outline" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };
@@ -2937,6 +2943,38 @@ declare const theme: {
             } | undefined;
             parts: ("dateCell" | "weekdays" | "weekend" | "calendar" | "calendarTriggerButton" | "dateTimeSegment" | "inputLabel" | "wrapper" | "arrow")[];
         };
+        Divider: {
+            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                borderColor: string;
+            }) | undefined;
+            sizes?: {
+                sm: {
+                    borderWidth: string;
+                    borderRadius: string;
+                };
+                md: {
+                    borderWidth: string;
+                    borderRadius: string;
+                };
+                lg: {
+                    borderWidth: string;
+                    borderRadius: string;
+                };
+            } | undefined;
+            variants?: {
+                solid: {
+                    borderStyle: string;
+                };
+                dashed: {
+                    borderStyle: string;
+                };
+            } | undefined;
+            defaultProps?: {
+                size?: "sm" | "md" | "lg" | undefined;
+                variant?: "solid" | "dashed" | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+        };
         Drawer: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 overlay: {
@@ -4511,7 +4549,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | undefined;
-                variant?: "outline" | "solid" | undefined;
+                variant?: "solid" | "outline" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("track" | "container" | "thumb")[];
@@ -5466,28 +5504,6 @@ declare const theme: {
                 colorScheme?: string | undefined;
             } | undefined;
         };
-        Divider: {
-            baseStyle?: {
-                opacity: number;
-                borderColor: string;
-            } | undefined;
-            sizes?: {
-                [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
-            } | undefined;
-            variants?: {
-                solid: {
-                    borderStyle: string;
-                };
-                dashed: {
-                    borderStyle: string;
-                };
-            } | undefined;
-            defaultProps?: {
-                size?: string | number | undefined;
-                variant?: "dashed" | "solid" | undefined;
-                colorScheme?: string | undefined;
-            } | undefined;
-        };
         Editable: {
             baseStyle?: {
                 preview: {
@@ -6515,7 +6531,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | undefined;
-                variant?: "outline" | "solid" | "subtle" | undefined;
+                variant?: "solid" | "outline" | "subtle" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("label" | "container" | "closeButton")[];
@@ -6612,6 +6628,7 @@ declare const theme: {
         bold: number;
     };
     lineHeights: {
+        base: string;
         normal: string;
     };
     radii: {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps, As, 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, 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';
+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, 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, Center, CenterProps, Collapse, CollapseProps, 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, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, Popover, PopoverAnchor, PopoverArrow, PopoverArrowProps, PopoverBody, PopoverBodyProps, PopoverCloseButton, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTrigger, 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, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens__default from '@vygruppen/spor-design-tokens';
 import * as tokens from '@vygruppen/spor-design-tokens';
@@ -17,7 +17,10 @@ export { Item, Section } from 'react-stately';
 import * as _chakra_ui_theme_tools_dist_component from '@chakra-ui/theme-tools/dist/component';
 import * as _chakra_ui_styled_system from '@chakra-ui/styled-system';
 
-type DividerProps = BoxProps;
+type DividerProps = DividerProps$1 & {
+    size?: "sm" | "md" | "lg";
+    variant?: "solid" | "dashed";
+};
 /** A dividing line, used to divide content.
  *
  * You can specify margins if you need to give the content some space, or use a `Stack` component to do it for you
@@ -25,6 +28,9 @@ type DividerProps = BoxProps;
  * ```tsx
  * <Divider marginTop={4} marginBottom={6} />
  * ```
+ *
+ * There are three different sizes available: `sm`, `md` and `lg`. The default is `md`.
+ * There are two different variants available: `solid` and `dashed`. The default is `solid`.
  */
 declare const Divider: _chakra_ui_system_dist_system_types.ComponentWithAs<As, BoxProps>;
 
@@ -1990,34 +1996,34 @@ declare const theme: {
             sizes?: {
                 sm: {
                     button: {
-                        fontSize: ("mobile.xs" | "desktop.xs")[];
+                        fontSize: ("mobile.xs" | "desktop.xs" | null)[];
                         paddingX: number;
                         paddingY: number;
                     };
                     panel: {
-                        fontSize: ("mobile.xs" | "desktop.xs")[];
+                        fontSize: ("mobile.xs" | "desktop.xs" | null)[];
                         paddingX: number;
                     };
                 };
                 md: {
                     button: {
-                        fontSize: ("mobile.sm" | "desktop.sm")[];
+                        fontSize: ("mobile.sm" | "desktop.sm" | null)[];
                         paddingX: number;
                         paddingY: number;
                     };
                     panel: {
-                        fontSize: ("mobile.sm" | "desktop.sm")[];
+                        fontSize: ("mobile.sm" | "desktop.sm" | null)[];
                         paddingX: number;
                     };
                 };
                 lg: {
                     button: {
-                        fontSize: ("mobile.sm" | "desktop.sm")[];
+                        fontSize: ("mobile.sm" | "desktop.sm" | null)[];
                         paddingX: number;
                         paddingY: number;
                     };
                     panel: {
-                        fontSize: ("mobile.sm" | "desktop.sm")[];
+                        fontSize: ("mobile.sm" | "desktop.sm" | null)[];
                         paddingX: number;
                     };
                 };
@@ -2163,7 +2169,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "outline" | "solid" | undefined;
+                variant?: "solid" | "outline" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };
@@ -2784,7 +2790,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "outline" | "solid" | undefined;
+                variant?: "solid" | "outline" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };
@@ -2937,6 +2943,38 @@ declare const theme: {
             } | undefined;
             parts: ("dateCell" | "weekdays" | "weekend" | "calendar" | "calendarTriggerButton" | "dateTimeSegment" | "inputLabel" | "wrapper" | "arrow")[];
         };
+        Divider: {
+            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                borderColor: string;
+            }) | undefined;
+            sizes?: {
+                sm: {
+                    borderWidth: string;
+                    borderRadius: string;
+                };
+                md: {
+                    borderWidth: string;
+                    borderRadius: string;
+                };
+                lg: {
+                    borderWidth: string;
+                    borderRadius: string;
+                };
+            } | undefined;
+            variants?: {
+                solid: {
+                    borderStyle: string;
+                };
+                dashed: {
+                    borderStyle: string;
+                };
+            } | undefined;
+            defaultProps?: {
+                size?: "sm" | "md" | "lg" | undefined;
+                variant?: "solid" | "dashed" | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+        };
         Drawer: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 overlay: {
@@ -4511,7 +4549,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | undefined;
-                variant?: "outline" | "solid" | undefined;
+                variant?: "solid" | "outline" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("track" | "container" | "thumb")[];
@@ -5466,28 +5504,6 @@ declare const theme: {
                 colorScheme?: string | undefined;
             } | undefined;
         };
-        Divider: {
-            baseStyle?: {
-                opacity: number;
-                borderColor: string;
-            } | undefined;
-            sizes?: {
-                [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
-            } | undefined;
-            variants?: {
-                solid: {
-                    borderStyle: string;
-                };
-                dashed: {
-                    borderStyle: string;
-                };
-            } | undefined;
-            defaultProps?: {
-                size?: string | number | undefined;
-                variant?: "dashed" | "solid" | undefined;
-                colorScheme?: string | undefined;
-            } | undefined;
-        };
         Editable: {
             baseStyle?: {
                 preview: {
@@ -6515,7 +6531,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | undefined;
-                variant?: "outline" | "solid" | "subtle" | undefined;
+                variant?: "solid" | "outline" | "subtle" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("label" | "container" | "closeButton")[];
@@ -6612,6 +6628,7 @@ declare const theme: {
         bold: number;
     };
     lineHeights: {
+        base: string;
         normal: string;
     };
     radii: {

package/dist/index.js

@@ -72,19 +72,7 @@ exports.Divider = void 0;
 var init_Divider = __esm({
   "src/layout/Divider.tsx"() {
     exports.Divider = react.forwardRef((props, ref) => {
-      return /* @__PURE__ */ React50__namespace.default.createElement(
-        react.Box,
-        {
-          as: "hr",
-          height: "2px",
-          border: "0",
-          borderRadius: "1px",
-          backgroundColor: "blackAlpha.200",
-          width: "100%",
-          ...props,
-          ref
-        }
-      );
+      return /* @__PURE__ */ React50__namespace.default.createElement(react.Divider, { ...props, ref });
     });
   }
 });
@@ -958,7 +946,7 @@ var init_BaseAlert = __esm({
   "src/alert/BaseAlert.tsx"() {
     BaseAlert = ({ variant, children, ...boxProps }) => {
       const styles2 = react.useMultiStyleConfig("Alert", { variant });
-      return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { sx: styles2.container, ...boxProps }, children);
+      return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { __css: styles2.container, ...boxProps }, children);
     };
   }
 });
@@ -1022,7 +1010,7 @@ var init_ExpandableAlert = __esm({
       },
       ...boxProps
     }) => {
-      return /* @__PURE__ */ React50__namespace.default.createElement(BaseAlert, { variant, paddingX: 0, paddingY: 0, padding: 0, ...boxProps }, /* @__PURE__ */ React50__namespace.default.createElement(
+      return /* @__PURE__ */ React50__namespace.default.createElement(BaseAlert, { variant, ...boxProps, paddingX: 0, paddingY: 0 }, /* @__PURE__ */ React50__namespace.default.createElement(
         react.Accordion,
         {
           onChange: (expandedIndex) => onToggle(expandedIndex === 0),
@@ -1030,14 +1018,14 @@ var init_ExpandableAlert = __esm({
           allowToggle: true,
           flexGrow: "1"
         },
-        /* @__PURE__ */ React50__namespace.default.createElement(react.AccordionItem, null, /* @__PURE__ */ React50__namespace.default.createElement(react.AccordionButton, { paddingX: 3, paddingY: 2 }, /* @__PURE__ */ React50__namespace.default.createElement(
+        /* @__PURE__ */ React50__namespace.default.createElement(react.AccordionItem, null, /* @__PURE__ */ React50__namespace.default.createElement(react.AccordionButton, { paddingX: 3, paddingY: 2, fontSize: "inherit" }, /* @__PURE__ */ React50__namespace.default.createElement(
           react.Flex,
           {
             justifyContent: "space-between",
             alignItems: "center",
             flexGrow: "1"
           },
-          /* @__PURE__ */ React50__namespace.default.createElement(react.Flex, { as: headingLevel }, /* @__PURE__ */ React50__namespace.default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React50__namespace.default.createElement(
+          /* @__PURE__ */ React50__namespace.default.createElement(react.Flex, { as: headingLevel, alignItems: "center" }, /* @__PURE__ */ React50__namespace.default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React50__namespace.default.createElement(
             react.Box,
             {
               as: "span",
@@ -12327,6 +12315,7 @@ var lineHeights;
 var init_lineHeights = __esm({
   "src/theme/foundations/lineHeights.ts"() {
     lineHeights = {
+      base: tokens10__namespace.default.font.style.lg["line-height"],
       normal: tokens10__namespace.default.font.style.lg["line-height"]
     };
   }
@@ -12644,34 +12633,34 @@ var init_accordion2 = __esm({
       sizes: {
         sm: {
           button: {
-            fontSize: ["mobile.xs", "desktop.xs"],
+            fontSize: ["mobile.xs", null, "desktop.xs"],
             paddingX: 2,
             paddingY: 1
           },
           panel: {
-            fontSize: ["mobile.xs", "desktop.xs"],
+            fontSize: ["mobile.xs", null, "desktop.xs"],
             paddingX: 2
           }
         },
         md: {
           button: {
-            fontSize: ["mobile.sm", "desktop.sm"],
+            fontSize: ["mobile.sm", null, "desktop.sm"],
             paddingX: 3,
             paddingY: 1
           },
           panel: {
-            fontSize: ["mobile.sm", "desktop.sm"],
+            fontSize: ["mobile.sm", null, "desktop.sm"],
             paddingX: 3
           }
         },
         lg: {
           button: {
-            fontSize: ["mobile.sm", "desktop.sm"],
+            fontSize: ["mobile.sm", null, "desktop.sm"],
             paddingX: 3,
             paddingY: 2
           },
           panel: {
-            fontSize: ["mobile.sm", "desktop.sm"],
+            fontSize: ["mobile.sm", null, "desktop.sm"],
             paddingX: 3
           }
         }
@@ -13892,6 +13881,48 @@ var init_datepicker2 = __esm({
     datepicker_default = config13;
   }
 });
+var baseStyle44, variantSolid5, variantDashed2, variants14, sizes25, divider_default;
+var init_divider = __esm({
+  "src/theme/components/divider.ts"() {
+    init_dist3();
+    baseStyle44 = defineStyle((props) => ({
+      borderColor: themeTools.mode("blackAlpha.300", "whiteAlpha.300")(props)
+    }));
+    variantSolid5 = defineStyle({
+      borderStyle: "solid"
+    });
+    variantDashed2 = defineStyle({
+      borderStyle: "dashed"
+    });
+    variants14 = {
+      solid: variantSolid5,
+      dashed: variantDashed2
+    };
+    sizes25 = {
+      sm: {
+        borderWidth: "1px",
+        borderRadius: "0.5px"
+      },
+      md: {
+        borderWidth: "2px",
+        borderRadius: "1px"
+      },
+      lg: {
+        borderWidth: "3px",
+        borderRadius: "1.5px"
+      }
+    };
+    divider_default = defineStyleConfig({
+      baseStyle: baseStyle44,
+      variants: variants14,
+      sizes: sizes25,
+      defaultProps: {
+        variant: "solid",
+        size: "md"
+      }
+    });
+  }
+});
 function getSize5(value) {
   if (value === "full") {
     return {
@@ -16386,6 +16417,7 @@ __export(components_exports, {
   CloseButton: () => close_button_default,
   Code: () => code_default,
   Datepicker: () => datepicker_default,
+  Divider: () => divider_default,
   Drawer: () => drawer_default,
   FloatingActionButton: () => fab_default,
   Form: () => form_default,
@@ -16424,6 +16456,7 @@ var init_components = __esm({
     init_close_button();
     init_code();
     init_datepicker2();
+    init_divider();
     init_drawer();
     init_fab();
     init_form();

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, 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, 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, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-HZ6V7HFA.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, 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, 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, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-ESGJSWZ3.mjs';

package/package.json

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

package/src/alert/BaseAlert.tsx

@@ -14,7 +14,7 @@ export type BaseAlertProps = BoxProps & {
 export const BaseAlert = ({ variant, children, ...boxProps }: BaseAlertProps) => {
   const styles = useMultiStyleConfig("Alert", { variant });
   return (
-    <Box sx={styles.container} {...boxProps}>
+    <Box __css={styles.container} {...boxProps}>
       {children}
     </Box>
   );

package/src/alert/ExpandableAlert.tsx

@@ -45,7 +45,7 @@ export const ExpandableAlert = ({
   ...boxProps
 }: ExpandableAlertProps) => {
   return (
-    <BaseAlert variant={variant} paddingX={0} paddingY={0} padding={0} {...boxProps}>
+    <BaseAlert variant={variant} {...boxProps} paddingX={0} paddingY={0}>
       <Accordion
         onChange={(expandedIndex) => onToggle(expandedIndex === 0)}
         defaultIndex={defaultOpen ? 0 : -1}
@@ -53,13 +53,13 @@ export const ExpandableAlert = ({
         flexGrow="1"
       >
         <AccordionItem>
-          <AccordionButton paddingX={3} paddingY={2}>
+          <AccordionButton paddingX={3} paddingY={2} fontSize="inherit">
             <Flex
               justifyContent="space-between"
               alignItems="center"
               flexGrow="1"
             >
-              <Flex as={headingLevel}>
+              <Flex as={headingLevel} alignItems="center">
                 <AlertIcon variant={variant} />
                 <Box
                   as="span"

package/src/layout/Divider.tsx

@@ -1,7 +1,16 @@
-import { As, Box, BoxProps, forwardRef } from "@chakra-ui/react";
+import {
+  As,
+  BoxProps,
+  Divider as ChakraDivider,
+  DividerProps as ChakraDividerProps,
+  forwardRef,
+} from "@chakra-ui/react";
 import React from "react";
 
-export type DividerProps = BoxProps;
+export type DividerProps = ChakraDividerProps & {
+  size?: "sm" | "md" | "lg";
+  variant?: "solid" | "dashed";
+};
 /** A dividing line, used to divide content.
  *
  * You can specify margins if you need to give the content some space, or use a `Stack` component to do it for you
@@ -9,18 +18,10 @@ export type DividerProps = BoxProps;
  * ```tsx
  * <Divider marginTop={4} marginBottom={6} />
  * ```
+ *
+ * There are three different sizes available: `sm`, `md` and `lg`. The default is `md`.
+ * There are two different variants available: `solid` and `dashed`. The default is `solid`.
  */
 export const Divider = forwardRef<BoxProps, As>((props, ref) => {
-  return (
-    <Box
-      as="hr"
-      height="2px"
-      border="0"
-      borderRadius="1px"
-      backgroundColor="blackAlpha.200"
-      width="100%"
-      {...props}
-      ref={ref}
-    />
-  );
+  return <ChakraDivider {...props} ref={ref} />;
 });

package/src/theme/components/accordion.ts

@@ -107,34 +107,34 @@ const config = helpers.defineMultiStyleConfig({
   sizes: {
     sm: {
       button: {
-        fontSize: ["mobile.xs", "desktop.xs"],
+        fontSize: ["mobile.xs", null, "desktop.xs"],
         paddingX: 2,
         paddingY: 1,
       },
       panel: {
-        fontSize: ["mobile.xs", "desktop.xs"],
+        fontSize: ["mobile.xs", null, "desktop.xs"],
         paddingX: 2,
       },
     },
     md: {
       button: {
-        fontSize: ["mobile.sm", "desktop.sm"],
+        fontSize: ["mobile.sm", null, "desktop.sm"],
         paddingX: 3,
         paddingY: 1,
       },
       panel: {
-        fontSize: ["mobile.sm", "desktop.sm"],
+        fontSize: ["mobile.sm", null, "desktop.sm"],
         paddingX: 3,
       },
     },
     lg: {
       button: {
-        fontSize: ["mobile.sm", "desktop.sm"],
+        fontSize: ["mobile.sm", null, "desktop.sm"],
         paddingX: 3,
         paddingY: 2,
       },
       panel: {
-        fontSize: ["mobile.sm", "desktop.sm"],
+        fontSize: ["mobile.sm", null, "desktop.sm"],
         paddingX: 3,
       },
     },

package/src/theme/components/divider.ts

@@ -0,0 +1,44 @@
+import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system"
+import { mode } from "@chakra-ui/theme-tools"
+
+const baseStyle = defineStyle(props => ({
+  borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props)
+}))
+
+const variantSolid = defineStyle({
+  borderStyle: "solid",
+})
+
+const variantDashed = defineStyle({
+  borderStyle: "dashed",
+})
+
+const variants = {
+  solid: variantSolid,
+  dashed: variantDashed,
+}
+
+const sizes = {
+  sm: {
+    borderWidth: '1px',
+    borderRadius: '0.5px',
+  },
+  md: {
+    borderWidth: '2px',
+    borderRadius: '1px',
+  },
+  lg: {
+    borderWidth: '3px',
+    borderRadius: '1.5px',
+  },
+}
+
+export default defineStyleConfig({
+  baseStyle,
+  variants,
+  sizes,
+  defaultProps: {
+    variant: "solid",
+    size: 'md',
+  },
+})

package/src/theme/components/index.ts

@@ -10,6 +10,7 @@ export { default as ChoiceChip } from "./choice-chip";
 export { default as CloseButton } from "./close-button";
 export { default as Code } from "./code";
 export { default as Datepicker } from "./datepicker";
+export { default as Divider } from "./divider";
 export { default as Drawer } from "./drawer";
 export { default as FloatingActionButton } from "./fab";
 export { default as Form } from "./form";
@@ -33,3 +34,4 @@ export { default as Tabs } from "./tabs";
 export { default as Textarea } from "./textarea";
 export { default as Toast } from "./toast";
 export { default as TravelTag } from "./travel-tag";
+

package/src/theme/foundations/lineHeights.ts

@@ -1,5 +1,6 @@
 import tokens from "@vygruppen/spor-design-tokens";
 
 export const lineHeights = {
+  base: tokens.font.style.lg["line-height"],
   normal: tokens.font.style.lg["line-height"],
 };