@vygruppen/spor-react 9.0.0 → 9.0.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@9.0.0 build
+> @vygruppen/spor-react@9.0.2 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js 487.65 KB
-CJS ⚡️ Build success in 2158ms
+CJS dist/index.js 487.81 KB
+CJS ⚡️ Build success in 2121ms
 ESM dist/index.mjs                      2.02 KB
-ESM dist/CountryCodeSelect-LFDBAHV7.mjs 1.19 KB
-ESM dist/chunk-BWLVKMWU.mjs             381.71 KB
-ESM ⚡️ Build success in 2159ms
-DTS ⚡️ Build success in 11050ms
+ESM dist/CountryCodeSelect-ANZFGZSX.mjs 1.19 KB
+ESM dist/chunk-A5E3F3T5.mjs             381.87 KB
+ESM ⚡️ Build success in 2123ms
+DTS ⚡️ Build success in 10634ms
 DTS dist/index.d.ts  307.91 KB
 DTS dist/index.d.mts 307.91 KB

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @vygruppen/spor-react
 
+## 9.0.2
+
+### Patch Changes
+
+- 6bd954e: Use CSS variable to avoid possible nullpointer"
+
+## 9.0.1
+
+### Patch Changes
+
+- ce90ed5: Use the newest version of our design tokens
+- Updated dependencies [d2cc084]
+  - @vygruppen/spor-design-tokens@3.4.0
+
 ## 9.0.0
 
 ### Major Changes

package/dist/{CountryCodeSelect-LFDBAHV7.mjs → CountryCodeSelect-ANZFGZSX.mjs}

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

package/dist/{chunk-BWLVKMWU.mjs → chunk-A5E3F3T5.mjs}

@@ -1,7 +1,7 @@
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
 export { tokens10 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, 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, DrawerCloseButton, DrawerBody, DarkMode, PopoverCloseButton, usePopoverContext, 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, 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, DrawerCloseButton, DrawerBody, DarkMode, PopoverCloseButton, usePopoverContext, 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 React69 from 'react';
 import React69__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__ */ React69__default.createElement(Box, { __css: styles3, ...props, ref }, children);
+    return /* @__PURE__ */ React69__default.createElement(chakra.div, { sx: styles3, ...props, ref }, children);
   }
 );
 var Badge = forwardRef(
@@ -3340,7 +3340,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-LFDBAHV7.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-ANZFGZSX.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -10583,7 +10583,10 @@ var getColorSchemeBaseProps = (props) => {
       return {
         outline: "1px solid",
         outlineColor: "silver",
-        backgroundColor: mode("white", "whiteAlpha.100")(props),
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, white 10%, var(--spor-colors-surface-default-dark))`
+        )(props),
         color: "inherit"
       };
     case "grey":
@@ -10629,7 +10632,10 @@ var getColorSchemeHoverProps = (props) => {
   switch (props.colorScheme) {
     case "white":
       return {
-        backgroundColor: mode("white", "whiteAlpha.200")(props),
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, white 20%, var(--spor-colors-surface-default-dark))`
+        )(props),
         outlineColor: "steel"
       };
     case "grey":
@@ -10645,7 +10651,7 @@ var getColorSchemeHoverProps = (props) => {
 };
 var getColorSchemeActiveProps = (props) => {
   var _a6, _b5;
-  const { colorScheme, size: size2 } = props;
+  const { colorScheme } = props;
   switch (colorScheme) {
     case "white":
       return {

package/dist/index.js

@@ -1117,14 +1117,13 @@ var init_breadcrumb = __esm({
 exports.Card = void 0;
 var init_Card = __esm({
   "src/card/Card.tsx"() {
-    init_layout();
     exports.Card = react.forwardRef(
       ({ size: size2 = "sm", colorScheme = "white", children, ...props }, ref) => {
         const styles3 = react.useStyleConfig("Card", {
           colorScheme,
           size: size2
         });
-        return /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { __css: styles3, ...props, ref }, children);
+        return /* @__PURE__ */ React69__namespace.default.createElement(react.chakra.div, { sx: styles3, ...props, ref }, children);
       }
     );
   }
@@ -12077,7 +12076,10 @@ var init_card2 = __esm({
           return {
             outline: "1px solid",
             outlineColor: "silver",
-            backgroundColor: themeTools.mode("white", "whiteAlpha.100")(props),
+            backgroundColor: themeTools.mode(
+              "white",
+              `color-mix(in srgb, white 10%, var(--spor-colors-surface-default-dark))`
+            )(props),
             color: "inherit"
           };
         case "grey":
@@ -12105,7 +12107,10 @@ var init_card2 = __esm({
       switch (props.colorScheme) {
         case "white":
           return {
-            backgroundColor: themeTools.mode("white", "whiteAlpha.200")(props),
+            backgroundColor: themeTools.mode(
+              "white",
+              `color-mix(in srgb, white 20%, var(--spor-colors-surface-default-dark))`
+            )(props),
             outlineColor: "steel"
           };
         case "grey":
@@ -12121,7 +12126,7 @@ var init_card2 = __esm({
     };
     getColorSchemeActiveProps = (props) => {
       var _a6, _b5;
-      const { colorScheme, size: size2 } = props;
+      const { colorScheme } = props;
       switch (colorScheme) {
         case "white":
           return {

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, 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, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, 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, 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-BWLVKMWU.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, 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, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, 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, 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-A5E3F3T5.mjs';

package/package.json

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

package/src/card/Card.tsx

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

package/src/theme/components/card.ts

@@ -17,7 +17,6 @@ const config = defineStyleConfig({
     // Except for white cards, all cards are light mode always
     color: "text.default.light",
     ...getColorSchemeBaseProps(props),
-
     "button&, a&, label&, &.is-clickable": {
       outline: "1px solid",
       ...getColorSchemeClickableProps(props),
@@ -74,7 +73,7 @@ type CardThemeProps = {
     | "yellow"
     | "orange"
     | "red";
-  size: "sm" | "lg";
+  theme: any;
 };
 
 const getColorSchemeBaseProps = (props: CardThemeProps) => {
@@ -83,7 +82,10 @@ const getColorSchemeBaseProps = (props: CardThemeProps) => {
       return {
         outline: "1px solid",
         outlineColor: "silver",
-        backgroundColor: mode("white", "whiteAlpha.100")(props),
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, white 10%, var(--spor-colors-surface-default-dark))`,
+        )(props),
         color: "inherit",
       };
     case "grey":
@@ -129,7 +131,10 @@ const getColorSchemeHoverProps = (props: CardThemeProps) => {
   switch (props.colorScheme) {
     case "white":
       return {
-        backgroundColor: mode("white", "whiteAlpha.200")(props),
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, white 20%, var(--spor-colors-surface-default-dark))`,
+        )(props),
         outlineColor: "steel",
       };
     case "grey":
@@ -144,7 +149,7 @@ const getColorSchemeHoverProps = (props: CardThemeProps) => {
   }
 };
 const getColorSchemeActiveProps = (props: CardThemeProps) => {
-  const { colorScheme, size } = props;
+  const { colorScheme } = props;
   switch (colorScheme) {
     case "white":
       return {