@vygruppen/spor-react 3.3.4 → 3.4.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.3.4 build
+> @vygruppen/spor-react@3.4.1 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,13 +9,13 @@
 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-QHD5YJ6K.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-GIXEJPV7.mjs".
+CJS dist/index.js 903.40 KB
+CJS ⚡️ Build success in 4807ms
 ESM dist/index.mjs                      2.01 KB
-ESM dist/CountryCodeSelect-HKZBFK6T.mjs 350.82 KB
-ESM dist/chunk-QHD5YJ6K.mjs             420.68 KB
-ESM ⚡️ Build success in 6202ms
-CJS dist/index.js 903.47 KB
-CJS ⚡️ Build success in 6203ms
-DTS ⚡️ Build success in 23010ms
-DTS dist/index.d.ts 252.39 KB
+ESM dist/CountryCodeSelect-I6MGYQTH.mjs 350.82 KB
+ESM dist/chunk-GIXEJPV7.mjs             420.57 KB
+ESM ⚡️ Build success in 4808ms
+DTS ⚡️ Build success in 18338ms
+DTS dist/index.d.ts 252.53 KB

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @vygruppen/spor-react
 
+## 3.4.1
+
+### Patch Changes
+
+- 83976e0a: Card: Fix a bug with clickable cards that had to have the display property set to not break
+- 4787d9e9: Hotfix breakpoints
+
+## 3.4.0
+
+### Minor Changes
+
+- 349fe0a5: Implement new breakpoint structure
+
+  This change introduces a new breakpoint between sm and md, and changes the breakpoint values slightly.
+
+  When upgrading, please make sure to check your responsive layouts.
+
+### Patch Changes
+
+- b18e847b: Card: Update design for non-interactive cards
+- Updated dependencies [349fe0a5]
+  - @vygruppen/spor-design-tokens@3.2.0
+
 ## 3.3.4
 
 ### Patch Changes

package/dist/{CountryCodeSelect-HKZBFK6T.mjs → CountryCodeSelect-I6MGYQTH.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-QHD5YJ6K.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-GIXEJPV7.mjs';
 import React from 'react';
 
 // ../../node_modules/awesome-phonenumber/index-esm.mjs

package/dist/{chunk-QHD5YJ6K.mjs → chunk-GIXEJPV7.mjs}

@@ -5084,7 +5084,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-HKZBFK6T.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-I6MGYQTH.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });
@@ -10768,11 +10768,12 @@ var borders2 = {
   "lg-dashed": `${tokens10__default.size.stroke.lg} dashed`
 };
 var breakpoints2 = {
+  base: "0px",
   sm: tokens10__default.size.breakpoint.sm,
   md: tokens10__default.size.breakpoint.md,
   lg: tokens10__default.size.breakpoint.lg,
-  xl: tokens10__default.size.breakpoint.lg,
-  "2xl": tokens10__default.size.breakpoint.lg
+  xl: tokens10__default.size.breakpoint.xl,
+  "2xl": tokens10__default.size.breakpoint.xl
 };
 
 // src/theme/foundations/config.ts
@@ -10876,6 +10877,7 @@ var textStyles = {
   "2xl": {
     fontSize: [
       tokens10__default.font.style.xxl["font-size"].mobile,
+      null,
       tokens10__default.font.style.xxl["font-size"].desktop
     ],
     fontFamily: tokens10__default.font.style.xxl["font-family"],
@@ -10884,6 +10886,7 @@ var textStyles = {
   "xl-display": {
     fontSize: [
       tokens10__default.font.style["xl-display"]["font-size"].mobile,
+      null,
       tokens10__default.font.style["xl-display"]["font-size"].desktop
     ],
     fontFamily: tokens10__default.font.style["xl-display"]["font-family"],
@@ -10892,6 +10895,7 @@ var textStyles = {
   "xl-sans": {
     fontSize: [
       tokens10__default.font.style["xl-sans"]["font-size"].mobile,
+      null,
       tokens10__default.font.style["xl-sans"]["font-size"].desktop
     ],
     fontFamily: tokens10__default.font.style["xl-sans"]["font-family"],
@@ -10900,6 +10904,7 @@ var textStyles = {
   lg: {
     fontSize: [
       tokens10__default.font.style.lg["font-size"].mobile,
+      null,
       tokens10__default.font.style.lg["font-size"].desktop
     ],
     fontFamily: tokens10__default.font.style.lg["font-family"],
@@ -10908,6 +10913,7 @@ var textStyles = {
   md: {
     fontSize: [
       tokens10__default.font.style.md["font-size"].mobile,
+      null,
       tokens10__default.font.style.md["font-size"].desktop
     ],
     fontFamily: tokens10__default.font.style.md["font-family"],
@@ -10916,6 +10922,7 @@ var textStyles = {
   sm: {
     fontSize: [
       tokens10__default.font.style.sm["font-size"].mobile,
+      null,
       tokens10__default.font.style.sm["font-size"].desktop
     ],
     fontFamily: tokens10__default.font.style.sm["font-family"],
@@ -10924,6 +10931,7 @@ var textStyles = {
   xs: {
     fontSize: [
       tokens10__default.font.style.xs["font-size"].mobile,
+      null,
       tokens10__default.font.style.xs["font-size"].desktop
     ],
     fontFamily: tokens10__default.font.style.xs["font-family"],
@@ -11447,6 +11455,7 @@ var config7 = defineStyleConfig$1({
     border: "none",
     overflow: "hidden",
     fontSize: "inherit",
+    display: "block",
     transitionProperty: "common",
     transitionDuration: "fast",
     borderRadius: "md",
@@ -11482,28 +11491,24 @@ var config7 = defineStyleConfig$1({
 });
 var card_default = config7;
 function getColorSchemeBaseProps({ colorScheme }) {
-  var _a6, _b5;
+  var _a6;
   switch (colorScheme) {
     case "white":
       return {
-        backgroundColor: "white",
-        boxShadow: getBoxShadowString({
-          borderColor: "silver"
-        })
+        backgroundColor: "lightGrey"
       };
     case "grey":
       return {
-        backgroundColor: "lightGrey",
-        boxShadow: getBoxShadowString({
-          borderColor: "steel"
-        })
+        backgroundColor: "lightGrey"
+      };
+    case "green": {
+      return {
+        backgroundColor: "seaMist"
       };
+    }
     default:
       return {
-        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum",
-        boxShadow: getBoxShadowString({
-          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[200]) ?? "silver"
-        })
+        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum"
       };
   }
 }

package/dist/index.d.ts

@@ -1891,37 +1891,37 @@ type ColorsType = typeof tokens__default.color.alias & typeof tokens__default.co
 
 declare const textStyles: {
     "2xl": {
-        fontSize: string[];
+        fontSize: (string | null)[];
         fontFamily: string;
         lineHeight: string;
     };
     "xl-display": {
-        fontSize: string[];
+        fontSize: (string | null)[];
         fontFamily: string;
         lineHeight: string;
     };
     "xl-sans": {
-        fontSize: string[];
+        fontSize: (string | null)[];
         fontFamily: string;
         lineHeight: string;
     };
     lg: {
-        fontSize: string[];
+        fontSize: (string | null)[];
         fontFamily: string;
         lineHeight: string;
     };
     md: {
-        fontSize: string[];
+        fontSize: (string | null)[];
         fontFamily: string;
         lineHeight: string;
     };
     sm: {
-        fontSize: string[];
+        fontSize: (string | null)[];
         fontFamily: string;
         lineHeight: string;
     };
     xs: {
-        fontSize: string[];
+        fontSize: (string | null)[];
         fontFamily: string;
         lineHeight: string;
     };
@@ -2348,11 +2348,11 @@ declare const theme: {
                     boxShadow: string;
                 };
                 backgroundColor: string;
-                boxShadow: string;
                 appearance: string;
                 border: string;
                 overflow: string;
                 fontSize: string;
+                display: string;
                 transitionProperty: string;
                 transitionDuration: string;
                 borderRadius: string;
@@ -6539,6 +6539,7 @@ declare const theme: {
         "lg-dashed": string;
     };
     breakpoints: {
+        base: string;
         sm: string;
         md: string;
         lg: string;
@@ -6802,37 +6803,37 @@ declare const theme: {
     }, string>;
     textStyles: {
         "2xl": {
-            fontSize: string[];
+            fontSize: (string | null)[];
             fontFamily: string;
             lineHeight: string;
         };
         "xl-display": {
-            fontSize: string[];
+            fontSize: (string | null)[];
             fontFamily: string;
             lineHeight: string;
         };
         "xl-sans": {
-            fontSize: string[];
+            fontSize: (string | null)[];
             fontFamily: string;
             lineHeight: string;
         };
         lg: {
-            fontSize: string[];
+            fontSize: (string | null)[];
             fontFamily: string;
             lineHeight: string;
         };
         md: {
-            fontSize: string[];
+            fontSize: (string | null)[];
             fontFamily: string;
             lineHeight: string;
         };
         sm: {
-            fontSize: string[];
+            fontSize: (string | null)[];
             fontFamily: string;
             lineHeight: string;
         };
         xs: {
-            fontSize: string[];
+            fontSize: (string | null)[];
             fontFamily: string;
             lineHeight: string;
         };

package/dist/index.js

@@ -18665,11 +18665,12 @@ var breakpoints2;
 var init_breakpoints = __esm({
   "src/theme/foundations/breakpoints.ts"() {
     breakpoints2 = {
+      base: "0px",
       sm: tokens10__namespace.default.size.breakpoint.sm,
       md: tokens10__namespace.default.size.breakpoint.md,
       lg: tokens10__namespace.default.size.breakpoint.lg,
-      xl: tokens10__namespace.default.size.breakpoint.lg,
-      "2xl": tokens10__namespace.default.size.breakpoint.lg
+      xl: tokens10__namespace.default.size.breakpoint.xl,
+      "2xl": tokens10__namespace.default.size.breakpoint.xl
     };
   }
 });
@@ -18819,6 +18820,7 @@ var init_textStyles = __esm({
       "2xl": {
         fontSize: [
           tokens10__namespace.default.font.style.xxl["font-size"].mobile,
+          null,
           tokens10__namespace.default.font.style.xxl["font-size"].desktop
         ],
         fontFamily: tokens10__namespace.default.font.style.xxl["font-family"],
@@ -18827,6 +18829,7 @@ var init_textStyles = __esm({
       "xl-display": {
         fontSize: [
           tokens10__namespace.default.font.style["xl-display"]["font-size"].mobile,
+          null,
           tokens10__namespace.default.font.style["xl-display"]["font-size"].desktop
         ],
         fontFamily: tokens10__namespace.default.font.style["xl-display"]["font-family"],
@@ -18835,6 +18838,7 @@ var init_textStyles = __esm({
       "xl-sans": {
         fontSize: [
           tokens10__namespace.default.font.style["xl-sans"]["font-size"].mobile,
+          null,
           tokens10__namespace.default.font.style["xl-sans"]["font-size"].desktop
         ],
         fontFamily: tokens10__namespace.default.font.style["xl-sans"]["font-family"],
@@ -18843,6 +18847,7 @@ var init_textStyles = __esm({
       lg: {
         fontSize: [
           tokens10__namespace.default.font.style.lg["font-size"].mobile,
+          null,
           tokens10__namespace.default.font.style.lg["font-size"].desktop
         ],
         fontFamily: tokens10__namespace.default.font.style.lg["font-family"],
@@ -18851,6 +18856,7 @@ var init_textStyles = __esm({
       md: {
         fontSize: [
           tokens10__namespace.default.font.style.md["font-size"].mobile,
+          null,
           tokens10__namespace.default.font.style.md["font-size"].desktop
         ],
         fontFamily: tokens10__namespace.default.font.style.md["font-family"],
@@ -18859,6 +18865,7 @@ var init_textStyles = __esm({
       sm: {
         fontSize: [
           tokens10__namespace.default.font.style.sm["font-size"].mobile,
+          null,
           tokens10__namespace.default.font.style.sm["font-size"].desktop
         ],
         fontFamily: tokens10__namespace.default.font.style.sm["font-family"],
@@ -18867,6 +18874,7 @@ var init_textStyles = __esm({
       xs: {
         fontSize: [
           tokens10__namespace.default.font.style.xs["font-size"].mobile,
+          null,
           tokens10__namespace.default.font.style.xs["font-size"].desktop
         ],
         fontFamily: tokens10__namespace.default.font.style.xs["font-family"],
@@ -19460,28 +19468,24 @@ var init_button2 = __esm({
   }
 });
 function getColorSchemeBaseProps({ colorScheme }) {
-  var _a6, _b5;
+  var _a6;
   switch (colorScheme) {
     case "white":
       return {
-        backgroundColor: "white",
-        boxShadow: getBoxShadowString({
-          borderColor: "silver"
-        })
+        backgroundColor: "lightGrey"
       };
     case "grey":
       return {
-        backgroundColor: "lightGrey",
-        boxShadow: getBoxShadowString({
-          borderColor: "steel"
-        })
+        backgroundColor: "lightGrey"
       };
+    case "green": {
+      return {
+        backgroundColor: "seaMist"
+      };
+    }
     default:
       return {
-        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum",
-        boxShadow: getBoxShadowString({
-          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[200]) ?? "silver"
-        })
+        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum"
       };
   }
 }
@@ -19583,6 +19587,7 @@ var init_card2 = __esm({
         border: "none",
         overflow: "hidden",
         fontSize: "inherit",
+        display: "block",
         transitionProperty: "common",
         transitionDuration: "fast",
         borderRadius: "md",

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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-QHD5YJ6K.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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-GIXEJPV7.mjs';

package/package.json

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

package/src/theme/components/card.ts

@@ -9,6 +9,7 @@ const config = defineStyleConfig({
     border: "none",
     overflow: "hidden",
     fontSize: "inherit",
+    display: "block",
     transitionProperty: "common",
     transitionDuration: "fast",
     borderRadius: "md",
@@ -60,29 +61,24 @@ type CardThemeProps = {
 
 function getColorSchemeBaseProps({ colorScheme }: CardThemeProps): {
   backgroundColor: string;
-  boxShadow: string;
 } {
   switch (colorScheme) {
     case "white":
       return {
-        backgroundColor: "white",
-        boxShadow: getBoxShadowString({
-          borderColor: "silver",
-        }),
+        backgroundColor: "lightGrey",
       };
     case "grey":
       return {
         backgroundColor: "lightGrey",
-        boxShadow: getBoxShadowString({
-          borderColor: "steel",
-        }),
       };
+    case "green": {
+      return {
+        backgroundColor: "seaMist",
+      };
+    }
     default:
       return {
         backgroundColor: colors[colorScheme]?.[100] ?? "platinum",
-        boxShadow: getBoxShadowString({
-          borderColor: colors[colorScheme]?.[200] ?? "silver",
-        }),
       };
   }
 }

package/src/theme/foundations/breakpoints.ts

@@ -1,9 +1,10 @@
 import tokens from "@vygruppen/spor-design-tokens";
 
 export const breakpoints = {
+  base: "0px",
   sm: tokens.size.breakpoint.sm,
   md: tokens.size.breakpoint.md,
   lg: tokens.size.breakpoint.lg,
-  xl: tokens.size.breakpoint.lg,
-  "2xl": tokens.size.breakpoint.lg,
+  xl: tokens.size.breakpoint.xl,
+  "2xl": tokens.size.breakpoint.xl,
 };

package/src/theme/foundations/textStyles.ts

@@ -4,6 +4,7 @@ export const textStyles = {
   "2xl": {
     fontSize: [
       tokens.font.style.xxl["font-size"].mobile,
+      null,
       tokens.font.style.xxl["font-size"].desktop,
     ],
     fontFamily: tokens.font.style.xxl["font-family"],
@@ -12,6 +13,7 @@ export const textStyles = {
   "xl-display": {
     fontSize: [
       tokens.font.style["xl-display"]["font-size"].mobile,
+      null,
       tokens.font.style["xl-display"]["font-size"].desktop,
     ],
     fontFamily: tokens.font.style["xl-display"]["font-family"],
@@ -20,6 +22,7 @@ export const textStyles = {
   "xl-sans": {
     fontSize: [
       tokens.font.style["xl-sans"]["font-size"].mobile,
+      null,
       tokens.font.style["xl-sans"]["font-size"].desktop,
     ],
     fontFamily: tokens.font.style["xl-sans"]["font-family"],
@@ -28,6 +31,7 @@ export const textStyles = {
   lg: {
     fontSize: [
       tokens.font.style.lg["font-size"].mobile,
+      null,
       tokens.font.style.lg["font-size"].desktop,
     ],
     fontFamily: tokens.font.style.lg["font-family"],
@@ -36,6 +40,7 @@ export const textStyles = {
   md: {
     fontSize: [
       tokens.font.style.md["font-size"].mobile,
+      null,
       tokens.font.style.md["font-size"].desktop,
     ],
     fontFamily: tokens.font.style.md["font-family"],
@@ -44,6 +49,7 @@ export const textStyles = {
   sm: {
     fontSize: [
       tokens.font.style.sm["font-size"].mobile,
+      null,
       tokens.font.style.sm["font-size"].desktop,
     ],
     fontFamily: tokens.font.style.sm["font-family"],
@@ -52,6 +58,7 @@ export const textStyles = {
   xs: {
     fontSize: [
       tokens.font.style.xs["font-size"].mobile,
+      null,
       tokens.font.style.xs["font-size"].desktop,
     ],
     fontFamily: tokens.font.style.xs["font-family"],