@vygruppen/spor-react 3.5.0 → 3.5.2

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-ELSHBTSG.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-HDXTKAGQ.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "3.5.0",
+  "version": "3.5.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -25,18 +25,19 @@
     "@vygruppen/spor-design-tokens": "*",
     "@vygruppen/spor-icon-react": "*",
     "@vygruppen/spor-loader": "*",
-    "framer-motion": ">6.0.0",
+    "awesome-phonenumber": "^5.10.0",
+    "framer-motion": "^10.16.4",
     "lottie-react": "^2.3.1",
     "react-aria": "^3.27.0",
-    "react-stately": "^3.20.0",
+    "react-stately": "^3.25.0",
     "react-swipeable": "^7.0.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tsup": "^6.2.2",
+    "tsup": "^7.2.0",
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.0"

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}
@@ -59,7 +59,7 @@ export const ExpandableAlert = ({
               alignItems="center"
               flexGrow="1"
             >
-              <Flex as={headingLevel}>
+              <Flex as={headingLevel} alignItems="center">
                 <AlertIcon variant={variant} />
                 <Box
                   as="span"

package/src/button/Button.tsx

@@ -121,7 +121,7 @@ export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
           <ColorInlineLoader
             maxWidth={getLoaderWidth(finalSize)}
             width="100%"
-            mx={2}
+            marginX={2}
           />
         </Center>
       )}

package/src/button/FloatingActionButton.tsx

@@ -93,7 +93,7 @@ type ScrollDirection = "up" | "down" | null;
 const useScrollDirection = () => {
   const [scrollDirection, setScrollDirection] =
     React.useState<ScrollDirection>(null);
-  const lastScrollPosition = React.useRef(window.scrollY);
+  const lastScrollPosition = React.useRef(typeof window !== "undefined" ? window.scrollY : 0);
   React.useEffect(() => {
     const onScroll = () => {
       const delta = window.scrollY - lastScrollPosition.current;

package/src/button/IconButton.tsx

@@ -58,7 +58,7 @@ export const IconButton = forwardRef<IconButtonProps, As>(
     <ChakraIconButton
       title={props["aria-label"]}
       {...props}
-      spinner={<ColorSpinner m={1} />}
+      spinner={<ColorSpinner margin={1} />}
       ref={ref}
     />
   )

package/src/datepicker/DateRangePicker.tsx

@@ -136,7 +136,7 @@ export function DateRangePicker({
                 minHeight={minHeight}
               >
                 {!hasTrigger && (
-                  <CalendarOutline24Icon mr={2} alignSelf="center" />
+                  <CalendarOutline24Icon marginRight={2} alignSelf="center" />
                 )}
                 <DateField
                   {...startFieldProps}
@@ -145,7 +145,7 @@ export function DateRangePicker({
                   ref={hasTrigger ? undefined : ref}
                   labelProps={labelProps}
                 />
-                <Box as="span" aria-hidden="true" px="2">
+                <Box as="span" aria-hidden="true" paddingX="2">
                   –
                 </Box>
                 <DateField

package/src/input/ChoiceChip.tsx

@@ -94,7 +94,7 @@ export const ChoiceChip = forwardRef((props: ChoiceChipProps, ref) => {
           {variant !== "icon" && children}
         </chakra.span>
         {variant === "filter" && state.isChecked && (
-          <CloseOutline24Icon ml={1.5} />
+          <CloseOutline24Icon marginLeft={1.5} />
         )}
       </chakra.div>
     </chakra.label>

package/src/input/PasswordInput.tsx

@@ -45,7 +45,7 @@ export const PasswordInput = forwardRef<PasswordInputProps, "input">(
             type="button"
             onClick={onToggle}
             borderRadius="sm"
-            mr={1}
+            marginRight={1}
           >
             {isShowingPassword ? t(texts.hidePassword) : t(texts.showPassword)}
           </Button>

package/src/input/SearchInput.tsx

@@ -39,8 +39,8 @@ export const SearchInput = forwardRef<SearchInputProps, "input">(
           <SearchOutline24Icon />
         </InputLeftElement>
         <ChakraInput
-          pl={7}
-          pr={7}
+          paddingLeft={7}
+          paddingRight={7}
           {...props}
           id={inputId}
           type="search"
@@ -62,7 +62,7 @@ export const SearchInput = forwardRef<SearchInputProps, "input">(
               variant="ghost"
               type="button"
               size="sm"
-              mr={1}
+              marginRight={1}
               aria-label={t(texts.reset)}
               icon={<CloseOutline24Icon />}
               onClick={onReset}

package/src/layout/Divider.tsx

@@ -7,7 +7,7 @@ export type DividerProps = BoxProps;
  * You can specify margins if you need to give the content some space, or use a `Stack` component to do it for you
  *
  * ```tsx
- * <Divider mt={4} mb={6} />
+ * <Divider marginTop={4} marginBottom={6} />
  * ```
  */
 export const Divider = forwardRef<BoxProps, As>((props, ref) => {

package/src/loader/ColorSpinner.tsx

@@ -35,7 +35,7 @@ export const ColorSpinner = ({
         </ClientOnly>
       </Box>
       {children && (
-        <Box mt={3} fontWeight="bold">
+        <Box marginTop={3} fontWeight="bold">
           {children}
         </Box>
       )}

package/src/loader/ContentLoader.tsx

@@ -12,7 +12,7 @@ export type ContentLoaderProps = BoxProps;
 export const ContentLoader = ({ children, ...props }: ContentLoaderProps) => {
   return (
     <Box {...props}>
-      <Box maxWidth="140px" mx="auto">
+      <Box maxWidth="140px" marginX="auto">
         <ClientOnly>
           {() => <Lottie animationData={contentLoaderData} />}
         </ClientOnly>

package/src/loader/LightSpinner.tsx

@@ -29,10 +29,12 @@ export const LightSpinner = ({
   return (
     <Center flexDirection="column" {...props}>
       <Box width={width} maxWidth={maxWidth}>
-        <ClientOnly>{() => <Lottie animationData={spinnerLightData} />}</ClientOnly>
+        <ClientOnly>
+          {() => <Lottie animationData={spinnerLightData} />}
+        </ClientOnly>
       </Box>
       {children && (
-        <Box mt={3} fontWeight="bold">
+        <Box marginTop={3} fontWeight="bold">
           {children}
         </Box>
       )}

package/src/stepper/StepperStep.tsx

@@ -19,7 +19,7 @@ export const StepperStep = ({ children, stepNumber }: StepperStepProps) => {
   return (
     <Box __css={style.stepContainer}>
       {stepNumber > 1 && (
-        <DropdownRightFill18Icon mx={5} display={["none", "block"]} />
+        <DropdownRightFill18Icon marginX={5} display={["none", "block"]} />
       )}
 
       <Flex

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"],
 };