@vygruppen/spor-react 9.6.2 → 9.6.4

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@9.6.2 build
+> @vygruppen/spor-react@9.6.4 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,11 +10,11 @@
 ESM Build start
 DTS Build start
 ESM dist/index.mjs                      2.08 KB
-ESM dist/CountryCodeSelect-EZTV452W.mjs 1.19 KB
-ESM dist/chunk-7VZBL2PP.mjs             396.18 KB
-ESM ⚡️ Build success in 2224ms
-CJS dist/index.js 506.01 KB
-CJS ⚡️ Build success in 2225ms
-DTS ⚡️ Build success in 13063ms
-DTS dist/index.d.ts  348.14 KB
-DTS dist/index.d.mts 348.14 KB
+ESM dist/CountryCodeSelect-7H2EVFV3.mjs 1.19 KB
+ESM dist/chunk-V5JHGMIB.mjs             396.29 KB
+ESM ⚡️ Build success in 2241ms
+CJS dist/index.js 506.14 KB
+CJS ⚡️ Build success in 2242ms
+DTS ⚡️ Build success in 12386ms
+DTS dist/index.d.ts  348.30 KB
+DTS dist/index.d.mts 348.30 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vygruppen/spor-react
 
+## 9.6.4
+
+### Patch Changes
+
+- 457fd2a: Stop Card from disregarding allowed styling related props
+
+## 9.6.3
+
+### Patch Changes
+
+- d998cb8: Improve layout of tables when content overflow and in responsive views
+
 ## 9.6.2
 
 ### Patch Changes

package/dist/{CountryCodeSelect-EZTV452W.mjs → CountryCodeSelect-7H2EVFV3.mjs}

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

package/dist/{chunk-7VZBL2PP.mjs → chunk-V5JHGMIB.mjs}

@@ -1,7 +1,7 @@
 import tokens11__default from '@vygruppen/spor-design-tokens';
 import * as tokens11 from '@vygruppen/spor-design-tokens';
 export { tokens11 as tokens };
-import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, useStyleConfig, Box, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, chakra, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, 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, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, 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, useStyleConfig, Box, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, 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, Button as Button$1, 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, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, 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';
 import * as React71 from 'react';
 import React71__default, { createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, useId, Suspense, useContext, useCallback, useMemo, useLayoutEffect } from 'react';
@@ -1553,7 +1553,7 @@ var Card = forwardRef(
       colorScheme,
       size: size2
     });
-    return /* @__PURE__ */ React71__default.createElement(chakra.div, { sx: styles3, ...props, ref }, children);
+    return /* @__PURE__ */ React71__default.createElement(Box, { __css: styles3, ...props, ref }, children);
   }
 );
 var StaticCard = ({ colorScheme, ...props }) => {
@@ -3365,7 +3365,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React71__default.lazy(() => import('./CountryCodeSelect-EZTV452W.mjs'));
+var LazyCountryCodeSelect = React71__default.lazy(() => import('./CountryCodeSelect-7H2EVFV3.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React71__default.createElement(Radio$1, { ...props, ref });
 });
@@ -4587,7 +4587,7 @@ var Tabs = forwardRef((props, ref) => {
 });
 var Table = forwardRef((props, ref) => {
   const { variant, size: size2, colorScheme, children, ...rest } = props;
-  return /* @__PURE__ */ React71__default.createElement(Box, { ...rest, ...getStyleProps(props) }, /* @__PURE__ */ React71__default.createElement(Box, { overflowX: "auto" }, /* @__PURE__ */ React71__default.createElement(
+  return /* @__PURE__ */ React71__default.createElement(Box, { ...rest, ...getStyleProps(props) }, /* @__PURE__ */ React71__default.createElement(Box, { overflowX: "auto", role: "region" }, /* @__PURE__ */ React71__default.createElement(
     Table$1,
     {
       variant,
@@ -13189,14 +13189,18 @@ var config38 = helpers28.defineMultiStyleConfig({
     table: {
       borderCollapse: "collapse",
       ...baseText("default", props),
-      width: "100%"
+      width: "100%",
+      minWidth: "600px"
     },
     th: {
       fontWeight: "bold",
-      textAlign: "start"
+      textAlign: "start",
+      verticalAlign: "top",
+      minWidth: "68px"
     },
     td: {
-      textAlign: "start"
+      textAlign: "start",
+      verticalAlign: "top"
     },
     tfoot: {
       tr: {

package/dist/index.d.mts

@@ -6393,15 +6393,19 @@ declare const theme: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 table: {
                     width: string;
+                    minWidth: string;
                     color: string;
                     borderCollapse: string;
                 };
                 th: {
                     fontWeight: string;
                     textAlign: string;
+                    verticalAlign: string;
+                    minWidth: string;
                 };
                 td: {
                     textAlign: string;
+                    verticalAlign: string;
                 };
                 tfoot: {
                     tr: {

package/dist/index.d.ts

@@ -6393,15 +6393,19 @@ declare const theme: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 table: {
                     width: string;
+                    minWidth: string;
                     color: string;
                     borderCollapse: string;
                 };
                 th: {
                     fontWeight: string;
                     textAlign: string;
+                    verticalAlign: string;
+                    minWidth: string;
                 };
                 td: {
                     textAlign: string;
+                    verticalAlign: string;
                 };
                 tfoot: {
                     tr: {

package/dist/index.js

@@ -1123,7 +1123,7 @@ var init_Card = __esm({
           colorScheme,
           size: size2
         });
-        return /* @__PURE__ */ React71__namespace.default.createElement(react.chakra.div, { sx: styles3, ...props, ref }, children);
+        return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { __css: styles3, ...props, ref }, children);
       }
     );
   }
@@ -5511,7 +5511,7 @@ var init_Table = __esm({
   "src/table/Table.tsx"() {
     exports.Table = react.forwardRef((props, ref) => {
       const { variant, size: size2, colorScheme, children, ...rest } = props;
-      return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { ...rest, ...getStyleProps(props) }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { overflowX: "auto" }, /* @__PURE__ */ React71__namespace.default.createElement(
+      return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { ...rest, ...getStyleProps(props) }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { overflowX: "auto", role: "region" }, /* @__PURE__ */ React71__namespace.default.createElement(
         react.Table,
         {
           variant,
@@ -14962,14 +14962,18 @@ var init_table2 = __esm({
         table: {
           borderCollapse: "collapse",
           ...baseText("default", props),
-          width: "100%"
+          width: "100%",
+          minWidth: "600px"
         },
         th: {
           fontWeight: "bold",
-          textAlign: "start"
+          textAlign: "start",
+          verticalAlign: "top",
+          minWidth: "68px"
         },
         td: {
-          textAlign: "start"
+          textAlign: "start",
+          verticalAlign: "top"
         },
         tfoot: {
           tr: {

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, 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, 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, RadioGroup, ScaleFade, SearchInput, Section, 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, 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-7VZBL2PP.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, 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, 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, RadioGroup, ScaleFade, SearchInput, Section, 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, 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-V5JHGMIB.mjs';

package/package.json

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

package/src/card/Card.tsx

@@ -1,6 +1,11 @@
-import { As, chakra, forwardRef, useStyleConfig } from "@chakra-ui/react";
+import {
+  As,
+  Box,
+  BoxProps,
+  forwardRef,
+  useStyleConfig,
+} from "@chakra-ui/react";
 import React from "react";
-import { BoxProps } from "../layout";
 
 export type CardProps = Exclude<BoxProps, "size"> & {
   size?: "sm" | "lg";
@@ -53,9 +58,9 @@ export const Card = forwardRef<CardProps, As>(
     });
 
     return (
-      <chakra.div sx={styles} {...props} ref={ref}>
+      <Box __css={styles} {...props} ref={ref}>
         {children}
-      </chakra.div>
+      </Box>
     );
   },
 );

package/src/table/Table.tsx

@@ -32,7 +32,7 @@ export const Table = forwardRef<TableProps, "table">((props, ref) => {
   const { variant, size, colorScheme, children, ...rest } = props;
   return (
     <Box {...rest} {...getStyleProps(props)}>
-      <Box overflowX="auto">
+      <Box overflowX="auto" role="region">
         <ChakraTable
           variant={variant}
           size={size}

package/src/theme/components/table.ts

@@ -17,13 +17,17 @@ const config = helpers.defineMultiStyleConfig({
       borderCollapse: "collapse",
       ...baseText("default", props),
       width: "100%",
+      minWidth: "600px",
     },
     th: {
       fontWeight: "bold",
       textAlign: "start",
+      verticalAlign: "top",
+      minWidth: "68px",
     },
     td: {
       textAlign: "start",
+      verticalAlign: "top",
     },
     tfoot: {
       tr: {